{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:ui",
  "title": "Collapsible",
  "description": "Lightweight show/hide toggle wrapper with spring rotation.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react",
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/collapsible.tsx",
      "content": "import * as React from 'react'\nimport { motion } from 'motion/react'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface CollapsibleProps {\n  trigger: React.ReactNode\n  children: React.ReactNode\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  className?: string\n  contentClassName?: string\n}\n\nexport function Collapsible({\n  trigger,\n  children,\n  defaultOpen = false,\n  open,\n  onOpenChange,\n  className,\n  contentClassName,\n}: CollapsibleProps) {\n  const isControlled = open !== undefined\n  const [internal, setInternal] = React.useState(defaultOpen)\n  const isOpen = isControlled ? (open as boolean) : internal\n  const panelId = React.useId()\n\n  const toggle = () => {\n    const next = !isOpen\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }\n\n  return (\n    <div className={cn('w-full font-sans', className)}>\n      <button\n        type=\"button\"\n        aria-expanded={isOpen}\n        aria-controls={panelId}\n        onClick={toggle}\n        className={cn(\n          'flex w-full items-center justify-between gap-3 rounded-2xl bg-rk-surface px-4 py-3 text-left rk-border rk-shadow-sm transition-all cursor-pointer select-none',\n          'hover:bg-rk-primary/40 active:translate-y-[2px] active:shadow-none',\n          'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n          isOpen && 'rounded-b-none'\n        )}\n      >\n        <span className=\"text-sm font-extrabold text-rk-ink\">{trigger}</span>\n        <motion.span\n          animate={{ rotate: isOpen ? 180 : 0 }}\n          transition={{ type: 'spring', stiffness: 500, damping: 30 }}\n          className=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-rk-surface rk-border-sm\"\n        >\n          <ChevronDown className=\"h-3.5 w-3.5 stroke-[3]\" aria-hidden=\"true\" />\n        </motion.span>\n      </button>\n      <motion.div\n        id={panelId}\n        initial={false}\n        animate={{\n          height: isOpen ? 'auto' : 0,\n          opacity: isOpen ? 1 : 0,\n        }}\n        transition={{ duration: 0.25, ease: 'easeOut' }}\n        className=\"overflow-hidden\"\n      >\n        <div\n          className={cn(\n            'rounded-b-2xl border-t-0 bg-rk-surface px-4 pb-4 pt-3 rk-border',\n            contentClassName\n          )}\n        >\n          {children}\n        </div>\n      </motion.div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/collapsible.tsx"
    }
  ]
}