Cookie banner

"use client";

import { useId, useState, type ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  panel: "flex w-(--tui-cookie-banner-width) max-w-full flex-col gap-(--tui-cookie-banner-gap) rounded-(--tui-cookie-banner-radius) bg-(--tui-cookie-banner-bg) p-(--tui-cookie-banner-padding) font-(family-name:--tui-font) text-(length:--tui-cookie-banner-font-size) leading-none text-(--tui-cookie-banner-fg) shadow-(--tui-cookie-banner-shadow)",
  head: "flex h-9 shrink-0 items-center justify-between gap-3 px-3 text-[0.93em] font-medium text-(--tui-cookie-banner-muted)",
  row: "flex min-h-(--tui-cookie-banner-row-height) items-center gap-3 rounded-[calc(var(--tui-cookie-banner-radius)_-_var(--tui-cookie-banner-padding))] px-3 py-2 transition-colors duration-(--tui-duration)",
  meta: "ml-auto shrink-0 pl-2 text-[0.93em] text-(--tui-cookie-banner-muted) tabular-nums",
  detail: "text-[0.93em] leading-snug text-(--tui-cookie-banner-muted)",
  button: "inline-flex h-(--tui-cookie-banner-row-height) cursor-default items-center justify-center gap-2 rounded-[calc(var(--tui-cookie-banner-radius)_-_var(--tui-cookie-banner-padding))] border-none px-4 font-[inherit] text-[length:inherit] leading-none font-medium whitespace-nowrap no-underline outline-none transition-[background-color,opacity,scale] duration-(--tui-duration) focus-visible:[outline:2px_solid_var(--tui-ring)] focus-visible:[outline-offset:2px] active:scale-[0.98]",
  filled: "bg-(--tui-cookie-banner-accent) text-(--tui-cookie-banner-accent-fg) hover:opacity-90",
  soft: "bg-(--tui-cookie-banner-well) text-(--tui-cookie-banner-fg) hover:bg-(--tui-cookie-banner-well-hover)",
  focus: "outline-none focus-visible:[outline:2px_solid_var(--tui-ring)] focus-visible:[outline-offset:2px]",
};

export interface CookieKind {
  id: string;
  label: string;
  /** What this kind is used for, in a line. */
  description?: string;
  /** Cannot be turned off: the site does not work without it. */
  required?: boolean;
}

export interface CookieBannerProps {
  /** A quiet label at the top. */
  label?: ReactNode;
  /** What is stored and why, in a sentence. */
  children: ReactNode;
  /** Where the full policy is. */
  link?: { label: string; href: string };
  /** The kinds of cookie that can be chosen between, each with a switch. */
  kinds?: CookieKind[];
  /** What the buttons say. Yes and no are the same size: saying no is as easy as saying yes. */
  accept?: string;
  decline?: string;
  save?: string;
  /** Each is called with the ids of the kinds allowed. Declining allows only the required ones. */
  onAccept?: (allowed: string[]) => void;
  onDecline?: (allowed: string[]) => void;
  onSave?: (allowed: string[]) => void;
  className?: string;
}

/**
 * The question about cookies, as a floating panel: a sentence, a row and a
 * switch for each kind, and yes and no across the bottom at the same size.
 * Once a switch has been moved, no becomes a button that keeps the choice.
 * It is not a modal: place it in a corner yourself and take it away once it
 * is answered.
 */
export function CookieBanner({ label = "Cookies", children, link, kinds, accept = "Accept all", decline = "Decline", save = "Save choices", onAccept, onDecline, onSave, className }: CookieBannerProps) {
  const id = useId();
  const required = (kinds ?? []).filter((kind) => kind.required).map((kind) => kind.id);
  const [allowed, setAllowed] = useState<string[]>(required);
  const [moved, setMoved] = useState(false);
  const flip = (kind: string) => {
    setMoved(true);
    setAllowed((current) => (current.includes(kind) ? current.filter((other) => other !== kind) : [...current, kind]));
  };

  return (
    <section aria-label={typeof label === "string" ? label : "Cookies"} data-slot="cookie-banner" className={[air.panel, className].filter(Boolean).join(" ")}>
      <div className={air.head}>
        {label}
        {link && (
          <a href={link.href} className={"rounded-sm text-(--tui-cookie-banner-muted) no-underline transition-colors duration-(--tui-duration) hover:text-(--tui-cookie-banner-fg) " + air.focus}>
            {link.label}
          </a>
        )}
      </div>
      <p className="m-0 px-3 pb-2 leading-relaxed text-pretty">{children}</p>
      {kinds && kinds.length > 0 && (
        <ul data-slot="cookie-banner-kinds" className="m-0 flex list-none flex-col gap-(--tui-cookie-banner-gap) p-0">
          {kinds.map((kind) => {
            const on = allowed.includes(kind.id);
            return (
              <li key={kind.id} className={air.row + " bg-(--tui-cookie-banner-well)"}>
                <span className="flex min-w-0 flex-col gap-1.5">
                  <span id={id + kind.id} className="font-medium">
                    {kind.label}
                  </span>
                  {kind.description && <span className={air.detail}>{kind.description}</span>}
                </span>
                {kind.required ? (
                  <span className={air.meta}>Always on</span>
                ) : (
                  <button
                    type="button"
                    role="switch"
                    aria-checked={on}
                    aria-labelledby={id + kind.id}
                    onClick={() => flip(kind.id)}
                    data-slot="cookie-banner-switch"
                    className={"ml-auto flex h-6 w-10 shrink-0 cursor-default items-center rounded-full border-none bg-(--tui-cookie-banner-switch) p-0.5 transition-colors duration-200 aria-checked:bg-(--tui-cookie-banner-accent) " + air.focus}
                  >
                    <span className={"size-5 rounded-full bg-(--tui-cookie-banner-thumb) transition-[translate] duration-200 ease-[cubic-bezier(0.3,1.3,0.5,1)] " + (on ? "translate-x-4" : "")} />
                  </button>
                )}
              </li>
            );
          })}
        </ul>
      )}
      <div className="flex gap-(--tui-cookie-banner-gap) *:flex-1">
        {moved ? (
          <button type="button" onClick={() => onSave?.(allowed)} data-slot="cookie-banner-save" className={[air.button, air.soft].join(" ")}>
            {save}
          </button>
        ) : (
          <button type="button" onClick={() => onDecline?.(required)} data-slot="cookie-banner-decline" className={[air.button, air.soft].join(" ")}>
            {decline}
          </button>
        )}
        <button type="button" onClick={() => onAccept?.((kinds ?? []).map((kind) => kind.id))} data-slot="cookie-banner-accept" className={[air.button, air.filled].join(" ")}>
          {accept}
        </button>
      </div>
    </section>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Cookie banner */
  --tui-cookie-banner-width: 380px;
  --tui-cookie-banner-padding: calc(var(--tui-space) * 2);
  --tui-cookie-banner-gap: calc(var(--tui-space) * 1.5);
  --tui-cookie-banner-radius: calc(var(--tui-radius) * 3.25);
  --tui-cookie-banner-font-size: var(--tui-text);
  --tui-cookie-banner-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-cookie-banner-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-cookie-banner-fg: var(--tui-fg);
  --tui-cookie-banner-muted: var(--tui-muted-fg);
  --tui-cookie-banner-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-cookie-banner-well-hover: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 90%, var(--tui-fg));
  --tui-cookie-banner-accent: var(--tui-primary);
  --tui-cookie-banner-accent-fg: var(--tui-primary-fg);
  --tui-cookie-banner-row-height: calc(var(--tui-space) * 14);
  --tui-cookie-banner-switch: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 84%, var(--tui-fg));
  --tui-cookie-banner-thumb: #ffffff;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}