impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/avatar.js

@@ -1,9 +1,9 @@
 import { jsx as s } from "react/jsx-runtime";
 import * as l from "react";
 import * as a from "@radix-ui/react-avatar";
-import { cva as c } from "class-variance-authority";
+import { cva as i } from "class-variance-authority";
 import { cn as o } from "../../lib/utils.js";
-const f = c(
+const f = i(
   "relative flex shrink-0 overflow-hidden",
   {
     variants: {
@@ -22,10 +22,10 @@ const f = c(
       shape: "square"
     }
   }
-), d = l.forwardRef(({ className: e, size: t, shape: r, ...m }, i) => /* @__PURE__ */ s(
+), d = l.forwardRef(({ className: e, size: t, shape: r, ...m }, c) => /* @__PURE__ */ s(
   a.Root,
   {
-    ref: i,
+    ref: c,
     className: o(f({ size: t, shape: r, className: e })),
     "data-component": "avatar",
     ...m
@@ -47,7 +47,7 @@ const p = l.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ s(
   {
     ref: r,
     className: o(
-      "flex h-full w-full items-center justify-center bg-success text-white font-bold",
+      "flex h-full w-full items-center justify-center bg-success text-success-foreground font-bold",
       e
     ),
     "data-component": "avatar-fallback",

package/dist/components/ui/badge.d.ts

@@ -3,9 +3,14 @@ import * as React from "react";
 declare const badgeVariants: (props?: {
     variant?: "solid" | "outline" | "subtle";
     color?: "primary" | "destructive" | "warning" | "success" | "neutral";
+    size?: "sm" | "md";
     shape?: "circle" | "square";
+    layout?: "default" | "iconOnly";
 } & import('class-variance-authority/types').ClassProp) => string;
-export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof badgeVariants> {
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "layout"> {
+    /** Optional leading icon (16px slot). Omit label children for icon-only badges. */
+    icon?: React.ReactNode;
+    disabled?: boolean;
 }
-declare function Badge({ className, variant, color, shape, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, color, size, shape, icon, disabled, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -1,9 +1,9 @@
-import { jsx as n } from "react/jsx-runtime";
-import "react";
-import { cva as o } from "class-variance-authority";
-import { cn as i } from "../../lib/utils.js";
-const c = o(
-  "inline-flex items-center border px-2.5 py-0.5 text-sm leading-[18px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import * as g from "react";
+import { cva as f } from "class-variance-authority";
+import { cn as v } from "../../lib/utils.js";
+const m = f(
+  "inline-flex min-w-0 max-w-[164px] shrink-0 items-center justify-center border font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 [&_[data-slot=badge-icon]_svg]:size-4 [&_[data-slot=badge-icon]_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -18,49 +18,122 @@ const c = o(
         destructive: "",
         neutral: ""
       },
+      /** Figma Large (14px) vs Medium (12px, 20px tall). */
+      size: {
+        md: "",
+        sm: ""
+      },
       shape: {
         circle: "rounded-full",
-        square: "rounded"
+        square: "rounded-md"
+      },
+      layout: {
+        default: "gap-1.5 px-2 py-0.5",
+        iconOnly: "p-1"
       }
     },
     compoundVariants: [
-      // Solid
-      { variant: "solid", color: "primary", className: "border-transparent bg-primary text-white" },
-      { variant: "solid", color: "success", className: "border-transparent bg-success text-white" },
-      { variant: "solid", color: "warning", className: "border-transparent bg-warning text-[#000000de]" },
-      { variant: "solid", color: "destructive", className: "border-transparent bg-destructive text-white" },
-      { variant: "solid", color: "neutral", className: "border-transparent bg-[#5f6673] text-white" },
-      // Outline
-      { variant: "outline", color: "primary", className: "bg-transparent border-primary text-primary" },
-      { variant: "outline", color: "success", className: "bg-transparent border-success text-success" },
-      { variant: "outline", color: "warning", className: "bg-transparent border-warning text-warning" },
-      { variant: "outline", color: "destructive", className: "bg-transparent border-destructive text-destructive" },
-      { variant: "outline", color: "neutral", className: "bg-transparent border-[#5f6673] text-[#5f6673]" },
-      // Subtle
-      { variant: "subtle", color: "primary", className: "border-transparent bg-primary-subtle-bg text-primary-subtle-text" },
-      { variant: "subtle", color: "success", className: "border-transparent bg-success-alert-bg text-success" },
-      { variant: "subtle", color: "warning", className: "border-transparent bg-warning-alert-bg text-warning" },
-      { variant: "subtle", color: "destructive", className: "border-transparent bg-error-alert-bg text-destructive" },
-      { variant: "subtle", color: "neutral", className: "border-transparent bg-[#5f6673]/10 text-[#5f6673]" }
+      { size: "md", layout: "default", class: "text-sm leading-5" },
+      { size: "sm", layout: "default", class: "h-5 text-xs leading-4" },
+      { size: "sm", layout: "iconOnly", class: "h-5" },
+      {
+        variant: "solid",
+        color: "primary",
+        class: "border-transparent bg-badge-info-filled text-brand-foreground"
+      },
+      { variant: "solid", color: "neutral", class: "border-transparent bg-content-badge text-brand-foreground" },
+      {
+        variant: "solid",
+        color: "success",
+        class: "border-transparent bg-badge-success-filled text-success-foreground"
+      },
+      { variant: "solid", color: "warning", class: "border-transparent bg-badge-warning-filled text-content" },
+      {
+        variant: "solid",
+        color: "destructive",
+        class: "border-transparent bg-badge-error-filled text-destructive-foreground"
+      },
+      {
+        variant: "outline",
+        color: "primary",
+        class: "border border-badge-info-filled bg-canvas-elevated text-badge-info-filled"
+      },
+      { variant: "outline", color: "neutral", class: "border border-content-badge bg-canvas-elevated text-content-badge" },
+      {
+        variant: "outline",
+        color: "success",
+        class: "border border-badge-success-filled bg-canvas-elevated text-badge-success-filled"
+      },
+      { variant: "outline", color: "warning", class: "border border-badge-warning-ink bg-canvas-elevated text-badge-warning-ink" },
+      {
+        variant: "outline",
+        color: "destructive",
+        class: "border border-badge-error-filled bg-canvas-elevated text-badge-error-filled"
+      },
+      {
+        variant: "subtle",
+        color: "primary",
+        class: "border-transparent bg-badge-info-muted text-badge-info-filled"
+      },
+      { variant: "subtle", color: "neutral", class: "border-transparent bg-badge-neutral-muted text-content-badge" },
+      {
+        variant: "subtle",
+        color: "success",
+        class: "border-transparent bg-badge-success-muted text-badge-success-ink"
+      },
+      {
+        variant: "subtle",
+        color: "warning",
+        class: "border-transparent bg-badge-warning-muted text-badge-warning-ink"
+      },
+      {
+        variant: "subtle",
+        color: "destructive",
+        class: "border-transparent bg-badge-error-muted text-badge-error-ink"
+      }
     ],
     defaultVariants: {
       variant: "solid",
       color: "primary",
-      shape: "circle"
+      size: "md",
+      shape: "circle",
+      layout: "default"
     }
   }
 );
-function m({ className: r, variant: t, color: a, shape: e, ...s }) {
-  return /* @__PURE__ */ n(
+function w({
+  className: o,
+  variant: l,
+  color: i,
+  size: d,
+  shape: c,
+  icon: e,
+  disabled: r,
+  children: a,
+  ...b
+}) {
+  const t = g.Children.count(a) > 0, s = e != null && !t ? "iconOnly" : "default";
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: i(c({ variant: t, color: a, shape: e }), r),
+      role: "status",
       "data-component": "badge",
-      ...s
+      "data-layout": s,
+      "aria-disabled": r ? !0 : void 0,
+      className: v(
+        m({ variant: l, color: i, size: d, shape: c, layout: s }),
+        r && "pointer-events-none border border-disabled-border bg-disabled-surface text-disabled-foreground",
+        o
+      ),
+      ...b,
+      children: [
+        e != null ? /* @__PURE__ */ n("span", { "data-slot": "badge-icon", className: "inline-flex shrink-0 text-current", children: e }) : null,
+        t ? /* @__PURE__ */ n("span", { className: "min-w-0 flex-1 truncate text-center", children: a }) : null
+      ]
     }
   );
 }
 export {
-  m as Badge,
-  c as badgeVariants
+  w as Badge,
+  m as badgeVariants
 };

package/dist/components/ui/breadcrumb.js

@@ -36,7 +36,7 @@ const W = s.forwardRef(({ className: e, maxWords: t, ...r }, o) => /* @__PURE__
   {
     ref: o,
     className: n(
-      "flex flex-wrap items-center gap-2 text-[14px] font-medium text-secondary-foreground",
+      "flex flex-wrap items-center gap-1 text-[14px] font-medium text-secondary-foreground",
       e
     ),
     ...r
@@ -52,24 +52,26 @@ const R = s.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ a(
   }
 ));
 R.displayName = "BreadcrumbItem";
-const V = s.forwardRef(({ asChild: e, className: t, maxWords: r, children: o, ...p }, u) => {
-  const i = e ? y : "a", { maxWords: d } = s.useContext(x), c = r ?? d, l = typeof o == "string", m = l && c ? N(o, c) : o, B = l && c && o.split(/\s+/).length > c, C = /* @__PURE__ */ a(
-    i,
-    {
-      ref: u,
-      className: n(
-        "transition-colors text-primary hover:text-primary-700 font-medium",
-        t
-      ),
-      ...p,
-      children: m
-    }
-  );
-  return B ? /* @__PURE__ */ f(h, { children: [
-    /* @__PURE__ */ a(w, { asChild: !0, children: C }),
-    /* @__PURE__ */ a(b, { side: "top", variant: "tertiary", children: o })
-  ] }) : C;
-});
+const V = s.forwardRef(
+  ({ asChild: e, className: t, maxWords: r, children: o, ...p }, u) => {
+    const i = e ? y : "a", { maxWords: d } = s.useContext(x), c = r ?? d, l = typeof o == "string", m = l && c ? N(o, c) : o, B = l && c && o.split(/\s+/).length > c, C = /* @__PURE__ */ a(
+      i,
+      {
+        ref: u,
+        className: n(
+          "transition-colors text-brand hover:text-brand-strong font-medium",
+          t
+        ),
+        ...p,
+        children: m
+      }
+    );
+    return B ? /* @__PURE__ */ f(h, { children: [
+      /* @__PURE__ */ a(w, { asChild: !0, children: C }),
+      /* @__PURE__ */ a(b, { side: "top", variant: "tertiary", children: o })
+    ] }) : C;
+  }
+);
 V.displayName = "BreadcrumbLink";
 const M = s.forwardRef(({ className: e, maxWords: t, children: r, ...o }, p) => {
   const { maxWords: u } = s.useContext(x), i = t ?? u, d = typeof r == "string", c = d && i ? N(r, i) : r, l = d && i && r.split(/\s+/).length > i, m = /* @__PURE__ */ a(
@@ -80,7 +82,7 @@ const M = s.forwardRef(({ className: e, maxWords: t, children: r, ...o }, p) =>
       "aria-disabled": "true",
       "aria-current": "page",
       "data-current": "page",
-      className: n("font-extrabold text-[#1f2b4d]", e),
+      className: n("font-extrabold text-content", e),
       ...o,
       children: c
     }
@@ -100,7 +102,10 @@ const S = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: n("[&>svg]:w-3.5 [&>svg]:h-3.5 text-secondary-foreground", t),
+    className: n(
+      "[&>svg]:w-3.5 [&>svg]:h-3.5 text-secondary-foreground",
+      t
+    ),
     ...r,
     children: e ?? /* @__PURE__ */ a(
       "svg",

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

@@ -1,5 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
+/**
+ * Button group — IA Design System v3.1 (Figma: Button group).
+ * - Fused (`spacing="none"`): shared #C3C8D4 borders, 8px outer radius; selected = #ECEEFD fill + #4259EE border/text.
+ * - Spaced: independent 8px rounded segments with gap (Figma “split” row).
+ */
 declare const buttonGroupVariants: (props?: {
     orientation?: "horizontal" | "vertical";
     spacing?: "sm" | "md" | "lg" | "none";
@@ -12,6 +17,8 @@ export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>,
     helperText?: React.ReactNode;
     isError?: boolean;
     required?: boolean;
+    /** Accessible name when no visible `label` is passed */
+    "aria-label"?: string;
 }
 declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 export { ButtonGroup, buttonGroupVariants };

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

@@ -1,105 +1,130 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import * as o from "react";
-import { cva as k } from "class-variance-authority";
-import { cn as t } from "../../lib/utils.js";
-import { Info as G } from "../../icons/index.js";
-const V = k(
-  "inline-flex",
-  {
-    variants: {
-      orientation: {
-        horizontal: "flex-row",
-        vertical: "flex-col"
-      },
-      spacing: {
-        none: "gap-0",
-        sm: "gap-1",
-        md: "gap-2",
-        lg: "gap-4"
-      }
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import * as a from "react";
+import { cva as O } from "class-variance-authority";
+import { cn as e } from "../../lib/utils.js";
+import { Info as R } from "../../icons/index.js";
+const A = O("inline-flex", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col"
     },
-    defaultVariants: {
-      orientation: "horizontal",
-      spacing: "none"
+    spacing: {
+      none: "gap-0",
+      sm: "gap-1",
+      md: "gap-2",
+      lg: "gap-4"
     }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    spacing: "none"
   }
-), j = o.forwardRef(
-  ({ className: x, orientation: n = "horizontal", spacing: l = "none", value: v, onValueChange: c, isDisabled: p, children: b, label: m, helperText: u, isError: r, required: g, ...h }, N) => /* @__PURE__ */ s("div", { className: t("grid gap-1.5", x), children: [
-    m && /* @__PURE__ */ s(
-      "label",
-      {
-        className: t(
-          "text-xs font-medium leading-[18px] text-[#60697d]",
-          // Exact legacy color
-          p && "opacity-70",
-          r && "text-destructive"
-        ),
-        children: [
-          m,
-          " ",
-          g && /* @__PURE__ */ a("span", { className: "text-destructive", children: "*" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ a(
-      "div",
-      {
-        ref: N,
-        className: t(
-          V({ orientation: n, spacing: l }),
-          ""
-        ),
-        role: "group",
-        "data-component": "button-group",
-        "data-orientation": n,
-        "data-spacing": l,
-        ...h,
-        children: o.Children.map(b, (i) => {
-          if (o.isValidElement(i)) {
-            const e = i, d = e.props.value || e.props.children?.toString(), f = v === d, z = n === "horizontal";
-            return o.cloneElement(e, {
-              disabled: e.props.disabled || p,
-              variant: e.props.variant || "tertiary",
+}), H = a.forwardRef(
+  ({
+    className: z,
+    orientation: l = "horizontal",
+    spacing: p = "none",
+    value: m,
+    onValueChange: x,
+    isDisabled: b,
+    children: N,
+    label: o,
+    helperText: g,
+    isError: n,
+    required: y,
+    "aria-label": S,
+    ...w
+  }, _) => {
+    const s = p === "none", B = l === "horizontal", I = a.useId(), h = o ? `${I}-label` : void 0;
+    return /* @__PURE__ */ f("div", { className: e("grid gap-1.5", z), children: [
+      o && /* @__PURE__ */ f(
+        "label",
+        {
+          id: h,
+          className: e(
+            "text-xs font-medium leading-[18px] text-content-tertiary",
+            b && "opacity-70",
+            n && "text-destructive"
+          ),
+          children: [
+            o,
+            " ",
+            y && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ c(
+        "div",
+        {
+          ref: _,
+          className: e(A({ orientation: l, spacing: p })),
+          role: "group",
+          "data-component": "button-group",
+          "data-orientation": l,
+          "data-spacing": p,
+          "data-fused": s ? "true" : "false",
+          "aria-label": o ? void 0 : S,
+          "aria-labelledby": o ? h : void 0,
+          ...w,
+          children: a.Children.map(N, (u) => {
+            if (!a.isValidElement(u)) return u;
+            const t = u, v = t.props.value ?? t.props.children?.toString?.() ?? "", d = typeof v == "string" ? v : String(v), r = m !== void 0 && m === d, i = !!(t.props.disabled || b), V = t.props.size === "icon" || t.props.size === "iconMd" || t.props.size === "iconSm", k = e(
+              "!shadow-none relative border transition-colors",
+              s && !V && "min-w-14",
+              s ? B ? "!rounded-none first:!rounded-l-md last:!rounded-r-md -ml-px first:ml-0" : "!rounded-none first:!rounded-t-md last:!rounded-b-md -mt-px first:mt-0" : "!rounded-md",
+              s && (r ? "z-10" : "z-[1]")
+            ), G = i ? "!bg-disabled-surface !border-disabled-border !text-disabled-foreground opacity-100 [&_svg]:!text-disabled-foreground" : r ? "!bg-accent !border-brand !text-brand [&_svg]:!text-brand" : e(
+              "!bg-canvas-elevated !border-button-primary-disabled !text-[#60697d]",
+              "[&_svg]:text-content-icon",
+              "hover:!text-brand hover:[&_svg]:!text-brand"
+            ), j = n && !r && !i && "!border-destructive !text-destructive [&_svg]:!text-destructive";
+            return a.cloneElement(t, {
+              disabled: i,
+              variant: "ghost",
+              "aria-pressed": m !== void 0 && d !== "" ? r : void 0,
               "data-button-group": "item",
-              className: t(
-                "relative transition-all hover:bg-transparent hover:border-tertiary-border",
-                z ? "rounded-none first:rounded-l-md last:rounded-r-md -ml-[1px] first:ml-0" : "rounded-none first:rounded-t-md last:rounded-b-md -mt-[1px] first:mt-0",
-                f ? "z-10 bg-[#eceefd] border-[#4259ee] text-[#4259ee] hover:bg-[#eceefd] hover:border-[#4259ee] hover:text-[#4259ee]" : "text-[#0000008a]",
-                "disabled:bg-[#f8f9fb] disabled:text-[#b4bac7] disabled:opacity-100",
-                r && !f && "border-destructive text-destructive z-10",
-                // rudimentary error style for buttons
-                // If active and error? Maybe keep active color but allow border to be red? 
-                // For now let's just stick to the text label error. Button error styles are complex.
-                // The user just said "do the same thing", which mainly implies the wrapper structure.
-                e.props.className
+              "data-active": r ? "true" : "false",
+              className: e(
+                k,
+                G,
+                j,
+                t.props.className
               ),
-              onClick: (y) => {
-                e.props.onClick?.(y), d && c && c(d);
+              onClick: (C) => {
+                t.props.onClick?.(C), d && x && !i && x(d);
               }
             });
-          }
-          return i;
-        })
-      }
-    ),
-    u && /* @__PURE__ */ s("div", { className: t("flex items-center gap-1", r && "text-destructive"), children: [
-      !r && /* @__PURE__ */ a(G, { size: 10, className: "shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ a(
-        "p",
+          })
+        }
+      ),
+      g && /* @__PURE__ */ f(
+        "div",
         {
-          className: t(
-            "text-[10px] text-[#7a8294]",
-            // Exact legacy color
-            r && "text-destructive"
+          className: e(
+            "flex items-center gap-1",
+            n && "text-destructive"
           ),
-          children: u
+          children: [
+            !n && /* @__PURE__ */ c(R, { size: 10, className: "shrink-0 text-content-muted" }),
+            /* @__PURE__ */ c(
+              "p",
+              {
+                className: e(
+                  "text-xs text-content-muted",
+                  n && "text-destructive"
+                ),
+                children: g
+              }
+            )
+          ]
         }
       )
-    ] })
-  ] })
+    ] });
+  }
 );
-j.displayName = "ButtonGroup";
+H.displayName = "ButtonGroup";
 export {
-  j as ButtonGroup,
-  V as buttonGroupVariants
+  H as ButtonGroup,
+  A as buttonGroupVariants
 };

package/dist/components/ui/button-variants.d.ts

@@ -1,4 +1,9 @@
+/**
+ * Buttons — IA Design System v3.1 (Figma: Buttons).
+ * - Primary (`default`): filled #4259EE (`--color-primary` / `bg-brand`), hover `--color-primary-strong`, disabled `--color-button-primary-disabled`.
+ * - Heights: Large `default` 32px, Medium `md` 28px, Small `sm` 24px; icon-only `icon` / `iconMd` / `iconSm` match those squares.
+ */
 export declare const buttonVariants: (props?: {
-    variant?: "default" | "link" | "secondary" | "tertiary" | "destructive" | "outline" | "ghost";
-    size?: "sm" | "md" | "lg" | "default" | "icon";
+    variant?: "default" | "link" | "secondary" | "tertiary" | "destructive" | "destructive-outline" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg" | "default" | "icon" | "iconMd" | "iconSm";
 } & import('class-variance-authority/types').ClassProp) => string;

package/dist/components/ui/button-variants.js

@@ -1,31 +1,46 @@
 import { cva as e } from "class-variance-authority";
-const d = e(
-  "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+const i = e(
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium leading-5 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/25 focus-visible:ring-offset-1 focus-visible:ring-offset-canvas disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary-700 disabled:bg-disabled-primary disabled:text-primary-foreground disabled:opacity-100",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-primary bg-background text-primary hover:bg-accent hover:text-accent-foreground disabled:bg-disabled-secondary-bg disabled:border-border disabled:text-disabled-text disabled:opacity-100",
-        secondary: "bg-secondary text-secondary-foreground  hover:bg-accent hover:text-secondary-hover-foreground",
-        tertiary: "border border-tertiary-border bg-background text-foreground hover:bg-accent hover:text-secondary-hover-foreground hover:border-secondary-hover-foreground disabled:bg-disabled-secondary-bg disabled:border-border disabled:text-disabled-text disabled:opacity-100",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "bg-brand text-brand-foreground hover:bg-brand-strong disabled:bg-button-primary-disabled disabled:text-brand-foreground disabled:opacity-100",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover focus-visible:ring-destructive/25 disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:opacity-100",
+        /** Outlined destructive — red border + label; use instead of `outline` when the action is dangerous. */
+        "destructive-outline": "border border-destructive bg-canvas text-destructive hover:bg-feedback-error-surface hover:border-destructive-hover hover:text-destructive-hover focus-visible:ring-destructive/22 disabled:bg-disabled-surface disabled:border-stroke disabled:text-disabled-foreground disabled:opacity-100",
+        outline: "border border-brand bg-canvas text-brand hover:bg-accent hover:text-accent-foreground disabled:bg-disabled-surface disabled:border-stroke disabled:text-disabled-foreground disabled:opacity-100",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-accent hover:text-secondary-hover-foreground disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:opacity-100",
+        tertiary: "border border-stroke-field bg-canvas text-content hover:bg-accent hover:text-secondary-hover-foreground hover:border-secondary-hover-foreground disabled:bg-disabled-surface disabled:border-stroke disabled:text-disabled-foreground disabled:opacity-100",
+        ghost: "text-content hover:bg-accent hover:text-accent-foreground disabled:text-disabled-foreground disabled:opacity-50",
+        link: "text-brand underline-offset-4 hover:underline disabled:text-disabled-foreground disabled:opacity-50"
       },
       size: {
-        default: "h-8 px-4 py-2",
-        sm: "h-6 rounded-md px-3 text-xs",
-        md: "h-7 rounded-md px-4 text-xs",
-        lg: "h-9 rounded-md px-8",
-        icon: "p-2"
+        default: "h-8 min-h-8 px-3 py-1.5",
+        sm: "h-6 min-h-6 gap-1 px-2.5 py-1 text-xs leading-4 [&_svg]:size-3.5",
+        md: "h-7 min-h-7 gap-1 px-3 py-1 text-xs leading-4 [&_svg]:size-3.5",
+        lg: "h-9 min-h-9 px-4 py-2 text-sm leading-5 [&_svg]:size-4",
+        icon: "h-8 w-8 min-h-8 min-w-8 shrink-0 gap-0 p-0 [&_svg]:size-4",
+        iconMd: "h-7 w-7 min-h-7 min-w-7 shrink-0 gap-0 p-0 [&_svg]:size-3.5",
+        iconSm: "h-6 w-6 min-h-6 min-w-6 shrink-0 gap-0 p-0 [&_svg]:size-3.5"
       }
     },
     defaultVariants: {
       variant: "default",
       size: "default"
-    }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        /** Filled primary: light ring so focus does not read heavier than the control. */
+        class: "focus-visible:ring-white/45"
+      },
+      {
+        variant: "link",
+        class: "h-auto min-h-0 w-auto min-w-0 justify-start gap-0 p-0 font-medium leading-normal ring-offset-0 focus-visible:ring-1 focus-visible:ring-focus-ring/25"
+      }
+    ]
   }
 );
 export {
-  d as buttonVariants
+  i as buttonVariants
 };

package/dist/components/ui/button.d.ts

@@ -12,14 +12,14 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
     asChild?: boolean;
     /**
      * Side of the tooltip for icon-only buttons.
-     * Only applies when `size="icon"` and `aria-label` is set.
+     * Only applies when `size` is `icon`, `iconMd`, or `iconSm` and `aria-label` is set.
      * @default "top"
      */
     tooltipSide?: "top" | "bottom" | "left" | "right";
     /**
      * Optional keyboard shortcut keybinding to display in the tooltip
      * alongside the aria-label text as a styled Kbd badge.
-     * Only applies when the tooltip is shown (size="icon" + aria-label).
+     * Only applies when the tooltip is shown (icon-only size + aria-label).
      */
     tooltipKeybinding?: KeyBinding;
 }