@versaur/react 1.0.13 → 1.0.14

package/dist/forms.js

@@ -1,475 +1,772 @@
-import { jsx as i, jsxs as C } from "react/jsx-runtime";
-import { labelStyles as ie, helperTextStyles as ae, errorTextStyles as se, textInputStyles as w, textAreaStyles as D, selectStyles as F, radioStyles as R, checkboxStyles as $, radioGroupStyles as P, checkboxGroupStyles as V, chipInputStyles as j } from "@versaur/core/forms";
-import { forwardRef as v, useId as S, createContext as T, useContext as E } from "react";
-import { u as I } from "./use-data-attrs-iPFyfiKN.js";
-import { c as b } from "./cx-B9vmfsc1.js";
-const k = v(
-  ({ required: e = !1, disabled: n = !1, children: t, className: d, ...a }, o) => {
-    const c = I({
-      disabled: n,
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { labelStyles as Oe, helperTextStyles as Se, errorTextStyles as ke, textInputStyles as G, textAreaStyles as K, selectStyles as _, radioStyles as T, checkboxStyles as j, radioGroupStyles as X, checkboxGroupStyles as J, chipInputStyles as M, comboboxInputStyles as v } from "@versaur/core/forms";
+import { forwardRef as f, useId as A, createContext as P, useContext as Q, useState as D, useEffect as $, useCallback as L, useRef as Be } from "react";
+import { u as N, c as Re } from "./helpers-DTL6qrTe.js";
+import { c as y } from "./cx-B9vmfsc1.js";
+import { ChevronDownIcon as Ae, CheckIcon as Ge, XIcon as De } from "@versaur/icons";
+import { D as U } from "./drawer-DRv9k7lp.js";
+const k = f(
+  ({ required: e = !1, disabled: c = !1, children: i, className: a, ...n }, t) => {
+    const o = N({
+      disabled: c,
       required: e
     });
-    return /* @__PURE__ */ i("label", { ref: o, className: b(ie.label, d), ...c, ...a, children: t });
+    return /* @__PURE__ */ s("label", { ref: t, className: y(Oe.label, a), ...o, ...n, children: i });
   }
 );
 k.displayName = "Label";
-const B = v(({ children: e, className: n, ...t }, d) => /* @__PURE__ */ i("p", { ref: d, className: b(ae.helper, n), ...t, children: e }));
+const B = f(({ children: e, className: c, ...i }, a) => /* @__PURE__ */ s("p", { ref: a, className: y(Se.helper, c), ...i, children: e }));
 B.displayName = "HelperText";
-const O = v(({ children: e, className: n, ...t }, d) => /* @__PURE__ */ i("p", { ref: d, className: b(se.error, n), role: "alert", "aria-live": "polite", ...t, children: e }));
-O.displayName = "ErrorText";
-const de = v(
+const R = f(({ children: e, className: c, ...i }, a) => /* @__PURE__ */ s("p", { ref: a, className: y(ke.error, c), role: "alert", "aria-live": "polite", ...i, children: e }));
+R.displayName = "ErrorText";
+const $e = f(
   ({
     label: e,
-    helper: n,
-    error: t,
-    required: d = !1,
-    disabled: a = !1,
-    readOnly: o = !1,
-    leftIcon: c,
-    rightIcon: s,
+    helper: c,
+    error: i,
+    required: a = !1,
+    disabled: n = !1,
+    readOnly: t = !1,
+    leftIcon: o,
+    rightIcon: r,
     id: l,
-    className: f,
-    ...p
-  }, x) => {
-    const m = S(), u = l || m, r = n ? `${u}-helper` : void 0, h = t ? `${u}-error` : void 0, y = [r, h].filter(Boolean).join(" "), N = I({
-      disabled: a,
-      hasLeftIcon: !!c,
-      hasRightIcon: !!s,
-      invalid: !!t,
-      readOnly: o
+    className: d,
+    ...u
+  }, h) => {
+    const b = A(), m = l || b, p = c ? `${m}-helper` : void 0, x = i ? `${m}-error` : void 0, C = [p, x].filter(Boolean).join(" "), I = N({
+      disabled: n,
+      hasLeftIcon: !!o,
+      hasRightIcon: !!r,
+      invalid: !!i,
+      readOnly: t
     });
-    return /* @__PURE__ */ C("div", { className: b(w.field, f), children: [
-      e && /* @__PURE__ */ i(k, { htmlFor: u, required: d, disabled: a, children: e }),
-      /* @__PURE__ */ C("div", { className: w.wrapper, ...N, children: [
-        c && /* @__PURE__ */ i("span", { className: w["left-icon"], children: c }),
-        /* @__PURE__ */ i(
+    return /* @__PURE__ */ g("div", { className: y(G.field, d), children: [
+      e && /* @__PURE__ */ s(k, { htmlFor: m, required: a, disabled: n, children: e }),
+      /* @__PURE__ */ g("div", { className: G.wrapper, ...I, children: [
+        o && /* @__PURE__ */ s("span", { className: G["left-icon"], children: o }),
+        /* @__PURE__ */ s(
           "input",
           {
-            ref: x,
-            id: u,
+            ref: h,
+            id: m,
             type: "text",
-            className: w.input,
-            disabled: a,
-            readOnly: o,
-            required: d,
-            "aria-invalid": t ? "true" : void 0,
-            "aria-disabled": a ? "true" : void 0,
-            "aria-describedby": y || void 0,
-            ...p
+            className: G.input,
+            disabled: n,
+            readOnly: t,
+            required: a,
+            "aria-invalid": i ? "true" : void 0,
+            "aria-disabled": n ? "true" : void 0,
+            "aria-describedby": C || void 0,
+            ...u
           }
         ),
-        s && /* @__PURE__ */ i("span", { className: w["right-icon"], children: s })
+        r && /* @__PURE__ */ s("span", { className: G["right-icon"], children: r })
       ] }),
-      t && /* @__PURE__ */ i(O, { id: h, children: t }),
-      !t && n && /* @__PURE__ */ i(B, { id: r, children: n })
+      i && /* @__PURE__ */ s(R, { id: x, children: i }),
+      !i && c && /* @__PURE__ */ s(B, { id: p, children: c })
     ] });
   }
 );
-de.displayName = "TextInput";
-const ce = v(
+$e.displayName = "TextInput";
+const Ee = f(
   ({
     label: e,
-    helper: n,
-    error: t,
-    required: d = !1,
-    disabled: a = !1,
-    readOnly: o = !1,
-    resizable: c = !0,
-    minRows: s = 3,
+    helper: c,
+    error: i,
+    required: a = !1,
+    disabled: n = !1,
+    readOnly: t = !1,
+    resizable: o = !0,
+    minRows: r = 3,
     maxRows: l,
-    id: f,
-    className: p,
-    ...x
-  }, m) => {
-    const u = S(), r = f || u, h = n ? `${r}-helper` : void 0, y = t ? `${r}-error` : void 0, N = [h, y].filter(Boolean).join(" "), g = I({
-      disabled: a,
-      invalid: !!t,
-      readOnly: o,
-      resizable: c ? "true" : "false",
+    id: d,
+    className: u,
+    ...h
+  }, b) => {
+    const m = A(), p = d || m, x = c ? `${p}-helper` : void 0, C = i ? `${p}-error` : void 0, I = [x, C].filter(Boolean).join(" "), w = N({
+      disabled: n,
+      invalid: !!i,
+      readOnly: t,
+      resizable: o ? "true" : "false",
       minRows: "true",
       ...l && { maxRows: "true" }
-    }), G = {
-      "--_min-rows-count": s,
+    }), O = {
+      "--_min-rows-count": r,
       ...l && { "--_max-rows-count": l }
     };
-    return /* @__PURE__ */ C("div", { className: b(D.field, p), children: [
-      e && /* @__PURE__ */ i(k, { htmlFor: r, required: d, disabled: a, children: e }),
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ g("div", { className: y(K.field, u), children: [
+      e && /* @__PURE__ */ s(k, { htmlFor: p, required: a, disabled: n, children: e }),
+      /* @__PURE__ */ s(
         "textarea",
         {
-          ref: m,
-          id: r,
-          className: D.textarea,
-          disabled: a,
-          readOnly: o,
-          required: d,
-          style: G,
-          "aria-invalid": t ? "true" : void 0,
-          "aria-disabled": a ? "true" : void 0,
-          "aria-describedby": N || void 0,
-          ...g,
-          ...x
+          ref: b,
+          id: p,
+          className: K.textarea,
+          disabled: n,
+          readOnly: t,
+          required: a,
+          style: O,
+          "aria-invalid": i ? "true" : void 0,
+          "aria-disabled": n ? "true" : void 0,
+          "aria-describedby": I || void 0,
+          ...w,
+          ...h
         }
       ),
-      t && /* @__PURE__ */ i(O, { id: y, children: t }),
-      !t && n && /* @__PURE__ */ i(B, { id: h, children: n })
+      i && /* @__PURE__ */ s(R, { id: C, children: i }),
+      !i && c && /* @__PURE__ */ s(B, { id: x, children: c })
     ] });
   }
 );
-ce.displayName = "TextArea";
-const H = v(({ children: e, ...n }, t) => /* @__PURE__ */ i("option", { ref: t, ...n, children: e }));
-H.displayName = "Select.Option";
-const L = v(
-  ({ label: e, children: n, ...t }, d) => /* @__PURE__ */ i("optgroup", { ref: d, label: e, ...t, children: n })
+Ee.displayName = "TextArea";
+const W = f(({ children: e, ...c }, i) => /* @__PURE__ */ s("option", { ref: i, ...c, children: e }));
+W.displayName = "Select.Option";
+const Y = f(
+  ({ label: e, children: c, ...i }, a) => /* @__PURE__ */ s("optgroup", { ref: a, label: e, ...i, children: c })
 );
-L.displayName = "Select.OptionGroup";
-const _ = v(
+Y.displayName = "Select.OptionGroup";
+const Z = f(
   ({
     label: e,
-    helper: n,
-    error: t,
-    required: d = !1,
-    disabled: a = !1,
-    placeholder: o,
-    children: c,
-    id: s,
+    helper: c,
+    error: i,
+    required: a = !1,
+    disabled: n = !1,
+    placeholder: t,
+    children: o,
+    id: r,
     className: l,
-    ...f
-  }, p) => {
-    const x = S(), m = s || x, u = n ? `${m}-helper` : void 0, r = t ? `${m}-error` : void 0, h = [u, r].filter(Boolean).join(" "), y = I({
-      disabled: a,
-      invalid: !!t
+    ...d
+  }, u) => {
+    const h = A(), b = r || h, m = c ? `${b}-helper` : void 0, p = i ? `${b}-error` : void 0, x = [m, p].filter(Boolean).join(" "), C = N({
+      disabled: n,
+      invalid: !!i
     });
-    return /* @__PURE__ */ C("div", { className: b(F.field, l), children: [
-      e && /* @__PURE__ */ i(k, { htmlFor: m, required: d, disabled: a, children: e }),
-      /* @__PURE__ */ C(
+    return /* @__PURE__ */ g("div", { className: y(_.field, l), children: [
+      e && /* @__PURE__ */ s(k, { htmlFor: b, required: a, disabled: n, children: e }),
+      /* @__PURE__ */ g(
         "select",
         {
-          ref: p,
-          id: m,
-          className: F.select,
-          disabled: a,
-          required: d,
-          "aria-invalid": t ? "true" : void 0,
-          "aria-disabled": a ? "true" : void 0,
-          "aria-describedby": h || void 0,
-          ...y,
-          ...f,
+          ref: u,
+          id: b,
+          className: _.select,
+          disabled: n,
+          required: a,
+          "aria-invalid": i ? "true" : void 0,
+          "aria-disabled": n ? "true" : void 0,
+          "aria-describedby": x || void 0,
+          ...C,
+          ...d,
           children: [
-            o && /* @__PURE__ */ i("option", { value: "", disabled: !0, children: o }),
-            c
+            t && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: t }),
+            o
           ]
         }
       ),
-      t && /* @__PURE__ */ i(O, { id: r, children: t }),
-      !t && n && /* @__PURE__ */ i(B, { id: u, children: n })
+      i && /* @__PURE__ */ s(R, { id: p, children: i }),
+      !i && c && /* @__PURE__ */ s(B, { id: m, children: c })
     ] });
   }
 );
-_.displayName = "Select";
-const z = _;
-z.Option = H;
-z.OptionGroup = L;
-const J = v(
-  ({ disabled: e = !1, children: n, className: t, ...d }, a) => {
-    const o = I({
+Z.displayName = "Select";
+const q = Z;
+q.Option = W;
+q.OptionGroup = Y;
+const ee = f(
+  ({ disabled: e = !1, children: c, className: i, ...a }, n) => {
+    const t = N({
       disabled: e
     });
-    return /* @__PURE__ */ C("label", { className: b(R.radio, t), ...o, children: [
-      /* @__PURE__ */ i(
-        "input",
-        {
-          ref: a,
-          type: "radio",
-          className: R.input,
-          disabled: e,
-          ...d
-        }
-      ),
-      /* @__PURE__ */ i("span", { className: R.indicator }),
-      n && /* @__PURE__ */ i("span", { className: R.label, children: n })
+    return /* @__PURE__ */ g("label", { className: y(T.radio, i), ...t, children: [
+      /* @__PURE__ */ s("input", { ref: n, type: "radio", className: T.input, disabled: e, ...a }),
+      /* @__PURE__ */ s("span", { className: T.indicator }),
+      c && /* @__PURE__ */ s("span", { className: T.label, children: c })
     ] });
   }
 );
-J.displayName = "Radio";
-const K = v(
-  ({ disabled: e = !1, required: n = !1, children: t, className: d, ...a }, o) => {
-    const c = I({
+ee.displayName = "Radio";
+const te = f(
+  ({ disabled: e = !1, required: c = !1, children: i, className: a, ...n }, t) => {
+    const o = N({
       disabled: e,
-      required: n
+      required: c
     });
-    return /* @__PURE__ */ C("label", { className: b($.checkbox, d), ...c, children: [
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ g("label", { className: y(j.checkbox, a), ...o, children: [
+      /* @__PURE__ */ s(
         "input",
         {
-          ref: o,
+          ref: t,
           type: "checkbox",
-          className: $.input,
+          className: j.input,
           disabled: e,
-          required: n,
-          "aria-required": n || void 0,
-          ...a
+          required: c,
+          "aria-required": c || void 0,
+          ...n
         }
       ),
-      /* @__PURE__ */ i("span", { className: $.indicator }),
-      t && /* @__PURE__ */ i("span", { className: $.label, "data-required": n || void 0, children: t })
+      /* @__PURE__ */ s("span", { className: j.indicator }),
+      i && /* @__PURE__ */ s("span", { className: j.label, "data-required": c || void 0, children: i })
     ] });
   }
 );
-K.displayName = "Checkbox";
-const M = T(void 0);
-function le() {
-  const e = E(M);
+te.displayName = "Checkbox";
+const oe = P(void 0);
+function Te() {
+  const e = Q(oe);
   if (!e)
     throw new Error("RadioGroup.Option must be used within RadioGroup");
   return e;
 }
-const Q = v(
+const ne = f(
   ({
     value: e,
-    onChange: n,
-    name: t,
-    label: d,
-    helper: a,
-    error: o,
-    required: c = !1,
-    disabled: s = !1,
+    onChange: c,
+    name: i,
+    label: a,
+    helper: n,
+    error: t,
+    required: o = !1,
+    disabled: r = !1,
     direction: l = "column",
-    children: f,
-    className: p,
-    ...x
-  }, m) => {
-    const u = S(), r = x.id || u, h = a ? `${r}-helper` : void 0, y = o ? `${r}-error` : void 0, N = [h, y].filter(Boolean).join(" "), g = (A) => {
-      !s && n && n(A);
-    }, G = I({
-      disabled: s
+    children: d,
+    className: u,
+    ...h
+  }, b) => {
+    const m = A(), p = h.id || m, x = n ? `${p}-helper` : void 0, C = t ? `${p}-error` : void 0, I = [x, C].filter(Boolean).join(" "), w = (S) => {
+      !r && c && c(S);
+    }, O = N({
+      disabled: r
     });
-    return /* @__PURE__ */ C("div", { ref: m, className: b(P.field, p), ...G, ...x, children: [
-      d && /* @__PURE__ */ i(k, { required: c, disabled: s, children: d }),
-      /* @__PURE__ */ i(M.Provider, { value: { disabled: s, name: t, onChange: g, value: e }, children: /* @__PURE__ */ i(
+    return /* @__PURE__ */ g("div", { ref: b, className: y(X.field, u), ...O, ...h, children: [
+      a && /* @__PURE__ */ s(k, { required: o, disabled: r, children: a }),
+      /* @__PURE__ */ s(oe.Provider, { value: { disabled: r, name: i, onChange: w, value: e }, children: /* @__PURE__ */ s(
         "div",
         {
-          className: P.options,
+          className: X.options,
           "data-direction": l,
           role: "radiogroup",
-          "aria-describedby": N || void 0,
-          "aria-invalid": o ? "true" : void 0,
-          children: f
+          "aria-describedby": I || void 0,
+          "aria-invalid": t ? "true" : void 0,
+          children: d
         }
       ) }),
-      o && /* @__PURE__ */ i(O, { id: y, children: o }),
-      !o && a && /* @__PURE__ */ i(B, { id: h, children: a })
+      t && /* @__PURE__ */ s(R, { id: C, children: t }),
+      !t && n && /* @__PURE__ */ s(B, { id: x, children: n })
     ] });
   }
 );
-Q.displayName = "RadioGroup";
-const U = v(
-  ({ value: e, children: n, disabled: t, ...d }, a) => {
-    const o = le(), c = o.value === e, s = o.disabled || t, l = () => {
-      s || o.onChange(e);
+ne.displayName = "RadioGroup";
+const ie = f(
+  ({ value: e, children: c, disabled: i, ...a }, n) => {
+    const t = Te(), o = t.value === e, r = t.disabled || i, l = () => {
+      r || t.onChange(e);
     };
-    return /* @__PURE__ */ i(
-      J,
+    return /* @__PURE__ */ s(
+      ee,
       {
-        ref: a,
-        name: o.name,
+        ref: n,
+        name: t.name,
         value: e,
-        checked: c,
-        disabled: s,
+        checked: o,
+        disabled: r,
         onChange: l,
-        ...d,
-        children: n
+        ...a,
+        children: c
       }
     );
   }
 );
-U.displayName = "RadioGroup.Option";
-const xe = Object.assign(Q, {
-  Option: U
-}), W = T(void 0);
-function re() {
-  const e = E(W);
+ie.displayName = "RadioGroup.Option";
+const Xe = Object.assign(ne, {
+  Option: ie
+}), se = P(void 0);
+function je() {
+  const e = Q(se);
   if (!e)
     throw new Error("CheckboxGroup.Option must be used within CheckboxGroup");
   return e;
 }
-const X = v(
+const ae = f(
   ({
     value: e,
-    onChange: n,
-    name: t,
-    label: d,
-    helper: a,
-    error: o,
-    required: c = !1,
-    disabled: s = !1,
+    onChange: c,
+    name: i,
+    label: a,
+    helper: n,
+    error: t,
+    required: o = !1,
+    disabled: r = !1,
     direction: l = "column",
-    children: f,
-    className: p,
-    ...x
-  }, m) => {
-    const u = S(), r = x.id || u, h = a ? `${r}-helper` : void 0, y = o ? `${r}-error` : void 0, N = [h, y].filter(Boolean).join(" "), g = (A) => {
-      !s && n && n(A);
-    }, G = I({
-      disabled: s
+    children: d,
+    className: u,
+    ...h
+  }, b) => {
+    const m = A(), p = h.id || m, x = n ? `${p}-helper` : void 0, C = t ? `${p}-error` : void 0, I = [x, C].filter(Boolean).join(" "), w = (S) => {
+      !r && c && c(S);
+    }, O = N({
+      disabled: r
     });
-    return /* @__PURE__ */ C("div", { ref: m, className: b(V.field, p), ...G, ...x, children: [
-      d && /* @__PURE__ */ i(k, { required: c, disabled: s, children: d }),
-      /* @__PURE__ */ i(W.Provider, { value: { disabled: s, name: t, onChange: g, value: e }, children: /* @__PURE__ */ i(
+    return /* @__PURE__ */ g("div", { ref: b, className: y(J.field, u), ...O, ...h, children: [
+      a && /* @__PURE__ */ s(k, { required: o, disabled: r, children: a }),
+      /* @__PURE__ */ s(se.Provider, { value: { disabled: r, name: i, onChange: w, value: e }, children: /* @__PURE__ */ s(
         "div",
         {
-          className: V.options,
+          className: J.options,
           "data-direction": l,
           role: "group",
-          "aria-describedby": N || void 0,
-          "aria-invalid": o ? "true" : void 0,
-          children: f
+          "aria-describedby": I || void 0,
+          "aria-invalid": t ? "true" : void 0,
+          children: d
         }
       ) }),
-      o && /* @__PURE__ */ i(O, { id: y, children: o }),
-      !o && a && /* @__PURE__ */ i(B, { id: h, children: a })
+      t && /* @__PURE__ */ s(R, { id: C, children: t }),
+      !t && n && /* @__PURE__ */ s(B, { id: x, children: n })
     ] });
   }
 );
-X.displayName = "CheckboxGroup";
-const Y = v(
-  ({ value: e, children: n, disabled: t, ...d }, a) => {
-    const o = re(), c = o.value.includes(e), s = o.disabled || t, l = () => {
-      if (!s) {
-        const f = c ? o.value.filter((p) => p !== e) : [...o.value, e];
-        o.onChange(f);
+ae.displayName = "CheckboxGroup";
+const ce = f(
+  ({ value: e, children: c, disabled: i, ...a }, n) => {
+    const t = je(), o = t.value.includes(e), r = t.disabled || i, l = () => {
+      if (!r) {
+        const d = o ? t.value.filter((u) => u !== e) : [...t.value, e];
+        t.onChange(d);
       }
     };
-    return /* @__PURE__ */ i(
-      K,
+    return /* @__PURE__ */ s(
+      te,
       {
-        ref: a,
-        name: o.name,
+        ref: n,
+        name: t.name,
         value: e,
-        checked: c,
-        disabled: s,
+        checked: o,
+        disabled: r,
         onChange: l,
-        ...d,
-        children: n
+        ...a,
+        children: c
       }
     );
   }
 );
-Y.displayName = "CheckboxGroup.Option";
-const ye = Object.assign(X, {
-  Option: Y
-}), Z = T(void 0);
-function pe() {
-  const e = E(Z);
+ce.displayName = "CheckboxGroup.Option";
+const Je = Object.assign(ae, {
+  Option: ce
+}), re = P(void 0);
+function Le() {
+  const e = Q(re);
   if (!e)
     throw new Error("ChipInput.Option must be used within ChipInput");
   return e;
 }
-const q = v(
+const le = f(
   ({
     value: e,
-    onChange: n,
-    multiple: t = !1,
-    name: d,
-    label: a,
-    helper: o,
-    error: c,
-    required: s = !1,
+    onChange: c,
+    multiple: i = !1,
+    name: a,
+    label: n,
+    helper: t,
+    error: o,
+    required: r = !1,
     disabled: l = !1,
-    gap: f = "2",
-    wrap: p = !0,
-    children: x,
-    className: m,
-    ...u
-  }, r) => {
-    const h = S(), y = u.id || h, N = o ? `${y}-helper` : void 0, g = c ? `${y}-error` : void 0, G = [N, g].filter(Boolean).join(" "), A = (ne) => {
-      l || n(ne);
-    }, te = I({
-      invalid: !!c
-    }), oe = t ? "group" : "radiogroup";
-    return /* @__PURE__ */ C("div", { ref: r, className: b(j.field, m), ...te, ...u, children: [
-      a && /* @__PURE__ */ i(k, { required: s, disabled: l, children: a }),
-      /* @__PURE__ */ i(
-        Z.Provider,
+    gap: d = "2",
+    wrap: u = !0,
+    children: h,
+    className: b,
+    ...m
+  }, p) => {
+    const x = A(), C = m.id || x, I = t ? `${C}-helper` : void 0, w = o ? `${C}-error` : void 0, O = [I, w].filter(Boolean).join(" "), S = (z) => {
+      l || c(z);
+    }, V = N({
+      invalid: !!o
+    }), F = i ? "group" : "radiogroup";
+    return /* @__PURE__ */ g("div", { ref: p, className: y(M.field, b), ...V, ...m, children: [
+      n && /* @__PURE__ */ s(k, { required: r, disabled: l, children: n }),
+      /* @__PURE__ */ s(
+        re.Provider,
         {
           value: {
             disabled: l,
-            multiple: t,
-            name: d,
-            onChange: A,
+            multiple: i,
+            name: a,
+            onChange: S,
             value: e
           },
-          children: /* @__PURE__ */ i(
+          children: /* @__PURE__ */ s(
             "div",
             {
-              className: j.options,
-              "data-gap": f,
-              "data-wrap": p,
-              role: oe,
-              "aria-describedby": G || void 0,
-              "aria-invalid": c ? "true" : void 0,
-              children: x
+              className: M.options,
+              "data-gap": d,
+              "data-wrap": u,
+              role: F,
+              "aria-describedby": O || void 0,
+              "aria-invalid": o ? "true" : void 0,
+              children: h
             }
           )
         }
       ),
-      c && /* @__PURE__ */ i(O, { id: g, children: c }),
-      !c && o && /* @__PURE__ */ i(B, { id: N, children: o })
+      o && /* @__PURE__ */ s(R, { id: w, children: o }),
+      !o && t && /* @__PURE__ */ s(B, { id: I, children: t })
     ] });
   }
 );
-q.displayName = "ChipInput";
-const ee = v(
-  ({ value: e, children: n, disabled: t, iconLeft: d, iconRight: a, ...o }, c) => {
-    const s = pe(), l = s.disabled || t, f = !!(d || a);
-    let p = !1;
-    s.multiple ? p = Array.isArray(s.value) && s.value.includes(e) : p = s.value === e;
-    const x = () => {
+le.displayName = "ChipInput";
+const de = f(
+  ({ value: e, children: c, disabled: i, iconLeft: a, iconRight: n, ...t }, o) => {
+    const r = Le(), l = r.disabled || i, d = !!(a || n);
+    let u = !1;
+    r.multiple ? u = Array.isArray(r.value) && r.value.includes(e) : u = r.value === e;
+    const h = () => {
       if (!l)
-        if (s.multiple) {
-          const u = Array.isArray(s.value) ? s.value : [], r = p ? u.filter((h) => h !== e) : [...u, e];
-          s.onChange(r);
+        if (r.multiple) {
+          const m = Array.isArray(r.value) ? r.value : [], p = u ? m.filter((x) => x !== e) : [...m, e];
+          r.onChange(p);
         } else
-          s.onChange(e);
-    }, m = I({
+          r.onChange(e);
+    }, b = N({
       disabled: l,
-      selected: p,
-      ...f && { "has-icon": !0 }
+      selected: u,
+      ...d && { "has-icon": !0 }
     });
-    return /* @__PURE__ */ C(
+    return /* @__PURE__ */ g(
       "button",
       {
-        ref: c,
+        ref: o,
         type: "button",
-        className: j.option,
-        onClick: x,
+        className: M.option,
+        onClick: h,
         disabled: l,
-        "aria-pressed": p,
-        ...m,
-        ...o,
+        "aria-pressed": u,
+        ...b,
+        ...t,
+        children: [
+          a,
+          c,
+          n
+        ]
+      }
+    );
+  }
+);
+de.displayName = "ChipInput.Option";
+const Ue = Object.assign(le, {
+  Option: de
+}), pe = P(void 0);
+function E() {
+  const e = Q(pe);
+  if (!e)
+    throw new Error("ComboboxInput subcomponents must be used within ComboboxInput");
+  return e;
+}
+const ue = f(
+  ({ children: e, className: c, ...i }, a) => {
+    const n = E();
+    return /* @__PURE__ */ s(U, { open: n.isOpen, onOpenChange: (t) => !t && n.closeListbox(), placement: "right", children: /* @__PURE__ */ s(U.Body, { children: /* @__PURE__ */ g("div", { className: v["drawer-container"], children: [
+      /* @__PURE__ */ s("div", { className: v["drawer-input-wrapper"], children: /* @__PURE__ */ s(
+        "input",
+        {
+          type: "text",
+          className: v["drawer-input"],
+          placeholder: "Search options...",
+          value: n.searchQuery || "",
+          onChange: (t) => {
+            var o;
+            return (o = n.setSearchQuery) == null ? void 0 : o.call(n, t.currentTarget.value);
+          },
+          "aria-label": "Search options"
+        }
+      ) }),
+      /* @__PURE__ */ s(
+        "ul",
+        {
+          ref: a,
+          role: "listbox",
+          "aria-multiselectable": "true",
+          className: y(v["drawer-listbox"], c),
+          ...i,
+          children: e
+        }
+      )
+    ] }) }) });
+  }
+);
+ue.displayName = "ComboboxInput.Drawer";
+function Pe(e) {
+  const [c, i] = D(e), [a, n] = D(!1), [t, o] = D(() => /* @__PURE__ */ new Map());
+  $(() => {
+    i(e);
+  }, [e]);
+  const r = L(() => {
+    n((h) => !h);
+  }, []), l = L(() => {
+    n(!1);
+  }, []), d = L((h, b) => {
+    o((m) => {
+      const p = new Map(m);
+      return p.set(h, b), p;
+    });
+  }, []), u = L((h) => {
+    o((b) => {
+      const m = new Map(b);
+      return m.delete(h), m;
+    });
+  }, []);
+  return {
+    internalValue: c,
+    setInternalValue: i,
+    isOpen: a,
+    toggleOpen: r,
+    closeListbox: l,
+    optionRegistry: t,
+    registerOption: d,
+    unregisterOption: u
+  };
+}
+function Qe(e, c) {
+  const [i, a] = D("bottom"), n = Be(null);
+  return $(() => {
+    if (c !== "popup" || !e) return;
+    const t = n.current;
+    if (!t) return;
+    t.matches(":popover-open") || t.showPopover(), requestAnimationFrame(() => {
+      const r = t.previousElementSibling;
+      if (!r) return;
+      const l = r.getBoundingClientRect(), d = t.getBoundingClientRect(), u = {
+        width: d.width,
+        height: d.height
+      }, h = Re(
+        l,
+        u,
+        100,
+        ["top", "bottom"]
+      );
+      a(h);
+    });
+  }, [e, c]), { internalRef: n, placement: i };
+}
+const he = f(
+  ({ children: e, className: c, ...i }, a) => {
+    const n = E(), { internalRef: t, placement: o } = Qe(n.isOpen, n.variant);
+    $(() => {
+      const l = t.current;
+      if (!l) return;
+      const d = () => {
+        l.matches(":popover-open") || n.closeListbox();
+      };
+      return l.addEventListener("toggle", d), () => l.removeEventListener("toggle", d);
+    }, [n, t]);
+    const r = N({ placement: o });
+    return /* @__PURE__ */ s(
+      "ul",
+      {
+        ref: (l) => {
+          t.current = l, typeof a == "function" ? a(l) : a && (a.current = l);
+        },
+        role: "listbox",
+        "aria-multiselectable": "true",
+        className: y(v.listbox, c),
+        popover: "auto",
+        ...r,
+        style: {
+          positionAnchor: n.anchorName
+        },
+        ...i,
+        children: /* @__PURE__ */ g("div", { className: v["listbox-inner"], children: [
+          /* @__PURE__ */ s("div", { className: v["drawer-input-wrapper"], children: /* @__PURE__ */ s(
+            "input",
+            {
+              type: "text",
+              className: v["drawer-input"],
+              placeholder: "Search options...",
+              value: n.searchQuery || "",
+              onChange: (l) => {
+                var d;
+                return (d = n.setSearchQuery) == null ? void 0 : d.call(n, l.currentTarget.value);
+              },
+              "aria-label": "Search options"
+            }
+          ) }),
+          e
+        ] })
+      }
+    );
+  }
+);
+he.displayName = "ComboboxInput.Listbox";
+const me = f(
+  ({
+    value: e,
+    onChange: c,
+    variant: i = "popup",
+    disabled: a = !1,
+    invalid: n = !1,
+    label: t,
+    helper: o,
+    error: r,
+    required: l = !1,
+    children: d,
+    className: u,
+    ...h
+  }, b) => {
+    const m = A(), p = h.id || m, x = o ? `${p}-helper` : void 0, C = r ? `${p}-error` : void 0, I = [x, C].filter(Boolean).join(" "), w = `--combobox-anchor-${p.replace(/[^a-z0-9-]/gi, "")}`, {
+      internalValue: O,
+      setInternalValue: S,
+      isOpen: V,
+      toggleOpen: F,
+      closeListbox: z,
+      optionRegistry: ve,
+      registerOption: Ce,
+      unregisterOption: ge
+    } = Pe(e), [ye, Ne] = D("");
+    $(() => {
+      S(e);
+    }, [e, S]);
+    const Ie = (H) => {
+      a || (S(H), c(H));
+    }, we = N({
+      invalid: !!(r || n),
+      disabled: a
+    });
+    return /* @__PURE__ */ g("div", { ref: b, className: y(v.field, u), ...we, ...h, children: [
+      t && /* @__PURE__ */ s(k, { required: l, disabled: a, children: t }),
+      /* @__PURE__ */ s(
+        pe.Provider,
+        {
+          value: {
+            value: O,
+            onChange: Ie,
+            isOpen: V,
+            toggleOpen: F,
+            closeListbox: z,
+            variant: i,
+            anchorName: w,
+            optionRegistry: ve,
+            registerOption: Ce,
+            unregisterOption: ge,
+            disabled: a,
+            searchQuery: ye,
+            setSearchQuery: Ne
+          },
+          children: /* @__PURE__ */ s("div", { className: v.root, "aria-describedby": I || void 0, children: d })
+        }
+      ),
+      r && /* @__PURE__ */ s(R, { id: C, children: r }),
+      !r && o && /* @__PURE__ */ s(B, { id: x, children: o })
+    ] });
+  }
+);
+me.displayName = "ComboboxInput";
+const be = f(
+  ({ children: e, className: c, iconLeft: i, iconRight: a, ...n }, t) => {
+    const o = E(), r = o.value.length === 0, l = N({
+      open: o.isOpen,
+      disabled: o.disabled,
+      "has-left-icon": !!i,
+      "has-right-icon": !0
+    }), d = {
+      anchorName: o.anchorName
+    }, u = e || (r ? "Select" : `${o.value.length} selected`);
+    return /* @__PURE__ */ g(
+      "button",
+      {
+        ref: t,
+        type: "button",
+        className: y(v.button, c),
+        onClick: () => !o.disabled && o.toggleOpen(),
+        disabled: o.disabled,
+        "aria-expanded": o.isOpen,
+        "aria-haspopup": "listbox",
+        style: d,
+        ...l,
+        ...n,
         children: [
-          d,
-          n,
-          a
+          i && /* @__PURE__ */ s("span", { className: v["left-icon"], children: i }),
+          /* @__PURE__ */ s("span", { className: v["button-content"], ...r && { "data-placeholder": "" }, children: u }),
+          a ? /* @__PURE__ */ s("span", { className: v["right-icon"], children: a }) : /* @__PURE__ */ s("span", { className: v["right-icon"], "data-chevron": !0, children: /* @__PURE__ */ s(Ae, {}) })
         ]
       }
     );
   }
 );
-ee.displayName = "ChipInput.Option";
-const Ce = Object.assign(q, {
-  Option: ee
+be.displayName = "ComboboxInput.Button";
+const xe = f(
+  ({ value: e, children: c, disabled: i = !1, className: a, ...n }, t) => {
+    const o = E(), r = o.disabled || i, l = o.value.includes(e), d = typeof c == "string" ? c : String(e), u = !o.searchQuery || d.toLowerCase().includes(o.searchQuery.toLowerCase()) || e.toLowerCase().includes(o.searchQuery.toLowerCase());
+    $(() => (o.registerOption(e, d), () => o.unregisterOption(e)), [e, d, o.registerOption, o.unregisterOption]);
+    const h = () => {
+      if (r) return;
+      const p = l ? o.value.filter((x) => x !== e) : [...o.value, e];
+      o.onChange(p);
+    }, b = (p) => {
+      (p.key === "Enter" || p.key === " ") && (p.preventDefault(), h());
+    }, m = N({ selected: l, disabled: r });
+    return u ? /* @__PURE__ */ g(
+      "li",
+      {
+        ref: t,
+        role: "option",
+        className: y(v.option, a),
+        onClick: h,
+        onKeyDown: b,
+        "aria-selected": l,
+        tabIndex: r ? -1 : 0,
+        ...m,
+        ...n,
+        children: [
+          /* @__PURE__ */ s("span", { className: v["option-check"], children: /* @__PURE__ */ s(Ge, { width: "1em", height: "1em" }) }),
+          /* @__PURE__ */ s("span", { children: c })
+        ]
+      }
+    ) : null;
+  }
+);
+xe.displayName = "ComboboxInput.Option";
+const fe = f(
+  ({ className: e, ...c }, i) => {
+    const a = E();
+    if (a.value.length === 0) return null;
+    const n = (t) => {
+      a.onChange(a.value.filter((o) => o !== t));
+    };
+    return /* @__PURE__ */ s("div", { ref: i, className: y(v.chips, e), role: "group", ...c, children: a.value.map((t) => {
+      const o = a.optionRegistry.get(t) ?? t;
+      return /* @__PURE__ */ g("div", { className: v.chip, ...N({ disabled: a.disabled }), children: [
+        /* @__PURE__ */ s("span", { children: o }),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: v["chip-remove"],
+            onClick: () => n(t),
+            disabled: a.disabled,
+            "aria-label": `Remove ${o}`,
+            children: /* @__PURE__ */ s(De, { width: "1em", height: "1em" })
+          }
+        )
+      ] }, t);
+    }) });
+  }
+);
+fe.displayName = "ComboboxInput.SelectionChips";
+const We = Object.assign(me, {
+  Button: be,
+  Listbox: he,
+  Drawer: ue,
+  Option: xe,
+  SelectionChips: fe
 });
 export {
-  K as Checkbox,
-  ye as CheckboxGroup,
-  Ce as ChipInput,
-  O as ErrorText,
+  te as Checkbox,
+  Je as CheckboxGroup,
+  Ue as ChipInput,
+  We as ComboboxInput,
+  R as ErrorText,
   B as HelperText,
   k as Label,
-  J as Radio,
-  xe as RadioGroup,
-  z as Select,
-  ce as TextArea,
-  de as TextInput
+  ee as Radio,
+  Xe as RadioGroup,
+  q as Select,
+  Ee as TextArea,
+  $e as TextInput
 };