@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/time-picker.js

@@ -0,0 +1,399 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, Clock } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLocale } from "../lib/locale.js";
+import { useLabels } from "../lib/labels.js";
+import { useFieldContext, useFieldControl, FieldContextReset } from "../lib/field-context.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { controlVariants, itemVariants } from "../lib/variants.js";
+import { compareTime, dayPeriodFirst, formatTimeValue, getDayPeriodLabels, getHourCycle, getTimeSeparator, minutesToTime, parseTime, timeSlots, timeToMinutes, } from "../lib/date.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+const timePickerLabels = {
+    hour: "Hour",
+    minute: "Minute",
+    second: "Second",
+    dayPeriod: "AM/PM",
+    time: "Time",
+    showTimes: "Show times",
+    times: "Times",
+    start: "Start time",
+    end: "End time",
+    to: "to",
+    durationHours: "{count} h",
+    durationMinutes: "{count} min",
+    nextDay: "+1 day",
+    empty: "No time",
+};
+const EMPTY = { hour: null, minute: null, second: null, pm: null };
+function fromValue(value) {
+    const p = parseTime(value);
+    return p ? { hour: p.hour, minute: p.minute, second: p.second, pm: p.hour >= 12 } : EMPTY;
+}
+const pad2 = (n) => String(n).padStart(2, "0");
+/** True when a time breaks `min` / `max` / `disabledTimes`. */
+export function isTimeOutOfRange(value, opts) {
+    if (!value)
+        return false;
+    if (opts.min && compareTime(value, opts.min) < 0)
+        return true;
+    if (opts.max && compareTime(value, opts.max) > 0)
+        return true;
+    return !!opts.disabledTimes?.(value);
+}
+/**
+ * Segmented time entry: each part is an ARIA spinbutton. ↑/↓ change the value, digits type
+ * ahead and auto-advance, ←/→ move between parts, Backspace clears. Segment order, separator
+ * and AM/PM come from `Intl`; the value is always `"HH:mm"` 24h.
+ *
+ * ```tsx
+ * <Field label="Start"><TimeInput value={time} onValueChange={setTime} /></Field>
+ * ```
+ */
+export const TimeInput = React.forwardRef(function TimeInput(rawProps, ref) {
+    const field = useFieldContext();
+    const { value: valueProp, defaultValue, onValueChange, hourCycle: hourCycleProp, step = 1, seconds = false, min, max, disabledTimes, name, size = "md", variant = "default", invalid, icon, trailing, className, labels, onBlur, ...rest } = rawProps;
+    const props = useFieldControl({ ...rest, name, "aria-invalid": invalid ? true : rest["aria-invalid"] });
+    const t = useLabels("timePicker", timePickerLabels, labels);
+    const { locale } = useLocale();
+    const hc = hourCycleProp ?? getHourCycle(locale);
+    const [amLabel, pmLabel] = React.useMemo(() => getDayPeriodLabels(locale), [locale]);
+    const sep = React.useMemo(() => getTimeSeparator(locale), [locale]);
+    const periodFirst = React.useMemo(() => hc === 12 && dayPeriodFirst(locale), [hc, locale]);
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, onChange: onValueChange, name: "TimeInput" });
+    const [segs, setSegs] = React.useState(() => fromValue(value));
+    const lastValue = React.useRef(value);
+    // External value changes (controlled) reset the segments.
+    React.useEffect(() => {
+        if (value !== lastValue.current) {
+            lastValue.current = value;
+            setSegs(fromValue(value));
+        }
+    }, [value]);
+    const order = React.useMemo(() => {
+        const base = seconds ? ["hour", "minute", "second"] : ["hour", "minute"];
+        if (hc !== 12)
+            return base;
+        return periodFirst ? ["dayPeriod", ...base] : [...base, "dayPeriod"];
+    }, [seconds, hc, periodFirst]);
+    const refs = React.useRef({});
+    const buffer = React.useRef("");
+    const inert = props.disabled || props.readOnly;
+    const commit = (next) => {
+        setSegs(next);
+        const complete = next.hour !== null && next.minute !== null && (!seconds || next.second !== null) && (hc !== 12 || next.pm !== null);
+        const empty = next.hour === null && next.minute === null && (!seconds || next.second === null);
+        let out = null;
+        if (complete)
+            out = formatTimeValue({ hour: next.hour, minute: next.minute, second: next.second ?? 0 }, seconds);
+        if (complete || empty || value !== null) {
+            lastValue.current = out;
+            setValue(out);
+        }
+    };
+    const focusSeg = (seg) => {
+        if (seg)
+            refs.current[seg]?.focus();
+    };
+    const move = (seg, delta) => {
+        const i = order.indexOf(seg) + delta;
+        focusSeg(order[i]);
+    };
+    // 12h display helpers
+    const displayHour = (h) => (hc === 12 ? h % 12 || 12 : h);
+    const toInternalHour = (shown, pm) => (hc === 12 ? (shown % 12) + (pm ? 12 : 0) : shown);
+    const now = () => new Date();
+    const setSeg = (seg, v) => {
+        const next = { ...segs };
+        if (seg === "dayPeriod") {
+            next.pm = v;
+            if (next.hour !== null && v !== null)
+                next.hour = (next.hour % 12) + (v ? 12 : 0);
+        }
+        else if (seg === "hour") {
+            next.hour = v;
+            if (next.hour !== null && hc === 12 && next.pm === null)
+                next.pm = next.hour >= 12;
+        }
+        else
+            next[seg] = v;
+        commit(next);
+    };
+    const spin = (seg, dir) => {
+        if (seg === "dayPeriod")
+            return setSeg("dayPeriod", segs.pm === null ? dir === 1 ? false : true : !segs.pm);
+        if (seg === "hour") {
+            const cur = segs.hour ?? (dir === 1 ? (hc === 12 && segs.pm ? 11 : -1) : now().getHours() + 1);
+            let next = (cur + dir + 24) % 24;
+            // In 12h display keep the period fixed while spinning the hour.
+            if (hc === 12 && segs.pm !== null)
+                next = (next % 12) + (segs.pm ? 12 : 0);
+            return setSeg("hour", next);
+        }
+        const unit = seg === "minute" ? step : 1;
+        const cur = segs[seg];
+        let next;
+        if (cur === null)
+            next = 0;
+        else if (dir === 1)
+            next = (Math.floor(cur / unit) + 1) * unit;
+        else
+            next = (Math.ceil(cur / unit) - 1) * unit;
+        next = ((next % 60) + 60) % 60;
+        setSeg(seg, next);
+    };
+    const typeDigit = (seg, d) => {
+        if (seg === "dayPeriod")
+            return;
+        const buf = buffer.current + String(d);
+        const n = Number(buf);
+        if (seg === "hour") {
+            const maxShown = hc === 12 ? 12 : 23;
+            const firstMax = hc === 12 ? 1 : 2;
+            if (buf.length === 1) {
+                if (d > firstMax) {
+                    buffer.current = "";
+                    setSeg("hour", toInternalHour(hc === 12 && d === 0 ? 12 : d, segs.pm));
+                    return move("hour", 1);
+                }
+                buffer.current = buf;
+                if (hc === 12 && d === 0)
+                    return; // waiting for "0x"
+                return setSeg("hour", toInternalHour(d, segs.pm));
+            }
+            buffer.current = "";
+            const shown = n > maxShown || (hc === 12 && n === 0) ? d : n;
+            setSeg("hour", toInternalHour(shown === 0 && hc === 12 ? 12 : shown, segs.pm));
+            return move("hour", 1);
+        }
+        // minute / second
+        if (buf.length === 1) {
+            if (d > 5) {
+                buffer.current = "";
+                setSeg(seg, d);
+                return move(seg, 1);
+            }
+            buffer.current = buf;
+            return setSeg(seg, d);
+        }
+        buffer.current = "";
+        setSeg(seg, n > 59 ? d : n);
+        move(seg, 1);
+    };
+    const onSegKeyDown = (seg) => (e) => {
+        if (inert) {
+            if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+                e.preventDefault();
+                move(seg, e.key === "ArrowLeft" ? -1 : 1);
+            }
+            return;
+        }
+        const key = e.key;
+        if (key === "ArrowUp" || key === "ArrowDown") {
+            e.preventDefault();
+            buffer.current = "";
+            return spin(seg, key === "ArrowUp" ? 1 : -1);
+        }
+        if (key === "ArrowLeft" || key === "ArrowRight") {
+            e.preventDefault();
+            buffer.current = "";
+            return move(seg, key === "ArrowLeft" ? -1 : 1);
+        }
+        if (key === "Home" || key === "End") {
+            e.preventDefault();
+            buffer.current = "";
+            if (seg === "dayPeriod")
+                return setSeg(seg, key === "End");
+            if (seg === "hour")
+                return setSeg(seg, hc === 12 ? (key === "Home" ? 0 : 11) + (segs.pm ? 12 : 0) : key === "Home" ? 0 : 23);
+            return setSeg(seg, key === "Home" ? 0 : 59);
+        }
+        if (key === "Backspace" || key === "Delete") {
+            e.preventDefault();
+            const cur = seg === "dayPeriod" ? segs.pm : segs[seg];
+            buffer.current = "";
+            if (cur === null && key === "Backspace")
+                return move(seg, -1);
+            return setSeg(seg, null);
+        }
+        if (/^\d$/.test(key)) {
+            e.preventDefault();
+            return typeDigit(seg, Number(key));
+        }
+        if (seg === "dayPeriod" && key.length === 1) {
+            const k = key.toLocaleLowerCase(locale);
+            if (amLabel.toLocaleLowerCase(locale).startsWith(k) || k === "a") {
+                e.preventDefault();
+                return setSeg(seg, false);
+            }
+            if (pmLabel.toLocaleLowerCase(locale).startsWith(k) || k === "p") {
+                e.preventDefault();
+                return setSeg(seg, true);
+            }
+        }
+        if (key === sep || key === ":" || key === ".") {
+            e.preventDefault();
+            buffer.current = "";
+            return move(seg, 1);
+        }
+        // Block any other printable key from editing the content.
+        if (key.length === 1 && !e.metaKey && !e.ctrlKey)
+            e.preventDefault();
+    };
+    // Soft keyboards send beforeinput instead of keydown digits.
+    const onBeforeInput = (seg) => (e) => {
+        e.preventDefault();
+        if (inert)
+            return;
+        const data = e.nativeEvent.data ?? "";
+        for (const ch of data)
+            if (/\d/.test(ch))
+                typeDigit(seg, Number(ch));
+    };
+    const current = value;
+    const outOfRange = isTimeOutOfRange(current, { min, max, disabledTimes });
+    const isInvalid = props["aria-invalid"] === true || props["aria-invalid"] === "true" || outOfRange;
+    const segInfo = (seg) => {
+        if (seg === "dayPeriod") {
+            const v = segs.pm;
+            return { text: v === null ? "––" : v ? pmLabel : amLabel, now: v === null ? undefined : v ? 1 : 0, min: 0, max: 1, valueText: v === null ? t("empty") : v ? pmLabel : amLabel, label: t("dayPeriod") };
+        }
+        const v = segs[seg];
+        const shown = seg === "hour" && v !== null ? displayHour(v) : v;
+        const minV = seg === "hour" ? (hc === 12 ? 1 : 0) : 0;
+        const maxV = seg === "hour" ? (hc === 12 ? 12 : 23) : 59;
+        return { text: shown === null ? "––" : pad2(shown), now: shown ?? undefined, min: minV, max: maxV, valueText: shown === null ? t("empty") : String(shown), label: t(seg) };
+    };
+    const ariaLabelledBy = props["aria-labelledby"] ?? field?.labelId;
+    const groupLabel = props["aria-label"] ?? (ariaLabelledBy ? undefined : t("time"));
+    const focusFirst = () => {
+        const firstEmpty = order.find((s) => (s === "dayPeriod" ? segs.pm : segs[s]) === null);
+        focusSeg(firstEmpty ?? order[0]);
+    };
+    return (_jsxs("div", { ref: ref, "data-slot": "time-input", "data-readonly": props.readOnly ? "" : undefined, "aria-disabled": props.disabled || undefined, className: cn(controlVariants({ size, variant }), "cursor-text gap-0 px-0", className), onPointerDown: (e) => {
+            if (inert)
+                return;
+            if (e.target.closest("[role=spinbutton],button"))
+                return;
+            e.preventDefault();
+            focusFirst();
+        }, children: [icon !== null ? _jsx("span", { className: "pointer-events-none flex shrink-0 items-center ps-3 text-fg-subtle", children: icon ?? _jsx(Clock, { "aria-hidden": true }) }) : null, _jsx("div", { role: "group", id: props.id, "aria-label": groupLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": props["aria-describedby"], "aria-invalid": isInvalid || undefined, "aria-disabled": props.disabled || undefined, dir: "ltr", className: cn("flex h-full min-w-0 flex-1 items-center px-2.5 font-mono text-[length:inherit] tabular", icon !== null && "ps-2"), onBlur: (e) => {
+                    if (!e.currentTarget.contains(e.relatedTarget)) {
+                        buffer.current = "";
+                        onBlur?.(e);
+                    }
+                }, children: order.map((seg, i) => {
+                    const info = segInfo(seg);
+                    const empty = info.now === undefined;
+                    return (_jsxs(React.Fragment, { children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: cn("select-none text-fg-subtle", seg === "dayPeriod" || order[i - 1] === "dayPeriod" ? "w-1.5" : "px-px"), children: seg === "dayPeriod" || order[i - 1] === "dayPeriod" ? "" : sep })) : null, _jsx("span", { ref: (el) => {
+                                    refs.current[seg] = el;
+                                }, role: "spinbutton", tabIndex: props.disabled ? -1 : 0, "aria-label": info.label, "aria-valuenow": info.now, "aria-valuemin": info.min, "aria-valuemax": info.max, "aria-valuetext": info.valueText, "aria-readonly": props.readOnly || undefined, "aria-disabled": props.disabled || undefined, contentEditable: !inert, suppressContentEditableWarning: true, inputMode: "numeric", spellCheck: false, autoCorrect: "off", "data-segment": seg, "data-placeholder": empty ? "" : undefined, onKeyDown: onSegKeyDown(seg), onBeforeInput: onBeforeInput(seg), onPaste: (e) => {
+                                    e.preventDefault();
+                                    if (inert)
+                                        return;
+                                    const p = parseTime(e.clipboardData.getData("text"));
+                                    if (p)
+                                        commit({ hour: p.hour, minute: p.minute, second: p.second, pm: p.hour >= 12 });
+                                }, onFocus: () => {
+                                    buffer.current = "";
+                                }, className: cn("rounded-ui-sm px-[3px] py-0.5 text-center leading-none caret-transparent outline-none transition-colors", seg === "dayPeriod" ? "min-w-[2.6ch] font-sans text-[0.92em] font-medium" : "min-w-[2.4ch]", empty ? "text-fg-subtle" : "text-fg", !props.disabled && "focus:bg-accent-soft focus:text-accent-ink"), children: info.text })] }, seg));
+                }) }), trailing ? _jsx("span", { className: "flex shrink-0 items-center pe-1", children: trailing }) : null, name ? _jsx("input", { type: "hidden", name: name, value: current ?? "" }) : null] }));
+});
+/**
+ * Time of day: a segmented input with an optional list of slots every `step` minutes.
+ * The value is `"HH:mm"` 24h; the display follows the locale (en-US 2:30 PM, tr 14:30).
+ *
+ * ```tsx
+ * <TimePicker value={time} onValueChange={setTime} slots step={30} min="09:00" max="18:00" />
+ * ```
+ */
+export const TimePicker = React.forwardRef(function TimePicker({ slots = false, step = 15, slotRange, open: openProp, onOpenChange, value: valueProp, defaultValue, onValueChange, labels, ...props }, ref) {
+    const t = useLabels("timePicker", timePickerLabels, labels);
+    const { locale } = useLocale();
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, onChange: onValueChange, name: "TimePicker" });
+    const [open, setOpen] = useControllableState({ value: openProp, defaultValue: false, onChange: onOpenChange, name: "TimePicker" });
+    const listRef = React.useRef(null);
+    const listId = React.useId();
+    const hc = props.hourCycle ?? getHourCycle(locale);
+    const fmt = React.useMemo(() => new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC", hourCycle: hc === 12 ? "h12" : "h23" }), [locale, hc]);
+    const show = (v) => {
+        const p = parseTime(v);
+        return fmt.format(new Date(Date.UTC(1970, 0, 1, p.hour, p.minute)));
+    };
+    const list = React.useMemo(() => {
+        const start = slotRange?.start ?? props.min ?? "00:00";
+        const end = slotRange?.end ?? (props.max ? minutesToTime(timeToMinutes(props.max) + 1) : "24:00");
+        return timeSlots(step, start, end === "00:00" ? "24:00" : end);
+    }, [slotRange, props.min, props.max, step]);
+    const pick = (v) => {
+        setValue(v);
+        setOpen(false);
+    };
+    const onListKeyDown = (e) => {
+        const opts = Array.from(listRef.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])') ?? []);
+        const cur = opts.indexOf(document.activeElement);
+        let next = -1;
+        if (e.key === "ArrowDown")
+            next = Math.min(opts.length - 1, cur + 1);
+        else if (e.key === "ArrowUp")
+            next = Math.max(0, cur - 1);
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = opts.length - 1;
+        else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            const v = document.activeElement?.dataset.value;
+            if (v)
+                pick(v);
+            return;
+        }
+        else
+            return;
+        e.preventDefault();
+        opts[next]?.focus();
+    };
+    if (!slots)
+        return _jsx(TimeInput, { ref: ref, value: value, onValueChange: setValue, labels: labels, step: step, ...props });
+    const inert = props.disabled || props.readOnly;
+    const active = value && list.includes(value) ? value : list.find((s) => value && compareTime(s, value) >= 0) ?? list[0];
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => !inert && setOpen(o), children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx(TimeInput, { ref: ref, value: value, onValueChange: setValue, labels: labels, step: step, ...props, trailing: _jsx(PopoverTrigger, { asChild: true, disabled: inert, children: _jsx("button", { type: "button", "aria-label": t("showTimes"), "aria-haspopup": "listbox", className: "inline-flex size-[calc(var(--control-h)-0.75rem)] items-center justify-center rounded-ui-sm text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring disabled:opacity-40 [&_svg]:size-4", children: _jsx(ChevronDown, { "aria-hidden": true }) }) }) }) }), _jsx(PopoverContent, { size: "auto", padded: false, align: "start", className: "w-(--radix-popover-trigger-width) min-w-36 max-w-56", onOpenAutoFocus: (e) => {
+                    e.preventDefault();
+                    requestAnimationFrame(() => listRef.current?.querySelector(`[data-value="${active}"]`)?.focus());
+                }, children: _jsx(FieldContextReset, { children: _jsx("div", { ref: (el) => {
+                            listRef.current = el;
+                            el?.querySelector(`[data-value="${active}"]`)?.scrollIntoView({ block: "center" });
+                        }, id: listId, role: "listbox", "aria-label": t("times"), onKeyDown: onListKeyDown, className: "grid max-h-64 gap-px overflow-y-auto overscroll-contain p-1", children: list.map((s) => {
+                            const disabled = isTimeOutOfRange(s, props);
+                            const selected = s === value;
+                            return (_jsx("div", { role: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": disabled || undefined, "data-value": s, "data-state": selected ? "checked" : undefined, onClick: () => !disabled && pick(s), className: cn(itemVariants({ size: "sm" }), "justify-between font-mono tabular aria-selected:bg-accent-soft aria-selected:text-accent-ink focus:bg-hover"), children: show(s) }, s));
+                        }) }) }) })] }));
+});
+/** Minutes between two times; with `overnight` an earlier end counts as the next day. */
+export function timeRangeMinutes(range, overnight = false) {
+    if (!range.start || !range.end)
+        return null;
+    let d = timeToMinutes(range.end) - timeToMinutes(range.start);
+    if (d <= 0 && overnight)
+        d += 1440;
+    return d;
+}
+/**
+ * Start and end time with a duration hint (shift start/end, opening hours). The end must be after
+ * the start unless `overnight` is set.
+ */
+export const TimeRangePicker = React.forwardRef(function TimeRangePicker({ value: valueProp, defaultValue, onValueChange, overnight = false, showDuration = true, nameStart, nameEnd, labels, className, size = "md", ...props }, ref) {
+    const t = useLabels("timePicker", timePickerLabels, labels);
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? { start: null, end: null }, onChange: onValueChange, name: "TimeRangePicker" });
+    const minutes = timeRangeMinutes(value, overnight);
+    const reversed = minutes !== null && minutes <= 0;
+    const crosses = overnight && value.start && value.end && timeToMinutes(value.end) <= timeToMinutes(value.start);
+    const durationId = React.useId();
+    const field = useFieldContext();
+    const groupProps = useFieldControl({ ...props });
+    const h = minutes !== null && minutes > 0 ? Math.floor(minutes / 60) : 0;
+    const m = minutes !== null && minutes > 0 ? minutes % 60 : 0;
+    const duration = minutes !== null && minutes > 0 ? [h ? t("durationHours", { count: h }) : "", m ? t("durationMinutes", { count: m }) : ""].filter(Boolean).join(" ") : "";
+    return (_jsxs("div", { ref: ref, role: "group", "aria-labelledby": groupProps["aria-labelledby"] ?? field?.labelId, "aria-label": groupProps["aria-label"], "data-slot": "time-range-picker", className: cn("flex flex-wrap items-center gap-2", className), children: [_jsxs(FieldContextReset, { children: [_jsx(TimeInput, { ...props, size: size, className: "w-auto min-w-0 flex-1 basis-32", "aria-label": t("start"), "aria-describedby": showDuration ? durationId : undefined, disabled: groupProps.disabled, readOnly: groupProps.readOnly, invalid: !!groupProps["aria-invalid"], value: value.start, onValueChange: (start) => setValue((v) => ({ ...v, start })), name: nameStart, labels: labels }), _jsx("span", { "aria-hidden": true, className: "text-sm text-fg-subtle", children: "\u2013" }), _jsx(TimeInput, { ...props, size: size, className: "w-auto min-w-0 flex-1 basis-32", "aria-label": t("end"), "aria-describedby": showDuration ? durationId : undefined, disabled: groupProps.disabled, readOnly: groupProps.readOnly, invalid: reversed || !!groupProps["aria-invalid"], value: value.end, onValueChange: (end) => setValue((v) => ({ ...v, end })), name: nameEnd, labels: labels })] }), showDuration ? (_jsxs("span", { id: durationId, "aria-live": "polite", className: cn("min-w-16 font-mono text-xs tabular", reversed ? "text-danger" : "text-fg-muted"), children: [duration, crosses ? _jsx("span", { className: "ms-1.5 rounded-ui-sm bg-surface-2 px-1 py-px font-sans text-[10.5px] text-fg-muted", children: t("nextDay") }) : null] })) : null] }));
+});

package/dist/components/toast.d.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+export type ToastTone = "neutral" | "success" | "warning" | "danger" | "info" | "loading";
+export interface ToastOptions {
+    description?: React.ReactNode;
+    /** One follow-up action ("Undo", "View"). A toast with an action stays at least 6 s. */
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    /** A secondary, dismissing button. */
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    /** ms. Default: neutral/success/info 4 s, warning 6 s, danger 8 s, loading until updated. `Infinity` keeps it. */
+    duration?: number;
+    /** Same id → the toast updates in place (loading → success). */
+    id?: string;
+    /** Announce assertively (`role="alert"`). Danger toasts always are. */
+    important?: boolean;
+    /** Show a × button on this toast. */
+    closeButton?: boolean;
+    onDismiss?: () => void;
+    onAutoClose?: () => void;
+}
+type ToastFn = (title: React.ReactNode, options?: ToastOptions) => string;
+export interface ToastPromiseMessages<T> {
+    loading: React.ReactNode;
+    success: React.ReactNode | ((data: T) => React.ReactNode);
+    error: React.ReactNode | ((error: unknown) => React.ReactNode);
+    description?: React.ReactNode;
+    id?: string;
+}
+export interface ToastApi extends ToastFn {
+    success: ToastFn;
+    warning: ToastFn;
+    danger: ToastFn;
+    info: ToastFn;
+    loading: ToastFn;
+    /** loading → success / danger in one toast. Returns the original promise. */
+    promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>): Promise<T>;
+    /** Dismiss one toast, or all of them. */
+    dismiss(id?: string): void;
+}
+/**
+ * Report the result of an action without interrupting. Import it from the kit only — never
+ * from the engine underneath — so it can be swapped later.
+ *
+ * ```ts
+ * toast.success("Post published", { action: { label: "View", onClick: open } });
+ * toast("Contact moved to trash", { action: { label: "Undo", onClick: restore } });
+ * const id = toast.loading("Preparing export…");
+ * toast.success("Export ready", { id });
+ * ```
+ *
+ * Needs one `<Toaster />` in the tree (App shell includes it).
+ */
+export declare const toast: ToastApi;
+export type ToasterPosition = "bottom-end" | "bottom-start" | "bottom-center" | "top-end" | "top-start" | "top-center";
+declare const toasterLabels: {
+    region: string;
+    close: string;
+};
+export interface ToasterProps {
+    /** Logical position — `end` is the right edge in LTR and the left in RTL. Default `"bottom-end"`. */
+    position?: ToasterPosition;
+    /** Position below 640px, so toasts don't collide with the keyboard or bottom bars. Default `"top-center"`. */
+    mobilePosition?: ToasterPosition;
+    /** Visible toasts before they stack. Default 3. */
+    max?: number;
+    /** Always show the stack expanded. */
+    expand?: boolean;
+    /** × button on every toast. */
+    closeButton?: boolean;
+    /** Keyboard shortcut that focuses the region. Default Alt+T. */
+    hotkey?: string[];
+    /** Distance from the viewport edge. Default 24px (16px on mobile). */
+    offset?: number | string;
+    className?: string;
+    labels?: Partial<typeof toasterLabels>;
+}
+/**
+ * Where toasts appear. Mount once near the app root (App shell already does). Styled with
+ * tokens: popover surface, a thin edge in the status colour, the front toast alone blurs.
+ */
+export declare function Toaster({ position, mobilePosition, max, expand, closeButton, hotkey, offset, className, labels }: ToasterProps): React.JSX.Element | null;
+export {};

package/dist/components/toast.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Toaster as Sonner, toast as sonner } from "sonner";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useMediaQuery } from "../lib/use-media-query.js";
+import { buttonVariants } from "./button.js";
+import { Spinner } from "./spinner.js";
+const DURATION = { neutral: 4000, success: 4000, info: 4000, warning: 6000, danger: 8000, loading: Infinity };
+const ENGINE = {
+    neutral: sonner,
+    success: sonner.success,
+    info: sonner.info,
+    warning: sonner.warning,
+    danger: sonner.error,
+    loading: sonner.loading,
+};
+let seq = 0;
+function show(tone, title, o = {}) {
+    const assertive = tone === "danger" || o.important;
+    const duration = o.duration ?? (o.action && tone !== "loading" ? Math.max(6000, DURATION[tone]) : DURATION[tone]);
+    // Own string ids, so the id we return is exactly the one that updates the toast later.
+    const id = o.id ?? `toast-${++seq}`;
+    ENGINE[tone](assertive ? _jsx("span", { role: "alert", children: title }) : title, {
+        id,
+        description: o.description,
+        duration,
+        closeButton: o.closeButton,
+        action: o.action ? { label: o.action.label, onClick: () => o.action.onClick() } : undefined,
+        cancel: o.cancel ? { label: o.cancel.label, onClick: () => o.cancel.onClick?.() } : undefined,
+        onDismiss: o.onDismiss ? () => o.onDismiss() : undefined,
+        onAutoClose: o.onAutoClose ? () => o.onAutoClose() : undefined,
+    });
+    return id;
+}
+/**
+ * Report the result of an action without interrupting. Import it from the kit only — never
+ * from the engine underneath — so it can be swapped later.
+ *
+ * ```ts
+ * toast.success("Post published", { action: { label: "View", onClick: open } });
+ * toast("Contact moved to trash", { action: { label: "Undo", onClick: restore } });
+ * const id = toast.loading("Preparing export…");
+ * toast.success("Export ready", { id });
+ * ```
+ *
+ * Needs one `<Toaster />` in the tree (App shell includes it).
+ */
+export const toast = Object.assign((title, o) => show("neutral", title, o), {
+    success: (title, o) => show("success", title, o),
+    warning: (title, o) => show("warning", title, o),
+    danger: (title, o) => show("danger", title, o),
+    info: (title, o) => show("info", title, o),
+    loading: (title, o) => show("loading", title, o),
+    promise(promise, m) {
+        const p = typeof promise === "function" ? promise() : promise;
+        const id = show("loading", m.loading, { id: m.id, description: m.description });
+        p.then((data) => show("success", typeof m.success === "function" ? m.success(data) : m.success, { id }), (err) => show("danger", typeof m.error === "function" ? m.error(err) : m.error, { id }));
+        return p;
+    },
+    dismiss(id) {
+        sonner.dismiss(id);
+    },
+});
+const toasterLabels = { region: "Notifications", close: "Close" };
+// Only the first mounted <Toaster/> renders, so a second one (a page plus the app shell) never doubles toasts.
+const mounted = [];
+const listeners = new Set();
+const emit = () => listeners.forEach((l) => l());
+const subscribe = (l) => {
+    listeners.add(l);
+    return () => listeners.delete(l);
+};
+function useIsPrimary() {
+    const [id] = React.useState(() => Symbol("toaster"));
+    React.useEffect(() => {
+        mounted.push(id);
+        emit();
+        return () => {
+            mounted.splice(mounted.indexOf(id), 1);
+            emit();
+        };
+    }, [id]);
+    return React.useSyncExternalStore(subscribe, () => mounted[0] === id, () => false);
+}
+function physical(pos, dir) {
+    const [y, x] = pos.split("-");
+    const side = x === "center" ? "center" : (x === "end") === (dir === "ltr") ? "right" : "left";
+    return `${y}-${side}`;
+}
+const toneClass = {
+    default: "tone-neutral",
+    success: "tone-success",
+    info: "tone-info",
+    warning: "tone-warning",
+    error: "tone-danger",
+    loading: "tone-accent",
+};
+/**
+ * Where toasts appear. Mount once near the app root (App shell already does). Styled with
+ * tokens: popover surface, a thin edge in the status colour, the front toast alone blurs.
+ */
+export function Toaster({ position = "bottom-end", mobilePosition = "top-center", max = 3, expand, closeButton, hotkey, offset, className, labels }) {
+    const primary = useIsPrimary();
+    const { dir } = useLocale();
+    const t = useLabels("toast", toasterLabels, labels);
+    const mobile = useMediaQuery("(max-width: 639px)");
+    if (!primary)
+        return null;
+    return (_jsx(Sonner, { position: physical(mobile ? mobilePosition : position, dir), dir: dir, visibleToasts: max, expand: expand, closeButton: closeButton, hotkey: hotkey, offset: offset, gap: 10, containerAriaLabel: t("region"), className: cn("vui-toaster", className), icons: {
+            success: _jsx(CircleCheck, { "aria-hidden": true }),
+            info: _jsx(Info, { "aria-hidden": true }),
+            warning: _jsx(TriangleAlert, { "aria-hidden": true }),
+            error: _jsx(CircleAlert, { "aria-hidden": true }),
+            loading: _jsx(Spinner, { size: "sm" }),
+            close: _jsx(X, { "aria-hidden": true, className: "size-3.5" }),
+        }, toastOptions: {
+            unstyled: true,
+            closeButtonAriaLabel: t("close"),
+            classNames: {
+                toast: cn("vui-toast surface-popover relative flex w-full items-start gap-3 overflow-hidden rounded-ui py-3 ps-4 pe-3 text-sm text-fg [&:has([data-close-button])]:pe-9", 
+                // thin status edge (never the accent colour)
+                "before:absolute before:inset-y-2.5 before:start-0 before:w-[3px] before:rounded-e-full before:bg-(--tone)"),
+                default: toneClass.default,
+                success: toneClass.success,
+                info: toneClass.info,
+                warning: toneClass.warning,
+                error: toneClass.error,
+                loading: cn(toneClass.loading, "before:bg-transparent"),
+                icon: "relative mt-px flex size-[1.15rem] flex-none items-center justify-center text-(--tone)",
+                content: "flex min-w-0 flex-1 flex-col gap-0.5 py-px",
+                title: "leading-[1.35] font-medium text-pretty",
+                description: "text-[13px] leading-[1.4] text-pretty text-fg-muted",
+                actionButton: cn(buttonVariants({ variant: "secondary", size: "xs" }), "self-center"),
+                cancelButton: cn(buttonVariants({ variant: "ghost", size: "xs" }), "self-center text-fg-muted"),
+                closeButton: cn(buttonVariants({ variant: "ghost", size: "icon-xs" }), "absolute end-1.5 top-1.5 size-6! text-fg-subtle hover:text-fg"),
+            },
+        } }));
+}