@dashforge/tw 0.11.0-beta → 1.1.0

package/dist/src/components/Menu/menu.variants.d.ts

@@ -0,0 +1,129 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { MenuPlacement } from './menu.types.js';
+/**
+ * Tailwind-variants recipe for the Menu family.
+ *
+ * The whole menu family is styled here in one TV instance so the
+ * compound rules (item color × selected × danger, etc.) live in
+ * one source of truth.
+ *
+ * Slots:
+ *   - `content`   — floating panel (DropdownMenu.Content)
+ *   - `item`      — clickable row (DropdownMenu.Item)
+ *   - `itemIcon`  — leading icon container
+ *   - `itemLabel` — text content slot
+ *   - `itemEnd`   — trailing slot (shortcut hint, chevron, …)
+ *   - `label`     — non-interactive heading (DropdownMenu.Label)
+ *   - `separator` — divider (DropdownMenu.Separator)
+ *   - `skeleton`  — placeholder item (visual only, no Radix slot)
+ */
+export declare const menuVariants: import("tailwind-variants").TVReturnType<{
+    /**
+     * Item color intent. `'danger'` highlights destructive actions
+     * (Delete, Sign out) with red bg on hover. Both bg and text
+     * shift to the danger palette when the item is highlighted.
+     */
+    color: {
+        default: {};
+        danger: {
+            item: string[];
+            itemIcon: string;
+        };
+    };
+    /**
+     * Visual `selected` hint — adds a faint primary bg + the
+     * leading edge gets a primary accent. Pure visual; v1 has no
+     * controlled selection state machine.
+     */
+    selected: {
+        true: {
+            item: string[];
+            itemIcon: string;
+        };
+    };
+}, {
+    content: string[];
+    item: string[];
+    itemIcon: string;
+    itemLabel: string;
+    itemEnd: string;
+    label: string[];
+    separator: string;
+    skeleton: string[];
+}, undefined, {
+    /**
+     * Item color intent. `'danger'` highlights destructive actions
+     * (Delete, Sign out) with red bg on hover. Both bg and text
+     * shift to the danger palette when the item is highlighted.
+     */
+    color: {
+        default: {};
+        danger: {
+            item: string[];
+            itemIcon: string;
+        };
+    };
+    /**
+     * Visual `selected` hint — adds a faint primary bg + the
+     * leading edge gets a primary accent. Pure visual; v1 has no
+     * controlled selection state machine.
+     */
+    selected: {
+        true: {
+            item: string[];
+            itemIcon: string;
+        };
+    };
+}, {
+    content: string[];
+    item: string[];
+    itemIcon: string;
+    itemLabel: string;
+    itemEnd: string;
+    label: string[];
+    separator: string;
+    skeleton: string[];
+}, import("tailwind-variants").TVReturnType<{
+    /**
+     * Item color intent. `'danger'` highlights destructive actions
+     * (Delete, Sign out) with red bg on hover. Both bg and text
+     * shift to the danger palette when the item is highlighted.
+     */
+    color: {
+        default: {};
+        danger: {
+            item: string[];
+            itemIcon: string;
+        };
+    };
+    /**
+     * Visual `selected` hint — adds a faint primary bg + the
+     * leading edge gets a primary accent. Pure visual; v1 has no
+     * controlled selection state machine.
+     */
+    selected: {
+        true: {
+            item: string[];
+            itemIcon: string;
+        };
+    };
+}, {
+    content: string[];
+    item: string[];
+    itemIcon: string;
+    itemLabel: string;
+    itemEnd: string;
+    label: string[];
+    separator: string;
+    skeleton: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type MenuVariants = VariantProps<typeof menuVariants>;
+/**
+ * Resolve a `MenuPlacement` enum to Radix `side` + `align` props.
+ * Single source of truth so Menu.tsx doesn't need a switch statement.
+ */
+export declare function placementToRadix(placement: MenuPlacement): {
+    side: 'top' | 'right' | 'bottom' | 'left';
+    align: 'start' | 'center' | 'end';
+};
+//# sourceMappingURL=menu.variants.d.ts.map

package/dist/src/components/Menu/menu.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/menu.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY;IAiDrB;;;;OAIG;;;;;;;;IAkBH;;;;OAIG;;;;;;;;;;;;;;;;;IA1BH;;;;OAIG;;;;;;;;IAkBH;;;;OAIG;;;;;;;;;;;;;;;;;IA1BH;;;;OAIG;;;;;;;;IAkBH;;;;OAIG;;;;;;;;;;;;;;;;2CAcL,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,aAAa,GAAG;IAC1D,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1C,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACnC,CAWA"}

package/dist/src/components/Snackbar/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,WAAW,EAEX,qBAAqB,EAGtB,MAAM,qBAAqB,CAAC;AAI7B;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,WAAW,CAQzC;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA4N5D"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,WAAW,EAEX,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AAI7B;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,WAAW,CAQzC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAwP5D"}

package/dist/src/components/Snackbar/snackbar.types.d.ts

@@ -1,7 +1,22 @@
 import type { ReactNode } from 'react';
 import type { SnackbarVariants } from './snackbar.variants.js';
-/** Visual severity — drives icon color + accent on the snackbar surface. */
-export type SnackbarSeverity = 'info' | 'success' | 'warning' | 'danger';
+import type { Severity, SeverityVariant } from '../_shared/severity/severity.types.js';
+/**
+ * Visual severity — drives icon color + accent on the snackbar surface.
+ *
+ * Re-exported alias of the shared `Severity` type from
+ * `_shared/severity/`. Kept as a distinct local alias for
+ * backwards-compatible name (`SnackbarSeverity`) — pre-1.1.0 consumers
+ * that imported `SnackbarSeverity` keep their imports working.
+ */
+export type SnackbarSeverity = Severity;
+/**
+ * Visual variant — `standard` (default, soft tinted surface), `filled`
+ * (solid colored surface), `outlined` (transparent + border + text).
+ * Re-exported alias of the shared `SeverityVariant`. New in 1.1.0:
+ * Snackbar now supports the same 3-way axis as Alert / future Banner.
+ */
+export type SnackbarVariant = SeverityVariant;
 /** Corner anchor for the snackbar stack. */
 export type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 /** One snackbar instance — what `useSnackbar().enqueue()` accepts. */
@@ -10,6 +25,28 @@ export interface SnackbarOptions {
     message: ReactNode;
     /** Visual severity. @default 'info' */
     severity?: SnackbarSeverity;
+    /**
+     * Visual variant — same 3-way axis as Alert. **New in 1.1.0.**
+     *
+     * - `'standard'` (default) — tinted soft surface, severity-toned text
+     * - `'filled'` — solid colored surface, light text (strong weight)
+     * - `'outlined'` — transparent surface, severity border + text
+     *
+     * @default 'standard'
+     */
+    variant?: SnackbarVariant;
+    /**
+     * Icon control — same tristate as Alert. **New in 1.1.0.**
+     *
+     * - omitted / `undefined` → default per-severity icon (inline SVG
+     *   shared with Alert via `_shared/severity/`)
+     * - `ReactNode` → consumer-provided icon
+     * - `false` → no icon (colored surface alone carries the severity)
+     *
+     * The legacy Unicode glyphs (`ⓘ ✓ ⚠ ✕`) shipped in 1.0.x have been
+     * REMOVED — see CHANGELOG for the visual breaking note.
+     */
+    icon?: ReactNode | false;
     /**
      * Auto-dismiss after this many ms. `0` / negative ⇒ persistent
      * (only dismissed by the close button or `dismiss(id)`).
@@ -79,7 +116,7 @@ export interface SnackbarProviderProps extends SnackbarVariants {
      */
     maxVisible?: number;
     /** Defaults merged into every enqueue. */
-    defaults?: Pick<SnackbarOptions, 'severity' | 'autoHideMs' | 'showClose'>;
+    defaults?: Pick<SnackbarOptions, 'severity' | 'variant' | 'autoHideMs' | 'showClose'>;
     /** Per-slot className overrides. */
     slotProps?: SnackbarSlotProps;
 }

package/dist/src/components/Snackbar/snackbar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/snackbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,4EAA4E;AAC5E,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzE,4CAA4C;AAC5C,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACnD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,0EAA0E;AAC1E,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACtC;AAED,sCAAsC;AACtC,MAAM,WAAW,WAAW;IAC1B,kFAAkF;IAClF,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C,mCAAmC;IACnC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sCAAsC;IACtC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC,CAAC;IAC1E,oCAAoC;IACpC,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B"}
+{"version":3,"file":"snackbar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/snackbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EACV,QAAQ,EACR,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AAExC;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;AAE9C,4CAA4C;AAC5C,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACnD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,0EAA0E;AAC1E,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACtC;AAED,sCAAsC;AACtC,MAAM,WAAW,WAAW;IAC1B,kFAAkF;IAClF,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C,mCAAmC;IACnC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sCAAsC;IACtC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,IAAI,CACb,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CACpD,CAAC;IACF,oCAAoC;IACpC,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B"}

package/dist/src/components/Snackbar/snackbar.variants.d.ts

@@ -2,13 +2,22 @@ import { type VariantProps } from 'tailwind-variants';
 /**
  * Tailwind-variants recipe for `<Snackbar>` (stacked toast surface).
  *
+ * **Sprint 4.4 refactor (1.1.0):** the severity color block has been
+ * REMOVED from this recipe. The 3×4 (variant × severity) color matrix
+ * now lives in `_shared/severity/severityVariants` and is consumed by
+ * Snackbar AND Alert (and any future Banner). This recipe owns layout
+ * + spacing + transitions only — the surface / border / icon colors
+ * are merged in at render time via `cn()`.
+ *
  * Slots:
  *   - `container`   — fixed-position outer stack
- *   - `item`        — single snackbar surface
- *   - `icon`        — leading severity icon
+ *   - `item`        — single snackbar surface (layout only; severity
+ *                     colors injected at render via `getSeverityClasses`)
+ *   - `icon`        — leading severity icon (layout only; tone class
+ *                     injected at render)
  *   - `message`     — main text
  *   - `action`      — optional action button
- *   - `closeButton` — trailing `×` button
+ *   - `closeButton` — trailing close `×` button
  */
 export declare const snackbarVariants: import("tailwind-variants").TVReturnType<{
     position: {
@@ -31,24 +40,6 @@ export declare const snackbarVariants: import("tailwind-variants").TVReturnType<
             container: string;
         };
     };
-    severity: {
-        info: {
-            item: string;
-            icon: string;
-        };
-        success: {
-            item: string;
-            icon: string;
-        };
-        warning: {
-            item: string;
-            icon: string;
-        };
-        danger: {
-            item: string;
-            icon: string;
-        };
-    };
 }, {
     container: string[];
     item: string[];
@@ -77,24 +68,6 @@ export declare const snackbarVariants: import("tailwind-variants").TVReturnType<
             container: string;
         };
     };
-    severity: {
-        info: {
-            item: string;
-            icon: string;
-        };
-        success: {
-            item: string;
-            icon: string;
-        };
-        warning: {
-            item: string;
-            icon: string;
-        };
-        danger: {
-            item: string;
-            icon: string;
-        };
-    };
 }, {
     container: string[];
     item: string[];
@@ -123,24 +96,6 @@ export declare const snackbarVariants: import("tailwind-variants").TVReturnType<
             container: string;
         };
     };
-    severity: {
-        info: {
-            item: string;
-            icon: string;
-        };
-        success: {
-            item: string;
-            icon: string;
-        };
-        warning: {
-            item: string;
-            icon: string;
-        };
-        danger: {
-            item: string;
-            icon: string;
-        };
-    };
 }, {
     container: string[];
     item: string[];

package/dist/src/components/Snackbar/snackbar.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/snackbar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0D3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"snackbar.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/snackbar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwD3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/src/components/Spinner/Spinner.d.ts

@@ -0,0 +1,44 @@
+import type { SpinnerProps } from './spinner.types.js';
+/**
+ * `<Spinner>` — rotating-arc loading indicator.
+ *
+ * Visual: a partial-arc SVG rotating via Tailwind's `animate-spin`
+ * (pure CSS, GPU-accelerated). Optional `withTrack` renders a faint
+ * ghost ring (20% opacity of currentColor) behind the arc — the
+ * standard "premium spinner" pattern used by Stripe / Vercel / Linear.
+ *
+ * Color resolution:
+ *   - `color="primary"` (or any 7 intent) → `text-{color}-600` class
+ *     → SVG `stroke="currentColor"` picks it up
+ *   - `color` omitted → no `text-*` class emitted → SVG inherits
+ *     parent's text color via `currentColor`. **This is the right
+ *     default for nested usage** (inside Button, Alert, Card).
+ *
+ * A11y:
+ *   - `role="status"` on the wrapper
+ *   - `aria-live="polite"` so SR queues the announcement
+ *   - visually-hidden text label inside (`'Loading'` default)
+ *   - `animate-spin` is gated on `motion-reduce` (WCAG 2.3.3)
+ *
+ * Delay (anti-flash):
+ *   - `delay={150}` mounts as `null` for the first 150ms, then swaps
+ *     to the actual SVG. Quick operations that finish before 150ms
+ *     never render the spinner — eliminates the "flash" UX bug.
+ *
+ * @example
+ * ```tsx
+ * // 1. Inside a Button — inherits text color
+ * <button><Spinner size="sm" /> Saving...</button>
+ *
+ * // 2. Standalone with explicit color
+ * <Spinner color="primary" size="lg" label="Loading dashboard data" />
+ *
+ * // 3. Anti-flash on quick submits
+ * <Spinner visibleWhen={() => isSubmitting} delay={150} />
+ *
+ * // 4. With track for busy backgrounds
+ * <Spinner color="primary" withTrack size="xl" />
+ * ```
+ */
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/src/components/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,OAAO,0GAwGlB,CAAC"}

package/dist/src/components/Spinner/spinner.types.d.ts

@@ -0,0 +1,89 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Engine } from '@dashforge/ui-core';
+/**
+ * Size scale — maps to spacing tokens (w/h) and matching stroke
+ * width in the variants recipe.
+ */
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Intent color. When omitted, the spinner inherits the parent's
+ * text color via `currentColor` — the right default for nested
+ * usage (inside Button, Alert, Card, etc.).
+ */
+export type SpinnerColor = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+/** Stroke thickness — 3 steps mapped to SVG stroke-width. */
+export type SpinnerThickness = 'thin' | 'md' | 'thick';
+/**
+ * Props for `<Spinner>` — rotating-arc loading indicator.
+ *
+ * A11y: the spinner renders with `role="status"` + `aria-live="polite"`
+ * + a visually-hidden text label (default `'Loading'`). Screen readers
+ * announce the label politely (queued, doesn't interrupt) when the
+ * spinner mounts.
+ *
+ * Performance: SVG `animate-spin` (Tailwind built-in) — pure CSS,
+ * GPU-accelerated, motion-reduce-safe (skips animation entirely
+ * under `prefers-reduced-motion`).
+ */
+export interface SpinnerProps {
+    /** @default 'md' */
+    size?: SpinnerSize;
+    /**
+     * Intent color. **When omitted, inherits parent's text color via
+     * `currentColor`** — works seamlessly inside Button, Alert, Card,
+     * or any colored container without configuration. Pass explicitly
+     * for standalone usage on neutral surfaces.
+     */
+    color?: SpinnerColor;
+    /** @default 'md' */
+    thickness?: SpinnerThickness;
+    /**
+     * Renders a faint "ghost ring" behind the spinning arc (20%
+     * opacity of `currentColor`). Improves contrast on busy or dark
+     * backgrounds, reads as more "premium" on slow operations.
+     *
+     * Visually: WITHOUT track you see a rotating partial arc (3/4
+     * circle missing in any frame). WITH track you see the full
+     * circle (low-opacity) AND the arc on top. The track stays put
+     * while the arc rotates.
+     *
+     * @default false
+     */
+    withTrack?: boolean;
+    /**
+     * Accessible label announced by screen readers via
+     * `role="status"` + `aria-live="polite"`. Rendered as a visually-
+     * hidden `<span>` inside the spinner.
+     * @default 'Loading'
+     */
+    label?: string;
+    /**
+     * Wait N milliseconds before rendering — prevents a flash of the
+     * spinner on quick operations (Atlassian-style anti-flash). The
+     * spinner mounts as `null` for the first N ms, then swaps to the
+     * actual SVG. Pairs naturally with `visibleWhen`.
+     *
+     * Common pattern:
+     * ```tsx
+     * <Spinner
+     *   visibleWhen={(e) => e.isSubmitting()}
+     *   delay={150}
+     * />
+     * // Spinner appears only when isSubmitting AND that has been
+     * // true for 150ms — quick submits never flash.
+     * ```
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Reactive visibility predicate — same contract as Alert/Chip/
+     * Button/etc. Spinner is intrinsically conditional (loading IS a
+     * state), so this fits naturally even though the component is
+     * otherwise display-only.
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    className?: string;
+    sx?: ClassValue;
+}
+//# sourceMappingURL=spinner.types.d.ts.map

package/dist/src/components/Spinner/spinner.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D;;;;GAIG;AACH,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAC;AAEX,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,YAAY;IAE3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,oBAAoB;IACpB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;;;;;;;OAiBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAM1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB"}

package/dist/src/components/Spinner/spinner.variants.d.ts

@@ -0,0 +1,111 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { SpinnerColor } from './spinner.types.js';
+/**
+ * Tailwind-variants recipe for `<Spinner>`.
+ *
+ * Axes:
+ *   - `size`      — 5 steps (xs/sm/md/lg/xl) → w/h spacing tokens
+ *   - `thickness` — 3 steps (thin/md/thick) → SVG stroke-width
+ *   - `color`     — 7 intents (or omitted → `currentColor`)
+ *
+ * The stroke + fill of the SVG paths are governed by
+ * `stroke="currentColor"` (set inline in Spinner.tsx), so the root
+ * `text-*` class drives the color. When `color` is omitted, no
+ * `text-*` class is emitted at all — `currentColor` resolves to
+ * whatever the parent's text color is.
+ */
+export declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /**
+     * Color → text-{color}-600 (mid-tone, readable on most surfaces).
+     * Note: text-{color}-600 acts on currentColor inside the SVG via
+     * `stroke="currentColor"`. Neutral uses `text-neutral-600` which
+     * auto-inverts via the dashforgePreset CSS-var swap (no `dark:`
+     * needed). Color rows do NOT carry `dark:` either — the chosen
+     * 600 step works in both modes for the spinner's specific use
+     * (small element, brief visibility).
+     */
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, undefined, "inline-block animate-spin motion-reduce:animate-none", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /**
+     * Color → text-{color}-600 (mid-tone, readable on most surfaces).
+     * Note: text-{color}-600 acts on currentColor inside the SVG via
+     * `stroke="currentColor"`. Neutral uses `text-neutral-600` which
+     * auto-inverts via the dashforgePreset CSS-var swap (no `dark:`
+     * needed). Color rows do NOT carry `dark:` either — the chosen
+     * 600 step works in both modes for the spinner's specific use
+     * (small element, brief visibility).
+     */
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /**
+     * Color → text-{color}-600 (mid-tone, readable on most surfaces).
+     * Note: text-{color}-600 acts on currentColor inside the SVG via
+     * `stroke="currentColor"`. Neutral uses `text-neutral-600` which
+     * auto-inverts via the dashforgePreset CSS-var swap (no `dark:`
+     * needed). Color rows do NOT carry `dark:` either — the chosen
+     * 600 step works in both modes for the spinner's specific use
+     * (small element, brief visibility).
+     */
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+}, undefined, "inline-block animate-spin motion-reduce:animate-none", unknown, unknown, undefined>>;
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>;
+/**
+ * SVG stroke-width per thickness step. Picked to read well at every
+ * size — thin (1.5px) is the minimum readable; thick (3px) saturates
+ * the available radius at sizes xs/sm.
+ */
+export declare const SPINNER_STROKE_WIDTH: Record<'thin' | 'md' | 'thick', number>;
+/**
+ * The track ring renders at this opacity of `currentColor`. 0.2 is
+ * the sweet spot — visible enough to anchor the eye, faint enough
+ * to read as background.
+ */
+export declare const SPINNER_TRACK_OPACITY = 0.2;
+/** Re-export the color name list so playground demos can iterate. */
+export declare const SPINNER_COLORS: SpinnerColor[];
+//# sourceMappingURL=spinner.variants.d.ts.map

package/dist/src/components/Spinner/spinner.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/spinner.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe;;;;;;;;IAUxB;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;IARH;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;IARH;;;;;;;;OAQG;;;;;;;;;;mGAgBL,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAEnE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAIxE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,qEAAqE;AACrE,eAAO,MAAM,cAAc,EAAE,YAAY,EAQxC,CAAC"}

package/dist/src/components/Table/cells/RenderChip.d.ts

@@ -1,80 +1,23 @@
 import type { ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
+import type { ChipProps } from '../../Chip/chip.types.js';
 /**
- * Internal mini-chip used by the cell renderer library. Not exported
- * from `@dashforge/tw` as a standalone component (per Sprint 4.1
- * scope decision — a standalone `<Chip>` may ship in Sprint 5 if
- * demand emerges).
+ * Internal mini-chip used by the Table cell renderer library.
  *
- * Variants:
- *  - `color`: 7 intents (neutral / primary / success / warning /
- *    danger / info / secondary)
- *  - `variant`: `soft` (default) / `solid` / `outline`
- *  - `size`: `sm` / `md`
+ * **Sprint 4.4 refactor**: this component used to own its own
+ * `chipVariants` recipe (the 3 × 7 variant × color matrix). The
+ * matrix has since been promoted to the public `<Chip>` at
+ * `components/Chip/Chip.tsx` as the single source of truth.
+ * `RenderChip` is now a thin wrapper that translates its
+ * `children`-style API to `<Chip label={…}>` without any visual
+ * change. Table cell consumers keep working unchanged.
+ *
+ * For new code, prefer importing `<Chip>` from `@dashforge/tw`
+ * directly — `RenderChip` exists only for the Table cell renderer
+ * registry where the `children` prop convention pre-dates the
+ * public Chip API.
  */
-declare const chipVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        neutral: string;
-        primary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        info: string;
-        secondary: string;
-    };
-    variant: {
-        soft: string;
-        solid: string;
-        outline: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-    };
-}, undefined, string[], {
-    color: {
-        neutral: string;
-        primary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        info: string;
-        secondary: string;
-    };
-    variant: {
-        soft: string;
-        solid: string;
-        outline: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    color: {
-        neutral: string;
-        primary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        info: string;
-        secondary: string;
-    };
-    variant: {
-        soft: string;
-        solid: string;
-        outline: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-type ChipVariants = VariantProps<typeof chipVariants>;
-export interface RenderChipProps extends ChipVariants {
+export interface RenderChipProps extends Pick<ChipProps, 'color' | 'variant' | 'size' | 'className'> {
     children: ReactNode;
-    className?: string;
 }
 export declare function RenderChip(props: RenderChipProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=RenderChip.d.ts.map