@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/primitives/select/internal/ComboboxField.vue.js

@@ -0,0 +1,460 @@
+import { defineComponent as Me, ref as C, useTemplateRef as Z, computed as r, reactive as je, watchEffect as qe, watch as P, openBlock as n, createBlock as k, unref as t, mergeProps as J, withCtx as h, createVNode as x, normalizeClass as E, createElementVNode as K, createElementBlock as m, Fragment as I, renderList as W, toDisplayString as _, createCommentVNode as y, withModifiers as O, createTextVNode as Ge } from "vue";
+import { useGroupDisabled as Re } from "../../../../composables/formGroup.js";
+import { useLocalizedDefaults as Qe, useUiText as Xe } from "../../../../i18n/text.js";
+import { useFormControl as Ze } from "../../../../composables/formControl.js";
+import { useFloating as Je, FLOATING_SIZE_CLASS as We } from "../../popover/floating.js";
+import { X as Ye, ChevronDown as ea, Check as ve } from "@lucide/vue";
+import { ComboboxRoot_default as aa } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxRoot.js";
+import { ComboboxAnchor_default as ta } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxAnchor.js";
+import { ComboboxContent_default as la } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxContent.js";
+import { ComboboxGroup_default as oa } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxGroup.js";
+import { ComboboxInput_default as ra } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxInput.js";
+import { ComboboxItem_default as ia } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxItem.js";
+import { ComboboxItemIndicator_default as na } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxItemIndicator.js";
+import { ComboboxLabel_default as ua } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxLabel.js";
+import { ComboboxPortal_default as sa } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxPortal.js";
+import { ComboboxViewport_default as da } from "../../../../vendor/reka-ui/dist/Combobox/ComboboxViewport.js";
+import { cn as V } from "../../../../lib/cn.js";
+import ca from "./SelectTag.vue.js";
+import va from "../../tooltip/OverflowTooltip.vue.js";
+import { flattenGroups as pe, findOptionByText as fe, findOptionByValue as me } from "./options.js";
+import { useSelectSearch as pa } from "./useSelectSearch.js";
+import { useOverlayMotion as fa, useOverlayLayer as ma, keepEscapeForIme as ba } from "../../popover/overlay.js";
+import { usePhoneSurface as ha, accessibleName as xa } from "../../../../composables/phoneSurface.js";
+import ya from "./SelectSheet.vue.js";
+const ga = ["data-ui-tooltip-hint"], ka = ["aria-label"], wa = ["disabled", "aria-label"], Ca = {
+  key: 0,
+  class: "px-2 py-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text-muted)]",
+  "aria-live": "polite"
+}, _a = ["data-state"], Ta = { class: "min-w-0 truncate" }, La = {
+  key: 0,
+  class: "px-2 py-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text-muted)]"
+}, Va = {
+  key: 0,
+  class: "mt-1 shrink-0 border-t border-[var(--ui-border-subtle)] px-2 pt-2 pb-0.5 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)]",
+  "data-syno-pkg-land-ui-select-create-hint": ""
+}, Ya = /* @__PURE__ */ Me({
+  inheritAttrs: !1,
+  __name: "ComboboxField",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: void 0 },
+    multiple: { type: Boolean, default: !1 },
+    options: { default: () => [] },
+    search: { type: [Boolean, Function], default: !1 },
+    minSearchChar: { default: 1 },
+    caseSensitive: { type: Boolean, default: !1 },
+    allowCreate: { type: [Boolean, Object], default: !1 },
+    editable: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !1 },
+    placeholder: {},
+    loading: { type: Boolean, default: !1 },
+    loadingText: {},
+    notFoundText: {},
+    createHintText: {},
+    displayLimit: { type: [Number, Boolean], default: !1 },
+    ariaLabel: { default: void 0 },
+    ariaLabelledby: { default: void 0 },
+    openLabel: {},
+    clearLabel: {},
+    removeTagLabel: { type: Function, default: void 0 },
+    motion: { default: void 0 }
+  },
+  emits: ["update:modelValue", "update:loading", "select", "create", "invalid", "focus", "blur", "open-dropdown", "close-dropdown"],
+  setup(be, { emit: he }) {
+    const Y = be, s = Re(() => a.disabled), a = Qe(Y, { placeholder: "Select…", loadingText: "Loading…", notFoundText: "No results", createHintText: "Add", clearLabel: "Clear", openLabel: "Open options" }), c = he, i = C(""), b = C(""), d = C(!1), T = C(""), ee = Z("input"), ae = Z("anchor"), S = ha({ list: !0 }), N = r(() => d.value && S.value === "popover"), xe = Je(() => ae.value?.$el, () => N.value), te = r(() => ee.value?.$el), ye = fa(() => Y.motion), ge = ma(() => N.value, () => {
+      d.value = !1;
+    }), le = r(() => a.modelValue !== void 0), ke = r(() => {
+      const e = a.defaultValue ?? (a.multiple ? [] : "");
+      return Array.isArray(e) ? [...e] : e;
+    }), oe = C(ke.value), we = r(() => le.value ? a.modelValue : oe.value), v = r(() => {
+      const e = we.value;
+      return a.multiple ? Array.isArray(e) ? e : e ? [e] : [] : Array.isArray(e) ? e[0] ?? "" : e;
+    }), p = r(
+      () => a.multiple ? v.value : v.value ? [v.value] : []
+    ), U = r(() => p.value.length > 0);
+    function $(e) {
+      le.value || (oe.value = e), He(e), c("update:modelValue", e);
+    }
+    const H = je(/* @__PURE__ */ new Map()), { baseGroups: Ce, groups: f, searching: _e } = pa({
+      options: () => a.options,
+      search: () => a.search,
+      query: b,
+      minSearchChar: () => a.minSearchChar,
+      caseSensitive: () => a.caseSensitive
+    });
+    qe(() => {
+      for (const e of pe(Ce.value)) H.set(e.value, e.label);
+      for (const e of pe(f.value)) H.set(e.value, e.label);
+    });
+    function z(e) {
+      return H.get(e) ?? e;
+    }
+    const w = r(() => {
+      const e = a.allowCreate;
+      return e ? e === !0 ? { enabled: !0, addKey: [" "], validate: void 0 } : {
+        enabled: !0,
+        addKey: e.addKey?.length ? e.addKey : [" "],
+        validate: e.validate
+      } : { enabled: !1, addKey: [], validate: void 0 };
+    }), re = r(() => a.editable ?? (a.search !== !1 || w.value.enabled)), L = r(() => re.value && S.value === "popover"), A = r(() => a.loading || _e.value), M = r(() => w.value.enabled && i.value.trim().length > 0), ie = r(
+      () => i.value.trim() ? fe(f.value, i.value.trim(), a.caseSensitive) : void 0
+    ), B = C(!1), ne = r(() => M.value && !ie.value && !T.value);
+    P(A, (e) => c("update:loading", e));
+    const g = r(
+      () => a.multiple ? p.value.map((e) => ({ value: e, label: z(e) })) : []
+    ), j = r(
+      () => typeof a.displayLimit == "number" && a.displayLimit > 0 ? g.value.slice(0, a.displayLimit) : g.value
+    ), ue = r(() => g.value.length - j.value.length), Te = r(() => g.value.slice(j.value.length).map((e) => e.label).join(`
+`)), se = Z("values"), q = r(() => new Set(p.value)), Le = r(() => a.multiple && U.value ? void 0 : a.placeholder);
+    function G(e) {
+      return a.multiple ? "" : typeof e == "string" && e ? z(e) : "";
+    }
+    function R() {
+      i.value = G(v.value), b.value = "";
+    }
+    function F(e) {
+      if ($(e), b.value = "", a.multiple) {
+        i.value = "";
+        return;
+      }
+      const l = (Array.isArray(e) ? e[0] : e) ?? "";
+      i.value = l ? z(l) : "";
+    }
+    function Q(e) {
+      F(a.multiple ? [...p.value, e] : e);
+    }
+    function X(e) {
+      s.value || F(p.value.filter((l) => l !== e));
+    }
+    function Ve() {
+      s.value || F(a.multiple ? [] : "");
+    }
+    function Se() {
+      s.value || (d.value = !d.value);
+    }
+    function ze() {
+      if (s.value) return;
+      const e = te.value;
+      e && (e.focus(), !d.value && !L.value && e.click());
+    }
+    function Ae(e) {
+      $(e === void 0 ? a.multiple ? [] : "" : e), a.multiple && (i.value = "", b.value = "");
+    }
+    function Be(e) {
+      const l = e.detail?.value;
+      if (!l) return;
+      const o = me(f.value, l) ?? { label: l, value: l }, u = p.value.includes(l);
+      i.value = a.multiple ? "" : o.label, b.value = "", u || c("select", o);
+    }
+    function D(e) {
+      const l = e.trim();
+      if (!l) return;
+      const { validate: o } = w.value;
+      if (o && !o(l)) {
+        T.value = l, c("invalid", l);
+        return;
+      }
+      T.value = "";
+      const u = fe(f.value, l, a.caseSensitive);
+      u ? (Q(u.value), c("select", u)) : (Q(l), c("create", l));
+    }
+    function Fe(e) {
+      if (!(s.value || e.isComposing)) {
+        if (["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(e.key)) {
+          B.value = !0;
+          return;
+        }
+        e.key !== "Enter" || B.value || !w.value.enabled || !M.value || ie.value || f.value.length === 0 || (e.preventDefault(), e.stopImmediatePropagation(), D(i.value));
+      }
+    }
+    function De(e) {
+      if (!(s.value || e.isComposing)) {
+        if (e.key === "Backspace" && a.multiple && !i.value && U.value) {
+          e.preventDefault(), X(p.value[p.value.length - 1]);
+          return;
+        }
+        if (w.value.enabled) {
+          if (w.value.addKey.includes(e.key)) {
+            e.preventDefault(), D(i.value);
+            return;
+          }
+          e.key === "Enter" && !e.defaultPrevented && M.value && f.value.length === 0 && (e.preventDefault(), D(i.value));
+        }
+      }
+    }
+    function de(e) {
+      i.value = e, b.value = e, T.value = "", B.value = !1;
+    }
+    function Pe(e) {
+      !a.multiple && i.value && e.target.select(), c("focus", e);
+    }
+    P(d, (e) => {
+      e && S.value === "sheet" && (ce.value = xa(te.value) || a.placeholder || ""), e ? b.value = "" : R(), c(e ? "open-dropdown" : "close-dropdown");
+    }), P(() => v.value, () => {
+      d.value || R();
+    }), P(() => G(v.value), () => {
+      !d.value && !a.multiple && R();
+    });
+    const Ee = Xe(), ce = C(""), Ke = r(() => b.value ? i.value : ""), Ie = r(() => b.value && ne.value ? `${a.createHintText} "${i.value.trim()}"` : void 0);
+    function Oe(e) {
+      const l = me(f.value, e) ?? { label: z(e), value: e };
+      if (!a.multiple) {
+        const o = p.value.includes(e);
+        F(e), o || c("select", l), d.value = !1;
+        return;
+      }
+      if (q.value.has(e)) {
+        X(e);
+        return;
+      }
+      Q(e), c("select", l);
+    }
+    function Ne() {
+      D(i.value), !T.value && !a.multiple && (d.value = !1);
+    }
+    const { controlAttrs: Ue, wrapperAttrs: $e, changed: He } = Ze({ value: () => v.value, disabled: () => s.value, ariaLabel: () => a.ariaLabel, ariaLabelledby: () => a.ariaLabelledby, invalid: () => !!T.value });
+    return (e, l) => (n(), k(t(aa), J(t($e)(), {
+      open: N.value,
+      "model-value": t(a).multiple ? v.value : v.value || void 0,
+      multiple: t(a).multiple,
+      disabled: t(s),
+      "ignore-filter": "",
+      "open-on-click": "",
+      "open-on-focus": L.value,
+      "highlight-on-hover": "",
+      "onUpdate:open": l[5] || (l[5] = (o) => d.value = o),
+      "onUpdate:modelValue": Ae
+    }), {
+      default: h(() => [
+        x(t(ta), {
+          ref_key: "anchor",
+          ref: ae,
+          "data-syno-pkg-land-ui": "",
+          class: E(
+            t(V)(
+              "flex min-h-[var(--ui-control-md)] w-full min-w-0 items-start gap-1 rounded-[var(--ui-radius-control)] border border-[var(--ui-border)] bg-[var(--ui-surface)] px-3 py-1 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] transition-[border-color,box-shadow,background-color] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] has-[[aria-invalid=true]]:border-[var(--ui-danger)] focus-within:border-[var(--ui-primary)] focus-within:shadow-[var(--ui-shadow-focus-field)] has-[[aria-invalid=true]]:focus-within:border-[var(--ui-danger)]",
+              t(s) ? "cursor-default bg-[var(--ui-surface-subtle)] text-[var(--ui-text-disabled)]" : "hover:not-focus-within:border-[var(--ui-control-border-hover)] has-[[aria-invalid=true]]:hover:not-focus-within:border-[var(--ui-danger)]"
+            )
+          ),
+          onClick: ze
+        }, {
+          default: h(() => [
+            K("div", {
+              class: E(
+                t(V)(
+                  "relative flex min-h-[calc(var(--ui-control-md)-10px)] min-w-0 flex-1 flex-wrap content-center items-center gap-1",
+                  g.value.length > 0 && "[&>[data-syno-pkg-land-ui-select-tag]]:my-[max(0px,calc((var(--ui-control-md)-10px-1.25rem)/2))]",
+                  // On touch a tag's remove button has a 44px tap box (hit-area.css).
+                  // Tags keep the tap gap side by side, so a box never reaches the
+                  // next tag's label, and wrapped rows are a box apart, so the boxes
+                  // of two rows never overlap. A mouse is unchanged.
+                  // The values also keep room at their end for the last box on a
+                  // row, so it never covers the clear and open buttons beside them.
+                  g.value.length > 0 && "gap-x-[max(4px,var(--ui-tap-gap,0px))] gap-y-[max(4px,calc(var(--ui-hit-min,0px)-1.25rem-2*max(0px,calc((var(--ui-control-md)-10px-1.25rem)/2))))] pe-[max(0px,calc((var(--ui-hit-min,0px)-1rem)/2-0.25rem))]"
+                )
+              ),
+              ref_key: "values",
+              ref: se,
+              "data-syno-pkg-land-ui-select-values": ""
+            }, [
+              (n(!0), m(I, null, W(j.value, (o) => (n(), k(ca, {
+                key: o.value,
+                label: o.label,
+                disabled: t(s),
+                "remove-label": t(a).removeTagLabel ? t(a).removeTagLabel(o.label) : void 0,
+                onRemove: (u) => X(o.value)
+              }, null, 8, ["label", "disabled", "remove-label", "onRemove"]))), 128)),
+              ue.value > 0 ? (n(), m("span", {
+                key: 0,
+                class: "inline-flex h-5 shrink-0 cursor-default items-center rounded-[var(--ui-radius-inner)] bg-[var(--ui-surface-subtle)] px-2 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)] tabular-nums",
+                "data-ui-tooltip-hint": Te.value,
+                "data-syno-pkg-land-ui-select-more": ""
+              }, "+" + _(ue.value), 9, ga)) : y("", !0),
+              x(t(ra), J(t(Ue)(), {
+                ref_key: "input",
+                ref: ee,
+                "model-value": i.value,
+                "display-value": G,
+                disabled: t(s),
+                readonly: !L.value,
+                placeholder: Le.value,
+                "aria-haspopup": "listbox",
+                class: t(V)(
+                  "min-w-8 flex-1 border-0 bg-transparent text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] text-ellipsis outline-none placeholder:text-[var(--ui-text-muted)] disabled:text-[var(--ui-text-disabled)]",
+                  !L.value && "cursor-default",
+                  // A read-only input after tags takes no row of its own, and no
+                  // taps: a tap on the field opens it (activate), and a tag's
+                  // remove button keeps its whole tap box wherever the input sits.
+                  !L.value && g.value.length > 0 && "pointer-events-none absolute w-px min-w-0 flex-none opacity-0"
+                ),
+                "onUpdate:modelValue": de,
+                onKeydownCapture: Fe,
+                onKeydown: De,
+                onFocus: Pe,
+                onBlur: l[0] || (l[0] = (o) => c("blur", o))
+              }), null, 16, ["model-value", "disabled", "readonly", "placeholder", "class"])
+            ], 2),
+            x(va, { target: se.value }, null, 8, ["target"]),
+            K("span", {
+              class: E(
+                t(V)(
+                  "flex shrink-0 items-center gap-1 self-start",
+                  g.value.length ? "h-[max(calc(var(--ui-control-md)-10px),1.25rem)]" : "h-[calc(var(--ui-control-md)-10px)]"
+                )
+              ),
+              "data-syno-pkg-land-ui-select-actions": ""
+            }, [
+              t(a).clearable && U.value && !t(s) ? (n(), m("button", {
+                key: 0,
+                type: "button",
+                "aria-label": t(a).clearLabel,
+                class: "inline-flex size-4 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] border-0 bg-transparent text-[var(--ui-text-muted)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                "data-syno-pkg-land-ui-select-clear": "",
+                onPointerdown: l[1] || (l[1] = O(() => {
+                }, ["stop"])),
+                onClick: O(Ve, ["stop"])
+              }, [
+                x(t(Ye), {
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                })
+              ], 40, ka)) : y("", !0),
+              K("button", {
+                type: "button",
+                tabindex: "-1",
+                disabled: t(s),
+                class: "inline-flex size-4 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] border-0 bg-transparent text-[var(--ui-text-muted)] outline-none disabled:opacity-50",
+                "aria-label": t(a).openLabel,
+                "data-syno-pkg-land-ui-select-trigger": "",
+                onPointerdown: l[2] || (l[2] = O(() => {
+                }, ["stop"])),
+                onClick: O(Se, ["stop"])
+              }, [
+                x(t(ea), {
+                  class: "size-4",
+                  "aria-hidden": "true"
+                })
+              ], 40, wa)
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        x(t(sa), null, {
+          default: h(() => [
+            x(t(la), J({ "data-ui-popup": "" }, { ...t(xe), ...t(ge) }, {
+              "data-ui-popup-motion": t(ye)() === "none" ? "none" : void 0,
+              position: "popper",
+              "side-offset": 4,
+              class: ["z-[1450] flex min-w-[min(var(--reka-combobox-trigger-width),var(--reka-popper-available-width))] flex-col overflow-hidden rounded-[var(--ui-radius-popover)] border border-[var(--ui-border-floating)] bg-[var(--ui-surface-raised)] p-1 shadow-[var(--ui-shadow-menu)]", t(We)],
+              "data-syno-pkg-land-ui": "",
+              onEscapeKeyDown: t(ba)
+            }), {
+              default: h(() => [
+                x(t(da), { class: "max-h-[min(var(--reka-combobox-content-available-height),20rem)] min-h-0 min-w-0 overflow-x-hidden overflow-y-auto [scrollbar-gutter:stable]" }, {
+                  default: h(() => [
+                    A.value ? (n(), m("div", Ca, _(t(a).loadingText), 1)) : (n(), m(I, { key: 1 }, [
+                      (n(!0), m(I, null, W(t(f), (o) => (n(), k(t(oa), {
+                        key: o.key
+                      }, {
+                        default: h(() => [
+                          o.label ? (n(), k(t(ua), {
+                            key: 0,
+                            class: "px-2 py-1 text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text-muted)]"
+                          }, {
+                            default: h(() => [
+                              Ge(_(o.label), 1)
+                            ]),
+                            _: 2
+                          }, 1024)) : y("", !0),
+                          (n(!0), m(I, null, W(o.options, (u) => (n(), k(t(ia), {
+                            key: u.value,
+                            value: u.value,
+                            "text-value": u.label,
+                            disabled: u.disabled,
+                            "aria-disabled": u.disabled || void 0,
+                            class: E(
+                              t(V)(
+                                // The row under the pointer or keyboard only tints; a chosen
+                                // row is marked by its checkbox (multiple) or its check
+                                // and the selected tint (single), never by blue text.
+                                "relative flex h-[var(--ui-menu-row-height)] select-none items-center gap-2 rounded-[var(--ui-radius-inner)] py-1 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-neutral-soft)] data-[disabled]:opacity-40",
+                                t(a).multiple ? "pr-2" : "pr-8 aria-selected:bg-[var(--ui-surface-selected)]",
+                                o.label && o.indent ? "pl-4" : "pl-2"
+                              )
+                            ),
+                            onPointermove: l[3] || (l[3] = (Sa) => B.value = !0),
+                            onSelect: Be
+                          }, {
+                            default: h(() => [
+                              t(a).multiple ? (n(), m("span", {
+                                key: 0,
+                                "data-ui-option-check": "",
+                                "data-state": q.value.has(u.value) ? "checked" : "unchecked",
+                                "aria-hidden": "true",
+                                class: "flex size-[var(--ui-choice-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] border border-[var(--ui-border-strong)] bg-[var(--ui-surface)] text-[var(--ui-primary-foreground)] transition-[border-color,background-color] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:border-[var(--ui-primary)] data-[state=checked]:bg-[var(--ui-primary)]"
+                              }, [
+                                q.value.has(u.value) ? (n(), k(t(ve), {
+                                  key: 0,
+                                  class: "size-[calc(var(--ui-choice-box-size)*0.75)] stroke-[2.5]"
+                                })) : y("", !0)
+                              ], 8, _a)) : y("", !0),
+                              K("span", Ta, _(u.label), 1),
+                              t(a).multiple ? y("", !0) : (n(), k(t(na), {
+                                key: 1,
+                                class: "absolute right-2 inline-flex items-center text-[var(--ui-primary)]"
+                              }, {
+                                default: h(() => [
+                                  x(t(ve), {
+                                    class: "size-4",
+                                    "aria-hidden": "true"
+                                  })
+                                ]),
+                                _: 1
+                              }))
+                            ]),
+                            _: 2
+                          }, 1032, ["value", "text-value", "disabled", "aria-disabled", "class"]))), 128))
+                        ]),
+                        _: 2
+                      }, 1024))), 128)),
+                      !t(f).length && !(w.value.enabled && !i.value.trim()) ? (n(), m("div", La, _(t(a).notFoundText), 1)) : y("", !0)
+                    ], 64))
+                  ]),
+                  _: 1
+                }),
+                !A.value && ne.value ? (n(), m("div", Va, _(t(a).createHintText) + ' "' + _(i.value) + '" ', 1)) : y("", !0)
+              ]),
+              _: 1
+            }, 16, ["data-ui-popup-motion", "onEscapeKeyDown", "class"])
+          ]),
+          _: 1
+        }),
+        t(S) === "sheet" ? (n(), k(ya, {
+          key: 0,
+          open: d.value,
+          "onUpdate:open": l[4] || (l[4] = (o) => d.value = o),
+          title: ce.value,
+          groups: t(f),
+          value: t(a).multiple ? p.value : v.value,
+          multiple: t(a).multiple,
+          search: re.value,
+          query: Ke.value,
+          "search-placeholder": t(Ee)("Search…"),
+          loading: A.value,
+          "loading-text": t(a).loadingText,
+          "not-found-text": t(a).notFoundText,
+          "create-text": Ie.value,
+          "onUpdate:query": de,
+          onPick: Oe,
+          onCreate: Ne
+        }, null, 8, ["open", "title", "groups", "value", "multiple", "search", "query", "search-placeholder", "loading", "loading-text", "not-found-text", "create-text"])) : y("", !0)
+      ]),
+      _: 1
+    }, 16, ["open", "model-value", "multiple", "disabled", "open-on-focus"]));
+  }
+});
+export {
+  Ya as default
+};

package/dist/modules/components/primitives/select/internal/ComboboxField2.vue.js

@@ -0,0 +1,4 @@
+import f from "./ComboboxField.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/primitives/select/internal/SelectSheet.vue.js

@@ -0,0 +1,183 @@
+import { defineComponent as N, ref as $, watch as E, computed as v, openBlock as t, createBlock as f, createSlots as I, withCtx as r, createVNode as s, unref as l, createElementBlock as u, withKeys as P, createCommentVNode as d, toDisplayString as c, Fragment as h, renderList as y, createTextVNode as b, normalizeClass as g, createElementVNode as _ } from "vue";
+import { Check as k } from "@lucide/vue";
+import { ListboxRoot_default as U } from "../../../../vendor/reka-ui/dist/Listbox/ListboxRoot.js";
+import { ListboxContent_default as G } from "../../../../vendor/reka-ui/dist/Listbox/ListboxContent.js";
+import { ListboxFilter_default as K } from "../../../../vendor/reka-ui/dist/Listbox/ListboxFilter.js";
+import { ListboxGroup_default as R } from "../../../../vendor/reka-ui/dist/Listbox/ListboxGroup.js";
+import { ListboxGroupLabel_default as j } from "../../../../vendor/reka-ui/dist/Listbox/ListboxGroupLabel.js";
+import { ListboxItem_default as O } from "../../../../vendor/reka-ui/dist/Listbox/ListboxItem.js";
+import { ListboxItemIndicator_default as T } from "../../../../vendor/reka-ui/dist/Listbox/ListboxItemIndicator.js";
+import { useUiText as Q } from "../../../../i18n/text.js";
+import W from "../../sheet/BottomSheet.vue.js";
+import A from "../../button/Button.vue.js";
+const H = {
+  key: 0,
+  class: "shrink-0 px-4 pb-2"
+}, J = {
+  key: 0,
+  class: "px-3 py-3 text-[length:var(--ui-font-size)] text-[var(--ui-text-muted)]",
+  "aria-live": "polite"
+}, M = {
+  key: 0,
+  "data-ui-option-check": "",
+  "aria-hidden": "true",
+  class: "flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] border border-[var(--ui-border-strong)] bg-[var(--ui-surface)] text-[var(--ui-primary-foreground)] group-data-[state=checked]:border-[var(--ui-primary)] group-data-[state=checked]:bg-[var(--ui-primary)]"
+}, X = { class: "min-w-0 flex-1 truncate" }, Y = {
+  key: 0,
+  class: "px-3 py-3 text-[length:var(--ui-font-size)] text-[var(--ui-text-muted)]",
+  "aria-live": "polite"
+}, Z = { class: "min-w-0 flex-1 truncate" }, w = "relative flex min-h-12 select-none items-center gap-3 rounded-[var(--ui-radius-control)] px-3 text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-neutral-soft)] data-[disabled]:opacity-40", pe = /* @__PURE__ */ N({
+  __name: "SelectSheet",
+  props: {
+    open: { type: Boolean },
+    title: { default: void 0 },
+    groups: {},
+    value: { default: void 0 },
+    multiple: { type: Boolean, default: !1 },
+    search: { type: Boolean, default: !1 },
+    query: { default: "" },
+    searchPlaceholder: { default: void 0 },
+    loading: { type: Boolean, default: !1 },
+    loadingText: { default: void 0 },
+    notFoundText: { default: void 0 },
+    createText: { default: void 0 }
+  },
+  emits: ["update:open", "update:query", "pick", "create"],
+  setup(z, { emit: C }) {
+    const e = z, n = C, L = Q(), m = $(!1);
+    E(() => e.open, (a) => {
+      a || (m.value = !1);
+    });
+    const B = v(() => e.search && m.value ? "60dvh" : "auto"), S = v(() => e.multiple ? e.value ?? [] : e.value || void 0), x = v(() => !e.loading && !e.groups.some((a) => a.options.length));
+    function V(a, o) {
+      a.preventDefault(), n("pick", o);
+    }
+    function F(a) {
+      m.value = !0, n("update:query", a);
+    }
+    function q(a) {
+      a.isComposing || !e.createText || !x.value || (a.preventDefault(), n("create"));
+    }
+    return (a, o) => (t(), f(W, {
+      open: e.open,
+      title: e.title,
+      height: B.value,
+      flush: "",
+      "data-ui-select-sheet": "",
+      "onUpdate:open": o[2] || (o[2] = (i) => n("update:open", i))
+    }, I({
+      default: r(() => [
+        s(l(U), {
+          "model-value": S.value,
+          multiple: e.multiple,
+          class: "flex min-h-0 flex-1 flex-col",
+          "data-ui-select-sheet-list": ""
+        }, {
+          default: r(() => [
+            e.search ? (t(), u("div", H, [
+              s(l(K), {
+                "model-value": e.query,
+                enterkeyhint: "search",
+                autocomplete: "off",
+                placeholder: e.searchPlaceholder,
+                "aria-label": e.searchPlaceholder,
+                class: "h-11 w-full rounded-[var(--ui-radius-control)] border border-[var(--ui-border)] bg-[var(--ui-surface)] px-3 text-[length:var(--ui-font-size-field)] text-[var(--ui-text)] outline-none placeholder:text-[var(--ui-text-muted)] focus:border-[var(--ui-primary)]",
+                "data-ui-select-sheet-search": "",
+                "onUpdate:modelValue": F,
+                onKeydown: P(q, ["enter"])
+              }, null, 8, ["model-value", "placeholder", "aria-label"])
+            ])) : d("", !0),
+            s(l(G), { class: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-2" }, {
+              default: r(() => [
+                e.loading ? (t(), u("div", J, c(e.loadingText), 1)) : (t(), u(h, { key: 1 }, [
+                  (t(!0), u(h, null, y(e.groups, (i) => (t(), f(l(R), {
+                    key: i.key
+                  }, {
+                    default: r(() => [
+                      i.label ? (t(), f(l(j), {
+                        key: 0,
+                        class: "px-3 pt-3 pb-1 text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text-muted)]"
+                      }, {
+                        default: r(() => [
+                          b(c(i.label), 1)
+                        ]),
+                        _: 2
+                      }, 1024)) : d("", !0),
+                      (t(!0), u(h, null, y(i.options, (p) => (t(), f(l(O), {
+                        key: p.value,
+                        value: p.value,
+                        disabled: p.disabled,
+                        class: g([w, "group", !e.multiple && "data-[state=checked]:bg-[var(--ui-surface-selected)]"]),
+                        "data-ui-select-sheet-option": "",
+                        onSelect: (D) => V(D, p.value)
+                      }, {
+                        default: r(() => [
+                          e.multiple ? (t(), u("span", M, [
+                            s(l(T), null, {
+                              default: r(() => [
+                                s(l(k), { class: "size-4 stroke-[2.5]" })
+                              ]),
+                              _: 1
+                            })
+                          ])) : d("", !0),
+                          _("span", X, c(p.label), 1),
+                          e.multiple ? d("", !0) : (t(), f(l(T), {
+                            key: 1,
+                            class: "inline-flex shrink-0 items-center text-[var(--ui-primary)]"
+                          }, {
+                            default: r(() => [
+                              s(l(k), {
+                                class: "size-5",
+                                "aria-hidden": "true"
+                              })
+                            ]),
+                            _: 1
+                          }))
+                        ]),
+                        _: 2
+                      }, 1032, ["value", "disabled", "class", "onSelect"]))), 128))
+                    ]),
+                    _: 2
+                  }, 1024))), 128)),
+                  x.value && !e.createText ? (t(), u("div", Y, c(e.notFoundText), 1)) : d("", !0)
+                ], 64)),
+                e.createText && !e.loading ? (t(), u("button", {
+                  key: 2,
+                  type: "button",
+                  class: g([w, "w-full text-left text-[var(--ui-primary)] hover:bg-[var(--ui-neutral-soft)]"]),
+                  "data-ui-select-sheet-create": "",
+                  onClick: o[0] || (o[0] = (i) => n("create"))
+                }, [
+                  _("span", Z, c(e.createText), 1)
+                ], 2)) : d("", !0)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "multiple"])
+      ]),
+      _: 2
+    }, [
+      e.multiple ? {
+        name: "footer",
+        fn: r(() => [
+          s(A, {
+            variant: "primary",
+            "data-ui-select-sheet-done": "",
+            onClick: o[1] || (o[1] = (i) => n("update:open", !1))
+          }, {
+            default: r(() => [
+              b(c(l(L)("Done")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["open", "title", "height"]));
+  }
+});
+export {
+  pe as default
+};

package/dist/modules/components/primitives/select/internal/SelectSheet2.vue.js

@@ -0,0 +1,4 @@
+import f from "./SelectSheet.vue.js";
+export {
+  f as default
+};