@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/charts/bar-chart.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type ChartProps } from "./chart-shell.js";
+import type { ChartReference } from "./area-chart.js";
+export interface BarChartProps<T extends object> extends Omit<ChartProps<T>, "children"> {
+    /** Keys to draw. Default: every config key. */
+    series?: string[];
+    /** `vertical` = columns (default), `horizontal` = rows growing from inline-start (rankings). */
+    layout?: "vertical" | "horizontal";
+    stack?: "none" | "stacked" | "percent";
+    /** Corner radius in px. Stacked bars round the outer segment only. Default 4. */
+    radius?: number;
+    /** Rows for which this returns true keep full colour; the rest are dimmed. */
+    highlight?: (row: T) => boolean;
+    /** Values printed on the bars. */
+    valueLabels?: boolean;
+    barSize?: "auto" | number;
+    reference?: ChartReference[];
+}
+/**
+ * Category comparison: grouped, stacked or 100% stacked; columns or ranked rows. Negative values get
+ * a prominent zero line.
+ *
+ * ```tsx
+ * <BarChart title="Won deals by rep" data={reps} x="rep" layout="horizontal" config={{ won: { label: "Won", format: "currency" } }} />
+ * ```
+ */
+export declare function BarChart<T extends object>({ series, layout, stack, radius, highlight, valueLabels, barSize, reference, ...props }: BarChartProps<T>): React.JSX.Element;

package/dist/charts/bar-chart.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Bar, BarChart as RBarChart, Cell, LabelList, ReferenceLine } from "recharts";
+import { Chart, useChart } from "./chart-shell.js";
+import { ChartFrame, ChartGrid, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis, useValueAxisWidth } from "./chart.js";
+import { estimateAxisWidth, extent, formatValue, seriesColor } from "./utils.js";
+/**
+ * Category comparison: grouped, stacked or 100% stacked; columns or ranked rows. Negative values get
+ * a prominent zero line.
+ *
+ * ```tsx
+ * <BarChart title="Won deals by rep" data={reps} x="rep" layout="horizontal" config={{ won: { label: "Won", format: "currency" } }} />
+ * ```
+ */
+export function BarChart({ series, layout = "vertical", stack = "none", radius = 4, highlight, valueLabels, barSize = "auto", reference, ...props }) {
+    return (_jsx(Chart, { skeleton: layout === "horizontal" ? "bar-horizontal" : "bar", ...props, children: _jsx(BarPlot, { series: series, layout: layout, stack: stack, radius: radius, highlight: highlight, valueLabels: valueLabels, barSize: barSize, reference: reference }) }));
+}
+function BarPlot({ series: keys, layout, stack, radius = 4, highlight, valueLabels, barSize, reference }) {
+    const chart = useChart();
+    const all = chart.series.filter((s) => (keys ? keys.includes(s.key) : true));
+    const visible = all.filter((s) => !chart.isHidden(s.key));
+    const stacked = stack !== "none";
+    const percent = stack === "percent";
+    const horizontal = layout === "horizontal";
+    const [min] = extent(chart.data, visible.map((s) => s.key), stacked);
+    const valueWidth = useValueAxisWidth(visible.map((s) => s.key), { stacked, percent });
+    const categoryWidth = React.useMemo(() => (horizontal && chart.x ? Math.min(160, estimateAxisWidth(chart.data.map((r) => chart.formatX(r[chart.x])), 12)) : 0), [horizontal, chart]);
+    if (process.env.NODE_ENV !== "production" && chart.data.length > 20 && !horizontal) {
+        console.warn("[vamos-ui] BarChart: more than 20 categories — use layout=\"horizontal\" or group the tail into \"Other\".");
+    }
+    const lastKey = visible[visible.length - 1]?.key;
+    const r = (key) => {
+        if (stacked && key !== lastKey)
+            return [0, 0, 0, 0];
+        return horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
+    };
+    const tickPercent = (v) => chart.f.percent(v, { maximumFractionDigits: 0 });
+    return (_jsx(ChartFrame, { children: _jsxs(RBarChart, { data: chart.data, layout: horizontal ? "vertical" : "horizontal", stackOffset: percent ? "expand" : min < 0 && stacked ? "sign" : undefined, margin: { top: valueLabels && !horizontal ? 18 : 6, right: valueLabels && horizontal ? 48 : 8, bottom: 0, left: 0 }, barCategoryGap: horizontal ? "22%" : "28%", barGap: 3, children: [_jsx(ChartGrid, { vertical: horizontal, horizontal: !horizontal }), horizontal ? (_jsxs(_Fragment, { children: [_jsx(ChartXAxis, { type: "number", niceTicks: "snap125", dataKey: undefined, tickFormatter: percent ? tickPercent : (v) => chart.formatTick(v), minTickGap: 24 }), _jsx(ChartYAxis, { type: "category", dataKey: chart.x, width: categoryWidth, tickFormatter: (v) => chart.formatX(v), interval: 0 })] })) : (_jsxs(_Fragment, { children: [_jsx(ChartXAxis, {}), _jsx(ChartYAxis, { width: valueWidth, tickFormatter: percent ? tickPercent : undefined })] })), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" }, showTotal: stacked && !percent, showShare: percent }), min < 0 ? (horizontal ? _jsx(ReferenceLine, { x: 0, stroke: "var(--fg-subtle)", strokeWidth: 1 }) : _jsx(ReferenceLine, { y: 0, stroke: "var(--fg-subtle)", strokeWidth: 1 })) : null, reference?.map((ref, i) => (horizontal ? _jsx(ChartReferenceLine, { x: ref.y, label: ref.label, color: ref.color }, i) : _jsx(ChartReferenceLine, { y: ref.y, label: ref.label, color: ref.color, labelPosition: ref.labelPosition }, i))), all.map((s) => (_jsxs(Bar, { dataKey: s.key, name: s.label, hide: chart.isHidden(s.key), stackId: stacked ? "stack" : undefined, fill: seriesColor(s.key), radius: r(s.key), barSize: barSize === "auto" ? undefined : barSize, maxBarSize: horizontal ? 22 : 44, isAnimationActive: chart.animate, animationDuration: 500, onClick: chart.onPointClick ? (_, index) => chart.data[index] && chart.onPointClick?.(chart.data[index], s.key) : undefined, style: chart.onPointClick ? { cursor: "pointer" } : undefined, children: [highlight
+                            ? chart.data.map((row, i) => (_jsx(Cell, { fill: highlight(row) ? seriesColor(s.key) : `color-mix(in oklch, ${seriesColor(s.key)} 35%, transparent)` }, i)))
+                            : null, valueLabels && (!stacked || s.key === lastKey) ? (_jsx(LabelList, { dataKey: s.key, position: horizontal ? "right" : "top", offset: 6, className: "vui-chart-value-label", formatter: (v) => formatValue(chart.f, chart.config[s.key]?.format, v, { compact: true }) })) : null] }, s.key)))] }) }));
+}

package/dist/charts/bar-list.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { type ChartLabels } from "./chart-shell.js";
+import { type ChartColor, type FormatSpec } from "./utils.js";
+export interface BarListItem {
+    key: string;
+    label: React.ReactNode;
+    /** Plain-text label for sorting and the accessible row text, when `label` is not a string. */
+    textLabel?: string;
+    value: number;
+    href?: string;
+    icon?: React.ReactNode;
+    /** Change vs the previous period, as a ratio (`0.12` → "+12%"). */
+    delta?: number;
+}
+export interface BarListProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "onClick"> {
+    data: BarListItem[];
+    format?: FormatSpec;
+    /** Bar colour token. Default: the accent tint (`accent-soft`). */
+    color?: ChartColor;
+    /** Show the top N; the rest become "Other (12)". */
+    max?: number;
+    sort?: "desc" | "asc" | "none";
+    /** Adds each row's share of the total. */
+    showShare?: boolean;
+    /** Row activation. Rows with `href` render as links instead. */
+    onItemClick?: (item: BarListItem) => void;
+    size?: "sm" | "md";
+    /** `filled` puts the label on the bar; `track` draws a thin bar under the label. */
+    variant?: "filled" | "track";
+    loading?: boolean;
+    /** Rows of the loading skeleton. Default 5. */
+    loadingRows?: number;
+    /** Shown when `data` is empty. */
+    emptyMessage?: React.ReactNode;
+    labels?: Partial<ChartLabels>;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+}
+/**
+ * A ranked list with proportional bars — top pages, lead sources, referrers. Plain DOM (no chart
+ * library), so it is cheap enough for every dashboard card.
+ *
+ * ```tsx
+ * <BarList aria-label="Top sources" data={[{ key: "google", label: "Google", value: 4120 }]} showShare />
+ * ```
+ */
+export declare const BarList: React.ForwardRefExoticComponent<BarListProps & React.RefAttributes<HTMLOListElement>>;

package/dist/charts/bar-list.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { useLabels } from "../lib/labels.js";
+import { getCollator } from "../lib/text.js";
+import { Skeleton } from "../components/skeleton.js";
+import { chartLabels } from "./chart-shell.js";
+import { formatValue, resolveChartColor } from "./utils.js";
+const textOf = (item) => item.textLabel ?? (typeof item.label === "string" ? item.label : item.key);
+/**
+ * A ranked list with proportional bars — top pages, lead sources, referrers. Plain DOM (no chart
+ * library), so it is cheap enough for every dashboard card.
+ *
+ * ```tsx
+ * <BarList aria-label="Top sources" data={[{ key: "google", label: "Google", value: 4120 }]} showShare />
+ * ```
+ */
+export const BarList = React.forwardRef(function BarList({ data, format = "number", color, max, sort = "desc", showShare, onItemClick, size = "md", variant = "filled", loading, loadingRows = 5, emptyMessage, labels, className, ...props }, ref) {
+    const f = useFormat();
+    const { locale } = useLocale();
+    const t = useLabels("chart", chartLabels, labels);
+    const rows = React.useMemo(() => {
+        const collator = getCollator(locale);
+        const sorted = sort === "none" ? [...data] : [...data].sort((a, b) => (sort === "desc" ? b.value - a.value : a.value - b.value) || collator.compare(textOf(a), textOf(b)));
+        if (max && sorted.length > max) {
+            const rest = sorted.slice(max);
+            const other = { key: "__other", label: t("otherCount", { count: rest.length }), value: rest.reduce((s, r) => s + r.value, 0) };
+            return [...sorted.slice(0, max), other];
+        }
+        return sorted;
+    }, [data, sort, max, locale, t]);
+    const total = rows.reduce((s, r) => s + Math.max(0, r.value), 0);
+    const top = rows.reduce((m, r) => Math.max(m, r.value), 0) || 1;
+    const rowH = size === "sm" ? "h-7" : "h-8";
+    const barColor = color ? resolveChartColor(color) : undefined;
+    if (loading)
+        return (_jsxs("div", { "aria-busy": true, className: cn("grid gap-1.5", className), children: [_jsx("span", { role: "status", className: "sr-only", children: t("loading") }), Array.from({ length: loadingRows }, (_, i) => (_jsx(Skeleton, { className: cn(rowH), style: { width: `${96 - i * (70 / loadingRows)}%` } }, i)))] }));
+    if (!rows.length)
+        return _jsx("p", { className: cn("py-6 text-center text-[13px] text-fg-muted", className), children: emptyMessage ?? t("empty") });
+    return (_jsx("ol", { ref: ref, "data-slot": "bar-list", "data-variant": variant, className: cn("vui-bar-list grid gap-1", size === "sm" ? "text-[12.5px]" : "text-[13px]", className), ...props, children: rows.map((item) => {
+            const width = `${Math.max(0, (item.value / top) * 100)}%`;
+            const valueText = formatValue(f, format, item.value);
+            const share = total ? f.percent(item.value / total) : undefined;
+            const deltaText = item.delta !== undefined ? `${item.delta >= 0 ? "+" : "−"}${f.percent(Math.abs(item.delta))}` : undefined;
+            const srText = [textOf(item), valueText, showShare ? share : undefined, deltaText].filter(Boolean).join(", ");
+            const isOther = item.key === "__other";
+            const interactive = Boolean(item.href || (onItemClick && !isOther));
+            const inner = (_jsxs(_Fragment, { children: [variant === "filled" ? (_jsx("span", { "aria-hidden": true, className: cn("vui-bar-list-bar absolute inset-y-0 start-0 rounded-ui-sm", !barColor && "bg-accent-soft", isOther && "opacity-60"), style: { width, ...(barColor ? { background: `color-mix(in oklch, ${barColor} 24%, transparent)` } : null) } })) : null, _jsxs("span", { className: "relative flex min-w-0 flex-1 items-center gap-2 ps-2.5", children: [item.icon ? _jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>img]:size-4 [&>img]:rounded-[3px] [&>svg]:size-3.5 text-fg-muted", children: item.icon }) : null, _jsx("span", { className: cn("truncate", isOther ? "text-fg-muted" : "text-fg"), title: textOf(item), children: item.label })] }), variant === "track" ? (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-2.5 bottom-0.5 h-1 overflow-hidden rounded-full bg-track", children: _jsx("span", { className: cn("block h-full rounded-full", !barColor && "bg-accent-ink"), style: { width, ...(barColor ? { background: barColor } : null) } }) })) : null, _jsxs("span", { className: "relative flex shrink-0 items-center gap-3 pe-2.5 font-mono text-[12.5px] tabular", children: [item.delta !== undefined ? _jsx(BarListDelta, { value: item.delta, format: (v) => f.percent(Math.abs(v)) }) : null, _jsx("span", { className: "text-fg", children: valueText }), showShare ? _jsx("span", { className: "w-11 text-end text-fg-subtle", children: share }) : null] })] }));
+            const rowClass = cn("relative flex w-full items-center gap-3 rounded-ui-sm text-start", rowH, variant === "track" && "pb-1.5");
+            return (_jsxs("li", { className: "relative", children: [interactive ? null : _jsx("span", { className: "sr-only", children: srText }), item.href ? (_jsx("a", { href: item.href, "aria-label": srText, className: cn(rowClass, "transition-colors focus-ring hover:bg-hover"), children: inner })) : onItemClick && !isOther ? (_jsx("button", { type: "button", "aria-label": srText, onClick: () => onItemClick(item), className: cn(rowClass, "transition-colors focus-ring hover:bg-hover"), children: inner })) : (_jsx("div", { "aria-hidden": true, className: rowClass, children: inner }))] }, item.key));
+        }) }));
+});
+function BarListDelta({ value, format }) {
+    const up = value >= 0;
+    const Icon = up ? ArrowUpRight : ArrowDownRight;
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-0.5 text-[11.5px]", up ? "text-success" : "text-danger"), children: [_jsx(Icon, { "aria-hidden": true, className: "size-3" }), up ? "+" : "−", format(value)] }));
+}

package/dist/charts/chart-shell.d.ts

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { type LabelFn } from "../lib/labels.js";
+import type { Formatter } from "../format/core.js";
+import { patternDash, type ChartConfig, type ChartHeight, type ChartState, type FormatSpec, type ResolvedSeries } from "./utils.js";
+export declare const chartLabels: {
+    viewTable: string;
+    viewChart: string;
+    legend: string;
+    empty: string;
+    error: string;
+    retry: string;
+    loading: string;
+    refreshing: string;
+    total: string;
+    other: string;
+    otherCount: string;
+    share: string;
+    category: string;
+    value: string;
+    range: string;
+    seriesSummary: string;
+};
+export type ChartLabels = typeof chartLabels;
+export type ChartSkeletonKind = "area" | "line" | "bar" | "bar-horizontal" | "donut" | "grid";
+export interface ChartTableColumn {
+    key: string;
+    label: string;
+    format?: FormatSpec;
+    /** Row header column (first column). */
+    header?: boolean;
+}
+/** Overrides the generated data table (columns + rows). */
+export interface ChartTableSpec {
+    columns: ChartTableColumn[];
+    rows: Record<string, unknown>[];
+}
+type Row = Record<string, unknown>;
+export interface ChartContextValue {
+    config: ChartConfig;
+    series: ResolvedSeries[];
+    visibleSeries: ResolvedSeries[];
+    isHidden: (key: string) => boolean;
+    toggleSeries: (key: string) => void;
+    data: Row[];
+    x?: string;
+    xFormat?: FormatSpec;
+    yFormat?: FormatSpec;
+    /** Full value of a series ("$1,240.00"). */
+    formatSeries: (key: string, value: unknown) => string;
+    /** Compact value-axis tick ("$1.2K"). */
+    formatTick: (value: unknown, spec?: FormatSpec) => string;
+    /** x value; `long` for tooltip headers and tables ("Nov 1, 2026"). */
+    formatX: (value: unknown, long?: boolean) => string;
+    f: Formatter;
+    t: LabelFn<ChartLabels>;
+    /** `animate` resolved against `prefers-reduced-motion`. */
+    animate: boolean;
+    tooltipIndicator: "dot" | "line" | "dashed";
+    onPointClick?: (row: Row, seriesKey: string) => void;
+    height: number | undefined;
+    idPrefix: string;
+}
+/** Chart context: config, formatters and hidden series. Use inside `<Chart>`. */
+export declare function useChart(): ChartContextValue;
+/** Like `useChart`, but `null` outside a Chart. */
+export declare const useOptionalChart: () => ChartContextValue | null;
+export interface ChartProps<T extends object = Row> extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "children" | "onClick"> {
+    data: T[];
+    config: ChartConfig;
+    /** Category / time key of a row. */
+    x?: keyof T & string;
+    /** Header of the x column in the data table. Default: the x key, capitalised. */
+    xLabel?: string;
+    xFormat?: FormatSpec;
+    /** Value axis format. Default: the first series' format, compact. */
+    yFormat?: FormatSpec;
+    /** Plot height: presets sm 160 / md 260 / lg 360 or pixels. Set this or `aspect` (no layout shift). `"auto"` sizes to the content (DOM charts such as Heatmap). */
+    height?: ChartHeight | "auto";
+    /** Width / height ratio instead of a fixed height. */
+    aspect?: number;
+    /** Loading / refreshing / empty / error. Default: empty when `data` is empty, else ready. */
+    state?: ChartState;
+    /** Accessible name and table caption (not shown — put a visible title in the Card header). */
+    title: string;
+    /** Text alternative. Default: generated from the data (range, low, high, average). */
+    summary?: string | ((data: T[]) => string);
+    /** Shows a "View as table" switch. The table is always in the page for screen readers. */
+    tableToggle?: boolean;
+    /** Default `"top"` with 2+ series, `"none"` with one. */
+    legend?: "top" | "bottom" | "none";
+    tooltipIndicator?: "dot" | "line" | "dashed";
+    /** Transitions on data change. Always off under reduced motion. Default `true`. */
+    animate?: boolean;
+    /** Drill-down. Also makes the rows of the visible data table activatable. */
+    onPointClick?: (row: T, seriesKey: string) => void;
+    /** Controlled hidden series. */
+    hiddenSeries?: string[];
+    defaultHiddenSeries?: string[];
+    onHiddenSeriesChange?: (keys: string[]) => void;
+    labels?: Partial<ChartLabels>;
+    /** Replace the generated data table. */
+    table?: ChartTableSpec;
+    /** Content beside (or under) the plot — e.g. the Donut legend list. */
+    aside?: React.ReactNode;
+    asidePosition?: "side" | "bottom";
+    /** Shape of the loading skeleton. Default `"area"`. */
+    skeleton?: ChartSkeletonKind;
+    /** Extra controls at the end of the toolbar (range picker…). */
+    toolbar?: React.ReactNode;
+    /** Plot content: a ready chart's Recharts tree, `<ChartFrame>` with raw Recharts, or any SVG. */
+    children?: React.ReactNode;
+}
+/**
+ * The shell every chart shares: series → token colours (`--series-<key>`), locale formatting,
+ * an interactive legend, loading / refreshing / empty / error states, a generated text summary and
+ * a data-table alternative.
+ *
+ * ```tsx
+ * <Chart title="Visits" data={rows} config={{ visits: { label: "Visits" } }} x="date" height="md">
+ *   <ChartFrame><RAreaChart data={rows}>…</RAreaChart></ChartFrame>
+ * </Chart>
+ * ```
+ */
+export declare function Chart<T extends object>(props: ChartProps<T>): React.JSX.Element;
+export interface ChartLegendContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Keys to list. Default: every series of the config. */
+    keys?: string[];
+    /** Click toggles visibility. Default `true`. */
+    interactive?: boolean;
+    /** Swatch shape. Default: a line for line/area patterns, a dot otherwise. */
+    swatch?: "dot" | "line";
+}
+/** The legend: one toggle per series (`aria-pressed`). At least one series always stays visible. */
+export declare function ChartLegendContent({ keys, interactive, swatch, className, ...props }: ChartLegendContentProps): React.JSX.Element;
+/** Swatch used by tooltips and lists: `dot`, `line` or `dashed`. */
+export declare function ChartIndicator({ color, variant, pattern }: {
+    color: string;
+    variant?: "dot" | "line" | "dashed";
+    pattern?: ResolvedSeries["pattern"];
+}): React.JSX.Element;
+/** Chart-shaped loading placeholder (wave, bars, ring or grid) — never a spinner. */
+export declare function ChartSkeleton({ kind, label, className }: {
+    kind?: ChartSkeletonKind;
+    label?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Thin indeterminate bar on top of a chart that is refetching (old data stays, dimmed). */
+export declare function ChartRefreshBar({ label, className }: {
+    label?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Empty state that keeps the chart height: a quiet message and an optional action. */
+export declare function ChartEmpty({ message, action, className }: {
+    message?: React.ReactNode;
+    action?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** Error state: icon, message and a retry action. */
+export declare function ChartError({ message, onRetry, retryLabel, className }: {
+    message?: React.ReactNode;
+    onRetry?: () => void;
+    retryLabel?: string;
+    className?: string;
+}): React.JSX.Element;
+export interface ChartDataTableProps extends React.HTMLAttributes<HTMLDivElement> {
+    caption: string;
+    spec: ChartTableSpec;
+    /** Makes each row header a button (drill-down without a pointer). */
+    onRowClick?: (row: Record<string, unknown>) => void;
+}
+/** The accessible alternative of a chart: same numbers, same formatters, as a real `<table>`. */
+export declare function ChartDataTable({ caption, spec, onRowClick, className, ...props }: ChartDataTableProps): React.JSX.Element;
+export { patternDash };

package/dist/charts/chart-shell.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The Chart shell — context, legend, states, data-table alternative. No Recharts import here,
+// so SVG/DOM charts (Heatmap) can reuse it without loading the chart library.
+import * as React from "react";
+import { CircleAlert, Table2, ChartColumnBig } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useFormat } from "../lib/locale.js";
+import { useLabels } from "../lib/labels.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { useReducedMotion } from "../lib/use-reduced-motion.js";
+import { Button } from "../components/button.js";
+import { CHART_HEIGHTS, formatCategory, formatValue, patternDash, resolveChartColor, resolveSeries, seriesColor, seriesVarName, summarizeSeries, } from "./utils.js";
+export const chartLabels = {
+    viewTable: "View as table",
+    viewChart: "View as chart",
+    legend: "Series",
+    empty: "No data for this range",
+    error: "This chart couldn't load.",
+    retry: "Try again",
+    loading: "Loading chart…",
+    refreshing: "Updating…",
+    total: "Total",
+    other: "Other",
+    otherCount: "Other ({count})",
+    share: "Share",
+    category: "Category",
+    value: "Value",
+    range: "{from} – {to}.",
+    seriesSummary: "{label}: low {min} ({minAt}), high {max} ({maxAt}), average {avg}.",
+};
+const ChartContext = React.createContext(null);
+/** Chart context: config, formatters and hidden series. Use inside `<Chart>`. */
+export function useChart() {
+    const ctx = React.useContext(ChartContext);
+    if (!ctx)
+        throw new Error("useChart must be used inside <Chart>.");
+    return ctx;
+}
+/** Like `useChart`, but `null` outside a Chart. */
+export const useOptionalChart = () => React.useContext(ChartContext);
+const capitalise = (s) => (s ? s[0].toUpperCase() + s.slice(1) : s);
+/**
+ * The shell every chart shares: series → token colours (`--series-<key>`), locale formatting,
+ * an interactive legend, loading / refreshing / empty / error states, a generated text summary and
+ * a data-table alternative.
+ *
+ * ```tsx
+ * <Chart title="Visits" data={rows} config={{ visits: { label: "Visits" } }} x="date" height="md">
+ *   <ChartFrame><RAreaChart data={rows}>…</RAreaChart></ChartFrame>
+ * </Chart>
+ * ```
+ */
+export function Chart(props) {
+    const { data: dataProp, config, x, xLabel, xFormat, yFormat, height, aspect, state: stateProp, title, summary, tableToggle, legend, tooltipIndicator = "dot", animate = true, onPointClick, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, labels, table, aside, asidePosition = "side", skeleton = "area", toolbar, className, style, children, ...rest } = props;
+    const data = dataProp;
+    const f = useFormat();
+    const t = useLabels("chart", chartLabels, labels);
+    const reduced = useReducedMotion();
+    const rawId = React.useId();
+    const idPrefix = `vc${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
+    const series = React.useMemo(() => resolveSeries(config), [config]);
+    const [hidden, setHidden] = useControllableState({
+        value: hiddenSeries,
+        defaultValue: () => defaultHiddenSeries ?? series.filter((s) => s.hidden).map((s) => s.key),
+        onChange: onHiddenSeriesChange,
+        name: "Chart",
+    });
+    const hiddenSet = React.useMemo(() => new Set(hidden), [hidden]);
+    const visibleSeries = React.useMemo(() => series.filter((s) => !hiddenSet.has(s.key)), [series, hiddenSet]);
+    const toggleSeries = React.useCallback((key) => setHidden((prev) => {
+        if (prev.includes(key))
+            return prev.filter((k) => k !== key);
+        // at least one series stays visible
+        if (series.filter((s) => !prev.includes(s.key)).length <= 1)
+            return prev;
+        return [...prev, key];
+    }), [setHidden, series]);
+    const status = stateProp ?? (data.length === 0 ? { status: "empty" } : { status: "ready" });
+    const [showTable, setShowTable] = React.useState(false);
+    const seriesFormat = React.useCallback((key) => config[key]?.format, [config]);
+    const ctx = React.useMemo(() => ({
+        config,
+        series,
+        visibleSeries,
+        isHidden: (k) => hiddenSet.has(k),
+        toggleSeries,
+        data,
+        x,
+        xFormat,
+        yFormat: yFormat ?? series[0]?.format,
+        formatSeries: (key, v) => formatValue(f, seriesFormat(key), v),
+        formatTick: (v, spec) => formatValue(f, spec ?? yFormat ?? series[0]?.format, v, { compact: true }),
+        formatX: (v, long) => formatCategory(f, xFormat, v, long),
+        f,
+        t,
+        animate: animate && !reduced,
+        tooltipIndicator,
+        onPointClick: onPointClick,
+        height: height === "auto" ? undefined : typeof height === "string" ? CHART_HEIGHTS[height] : height,
+        idPrefix,
+    }), [config, series, visibleSeries, hiddenSet, toggleSeries, data, x, xFormat, yFormat, f, t, animate, reduced, tooltipIndicator, onPointClick, height, idPrefix, seriesFormat]);
+    const vars = React.useMemo(() => {
+        const out = {};
+        for (const s of series)
+            out[seriesVarName(s.key)] = resolveChartColor(s.color);
+        return out;
+    }, [series]);
+    const summaryText = React.useMemo(() => {
+        if (typeof summary === "function")
+            return summary(dataProp);
+        if (typeof summary === "string")
+            return summary;
+        return summarizeSeries({ f, rows: data, series: visibleSeries, x, xFormat, templates: { range: t.labels.range, series: t.labels.seriesSummary } });
+    }, [summary, dataProp, data, f, visibleSeries, x, xFormat, t]);
+    const tableSpec = React.useMemo(() => table ?? {
+        columns: [
+            ...(x ? [{ key: x, label: xLabel ?? capitalise(x), header: true, format: xFormat }] : []),
+            ...series.map((s) => ({ key: s.key, label: s.label, format: s.format })),
+        ],
+        rows: data,
+    }, [table, x, xLabel, xFormat, series, data]);
+    const legendPos = legend ?? (series.length > 1 ? "top" : "none");
+    const summaryId = `${idPrefix}-summary`;
+    const plotHeight = ctx.height;
+    const busy = status.status === "loading" || status.status === "refreshing";
+    const showToolbar = legendPos === "top" || tableToggle || toolbar;
+    let body;
+    if (status.status === "loading")
+        body = _jsx(ChartSkeleton, { kind: skeleton, label: t("loading") });
+    else if (status.status === "empty")
+        body = _jsx(ChartEmpty, { message: status.message ?? t("empty"), action: status.action });
+    else if (status.status === "error")
+        body = _jsx(ChartError, { message: status.message ?? t("error"), onRetry: status.onRetry, retryLabel: t("retry") });
+    else if (showTable)
+        body = _jsx(ChartDataTable, { caption: title, spec: tableSpec, onRowClick: onPointClick ? (row) => onPointClick(row, visibleSeries[0]?.key ?? "") : undefined, className: cn("overflow-auto", height === "auto" ? "max-h-96" : "h-full") });
+    else
+        body = (_jsxs(_Fragment, { children: [status.status === "refreshing" ? _jsx(ChartRefreshBar, { label: t("refreshing") }) : null, _jsx("div", { className: cn("size-full transition-opacity duration-200", status.status === "refreshing" && "opacity-60"), children: children })] }));
+    const plot = (_jsx("div", { "data-slot": "chart-body", "data-state": status.status, "aria-busy": busy || undefined, className: cn("vui-chart-body relative min-w-0", aside && asidePosition === "side" ? "flex-1" : "w-full"), style: height === "auto"
+            ? status.status === "ready" || status.status === "refreshing"
+                ? undefined
+                : { minHeight: CHART_HEIGHTS.sm }
+            : plotHeight !== undefined
+                ? { height: plotHeight }
+                : aspect
+                    ? { aspectRatio: String(aspect) }
+                    : { height: CHART_HEIGHTS.md }, children: body }));
+    return (_jsx(ChartContext.Provider, { value: ctx, children: _jsxs("figure", { "data-slot": "chart", "aria-label": title, "aria-describedby": summaryText ? summaryId : undefined, className: cn("vui-chart m-0 grid min-w-0 gap-3", className), style: { ...vars, ...style }, ...rest, children: [showToolbar ? (_jsxs("div", { "data-slot": "chart-toolbar", className: "flex min-h-7 flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [legendPos === "top" ? _jsx(ChartLegendContent, {}) : _jsx("span", {}), tableToggle || toolbar ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [toolbar, tableToggle ? (_jsxs(Button, { size: "xs", variant: "ghost", "aria-pressed": showTable, onClick: () => setShowTable((v) => !v), className: "text-fg-muted", children: [showTable ? _jsx(ChartColumnBig, { className: "size-3.5" }) : _jsx(Table2, { className: "size-3.5" }), showTable ? t("viewChart") : t("viewTable")] })) : null] })) : null] })) : null, aside ? (_jsx("div", { className: cn("@container"), children: _jsxs("div", { className: cn("flex flex-col gap-5", asidePosition === "side" && "@md:flex-row @md:items-center"), children: [plot, _jsx("div", { "data-slot": "chart-aside", className: cn("min-w-0", asidePosition === "side" && "@md:w-[min(46%,18rem)]"), children: aside })] }) })) : (plot), legendPos === "bottom" ? _jsx(ChartLegendContent, { className: "justify-center" }) : null, summaryText ? (_jsx("p", { id: summaryId, className: "sr-only", children: summaryText })) : null, !showTable && status.status !== "loading" && status.status !== "error" && tableSpec.rows.length ? _jsx(ChartDataTable, { caption: title, spec: tableSpec, className: "sr-only" }) : null] }) }));
+}
+/** The legend: one toggle per series (`aria-pressed`). At least one series always stays visible. */
+export function ChartLegendContent({ keys, interactive = true, swatch, className, ...props }) {
+    const { series, isHidden, toggleSeries, visibleSeries, t } = useChart();
+    const items = keys ? series.filter((s) => keys.includes(s.key)) : series;
+    return (_jsx("div", { role: "group", "aria-label": t("legend"), "data-slot": "chart-legend", className: cn("flex flex-wrap items-center gap-x-1 gap-y-1", className), ...props, children: items.map((s) => {
+            const hidden = isHidden(s.key);
+            const locked = !hidden && visibleSeries.length <= 1;
+            const Icon = s.icon;
+            const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx(LegendSwatch, { color: seriesColor(s.key), pattern: s.pattern, shape: swatch ?? (s.pattern !== "solid" ? "line" : "dot") }), _jsx("span", { className: cn(hidden && "line-through decoration-fg-subtle"), children: s.label })] }));
+            if (!interactive)
+                return (_jsx("span", { className: "inline-flex items-center gap-1.5 px-1.5 text-[12.5px] text-fg-muted", children: content }, s.key));
+            return (_jsx("button", { type: "button", "aria-pressed": !hidden, "aria-disabled": locked || undefined, onClick: () => toggleSeries(s.key), className: cn("inline-flex h-7 items-center gap-1.5 rounded-ui-sm px-2 text-[12.5px] text-fg-muted transition-[color,background-color,opacity] focus-ring hover:bg-hover hover:text-fg", hidden && "opacity-55", locked && "cursor-default hover:bg-transparent"), children: content }, s.key));
+        }) }));
+}
+function LegendSwatch({ color, pattern, shape }) {
+    if (shape === "line")
+        return (_jsx("svg", { width: "14", height: "8", viewBox: "0 0 14 8", "aria-hidden": true, className: "shrink-0", children: _jsx("line", { x1: "1", y1: "4", x2: "13", y2: "4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeDasharray: pattern === "dashed" ? "4 3" : pattern === "dotted" ? "0.5 3" : undefined }) }));
+    return _jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[3px]", style: { background: color } });
+}
+/** Swatch used by tooltips and lists: `dot`, `line` or `dashed`. */
+export function ChartIndicator({ color, variant = "dot", pattern }) {
+    if (variant === "line" || variant === "dashed")
+        return (_jsx("svg", { width: "12", height: "10", viewBox: "0 0 12 10", "aria-hidden": true, className: "shrink-0", children: _jsx("line", { x1: "1", y1: "5", x2: "11", y2: "5", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeDasharray: variant === "dashed" || pattern === "dashed" ? "3 2.5" : pattern === "dotted" ? "0.5 3" : undefined }) }));
+    return _jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[3px]", style: { background: color } });
+}
+/* ------------------------------------------------------------------ */
+/* States                                                              */
+/* ------------------------------------------------------------------ */
+const BAR_HEIGHTS = [42, 64, 50, 78, 58, 88, 70, 54, 82, 66, 92, 60];
+/** Chart-shaped loading placeholder (wave, bars, ring or grid) — never a spinner. */
+export function ChartSkeleton({ kind = "area", label, className }) {
+    return (_jsxs("div", { "data-slot": "chart-skeleton", "data-kind": kind, className: cn("vui-chart-skeleton absolute inset-0 flex", className), children: [label ? (_jsx("span", { role: "status", className: "sr-only", children: label })) : null, kind === "bar" ? (_jsx("div", { "aria-hidden": true, className: "flex size-full items-end gap-[3%] ps-10 pb-6", children: BAR_HEIGHTS.map((h, i) => (_jsx("div", { className: "ui-shimmer flex-1 rounded-t-[4px] bg-skeleton", style: { height: `${h}%` } }, i))) })) : kind === "bar-horizontal" ? (_jsx("div", { "aria-hidden": true, className: "flex size-full flex-col justify-around gap-2 py-2 ps-20", children: [92, 76, 64, 50, 38, 26].map((w, i) => (_jsx("div", { className: "ui-shimmer h-[9%] min-h-2 rounded-e-[4px] bg-skeleton", style: { width: `${w}%` } }, i))) })) : kind === "donut" ? (_jsx("div", { "aria-hidden": true, className: "grid size-full place-items-center", children: _jsx("div", { className: "vui-chart-skeleton-ring ui-shimmer aspect-square h-[82%] max-h-full rounded-full bg-skeleton" }) })) : kind === "grid" ? (_jsx("div", { "aria-hidden": true, className: "vui-chart-skeleton-grid ui-shimmer size-full rounded-ui-sm" })) : (_jsx("div", { "aria-hidden": true, className: "flex size-full flex-col ps-10 pb-6", children: _jsx("div", { className: cn("ui-shimmer mt-auto h-[78%] w-full bg-skeleton", kind === "line" ? "vui-chart-skeleton-line" : "vui-chart-skeleton-wave") }) }))] }));
+}
+/** Thin indeterminate bar on top of a chart that is refetching (old data stays, dimmed). */
+export function ChartRefreshBar({ label, className }) {
+    return (_jsxs("div", { "data-slot": "chart-refresh", className: cn("absolute inset-x-0 top-0 z-10 h-0.5 overflow-hidden rounded-full bg-track", className), children: [label ? (_jsx("span", { role: "status", className: "sr-only", children: label })) : null, _jsx("div", { "aria-hidden": true, className: "vui-chart-refresh-bar h-full w-2/5 rounded-full bg-accent-ink" })] }));
+}
+/** Empty state that keeps the chart height: a quiet message and an optional action. */
+export function ChartEmpty({ message, action, className }) {
+    return (_jsxs("div", { "data-slot": "chart-empty", className: cn("absolute inset-0 grid place-items-center", className), children: [_jsx("div", { "aria-hidden": true, className: "vui-chart-empty-grid absolute inset-0" }), _jsxs("div", { className: "relative flex flex-col items-center gap-2.5 px-6 text-center", children: [_jsx("p", { className: "text-[13px] text-fg-muted", children: message }), action] })] }));
+}
+/** Error state: icon, message and a retry action. */
+export function ChartError({ message, onRetry, retryLabel = "Try again", className }) {
+    return (_jsx("div", { "data-slot": "chart-error", role: "alert", className: cn("absolute inset-0 grid place-items-center", className), children: _jsxs("div", { className: "flex flex-col items-center gap-2.5 px-6 text-center", children: [_jsx(CircleAlert, { "aria-hidden": true, className: "size-5 text-danger" }), _jsx("p", { className: "max-w-xs text-[13px] text-fg-muted", children: message }), onRetry ? (_jsx(Button, { size: "sm", onClick: onRetry, children: retryLabel })) : null] }) }));
+}
+/** The accessible alternative of a chart: same numbers, same formatters, as a real `<table>`. */
+export function ChartDataTable({ caption, spec, onRowClick, className, ...props }) {
+    const f = useFormat();
+    return (_jsx("div", { "data-slot": "chart-table", className: cn("min-w-0", className), ...props, children: _jsxs("table", { className: "w-full border-collapse text-[13px]", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: spec.columns.map((c, i) => (_jsx("th", { scope: "col", className: cn("sticky top-0 z-[1] border-b border-line bg-[var(--chart-tooltip)] px-3 py-2 text-[12px] font-medium whitespace-nowrap text-fg-muted", i === 0 ? "text-start" : "text-end"), children: c.label }, c.key))) }) }), _jsx("tbody", { children: spec.rows.map((row, ri) => (_jsx("tr", { className: "border-b border-line last:border-b-0", children: spec.columns.map((c, ci) => {
+                            const text = c.header ? formatCategory(f, c.format, row[c.key], true) : formatValue(f, c.format, row[c.key]);
+                            if (ci === 0 || c.header)
+                                return (_jsx("th", { scope: "row", className: "px-3 py-1.5 text-start font-normal whitespace-nowrap text-fg", children: onRowClick ? (_jsx("button", { type: "button", onClick: () => onRowClick(row), className: "rounded-ui-sm text-start text-accent-ink underline-offset-4 focus-ring hover:underline", children: text })) : (text) }, c.key));
+                            return (_jsx("td", { className: "px-3 py-1.5 text-end font-mono text-[12.5px] whitespace-nowrap text-fg tabular", children: text }, c.key));
+                        }) }, ri))) })] }) }));
+}
+export { patternDash };