@telegraph/combobox 0.0.77 → 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 I } from "@telegraph/button";
-import { useComposedRefs as j } from "@telegraph/compose-refs";
-import { RefToTgphRef as ee } from "@telegraph/helpers";
-import { Lucide as E, Icon as N } from "@telegraph/icon";
-import { Input as te } from "@telegraph/input";
-import { Stack as T, 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 V } 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 { Text as H } from "@telegraph/typography";
 import s from "react";
-const ne = {
+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"
-}, R = (e) => Array.isArray(e), k = (e) => typeof e == "object" && !Array.isArray(e) || typeof e == "string" || !e, re = (e) => {
-  const c = (o, l = []) => (s.Children.toArray(o).forEach((n) => {
-    s.isValidElement(n) && (n.props.value ? l.push(n) : n.props.children && c(n.props.children, l));
-  }), l);
-  return c(e).map((o) => {
-    var i;
-    const l = o;
+}, 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 o(t).map((a) => {
+    var n;
+    const c = a;
     return {
-      value: l.props.value,
-      label: ((i = l.props) == null ? void 0 : i.label) || l.props.children || l.props.value
+      value: c.props.value,
+      label: ((n = c.props) == null ? void 0 : n.label) || c.props.children || c.props.value
     };
   });
-}, C = (e, c) => {
-  if (e)
-    return c === !0 ? e == null ? void 0 : e.value : e;
-}, F = (e, c, r) => {
-  if (!e || !c || c.length === 0) return;
-  const t = c.find(
-    (o) => o.value === C(e, r)
-  );
+}, C = (t, o) => {
   if (t)
-    return t;
-}, ae = ({
-  children: e,
-  value: c,
-  searchQuery: r
+    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 (r)
+    return r;
+}, se = ({
+  children: t,
+  value: o,
+  searchQuery: e
+}) => {
+  const r = Y(t);
+  return (o == null ? void 0 : o.toLowerCase().includes(e.toLowerCase())) || r.some(
+    (a) => a.toLowerCase().includes(e.toLowerCase())
+  );
+}, 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;
+}, 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 t = $(e);
-  return (c == null ? void 0 : c.toLowerCase().includes(r.toLowerCase())) || t.some(
-    (o) => o.toLowerCase().includes(r.toLowerCase())
+  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"
+                ] })
+              }
+            )
+          }
+        )
+      ]
+    }
   );
-}, $ = (e) => {
-  const c = s.Children.toArray(e), r = [];
-  return c.forEach((t) => {
-    typeof t == "string" && r.push(t), s.isValidElement(t) && t.props.children && r.push(...$(t.props.children));
-  }), r;
-}, ie = ["ArrowDown", "PageUp", "Home"], ce = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = s.createContext({
+}, 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,567 +339,379 @@ const ne = {
   disabled: !1,
   options: [],
   legacyBehavior: !1
-}), se = ({
-  modal: e = !0,
-  closeOnSelect: c = !0,
-  clearable: r = !1,
-  disabled: t = !1,
-  legacyBehavior: o = !1,
-  open: l,
-  onOpenChange: i,
-  defaultOpen: n,
-  value: a,
-  onValueChange: f,
-  errored: g,
+}), ve = ({
+  modal: t = !0,
+  closeOnSelect: o = !0,
+  clearable: e = !1,
+  disabled: r = !1,
+  legacyBehavior: a = !1,
+  open: c,
+  onOpenChange: n,
+  defaultOpen: i,
+  value: p,
+  onValueChange: g,
+  errored: b,
   placeholder: v,
-  layout: m,
+  layout: d,
   children: u,
-  ...h
+  ...f
 }) => {
-  const y = s.useId(), b = s.useId(), d = s.useRef(null), w = s.useRef(null), D = s.useRef(null), P = s.useMemo(() => re(u), [u]), [Y, H] = s.useState(""), [O = !1, A] = J({
-    prop: l,
-    defaultProp: n,
-    onChange: i
-  }), X = s.useCallback(() => {
-    A((q) => !q);
+  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: i,
+    onChange: n
+  }), W = s.useCallback(() => {
+    A((J) => !J);
   }, [A]);
   return s.useEffect(() => {
-    O || H("");
-  }, [O]), /* @__PURE__ */ p(
-    x.Provider,
+    O || N("");
+  }, [O]), /* @__PURE__ */ l(
+    y.Provider,
     {
       value: {
-        contentId: y,
-        triggerId: b,
-        value: a,
+        contentId: m,
+        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: c,
-        clearable: r,
-        disabled: t,
-        searchQuery: Y,
-        setSearchQuery: H,
-        triggerRef: d,
+        onOpenToggle: W,
+        closeOnSelect: o,
+        clearable: e,
+        disabled: r,
+        searchQuery: U,
+        setSearchQuery: N,
+        triggerRef: h,
         searchRef: w,
-        contentRef: D,
-        errored: g,
-        layout: m,
-        options: P,
-        legacyBehavior: o
+        contentRef: L,
+        errored: b,
+        layout: d,
+        options: V,
+        legacyBehavior: a
       },
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ l(
         Q.Root,
         {
           open: O,
           onOpenChange: A,
-          modal: e,
-          ...h,
+          modal: t,
+          ...f,
           children: u
         }
       )
     }
   );
-}, le = ({ value: e, ...c }) => {
-  const r = s.useContext(x), t = s.useMemo(() => {
-    const o = r.options.find((n) => n.value === e);
-    if (o) return o.label || o.value;
-    if (!r.value) return;
-    const i = r.value.find(
-      (n) => C(n, r.legacyBehavior) === e
-    );
-    if (i)
-      return i;
-  }, [r.options, r.value, e, r.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": e,
-      size: "1",
-      layout: "position",
-      ...c,
-      children: [
-        /* @__PURE__ */ p(L.Text, { children: t }),
-        /* @__PURE__ */ p(
-          L.Button,
-          {
-            icon: { icon: E.X, alt: `Remove ${e}` },
-            onClick: (o) => {
-              if (!r.onValueChange) return;
-              const l = r.onValueChange, n = r.value.filter((a) => C(a, r.legacyBehavior) !== e);
-              l == null || l(n), o.stopPropagation(), o.preventDefault();
-            }
-          }
-        )
-      ]
-    }
-  );
-}, ue = () => {
-  var c;
-  const e = s.useContext(x);
-  if (e.value && R(e.value)) {
-    const r = e.layout || "truncate", t = e.value.length - 2, o = t.toString().split("");
-    return e.value.length === 0 ? /* @__PURE__ */ p(I.Text, { color: "gray", children: e.placeholder }) : /* @__PURE__ */ S(
-      T,
-      {
-        gap: "1",
-        w: "full",
-        wrap: r === "wrap" ? "wrap" : "nowrap",
-        align: "center",
-        style: {
-          position: "relative",
-          flexGrow: 1
-        },
-        children: [
-          /* @__PURE__ */ p(
-            V,
-            {
-              presenceMap: e.value.map((l) => ({
-                "tgph-motion-key": C(l, e.legacyBehavior) || "",
-                value: !0
-              })),
-              children: e.value.map((l, i) => {
-                const n = C(l, e.legacyBehavior);
-                if (n && (r === "truncate" && i <= 1 || r === "wrap"))
-                  return /* @__PURE__ */ p(ee, { children: /* @__PURE__ */ p(le, { value: n }) }, n);
-              })
-            }
-          ),
-          /* @__PURE__ */ p(
-            V,
-            {
-              presenceMap: [
-                {
-                  "tgph-motion-key": "combobox-more",
-                  value: !0
-                }
-              ],
-              children: r === "truncate" && e.value.length > 2 && /* @__PURE__ */ p(
-                T,
-                {
-                  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": `${t} 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(
-                      V,
-                      {
-                        presenceMap: o.map((l) => ({
-                          "tgph-motion-key": l,
-                          value: !0
-                        })),
-                        children: [
-                          o.map((l) => /* @__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": l,
-                              children: l
-                            },
-                            l
-                          )),
-                          " "
-                        ]
-                      }
-                    ),
-                    "more"
-                  ] })
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-  if (e && k(e.value)) {
-    const r = F(
-      e.value,
-      e.options,
-      e.legacyBehavior
-    ), t = (r == null ? void 0 : r.label) || (r == null ? void 0 : r.value) || e.placeholder, o = e.legacyBehavior && ((c = e == null ? void 0 : e.value) == null ? void 0 : c.label);
-    return /* @__PURE__ */ p(
-      I.Text,
-      {
-        color: e.value ? "default" : "gray",
-        textOverflow: "ellipsis",
-        overflow: "hidden",
-        children: o || t
-      }
-    );
+}, 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);
+    }) });
   }
-}, pe = ({
-  size: e = "2",
-  children: c,
-  ...r
+  if (t && k(t.value))
+    return t.value ? /* @__PURE__ */ l(T.TriggerText, {}) : /* @__PURE__ */ l(T.TriggerPlaceholder, {});
+}, Te = ({
+  size: t = "2",
+  children: o,
+  ...e
 }) => {
-  const t = s.useContext(x), o = s.useMemo(() => {
-    if (t.value) {
-      if (k(t.value))
+  const r = s.useContext(y), a = s.useMemo(() => {
+    if (r.value) {
+      if (k(r.value))
         return F(
-          t.value,
-          t.options,
-          t.legacyBehavior
+          r.value,
+          r.options,
+          r.legacyBehavior
         );
-      if (R(t.value))
-        return t.value.map(
-          (a) => F(a, t.options, t.legacyBehavior)
+      if (S(r.value))
+        return r.value.map(
+          (n) => F(n, r.options, r.legacyBehavior)
         );
     }
-  }, [t.value, t.options, t.legacyBehavior]), l = s.useCallback(() => o ? k(o) ? (o == null ? void 0 : o.label) || (o == null ? void 0 : o.value) || t.placeholder : R(o) && o.map((a) => (a == null ? void 0 : a.label) || (a == null ? void 0 : a.value)).join(", ") || t.placeholder : t.placeholder, [o, t.placeholder]), i = s.useMemo(() => {
-    var a;
-    if (k(t.value))
-      return t.clearable && t.value;
-    if (R(t.value))
-      return t.clearable && ((a = t.value) == null ? void 0 : a.length) > 0;
-  }, [t.clearable, t.value]), n = () => {
-    var a, f;
-    if (R(t.value)) {
-      const g = t.onValueChange;
-      g == null || g([]);
-    }
-    if (k(t.value)) {
-      const g = t.onValueChange;
-      g == null || g(void 0);
-    }
-    (f = (a = t.triggerRef) == null ? void 0 : a.current) == null || f.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,
     {
-      ...r,
+      ...e,
       asChild: !0,
-      onClick: (a) => {
-        var f, g;
-        a.preventDefault(), t.onOpenToggle(), (g = (f = t.triggerRef) == null ? void 0 : f.current) == null || g.focus();
+      onClick: (n) => {
+        var i, p;
+        n.preventDefault(), r.onOpenToggle(), (p = (i = r.triggerRef) == null ? void 0 : i.current) == null || p.focus();
       },
-      onKeyDown: (a) => {
-        if (a.key === "Tab") {
-          a.stopPropagation();
+      onKeyDown: (n) => {
+        if (n.key === "Tab") {
+          n.stopPropagation();
           return;
         }
-        if (z.includes(a.key)) {
-          a.preventDefault();
+        if (X.includes(n.key)) {
+          n.preventDefault();
           return;
         }
-        if (a.key === "ArrowDown") {
-          a.stopPropagation(), a.preventDefault(), t.onOpenToggle();
+        if (n.key === "ArrowDown") {
+          n.stopPropagation(), n.preventDefault(), r.onOpenToggle();
           return;
         }
       },
-      tgphRef: t.triggerRef,
-      children: /* @__PURE__ */ S(
-        I.Root,
+      tgphRef: r.triggerRef,
+      children: /* @__PURE__ */ R(
+        B.Root,
         {
-          id: t.triggerId,
+          id: r.triggerId,
           type: "button",
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: ne[e],
+          minH: ie[t],
           h: "full",
           w: "full",
           py: "1",
-          size: e,
-          color: t.errored ? "red" : "gray",
+          size: t,
+          color: r.errored ? "red" : "gray",
           justify: "space-between",
           role: "combobox",
-          "aria-label": l(),
-          "aria-controls": t.contentId,
-          "aria-expanded": t.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": t.open,
-          disabled: t.disabled,
-          ...r,
+          "data-tgph-combobox-trigger-open": r.open,
+          disabled: r.disabled,
+          ...e,
           children: [
-            c ? typeof c == "function" ? c({ value: o }) : c : /* @__PURE__ */ p(ue, {}),
-            /* @__PURE__ */ S(T, { align: "center", gap: "1", children: [
-              i && /* @__PURE__ */ p(oe, { label: "Clear field", children: /* @__PURE__ */ p(
-                I,
-                {
-                  type: "button",
-                  icon: { icon: E.X, alt: "Clear field" },
-                  size: "1",
-                  variant: "ghost",
-                  onClick: (a) => {
-                    t.value && (a.stopPropagation(), n());
-                  },
-                  onKeyDown: (a) => {
-                    (a.key === "Enter" || a.key === " ") && (a.stopPropagation(), n());
-                  },
-                  "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(
-                I.Icon,
-                {
-                  as: B.span,
-                  animate: { rotate: t.open ? 180 : 0 },
-                  transition: { duration: 150, type: "spring" },
-                  icon: E.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 = ({
-  style: e,
-  children: c,
-  tgphRef: r,
-  ...t
+}, Re = ({
+  style: t,
+  children: o,
+  tgphRef: e,
+  ...r
 }) => {
-  const o = s.useContext(x), l = s.useRef(!1), i = j(r, o.contentRef), n = s.useRef(null), [a, f] = s.useState(0), [g, v] = s.useState(!1), m = s.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 h = u == null ? void 0 : u.getBoundingClientRect();
-      h && f(h.height), g || v(!0);
+      const f = u == null ? void 0 : u.getBoundingClientRect();
+      f && g(f.height), b || v(!0);
     },
-    [g]
+    [b]
   );
   return s.useEffect(() => {
-    const u = new ResizeObserver((h) => {
-      for (const y of h) {
-        const b = y.target;
-        m(b);
+    const u = new ResizeObserver((f) => {
+      for (const m of f) {
+        const x = m.target;
+        d(x);
       }
     });
-    return n.current && g && u.observe(n.current), () => u.disconnect();
-  }, [g, m]), s.useEffect(() => {
-    g === !0 && o.open === !1 && v(!1);
-  }, [o.open, g]), s.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 o.open && (u = setTimeout(() => {
-      m(n.current);
+    return a.open && (u = setTimeout(() => {
+      d(i.current);
     }, 10)), () => u && clearTimeout(u);
-  }, [o.open, m]), /* @__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) => {
-        o.open && (u.stopPropagation(), u.preventDefault(), o.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 h, y;
-            l.current || (y = (h = o.triggerRef) == null ? void 0 : h.current) == null || y.focus(), l.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: a ? `${a}px` : "0",
-            ...e,
+            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)",
             "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
             "--tgph-combobox-trigger-width": "var(--radix-popper-anchor-width)",
             "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
           },
-          ...t,
-          tgphRef: i,
+          ...r,
+          tgphRef: n,
           "data-tgph-combobox-content": !0,
-          "data-tgph-combobox-content-open": o.open,
+          "data-tgph-combobox-content-open": a.open,
           role: void 0,
           "aria-orientation": void 0,
           onKeyDown: (u) => {
-            var y, b, d, w;
+            var m, x, h, w;
             u.stopPropagation();
-            const h = (b = (y = o.contentRef) == null ? void 0 : y.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 === (h == null ? void 0 : h[0]) && ce.includes(u.key) && ((w = (d = o.searchRef) == null ? void 0 : d.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(T, { direction: "column", gap: "1", tgphRef: n, children: c })
+          children: /* @__PURE__ */ l(I, { direction: "column", gap: "1", tgphRef: i, children: o })
         }
       )
     }
   ) });
-}, ge = ({ ...e }) => {
-  const c = s.useContext(x);
-  return /* @__PURE__ */ p(
-    T,
+}, Se = ({ ...t }) => {
+  const o = s.useContext(y);
+  return /* @__PURE__ */ l(
+    I,
     {
-      id: c.contentId,
+      id: o.contentId,
       direction: "column",
       gap: "1",
       style: {
         overflowY: "auto",
         // maxHeight defaults to available height - padding from edge of screen
-        "--max-height": e.maxHeight ? void 0 : "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
+        "--max-height": t.maxHeight ? void 0 : "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
       },
       role: "listbox",
-      ...e
+      ...t
     }
   );
-}, G = ({
-  value: e,
-  label: c,
-  selected: r,
-  onSelect: t,
-  children: o,
-  ...l
+}, q = ({
+  value: t,
+  label: o,
+  selected: e,
+  onSelect: r,
+  children: a,
+  ...c
 }) => {
-  const i = s.useContext(x), [n, a] = s.useState(!1), f = i.value, g = !i.searchQuery || ae({
-    children: c || o,
-    value: e,
-    searchQuery: i.searchQuery
-  }), v = R(f) ? f.some(
-    (u) => C(u, i.legacyBehavior) === e
-  ) : C(f, i.legacyBehavior) === e, m = (u) => {
-    var y, b;
+  const n = s.useContext(y), [i, p] = s.useState(!1), g = n.value, b = !n.searchQuery || se({
+    children: o || a,
+    value: t,
+    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 h = u;
-    if (!(h.key && !z.includes(h.key))) {
-      if (u.preventDefault(), i.closeOnSelect === !0 && i.setOpen(!1), t)
-        return t(u);
-      if (k(f)) {
-        const d = i.onValueChange;
-        i.legacyBehavior === !0 ? d == null || d({ value: e, label: c }) : d == null || d(e);
-      } else if (R(f)) {
-        const d = i.onValueChange, w = i.value, D = v ? w.filter(
-          (P) => C(P, i.legacyBehavior) !== e
+    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
-          i.legacyBehavior === !0 ? { value: e, label: c } : e
+          n.legacyBehavior === !0 ? { value: t, label: o } : t
         ];
-        d == null || d(D);
+        h == null || h(L);
       }
-      (b = (y = i.triggerRef) == null ? void 0 : y.current) == null || b.focus();
+      (x = (m = n.triggerRef) == null ? void 0 : m.current) == null || x.focus();
     }
   };
-  if (g)
-    return /* @__PURE__ */ p(
+  if (b)
+    return /* @__PURE__ */ l(
       Q.Button,
       {
         type: "button",
-        onSelect: m,
-        onKeyDown: m,
-        selected: r === null ? null : r ?? v,
-        onFocus: () => a(!0),
-        onBlur: () => a(!1),
+        onSelect: d,
+        onKeyDown: d,
+        selected: e === null ? null : e ?? v,
+        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-value": e,
-        "data-tgph-combobox-option-label": c,
-        ...l,
-        children: c || o || e
+        "data-tgph-combobox-option-focused": i,
+        "data-tgph-combobox-option-value": t,
+        "data-tgph-combobox-option-label": o,
+        ...c,
+        children: o || a || t
       }
     );
-}, he = ({
-  label: e = "Search",
-  placeholder: c = "Search",
-  tgphRef: r,
-  value: t,
-  onValueChange: o,
-  ...l
+}, we = ({
+  label: t = "Search",
+  placeholder: o = "Search",
+  tgphRef: e,
+  value: r,
+  onValueChange: a,
+  ...c
 }) => {
   var v;
-  const i = s.useId(), n = s.useContext(x), a = j(r, n.searchRef), f = t ?? n.searchQuery, g = o ?? n.setSearchQuery;
+  const n = s.useId(), i = s.useContext(y), p = $(e, i.searchRef), g = r ?? i.searchQuery, b = a ?? i.setSearchQuery;
   return s.useEffect(() => {
-    var h;
-    const m = (y) => {
-      var b, d;
-      ie.includes(y.key) && ((d = (b = n.contentRef) == null ? void 0 : b.current) == null || d.focus({ preventScroll: !0 })), y.key === "Escape" && n.setOpen(!1), y.stopPropagation();
-    }, u = (h = n.searchRef) == null ? void 0 : h.current;
+    var f;
+    const d = (m) => {
+      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", m), () => {
-        u.removeEventListener("keydown", m);
+      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: i, children: e }) }),
-    /* @__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: i,
+        id: n,
         variant: "ghost",
-        placeholder: c,
-        value: f,
-        onChange: (m) => {
-          g(m.target.value);
+        placeholder: o,
+        value: g,
+        onChange: (d) => {
+          b(d.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ p(N, { icon: E.Search, alt: "Search Icon" }),
-        TrailingComponent: n != null && n.searchQuery && ((v = n == null ? void 0 : n.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ p(
-          I,
+        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: E.X, alt: "Clear Search Query" },
             onClick: () => {
-              var m;
-              return (m = n.setSearchQuery) == null ? void 0 : m.call(n, "");
+              var d;
+              return (d = i.setSearchQuery) == null ? void 0 : d.call(i, "");
             }
           }
         ) : null,
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
-        "aria-controls": n.contentId,
-        ...l,
-        tgphRef: a
+        "aria-controls": i.contentId,
+        ...c,
+        tgphRef: p
       }
     )
   ] });
-}, de = ({
-  icon: e = { icon: E.Search, alt: "Search Icon" },
-  message: c = "No results found",
-  children: r,
-  ...t
+}, Ee = ({
+  icon: t = { icon: E.Search, alt: "Search Icon" },
+  message: o = "No results found",
+  children: e,
+  ...r
 }) => {
-  const o = s.useContext(x), [l, i] = s.useState(!1);
+  const a = s.useContext(y), [c, n] = s.useState(!1);
   if (s.useEffect(() => {
-    var a, f;
-    const n = (f = (a = o.contentRef) == null ? void 0 : a.current) == null ? void 0 : f.querySelectorAll(
+    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 ? i(!0) : i(!1);
-  }, [o.searchQuery, o.contentRef, r]), l)
-    return /* @__PURE__ */ S(
-      T,
+    (i == null ? void 0 : i.length) === 0 ? n(!0) : n(!1);
+  }, [a.searchQuery, a.contentRef, e]), c)
+    return /* @__PURE__ */ R(
+      I,
       {
         gap: "1",
         align: "center",
@@ -639,58 +719,59 @@ const ne = {
         w: "full",
         my: "8",
         "data-tgph-combobox-empty": !0,
-        ...t,
+        ...r,
         children: [
-          e === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(N, { ...e }),
-          c === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(M, { as: "span", children: c })
+          t === null ? /* @__PURE__ */ l(_, {}) : /* @__PURE__ */ l(z, { ...t }),
+          o === null ? /* @__PURE__ */ l(_, {}) : /* @__PURE__ */ l(H, { as: "span", children: o })
         ]
       }
     );
-}, me = ({
-  leadingText: e = "Create",
-  values: c,
-  onCreate: r,
-  selected: t = null,
-  legacyBehavior: o = !1,
-  ...l
+}, ke = ({
+  leadingText: t = "Create",
+  values: o,
+  onCreate: e,
+  selected: r = null,
+  legacyBehavior: a = !1,
+  ...c
 }) => {
-  const i = s.useContext(x), n = s.useCallback(
-    (a) => !c || (c == null ? void 0 : c.length) === 0 ? !1 : c.some(
-      (f) => C(f, o) === a
+  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
     ),
-    [c, o]
+    [o, a]
   );
-  if (i.searchQuery && !n(i.searchQuery))
-    return /* @__PURE__ */ p(
-      G,
+  if (n.searchQuery && !i(n.searchQuery))
+    return /* @__PURE__ */ l(
+      q,
       {
         leadingIcon: { icon: E.Plus, "aria-hidden": !0 },
         mx: "1",
-        value: i.searchQuery,
-        label: `${e} "${i.searchQuery}"`,
-        selected: t,
+        value: n.searchQuery,
+        label: `${t} "${n.searchQuery}"`,
+        selected: r,
         onSelect: () => {
-          var a;
-          if (r && i.value && i.searchQuery) {
-            const f = o === !0 ? { value: i.searchQuery } : i.searchQuery;
-            r(f), (a = i.setSearchQuery) == null || a.call(i, "");
+          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, "");
           }
         },
-        ...l
+        ...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