@wallarm-org/design-system 4.1.0 → 4.2.0

package/dist/components/SimpleCharts/ColumnChart/ColumnChart.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactElement, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId.js';
+import { type LineChartDatum, type LineChartSeries } from '../LineChart/LineChartContext.js';
+/**
+ * Generic over the datum shape, as `LineChart<T>`: pass a concrete datum interface and
+ * `xKey` / `series[].key` become compile-time-checked keys of it.
+ */
+export interface ColumnChartProps<T extends LineChartDatum = LineChartDatum> extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** One entry per column (step), sorted ascending by `xKey`. */
+    data: T[];
+    /**
+     * The categories each column is split into, in legend order — the first one stacks on top.
+     * The same schema drives the legend, the parts and the hover popover rows.
+     */
+    series: LineChartSeries<Extract<keyof T, string>>[];
+    /** Key on each datum used as the X-axis value (the step: a day, an hour, …). */
+    xKey: Extract<keyof T, string>;
+}
+/**
+ * Vertical stacked columns: a column per step, split by category. Built on the `LineChart`
+ * contexts, so `LineChartLegend` / `LineChartLegendItem`, `LineChartGrid`, `LineChartYAxis`
+ * and `LineChartTooltip` compose inside it unchanged.
+ */
+export declare function ColumnChart<T extends LineChartDatum = LineChartDatum>({ data, series, xKey, className, children, ref, 'data-testid': testId, ...props }: ColumnChartProps<T>): ReactElement;
+export declare namespace ColumnChart {
+    var displayName: string;
+}

package/dist/components/SimpleCharts/ColumnChart/ColumnChart.js

@@ -0,0 +1,163 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../../utils/cn.js";
+import { TestIdProvider } from "../../../utils/testId.js";
+import { useLineChartActiveKey } from "../LineChart/hooks/useLineChartActiveKey.js";
+import { useLineChartDataWarnings } from "../LineChart/hooks/useLineChartDataWarnings.js";
+import { EMPTY_HIDDEN_SET, LineChartActiveContext, LineChartDataContext } from "../LineChart/LineChartContext.js";
+import { columnChartRootClasses } from "./classes.js";
+const noop = ()=>void 0;
+function ColumnChart(t0) {
+    const $ = c(42);
+    let children;
+    let className;
+    let data;
+    let props;
+    let ref;
+    let series;
+    let testId;
+    let xKey;
+    if ($[0] !== t0) {
+        ({ data, series, xKey, className, children, ref, "data-testid": testId, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = data;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = series;
+        $[7] = testId;
+        $[8] = xKey;
+    } else {
+        children = $[1];
+        className = $[2];
+        data = $[3];
+        props = $[4];
+        ref = $[5];
+        series = $[6];
+        testId = $[7];
+        xKey = $[8];
+    }
+    let t1;
+    if ($[9] !== series) {
+        t1 = new Map(series.map(_temp));
+        $[9] = series;
+        $[10] = t1;
+    } else t1 = $[10];
+    const seriesByKey = t1;
+    let t2;
+    if ($[11] !== data || $[12] !== series || $[13] !== xKey) {
+        t2 = {
+            data,
+            series,
+            xKey
+        };
+        $[11] = data;
+        $[12] = series;
+        $[13] = xKey;
+        $[14] = t2;
+    } else t2 = $[14];
+    useLineChartDataWarnings(t2);
+    let t3;
+    if ($[15] !== seriesByKey) {
+        t3 = {
+            controlledActiveKey: void 0,
+            onActiveKeyChange: void 0,
+            seriesByKey
+        };
+        $[15] = seriesByKey;
+        $[16] = t3;
+    } else t3 = $[16];
+    const { activeKey, setActiveKey } = useLineChartActiveKey(t3);
+    let t4;
+    if ($[17] !== data || $[18] !== series || $[19] !== seriesByKey || $[20] !== setActiveKey || $[21] !== xKey) {
+        t4 = {
+            data,
+            series,
+            seriesByKey,
+            xKey,
+            hiddenSet: EMPTY_HIDDEN_SET,
+            setActiveKey,
+            emitZoom: noop,
+            syncId: void 0,
+            syncMethod: void 0
+        };
+        $[17] = data;
+        $[18] = series;
+        $[19] = seriesByKey;
+        $[20] = setActiveKey;
+        $[21] = xKey;
+        $[22] = t4;
+    } else t4 = $[22];
+    const dataValue = t4;
+    let t5;
+    if ($[23] !== activeKey) {
+        t5 = {
+            activeKey
+        };
+        $[23] = activeKey;
+        $[24] = t5;
+    } else t5 = $[24];
+    let t6;
+    if ($[25] !== className) {
+        t6 = cn(columnChartRootClasses, className);
+        $[25] = className;
+        $[26] = t6;
+    } else t6 = $[26];
+    let t7;
+    if ($[27] !== children || $[28] !== props || $[29] !== ref || $[30] !== t6 || $[31] !== testId) {
+        t7 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "column-chart",
+            "data-testid": testId,
+            className: t6,
+            children: children
+        });
+        $[27] = children;
+        $[28] = props;
+        $[29] = ref;
+        $[30] = t6;
+        $[31] = testId;
+        $[32] = t7;
+    } else t7 = $[32];
+    let t8;
+    if ($[33] !== t7 || $[34] !== testId) {
+        t8 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: t7
+        });
+        $[33] = t7;
+        $[34] = testId;
+        $[35] = t8;
+    } else t8 = $[35];
+    let t9;
+    if ($[36] !== t5 || $[37] !== t8) {
+        t9 = /*#__PURE__*/ jsx(LineChartActiveContext.Provider, {
+            value: t5,
+            children: t8
+        });
+        $[36] = t5;
+        $[37] = t8;
+        $[38] = t9;
+    } else t9 = $[38];
+    let t10;
+    if ($[39] !== dataValue || $[40] !== t9) {
+        t10 = /*#__PURE__*/ jsx(LineChartDataContext.Provider, {
+            value: dataValue,
+            children: t9
+        });
+        $[39] = dataValue;
+        $[40] = t9;
+        $[41] = t10;
+    } else t10 = $[41];
+    return t10;
+}
+function _temp(s) {
+    return [
+        s.key,
+        s
+    ];
+}
+ColumnChart.displayName = "ColumnChart";
+export { ColumnChart };

package/dist/components/SimpleCharts/ColumnChart/ColumnChartBody.d.ts

@@ -0,0 +1,9 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface ColumnChartBodyProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /** Plot slots — `<LineChartGrid>`, `<ColumnChartXAxis>`, `<LineChartYAxis>`, `<ColumnChartStack>`, `<LineChartTooltip>`. */
+    children?: ReactNode;
+    /** Plot height passed to recharts' `<ResponsiveContainer>`. Defaults to the Figma 164px. */
+    height?: number;
+}
+export declare const ColumnChartBody: FC<ColumnChartBodyProps>;

package/dist/components/SimpleCharts/ColumnChart/ColumnChartBody.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { ComposedChart, ResponsiveContainer } from "recharts";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { LineChartDataContext } from "../LineChart/LineChartContext.js";
+import { columnChartBodyClasses } from "./classes.js";
+import { COLUMN_CARD_HEIGHT, COLUMN_DEFAULT_BODY_MARGIN, COLUMN_HEADER_HEIGHT } from "./constants.js";
+const DEFAULT_BODY_HEIGHT = COLUMN_CARD_HEIGHT - COLUMN_HEADER_HEIGHT;
+const ColumnChartBody = (t0)=>{
+    const $ = c(22);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let t1;
+    if ($[0] !== t0) {
+        ({ height: t1, className, ref, children, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = t1;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        t1 = $[5];
+    }
+    const height = void 0 === t1 ? DEFAULT_BODY_HEIGHT : t1;
+    const testId = useTestId("body");
+    const dataCtx = useContext(LineChartDataContext);
+    let t2;
+    if ($[6] !== className) {
+        t2 = cn(columnChartBodyClasses, className);
+        $[6] = className;
+        $[7] = t2;
+    } else t2 = $[7];
+    let t3;
+    if ($[8] !== dataCtx?.data) {
+        t3 = dataCtx?.data ?? [];
+        $[8] = dataCtx?.data;
+        $[9] = t3;
+    } else t3 = $[9];
+    let t4;
+    if ($[10] !== children || $[11] !== t3) {
+        t4 = /*#__PURE__*/ jsx(ComposedChart, {
+            data: t3,
+            margin: COLUMN_DEFAULT_BODY_MARGIN,
+            accessibilityLayer: false,
+            children: children
+        });
+        $[10] = children;
+        $[11] = t3;
+        $[12] = t4;
+    } else t4 = $[12];
+    let t5;
+    if ($[13] !== height || $[14] !== t4) {
+        t5 = /*#__PURE__*/ jsx(ResponsiveContainer, {
+            width: "100%",
+            height: height,
+            children: t4
+        });
+        $[13] = height;
+        $[14] = t4;
+        $[15] = t5;
+    } else t5 = $[15];
+    let t6;
+    if ($[16] !== props || $[17] !== ref || $[18] !== t2 || $[19] !== t5 || $[20] !== testId) {
+        t6 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "column-chart-body",
+            "data-testid": testId,
+            "aria-hidden": "true",
+            className: t2,
+            children: t5
+        });
+        $[16] = props;
+        $[17] = ref;
+        $[18] = t2;
+        $[19] = t5;
+        $[20] = testId;
+        $[21] = t6;
+    } else t6 = $[21];
+    return t6;
+};
+ColumnChartBody.displayName = "ColumnChartBody";
+export { ColumnChartBody };

package/dist/components/SimpleCharts/ColumnChart/ColumnChartStack.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+/**
+ * The columns: every `series` entry stacked into one column per datum, in legend order with the
+ * first series on top. Mount once inside `<ColumnChartBody>`. Column width follows the step
+ * (see `resolveColumnWidth`); hovering a legend item fades the other parts out.
+ */
+export declare const ColumnChartStack: FC;

package/dist/components/SimpleCharts/ColumnChart/ColumnChartStack.js

@@ -0,0 +1,123 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { Bar, BarStack, usePlotArea } from "recharts";
+import { useTestId } from "../../../utils/testId.js";
+import { LineChartActiveContext, LineChartDataContext } from "../LineChart/LineChartContext.js";
+import { CHART_PALETTE_FILL, resolveChartColor } from "../lib/chartPalette.js";
+import { COLUMN_INACTIVE_OPACITY, COLUMN_PART_GAP, COLUMN_RADIUS } from "./constants.js";
+import { resolveColumnWidth } from "./lib/resolveColumnWidth.js";
+const ColumnChartPart = (t0)=>{
+    const $ = c(10);
+    const { x, y, width, height, value, fill, seriesKey, active, dimmed, testId } = t0;
+    const base = Array.isArray(value) ? Number(value[0]) : 0;
+    const partHeight = height - (base > 0 ? COLUMN_PART_GAP : 0);
+    if (!(width > 0) || !(partHeight > 0)) return null;
+    const t1 = dimmed ? COLUMN_INACTIVE_OPACITY : 1;
+    const t2 = active ? "true" : void 0;
+    let t3;
+    if ($[0] !== fill || $[1] !== partHeight || $[2] !== seriesKey || $[3] !== t1 || $[4] !== t2 || $[5] !== testId || $[6] !== width || $[7] !== x || $[8] !== y) {
+        t3 = /*#__PURE__*/ jsx("rect", {
+            x: x,
+            y: y,
+            width: width,
+            height: partHeight,
+            fill: fill,
+            opacity: t1,
+            "data-slot": "column-chart-part",
+            "data-testid": testId,
+            "data-key": seriesKey,
+            "data-active": t2
+        });
+        $[0] = fill;
+        $[1] = partHeight;
+        $[2] = seriesKey;
+        $[3] = t1;
+        $[4] = t2;
+        $[5] = testId;
+        $[6] = width;
+        $[7] = x;
+        $[8] = y;
+        $[9] = t3;
+    } else t3 = $[9];
+    return t3;
+};
+const ColumnChartStack = ()=>{
+    const $ = c(18);
+    const dataCtx = useContext(LineChartDataContext);
+    const { activeKey } = useContext(LineChartActiveContext);
+    const plotArea = usePlotArea();
+    const testId = useTestId("part");
+    if (!dataCtx) return null;
+    const steps = dataCtx.data.length;
+    let t0;
+    if ($[0] !== plotArea || $[1] !== steps) {
+        t0 = plotArea && steps > 0 ? resolveColumnWidth(plotArea.width / steps) : void 0;
+        $[0] = plotArea;
+        $[1] = steps;
+        $[2] = t0;
+    } else t0 = $[2];
+    const barSize = t0;
+    let T0;
+    let t1;
+    let t2;
+    if ($[3] !== activeKey || $[4] !== barSize || $[5] !== dataCtx.series || $[6] !== testId) {
+        const stacked = [
+            ...dataCtx.series
+        ].reverse();
+        T0 = BarStack;
+        t1 = COLUMN_RADIUS;
+        let t3;
+        if ($[10] !== activeKey || $[11] !== barSize || $[12] !== testId) {
+            t3 = (s)=>{
+                const active = activeKey === s.key;
+                const dimmed = null !== activeKey && !active;
+                return /*#__PURE__*/ jsx(Bar, {
+                    dataKey: s.key,
+                    name: s.label,
+                    barSize: barSize,
+                    fill: resolveChartColor(s.color) ?? CHART_PALETTE_FILL.slate,
+                    activeBar: false,
+                    isAnimationActive: false,
+                    shape: (props)=>/*#__PURE__*/ jsx(ColumnChartPart, {
+                            ...props,
+                            seriesKey: s.key,
+                            active: active,
+                            dimmed: dimmed,
+                            testId: testId
+                        })
+                }, s.key);
+            };
+            $[10] = activeKey;
+            $[11] = barSize;
+            $[12] = testId;
+            $[13] = t3;
+        } else t3 = $[13];
+        t2 = stacked.map(t3);
+        $[3] = activeKey;
+        $[4] = barSize;
+        $[5] = dataCtx.series;
+        $[6] = testId;
+        $[7] = T0;
+        $[8] = t1;
+        $[9] = t2;
+    } else {
+        T0 = $[7];
+        t1 = $[8];
+        t2 = $[9];
+    }
+    let t3;
+    if ($[14] !== T0 || $[15] !== t1 || $[16] !== t2) {
+        t3 = /*#__PURE__*/ jsx(T0, {
+            radius: t1,
+            children: t2
+        });
+        $[14] = T0;
+        $[15] = t1;
+        $[16] = t2;
+        $[17] = t3;
+    } else t3 = $[17];
+    return t3;
+};
+ColumnChartStack.displayName = "ColumnChartStack";
+export { ColumnChartStack };

package/dist/components/SimpleCharts/ColumnChart/ColumnChartXAxis.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+export interface ColumnChartXAxisProps {
+    /** Format the rendered tick label. Receives the raw `xKey` value of the column. */
+    tickFormatter?: (value: unknown, index: number) => string;
+    /**
+     * Recharts tick interval. Defaults to `'preserveStartEnd'`: the first and last columns keep
+     * their labels and middle ones drop out when the labels would collide. `0` labels every column.
+     */
+    interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+    /** Minimum gap (in pixels) between rendered tick labels. */
+    minTickGap?: number;
+}
+export declare const ColumnChartXAxis: FC<ColumnChartXAxisProps>;

package/dist/components/SimpleCharts/ColumnChart/ColumnChartXAxis.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { XAxis } from "recharts";
+import { LINE_X_LABEL_HEIGHT } from "../LineChart/constants.js";
+import { LineChartDataContext } from "../LineChart/LineChartContext.js";
+import { renderAxisTick } from "../LineChart/lib/renderAxisTick.js";
+const AXIS_LINE_PROPS = {
+    stroke: "var(--color-border-primary-light)"
+};
+const renderTick = renderAxisTick();
+const ColumnChartXAxis = (t0)=>{
+    const $ = c(5);
+    const { tickFormatter, interval: t1, minTickGap } = t0;
+    const interval = void 0 === t1 ? "preserveStartEnd" : t1;
+    const dataCtx = useContext(LineChartDataContext);
+    const t2 = dataCtx?.xKey;
+    const t3 = tickFormatter;
+    let t4;
+    if ($[0] !== interval || $[1] !== minTickGap || $[2] !== t2 || $[3] !== t3) {
+        t4 = /*#__PURE__*/ jsx(XAxis, {
+            dataKey: t2,
+            height: LINE_X_LABEL_HEIGHT,
+            tickLine: false,
+            axisLine: AXIS_LINE_PROPS,
+            tick: renderTick,
+            tickFormatter: t3,
+            interval: interval,
+            minTickGap: minTickGap
+        });
+        $[0] = interval;
+        $[1] = minTickGap;
+        $[2] = t2;
+        $[3] = t3;
+        $[4] = t4;
+    } else t4 = $[4];
+    return t4;
+};
+ColumnChartXAxis.displayName = "ColumnChartXAxis";
+export { ColumnChartXAxis };

package/dist/components/SimpleCharts/ColumnChart/classes.d.ts

@@ -0,0 +1,2 @@
+export { lineChartRootClasses as columnChartRootClasses } from '../LineChart/classes.js';
+export declare const columnChartBodyClasses: string;

package/dist/components/SimpleCharts/ColumnChart/classes.js

@@ -0,0 +1,7 @@
+import { lineChartBodyClasses, lineChartRootClasses } from "../LineChart/classes.js";
+const columnChartBodyClasses = [
+    lineChartBodyClasses,
+    '[&_.recharts-bar]:animate-[ds-chart-fade-in_400ms_ease-out]',
+    'motion-reduce:[&_.recharts-bar]:animate-none'
+].join(' ');
+export { columnChartBodyClasses, lineChartRootClasses as columnChartRootClasses };

package/dist/components/SimpleCharts/ColumnChart/constants.d.ts

@@ -0,0 +1,8 @@
+export { LINE_CARD_HEIGHT as COLUMN_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as COLUMN_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as COLUMN_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as COLUMN_INACTIVE_OPACITY, } from '../LineChart/constants.js';
+export declare const COLUMN_MAX_WIDTH = 32;
+export declare const COLUMN_MIN_WIDTH = 16;
+export declare const COLUMN_GAP = 22;
+/** 1px gap between the parts of a column. */
+export declare const COLUMN_PART_GAP = 1;
+/** Top corners of the whole column (the topmost part), via recharts' `BarStack` clip-path. */
+export declare const COLUMN_RADIUS: [number, number, number, number];

package/dist/components/SimpleCharts/ColumnChart/constants.js

@@ -0,0 +1,12 @@
+const COLUMN_MAX_WIDTH = 32;
+const COLUMN_MIN_WIDTH = 16;
+const COLUMN_GAP = 22;
+const COLUMN_PART_GAP = 1;
+const COLUMN_RADIUS = [
+    4,
+    4,
+    0,
+    0
+];
+export { LINE_CARD_HEIGHT as COLUMN_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as COLUMN_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as COLUMN_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as COLUMN_INACTIVE_OPACITY } from "../LineChart/constants.js";
+export { COLUMN_GAP, COLUMN_MAX_WIDTH, COLUMN_MIN_WIDTH, COLUMN_PART_GAP, COLUMN_RADIUS };

package/dist/components/SimpleCharts/ColumnChart/index.d.ts

@@ -0,0 +1,4 @@
+export { ColumnChart, type ColumnChartProps } from './ColumnChart.js';
+export { ColumnChartBody, type ColumnChartBodyProps } from './ColumnChartBody.js';
+export { ColumnChartStack } from './ColumnChartStack.js';
+export { ColumnChartXAxis, type ColumnChartXAxisProps } from './ColumnChartXAxis.js';

package/dist/components/SimpleCharts/ColumnChart/index.js

@@ -0,0 +1,4 @@
+export { ColumnChart } from "./ColumnChart.js";
+export { ColumnChartBody } from "./ColumnChartBody.js";
+export { ColumnChartStack } from "./ColumnChartStack.js";
+export { ColumnChartXAxis } from "./ColumnChartXAxis.js";

package/dist/components/SimpleCharts/ColumnChart/lib/resolveColumnWidth.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Column width for a step of `band` px: the band minus the 22px gap, clamped to 16–32px and
+ * rounded to whole pixels so column edges stay crisp. Kept strictly under the band: recharts
+ * ignores a `barSize` that fills the band and draws 90% of it instead. Under 16px per step the
+ * columns shrink to leave 1px or less between them — Figma leaves that case open (see
+ * `docs/ColumnChart.md` → Open questions).
+ */
+export declare const resolveColumnWidth: (band: number) => number;

package/dist/components/SimpleCharts/ColumnChart/lib/resolveColumnWidth.js

@@ -0,0 +1,7 @@
+import { COLUMN_GAP, COLUMN_MAX_WIDTH, COLUMN_MIN_WIDTH } from "../constants.js";
+const resolveColumnWidth = (band)=>{
+    if (!(band > 1)) return 0;
+    const width = Math.min(COLUMN_MAX_WIDTH, Math.max(COLUMN_MIN_WIDTH, band - COLUMN_GAP));
+    return Math.min(Math.ceil(band - 1e-6) - 1, Math.round(width));
+};
+export { resolveColumnWidth };

package/dist/components/SimpleCharts/LineChart/lib/dropEdgeGridLines.js

@@ -17,13 +17,15 @@ const dropEdgeGridLines = ({ keepTop = false, keepBottom = false } = {})=>{
     let cachedYs = null;
     let cachedAxis = null;
     return (props)=>{
-        const { offset, x1, x2, y1, y2, key, index: _index, yAxis, ...rest } = props;
+        const { offset, x1, x2, y1, y2, key, yAxis, stroke, strokeDasharray } = props;
         const line = asSvgElement(createElement('line', {
-            ...rest,
             x1,
             x2,
             y1,
-            y2
+            y2,
+            stroke,
+            strokeDasharray,
+            fill: 'none'
         }));
         if ('number' != typeof y1 || !yAxis) return line;
         if (cachedAxis !== yAxis) {

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

@@ -1,6 +1,7 @@
 export { AreaChart, AreaChartArea, type AreaChartAreaProps, AreaChartBody, type AreaChartBodyProps, type AreaChartProps, type AreaChartVariant, } from './AreaChart/index.js';
 export { BarList, BarListBar, type BarListBarProps, BarListItem, type BarListItemProps, BarListLabel, type BarListLabelProps, BarListPercent, type BarListPercentProps, type BarListProps, BarListSkeleton, type BarListSkeletonProps, BarListValue, type BarListValueProps, } from './BarList/index.js';
 export { Chart, ChartActions, type ChartActionsProps, ChartEmpty, type ChartEmptyProps, ChartHeader, type ChartHeaderProps, type ChartProps, ChartTitle, type ChartTitleProps, } from './Chart/index.js';
+export { ColumnChart, ColumnChartBody, type ColumnChartBodyProps, type ColumnChartProps, ColumnChartStack, ColumnChartXAxis, type ColumnChartXAxisProps, } from './ColumnChart/index.js';
 export { HorizontalBarStack, type HorizontalBarStackDatum, type HorizontalBarStackProps, HorizontalBarStackSkeleton, type HorizontalBarStackSkeletonProps, } from './HorizontalBarStack/index.js';
 export { type ChartTimeFormatters, useChartTimeFormatters } from './hooks/index.js';
 export { LineChart, LineChartBody, type LineChartBodyProps, type LineChartDatum, LineChartEmpty, type LineChartEmptyProps, LineChartGrid, type LineChartGridProps, LineChartHoverPopover, LineChartHoverPopoverDot, type LineChartHoverPopoverDotProps, type LineChartHoverPopoverProps, LineChartHoverPopoverRow, type LineChartHoverPopoverRowProps, LineChartHoverPopoverTimestamp, type LineChartHoverPopoverTimestampProps, LineChartLegend, LineChartLegendItem, type LineChartLegendItemProps, type LineChartLegendOrientation, type LineChartLegendProps, LineChartLine, type LineChartLineProps, type LineChartProps, type LineChartSeries, LineChartTooltip, type LineChartTooltipProps, type LineChartTooltipRenderArgs, LineChartXAxis, type LineChartXAxisProps, LineChartYAxis, type LineChartYAxisProps, LineChartZoomBrush, type LineChartZoomBrushProps, LineChartZoomPopover, LineChartZoomPopoverConfirm, type LineChartZoomPopoverConfirmProps, type LineChartZoomPopoverProps, LineChartZoomPopoverRange, type LineChartZoomPopoverRangeProps, type LineChartZoomRange, } from './LineChart/index.js';

package/dist/components/SimpleCharts/index.js

@@ -1,6 +1,7 @@
 export { AreaChart, AreaChartArea, AreaChartBody } from "./AreaChart/index.js";
 export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue } from "./BarList/index.js";
 export { Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle } from "./Chart/index.js";
+export { ColumnChart, ColumnChartBody, ColumnChartStack, ColumnChartXAxis } from "./ColumnChart/index.js";
 export { HorizontalBarStack, HorizontalBarStackSkeleton } from "./HorizontalBarStack/index.js";
 export { useChartTimeFormatters } from "./hooks/index.js";
 export { LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange } from "./LineChart/index.js";

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "4.0.0",
-  "generatedAt": "2026-10-22T13:25:11.859Z",
+  "version": "4.1.0",
+  "generatedAt": "2026-10-22T14:48:29.689Z",
   "components": [
     {
       "name": "Accordion",
@@ -98252,6 +98252,610 @@
             }
           ]
         },
+        {
+          "name": "ColumnChartBody",
+          "props": [
+            {
+              "name": "height",
+              "type": "number | undefined",
+              "required": false,
+              "description": "Plot height passed to recharts' `<ResponsiveContainer>`. Defaults to the Figma 164px.",
+              "defaultValue": "DEFAULT_BODY_HEIGHT"
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            }
+          ]
+        },
+        {
+          "name": "ColumnChart",
+          "props": [
+            {
+              "name": "data",
+              "type": "T[]",
+              "required": true,
+              "description": "One entry per column (step), sorted ascending by `xKey`."
+            },
+            {
+              "name": "series",
+              "type": "LineChartSeries<Extract<keyof T, string>>[]",
+              "required": true,
+              "description": "The categories each column is split into, in legend order — the first one stacks on top.\nThe same schema drives the legend, the parts and the hover popover rows."
+            },
+            {
+              "name": "xKey",
+              "type": "Extract<keyof T, string>",
+              "required": true,
+              "description": "Key on each datum used as the X-axis value (the step: a day, an hour, …)."
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            },
+            {
+              "name": "data-testid",
+              "type": "string | undefined",
+              "required": false
+            }
+          ]
+        },
+        {
+          "name": "ColumnChartXAxis",
+          "props": [
+            {
+              "name": "tickFormatter",
+              "type": "((value: unknown, index: number) => string) | undefined",
+              "required": false,
+              "description": "Format the rendered tick label. Receives the raw `xKey` value of the column."
+            },
+            {
+              "name": "interval",
+              "type": "number | \"preserveStart\" | \"preserveEnd\" | \"preserveStartEnd\" | undefined",
+              "required": false,
+              "description": "Recharts tick interval. Defaults to `'preserveStartEnd'`: the first and last columns keep\ntheir labels and middle ones drop out when the labels would collide. `0` labels every column.",
+              "defaultValue": "preserveStartEnd"
+            },
+            {
+              "name": "minTickGap",
+              "type": "number | undefined",
+              "required": false,
+              "description": "Minimum gap (in pixels) between rendered tick labels."
+            }
+          ]
+        },
         {
           "name": "HorizontalBarStack",
           "props": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",