@telegraph/combobox 0.0.76 → 0.0.78

package/dist/esm/index.mjs

@@ -1,62 +1,330 @@
-import { jsx as p, jsxs as S, Fragment as K } from "react/jsx-runtime";
-import { DismissableLayer as U } from "@radix-ui/react-dismissable-layer";
-import * as W from "@radix-ui/react-portal";
-import { useControllableState as J } 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 j } from "@telegraph/compose-refs";
-import { RefToTgphRef as ee } from "@telegraph/helpers";
-import { Lucide as R, Icon as N } from "@telegraph/icon";
-import { Input as te } from "@telegraph/input";
-import { Stack as I, Box as _ } from "@telegraph/layout";
+import { jsx as l, jsxs as R, Fragment as _ } from "react/jsx-runtime";
+import { DismissableLayer as Z } from "@radix-ui/react-dismissable-layer";
+import * as ee from "@radix-ui/react-portal";
+import { useControllableState as te } from "@radix-ui/react-use-controllable-state";
+import * as oe from "@radix-ui/react-visually-hidden";
+import { Button as B } from "@telegraph/button";
+import { useComposedRefs as $ } from "@telegraph/compose-refs";
+import { RefToTgphRef as re } from "@telegraph/helpers";
+import { Lucide as E, Icon as z } from "@telegraph/icon";
+import { Input as ne } from "@telegraph/input";
+import { Stack as I, Box as G } from "@telegraph/layout";
 import { Menu as Q } from "@telegraph/menu";
-import { motion as B, AnimatePresence as P } from "@telegraph/motion";
-import { Tag as L } from "@telegraph/tag";
-import { Tooltip as oe } from "@telegraph/tooltip";
-import { Text as M } from "@telegraph/typography";
-import i from "react";
-const ne = {
+import { Text as H } from "@telegraph/typography";
+import s from "react";
+import { motion as P, AnimatePresence as M } from "@telegraph/motion";
+import { Tag as K } from "@telegraph/tag";
+import { Tooltip as ae } from "@telegraph/tooltip";
+const ie = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, k = (t) => Array.isArray(t), T = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, re = (t) => {
-  const a = (r, c = []) => (i.Children.toArray(r).forEach((n) => {
-    i.isValidElement(n) && (n.props.value ? c.push(n) : n.props.children && a(n.props.children, c));
+}, S = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, ce = (t) => {
+  const o = (a, c = []) => (s.Children.toArray(a).forEach((i) => {
+    s.isValidElement(i) && (i.props.value ? c.push(i) : i.props.children && o(i.props.children, c));
   }), c);
-  return a(t).map((r) => {
-    var o;
-    const c = r;
+  return o(t).map((a) => {
+    var n;
+    const c = a;
     return {
       value: c.props.value,
-      label: ((o = c.props) == null ? void 0 : o.label) || c.props.children || c.props.value
+      label: ((n = c.props) == null ? void 0 : n.label) || c.props.children || c.props.value
     };
   });
-}, C = (t, a) => {
+}, C = (t, o) => {
   if (t)
-    return a === !0 ? t == null ? void 0 : t.value : t;
-}, F = (t, a, e) => {
-  if (!t || !a || a.length === 0) return;
-  const l = a.find(
-    (r) => r.value === C(t, e)
+    return o === !0 ? t == null ? void 0 : t.value : t;
+}, F = (t, o, e) => {
+  if (!t || !o || o.length === 0) return;
+  const r = o.find(
+    (a) => a.value === C(t, e)
   );
-  if (l)
-    return l;
-}, ae = ({
+  if (r)
+    return r;
+}, se = ({
   children: t,
-  value: a,
+  value: o,
   searchQuery: e
 }) => {
-  const l = $(t);
-  return (a == null ? void 0 : a.toLowerCase().includes(e.toLowerCase())) || l.some(
-    (r) => r.toLowerCase().includes(e.toLowerCase())
+  const r = Y(t);
+  return (o == null ? void 0 : o.toLowerCase().includes(e.toLowerCase())) || r.some(
+    (a) => a.toLowerCase().includes(e.toLowerCase())
   );
-}, $ = (t) => {
-  const a = i.Children.toArray(t), e = [];
-  return a.forEach((l) => {
-    typeof l == "string" && e.push(l), i.isValidElement(l) && l.props.children && e.push(...$(l.props.children));
+}, Y = (t) => {
+  const o = s.Children.toArray(t), e = [];
+  return o.forEach((r) => {
+    typeof r == "string" && e.push(r), s.isValidElement(r) && r.props.children && e.push(...Y(r.props.children));
   }), e;
-}, ie = ["ArrowDown", "PageUp", "Home"], ce = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = i.createContext({
+}, le = ({
+  icon: t = E.ChevronDown,
+  "aria-hidden": o = !0,
+  ...e
+}) => {
+  const r = s.useContext(y);
+  return /* @__PURE__ */ l(
+    B.Icon,
+    {
+      as: P.span,
+      animate: { rotate: r.open ? 180 : 0 },
+      transition: { duration: 150, type: "spring" },
+      icon: t,
+      "aria-hidden": o,
+      ...e
+    }
+  );
+}, ue = ({
+  tooltipProps: t,
+  ...o
+}) => {
+  const e = s.useContext(y), r = () => {
+    var c, n;
+    if (S(e.value)) {
+      const i = e.onValueChange;
+      i == null || i([]);
+    }
+    if (k(e.value)) {
+      const i = e.onValueChange;
+      i == null || i(void 0);
+    }
+    (n = (c = e.triggerRef) == null ? void 0 : c.current) == null || n.focus();
+  };
+  return s.useMemo(() => {
+    var c;
+    if (k(e.value))
+      return e.clearable && e.value;
+    if (S(e.value))
+      return e.clearable && ((c = e.value) == null ? void 0 : c.length) > 0;
+  }, [e.clearable, e.value]) ? /* @__PURE__ */ l(ae, { label: "Clear field", ...t, children: /* @__PURE__ */ l(
+    B,
+    {
+      type: "button",
+      icon: { icon: E.X, alt: "Clear field" },
+      size: "1",
+      variant: "ghost",
+      onClick: (c) => {
+        e.value && (c.stopPropagation(), r());
+      },
+      onKeyDown: (c) => {
+        (c.key === "Enter" || c.key === " ") && (c.stopPropagation(), r());
+      },
+      "data-tgph-combobox-clear": !0,
+      style: {
+        // Remove margin to make the clear button flush
+        // with the trigger button
+        marginTop: "calc(-1 * var(--tgph-spacing-1)",
+        marginBottom: "calc(-1 * var(--tgph-spacing-1)"
+      },
+      ...o
+    }
+  ) }) : null;
+}, pe = ({
+  children: t,
+  ...o
+}) => {
+  const e = s.useContext(y), r = s.useMemo(() => {
+    var i;
+    if (!k(e.value)) return;
+    const a = F(
+      e.value,
+      e.options,
+      e.legacyBehavior
+    ), c = (a == null ? void 0 : a.label) || (a == null ? void 0 : a.value) || e.placeholder, n = e.legacyBehavior && ((i = e == null ? void 0 : e.value) == null ? void 0 : i.label);
+    return n || c;
+  }, [
+    e.value,
+    e.options,
+    e.legacyBehavior,
+    e.placeholder
+  ]);
+  return /* @__PURE__ */ l(
+    B.Text,
+    {
+      color: e.value ? "default" : "gray",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      ...o,
+      children: t || r
+    }
+  );
+}, ge = ({
+  children: t,
+  ...o
+}) => {
+  const e = s.useContext(y);
+  return /* @__PURE__ */ l(B.Text, { color: "gray", ...o, children: t || e.placeholder });
+}, fe = ({ children: t }) => {
+  const o = s.useContext(y);
+  if (!S(o.value)) return null;
+  const e = o.layout || "truncate", a = (o.value.length - 2).toString().split("");
+  return /* @__PURE__ */ R(
+    I,
+    {
+      gap: "1",
+      w: "full",
+      wrap: e === "wrap" ? "wrap" : "nowrap",
+      align: "center",
+      style: {
+        position: "relative",
+        flexGrow: 1
+      },
+      children: [
+        /* @__PURE__ */ l(
+          M,
+          {
+            presenceMap: o.value.map((c) => ({
+              "tgph-motion-key": C(c, o.legacyBehavior) || "",
+              value: !0
+            })),
+            children: t
+          }
+        ),
+        /* @__PURE__ */ l(
+          M,
+          {
+            presenceMap: [
+              {
+                "tgph-motion-key": "combobox-more",
+                value: !0
+              }
+            ],
+            children: e === "truncate" && o.value.length > 2 && /* @__PURE__ */ l(
+              I,
+              {
+                as: P.div,
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 100, type: "spring" },
+                h: "full",
+                pr: "1",
+                pl: "8",
+                align: "center",
+                "aria-label": `${o.value.length - 2} more selected`,
+                position: "absolute",
+                right: "0",
+                style: {
+                  backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
+                },
+                children: /* @__PURE__ */ R(H, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+                  "+",
+                  /* @__PURE__ */ R(
+                    M,
+                    {
+                      presenceMap: a.map((c) => ({
+                        "tgph-motion-key": c,
+                        value: !0
+                      })),
+                      children: [
+                        a.map((c) => /* @__PURE__ */ l(
+                          G,
+                          {
+                            as: P.span,
+                            initial: { opacity: 0 },
+                            animate: { opacity: 1 },
+                            exit: { opacity: 0 },
+                            transition: { duration: 100, type: "spring" },
+                            w: "2",
+                            display: "inline-block",
+                            "tgph-motion-key": c,
+                            children: c
+                          },
+                          c
+                        )),
+                        " "
+                      ]
+                    }
+                  ),
+                  "more"
+                ] })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, j = s.createContext({
+  value: ""
+}), he = ({
+  value: t,
+  children: o,
+  ...e
+}) => /* @__PURE__ */ l(j.Provider, { value: { value: t }, children: /* @__PURE__ */ l(
+  K.Root,
+  {
+    as: P.span,
+    initializeWithAnimation: !1,
+    initial: { opacity: 0, scale: 0.5 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.5 },
+    transition: { duration: 100, type: "spring" },
+    "tgph-motion-key": t,
+    size: "1",
+    layout: "position",
+    ...e,
+    children: o
+  }
+) }), de = ({
+  children: t,
+  ...o
+}) => {
+  const e = s.useContext(y), r = s.useContext(j), a = s.useMemo(() => {
+    const c = e.options.find(
+      (p) => p.value === r.value
+    );
+    if (c) return c.label || c.value;
+    if (!e.value) return;
+    const i = e.value.find(
+      (p) => C(p, e.legacyBehavior) === r.value
+    );
+    if (i)
+      return i;
+  }, [
+    e.options,
+    e.value,
+    r.value,
+    e.legacyBehavior
+  ]);
+  return /* @__PURE__ */ l(K.Text, { ...o, children: t || a });
+}, me = ({
+  children: t,
+  ...o
+}) => {
+  const e = s.useContext(y), r = s.useContext(j);
+  return /* @__PURE__ */ l(
+    K.Button,
+    {
+      icon: { icon: E.X, alt: `Remove ${r.value}` },
+      onClick: (a) => {
+        if (!e.onValueChange) return;
+        const c = e.onValueChange, i = e.value.filter((p) => C(p, e.legacyBehavior) !== r.value);
+        c == null || c(i), a.stopPropagation(), a.preventDefault();
+      },
+      ...o,
+      children: t
+    }
+  );
+}, ye = ({
+  value: t,
+  children: o,
+  ...e
+}) => /* @__PURE__ */ R(D.Root, { value: t, ...e, children: [
+  /* @__PURE__ */ l(D.Text, { children: o }),
+  /* @__PURE__ */ l(D.Button, {})
+] }), D = {
+  Root: he,
+  Text: de,
+  Button: me,
+  Default: ye
+}, T = {
+  TriggerIndicator: le,
+  TriggerClear: ue,
+  TriggerText: pe,
+  TriggerPlaceholder: ge,
+  TriggerTagsContainer: fe,
+  TriggerTag: D
+}, be = ["ArrowDown", "PageUp", "Home"], xe = ["ArrowUp", "PageDown", "End"], X = ["Enter", " "], y = s.createContext({
   value: void 0,
   onValueChange: () => {
   },
@@ -71,405 +339,210 @@ const ne = {
   disabled: !1,
   options: [],
   legacyBehavior: !1
-}), se = ({
+}), ve = ({
   modal: t = !0,
-  closeOnSelect: a = !0,
+  closeOnSelect: o = !0,
   clearable: e = !1,
-  disabled: l = !1,
-  legacyBehavior: r = !1,
+  disabled: r = !1,
+  legacyBehavior: a = !1,
   open: c,
-  onOpenChange: o,
-  defaultOpen: n,
-  value: s,
-  onValueChange: f,
-  errored: y,
+  onOpenChange: n,
+  defaultOpen: i,
+  value: p,
+  onValueChange: g,
+  errored: b,
   placeholder: v,
   layout: d,
   children: u,
-  ...g
+  ...f
 }) => {
-  const m = i.useId(), b = i.useId(), h = i.useRef(null), w = i.useRef(null), V = i.useRef(null), D = i.useMemo(() => re(u), [u]), [Y, H] = i.useState(""), [O = !1, A] = J({
+  const m = s.useId(), x = s.useId(), h = s.useRef(null), w = s.useRef(null), L = s.useRef(null), V = s.useMemo(() => ce(u), [u]), [U, N] = s.useState(""), [O = !1, A] = te({
     prop: c,
-    defaultProp: n,
-    onChange: o
-  }), X = i.useCallback(() => {
-    A((q) => !q);
+    defaultProp: i,
+    onChange: n
+  }), W = s.useCallback(() => {
+    A((J) => !J);
   }, [A]);
-  return i.useEffect(() => {
-    O || H("");
-  }, [O]), /* @__PURE__ */ p(
-    x.Provider,
+  return s.useEffect(() => {
+    O || N("");
+  }, [O]), /* @__PURE__ */ l(
+    y.Provider,
     {
       value: {
         contentId: m,
-        triggerId: b,
-        value: s,
+        triggerId: x,
+        value: p,
         // Need to cast this to avoid type errors
         // because the type of onValueChange is not
         // consistent with the value type
-        onValueChange: f,
+        onValueChange: g,
         placeholder: v,
         open: O,
         setOpen: A,
-        onOpenToggle: X,
-        closeOnSelect: a,
+        onOpenToggle: W,
+        closeOnSelect: o,
         clearable: e,
-        disabled: l,
-        searchQuery: Y,
-        setSearchQuery: H,
+        disabled: r,
+        searchQuery: U,
+        setSearchQuery: N,
         triggerRef: h,
         searchRef: w,
-        contentRef: V,
-        errored: y,
+        contentRef: L,
+        errored: b,
         layout: d,
-        options: D,
-        legacyBehavior: r
+        options: V,
+        legacyBehavior: a
       },
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ l(
         Q.Root,
         {
           open: O,
           onOpenChange: A,
           modal: t,
-          ...g,
+          ...f,
           children: u
         }
       )
     }
   );
-}, le = ({ value: t, ...a }) => {
-  const e = i.useContext(x), l = i.useMemo(() => {
-    const r = e.options.find((n) => n.value === t);
-    if (r) return r.label || r.value;
-    if (!e.value) return;
-    const o = e.value.find(
-      (n) => C(n, e.legacyBehavior) === t
-    );
-    if (o)
-      return o;
-  }, [e.options, e.value, t, e.legacyBehavior]);
-  return /* @__PURE__ */ S(
-    L.Root,
-    {
-      as: B.span,
-      initializeWithAnimation: !1,
-      initial: { opacity: 0, scale: 0.5 },
-      animate: { opacity: 1, scale: 1 },
-      exit: { opacity: 0, scale: 0.5 },
-      transition: { duration: 100, type: "spring" },
-      "tgph-motion-key": t,
-      size: "1",
-      layout: "position",
-      ...a,
-      children: [
-        /* @__PURE__ */ p(L.Text, { children: l }),
-        /* @__PURE__ */ p(
-          L.Button,
-          {
-            icon: { icon: R.X, alt: `Remove ${t}` },
-            onClick: (r) => {
-              if (!e.onValueChange) return;
-              const c = e.onValueChange, n = e.value.filter((s) => C(s, e.legacyBehavior) !== t);
-              c == null || c(n), r.stopPropagation(), r.preventDefault();
-            }
-          }
-        )
-      ]
-    }
-  );
-}, ue = () => {
-  var a;
-  const t = i.useContext(x);
-  if (t.value && k(t.value)) {
-    const e = t.layout || "truncate", l = t.value.length - 2, r = l.toString().split("");
-    return t.value.length === 0 ? /* @__PURE__ */ p(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
-      I,
-      {
-        gap: "1",
-        w: "full",
-        wrap: e === "wrap" ? "wrap" : "nowrap",
-        align: "center",
-        style: {
-          position: "relative",
-          flexGrow: 1
-        },
-        children: [
-          /* @__PURE__ */ p(
-            P,
-            {
-              presenceMap: t.value.map((c) => ({
-                "tgph-motion-key": C(c, t.legacyBehavior) || "",
-                value: !0
-              })),
-              children: t.value.map((c, o) => {
-                const n = C(c, t.legacyBehavior);
-                if (n && (e === "truncate" && o <= 1 || e === "wrap"))
-                  return /* @__PURE__ */ p(ee, { children: /* @__PURE__ */ p(le, { value: n }) }, n);
-              })
-            }
-          ),
-          /* @__PURE__ */ p(
-            P,
-            {
-              presenceMap: [
-                {
-                  "tgph-motion-key": "combobox-more",
-                  value: !0
-                }
-              ],
-              children: e === "truncate" && t.value.length > 2 && /* @__PURE__ */ p(
-                I,
-                {
-                  as: B.div,
-                  initial: { opacity: 0 },
-                  animate: { opacity: 1 },
-                  exit: { opacity: 0 },
-                  transition: { duration: 100, type: "spring" },
-                  h: "full",
-                  pr: "1",
-                  pl: "8",
-                  align: "center",
-                  "aria-label": `${l} more selected`,
-                  position: "absolute",
-                  right: "0",
-                  style: {
-                    backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
-                  },
-                  children: /* @__PURE__ */ S(M, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
-                    "+",
-                    /* @__PURE__ */ S(
-                      P,
-                      {
-                        presenceMap: r.map((c) => ({
-                          "tgph-motion-key": c,
-                          value: !0
-                        })),
-                        children: [
-                          r.map((c) => /* @__PURE__ */ p(
-                            _,
-                            {
-                              as: B.span,
-                              initial: { opacity: 0 },
-                              animate: { opacity: 1 },
-                              exit: { opacity: 0 },
-                              transition: { duration: 100, type: "spring" },
-                              w: "2",
-                              display: "inline-block",
-                              "tgph-motion-key": c,
-                              children: c
-                            },
-                            c
-                          )),
-                          " "
-                        ]
-                      }
-                    ),
-                    "more"
-                  ] })
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
+}, Ce = () => {
+  const t = s.useContext(y);
+  if (t.value && S(t.value)) {
+    const o = t.layout || "truncate";
+    return t.value.length === 0 ? /* @__PURE__ */ l(T.TriggerPlaceholder, {}) : /* @__PURE__ */ l(T.TriggerTagsContainer, { children: t.value.map((e, r) => {
+      const a = C(e, t.legacyBehavior);
+      if (a && (o === "truncate" && r <= 1 || o === "wrap"))
+        return /* @__PURE__ */ l(re, { children: /* @__PURE__ */ l(T.TriggerTag.Default, { value: a }) }, a);
+    }) });
   }
-  if (t && T(t.value)) {
-    const e = F(
-      t.value,
-      t.options,
-      t.legacyBehavior
-    ), l = (e == null ? void 0 : e.label) || (e == null ? void 0 : e.value) || t.placeholder, r = t.legacyBehavior && ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label);
-    return /* @__PURE__ */ p(
-      E.Text,
-      {
-        color: t.value ? "default" : "gray",
-        textOverflow: "ellipsis",
-        overflow: "hidden",
-        children: r || l
-      }
-    );
-  }
-}, pe = ({ size: t = "2", ...a }) => {
-  const e = i.useContext(x), l = i.useCallback(() => {
-    var o;
-    if (!e.value) return e.placeholder;
-    if (T(e.value)) {
-      const n = F(
-        e.value,
-        e.options,
-        e.legacyBehavior
-      );
-      return (n == null ? void 0 : n.label) || e.placeholder;
-    }
-    if (k(e.value))
-      return ((o = e.value) == null ? void 0 : o.map((n) => {
-        const s = F(
-          n,
-          e.options,
-          e.legacyBehavior
+  if (t && k(t.value))
+    return t.value ? /* @__PURE__ */ l(T.TriggerText, {}) : /* @__PURE__ */ l(T.TriggerPlaceholder, {});
+}, Te = ({
+  size: t = "2",
+  children: o,
+  ...e
+}) => {
+  const r = s.useContext(y), a = s.useMemo(() => {
+    if (r.value) {
+      if (k(r.value))
+        return F(
+          r.value,
+          r.options,
+          r.legacyBehavior
+        );
+      if (S(r.value))
+        return r.value.map(
+          (n) => F(n, r.options, r.legacyBehavior)
         );
-        return s == null ? void 0 : s.label;
-      }).join(", ")) || e.placeholder;
-  }, [
-    e.value,
-    e.placeholder,
-    e.options,
-    e.legacyBehavior
-  ]), r = i.useMemo(() => {
-    var o;
-    if (T(e.value))
-      return e.clearable && e.value;
-    if (k(e.value))
-      return e.clearable && ((o = e.value) == null ? void 0 : o.length) > 0;
-  }, [e.clearable, e.value]), c = () => {
-    var o, n;
-    if (k(e.value)) {
-      const s = e.onValueChange;
-      s == null || s([]);
-    }
-    if (T(e.value)) {
-      const s = e.onValueChange;
-      s == null || s(void 0);
     }
-    (n = (o = e.triggerRef) == null ? void 0 : o.current) == null || n.focus();
-  };
-  return /* @__PURE__ */ p(
+  }, [r.value, r.options, r.legacyBehavior]), c = s.useCallback(() => a ? k(a) ? (a == null ? void 0 : a.label) || (a == null ? void 0 : a.value) || r.placeholder : S(a) && a.map((n) => (n == null ? void 0 : n.label) || (n == null ? void 0 : n.value)).join(", ") || r.placeholder : r.placeholder, [a, r.placeholder]);
+  return /* @__PURE__ */ l(
     Q.Trigger,
     {
-      ...a,
+      ...e,
       asChild: !0,
-      onClick: (o) => {
-        var n, s;
-        o.preventDefault(), e.onOpenToggle(), (s = (n = e.triggerRef) == null ? void 0 : n.current) == null || s.focus();
+      onClick: (n) => {
+        var i, p;
+        n.preventDefault(), r.onOpenToggle(), (p = (i = r.triggerRef) == null ? void 0 : i.current) == null || p.focus();
       },
-      onKeyDown: (o) => {
-        if (o.key === "Tab") {
-          o.stopPropagation();
+      onKeyDown: (n) => {
+        if (n.key === "Tab") {
+          n.stopPropagation();
           return;
         }
-        if (z.includes(o.key)) {
-          o.preventDefault();
+        if (X.includes(n.key)) {
+          n.preventDefault();
           return;
         }
-        if (o.key === "ArrowDown") {
-          o.stopPropagation(), o.preventDefault(), e.onOpenToggle();
+        if (n.key === "ArrowDown") {
+          n.stopPropagation(), n.preventDefault(), r.onOpenToggle();
           return;
         }
       },
-      tgphRef: e.triggerRef,
-      children: /* @__PURE__ */ S(
-        E.Root,
+      tgphRef: r.triggerRef,
+      children: /* @__PURE__ */ R(
+        B.Root,
         {
-          id: e.triggerId,
+          id: r.triggerId,
           type: "button",
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: ne[t],
+          minH: ie[t],
           h: "full",
           w: "full",
           py: "1",
           size: t,
-          color: e.errored ? "red" : "gray",
+          color: r.errored ? "red" : "gray",
           justify: "space-between",
           role: "combobox",
-          "aria-label": l(),
-          "aria-controls": e.contentId,
-          "aria-expanded": e.open,
+          "aria-label": c(),
+          "aria-controls": r.contentId,
+          "aria-expanded": r.open,
           "aria-haspopup": "listbox",
           "data-tgph-combobox-trigger": !0,
-          "data-tgph-combobox-trigger-open": e.open,
-          disabled: e.disabled,
+          "data-tgph-combobox-trigger-open": r.open,
+          disabled: r.disabled,
+          ...e,
           children: [
-            /* @__PURE__ */ p(ue, {}),
-            /* @__PURE__ */ S(I, { align: "center", gap: "1", children: [
-              r && /* @__PURE__ */ p(oe, { label: "Clear field", children: /* @__PURE__ */ p(
-                E,
-                {
-                  type: "button",
-                  icon: { icon: R.X, alt: "Clear field" },
-                  size: "1",
-                  variant: "ghost",
-                  onClick: (o) => {
-                    e.value && (o.stopPropagation(), c());
-                  },
-                  onKeyDown: (o) => {
-                    (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), c());
-                  },
-                  "data-tgph-combobox-clear": !0,
-                  style: {
-                    // Remove margin to make the clear button flush
-                    // with the trigger button
-                    marginTop: "calc(-1 * var(--tgph-spacing-1)",
-                    marginBottom: "calc(-1 * var(--tgph-spacing-1)"
-                  }
-                }
-              ) }),
-              /* @__PURE__ */ p(
-                E.Icon,
-                {
-                  as: B.span,
-                  animate: { rotate: e.open ? 180 : 0 },
-                  transition: { duration: 150, type: "spring" },
-                  icon: R.ChevronDown,
-                  "aria-hidden": !0
-                }
-              )
+            o ? typeof o == "function" ? o({ value: a }) : o : /* @__PURE__ */ l(Ce, {}),
+            /* @__PURE__ */ R(I, { align: "center", gap: "1", children: [
+              /* @__PURE__ */ l(T.TriggerClear, {}),
+              /* @__PURE__ */ l(T.TriggerIndicator, {})
             ] })
           ]
         }
       )
     }
   );
-}, fe = ({
+}, Re = ({
   style: t,
-  children: a,
+  children: o,
   tgphRef: e,
-  ...l
+  ...r
 }) => {
-  const r = i.useContext(x), c = i.useRef(!1), o = j(e, r.contentRef), n = i.useRef(null), [s, f] = i.useState(0), [y, v] = i.useState(!1), d = i.useCallback(
+  const a = s.useContext(y), c = s.useRef(!1), n = $(e, a.contentRef), i = s.useRef(null), [p, g] = s.useState(0), [b, v] = s.useState(!1), d = s.useCallback(
     (u) => {
-      const g = u == null ? void 0 : u.getBoundingClientRect();
-      g && f(g.height), y || v(!0);
+      const f = u == null ? void 0 : u.getBoundingClientRect();
+      f && g(f.height), b || v(!0);
     },
-    [y]
+    [b]
   );
-  return i.useEffect(() => {
-    const u = new ResizeObserver((g) => {
-      for (const m of g) {
-        const b = m.target;
-        d(b);
+  return s.useEffect(() => {
+    const u = new ResizeObserver((f) => {
+      for (const m of f) {
+        const x = m.target;
+        d(x);
       }
     });
-    return n.current && y && u.observe(n.current), () => u.disconnect();
-  }, [y, d]), i.useEffect(() => {
-    y === !0 && r.open === !1 && v(!1);
-  }, [r.open, y]), i.useEffect(() => {
+    return i.current && b && u.observe(i.current), () => u.disconnect();
+  }, [b, d]), s.useEffect(() => {
+    b === !0 && a.open === !1 && v(!1);
+  }, [a.open, b]), s.useEffect(() => {
     let u;
-    return r.open && (u = setTimeout(() => {
-      d(n.current);
+    return a.open && (u = setTimeout(() => {
+      d(i.current);
     }, 10)), () => u && clearTimeout(u);
-  }, [r.open, d]), /* @__PURE__ */ p(W.Root, { asChild: !0, children: /* @__PURE__ */ p(
-    U,
+  }, [a.open, d]), /* @__PURE__ */ l(ee.Root, { asChild: !0, children: /* @__PURE__ */ l(
+    Z,
     {
       onEscapeKeyDown: (u) => {
-        r.open && (u.stopPropagation(), u.preventDefault(), r.setOpen(!1));
+        a.open && (u.stopPropagation(), u.preventDefault(), a.setOpen(!1));
       },
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ l(
         Q.Content,
         {
           className: "tgph",
           mt: "1",
           onCloseAutoFocus: (u) => {
-            var g, m;
-            c.current || (m = (g = r.triggerRef) == null ? void 0 : g.current) == null || m.focus(), c.current = !1, u.preventDefault();
+            var f, m;
+            c.current || (m = (f = a.triggerRef) == null ? void 0 : f.current) == null || m.focus(), c.current = !1, u.preventDefault();
           },
           bg: "surface-1",
           style: {
             width: "var(--tgph-combobox-trigger-width)",
             transition: "min-height 200ms ease-in-out",
-            minHeight: s ? `${s}px` : "0",
+            minHeight: p ? `${p}px` : "0",
             ...t,
             "--tgph-combobox-content-transform-origin": "var(--radix-popper-transform-origin)",
             "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
@@ -477,31 +550,31 @@ const ne = {
             "--tgph-combobox-trigger-width": "var(--radix-popper-anchor-width)",
             "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
           },
-          ...l,
-          tgphRef: o,
+          ...r,
+          tgphRef: n,
           "data-tgph-combobox-content": !0,
-          "data-tgph-combobox-content-open": r.open,
+          "data-tgph-combobox-content-open": a.open,
           role: void 0,
           "aria-orientation": void 0,
           onKeyDown: (u) => {
-            var m, b, h, w;
+            var m, x, h, w;
             u.stopPropagation();
-            const g = (b = (m = r.contentRef) == null ? void 0 : m.current) == null ? void 0 : b.querySelectorAll(
+            const f = (x = (m = a.contentRef) == null ? void 0 : m.current) == null ? void 0 : x.querySelectorAll(
               "[data-tgph-combobox-option]"
             );
-            document.activeElement === (g == null ? void 0 : g[0]) && ce.includes(u.key) && ((w = (h = r.searchRef) == null ? void 0 : h.current) == null || w.focus());
+            document.activeElement === (f == null ? void 0 : f[0]) && xe.includes(u.key) && ((w = (h = a.searchRef) == null ? void 0 : h.current) == null || w.focus());
           },
-          children: /* @__PURE__ */ p(I, { direction: "column", gap: "1", tgphRef: n, children: a })
+          children: /* @__PURE__ */ l(I, { direction: "column", gap: "1", tgphRef: i, children: o })
         }
       )
     }
   ) });
-}, ge = ({ ...t }) => {
-  const a = i.useContext(x);
-  return /* @__PURE__ */ p(
+}, Se = ({ ...t }) => {
+  const o = s.useContext(y);
+  return /* @__PURE__ */ l(
     I,
     {
-      id: a.contentId,
+      id: o.contentId,
       direction: "column",
       gap: "1",
       style: {
@@ -513,131 +586,131 @@ const ne = {
       ...t
     }
   );
-}, G = ({
+}, q = ({
   value: t,
-  label: a,
+  label: o,
   selected: e,
-  onSelect: l,
-  children: r,
+  onSelect: r,
+  children: a,
   ...c
 }) => {
-  const o = i.useContext(x), [n, s] = i.useState(!1), f = o.value, y = !o.searchQuery || ae({
-    children: a || r,
+  const n = s.useContext(y), [i, p] = s.useState(!1), g = n.value, b = !n.searchQuery || se({
+    children: o || a,
     value: t,
-    searchQuery: o.searchQuery
-  }), v = k(f) ? f.some(
-    (u) => C(u, o.legacyBehavior) === t
-  ) : C(f, o.legacyBehavior) === t, d = (u) => {
-    var m, b;
+    searchQuery: n.searchQuery
+  }), v = S(g) ? g.some(
+    (u) => C(u, n.legacyBehavior) === t
+  ) : C(g, n.legacyBehavior) === t, d = (u) => {
+    var m, x;
     u.stopPropagation();
-    const g = u;
-    if (!(g.key && !z.includes(g.key))) {
-      if (u.preventDefault(), o.closeOnSelect === !0 && o.setOpen(!1), l)
-        return l(u);
-      if (T(f)) {
-        const h = o.onValueChange;
-        o.legacyBehavior === !0 ? h == null || h({ value: t, label: a }) : h == null || h(t);
-      } else if (k(f)) {
-        const h = o.onValueChange, w = o.value, V = v ? w.filter(
-          (D) => C(D, o.legacyBehavior) !== t
+    const f = u;
+    if (!(f.key && !X.includes(f.key))) {
+      if (u.preventDefault(), n.closeOnSelect === !0 && n.setOpen(!1), r)
+        return r(u);
+      if (k(g)) {
+        const h = n.onValueChange;
+        n.legacyBehavior === !0 ? h == null || h({ value: t, label: o }) : h == null || h(t);
+      } else if (S(g)) {
+        const h = n.onValueChange, w = n.value, L = v ? w.filter(
+          (V) => C(V, n.legacyBehavior) !== t
         ) : [
           ...w,
           // TODO: Remove this once { value, label } option is deprecated
-          o.legacyBehavior === !0 ? { value: t, label: a } : t
+          n.legacyBehavior === !0 ? { value: t, label: o } : t
         ];
-        h == null || h(V);
+        h == null || h(L);
       }
-      (b = (m = o.triggerRef) == null ? void 0 : m.current) == null || b.focus();
+      (x = (m = n.triggerRef) == null ? void 0 : m.current) == null || x.focus();
     }
   };
-  if (y)
-    return /* @__PURE__ */ p(
+  if (b)
+    return /* @__PURE__ */ l(
       Q.Button,
       {
         type: "button",
         onSelect: d,
         onKeyDown: d,
         selected: e === null ? null : e ?? v,
-        onFocus: () => s(!0),
-        onBlur: () => s(!1),
+        onFocus: () => p(!0),
+        onBlur: () => p(!1),
         role: "option",
         "aria-selected": v ? "true" : "false",
         "data-tgph-combobox-option": !0,
-        "data-tgph-combobox-option-focused": n,
+        "data-tgph-combobox-option-focused": i,
         "data-tgph-combobox-option-value": t,
-        "data-tgph-combobox-option-label": a,
+        "data-tgph-combobox-option-label": o,
         ...c,
-        children: a || r || t
+        children: o || a || t
       }
     );
-}, he = ({
+}, we = ({
   label: t = "Search",
-  placeholder: a = "Search",
+  placeholder: o = "Search",
   tgphRef: e,
-  value: l,
-  onValueChange: r,
+  value: r,
+  onValueChange: a,
   ...c
 }) => {
   var v;
-  const o = i.useId(), n = i.useContext(x), s = j(e, n.searchRef), f = l ?? n.searchQuery, y = r ?? n.setSearchQuery;
-  return i.useEffect(() => {
-    var g;
+  const n = s.useId(), i = s.useContext(y), p = $(e, i.searchRef), g = r ?? i.searchQuery, b = a ?? i.setSearchQuery;
+  return s.useEffect(() => {
+    var f;
     const d = (m) => {
-      var b, h;
-      ie.includes(m.key) && ((h = (b = n.contentRef) == null ? void 0 : b.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && n.setOpen(!1), m.stopPropagation();
-    }, u = (g = n.searchRef) == null ? void 0 : g.current;
+      var x, h;
+      be.includes(m.key) && ((h = (x = i.contentRef) == null ? void 0 : x.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && i.setOpen(!1), m.stopPropagation();
+    }, u = (f = i.searchRef) == null ? void 0 : f.current;
     if (u)
       return u.addEventListener("keydown", d), () => {
         u.removeEventListener("keydown", d);
       };
-  }, [n]), /* @__PURE__ */ S(_, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ p(Z.Root, { children: /* @__PURE__ */ p(M, { as: "label", htmlFor: o, children: t }) }),
-    /* @__PURE__ */ p(
-      te,
+  }, [i]), /* @__PURE__ */ R(G, { borderBottom: "px", px: "1", pb: "1", children: [
+    /* @__PURE__ */ l(oe.Root, { children: /* @__PURE__ */ l(H, { as: "label", htmlFor: n, children: t }) }),
+    /* @__PURE__ */ l(
+      ne,
       {
-        id: o,
+        id: n,
         variant: "ghost",
-        placeholder: a,
-        value: f,
+        placeholder: o,
+        value: g,
         onChange: (d) => {
-          y(d.target.value);
+          b(d.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ p(N, { icon: R.Search, alt: "Search Icon" }),
-        TrailingComponent: n != null && n.searchQuery && ((v = n == null ? void 0 : n.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ p(
-          E,
+        LeadingComponent: /* @__PURE__ */ l(z, { icon: E.Search, alt: "Search Icon" }),
+        TrailingComponent: i != null && i.searchQuery && ((v = i == null ? void 0 : i.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ l(
+          B,
           {
             variant: "ghost",
             color: "gray",
-            icon: { icon: R.X, alt: "Clear Search Query" },
+            icon: { icon: E.X, alt: "Clear Search Query" },
             onClick: () => {
               var d;
-              return (d = n.setSearchQuery) == null ? void 0 : d.call(n, "");
+              return (d = i.setSearchQuery) == null ? void 0 : d.call(i, "");
             }
           }
         ) : null,
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
-        "aria-controls": n.contentId,
+        "aria-controls": i.contentId,
         ...c,
-        tgphRef: s
+        tgphRef: p
       }
     )
   ] });
-}, de = ({
-  icon: t = { icon: R.Search, alt: "Search Icon" },
-  message: a = "No results found",
+}, Ee = ({
+  icon: t = { icon: E.Search, alt: "Search Icon" },
+  message: o = "No results found",
   children: e,
-  ...l
+  ...r
 }) => {
-  const r = i.useContext(x), [c, o] = i.useState(!1);
-  if (i.useEffect(() => {
-    var s, f;
-    const n = (f = (s = r.contentRef) == null ? void 0 : s.current) == null ? void 0 : f.querySelectorAll(
+  const a = s.useContext(y), [c, n] = s.useState(!1);
+  if (s.useEffect(() => {
+    var p, g;
+    const i = (g = (p = a.contentRef) == null ? void 0 : p.current) == null ? void 0 : g.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
-    (n == null ? void 0 : n.length) === 0 ? o(!0) : o(!1);
-  }, [r.searchQuery, r.contentRef, e]), c)
-    return /* @__PURE__ */ S(
+    (i == null ? void 0 : i.length) === 0 ? n(!0) : n(!1);
+  }, [a.searchQuery, a.contentRef, e]), c)
+    return /* @__PURE__ */ R(
       I,
       {
         gap: "1",
@@ -646,58 +719,59 @@ const ne = {
         w: "full",
         my: "8",
         "data-tgph-combobox-empty": !0,
-        ...l,
+        ...r,
         children: [
-          t === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(N, { ...t }),
-          a === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(M, { as: "span", children: a })
+          t === null ? /* @__PURE__ */ l(_, {}) : /* @__PURE__ */ l(z, { ...t }),
+          o === null ? /* @__PURE__ */ l(_, {}) : /* @__PURE__ */ l(H, { as: "span", children: o })
         ]
       }
     );
-}, me = ({
+}, ke = ({
   leadingText: t = "Create",
-  values: a,
+  values: o,
   onCreate: e,
-  selected: l = null,
-  legacyBehavior: r = !1,
+  selected: r = null,
+  legacyBehavior: a = !1,
   ...c
 }) => {
-  const o = i.useContext(x), n = i.useCallback(
-    (s) => !a || (a == null ? void 0 : a.length) === 0 ? !1 : a.some(
-      (f) => C(f, r) === s
+  const n = s.useContext(y), i = s.useCallback(
+    (p) => !o || (o == null ? void 0 : o.length) === 0 ? !1 : o.some(
+      (g) => C(g, a) === p
     ),
-    [a, r]
+    [o, a]
   );
-  if (o.searchQuery && !n(o.searchQuery))
-    return /* @__PURE__ */ p(
-      G,
+  if (n.searchQuery && !i(n.searchQuery))
+    return /* @__PURE__ */ l(
+      q,
       {
-        leadingIcon: { icon: R.Plus, "aria-hidden": !0 },
+        leadingIcon: { icon: E.Plus, "aria-hidden": !0 },
         mx: "1",
-        value: o.searchQuery,
-        label: `${t} "${o.searchQuery}"`,
-        selected: l,
+        value: n.searchQuery,
+        label: `${t} "${n.searchQuery}"`,
+        selected: r,
         onSelect: () => {
-          var s;
-          if (e && o.value && o.searchQuery) {
-            const f = r === !0 ? { value: o.searchQuery } : o.searchQuery;
-            e(f), (s = o.setSearchQuery) == null || s.call(o, "");
+          var p;
+          if (e && n.value && n.searchQuery) {
+            const g = a === !0 ? { value: n.searchQuery } : n.searchQuery;
+            e(g), (p = n.setSearchQuery) == null || p.call(n, "");
           }
         },
         ...c
       }
     );
-}, ye = {};
-Object.assign(ye, {
-  Root: se,
-  Trigger: pe,
-  Content: fe,
-  Options: ge,
-  Option: G,
-  Search: he,
-  Empty: de,
-  Create: me
+}, Ie = {};
+Object.assign(Ie, {
+  Root: ve,
+  Trigger: Te,
+  Content: Re,
+  Options: Se,
+  Option: q,
+  Search: we,
+  Empty: Ee,
+  Create: ke,
+  Primitives: T
 });
 export {
-  ye as Combobox
+  Ie as Combobox
 };
 //# sourceMappingURL=index.mjs.map