{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"components-collapsible-grouped-collapsible","type":"registry:block","title":"Grouped Collapsible","files":[{"path":"components/blocks/components/collapsible/grouped-collapsible.tsx","content":"import {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useState } from 'react';\n\nexport default function GroupedCollapsible() {\n  const [openSections, setOpenSections] = useState<Record<string, boolean>>({\n    shipping: false,\n    payment: false,\n    returns: false,\n  });\n\n  const toggleSection = (section: string) => {\n    setOpenSections((prev) => ({\n      ...prev,\n      [section]: !prev[section],\n    }));\n  };\n\n  return (\n    <div className=\"mx-auto max-w-md py-6\">\n      <div className=\"divide-y overflow-hidden rounded-md border\">\n        {/* Shipping Section */}\n        <Collapsible\n          className=\"w-full\"\n          open={openSections.shipping}\n          onOpenChange={() => toggleSection('shipping')}\n        >\n          <CollapsibleTrigger className=\"hover:bg-muted/10 flex w-full items-center justify-between px-4 py-3 transition-colors\">\n            <span className=\"font-medium\">Shipping Information</span>\n            {openSections.shipping ? (\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          <CollapsibleContent>\n            <div className=\"text-muted-foreground border-t px-4 py-3 text-sm\">\n              <p>\n                We offer free shipping on all orders over $50. Standard shipping\n                takes 3-5 business days.\n              </p>\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n\n        {/* Payment Section */}\n        <Collapsible\n          className=\"w-full\"\n          open={openSections.payment}\n          onOpenChange={() => toggleSection('payment')}\n        >\n          <CollapsibleTrigger className=\"hover:bg-muted/10 flex w-full items-center justify-between px-4 py-3 transition-colors\">\n            <span className=\"font-medium\">Payment Options</span>\n            {openSections.payment ? (\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          <CollapsibleContent>\n            <div className=\"text-muted-foreground border-t px-4 py-3 text-sm\">\n              <p>\n                We accept all major credit cards, PayPal, and Apple Pay. All\n                transactions are secure and encrypted.\n              </p>\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n\n        {/* Returns Section */}\n        <Collapsible\n          className=\"w-full\"\n          open={openSections.returns}\n          onOpenChange={() => toggleSection('returns')}\n        >\n          <CollapsibleTrigger className=\"hover:bg-muted/10 flex w-full items-center justify-between px-4 py-3 transition-colors\">\n            <span className=\"font-medium\">Return Policy</span>\n            {openSections.returns ? (\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          <CollapsibleContent>\n            <div className=\"text-muted-foreground border-t px-4 py-3 text-sm\">\n              <p>\n                Returns are accepted within 30 days of purchase. Items must be\n                in original condition with tags attached.\n              </p>\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/components/collapsible/grouped-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":"Several collapsible panels stacked together so readers open one section at a time. Good for settings pages where related options sit in separate groups.","dependencies":["lucide-react","radix-ui"]}