{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "title": "Collapsible",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A single disclosure panel with a generous trigger, visible open state, and reduced-motion-aware content transition.",
  "dependencies": [
    "radix-ui",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/collapsible.tsx",
      "content": "// Ballmac UI: Collapsible. https://ui.ballmac.com/components/collapsible\n\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Collapsible as Primitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\ntype CollapsibleProps = React.ComponentProps<typeof Primitive.Root>;\nfunction Collapsible({ className, ...props }: CollapsibleProps) {\n  return (\n    <Primitive.Root\n      data-slot=\"collapsible\"\n      className={cn(\"w-full\", className)}\n      {...props}\n    />\n  );\n}\ntype CollapsibleTriggerProps = React.ComponentProps<\n  typeof Primitive.Trigger\n> & {\n  /** Show the rotating disclosure chevron after the label. */\n  showChevron?: boolean;\n};\nfunction CollapsibleTrigger({\n  className,\n  children,\n  showChevron = true,\n  ...props\n}: CollapsibleTriggerProps) {\n  return (\n    <Primitive.Trigger\n      data-slot=\"collapsible-trigger\"\n      className={cn(\n        \"group flex min-h-11 w-full items-center justify-between gap-3 rounded-lg px-3 text-start text-sm font-medium outline-none transition-colors duration-150 hover:bg-accent/70 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showChevron && (\n        <ChevronDown\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180 motion-reduce:transition-none\"\n        />\n      )}\n    </Primitive.Trigger>\n  );\n}\ntype CollapsibleContentProps = React.ComponentProps<typeof Primitive.Content>;\nfunction CollapsibleContent({ className, ...props }: CollapsibleContentProps) {\n  return (\n    <Primitive.Content\n      data-slot=\"collapsible-content\"\n      className={cn(\n        \"overflow-hidden text-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nexport {\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  type CollapsibleProps,\n  type CollapsibleTriggerProps,\n  type CollapsibleContentProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/collapsible.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "disclosure",
      "details",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Reveals one optional section of information with a keyboard-accessible disclosure trigger.",
      "whenToUse": [
        "Advanced settings",
        "Supporting detail in a dense card"
      ],
      "whenNotToUse": [
        "Several related disclosures; use accordion",
        "Primary content that should always be visible"
      ],
      "composesWith": [
        "card"
      ],
      "a11y": [
        {
          "keys": "Enter / Space",
          "action": "Opens or closes the disclosure"
        },
        {
          "keys": "Tab",
          "action": "Moves into visible content"
        }
      ],
      "customization": [
        "controlled or uncontrolled open state",
        "optional trigger chevron"
      ]
    },
    "examples": [
      "collapsible-demo",
      "collapsible-states"
    ],
    "url": "https://ui.ballmac.com/components/collapsible"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}