@siyahi/ui 0.1.5-next.1 → 0.1.6-next.1

package/README.md

@@ -74,8 +74,12 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   bar list, the `SectionCards` stat tile and the `sidebar-07` app shell.
 - **Siyahi components**: `Delta` (a signed figure with ▲ ▼), `PriceChart`
   (TradingView Lightweight Charts in theme colours), `Treemap` (holdings heat
-  map), `LocalTime` (a time in the configured zone with the viewer's own clock
+  map; hover or tap a tile for its figures), `LocalTime` (a time in the configured zone with the viewer's own clock
   in a tooltip) and `SiyahiProvider`.
+- **Cards and badges as installed**: every `Card`, stat tiles included, keeps
+  luma's `rounded-4xl`, `shadow-md` and faint ring. A category (a sector, a
+  broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
+  colour is left to the four meaning colours and the charts.
 - **Formatters**: `money`, `moneyCompact`, `pct` and `time`, or `useFormat()`
   for the same bound to the provider's locale.
   `useFormat().time(value, { withDate: true })` (or

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

@@ -17,7 +17,15 @@ export interface TreemapProps<T extends TreemapItem> {
   range?: number;
   /** Gets the item under the pointer, and null when the pointer moves onto a group's name or leaves the map. */
   onHover?: (item: T | null) => void;
+  /** The selected item, matched by key, whose tile carries a ring. Pass back what onSelect gave. */
+  selected?: T | null;
+  /**
+   * 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;
 }
 /** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
-export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover }: TreemapProps<T>): import("react").JSX.Element;
+export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover, selected, onSelect }: TreemapProps<T>): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/treemap.js

@@ -1,18 +1,29 @@
 import { useFormat } from "../../lib/format.js";
 import { heat, layout } from "../../lib/treemap.js";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/treemap.tsx
 /** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
-function Treemap({ items, height, range, onHover }) {
+function Treemap({ items, height, range, onHover, selected, onSelect }) {
 	const ref = useRef(null);
 	const [width, setWidth] = useState(0);
+	const selectedKey = selected ? selected.key ?? selected.name : null;
 	const { pct } = useFormat();
 	useLayoutEffect(() => {
 		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
 		if (ref.current) observer.observe(ref.current);
 		return () => observer.disconnect();
 	}, []);
+	const clearOutside = useEffectEvent((event) => {
+		const tile = event.target instanceof Element ? event.target.closest("[data-slot=\"treemap-tile\"]") : null;
+		if (!ref.current?.contains(tile)) onSelect?.(null);
+	});
+	useEffect(() => {
+		if (selectedKey === null) return;
+		const onPointerDown = (event) => clearOutside(event);
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [selectedKey]);
 	const { groups, tiles } = layout(items, width, height);
 	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
@@ -41,29 +52,47 @@ function Treemap({ items, height, range, onHover }) {
 					className: "fill-muted-foreground font-medium",
 					children: group
 				})]
-			}, group)), tiles.map(({ item, ...box }) => /* @__PURE__ */ jsxs("svg", {
-				...box,
-				"data-slot": "treemap-tile",
-				onPointerEnter: () => onHover?.(item),
-				children: [/* @__PURE__ */ jsx("rect", {
-					width: "100%",
-					height: "100%",
-					rx: 4,
-					style: { fill: heat(item.change, range) }
-				}), box.width > 56 && box.height > 36 && /* @__PURE__ */ jsxs("text", {
-					x: 8,
-					y: 18,
-					className: "fill-foreground",
-					children: [/* @__PURE__ */ jsx("tspan", {
-						className: "font-medium",
-						children: item.name
-					}), /* @__PURE__ */ jsx("tspan", {
-						x: 8,
-						dy: 16,
-						children: change(item.change)
-					})]
-				})]
-			}, item.key ?? item.name))]
+			}, group)), tiles.map(({ item, ...box }) => {
+				const key = item.key ?? item.name;
+				return /* @__PURE__ */ jsxs("svg", {
+					...box,
+					"data-slot": "treemap-tile",
+					"data-selected": key === selectedKey || void 0,
+					onPointerEnter: () => onHover?.(item),
+					onClick: () => onSelect?.(key === selectedKey ? null : item),
+					children: [
+						/* @__PURE__ */ jsx("rect", {
+							width: "100%",
+							height: "100%",
+							rx: 4,
+							style: { fill: heat(item.change, range) }
+						}),
+						key === selectedKey && /* @__PURE__ */ jsx("rect", {
+							x: 1,
+							y: 1,
+							width: box.width - 2,
+							height: box.height - 2,
+							rx: 3,
+							fill: "none",
+							strokeWidth: 2,
+							className: "stroke-foreground"
+						}),
+						box.width > 56 && box.height > 36 && /* @__PURE__ */ jsxs("text", {
+							x: 8,
+							y: 18,
+							className: "fill-foreground",
+							children: [/* @__PURE__ */ jsx("tspan", {
+								className: "font-medium",
+								children: item.name
+							}), /* @__PURE__ */ jsx("tspan", {
+								x: 8,
+								dy: 16,
+								children: change(item.change)
+							})]
+						})
+					]
+				}, key);
+			})]
 		})
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.5-next.1",
+  "version": "0.1.6-next.1",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",