@vamos-ui/react 0.2.0 → 0.4.0

package/dist/components/sla-timer.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { AlarmClock, CircleCheck, CircleX, Pause, Timer } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+export const slaTimerLabels = {
+    dueIn: "Due in {time}",
+    overdue: "Overdue by {time}",
+    met: "Met with {time} to spare",
+    missed: "Missed by {time}",
+    paused: "Paused with {time} left",
+    pausedOverdue: "Paused, {time} over",
+    stateOnTrack: "On track",
+    stateAtRisk: "At risk",
+    stateBreached: "Breached",
+    stateMet: "Met",
+    stateMissed: "Missed",
+    statePaused: "Paused",
+};
+const ms = (v) => (v instanceof Date ? v.getTime() : typeof v === "number" ? v : Date.parse(v));
+/**
+ * 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 function slaState({ due, start, completedAt, pausedAt, now, warnAt = 0.25, warnMinutes }) {
+    const dueMs = ms(due);
+    const startMs = start != null ? ms(start) : null;
+    const end = completedAt != null ? ms(completedAt) : pausedAt != null ? ms(pausedAt) : now;
+    const remaining = dueMs - end;
+    const used = startMs != null && dueMs > startMs ? (end - startMs) / (dueMs - startMs) : null;
+    if (completedAt != null)
+        return { state: remaining >= 0 ? "met" : "missed", remaining, used };
+    if (pausedAt != null)
+        return { state: "paused", remaining, used };
+    if (remaining < 0)
+        return { state: "breached", remaining, used };
+    const threshold = warnMinutes != null ? warnMinutes * 60_000 : startMs != null ? (dueMs - startMs) * warnAt : 30 * 60_000;
+    return { state: remaining <= threshold ? "at-risk" : "on-track", remaining, used };
+}
+const slaTimerVariants = cva("inline-flex items-center gap-1.5 whitespace-nowrap font-medium tabular", {
+    variants: {
+        variant: {
+            /** Tinted pill — list rows, inbox items. */
+            badge: "h-6 rounded-full px-2 text-xs [&_svg]:size-3.5",
+            /** Text with an icon — headers, side panels. */
+            inline: "text-[13px] [&_svg]:size-4",
+        },
+        state: {
+            "on-track": "",
+            "at-risk": "",
+            breached: "",
+            met: "",
+            missed: "",
+            paused: "",
+        },
+    },
+    compoundVariants: [
+        { variant: "badge", state: "on-track", class: "bg-selected text-fg-muted" },
+        { variant: "badge", state: "at-risk", class: "tone-warning tone-soft" },
+        { variant: "badge", state: "breached", class: "tone-danger tone-soft" },
+        { variant: "badge", state: "met", class: "tone-success tone-soft" },
+        { variant: "badge", state: "missed", class: "tone-danger tone-soft" },
+        { variant: "badge", state: "paused", class: "border border-dashed border-field-border text-fg-muted" },
+        { variant: "inline", state: "on-track", class: "text-fg" },
+        { variant: "inline", state: "at-risk", class: "tone-warning [color:color-mix(in_srgb,var(--tone)_var(--tone-ink-mix,100%),var(--fg))]" },
+        { variant: "inline", state: "breached", class: "tone-danger [color:color-mix(in_srgb,var(--tone)_var(--tone-ink-mix,100%),var(--fg))]" },
+        { variant: "inline", state: "met", class: "tone-success [color:color-mix(in_srgb,var(--tone)_var(--tone-ink-mix,100%),var(--fg))]" },
+        { variant: "inline", state: "missed", class: "tone-danger [color:color-mix(in_srgb,var(--tone)_var(--tone-ink-mix,100%),var(--fg))]" },
+        { variant: "inline", state: "paused", class: "text-fg-muted" },
+    ],
+    defaultVariants: { variant: "badge", state: "on-track" },
+});
+const icons = {
+    "on-track": Timer,
+    "at-risk": AlarmClock,
+    breached: AlarmClock,
+    met: CircleCheck,
+    missed: CircleX,
+    paused: Pause,
+};
+const barColor = {
+    "on-track": "bg-accent",
+    "at-risk": "bg-warning",
+    breached: "bg-danger",
+    met: "bg-success",
+    missed: "bg-danger",
+    paused: "bg-fg-subtle",
+};
+/** Ticks once per second near the deadline, every 15 s otherwise; static when `now` is passed. */
+function useNow(fixed, remaining, live) {
+    const [now, setNow] = React.useState(() => fixed ?? Date.now());
+    React.useEffect(() => {
+        if (fixed != null || !live)
+            return;
+        let id = 0;
+        const tick = () => {
+            setNow(Date.now());
+            const left = Math.abs(remaining());
+            id = window.setTimeout(tick, left < 3_600_000 ? 1000 - (Date.now() % 1000) : 15_000);
+        };
+        tick();
+        return () => window.clearTimeout(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fixed, live]);
+    return fixed ?? now;
+}
+/**
+ * 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 const SlaTimer = React.forwardRef(function SlaTimer({ due, start, completedAt, pausedAt, now: fixedNow, warnAt, warnMinutes, variant = "badge", label, seconds = true, hideIcon, labels, className, ...props }, ref) {
+    const t = useLabels("slaTimer", slaTimerLabels, labels);
+    const f = useFormat();
+    const frozen = completedAt != null || pausedAt != null;
+    const now = useNow(fixedNow, () => ms(due) - Date.now(), !frozen);
+    const m = slaState({ due, start, completedAt, pausedAt, now, warnAt, warnMinutes });
+    const abs = Math.abs(m.remaining);
+    const time = f.duration(Math.floor(abs / 1000), { smallest: seconds && abs < 3_600_000 ? "s" : "min", maxParts: 2 });
+    const sentence = m.state === "met" ? t("met", { time })
+        : m.state === "missed" ? t("missed", { time })
+            : m.state === "paused" ? t(m.remaining >= 0 ? "paused" : "pausedOverdue", { time })
+                : m.state === "breached" ? t("overdue", { time })
+                    : t("dueIn", { time });
+    const stateName = t({ "on-track": "stateOnTrack", "at-risk": "stateAtRisk", breached: "stateBreached", met: "stateMet", missed: "stateMissed", paused: "statePaused" }[m.state]);
+    const spoken = `${label ? `${label}: ` : ""}${sentence}`;
+    const Icon = icons[m.state];
+    const visible = m.state === "breached" || m.state === "missed" ? `−${time}` : m.state === "met" ? stateName : time;
+    if (variant === "bar") {
+        const fill = m.used == null ? (m.remaining < 0 ? 1 : 0) : Math.max(0, Math.min(1, m.used));
+        return (_jsxs("span", { ref: ref, role: "timer", "aria-label": spoken, suppressHydrationWarning: true, "data-slot": "sla-timer", "data-state": m.state, className: cn("grid w-full min-w-40 gap-1.5", className), ...props, children: [_jsxs("span", { "aria-hidden": "true", className: "flex items-baseline justify-between gap-3 text-[13px]", children: [_jsx("span", { className: "truncate text-fg-muted", children: label ?? stateName }), _jsx("span", { suppressHydrationWarning: true, className: cn("font-medium tabular", slaTimerVariants({ variant: "inline", state: m.state })), children: visible })] }), _jsx("span", { "aria-hidden": "true", className: "relative h-1 overflow-hidden rounded-full bg-track", children: _jsx("span", { suppressHydrationWarning: true, className: cn("absolute inset-0 origin-left rounded-full transition-transform duration-500 motion-reduce:transition-none rtl:origin-right", barColor[m.state]), style: { transform: `scaleX(${fill})` } }) })] }));
+    }
+    return (_jsxs("span", { ref: ref, role: "timer", "aria-label": spoken, title: spoken, suppressHydrationWarning: true, "data-slot": "sla-timer", "data-state": m.state, className: cn(slaTimerVariants({ variant, state: m.state }), className), ...props, children: [hideIcon ? null : _jsx(Icon, { "aria-hidden": true }), _jsx("span", { "aria-hidden": "true", suppressHydrationWarning: true, children: visible })] }));
+});

package/dist/components/slug-input.js

@@ -140,7 +140,7 @@ export const SlugInput = React.forwardRef(function SlugInput(props, forwardedRef
     const lockControl = !locked && source !== undefined ? (_jsx("span", { "data-slot": "slug-input-auto", title: t("autoHint"), className: "me-1.5 inline-flex h-5 items-center rounded-full bg-accent-soft px-2 text-[11px] font-medium text-accent-ink", children: t("auto") })) : canRegenerate && !disabled ? (_jsx("button", { type: "button", "data-slot": "slug-input-regenerate", onClick: regenerate, "aria-label": t("regenerate"), title: t("regenerate"), className: "me-1 inline-flex size-7 items-center justify-center rounded-ui-sm text-fg-subtle transition-colors hover:bg-hover hover:text-fg focus-ring [&_svg]:size-3.5", children: _jsx(RefreshCw, { "aria-hidden": true, className: "rtl:-scale-x-100" }) })) : null;
     const message = check.state === "error" ? (_jsxs("p", { id: messageId, "data-slot": "slug-input-message", className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-danger", children: [_jsx("span", { children: check.message }), check.suggestion ? (_jsx("button", { type: "button", onClick: () => applySuggestion(check.suggestion), className: "rounded-ui-sm font-mono text-[11.5px] font-medium text-fg underline decoration-line underline-offset-[3px] transition-colors hover:decoration-fg focus-ring", children: t("useSuggestion", { slug: check.suggestion }) })) : null] })) : null;
     const live = (_jsx("span", { className: "sr-only", "aria-live": "polite", children: check.state === "checking" ? t("checking") : check.state === "ok" ? t("available") : check.state === "error" ? check.message : "" }));
-    const input = (extra) => (_jsx(WithoutFieldName, { children: _jsx(Input, { ref: ref, ...engine.inputProps, id: id, size: size, disabled: disabled, invalid: isInvalid, dir: "ltr", spellCheck: false, autoCapitalize: "off", autoComplete: "off", placeholder: placeholder ?? (source !== undefined && !source ? t("empty") : undefined), "aria-label": ariaLabel ?? (field ? undefined : t("slug")), "aria-describedby": mergeIds(describedByProp, message ? messageId : undefined), addonStart: prefix ? _jsx("span", { className: "max-w-[16rem] truncate font-mono text-[12px] text-fg-subtle", title: prefix, children: prefix }) : undefined, inputClassName: "font-mono text-[13px]", "data-slot": "slug-input-control", trailing: status || lockControl || extra?.trailingExtra ? (_jsxs("span", { className: "flex items-center gap-1", children: [status ? _jsx("span", { className: "flex size-5 items-center justify-center", children: status }) : null, lockControl, extra?.trailingExtra] })) : undefined, onKeyDown: (e) => {
+    const input = (extra) => (_jsx(WithoutFieldName, { children: _jsx(Input, { ref: ref, ...engine.inputProps, id: id, size: size, disabled: disabled, invalid: isInvalid, dir: "ltr", spellCheck: false, autoCapitalize: "off", autoComplete: "off", placeholder: placeholder ?? (source !== undefined && !source ? t("empty") : undefined), "aria-label": ariaLabel ?? (field ? undefined : t("slug")), "aria-describedby": mergeIds(describedByProp, message ? messageId : undefined), addonStart: prefix ? _jsx("span", { className: "max-w-[16rem] truncate font-mono text-[12px] text-fg-subtle max-sm:max-w-[9rem]", title: prefix, children: prefix }) : undefined, inputClassName: "font-mono text-[13px]", "data-slot": "slug-input-control", trailing: status || lockControl || extra?.trailingExtra ? (_jsxs("span", { className: "flex items-center gap-1", children: [status ? _jsx("span", { className: "flex size-5 items-center justify-center", children: status }) : null, lockControl, extra?.trailingExtra] })) : undefined, onKeyDown: (e) => {
                 extra?.onKeyDown?.(e);
                 if (!e.defaultPrevented)
                     engine.inputProps.onKeyDown(e);

package/dist/components/tour.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+export declare const tourLabels: {
+    next: string;
+    back: string;
+    done: string;
+    skip: string;
+    progress: string;
+};
+export type TourLabels = typeof tourLabels;
+export interface TourStep {
+    /** Stable key (defaults to the index). */
+    id?: string;
+    /**
+     * What to highlight: a CSS selector (`"[data-tour=new-order]"`), a ref, or a function.
+     * Missing or not found → the card shows centred without a spotlight.
+     */
+    target?: string | React.RefObject<Element | null> | (() => Element | null);
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Extra body under the description (an illustration, a shortcut hint). */
+    content?: React.ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    /** Space between the target and the spotlight edge, px. Default `6`. */
+    padding?: number;
+    /** Spotlight corner radius, px. Default `10`. */
+    radius?: number;
+}
+export interface TourProps {
+    steps: TourStep[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Current step index (controlled). */
+    step?: number;
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    /** "Done" on the last step. The tour closes afterwards. */
+    onComplete?: () => void;
+    /** Closed early (skip button or Escape) on step `index`. */
+    onSkip?: (index: number) => void;
+    /** Clicking the dimmed page closes the tour. Default `false`. */
+    dismissible?: boolean;
+    /** Card class (width, etc.). */
+    className?: string;
+    labels?: Partial<TourLabels>;
+}
+/**
+ * Guided product tour: dims the page, cuts a spotlight around each target and anchors a step
+ * card to it. Back / Next / Done, arrow keys between steps, Escape to skip. The card is a modal
+ * dialog labelled by the step title; focus returns to where it was when the tour ends.
+ *
+ * ```tsx
+ * <Tour open={open} onOpenChange={setOpen} steps={[
+ *   { target: "[data-tour=search]", title: "Search everything", description: "Press ⌘K from any page." },
+ *   { target: "[data-tour=new]", title: "Create", description: "Orders, customers and products start here.", side: "left" },
+ * ]} />
+ * ```
+ */
+export declare function Tour({ steps, open: openProp, defaultOpen, onOpenChange, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, dismissible, className, labels }: TourProps): React.JSX.Element | null;

package/dist/components/tour.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { useReducedMotion } from "../lib/use-reduced-motion.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { Button } from "./button.js";
+export const tourLabels = {
+    next: "Next",
+    back: "Back",
+    done: "Done",
+    skip: "Skip tour",
+    progress: "Step {current} of {total}",
+};
+function resolveTarget(target) {
+    if (!target || typeof document === "undefined")
+        return null;
+    if (typeof target === "string")
+        return document.querySelector(target);
+    if (typeof target === "function")
+        return target();
+    return target.current;
+}
+const sameBox = (a, b) => a === b || (!!a && !!b && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height);
+/**
+ * Guided product tour: dims the page, cuts a spotlight around each target and anchors a step
+ * card to it. Back / Next / Done, arrow keys between steps, Escape to skip. The card is a modal
+ * dialog labelled by the step title; focus returns to where it was when the tour ends.
+ *
+ * ```tsx
+ * <Tour open={open} onOpenChange={setOpen} steps={[
+ *   { target: "[data-tour=search]", title: "Search everything", description: "Press ⌘K from any page." },
+ *   { target: "[data-tour=new]", title: "Create", description: "Orders, customers and products start here.", side: "left" },
+ * ]} />
+ * ```
+ */
+export function Tour({ steps, open: openProp, defaultOpen = false, onOpenChange, step: stepProp, defaultStep = 0, onStepChange, onComplete, onSkip, dismissible = false, className, labels }) {
+    const t = useLabels("tour", tourLabels, labels);
+    const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange, name: "Tour" });
+    const [rawIndex, setIndex] = useControllableState({ value: stepProp, defaultValue: defaultStep, onChange: onStepChange, name: "Tour" });
+    const index = Math.max(0, Math.min(steps.length - 1, rawIndex));
+    const current = steps[index];
+    const reduced = useReducedMotion();
+    const container = usePortalContainer();
+    const titleId = React.useId();
+    const descId = React.useId();
+    const [box, setBox] = React.useState(null);
+    const boxRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const pad = current?.padding ?? 6;
+    const radius = current?.radius ?? 10;
+    // Track the target's position every frame while open (layout shifts, scrolling, resizes).
+    React.useEffect(() => {
+        if (!open || !current)
+            return;
+        let frame = 0;
+        let scrolled = false;
+        const measure = () => {
+            const el = resolveTarget(current.target);
+            let next = null;
+            if (el) {
+                const r = el.getBoundingClientRect();
+                if (r.width || r.height)
+                    next = { top: r.top - pad, left: r.left - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
+                if (!scrolled) {
+                    scrolled = true;
+                    const vh = window.innerHeight;
+                    const vw = window.innerWidth;
+                    if (r.top < 0 || r.bottom > vh || r.left < 0 || r.right > vw)
+                        el.scrollIntoView({ block: "center", inline: "nearest", behavior: reduced ? "auto" : "smooth" });
+                }
+                el.setAttribute("data-tour-active", "");
+            }
+            if (!sameBox(boxRef.current, next)) {
+                boxRef.current = next;
+                setBox(next);
+            }
+            frame = requestAnimationFrame(measure);
+        };
+        measure();
+        return () => {
+            cancelAnimationFrame(frame);
+            resolveTarget(current.target)?.removeAttribute("data-tour-active");
+        };
+    }, [open, current, pad, reduced]);
+    // The card anchors to the spotlight, or to the viewport centre when there is no target.
+    const anchorRef = React.useRef({
+        getBoundingClientRect: () => {
+            const b = boxRef.current;
+            if (b)
+                return DOMRect.fromRect({ x: b.left, y: b.top, width: b.width, height: b.height });
+            return DOMRect.fromRect({ x: window.innerWidth / 2, y: window.innerHeight * 0.3, width: 0, height: 0 });
+        },
+    });
+    if (!current)
+        return null;
+    const last = index === steps.length - 1;
+    const close = (completed) => {
+        setOpen(false);
+        if (completed)
+            onComplete?.();
+        else
+            onSkip?.(index);
+    };
+    const go = (to) => {
+        if (to < 0)
+            return;
+        if (to >= steps.length)
+            return close(true);
+        setIndex(to);
+    };
+    const onKeyDown = (e) => {
+        const tag = e.target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || e.target.isContentEditable)
+            return;
+        const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+        if (e.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
+            e.preventDefault();
+            go(index + 1);
+        }
+        else if (e.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+            e.preventDefault();
+            go(index - 1);
+        }
+    };
+    const transition = reduced ? undefined : "top 280ms cubic-bezier(.2,.7,.2,1), left 280ms cubic-bezier(.2,.7,.2,1), width 280ms cubic-bezier(.2,.7,.2,1), height 280ms cubic-bezier(.2,.7,.2,1)";
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: (o) => (!o ? close(false) : setOpen(true)), modal: true, children: [_jsx(PopoverPrimitive.Anchor, { virtualRef: anchorRef }), open ? (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx("div", { "data-slot": "tour-overlay", "aria-hidden": "true", className: "ui-fade pointer-events-auto fixed inset-0 z-(--z-overlay)", children: box ? (_jsx("div", { "data-slot": "tour-spotlight", className: "absolute outline-2 outline-offset-0 outline-[var(--ring)]", style: { top: box.top, left: box.left, width: box.width, height: box.height, borderRadius: radius, boxShadow: "0 0 0 200vmax var(--overlay)", transition } })) : (_jsx("div", { className: "absolute inset-0 bg-overlay" })) }) })) : null, _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { ref: contentRef, "data-slot": "tour-card", side: box ? (current.side ?? "bottom") : "bottom", align: box ? (current.align ?? "center") : "center", sideOffset: box ? 12 : 0, collisionPadding: 16, updatePositionStrategy: "always", "aria-labelledby": titleId, "aria-describedby": current.description ? descId : undefined, onOpenAutoFocus: (e) => {
+                            e.preventDefault();
+                            contentRef.current?.focus();
+                        }, onInteractOutside: (e) => {
+                            if (!dismissible)
+                                e.preventDefault();
+                        }, onKeyDown: onKeyDown, className: cn("surface-popover ui-pop z-(--z-popover) w-80 max-w-[calc(100vw-2rem)] rounded-ui-lg p-4 outline-none", className), children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsx("p", { className: "text-[11px] font-medium tracking-[0.06em] text-fg-subtle uppercase tabular", children: t("progress", { current: index + 1, total: steps.length }) }), _jsx("h2", { id: titleId, className: "text-[15px] leading-snug font-semibold tracking-[-0.01em] text-fg", children: current.title })] }), _jsx(PopoverPrimitive.Close, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t("skip"), title: t("skip"), className: "-me-1.5 -mt-1 shrink-0", children: _jsx(X, { "aria-hidden": "true" }) }) })] }), current.description ? (_jsx("p", { id: descId, className: "mt-2 text-[13px] leading-relaxed text-fg-muted", children: current.description })) : null, current.content ? _jsx("div", { className: "mt-3", children: current.content }) : null, _jsxs("div", { className: "mt-4 flex items-center gap-2", children: [_jsx("ol", { "aria-hidden": "true", className: "me-auto flex items-center gap-1", children: steps.map((s, i) => (_jsx("li", { className: cn("h-1.5 rounded-full transition-[width,background-color] duration-300 motion-reduce:transition-none", i === index ? "w-4 bg-accent" : i < index ? "w-1.5 bg-fg-muted" : "w-1.5 bg-track") }, s.id ?? i))) }), index > 0 ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => go(index - 1), children: t("back") })) : null, _jsx(Button, { size: "sm", variant: "primary", onClick: () => go(index + 1), children: last ? t("done") : t("next") })] })] }, current.id ?? index) }) })] }));
+}

package/dist/index.d.ts

@@ -5,9 +5,11 @@ export * from "./components/address-field.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/alert.js";
 export * from "./components/app-shell.js";
+export * from "./components/aspect-ratio.js";
 export * from "./components/attachment-list.js";
 export * from "./components/audit-log.js";
 export * from "./components/avatar.js";
+export * from "./components/backup-codes.js";
 export * from "./components/badge.js";
 export * from "./components/breadcrumb.js";
 export * from "./components/button-group.js";
@@ -16,6 +18,7 @@ export * from "./components/calendar.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";
+export * from "./components/collapsible.js";
 export * from "./components/color-picker.js";
 export * from "./components/combobox.js";
 export * from "./components/command.js";
@@ -42,14 +45,18 @@ export * from "./components/input.js";
 export * from "./components/item.js";
 export * from "./components/kbd.js";
 export * from "./components/list-layout.js";
+export * from "./components/menubar.js";
 export * from "./components/native-select.js";
 export * from "./components/navigation-menu.js";
 export * from "./components/notification-center.js";
 export * from "./components/page-header.js";
 export * from "./components/pagination.js";
 export * from "./components/phone-input.js";
+export * from "./components/pin-map.js";
+export * from "./components/placeholder-art.js";
 export * from "./components/popover.js";
 export * from "./components/progress.js";
+export * from "./components/qr-code.js";
 export * from "./components/radio-group.js";
 export * from "./components/record-detail-layout.js";
 export * from "./components/record-picker.js";
@@ -62,6 +69,7 @@ export * from "./components/sheet.js";
 export * from "./components/sidebar.js";
 export * from "./components/signature-pad.js";
 export * from "./components/skeleton.js";
+export * from "./components/sla-timer.js";
 export * from "./components/slider.js";
 export * from "./components/slug-input.js";
 export * from "./components/sparkline.js";
@@ -79,6 +87,7 @@ export * from "./components/toast.js";
 export * from "./components/toggle.js";
 export * from "./components/tooltip.js";
 export * from "./components/top-bar.js";
+export * from "./components/tour.js";
 export * from "./components/tree-select.js";
 export * from "./components/tree-view.js";
 export * from "./components/typography.js";

package/dist/index.js

@@ -6,9 +6,11 @@ export * from "./components/address-field.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/alert.js";
 export * from "./components/app-shell.js";
+export * from "./components/aspect-ratio.js";
 export * from "./components/attachment-list.js";
 export * from "./components/audit-log.js";
 export * from "./components/avatar.js";
+export * from "./components/backup-codes.js";
 export * from "./components/badge.js";
 export * from "./components/breadcrumb.js";
 export * from "./components/button-group.js";
@@ -17,6 +19,7 @@ export * from "./components/calendar.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";
+export * from "./components/collapsible.js";
 export * from "./components/color-picker.js";
 export * from "./components/combobox.js";
 export * from "./components/command.js";
@@ -43,14 +46,18 @@ export * from "./components/input.js";
 export * from "./components/item.js";
 export * from "./components/kbd.js";
 export * from "./components/list-layout.js";
+export * from "./components/menubar.js";
 export * from "./components/native-select.js";
 export * from "./components/navigation-menu.js";
 export * from "./components/notification-center.js";
 export * from "./components/page-header.js";
 export * from "./components/pagination.js";
 export * from "./components/phone-input.js";
+export * from "./components/pin-map.js";
+export * from "./components/placeholder-art.js";
 export * from "./components/popover.js";
 export * from "./components/progress.js";
+export * from "./components/qr-code.js";
 export * from "./components/radio-group.js";
 export * from "./components/record-detail-layout.js";
 export * from "./components/record-picker.js";
@@ -63,6 +70,7 @@ export * from "./components/sheet.js";
 export * from "./components/sidebar.js";
 export * from "./components/signature-pad.js";
 export * from "./components/skeleton.js";
+export * from "./components/sla-timer.js";
 export * from "./components/slider.js";
 export * from "./components/slug-input.js";
 export * from "./components/sparkline.js";
@@ -80,6 +88,7 @@ export * from "./components/toast.js";
 export * from "./components/toggle.js";
 export * from "./components/tooltip.js";
 export * from "./components/top-bar.js";
+export * from "./components/tour.js";
 export * from "./components/tree-select.js";
 export * from "./components/tree-view.js";
 export * from "./components/typography.js";

package/dist/lib/public.d.ts

@@ -20,3 +20,4 @@ export { useAsyncList, type AsyncLoader, type AsyncPage, type AsyncListState, ty
 export { parseColor, toHex, formatColor, contrastRatio, contrastLevel, readableOn, type ColorFormat } from "./color.js";
 export { FieldContext, useFieldContext, useFieldControl, FieldContextReset, focusFirstInvalid, type FieldContextValue, type ControlA11yProps } from "./field-context.js";
 export { ChipRemoveButton, LocalizedText, LocaleCount, type ChipRemoveButtonProps } from "./islands.js";
+export { CopyValueButton, type CopyValueButtonProps } from "./data-islands.js";

package/dist/lib/public.js

@@ -31,3 +31,4 @@ export { parseColor, toHex, formatColor, contrastRatio, contrastLevel, readableO
 export { FieldContext, useFieldContext, useFieldControl, FieldContextReset, focusFirstInvalid } from "./field-context.js";
 // Client islands for server-compatible components
 export { ChipRemoveButton, LocalizedText, LocaleCount } from "./islands.js";
+export { CopyValueButton } from "./data-islands.js";

package/dist/lib/value-format.js

@@ -25,7 +25,7 @@ export function formatValue(f, value, spec = "number", extra) {
         case "compact":
             return f.compact(n, opts);
         case "compact-currency":
-            return f.currency(n, currency ?? f.currencyCode, { notation: "compact", maximumFractionDigits: 1, ...opts });
+            return f.currency(n, currency ?? f.currencyCode, { notation: "compact", minimumFractionDigits: 0, maximumFractionDigits: 1, ...opts });
         case "percent":
             return f.percent(n, opts);
         case "duration":

package/dist/locale-data/core/holidays.d.ts

@@ -14,7 +14,7 @@ export interface CreateHolidayProviderOptions {
  *
  * ```ts
  * const company = createHolidayProvider({
- *   id: "acme",
+ *   id: "northpoint",
  *   holidays: [{ date: "2026-12-24", name: "Company day off", kind: "bank" }],
  * });
  * ```

package/dist/locale-data/core/holidays.js

@@ -8,7 +8,7 @@ const regionMatch = (h, region) => !h.region || (region !== undefined && h.regio
  *
  * ```ts
  * const company = createHolidayProvider({
- *   id: "acme",
+ *   id: "northpoint",
  *   holidays: [{ date: "2026-12-24", name: "Company day off", kind: "bank" }],
  * });
  * ```