"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; export type ConsentCategory = { id: string; label: string; description?: string; required?: boolean; defaultOn?: boolean }; export type ConsentState = Record; export type CookieConsentProps = { categories?: ConsentCategory[]; /** localStorage key. The banner hides once a choice is stored. */ storageKey?: string; policyHref?: string; onChange?: (consent: ConsentState) => void; /** Fixed in the bottom-left corner (default) or inline. */ position?: "fixed" | "inline"; /** card: corner card. bar: full-width bottom bar. modal: centred dialog with backdrop. */ variant?: "card" | "bar" | "modal"; /** Force the banner open, e.g. from a "Cookie settings" link. */ open?: boolean; className?: string; }; const defaults: ConsentCategory[] = [ { id: "necessary", label: "Necessary", description: "Sign-in, security and preferences.", required: true }, { id: "analytics", label: "Analytics", description: "Helps us understand how the site is used.", defaultOn: true }, { id: "marketing", label: "Marketing", description: "Personalised ads and offers." }, ]; function MiniSwitch({ checked, disabled, onChange, label }: { checked: boolean; disabled?: boolean; onChange: (v: boolean) => void; label: string }) { return ( ); } /** Cookie banner with Accept / Reject / per-category preferences, remembered in localStorage. */ export function CookieConsent({ categories = defaults, storageKey = "kn-consent", policyHref, onChange, position = "fixed", variant = "card", open: forced, className, }: CookieConsentProps) { const [visible, setVisible] = React.useState(false); const [custom, setCustom] = React.useState(false); const [state, setState] = React.useState(() => Object.fromEntries(categories.map((c) => [c.id, !!(c.required || c.defaultOn)])), ); React.useEffect(() => { let stored: string | null = null; try { stored = localStorage.getItem(storageKey); } catch { /* storage unavailable */ } if (stored) { try { setState(JSON.parse(stored) as ConsentState); } catch { /* ignore bad value */ } } setVisible(forced ?? !stored); }, [storageKey, forced]); const save = (next: ConsentState) => { setState(next); try { localStorage.setItem(storageKey, JSON.stringify(next)); } catch { /* storage unavailable */ } onChange?.(next); setVisible(false); setCustom(false); }; const all = (on: boolean) => Object.fromEntries(categories.map((c) => [c.id, c.required ? true : on])); const fixed = position === "fixed"; return ( {visible && variant === "modal" && fixed ? ( ) : null} {visible ? ( ) : null} ); }

Cookie Consent

Installation

Exports