@siyahi/ui 0.1.9-next.32 → 0.1.9-next.34

package/DESIGN.md

@@ -24,7 +24,9 @@ a meaning:
   inside a 1px border of the same colour all round. Large marks follow the same
   rule: every bar is a tint inside a 1px full-colour edge, not a solid slab.
   A bar is read by its edge, which reaches 3:1 against the card; the tint is a
-  fill carried by that edge.
+  fill carried by that edge: half its colour (`--bar-tint`, 50%), strong
+  enough that a thin stacked segment, mostly edge, still shows its colour
+  against the next, and a pale slot's bar does not read as the card.
 - **Never a stripe down one side.** Do not mark a notice, card, row or quote
   with a left (or any single-side) coloured border; tint the box or add an
   icon. 1px neutral dividers between columns are separators, not accents, and
@@ -83,10 +85,15 @@ mono face and the link colour, so the text can point to one.
 ## Shape
 
 - **Square corners everywhere**: panels, cards, buttons, fields, badges,
-  toggles, menus, and bars and tracks (data bars, progress) alike (`--radius`
-  is 0). Only a dot, an avatar, a slider, a spinner or a scrollbar is round;
-  the stock chart tooltip's colour chips keep shadcn's 2px. Never add a
-  `rounded-*` class to a box.
+  toggles, menus, bars and tracks (data bars, progress, a slider's track and
+  thumb, a scrollbar's thumb), heatmap cells, treemap tiles and the colour
+  chips of charts and legends alike (`--radius` is 0). Only what is round by
+  nature stays round: an avatar, a status dot, a line's end dot, a spinner,
+  and a signed calendar heatmap's loss day, whose shape carries its sign.
+  Never add a `rounded-*` class to a box.
+- **Floating surfaces lie flat.** A menu, a select's list, a popover, a
+  dialog, a sheet and a chart's tooltip take no drop shadow and the card's
+  hairline for their edge, so they read as a sheet of the page.
 - **Joined toggles.** The items of a `ToggleGroup` sit flush and share their
   borders, one control; the pressed item fills with the foreground.
 - **A code block's copy button sits in a header row** (`CodeBlockHeader`),
@@ -97,7 +104,7 @@ mono face and the link colour, so the text can point to one.
 
 ## Page header
 
-An app page opens on its masthead, `PageHero`: a small mark and eyebrow in the
+An app page opens on its masthead, `PageHeader`: a small mark and eyebrow in the
 mono face and link colour, the title, one muted line saying what the page is,
 the actions at the right, and a hairline under it. One per page; no hero card.
 
@@ -186,7 +193,8 @@ from the catalogue.
 
 - **Labels are small monospaced capitals**: a stat tile's label and footer
   lines, a `MetricStrip` label, a table's column heads, a sidebar group's
-  label, and a form field's label (muted, above the field). The components and
+  label, a group's label in a menu, a select's list or the command palette,
+  and a form field's label (muted, above the field). The components and
   the theme set them; never set a label in this style by hand elsewhere, and
   never set a figure or a title in it.
 - **A total row reads as a ledger's**: in `TableFooter`, one rule above it and
@@ -211,6 +219,11 @@ from the catalogue.
   a stack's grey bands read in the legend's order, bottom to top.
 - **No fill under overlapping areas**: from three series on, fills bury each
   other. A stack fills each band with a flat tint, never a gradient.
+- **The value axis just covers the data.** Unless the page fixes it, it ends
+  on the round tick just past what is drawn (a 46,800 peak at 50,000, by
+  10,000s), a stack's totals for a stack. Bars and stacks reach zero, since
+  their length is the value; lines and overlapping areas need not, so a
+  revenue line from ₹38L to ₹45L fills the plot rather than its top fifth.
 - **Forecast and today.** `forecastFrom` dashes every line from that point,
   hatches the stretch faintly behind lines on card-coloured halos, labels it
   FORECAST and hollows the end dots (a stack keeps solid edges and no hatching:

package/agents/examples/chart-panels-three.tsx

@@ -0,0 +1,51 @@
+import { AreaChartCard, BarChartCard, LineChartCard, PanelGrid, useFormat } from "@siyahi/ui";
+
+// One fund over six months: its month-end growth, its value and what was added each month.
+const months = [
+  { month: "May", growth: 0, value: 410000, added: 20000 },
+  { month: "Jun", growth: 0.025, value: 432000, added: 15000 },
+  { month: "Jul", growth: 0.061, value: 455000, added: 10000 },
+  { month: "Aug", growth: 0.047, value: 461000, added: 25000 },
+  { month: "Sep", growth: 0.11, value: 498000, added: 15000 },
+  { month: "Oct", growth: 0.156, value: 527000, added: 20000 },
+];
+
+// Three short panels in a reading column about as wide as an article (max-w-4xl, 56rem): three across from 42rem.
+export default function ChartPanelsThreeExample() {
+  const { pct, money, moneyCompact } = useFormat();
+  return (
+    <div className="max-w-4xl">
+      <PanelGrid columns={3}>
+        <LineChartCard
+          title="Growth"
+          description="Since May, month-end"
+          data={months}
+          xKey="month"
+          series={[{ key: "growth", label: "Growth", color: "var(--chart-1)" }]}
+          valueFormatter={pct}
+          height={160}
+        />
+        <AreaChartCard
+          title="Value"
+          description="Month-end, ₹"
+          data={months}
+          xKey="month"
+          series={[{ key: "value", label: "Value", color: "var(--chart-1)" }]}
+          valueFormatter={money}
+          yTickFormatter={moneyCompact}
+          height={160}
+        />
+        <BarChartCard
+          title="Added"
+          description="Each month, ₹"
+          data={months}
+          xKey="month"
+          series={[{ key: "added", label: "Added", color: "var(--chart-1)" }]}
+          valueFormatter={money}
+          yTickFormatter={moneyCompact}
+          height={160}
+        />
+      </PanelGrid>
+    </div>
+  );
+}

package/agents/examples/context-menu.tsx

@@ -1,16 +1,26 @@
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@siyahi/ui";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuTrigger,
+} from "@siyahi/ui";
 
 export default function ContextMenuExample() {
   return (
     <ContextMenu>
       <ContextMenuTrigger className="w-full">
-        <div className="flex h-24 items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+        <div className="flex h-24 items-center justify-center border text-muted-foreground">
           Right-click or long-press here
         </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem>Copy order number</ContextMenuItem>
-        <ContextMenuItem>Open order</ContextMenuItem>
+        <ContextMenuGroup>
+          <ContextMenuLabel>Order</ContextMenuLabel>
+          <ContextMenuItem>Copy order number</ContextMenuItem>
+          <ContextMenuItem>Open order</ContextMenuItem>
+        </ContextMenuGroup>
       </ContextMenuContent>
     </ContextMenu>
   );

package/agents/examples/overview-dashboard.tsx

@@ -9,7 +9,7 @@ import {
   CardTitle,
   Delta,
   Input,
-  PageHero,
+  PageHeader,
   PanelGrid,
   StatusBadge,
   Table,
@@ -126,7 +126,7 @@ export default function OverviewDashboard() {
   const shown = holdings.filter((row) => row.name.toLowerCase().includes(query.trim().toLowerCase()));
   return (
     <div className="flex flex-col gap-6">
-      <PageHero
+      <PageHeader
         mark={<InkDrop />}
         eyebrow="The Book"
         title="Holdings"

package/agents/examples/{page-hero.tsx → page-header.tsx}

@@ -1,7 +1,7 @@
-import { Button, PageHero } from "@siyahi/ui";
+import { Button, PageHeader } from "@siyahi/ui";
 import { ArrowRightIcon } from "lucide-react";
 
-// The catalogue's own ink drop, painted with currentColor so the hero tints it.
+// The catalogue's own ink drop, painted with currentColor so the header tints it.
 function InkDrop() {
   return (
     <svg viewBox="0 0 16 16">
@@ -14,9 +14,9 @@ function InkDrop() {
   );
 }
 
-export default function PageHeroExample() {
+export default function PageHeaderExample() {
   return (
-    <PageHero
+    <PageHeader
       eyebrow="@siyahi/ui"
       title="Siyahi"
       lead="Ink for numbers. A design system for pages people read figures from: dashboards, ledgers, reports."

package/agents/examples/select.tsx

@@ -1,4 +1,4 @@
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@siyahi/ui";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@siyahi/ui";
 
 const stores = [
   { label: "All stores", value: "all" },
@@ -15,6 +15,7 @@ export default function SelectExample() {
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
+          <SelectLabel>Sales channel</SelectLabel>
           {stores.map((store) => (
             <SelectItem key={store.value} value={store.value}>
               {store.label}

package/agents/manifest.json

@@ -671,6 +671,16 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/chart-panels-three.tsx",
+      "components": [
+        "AreaChartCard",
+        "BarChartCard",
+        "LineChartCard",
+        "PanelGrid",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-panels.tsx",
       "components": [
@@ -717,7 +727,9 @@
       "components": [
         "ContextMenu",
         "ContextMenuContent",
+        "ContextMenuGroup",
         "ContextMenuItem",
+        "ContextMenuLabel",
         "ContextMenuTrigger"
       ]
     },
@@ -1038,7 +1050,7 @@
         "CardTitle",
         "Delta",
         "Input",
-        "PageHero",
+        "PageHeader",
         "PanelGrid",
         "StatusBadge",
         "Table",
@@ -1054,10 +1066,10 @@
       ]
     },
     {
-      "file": "agents/examples/page-hero.tsx",
+      "file": "agents/examples/page-header.tsx",
       "components": [
         "Button",
-        "PageHero"
+        "PageHeader"
       ]
     },
     {
@@ -1208,6 +1220,7 @@
         "SelectContent",
         "SelectGroup",
         "SelectItem",
+        "SelectLabel",
         "SelectTrigger",
         "SelectValue"
       ]

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

@@ -2,8 +2,8 @@ import { ChartCurve, LineMarksProps, NumericXProps, SeriesChartProps, ValueScale
 //#region src/components/registry/charts/area-chart-card.d.ts
 export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps, LineMarksProps<T, K> {
   /** Stack the series into a total instead of overlapping them. */
-  stacked?: boolean;
-  curve?: ChartCurve;
+  stacked?: boolean | undefined;
+  curve?: ChartCurve | undefined;
 }
 /**
  * Values over an ordered axis: overlapping series drawn as lines, or stacked into a total as tinted bands. A

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

@@ -18,6 +18,7 @@ function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
 		logBlocked: stacked ? "Log cannot show stacked areas" : void 0,
+		stackOffset: stacked ? "none" : void 0,
 		endLabels: !stacked,
 		forecastHatch: !stacked,
 		curve,

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

@@ -2,13 +2,13 @@ import { SeriesChartProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/bar-chart-card.d.ts
 export interface BarChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
   /** Stack the series in one bar per point instead of side by side. */
-  stacked?: boolean;
+  stacked?: boolean | undefined;
   /** Bars run sideways, categories down the left: for long names, such as product categories. */
-  horizontal?: boolean;
+  horizontal?: boolean | undefined;
   /** The picked category's x value: its bars stay solid and the rest fade. */
-  selected?: T[K] | null;
+  selected?: T[K] | null | undefined;
   /** Called with a clicked category's x value, or null when the picked one is clicked again. */
-  onSelect?: (value: T[K] | null) => void;
+  onSelect?: ((value: T[K] | null) => void) | undefined;
 }
 /** 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;

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

@@ -3,13 +3,11 @@ import { ChartFrame, barFill, seriesFill } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 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. */
 function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
 		...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;

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

@@ -1,7 +1,7 @@
 import { ChartCurve, LineMarksProps, NumericXProps, SeriesChartProps, ValueScaleProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/line-chart-card.d.ts
 export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps, LineMarksProps<T, K> {
-  curve?: ChartCurve;
+  curve?: ChartCurve | undefined;
 }
 /** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */
 export declare function LineChartCard<T extends object, K extends keyof T>({ curve, ...props }: LineChartCardProps<T, K>): import("react").JSX.Element;

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -13,18 +13,18 @@ export interface SectionCard {
   /** Muted second footer line. */
   detail?: React$1.ReactNode;
   /** In a picker, a tile that cannot be picked, such as one with nothing in it: faded, and its button disabled. */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /** Marks the tile as the exception on the page: a faint wash of the colour and an outline of it. */
-  tone?: "negative" | "warning";
+  tone?: "negative" | "warning" | undefined;
   /** Marks the tile's data as old, with since when, such as "3 Nov": the tile greys out and says so. */
   stale?: React$1.ReactNode;
 }
 export interface SectionCardsProps {
   items: SectionCard[];
   /** The label of the picked tile. */
-  selected?: string;
+  selected?: string | undefined;
   /** Makes each tile one button, so keep tile content non-interactive; gets the label of the tile picked. */
-  onSelect?: (label: string) => void;
+  onSelect?: ((label: string) => void) | undefined;
 }
 export declare function SectionCards({ items, selected, onSelect }: SectionCardsProps): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/dashboardcn/bar-list.d.ts

@@ -4,24 +4,24 @@ export interface BarListItem {
   name: string;
   value: number;
   /** Renders the label as a link. */
-  href?: string;
+  href?: string | undefined;
   icon?: React$1.ReactNode;
   /** Secondary figure after the label, such as a `Delta`. */
   detail?: React$1.ReactNode;
   /** Stable key when names can repeat. */
-  key?: string;
+  key?: string | undefined;
 }
 export interface BarListProps extends React$1.ComponentProps<"div"> {
   data: BarListItem[];
-  valueFormatter?: (value: number) => string;
-  sortOrder?: "descending" | "ascending" | "none";
+  valueFormatter?: ((value: number) => string) | undefined;
+  sortOrder?: "descending" | "ascending" | "none" | undefined;
   /** Any CSS color. Defaults to chart-1. */
-  color?: string;
+  color?: string | undefined;
   /** Show each row's share of the total next to its value. */
-  showPercentage?: boolean;
+  showPercentage?: boolean | undefined;
   /** The value a full-width bar stands for. Give two lists the same max to draw them on one scale. Defaults to the largest value. */
-  max?: number;
-  onItemClick?: (item: BarListItem) => void;
+  max?: number | undefined;
+  onItemClick?: ((item: BarListItem) => void) | undefined;
 }
 declare function BarList({ data, valueFormatter, sortOrder, color, showPercentage, max: scale, onItemClick, className, ...props }: BarListProps): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/dashboardcn/distribution-bar.d.ts

@@ -5,33 +5,33 @@ export interface DistributionSegment {
   name: string;
   value: number;
   /** Defaults to chart-1 through chart-5 in order; var(--muted) for space that is free. */
-  color?: ChartColor | "var(--muted)";
+  color?: ChartColor | "var(--muted)" | undefined;
   /** Stable key when names can repeat. */
-  key?: string;
+  key?: string | undefined;
 }
 export interface DistributionMarker {
   /** The value the line marks, on the bar's scale. */
   at: number;
-  label?: string;
+  label?: string | undefined;
 }
 export interface DistributionBarProps extends Omit<React$1.ComponentProps<"div">, "onMouseLeave"> {
   segments: DistributionSegment[];
-  valueFormatter?: (value: number) => string;
-  showLegend?: boolean;
+  valueFormatter?: ((value: number) => string) | undefined;
+  showLegend?: boolean | undefined;
   /** Show absolute values in the legend in addition to the share. */
-  showValues?: boolean;
+  showValues?: boolean | undefined;
   /** The value the bar's right end stands for. Defaults to the positive segments' total. */
-  max?: number;
+  max?: number | undefined;
   /**
    * The value the bar's left end stands for. Defaults to the negative segments' total, or 0 when there are none.
    * Above zero, segments (which start at zero) fall off the bar.
    */
-  min?: number;
-  markers?: DistributionMarker[];
+  min?: number | undefined;
+  markers?: DistributionMarker[] | undefined;
   /** The key (or name) of the one segment to keep solid; the rest fade. */
-  highlighted?: string | null;
+  highlighted?: string | null | undefined;
   /** Called with the segment under the pointer, and null when it leaves the bar. */
-  onHover?: (segment: DistributionSegment | null) => void;
+  onHover?: ((segment: DistributionSegment | null) => void) | undefined;
 }
 declare function DistributionBar({ segments, valueFormatter, showLegend, showValues, max, min, markers, highlighted, onHover, className, "aria-label": ariaLabel, ...props }: DistributionBarProps): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/dashboardcn/kpi-row-card.d.ts

@@ -7,14 +7,14 @@ export interface MetricStripItem {
   /** The figure, formatted by the page: money(4512300). */
   value: React$1.ReactNode;
   /** The signed change, drawn as a Delta under the figure; its sign colours the trend. For "pct", a fraction. */
-  change?: number;
-  changeFormat?: "pct" | "money";
+  change?: number | undefined;
+  changeFormat?: "pct" | "money" | undefined;
   /** Muted words after the change, such as "vs last month". */
   note?: React$1.ReactNode;
   /** Recent values, oldest first, drawn as a sparkline beside the figure. */
-  trend?: number[];
+  trend?: number[] | undefined;
   /** Marks the figure as the exception on the page: a faint wash of the colour and an outline of it. */
-  tone?: "negative" | "warning";
+  tone?: "negative" | "warning" | undefined;
 }
 export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
   title?: React$1.ReactNode;

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

@@ -4,18 +4,18 @@ import * as React$1 from "react";
 export interface SparklineProps extends React$1.ComponentProps<"div"> {
   /** Series to plot, oldest first. */
   data: number[];
-  variant?: "area" | "line";
+  variant?: "area" | "line" | undefined;
   /**
    * 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";
+  color?: ChartColor | undefined;
+  curve?: "monotone" | "linear" | "step" | undefined;
   /** The run's line; the last step is 2px. */
-  strokeWidth?: number;
+  strokeWidth?: number | undefined;
   /** Animate after hydration and when data changes. Respects reduced motion. */
-  animate?: boolean;
-  animationDuration?: number;
+  animate?: boolean | undefined;
+  animationDuration?: number | undefined;
 }
 declare function Sparkline({ data, variant, color, curve, strokeWidth, animate, animationDuration, className, ...props }: SparklineProps): React$1.JSX.Element;
 //#endregion

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

@@ -9,41 +9,41 @@ type ActivityWithLevel = Activity & {
   level: number;
 };
 export type Labels = {
-  months?: string[];
-  weekdays?: string[];
-  stat?: string;
-  cellLabel?: string;
-  heatmapLabel?: string;
-  legendLabel?: string;
-  legendLevelLabel?: string;
+  months?: string[] | undefined;
+  weekdays?: string[] | undefined;
+  stat?: string | undefined;
+  cellLabel?: string | undefined;
+  heatmapLabel?: string | undefined;
+  legendLabel?: string | undefined;
+  legendLevelLabel?: string | undefined;
 };
 export type ColorConfig = {
-  empty?: string;
-  scale?: string;
+  empty?: string | undefined;
+  scale?: string | undefined;
 };
 export type CalendarHeatmapProps = HTMLAttributes<HTMLDivElement> & {
   data: Activity[];
-  weekStart?: Day;
-  continuousMonths?: boolean;
-  hasEmptyColumn?: boolean;
-  blockSize?: number;
-  blockMargin?: number;
-  blockRadius?: number;
-  blockAspectRatio?: number;
-  levels?: number;
-  isNormalized?: boolean;
+  weekStart?: Day | undefined;
+  continuousMonths?: boolean | undefined;
+  hasEmptyColumn?: boolean | undefined;
+  blockSize?: number | undefined;
+  blockMargin?: number | undefined;
+  blockRadius?: number | undefined;
+  blockAspectRatio?: number | undefined;
+  levels?: number | undefined;
+  isNormalized?: boolean | undefined;
   /** Colour each day green or red by its sign, deeper the larger it is, for a daily gain or loss. */
-  signed?: boolean;
+  signed?: boolean | undefined;
   /** With signed: the size that takes the deepest step. Defaults to the largest day's. */
-  range?: number;
-  colors?: ColorConfig;
-  locale?: Locale;
-  labels?: Labels;
-  fontSize?: number;
+  range?: number | undefined;
+  colors?: ColorConfig | undefined;
+  locale?: Locale | undefined;
+  labels?: Labels | undefined;
+  fontSize?: number | undefined;
   emptyState?: ReactNode;
-  totalCount?: number;
-  style?: CSSProperties;
-  className?: string;
+  totalCount?: number | undefined;
+  style?: CSSProperties | undefined;
+  className?: string | undefined;
   children: ReactNode;
 };
 /**
@@ -82,60 +82,60 @@ export type CalendarHeatmapProps = HTMLAttributes<HTMLDivElement> & {
 export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize: blockSizeProp, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, signed, range, 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;
+  selected?: boolean | undefined;
   activity: ActivityWithLevel;
   dayIndex: number;
   weekIndex: number;
-  highlighted?: boolean;
-  onCellClick?: (activity: ActivityWithLevel) => void;
-  onCellHover?: (activity: ActivityWithLevel | null) => void;
+  highlighted?: boolean | undefined;
+  onCellClick?: ((activity: ActivityWithLevel) => void) | undefined;
+  onCellHover?: ((activity: ActivityWithLevel | null) => void) | undefined;
 };
 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>;
+  ref?: React.RefObject<SVGRectElement | null> | undefined;
 }): import("react").JSX.Element;
 export declare namespace CalendarHeatmapBlock {
   var displayName: string;
 }
 export type CalendarHeatmapBodyProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
-  hideMonthLabels?: boolean;
-  hideWeekdayLabels?: boolean;
-  hideYearLabels?: boolean;
-  className?: string;
-  labelClassName?: string;
-  yearClassName?: string;
+  hideMonthLabels?: boolean | undefined;
+  hideWeekdayLabels?: boolean | undefined;
+  hideYearLabels?: boolean | undefined;
+  className?: string | undefined;
+  labelClassName?: string | undefined;
+  yearClassName?: string | undefined;
   children: (props: {
     activity: ActivityWithLevel;
     dayIndex: number;
     weekIndex: number;
   }) => ReactNode;
-  renderYearFooter?: (props: {
+  renderYearFooter?: ((props: {
     year: number;
     totalCount: number;
-  }) => ReactNode;
+  }) => ReactNode) | undefined;
 };
 export declare const CalendarHeatmapBody: ({ hideMonthLabels, hideWeekdayLabels, hideYearLabels, className, labelClassName, yearClassName, children, renderYearFooter, ...props }: CalendarHeatmapBodyProps) => import("react").JSX.Element;
 export type CalendarHeatmapFooterProps = HTMLAttributes<HTMLDivElement>;
 export declare const CalendarHeatmapFooter: ({ className, ...props }: CalendarHeatmapFooterProps) => import("react").JSX.Element;
 export type CalendarHeatmapStatProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
-  compute?: (data: ActivityWithLevel[]) => number | string;
-  label?: string;
-  children?: (result: {
+  compute?: ((data: ActivityWithLevel[]) => number | string) | undefined;
+  label?: string | undefined;
+  children?: ((result: {
     value: number | string;
     data: ActivityWithLevel[];
     year: number;
-  }) => ReactNode;
+  }) => ReactNode) | undefined;
 };
 export declare const CalendarHeatmapStat: ({ compute, label, className, children, ...props }: CalendarHeatmapStatProps) => import("react").JSX.Element;
 export type CalendarHeatmapLegendProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> & {
   labels?: {
-    less?: string;
-    more?: string;
-  };
+    less?: string | undefined;
+    more?: string | undefined;
+  } | undefined;
   /** A signed heatmap's figures in the legend's scale line, such as useFormat().money. */
-  valueFormatter?: (value: number) => string;
-  children?: (props: {
+  valueFormatter?: ((value: number) => string) | undefined;
+  children?: ((props: {
     level: number;
-  }) => ReactNode;
+  }) => ReactNode) | undefined;
 };
 export declare const CalendarHeatmapLegend: ({ labels: labelsProp, valueFormatter, className, children, ...props }: CalendarHeatmapLegendProps) => import("react").JSX.Element;
 //#endregion

package/dist/components/registry/heatmap/calendar-heatmap.js

@@ -226,7 +226,7 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels(), yearTicks = f
 * @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.
 */
-const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, signed = false, range, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
+const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 0, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, signed = false, range, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
 	const [rootRef, rootWidth] = useElementWidth();
 	const dataWithLevels = useMemo(() => {