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

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,36 @@ 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.
+   * A fixed range for the value axis, such as [0, 100] for a percentage. By default the axis ends on the round
+   * ticks that just cover the data (a 46,800 peak ends at 50,000), a stack's totals for a stack, and 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 +97,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 +113,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/ticks.d.ts

@@ -10,6 +10,15 @@ export declare function logTicks(min: number, max: number): number[];
  * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
  */
 export declare function linearTicks(min: number, max: number, count?: number): number[];
+/**
+ * A value axis' ends and ticks: the round ticks that just cover the values, and their outer two as the ends. About
+ * six, not five, so a 46,800 peak ends at 50,000 by 10,000s rather than at 60,000 by 20,000s. None when the values
+ * span no range (no values, or one), which leaves the axis to the chart.
+ */
+export declare function linearAxis(values: readonly number[]): {
+  domain: [number, number];
+  ticks: number[];
+} | undefined;
 /** How an axis spaces its values: evenly, or by powers of ten for values that run from tiny to large. */
 export type AxisScale = "linear" | "log";
 /** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */

package/dist/lib/ticks.js

@@ -39,6 +39,29 @@ function linearTicks(min, max, count = 5) {
 	const last = Math.ceil(max / step - 1e-9);
 	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
 }
+/** The smallest and largest value, by a loop: Math.min(...values) overflows the call stack past about 100,000. */
+function extent(values) {
+	let low = Number.POSITIVE_INFINITY;
+	let high = Number.NEGATIVE_INFINITY;
+	for (const value of values) {
+		low = Math.min(low, value);
+		high = Math.max(high, value);
+	}
+	return [low, high];
+}
+/**
+* A value axis' ends and ticks: the round ticks that just cover the values, and their outer two as the ends. About
+* six, not five, so a 46,800 peak ends at 50,000 by 10,000s rather than at 60,000 by 20,000s. None when the values
+* span no range (no values, or one), which leaves the axis to the chart.
+*/
+function linearAxis(values) {
+	const ticks = linearTicks(...extent(values), 6);
+	const [low, high] = [ticks[0], ticks.at(-1)];
+	return low !== void 0 && high !== void 0 && low < high ? {
+		domain: [low, high],
+		ticks
+	} : void 0;
+}
 /** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */
 const ticksFor = (scale, min, max) => scale === "log" ? logTicks(min, max) : linearTicks(min, max);
 /** A log axis has no place for zero or below, so it can draw a set of values only when every one is above zero. */
@@ -55,8 +78,7 @@ function logAxis(values, range) {
 			ticks: logTicks(low, high).filter((tick) => tick >= low && tick <= high)
 		};
 	}
-	const low = Math.min(...values);
-	const high = Math.max(...values);
+	const [low, high] = extent(values);
 	const ticks = logTicks(low, high);
 	return {
 		domain: [ticks[0] ?? low, ticks.at(-1) ?? high],
@@ -64,4 +86,4 @@ function logAxis(values, range) {
 	};
 }
 //#endregion
-export { fitsLog, linearTicks, logAxis, logTicks, ticksFor };
+export { fitsLog, linearAxis, linearTicks, logAxis, logTicks, ticksFor };

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/dist/lib/use-render-when-fonts-load.d.ts

@@ -0,0 +1,11 @@
+//#region src/lib/use-render-when-fonts-load.d.ts
+/** How many font loads the page has finished: a width a canvas measured before the last one may be the fallback's. */
+export declare function fontLoads(): number;
+/**
+ * Renders the component again when a font load changes what `measure` returns: the width of the component's own
+ * text, measured on a canvas. Any face may change it, whenever it loads: Geist after the fallback, a subset for other
+ * characters, another family. A load that changes nothing the component measures leaves it alone, as Recharts redraws
+ * a chart's marks on every render and their fade-in would play again.
+ */
+export declare function useRenderWhenFontsLoad(measure: () => number | string): void;
+//#endregion

package/dist/lib/use-render-when-fonts-load.js

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useReducer, useRef } from "react";
+//#region src/lib/use-render-when-fonts-load.ts
+let loads = 0;
+const counted = /* @__PURE__ */ new WeakSet();
+/** How many font loads the page has finished: a width a canvas measured before the last one may be the fallback's. */
+function fontLoads() {
+	if (typeof document !== "undefined" && document.fonts && !counted.has(document.fonts)) {
+		counted.add(document.fonts);
+		document.fonts.addEventListener("loadingdone", () => loads++);
+	}
+	return loads;
+}
+/**
+* Renders the component again when a font load changes what `measure` returns: the width of the component's own
+* text, measured on a canvas. Any face may change it, whenever it loads: Geist after the fallback, a subset for other
+* characters, another family. A load that changes nothing the component measures leaves it alone, as Recharts redraws
+* a chart's marks on every render and their fade-in would play again.
+*/
+function useRenderWhenFontsLoad(measure) {
+	const drawn = measure();
+	const seen = fontLoads();
+	const committed = useRef({
+		measure,
+		drawn
+	});
+	const [, render] = useReducer((count) => count + 1, 0);
+	useLayoutEffect(() => {
+		committed.current = {
+			measure,
+			drawn
+		};
+		if (fontLoads() !== seen && measure() !== drawn) render();
+	}, [
+		measure,
+		drawn,
+		seen
+	]);
+	useLayoutEffect(() => {
+		const fonts = document.fonts;
+		if (!fonts) return;
+		const recheck = () => {
+			if (committed.current.measure() !== committed.current.drawn) render();
+		};
+		fonts.addEventListener("loadingdone", recheck);
+		return () => fonts.removeEventListener("loadingdone", recheck);
+	}, []);
+}
+//#endregion
+export { fontLoads, useRenderWhenFontsLoad };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.32",
+  "version": "0.1.9-next.34",
   "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"
   }
 }

package/report.css

@@ -38,6 +38,7 @@
   --wash: 7%;
   --wash-edge: 45%;
   --field-wash: 8%;
+  --bar-tint: 50%;
   --link: oklch(0.51 0.2 275);
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);

package/styles/siyahi.css

@@ -140,6 +140,12 @@
   --wash-edge: 45%;
   /* An invalid field's wash: this share of --destructive over the card. */
   --field-wash: 8%;
+  /*
+   * Every bar takes this share of its colour over the card, inside a 1px edge of the full colour (lib/chart-frame
+   * barFill). At 25% a pale slot's bar barely left the card and a thin stacked segment was two edge lines; the
+   * contrast check holds each bar colour's tint against the card and each slot's against the next slot's.
+   */
+  --bar-tint: 50%;
   --link: oklch(0.51 0.2 275);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
@@ -220,6 +226,7 @@
     --wash: 12%;
     --wash-edge: 55%;
     --field-wash: 12%;
+    --bar-tint: 50%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
@@ -265,13 +272,15 @@
  * foreground, black on white and white on black, so the reader sees at once
  * what is on; stock shadcn marks it with a faint grey. A default (pill) tab
  * selects the same way: stock fills it with the canvas colour, 1.05:1 against
- * its grey list. Unlayered, to outrank the stock aria-pressed:bg-muted.
+ * its grey list, lifted on a drop shadow, which the fill makes needless. Unlayered, to outrank the stock
+ * aria-pressed:bg-muted.
  */
 :is([data-slot="toggle"], [data-slot="toggle-group-item"]):is([aria-pressed="true"], [data-pressed]),
 [data-slot="tabs-list"][data-variant="default"] [data-slot="tabs-trigger"][data-active] {
   background-color: var(--foreground);
   color: var(--background);
   border-color: var(--foreground);
+  --tw-shadow: 0 0 #0000;
 }
 
 /*
@@ -476,8 +485,47 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
   @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
 }
 
-/* Progress is a bar, square as every bar is; stock draws it as a pill. */
-[data-slot="progress-track"] {
+/* A group's label in a menu, a select's list or the command palette is a label over its items, set as one. */
+:is(
+  [data-slot="dropdown-menu-label"],
+  [data-slot="context-menu-label"],
+  [data-slot="select-label"],
+  [data-slot="command-group"] [cmdk-group-heading]
+) {
+  @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
+}
+
+/*
+ * A menu, a select's list, a popover, a dialog, a sheet and a chart's tooltip read as a sheet of the page, not a
+ * bubble floating over it: no drop shadow, and the card's hairline for an edge (stock rings them fainter).
+ */
+:is(
+  [data-slot="dropdown-menu-content"],
+  [data-slot="dropdown-menu-sub-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="context-menu-sub-content"],
+  [data-slot="select-content"],
+  [data-slot="popover-content"],
+  [data-slot="dialog-content"],
+  [data-slot="sheet-content"],
+  [data-slot="chart"] .recharts-tooltip-wrapper > div
+) {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-color: var(--border);
+  border-color: var(--border);
+}
+
+/*
+ * Square as every box is: progress, a slider's track and thumb, a scrollbar's thumb, and the colour chips core's
+ * chart tooltip and legend draw at a fixed 2px, which no radius token reaches.
+ */
+:is(
+  [data-slot="progress-track"],
+  [data-slot="slider-track"],
+  [data-slot="slider-thumb"],
+  [data-slot="scroll-area-thumb"],
+  [data-slot="chart"] :is(.recharts-tooltip-wrapper, .recharts-legend-wrapper) [class~="rounded-[2px]"]
+) {
   border-radius: 0;
 }
 
@@ -750,7 +798,6 @@ div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
   inset-block: 2px;
   left: -11px;
   width: 2px;
-  border-radius: 1px;
   background: var(--sidebar-accent-foreground);
 }