@siyahi/ui 0.1.9-next.12 → 0.1.9-next.13

package/dist/components/registry/charts/bar-chart-card.js

@@ -11,6 +11,11 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 		...props,
 		yDomain: props.yDomain ?? (props.data.some((row) => props.series.some(({ key }) => Number(row[key]) > 0)) ? void 0 : DOWN_FROM_ZERO),
 		stackOffset: stacked ? "sign" : void 0,
+		onClick: onSelect ? ({ activeTooltipIndex, isTooltipActive }) => {
+			if (!isTooltipActive || activeTooltipIndex == null) return;
+			const row = props.data[Number(activeTooltipIndex)];
+			if (row) onSelect(row[props.xKey] === selected ? null : row[props.xKey]);
+		} : void 0,
 		children: props.series.map((item, index) => {
 			const { key, label, color, negativeColor } = item;
 			return /* @__PURE__ */ jsx(Bar, {
@@ -29,11 +34,6 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 					0,
 					0
 				] : 0,
-				className: onSelect ? "cursor-pointer" : void 0,
-				onClick: onSelect && ((bar) => {
-					const value = bar.payload?.[props.xKey];
-					if (value !== void 0) onSelect(value === selected ? null : value);
-				}),
 				children: (negativeColor || selected !== null) && props.data.map((row, i) => /* @__PURE__ */ jsx(Cell, {
 					fill: negativeColor && Number(row[key]) < 0 ? negativeColor : color,
 					fillOpacity: selected === null || row[props.xKey] === selected ? 1 : .35

package/dist/lib/chart-frame.d.ts

@@ -1,5 +1,5 @@
 import { ChartColor, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./chart-series.js";
-import { ReactNode } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { AreaChart, BarChart, LineChart, YAxisProps } from "recharts";
 //#region src/lib/chart-frame.d.ts
 interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<SeriesChartProps<T, K>, "yDomain">, NumericXProps {
@@ -15,6 +15,7 @@ interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<Seri
   horizontal?: boolean;
   /** "sign" stacks negative values below zero and positive ones above, rather than on one running total. */
   stackOffset?: "sign";
+  onClick?: ComponentProps<typeof BarChart>["onClick"];
 }
 /**
  * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
@@ -31,6 +32,6 @@ export declare function seriesRow<T>(series: ChartSeries<T>, formatValue: (value
  * that gave its category axis its own id (dash#88) got a plot split in two
  * and every tooltip headed with the series name instead of the category.
  */
-export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, title, description, action, data, xKey, series, xFormatter, xTooltipFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines, placeholder, footer, xDomain, xTicks }: ChartFrameProps<T, K>): import("react").JSX.Element;
+export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, onClick, title, description, action, data, xKey, series, xFormatter, xTooltipFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines, placeholder, footer, xDomain, xTicks }: ChartFrameProps<T, K>): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/lib/chart-frame.js

@@ -93,7 +93,7 @@ function fittedTick(data, xKey, xFormatter, detailOf, beside) {
 * that gave its category axis its own id (dash#88) got a plot split in two
 * and every tooltip headed with the series name instead of the category.
 */
-function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
 	const { numberLocale } = useLocale();
 	const formatValue = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
@@ -114,12 +114,14 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, t
 			children: placeholder
 		}) : /* @__PURE__ */ jsx(ChartContainer, {
 			config,
-			className: "aspect-auto w-full",
+			className: cn("aspect-auto w-full", onClick && "cursor-pointer"),
 			style: { height },
 			children: /* @__PURE__ */ jsxs(Chart, {
 				data,
 				layout: horizontal ? "vertical" : "horizontal",
 				stackOffset,
+				onClick,
+				throttledEvents: onClick ? [] : void 0,
 				margin: {
 					left: 0,
 					right: xTicks ? endRoom(xFormatter, xTicks) : 8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.12",
+  "version": "0.1.9-next.13",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",