@cronus-ui/ui 0.6.0

package/dist/components/code-block.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo } from "react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+import { CopyButton } from "./copy-button.js";
+export const CodeBlock = forwardRef(({ code, language, filename, showLineNumbers = false, className, ...props }, ref) => {
+    const headingId = useId();
+    const hasHeader = Boolean(filename || language);
+    const lines = useMemo(() => (showLineNumbers ? code.replace(/\n$/, "").split("\n") : null), [code, showLineNumbers]);
+    const regionLabel = filename
+        ? `Code block, ${filename}`
+        : language
+            ? `Code block, ${language}`
+            : "Code block";
+    return (_jsxs("div", { ref: ref, "data-slot": "code-block", className: cn("overflow-hidden rounded-xl border border-border bg-surface-raised text-fg", className), ...props, children: [hasHeader ? (_jsxs("div", { "data-slot": "code-block-header", className: "flex items-center justify-between gap-3 border-b border-border bg-surface-overlay px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [filename ? (_jsx("span", { id: headingId, "data-slot": "code-block-filename", className: "truncate font-mono text-xs text-fg-secondary", children: filename })) : null, language ? (_jsx(Badge, { variant: "secondary", "data-slot": "code-block-language", children: language })) : null] }), _jsx(CopyButton, { value: code, size: "icon-sm", className: "-mr-1.5 shrink-0" })] })) : null, _jsxs("div", { className: "relative", children: [!hasHeader ? (_jsx(CopyButton, { value: code, size: "icon-sm", className: "absolute right-2 top-2 z-10 shrink-0 bg-surface-overlay/80 backdrop-blur-sm" })) : null, _jsx("section", { "data-slot": "code-block-scroll", 
+                        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region is intentionally focusable so keyboard users can scroll it.
+                        tabIndex: 0, "aria-label": regionLabel, "aria-describedby": filename ? headingId : undefined, className: "overflow-x-auto outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: _jsx("pre", { "data-slot": "code-block-pre", className: "p-4 text-sm leading-relaxed", children: _jsx("code", { "data-slot": "code-block-code", className: "block font-mono", children: lines ? (lines.map((line, index) => (_jsxs("span", { "data-slot": "code-block-line", className: "table-row", children: [_jsx("span", { "aria-hidden": "true", "data-slot": "code-block-line-number", className: "table-cell select-none pr-4 text-right text-fg-muted tabular-nums", children: index + 1 }), _jsx("span", { className: "table-cell whitespace-pre", children: line || " " })] }, index)))) : (_jsx("span", { className: "whitespace-pre", children: code })) }) }) })] })] }));
+});
+CodeBlock.displayName = "CodeBlock";
+//# sourceMappingURL=code-block.js.map

package/dist/components/code-tabs.d.ts

@@ -0,0 +1,51 @@
+import { type HTMLAttributes } from "react";
+export interface CodeTabsItem {
+    /** Tab label (e.g. "bun"). Doubles as the tab value, so labels must be unique. */
+    label: string;
+    /** Raw source rendered in the panel and written to the clipboard on copy. */
+    code: string;
+    /** Optional language hint shown at the far end of the header (e.g. "bash"). */
+    language?: string;
+}
+export interface CodeTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "dir" | "onChange"> {
+    /** The snippets to switch between — one tab + one panel per item. */
+    items: CodeTabsItem[];
+    /**
+     * Label selected on first render. Falls back to the first item when omitted
+     * or unknown. When {@link CodeTabsProps.storageKey} is set, a stored choice
+     * (applied after mount) wins over this.
+     */
+    defaultLabel?: string;
+    /**
+     * Persist the chosen label to `localStorage` under this key and keep every
+     * `CodeTabs` sharing the key in sync — across the page *and* across browser
+     * tabs. The stored value is only read after mount, so server-rendered HTML
+     * and the first client render always agree (no hydration mismatch).
+     */
+    storageKey?: string;
+    /** Called with the newly selected label on user-initiated changes. */
+    onLabelChange?: (label: string) => void;
+}
+/**
+ * A code-snippet switcher — the classic bun/npm/pnpm/yarn installer tabs, or
+ * any set of labelled snippets. Built on the Radix-powered `Tabs` primitives,
+ * so the tablist gets roving focus, arrow-key activation and correct
+ * tab/tabpanel semantics for free. Two mechanisms are worth calling out:
+ *
+ * - **Shared persistence.** Pass a `storageKey` and the chosen label is
+ *   written to `localStorage` and broadcast on a window event, so every
+ *   `CodeTabs` with the same key flips together — pick pnpm once, see pnpm
+ *   everywhere, including on the next visit. Reads happen after mount only,
+ *   keeping server and client HTML identical (SSR-safe).
+ * - **Sliding indicator.** The active-tab underline is a single absolutely
+ *   positioned element. On selection (and on resize) the active trigger is
+ *   measured inside a `requestAnimationFrame` and the result is written to
+ *   CSS custom properties on the tablist — React never re-renders to move
+ *   it, and the travel transition is disabled under
+ *   `prefers-reduced-motion: reduce` (the underline still jumps into place).
+ *
+ * Each panel renders its code in `font-mono` inside a focusable, horizontally
+ * scrollable tabpanel, with a per-tab copy button that never scrolls away.
+ */
+export declare const CodeTabs: import("react").ForwardRefExoticComponent<CodeTabsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=code-tabs.d.ts.map

package/dist/components/code-tabs.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { CopyButton } from "./copy-button.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+/**
+ * Same-page instances broadcast tab changes over this window event, because
+ * the native `storage` event only fires in *other* documents. Cross-tab sync
+ * still rides the native event; this one covers siblings in the same page.
+ */
+const SYNC_EVENT = "cronus-ui:code-tabs";
+/** Separator used to derive a stable dependency key from the item labels. */
+const LABEL_SEPARATOR = "\u0000";
+/** Read a persisted label, tolerating blocked storage (private mode, iframes). */
+function readStoredLabel(key) {
+    try {
+        return window.localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+/** Persist a label, silently ignoring quota/permission failures. */
+function writeStoredLabel(key, label) {
+    try {
+        window.localStorage.setItem(key, label);
+    }
+    catch {
+        // Storage may be unavailable — the in-memory state still works.
+    }
+}
+/**
+ * A code-snippet switcher — the classic bun/npm/pnpm/yarn installer tabs, or
+ * any set of labelled snippets. Built on the Radix-powered `Tabs` primitives,
+ * so the tablist gets roving focus, arrow-key activation and correct
+ * tab/tabpanel semantics for free. Two mechanisms are worth calling out:
+ *
+ * - **Shared persistence.** Pass a `storageKey` and the chosen label is
+ *   written to `localStorage` and broadcast on a window event, so every
+ *   `CodeTabs` with the same key flips together — pick pnpm once, see pnpm
+ *   everywhere, including on the next visit. Reads happen after mount only,
+ *   keeping server and client HTML identical (SSR-safe).
+ * - **Sliding indicator.** The active-tab underline is a single absolutely
+ *   positioned element. On selection (and on resize) the active trigger is
+ *   measured inside a `requestAnimationFrame` and the result is written to
+ *   CSS custom properties on the tablist — React never re-renders to move
+ *   it, and the travel transition is disabled under
+ *   `prefers-reduced-motion: reduce` (the underline still jumps into place).
+ *
+ * Each panel renders its code in `font-mono` inside a focusable, horizontally
+ * scrollable tabpanel, with a per-tab copy button that never scrolls away.
+ */
+export const CodeTabs = forwardRef(({ items, defaultLabel, storageKey, onLabelChange, className, ...props }, ref) => {
+    const listRef = useRef(null);
+    const fallbackLabel = defaultLabel && items.some((item) => item.label === defaultLabel)
+        ? defaultLabel
+        : items[0]?.label;
+    const [active, setActive] = useState(fallbackLabel);
+    // Guard against stale state when `items` change under us.
+    const resolvedActive = items.some((item) => item.label === active) ? active : fallbackLabel;
+    const activeItem = items.find((item) => item.label === resolvedActive);
+    const labelsKey = items.map((item) => item.label).join(LABEL_SEPARATOR);
+    // Adopt the persisted choice after mount and follow later changes from
+    // sibling instances (custom event) and other browser tabs (storage event).
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        const labels = labelsKey.split(LABEL_SEPARATOR);
+        const adopt = (label) => {
+            if (label && labels.includes(label))
+                setActive(label);
+        };
+        adopt(readStoredLabel(storageKey));
+        const handleSync = (event) => {
+            const detail = event.detail;
+            if (detail?.key === storageKey)
+                adopt(detail.label);
+        };
+        const handleStorage = (event) => {
+            if (event.key === storageKey)
+                adopt(event.newValue);
+        };
+        window.addEventListener(SYNC_EVENT, handleSync);
+        window.addEventListener("storage", handleStorage);
+        return () => {
+            window.removeEventListener(SYNC_EVENT, handleSync);
+            window.removeEventListener("storage", handleStorage);
+        };
+    }, [storageKey, labelsKey]);
+    // Position the sliding underline. The measurement is written straight to
+    // the DOM as CSS custom properties inside a requestAnimationFrame — no
+    // React re-render is involved in moving the indicator. `--code-tabs-ready`
+    // keeps it invisible until the first real measurement lands, so it never
+    // animates in from a zero-width flash.
+    useEffect(() => {
+        const list = listRef.current;
+        // `labelsKey` participates so relabelled items re-measure even when the
+        // active label itself is unchanged.
+        if (!list || !resolvedActive || !labelsKey)
+            return;
+        let frame = null;
+        const measure = () => {
+            if (frame !== null)
+                cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                frame = null;
+                const current = listRef.current;
+                const trigger = current?.querySelector('[data-state="active"]');
+                if (!current || !trigger)
+                    return;
+                current.style.setProperty("--code-tabs-x", `${trigger.offsetLeft}px`);
+                current.style.setProperty("--code-tabs-w", `${trigger.offsetWidth}px`);
+                current.style.setProperty("--code-tabs-ready", "1");
+            });
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(list);
+        return () => {
+            if (frame !== null)
+                cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [resolvedActive, labelsKey]);
+    const handleValueChange = useCallback((label) => {
+        setActive(label);
+        onLabelChange?.(label);
+        if (!storageKey)
+            return;
+        writeStoredLabel(storageKey, label);
+        window.dispatchEvent(new CustomEvent(SYNC_EVENT, {
+            detail: { key: storageKey, label },
+        }));
+    }, [onLabelChange, storageKey]);
+    if (items.length === 0)
+        return null;
+    return (_jsxs(Tabs, { ref: ref, value: resolvedActive, onValueChange: handleValueChange, "data-slot": "code-tabs", className: cn("gap-0 overflow-hidden rounded-xl border border-border bg-surface-raised text-fg", className), ...props, children: [_jsxs("div", { "data-slot": "code-tabs-header", className: "flex items-center justify-between gap-3 border-b border-border bg-surface-overlay pr-3", children: [_jsxs(TabsList, { ref: listRef, "data-slot": "code-tabs-list", className: "relative h-auto gap-0 rounded-none bg-transparent p-0", children: [items.map((item) => (_jsx(TabsTrigger, { value: item.label, "data-slot": "code-tabs-trigger", className: "rounded-none px-3.5 py-2.5 text-fg-tertiary hover:text-fg-secondary focus-visible:ring-inset focus-visible:ring-offset-0 data-[state=active]:bg-transparent data-[state=active]:text-fg data-[state=active]:shadow-none", children: item.label }, item.label))), _jsx("span", { "aria-hidden": "true", "data-slot": "code-tabs-indicator", className: "pointer-events-none absolute bottom-0 left-0 h-0.5 rounded-full bg-primary transition-[transform,width] duration-300 ease-out motion-reduce:transition-none", style: {
+                                    opacity: "var(--code-tabs-ready, 0)",
+                                    width: "var(--code-tabs-w, 0px)",
+                                    transform: "translateX(var(--code-tabs-x, 0px))",
+                                } })] }), activeItem?.language ? (_jsx("span", { "data-slot": "code-tabs-language", 
+                        // Information-bearing label — `fg-muted` fails AA on the header
+                        // surface, so it uses `fg-tertiary` (the next step up, which passes).
+                        className: "shrink-0 font-mono text-fg-tertiary text-xs", children: activeItem.language })) : null] }), _jsxs("div", { "data-slot": "code-tabs-panels", className: "relative", children: [activeItem ? (_jsx(CopyButton, { value: activeItem.code, size: "icon-sm", "aria-label": `Copy ${activeItem.label} snippet`, className: "absolute top-2 right-2 z-10 shrink-0 bg-surface-overlay/80 backdrop-blur-sm" }, activeItem.label)) : null, items.map((item) => (_jsx(TabsContent, { value: item.label, "data-slot": "code-tabs-panel", className: "overflow-x-auto outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: _jsx("pre", { "data-slot": "code-tabs-pre", className: "p-4 pr-14 text-sm leading-relaxed", children: _jsx("code", { "data-slot": "code-tabs-code", className: "block whitespace-pre font-mono", children: item.code }) }) }, item.label)))] })] }));
+});
+CodeTabs.displayName = "CodeTabs";
+//# sourceMappingURL=code-tabs.js.map

package/dist/components/collapsible.d.ts

@@ -0,0 +1,5 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const CollapsibleContent: import("react").ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Collapsible = CollapsiblePrimitive.Root;
+export const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+export const CollapsibleContent = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { ref: ref, "data-slot": "collapsible-content", className: cn("overflow-hidden text-sm text-fg-secondary data-[state=open]:animate-[cronus-collapsible-down_220ms_var(--ease-out-quart)] data-[state=closed]:animate-[cronus-collapsible-up_180ms_var(--ease-out-quart)]", className), ...props, children: children }));
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+//# sourceMappingURL=collapsible.js.map

package/dist/components/color-picker.d.ts

@@ -0,0 +1,30 @@
+export interface OklchColor {
+    /** Perceptual lightness, 0..1. */
+    l: number;
+    /** Chroma, 0..~0.37. */
+    c: number;
+    /** Hue angle in degrees, 0..360. */
+    h: number;
+}
+export interface ColorPickerProps {
+    /** Controlled color as a CSS color string (ideally `oklch(l c h)`). */
+    value?: string;
+    /** Initial color for uncontrolled usage. Defaults to a brand-ish oklch. */
+    defaultValue?: string;
+    /** Called with the new color, serialized as `oklch(l c h)`, on every change. */
+    onValueChange?: (value: string) => void;
+    /** Preset swatches shown as a row; clicking one selects it. */
+    swatches?: string[];
+    /** Disables the trigger and all panel controls. */
+    disabled?: boolean;
+    /** Accessible name for the trigger when there is no visible label. */
+    "aria-label"?: string;
+    /** Extra classes for the trigger button. */
+    className?: string;
+    /** Extra classes for the popover panel. */
+    contentClassName?: string;
+    /** Native id for the trigger. */
+    id?: string;
+}
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/components/color-picker.js

@@ -0,0 +1,300 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+/**
+ * OKLCH channel bounds. Lightness is perceptual 0..1; chroma is unbounded in
+ * theory but display-P3/sRGB tops out near 0.37, so we clamp there for sane
+ * sliders; hue is the usual 0..360 wheel.
+ */
+const L_MIN = 0;
+const L_MAX = 1;
+const C_MIN = 0;
+const C_MAX = 0.37;
+const H_MIN = 0;
+const H_MAX = 360;
+/** A tasteful default palette, authored natively in oklch. */
+const DEFAULT_SWATCHES = [
+    "oklch(0.62 0.21 256)", // blue
+    "oklch(0.65 0.24 24)", // red
+    "oklch(0.72 0.19 145)", // green
+    "oklch(0.8 0.16 86)", // amber
+    "oklch(0.62 0.25 304)", // violet
+    "oklch(0.7 0.17 196)", // cyan
+    "oklch(0.68 0.2 35)", // orange
+    "oklch(0.5 0 0)", // neutral gray
+];
+const DEFAULT_VALUE = "oklch(0.62 0.21 256)";
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+/** Trim trailing zeros so serialized strings stay tidy (0.6200 -> 0.62). */
+function trim(value, digits) {
+    const fixed = value.toFixed(digits);
+    return fixed.replace(/\.?0+$/, "") || "0";
+}
+/**
+ * Parse an `oklch(l c h)` string into channels. Supports space- or
+ * comma-separated values, an optional `/ alpha` (ignored), and percentage
+ * lightness (`62%` -> 0.62). Returns `null` for anything that isn't oklch so
+ * callers can fall back gracefully.
+ */
+function parseOklch(input) {
+    const match = /^oklch\(\s*([^)]+?)\s*\)$/i.exec(input.trim());
+    const body = match?.[1];
+    if (body === undefined)
+        return null;
+    // Drop any alpha component after a slash, then split on commas/whitespace.
+    const parts = (body.split("/")[0] ?? "")
+        .trim()
+        .split(/[\s,]+/)
+        .filter(Boolean);
+    const [rawL, rawC, rawH] = parts;
+    if (rawL === undefined || rawC === undefined || rawH === undefined)
+        return null;
+    const parseChannel = (raw, scaleForPercent) => {
+        const isPercent = raw.endsWith("%");
+        const num = Number.parseFloat(raw);
+        if (Number.isNaN(num))
+            return null;
+        return isPercent ? (num / 100) * scaleForPercent : num;
+    };
+    const l = parseChannel(rawL, 1);
+    const c = parseChannel(rawC, C_MAX);
+    const h = parseChannel(rawH, 1);
+    if (l === null || c === null || h === null)
+        return null;
+    return {
+        l: clamp(l, L_MIN, L_MAX),
+        c: clamp(c, C_MIN, C_MAX),
+        h: clamp(((h % 360) + 360) % 360, H_MIN, H_MAX),
+    };
+}
+/** Serialize channels back to a canonical `oklch(l c h)` string. */
+function serializeOklch({ l, c, h }) {
+    return `oklch(${trim(l, 4)} ${trim(c, 4)} ${trim(h, 2)})`;
+}
+/** A CSS color usable as a background tile for an arbitrary (maybe non-oklch) value. */
+function tileColor(parsed, raw) {
+    return parsed ? serializeOklch(parsed) : raw;
+}
+/**
+ * Translate a pointer event into a 0..1 fraction within an element along one
+ * axis. Used by the 2D area; mirrors the math Radix Slider does internally but
+ * stays dependency-free so the gradients can render in native oklch.
+ */
+function fractionFromPointer(element, clientX, clientY) {
+    const rect = element.getBoundingClientRect();
+    const x = rect.width === 0 ? 0 : clamp((clientX - rect.left) / rect.width, 0, 1);
+    const y = rect.height === 0 ? 0 : clamp((clientY - rect.top) / rect.height, 0, 1);
+    return { x, y };
+}
+/** A small labelled numeric input for one OKLCH channel. */
+function ChannelField({ label, value, min, max, step, precision, disabled, onCommit, }) {
+    const id = useId();
+    // Mirror keystrokes locally so partial entries stay editable, syncing back
+    // from the committed value whenever it changes from outside.
+    const [text, setText] = useState(() => trim(value, precision));
+    const [focused, setFocused] = useState(false);
+    useEffect(() => {
+        if (!focused)
+            setText(trim(value, precision));
+    }, [value, precision, focused]);
+    const handleChange = (event) => {
+        const raw = event.target.value;
+        setText(raw);
+        const parsed = Number.parseFloat(raw);
+        if (!Number.isNaN(parsed))
+            onCommit(clamp(parsed, min, max));
+    };
+    const handleBlur = () => {
+        setFocused(false);
+        const parsed = Number.parseFloat(text);
+        if (Number.isNaN(parsed)) {
+            setText(trim(value, precision));
+        }
+        else {
+            const next = clamp(parsed, min, max);
+            setText(trim(next, precision));
+            onCommit(next);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: id, className: "text-xs text-fg-secondary", children: label }), _jsx(Input, { id: id, type: "number", inputMode: "decimal", min: min, max: max, step: step, disabled: disabled, value: text, onChange: handleChange, onFocus: () => setFocused(true), onBlur: handleBlur, "data-slot": "color-picker-channel", className: "h-8 px-2 text-xs" })] }));
+}
+export const ColorPicker = forwardRef(({ value: valueProp, defaultValue = DEFAULT_VALUE, onValueChange, swatches = DEFAULT_SWATCHES, disabled = false, "aria-label": ariaLabel, className, contentClassName, id, }, ref) => {
+    const isControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    // The string is the source of truth; the channels are derived. When the
+    // string isn't oklch we keep `parsed === null` and fall back (tile shows the
+    // raw color, sliders default) — but channel edits always produce oklch.
+    const parsed = useMemo(() => parseOklch(value), [value]);
+    const channels = parsed ?? parseOklch(DEFAULT_VALUE) ?? { l: 0.62, c: 0.21, h: 256 };
+    const areaRef = useRef(null);
+    const hueRef = useRef(null);
+    const commit = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    }, [isControlled, onValueChange]);
+    const commitChannels = useCallback((next) => {
+        commit(serializeOklch({
+            l: clamp(next.l, L_MIN, L_MAX),
+            c: clamp(next.c, C_MIN, C_MAX),
+            h: clamp(((next.h % 360) + 360) % 360, H_MIN, H_MAX),
+        }));
+    }, [commit]);
+    // --- 2D area (x = chroma, y = lightness inverted) -----------------------
+    const updateAreaFromPointer = useCallback((clientX, clientY) => {
+        const node = areaRef.current;
+        if (!node)
+            return;
+        const { x, y } = fractionFromPointer(node, clientX, clientY);
+        commitChannels({
+            ...channels,
+            c: x * C_MAX,
+            l: (1 - y) * L_MAX,
+        });
+    }, [channels, commitChannels]);
+    const handleAreaPointerDown = (event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        updateAreaFromPointer(event.clientX, event.clientY);
+    };
+    const handleAreaPointerMove = (event) => {
+        if (disabled)
+            return;
+        // Only drag while the pointer is captured (i.e. a button is held).
+        if (!event.currentTarget.hasPointerCapture?.(event.pointerId))
+            return;
+        updateAreaFromPointer(event.clientX, event.clientY);
+    };
+    const handleAreaKeyDown = (event) => {
+        if (disabled)
+            return;
+        const lStep = event.shiftKey ? 0.1 : 0.02;
+        const cStep = event.shiftKey ? 0.05 : 0.01;
+        let handled = true;
+        const next = { ...channels };
+        switch (event.key) {
+            case "ArrowUp":
+                next.l = channels.l + lStep;
+                break;
+            case "ArrowDown":
+                next.l = channels.l - lStep;
+                break;
+            case "ArrowRight":
+                next.c = channels.c + cStep;
+                break;
+            case "ArrowLeft":
+                next.c = channels.c - cStep;
+                break;
+            case "Home":
+                next.c = C_MIN;
+                break;
+            case "End":
+                next.c = C_MAX;
+                break;
+            default:
+                handled = false;
+        }
+        if (handled) {
+            event.preventDefault();
+            commitChannels(next);
+        }
+    };
+    // --- Hue slider ----------------------------------------------------------
+    const updateHueFromPointer = useCallback((clientX, clientY) => {
+        const node = hueRef.current;
+        if (!node)
+            return;
+        const { x } = fractionFromPointer(node, clientX, clientY);
+        commitChannels({ ...channels, h: x * H_MAX });
+    }, [channels, commitChannels]);
+    const handleHuePointerDown = (event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        updateHueFromPointer(event.clientX, event.clientY);
+    };
+    const handleHuePointerMove = (event) => {
+        if (disabled)
+            return;
+        if (!event.currentTarget.hasPointerCapture?.(event.pointerId))
+            return;
+        updateHueFromPointer(event.clientX, event.clientY);
+    };
+    const handleHueKeyDown = (event) => {
+        if (disabled)
+            return;
+        const step = event.shiftKey ? 15 : 3;
+        let next = null;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = channels.h + step;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = channels.h - step;
+                break;
+            case "Home":
+                next = H_MIN;
+                break;
+            case "End":
+                next = H_MAX;
+                break;
+        }
+        if (next !== null) {
+            event.preventDefault();
+            commitChannels({ ...channels, h: next });
+        }
+    };
+    // --- Derived presentation ------------------------------------------------
+    const swatchBackground = tileColor(parsed, value);
+    // 2D area gradient: a lightness ramp (top=white-ish, bottom=black) layered
+    // over a chroma ramp (left=gray, right=saturated) at the current hue. Both
+    // built from native oklch() stops — no conversion.
+    const areaBackground = useMemo(() => {
+        const h = channels.h;
+        const lightnessLayer = `linear-gradient(to bottom, oklch(1 0 ${h}) 0%, oklch(0 0 ${h}) 100%)`;
+        const chromaLayer = `linear-gradient(to right, oklch(0.65 0 ${h}) 0%, oklch(0.65 ${C_MAX} ${h}) 100%)`;
+        // Multiply so the chroma ramp tints the lightness ramp.
+        return `${chromaLayer}, ${lightnessLayer}`;
+    }, [channels.h]);
+    const hueBackground = useMemo(() => {
+        const stops = [];
+        for (let deg = 0; deg <= 360; deg += 30) {
+            stops.push(`oklch(0.7 0.2 ${deg}) ${(deg / 360) * 100}%`);
+        }
+        return `linear-gradient(to right, ${stops.join(", ")})`;
+    }, []);
+    // Thumb positions as percentages.
+    const areaThumbX = (channels.c / C_MAX) * 100;
+    const areaThumbY = (1 - channels.l / L_MAX) * 100;
+    const hueThumbX = (channels.h / H_MAX) * 100;
+    const triggerLabel = serializeOklch(channels);
+    const handleTextChange = (event) => {
+        commit(event.target.value);
+    };
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: ref, id: id, type: "button", variant: "outline", disabled: disabled, "aria-label": ariaLabel ? `${ariaLabel}: ${value}` : `Color: ${value}`, "aria-haspopup": "dialog", "data-slot": "color-picker-trigger", className: cn("h-10 w-full justify-start gap-2 font-normal", className), children: [_jsx("span", { "aria-hidden": "true", "data-slot": "color-picker-swatch", className: "size-5 shrink-0 rounded-md border border-border", style: { background: swatchBackground } }), _jsx("span", { className: "truncate text-sm tabular-nums", children: value })] }) }), _jsxs(PopoverContent, { align: "start", "aria-label": ariaLabel ?? "Color picker", "data-slot": "color-picker-content", className: cn("w-64 space-y-3", contentClassName), children: [_jsx("div", { ref: areaRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": "Saturation and lightness", "aria-valuetext": `Chroma ${trim(channels.c, 3)}, lightness ${trim(channels.l, 3)}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round((channels.l / L_MAX) * 100), "aria-disabled": disabled || undefined, "data-slot": "color-picker-area", onPointerDown: handleAreaPointerDown, onPointerMove: handleAreaPointerMove, onKeyDown: handleAreaKeyDown, className: "relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-lg border border-border outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-floating data-[disabled]:opacity-50", style: { background: areaBackground }, children: _jsx("span", { "aria-hidden": "true", "data-slot": "color-picker-area-thumb", className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.4)]", style: {
+                                left: `${areaThumbX}%`,
+                                top: `${areaThumbY}%`,
+                                background: triggerLabel,
+                            } }) }), _jsx("div", { ref: hueRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": "Hue", "aria-valuemin": H_MIN, "aria-valuemax": H_MAX, "aria-valuenow": Math.round(channels.h), "aria-disabled": disabled || undefined, "data-slot": "color-picker-hue", onPointerDown: handleHuePointerDown, onPointerMove: handleHuePointerMove, onKeyDown: handleHueKeyDown, className: "relative h-4 w-full cursor-ew-resize touch-none rounded-full border border-border outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-floating data-[disabled]:opacity-50", style: { background: hueBackground }, children: _jsx("span", { "aria-hidden": "true", "data-slot": "color-picker-hue-thumb", className: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.4)]", style: {
+                                left: `${hueThumbX}%`,
+                                background: `oklch(0.7 0.2 ${channels.h})`,
+                            } }) }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsx(ChannelField, { label: "L", value: channels.l, min: L_MIN, max: L_MAX, step: 0.01, precision: 4, disabled: disabled, onCommit: (l) => commitChannels({ ...channels, l }) }), _jsx(ChannelField, { label: "C", value: channels.c, min: C_MIN, max: C_MAX, step: 0.01, precision: 4, disabled: disabled, onCommit: (c) => commitChannels({ ...channels, c }) }), _jsx(ChannelField, { label: "H", value: channels.h, min: H_MIN, max: H_MAX, step: 1, precision: 2, disabled: disabled, onCommit: (h) => commitChannels({ ...channels, h }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: `${id ?? "color-picker"}-oklch`, className: "text-xs text-fg-secondary", children: "Value" }), _jsx(Input, { id: `${id ?? "color-picker"}-oklch`, type: "text", spellCheck: false, autoComplete: "off", disabled: disabled, value: value, onChange: handleTextChange, "data-slot": "color-picker-value", className: "h-8 px-2 font-mono text-xs" })] }), swatches.length > 0 ? (_jsx("div", { role: "group", "aria-label": "Preset colors", "data-slot": "color-picker-swatches", className: "flex flex-wrap gap-1.5", children: swatches.map((swatch) => {
+                            const isActive = swatch === value;
+                            return (_jsx("button", { type: "button", disabled: disabled, "aria-label": swatch, "aria-pressed": isActive, "data-slot": "color-picker-swatch-button", onClick: () => commit(swatch), className: cn("size-6 rounded-md border border-border transition-transform", "outline-none hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-floating", "disabled:pointer-events-none disabled:opacity-50", isActive && "ring-2 ring-ring ring-offset-2 ring-offset-surface-floating"), style: { background: swatch } }, swatch));
+                        }) })) : null] })] }));
+});
+ColorPicker.displayName = "ColorPicker";
+//# sourceMappingURL=color-picker.js.map

package/dist/components/combobox.d.ts

@@ -0,0 +1,33 @@
+export interface ComboboxOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    /** The list of selectable options. */
+    options: ComboboxOption[];
+    /** Controlled selected value. Pair with `onValueChange`. */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the new value when the selection changes. */
+    onValueChange?: (value: string) => void;
+    /** Text shown on the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Placeholder for the search input inside the popover. */
+    searchPlaceholder?: string;
+    /** Message rendered when no option matches the search. */
+    emptyText?: string;
+    /** Disables the trigger entirely. */
+    disabled?: boolean;
+    /** Extra classes for the trigger button. */
+    className?: string;
+    /** Extra classes for the popover content. */
+    contentClassName?: string;
+    /** Accessible name for the trigger when there is no visible label. */
+    "aria-label"?: string;
+    /** ID of an element labelling the trigger. */
+    "aria-labelledby"?: string;
+}
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+export const Combobox = forwardRef(({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select an option…", searchPlaceholder = "Search…", emptyText = "No results found.", disabled = false, className, contentClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const selectedOption = useMemo(() => options.find((option) => option.value === value), [options, value]);
+    const handleSelect = useCallback((nextValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+        setOpen(false);
+    }, [isControlled, onValueChange]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: ref, variant: "outline", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled: disabled, "data-slot": "combobox-trigger", className: cn("w-full justify-between font-normal", "aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30", !selectedOption && "text-fg-muted", className), ...props, children: [_jsx("span", { className: "truncate", children: selectedOption?.label ?? placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-60", "aria-hidden": "true" })] }) }), _jsx(PopoverContent, { align: "start", "data-slot": "combobox-content", className: cn("w-[var(--radix-popover-trigger-width)] min-w-[8rem] p-0", contentClassName), children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: searchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyText }), options.map((option) => {
+                                    const isSelected = option.value === value;
+                                    return (_jsxs(CommandItem
+                                    // cmdk indexes/highlights by `value`; duplicate labels would
+                                    // collide, so include the stable value to keep it unique while
+                                    // still matching the visible label for text search.
+                                    , { value: `${option.label} ${option.value}`, disabled: option.disabled, onSelect: () => handleSelect(option.value), children: [_jsx(Check, { className: cn("size-4 shrink-0", isSelected ? "opacity-100" : "opacity-0"), "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: option.label }), isSelected ? _jsx("span", { className: "sr-only", children: ", selected" }) : null] }, option.value));
+                                })] })] }) })] }));
+});
+Combobox.displayName = "Combobox";
+//# sourceMappingURL=combobox.js.map