@vectara/vectara-ui 18.4.0 → 19.1.0

package/lib/components/card/SimpleCard.d.ts

@@ -4,7 +4,7 @@ type Props = {
     fullHeight?: boolean;
     href?: string;
     onClick?: (e: MouseEvent) => void;
-    padding?: "xxs" | "xs" | "s" | "m" | "l";
+    padding?: "s" | "m" | "l";
     children?: React.ReactNode;
     error?: string | ReactNode;
     warning?: string | ReactNode;

package/lib/components/card/_index.scss

@@ -179,28 +179,11 @@
 }
 
 .vuiSimpleCard--interactive {
-  border: 1px solid var(--vui-color-primary-highlight-shade);
   transition: box-shadow $transitionSpeed, border-color $transitionSpeed;
 
   &:hover {
-    border-color: var(--vui-color-primary-shade);
-    box-shadow: $shadowLargeEnd;
-  }
-}
-
-.vuiSimpleCard--danger {
-  border-color: var(--vui-color-danger-shade);
-
-  &.vuiSimpleCard--interactive:hover {
-    border-color: var(--vui-color-danger-shade);
-  }
-}
-
-.vuiSimpleCard--warning {
-  border-color: var(--vui-color-warning-shade);
-
-  &.vuiSimpleCard--interactive:hover {
-    border-color: var(--vui-color-warning-shade);
+    border-color: var(--vui-color-primary-highlight-shade);
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   }
 }
 
@@ -208,22 +191,14 @@
   height: 100%;
 }
 
-.vuiSimpleCard--xxs {
-  padding: $sizeXs $sizeS;
-}
-
-.vuiSimpleCard--xs {
-  padding: $sizeS $sizeM;
-}
-
 .vuiSimpleCard--s {
-  padding: $sizeM $sizeL;
+  padding: $sizeS;
 }
 
 .vuiSimpleCard--m {
-  padding: $sizeL $sizeXl;
+  padding: $sizeM;
 }
 
 .vuiSimpleCard--l {
-  padding: $sizeXl $sizeXxl;
+  padding: $sizeL;
 }

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/composer/Composer.d.ts

@@ -0,0 +1,41 @@
+export type ComposerSubmission = {
+    text: string;
+    files: File[];
+};
+export type ComposerFileError = {
+    file: File;
+    message: string;
+};
+export type ComposerShortcutApi = {
+    value: string;
+    setValue: (value: string) => void;
+    clear: () => void;
+};
+export type ComposerShortcutHandler = (event: React.KeyboardEvent<HTMLTextAreaElement>, composer: ComposerShortcutApi) => void;
+type Props = {
+    onSubmit: (submission: ComposerSubmission) => void;
+    isRunning?: boolean;
+    onCancel?: () => void;
+    isSendDisabled?: boolean;
+    sendLabel?: string;
+    cancelLabel?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    onChange?: (value: string) => void;
+    value?: string;
+    enableHistory?: boolean;
+    historyKey?: string;
+    canUploadFiles?: boolean;
+    accept?: string;
+    validateFile?: (file: File) => string | null;
+    onFilesRejected?: (errors: ComposerFileError[]) => void;
+    fileDropScope?: "document" | "composer";
+    fileDropMessage?: React.ReactNode;
+    onShortcutKeys?: Record<string, ComposerShortcutHandler>;
+    leadingActions?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    "data-testid"?: string;
+};
+export declare const VuiComposer: ({ onSubmit, isRunning, onCancel, isSendDisabled, sendLabel, cancelLabel, placeholder, autoFocus, onChange, value, enableHistory, historyKey, canUploadFiles, accept, validateFile, onFilesRejected, fileDropScope, fileDropMessage, onShortcutKeys, leadingActions, footer, className, "data-testid": dataTestId }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};