@stealthscale/component-charts 0.2.1 → 0.2.3

package/dist/pages/scatter-plot/scatter-plot.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ScatterPlotProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"ScatterPlotProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "animate", "refers": [], "required": false, "says": "Whether the points animate in, which they do only outside reduced motion."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "caption", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Finding the chart shows, in words, which names the figure."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Recharts elements rendered inside the chart after the points, such as a `RegressionOverlay`."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "defaultHiddenKeys", "refers": [], "required": false, "says": "Keys of the series hidden when the chart first renders, for the uncontrolled case."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "defaultIndex", "refers": [], "required": false, "says": "Index in the first series' points of the point the tooltip shows when the chart first renders. No tooltip shows at first unless stated."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "empty", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Message the chart renders in the plot's place while no series has a point."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "grid", "refers": [], "required": false, "says": "Whether lines cross the plot at the ticks of both axes."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "hiddenKeys", "refers": [], "required": false, "says": "Keys of the series the legend hides, where the caller controls them."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Accessible name of the chart's keyboard layer, such as \"Deal size by sales cycle\"."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "labelKey", "refers": [], "required": false, "says": "Field of each point whose words are written beside it and head its tooltip, such as a vendor's name."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "legend", "refers": [], "required": false, "says": "Whether the legend renders below the plot. It renders while two or more series have points unless stated."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "legendLabel", "refers": [], "required": false, "says": "Accessible name of the legend's group of buttons."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "locale", "refers": [], "required": false, "says": "Locale the values are written in. The locale in scope unless stated."}, {"accepts": "((hidden: readonly string[]) => void)", "fallback": "", "kind": "option", "name": "onHiddenKeysChange", "refers": [], "required": false, "says": "Called with every key hidden after a press in the legend."}, {"accepts": "Quadrants", "fallback": "", "kind": "option", "name": "quadrants", "refers": ["kit.Quadrants"], "required": false, "says": "Quadrants the plot divides into: two dashed lines, the name of each quadrant in its corner, and the quadrant of each point after its name in the tooltip."}, {"accepts": "\"golden\" | \"landscape\" | \"portrait\" | \"rows\" | \"square\" | \"ultrawide\" | \"video\" | \"wide\"", "fallback": "", "kind": "variant", "name": "ratio", "refers": [], "required": false, "says": "Aspect ratio of the plot and of the empty state in its place, one of the theme's ratios, or `rows` for a plot as tall as its rows."}, {"accepts": "readonly ScatterSeries<Point>[]", "fallback": "", "kind": "option", "name": "series", "refers": ["kit.ChartColor", "kit.Point", "kit.ScatterSeries", "react.ReactElement", "react.ReactPortal"], "required": true, "says": "Series the chart plots, in the order the legend lists them."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "size", "refers": [], "required": false, "says": "Area of every point in square pixels, while no field sizes the points."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "sizeKey", "refers": [], "required": false, "says": "Field of each point its area reads, for a bubble chart."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "sizeLabel", "refers": [], "required": false, "says": "Name of the size's field, which the tooltip writes beside the value."}, {"accepts": "NumberFormatOptions", "fallback": "", "kind": "option", "name": "sizeOptions", "refers": [], "required": false, "says": "`Intl.NumberFormat` options the tooltip writes the size with."}, {"accepts": "readonly [number, number]", "fallback": "", "kind": "option", "name": "sizeRange", "refers": [], "required": false, "says": "Smallest and largest area of a sized point, in square pixels."}, {"accepts": "AxisDomain", "fallback": "", "kind": "option", "name": "xDomain", "refers": ["recharts.AxisDomain", "recharts.AxisDomainItem", "recharts.NumberDomain"], "required": false, "says": "Domain of the x axis in recharts' terms. Recharts' rounded domain unless stated."}, {"accepts": "readonly [string, string]", "fallback": "", "kind": "option", "name": "xEnds", "refers": [], "required": false, "says": "Words for the x axis' two ends, the low end's first, such as \"Rare\" and \"Certain\", written in place of its ticks. The axis then spans `xDomain`, 0 to 1 unless it states two numbers."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "xKey", "refers": [], "required": true, "says": "Field of each point the x axis reads."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "xLabel", "refers": [], "required": true, "says": "Title of the x axis, which the tooltip repeats beside the x value."}, {"accepts": "NumberFormatOptions", "fallback": "", "kind": "option", "name": "xOptions", "refers": [], "required": false, "says": "`Intl.NumberFormat` options the x ticks and the tooltip's x value are written with."}, {"accepts": "AxisDomain", "fallback": "", "kind": "option", "name": "yDomain", "refers": ["recharts.AxisDomain", "recharts.AxisDomainItem", "recharts.NumberDomain"], "required": false, "says": "Domain of the y axis in recharts' terms. Recharts' rounded domain unless stated."}, {"accepts": "readonly [string, string]", "fallback": "", "kind": "option", "name": "yEnds", "refers": [], "required": false, "says": "Words for the y axis' two ends, the low end's first, written in place of its ticks. The axis then spans `yDomain`, 0 to 1 unless it states two numbers."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "yKey", "refers": [], "required": true, "says": "Field of each point the y axis reads."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "yLabel", "refers": [], "required": true, "says": "Title of the y axis, which the tooltip repeats beside the y value."}, {"accepts": "NumberFormatOptions", "fallback": "", "kind": "option", "name": "yOptions", "refers": [], "required": false, "says": "`Intl.NumberFormat` options the y ticks and the tooltip's y value are written with."}]};
+export const shapes = {"react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "kit.Quadrants": [{"accepts": "Readonly<Record<QuadrantId, string>>", "name": "names", "says": "Name of each quadrant, keyed by the reading direction."}, {"accepts": "number", "name": "x", "says": "Value on the x axis the quadrants divide at. The middle of the x axis' span unless stated: its domain's two numbers, 0 to 1 for an axis with named ends, else the points' x values."}, {"accepts": "number", "name": "y", "says": "Value on the y axis the quadrants divide at. The middle of the y axis' span unless stated."}], "kit.ScatterSeries": [{"accepts": "readonly Point[]", "name": "points", "says": "Points of the series, each with its own x and y."}, {"accepts": "ChartColor", "name": "color", "says": "Palette the series takes its color from. The theme's series color at its position unless stated."}, {"accepts": "number", "name": "ink", "says": "Share of the ink, `fg`, in percent, the series' color mixes in: 0 keeps the color, 100 is the ink. The mix keeps 3:1 or more against the page. None unless stated."}, {"accepts": "string", "name": "key", "says": "Field of each row the series reads, which a recharts mark takes as its `dataKey`."}, {"accepts": "ReactNode", "name": "label", "says": "Name the tooltip and the legend show. The key unless stated."}], "kit.ChartColor": [{"accepts": "", "name": "\"accent\"", "says": ""}, {"accepts": "", "name": "\"blue\"", "says": ""}, {"accepts": "", "name": "\"cyan\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"gray\"", "says": ""}, {"accepts": "", "name": "\"green\"", "says": ""}, {"accepts": "", "name": "\"indigo\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"neutral\"", "says": ""}, {"accepts": "", "name": "\"orange\"", "says": ""}, {"accepts": "", "name": "\"pink\"", "says": ""}, {"accepts": "", "name": "\"primary\"", "says": ""}, {"accepts": "", "name": "\"purple\"", "says": ""}, {"accepts": "", "name": "\"red\"", "says": ""}, {"accepts": "", "name": "\"secondary\"", "says": ""}, {"accepts": "", "name": "\"series.1\"", "says": ""}, {"accepts": "", "name": "\"series.2\"", "says": ""}, {"accepts": "", "name": "\"series.3\"", "says": ""}, {"accepts": "", "name": "\"series.4\"", "says": ""}, {"accepts": "", "name": "\"series.5\"", "says": ""}, {"accepts": "", "name": "\"series.6\"", "says": ""}, {"accepts": "", "name": "\"series.7\"", "says": ""}, {"accepts": "", "name": "\"series.8\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"teal\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}, {"accepts": "", "name": "\"yellow\"", "says": ""}], "recharts.AxisDomain": [{"accepts": "", "name": "readonly string[]", "says": ""}, {"accepts": "", "name": "readonly number[]", "says": ""}, {"accepts": "", "name": "([dataMin, dataMax]: NumberDomain, allowDataOverflow: boolean) => NumberDomain", "says": ""}, {"accepts": "", "name": "readonly [AxisDomainItem, AxisDomainItem]", "says": ""}], "recharts.AxisDomainItem": [{"accepts": "", "name": "string", "says": ""}, {"accepts": "", "name": "number", "says": ""}, {"accepts": "", "name": "(d: number) => string | number", "says": ""}]};

package/dist/pages/sparkbar/sparkbar.js

@@ -0,0 +1,629 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { y as Sparkbar } from "../../shared-DVZJ2nST.js";
+import { t as recipe } from "../../recipes-BbGw00ut.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stat } from "@stealthscale/component-data";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { RotateCcwIcon } from "lucide-react";
+import { Button } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/sparkbar/examples/deploys.example.tsx
+var deploys_example_exports = /* @__PURE__ */ __exportAll({
+	Deploys: () => Deploys,
+	source: () => source$6
+});
+const DAYS$4 = [
+	6,
+	9,
+	4,
+	7,
+	11,
+	1,
+	0
+];
+function Deploys() {
+	const $ = c(19);
+	const { t } = useWords("sparkbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("deploys.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("deploys.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("deploys.help");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Stat.HelpText, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Sparkbar, {
+			size: "lg",
+			values: DAYS$4
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkbar } from \"@stealthscale/component-charts\";\n\nconst DAYS = [6, 9, 4, 7, 11, 1, 0];\n\nexport function Deploys(): ReactElement {\n  const { t } = useWords(\"sparkbar\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root>\n        <Stat.Label>{t(\"deploys.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"deploys.value\")}</Stat.ValueText>\n        <Stat.HelpText>{t(\"deploys.help\")}</Stat.HelpText>\n      </Stat.Root>\n      <Sparkbar size=\"lg\" values={DAYS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkbar/examples/incidents.example.tsx
+var incidents_example_exports = /* @__PURE__ */ __exportAll({
+	Incidents: () => Incidents,
+	source: () => source$5
+});
+const WEEKS = [
+	3,
+	1,
+	4,
+	2,
+	0,
+	5,
+	2,
+	1,
+	0,
+	1,
+	2,
+	0
+];
+function Incidents() {
+	const $ = c(4);
+	const { t } = useWords("sparkbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("incidents.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Sparkbar, {
+			color: "error",
+			label: t0,
+			size: "lg",
+			values: WEEKS
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkbar } from \"@stealthscale/component-charts\";\n\nconst WEEKS = [3, 1, 4, 2, 0, 5, 2, 1, 0, 1, 2, 0];\n\nexport function Incidents(): ReactElement {\n  const { t } = useWords(\"sparkbar\");\n\n  return <Sparkbar color=\"error\" label={t(\"incidents.label\")} size=\"lg\" values={WEEKS} />;\n}\n";
+//#endregion
+//#region src/sparkbar/examples/orders.example.tsx
+var orders_example_exports = /* @__PURE__ */ __exportAll({
+	Orders: () => Orders,
+	source: () => source$4
+});
+const DAYS$3 = [
+	118,
+	132,
+	97,
+	141,
+	156,
+	88,
+	124
+];
+function Orders() {
+	const $ = c(19);
+	const { t } = useWords("sparkbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("orders.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("orders.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("orders.help");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Stat.HelpText, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Sparkbar, {
+			baseline: 120,
+			color: "teal",
+			size: "lg",
+			values: DAYS$3
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkbar } from \"@stealthscale/component-charts\";\n\nconst DAYS = [118, 132, 97, 141, 156, 88, 124];\n\nexport function Orders(): ReactElement {\n  const { t } = useWords(\"sparkbar\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root>\n        <Stat.Label>{t(\"orders.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"orders.value\")}</Stat.ValueText>\n        <Stat.HelpText>{t(\"orders.help\")}</Stat.HelpText>\n      </Stat.Root>\n      <Sparkbar baseline={120} color=\"teal\" size=\"lg\" values={DAYS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkbar/examples/outage.example.tsx
+var outage_example_exports = /* @__PURE__ */ __exportAll({
+	Outage: () => Outage,
+	source: () => source$3
+});
+const DAYS$2 = [
+	214,
+	238,
+	221,
+	null,
+	241,
+	233,
+	226
+];
+function Outage() {
+	const $ = c(19);
+	const { t } = useWords("sparkbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("outage.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("outage.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("outage.help");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Stat.HelpText, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Sparkbar, {
+			size: "lg",
+			values: DAYS$2
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkbar } from \"@stealthscale/component-charts\";\n\nconst DAYS = [214, 238, 221, null, 241, 233, 226];\n\nexport function Outage(): ReactElement {\n  const { t } = useWords(\"sparkbar\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root>\n        <Stat.Label>{t(\"outage.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"outage.value\")}</Stat.ValueText>\n        <Stat.HelpText>{t(\"outage.help\")}</Stat.HelpText>\n      </Stat.Root>\n      <Sparkbar size=\"lg\" values={DAYS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkbar/examples/primary.example.tsx
+var primary_example_exports = /* @__PURE__ */ __exportAll({
+	Primary: () => Primary,
+	source: () => source$2
+});
+const WEEK = [
+	6,
+	9,
+	4,
+	7,
+	11,
+	3,
+	8
+];
+function Primary(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Sparkbar, {
+			values: WEEK,
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Sparkbar } from \"@stealthscale/component-charts\";\n\nconst WEEK = [6, 9, 4, 7, 11, 3, 8];\n\nexport function Primary(props: Omit<Parameters<typeof Sparkbar>[0], \"values\">): ReactElement {\n  return <Sparkbar values={WEEK} {...props} />;\n}\n";
+//#endregion
+//#region src/sparkbar/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source$1
+});
+const DAYS$1 = [
+	6,
+	9,
+	4,
+	7,
+	11,
+	1,
+	0
+];
+function Replay() {
+	const $ = c(16);
+	const { t } = useWords("sparkbar");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("replay.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== run || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Sparkbar, {
+			animate: true,
+			label: t0,
+			size: "lg",
+			values: DAYS$1
+		}, run);
+		$[2] = run;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== run) {
+		t2 = () => {
+			setRun(run + 1);
+		};
+		$[5] = run;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("replay.replay");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t2,
+			size: "sm",
+			variant: "outline",
+			children: [t3, t4]
+		});
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t1 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			children: [t1, t5]
+		});
+		$[13] = t1;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkbar } from \"@stealthscale/component-charts\";\n\nconst DAYS = [6, 9, 4, 7, 11, 1, 0];\n\nexport function Replay(): ReactElement {\n  const { t } = useWords(\"sparkbar\");\n  const [run, setRun] = useState(0);\n\n  return (\n    <Stack direction=\"row\">\n      <Sparkbar animate key={run} label={t(\"replay.label\")} size=\"lg\" values={DAYS} />\n      <Button\n        onClick={() => {\n          setRun(run + 1);\n        }}\n        size=\"sm\"\n        variant=\"outline\"\n      >\n        <RotateCcwIcon />\n        {t(\"replay.replay\")}\n      </Button>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkbar/examples/seats.example.tsx
+var seats_example_exports = /* @__PURE__ */ __exportAll({
+	Seats: () => Seats,
+	source: () => source
+});
+const DAYS = [
+	4,
+	-2,
+	6,
+	3,
+	-5,
+	8,
+	2,
+	-1,
+	5,
+	4,
+	-3,
+	7,
+	6,
+	2
+];
+function Seats() {
+	const $ = c(19);
+	const { t } = useWords("sparkbar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("seats.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("seats.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("seats.help");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Stat.HelpText, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Sparkbar, {
+			signed: true,
+			size: "lg",
+			values: DAYS
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkbar } from \"@stealthscale/component-charts\";\n\nconst DAYS = [4, -2, 6, 3, -5, 8, 2, -1, 5, 4, -3, 7, 6, 2];\n\nexport function Seats(): ReactElement {\n  const { t } = useWords(\"sparkbar\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root>\n        <Stat.Label>{t(\"seats.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"seats.value\")}</Stat.ValueText>\n        <Stat.HelpText>{t(\"seats.help\")}</Stat.HelpText>\n      </Stat.Root>\n      <Sparkbar signed size=\"lg\" values={DAYS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkbar/sparkbar.specimen.tsx
+/**
+* Catalogue page for the sparkbar.
+*
+* @remarks
+*   `scenesOf` generates the size and stretch scenes from the spark recipe. The other scenes are
+*   hand-written: deploys beside their stat, net seats with falls in the error color, orders
+*   against a target, a run with a missing reading, a named run on its own, and the bars
+*   animated in with a replay. Every scene renders a component from `examples/` and shows that file
+*   as its source. The words are keys under `sparkbar` in `locales/en/specimen/sparkbar.json`.
+*/
+/**
+* Hand-written scene for a run beside its figure.
+*/
+const figure = {
+	about: "sparkbar.deploys.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Deploys, {})
+	}),
+	example: deploys_example_exports,
+	title: "sparkbar.deploys.title"
+};
+/**
+* Hand-written scene for a run of changes with its falls in the error color.
+*/
+const signed = {
+	about: "sparkbar.seats.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Seats, {})
+	}),
+	example: seats_example_exports,
+	title: "sparkbar.seats.title"
+};
+/**
+* Hand-written scene for a run against a target.
+*/
+const baseline = {
+	about: "sparkbar.orders.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Orders, {})
+	}),
+	example: orders_example_exports,
+	title: "sparkbar.orders.title"
+};
+/**
+* Hand-written scene for a run with a missing reading.
+*/
+const gap = {
+	about: "sparkbar.outage.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Outage, {})
+	}),
+	example: outage_example_exports,
+	title: "sparkbar.outage.title"
+};
+/**
+* Hand-written scene for a named run on its own.
+*/
+const named = {
+	about: "sparkbar.incidents.about",
+	draw: Incidents,
+	example: incidents_example_exports,
+	title: "sparkbar.incidents.title"
+};
+/**
+* Hand-written scene for the bars animated in, with a replay.
+*/
+const animated = {
+	about: "sparkbar.replay.about",
+	draw: Replay,
+	example: replay_example_exports,
+	title: "sparkbar.replay.title"
+};
+var sparkbar_specimen_default = specimen({
+	about: "sparkbar.about",
+	id: "components/charts/sparkbar",
+	imports: "import { Sparkbar } from \"@stealthscale/component-charts\";",
+	scenes: [
+		figure,
+		signed,
+		...scenesOf(recipe, {
+			axes: { stretch: { draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "sm",
+				children: /* @__PURE__ */ jsx(Primary, { ...props })
+			}) } },
+			draw: (props) => /* @__PURE__ */ jsx(Primary, { ...props }),
+			example: primary_example_exports,
+			namespace: "sparkbar",
+			order: ["size", "stretch"]
+		}),
+		baseline,
+		gap,
+		named,
+		animated
+	],
+	title: "sparkbar.title"
+});
+//#endregion
+export { animated, baseline, sparkbar_specimen_default as default, figure, gap, named, signed };

package/dist/pages/sparkbar/sparkbar.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"SparkbarProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"SparkbarProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "animate", "refers": [], "required": false, "says": "Whether the bars animate in, which they do only outside reduced motion."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "baseline", "refers": [], "required": false, "says": "Value a dashed line marks across the run, such as a target."}, {"accepts": "ChartColor", "fallback": "", "kind": "option", "name": "color", "refers": ["kit.ChartColor"], "required": false, "says": "Palette the bars take their color from. The theme's first series color unless stated."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Name of a run shown on its own. A run without one is hidden from assistive technology."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "signed", "refers": [], "required": false, "says": "Whether a value under zero takes the error palette's chart color."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Box on the grid, four times as wide as it is tall."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "stretch", "refers": [], "required": false, "says": "Whether the box fills its container's width at the size's height."}, {"accepts": "readonly SparkValue[]", "fallback": "", "kind": "option", "name": "values", "refers": [], "required": true, "says": "The run, oldest first. A value that is not a finite number leaves its period empty."}]};
+export const shapes = {"kit.ChartColor": [{"accepts": "", "name": "\"accent\"", "says": ""}, {"accepts": "", "name": "\"blue\"", "says": ""}, {"accepts": "", "name": "\"cyan\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"gray\"", "says": ""}, {"accepts": "", "name": "\"green\"", "says": ""}, {"accepts": "", "name": "\"indigo\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"neutral\"", "says": ""}, {"accepts": "", "name": "\"orange\"", "says": ""}, {"accepts": "", "name": "\"pink\"", "says": ""}, {"accepts": "", "name": "\"primary\"", "says": ""}, {"accepts": "", "name": "\"purple\"", "says": ""}, {"accepts": "", "name": "\"red\"", "says": ""}, {"accepts": "", "name": "\"secondary\"", "says": ""}, {"accepts": "", "name": "\"series.1\"", "says": ""}, {"accepts": "", "name": "\"series.2\"", "says": ""}, {"accepts": "", "name": "\"series.3\"", "says": ""}, {"accepts": "", "name": "\"series.4\"", "says": ""}, {"accepts": "", "name": "\"series.5\"", "says": ""}, {"accepts": "", "name": "\"series.6\"", "says": ""}, {"accepts": "", "name": "\"series.7\"", "says": ""}, {"accepts": "", "name": "\"series.8\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"teal\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}, {"accepts": "", "name": "\"yellow\"", "says": ""}]};