@vectara/vectara-ui 19.0.0 → 19.1.0

package/lib/components/chart/BarChart.d.ts

@@ -0,0 +1,20 @@
+import { PatchColor } from "../patch/VuiPatch";
+export type BarChartSeries = {
+    dataKey: string;
+    name?: string;
+    color?: PatchColor;
+};
+type Props = {
+    data: Array<Record<string, string | number>>;
+    categoryKey: string;
+    series: BarChartSeries[];
+    orientation?: "columns" | "bars";
+    stacked?: boolean;
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    "data-testid"?: string;
+};
+export declare const VuiBarChart: ({ data, categoryKey, series, orientation, stacked, height, showLegend, showGrid, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chart/BarChart.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bar, CartesianGrid, BarChart as RechartsBarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { getChartColor, getChartColorByIndex } from "./palette";
+import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
+export const VuiBarChart = (_a) => {
+    var { data, categoryKey, series, orientation = "columns", stacked = false, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "orientation", "stacked", "height", "showLegend", "showGrid", "showTooltip"]);
+    const isHorizontal = orientation === "bars";
+    const categoryAxis = (_jsx(_Fragment, { children: isHorizontal ? (_jsx(YAxis, { type: "category", dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })) : (_jsx(XAxis, { type: "category", dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })) }));
+    const valueAxis = isHorizontal ? (_jsx(XAxis, { type: "number", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })) : (_jsx(YAxis, { type: "number", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }));
+    return (_jsx("div", Object.assign({ className: "vuiBarChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsBarChart, Object.assign({ data: data, layout: isHorizontal ? "vertical" : "horizontal" }, { children: [showGrid && (_jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: isHorizontal, horizontal: !isHorizontal })), categoryAxis, valueAxis, showTooltip && _jsx(Tooltip, Object.assign({ cursor: { fill: "var(--vui-color-light-shade)" } }, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
+                        var _a;
+                        return (_jsx(Bar, { dataKey: s.dataKey, name: (_a = s.name) !== null && _a !== void 0 ? _a : s.dataKey, fill: s.color ? getChartColor(s.color) : getChartColorByIndex(index), stackId: stacked ? "stack" : undefined, radius: isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0], 
+                            // A thin stroke separates touching segments regardless of fill,
+                            // a redundant cue that aids color-blind readers.
+                            stroke: "var(--vui-color-empty-shade)", strokeWidth: 1 }, s.dataKey));
+                    })] })) })) })));
+};

package/lib/components/chart/ComposedChart.d.ts

@@ -0,0 +1,21 @@
+import { PatchColor } from "../patch/VuiPatch";
+export type ComposedSeries = {
+    dataKey: string;
+    type: "bar" | "line";
+    name?: string;
+    color?: PatchColor;
+    axis?: "left" | "right";
+    curved?: boolean;
+};
+type Props = {
+    data: Array<Record<string, string | number>>;
+    categoryKey: string;
+    series: ComposedSeries[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    "data-testid"?: string;
+};
+export declare const VuiComposedChart: ({ data, categoryKey, series, height, showLegend, showGrid, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chart/ComposedChart.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bar, CartesianGrid, ComposedChart as RechartsComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { getChartColor, getChartColorByIndex } from "./palette";
+import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
+export const VuiComposedChart = (_a) => {
+    var { data, categoryKey, series, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "height", "showLegend", "showGrid", "showTooltip"]);
+    const hasRightAxis = series.some((s) => s.axis === "right");
+    return (_jsx("div", Object.assign({ className: "vuiComposedChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsComposedChart, Object.assign({ data: data }, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { yAxisId: "left", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), hasRightAxis && (_jsx(YAxis, { yAxisId: "right", orientation: "right", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })), showTooltip && _jsx(Tooltip, Object.assign({ cursor: { fill: "var(--vui-color-light-shade)" } }, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
+                        var _a, _b;
+                        const color = s.color ? getChartColor(s.color) : getChartColorByIndex(index);
+                        const yAxisId = (_a = s.axis) !== null && _a !== void 0 ? _a : "left";
+                        const name = (_b = s.name) !== null && _b !== void 0 ? _b : s.dataKey;
+                        if (s.type === "bar") {
+                            return (_jsx(Bar, { yAxisId: yAxisId, dataKey: s.dataKey, name: name, fill: color, radius: [4, 4, 0, 0], stroke: "var(--vui-color-empty-shade)", strokeWidth: 1 }, s.dataKey));
+                        }
+                        return (_jsx(Line, { yAxisId: yAxisId, type: s.curved ? "monotone" : "linear", dataKey: s.dataKey, name: name, stroke: color, strokeWidth: 2, dot: { r: 3, strokeWidth: 0, fill: color }, activeDot: { r: 5 } }, s.dataKey));
+                    })] })) })) })));
+};

package/lib/components/chart/LineChart.d.ts

@@ -0,0 +1,22 @@
+import { PatchColor } from "../patch/VuiPatch";
+export type LineChartSeries = {
+    dataKey: string;
+    name?: string;
+    color?: PatchColor;
+};
+export type LineChartVariant = "line" | "area" | "stacked-area";
+type Props = {
+    data: Array<Record<string, string | number>>;
+    categoryKey: string;
+    series: LineChartSeries[];
+    variant?: LineChartVariant;
+    curved?: boolean;
+    showPoints?: boolean;
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    "data-testid"?: string;
+};
+export declare const VuiLineChart: ({ data, categoryKey, series, variant, curved, showPoints, height, showLegend, showGrid, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chart/LineChart.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Line, LineChart as RechartsLineChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { getChartColor, getChartColorByIndex } from "./palette";
+import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
+export const VuiLineChart = (_a) => {
+    var { data, categoryKey, series, variant = "line", curved = false, showPoints = true, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "variant", "curved", "showPoints", "height", "showLegend", "showGrid", "showTooltip"]);
+    const isArea = variant === "area" || variant === "stacked-area";
+    const isStacked = variant === "stacked-area";
+    const axes = (_jsxs(_Fragment, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), showTooltip && _jsx(Tooltip, Object.assign({ cursor: { stroke: "var(--vui-color-border-medium)" } }, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps))] }));
+    // Shared marker props keep lines and areas visually identical apart from the fill.
+    const markProps = (s, index) => {
+        var _a;
+        const color = s.color ? getChartColor(s.color) : getChartColorByIndex(index);
+        return {
+            key: s.dataKey,
+            type: curved ? "monotone" : "linear",
+            dataKey: s.dataKey,
+            name: (_a = s.name) !== null && _a !== void 0 ? _a : s.dataKey,
+            stroke: color,
+            strokeWidth: 2,
+            dot: showPoints ? { r: 3, strokeWidth: 0, fill: color } : false,
+            activeDot: { r: 5 }
+        };
+    };
+    return (_jsx("div", Object.assign({ className: "vuiLineChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: isArea ? (_jsxs(RechartsAreaChart, Object.assign({ data: data }, { children: [axes, series.map((s, index) => {
+                        const props = markProps(s, index);
+                        // Stacked areas tile rather than overlap, so they take a more solid
+                        // fill; overlapping areas stay translucent to remain readable.
+                        return (_jsx(Area, Object.assign({}, props, { fill: props.stroke, fillOpacity: isStacked ? 0.85 : 0.2, stackId: isStacked ? "stack" : undefined })));
+                    })] }))) : (_jsxs(RechartsLineChart, Object.assign({ data: data }, { children: [axes, series.map((s, index) => (_jsx(Line, Object.assign({}, markProps(s, index)))))] }))) })) })));
+};

package/lib/components/chart/PieChart.d.ts

@@ -0,0 +1,15 @@
+import { PatchColor } from "../patch/VuiPatch";
+type Props = {
+    data: Array<Record<string, string | number>>;
+    categoryKey: string;
+    valueKey: string;
+    donut?: boolean;
+    colors?: PatchColor[];
+    showLabels?: boolean;
+    height?: number;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    "data-testid"?: string;
+};
+export declare const VuiPieChart: ({ data, categoryKey, valueKey, donut, colors, showLabels, height, showLegend, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chart/PieChart.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cell, Legend, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Tooltip } from "recharts";
+import { getChartColor, getChartColorByIndex } from "./palette";
+import { chartLegendProps, chartTooltipProps } from "./chartTheme";
+const RADIAN = Math.PI / 180;
+// Render a slice's name and percentage just outside its arc, anchored so the
+// text reads away from the center.
+const renderSliceLabel = ({ cx, cy, midAngle, outerRadius, percent, name }) => {
+    const centerX = Number(cx);
+    const centerY = Number(cy);
+    const angle = Number(midAngle);
+    const radius = Number(outerRadius) + 18;
+    const x = centerX + radius * Math.cos(-angle * RADIAN);
+    const y = centerY + radius * Math.sin(-angle * RADIAN);
+    return (_jsx("text", Object.assign({ x: x, y: y, fill: "var(--vui-color-text)", fontSize: 12, textAnchor: x > centerX ? "start" : "end", dominantBaseline: "central" }, { children: `${name} (${Math.round(Number(percent) * 100)}%)` })));
+};
+export const VuiPieChart = (_a) => {
+    var { data, categoryKey, valueKey, donut = false, colors, showLabels = true, height = 320, showLegend = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "valueKey", "donut", "colors", "showLabels", "height", "showLegend", "showTooltip"]);
+    return (_jsx("div", Object.assign({ className: "vuiPieChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsPieChart, { children: [_jsx(Pie, Object.assign({ data: data, dataKey: valueKey, nameKey: categoryKey, innerRadius: donut ? "55%" : 0, 
+                        // Leave room outside the arc for labels when they're shown.
+                        outerRadius: showLabels ? "70%" : "80%", paddingAngle: 1, label: showLabels ? renderSliceLabel : undefined, labelLine: showLabels ? { stroke: "var(--vui-color-border-medium)" } : false, 
+                        // A stroke between slices separates adjacent colors, a redundant cue
+                        // that aids color-blind readers.
+                        stroke: "var(--vui-color-empty-shade)", strokeWidth: 2 }, { children: data.map((datum, index) => (_jsx(Cell, { fill: (colors === null || colors === void 0 ? void 0 : colors[index]) ? getChartColor(colors[index]) : getChartColorByIndex(index) }, String(datum[categoryKey])))) })), showTooltip && _jsx(Tooltip, Object.assign({}, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps))] }) })) })));
+};

package/lib/components/chart/ScatterChart.d.ts

@@ -0,0 +1,18 @@
+import { PatchColor } from "../patch/VuiPatch";
+export type ScatterSeries = {
+    data: Array<Record<string, number>>;
+    name?: string;
+    color?: PatchColor;
+};
+type Props = {
+    series: ScatterSeries[];
+    xKey?: string;
+    yKey?: string;
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    "data-testid"?: string;
+};
+export declare const VuiScatterChart: ({ series, xKey, yKey, height, showLegend, showGrid, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chart/ScatterChart.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CartesianGrid, Legend, ResponsiveContainer, Scatter, ScatterChart as RechartsScatterChart, Tooltip, XAxis, YAxis } from "recharts";
+import { getChartColor, getChartColorByIndex } from "./palette";
+import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
+const DEFAULT_RADIUS = 4;
+const ACTIVE_RADIUS = 7;
+export const VuiScatterChart = (_a) => {
+    var { series, xKey = "x", yKey = "y", height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true } = _a, rest = __rest(_a, ["series", "xKey", "yKey", "height", "showLegend", "showGrid", "showTooltip"]);
+    // Recharts fires activeShape for the active point of every series at the
+    // shared hover index, which would light up points across colors at once.
+    // Tracking the hovered series lets only that series emphasize its point;
+    // the others render an ordinary dot.
+    const [hoveredSeries, setHoveredSeries] = useState(null);
+    return (_jsx("div", Object.assign({ className: "vuiScatterChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsScatterChart, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)" }), _jsx(XAxis, { type: "number", dataKey: xKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { type: "number", dataKey: yKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), showTooltip && (_jsx(Tooltip, Object.assign({ cursor: { strokeDasharray: "3 3", stroke: "var(--vui-color-border-medium)" } }, chartTooltipProps))), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
+                        var _a;
+                        const color = s.color ? getChartColor(s.color) : getChartColorByIndex(index);
+                        // Only the hovered series rings its active point; ring it with the
+                        // surface color so it lifts above the points it overlaps.
+                        const renderActivePoint = ({ cx, cy }) => hoveredSeries === index ? (_jsx("circle", { cx: cx, cy: cy, r: ACTIVE_RADIUS, fill: color, stroke: "var(--vui-color-empty-shade)", strokeWidth: 2 })) : (_jsx("circle", { cx: cx, cy: cy, r: DEFAULT_RADIUS, fill: color }));
+                        return (_jsx(Scatter, { name: s.name, data: s.data, fill: color, activeShape: renderActivePoint, onMouseEnter: () => setHoveredSeries(index), onMouseLeave: () => setHoveredSeries(null) }, (_a = s.name) !== null && _a !== void 0 ? _a : index));
+                    })] }) })) })));
+};

package/lib/components/chart/Sparkline.d.ts

@@ -0,0 +1,13 @@
+import { PatchColor } from "../patch/VuiPatch";
+type Props = {
+    data: Array<Record<string, string | number>>;
+    dataKey: string;
+    variant?: "line" | "bar";
+    color?: PatchColor;
+    curved?: boolean;
+    width?: number;
+    height?: number;
+    "data-testid"?: string;
+};
+export declare const VuiSparkline: ({ data, dataKey, variant, color, curved, width, height, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chart/Sparkline.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Bar, BarChart, Line, LineChart } from "recharts";
+import { getChartColor, getChartColorByIndex } from "./palette";
+// A compact, axis-free trend meant to sit inline beside a number or in a table
+// cell. It renders at a fixed size rather than filling its container.
+export const VuiSparkline = (_a) => {
+    var { data, dataKey, variant = "line", color, curved = true, width = 120, height = 32 } = _a, rest = __rest(_a, ["data", "dataKey", "variant", "color", "curved", "width", "height"]);
+    const fill = color ? getChartColor(color) : getChartColorByIndex(0);
+    return (_jsx("div", Object.assign({ className: "vuiSparkline" }, rest, { children: variant === "bar" ? (_jsx(BarChart, Object.assign({ width: width, height: height, data: data, margin: { top: 1, right: 0, bottom: 1, left: 0 } }, { children: _jsx(Bar, { dataKey: dataKey, fill: fill, radius: 1, isAnimationActive: false }) }))) : (_jsx(LineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 2, right: 2, bottom: 2, left: 2 } }, { children: _jsx(Line, { type: curved ? "monotone" : "linear", dataKey: dataKey, stroke: fill, strokeWidth: 1.5, dot: false, 
+                // No axes or tooltip means a hover dot conveys nothing, so suppress it.
+                activeDot: false, isAnimationActive: false }) }))) })));
+};

package/lib/components/chart/TreeMap.d.ts

@@ -0,0 +1,13 @@
+import { PatchColor } from "../patch/VuiPatch";
+type Props = {
+    data: Array<Record<string, unknown>>;
+    categoryKey: string;
+    valueKey: string;
+    childrenKey?: string;
+    colors?: PatchColor[];
+    height?: number;
+    showTooltip?: boolean;
+    "data-testid"?: string;
+};
+export declare const VuiTreeMap: ({ data, categoryKey, valueKey, childrenKey, colors, height, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chart/TreeMap.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResponsiveContainer, Tooltip, Treemap } from "recharts";
+import { getChartColor, getChartColorByIndex } from "./palette";
+import { chartTooltipProps } from "./chartTheme";
+// Leaves render as palette-colored cells separated by a stroke; parent blocks
+// render as an outline that delineates the group its children fill.
+const TreeMapCell = ({ x = 0, y = 0, width = 0, height = 0, depth = 0, name = "", fill = "", leafDepth = 1 }) => {
+    if (depth === leafDepth) {
+        return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: fill, stroke: "var(--vui-color-empty-shade)", strokeWidth: 1.5 }), width > 50 && height > 22 && (_jsx("text", Object.assign({ x: x + 6, y: y + 16, fill: "var(--vui-color-empty-shade)", fontSize: 11, fontWeight: 600 }, { children: name })))] }));
+    }
+    if (depth >= 1) {
+        return _jsx("rect", { x: x, y: y, width: width, height: height, fill: "none", stroke: "var(--vui-color-dark-shade)", strokeWidth: 2 });
+    }
+    return null;
+};
+export const VuiTreeMap = (_a) => {
+    var { data, categoryKey, valueKey, childrenKey, colors, height = 320, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "valueKey", "childrenKey", "colors", "height", "showTooltip"]);
+    const colorFor = (index) => ((colors === null || colors === void 0 ? void 0 : colors[index]) ? getChartColor(colors[index]) : getChartColorByIndex(index));
+    // Build the shape Recharts expects, embedding each node's fill so the content
+    // element can color it. Children of a block share the block's hue.
+    const treeData = data.map((datum, index) => {
+        const color = colorFor(index);
+        const name = String(datum[categoryKey]);
+        const children = childrenKey ? datum[childrenKey] : undefined;
+        if (children) {
+            return {
+                name,
+                fill: color,
+                children: children.map((child) => ({
+                    name: String(child[categoryKey]),
+                    value: Number(child[valueKey]),
+                    fill: color
+                }))
+            };
+        }
+        return { name, value: Number(datum[valueKey]), fill: color };
+    });
+    const leafDepth = childrenKey ? 2 : 1;
+    return (_jsx("div", Object.assign({ className: "vuiTreeMap" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsx(Treemap, Object.assign({ data: treeData, dataKey: "value", isAnimationActive: false, content: _jsx(TreeMapCell, { leafDepth: leafDepth }) }, { children: showTooltip && _jsx(Tooltip, Object.assign({}, chartTooltipProps)) })) })) })));
+};

package/lib/components/chart/_index.scss

@@ -0,0 +1,19 @@
+.vuiBarChart,
+.vuiLineChart,
+.vuiPieChart,
+.vuiScatterChart,
+.vuiComposedChart,
+.vuiTreeMap {
+  width: 100%;
+
+  // Soften Recharts' default legend spacing to match the design system rhythm.
+  .recharts-legend-item {
+    margin-right: $sizeM !important;
+  }
+}
+
+// Sparklines render at a fixed size and sit inline beside other content.
+.vuiSparkline {
+  display: inline-block;
+  line-height: 0;
+}

package/lib/components/chart/chartTheme.d.ts

@@ -0,0 +1,21 @@
+export declare const chartTickStyle: {
+    fill: string;
+    fontSize: number;
+};
+export declare const chartAxisLineStyle: {
+    stroke: string;
+};
+export declare const chartTooltipProps: {
+    contentStyle: {
+        backgroundColor: string;
+        border: string;
+        borderRadius: number;
+        color: string;
+    };
+};
+export declare const chartLegendProps: {
+    wrapperStyle: {
+        fontSize: number;
+        color: string;
+    };
+};

package/lib/components/chart/chartTheme.js

@@ -0,0 +1,13 @@
+// Shared styling for chart primitives, wired to theme variables so every chart
+// type renders with the same axes, tooltip, and legend treatment.
+export const chartTickStyle = { fill: "var(--vui-color-label)", fontSize: 12 };
+export const chartAxisLineStyle = { stroke: "var(--vui-color-border-medium)" };
+export const chartTooltipProps = {
+    contentStyle: {
+        backgroundColor: "var(--vui-color-empty-shade)",
+        border: "1px solid var(--vui-color-border-light)",
+        borderRadius: 6,
+        color: "var(--vui-color-text)"
+    }
+};
+export const chartLegendProps = { wrapperStyle: { fontSize: 12, color: "var(--vui-color-label)" } };

package/lib/components/chart/palette.d.ts

@@ -0,0 +1,5 @@
+import { PatchColor } from "../patch/VuiPatch";
+export declare const CHART_COLOR_COUNT = 8;
+export declare const CHART_PALETTE: string[];
+export declare const getChartColorByIndex: (index: number) => string;
+export declare const getChartColor: (color: PatchColor) => string;

package/lib/components/chart/palette.js

@@ -0,0 +1,29 @@
+// The number of distinct colors in the chart palette. Past this many series,
+// no palette stays reliably distinguishable, so callers should group or facet.
+export const CHART_COLOR_COUNT = 8;
+// The ordered chart palette as CSS variable references, so series colors stay
+// reactive to the active theme. These are tuned for series discrimination
+// (hue + luminance contrast, colorblind-safe), distinct from the categorical
+// chip hues. See the chart color tokens in Theme.ts.
+export const CHART_PALETTE = Array.from({ length: CHART_COLOR_COUNT }, (_, index) => `var(--vui-chart-${index + 1})`);
+// When the series count exceeds the palette, each wrap shifts lightness rather
+// than repeating the same color. Lightness is a partially colorblind-safe
+// channel, so a base hue and its darker/lighter variants stay distinguishable.
+// This lets charts degrade gracefully past eight series — though it does not
+// make a chart with that many categories genuinely readable; prefer grouping or
+// a bar chart instead.
+const tierTransforms = [
+    (color) => color,
+    (color) => `color-mix(in srgb, ${color}, black 22%)`,
+    (color) => `color-mix(in srgb, ${color}, white 32%)`
+];
+// Pick a series color by index. The base hue cycles every CHART_COLOR_COUNT
+// entries; the lightness tier advances on each cycle.
+export const getChartColorByIndex = (index) => {
+    const base = CHART_PALETTE[index % CHART_COLOR_COUNT];
+    const tier = Math.floor(index / CHART_COLOR_COUNT) % tierTransforms.length;
+    return tierTransforms[tier](base);
+};
+// Resolve a categorical hue to its saturated foreground — an escape hatch for
+// series that need a specific brand color rather than the default palette.
+export const getChartColor = (color) => `var(--vui-color-${color}-text)`;

package/lib/components/context/Theme.d.ts

@@ -79,6 +79,14 @@ export type Theme = {
     colorFuchsiaText?: string;
     colorRedBackground?: string;
     colorRedText?: string;
+    colorChart1?: string;
+    colorChart2?: string;
+    colorChart3?: string;
+    colorChart4?: string;
+    colorChart5?: string;
+    colorChart6?: string;
+    colorChart7?: string;
+    colorChart8?: string;
 };
 export declare const toRgba: (hex: string, alpha: number) => string;
 export declare const toRgb: (hex: string) => string;

package/lib/components/context/Theme.js

@@ -68,6 +68,19 @@ const colorFuchsiaBackground = "#fae8ff";
 const colorFuchsiaText = "#a21caf";
 const colorRedBackground = "#fee2e2";
 const colorRedText = "#b91c1c";
+// Chart colors
+// Grounded in the Okabe-Ito colorblind-safe palette, ordered for maximum
+// contrast between adjacent series and anchored to the brand's blue and purple.
+// The light gold and pure black of the original palette are darkened and
+// softened so they read on a light background.
+const colorChart1 = "#0072b2"; // Blue, neighbors the brand primary.
+const colorChart2 = "#e69f00"; // Orange.
+const colorChart3 = "#009e73"; // Teal-green.
+const colorChart4 = "#cc79a7"; // Mauve, echoes the brand accent.
+const colorChart5 = "#56b4e9"; // Sky.
+const colorChart6 = "#d55e00"; // Vermillion.
+const colorChart7 = "#9a8200"; // Deep gold.
+const colorChart8 = "#3f4551"; // Dark slate.
 export const LIGHT_THEME = {
     // Font
     fontFamily,
@@ -155,7 +168,16 @@ export const LIGHT_THEME = {
     colorFuchsiaBackground,
     colorFuchsiaText,
     colorRedBackground,
-    colorRedText
+    colorRedText,
+    // Chart colors
+    colorChart1,
+    colorChart2,
+    colorChart3,
+    colorChart4,
+    colorChart5,
+    colorChart6,
+    colorChart7,
+    colorChart8
 };
 export const DARK_THEME = {
     // Special colors
@@ -180,7 +202,13 @@ export const DARK_THEME = {
     colorText: colorLightShade,
     colorLabel: colorLightShade,
     // Border color
-    colorBorderLight: "#323338"
+    colorBorderLight: "#323338",
+    // Chart colors
+    // Lighten the dark anchors so series stay legible on a dark background; the
+    // mid-toned hues fall through to their light-theme values.
+    colorChart1: "#4aa3e0",
+    colorChart7: "#d4b400",
+    colorChart8: "#aab3c2" // Light slate.
 };
 export const toStyle = (theme) => {
     const vars = {
@@ -270,7 +298,16 @@ export const toStyle = (theme) => {
         "--vui-color-fuchsia-background": theme.colorFuchsiaBackground,
         "--vui-color-fuchsia-text": theme.colorFuchsiaText,
         "--vui-color-red-background": theme.colorRedBackground,
-        "--vui-color-red-text": theme.colorRedText
+        "--vui-color-red-text": theme.colorRedText,
+        // Chart colors
+        "--vui-chart-1": theme.colorChart1,
+        "--vui-chart-2": theme.colorChart2,
+        "--vui-chart-3": theme.colorChart3,
+        "--vui-chart-4": theme.colorChart4,
+        "--vui-chart-5": theme.colorChart5,
+        "--vui-chart-6": theme.colorChart6,
+        "--vui-chart-7": theme.colorChart7,
+        "--vui-chart-8": theme.colorChart8
     };
     // Remove undefined values.
     return Object.fromEntries(Object.entries(vars).filter(([_, v]) => v !== undefined));

package/lib/components/index.d.ts

@@ -16,6 +16,14 @@ import { VuiButtonTertiary } from "./button/ButtonTertiary";
 import { VuiIconButton } from "./button/IconButton";
 import { VuiCallout } from "./callout/Callout";
 import { VuiCard, VuiSimpleCard } from "./card";
+import { BarChartSeries, VuiBarChart } from "./chart/BarChart";
+import { LineChartSeries, LineChartVariant, VuiLineChart } from "./chart/LineChart";
+import { VuiPieChart } from "./chart/PieChart";
+import { VuiSparkline } from "./chart/Sparkline";
+import { VuiTreeMap } from "./chart/TreeMap";
+import { ScatterSeries, VuiScatterChart } from "./chart/ScatterChart";
+import { ComposedSeries, VuiComposedChart } from "./chart/ComposedChart";
+import { CHART_PALETTE } from "./chart/palette";
 import { CALLOUT_COLOR, CALLOUT_SIZE, CalloutColor } from "./callout/types";
 import { ChatTurn, ChatStyle, ChatLanguage } from "./chat/types";
 import { VuiChat } from "./chat/Chat";
@@ -108,5 +116,5 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };