@vamos-ui/react 0.2.0 → 0.4.0

package/dist/components/pin-map.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useFormat } from "../lib/locale.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+const mercY = (lat) => Math.log(Math.tan(Math.PI / 4 + (Math.max(-85, Math.min(85, lat)) * Math.PI) / 360));
+const toRad = (deg) => (deg * Math.PI) / 180;
+/** Percent string with fixed precision — identical on server and client. */
+const pct = (v) => `${(v * 100).toFixed(3)}%`;
+function fitBounds(pins, bounds, aspect) {
+    let b = bounds;
+    if (!b) {
+        if (pins.length === 0)
+            b = { north: 1, south: -1, west: -1, east: 1 };
+        else {
+            const lats = pins.map((p) => p.lat);
+            const lngs = pins.map((p) => p.lng);
+            const [n, s, w, e] = [Math.max(...lats), Math.min(...lats), Math.min(...lngs), Math.max(...lngs)];
+            const padLat = Math.max((n - s) * 0.14, 0.01);
+            const padLng = Math.max((e - w) * 0.1, 0.01);
+            b = { north: n + padLat, south: s - padLat, west: w - padLng, east: e + padLng };
+        }
+    }
+    // Expand the short side so the Mercator projection keeps true shapes at this aspect ratio.
+    const xSpan = toRad(b.east - b.west);
+    const ySpan = mercY(b.north) - mercY(b.south);
+    if (xSpan / ySpan < aspect) {
+        const extra = (ySpan * aspect - xSpan) / 2;
+        const d = (extra * 180) / Math.PI;
+        return { ...b, west: b.west - d, east: b.east + d };
+    }
+    const targetY = xSpan / aspect;
+    const mid = (mercY(b.north) + mercY(b.south)) / 2;
+    const inv = (y) => (Math.atan(Math.exp(y)) * 360) / Math.PI - 90;
+    return { ...b, north: inv(mid + targetY / 2), south: inv(mid - targetY / 2) };
+}
+const toneFill = {
+    accent: "bg-accent text-accent-fg",
+    neutral: "bg-fg-muted text-scene",
+    info: "bg-info text-scene",
+    success: "bg-success text-scene",
+    warning: "bg-warning text-scene",
+    danger: "bg-danger text-scene",
+};
+const toneVar = {
+    accent: "var(--accent)",
+    neutral: "var(--fg-muted)",
+    info: "var(--info)",
+    success: "var(--success)",
+    warning: "var(--warning)",
+    danger: "var(--danger)",
+};
+/** A tidy step for ticks: 0.01, 0.02, 0.05, 0.1 … */
+function niceStep(span, target) {
+    const raw = span / target;
+    const pow = 10 ** Math.floor(Math.log10(raw));
+    const m = raw / pow;
+    return (m < 1.5 ? 1 : m < 3.5 ? 2 : m < 7.5 ? 5 : 10) * pow;
+}
+/**
+ * Markers on a projected sheet — stores, field jobs, vehicles, live visitors — without a tile
+ * provider. Pins are positioned in Web Mercator inside `bounds`; pass a `backdrop` to lay them
+ * over your own static map. Selection is controlled or not; arrow keys move to the nearest pin
+ * in that direction, Enter selects, Escape clears.
+ *
+ * ```tsx
+ * <PinMap aria-label="Stores" pins={stores.map((s) => ({ id: s.id, lat: s.lat, lng: s.lng, label: s.name }))}
+ *   selectedId={selected} onSelectedIdChange={setSelected} />
+ * ```
+ */
+export const PinMap = React.forwardRef(function PinMap({ pins, bounds, aspectRatio = 16 / 10, variant = "pin", selectedId: selectedProp, defaultSelectedId = null, onSelectedIdChange, callout, showLabels, backdrop, bare, className, style, children, ...props }, ref) {
+    const f = useFormat();
+    const [selectedId, setSelectedId] = useControllableState({ value: selectedProp, defaultValue: defaultSelectedId, onChange: onSelectedIdChange, name: "PinMap" });
+    const [focusId, setFocusId] = React.useState(null);
+    const pinRefs = React.useRef(new Map());
+    const calloutId = React.useId();
+    const b = React.useMemo(() => fitBounds(pins, bounds, aspectRatio), [pins, bounds, aspectRatio]);
+    const yTop = mercY(b.north);
+    const ySpan = yTop - mercY(b.south);
+    const project = React.useCallback((lat, lng) => ({ x: (lng - b.west) / (b.east - b.west), y: (yTop - mercY(lat)) / ySpan }), [b, yTop, ySpan]);
+    const placed = React.useMemo(() => pins.map((p) => ({ pin: p, ...project(p.lat, p.lng) })), [pins, project]);
+    const maxValue = Math.max(1, ...pins.map((p) => p.value ?? 0));
+    const tabStop = focusId && pins.some((p) => p.id === focusId) ? focusId : selectedId && pins.some((p) => p.id === selectedId) ? selectedId : pins[0]?.id;
+    const moveFocus = (id) => {
+        if (!id)
+            return;
+        setFocusId(id);
+        pinRefs.current.get(id)?.focus();
+    };
+    const onKeyDown = (e, from) => {
+        const dir = { ArrowRight: [1, 0], ArrowLeft: [-1, 0], ArrowDown: [0, 1], ArrowUp: [0, -1] }[e.key];
+        if (dir) {
+            e.preventDefault();
+            const rtl = getComputedStyle(e.currentTarget).direction === "rtl" && dir[0] !== 0;
+            const [dx, dy] = rtl ? [-dir[0], dir[1]] : dir;
+            let best;
+            let bestScore = Infinity;
+            for (const p of placed) {
+                if (p.pin.id === from.pin.id)
+                    continue;
+                const vx = (p.x - from.x) * aspectRatio;
+                const vy = p.y - from.y;
+                const along = vx * dx + vy * dy;
+                if (along <= 0.0001)
+                    continue;
+                const across = Math.abs(vx * dy - vy * dx);
+                const score = along + across * 2;
+                if (score < bestScore) {
+                    bestScore = score;
+                    best = p;
+                }
+            }
+            moveFocus(best?.pin.id);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            moveFocus(pins[0]?.id);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            moveFocus(pins.at(-1)?.id);
+        }
+        else if (e.key === "Escape" && selectedId) {
+            e.preventDefault();
+            setSelectedId(null);
+        }
+    };
+    // Ticks and scale bar.
+    const latStep = niceStep(b.north - b.south, 4);
+    const lngStep = niceStep(b.east - b.west, 6);
+    const latTicks = [];
+    for (let v = Math.ceil(b.south / latStep) * latStep; v <= b.north; v += latStep)
+        latTicks.push(Number(v.toFixed(6)));
+    const lngTicks = [];
+    for (let v = Math.ceil(b.west / lngStep) * lngStep; v <= b.east; v += lngStep)
+        lngTicks.push(Number(v.toFixed(6)));
+    const decimals = Math.max(0, -Math.floor(Math.log10(Math.min(latStep, lngStep))));
+    const widthKm = (b.east - b.west) * 111.32 * Math.cos(toRad((b.north + b.south) / 2));
+    const scaleKm = niceStep(widthKm, 5);
+    const scaleShare = scaleKm / widthKm;
+    const scaleLabel = scaleKm >= 1 ? f.number(scaleKm, { style: "unit", unit: "kilometer", unitDisplay: "short" }) : f.number(Math.round(scaleKm * 1000), { style: "unit", unit: "meter", unitDisplay: "short" });
+    const selected = placed.find((p) => p.pin.id === selectedId);
+    const renderCallout = callout === false ? null : (callout ?? ((p) => (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-[13px] font-medium text-fg", children: p.label }), p.description ? _jsx("div", { className: "mt-0.5 text-xs text-fg-muted", children: p.description }) : null] }))));
+    return (_jsxs("div", { ref: ref, role: "group", "data-slot": "pin-map", className: cn("relative isolate w-full overflow-hidden rounded-ui border border-line bg-surface-2 select-none", className), style: { aspectRatio: String(aspectRatio), ...style }, ...props, children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 -z-10", children: backdrop ?? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(color-mix(in_oklch,var(--fg)_14%,transparent)_0.8px,transparent_1px)] bg-[length:14px_14px] opacity-70" }), _jsxs("svg", { className: "absolute inset-0 size-full", preserveAspectRatio: "none", viewBox: "0 0 100 100", children: [latTicks.map((v) => {
+                                    const y = project(v, b.west).y * 100;
+                                    return _jsx("line", { x1: "0", x2: "100", y1: y, y2: y, vectorEffect: "non-scaling-stroke", stroke: "var(--line)", strokeWidth: "1" }, `la${v}`);
+                                }), lngTicks.map((v) => {
+                                    const x = project(b.north, v).x * 100;
+                                    return _jsx("line", { y1: "0", y2: "100", x1: x, x2: x, vectorEffect: "non-scaling-stroke", stroke: "var(--line)", strokeWidth: "1" }, `lo${v}`);
+                                })] })] })) }), !bare ? (_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 font-mono text-[9.5px] text-fg-subtle tabular", children: [latTicks.map((v) => (_jsxs("span", { className: "absolute start-1.5 -translate-y-full pb-0.5", style: { top: pct(project(v, b.west).y) }, children: [Math.abs(v).toFixed(decimals), "\u00B0", v >= 0 ? "N" : "S"] }, `tl${v}`))), lngTicks.slice(1).map((v) => (_jsxs("span", { className: "absolute top-1.5 ps-1", style: { left: pct(project(b.north, v).x) }, children: [Math.abs(v).toFixed(decimals), "\u00B0", v >= 0 ? "E" : "W"] }, `tg${v}`))), _jsxs("span", { className: "absolute inset-x-3 bottom-2.5 flex flex-col items-end gap-1", children: [_jsx("span", { children: scaleLabel }), _jsx("span", { className: "block h-1 border-x border-b border-fg-subtle", style: { width: pct(scaleShare) } })] })] })) : null, _jsxs("div", { className: "absolute inset-0", children: [placed.map(({ pin, x, y }) => {
+                        const tone = pin.tone ?? "accent";
+                        const isSelected = pin.id === selectedId;
+                        const size = variant === "bubble" ? Math.round(10 + Math.sqrt((pin.value ?? 0) / maxValue) * 34) : variant === "dot" ? 10 : 22;
+                        return (_jsxs("button", { ref: (el) => {
+                                if (el)
+                                    pinRefs.current.set(pin.id, el);
+                                else
+                                    pinRefs.current.delete(pin.id);
+                            }, type: "button", "data-slot": "pin-map-pin", "data-selected": isSelected || undefined, "aria-pressed": isSelected, "aria-label": pin.label, "aria-describedby": isSelected && renderCallout ? calloutId : undefined, tabIndex: pin.id === tabStop ? 0 : -1, onFocus: () => setFocusId(pin.id), onClick: () => setSelectedId(isSelected ? null : pin.id), onKeyDown: (e) => onKeyDown(e, { pin, x, y }), className: cn("group/pin absolute grid -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]", isSelected ? "z-20" : "z-10 hover:z-20 focus-visible:z-20"), style: { left: pct(x), top: pct(y), width: Math.max(size, 24), height: Math.max(size, 24) }, children: [pin.pulse ? (_jsx("span", { "aria-hidden": "true", className: "absolute rounded-full opacity-60 motion-safe:animate-ping", style: { width: Math.min(size, 22), height: Math.min(size, 22), background: toneVar[tone] } })) : null, variant === "bubble" ? (_jsx("span", { "aria-hidden": "true", className: "rounded-full border transition-transform duration-200 group-hover/pin:scale-105 motion-reduce:transition-none", style: {
+                                        width: size,
+                                        height: size,
+                                        background: `color-mix(in oklch, ${toneVar[tone]} ${isSelected ? 55 : 30}%, transparent)`,
+                                        borderColor: toneVar[tone],
+                                    } })) : (_jsx("span", { "aria-hidden": "true", className: cn("relative grid place-items-center rounded-full ring-2 ring-[var(--surface-solid)] shadow-[0_1px_3px_rgb(0_0_0/0.25)] transition-transform duration-200 group-hover/pin:scale-110 motion-reduce:transition-none [&_svg]:size-3", toneFill[tone], isSelected && "scale-125 ring-[var(--fg)]"), style: { width: variant === "dot" ? 9 : 18, height: variant === "dot" ? 9 : 18 }, children: variant === "pin" ? pin.icon : null })), showLabels ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute start-full ms-0.5 rounded-ui-sm bg-[color-mix(in_oklch,var(--surface-solid)_82%,transparent)] px-1 text-[11px] font-medium whitespace-nowrap text-fg", children: pin.label })) : null] }, pin.id));
+                    }), selected && renderCallout ? (_jsx("div", { id: calloutId, "data-slot": "pin-map-callout", className: cn("surface-popover ui-pop pointer-events-none absolute z-30 w-max max-w-56 -translate-x-1/2 rounded-ui px-3 py-2", selected.y < 0.35 ? "mt-4" : "-translate-y-full -mt-4"), style: { left: `clamp(7rem, ${pct(selected.x)}, calc(100% - 7rem))`, top: pct(selected.y) }, children: renderCallout(selected.pin) })) : null] }), children] }));
+});

package/dist/components/placeholder-art.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export type PlaceholderArtPattern = "grid" | "dots" | "lines" | "rings" | "glow";
+export declare const PLACEHOLDER_ART_PATTERNS: PlaceholderArtPattern[];
+/** FNV-1a 32-bit — stable across server and client, so SSR and hydration agree. */
+export declare function hashSeed(seed: string): number;
+export interface PlaceholderArtRecipe {
+    pattern: PlaceholderArtPattern;
+    /** Chart palette slot (1–6) used as the tint. */
+    hue: number;
+    /** Second slot for the glow. */
+    hue2: number;
+    /** Line angle in degrees (lines). */
+    angle: number;
+    /** Pattern cell in px. */
+    cell: number;
+    /** Focal point in % (rings, glow, highlight). */
+    x: number;
+    y: number;
+}
+/** The same seed always gives the same recipe. `pattern` overrides the seeded choice. */
+export declare function placeholderArtRecipe(seed: string, pattern?: PlaceholderArtPattern | "auto"): PlaceholderArtRecipe;
+/** CSS background for a recipe. Token colours only, mixed per theme by the browser. */
+export declare function placeholderArtStyle(recipe: PlaceholderArtRecipe, strength?: "subtle" | "bold"): React.CSSProperties;
+export interface PlaceholderArtProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Any stable string (a slug, a name, a record id). Same seed → same art, on server and client. */
+    seed?: string;
+    /** Force a pattern. Default `"auto"` (picked from the seed). */
+    pattern?: PlaceholderArtPattern | "auto";
+    /** Centre icon. Default: an image glyph. `false` hides it. */
+    icon?: React.ReactNode | false;
+    /**
+     * What the missing image would show. Set → `role="img"` with this as its name; empty → decorative
+     * (`aria-hidden`).
+     */
+    label?: string;
+    /** Print the label (or a custom node) in the bottom corner, e.g. "Photo · Harbour terrace". */
+    caption?: boolean | React.ReactNode;
+    /** `bold` doubles the tint — for large hero areas on plain pages. Default `subtle`. */
+    strength?: "subtle" | "bold";
+}
+/**
+ * A tasteful, deterministic stand-in for a missing image: a token-tinted pattern (grid, dots, lines,
+ * rings or glow) chosen from a seed, an optional glyph and caption. No assets, no network, no
+ * dependencies; follows theme and accent. Fills its parent — give the parent a size, or use it inside
+ * `AspectRatio` / `Image`.
+ *
+ * ```tsx
+ * <AspectRatio ratio="4/3"><PlaceholderArt seed="harbour-terrace" label="Harbour terrace at dusk" /></AspectRatio>
+ * ```
+ */
+export declare const PlaceholderArt: React.ForwardRefExoticComponent<PlaceholderArtProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/placeholder-art.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Image as ImageIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+export const PLACEHOLDER_ART_PATTERNS = ["grid", "dots", "lines", "rings", "glow"];
+/** FNV-1a 32-bit — stable across server and client, so SSR and hydration agree. */
+export function hashSeed(seed) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < seed.length; i++) {
+        h ^= seed.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+}
+/** The same seed always gives the same recipe. `pattern` overrides the seeded choice. */
+export function placeholderArtRecipe(seed, pattern) {
+    const h = hashSeed(seed || "vamos");
+    const pick = (shift, n) => (h >>> shift) % n;
+    const hue = pick(0, 6) + 1;
+    return {
+        pattern: pattern && pattern !== "auto" ? pattern : PLACEHOLDER_ART_PATTERNS[pick(3, PLACEHOLDER_ART_PATTERNS.length)],
+        hue,
+        hue2: ((hue + pick(6, 4)) % 6) + 1,
+        angle: [30, 45, 60, 120, 135, 150][pick(9, 6)],
+        cell: [14, 18, 22, 26][pick(12, 4)],
+        x: 15 + pick(14, 70),
+        y: 10 + pick(21, 60),
+    };
+}
+/** CSS background for a recipe. Token colours only, mixed per theme by the browser. */
+export function placeholderArtStyle(recipe, strength = "subtle") {
+    const { pattern, hue, hue2, angle, cell, x, y } = recipe;
+    const tint = `var(--chart-${hue})`;
+    const k = strength === "bold" ? 1.6 : 1;
+    const ink = `color-mix(in oklab, ${tint} ${Math.round(30 * k)}%, transparent)`;
+    const base = `color-mix(in oklab, ${tint} ${Math.round(9 * k)}%, var(--surface-2))`;
+    const highlight = `radial-gradient(120% 90% at ${x}% ${y}%, color-mix(in oklab, ${tint} ${Math.round(16 * k)}%, transparent), transparent 65%)`;
+    let layers;
+    let sizes;
+    switch (pattern) {
+        case "grid":
+            layers = [highlight, `linear-gradient(${ink} 1px, transparent 1px)`, `linear-gradient(90deg, ${ink} 1px, transparent 1px)`];
+            sizes = ["100% 100%", `${cell}px ${cell}px`, `${cell}px ${cell}px`];
+            break;
+        case "dots":
+            layers = [highlight, `radial-gradient(circle, ${ink} 1.1px, transparent 1.6px)`];
+            sizes = ["100% 100%", `${cell}px ${cell}px`];
+            break;
+        case "lines":
+            layers = [highlight, `repeating-linear-gradient(${angle}deg, ${ink} 0 1px, transparent 1px ${Math.round(cell / 2)}px)`];
+            sizes = ["100% 100%", "100% 100%"];
+            break;
+        case "rings":
+            layers = [highlight, `repeating-radial-gradient(circle at ${x}% ${y}%, transparent 0 ${cell - 1}px, ${ink} ${cell - 1}px ${cell}px)`];
+            sizes = ["100% 100%", "100% 100%"];
+            break;
+        case "glow":
+        default:
+            layers = [
+                `radial-gradient(70% 80% at ${x}% ${y}%, color-mix(in oklab, ${tint} ${Math.round(34 * k)}%, transparent), transparent 70%)`,
+                `radial-gradient(60% 70% at ${100 - x}% ${100 - y}%, color-mix(in oklab, var(--chart-${hue2}) ${Math.round(26 * k)}%, transparent), transparent 70%)`,
+            ];
+            sizes = ["100% 100%", "100% 100%"];
+    }
+    return { backgroundColor: base, backgroundImage: layers.join(", "), backgroundSize: sizes.join(", "), backgroundPosition: "center" };
+}
+/**
+ * A tasteful, deterministic stand-in for a missing image: a token-tinted pattern (grid, dots, lines,
+ * rings or glow) chosen from a seed, an optional glyph and caption. No assets, no network, no
+ * dependencies; follows theme and accent. Fills its parent — give the parent a size, or use it inside
+ * `AspectRatio` / `Image`.
+ *
+ * ```tsx
+ * <AspectRatio ratio="4/3"><PlaceholderArt seed="harbour-terrace" label="Harbour terrace at dusk" /></AspectRatio>
+ * ```
+ */
+export const PlaceholderArt = React.forwardRef(function PlaceholderArt({ seed, pattern = "auto", icon, label, caption, strength = "subtle", className, style, ...props }, ref) {
+    const recipe = placeholderArtRecipe(seed ?? label ?? "", pattern);
+    const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+    const captionNode = caption === true ? label : caption || null;
+    return (_jsxs("div", { ref: ref, "data-slot": "placeholder-art", "data-pattern": recipe.pattern, ...a11y, className: cn("relative flex size-full min-h-16 items-center justify-center overflow-hidden text-fg-subtle", className), style: { ...placeholderArtStyle(recipe, strength), ...style }, ...props, children: [icon !== false ? (_jsx("span", { "aria-hidden": true, "data-slot": "placeholder-art-icon", className: "inline-flex size-10 items-center justify-center rounded-full border border-line bg-[color-mix(in_oklab,var(--surface)_72%,transparent)] [&_svg]:size-[18px]", children: icon ?? _jsx(ImageIcon, { strokeWidth: 1.5 }) })) : null, captionNode ? (_jsx("span", { "aria-hidden": true, "data-slot": "placeholder-art-caption", className: "absolute start-3 bottom-2.5 max-w-[calc(100%-1.5rem)] truncate font-mono text-[10.5px] tracking-[0.06em] text-fg-muted uppercase", children: captionNode })) : null] }));
+});

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { encodeQr, qrPath, type QrErrorCorrection, type QrMatrix } from "./_qr-core.js";
+export { encodeQr, qrPath, type QrErrorCorrection, type QrMatrix };
+export interface QrCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Text to encode (URL, otpauth:// URI, Wi-Fi string…). UTF-8, byte mode. */
+    value: string;
+    /** Accessible name — say what scanning does: "QR code to add Kiln & Linen to your authenticator app". */
+    "aria-label": string;
+    /** `"M"` (default) recovers ~15% damage; a centre mark switches to `"H"` automatically. */
+    errorCorrection?: QrErrorCorrection;
+    /** Rendered width (px or any CSS length). Default `176`. */
+    size?: number | string;
+    /**
+     * Quiet zone in modules. Default `4` without a plate, `2` on the plate (the plate's padding
+     * adds the rest). Scanners need light space around the code.
+     */
+    margin?: number;
+    /**
+     * Draw the code on a light plate (default). Codes scan most reliably dark-on-light, so the plate
+     * stays light in dark mode. `false` uses the current text colour on a transparent background.
+     */
+    plate?: boolean;
+    /** Shown when `value` is too long for version 40. Default "Too long for a QR code". */
+    fallback?: React.ReactNode;
+    /** Small mark in the centre (logo, icon). Keep it under ~20% of the width. */
+    children?: React.ReactNode;
+}
+/**
+ * A QR code drawn as one SVG path — for two-factor enrolment, invite links, tickets and
+ * payment slips. Encoded on the server or client with no dependency; works in RSC.
+ *
+ * ```tsx
+ * <QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />
+ * ```
+ */
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/qr-code.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { encodeQr, qrPath } from "./_qr-core.js";
+export { encodeQr, qrPath };
+/**
+ * A QR code drawn as one SVG path — for two-factor enrolment, invite links, tickets and
+ * payment slips. Encoded on the server or client with no dependency; works in RSC.
+ *
+ * ```tsx
+ * <QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />
+ * ```
+ */
+export const QrCode = React.forwardRef(function QrCode({ value, errorCorrection, size = 176, margin, plate = true, fallback = "Too long for a QR code", children, className, style, ...props }, ref) {
+    const ecl = errorCorrection ?? (children ? "H" : "M");
+    let qr = null;
+    try {
+        qr = encodeQr(value, { errorCorrection: ecl });
+    }
+    catch {
+        qr = null;
+    }
+    const quiet = margin ?? (plate ? 2 : 4);
+    const dim = qr ? qr.size + quiet * 2 : 0;
+    const width = typeof size === "number" ? `${size}px` : size;
+    return (_jsxs("div", { ref: ref, role: "img", "data-slot": "qr-code", "data-version": qr?.version, className: cn("relative inline-grid shrink-0 place-items-center", plate && "light rounded-ui border border-line bg-[var(--surface-solid)] p-2 text-fg shadow-[var(--surface-shadow)]", className), style: { width, ...style }, ...props, children: [qr ? (_jsx("svg", { viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", focusable: "false", shapeRendering: "crispEdges", className: "block size-full", children: _jsx("path", { d: qrPath(qr, quiet), fill: "currentColor" }) })) : (_jsx("span", { className: "grid aspect-square w-full place-items-center p-3 text-center text-xs text-fg-muted", children: fallback })), children && qr ? (_jsx("span", { "data-slot": "qr-code-mark", className: "absolute top-1/2 left-1/2 grid size-[22%] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-ui-sm bg-[var(--surface-solid)] p-[3%] [&>svg]:size-full [&>img]:size-full [&>img]:object-contain", children: children })) : null] }));
+});

package/dist/components/record-detail-layout.d.ts

@@ -68,7 +68,7 @@ export interface RecordLayoutProps extends React.HTMLAttributes<HTMLDivElement>
  *
  * ```tsx
  * <RecordLayout>
- *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Acme"
+ *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Northpoint"
  *     status={<Badge tone="success">Customer</Badge>} facts={[{ label: "Owner", value: "Meltem Aydın" }]}
  *     pager={<RecordPager index={3} total={128} prevHref="/contacts/41" nextHref="/contacts/43" />} />
  *   <RecordMain>{tabs}</RecordMain>
@@ -86,7 +86,7 @@ export interface RecordHeaderProps extends Omit<React.HTMLAttributes<HTMLElement
     media?: React.ReactNode;
     /** The page's `<h1>`. */
     title: React.ReactNode;
-    /** "Head of Operations · Acme Corp". */
+    /** "Head of Operations · Northpoint Ltd". */
     subtitle?: React.ReactNode;
     /** Status badge next to the title. */
     status?: React.ReactNode;

package/dist/components/record-detail-layout.js

@@ -114,7 +114,7 @@ export const SidePaneHandle = React.forwardRef(function SidePaneHandle({ value,
  *
  * ```tsx
  * <RecordLayout>
- *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Acme"
+ *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Northpoint"
  *     status={<Badge tone="success">Customer</Badge>} facts={[{ label: "Owner", value: "Meltem Aydın" }]}
  *     pager={<RecordPager index={3} total={128} prevHref="/contacts/41" nextHref="/contacts/43" />} />
  *   <RecordMain>{tabs}</RecordMain>

package/dist/components/sidebar.js

@@ -82,7 +82,7 @@ export const SidebarFooter = React.forwardRef(function SidebarFooter({ className
 export const SidebarGroup = React.forwardRef(function SidebarGroup({ label, className, children, ...props }, ref) {
     const { collapsed } = useSidebarCtx();
     const id = React.useId();
-    return (_jsxs("div", { ref: ref, "data-slot": "sidebar-group", role: label ? "group" : undefined, "aria-labelledby": label ? id : undefined, className: cn("grid", className), ...props, children: [label ? (collapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { id: id, className: "sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-4 my-2 h-px bg-nav-line" })] })) : (_jsx("span", { id: id, className: "px-4.5 pt-4 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/50", children: label }))) : null, _jsx("ul", { className: "grid gap-px", children: children })] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "sidebar-group", role: label ? "group" : undefined, "aria-labelledby": label ? id : undefined, className: cn("grid", className), ...props, children: [label ? (collapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { id: id, className: "sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-4 my-2 h-px bg-nav-line" })] })) : (_jsx("span", { id: id, className: "px-4.5 pt-4 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }))) : null, _jsx("ul", { className: "grid gap-px", children: children })] }));
 });
 /** A hairline between sections. */
 export function SidebarSeparator({ className }) {
@@ -286,7 +286,7 @@ function SidebarFlyoutItem({ label, href, rowClass, current, inTrail, external,
                                 e.preventDefault();
                                 close(true);
                             }
-                        }, children: [collapsed ? _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/60", children: label }) : null, _jsx(SubContext.Provider, { value: { placement: "flyout", depth: 1, close: () => close(false) }, children: _jsx("ul", { className: "grid gap-px", children: sub }) })] }) }) })] }));
+                        }, children: [collapsed ? _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }) : null, _jsx(SubContext.Provider, { value: { placement: "flyout", depth: 1, close: () => close(false) }, children: _jsx("ul", { className: "grid gap-px", children: sub }) })] }) }) })] }));
 }
 /** A level-2 (or level-3) link under a `SidebarItem`. */
 export function SidebarSubItem({ id, label, href, badge, disabled, external, active, children, className }) {
@@ -300,9 +300,9 @@ export function SidebarSubItem({ id, label, href, badge, disabled, external, act
     const flyout = placement === "flyout";
     const pad = flyout ? (depth > 1 ? "ps-5 pe-2.5" : "px-2.5") : depth > 1 ? "ps-[54px] pe-3" : "ps-[42px] pe-3";
     const rowClass = cn(rowBase, "gap-2 py-1.5 text-[13px]", flyout ? "rounded-ui-sm hover:bg-nav-hover hover:text-nav-fg-strong" : "hover:text-nav-fg-strong", pad, current ? "font-medium text-nav-fg-strong" : undefined, className);
-    const body = (_jsxs(_Fragment, { children: [current && flyout ? _jsx(Check, { "aria-hidden": true, className: "size-3.5 shrink-0 text-accent" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), badgeText ? _jsxs("span", { className: "sr-only", children: [", ", badgeText] }) : null, typeof disabled === "string" ? _jsx("span", { className: "shrink-0 text-[10.5px] text-nav-fg/60", children: disabled }) : _jsx(SidebarBadgeView, { spec: badge, rail: false }), (external ?? (href ? isAbsoluteHref(href) : false)) ? _jsx(ExternalMark, {}) : null] }));
+    const body = (_jsxs(_Fragment, { children: [current && flyout ? _jsx(Check, { "aria-hidden": true, className: "size-3.5 shrink-0 text-accent" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), badgeText ? _jsxs("span", { className: "sr-only", children: [", ", badgeText] }) : null, typeof disabled === "string" ? _jsx("span", { className: "shrink-0 text-[10.5px] text-nav-fg/70", children: disabled }) : _jsx(SidebarBadgeView, { spec: badge, rail: false }), (external ?? (href ? isAbsoluteHref(href) : false)) ? _jsx(ExternalMark, {}) : null] }));
     if (hasChildren && flyout) {
-        return (_jsxs("li", { "data-slot": "sidebar-sub-item", className: "mt-1 first:mt-0", children: [_jsx("p", { className: "px-2.5 pt-1.5 pb-1 text-[11px] font-medium tracking-[0.06em] text-nav-fg/55", children: label }), _jsx("ul", { className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) })] }));
+        return (_jsxs("li", { "data-slot": "sidebar-sub-item", className: "mt-1 first:mt-0", children: [_jsx("p", { className: "px-2.5 pt-1.5 pb-1 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }), _jsx("ul", { className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) })] }));
     }
     if (hasChildren) {
         return (_jsx(Collapsible.Root, { asChild: true, open: open, onOpenChange: setOpen, children: _jsxs("li", { "data-slot": "sidebar-sub-item", children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(rowClass, inTrail && "text-nav-fg-strong"), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-3.5 shrink-0 opacity-60 transition-transform", open && "rotate-180") })] }) }), _jsx(Collapsible.Content, { className: "ui-collapse", children: _jsx("ul", { "aria-label": label, className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) }) })] }) }));
@@ -401,16 +401,16 @@ export function AppSwitcher({ apps, activeApp, onSelect, subtitle, workspaces, a
         return null;
     const single = apps.length < 2 && !(workspaces && workspaces.length > 1);
     const workspace = workspaces?.find((w) => w.id === activeWorkspace);
-    const tile = (_jsxs(_Fragment, { children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-[9px] bg-accent text-accent-fg [&_svg]:size-[17px]", children: _jsx(AppIcon, { icon: app.icon }) }), _jsxs("span", { className: cn("min-w-0 flex-1 leading-tight", collapsed && "sr-only"), children: [_jsx("span", { className: "block truncate text-[13.5px] font-semibold text-nav-fg-strong", children: app.name }), _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/60", children: subtitle ?? (workspace ? workspace.name : app.description) })] })] }));
+    const tile = (_jsxs(_Fragment, { children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-[9px] bg-accent text-accent-fg [&_svg]:size-[17px]", children: _jsx(AppIcon, { icon: app.icon }) }), _jsxs("span", { className: cn("min-w-0 flex-1 leading-tight", collapsed && "sr-only"), children: [_jsx("span", { className: "block truncate text-[13.5px] font-semibold text-nav-fg-strong", children: app.name }), _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/75", children: subtitle ?? (workspace ? workspace.name : app.description) })] })] }));
     const boxClass = cn("flex w-full items-center gap-2.5 rounded-ui-sm p-1.5 text-start", collapsed && "justify-center");
     if (single)
         return _jsx("div", { className: cn(boxClass, className), children: tile });
-    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(boxClass, "transition-colors hover:bg-nav-hover focus-ring", className), children: [_jsx("span", { className: "sr-only", children: t("switchApp", { app: app.name }) }), _jsx("span", { "aria-hidden": true, className: "contents", children: tile }), !collapsed ? _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-4 shrink-0 text-nav-fg/50" }) : null] }) }), _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { side: collapsed ? (dir === "rtl" ? "left" : "right") : "bottom", align: "start", sideOffset: 6, collisionPadding: 12, "aria-label": t("apps"), "data-variant": variant, className: "vui-sidebar-flyout ui-pop z-(--z-popover) w-64 max-w-[calc(100vw-1.5rem)] rounded-ui-lg p-1.5 outline-none", children: [workspaces && workspaces.length > 1 ? (_jsxs("div", { role: "group", "aria-label": t("workspaces"), className: "mb-1 border-b border-nav-line pb-1.5", children: [_jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/55", children: t("workspaces") }), workspaces.map((w) => (_jsxs("button", { type: "button", "aria-pressed": w.id === activeWorkspace, onClick: () => {
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(boxClass, "transition-colors hover:bg-nav-hover focus-ring", className), children: [_jsx("span", { className: "sr-only", children: t("switchApp", { app: app.name }) }), _jsx("span", { "aria-hidden": true, className: "contents", children: tile }), !collapsed ? _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-4 shrink-0 text-nav-fg/50" }) : null] }) }), _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { side: collapsed ? (dir === "rtl" ? "left" : "right") : "bottom", align: "start", sideOffset: 6, collisionPadding: 12, "aria-label": t("apps"), "data-variant": variant, className: "vui-sidebar-flyout ui-pop z-(--z-popover) w-64 max-w-[calc(100vw-1.5rem)] rounded-ui-lg p-1.5 outline-none", children: [workspaces && workspaces.length > 1 ? (_jsxs("div", { role: "group", "aria-label": t("workspaces"), className: "mb-1 border-b border-nav-line pb-1.5", children: [_jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: t("workspaces") }), workspaces.map((w) => (_jsxs("button", { type: "button", "aria-pressed": w.id === activeWorkspace, onClick: () => {
                                             onWorkspaceChange?.(w.id);
                                             setOpen(false);
-                                        }, className: "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start text-[13px] text-nav-fg hover:bg-nav-hover hover:text-nav-fg-strong focus-ring", children: [_jsx("span", { "aria-hidden": true, className: "grid size-6 place-items-center rounded-[7px] bg-nav-active text-[11px] font-semibold text-nav-fg-strong", children: w.name.slice(0, 1) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: w.name }), w.id === activeWorkspace ? _jsx(Check, { "aria-hidden": true, className: "size-4 text-accent" }) : null] }, w.id)))] })) : null, _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/55", children: t("apps") }), _jsx("ul", { className: "grid gap-px", children: apps.map((a) => {
+                                        }, className: "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start text-[13px] text-nav-fg hover:bg-nav-hover hover:text-nav-fg-strong focus-ring", children: [_jsx("span", { "aria-hidden": true, className: "grid size-6 place-items-center rounded-[7px] bg-nav-active text-[11px] font-semibold text-nav-fg-strong", children: w.name.slice(0, 1) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: w.name }), w.id === activeWorkspace ? _jsx(Check, { "aria-hidden": true, className: "size-4 text-accent" }) : null] }, w.id)))] })) : null, _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: t("apps") }), _jsx("ul", { className: "grid gap-px", children: apps.map((a) => {
                                     const isActive = a.id === app.id;
-                                    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("grid size-7 shrink-0 place-items-center rounded-[8px] [&_svg]:size-[15px]", isActive ? "bg-accent text-accent-fg" : "bg-nav-active text-nav-fg-strong"), children: _jsx(AppIcon, { icon: a.icon }) }), _jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "block text-[13px] font-medium text-nav-fg-strong", children: a.name }), a.description ? _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/55", children: a.description }) : null] }), isActive ? _jsx(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-accent" }) : null] }));
+                                    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("grid size-7 shrink-0 place-items-center rounded-[8px] [&_svg]:size-[15px]", isActive ? "bg-accent text-accent-fg" : "bg-nav-active text-nav-fg-strong"), children: _jsx(AppIcon, { icon: a.icon }) }), _jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "block text-[13px] font-medium text-nav-fg-strong", children: a.name }), a.description ? _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/70", children: a.description }) : null] }), isActive ? _jsx(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-accent" }) : null] }));
                                     const cls = "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start hover:bg-nav-hover focus-ring";
                                     return (_jsx("li", { children: onSelect ? (_jsx("button", { type: "button", "aria-current": isActive ? "true" : undefined, className: cls, onClick: () => {
                                                 onSelect(a.id);

package/dist/components/sla-timer.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+export type SlaState = "on-track" | "at-risk" | "breached" | "met" | "missed" | "paused";
+export declare const slaTimerLabels: {
+    dueIn: string;
+    overdue: string;
+    met: string;
+    missed: string;
+    paused: string;
+    pausedOverdue: string;
+    stateOnTrack: string;
+    stateAtRisk: string;
+    stateBreached: string;
+    stateMet: string;
+    stateMissed: string;
+    statePaused: string;
+};
+export type SlaTimerLabels = typeof slaTimerLabels;
+type DateLike = string | number | Date;
+export interface SlaModel {
+    state: SlaState;
+    /** Milliseconds left (negative when overdue); frozen for met/missed/paused. */
+    remaining: number;
+    /** Share of the window used, 0…1+ (needs `start`). */
+    used: number | null;
+}
+/**
+ * Pure SLA state: `on-track`, `at-risk` (less than `warnAt` of the window or `warnMinutes`
+ * left), `breached`, and the final `met` / `missed` once `completedAt` is set.
+ */
+export declare function slaState({ due, start, completedAt, pausedAt, now, warnAt, warnMinutes }: {
+    due: DateLike;
+    start?: DateLike;
+    completedAt?: DateLike | null;
+    pausedAt?: DateLike | null;
+    now: number;
+    warnAt?: number;
+    warnMinutes?: number;
+}): SlaModel;
+export interface SlaTimerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Deadline (ISO string, epoch ms or Date). */
+    due: DateLike;
+    /** When the clock started — enables the proportional warning and the bar. */
+    start?: DateLike;
+    /** Target reached (first reply sent, ticket solved) → `met` or `missed`, frozen. */
+    completedAt?: DateLike | null;
+    /** Clock stopped (waiting on customer) → `paused`, frozen. */
+    pausedAt?: DateLike | null;
+    /** Fixed "now" (epoch ms) for static screens, tests and screenshots. Omit to tick live. */
+    now?: number;
+    /** Warn when less than this share of the window is left (needs `start`). Default `0.25`. */
+    warnAt?: number;
+    /** Warn when fewer minutes than this are left (overrides `warnAt`). */
+    warnMinutes?: number;
+    /** `"badge"` (default), `"inline"`, or `"bar"` (label row + progress line). */
+    variant?: "badge" | "inline" | "bar";
+    /** What the SLA measures, prefixed to the accessible text: "First response". */
+    label?: string;
+    /** Show seconds under an hour left. Default `true`. */
+    seconds?: boolean;
+    /** Hide the icon (badge / inline). */
+    hideIcon?: boolean;
+    labels?: Partial<SlaTimerLabels>;
+}
+/**
+ * Countdown to a service-level deadline — first response, resolution, delivery window.
+ * Colour follows the state (on track → at risk → breached), and it freezes as met/missed
+ * once `completedAt` is set. `role="timer"` with a full sentence for screen readers.
+ *
+ * ```tsx
+ * <SlaTimer label="First response" start={ticket.createdAt} due={ticket.firstResponseDue} />
+ * <SlaTimer variant="bar" label="Resolution" start={t.createdAt} due={t.resolveDue} completedAt={t.solvedAt} />
+ * ```
+ */
+export declare const SlaTimer: React.ForwardRefExoticComponent<SlaTimerProps & React.RefAttributes<HTMLSpanElement>>;
+export {};