{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":["@base-ui/react","lucide-react","motion"],"description":"Animated Collapsible primitive for SmoothUI with CSS height panel animation.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nexport type CollapsibleRootProps = ComponentProps<\n  typeof CollapsiblePrimitive.Root\n> & {\n  className?: string;\n};\n\nexport type CollapsibleTriggerProps = ComponentProps<\n  typeof CollapsiblePrimitive.Trigger\n> & {\n  className?: string;\n  children?: ReactNode;\n  hideChevron?: boolean;\n};\n\nexport type CollapsiblePanelProps = ComponentProps<\n  typeof CollapsiblePrimitive.Panel\n> & {\n  className?: string;\n  children?: ReactNode;\n};\n\n/** Convenience alias for AutoTypeTable */\nexport type CollapsibleProps = CollapsibleRootProps;\n\nconst PANEL_EASE = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\n\n/**\n * SmoothUI Collapsible — Base UI twin (default).\n * Single bordered card: open/close never changes outer width.\n */\nconst CollapsibleRoot = ({ className, ...props }: CollapsibleRootProps) => (\n  <CollapsiblePrimitive.Root\n    className={cn(\n      \"flex w-full min-w-0 flex-col overflow-hidden rounded-lg border border-foreground/20 bg-background\",\n      className\n    )}\n    data-slot=\"collapsible\"\n    {...props}\n  />\n);\n\nconst CollapsibleTrigger = ({\n  className,\n  children,\n  hideChevron = false,\n  ...props\n}: CollapsibleTriggerProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn(\n        \"group flex w-full min-w-0 select-none items-center justify-between gap-3 border-border border-transparent border-b bg-transparent px-4 py-3 text-left font-medium text-sm outline-none\",\n        \"hover:bg-foreground/5 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\",\n        \"data-disabled:pointer-events-none data-disabled:text-muted-foreground\",\n        \"data-panel-open:border-border\",\n        className\n      )}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    >\n      <span className=\"min-w-0 flex-1\">{children}</span>\n      {hideChevron ? null : (\n        <ChevronDown\n          aria-hidden\n          className={cn(\n            \"size-4 shrink-0 text-muted-foreground\",\n            shouldReduceMotion\n              ? \"transition-none\"\n              : `transition-transform duration-200 ${PANEL_EASE}`,\n            \"group-data-panel-open:rotate-180\"\n          )}\n        />\n      )}\n    </CollapsiblePrimitive.Trigger>\n  );\n};\n\nconst CollapsiblePanel = ({\n  className,\n  children,\n  ...props\n}: CollapsiblePanelProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  return (\n    <CollapsiblePrimitive.Panel\n      className={cn(\n        \"h-[var(--collapsible-panel-height)] overflow-hidden text-muted-foreground text-sm\",\n        shouldReduceMotion\n          ? \"data-ending-style:h-0 data-starting-style:h-0 [&[hidden]:not([hidden='until-found'])]:hidden\"\n          : `transition-[height,opacity] duration-200 ${PANEL_EASE} data-ending-style:h-0 data-starting-style:h-0 data-ending-style:opacity-0 data-starting-style:opacity-0 [&[hidden]:not([hidden='until-found'])]:hidden`,\n        className\n      )}\n      data-slot=\"collapsible-panel\"\n      {...props}\n    >\n      <div className=\"space-y-1 px-4 pt-1 pb-4 leading-relaxed\">{children}</div>\n    </CollapsiblePrimitive.Panel>\n  );\n};\n\nexport { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger };\n\nexport default CollapsibleRoot;\n","path":"index.tsx","target":"components/smoothui/collapsible/index.tsx","type":"registry:ui"}],"name":"collapsible","registryDependencies":[],"title":"Collapsible","type":"registry:ui"}