@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/charts/utils/animation-utils.js

@@ -144,21 +144,6 @@ const CROSSHAIR_FOLLOW_TRANSITION = {
     duration: 0.2,
     ease: "easeOut",
 };
-/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
-const TOOLTIP_ENTER_TRANSITION = {
-    type: "spring",
-    stiffness: 400,
-    damping: 30,
-    opacity: { duration: 0.15 },
-    scale: { duration: 0.15 },
-};
-/** Tooltip pop-out. */
-const TOOLTIP_EXIT_TRANSITION = {
-    type: "spring",
-    stiffness: 300,
-    damping: 25,
-    duration: 0.15,
-};
 /** Circular-chart segment hover dim/lift (opacity fade + scale pop). */
 const SEGMENT_HOVER_TRANSITION = {
     scale: { duration: 0.2 },
@@ -178,15 +163,10 @@ const CARTESIAN_ENTRANCE_DURATION = 0.7;
 const LINE_DOT_STAGGER = 0.06;
 /** Grouped-bar stagger (BarChart + shared BarRenderer grouped path). */
 const BAR_GROUP_STAGGER = 0.05;
-/** Stacked-bar per-category stagger (StackedBarChart). */
-const STACKED_BAR_STAGGER = 0.08;
 /** Shared BarRenderer stacked-mode per-category delay. */
 const BAR_STACK_CATEGORY_DELAY = 0.25;
 /** Shared BarRenderer stacked-mode per-segment stagger. */
 const BAR_STACK_SEGMENT_STAGGER = 0.12;
-/** ScatterPlot per-point stagger + grow duration. */
-const SCATTER_POINT_STAGGER = 0.01;
-const SCATTER_POINT_DURATION = 0.3;
 /** Marker pop-in spring (line/area dots). */
 const DOT_SPRING = { type: "spring", stiffness: 260, damping: 20 };
 /** Bar grow spring (grouped bars / stacked columns). */
@@ -260,5 +240,23 @@ function stackedSegmentTransition(delay, hasAnimated) {
         },
     };
 }
+/* ── Heatmap ───────────────────────────────────────────────────────────────
+ * Cells fade in along the (row + col) diagonal. Deterministic on purpose: the
+ * delay used to come from Math.random(), which mismatched between the server
+ * and client renders and made every snapshot non-reproducible. */
+/** Heatmap cell fade-in duration (seconds). */
+const HEATMAP_CELL_FADE_DURATION = 0.35;
+/** Per-diagonal stagger for the heatmap cell entrance (seconds). */
+const HEATMAP_CELL_STAGGER = 0.02;
+/** Cap on the entrance stagger, so a large grid still settles quickly (seconds). */
+const HEATMAP_CELL_MAX_DELAY = 0.3;
+/** Deterministic entrance delay for the cell at (row, col). */
+function heatmapCellDelay(row, col) {
+    return Math.min((row + col) * HEATMAP_CELL_STAGGER, HEATMAP_CELL_MAX_DELAY);
+}
+/** Cell hover scale-up (`whileHover`). */
+const HEATMAP_CELL_HOVER_TRANSITION = { duration: 0.15, ease: "easeOut" };
+/** Cell press scale-down (`whileTap`). */
+const HEATMAP_CELL_TAP_TRANSITION = { duration: 0.1, ease: "easeOut" };
 
-export { BAR_GROUP_STAGGER, BAR_SPRING, BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, CARTESIAN_ENTRANCE_DURATION, CIRCULAR_CHART_ANIMATIONS, CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION, DOT_SPRING, HALO_FADE_TRANSITION, LINE_DOT_STAGGER, RING_FADE_TRANSITION, RISE_FROM_BASELINE, SCALE_FROM_CENTER, SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER, SEGMENT_HOVER_TRANSITION, SPRING_PRESETS, STACKED_BAR_STAGGER, TOOLTIP_ENTER_TRANSITION, TOOLTIP_EXIT_TRANSITION, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, riseTransition, stackedSegmentTransition };
+export { BAR_GROUP_STAGGER, BAR_SPRING, BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, CARTESIAN_ENTRANCE_DURATION, CIRCULAR_CHART_ANIMATIONS, CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION, DOT_SPRING, HALO_FADE_TRANSITION, HEATMAP_CELL_FADE_DURATION, HEATMAP_CELL_HOVER_TRANSITION, HEATMAP_CELL_MAX_DELAY, HEATMAP_CELL_STAGGER, HEATMAP_CELL_TAP_TRANSITION, LINE_DOT_STAGGER, RING_FADE_TRANSITION, RISE_FROM_BASELINE, SCALE_FROM_CENTER, SEGMENT_HOVER_TRANSITION, SPRING_PRESETS, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, heatmapCellDelay, riseTransition, stackedSegmentTransition };

package/dist/components/charts/utils/bar-emphasis.d.ts

@@ -25,6 +25,16 @@ export interface BarEmphasisInput {
     isFocused: boolean;
     isAnyBarHovered: boolean;
     isGradientVariant: boolean;
+    /**
+     * Whether hover/focus gets the premium emphasis (glow ring + colored stroke + the
+     * stronger sibling dim). Defaults to `isGradientVariant`, since for column bars the
+     * two travel together — so BarChart and ComboChart are unaffected.
+     *
+     * Pass it explicitly for a chart whose fills are flat but which still wants the
+     * premium hover (HorizontalBarChart). The two really are separate axes: "how the bar
+     * is painted" vs "how it responds to hover".
+     */
+    premiumEmphasis?: boolean;
 }
 export interface BarEmphasisState {
     /** Hover OR keyboard focus, gradient variant only — drives ring + stroke. */
@@ -32,7 +42,7 @@ export interface BarEmphasisState {
     /** A sibling is hovered and this bar isn't — drives the dim. */
     shouldReduceOpacity: boolean;
 }
-export declare function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, }: BarEmphasisInput): BarEmphasisState;
+export declare function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, premiumEmphasis, }: BarEmphasisInput): BarEmphasisState;
 /**
  * Animated hover-dim opacity. Belongs in the motion `animate` prop, not
  * `style` — motion.path freezes plain style values at mount.
@@ -46,17 +56,36 @@ export declare function barFill({ isGradientVariant, gradientFill, isNull, shoul
     shouldReduceOpacity: boolean;
     fillColor: string;
 }): string;
-/** Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none. */
-export declare function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, }: {
+/**
+ * Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none.
+ *
+ * `showRestingStroke` (default `true`) keeps the resting white hairline that gradient
+ * column bars carry. Set it `false` for bars that should read as flat shapes with no
+ * outline at rest — the focus and emphasis strokes still apply, so keyboard focus stays
+ * visible either way. Prefer this flag over re-deriving the cascade at a call site:
+ * the two hand-copies of this logic drifted once already (§19).
+ */
+export declare function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, showRestingStroke, }: {
     isFocused: boolean;
     isEmphasized: boolean;
     isGradientVariant: boolean;
     fillColor: string;
+    showRestingStroke?: boolean;
 }): {
     stroke: string;
     strokeWidth: number | undefined;
     strokeOpacity: number;
 };
+/**
+ * The hover glow-ring filter alone. Split out of `BarSeriesDefs` so a chart with FLAT
+ * fills can still render the premium hover ring without emitting a gradient def it
+ * never references — `BarSeriesDefs` composes it, so both paths stay single-sourced
+ * and the ring can't drift between them.
+ */
+export declare const BarRingDef: React.FC<{
+    ringId: string;
+    color: string;
+}>;
 /**
  * Per-series SVG defs for the gradient variant: vertical gradient fill,
  * colored drop shadow, and the hover glow-ring filter. Render inside <defs>.

package/dist/components/charts/utils/bar-emphasis.js

@@ -16,9 +16,9 @@ const BAR_RING_STROKE_OPACITY = 0.24;
 function barRingStrokeWidth(barWidth) {
     return Math.min(14, Math.max(8, barWidth * 0.08));
 }
-function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, }) {
+function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, premiumEmphasis = isGradientVariant, }) {
     return {
-        isEmphasized: isGradientVariant && (isHovered || isFocused),
+        isEmphasized: premiumEmphasis && (isHovered || isFocused),
         shouldReduceOpacity: isAnyBarHovered && !isHovered,
     };
 }
@@ -41,29 +41,45 @@ function barFill({ isGradientVariant, gradientFill, isNull, shouldReduceOpacity,
             ? "var(--color-surface-sunken)"
             : fillColor;
 }
-/** Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none. */
-function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, }) {
+/**
+ * Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none.
+ *
+ * `showRestingStroke` (default `true`) keeps the resting white hairline that gradient
+ * column bars carry. Set it `false` for bars that should read as flat shapes with no
+ * outline at rest — the focus and emphasis strokes still apply, so keyboard focus stays
+ * visible either way. Prefer this flag over re-deriving the cascade at a call site:
+ * the two hand-copies of this logic drifted once already (§19).
+ */
+function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, showRestingStroke = true, }) {
+    const hasRestingStroke = isGradientVariant && showRestingStroke;
     return {
         stroke: isFocused
             ? "var(--color-primary)"
             : isEmphasized
                 ? fillColor
-                : isGradientVariant
+                : hasRestingStroke
                     ? BAR_RESTING_STROKE
                     : "none",
-        strokeWidth: isFocused ? 3 : isEmphasized ? 2 : isGradientVariant ? 1 : undefined,
+        strokeWidth: isFocused ? 3 : isEmphasized ? 2 : hasRestingStroke ? 1 : undefined,
         strokeOpacity: isEmphasized ? BAR_EMPHASIS_STROKE_OPACITY : 1,
     };
 }
+/**
+ * The hover glow-ring filter alone. Split out of `BarSeriesDefs` so a chart with FLAT
+ * fills can still render the premium hover ring without emitting a gradient def it
+ * never references — `BarSeriesDefs` composes it, so both paths stay single-sourced
+ * and the ring can't drift between them.
+ */
+const BarRingDef = ({ ringId, color, }) => (jsxs("filter", { id: ringId, x: "-25%", y: "-25%", width: "150%", height: "165%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: color, floodOpacity: "0.42" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.18" })] }));
 /**
  * Per-series SVG defs for the gradient variant: vertical gradient fill,
  * colored drop shadow, and the hover glow-ring filter. Render inside <defs>.
  */
-const BarSeriesDefs = ({ gradientId, shadowId, ringId, color }) => (jsxs(Fragment, { children: [jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.46" }), jsx("stop", { offset: "14%", stopColor: color, stopOpacity: "0.9" }), jsx("stop", { offset: "42%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "72%", stopColor: color, stopOpacity: "0.96" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.82" })] }), jsx("filter", { id: shadowId, x: "-35%", y: "-35%", width: "170%", height: "190%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.22" }) }), jsxs("filter", { id: ringId, x: "-25%", y: "-25%", width: "150%", height: "165%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: color, floodOpacity: "0.42" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.18" })] })] }));
+const BarSeriesDefs = ({ gradientId, shadowId, ringId, color }) => (jsxs(Fragment, { children: [jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.46" }), jsx("stop", { offset: "14%", stopColor: color, stopOpacity: "0.9" }), jsx("stop", { offset: "42%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "72%", stopColor: color, stopOpacity: "0.96" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.82" })] }), jsx("filter", { id: shadowId, x: "-35%", y: "-35%", width: "170%", height: "190%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.22" }) }), jsx(BarRingDef, { ringId: ringId, color: color })] }));
 /**
  * Hover/focus glow ring behind an emphasized bar. Mount/unmount it via
  * `show` — enter/exit fades are handled internally.
  */
 const BarGlowRing = ({ show, pathD, color, barWidth, filter }) => (jsx(AnimatePresence, { children: show && (jsx(motion.path, { d: pathD, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: RING_FADE_TRANSITION, fill: "none", stroke: color, strokeWidth: barRingStrokeWidth(barWidth), strokeOpacity: BAR_RING_STROKE_OPACITY, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", filter: filter, style: { pointerEvents: "none" } })) }));
 
-export { BAR_DIM_OPACITY_FLAT, BAR_DIM_OPACITY_GRADIENT, BAR_EMPHASIS_STROKE_OPACITY, BAR_RESTING_STROKE, BAR_RING_STROKE_OPACITY, BarGlowRing, BarSeriesDefs, barDimOpacity, barFill, barRingStrokeWidth, barStrokeStyle, deriveBarEmphasis };
+export { BAR_DIM_OPACITY_FLAT, BAR_DIM_OPACITY_GRADIENT, BAR_EMPHASIS_STROKE_OPACITY, BAR_RESTING_STROKE, BAR_RING_STROKE_OPACITY, BarGlowRing, BarRingDef, BarSeriesDefs, barDimOpacity, barFill, barRingStrokeWidth, barStrokeStyle, deriveBarEmphasis };

package/dist/components/charts/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { resolveSeriesColor } from "./series-color";
 export { extractFillClass, extractStrokeClass, colorClassToVariable, combineClasses, createColorClass, generateSeriesColors, DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, generateColorPalette, getContrastColor, } from './color-utils';
 export { SafeMath, validateChart, validateChartData, validateChartConfig, validateDataConfigCompatibility, sanitizeChartData, calculateSafeScaleRange, niceNum, generateNiceTicks, type ChartValidationError, type ChartValidationResult, } from './chart-validation';
 export { getSpringAnimation, getUseSpringConfig, getStaggerDelay, SPRING_PRESETS, CIRCULAR_CHART_ANIMATIONS, type SpringConfig, type NoAnimationConfig, type AnimationPreset, } from './animation-utils';

package/dist/components/charts/utils/series-color.d.ts

@@ -0,0 +1,7 @@
+import type { ChartConfig } from "../types/chart.types";
+/**
+ * Resolves the paint color for series `key` at position `index`.
+ * Priority: explicit config[key].color (preserving the bare-token DX,
+ * e.g. "success" -> "var(--color-success)"), then palette[index % length].
+ */
+export declare function resolveSeriesColor(index: number, key: string | undefined, config: ChartConfig | undefined, palette: readonly string[]): string;

package/dist/components/charts/utils/series-color.js

@@ -0,0 +1,20 @@
+/**
+ * Resolves the paint color for series `key` at position `index`.
+ * Priority: explicit config[key].color (preserving the bare-token DX,
+ * e.g. "success" -> "var(--color-success)"), then palette[index % length].
+ */
+function resolveSeriesColor(index, key, config, palette) {
+    var _a;
+    const raw = key ? (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color : undefined;
+    if (raw) {
+        const isBareToken = !raw.startsWith("var(") &&
+            !raw.startsWith("#") &&
+            !raw.startsWith("rgb") &&
+            !raw.startsWith("hsl") &&
+            raw.includes("-");
+        return isBareToken ? `var(--color-${raw})` : raw;
+    }
+    return palette.length > 0 ? palette[index % palette.length] : "var(--color-chart-1)";
+}
+
+export { resolveSeriesColor };

package/dist/components/core/Accordion/Accordion.theme.js

@@ -4,11 +4,11 @@ const accordionTheme = {
     // Base container styles for stacked variant (unified card)
     baseStyleStacked: "w-full border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
     // Item styles for separated variant (individual cards with spacing)
-    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0",
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-surface)] overflow-hidden mb-2 last-of-type:mb-0",
     // Item styles for stacked variant (shared borders, no spacing)
-    itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
+    itemStyleStacked: "bg-[var(--color-surface)] border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)
-    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] text-sm",
+    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-[var(--motion-duration-base)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] text-sm",
     // Body styles (shared across variants)
     bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden text-sm",
     // Body inner wrapper styles

package/dist/components/core/Accordion/AccordionTrigger.js

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './AccordionContext.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 import { motion } from 'motion/react';
-import { PlusIcon } from '@heroicons/react/24/outline';
+import { Plus } from '@phosphor-icons/react';
 import { createTriggerIconVariants } from './Accordion.animations.js';
 
 const AccordionTrigger = React__default.forwardRef(({ children, className, chevron, chevronRotation, iconRotation, chevronPosition = "right", ...props }, ref) => {
@@ -14,7 +14,7 @@ const AccordionTrigger = React__default.forwardRef(({ children, className, chevr
     const { isOpen, disabled, toggle, triggerId, contentId } = useAccordionItemContext();
     const resolvedChevronRotation = (_a = chevronRotation !== null && chevronRotation !== void 0 ? chevronRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
     // Resolve the indicator icon
-    const defaultChevronIcon = jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
+    const defaultChevronIcon = jsx(Plus, { className: "size-4", weight: "bold" });
     const resolvedChevron = chevron === null
         ? null
         : chevron !== undefined

package/dist/components/core/Alert/Alert.animations.d.ts

@@ -1,8 +1,16 @@
 import { Variants } from "motion/react";
 /**
- * Alert entrance/exit animation variants
- * Entrance: slide down from -8px + fade in
- * Exit: fade out + collapse height
+ * Alert dismiss animation variants.
+ *
+ * `visible` is the RESTING state, not an entrance — Alert mounts with
+ * `initial={false}` so it paints straight into `visible` and never plays these
+ * on mount. Only the `visible -> hidden` direction runs, when the alert is
+ * dismissed: fade + slide out while collapsing height/padding/margin so
+ * surrounding content closes the gap smoothly.
+ *
+ * `hidden` therefore keeps its full collapse geometry (that IS the dismiss),
+ * and `visible` keeps `y`/`opacity` so the collapse has somewhere to travel
+ * from. Uses library spring presets for a premium feel.
  */
 export declare const alertVariants: Variants;
 /**

package/dist/components/core/Alert/Alert.animations.js

@@ -1,13 +1,25 @@
 "use client";
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs } from '../../../theme/animations.js';
+
 /**
- * Alert entrance/exit animation variants
- * Entrance: slide down from -8px + fade in
- * Exit: fade out + collapse height
+ * Alert dismiss animation variants.
+ *
+ * `visible` is the RESTING state, not an entrance — Alert mounts with
+ * `initial={false}` so it paints straight into `visible` and never plays these
+ * on mount. Only the `visible -> hidden` direction runs, when the alert is
+ * dismissed: fade + slide out while collapsing height/padding/margin so
+ * surrounding content closes the gap smoothly.
+ *
+ * `hidden` therefore keeps its full collapse geometry (that IS the dismiss),
+ * and `visible` keeps `y`/`opacity` so the collapse has somewhere to travel
+ * from. Uses library spring presets for a premium feel.
  */
 const alertVariants = {
     hidden: {
         opacity: 0,
-        y: -8,
+        y: -12,
         height: 0,
         paddingTop: 0,
         paddingBottom: 0,
@@ -15,8 +27,13 @@ const alertVariants = {
         marginBottom: 0,
         overflow: "hidden",
         transition: {
-            duration: 0.15,
-            ease: [0.4, 0, 1, 1],
+            height: springs.smooth,
+            paddingTop: springs.smooth,
+            paddingBottom: springs.smooth,
+            marginTop: springs.smooth,
+            marginBottom: springs.smooth,
+            y: springs.premium,
+            opacity: { duration: 0.15 },
         },
     },
     visible: {
@@ -29,8 +46,13 @@ const alertVariants = {
         marginBottom: undefined,
         overflow: "visible",
         transition: {
-            duration: 0.2,
-            ease: [0.4, 0, 0.2, 1],
+            y: springs.premium,
+            height: springs.smooth,
+            paddingTop: springs.smooth,
+            paddingBottom: springs.smooth,
+            marginTop: springs.smooth,
+            marginBottom: springs.smooth,
+            opacity: { duration: 0.25 },
         },
     },
 };

package/dist/components/core/Alert/Alert.js

@@ -5,15 +5,15 @@ import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { alertTheme } from './Alert.theme.js';
 import { reducedMotionAlertVariants, alertVariants } from './Alert.animations.js';
-import { XMarkIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
+import { X, XCircle, Warning, CheckCircle, Info, Bell } from '@phosphor-icons/react';
 import { Button } from '../Button/Button.js';
 
 const defaultIcons = {
-    neutral: BellIcon,
-    primary: InformationCircleIcon,
-    success: CheckCircleIcon,
-    warning: ExclamationTriangleIcon,
-    danger: XCircleIcon,
+    mono: Bell,
+    primary: Info,
+    success: CheckCircle,
+    warning: Warning,
+    danger: XCircle,
 };
 const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
     var _a;
@@ -36,7 +36,15 @@ const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, d
             return null;
         }
         if (React__default.isValidElement(icon)) {
-            return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: icon }));
+            // A custom icon gets the SAME size + semantic color the default icon
+            // gets, applied as defaults so a consumer className still wins (§4).
+            // Without this the element inherited neither: Phosphor icons default to
+            // `1em`, so a custom icon rendered at the root's `text-sm` (14px) inside
+            // this 24px box, in the ambient text color rather than the intent color.
+            const customIcon = icon;
+            return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: React__default.cloneElement(customIcon, {
+                    className: cn("w-6 h-6", iconColor, customIcon.props.className),
+                }) }));
         }
         const IconComponent = defaultIcons[color];
         return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
@@ -46,8 +54,14 @@ const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, d
                         ? jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })
                         : title), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })
-                        : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
-    const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, initial: "hidden", animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
+                        : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(X, { className: "size-4", weight: "bold" }) }))] }));
+    const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, 
+        // No mount animation. An Alert is page content, not a transient
+        // notification (that's Toast) — it is usually present at first paint, so
+        // animating `hidden -> visible` on mount meant every page load played an
+        // expand. `initial={false}` starts at the `visible` variant and animates
+        // only on a later state change, which is what the collapse below needs.
+        initial: false, animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
             if (definition === "hidden" && isDismissing) {
                 onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
             }

package/dist/components/core/Alert/Alert.theme.js

@@ -6,7 +6,7 @@ import { semanticTextColors } from '../../../utils/colorUtils.js';
  */
 const alertTheme = {
     // Base styles applied to all alerts
-    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
+    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-surface)]/80",
     // Icon color styles per color
     iconColors: semanticTextColors,
     // State styles

package/dist/components/core/Alert/Alert.types.d.ts

@@ -28,9 +28,11 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"
     dismissible?: boolean;
     /**
      * Custom icon for the alert
-     * - Provide custom icon: overrides the default variant icon
+     * - Provide custom icon: overrides the default color icon. It inherits the
+     *   default icon's size and semantic color; pass a `className` on the element
+     *   to override either (e.g. `icon={<Fire className="size-5 text-purple-500" />}`).
      * - Set to null: hides icon completely
-     * - Leave undefined: shows default variant icon
+     * - Leave undefined: shows default color icon
      */
     icon?: ReactNode | null;
     /** Whether to show the default icon for the variant */

package/dist/components/core/AlertDialog/AlertDialog.js

@@ -15,7 +15,7 @@ import { useModalContext } from '../Modal/ModalContext.js';
  */
 function AlertDialogSubtitle({ children }) {
     const { subtitleId } = useModalContext();
-    return (jsx("div", { id: subtitleId, className: "text-[var(--color-text-secondary)] text-base", children: children }));
+    return (jsx("div", { id: subtitleId, className: "text-[var(--color-text-secondary)] text-sm", children: children }));
 }
 const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -24,7 +24,7 @@ const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) =>
     const triggerElement = isValidElement(trigger)
         ? cloneElement(trigger, { onClick: handleOpen })
         : null;
-    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx(AlertDialogSubtitle, { children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
+    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-[var(--modal-radius)] p-3 mb-[var(--modal-py)] w-fit border border-[var(--color-border-secondary)]", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx(AlertDialogSubtitle, { children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pt-6 pb-[var(--modal-py)]", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";
 

package/dist/components/core/Avatar/Avatar.js

@@ -7,25 +7,64 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { MeshGradient } from '../../effects/MeshGradient/MeshGradient.js';
 import { MESH_PALETTE_BY_NAME, DEFAULT_MESH_COLORS, getMeshTextTone } from '../../effects/MeshGradient/MeshGradient.utils.js';
-import { CheckBadgeIcon, UserIcon } from '@heroicons/react/24/solid';
+import { SealCheck, User } from '@phosphor-icons/react';
 
 // Number of marble shapes the gradient renders — shared by the render and the
 // text-tone calc so both read the same deterministic field. The gradient's blur
 // is resolution-independent (SVG viewBox units), so no per-size tuning is needed.
 const MESH_COUNT = 2;
+// Each token's geometry, as the CSS variable that carries its px value. Keeping
+// the indirection means a themed `--avatar-size-*` still flows through.
+const SIZE_TOKEN_VAR = {
+    xs: "var(--avatar-size-xs)",
+    sm: "var(--avatar-size-sm)",
+    md: "var(--avatar-size-md)",
+    lg: "var(--avatar-size-lg)",
+    xl: "var(--avatar-size-xl)",
+};
+// The default px ladder from `theme.css`, mirrored here for ONE purpose: picking
+// which rung a numeric size's decorations (glyph, status dot, verified badge,
+// text gap) should borrow. Geometry never reads this — it always resolves
+// through the CSS variable above — so a theme that retunes the ladder still
+// sizes correctly; only the rung chosen for a numeric size reads the defaults.
+const SIZE_TOKEN_PX = {
+    xs: 24,
+    sm: 32,
+    md: 40,
+    lg: 48,
+    xl: 64,
+};
+const isSizeToken = (size) => typeof size === "string";
+/** The rung a size sits closest to. Identity for tokens. */
+const nearestSizeToken = (size) => {
+    if (isSizeToken(size))
+        return size;
+    return Object.keys(SIZE_TOKEN_PX).reduce((best, token) => Math.abs(SIZE_TOKEN_PX[token] - size) < Math.abs(SIZE_TOKEN_PX[best] - size)
+        ? token
+        : best);
+};
 const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, gradient = false, gradientVariant = "marble", gradientColors, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, title, subtitle, verified = false, ...props }, ref) => {
     var _a;
     const [imageError, setImageError] = useState(false);
     const [retries, setRetries] = useState(0);
     const retryTimerRef = useRef(null);
+    if (process.env.NODE_ENV !== "production" &&
+        typeof size === "number" &&
+        (!Number.isFinite(size) || size <= 0)) {
+        // eslint-disable-next-line no-console
+        console.warn(`[Avatar]: \`size\` must be a positive number of pixels; received ${size}.`);
+    }
+    // Exact geometry for the circle; nearest rung for everything hung off it.
+    const sizeValue = isSizeToken(size) ? SIZE_TOKEN_VAR[size] : `${size}px`;
+    const sizeToken = nearestSizeToken(size);
     // Normalize null to undefined for internal use
     const resolvedName = name !== null && name !== void 0 ? name : undefined;
-    // Initials derived from the name (xs shows a single initial).
+    // Initials derived from the name (the xs rung shows a single initial).
     const initials = resolvedName
         ? resolvedName
             .split(" ")
             .map((part) => part[0])
-            .slice(0, size === "xs" ? 1 : initialsCount)
+            .slice(0, sizeToken === "xs" ? 1 : initialsCount)
             .join("")
             .toUpperCase()
         : "";
@@ -40,8 +79,8 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
     // theme-stable neutral tokens (so the choice holds in light AND dark mode).
     const gradientTextColor = gradient
         ? getMeshTextTone(gradientSeed, gradientPalette, MESH_COUNT) === "dark"
-            ? "text-[var(--color-neutral-950)]"
-            : "text-[var(--color-neutral-50)]"
+            ? "text-[var(--color-mono-950)]"
+            : "text-[var(--color-mono-50)]"
         : undefined;
     // Glyph shown over the gradient: explicit fallback, else initials, else none
     // (a clean gradient — no default user icon when there's no name).
@@ -88,41 +127,7 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
             return jsx("span", { "aria-hidden": "true", children: initials });
         }
         // 3. Default placeholder icon
-        return jsx(UserIcon, { className: "w-1/2 h-1/2" });
-    };
-    // Determine status indicator size based on avatar size
-    const getStatusSize = () => {
-        switch (size) {
-            case "xs":
-                return "size-1.5 left-0 bottom-0.5";
-            case "sm":
-                return "size-2 left-0 bottom-0";
-            case "md":
-                return "size-2 left-0 bottom-0";
-            case "lg":
-                return "size-2.5 left-0 bottom-0";
-            case "xl":
-                return "size-3 left-0 bottom-0";
-            default:
-                return "size-2 left-0 bottom-0";
-        }
-    };
-    // Determine verified badge size based on avatar size
-    const getVerifiedBadgeSize = () => {
-        switch (size) {
-            case "xs":
-                return "size-2.5 -right-0.5 -bottom-0.5";
-            case "sm":
-                return "size-3.5 -right-0.5 -bottom-0.5";
-            case "md":
-                return "size-4 -right-0.5 -bottom-0.5";
-            case "lg":
-                return "size-5 -right-1 -bottom-1";
-            case "xl":
-                return "size-6 -right-1.5 -bottom-1.5";
-            default:
-                return "size-4 -right-0.5 -bottom-0.5";
-        }
+        return jsx(User, { className: "w-1/2 h-1/2" });
     };
     // Create full accessibility label including context if provided
     const accessibilityLabel = contextualLabel
@@ -133,7 +138,10 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
     const resolvedTitle = title !== null && title !== void 0 ? title : (subtitle ? resolvedName : undefined);
     const hasTextSection = !!(resolvedTitle || subtitle);
     // The avatar circle with status indicator
-    const avatarCircle = (jsxs("div", { className: cn("relative inline-flex avatar-wrapper shrink-0", groupPosition), children: [jsxs("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: [gradient && (jsx(MeshGradient, { seed: gradientSeed, colors: gradientPalette, count: MESH_COUNT })), src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "relative z-10 size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: cn("avatar-fallback relative z-10 flex items-center justify-center size-full", gradient && cn(gradientTextColor, "drop-shadow")), children: gradient ? gradientGlyph : getFallbackContent() }))] }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status })), verified && (jsx("span", { className: cn("absolute rounded-full inline-grid place-items-center ring-2 ring-[var(--color-background)] bg-white dark:bg-[var(--color-surface)] shadow-sm", getVerifiedBadgeSize()), "aria-label": "Verified", children: jsx(CheckBadgeIcon, { className: "size-full text-[var(--color-primary)]" }) }))] }));
+    const avatarCircle = (jsxs("div", { className: cn("relative inline-flex avatar-wrapper shrink-0", groupPosition), children: [jsxs("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizeStyle, avatarTheme.glyphSizes[sizeToken], className), style: { "--avatar-size": sizeValue }, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: [gradient && (jsx(MeshGradient, { seed: gradientSeed, colors: gradientPalette, count: MESH_COUNT })), src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "relative z-10 size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: cn("avatar-fallback relative z-10 flex items-center justify-center size-full", gradient && cn(gradientTextColor, "drop-shadow")), children: gradient ? gradientGlyph : getFallbackContent() }))] }), status !== "none" && (jsx("span", { className: cn(
+                // Ring WIDTH ramps per size (see `statusSizes`); only its colour
+                // is shared here.
+                "absolute rounded-full ring-[var(--color-background)]", avatarTheme.statusPositionStyle, avatarTheme.statusSizes[sizeToken], avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status })), verified && (jsx("span", { className: cn("absolute rounded-full z-10 inline-grid place-items-center ring-2 ring-[var(--color-background)] bg-white dark:bg-[var(--color-surface)] shadow-sm", avatarTheme.verifiedSizes[sizeToken]), "aria-label": "Verified", children: jsx(SealCheck, { className: "size-full text-[var(--color-primary)]" }) }))] }));
     // Wrap circle in tooltip if needed
     const avatarWithTooltip = showTooltip && resolvedName ? (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarCircle })) : (avatarCircle);
     // If no text section, render just the avatar
@@ -145,7 +153,7 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
             className: "inline-flex", role: ariaRole, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: avatarWithTooltip }));
     }
     // Render avatar with text section
-    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center", avatarTheme.gapSizes[size]), role: ariaRole, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [avatarWithTooltip, jsxs("div", { className: "min-w-0", children: [resolvedTitle && (jsx("div", { className: cn(avatarTheme.titleStyle, avatarTheme.textSizes[size]), children: resolvedTitle })), subtitle && (jsx("div", { className: cn(avatarTheme.subtitleStyle, avatarTheme.textSizes[size]), children: subtitle }))] })] }));
+    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center", avatarTheme.gapSizes[sizeToken]), role: ariaRole, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [avatarWithTooltip, jsxs("div", { className: "min-w-0", children: [resolvedTitle && (jsx("div", { className: cn(avatarTheme.titleStyle, avatarTheme.textSizes[sizeToken]), children: resolvedTitle })), subtitle && (jsx("div", { className: cn(avatarTheme.subtitleStyle, avatarTheme.textSizes[sizeToken]), children: subtitle }))] })] }));
 });
 // Set display name for dev tools and Storybook
 Avatar.displayName = "Avatar";

package/dist/components/core/Avatar/Avatar.theme.d.ts

@@ -1,12 +1,16 @@
-import { AvatarSize, AvatarStatus } from "./Avatar.types";
+import { AvatarSizeToken, AvatarStatus } from "./Avatar.types";
 interface AvatarTheme {
     baseStyle: string;
-    sizes: Record<AvatarSize, string>;
+    sizeStyle: string;
+    glyphSizes: Record<AvatarSizeToken, string>;
     statuses: Record<AvatarStatus, string>;
+    statusPositionStyle: string;
+    statusSizes: Record<AvatarSizeToken, string>;
+    verifiedSizes: Record<AvatarSizeToken, string>;
     titleStyle: string;
     subtitleStyle: string;
-    textSizes: Record<AvatarSize, string>;
-    gapSizes: Record<AvatarSize, string>;
+    textSizes: Record<AvatarSizeToken, string>;
+    gapSizes: Record<AvatarSizeToken, string>;
 }
 export declare const avatarTheme: AvatarTheme;
 export {};