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

package/dist/components/siyahi/histogram-chart.d.ts

@@ -38,15 +38,15 @@ export interface HistogramChartCardProps extends Pick<SeriesChartProps<Histogram
   /** The raw values, one per item, such as each request's response time. */
   values: readonly number[];
   /** About how many buckets; the width is rounded, so the count varies a little. */
-  bins?: number;
+  bins?: number | undefined;
   /** Writes the bucket edges and the marks, such as (v) => `${v} ms`. Defaults to the locale's numbers. */
-  valueFormatter?: (value: number) => string;
+  valueFormatter?: ((value: number) => string) | undefined;
   /** The bucket edges under the axis, when they should be shorter than valueFormatter: 1,000 against 1,000 ms. */
-  tickFormatter?: (value: number) => string;
+  tickFormatter?: ((value: number) => string) | undefined;
   /** What is counted, in the legend and tooltip, such as "Requests". */
-  countLabel?: string;
+  countLabel?: string | undefined;
   /** Percentiles to mark with a line at their bucket; their exact values are written under the chart. */
-  marks?: readonly HistogramMark[];
+  marks?: readonly HistogramMark[] | undefined;
 }
 /**
  * How values spread: counts in buckets of one round width, such as response times by 50 ms, with the median or a

package/dist/components/siyahi/local-time.d.ts

@@ -2,7 +2,7 @@
 export interface LocalTimeProps {
   value: Date | number | string;
   /** Write the date, in the same zone, before the time: 20 Oct 2026, 14:30 IST. */
-  withDate?: boolean;
+  withDate?: boolean | undefined;
 }
 /** A time in the configured zone (14:30 IST), with the viewer's own clock in a tooltip. */
 export declare function LocalTime({ value, withDate }: LocalTimeProps): import("react").JSX.Element;

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

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 //#region src/components/siyahi/page-section.d.ts
 export interface PageSectionProps {
   /** Anchor for a table of contents; the section scrolls in with room above it. */
-  id?: string;
+  id?: string | undefined;
   /** Small muted line above the title, such as "Part 2". */
   eyebrow?: ReactNode;
   title: ReactNode;

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

@@ -7,9 +7,9 @@ export interface PageTocItem {
 export interface PageTocProps {
   items: PageTocItem[];
   /** Names the navigation for screen readers. */
-  label?: string;
+  label?: string | undefined;
   /** Layout only, such as `top-14` under a sticky page header. */
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * A long page's sections as one sticky "On this page" index. It stays at the top while the reader scrolls,

package/dist/components/siyahi/panel-grid.d.ts

@@ -8,9 +8,9 @@ declare const COLUMNS: {
 };
 export interface PanelGridProps {
   /** Blocks across on a wide page; two on a medium one, and one on a phone. */
-  columns?: keyof typeof COLUMNS;
+  columns?: keyof typeof COLUMNS | undefined;
   children: ReactNode;
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface, the default, the grid is filled

package/dist/components/siyahi/price-chart.d.ts

@@ -5,7 +5,7 @@ export interface PriceChartProps {
   /** Fixed height in pixels. */
   height: number;
   /** TradingView's licence asks for a credit on the page; turn it off on the second chart. */
-  credit?: boolean;
+  credit?: boolean | undefined;
 }
 /** A TradingView Lightweight Charts price chart in the theme's colours, redrawn when the scheme changes. */
 export declare function PriceChart({ data, height, credit }: PriceChartProps): import("react").JSX.Element;

package/dist/components/siyahi/range-position.d.ts

@@ -5,15 +5,15 @@ export interface RangePositionProps {
   high: number;
   value: number;
   /** Names the low end: "52-week low". */
-  lowLabel?: string;
-  highLabel?: string;
+  lowLabel?: string | undefined;
+  highLabel?: string | undefined;
   /** Follows the percentage in the full variant: "of the way up the 52-week range". */
   caption?: ReactNode;
   /** Writes low, high and value; useFormat().money by default. */
-  valueFormatter?: (value: number) => string;
+  valueFormatter?: ((value: number) => string) | undefined;
   /** compact fits a table cell: the ends' figures either side of the track, nothing above it. */
-  variant?: "full" | "compact";
-  className?: string;
+  variant?: "full" | "compact" | undefined;
+  className?: string | undefined;
 }
 /**
  * How far a value sits between a low and a high, such as a price in its 52-week range: a track filled to the value

package/dist/components/siyahi/scale-toggle.d.ts

@@ -7,11 +7,11 @@ export interface ScaleToggleProps {
   /** The group's accessible name, such as "Share of book scale". */
   label: string;
   /** The axis' name shown before the buttons, for a card with a toggle on each axis. */
-  caption?: string;
+  caption?: string | undefined;
   value: AxisScale;
   onValueChange: (scale: AxisScale) => void;
   /** Why log cannot draw this data, such as a value at or below zero: Log is disabled and this shows beside it. */
-  logBlocked?: string;
+  logBlocked?: string | undefined;
 }
 /** Linear and Log buttons for one chart axis, in the header's toggle style. */
 export declare function ScaleToggle({ label, caption, value, onValueChange, logBlocked }: ScaleToggleProps): import("react").JSX.Element;

package/dist/components/siyahi/scatter-chart.d.ts

@@ -9,12 +9,12 @@ export interface ScatterPoint {
   /** Up. `null` when unknown: the point is not drawn, so say on the page how many are missing. */
   y: number | null;
   /** Unique key when names repeat, such as one product sold in two regions. Defaults to `name`. */
-  key?: string;
+  key?: string | undefined;
   /**
    * A weight, such as a holding's value: the dot's area follows it. Give every point a size, or none. A size that is
    * not a positive number draws the smallest dot and leaves the others' sizes as they are.
    */
-  size?: number;
+  size?: number | undefined;
 }
 /** One tooltip row: a label and its figure, such as ["Sales", "₹9.8L"]. */
 export type ScatterDetail = readonly [label: string, value: string];
@@ -35,33 +35,33 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
    * "log" spreads values across powers of ten, for sizes that run from tiny to large. With xScaleToggle it is the
    * first selection. Log draws only when every x is above zero; otherwise the axis is linear.
    */
-  xScale?: AxisScale;
+  xScale?: AxisScale | undefined;
   /** Linear and Log buttons for the x axis in the header, so a reader can switch. */
-  xScaleToggle?: boolean;
+  xScaleToggle?: boolean | undefined;
   /** As xScale, for the y axis: log draws only when every y is above zero. */
-  yScale?: AxisScale;
+  yScale?: AxisScale | undefined;
   /** Linear and Log buttons for the y axis in the header. */
-  yScaleToggle?: boolean;
+  yScaleToggle?: boolean | undefined;
   /** The x ticks and the tooltip's x figure. Defaults to the locale's numbers. */
-  xFormatter?: (value: number) => string;
+  xFormatter?: ((value: number) => string) | undefined;
   /** The y ticks and the tooltip's y figure. Defaults to the locale's numbers. */
-  yFormatter?: (value: number) => string;
+  yFormatter?: ((value: number) => string) | undefined;
   /** How many points get their name beside the dot, at most; a name with no free spot is left to the tooltip. */
-  labels?: number;
+  labels?: number | undefined;
   /** The tooltip's rows under the point's name, and what a screen reader hears. Defaults to the two axes' figures. */
-  details?: (point: T) => readonly ScatterDetail[];
+  details?: ((point: T) => readonly ScatterDetail[]) | undefined;
   /** The point that carries a ring, matched by key; pass back what onSelect gave. */
-  selected?: T | null;
+  selected?: T | null | undefined;
   /** Gets a tapped or keyed point, and null on a second tap, Escape or a tap on the plot. */
-  onSelect?: (point: T | null) => void;
+  onSelect?: ((point: T | null) => void) | undefined;
   /** Lines under the chart, such as a caption or how many points are not drawn. */
   footer?: ReactNode;
   /** Dashed lines at a value on each axis, splitting the plot into four, and the corners' names. */
-  quadrants?: ScatterQuadrants;
+  quadrants?: ScatterQuadrants | undefined;
   /** Names the size in the tooltip, such as "Value". Defaults to "Size". */
-  sizeLabel?: string;
+  sizeLabel?: string | undefined;
   /** The tooltip's size figure. Defaults to the locale's numbers. */
-  sizeFormatter?: (value: number) => string;
+  sizeFormatter?: ((value: number) => string) | undefined;
 }
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
 export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height, xLabel, yLabel, xScale, xScaleToggle, yScale, yScaleToggle, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;

package/dist/components/siyahi/siyahi-provider.d.ts

@@ -1,3 +1,4 @@
+import { Optional } from "../../lib/optional.js";
 import { SiyahiLocale } from "../../lib/locale.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/siyahi-provider.d.ts
@@ -10,12 +11,12 @@ import { ReactNode } from "react";
 export type Surface = "ruled" | "card" | "open";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
-  locale?: Partial<SiyahiLocale>;
+  locale?: Optional<SiyahiLocale> | undefined;
   /**
    * Set it on a nested provider for one part of a page. Left out, a provider keeps the surface around it, so a
    * provider that only changes the locale changes nothing else; the outermost default is "ruled".
    */
-  surface?: Surface;
+  surface?: Surface | undefined;
   children: ReactNode;
 }
 /** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */

package/dist/components/siyahi/siyahi-provider.js

@@ -7,10 +7,7 @@ const LocaleContext = createContext(defaultLocale);
 const SurfaceContext = createContext("ruled");
 /** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
 function SiyahiProvider({ locale, surface, children }) {
-	const { numberLocale, currency, timeZone } = {
-		...defaultLocale,
-		...locale
-	};
+	const { numberLocale = defaultLocale.numberLocale, currency = defaultLocale.currency, timeZone = defaultLocale.timeZone } = locale ?? {};
 	const value = useMemo(() => ({
 		numberLocale,
 		currency,

package/dist/components/siyahi/slope-chart.d.ts

@@ -6,7 +6,7 @@ export interface SlopeItem {
   /** The value on the right: after, or our own figure. */
   to: number;
   /** Unique key when names repeat. Defaults to `name`. */
-  key?: string;
+  key?: string | undefined;
 }
 export interface SlopeChartProps {
   /** An item whose from or to is not a finite number is not drawn: say on the page how many are left out. */
@@ -16,10 +16,10 @@ export interface SlopeChartProps {
   /** Heads the right side, such as "Portfolio" or "2026". */
   toLabel: string;
   /** Keys (or names) of the items to draw in the accent colour; the rest stay grey. */
-  highlighted?: readonly string[];
+  highlighted?: readonly string[] | undefined;
   /** Writes each end's value; useFormat().pct by default. */
-  valueFormatter?: (value: number) => string;
-  className?: string;
+  valueFormatter?: ((value: number) => string) | undefined;
+  className?: string | undefined;
 }
 /**
  * Pushes labels apart so none sits closer than `gap` to the next, keeping their order and staying inside [min, max]:

package/dist/components/siyahi/status-alert.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps } from "react";
 //#region src/components/siyahi/status-alert.d.ts
 export interface StatusAlertProps extends Omit<ComponentProps<typeof Alert>, "variant"> {
   /** neutral for information, warning for a caution, negative for an error, positive for a success. */
-  tone?: Tone;
+  tone?: Tone | undefined;
 }
 /**
  * A notice the reader must not miss: the whole card takes its tone, a faint wash inside a border of the same colour,

package/dist/components/siyahi/status-badge.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps } from "react";
 //#region src/components/siyahi/status-badge.d.ts
 export interface StatusBadgeProps extends Omit<ComponentProps<typeof Badge>, "variant"> {
   /** positive for done or paid, warning for pending, negative for failed, accent for new, neutral for a draft. */
-  tone?: Tone;
+  tone?: Tone | undefined;
 }
 /**
  * A state, such as Paid, Pending or Failed: the badge takes its tone's wash and border, and a dot in the tone's

package/dist/components/siyahi/target-rows.d.ts

@@ -13,18 +13,18 @@ export interface TargetRow {
   value: number;
   target: number;
   /** Qualitative ranges behind the bar as [from, to]; each later band draws a grey step darker, so nest them. */
-  bands?: [number, number][];
-  status?: TargetStatus;
+  bands?: [number, number][] | undefined;
+  status?: TargetStatus | undefined;
   /** Tells rows apart when labels are not plain unique text. */
-  key?: string;
+  key?: string | undefined;
 }
 export interface TargetRowsProps {
   rows: TargetRow[];
   /** The scale every row shares; by default 0 to the largest value, target or band edge. */
-  domain?: [number, number];
+  domain?: [number, number] | undefined;
   /** Writes the value and the target; useFormat().count by default. */
-  valueFormatter?: (value: number) => string;
-  className?: string;
+  valueFormatter?: ((value: number) => string) | undefined;
+  className?: string | undefined;
 }
 /**
  * Bullet rows: each row's label, value and status beside a track where the value is a solid bar, the target a tall

package/dist/components/siyahi/treemap.d.ts

@@ -6,35 +6,35 @@ export interface TreemapItem {
   /** Signed change as a fraction; sets the heat. `null` when unknown: a muted tile marked "—". */
   change: number | null;
   /** Unique key when names repeat, such as one city sold to online and in stores. Defaults to `name`. */
-  key?: string;
+  key?: string | undefined;
   /** Tiles of one group, such as a region, sit together under the group's name, even a group of one. */
-  group?: string;
+  group?: string | undefined;
 }
 export interface TreemapProps<T extends TreemapItem> {
   items: T[];
   height: number;
   /** ±range: the change, as a fraction, that takes the deepest heat step. Default 0.05 (±5%); a range that is not a positive number uses the default. */
-  range?: number;
+  range?: number | undefined;
   /**
    * Gets the item under a mouse, and null when it moves onto a group's name or leaves the map. A tap fires no hover:
    * on a touch screen it selects, so the page shows the tile in place rather than in a card at the finger.
    */
-  onHover?: (item: T | null) => void;
+  onHover?: ((item: T | null) => void) | undefined;
   /** The selected item, matched by key, whose tile carries a ring. Pass back what onSelect gave. */
-  selected?: T | null;
+  selected?: T | null | undefined;
   /**
    * Gets the item whose tile is tapped or clicked, and null when the selected
    * tile is tapped again or a tap lands anywhere else. On a touch screen, which
    * has no hover, this is how a reader gets a tile's figures.
    */
-  onSelect?: (item: T | null) => void;
+  onSelect?: ((item: T | null) => void) | undefined;
 }
 /** Heat map of parts of a whole: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover, selected, onSelect }: TreemapProps<T>): import("react").JSX.Element;
 export interface TreemapLegendProps {
   /** The Treemap's own range, so each swatch matches its tiles. */
-  range?: number;
-  className?: string;
+  range?: number | undefined;
+  className?: string | undefined;
 }
 /** The Treemap's colour scale under the map: five steps of loss, no change, five steps of gain, deepest at the ends. */
 export declare function TreemapLegend({ range, className }: TreemapLegendProps): import("react").JSX.Element;

package/dist/components/siyahi/waterfall-chart.d.ts

@@ -12,7 +12,7 @@ export type WaterfallStep = {
 } | {
   kind: "total";
   label: string;
-  value?: number;
+  value?: number | undefined;
 };
 /** A step as drawn: the running total after it, and the span its bar covers. */
 export interface WaterfallBar {
@@ -35,13 +35,13 @@ export interface WaterfallChartCardProps extends Pick<SeriesChartProps<Waterfall
   /** The bars in order: usually a total to start from, the changes, and a total to end on. */
   steps: readonly WaterfallStep[];
   /** Bars run sideways with the labels down the left, for long names such as product categories. */
-  horizontal?: boolean;
+  horizontal?: boolean | undefined;
   /** What the legend calls each kind of bar. */
   labels?: {
     rise: string;
     fall: string;
     total: string;
-  };
+  } | undefined;
 }
 /**
  * A running total bridged step by step: where it starts, each change that moved it, and where it ends, such as a

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

@@ -24,7 +24,7 @@ export declare function QuietLegend<T>({ series, raisable, raised, onRaise }: Qu
 interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<SeriesChartProps<T, K>, "yDomain">, NumericXProps, ValueScaleProps, LineMarksProps<T, K> {
   chart: typeof AreaChart | typeof BarChart | typeof LineChart;
   /** The value axis' range: a page's fixed one, or a card's rule such as bars reaching zero. */
-  yDomain?: YAxisProps["domain"];
+  yDomain?: YAxisProps["domain"] | undefined;
   /** One Bar, Area or Line per series. */
   children: ReactNode;
   /**
@@ -32,22 +32,22 @@ interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<Seri
    * chart-bar-horizontal. The value axis runs along the bottom when yTickFormatter is given, and is hidden
    * otherwise. x and y keep their meaning: x is the category, y the value.
    */
-  horizontal?: boolean;
+  horizontal?: boolean | undefined;
   /** "sign" stacks negative values below zero and positive ones above, rather than on one running total. */
-  stackOffset?: "sign";
-  onClick?: ComponentProps<typeof BarChart>["onClick"];
+  stackOffset?: "sign" | undefined;
+  onClick?: ComponentProps<typeof BarChart>["onClick"] | undefined;
   /** A tooltip row per hovered mark; by default each series' colour, label and formatted value (seriesRow). */
-  tooltipRow?: ComponentProps<typeof ChartTooltipContent>["formatter"];
+  tooltipRow?: ComponentProps<typeof ChartTooltipContent>["formatter"] | undefined;
   /** The legend under the plot; by default one chip per series. */
-  legend?: ReactElement;
+  legend?: ReactElement | undefined;
   /** Why this chart cannot go on a log scale whatever its values, such as stacked areas adding up from zero. */
-  logBlocked?: string;
+  logBlocked?: string | undefined;
   /** The marks are lines (a line chart, unstacked areas): name each series at its line's end, where there is room. */
-  endLabels?: boolean;
+  endLabels?: boolean | undefined;
   /** Hatch a forecast stretch, behind lines that sit on card halos; a stack's fills cover it already. */
-  forecastHatch?: boolean;
+  forecastHatch?: boolean | undefined;
   /** The lines' curve, which a grey line raised from the legend is drawn with too. */
-  curve?: ChartCurve;
+  curve?: ChartCurve | undefined;
 }
 /**
  * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
@@ -59,9 +59,9 @@ export declare function seriesFill<T>(item: ChartSeriesItem<T>, data: readonly T
  * grid, and none elsewhere. The eye lands on now, where a reader starts.
  */
 export declare function endDot(color: ChartColor, count: number, hollow?: boolean): ({ cx, cy, index }: {
-  cx?: number;
-  cy?: number;
-  index?: number;
+  cx?: number | undefined;
+  cy?: number | undefined;
+  index?: number | undefined;
 }) => import("react").JSX.Element;
 /** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
 export declare function seriesRow<T>(series: ChartSeries<T>, formatValue: (value: number) => string): (value: unknown, _name: unknown, item: {

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

@@ -65,9 +65,9 @@ interface TimeMarksProps<T extends object, K extends keyof T> {
   data: readonly T[];
   xKey: K;
   /** The x value from which the data is a forecast. */
-  forecastFrom?: T[K];
+  forecastFrom?: T[K] | undefined;
   /** The x value of today. */
-  today?: T[K];
+  today?: T[K] | undefined;
   /** Prefix of the clip paths the series' actual and forecast copies use (`<id>-actual`, `<id>-forecast`). */
   clipId: string;
   /** Hatch the forecast stretch; a stack's fills already cover it, so a stacked chart only labels it. */

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

@@ -14,7 +14,7 @@ export interface ChartSeriesItem<T> {
   label: string;
   color: ChartColor;
   /** A bar below zero takes this colour instead, such as var(--negative) for a loss beside var(--positive). */
-  negativeColor?: ChartColor;
+  negativeColor?: ChartColor | undefined;
 }
 /**
  * The series in draw, stack and legend order; give the slots in order from
@@ -28,16 +28,16 @@ export type ChartSeries<T> = readonly ChartSeriesItem<T>[];
  */
 export type ChartReferenceLine = ({
   y: number;
-  x?: never;
+  x?: never | undefined;
 } | {
   x: number | string;
-  y?: never;
+  y?: never | undefined;
 }) & {
-  label?: string;
+  label?: string | undefined;
   /** "strong" draws it in the text colour, for the line that matters most; "muted" by default. */
-  emphasis?: "muted" | "strong";
+  emphasis?: "muted" | "strong" | undefined;
   /** Where the label sits against the line. Defaults to insideTopLeft. */
-  labelPosition?: "insideTopLeft" | "insideTopRight" | "insideBottomLeft" | "insideBottomRight";
+  labelPosition?: "insideTopLeft" | "insideTopRight" | "insideBottomLeft" | "insideBottomRight" | undefined;
 };
 /** What BarChartCard, AreaChartCard and LineChartCard all take. */
 export interface SeriesChartProps<T extends object, K extends keyof T> {
@@ -51,35 +51,35 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   xKey: K;
   series: ChartSeries<NoInfer<T>>;
   /** Categories to label, or tick positions with xDomain. Every named tick is drawn; other rows keep their marks and tooltips. */
-  xTicks?: readonly T[K][];
+  xTicks?: readonly T[K][] | undefined;
   /** The x axis ticks, and the tooltip's heading unless xTooltipFormatter is set. Defaults to the value as text. */
-  xFormatter?: (value: T[K]) => string;
+  xFormatter?: ((value: T[K]) => string) | undefined;
   /** The tooltip's heading, when it should say more than a tick: "19:34:13 IST, 10 s average" against "19:34". */
-  xTooltipFormatter?: (value: T[K]) => string;
+  xTooltipFormatter?: ((value: T[K]) => string) | undefined;
   /** A series' value in the tooltip, and the y axis unless yTickFormatter is set. Defaults to the locale's numbers. */
-  valueFormatter?: (value: number) => string;
+  valueFormatter?: ((value: number) => string) | undefined;
   /**
    * The y axis, when its ticks should be shorter than the tooltip's figures: moneyCompact against money. It gets the
    * axis' largest tick as `scale`, so moneyCompact writes every tick in one unit.
    */
-  yTickFormatter?: (value: number, scale: number) => string;
+  yTickFormatter?: ((value: number, scale: number) => string) | undefined;
   /**
    * A fixed range for the value axis, such as [0, 100] for a percentage. By default it fits the data; a bar
    * chart's always reaches zero.
    */
-  yDomain?: [number, number];
+  yDomain?: [number, number] | undefined;
   /** Where the value axis puts its ticks, such as [0, 25, 50, 75, 100]. */
-  yTicks?: readonly number[];
+  yTicks?: readonly number[] | undefined;
   /** Height of the plot and legend, in pixels. Sideways bars grow when wrapped tick details need more room. */
   height: number;
   /** A second line under each x tick, so a row's figure reads without a hover: "FY24" then "+₹1.2L". */
-  xTickDetail?: (row: T) => string;
+  xTickDetail?: ((row: T) => string) | undefined;
   /** A title under the x axis, such as "Hour of day (IST)". Not drawn on sideways bars. */
-  xLabel?: string;
+  xLabel?: string | undefined;
   /** A title beside the value axis, read bottom to top, such as "Orders". Not drawn on sideways bars. */
-  yLabel?: string;
+  yLabel?: string | undefined;
   /** Limits and events to mark on the plot. A zero line draws by itself when a value goes below zero. */
-  referenceLines?: readonly ChartReferenceLine[];
+  referenceLines?: readonly ChartReferenceLine[] | undefined;
   /** Shown in the plot's place, at its height, while the data loads or after it failed to. */
   placeholder?: ReactNode;
   /** Lines under the chart, such as a caption or a takeaway, in the card's footer. */
@@ -96,14 +96,14 @@ export interface LineMarksProps<T extends object, K extends keyof T> {
    * The x value from which the data is a forecast, such as the last month-end: each line goes dashed from it, a faint
    * hatched band labelled FORECAST covers the stretch, and the end dots are hollow.
    */
-  forecastFrom?: NoInfer<T[K]>;
+  forecastFrom?: NoInfer<T[K]> | undefined;
   /** The x value of today: a 1px rule in the link colour with a small TODAY label. */
-  today?: NoInfer<T[K]>;
+  today?: NoInfer<T[K]> | undefined;
 }
 /** A numeric x axis, for samples in time or any measure where a mark can sit between two rows. */
 export interface NumericXProps {
   /** The x axis runs over this range of the xKey field, which must hold numbers; without it the axis is one slot per row. */
-  xDomain?: [number, number];
+  xDomain?: [number, number] | undefined;
 }
 /** A value axis that may run on a log scale: lines and areas, which need not start at zero as bars must. */
 export interface ValueScaleProps {
@@ -112,9 +112,9 @@ export interface ValueScaleProps {
    * yScaleToggle is set. Log draws only when every value, and yDomain, is above zero; otherwise the axis is linear.
    * On log the axis ticks at 1, 2 and 5 inside yDomain, if given, and yTicks is not used.
    */
-  yScale?: AxisScale;
+  yScale?: AxisScale | undefined;
   /** Linear and Log buttons for the value axis in the header, after the action, so a reader can switch. */
-  yScaleToggle?: boolean;
+  yScaleToggle?: boolean | undefined;
 }
 /**
  * How a line or an area's edge joins its points: "linear" draws straight segments, as measured samples should

package/dist/lib/format.d.ts

@@ -19,7 +19,7 @@ export declare function count(value: number, locale?: SiyahiLocale): string;
 export declare function pct(value: number, locale?: SiyahiLocale, fractionDigits?: number): string;
 export interface TimeOptions {
   /** Write the date, in the same zone, before the time: 20 Oct 2026, 14:30 IST. */
-  withDate?: boolean;
+  withDate?: boolean | undefined;
 }
 /** A 24-hour time in the locale's zone, with the zone written: 14:30 IST. */
 export declare function time(value: Date | number | string, locale?: SiyahiLocale, { withDate }?: TimeOptions): string;

package/dist/lib/optional.d.ts

@@ -0,0 +1,7 @@
+//#region src/lib/optional.d.ts
+/**
+ * Every prop of T optional and taking undefined too, where `Partial<T>` under exactOptionalPropertyTypes takes only
+ * a missing prop: for settings a page passes some of, such as `locale={{ currency: usd ? "USD" : undefined }}`.
+ */
+export type Optional<T> = { [K in keyof T]?: T[K] | undefined; };
+//#endregion

package/dist/lib/scatter.d.ts

@@ -42,11 +42,11 @@ export interface ScatterQuadrants {
   x: number;
   y: number;
   labels?: {
-    topLeft?: string;
-    topRight?: string;
-    bottomLeft?: string;
-    bottomRight?: string;
-  };
+    topLeft?: string | undefined;
+    topRight?: string | undefined;
+    bottomLeft?: string | undefined;
+    bottomRight?: string | undefined;
+  } | undefined;
 }
 export type QuadrantLabels = ScatterQuadrants["labels"];
 /** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
@@ -58,10 +58,10 @@ export declare const MAX_RADIUS = 20;
  * nothing draws the smallest dot, so it cannot shrink or hide the others. Points without sizes all take `plain`.
  */
 export declare function dotSizes(points: readonly {
-  size?: number;
+  size?: number | undefined;
 }[], plain: number): {
   radiusOf: (p: {
-    size?: number;
+    size?: number | undefined;
   }) => number;
   sized: boolean;
 };

package/dist/lib/treemap.d.ts

@@ -16,7 +16,7 @@ export interface Layout<T> {
 /** Squarified layout: items without a group are tiles of their own, the rest sit together under their group's label. */
 export declare function layout<T extends {
   weight: number;
-  group?: string;
+  group?: string | undefined;
 }>(items: T[], width: number, height: number): Layout<T>;
 //#endregion
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.31",
+  "version": "0.1.9-next.33",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -81,6 +81,6 @@
   },
   "scripts": {
     "build": "node ../tools/contrast.mjs styles/siyahi.css && vp pack",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc -p test/types"
   }
 }