@idyeah/diya 0.0.0 → 1.0.1

package/dist/data-viz/DataViz.js

@@ -0,0 +1,469 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react';
+import * as echarts from 'echarts/core';
+import { LineChart, BarChart, PieChart, TreemapChart } from 'echarts/charts';
+import { GridComponent, TooltipComponent, LegendComponent, AriaComponent } from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
+import { useDiyaAppearance, useDiyaLocale, useDiyaMessages } from '../DiyaProvider.js';
+import { Button } from '../button/Button.js';
+import { badgeForeground } from '../badge/badge-utils.js';
+import { BRAND_GROUNDS } from '../internal/brand.js';
+import { cx } from '../internal/cx.js';
+import { chartMessages } from './messages.js';
+echarts.use([
+    LineChart,
+    BarChart,
+    PieChart,
+    TreemapChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    AriaComponent,
+    SVGRenderer,
+]);
+function resolveData(items) {
+    return items.flatMap((item) => {
+        const children = item.children ? resolveData(item.children) : undefined;
+        const value = item.value ?? children?.reduce((sum, child) => sum + child.value, 0);
+        return value !== undefined && Number.isFinite(value) && value >= 0
+            ? [{ ...item, value, children }]
+            : [];
+    });
+}
+function dataRows(items, parent = '') {
+    return items.flatMap((item) => {
+        const name = parent ? parent + ' / ' + item.name : item.name;
+        return item.children?.length ? dataRows(item.children, name) : [{ name, value: item.value }];
+    });
+}
+const compactLegendGap = 12;
+function compactCircularLayout(width, height, names, fontFamily) {
+    // Match ECharts' legend marker, label spacing, padding and wrapped row gaps.
+    const availableWidth = Math.max(1, width - 10);
+    let rowWidth = 0, rowHeight = 0, legendHeight = 10;
+    for (const name of new Set(names)) {
+        const text = echarts.format.getTextRect(name, `13px ${fontFamily}`);
+        const itemWidth = 15 + text.width;
+        const itemHeight = Math.max(10, text.height);
+        if (rowWidth && rowWidth + compactLegendGap + itemWidth > availableWidth) {
+            legendHeight += rowHeight + compactLegendGap;
+            rowWidth = 0;
+            rowHeight = 0;
+        }
+        rowWidth += (rowWidth ? compactLegendGap : 0) + itemWidth;
+        rowHeight = Math.max(rowHeight, itemHeight);
+    }
+    legendHeight += rowHeight;
+    const plotHeight = Math.max(8, height - legendHeight - 12);
+    return {
+        centerY: (plotHeight + 8) / 2,
+        outerRadius: Math.max(1, Math.min(Math.min(width, height) * .32, (plotHeight - 8) / 2)),
+    };
+}
+/** DIYA's chart colors, "Vivid": bright system blue, orange, pink, green, violet, teal, indigo and red, ordered so neighbours stay apart. Bright hues sit below 3:1 on white, so every chart also ships its legend, tooltips and a data table. */
+export const chartPalettes = {
+    light: ['#007aff', '#ff9500', '#ff2d55', '#34c759', '#af52de', '#30b0c7', '#5856d6', '#ff3b30'],
+    dark: ['#0a84ff', '#ff9f0a', '#ff375f', '#30d158', '#bf5af2', '#40c8e0', '#7d7aff', '#ffd60a'],
+};
+const channel = (value) => { value /= 255; return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4; };
+const luminance = ([r, g, b]) => 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+const contrast = (a, b) => { const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m); return (x + 0.05) / (y + 0.05); };
+/** CIE Lab, for telling whether two series colors read as the same. */
+function lab(rgb) {
+    const [x, y, z] = [[0.4124, 0.3576, 0.1805], [0.2126, 0.7152, 0.0722], [0.0193, 0.1192, 0.9505]].map((row, i) => row.reduce((sum, weight, j) => sum + weight * channel(rgb[j]), 0) / [0.9505, 1, 1.089][i]);
+    const f = (t) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116);
+    return [116 * f(y) - 16, 500 * (f(x) - f(y)), 200 * (f(y) - f(z))];
+}
+const distance = (a, b) => Math.hypot(...lab(a).map((value, i) => value - lab(b)[i]));
+/** Mixes `b` into `a` by `amount` (0 to 1), in sRGB. */
+const mixColor = (a, b, amount) => a.map((value, i) => value + (b[i] - value) * amount);
+const hex = ([r, g, b]) => '#' + [r, g, b].map((value) => Math.round(value).toString(16).padStart(2, '0')).join('');
+/** Reads plain `#rgb`, `#rrggbb` and `rgb()`/`rgba()` values, as computed styles report them. */
+function parseColor(value) {
+    const text = value.trim();
+    const short = text.match(/^#([\da-f])([\da-f])([\da-f])$/i);
+    if (short)
+        return [1, 2, 3].map((i) => parseInt(short[i] + short[i], 16));
+    const long = text.match(/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})(?:[\da-f]{2})?$/i);
+    if (long)
+        return [1, 2, 3].map((i) => parseInt(long[i], 16));
+    const rgb = text.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/i);
+    if (!rgb || rgb[4] === '0' || rgb[4] === '0%')
+        return undefined;
+    return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+}
+/** Resolves DIYA's color tokens where the chart sits, as sRGB; a canvas paints any color syntax the browser knows. */
+function readColors(node) {
+    if (typeof getComputedStyle !== 'function')
+        return {};
+    let context = null;
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        context = canvas.getContext('2d', { willReadFrequently: true });
+    }
+    catch { /* No canvas, such as in a test DOM; plain values still parse. */ }
+    const probe = document.createElement('span');
+    probe.style.display = 'none';
+    node.appendChild(probe);
+    const read = (token) => {
+        probe.style.color = '';
+        probe.style.color = `var(${token})`;
+        const value = getComputedStyle(probe).color;
+        if (!value || value.includes('var('))
+            return undefined;
+        if (!context)
+            return parseColor(value);
+        context.clearRect(0, 0, 1, 1);
+        context.fillStyle = '#000';
+        context.fillStyle = value;
+        context.fillRect(0, 0, 1, 1);
+        const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+        return a > 0 ? [r, g, b] : parseColor(value);
+    };
+    const text = read('--diya-color-text');
+    const colors = {
+        text,
+        muted: read('--diya-color-muted'),
+        surface: read('--diya-color-raised'),
+    };
+    probe.remove();
+    return colors;
+}
+/** A line, area, bar, combo, pie, donut or treemap chart. Data and formatting belong to the caller; rendering never fetches a service. */
+export const Chart = forwardRef(function Chart({ type, label, categories = [], series = [], data = [], variant = 'standard', legend = true, grid = true, tooltip = true, valueDomain, height = 300, palette, centerLabel, formatValue: formatValueProp, className, ...props }, ref) {
+    const t = useDiyaMessages('chart', chartMessages);
+    const locale = useDiyaLocale();
+    const localeFormatter = useCallback((value) => value.toLocaleString(locale), [locale]);
+    const formatValue = formatValueProp ?? localeFormatter;
+    const host = useRef(null);
+    const chart = useRef(null);
+    const [chartWidth, setChartWidth] = useState(0);
+    // The provider resolves the theme (including 'system') and the brand's accent tokens for it.
+    const { theme, glass, fontFamily, brand: brandTokens } = useDiyaAppearance();
+    // Layout is measured when options are set. A web font that arrives later
+    // changes those measurements, so options are set again once it loads.
+    const [fontEpoch, setFontEpoch] = useState(0);
+    useEffect(() => {
+        const fonts = typeof document === 'undefined' ? undefined : document.fonts;
+        if (!fonts)
+            return;
+        let active = true;
+        const families = new Set(fontFamily.split(',').map((name) => name.trim().replace(/^['"]|['"]$/g, '')));
+        const refresh = () => { if (active)
+            setFontEpoch((epoch) => epoch + 1); };
+        // Only this chart's own fonts matter; other faces loading elsewhere do not.
+        const onLoaded = (event) => {
+            const faces = event.fontfaces ?? [];
+            if (faces.some((face) => families.has(face.family.replace(/^['"]|['"]$/g, ''))))
+                refresh();
+        };
+        fonts.addEventListener?.('loadingdone', onLoaded);
+        const spec = `13px ${fontFamily}`;
+        let ready = false;
+        try {
+            ready = fonts.check?.(spec) ?? false;
+        }
+        catch { /* An unparsable family is treated as not loaded. */ }
+        if (!ready)
+            void fonts.load?.(spec).then(refresh, () => { });
+        return () => {
+            active = false;
+            fonts.removeEventListener?.('loadingdone', onLoaded);
+        };
+    }, [fontFamily]);
+    const light = theme === 'light';
+    const circular = type === 'pie' || type === 'donut';
+    const cartesian = !circular && type !== 'treemap';
+    const showLegend = legend && type !== 'treemap';
+    const compactCircular = circular && showLegend && height < 240;
+    const safeData = resolveData(data);
+    const compactLayout = compactCircular && chartWidth > 0
+        ? compactCircularLayout(chartWidth, height, safeData.map(item => item.name), fontFamily)
+        : null;
+    const circularCenter = compactLayout?.centerY ?? (height * (compactCircular ? .36 : showLegend ? .44 : .5));
+    const compactInnerRadius = compactLayout && compactLayout.outerRadius * (variant === 'thin' ? 56 / 64 : 46 / 64);
+    const total = type === 'donut' ? formatValue(safeData.reduce((sum, item) => sum + item.value, 0)) : '';
+    const defaultTotalSize = Math.max(14, Math.min(30, height * (compactCircular ? .09 : .1)));
+    const totalWidth = compactInnerRadius && type === 'donut'
+        ? echarts.format.getTextRect(total, `${defaultTotalSize}px ${fontFamily}`).width
+        : 0;
+    const totalSize = compactInnerRadius && totalWidth
+        ? Math.max(14, Math.min(defaultTotalSize, Math.floor(defaultTotalSize * (compactInnerRadius * 2 - 8) / totalWidth)))
+        : defaultTotalSize;
+    const circularRadius = compactLayout
+        ? type === 'pie' ? compactLayout.outerRadius : [compactInnerRadius, compactLayout.outerRadius]
+        : type === 'pie'
+            ? compactCircular ? '64%' : '76%'
+            : variant === 'thin'
+                ? compactCircular ? ['56%', '64%'] : ['70%', '80%']
+                : compactCircular ? ['46%', '64%'] : ['58%', '80%'];
+    const empty = cartesian
+        ? !categories.length ||
+            !series.some((item) => item.values.some((value) => value !== null && Number.isFinite(value)))
+        : !safeData.some((item) => item.value > 0);
+    useEffect(() => {
+        const node = host.current;
+        if (!node || empty)
+            return;
+        const instance = echarts.init(node, undefined, { renderer: 'svg' });
+        chart.current = instance;
+        const resize = () => {
+            instance.resize();
+            setChartWidth(node.clientWidth);
+        };
+        setChartWidth(node.clientWidth);
+        const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(resize) : null;
+        observer?.observe(node);
+        if (!observer)
+            window.addEventListener('resize', resize);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', resize);
+            chart.current = null;
+            instance.dispose();
+        };
+    }, [empty]);
+    useEffect(() => {
+        if (!chart.current || !host.current)
+            return;
+        // Surface and text come from the tokens where the chart sits, so a caller's overrides hold.
+        const tokens = readColors(host.current);
+        const onLight = light;
+        const grounds = BRAND_GROUNDS[onLight ? 'light' : 'dark'];
+        const surface = tokens.surface ?? parseColor(grounds.raised);
+        const ink = tokens.text ?? parseColor(grounds.text);
+        const text = hex(tokens.muted ?? (onLight ? [84, 84, 84] : [190, 190, 190]));
+        const line = `rgba(${ink.join(',')},${onLight ? 0.08 : 0.1})`;
+        // A colored brand leads series 1; a brand too pale for the surface falls back to its readable ink.
+        // A neutral brand (DIYA's default ink, or any gray) steps aside and the palette leads.
+        const accent = parseColor(brandTokens.accent);
+        const brand = accent && contrast(accent, surface) >= 3 ? accent : parseColor(brandTokens.accentInk) ?? accent ?? ink;
+        const neutral = Math.max(...brand) - Math.min(...brand) < 16;
+        // A palette color that reads as the brand's twin moves to the back, so the first series stay distinct.
+        const rest = chartPalettes[onLight ? 'light' : 'dark'];
+        const twin = (color) => distance(parseColor(color), brand) < 25;
+        const colors = palette?.length ? palette : neutral ? rest : [hex(brand), ...rest.filter((color) => !twin(color)), ...rest.filter(twin)];
+        const horizontal = type === 'bar' && variant === 'horizontal';
+        // A fine gradient: bars soften toward their base, one or two lines glow down into the plot (more would muddy),
+        // and donut segments catch a highlight.
+        const solid = (color) => (color && /^#[0-9a-f]{6}$/i.test(color) ? color : undefined);
+        const barFill = (color) => horizontal
+            ? { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: `${color}b3` }, { offset: 1, color }] }
+            : { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color }, { offset: 1, color: `${color}b3` }] };
+        const areaFill = (color) => ({
+            type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [{ offset: 0, color: `${color}38` }, { offset: 1, color: `${color}00` }],
+        });
+        const sliceFill = (color) => ({
+            type: 'linear', x: 0, y: 0, x2: 1, y2: 1,
+            colorStops: [{ offset: 0, color: hex(mixColor(parseColor(color), [255, 255, 255], onLight ? 0.24 : 0.16)) }, { offset: 1, color }],
+        });
+        const axis = {
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { color: text, fontSize: 13 },
+            splitLine: { show: grid, lineStyle: { color: line } },
+        };
+        // Grid lines run along the value axis only, as `grid` promises; the category axis stays clean.
+        const categoryOnly = { splitLine: { show: false } };
+        // A caller's formatValue labels the value axis too, so ticks read like the tooltips ($40k, not 40,000).
+        const valueLabel = formatValueProp ? { ...axis.axisLabel, formatter: (value) => formatValueProp(value) } : axis.axisLabel;
+        const negative = series.some((item) => item.values.some((value) => value !== null && value < 0));
+        const domain = valueDomain && valueDomain.every(Number.isFinite) && valueDomain[1] > valueDomain[0]
+            ? { min: valueDomain[0], max: valueDomain[1] }
+            : negative
+                ? {}
+                : { min: 0 };
+        const cleanValues = (values) => values.map((value) => (value === null || !Number.isFinite(value) ? null : value));
+        function chartNodes(items) {
+            return items.map((item, index) => ({
+                ...item,
+                children: item.children ? chartNodes(item.children) : undefined,
+                itemStyle: circular && solid(item.color ?? colors[index % colors.length])
+                    ? { color: sliceFill(solid(item.color ?? colors[index % colors.length])) }
+                    : item.color ? { color: item.color } : undefined,
+                label: { color: badgeForeground(item.color ?? colors[index % colors.length]) },
+            }));
+        }
+        const chartData = chartNodes(safeData);
+        const option = {
+            animation: false,
+            color: colors,
+            textStyle: { fontFamily },
+            aria: { enabled: true },
+            tooltip: {
+                show: tooltip,
+                trigger: cartesian ? 'axis' : 'item',
+                renderMode: 'richText',
+                backgroundColor: hex(surface),
+                textStyle: { color: hex(ink) },
+                borderColor: line,
+                confine: true,
+                valueFormatter: formatValue,
+            },
+            legend: {
+                show: showLegend,
+                bottom: 0,
+                textStyle: { color: text, fontSize: 13 },
+                icon: 'circle',
+                // Legend dots stay the solid series color, whatever the fill.
+                data: circular
+                    ? safeData.map((item, index) => ({ name: item.name, itemStyle: { color: item.color ?? colors[index % colors.length] } }))
+                    : cartesian
+                        ? series.map((item, index) => ({ name: item.name, itemStyle: { color: item.color ?? colors[index % colors.length] } }))
+                        : undefined,
+                itemWidth: 10,
+                itemHeight: 10,
+                itemGap: compactCircular ? compactLegendGap : 18,
+                // A width change must retain the user's hidden/shown legend categories.
+                selected: chart.current.getOption?.()?.legend?.[0]?.selected,
+            },
+            grid: { left: 12, right: 16, top: 16, bottom: showLegend ? 64 : 16, containLabel: true },
+            ...(cartesian
+                ? {
+                    xAxis: {
+                        ...axis,
+                        ...(horizontal ? { ...domain, axisLabel: valueLabel } : categoryOnly),
+                        type: horizontal ? 'value' : 'category',
+                        data: horizontal ? undefined : categories,
+                        boundaryGap: type === 'bar' || type === 'combo',
+                    },
+                    yAxis: {
+                        ...axis,
+                        ...(!horizontal ? { ...domain, axisLabel: valueLabel } : categoryOnly),
+                        type: horizontal ? 'category' : 'value',
+                        data: horizontal ? categories : undefined,
+                    },
+                }
+                : {}),
+            series: circular
+                ? [
+                    {
+                        type: 'pie',
+                        radius: circularRadius,
+                        center: ['50%', circularCenter],
+                        startAngle: 90,
+                        percentPrecision: 0,
+                        padAngle: type === 'pie' ? 0 : 2.5,
+                        minAngle: 3,
+                        avoidLabelOverlap: true,
+                        label: {
+                            show: type === 'pie',
+                            position: 'inside',
+                            formatter: '{d}%',
+                            fontSize: 13,
+                            fontWeight: 500,
+                        },
+                        labelLine: { show: false },
+                        emphasis: { scale: false },
+                        itemStyle: {
+                            borderRadius: type === 'pie' ? 0 : 5,
+                            borderWidth: type === 'pie' ? 1.5 : 0,
+                            borderColor: hex(surface),
+                        },
+                        data: chartData,
+                    },
+                ]
+                : type === 'treemap'
+                    ? [
+                        {
+                            type: 'treemap',
+                            roam: false,
+                            nodeClick: false,
+                            breadcrumb: { show: false },
+                            top: 0,
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            visibleMin: 0,
+                            squareRatio: 1.2,
+                            label: {
+                                show: true,
+                                formatter: (item) => item.name + '\n' + formatValue(item.value),
+                                fontSize: 13,
+                                lineHeight: 24,
+                                color: hex(ink),
+                            },
+                            upperLabel: { show: false },
+                            itemStyle: { borderWidth: 0, gapWidth: 4, borderRadius: 8 },
+                            levels: [
+                                { itemStyle: { borderWidth: 0, gapWidth: 4 } },
+                                { itemStyle: { borderWidth: 0, gapWidth: 4 } },
+                            ],
+                            data: chartData,
+                        },
+                    ]
+                    : series.map((item, index) => ({
+                        name: item.name,
+                        type: item.type ??
+                            (type === 'bar' || (type === 'combo' && index < series.length - 1)
+                                ? 'bar'
+                                : 'line'),
+                        data: cleanValues(item.values),
+                        smooth: variant === 'smooth',
+                        stack: variant === 'stacked' ? 'total' : undefined,
+                        showSymbol: false,
+                        lineStyle: { width: 2.5 },
+                        barMaxWidth: series.length > 3 ? 18 : 28,
+                        ...(() => {
+                            const color = solid(item.color ?? colors[index % colors.length]);
+                            const bar = type === 'bar' || (type === 'combo' && index < series.length - 1) || item.type === 'bar';
+                            if (bar)
+                                return { itemStyle: { borderRadius: horizontal ? [0, 6, 6, 0] : [6, 6, 0, 0], color: color ? barFill(color) : item.color } };
+                            return {
+                                itemStyle: { color: color ?? item.color },
+                                ...(color && variant !== 'stacked' && (type === 'area' || series.length <= 2)
+                                    ? { areaStyle: { opacity: 1, origin: 'start', color: areaFill(color) } }
+                                    : type === 'area' ? { areaStyle: { opacity: 0.14 } } : {}),
+                            };
+                        })(),
+                    })),
+        };
+        chart.current.setOption(option, { notMerge: true });
+        chart.current.resize();
+    }, [
+        type,
+        categories,
+        series,
+        data,
+        variant,
+        legend,
+        grid,
+        tooltip,
+        valueDomain,
+        palette,
+        formatValue,
+        theme,
+        glass,
+        brandTokens,
+        fontFamily,
+        fontEpoch,
+        height,
+        chartWidth,
+        empty,
+    ]);
+    if (empty)
+        return (_jsx("div", { ...props, ref: ref, className: cx('diya-chart-frame', className), style: { minHeight: height, ...props.style }, children: _jsx("p", { role: "status", children: t.empty }) }));
+    return (_jsxs("div", { ...props, ref: ref, className: cx('diya-chart-frame', className), children: [_jsx("div", { ref: host, className: "diya-data-viz", style: { height }, role: "img", "aria-label": label }), type === 'donut' && (_jsxs("div", { className: "diya-donut-total", style: { top: circularCenter }, "aria-hidden": "true", children: [_jsx("strong", { style: { fontSize: totalSize }, children: total }), _jsx("span", { children: centerLabel ?? t.total })] }))] }));
+});
+/** A chart in a titled card, with an optional summary, actions and a show-data table. */
+export const DataViz = forwardRef(function DataViz({ title, headingLevel = 3, showHeader = true, description, actions, summary, footer, shadow = false, showDataToggle = true, dataCaption, type, categories, series, data, variant, legend, grid, tooltip, valueDomain, height, palette, centerLabel, formatValue, className, ...props }, ref) {
+    const t = useDiyaMessages('chart', chartMessages);
+    const locale = useDiyaLocale();
+    const [showData, setShowData] = useState(false);
+    const tableId = useId();
+    const Heading = `h${headingLevel}`;
+    const circular = type === 'pie' || type === 'donut' || type === 'treemap';
+    const rows = dataRows(resolveData(data ?? []));
+    const format = formatValue ?? ((value) => value.toLocaleString(locale));
+    const chart = { type, categories, series, data, variant, legend, grid, tooltip, valueDomain, height, palette, centerLabel, formatValue };
+    return (_jsxs("article", { ...props, ref: ref, className: cx('diya-analytics-card', className), "data-shadow": shadow, children: [(showHeader || actions) && _jsxs("header", { className: "diya-analytics-header", children: [showHeader && _jsxs("div", { children: [_jsx(Heading, { className: "diya-analytics-title", children: title }), description && _jsx("p", { children: description })] }), actions && _jsx("div", { className: "diya-analytics-tools", children: actions })] }), summary && _jsx("div", { className: "diya-analytics-metric", children: summary }), _jsx(Chart, { ...chart, label: title }), showData && (_jsx("div", { className: "diya-analytics-data-scroll", role: "region", "aria-label": t.dataTable(title), tabIndex: 0, children: _jsxs("table", { id: tableId, className: "diya-analytics-data", children: [_jsx("caption", { children: dataCaption ?? t.dataCaption(title) }), _jsx("thead", { children: _jsx("tr", { children: (circular
+                                    ? [t.category, t.value]
+                                    : [t.category, ...(series ?? []).map((item) => item.name)]).map((name, index) => (_jsx("th", { scope: "col", children: name }, index))) }) }), _jsx("tbody", { children: circular
+                                ? rows.map((item, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: item.name }), _jsx("td", { children: format(item.value) })] }, index)))
+                                : (categories ?? []).map((name, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: name }), (series ?? []).map((item, seriesIndex) => (_jsx("td", { children: item.values[index] == null || !Number.isFinite(item.values[index])
+                                                ? '—'
+                                                : format(item.values[index]) }, seriesIndex)))] }, index))) })] }) })), (footer || showDataToggle) && (_jsxs("footer", { className: "diya-analytics-footer", children: [_jsx("span", { children: footer }), showDataToggle && (_jsx(Button, { variant: "quiet", size: "small", "aria-expanded": showData, "aria-controls": showData ? tableId : undefined, onClick: () => setShowData(!showData), children: showData ? t.hideData : t.showData }))] }))] }));
+});

package/dist/data-viz/index.d.ts

@@ -0,0 +1,2 @@
+export { Chart, DataViz } from './DataViz.js';
+export type { ChartProps, ChartType, ChartSeries, ChartDatum, DataVizProps } from './DataViz.js';

package/dist/data-viz/index.js

@@ -0,0 +1 @@
+export { Chart, DataViz } from './DataViz.js';

package/dist/data-viz/messages.d.ts

@@ -0,0 +1,11 @@
+/** chart: English defaults, overridable through DiyaProvider `messages`. */
+export declare const chartMessages: {
+    total: string;
+    empty: string;
+    showData: string;
+    hideData: string;
+    dataTable: (title: string) => string;
+    dataCaption: (title: string) => string;
+    category: string;
+    value: string;
+};

package/dist/data-viz/messages.js

@@ -0,0 +1,2 @@
+/** chart: English defaults, overridable through DiyaProvider `messages`. */
+export const chartMessages = { total: 'Total', empty: 'No chart data available.', showData: 'Show data table', hideData: 'Hide data table', dataTable: (title) => `${title} data table`, dataCaption: (title) => `${title} data`, category: 'Category', value: 'Value' };

package/dist/date-picker/DatePicker.d.ts

@@ -0,0 +1,57 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type DateRange } from '../calendar/month.js';
+import { datePickerMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        datePicker: typeof datePickerMessages;
+    }
+}
+export type { DateRange };
+type DatePickerBase = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'type' | 'name' | 'onChange' | 'children'> & {
+    /** Visible label above the field; also names the trigger for assistive tech. Hide it with hideLabel. */
+    label: string;
+    /** Prevents opening the calendar and dims the field. */
+    disabled?: boolean;
+    /** Visible error message below the field; marks it invalid while set. */
+    error?: string;
+    /** Hides the label visually but keeps it as the trigger's accessible name. */
+    hideLabel?: boolean;
+    /** Visible hint below the field, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Trigger height and type size; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Earliest date that can be chosen, as ISO YYYY-MM-DD; earlier days show as unavailable. */
+    min?: string;
+    /** Latest date that can be chosen, as ISO YYYY-MM-DD; later days show as unavailable. */
+    max?: string;
+    /** Called with each ISO YYYY-MM-DD day on show; return true to mark the day unavailable (announced, and it can't be chosen), as with `min` and `max`. */
+    isDateUnavailable?: (date: string) => boolean;
+    /** Form field name: the chosen date is sent with the form under it (in range mode, the start and then the end). */
+    name?: string;
+};
+/** One ISO date (YYYY-MM-DD), '' for none. */
+export type DatePickerSingleProps = DatePickerBase & {
+    /** Single-date mode (the default): leave unset or false. */
+    range?: false;
+    /** The chosen date as ISO YYYY-MM-DD, or '' for none, when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The initially chosen ISO date when uncontrolled; a form reset returns to it. */
+    defaultValue?: string;
+    /** Called with the chosen ISO YYYY-MM-DD date, or '' when cleared. */
+    onValueChange?: (value: string) => void;
+};
+/** A start and end date. */
+export type DatePickerRangeProps = DatePickerBase & {
+    /** Range mode: the first click sets the start, the second the end (swapped if earlier). */
+    range: true;
+    /** The chosen range as ISO YYYY-MM-DD dates, a bound '' while unset, when controlled; pair it with `onValueChange`. */
+    value?: DateRange;
+    /** The initially chosen range when uncontrolled; a form reset returns to it. */
+    defaultValue?: DateRange;
+    /** Called with the new range after each click; `end` is '' until the second date is chosen. */
+    onValueChange?: (value: DateRange) => void;
+};
+/** One ISO date ('' for none) by default; `range` takes and returns a DateRange. Native button attributes and the ref go on the trigger; `className` and `style` go on the outer field wrapper. */
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+/** A labeled date field that opens a calendar popup; picks one ISO date, or a start and end date with `range`. */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;