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

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

@@ -0,0 +1,43 @@
+"use client";
+import { useState, useEffect, useLayoutEffect } from 'react';
+
+// SSR-safe layout effect — charts only render meaningfully on the client, but
+// guarding avoids React's useLayoutEffect-on-server warning.
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const FALLBACK = { width: 600, height: 400 };
+/**
+ * Measures a chart's container element and reports a `measured` flag once a real
+ * size is known. Replaces the per-chart inline ResizeObserver block so every
+ * Cartesian chart shares one correct implementation (see `measured` docs above).
+ */
+function useChartDimensions(containerRef, fallback = FALLBACK) {
+    const [dimensions, setDimensions] = useState(fallback);
+    const [measured, setMeasured] = useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: width || fallback.width,
+                    height: height || fallback.height,
+                });
+                if (width > 0 && height > 0) {
+                    setMeasured(true);
+                }
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+        // fallback is read inside but is a stable default; ref identity is constant.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef]);
+    return { dimensions, measured };
+}
+
+export { useChartDimensions };

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

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { useChartValidation } from './useChartValidation.js';
 
@@ -10,7 +11,6 @@ function useChartScales(options) {
     // Use validation hook for data sanitization and safe calculations
     const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
-        logWarnings: true,
     });
     // Get all data keys from config
     const dataKeys = Object.keys(config || {});

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

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { chartTheme } from '../theme/chart.theme.js';
 

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

@@ -63,12 +63,4 @@ interface UseChartValidationReturn {
  * Hook for comprehensive chart validation and error handling
  */
 export declare function useChartValidation(data: unknown, config: unknown, options?: UseChartValidationOptions): UseChartValidationReturn;
-/**
- * Simplified hook for basic chart validation
- */
-export declare function useChartDataValidation(data: unknown, config: unknown): UseChartValidationReturn;
-/**
- * Hook for production chart validation (no console warnings)
- */
-export declare function useChartValidationProduction(data: unknown, config: unknown, onError?: (errors: ChartValidationError[]) => void): UseChartValidationReturn;
 export {};

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

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo, useEffect, useCallback } from 'react';
 import { validateChart, sanitizeChartData, calculateSafeScaleRange, SafeMath } from '../utils/chart-validation.js';
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 // Optimized animation frame throttle for smooth movement
@@ -111,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');
                 }
@@ -129,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) {
@@ -139,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,8 +12,9 @@ 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, ChartLegendContent } from "./shared/ChartLegend";
+export { ChartLegend } from "./shared/ChartLegend";
 export { XAxis, YAxis } from "./shared/ChartAxis";
 export { ChartText } from "./shared/ChartText";
 export { ChartMarker } from "./shared/ChartMarker";
@@ -24,15 +26,16 @@ 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 type { ChartDataPoint, ChartConfig, ChartVariant, CurveType, BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, StandardAxisConfig, ChartThemeOverrides, CHART_DEFAULTS, } from "./types/chart.types";
+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 { ChartLegendProps, ChartLegendContentProps, } from "./shared/ChartLegend/ChartLegend.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";
 export type { ChartMarkerProps, ChartMarkerTheme, } from "./shared/ChartMarker/ChartMarker.types";
 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';
@@ -9,19 +11,21 @@ export { MultiSegmentDonutChart } from './DonutChart/MultiSegmentDonutChart.js';
 export { Heatmap } from './Heatmap/Heatmap.js';
 import './Heatmap/HeatmapCell.js';
 import 'react/jsx-runtime';
-import 'clsx';
-import 'tailwind-merge';
+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 { 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 { ChartLegendContent } from './shared/ChartLegend/ChartLegendContent.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 };

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

@@ -1,13 +1,14 @@
 import type { ChartDataPoint } from '../../types/chart.types';
+/**
+ * 🔴 No `color` / `fontSize` here on purpose. Axis lines and labels are themed via CSS
+ * variables (`stroke-[var(--color-border)]` and the text utilities), so both props were
+ * accepted and then ignored. Restyle an axis with `className`, or change the token.
+ */
 export interface BaseAxisProps {
     /** Whether to show the axis */
     show?: boolean;
     /** Custom className for styling */
     className?: string;
-    /** Color of the axis line and text */
-    color?: string;
-    /** Font size for axis labels */
-    fontSize?: number;
     /** Whether to show tick marks */
     showTicks?: boolean;
     /** Length of tick marks */
@@ -64,9 +65,73 @@ export interface YAxisProps extends BaseAxisProps {
     showGrid?: boolean;
     /** Width of the chart area for grid lines */
     gridWidth?: number;
+    /** Custom className for the grid lines this axis draws (`className` styles the axis group) */
+    gridClassName?: string;
     /** Custom tick values */
     ticks?: number[];
 }
+/**
+ * A VALUE axis rendered horizontally (ticks along the bottom).
+ *
+ * The mirror of `YAxisProps`, for charts whose value axis runs left-to-right
+ * (HorizontalBarChart). Note `XAxis` is a CATEGORY axis despite also being
+ * horizontal — the two axis families are split by what they measure, not by
+ * which way they point.
+ */
+export interface ValueXAxisProps extends BaseAxisProps {
+    /** Minimum value for the axis */
+    min: number;
+    /** Maximum value for the axis */
+    max: number;
+    /** Number of ticks */
+    tickCount?: number;
+    /** X position of the axis */
+    x: number;
+    /** Y position of the axis (its baseline) */
+    y: number;
+    /** Width of the axis */
+    width: number;
+    /** Text anchor for labels */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Custom tick formatter */
+    tickFormatter?: (value: number) => string;
+    /** Whether to draw grid lines up from each tick */
+    showGrid?: boolean;
+    /** Height of the chart area for grid lines */
+    gridHeight?: number;
+    /** Custom tick values */
+    ticks?: number[];
+}
+/**
+ * A CATEGORY axis rendered vertically (one label per category, down the left).
+ *
+ * The mirror of `XAxisProps`, for charts whose categories stack vertically
+ * (HorizontalBarChart).
+ */
+export interface CategoryYAxisProps extends BaseAxisProps {
+    /** Data points for the axis */
+    data: Array<{
+        name?: string;
+        label?: string;
+        [key: string]: string | number | null | undefined;
+    }>;
+    /** X position of the axis (its line) */
+    x: number;
+    /** Y position of the axis */
+    y: number;
+    /** Height of the axis */
+    height: number;
+    /** Height of each category/bar group */
+    categoryHeight: number;
+    /** Gap between categories */
+    categoryGap?: number;
+    /** Text anchor for labels */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Custom label formatter */
+    labelFormatter?: (value: ChartDataPoint, index: number) => string;
+    /** Maximum width for labels before truncation */
+    maxLabelWidth?: number;
+}
 export interface AxisTickProps {
     /** Value of the tick */
     value: number | string;
@@ -82,10 +147,6 @@ export interface AxisTickProps {
     textAnchor?: 'start' | 'middle' | 'end';
     /** Custom formatter */
     formatter?: (value: number | string) => string;
-    /** Font size */
-    fontSize?: number;
-    /** Color */
-    color?: string;
     /** Rotation angle */
     rotation?: number;
     /** Maximum width before truncation */

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ValueXAxisProps } from "./ChartAxis.types";
+/**
+ * ValueXAxis component for charts
+ * Renders a horizontal VALUE axis: nice ticks, labels below, optional grid lines
+ * rising from each tick.
+ *
+ * This is `YAxis` rotated — same Heckbert nice-ticks and the same tick formatting,
+ * so a horizontal chart's value ticks read identically to a vertical one's. Kept as a
+ * separate component rather than an `orientation` prop on YAxis because every position
+ * calculation and text anchor differs; a branchy shared axis would be harder to follow
+ * than two flat mirrors.
+ */
+export declare const ValueXAxis: React.FC<ValueXAxisProps>;

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

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { ChartText } from '../ChartText/ChartText.js';
+import { generateNiceTicks } from '../../utils/chart-validation.js';
+
+/**
+ * ValueXAxis component for charts
+ * Renders a horizontal VALUE axis: nice ticks, labels below, optional grid lines
+ * rising from each tick.
+ *
+ * This is `YAxis` rotated — same Heckbert nice-ticks and the same tick formatting,
+ * so a horizontal chart's value ticks read identically to a vertical one's. Kept as a
+ * separate component rather than an `orientation` prop on YAxis because every position
+ * calculation and text anchor differs; a branchy shared axis would be harder to follow
+ * than two flat mirrors.
+ */
+const ValueXAxis = React__default.memo(({ min, max, tickCount = 5, x, y, width, show = true, className, showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", tickFormatter, showGrid = false, gridHeight = 0, ticks: customTicks, }) => {
+    if (!show)
+        return null;
+    // Generate tick values using Heckbert's nice numbers algorithm (same as YAxis)
+    const ticks = (() => {
+        if (customTicks)
+            return customTicks;
+        if (tickCount <= 1)
+            return [min];
+        const { ticks: niceTicks } = generateNiceTicks(min, max, tickCount);
+        return niceTicks;
+    })();
+    // Identical to YAxis.formatTick — the two must agree, or the same dataset would
+    // label differently depending on orientation.
+    const formatTick = (value) => {
+        if (tickFormatter) {
+            return tickFormatter(value);
+        }
+        if (Math.abs(value) >= 1000000) {
+            return `${Math.round(value / 1000000)}M`;
+        }
+        else if (Math.abs(value) >= 1000) {
+            return `${Math.round(value / 1000)}K`;
+        }
+        else if (Number.isInteger(value) ||
+            Math.abs(value - Math.round(value)) < 0.01) {
+            return Math.round(value).toString();
+        }
+        else {
+            return value.toFixed(1);
+        }
+    };
+    const getTickX = (value) => {
+        if (max === min) {
+            return x + width / 2; // Center position when no range
+        }
+        const ratio = (value - min) / (max - min);
+        return x + ratio * width;
+    };
+    return (jsxs("g", { className: cn("chart-value-x-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x + width, y2: y, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), ticks.map((tick, index) => {
+                const tickX = getTickX(tick);
+                return (jsxs("g", { children: [showGrid && gridHeight > 0 && (jsx("line", { x1: tickX, y1: y, x2: tickX, y2: y - gridHeight, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 })), showTicks && (jsx("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: tickX, y: y + tickLength + tickPadding, textAnchor: textAnchor, children: formatTick(tick) })] }, index));
+            })] }));
+});
+ValueXAxis.displayName = "ValueXAxis";
+
+export { ValueXAxis };

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

@@ -7,7 +7,7 @@ import { ChartText } from '../ChartText/ChartText.js';
  * XAxis component for charts
  * Renders horizontal axis with labels and optional tick marks
  */
-const XAxis = React__default.memo(({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
+const XAxis = React__default.memo(({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
     if (!show)
         return null;
     const formatLabel = (item, index) => {

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

@@ -8,7 +8,7 @@ import { generateNiceTicks } from '../../utils/chart-validation.js';
  * YAxis component for charts
  * Renders vertical axis with labels, optional tick marks, and grid lines
  */
-const YAxis = React__default.memo(({ min, max, tickCount = 5, x, y, height, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", tickFormatter, showGrid = false, gridWidth = 0, ticks: customTicks, }) => {
+const YAxis = React__default.memo(({ min, max, tickCount = 5, x, y, height, show = true, className, showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", tickFormatter, showGrid = false, gridWidth = 0, gridClassName, ticks: customTicks, }) => {
     if (!show)
         return null;
     // Generate tick values using Heckbert's nice numbers algorithm
@@ -48,7 +48,7 @@ const YAxis = React__default.memo(({ min, max, tickCount = 5, x, y, height, show
     };
     return (jsxs("g", { className: cn("chart-y-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x, y2: y + height, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), ticks.map((tick, index) => {
                 const tickY = getTickY(tick);
-                return (jsxs("g", { children: [showGrid && gridWidth > 0 && (jsx("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 })), 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", children: formatTick(tick) })] }, index));
+                return (jsxs("g", { children: [showGrid && gridWidth > 0 && (jsx("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, className: cn("opacity-80 stroke-[var(--color-border)]", gridClassName), strokeWidth: 1 })), 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", children: formatTick(tick) })] }, index));
             })] }));
 });
 

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

@@ -1,3 +1,5 @@
 export { XAxis } from './XAxis';
 export { YAxis } from './YAxis';
-export type { BaseAxisProps, XAxisProps, YAxisProps, AxisTickProps, } from './ChartAxis.types';
+export { ValueXAxis } from './ValueXAxis';
+export { CategoryYAxis } from './CategoryYAxis';
+export type { BaseAxisProps, XAxisProps, YAxisProps, ValueXAxisProps, CategoryYAxisProps, AxisTickProps, } from './ChartAxis.types';

package/dist/components/charts/shared/ChartCrosshair/ChartCrosshair.js

@@ -1,7 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../../utils/cn.js';
 import { chartCrosshairTheme } from './ChartCrosshair.theme.js';
+import { CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION } from '../../utils/animation-utils.js';
 
 /**
  * ChartCrosshair component for rendering crosshair lines in charts
@@ -10,22 +12,13 @@ import { chartCrosshairTheme } from './ChartCrosshair.theme.js';
 const ChartCrosshair = ({ show, x, y, margin, innerWidth, innerHeight, showHorizontal = false, strokeColor = "#6b7280", strokeWidth = 1, strokeDasharray = "4 4", opacity = 0.4, className, }) => {
     const theme = chartCrosshairTheme;
     const baseClasses = cn(theme.baseStyle, className);
-    return (jsx(AnimatePresence, { children: show && (jsxs(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
-                duration: 0.3,
-                ease: "easeInOut"
-            }, children: [jsx(motion.line, { x1: x, y1: margin.top, x2: x, y2: margin.top + innerHeight, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.verticalLine), animate: {
+    return (jsx(AnimatePresence, { children: show && (jsxs(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: CROSSHAIR_FADE_TRANSITION, children: [jsx(motion.line, { x1: x, y1: margin.top, x2: x, y2: margin.top + innerHeight, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.verticalLine), initial: false, animate: {
                         x1: x,
                         x2: x
-                    }, transition: {
-                        duration: 0.2,
-                        ease: "easeOut"
-                    } }), showHorizontal && y !== undefined && (jsx(motion.line, { x1: margin.left, y1: y, x2: margin.left + innerWidth, y2: y, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.horizontalLine), animate: {
+                    }, transition: CROSSHAIR_FOLLOW_TRANSITION }), showHorizontal && y !== undefined && (jsx(motion.line, { x1: margin.left, y1: y, x2: margin.left + innerWidth, y2: y, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.horizontalLine), initial: false, animate: {
                         y1: y,
                         y2: y
-                    }, transition: {
-                        duration: 0.2,
-                        ease: "easeOut"
-                    } }))] })) }));
+                    }, transition: CROSSHAIR_FOLLOW_TRANSITION }))] })) }));
 };
 
 export { ChartCrosshair };

package/dist/components/charts/shared/ChartErrorBoundary/ChartErrorBoundary.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { cn } from '../../../../utils/cn.js';
@@ -39,7 +40,7 @@ class ChartErrorBoundary extends Component {
                 return this.props.fallback;
             }
             // Default error UI
-            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-sm font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-sm text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-xs", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
+            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-base font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-base text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-sm text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-sm font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-sm", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-sm bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
         }
         return this.props.children;
     }

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.d.ts

@@ -12,8 +12,6 @@ export interface HorizontalGridProps {
     lineCount?: number;
     /** Whether to show the grid */
     show?: boolean;
-    /** Grid line color */
-    color?: string;
     /** Additional CSS classes */
     className?: string;
     /** Custom tick positions (overrides lineCount) */

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.js

@@ -5,7 +5,7 @@ import { cn } from '../../../../utils/cn.js';
  * HorizontalGrid component for charts
  * Renders horizontal grid lines at specified intervals
  */
-const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, color = "currentColor", className, tickPositions, }) => {
+const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, className, tickPositions, }) => {
     if (!show)
         return null;
     // Generate grid line positions

package/dist/components/charts/shared/ChartGrid/VerticalGrid.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface VerticalGridProps {
+    /** X position to start the grid */
+    x: number;
+    /** Y position to start the grid */
+    y: number;
+    /** Width of the grid area */
+    width: number;
+    /** Height of the grid area */
+    height: number;
+    /** Number of grid lines */
+    lineCount?: number;
+    /** Whether to show the grid */
+    show?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom tick positions (overrides lineCount) */
+    tickPositions?: number[];
+}
+/**
+ * VerticalGrid component for charts
+ * Renders vertical grid lines at specified intervals — the mirror of HorizontalGrid,
+ * for charts whose VALUE axis runs horizontally (e.g. HorizontalBarChart), where the
+ * reference lines a reader traces are vertical.
+ *
+ * Deliberately has NO `color` prop: the line is themed via `stroke-[var(--color-border)]`.
+ * Don't add one here without wiring it up.
+ */
+export declare const VerticalGrid: React.FC<VerticalGridProps>;

package/dist/components/charts/shared/ChartGrid/VerticalGrid.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * VerticalGrid component for charts
+ * Renders vertical grid lines at specified intervals — the mirror of HorizontalGrid,
+ * for charts whose VALUE axis runs horizontally (e.g. HorizontalBarChart), where the
+ * reference lines a reader traces are vertical.
+ *
+ * Deliberately has NO `color` prop: the line is themed via `stroke-[var(--color-border)]`.
+ * Don't add one here without wiring it up.
+ */
+const VerticalGrid = ({ x, y, width, height, lineCount = 5, show = true, className, tickPositions, }) => {
+    if (!show)
+        return null;
+    // Generate grid line positions
+    const positions = tickPositions ||
+        Array.from({ length: lineCount }, (_, i) => {
+            if (lineCount <= 1)
+                return x;
+            return x + (i * width) / (lineCount - 1);
+        });
+    return (jsx("g", { className: cn("chart-vertical-grid", className), children: positions.map((lineX, index) => (jsx("line", { x1: lineX, y1: y, x2: lineX, y2: y + height, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 }, index))) }));
+};
+
+export { VerticalGrid };