{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-radix-collapsible",
  "title": "Radix Collapsible",
  "description": "An interactive component which expands/collapses a panel.",
  "dependencies": [
    "motion",
    "radix-ui"
  ],
  "registryDependencies": [
    "@animate-ui/v1/lib-get-strict-context",
    "@animate-ui/v1/hooks-use-controlled-state"
  ],
  "files": [
    {
      "path": "registry/primitives/radix/collapsible/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype CollapsibleContextType = {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n};\n\nconst [CollapsibleProvider, useCollapsible] =\n  getStrictContext<CollapsibleContextType>('CollapsibleContext');\n\ntype CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>;\n\nfunction Collapsible(props: CollapsibleProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <CollapsibleProvider value={{ isOpen, setIsOpen }}>\n      <CollapsiblePrimitive.Root\n        data-slot=\"collapsible\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </CollapsibleProvider>\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 = Omit<\n  React.ComponentProps<typeof CollapsiblePrimitive.Content>,\n  'asChild' | 'forceMount'\n> &\n  HTMLMotionProps<'div'> & {\n    keepRendered?: boolean;\n  };\n\nfunction CollapsibleContent({\n  keepRendered = false,\n  transition = { duration: 0.35, ease: 'easeInOut' },\n  ...props\n}: CollapsibleContentProps) {\n  const { isOpen } = useCollapsible();\n\n  return (\n    <AnimatePresence>\n      {keepRendered ? (\n        <CollapsiblePrimitive.Content asChild forceMount>\n          <motion.div\n            key=\"collapsible-content\"\n            data-slot=\"collapsible-content\"\n            layout\n            initial={{ opacity: 0, height: 0, overflow: 'hidden', y: 20 }}\n            animate={\n              isOpen\n                ? { opacity: 1, height: 'auto', overflow: 'hidden', y: 0 }\n                : { opacity: 0, height: 0, overflow: 'hidden', y: 20 }\n            }\n            transition={transition}\n            {...props}\n          />\n        </CollapsiblePrimitive.Content>\n      ) : (\n        isOpen && (\n          <CollapsiblePrimitive.Content asChild forceMount>\n            <motion.div\n              key=\"collapsible-content\"\n              data-slot=\"collapsible-content\"\n              layout\n              initial={{ opacity: 0, height: 0, overflow: 'hidden', y: 20 }}\n              animate={{ opacity: 1, height: 'auto', overflow: 'hidden', y: 0 }}\n              exit={{ opacity: 0, height: 0, overflow: 'hidden', y: 20 }}\n              transition={transition}\n              {...props}\n            />\n          </CollapsiblePrimitive.Content>\n        )\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  useCollapsible,\n  type CollapsibleProps,\n  type CollapsibleTriggerProps,\n  type CollapsibleContentProps,\n  type CollapsibleContextType,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/primitives/radix/collapsible.tsx"
    }
  ],
  "type": "registry:ui"
}