@signalcore/ui 0.1.0 → 1.0.0-beta.0

package/dist/kit/Chart.js

@@ -0,0 +1,152 @@
+import { formatNumber } from "./numbers.js";
+import { useKit, useParts } from "./context.js";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Chart.tsx
+/** The line's drawing box: wide and short; it stretches to the chart's width. */
+const WIDTH = 600;
+const HEIGHT = 160;
+/** Room above the highest point, so its dot is never cut. */
+const HEADROOM = 8;
+/**
+* Figures over a few labels, one series in the chart's ink: `bar`, a row a label, its bar from
+* one baseline and its figure at the tip; `line`, the labels in their order (days, weeks) as one
+* line over a wash, its extremes on the axis and the point under the pointer told in full.
+*/
+function Chart({ kind, points }) {
+	return kind === "line" ? /* @__PURE__ */ jsx(Line, { points }) : /* @__PURE__ */ jsx(Bars, { points });
+}
+function Bars({ points }) {
+	const part = useParts();
+	const { code } = useKit();
+	const most = Math.max(...points.map((point) => point.value), 0);
+	return /* @__PURE__ */ jsx("ul", {
+		part: "chart",
+		className: part("sc-chart", "sc-chart--bar"),
+		children: points.map((point, index) => /* @__PURE__ */ jsxs("li", {
+			className: part("sc-chart__row"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: part("sc-chart__label"),
+					children: point.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: part("sc-chart__track"),
+					children: /* @__PURE__ */ jsx("span", {
+						className: part("sc-chart__bar"),
+						style: { width: most > 0 ? `${Math.max(point.value, 0) / most * 100}%` : 0 }
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: part("sc-chart__value"),
+					children: formatNumber(point.value, code)
+				})
+			]
+		}, index))
+	});
+}
+function Line({ points }) {
+	const part = useParts();
+	const { code } = useKit();
+	const wash = useId();
+	const [shown, setShown] = useState(null);
+	const values = points.map((point) => point.value);
+	const most = Math.max(...values, 0);
+	const least = Math.min(...values, 0);
+	const span = most - least || 1;
+	const x = (index) => points.length === 1 ? WIDTH / 2 : index / (points.length - 1) * WIDTH;
+	const y = (value) => HEADROOM + (1 - (value - least) / span) * 152;
+	const line = points.map((point, index) => `${x(index)},${y(point.value)}`).join(" ");
+	const area = `${x(0)},${y(least)} ${line} ${x(points.length - 1)},${y(least)}`;
+	const first = points[0];
+	const last = points.at(-1);
+	const hovered = shown === null ? void 0 : points[shown];
+	const onPointerMove = (event) => {
+		const box = event.currentTarget.getBoundingClientRect();
+		const at = (event.clientX - box.left) / box.width;
+		setShown(Math.min(points.length - 1, Math.max(0, Math.round(at * (points.length - 1)))));
+	};
+	return /* @__PURE__ */ jsxs("figure", {
+		part: "chart",
+		className: part("sc-chart", "sc-chart--line"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: part("sc-chart__top"),
+				children: formatNumber(most, code)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: part("sc-chart__plot"),
+				onPointerMove,
+				onPointerLeave: () => {
+					setShown(null);
+				},
+				children: [/* @__PURE__ */ jsxs("svg", {
+					viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+					preserveAspectRatio: "none",
+					"aria-hidden": true,
+					children: [
+						/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+							id: wash,
+							x1: "0",
+							x2: "0",
+							y1: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ jsx("stop", {
+								offset: "0",
+								className: part("sc-chart__wash")
+							}), /* @__PURE__ */ jsx("stop", {
+								offset: "1",
+								className: part("sc-chart__wash"),
+								stopOpacity: 0
+							})]
+						}) }),
+						/* @__PURE__ */ jsx("line", {
+							x1: 0,
+							x2: WIDTH,
+							y1: HEIGHT,
+							y2: HEIGHT,
+							className: part("sc-chart__axis")
+						}),
+						/* @__PURE__ */ jsx("polygon", {
+							points: area,
+							fill: `url(#${wash})`
+						}),
+						/* @__PURE__ */ jsx("polyline", {
+							points: line,
+							className: part("sc-chart__line")
+						})
+					]
+				}), hovered !== void 0 && shown !== null && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: part("sc-chart__dot"),
+					style: {
+						left: `${x(shown) / WIDTH * 100}%`,
+						top: `${y(hovered.value) / HEIGHT * 100}%`
+					}
+				}), /* @__PURE__ */ jsxs("span", {
+					role: "status",
+					className: part("sc-chart__tip"),
+					style: {
+						left: `${x(shown) / WIDTH * 100}%`,
+						translate: shown === 0 ? "0" : shown === points.length - 1 ? "-100%" : "-50%"
+					},
+					children: [/* @__PURE__ */ jsx("span", { children: hovered.label }), /* @__PURE__ */ jsx("strong", { children: formatNumber(hovered.value, code) })]
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("figcaption", {
+				className: part("sc-chart__ends"),
+				children: [/* @__PURE__ */ jsx("span", { children: first?.label }), points.length > 1 && /* @__PURE__ */ jsx("span", { children: last?.label })]
+			}),
+			/* @__PURE__ */ jsx("table", {
+				className: part("sc-chart__data"),
+				children: /* @__PURE__ */ jsx("tbody", { children: points.map((point, index) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					children: point.label
+				}), /* @__PURE__ */ jsx("td", { children: formatNumber(point.value, code) })] }, index)) })
+			})
+		]
+	});
+}
+//#endregion
+export { Chart };
+
+//# sourceMappingURL=Chart.js.map

package/dist/kit/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","names":[],"sources":["../../src/kit/Chart.tsx"],"sourcesContent":["import { useId, useState, type PointerEvent } from \"react\";\n\nimport type { ChartPoint } from \"../blocks\";\nimport { useKit, useParts } from \"./context\";\nimport { formatNumber } from \"./numbers\";\n\n/** The line's drawing box: wide and short; it stretches to the chart's width. */\nconst WIDTH = 600;\nconst HEIGHT = 160;\n/** Room above the highest point, so its dot is never cut. */\nconst HEADROOM = 8;\n\n/**\n * Figures over a few labels, one series in the chart's ink: `bar`, a row a label, its bar from\n * one baseline and its figure at the tip; `line`, the labels in their order (days, weeks) as one\n * line over a wash, its extremes on the axis and the point under the pointer told in full.\n */\nexport function Chart({ kind, points }: { kind: \"bar\" | \"line\"; points: ChartPoint[] }) {\n  return kind === \"line\" ? <Line points={points} /> : <Bars points={points} />;\n}\n\nfunction Bars({ points }: { points: ChartPoint[] }) {\n  const part = useParts();\n  const { code } = useKit();\n  const most = Math.max(...points.map((point) => point.value), 0);\n  return (\n    <ul part=\"chart\" className={part(\"sc-chart\", \"sc-chart--bar\")}>\n      {points.map((point, index) => (\n        <li key={index} className={part(\"sc-chart__row\")}>\n          <span className={part(\"sc-chart__label\")}>{point.label}</span>\n          <span className={part(\"sc-chart__track\")}>\n            <span\n              className={part(\"sc-chart__bar\")}\n              style={{ width: most > 0 ? `${(Math.max(point.value, 0) / most) * 100}%` : 0 }}\n            />\n          </span>\n          <span className={part(\"sc-chart__value\")}>{formatNumber(point.value, code)}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction Line({ points }: { points: ChartPoint[] }) {\n  const part = useParts();\n  const { code } = useKit();\n  const wash = useId();\n  const [shown, setShown] = useState<number | null>(null);\n  const values = points.map((point) => point.value);\n  const most = Math.max(...values, 0);\n  const least = Math.min(...values, 0);\n  const span = most - least || 1;\n  const x = (index: number) =>\n    points.length === 1 ? WIDTH / 2 : (index / (points.length - 1)) * WIDTH;\n  const y = (value: number) => HEADROOM + (1 - (value - least) / span) * (HEIGHT - HEADROOM);\n  const line = points.map((point, index) => `${x(index)},${y(point.value)}`).join(\" \");\n  const area = `${x(0)},${y(least)} ${line} ${x(points.length - 1)},${y(least)}`;\n  const first = points[0];\n  const last = points.at(-1);\n  const hovered = shown === null ? undefined : points[shown];\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const box = event.currentTarget.getBoundingClientRect();\n    const at = (event.clientX - box.left) / box.width;\n    setShown(Math.min(points.length - 1, Math.max(0, Math.round(at * (points.length - 1)))));\n  };\n\n  return (\n    <figure part=\"chart\" className={part(\"sc-chart\", \"sc-chart--line\")}>\n      <span className={part(\"sc-chart__top\")}>{formatNumber(most, code)}</span>\n      <div\n        className={part(\"sc-chart__plot\")}\n        onPointerMove={onPointerMove}\n        onPointerLeave={() => {\n          setShown(null);\n        }}\n      >\n        <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio=\"none\" aria-hidden>\n          <defs>\n            <linearGradient id={wash} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n              <stop offset=\"0\" className={part(\"sc-chart__wash\")} />\n              <stop offset=\"1\" className={part(\"sc-chart__wash\")} stopOpacity={0} />\n            </linearGradient>\n          </defs>\n          <line x1={0} x2={WIDTH} y1={HEIGHT} y2={HEIGHT} className={part(\"sc-chart__axis\")} />\n          <polygon points={area} fill={`url(#${wash})`} />\n          <polyline points={line} className={part(\"sc-chart__line\")} />\n        </svg>\n        {hovered !== undefined && shown !== null && (\n          <>\n            <span\n              className={part(\"sc-chart__dot\")}\n              style={{\n                left: `${(x(shown) / WIDTH) * 100}%`,\n                top: `${(y(hovered.value) / HEIGHT) * 100}%`,\n              }}\n            />\n            <span\n              role=\"status\"\n              className={part(\"sc-chart__tip\")}\n              style={{\n                left: `${(x(shown) / WIDTH) * 100}%`,\n                // Kept inside the chart at its ends.\n                translate: shown === 0 ? \"0\" : shown === points.length - 1 ? \"-100%\" : \"-50%\",\n              }}\n            >\n              <span>{hovered.label}</span>\n              <strong>{formatNumber(hovered.value, code)}</strong>\n            </span>\n          </>\n        )}\n      </div>\n      <figcaption className={part(\"sc-chart__ends\")}>\n        <span>{first?.label}</span>\n        {points.length > 1 && <span>{last?.label}</span>}\n      </figcaption>\n      <table className={part(\"sc-chart__data\")}>\n        <tbody>\n          {points.map((point, index) => (\n            <tr key={index}>\n              <th scope=\"row\">{point.label}</th>\n              <td>{formatNumber(point.value, code)}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </figure>\n  );\n}\n"],"mappings":"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"}

package/dist/kit/Choices.d.ts

@@ -0,0 +1,21 @@
+import { ControlBase } from "./Field.js";
+import { Option } from "./options.js";
+import "react";
+//#region src/kit/Choices.d.ts
+/**
+ * One of a few options, all in sight, as a group of radios: one bar of segments when they are
+ * short, else a card each with its hint under its label and a dot that fills when picked.
+ */
+export declare function Choices({ options, value, onChange, ...control }: ControlBase & {
+  options: Option[];
+  value: string | null;
+  onChange: (id: string) => void;
+}): import("react").JSX.Element;
+/** Several of a few options: a chip each, ticked on and off, a check on those picked. */
+export declare function Chips({ options, value, onChange, ...control }: ControlBase & {
+  options: Option[];
+  value: string[];
+  onChange: (ids: string[]) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Choices.d.ts.map

package/dist/kit/Choices.js

@@ -0,0 +1,99 @@
+import { useParts } from "./context.js";
+import { ariaOf } from "./Field.js";
+import { toggled } from "./options.js";
+import { useRef } from "react";
+import { CheckIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Choices.tsx
+const MOVES = {
+	ArrowRight: 1,
+	ArrowDown: 1,
+	ArrowLeft: -1,
+	ArrowUp: -1
+};
+/**
+* A group of radios as native ones behave: one stop for Tab (the one checked, else the first),
+* the arrows move to the next or the previous one and check it, Home and End to the ends.
+*/
+function useRadios(count, checked, check) {
+	const items = useRef([]);
+	return {
+		ref: (index) => (element) => {
+			items.current[index] = element;
+		},
+		tabIndex: (index) => index === Math.max(0, checked) ? 0 : -1,
+		onKeyDown: (event, index) => {
+			const move = MOVES[event.key];
+			const next = event.key === "Home" ? 0 : event.key === "End" ? count - 1 : move !== void 0 ? (index + move + count) % count : null;
+			if (next === null) return;
+			event.preventDefault();
+			items.current[next]?.focus();
+			check(next);
+		}
+	};
+}
+/** Few short options with no hints sit side by side in one bar; any other few are cards. */
+function segmented(options) {
+	const length = options.reduce((sum, option) => sum + option.label.length, 0);
+	return options.length <= 4 && length <= 32 && options.every((option) => !option.hint);
+}
+/**
+* One of a few options, all in sight, as a group of radios: one bar of segments when they are
+* short, else a card each with its hint under its label and a dot that fills when picked.
+*/
+function Choices({ options, value, onChange, ...control }) {
+	const part = useParts();
+	const checked = options.findIndex((option) => option.id === value);
+	const radios = useRadios(options.length, checked, (index) => {
+		const option = options[index];
+		if (option) onChange(option.id);
+	});
+	const bar = segmented(options);
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		...ariaOf(control),
+		className: part(bar ? "sc-segments" : "sc-picks"),
+		children: options.map((option, index) => /* @__PURE__ */ jsxs("button", {
+			ref: radios.ref(index),
+			type: "button",
+			role: "radio",
+			"aria-checked": index === checked,
+			tabIndex: radios.tabIndex(index),
+			disabled: control.disabled,
+			onKeyDown: (event) => radios.onKeyDown(event, index),
+			onClick: () => onChange(option.id),
+			className: part("sc-pick"),
+			children: [!bar && /* @__PURE__ */ jsx("i", { "aria-hidden": true }), /* @__PURE__ */ jsxs("span", { children: [option.label, option.hint !== void 0 && /* @__PURE__ */ jsx("small", { children: option.hint })] })]
+		}, option.id))
+	});
+}
+/** Several of a few options: a chip each, ticked on and off, a check on those picked. */
+function Chips({ options, value, onChange, ...control }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		...ariaOf(control),
+		"aria-required": void 0,
+		className: part("sc-chips"),
+		children: options.map((option) => {
+			const on = value.includes(option.id);
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "checkbox",
+				"aria-checked": on,
+				title: option.hint,
+				disabled: control.disabled,
+				onClick: () => onChange(toggled(options, value, option.id)),
+				className: part("sc-chip"),
+				children: [on && /* @__PURE__ */ jsx(CheckIcon, {
+					"aria-hidden": true,
+					weight: "bold"
+				}), option.label]
+			}, option.id);
+		})
+	});
+}
+//#endregion
+export { Chips, Choices, segmented, useRadios };
+
+//# sourceMappingURL=Choices.js.map

package/dist/kit/Choices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choices.js","names":[],"sources":["../../src/kit/Choices.tsx"],"sourcesContent":["import { CheckIcon } from \"@phosphor-icons/react\";\nimport { useRef, type KeyboardEvent } from \"react\";\n\nimport { useParts } from \"./context\";\nimport { ariaOf, type ControlBase } from \"./Field\";\nimport { toggled, type Option } from \"./options\";\n\nconst MOVES: Readonly<Record<string, 1 | -1>> = {\n  ArrowRight: 1,\n  ArrowDown: 1,\n  ArrowLeft: -1,\n  ArrowUp: -1,\n};\n\n/**\n * A group of radios as native ones behave: one stop for Tab (the one checked, else the first),\n * the arrows move to the next or the previous one and check it, Home and End to the ends.\n */\nexport function useRadios(count: number, checked: number, check: (index: number) => void) {\n  const items = useRef<(HTMLElement | null)[]>([]);\n  return {\n    ref: (index: number) => (element: HTMLElement | null) => {\n      items.current[index] = element;\n    },\n    tabIndex: (index: number) => (index === Math.max(0, checked) ? 0 : -1),\n    onKeyDown: (event: KeyboardEvent, index: number) => {\n      const move = MOVES[event.key];\n      const next =\n        event.key === \"Home\"\n          ? 0\n          : event.key === \"End\"\n            ? count - 1\n            : move !== undefined\n              ? (index + move + count) % count\n              : null;\n      if (next === null) return;\n      event.preventDefault();\n      items.current[next]?.focus();\n      check(next);\n    },\n  };\n}\n\n/** Few short options with no hints sit side by side in one bar; any other few are cards. */\nexport function segmented(options: Option[]): boolean {\n  const length = options.reduce((sum, option) => sum + option.label.length, 0);\n  return options.length <= 4 && length <= 32 && options.every((option) => !option.hint);\n}\n\n/**\n * One of a few options, all in sight, as a group of radios: one bar of segments when they are\n * short, else a card each with its hint under its label and a dot that fills when picked.\n */\nexport function Choices({\n  options,\n  value,\n  onChange,\n  ...control\n}: ControlBase & {\n  options: Option[];\n  value: string | null;\n  onChange: (id: string) => void;\n}) {\n  const part = useParts();\n  const checked = options.findIndex((option) => option.id === value);\n  const radios = useRadios(options.length, checked, (index) => {\n    const option = options[index];\n    if (option) onChange(option.id);\n  });\n  const bar = segmented(options);\n  return (\n    <div role=\"radiogroup\" {...ariaOf(control)} className={part(bar ? \"sc-segments\" : \"sc-picks\")}>\n      {options.map((option, index) => (\n        <button\n          key={option.id}\n          ref={radios.ref(index)}\n          type=\"button\"\n          role=\"radio\"\n          aria-checked={index === checked}\n          tabIndex={radios.tabIndex(index)}\n          disabled={control.disabled}\n          onKeyDown={(event) => radios.onKeyDown(event, index)}\n          onClick={() => onChange(option.id)}\n          className={part(\"sc-pick\")}\n        >\n          {!bar && <i aria-hidden />}\n          <span>\n            {option.label}\n            {option.hint !== undefined && <small>{option.hint}</small>}\n          </span>\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/** Several of a few options: a chip each, ticked on and off, a check on those picked. */\nexport function Chips({\n  options,\n  value,\n  onChange,\n  ...control\n}: ControlBase & {\n  options: Option[];\n  value: string[];\n  onChange: (ids: string[]) => void;\n}) {\n  const part = useParts();\n  return (\n    <div role=\"group\" {...ariaOf(control)} aria-required={undefined} className={part(\"sc-chips\")}>\n      {options.map((option) => {\n        const on = value.includes(option.id);\n        return (\n          <button\n            key={option.id}\n            type=\"button\"\n            role=\"checkbox\"\n            aria-checked={on}\n            title={option.hint}\n            disabled={control.disabled}\n            onClick={() => onChange(toggled(options, value, option.id))}\n            className={part(\"sc-chip\")}\n          >\n            {on && <CheckIcon aria-hidden weight=\"bold\" />}\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,QAA0C;CAC9C,YAAY;CACZ,WAAW;CACX,WAAW;CACX,SAAS;AACX;;;;;AAMA,SAAgB,UAAU,OAAe,SAAiB,OAAgC;CACxF,MAAM,QAAQ,OAA+B,CAAC,CAAC;CAC/C,OAAO;EACL,MAAM,WAAmB,YAAgC;GACvD,MAAM,QAAQ,SAAS;EACzB;EACA,WAAW,UAAmB,UAAU,KAAK,IAAI,GAAG,OAAO,IAAI,IAAI;EACnE,YAAY,OAAsB,UAAkB;GAClD,MAAM,OAAO,MAAM,MAAM;GACzB,MAAM,OACJ,MAAM,QAAQ,SACV,IACA,MAAM,QAAQ,QACZ,QAAQ,IACR,SAAS,KAAA,KACN,QAAQ,OAAO,SAAS,QACzB;GACV,IAAI,SAAS,MAAM;GACnB,MAAM,eAAe;GACrB,MAAM,QAAQ,KAAK,EAAE,MAAM;GAC3B,MAAM,IAAI;EACZ;CACF;AACF;;AAGA,SAAgB,UAAU,SAA4B;CACpD,MAAM,SAAS,QAAQ,QAAQ,KAAK,WAAW,MAAM,OAAO,MAAM,QAAQ,CAAC;CAC3E,OAAO,QAAQ,UAAU,KAAK,UAAU,MAAM,QAAQ,OAAO,WAAW,CAAC,OAAO,IAAI;AACtF;;;;;AAMA,SAAgB,QAAQ,EACtB,SACA,OACA,UACA,GAAG,WAKF;CACD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,QAAQ,WAAW,WAAW,OAAO,OAAO,KAAK;CACjE,MAAM,SAAS,UAAU,QAAQ,QAAQ,UAAU,UAAU;EAC3D,MAAM,SAAS,QAAQ;EACvB,IAAI,QAAQ,SAAS,OAAO,EAAE;CAChC,CAAC;CACD,MAAM,MAAM,UAAU,OAAO;CAC7B,OACE,oBAAC,OAAD;EAAK,MAAK;EAAa,GAAI,OAAO,OAAO;EAAG,WAAW,KAAK,MAAM,gBAAgB,UAAU;EACzF,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAAC,UAAD;GAEE,KAAK,OAAO,IAAI,KAAK;GACrB,MAAK;GACL,MAAK;GACL,gBAAc,UAAU;GACxB,UAAU,OAAO,SAAS,KAAK;GAC/B,UAAU,QAAQ;GAClB,YAAY,UAAU,OAAO,UAAU,OAAO,KAAK;GACnD,eAAe,SAAS,OAAO,EAAE;GACjC,WAAW,KAAK,SAAS;GAV3B,UAAA,CAYG,CAAC,OAAO,oBAAC,KAAD,EAAG,eAAA,KAAa,CAAA,GACzB,qBAAC,QAAD,EAAA,UAAA,CACG,OAAO,OACP,OAAO,SAAS,KAAA,KAAa,oBAAC,SAAD,EAAA,UAAQ,OAAO,KAAY,CAAA,CACrD,EAAA,CAAA,CACA;EAhBD,GAAA,OAAO,EAgBN,CACT;CACE,CAAA;AAET;;AAGA,SAAgB,MAAM,EACpB,SACA,OACA,UACA,GAAG,WAKF;CACD,MAAM,OAAO,SAAS;CACtB,OACE,oBAAC,OAAD;EAAK,MAAK;EAAQ,GAAI,OAAO,OAAO;EAAG,iBAAe,KAAA;EAAW,WAAW,KAAK,UAAU;EACxF,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,KAAK,MAAM,SAAS,OAAO,EAAE;GACnC,OACE,qBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,gBAAc;IACd,OAAO,OAAO;IACd,UAAU,QAAQ;IAClB,eAAe,SAAS,QAAQ,SAAS,OAAO,OAAO,EAAE,CAAC;IAC1D,WAAW,KAAK,SAAS;IAR3B,UAAA,CAUG,MAAM,oBAAC,WAAD;KAAW,eAAA;KAAY,QAAO;IAAQ,CAAA,GAC5C,OAAO,KACF;GAXD,GAAA,OAAO,EAWN;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/kit/Combobox.d.ts

@@ -0,0 +1,26 @@
+import { ControlBase } from "./Field.js";
+import { Option } from "./options.js";
+import { Icon } from "@phosphor-icons/react";
+//#region src/kit/Combobox.d.ts
+export interface ComboboxProps extends ControlBase {
+  options: Option[];
+  /** The ids picked: one at most, unless `multiple`. */
+  value: string[];
+  multiple: boolean;
+  onChange: (ids: string[]) => void;
+  /** An option from words that match none, such as a time typed "21:15"; null when they make none. */
+  typed?: ((text: string) => Option | null) | undefined;
+  /** The option the list opens on while nothing is picked. */
+  start?: string | undefined;
+  placeholder: string;
+  icon?: Icon | undefined;
+}
+/**
+ * A long list to pick from, as the ARIA combobox: the person types to narrow it, the arrows walk
+ * it, Enter picks, Escape closes; focus stays in the box. One picked reads in the box; several
+ * sit in it as tags (Backspace takes the last). Words that match nothing can still make an
+ * option (`typed`): a time not on the half hours.
+ */
+export declare function Combobox({ options, value, multiple, onChange, typed, start, placeholder, icon: Leading, ...control }: ComboboxProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Combobox.d.ts.map

package/dist/kit/Combobox.js

@@ -0,0 +1,190 @@
+import { useKit, useParts } from "./context.js";
+import { ariaOf } from "./Field.js";
+import { matches } from "./options.js";
+import { Popover, usePopover } from "./Popover.js";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { CaretUpDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Combobox.tsx
+/**
+* A long list to pick from, as the ARIA combobox: the person types to narrow it, the arrows walk
+* it, Enter picks, Escape closes; focus stays in the box. One picked reads in the box; several
+* sit in it as tags (Backspace takes the last). Words that match nothing can still make an
+* option (`typed`): a time not on the half hours.
+*/
+function Combobox({ options, value, multiple, onChange, typed, start, placeholder, icon: Leading, ...control }) {
+	const { id, invalid, disabled } = control;
+	const aria = ariaOf(control);
+	const { messages } = useKit();
+	const part = useParts();
+	const listId = useId();
+	const box = useRef(null);
+	const [list, setList] = useState(null);
+	const centered = useRef(null);
+	const [query, setQuery] = useState(null);
+	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(-1);
+	const close = () => {
+		setOpen(false);
+		setQuery(null);
+	};
+	const popover = usePopover(open, (next) => next ? setOpen(true) : close(), { width: "trigger" });
+	const picked = value.map((id) => options.find((option) => option.id === id) ?? {
+		id,
+		label: id
+	});
+	const found = query === null ? options : options.filter((option) => matches(option, query));
+	const made = query !== null && found.length === 0 ? typed?.(query) ?? null : null;
+	const shown = made ? [made] : found;
+	const show = () => {
+		const first = value[0] ?? start;
+		setActive(Math.max(0, options.findIndex((option) => option.id === first)));
+		setOpen(true);
+	};
+	const pick = (option) => {
+		setQuery(null);
+		if (!multiple) {
+			onChange([option.id]);
+			setOpen(false);
+		} else onChange(value.includes(option.id) ? value.filter((id) => id !== option.id) : [...value, option.id]);
+	};
+	const leave = () => {
+		if (query !== null && !multiple) {
+			const kept = query.trim() === "" ? null : typed?.(query) ?? void 0;
+			if (kept === null) onChange([]);
+			else if (kept !== void 0) onChange([kept.id]);
+		}
+		close();
+	};
+	const onKeyDown = (event) => {
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp": {
+				event.preventDefault();
+				if (!open) return show();
+				const move = event.key === "ArrowDown" ? 1 : -1;
+				setActive((at) => shown.length === 0 ? -1 : (at + move + shown.length) % shown.length);
+				return;
+			}
+			case "Enter": {
+				if (!open) return;
+				event.preventDefault();
+				const option = shown[active];
+				if (option) pick(option);
+				return;
+			}
+			case "Escape":
+				if (open) {
+					event.preventDefault();
+					event.stopPropagation();
+					close();
+				}
+				return;
+			case "Backspace": if (multiple && !query && value.length > 0) onChange(value.slice(0, -1));
+		}
+	};
+	useLayoutEffect(() => {
+		const item = list?.children[active];
+		if (!list || !(item instanceof HTMLElement)) return;
+		reveal(list, item, centered.current !== list);
+		centered.current = list;
+	}, [active, list]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		ref: popover.refs.setReference,
+		...popover.getReferenceProps(),
+		onClick: () => box.current?.focus(),
+		"data-invalid": invalid || void 0,
+		part: "control",
+		className: part("sc-control"),
+		children: [
+			Leading && /* @__PURE__ */ jsx(Leading, { "aria-hidden": true }),
+			multiple && picked.map((option) => /* @__PURE__ */ jsxs("span", {
+				className: part("sc-control__tag"),
+				children: [option.label, /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": messages.remove(option.label),
+					disabled,
+					onClick: (event) => {
+						event.stopPropagation();
+						onChange(value.filter((id) => id !== option.id));
+					},
+					children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": true })
+				})]
+			}, option.id)),
+			/* @__PURE__ */ jsx("input", {
+				ref: box,
+				id,
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-controls": open ? listId : void 0,
+				"aria-autocomplete": "list",
+				"aria-activedescendant": open && shown[active] ? `${listId}-${active}` : void 0,
+				...aria,
+				autoComplete: "off",
+				spellCheck: false,
+				placeholder: multiple && value.length > 0 ? "" : open ? messages.search : placeholder,
+				value: query ?? (multiple ? "" : picked[0]?.label ?? ""),
+				disabled,
+				onFocus: (event) => event.target.select(),
+				onClick: () => {
+					if (!open) show();
+				},
+				onChange: (event) => {
+					setQuery(event.target.value);
+					setActive(0);
+					setOpen(true);
+				},
+				onKeyDown,
+				onBlur: leave,
+				className: part("sc-control__input")
+			}),
+			/* @__PURE__ */ jsx(CaretUpDownIcon, { "aria-hidden": true })
+		]
+	}), open && /* @__PURE__ */ jsx(Popover, {
+		popover,
+		focus: false,
+		children: /* @__PURE__ */ jsx("div", {
+			onMouseDown: (event) => event.preventDefault(),
+			children: shown.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: part("sc-listbox__empty"),
+				children: messages.noResults
+			}) : /* @__PURE__ */ jsx("ul", {
+				ref: setList,
+				id: listId,
+				role: "listbox",
+				"aria-labelledby": aria["aria-labelledby"],
+				"aria-multiselectable": multiple || void 0,
+				className: part("sc-listbox"),
+				children: shown.map((option, index) => {
+					const selected = value.includes(option.id);
+					return /* @__PURE__ */ jsxs("li", {
+						id: `${listId}-${index}`,
+						role: "option",
+						"aria-selected": selected,
+						"data-active": index === active || void 0,
+						onMouseMove: () => setActive(index),
+						onClick: () => pick(option),
+						className: part("sc-listbox__item"),
+						children: [/* @__PURE__ */ jsxs("span", { children: [option.label, option.hint !== void 0 && /* @__PURE__ */ jsx("small", { children: option.hint })] }), selected && /* @__PURE__ */ jsx(CheckIcon, {
+							"aria-hidden": true,
+							weight: "bold"
+						})]
+					}, option.id);
+				})
+			})
+		})
+	})] });
+}
+/** Scrolls a list so the item shows: just enough, or with it in the middle. */
+function reveal(list, item, middle) {
+	const top = item.offsetTop;
+	const bottom = top + item.offsetHeight;
+	if (middle) list.scrollTop = top - (list.clientHeight - item.offsetHeight) / 2;
+	else if (top < list.scrollTop) list.scrollTop = top;
+	else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+}
+//#endregion
+export { Combobox };
+
+//# sourceMappingURL=Combobox.js.map

package/dist/kit/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","names":[],"sources":["../../src/kit/Combobox.tsx"],"sourcesContent":["import { CaretUpDownIcon, CheckIcon, XIcon, type Icon } from \"@phosphor-icons/react\";\nimport { useId, useLayoutEffect, useRef, useState, type KeyboardEvent } from \"react\";\n\nimport { useKit, useParts } from \"./context\";\nimport { ariaOf, type ControlBase } from \"./Field\";\nimport { matches, type Option } from \"./options\";\nimport { Popover, usePopover } from \"./Popover\";\n\nexport interface ComboboxProps extends ControlBase {\n  options: Option[];\n  /** The ids picked: one at most, unless `multiple`. */\n  value: string[];\n  multiple: boolean;\n  onChange: (ids: string[]) => void;\n  /** An option from words that match none, such as a time typed \"21:15\"; null when they make none. */\n  typed?: ((text: string) => Option | null) | undefined;\n  /** The option the list opens on while nothing is picked. */\n  start?: string | undefined;\n  placeholder: string;\n  icon?: Icon | undefined;\n}\n\n/**\n * A long list to pick from, as the ARIA combobox: the person types to narrow it, the arrows walk\n * it, Enter picks, Escape closes; focus stays in the box. One picked reads in the box; several\n * sit in it as tags (Backspace takes the last). Words that match nothing can still make an\n * option (`typed`): a time not on the half hours.\n */\nexport function Combobox({\n  options,\n  value,\n  multiple,\n  onChange,\n  typed,\n  start,\n  placeholder,\n  icon: Leading,\n  ...control\n}: ComboboxProps) {\n  const { id, invalid, disabled } = control;\n  const aria = ariaOf(control);\n  const { messages } = useKit();\n  const part = useParts();\n  const listId = useId();\n  const box = useRef<HTMLInputElement>(null);\n  // The list as it is on the page: the portal puts it there a render after it opens.\n  const [list, setList] = useState<HTMLUListElement | null>(null);\n  const centered = useRef<HTMLUListElement | null>(null);\n  // What the person typed, while they type; null shows what is picked.\n  const [query, setQuery] = useState<string | null>(null);\n  const [open, setOpen] = useState(false);\n  const [active, setActive] = useState(-1);\n  const close = () => {\n    setOpen(false);\n    setQuery(null);\n  };\n  const popover = usePopover(open, (next) => (next ? setOpen(true) : close()), {\n    width: \"trigger\",\n  });\n\n  const picked = value.map((id) => options.find((option) => option.id === id) ?? { id, label: id });\n  const found = query === null ? options : options.filter((option) => matches(option, query));\n  const made = query !== null && found.length === 0 ? (typed?.(query) ?? null) : null;\n  const shown = made ? [made] : found;\n\n  const show = () => {\n    const first = value[0] ?? start;\n    setActive(\n      Math.max(\n        0,\n        options.findIndex((option) => option.id === first),\n      ),\n    );\n    setOpen(true);\n  };\n\n  const pick = (option: Option) => {\n    setQuery(null);\n    if (!multiple) {\n      onChange([option.id]);\n      setOpen(false);\n    } else {\n      onChange(\n        value.includes(option.id) ? value.filter((id) => id !== option.id) : [...value, option.id],\n      );\n    }\n  };\n\n  // Leaving the box keeps a time typed whole, and an emptied box clears the pick.\n  const leave = () => {\n    if (query !== null && !multiple) {\n      const kept = query.trim() === \"\" ? null : (typed?.(query) ?? undefined);\n      if (kept === null) onChange([]);\n      else if (kept !== undefined) onChange([kept.id]);\n    }\n    close();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\": {\n        event.preventDefault();\n        if (!open) return show();\n        const move = event.key === \"ArrowDown\" ? 1 : -1;\n        setActive((at) => (shown.length === 0 ? -1 : (at + move + shown.length) % shown.length));\n        return;\n      }\n      case \"Enter\": {\n        if (!open) return;\n        event.preventDefault();\n        const option = shown[active];\n        if (option) pick(option);\n        return;\n      }\n      case \"Escape\":\n        // An open list takes its Escape: the page and the chat don't see it.\n        if (open) {\n          event.preventDefault();\n          event.stopPropagation();\n          close();\n        }\n        return;\n      case \"Backspace\":\n        if (multiple && !query && value.length > 0) onChange(value.slice(0, -1));\n    }\n  };\n\n  // The one under the arrows stays in sight; as the list appears, it sits in the middle.\n  useLayoutEffect(() => {\n    const item = list?.children[active];\n    if (!list || !(item instanceof HTMLElement)) return;\n    reveal(list, item, centered.current !== list);\n    centered.current = list;\n  }, [active, list]);\n\n  return (\n    <>\n      <div\n        ref={popover.refs.setReference}\n        {...popover.getReferenceProps()}\n        onClick={() => box.current?.focus()}\n        data-invalid={invalid || undefined}\n        part=\"control\"\n        className={part(\"sc-control\")}\n      >\n        {Leading && <Leading aria-hidden />}\n        {multiple &&\n          picked.map((option) => (\n            <span key={option.id} className={part(\"sc-control__tag\")}>\n              {option.label}\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                aria-label={messages.remove(option.label)}\n                disabled={disabled}\n                onClick={(event) => {\n                  event.stopPropagation();\n                  onChange(value.filter((id) => id !== option.id));\n                }}\n              >\n                <XIcon aria-hidden />\n              </button>\n            </span>\n          ))}\n        <input\n          ref={box}\n          id={id}\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={open ? listId : undefined}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={open && shown[active] ? `${listId}-${active}` : undefined}\n          {...aria}\n          autoComplete=\"off\"\n          spellCheck={false}\n          placeholder={multiple && value.length > 0 ? \"\" : open ? messages.search : placeholder}\n          value={query ?? (multiple ? \"\" : (picked[0]?.label ?? \"\"))}\n          disabled={disabled}\n          onFocus={(event) => event.target.select()}\n          onClick={() => {\n            if (!open) show();\n          }}\n          onChange={(event) => {\n            setQuery(event.target.value);\n            setActive(0);\n            setOpen(true);\n          }}\n          onKeyDown={onKeyDown}\n          onBlur={leave}\n          className={part(\"sc-control__input\")}\n        />\n        <CaretUpDownIcon aria-hidden />\n      </div>\n      {open && (\n        <Popover popover={popover} focus={false}>\n          {/* A press in the list keeps the focus in the box. */}\n          <div onMouseDown={(event) => event.preventDefault()}>\n            {shown.length === 0 ? (\n              <p className={part(\"sc-listbox__empty\")}>{messages.noResults}</p>\n            ) : (\n              <ul\n                ref={setList}\n                id={listId}\n                role=\"listbox\"\n                aria-labelledby={aria[\"aria-labelledby\"]}\n                aria-multiselectable={multiple || undefined}\n                className={part(\"sc-listbox\")}\n              >\n                {shown.map((option, index) => {\n                  const selected = value.includes(option.id);\n                  return (\n                    <li\n                      key={option.id}\n                      id={`${listId}-${index}`}\n                      role=\"option\"\n                      aria-selected={selected}\n                      data-active={index === active || undefined}\n                      onMouseMove={() => setActive(index)}\n                      onClick={() => pick(option)}\n                      className={part(\"sc-listbox__item\")}\n                    >\n                      <span>\n                        {option.label}\n                        {option.hint !== undefined && <small>{option.hint}</small>}\n                      </span>\n                      {selected && <CheckIcon aria-hidden weight=\"bold\" />}\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </div>\n        </Popover>\n      )}\n    </>\n  );\n}\n\n/** Scrolls a list so the item shows: just enough, or with it in the middle. */\nfunction reveal(list: HTMLElement, item: HTMLElement, middle: boolean) {\n  const top = item.offsetTop;\n  const bottom = top + item.offsetHeight;\n  if (middle) list.scrollTop = top - (list.clientHeight - item.offsetHeight) / 2;\n  else if (top < list.scrollTop) list.scrollTop = top;\n  else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;\n}\n"],"mappings":"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"}

package/dist/kit/DateField.d.ts

@@ -0,0 +1,17 @@
+import { ControlBase } from "./Field.js";
+import { DayBounds } from "./dates.js";
+//#region src/kit/DateField.d.ts
+export interface DateFieldProps extends ControlBase, DayBounds {
+  /** The day picked, "YYYY-MM-DD", or none. */
+  value: string | null;
+  onChange: (day: string) => void;
+  placeholder?: string | undefined;
+}
+/**
+ * A day: a button that reads the day picked in the host's language and opens a calendar under
+ * it. Only the days offered can be picked (`dates`, between `earliest` and `latest`), and when
+ * they are bounded, those stand out. Picking one closes it and gives the focus back.
+ */
+export declare function DateField({ value, onChange, placeholder, dates, earliest, latest, ...control }: DateFieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DateField.d.ts.map