@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

package/dist/lib/format.js

@@ -2,37 +2,69 @@ import { defaultLocale } from "./locale.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { useMemo } from "react";
 //#region src/lib/format.ts
+const numbers = /* @__PURE__ */ new Map();
+const clocks = /* @__PURE__ */ new Map();
+const regions = /* @__PURE__ */ new Map();
+function numberFormat(locale, options) {
+	const key = JSON.stringify([locale, options]);
+	let formatter = numbers.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, options);
+		numbers.set(key, formatter);
+	}
+	return formatter;
+}
 /** An amount in the locale's currency, whole units by default: ₹1,53,110. Signed figures belong in `Delta`. */
 function money(value, locale = defaultLocale, fractionDigits = 0) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits
 	}).format(value);
 }
+const DIGITS = /* @__PURE__ */ new Set(["integer", "fraction"]);
+const NUMBER = /* @__PURE__ */ new Set([
+	"integer",
+	"group",
+	"decimal",
+	"fraction"
+]);
 /**
 * A short amount: ₹2.4L and ₹40Cr in en-IN, $2.4M in en-US. Indian readers
 * count in thousands up to a lakh, so in an Indian-region locale amounts under
 * one lakh print in full (₹99,999), never as ₹99.9K. Signed figures belong in
 * `Delta`, which adds the arrow.
+*
+* Give `scale`, the largest amount on the same axis, and every tick takes that
+* amount's unit, to two decimals so close ticks stay apart: ₹1.5L, ₹0.75L,
+* ₹0, rather than switching to ₹75,000 halfway up.
 */
-function moneyCompact(value, locale = defaultLocale) {
-	if (new Intl.Locale(locale.numberLocale).region === "IN" && Math.abs(value) < 1e5) return money(value, locale);
-	return new Intl.NumberFormat(locale.numberLocale, {
+function moneyCompact(value, locale = defaultLocale, scale) {
+	if (!regions.has(locale.numberLocale)) regions.set(locale.numberLocale, new Intl.Locale(locale.numberLocale).region);
+	if (regions.get(locale.numberLocale) === "IN" && (scale ?? Math.abs(value)) < 1e5) return money(value, locale);
+	const compact = numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		notation: "compact",
 		maximumFractionDigits: 1
-	}).format(value);
+	});
+	if (scale === void 0 || value === 0) return compact.format(value);
+	const parts = compact.formatToParts(Math.sign(value) * scale);
+	const shown = Number(parts.flatMap((part) => part.type === "decimal" ? "." : DIGITS.has(part.type) ? part.value : []).join(""));
+	const unit = 10 ** Math.round(Math.log10(scale / shown));
+	if (unit === 1) return compact.format(value);
+	const digits = numberFormat(locale.numberLocale, { maximumFractionDigits: 2 }).format(Math.abs(value) / unit);
+	const first = parts.findIndex((part) => part.type === "integer");
+	return parts.flatMap((part, index) => index === first ? digits : NUMBER.has(part.type) ? [] : part.value).join("");
 }
 /** A whole count with the locale's grouping: 1,53,110 in en-IN. */
 function count(value, locale = defaultLocale) {
-	return new Intl.NumberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
+	return numberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
 }
 /** A fraction as a percentage: 0.1234 is 12.3%. */
 function pct(value, locale = defaultLocale, fractionDigits = 1) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "percent",
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits
@@ -40,19 +72,25 @@ function pct(value, locale = defaultLocale, fractionDigits = 1) {
 }
 /** A 24-hour time in the locale's zone, with the zone written: 14:30 IST. */
 function time(value, locale = defaultLocale, { withDate = false } = {}) {
-	const date = withDate ? {
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	} : {};
-	return new Intl.DateTimeFormat(locale.numberLocale, {
-		...date,
+	const options = {
+		...withDate ? {
+			day: "numeric",
+			month: "short",
+			year: "numeric"
+		} : {},
 		hour: "2-digit",
 		minute: "2-digit",
 		hourCycle: "h23",
 		timeZone: locale.timeZone,
 		timeZoneName: "short"
-	}).format(new Date(value));
+	};
+	const key = JSON.stringify([locale.numberLocale, options]);
+	let formatter = clocks.get(key);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale.numberLocale, options);
+		clocks.set(key, formatter);
+	}
+	return formatter.format(new Date(value));
 }
 /** The formatters above, bound to the locale of the nearest `SiyahiProvider`. */
 function useFormat() {
@@ -60,7 +98,7 @@ function useFormat() {
 	return useMemo(() => ({
 		count: (value) => count(value, locale),
 		money: (value, fractionDigits) => money(value, locale, fractionDigits),
-		moneyCompact: (value) => moneyCompact(value, locale),
+		moneyCompact: (value, scale) => moneyCompact(value, locale, scale),
 		pct: (value, fractionDigits) => pct(value, locale, fractionDigits),
 		time: (value, options) => time(value, locale, options)
 	}), [locale]);

package/dist/lib/heatmap-navigation.d.ts

@@ -0,0 +1,8 @@
+import { KeyboardEventHandler, RefObject } from "react";
+//#region src/lib/heatmap-navigation.d.ts
+/** One tab stop per heatmap; arrows move between its actual drawn cells. */
+export declare function useHeatmapNavigation(): {
+  ref: RefObject<HTMLDivElement | null>;
+  onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+};
+//#endregion

package/dist/lib/heatmap-navigation.js

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useRef } from "react";
+//#region src/lib/heatmap-navigation.ts
+/** One tab stop per heatmap; arrows move between its actual drawn cells. */
+function useHeatmapNavigation() {
+	const ref = useRef(null);
+	const cells = () => [...ref.current?.querySelectorAll("rect[role=\"button\"]") ?? []];
+	useLayoutEffect(() => {
+		const buttons = cells();
+		const active = buttons.find((cell) => cell === document.activeElement) ?? buttons[0];
+		for (const cell of buttons) cell.tabIndex = cell === active ? 0 : -1;
+	});
+	const onKeyDown = (event) => {
+		if (!(event.target instanceof SVGElement) || event.target.getAttribute("role") !== "button") return;
+		const buttons = cells();
+		let next;
+		if (event.key === "Home") next = buttons[0];
+		else if (event.key === "End") next = buttons.at(-1);
+		else if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(event.key)) {
+			const origin = event.target.getBoundingClientRect();
+			const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+			const direction = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+			let nearest = Infinity;
+			for (const cell of buttons) {
+				const box = cell.getBoundingClientRect();
+				const primary = (horizontal ? box.x - origin.x : box.y - origin.y) * direction;
+				const distance = primary + Math.abs(horizontal ? box.y - origin.y : box.x - origin.x) * 4;
+				if (primary > 1 && distance < nearest) {
+					nearest = distance;
+					next = cell;
+				}
+			}
+		} else return;
+		event.preventDefault();
+		if (!next) return;
+		for (const cell of buttons) cell.tabIndex = cell === next ? 0 : -1;
+		next.focus();
+	};
+	return {
+		ref,
+		onKeyDown
+	};
+}
+//#endregion
+export { useHeatmapNavigation };

package/dist/lib/treemap.js

@@ -35,7 +35,12 @@ const DEFAULT_RANGE = .05;
 const HEAT_STEPS = 5;
 /** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
 const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
-const heatFill = (side, step) => `color-mix(in oklab, var(--${side}) ${step * 12}%, var(--card))`;
+const DARK_FLOOR = 25;
+const heatFill = (side, step) => {
+	const mix = (share) => `color-mix(in oklab, var(--${side}) ${share}%, var(--card))`;
+	const dark = DARK_FLOOR + (step - 1) * 35 / 4;
+	return `light-dark(${mix(step * 12)}, ${mix(dark)})`;
+};
 function heat(change, range) {
 	if (!change) return "var(--muted)";
 	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));

package/dist/lib/use-element-width.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+//#region src/lib/use-element-width.d.ts
+/** The element's content width, kept current as it resizes; 0 until it is first measured. */
+export declare function useElementWidth<T extends Element>(): [RefObject<T | null>, number];
+//#endregion

package/dist/lib/use-element-width.js

@@ -0,0 +1,15 @@
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/lib/use-element-width.ts
+/** The element's content width, kept current as it resizes; 0 until it is first measured. */
+function useElementWidth() {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useLayoutEffect(() => {
+		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
+		if (ref.current) observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, width];
+}
+//#endregion
+export { useElementWidth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.2",
+  "version": "0.1.9-next.21",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -19,11 +19,13 @@
     "directory": "packages/ui"
   },
   "files": [
+    "agents",
     "dist",
     "styles",
     "report.css",
     "registry.lock.json",
     "README.md",
+    "DESIGN.md",
     "LICENSE",
     "THIRD_PARTY_NOTICES.md"
   ],
@@ -32,6 +34,7 @@
     "**/*.css"
   ],
   "exports": {
+    "./agents/*": "./agents/*",
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"

package/registry.lock.json

@@ -49,6 +49,22 @@
       "copied": "2026-10-22",
       "sha256": "9028368f1363732cef765dabad2eca3ba98b608f1e237123b09df701c41c8b5a"
     },
+    {
+      "file": "src/components/registry/dashboardcn/kpi-row-card.tsx",
+      "registry": "@dashboardcn/kpi-row-card",
+      "origin": "https://dashboardcn.com/r/kpi-row-card.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-26",
+      "sha256": "b49fa95b3efa19086b3df2e3a18f6a0d5a95204951448c5d93fc41c2bdb6326f"
+    },
+    {
+      "file": "src/components/registry/dashboardcn/sparkline.tsx",
+      "registry": "@dashboardcn/sparkline",
+      "origin": "https://dashboardcn.com/r/sparkline.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-26",
+      "sha256": "54b43e63d866bcdf8071744df08e87f29385ba60d480ab9ee8aa1fac3eb33d5c"
+    },
     {
       "file": "src/components/registry/heatmap/calendar-heatmap.tsx",
       "registry": "@heatmap/calendar-heatmap",

package/report.css

@@ -6,7 +6,7 @@
 :root {
   color-scheme: light dark;
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
@@ -23,68 +23,69 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.62 0.16 275);
   --positive: oklch(0.527 0.154 150.069);
   --positive-foreground: oklch(0.985 0 0);
   --negative: oklch(0.577 0.245 27.325);
   --negative-foreground: oklch(0.985 0 0);
   --warning: oklch(0.555 0.163 48.998);
   --warning-foreground: oklch(0.985 0 0);
-  --link: oklch(0.546 0.245 262.881);
-  --chart-1: oklch(0.65 0.17 259.8);
-  --chart-2: oklch(0.35 0.07 163.2);
-  --chart-3: oklch(0.66 0.15 60);
-  --chart-4: oklch(0.36 0.17 293);
-  --chart-5: oklch(0.65 0.21 16.4);
+  --link: oklch(0.51 0.2 275);
+  --chart-1: oklch(0.4 0.17 275);
+  --chart-2: oklch(0.66 0.13 70);
+  --chart-3: oklch(0.38 0.13 335);
+  --chart-4: oklch(0.66 0.11 235);
+  --chart-5: oklch(0.36 0.06 205);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent-foreground: oklch(0.45 0.2 275);
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.62 0.16 275);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    --background: oklch(0.14 0 0);
+    --foreground: oklch(0.922 0 0);
+    --card: oklch(0.215 0 0);
+    --card-foreground: oklch(0.922 0 0);
+    --popover: oklch(0.215 0 0);
+    --popover-foreground: oklch(0.922 0 0);
     --primary: oklch(0.922 0 0);
     --primary-foreground: oklch(0.205 0 0);
     --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
+    --secondary-foreground: oklch(0.922 0 0);
     --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
+    --muted-foreground: oklch(0.74 0 0);
     --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
+    --accent-foreground: oklch(0.922 0 0);
     --destructive: oklch(0.704 0.191 22.216);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --positive: oklch(0.792 0.209 151.711);
+    --ring: oklch(0.6 0.14 275);
+    --positive: oklch(0.74 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
     --negative: oklch(0.704 0.191 22.216);
     --negative-foreground: oklch(0.145 0 0);
     --warning: oklch(0.828 0.189 84.429);
     --warning-foreground: oklch(0.145 0 0);
-    --link: oklch(0.707 0.165 254.624);
-    --chart-1: oklch(0.84 0.08 255);
-    --chart-2: oklch(0.52 0.11 163.2);
-    --chart-3: oklch(0.86 0.13 80);
-    --chart-4: oklch(0.55 0.25 293);
-    --chart-5: oklch(0.84 0.085 12);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --link: oklch(0.75 0.13 275);
+    --chart-1: oklch(0.58 0.2 275);
+    --chart-2: oklch(0.88 0.08 75);
+    --chart-3: oklch(0.58 0.16 335);
+    --chart-4: oklch(0.88 0.05 235);
+    --chart-5: oklch(0.56 0.08 205);
+    --sidebar: oklch(0.145 0 0);
+    --sidebar-foreground: oklch(0.922 0 0);
+    --sidebar-primary: oklch(0.922 0 0);
+    --sidebar-primary-foreground: oklch(0.205 0 0);
     --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-accent-foreground: oklch(0.8 0.1 275);
     --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar-ring: oklch(0.6 0.14 275);
   }
 }