@component-labs/ui 0.0.1

package/dist/combobox.js

@@ -0,0 +1,948 @@
+import { jsxs as re, jsx as V } from "react/jsx-runtime";
+import { u as $e, C as Ge, a as Je, c as Qe, b as Xe, d as Ye } from "./IQYAUKXT-CoP_Jrsi.js";
+import { u as te, a as Ze, b as Se, C as he, c as et, d as tt, e as nt, f as ot, g as rt, h as at, i as it, j as lt, k as ut, l as st } from "./X6LNAU2F-DroCIVyL.js";
+import { f as J, c as Q, a as X, i as Y, u as ct, b as dt, g as ge, s as oe, n as mt, d as R, e as ft, h as ae, j as Ee, k as B, l as Pe, m as Ve, o as bt, p as we, q as ie, r as vt, t as xt, v as gt, w as le, x as pt, y as Ct, z as yt, A as St, B as ht, C as Et, D as Pt, E as Vt, F as T, G as wt, H as It, I as kt } from "./U6HHPQDW-BkT6kvCd.js";
+import { s as z, u as At, a as Ot, m as Lt, p as Nt, t as Ft, c as Tt, b as $, d as Bt, e as Dt, f as ee } from "./Q5W46E73-DjlVG3LH.js";
+import { useRef as H, useState as ue, useEffect as G, useMemo as Ie, Fragment as Rt, useCallback as Kt, useContext as Mt, createContext as ke, forwardRef as _t, startTransition as Ht } from "react";
+import { u as jt } from "./HMKTUWOU-DlOdK4rt.js";
+import { i as Ut, c as qt } from "./Z32PU2LQ-CPSDShGU.js";
+import { c as pe, a as Ae } from "./utils-BZvHF7th.js";
+var zt = "input";
+function Ce(n, e, o) {
+  if (!o) return !1;
+  const i = n.find((r) => !r.disabled && r.value);
+  return (i == null ? void 0 : i.value) === e;
+}
+function ye(n, e) {
+  return !e || n == null ? !1 : (n = xt(n), e.length > n.length && e.toLowerCase().indexOf(n.toLowerCase()) === 0);
+}
+function Wt(n) {
+  return n.type === "input";
+}
+function $t(n) {
+  return n === "inline" || n === "list" || n === "both" || n === "none";
+}
+function Gt(n) {
+  const e = n.find((o) => {
+    var i;
+    return o.disabled ? !1 : ((i = o.element) == null ? void 0 : i.getAttribute("role")) !== "tab";
+  });
+  return e == null ? void 0 : e.id;
+}
+var Jt = Q(
+  function({
+    store: e,
+    focusable: o = !0,
+    autoSelect: i = !1,
+    getAutoSelectId: r,
+    setValueOnChange: y,
+    showMinLength: g = 0,
+    showOnChange: v,
+    showOnMouseDown: h,
+    showOnClick: f = h,
+    showOnKeyDown: s,
+    showOnKeyPress: O = s,
+    blurActiveItemOnClick: a,
+    setValueOnClick: u = !0,
+    moveOnKeyPress: x = !0,
+    autoComplete: m = "list",
+    ...b
+  }) {
+    const w = te();
+    e = e || w, Y(
+      e,
+      process.env.NODE_ENV !== "production" && "Combobox must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
+    const d = H(null), [F, I] = ct(), E = H(!1), K = H(!1), L = e.useState(
+      (t) => t.virtualFocus && i
+    ), A = m === "inline" || m === "both", [j, W] = ue(A);
+    dt(() => {
+      A && W(!0);
+    }, [A]);
+    const l = e.useState("value"), S = H(void 0);
+    G(() => z(e, ["selectedValue", "activeId"], (t, c) => {
+      S.current = c.selectedValue;
+    }), []);
+    const P = e.useState((t) => {
+      var c;
+      if (A && j && !(t.activeValue && Array.isArray(t.selectedValue) && (t.selectedValue.includes(t.activeValue) || (c = S.current) != null && c.includes(t.activeValue))))
+        return t.activeValue;
+    }), U = e.useState("renderedItems"), M = e.useState("open"), _ = e.useState("contentElement"), Z = Ie(() => {
+      if (!A || !j) return l;
+      if (Ce(
+        U,
+        P,
+        L
+      )) {
+        if (ye(l, P)) {
+          const c = (P == null ? void 0 : P.slice(l.length)) || "";
+          return l + c;
+        }
+        return l;
+      }
+      return P || l;
+    }, [A, j, U, P, L, l]);
+    G(() => {
+      const t = d.current;
+      if (!t) return;
+      const c = () => W(!0);
+      return t.addEventListener("combobox-item-move", c), () => {
+        t.removeEventListener("combobox-item-move", c);
+      };
+    }, []), G(() => {
+      if (!A || !j || !P || !Ce(
+        U,
+        P,
+        L
+      ) || !ye(l, P)) return;
+      let c = mt;
+      return queueMicrotask(() => {
+        const p = d.current;
+        if (!p) return;
+        const { start: C, end: N } = ge(p), D = l.length, k = P.length;
+        oe(p, D, k), c = () => {
+          if (!ie(p)) return;
+          const { start: q, end: We } = ge(p);
+          q === D && We === k && oe(p, C, N);
+        };
+      }), () => c();
+    }, [
+      F,
+      A,
+      j,
+      P,
+      U,
+      L,
+      l
+    ]);
+    const Le = H(null), se = R(r), ce = H(null);
+    G(() => {
+      if (!M || !_) return;
+      const t = ft(_);
+      if (!t) return;
+      Le.current = t;
+      const c = () => {
+        E.current = !1;
+      }, p = () => {
+        if (!e || !E.current) return;
+        const { activeId: N } = e.getState();
+        N !== null && N !== ce.current && (E.current = !1);
+      }, C = { passive: !0, capture: !0 };
+      return t.addEventListener("wheel", c, C), t.addEventListener("touchmove", c, C), t.addEventListener("scroll", p, C), () => {
+        t.removeEventListener("wheel", c, !0), t.removeEventListener("touchmove", c, !0), t.removeEventListener("scroll", p, !0);
+      };
+    }, [M, _, e]), ae(() => {
+      l && (K.current || (E.current = !0));
+    }, [l]), ae(() => {
+      L !== "always" && M || (E.current = M);
+    }, [L, M]);
+    const de = e.useState("resetValueOnSelect");
+    Ee(() => {
+      var t, c;
+      const p = E.current;
+      if (!e || !M || !p && !de) return;
+      const { baseElement: C, contentElement: N, activeId: D } = e.getState();
+      if (!(C && !ie(C))) {
+        if (N != null && N.hasAttribute("data-placing")) {
+          const k = new MutationObserver(I);
+          return k.observe(N, { attributeFilter: ["data-placing"] }), () => k.disconnect();
+        }
+        if (L && p) {
+          const k = se(U), q = k !== void 0 ? k : (t = Gt(U)) != null ? t : e.first();
+          ce.current = q, e.move(q ?? null);
+        } else {
+          const k = (c = e.item(D || e.first())) == null ? void 0 : c.element;
+          k && "scrollIntoView" in k && k.scrollIntoView({ block: "nearest", inline: "nearest" });
+        }
+      }
+    }, [
+      e,
+      M,
+      F,
+      l,
+      L,
+      de,
+      se,
+      U
+    ]), G(() => {
+      if (!A) return;
+      const t = d.current;
+      if (!t) return;
+      const c = [t, _].filter(
+        (C) => !!C
+      ), p = (C) => {
+        c.every((N) => vt(C, N)) && (e == null || e.setValue(Z));
+      };
+      for (const C of c)
+        C.addEventListener("focusout", p);
+      return () => {
+        for (const C of c)
+          C.removeEventListener("focusout", p);
+      };
+    }, [A, _, e, Z]);
+    const ne = (t) => t.currentTarget.value.length >= g, me = b.onChange, Ne = B(v ?? ne), Fe = B(
+      // If the combobox is combined with tags, the value will be set by the tag
+      // input component.
+      y ?? !e.tag
+    ), Te = R((t) => {
+      if (me == null || me(t), t.defaultPrevented || !e) return;
+      const c = t.currentTarget, { value: p, selectionStart: C, selectionEnd: N } = c, D = t.nativeEvent;
+      if (E.current = !0, Wt(D) && (D.isComposing && (E.current = !1, K.current = !0), A)) {
+        const k = D.inputType === "insertText" || D.inputType === "insertCompositionText", q = C === p.length;
+        W(k && q);
+      }
+      if (Fe(t)) {
+        const k = p === e.getState().value;
+        e.setValue(p), queueMicrotask(() => {
+          oe(c, C, N);
+        }), A && L && k && I();
+      }
+      Ne(t) && e.show(), (!L || !E.current) && e.setActiveId(null);
+    }), fe = b.onCompositionEnd, Be = R((t) => {
+      E.current = !0, K.current = !1, fe == null || fe(t), !t.defaultPrevented && L && I();
+    }), be = b.onMouseDown, De = B(
+      a ?? (() => !!(e != null && e.getState().includesBaseElement))
+    ), Re = B(u), Ke = B(f ?? ne), Me = R((t) => {
+      be == null || be(t), !t.defaultPrevented && (t.button || t.ctrlKey || e && (De(t) && e.setActiveId(null), Re(t) && e.setValue(Z), Ke(t) && gt(t.currentTarget, "mouseup", e.show)));
+    }), ve = b.onKeyDown, _e = B(O ?? ne), He = R((t) => {
+      if (ve == null || ve(t), t.repeat || (E.current = !1), t.defaultPrevented || t.ctrlKey || t.altKey || t.shiftKey || t.metaKey || !e) return;
+      const { open: c } = e.getState();
+      c || (t.key === "ArrowUp" || t.key === "ArrowDown") && _e(t) && (t.preventDefault(), e.show());
+    }), xe = b.onBlur, je = R((t) => {
+      E.current = !1, xe == null || xe(t), t.defaultPrevented;
+    }), Ue = Pe(b.id), qe = $t(m) ? m : void 0, ze = e.useState((t) => t.activeId === null);
+    return b = {
+      id: Ue,
+      role: "combobox",
+      "aria-autocomplete": qe,
+      "aria-haspopup": bt(_, "listbox"),
+      "aria-expanded": M,
+      "aria-controls": _ == null ? void 0 : _.id,
+      "data-active-item": ze || void 0,
+      value: Z,
+      ...b,
+      ref: Ve(d, b.ref),
+      onChange: Te,
+      onCompositionEnd: Be,
+      onMouseDown: Me,
+      onKeyDown: He,
+      onBlur: je
+    }, b = $e({
+      store: e,
+      focusable: o,
+      ...b,
+      // Enable inline autocomplete when the user moves from the combobox input
+      // to an item.
+      moveOnKeyPress: (t) => we(x, t) ? !1 : (A && W(!0), !0)
+    }), b = Ze({ store: e, ...b }), { autoComplete: "off", ...b };
+  }
+), Qt = J(function(e) {
+  const o = Jt(e);
+  return X(zt, o);
+}), Xt = "button", Yt = /* @__PURE__ */ re(
+  "svg",
+  {
+    "aria-hidden": "true",
+    display: "block",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    width: "1em",
+    height: "1em",
+    pointerEvents: "none",
+    children: [
+      /* @__PURE__ */ V("line", { x1: "5", y1: "5", x2: "11", y2: "11" }),
+      /* @__PURE__ */ V("line", { x1: "5", y1: "11", x2: "11", y2: "5" })
+    ]
+  }
+), Zt = Q(
+  function({ store: e, hideWhenEmpty: o, ...i }) {
+    const r = te();
+    e = e || r, Y(
+      e,
+      process.env.NODE_ENV !== "production" && "ComboboxCancel must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
+    const y = i.onClick, g = R((f) => {
+      y == null || y(f), !f.defaultPrevented && (e == null || e.setValue(""), e == null || e.move(null));
+    }), v = e.useState((f) => {
+      var s;
+      return (s = f.baseElement) == null ? void 0 : s.id;
+    }), h = e.useState((f) => f.value === "");
+    return i = le(
+      i,
+      (f) => o && h ? /* @__PURE__ */ V(Rt, {}) : f,
+      [o, h]
+    ), i = {
+      children: Yt,
+      "aria-label": "Clear input",
+      // This aria-controls will ensure the combobox popup remains visible when
+      // this element gets focused. This logic is done in the ComboboxPopover
+      // component.
+      "aria-controls": v,
+      ...i,
+      onClick: g
+    }, i = jt(i), i;
+  }
+), en = J(function(e) {
+  const o = Zt(e);
+  return X(Xt, o);
+}), tn = "div";
+function nn(n, e) {
+  if (e != null)
+    return n == null ? !1 : Array.isArray(n) ? n.includes(e) : n === e;
+}
+function on(n) {
+  var e;
+  return (e = {
+    menu: "menuitem",
+    listbox: "option",
+    tree: "treeitem"
+  }[n]) != null ? e : "option";
+}
+var rn = Q(
+  function({
+    store: e,
+    value: o,
+    hideOnClick: i,
+    setValueOnClick: r,
+    selectValueOnClick: y = !0,
+    resetValueOnSelect: g,
+    focusOnHover: v = !1,
+    moveOnKeyPress: h = !0,
+    getItem: f,
+    ...s
+  }) {
+    var O;
+    const a = Se();
+    e = e || a, Y(
+      e,
+      process.env.NODE_ENV !== "production" && "ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component."
+    );
+    const { resetValueOnSelectState: u, multiSelectable: x, selected: m } = At(e, {
+      resetValueOnSelectState: "resetValueOnSelect",
+      multiSelectable(l) {
+        return Array.isArray(l.selectedValue);
+      },
+      selected(l) {
+        return nn(l.selectedValue, o);
+      }
+    }), b = Kt(
+      (l) => {
+        const S = { ...l, value: o };
+        return f ? f(S) : S;
+      },
+      [o, f]
+    );
+    r = r ?? !x, i = i ?? (o != null && !x);
+    const w = s.onClick, d = B(r), F = B(y), I = B(
+      (O = g ?? u) != null ? O : x
+    ), E = B(i), K = R((l) => {
+      w == null || w(l), !l.defaultPrevented && (yt(l) || St(l) || (o != null && (F(l) && (I(l) && (e == null || e.resetValue()), e == null || e.setSelectedValue((S) => Array.isArray(S) ? S.includes(o) ? S.filter((P) => P !== o) : [...S, o] : o)), d(l) && (e == null || e.setValue(o))), E(l) && (e == null || e.hide())));
+    }), L = s.onKeyDown, A = R((l) => {
+      if (L == null || L(l), l.defaultPrevented) return;
+      const S = e == null ? void 0 : e.getState().baseElement;
+      if (!S || ie(S)) return;
+      (l.key.length === 1 || l.key === "Backspace" || l.key === "Delete") && (queueMicrotask(() => S.focus()), Ct(S) && (e == null || e.setValue(S.value)));
+    });
+    x && m != null && (s = {
+      "aria-selected": m,
+      ...s
+    }), s = le(
+      s,
+      (l) => /* @__PURE__ */ V(nt.Provider, { value: o, children: /* @__PURE__ */ V(ot.Provider, { value: m ?? !1, children: l }) }),
+      [o, m]
+    );
+    const j = Mt(he);
+    s = {
+      role: on(j),
+      children: o,
+      ...s,
+      onClick: K,
+      onKeyDown: A
+    };
+    const W = B(h);
+    return s = et({
+      store: e,
+      ...s,
+      getItem: b,
+      // Dispatch a custom event on the combobox input when moving to an item
+      // with the keyboard so the Combobox component can enable inline
+      // autocompletion.
+      moveOnKeyPress: (l) => {
+        if (!W(l)) return !1;
+        const S = new Event("combobox-item-move"), P = e == null ? void 0 : e.getState().baseElement;
+        return P == null || P.dispatchEvent(S), !0;
+      }
+    }), s = tt({ store: e, focusOnHover: v, ...s }), s;
+  }
+), an = pt(
+  J(function(e) {
+    const o = rn(e);
+    return X(tn, o);
+  })
+), ln = "div", Oe = Q(
+  function({ store: e, alwaysVisible: o, ...i }) {
+    const r = Se(!0), y = rt();
+    e = e || y;
+    const g = !!e && e === r;
+    Y(
+      e,
+      process.env.NODE_ENV !== "production" && "ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
+    const v = H(null), h = Pe(i.id), f = e.useState("mounted"), s = Ut(f, i.hidden, o), O = s ? { ...i.style, display: "none" } : i.style, a = e.useState(
+      (I) => Array.isArray(I.selectedValue)
+    ), u = ht(v, "role", i.role), m = (u === "listbox" || u === "tree" || u === "grid") && a || void 0, [b, w] = ue(!1), d = e.useState("contentElement");
+    ae(() => {
+      if (!f) return;
+      const I = v.current;
+      if (!I || d !== I) return;
+      const E = () => {
+        w(!!I.querySelector("[role='listbox']"));
+      }, K = new MutationObserver(E);
+      return K.observe(I, {
+        subtree: !0,
+        childList: !0,
+        attributeFilter: ["role"]
+      }), E(), () => K.disconnect();
+    }, [f, d]), b || (i = {
+      role: "listbox",
+      "aria-multiselectable": m,
+      ...i
+    }), i = le(
+      i,
+      (I) => /* @__PURE__ */ V(at, { value: e, children: /* @__PURE__ */ V(he.Provider, { value: u, children: I }) }),
+      [e, u]
+    );
+    const F = h && (!r || !g) ? e.setContentElement : null;
+    return i = {
+      id: h,
+      hidden: s,
+      ...i,
+      ref: Ve(F, v, i.ref),
+      style: O
+    }, Et(i);
+  }
+);
+J(function(e) {
+  const o = Oe(e);
+  return X(ln, o);
+});
+var un = "div";
+function sn(n, ...e) {
+  if (!n) return !1;
+  if ("id" in n) {
+    const o = e.filter(Boolean).map((i) => `[aria-controls~="${i}"]`).join(", ");
+    return o ? n.matches(o) : !1;
+  }
+  return !1;
+}
+var cn = Q(
+  function({
+    store: e,
+    modal: o,
+    tabIndex: i,
+    alwaysVisible: r,
+    autoFocusOnHide: y = !0,
+    hideOnInteractOutside: g = !0,
+    ...v
+  }) {
+    const h = te();
+    e = e || h, Y(
+      e,
+      process.env.NODE_ENV !== "production" && "ComboboxPopover must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
+    const f = e.useState("baseElement"), s = H(!1), O = Ot(
+      e.tag,
+      (a) => a == null ? void 0 : a.renderedItems.length
+    );
+    return v = Oe({ store: e, alwaysVisible: r, ...v }), v = it({
+      store: e,
+      modal: o,
+      alwaysVisible: r,
+      backdrop: !1,
+      autoFocusOnShow: !1,
+      finalFocus: f,
+      preserveTabOrderAnchor: null,
+      unstable_treeSnapshotKey: O,
+      ...v,
+      // When the combobox popover is modal, we make sure to include the
+      // combobox input and all the combobox controls (cancel, disclosure) in
+      // the list of persistent elements so they make part of the modal context,
+      // allowing users to tab through them.
+      getPersistentElements() {
+        var a;
+        const u = ((a = v.getPersistentElements) == null ? void 0 : a.call(v)) || [];
+        if (!o || !e) return u;
+        const { contentElement: x, baseElement: m } = e.getState();
+        if (!m) return u;
+        const b = Pt(m), w = [];
+        if (x != null && x.id && w.push(`[aria-controls~="${x.id}"]`), m != null && m.id && w.push(`[aria-controls~="${m.id}"]`), !w.length) return [...u, m];
+        const d = w.join(","), F = b.querySelectorAll(d);
+        return [...u, ...F];
+      },
+      // The combobox popover should focus on the combobox input when it hides,
+      // unless the event was triggered by a click outside the popover, in which
+      // case the input shouldn't be re-focused.
+      autoFocusOnHide(a) {
+        return we(y, a) ? !1 : s.current ? (s.current = !1, !1) : !0;
+      },
+      // Make sure we don't hide the popover when the user interacts with the
+      // combobox cancel or the combobox disclosure buttons. They will have the
+      // aria-controls attribute pointing to either the combobox input or the
+      // combobox popover elements.
+      hideOnInteractOutside(a) {
+        var u, x;
+        const m = e == null ? void 0 : e.getState(), b = (u = m == null ? void 0 : m.contentElement) == null ? void 0 : u.id, w = (x = m == null ? void 0 : m.baseElement) == null ? void 0 : x.id;
+        if (sn(a.target, b, w)) return !1;
+        const d = typeof g == "function" ? g(a) : g;
+        return d && (s.current = a.type === "click"), d;
+      }
+    }), v;
+  }
+), dn = qt(
+  J(function(e) {
+    const o = cn(e);
+    return X(un, o);
+  }),
+  te
+);
+ke(null);
+ke(
+  null
+);
+var mn = Vt(
+  [Je],
+  [Ge]
+), fn = mn.useContext, bn = It() && kt();
+function vn({
+  tag: n,
+  ...e
+} = {}) {
+  const o = Lt(e.store, Nt(n, ["value", "rtl"]));
+  Ft(e, o);
+  const i = n == null ? void 0 : n.getState(), r = o == null ? void 0 : o.getState(), y = T(
+    e.activeId,
+    r == null ? void 0 : r.activeId,
+    e.defaultActiveId,
+    null
+  ), g = Qe({
+    ...e,
+    activeId: y,
+    includesBaseElement: T(
+      e.includesBaseElement,
+      r == null ? void 0 : r.includesBaseElement,
+      !0
+    ),
+    orientation: T(
+      e.orientation,
+      r == null ? void 0 : r.orientation,
+      "vertical"
+    ),
+    focusLoop: T(e.focusLoop, r == null ? void 0 : r.focusLoop, !0),
+    focusWrap: T(e.focusWrap, r == null ? void 0 : r.focusWrap, !0),
+    virtualFocus: T(
+      e.virtualFocus,
+      r == null ? void 0 : r.virtualFocus,
+      !0
+    )
+  }), v = lt({
+    ...e,
+    placement: T(
+      e.placement,
+      r == null ? void 0 : r.placement,
+      "bottom-start"
+    )
+  }), h = T(
+    e.value,
+    r == null ? void 0 : r.value,
+    e.defaultValue,
+    ""
+  ), f = T(
+    e.selectedValue,
+    r == null ? void 0 : r.selectedValue,
+    i == null ? void 0 : i.values,
+    e.defaultSelectedValue,
+    ""
+  ), s = Array.isArray(f), O = {
+    ...g.getState(),
+    ...v.getState(),
+    value: h,
+    selectedValue: f,
+    resetValueOnSelect: T(
+      e.resetValueOnSelect,
+      r == null ? void 0 : r.resetValueOnSelect,
+      s
+    ),
+    resetValueOnHide: T(
+      e.resetValueOnHide,
+      r == null ? void 0 : r.resetValueOnHide,
+      s && !n
+    ),
+    activeValue: r == null ? void 0 : r.activeValue
+  }, a = Tt(O, g, v, o);
+  return bn && $(
+    a,
+    () => z(a, ["virtualFocus"], () => {
+      a.setState("virtualFocus", !1);
+    })
+  ), $(a, () => {
+    if (n)
+      return wt(
+        z(a, ["selectedValue"], (u) => {
+          Array.isArray(u.selectedValue) && n.setValues(u.selectedValue);
+        }),
+        z(n, ["values"], (u) => {
+          a.setState("selectedValue", u.values);
+        })
+      );
+  }), $(
+    a,
+    () => z(a, ["resetValueOnHide", "mounted"], (u) => {
+      u.resetValueOnHide && (u.mounted || a.setState("value", h));
+    })
+  ), $(
+    a,
+    () => z(a, ["open"], (u) => {
+      u.open || (a.setState("activeId", y), a.setState("moves", 0));
+    })
+  ), $(
+    a,
+    () => z(a, ["moves", "activeId"], (u, x) => {
+      u.moves === x.moves && a.setState("activeValue", void 0);
+    })
+  ), $(
+    a,
+    () => Bt(a, ["moves", "renderedItems"], (u, x) => {
+      if (u.moves === x.moves) return;
+      const { activeId: m } = a.getState(), b = g.item(m);
+      a.setState("activeValue", b == null ? void 0 : b.value);
+    })
+  ), {
+    ...v,
+    ...g,
+    ...a,
+    tag: n,
+    setValue: (u) => a.setState("value", u),
+    resetValue: () => a.setState("value", O.value),
+    setSelectedValue: (u) => a.setState("selectedValue", u)
+  };
+}
+function xn(n) {
+  const e = fn();
+  return n = {
+    ...n,
+    tag: n.tag !== void 0 ? n.tag : e
+  }, Xe(n);
+}
+function gn(n, e, o) {
+  return Ee(e, [o.tag]), ee(n, o, "value", "setValue"), ee(n, o, "selectedValue", "setSelectedValue"), ee(n, o, "resetValueOnHide"), ee(n, o, "resetValueOnSelect"), Object.assign(
+    Ye(
+      ut(n, e, o),
+      e,
+      o
+    ),
+    { tag: o.tag }
+  );
+}
+function pn(n = {}) {
+  n = xn(n);
+  const [e, o] = Dt(vn, n);
+  return gn(e, o, n);
+}
+function Cn(n = {}) {
+  const e = pn(n);
+  return /* @__PURE__ */ V(st, { value: e, children: n.children });
+}
+const yn = Ae(
+  [
+    "w-full max-w-md rounded-lg border px-3 py-2",
+    "text-sm font-medium",
+    "transition-all duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "placeholder:text-gray-400 dark:placeholder:text-gray-500"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-white dark:bg-gray-900",
+          "border-gray-300 dark:border-gray-700",
+          "text-gray-900 dark:text-gray-100",
+          "hover:border-gray-400 dark:hover:border-gray-600"
+        ],
+        outline: [
+          "bg-transparent",
+          "border-primary-600 dark:border-primary-500",
+          "text-gray-900 dark:text-gray-100",
+          "hover:bg-primary-50 dark:hover:bg-primary-950"
+        ]
+      },
+      size: {
+        sm: "h-9 text-sm",
+        md: "h-10 text-base",
+        lg: "h-11 text-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), Sn = Ae(
+  [
+    "flex items-center gap-2 px-3 py-2 rounded-md",
+    "text-sm cursor-pointer",
+    "transition-colors duration-150",
+    "outline-none"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "text-gray-900 dark:text-gray-100",
+          "hover:bg-gray-100 dark:hover:bg-gray-800",
+          "data-[active-item]:bg-primary-100 dark:data-[active-item]:bg-primary-900",
+          "data-[active-item]:text-primary-900 dark:data-[active-item]:text-primary-100"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), hn = _t(
+  ({
+    label: n,
+    options: e = [],
+    placeholder: o,
+    showClear: i = !0,
+    filterFn: r,
+    onValueChange: y,
+    onSelectOption: g,
+    emptyMessage: v = "No results found",
+    renderItem: h,
+    variant: f,
+    size: s,
+    className: O,
+    ...a
+  }, u) => {
+    const [x, m] = ue(""), b = (d, F) => F ? d.filter(
+      (I) => I.value.toLowerCase().includes(F.toLowerCase())
+    ) : d, w = Ie(() => (r || b)(e, x), [e, x, r]);
+    return /* @__PURE__ */ V(
+      Cn,
+      {
+        setValue: (d) => {
+          Ht(() => {
+            m(d), y == null || y(d);
+          });
+        },
+        children: /* @__PURE__ */ re("div", { className: "w-full space-y-2", children: [
+          n && /* @__PURE__ */ V("label", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: n }),
+          /* @__PURE__ */ re("div", { className: "relative", children: [
+            /* @__PURE__ */ V(
+              Qt,
+              {
+                ref: u,
+                placeholder: o,
+                className: pe(yn({ variant: f, size: s, className: O })),
+                ...a
+              }
+            ),
+            i && x && /* @__PURE__ */ V(en, { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-md p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors", children: /* @__PURE__ */ V(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ V("path", { d: "M4 4l8 8M12 4l-8 8" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ V(
+            dn,
+            {
+              gutter: 8,
+              sameWidth: !0,
+              className: pe(
+                "z-50 max-h-80 overflow-auto rounded-lg border bg-white p-1 shadow-lg dark:bg-gray-900 dark:border-gray-700",
+                "opacity-0 transition-all duration-200 ease-out",
+                "data-enter:opacity-100 data-enter:translate-y-0",
+                "data-leave:opacity-0 data-leave:-translate-y-1"
+              ),
+              children: w.length > 0 ? w.map((d) => /* @__PURE__ */ V(
+                an,
+                {
+                  value: d.value,
+                  disabled: d.disabled,
+                  onClick: () => g == null ? void 0 : g(d.value),
+                  className: Sn(),
+                  children: h ? h(d) : d.label || d.value
+                },
+                d.value
+              )) : /* @__PURE__ */ V("div", { className: "px-3 py-2 text-center text-sm text-gray-500 dark:text-gray-400", children: v })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+hn.displayName = "Combobox";
+const Nn = {
+  name: "Combobox",
+  description: "Searchable select with autocomplete functionality, built on Ariakit for accessibility.",
+  category: "Navigation",
+  installation: "pnpm add @component-labs/ui",
+  usage: `import { Combobox } from "@component-labs/ui";
+
+const options = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+];
+
+<Combobox options={options} placeholder="Select fruit..." />`,
+  props: [
+    {
+      name: "options",
+      type: "ComboboxOption[]",
+      description: "Array of options to display in the dropdown",
+      required: !0
+    },
+    {
+      name: "variant",
+      type: "'default' | 'outline'",
+      description: "Visual style variant",
+      default: "'default'"
+    },
+    {
+      name: "size",
+      type: "'sm' | 'md' | 'lg'",
+      description: "Size of the input",
+      default: "'md'"
+    },
+    {
+      name: "label",
+      type: "string",
+      description: "Label text above the combobox"
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      description: "Placeholder text for the input"
+    },
+    {
+      name: "showClear",
+      type: "boolean",
+      description: "Show clear button when value is not empty",
+      default: "true"
+    },
+    {
+      name: "filterFn",
+      type: "(options: ComboboxOption[], searchValue: string) => ComboboxOption[]",
+      description: "Custom filter function for options"
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "Callback when search value changes"
+    },
+    {
+      name: "onSelectOption",
+      type: "(value: string) => void",
+      description: "Callback when an option is selected"
+    },
+    {
+      name: "emptyMessage",
+      type: "string",
+      description: "Message to display when no results found",
+      default: "'No results found'"
+    },
+    {
+      name: "renderItem",
+      type: "(option: ComboboxOption) => ReactNode",
+      description: "Custom render function for items"
+    }
+  ],
+  examples: [
+    {
+      title: "Basic Combobox",
+      code: `const fruits = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "orange", label: "Orange" },
+];
+
+<Combobox
+  label="Select a fruit"
+  placeholder="Search fruits..."
+  options={fruits}
+/>`,
+      description: "Simple searchable select"
+    },
+    {
+      title: "With Custom Filter",
+      code: `const customFilter = (options, search) => {
+  return options.filter(opt =>
+    opt.label.toLowerCase().startsWith(search.toLowerCase())
+  );
+};
+
+<Combobox
+  options={fruits}
+  filterFn={customFilter}
+  placeholder="Type to search..."
+/>`,
+      description: "Using custom filter logic"
+    },
+    {
+      title: "Controlled Selection",
+      code: `const [selected, setSelected] = useState("");
+
+<Combobox
+  options={fruits}
+  onSelectOption={(value) => {
+    setSelected(value);
+    console.log("Selected:", value);
+  }}
+  placeholder="Choose..."
+/>`,
+      description: "Handle selection changes"
+    },
+    {
+      title: "Custom Item Rendering",
+      code: `<Combobox
+  options={users}
+  renderItem={(option) => (
+    <div className="flex items-center gap-2">
+      <Avatar src={option.avatar} />
+      <span>{option.label}</span>
+    </div>
+  )}
+/>`,
+      description: "Customize how items are rendered"
+    }
+  ],
+  accessibility: [
+    "Built on Ariakit's accessible Combobox component",
+    "Keyboard navigation (Arrow keys, Enter, Escape)",
+    "Proper ARIA attributes (aria-autocomplete, aria-expanded)",
+    "Screen reader support with announcements",
+    "Focus management",
+    "Type-ahead functionality"
+  ],
+  relatedComponents: ["Menu", "Command"]
+};
+export {
+  hn as Combobox,
+  Nn as comboboxDocs
+};
+//# sourceMappingURL=combobox.js.map