@telegraph/combobox 0.0.47 → 0.0.49

package/dist/esm/index.mjs

@@ -1,25 +1,24 @@
-import { jsx as i, jsxs as S, Fragment as F } from "react/jsx-runtime";
-import { DismissableLayer as M } from "@radix-ui/react-dismissable-layer";
-import { useControllableState as Y } from "@radix-ui/react-use-controllable-state";
-import * as z from "@radix-ui/react-visually-hidden";
-import { Button as E } from "@telegraph/button";
-import { useComposedRefs as H } from "@telegraph/compose-refs";
-import { RefToTgphRef as X } from "@telegraph/helpers";
-import { Lucide as v, Icon as K } from "@telegraph/icon";
-import { Input as q } from "@telegraph/input";
-import { Stack as T, Box as B } from "@telegraph/layout";
+import { jsx as c, jsxs as w, Fragment as V } from "react/jsx-runtime";
+import { DismissableLayer as G } from "@radix-ui/react-dismissable-layer";
+import { useControllableState as M } from "@radix-ui/react-use-controllable-state";
+import * as Y from "@radix-ui/react-visually-hidden";
+import { Button as v } from "@telegraph/button";
+import { useComposedRefs as K } from "@telegraph/compose-refs";
+import { RefToTgphRef as $ } from "@telegraph/helpers";
+import { Lucide as R, Icon as F } from "@telegraph/icon";
+import { Input as X } from "@telegraph/input";
+import { Stack as I, Box as A } from "@telegraph/layout";
 import { Menu as D } from "@telegraph/menu";
 import { Tag as O } from "@telegraph/tag";
-import { Tooltip as N } from "@telegraph/tooltip";
-import { Text as P } from "@telegraph/typography";
-import { motion as I, AnimatePresence as L } from "framer-motion";
-import c from "react";
-const U = {
+import { Tooltip as q } from "@telegraph/tooltip";
+import { Text as L } from "@telegraph/typography";
+import i from "react";
+const z = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, R = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || !t, J = ["ArrowDown", "PageUp", "Home"], W = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], x = c.createContext({
+}, C = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || !t, N = ["ArrowDown", "PageUp", "Home"], U = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], m = i.createContext({
   value: void 0,
   onValueChange: () => {
   },
@@ -32,112 +31,90 @@ const U = {
   },
   clearable: !1,
   disabled: !1
-}), Z = ({
+}), J = ({
   modal: t = !0,
   closeOnSelect: l = !0,
   clearable: e = !1,
   disabled: u = !1,
   open: s,
-  onOpenChange: r,
-  defaultOpen: n,
-  value: o,
-  onValueChange: a,
-  errored: b,
-  placeholder: d,
-  layout: y,
-  ...g
+  onOpenChange: a,
+  defaultOpen: o,
+  value: n,
+  onValueChange: r,
+  errored: g,
+  placeholder: h,
+  layout: b,
+  ...p
 }) => {
-  const p = c.useId(), f = c.useId(), m = c.useRef(null), h = c.useRef(null), C = c.useRef(null), [w, V] = c.useState(""), [Q = !1, A] = Y({
+  const d = i.useId(), x = i.useId(), y = i.useRef(null), f = i.useRef(null), S = i.useRef(null), [T, P] = i.useState(""), [E = !1, Q] = M({
     prop: s,
-    defaultProp: n,
-    onChange: r
-  }), $ = c.useCallback(() => {
-    A((G) => !G);
-  }, [A]);
-  return c.useEffect(() => {
-    Q || V("");
-  }, [Q]), /* @__PURE__ */ i(
-    x.Provider,
+    defaultProp: o,
+    onChange: a
+  }), H = i.useCallback(() => {
+    Q((_) => !_);
+  }, [Q]);
+  return i.useEffect(() => {
+    E || P("");
+  }, [E]), /* @__PURE__ */ c(
+    m.Provider,
     {
       value: {
-        contentId: p,
-        triggerId: f,
-        value: o,
+        contentId: d,
+        triggerId: x,
+        value: n,
         // Need to cast this to avoid type errors
         // because the type of onValueChange is not
         // consistent with the value type
-        onValueChange: a,
-        placeholder: d,
-        open: Q,
-        setOpen: A,
-        onOpenToggle: $,
+        onValueChange: r,
+        placeholder: h,
+        open: E,
+        setOpen: Q,
+        onOpenToggle: H,
         closeOnSelect: l,
         clearable: e,
         disabled: u,
-        searchQuery: w,
-        setSearchQuery: V,
-        triggerRef: m,
-        searchRef: h,
-        contentRef: C,
-        errored: b,
-        layout: y
+        searchQuery: T,
+        setSearchQuery: P,
+        triggerRef: y,
+        searchRef: f,
+        contentRef: S,
+        errored: g,
+        layout: b
       },
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ c(
         D.Root,
         {
-          open: Q,
-          onOpenChange: A,
+          open: E,
+          onOpenChange: Q,
           modal: t,
-          ...g
+          ...p
         }
       )
     }
   );
-}, ee = ({ label: t, value: l, ...e }) => {
-  const u = c.useContext(x);
-  return /* @__PURE__ */ S(
-    O.Root,
-    {
-      size: "1",
-      as: I.span,
-      initial: { opacity: 0, transform: "scale(0.8)" },
-      animate: { opacity: 1, transform: "scale(1)" },
-      exit: { opacity: 0, transform: "scale(0.5)" },
-      layout: "position",
-      transition: {
-        duration: 0.2,
-        type: "spring",
-        bounce: 0,
-        layout: {
-          duration: 0.05,
-          type: "spring",
-          bounce: 0
+}, W = ({ label: t, value: l, ...e }) => {
+  const u = i.useContext(m);
+  return /* @__PURE__ */ w(O.Root, { size: "1", layout: "position", ...e, children: [
+    /* @__PURE__ */ c(O.Text, { children: t || l }),
+    /* @__PURE__ */ c(
+      O.Button,
+      {
+        icon: { icon: R.X, alt: `Remove ${l}` },
+        onClick: (s) => {
+          if (!u.onValueChange) return;
+          const a = u.onValueChange, n = u.value.filter((r) => (r == null ? void 0 : r.value) !== l);
+          a == null || a(n), s.stopPropagation(), s.preventDefault();
         }
-      },
-      ...e,
-      children: [
-        /* @__PURE__ */ i(O.Text, { children: t || l }),
-        /* @__PURE__ */ i(
-          O.Button,
-          {
-            icon: { icon: v.X, alt: `Remove ${l}` },
-            onClick: (s) => {
-              if (!u.onValueChange) return;
-              const r = u.onValueChange, o = u.value.filter((a) => (a == null ? void 0 : a.value) !== l);
-              r == null || r(o), s.stopPropagation(), s.preventDefault();
-            }
-          }
-        )
-      ]
-    }
-  );
-}, te = () => {
+      }
+    )
+  ] });
+}, Z = () => {
   var l, e;
-  const t = c.useContext(x);
-  if (t.value && R(t.value)) {
-    const u = t.layout || "truncate", s = t.value.length - 2, r = s.toString().split("");
-    return t.value.length === 0 ? /* @__PURE__ */ i(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
-      T,
+  const t = i.useContext(m);
+  if (t.value && C(t.value)) {
+    const u = t.layout || "truncate", s = t.value.length - 2, a = s.toString().split("");
+    return t.value.length === 0 ? /* @__PURE__ */ c(v.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ w(
+      I,
       {
         gap: "1",
         w: "full",
@@ -148,116 +125,91 @@ const U = {
           flexGrow: 1
         },
         children: [
-          /* @__PURE__ */ i(L, { initial: !1, mode: "popLayout", children: t.value.map((n, o) => {
-            if (n != null && n.value && (u === "truncate" && o <= 1 || u === "wrap"))
-              return /* @__PURE__ */ i(X, { children: /* @__PURE__ */ i(ee, { ...n }) }, n.value);
-          }) }),
-          /* @__PURE__ */ i(L, { children: u === "truncate" && t.value.length > 2 && /* @__PURE__ */ i(
-            T,
+          t.value.map((o, n) => {
+            if (o != null && o.value && (u === "truncate" && n <= 1 || u === "wrap"))
+              return /* @__PURE__ */ c($, { children: /* @__PURE__ */ c(W, { ...o }) }, o.value);
+          }),
+          u === "truncate" && t.value.length > 2 && /* @__PURE__ */ c(
+            I,
             {
-              as: I.div,
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.2, type: "spring", bounce: 0 },
               h: "full",
               pr: "1",
               pl: "8",
               align: "center",
               "aria-label": `${s} more selected`,
+              position: "absolute",
+              right: "0",
               style: {
-                position: "absolute",
-                right: 0,
                 backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
               },
-              children: /* @__PURE__ */ S(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+              children: /* @__PURE__ */ w(L, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
-                /* @__PURE__ */ i(L, { mode: "wait", initial: !1, children: r.map((n) => /* @__PURE__ */ i(
-                  B,
-                  {
-                    as: I.span,
-                    w: "2",
-                    display: "inline-block",
-                    initial: {
-                      opacity: 0.5
-                    },
-                    animate: {
-                      opacity: 1
-                    },
-                    exit: {
-                      opacity: 0.5
-                    },
-                    transition: { duration: 0.1, type: "spring", bounce: 0 },
-                    children: n
-                  },
-                  n
-                )) }),
+                a.map((o) => /* @__PURE__ */ c(A, { as: "span", w: "2", display: "inline-block", children: o }, o)),
                 " ",
                 "more"
               ] })
-            },
-            "truncated text"
-          ) })
+            }
+          )
         ]
       }
     );
   }
-  return /* @__PURE__ */ i(E.Text, { color: t.value ? "default" : "gray", children: ((l = t == null ? void 0 : t.value) == null ? void 0 : l.label) || ((e = t == null ? void 0 : t.value) == null ? void 0 : e.value) || t.placeholder });
-}, oe = ({ size: t = "2", ...l }) => {
-  const e = c.useContext(x), u = c.useCallback(() => {
-    var n, o, a;
-    return e.value ? k(e.value) ? ((n = e.value) == null ? void 0 : n.label) || ((o = e.value) == null ? void 0 : o.value) || e.placeholder : ((a = e.value) == null ? void 0 : a.map((b) => b == null ? void 0 : b.label).join(", ")) || e.placeholder : e.placeholder;
-  }, [e.value, e.placeholder]), s = c.useMemo(() => {
-    var n;
-    if (R(e.value))
-      return e.clearable && ((n = e.value) == null ? void 0 : n.length) > 0;
+  return /* @__PURE__ */ c(v.Text, { color: t.value ? "default" : "gray", children: ((l = t == null ? void 0 : t.value) == null ? void 0 : l.label) || ((e = t == null ? void 0 : t.value) == null ? void 0 : e.value) || t.placeholder });
+}, ee = ({ size: t = "2", ...l }) => {
+  const e = i.useContext(m), u = i.useCallback(() => {
+    var o, n, r;
+    return e.value ? k(e.value) ? ((o = e.value) == null ? void 0 : o.label) || ((n = e.value) == null ? void 0 : n.value) || e.placeholder : ((r = e.value) == null ? void 0 : r.map((g) => g == null ? void 0 : g.label).join(", ")) || e.placeholder : e.placeholder;
+  }, [e.value, e.placeholder]), s = i.useMemo(() => {
+    var o;
+    if (C(e.value))
+      return e.clearable && ((o = e.value) == null ? void 0 : o.length) > 0;
     if (k(e.value))
       return e.clearable && e.value;
-  }, [e.clearable, e.value]), r = () => {
-    var n, o;
-    if (R(e.value)) {
-      const a = e.onValueChange;
-      a == null || a([]);
+  }, [e.clearable, e.value]), a = () => {
+    var o, n;
+    if (C(e.value)) {
+      const r = e.onValueChange;
+      r == null || r([]);
     }
     if (k(e.value)) {
-      const a = e.onValueChange;
-      a == null || a(void 0);
+      const r = e.onValueChange;
+      r == null || r(void 0);
     }
-    (o = (n = e.triggerRef) == null ? void 0 : n.current) == null || o.focus();
+    (n = (o = e.triggerRef) == null ? void 0 : o.current) == null || n.focus();
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     D.Trigger,
     {
       ...l,
       asChild: !0,
-      onClick: (n) => {
-        var o, a;
-        n.preventDefault(), e.onOpenToggle(), (a = (o = e.triggerRef) == null ? void 0 : o.current) == null || a.focus();
+      onClick: (o) => {
+        var n, r;
+        o.preventDefault(), e.onOpenToggle(), (r = (n = e.triggerRef) == null ? void 0 : n.current) == null || r.focus();
       },
-      onKeyDown: (n) => {
-        if (n.key === "Tab") {
-          n.stopPropagation();
+      onKeyDown: (o) => {
+        if (o.key === "Tab") {
+          o.stopPropagation();
           return;
         }
-        if (j.includes(n.key)) {
-          n.preventDefault();
+        if (j.includes(o.key)) {
+          o.preventDefault();
           return;
         }
-        if (n.key === "ArrowDown") {
-          n.stopPropagation(), n.preventDefault(), e.onOpenToggle();
+        if (o.key === "ArrowDown") {
+          o.stopPropagation(), o.preventDefault(), e.onOpenToggle();
           return;
         }
       },
       tgphRef: e.triggerRef,
-      children: /* @__PURE__ */ S(
-        E.Root,
+      children: /* @__PURE__ */ w(
+        v.Root,
         {
           id: e.triggerId,
           type: "button",
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: U[t],
+          minH: z[t],
           h: "full",
           w: "full",
           py: "1",
@@ -273,20 +225,20 @@ const U = {
           "data-tgph-comobox-trigger-open": e.open,
           disabled: e.disabled,
           children: [
-            /* @__PURE__ */ i(te, {}),
-            /* @__PURE__ */ S(T, { align: "center", gap: "1", children: [
-              s && /* @__PURE__ */ i(N, { label: "Clear field", children: /* @__PURE__ */ i(
-                E,
+            /* @__PURE__ */ c(Z, {}),
+            /* @__PURE__ */ w(I, { align: "center", gap: "1", children: [
+              s && /* @__PURE__ */ c(q, { label: "Clear field", children: /* @__PURE__ */ c(
+                v,
                 {
                   type: "button",
-                  icon: { icon: v.X, alt: "Clear field" },
+                  icon: { icon: R.X, alt: "Clear field" },
                   size: "1",
                   variant: "ghost",
-                  onClick: (n) => {
-                    e.value && (n.stopPropagation(), r());
+                  onClick: (o) => {
+                    e.value && (o.stopPropagation(), a());
                   },
-                  onKeyDown: (n) => {
-                    (n.key === "Enter" || n.key === " ") && (n.stopPropagation(), r());
+                  onKeyDown: (o) => {
+                    (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), a());
                   },
                   "data-tgph-combobox-clear": !0,
                   style: {
@@ -297,115 +249,71 @@ const U = {
                   }
                 }
               ) }),
-              /* @__PURE__ */ i(
-                E.Icon,
-                {
-                  as: I.div,
-                  icon: v.ChevronDown,
-                  animate: { rotate: e.open ? "180deg" : "0deg" },
-                  transition: { duration: 0.2, type: "spring", bounce: 0 },
-                  "aria-hidden": !0
-                }
-              )
+              /* @__PURE__ */ c(v.Icon, { icon: R.ChevronDown, "aria-hidden": !0 })
             ] })
           ]
         }
       )
     }
   );
-}, ne = ({
+}, te = ({
   tgphRef: t,
   style: l,
   children: e,
   ...u
 }) => {
-  const s = c.useContext(x), r = c.useRef(!1), n = H(t, s.contentRef), o = c.useRef(null), [a, b] = c.useState(0), [d, y] = c.useState(!1), g = c.useCallback(
-    (p) => {
-      const f = p.getBoundingClientRect();
-      f && b(f.height), d || y(!0);
-    },
-    [d]
-  );
-  return c.useEffect(() => {
-    const p = new ResizeObserver((f) => {
-      for (const m of f) {
-        const h = m.target;
-        g(h);
+  const s = i.useContext(m), a = i.useRef(!1), o = K(t, s.contentRef), n = i.useRef(null);
+  return (
+    // We add radix's dismissable layer here so that we can swallow any escape key
+    // presses to prevent cases like a modal closing when we close the combobox
+    /* @__PURE__ */ c(
+      G,
+      {
+        onEscapeKeyDown: (r) => {
+          s.open && (r.stopPropagation(), r.preventDefault(), s.setOpen(!1));
+        },
+        children: /* @__PURE__ */ c(A, { tgphRef: o, children: /* @__PURE__ */ c(
+          D.Content,
+          {
+            mt: "1",
+            onCloseAutoFocus: (r) => {
+              var g, h;
+              a.current || (h = (g = s.triggerRef) == null ? void 0 : g.current) == null || h.focus(), a.current = !1, r.preventDefault();
+            },
+            bg: "surface-1",
+            style: {
+              width: "var(--tgph-comobobox-trigger-width)",
+              ...l,
+              "--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)"
+            },
+            ...u,
+            tgphRef: o,
+            "data-tgph-combobox-content": !0,
+            "data-tgph-combobox-content-open": s.open,
+            role: void 0,
+            "aria-orientation": void 0,
+            onKeyDown: (r) => {
+              var h, b, p, d;
+              r.stopPropagation();
+              const g = (b = (h = s.contentRef) == null ? void 0 : h.current) == null ? void 0 : b.querySelectorAll(
+                "[data-tgph-combobox-option]"
+              );
+              document.activeElement === (g == null ? void 0 : g[0]) && U.includes(r.key) && ((d = (p = s.searchRef) == null ? void 0 : p.current) == null || d.focus());
+            },
+            children: /* @__PURE__ */ c(I, { direction: "column", gap: "1", tgphRef: n, children: e })
+          }
+        ) })
       }
-    });
-    return o.current && d && p.observe(o.current), () => p.disconnect();
-  }, [d, g]), c.useEffect(() => {
-    d === !0 && s.open === !1 && y(!1);
-  }, [s.open, d]), // We add radix's dismissable layer here so that we can swallow any escape key
-  // presses to prevent cases like a modal closing when we close the combobox
-  /* @__PURE__ */ i(
-    M,
-    {
-      onEscapeKeyDown: (p) => {
-        s.open && (p.stopPropagation(), p.preventDefault(), s.setOpen(!1));
-      },
-      children: /* @__PURE__ */ i(
-        D.Content,
-        {
-          as: I.div,
-          mt: "1",
-          initial: {
-            opacity: 0,
-            scale: 0.8,
-            height: "auto"
-          },
-          animate: {
-            opacity: 1,
-            scale: 1,
-            // Set height based on the internalContentRef so that
-            // we get smooth animations when the content changes
-            minHeight: a ? `${a}px` : "0"
-          },
-          exit: { opacity: 0, scale: 0 },
-          transition: { duration: 0.2, type: "spring", bounce: 0 },
-          onAnimationComplete: () => {
-            if (!d && o) {
-              const p = o.current;
-              g(p);
-            }
-          },
-          onCloseAutoFocus: (p) => {
-            var f, m;
-            r.current || (m = (f = s.triggerRef) == null ? void 0 : f.current) == null || m.focus(), r.current = !1, p.preventDefault();
-          },
-          onKeyDown: (p) => {
-            var m, h, C, w;
-            p.stopPropagation();
-            const f = (h = (m = s.contentRef) == null ? void 0 : m.current) == null ? void 0 : h.querySelectorAll(
-              "[data-tgph-combobox-option]"
-            );
-            document.activeElement === (f == null ? void 0 : f[0]) && W.includes(p.key) && ((w = (C = s.searchRef) == null ? void 0 : C.current) == null || w.focus());
-          },
-          bg: "surface-1",
-          style: {
-            width: "var(--tgph-comobobox-trigger-width)",
-            ...l,
-            "--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)"
-          },
-          ...u,
-          tgphRef: n,
-          "data-tgph-combobox-content": !0,
-          "data-tgph-combobox-content-open": d,
-          role: void 0,
-          "aria-orientation": void 0,
-          children: /* @__PURE__ */ i(T, { direction: "column", gap: "1", tgphRef: o, children: e })
-        }
-      )
-    }
+    )
   );
-}, re = ({ ...t }) => {
-  const l = c.useContext(x);
-  return /* @__PURE__ */ i(
-    T,
+}, oe = ({ ...t }) => {
+  const l = i.useContext(m);
+  return /* @__PURE__ */ c(
+    I,
     {
       id: l.contentId,
       direction: "column",
@@ -419,128 +327,120 @@ const U = {
       ...t
     }
   );
-}, _ = ({
+}, B = ({
   value: t,
   label: l,
   selected: e,
   onSelect: u,
   ...s
 }) => {
-  const r = c.useContext(x), [n, o] = c.useState(!1), a = r.value, b = (R(a), !r.searchQuery || t.toLowerCase().includes(r.searchQuery.toLowerCase())), d = R(a) ? a.some((g) => (g == null ? void 0 : g.value) === t) : (a == null ? void 0 : a.value) === t, y = (g) => {
-    var f, m;
-    g.stopPropagation();
-    const p = g;
-    if (!(p.key && !j.includes(p.key))) {
-      if (g.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), u)
-        return u(g);
-      if (k(a)) {
-        const h = r.onValueChange;
-        h == null || h({ value: t, label: l });
-      } else if (R(a)) {
-        const h = r.onValueChange, C = d ? a.filter((w) => (w == null ? void 0 : w.value) !== t) : [...a, { value: t, label: l }];
-        h == null || h(C);
+  const a = i.useContext(m), [o, n] = i.useState(!1), r = a.value, g = (C(r), !a.searchQuery || t.toLowerCase().includes(a.searchQuery.toLowerCase())), h = C(r) ? r.some((p) => (p == null ? void 0 : p.value) === t) : (r == null ? void 0 : r.value) === t, b = (p) => {
+    var x, y;
+    p.stopPropagation();
+    const d = p;
+    if (!(d.key && !j.includes(d.key))) {
+      if (p.preventDefault(), a.closeOnSelect === !0 && a.setOpen(!1), u)
+        return u(p);
+      if (k(r)) {
+        const f = a.onValueChange;
+        f == null || f({ value: t, label: l });
+      } else if (C(r)) {
+        const f = a.onValueChange, S = h ? r.filter((T) => (T == null ? void 0 : T.value) !== t) : [...r, { value: t, label: l }];
+        f == null || f(S);
       }
-      (m = (f = r.triggerRef) == null ? void 0 : f.current) == null || m.focus();
+      (y = (x = a.triggerRef) == null ? void 0 : x.current) == null || y.focus();
     }
   };
-  if (b)
-    return /* @__PURE__ */ i(
+  if (g)
+    return /* @__PURE__ */ c(
       D.Button,
       {
         type: "button",
-        onSelect: y,
-        onKeyDown: y,
-        selected: e === null ? null : e ?? d,
-        onFocus: () => o(!0),
-        onBlur: () => o(!1),
+        onSelect: b,
+        onKeyDown: b,
+        selected: e === null ? null : e ?? h,
+        onFocus: () => n(!0),
+        onBlur: () => n(!1),
         role: "option",
-        "aria-selected": d ? "true" : "false",
+        "aria-selected": h ? "true" : "false",
         "data-tgph-combobox-option": !0,
-        "data-tgph-combobox-option-focused": n,
+        "data-tgph-combobox-option-focused": o,
         "data-tgph-combobox-option-value": t,
         "data-tgph-combobox-option-label": l,
         ...s,
         children: l || t
       }
     );
-}, ae = ({
+}, re = ({
   label: t = "Search",
   placeholder: l = "Search",
   tgphRef: e,
   value: u,
   onValueChange: s,
-  ...r
+  ...a
 }) => {
-  var y;
-  const n = c.useId(), o = c.useContext(x), a = H(e, o.searchRef), b = u ?? o.searchQuery, d = s ?? o.setSearchQuery;
-  return c.useEffect(() => {
-    var f;
-    const g = (m) => {
-      var h, C;
-      J.includes(m.key) && ((C = (h = o.contentRef) == null ? void 0 : h.current) == null || C.focus({ preventScroll: !0 })), m.key === "Escape" && o.setOpen(!1), m.stopPropagation();
-    }, p = (f = o.searchRef) == null ? void 0 : f.current;
-    if (p)
-      return p.addEventListener("keydown", g), () => {
-        p.removeEventListener("keydown", g);
+  var b;
+  const o = i.useId(), n = i.useContext(m), r = K(e, n.searchRef), g = u ?? n.searchQuery, h = s ?? n.setSearchQuery;
+  return i.useEffect(() => {
+    var x;
+    const p = (y) => {
+      var f, S;
+      N.includes(y.key) && ((S = (f = n.contentRef) == null ? void 0 : f.current) == null || S.focus({ preventScroll: !0 })), y.key === "Escape" && n.setOpen(!1), y.stopPropagation();
+    }, d = (x = n.searchRef) == null ? void 0 : x.current;
+    if (d)
+      return d.addEventListener("keydown", p), () => {
+        d.removeEventListener("keydown", p);
       };
-  }, [o]), /* @__PURE__ */ S(B, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ i(z.Root, { children: /* @__PURE__ */ i(P, { as: "label", htmlFor: n, children: t }) }),
-    /* @__PURE__ */ i(
-      q,
+  }, [n]), /* @__PURE__ */ w(A, { borderBottom: "px", px: "1", pb: "1", children: [
+    /* @__PURE__ */ c(Y.Root, { children: /* @__PURE__ */ c(L, { as: "label", htmlFor: o, children: t }) }),
+    /* @__PURE__ */ c(
+      X,
       {
-        id: n,
+        id: o,
         variant: "ghost",
         placeholder: l,
-        value: b,
-        onChange: (g) => {
-          d(g.target.value);
+        value: g,
+        onChange: (p) => {
+          h(p.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ i(K, { icon: v.Search, alt: "Search Icon" }),
-        TrailingComponent: o != null && o.searchQuery && ((y = o == null ? void 0 : o.searchQuery) == null ? void 0 : y.length) > 0 ? /* @__PURE__ */ i(
-          E,
+        LeadingComponent: /* @__PURE__ */ c(F, { icon: R.Search, alt: "Search Icon" }),
+        TrailingComponent: n != null && n.searchQuery && ((b = n == null ? void 0 : n.searchQuery) == null ? void 0 : b.length) > 0 ? /* @__PURE__ */ c(
+          v,
           {
-            as: I.button,
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            transition: { duration: 0.2, type: "spring", bounce: 0 },
             variant: "ghost",
             color: "gray",
-            icon: { icon: v.X, alt: "Clear Search Query" },
+            icon: { icon: R.X, alt: "Clear Search Query" },
             onClick: () => {
-              var g;
-              return (g = o.setSearchQuery) == null ? void 0 : g.call(o, "");
+              var p;
+              return (p = n.setSearchQuery) == null ? void 0 : p.call(n, "");
             }
           }
         ) : null,
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
-        "aria-controls": o.contentId,
-        ...r,
-        tgphRef: a
+        "aria-controls": n.contentId,
+        ...a,
+        tgphRef: r
       }
     )
   ] });
-}, ie = ({
-  icon: t = { icon: v.Search, alt: "Search Icon" },
+}, ne = ({
+  icon: t = { icon: R.Search, alt: "Search Icon" },
   message: l = "No results found",
   children: e,
   ...u
 }) => {
-  const s = c.useContext(x), [r, n] = c.useState(!1);
-  if (c.useEffect(() => {
-    var a, b;
-    const o = (b = (a = s.contentRef) == null ? void 0 : a.current) == null ? void 0 : b.querySelectorAll(
+  const s = i.useContext(m), [a, o] = i.useState(!1);
+  if (i.useEffect(() => {
+    var r, g;
+    const n = (g = (r = s.contentRef) == null ? void 0 : r.current) == null ? void 0 : g.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
-    (o == null ? void 0 : o.length) === 0 ? n(!0) : n(!1);
-  }, [s.searchQuery, s.contentRef, e]), r)
-    return /* @__PURE__ */ S(
-      T,
+    (n == null ? void 0 : n.length) === 0 ? o(!0) : o(!1);
+  }, [s.searchQuery, s.contentRef, e]), a)
+    return /* @__PURE__ */ w(
+      I,
       {
-        as: I.div,
-        initial: { opacity: 0, scale: 0.8 },
-        animate: { opacity: 1, scale: 1 },
-        transition: { duration: 0.2, type: "spring", bounce: 0 },
         gap: "1",
         align: "center",
         justify: "center",
@@ -549,48 +449,48 @@ const U = {
         "data-tgph-combobox-empty": !0,
         ...u,
         children: [
-          t === null ? /* @__PURE__ */ i(F, {}) : /* @__PURE__ */ i(K, { ...t }),
-          l === null ? /* @__PURE__ */ i(F, {}) : /* @__PURE__ */ i(P, { as: "span", children: l })
+          t === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(F, { ...t }),
+          l === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(L, { as: "span", children: l })
         ]
       }
     );
-}, ce = ({
+}, ae = ({
   leadingText: t = "Create",
   values: l,
   onCreate: e,
   selected: u = null,
   ...s
 }) => {
-  const r = c.useContext(x), n = c.useCallback(
-    (o) => !l || (l == null ? void 0 : l.length) === 0 ? !1 : l.some((a) => (a == null ? void 0 : a.value) === o),
+  const a = i.useContext(m), o = i.useCallback(
+    (n) => !l || (l == null ? void 0 : l.length) === 0 ? !1 : l.some((r) => (r == null ? void 0 : r.value) === n),
     [l]
   );
-  if (r.searchQuery && !n(r.searchQuery))
-    return /* @__PURE__ */ i(
-      _,
+  if (a.searchQuery && !o(a.searchQuery))
+    return /* @__PURE__ */ c(
+      B,
       {
-        leadingIcon: { icon: v.Plus, "aria-hidden": !0 },
+        leadingIcon: { icon: R.Plus, "aria-hidden": !0 },
         mx: "1",
-        value: r.searchQuery,
-        label: `${t} "${r.searchQuery}"`,
+        value: a.searchQuery,
+        label: `${t} "${a.searchQuery}"`,
         selected: u,
         onSelect: () => {
-          var o;
-          e && r.value && r.searchQuery && (k(r.value) && e({ value: r.searchQuery }), R(r.value) && e({ value: r.searchQuery }), (o = r.setSearchQuery) == null || o.call(r, ""));
+          var n;
+          e && a.value && a.searchQuery && (k(a.value) && e({ value: a.searchQuery }), C(a.value) && e({ value: a.searchQuery }), (n = a.setSearchQuery) == null || n.call(a, ""));
         },
         ...s
       }
     );
 }, le = {};
 Object.assign(le, {
-  Root: Z,
-  Trigger: oe,
-  Content: ne,
-  Options: re,
-  Option: _,
-  Search: ae,
-  Empty: ie,
-  Create: ce
+  Root: J,
+  Trigger: ee,
+  Content: te,
+  Options: oe,
+  Option: B,
+  Search: re,
+  Empty: ne,
+  Create: ae
 });
 export {
   le as Combobox