@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.33

package/dist/components/charts/hooks/useChartAccessibility.js

@@ -1,10 +1,13 @@
 "use client";
-import { useState, useRef, useCallback, useMemo } from 'react';
+import { useState, useId, useCallback, useMemo } from 'react';
 
 function useChartAccessibility({ chartType, data, config, title, description, enableKeyboardNavigation = true, }) {
     const [focusedElementIndex, setFocusedElementIndex] = useState(-1);
     const [isKeyboardMode, setIsKeyboardMode] = useState(false);
-    const descriptionId = useRef(`chart-description-${Math.random().toString(36).substr(2, 9)}`);
+    // useId() (never Math.random()) — the id is rendered into markup on both the
+    // sr-only element and the container's aria-describedby, so a per-render
+    // random value mismatches across hydration.
+    const descriptionId = useId();
     // Generate chart summary for screen readers
     const generateChartSummary = useCallback(() => {
         var _a;
@@ -102,16 +105,16 @@ function useChartAccessibility({ chartType, data, config, title, description, en
     const chartAccessibilityProps = useMemo(() => ({
         role: 'img',
         'aria-label': ariaLabel,
-        'aria-describedby': description ? descriptionId.current : undefined,
+        'aria-describedby': description ? descriptionId : undefined,
         tabIndex: enableKeyboardNavigation ? 0 : -1,
         onKeyDown: handleKeyDown,
-    }), [ariaLabel, description, enableKeyboardNavigation, handleKeyDown]);
+    }), [ariaLabel, description, descriptionId, enableKeyboardNavigation, handleKeyDown]);
     // Description element props
     const descriptionProps = useMemo(() => description ? {
-        id: descriptionId.current,
+        id: descriptionId,
         className: 'sr-only',
         children: description,
-    } : null, [description]);
+    } : null, [description, descriptionId]);
     return {
         chartAccessibilityProps,
         descriptionProps,

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

@@ -7,13 +7,11 @@ export { AreaChart } from "./AreaChart";
 export { DonutChart } from "./DonutChart/DonutChart";
 export { MultiSegmentDonutChart } from "./DonutChart/MultiSegmentDonutChart";
 export { Heatmap } from "./Heatmap";
-export { FunnelChart } from "./FunnelChart";
-export { ScatterPlot } from "./ScatterPlot";
 export { RadarChart } from "./RadarChart";
 export { ComboChart } from "./ComboChart";
 export { ActivityRings } from "./ActivityRings";
 export { LollipopChart } from "./LollipopChart";
-export { ChartTooltip } from "./shared/ChartTooltip";
+export { ChartTooltip } from "../core/shared/ChartTooltip";
 export { ChartLegend } from "./shared/ChartLegend";
 export { XAxis, YAxis } from "./shared/ChartAxis";
 export { ChartText } from "./shared/ChartText";
@@ -25,9 +23,9 @@ export { useTooltipPosition } from "./hooks/useTooltipPosition";
 export { useChartAccessibility } from "./hooks/useChartAccessibility";
 export { useChartValidation } from "./hooks/useChartValidation";
 export { generateColorPalette, getContrastColor } from "./utils/color-utils";
-export { processHeatmapData, calculateIntensity, createGridMatrix, getDefaultTooltipContent, formatAxisLabel, generateSampleData, } from "./Heatmap/utils/heatmapUtils";
+export { processHeatmapData, calculateIntensity, createGridMatrix, getDefaultTooltipContent, formatAxisLabel, } from "./Heatmap/utils/heatmapUtils";
 export type { ChartDataPoint, ChartConfig, ChartVariant, CurveType, ChartLegendPosition, BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, StandardAxisConfig, ChartThemeOverrides, CHART_DEFAULTS, } from "./types/chart.types";
-export type { ChartTooltipProps, ChartTooltipContentProps, } from "./shared/ChartTooltip/ChartTooltip.types";
+export type { ChartTooltipProps, ChartTooltipContentProps, } from "../core/shared/ChartTooltip/ChartTooltip.types";
 export type { ChartLegendProps, ChartLegendItem, } from "./shared/ChartLegend/ChartLegend.types";
 export type { BaseAxisProps, XAxisProps, YAxisProps, AxisTickProps, } from "./shared/ChartAxis/ChartAxis.types";
 export type { ChartTextProps, ChartTextTheme, } from "./shared/ChartText/ChartText.types";
@@ -41,9 +39,7 @@ export type { LineChartProps } from "./LineChart/LineChart.types";
 export type { AreaChartProps } from "./AreaChart/AreaChart.types";
 export type { DonutChartProps } from "./DonutChart/DonutChart.types";
 export type { MultiSegmentDonutChartProps, DonutSegment, } from "./DonutChart/MultiSegmentDonutChart.types";
-export type { HeatmapProps } from "./Heatmap/Heatmap.types";
-export type { FunnelChartProps, FunnelChartDataPoint, } from "./FunnelChart/FunnelChart.types";
-export type { ScatterPlotProps, ScatterPlotDataPoint, } from "./ScatterPlot/ScatterPlot.types";
+export type { HeatmapProps, HeatmapVariant } from "./Heatmap/Heatmap.types";
 export type { RadarChartProps, RadarChartSeries, } from "./RadarChart/RadarChart.types";
 export type { ComboChartProps, ComboChartConfig, SeriesType, } from "./ComboChart/ComboChart.types";
 export type { ActivityRingsProps, RingData, ActivityRingsThemeOverrides, } from "./ActivityRings/ActivityRings.types";

package/dist/components/charts/index.js

@@ -12,15 +12,13 @@ export { Heatmap } from './Heatmap/Heatmap.js';
 import './Heatmap/HeatmapCell.js';
 import 'react/jsx-runtime';
 import '../../utils/cn.js';
-export { calculateIntensity, createGridMatrix, formatAxisLabel, generateSampleData, getDefaultTooltipContent, processHeatmapData } from './Heatmap/utils/heatmapUtils.js';
-export { FunnelChart } from './FunnelChart/FunnelChart.js';
-export { ScatterPlot } from './ScatterPlot/ScatterPlot.js';
+export { calculateIntensity, createGridMatrix, formatAxisLabel, getDefaultTooltipContent, processHeatmapData } from './Heatmap/utils/heatmapUtils.js';
 export { RadarChart } from './RadarChart/RadarChart.js';
 export { ComboChart } from './ComboChart/ComboChart.js';
 export { ActivityRings } from './ActivityRings/ActivityRings.js';
 export { LollipopChart } from './LollipopChart/LollipopChart.js';
 export { LOLLIPOP_CHART_DEFAULTS } from './LollipopChart/LollipopChart.types.js';
-export { ChartTooltip } from './shared/ChartTooltip/ChartTooltip.js';
+export { ChartTooltip } from '../core/shared/ChartTooltip/ChartTooltip.js';
 export { ChartLegend } from './shared/ChartLegend/ChartLegend.js';
 export { XAxis } from './shared/ChartAxis/XAxis.js';
 export { YAxis } from './shared/ChartAxis/YAxis.js';

package/dist/components/charts/shared/ChartText/ChartText.theme.js

@@ -3,7 +3,7 @@
  * Uses fixed Tailwind styling for consistency across charts
  */
 const chartTextTheme = {
-    baseStyle: "transition-all duration-200 text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
+    baseStyle: "transition-all duration-[var(--motion-duration-base)] text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
 };
 
 export { chartTextTheme };

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

@@ -4,4 +4,4 @@ export { ChartMarker } from './ChartMarker';
 export { HorizontalGrid } from './ChartGrid';
 export { ChartText } from './ChartText';
 export { XAxis, YAxis } from './ChartAxis';
-export { ChartTooltip } from './ChartTooltip';
+export { ChartTooltip } from '../../core/shared/ChartTooltip';

package/dist/components/charts/theme/chart.theme.js

@@ -19,7 +19,7 @@ const chartTheme = {
             axis: "stroke-[var(--color-border)]",
             text: "fill-[var(--color-text-secondary)]",
             background: "fill-[var(--color-background)]",
-            hover: "fill-[var(--color-background-secondary)]",
+            hover: "fill-[var(--color-surface)]",
             disabled: "fill-[var(--color-background-disabled)]",
         },
         opacity: {
@@ -28,8 +28,8 @@ const chartTheme = {
             disabled: "opacity-50",
         },
         transitions: {
-            default: "transition-all duration-200",
-            hover: "transition-all duration-150",
+            default: "transition-all duration-[var(--motion-duration-base)]",
+            hover: "transition-all duration-[var(--motion-duration-fast)]",
         },
     },
     variants: {

package/dist/components/charts/utils/animation-utils.d.ts

@@ -132,10 +132,6 @@ export declare const CIRCULAR_CHART_ANIMATIONS: {
 export declare const CROSSHAIR_FADE_TRANSITION: Transition;
 /** Crosshair line tracking the pointer between data points. */
 export declare const CROSSHAIR_FOLLOW_TRANSITION: Transition;
-/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
-export declare const TOOLTIP_ENTER_TRANSITION: Transition;
-/** Tooltip pop-out. */
-export declare const TOOLTIP_EXIT_TRANSITION: Transition;
 /** Circular-chart segment hover dim/lift (opacity fade + scale pop). */
 export declare const SEGMENT_HOVER_TRANSITION: Transition;
 /** Rise/draw duration for line & area entrances (and the shared LineRenderer). */
@@ -150,9 +146,6 @@ export declare const STACKED_BAR_STAGGER = 0.08;
 export declare const BAR_STACK_CATEGORY_DELAY = 0.25;
 /** Shared BarRenderer stacked-mode per-segment stagger. */
 export declare const BAR_STACK_SEGMENT_STAGGER = 0.12;
-/** ScatterPlot per-point stagger + grow duration. */
-export declare const SCATTER_POINT_STAGGER = 0.01;
-export declare const SCATTER_POINT_DURATION = 0.3;
 /** Marker pop-in spring (line/area dots). */
 export declare const DOT_SPRING: {
     type: "spring";
@@ -204,3 +197,15 @@ export declare function barEntranceTransition(delay: number, hasAnimated: boolea
  * `barEntranceTransition`.
  */
 export declare function stackedSegmentTransition(delay: number, hasAnimated: boolean): Transition;
+/** Heatmap cell fade-in duration (seconds). */
+export declare const HEATMAP_CELL_FADE_DURATION = 0.35;
+/** Per-diagonal stagger for the heatmap cell entrance (seconds). */
+export declare const HEATMAP_CELL_STAGGER = 0.02;
+/** Cap on the entrance stagger, so a large grid still settles quickly (seconds). */
+export declare const HEATMAP_CELL_MAX_DELAY = 0.3;
+/** Deterministic entrance delay for the cell at (row, col). */
+export declare function heatmapCellDelay(row: number, col: number): number;
+/** Cell hover scale-up (`whileHover`). */
+export declare const HEATMAP_CELL_HOVER_TRANSITION: Transition;
+/** Cell press scale-down (`whileTap`). */
+export declare const HEATMAP_CELL_TAP_TRANSITION: Transition;

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 },
@@ -182,9 +167,6 @@ const BAR_GROUP_STAGGER = 0.05;
 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). */
@@ -258,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, 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/core/Accordion/Accordion.theme.js

@@ -8,7 +8,7 @@ const accordionTheme = {
     // Item styles for stacked variant (shared borders, no spacing)
     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/Alert/Alert.animations.d.ts

@@ -1,9 +1,16 @@
 import { Variants } from "motion/react";
 /**
- * Alert entrance/exit animation variants
- * Entrance: slide down from -12px + fade in
- * Exit: fade out + collapse height
- * Uses library spring presets for a premium feel
+ * 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

@@ -4,10 +4,17 @@ import '../../../theme/SurfaceContext.js';
 import { springs } from '../../../theme/animations.js';
 
 /**
- * Alert entrance/exit animation variants
- * Entrance: slide down from -12px + fade in
- * Exit: fade out + collapse height
- * Uses library spring presets for a premium feel
+ * 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: {

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

@@ -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) }) }));
@@ -47,7 +55,13 @@ const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, d
                         : 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: "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, initial: "hidden", animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
+    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.theme.js

@@ -5,7 +5,7 @@ const avatarTheme = {
     // into the WRAPPER's context and painted over the sibling status dot, which
     // sits at `z-index: auto`. Isolating keeps the circle's internal layering
     // internal, so the dot and badge stack by DOM order as intended.
-    baseStyle: "relative isolate inline-flex items-center justify-center overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    baseStyle: "relative isolate inline-flex items-center justify-center overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-[var(--motion-duration-base)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     // One geometry class for EVERY size. The px value arrives through the
     // `--avatar-size` custom property, which Avatar sets inline: a token maps to
     // its `--avatar-size-*` var, a number to `${n}px`. It has to travel as a

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

@@ -1,8 +1,3 @@
 import { Variants } from "motion/react";
 export declare const badgeVariants: Variants;
 export declare const dotVariants: Variants;
-export declare const dismissButtonVariants: Variants;
-export declare const dismissVariants: Variants;
-export declare const animationTiming: {
-    dismissDelay: number;
-};

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

@@ -1,7 +1,8 @@
 "use client";
-import { PRESS_TRANSITION, HOVER_TRANSITION } from '../shared/interaction.animations.js';
-
-// Main badge variants with optimized transitions
+// Badge is a static label — it does not animate in or out. This variant set
+// exists so the root `motion.span` can PROPAGATE `initial`/`animate` down to the
+// dot (motion cascades variant names to motion children). Removing it would stop
+// the dot animating. Keep the values inert.
 const badgeVariants = {
     initial: {
         opacity: 1,
@@ -10,23 +11,6 @@ const badgeVariants = {
     animate: {
         opacity: 1,
         scale: 1,
-        transition: {
-            type: "spring",
-            stiffness: 500,
-            damping: 30,
-            mass: 1,
-        },
-    },
-    exit: {
-        opacity: 0,
-        scale: 0.2,
-        transition: {
-            type: "spring",
-            stiffness: 500,
-            damping: 25,
-            mass: 0.8,
-            duration: 0.3,
-        },
     },
 };
 // Dot variants
@@ -44,69 +28,6 @@ const dotVariants = {
             damping: 30,
         },
     },
-    exit: {
-        opacity: 0,
-        scale: 0,
-        transition: {
-            duration: 0.15,
-            ease: "easeIn",
-        },
-    },
-};
-// Dismiss button variants - optimized for performance
-const dismissButtonVariants = {
-    initial: {
-        opacity: 0.75,
-    },
-    hover: {
-        opacity: 1,
-        transition: HOVER_TRANSITION,
-    },
-    tap: {
-        scale: 0.95,
-        transition: PRESS_TRANSITION,
-    },
-};
-// Optimized dismiss animation sequence
-// This uses Framer Motion's built-in sequencing capabilities
-const dismissVariants = {
-    initial: {
-        opacity: 0,
-        scale: 0.8,
-    },
-    animate: {
-        opacity: 1,
-        scale: 1,
-        transition: {
-            type: "spring",
-            stiffness: 500,
-            damping: 30,
-            mass: 1,
-        },
-    },
-    // First stage of exit - slight pop
-    exit: {
-        opacity: 0,
-        scale: 0.2,
-        transition: {
-            opacity: {
-                duration: 0.3,
-                ease: "easeOut",
-            },
-            scale: {
-                type: "spring",
-                stiffness: 300,
-                damping: 20,
-                // Add a slight delay to create the pop effect
-                delay: 0.05,
-            },
-            duration: 0.4,
-        },
-    },
-};
-// Animation timing constants (in ms)
-const animationTiming = {
-    dismissDelay: 400, // Total animation duration
 };
 
-export { animationTiming, badgeVariants, dismissButtonVariants, dismissVariants, dotVariants };
+export { badgeVariants, dotVariants };

package/dist/components/core/Badge/Badge.d.ts

@@ -1,14 +1,17 @@
 import React from "react";
 import { BadgeProps } from "./Badge.types";
 /**
- * Badge component for displaying status, labels, or counters.
+ * Badge — a non-interactive status/metadata label.
+ *
+ * 🔴 Badge is deliberately a PURE LABEL: no dismiss, no disabled, no blessed
+ * click target. For a removable chip use `Tag`; for a selectable filter chip use
+ * `Pill`; for anything that performs an action use `Button`. See CLAUDE.md §8b.
  *
  * @component
  * @example
  * ```tsx
- * <Badge variant="primary" size="md" pill>New Feature</Badge>
- * <Badge variant="success" withDot>Ready</Badge>
- * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
+ * <Badge color="primary" size="md" pill>New Feature</Badge>
+ * <Badge color="success" withDot>Ready</Badge>
  * ```
  */
 export declare const Badge: React.NamedExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;