@epilot/volt-ui-experimental-griffel 0.3.0 → 0.3.1

package/dist/components/command/command.js

@@ -1,13 +1,13 @@
-import { j as n } from "../../vendor/react/jsx-dev-runtime.js";
+import { jsx as n, jsxs as R } from "react/jsx-runtime";
 import * as s from "react";
 import { Command as p } from "../../vendor/cmdk/dist/index.js";
 import { shorthands as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as l } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as R } from "../../styles/make-styles.js";
-import { radiusSm as S, spacingElement2 as r, spacingElement1 as h, radiusMd as b, grayA3 as j, spacingElement3 as g, fontWeightMedium as y, grayA11 as f, leadingXs as k, textXs as C, accentA3 as D, grayA12 as N, leadingSm as v, textSm as w, semGraySoft as V, semFocusRing as T, body as U } from "../../tokens/index.js";
-import { Dialog as L, DialogHeader as q, DialogTitle as I, DialogDescription as B, DialogContent as W } from "../dialog/dialog.js";
-const X = (t) => /* @__PURE__ */ n.jsxDEV(
+import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as N } from "../../styles/make-styles.js";
+import { radiusSm as q, spacingElement2 as r, spacingElement1 as f, radiusMd as S, grayA3 as I, spacingElement3 as u, fontWeightMedium as v, grayA11 as h, leadingXs as T, textXs as L, accentA3 as b, grayA12 as y, leadingSm as C, textSm as x, semGraySoft as B, semFocusRing as D, body as E } from "../../tokens/index.js";
+import { Dialog as W, DialogHeader as X, DialogTitle as A, DialogDescription as H, DialogContent as z } from "../dialog/dialog.js";
+const Y = (d) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -15,40 +15,28 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...t,
-    children: /* @__PURE__ */ n.jsxDEV("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" }, void 0, !1, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 25,
-      columnNumber: 5
-    }, void 0)
-  },
-  void 0,
-  !1,
-  {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-    lineNumber: 17,
-    columnNumber: 3
-  },
-  void 0
-), d = R({
+    ...d,
+    children: /* @__PURE__ */ n("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" })
+  }
+), l = N({
   root: {
-    backgroundColor: U,
-    color: N,
+    backgroundColor: E,
+    color: y,
     display: "flex",
     height: "100%",
     width: "100%",
     flexDirection: "column",
     overflowX: "hidden",
     overflowY: "hidden",
-    ...c.borderRadius(b)
+    ...c.borderRadius(S)
   },
   inputWrapper: {
     display: "flex",
     alignItems: "center",
     ...c.gap(r),
-    ...c.borderBottom("1px", "solid", j),
-    paddingLeft: g,
-    paddingRight: g
+    ...c.borderBottom("1px", "solid", I),
+    paddingLeft: u,
+    paddingRight: u
   },
   searchIcon: {
     width: "1.25rem",
@@ -60,12 +48,12 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
     height: "3rem",
     display: "flex",
     width: "100%",
-    ...c.borderRadius(b),
+    ...c.borderRadius(S),
     backgroundColor: "transparent",
-    paddingTop: g,
-    paddingBottom: g,
-    fontSize: w,
-    lineHeight: v,
+    paddingTop: u,
+    paddingBottom: u,
+    fontSize: x,
+    lineHeight: C,
     outlineStyle: "none",
     ":focus-visible": {
       outlineWidth: "2px",
@@ -80,10 +68,10 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
       // OWN box, not just what extends beyond it, would still hide it). No layout change either
       // way: outline never affects box model regardless of sign.
       outlineOffset: "-2px",
-      outlineColor: T
+      outlineColor: D
     },
     "::placeholder": {
-      color: f
+      color: h
     },
     ":disabled": {
       cursor: "not-allowed",
@@ -93,37 +81,37 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
   list: {
     overflowX: "hidden",
     overflowY: "auto",
-    scrollPaddingTop: h,
-    scrollPaddingBottom: h
+    scrollPaddingTop: f,
+    scrollPaddingBottom: f
   },
   empty: {
     paddingTop: "1.5rem",
     paddingBottom: "1.5rem",
     textAlign: "center",
-    fontSize: w,
-    lineHeight: v,
-    color: f
+    fontSize: x,
+    lineHeight: C,
+    color: h
   },
   group: {
-    color: N,
+    color: y,
     overflowX: "hidden",
     overflowY: "hidden",
-    ...c.padding(h),
+    ...c.padding(f),
     "& [cmdk-group-heading]": {
-      color: f,
+      color: h,
       paddingLeft: r,
       paddingRight: r,
       paddingTop: "0.375rem",
       paddingBottom: "0.375rem",
-      fontSize: C,
-      lineHeight: k,
-      fontWeight: y
+      fontSize: L,
+      lineHeight: T,
+      fontWeight: v
     }
   },
   separator: {
-    backgroundColor: V,
-    marginLeft: `calc(-1 * ${h})`,
-    marginRight: `calc(-1 * ${h})`,
+    backgroundColor: B,
+    marginLeft: `calc(-1 * ${f})`,
+    marginRight: `calc(-1 * ${f})`,
     height: "1px"
   },
   item: {
@@ -132,21 +120,21 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
     cursor: "default",
     alignItems: "center",
     ...c.gap(r),
-    ...c.borderRadius(S),
+    ...c.borderRadius(q),
     paddingLeft: r,
     paddingRight: r,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: w,
-    lineHeight: v,
+    fontSize: x,
+    lineHeight: C,
     outlineStyle: "none",
     userSelect: "none",
-    color: N,
+    color: y,
     "&[data-selected='true'], &[aria-selected='true']": {
-      backgroundColor: D
+      backgroundColor: b
     },
     ":hover": {
-      backgroundColor: D
+      backgroundColor: b
     },
     "&[data-disabled='true'], &[aria-disabled='true']": {
       pointerEvents: "none",
@@ -159,18 +147,18 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
       height: "1rem"
     },
     "& svg:not([class*='text-'])": {
-      color: f
+      color: h
     }
   },
   shortcut: {
-    color: f,
+    color: h,
     marginLeft: "auto",
-    fontSize: C,
-    lineHeight: k,
+    fontSize: L,
+    lineHeight: T,
     letterSpacing: "0.1em"
   },
   loading: {
-    color: f
+    color: h
   },
   dialogContent: {
     overflowX: "hidden",
@@ -179,12 +167,12 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
   },
   dialogCommand: {
     "& [cmdk-group-heading]": {
-      color: f,
+      color: h,
       paddingLeft: r,
       paddingRight: r,
-      fontWeight: y
+      fontWeight: v
     },
-    [`& [${m}="command-input-wrapper"]`]: {
+    [`& [${i}="command-input-wrapper"]`]: {
       height: "3rem"
     },
     "& [cmdk-group]": {
@@ -194,8 +182,8 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
     "& [cmdk-item]": {
       paddingLeft: r,
       paddingRight: r,
-      paddingTop: g,
-      paddingBottom: g
+      paddingTop: u,
+      paddingBottom: u
     },
     "& [cmdk-item] svg": {
       width: "1.25rem",
@@ -227,276 +215,164 @@ const X = (t) => /* @__PURE__ */ n.jsxDEV(
     whiteSpace: "nowrap",
     ...c.borderWidth(0)
   }
-}), A = s.forwardRef(function({ className: o, "data-slot": e = "command", ...a }, i) {
-  const u = d();
-  return /* @__PURE__ */ n.jsxDEV(
+}), G = s.forwardRef(function({ className: t, "data-slot": o = "command", ...e }, a) {
+  const g = l();
+  return /* @__PURE__ */ n(
     p,
     {
-      ref: i,
-      "data-slot": e,
-      [m]: e,
-      className: l(u.root, o),
-      ...a
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 242,
-      columnNumber: 5
-    },
-    this
+      ref: a,
+      "data-slot": o,
+      [i]: o,
+      className: m(g.root, t),
+      ...e
+    }
   );
 });
 s.forwardRef(
   function({
-    title: o = "Command Palette",
-    description: e = "Search for a command to run...",
-    children: a,
-    className: i,
-    showCloseButton: u = !0,
-    ...E
-  }, H) {
-    const x = d();
-    return /* @__PURE__ */ n.jsxDEV(L, { ...E, children: [
-      /* @__PURE__ */ n.jsxDEV(q, { className: x.srOnly, children: [
-        /* @__PURE__ */ n.jsxDEV(I, { children: o }, void 0, !1, {
-          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-          lineNumber: 280,
-          columnNumber: 11
-        }, this),
-        /* @__PURE__ */ n.jsxDEV(B, { children: e }, void 0, !1, {
-          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-          lineNumber: 281,
-          columnNumber: 11
-        }, this)
-      ] }, void 0, !0, {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-        lineNumber: 279,
-        columnNumber: 9
-      }, this),
-      /* @__PURE__ */ n.jsxDEV(
-        W,
+    title: t = "Command Palette",
+    description: o = "Search for a command to run...",
+    children: e,
+    className: a,
+    showCloseButton: g = !0,
+    ...k
+  }, O) {
+    const w = l();
+    return /* @__PURE__ */ R(W, { ...k, children: [
+      /* @__PURE__ */ R(X, { className: w.srOnly, children: [
+        /* @__PURE__ */ n(A, { children: t }),
+        /* @__PURE__ */ n(H, { children: o })
+      ] }),
+      /* @__PURE__ */ n(
+        z,
         {
-          className: l(x.dialogContent, i),
-          showCloseButton: u,
-          children: /* @__PURE__ */ n.jsxDEV(A, { className: x.dialogCommand, children: a }, void 0, !1, {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-            lineNumber: 287,
-            columnNumber: 11
-          }, this)
-        },
-        void 0,
-        !1,
-        {
-          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-          lineNumber: 283,
-          columnNumber: 9
-        },
-        this
+          className: m(w.dialogContent, a),
+          showCloseButton: g,
+          children: /* @__PURE__ */ n(G, { className: w.dialogCommand, children: e })
+        }
       )
-    ] }, void 0, !0, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 278,
-      columnNumber: 7
-    }, this);
+    ] });
   }
 );
-const Z = s.forwardRef(function({ className: o, wrapperClassName: e, ...a }, i) {
-  const u = d();
-  return /* @__PURE__ */ n.jsxDEV(
+const V = s.forwardRef(function({ className: t, wrapperClassName: o, ...e }, a) {
+  const g = l();
+  return /* @__PURE__ */ R(
     "div",
     {
       "data-slot": "command-input-wrapper",
-      [m]: "command-input-wrapper",
-      className: l(u.inputWrapper, e),
+      [i]: "command-input-wrapper",
+      className: m(g.inputWrapper, o),
       children: [
-        /* @__PURE__ */ n.jsxDEV(X, { className: u.searchIcon }, void 0, !1, {
-          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-          lineNumber: 312,
-          columnNumber: 7
-        }, this),
-        /* @__PURE__ */ n.jsxDEV(
+        /* @__PURE__ */ n(Y, { className: g.searchIcon }),
+        /* @__PURE__ */ n(
           p.Input,
           {
-            ref: i,
+            ref: a,
             "data-slot": "command-input",
-            [m]: "command-input",
-            className: l(u.input, o),
-            ...a
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-            lineNumber: 313,
-            columnNumber: 7
-          },
-          this
+            [i]: "command-input",
+            className: m(g.input, t),
+            ...e
+          }
         )
       ]
-    },
-    void 0,
-    !0,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 307,
-      columnNumber: 5
-    },
-    this
+    }
   );
-}), F = s.forwardRef(function({ className: o, ...e }, a) {
-  const i = d();
-  return /* @__PURE__ */ n.jsxDEV(
+}), J = s.forwardRef(function({ className: t, ...o }, e) {
+  const a = l();
+  return /* @__PURE__ */ n(
     p.List,
     {
-      ref: a,
+      ref: e,
       "data-slot": "command-list",
-      [m]: "command-list",
-      className: l(i.list, o),
-      ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 335,
-      columnNumber: 5
-    },
-    this
+      [i]: "command-list",
+      className: m(a.list, t),
+      ...o
+    }
   );
-}), Q = s.forwardRef(function({ className: o, ...e }, a) {
-  const i = d();
-  return /* @__PURE__ */ n.jsxDEV(
+}), K = s.forwardRef(function({ className: t, ...o }, e) {
+  const a = l();
+  return /* @__PURE__ */ n(
     p.Empty,
     {
-      ref: a,
+      ref: e,
       "data-slot": "command-empty",
-      [m]: "command-empty",
-      className: l(i.empty, o),
-      ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 356,
-      columnNumber: 5
-    },
-    this
+      [i]: "command-empty",
+      className: m(a.empty, t),
+      ...o
+    }
   );
-}), J = s.forwardRef(function({ className: o, ...e }, a) {
-  const i = d();
-  return /* @__PURE__ */ n.jsxDEV(
+}), U = s.forwardRef(function({ className: t, ...o }, e) {
+  const a = l();
+  return /* @__PURE__ */ n(
     p.Group,
     {
-      ref: a,
+      ref: e,
       "data-slot": "command-group",
-      [m]: "command-group",
-      className: l(i.group, o),
-      ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 377,
-      columnNumber: 5
-    },
-    this
+      [i]: "command-group",
+      className: m(a.group, t),
+      ...o
+    }
   );
-}), K = s.forwardRef(function({ className: o, ...e }, a) {
-  const i = d();
-  return /* @__PURE__ */ n.jsxDEV(
+}), oo = s.forwardRef(function({ className: t, ...o }, e) {
+  const a = l();
+  return /* @__PURE__ */ n(
     p.Separator,
     {
-      ref: a,
+      ref: e,
       "data-slot": "command-separator",
-      [m]: "command-separator",
-      className: l(i.separator, o),
-      ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 398,
-      columnNumber: 5
-    },
-    this
+      [i]: "command-separator",
+      className: m(a.separator, t),
+      ...o
+    }
   );
-}), ee = s.forwardRef(function({ className: o, ...e }, a) {
-  const i = d();
-  return /* @__PURE__ */ n.jsxDEV(
+}), to = s.forwardRef(function({ className: t, ...o }, e) {
+  const a = l();
+  return /* @__PURE__ */ n(
     p.Item,
     {
-      ref: a,
+      ref: e,
       "data-slot": "command-item",
-      [m]: "command-item",
-      className: l(i.item, o),
-      ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 419,
-      columnNumber: 5
-    },
-    this
+      [i]: "command-item",
+      className: m(a.item, t),
+      ...o
+    }
   );
 });
-s.forwardRef(function({ className: o, ...e }, a) {
-  const i = d();
-  return /* @__PURE__ */ n.jsxDEV(
+s.forwardRef(function({ className: t, ...o }, e) {
+  const a = l();
+  return /* @__PURE__ */ n(
     "span",
     {
-      ref: a,
+      ref: e,
       "data-slot": "command-shortcut",
-      [m]: "command-shortcut",
-      className: l(i.shortcut, o),
-      ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 438,
-      columnNumber: 5
-    },
-    this
+      [i]: "command-shortcut",
+      className: m(a.shortcut, t),
+      ...o
+    }
   );
 });
-const oe = s.forwardRef(function({ className: o, ...e }, a) {
-  const i = d();
-  return /* @__PURE__ */ n.jsxDEV(
+const eo = s.forwardRef(function({ className: t, ...o }, e) {
+  const a = l();
+  return /* @__PURE__ */ n(
     p.Loading,
     {
-      ref: a,
+      ref: e,
       "data-slot": "command-loading",
-      [m]: "command-loading",
-      className: l(i.loading, o),
-      ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/command/command.tsx",
-      lineNumber: 459,
-      columnNumber: 5
-    },
-    this
+      [i]: "command-loading",
+      className: m(a.loading, t),
+      ...o
+    }
   );
 });
 export {
-  A as Command,
-  Q as CommandEmpty,
-  J as CommandGroup,
-  Z as CommandInput,
-  ee as CommandItem,
-  F as CommandList,
-  oe as CommandLoading,
-  A as CommandRoot,
-  K as CommandSeparator
+  G as Command,
+  K as CommandEmpty,
+  U as CommandGroup,
+  V as CommandInput,
+  to as CommandItem,
+  J as CommandList,
+  eo as CommandLoading,
+  G as CommandRoot,
+  oo as CommandSeparator
 };
 //# sourceMappingURL=command.js.map