@techsio/ui-kit 0.38.0 → 0.39.0

package/dist/molecules/chart.js

@@ -0,0 +1,393 @@
+import { jsx } from "react/jsx-runtime";
+import { areaY, barX, barY, colorLegend, d3Curve, defineChart, dot, group, lineY, stack } from "@tanstack/charts";
+import { polar, radialArc } from "@tanstack/charts/polar";
+import { tooltip as tooltip_tooltip } from "@tanstack/charts/tooltip";
+import { scaleBand } from "@tanstack/charts-scales/band";
+import { scaleLinear } from "@tanstack/charts-scales/linear";
+import { scalePoint } from "@tanstack/charts-scales/point";
+import { Chart } from "@tanstack/react-charts";
+import { scaleUtc } from "d3-scale";
+import { curveMonotoneX, pie } from "d3-shape";
+import { useMemo } from "react";
+import { tv } from "../utils.js";
+const chartVariants = tv({
+    slots: {
+        root: "chart-base block w-full text-chart-fg",
+        tooltip: "chart-tooltip"
+    }
+});
+const SERIES_1_PAINT = "var(--color-chart-series-1)";
+const SERIES_STROKE_FROM_COLOR = null;
+const DONUT_INNER_RADIUS_RATIO = 0.6;
+const POLAR_INSET = 8;
+function toAccessor(accessor) {
+    if ("function" == typeof accessor) return accessor;
+    return (datum)=>datum[accessor];
+}
+const defineChartSpec = defineChart;
+const MAX_SERIES = 6;
+function resolveXAxis(data, getX, xLabel) {
+    const values = data.map(getX);
+    if (values.length > 0 && values.every((value)=>value instanceof Date)) return {
+        scale: ()=>scaleUtc(),
+        nice: true,
+        axis: {
+            label: xLabel
+        }
+    };
+    if (values.length > 0 && values.every((value)=>"number" == typeof value)) return {
+        scale: scaleLinear,
+        nice: true,
+        axis: {
+            label: xLabel
+        }
+    };
+    return {
+        scale: ()=>scalePoint().padding(0.1),
+        axis: {
+            label: xLabel
+        }
+    };
+}
+function resolveBuild(config) {
+    const getX = toAccessor(config.x);
+    const getY = toAccessor(config.y);
+    const getSeries = null == config.series ? void 0 : toAccessor(config.series);
+    const isPolar = "pie" === config.type || "donut" === config.type;
+    const showLegend = config.legend ?? (null != config.series || isPolar);
+    const { formatValue } = config;
+    const valueTicks = formatValue ? {
+        format: formatValue
+    } : void 0;
+    warnOnSeriesOverflow(config.data, isPolar ? getX : getSeries);
+    const tooltipBase = {
+        use: tooltip_tooltip,
+        className: config.tooltipClassName
+    };
+    const channelName = (accessor, label)=>label ?? ("string" == typeof accessor ? accessor : void 0);
+    const xName = channelName(config.x, config.xLabel);
+    const yName = channelName(config.y, config.yLabel);
+    const formatChannel = (point, channel)=>{
+        const value = "x" === channel ? point.xValue : point.yValue;
+        if ("number" == typeof value && formatValue) return formatValue(value);
+        return String(value ?? "");
+    };
+    const tooltipFor = (valueChannel, swapped = false)=>{
+        if (!config.showTooltip) return false;
+        const dataValueChannel = swapped ? "y" : valueChannel;
+        const valueName = "x" === dataValueChannel ? xName : yName;
+        const categoryName = "x" === dataValueChannel ? yName : xName;
+        const valueItem = {
+            channel: valueChannel,
+            label: valueName,
+            text: formatValue ? (point)=>formatChannel(point, valueChannel) : void 0
+        };
+        const categoryChannel = "x" === valueChannel ? "y" : "x";
+        const categoryItem = {
+            channel: categoryChannel,
+            label: categoryName
+        };
+        return {
+            ...tooltipBase,
+            items: "x" === valueChannel ? [
+                valueItem,
+                categoryItem
+            ] : [
+                categoryItem,
+                valueItem
+            ]
+        };
+    };
+    const polarTooltip = ()=>{
+        if (!config.showTooltip) return false;
+        return {
+            ...tooltipBase,
+            items: [
+                {
+                    id: "value",
+                    label: yName,
+                    text: (point)=>{
+                        const row = point.datum.data;
+                        const value = getY(row);
+                        return formatValue ? formatValue(value) : String(value);
+                    }
+                }
+            ]
+        };
+    };
+    const valueAxis = {
+        scale: scaleLinear,
+        nice: true,
+        grid: config.grid,
+        axis: {
+            label: config.yLabel,
+            ticks: valueTicks
+        }
+    };
+    const xAxis = resolveXAxis(config.data, getX, config.xLabel);
+    return {
+        data: config.data,
+        getX,
+        getY,
+        getSeries,
+        stacked: config.stacked,
+        points: config.points,
+        curve: config.smooth ? d3Curve(curveMonotoneX) : void 0,
+        grid: config.grid,
+        xLabel: config.xLabel,
+        yLabel: config.yLabel,
+        valueTicks,
+        valueAxis,
+        xAxis,
+        bandAxis: {
+            scale: ()=>scaleBand().padding(0.3),
+            axis: {
+                label: config.xLabel
+            }
+        },
+        tooltipFor,
+        polarTooltip,
+        shared: {
+            color: showLegend ? {
+                legend: colorLegend({
+                    label: config.legendLabel
+                })
+            } : void 0,
+            animate: config.animate
+        }
+    };
+}
+function warnOnSeriesOverflow(data, getColorIdentity) {
+    const isProduction = "undefined" != typeof process && process.env?.NODE_ENV === "production";
+    if (null == getColorIdentity || isProduction) return;
+    const distinct = new Set(data.map((datum)=>String(getColorIdentity(datum))));
+    if (distinct.size > MAX_SERIES) console.warn(`Chart: ${distinct.size} distinct colors exceeds the ${MAX_SERIES}-color palette; everything beyond the sixth reuses an earlier color and cannot be told apart. Group the long tail into an “Other” bucket, or split into small multiples.`);
+}
+function buildLine(build) {
+    const { data, getX, getY, getSeries } = build;
+    return defineChartSpec({
+        marks: [
+            lineY(data, {
+                x: getX,
+                y: getY,
+                z: getSeries,
+                color: getSeries,
+                points: build.points,
+                curve: build.curve,
+                stroke: null == getSeries ? SERIES_1_PAINT : void 0
+            })
+        ],
+        x: build.xAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildArea(build) {
+    const { data, getX, getY, getSeries } = build;
+    const isStacked = build.stacked ?? true;
+    return defineChartSpec({
+        marks: [
+            areaY(data, {
+                x: getX,
+                ...null != getSeries && isStacked ? {
+                    y: getY
+                } : {
+                    y1: 0,
+                    y2: getY
+                },
+                z: getSeries,
+                color: getSeries,
+                curve: build.curve,
+                fill: null == getSeries ? SERIES_1_PAINT : void 0,
+                fillOpacity: null != getSeries && isStacked ? 0.85 : 0.25,
+                stroke: null == getSeries ? SERIES_1_PAINT : SERIES_STROKE_FROM_COLOR,
+                strokeWidth: 2
+            })
+        ],
+        x: build.xAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function barLayout(hasSeries, isStacked) {
+    if (!hasSeries) return;
+    return isStacked ? stack() : group({
+        padding: 0.15
+    });
+}
+function buildBars(build, horizontal) {
+    const { data, getX, getY, getSeries } = build;
+    const isStacked = build.stacked ?? false;
+    const barOptions = {
+        z: getSeries,
+        color: getSeries,
+        fill: null == getSeries ? SERIES_1_PAINT : void 0,
+        layout: barLayout(null != getSeries, isStacked),
+        radius: null != getSeries && isStacked ? 0 : 4
+    };
+    if (horizontal) return defineChartSpec({
+        marks: [
+            barX(data, {
+                x: getY,
+                y: getX,
+                ...barOptions
+            })
+        ],
+        x: {
+            scale: scaleLinear,
+            nice: true,
+            grid: build.grid,
+            axis: {
+                label: build.yLabel,
+                ticks: build.valueTicks
+            }
+        },
+        y: build.bandAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("x", true)
+    });
+    return defineChartSpec({
+        marks: [
+            barY(data, {
+                x: getX,
+                y: getY,
+                ...barOptions
+            })
+        ],
+        x: build.bandAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildScatter(build) {
+    const { data, getX, getY, getSeries } = build;
+    return defineChartSpec({
+        marks: [
+            dot(data, {
+                x: getX,
+                y: getY,
+                z: getSeries,
+                color: getSeries,
+                r: 4,
+                fill: null == getSeries ? SERIES_1_PAINT : void 0
+            })
+        ],
+        x: {
+            ...build.xAxis,
+            grid: build.grid
+        },
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildPolar(build, donut) {
+    const { data, getX, getY } = build;
+    const sliceLabel = (slice)=>String(getX(slice.data));
+    const slices = pie().sort(null).padAngle(0.02).value((datum)=>getY(datum))([
+        ...data
+    ]);
+    return defineChartSpec({
+        x: null,
+        y: null,
+        marks: [
+            polar({
+                inset: POLAR_INSET,
+                marks: [
+                    radialArc(slices, {
+                        startAngle: "startAngle",
+                        endAngle: "endAngle",
+                        padAngle: "padAngle",
+                        innerRadius: donut ? ({ radius })=>radius * DONUT_INNER_RADIUS_RATIO : 0,
+                        cornerRadius: 2,
+                        z: sliceLabel,
+                        color: sliceLabel
+                    })
+                ]
+            })
+        ],
+        ...build.shared,
+        tooltip: build.polarTooltip()
+    });
+}
+function buildChartDefinition(config) {
+    const build = resolveBuild(config);
+    switch(config.type){
+        case "area":
+            return buildArea(build);
+        case "bar":
+            return buildBars(build, false);
+        case "bar-horizontal":
+            return buildBars(build, true);
+        case "scatter":
+            return buildScatter(build);
+        case "pie":
+            return buildPolar(build, false);
+        case "donut":
+            return buildPolar(build, true);
+        default:
+            return buildLine(build);
+    }
+}
+function chart_Chart({ type = "line", data, x, y, series, stacked, points = false, smooth = false, grid = true, legend, legendLabel, xLabel, yLabel, formatValue, height, aspectRatio, initialWidth = 640, animate = true, tooltip = true, ariaLabel, ariaDescription, className, onSelect }) {
+    const { root, tooltip: tooltipSlot } = chartVariants();
+    const tooltipClassName = tooltipSlot();
+    const definition = useMemo(()=>buildChartDefinition({
+            type,
+            data,
+            x,
+            y,
+            series,
+            stacked,
+            points,
+            smooth,
+            grid,
+            legend,
+            legendLabel,
+            xLabel,
+            yLabel,
+            formatValue,
+            animate,
+            showTooltip: tooltip,
+            tooltipClassName
+        }), [
+        type,
+        data,
+        x,
+        y,
+        series,
+        stacked,
+        points,
+        smooth,
+        grid,
+        legend,
+        legendLabel,
+        xLabel,
+        yLabel,
+        formatValue,
+        animate,
+        tooltip,
+        tooltipClassName
+    ]);
+    const isPolar = "pie" === type || "donut" === type;
+    const handleSelect = onSelect ? (point)=>{
+        if (null == point) return void onSelect(null);
+        onSelect(isPolar ? point.datum.data : point.datum);
+    } : void 0;
+    return /*#__PURE__*/ jsx(Chart, {
+        ariaDescription: ariaDescription,
+        ariaLabel: ariaLabel,
+        aspectRatio: null == height ? aspectRatio ?? 16 / 9 : void 0,
+        className: root({
+            className
+        }),
+        definition: definition,
+        height: height,
+        initialWidth: initialWidth,
+        onSelect: handleSelect
+    });
+}
+export { chart_Chart as Chart };

package/dist/src/molecules/chart.d.ts

@@ -0,0 +1,64 @@
+export type { ChartPoint } from "@tanstack/charts";
+/** The supported chart forms; each maps to one TanStack Charts mark family. */
+export type ChartType = "line" | "area" | "bar" | "bar-horizontal" | "scatter" | "pie" | "donut";
+/** A channel: either a field name on the datum or an accessor function. */
+export type ChartAccessor<TDatum, TValue> = (keyof TDatum & string) | ((datum: TDatum) => TValue);
+export type ChartProps<TDatum> = {
+    /** Which chart form to render. Defaults to "line". */
+    type?: ChartType;
+    /** Source rows. Each row flows through unchanged into tooltips and onSelect. */
+    data: readonly TDatum[];
+    /** Category / x-position channel. For pie and donut this is the slice label. */
+    x: ChartAccessor<TDatum, string | number | Date>;
+    /** Numeric value channel. For pie and donut this is the slice value. */
+    y: ChartAccessor<TDatum, number>;
+    /**
+     * Optional series identity. Splits the data into one colored series per
+     * distinct value, assigned the `--color-chart-series-*` tokens in fixed
+     * order. Without it the chart renders a single series in series-1.
+     */
+    series?: ChartAccessor<TDatum, string | number>;
+    /**
+     * Multi-series layout: stacked (true) or side-by-side/overlapping (false).
+     * Defaults to true for "area" and false for "bar"/"bar-horizontal".
+     */
+    stacked?: boolean;
+    /** Draw a dot on every data point of a line chart. */
+    points?: boolean;
+    /** Smooth line/area paths with a monotone curve instead of straight segments. */
+    smooth?: boolean;
+    /** Grid lines on the value axis. Defaults to true. */
+    grid?: boolean;
+    /**
+     * Show the categorical color legend. Defaults to true when `series` is set
+     * or the chart is a pie/donut, false otherwise.
+     */
+    legend?: boolean;
+    /** Optional title above the legend swatches. */
+    legendLabel?: string;
+    /** Axis label for the category/x channel. */
+    xLabel?: string;
+    /** Axis label for the value channel. */
+    yLabel?: string;
+    /** Formats value-axis tick labels (e.g. currency). */
+    formatValue?: (value: number) => string;
+    /** Fixed pixel height. When omitted, `aspectRatio` controls sizing. */
+    height?: number;
+    /** Width/height ratio used when `height` is omitted. Defaults to 16/9. */
+    aspectRatio?: number;
+    /** Deterministic first-frame width for SSR and hidden containers. */
+    initialWidth?: number;
+    /** Animate mark transitions. Defaults to true. */
+    animate?: boolean;
+    /** Show the built-in tooltip on hover/focus. Defaults to true. */
+    tooltip?: boolean;
+    /** Accessible chart name. Required. */
+    ariaLabel: string;
+    /** Longer accessible description. */
+    ariaDescription?: string;
+    className?: string;
+    /** Fires with the source row of the selected point, or null on deselect. */
+    onSelect?: (datum: TDatum | null) => void;
+};
+export declare function Chart<TDatum>({ type, data, x, y, series, stacked, points, smooth, grid, legend, legendLabel, xLabel, yLabel, formatValue, height, aspectRatio, initialWidth, animate, tooltip, ariaLabel, ariaDescription, className, onSelect, }: ChartProps<TDatum>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart.d.ts.map

package/dist/src/molecules/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/molecules/chart.tsx"],"names":[],"mappings":"AAyDA,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,+EAA+E;AAC/E,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,MAAM,GACN,KAAK,GACL,gBAAgB,GAChB,SAAS,GACT,KAAK,GACL,OAAO,CAAA;AAEX,2EAA2E;AAC3E,MAAM,MAAM,aAAa,CAAC,MAAM,EAAE,MAAM,IACpC,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GACvB,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;AAE/B,MAAM,MAAM,UAAU,CAAC,MAAM,IAAI;IAC/B,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gFAAgF;IAChF,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,gFAAgF;IAChF,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,CAAA;IAChD,wEAAwE;IACxE,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;IAC/C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC1C,CAAA;AA2gBD,wBAAgB,KAAK,CAAC,MAAM,EAAE,EAC5B,IAAa,EACb,IAAI,EACJ,CAAC,EACD,CAAC,EACD,MAAM,EACN,OAAO,EACP,MAAc,EACd,MAAc,EACd,IAAW,EACX,MAAM,EACN,WAAW,EACX,MAAM,EACN,MAAM,EACN,WAAW,EACX,MAAM,EACN,WAAW,EACX,YAAkB,EAClB,OAAc,EACd,OAAc,EACd,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,UAAU,CAAC,MAAM,CAAC,2CA2EpB"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiKtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAoKtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/stories/molecules/chart.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Chart } from "../../src/molecules/chart";
+type RevenuePoint = {
+    month: string;
+    revenue: number;
+    channel: "Online" | "Retail" | "Wholesale";
+};
+declare const meta: Meta<typeof Chart<RevenuePoint>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+/** Every value of the `type` prop, driven by the channel that fits it. */
+export declare const Types: Story;
+/** One series: painted with `--color-chart-series-1`, no legend box. */
+export declare const SingleSeries: Story;
+/** `stacked` flips bars between side-by-side groups and stacked segments. */
+export declare const Stacking: Story;
+/** Selecting a mark reports the original source row through `onSelect`. */
+export declare const Interactive: Story;
+/** Date x values ride a UTC time scale, so uneven gaps keep their spacing. */
+export declare const TimeSeries: Story;
+/** Chart chrome switched off for embedding in dense dashboard tiles. */
+export declare const Minimal: Story;
+//# sourceMappingURL=chart.stories.d.ts.map

package/dist/stories/molecules/chart.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/chart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,KAAK,EAAkB,MAAM,2BAA2B,CAAA;AAIjE,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,QAAQ,GAAG,QAAQ,GAAG,WAAW,CAAA;CAC3C,CAAA;AAiED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAAC,YAAY,CAAC,CAqEC,CAAA;AAE5C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAIlC,eAAO,MAAM,UAAU,EAAE,KASxB,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,EAAE,KAsFnB,CAAA;AAED,wEAAwE;AACxE,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,QAAQ,EAAE,KA4CtB,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAA;AAaD,8EAA8E;AAC9E,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAED,wEAAwE;AACxE,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -86,6 +86,9 @@
     "@iconify-json/mdi-light": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@iconify/tailwind4": "^1.1.0",
+    "@tanstack/charts": "^0.6.5",
+    "@tanstack/charts-scales": "^0.6.5",
+    "@tanstack/react-charts": "^0.6.5",
     "@tanstack/react-table": "^9.1.2",
     "@tanstack/react-virtual": "^3.14.8",
     "@zag-js/accordion": "^1.41.2",
@@ -110,6 +113,8 @@
     "@zag-js/tooltip": "^1.41.2",
     "@zag-js/tree-view": "^1.41.2",
     "better-themes": "^1.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "libphonenumber-js": "^1.13.2",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.1.1",
@@ -135,6 +140,8 @@
     "@tailwindcss/postcss": "^4.1.17",
     "@techsio/storybook-a11y-reporter": "0.1.3",
     "@techsio/storybook-better-a11y": "0.1.3",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
     "@typescript-eslint/parser": "^8.47.0",
     "eslint": "^9.39.1",
     "eslint-plugin-tailwindcss": "beta",

package/src/tokens/components/components.css

@@ -19,6 +19,7 @@
 @import "./molecules/_accordion.css";
 @import "./molecules/_breadcrumb.css";
 @import "./molecules/_carousel.css";
+@import "./molecules/_chart.css";
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
 @import "./molecules/_dialog.css";

package/src/tokens/components/molecules/_chart.css

@@ -0,0 +1,98 @@
+/*
+ * Chart — PROTOTYPE tokens (not yet exported from Figma; once the MVP look is
+ * signed off, mirror these into Figma via the figma-token-binding skill).
+ *
+ * Series palette: six fixed-order categorical hues for data identity. The
+ * exact primitive steps were chosen so the SAME values pass the dataviz
+ * six-checks validator (lightness band, chroma floor, adjacent-pair CVD
+ * separation, normal-vision floor, >=3:1 surface contrast) on BOTH the light
+ * (white) and dark (gray-950) chart surfaces — hence no light-dark() split.
+ *
+ * `--color-primary` (blue-300/sky-300) is deliberately NOT series-1: it sits
+ * outside the chart lightness band in light mode. Brand themes that want
+ * branded charts should override `--color-chart-series-*` with steps that
+ * re-pass the validator, not alias the brand accent directly.
+ */
+
+@theme static {
+  /* Reference layer — series identity, assigned in fixed order. The palette is
+   * six entries and TanStack indexes it modulo its length (scales.js), so a 7th
+   * distinct series wraps back onto series-1 rather than erroring. Keep charts
+   * to <=6 series; Chart warns in dev when a dataset exceeds that.
+   *
+   * Note: `--color-blue-500` is re-declared by figma/variables.css, which is
+   * imported after this file — series-1 therefore resolves to the Figma step
+   * (chroma 0.188), not Tailwind's default (chroma 0.214). Series 2-6 have no
+   * Figma counterpart and resolve to Tailwind defaults. Re-run the dataviz
+   * validator against these *resolved* values before treating the set as
+   * signed off. */
+  --color-chart-series-1: var(--color-blue-500);
+  --color-chart-series-2: var(--color-orange-600);
+  --color-chart-series-3: var(--color-emerald-600);
+  --color-chart-series-4: var(--color-violet-500);
+  --color-chart-series-5: var(--color-rose-500);
+  --color-chart-series-6: var(--color-cyan-600);
+
+  /* Derived layer — chart chrome and tooltip surface. Axis/tick/legend text
+   * renders at small sizes inside the SVG, so it wears primary ink rather than
+   * the secondary tone.
+   *
+   * Caveat on the contrast math: TanStack composites this color before it
+   * paints — tick/legend labels at fillOpacity 0.68, axis lines at
+   * strokeOpacity 0.28 (scene.js). So the *rendered* label is fg-primary at 68%
+   * over the surface, not fg-primary itself, and it does not reach the repo's
+   * 90 Lc gold gate on its own. Fixing that properly means compensating for the
+   * library opacity (or overriding it), not swapping this token — tracked in
+   * https://github.com/TechsioCZ/new-engine/issues/608 rather than silently
+   * claimed as passing. */
+  --color-chart-fg: var(--color-fg-primary);
+  --color-chart-tooltip-bg: var(--color-tooltip-bg);
+  --color-chart-tooltip-fg: var(--color-tooltip-fg);
+  --color-chart-tooltip-border: var(--color-tooltip-border-outline);
+  --radius-chart-tooltip: var(--radius-tooltip);
+  --text-chart-tooltip: var(--text-tooltip-md);
+  --padding-chart-tooltip: var(--padding-tooltip-md);
+  --border-width-chart-tooltip: var(--border-width-tooltip);
+  --font-chart-tooltip: var(--font-body);
+  --font-weight-chart-tooltip: var(--font-weight-medium);
+}
+
+/*
+ * Bridge our series tokens into TanStack Charts' categorical palette
+ * variables (`--ts-chart-1..6`). Axis text, muted labels and grid lines
+ * inherit `currentColor`, so the host also carries `text-chart-fg`.
+ */
+@utility chart-base {
+  --ts-chart-1: var(--color-chart-series-1);
+  --ts-chart-2: var(--color-chart-series-2);
+  --ts-chart-3: var(--color-chart-series-3);
+  --ts-chart-4: var(--color-chart-series-4);
+  --ts-chart-5: var(--color-chart-series-5);
+  --ts-chart-6: var(--color-chart-series-6);
+}
+
+/*
+ * Surface styling for the library's native HTML tooltip element.
+ *
+ * `!important` is load-bearing, not defensive: TanStack's `createTooltip()`
+ * writes background/color/border/border-radius/padding and a `font` shorthand
+ * directly onto `element.style`, then only *appends* this class. Inline styles
+ * beat class rules, so without `!important` every declaration below is dead and
+ * the tooltip renders in the system `Canvas`/`CanvasText` colors — visible as an
+ * unthemed tooltip under the neo/cyber brands and in dark mode. The `font`
+ * shorthand also resets font-size, so that too must win.
+ */
+@utility chart-tooltip {
+  background: var(--color-chart-tooltip-bg) !important;
+  color: var(--color-chart-tooltip-fg) !important;
+  border: var(--border-width-chart-tooltip) solid
+    var(--color-chart-tooltip-border) !important;
+  border-radius: var(--radius-chart-tooltip) !important;
+  padding: var(--padding-chart-tooltip) !important;
+  /* The inline `font` shorthand sets family, weight, size and line-height in
+   * one go, so countering only the size would leave the chart tooltip in
+   * system-ui while every other tooltip in the library uses --font-body. */
+  font-family: var(--font-chart-tooltip) !important;
+  font-size: var(--text-chart-tooltip) !important;
+  font-weight: var(--font-weight-chart-tooltip) !important;
+}