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

package/dist/components/siyahi/page-toc.js

@@ -0,0 +1,76 @@
+import { cn } from "cn";
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/siyahi/page-toc.tsx
+/**
+* A long page's sections as one sticky "On this page" index. It stays at the top while the reader scrolls,
+* underlines the section in view in the link colour, and scrolls sideways on a phone with the current link kept
+* in sight.
+*/
+function PageToc({ items, label = "On this page", className }) {
+	const nav = useRef(null);
+	const active = useActiveSection(items, nav);
+	const strip = useRef(null);
+	useEffect(() => {
+		const link = strip.current?.querySelector(`a[href="#${CSS.escape(active ?? "")}"]`);
+		const box = strip.current;
+		if (!link || !box) return;
+		const left = link.offsetLeft - box.clientWidth / 2 + link.offsetWidth / 2;
+		box.scrollTo({
+			left,
+			behavior: "smooth"
+		});
+	}, [active]);
+	return /* @__PURE__ */ jsx("nav", {
+		ref: nav,
+		"aria-label": label,
+		"data-slot": "page-toc",
+		className: cn("sticky top-0 z-10 -mx-4 border-b bg-background px-4 sm:mx-0 sm:px-0", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: strip,
+			className: "flex items-baseline gap-x-4 overflow-x-auto py-2.5 mask-r-from-90% [scrollbar-width:none] sm:mask-none",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": true,
+				className: "flex shrink-0 cursor-default items-center gap-1 self-center text-[0.6875rem] font-medium tracking-wider text-muted-foreground uppercase select-none",
+				children: [label, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })]
+			}), items.map((item) => /* @__PURE__ */ jsx("a", {
+				href: `#${item.id}`,
+				"aria-current": item.id === active ? "location" : void 0,
+				onClick: (event) => {
+					event.preventDefault();
+					document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth" });
+				},
+				className: "shrink-0 text-sm whitespace-nowrap text-muted-foreground decoration-2 underline-offset-[6px] transition-colors hover:text-foreground hover:underline hover:decoration-border aria-[current=location]:font-medium aria-[current=location]:text-link aria-[current=location]:underline aria-[current=location]:decoration-current",
+				children: item.title
+			}, item.id))]
+		})
+	});
+}
+function useActiveSection(items, strip) {
+	const [active, setActive] = useState(items[0]?.id);
+	const ids = items.map((item) => item.id).join(" ");
+	useEffect(() => {
+		const sections = ids.split(" ").flatMap((id) => document.getElementById(id) ?? []);
+		if (sections.length === 0) return;
+		const update = () => {
+			const stripBottom = strip.current?.getBoundingClientRect().bottom ?? 0;
+			const line = (section) => Math.max(stripBottom, Number.parseFloat(getComputedStyle(section).scrollMarginTop) || 0, innerHeight * .3);
+			const reached = sections.filter((section) => section.getBoundingClientRect().top <= line(section) + 1);
+			setActive((reached.at(-1) ?? sections[0]).id);
+		};
+		update();
+		addEventListener("scroll", update, {
+			passive: true,
+			capture: true
+		});
+		addEventListener("resize", update);
+		return () => {
+			removeEventListener("scroll", update, { capture: true });
+			removeEventListener("resize", update);
+		};
+	}, [ids, strip]);
+	return active;
+}
+//#endregion
+export { PageToc };

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

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/panel-grid.d.ts
+declare const COLUMNS: {
+  readonly 1: "";
+  readonly 2: "@2xl/panels:grid-cols-2";
+  readonly 3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3";
+  readonly 4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4";
+};
+export interface PanelGridProps {
+  /** Blocks across on a wide page; two on a medium one, and one on a phone. */
+  columns?: keyof typeof COLUMNS;
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
+ * down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
+ * Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+ */
+export declare function PanelGrid({ columns, children, className }: PanelGridProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/siyahi/panel-grid.js

@@ -0,0 +1,34 @@
+import { useSurface } from "./siyahi-provider.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+//#region src/components/siyahi/panel-grid.tsx
+const COLUMNS = {
+	1: "",
+	2: "@2xl/panels:grid-cols-2",
+	3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3",
+	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
+};
+/**
+* Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
+* down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
+* Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+*/
+function PanelGrid({ columns = 2, children, className }) {
+	const surface = useSurface();
+	const ruled = surface === "ruled";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "panel-grid",
+		className: cn("@container/panels", ruled && "overflow-clip border-y", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-8 gap-y-6" : "gap-4"),
+			children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
+				"data-slot": "panel",
+				className: cn("min-w-0", ruled && "border-t border-l"),
+				children: child
+			}))
+		})
+	});
+}
+//#endregion
+export { PanelGrid };

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

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/siyahi/quote.d.ts
+export interface QuoteProps extends ComponentProps<"blockquote"> {
+  /** Who said it, or where it is from, set under the quote. */
+  source?: ReactNode;
+}
+/**
+ * A quotation set apart from the prose on a muted panel, with its source under it. The panel is the whole box, not a
+ * stripe down one side.
+ */
+export declare function Quote({ source, className, children, ...props }: QuoteProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/quote.js

@@ -0,0 +1,23 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/quote.tsx
+/**
+* A quotation set apart from the prose on a muted panel, with its source under it. The panel is the whole box, not a
+* stripe down one side.
+*/
+function Quote({ source, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "quote",
+		className: cn("flex flex-col gap-2 rounded-lg bg-muted/60 px-4 py-3", className),
+		children: [/* @__PURE__ */ jsx("blockquote", {
+			className: "text-pretty italic",
+			...props,
+			children
+		}), source && /* @__PURE__ */ jsx("figcaption", {
+			className: "text-sm text-muted-foreground",
+			children: source
+		})]
+	});
+}
+//#endregion
+export { Quote };

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

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/range-position.d.ts
+export interface RangePositionProps {
+  low: number;
+  high: number;
+  value: number;
+  /** Names the low end: "52-week low". */
+  lowLabel?: string;
+  highLabel?: string;
+  /** 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;
+  /** compact fits a table cell: the ends' figures either side of the track, nothing above it. */
+  variant?: "full" | "compact";
+  className?: string;
+}
+/**
+ * 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
+ * with a hollow thumb on it, the ends labelled, and in the full variant the share written large with the value over
+ * the thumb.
+ */
+export declare function RangePosition({ low, high, value, lowLabel, highLabel, caption, valueFormatter, variant, className }: RangePositionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/range-position.js

@@ -0,0 +1,105 @@
+import { useFormat } from "../../lib/format.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/range-position.tsx
+/**
+* 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
+* with a hollow thumb on it, the ends labelled, and in the full variant the share written large with the value over
+* the thumb.
+*/
+function RangePosition({ low, high, value, lowLabel = "Low", highLabel = "High", caption = "of the way up the range", valueFormatter, variant = "full", className }) {
+	const f = useFormat();
+	const write = valueFormatter ?? f.money;
+	const share = high > low ? Math.min(1, Math.max(0, (value - low) / (high - low))) : 0;
+	const at = `${(share * 100).toFixed(2)}%`;
+	const track = /* @__PURE__ */ jsxs("div", {
+		role: "meter",
+		"aria-label": `${lowLabel} to ${highLabel}`,
+		"aria-valuemin": low,
+		"aria-valuemax": high,
+		"aria-valuenow": value,
+		"aria-valuetext": `${write(value)}, ${f.pct(share, 0)} of the way from ${write(low)} to ${write(high)}`,
+		className: "relative h-1.5 min-w-12 flex-1 rounded-full bg-muted",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "range-fill",
+			className: "absolute inset-y-0 left-0 rounded-full bg-foreground",
+			style: { width: at }
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "range-thumb",
+			className: cn("absolute top-1/2 -translate-1/2 rounded-full border-2 border-foreground bg-card", variant === "full" ? "size-3.5" : "size-2.5"),
+			style: { left: at }
+		})]
+	});
+	if (variant === "compact") return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "range-position",
+		className: cn("flex items-center gap-2 text-xs text-muted-foreground tabular-nums", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-12 text-right",
+				children: write(low)
+			}),
+			track,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-12",
+				children: write(high)
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "range-position",
+		className: cn("grid gap-3", className),
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "flex flex-wrap items-baseline gap-x-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-4xl font-semibold tracking-tight tabular-nums",
+				children: f.pct(share, 0)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: caption
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "relative h-5",
+					children: /* @__PURE__ */ jsx("span", {
+						"data-slot": "range-value",
+						className: "absolute text-sm font-semibold whitespace-nowrap tabular-nums",
+						style: {
+							left: at,
+							transform: `translateX(-${at})`
+						},
+						children: write(value)
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex",
+					children: track
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-1 flex justify-between gap-4 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						lowLabel,
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "text-foreground tabular-nums",
+							children: write(low)
+						})
+					] }), /* @__PURE__ */ jsxs("span", {
+						className: "text-right",
+						children: [
+							highLabel,
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-foreground tabular-nums",
+								children: write(high)
+							})
+						]
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { RangePosition };

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

@@ -1,12 +1,23 @@
 import { SiyahiLocale } from "../../lib/locale.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/siyahi-provider.d.ts
+/**
+ * How a data block sits on the page. "ruled": no box, hairlines between blocks in a PanelGrid. "open": no box and no
+ * lines, the block's content level with the page's text. "card": shadcn's own card, a filled box with a 1px ring.
+ */
+export type Surface = "ruled" | "open" | "card";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
   locale?: Partial<SiyahiLocale>;
+  /**
+   * 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 "card".
+   */
+  surface?: Surface;
   children: ReactNode;
 }
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-export declare function SiyahiProvider({ locale, children }: SiyahiProviderProps): import("react").JSX.Element;
+/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
+export declare function SiyahiProvider({ locale, surface, children }: SiyahiProviderProps): import("react").JSX.Element;
 export declare function useLocale(): SiyahiLocale;
+export declare function useSurface(): Surface;
 //#endregion

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

@@ -4,8 +4,9 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-function SiyahiProvider({ locale, children }) {
+const SurfaceContext = createContext("card");
+/** 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
@@ -19,13 +20,25 @@ function SiyahiProvider({ locale, children }) {
 		currency,
 		timeZone
 	]);
+	const around = use(SurfaceContext);
 	return /* @__PURE__ */ jsx(LocaleContext, {
 		value,
-		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
+		children: /* @__PURE__ */ jsx(SurfaceContext, {
+			value: surface ?? around,
+			children: /* @__PURE__ */ jsx(TooltipProvider, { children: surface ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "siyahi-provider",
+				"data-surface": surface,
+				className: "contents",
+				children
+			}) : children })
+		})
 	});
 }
 function useLocale() {
 	return use(LocaleContext);
 }
+function useSurface() {
+	return use(SurfaceContext);
+}
 //#endregion
-export { SiyahiProvider, useLocale };
+export { SiyahiProvider, useLocale, useSurface };

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

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/target-rows.d.ts
+/** Where a row stands against its target. A warning is for a real problem, not merely a miss. */
+export interface TargetStatus {
+  kind: "met" | "missed" | "warning";
+  /** A few words: "On target", "2.1 pts under", "Rebalance". */
+  label: string;
+}
+export interface TargetRow {
+  label: ReactNode;
+  /** A muted line under the label, such as the asset class. */
+  detail?: ReactNode;
+  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;
+  /** Tells rows apart when labels are not plain unique text. */
+  key?: string;
+}
+export interface TargetRowsProps {
+  rows: TargetRow[];
+  /** The scale every row shares; by default 0 to the largest value, target or band edge. */
+  domain?: [number, number];
+  /** Writes the value and the target; useFormat().count by default. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
+}
+/**
+ * Bullet rows: each row's label, value and status beside a track where the value is a solid bar, the target a tall
+ * tick and the qualitative ranges grey bands. On a narrow card the label and value stack above the track.
+ */
+export declare function TargetRows({ rows, domain, valueFormatter, className }: TargetRowsProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/target-rows.js

@@ -0,0 +1,97 @@
+import { useFormat } from "../../lib/format.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/target-rows.tsx
+const GLYPH = {
+	met: "✓",
+	missed: "—",
+	warning: "⚠"
+};
+const BAND_DEPTH = [
+	14,
+	26,
+	38
+];
+/**
+* Bullet rows: each row's label, value and status beside a track where the value is a solid bar, the target a tall
+* tick and the qualitative ranges grey bands. On a narrow card the label and value stack above the track.
+*/
+function TargetRows({ rows, domain, valueFormatter, className }) {
+	const f = useFormat();
+	const write = valueFormatter ?? f.count;
+	const [low, high] = domain ?? [0, Math.max(...rows.flatMap((row) => [
+		row.value,
+		row.target,
+		...row.bands?.flat() ?? []
+	]))];
+	const at = (value) => `${(Math.min(1, Math.max(0, (value - low) / (high - low || 1))) * 100).toFixed(2)}%`;
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "target-rows",
+		className: cn("@container/target divide-y", className),
+		children: rows.map((row, index) => /* @__PURE__ */ jsxs("li", {
+			"data-slot": "target-row",
+			className: "flex flex-col gap-3 py-3 @lg/target:flex-row @lg/target:items-center @lg/target:gap-6",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col text-sm @lg/target:w-64 @lg/target:shrink-0",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: row.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-base font-semibold tabular-nums",
+							children: write(row.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between gap-3 text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: row.detail
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 tabular-nums",
+							children: ["Target ", write(row.target)]
+						})]
+					}),
+					row.status && /* @__PURE__ */ jsxs("span", {
+						"data-slot": "target-status",
+						"data-kind": row.status.kind,
+						className: "mt-1 flex gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: cn("w-4 text-center", row.status.kind === "warning" && "text-warning", row.status.kind === "missed" && "text-muted-foreground"),
+							children: GLYPH[row.status.kind]
+						}), row.status.label]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "relative h-5 rounded-sm bg-muted @lg/target:flex-1",
+				children: [
+					row.bands?.map(([from, to], step) => /* @__PURE__ */ jsx("div", {
+						"data-slot": "target-band",
+						className: "absolute inset-y-0",
+						style: {
+							left: at(Math.min(from, to)),
+							right: `calc(100% - ${at(Math.max(from, to))})`,
+							background: `color-mix(in oklab, var(--foreground) ${BAND_DEPTH[Math.min(step, BAND_DEPTH.length - 1)]}%, var(--muted))`
+						}
+					}, `${from}:${to}`)),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "target-value",
+						className: "absolute inset-y-1.5 left-0 bg-foreground",
+						style: { width: at(row.value) }
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "target-tick",
+						className: "absolute -inset-y-1 w-0.5 -translate-x-1/2 bg-foreground ring-1 ring-card",
+						style: { left: at(row.target) }
+					})
+				]
+			})]
+		}, row.key ?? (typeof row.label === "string" ? row.label : index)))
+	});
+}
+//#endregion
+export { TargetRows };

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

@@ -15,7 +15,10 @@ export interface TreemapProps<T extends TreemapItem> {
   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;
-  /** Gets the item under the pointer, and null when the pointer moves onto a group's name or leaves the map. */
+  /**
+   * 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;
   /** The selected item, matched by key, whose tile carries a ring. Pass back what onSelect gave. */
   selected?: T | null;