{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:ui",
  "title": "Collapsible",
  "description": "Shadcn compatible collapsible on Base UI: a full width trigger that shows or hides a panel of content. Accessible expanded state and keyboard support.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/collapsible.tsx",
      "type": "registry:ui",
      "target": "components/ui/collapsible.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Collapsible as CollapsibleNamespace } from \"@base-ui/react/collapsible\"\nimport { cn } from \"@/lib/utils\"\n\nconst CollapsibleRoot = CollapsibleNamespace.Root\nconst CollapsibleTriggerBase = CollapsibleNamespace.Trigger\nconst CollapsiblePanelBase = CollapsibleNamespace.Panel\n\nfunction Collapsible(props: React.ComponentProps<typeof CollapsibleRoot>) {\n  return <CollapsibleRoot data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({ className, ...props }: React.ComponentProps<typeof CollapsibleTriggerBase>) {\n  return (\n    <CollapsibleTriggerBase\n      data-slot=\"collapsible-trigger\"\n      className={cn(\n        \"flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium text-fg outline-none\",\n        \"hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CollapsiblePanel({ className, ...props }: React.ComponentProps<typeof CollapsiblePanelBase>) {\n  return (\n    <CollapsiblePanelBase\n      data-slot=\"collapsible-panel\"\n      className={cn(\"px-3 pb-3 text-sm text-fg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsiblePanel }\n"
    }
  ]
}