impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.8

package/dist/components/flows/filter-strip/filter-tag-list.js

@@ -8,71 +8,71 @@ import { PopoverContent as $, Popover as O, PopoverTrigger as j } from "../../fe
 import { Button as P } from "../../primitives/button/button.js";
 import { Checkmark as A, Copy as R, Cross as F } from "impact-nova-icons";
 const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80 border-0 h-5 px-2 text-xs font-medium font-['Manrope'] cursor-pointer", I = ({
-  remainingValues: n,
+  remainingValues: s,
   viewAllTrigger: c = "expand",
   onViewAll: h,
   onItemRemove: u,
   isRemovable: N,
-  isCopyable: r = !1,
+  isCopyable: o = !1,
   externalCopyFunction: m
 }) => {
-  const [l, g] = C.useState(!1), [a, d] = C.useState(null), x = (o, i, s) => {
-    navigator.clipboard.writeText(String(i)), d(s), o.currentTarget.blur(), setTimeout(() => d(null), 1500);
-  }, v = l ? n : n.slice(0, 3), f = n.length > 3, p = () => {
-    c === "custom" ? h?.() : g(!0);
+  const [i, v] = C.useState(!1), [n, d] = C.useState(null), f = (r, l, a) => {
+    navigator.clipboard.writeText(String(l)), d(a), r.currentTarget.blur(), setTimeout(() => d(null), 1500);
+  }, g = i ? s : s.slice(0, 3), x = s.length > 3, p = () => {
+    c === "custom" ? h?.() : v(!0);
   };
   return /* @__PURE__ */ e(
     $,
     {
-      className: "w-[200px] p-0 rounded-[8px] bg-white shadow-[0_0_4px_0_rgba(0,0,0,0.12)] border-none",
+      className: "w-[200px] p-0 rounded-[8px] bg-canvas-elevated shadow-elevation-floating border-none",
       align: "start",
       sideOffset: 8,
-      onOpenAutoFocus: (o) => o.preventDefault(),
+      onOpenAutoFocus: (r) => r.preventDefault(),
       children: /* @__PURE__ */ t("div", { className: "flex flex-col py-2 px-[6px]", children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: `flex flex-col gap-1 mb-2 ${l ? "max-h-[180px] overflow-y-auto" : ""}`,
-            children: v.map((o, i) => /* @__PURE__ */ t(
+            className: `flex flex-col gap-1 mb-2 ${i ? "max-h-[180px] overflow-y-auto" : ""}`,
+            children: g.map((r, l) => /* @__PURE__ */ t(
               "div",
               {
                 className: "flex items-center justify-between text-[14px] font-medium leading-[20px] text-foreground px-3 py-2 overflow-hidden hover:bg-secondary rounded group shrink-0",
                 children: [
                   /* @__PURE__ */ t(b, { children: [
-                    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate", children: String(o) }) }),
-                    /* @__PURE__ */ e(y, { variant: "tertiary", side: "right", children: String(o) })
+                    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate", children: String(r) }) }),
+                    /* @__PURE__ */ e(y, { variant: "tertiary", side: "right", children: String(r) })
                   ] }),
                   /* @__PURE__ */ t("div", { className: "flex items-center shrink-0", children: [
-                    r && /* @__PURE__ */ e(
+                    o && /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: (s) => {
-                          s.stopPropagation(), m ? m({ e: s, val: o, index: i }) : x(s, o, i);
+                        onClick: (a) => {
+                          a.stopPropagation(), m ? m({ e: a, val: r, index: l }) : f(a, r, l);
                         },
-                        "aria-label": `Copy ${String(o)}`,
-                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-gray-400 hover:bg-black/5 hover:text-gray-600 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
-                        children: a === i ? /* @__PURE__ */ e(A, { size: 12, className: "text-green-500" }) : /* @__PURE__ */ e(R, { size: 12 })
+                        "aria-label": `Copy ${String(r)}`,
+                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-content-icon hover:bg-scrim-hover hover:text-content-secondary opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
+                        children: n === l ? /* @__PURE__ */ e(A, { size: 12, className: "text-success" }) : /* @__PURE__ */ e(R, { size: 12 })
                       }
                     ),
                     N && /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: (s) => {
-                          s.stopPropagation(), u(o);
+                        onClick: (a) => {
+                          a.stopPropagation(), u(r);
                         },
-                        "aria-label": `Remove ${String(o)}`,
-                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-gray-400 hover:bg-black/5 hover:text-gray-600 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
+                        "aria-label": `Remove ${String(r)}`,
+                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-content-icon hover:bg-scrim-hover hover:text-content-secondary opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
                         children: /* @__PURE__ */ e(F, { size: 12 })
                       }
                     )
                   ] })
                 ]
               },
-              i
+              l
             ))
           }
         ),
-        !l && f && /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
+        !i && x && /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ e("div", { className: "h-px bg-stroke-hairline w-full" }),
           /* @__PURE__ */ e(
             P,
@@ -81,47 +81,47 @@ const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80
               size: "md",
               className: "w-full justify-center",
               onClick: p,
-              children: c === "custom" ? "View all" : `View all (${n.length})`
+              children: c === "custom" ? "View all" : `View all (${s.length})`
             }
           )
         ] })
       ] })
     }
   );
-}, G = ({
-  filters: n,
+}, H = ({
+  filters: s,
   onFilterRemove: c,
   onOverflowClick: h,
   onViewAll: u
 }) => /* @__PURE__ */ e("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ e(
   S,
   {
-    items: n,
-    renderItem: (r, m) => {
-      const l = Array.isArray(r.value) ? r.value : [r.value], g = l.slice(0, 2), a = l.slice(2), d = !!r.overflow, x = r.overflow?.label ? r.overflow.label : r.overflow?.count ? `+${r.overflow.count}` : null, v = a.length > 0, f = d || v, p = `+${a.length}`;
+    items: s,
+    renderItem: (o, m) => {
+      const i = Array.isArray(o.value) ? o.value : [o.value], v = i.slice(0, 2), n = i.slice(2), d = !!o.overflow, f = o.overflow?.label ? o.overflow.label : o.overflow?.count ? `+${o.overflow.count}` : null, g = n.length > 0, x = d || g, p = `+${n.length}`;
       return /* @__PURE__ */ t("div", { className: "flex items-center px-1", children: [
         m > 0 && /* @__PURE__ */ e("div", { className: "mx-3 h-4 w-px bg-stroke-hairline shrink-0" }),
         /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ t("span", { className: "text-xs font-medium leading-[21px] text-secondary-foreground whitespace-nowrap", children: [
-            r.label,
-            r.required && /* @__PURE__ */ e("span", { className: "text-red-500 ms-0.5", children: "*" })
+            o.label,
+            o.required && /* @__PURE__ */ e("span", { className: "text-validation ms-0.5", children: "*" })
           ] }),
           /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ e(
               z,
               {
                 spacing: "sm",
-                tags: g.map((o) => ({
-                  label: String(o),
+                tags: v.map((r) => ({
+                  label: String(r),
                   variant: "secondary",
                   size: "md",
                   shape: "rounded",
-                  removable: r.removable,
-                  onRemove: () => c(r.id, o)
+                  removable: o.removable,
+                  onRemove: () => c(o.id, r)
                 }))
               }
             ),
-            f && (d ? /* @__PURE__ */ t(b, { children: [
+            x && (d ? /* @__PURE__ */ t(b, { children: [
               /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
                 k,
                 {
@@ -130,13 +130,13 @@ const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80
                   size: "md",
                   shape: "rounded",
                   className: T,
-                  "aria-label": `${r.overflow?.count || a.length} more filters for ${r.label}`,
-                  onClick: () => h?.(r.id),
-                  children: x || p
+                  "aria-label": `${o.overflow?.count || n.length} more filters for ${o.label}`,
+                  onClick: () => h?.(o.id),
+                  children: f || p
                 }
               ) }),
               /* @__PURE__ */ t(y, { variant: "tertiary", side: "top", children: [
-                r.overflow?.count || a.length,
+                o.overflow?.count || n.length,
                 " more filters"
               ] })
             ] }) : /* @__PURE__ */ t(O, { children: [
@@ -153,19 +153,19 @@ const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80
                   }
                 ) }) }),
                 /* @__PURE__ */ t(y, { variant: "tertiary", side: "top", children: [
-                  a.length,
+                  n.length,
                   " more filters"
                 ] })
               ] }),
               /* @__PURE__ */ e(
                 I,
                 {
-                  remainingValues: a,
-                  viewAllTrigger: r.viewAllTrigger,
+                  remainingValues: n,
+                  viewAllTrigger: o.viewAllTrigger,
                   onViewAll: u,
-                  onItemRemove: (o) => c(r.id, o),
-                  isRemovable: r.removable,
-                  isCopyable: r.copyable
+                  onItemRemove: (r) => c(o.id, r),
+                  isRemovable: o.removable,
+                  isCopyable: o.copyable
                 }
               )
             ] }))
@@ -179,5 +179,5 @@ const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80
 ) });
 export {
   I as FilterPopoverContent,
-  G as FilterTagList
+  H as FilterTagList
 };

package/dist/components/flows/wizard/wizard.js

@@ -12,24 +12,24 @@ const k = ({
   steps: s = [],
   children: i
 }) => {
-  const [d, x] = y({
+  const [d, u] = y({
     prop: r,
     defaultProp: e,
     onChange: o
-  }), [u, l] = a.useState([]), m = a.useCallback((b) => {
-    l((g) => g.includes(b) ? g : [...g, b].sort((v, w) => v - w));
+  }), [x, l] = a.useState([]), m = a.useCallback((b) => {
+    l((v) => v.includes(b) ? v : [...v, b].sort((g, w) => g - w));
   }, []), c = a.useCallback((b) => {
-    l((g) => g.filter((v) => v !== b));
-  }, []), f = t ?? (u.length > 0 ? Math.max(...u) : s.length), h = a.useMemo(
+    l((v) => v.filter((g) => g !== b));
+  }, []), f = t ?? (x.length > 0 ? Math.max(...x) : s.length), h = a.useMemo(
     () => ({
       value: d ?? e,
       totalSteps: f,
       steps: s,
-      setValue: x,
+      setValue: u,
       registerStep: m,
       unregisterStep: c
     }),
-    [d, e, f, s, x, m, c]
+    [d, e, f, s, u, m, c]
   );
   return /* @__PURE__ */ n(C.Provider, { value: h, children: i });
 };
@@ -51,7 +51,7 @@ const E = a.forwardRef(
   )
 );
 E.displayName = "WizardLayout";
-const _ = a.forwardRef(
+const M = a.forwardRef(
   ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
     "div",
     {
@@ -66,8 +66,8 @@ const _ = a.forwardRef(
     }
   )
 );
-_.displayName = "WizardSidebar";
-const M = a.forwardRef(
+M.displayName = "WizardSidebar";
+const D = a.forwardRef(
   ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
     "h1",
     {
@@ -78,8 +78,8 @@ const M = a.forwardRef(
     }
   )
 );
-M.displayName = "WizardTitle";
-const D = a.forwardRef(
+D.displayName = "WizardTitle";
+const _ = a.forwardRef(
   ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ n(
     "p",
     {
@@ -90,7 +90,7 @@ const D = a.forwardRef(
     }
   )
 );
-D.displayName = "WizardDescription";
+_.displayName = "WizardDescription";
 const L = a.forwardRef(
   ({ className: r, src: e, alt: o = "Wizard illustration", children: t, ...s }, i) => /* @__PURE__ */ n(
     "div",
@@ -131,10 +131,10 @@ const P = a.forwardRef(
 P.displayName = "WizardBody";
 const F = a.forwardRef(
   ({ className: r, interactive: e = !0, linear: o = !1, ...t }, s) => {
-    const { value: i, totalSteps: d, steps: x, setValue: u } = W();
+    const { value: i, totalSteps: d, steps: u, setValue: x } = W();
     if (d <= 0) return null;
     const l = (m) => {
-      e && (o && m > i || u(m));
+      e && (o && m > i || x(m));
     };
     return /* @__PURE__ */ n(
       "div",
@@ -145,12 +145,12 @@ const F = a.forwardRef(
         role: "list",
         ...t,
         children: Array.from({ length: d }, (m, c) => {
-          const f = c + 1, h = c === i - 1, b = c < i - 1, v = x[c]?.label ?? `Step ${f} of ${d}`, w = e && (!o || f <= i);
+          const f = c + 1, h = c === i - 1, b = c < i - 1, g = u[c]?.label ?? `Step ${f} of ${d}`, w = e && (!o || f <= i);
           return /* @__PURE__ */ n(
             "div",
             {
               role: "listitem",
-              "aria-label": v,
+              "aria-label": g,
               "aria-current": h ? "step" : void 0,
               tabIndex: w ? 0 : void 0,
               onClick: () => l(f),
@@ -197,31 +197,31 @@ const T = a.forwardRef(
 T.displayName = "WizardStepDescription";
 const j = a.forwardRef(
   ({ className: r, children: e, ...o }, t) => {
-    const { edges: s, setEdges: i } = N(), d = a.useRef(null), x = a.useCallback(
+    const { edges: s, setEdges: i } = N(), d = a.useRef(null), u = a.useCallback(
       (l) => {
         d.current = l, typeof t == "function" ? t(l) : t && (t.current = l);
       },
       [t]
-    ), u = a.useCallback(() => {
+    ), x = a.useCallback(() => {
       const l = d.current;
       if (!l) return;
-      const { scrollTop: m, scrollHeight: c, clientHeight: f } = l, h = 1, b = m > h, g = m + f < c - h;
-      i((v) => v.top === b && v.bottom === g ? v : { top: b, bottom: g });
+      const { scrollTop: m, scrollHeight: c, clientHeight: f } = l, h = 1, b = m > h, v = m + f < c - h;
+      i((g) => g.top === b && g.bottom === v ? g : { top: b, bottom: v });
     }, [i]);
     return a.useEffect(() => {
       const l = d.current;
       if (!l) return;
       const m = () => {
-        requestAnimationFrame(u);
+        requestAnimationFrame(x);
       };
-      m(), l.addEventListener("scroll", u, { passive: !0 });
+      m(), l.addEventListener("scroll", x, { passive: !0 });
       const c = new ResizeObserver(m);
       c.observe(l);
       const f = l.firstElementChild;
       return f && c.observe(f), () => {
-        l.removeEventListener("scroll", u), c.disconnect();
+        l.removeEventListener("scroll", x), c.disconnect();
       };
-    }, [u, e]), /* @__PURE__ */ n(
+    }, [x, e]), /* @__PURE__ */ n(
       "div",
       {
         className: p(
@@ -234,7 +234,7 @@ const j = a.forwardRef(
         children: /* @__PURE__ */ n(
           "div",
           {
-            ref: x,
+            ref: u,
             className: p("flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-0.5", r),
             "data-slot": "content",
             ...o,
@@ -248,8 +248,8 @@ const j = a.forwardRef(
 j.displayName = "WizardContent";
 const A = a.forwardRef(
   ({ className: r, value: e, children: o, ...t }, s) => {
-    const { value: i, registerStep: d, unregisterStep: x } = W();
-    return a.useEffect(() => (d(e), () => x(e)), [e, d, x]), i !== e ? null : /* @__PURE__ */ n("div", { ref: s, className: p(r), "data-step": e, ...t, children: o });
+    const { value: i, registerStep: d, unregisterStep: u } = W();
+    return a.useEffect(() => (d(e), () => u(e)), [e, d, u]), i !== e ? null : /* @__PURE__ */ n("div", { ref: s, className: p(r), "data-step": e, ...t, children: o });
   }
 );
 A.displayName = "WizardStep";
@@ -262,7 +262,7 @@ const B = a.forwardRef(
         ref: t,
         className: p(
           "relative z-10 mt-auto flex shrink-0 items-center justify-between bg-canvas-elevated pt-6 pb-[27px] transition-[box-shadow,border-color] duration-200",
-          s.bottom && "border-t border-stroke-hairline shadow-[0_-4px_8px_-6px_rgba(13,21,44,0.08)]",
+          s.bottom && "border-t border-stroke-hairline shadow-elevation-wizard-footer",
           r
         ),
         "data-slot": "footer",
@@ -277,15 +277,15 @@ B.displayName = "WizardFooter";
 export {
   P as WizardBody,
   j as WizardContent,
-  D as WizardDescription,
+  _ as WizardDescription,
   B as WizardFooter,
   H as WizardHeader,
   E as WizardLayout,
   L as WizardMedia,
   F as WizardProgress,
   k as WizardRoot,
-  _ as WizardSidebar,
+  M as WizardSidebar,
   A as WizardStep,
   T as WizardStepDescription,
-  M as WizardTitle
+  D as WizardTitle
 };

package/dist/components/forms/choice-card/choice-card.d.ts

@@ -9,9 +9,9 @@ export declare function useChoiceCardGroup(): {
 };
 declare const ChoiceCardGroup: React.FC<ChoiceCardGroupProps>;
 declare const ChoiceCard: React.ForwardRefExoticComponent<ChoiceCardProps & React.RefAttributes<HTMLDivElement>>;
-declare const ChoiceCardIndicator: React.FC<{
+declare const ChoiceCardIndicator: React.ForwardRefExoticComponent<{
     className?: string;
-}>;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const ChoiceCardContent: React.ForwardRefExoticComponent<ChoiceCardContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const ChoiceCardMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const ChoiceCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;