{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "consent-manager",
  "type": "registry:component",
  "title": "Consent Manager",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "A React component for managing user consent for cookies and tracking in Next.js applications.",
  "dependencies": [
    "@c15t/nextjs"
  ],
  "registryDependencies": [
    "@ncdai/utils",
    "button"
  ],
  "files": [
    {
      "path": "src/components/consent-manager.tsx",
      "content": "import {\n  ConsentManagerDialog,\n  ConsentManagerProvider,\n  CookieBanner,\n} from \"@c15t/nextjs\";\n\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nimport { ConsentManagerClient } from \"./consent-manager-client\";\n\nexport function ConsentManager({ children }: { children: React.ReactNode }) {\n  return (\n    <ConsentManagerProvider\n      options={{\n        mode: \"offline\",\n        consentCategories: [\"necessary\", \"measurement\"],\n        // ignoreGeoLocation: process.env.NODE_ENV === \"development\", // Useful for development to always view the banner.\n      }}\n    >\n      <CookieBanner\n        theme={{\n          \"banner.card\": {\n            noStyle: true,\n            className: cn(\n              \"relative w-full max-w-(--banner-max-width) divide-y overflow-hidden rounded-2xl\",\n              \"bg-popover text-popover-foreground shadow-popover ring ring-popover-border\"\n            ),\n          },\n          \"banner.header.title\": {\n            noStyle: true,\n            className: \"text-lg font-semibold text-foreground\",\n          },\n          \"banner.header.description\": {\n            noStyle: true,\n            className: \"text-sm text-muted-foreground\",\n          },\n          \"banner.footer\": {\n            style: {\n              \"--banner-footer-background-color\": \"transparent\",\n              \"--banner-footer-background-color-dark\": \"transparent\",\n            },\n          },\n          \"banner.footer.reject-button\": {\n            noStyle: true,\n            className: buttonVariants({ variant: \"secondary\" }),\n          },\n          \"banner.footer.accept-button\": {\n            noStyle: true,\n            className: buttonVariants({ variant: \"secondary\" }),\n          },\n          \"banner.footer.customize-button\": {\n            noStyle: true,\n            className: buttonVariants({ variant: \"default\" }),\n          },\n        }}\n      />\n\n      <ConsentManagerDialog\n        theme={{\n          \"dialog.root\": {\n            noStyle: true,\n            style: {\n              \"--dialog-card-radius\": \"1rem\",\n\n              \"--dialog-background-color\": \"var(--background)\",\n              \"--dialog-background-color-dark\": \"var(--background)\",\n\n              \"--dialog-border-color\": \"var(--border)\",\n              \"--dialog-border-color-dark\": \"var(--border)\",\n            },\n            className:\n              \"rounded-2xl border-none bg-background shadow-popover ring ring-popover-border\",\n          },\n          \"dialog.overlay\": {\n            className:\n              \"[--dialog-overlay-background-color-dark:var(--color-black)]/50\",\n          },\n          \"dialog.title\": {\n            noStyle: true,\n            className: \"text-lg leading-none font-semibold text-foreground\",\n          },\n          \"dialog.description\": {\n            noStyle: true,\n            className: \"text-sm text-muted-foreground\",\n          },\n          \"dialog.footer\": {\n            style: {\n              \"--dialog-stroke-color\": \"var(--border)\",\n              \"--dialog-stroke-color-dark\": \"var(--border)\",\n\n              \"--dialog-branding-icon-height\": \"1.125rem\",\n              \"--dialog-branding-font-size\": \"0.875rem\",\n\n              \"--dialog-branding-focus-color\":\n                \"color-mix(in oklab, var(--ring) 50%, transparent)\",\n              \"--dialog-branding-focus-color-dark\":\n                \"color-mix(in oklab, var(--ring) 50%, transparent)\",\n\n              \"--dialog-foreground-color\": \"var(--muted-foreground)\",\n              \"--dialog-foreground-color-dark\": \"var(--muted-foreground)\",\n            },\n          },\n          \"widget.accordion.item\": {\n            noStyle: true,\n            className: \"rounded-lg border\",\n          },\n          \"widget.accordion.trigger\": {\n            noStyle: true,\n            className: \"flex items-center gap-3 pr-3\",\n          },\n          \"widget.accordion.trigger-inner\": {\n            noStyle: true,\n            className: cn(\n              \"flex flex-1 items-center rounded-lg px-4 py-3 text-sm font-semibold text-foreground **:[svg]:hidden\",\n              \"outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n            ),\n          },\n          \"widget.accordion.content\": {\n            noStyle: true,\n            className:\n              \"overflow-hidden px-4 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n          },\n          \"widget.accordion.content-inner\": {\n            noStyle: true,\n            className: \"pb-4 text-sm text-muted-foreground\",\n          },\n          \"widget.switch\": {\n            noStyle: true,\n            className: cn(\n              \"inline-flex h-4.5 w-8 shrink-0 items-center rounded-full transition-all\",\n              \"border border-transparent shadow-xs\",\n              \"outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              \"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80\"\n            ),\n          },\n          \"widget.switch.track\": {\n            noStyle: true,\n          },\n          \"widget.switch.thumb\": {\n            noStyle: true,\n            className: cn(\n              \"pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform\",\n              \"data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground\"\n            ),\n          },\n          \"widget.footer.sub-group\": {\n            noStyle: true,\n            className: \"grid grid-cols-2 gap-4 sm:flex\",\n          },\n          \"widget.footer.reject-button\": {\n            noStyle: true,\n            className: buttonVariants({ variant: \"secondary\" }),\n          },\n          \"widget.footer.accept-button\": {\n            noStyle: true,\n            className: buttonVariants({ variant: \"secondary\" }),\n          },\n          \"widget.footer.save-button\": {\n            noStyle: true,\n            className: buttonVariants({ variant: \"default\" }),\n          },\n        }}\n      />\n\n      <ConsentManagerClient>{children}</ConsentManagerClient>\n    </ConsentManagerProvider>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/consent-manager/consent-manager-client.tsx",
      "content": "\"use client\";\n\nimport { ClientSideOptionsProvider } from \"@c15t/nextjs/client\";\n\nexport function ConsentManagerClient({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <ClientSideOptionsProvider\n      callbacks={{\n        onConsentSet({ preferences }) {\n          if (preferences.measurement) {\n            // Enable measurement tracking\n          } else {\n            // Disable measurement tracking\n          }\n        },\n      }}\n    >\n      {children}\n    </ClientSideOptionsProvider>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "theme": {
      "color-popover-border": "var(--popover-border)",
      "shadow-popover": "var(--shadow-popover)"
    },
    "light": {
      "popover-border": "color-mix(in oklab, var(--color-black) 15%, transparent)",
      "shadow-popover": "0 6px 24px rgba(0, 0, 0, 0.25)"
    },
    "dark": {
      "popover-border": "oklch(0.37 0.013 285.805)",
      "shadow-popover": "0 0 24px rgba(0, 0, 0, 0.5)"
    }
  }
}