{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cookie-consent-banner",
  "title": "Cookie Consent Banner",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/cookie-consent-banner/CookieConsentBanner.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Cookie } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { cn } from '@/lib/utils'\n\nexport interface CookieConsentBannerProps {\n  variant?: 'bottom-bar' | 'card'\n  className?: string\n}\n\nexport function CookieConsentBanner({ variant = 'bottom-bar', className }: CookieConsentBannerProps) {\n  const [visible, setVisible] = React.useState(true)\n  const [showPreferences, setShowPreferences] = React.useState(false)\n  const [analytics, setAnalytics] = React.useState(true)\n  const [marketing, setMarketing] = React.useState(false)\n\n  const dismiss = () => setVisible(false)\n\n  const preferences = (\n    <>\n      <Separator />\n      <div className=\"flex items-center justify-between gap-4 py-1\">\n        <div>\n          <p className=\"text-sm font-medium\">Necessary</p>\n          <p className=\"text-muted-foreground text-xs\">Required for the site to function.</p>\n        </div>\n        <Switch checked disabled aria-label=\"Necessary cookies\" />\n      </div>\n      <div className=\"flex items-center justify-between gap-4 py-1\">\n        <div>\n          <p className=\"text-sm font-medium\">Analytics</p>\n          <p className=\"text-muted-foreground text-xs\">Helps us understand usage patterns.</p>\n        </div>\n        <Switch checked={analytics} onCheckedChange={setAnalytics} aria-label=\"Analytics cookies\" />\n      </div>\n      <div className=\"flex items-center justify-between gap-4 py-1\">\n        <div>\n          <p className=\"text-sm font-medium\">Marketing</p>\n          <p className=\"text-muted-foreground text-xs\">Used to personalize campaigns.</p>\n        </div>\n        <Switch checked={marketing} onCheckedChange={setMarketing} aria-label=\"Marketing cookies\" />\n      </div>\n    </>\n  )\n\n  if (!visible) return null\n\n  return (\n    <div\n      data-slot=\"cookie-consent-banner\"\n      role=\"dialog\"\n      aria-label=\"Cookie consent\"\n      className={cn('animate-in fade-in duration-150', className)}\n    >\n      {variant === 'bottom-bar' ? (\n        <div className=\"bg-card border-border w-full border-t px-4 py-4 sm:px-6\">\n          <div className=\"mx-auto flex max-w-5xl flex-col gap-4\">\n            <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n              <div className=\"flex items-start gap-3\">\n                <span className=\"bg-primary/10 text-primary mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full\">\n                  <Cookie className=\"size-4\" aria-hidden=\"true\" />\n                </span>\n                <p className=\"text-muted-foreground max-w-xl text-sm leading-relaxed\">\n                  We use cookies to improve your experience and analyze traffic. Read our{' '}\n                  <a\n                    href=\"#\"\n                    className=\"text-foreground focus-visible:ring-ring rounded-sm font-medium underline underline-offset-4 outline-none focus-visible:ring-2\"\n                  >\n                    Cookie Policy\n                  </a>\n                  .\n                </p>\n              </div>\n              <div className=\"flex shrink-0 flex-wrap items-center gap-2\">\n                <Button variant=\"ghost\" size=\"sm\" onClick={() => setShowPreferences((v) => !v)}>\n                  {showPreferences ? 'Hide preferences' : 'Customize'}\n                </Button>\n                <Button variant=\"outline\" size=\"sm\" onClick={dismiss}>\n                  Reject\n                </Button>\n                <Button size=\"sm\" onClick={dismiss}>\n                  Accept all\n                </Button>\n              </div>\n            </div>\n\n            {showPreferences && (\n              <div className=\"flex flex-col gap-3\">\n                {preferences}\n                <div className=\"mt-1 flex justify-end\">\n                  <Button size=\"sm\" onClick={dismiss}>\n                    Save preferences\n                  </Button>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      ) : (\n        <div className=\"bg-card border-border mx-auto max-w-md rounded-xl border p-6 shadow-xs\">\n          <div className=\"flex flex-col gap-4\">\n            <div className=\"flex items-start gap-3\">\n              <span className=\"bg-primary/10 text-primary flex size-9 shrink-0 items-center justify-center rounded-full\">\n                <Cookie className=\"size-4\" aria-hidden=\"true\" />\n              </span>\n              <div>\n                <h3 className=\"text-sm font-semibold\">We value your privacy</h3>\n                <p className=\"text-muted-foreground mt-1 text-sm leading-relaxed\">\n                  We use cookies to improve your experience and analyze traffic. Read our{' '}\n                  <a\n                    href=\"#\"\n                    className=\"text-foreground focus-visible:ring-ring rounded-sm font-medium underline underline-offset-4 outline-none focus-visible:ring-2\"\n                  >\n                    Cookie Policy\n                  </a>\n                  .\n                </p>\n              </div>\n            </div>\n\n            {showPreferences && preferences}\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => setShowPreferences((v) => !v)}>\n                {showPreferences ? 'Hide preferences' : 'Customize'}\n              </Button>\n              <div className=\"ml-auto flex items-center gap-2\">\n                <Button variant=\"outline\" size=\"sm\" onClick={dismiss}>\n                  Reject\n                </Button>\n                <Button size=\"sm\" onClick={dismiss}>\n                  {showPreferences ? 'Save preferences' : 'Accept all'}\n                </Button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CookieConsentBanner.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "GDPR-style cookie consent banner with two variants: a full-width bottom bar and a compact card. Customize expands inline preferences with Necessary (always on), Analytics, and Marketing switches. Accept, Reject, and Save dismiss with a 150ms fade.",
  "categories": [
    "legal",
    "marketing",
    "feedback"
  ],
  "deprecated": true,
  "replacedBy": "cookie-consent"
}