@siyahi/ui 0.1.9-next.31 → 0.1.9-next.33

package/DESIGN.md

@@ -51,9 +51,10 @@ a meaning:
   colour, not separate hues.
 - **Colour marks exceptions.** The one stat tile or table row that needs a look
   is marked by the page: `tone: "negative"` or `"warning"` on a `SectionCards`
-  item, `data-tone="negative"` or `"warning"` on a `TableRow`. It takes a faint
-  wash of the colour over the card (7% in light, 12% in dark), and a tile an
-  outline of it. The page decides, never the sign: a falling cost is good news.
+  or `MetricStrip` item, `data-tone="negative"` or `"warning"` on a `TableRow`,
+  and `getRowTone` on a `DataTableBody`, returning the tone for the row. It
+  takes a faint wash of the colour over the card (7% in light, 12% in dark),
+  and a tile or figure an outline of it. The page decides, never the sign: a falling cost is good news.
   Mark one or two; a page where every row is washed marks nothing.
 
 ## Surfaces

package/agents/examples/data-table.tsx

@@ -36,6 +36,9 @@ const products: Product[] = [
   { product: "Desk lamp", category: "Lighting", units: 900, revenue: 255600, change: 0.009 },
 ];
 
+// The page's own rule for a product that needs a look; a falling figure alone would not be one.
+const tone = (product: Product): "warning" | undefined => (product.units < 50 ? "warning" : undefined);
+
 // One click sorts largest (or Z) first; the title comes from meta.label.
 const header = () => <DataTableSortHeader />;
 
@@ -87,7 +90,7 @@ export default function DataTableExample() {
           </DataTableToolbarSection>
           <DataTable aria-label="Products">
             <DataTableHeader />
-            <DataTableBody />
+            <DataTableBody getRowTone={tone} />
           </DataTable>
         </DataTableRoot>
       </CardContent>

package/agents/examples/metric-strip.tsx

@@ -25,6 +25,8 @@ export default function MetricStripExample() {
       change: -61200,
       changeFormat: "money",
       trend: [14200, -3800, 9100, 2600, -18400, -61200],
+      // The one figure on the strip that needs a look, marked by the page: a falling margin alone would not be.
+      tone: "negative",
     },
     { label: "Gift cards", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
     { label: "Products", value: count(42), note: "3 added in Oct", trend: [38, 39, 39, 40, 39, 42] },

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/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/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,12 +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" | undefined;
 }
 export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
   title?: React$1.ReactNode;

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

@@ -39,6 +39,7 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 					className: "-me-px -mb-px flex flex-wrap",
 					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 						"data-slot": "metric-strip-item",
+						"data-tone": item.tone,
 						className: cn("flex min-w-0 flex-col gap-1.5 border-e border-b px-4 py-4", columns),
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "truncate font-mono text-2xs tracking-wider text-muted-foreground uppercase",

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/status-heatmap.d.ts

@@ -7,39 +7,39 @@ export type StatusActivity = {
   value: StatusValue;
 };
 export type StatusHeatmapLabels = {
-  statuses?: Record<number, string> & {
-    noData?: string;
-    critical?: string;
-    degraded?: string;
-    healthy?: string;
-  };
-  stat?: string;
-  cellLabel?: string;
-  heatmapLabel?: string;
-  legendLabel?: string;
+  statuses?: (Record<number, string> & {
+    noData?: string | undefined;
+    critical?: string | undefined;
+    degraded?: string | undefined;
+    healthy?: string | undefined;
+  }) | undefined;
+  stat?: string | undefined;
+  cellLabel?: string | undefined;
+  heatmapLabel?: string | undefined;
+  legendLabel?: string | undefined;
 };
 export type StatusColorConfig = Record<number, string> & {
-  noData?: string;
-  critical?: string;
-  degraded?: string;
-  healthy?: string;
+  noData?: string | undefined;
+  critical?: string | undefined;
+  degraded?: string | undefined;
+  healthy?: string | undefined;
 };
 export type StatusHeatmapProps = HTMLAttributes<HTMLDivElement> & {
   data: StatusActivity[];
-  dateFormat?: string;
-  blockSize?: number;
-  blockMargin?: number;
-  blockRadius?: number;
-  blockAspectRatio?: number;
-  colors?: StatusColorConfig;
-  locale?: Locale;
-  labels?: StatusHeatmapLabels;
-  fontSize?: number;
+  dateFormat?: string | undefined;
+  blockSize?: number | undefined;
+  blockMargin?: number | undefined;
+  blockRadius?: number | undefined;
+  blockAspectRatio?: number | undefined;
+  colors?: StatusColorConfig | undefined;
+  locale?: Locale | undefined;
+  labels?: StatusHeatmapLabels | undefined;
+  fontSize?: number | undefined;
   emptyState?: ReactNode;
-  statusValues?: StatusValue[];
-  healthyValue?: StatusValue;
-  style?: CSSProperties;
-  className?: string;
+  statusValues?: StatusValue[] | undefined;
+  healthyValue?: StatusValue | undefined;
+  style?: CSSProperties | undefined;
+  className?: string | undefined;
   children: ReactNode;
 };
 /**
@@ -75,25 +75,25 @@ export type StatusHeatmapProps = HTMLAttributes<HTMLDivElement> & {
 export declare const StatusHeatmap: ({ data, dateFormat, blockSize, blockMargin, blockRadius, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize, emptyState, statusValues, healthyValue, style, className, children, ...props }: StatusHeatmapProps) => 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 StatusHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   /** The cell the page has picked: drawn with a ring and announced as pressed. */
-  selected?: boolean;
+  selected?: boolean | undefined;
   activity: StatusActivity;
   dayIndex: number;
-  highlighted?: boolean;
-  onCellClick?: (activity: StatusActivity) => void;
-  onCellHover?: (activity: StatusActivity | null) => void;
-  className?: string;
+  highlighted?: boolean | undefined;
+  onCellClick?: ((activity: StatusActivity) => void) | undefined;
+  onCellHover?: ((activity: StatusActivity | null) => void) | undefined;
+  className?: string | undefined;
 };
 export declare function StatusHeatmapBlock({ ref, activity, dayIndex, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: StatusHeatmapBlockProps & {
-  ref?: React.RefObject<SVGRectElement | null>;
+  ref?: React.RefObject<SVGRectElement | null> | undefined;
 }): import("react").JSX.Element;
 export declare namespace StatusHeatmapBlock {
   var displayName: string;
 }
 export type StatusHeatmapBodyProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
-  hideDateLabels?: boolean;
-  labelInterval?: number;
-  className?: string;
-  labelClassName?: string;
+  hideDateLabels?: boolean | undefined;
+  labelInterval?: number | undefined;
+  className?: string | undefined;
+  labelClassName?: string | undefined;
   children: (props: {
     activity: StatusActivity;
     dayIndex: number;
@@ -103,20 +103,20 @@ export declare const StatusHeatmapBody: ({ hideDateLabels, labelInterval, classN
 export type StatusHeatmapFooterProps = HTMLAttributes<HTMLDivElement>;
 export declare const StatusHeatmapFooter: ({ className, ...props }: StatusHeatmapFooterProps) => import("react").JSX.Element;
 export type StatusHeatmapStatProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
-  compute?: (data: StatusActivity[]) => number | string;
-  label?: string;
-  children?: (result: {
+  compute?: ((data: StatusActivity[]) => number | string) | undefined;
+  label?: string | undefined;
+  children?: ((result: {
     value: number | string;
     data: StatusActivity[];
-  }) => ReactNode;
+  }) => ReactNode) | undefined;
 };
 export declare const StatusHeatmapStat: ({ compute, label, className, children, ...props }: StatusHeatmapStatProps) => import("react").JSX.Element;
 export type StatusHeatmapLegendProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> & {
-  labels?: StatusHeatmapLabels["statuses"];
-  children?: (props: {
+  labels?: StatusHeatmapLabels["statuses"] | undefined;
+  children?: ((props: {
     value: StatusValue;
     label: string;
-  }) => ReactNode;
+  }) => ReactNode) | undefined;
 };
 export declare const StatusHeatmapLegend: ({ labels: labelsProp, className, children, ...props }: StatusHeatmapLegendProps) => import("react").JSX.Element;
 //#endregion