@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/select/ListSelect.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Select without search: a button that opens the list. Used by Select.tsx,
+// which documents the props.
+import { Fragment, useMemo, useRef } from 'react';
+import { Select as Ark, createListCollection, useSelect } from '@ark-ui/react/select';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partsOf, slot } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import { useItems } from './items.js';
+import '../theme.css';
+import './select.css';
+export function ListSelect({ label = null, items = [], placeholder: placeholderProp, labelKey, valueKey, disabledKey, multiple = false, tags = false, variant = 'subtle', hideSelected = false, deselectable = false, closeOnSelect, clearable = false, emptyText: emptyTextProp, empty, name, size = 'md', placement = 'bottom-start', disabled = false, value, defaultValue, onValueChange, renderItem, renderValue, start, 
+// Search-only props, not for the div.
+searchable: _searchable, load: _load, debounce: _debounce, loadingText: _loadingText, onCreate: _onCreate, renderCreate: _renderCreate, className, classes, ...rest }) {
+    const t = useMessages();
+    const placeholder = placeholderProp ?? t.select.placeholder;
+    const emptyText = emptyTextProp ?? t.select.empty;
+    const field = useFieldContext();
+    const part = partsOf('select', classes);
+    const { labelOf, valueOf, keyOf, isDisabled, setCurrent, keys } = useItems({ labelKey, valueKey, disabledKey, multiple, value, defaultValue, onValueChange });
+    // With hideSelected the picked items aren't rendered, but stay in Zag's
+    // collection (for their labels), disabled so the keys skip them.
+    const hidden = (item) => hideSelected && multiple && keys.includes(keyOf(item));
+    const listed = items.filter((item) => !hidden(item));
+    const collection = useMemo(() => createListCollection({
+        items: [...items],
+        itemToString: labelOf,
+        itemToValue: keyOf,
+        isItemDisabled: (item) => hidden(item) || isDisabled(item),
+    }), [items, labelKey, valueKey, disabledKey, hideSelected, multiple, keys.join('\u0000')]); // eslint-disable-line react-hooks/exhaustive-deps
+    // The items' own values for Zag's keys.
+    const valuesOf = (list) => list.map((key) => items.find((item) => keyOf(item) === key)).filter((item) => item !== undefined).map(valueOf);
+    function change(details) {
+        const chosen = valuesOf(details.value);
+        if (multiple)
+            keepPlace(details.value);
+        setCurrent(multiple ? chosen : chosen[0] ?? null);
+    }
+    // Opening highlights the pick, which hideSelected hides (and Enter would
+    // then untick unseen): highlight the first item shown instead.
+    function openChange({ open }) {
+        if (open && hideSelected && multiple && listed.length)
+            setTimeout(() => api.current.setHighlightValue(keyOf(listed[0])), 0);
+    }
+    const select = useSelect({
+        collection, value: keys, onValueChange: change, onOpenChange: openChange, multiple, deselectable, closeOnSelect: closeOnSelect ?? !multiple, disabled,
+        positioning: { placement, sameWidth: true }, ...(name && { name }),
+        ...(t.zag.select && { translations: t.zag.select }),
+    });
+    // The latest api, for the timers below.
+    const api = useRef(select);
+    api.current = select;
+    // Picking several: the highlight stays where it was (on the next item, when
+    // the picked one leaves the list), so Enter can pick a run of them.
+    function keepPlace(next) {
+        const key = next.find((k) => !keys.includes(k)) ?? keys.find((k) => !next.includes(k));
+        const at = listed.findIndex((item) => keyOf(item) === key);
+        if (at < 0)
+            return;
+        setTimeout(() => {
+            const shown = items.filter((item) => !(hideSelected && next.includes(keyOf(item))));
+            const item = shown[Math.min(at, shown.length - 1)];
+            if (item && api.current.open)
+                api.current.setHighlightValue(keyOf(item));
+        }, 30);
+    }
+    // Backspace on the closed button removes the last pick. Set here, not by
+    // Zag, which won't clear an item hideSelected has disabled.
+    function removeLast(e) {
+        if (e.key !== 'Backspace' || !multiple || select.open || !keys.length)
+            return;
+        setCurrent(valuesOf(keys.slice(0, -1)));
+    }
+    return (_jsxs(Ark.RootProvider, { value: select, ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-variant": variant, children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsxs(Ark.Control, { ...part('control'), children: [_jsxs(Ark.Trigger, { ...part('trigger'), onKeyDown: removeLast, children: [start != null && _jsx("span", { ...part('start'), children: typeof start === 'function' ? start(select.selectedItems[0] ?? null) : start }), multiple && tags && select.hasSelectedItems
+                                // Chips, not buttons (a button can't hold buttons): untick an item to remove it.
+                                ? _jsx("span", { ...part('tags'), children: select.selectedItems.map((item) => (_jsx("span", { ...part('tag'), children: _jsx("span", { ...part('tag-text'), children: renderValue ? renderValue(item) : labelOf(item) }) }, keyOf(item)))) })
+                                : renderValue && select.hasSelectedItems
+                                    // Your rendering of the chosen item(s), in place of Ark's text.
+                                    ? _jsx("span", { ...part('value-text'), children: select.selectedItems.map((item, i) => _jsxs(Fragment, { children: [i > 0 && ', ', renderValue(item)] }, keyOf(item))) })
+                                    : _jsx(Ark.ValueText, { ...part('value-text'), placeholder: placeholder }), _jsx(Ark.Indicator, { ...part('indicator'), children: _jsx("iconify-icon", { icon: "lucide:chevron-down" }) })] }), clearable && _jsx(Ark.ClearTrigger, { ...part('clear-trigger'), children: _jsx("iconify-icon", { icon: "lucide:x" }) })] }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsxs(Ark.Content, { ...part('content'), children: [listed.map((item) => (_jsxs(Ark.Item, { item: item, ...part('item'), children: [_jsx(Ark.ItemText, { ...part('item-text'), children: renderItem ? renderItem(item, { selected: keys.includes(keyOf(item)) }) : labelOf(item) }), _jsx(Ark.ItemIndicator, { ...part('item-indicator'), children: _jsx("iconify-icon", { icon: "lucide:check" }) })] }, keyOf(item)))), !listed.length && _jsx("div", { ...part('empty'), children: slot(empty, emptyText, { query: '' }) })] }) }), _jsx(Ark.HiddenSelect, {})] }));
+}

package/dist/select/SearchSelect.d.ts

@@ -0,0 +1,43 @@
+import { Combobox as Ark } from '@ark-ui/react/combobox';
+import 'iconify-icon';
+import type { InnerProps } from './Select.js';
+import '../theme.css';
+import './search-select.css';
+export declare function SearchSelect<T>({ label, items, placeholder: placeholderProp, labelKey, valueKey, disabledKey, multiple, variant, hideSelected, closeOnSelect, clearable, load, debounce, loadingText: loadingTextProp, onCreate, emptyText: emptyTextProp, empty, name, size, placement, disabled, value, defaultValue, onValueChange, renderItem, renderValue, start, renderCreate, searchable: _searchable, tags: _tags, deselectable: _deselectable, className, classes, ...rest }: InnerProps<T>): import("react").JSX.Element;
+/**
+ * Combobox's parts, for a searchable select built by hand (Select's own
+ * search mode is built from them):
+ *
+ *   <Combobox.Root collection={collection} onInputValueChange={…}>
+ *     <Combobox.Label>Fruit</Combobox.Label>
+ *     <Combobox.Control><Combobox.Input /><Combobox.Trigger>▾</Combobox.Trigger></Combobox.Control>
+ *     <Combobox.Positioner><Combobox.Content>…items…</Combobox.Content></Combobox.Positioner>
+ *   </Combobox.Root>
+ */
+export declare const Combobox: {
+    Root: Ark.RootComponent<{}>;
+    RootProvider: Ark.RootProviderComponent<{}>;
+    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>>;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Ark.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Ark.ListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Ark.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Ark.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Ark.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Ark.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Ark.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<Ark.EmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: <T extends unknown>(props: Ark.ContextProps<T>) => import("react").ReactNode;
+    Tags: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Tag: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};

package/dist/select/SearchSelect.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Select with search: an input that filters the list, loads it, or creates
+// items. Used by Select.tsx, which documents the props.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Combobox as Ark, createListCollection, useCombobox, } from '@ark-ui/react/combobox';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partOf, partsOf, slot } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import { useItems } from './items.js';
+import '../theme.css';
+import './search-select.css';
+// The "Create …" option, in the list beside the items.
+const CREATE = '\u0000create';
+const isCreating = (entry) => typeof entry === 'object' && entry !== null && CREATE in entry;
+export function SearchSelect({ label = null, items = [], placeholder: placeholderProp, labelKey, valueKey, disabledKey, multiple = false, variant = 'subtle', hideSelected = false, closeOnSelect, clearable = false, load, debounce = 200, loadingText: loadingTextProp, onCreate, emptyText: emptyTextProp, empty, name, size = 'md', placement = 'bottom-start', disabled = false, value, defaultValue, onValueChange, renderItem, renderValue, start, renderCreate, 
+// ListSelect-only props, not for the div.
+searchable: _searchable, tags: _tags, deselectable: _deselectable, className, classes, ...rest }) {
+    const t = useMessages();
+    const placeholder = placeholderProp ?? t.select.searchPlaceholder;
+    const loadingText = loadingTextProp ?? t.select.loading;
+    const emptyText = emptyTextProp ?? t.select.noMatches;
+    const field = useFieldContext();
+    // Ark stamps data-scope="combobox" on its parts; ours match, for search-select.css.
+    const part = partsOf('combobox', classes);
+    const { labelOf, valueOf, keyOf, isDisabled, setCurrent, keys } = useItems({ labelKey, valueKey, disabledKey, multiple, value, defaultValue, onValueChange });
+    // Items found by `load` or made by `onCreate` are remembered, so picked ones keep their labels.
+    const [seen, setSeen] = useState([]);
+    const [created, setCreated] = useState([]);
+    const pool = [...(load ? seen : items), ...created];
+    const byKey = (key) => pool.find((item) => keyOf(item) === key);
+    // What's been typed (not the picked item's label), filtering the list:
+    // labels starting with it first, then those containing it.
+    const [query, setQuery] = useState('');
+    const [loaded, setLoaded] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const loader = useRef(load);
+    loader.current = load;
+    // With `load`, the server filters: ask it (debounced), keeping only the latest answer.
+    useEffect(() => {
+        if (!loader.current)
+            return;
+        let current = true;
+        setLoading(true);
+        const timer = setTimeout(async () => {
+            const list = [...await loader.current(query)];
+            if (!current)
+                return;
+            setLoaded(list);
+            setSeen((seen) => [...seen.filter((item) => !list.some((it) => keyOf(it) === keyOf(item))), ...list]);
+            setLoading(false);
+            // Zag highlighted the first item as they typed, when the list was empty
+            // (loading); do it now the results are in, so Enter picks it.
+            if (query && list.length)
+                setTimeout(() => {
+                    if (api.current.open)
+                        input.current?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+                }, 30);
+        }, debounce);
+        return () => { current = false; clearTimeout(timer); };
+    }, [query, !!load, debounce]); // eslint-disable-line react-hooks/exhaustive-deps
+    const shown = useMemo(() => {
+        if (load)
+            return loading ? [] : loaded;
+        const q = query.toLowerCase();
+        if (!q)
+            return [...items];
+        const text = (item) => labelOf(item).toLowerCase();
+        return [...items.filter((item) => text(item).startsWith(q)), ...items.filter((item) => !text(item).startsWith(q) && text(item).includes(q))];
+    }, [items, query, load, loading, loaded, labelKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    const picked = multiple ? keys.map(byKey).filter((item) => item !== undefined) : [];
+    // The list as shown, and the selected items it doesn't show (left out by a
+    // search or `hideSelected`). Zag still needs those to know their labels, so
+    // they stay in its collection, disabled so the keys skip them, but unrendered.
+    const listed = hideSelected && multiple ? shown.filter((item) => !keys.includes(keyOf(item))) : shown;
+    const offList = keys.filter((key) => !listed.some((item) => keyOf(item) === key)).map(byKey).filter((item) => item !== undefined);
+    // The "Create …" option: for typed text that matches no item.
+    const typed = query.trim();
+    const creating = onCreate && typed && !loading && !pool.some((item) => labelOf(item).toLowerCase() === typed.toLowerCase())
+        ? { [CREATE]: true, label: typed } : null;
+    const collection = useMemo(() => createListCollection({
+        items: [...listed, ...(creating ? [creating] : []), ...offList],
+        itemToString: (entry) => (isCreating(entry) ? entry.label : labelOf(entry)),
+        itemToValue: (entry) => (isCreating(entry) ? CREATE : keyOf(entry)),
+        isItemDisabled: (entry) => !isCreating(entry) && (offList.includes(entry) || isDisabled(entry)),
+    }), [listed.map(keyOf).join('\u0000'), creating?.label, offList.map(keyOf).join('\u0000'), labelKey, valueKey, disabledKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    async function createFrom(text) {
+        setQuery('');
+        const made = await onCreate(text);
+        const combobox = api.current;
+        if (made != null) {
+            setCreated((created) => [...created, made]);
+            setCurrent(multiple ? [...keysOf(keys), valueOf(made)] : valueOf(made));
+            combobox.setInputValue(multiple ? '' : labelOf(made));
+        }
+        else
+            combobox.setInputValue(multiple ? '' : keys.length ? labelOf(byKey(keys[0]) ?? '') : '');
+    }
+    // The current value's items' own values, from their keys.
+    const keysOf = (list) => list.map(byKey).filter((item) => item !== undefined).map(valueOf);
+    function inputChange(details) {
+        // Emptying the input clears a single pick; partial edits revert on blur.
+        if (details.reason === 'input-change' && !details.inputValue && !multiple && keys.length)
+            queueMicrotask(() => api.current.clearValue());
+        if (details.reason === 'input-change')
+            setQuery(details.inputValue);
+        else if (!load || details.reason === 'clear-trigger')
+            setQuery('');
+    }
+    // Zag's values are strings; map them back to the items' own.
+    function change(details) {
+        if (details.value.includes(CREATE))
+            return void createFrom(typed);
+        const chosen = keysOf(details.value);
+        if (multiple)
+            keepPlace(details.value);
+        setCurrent(multiple ? chosen : chosen[0] ?? null);
+    }
+    const combobox = useCombobox({
+        collection, value: keys, onValueChange: change, onInputValueChange: inputChange,
+        multiple, disabled, placeholder, openOnClick: true, inputBehavior: 'autohighlight',
+        ...(t.zag.combobox && { translations: t.zag.combobox }),
+        closeOnSelect: closeOnSelect ?? !multiple, selectionBehavior: multiple ? 'clear' : 'replace',
+        positioning: { placement, sameWidth: true }, ...(name && { name }),
+    });
+    // The latest api, for the timers and promises here.
+    const api = useRef(combobox);
+    api.current = combobox;
+    const input = useRef(null);
+    // Picking several: the highlight stays where it was (on the next item, when
+    // the picked one leaves the list), so Enter can pick a run of them. Not
+    // after a search, which the pick clears. Zag only acts on Enter once the
+    // keys have moved the highlight, so it moves there the way they would.
+    function keepPlace(next) {
+        const key = next.find((k) => !keys.includes(k)) ?? keys.find((k) => !next.includes(k));
+        const at = listed.findIndex((item) => keyOf(item) === key);
+        if (at < 0 || query)
+            return;
+        setTimeout(() => {
+            const n = Math.min(at, listed.length - 1);
+            if (n < 0 || !api.current.open)
+                return;
+            if (n > 0)
+                api.current.setHighlightValue(keyOf(listed[n - 1]));
+            // In React the highlight lands on the next render: move on from it after that.
+            setTimeout(() => input.current?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key: n > 0 ? 'ArrowDown' : 'Home', bubbles: true })), 30);
+        }, 30);
+    }
+    // Removes picks. Set here, not by Zag, which won't clear an item that's
+    // off the list (disabled in its collection).
+    const unpick = (key) => setCurrent(keysOf(keys.filter((k) => k !== key)));
+    // Backspace in an empty input removes the last pick.
+    function removeLast(e) {
+        if (e.key !== 'Backspace' || !multiple || e.currentTarget.value || !keys.length)
+            return;
+        unpick(keys.at(-1));
+    }
+    // A click on the box (around the tags, not on a button) types into the input.
+    function focusInput(e) {
+        if (e.target.closest('button, input'))
+            return;
+        e.preventDefault();
+        input.current?.focus();
+    }
+    // Zag reverts stray text only while the list is open; when focus leaves
+    // the whole combobox, put the selected item's label back (or nothing). An
+    // emptied input has already cleared the pick (see inputChange).
+    function revert(e) {
+        if (e.currentTarget.contains(e.relatedTarget))
+            return;
+        const text = multiple ? '' : keys.length ? labelOf(byKey(keys[0]) ?? '') : '';
+        const root = e.currentTarget;
+        // After Zag has handled the blur (closing the list, if a search left it open).
+        setTimeout(() => {
+            if (root.contains(document.activeElement))
+                return;
+            // Tabbing away leaves a multiple select's list open, and its layer then
+            // swallows the next field's typing.
+            if (api.current.open)
+                api.current.setOpen(false);
+            if (api.current.inputValue !== text)
+                api.current.setInputValue(text);
+            setQuery('');
+        }, 0);
+    }
+    return (_jsxs(Ark.RootProvider, { value: combobox, ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-variant": variant, onBlur: revert, children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsxs(Ark.Control, { ...part('control'), onMouseDown: focusInput, children: [start != null && _jsx("span", { ...part('start'), children: typeof start === 'function' ? start((keys[0] !== undefined ? byKey(keys[0]) : undefined) ?? null) : start }), _jsxs("div", { ...part('tags'), children: [picked.map((item) => (_jsxs("span", { ...part('tag'), children: [_jsx("span", { ...part('tag-text'), children: renderValue ? renderValue(item) : labelOf(item) }), _jsx("button", { ...part('tag-remove'), type: "button", tabIndex: -1, "aria-label": t.common.remove(labelOf(item)), onClick: (e) => { e.stopPropagation(); unpick(keyOf(item)); }, children: _jsx("iconify-icon", { icon: "lucide:x" }) })] }, keyOf(item)))), _jsx(Ark.Input, { ref: input, ...part('input'), placeholder: picked.length ? '' : placeholder, onKeyDown: removeLast })] }), clearable && _jsx(Ark.ClearTrigger, { ...part('clear-trigger'), children: _jsx("iconify-icon", { icon: "lucide:x" }) }), _jsx(Ark.Trigger, { ...part('trigger'), children: _jsx("iconify-icon", { icon: "lucide:chevron-down" }) })] }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsxs(Ark.Content, { ...part('content'), children: [listed.map((item) => (_jsxs(Ark.Item, { item: item, ...part('item'), children: [_jsx(Ark.ItemText, { ...part('item-text'), children: renderItem ? renderItem(item, { selected: keys.includes(keyOf(item)) }) : labelOf(item) }), _jsx(Ark.ItemIndicator, { ...part('item-indicator'), children: _jsx("iconify-icon", { icon: "lucide:check" }) })] }, keyOf(item)))), !listed.length && !creating && (_jsx("div", { ...part('empty'), children: loading ? loadingText : slot(empty, emptyText, { query: typed }) })), creating && (_jsx(Ark.Item, { item: creating, ...part('create'), children: renderCreate ? renderCreate(creating.label)
+                                : _jsxs(_Fragment, { children: [_jsx("iconify-icon", { icon: "lucide:plus", "aria-hidden": "true" }), _jsx("span", { children: t.select.create(creating.label) })] }) }))] }) })] }));
+}
+/**
+ * Combobox's parts, for a searchable select built by hand (Select's own
+ * search mode is built from them):
+ *
+ *   <Combobox.Root collection={collection} onInputValueChange={…}>
+ *     <Combobox.Label>Fruit</Combobox.Label>
+ *     <Combobox.Control><Combobox.Input /><Combobox.Trigger>▾</Combobox.Trigger></Combobox.Control>
+ *     <Combobox.Positioner><Combobox.Content>…items…</Combobox.Content></Combobox.Positioner>
+ *   </Combobox.Root>
+ */
+export const Combobox = {
+    Root: Ark.Root,
+    RootProvider: Ark.RootProvider,
+    Label: Ark.Label,
+    Control: Ark.Control,
+    Input: Ark.Input,
+    Trigger: Ark.Trigger,
+    ClearTrigger: Ark.ClearTrigger,
+    Positioner: Ark.Positioner,
+    Content: Ark.Content,
+    List: Ark.List,
+    Item: Ark.Item,
+    ItemText: Ark.ItemText,
+    ItemIndicator: Ark.ItemIndicator,
+    ItemGroup: Ark.ItemGroup,
+    ItemGroupLabel: Ark.ItemGroupLabel,
+    Empty: Ark.Empty,
+    Context: Ark.Context,
+    Tags: partOf('combobox', 'tags'),
+    Tag: partOf('combobox', 'tag', 'span'),
+};

package/dist/select/Select.d.ts

@@ -0,0 +1,147 @@
+/**
+ * A select: pick from a list. A button that opens it, or, with `searchable`,
+ * `load` or `onCreate`, an input you type into to filter it.
+ *
+ *   <Select label="Level" items={['GCSE', 'A Level']} value={level} onValueChange={setLevel} />
+ *   <Select label="Student" items={students} labelKey="name" valueKey="id" searchable defaultValue={2} />
+ *   <Select label="City" load={searchCities} labelKey="name" valueKey="id" />
+ *   <Select label="Topics" items={topics} multiple onCreate={addTopic} value={picked} onValueChange={setPicked} />
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`)
+ * - `value`, `defaultValue`: the item's own value, or an array of them with `multiple`
+ * - `onValueChange`: called with the new value (items' own values, not strings)
+ * - `multiple`: pick several; picked items show ticked in the list
+ * - `tags`: with `multiple`, show the picks as tags in the box (always, when
+ *   searchable); `variant` sets their look: 'subtle', 'accent' or 'outline'
+ * - `hideSelected`: with `multiple`, picked items leave the list
+ * - `searchable`: type to filter the list (labels starting with the text first)
+ * - `load`: async function(query) returning items, for server search; implies
+ *   searchable (debounced by `debounce` ms, `loadingText` meanwhile)
+ * - `onCreate`: function(query) called when someone picks "Create …" for text
+ *   that matches no item; implies searchable. Return the new item (or a
+ *   promise of it) to select it, or handle it yourself
+ * - `deselectable`: clicking the picked item again clears it (without search)
+ * - `closeOnSelect`: close the list after a pick (on by default, except with `multiple`)
+ * - `clearable`: a button to clear it
+ * - `placeholder`, `emptyText` (when nothing matches)
+ * - `name`: for plain form posts
+ * - `size`: 'sm' or 'md'; `placement`: where the list opens ('bottom-start')
+ * - `renderItem`: an option's content, (item, { selected }) => node
+ * - `renderValue`: the chosen item's content in the closed select (and each
+ *   tag's, picking several), (item) => node; with search, the box holds
+ *   typed text, so use `start` there
+ * - `start`: before the value (or the search box): a node, or (item) => node
+ *   given the chosen item (the first, picking several; null if none), e.g.
+ *   a colour's dot
+ * - `renderCreate`: the create option's content, (query) => node
+ * - `empty`: shown when nothing matches, a node or ({ query }) => node
+ *
+ * Picking several, the highlight stays put (on the next item, when the
+ * picked one leaves the list), so Enter picks a run of them; Backspace in
+ * an empty box removes the last pick.
+ *
+ * By hand, with Ark's parts (and `createListCollection` for the items):
+ *
+ *   <Select.Root collection={collection}>
+ *     <Select.Label>Level</Select.Label>
+ *     <Select.Control>
+ *       <Select.Trigger><Select.ValueText placeholder="Pick one" /><Select.Indicator>▾</Select.Indicator></Select.Trigger>
+ *     </Select.Control>
+ *     <Select.Positioner>
+ *       <Select.Content>
+ *         {collection.items.map((item) => (
+ *           <Select.Item key={item.value} item={item}><Select.ItemText>{item.label}</Select.ItemText></Select.Item>
+ *         ))}
+ *       </Select.Content>
+ *     </Select.Positioner>
+ *     <Select.HiddenSelect />
+ *   </Select.Root>
+ *
+ * With search, the same with Combobox's parts (Combobox.Input in the control).
+ */
+import type { ComponentProps, ReactNode } from 'react';
+import { Select as Ark, createListCollection } from '@ark-ui/react/select';
+import { type Classes, type Slot } from '../utils.js';
+type Primitive = string | number;
+export type ItemValue<T, K extends string> = T extends Primitive ? T : K extends keyof T ? T[K] : unknown;
+type One<V> = {
+    multiple?: false;
+    value?: V | null;
+    defaultValue?: V | null;
+    onValueChange?: (value: V | null) => void;
+};
+type Several<V> = {
+    multiple: true;
+    value?: V[];
+    defaultValue?: V[];
+    onValueChange?: (value: V[]) => void;
+};
+export type SelectPart = 'root' | 'label' | 'control' | 'trigger' | 'valueText' | 'input' | 'tags' | 'tag' | 'tagText' | 'tagRemove' | 'indicator' | 'clearTrigger' | 'positioner' | 'content' | 'item' | 'itemText' | 'itemIndicator' | 'empty' | 'create' | 'start';
+export type SelectProps<T, K extends string = 'value'> = Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'children'> & {
+    items?: readonly T[];
+    label?: ReactNode;
+    labelKey?: string;
+    valueKey?: K;
+    disabledKey?: string;
+    placeholder?: string;
+    tags?: boolean;
+    variant?: 'subtle' | 'accent' | 'outline';
+    hideSelected?: boolean;
+    searchable?: boolean;
+    load?: (query: string) => Promise<readonly T[]> | readonly T[];
+    debounce?: number;
+    loadingText?: ReactNode;
+    onCreate?: (query: string) => T | null | undefined | void | Promise<T | null | undefined | void>;
+    deselectable?: boolean;
+    closeOnSelect?: boolean;
+    clearable?: boolean;
+    emptyText?: ReactNode;
+    empty?: Slot<{
+        query: string;
+    }>;
+    name?: string;
+    size?: 'sm' | 'md';
+    placement?: NonNullable<Ark.RootProps<T>['positioning']>['placement'];
+    disabled?: boolean;
+    renderItem?: (item: T, state: {
+        selected: boolean;
+    }) => ReactNode;
+    renderValue?: (item: T) => ReactNode;
+    start?: ReactNode | ((item: T | null) => ReactNode);
+    renderCreate?: (query: string) => ReactNode;
+    classes?: Classes<SelectPart>;
+} & (One<ItemValue<T, K>> | Several<ItemValue<T, K>>);
+export type InnerProps<T> = Omit<SelectProps<T>, 'multiple' | 'value' | 'defaultValue' | 'onValueChange' | 'valueKey'> & {
+    valueKey?: string;
+    multiple?: boolean;
+    value?: unknown;
+    defaultValue?: unknown;
+    onValueChange?: (value: unknown) => void;
+};
+declare function SelectShortcut<T, K extends string = 'value'>(props: SelectProps<T, K>): import("react").JSX.Element;
+export declare const Select: typeof SelectShortcut & {
+    Root: Ark.RootComponent<{}>;
+    RootProvider: Ark.RootProviderComponent<{}>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Ark.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Ark.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Ark.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Ark.ListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Ark.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Ark.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Ark.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Ark.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Ark.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    HiddenSelect: import("react").ForwardRefExoticComponent<Ark.HiddenSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+    Context: <T extends unknown>(props: Ark.ContextProps<T>) => ReactNode;
+    Empty: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export { createListCollection };
+export { Combobox } from './SearchSelect.js';

package/dist/select/Select.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select as Ark, createListCollection } from '@ark-ui/react/select';
+import { ListSelect } from './ListSelect.js';
+import { SearchSelect } from './SearchSelect.js';
+import { partOf, withParts } from '../utils.js';
+function SelectShortcut(props) {
+    const inner = props;
+    return inner.searchable || inner.load || inner.onCreate ? _jsx(SearchSelect, { ...inner }) : _jsx(ListSelect, { ...inner });
+}
+export const Select = withParts(SelectShortcut, {
+    Root: Ark.Root,
+    RootProvider: Ark.RootProvider,
+    Label: Ark.Label,
+    Control: Ark.Control,
+    Trigger: Ark.Trigger,
+    ValueText: Ark.ValueText,
+    Indicator: Ark.Indicator,
+    ClearTrigger: Ark.ClearTrigger,
+    Positioner: Ark.Positioner,
+    Content: Ark.Content,
+    List: Ark.List,
+    Item: Ark.Item,
+    ItemText: Ark.ItemText,
+    ItemIndicator: Ark.ItemIndicator,
+    ItemGroup: Ark.ItemGroup,
+    ItemGroupLabel: Ark.ItemGroupLabel,
+    HiddenSelect: Ark.HiddenSelect,
+    Context: Ark.Context,
+    Empty: partOf('select', 'empty'),
+});
+export { createListCollection };
+export { Combobox } from './SearchSelect.js';

package/dist/select/items.d.ts

@@ -0,0 +1,17 @@
+export declare function useItems<T>({ labelKey, valueKey, disabledKey, multiple, value, defaultValue, onValueChange }: {
+    labelKey?: string;
+    valueKey?: string;
+    disabledKey?: string;
+    multiple?: boolean;
+    value?: unknown;
+    defaultValue?: unknown;
+    onValueChange?: (value: unknown) => void;
+}): {
+    labelOf: (item: T) => string;
+    valueOf: (item: T) => unknown;
+    keyOf: (item: T) => string;
+    isDisabled: (item: T) => boolean;
+    current: unknown;
+    setCurrent: (next: unknown) => void;
+    keys: string[];
+};

package/dist/select/items.js

@@ -0,0 +1,14 @@
+import { useControllable } from '../utils.js';
+// Items are strings, numbers or objects; Zag's values are strings. These map
+// between them, and keep the value (the items' own values) controlled or not.
+export function useItems({ labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', multiple = false, value, defaultValue, onValueChange }) {
+    const field = (item, key) => item[key];
+    const isObject = (item) => typeof item === 'object' && item !== null;
+    const labelOf = (item) => String(isObject(item) ? field(item, labelKey) : item);
+    const valueOf = (item) => (isObject(item) ? field(item, valueKey) : item);
+    const keyOf = (item) => String(valueOf(item));
+    const isDisabled = (item) => isObject(item) && !!field(item, disabledKey);
+    const [current, setCurrent] = useControllable(value, defaultValue ?? (multiple ? [] : null), onValueChange);
+    const keys = multiple ? (current ?? []).map(String) : current == null ? [] : [String(current)];
+    return { labelOf, valueOf, keyOf, isDisabled, current, setCurrent, keys };
+}

package/dist/select/search-select.css

@@ -0,0 +1,45 @@
+@layer ui {
+  [data-scope=combobox][data-part=root] { display: inline-block; position: relative; min-width: 15rem; 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=combobox][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=combobox][data-part=control] { display: flex; align-items: center; gap: 0.25rem; min-height: var(--ui-control-height);
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem; box-sizing: border-box; background: var(--ui-surface);
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[data-disabled] { opacity: 0.5; }
+    &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); } }
+  [data-scope=combobox][data-part=tags] { display: flex; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; gap: 0.375rem; padding: 0.125rem 0; }
+  [data-scope=combobox][data-part=input] { flex: 1; min-width: 4rem; height: 1.625rem; padding: 0; border: none; background: transparent;
+    outline: none; color: inherit; font-family: inherit; font-size: 14px;
+    &::placeholder { color: var(--ui-muted); } }
+  [data-scope=combobox][data-part=tag] { 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-scope=combobox][data-part=tag-text] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
+  [data-scope=combobox][data-part=tag-remove] { 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=combobox]:is([data-part=clear-trigger], [data-part=trigger]) { display: grid; place-items: center; flex-shrink: 0;
+    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); } }
+  [data-scope=combobox][data-part=trigger][data-state=open] { rotate: 180deg; }
+
+  /* Zag copies the content's z-index onto its positioner. */
+  [data-scope=combobox][data-part=content] { z-index: 50; margin: 0; padding: 0.25rem; list-style: none; box-sizing: border-box; outline: none;
+    max-height: min(300px, var(--available-height)); overflow-y: auto; font-weight: 400;
+    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow); }
+  [data-scope=combobox][data-part=empty] { padding: 0.5rem; font-size: 14px; color: var(--ui-muted); }
+  [data-scope=combobox][data-part=item] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+    padding: 0.375rem 0.5rem; border-radius: 4px; font-size: 14px; cursor: pointer;
+    &[data-highlighted] { background: var(--ui-hover); }
+    &[data-state=checked] { font-weight: 500; }
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; } }
+  /* The create option (Zag gives it data-part="item"; ours is "create"). */
+  [data-scope=combobox][data-part=create] { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem;
+    border-radius: 4px; font-size: 14px; color: var(--ui-accent); cursor: pointer;
+    &[data-highlighted] { background: var(--ui-hover); } }
+  [data-scope=combobox][data-part=item-indicator] { display: none; color: var(--ui-accent);
+    &[data-state=checked] { display: inline-flex; } }
+}