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

package/dist/components/charts/Heatmap/Heatmap.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect } from 'react';
+import { useRef, useMemo } from 'react';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
-import { useChart } from '../ChartContainer.js';
+import { useOptionalChart } from '../ChartContainer.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { HeatmapCell } from './HeatmapCell.js';
 import { processHeatmapData, createGridMatrix, calculateIntensity, getDefaultTooltipContent } from './utils/heatmapUtils.js';
@@ -15,12 +16,14 @@ import { heatmapTheme } from './Heatmap.theme.js';
  * Supports weekly, monthly, hourly views and custom data structures
  */
 const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorScale = { steps: 10, minOpacity: 0.1 }, layout = { gap: 6 }, axis = { showXAxis: true, showYAxis: true }, tooltip = { enabled: true }, legend = { enabled: true }, valueRange, onCellClick, cellRenderer, className, variant = 'default', children, ...props }) => {
-    // Get data and config from context if not provided as props
-    const chartContext = useChart();
-    const data = dataProp || chartContext.data;
-    const config = configProp || chartContext.config;
+    // Get data and config from context if not provided as props. `data`/`config`
+    // are documented as directly-passable — Heatmap must also work standalone,
+    // with no wrapping <ChartContainer>, so the context read is optional here
+    // (returns `null` instead of throwing) rather than the strict `useChart()`.
+    const chartContext = useOptionalChart();
+    const data = dataProp || (chartContext === null || chartContext === void 0 ? void 0 : chartContext.data) || [];
+    const config = configProp || (chartContext === null || chartContext === void 0 ? void 0 : chartContext.config) || {};
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
     // Detect if device is mobile/touch
     const isMobile = typeof window !== 'undefined' &&
         ('ontouchstart' in window || navigator.maxTouchPoints > 0);
@@ -38,23 +41,6 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
     const gridMatrix = useMemo(() => {
         return createGridMatrix(data, xCategories, yCategories);
     }, [data, xCategories, yCategories]);
-    // Measure container dimensions
-    useEffect(() => {
-        const updateDimensions = () => {
-            if (containerRef.current) {
-                const { width, height } = containerRef.current.getBoundingClientRect();
-                setDimensions({ width, height });
-            }
-        };
-        updateDimensions();
-        const resizeObserver = new ResizeObserver(updateDimensions);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
     // Simple color resolution - similar to AreaChart
     const getCellColor = () => {
         var _a;
@@ -110,7 +96,7 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
     const renderXAxisLabels = () => {
         if (!axis.showXAxis)
             return null;
-        return (jsxs("div", { className: cn("flex justify-between items-center px-1 py-2", heatmapTheme.axisLabelStyle), style: { gridColumn: `1 / -1` }, role: "list", "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description", children: [xCategories.map((category, index) => (jsx("div", { className: "flex-1 text-center px-1", style: {
+        return (jsxs("div", { className: cn("flex justify-between items-center px-1 py-2", heatmapTheme.axisLabelStyle), style: { gridColumn: `1 / -1` }, role: xCategories.length > 0 ? "list" : undefined, "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description", children: [xCategories.map((category, index) => (jsx("div", { className: "flex-1 text-center px-1", style: {
                         transform: axis.xAxisRotation ? `rotate(${axis.xAxisRotation}deg)` : undefined
                     }, role: "listitem", "aria-label": `X-axis label: ${axis.xAxisFormatter
                         ? axis.xAxisFormatter(category, index)
@@ -125,7 +111,7 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
                 gridTemplateRows: `repeat(${yCategories.length}, 1fr)`,
                 gap: typeof layout.gap === 'number' ? `${layout.gap}px` : layout.gap,
                 height: '100%',
-            }, role: "list", "aria-label": "Y-axis labels", "aria-describedby": "heatmap-y-axis-description", children: [yCategories.map((category, index) => (jsx("div", { className: "flex items-center justify-end", style: {
+            }, role: yCategories.length > 0 ? "list" : undefined, "aria-label": "Y-axis labels", "aria-describedby": "heatmap-y-axis-description", children: [yCategories.map((category, index) => (jsx("div", { className: "flex items-center justify-end", style: {
                         transform: axis.yAxisRotation ? `rotate(${axis.yAxisRotation}deg)` : undefined
                     }, role: "listitem", "aria-label": `Y-axis label: ${axis.yAxisFormatter
                         ? axis.yAxisFormatter(category, index)
@@ -133,16 +119,23 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
                         ? axis.yAxisFormatter(category, index)
                         : String(category) }, category))), jsxs("span", { id: "heatmap-y-axis-description", className: "sr-only", children: ["Y-axis contains ", yCategories.length, " categories representing the vertical dimension of the heatmap"] })] }));
     };
-    return (jsxs("div", { ref: containerRef, className: cn(heatmapTheme.containerStyle, variant === 'bordered' && 'border border-gray-200 dark:border-gray-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className), ...props, children: [jsxs("div", { className: "flex flex-1 min-h-0", children: [axis.showYAxis && (jsxs("div", { className: "flex-shrink-0 w-16 flex flex-col", children: [axis.showXAxis && jsx("div", { className: "flex-shrink-0 h-8" }), jsx("div", { className: "flex-1", children: renderYAxisLabels() })] })), jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [axis.showXAxis && (jsx("div", { className: "flex-shrink-0 h-8", children: renderXAxisLabels() })), jsx("div", { className: "flex-1 relative min-h-0", children: jsx(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: heatmapTheme.gridStyle, children: gridMatrix.flat().map((cellData, index) => {
-                                        const intensity = calculateIntensity(cellData.value, minValue, maxValue);
-                                        `${cellData.x}-${cellData.y}`;
-                                        // Skip null values entirely
-                                        if (cellData.value === null) {
-                                            return (jsx("div", { className: "bg-transparent" }, `${cellData.x}-${cellData.y}-${index}`));
-                                        }
-                                        const CellComponent = cellRenderer || HeatmapCell;
-                                        return (jsx(CellComponent, { data: cellData, intensity: intensity, minOpacity: colorScale === null || colorScale === void 0 ? void 0 : colorScale.minOpacity, color: cellColor, onClick: onCellClick, onHover: handleCellHover, onMouseMove: handleCellMouseMove, onLeave: handleCellLeave, className: "rounded-sm" }, `${cellData.x}-${cellData.y}-${index}`));
-                                    }) }) })] })] }), ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (jsx("div", { className: "flex-shrink-0 mt-2", children: jsx(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }) })), tooltip.enabled && (jsx(ChartTooltip, { content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef })), children] }));
+    return (jsxs("div", { ref: containerRef, className: cn(heatmapTheme.containerStyle, variant === 'bordered' && 'border border-gray-200 dark:border-gray-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className), ...props, children: [jsxs("div", { className: "flex flex-1 min-h-0", children: [axis.showYAxis && (jsxs("div", { className: "flex-shrink-0 w-16 flex flex-col", children: [axis.showXAxis && jsx("div", { className: "flex-shrink-0 h-8" }), jsx("div", { className: "flex-1", children: renderYAxisLabels() })] })), jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [axis.showXAxis && (jsx("div", { className: "flex-shrink-0 h-8", children: renderXAxisLabels() })), jsx("div", { className: "flex-1 relative min-h-0", children: jsx(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: heatmapTheme.gridStyle, role: "grid", "aria-label": `Heatmap grid, ${yCategories.length} rows by ${xCategories.length} columns`, children: gridMatrix.map((rowCells, rowIndex) => (
+                                    // `role="row"` groups each grid-matrix row for ARIA purposes
+                                    // (satisfies aria-required-parent on the gridcells below and
+                                    // aria-required-children on the grid above) without affecting
+                                    // the CSS-grid layout: `display: contents` removes this
+                                    // wrapper's own box, so its children still participate as
+                                    // direct items of the `display: grid` container.
+                                    jsx("div", { role: "row", style: { display: 'contents' }, children: rowCells.map((cellData, colIndex) => {
+                                            const intensity = calculateIntensity(cellData.value, minValue, maxValue);
+                                            const index = rowIndex * rowCells.length + colIndex;
+                                            // Skip null values entirely
+                                            if (cellData.value === null) {
+                                                return (jsx("div", { className: "bg-transparent" }, `${cellData.x}-${cellData.y}-${index}`));
+                                            }
+                                            const CellComponent = cellRenderer || HeatmapCell;
+                                            return (jsx(CellComponent, { data: cellData, intensity: intensity, minOpacity: colorScale === null || colorScale === void 0 ? void 0 : colorScale.minOpacity, color: cellColor, onClick: onCellClick, onHover: handleCellHover, onMouseMove: handleCellMouseMove, onLeave: handleCellLeave, className: "rounded-sm" }, `${cellData.x}-${cellData.y}-${index}`));
+                                        }) }, `row-${rowIndex}`))) }) })] })] }), ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (jsx("div", { className: "flex-shrink-0 mt-2", children: jsx(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }) })), tooltip.enabled && (jsx(ChartTooltip, { content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef })), children] }));
 };
 
 export { Heatmap };

package/dist/components/charts/Heatmap/HeatmapCell.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useRef } from 'react';
 import { motion } from 'motion/react';
@@ -88,7 +89,7 @@ className, onClick, onHover, onMouseMove, onLeave, children, }) => {
                 e.preventDefault();
                 onClick(data);
             }
-        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300", children: children })) }));
+        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-700 dark:text-gray-300", children: children })) }));
 };
 const HeatmapCell = React__default.memo(HeatmapCellInner);
 

package/dist/components/charts/Heatmap/HeatmapLegend.js

@@ -11,7 +11,7 @@ minValue = 0, maxValue = 100, labels = {
     const gradientStyle = {
         background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
     };
-    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
+    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
 };
 
 export { HeatmapLegend };

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

@@ -0,0 +1,16 @@
+import React from "react";
+import type { HorizontalBarChartProps } from "./HorizontalBarChart.types";
+/**
+ * HorizontalBarChart — categories run down the left, values extend to the right.
+ *
+ * Conventionally a "bar chart" in strict statistical usage (where vertical bars are a
+ * "column chart"); most libraries expose it as an orientation. Here it is its own
+ * component: it shares BarChart's data model but none of its axis wiring, because the
+ * value/category axes are swapped.
+ *
+ * 🔴 Axis vocabulary: `CategoryYAxis` (categories, vertical) + `ValueXAxis` (values,
+ * horizontal) + `VerticalGrid`. Do NOT reach for XAxis/YAxis — those are the CATEGORY-
+ * bottom / VALUE-left pair a column chart needs; the axis family splits by what an axis
+ * measures, not which way it points.
+ */
+export declare const HorizontalBarChart: React.FC<HorizontalBarChartProps>;

package/dist/components/charts/HorizontalBarChart/HorizontalBarChart.js

@@ -0,0 +1,237 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useRef, useId, useState, useEffect, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { useChartValidation } from '../hooks/useChartValidation.js';
+import { useChartDimensions } from '../hooks/useChartDimensions.js';
+import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.js';
+import { CategoryYAxis } from '../shared/ChartAxis/CategoryYAxis.js';
+import { ValueXAxis } from '../shared/ChartAxis/ValueXAxis.js';
+import { VerticalGrid } from '../shared/ChartGrid/VerticalGrid.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
+import { HORIZONTAL_BAR_CHART_DEFAULTS } from './HorizontalBarChart.types.js';
+import { X_AXIS_MARGIN } from '../types/chart.types.js';
+import { barEntranceTransition, BAR_GROUP_STAGGER } from '../utils/animation-utils.js';
+import { BarRingDef, BarGlowRing, barDimOpacity, deriveBarEmphasis, barStrokeStyle } from '../utils/bar-emphasis.js';
+
+/**
+ * Bar with only its FAR end rounded — the end the bar grows toward. The baseline end
+ * stays square so bars sit flush against the zero line, exactly as BarChart's
+ * `createRoundedTopBarPath` keeps a column's base square and rounds its top.
+ *
+ * `grow` is the direction the bar extends from zero: "right" for positive values,
+ * "left" for negative ones (whose far end is on the left).
+ */
+const createRoundedEndBarPath = (x, y, width, height, radius, grow) => {
+    const r = Math.max(0, Math.min(radius, width, height / 2));
+    if (grow === "right") {
+        return `
+      M ${x},${y}
+      L ${x + width - r},${y}
+      Q ${x + width},${y} ${x + width},${y + r}
+      L ${x + width},${y + height - r}
+      Q ${x + width},${y + height} ${x + width - r},${y + height}
+      L ${x},${y + height}
+      Z
+    `.trim();
+    }
+    return `
+    M ${x + width},${y}
+    L ${x + r},${y}
+    Q ${x},${y} ${x},${y + r}
+    L ${x},${y + height - r}
+    Q ${x},${y + height} ${x + r},${y + height}
+    L ${x + width},${y + height}
+    Z
+  `.trim();
+};
+/**
+ * HorizontalBarChart — categories run down the left, values extend to the right.
+ *
+ * Conventionally a "bar chart" in strict statistical usage (where vertical bars are a
+ * "column chart"); most libraries expose it as an orientation. Here it is its own
+ * component: it shares BarChart's data model but none of its axis wiring, because the
+ * value/category axes are swapped.
+ *
+ * 🔴 Axis vocabulary: `CategoryYAxis` (categories, vertical) + `ValueXAxis` (values,
+ * horizontal) + `VerticalGrid`. Do NOT reach for XAxis/YAxis — those are the CATEGORY-
+ * bottom / VALUE-left pair a column chart needs; the axis family splits by what an axis
+ * measures, not which way it points.
+ */
+const HorizontalBarChart = ({ data, config, className, width = "100%", height = 400, title, description, enableKeyboardNavigation = true, showGrid = HORIZONTAL_BAR_CHART_DEFAULTS.showGrid, showXAxis = HORIZONTAL_BAR_CHART_DEFAULTS.showXAxis, showYAxis = HORIZONTAL_BAR_CHART_DEFAULTS.showYAxis, legend, minValue: propMinValue, maxValue: propMaxValue, barRadius, radius, // @deprecated — mapped to barRadius below, same cascade as BarChart
+gap = HORIZONTAL_BAR_CHART_DEFAULTS.gap, categoryGap = HORIZONTAL_BAR_CHART_DEFAULTS.categoryGap, categoryWidth = HORIZONTAL_BAR_CHART_DEFAULTS.categoryWidth, colors, showAnimation = HORIZONTAL_BAR_CHART_DEFAULTS.showAnimation, showValidationWarnings = process.env.NODE_ENV === "development", darkMode = false, valueFormatter, }) => {
+    var _a;
+    const containerRef = useRef(null);
+    const { dimensions, measured } = useChartDimensions(containerRef);
+    const shouldReduceMotion = useReducedMotion();
+    // Sanitised for SVG url(#…) refs, matching LollipopChart — useId's format is a React
+    // implementation detail and has historically contained characters that break a
+    // fragment reference.
+    const chartId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const [hoveredKey, setHoveredKey] = useState(null);
+    // Entrance runs once; afterwards `barEntranceTransition` drops the staggered opacity
+    // delay so hover/data updates respond immediately instead of re-queueing behind it.
+    const [hasAnimated, setHasAnimated] = useState(false);
+    useEffect(() => {
+        setHasAnimated(true);
+    }, [shouldReduceMotion, showAnimation]);
+    const isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave } = useTooltipPosition({ containerRef, isMobile });
+    const { isValid, sanitizedData, safeScale } = useChartValidation(data, config, {
+        autoSanitize: true,
+        // Wired, not decorative: ESLint caught this prop destructured-but-unread on the
+        // first draft — i.e. the exact dead-prop pattern the chart family is full of.
+        logWarnings: showValidationWarnings,
+    });
+    const seriesKeys = useMemo(() => Object.keys(config), [config]);
+    const { chartAccessibilityProps, descriptionProps, focusedElementIndex, isKeyboardMode, } = useChartAccessibility({
+        chartType: "bar",
+        data: sanitizedData,
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
+    const resolvedRadius = (_a = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _a !== void 0 ? _a : HORIZONTAL_BAR_CHART_DEFAULTS.barRadius;
+    const seriesColor = (key, index) => { var _a, _b, _c; return (_c = (_a = colors === null || colors === void 0 ? void 0 : colors[index % colors.length]) !== null && _a !== void 0 ? _a : (_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : "var(--color-primary)"; };
+    // Category labels live on the LEFT, so their width is the left margin. Unlike a
+    // bottom axis (which uses the shared X_AXIS_MARGIN so side-by-side charts align),
+    // this is caller-controlled — no constant can know how wide "United Kingdom" is.
+    const margin = useMemo(() => ({
+        top: 8,
+        right: 16,
+        bottom: showXAxis ? X_AXIS_MARGIN : 8,
+        left: showYAxis ? categoryWidth : 8,
+    }), [showXAxis, showYAxis, categoryWidth]);
+    const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // 🔴 Range via safeScale.calculateRange, exactly as BarChart does — NOT a hand-rolled
+    // min/max. It returns a *nice* range, which the axis's Heckbert tick generation then
+    // lands on exactly. A raw data max (e.g. 1280) desyncs the two: generateNiceTicks
+    // emits 0…2000 while the scale still divides by 1280, so the upper ticks position
+    // past the end of the axis. `includeZero` keeps every bar on a shared baseline.
+    const { min: minValue, max: maxValue } = safeScale.calculateRange({
+        minValue: propMinValue,
+        maxValue: propMaxValue,
+        includeZero: true,
+    });
+    const range = maxValue - minValue;
+    const scaleX = (value) => range > 0 ? ((value - minValue) / range) * innerWidth : 0;
+    // Where value 0 sits — bars grow right from here (or left, for negatives).
+    const zeroX = margin.left + scaleX(0);
+    const categoryCount = sanitizedData.length;
+    const totalCategoryGap = Math.max(0, (categoryCount - 1) * categoryGap);
+    const categoryHeight = categoryCount > 0
+        ? Math.max(0, (innerHeight - totalCategoryGap) / categoryCount)
+        : 0;
+    // Each series gets a row inside its category band.
+    const barHeight = seriesKeys.length > 0
+        ? Math.max(0, (categoryHeight - gap * (seriesKeys.length - 1)) / seriesKeys.length)
+        : 0;
+    const legendPosition = resolveLegendPosition(legend, config);
+    const legendItems = useMemo(() => seriesKeys.map((key, index) => {
+        var _a, _b;
+        return ({
+            key,
+            label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
+            color: seriesColor(key, index),
+        });
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [seriesKeys, config, colors]);
+    const formatValue = (value) => valueFormatter ? valueFormatter(value) : String(value);
+    if (!isValid || categoryCount === 0) {
+        return (jsx("div", { ref: containerRef, className: cn("flex items-center justify-center", darkMode && "dark", className), style: { width, height }, children: jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "Invalid Chart Data" }) }));
+    }
+    return (jsx(ChartErrorBoundary, { children: jsxs("div", { ref: containerRef, className: cn("relative flex flex-col", darkMode && "dark", className), style: { width, height }, ...chartAccessibilityProps, children: [description && jsx("span", { ...descriptionProps }), legendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), jsx("div", { className: "relative min-h-0 flex-1", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, 
+                        // The hover glow ring bleeds past the plot box, so it must not be clipped.
+                        style: { overflow: "visible" }, children: [jsx("defs", { children: seriesKeys.map((key, index) => (jsx(BarRingDef, { ringId: `${chartId}-hbar-ring-${index}`, color: seriesColor(key, index) }, key))) }), jsx(VerticalGrid, { show: showGrid && measured, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(CategoryYAxis, { show: showYAxis && measured, data: sanitizedData, x: margin.left, y: margin.top, height: innerHeight, categoryHeight: categoryHeight, categoryGap: categoryGap, maxLabelWidth: Math.max(0, categoryWidth - 16) }), jsx(ValueXAxis, { show: showXAxis && measured, min: minValue, max: maxValue, x: margin.left, y: margin.top + innerHeight, width: innerWidth }), measured && (jsx("g", { className: "chart-hbars", children: sanitizedData.map((item, categoryIndex) => {
+                                    const bandY = margin.top + categoryIndex * (categoryHeight + categoryGap);
+                                    return (jsx("g", { children: seriesKeys.map((key, seriesIndex) => {
+                                            const rawValue = item[key];
+                                            const isNull = rawValue === null ||
+                                                rawValue === undefined ||
+                                                !(typeof rawValue === "number" && isFinite(rawValue));
+                                            if (isNull)
+                                                return null;
+                                            const value = rawValue;
+                                            const barY = bandY + seriesIndex * (barHeight + gap);
+                                            const valueX = margin.left + scaleX(value);
+                                            const barX = Math.min(zeroX, valueX);
+                                            const barWidth = Math.abs(valueX - zeroX);
+                                            const fillColor = seriesColor(key, seriesIndex);
+                                            const hoverKey = `${categoryIndex}-${key}`;
+                                            const isHovered = hoveredKey === hoverKey;
+                                            const isFocused = isKeyboardMode && focusedElementIndex === categoryIndex;
+                                            const { isEmphasized, shouldReduceOpacity } = deriveBarEmphasis({
+                                                isHovered,
+                                                isFocused,
+                                                isAnyBarHovered: hoveredKey !== null,
+                                                // Fills are flat, but hover still gets BarChart's premium
+                                                // response: glow ring + colored stroke + the stronger dim.
+                                                isGradientVariant: false,
+                                                premiumEmphasis: true,
+                                            });
+                                            const stroke = barStrokeStyle({
+                                                isFocused,
+                                                isEmphasized,
+                                                isGradientVariant: false,
+                                                fillColor,
+                                                // No resting hairline: these bars read as flat shapes. The
+                                                // focus/emphasis strokes still apply, so keyboard focus and
+                                                // hover stay visible.
+                                                showRestingStroke: false,
+                                            });
+                                            const pathD = createRoundedEndBarPath(barX, barY, barWidth, barHeight, resolvedRadius, value >= 0 ? "right" : "left");
+                                            return (jsxs(React__default.Fragment, { children: [jsx(BarGlowRing, { show: isEmphasized, pathD: pathD, color: fillColor, barWidth: barHeight, filter: `url(#${chartId}-hbar-ring-${seriesIndex})` }), jsx(motion.g, { style: {
+                                                            cursor: "pointer",
+                                                            transformBox: "fill-box",
+                                                            originX: value >= 0 ? 0 : 1,
+                                                            originY: 0.5,
+                                                        }, initial: showAnimation && !shouldReduceMotion
+                                                            ? { scaleX: 0, opacity: 0 }
+                                                            : { scaleX: 1, opacity: 1 }, animate: {
+                                                            scaleX: 1,
+                                                            opacity: barDimOpacity(shouldReduceOpacity, true),
+                                                        }, transition: barEntranceTransition(categoryIndex * BAR_GROUP_STAGGER, hasAnimated), onMouseEnter: (e) => {
+                                                            var _a, _b;
+                                                            setHoveredKey(hoverKey);
+                                                            handleMouseEnter(e, {
+                                                                category: ((_a = item.name) !== null && _a !== void 0 ? _a : `Category ${categoryIndex + 1}`).toString(),
+                                                                series: [
+                                                                    {
+                                                                        key,
+                                                                        label: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.label) || key,
+                                                                        value: formatValue(value),
+                                                                        color: fillColor,
+                                                                    },
+                                                                ],
+                                                            }, {
+                                                                x: valueX,
+                                                                y: barY + barHeight / 2,
+                                                                dimensions,
+                                                            });
+                                                        }, onMouseMove: (e) => handleMouseMove(e, {
+                                                            x: valueX,
+                                                            y: barY + barHeight / 2,
+                                                            dimensions,
+                                                        }), onMouseLeave: () => {
+                                                            setHoveredKey(null);
+                                                            handleMouseLeave();
+                                                        }, children: jsx("path", { d: pathD, fill: fillColor, stroke: stroke.stroke, strokeWidth: stroke.strokeWidth, strokeOpacity: stroke.strokeOpacity, strokeLinejoin: "round", 
+                                                            // 🔴 Matches BarChart. Required here specifically: the
+                                                            // parent <motion.g> carries a scaleX transform, so
+                                                            // without this the stroke is scaled with the bar and the
+                                                            // hover outline renders far heavier than BarChart's.
+                                                            vectorEffect: "non-scaling-stroke" }) })] }, key));
+                                        }) }, categoryIndex));
+                                }) }))] }) }), legendPosition === "bottom" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pt-2" })), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 } })] }) }));
+};
+HorizontalBarChart.displayName = "HorizontalBarChart";
+
+export { HorizontalBarChart };

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

@@ -0,0 +1,62 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps } from "../types/chart.types";
+/**
+ * Visual props that actually apply to a horizontal bar chart.
+ *
+ * 🔴 Narrowed with `Omit` on purpose — see the note on `StandardVisualProps`.
+ * Kept: `barRadius` (+ its deprecated `radius` alias) and `gap`.
+ * Dropped: dot radius, stroke width, and the line/area/stacked-only props.
+ */
+export type HorizontalBarVisualProps = Omit<StandardVisualProps, "dotRadius" | "strokeWidth" | "curved" | "curveType" | "showDots" | "fillOpacity" | "showStroke" | "stacked">;
+/**
+ * 🔴 `variant` is Omitted, not inherited: these bars are flat, single-colour shapes —
+ * there is no gradient/minimal treatment to select. Leaving the inherited prop in place
+ * would publish a control that silently does nothing (and would reach the generative
+ * schema, where an LLM would emit it). Add it back only alongside an implementation.
+ */
+export interface HorizontalBarChartProps extends BaseChartProps, Omit<StandardChartDisplayProps, "variant">, HorizontalBarVisualProps {
+    /** Gap between category rows. */
+    categoryGap?: number;
+    /**
+     * Width reserved for the category labels running down the left. Category names are
+     * arbitrary ("United Kingdom"), so unlike a bottom axis there is no shared constant
+     * that can know how much room they need — hence a prop rather than `X_AXIS_MARGIN`.
+     * @default 120
+     */
+    categoryWidth?: number;
+    /**
+     * Custom color palette for bar series, applied in order and cycled if there are more
+     * series than colors. Any valid CSS color, including CSS variables.
+     * @example ['var(--color-primary)', 'var(--color-success)']
+     */
+    colors?: string[];
+    /** Whether to play the staggered grow-from-left entrance on mount. */
+    showAnimation?: boolean;
+    /**
+     * Log data-validation warnings to the console.
+     * @default true in development
+     */
+    showValidationWarnings?: boolean;
+    /**
+     * Force dark mode styling for the chart. Use when placing the chart on a dark
+     * background while the page is in light mode.
+     */
+    darkMode?: boolean;
+    /** Formats the value shown in the tooltip. */
+    valueFormatter?: (value: number) => string;
+}
+/**
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values
+ * HorizontalBarChart never reads. List only what the component actually consumes.
+ */
+export declare const HORIZONTAL_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 categoryWidth: 120;
+    readonly showAnimation: true;
+};

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

@@ -0,0 +1,21 @@
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+/**
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values
+ * HorizontalBarChart never reads. List only what the component actually consumes.
+ */
+const HORIZONTAL_BAR_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,
+    categoryWidth: 120,
+    // Not in CHART_DEFAULTS — declared here, as BarChart does.
+    showAnimation: true,
+};
+
+export { HORIZONTAL_BAR_CHART_DEFAULTS };

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

@@ -0,0 +1,3 @@
+export { HorizontalBarChart } from "./HorizontalBarChart";
+export { HORIZONTAL_BAR_CHART_DEFAULTS } from "./HorizontalBarChart.types";
+export type { HorizontalBarChartProps, HorizontalBarVisualProps, } from "./HorizontalBarChart.types";