impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.6

package/dist/components/feedback/tooltip/tooltip.js

@@ -1,45 +1,45 @@
 import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import * as s from "react";
-import * as o from "@radix-ui/react-tooltip";
+import * as r from "@radix-ui/react-tooltip";
 import { wrapRadixPart as c } from "../../../lib/primitives/create-compound.js";
 import { cn as a } from "../../../lib/utils.js";
 import { tooltipVariants as f } from "./tooltip.variants.js";
-function u(t) {
-  return t === "primary" ? "default" : t ?? "default";
+function g(t) {
+  return t === "primary" ? "default" : t ?? "tertiary";
 }
-const x = o.Provider, N = (t) => /* @__PURE__ */ i(o.Root, { "data-component": "tooltip", ...t }), R = c(
+const x = r.Provider, N = (t) => /* @__PURE__ */ i(r.Root, { "data-component": "tooltip", ...t }), R = c(
   "tooltip",
   "trigger",
   "TooltipTrigger",
-  o.Trigger
-), g = s.forwardRef(
+  r.Trigger
+), u = s.forwardRef(
   ({
     className: t,
     sideOffset: n = 4,
-    variant: l = "default",
-    showArrow: d = !0,
+    variant: l = "tertiary",
+    showArrow: p = !0,
     ...e
-  }, p) => {
-    const r = u(l);
-    return /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ m(
-      o.Content,
+  }, d) => {
+    const o = g(l);
+    return /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ m(
+      r.Content,
       {
-        ref: p,
+        ref: d,
         sideOffset: n,
         "data-component": "tooltip-content",
-        "data-variant": r,
-        className: a(f({ variant: r }), t),
+        "data-variant": o,
+        className: a(f({ variant: o }), t),
         ...e,
         children: [
           e.children,
-          d && /* @__PURE__ */ i(
-            o.Arrow,
+          p && /* @__PURE__ */ i(
+            r.Arrow,
             {
               className: a(
                 "fill-current",
-                r === "default" && "fill-brand",
-                r === "secondary" && "fill-background stroke-border",
-                r === "tertiary" && "fill-foreground"
+                o === "default" && "fill-brand",
+                o === "secondary" && "fill-background stroke-border",
+                o === "tertiary" && "fill-foreground"
               )
             }
           )
@@ -48,10 +48,10 @@ const x = o.Provider, N = (t) => /* @__PURE__ */ i(o.Root, { "data-component": "
     ) });
   }
 );
-g.displayName = o.Content.displayName;
+u.displayName = r.Content.displayName;
 export {
   N as Tooltip,
-  g as TooltipContent,
+  u as TooltipContent,
   x as TooltipProvider,
   R as TooltipTrigger
 };

package/dist/components/feedback/tooltip/tooltip.variants.js

@@ -10,7 +10,7 @@ const o = t(
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "tertiary"
     }
   }
 );

package/dist/components/flows/command-palette/command-palette.js

@@ -1,5 +1,5 @@
-import { jsxs as m, jsx as e, Fragment as se } from "react/jsx-runtime";
-import * as a from "react";
+import { jsxs as c, jsx as e, Fragment as se } from "react/jsx-runtime";
+import * as n from "react";
 import * as P from "@radix-ui/react-dialog";
 import { Search as _ } from "impact-nova-icons";
 import { cn as l } from "../../../lib/utils.js";
@@ -7,12 +7,12 @@ import { useCommandPalette as ie } from "./use-command-palette.js";
 import { Kbd as v } from "../../primitives/kbd/kbd.js";
 import { keybindingToSymbols as de } from "../../primitives/kbd/keybinding-display.js";
 import { buildCommandPaletteLayout as le } from "./command-palette-layout.js";
-import { COMMAND_SOURCE_LABELS as me, fuzzyFilter as ce } from "./utils.js";
+import { COMMAND_SOURCE_LABELS as ce, fuzzyFilter as me } from "./utils.js";
 const ue = /* @__PURE__ */ new Set(["browser", "system", "ag-grid"]);
-function pe(o) {
+function fe(o) {
   return !!o && ue.has(o);
 }
-const R = a.createContext({
+const R = n.createContext({
   query: "",
   setQuery: () => {
   },
@@ -23,14 +23,14 @@ const R = a.createContext({
   onExecute: () => {
   }
 });
-function fe({
+function pe({
   className: o,
-  children: n,
+  children: a,
   commands: r,
   placeholder: i = "Type a command or search...",
-  emptyTitle: c = "No results found",
-  emptyDescription: p = "Try a different search term",
-  recentGroupLabel: f = "Recently Used",
+  emptyTitle: m = "No results found",
+  emptyDescription: f = "Try a different search term",
+  recentGroupLabel: p = "Recently Used",
   defaultGroupLabel: d = "Commands",
   navigateLabel: z = "Navigate",
   runLabel: M = "Run",
@@ -45,11 +45,11 @@ function fe({
     getPaletteCommands: Z,
     getEffectiveKeybinding: G,
     registry: k
-  } = ie(), [y, j] = a.useState(""), [N, g] = a.useState(0), q = a.useRef(null), T = a.useRef(null), K = a.useMemo(() => (r ?? Z()).filter((s) => {
+  } = ie(), [y, j] = n.useState(""), [N, g] = n.useState(0), q = n.useRef(null), T = n.useRef(null), K = n.useMemo(() => (r ?? Z()).filter((s) => {
     const u = s.source ?? "user";
     return u === "user" || u === "ag-grid";
-  }), [r, E]), Q = a.useMemo(() => {
-    const t = ce(
+  }), [r, E]), Q = n.useMemo(() => {
+    const t = me(
       K,
       y,
       (s) => `${s.category ? s.category + ": " : ""}${s.label}${s.description ? " " + s.description : ""}`
@@ -63,38 +63,38 @@ function fe({
       ), [...x, ...C];
     }
     return t;
-  }, [K, y, k]), U = a.useMemo(
+  }, [K, y, k]), U = n.useMemo(
     () => Q.map((t) => t.item),
     [Q]
-  ), ee = a.useMemo(
+  ), ee = n.useMemo(
     () => le({
       filteredCommands: U,
       emptyQuery: !y.trim(),
       recentCommandIds: k.getRecentCommandIds(),
-      recentGroupLabel: f,
+      recentGroupLabel: p,
       defaultGroupLabel: d
     }),
-    [U, y, k, f, d]
-  ), { groups: te, orderedCommands: b } = ee, S = a.useRef({
+    [U, y, k, p, d]
+  ), { groups: te, orderedCommands: b } = ee, S = n.useRef({
     ordered: b,
     index: N
   });
-  S.current = { ordered: b, index: N }, a.useEffect(() => {
+  S.current = { ordered: b, index: N }, n.useEffect(() => {
     E && (j(""), g(0), requestAnimationFrame(() => {
       q.current?.focus();
     }));
   }, [E]);
-  const I = a.useCallback(
+  const I = n.useCallback(
     (t) => {
       F(t), A?.(t);
     },
     [A, F]
-  ), w = a.useCallback(
+  ), w = n.useCallback(
     (t) => {
       t.handler(), k.addRecentCommand(t.id), $?.(t), I(!1);
     },
     [k, $, I]
-  ), ne = a.useCallback(
+  ), ae = n.useCallback(
     (t) => {
       const { ordered: s } = S.current, u = Math.max(s.length - 1, 0);
       switch (t.key) {
@@ -124,12 +124,12 @@ function fe({
     },
     [w]
   );
-  a.useEffect(() => {
+  n.useEffect(() => {
     g(0);
-  }, [y]), a.useEffect(() => {
+  }, [y]), n.useEffect(() => {
     const t = b.length;
     g((s) => t === 0 ? 0 : Math.min(s, t - 1));
-  }, [b.length]), a.useLayoutEffect(() => {
+  }, [b.length]), n.useLayoutEffect(() => {
     const t = T.current;
     if (!t) return;
     const s = t.querySelector(
@@ -141,7 +141,7 @@ function fe({
       behavior: "auto"
     });
   }, [N]);
-  const ae = a.useMemo(
+  const ne = n.useMemo(
     () => ({
       query: y,
       setQuery: j,
@@ -150,9 +150,9 @@ function fe({
       orderedCommands: b,
       onExecute: w,
       placeholder: i,
-      emptyTitle: c,
-      emptyDescription: p,
-      recentGroupLabel: f,
+      emptyTitle: m,
+      emptyDescription: f,
+      recentGroupLabel: p,
       defaultGroupLabel: d,
       navigateLabel: z,
       runLabel: M,
@@ -165,25 +165,25 @@ function fe({
       b,
       w,
       i,
-      c,
-      p,
+      m,
       f,
+      p,
       d,
       z,
       M,
       D,
       O
     ]
-  ), re = a.Children.count(n) > 0;
-  return /* @__PURE__ */ e(P.Root, { open: E, onOpenChange: I, children: /* @__PURE__ */ m(P.Portal, { children: [
+  ), re = n.Children.count(a) > 0;
+  return /* @__PURE__ */ e(P.Root, { open: E, onOpenChange: I, children: /* @__PURE__ */ c(P.Portal, { children: [
     /* @__PURE__ */ e(P.Overlay, { className: "fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none motion-reduce:transition-none" }),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ c(
       P.Content,
       {
         "aria-describedby": void 0,
         "data-command-palette": !0,
         "data-component": "command-palette",
-        onKeyDown: ne,
+        onKeyDown: ae,
         className: l(
           "fixed left-[50%] top-[20%] z-50 w-full max-w-[640px] -translate-x-1/2",
           "rounded-xl border border-stroke-hairline bg-canvas-elevated shadow-2xl overflow-hidden",
@@ -199,10 +199,10 @@ function fe({
         style: { transformOrigin: "top center" },
         children: [
           /* @__PURE__ */ e(P.Title, { className: "sr-only", children: "Command Palette" }),
-          /* @__PURE__ */ e(R.Provider, { value: ae, children: re ? n : /* @__PURE__ */ m(se, { children: [
+          /* @__PURE__ */ e(R.Provider, { value: ne, children: re ? a : /* @__PURE__ */ c(se, { children: [
             /* @__PURE__ */ e(B, { ref: q, placeholder: i }),
-            /* @__PURE__ */ e(H, { ref: T, children: b.length === 0 ? /* @__PURE__ */ e(J, {}) : te.map((t, s) => /* @__PURE__ */ m(
-              a.Fragment,
+            /* @__PURE__ */ e(H, { ref: T, children: b.length === 0 ? /* @__PURE__ */ e(J, {}) : te.map((t, s) => /* @__PURE__ */ c(
+              n.Fragment,
               {
                 children: [
                   s > 0 && /* @__PURE__ */ e(W, {}),
@@ -231,10 +231,10 @@ function fe({
     )
   ] }) });
 }
-fe.displayName = "CommandPalette";
-const B = a.forwardRef(({ className: o, placeholder: n, onValueChange: r, ...i }, c) => {
-  const { query: p, setQuery: f } = a.useContext(R);
-  return /* @__PURE__ */ m(
+pe.displayName = "CommandPalette";
+const B = n.forwardRef(({ className: o, placeholder: a, onValueChange: r, ...i }, m) => {
+  const { query: f, setQuery: p } = n.useContext(R);
+  return /* @__PURE__ */ c(
     "div",
     {
       className: l(
@@ -243,22 +243,22 @@ const B = a.forwardRef(({ className: o, placeholder: n, onValueChange: r, ...i }
       ),
       "data-command-palette-input": !0,
       children: [
-        /* @__PURE__ */ e(_, { className: "h-4 w-4 shrink-0 text-content-muted" }),
+        /* @__PURE__ */ e(_, { className: "h-4 w-4 shrink-0 text-content-icon" }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: c,
-            value: p,
+            ref: m,
+            value: f,
             onChange: (d) => {
-              f(d.target.value), r?.(d.target.value);
+              p(d.target.value), r?.(d.target.value);
             },
-            placeholder: n,
+            placeholder: a,
             autoComplete: "off",
             autoCorrect: "off",
             spellCheck: !1,
             className: l(
               "flex h-12 w-full bg-transparent py-3 text-sm font-medium outline-none",
-              "placeholder:text-content-muted"
+              "placeholder:text-content-placeholder"
             ),
             ...i
           }
@@ -277,7 +277,7 @@ const B = a.forwardRef(({ className: o, placeholder: n, onValueChange: r, ...i }
   );
 });
 B.displayName = "CommandPaletteInput";
-const H = a.forwardRef(({ className: o, children: n, ...r }, i) => /* @__PURE__ */ e(
+const H = n.forwardRef(({ className: o, children: a, ...r }, i) => /* @__PURE__ */ e(
   "div",
   {
     ref: i,
@@ -288,21 +288,21 @@ const H = a.forwardRef(({ className: o, children: n, ...r }, i) => /* @__PURE__
       o
     ),
     ...r,
-    children: n
+    children: a
   }
 ));
 H.displayName = "CommandPaletteList";
-const L = a.forwardRef(({ className: o, heading: n, children: r, ...i }, c) => /* @__PURE__ */ m(
+const L = n.forwardRef(({ className: o, heading: a, children: r, ...i }, m) => /* @__PURE__ */ c(
   "div",
   {
-    ref: c,
+    ref: m,
     role: "group",
-    "aria-label": n,
+    "aria-label": a,
     "data-command-palette-group": !0,
     className: l("py-1", o),
     ...i,
     children: [
-      n && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-content-muted", children: n }),
+      a && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-secondary-foreground", children: a }),
       r
     ]
   }
@@ -310,55 +310,55 @@ const L = a.forwardRef(({ className: o, heading: n, children: r, ...i }, c) => /
 L.displayName = "CommandPaletteGroup";
 function xe({
   source: o,
-  isSelected: n
+  isSelected: a
 }) {
   if (!o || o === "user") return null;
-  const r = me[o];
+  const r = ce[o];
   return r ? /* @__PURE__ */ e(
     "span",
     {
       className: l(
         "shrink-0 rounded px-1.5 py-px text-[9px] font-medium leading-tight tracking-wide",
-        n ? "text-brand-foreground/50" : "text-content-muted border border-stroke-hairline"
+        a ? "text-brand-foreground/50" : "text-secondary-foreground border border-stroke-hairline"
       ),
       children: r
     }
   ) : null;
 }
-const V = a.memo(
-  a.forwardRef(
-    ({ className: o, command: n, isSelected: r, onSelect: i, keybinding: c, ...p }, f) => {
-      const d = pe(n.source);
-      return /* @__PURE__ */ m(
+const V = n.memo(
+  n.forwardRef(
+    ({ className: o, command: a, isSelected: r, onSelect: i, keybinding: m, ...f }, p) => {
+      const d = fe(a.source);
+      return /* @__PURE__ */ c(
         "div",
         {
-          ref: f,
+          ref: p,
           role: "option",
           "aria-selected": r,
           "data-selected": r,
           "data-command-palette-item": !0,
-          "data-command-id": n.id,
+          "data-command-id": a.id,
           onClick: i,
           className: l(
             "flex items-center gap-3 cursor-pointer px-4 py-2 text-sm",
             // Smooth selection shift; scroll-margin keeps row clear of list edges when scrolling into view
             "transition-[color,background-color] duration-150 ease-out [scroll-margin-block:6px]",
-            r ? "bg-brand text-brand-foreground" : d ? "text-content-muted hover:bg-canvas-muted" : "text-content-charcoal hover:bg-canvas-muted",
+            r ? "bg-brand text-brand-foreground" : d ? "text-secondary-foreground hover:bg-canvas-muted" : "text-content-charcoal hover:bg-canvas-muted",
             o
           ),
-          ...p,
+          ...f,
           children: [
-            n.icon && /* @__PURE__ */ e(
+            a.icon && /* @__PURE__ */ e(
               "span",
               {
                 className: l(
                   "flex h-4 w-4 shrink-0 items-center justify-center",
-                  r ? "text-brand-foreground" : d ? "text-stroke-hairline" : "text-content-muted"
+                  r ? "text-brand-foreground" : d ? "text-stroke-hairline" : "text-secondary-foreground"
                 ),
-                children: n.icon
+                children: a.icon
               }
             ),
-            /* @__PURE__ */ m("div", { className: "flex flex-1 flex-col min-w-0", children: [
+            /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col min-w-0", children: [
               /* @__PURE__ */ e(
                 "span",
                 {
@@ -366,25 +366,25 @@ const V = a.memo(
                     "truncate",
                     d && !r ? "font-normal" : "font-medium"
                   ),
-                  children: n.label
+                  children: a.label
                 }
               ),
-              n.description && /* @__PURE__ */ e(
+              a.description && /* @__PURE__ */ e(
                 "span",
                 {
                   className: l(
                     "truncate text-xs",
-                    r ? "text-brand-foreground/70" : d ? "text-stroke-hairline" : "text-content-muted"
+                    r ? "text-brand-foreground/70" : d ? "text-stroke-hairline" : "text-secondary-foreground"
                   ),
-                  children: n.description
+                  children: a.description
                 }
               )
             ] }),
-            /* @__PURE__ */ e(xe, { source: n.source, isSelected: r }),
-            c && /* @__PURE__ */ e(
+            /* @__PURE__ */ e(xe, { source: a.source, isSelected: r }),
+            m && /* @__PURE__ */ e(
               X,
               {
-                keybinding: c,
+                keybinding: m,
                 isSelected: r,
                 external: d
               }
@@ -398,29 +398,29 @@ const V = a.memo(
 V.displayName = "CommandPaletteItem";
 function X({
   keybinding: o,
-  isSelected: n,
+  isSelected: a,
   external: r,
   className: i,
-  ...c
+  ...m
 }) {
-  const p = de(o);
+  const f = de(o);
   return /* @__PURE__ */ e(
     "span",
     {
       className: l("ms-auto flex items-center gap-0.5 shrink-0", i),
       "data-command-palette-shortcut": !0,
-      ...c,
-      children: p.map((f, d) => /* @__PURE__ */ e(
+      ...m,
+      children: f.map((p, d) => /* @__PURE__ */ e(
         "kbd",
         {
           className: l(
             "inline-flex min-w-[20px] items-center justify-center rounded px-1 h-[20px] text-[10px] font-mono leading-none",
             "transition-[color,background-color,border-color] duration-150 ease-out",
-            n ? "bg-canvas-elevated/20 text-brand-foreground border border-brand-foreground/30" : r ? "bg-canvas-muted text-stroke-hairline border border-stroke-hairline" : "bg-canvas-muted text-content-muted border border-stroke-hairline"
+            a ? "bg-canvas-elevated/20 text-brand-foreground border border-brand-foreground/30" : r ? "bg-canvas-muted text-stroke-hairline border border-stroke-hairline" : "bg-canvas-muted text-secondary-foreground border border-stroke-hairline"
           ),
-          children: f
+          children: p
         },
-        `${f}-${d}`
+        `${p}-${d}`
       ))
     }
   );
@@ -428,18 +428,18 @@ function X({
 X.displayName = "CommandPaletteShortcut";
 function J({
   className: o,
-  ...n
+  ...a
 }) {
-  const { emptyTitle: r, emptyDescription: i } = a.useContext(R);
-  return /* @__PURE__ */ m(
+  const { emptyTitle: r, emptyDescription: i } = n.useContext(R);
+  return /* @__PURE__ */ c(
     "div",
     {
       "data-command-palette-empty": !0,
       className: l(
-        "flex flex-col items-center justify-center py-12 text-center text-sm text-content-muted",
+        "flex flex-col items-center justify-center py-12 text-center text-sm text-secondary-foreground",
         o
       ),
-      ...n,
+      ...a,
       children: [
         /* @__PURE__ */ e(_, { className: "h-8 w-8 mb-3 text-stroke-hairline" }),
         /* @__PURE__ */ e("p", { className: "font-medium", children: r }),
@@ -451,49 +451,49 @@ function J({
 J.displayName = "CommandPaletteEmpty";
 function W({
   className: o,
-  ...n
+  ...a
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-command-palette-separator": !0,
       className: l("h-px bg-stroke-hairline mx-2", o),
-      ...n
+      ...a
     }
   );
 }
 W.displayName = "CommandPaletteSeparator";
 function Y({
   className: o,
-  ...n
+  ...a
 }) {
-  const { navigateLabel: r, runLabel: i, closeLabel: c, configureShortcutsLabel: p } = a.useContext(R);
-  return /* @__PURE__ */ m(
+  const { navigateLabel: r, runLabel: i, closeLabel: m, configureShortcutsLabel: f } = n.useContext(R);
+  return /* @__PURE__ */ c(
     "div",
     {
       "data-command-palette-footer": !0,
       className: l(
-        "flex items-center gap-4 border-t border-stroke-hairline px-4 py-2 text-[11px] text-content-muted",
+        "flex items-center gap-4 border-t border-stroke-hairline px-4 py-2 text-[11px] text-secondary-foreground",
         o
       ),
-      ...n,
+      ...a,
       children: [
-        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1", children: [
           /* @__PURE__ */ e(v, { keys: ["↑"], size: "sm", variant: "muted" }),
           /* @__PURE__ */ e(v, { keys: ["↓"], size: "sm", variant: "muted" }),
           /* @__PURE__ */ e("span", { children: r })
         ] }),
-        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1", children: [
           /* @__PURE__ */ e(v, { keys: ["↵"], size: "sm", variant: "muted" }),
           /* @__PURE__ */ e("span", { children: i })
         ] }),
-        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1", children: [
           /* @__PURE__ */ e(v, { keys: ["Escape"], size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e("span", { children: c })
+          /* @__PURE__ */ e("span", { children: m })
         ] }),
-        p && /* @__PURE__ */ m("span", { className: "ms-auto inline-flex items-center gap-1", children: [
+        f && /* @__PURE__ */ c("span", { className: "ms-auto inline-flex items-center gap-1", children: [
           /* @__PURE__ */ e(v, { keybinding: { key: "k", alt: !0 }, size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e("span", { children: p })
+          /* @__PURE__ */ e("span", { children: f })
         ] })
       ]
     }
@@ -501,7 +501,7 @@ function Y({
 }
 Y.displayName = "CommandPaletteFooter";
 export {
-  fe as CommandPalette,
+  pe as CommandPalette,
   J as CommandPaletteEmpty,
   Y as CommandPaletteFooter,
   L as CommandPaletteGroup,