{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-tailwind",
  "type": "registry:item",
  "title": "Collapsible (Tailwind)",
  "description": "An expandable/collapsible panel controlled by a button.",
  "files": [
    {
      "path": "registry/brook/tailwind/ui/collapsible.tsx",
      "content": "\"use client\";\n\nimport { Collapsible } from \"@base-ui/react/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nfunction CollapsibleRoot({ className, ...props }: Collapsible.Root.Props) {\n  return (\n    <Collapsible.Root\n      className={cn(\"flex w-full max-w-56 flex-col justify-center text-foreground\", className)}\n      data-slot=\"collapsible-root\"\n      {...props}\n    />\n  );\n}\n\nfunction CollapsibleTrigger({ className, children, ...props }: Collapsible.Trigger.Props) {\n  return (\n    <Collapsible.Trigger\n      className={cn(\n        \"m-0 flex items-center justify-between rounded px-2 py-1 outline-none\",\n        \"bg-[var(--mix-card-15-bg)] text-foreground\",\n        \"cursor-pointer font-inherit font-medium text-sm leading-5\",\n        \"border border-border transition-all duration-150 ease-out\",\n        \"hover:bg-[var(--mix-card-50-bg)]\",\n        \"active:bg-[var(--mix-card-15-bg)]\",\n        \"focus-visible:outline-2 focus-visible:outline-ring\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        \"data-[disabled]:hover:bg-muted\",\n        className\n      )}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    >\n      {children}\n      <svg\n        aria-hidden=\"true\"\n        className={cn(\n          \"h-3 w-3 flex-shrink-0 text-muted-foreground\",\n          \"[&_path:first-child]:transition-transform [&_path:first-child]:duration-200 [&_path:first-child]:ease-[var(--ease-out-expo)]\",\n          \"[&_path:first-child]:origin-center\",\n          \"[&_path:last-child]:transition-transform [&_path:last-child]:duration-200 [&_path:last-child]:ease-[var(--ease-out-expo)]\",\n          \"[&_path:last-child]:origin-center\",\n          \"[[data-panel-open]_&_path:first-child]:-translate-y-2.5\",\n          \"[[data-panel-open]_&_path:last-child]:translate-y-2.5\"\n        )}\n        fill=\"none\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        width=\"16\"\n      >\n        <path d=\"m7 15 5 5 5-5\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" />\n        <path d=\"m7 9 5-5 5 5\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" />\n      </svg>\n    </Collapsible.Trigger>\n  );\n}\n\nfunction CollapsiblePanel({ className, ...props }: Collapsible.Panel.Props) {\n  return (\n    <Collapsible.Panel\n      className={cn(\n        \"flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden\",\n        \"box-border w-full text-sm leading-5 transition-all duration-150 ease-out\",\n        \"data-[ending-style]:h-0 data-[starting-style]:h-0\",\n        className\n      )}\n      data-slot=\"collapsible-panel\"\n      {...props}\n    />\n  );\n}\n\nexport { CollapsibleRoot as Collapsible, CollapsiblePanel, CollapsibleTrigger };\n",
      "type": "registry:file",
      "target": "~/components/ui/collapsible/collapsible.tsx"
    }
  ]
}