@kennycorrea/ui 0.11.4 → 1.6.1

package/dist/organisms/Chart/CategoryCharts.d.ts

@@ -0,0 +1,34 @@
+import { type ChartSeries } from './shared.js';
+export interface CategoryChartProps {
+    /** The x-axis labels, one per value. */
+    categories: string[];
+    series: ChartSeries[];
+    /**
+     * What the chart shows, in a sentence: its accessible name ("Revenue by month, January to
+     * June, peaking in April"). The chart itself is one image to a screen reader; ChartFrame's
+     * table view carries the numbers.
+     */
+    label: string;
+    /** Plot height in pixels. Default 240. The width follows the container. */
+    height?: number;
+    /** Formats axis ticks and values. Default: `Intl.NumberFormat` in the provider locale. */
+    formatValue?: (value: number) => string;
+    /** Shows the legend under the chart. Default: when there is more than one series. */
+    legend?: boolean;
+    className?: string;
+}
+export interface BarChartProps extends CategoryChartProps {
+    /** Series stack on top of each other instead of standing side by side. */
+    stacked?: boolean;
+}
+/**
+ * Vertical bars per category, grouped or stacked, in plain SVG. Every series after the first
+ * also carries a pattern, and the legend repeats it, so series can be told apart without colour.
+ */
+export declare function BarChart({ categories, series, label, height, formatValue, legend, stacked, className, }: BarChartProps): import("react").JSX.Element;
+/**
+ * Lines per series over the categories, in plain SVG. Each series has its own point marker
+ * (circle, square, triangle…), repeated in the legend, so lines can be told apart without
+ * colour. `null` values break the line.
+ */
+export declare function LineChart({ categories, series, label, height, formatValue, legend, className, }: CategoryChartProps): import("react").JSX.Element;

package/dist/organisms/Chart/CategoryCharts.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { useElementWidth } from '../../hooks/useElementWidth.js';
+import { useUiLocale } from '../../strings.js';
+import { ChartLegend, chartColor, niceTicks, SeriesMarker, SeriesPattern, } from './shared.js';
+const M = { top: 8, right: 8, bottom: 28, left: 48 };
+const FALLBACK_WIDTH = 600;
+function useFrame(categories, series, height, stackedTotals) {
+    const ref = useRef(null);
+    const width = useElementWidth(ref) || FALLBACK_WIDTH;
+    const values = stackedTotals ?? series.flatMap((s) => s.values.filter((v) => v !== null));
+    const ticks = niceTicks(Math.min(0, ...values), Math.max(0, ...values), Math.max(3, Math.round(height / 60)));
+    const lo = ticks[0];
+    const hi = ticks[ticks.length - 1];
+    const plotW = Math.max(1, width - M.left - M.right);
+    const plotH = Math.max(1, height - M.top - M.bottom);
+    const y = (v) => M.top + plotH - ((v - lo) / (hi - lo || 1)) * plotH;
+    const band = plotW / Math.max(1, categories.length);
+    // Thin out x labels so they never overlap: roughly 7px per character plus a gap.
+    const longest = Math.max(1, ...categories.map((c) => c.length));
+    const every = Math.max(1, Math.ceil((longest * 7 + 8) / band));
+    return { ref, width, height, ticks, y, band, plotW, plotH, every };
+}
+function Axes({ frame, categories, format, }) {
+    return (_jsxs("g", { children: [frame.ticks.map((t) => (_jsxs("g", { children: [_jsx("line", { x1: M.left, x2: M.left + frame.plotW, y1: frame.y(t), y2: frame.y(t), className: t === 0 ? 'ui-chart__axis' : 'ui-chart__grid' }), _jsx("text", { x: M.left - 6, y: frame.y(t), dy: "0.32em", textAnchor: "end", className: "ui-chart__tick", children: format(t) })] }, t))), categories.map((c, i) => i % frame.every === 0 ? (_jsx("text", { x: M.left + frame.band * (i + 0.5), y: frame.height - 8, textAnchor: "middle", className: "ui-chart__tick", children: c }, c)) : null)] }));
+}
+function useFormat(formatValue) {
+    const locale = useUiLocale();
+    if (formatValue)
+        return formatValue;
+    const nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+    return (n) => nf.format(n);
+}
+/**
+ * Vertical bars per category, grouped or stacked, in plain SVG. Every series after the first
+ * also carries a pattern, and the legend repeats it, so series can be told apart without colour.
+ */
+export function BarChart({ categories, series, label, height = 240, formatValue, legend, stacked = false, className, }) {
+    const id = useId().replace(/[^a-zA-Z0-9-]/g, '');
+    const format = useFormat(formatValue);
+    const totals = stacked
+        ? categories.map((_, i) => series.reduce((sum, s) => sum + Math.max(0, s.values[i] ?? 0), 0))
+        : undefined;
+    const frame = useFrame(categories, series, height, totals);
+    const groupW = frame.band * 0.72;
+    const barW = stacked ? groupW : groupW / Math.max(1, series.length);
+    const zero = frame.y(Math.max(0, frame.ticks[0]));
+    return (_jsxs("div", { ref: frame.ref, className: ['ui-chart', className].filter(Boolean).join(' '), children: [_jsxs("svg", { role: "img", "aria-label": label, width: "100%", height: height, viewBox: `0 0 ${frame.width} ${height}`, children: [_jsx("defs", { children: series.map((s, si) => (_jsx(SeriesPattern, { id: `${id}-p${si}`, index: si }, s.id))) }), _jsx(Axes, { frame: frame, categories: categories, format: format }), _jsx("g", { children: categories.map((c, ci) => {
+                            const x0 = M.left + frame.band * ci + (frame.band - groupW) / 2;
+                            let stackTop = zero;
+                            return (_jsx("g", { children: series.map((s, si) => {
+                                    const v = s.values[ci];
+                                    if (v === null || v === undefined)
+                                        return null;
+                                    let top;
+                                    let bottom;
+                                    if (stacked) {
+                                        const h = zero - frame.y(Math.max(0, v));
+                                        bottom = stackTop;
+                                        top = stackTop - h;
+                                        stackTop = top;
+                                    }
+                                    else {
+                                        top = Math.min(frame.y(v), zero);
+                                        bottom = Math.max(frame.y(v), zero);
+                                    }
+                                    const x = stacked ? x0 : x0 + barW * si;
+                                    return (_jsx("rect", { x: x, y: top, width: Math.max(1, barW - (stacked ? 0 : 2)), height: Math.max(0, bottom - top), rx: 2, fill: `url(#${id}-p${si})`, children: _jsx("title", { children: `${s.label}, ${c}: ${format(v)}` }) }, s.id));
+                                }) }, c));
+                        }) })] }), (legend ?? series.length > 1) ? (_jsx(ChartLegend, { kind: "fill", idPrefix: id, entries: series.map((s) => ({ id: s.id, label: s.label })) })) : null] }));
+}
+/**
+ * Lines per series over the categories, in plain SVG. Each series has its own point marker
+ * (circle, square, triangle…), repeated in the legend, so lines can be told apart without
+ * colour. `null` values break the line.
+ */
+export function LineChart({ categories, series, label, height = 240, formatValue, legend, className, }) {
+    const format = useFormat(formatValue);
+    const frame = useFrame(categories, series, height);
+    const x = (i) => M.left + frame.band * (i + 0.5);
+    return (_jsxs("div", { ref: frame.ref, className: ['ui-chart', className].filter(Boolean).join(' '), children: [_jsxs("svg", { role: "img", "aria-label": label, width: "100%", height: height, viewBox: `0 0 ${frame.width} ${height}`, children: [_jsx(Axes, { frame: frame, categories: categories, format: format }), _jsx("g", { children: series.map((s, si) => {
+                            const segments = [[]];
+                            s.values.forEach((v, i) => {
+                                if (v === null)
+                                    segments.push([]);
+                                else
+                                    segments[segments.length - 1].push(`${x(i)},${frame.y(v)}`);
+                            });
+                            return (_jsxs("g", { children: [segments
+                                        .filter((pts) => pts.length > 1)
+                                        .map((pts) => (_jsx("polyline", { points: pts.join(' '), fill: "none", stroke: chartColor(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }, pts[0]))), s.values.map((v, i) => v === null ? null : (_jsxs("g", { children: [_jsx("title", { children: `${s.label}, ${categories[i]}: ${format(v)}` }), _jsx(SeriesMarker, { index: si, x: x(i), y: frame.y(v) })] }, categories[i])))] }, s.id));
+                        }) })] }), (legend ?? series.length > 1) ? (_jsx(ChartLegend, { kind: "line", idPrefix: "line", entries: series.map((s) => ({ id: s.id, label: s.label })) })) : null] }));
+}

package/dist/organisms/Chart/ChartFrame.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import { type CardVariant, type Responsive } from '../../atoms/Card/Card.js';
+import type { ChartTableData } from './shared.js';
+export interface ChartFrameProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** The chart: one of this library's, or any other library's SVG or canvas. */
+    children: ReactNode;
+    /**
+     * The same numbers as a table (see `chartTable` and `donutTable`). With it, a "View as table"
+     * toggle is shown, so the data is never only in the picture.
+     */
+    table?: ChartTableData;
+    /** Beside the toggle: a period select, an export button. */
+    actions?: ReactNode;
+    /** The title's level. Default `h2`; `h3` inside a section that already has an `h2`. */
+    headingLevel?: 2 | 3;
+    variant?: Responsive<CardVariant>;
+    className?: string;
+}
+/**
+ * The card a chart sits in: a heading, an optional description, the chart, and a switch to
+ * the same data as a table. The frame works with any chart, including another library's, so
+ * an app can bring its own and keep the heading, the table and the layout.
+ */
+export declare function ChartFrame({ title, description, children, table, actions, headingLevel, variant, className, }: ChartFrameProps): import("react").JSX.Element;

package/dist/organisms/Chart/ChartFrame.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore-all lint/suspicious/noArrayIndexKey: table columns are positional and header text can repeat or be empty.
+import { useId, useState } from 'react';
+import { Button } from '../../atoms/Button/Button.js';
+import { Card } from '../../atoms/Card/Card.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * The card a chart sits in: a heading, an optional description, the chart, and a switch to
+ * the same data as a table. The frame works with any chart, including another library's, so
+ * an app can bring its own and keep the heading, the table and the layout.
+ */
+export function ChartFrame({ title, description, children, table, actions, headingLevel = 2, variant, className, }) {
+    const strings = useUiStrings();
+    const [asTable, setAsTable] = useState(false);
+    const titleId = useId();
+    const Heading = headingLevel === 3 ? 'h3' : 'h2';
+    return (_jsx(Card, { variant: variant, className: ['ui-chart-frame', className].filter(Boolean).join(' '), children: _jsxs("section", { "aria-labelledby": titleId, children: [_jsxs("div", { className: "ui-chart-frame__header", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Heading, { id: titleId, className: "ui-chart-frame__title", children: title }), description ? _jsx("p", { className: "ui-chart-frame__description", children: description }) : null] }), _jsxs("div", { className: "ui-chart-frame__actions", children: [actions, table ? (_jsx(Button, { variant: "ghost", size: "sm", "aria-pressed": asTable, onClick: () => setAsTable((v) => !v), children: asTable ? strings.viewAsChart : strings.viewAsTable })) : null] })] }), _jsx("div", { className: "ui-chart-frame__body", children: asTable && table ? (_jsx("div", { className: "ui-chart-frame__table", children: _jsxs("table", { className: "ui-table__table", children: [_jsx("caption", { className: "ui-sr-only", children: title }), _jsx("thead", { children: _jsx("tr", { children: table.headers.map((h, i) => (_jsx("th", { scope: "col", "data-align": i > 0 ? 'end' : undefined, children: h }, `${i}-${h}`))) }) }), _jsx("tbody", { children: table.rows.map((row) => (_jsx("tr", { children: row.map((cell, i) => i === 0 ? (_jsx("th", { scope: "row", children: cell }, "h")) : (_jsx("td", { "data-align": "end", children: cell }, `${i}-${table.headers[i]}`))) }, String(row[0])))) })] }) })) : (children) })] }) }));
+}

package/dist/organisms/Chart/DonutChart.d.ts

@@ -0,0 +1,25 @@
+import { type ChartTableData } from './shared.js';
+export interface DonutSlice {
+    id: string;
+    label: string;
+    value: number;
+}
+export interface DonutChartProps {
+    data: DonutSlice[];
+    /** The accessible name: what the parts are of ("Orders by status, mostly paid"). */
+    label: string;
+    /** Under the total in the middle, e.g. "orders". */
+    centerLabel?: string;
+    /** Diameter in pixels. Default 180. */
+    size?: number;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+/** The slices as a table: label, value and share. */
+export declare function donutTable(data: DonutSlice[], format?: (n: number) => string, headers?: [string, string, string]): ChartTableData;
+/**
+ * Parts of a whole, with the total in the middle. The legend lists every slice with its value
+ * and share, so the numbers are readable without matching colours to wedges, and each slice
+ * carries the same pattern as its legend swatch.
+ */
+export declare function DonutChart({ data, label, centerLabel, size, formatValue, className, }: DonutChartProps): import("react").JSX.Element;

package/dist/organisms/Chart/DonutChart.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useUiLocale } from '../../strings.js';
+import { ChartLegend, SeriesPattern } from './shared.js';
+function arc(cx, cy, r, r0, a0, a1) {
+    const p = (rad, a) => [cx + rad * Math.sin(a), cy - rad * Math.cos(a)];
+    const large = a1 - a0 > Math.PI ? 1 : 0;
+    const [x0, y0] = p(r, a0);
+    const [x1, y1] = p(r, a1);
+    const [x2, y2] = p(r0, a1);
+    const [x3, y3] = p(r0, a0);
+    return `M${x0},${y0} A${r},${r} 0 ${large} 1 ${x1},${y1} L${x2},${y2} A${r0},${r0} 0 ${large} 0 ${x3},${y3} Z`;
+}
+/** The slices as a table: label, value and share. */
+export function donutTable(data, format = String, headers = ['', '', '%']) {
+    const total = data.reduce((s, d) => s + Math.max(0, d.value), 0) || 1;
+    return {
+        headers,
+        rows: data.map((d) => [
+            d.label,
+            format(d.value),
+            `${Math.round((Math.max(0, d.value) / total) * 100)}%`,
+        ]),
+    };
+}
+/**
+ * Parts of a whole, with the total in the middle. The legend lists every slice with its value
+ * and share, so the numbers are readable without matching colours to wedges, and each slice
+ * carries the same pattern as its legend swatch.
+ */
+export function DonutChart({ data, label, centerLabel, size = 180, formatValue, className, }) {
+    const id = useId().replace(/[^a-zA-Z0-9-]/g, '');
+    const locale = useUiLocale();
+    const nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+    const format = formatValue ?? ((n) => nf.format(n));
+    const pct = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 });
+    const total = data.reduce((s, d) => s + Math.max(0, d.value), 0);
+    const r = size / 2;
+    const r0 = r * 0.62;
+    let angle = 0;
+    return (_jsxs("div", { className: ['ui-chart ui-chart--donut', className].filter(Boolean).join(' '), children: [_jsxs("svg", { role: "img", "aria-label": label, width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx("defs", { children: data.map((d, i) => (_jsx(SeriesPattern, { id: `${id}-p${i}`, index: i }, d.id))) }), _jsxs("g", { children: [total > 0 ? (data.map((d, i) => {
+                                const share = Math.max(0, d.value) / total;
+                                const a0 = angle;
+                                // A full circle cannot be drawn as one arc, so a single slice stops just short.
+                                const a1 = angle + Math.min(share * Math.PI * 2, Math.PI * 2 - 0.0001);
+                                angle += share * Math.PI * 2;
+                                return share > 0 ? (_jsx("path", { d: arc(r, r, r - 1, r0, a0, a1), fill: `url(#${id}-p${i})`, stroke: "var(--color-panel-solid)", strokeWidth: 1.5, children: _jsx("title", { children: `${d.label}: ${format(d.value)} (${pct.format(share)})` }) }, d.id)) : null;
+                            })) : (_jsx("circle", { cx: r, cy: r, r: (r + r0) / 2, fill: "none", stroke: "var(--gray-a4)", strokeWidth: r - r0 })), _jsx("text", { x: r, y: r, textAnchor: "middle", dy: centerLabel ? '-0.1em' : '0.35em', className: "ui-chart__total", children: format(total) }), centerLabel ? (_jsx("text", { x: r, y: r, textAnchor: "middle", dy: "1.3em", className: "ui-chart__tick", children: centerLabel })) : null] })] }), _jsx(ChartLegend, { kind: "fill", idPrefix: id, entries: data.map((d) => ({
+                    id: d.id,
+                    label: d.label,
+                    detail: `${format(d.value)} · ${pct.format(total ? Math.max(0, d.value) / total : 0)}`,
+                })) })] }));
+}

package/dist/organisms/Chart/Sparkline.d.ts

@@ -0,0 +1,15 @@
+export interface SparklineProps {
+    values: number[];
+    /** The accessible name: the trend in words ("Up 12% over 30 days"). */
+    label: string;
+    /** Default 32. The width follows the container. */
+    height?: number;
+    /** Shades the area under the line. */
+    area?: boolean;
+    className?: string;
+}
+/**
+ * A small trend line with no axes, sized for StatTile's `sparkline` slot. It draws in
+ * `currentColor`, so a parent's text colour (or the default accent) sets it.
+ */
+export declare function Sparkline({ values, label, height, area, className }: SparklineProps): import("react").JSX.Element;

package/dist/organisms/Chart/Sparkline.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useElementWidth } from '../../hooks/useElementWidth.js';
+/**
+ * A small trend line with no axes, sized for StatTile's `sparkline` slot. It draws in
+ * `currentColor`, so a parent's text colour (or the default accent) sets it.
+ */
+export function Sparkline({ values, label, height = 32, area = false, className }) {
+    const ref = useRef(null);
+    const width = useElementWidth(ref) || 120;
+    const lo = Math.min(...values);
+    const hi = Math.max(...values);
+    const pad = 2;
+    const x = (i) => pad + (i / Math.max(1, values.length - 1)) * (width - pad * 2);
+    const y = (v) => pad + (1 - (v - lo) / (hi - lo || 1)) * (height - pad * 2);
+    const points = values.map((v, i) => `${x(i)},${y(v)}`).join(' ');
+    return (_jsx("div", { ref: ref, className: ['ui-sparkline', className].filter(Boolean).join(' '), children: _jsx("svg", { role: "img", "aria-label": label, width: "100%", height: height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", children: values.length > 1 ? (_jsxs("g", { children: [area ? (_jsx("polygon", { points: `${x(0)},${height} ${points} ${x(values.length - 1)},${height}`, fill: "currentColor", opacity: 0.12 })) : null, _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] })) : null }) }));
+}

package/dist/organisms/Chart/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CategoryCharts.js';
+export * from './ChartFrame.js';
+export * from './DonutChart.js';
+export * from './Sparkline.js';
+export { CHART_COLORS, ChartLegend, type ChartSeries, type ChartTableData, chartColor, chartTable, type LegendEntry, niceTicks, } from './shared.js';

package/dist/organisms/Chart/index.js

@@ -0,0 +1,5 @@
+export * from './CategoryCharts.js';
+export * from './ChartFrame.js';
+export * from './DonutChart.js';
+export * from './Sparkline.js';
+export { CHART_COLORS, ChartLegend, chartColor, chartTable, niceTicks, } from './shared.js';

package/dist/organisms/Chart/shared.d.ts

@@ -0,0 +1,51 @@
+export interface ChartSeries {
+    id: string;
+    label: string;
+    /** One value per category, in category order. `null` is a gap. */
+    values: (number | null)[];
+}
+export interface ChartTableData {
+    headers: string[];
+    rows: (string | number)[][];
+}
+/** The palette has eight entries; series past the eighth repeat with a different pattern. */
+export declare const CHART_COLORS = 8;
+export declare function chartColor(index: number): string;
+/**
+ * Round tick values covering `[min, max]`: steps of 1, 2, 2.5 or 5 times a power of ten, about
+ * `count` of them, always including zero when the range crosses it.
+ */
+export declare function niceTicks(min: number, max: number, count?: number): number[];
+/** A table of the same numbers a category chart draws, for ChartFrame's table view. */
+export declare function chartTable(categories: string[], series: ChartSeries[], format?: (n: number) => string, categoryHeader?: string): ChartTableData;
+type PatternKind = 'solid' | 'diagonal' | 'dots' | 'cross' | 'horizontal' | 'vertical' | 'reverse' | 'grid';
+/** The fill for series `index`: a colour, and for every series after the first a pattern too. */
+export declare function patternFor(index: number): PatternKind;
+/** The `<pattern>` for series `index`, to place in an SVG's `<defs>`. */
+export declare function SeriesPattern({ id, index }: {
+    id: string;
+    index: number;
+}): import("react").JSX.Element;
+/** A point marker for line series `index`, centred on (x, y). Each series has its own shape. */
+export declare function SeriesMarker({ index, x, y, r, }: {
+    index: number;
+    x: number;
+    y: number;
+    r?: number;
+}): import("react").JSX.Element;
+export interface LegendEntry {
+    id: string;
+    label: string;
+    /** Extra text after the label, e.g. a value and share for a donut. */
+    detail?: string;
+}
+/**
+ * The key to a chart's series. Each swatch repeats the pattern (bars, donut) or the marker
+ * (lines) the chart uses, so the legend works without telling colours apart.
+ */
+export declare function ChartLegend({ entries, kind, idPrefix, }: {
+    entries: LegendEntry[];
+    kind: 'fill' | 'line';
+    idPrefix: string;
+}): import("react").JSX.Element;
+export {};

package/dist/organisms/Chart/shared.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The palette has eight entries; series past the eighth repeat with a different pattern. */
+export const CHART_COLORS = 8;
+export function chartColor(index) {
+    return `var(--chart-${(index % CHART_COLORS) + 1})`;
+}
+/**
+ * Round tick values covering `[min, max]`: steps of 1, 2, 2.5 or 5 times a power of ten, about
+ * `count` of them, always including zero when the range crosses it.
+ */
+export function niceTicks(min, max, count = 5) {
+    if (!Number.isFinite(min) || !Number.isFinite(max))
+        return [0];
+    if (min === max) {
+        if (min === 0)
+            return [0, 1];
+        const pad = Math.abs(min) * 0.5;
+        return niceTicks(Math.min(0, min - pad), Math.max(0, max + pad), count);
+    }
+    const lo = Math.min(min, max);
+    const hi = Math.max(min, max);
+    const raw = (hi - lo) / Math.max(1, count - 1);
+    const power = 10 ** Math.floor(Math.log10(raw));
+    const step = [1, 2, 2.5, 5, 10].map((m) => m * power).find((s) => s >= raw) ?? 10 * power;
+    const start = Math.floor(lo / step) * step;
+    const end = Math.ceil(hi / step) * step;
+    const ticks = [];
+    for (let v = start; v <= end + step / 2; v += step)
+        ticks.push(Number(v.toFixed(10)));
+    return ticks;
+}
+/** A table of the same numbers a category chart draws, for ChartFrame's table view. */
+export function chartTable(categories, series, format = String, categoryHeader = '') {
+    return {
+        headers: [categoryHeader, ...series.map((s) => s.label)],
+        rows: categories.map((c, i) => [
+            c,
+            ...series.map((s) => (s.values[i] === null ? '' : format(s.values[i]))),
+        ]),
+    };
+}
+const PATTERNS = [
+    'solid',
+    'diagonal',
+    'dots',
+    'cross',
+    'horizontal',
+    'vertical',
+    'reverse',
+    'grid',
+];
+/** The fill for series `index`: a colour, and for every series after the first a pattern too. */
+export function patternFor(index) {
+    return PATTERNS[index % PATTERNS.length];
+}
+/** The `<pattern>` for series `index`, to place in an SVG's `<defs>`. */
+export function SeriesPattern({ id, index }) {
+    const color = chartColor(index);
+    const kind = patternFor(index);
+    const ink = 'var(--color-panel-solid)';
+    const marks = {
+        solid: null,
+        diagonal: _jsx("path", { d: "M-1,1 l2,-2 M0,6 l6,-6 M5,7 l2,-2", stroke: ink, strokeWidth: "1.2" }),
+        reverse: _jsx("path", { d: "M-1,5 l2,2 M0,0 l6,6 M5,-1 l2,2", stroke: ink, strokeWidth: "1.2" }),
+        dots: _jsx("circle", { cx: "3", cy: "3", r: "1.1", fill: ink }),
+        cross: _jsx("path", { d: "M0,0 l6,6 M6,0 l-6,6", stroke: ink, strokeWidth: "1" }),
+        horizontal: _jsx("path", { d: "M0,3 h6", stroke: ink, strokeWidth: "1.2" }),
+        vertical: _jsx("path", { d: "M3,0 v6", stroke: ink, strokeWidth: "1.2" }),
+        grid: _jsx("path", { d: "M0,3 h6 M3,0 v6", stroke: ink, strokeWidth: "1" }),
+    };
+    return (_jsxs("pattern", { id: id, width: "6", height: "6", patternUnits: "userSpaceOnUse", children: [_jsx("rect", { width: "6", height: "6", fill: color }), marks[kind]] }));
+}
+const MARKERS = [
+    'circle',
+    'square',
+    'triangle',
+    'diamond',
+    'down',
+    'cross',
+    'plus',
+    'star',
+];
+/** A point marker for line series `index`, centred on (x, y). Each series has its own shape. */
+export function SeriesMarker({ index, x, y, r = 3.5, }) {
+    const color = chartColor(index);
+    const kind = MARKERS[index % MARKERS.length];
+    const common = { fill: color, stroke: 'var(--color-panel-solid)', strokeWidth: 1 };
+    switch (kind) {
+        case 'circle':
+            return _jsx("circle", { cx: x, cy: y, r: r, ...common });
+        case 'square':
+            return _jsx("rect", { x: x - r, y: y - r, width: r * 2, height: r * 2, ...common });
+        case 'triangle':
+            return (_jsx("path", { d: `M${x},${y - r * 1.2} L${x + r * 1.1},${y + r * 0.8} L${x - r * 1.1},${y + r * 0.8} Z`, ...common }));
+        case 'down':
+            return (_jsx("path", { d: `M${x},${y + r * 1.2} L${x + r * 1.1},${y - r * 0.8} L${x - r * 1.1},${y - r * 0.8} Z`, ...common }));
+        case 'diamond':
+            return (_jsx("path", { d: `M${x},${y - r * 1.3} L${x + r * 1.3},${y} L${x},${y + r * 1.3} L${x - r * 1.3},${y} Z`, ...common }));
+        case 'cross':
+            return (_jsx("path", { d: `M${x - r},${y - r} L${x + r},${y + r} M${x + r},${y - r} L${x - r},${y + r}`, stroke: color, strokeWidth: 2 }));
+        case 'plus':
+            return (_jsx("path", { d: `M${x - r},${y} H${x + r} M${x},${y - r} V${y + r}`, stroke: color, strokeWidth: 2 }));
+        default:
+            return (_jsx("path", { d: `M${x},${y - r * 1.3} L${x + r * 0.4},${y - r * 0.4} L${x + r * 1.3},${y} L${x + r * 0.4},${y + r * 0.4} L${x},${y + r * 1.3} L${x - r * 0.4},${y + r * 0.4} L${x - r * 1.3},${y} L${x - r * 0.4},${y - r * 0.4} Z`, ...common }));
+    }
+}
+/**
+ * The key to a chart's series. Each swatch repeats the pattern (bars, donut) or the marker
+ * (lines) the chart uses, so the legend works without telling colours apart.
+ */
+export function ChartLegend({ entries, kind, idPrefix, }) {
+    return (_jsx("ul", { className: "ui-chart-legend", children: entries.map((entry, i) => (_jsxs("li", { children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: kind === 'fill' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(SeriesPattern, { id: `${idPrefix}-legend-${i}`, index: i }) }), _jsx("rect", { width: "14", height: "14", rx: "3", fill: `url(#${idPrefix}-legend-${i})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: "M0,7 H14", stroke: chartColor(i), strokeWidth: "2" }), _jsx(SeriesMarker, { index: i, x: 7, y: 7, r: 3.5 })] })) }), _jsx("span", { children: entry.label }), entry.detail ? _jsx("span", { className: "ui-chart-legend__detail", children: entry.detail }) : null] }, entry.id))) }));
+}

package/dist/organisms/DataTable/DataTable.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+import { type ActionMenuItem } from '../../atoms/ActionMenu/ActionMenu.js';
+import { type PaginationProps } from '../../molecules/Pagination/Pagination.js';
+import type { DataTableColumn, SortState } from './types.js';
+export type DataTableState = 'ready' | 'loading' | 'empty' | 'error';
+export interface DataTableProps<Row> {
+    columns: DataTableColumn<Row>[];
+    rows: readonly Row[];
+    getRowId: (row: Row) => string;
+    /** The table's name. Required; visually hidden unless `showCaption`. */
+    caption: string;
+    showCaption?: boolean;
+    /**
+     * How a row is named to screen readers ("Select Order 1042"). Default: the row-header
+     * column's `sortValue`, else the row id.
+     */
+    getRowLabel?: (row: Row) => string;
+    sort?: SortState;
+    onSortChange?: (sort: SortState) => void;
+    /** Selected row ids. With `onSelectionChange`, adds a checkbox column. */
+    selection?: ReadonlySet<string>;
+    onSelectionChange?: (selection: Set<string>) => void;
+    /** Per-row actions, in an overflow menu at the end of the row. */
+    rowActions?: (row: Row) => ActionMenuItem[];
+    onRowAction?: (actionId: string, row: Row) => void;
+    /**
+     * Makes the row clickable with a mouse, and turns the row-header cell into a button for
+     * keyboard and screen-reader users, so the action has a real control.
+     */
+    onRowClick?: (row: Row) => void;
+    /** Default `ready`; `empty` is also inferred from zero rows. */
+    state?: DataTableState;
+    /** Replaces the default EmptyState ("No results"). */
+    empty?: ReactNode;
+    /** Replaces the default ErrorState. */
+    error?: ReactNode;
+    /** Skeleton rows while loading. Default 5. */
+    loadingRows?: number;
+    /** Renders a Pagination under the table. */
+    pagination?: PaginationProps;
+    density?: 'comfortable' | 'compact';
+    /**
+     * Below this table width the rows become stacked cards with labels: `sm` 480px, `md` 640px
+     * (the default), `lg` 800px. `false` keeps the table and scrolls it sideways instead.
+     */
+    stackBelow?: 'sm' | 'md' | 'lg' | false;
+    /** Keeps the row-header column in view while the table scrolls sideways. */
+    stickyFirstColumn?: boolean;
+    /** Caps the height, so the header stays in view while the rows scroll. Any CSS length. */
+    maxHeight?: string;
+    className?: string;
+}
+/**
+ * A data table: sortable headers, row selection, row actions, loading/empty/error states and
+ * pagination. Fully controlled: it never sorts, pages or selects on its own, so the data can
+ * come from a server as easily as from `useClientTable`.
+ *
+ * It responds to its own width (a container query), not the viewport's. Narrow, it drops
+ * low-priority columns and then stacks each row into a labelled card. Explicit table roles
+ * keep it a table to screen readers in the stacked layout, where `display: block` would
+ * otherwise erase that in some browsers.
+ */
+export declare function DataTable<Row>({ columns, rows, getRowId, caption, showCaption, getRowLabel, sort, onSortChange, selection, onSelectionChange, rowActions, onRowAction, onRowClick, state, empty, error, loadingRows, pagination, density, stackBelow, stickyFirstColumn, maxHeight, className, }: DataTableProps<Row>): import("react").JSX.Element;