@epilot/zenith-react 0.2.2 → 0.3.0-next.10

package/dist/components/command/command.js

@@ -1,12 +1,12 @@
-import { jsx as a, jsxs as S } from "react/jsx-runtime";
-import * as l from "react";
-import { Command as g } from "../../vendor/.bun/cmdk@1.1.1_2b23df507bdda662/vendor/cmdk/dist/index.js";
-import { mergeClasses as i, SLOT_ATTR as m, shorthands as p } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as q } from "../../styles/make-styles.js";
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import * as d from "react";
+import { Autocomplete as g } from "../../_virtual/_zenith-runtime-family_autocomplete.js";
+import { mergeClasses as l, SLOT_ATTR as r, shorthands as u } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as z } from "../../styles/make-styles.js";
 import { boxModel as s } from "../../styles/host-reset.js";
-import { spacingElement3 as f, spacingElement2 as r, fontWeightMedium as v, grayA11 as u, leadingXs as T, textXs as L, accentA3 as b, grayA12 as C, leadingSm as x, textSm as R, spacingElement1 as w, graySoft as I, focusRing as B, body as D, radiusSm as E, radiusMd as k, grayA3 as W } from "../../tokens/index.js";
-import { Dialog as X, DialogHeader as A, DialogTitle as H, DialogDescription as z, DialogContent as Y } from "../dialog/dialog.js";
-const M = (d) => /* @__PURE__ */ a(
+import { spacingElement3 as f, spacingElement2 as m, fontWeightMedium as E, grayA11 as h, leadingXs as H, textXs as $, accentA3 as A, grayA12 as N, leadingSm as q, textSm as I, spacingElement1 as x, graySoft as Y, focusRing as M, body as O, radiusSm as P, radiusMd as W, grayA3 as Z } from "../../tokens/index.js";
+import { Dialog as j, DialogHeader as _, DialogTitle as F, DialogDescription as J, DialogContent as K } from "../dialog/dialog.js";
+const Q = (i) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14,28 +14,28 @@ const M = (d) => /* @__PURE__ */ a(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...d,
+    ...i,
     children: /* @__PURE__ */ a("path", { d: "M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" })
   }
-), c = q({
+), c = z({
   root: {
     ...s,
-    backgroundColor: D,
-    color: C,
+    backgroundColor: O,
+    color: N,
     display: "flex",
     height: "100%",
     width: "100%",
     flexDirection: "column",
     overflowX: "hidden",
     overflowY: "hidden",
-    ...p.borderRadius(k)
+    ...u.borderRadius(W)
   },
   inputWrapper: {
     ...s,
     display: "flex",
     alignItems: "center",
-    ...p.gap(r),
-    ...p.borderBottom("1px", "solid", W),
+    ...u.gap(m),
+    ...u.borderBottom("1px", "solid", Z),
     paddingLeft: f,
     paddingRight: f,
     // The input's focus ring, drawn on the whole search row: the row holds the inline padding, so a
@@ -47,7 +47,7 @@ const M = (d) => /* @__PURE__ */ a(
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "-2px",
-      outlineColor: B
+      outlineColor: M
     }
   },
   searchIcon: {
@@ -62,15 +62,15 @@ const M = (d) => /* @__PURE__ */ a(
     height: "3rem",
     display: "flex",
     width: "100%",
-    ...p.borderRadius(k),
+    ...u.borderRadius(W),
     backgroundColor: "transparent",
     paddingTop: f,
     paddingBottom: f,
-    fontSize: R,
-    lineHeight: x,
+    fontSize: I,
+    lineHeight: q,
     outlineStyle: "none",
     "::placeholder": {
-      color: u
+      color: h
     },
     ":disabled": {
       cursor: "not-allowed",
@@ -80,40 +80,46 @@ const M = (d) => /* @__PURE__ */ a(
   list: {
     overflowX: "hidden",
     overflowY: "auto",
-    scrollPaddingTop: w,
-    scrollPaddingBottom: w
+    scrollPaddingTop: x,
+    scrollPaddingBottom: x
   },
   empty: {
     ...s,
     paddingTop: "1.5rem",
     paddingBottom: "1.5rem",
     textAlign: "center",
-    fontSize: R,
-    lineHeight: x,
-    color: u
+    fontSize: I,
+    lineHeight: q,
+    color: h,
+    // Base UI keeps the empty state mounted as a live region and empties it while items match.
+    ":empty": {
+      paddingTop: 0,
+      paddingBottom: 0
+    }
   },
   group: {
     ...s,
-    color: C,
+    color: N,
     overflowX: "hidden",
     overflowY: "hidden",
-    ...p.padding(w),
-    "& [cmdk-group-heading]": {
-      color: u,
-      paddingLeft: r,
-      paddingRight: r,
-      paddingTop: "0.375rem",
-      paddingBottom: "0.375rem",
-      fontSize: L,
-      lineHeight: T,
-      fontWeight: v
-    }
+    ...u.padding(x)
+  },
+  groupLabel: {
+    ...s,
+    color: h,
+    paddingLeft: m,
+    paddingRight: m,
+    paddingTop: "0.375rem",
+    paddingBottom: "0.375rem",
+    fontSize: $,
+    lineHeight: H,
+    fontWeight: E
   },
   separator: {
     ...s,
-    backgroundColor: I,
-    marginLeft: `calc(-1 * ${w})`,
-    marginRight: `calc(-1 * ${w})`,
+    backgroundColor: Y,
+    marginLeft: `calc(-1 * ${x})`,
+    marginRight: `calc(-1 * ${x})`,
     height: "1px"
   },
   item: {
@@ -122,24 +128,24 @@ const M = (d) => /* @__PURE__ */ a(
     display: "flex",
     cursor: "default",
     alignItems: "center",
-    ...p.gap(r),
-    ...p.borderRadius(E),
-    paddingLeft: r,
-    paddingRight: r,
+    ...u.gap(m),
+    ...u.borderRadius(P),
+    paddingLeft: m,
+    paddingRight: m,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: R,
-    lineHeight: x,
+    fontSize: I,
+    lineHeight: q,
     outlineStyle: "none",
     userSelect: "none",
-    color: C,
-    "&[data-selected='true'], &[aria-selected='true']": {
-      backgroundColor: b
+    color: N,
+    "&[data-highlighted]": {
+      backgroundColor: A
     },
     ":hover": {
-      backgroundColor: b
+      backgroundColor: A
     },
-    "&[data-disabled='true'], &[aria-disabled='true']": {
+    "&[data-disabled]": {
       pointerEvents: "none",
       opacity: 0.5
     },
@@ -150,54 +156,50 @@ const M = (d) => /* @__PURE__ */ a(
       height: "1rem"
     },
     "& svg:not([class*='text-'])": {
-      color: u
+      color: h
     }
   },
   shortcut: {
-    color: u,
+    color: h,
     marginLeft: "auto",
-    fontSize: L,
-    lineHeight: T,
+    fontSize: $,
+    lineHeight: H,
     letterSpacing: "0.1em"
   },
   loading: {
-    color: u
+    color: h
   },
   dialogContent: {
     ...s,
     overflowX: "hidden",
     overflowY: "hidden",
-    ...p.padding(0)
+    ...u.padding(0)
   },
   dialogCommand: {
-    "& [cmdk-group-heading]": {
-      color: u,
-      paddingLeft: r,
-      paddingRight: r,
-      fontWeight: v
+    [`& [${r}="command-group-label"]`]: {
+      color: h,
+      paddingLeft: m,
+      paddingRight: m,
+      fontWeight: E
     },
-    [`& [${m}="command-input-wrapper"]`]: {
+    [`& [${r}="command-input-wrapper"]`]: {
       height: "3rem"
     },
-    "& [cmdk-group]": {
-      paddingLeft: r,
-      paddingRight: r
+    [`& [${r}="command-group"]`]: {
+      paddingLeft: m,
+      paddingRight: m
     },
-    "& [cmdk-item]": {
-      paddingLeft: r,
-      paddingRight: r,
+    [`& [${r}="command-item"]`]: {
+      paddingLeft: m,
+      paddingRight: m,
       paddingTop: f,
       paddingBottom: f
     },
-    "& [cmdk-item] svg": {
+    [`& [${r}="command-item"] svg`]: {
       width: "1.25rem",
       height: "1.25rem"
     },
-    "& [cmdk-input-wrapper] svg": {
-      width: "1.25rem",
-      height: "1.25rem"
-    },
-    "& [cmdk-input]": {
+    [`& [${r}="command-input"]`]: {
       height: "3rem"
     }
   },
@@ -218,166 +220,248 @@ const M = (d) => /* @__PURE__ */ a(
     overflowY: "hidden",
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap",
-    ...p.borderWidth(0)
+    ...u.borderWidth(0)
   }
-}), O = l.forwardRef(function({ className: t, "data-slot": o = "command", ...e }, n) {
-  const h = c();
-  return /* @__PURE__ */ a(
-    g,
-    {
-      ref: n,
-      "data-slot": o,
-      [m]: o,
-      className: i(h.root, t),
-      ...e
-    }
-  );
-});
-l.forwardRef(
+}), X = d.createContext(""), U = d.forwardRef(
+  function({
+    className: e,
+    "data-slot": o = "command",
+    items: t,
+    filter: n,
+    itemToStringValue: p,
+    limit: y,
+    value: S,
+    defaultValue: b,
+    onValueChange: w,
+    children: R,
+    ...v
+  }, L) {
+    const T = c(), [k, C] = d.useState(b ?? ""), G = S ?? k;
+    return /* @__PURE__ */ a(
+      g.Root,
+      {
+        inline: !0,
+        open: !0,
+        autoHighlight: "always",
+        keepHighlight: !0,
+        items: t,
+        filter: n,
+        itemToStringValue: p,
+        limit: y,
+        value: S,
+        defaultValue: b,
+        onValueChange: (D) => {
+          C(D), w == null || w(D);
+        },
+        children: /* @__PURE__ */ a(X.Provider, { value: G, children: /* @__PURE__ */ a(
+          "div",
+          {
+            ref: L,
+            "data-slot": o,
+            [r]: o,
+            className: l(T.root, e),
+            ...v,
+            children: R
+          }
+        ) })
+      }
+    );
+  }
+);
+d.forwardRef(
   function({
-    title: t = "Command Palette",
+    title: e = "Command Palette",
     description: o = "Search for a command to run...",
-    children: e,
+    children: t,
     className: n,
-    showCloseButton: h = !0,
-    ...N
-  }, G) {
-    const y = c();
-    return /* @__PURE__ */ S(X, { ...N, children: [
-      /* @__PURE__ */ S(A, { className: y.srOnly, children: [
-        /* @__PURE__ */ a(H, { children: t }),
-        /* @__PURE__ */ a(z, { children: o })
+    showCloseButton: p = !0,
+    items: y,
+    filter: S,
+    itemToStringValue: b,
+    limit: w,
+    value: R,
+    defaultValue: v,
+    onValueChange: L,
+    ...T
+  }, k) {
+    const C = c();
+    return /* @__PURE__ */ B(j, { ...T, children: [
+      /* @__PURE__ */ B(_, { className: C.srOnly, children: [
+        /* @__PURE__ */ a(F, { children: e }),
+        /* @__PURE__ */ a(J, { children: o })
       ] }),
       /* @__PURE__ */ a(
-        Y,
+        K,
         {
-          className: i(y.dialogContent, n),
-          showCloseButton: h,
-          children: /* @__PURE__ */ a(O, { className: y.dialogCommand, children: e })
+          className: l(C.dialogContent, n),
+          showCloseButton: p,
+          children: /* @__PURE__ */ a(
+            U,
+            {
+              className: C.dialogCommand,
+              items: y,
+              filter: S,
+              itemToStringValue: b,
+              limit: w,
+              value: R,
+              defaultValue: v,
+              onValueChange: L,
+              children: t
+            }
+          )
         }
       )
     ] });
   }
 );
-const K = l.forwardRef(function({ className: t, wrapperClassName: o, ...e }, n) {
-  const h = c();
-  return /* @__PURE__ */ S(
+const io = d.forwardRef(function({ className: e, wrapperClassName: o, ...t }, n) {
+  const p = c();
+  return /* @__PURE__ */ B(
     "div",
     {
       "data-slot": "command-input-wrapper",
-      [m]: "command-input-wrapper",
-      className: i(h.inputWrapper, o),
+      [r]: "command-input-wrapper",
+      className: l(p.inputWrapper, o),
       children: [
-        /* @__PURE__ */ a(M, { className: h.searchIcon }),
+        /* @__PURE__ */ a(Q, { className: p.searchIcon }),
         /* @__PURE__ */ a(
           g.Input,
           {
             ref: n,
             "data-slot": "command-input",
-            [m]: "command-input",
-            className: i(h.input, t),
-            ...e
+            [r]: "command-input",
+            className: l(p.input, e),
+            ...t
           }
         )
       ]
     }
   );
-}), Q = l.forwardRef(function({ className: t, ...o }, e) {
-  const n = c();
-  return /* @__PURE__ */ a(
-    g.List,
-    {
-      ref: e,
-      "data-slot": "command-list",
-      [m]: "command-list",
-      className: i(n.list, t),
-      ...o
-    }
-  );
-}), U = l.forwardRef(function({ className: t, ...o }, e) {
-  const n = c();
-  return /* @__PURE__ */ a(
-    g.Empty,
-    {
-      ref: e,
-      "data-slot": "command-empty",
-      [m]: "command-empty",
-      className: i(n.empty, t),
-      ...o
-    }
-  );
-}), V = l.forwardRef(function({ className: t, ...o }, e) {
+}), mo = d.forwardRef(
+  function({
+    className: e,
+    "aria-label": o,
+    "aria-labelledby": t,
+    ...n
+  }, p) {
+    const y = c();
+    return /* @__PURE__ */ a(
+      g.List,
+      {
+        ref: p,
+        "data-slot": "command-list",
+        [r]: "command-list",
+        className: l(y.list, e),
+        "aria-labelledby": t,
+        "aria-label": o ?? (t ? void 0 : "Suggestions"),
+        ...n
+      }
+    );
+  }
+), lo = d.forwardRef(
+  function({ className: e, ...o }, t) {
+    const n = c();
+    return /* @__PURE__ */ a(
+      g.Empty,
+      {
+        ref: t,
+        "data-slot": "command-empty",
+        [r]: "command-empty",
+        className: l(n.empty, e),
+        ...o
+      }
+    );
+  }
+), so = d.forwardRef(
+  function({ className: e, ...o }, t) {
+    const n = c();
+    return /* @__PURE__ */ a(
+      g.Group,
+      {
+        ref: t,
+        "data-slot": "command-group",
+        [r]: "command-group",
+        className: l(n.group, e),
+        ...o
+      }
+    );
+  }
+), co = d.forwardRef(function({ className: e, ...o }, t) {
   const n = c();
   return /* @__PURE__ */ a(
-    g.Group,
+    g.GroupLabel,
     {
-      ref: e,
-      "data-slot": "command-group",
-      [m]: "command-group",
-      className: i(n.group, t),
+      ref: t,
+      "data-slot": "command-group-label",
+      [r]: "command-group-label",
+      className: l(n.groupLabel, e),
       ...o
     }
   );
-}), oo = l.forwardRef(function({ className: t, ...o }, e) {
+}), po = ({ children: i }) => /* @__PURE__ */ a(g.Collection, { children: i }), go = d.forwardRef(function({ className: e, ...o }, t) {
   const n = c();
-  return /* @__PURE__ */ a(
+  return d.useContext(X).trim() !== "" ? null : /* @__PURE__ */ a(
     g.Separator,
     {
-      ref: e,
+      ref: t,
       "data-slot": "command-separator",
-      [m]: "command-separator",
-      className: i(n.separator, t),
+      [r]: "command-separator",
+      className: l(n.separator, e),
       ...o
     }
   );
-}), to = l.forwardRef(function({ className: t, ...o }, e) {
-  const n = c();
-  return /* @__PURE__ */ a(
-    g.Item,
-    {
-      ref: e,
-      "data-slot": "command-item",
-      [m]: "command-item",
-      className: i(n.item, t),
-      ...o
-    }
-  );
-});
-l.forwardRef(function({ className: t, ...o }, e) {
+}), uo = d.forwardRef(
+  function({ className: e, ...o }, t) {
+    const n = c();
+    return /* @__PURE__ */ a(
+      g.Item,
+      {
+        ref: t,
+        "data-slot": "command-item",
+        [r]: "command-item",
+        className: l(n.item, e),
+        ...o
+      }
+    );
+  }
+);
+d.forwardRef(function({ className: e, ...o }, t) {
   const n = c();
   return /* @__PURE__ */ a(
     "span",
     {
-      ref: e,
+      ref: t,
       "data-slot": "command-shortcut",
-      [m]: "command-shortcut",
-      className: i(n.shortcut, t),
+      [r]: "command-shortcut",
+      className: l(n.shortcut, e),
       ...o
     }
   );
 });
-const eo = l.forwardRef(function({ className: t, ...o }, e) {
+const ho = d.forwardRef(function({ className: e, ...o }, t) {
   const n = c();
   return /* @__PURE__ */ a(
-    g.Loading,
+    g.Status,
     {
-      ref: e,
+      ref: t,
       "data-slot": "command-loading",
-      [m]: "command-loading",
-      className: i(n.loading, t),
+      [r]: "command-loading",
+      className: l(n.loading, e),
       ...o
     }
   );
 });
 export {
-  O as Command,
-  U as CommandEmpty,
-  V as CommandGroup,
-  K as CommandInput,
-  to as CommandItem,
-  Q as CommandList,
-  eo as CommandLoading,
-  O as CommandRoot,
-  oo as CommandSeparator
+  U as Command,
+  po as CommandCollection,
+  lo as CommandEmpty,
+  so as CommandGroup,
+  co as CommandGroupLabel,
+  io as CommandInput,
+  uo as CommandItem,
+  mo as CommandList,
+  ho as CommandLoading,
+  U as CommandRoot,
+  go as CommandSeparator
 };
 //# sourceMappingURL=command.js.map