@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/color-scheme.d.ts

@@ -0,0 +1,18 @@
+export type Scheme = 'light' | 'dark' | 'system';
+declare class ColorScheme {
+    #private;
+    constructor();
+    get storageKey(): string;
+    set storageKey(key: string);
+    get value(): Scheme;
+    set value(scheme: Scheme);
+    get dark(): boolean;
+    subscribe: (listener: () => void) => () => void;
+}
+export declare const colorScheme: ColorScheme;
+export declare function useColorScheme(): {
+    scheme: Scheme;
+    dark: boolean;
+    setScheme: (next: Scheme) => void;
+};
+export {};

package/dist/color-scheme.js

@@ -0,0 +1,84 @@
+// Light, dark or system colour scheme for the whole page:
+//
+//   import { colorScheme, useColorScheme } from '@milktop/react-ui'
+//   colorScheme.value = 'dark'                  // 'light', 'dark' or 'system'
+//   const { scheme, dark, setScheme } = useColorScheme()   // re-renders on change
+//
+// It puts `dark` on <html> (the theme's dark tokens apply under it) and sets
+// `color-scheme` there for native controls and scrollbars. 'system' follows
+// the OS setting live. The choice is saved in localStorage (`storageKey`)
+// and kept in step across tabs.
+import { useSyncExternalStore } from 'react';
+const schemes = ['light', 'dark', 'system'];
+const parse = (scheme) => (schemes.includes(scheme) ? scheme : 'system');
+class ColorScheme {
+    #key = 'ui-color-scheme';
+    #value = 'system';
+    #systemDark = false;
+    #listeners = new Set();
+    constructor() {
+        if (typeof document === 'undefined')
+            return;
+        const media = matchMedia('(prefers-color-scheme: dark)');
+        this.#systemDark = media.matches;
+        media.addEventListener('change', (e) => {
+            this.#systemDark = e.matches;
+            this.#apply();
+        });
+        addEventListener('storage', (e) => {
+            if (e.key !== this.#key)
+                return;
+            this.#value = parse(e.newValue);
+            this.#apply();
+        });
+        this.#value = this.#load();
+        this.#apply();
+    }
+    get storageKey() { return this.#key; }
+    // Set it before the page reads a value (it reloads the saved choice).
+    set storageKey(key) {
+        this.#key = key;
+        this.#value = this.#load();
+        this.#apply();
+    }
+    get value() { return this.#value; }
+    set value(scheme) {
+        scheme = parse(scheme);
+        if (scheme === this.#value)
+            return;
+        this.#value = scheme;
+        try {
+            localStorage.setItem(this.#key, scheme);
+        }
+        catch { /* private mode */ }
+        this.#apply();
+    }
+    get dark() { return this.#value === 'dark' || (this.#value === 'system' && this.#systemDark); }
+    subscribe = (listener) => {
+        this.#listeners.add(listener);
+        return () => { this.#listeners.delete(listener); };
+    };
+    #load() {
+        try {
+            return parse(localStorage.getItem(this.#key));
+        }
+        catch {
+            return 'system';
+        }
+    }
+    #apply() {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        root.classList.toggle('dark', this.dark);
+        root.style.colorScheme = this.dark ? 'dark' : 'light';
+        this.#listeners.forEach((listener) => listener());
+    }
+}
+export const colorScheme = new ColorScheme();
+// The scheme and what's showing, re-rendering when either changes.
+export function useColorScheme() {
+    const scheme = useSyncExternalStore(colorScheme.subscribe, () => colorScheme.value, () => 'system');
+    const dark = useSyncExternalStore(colorScheme.subscribe, () => colorScheme.dark, () => false);
+    return { scheme, dark, setScheme: (next) => { colorScheme.value = next; } };
+}

package/dist/command/Command.d.ts

@@ -0,0 +1,64 @@
+/**
+ * A command menu (⌘K): a dialog with a search box over a list of commands,
+ * filtered as you type.
+ *
+ *   <Command items={commands} onSelect={run} trigger={<Button icon="lucide:search">Search</Button>} />
+ *
+ * ⌘K (Ctrl+K elsewhere) opens and closes it; ↑/↓ move through the results,
+ * Enter picks one, Escape closes it.
+ *
+ * - `items`: objects with `label`, plus optional `value`, `group` (a heading
+ *   the item is listed under), `icon`, `description`, `shortcut` text,
+ *   `keywords` (extra words to match) and `disabled`. An item with `href`
+ *   goes there when picked
+ * - `load`: optional async function(query) returning items, for server
+ *   search (debounced by `debounce` ms, `loadingText` meanwhile)
+ * - `onSelect`: called with the item's `value` (or the item, if it has none)
+ * - `trigger`: the element that opens it (it gets the trigger's props)
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
+ * - `hotkey`: the key used with ⌘/Ctrl ('k'); null turns the shortcut off
+ * - `navigate`: function(href) for items with `href`, e.g. your router's
+ *   `navigate`; by default a link is clicked
+ * - `placeholder`, `emptyText`, `label`; `hints`: false hides the keyboard
+ *   hints along the bottom
+ *
+ * `formatHotkey('k')` gives how the shortcut reads here ('⌘K' or 'Ctrl K'),
+ * for a trigger's hint.
+ */
+import { type ReactElement } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './command.css';
+export type CommandItem = {
+    label: string;
+    value?: unknown;
+    href?: string;
+    group?: string;
+    icon?: string;
+    description?: string;
+    shortcut?: string;
+    keywords?: string[];
+    disabled?: boolean;
+};
+export type CommandProps = Omit<Dialog.ContentProps, 'onSelect'> & {
+    items?: CommandItem[];
+    load?: ((query: string) => Promise<CommandItem[] | null | undefined>) | null;
+    debounce?: number;
+    onSelect?: (value: unknown) => void;
+    trigger?: ReactElement | null;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    hotkey?: string | null;
+    navigate?: ((href: string) => void) | null;
+    label?: string;
+    placeholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    hints?: boolean;
+    classes?: Classes<'backdrop' | 'positioner' | 'content' | 'search' | 'searchIcon' | 'input' | 'list' | 'status' | 'group' | 'groupLabel' | 'item' | 'icon' | 'text' | 'label' | 'description' | 'shortcut' | 'hints' | 'key'>;
+};
+export declare function formatHotkey(key?: string): string;
+export declare function Command({ items, load, debounce, onSelect, trigger, open: openProp, defaultOpen, onOpenChange, hotkey, navigate, label: labelProp, placeholder: placeholderProp, emptyText: emptyTextProp, loadingText: loadingTextProp, hints, className, classes, ...rest }: CommandProps): import("react").JSX.Element;

package/dist/command/Command.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A command menu (⌘K): a dialog with a search box over a list of commands,
+ * filtered as you type.
+ *
+ *   <Command items={commands} onSelect={run} trigger={<Button icon="lucide:search">Search</Button>} />
+ *
+ * ⌘K (Ctrl+K elsewhere) opens and closes it; ↑/↓ move through the results,
+ * Enter picks one, Escape closes it.
+ *
+ * - `items`: objects with `label`, plus optional `value`, `group` (a heading
+ *   the item is listed under), `icon`, `description`, `shortcut` text,
+ *   `keywords` (extra words to match) and `disabled`. An item with `href`
+ *   goes there when picked
+ * - `load`: optional async function(query) returning items, for server
+ *   search (debounced by `debounce` ms, `loadingText` meanwhile)
+ * - `onSelect`: called with the item's `value` (or the item, if it has none)
+ * - `trigger`: the element that opens it (it gets the trigger's props)
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
+ * - `hotkey`: the key used with ⌘/Ctrl ('k'); null turns the shortcut off
+ * - `navigate`: function(href) for items with `href`, e.g. your router's
+ *   `navigate`; by default a link is clicked
+ * - `placeholder`, `emptyText`, `label`; `hints`: false hides the keyboard
+ *   hints along the bottom
+ *
+ * `formatHotkey('k')` gives how the shortcut reads here ('⌘K' or 'Ctrl K'),
+ * for a trigger's hint.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Listbox, createListCollection, useListbox } from '@ark-ui/react/listbox';
+import { Portal } from '@ark-ui/react/portal';
+import 'iconify-icon';
+import { cx, partsOf, useControllable } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './command.css';
+// How the shortcut reads on this platform: '⌘K' or 'Ctrl K'.
+export function formatHotkey(key = 'k') {
+    const mac = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? '');
+    return mac ? `⌘${key.toUpperCase()}` : `Ctrl ${key.toUpperCase()}`;
+}
+const keyOf = (item) => String(item.value ?? item.href ?? item.label);
+// Every word typed must appear in the label, description, group or keywords.
+function matches(item, words) {
+    const text = [item.label, item.description, item.group, ...(item.keywords ?? [])].join(' ').toLowerCase();
+    return words.every((word) => text.includes(word));
+}
+function go(href) {
+    const link = document.createElement('a');
+    link.href = href;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+}
+export function Command({ items = [], load = null, debounce = 200, onSelect, trigger = null, open: openProp, defaultOpen = false, onOpenChange, hotkey = 'k', navigate = null, label: labelProp, placeholder: placeholderProp, emptyText: emptyTextProp, loadingText: loadingTextProp, hints = true, className, classes, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.command.label;
+    const placeholder = placeholderProp ?? t.command.placeholder;
+    const emptyText = emptyTextProp ?? t.command.empty;
+    const loadingText = loadingTextProp ?? t.command.loading;
+    const part = partsOf('command', classes);
+    const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+    const [query, setQuery] = useState('');
+    const [loaded, setLoaded] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const input = useRef(null);
+    const listEl = useRef(null);
+    const ticket = useRef(0);
+    const timer = useRef(undefined);
+    const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    const found = load ? loaded : words.length ? items.filter((item) => matches(item, words)) : items;
+    // Results in group order (by first appearance), so the list reads and the
+    // arrow keys move the same way.
+    const groups = [...new Set(found.map((item) => item.group ?? ''))]
+        .map((name) => ({ name, items: found.filter((item) => (item.group ?? '') === name) }));
+    const results = groups.flatMap((group) => group.items);
+    const collection = createListCollection({
+        items: results, itemToString: (item) => item.label, itemToValue: keyOf, isItemDisabled: (item) => !!item.disabled,
+    });
+    function search(text) {
+        setQuery(text);
+        if (!load)
+            return;
+        const mine = ++ticket.current;
+        setLoading(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(async () => {
+            const list = await load(text);
+            if (mine !== ticket.current)
+                return;
+            setLoading(false);
+            setLoaded(list ?? []);
+        }, debounce);
+    }
+    function choose(key) {
+        const item = results.find((item) => keyOf(item) === key);
+        if (!item)
+            return;
+        setOpen(false);
+        onSelect?.(item.value === undefined ? item : item.value);
+        if (item.href)
+            (navigate ?? go)(item.href);
+    }
+    // Keeps the highlighted item in view, scrolling only the list, and showing
+    // a group's heading along with its first item.
+    function scrollToItem({ getElement }) {
+        const el = getElement();
+        const box = listEl.current;
+        if (!el || !box)
+            return;
+        const top0 = box.getBoundingClientRect().top;
+        const offset = (node) => node.getBoundingClientRect().top - top0 + box.scrollTop;
+        const group = el.closest('[data-part=item-group]');
+        const first = group && group.querySelector('[data-part=item]') === el;
+        const top = offset(first ? group : el) - 4;
+        const bottom = offset(el) + el.offsetHeight + 4;
+        if (top < box.scrollTop)
+            box.scrollTop = top;
+        else if (bottom > box.scrollTop + box.clientHeight)
+            box.scrollTop = bottom - box.clientHeight;
+    }
+    // The value stays empty, so picking the same command again still counts.
+    const list = useListbox({
+        collection, value: [], loopFocus: true, scrollToIndexFn: scrollToItem, onSelect: (details) => choose(details.value),
+    });
+    const api = useRef(list);
+    useEffect(() => { api.current = list; });
+    // Each time it opens (from the trigger, the hotkey or `open`): an empty
+    // search over all the commands.
+    const latestSearch = useRef(search);
+    useEffect(() => { latestSearch.current = search; });
+    useEffect(() => {
+        if (!open)
+            return;
+        setLoaded([]);
+        latestSearch.current('');
+    }, [open]);
+    // The first result stays highlighted as the results change, so Enter picks it.
+    const resultKeys = results.map(keyOf).join('\u0000');
+    useEffect(() => {
+        if (!open)
+            return;
+        const id = setTimeout(() => api.current.highlightFirst(), 0);
+        return () => clearTimeout(id);
+    }, [open, resultKeys]);
+    useEffect(() => {
+        if (!hotkey)
+            return;
+        function keydown(e) {
+            if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== hotkey)
+                return;
+            e.preventDefault();
+            setOpen(!open);
+        }
+        addEventListener('keydown', keydown);
+        return () => removeEventListener('keydown', keydown);
+    }, [hotkey, open, setOpen]);
+    return (_jsxs(Dialog.Root, { open: open, onOpenChange: (details) => setOpen(details.open), lazyMount: true, unmountOnExit: true, initialFocusEl: () => input.current, children: [trigger && _jsx(Dialog.Trigger, { asChild: true, children: trigger }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { ...part('backdrop') }), _jsx(Dialog.Positioner, { ...part('positioner'), children: _jsxs(Dialog.Content, { ...rest, ...part('content'), className: cx(className, classes?.content), children: [_jsx(Dialog.Title, { ...part('title'), hidden: true, children: label }), _jsxs(Listbox.RootProvider, { value: list, children: [_jsx(Listbox.Label, { hidden: true, children: label }), _jsxs("div", { ...part('search'), children: [_jsx("iconify-icon", { ...part('search-icon'), icon: "lucide:search", "aria-hidden": "true" }), _jsx(Listbox.Input, { ref: input, className: classes?.input, autoHighlight: true, type: "text", placeholder: placeholder, value: query, onChange: (e) => search(e.target.value) }), _jsx("kbd", { ...part('key'), "data-esc": "", children: t.command.esc })] }), _jsx(Listbox.Content, { ref: listEl, className: classes?.list, children: !results.length
+                                                ? _jsx("div", { ...part('status'), children: loading ? loadingText : emptyText })
+                                                : groups.map((group) => (_jsxs(Listbox.ItemGroup, { className: classes?.group, children: [group.name && _jsx(Listbox.ItemGroupLabel, { className: classes?.groupLabel, children: group.name }), group.items.map((item) => (_jsxs(Listbox.Item, { item: item, highlightOnHover: true, className: classes?.item, children: [item.icon && _jsx("iconify-icon", { ...part('icon'), icon: item.icon, "aria-hidden": "true" }), _jsxs("span", { ...part('text'), children: [_jsx("span", { ...part('label'), children: item.label }), item.description && _jsx("span", { ...part('description'), children: item.description })] }), item.shortcut && _jsx("kbd", { ...part('shortcut'), children: item.shortcut })] }, keyOf(item))))] }, group.name))) }), hints && (_jsxs("div", { ...part('hints'), "aria-hidden": "true", children: [_jsxs("span", { children: [_jsx("kbd", { ...part('key'), children: "\u2191" }), _jsx("kbd", { ...part('key'), children: "\u2193" }), " ", t.command.toNavigate] }), _jsxs("span", { children: [_jsx("kbd", { ...part('key'), children: "\u21B5" }), " ", t.command.toSelect] })] }))] })] }) })] })] }));
+}

package/dist/command/command.css

@@ -0,0 +1,47 @@
+/* The listbox parts keep Zag's names (root, input, content, item,
+   item-group…), so they're styled inside the command's own content. */
+@layer ui {
+  [data-scope=command][data-part=backdrop] { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45);
+    &[data-state=open] { animation: ui-fade-in 120ms ease-out; }
+    &[data-state=closed] { animation: ui-fade-out 100ms ease-in forwards; } }
+  /* Near the top, so the panel stays put as results come and go. Clicks pass through to the backdrop. */
+  [data-scope=command][data-part=positioner] { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start;
+    padding: 1rem; box-sizing: border-box; pointer-events: none;
+    @media (min-width: 640px) { padding-top: 12vh; } }
+  [data-scope=command][data-part=content] {
+    display: flex; flex-direction: column; width: 100%; max-width: 34rem; max-height: min(28rem, calc(100dvh - 32px)); box-sizing: border-box; overflow: hidden;
+    background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px); box-shadow: var(--ui-shadow); outline: none; pointer-events: auto;
+    &[data-state=open] { animation: ui-command-in 140ms ease-out; }
+    &[data-state=closed] { animation: ui-command-out 100ms ease-in forwards; } }
+  [data-scope=command][data-part=content] [data-scope=listbox][data-part=root] { display: flex; flex-direction: column; min-height: 0; flex-grow: 1; }
+  [data-scope=command][data-part=search] { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem; height: 2.75rem; flex-shrink: 0; border-bottom: 1px solid var(--ui-border); }
+  [data-scope=command][data-part=search-icon] { color: var(--ui-muted); flex-shrink: 0; font-size: 16px; }
+  [data-scope=command][data-part=content] [data-scope=listbox][data-part=input] { flex-grow: 1; min-width: 0; height: 100%; padding: 0; border: none; background: transparent; color: inherit;
+    font: inherit; font-size: 14px; outline: none;
+    &::placeholder { color: var(--ui-muted); } }
+  [data-scope=command][data-part=key] { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem;
+    box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-hover); color: var(--ui-muted); font-family: inherit; font-size: 11px; line-height: 1;
+    &[data-esc] { display: none; @media (min-width: 640px) { display: inline-flex; } } }
+  [data-scope=command][data-part=content] [data-scope=listbox][data-part=content] { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 0.375rem; outline: none; }
+  [data-scope=command][data-part=status] { padding: 2.5rem 0; text-align: center; color: var(--ui-muted); }
+  [data-scope=command][data-part=content] [data-scope=listbox][data-part=item-group] + [data-part=item-group] { margin-top: 0.25rem; }
+  [data-scope=command][data-part=content] [data-scope=listbox][data-part=item-group-label] { padding: 0.375rem 0.5rem 0.25rem; font-size: 12px; font-weight: 500; color: var(--ui-muted); }
+  [data-scope=command][data-part=content] [data-scope=listbox][data-part=item] { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.5rem; min-height: 2rem; box-sizing: border-box;
+    border-radius: var(--ui-radius); font-size: 13px; cursor: pointer; user-select: none;
+    &[data-highlighted] { background: var(--ui-hover); }
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; } }
+  [data-scope=command][data-part=icon] { font-size: 15px; flex-shrink: 0; color: var(--ui-muted); }
+  /* The description follows the label on the same line, cut short first. */
+  [data-scope=command][data-part=text] { display: flex; align-items: baseline; gap: 0.5rem; flex-grow: 1; min-width: 0; }
+  [data-scope=command][data-part=label] { flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  [data-scope=command][data-part=description] { min-width: 0; font-size: 12px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  [data-scope=command][data-part=shortcut] { flex-shrink: 0; color: var(--ui-muted); font-family: inherit; font-size: 12px; }
+  [data-scope=command][data-part=hints] { display: none; gap: 1rem; padding: 0.5rem 0.875rem; flex-shrink: 0; border-top: 1px solid var(--ui-border); font-size: 12px; color: var(--ui-muted);
+    @media (min-width: 640px) { display: flex; }
+    & > span { display: flex; align-items: center; gap: 0.25rem; } }
+  @keyframes ui-command-in { from { opacity: 0; transform: scale(0.98); } }
+  @keyframes ui-command-out { to { opacity: 0; transform: scale(0.98); } }
+  @keyframes ui-fade-in { from { opacity: 0; } }
+  @keyframes ui-fade-out { to { opacity: 0; } }
+}

package/dist/confirm/confirm.css

@@ -0,0 +1,5 @@
+@layer ui {
+  [data-scope=confirm][data-part=body] { display: flex; flex-direction: column; gap: 0.75rem; font-size: 14px; }
+  [data-scope=confirm][data-part=type] { display: flex; flex-direction: column; gap: 0.375rem; }
+  [data-scope=confirm][data-part=type-label] { color: var(--ui-muted); }
+}

package/dist/confirm/confirm.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Asks before doing something, from anywhere: a dialog you `await` for a yes
+ * or no, with no state to keep and nothing to put in the layout.
+ *
+ *   if (await confirm({ heading: 'Archive Ada?', confirmLabel: 'Archive' })) archive(ada)
+ *
+ *   await confirm({
+ *     heading: 'Delete Ada Lovelace?', description: 'Her lessons and invoices go too.',
+ *     danger: true, confirmLabel: 'Delete', typeToConfirm: 'Ada Lovelace',
+ *     onConfirm: () => api.delete(ada.id),   // the button spins until it's done
+ *   })
+ *
+ * Resolves true when confirmed, false when cancelled (Cancel, Escape or the
+ * close button). Calls made while one is open wait their turn.
+ *
+ * - `heading`, `description` (text or markup); `content`: more under them
+ * - `confirmLabel` ('Confirm'), `cancelLabel` ('Cancel'; null for none, an
+ *   acknowledgement)
+ * - `danger`: a red confirm button, for things that can't be undone
+ * - `typeToConfirm`: text to type before the button enables
+ * - `onConfirm`: runs before it closes, with the button loading; if it
+ *   throws, the dialog stays open and shows the error's message
+ * - `size`: the dialog's size ('sm')
+ *
+ * It renders into its own root at the end of <body> the first time it's
+ * used (the library's CSS and tokens apply there too).
+ */
+import { type ReactNode } from 'react';
+import '../theme.css';
+import './confirm.css';
+export type ConfirmOptions = {
+    heading: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode | null;
+    danger?: boolean;
+    typeToConfirm?: string | null;
+    onConfirm?: (() => unknown) | null;
+    size?: 'sm' | 'md' | 'lg';
+};
+export declare function confirm(options: ConfirmOptions): Promise<boolean>;

package/dist/confirm/confirm.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Asks before doing something, from anywhere: a dialog you `await` for a yes
+ * or no, with no state to keep and nothing to put in the layout.
+ *
+ *   if (await confirm({ heading: 'Archive Ada?', confirmLabel: 'Archive' })) archive(ada)
+ *
+ *   await confirm({
+ *     heading: 'Delete Ada Lovelace?', description: 'Her lessons and invoices go too.',
+ *     danger: true, confirmLabel: 'Delete', typeToConfirm: 'Ada Lovelace',
+ *     onConfirm: () => api.delete(ada.id),   // the button spins until it's done
+ *   })
+ *
+ * Resolves true when confirmed, false when cancelled (Cancel, Escape or the
+ * close button). Calls made while one is open wait their turn.
+ *
+ * - `heading`, `description` (text or markup); `content`: more under them
+ * - `confirmLabel` ('Confirm'), `cancelLabel` ('Cancel'; null for none, an
+ *   acknowledgement)
+ * - `danger`: a red confirm button, for things that can't be undone
+ * - `typeToConfirm`: text to type before the button enables
+ * - `onConfirm`: runs before it closes, with the button loading; if it
+ *   throws, the dialog stays open and shows the error's message
+ * - `size`: the dialog's size ('sm')
+ *
+ * It renders into its own root at the end of <body> the first time it's
+ * used (the library's CSS and tokens apply there too).
+ */
+import { useState, useSyncExternalStore } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Dialog } from '../dialog/Dialog.js';
+import { Button } from '../button/Button.js';
+import { Input } from '../input/Input.js';
+import { Alert } from '../alert/Alert.js';
+import { partsOf } from '../utils.js';
+import { AmbientLocale, useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './confirm.css';
+// The open request first, then the ones waiting.
+let queue = [];
+let nextId = 1;
+const listeners = new Set();
+const emit = () => listeners.forEach((listener) => listener());
+const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+};
+let mounted = false;
+function mount() {
+    if (mounted || typeof document === 'undefined')
+        return;
+    mounted = true;
+    const host = document.createElement('div');
+    host.setAttribute('data-confirm-host', '');
+    document.body.appendChild(host);
+    createRoot(host).render(_jsx(ConfirmHost, {}));
+}
+export function confirm(options) {
+    mount();
+    return new Promise((resolve) => {
+        queue = [...queue, { ...options, id: nextId++, resolve }];
+        emit();
+    });
+}
+// Gone from the queue once its dialog has animated out.
+function remove(request) {
+    queue = queue.filter((other) => other !== request);
+    emit();
+}
+function ConfirmHost() {
+    const current = useSyncExternalStore(subscribe, () => queue[0] ?? null, () => null);
+    // A new dialog per request, so each starts with its own state.
+    return current ? _jsx(AmbientLocale, { children: _jsx(ConfirmDialog, { request: current }, current.id) }) : null;
+}
+function ConfirmDialog({ request }) {
+    const { heading, description = null, content = null, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, danger = false, typeToConfirm = null, onConfirm = null, size = 'sm', } = request;
+    const t = useMessages();
+    const confirmLabel = confirmLabelProp ?? t.common.confirm;
+    const cancelLabel = cancelLabelProp === undefined ? t.common.cancel : cancelLabelProp;
+    const part = partsOf('confirm');
+    const [typed, setTyped] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [open, setOpen] = useState(true);
+    // Answers once: resolves the promise, then closes.
+    function settle(confirmed) {
+        if (!open)
+            return;
+        request.resolve(confirmed);
+        setOpen(false);
+    }
+    const ready = !typeToConfirm || typed.trim() === typeToConfirm;
+    async function yes() {
+        if (!ready || busy)
+            return;
+        if (onConfirm) {
+            setBusy(true);
+            setError(null);
+            try {
+                await onConfirm();
+            }
+            catch (e) {
+                setBusy(false);
+                setError(e instanceof Error ? e.message : String(e));
+                return;
+            }
+        }
+        settle(true);
+    }
+    return (_jsx(Dialog, { alert: true, open: open, onExitComplete: () => remove(request), size: size, heading: heading, description: description, 
+        // Closing any other way (Escape, the close button) is a no, unless it's still working;
+        // it stays open (it's controlled) until it settles.
+        onOpenChange: (open) => { if (!open && !busy)
+            settle(false); }, footer: _jsxs(_Fragment, { children: [cancelLabel !== null && _jsx(Button, { disabled: busy, onClick: () => settle(false), children: cancelLabel }), _jsx(Button, { variant: danger ? 'danger' : 'primary', disabled: !ready, loading: busy, onClick: yes, children: confirmLabel })] }), children: (content || typeToConfirm || error) && (_jsxs("div", { ...part('body'), children: [content, typeToConfirm && (_jsxs("form", { ...part('type'), onSubmit: (e) => { e.preventDefault(); yes(); }, children: [_jsxs("span", { ...part('type-label'), children: [t.confirm.typePrefix, " ", _jsx("strong", { children: typeToConfirm }), " ", t.confirm.typeSuffix] }), _jsx(Input, { value: typed, onValueChange: setTyped, autoFocus: true, autoComplete: "off", "aria-label": t.confirm.typeToConfirm(typeToConfirm) })] })), error && _jsx(Alert, { variant: "danger", children: error })] })) }));
+}

package/dist/copy-button/CopyButton.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copies `value` to the clipboard, then shows a tick and "Copied" for a moment.
+ *
+ *   <CopyButton value={bookingLink} />
+ *   <Input value={bookingLink} readOnly end={<CopyButton value={bookingLink} iconOnly />} />
+ *
+ * - `value`: the text it copies
+ * - `label`, `copiedLabel`: the text ('Copy' and 'Copied'); `iconOnly` hides
+ *   it (it stays the accessible name)
+ * - `timeout`: how long it shows "Copied" (2000 ms)
+ * - `onCopy`: called with the value once it is copied
+ *
+ * Other attributes go on the <button>. By hand, Ark's Clipboard parts
+ * (Clipboard.Root, Trigger, Indicator…) from '@ark-ui/react/clipboard'.
+ */
+import type { ComponentProps } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './copy-button.css';
+export type CopyButtonProps = Omit<ComponentProps<'button'>, 'value' | 'onCopy'> & {
+    value?: string | number | null;
+    label?: string;
+    copiedLabel?: string;
+    iconOnly?: boolean;
+    timeout?: number;
+    onCopy?: ((value: string) => void) | null;
+    classes?: Classes<'trigger' | 'icon' | 'text'>;
+};
+export declare function CopyButton({ value, label: labelProp, copiedLabel: copiedLabelProp, iconOnly, timeout, onCopy, className, classes, ...rest }: CopyButtonProps): import("react").JSX.Element;

package/dist/copy-button/CopyButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clipboard, useClipboard } from '@ark-ui/react/clipboard';
+import 'iconify-icon';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './copy-button.css';
+export function CopyButton({ value = '', label: labelProp, copiedLabel: copiedLabelProp, iconOnly = false, timeout = 2000, onCopy = null, className, classes, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.copyButton.copy;
+    const copiedLabel = copiedLabelProp ?? t.copyButton.copied;
+    // Ark's clipboard stamps data-scope="clipboard"; ours goes last, for copy-button.css.
+    const part = partsOf('copy-button', classes);
+    const text = String(value ?? '');
+    const clipboard = useClipboard({
+        value: text, timeout,
+        ...(t.zag.clipboard && { translations: t.zag.clipboard }),
+        onStatusChange: (details) => { if (details.copied)
+            onCopy?.(text); },
+    });
+    const shown = clipboard.copied ? copiedLabel : label;
+    return (_jsx(Clipboard.RootProvider, { value: clipboard, asChild: true, children: _jsx("span", { style: { display: 'contents' }, children: _jsxs(Clipboard.Trigger, { ...rest, ...part('trigger'), className: cx(className, classes?.trigger), "data-icon-only": iconOnly || undefined, "aria-label": iconOnly ? shown : undefined, children: [_jsx("iconify-icon", { ...part('icon'), icon: clipboard.copied ? 'lucide:check' : 'lucide:copy', "aria-hidden": "true" }), !iconOnly && _jsx("span", { ...part('text'), "aria-live": "polite", children: shown })] }) }) }));
+}

package/dist/copy-button/copy-button.css

@@ -0,0 +1,12 @@
+@layer ui {
+  [data-scope=copy-button][data-part=trigger] {
+    display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.5rem; box-sizing: border-box;
+    border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); border-radius: calc(var(--ui-radius) - 2px);
+    font-family: var(--ui-font); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; outline: none;
+    &:hover { background: var(--ui-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); border-color: var(--ui-ring); }
+    &[data-icon-only] { width: 1.75rem; padding: 0; justify-content: center; }
+  }
+  [data-scope=copy-button][data-part=icon] { font-size: 14px; color: var(--ui-muted);
+    [data-copied] > & { color: #16a34a; } }
+}

package/dist/css.d.ts

@@ -0,0 +1,2 @@
+// Components import their own CSS (shipped in dist, referenced from index.d.ts).
+declare module '*.css'