@vegastack/design 0.1.0 → 0.2.0

package/css/base.css

@@ -1,2 +1,2 @@
 /* Re-export of @vegastack/design-tokens/base.css — see theme.css for rationale. */
-@import '@vegastack/design-tokens/base.css';
+@import "@vegastack/design-tokens/base.css";

package/css/theme.css

@@ -1,4 +1,4 @@
 /* Re-export: token values live in @vegastack/design-tokens (a direct dependency of this package),
  * so pnpm-strict consumers can import "@vegastack/design/theme.css" without declaring the
  * transitive tokens package themselves. Tokens-only consumers install @vegastack/design-tokens. */
-@import '@vegastack/design-tokens/theme.css';
+@import "@vegastack/design-tokens/theme.css";

package/css/utilities.css

@@ -1,2 +1,2 @@
 /* Re-export of @vegastack/design-tokens/utilities.css — see theme.css for rationale. */
-@import '@vegastack/design-tokens/utilities.css';
+@import "@vegastack/design-tokens/utilities.css";

package/dist/icons/index.cjs

@@ -0,0 +1,199 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/icons/index.tsx
+var icons_exports = {};
+__export(icons_exports, {
+  AnimatedIcon: () => AnimatedIcon,
+  BrandIcon: () => BrandIcon,
+  Icon: () => Icon
+});
+module.exports = __toCommonJS(icons_exports);
+
+// src/icons/icon.tsx
+var React = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SIZES = { xs: 14, sm: 16, md: 20, lg: 24 };
+function Icon({
+  as: Cmp,
+  size = "md",
+  "aria-label": label,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Cmp,
+    {
+      width: SIZES[size],
+      height: SIZES[size],
+      strokeWidth: 1.75,
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      ...props
+    }
+  );
+}
+
+// src/icons/brand-icon.tsx
+var React2 = require("react");
+
+// src/index.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "label",
+            "label-sm",
+            "code",
+            "code-sm",
+            "mono-label",
+            "display-sm",
+            "display-md",
+            "display-lg",
+            "display-xl"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/icons/brand-icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SIZE_CLASS = {
+  xs: "size-3.5",
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6"
+};
+function fitToBox(svg) {
+  return svg.replace(/<svg\b[^>]*>/i, (openTag) => {
+    const cleaned = openTag.replace(/\s(?:width|height)\s*=\s*"[^"]*"/gi, "").replace(/\s(?:width|height)\s*=\s*'[^']*'/gi, "").replace(/\spreserveAspectRatio\s*=\s*"[^"]*"/gi, "");
+    return cleaned.replace(
+      /\s*\/?>$/,
+      (end) => ` preserveAspectRatio="xMidYMid meet"${end.trimStart()}`
+    );
+  });
+}
+function BrandIcon({
+  icon,
+  variant = "color",
+  size = "md",
+  "aria-label": label,
+  className,
+  ...props
+}) {
+  const accessibleLabel = label === void 0 ? icon.title : label;
+  const boxClassName = cn(
+    "inline-flex shrink-0 [&_svg]:block [&_svg]:size-full",
+    SIZE_CLASS[size],
+    className
+  );
+  const pick = (key) => icon.variants?.[key] ?? icon.variants?.default ?? icon.svg;
+  if (variant === "auto") {
+    const lightSvg = pick("light");
+    const darkSvg = pick("dark");
+    if (lightSvg !== darkSvg) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "span",
+        {
+          role: accessibleLabel ? "img" : void 0,
+          "aria-label": accessibleLabel || void 0,
+          "aria-hidden": accessibleLabel ? void 0 : true,
+          className: boxClassName,
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "span",
+              {
+                "data-brand-artwork": "light",
+                dangerouslySetInnerHTML: { __html: fitToBox(lightSvg) }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "span",
+              {
+                "data-brand-artwork": "dark",
+                dangerouslySetInnerHTML: { __html: fitToBox(darkSvg) }
+              }
+            )
+          ]
+        }
+      );
+    }
+  }
+  const variantKey = variant === "color" || variant === "auto" ? "default" : variant;
+  const svg = icon.variants?.[variantKey] ?? icon.svg;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      role: accessibleLabel ? "img" : void 0,
+      "aria-label": accessibleLabel || void 0,
+      "aria-hidden": accessibleLabel ? void 0 : true,
+      className: boxClassName,
+      dangerouslySetInnerHTML: { __html: fitToBox(svg) },
+      ...props
+    }
+  );
+}
+
+// src/icons/animated-icon.tsx
+var React3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SIZES2 = {
+  xs: "var(--icon-inline)",
+  sm: "var(--icon-default)",
+  md: "var(--icon-action)",
+  lg: "var(--icon-feature)"
+};
+function AnimatedIcon({
+  as: Cmp,
+  size = "md",
+  ref,
+  "aria-label": label,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Cmp,
+    {
+      ref,
+      size: SIZES2[size],
+      role: label ? "img" : void 0,
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedIcon,
+  BrandIcon,
+  Icon
+});

package/dist/icons/index.d.cts

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+/** Functional icon size scale (px). */
+declare const SIZES$1: {
+    readonly xs: 14;
+    readonly sm: 16;
+    readonly md: 20;
+    readonly lg: 24;
+};
+type IconSize = keyof typeof SIZES$1;
+interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "ref"> {
+    /** The lucide icon component to render. */
+    as: LucideIcon;
+    /**
+     * Size token — maps to 14/16/20/24px.
+     * @default 'md'
+     */
+    size?: IconSize;
+    /**
+     * Accessible label. When provided the icon is exposed to assistive tech;
+     * otherwise it is `aria-hidden`.
+     */
+    "aria-label"?: string;
+}
+/**
+ * `Icon` — the one sanctioned wrapper for functional UI icons (lucide-react).
+ *
+ * Color inherits `currentColor` (themes automatically); stroke width is fixed
+ * to the design-system standard. `aria-hidden` unless an `aria-label` is given.
+ *
+ * @example
+ * import { Check } from 'lucide-react';
+ * <Icon as={Check} size="sm" aria-label="Done" />
+ */
+declare function Icon({ as: Cmp, size, "aria-label": label, ...props }: IconProps): React.JSX.Element;
+
+/** Structural shape of a `thesvg` icon module (its default export). */
+interface BrandIconModule {
+    slug: string;
+    title: string;
+    hex: string;
+    svg: string;
+    variants: Record<string, string>;
+}
+/** Brand-icon size scale → Tailwind size utilities (14/16/20/24px). */
+declare const SIZE_CLASS: {
+    readonly xs: "size-3.5";
+    readonly sm: "size-4";
+    readonly md: "size-5";
+    readonly lg: "size-6";
+};
+type BrandIconSize = keyof typeof SIZE_CLASS;
+interface BrandIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** A `thesvg` icon module (default export), e.g. `import github from 'thesvg/github'`. */
+    icon: BrandIconModule;
+    /**
+     * Which `thesvg` variant to render:
+     * - `auto` — theme-aware brand colors: the brand's `light` artwork on light
+     *   surfaces and its `dark` artwork on dark ones, swapped in pure CSS (no JS,
+     *   no hydration flash). **Use this on any surface that flips theme** —
+     *   `color` renders the literal brand palette, and single-colour brands like
+     *   GitHub (`#181717`) disappear against a dark background.
+     * - `color` — the brand's official colors (the module `default` variant).
+     * - `mono` — single-color, inherits `currentColor` (always theme-safe).
+     * - `light` / `dark` — pin one surface-tuned variant explicitly.
+     * - `wordmark` — the brand's logotype/wordmark lockup.
+     *
+     * Falls back to the icon's base `svg` when a brand doesn't ship the variant.
+     * @default 'color'
+     */
+    variant?: "auto" | "color" | "mono" | "light" | "dark" | "wordmark";
+    /**
+     * Size token — maps to 14/16/20/24px.
+     * @default 'md'
+     */
+    size?: BrandIconSize;
+    /**
+     * Accessible label. Defaults to the brand title; pass `''` to hide from
+     * assistive tech (decorative).
+     */
+    "aria-label"?: string;
+}
+/**
+ * `BrandIcon` — the one sanctioned wrapper for brand/logo icons (`thesvg`).
+ *
+ * @example
+ * import github from 'thesvg/github';
+ * <BrandIcon icon={github} size="md" />            // literal brand colors
+ * <BrandIcon icon={github} variant="auto" />       // theme-aware (light/dark artwork)
+ * <BrandIcon icon={github} variant="mono" />       // inherits currentColor
+ */
+declare function BrandIcon({ icon, variant, size, "aria-label": label, className, ...props }: BrandIconProps): React.JSX.Element;
+
+/** Runtime icon-role tokens — resolves in the consumer's active theme. */
+declare const SIZES: {
+    readonly xs: "var(--icon-inline)";
+    readonly sm: "var(--icon-default)";
+    readonly md: "var(--icon-action)";
+    readonly lg: "var(--icon-feature)";
+};
+type AnimatedIconSize = keyof typeof SIZES;
+/**
+ * The imperative handle every `lucide-animated` icon exposes on its ref —
+ * drive the animation programmatically instead of (or in addition to) hover.
+ */
+interface AnimatedIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+/**
+ * Shape of a mirrored `lucide-animated` icon component: a React 19 function
+ * component that accepts a runtime CSS length, spreads `div` props, and exposes an
+ * {@link AnimatedIconHandle}. This is what `shadcn add @vegastack/<icon>`
+ * copies in (e.g. `ActivityIcon`).
+ */
+type AnimatedIconComponent = React.ComponentType<{
+    size?: number | string;
+    ref?: React.Ref<AnimatedIconHandle>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "ref">>;
+interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ref"> {
+    /** A mirrored lucide-animated icon component, e.g. `import { ActivityIcon } from '@/components/ui/activity'`. */
+    as: AnimatedIconComponent;
+    /**
+     * Size role — resolves through `--icon-inline/default/action/feature` at runtime.
+     * @default 'md'
+     */
+    size?: AnimatedIconSize;
+    /** Imperative animation handle forwarded to the mirrored icon. */
+    ref?: React.Ref<AnimatedIconHandle>;
+    /**
+     * Accessible label. When provided the icon is exposed to assistive tech as an
+     * image; otherwise it is `aria-hidden` (decorative).
+     */
+    "aria-label"?: string;
+}
+/**
+ * `AnimatedIcon` — the one sanctioned wrapper for motion icons (`lucide-animated`,
+ * mirrored into the VegaStack registry). It standardizes the size scale + a11y and
+ * forwards the icon's {@link AnimatedIconHandle} ref, while the icon itself owns the
+ * animation (pointer/focus/touch auto-trigger where provided upstream; or call
+ * `ref.current.startAnimation()`).
+ *
+ * Deliberately imports no `motion` — the mirrored icon component carries that
+ * dependency, so the base package stays lightweight. Every generated mirror reads
+ * Motion's `useReducedMotion()` preference intrinsically and settles immediately at
+ * its static resting state when the user requests reduced motion.
+ *
+ * @example
+ * 'use client';
+ * import { AnimatedIcon } from '@vegastack/design/icons';
+ * import { ActivityIcon } from '@/components/ui/activity';
+ *
+ * <AnimatedIcon as={ActivityIcon} size="sm" aria-label="Activity" />
+ *
+ * @example
+ * // Programmatic control via the forwarded handle
+ * const ref = React.useRef<AnimatedIconHandle>(null);
+ * <AnimatedIcon as={ActivityIcon} ref={ref} />
+ * <button onClick={() => ref.current?.startAnimation()}>Play</button>
+ */
+declare function AnimatedIcon({ as: Cmp, size, ref, "aria-label": label, ...props }: AnimatedIconProps): React.JSX.Element;
+
+export { AnimatedIcon, type AnimatedIconComponent, type AnimatedIconHandle, type AnimatedIconProps, type AnimatedIconSize, BrandIcon, type BrandIconModule, type BrandIconProps, type BrandIconSize, Icon, type IconProps, type IconSize };

package/dist/icons/index.d.ts

@@ -9,7 +9,7 @@ declare const SIZES$1: {
     readonly lg: 24;
 };
 type IconSize = keyof typeof SIZES$1;
-interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "ref"> {
     /** The lucide icon component to render. */
     as: LucideIcon;
     /**
@@ -21,7 +21,7 @@ interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
      * Accessible label. When provided the icon is exposed to assistive tech;
      * otherwise it is `aria-hidden`.
      */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
 /**
  * `Icon` — the one sanctioned wrapper for functional UI icons (lucide-react).
@@ -33,7 +33,7 @@ interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
  * import { Check } from 'lucide-react';
  * <Icon as={Check} size="sm" aria-label="Done" />
  */
-declare function Icon({ as: Cmp, size, 'aria-label': label, ...props }: IconProps): React.JSX.Element;
+declare function Icon({ as: Cmp, size, "aria-label": label, ...props }: IconProps): React.JSX.Element;
 
 /** Structural shape of a `thesvg` icon module (its default export). */
 interface BrandIconModule {
@@ -51,20 +51,25 @@ declare const SIZE_CLASS: {
     readonly lg: "size-6";
 };
 type BrandIconSize = keyof typeof SIZE_CLASS;
-interface BrandIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+interface BrandIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /** A `thesvg` icon module (default export), e.g. `import github from 'thesvg/github'`. */
     icon: BrandIconModule;
     /**
      * Which `thesvg` variant to render:
+     * - `auto` — theme-aware brand colors: the brand's `light` artwork on light
+     *   surfaces and its `dark` artwork on dark ones, swapped in pure CSS (no JS,
+     *   no hydration flash). **Use this on any surface that flips theme** —
+     *   `color` renders the literal brand palette, and single-colour brands like
+     *   GitHub (`#181717`) disappear against a dark background.
      * - `color` — the brand's official colors (the module `default` variant).
-     * - `mono` — single-color, inherits `currentColor`.
-     * - `light` / `dark` — variants tuned for light/dark surfaces.
+     * - `mono` — single-color, inherits `currentColor` (always theme-safe).
+     * - `light` / `dark` — pin one surface-tuned variant explicitly.
      * - `wordmark` — the brand's logotype/wordmark lockup.
      *
      * Falls back to the icon's base `svg` when a brand doesn't ship the variant.
      * @default 'color'
      */
-    variant?: 'color' | 'mono' | 'light' | 'dark' | 'wordmark';
+    variant?: "auto" | "color" | "mono" | "light" | "dark" | "wordmark";
     /**
      * Size token — maps to 14/16/20/24px.
      * @default 'md'
@@ -74,24 +79,25 @@ interface BrandIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'ch
      * Accessible label. Defaults to the brand title; pass `''` to hide from
      * assistive tech (decorative).
      */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
 /**
  * `BrandIcon` — the one sanctioned wrapper for brand/logo icons (`thesvg`).
  *
  * @example
  * import github from 'thesvg/github';
- * <BrandIcon icon={github} size="md" />          // brand colors
- * <BrandIcon icon={github} variant="mono" />     // inherits currentColor
+ * <BrandIcon icon={github} size="md" />            // literal brand colors
+ * <BrandIcon icon={github} variant="auto" />       // theme-aware (light/dark artwork)
+ * <BrandIcon icon={github} variant="mono" />       // inherits currentColor
  */
-declare function BrandIcon({ icon, variant, size, 'aria-label': label, className, ...props }: BrandIconProps): React.JSX.Element;
+declare function BrandIcon({ icon, variant, size, "aria-label": label, className, ...props }: BrandIconProps): React.JSX.Element;
 
-/** Functional icon size scale (px) — matches `Icon`/`BrandIcon`. */
+/** Runtime icon-role tokens — resolves in the consumer's active theme. */
 declare const SIZES: {
-    readonly xs: 14;
-    readonly sm: 16;
-    readonly md: 20;
-    readonly lg: 24;
+    readonly xs: "var(--icon-inline)";
+    readonly sm: "var(--icon-default)";
+    readonly md: "var(--icon-action)";
+    readonly lg: "var(--icon-feature)";
 };
 type AnimatedIconSize = keyof typeof SIZES;
 /**
@@ -103,38 +109,42 @@ interface AnimatedIconHandle {
     stopAnimation: () => void;
 }
 /**
- * Shape of a mirrored `lucide-animated` icon component: a `forwardRef` that
- * accepts a numeric `size`, spreads `div` props, and exposes an
+ * Shape of a mirrored `lucide-animated` icon component: a React 19 function
+ * component that accepts a runtime CSS length, spreads `div` props, and exposes an
  * {@link AnimatedIconHandle}. This is what `shadcn add @vegastack/<icon>`
  * copies in (e.g. `ActivityIcon`).
  */
-type AnimatedIconComponent = React.ForwardRefExoticComponent<{
-    size?: number;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, 'ref'> & React.RefAttributes<AnimatedIconHandle>>;
-interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref'> {
+type AnimatedIconComponent = React.ComponentType<{
+    size?: number | string;
+    ref?: React.Ref<AnimatedIconHandle>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "ref">>;
+interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ref"> {
     /** A mirrored lucide-animated icon component, e.g. `import { ActivityIcon } from '@/components/ui/activity'`. */
     as: AnimatedIconComponent;
     /**
-     * Size token — maps to 14/16/20/24px (overrides the icon's default 28px).
+     * Size role — resolves through `--icon-inline/default/action/feature` at runtime.
      * @default 'md'
      */
     size?: AnimatedIconSize;
+    /** Imperative animation handle forwarded to the mirrored icon. */
+    ref?: React.Ref<AnimatedIconHandle>;
     /**
      * Accessible label. When provided the icon is exposed to assistive tech as an
      * image; otherwise it is `aria-hidden` (decorative).
      */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
 /**
  * `AnimatedIcon` — the one sanctioned wrapper for motion icons (`lucide-animated`,
  * mirrored into the VegaStack registry). It standardizes the size scale + a11y and
  * forwards the icon's {@link AnimatedIconHandle} ref, while the icon itself owns the
- * animation (animates on hover; or call `ref.current.startAnimation()`).
+ * animation (pointer/focus/touch auto-trigger where provided upstream; or call
+ * `ref.current.startAnimation()`).
  *
  * Deliberately imports no `motion` — the mirrored icon component carries that
- * dependency, so the base package stays lightweight. For app-wide
- * reduced-motion, wrap your tree once in Motion's
- * `<MotionConfig reducedMotion="user">`.
+ * dependency, so the base package stays lightweight. Every generated mirror reads
+ * Motion's `useReducedMotion()` preference intrinsically and settles immediately at
+ * its static resting state when the user requests reduced motion.
  *
  * @example
  * 'use client';
@@ -149,6 +159,6 @@ interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
  * <AnimatedIcon as={ActivityIcon} ref={ref} />
  * <button onClick={() => ref.current?.startAnimation()}>Play</button>
  */
-declare const AnimatedIcon: React.ForwardRefExoticComponent<AnimatedIconProps & React.RefAttributes<AnimatedIconHandle>>;
+declare function AnimatedIcon({ as: Cmp, size, ref, "aria-label": label, ...props }: AnimatedIconProps): React.JSX.Element;
 
 export { AnimatedIcon, type AnimatedIconComponent, type AnimatedIconHandle, type AnimatedIconProps, type AnimatedIconSize, BrandIcon, type BrandIconModule, type BrandIconProps, type BrandIconSize, Icon, type IconProps, type IconSize };

package/dist/icons/index.js

@@ -6,7 +6,12 @@ import {
 import "react";
 import { jsx } from "react/jsx-runtime";
 var SIZES = { xs: 14, sm: 16, md: 20, lg: 24 };
-function Icon({ as: Cmp, size = "md", "aria-label": label, ...props }) {
+function Icon({
+  as: Cmp,
+  size = "md",
+  "aria-label": label,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     Cmp,
     {
@@ -22,8 +27,22 @@ function Icon({ as: Cmp, size = "md", "aria-label": label, ...props }) {
 
 // src/icons/brand-icon.tsx
 import "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var SIZE_CLASS = { xs: "size-3.5", sm: "size-4", md: "size-5", lg: "size-6" };
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SIZE_CLASS = {
+  xs: "size-3.5",
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6"
+};
+function fitToBox(svg) {
+  return svg.replace(/<svg\b[^>]*>/i, (openTag) => {
+    const cleaned = openTag.replace(/\s(?:width|height)\s*=\s*"[^"]*"/gi, "").replace(/\s(?:width|height)\s*=\s*'[^']*'/gi, "").replace(/\spreserveAspectRatio\s*=\s*"[^"]*"/gi, "");
+    return cleaned.replace(
+      /\s*\/?>$/,
+      (end) => ` preserveAspectRatio="xMidYMid meet"${end.trimStart()}`
+    );
+  });
+}
 function BrandIcon({
   icon,
   variant = "color",
@@ -32,28 +51,77 @@ function BrandIcon({
   className,
   ...props
 }) {
-  const variantKey = variant === "color" ? "default" : variant;
-  const svg = icon.variants?.[variantKey] ?? icon.svg;
   const accessibleLabel = label === void 0 ? icon.title : label;
+  const boxClassName = cn(
+    "inline-flex shrink-0 [&_svg]:block [&_svg]:size-full",
+    SIZE_CLASS[size],
+    className
+  );
+  const pick = (key) => icon.variants?.[key] ?? icon.variants?.default ?? icon.svg;
+  if (variant === "auto") {
+    const lightSvg = pick("light");
+    const darkSvg = pick("dark");
+    if (lightSvg !== darkSvg) {
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          role: accessibleLabel ? "img" : void 0,
+          "aria-label": accessibleLabel || void 0,
+          "aria-hidden": accessibleLabel ? void 0 : true,
+          className: boxClassName,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                "data-brand-artwork": "light",
+                dangerouslySetInnerHTML: { __html: fitToBox(lightSvg) }
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                "data-brand-artwork": "dark",
+                dangerouslySetInnerHTML: { __html: fitToBox(darkSvg) }
+              }
+            )
+          ]
+        }
+      );
+    }
+  }
+  const variantKey = variant === "color" || variant === "auto" ? "default" : variant;
+  const svg = icon.variants?.[variantKey] ?? icon.svg;
   return /* @__PURE__ */ jsx2(
     "span",
     {
       role: accessibleLabel ? "img" : void 0,
       "aria-label": accessibleLabel || void 0,
       "aria-hidden": accessibleLabel ? void 0 : true,
-      className: cn("inline-flex shrink-0 [&>svg]:block [&>svg]:size-full", SIZE_CLASS[size], className),
-      dangerouslySetInnerHTML: { __html: svg },
+      className: boxClassName,
+      dangerouslySetInnerHTML: { __html: fitToBox(svg) },
       ...props
     }
   );
 }
 
 // src/icons/animated-icon.tsx
-import * as React3 from "react";
+import "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var SIZES2 = { xs: 14, sm: 16, md: 20, lg: 24 };
-var AnimatedIcon = React3.forwardRef(
-  ({ as: Cmp, size = "md", "aria-label": label, ...props }, ref) => /* @__PURE__ */ jsx3(
+var SIZES2 = {
+  xs: "var(--icon-inline)",
+  sm: "var(--icon-default)",
+  md: "var(--icon-action)",
+  lg: "var(--icon-feature)"
+};
+function AnimatedIcon({
+  as: Cmp,
+  size = "md",
+  ref,
+  "aria-label": label,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
     Cmp,
     {
       ref,
@@ -63,9 +131,8 @@ var AnimatedIcon = React3.forwardRef(
       "aria-label": label,
       ...props
     }
-  )
-);
-AnimatedIcon.displayName = "AnimatedIcon";
+  );
+}
 export {
   AnimatedIcon,
   BrandIcon,