@azmr/ui 0.1.0 → 0.3.0

package/dist/toast.js

@@ -0,0 +1,203 @@
+"use client";
+import {
+  Icon
+} from "./chunk-XRZHP6BD.js";
+import {
+  Spinner,
+  buttonVariants
+} from "./chunk-C2HKIPLQ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/primitives/toast.ts
+import { Toast } from "@base-ui/react/toast";
+
+// src/components/toast/toast.ts
+var toastManager = Toast.createToastManager();
+function toBaseOptions(title, type, o = {}) {
+  const { description, duration, id, priority, action, onClose } = o;
+  return {
+    ...id !== void 0 && { id },
+    ...title !== void 0 && { title },
+    ...description !== void 0 && { description },
+    ...type && { type },
+    ...priority && { priority },
+    ...duration !== void 0 && { timeout: duration },
+    ...onClose && { onClose },
+    ...action && { actionProps: { children: action.label, onClick: action.onClick } }
+  };
+}
+var defaultPriority = (type) => type === "error" ? "high" : "low";
+function show(type) {
+  return (title, options) => toastManager.add({
+    priority: defaultPriority(type),
+    ...toBaseOptions(title, type, options)
+  });
+}
+var toast = Object.assign(show(void 0), {
+  success: show("success"),
+  error: show("error"),
+  info: show("info"),
+  warning: show("warning"),
+  /** Stays until updated or dismissed. Pair it with `toast.update`, or use `toast.promise`. */
+  loading: show("loading"),
+  /** Show `loading`, then `success` or `error` when the promise settles. Returns the same promise. */
+  promise(promise, messages) {
+    return toastManager.promise(promise, {
+      loading: { title: messages.loading, priority: "low" },
+      success: (value) => ({
+        title: typeof messages.success === "function" ? messages.success(value) : messages.success,
+        priority: "low",
+        timeout: void 0
+      }),
+      error: (error) => ({
+        title: typeof messages.error === "function" ? messages.error(error) : messages.error,
+        priority: "high",
+        timeout: void 0
+      })
+    });
+  },
+  /** Change a toast that is showing: its text, its type or its timer. */
+  update(id, changes) {
+    const { title, type, ...rest } = changes;
+    toastManager.update(id, {
+      // Only re-derive urgency when the type changes; a text-only update must not downgrade an error.
+      ...type && { priority: defaultPriority(type === "default" ? void 0 : type) },
+      ...toBaseOptions(title, type === "default" ? void 0 : type, rest),
+      ...type === "default" && { type: void 0 }
+    });
+  },
+  /** Dismiss one toast, or all of them when called without an id. */
+  dismiss(id) {
+    toastManager.close(id);
+  }
+});
+
+// src/components/toast/toaster.tsx
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VIEWPORT = "fixed z-(--z-toast) w-[calc(100vw-2rem)] outline-none sm:w-96";
+var PLACEMENT = {
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4"
+};
+var SWIPE = {
+  "top-left": ["up", "left"],
+  "top-center": ["up"],
+  "top-right": ["up", "right"],
+  "bottom-left": ["down", "left"],
+  "bottom-center": ["down"],
+  "bottom-right": ["down", "right"]
+};
+var ROOT_COMMON = cn(
+  "[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))]",
+  "[--offset-y:calc(var(--dir)*(var(--toast-offset-y)+var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]",
+  "absolute right-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-(--height) w-full select-none",
+  "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--dir)*(var(--toast-index)*var(--peek)+var(--shrink)*var(--height))))_scale(var(--scale))]",
+  "data-[expanded]:h-(--toast-height) data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+  "rounded-lg border border-border bg-popover text-popover-foreground shadow-elevation-3",
+  "transition-[transform,opacity,height] duration-(--motion-duration-slow) ease-decelerate data-[swiping]:transition-none",
+  "data-[limited]:opacity-0 data-[ending-style]:opacity-0",
+  // Entering and leaving without a swipe: slide toward the anchored edge.
+  "data-[starting-style]:[transform:translateY(calc(var(--dir)*-150%))] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(calc(var(--dir)*-150%))]",
+  // Leaving by swipe: carry on in the swipe direction.
+  "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+  "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+  // Keeps the pointer "inside" the stack across the gap between toasts, so it does not collapse.
+  "after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"
+);
+var ROOT_BOTTOM = "[--dir:-1] bottom-0 origin-bottom after:top-full";
+var ROOT_TOP = "[--dir:1] top-0 origin-top after:bottom-full";
+var ICONS = {
+  success: { icon: CircleCheck, colour: "text-success" },
+  error: { icon: CircleAlert, colour: "text-destructive" },
+  warning: { icon: TriangleAlert, colour: "text-warning-text" },
+  info: { icon: Info, colour: "text-info" }
+};
+function TypeIcon({ type }) {
+  if (type === "loading") return /* @__PURE__ */ jsx(Spinner, { className: "mt-0.5 shrink-0 text-muted-foreground" });
+  const entry = ICONS[type];
+  if (!entry) return null;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      icon: entry.icon,
+      "data-azmr-toast-icon": "",
+      className: cn("mt-0.5 shrink-0", entry.colour)
+    }
+  );
+}
+function ToastList({ position }) {
+  const { toasts } = Toast.useToastManager();
+  const edge = position.startsWith("top") ? ROOT_TOP : ROOT_BOTTOM;
+  return toasts.map((t) => /* @__PURE__ */ jsx(
+    Toast.Root,
+    {
+      toast: t,
+      swipeDirection: [...SWIPE[position]],
+      "data-toast": "",
+      className: cn(ROOT_COMMON, edge),
+      children: /* @__PURE__ */ jsxs(
+        Toast.Content,
+        {
+          "data-toast-content": "",
+          className: "flex items-start gap-3 overflow-hidden p-4 transition-opacity duration-(--motion-duration-base) ease-standard data-[behind]:opacity-0 data-[expanded]:opacity-100",
+          children: [
+            /* @__PURE__ */ jsx(TypeIcon, { type: t.type }),
+            /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [
+              /* @__PURE__ */ jsx(Toast.Title, { className: "text-sm font-medium leading-tight" }),
+              /* @__PURE__ */ jsx(Toast.Description, { className: "text-sm text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                Toast.Action,
+                {
+                  onClick: () => toastManager.close(t.id),
+                  className: cn(
+                    buttonVariants({ variant: "outline", size: "sm" }),
+                    "mt-2 justify-self-start"
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Toast.Close,
+              {
+                "aria-label": "Dismiss notification",
+                className: cn(
+                  buttonVariants({ variant: "ghost", size: "icon" }),
+                  "-mr-2 -mt-2 size-8 shrink-0"
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { icon: X })
+              }
+            )
+          ]
+        }
+      )
+    },
+    t.id
+  ));
+}
+function Toaster({
+  position = "bottom-right",
+  limit = 3,
+  duration = 5e3,
+  label = "Notifications",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Toast.Provider, { toastManager, limit, timeout: duration, children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(
+    Toast.Viewport,
+    {
+      "aria-label": label,
+      className: cn(VIEWPORT, PLACEMENT[position], className),
+      children: /* @__PURE__ */ jsx(ToastList, { position })
+    }
+  ) }) });
+}
+export {
+  Toaster,
+  toast
+};

package/dist/toggle.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+
+type Variant = "default" | "outline";
+type TextSize = "sm" | "md" | "lg";
+type Named = {
+    "aria-label": string;
+} | {
+    "aria-labelledby": string;
+};
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleOwnProps {
+    /** `outline` draws a border. Default `default`. */
+    variant?: Variant;
+    className?: string;
+}
+/** An icon-only toggle has no text, so it must be given an accessible name. */
+type IconOnly = {
+    size: "icon";
+} & Named;
+type ToggleBase = Omit<ComponentPropsWithoutRef<typeof Toggle$1>, "className"> & ToggleOwnProps;
+type ToggleProps = ToggleBase & ({
+    size?: TextSize;
+} | IconOnly);
+/** A button that stays pressed. It reports its state as `aria-pressed`. */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+type ToggleGroupProps = Omit<ComponentPropsWithoutRef<typeof ToggleGroup$1>, "className" | "aria-label" | "aria-labelledby"> & Named & {
+    /** Applied to every item unless it sets its own. */
+    variant?: Variant;
+    size?: TextSize | "icon";
+    /** Join the items into one control (default), or keep them apart with a gap. */
+    attached?: boolean;
+    className?: string;
+};
+/**
+ * A group of toggles that behaves as one control. By default one item can be pressed at a time
+ * (pressing it again releases it); with `multiple`, any number can. The value is an array of the
+ * pressed items' `value`s either way.
+ *
+ * Keyboard: Tab enters the group at one stop; the arrow keys (Left and Right, or Up and Down when
+ * vertical) move focus between items and wrap; Home and End jump; Space or Enter presses the
+ * focused item. Moving focus never changes the selection.
+ */
+declare const ToggleGroup: react.ForwardRefExoticComponent<ToggleGroupProps & react.RefAttributes<HTMLDivElement>>;
+type ToggleGroupItemProps = ToggleProps;
+/** One toggle in a `ToggleGroup`. Give it a `value`. */
+declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, toggleVariants };

package/dist/toggle.js

@@ -0,0 +1,88 @@
+"use client";
+import {
+  joinedClasses
+} from "./chunk-EE4V6XMB.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/toggle/toggle.tsx
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, useContext } from "react";
+
+// src/primitives/toggle.ts
+import { Toggle } from "@base-ui/react/toggle";
+
+// src/primitives/toggle-group.ts
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+
+// src/components/toggle/toggle.tsx
+import { jsx } from "react/jsx-runtime";
+var toggleVariants = cva(
+  [
+    "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-colors duration-(--motion-duration-fast) ease-standard",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "hover:bg-muted hover:text-muted-foreground",
+    "data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        sm: "h-8 px-2.5 text-xs",
+        md: "h-(--density-control-height) px-3",
+        lg: "h-11 px-5",
+        icon: "size-(--density-control-height) p-0"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+var Toggle2 = forwardRef(function Toggle3({ variant, size, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      ref,
+      className: cn(toggleVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+var GroupContext = createContext({});
+var ToggleGroup2 = forwardRef(function ToggleGroup3({ variant, size, attached = true, orientation = "horizontal", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(GroupContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx(
+    ToggleGroup,
+    {
+      ref,
+      orientation,
+      className: cn(joinedClasses(orientation, attached), className),
+      ...props
+    }
+  ) });
+});
+var ToggleGroupItem = forwardRef(
+  function ToggleGroupItem2({ variant, size, ...props }, ref) {
+    const group = useContext(GroupContext);
+    return /* @__PURE__ */ jsx(
+      Toggle2,
+      {
+        ref,
+        variant: variant ?? group.variant,
+        ...{ size: size ?? group.size },
+        ...props
+      }
+    );
+  }
+);
+export {
+  Toggle2 as Toggle,
+  ToggleGroup2 as ToggleGroup,
+  ToggleGroupItem,
+  toggleVariants
+};

package/dist/tokens.css

@@ -0,0 +1,337 @@
+/*
+ * @azmr/ui design tokens and Tailwind v4 integration (no global rules).
+ *
+ * Usage in an app's global CSS, when the app already has its own base styles:
+ *   @import "tailwindcss";
+ *   @import "@azmr/ui/tokens.css";
+ * or, to also get our body colours and default border colour:
+ *   @import "@azmr/ui/styles.css";
+ *
+ * Token names follow shadcn/ui so components from any shadcn registry fit
+ * alongside ours. Colours are OKLCH and use light-dark(), so the page follows
+ * the system by default and can be forced with `.dark` / `.light` or
+ * `data-theme="dark|light"` on any ancestor, with no JavaScript and no flash.
+ *
+ * Components must read these tokens (bg-background, text-foreground, ...) and
+ * never contain raw colours; a test enforces it.
+ */
+
+/* The motion presets (keyframes and .motion-* classes). Only our own classes, so it is safe in an app with
+   its own global styles. */
+@import "./motion.css";
+
+/* Scan the distributed JS for Tailwind class names. Resolved relative to this
+   file, so it works from node_modules. */
+@source "./**/*.js";
+
+:root {
+  color-scheme: light dark;
+
+  --radius: 0.625rem;
+
+  /* Surfaces */
+  --background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
+  --foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  --card: light-dark(oklch(1 0 0), oklch(0.205 0 0));
+  --card-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  --popover: light-dark(oklch(1 0 0), oklch(0.205 0 0));
+  --popover-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  /* The dimming layer behind modal surfaces (dialog, drawer). Translucent black in both modes. */
+  --scrim: light-dark(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.65));
+
+  /* Brand and neutrals */
+  --primary: light-dark(oklch(0.205 0 0), oklch(0.922 0 0));
+  --primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --muted-foreground: light-dark(oklch(0.5 0 0), oklch(0.72 0 0));
+  --accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+
+  /* Status (destructive is shadcn's; success / warning / info are ours) */
+  --destructive: light-dark(oklch(0.53 0.22 27), oklch(0.65 0.2 22));
+  --destructive-foreground: light-dark(oklch(0.985 0 0), oklch(0.145 0 0));
+  --success: light-dark(oklch(0.46 0.13 150), oklch(0.72 0.17 150));
+  --success-foreground: light-dark(oklch(0.985 0 0), oklch(0.145 0 0));
+  --warning: light-dark(oklch(0.78 0.16 80), oklch(0.82 0.16 82));
+  --warning-foreground: light-dark(oklch(0.25 0.04 70), oklch(0.25 0.04 70));
+  --warning-text: light-dark(oklch(0.5 0.1 75), oklch(0.82 0.16 82));
+  --info: light-dark(oklch(0.5 0.18 255), oklch(0.72 0.13 245));
+  --info-foreground: light-dark(oklch(0.985 0 0), oklch(0.145 0 0));
+
+  /* Lines and focus. --ring keeps >= 3:1 against every surface (WCAG 2.2). */
+  --border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 12%));
+  --input: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 16%));
+  --ring: light-dark(oklch(0.55 0.15 255), oklch(0.72 0.12 255));
+
+  /* Sidebar */
+  --sidebar: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --sidebar-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  --sidebar-primary: light-dark(oklch(0.205 0 0), oklch(0.922 0 0));
+  --sidebar-primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --sidebar-accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --sidebar-accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --sidebar-border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 12%));
+  --sidebar-ring: light-dark(oklch(0.55 0.15 255), oklch(0.72 0.12 255));
+
+  /* Categorical chart palette (8 series), tuned for contrast and colour-vision
+     deficiency. Found with a constrained search (>= 3.2:1 on surfaces, inside sRGB,
+     maximising the worst pairwise CIEDE2000 under normal, protan, deutan and
+     tritan vision); tokens.test.ts holds the thresholds. */
+  --chart-1: light-dark(oklch(0.52 0.19 266), oklch(0.69 0.165 273));
+  --chart-2: light-dark(oklch(0.64 0.105 45), oklch(0.8 0.17 73));
+  --chart-3: light-dark(oklch(0.58 0.062 173), oklch(0.64 0.152 158));
+  --chart-4: light-dark(oklch(0.5 0.189 339), oklch(0.63 0.16 336));
+  --chart-5: light-dark(oklch(0.64 0.124 231), oklch(0.86 0.12 204));
+  --chart-6: light-dark(oklch(0.64 0.138 107), oklch(0.86 0.104 114));
+  --chart-7: light-dark(oklch(0.5 0.19 22), oklch(0.65 0.165 35));
+  --chart-8: light-dark(oklch(0.46 0 0), oklch(0.7 0 0));
+
+  /* Motion */
+  --motion-duration-instant: 75ms;
+  --motion-duration-fast: 150ms;
+  --motion-duration-base: 200ms;
+  --motion-duration-slow: 300ms;
+  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
+  --motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  /* Delay between items of a staggered list, and the loop length of ambient effects (shimmer). */
+  --motion-stagger-step: 40ms;
+  --motion-duration-ambient: 1500ms;
+
+  /* Typography. createTheme({ font }) overrides --font-sans-stack. */
+  --font-sans-stack:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  /* Elevation */
+  --elevation-1: 0 1px 2px 0 oklch(0 0 0 / 0.08);
+  --elevation-2: 0 2px 6px -1px oklch(0 0 0 / 0.12), 0 1px 3px 0 oklch(0 0 0 / 0.08);
+  --elevation-3: 0 8px 16px -4px oklch(0 0 0 / 0.16), 0 2px 6px -2px oklch(0 0 0 / 0.1);
+  --elevation-4: 0 20px 32px -8px oklch(0 0 0 / 0.24), 0 8px 12px -4px oklch(0 0 0 / 0.12);
+
+  /* Layering */
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-overlay: 1300;
+  --z-modal: 1400;
+  --z-popover: 1500;
+  --z-toast: 1700;
+  --z-tooltip: 1800;
+
+  /* Density (comfortable by default) */
+  --density-control-height: 2.25rem;
+  --density-control-padding-x: 0.75rem;
+  --density-gap: 0.5rem;
+  --density-row-height: 2.75rem;
+}
+
+/* Explicit per-scope colour tokens. :root uses light-dark() for the page-level theme (system by
+   default). A bundler that lowers light-dark() resolves each token where it is declared and
+   inherits the result, so a nested scope (a docs demo, a dark panel in a light page) could not
+   change it. Re-declaring the tokens inside each scope works however the CSS is processed.
+   tokens.test.ts keeps these copies identical to the :root values. */
+.light,
+[data-theme="light"] {
+  color-scheme: light;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --scrim: oklch(0 0 0 / 0.5);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.53 0.22 27);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.46 0.13 150);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.78 0.16 80);
+  --warning-foreground: oklch(0.25 0.04 70);
+  --warning-text: oklch(0.5 0.1 75);
+  --info: oklch(0.5 0.18 255);
+  --info-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.55 0.15 255);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.55 0.15 255);
+  --chart-1: oklch(0.52 0.19 266);
+  --chart-2: oklch(0.64 0.105 45);
+  --chart-3: oklch(0.58 0.062 173);
+  --chart-4: oklch(0.5 0.189 339);
+  --chart-5: oklch(0.64 0.124 231);
+  --chart-6: oklch(0.64 0.138 107);
+  --chart-7: oklch(0.5 0.19 22);
+  --chart-8: oklch(0.46 0 0);
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --scrim: oklch(0 0 0 / 0.65);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.72 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.65 0.2 22);
+  --destructive-foreground: oklch(0.145 0 0);
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.145 0 0);
+  --warning: oklch(0.82 0.16 82);
+  --warning-foreground: oklch(0.25 0.04 70);
+  --warning-text: oklch(0.82 0.16 82);
+  --info: oklch(0.72 0.13 245);
+  --info-foreground: oklch(0.145 0 0);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.72 0.12 255);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.922 0 0);
+  --sidebar-primary-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 12%);
+  --sidebar-ring: oklch(0.72 0.12 255);
+  --chart-1: oklch(0.69 0.165 273);
+  --chart-2: oklch(0.8 0.17 73);
+  --chart-3: oklch(0.64 0.152 158);
+  --chart-4: oklch(0.63 0.16 336);
+  --chart-5: oklch(0.86 0.12 204);
+  --chart-6: oklch(0.86 0.104 114);
+  --chart-7: oklch(0.65 0.165 35);
+  --chart-8: oklch(0.7 0 0);
+}
+
+[data-density="compact"] {
+  --density-control-height: 2rem;
+  --density-control-padding-x: 0.625rem;
+  --density-gap: 0.375rem;
+  --density-row-height: 2.25rem;
+}
+
+[data-density="spacious"] {
+  --density-control-height: 2.75rem;
+  --density-control-padding-x: 1rem;
+  --density-gap: 0.75rem;
+  --density-row-height: 3.25rem;
+}
+
+/* Reduced motion: token-level collapse, plus a safety net for third-party and
+   hand-written animations. Mark genuinely essential motion (e.g. a progress
+   spinner) with data-motion="essential" to keep it. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-instant: 0.01ms;
+    --motion-duration-fast: 0.01ms;
+    --motion-duration-base: 0.01ms;
+    --motion-duration-slow: 0.01ms;
+    --motion-stagger-step: 0ms;
+    --motion-duration-ambient: 0.01ms;
+  }
+
+  *:not([data-motion="essential"]),
+  *:not([data-motion="essential"])::before,
+  *:not([data-motion="essential"])::after {
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion safety net must beat arbitrary author animations and transitions */
+    animation-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion safety net must beat arbitrary author animations and transitions */
+    animation-iteration-count: 1 !important;
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion safety net must beat arbitrary author animations and transitions */
+    transition-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion safety net must beat arbitrary author animations and transitions */
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Map the tokens into Tailwind's theme so utilities like bg-background,
+   text-muted-foreground, rounded-lg and shadow-elevation-2 exist. */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-scrim: var(--scrim);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-text: var(--warning-text);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --font-sans: var(--font-sans-stack);
+
+  --shadow-elevation-1: var(--elevation-1);
+  --shadow-elevation-2: var(--elevation-2);
+  --shadow-elevation-3: var(--elevation-3);
+  --shadow-elevation-4: var(--elevation-4);
+
+  --ease-standard: var(--motion-ease-standard);
+  --ease-emphasized: var(--motion-ease-emphasized);
+  --ease-decelerate: var(--motion-ease-decelerate);
+  --ease-accelerate: var(--motion-ease-accelerate);
+}