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

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 bg-muted",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "range-fill",
+			className: "absolute inset-y-0 left-0 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/scale-toggle.d.ts

@@ -0,0 +1,32 @@
+import { AxisScale } from "../../lib/ticks.js";
+import { ReactNode } from "react";
+//#region src/components/siyahi/scale-toggle.d.ts
+/** Why Log is disabled when a value is at or below zero. */
+export declare const LOG_BLOCKED = "Log needs every value above zero";
+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;
+  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;
+}
+/** 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;
+export interface AxisScaleOptions extends Omit<ScaleToggleProps, "value" | "onValueChange"> {
+  /** The page's scale: the first selection. */
+  initial: AxisScale;
+  /** Show the buttons. */
+  toggle: boolean;
+}
+/**
+ * The scale an axis draws on, and its buttons when `toggle` is set. The page's scale is the first selection; after
+ * that the reader's pick holds. Log falls back to linear while `logBlocked` says why it cannot draw the data.
+ */
+export declare function useAxisScale({ initial, toggle, ...buttons }: AxisScaleOptions): {
+  scale: AxisScale;
+  buttons: ReactNode;
+};
+//#endregion

package/dist/components/siyahi/scale-toggle.js

@@ -0,0 +1,61 @@
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/components/siyahi/scale-toggle.tsx
+/** Why Log is disabled when a value is at or below zero. */
+const LOG_BLOCKED = "Log needs every value above zero";
+/** Linear and Log buttons for one chart axis, in the header's toggle style. */
+function ScaleToggle({ label, caption, value, onValueChange, logBlocked }) {
+	const reason = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "scale-toggle",
+		className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+		children: [
+			caption && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground",
+				children: caption
+			}),
+			/* @__PURE__ */ jsxs(ToggleGroup, {
+				value: [value],
+				onValueChange: ([next]) => next && onValueChange(next === "log" ? "log" : "linear"),
+				variant: "outline",
+				size: "sm",
+				spacing: 0,
+				"aria-label": label,
+				"aria-describedby": logBlocked ? reason : void 0,
+				children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+					value: "linear",
+					children: "Linear"
+				}), /* @__PURE__ */ jsx(ToggleGroupItem, {
+					value: "log",
+					disabled: logBlocked !== void 0,
+					children: "Log"
+				})]
+			}),
+			logBlocked && /* @__PURE__ */ jsx("span", {
+				id: reason,
+				className: "text-xs text-muted-foreground",
+				children: logBlocked
+			})
+		]
+	});
+}
+/**
+* The scale an axis draws on, and its buttons when `toggle` is set. The page's scale is the first selection; after
+* that the reader's pick holds. Log falls back to linear while `logBlocked` says why it cannot draw the data.
+*/
+function useAxisScale({ initial, toggle, ...buttons }) {
+	const [picked, setPicked] = useState(initial);
+	const wanted = toggle ? picked : initial;
+	const scale = buttons.logBlocked ? "linear" : wanted;
+	return {
+		scale,
+		buttons: toggle ? /* @__PURE__ */ jsx(ScaleToggle, {
+			...buttons,
+			value: scale,
+			onValueChange: setPicked
+		}) : null
+	};
+}
+//#endregion
+export { LOG_BLOCKED, ScaleToggle, useAxisScale };

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

@@ -0,0 +1,69 @@
+import { AxisScale } from "../../lib/ticks.js";
+import { ScatterQuadrants } from "../../lib/scatter.js";
+import { ReactNode } from "react";
+//#region src/components/siyahi/scatter-chart.d.ts
+export interface ScatterPoint {
+  name: string;
+  /** Across. */
+  x: number;
+  /** 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;
+  /**
+   * 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;
+}
+/** One tooltip row: a label and its figure, such as ["Sales", "₹9.8L"]. */
+export type ScatterDetail = readonly [label: string, value: string];
+export interface ScatterChartCardProps<T extends ScatterPoint> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** A scope badge or a toggle, top right of the card, before any scale buttons. */
+  action?: ReactNode;
+  /** Most important first: earlier points take the labels. */
+  points: T[];
+  /** Height of the plot, in pixels. */
+  height: number;
+  /** What the x axis measures, under it, such as "Share of sales". */
+  xLabel: string;
+  /** What the y axis measures, beside it, such as "Growth on last year". */
+  yLabel: string;
+  /**
+   * "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;
+  /** Linear and Log buttons for the x axis in the header, so a reader can switch. */
+  xScaleToggle?: boolean;
+  /** As xScale, for the y axis: log draws only when every y is above zero. */
+  yScale?: AxisScale;
+  /** Linear and Log buttons for the y axis in the header. */
+  yScaleToggle?: boolean;
+  /** The x ticks and the tooltip's x figure. Defaults to the locale's numbers. */
+  xFormatter?: (value: number) => string;
+  /** The y ticks and the tooltip's y figure. Defaults to the locale's numbers. */
+  yFormatter?: (value: number) => string;
+  /** How many points get their name beside the dot, at most; a name with no free spot is left to the tooltip. */
+  labels?: number;
+  /** 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[];
+  /** The point that carries a ring, matched by key; pass back what onSelect gave. */
+  selected?: T | null;
+  /** Gets a tapped or keyed point, and null on a second tap, Escape or a tap on the plot. */
+  onSelect?: (point: T | null) => void;
+  /** 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;
+  /** Names the size in the tooltip, such as "Value". Defaults to "Size". */
+  sizeLabel?: string;
+  /** The tooltip's size figure. Defaults to the locale's numbers. */
+  sizeFormatter?: (value: number) => string;
+}
+/** 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;
+//#endregion
+export type { ScatterQuadrants };