{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radix-collapsible",
  "type": "registry:ui",
  "title": "Collapsible",
  "description": "An interactive component which expands/collapses a panel.",
  "dependencies": [
    "motion",
    "radix-ui"
  ],
  "files": [
    {
      "path": "registry/radix/collapsible/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport {\n  AnimatePresence,\n  motion,\n  type HTMLMotionProps,\n  type Transition,\n} from 'motion/react';\n\ntype CollapsibleContextType = {\n  isOpen: boolean;\n};\n\nconst CollapsibleContext = React.createContext<\n  CollapsibleContextType | undefined\n>(undefined);\n\nconst useCollapsible = (): CollapsibleContextType => {\n  const context = React.useContext(CollapsibleContext);\n  if (!context) {\n    throw new Error('useCollapsible must be used within a Collapsible');\n  }\n  return context;\n};\n\ntype CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>;\n\nfunction Collapsible({ children, ...props }: CollapsibleProps) {\n  const [isOpen, setIsOpen] = React.useState(\n    props?.open ?? props?.defaultOpen ?? false,\n  );\n\n  React.useEffect(() => {\n    if (props?.open !== undefined) setIsOpen(props.open);\n  }, [props?.open]);\n\n  const handleOpenChange = React.useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      props.onOpenChange?.(open);\n    },\n    [props],\n  );\n\n  return (\n    <CollapsibleContext.Provider value={{ isOpen }}>\n      <CollapsiblePrimitive.Root\n        data-slot=\"collapsible\"\n        {...props}\n        onOpenChange={handleOpenChange}\n      >\n        {children}\n      </CollapsiblePrimitive.Root>\n    </CollapsibleContext.Provider>\n  );\n}\n\ntype CollapsibleTriggerProps = React.ComponentProps<\n  typeof CollapsiblePrimitive.Trigger\n>;\n\nfunction CollapsibleTrigger(props: CollapsibleTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  );\n}\n\ntype CollapsibleContentProps = React.ComponentProps<\n  typeof CollapsiblePrimitive.Content\n> &\n  HTMLMotionProps<'div'> & {\n    transition?: Transition;\n  };\n\nfunction CollapsibleContent({\n  className,\n  children,\n  transition = { type: 'spring', stiffness: 150, damping: 22 },\n  ...props\n}: CollapsibleContentProps) {\n  const { isOpen } = useCollapsible();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <CollapsiblePrimitive.Content asChild forceMount {...props}>\n          <motion.div\n            key=\"collapsible-content\"\n            data-slot=\"collapsible-content\"\n            layout\n            initial={{ opacity: 0, height: 0, overflow: 'hidden' }}\n            animate={{ opacity: 1, height: 'auto', overflow: 'hidden' }}\n            exit={{ opacity: 0, height: 0, overflow: 'hidden' }}\n            transition={transition}\n            className={className}\n            {...props}\n          >\n            {children}\n          </motion.div>\n        </CollapsiblePrimitive.Content>\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  useCollapsible,\n  type CollapsibleContextType,\n  type CollapsibleProps,\n  type CollapsibleTriggerProps,\n  type CollapsibleContentProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/radix/collapsible.tsx"
    }
  ]
}