@siyahi/ui 0.1.9-next.20 → 0.1.9-next.22

package/agents/manifest.json

@@ -108,6 +108,29 @@
         "DataBar"
       ]
     },
+    {
+      "need": "A table column of changes that should rank by eye, and a note on how to read the table",
+      "guidance": "`ChangeBar` in the column's cell, `diverging` when it holds both signs; `DataTableFootnote` after `DataTableBody`",
+      "components": [
+        "ChangeBar",
+        "DataTableFootnote",
+        "DataTableBody"
+      ]
+    },
+    {
+      "need": "Figures against their targets, such as allocation against plan",
+      "guidance": "`TargetRows`, with neutral `bands` and a `status` per row",
+      "components": [
+        "TargetRows"
+      ]
+    },
+    {
+      "need": "Where a value sits in its range, such as a price in its 52-week range",
+      "guidance": "`RangePosition`; `variant=\"compact\"` in a table cell",
+      "components": [
+        "RangePosition"
+      ]
+    },
     {
       "need": "One instrument's price history",
       "guidance": "`PriceChart`",
@@ -283,7 +306,8 @@
       "components": [
         "Alert",
         "AlertDescription",
-        "AlertTitle"
+        "AlertTitle",
+        "WarningAlert"
       ]
     },
     {
@@ -355,6 +379,13 @@
         "BreadcrumbSeparator"
       ]
     },
+    {
+      "file": "agents/examples/button-states.tsx",
+      "components": [
+        "Button",
+        "Toggle"
+      ]
+    },
     {
       "file": "agents/examples/button.tsx",
       "components": [
@@ -367,6 +398,16 @@
         "Calendar"
       ]
     },
+    {
+      "file": "agents/examples/callout.tsx",
+      "components": [
+        "Callout",
+        "Quote",
+        "WarningAlert",
+        "AlertDescription",
+        "AlertTitle"
+      ]
+    },
     {
       "file": "agents/examples/card.tsx",
       "components": [
@@ -381,6 +422,26 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/change-bar.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "ChangeBar",
+        "DataTable",
+        "DataTableBody",
+        "DataTableCompactColumnsToggle",
+        "DataTableFootnote",
+        "DataTableHeader",
+        "DataTableRoot",
+        "DataTableSortHeader",
+        "DataTableToolbarSection",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-area.tsx",
       "components": [
@@ -528,6 +589,27 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/data-table-compact.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "DataTable",
+        "DataTableBody",
+        "DataTableCompactColumnsToggle",
+        "DataTableHeader",
+        "DataTableRoot",
+        "DataTableRowCount",
+        "DataTableSortHeader",
+        "DataTableToolbarSection",
+        "Delta",
+        "useDataTable",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/data-table-filters.tsx",
       "components": [
@@ -654,6 +736,8 @@
         "CalendarHeatmap",
         "CalendarHeatmapBlock",
         "CalendarHeatmapBody",
+        "CalendarHeatmapFooter",
+        "CalendarHeatmapLegend",
         "useFormat",
         "Card",
         "CardContent",
@@ -672,7 +756,9 @@
         "CardTitle",
         "StatusHeatmap",
         "StatusHeatmapBlock",
-        "StatusHeatmapBody"
+        "StatusHeatmapBody",
+        "StatusHeatmapFooter",
+        "StatusHeatmapLegend"
       ]
     },
     {
@@ -686,7 +772,14 @@
         "CardTitle",
         "WeekdayHeatmap",
         "WeekdayHeatmapBlock",
-        "WeekdayHeatmapBody"
+        "WeekdayHeatmapBody",
+        "WeekdayHeatmapLegend"
+      ]
+    },
+    {
+      "file": "agents/examples/input-states.tsx",
+      "components": [
+        "Input"
       ]
     },
     {
@@ -714,6 +807,17 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/overview-dashboard.tsx",
+      "components": []
+    },
+    {
+      "file": "agents/examples/page-hero.tsx",
+      "components": [
+        "Button",
+        "PageHero"
+      ]
+    },
     {
       "file": "agents/examples/page-section.tsx",
       "components": [
@@ -768,6 +872,39 @@
         "ProgressValue"
       ]
     },
+    {
+      "file": "agents/examples/range-position-table.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "DataTable",
+        "DataTableBody",
+        "DataTableCompactColumnsToggle",
+        "DataTableHeader",
+        "DataTableRoot",
+        "DataTableSortHeader",
+        "DataTableToolbarSection",
+        "RangePosition",
+        "useFormat"
+      ]
+    },
+    {
+      "file": "agents/examples/range-position.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "DataList",
+        "DataListItem",
+        "RangePosition",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/scroll-area.tsx",
       "components": [
@@ -780,6 +917,7 @@
       "components": [
         "Delta",
         "SectionCards",
+        "SiyahiProvider",
         "useFormat"
       ]
     },
@@ -889,6 +1027,18 @@
         "TabsTrigger"
       ]
     },
+    {
+      "file": "agents/examples/target-rows.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "TargetRows",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/toggle-group.tsx",
       "components": [

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

@@ -1,21 +1,39 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
-import { jsx } from "react/jsx-runtime";
+import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Area, AreaChart } from "recharts";
 //#region src/components/registry/charts/area-chart-card.tsx
 /** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
 function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
 		...props,
-		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Area, {
+		children: [/* @__PURE__ */ jsx("defs", { children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsxs("linearGradient", {
+			id: `${id}-${index}`,
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0%",
+				stopColor: color,
+				stopOpacity: stacked ? .5 : .32
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "100%",
+				stopColor: color,
+				stopOpacity: stacked ? .15 : .02
+			})]
+		}, key)) }), props.series.map(({ key, color }, index) => /* @__PURE__ */ jsx(Area, {
 			dataKey: key,
 			type: curve,
-			fill: color,
-			fillOpacity: stacked ? .4 : .2,
+			fill: stacked || index === 0 ? `url(#${id}-${index})` : "none",
 			stroke: color,
+			strokeWidth: 2,
+			dot: endDot(color, props.data.length),
 			stackId: stacked ? "stack" : void 0
-		}, key))
+		}, key))]
 	});
 }
 //#endregion

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -10,6 +10,5 @@ export interface BarChartCardProps<T extends object, K extends keyof T> extends
   /** Called with a clicked category's x value, or null when the picked one is clicked again. */
   onSelect?: (value: T[K] | null) => void;
 }
-/** Values over an ordered axis as bars: one series, or several grouped or stacked. */
 export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, selected, onSelect, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

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

@@ -5,6 +5,8 @@ import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/registry/charts/bar-chart-card.tsx
 const DOWN_FROM_ZERO = ["auto", 0];
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
+const dimUnselected = (color, isSelected) => isSelected ? color : `color-mix(in oklab, ${color} 55%, var(--card))`;
+const signedFill = (color, isSelected) => `color-mix(in oklab, ${color} ${isSelected ? 35 : 15}%, var(--card))`;
 function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
@@ -35,10 +37,19 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 					0,
 					0
 				] : 0,
-				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
-				}, i))
+				children: (negativeColor || selected !== null) && props.data.map((row, i) => {
+					const isSelected = selected === null || row[props.xKey] === selected;
+					const tone = negativeColor && Number(row[key]) < 0 ? negativeColor : color;
+					return negativeColor ? /* @__PURE__ */ jsx(Cell, {
+						fill: signedFill(tone, isSelected),
+						stroke: tone,
+						strokeWidth: 1.5
+					}, i) : /* @__PURE__ */ jsx(Cell, {
+						fill: dimUnselected(tone, isSelected),
+						stroke: tone,
+						strokeWidth: 1.5
+					}, i);
+				})
 			}, key);
 		})
 	});

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

@@ -1,5 +1,5 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
+import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Line, LineChart } from "recharts";
 //#region src/components/registry/charts/line-chart-card.tsx
@@ -13,7 +13,7 @@ function LineChartCard({ curve = "monotone", ...props }) {
 			type: curve,
 			stroke: color,
 			strokeWidth: 2,
-			dot: false
+			dot: endDot(color, props.data.length)
 		}, key))
 	});
 }

package/dist/components/registry/dashboard-01/section-cards.js

@@ -31,7 +31,7 @@ function SectionCards({ items, selected, onSelect }) {
 							"aria-pressed": item.label === selected,
 							disabled: item.disabled,
 							onClick: () => onSelect(item.label),
-							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
+							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring focus-visible:ring-inset"
 						}),
 						/* @__PURE__ */ jsxs(CardHeader, { children: [
 							/* @__PURE__ */ jsx(CardDescription, { children: item.label }),

package/dist/components/registry/dashboardcn/bar-list.js

@@ -20,7 +20,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 	const total = items.reduce((sum, item) => sum + item.value, 0);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "bar-list",
-		className: cn("@container/bar-list flex flex-col gap-1.5", className),
+		className: cn("@container/bar-list grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1.5", className),
 		...props,
 		children: items.map((item) => {
 			const width = max > 0 ? item.value / max * 100 : 0;
@@ -29,16 +29,22 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 			const Label = item.href ? "a" : onItemClick ? "button" : "div";
 			return /* @__PURE__ */ jsxs("div", {
 				"data-slot": "bar-list-row",
-				className: "flex items-center gap-3 text-sm @max-sm/bar-list:items-start",
+				className: "col-span-2 grid grid-cols-subgrid items-center text-sm @max-sm/bar-list:items-start",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "relative flex h-8 min-w-0 flex-1 items-center @max-sm/bar-list:h-auto @max-sm/bar-list:min-h-8 @max-sm/bar-list:items-start @max-sm/bar-list:pb-3",
 					children: [
 						/* @__PURE__ */ jsx("div", {
+							"data-slot": "bar-list-track",
+							"aria-hidden": "true",
+							className: "bg-muted/60 absolute inset-0 rounded-md @max-sm/bar-list:inset-y-auto @max-sm/bar-list:bottom-0 @max-sm/bar-list:h-1.5"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "bar-list-bar",
 							"aria-hidden": "true",
 							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300 @max-sm/bar-list:inset-y-auto @max-sm/bar-list:bottom-0 @max-sm/bar-list:h-1.5",
 							style: {
 								width: `${width}%`,
-								backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
+								backgroundColor: item.detail ? "color-mix(in oklab, var(--muted-foreground) 20%, transparent)" : `color-mix(in oklab, ${color} 32%, transparent)`
 							}
 						}),
 						/* @__PURE__ */ jsxs(Label, {
@@ -47,7 +53,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 								type: "button",
 								onClick: () => onItemClick(item)
 							} : {},
-							className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
+							className: cn("text-foreground relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
 							children: [item.icon ? /* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground shrink-0 [&>svg]:size-4",
 								children: item.icon
@@ -63,7 +69,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 						}) : null
 					]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center gap-2 tabular-nums",
+					className: "flex items-center justify-end gap-2 tabular-nums",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-medium",
 						children: format(item.value)

package/dist/components/registry/dashboardcn/distribution-bar.js

@@ -66,12 +66,14 @@ function DistributionBar({ segments, valueFormatter, showLegend = true, showValu
 					onMouseLeave: onHover ? () => onHover(null) : void 0,
 					children: resolved.map((segment) => segment.width > 0 ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "distribution-segment",
-						className: "border-card absolute inset-y-0 border-x transition-[width,left,opacity] duration-300",
+						className: "border-card absolute inset-y-0 border-x transition-[width,left,background-color] duration-300",
 						style: {
 							left: `${segment.left}%`,
 							width: `${segment.width}%`,
-							backgroundColor: segment.color,
-							opacity: highlighted === null || highlighted === segment.key ? 1 : .35
+							...highlighted === null || highlighted === segment.key ? { backgroundColor: segment.color } : {
+								backgroundColor: `color-mix(in oklab, ${segment.color} 35%, var(--card))`,
+								boxShadow: `inset 0 0 0 1px ${segment.color}`
+							}
 						},
 						onMouseEnter: onHover ? () => onHover(segment) : void 0
 					}, segment.key) : null)

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -39,7 +39,7 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 					className: "-mt-px -ml-px flex flex-wrap",
 					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 						"data-slot": "metric-strip-item",
-						className: cn("flex min-w-0 flex-col gap-1 border-t border-l px-4 py-3", columns),
+						className: cn("flex min-w-0 flex-col gap-1.5 border-t border-l px-4 py-4", columns),
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "truncate text-xs text-muted-foreground",
 							children: item.label
@@ -64,7 +64,7 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 								data: item.trend,
 								variant: "line",
 								color: trendColor(item.change),
-								className: "h-8 w-16 shrink-0"
+								className: "h-9 w-20 shrink-0"
 							})]
 						})]
 					}, item.label))

package/dist/components/registry/dashboardcn/sparkline.d.ts

@@ -5,9 +5,13 @@ export interface SparklineProps extends React$1.ComponentProps<"div"> {
   /** Series to plot, oldest first. */
   data: number[];
   variant?: "area" | "line";
-  /** A chart slot, or var(--positive) or var(--negative) for a gain or a loss. Defaults to var(--chart-1). */
+  /**
+   * The last step and the dot on the latest value: a chart slot, or var(--positive) or var(--negative) for a gain or
+   * a loss. Defaults to var(--chart-1). The run before it is muted.
+   */
   color?: ChartColor;
   curve?: "monotone" | "linear" | "step";
+  /** The run's line; the last step is 2px. */
   strokeWidth?: number;
   /** Animate after hydration and when data changes. Respects reduced motion. */
   animate?: boolean;

package/dist/components/registry/dashboardcn/sparkline.js

@@ -15,24 +15,41 @@ function getReducedMotionSnapshot() {
 function getReducedMotionServerSnapshot() {
 	return true;
 }
-function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "monotone", strokeWidth = 1.5, animate = true, animationDuration = 500, className, ...props }) {
+function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "linear", strokeWidth = 1.25, animate = true, animationDuration = 500, className, ...props }) {
 	const id = React$1.useId();
 	const reducedMotion = React$1.useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot);
 	const animationActive = animate && !reducedMotion;
 	const points = React$1.useMemo(() => data.map((y, i) => ({
 		i,
-		y
+		y,
+		now: i >= data.length - 2 ? y : void 0
 	})), [data]);
 	const margin = {
-		top: 2,
-		right: 0,
-		bottom: 2,
+		top: 3,
+		right: 3,
+		bottom: 3,
 		left: 0
 	};
 	const axis = /* @__PURE__ */ jsx(YAxis, {
 		hide: true,
 		domain: ["dataMin", "dataMax"]
 	});
+	const now = /* @__PURE__ */ jsx(Line, {
+		className: "sparkline-now",
+		type: curve,
+		dataKey: "now",
+		stroke: color,
+		strokeWidth: 2,
+		dot: (dot) => dot.index === data.length - 1 ? /* @__PURE__ */ jsx("circle", {
+			cx: dot.cx,
+			cy: dot.cy,
+			r: 3,
+			fill: color
+		}, "now") : /* @__PURE__ */ jsx("g", {}, dot.index),
+		isAnimationActive: animationActive,
+		animationBegin: animationDuration,
+		animationDuration: 150
+	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sparkline",
 		"aria-hidden": "true",
@@ -44,16 +61,20 @@ function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "
 			children: variant === "line" ? /* @__PURE__ */ jsxs(LineChart, {
 				data: points,
 				margin,
-				children: [axis, /* @__PURE__ */ jsx(Line, {
-					type: curve,
-					dataKey: "y",
-					stroke: color,
-					strokeWidth,
-					dot: false,
-					isAnimationActive: animationActive,
-					animationDuration,
-					animationEasing: "ease-out"
-				})]
+				children: [
+					axis,
+					/* @__PURE__ */ jsx(Line, {
+						type: curve,
+						dataKey: "y",
+						stroke: "var(--muted-foreground)",
+						strokeWidth,
+						dot: false,
+						isAnimationActive: animationActive,
+						animationDuration,
+						animationEasing: "ease-out"
+					}),
+					now
+				]
 			}) : /* @__PURE__ */ jsxs(AreaChart, {
 				data: points,
 				margin,
@@ -68,7 +89,7 @@ function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "
 						children: [/* @__PURE__ */ jsx("stop", {
 							offset: "0%",
 							stopColor: color,
-							stopOpacity: .3
+							stopOpacity: .18
 						}), /* @__PURE__ */ jsx("stop", {
 							offset: "100%",
 							stopColor: color,
@@ -78,14 +99,15 @@ function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "
 					/* @__PURE__ */ jsx(Area, {
 						type: curve,
 						dataKey: "y",
-						stroke: color,
+						stroke: "var(--muted-foreground)",
 						strokeWidth,
 						fill: `url(#${id})`,
 						dot: false,
 						isAnimationActive: animationActive,
 						animationDuration,
 						animationEasing: "ease-out"
-					})
+					}),
+					now
 				]
 			})
 		})

package/dist/components/registry/heatmap/calendar-heatmap.d.ts

@@ -75,8 +75,10 @@ export type CalendarHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
  * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
  */
-export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize: blockSizeProp, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 export type CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: ActivityWithLevel;
   dayIndex: number;
   weekIndex: number;
@@ -84,7 +86,7 @@ export type CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellClick?: (activity: ActivityWithLevel) => void;
   onCellHover?: (activity: ActivityWithLevel | null) => void;
 };
-export declare function CalendarHeatmapBlock({ ref, activity, dayIndex, weekIndex, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
+export declare function CalendarHeatmapBlock({ ref, activity, dayIndex, weekIndex, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
 }): import("react").JSX.Element;
 export declare namespace CalendarHeatmapBlock {