@lt-three/love3 0.0.0 → 0.1.1

package/dist/web/analytics/multi-line-chart.js

@@ -0,0 +1,345 @@
+import { cn } from "../lib/utils.js";
+import { LINE_CHART_DEFAULT_LABEL, LINE_CHART_EMPTY_TEXT, LINE_CHART_TABLE_POINT_LABEL, LINE_CHART_TABLE_SERIES_LABEL, LINE_CHART_TABLE_VALUE_LABEL, lineChartTableDropped, lineChartTableThinned } from "../lib/labels.js";
+import { cssVars } from "../lib/css-vars.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { defineChart, dot, lineY } from "@tanstack/charts";
+import { Chart } from "@tanstack/charts/react";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { tooltip } from "@tanstack/charts/tooltip";
+
+//#region src/web/analytics/multi-line-chart.tsx
+const DEFAULT_HEIGHT = 220;
+/** The maximum number of rows per series in the table for screen readers. */
+const MAX_TABLE_ROWS_PER_SERIES = 60;
+const THEME = {
+	foreground: "var(--foreground)",
+	muted: "var(--muted-foreground)",
+	grid: "var(--line)",
+	background: "transparent",
+	palette: [
+		"var(--chart-1)",
+		"var(--chart-2)",
+		"var(--chart-3)",
+		"var(--chart-4)",
+		"var(--chart-5)"
+	]
+};
+/** Grid lines are thin 1px lines (`--line`). The library's default opacity of 0.11 is not applied, and the token colour is used as is. */
+const GRID_LINE = {
+	stroke: "var(--line)",
+	strokeOpacity: 1,
+	strokeWidth: 1
+};
+/** The axis baseline is one step darker than the grid lines (`--line-strong`). */
+const AXIS_LINE = {
+	stroke: "var(--line-strong)",
+	strokeOpacity: 1,
+	strokeWidth: 1
+};
+/** Do not fade tick label text (the default is 0.68). */
+const TICK_LABELS = { opacity: 1 };
+/** Focus when entering the figure (`svg tabindex=0`) by keyboard is the same opaque ring as other components (no low alpha; 2px offset). */
+const FOCUS_RING = "[&_svg:focus-visible]:rounded-control [&_svg:focus-visible]:ring-2 [&_svg:focus-visible]:ring-ring [&_svg:focus-visible]:ring-offset-2 [&_svg:focus-visible]:ring-offset-background [&_svg:focus-visible]:outline-none";
+const TOOLTIP_VARS = cssVars({
+	"--ts-chart-tooltip-background": "var(--overlay)",
+	"--ts-chart-tooltip-color": "var(--popover-foreground)",
+	"--ts-chart-tooltip-border": "1px solid var(--line)",
+	"--ts-chart-tooltip-border-radius": "var(--radius-control)",
+	"--ts-chart-tooltip-shadow": "var(--shadow-md)",
+	"--ts-chart-tooltip-padding": "8px 10px",
+	"--ts-chart-tooltip-font": "400 12px/16px var(--font-sans)"
+});
+/**
+* A multi-series line chart. Same API as native's `analytics/multi-line-chart` (`shared/analytics.ts`).
+* It is drawn with `@tanstack/charts` (SVG). Grid lines are thin 1px lines, the colours are `--chart-1` to `--chart-5`, and the tooltip is an overlay surface + a shadow.
+*
+* - **Non-numeric points are dropped**: points whose `y` (or `t`) is not finite (NaN, Infinity) are removed before building
+*   (they are not in the table for screen readers either, and the number removed is noted with the table). If everything is removed, `emptyText`
+* - When every series has `t`, **the horizontal position is decided by time**. If even one lacks it, each series is placed at even intervals in its own order
+*   (that is fine for a single series; when overlaying series with different steps, provide `t`). A series with a single point is drawn as a dot
+* - There are at most three x-axis ticks, at the first, middle and last positions (a number that does not overlap when there are few points). **The label comes from the nearest point of the first series**
+*   (when placing by time, a time that exists only in the second or later series does not become a label). It is placed at the point's position
+* - There are three y-axis ticks, top, middle and bottom. So the line does not collapse even when all points have the same value, it is moved up and down only when the range is zero
+* - The default of `formatValue` has **a number of digits that depends on the data's range** (ticks can be told apart even for values from 0 to 1). Ticks, the tooltip and the table for screen readers
+*   go through the same formatting. When you pass one, **keep the function reference stable** (a new function every time rebuilds the chart on every render and closes the tooltip).
+*   The same goes for `series` (pass a reference the parent does not recreate)
+* - On hover and focus, the tooltip shows the value of each series' point at that position (arrow keys also move it by keyboard), with the series name and colour.
+*   **Outside the range where a series has points (up to half the point spacing at the ends), no row is shown for that series** (so a far-away point's value does not look like the value at that position).
+*   When the point's label differs from the title, it is added to the row
+* - Reading: the figure is `role="img"` named by `accessibilityLabel` (a summary). The exact values are also held in a hidden table (`table`)
+* - **Series are not told apart by colour alone**: the legend has the series names, and secondary series can be dashed
+*/
+function MultiLineChart({ series, height = DEFAULT_HEIGHT, formatValue, emptyText = LINE_CHART_EMPTY_TEXT, accessibilityLabel, style, className, legend = true, table = true }) {
+	const label = accessibilityLabel ?? defaultLabel(series);
+	const model = useMemo(() => buildModel(series, formatValue), [series, formatValue]);
+	if (model === null) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "line-chart",
+		"data-empty": "",
+		style: {
+			minHeight: height,
+			...style
+		},
+		className: cn("flex items-center justify-center", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: emptyText
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "line-chart",
+		style,
+		className: cn("flex min-w-0 flex-col gap-2", FOCUS_RING, className),
+		children: [
+			/* @__PURE__ */ jsx(Chart, {
+				definition: model.definition,
+				height,
+				ariaLabel: label,
+				style: TOOLTIP_VARS
+			}),
+			legend ? /* @__PURE__ */ jsx("ul", {
+				"data-slot": "line-chart-legend",
+				className: "flex flex-wrap gap-x-4 gap-y-1 px-1",
+				children: series.map((entry) => /* @__PURE__ */ jsxs("li", {
+					className: "text-muted-foreground flex items-center gap-1.5 text-[11px]",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "inline-block h-0.5 w-2.5",
+						style: {
+							background: entry.dashed === true ? `repeating-linear-gradient(90deg, ${entry.color} 0 4px, transparent 4px 6px)` : entry.color,
+							opacity: entry.points.length > 0 ? 1 : .4
+						}
+					}), entry.label]
+				}, entry.key))
+			}) : null,
+			table ? /* @__PURE__ */ jsx(DataTable, {
+				caption: label,
+				model
+			}) : null
+		]
+	});
+}
+/** The name when there is no summary. It lists the series names. */
+function defaultLabel(series) {
+	const names = series.map((entry) => entry.label).filter((name) => name !== "");
+	return names.length === 0 ? LINE_CHART_DEFAULT_LABEL : `${names.join("・")}の${LINE_CHART_DEFAULT_LABEL}`;
+}
+/** Samples at even intervals down to at most `limit` items (the first and the last are always kept). */
+function thin(items, limit) {
+	if (items.length <= limit) return [...items];
+	const picked = /* @__PURE__ */ new Set();
+	for (let i = 0; i < limit; i += 1) picked.add(Math.round(i * (items.length - 1) / (limit - 1)));
+	return [...picked].sort((a, b) => a - b).flatMap((index) => items[index] === void 0 ? [] : [items[index]]);
+}
+/** The table hidden for screen readers. It is not shown on screen (sr-only). Values go through the same formatting as the figure's ticks. */
+function DataTable({ caption, model }) {
+	const total = model.series.reduce((sum, entry) => sum + entry.points.length, 0);
+	const shownSeries = model.series.map((entry) => ({
+		entry,
+		points: thin(entry.points, MAX_TABLE_ROWS_PER_SERIES)
+	}));
+	const shown = shownSeries.reduce((sum, item) => sum + item.points.length, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "line-chart-table",
+		className: "sr-only",
+		children: [
+			model.dropped > 0 ? /* @__PURE__ */ jsx("p", { children: lineChartTableDropped(model.dropped) }) : null,
+			shown < total ? /* @__PURE__ */ jsx("p", { children: lineChartTableThinned(shown, total) }) : null,
+			/* @__PURE__ */ jsxs("table", { children: [
+				/* @__PURE__ */ jsx("caption", { children: caption }),
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: LINE_CHART_TABLE_SERIES_LABEL
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: LINE_CHART_TABLE_POINT_LABEL
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: "値"
+					})
+				] }) }),
+				/* @__PURE__ */ jsx("tbody", { children: shownSeries.flatMap(({ entry, points }) => points.map((point, index) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: entry.label
+					}),
+					/* @__PURE__ */ jsx("td", { children: String(point.x) }),
+					/* @__PURE__ */ jsx("td", { children: model.format(point.y) })
+				] }, `${entry.key}-${index.toString()}`))) })
+			] })
+		]
+	});
+}
+/** Draws only points whose `y` (and `t`) are finite. NaN and Infinity break the scale, so they are dropped before building. */
+function isUsable(point) {
+	return Number.isFinite(point.y) && (point.t === void 0 || Number.isFinite(point.t));
+}
+function buildModel(series, formatValue) {
+	const cleaned = series.map((entry) => ({
+		...entry,
+		points: entry.points.filter(isUsable)
+	}));
+	const total = series.reduce((sum, entry) => sum + entry.points.length, 0);
+	const clean = cleaned.filter((entry) => entry.points.length > 0);
+	if (clean.length === 0) return null;
+	const kept = clean.reduce((sum, entry) => sum + entry.points.length, 0);
+	const built = buildDefinition(clean, formatValue);
+	return {
+		definition: built.definition,
+		series: clean,
+		dropped: total - kept,
+		format: built.format
+	};
+}
+/** The point nearest to a position. */
+function nearestRow(entry, position) {
+	let best;
+	for (const row of entry) if (best === void 0 || Math.abs(row.x - position) < Math.abs(best.x - position)) best = row;
+	return best;
+}
+/** When every series has `t`, place by time. */
+function isTimed(series) {
+	const times = series.flatMap((entry) => entry.points.map((point) => point.t));
+	return times.length > 0 && times.every((time) => time !== void 0);
+}
+/** The horizontal position of a point (by time when there is time, otherwise its order within the series, mapped to 0 to 1). */
+function positionOf(timed, index, count, point) {
+	if (timed && point.t !== void 0) return point.t;
+	return count === 1 ? .5 : index / (count - 1);
+}
+function extent(values) {
+	let min = Infinity;
+	let max = -Infinity;
+	for (const value of values) {
+		if (value < min) min = value;
+		if (value > max) max = value;
+	}
+	return [min, max];
+}
+/**
+* The default formatting. It takes the number of digits that lets the tick spacing (half the range, since there are three ticks, top, middle and bottom) be told apart, and adds one more digit (0 to 6 digits).
+* Values from 0 to 1 get 2 digits, and a range of 100 or more gives integers. The tooltip and the table for screen readers use the same formatting.
+*/
+function autoFormat(low, high) {
+	const step = (high - low) / 2;
+	const digits = step > 0 && Number.isFinite(step) ? Math.min(6, Math.max(0, Math.ceil(-Math.log10(step)) + 1)) : 0;
+	return (value) => (value === 0 ? 0 : value).toFixed(digits);
+}
+/** How far outside a series' point range its row is still shown (half the point spacing; for a single point, 2% of the x-axis width). */
+function reachOf(entry, domainWidth) {
+	if (entry.length < 2) return domainWidth * .02;
+	const [min, max] = extent(entry.map((row) => row.x));
+	return (max - min) / (entry.length - 1) / 2;
+}
+function buildDefinition(series, formatValue) {
+	const timed = isTimed(series);
+	const rows = series.map((entry) => entry.points.map((point, index) => ({
+		x: positionOf(timed, index, entry.points.length, point),
+		y: point.y,
+		label: String(point.x),
+		series: entry.label,
+		color: entry.color
+	})));
+	const [min, max] = extent(series.flatMap((entry) => entry.points.map((point) => point.y)));
+	const span = max - min || Math.max(Math.abs(max), 1);
+	const low = max === min ? min - span / 2 : min;
+	const high = max === min ? max + span / 2 : max;
+	const mid = low / 2 + high / 2;
+	const format = formatValue ?? autoFormat(low, high);
+	const [xMin, xMax] = extent(rows.flatMap((entry) => entry.map((row) => row.x)));
+	const xDomain = timed ? xMax === xMin ? [xMin - .5, xMax + .5] : [xMin, xMax] : [0, 1];
+	const domainWidth = xDomain[1] - xDomain[0];
+	const reference = rows[0] ?? [];
+	const tickRows = [
+		xDomain[0],
+		(xDomain[0] + xDomain[1]) / 2,
+		xDomain[1]
+	].map((position) => nearestRow(reference, position)).filter((row, index, all) => row !== void 0 && all.indexOf(row) === index);
+	const xTicks = tickRows.map((row) => row.x);
+	const labelAt = (position) => tickRows.find((row) => row.x === position)?.label ?? "";
+	const ranges = rows.map((entry) => extent(entry.map((row) => row.x)));
+	const reaches = rows.map((entry) => reachOf(entry, domainWidth));
+	return {
+		definition: defineChart({
+			marks: series.flatMap((entry, index) => {
+				const own = rows[index] ?? [];
+				const line = lineY(own, {
+					id: entry.key,
+					x: "x",
+					y: "y",
+					stroke: entry.color,
+					strokeWidth: entry.dashed === true ? 1.5 : 2,
+					strokeDasharray: entry.dashed === true ? "4 3" : void 0
+				});
+				return own.length === 1 ? [line, dot(own, {
+					id: `${entry.key}-dot`,
+					x: "x",
+					y: "y",
+					fill: entry.color,
+					r: 3
+				})] : [line];
+			}),
+			scales: {
+				x: {
+					scale: scaleLinear().domain(xDomain),
+					axis: {
+						line: AXIS_LINE,
+						ticks: {
+							values: xTicks,
+							format: labelAt
+						},
+						tickLabels: TICK_LABELS
+					}
+				},
+				y: {
+					scale: scaleLinear().domain([low, high]),
+					grid: GRID_LINE,
+					axis: {
+						line: AXIS_LINE,
+						ticks: {
+							values: [
+								low,
+								mid,
+								high
+							],
+							format
+						},
+						tickLabels: TICK_LABELS
+					}
+				}
+			},
+			theme: THEME,
+			focus: "nearest-x",
+			tooltip: {
+				use: tooltip,
+				content: (points) => {
+					const primary = points[0];
+					if (primary === void 0) return { rows: [] };
+					const position = primary.datum.x;
+					return {
+						title: primary.datum.label,
+						rows: rows.flatMap((entry, index) => {
+							const range = ranges[index] ?? [0, 0];
+							const reach = reaches[index] ?? 0;
+							if (position < range[0] - reach || position > range[1] + reach) return [];
+							const hit = nearestRow(entry, position);
+							if (hit === void 0) return [];
+							return [{
+								label: hit.label === primary.datum.label ? hit.series : `${hit.series}（${hit.label}）`,
+								value: format(hit.y),
+								color: hit.color
+							}];
+						})
+					};
+				}
+			}
+		}),
+		format
+	};
+}
+
+//#endregion
+export { MultiLineChart };

package/dist/web/atom/avatar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+//#region src/web/atom/avatar.d.ts
+export type AvatarProps = {
+  src?: string;
+  /** Alt text for the image. Empty by default (decorative; assumes the name is shown next to it). For a standalone face with no name, pass the person's name */
+  alt?: string;
+  fallback?: React.ReactNode;
+  className?: string;
+};
+export declare function Avatar({ src, alt, fallback, className }: AvatarProps): React.JSX.Element;
+//#endregion

package/dist/web/atom/avatar.js

@@ -0,0 +1,24 @@
+import { cn } from "../lib/utils.js";
+import { Avatar as Avatar$1, AvatarFallback, AvatarImage } from "../base/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { User } from "lucide-react";
+
+//#region src/web/atom/avatar.tsx
+function Avatar({ src, alt = "", fallback, className }) {
+	return /* @__PURE__ */ jsxs(Avatar$1, {
+		className: cn("size-6", className),
+		children: [/* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			alt
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "bg-muted-foreground text-background",
+			children: fallback ?? /* @__PURE__ */ jsx(User, {
+				className: "size-4",
+				"aria-hidden": true
+			})
+		})]
+	});
+}
+
+//#endregion
+export { Avatar };

package/dist/web/atom/badge.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeVariants, badgeVariants } from "../base/badge.js";
+export { Badge, type BadgeVariants, badgeVariants };

package/dist/web/atom/badge.js

@@ -0,0 +1,3 @@
+import { Badge, badgeVariants } from "../base/badge.js";
+
+export { Badge, badgeVariants };

package/dist/web/atom/button.d.ts

@@ -0,0 +1,23 @@
+import { ButtonSize, ButtonVariant } from "../../shared/button.js";
+import { Button as Button$1 } from "../base/button.js";
+import React, { ComponentType, SVGProps } from "react";
+//#region src/web/atom/button.d.ts
+export type ButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
+type ButtonIconProps = {
+  iconLeft?: never;
+  iconRight?: never;
+} | {
+  iconLeft: ButtonIcon;
+  iconRight?: never;
+} | {
+  iconLeft?: never;
+  iconRight: ButtonIcon;
+};
+export type ButtonProps = {
+  action?: "previous-page";
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+} & ButtonIconProps;
+export declare function Button(props: ButtonProps & React.ComponentProps<typeof Button$1>): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/atom/button.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { Button as Button$1 } from "../base/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/button.tsx
+function Button(props) {
+	const { type = "button", onClick, iconLeft: IconLeft, iconRight: IconRight, className, children, action, asChild, ...remain } = props;
+	const innerOnClick = (event) => {
+		onClick?.(event);
+		switch (action) {
+			case "previous-page": window.history.back();
+		}
+	};
+	if (asChild) return /* @__PURE__ */ jsx(Button$1, {
+		asChild: true,
+		className: cn("cursor-pointer", className),
+		onClick: innerOnClick,
+		...remain,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Button$1, {
+		type,
+		className: cn("cursor-pointer", className),
+		onClick: innerOnClick,
+		...remain,
+		children: [
+			IconLeft && /* @__PURE__ */ jsx(IconLeft, { className: "!w-3 !h-3" }),
+			children,
+			IconRight && /* @__PURE__ */ jsx(IconRight, { className: "!w-3 !h-3" })
+		]
+	});
+}
+
+//#endregion
+export { Button };

package/dist/web/atom/checkbox.d.ts

@@ -0,0 +1,19 @@
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/web/atom/checkbox.d.ts
+export type CheckboxProps = Omit<ComponentProps<typeof Checkbox$1>, "checked" | "onCheckedChange"> & {
+  /** Checked state (controlled mode) */
+  checked: boolean;
+  /** Called when the value changes */
+  onCheckedChange: (checked: boolean) => void;
+  /** Label shown to the right of the checkbox */
+  label?: ReactNode;
+  /** Extra class for the wrapper */
+  wrapperClassName?: string;
+};
+/**
+ * A simple Checkbox that does not depend on a form context.
+ * Passing `label` adds a clickable label on the right.
+ */
+export declare function Checkbox({ checked, onCheckedChange, label, wrapperClassName, id, ...rest }: CheckboxProps): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/checkbox.js

@@ -0,0 +1,33 @@
+import { cn } from "../lib/utils.js";
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import { Label } from "../base/label.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/checkbox.tsx
+/**
+* A simple Checkbox that does not depend on a form context.
+* Passing `label` adds a clickable label on the right.
+*/
+function Checkbox({ checked, onCheckedChange, label, wrapperClassName, id, ...rest }) {
+	const generated = useId();
+	const inputId = id ?? generated;
+	const box = /* @__PURE__ */ jsx(Checkbox$1, {
+		id: inputId,
+		checked,
+		onCheckedChange: (c) => onCheckedChange(c === true),
+		...rest
+	});
+	if (label === void 0) return box;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-1.5", wrapperClassName),
+		children: [box, /* @__PURE__ */ jsx(Label, {
+			htmlFor: inputId,
+			className: "cursor-pointer",
+			children: label
+		})]
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/web/atom/colored-value.d.ts

@@ -0,0 +1,13 @@
+import { ColoredValueSharedProps } from "../../shared/analytics.js";
+import { ReactNode } from "react";
+//#region src/web/atom/colored-value.d.ts
+export type ColoredValueProps<TValue> = ColoredValueSharedProps<TValue>;
+/**
+ * A number whose colour changes with its sign. Same API as native's `atom/colored-value` (`shared/analytics.ts`).
+ * The default colours are the tokens `state-success` / `state-error` (4.5:1 or more in light and dark), not a fixed Tailwind palette.
+ * It is a number, so it is drawn monospaced (tabular).
+ *
+ * **Do not convey meaning by colour alone.** `format` puts the sign (`+` / `−`) into the value, so the direction is clear even to people who cannot see the colour.
+ */
+export declare function ColoredValue<TValue>({ value, format, isPositive, isNegative, positiveColor, negativeColor, className }: ColoredValueProps<TValue>): ReactNode;
+//#endregion

package/dist/web/atom/colored-value.js

@@ -0,0 +1,24 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/colored-value.tsx
+/**
+* A number whose colour changes with its sign. Same API as native's `atom/colored-value` (`shared/analytics.ts`).
+* The default colours are the tokens `state-success` / `state-error` (4.5:1 or more in light and dark), not a fixed Tailwind palette.
+* It is a number, so it is drawn monospaced (tabular).
+*
+* **Do not convey meaning by colour alone.** `format` puts the sign (`+` / `−`) into the value, so the direction is clear even to people who cannot see the colour.
+*/
+function ColoredValue({ value, format, isPositive, isNegative, positiveColor = "text-state-success", negativeColor = "text-state-error", className }) {
+	const formatted = format ? format(value) : String(value);
+	const tone = isPositive?.(value) ? "positive" : isNegative?.(value) ? "negative" : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "colored-value",
+		"data-tone": tone,
+		className: cn("font-mono tabular-nums", tone === "positive" && positiveColor, tone === "negative" && negativeColor, className),
+		children: formatted
+	});
+}
+
+//#endregion
+export { ColoredValue };

package/dist/web/atom/help.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+//#region src/web/atom/help.d.ts
+type Props = {
+  children: React.ReactNode;
+  /** Accessible name of the trigger (it is shown as an icon only, so the name is given here) */
+  label?: string;
+};
+export declare function Help({ children, label }: Props): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/atom/help.js

@@ -0,0 +1,18 @@
+import { HELP_LABEL } from "../lib/labels.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../base/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleQuestionMark } from "lucide-react";
+
+//#region src/web/atom/help.tsx
+function Help({ children, label = HELP_LABEL }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(CircleQuestionMark, {
+			className: "h-4 w-4",
+			"aria-hidden": true
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children })] });
+}
+
+//#endregion
+export { Help };

package/dist/web/atom/label.d.ts

@@ -0,0 +1,2 @@
+import { Label } from "../base/label.js";
+export { Label };

package/dist/web/atom/label.js

@@ -0,0 +1,3 @@
+import { Label } from "../base/label.js";
+
+export { Label };

package/dist/web/atom/segmented-control.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+//#region src/web/atom/segmented-control.d.ts
+export type SegmentedOption<T extends string | number> = {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+  /** DEV-E2E: ID used by e2e to identify individual segments */
+  testId?: string;
+};
+export type SegmentedControlProps<T extends string | number> = {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  /**
+   * - `joined` (default) ... share a single border, with a 1px divider between segments
+   * - `separate` ... each segment has its own independent border
+   * - `underline` ... no border; tabs where only the selected one gets an underline
+   * - `solid` ... each segment has a 1px border and the borders overlap with neighbours. The selected one is filled with indigo
+   */
+  variant?: "joined" | "separate" | "underline" | "solid";
+  /** `md` is the body size (16/26, pad 9/16). */
+  size?: "xs" | "sm" | "md";
+  /** Divide the full width equally among the segments */
+  fill?: boolean;
+  className?: string;
+  "aria-label"?: string;
+};
+/**
+ * Horizontal exclusive selection (tabs, mode picker, interval picker, filter kinds).
+ *
+ * The selected segment gets the indigo (action) fill with white text (corner radius is the control step).
+ * It sets `role="radiogroup"` and `aria-checked` on each segment, so callers
+ * do not have to assemble aria themselves.
+ *
+ * Hand-rolled versions (`.map` over `<button>` with a ternary className) tend to drift in
+ * dividers, selected-state styling and keyboard handling, so they are consolidated here.
+ */
+export declare function SegmentedControl<T extends string | number>({ value, onValueChange, options, variant, size, fill, className, "aria-label": ariaLabel }: SegmentedControlProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/segmented-control.js

@@ -0,0 +1,42 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/segmented-control.tsx
+const SIZE = {
+	xs: "px-2 py-1 text-xs",
+	sm: "px-3 py-1.5 text-sm",
+	md: "px-4 py-[9px] text-base leading-[26px]"
+};
+/**
+* Horizontal exclusive selection (tabs, mode picker, interval picker, filter kinds).
+*
+* The selected segment gets the indigo (action) fill with white text (corner radius is the control step).
+* It sets `role="radiogroup"` and `aria-checked` on each segment, so callers
+* do not have to assemble aria themselves.
+*
+* Hand-rolled versions (`.map` over `<button>` with a ternary className) tend to drift in
+* dividers, selected-state styling and keyboard handling, so they are consolidated here.
+*/
+function SegmentedControl({ value, onValueChange, options, variant = "joined", size = "sm", fill, className, "aria-label": ariaLabel }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		className: cn("inline-flex", fill && "flex w-full", variant === "joined" && "border-input bg-card rounded-control border", variant === "separate" && "gap-1", className),
+		children: options.map((option) => {
+			const active = option.value === value;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": active,
+				disabled: option.disabled,
+				"data-testid": option.testId,
+				onClick: () => onValueChange(option.value),
+				className: cn("cursor-pointer whitespace-nowrap transition-colors disabled:cursor-not-allowed disabled:opacity-50", SIZE[size], fill && "flex-1", variant === "joined" && "not-first:border-input not-first:border-l first:rounded-l-control last:rounded-r-control", variant === "separate" && "border-input bg-card rounded-control border", variant === "underline" && "border-b-2 border-transparent", variant === "solid" && "border-input bg-card not-first:-ml-px first:rounded-l-control last:rounded-r-control border", active ? variant === "underline" ? "border-action text-foreground font-medium" : cn("bg-action text-action-foreground", variant === "solid" && "border-action relative") : "text-muted-foreground hover:bg-accent hover:text-foreground"),
+				children: option.label
+			}, String(option.value));
+		})
+	});
+}
+
+//#endregion
+export { SegmentedControl };