{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cookie-consent-5",
  "title": "Expandable Consent Banner",
  "description": "Cookie consent banner with accept and reject actions plus a Customize control that expands per-category consent switches inline.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "separator",
    "switch"
  ],
  "files": [
    {
      "path": "registry/blocks/cookie-consent/5/cookie-consent-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst categories = [\n  {\n    id: \"necessary\",\n    label: \"Strictly necessary\",\n    description: \"Required for the site to function. Always on.\",\n    required: true,\n  },\n  {\n    id: \"analytics\",\n    label: \"Analytics\",\n    description: \"Help us understand how the product is used.\",\n    required: false,\n  },\n  {\n    id: \"marketing\",\n    label: \"Marketing\",\n    description: \"Used to personalize ads and measure campaigns.\",\n    required: false,\n  },\n]\n\nexport default function CookieConsentBlock() {\n  const [open, setOpen] = useState(true)\n  const [expanded, setExpanded] = useState(false)\n  const [prefs, setPrefs] = useState({ analytics: true, marketing: false })\n\n  if (!open) return null\n\n  return (\n    <section className=\"flex min-h-svh w-full items-end justify-center bg-muted/30 px-4 py-6 sm:items-center\">\n      <div className=\"w-full max-w-lg rounded-lg border border-border bg-background shadow-lg\">\n        <div className=\"flex items-start justify-between gap-4 p-5\">\n          <div className=\"flex flex-col gap-1.5\">\n            <h2 className=\"font-heading text-sm font-semibold tracking-tight\">\n              We value your privacy\n            </h2>\n            <p className=\"text-sm text-muted-foreground\">\n              We use cookies to improve your experience, analyze traffic, and\n              personalize content. Choose which cookies to allow.\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setOpen(false)}\n            aria-label=\"Dismiss\"\n            className=\"shrink-0 text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"X\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"X\"\n              remixicon=\"RiCloseLine\"\n              className=\"size-5\"\n              aria-hidden=\"true\"\n            />\n          </button>\n        </div>\n\n        {expanded && (\n          <>\n            <Separator />\n            <div className=\"flex flex-col gap-4 p-5\">\n              {categories.map((category) => (\n                <div\n                  key={category.id}\n                  className=\"flex items-start justify-between gap-4\"\n                >\n                  <div className=\"flex flex-col gap-0.5\">\n                    <span className=\"text-sm font-medium\">\n                      {category.label}\n                    </span>\n                    <span className=\"text-xs text-muted-foreground\">\n                      {category.description}\n                    </span>\n                  </div>\n                  {category.required ? (\n                    <Switch checked disabled aria-label={category.label} />\n                  ) : (\n                    <Switch\n                      checked={prefs[category.id as keyof typeof prefs]}\n                      onCheckedChange={(checked) =>\n                        setPrefs((prev) => ({\n                          ...prev,\n                          [category.id]: checked,\n                        }))\n                      }\n                      aria-label={category.label}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          </>\n        )}\n\n        <Separator />\n        <div className=\"flex flex-col gap-2 p-5 sm:flex-row sm:justify-end\">\n          {!expanded && (\n            <Button\n              variant=\"ghost\"\n              onClick={() => setExpanded(true)}\n              className=\"sm:mr-auto\"\n            >\n              Customize\n            </Button>\n          )}\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>\n            Reject all\n          </Button>\n          <Button onClick={() => setOpen(false)}>\n            {expanded ? \"Save preferences\" : \"Accept all\"}\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/cookie-consent-5.tsx"
    }
  ],
  "meta": {
    "height": "237px",
    "tier": "free"
  },
  "categories": [
    "cookie-consent"
  ],
  "type": "registry:block"
}