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

package/README.md

@@ -198,6 +198,10 @@ surface.
 </SiyahiProvider>
 ```
 
+Pages are dense. A `PageSection` sits 24px under its rule with 16px to its
+content, so stack sections 24px apart (`flex flex-col gap-6`) and the rule sits
+midway. Stat tiles are 12px in from each edge with a 24px figure.
+
 ## Dark mode
 
 The colour scheme follows the device (`prefers-color-scheme`). There is no

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/components/registry/dashboard-01/section-cards.js

@@ -23,7 +23,7 @@ function SectionCards({ items, selected, onSelect }) {
 				"data-slot": "section-card",
 				className: cn("min-w-0", ruled && "border-t border-l"),
 				children: /* @__PURE__ */ jsxs(Card, {
-					className: cn("@container/card h-full", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
+					className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
 					children: [
 						onSelect && /* @__PURE__ */ jsx("button", {
 							type: "button",
@@ -36,7 +36,7 @@ function SectionCards({ items, selected, onSelect }) {
 						/* @__PURE__ */ jsxs(CardHeader, { children: [
 							/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
 							/* @__PURE__ */ jsx(CardTitle, {
-								className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
+								className: "text-2xl font-semibold tabular-nums",
 								children: item.value
 							}),
 							item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
@@ -46,7 +46,7 @@ function SectionCards({ items, selected, onSelect }) {
 						] }),
 						item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
 						(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-							className: "flex-col items-start gap-1.5 text-sm",
+							className: "flex-col items-start gap-1 text-sm",
 							children: [item.headline && /* @__PURE__ */ jsx("div", {
 								className: "flex flex-wrap gap-2 font-medium",
 								children: item.headline

package/dist/components/siyahi/page-section.d.ts

@@ -12,7 +12,10 @@ export interface PageSectionProps {
   action?: ReactNode;
   children?: ReactNode;
 }
-/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+/**
+ * One part of a long page: a rule above, then the heading and lead on the canvas, then its content. Spaced for
+ * density, 24px under the rule and 16px to the content, so sections stacked 24px apart sit 24px either side of it.
+ */
 export declare function PageSection({ id, eyebrow, title, lead, action, children }: PageSectionProps): import("react").JSX.Element;
 /** A heading inside a PageSection, one level under its title. */
 export declare function PageSubheading({ children }: {

package/dist/components/siyahi/page-section.js

@@ -1,11 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/page-section.tsx
-/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+/**
+* One part of a long page: a rule above, then the heading and lead on the canvas, then its content. Spaced for
+* density, 24px under the rule and 16px to the content, so sections stacked 24px apart sit 24px either side of it.
+*/
 function PageSection({ id, eyebrow, title, lead, action, children }) {
 	return /* @__PURE__ */ jsxs("section", {
 		id,
 		"data-slot": "page-section",
-		className: "flex scroll-mt-6 flex-col gap-6 border-t pt-10",
+		className: "flex scroll-mt-6 flex-col gap-4 border-t pt-6",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-end justify-between gap-4",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -16,7 +19,7 @@ function PageSection({ id, eyebrow, title, lead, action, children }) {
 						children: eyebrow
 					}),
 					/* @__PURE__ */ jsx("h2", {
-						className: "text-2xl font-semibold tracking-tight",
+						className: "text-xl font-semibold tracking-tight",
 						children: title
 					}),
 					lead && /* @__PURE__ */ jsx("div", {

package/dist/components/siyahi/panel-grid.js

@@ -21,7 +21,7 @@ function PanelGrid({ columns = 2, children, className }) {
 		"data-slot": "panel-grid",
 		className: cn("@container/panels", ruled && "overflow-hidden border-y", className),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-10 gap-y-8" : "gap-4"),
+			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-8 gap-y-6" : "gap-4"),
 			children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
 				"data-slot": "panel",
 				className: cn("min-w-0", ruled && "border-t border-l"),

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.10",
+  "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",