@telegraph/combobox 0.0.19 → 0.0.21

package/dist/esm/index.mjs

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