{"$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 Accordion primitive for SmoothUI with CSS height panel and chevron rotation.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nexport type AccordionRootProps = ComponentProps<\n  typeof AccordionPrimitive.Root\n> & {\n  className?: string;\n};\n\nexport type AccordionItemProps = ComponentProps<\n  typeof AccordionPrimitive.Item\n> & {\n  className?: string;\n};\n\nexport type AccordionHeaderProps = ComponentProps<\n  typeof AccordionPrimitive.Header\n> & {\n  className?: string;\n};\n\nexport type AccordionTriggerProps = ComponentProps<\n  typeof AccordionPrimitive.Trigger\n> & {\n  className?: string;\n  children?: ReactNode;\n  /** Hide the chevron icon */\n  hideChevron?: boolean;\n};\n\nexport type AccordionPanelProps = ComponentProps<\n  typeof AccordionPrimitive.Panel\n> & {\n  className?: string;\n  children?: ReactNode;\n};\n\n/** Convenience alias for AutoTypeTable */\nexport type AccordionProps = AccordionRootProps;\n\nconst PANEL_EASE = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\n\n/**\n * SmoothUI Accordion — Base UI twin (default).\n * Root keeps a stable width (`overflow-hidden`); panel height via CSS vars.\n */\nconst AccordionRoot = ({ className, ...props }: AccordionRootProps) => (\n  <AccordionPrimitive.Root\n    className={cn(\n      \"flex w-full min-w-0 flex-col divide-y divide-foreground/15 overflow-hidden rounded-lg border border-foreground/20\",\n      className\n    )}\n    data-slot=\"accordion\"\n    {...props}\n  />\n);\n\nconst AccordionItem = ({ className, ...props }: AccordionItemProps) => (\n  <AccordionPrimitive.Item\n    className={cn(\"group min-w-0 overflow-hidden\", className)}\n    data-slot=\"accordion-item\"\n    {...props}\n  />\n);\n\nconst AccordionHeader = ({ className, ...props }: AccordionHeaderProps) => (\n  <AccordionPrimitive.Header\n    className={cn(\"m-0 flex w-full min-w-0\", className)}\n    data-slot=\"accordion-header\"\n    {...props}\n  />\n);\n\nconst AccordionTrigger = ({\n  className,\n  children,\n  hideChevron = false,\n  ...props\n}: AccordionTriggerProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  return (\n    <AccordionPrimitive.Trigger\n      className={cn(\n        \"group flex w-full min-w-0 select-none items-center justify-between gap-3 bg-transparent px-4 py-3.5 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        className\n      )}\n      data-slot=\"accordion-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    </AccordionPrimitive.Trigger>\n  );\n};\n\nconst AccordionPanel = ({\n  className,\n  children,\n  ...props\n}: AccordionPanelProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  return (\n    <AccordionPrimitive.Panel\n      className={cn(\n        \"h-[var(--accordion-panel-height)] overflow-hidden text-muted-foreground text-sm\",\n        shouldReduceMotion\n          ? \"data-ending-style:h-0 data-starting-style:h-0\"\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`,\n        className\n      )}\n      data-slot=\"accordion-panel\"\n      {...props}\n    >\n      <div className=\"px-4 pt-0 pb-4 leading-relaxed\">{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n};\n\nexport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n};\n\nexport default AccordionRoot;\n","path":"index.tsx","target":"components/smoothui/accordion/index.tsx","type":"registry:ui"}],"name":"accordion","registryDependencies":[],"title":"Accordion","type":"registry:ui"}