impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/stepper.js

@@ -1,10 +1,10 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import * as h from "react";
-import { cva as m } from "class-variance-authority";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import * as v from "react";
+import { cva as u } from "class-variance-authority";
 import { Check as V } from "lucide-react";
-import { cn as a } from "../../lib/utils.js";
-import { useImpactNovaI18n as j } from "../../i18n/ImpactNovaI18nContext.js";
-const I = m("flex w-full gap-0", {
+import { cn as r } from "../../lib/utils.js";
+import { useImpactNovaI18n as k } from "../../i18n/ImpactNovaI18nContext.js";
+const j = u("flex w-full gap-0", {
   variants: {
     orientation: {
       horizontal: "flex-row items-center",
@@ -14,12 +14,12 @@ const I = m("flex w-full gap-0", {
   defaultVariants: {
     orientation: "horizontal"
   }
-}), _ = m(
+}), I = u(
   "relative flex items-center transition-all duration-200",
   {
     variants: {
       orientation: {
-        horizontal: "h-[44px] px-3 rounded-lg border-b-2 bg-white shadow-[0px_2px_8px_0px_rgba(0,0,0,0.05)] flex-none",
+        horizontal: "h-[44px] px-3 rounded-lg border-b-2 bg-canvas-elevated shadow-elevation-card flex-none",
         vertical: "w-full py-4 px-3 mb-2 rounded-lg border-none"
       },
       status: {
@@ -33,33 +33,33 @@ const I = m("flex w-full gap-0", {
       {
         orientation: "horizontal",
         status: "active",
-        className: "border-primary after:absolute after:bottom-[-9.5px] after:left-[18px] after:h-0 after:w-0 after:border-l-[6.5px] after:border-r-[6.5px] after:border-t-[10px] after:border-l-transparent after:border-r-transparent after:border-t-primary after:content-['']"
+        className: "border-brand after:absolute after:bottom-[-9.5px] after:left-[18px] after:h-0 after:w-0 after:border-l-[6.5px] after:border-r-[6.5px] after:border-t-[10px] after:border-l-transparent after:border-r-transparent after:border-t-brand after:content-['']"
       },
       {
         orientation: "horizontal",
         status: "completed",
-        className: "border-[#108431]"
+        className: "border-success"
       },
       {
         orientation: "horizontal",
         status: "default",
-        className: "border-[#d9dde7]"
+        className: "border-stroke-hairline"
       },
       // Vertical Orientation Status
       {
         orientation: "vertical",
         status: "active",
-        className: "bg-[#eff2fa] before:absolute before:left-[-8px] before:top-1/2 before:h-8 before:w-[4px] before:-translate-y-1/2 before:bg-primary before:rounded-full before:content-['']"
+        className: "bg-canvas-tint before:absolute before:left-[-8px] before:top-1/2 before:h-8 before:w-[4px] before:-translate-y-1/2 before:bg-brand before:rounded-full before:content-['']"
       },
       {
         orientation: "vertical",
         status: "completed",
-        className: "bg-[#ecf7ef]"
+        className: "bg-feedback-success-surface"
       },
       {
         orientation: "vertical",
         status: "default",
-        className: "bg-[#f4f6f9]"
+        className: "bg-secondary"
       }
     ],
     defaultVariants: {
@@ -67,74 +67,74 @@ const I = m("flex w-full gap-0", {
       status: "default"
     }
   }
-), D = m(
+), D = u(
   "flex h-6 w-6 shrink-0 items-center justify-center rounded-[8px] text-xs font-extrabold transition-all",
   {
     variants: {
       status: {
-        default: "bg-[#d9dde7] text-[#7a8294]",
-        active: "bg-primary text-primary-foreground",
-        completed: "bg-[#3bb273] text-white"
+        default: "bg-muted text-navigation-muted",
+        active: "bg-brand text-brand-foreground",
+        completed: "bg-success text-success-foreground"
       }
     },
     defaultVariants: {
       status: "default"
     }
   }
-), k = h.forwardRef(
-  ({ className: v, currentStep: b, steps: d, orientation: e = "horizontal", onStepClick: o, ...g }, w) => {
-    const { t: y } = j(), N = d.length;
+), A = v.forwardRef(
+  ({ className: h, currentStep: p, steps: c, orientation: e = "horizontal", onStepClick: o, ...g }, w) => {
+    const { t: N } = k(), y = c.length;
     return /* @__PURE__ */ t(
       "div",
       {
         ref: w,
-        className: a(I({ orientation: e }), v),
+        className: r(j({ orientation: e }), h),
         "data-orientation": e,
         role: "list",
         ...g,
-        children: d.map((c, s) => {
-          const i = typeof c == "string" ? { label: c } : c, l = s + 1, u = l === b, x = l < b, n = i.disabled, r = x ? "completed" : u ? "active" : "default", z = y("stepper.stepOfTotal", { current: l, total: N });
-          return /* @__PURE__ */ p(h.Fragment, { children: [
-            /* @__PURE__ */ p(
+        children: c.map((d, s) => {
+          const n = typeof d == "string" ? { label: d } : d, l = s + 1, b = l === p, x = l < p, i = n.disabled, a = x ? "completed" : b ? "active" : "default", z = N("stepper.stepOfTotal", { current: l, total: y });
+          return /* @__PURE__ */ m(v.Fragment, { children: [
+            /* @__PURE__ */ m(
               "div",
               {
                 role: "listitem",
-                onClick: () => !n && o?.(s),
+                onClick: () => !i && o?.(s),
                 "aria-label": z,
-                "aria-current": u ? "step" : void 0,
-                tabIndex: o && !n ? 0 : void 0,
-                onKeyDown: o && !n ? (f) => {
+                "aria-current": b ? "step" : void 0,
+                tabIndex: o && !i ? 0 : void 0,
+                onKeyDown: o && !i ? (f) => {
                   (f.key === "Enter" || f.key === " ") && (f.preventDefault(), o(s));
                 } : void 0,
                 "data-step": l,
-                "data-status": r,
-                "data-disabled": n || void 0,
-                className: a(
-                  _({ orientation: e, status: r }),
+                "data-status": a,
+                "data-disabled": i || void 0,
+                className: r(
+                  I({ orientation: e, status: a }),
                   e === "horizontal" && "min-w-[140px]",
-                  n ? "opacity-80 cursor-not-allowed" : o ? "cursor-pointer" : "cursor-default"
+                  i ? "opacity-80 cursor-not-allowed" : o ? "cursor-pointer" : "cursor-default"
                 ),
                 children: [
-                  /* @__PURE__ */ t("div", { className: a(D({ status: r }), "mr-2"), children: x ? /* @__PURE__ */ t(V, { className: "h-4 w-4 stroke-[3px]" }) : /* @__PURE__ */ t("span", { children: i.icon || l }) }),
-                  /* @__PURE__ */ p("div", { className: "flex flex-col justify-center overflow-hidden", children: [
-                    /* @__PURE__ */ t("div", { className: a(
+                  /* @__PURE__ */ t("div", { className: r(D({ status: a }), "mr-2"), children: x ? /* @__PURE__ */ t(V, { className: "h-4 w-4 stroke-[3px]" }) : /* @__PURE__ */ t("span", { children: n.icon || l }) }),
+                  /* @__PURE__ */ m("div", { className: "flex flex-col justify-center overflow-hidden", children: [
+                    /* @__PURE__ */ t("div", { className: r(
                       "text-[14px] leading-tight font-medium truncate max-w-[200px]",
-                      r === "completed" ? "text-[#3bb273]" : "text-foreground",
-                      r === "active" && e === "vertical" ? "text-primary" : ""
-                    ), children: i.label }),
-                    i.description && /* @__PURE__ */ t("div", { className: a(
+                      a === "completed" ? "text-success" : "text-content",
+                      a === "active" && e === "vertical" ? "text-brand" : ""
+                    ), children: n.label }),
+                    n.description && /* @__PURE__ */ t("div", { className: r(
                       "text-[12px] leading-tight mt-0.5 truncate max-w-[200px]",
-                      r === "completed" ? "text-[#3bb273]" : "text-muted-foreground"
-                    ), children: i.description })
+                      a === "completed" ? "text-success" : "text-content-muted"
+                    ), children: n.description })
                   ] })
                 ]
               }
             ),
-            s < d.length - 1 && /* @__PURE__ */ t(
+            s < c.length - 1 && /* @__PURE__ */ t(
               "div",
               {
-                className: a(
-                  "border-t border-dashed border-[#d9dde7] transition-colors",
+                className: r(
+                  "border-t border-dashed border-stroke-hairline transition-colors",
                   e === "horizontal" ? "flex-1 min-w-[24px] mx-1 self-center" : "h-6 w-0 border-l ml-[12px] my-[-4px]"
                 )
               }
@@ -145,9 +145,9 @@ const I = m("flex w-full gap-0", {
     );
   }
 );
-k.displayName = "Stepper";
+A.displayName = "Stepper";
 export {
-  k as Stepper,
-  _ as stepVariants,
-  I as stepperVariants
+  A as Stepper,
+  I as stepVariants,
+  j as stepperVariants
 };

package/dist/components/ui/switch.js

@@ -1,29 +1,29 @@
 import { jsx as t } from "react/jsx-runtime";
-import * as s from "react";
+import * as n from "react";
 import * as e from "@radix-ui/react-switch";
 import { cn as a } from "../../lib/utils.js";
-const c = s.forwardRef(({ className: o, ...r }, i) => /* @__PURE__ */ t(
+const r = n.forwardRef(({ className: o, ...s }, i) => /* @__PURE__ */ t(
   e.Root,
   {
     className: a(
-      "peer inline-flex h-[16px] w-[24px] shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#eceefd] data-[state=checked]:border-accordion-bg data-[state=unchecked]:bg-white data-[state=unchecked]:border-light-blue",
+      "peer inline-flex h-[16px] w-[24px] shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand-tint data-[state=checked]:border-canvas-accordion data-[state=unchecked]:bg-canvas-elevated data-[state=unchecked]:border-canvas-tint",
       o
     ),
-    ...r,
+    ...s,
     ref: i,
     "data-component": "switch-root",
     children: /* @__PURE__ */ t(
       e.Thumb,
       {
         className: a(
-          "pointer-events-none block h-[10px] w-[10px] rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[10px] data-[state=unchecked]:translate-x-[2px] data-[state=checked]:bg-primary data-[state=unchecked]:bg-tertiary-border"
+          "pointer-events-none block h-[10px] w-[10px] rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[10px] data-[state=unchecked]:translate-x-[2px] data-[state=checked]:bg-brand data-[state=unchecked]:bg-stroke-field"
         ),
         "data-component": "switch-thumb"
       }
     )
   }
 ));
-c.displayName = e.Root.displayName;
+r.displayName = e.Root.displayName;
 export {
-  c as Switch
+  r as Switch
 };

package/dist/components/ui/tabs.js

@@ -1,60 +1,60 @@
 import { jsx as r, jsxs as u, Fragment as j } from "react/jsx-runtime";
-import * as i from "react";
+import * as s from "react";
 import * as c from "@radix-ui/react-tabs";
 import { cn as p } from "../../lib/utils.js";
-import { Tooltip as W, TooltipTrigger as z, TooltipContent as D } from "./tooltip.js";
-const N = i.createContext({
+import { Tooltip as W, TooltipTrigger as z, TooltipContent as I } from "./tooltip.js";
+const N = s.createContext({
   variant: "line",
   size: "default"
-}), I = (t, a) => {
-  const e = t.split(/\s+/);
-  return e.length <= a ? t : e.slice(0, a).join(" ") + "...";
-}, L = i.forwardRef(({ variant: t = "line", size: a = "default", hideInactiveLabel: e = !1, tooltipClassName: s, maxWords: o, value: n, defaultValue: x, onValueChange: g, ...l }, v) => {
-  const [y, b] = i.useState(n || x);
-  i.useEffect(() => {
-    n !== void 0 && b(n);
-  }, [n]);
+}), L = (e, a) => {
+  const t = e.split(/\s+/);
+  return t.length <= a ? e : t.slice(0, a).join(" ") + "...";
+}, S = s.forwardRef(({ variant: e = "line", size: a = "default", hideInactiveLabel: t = !1, tooltipClassName: n, maxWords: o, value: i, defaultValue: x, onValueChange: g, ...d }, h) => {
+  const [y, b] = s.useState(i || x);
+  s.useEffect(() => {
+    i !== void 0 && b(i);
+  }, [i]);
   const w = (f) => {
-    n === void 0 && b(f), g?.(f);
+    i === void 0 && b(f), g?.(f);
   };
-  return /* @__PURE__ */ r(N.Provider, { value: { variant: t, size: a, activeValue: y, hideInactiveLabel: e, tooltipClassName: s, maxWords: o }, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(N.Provider, { value: { variant: e, size: a, activeValue: y, hideInactiveLabel: t, tooltipClassName: n, maxWords: o }, children: /* @__PURE__ */ r(
     c.Root,
     {
-      ref: v,
-      value: n,
+      ref: h,
+      value: i,
       defaultValue: x,
       onValueChange: w,
       "data-component": "tabs",
-      "data-variant": t,
-      ...l
+      "data-variant": e,
+      ...d
     }
   ) });
 });
-L.displayName = c.Root.displayName;
-const E = i.forwardRef(({ className: t, ...a }, e) => {
-  const { variant: s } = i.useContext(N);
+S.displayName = c.Root.displayName;
+const F = s.forwardRef(({ className: e, ...a }, t) => {
+  const { variant: n } = s.useContext(N);
   return /* @__PURE__ */ r(
     c.List,
     {
-      ref: e,
+      ref: t,
       "data-tabs": "list",
       className: p(
         "inline-flex items-center justify-center rounded-lg",
-        s === "line" && "h-10 bg-white border w-full justify-start gap-2 px-2 shrink-0 py-0",
-        s === "pill" && "h-10 p-1 bg-[#eceefd] text-[#4259ee] gap-1",
-        s === "outline" && "bg-transparent gap-2 p-0 w-full justify-start",
-        s === "box" && "h-auto bg-transparent border-0 w-full justify-start gap-[16px] p-0 shrink-0",
-        t
+        n === "line" && "h-[38px] bg-canvas-elevated border w-full justify-start gap-2 px-2 shrink-0 py-0",
+        n === "pill" && "h-[38px] p-1 bg-brand-tint text-brand gap-1",
+        n === "outline" && "bg-transparent gap-2 p-0 w-full justify-start",
+        n === "box" && "h-auto bg-transparent border-0 w-full justify-start gap-[16px] p-0 shrink-0",
+        e
       ),
       ...a
     }
   );
-}), S = i.forwardRef(({ className: t, icon: a, children: e, maxWords: s, activeColor: o, style: n, ...x }, g) => {
-  const { variant: l, size: v, activeValue: y, hideInactiveLabel: b, tooltipClassName: w, maxWords: f } = i.useContext(N), m = s ?? f, h = y === x.value, T = typeof e == "string", R = T && m ? I(e, m) : e, k = T && m && e.split(/\s+/).length > m, V = b && !h || k, d = { ...n };
-  l === "box" && o && (d["--tab-border"] = o.border, d["--tab-bg"] = o.bg, d["--tab-text"] = o.text, d["--tab-hover-border"] = `color-mix(in srgb, ${o.border} 40%, transparent)`, d["--tab-hover-bg"] = `color-mix(in srgb, ${o.bg} 50%, white)`, d["--tab-hover-text"] = `color-mix(in srgb, ${o.text} 60%, #60697D)`);
-  const C = l === "box" ? /* @__PURE__ */ u(j, { children: [
-    e,
-    h && /* @__PURE__ */ r(
+}), $ = s.forwardRef(({ className: e, icon: a, children: t, maxWords: n, activeColor: o, style: i, ...x }, g) => {
+  const { variant: d, size: h, activeValue: y, hideInactiveLabel: b, tooltipClassName: w, maxWords: f } = s.useContext(N), v = n ?? f, m = y === x.value, T = typeof t == "string", R = T && v ? L(t, v) : t, k = T && v && t.split(/\s+/).length > v, V = b && !m || k, l = { ...i };
+  d === "box" && o && (l["--tab-border"] = o.border, l["--tab-bg"] = o.bg, l["--tab-text"] = o.text, l["--tab-hover-border"] = `color-mix(in srgb, ${o.border} 40%, transparent)`, l["--tab-hover-bg"] = `color-mix(in srgb, ${o.bg} 50%, white)`, l["--tab-hover-text"] = `color-mix(in srgb, ${o.text} 60%, var(--color-foreground-tertiary))`);
+  const C = d === "box" ? /* @__PURE__ */ u(j, { children: [
+    t,
+    m && /* @__PURE__ */ r(
       "span",
       {
         className: "absolute -bottom-[5.5px] left-1/2 -translate-x-1/2 w-[11px] h-[11px] rotate-45 border-b border-r",
@@ -62,8 +62,8 @@ const E = i.forwardRef(({ className: t, ...a }, e) => {
       }
     )
   ] }) : /* @__PURE__ */ u(j, { children: [
-    a && /* @__PURE__ */ r("span", { className: p("h-4 w-4 shrink-0", !b || h ? "mr-2" : "mr-0"), children: a }),
-    /* @__PURE__ */ r("span", { className: p(b && !h && "sr-only"), children: R })
+    a && /* @__PURE__ */ r("span", { className: p("h-4 w-4 shrink-0", !b || m ? "mr-2" : "mr-0"), children: a }),
+    /* @__PURE__ */ r("span", { className: p(b && !m && "sr-only"), children: R })
   ] });
   return /* @__PURE__ */ r(
     c.Trigger,
@@ -72,65 +72,65 @@ const E = i.forwardRef(({ className: t, ...a }, e) => {
       "data-tabs": "trigger",
       className: p(
         "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
-        l === "line" && [
-          "h-full rounded-none border-b-2 border-transparent px-1 text-[13px] font-medium capitalize text-[#60697d] -mb-[1px]",
-          "data-[state=active]:border-[#4259ee] data-[state=active]:text-[#4259ee] data-[state=active]:shadow-none",
-          "hover:text-[#4259ee] py-1.5 px-3"
+        d === "line" && [
+          "h-full rounded-none border-b-2 border-transparent px-1 text-[13px] font-medium capitalize text-content-tertiary -mb-[1px]",
+          "data-[state=active]:border-brand data-[state=active]:text-brand data-[state=active]:shadow-none",
+          "hover:text-brand py-1.5 px-3"
         ],
-        l === "pill" && [
-          "rounded-md text-[#4259ee]/70 text-[13px]",
-          "data-[state=active]:bg-white data-[state=active]:text-[#4259ee] data-[state=active]:shadow-sm",
+        d === "pill" && [
+          "rounded-md text-brand/70 text-[13px]",
+          "data-[state=active]:bg-canvas-elevated data-[state=active]:text-brand data-[state=active]:shadow-sm",
           "py-1.5 px-3"
         ],
-        l === "outline" && [
-          "rounded-full border border-[#5f6673] bg-white text-[#5f6673] font-['Manrope']",
-          "hover:bg-slate-50 hover:text-[#1f2b4d]",
-          "data-[state=active]:border-[#4259ee] data-[state=active]:text-[#4259ee]",
-          v === "sm" ? "h-[24px] px-[8px] py-[2px] text-xs" : "h-9 px-4 py-2"
+        d === "outline" && [
+          "rounded-full border border-content-badge bg-canvas-elevated text-content-badge font-['Manrope']",
+          "hover:bg-canvas-muted hover:text-content",
+          "data-[state=active]:border-brand data-[state=active]:text-brand",
+          h === "sm" ? "h-[24px] px-[8px] py-[2px] text-xs" : "h-9 px-4 py-2"
         ],
-        l === "box" && [
-          "group flex flex-row items-center justify-between min-w-[231px] w-fit gap-4 min-h-[45px] h-auto py-2 px-[16px] rounded-[8px] bg-white text-[#60697D] transition-none overflow-visible",
-          "border border-[#C3C8D4]",
+        d === "box" && [
+          "group flex flex-row items-center justify-between min-w-[231px] w-fit gap-4 min-h-[45px] h-auto py-2 px-[16px] rounded-[8px] bg-canvas-elevated text-content-tertiary transition-none overflow-visible",
+          "border border-stroke-field",
           "text-[16px]",
-          "hover:border-[color:var(--tab-hover-border,#c5cbee)] hover:bg-[color:var(--tab-hover-bg,#f0f1fd)] hover:text-[color:var(--tab-hover-text,#7a84b8)]",
-          "data-[state=active]:border-[color:var(--tab-border,#4259ee)]",
-          "data-[state=active]:bg-[color:var(--tab-bg,#f8f9fb)]",
-          "data-[state=active]:text-[color:var(--tab-text,#3649c6)]"
+          "hover:border-[color:var(--tab-hover-border,var(--color-tab-hover-border))] hover:bg-[color:var(--tab-hover-bg,var(--color-tab-hover-surface))] hover:text-[color:var(--tab-hover-text,var(--color-tab-hover-foreground))]",
+          "data-[state=active]:border-[color:var(--tab-border,var(--color-tab-active-border))]",
+          "data-[state=active]:bg-[color:var(--tab-bg,var(--color-tab-active-surface))]",
+          "data-[state=active]:text-[color:var(--tab-text,var(--color-tab-active-foreground))]"
         ],
-        t
+        e
       ),
-      style: d,
+      style: l,
       ...x,
       children: V ? /* @__PURE__ */ u(W, { children: [
         /* @__PURE__ */ r(z, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "inline-flex items-center justify-center h-full w-full", children: C }) }),
-        /* @__PURE__ */ r(D, { variant: "tertiary", className: w, children: e })
+        /* @__PURE__ */ r(I, { variant: "tertiary", className: w, children: t })
       ] }) : C
     }
   );
 });
-S.displayName = c.Trigger.displayName;
-const $ = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+$.displayName = c.Trigger.displayName;
+const M = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r(
   c.Content,
   {
-    ref: e,
+    ref: t,
     "data-tabs": "content",
     className: p(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      t
+      "mt-2 ring-offset-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+      e
     ),
     ...a
   }
 ));
-$.displayName = c.Content.displayName;
-const M = i.forwardRef(({ className: t, activeImage: a, inactiveImage: e, ...s }, o) => /* @__PURE__ */ u("div", { ref: o, className: p("relative flex items-center justify-center shrink-0", t), ...s, children: [
-  /* @__PURE__ */ r("div", { className: "flex group-data-[state=active]:hidden", children: e }),
+M.displayName = c.Content.displayName;
+const P = s.forwardRef(({ className: e, activeImage: a, inactiveImage: t, ...n }, o) => /* @__PURE__ */ u("div", { ref: o, className: p("relative flex items-center justify-center shrink-0", e), ...n, children: [
+  /* @__PURE__ */ r("div", { className: "flex group-data-[state=active]:hidden", children: t }),
   /* @__PURE__ */ r("div", { className: "hidden group-data-[state=active]:flex", children: a })
 ] }));
-M.displayName = "TabsImage";
+P.displayName = "TabsImage";
 export {
-  L as Tabs,
-  $ as TabsContent,
-  M as TabsImage,
-  E as TabsList,
-  S as TabsTrigger
+  S as Tabs,
+  M as TabsContent,
+  P as TabsImage,
+  F as TabsList,
+  $ as TabsTrigger
 };

package/dist/components/ui/tag-group.d.ts

@@ -16,6 +16,7 @@ export interface TagGroupProps extends React.HTMLAttributes<HTMLDivElement>, Var
         rightIcon?: TagProps["rightIcon"];
         removable?: TagProps["removable"];
         onRemove?: TagProps["onRemove"];
+        className?: TagProps["className"];
     }>;
     asChild?: boolean;
 }

package/dist/components/ui/tag-group.js

@@ -27,26 +27,27 @@ const w = d("flex", {
     wrap: "nowrap"
   }
 }), g = c.forwardRef(
-  ({ className: n, spacing: a, orientation: r, wrap: p, tags: t, asChild: i = !1, ...m }, l) => /* @__PURE__ */ e(
-    i ? f : "div",
+  ({ className: n, spacing: o, orientation: r, wrap: p, tags: i, asChild: t = !1, ...m }, l) => /* @__PURE__ */ e(
+    t ? f : "div",
     {
       ref: l,
-      className: v(w({ spacing: a, orientation: r, wrap: p }), n),
+      className: v(w({ spacing: o, orientation: r, wrap: p }), n),
       "data-component": "tag-group",
-      "data-spacing": a ?? "md",
+      "data-spacing": o ?? "md",
       "data-orientation": r ?? "horizontal",
       ...m,
-      children: t.map((o, s) => /* @__PURE__ */ e(
+      children: i.map((a, s) => /* @__PURE__ */ e(
         h,
         {
-          variant: o.variant,
-          size: o.size,
-          shape: o.shape,
-          leftIcon: o.leftIcon,
-          rightIcon: o.rightIcon,
-          removable: o.removable,
-          onRemove: o.onRemove,
-          children: o.label
+          variant: a.variant,
+          size: a.size,
+          shape: a.shape,
+          leftIcon: a.leftIcon,
+          rightIcon: a.rightIcon,
+          removable: a.removable,
+          onRemove: a.onRemove,
+          className: a.className,
+          children: a.label
         },
         s
       ))

package/dist/components/ui/tag.js

@@ -1,26 +1,26 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import * as x from "react";
-import { Slot as h } from "@radix-ui/react-slot";
-import { cva as u } from "class-variance-authority";
-import { X as v } from "lucide-react";
-import { Button as w } from "./button.js";
-import { cn as y } from "../../lib/utils.js";
-import { useImpactNovaI18n as N } from "../../i18n/ImpactNovaI18nContext.js";
-const j = u(
-  "inline-flex items-center justify-center rounded-full transition-colors whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import * as f from "react";
+import { Slot as v } from "@radix-ui/react-slot";
+import { cva as h } from "class-variance-authority";
+import { X as x } from "lucide-react";
+import { Button as y } from "./button.js";
+import { cn as k } from "../../lib/utils.js";
+import { useImpactNovaI18n as w } from "../../i18n/ImpactNovaI18nContext.js";
+const N = h(
+  "inline-flex items-center justify-center rounded-full transition-colors whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "bg-primary text-white hover:bg-primary/90",
-        secondary: "bg-[#eceefd] text-[#1f2b4d] hover:bg-[#dfe4fd]",
-        outline: "border border-[#b3bdf8] bg-white text-[#60697d] hover:bg-slate-50",
-        tertiary: "bg-[#f1f2f4] text-[#1f2b4d] hover:bg-[#e2e4e9]",
-        ghost: "bg-transparent text-[#60697d] hover:bg-slate-100",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        success: "bg-green-100 text-green-700 hover:bg-green-200 border border-green-200",
-        warning: "bg-yellow-100 text-yellow-700 hover:bg-yellow-200 border border-yellow-200",
-        info: "bg-[#eceefd] text-[#4259ee] hover:bg-[#dfe4fd] border border-[#b3bdf8]",
-        choice: "bg-[#00000014] text-[#60697d] border border-[#b3bdf8] hover:bg-white hover:shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)]"
+        default: "bg-brand text-brand-foreground hover:bg-brand/90",
+        secondary: "bg-accent text-content hover:bg-brand-tint-hover",
+        outline: "border border-stroke-accent bg-canvas-elevated text-content-tertiary hover:bg-canvas-muted",
+        tertiary: "bg-secondary text-content hover:bg-muted",
+        ghost: "bg-transparent text-content-tertiary hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+        success: "bg-feedback-success-surface text-success hover:bg-success/15 border border-success-border",
+        warning: "bg-feedback-warning-surface text-content hover:bg-warning/15 border border-warning-border",
+        info: "bg-brand-tint text-brand hover:bg-brand-tint-hover border border-stroke-accent",
+        choice: "bg-content/[0.08] text-content-tertiary border border-stroke-accent hover:bg-canvas-elevated hover:shadow-elevation-floating"
       },
       size: {
         sm: "h-[22px] px-2 text-[12px] leading-[15px]",
@@ -39,36 +39,36 @@ const j = u(
       shape: "pill"
     }
   }
-), k = x.forwardRef(
-  ({ className: i, variant: r, size: t, shape: o, leftIcon: a, rightIcon: n, removable: s, onRemove: d, asChild: l = !1, children: p, ...f }, g) => {
-    const { t: b } = N();
-    return /* @__PURE__ */ m(
-      l ? h : "span",
+), j = f.forwardRef(
+  ({ className: s, variant: t, size: r, shape: n, leftIcon: o, rightIcon: a, removable: i, onRemove: c, asChild: d = !1, children: l, ...b }, g) => {
+    const { t: m } = w();
+    return /* @__PURE__ */ p(
+      d ? v : "span",
       {
         ref: g,
-        className: y(j({ variant: r, size: t, shape: o }), i),
+        className: k(N({ variant: t, size: r, shape: n }), s),
         "data-component": "tag",
-        "data-variant": r ?? "default",
-        "data-size": t ?? "md",
-        "data-shape": o ?? "pill",
-        ...f,
+        "data-variant": t ?? "default",
+        "data-size": r ?? "md",
+        "data-shape": n ?? "pill",
+        ...b,
         children: [
-          a && /* @__PURE__ */ e("span", { className: "mr-1.5 flex shrink-0 items-center justify-center", children: a }),
-          p,
-          n && /* @__PURE__ */ e("span", { className: "ml-1.5 flex shrink-0 items-center justify-center", children: n }),
-          s && /* @__PURE__ */ e(
-            w,
+          o && /* @__PURE__ */ e("span", { className: "mr-1.5 flex shrink-0 items-center justify-center", children: o }),
+          l,
+          a && /* @__PURE__ */ e("span", { className: "ml-1.5 flex shrink-0 items-center justify-center", children: a }),
+          i && /* @__PURE__ */ e(
+            y,
             {
               type: "button",
               variant: "ghost",
               size: "icon",
-              "aria-label": b("aria.remove"),
-              onClick: (c) => {
-                c.stopPropagation(), d?.();
+              "aria-label": m("aria.remove"),
+              onClick: (u) => {
+                u.stopPropagation(), c?.();
               },
-              className: "ml-1.5 h-4 w-4 shrink-0 rounded-full hover:bg-black/10 transition-colors p-0 [&_svg]:size-3",
+              className: "ml-1.5 h-4 w-4 shrink-0 rounded-full hover:bg-content/10 transition-colors p-0 [&_svg]:size-3",
               "data-component": "tag-remove",
-              children: /* @__PURE__ */ e(v, {})
+              children: /* @__PURE__ */ e(x, {})
             }
           )
         ]
@@ -76,8 +76,8 @@ const j = u(
     );
   }
 );
-k.displayName = "Tag";
+j.displayName = "Tag";
 export {
-  k as Tag,
-  j as tagVariants
+  j as Tag,
+  N as tagVariants
 };