@telegraph/combobox 0.0.28 → 0.0.30

package/dist/esm/index.mjs

@@ -1,23 +1,24 @@
-import { jsx as s, jsxs as S, Fragment as D } from "react/jsx-runtime";
-import { useControllableState as $ } from "@radix-ui/react-use-controllable-state";
-import * as G from "@radix-ui/react-visually-hidden";
-import { Button as E } from "@telegraph/button";
-import { useComposedRefs as P } from "@telegraph/compose-refs";
-import { RefToTgphRef as Y } from "@telegraph/helpers";
-import { Lucide as w, Icon as F } from "@telegraph/icon";
+import { jsx as a, jsxs as w, Fragment as P } from "react/jsx-runtime";
+import { useControllableState as G } from "@radix-ui/react-use-controllable-state";
+import * as Y from "@radix-ui/react-visually-hidden";
+import { Button as I } from "@telegraph/button";
+import { useComposedRefs as F } from "@telegraph/compose-refs";
+import { RefToTgphRef as z } from "@telegraph/helpers";
+import { Lucide as R, Icon as H } from "@telegraph/icon";
 import { Input as M } from "@telegraph/input";
-import { Stack as T, Box as H } from "@telegraph/layout";
+import { Stack as k, Box as K } from "@telegraph/layout";
 import { Menu as Q } from "@telegraph/menu";
 import { Tag as A } from "@telegraph/tag";
-import { Text as V } from "@telegraph/typography";
-import { motion as R, AnimatePresence as O } from "framer-motion";
-import a from "react";
+import { Tooltip as X } from "@telegraph/tooltip";
+import { Text as D } from "@telegraph/typography";
+import { motion as S, AnimatePresence as O } from "framer-motion";
+import i from "react";
 const q = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, I = (t) => Array.isArray(t), L = (t) => typeof t == "object" && !Array.isArray(t), z = ["ArrowDown", "PageUp", "Home"], N = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], x = a.createContext({
+}, E = (n) => Array.isArray(n), L = (n) => typeof n == "object" && !Array.isArray(n), N = ["ArrowDown", "PageUp", "Home"], U = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], C = i.createContext({
   onValueChange: () => {
   },
   contentId: "",
@@ -26,68 +27,71 @@ const q = {
   setOpen: () => {
   },
   onOpenToggle: () => {
-  }
-}), U = ({
-  modal: t = !0,
-  closeOnSelect: i = !0,
-  open: o,
-  onOpenChange: l,
-  defaultOpen: n,
-  value: e,
-  onValueChange: u,
-  errored: r,
-  placeholder: c,
+  },
+  clearable: !1
+}), J = ({
+  modal: n = !0,
+  closeOnSelect: c = !0,
+  clearable: e = !1,
+  open: s,
+  onOpenChange: r,
+  defaultOpen: t,
+  value: u,
+  onValueChange: o,
+  errored: l,
+  placeholder: y,
   layout: f,
-  ...g
+  ...b
 }) => {
-  const y = a.useId(), d = a.useId(), p = a.useRef(null), h = a.useRef(null), m = a.useRef(null), [b, v] = a.useState(""), [C = !1, k] = $({
-    prop: o,
-    defaultProp: n,
-    onChange: l
-  }), K = a.useCallback(() => {
-    k((_) => !_);
-  }, [k]);
-  return a.useEffect(() => {
-    C || v("");
-  }, [C]), /* @__PURE__ */ s(
-    x.Provider,
+  const g = i.useId(), p = i.useId(), h = i.useRef(null), d = i.useRef(null), m = i.useRef(null), [x, v] = i.useState(""), [T = !1, V] = G({
+    prop: s,
+    defaultProp: t,
+    onChange: r
+  }), _ = i.useCallback(() => {
+    V(($) => !$);
+  }, [V]);
+  return i.useEffect(() => {
+    T || v("");
+  }, [T]), /* @__PURE__ */ a(
+    C.Provider,
     {
       value: {
-        contentId: y,
-        triggerId: d,
-        value: e,
-        onValueChange: u,
-        placeholder: c,
-        open: C,
-        setOpen: k,
-        onOpenToggle: K,
-        closeOnSelect: i,
-        searchQuery: b,
+        contentId: g,
+        triggerId: p,
+        value: u,
+        onValueChange: o,
+        placeholder: y,
+        open: T,
+        setOpen: V,
+        onOpenToggle: _,
+        closeOnSelect: c,
+        clearable: e,
+        searchQuery: x,
         setSearchQuery: v,
-        triggerRef: p,
-        searchRef: h,
+        triggerRef: h,
+        searchRef: d,
         contentRef: m,
-        errored: r,
+        errored: l,
         layout: f
       },
-      children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ a(
         Q.Root,
         {
-          open: C,
-          onOpenChange: k,
-          modal: t,
-          ...g
+          open: T,
+          onOpenChange: V,
+          modal: n,
+          ...b
         }
       )
     }
   );
-}, X = ({ label: t, value: i, ...o }) => {
-  const l = a.useContext(x);
-  return /* @__PURE__ */ S(
+}, W = ({ label: n, value: c, ...e }) => {
+  const s = i.useContext(C);
+  return /* @__PURE__ */ w(
     A.Root,
     {
       size: "1",
-      as: R.span,
+      as: S.span,
       initial: { opacity: 0, transform: "scale(0.8)" },
       animate: { opacity: 1, transform: "scale(1)" },
       exit: { opacity: 0, transform: "scale(0.5)" },
@@ -102,47 +106,47 @@ const q = {
           bounce: 0
         }
       },
-      ...o,
+      ...e,
       children: [
-        /* @__PURE__ */ s(A.Text, { children: t || i }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ a(A.Text, { children: n || c }),
+        /* @__PURE__ */ a(
           A.Button,
           {
-            icon: { icon: w.X, alt: `Remove ${i}` },
-            onClick: (n) => {
-              const e = l.onValueChange, r = l.value.filter((c) => c.value !== i);
-              e(r), n.stopPropagation(), n.preventDefault();
+            icon: { icon: R.X, alt: `Remove ${c}` },
+            onClick: (r) => {
+              const t = s.onValueChange, o = s.value.filter((l) => l.value !== c);
+              t(o), r.stopPropagation(), r.preventDefault();
             }
           }
         )
       ]
     }
   );
-}, J = () => {
-  var i, o;
-  const t = a.useContext(x);
-  if (t.value && I(t.value)) {
-    const l = t.value, n = t.layout || "truncate", e = l.length - 2, u = e.toString().split("");
-    return l.length === 0 ? /* @__PURE__ */ s(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
-      T,
+}, Z = () => {
+  var c, e;
+  const n = i.useContext(C);
+  if (n.value && E(n.value)) {
+    const s = n.value, r = n.layout || "truncate", t = s.length - 2, u = t.toString().split("");
+    return s.length === 0 ? /* @__PURE__ */ a(I.Text, { color: "gray", children: n.placeholder }) : /* @__PURE__ */ w(
+      k,
       {
         gap: "1",
         w: "full",
-        wrap: n === "wrap" ? "wrap" : "nowrap",
+        wrap: r === "wrap" ? "wrap" : "nowrap",
         align: "center",
         style: {
           position: "relative",
           flexGrow: 1
         },
         children: [
-          /* @__PURE__ */ s(O, { initial: !1, mode: "popLayout", children: l.map((r, c) => {
-            if (n === "truncate" && c <= 1 || n === "wrap")
-              return /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(X, { ...r }) }, r.value);
+          /* @__PURE__ */ a(O, { initial: !1, mode: "popLayout", children: s.map((o, l) => {
+            if (r === "truncate" && l <= 1 || r === "wrap")
+              return /* @__PURE__ */ a(z, { children: /* @__PURE__ */ a(W, { ...o }) }, o.value);
           }) }),
-          /* @__PURE__ */ s(O, { children: n === "truncate" && l.length > 2 && /* @__PURE__ */ s(
-            T,
+          /* @__PURE__ */ a(O, { children: r === "truncate" && s.length > 2 && /* @__PURE__ */ a(
+            k,
             {
-              as: R.div,
+              as: S.div,
               initial: { opacity: 0 },
               animate: { opacity: 1 },
               exit: { opacity: 0 },
@@ -151,18 +155,18 @@ const q = {
               pr: "1",
               pl: "8",
               align: "center",
-              "aria-label": `${e} more selected`,
+              "aria-label": `${t} more selected`,
               style: {
                 position: "absolute",
                 right: 0,
                 backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
               },
-              children: /* @__PURE__ */ S(V, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+              children: /* @__PURE__ */ w(D, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
-                /* @__PURE__ */ s(O, { mode: "wait", initial: !1, children: u.map((r) => /* @__PURE__ */ s(
-                  H,
+                /* @__PURE__ */ a(O, { mode: "wait", initial: !1, children: u.map((o) => /* @__PURE__ */ a(
+                  K,
                   {
-                    as: R.span,
+                    as: S.span,
                     w: "2",
                     display: "inline-block",
                     initial: {
@@ -175,9 +179,9 @@ const q = {
                       opacity: 0.5
                     },
                     transition: { duration: 0.1, type: "spring", bounce: 0 },
-                    children: r
+                    children: o
                   },
-                  r
+                  o
                 )) }),
                 " ",
                 "more"
@@ -189,101 +193,121 @@ const q = {
       }
     );
   }
-  return /* @__PURE__ */ s(E.Text, { color: t.value ? "default" : "gray", children: ((i = t == null ? void 0 : t.value) == null ? void 0 : i.label) || ((o = t == null ? void 0 : t.value) == null ? void 0 : o.value) || t.placeholder });
-}, W = ({ size: t = "2", ...i }) => {
-  const o = a.useContext(x), l = a.useCallback(() => {
-    var n, e, u;
-    return o.value ? L(o.value) ? ((n = o.value) == null ? void 0 : n.label) || ((e = o.value) == null ? void 0 : e.value) || o.placeholder : ((u = o.value) == null ? void 0 : u.map((r) => r.label).join(", ")) || o.placeholder : o.placeholder;
-  }, [o.value, o.placeholder]);
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(I.Text, { color: n.value ? "default" : "gray", children: ((c = n == null ? void 0 : n.value) == null ? void 0 : c.label) || ((e = n == null ? void 0 : n.value) == null ? void 0 : e.value) || n.placeholder });
+}, ee = ({ size: n = "2", ...c }) => {
+  const e = i.useContext(C), s = i.useCallback(() => {
+    var r, t, u;
+    return e.value ? L(e.value) ? ((r = e.value) == null ? void 0 : r.label) || ((t = e.value) == null ? void 0 : t.value) || e.placeholder : ((u = e.value) == null ? void 0 : u.map((o) => o.label).join(", ")) || e.placeholder : e.placeholder;
+  }, [e.value, e.placeholder]);
+  return /* @__PURE__ */ a(
     Q.Trigger,
     {
-      ...i,
+      ...c,
       asChild: !0,
-      onClick: (n) => {
-        var e, u;
-        n.preventDefault(), o.onOpenToggle(), (u = (e = o.triggerRef) == null ? void 0 : e.current) == null || u.focus();
+      onClick: (r) => {
+        var t, u;
+        r.preventDefault(), e.onOpenToggle(), (u = (t = e.triggerRef) == null ? void 0 : t.current) == null || u.focus();
       },
-      onKeyDown: (n) => {
-        if (n.key === "Tab") {
-          n.stopPropagation();
+      onKeyDown: (r) => {
+        if (r.key === "Tab") {
+          r.stopPropagation();
           return;
         }
-        if (j.includes(n.key)) {
-          n.preventDefault();
+        if (j.includes(r.key)) {
+          r.preventDefault();
           return;
         }
-        if (n.key === "ArrowDown") {
-          o.onOpenToggle();
+        if (r.key === "ArrowDown") {
+          e.onOpenToggle();
           return;
         }
       },
-      tgphRef: o.triggerRef,
-      children: /* @__PURE__ */ S(
-        E.Root,
+      tgphRef: e.triggerRef,
+      children: /* @__PURE__ */ w(
+        I.Root,
         {
-          id: o.triggerId,
+          id: e.triggerId,
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: q[t],
+          minH: q[n],
           h: "full",
           w: "full",
           py: "1",
-          size: t,
-          color: o.errored ? "red" : "gray",
+          size: n,
+          color: e.errored ? "red" : "gray",
           justify: "space-between",
           role: "combobox",
-          "aria-label": l(),
-          "aria-controls": o.contentId,
-          "aria-expanded": o.open,
+          "aria-label": s(),
+          "aria-controls": e.contentId,
+          "aria-expanded": e.open,
           "aria-haspopup": "listbox",
           "data-tgph-combobox-trigger": !0,
-          "data-tgph-comobox-trigger-open": o.open,
+          "data-tgph-comobox-trigger-open": e.open,
           children: [
-            /* @__PURE__ */ s(J, {}),
-            /* @__PURE__ */ s(
-              E.Icon,
-              {
-                as: R.div,
-                icon: w.ChevronDown,
-                animate: { rotate: o.open ? "180deg" : "0deg" },
-                transition: { duration: 0.2, type: "spring", bounce: 0 },
-                "aria-hidden": !0
-              }
-            )
+            /* @__PURE__ */ a(Z, {}),
+            /* @__PURE__ */ w(k, { align: "center", gap: "1", children: [
+              e.clearable && e.value && /* @__PURE__ */ a(X, { label: "Clear field", children: /* @__PURE__ */ a(
+                I,
+                {
+                  type: "button",
+                  icon: { icon: R.X, alt: "Clear field" },
+                  size: "1",
+                  variant: "ghost",
+                  onClick: (r) => {
+                    var t;
+                    e.value && (r.stopPropagation(), (t = e == null ? void 0 : e.onValueChange) == null || t.call(e, void 0));
+                  },
+                  onKeyDown: (r) => {
+                    var t;
+                    (r.key === "Enter" || r.key === " ") && (r.stopPropagation(), (t = e == null ? void 0 : e.onValueChange) == null || t.call(e, void 0));
+                  },
+                  "data-tgph-combobox-clear": !0
+                }
+              ) }),
+              /* @__PURE__ */ a(
+                I.Icon,
+                {
+                  as: S.div,
+                  icon: R.ChevronDown,
+                  animate: { rotate: e.open ? "180deg" : "0deg" },
+                  transition: { duration: 0.2, type: "spring", bounce: 0 },
+                  "aria-hidden": !0
+                }
+              )
+            ] })
           ]
         }
       )
     }
   );
-}, Z = ({
-  tgphRef: t,
-  style: i,
-  children: o,
-  ...l
+}, te = ({
+  tgphRef: n,
+  style: c,
+  children: e,
+  ...s
 }) => {
-  const n = a.useContext(x), e = a.useRef(!1), u = P(t, n.contentRef), r = a.useRef(null), [c, f] = a.useState(0), [g, y] = a.useState(!1), d = a.useCallback(
+  const r = i.useContext(C), t = i.useRef(!1), u = F(n, r.contentRef), o = i.useRef(null), [l, y] = i.useState(0), [f, b] = i.useState(!1), g = i.useCallback(
     (p) => {
       const h = p.getBoundingClientRect();
-      h && f(h.height), g || y(!0);
+      h && y(h.height), f || b(!0);
     },
-    [g]
+    [f]
   );
-  return a.useEffect(() => {
+  return i.useEffect(() => {
     const p = new ResizeObserver((h) => {
-      for (const m of h) {
-        const b = m.target;
-        d(b);
+      for (const d of h) {
+        const m = d.target;
+        g(m);
       }
     });
-    return r.current && g && p.observe(r.current), () => p.disconnect();
-  }, [g, d]), a.useEffect(() => {
-    g === !0 && n.open === !1 && y(!1);
-  }, [n.open, g]), /* @__PURE__ */ s(
+    return o.current && f && p.observe(o.current), () => p.disconnect();
+  }, [f, g]), i.useEffect(() => {
+    f === !0 && r.open === !1 && b(!1);
+  }, [r.open, f]), /* @__PURE__ */ a(
     Q.Content,
     {
-      as: R.div,
+      as: S.div,
       mt: "1",
       initial: {
         opacity: 0,
@@ -295,52 +319,52 @@ const q = {
         scale: 1,
         // Set height based on the internalContentRef so that
         // we get smooth animations when the content changes
-        minHeight: c ? `${c}px` : "0"
+        minHeight: l ? `${l}px` : "0"
       },
       exit: { opacity: 0, scale: 0 },
       transition: { duration: 0.2, type: "spring", bounce: 0 },
       onAnimationComplete: () => {
-        if (!g && r) {
-          const p = r.current;
-          d(p);
+        if (!f && o) {
+          const p = o.current;
+          g(p);
         }
       },
       onCloseAutoFocus: (p) => {
-        var h, m;
-        e.current || (m = (h = n.triggerRef) == null ? void 0 : h.current) == null || m.focus(), e.current = !1, p.preventDefault();
+        var h, d;
+        t.current || (d = (h = r.triggerRef) == null ? void 0 : h.current) == null || d.focus(), t.current = !1, p.preventDefault();
       },
       onKeyDown: (p) => {
-        var m, b, v, C;
-        const h = (b = (m = n.contentRef) == null ? void 0 : m.current) == null ? void 0 : b.querySelectorAll(
+        var d, m, x, v;
+        const h = (m = (d = r.contentRef) == null ? void 0 : d.current) == null ? void 0 : m.querySelectorAll(
           "[data-tgph-combobox-option]"
         );
-        document.activeElement === (h == null ? void 0 : h[0]) && N.includes(p.key) && ((C = (v = n.searchRef) == null ? void 0 : v.current) == null || C.focus()), p.key === "Escape" && n.setOpen(!1), p.stopPropagation();
+        document.activeElement === (h == null ? void 0 : h[0]) && U.includes(p.key) && ((v = (x = r.searchRef) == null ? void 0 : x.current) == null || v.focus()), p.key === "Escape" && r.setOpen(!1), p.stopPropagation();
       },
       bg: "surface-1",
       style: {
         width: "var(--tgph-comobobox-trigger-width)",
-        ...i,
+        ...c,
         "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
         "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
         "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
         "--tgph-comobobox-trigger-width": "var(--radix-popper-anchor-width)",
         "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
       },
-      ...l,
+      ...s,
       tgphRef: u,
       "data-tgph-combobox-content": !0,
-      "data-tgph-combobox-content-open": g,
+      "data-tgph-combobox-content-open": f,
       role: void 0,
       "aria-orientation": void 0,
-      children: /* @__PURE__ */ s(T, { direction: "column", gap: "1", tgphRef: r, children: o })
+      children: /* @__PURE__ */ a(k, { direction: "column", gap: "1", tgphRef: o, children: e })
     }
   );
-}, ee = ({ ...t }) => {
-  const i = a.useContext(x);
-  return /* @__PURE__ */ s(
-    T,
+}, oe = ({ ...n }) => {
+  const c = i.useContext(C);
+  return /* @__PURE__ */ a(
+    k,
     {
-      id: i.contentId,
+      id: c.contentId,
       direction: "column",
       gap: "1",
       style: {
@@ -349,126 +373,127 @@ const q = {
         maxHeight: "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
       },
       role: "listbox",
-      ...t
+      ...n
     }
   );
 }, B = ({
-  value: t,
-  label: i,
-  selected: o,
-  onSelect: l,
-  ...n
+  value: n,
+  label: c,
+  selected: e,
+  onSelect: s,
+  ...r
 }) => {
-  const e = a.useContext(x), [u, r] = a.useState(!1), c = e.value ?? [], f = (I(c), !e.searchQuery || t.toLowerCase().includes(e.searchQuery.toLowerCase())), g = I(c) ? c.some((d) => d.value === t) : c.value === t, y = (d) => {
-    var h, m;
-    const p = d;
+  const t = i.useContext(C), [u, o] = i.useState(!1), l = t.value ?? [], y = (E(l), !t.searchQuery || n.toLowerCase().includes(t.searchQuery.toLowerCase())), f = E(l) ? l.some((g) => g.value === n) : l.value === n, b = (g) => {
+    var h, d;
+    const p = g;
     if (!(p.key && !j.includes(p.key))) {
-      if (d.stopPropagation(), d.preventDefault(), e.closeOnSelect === !0 && e.setOpen(!1), l)
-        return l(d);
-      if (I(c)) {
-        const b = e.onValueChange, v = g ? c.filter((C) => C.value !== t) : [...c, { value: t, label: i }];
-        b(v);
-      } else if (L(c)) {
-        const b = e.onValueChange;
-        b({ value: t, label: i });
+      if (g.stopPropagation(), g.preventDefault(), t.closeOnSelect === !0 && t.setOpen(!1), s)
+        return s(g);
+      if (E(l)) {
+        const m = t.onValueChange, x = f ? l.filter((v) => v.value !== n) : [...l, { value: n, label: c }];
+        m(x);
+      } else if (L(l)) {
+        const m = t.onValueChange;
+        m({ value: n, label: c });
       }
-      (m = (h = e.triggerRef) == null ? void 0 : h.current) == null || m.focus();
+      (d = (h = t.triggerRef) == null ? void 0 : h.current) == null || d.focus();
     }
   };
-  if (f)
-    return /* @__PURE__ */ s(
+  if (y)
+    return /* @__PURE__ */ a(
       Q.Button,
       {
         type: "button",
-        onSelect: y,
-        onKeyDown: y,
-        selected: o === null ? null : o ?? g,
-        onFocus: () => r(!0),
-        onBlur: () => r(!1),
+        onSelect: b,
+        onKeyDown: b,
+        selected: e === null ? null : e ?? f,
+        onFocus: () => o(!0),
+        onBlur: () => o(!1),
         role: "option",
-        "aria-selected": g ? "true" : "false",
+        "aria-selected": f ? "true" : "false",
         "data-tgph-combobox-option": !0,
         "data-tgph-combobox-option-focused": u,
-        "data-tgph-combobox-option-value": t,
-        "data-tgph-combobox-option-label": i,
-        ...n,
-        children: i || t
+        "data-tgph-combobox-option-value": n,
+        "data-tgph-combobox-option-label": c,
+        ...r,
+        children: c || n
       }
     );
-}, te = ({
-  label: t = "Search",
-  placeholder: i = "Search",
-  tgphRef: o,
-  ...l
+}, ne = ({
+  label: n = "Search",
+  placeholder: c = "Search",
+  tgphRef: e,
+  value: s,
+  onValueChange: r,
+  ...t
 }) => {
-  var r;
-  const n = a.useId(), e = a.useContext(x), u = P(o, e.searchRef);
-  return a.useEffect(() => {
-    var g;
-    const c = (y) => {
-      var d, p;
-      z.includes(y.key) && ((p = (d = e.contentRef) == null ? void 0 : d.current) == null || p.focus({ preventScroll: !0 })), y.key === "Escape" && e.setOpen(!1), y.stopPropagation();
-    }, f = (g = e.searchRef) == null ? void 0 : g.current;
-    if (f)
-      return f.addEventListener("keydown", c), () => {
-        f.removeEventListener("keydown", c);
+  var b;
+  const u = i.useId(), o = i.useContext(C), l = F(e, o.searchRef), y = s ?? o.searchQuery, f = r ?? o.setSearchQuery;
+  return i.useEffect(() => {
+    var h;
+    const g = (d) => {
+      var m, x;
+      N.includes(d.key) && ((x = (m = o.contentRef) == null ? void 0 : m.current) == null || x.focus({ preventScroll: !0 })), d.key === "Escape" && o.setOpen(!1), d.stopPropagation();
+    }, p = (h = o.searchRef) == null ? void 0 : h.current;
+    if (p)
+      return p.addEventListener("keydown", g), () => {
+        p.removeEventListener("keydown", g);
       };
-  }, [e]), /* @__PURE__ */ S(H, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ s(G.Root, { children: /* @__PURE__ */ s(V, { as: "label", htmlFor: n, children: t }) }),
-    /* @__PURE__ */ s(
+  }, [o]), /* @__PURE__ */ w(K, { borderBottom: "px", px: "1", pb: "1", children: [
+    /* @__PURE__ */ a(Y.Root, { children: /* @__PURE__ */ a(D, { as: "label", htmlFor: u, children: n }) }),
+    /* @__PURE__ */ a(
       M,
       {
-        id: n,
+        id: u,
         variant: "ghost",
-        placeholder: i,
-        value: e.searchQuery,
-        onChange: (c) => {
-          var f;
-          (f = e == null ? void 0 : e.setSearchQuery) == null || f.call(e, c.target.value);
+        placeholder: c,
+        value: y,
+        onChange: (g) => {
+          f(g.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ s(F, { icon: w.Search, alt: "Search Icon" }),
-        TrailingComponent: e != null && e.searchQuery && ((r = e == null ? void 0 : e.searchQuery) == null ? void 0 : r.length) > 0 ? /* @__PURE__ */ s(
-          E,
+        LeadingComponent: /* @__PURE__ */ a(H, { icon: R.Search, alt: "Search Icon" }),
+        TrailingComponent: o != null && o.searchQuery && ((b = o == null ? void 0 : o.searchQuery) == null ? void 0 : b.length) > 0 ? /* @__PURE__ */ a(
+          I,
           {
-            as: R.button,
+            as: S.button,
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             transition: { duration: 0.2, type: "spring", bounce: 0 },
             variant: "ghost",
             color: "gray",
-            icon: { icon: w.X, alt: "Clear Search Query" },
+            icon: { icon: R.X, alt: "Clear Search Query" },
             onClick: () => {
-              var c;
-              return (c = e.setSearchQuery) == null ? void 0 : c.call(e, "");
+              var g;
+              return (g = o.setSearchQuery) == null ? void 0 : g.call(o, "");
             }
           }
         ) : null,
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
-        "aria-controls": e.contentId,
-        ...l,
-        tgphRef: u
+        "aria-controls": o.contentId,
+        ...t,
+        tgphRef: l
       }
     )
   ] });
-}, oe = ({
-  icon: t = { icon: w.Search, alt: "Search Icon" },
-  message: i = "No results found",
-  children: o,
-  ...l
+}, re = ({
+  icon: n = { icon: R.Search, alt: "Search Icon" },
+  message: c = "No results found",
+  children: e,
+  ...s
 }) => {
-  const n = a.useContext(x), [e, u] = a.useState(!1);
-  if (a.useEffect(() => {
-    var c, f;
-    const r = (f = (c = n.contentRef) == null ? void 0 : c.current) == null ? void 0 : f.querySelectorAll(
+  const r = i.useContext(C), [t, u] = i.useState(!1);
+  if (i.useEffect(() => {
+    var l, y;
+    const o = (y = (l = r.contentRef) == null ? void 0 : l.current) == null ? void 0 : y.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
-    (r == null ? void 0 : r.length) === 0 ? u(!0) : u(!1);
-  }, [n.searchQuery, n.contentRef, o]), e)
-    return /* @__PURE__ */ S(
-      T,
+    (o == null ? void 0 : o.length) === 0 ? u(!0) : u(!1);
+  }, [r.searchQuery, r.contentRef, e]), t)
+    return /* @__PURE__ */ w(
+      k,
       {
-        as: R.div,
+        as: S.div,
         initial: { opacity: 0, scale: 0.8 },
         animate: { opacity: 1, scale: 1 },
         transition: { duration: 0.2, type: "spring", bounce: 0 },
@@ -478,52 +503,52 @@ const q = {
         w: "full",
         my: "8",
         "data-tgph-combobox-empty": !0,
-        ...l,
+        ...s,
         children: [
-          t === null ? /* @__PURE__ */ s(D, {}) : /* @__PURE__ */ s(F, { ...t }),
-          i === null ? /* @__PURE__ */ s(D, {}) : /* @__PURE__ */ s(V, { as: "span", children: i })
+          n === null ? /* @__PURE__ */ a(P, {}) : /* @__PURE__ */ a(H, { ...n }),
+          c === null ? /* @__PURE__ */ a(P, {}) : /* @__PURE__ */ a(D, { as: "span", children: c })
         ]
       }
     );
-}, ne = ({
-  leadingText: t = "Create",
-  values: i,
-  onCreate: o,
-  selected: l = null,
-  ...n
+}, ae = ({
+  leadingText: n = "Create",
+  values: c,
+  onCreate: e,
+  selected: s = null,
+  ...r
 }) => {
-  const e = a.useContext(x), u = a.useCallback(
-    (r) => !i || (i == null ? void 0 : i.length) === 0 ? !1 : i.some((c) => c.value === r),
-    [i]
+  const t = i.useContext(C), u = i.useCallback(
+    (o) => !c || (c == null ? void 0 : c.length) === 0 ? !1 : c.some((l) => l.value === o),
+    [c]
   );
-  if (e.searchQuery && !u(e.searchQuery))
-    return /* @__PURE__ */ s(
+  if (t.searchQuery && !u(t.searchQuery))
+    return /* @__PURE__ */ a(
       B,
       {
-        leadingIcon: { icon: w.Plus, "aria-hidden": !0 },
+        leadingIcon: { icon: R.Plus, "aria-hidden": !0 },
         mx: "1",
-        value: e.searchQuery,
-        label: `${t} "${e.searchQuery}"`,
-        selected: l,
+        value: t.searchQuery,
+        label: `${n} "${t.searchQuery}"`,
+        selected: s,
         onSelect: () => {
-          var r;
-          o && e.value && e.searchQuery && (L(e.value) && o({ value: e.searchQuery }), I(e.value) && o({ value: e.searchQuery }), (r = e.setSearchQuery) == null || r.call(e, ""));
+          var o;
+          e && t.value && t.searchQuery && (L(t.value) && e({ value: t.searchQuery }), E(t.value) && e({ value: t.searchQuery }), (o = t.setSearchQuery) == null || o.call(t, ""));
         },
-        ...n
+        ...r
       }
     );
-}, re = {};
-Object.assign(re, {
-  Root: U,
-  Trigger: W,
-  Content: Z,
-  Options: ee,
+}, ie = {};
+Object.assign(ie, {
+  Root: J,
+  Trigger: ee,
+  Content: te,
+  Options: oe,
   Option: B,
-  Search: te,
-  Empty: oe,
-  Create: ne
+  Search: ne,
+  Empty: re,
+  Create: ae
 });
 export {
-  re as Combobox
+  ie as Combobox
 };
 //# sourceMappingURL=index.mjs.map