@enigmax/primitives 0.22.0 → 0.23.0

package/dist/chunk-VKL3DEIQ.js

@@ -0,0 +1,804 @@
+import { createSelect } from './chunk-NONGREXC.js';
+import { Slot } from './chunk-HS3X3XCW.js';
+import { groupRows } from './chunk-DTWZDONY.js';
+import { shortenQuery } from './chunk-4ZPMP47J.js';
+import { createContext, useContext, useLayoutEffect, useId, useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/react/select/styles.ts
+var SELECT_STYLES = `
+:root {
+    --enigma-select-bg: #171717;
+    --enigma-select-border: #404040;
+    --enigma-select-border-focus: #a3a3a3;
+    --enigma-select-text: #f5f5f5;
+    --enigma-select-muted: #a3a3a3;
+    --enigma-select-radius: 0.5rem;
+    --enigma-select-font-size: 0.875rem;
+    --enigma-select-padding: 0.5rem 0.75rem;
+
+    --enigma-select-panel-bg: #1c1c1c;
+    --enigma-select-panel-border: #333333;
+    --enigma-select-panel-radius: 0.625rem;
+    --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --enigma-select-panel-width: 100%;
+    --enigma-select-list-height: 15rem;
+
+    --enigma-select-active-bg: #2a2a2a;
+    --enigma-select-accent: #fbbf24;
+    --enigma-select-tag-bg: #2a2a2a;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-select-bg: #ffffff;
+        --enigma-select-border: #d4d4d4;
+        --enigma-select-border-focus: #737373;
+        --enigma-select-text: #171717;
+        --enigma-select-muted: #737373;
+        --enigma-select-panel-bg: #ffffff;
+        --enigma-select-panel-border: #e5e5e5;
+        --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        --enigma-select-active-bg: #f5f5f5;
+        --enigma-select-accent: #b45309;
+        --enigma-select-tag-bg: #f0f0f0;
+    }
+}
+
+[data-enigma-select-root] { position: relative; display: inline-block; min-width: 0; }
+
+[data-enigma-select-trigger] {
+    display: flex; align-items: center; gap: 0.5rem;
+    width: 100%; min-width: 0; box-sizing: border-box;
+    padding: var(--enigma-select-padding);
+    font: inherit; font-size: var(--enigma-select-font-size); text-align: left;
+    color: var(--enigma-select-text); background: var(--enigma-select-bg);
+    border: 1px solid var(--enigma-select-border); border-radius: var(--enigma-select-radius);
+    cursor: pointer;
+}
+[data-enigma-select-trigger]:focus-visible { outline: 2px solid var(--enigma-select-border-focus); outline-offset: 1px; }
+[data-enigma-select-trigger][data-open] { border-color: var(--enigma-select-border-focus); }
+[data-enigma-select-trigger]:disabled,
+[data-enigma-select-trigger][aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+/* Nothing to choose, or nothing yet: the control reads as unavailable and the caret fades,
+   because a caret at full strength promises a panel that will never open. Not the disabled
+   look, which would say the field is off rather than that the list is empty. */
+[data-enigma-select-trigger][data-empty],
+[data-enigma-select-trigger][data-loading] { opacity: 1; cursor: default; }
+[data-enigma-select-trigger][data-empty] [data-enigma-select-caret],
+[data-enigma-select-trigger][data-loading] [data-enigma-select-caret] { opacity: 0.25; }
+
+/* The indicator: one slot, holding the caret and the \xD7 stacked in the same cell. Side by
+   side they would be two targets a pixel apart - one of which throws away your choice - and
+   the pair would change the trigger's width the moment a value appeared. */
+[data-enigma-select-indicator] {
+    display: grid; place-items: center; flex: none;
+    margin-left: auto; width: 1rem; height: 1rem;
+}
+[data-enigma-select-indicator] > * { grid-area: 1 / 1; }
+
+/* The caret, drawn rather than loaded: an icon font or an SVG file is a request, and this
+   is two borders. */
+[data-enigma-select-caret] {
+    width: 0.4rem; height: 0.4rem;
+    /* Decoration, and it must not be the hit target: the rotation gives it a stacking
+       context, which paints it OVER the \xD7 sharing its cell and swallows the click. */
+    pointer-events: none;
+    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
+    transform: translateY(-0.1rem) rotate(45deg);
+    opacity: 0.6; transition: transform 120ms ease-out, opacity 120ms ease-out;
+}
+[data-enigma-select-trigger][data-open] [data-enigma-select-caret] { transform: translateY(0.1rem) rotate(225deg); }
+
+[data-enigma-select-value] {
+    display: flex; align-items: center; gap: 0.375rem;
+    /* min-width: 0 is what lets the ellipsis happen: a flex item's default minimum is its
+       content, so without it a long label pushes the caret out of the button. */
+    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+[data-enigma-select-value][data-placeholder] { color: var(--enigma-select-muted); }
+[data-enigma-select-value][data-tags] { flex-wrap: wrap; white-space: normal; }
+
+[data-enigma-select-tag] {
+    display: inline-flex; align-items: center; gap: 0.25rem;
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    font-size: 0.8125rem; line-height: 1.4;
+    background: var(--enigma-select-tag-bg); border-radius: 999px;
+}
+[data-enigma-select-tag][data-rest] { padding: 0.125rem 0.5rem; color: var(--enigma-select-muted); }
+
+[data-enigma-select-tag-remove] {
+    display: grid; place-items: center;
+    width: 1rem; height: 1rem; border-radius: 999px;
+    color: var(--enigma-select-muted); font-size: 0.875rem; line-height: 1; cursor: pointer;
+}
+[data-enigma-select-tag-remove]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }
+
+/* The \xD7, in the caret's place and only while the control is under the pointer or holds
+   focus. ":focus" and not ":focus-visible": a tap focuses the button, and on a touch screen
+   there is no hover to reveal it with. */
+[data-enigma-select-clear] {
+    display: grid; place-items: center;
+    width: 1rem; height: 1rem; border-radius: 999px;
+    color: var(--enigma-select-muted); font-size: 0.875rem; line-height: 1; cursor: pointer;
+    opacity: 0; pointer-events: none; transition: opacity 120ms ease-out;
+}
+[data-enigma-select-trigger]:hover [data-enigma-select-clear],
+[data-enigma-select-trigger]:focus [data-enigma-select-clear] { opacity: 1; pointer-events: auto; }
+/* Scoped to a trigger that HAS a \xD7 - otherwise hovering a select with nothing to clear
+   would hide its caret and leave an empty slot. */
+[data-enigma-select-trigger][data-clearable]:hover [data-enigma-select-caret],
+[data-enigma-select-trigger][data-clearable]:focus [data-enigma-select-caret] { opacity: 0; }
+[data-enigma-select-clear]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }
+
+[data-enigma-select-content] {
+    position: absolute; z-index: 50;
+    top: calc(100% + 0.25rem); left: 0;
+    min-width: var(--enigma-select-panel-width); box-sizing: border-box;
+    padding: 0.25rem;
+    background: var(--enigma-select-panel-bg);
+    border: 1px solid var(--enigma-select-panel-border);
+    border-radius: var(--enigma-select-panel-radius);
+    box-shadow: var(--enigma-select-panel-shadow);
+    animation: enigma-select-in 120ms ease-out;
+    /* A bound, because the content is arbitrary: a long option label or a query typed into
+       the filter would otherwise widen the panel with it. min-width still wins for a
+       trigger wider than this, which is what it is for. */
+    max-width: min(28rem, calc(100vw - 2rem));
+}
+/* Opening upwards is not a variant, it is the same panel measured against the window: near
+   the bottom of the screen the list would otherwise be unreachable. */
+[data-enigma-select-content][data-side="top"] { top: auto; bottom: calc(100% + 0.25rem); }
+[data-enigma-select-content][data-state="closed"] { animation: enigma-select-out 120ms ease-in forwards; pointer-events: none; }
+
+@keyframes enigma-select-in {
+    from { opacity: 0; transform: translateY(-0.25rem); }
+    to { opacity: 1; transform: none; }
+}
+@keyframes enigma-select-out {
+    from { opacity: 1; }
+    to { opacity: 0; transform: translateY(-0.125rem); }
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-select-content],
+    [data-enigma-select-content][data-state="closed"] { animation: none; }
+    [data-enigma-select-trigger]::after { transition: none; }
+}
+
+[data-enigma-select-search] {
+    width: 100%; box-sizing: border-box;
+    padding: 0.375rem 0.5rem 0.5rem;
+    font: inherit; font-size: var(--enigma-select-font-size);
+    color: var(--enigma-select-text); background: transparent;
+    border: 0; border-bottom: 1px solid var(--enigma-select-panel-border);
+    outline: none;
+}
+/* WebKit's own clear cross, gone: it is drawn on no other engine, so leaving it in gives
+   half the visitors a control the other half never sees. */
+[data-enigma-select-search]::-webkit-search-cancel-button,
+[data-enigma-select-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
+
+[data-enigma-select-list] {
+    max-height: var(--enigma-select-list-height);
+    margin-top: 0.25rem;
+    overflow-y: auto; overscroll-behavior: contain;
+}
+
+[data-enigma-select-group-label] {
+    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;
+    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
+    color: var(--enigma-select-muted);
+}
+
+[data-enigma-select-option] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.4375rem 0.5rem; border-radius: 0.375rem;
+    font-size: var(--enigma-select-font-size); color: var(--enigma-select-text);
+    cursor: pointer;
+}
+[data-enigma-select-option][data-active] { background: var(--enigma-select-active-bg); }
+[data-enigma-select-option][data-disabled] { opacity: 0.45; cursor: not-allowed; }
+
+[data-enigma-select-option-text] { display: grid; min-width: 0; }
+[data-enigma-select-option-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+[data-enigma-select-option-description] {
+    font-size: 0.75rem; color: var(--enigma-select-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-select-icon] { display: inline-flex; align-items: center; flex: none; max-height: 1.25em; line-height: 0; }
+
+/* The check, drawn with two borders and shown only where it belongs. Reserved space either
+   way, so choosing a row does not shift the label under the pointer. */
+[data-enigma-select-check] {
+    flex: none; margin-left: auto;
+    width: 0.35rem; height: 0.6rem;
+    border-right: 2px solid var(--enigma-select-accent); border-bottom: 2px solid var(--enigma-select-accent);
+    transform: rotate(45deg) translate(-0.05rem, -0.05rem);
+    opacity: 0;
+}
+[data-enigma-select-option][data-selected] [data-enigma-select-check] { opacity: 1; }
+
+/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */
+[data-enigma-select-more] { height: 1px; }
+
+[data-enigma-select-empty] {
+    margin: 0; padding: 0.75rem 0.5rem;
+    font-size: var(--enigma-select-font-size); color: var(--enigma-select-muted);
+    /* The quoted query is cut in the text as well, but a pasted string with no spaces has
+       no break opportunity at all - so this is what stops it stretching the panel. */
+    overflow-wrap: anywhere;
+}
+`;
+var SelectContext = createContext(null);
+function useSelectContext(part) {
+  const value = useContext(SelectContext);
+  if (!value) throw new Error(`<${part}> must be rendered inside <Select.Root>.`);
+  return value;
+}
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  if (document.querySelector("[data-enigma-select-styles]")) return;
+  const element = document.createElement("style");
+  element.setAttribute("data-enigma-select-styles", "");
+  element.textContent = SELECT_STYLES;
+  document.head.prepend(element);
+}
+var MOVE_KEYS = {
+  ArrowDown: "ArrowDown",
+  ArrowUp: "ArrowUp",
+  Home: "Home",
+  End: "End",
+  PageDown: "PageDown",
+  PageUp: "PageUp"
+};
+var SEARCHABLE_FROM = 8;
+function SelectRoot(props) {
+  const {
+    options,
+    multiple = false,
+    searchable = "auto",
+    disabled = false,
+    name,
+    required,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    loading = false,
+    emptyLabel = "No options",
+    loadingLabel = "Loading...",
+    styles = true,
+    clearable,
+    className,
+    style,
+    closeOnSelect,
+    fuse,
+    fuseOptions,
+    matcher,
+    searchKeys,
+    children
+  } = props;
+  useLayoutEffect(() => {
+    if (styles) injectStyles();
+  }, [styles]);
+  const isSearchable = searchable === "auto" ? options.length >= SEARCHABLE_FROM : searchable;
+  const isEmpty = options.length === 0 && !loading;
+  const controlledValue = props.value === void 0 ? void 0 : props.value ?? (multiple ? [] : null);
+  const id = useId();
+  const ids = useMemo(() => ({
+    trigger: `${id}-trigger`,
+    list: `${id}-list`,
+    field: `${id}-field`
+  }), [id]);
+  const triggerRef = useRef(null);
+  const fieldRef = useRef(null);
+  const rootRef = useRef(null);
+  const latest = useRef(props);
+  latest.current = props;
+  const instance = useMemo(() => createSelect({
+    options,
+    multiple,
+    searchable: isSearchable,
+    closeOnSelect,
+    fuse,
+    fuseOptions,
+    matcher,
+    searchKeys,
+    value: props.defaultValue ?? controlledValue ?? (multiple ? [] : null),
+    onValueChange: (next, chosen) => {
+      const current = latest.current;
+      if (current.multiple) current.onValueChange?.(next, chosen);
+      else current.onValueChange?.(next, chosen[0] ?? null);
+    }
+    // Built once: rebuilding it would drop the open panel and the highlight on every
+    // render. Every option below is pushed in through update().
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+  const [state, setState] = useState(() => instance.state);
+  useEffect(() => {
+    const unsubscribe = instance.subscribe(setState);
+    setState(instance.state);
+    return () => {
+      unsubscribe();
+      instance.destroy();
+    };
+  }, [instance]);
+  const signature = useMemo(() => JSON.stringify(options.map((option) => [option.value, option.label, option.description, option.group, option.disabled, option.keywords])), [options]);
+  const filterSignature = JSON.stringify([searchKeys ?? null, fuseOptions ?? null]);
+  const currentOptions = useRef(options);
+  currentOptions.current = options;
+  const currentFilter = useRef({ fuseOptions, searchKeys });
+  currentFilter.current = { fuseOptions, searchKeys };
+  useEffect(() => {
+    const { fuseOptions: currentFuseOptions, searchKeys: currentKeys } = currentFilter.current;
+    instance.update({
+      options: currentOptions.current,
+      multiple,
+      searchable: isSearchable,
+      closeOnSelect,
+      fuse,
+      matcher,
+      fuseOptions: currentFuseOptions,
+      searchKeys: currentKeys
+    });
+  }, [instance, signature, filterSignature, multiple, isSearchable, closeOnSelect, fuse, matcher]);
+  useEffect(() => {
+    if (controlledValue === void 0) return;
+    const wanted = (controlledValue === null ? [] : Array.isArray(controlledValue) ? controlledValue : [controlledValue]).filter((entry) => entry !== "");
+    const current = instance.state.value;
+    if (current.length === wanted.length && current.every((entry, index) => entry === wanted[index])) return;
+    instance.update({ value: [...wanted] });
+  });
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = useCallback((next) => {
+    if ((disabled || isEmpty || loading) && next) return;
+    if (openProp === void 0) setUncontrolledOpen(next);
+    instance.setOpen(next);
+    onOpenChange?.(next);
+  }, [instance, disabled, isEmpty, loading, openProp, onOpenChange]);
+  useEffect(() => {
+    instance.setOpen(open);
+  }, [instance, open]);
+  const wasOpen = useRef(state.open);
+  useEffect(() => {
+    const closedItself = wasOpen.current && !state.open;
+    wasOpen.current = state.open;
+    if (!closedItself || !open) return;
+    const held = rootRef.current?.contains(document.activeElement);
+    setOpen(false);
+    if (held) triggerRef.current?.focus();
+  }, [state.open, open, setOpen]);
+  const close = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, [setOpen]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (rootRef.current?.contains(event.target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, setOpen]);
+  const onListKeyDown = useCallback((event) => {
+    const move = MOVE_KEYS[event.key];
+    if (move) {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      instance.move(move);
+      return;
+    }
+    if (event.key === "Enter") {
+      if (!open) {
+        event.preventDefault();
+        setOpen(true);
+        return;
+      }
+      event.preventDefault();
+      instance.selectActive();
+      return;
+    }
+    if (event.key === "Escape") {
+      if (!open) return;
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.key === "Tab" && open) {
+      setOpen(false);
+      return;
+    }
+    if ((event.key === "Backspace" || event.key === "Delete") && event.currentTarget === triggerRef.current) {
+      const chosen = instance.state.value;
+      if (chosen.length === 0) return;
+      event.preventDefault();
+      if (instance.state.multiple) instance.remove(chosen[chosen.length - 1]);
+      else instance.clear();
+      return;
+    }
+    if (event.key === " " && event.currentTarget === triggerRef.current) {
+      event.preventDefault();
+      if (open) instance.selectActive();
+      else setOpen(true);
+      return;
+    }
+    if (!fieldRef.current && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      if (!open) setOpen(true);
+      instance.typeahead(event.key);
+    }
+  }, [instance, open, setOpen, close]);
+  const context = useMemo(() => ({
+    instance,
+    state,
+    setOpen,
+    disabled,
+    clearable: clearable ?? multiple,
+    searchable: isSearchable,
+    empty: isEmpty,
+    loading,
+    emptyLabel,
+    loadingLabel,
+    ids,
+    optionId: (index) => `${id}-option-${index}`,
+    triggerRef,
+    fieldRef,
+    close,
+    onListKeyDown
+  }), [instance, state, setOpen, disabled, clearable, multiple, isSearchable, isEmpty, loading, emptyLabel, loadingLabel, ids, id, close, onListKeyDown]);
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className,
+      style,
+      "data-enigma-select-root": "",
+      "data-open": open ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-empty": isEmpty ? "" : void 0,
+      "data-loading": loading ? "" : void 0,
+      "data-multiple": multiple ? "" : void 0,
+      children: [
+        children,
+        name && state.value.map((entry) => /* @__PURE__ */ jsx("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: entry }, entry)),
+        name && state.value.length === 0 && required && // Required with nothing chosen: a field the browser can refuse to
+        // submit, kept out of the tab order and off the screen readers.
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            tabIndex: -1,
+            required: true,
+            "aria-hidden": "true",
+            "data-enigma-select-validity": "",
+            style: { position: "absolute", width: 0, height: 0, padding: 0, border: 0, opacity: 0, pointerEvents: "none" },
+            value: "",
+            onChange: () => {
+            },
+            onFocus: () => triggerRef.current?.focus()
+          }
+        )
+      ]
+    }
+  ) });
+}
+function SelectTrigger({ asChild = false, indicator = true, children, onClick, onKeyDown, ...props }) {
+  const select = useSelectContext("Select.Trigger");
+  const Tag = asChild ? Slot : "button";
+  const active = select.state.active;
+  const showClear = select.clearable && select.state.value.length > 0 && !select.disabled;
+  const unavailable = select.disabled || select.empty || select.loading;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...props,
+      ref: select.triggerRef,
+      id: select.ids.trigger,
+      type: asChild ? void 0 : "button",
+      role: select.searchable ? void 0 : "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": select.state.open,
+      "aria-controls": select.state.open ? select.ids.list : void 0,
+      "aria-activedescendant": !select.searchable && select.state.open && active >= 0 ? select.optionId(active) : void 0,
+      "aria-disabled": unavailable || void 0,
+      "aria-busy": select.loading || void 0,
+      disabled: asChild ? void 0 : select.disabled,
+      "data-enigma-select-trigger": "",
+      "data-open": select.state.open ? "" : void 0,
+      "data-empty": select.empty ? "" : void 0,
+      "data-loading": select.loading ? "" : void 0,
+      "data-placeholder": select.state.value.length === 0 ? "" : void 0,
+      "data-clearable": showClear ? "" : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || unavailable) return;
+        select.setOpen(!select.state.open);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) select.onListKeyDown(event);
+      },
+      children: [
+        children,
+        !asChild && indicator && /**
+         * One slot, two glyphs, stacked.
+         *
+         * The × and the caret occupy the SAME cell and swap on hover, the way a
+         * select with a clear button is normally drawn: side by side they are two
+         * targets a pixel apart, one of which dismisses your choice, and the pair
+         * changes the trigger's width the moment a value appears.
+         */
+        /* @__PURE__ */ jsxs("span", { "data-enigma-select-indicator": "", children: [
+          /* @__PURE__ */ jsx("span", { "data-enigma-select-caret": "", "aria-hidden": "true" }),
+          showClear && // A span with a button's role: this is inside the trigger button,
+          // and a button inside a button is markup the browser unnests -
+          // which drops the handler with it. Backspace does the same thing
+          // from the keyboard, since it cannot be a tab stop of its own.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "button",
+              tabIndex: -1,
+              "aria-label": "Clear selection",
+              "data-enigma-select-clear": "",
+              onPointerDown: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                select.instance.clear();
+              },
+              children: "\xD7"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function SelectValue({ placeholder = "Select", tags, maxTags = 3, children, ...props }) {
+  const select = useSelectContext("Select.Value");
+  const selected = select.state.selected;
+  const showTags = tags ?? select.state.multiple;
+  if (select.loading) return /* @__PURE__ */ jsx("span", { ...props, "data-enigma-select-value": "", "data-placeholder": "", "data-loading": "", children: select.loadingLabel });
+  if (select.empty) return /* @__PURE__ */ jsx("span", { ...props, "data-enigma-select-value": "", "data-placeholder": "", "data-empty": "", children: select.emptyLabel });
+  if (typeof children === "function") return /* @__PURE__ */ jsx("span", { ...props, "data-enigma-select-value": "", children: children(selected) });
+  if (children) return /* @__PURE__ */ jsx("span", { ...props, "data-enigma-select-value": "", children });
+  if (selected.length === 0) {
+    return /* @__PURE__ */ jsx("span", { ...props, "data-enigma-select-value": "", "data-placeholder": "", children: placeholder });
+  }
+  if (!showTags) {
+    const [first] = selected;
+    return /* @__PURE__ */ jsxs("span", { ...props, "data-enigma-select-value": "", children: [
+      first.icon ? /* @__PURE__ */ jsx("span", { "data-enigma-select-icon": "", children: first.icon }) : null,
+      selected.length > 1 ? `${first.label} +${selected.length - 1}` : first.label
+    ] });
+  }
+  const shown = selected.slice(0, maxTags);
+  const rest = selected.length - shown.length;
+  return /* @__PURE__ */ jsxs("span", { ...props, "data-enigma-select-value": "", "data-tags": "", children: [
+    shown.map((option) => /* @__PURE__ */ jsxs("span", { "data-enigma-select-tag": "", children: [
+      option.icon ? /* @__PURE__ */ jsx("span", { "data-enigma-select-icon": "", children: option.icon }) : null,
+      option.label,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "button",
+          tabIndex: -1,
+          "aria-label": `Remove ${option.label}`,
+          "data-enigma-select-tag-remove": "",
+          onPointerDown: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            select.instance.remove(option.value);
+          },
+          children: "\xD7"
+        }
+      )
+    ] }, option.value)),
+    rest > 0 && /* @__PURE__ */ jsxs("span", { "data-enigma-select-tag": "", "data-rest": "", children: [
+      "+",
+      rest
+    ] })
+  ] });
+}
+function SelectContent({ closeDuration = 120, children, ...props }) {
+  const select = useSelectContext("Select.Content");
+  const ref = useRef(null);
+  const [mounted, setMounted] = useState(select.state.open);
+  const [side, setSide] = useState("bottom");
+  useEffect(() => {
+    if (select.state.open) {
+      setMounted(true);
+      return;
+    }
+    const timer = setTimeout(() => setMounted(false), closeDuration);
+    return () => clearTimeout(timer);
+  }, [select.state.open, closeDuration]);
+  useLayoutEffect(() => {
+    if (!select.state.open || !ref.current) return;
+    const trigger = select.triggerRef.current?.getBoundingClientRect();
+    if (!trigger) return;
+    const height = ref.current.offsetHeight;
+    const below = window.innerHeight - trigger.bottom;
+    setSide(below < height && trigger.top > below ? "top" : "bottom");
+  }, [select.state.open, select.state.visible.length, select.triggerRef]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      "data-enigma-select-content": "",
+      "data-state": select.state.open ? "open" : "closed",
+      "data-side": side,
+      onKeyDown: (event) => {
+        props.onKeyDown?.(event);
+        if (!event.defaultPrevented) select.onListKeyDown(event);
+      },
+      children
+    }
+  );
+}
+function SelectSearch({ placeholder = "Search", onKeyDown, ...props }) {
+  const select = useSelectContext("Select.Search");
+  const { instance, state, ids, fieldRef } = select;
+  useEffect(() => {
+    if (state.open) fieldRef.current?.focus();
+  }, [state.open, fieldRef]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ref: fieldRef,
+      id: ids.field,
+      type: "search",
+      role: "combobox",
+      "aria-expanded": state.open,
+      "aria-controls": ids.list,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": state.active >= 0 ? select.optionId(state.active) : void 0,
+      "aria-label": props["aria-label"] ?? placeholder,
+      autoComplete: "off",
+      spellCheck: false,
+      placeholder,
+      "data-enigma-select-search": "",
+      value: state.query,
+      onChange: (event) => instance.setQuery(event.target.value),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) select.onListKeyDown(event);
+      }
+    }
+  );
+}
+var OVERSCAN = 10;
+function SelectList({ children, empty, chunk = 40, ...props }) {
+  const select = useSelectContext("Select.List");
+  const { state } = select;
+  const sentinel = useRef(null);
+  const [limit, setLimit] = useState(chunk);
+  const shown = Math.min(state.visible.length, Math.max(limit, state.active + 1 + OVERSCAN));
+  const visible = useMemo(() => state.visible.slice(0, shown), [state.visible, shown]);
+  const rest = state.visible.length - shown;
+  useEffect(() => {
+    setLimit(chunk);
+  }, [state.query, chunk]);
+  useEffect(() => {
+    const target = sentinel.current;
+    if (!target) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setLimit(Number.POSITIVE_INFINITY);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) setLimit((current) => current + chunk);
+    }, { root: target.parentElement, rootMargin: "120px" });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [chunk, rest]);
+  const groups = useMemo(
+    () => groupRows(visible, (option) => option.group ?? ""),
+    [visible]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      id: select.ids.list,
+      role: "listbox",
+      "aria-multiselectable": state.multiple || void 0,
+      "aria-labelledby": select.ids.trigger,
+      "data-enigma-select-list": "",
+      children: [
+        state.visible.length === 0 ? empty ?? /* @__PURE__ */ jsx("p", { "data-enigma-select-empty": "", children: state.query.trim() ? `Nothing matches "${shortenQuery(state.query)}".` : "Nothing to choose." }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.label || void 0, "data-enigma-select-group": "", children: [
+          group.label && /* @__PURE__ */ jsx("p", { "data-enigma-select-group-label": "", "aria-hidden": "true", children: group.label }),
+          group.rows.map(({ row, position }) => /* @__PURE__ */ jsx(SelectOptionRow, { option: row, index: position, children: children?.(row, position) }, row.value))
+        ] }, group.label)),
+        rest > 0 && // The end of what is rendered. Reaching it renders the next chunk, so the
+        // list appears endless while the document holds a screenful of it.
+        /* @__PURE__ */ jsx("div", { ref: sentinel, "data-enigma-select-more": "", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+function SelectOptionRow({ option, index, children, ...props }) {
+  const select = useSelectContext("Select.Option");
+  const ref = useRef(null);
+  const isActive = select.state.active === index;
+  const isSelected = select.state.value.includes(option.value);
+  useEffect(() => {
+    if (isActive) ref.current?.scrollIntoView({ block: "nearest" });
+  }, [isActive]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      id: select.optionId(index),
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": option.disabled || void 0,
+      "data-enigma-select-option": "",
+      "data-active": isActive ? "" : void 0,
+      "data-selected": isSelected ? "" : void 0,
+      "data-disabled": option.disabled ? "" : void 0,
+      onPointerDown: (event) => {
+        event.preventDefault();
+        select.instance.select(option.value);
+      },
+      onPointerMove: () => {
+        if (!option.disabled) select.instance.setActive(index);
+      },
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        option.icon ? /* @__PURE__ */ jsx("span", { "data-enigma-select-icon": "", children: option.icon }) : null,
+        /* @__PURE__ */ jsxs("span", { "data-enigma-select-option-text": "", children: [
+          /* @__PURE__ */ jsx("span", { "data-enigma-select-option-label": "", children: option.label }),
+          option.description && /* @__PURE__ */ jsx("span", { "data-enigma-select-option-description": "", children: option.description })
+        ] }),
+        /* @__PURE__ */ jsx("span", { "data-enigma-select-check": "", "aria-hidden": "true" })
+      ] })
+    }
+  );
+}
+function Select(props) {
+  const {
+    placeholder = "Select",
+    searchPlaceholder = "Search",
+    tags,
+    maxTags,
+    empty,
+    renderOption,
+    className,
+    triggerProps,
+    contentProps,
+    children,
+    ...rest
+  } = props;
+  const root = rest;
+  return /* @__PURE__ */ jsxs(SelectRoot, { ...root, className, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { ...triggerProps, children: /* @__PURE__ */ jsx(SelectValue, { placeholder, tags, maxTags }) }),
+    /* @__PURE__ */ jsxs(SelectContent, { ...contentProps, children: [
+      /* @__PURE__ */ jsx(SearchSlot, { placeholder: searchPlaceholder }),
+      /* @__PURE__ */ jsx(SelectList, { empty, children: renderOption })
+    ] }),
+    children
+  ] });
+}
+function SearchSlot({ placeholder }) {
+  const { searchable } = useSelectContext("Select");
+  return searchable ? /* @__PURE__ */ jsx(SelectSearch, { placeholder }) : null;
+}
+Select.Root = SelectRoot;
+Select.Trigger = SelectTrigger;
+Select.Value = SelectValue;
+Select.Content = SelectContent;
+Select.Search = SelectSearch;
+Select.List = SelectList;
+Select.Option = SelectOptionRow;
+
+export { SELECT_STYLES, Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext };