@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/forms/controls/CheckGroup.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { CHOICE_BASE_CSS } from "../choice.js";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { Checkbox } from "./Checkbox.js";
+import { EffectSheets } from "./choiceParts.js";
+import { filled } from "./shared.js";
+/** The options' checkboxes, the "select all" box left out (it carries `data-sx-all` on its input). */
+const OPTION = "[data-sx-group-options] [data-sx-choice-control]:not([data-sx-all])";
+/**
+ * A group of checkboxes in a real `<fieldset>`. With `all`, a "select all" box leads them: on when every one is, mixed
+ * when some are, and a click sets them all. With `count`, "3 selected" follows them. With `shiftRange`, a shift-click
+ * sets a whole run at once. Each checkbox stays a real one with its name, so a plain form submit carries the values.
+ *
+ * ```tsx
+ * <CheckGroup label="Toppings" options={toppings} all count effect={checkDraw()} {...register("toppings")} />
+ * ```
+ */
+export function CheckGroup(props) {
+    const { label, description, error, invalid, options, value, defaultValue, onValueChange, all, count, shiftRange, orientation = "vertical", effect, native, unstyled, labels, className, rootClassName, labelClassName, style, id: ownId, ...rest } = props;
+    const auto = useId().replace(/[^\w-]/g, "");
+    const idBase = ownId ?? `sx-checks${auto}`;
+    const ids = fieldIds(idBase);
+    const hasError = filled(error);
+    const isInvalid = hasError || invalid === true;
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description), own: rest["aria-describedby"] });
+    const { "aria-describedby": _own, onChange: ownChange, ...shared } = rest;
+    const controlled = value !== undefined;
+    const root = useRef(null);
+    const inputs = () => [...(root.current?.querySelectorAll(OPTION) ?? [])];
+    // the values that are on: yours when you hold them, else read from the checkboxes themselves (React Hook Form's
+    // register leaves them to the browser), after every change, every render and a form reset
+    const [picked, setPicked] = useState(() => defaultValue ?? []);
+    const on = controlled ? value : picked;
+    const read = () => {
+        if (controlled)
+            return;
+        const next = inputs().filter((i) => i.checked).map((i) => i.value);
+        setPicked((now) => (now.length === next.length && now.every((v, i) => v === next[i]) ? now : next));
+    };
+    useEffect(read);
+    useEffect(() => {
+        const form = root.current?.form;
+        if (!form)
+            return;
+        const later = () => setTimeout(read);
+        form.addEventListener("reset", later);
+        return () => form.removeEventListener("reset", later);
+    }, [controlled]); // eslint-disable-line react-hooks/exhaustive-deps
+    const values = options.map((o) => o.value);
+    const total = values.length;
+    const n = on.filter((v) => values.includes(v)).length;
+    const words = { all: "Select all", count: "{n} selected", ...labels };
+    const changed = (e) => {
+        ownChange?.(e);
+        if (controlled) {
+            const v = e.target.value;
+            onValueChange?.(e.target.checked ? [...value.filter((x) => x !== v), v] : value.filter((x) => x !== v));
+        }
+        else {
+            read();
+            onValueChange?.(inputs().filter((i) => i.checked).map((i) => i.value));
+        }
+    };
+    // Set a run of checkboxes the way the user would: a click on each, so its change event reaches React Hook Form.
+    // Values you hold are set in one go instead.
+    const setAll = (targets, to) => {
+        if (controlled) {
+            const touched = targets.map((t) => t.value);
+            const rest = value.filter((v) => !touched.includes(v));
+            onValueChange?.(to ? [...rest, ...touched] : rest);
+            return;
+        }
+        for (const input of targets)
+            if (input.checked !== to && !input.disabled)
+                input.click();
+    };
+    const last = useRef(null);
+    const ranging = useRef(false);
+    const onClick = (e) => {
+        const input = e.target.closest?.("input");
+        const list = inputs();
+        const at = input ? list.indexOf(input) : -1;
+        if (at === -1 || ranging.current)
+            return;
+        if (shiftRange && e.shiftKey && last.current !== null && last.current !== at) {
+            const [from, to] = [Math.min(last.current, at), Math.max(last.current, at)];
+            ranging.current = true;
+            setAll(list.slice(from, to + 1).filter((_, i) => from + i !== at), input.checked);
+            ranging.current = false;
+        }
+        last.current = at;
+    };
+    const optionIds = options.map((_, i) => `${idBase}-${i}`);
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-choice", base: CHOICE_BASE_CSS, effects: [] }), _jsxs("fieldset", { ref: root, id: idBase, "data-sx-checks": "", "data-sx-group": "check", "data-sx-styled": unstyled ? undefined : "", "data-sx-orientation": orientation, "aria-describedby": describedBy, className: rootClassName, style: style, children: [filled(label) ? (_jsx("legend", { "data-sx-group-legend": "", className: labelClassName, children: label })) : null, filled(description) ? (_jsx("p", { "data-sx-group-description": "", id: ids.description, children: description })) : null, _jsxs("div", { "data-sx-group-options": "", className: className, onClick: onClick, 
+                        // a shift-click would select the words between the two: keep the selection, the click still goes through
+                        onMouseDown: shiftRange ? (e) => e.shiftKey && e.preventDefault() : undefined, children: [all ? (_jsx(Checkbox, { "data-sx-all": "", label: words.all, checked: total > 0 && n === total, indeterminate: n > 0 && n < total, onChange: (e) => setAll(inputs(), e.target.checked), "aria-controls": optionIds.join(" "), effect: effect, native: native, unstyled: unstyled })) : null, options.map((o, i) => (_jsx(Checkbox, { ...shared, id: optionIds[i], value: o.value, label: o.label, description: o.description, disabled: o.disabled || shared.disabled, ...(controlled ? { checked: value.includes(o.value) } : { defaultChecked: defaultValue?.includes(o.value) }), onChange: changed, "aria-invalid": isInvalid || undefined, effect: effect, native: native, unstyled: unstyled, style: { "--sx-choice-i": i } }, o.value)))] }), count ? (_jsx("p", { "data-sx-group-count": "", role: "status", children: words.count.replace("{n}", String(n)) })) : null, _jsx("div", { "data-sx-choice-message": "", children: _jsx("p", { "data-sx-choice-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-choice-says": "", children: error }, typeof error === "string" ? error : undefined)) : null }) })] })] }));
+}

package/dist/forms/controls/Checkbox.d.ts

@@ -0,0 +1,43 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+interface CheckboxOwnProps {
+    /** The words beside the box. The whole row is the label, so a click on the words toggles it too. */
+    readonly label?: ReactNode;
+    /** Help under the words, read as the checkbox's description. */
+    readonly description?: ReactNode;
+    /** The error message. While set, the checkbox is `aria-invalid` and screen readers read the message. */
+    readonly error?: ReactNode;
+    /** Invalid with no message of its own. */
+    readonly invalid?: boolean;
+    /** Neither on nor off: some of the things it stands for are on (a "select all" box). The browser's own property. */
+    readonly indeterminate?: boolean;
+    /** One effect or a list; they stack. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    /** The browser's own checkbox, coloured with `accent-color`, instead of the drawn box. Effects don't apply. */
+    readonly native?: boolean;
+    /** Drop the default look. */
+    readonly unstyled?: boolean;
+    /** Goes on the drawn box. */
+    readonly className?: string;
+    /** Goes on the outer element. */
+    readonly rootClassName?: string;
+    /** Goes on the words. */
+    readonly labelClassName?: string;
+    /** Goes on the outer element, beside the effects' variables. */
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on the real checkbox, `ref` included: `name`, `value`, `checked` / `defaultChecked`,
+ * `onChange`, `required`, `disabled`, so `{...register("terms")}` spreads straight onto it.
+ */
+export type CheckboxProps = CheckboxOwnProps & Omit<ComponentPropsWithRef<"input">, keyof CheckboxOwnProps | "type">;
+/**
+ * A checkbox that wears any number of effects. The real checkbox sits on top of the drawn box at opacity 0, the same
+ * size: it takes the click, the keyboard and the focus, and the effects read its state from CSS.
+ *
+ * ```tsx
+ * <Checkbox label="I agree to the terms" effect={[checkDraw(), checkPop()]} {...register("terms")} />
+ * ```
+ */
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/forms/controls/Checkbox.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { CHOICE_BASE_CSS } from "../choice.js";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { checkChoice } from "./choiceChecks.js";
+import { ChoiceItem, EffectSheets, usePrograms } from "./choiceParts.js";
+import { effectList, filled, withUid } from "./shared.js";
+/**
+ * A checkbox that wears any number of effects. The real checkbox sits on top of the drawn box at opacity 0, the same
+ * size: it takes the click, the keyboard and the focus, and the effects read its state from CSS.
+ *
+ * ```tsx
+ * <Checkbox label="I agree to the terms" effect={[checkDraw(), checkPop()]} {...register("terms")} />
+ * ```
+ */
+export function Checkbox(props) {
+    const { label, description, error, invalid, indeterminate, effect, native, unstyled, className, rootClassName, labelClassName, style, id: ownId, ...rest } = props;
+    const effects = native ? [] : effectList(effect);
+    const auto = useId();
+    const id = ownId ?? `sx-check${auto.replace(/[^\w-]/g, "")}`;
+    const uid = `sx${auto.replace(/[^\w-]/g, "")}`;
+    const ids = fieldIds(id);
+    const hasError = filled(error);
+    const ownInvalid = rest["aria-invalid"];
+    const isInvalid = hasError || invalid === true || ownInvalid === true || ownInvalid === "true";
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description), own: rest["aria-describedby"] });
+    if (process.env.NODE_ENV !== "production") {
+        checkChoice({
+            control: "checkbox",
+            effects,
+            labelled: filled(label) || !!rest["aria-label"] || !!rest["aria-labelledby"],
+            nativeWithEffects: !!native && !!effect && effectList(effect).length > 0,
+            invalidWithoutWords: invalid === true && !hasError,
+        });
+    }
+    const root = useRef(null);
+    // `indeterminate` is a property, not an attribute: set it once the input exists. Until then (the server's HTML),
+    // `data-sx-mixed` shows the dash; it goes as soon as the property is set, so a click that clears the property isn't
+    // undone by a stale attribute.
+    useEffect(() => {
+        const el = root.current;
+        const input = el?.querySelector("[data-sx-choice-control]");
+        if (!el || !input)
+            return;
+        input.indeterminate = indeterminate === true;
+        el.removeAttribute("data-sx-mixed");
+    }, [indeterminate]);
+    usePrograms(root, effects);
+    const vars = { ...withUid(Object.assign({}, ...effects.map((e) => e.vars)), uid), ...style };
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-choice", base: CHOICE_BASE_CSS, effects: effects }), _jsx(ChoiceItem, { kind: "checkbox", effects: effects, uid: uid, label: label, description: description, descriptionId: ids.description, boxClassName: className, labelClassName: labelClassName, root: {
+                    ref: root,
+                    "data-sx-choice": effects.map((e) => e.id).join(" "),
+                    "data-sx-kind": "checkbox",
+                    "data-sx-styled": unstyled ? undefined : "",
+                    "data-sx-native": native ? "" : undefined,
+                    "data-sx-mixed": indeterminate ? "" : undefined,
+                    className: rootClassName,
+                    style: vars,
+                }, control: {
+                    ...rest,
+                    id,
+                    type: "checkbox",
+                    "aria-invalid": isInvalid || undefined,
+                    "aria-describedby": describedBy,
+                }, children: _jsx("div", { "data-sx-choice-message": "", children: _jsx("p", { "data-sx-choice-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-choice-says": "", children: error }, typeof error === "string" ? error : undefined)) : null }) }) })] }));
+}

package/dist/forms/controls/ChipGroup.d.ts

@@ -0,0 +1,50 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+/** One chip. */
+export interface ChipOption {
+    readonly value: string;
+    readonly label: ReactNode;
+    readonly disabled?: boolean;
+}
+interface ChipGroupOwnProps {
+    /** The group's question: a real `<legend>`. */
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    /** The error message. While set, every chip is `aria-invalid` and the group points at the message. */
+    readonly error?: ReactNode;
+    readonly invalid?: boolean;
+    readonly options: readonly ChipOption[];
+    /** Several chips on at once (checkboxes), or one (radios: the arrow keys move between them). Default `true`. */
+    readonly multiple?: boolean;
+    /** The values that are on, when you hold them (with `onValueChange`). */
+    readonly value?: readonly string[];
+    readonly defaultValue?: readonly string[];
+    /** Called with the values that are on after each change. */
+    readonly onValueChange?: (values: string[]) => void;
+    /** `chipCheck`, `chipMerge`: they stack. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    readonly unstyled?: boolean;
+    /** Goes on the chips' row. */
+    readonly className?: string;
+    /** Goes on the `<fieldset>`. */
+    readonly rootClassName?: string;
+    /** Goes on the `<legend>`. */
+    readonly labelClassName?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on each chip's input, `ref` included: `name`, `onChange`, `onBlur`, `required`, `disabled`, so
+ * `{...register("filters")}` spreads onto all of them (React Hook Form collects checkboxes as a list, radios as one).
+ */
+export type ChipGroupProps = ChipGroupOwnProps & Omit<ComponentPropsWithRef<"input">, keyof ChipGroupOwnProps | "type" | "checked" | "defaultChecked">;
+/**
+ * Filter chips in a real `<fieldset>`: each chip is a real checkbox (or, with `multiple={false}`, a radio) lying over
+ * the whole chip, so a click, Space, the arrow keys of a radio group and a plain form submit all work as the browser's
+ * own. A chip that is on shows a check before its words, never colour alone.
+ *
+ * ```tsx
+ * <ChipGroup label="Diet" options={diets} effect={[chipCheck(), chipMerge()]} {...register("diet")} />
+ * ```
+ */
+export declare function ChipGroup(props: ChipGroupProps): import("react").JSX.Element;
+export {};

package/dist/forms/controls/ChipGroup.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { warnOnce } from "../../buttons/runtime/dev.js";
+import { CHIPS_CSS } from "../chips.js";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { EffectSheets } from "./choiceParts.js";
+import { effectList, filled, withUid } from "./shared.js";
+const OPTION = "[data-sx-chip-control]";
+/**
+ * Filter chips in a real `<fieldset>`: each chip is a real checkbox (or, with `multiple={false}`, a radio) lying over
+ * the whole chip, so a click, Space, the arrow keys of a radio group and a plain form submit all work as the browser's
+ * own. A chip that is on shows a check before its words, never colour alone.
+ *
+ * ```tsx
+ * <ChipGroup label="Diet" options={diets} effect={[chipCheck(), chipMerge()]} {...register("diet")} />
+ * ```
+ */
+export function ChipGroup(props) {
+    const { label, description, error, invalid, options, multiple = true, value, defaultValue, onValueChange, effect, unstyled, className, rootClassName, labelClassName, style, id: ownId, name: ownName, ...rest } = props;
+    const effects = effectList(effect);
+    const auto = useId().replace(/[^\w-]/g, "");
+    const idBase = ownId ?? `sx-chips${auto}`;
+    const uid = `sx${auto}`;
+    const ids = fieldIds(idBase);
+    // radios need one name to be one group
+    const name = ownName ?? (multiple ? undefined : idBase);
+    const hasError = filled(error);
+    const isInvalid = hasError || invalid === true;
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description), own: rest["aria-describedby"] });
+    const { "aria-describedby": _own, onChange: ownChange, ...shared } = rest;
+    if (process.env.NODE_ENV !== "production") {
+        for (const e of effects)
+            if (!e.fits.includes("chip"))
+                warnOnce(`the effect ${e.id} is not made for a ChipGroup: it fits ${e.fits.join(", ")}.`);
+        if (!filled(label) && !rest["aria-label"] && !rest["aria-labelledby"])
+            warnOnce("a ChipGroup has no label: give it `label` (its legend).");
+    }
+    // the chips' state is the inputs' own (CSS reads :checked), so a form reset needs nothing from here
+    const controlled = value !== undefined;
+    const root = useRef(null);
+    const read = () => [...(root.current?.querySelectorAll(OPTION) ?? [])].filter((i) => i.checked).map((i) => i.value);
+    const changed = (e) => {
+        ownChange?.(e);
+        if (!onValueChange)
+            return;
+        if (!controlled)
+            return onValueChange(read());
+        const v = e.target.value;
+        onValueChange(!multiple ? [v] : e.target.checked ? [...value.filter((x) => x !== v), v] : value.filter((x) => x !== v));
+    };
+    const vars = { ...withUid(Object.assign({}, ...effects.map((e) => e.vars)), uid), ...style };
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-chips", base: CHIPS_CSS, effects: effects }), _jsxs("fieldset", { ref: root, id: idBase, "data-sx-chips": effects.map((e) => e.id).join(" "), "data-sx-kind": multiple ? "checkbox" : "radio", "data-sx-styled": unstyled ? undefined : "", "aria-describedby": describedBy, className: rootClassName, style: vars, children: [filled(label) ? (_jsx("legend", { "data-sx-chips-legend": "", className: labelClassName, children: label })) : null, filled(description) ? (_jsx("p", { "data-sx-chips-description": "", id: ids.description, children: description })) : null, _jsx("div", { "data-sx-chips-options": "", className: className, children: options.map((o, i) => (_jsxs("label", { "data-sx-chip-option": "", style: { "--sx-chip-i": i }, children: [effects.flatMap((e) => e.layers
+                                    .filter((l) => l.slot === "row")
+                                    .map((l, k) => (_jsx("span", { "data-sx-chip-layer": e.id, "data-sx-chip-part": l.part, "data-sx-chip-keep": l.keep ? "" : undefined, "aria-hidden": true }, `${e.id}-${k}`)))), _jsx("input", { ...shared, type: multiple ? "checkbox" : "radio", name: name, value: o.value, id: `${idBase}-${i}`, "data-sx-chip-control": "", disabled: o.disabled || shared.disabled, ...(controlled ? { checked: value.includes(o.value) } : { defaultChecked: defaultValue?.includes(o.value) }), onChange: changed, "aria-invalid": isInvalid || undefined }), _jsx("span", { "data-sx-chip-check": "", "aria-hidden": true, children: _jsx("svg", { viewBox: "0 0 24 24", focusable: "false", children: _jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5", pathLength: 1 }) }) }), _jsx("span", { "data-sx-chip-text": "", children: o.label })] }, o.value))) }), _jsx("div", { "data-sx-chips-message": "", children: _jsx("p", { "data-sx-chips-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-chips-says": "", children: error }, typeof error === "string" ? error : undefined)) : null }) })] })] }));
+}

package/dist/forms/controls/Combobox.d.ts

@@ -0,0 +1,75 @@
+import { type CSSProperties, type FocusEvent, type ReactNode, type Ref } from "react";
+import type { FormEffect } from "../types.js";
+/** One choice of a Combobox. */
+export interface ComboboxOption {
+    readonly value: string;
+    /** What the option shows: words, or anything with `text` beside it. */
+    readonly label: ReactNode;
+    /** Its words, to filter by and to show in the box once chosen. Needed when `label` is not plain text. */
+    readonly text?: string;
+    readonly disabled?: boolean;
+}
+/** The words a Combobox says, for your language. `{n}` is a number, `{query}` the typed text, `{label}` an option's words. */
+export interface ComboboxLabels {
+    readonly empty?: string;
+    readonly loading?: string;
+    readonly results?: string;
+    readonly create?: string;
+    readonly remove?: string;
+    readonly open?: string;
+}
+export interface ComboboxProps {
+    /** The visible label: a real `<label for>` on the text box. */
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    /** The error message, with `aria-invalid` and a `role="alert"` region. */
+    readonly error?: ReactNode;
+    readonly invalid?: boolean;
+    readonly options: readonly ComboboxOption[];
+    /** Several values, shown as chips; Backspace in the empty box removes the last. */
+    readonly multiple?: boolean;
+    /** The chosen value (a list with `multiple`), when you hold it. `null` or `[]`: nothing. */
+    readonly value?: string | readonly string[] | null;
+    readonly defaultValue?: string | readonly string[];
+    /** Called with the new value (a list with `multiple`): fits React Hook Form's `Controller` as it is. */
+    readonly onChange?: (value: string | string[] | null) => void;
+    readonly onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /** Called as the user types: load matching options here for a search that runs on a server. */
+    readonly onInputChange?: (query: string) => void;
+    /** `false`: show the options as given (yours are already filtered). Default: the words contain the typed text. */
+    readonly filter?: false | ((option: ComboboxOption, query: string) => boolean);
+    /** Typed words that match no option can be added as a value of their own. */
+    readonly creatable?: boolean;
+    /** Options are on their way: the list says so. */
+    readonly loading?: boolean;
+    /** Submitted with a plain form: one hidden input per value. */
+    readonly name?: string;
+    readonly placeholder?: string;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly autoFocus?: boolean;
+    /** The text box: React Hook Form's `field.ref` goes here, so it can focus a wrong field. */
+    readonly ref?: Ref<HTMLInputElement>;
+    readonly id?: string;
+    readonly effect?: FormEffect | readonly FormEffect[];
+    readonly labels?: ComboboxLabels;
+    readonly unstyled?: boolean;
+    /** Goes on the box you see. */
+    readonly className?: string;
+    readonly rootClassName?: string;
+    readonly labelClassName?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Our own combobox: a text box that filters a list of options as you type (the ARIA "combobox with listbox popup"
+ * pattern). The focus stays in the box; ↓ / ↑ move through the list, Enter picks, Esc closes, Alt+↓ opens. `multiple`
+ * shows the picks as chips, `creatable` adds typed words, `loading` covers a search that runs on a server. The list opens
+ * in the top layer, tied to the box by anchor positioning, flipped above when the screen has no room below.
+ *
+ * ```tsx
+ * <Controller name="fruit" control={control} render={({ field }) => (
+ *   <Combobox label="Fruit" options={fruits} effect={[pickerOpen(), listHighlight()]} {...field} />
+ * )} />
+ * ```
+ */
+export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;

package/dist/forms/controls/Combobox.js

@@ -0,0 +1,249 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, } from "react";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { PICKER_BASE_CSS } from "../picker.js";
+import { markMatches } from "../runtime/listMatch.js";
+import { dockSheet, placeByHand } from "../runtime/placePopup.js";
+import { useFlip } from "../runtime/useFlip.js";
+import { EffectSheets, choiceLayers } from "./choiceParts.js";
+import { checkPicker } from "./pickerChecks.js";
+import { effectList, filled, withUid } from "./shared.js";
+const WORDS = {
+    empty: "No results",
+    loading: "Loading…",
+    results: "{n} results",
+    create: "Add “{query}”",
+    remove: "Remove {label}",
+    open: "Show options",
+};
+const textOf = (o) => o.text ?? (typeof o.label === "string" ? o.label : o.value);
+const asList = (v) => (v === null || v === undefined || v === "" ? [] : typeof v === "string" ? [v] : [...v]);
+const contains = (o, query) => textOf(o).toLowerCase().includes(query.trim().toLowerCase());
+/**
+ * Our own combobox: a text box that filters a list of options as you type (the ARIA "combobox with listbox popup"
+ * pattern). The focus stays in the box; ↓ / ↑ move through the list, Enter picks, Esc closes, Alt+↓ opens. `multiple`
+ * shows the picks as chips, `creatable` adds typed words, `loading` covers a search that runs on a server. The list opens
+ * in the top layer, tied to the box by anchor positioning, flipped above when the screen has no room below.
+ *
+ * ```tsx
+ * <Controller name="fruit" control={control} render={({ field }) => (
+ *   <Combobox label="Fruit" options={fruits} effect={[pickerOpen(), listHighlight()]} {...field} />
+ * )} />
+ * ```
+ */
+export function Combobox(props) {
+    const { label, description, error, invalid, options, multiple, value, defaultValue, onChange, onBlur, onInputChange, filter, creatable, loading, name, placeholder, disabled, required, autoFocus, ref, id: ownId, effect, labels, unstyled, className, rootClassName, labelClassName, style, } = props;
+    const effects = effectList(effect);
+    const words = { ...WORDS, ...labels };
+    const auto = useId().replace(/[^\w-]/g, "");
+    const id = ownId ?? `sx-combo${auto}`;
+    const uid = `sx${auto}`;
+    const ids = fieldIds(id);
+    const listId = `${id}-list`;
+    const hasError = filled(error);
+    const isInvalid = hasError || invalid === true;
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description) });
+    if (process.env.NODE_ENV !== "production") {
+        checkPicker({
+            control: "Combobox",
+            effects,
+            labelled: filled(label),
+            count: options.length,
+            wordless: options.filter((o) => typeof o.label !== "string" && o.text === undefined).length,
+        });
+    }
+    const controlled = value !== undefined;
+    const [held, setHeld] = useState(() => asList(defaultValue));
+    const chosen = controlled ? asList(value) : held;
+    const [made, setMade] = useState([]);
+    const all = [...options, ...made.filter((m) => !options.some((o) => o.value === m.value))];
+    const byValue = (v) => all.find((o) => o.value === v);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    /** Single mode: the box shows the typed words while typing, the chosen option's words otherwise. */
+    const [typing, setTyping] = useState(false);
+    const [active, setActive] = useState(-1);
+    const [leaving, setLeaving] = useState([]);
+    const [said, setSaid] = useState("");
+    const keep = typing || multiple;
+    const shown = filter === false || !keep || !query.trim() ? all : all.filter((o) => (filter ? filter(o, query) : contains(o, query)));
+    const fresh = creatable && query.trim() !== "" && !all.some((o) => textOf(o).toLowerCase() === query.trim().toLowerCase());
+    const rows = fresh ? [...shown, { value: query.trim(), label: words.create.replace("{query}", query.trim()), text: query.trim() }] : shown;
+    const boxText = multiple || typing ? query : chosen[0] !== undefined ? (byValue(chosen[0]) ? textOf(byValue(chosen[0])) : chosen[0]) : "";
+    const root = useRef(null);
+    const box = useRef(null);
+    const popup = useRef(null);
+    const list = useRef(null);
+    const input = useRef(null);
+    const marks = useRef([]);
+    const optionId = (i) => `${id}-option-${i}`;
+    const flips = effects.some((e) => e.needs.flip);
+    useFlip(box, flips, "[data-sx-chip]");
+    const set = (next) => {
+        if (!controlled)
+            setHeld(next);
+        onChange?.(multiple ? next : (next[0] ?? null));
+    };
+    const remove = (v) => {
+        const gone = byValue(v);
+        if (flips && gone)
+            setLeaving((l) => [...l, gone]);
+        set(chosen.filter((x) => x !== v));
+    };
+    const pick = (i) => {
+        const row = rows[i];
+        if (!row || row.disabled)
+            return;
+        if (fresh && i === rows.length - 1)
+            setMade((m) => [...m, { value: row.value, label: row.value, text: row.value }]);
+        if (multiple) {
+            if (chosen.includes(row.value))
+                remove(row.value);
+            else
+                set([...chosen, row.value]);
+            setQuery("");
+            onInputChange?.("");
+        }
+        else {
+            set([row.value]);
+            setOpen(false);
+            setTyping(false);
+            setQuery("");
+        }
+    };
+    const openAt = (where) => {
+        setOpen(true);
+        const at = where === "none" ? -1 : where === "last" ? rows.length - 1 : Math.max(0, rows.findIndex((r) => chosen.includes(r.value)));
+        setActive(rows.length === 0 ? -1 : at);
+    };
+    const keys = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            if (!open)
+                openAt(e.altKey ? "none" : "first");
+            else
+                setActive((a) => Math.min(rows.length - 1, a + 1));
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            if (!open)
+                openAt("last");
+            else
+                setActive((a) => Math.max(0, a - 1));
+        }
+        else if (e.key === "Enter") {
+            if (open && active >= 0) {
+                e.preventDefault();
+                pick(active);
+            }
+        }
+        else if (e.key === "Escape") {
+            if (open) {
+                e.preventDefault();
+                setOpen(false);
+            }
+            else if (typing || query) {
+                setTyping(false);
+                setQuery("");
+            }
+        }
+        else if (e.key === "Backspace" && multiple && query === "" && chosen.length > 0) {
+            remove(chosen[chosen.length - 1]);
+        }
+        else if (e.key === "Tab") {
+            setOpen(false);
+        }
+    };
+    const typed = (e) => {
+        const next = e.target.value;
+        setQuery(next);
+        setTyping(true);
+        setOpen(true);
+        setActive(next.trim() ? 0 : -1);
+        onInputChange?.(next);
+    };
+    const left = (e) => {
+        setOpen(false);
+        setTyping(false);
+        if (!multiple)
+            setQuery("");
+        onBlur?.(e);
+    };
+    // the popup: shown and hidden as the top layer's own, placed by hand only where anchor positioning is missing
+    const docks = effects.some((e) => e.needs.sheet);
+    useEffect(() => {
+        const el = popup.current;
+        if (!el || !box.current || typeof el.showPopover !== "function")
+            return;
+        if (open && !el.matches(":popover-open"))
+            el.showPopover();
+        if (!open && el.matches(":popover-open"))
+            el.hidePopover();
+        if (!open)
+            return;
+        const stops = [placeByHand(el, box.current), docks ? dockSheet(el, box.current) : () => { }];
+        return () => stops.forEach((stop) => stop());
+    }, [open, docks]);
+    // keep the active option in view
+    useEffect(() => {
+        if (open && active >= 0)
+            document.getElementById(optionId(active))?.scrollIntoView({ block: "nearest" });
+    }, [open, active]); // eslint-disable-line react-hooks/exhaustive-deps
+    // mark the typed words in the options (listMatch)
+    const marking = effects.some((e) => e.needs.match);
+    useEffect(() => {
+        if (!marking)
+            return;
+        marks.current = markMatches(list.current, open && keep ? query : "", marks.current);
+    });
+    useEffect(() => () => void markMatches(null, "", marks.current), []);
+    // read out how many results there are once the typing stops
+    useEffect(() => {
+        if (!open || !keep || !query.trim())
+            return;
+        const t = setTimeout(() => setSaid(loading ? words.loading : words.results.replace("{n}", String(shown.length))), 500);
+        return () => clearTimeout(t);
+    }, [open, keep, query, shown.length, loading, words.loading, words.results]);
+    // chips leaving: gone once their animation ends (at once when nothing animates them)
+    useEffect(() => {
+        for (const chip of box.current?.querySelectorAll("[data-sx-leaving]") ?? []) {
+            const key = chip.dataset.key;
+            const drop = () => setLeaving((l) => l.filter((o) => o.value !== key));
+            if (getComputedStyle(chip).animationName === "none")
+                drop();
+            else
+                chip.addEventListener("animationend", drop, { once: true });
+        }
+    }, [leaving]);
+    const setRef = (el) => {
+        input.current = el;
+        if (typeof ref === "function")
+            ref(el);
+        else if (ref)
+            ref.current = el;
+    };
+    const vars = {
+        "--sx-picker-anchor": `--${uid}-box`,
+        ...withUid(Object.assign({}, ...effects.map((e) => e.vars)), uid),
+        ...style,
+    };
+    const chips = multiple
+        ? [...chosen.map((v) => byValue(v) ?? { value: v, label: v }), ...leaving.filter((o) => !chosen.includes(o.value))]
+        : [];
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-picker", base: PICKER_BASE_CSS, effects: effects }), _jsxs("div", { ref: root, "data-sx-picker": effects.map((e) => e.id).join(" "), "data-sx-kind": "combobox", "data-sx-styled": unstyled ? undefined : "", "data-sx-open": open ? "" : undefined, className: rootClassName, style: vars, children: [filled(label) ? (_jsx("label", { "data-sx-picker-label": "", id: ids.label, htmlFor: id, className: labelClassName, children: label })) : null, _jsxs("div", { ref: box, "data-sx-picker-box": "", className: className, style: { anchorName: `--${uid}-box` }, children: [chips.map((o) => {
+                                const gone = !chosen.includes(o.value);
+                                return (_jsxs("span", { "data-key": o.value, "data-sx-chip": "", "data-sx-leaving": gone ? "" : undefined, children: [textOf(o), _jsx("button", { type: "button", "aria-label": words.remove.replace("{label}", textOf(o)), tabIndex: gone ? -1 : undefined, disabled: disabled, onClick: () => {
+                                                remove(o.value);
+                                                input.current?.focus();
+                                            }, children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, focusable: "false", children: _jsx("path", { d: "m8 8 8 8M16 8l-8 8" }) }) })] }, o.value));
+                            }), _jsx("input", { ref: setRef, id: id, type: "text", role: "combobox", "data-sx-picker-control": "", autoComplete: "off", value: boxText, placeholder: chips.length > 0 ? undefined : placeholder, disabled: disabled, autoFocus: autoFocus, "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && active >= 0 && rows[active] ? optionId(active) : undefined, "aria-invalid": isInvalid || undefined, "aria-required": required || undefined, "aria-describedby": describedBy, onChange: typed, onKeyDown: keys, onBlur: left, onClick: () => (open ? undefined : openAt("first")) }), _jsx("button", { type: "button", "data-sx-picker-arrow": "", tabIndex: -1, "aria-label": words.open, "aria-expanded": open, "aria-controls": listId, disabled: disabled, onPointerDown: (e) => e.preventDefault(), onClick: () => {
+                                    if (open)
+                                        setOpen(false);
+                                    else
+                                        openAt("first");
+                                    input.current?.focus();
+                                }, children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, focusable: "false", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }) })] }), _jsxs("div", { ref: popup, popover: "manual", "data-sx-picker-popup": "", children: [choiceLayers(effects, "list", uid), _jsxs("ul", { ref: list, id: listId, role: "listbox", "data-sx-picker-list": "", "aria-labelledby": filled(label) ? ids.label : undefined, "aria-multiselectable": multiple || undefined, "aria-busy": loading || undefined, children: [rows.map((o, i) => (_jsxs("li", { id: optionId(i), role: "option", "data-sx-option": "", "data-active": i === active ? "" : undefined, "aria-selected": chosen.includes(o.value) && !(fresh && i === rows.length - 1), "aria-disabled": o.disabled || undefined, style: { "--sx-option-i": i }, onPointerDown: (e) => e.preventDefault(), onPointerMove: () => i !== active && setActive(i), onClick: () => pick(i), children: [_jsx("span", { "data-sx-option-text": "", children: o.label }), _jsx("span", { "data-sx-option-check": "", "aria-hidden": true, children: _jsx("svg", { viewBox: "0 0 24 24", focusable: "false", children: _jsx("path", { d: "m5.5 12.5 4.25 4.25L18.5 7.5", pathLength: 1 }) }) })] }, `${o.value}-${i === rows.length - 1 && fresh ? "new" : "has"}`))), rows.length === 0 ? (_jsx("li", { "data-sx-option-note": "", role: "presentation", children: loading ? words.loading : words.empty })) : null] })] }), name !== undefined
+                        ? (chosen.length > 0 ? chosen : multiple ? [] : [""]).map((v, i) => _jsx("input", { type: "hidden", name: name, value: v }, `${v}-${i}`))
+                        : null, filled(description) ? (_jsx("p", { "data-sx-picker-description": "", id: ids.description, children: description })) : null, _jsx("span", { "data-sx-picker-sr": "", role: "status", children: said }), _jsx("div", { "data-sx-picker-message": "", children: _jsx("p", { "data-sx-picker-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-picker-says": "", children: error }, typeof error === "string" ? error : undefined)) : null }) })] })] }));
+}