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

package/dist/components/command/command.js

@@ -1,13 +1,13 @@
-import { jsx as n, jsxs as R } from "react/jsx-runtime";
+import { j as n } from "../../vendor/react/jsx-dev-runtime.js";
 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 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 u, radiusMd as S, grayA3 as I, spacingElement3 as f, 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, body as D } from "../../tokens/index.js";
-import { Dialog as E, DialogHeader as X, DialogTitle as A, DialogDescription as H, DialogContent as W } from "../dialog/dialog.js";
-const z = (d) => /* @__PURE__ */ n(
+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(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -15,28 +15,40 @@ const z = (d) => /* @__PURE__ */ n(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...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({
+    ...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({
   root: {
-    backgroundColor: D,
-    color: y,
+    backgroundColor: U,
+    color: N,
     display: "flex",
     height: "100%",
     width: "100%",
     flexDirection: "column",
     overflowX: "hidden",
     overflowY: "hidden",
-    ...c.borderRadius(S)
+    ...c.borderRadius(b)
   },
   inputWrapper: {
     display: "flex",
     alignItems: "center",
     ...c.gap(r),
-    ...c.borderBottom("1px", "solid", I),
-    paddingLeft: f,
-    paddingRight: f
+    ...c.borderBottom("1px", "solid", j),
+    paddingLeft: g,
+    paddingRight: g
   },
   searchIcon: {
     width: "1.25rem",
@@ -48,15 +60,30 @@ const z = (d) => /* @__PURE__ */ n(
     height: "3rem",
     display: "flex",
     width: "100%",
-    ...c.borderRadius(S),
+    ...c.borderRadius(b),
     backgroundColor: "transparent",
-    paddingTop: f,
-    paddingBottom: f,
-    fontSize: x,
-    lineHeight: C,
+    paddingTop: g,
+    paddingBottom: g,
+    fontSize: w,
+    lineHeight: v,
     outlineStyle: "none",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      // Inset (negative), not the outward +2px every other audited control uses: this input sits
+      // flush against the top edge of the Command root, which clips overflow for its rounded
+      // corners. An outward ring's top 4px (width + offset) render outside that clip box and are
+      // cut off — confirmed by measuring the rendered outline rect against the clipping ancestor's
+      // rect (COBALT-REVIEW-2.md §2). Insetting keeps the ring's outer edge at the input's own
+      // border edge, so it doesn't extend past this ancestor's clip box in this layout (it is not
+      // a universal guarantee against every possible ancestor — an ancestor that clips the input's
+      // 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
+    },
     "::placeholder": {
-      color: h
+      color: f
     },
     ":disabled": {
       cursor: "not-allowed",
@@ -66,37 +93,37 @@ const z = (d) => /* @__PURE__ */ n(
   list: {
     overflowX: "hidden",
     overflowY: "auto",
-    scrollPaddingTop: u,
-    scrollPaddingBottom: u
+    scrollPaddingTop: h,
+    scrollPaddingBottom: h
   },
   empty: {
     paddingTop: "1.5rem",
     paddingBottom: "1.5rem",
     textAlign: "center",
-    fontSize: x,
-    lineHeight: C,
-    color: h
+    fontSize: w,
+    lineHeight: v,
+    color: f
   },
   group: {
-    color: y,
+    color: N,
     overflowX: "hidden",
     overflowY: "hidden",
-    ...c.padding(u),
+    ...c.padding(h),
     "& [cmdk-group-heading]": {
-      color: h,
+      color: f,
       paddingLeft: r,
       paddingRight: r,
       paddingTop: "0.375rem",
       paddingBottom: "0.375rem",
-      fontSize: L,
-      lineHeight: T,
-      fontWeight: v
+      fontSize: C,
+      lineHeight: k,
+      fontWeight: y
     }
   },
   separator: {
-    backgroundColor: B,
-    marginLeft: `calc(-1 * ${u})`,
-    marginRight: `calc(-1 * ${u})`,
+    backgroundColor: V,
+    marginLeft: `calc(-1 * ${h})`,
+    marginRight: `calc(-1 * ${h})`,
     height: "1px"
   },
   item: {
@@ -105,21 +132,21 @@ const z = (d) => /* @__PURE__ */ n(
     cursor: "default",
     alignItems: "center",
     ...c.gap(r),
-    ...c.borderRadius(q),
+    ...c.borderRadius(S),
     paddingLeft: r,
     paddingRight: r,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: x,
-    lineHeight: C,
+    fontSize: w,
+    lineHeight: v,
     outlineStyle: "none",
     userSelect: "none",
-    color: y,
+    color: N,
     "&[data-selected='true'], &[aria-selected='true']": {
-      backgroundColor: b
+      backgroundColor: D
     },
     ":hover": {
-      backgroundColor: b
+      backgroundColor: D
     },
     "&[data-disabled='true'], &[aria-disabled='true']": {
       pointerEvents: "none",
@@ -132,18 +159,18 @@ const z = (d) => /* @__PURE__ */ n(
       height: "1rem"
     },
     "& svg:not([class*='text-'])": {
-      color: h
+      color: f
     }
   },
   shortcut: {
-    color: h,
+    color: f,
     marginLeft: "auto",
-    fontSize: L,
-    lineHeight: T,
+    fontSize: C,
+    lineHeight: k,
     letterSpacing: "0.1em"
   },
   loading: {
-    color: h
+    color: f
   },
   dialogContent: {
     overflowX: "hidden",
@@ -152,12 +179,12 @@ const z = (d) => /* @__PURE__ */ n(
   },
   dialogCommand: {
     "& [cmdk-group-heading]": {
-      color: h,
+      color: f,
       paddingLeft: r,
       paddingRight: r,
-      fontWeight: v
+      fontWeight: y
     },
-    [`& [${i}="command-input-wrapper"]`]: {
+    [`& [${m}="command-input-wrapper"]`]: {
       height: "3rem"
     },
     "& [cmdk-group]": {
@@ -167,8 +194,8 @@ const z = (d) => /* @__PURE__ */ n(
     "& [cmdk-item]": {
       paddingLeft: r,
       paddingRight: r,
-      paddingTop: f,
-      paddingBottom: f
+      paddingTop: g,
+      paddingBottom: g
     },
     "& [cmdk-item] svg": {
       width: "1.25rem",
@@ -200,164 +227,276 @@ const z = (d) => /* @__PURE__ */ n(
     whiteSpace: "nowrap",
     ...c.borderWidth(0)
   }
-}), Y = s.forwardRef(function({ className: t, "data-slot": o = "command", ...e }, a) {
-  const g = l();
-  return /* @__PURE__ */ n(
+}), A = s.forwardRef(function({ className: o, "data-slot": e = "command", ...a }, i) {
+  const u = d();
+  return /* @__PURE__ */ n.jsxDEV(
     p,
     {
-      ref: a,
-      "data-slot": o,
-      [i]: o,
-      className: m(g.root, t),
-      ...e
-    }
+      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
   );
 });
 s.forwardRef(
   function({
-    title: t = "Command Palette",
-    description: o = "Search for a command to run...",
-    children: e,
-    className: a,
-    showCloseButton: g = !0,
-    ...k
-  }, G) {
-    const w = l();
-    return /* @__PURE__ */ R(E, { ...k, children: [
-      /* @__PURE__ */ R(X, { className: w.srOnly, children: [
-        /* @__PURE__ */ n(A, { children: t }),
-        /* @__PURE__ */ n(H, { children: o })
-      ] }),
-      /* @__PURE__ */ n(
+    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,
         {
-          className: m(w.dialogContent, a),
-          showCloseButton: g,
-          children: /* @__PURE__ */ n(Y, { className: w.dialogCommand, children: e })
-        }
+          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
       )
-    ] });
+    ] }, 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 V = s.forwardRef(function({ className: t, wrapperClassName: o, ...e }, a) {
-  const g = l();
-  return /* @__PURE__ */ R(
+const Z = s.forwardRef(function({ className: o, wrapperClassName: e, ...a }, i) {
+  const u = d();
+  return /* @__PURE__ */ n.jsxDEV(
     "div",
     {
       "data-slot": "command-input-wrapper",
-      [i]: "command-input-wrapper",
-      className: m(g.inputWrapper, o),
+      [m]: "command-input-wrapper",
+      className: l(u.inputWrapper, e),
       children: [
-        /* @__PURE__ */ n(z, { className: g.searchIcon }),
-        /* @__PURE__ */ n(
+        /* @__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(
           p.Input,
           {
-            ref: a,
+            ref: i,
             "data-slot": "command-input",
-            [i]: "command-input",
-            className: m(g.input, t),
-            ...e
-          }
+            [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
         )
       ]
-    }
+    },
+    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: t, ...o }, e) {
-  const a = l();
-  return /* @__PURE__ */ n(
+}), F = s.forwardRef(function({ className: o, ...e }, a) {
+  const i = d();
+  return /* @__PURE__ */ n.jsxDEV(
     p.List,
     {
-      ref: e,
+      ref: a,
       "data-slot": "command-list",
-      [i]: "command-list",
-      className: m(a.list, t),
-      ...o
-    }
+      [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
   );
-}), J = s.forwardRef(function({ className: t, ...o }, e) {
-  const a = l();
-  return /* @__PURE__ */ n(
+}), Q = s.forwardRef(function({ className: o, ...e }, a) {
+  const i = d();
+  return /* @__PURE__ */ n.jsxDEV(
     p.Empty,
     {
-      ref: e,
+      ref: a,
       "data-slot": "command-empty",
-      [i]: "command-empty",
-      className: m(a.empty, t),
-      ...o
-    }
+      [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
   );
-}), K = s.forwardRef(function({ className: t, ...o }, e) {
-  const a = l();
-  return /* @__PURE__ */ n(
+}), J = s.forwardRef(function({ className: o, ...e }, a) {
+  const i = d();
+  return /* @__PURE__ */ n.jsxDEV(
     p.Group,
     {
-      ref: e,
+      ref: a,
       "data-slot": "command-group",
-      [i]: "command-group",
-      className: m(a.group, t),
-      ...o
-    }
+      [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
   );
-}), U = s.forwardRef(function({ className: t, ...o }, e) {
-  const a = l();
-  return /* @__PURE__ */ n(
+}), K = s.forwardRef(function({ className: o, ...e }, a) {
+  const i = d();
+  return /* @__PURE__ */ n.jsxDEV(
     p.Separator,
     {
-      ref: e,
+      ref: a,
       "data-slot": "command-separator",
-      [i]: "command-separator",
-      className: m(a.separator, t),
-      ...o
-    }
+      [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
   );
-}), oo = s.forwardRef(function({ className: t, ...o }, e) {
-  const a = l();
-  return /* @__PURE__ */ n(
+}), ee = s.forwardRef(function({ className: o, ...e }, a) {
+  const i = d();
+  return /* @__PURE__ */ n.jsxDEV(
     p.Item,
     {
-      ref: e,
+      ref: a,
       "data-slot": "command-item",
-      [i]: "command-item",
-      className: m(a.item, t),
-      ...o
-    }
+      [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
   );
 });
-s.forwardRef(function({ className: t, ...o }, e) {
-  const a = l();
-  return /* @__PURE__ */ n(
+s.forwardRef(function({ className: o, ...e }, a) {
+  const i = d();
+  return /* @__PURE__ */ n.jsxDEV(
     "span",
     {
-      ref: e,
+      ref: a,
       "data-slot": "command-shortcut",
-      [i]: "command-shortcut",
-      className: m(a.shortcut, t),
-      ...o
-    }
+      [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
   );
 });
-const to = s.forwardRef(function({ className: t, ...o }, e) {
-  const a = l();
-  return /* @__PURE__ */ n(
+const oe = s.forwardRef(function({ className: o, ...e }, a) {
+  const i = d();
+  return /* @__PURE__ */ n.jsxDEV(
     p.Loading,
     {
-      ref: e,
+      ref: a,
       "data-slot": "command-loading",
-      [i]: "command-loading",
-      className: m(a.loading, t),
-      ...o
-    }
+      [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
   );
 });
 export {
-  Y as Command,
-  J as CommandEmpty,
-  K as CommandGroup,
-  V as CommandInput,
-  oo as CommandItem,
+  A as Command,
+  Q as CommandEmpty,
+  J as CommandGroup,
+  Z as CommandInput,
+  ee as CommandItem,
   F as CommandList,
-  to as CommandLoading,
-  Y as CommandRoot,
-  U as CommandSeparator
+  oe as CommandLoading,
+  A as CommandRoot,
+  K as CommandSeparator
 };
 //# sourceMappingURL=command.js.map