@telegraph/combobox 0.0.8 → 0.0.10

package/dist/esm/index.mjs

@@ -4,12 +4,12 @@ import * as be from "@radix-ui/react-visually-hidden";
 import { Icon as K, Lucide as j } from "@telegraph/icon";
 import * as he from "react";
 import p from "react";
-import { Text as P } from "@telegraph/typography";
-import { useComposedRefs as B } from "@telegraph/compose-refs";
+import { Text as D } from "@telegraph/typography";
+import { useComposedRefs as M } from "@telegraph/compose-refs";
 import { RefToTgphRef as ye } from "@telegraph/helpers";
 import { Input as fe } from "@telegraph/input";
-import { Menu as N } from "@telegraph/menu";
-import { Tag as z } from "@telegraph/tag";
+import { Menu as B } from "@telegraph/menu";
+import { Tag as N } from "@telegraph/tag";
 import { motion as E, AnimatePresence as F } from "framer-motion";
 function re(o) {
   var t, e, a = "";
@@ -20,7 +20,7 @@ function re(o) {
   } else for (e in o) o[e] && (a && (a += " "), a += e);
   return a;
 }
-function $() {
+function I() {
   for (var o, t, e = 0, a = "", i = arguments.length; e < i; e++) (o = arguments[e]) && (t = re(o)) && (a && (a += " "), a += t);
   return a;
 }
@@ -66,7 +66,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     return o.toString();
   const e = t.type === "color" ? "" : `-${t.type}`;
   return o === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${o})`;
-}, I = {
+}, $ = {
   top: 0,
   right: 1,
   bottom: 2,
@@ -115,19 +115,19 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[k[a]] = f({
     value: t,
     prop: e
-  }))) : (a === "x" && (n[I.left] = f({
+  }))) : (a === "x" && (n[$.left] = f({
     value: t,
     prop: e
-  }), n[I.right] = f({
+  }), n[$.right] = f({
     value: t,
     prop: e
-  })), a === "y" && (n[I.top] = f({
+  })), a === "y" && (n[$.top] = f({
     value: t,
     prop: e
-  }), n[I.bottom] = f({
+  }), n[$.bottom] = f({
     value: t,
     prop: e
-  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[I[a]] = f({
+  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[$[a]] = f({
     value: t,
     prop: e
   }))), n.join(" "));
@@ -370,6 +370,10 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   shadow: {
     rule: "box-shadow",
     type: "shadow"
+  },
+  zIndex: {
+    rule: "z-index",
+    type: "zIndex"
   }
 }, ke = ({
   as: o,
@@ -393,7 +397,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   }, [l.box]), /* @__PURE__ */ u(
     i,
     {
-      className: $("tgph-box", t),
+      className: I("tgph-box", t),
       ref: n,
       ...l.rest
     }
@@ -450,7 +454,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   }, [r.stack, i]), /* @__PURE__ */ u(
     ke,
     {
-      className: $("tgph-stack", o),
+      className: I("tgph-stack", o),
       tgphRef: i,
       ...r.rest
     }
@@ -586,7 +590,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     disabled: "disabled"
   },
   ghost: {
-    gray: "gray",
+    gray: "default",
     red: "red",
     accent: "accent",
     green: "green",
@@ -633,7 +637,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   },
   ghost: {
     accent: "accent",
-    gray: "default",
+    gray: "gray",
     red: "red",
     green: "green",
     blue: "blue",
@@ -680,7 +684,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
         Ce,
         {
           as: o || "button",
-          className: $(
+          className: I(
             "appearance-none border-0 cursor-pointer bg-none box-border [font-family:inherit]",
             "transition-colors no-underline",
             d === "disabled" && "cursor-not-allowed",
@@ -739,13 +743,13 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
 }) => {
   const n = p.useContext(Y);
   return /* @__PURE__ */ u(
-    P,
+    D,
     {
       as: o || "span",
       color: t ?? Se[n.variant][n.color],
       size: e ?? Te[n.size],
       weight: a,
-      className: $("no-underline whitespace-nowrap", i),
+      className: I("no-underline whitespace-nowrap", i),
       internal_optionalAs: !0,
       "data-button-text": !0,
       ...r
@@ -770,7 +774,7 @@ Object.assign(le, {
   Icon: H,
   Text: ie
 });
-const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
+const z = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   const t = [];
   let e = null;
   for (let a = 0; a < _.length; a++) {
@@ -794,7 +798,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     }
   }
   return t;
-}, $e = (o) => typeof o == "object" && (o.sm || o.md || o.lg || o.xl || o["2xl"]), m = ({
+}, Ie = (o) => typeof o == "object" && (o.sm || o.md || o.lg || o.xl || o["2xl"]), m = ({
   value: o,
   prop: t
 }) => {
@@ -813,7 +817,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   topRight: 1,
   bottomRight: 2,
   bottomLeft: 3
-}, Ie = ({
+}, $e = ({
   cssVariables: o,
   value: t,
   prop: e,
@@ -872,7 +876,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   prop: o,
   value: t,
   cssVariables: e
-}) => o.direction ? Ie({
+}) => o.direction ? $e({
   cssVariables: e,
   prop: o,
   value: t,
@@ -892,7 +896,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       key: i,
       value: r,
       cssVariables: a
-    }) : $e(r) && je(r).forEach((l, c) => {
+    }) : Ie(r) && je(r).forEach((l, c) => {
       l && (a[`--tgph-${n.rule}-${_[c]}`] = Z({
         prop: n,
         key: i,
@@ -1107,6 +1111,10 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   shadow: {
     rule: "box-shadow",
     type: "shadow"
+  },
+  zIndex: {
+    rule: "z-index",
+    type: "zIndex"
   }
 }, X = ({
   as: o,
@@ -1114,7 +1122,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   tgphRef: e,
   ...a
 }) => {
-  const i = o || "div", r = p.useRef(null), n = B(e, r), l = p.useMemo(() => {
+  const i = o || "div", r = p.useRef(null), n = M(e, r), l = p.useMemo(() => {
     const c = { borderColor: !0, ...a };
     return Object.keys(c).reduce(
       (d, s) => (Object.keys(ee).some((b) => b === s) ? d.box[s] = c[s] : d.rest[s] = c[s], d),
@@ -1130,7 +1138,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   }, [l.box]), /* @__PURE__ */ u(
     i,
     {
-      className: $("tgph-box", t),
+      className: I("tgph-box", t),
       ref: n,
       ...l.rest
     }
@@ -1171,7 +1179,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   tgphRef: t,
   ...e
 }) => {
-  const a = p.useRef(null), i = B(t, a), r = p.useMemo(
+  const a = p.useRef(null), i = M(t, a), r = p.useMemo(
     () => Object.keys(e).reduce(
       (n, l) => (Object.keys(te).some((c) => c === l) ? n.stack[l] = e[l] : n.rest[l] = e[l], n),
       { stack: {}, rest: {} }
@@ -1187,7 +1195,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   }, [r.stack, i]), /* @__PURE__ */ u(
     X,
     {
-      className: $("tgph-stack", o),
+      className: I("tgph-stack", o),
       tgphRef: i,
       ...r.rest
     }
@@ -1215,13 +1223,13 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   layout: d,
   ...s
 }) => {
-  const b = p.useId(), y = p.useId(), g = p.useRef(null), h = p.useRef(null), v = p.useRef(null), [w, L] = p.useState(""), [R = !1, M] = ge({
+  const b = p.useId(), y = p.useId(), g = p.useRef(null), h = p.useRef(null), v = p.useRef(null), [w, L] = p.useState(""), [R = !1, P] = ge({
     prop: e,
     defaultProp: i,
     onChange: a
   }), se = p.useCallback(() => {
-    M((de) => !de);
-  }, [M]);
+    P((de) => !de);
+  }, [P]);
   return p.useEffect(() => {
     R || L("");
   }, [R]), /* @__PURE__ */ u(
@@ -1234,7 +1242,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         onValueChange: n,
         placeholder: c,
         open: R,
-        setOpen: M,
+        setOpen: P,
         onOpenToggle: se,
         closeOnSelect: t,
         searchQuery: w,
@@ -1246,20 +1254,20 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         layout: d
       },
       children: /* @__PURE__ */ u(
-        N.Root,
+        B.Root,
         {
           open: R,
-          onOpenChange: M,
+          onOpenChange: P,
           modal: o,
           ...s
         }
       )
     }
   );
-}, De = ({ label: o, value: t, ...e }) => {
+}, ze = ({ label: o, value: t, ...e }) => {
   const a = p.useContext(x);
   return /* @__PURE__ */ S(
-    z.Root,
+    N.Root,
     {
       size: "1",
       as: E.span,
@@ -1279,9 +1287,9 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       },
       ...e,
       children: [
-        /* @__PURE__ */ u(z.Text, { children: o || t }),
+        /* @__PURE__ */ u(N.Text, { children: o || t }),
         /* @__PURE__ */ u(
-          z.Button,
+          N.Button,
           {
             icon: { icon: j.X, alt: `Remove ${t}` },
             onClick: (i) => {
@@ -1293,14 +1301,14 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       ]
     }
   );
-}, Me = ({
+}, Pe = ({
   size: o = "1"
 }) => {
   var a, i;
   const t = p.useContext(x), e = o === "1" ? "6" : o === "2" ? "8" : "10";
   if (t.value && Q(t.value)) {
     const r = t.value, n = t.layout || "truncate", l = r.length - 2, c = l.toString().split("");
-    return r.length === 0 ? /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ S(
+    return r.length === 0 ? /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(z.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ S(
       T,
       {
         gap: "1",
@@ -1315,7 +1323,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         children: [
           /* @__PURE__ */ u(F, { initial: !1, mode: "popLayout", children: r.map((d, s) => {
             if (n === "truncate" && s <= 1 || n === "wrap")
-              return /* @__PURE__ */ u(ye, { children: /* @__PURE__ */ u(De, { ...d }) }, d.value);
+              return /* @__PURE__ */ u(ye, { children: /* @__PURE__ */ u(ze, { ...d }) }, d.value);
           }) }),
           /* @__PURE__ */ u(F, { children: n === "truncate" && r.length > 2 && /* @__PURE__ */ u(
             T,
@@ -1335,7 +1343,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
                 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__ */ S(D, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
                 /* @__PURE__ */ u(F, { mode: "wait", initial: !1, children: c.map((d) => /* @__PURE__ */ u(
                   X,
@@ -1367,14 +1375,14 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       }
     );
   }
-  return /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
-}, Pe = ({ size: o = "1", ...t }) => {
+  return /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(z.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
+}, De = ({ size: o = "1", ...t }) => {
   const e = p.useContext(x), a = p.useCallback(() => {
     var i, r, n;
     return e.value ? q(e.value) ? ((i = e.value) == null ? void 0 : i.label) || ((r = e.value) == null ? void 0 : r.value) || e.placeholder : ((n = e.value) == null ? void 0 : n.map((l) => l.label).join(", ")) || e.placeholder : e.placeholder;
   }, [e.value, e.placeholder]);
   return /* @__PURE__ */ u(
-    N.Trigger,
+    B.Trigger,
     {
       ...t,
       asChild: !0,
@@ -1398,7 +1406,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       },
       tgphRef: e.triggerRef,
       children: /* @__PURE__ */ S(
-        D.Root,
+        z.Root,
         {
           id: e.triggerId,
           bg: "surface-1",
@@ -1415,9 +1423,9 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
           "data-tgph-combobox-trigger": !0,
           "data-tgph-comobox-trigger-open": e.open,
           children: [
-            /* @__PURE__ */ u(Me, { size: o }),
+            /* @__PURE__ */ u(Pe, { size: o }),
             /* @__PURE__ */ u(
-              D.Icon,
+              z.Icon,
               {
                 as: E.div,
                 icon: j.ChevronDown,
@@ -1431,13 +1439,13 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       )
     }
   );
-}, Be = ({
+}, Me = ({
   tgphRef: o,
   style: t,
   children: e,
   ...a
 }) => {
-  const i = p.useContext(x), r = p.useRef(!1), n = B(o, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, b] = p.useState(!1), y = p.useCallback(
+  const i = p.useContext(x), r = p.useRef(!1), n = M(o, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, b] = p.useState(!1), y = p.useCallback(
     (g) => {
       const h = g.getBoundingClientRect();
       h && d(h.height), s || b(!0);
@@ -1455,7 +1463,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   }, [s, y]), p.useEffect(() => {
     s === !0 && i.open === !1 && b(!1);
   }, [i.open, s]), /* @__PURE__ */ u(
-    N.Content,
+    B.Content,
     {
       as: E.div,
       mt: "1",
@@ -1512,7 +1520,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       children: /* @__PURE__ */ u(T, { direction: "column", gap: "1", tgphRef: l, children: e })
     }
   );
-}, Ne = ({ ...o }) => {
+}, Be = ({ ...o }) => {
   const t = p.useContext(x);
   return /* @__PURE__ */ u(
     T,
@@ -1554,7 +1562,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   };
   if (d)
     return /* @__PURE__ */ u(
-      N.Button,
+      B.Button,
       {
         type: "button",
         onSelect: b,
@@ -1572,14 +1580,14 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         children: t || o
       }
     );
-}, ze = ({
+}, Ne = ({
   label: o = "Search",
   placeholder: t = "Search",
   tgphRef: e,
   ...a
 }) => {
   var l;
-  const i = p.useId(), r = p.useContext(x), n = B(e, r.searchRef);
+  const i = p.useId(), r = p.useContext(x), n = M(e, r.searchRef);
   return p.useEffect(() => {
     var s;
     const c = (b) => {
@@ -1591,7 +1599,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         d.removeEventListener("keydown", c);
       };
   }, [r]), /* @__PURE__ */ S(X, { borderBottom: !0, px: "1", pb: "1", children: [
-    /* @__PURE__ */ u(be.Root, { children: /* @__PURE__ */ u(P, { as: "label", htmlFor: i, children: o }) }),
+    /* @__PURE__ */ u(be.Root, { children: /* @__PURE__ */ u(D, { as: "label", htmlFor: i, children: o }) }),
     /* @__PURE__ */ u(
       fe,
       {
@@ -1605,7 +1613,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         },
         LeadingComponent: /* @__PURE__ */ u(K, { icon: j.Search, alt: "Search Icon" }),
         TrailingComponent: r != null && r.searchQuery && ((l = r == null ? void 0 : r.searchQuery) == null ? void 0 : l.length) > 0 ? /* @__PURE__ */ u(
-          D,
+          z,
           {
             as: E.button,
             initial: { opacity: 0 },
@@ -1658,7 +1666,7 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         ...a,
         children: [
           o === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(K, { ...o }),
-          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(P, { as: "span", children: t })
+          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(D, { as: "span", children: t })
         ]
       }
     );
@@ -1692,11 +1700,11 @@ const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
 }, Ke = {};
 Object.assign(Ke, {
   Root: Qe,
-  Trigger: Pe,
-  Content: Be,
-  Options: Ne,
+  Trigger: De,
+  Content: Me,
+  Options: Be,
   Option: ue,
-  Search: ze,
+  Search: Ne,
   Empty: Fe,
   Create: He
 });