@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/theme-toggle/ThemeToggle.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A light, dark and system switch, driving `colorScheme`, so every toggle on
+ * the page stays in step and the choice is saved.
+ *
+ *   <ThemeToggle />
+ *   <ThemeToggle variant="menu" />
+ *   <ThemeToggle mobile="menu" />
+ *   <ThemeToggle variant="toggle" />
+ *
+ * - `variant`: 'segmented' (default: icon-only buttons with tooltips), 'menu'
+ *   (one button showing the current choice, opening a menu of all of them) or
+ *   'toggle' (one button flipping between light and dark)
+ * - `mobile`: the variant below `breakpoint` (e.g. 'menu' where space is tight)
+ * - `breakpoint`: the width in px `mobile` applies under (768)
+ * - `options`: which schemes to offer, in order (system, light, dark)
+ * - `system`: false leaves out 'system' whatever `options` says
+ * - `labels`: the tooltips and accessible names, `{ light, dark, system }`
+ * - `label`: names the group for assistive tech
+ * - `size`: 'sm', 'md' (default) or 'lg', for every variant
+ * - `placement`: where the menu variant opens ('bottom-end', or 'bottom' with `iconOnly`)
+ * - `keepOpen`: the menu variant stays open after a choice
+ * - `iconOnly`: the menu variant lists just the icons, the current one highlighted
+ * - `onChange`: called with 'light', 'dark' or 'system'
+ */
+import { useEffect, useState } from 'react';
+import { Menu } from '../menu/Menu.js';
+import 'iconify-icon';
+import { Segmented } from '../segment-group/Segmented.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { useColorScheme } from '../color-scheme.js';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './theme-toggle.css';
+const icons = { light: 'lucide:sun', dark: 'lucide:moon', system: 'lucide:monitor' };
+// Whether the viewport is under `breakpoint` (only watched when `on`).
+function useNarrow(on, breakpoint) {
+    const [narrow, setNarrow] = useState(false);
+    useEffect(() => {
+        if (!on)
+            return;
+        const query = matchMedia(`(max-width: ${breakpoint - 1}px)`);
+        const update = () => setNarrow(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, [on, breakpoint]);
+    return narrow;
+}
+export function ThemeToggle({ variant = 'segmented', mobile = null, breakpoint = 768, options = ['system', 'light', 'dark'], system = true, labels: labelsProp, label: labelProp, placement = null, size = 'md', keepOpen = false, iconOnly = false, onChange, className, classes, ...rest }) {
+    const t = useMessages();
+    const labels = labelsProp ?? t.themeToggle;
+    const label = labelProp ?? t.themeToggle.label;
+    const part = partsOf('theme-toggle', classes);
+    const { scheme, dark, setScheme } = useColorScheme();
+    const narrow = useNarrow(!!mobile, breakpoint);
+    const mode = mobile && narrow ? mobile : variant;
+    const offersSystem = system && options.includes('system');
+    const items = options.filter((s) => icons[s] && (s !== 'system' || system)).map((s) => ({ value: s, label: labels[s], icon: icons[s] }));
+    // Without the system option, show what the OS currently resolves to.
+    const value = offersSystem ? scheme : dark ? 'dark' : 'light';
+    const shown = dark ? 'dark' : 'light';
+    function pick(next) {
+        if (next == null || next === value)
+            return;
+        setScheme(next);
+        onChange?.(next);
+    }
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), role: "group", "aria-label": label, "data-variant": mode, "data-size": size, "data-icon-only": (iconOnly && mode === 'menu') || undefined, children: mode === 'menu' ? (_jsx(Menu, { placement: placement ?? (iconOnly ? 'bottom' : 'bottom-end'), keepOpen: keepOpen, trigger: (_jsx("button", { ...part('trigger'), type: "button", "aria-label": `${label}: ${labels[value]}`, children: _jsx("iconify-icon", { ...part('trigger-icon'), icon: icons[value], "aria-hidden": "true" }) })), children: _jsx(Menu.RadioGroup, { value: value, onValueChange: (next) => pick(next), children: items.map((item) => _jsx(Menu.Radio, { value: item.value, icon: item.icon, children: item.label }, item.value)) }) })) : mode === 'toggle' ? (_jsx(Tooltip, { content: labels[shown], children: _jsx("button", { ...part('trigger'), type: "button", "aria-label": labels.dark, "aria-pressed": dark, onClick: () => pick(dark ? 'light' : 'dark'), children: _jsx("iconify-icon", { ...part('trigger-icon'), icon: icons[shown], "aria-hidden": "true" }) }) })) : (_jsx(Segmented, { iconOnly: true, size: size, items: items, value: value, onValueChange: pick })) }));
+}

package/dist/theme-toggle/theme-toggle.css

@@ -0,0 +1,23 @@
+@layer ui {
+  [data-scope=theme-toggle][data-part=root] { display: inline-block;
+    --tt-h: var(--ui-control-height); --tt-icon: 16px;
+    &[data-size=sm] { --tt-h: var(--ui-control-height-sm); --tt-icon: 15px; }
+    &[data-size=lg] { --tt-h: var(--ui-control-height-lg); --tt-icon: 18px; } }
+  /* The menu and toggle variants: one square button, like a segmented item. */
+  [data-scope=theme-toggle][data-part=trigger] { display: inline-flex; align-items: center; justify-content: center; width: var(--tt-h); height: var(--tt-h);
+    padding: 0; box-sizing: border-box; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text);
+    border-radius: var(--ui-radius); cursor: pointer;
+    &:hover, &[data-state=open] { background: var(--ui-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+  [data-scope=theme-toggle][data-part=trigger-icon] { display: block; font-size: var(--tt-icon); }
+  /* Icons only: a narrow column, the current scheme highlighted instead of
+     dotted, names kept for screen readers. */
+  [data-scope=theme-toggle][data-icon-only] {
+    & [data-scope=menu][data-part=content] { min-width: 0; padding: 0.25rem; }
+    & [data-scope=menu][data-part=item] { justify-content: center; width: var(--tt-h); height: var(--tt-h); padding: 0; box-sizing: border-box;
+      &[data-state=checked] { background: var(--ui-hover); }
+      &[data-state=checked] [data-part=icon] { color: var(--ui-text); } }
+    & [data-scope=menu][data-part=indicator] { display: none; }
+    & [data-scope=menu][data-part=icon] { font-size: var(--tt-icon); }
+    & [data-scope=menu][data-part=label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
+}

package/dist/theme.css

@@ -0,0 +1,119 @@
+/* Design tokens (imba-ui's), and a few base rules. Override any token in your
+   app, on :root for everything or on an element for what's inside it:
+
+     :root { --ui-accent: #e11d48; }
+     <DatePicker style="--ui-radius: 12px" />
+
+   Dark values apply under html.dark or [data-theme=dark].
+
+   All the library's CSS sits in @layer ui, so your CSS (and Tailwind's
+   utilities) beat it without !important. With Tailwind, declare the order
+   first in your app's CSS, so its reset stays below the library:
+
+     @layer theme, base, ui, components, utilities;
+     @import "tailwindcss"; */
+
+@layer ui {
+  :root {
+    --ui-text: #18181b;
+    --ui-muted: #71717a;
+    --ui-surface: white;
+    --ui-canvas: #f2f4f7;
+    /* The inset app shell: its sidebar (a lighter shade of the canvas) and the frame round the page. */
+    --ui-sidebar-bg: #f8f9fb;
+    --ui-frame: white;
+    --ui-border: #e4e4e7;
+    --ui-hover: #f4f4f5;
+    /* Loading placeholders: visible on the canvas and on cards alike. */
+    --ui-skeleton: #e4e4e7;
+    --ui-accent: #2563eb;
+    --ui-accent-text: white;
+    --ui-accent-soft: #dbeafe;
+    --ui-accent-soft-text: #1e40af;
+    /* Selected text, and Highlight's marks. */
+    --ui-selection: color-mix(in srgb, var(--ui-accent) 24%, transparent);
+    --ui-highlight: color-mix(in srgb, var(--ui-accent) 22%, transparent);
+    --ui-ring: #3b82f6;
+    --ui-ring-soft: #3b82f633;
+    --ui-danger: #dc2626;
+    --ui-success: #16a34a;
+    /* Chart series, in order (the first is the accent). */
+    --ui-chart-1: var(--ui-accent);
+    --ui-chart-2: #14b8a6;
+    --ui-chart-3: #f59e0b;
+    --ui-chart-4: #f43f5e;
+    --ui-chart-5: #8b5cf6;
+    --ui-radius: 6px;
+    --ui-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
+    --ui-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+    --ui-font: inherit;
+    /* One height for buttons and inputs, so they line up in a row. */
+    --ui-control-height: 2.25rem;
+    --ui-control-height-sm: 2rem;
+    --ui-control-height-lg: 2.75rem;
+    /* Sidebar and its items. */
+    --ui-sidebar-width: 15rem;
+    --ui-sidebar-rail-width: 3.5rem;
+    --ui-sidebar-item-height: 2.125rem;
+    --ui-sidebar-item-padding: 0 0.5rem 0 0.75rem;
+    --ui-sidebar-item-radius: var(--ui-radius);
+    --ui-sidebar-item-text: var(--ui-muted);
+    /* The sidebar itself (outside the inset layout, which uses --ui-sidebar-bg),
+       its section headings, its own icon buttons, and hovered items' text.
+       With the item tokens, enough for a coloured sidebar. */
+    --ui-sidebar-surface: var(--ui-surface);
+    --ui-sidebar-heading: var(--ui-muted);
+    --ui-sidebar-icon: var(--ui-muted);
+    --ui-sidebar-hover-text: var(--ui-text);
+    --ui-sidebar-hover: var(--ui-hover);
+    --ui-sidebar-active: var(--ui-hover);
+    --ui-sidebar-active-text: var(--ui-text);
+    --ui-sidebar-active-weight: 500;
+    --ui-sidebar-active-shadow: none;
+    /* The inset layout's sidebar is grey, so its hovered and current items go white. */
+    --ui-sidebar-inset-hover: color-mix(in srgb, var(--ui-surface) 75%, transparent);
+    --ui-sidebar-inset-active: var(--ui-surface);
+    --ui-sidebar-inset-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  }
+
+  :root.dark, [data-theme=dark] {
+    --ui-text: #fafafa;
+    --ui-muted: #a1a1aa;
+    --ui-surface: #1c1c21;
+    --ui-canvas: #141418;
+    --ui-sidebar-bg: #0c0c0e;
+    --ui-frame: #0c0c0e;
+    --ui-border: #2b2b31;
+    --ui-hover: #27272d;
+    --ui-skeleton: #303036;
+    --ui-accent: #3b82f6;
+    --ui-accent-soft: #1e3a8a;
+    --ui-accent-soft-text: #bfdbfe;
+    --ui-selection: color-mix(in srgb, var(--ui-accent) 40%, transparent);
+    --ui-highlight: color-mix(in srgb, var(--ui-accent) 35%, transparent);
+    --ui-ring: #60a5fa;
+    --ui-ring-soft: #60a5fa33;
+    --ui-danger: #f87171;
+    --ui-success: #4ade80;
+    --ui-chart-2: #2dd4bf;
+    --ui-chart-3: #fbbf24;
+    --ui-chart-4: #fb7185;
+    --ui-chart-5: #a78bfa;
+    --ui-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
+    /* Shadows don't read on dark; borders do the work. */
+    --ui-card-shadow: none;
+  }
+
+  ::selection { background: var(--ui-selection); }
+
+  /* Zag hides closed parts with `hidden`; that beats any display a component sets. */
+  [data-scope][hidden] { display: none !important; }
+  [data-scope]:focus:not(:focus-visible) { outline: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope][data-part] { animation: none !important; transition: none !important; }
+  }
+
+  @keyframes ui-spin { to { rotate: 360deg; } }
+  @keyframes ui-skeleton-pulse { 50% { opacity: 0.5; } }
+}

package/dist/time-input/TimeInput.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A time of day, typed or picked with the browser's own time control (a wheel
+ * on phones), as 'HH:mm'.
+ *
+ *   <TimeInput label="Starts" value={time} onValueChange={setTime} step={15} min="08:00" max="18:00" />
+ *
+ * Inside a Field it takes the field's label, hint and error. (For booking
+ * from free slots, show the slots instead: a free time picked here can clash.)
+ *
+ * - `value`, `defaultValue`: 'HH:mm' (or null); `onValueChange`: called with it
+ * - `step`: minutes between times (1); the arrow keys move by it
+ * - `min`, `max`: 'HH:mm'
+ * - `icon`: an Iconify name before it ('lucide:clock'; null for none)
+ * - and Input's props: `label`, `size`, `disabled`, `name`…
+ */
+import { type InputProps } from '../input/Input.js';
+export type TimeInputProps = Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'step' | 'min' | 'max'> & {
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    step?: number;
+    min?: string;
+    max?: string;
+};
+export declare function TimeInput({ value, defaultValue, onValueChange, step, icon, ...rest }: TimeInputProps): import("react").JSX.Element;

package/dist/time-input/TimeInput.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A time of day, typed or picked with the browser's own time control (a wheel
+ * on phones), as 'HH:mm'.
+ *
+ *   <TimeInput label="Starts" value={time} onValueChange={setTime} step={15} min="08:00" max="18:00" />
+ *
+ * Inside a Field it takes the field's label, hint and error. (For booking
+ * from free slots, show the slots instead: a free time picked here can clash.)
+ *
+ * - `value`, `defaultValue`: 'HH:mm' (or null); `onValueChange`: called with it
+ * - `step`: minutes between times (1); the arrow keys move by it
+ * - `min`, `max`: 'HH:mm'
+ * - `icon`: an Iconify name before it ('lucide:clock'; null for none)
+ * - and Input's props: `label`, `size`, `disabled`, `name`…
+ */
+import { Input } from '../input/Input.js';
+export function TimeInput({ value, defaultValue, onValueChange, step = 1, icon = 'lucide:clock', ...rest }) {
+    return (_jsx(Input, { ...rest, type: "time", icon: icon, step: step * 60, ...(value !== undefined && { value: value ?? '' }), ...(defaultValue != null && { defaultValue }), onValueChange: (next) => onValueChange?.(next || null) }));
+}

package/dist/timeline/Timeline.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Events down a line, e.g. a student's history.
+ *
+ *   <Timeline items={[
+ *     { title: 'Lesson booked', time: '2 Oct', icon: 'lucide:calendar-plus' },
+ *     { title: 'Invoice paid', time: '1 Oct', description: '£120', color: 'success' },
+ *   ]} />
+ *
+ * Or as markup, when an event needs more than text:
+ *
+ *   <Timeline>
+ *     <Timeline.Item title="Note added" time="30 Sep" icon="lucide:notebook-pen"><Card>…</Card></Timeline.Item>
+ *   </Timeline>
+ *
+ * - `items`: objects with a Timeline.Item's props (only `title` is needed)
+ * - `variant`: 'line' (default) or 'cards' (each item's content in a card)
+ * - `size`: 'sm' or 'md' (default)
+ * - Timeline.Item (also TimelineItem): `title`; `time` (text, so format it
+ *   first); `description`, a line under the title; `icon`, an Iconify name in
+ *   a circle (a dot without one); `color` tints the marker: 'accent',
+ *   'success', 'warning' or 'danger' (grey by default). Its content shows
+ *   under the title
+ */
+import type { HTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './timeline.css';
+type ItemClasses = Classes<'item' | 'marker' | 'icon' | 'dot' | 'body' | 'header' | 'heading' | 'time' | 'description' | 'content'>;
+export type TimelineItemProps = Omit<LiHTMLAttributes<HTMLLIElement>, 'title' | 'color'> & {
+    title?: ReactNode;
+    time?: ReactNode;
+    description?: ReactNode;
+    icon?: string | null;
+    color?: 'accent' | 'success' | 'warning' | 'danger' | null;
+    classes?: ItemClasses;
+};
+export type TimelineProps = HTMLAttributes<HTMLDivElement> & {
+    items?: TimelineItemProps[] | null;
+    variant?: 'line' | 'cards';
+    size?: 'sm' | 'md';
+    classes?: Classes<'root' | 'list'>;
+};
+declare function TimelineShortcut({ items, variant, size, className, classes, children, ...rest }: TimelineProps): import("react").JSX.Element;
+/** One event in a Timeline; its content shows under the title. */
+export declare function TimelineItem({ title, time, description, icon, color, className, classes, children, ...rest }: TimelineItemProps): import("react").JSX.Element;
+export declare const Timeline: typeof TimelineShortcut & {
+    Item: typeof TimelineItem;
+};
+export {};

package/dist/timeline/Timeline.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { cx, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './timeline.css';
+function TimelineShortcut({ items = null, variant = 'line', size = 'md', className, classes, children, ...rest }) {
+    const part = partsOf('timeline', classes);
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, "data-size": size, children: _jsxs("ol", { ...part('list'), children: [(items ?? []).map((item, i) => _jsx(TimelineItem, { ...item }, i)), children] }) }));
+}
+/** One event in a Timeline; its content shows under the title. */
+export function TimelineItem({ title = null, time = null, description = null, icon = null, color = null, className, classes, children, ...rest }) {
+    const part = partsOf('timeline', classes);
+    return (_jsxs("li", { ...rest, ...part('item'), className: cx(className, classes?.item), "data-color": color ?? 'neutral', children: [_jsx("div", { ...part('marker'), "aria-hidden": "true", children: icon ? _jsx("span", { ...part('icon'), children: _jsx("iconify-icon", { icon: icon }) }) : _jsx("span", { ...part('dot') }) }), _jsxs("div", { ...part('body'), children: [_jsxs("div", { ...part('header'), children: [title && _jsx("span", { ...part('heading'), children: title }), time && _jsx("time", { ...part('time'), children: time })] }), description && _jsx("div", { ...part('description'), children: description }), children && _jsx("div", { ...part('content'), children: children })] })] }));
+}
+export const Timeline = withParts(TimelineShortcut, { Item: TimelineItem });

package/dist/timeline/timeline.css

@@ -0,0 +1,29 @@
+@layer ui {
+  [data-scope=timeline][data-part=root] { display: block; width: 100%; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; }
+  [data-scope=timeline][data-part=list] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
+  [data-scope=timeline][data-part=item] { display: flex; gap: 0.75rem; position: relative; --tint: var(--ui-muted); --tint-bg: var(--ui-hover);
+    &[data-color=accent] { --tint: var(--ui-accent); --tint-text: var(--ui-accent-soft-text); --tint-bg: var(--ui-accent-soft); }
+    &[data-color=success] { --tint: var(--ui-success); --tint-bg: color-mix(in srgb, var(--ui-success) 15%, var(--ui-surface)); }
+    &[data-color=warning] { --tint: #f59e0b; --tint-text: #b45309; --tint-bg: #fef3c7; }
+    &[data-color=danger] { --tint: var(--ui-danger); --tint-bg: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-surface)); } }
+  /* The connector runs down the marker column to the next item, behind the markers, and stops at the last. */
+  [data-scope=timeline][data-part=marker] { position: relative; display: flex; justify-content: center; width: 2rem; flex-shrink: 0;
+    &::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--ui-border); }
+    [data-part=item]:last-child > &::after { display: none; } }
+  [data-scope=timeline][data-part=icon] { position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; box-sizing: border-box;
+    border-radius: 9999px; background: var(--tint-bg); color: var(--tint-text, var(--tint)); font-size: 15px; border: 1px solid var(--ui-border);
+    [data-color]:not([data-color=neutral]) > [data-part=marker] > & { border-color: transparent; }
+    [data-size=sm] & { width: 1.5rem; height: 1.5rem; font-size: 13px; } }
+  /* A dot, ringed in the page colour so the line doesn't touch it. */
+  [data-scope=timeline][data-part=dot] { position: relative; z-index: 1; width: 0.625rem; height: 0.625rem; margin-top: 0.625rem;
+    border-radius: 9999px; background: var(--tint); border: 3px solid var(--ui-surface); box-sizing: content-box; }
+  [data-scope=timeline][data-part=body] { flex-grow: 1; min-width: 0; padding: 0.375rem 0 1.5rem;
+    [data-size=sm] & { padding-bottom: 1rem; }
+    [data-variant=cards] & { padding: 0.75rem; margin-bottom: 0.75rem; border: 1px solid var(--ui-border);
+      border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface); } }
+  [data-scope=timeline][data-part=header] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
+  [data-scope=timeline][data-part=heading] { font-weight: 500; }
+  [data-scope=timeline][data-part=time] { font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
+  [data-scope=timeline][data-part=description] { margin-top: 0.125rem; color: var(--ui-muted); }
+  [data-scope=timeline][data-part=content] { margin-top: 0.5rem; }
+}

package/dist/toast/Toaster.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The region toasts stack in, rendered at the end of <body>. Put one in the
+ * app layout, then call `toaster` from anywhere:
+ *
+ *   <Toaster />
+ *   toaster.success({ title: 'Lesson booked', description: 'Thursday at 16:00' })
+ *   toaster.error({ title: 'Could not save' })
+ *   const id = toaster.create({ type: 'loading', title: 'Uploading…' })
+ *   toaster.update(id, { type: 'success', title: 'Uploaded' })
+ *
+ * Toasts pause while hovered or focused, Escape dismisses the focused one, and
+ * Alt+T jumps to them. An `action: { label, onClick }` adds a button.
+ *
+ * - `store`: a toaster from createToaster (the shared `toaster` by default)
+ * - `label`: the region's accessible name ('Notifications')
+ * - `render`: draws each toast yourself, given its data (inside Toast.Root,
+ *   with Toast.Title, Description, ActionTrigger, CloseTrigger)
+ */
+import type { ReactNode } from 'react';
+import { Toast, createToaster, type CreateToasterReturn, type ToastOptions } from '@ark-ui/react/toast';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './toast.css';
+declare const make: (options?: Partial<Parameters<typeof createToaster>[0]>) => CreateToasterReturn<ReactNode>;
+export { make as createToaster };
+export declare const toaster: CreateToasterReturn;
+export type ToasterProps = {
+    store?: CreateToasterReturn;
+    label?: string;
+    render?: (toast: ToastOptions) => ReactNode;
+    className?: string;
+    classes?: Classes<'group' | 'root' | 'icon' | 'spinner' | 'text' | 'title' | 'description' | 'actionTrigger' | 'closeTrigger'>;
+};
+export declare function Toaster({ store, label: labelProp, render, className, classes }: ToasterProps): import("react").JSX.Element;
+export { Toast };

package/dist/toast/Toaster.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toaster as ArkToaster, Toast, createToaster } from '@ark-ui/react/toast';
+import { Portal } from '@ark-ui/react/portal';
+import 'iconify-icon';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './toast.css';
+// Toasts: brief notifications stacked in a corner. The shared `toaster`
+// stacks at bottom-end; make another with createToaster and pass it to a
+// Toaster as `store`.
+const make = (options = {}) => createToaster({ placement: 'bottom-end', overlap: true, max: 5, ...options });
+export { make as createToaster };
+export const toaster = make();
+const icons = {
+    info: 'lucide:info', success: 'lucide:circle-check', warning: 'lucide:triangle-alert', error: 'lucide:circle-alert',
+};
+export function Toaster({ store = toaster, label: labelProp, render, className, classes }) {
+    const t = useMessages();
+    const label = labelProp ?? t.toaster.label;
+    const part = partsOf('toast', classes);
+    return (_jsx(Portal, { children: _jsx(ArkToaster, { toaster: store, label: label, ...part('group'), className: cx(className, classes?.group), children: (toast) => render ? _jsx(Toast.Root, { ...part('root'), children: render(toast) }) : (_jsxs(Toast.Root, { ...part('root'), children: [toast.type === 'loading' ? _jsx("span", { ...part('spinner'), "aria-hidden": "true" })
+                        : toast.type && icons[toast.type] && _jsx("iconify-icon", { ...part('icon'), icon: icons[toast.type], "aria-hidden": "true" }), _jsxs("div", { ...part('text'), children: [toast.title && _jsx(Toast.Title, { ...part('title'), children: toast.title }), toast.description && _jsx(Toast.Description, { ...part('description'), children: toast.description })] }), toast.action && _jsx(Toast.ActionTrigger, { ...part('action-trigger'), children: toast.action.label }), _jsx(Toast.CloseTrigger, { ...part('close-trigger'), "aria-label": t.common.dismiss, children: _jsx("iconify-icon", { icon: "lucide:x" }) })] })) }) }));
+}
+export { Toast };

package/dist/toast/toast.css

@@ -0,0 +1,33 @@
+@layer ui {
+  [data-scope=toast][data-part=root] {
+    display: flex; align-items: flex-start; gap: 0.75rem; width: 22rem; max-width: calc(100vw - 2rem); padding: 0.75rem 2.5rem 0.75rem 0.75rem; box-sizing: border-box;
+    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) + 2px); box-shadow: var(--ui-shadow); outline: none;
+    /* Zag positions each toast through these variables. Toasts behind the
+       front one shrink a little (Zag's own --scale would mirror them). */
+    translate: var(--x) var(--y); scale: calc(2 - (var(--base-scale, 1)));
+    z-index: var(--z-index); height: var(--height); opacity: var(--opacity);
+    transition: translate 400ms, scale 400ms, opacity 400ms, height 400ms;
+    transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
+    &[data-state=closed] { transition: translate 400ms, scale 400ms, opacity 200ms; transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
+  }
+  [data-scope=toast][data-part=icon] { flex-shrink: 0; margin-top: 2px; font-size: 18px; color: var(--ui-muted);
+    [data-type=success] > & { color: #16a34a; }
+    [data-type=warning] > & { color: #d97706; }
+    [data-type=error] > & { color: var(--ui-danger); }
+    [data-type=info] > & { color: var(--ui-accent); } }
+  [data-scope=toast][data-part=spinner] { display: block; width: 1rem; height: 1rem; margin-top: 2px; box-sizing: border-box; flex-shrink: 0;
+    border: 2px solid currentColor; border-top-color: transparent; border-radius: 9999px; animation: ui-spin 0.7s linear infinite; }
+  [data-scope=toast][data-part=text] { flex: 1; min-width: 0; }
+  [data-scope=toast][data-part=title] { font-weight: 600; }
+  [data-scope=toast][data-part=description] { color: var(--ui-muted);
+    [data-part=title] + & { margin-top: 0.125rem; } }
+  [data-scope=toast][data-part=action-trigger] { align-self: center; flex-shrink: 0; height: 1.75rem; padding: 0 0.625rem;
+    border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); border-radius: 6px;
+    font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
+    &:hover { background: var(--ui-hover); } }
+  [data-scope=toast][data-part=close-trigger] { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
+    border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer; font-size: 14px;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); } }
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,55 @@
+/**
+ * A tooltip: a short hint on hover and keyboard focus.
+ *
+ *   <Tooltip content="Archive"><Button icon="lucide:archive" aria-label="Archive" /></Tooltip>
+ *   <Tooltip content="Ada Lovelace">Ada</Tooltip>
+ *
+ * - children: the element it describes, which gets the trigger's props (a
+ *   component must pass them and its ref on, as Button does); text, several
+ *   elements or a disabled one (which fires no events) are wrapped in a span
+ *   that takes them
+ * - `content`: what it says (text or markup)
+ * - `placement`: 'top' (default), 'bottom-start', …
+ * - `openDelay` (0), `closeDelay` in ms; `interactive`: stays open while the
+ *   pointer is over it; `disabled`
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
+ *
+ * It closes on Escape, click or scroll. With `interactive` it stays open while
+ * the pointer is over it, so its text can be selected.
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Tooltip.Root>
+ *     <Tooltip.Trigger asChild><Button>Save</Button></Tooltip.Trigger>
+ *     <Tooltip.Positioner><Tooltip.Content><Tooltip.Arrow><Tooltip.ArrowTip /></Tooltip.Arrow>Saves a draft</Tooltip.Content></Tooltip.Positioner>
+ *   </Tooltip.Root>
+ */
+import { type ReactNode } from 'react';
+import { Tooltip as Ark, type TooltipOpenChangeDetails } from '@ark-ui/react/tooltip';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './tooltip.css';
+export type TooltipProps = Omit<Ark.ContentProps, 'content' | 'children'> & {
+    content?: ReactNode;
+    placement?: NonNullable<Ark.RootProps['positioning']>['placement'];
+    openDelay?: number;
+    closeDelay?: number;
+    interactive?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: TooltipOpenChangeDetails) => void;
+    children?: ReactNode;
+    classes?: Classes<'trigger' | 'positioner' | 'content' | 'arrow' | 'arrowTip'>;
+};
+declare function TooltipShortcut({ content, placement, openDelay, closeDelay, interactive, disabled, open, defaultOpen, onOpenChange, className, classes, children, ...rest }: TooltipProps): import("react").JSX.Element;
+export declare const Tooltip: typeof TooltipShortcut & {
+    Root: (props: Ark.RootProps) => import("react").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Ark.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<Ark.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A tooltip: a short hint on hover and keyboard focus.
+ *
+ *   <Tooltip content="Archive"><Button icon="lucide:archive" aria-label="Archive" /></Tooltip>
+ *   <Tooltip content="Ada Lovelace">Ada</Tooltip>
+ *
+ * - children: the element it describes, which gets the trigger's props (a
+ *   component must pass them and its ref on, as Button does); text, several
+ *   elements or a disabled one (which fires no events) are wrapped in a span
+ *   that takes them
+ * - `content`: what it says (text or markup)
+ * - `placement`: 'top' (default), 'bottom-start', …
+ * - `openDelay` (0), `closeDelay` in ms; `interactive`: stays open while the
+ *   pointer is over it; `disabled`
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
+ *
+ * It closes on Escape, click or scroll. With `interactive` it stays open while
+ * the pointer is over it, so its text can be selected.
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Tooltip.Root>
+ *     <Tooltip.Trigger asChild><Button>Save</Button></Tooltip.Trigger>
+ *     <Tooltip.Positioner><Tooltip.Content><Tooltip.Arrow><Tooltip.ArrowTip /></Tooltip.Arrow>Saves a draft</Tooltip.Content></Tooltip.Positioner>
+ *   </Tooltip.Root>
+ */
+import { isValidElement } from 'react';
+import { Tooltip as Ark } from '@ark-ui/react/tooltip';
+import { Portal } from '@ark-ui/react/portal';
+import { cx, on, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './tooltip.css';
+function TooltipShortcut({ content = null, placement = 'top', openDelay = 0, closeDelay, interactive = false, disabled = false, open, defaultOpen, onOpenChange, className, classes, children, ...rest }) {
+    const part = partsOf('tooltip', classes);
+    return (_jsxs(Ark.Root, { openDelay: openDelay, interactive: interactive, disabled: disabled, lazyMount: true, unmountOnExit: true, positioning: { placement, strategy: 'fixed', gutter: 8 }, ...(closeDelay !== undefined && { closeDelay }), ...(open !== undefined && { open }), ...(defaultOpen !== undefined && { defaultOpen }), ...on('onOpenChange', onOpenChange, (details) => details.open), children: [isValidElement(children) && !children.props.disabled
+                ? _jsx(Ark.Trigger, { asChild: true, children: children })
+                : _jsx(Ark.Trigger, { asChild: true, children: _jsx("span", { ...part('trigger'), children: children }) }), _jsx(Portal, { children: _jsx(Ark.Positioner, { ...part('positioner'), children: _jsxs(Ark.Content, { ...rest, ...part('content'), className: cx(className, classes?.content), children: [_jsx(Ark.Arrow, { ...part('arrow'), children: _jsx(Ark.ArrowTip, { ...part('arrow-tip') }) }), content] }) }) })] }));
+}
+export const Tooltip = withParts(TooltipShortcut, {
+    Root: Ark.Root,
+    Trigger: Ark.Trigger,
+    Positioner: Ark.Positioner,
+    Content: Ark.Content,
+    Arrow: Ark.Arrow,
+    ArrowTip: Ark.ArrowTip,
+    Context: Ark.Context,
+});

package/dist/tooltip/tooltip.css

@@ -0,0 +1,18 @@
+@layer ui {
+  [data-scope=tooltip][data-part=trigger] { display: inline-flex; }
+  /* Zag copies the content's z-index onto its positioner. */
+  [data-scope=tooltip][data-part=content] {
+    z-index: 60; max-width: 16rem; padding: 0.25rem 0.5rem; white-space: normal; font-weight: 400;
+    background: var(--ui-text); color: var(--ui-surface); font-family: var(--ui-font); font-size: 12px; line-height: 1.4;
+    border-radius: calc(var(--ui-radius) - 2px); box-shadow: var(--ui-shadow);
+    --arrow-size: 8px; --arrow-background: var(--ui-text);
+    /* Slides in from the trigger's side. */
+    --dx: 0px; --dy: 0px;
+    &[data-side=top] { --dy: 4px; }
+    &[data-side=bottom] { --dy: -4px; }
+    &[data-side=left] { --dx: 4px; }
+    &[data-side=right] { --dx: -4px; }
+    &[data-state=open] { animation: ui-tooltip-in 140ms ease-out; }
+  }
+  @keyframes ui-tooltip-in { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.96); } }
+}