@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Tabs: the Tab children are the panels, and the tab list is built from
+ * their labels.
+ *
+ *   <Tabs value={tab} onValueChange={setTab}>
+ *     <Tab value="lessons" label="Lessons" icon="lucide:calendar">…</Tab>
+ *     <Tab value="invoices" label="Invoices" count={2} countColor="danger">…</Tab>
+ *   </Tabs>
+ *
+ * Arrow keys move between tabs (selecting as they go), Home/End jump to the
+ * ends. With no value, the first enabled tab is selected.
+ *
+ * - `value`, `defaultValue`: the selected Tab's value; `onValueChange`: called with it
+ * - `variant`: 'line' (default, an underline) or 'pills'
+ * - `counts`: where the tabs' counts sit: 'inline' (default, after the label)
+ *   or 'corner' (top right, like a button's)
+ * - `renderTrigger`: a tab's content, given the tab's props; its count still follows
+ *
+ * By hand, with Ark's parts (data-variant on the root picks the look):
+ *
+ *   <Tabs.Root defaultValue="a" data-variant="pills">
+ *     <Tabs.List>
+ *       <Tabs.Trigger value="a">First <Tabs.Count>3</Tabs.Count></Tabs.Trigger>
+ *       <Tabs.Trigger value="b">Second</Tabs.Trigger>
+ *       <Tabs.Indicator />
+ *     </Tabs.List>
+ *     <Tabs.Content value="a">…</Tabs.Content>
+ *     <Tabs.Content value="b">…</Tabs.Content>
+ *   </Tabs.Root>
+ */
+import { type ReactElement, type ReactNode } from 'react';
+import { Tabs as Ark, type TabsValueChangeDetails } from '@ark-ui/react/tabs';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './tabs.css';
+type Value = string | number;
+export type TabProps = Omit<Ark.ContentProps, 'value'> & {
+    value: Value;
+    label?: ReactNode;
+    icon?: string | null;
+    disabled?: boolean;
+    count?: number | null;
+    max?: number;
+    dot?: boolean;
+    pulse?: boolean;
+    countColor?: 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
+    countLabel?: string;
+};
+/**
+ * One panel of a Tabs; `label` (and an optional `icon`) make its tab.
+ *
+ * - `value`: identifies it (the Tabs' value when selected)
+ * - `label`: its text; `icon`: an Iconify name before it; `disabled`
+ * - `count`: a small count after the label (hidden at 0 or null); past `max`
+ *   it shows e.g. "99+"
+ * - `dot`: a dot there instead, for "something to look at"
+ * - `pulse`: a ring ripples out from the count or dot (not when the system
+ *   asks for less motion)
+ * - `countColor`: 'neutral' (default, quiet), 'accent', 'danger', 'success'
+ *   or 'warning', for the dot too
+ * - `countLabel`: what the count is, for assistive tech ("Invoices, 2 overdue")
+ */
+export declare function Tab({ value, label: _label, icon: _icon, disabled: _disabled, count: _count, max: _max, dot: _dot, pulse: _pulse, countColor: _countColor, countLabel: _countLabel, className, ...rest }: TabProps): import("react").JSX.Element;
+export type TabsProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange'> & {
+    value?: Value | null;
+    defaultValue?: Value | null;
+    onValueChange?: (value: Value | null, details: TabsValueChangeDetails) => void;
+    variant?: 'line' | 'pills';
+    counts?: 'inline' | 'corner';
+    renderTrigger?: (tab: TabProps) => ReactNode;
+    classes?: Classes<'root' | 'list' | 'trigger' | 'icon' | 'count' | 'indicator' | 'panels' | 'content'>;
+};
+declare function TabsShortcut({ value, defaultValue, onValueChange, variant, counts, renderTrigger, className, classes, children, ...rest }: TabsProps): import("react").JSX.Element;
+export declare const Tabs: typeof TabsShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Ark.ListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Ark.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+    Count: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/tabs/Tabs.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tabs: the Tab children are the panels, and the tab list is built from
+ * their labels.
+ *
+ *   <Tabs value={tab} onValueChange={setTab}>
+ *     <Tab value="lessons" label="Lessons" icon="lucide:calendar">…</Tab>
+ *     <Tab value="invoices" label="Invoices" count={2} countColor="danger">…</Tab>
+ *   </Tabs>
+ *
+ * Arrow keys move between tabs (selecting as they go), Home/End jump to the
+ * ends. With no value, the first enabled tab is selected.
+ *
+ * - `value`, `defaultValue`: the selected Tab's value; `onValueChange`: called with it
+ * - `variant`: 'line' (default, an underline) or 'pills'
+ * - `counts`: where the tabs' counts sit: 'inline' (default, after the label)
+ *   or 'corner' (top right, like a button's)
+ * - `renderTrigger`: a tab's content, given the tab's props; its count still follows
+ *
+ * By hand, with Ark's parts (data-variant on the root picks the look):
+ *
+ *   <Tabs.Root defaultValue="a" data-variant="pills">
+ *     <Tabs.List>
+ *       <Tabs.Trigger value="a">First <Tabs.Count>3</Tabs.Count></Tabs.Trigger>
+ *       <Tabs.Trigger value="b">Second</Tabs.Trigger>
+ *       <Tabs.Indicator />
+ *     </Tabs.List>
+ *     <Tabs.Content value="a">…</Tabs.Content>
+ *     <Tabs.Content value="b">…</Tabs.Content>
+ *   </Tabs.Root>
+ */
+import { Children, isValidElement, useEffect } from 'react';
+import { Tabs as Ark } from '@ark-ui/react/tabs';
+import 'iconify-icon';
+import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
+import '../theme.css';
+import './tabs.css';
+/**
+ * One panel of a Tabs; `label` (and an optional `icon`) make its tab.
+ *
+ * - `value`: identifies it (the Tabs' value when selected)
+ * - `label`: its text; `icon`: an Iconify name before it; `disabled`
+ * - `count`: a small count after the label (hidden at 0 or null); past `max`
+ *   it shows e.g. "99+"
+ * - `dot`: a dot there instead, for "something to look at"
+ * - `pulse`: a ring ripples out from the count or dot (not when the system
+ *   asks for less motion)
+ * - `countColor`: 'neutral' (default, quiet), 'accent', 'danger', 'success'
+ *   or 'warning', for the dot too
+ * - `countLabel`: what the count is, for assistive tech ("Invoices, 2 overdue")
+ */
+export function Tab({ value, label: _label, icon: _icon, disabled: _disabled, count: _count, max: _max, dot: _dot, pulse: _pulse, countColor: _countColor, countLabel: _countLabel, className, ...rest }) {
+    return _jsx(Ark.Content, { ...rest, value: String(value), "data-scope": "tabs", "data-part": "content", className: className });
+}
+function TabsShortcut({ value, defaultValue, onValueChange, variant = 'line', counts = 'inline', renderTrigger, className, classes, children, ...rest }) {
+    const part = partsOf('tabs', classes);
+    const tabs = Children.toArray(children).filter((child) => isValidElement(child) && child.type === Tab);
+    // With no value, the first enabled tab.
+    const first = tabs.find((tab) => !tab.props.disabled)?.props.value ?? null;
+    const [current, setCurrent] = useControllable(value, defaultValue ?? first, undefined);
+    const shown = current ?? first;
+    // A null value (controlled or not) selects the first enabled tab, and says so.
+    useEffect(() => {
+        if (current != null || first == null)
+            return;
+        setCurrent(first);
+        onValueChange?.(first, { value: String(first) });
+    }, [current, first]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Zag's values are strings; map them back to the tabs' own.
+    function change(details) {
+        const next = tabs.find((tab) => String(tab.props.value) === details.value)?.props.value ?? null;
+        setCurrent(next);
+        onValueChange?.(next, details);
+    }
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, "data-counts": counts, value: shown == null ? null : String(shown), onValueChange: change, children: [_jsxs(Ark.List, { ...part('list'), children: [tabs.map(({ props: tab }) => {
+                        const { count, max = 99, dot, pulse, countColor = 'neutral', countLabel = '' } = tab;
+                        const badge = count && count > 0 ? (count > max ? `${max}+` : String(count)) : dot ? '' : null;
+                        const spoken = count && count > 0 ? [count, countLabel].filter(Boolean).join(' ') : dot ? countLabel : '';
+                        return (_jsxs(Ark.Trigger, { value: String(tab.value), disabled: !!tab.disabled, ...part('trigger'), children: [renderTrigger ? renderTrigger(tab) : _jsxs(_Fragment, { children: [tab.icon && _jsx("iconify-icon", { ...part('icon'), icon: tab.icon, "aria-hidden": "true" }), _jsx("span", { children: tab.label })] }), badge != null && _jsxs(_Fragment, { children: [_jsx("span", { ...part('count'), "aria-hidden": "true", "data-dot": badge === '' || undefined, "data-pulse": pulse || undefined, "data-color": countColor, children: badge }), spoken && _jsxs("span", { ...part('sr-only'), children: [", ", spoken] })] })] }, String(tab.value)));
+                    }), _jsx(Ark.Indicator, { ...part('indicator') })] }), _jsx("div", { ...part('panels'), children: children })] }));
+}
+export const Tabs = withParts(TabsShortcut, {
+    Root: Ark.Root,
+    List: Ark.List,
+    Trigger: Ark.Trigger,
+    Indicator: Ark.Indicator,
+    Content: Ark.Content,
+    Context: Ark.Context,
+    Count: partOf('tabs', 'count', 'span'),
+});

package/dist/tabs/tabs.css

@@ -0,0 +1,53 @@
+@layer ui {
+  [data-scope=tabs][data-part=root] { display: block; width: 100%; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=tabs][data-part=list] { position: relative; display: flex; gap: 0.25rem; overflow-x: auto;
+    [data-variant=line] > & { border-bottom: 1px solid var(--ui-border); }
+    /* Pills: a raised pill behind the selected tab, like Segmented. */
+    [data-variant=pills] > & { display: inline-flex; padding: 0.25rem; background: var(--ui-hover); border-radius: var(--ui-radius); } }
+  [data-scope=tabs][data-part=trigger] {
+    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; height: var(--ui-control-height); padding: 0 0.75rem;
+    border: none; background: transparent; color: var(--ui-muted); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
+    cursor: pointer; border-radius: var(--ui-radius);
+    &:hover, &[data-selected] { color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; }
+    /* Taller than a control, so the underlined tabs have room to breathe. */
+    [data-variant=line] & { border-radius: 0; height: calc(var(--ui-control-height) + 0.5rem); padding: 0 0.875rem; }
+    [data-variant=pills] & { height: calc(var(--ui-control-height) - 8px); border-radius: calc(var(--ui-radius) - 2px); } }
+  [data-scope=tabs][data-part=icon] { display: block; font-size: 16px; }
+  /* The count after a label: quiet by default, coloured for status. */
+  [data-scope=tabs][data-part=count] { position: relative; display: inline-grid; place-items: center; min-width: 18px; height: 18px;
+    padding: 0 5px; box-sizing: border-box; border-radius: 9999px; isolation: isolate;
+    font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
+    --count-bg: var(--ui-hover); --count-text: var(--ui-muted); background: var(--count-bg); color: var(--count-text);
+    &[data-color=accent] { --count-bg: var(--ui-accent); --count-text: var(--ui-accent-text); }
+    &[data-color=danger] { --count-bg: var(--ui-danger); --count-text: white; }
+    &[data-color=success] { --count-bg: var(--ui-success); --count-text: white; }
+    &[data-color=warning] { --count-bg: #f59e0b; --count-text: #451a03; }
+    &[data-dot] { min-width: 0; width: 8px; height: 8px; padding: 0; }
+    &[data-dot][data-color=neutral] { --count-bg: var(--ui-muted); }
+    [data-selected] > &[data-color=neutral]:not([data-dot]) { --count-bg: var(--ui-accent-soft); --count-text: var(--ui-accent-soft-text); }
+    /* A copy of its colour that grows and fades behind it. */
+    &[data-pulse]::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 9999px; background: inherit;
+      animation: ui-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
+    /* Corner counts: small, raised into the tab's top right (in room the
+       tab makes for them, below), ringed in the page colour like a button's. */
+    [data-counts=corner] & { position: absolute; top: 0.375rem; right: 0.25rem; min-width: 15px; height: 15px;
+      padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px var(--ui-surface);
+      [data-variant=pills] & { top: 0.125rem; right: 0.125rem; }
+      &[data-dot] { min-width: 0; width: 7px; height: 7px; padding: 0; top: 0.625rem; right: 0.5rem;
+        [data-variant=pills] & { top: 0.375rem; right: 0.375rem; } } } }
+  /* A tab with a corner count makes room for it on the right. */
+  [data-counts=corner] [data-scope=tabs][data-part=trigger]:has(> [data-part=count]) { padding-right: 1.375rem;
+    &:has(> [data-dot]) { padding-right: 1.125rem; } }
+  [data-scope=tabs][data-part=sr-only] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @keyframes ui-ping { from { scale: 1; opacity: 0.7; } 75%, to { scale: 2.2; opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { [data-scope=tabs][data-part=count]::after { animation: none; } }
+  [data-scope=tabs][data-part=indicator] { transition-property: var(--transition-property); transition-duration: 200ms;
+    [data-variant=line] & { position: absolute; bottom: -1px; left: var(--left); width: var(--width); height: 2px; background: var(--ui-accent); }
+    [data-variant=pills] & { position: absolute; z-index: 0; top: var(--top); left: var(--left); width: var(--width); height: var(--height);
+      background: var(--ui-surface); border-radius: calc(var(--ui-radius) - 2px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } }
+  [data-scope=tabs][data-part=panels] { padding-top: 1rem; }
+  [data-scope=tabs][data-part=content] { display: block; outline: none;
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: 4px; border-radius: 4px; } }
+}

package/dist/tags-input/TagsInput.d.ts

@@ -0,0 +1,69 @@
+/**
+ * A tags input: type and press Enter (or a comma) to add a tag; Backspace
+ * removes the last; double-click a tag to edit it.
+ *
+ *   <TagsInput label="Topics" value={topics} onValueChange={setTopics} placeholder="Add a topic…" />
+ *
+ * - `value`, `defaultValue`: arrays of strings; `onValueChange`: called with the new array
+ * - `max`: the most tags allowed
+ * - `variant`: the tags' look: 'subtle', 'accent' or 'outline'
+ * - `editable`: false to stop editing tags in place
+ * - `delimiter`: typing it adds a tag too (',')
+ * - `validate`: function({ inputValue, value }) returning whether to add it; a
+ *   rejected tag stays in the box to fix, and the field flashes red
+ * - `allowDuplicates`: let the same tag in twice
+ * - `addOnPaste`: split pasted text by the delimiter into tags (on by default)
+ * - `name`: for plain form posts (comma-separated)
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <TagsInput.Root>
+ *     <TagsInput.Label>Topics</TagsInput.Label>
+ *     <TagsInput.Control>
+ *       <TagsInput.Context>{(api) => api.value.map((tag, index) => (
+ *         <TagsInput.Item key={index} index={index} value={tag}>
+ *           <TagsInput.ItemPreview><TagsInput.ItemText>{tag}</TagsInput.ItemText><TagsInput.ItemDeleteTrigger>×</TagsInput.ItemDeleteTrigger></TagsInput.ItemPreview>
+ *           <TagsInput.ItemInput />
+ *         </TagsInput.Item>
+ *       ))}</TagsInput.Context>
+ *       <TagsInput.Input />
+ *     </TagsInput.Control>
+ *     <TagsInput.HiddenInput />
+ *   </TagsInput.Root>
+ */
+import { type ReactNode } from 'react';
+import { TagsInput as Ark, type TagsInputValueChangeDetails } from '@ark-ui/react/tags-input';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './tags-input.css';
+export type TagsInputProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'label'> & {
+    label?: ReactNode;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[], details: TagsInputValueChangeDetails) => void;
+    placeholder?: string;
+    variant?: 'subtle' | 'accent' | 'outline';
+    classes?: Classes<'root' | 'label' | 'control' | 'tags' | 'item' | 'itemPreview' | 'itemText' | 'itemDeleteTrigger' | 'itemInput' | 'input' | 'clearTrigger'>;
+};
+declare function TagsInputShortcut({ label, value, defaultValue, onValueChange, placeholder: placeholderProp, variant, max, delimiter, validate, allowDuplicates, addOnPaste, editable, name, disabled, className, classes, ...rest }: TagsInputProps): import("react").JSX.Element;
+export declare const TagsInput: typeof TagsInputShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Ark.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Ark.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Item: import("react").ForwardRefExoticComponent<Ark.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemPreview: import("react").ForwardRefExoticComponent<Ark.ItemPreviewProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Ark.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Ark.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ItemInput: import("react").ForwardRefExoticComponent<Ark.ItemInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Ark.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<Ark.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+    Tags: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/tags-input/TagsInput.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A tags input: type and press Enter (or a comma) to add a tag; Backspace
+ * removes the last; double-click a tag to edit it.
+ *
+ *   <TagsInput label="Topics" value={topics} onValueChange={setTopics} placeholder="Add a topic…" />
+ *
+ * - `value`, `defaultValue`: arrays of strings; `onValueChange`: called with the new array
+ * - `max`: the most tags allowed
+ * - `variant`: the tags' look: 'subtle', 'accent' or 'outline'
+ * - `editable`: false to stop editing tags in place
+ * - `delimiter`: typing it adds a tag too (',')
+ * - `validate`: function({ inputValue, value }) returning whether to add it; a
+ *   rejected tag stays in the box to fix, and the field flashes red
+ * - `allowDuplicates`: let the same tag in twice
+ * - `addOnPaste`: split pasted text by the delimiter into tags (on by default)
+ * - `name`: for plain form posts (comma-separated)
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <TagsInput.Root>
+ *     <TagsInput.Label>Topics</TagsInput.Label>
+ *     <TagsInput.Control>
+ *       <TagsInput.Context>{(api) => api.value.map((tag, index) => (
+ *         <TagsInput.Item key={index} index={index} value={tag}>
+ *           <TagsInput.ItemPreview><TagsInput.ItemText>{tag}</TagsInput.ItemText><TagsInput.ItemDeleteTrigger>×</TagsInput.ItemDeleteTrigger></TagsInput.ItemPreview>
+ *           <TagsInput.ItemInput />
+ *         </TagsInput.Item>
+ *       ))}</TagsInput.Context>
+ *       <TagsInput.Input />
+ *     </TagsInput.Control>
+ *     <TagsInput.HiddenInput />
+ *   </TagsInput.Root>
+ */
+import { useRef, useState } from 'react';
+import { TagsInput as Ark, useTagsInput } from '@ark-ui/react/tags-input';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './tags-input.css';
+function TagsInputShortcut({ label = null, value, defaultValue, onValueChange, placeholder: placeholderProp, variant = 'subtle', max = Infinity, delimiter = ',', validate, allowDuplicates = false, addOnPaste = true, editable = true, name, disabled, className, classes, ...rest }) {
+    const t = useMessages();
+    const placeholder = placeholderProp ?? t.tagsInput.placeholder;
+    const field = useFieldContext();
+    const part = partsOf('tags-input', classes);
+    const [tags, setTags] = useControllable(value, defaultValue ?? [], undefined);
+    const input = useRef(null);
+    // What was typed, to put back when `validate` turns it down (Zag clears it).
+    const typed = useRef('');
+    const [rejected, setRejected] = useState(false);
+    const props = {
+        value: tags, max, delimiter, allowDuplicates, addOnPaste, editable, blurBehavior: 'add',
+        ...(validate && { validate }), ...(name && { name }), ...(disabled !== undefined && { disabled }),
+        ...(t.zag.tagsInput && { translations: t.zag.tagsInput }),
+        onInputValueChange: (details) => { if (details.inputValue)
+            typed.current = details.inputValue; },
+        onValueInvalid: () => {
+            const text = typed.current;
+            // Zag clears the box in the next frame; put the text back after that.
+            requestAnimationFrame(() => requestAnimationFrame(() => api.current.setInputValue(text)));
+            setRejected(true);
+            setTimeout(() => setRejected(false), 700);
+        },
+        onValueChange: (details) => {
+            // Zag clears its own copy of the typed text after adding a tag, but not
+            // always the box itself (after a delimiter), so clear that too.
+            if (details.value.length > tags.length && input.current)
+                input.current.value = '';
+            setTags(details.value);
+            onValueChange?.(details.value, details);
+        },
+    };
+    const tagsInput = useTagsInput(props);
+    const api = useRef(tagsInput);
+    api.current = tagsInput;
+    return (_jsxs(Ark.RootProvider, { value: tagsInput, ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsxs(Ark.Control, { ...part('control'), "data-rejected": rejected || undefined, children: [_jsxs("div", { ...part('tags'), children: [tagsInput.value.map((tag, index) => (_jsxs(Ark.Item, { index: index, value: tag, ...part('item'), children: [_jsxs(Ark.ItemPreview, { ...part('item-preview'), children: [_jsx(Ark.ItemText, { ...part('item-text'), children: tag }), _jsx(Ark.ItemDeleteTrigger, { ...part('item-delete-trigger'), children: _jsx("iconify-icon", { icon: "lucide:x" }) })] }), _jsx(Ark.ItemInput, { ...part('item-input') })] }, `${index}:${tag}`))), _jsx(Ark.Input, { ref: input, ...part('input'), placeholder: tagsInput.value.length ? '' : placeholder })] }), _jsx(Ark.ClearTrigger, { ...part('clear-trigger'), children: _jsx("iconify-icon", { icon: "lucide:x" }) })] }), _jsx(Ark.HiddenInput, {})] }));
+}
+export const TagsInput = withParts(TagsInputShortcut, {
+    Root: Ark.Root,
+    RootProvider: Ark.RootProvider,
+    Label: Ark.Label,
+    Control: Ark.Control,
+    Input: Ark.Input,
+    Item: Ark.Item,
+    ItemPreview: Ark.ItemPreview,
+    ItemText: Ark.ItemText,
+    ItemDeleteTrigger: Ark.ItemDeleteTrigger,
+    ItemInput: Ark.ItemInput,
+    ClearTrigger: Ark.ClearTrigger,
+    HiddenInput: Ark.HiddenInput,
+    Context: Ark.Context,
+    Tags: partOf('tags-input', 'tags'),
+});

package/dist/tags-input/tags-input.css

@@ -0,0 +1,37 @@
+/* Tag parts are matched by Zag's names (item-preview, item-delete-trigger…);
+   `classes` uses the short ones (tag, tagRemove…). */
+@layer ui {
+  [data-scope=tags-input][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font);
+    --tag-bg: var(--ui-hover); --tag-text: var(--ui-text); --tag-border: transparent;
+    &[data-variant=accent] { --tag-bg: var(--ui-accent-soft); --tag-text: var(--ui-accent-soft-text); }
+    &[data-variant=outline] { --tag-bg: var(--ui-surface); --tag-border: var(--ui-border); } }
+  [data-scope=tags-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=tags-input][data-part=control] { display: flex; align-items: center; gap: 0.25rem; min-height: var(--ui-control-height);
+    padding: 0.25rem 0.25rem 0.25rem 0.375rem; box-sizing: border-box; background: var(--ui-surface);
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px; cursor: text;
+    &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[data-invalid], &:has([aria-invalid=true]), &[data-rejected] { border-color: var(--ui-danger); }
+    &[data-rejected] { animation: ui-shake 300ms; }
+    &[data-disabled] { opacity: 0.5; } }
+  [data-scope=tags-input][data-part=tags] { display: flex; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; gap: 0.375rem; }
+  [data-scope=tags-input][data-part=item-preview] { display: flex; align-items: center; gap: 0.25rem; height: 1.625rem;
+    padding: 0 0.25rem 0 0.625rem; box-sizing: border-box; border-radius: calc(var(--ui-radius) - 2px);
+    background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border);
+    font-size: 13px; font-weight: 500; line-height: 1;
+    &[data-highlighted] { outline: 2px solid var(--ui-ring); } }
+  [data-scope=tags-input][data-part=item-text] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
+  [data-scope=tags-input][data-part=item-delete-trigger] { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; padding: 0;
+    border: none; background: transparent; border-radius: 4px; color: inherit; opacity: 0.6; cursor: pointer;
+    &:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); } }
+  [data-scope=tags-input][data-part=item-input] { height: 1.625rem; width: 7rem; padding: 0 0.5rem; box-sizing: border-box;
+    border: 1px solid var(--ui-ring); border-radius: calc(var(--ui-radius) - 2px); background: var(--ui-surface);
+    color: inherit; font-family: inherit; font-size: 13px; outline: none; }
+  [data-scope=tags-input][data-part=input] { flex: 1; min-width: 4rem; height: 1.625rem; padding: 0 0.25rem; border: none;
+    background: transparent; outline: none; color: inherit; font: inherit;
+    &::placeholder { color: var(--ui-muted); } }
+  [data-scope=tags-input][data-part=clear-trigger] { display: grid; place-items: center; flex-shrink: 0; align-self: center;
+    width: 1.75rem; height: 1.75rem; border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); } }
+  @keyframes ui-shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
+  @media (prefers-reduced-motion: reduce) { [data-scope=tags-input][data-part=control][data-rejected] { animation: none; } }
+}

package/dist/textarea/Textarea.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A textarea that grows with its content, from `rows` lines up to `maxRows`
+ * (then it scrolls). Other attributes go on the <textarea>.
+ *
+ *   <Textarea value={notes} onValueChange={setNotes} rows={3} maxRows={8} placeholder="Notes" />
+ *
+ * - `label`: a label above it (skipped inside a Field)
+ * - `value`, `defaultValue`; `onValueChange`: called with the new text
+ * - `rows`: the starting height in lines
+ * - `maxRows`: grow up to this many lines, then scroll
+ * - `autogrow`: false for a fixed height the user can resize
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './textarea.css';
+export type TextareaProps = ComponentProps<'textarea'> & {
+    label?: ReactNode;
+    onValueChange?: (value: string) => void;
+    maxRows?: number | null;
+    autogrow?: boolean;
+    classes?: Classes<'root' | 'label' | 'control' | 'textarea'>;
+};
+export declare function Textarea({ label, rows, maxRows, autogrow, onValueChange, onChange, value, className, classes, ref, ...rest }: TextareaProps): import("react").JSX.Element;

package/dist/textarea/Textarea.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A textarea that grows with its content, from `rows` lines up to `maxRows`
+ * (then it scrolls). Other attributes go on the <textarea>.
+ *
+ *   <Textarea value={notes} onValueChange={setNotes} rows={3} maxRows={8} placeholder="Notes" />
+ *
+ * - `label`: a label above it (skipped inside a Field)
+ * - `value`, `defaultValue`; `onValueChange`: called with the new text
+ * - `rows`: the starting height in lines
+ * - `maxRows`: grow up to this many lines, then scroll
+ * - `autogrow`: false for a fixed height the user can resize
+ */
+import { useCallback, useId, useLayoutEffect, useRef } from 'react';
+import { Field, useFieldContext } from '@ark-ui/react/field';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './textarea.css';
+export function Textarea({ label = null, rows = 3, maxRows = null, autogrow = true, onValueChange, onChange, value, className, classes, ref, ...rest }) {
+    const field = useFieldContext();
+    const part = partsOf('textarea', classes);
+    const ownId = useId();
+    const id = rest.id ?? `${ownId}-textarea`;
+    const el = useRef(null);
+    // Fits the height to the content, capped at maxRows.
+    const fit = useCallback(() => {
+        const area = el.current;
+        if (!autogrow || !area)
+            return;
+        const line = parseFloat(getComputedStyle(area).lineHeight);
+        const max = maxRows ? line * maxRows : Infinity;
+        area.style.height = 'auto';
+        area.style.height = `${Math.min(area.scrollHeight, max)}px`;
+        area.style.overflowY = area.scrollHeight > max ? 'auto' : 'hidden';
+    }, [autogrow, maxRows]);
+    useLayoutEffect(fit, [fit, value]);
+    function change(e) {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+        fit();
+    }
+    // Both refs: ours, for the height, and the caller's.
+    const refs = (node) => {
+        el.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return (_jsxs("div", { ...part('root'), className: cx(className, classes?.root), children: [label && !field && _jsx("label", { ...part('label'), htmlFor: id, children: label }), _jsx("div", { ...part('control'), children: _jsx(Field.Textarea, { ref: refs, rows: rows, id: field ? undefined : id, value: value, ...rest, ...part('textarea'), "data-autogrow": autogrow || undefined, onChange: change }) })] }));
+}

package/dist/textarea/textarea.css

@@ -0,0 +1,14 @@
+@layer ui {
+  [data-scope=textarea][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=textarea][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=textarea][data-part=control] { display: block; min-width: 0; padding: 0.5rem 0.75rem; box-sizing: border-box;
+    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &:has([aria-invalid=true]) { border-color: var(--ui-danger); }
+    &:has(:disabled) { opacity: 0.5; } }
+  [data-scope=textarea][data-part=textarea] { display: block; width: 100%; margin: 0; padding: 0; border: none; background: transparent;
+    outline: none; color: inherit; font: inherit; line-height: 1.5; resize: vertical;
+    &::placeholder { color: var(--ui-muted); }
+    &[data-autogrow] { resize: none; overflow: hidden; } }
+}

package/dist/theme-toggle/ThemeToggle.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { type ComponentProps } from 'react';
+import { Menu } from '../menu/Menu.js';
+import 'iconify-icon';
+import { type Scheme } from '../color-scheme.js';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './theme-toggle.css';
+type Variant = 'segmented' | 'menu' | 'toggle';
+export type ThemeToggleProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+    variant?: Variant;
+    mobile?: Variant | null;
+    breakpoint?: number;
+    options?: Scheme[];
+    system?: boolean;
+    labels?: Record<Scheme, string>;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    placement?: NonNullable<Parameters<typeof Menu>[0]['placement']> | null;
+    keepOpen?: boolean;
+    iconOnly?: boolean;
+    onChange?: (scheme: Scheme) => void;
+    classes?: Classes<'root' | 'trigger' | 'triggerIcon'>;
+};
+export declare function ThemeToggle({ variant, mobile, breakpoint, options, system, labels: labelsProp, label: labelProp, placement, size, keepOpen, iconOnly, onChange, className, classes, ...rest }: ThemeToggleProps): import("react").JSX.Element;
+export {};