{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cookie-consent-bar",
  "title": "Cookie Consent — Bar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/cookie-consent-bar/CookieConsentBar.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface CookieConsentBarProps {\n    storageKey?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from 'svelte'\n  import { fly } from 'svelte/transition'\n  import { Cookie } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Separator } from '$lib/components/ui/separator'\n\n  let { storageKey = 'uipkge:consent' }: CookieConsentBarProps = $props()\n\n  let visible = $state(false)\n\n  function decide(choice: 'accepted' | 'rejected') {\n    visible = false\n    try {\n      window.localStorage.setItem(storageKey, choice)\n    } catch {\n      // Blocked storage: the choice holds for this page view only.\n    }\n  }\n\n  onMount(() => {\n    try {\n      visible = !window.localStorage.getItem(storageKey)\n    } catch {\n      visible = true\n    }\n  })\n</script>\n\n{#if visible}\n  <div\n    data-slot=\"cookie-consent-bar\"\n    class=\"border-border bg-card/95 fixed inset-x-0 bottom-0 z-50 border-t backdrop-blur\"\n    role=\"region\"\n    aria-label=\"Cookie consent\"\n    transition:fly={{ y: 64, duration: 200 }}\n  >\n    <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-4 lg:flex-row lg:items-center lg:gap-8\">\n      <div class=\"flex min-w-0 items-start gap-3\">\n        <Cookie class=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n        <div class=\"min-w-0\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <p class=\"text-sm font-medium\">We store two things</p>\n            <Badge variant=\"outline\">No ad tracking</Badge>\n          </div>\n          <p class=\"text-muted-foreground mt-1 text-sm leading-relaxed\">\n            A session cookie so you stay signed in, and an analytics cookie recording which pages get read.\n            Rejecting keeps the first and drops the second.\n          </p>\n        </div>\n      </div>\n\n      <Separator orientation=\"vertical\" class=\"hidden h-10 lg:block\" />\n\n      <!-- Reject carries the same visual weight as accept. A ghost \"reject\"\n           beside a solid \"accept\" is a dark pattern with extra steps. -->\n      <div class=\"flex shrink-0 flex-wrap items-center gap-2\">\n        <Button variant=\"outline\" onclick={() => decide('rejected')}>Reject analytics</Button>\n        <Button onclick={() => decide('accepted')}>Accept</Button>\n        <Button variant=\"ghost\" size=\"sm\">Manage</Button>\n      </div>\n    </div>\n  </div>\n{/if}\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/cookie-consent-bar/CookieConsentBar.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/separator.json"
  ],
  "description": "Bottom consent bar offering accept, reject, and manage as equally weighted actions, with a one-line statement of what is actually stored.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "cookie-consent"
}