{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morphing-panel",
  "type": "registry:ui",
  "title": "Morphing Panel",
  "description": "Accessible disclosure surface that morphs between explicit collapsed and expanded dimensions.",
  "dependencies": [
    "@base-ui/react@^1.6.0"
  ],
  "registryDependencies": [
    "http://127.0.0.1:3000/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/sources/control-ui/ui/morphing-panel.tsx",
      "target": "@components/control-ui/ui/morphing-panel.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport type { MorphingPanelContentProps, MorphingPanelProps, MorphingPanelTriggerProps } from \"@/components/control-ui/contracts\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { skinSlot } from \"@/components/control-ui/skin\";\n\nexport type {\n  MorphingPanelContentProps,\n  MorphingPanelDimensions,\n  MorphingPanelProps,\n  MorphingPanelTriggerProps,\n} from \"@/components/control-ui/contracts\";\n\ntype MorphingPanelStyle = CSSProperties & {\n  \"--morphing-panel-collapsed-height\": string;\n  \"--morphing-panel-collapsed-width\": string;\n  \"--morphing-panel-expanded-height\": string;\n  \"--morphing-panel-expanded-width\": string;\n};\n\nfunction MorphingPanelTriggerElement({\n  triggerProps,\n  open,\n  render,\n  className,\n  children,\n}: {\n  triggerProps: ComponentProps<\"button\">;\n  open: boolean;\n  render: MorphingPanelTriggerProps[\"render\"];\n  className?: string;\n  children: ReactNode;\n}) {\n  const panelState = open ? \"open\" : \"closed\";\n\n  return useRender({\n    defaultTagName: \"button\",\n    render,\n    state: { open },\n    props: {\n      ...triggerProps,\n      \"data-control-ui\": \"morphing-panel\",\n      \"data-slot\": \"trigger\",\n      \"data-state\": panelState,\n      className: cn(triggerProps.className, skinSlot(\"morphing-panel\", \"trigger\", { state: panelState }), className),\n      children,\n    },\n  });\n}\n\nexport function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }: MorphingPanelProps) {\n  const dimensions = {\n    \"--morphing-panel-collapsed-height\": collapsedSize.height,\n    \"--morphing-panel-collapsed-width\": collapsedSize.width,\n    \"--morphing-panel-expanded-height\": expandedSize.height,\n    \"--morphing-panel-expanded-width\": expandedSize.width,\n    ...style,\n  } satisfies MorphingPanelStyle;\n\n  return (\n    <CollapsiblePrimitive.Root\n      className={className}\n      style={dimensions}\n      render={(renderProps, state) => {\n        const panelState = state.open ? \"open\" : \"closed\";\n        return (\n          <div\n            {...renderProps}\n            data-control-ui=\"morphing-panel\"\n            data-slot=\"root\"\n            data-state={panelState}\n            data-surface=\"panel\"\n            className={cn(\n              \"relative isolate h-[var(--morphing-panel-collapsed-height)] w-[min(var(--morphing-panel-collapsed-width),100%)] max-w-full overflow-hidden\",\n              \"rounded-(--radius-control) bg-card text-card-foreground shadow-md ring-1 ring-border/80\",\n              \"transition-[width,height,border-radius,box-shadow] duration-[var(--duration-slow)] ease-[var(--ease-emphasized)]\",\n              \"data-[state=open]:h-[var(--morphing-panel-expanded-height)] data-[state=open]:w-[min(var(--morphing-panel-expanded-width),100%)] data-[state=open]:rounded-(--radius-panel) data-[state=open]:shadow-pop\",\n              skinSlot(\"morphing-panel\", \"root\", { state: panelState }),\n              renderProps.className,\n            )}\n          />\n        );\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function MorphingPanelTrigger({ render, className, children, ...props }: MorphingPanelTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn(\n        \"group/morphing-panel-trigger absolute top-0 right-0 z-10 flex size-full cursor-pointer items-center justify-between gap-2 rounded-[inherit] px-4 text-body font-medium outline-none transition-[top,right,width,height,border-radius,padding,color,background-color,box-shadow] duration-[var(--duration-slow)] ease-[var(--ease-emphasized)] hover:bg-foreground/6 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/20 data-[state=open]:top-2 data-[state=open]:right-2 data-[state=open]:size-9 data-[state=open]:justify-center data-[state=open]:rounded-(--radius-control) data-[state=open]:p-0 pointer-coarse:data-[state=open]:size-11 [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-[var(--duration-base)] [&>svg]:ease-[var(--ease-emphasized)] [&[data-state=open]>svg]:rotate-45\",\n      )}\n      {...props}\n      render={(triggerProps, state) => (\n        <MorphingPanelTriggerElement triggerProps={triggerProps} open={state.open} render={render} className={className}>\n          {children}\n        </MorphingPanelTriggerElement>\n      )}\n    />\n  );\n}\n\nexport function MorphingPanelContent({ className, ...props }: MorphingPanelContentProps) {\n  return (\n    <CollapsiblePrimitive.Panel\n      className={className}\n      render={(renderProps, state) => {\n        const panelState = state.open ? \"open\" : \"closed\";\n        return (\n          <div\n            {...renderProps}\n            data-control-ui=\"morphing-panel\"\n            data-slot=\"content\"\n            data-state={panelState}\n            className={cn(\n              \"absolute inset-0 overflow-hidden rounded-[inherit] opacity-100 outline-none\",\n              \"transition-[opacity,filter,translate] duration-[var(--duration-base)] ease-[var(--ease-standard)]\",\n              \"data-[starting-style]:-translate-y-1 data-[starting-style]:opacity-0 data-[starting-style]:blur-sm\",\n              \"data-[ending-style]:-translate-y-1 data-[ending-style]:opacity-0 data-[ending-style]:blur-sm\",\n              skinSlot(\"morphing-panel\", \"content\", { state: panelState }),\n              renderProps.className,\n            )}\n          />\n        );\n      }}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {}
}