50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T5c93,// Hairline UI · cookie-banner · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * COOKIE BANNER: ask once, plainly, then get out of the way * * ask a hairline card in the corner: one sentence, * Customise, and Reject all beside Accept all, * equally easy * customise the same card grows into the preferences: each * kind of cookie with a switch thrown to its side; * what's necessary says it's always on, and why * save a check draws itself on the button you pressed, * its label morphs to "Accepted", and the card * shrinks into a small cookie button in the corner * revisit that button grows back into the preferences, with * the choices as they were * * The choice is remembered and handed to you, so you only load * what people allowed. Global Privacy Control is respected; new * kinds of cookie, or a year passing, ask again. * ───────────────────────────────────────────────────────── */ export interface CookieCategory { id: string; label: string; description: string; /** Always on, e.g. what keeps people signed in. */ required?: boolean; /** Ads or cross-site tracking: stays off for browsers that send Global Privacy Control, unless switched on here. */ tracking?: boolean; } export type CookieConsent = Record; export interface CookieBannerProps extends Omit, "onChange"> { categories?: CookieCategory[]; /** The one sentence on the banner. */ message?: React.ReactNode; /** Link to your cookie policy. */ policyHref?: string; /** * Called with the remembered choice on load ("load") and with every new one ("save"), * so you can start what people allowed. Return a promise to record consent on your * server; the button waits for it. */ onConsentChange?: (consent: CookieConsent, reason: "load" | "save") => void | Promise; storageKey?: string; /** Days before asking again. */ expiresAfter?: number; position?: "bottom-left" | "bottom-right" | "bottom-center"; /** "absolute" keeps it inside a positioned parent instead of the window. */ strategy?: "fixed" | "absolute"; /** Keep the small cookie button after a choice, so people can change their mind. */ showReopen?: boolean; } type Phase = "hidden" | "ask" | "prefs" | "folded"; type Action = "accept" | "reject" | "save"; type Work = { action: Action; stage: "busy" | "done" }; type Saved = { choices: CookieConsent; savedAt: number }; const OPEN_EVENT = "cookie-preferences:open"; /** Opens the preferences from anywhere, e.g. a "Cookie settings" link in your footer. */ export function openCookiePreferences() { window.dispatchEvent(new Event(OPEN_EVENT)); } /** The saved choice, or null if people haven't chosen yet. */ export function getCookieConsent(storageKey = "cookie-consent"): CookieConsent | null { try { return (JSON.parse(localStorage.getItem(storageKey) ?? "null") as Saved | null)?.choices ?? null; } catch { return null; } } const DEFAULT_CATEGORIES: CookieCategory[] = [ { id: "necessary", label: "Necessary", description: "Keeps you signed in and your basket full.", required: true }, { id: "analytics", label: "Analytics", description: "Counts visits and what gets used, so we can make it better. Never sold." }, { id: "marketing", label: "Marketing", description: "Shows you our ads on other sites and tells us if they worked.", tracking: true }, ]; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const DURATION = 480; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-popover"; const TONES = { solid: "bg-primary text-primary-foreground hover:bg-primary/90", line: "text-foreground shadow-[inset_0_0_0_1px_var(--border)] hover:bg-accent", ghost: "text-muted-foreground hover:bg-accent hover:text-foreground", }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); function CookieIcon({ className = "size-4" }: { className?: string }) { return ( ); } /** A button that confirms itself: a spinner while your server records it, then a drawn check and a new label. */ function ActionButton({ label, doneLabel, stage, locked, tone, reduced, onClick, className = "", }: { label: string; doneLabel: string; stage: "idle" | Work["stage"]; locked: boolean; tone: keyof typeof TONES; reduced: boolean; onClick: () => void; className?: string; }) { const on = stage !== "idle"; return ( ); } function Switch({ id, checked, describedBy, reduced, onChange }: { id: string; checked: boolean; describedBy: string; reduced: boolean; onChange: (on: boolean) => void }) { return ( ); } export function CookieBanner({ categories = DEFAULT_CATEGORIES, message = "We use cookies to keep the site working and, if you agree, to see how it’s used.", policyHref, onConsentChange, storageKey = "cookie-consent", expiresAfter = 365, position = "bottom-left", strategy = "fixed", showReopen = true, className = "", ...props }: CookieBannerProps) { const reduced = useReducedMotion(); const id = React.useId(); const required = React.useCallback(() => Object.fromEntries(categories.map((c) => [c.id, Boolean(c.required)])), [categories]); const [phase, setPhase] = React.useState("hidden"); const [work, setWork] = React.useState(null); const [choice, setChoice] = React.useState(required); const [gpc, setGpc] = React.useState(false); const [size, setSize] = React.useState({ ask: { w: 0, h: 0 }, prefs: { w: 0, h: 0 } }); const [room, setRoom] = React.useState(432); const regionRef = React.useRef(null); const cardRef = React.useRef(null); const askRef = React.useRef(null); const prefsRef = React.useRef(null); const customiseRef = React.useRef(null); const cornerRef = React.useRef(null); const live = React.useRef({ phase, locked: false }); const back = React.useRef("ask"); const saved = React.useRef(null); const focusTo = React.useRef<"prefs" | "ask" | "corner" | null>(null); const timers = React.useRef([]); const change = React.useRef(onConsentChange); React.useEffect(() => { live.current.phase = phase; change.current = onConsentChange; }); const later = (fn: () => void, ms: number) => { timers.current.push(window.setTimeout(fn, ms)); }; React.useEffect(() => () => timers.current.forEach(window.clearTimeout), []); // On load: a remembered, current choice goes straight to the corner button; otherwise ask. React.useEffect(() => { setGpc(Boolean((navigator as Navigator & { globalPrivacyControl?: boolean }).globalPrivacyControl)); try { const stored = JSON.parse(localStorage.getItem(storageKey) ?? "null") as Saved | null; if (stored?.choices) { setChoice({ ...required(), ...stored.choices }); const fresh = Date.now() - stored.savedAt < expiresAfter * 864e5; const complete = categories.every((c) => c.required || c.id in stored.choices); if (fresh && complete) { saved.current = stored.choices; change.current?.(stored.choices, "load"); setPhase("folded"); return; } } } catch {} setPhase("ask"); // eslint-disable-next-line react-hooks/exhaustive-deps }, [storageKey]); const visible = phase !== "hidden" && (phase !== "folded" || showReopen); // How much room there is: the window, or the parent when it's positioned inside one. React.useLayoutEffect(() => { if (!visible) return; const parent = strategy === "absolute" ? regionRef.current?.offsetParent : null; const fit = () => setRoom(parent instanceof HTMLElement ? parent.clientWidth : document.documentElement.clientWidth); fit(); window.addEventListener("resize", fit); const observer = parent instanceof HTMLElement ? new ResizeObserver(fit) : null; if (parent instanceof HTMLElement) observer?.observe(parent); return () => { window.removeEventListener("resize", fit); observer?.disconnect(); }; }, [visible, strategy]); // The card's two open shapes, measured, so it can grow from one to the other. React.useLayoutEffect(() => { if (!visible) return; const measure = () => { const a = askRef.current; const p = prefsRef.current; setSize((s) => { const next = { ask: { w: a?.offsetWidth ?? 0, h: a?.offsetHeight ?? 0 }, prefs: { w: p?.offsetWidth ?? 0, h: p?.offsetHeight ?? 0 } }; return s.ask.w === next.ask.w && s.ask.h === next.ask.h && s.prefs.w === next.prefs.w && s.prefs.h === next.prefs.h ? s : next; }); }; measure(); const observer = new ResizeObserver(measure); if (askRef.current) observer.observe(askRef.current); if (prefsRef.current) observer.observe(prefsRef.current); return () => observer.disconnect(); }, [visible]); // Arrives by rising out of the corner, a beat after the page. React.useLayoutEffect(() => { if (!visible || reduced) return; cardRef.current?.animate([{ transform: "translateY(20px) scale(0.97)", opacity: 0 }, { transform: "none", opacity: 1 }], { duration: 640, delay: phase === "ask" ? 400 : 0, easing: EASE, fill: "backwards", }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [visible]); // Focus follows the surface, so keyboard people never land on something that just faded. React.useEffect(() => { const target = focusTo.current; if (!target) return; focusTo.current = null; if (target === "prefs") prefsRef.current?.querySelector('[role="switch"]')?.focus({ preventScroll: true }); if (target === "ask") customiseRef.current?.focus({ preventScroll: true }); if (target === "corner") cornerRef.current?.focus({ preventScroll: true }); }, [phase]); const openPrefs = () => { const p = live.current.phase; if (live.current.locked || p === "hidden" || p === "prefs") return; back.current = p; focusTo.current = "prefs"; setPhase("prefs"); }; React.useEffect(() => { window.addEventListener(OPEN_EVENT, openPrefs); return () => window.removeEventListener(OPEN_EVENT, openPrefs); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const close = () => { if (live.current.locked) return; const to = back.current === "folded" ? "folded" : "ask"; if (to === "folded" && saved.current) setChoice({ ...required(), ...saved.current }); focusTo.current = to === "folded" ? "corner" : "ask"; setPhase(to); }; const commit = async (action: Action, consent: CookieConsent) => { if (live.current.locked) return; live.current.locked = true; const final = Object.fromEntries(categories.map((c) => [c.id, Boolean(c.required || consent[c.id])])); setChoice(final); saved.current = final; try { localStorage.setItem(storageKey, JSON.stringify({ choices: final, savedAt: Date.now() } satisfies Saved)); } catch {} const pending = change.current?.(final, "save"); if (pending && typeof pending.then === "function") { setWork({ action, stage: "busy" }); await pending.then(undefined, () => {}); } setWork({ action, stage: "done" }); later(() => { if (cardRef.current?.contains(document.activeElement)) focusTo.current = "corner"; setPhase("folded"); later(() => { setWork(null); live.current.locked = false; }, 500); }, 950); }; const all = (on: boolean) => Object.fromEntries(categories.map((c) => [c.id, Boolean(c.required || (on && !(gpc && c.tracking)))])); const stageOf = (action: Action) => (work?.action === action ? work.stage : "idle"); const locked = work !== null; const prefs = phase === "prefs"; const folded = phase === "folded"; const shape = folded ? { w: 44, h: 44 } : prefs ? size.prefs : size.ask; const place = position === "bottom-right" ? "right-4" : position === "bottom-center" ? "left-1/2 -translate-x-1/2" : "left-4"; const fadeIn = (delay: number) => (reduced ? "none" : `opacity 320ms ${EASE} ${delay}ms, filter 320ms ${EASE} ${delay}ms`); const fadeOut = reduced ? "none" : "opacity 120ms ease-out, filter 120ms ease-out"; if (!visible) return null; return (

{ if (e.key === "Escape" && prefs) close(); }} {...props} > {/* One surface: the banner, the preferences and the corner button are three sizes of it. */}

{/* The ask. */}

{message} {policyHref && ( <> {" "} Cookie policy )}

{/* Reject all and Accept all share the width equally; in a narrow card they take their own row. */}

commit("reject", all(false))} className="flex-1" /> commit("accept", all(true))} className="flex-1" />

{/* The preferences. */}

Choose your cookies

{gpc &&

Your browser asks sites not to track you, so tracking stays off unless you switch it on.

}

{c.required ? (
{c.label}
) : ( {c.label} )}
{c.description}

{c.required ? ( Always on ) : ( !locked && setChoice((x) => ({ ...x, [c.id]: on }))} /> )}

commit("reject", all(false))} /> commit("save", choice)} />

{/* The corner button it shrinks into; it grows back into the preferences. */}

{work?.stage === "done" ? "Cookie choices saved" : ""}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/cookie-banner.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]