kaleido-ui 0.1.130 → 0.1.131

package/dist/web/index.cjs

@@ -9820,12 +9820,19 @@ function TrendChart({
   empty,
   formatValue = defaultFormat,
   height = 220,
+  view: controlledView,
+  onViewChange,
   className,
   ...head
 }) {
   const [containerRef, width] = useElementWidth();
   const [active, setActive] = (0, import_react26.useState)(null);
-  const [view, setView] = (0, import_react26.useState)("chart");
+  const [ownView, setOwnView] = (0, import_react26.useState)("chart");
+  const view = controlledView ?? ownView;
+  const setView = (next) => {
+    if (controlledView === void 0) setOwnView(next);
+    onViewChange?.(next);
+  };
   const styledSeries = allSeries.map((s, index) => ({ ...s, texture: s.texture ?? (index === 0 ? "solid" : "hatch") }));
   const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
   const series = styledSeries.filter((s) => visibility.isVisible(s.id));

package/dist/web/index.d.cts

@@ -2728,6 +2728,7 @@ interface ChartFrameProps extends ChartTitleProps, ChartViewsProps {
     children: ReactNode;
     className?: string;
 }
+type ChartView = 'chart' | 'table';
 /**
  * A chart's frame: the title and the chart / table switch on one line, then
  * the plot with its legend under it — or, one segment away, the same numbers
@@ -2781,6 +2782,13 @@ interface TrendChartProps extends ChartTitleProps {
     formatValue?: (value: number) => string;
     /** Plot height in px, axes included. */
     height?: number;
+    /**
+     * Chart or table, controlled. Leave both out and the chart keeps its own
+     * view; pass them when the host keeps the view in its own state (an address,
+     * a saved preference), so the chart's switch is the only one on screen.
+     */
+    view?: ChartView;
+    onViewChange?: (view: ChartView) => void;
     className?: string;
 }
 /**
@@ -2811,7 +2819,7 @@ declare function trendChartLabelIndices(count: number, maxLabels: number): numbe
  * It draws nothing when there are no points: an empty period is the consumer's
  * empty state, passed as `empty`, not a frame with no bars in it.
  */
-declare function TrendChart({ points, series: allSeries, scaleLabel, label, empty, formatValue, height, className, ...head }: TrendChartProps): react_jsx_runtime.JSX.Element;
+declare function TrendChart({ points, series: allSeries, scaleLabel, label, empty, formatValue, height, view: controlledView, onViewChange, className, ...head }: TrendChartProps): react_jsx_runtime.JSX.Element;
 
 interface LineChartProps extends ChartTitleProps {
     /** One datum per x position, in order (usually time). */

package/dist/web/index.d.ts

@@ -2728,6 +2728,7 @@ interface ChartFrameProps extends ChartTitleProps, ChartViewsProps {
     children: ReactNode;
     className?: string;
 }
+type ChartView = 'chart' | 'table';
 /**
  * A chart's frame: the title and the chart / table switch on one line, then
  * the plot with its legend under it — or, one segment away, the same numbers
@@ -2781,6 +2782,13 @@ interface TrendChartProps extends ChartTitleProps {
     formatValue?: (value: number) => string;
     /** Plot height in px, axes included. */
     height?: number;
+    /**
+     * Chart or table, controlled. Leave both out and the chart keeps its own
+     * view; pass them when the host keeps the view in its own state (an address,
+     * a saved preference), so the chart's switch is the only one on screen.
+     */
+    view?: ChartView;
+    onViewChange?: (view: ChartView) => void;
     className?: string;
 }
 /**
@@ -2811,7 +2819,7 @@ declare function trendChartLabelIndices(count: number, maxLabels: number): numbe
  * It draws nothing when there are no points: an empty period is the consumer's
  * empty state, passed as `empty`, not a frame with no bars in it.
  */
-declare function TrendChart({ points, series: allSeries, scaleLabel, label, empty, formatValue, height, className, ...head }: TrendChartProps): react_jsx_runtime.JSX.Element;
+declare function TrendChart({ points, series: allSeries, scaleLabel, label, empty, formatValue, height, view: controlledView, onViewChange, className, ...head }: TrendChartProps): react_jsx_runtime.JSX.Element;
 
 interface LineChartProps extends ChartTitleProps {
     /** One datum per x position, in order (usually time). */

package/dist/web/index.js

@@ -9541,12 +9541,19 @@ function TrendChart({
   empty,
   formatValue = defaultFormat,
   height = 220,
+  view: controlledView,
+  onViewChange,
   className,
   ...head
 }) {
   const [containerRef, width] = useElementWidth();
   const [active, setActive] = useState19(null);
-  const [view, setView] = useState19("chart");
+  const [ownView, setOwnView] = useState19("chart");
+  const view = controlledView ?? ownView;
+  const setView = (next) => {
+    if (controlledView === void 0) setOwnView(next);
+    onViewChange?.(next);
+  };
   const styledSeries = allSeries.map((s, index) => ({ ...s, texture: s.texture ?? (index === 0 ? "solid" : "hatch") }));
   const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
   const series = styledSeries.filter((s) => visibility.isVisible(s.id));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.130",
+  "version": "0.1.131",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",