{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"components-collapsible-icon-collapsible","type":"registry:block","title":"Icon Collapsible","files":[{"path":"components/blocks/components/collapsible/icon-collapsible.tsx","content":"import {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport { ChevronDown, ChevronUp, ShoppingCart } from 'lucide-react';\nimport { useState } from 'react';\n\nexport default function IconCollapsible() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div className=\"mx-auto max-w-md py-6\">\n      <Collapsible\n        className=\"w-full overflow-hidden rounded-md border\"\n        open={isOpen}\n        onOpenChange={setIsOpen}\n      >\n        <div className=\"bg-muted/5 border-b\">\n          <CollapsibleTrigger className=\"hover:bg-muted/10 flex w-full items-center justify-between px-4 py-3 transition-colors\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"bg-primary/10 flex h-8 w-8 items-center justify-center rounded-full\">\n                <ShoppingCart className=\"text-primary h-4 w-4\" />\n              </div>\n              <span className=\"font-medium\">Order Details</span>\n            </div>\n            {isOpen ? (\n              <ChevronUp className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n            ) : (\n              <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n            )}\n          </CollapsibleTrigger>\n        </div>\n        <CollapsibleContent>\n          <div className=\"text-muted-foreground px-4 py-3 text-sm\">\n            <ul className=\"space-y-2\">\n              <li className=\"flex justify-between\">\n                <span>Product</span>\n                <span className=\"font-medium\">Premium Widget</span>\n              </li>\n              <li className=\"flex justify-between\">\n                <span>Quantity</span>\n                <span className=\"font-medium\">2</span>\n              </li>\n              <li className=\"flex justify-between\">\n                <span>Price</span>\n                <span className=\"font-medium\">$99.99</span>\n              </li>\n              <li className=\"mt-2 flex justify-between border-t pt-2\">\n                <span>Total</span>\n                <span className=\"font-medium\">$199.98</span>\n              </li>\n            </ul>\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/components/collapsible/icon-collapsible.tsx"},{"path":"components/ui/collapsible.tsx","content":"\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n","type":"registry:ui","target":"components/ui/collapsible.tsx"}],"description":"A collapsible row with a chevron icon that rotates as the panel opens and closes. Use it in menus where a clear visual cue tells readers it expands.","dependencies":["lucide-react","radix-ui"]}