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

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useId, useEffect, useRef, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useId, useRef, useMemo, useEffect } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
@@ -15,8 +15,10 @@ import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { STACKED_BAR_CHART_DEFAULTS } from './StackedBarChart.types.js';
 import { X_AXIS_MARGIN } from '../types/chart.types.js';
-import { RISE_FROM_BASELINE, barEntranceTransition, STACKED_BAR_STAGGER } from '../utils/animation-utils.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { BAR_STACK_CATEGORY_DELAY, RISE_FROM_BASELINE, stackedSegmentTransition } from '../utils/animation-utils.js';
+import { resolveSeriesColor } from '../utils/series-color.js';
+import { chartTheme } from '../theme/chart.theme.js';
+import { Warning } from '@phosphor-icons/react';
 
 // Pure helper functions moved to module level to avoid recreation per render
 const createRoundedTopBarPath = (x, y, width, height, radius) => {
@@ -61,42 +63,11 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
     const stackGradientId = (index) => `${rawId}-stack-gradient-${index}`;
     const columnShadowId = `${rawId}-column-shadow`;
     const columnGlowId = `${rawId}-column-glow`;
-    useEffect(() => {
-        if (!shouldReduceMotion && showAnimation) {
-            setHasAnimated(true);
-        }
-        else {
-            setHasAnimated(true);
-        }
-    }, [shouldReduceMotion, showAnimation]);
     // Validate data and config with error handling
     const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
     });
-    // Color palette using CSS variables
-    const getSeriesFillColor = (index, key) => {
-        var _a;
-        if (key && config && ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color)) {
-            const customColor = config[key].color;
-            if (!customColor.startsWith("var(") &&
-                !customColor.startsWith("#") &&
-                !customColor.startsWith("rgb") &&
-                !customColor.startsWith("hsl") &&
-                customColor.includes("-")) {
-                return `var(--color-${customColor})`;
-            }
-            return customColor;
-        }
-        const colorVars = [
-            "var(--color-primary)",
-            "var(--color-primary-400)",
-            "var(--color-primary-300)",
-            "var(--color-primary-200)",
-            "var(--color-warning)",
-            "var(--color-success)",
-        ];
-        return colorVars[index % colorVars.length];
-    };
+    const getSeriesFillColor = (index, key) => resolveSeriesColor(index, key, config, chartTheme.baseStyle.colors.series);
     const containerRef = useRef(null);
     // `measured` gates bar mount so motion captures geometry in the real
     // coordinate space, not the 600×400 fallback (cold-load below-baseline bug).
@@ -171,13 +142,34 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         });
         return max;
     }, [sanitizedData, dataKeys]);
+    useEffect(() => {
+        if (!shouldReduceMotion &&
+            showAnimation &&
+            sanitizedData.length > 0 &&
+            dataKeys.length > 0) {
+            const maxDelay = (sanitizedData.length - 1) * BAR_STACK_CATEGORY_DELAY +
+                (dataKeys.length - 1) * 0.4;
+            const timer = setTimeout(() => {
+                setHasAnimated(true);
+            }, (maxDelay + 0.4) * 1000);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setHasAnimated(true);
+        }
+    }, [
+        shouldReduceMotion,
+        showAnimation,
+        sanitizedData.length,
+        dataKeys.length,
+    ]);
     // --- Every hook above this line runs unconditionally, every render, in the
     // same order. Only NOW — after the last hook — do we branch on validity, so
     // a chart going from populated → empty/invalid data (a common loading-state
     // transition) never changes its hook count mid-lifetime. See BarChart.tsx.
     // Early return for invalid data
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(Warning, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
                         "Unable to render chart due to data validation errors" })] }));
     }
     // Early return for empty data
@@ -211,114 +203,140 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                 ? isHovered
                     ? `url(#${columnGlowId})`
                     : `url(#${columnShadowId})`
-                : undefined, style: isGradientVariant ? { overflow: "visible" } : undefined, children: dataKeys.map((key, keyIndex) => {
-                var _a;
-                const stackData = (_a = getStackedValues[key]) === null || _a === void 0 ? void 0 : _a[categoryIndex];
-                if (!stackData)
-                    return null;
-                let baseValue = stackData.base;
-                let topValue = stackData.top;
-                // Apply expand offset (normalize to percentage)
-                if (stackOffset === "expand") {
-                    const totalForCategory = dataKeys.reduce((sum, k) => {
-                        const rawVal = item[k];
-                        return (sum +
-                            (typeof rawVal === "number" && isFinite(rawVal) ? rawVal : 0));
-                    }, 0);
-                    if (totalForCategory > 0) {
-                        baseValue = (stackData.base / totalForCategory) * 100;
-                        topValue = (stackData.top / totalForCategory) * 100;
+                : undefined, style: isGradientVariant ? { overflow: "visible" } : undefined, children: jsx("g", { clipPath: `url(#${rawId}-column-clip-${categoryIndex})`, children: dataKeys.map((key, keyIndex) => {
+                    var _a;
+                    const stackData = (_a = getStackedValues[key]) === null || _a === void 0 ? void 0 : _a[categoryIndex];
+                    if (!stackData)
+                        return null;
+                    let baseValue = stackData.base;
+                    let topValue = stackData.top;
+                    // Apply expand offset (normalize to percentage)
+                    if (stackOffset === "expand") {
+                        const totalForCategory = dataKeys.reduce((sum, k) => {
+                            const rawVal = item[k];
+                            return (sum +
+                                (typeof rawVal === "number" && isFinite(rawVal) ? rawVal : 0));
+                        }, 0);
+                        if (totalForCategory > 0) {
+                            baseValue = (stackData.base / totalForCategory) * 100;
+                            topValue = (stackData.top / totalForCategory) * 100;
+                        }
                     }
-                }
-                const barHeight = range > 0
-                    ? safeMath.scale(topValue - baseValue, 0, range, 0, innerHeight)
-                    : 0;
-                const barY = margin.top +
-                    innerHeight -
-                    safeMath.scale(topValue, minValue, maxValue, 0, innerHeight);
-                const isTopSegment = keyIndex === dataKeys.length - 1;
-                const pathD = isTopSegment
-                    ? createRoundedTopBarPath(x, barY, barWidth, barHeight, barRadius)
-                    : createRectPath(x, barY, barWidth, barHeight);
-                const fillColor = getSeriesFillColor(keyIndex, key);
-                const delay = categoryIndex * STACKED_BAR_STAGGER;
-                return (jsx(motion.path, { d: pathD, initial: showAnimation && !shouldReduceMotion
-                        ? { scaleY: 0, opacity: 0 }
-                        : { scaleY: 1, opacity: 1 }, animate: {
-                        scaleY: 1,
-                        // Hover dim lives in `animate` (not `style`): motion.path freezes
-                        // plain style values at mount and ignores re-render changes.
-                        opacity: shouldReduceOpacity ? (isGradientVariant ? 0.42 : 0.9) : 1,
-                    }, transition: barEntranceTransition(delay, hasAnimated), className: cn(isGradientVariant
-                        ? "transition-all duration-300 ease-out cursor-pointer"
-                        : "transition-colors duration-200 cursor-pointer", isFocused && "stroke-2"), style: {
-                        ...RISE_FROM_BASELINE,
-                        fill: isGradientVariant
-                            ? `url(#${stackGradientId(keyIndex)})`
-                            : shouldReduceOpacity
-                                ? "var(--color-surface-sunken)"
-                                : fillColor,
-                        // Hairline white seam separates stacked segments in gradient mode.
-                        stroke: isFocused
-                            ? "var(--color-primary)"
-                            : isGradientVariant
-                                ? "rgba(255,255,255,0.16)"
-                                : "none",
-                        strokeWidth: isFocused ? 2 : isGradientVariant ? 1 : undefined,
-                        vectorEffect: "non-scaling-stroke",
-                    }, onMouseEnter: (e) => {
-                        setHoveredCategory(categoryIndex);
-                        // Create tooltip content with all series
-                        const series = dataKeys.map((dataKey, idx) => {
-                            var _a;
-                            const rawValue = item[dataKey];
-                            const value = typeof rawValue === "number" && isFinite(rawValue)
-                                ? rawValue
-                                : 0;
-                            return {
-                                key: dataKey,
-                                label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
-                                value,
-                                color: getSeriesFillColor(idx, dataKey),
+                    const barHeight = range > 0
+                        ? safeMath.scale(topValue - baseValue, 0, range, 0, innerHeight)
+                        : 0;
+                    const barY = margin.top +
+                        innerHeight -
+                        safeMath.scale(topValue, minValue, maxValue, 0, innerHeight);
+                    const segmentGap = 2;
+                    const renderedHeight = Math.max(0, barHeight - segmentGap);
+                    if (renderedHeight <= 0)
+                        return null;
+                    const renderedY = barY + segmentGap / 2;
+                    const pathD = createRectPath(x, renderedY, barWidth, renderedHeight);
+                    const fillColor = getSeriesFillColor(keyIndex, key);
+                    const delay = categoryIndex * BAR_STACK_CATEGORY_DELAY +
+                        keyIndex * 0.4;
+                    return (jsx(motion.path, { d: pathD, initial: showAnimation && !shouldReduceMotion
+                            ? { scaleY: 0, opacity: 0 }
+                            : { scaleY: 1, opacity: 1 }, animate: {
+                            scaleY: 1,
+                            // Hover dim lives in `animate` (not `style`): motion.path freezes
+                            // plain style values at mount and ignores re-render changes.
+                            opacity: shouldReduceOpacity ? (isGradientVariant ? 0.42 : 0.9) : 1,
+                        }, transition: stackedSegmentTransition(delay, hasAnimated), className: cn(isGradientVariant
+                            ? "transition-all duration-300 ease-out cursor-pointer"
+                            : "transition-colors duration-200 cursor-pointer", isFocused && "stroke-2"), style: {
+                            ...RISE_FROM_BASELINE,
+                            fill: isGradientVariant
+                                ? `url(#${stackGradientId(keyIndex)})`
+                                : shouldReduceOpacity
+                                    ? "var(--color-surface-sunken)"
+                                    : fillColor,
+                            // Hairline stroke on keyboard focus only; 2px gap handles segment separation.
+                            stroke: isFocused ? "var(--color-primary)" : "none",
+                            strokeWidth: isFocused ? 2 : undefined,
+                            vectorEffect: "non-scaling-stroke",
+                        }, onMouseEnter: (e) => {
+                            setHoveredCategory(categoryIndex);
+                            // Create tooltip content with all series
+                            const series = dataKeys.map((dataKey, idx) => {
+                                var _a;
+                                const rawValue = item[dataKey];
+                                const value = typeof rawValue === "number" && isFinite(rawValue)
+                                    ? rawValue
+                                    : 0;
+                                return {
+                                    key: dataKey,
+                                    label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                                    value,
+                                    color: getSeriesFillColor(idx, dataKey),
+                                };
+                            });
+                            // Calculate total
+                            const total = series.reduce((sum, s) => sum + s.value, 0);
+                            const content = {
+                                category: item.name || `Category ${categoryIndex + 1}`,
+                                series,
+                                total,
                             };
-                        });
-                        // Calculate total
-                        const total = series.reduce((sum, s) => sum + s.value, 0);
-                        const content = {
-                            category: item.name || `Category ${categoryIndex + 1}`,
-                            series,
-                            total,
-                        };
-                        const svgCoordinates = {
-                            x: x + barWidth / 2,
-                            y: barY,
-                            dimensions,
-                        };
-                        handleMouseEnter(e, content, svgCoordinates);
-                    }, onMouseMove: (e) => {
-                        if (hoveredCategory === categoryIndex) {
                             const svgCoordinates = {
                                 x: x + barWidth / 2,
                                 y: barY,
                                 dimensions,
                             };
-                            handleMouseMove(e, svgCoordinates);
-                        }
-                    }, onMouseLeave: () => {
-                        setHoveredCategory(null);
-                        handleMouseLeave();
-                    } }, key));
-            }) }, categoryIndex));
+                            handleMouseEnter(e, content, svgCoordinates);
+                        }, onMouseMove: (e) => {
+                            if (hoveredCategory === categoryIndex) {
+                                const svgCoordinates = {
+                                    x: x + barWidth / 2,
+                                    y: barY,
+                                    dimensions,
+                                };
+                                handleMouseMove(e, svgCoordinates);
+                            }
+                        }, onMouseLeave: () => {
+                            setHoveredCategory(null);
+                            handleMouseLeave();
+                        } }, key));
+                }) }) }, categoryIndex));
     };
     return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full flex flex-col", className), style: {
                 width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
                 height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
             }, ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, 
                         // Let the column lift shadow / hover glow paint past the plot edges.
-                        className: isGradientVariant ? "overflow-visible" : undefined, children: [isGradientVariant && (jsxs("defs", { children: [dataKeys.map((key, index) => {
-                                        const color = getSeriesFillColor(index, key);
-                                        return (jsxs("linearGradient", { id: stackGradientId(index), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.92" }), jsx("stop", { offset: "45%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.84" })] }, key));
-                                    }), jsx("filter", { id: columnShadowId, x: "-40%", y: "-25%", width: "180%", height: "160%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "9", floodColor: "var(--color-neutral-950)", floodOpacity: "0.16" }) }), jsxs("filter", { id: columnGlowId, x: "-50%", y: "-45%", width: "200%", height: "200%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: getSeriesFillColor(0, dataKeys[0]), floodOpacity: "0.4" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "9", floodColor: "var(--color-neutral-950)", floodOpacity: "0.14" })] })] })), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+                        className: isGradientVariant ? "overflow-visible" : undefined, children: [jsxs("defs", { children: [isGradientVariant && (jsxs(Fragment, { children: [dataKeys.map((key, index) => {
+                                                const color = getSeriesFillColor(index, key);
+                                                return (jsxs("linearGradient", { id: stackGradientId(index), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.92" }), jsx("stop", { offset: "45%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.84" })] }, key));
+                                            }), jsx("filter", { id: columnShadowId, x: "-40%", y: "-25%", width: "180%", height: "160%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "9", floodColor: "var(--color-mono-950)", floodOpacity: "0.16" }) }), jsxs("filter", { id: columnGlowId, x: "-50%", y: "-45%", width: "200%", height: "200%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: getSeriesFillColor(0, dataKeys[0]), floodOpacity: "0.4" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "9", floodColor: "var(--color-mono-950)", floodOpacity: "0.14" })] })] })), measured &&
+                                        sanitizedData.map((item, categoryIndex) => {
+                                            var _a;
+                                            const x = margin.left + categoryIndex * (barWidth + categoryGap);
+                                            const topSegmentKey = dataKeys[dataKeys.length - 1];
+                                            const topStackData = (_a = getStackedValues[topSegmentKey]) === null || _a === void 0 ? void 0 : _a[categoryIndex];
+                                            let maxVal = topStackData ? topStackData.top : 0;
+                                            if (stackOffset === "expand") {
+                                                const totalForCategory = dataKeys.reduce((sum, k) => {
+                                                    const rawVal = item[k];
+                                                    return (sum +
+                                                        (typeof rawVal === "number" && isFinite(rawVal) ? rawVal : 0));
+                                                }, 0);
+                                                if (totalForCategory > 0) {
+                                                    maxVal = 100;
+                                                }
+                                            }
+                                            const range = maxValue - minValue;
+                                            const columnTopY = range > 0
+                                                ? margin.top +
+                                                    innerHeight -
+                                                    safeMath.scale(maxVal, minValue, maxValue, 0, innerHeight)
+                                                : margin.top + innerHeight;
+                                            const zeroY = margin.top + innerHeight;
+                                            const columnHeight = Math.max(0, zeroY - columnTopY);
+                                            const columnPathD = createRoundedTopBarPath(x, columnTopY, barWidth, columnHeight, barRadius);
+                                            return (jsx("clipPath", { id: `${rawId}-column-clip-${categoryIndex}`, children: jsx("path", { d: columnPathD }) }, categoryIndex));
+                                        })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                                     if (stackOffset === "expand")
                                         return `${value}%`;
                                     if (Math.abs(value) >= 1000)

package/dist/components/charts/StackedBarChart/StackedBarChart.types.d.ts

@@ -1,34 +1,36 @@
 import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, ChartVariant } from "../types/chart.types";
 export type StackOffset = "none" | "expand" | "wiggle" | "silhouette";
-export interface StackedBarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
+/**
+ * Visual props that actually apply to a stacked bar chart.
+ *
+ * 🔴 Narrowed with `Omit` on purpose — see the note on `StandardVisualProps`.
+ * Kept: `barRadius` only.
+ * Dropped: dot/cell radii, stroke width, the line/area-only props, `gap` (segment
+ * separation is a fixed hairline, not a tunable), and `stacked` (this chart always is).
+ */
+export type StackedBarVisualProps = Omit<StandardVisualProps, "dotRadius" | "radius" | "strokeWidth" | "gap" | "curved" | "curveType" | "showDots" | "fillOpacity" | "showStroke" | "stacked">;
+export interface StackedBarChartProps extends BaseChartProps, StandardChartDisplayProps, StackedBarVisualProps, BarChartSpecificProps {
     barRadius?: number;
-    gap?: number;
     categoryGap?: number;
     stackOffset?: StackOffset;
     showAnimation?: boolean;
     showValidationWarnings?: boolean;
 }
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — see the note on
+ * `BAR_CHART_DEFAULTS`.
+ */
 export declare const STACKED_BAR_CHART_DEFAULTS: {
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly enableKeyboardNavigation: true;
     readonly barRadius: 32;
-    readonly gap: 4;
     readonly categoryGap: 16;
-    readonly orientation: "horizontal" | "vertical";
     readonly stackOffset: StackOffset;
     readonly showAnimation: true;
     readonly variant: ChartVariant;
-    readonly showGrid: true;
-    readonly showXAxis: true;
-    readonly showYAxis: true;
-    readonly dotRadius: 3;
-    readonly cellRadius: 4;
-    readonly radius: 20;
-    readonly strokeWidth: 2;
-    readonly curved: true;
-    readonly curveType: import("..").CurveType;
-    readonly fillOpacity: 0.3;
-    readonly showStroke: true;
-    readonly showDots: false;
-    readonly stacked: false;
-    readonly enableKeyboardNavigation: true;
 };
 export type StackedBarChartData = BaseChartProps["data"][0];

package/dist/components/charts/StackedBarChart/StackedBarChart.types.js

@@ -1,12 +1,18 @@
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
-// Default values using centralized defaults
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — see the note on
+ * `BAR_CHART_DEFAULTS`.
+ */
 const STACKED_BAR_CHART_DEFAULTS = {
-    ...CHART_DEFAULTS,
+    showGrid: CHART_DEFAULTS.showGrid,
+    showXAxis: CHART_DEFAULTS.showXAxis,
+    showYAxis: CHART_DEFAULTS.showYAxis,
+    enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
     barRadius: CHART_DEFAULTS.barRadius,
-    gap: CHART_DEFAULTS.gap,
     categoryGap: CHART_DEFAULTS.categoryGap,
-    orientation: CHART_DEFAULTS.orientation,
     stackOffset: "none",
     showAnimation: true,
     // Premium look by default (per-segment gradient + lift shadow + hover glow),

package/dist/components/charts/hooks/useChartAccessibility.d.ts

@@ -1,7 +1,7 @@
 import { ChartDataPoint, ChartConfig } from '../types/chart.types';
 export interface UseChartAccessibilityOptions {
     /** Chart type for ARIA descriptions */
-    chartType: 'bar' | 'line' | 'area' | 'heatmap' | 'combo' | 'scatter';
+    chartType: 'bar' | 'line' | 'area' | 'heatmap' | 'combo' | 'scatter' | 'lollipop';
     /** Chart data for generating descriptions */
     data: ChartDataPoint[];
     /** Chart configuration */

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

@@ -16,6 +16,9 @@ function useChartAccessibility({ chartType, data, config, title, description, en
             case 'bar':
                 summary = `Bar chart with ${dataCount} categories`;
                 break;
+            case 'lollipop':
+                summary = `Lollipop chart with ${dataCount} categories`;
+                break;
             case 'line':
                 summary = `Line chart with ${dataCount} data points`;
                 break;

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

@@ -112,11 +112,23 @@ function useTooltipPosition({ containerRef, padding = 10, offset = 15, isMobile
      * Get tooltip position for SVG elements (mobile/touch)
      */
     const getSVGTooltipPosition = useCallback((event, svgX, svgY, actualDimensions) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         try {
-            const svgElement = event.currentTarget.closest('svg');
+            // Keyboard-driven callers have no real mouse event and synthesise one, whose
+            // `currentTarget` is null — the DOM only populates it during dispatch. Only the
+            // <svg> is wanted here, and `containerRef` already reaches it, so don't make
+            // finding it depend on the event: reading `.closest` off a null currentTarget
+            // threw on every keyboard focus move, and the catch below quietly swallowed it
+            // into a mouse-coordinate fallback.
+            const svgElement = (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.closest('svg')) !== null && _b !== void 0 ? _b : (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.querySelector('svg');
             const svgRect = svgElement === null || svgElement === void 0 ? void 0 : svgElement.getBoundingClientRect();
-            if (!svgRect || !actualDimensions.width || !actualDimensions.height) {
+            // A zero-sized rect is as unusable as a missing one: the scale factors below
+            // divide by it, so a not-yet-laid-out <svg> would collapse every coordinate
+            // onto its origin rather than fail loudly. Fall back to mouse coordinates.
+            if (!(svgRect === null || svgRect === void 0 ? void 0 : svgRect.width) ||
+                !svgRect.height ||
+                !actualDimensions.width ||
+                !actualDimensions.height) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.warn('[useTooltipPosition]: SVG positioning fallback: missing SVG rect or dimensions');
                 }
@@ -130,8 +142,8 @@ function useTooltipPosition({ containerRef, padding = 10, offset = 15, isMobile
             const screenY = svgRect.top + svgY * scaleY;
             const x = screenX;
             const y = screenY - offset;
-            const tooltipWidth = ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200;
-            const tooltipHeight = ((_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 60;
+            const tooltipWidth = ((_d = tooltipRef.current) === null || _d === void 0 ? void 0 : _d.offsetWidth) || 200;
+            const tooltipHeight = ((_e = tooltipRef.current) === null || _e === void 0 ? void 0 : _e.offsetHeight) || 60;
             return calculateBoundedPosition(x, y, tooltipWidth, tooltipHeight);
         }
         catch (error) {
@@ -140,7 +152,7 @@ function useTooltipPosition({ containerRef, padding = 10, offset = 15, isMobile
             }
             return getMouseTooltipPosition(event);
         }
-    }, [calculateBoundedPosition, getMouseTooltipPosition, offset]);
+    }, [calculateBoundedPosition, getMouseTooltipPosition, offset, containerRef]);
     /**
      * Show tooltip with content and position
      */

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

@@ -1,5 +1,6 @@
 export { ChartContainer } from "./ChartContainer";
 export { BarChart } from "./BarChart";
+export { HorizontalBarChart } from "./HorizontalBarChart";
 export { StackedBarChart } from "./StackedBarChart";
 export { LineChart } from "./LineChart";
 export { AreaChart } from "./AreaChart";
@@ -11,6 +12,7 @@ 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 { ChartLegend } from "./shared/ChartLegend";
 export { XAxis, YAxis } from "./shared/ChartAxis";
@@ -33,6 +35,7 @@ export type { ChartMarkerProps, ChartMarkerTheme, } from "./shared/ChartMarker/C
 export type { ChartCrosshairProps, ChartCrosshairTheme, } from "./shared/ChartCrosshair/ChartCrosshair.types";
 export type { HorizontalGridProps } from "./shared/ChartGrid";
 export type { BarChartProps } from "./BarChart/BarChart.types";
+export type { HorizontalBarChartProps, HorizontalBarVisualProps, } from "./HorizontalBarChart/HorizontalBarChart.types";
 export type { StackedBarChartProps, StackOffset, } from "./StackedBarChart/StackedBarChart.types";
 export type { LineChartProps } from "./LineChart/LineChart.types";
 export type { AreaChartProps } from "./AreaChart/AreaChart.types";
@@ -44,11 +47,14 @@ export type { ScatterPlotProps, ScatterPlotDataPoint, } from "./ScatterPlot/Scat
 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";
+export type { LollipopChartProps, LollipopChartData } from "./LollipopChart/LollipopChart.types";
 export { chartTheme } from "./theme/chart.theme";
 export { extractFillClass, extractStrokeClass, colorClassToVariable, combineClasses, createColorClass, generateSeriesColors, DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, } from "./utils/color-utils";
 export { validateChart, validateChartData, validateChartConfig, sanitizeChartData, calculateSafeScaleRange, niceNum, generateNiceTicks, SafeMath, } from "./utils/chart-validation";
 export { BAR_CHART_DEFAULTS } from "./BarChart/BarChart.types";
+export { HORIZONTAL_BAR_CHART_DEFAULTS } from "./HorizontalBarChart/HorizontalBarChart.types";
 export { STACKED_BAR_CHART_DEFAULTS } from "./StackedBarChart/StackedBarChart.types";
 export { LINE_CHART_DEFAULTS } from "./LineChart/LineChart.types";
 export { AREA_CHART_DEFAULTS } from "./AreaChart/AreaChart.types";
+export { LOLLIPOP_CHART_DEFAULTS } from "./LollipopChart/LollipopChart.types";
 export { ChartErrorBoundary } from "./shared/ChartErrorBoundary";

package/dist/components/charts/index.js

@@ -1,5 +1,7 @@
 export { ChartContainer } from './ChartContainer.js';
 export { BarChart } from './BarChart/BarChart.js';
+export { HorizontalBarChart } from './HorizontalBarChart/HorizontalBarChart.js';
+export { HORIZONTAL_BAR_CHART_DEFAULTS } from './HorizontalBarChart/HorizontalBarChart.types.js';
 export { StackedBarChart } from './StackedBarChart/StackedBarChart.js';
 export { STACKED_BAR_CHART_DEFAULTS } from './StackedBarChart/StackedBarChart.types.js';
 export { LineChart } from './LineChart/LineChart.js';
@@ -16,10 +18,14 @@ export { ScatterPlot } from './ScatterPlot/ScatterPlot.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 { ChartLegend } from './shared/ChartLegend/ChartLegend.js';
 export { XAxis } from './shared/ChartAxis/XAxis.js';
 export { YAxis } from './shared/ChartAxis/YAxis.js';
+import './shared/ChartAxis/ValueXAxis.js';
+import './shared/ChartAxis/CategoryYAxis.js';
 export { ChartText } from './shared/ChartText/ChartText.js';
 export { ChartMarker } from './shared/ChartMarker/ChartMarker.js';
 export { ChartCrosshair } from './shared/ChartCrosshair/ChartCrosshair.js';

package/dist/components/charts/shared/ChartAxis/CategoryYAxis.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { CategoryYAxisProps } from "./ChartAxis.types";
+/**
+ * CategoryYAxis component for charts
+ * Renders a vertical CATEGORY axis: one label per category down the left, with
+ * optional tick marks.
+ *
+ * This is `XAxis` rotated. Labels sit to the LEFT of the axis line and are
+ * end-anchored, so a ragged set of category names ("United Kingdom", "Italy") stays
+ * flush against the plot — the caller is responsible for reserving enough left margin,
+ * since unlike a bottom axis there is no shared constant that can know how wide a
+ * category name will be.
+ */
+export declare const CategoryYAxis: React.FC<CategoryYAxisProps>;

package/dist/components/charts/shared/ChartAxis/CategoryYAxis.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+
+/**
+ * CategoryYAxis component for charts
+ * Renders a vertical CATEGORY axis: one label per category down the left, with
+ * optional tick marks.
+ *
+ * This is `XAxis` rotated. Labels sit to the LEFT of the axis line and are
+ * end-anchored, so a ragged set of category names ("United Kingdom", "Italy") stays
+ * flush against the plot — the caller is responsible for reserving enough left margin,
+ * since unlike a bottom axis there is no shared constant that can know how wide a
+ * category name will be.
+ */
+const CategoryYAxis = React__default.memo(({ data, x, y, height, categoryHeight, categoryGap = 0, show = true, className, showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", labelFormatter, maxLabelWidth = 100, }) => {
+    if (!show)
+        return null;
+    const formatLabel = (item, index) => {
+        if (labelFormatter) {
+            return labelFormatter(item, index);
+        }
+        return item.name || item.label || String(index);
+    };
+    const getTickY = (index) => y + index * (categoryHeight + categoryGap) + categoryHeight / 2;
+    return (jsxs("g", { className: cn("chart-category-y-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x, y2: y + height, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), data.map((item, index) => {
+                const tickY = getTickY(index);
+                const label = formatLabel(item, index);
+                return (jsxs("g", { children: [showTicks && (jsx("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle", maxWidth: maxLabelWidth, truncate: !!maxLabelWidth, children: label })] }, index));
+            })] }));
+});
+CategoryYAxis.displayName = "CategoryYAxis";
+
+export { CategoryYAxis };