@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/kit/RangeField.d.ts

@@ -0,0 +1,14 @@
+import { NumberBounds } from "./numbers.js";
+import { ControlBase } from "./Field.js";
+//#region src/kit/RangeField.d.ts
+/**
+ * A number on a slider between its least and its most: the value rides over the thumb in a
+ * bubble, with its unit, and the two ends sit under the track.
+ */
+export declare function RangeField({ value, onChange, min, max, step, unit, ...control }: ControlBase & NumberBounds & {
+  value: number;
+  onChange: (value: number) => void;
+  unit?: string | undefined;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=RangeField.d.ts.map

package/dist/kit/RangeField.js

@@ -0,0 +1,47 @@
+import { formatNumber, withUnit } from "./numbers.js";
+import { useKit, useParts } from "./context.js";
+import { ariaOf } from "./Field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/RangeField.tsx
+/**
+* A number on a slider between its least and its most: the value rides over the thumb in a
+* bubble, with its unit, and the two ends sit under the track.
+*/
+function RangeField({ value, onChange, min = 0, max = 100, step, unit, ...control }) {
+	const { code } = useKit();
+	const part = useParts();
+	const share = max > min ? (Math.min(max, Math.max(min, value)) - min) / (max - min) : 0;
+	const said = withUnit(formatNumber(value, code), unit);
+	return /* @__PURE__ */ jsxs("div", {
+		className: part("sc-range"),
+		style: { "--_share": share },
+		children: [
+			/* @__PURE__ */ jsx("output", {
+				htmlFor: control.id,
+				"aria-hidden": true,
+				children: said
+			}),
+			/* @__PURE__ */ jsx("input", {
+				id: control.id,
+				type: "range",
+				min,
+				max,
+				step: step ?? 1,
+				value,
+				disabled: control.disabled,
+				onChange: (event) => onChange(Number(event.target.value)),
+				"aria-valuetext": said,
+				...ariaOf(control),
+				"aria-required": void 0
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": true,
+				children: [/* @__PURE__ */ jsx("span", { children: withUnit(formatNumber(min, code), unit) }), /* @__PURE__ */ jsx("span", { children: withUnit(formatNumber(max, code), unit) })]
+			})
+		]
+	});
+}
+//#endregion
+export { RangeField };
+
+//# sourceMappingURL=RangeField.js.map

package/dist/kit/RangeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeField.js","names":[],"sources":["../../src/kit/RangeField.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport { useKit, useParts } from \"./context\";\nimport { ariaOf, type ControlBase } from \"./Field\";\nimport { formatNumber, withUnit, type NumberBounds } from \"./numbers\";\n\n/**\n * A number on a slider between its least and its most: the value rides over the thumb in a\n * bubble, with its unit, and the two ends sit under the track.\n */\nexport function RangeField({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step,\n  unit,\n  ...control\n}: ControlBase &\n  NumberBounds & {\n    value: number;\n    onChange: (value: number) => void;\n    unit?: string | undefined;\n  }) {\n  const { code } = useKit();\n  const part = useParts();\n  const share = max > min ? (Math.min(max, Math.max(min, value)) - min) / (max - min) : 0;\n  const said = withUnit(formatNumber(value, code), unit);\n  return (\n    <div className={part(\"sc-range\")} style={{ \"--_share\": share } as CSSProperties}>\n      <output htmlFor={control.id} aria-hidden>\n        {said}\n      </output>\n      <input\n        id={control.id}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step ?? 1}\n        value={value}\n        disabled={control.disabled}\n        onChange={(event) => onChange(Number(event.target.value))}\n        aria-valuetext={said}\n        {...ariaOf(control)}\n        aria-required={undefined}\n      />\n      <span aria-hidden>\n        <span>{withUnit(formatNumber(min, code), unit)}</span>\n        <span>{withUnit(formatNumber(max, code), unit)}</span>\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,WAAW,EACzB,OACA,UACA,MAAM,GACN,MAAM,KACN,MACA,MACA,GAAG,WAMA;CACH,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,OAAO,SAAS;CACtB,MAAM,QAAQ,MAAM,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC,IAAI,QAAQ,MAAM,OAAO;CACtF,MAAM,OAAO,SAAS,aAAa,OAAO,IAAI,GAAG,IAAI;CACrD,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,UAAU;EAAG,OAAO,EAAE,YAAY,MAAM;EAA7D,UAAA;GACE,oBAAC,UAAD;IAAQ,SAAS,QAAQ;IAAI,eAAA;IAC1B,UAAA;GACK,CAAA;GACR,oBAAC,SAAD;IACE,IAAI,QAAQ;IACZ,MAAK;IACA;IACA;IACL,MAAM,QAAQ;IACP;IACP,UAAU,QAAQ;IAClB,WAAW,UAAU,SAAS,OAAO,MAAM,OAAO,KAAK,CAAC;IACxD,kBAAgB;IAChB,GAAI,OAAO,OAAO;IAClB,iBAAe,KAAA;GAChB,CAAA;GACD,qBAAC,QAAD;IAAM,eAAA;IAAN,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,SAAS,aAAa,KAAK,IAAI,GAAG,IAAI,EAAQ,CAAA,GACrD,oBAAC,QAAD,EAAA,UAAO,SAAS,aAAa,KAAK,IAAI,GAAG,IAAI,EAAQ,CAAA,CACjD;;EACH;;AAET"}

package/dist/kit/RatingField.d.ts

@@ -0,0 +1,14 @@
+import { ControlBase } from "./Field.js";
+//#region src/kit/RatingField.d.ts
+/**
+ * Stars up to `max`, as a group of radios: the arrows move the rating, the pointer lights the
+ * stars it is over before the press, and the rating reads beside them.
+ */
+export declare function RatingField({ value, onChange, max, ...control }: ControlBase & {
+  /** The stars given, or none. */
+  value: number | null;
+  onChange: (value: number) => void;
+  max?: number | undefined;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=RatingField.d.ts.map

package/dist/kit/RatingField.js

@@ -0,0 +1,50 @@
+import { useKit, useParts } from "./context.js";
+import { ariaOf } from "./Field.js";
+import { useRadios } from "./Choices.js";
+import { useState } from "react";
+import { StarIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const MOST = 10;
+/**
+* Stars up to `max`, as a group of radios: the arrows move the rating, the pointer lights the
+* stars it is over before the press, and the rating reads beside them.
+*/
+function RatingField({ value, onChange, max = 5, ...control }) {
+	const { messages } = useKit();
+	const part = useParts();
+	const stars = Math.min(MOST, Math.max(1, Math.round(max)));
+	const rating = value === null ? 0 : Math.round(value);
+	const [over, setOver] = useState(0);
+	const radios = useRadios(stars, rating - 1, (index) => onChange(index + 1));
+	const lit = over || rating;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "radiogroup",
+		...ariaOf(control),
+		onMouseLeave: () => setOver(0),
+		className: part("sc-rating"),
+		children: [Array.from({ length: stars }, (_, index) => /* @__PURE__ */ jsx("button", {
+			ref: radios.ref(index),
+			type: "button",
+			role: "radio",
+			"aria-checked": rating === index + 1,
+			"aria-label": messages.stars(index + 1),
+			tabIndex: radios.tabIndex(index),
+			disabled: control.disabled,
+			"data-lit": index < lit || void 0,
+			onKeyDown: (event) => radios.onKeyDown(event, index),
+			onMouseEnter: () => setOver(index + 1),
+			onClick: () => onChange(index + 1),
+			children: /* @__PURE__ */ jsx(StarIcon, {
+				"aria-hidden": true,
+				weight: index < lit ? "fill" : "regular"
+			})
+		}, index)), rating > 0 && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: messages.rated(rating, stars)
+		})]
+	});
+}
+//#endregion
+export { RatingField };
+
+//# sourceMappingURL=RatingField.js.map

package/dist/kit/RatingField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingField.js","names":[],"sources":["../../src/kit/RatingField.tsx"],"sourcesContent":["import { StarIcon } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\n\nimport { useRadios } from \"./Choices\";\nimport { useKit, useParts } from \"./context\";\nimport { ariaOf, type ControlBase } from \"./Field\";\n\n/** Stars when none are given, and the most a rating draws. */\nexport const STARS = 5;\nconst MOST = 10;\n\n/**\n * Stars up to `max`, as a group of radios: the arrows move the rating, the pointer lights the\n * stars it is over before the press, and the rating reads beside them.\n */\nexport function RatingField({\n  value,\n  onChange,\n  max = STARS,\n  ...control\n}: ControlBase & {\n  /** The stars given, or none. */\n  value: number | null;\n  onChange: (value: number) => void;\n  max?: number | undefined;\n}) {\n  const { messages } = useKit();\n  const part = useParts();\n  const stars = Math.min(MOST, Math.max(1, Math.round(max)));\n  const rating = value === null ? 0 : Math.round(value);\n  const [over, setOver] = useState(0);\n  const radios = useRadios(stars, rating - 1, (index) => onChange(index + 1));\n  const lit = over || rating;\n  return (\n    <div\n      role=\"radiogroup\"\n      {...ariaOf(control)}\n      onMouseLeave={() => setOver(0)}\n      className={part(\"sc-rating\")}\n    >\n      {Array.from({ length: stars }, (_, index) => (\n        <button\n          key={index}\n          ref={radios.ref(index)}\n          type=\"button\"\n          role=\"radio\"\n          aria-checked={rating === index + 1}\n          aria-label={messages.stars(index + 1)}\n          tabIndex={radios.tabIndex(index)}\n          disabled={control.disabled}\n          data-lit={index < lit || undefined}\n          onKeyDown={(event) => radios.onKeyDown(event, index)}\n          onMouseEnter={() => setOver(index + 1)}\n          onClick={() => onChange(index + 1)}\n        >\n          <StarIcon aria-hidden weight={index < lit ? \"fill\" : \"regular\"} />\n        </button>\n      ))}\n      {rating > 0 && <span aria-hidden>{messages.rated(rating, stars)}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AASA,MAAM,OAAO;;;;;AAMb,SAAgB,YAAY,EAC1B,OACA,UACA,MAAA,GACA,GAAG,WAMF;CACD,MAAM,EAAE,aAAa,OAAO;CAC5B,MAAM,OAAO,SAAS;CACtB,MAAM,QAAQ,KAAK,IAAI,MAAM,KAAK,IAAI,GAAG,KAAK,MAAM,GAAG,CAAC,CAAC;CACzD,MAAM,SAAS,UAAU,OAAO,IAAI,KAAK,MAAM,KAAK;CACpD,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;CAClC,MAAM,SAAS,UAAU,OAAO,SAAS,IAAI,UAAU,SAAS,QAAQ,CAAC,CAAC;CAC1E,MAAM,MAAM,QAAQ;CACpB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,GAAI,OAAO,OAAO;EAClB,oBAAoB,QAAQ,CAAC;EAC7B,WAAW,KAAK,WAAW;EAJ7B,UAAA,CAMG,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,UAAD;GAEE,KAAK,OAAO,IAAI,KAAK;GACrB,MAAK;GACL,MAAK;GACL,gBAAc,WAAW,QAAQ;GACjC,cAAY,SAAS,MAAM,QAAQ,CAAC;GACpC,UAAU,OAAO,SAAS,KAAK;GAC/B,UAAU,QAAQ;GAClB,YAAU,QAAQ,OAAO,KAAA;GACzB,YAAY,UAAU,OAAO,UAAU,OAAO,KAAK;GACnD,oBAAoB,QAAQ,QAAQ,CAAC;GACrC,eAAe,SAAS,QAAQ,CAAC;GAEjC,UAAA,oBAAC,UAAD;IAAU,eAAA;IAAY,QAAQ,QAAQ,MAAM,SAAS;GAAY,CAAA;EAC3D,GAdD,KAcC,CACT,GACA,SAAS,KAAK,oBAAC,QAAD;GAAM,eAAA;GAAa,UAAA,SAAS,MAAM,QAAQ,KAAK;EAAQ,CAAA,CACnE;;AAET"}

package/dist/kit/Stat.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+//#region src/kit/Stat.d.ts
+export type Tone = "info" | "success" | "warning" | "danger";
+/** One number that matters: a quiet label, the figure large, a line of context in its tone. */
+export declare function Stat({ label, value, hint, tone, className }: {
+  label: ReactNode;
+  value: ReactNode;
+  hint?: ReactNode;
+  /** The hint's: a rise in success, a fall in danger. */
+  tone?: Tone | undefined;
+  className?: string | undefined;
+}): import("react").JSX.Element;
+/**
+ * Figures side by side in one hairline box, a hairline between each, their figures a size
+ * quieter than a `Stat` alone: a day at a glance. All in a row where the box has room, two
+ * across where it has not.
+ */
+export declare function Stats({ label, className, children }: {
+  /** What the figures are, for screen readers, when no heading above them says it. */
+  label?: string | undefined;
+  className?: string | undefined;
+  /** The figures, each a `Stat`. */
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Stat.d.ts.map

package/dist/kit/Stat.js

@@ -0,0 +1,46 @@
+import { joined, useParts } from "./context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Stat.tsx
+/** One number that matters: a quiet label, the figure large, a line of context in its tone. */
+function Stat({ label, value, hint, tone, className }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsxs("div", {
+		part: "stat",
+		className: joined(part("sc-stat", ...tone !== void 0 ? [`sc-stat--${tone}`] : []), className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: part("sc-stat__label"),
+				children: label
+			}),
+			/* @__PURE__ */ jsx("strong", {
+				className: part("sc-stat__value"),
+				children: value
+			}),
+			hint !== void 0 && /* @__PURE__ */ jsx("small", {
+				className: part("sc-stat__hint"),
+				children: hint
+			})
+		]
+	});
+}
+/**
+* Figures side by side in one hairline box, a hairline between each, their figures a size
+* quieter than a `Stat` alone: a day at a glance. All in a row where the box has room, two
+* across where it has not.
+*/
+function Stats({ label, className, children }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		className: joined(part("sc-stats"), className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: part("sc-stats__grid"),
+			children
+		})
+	});
+}
+//#endregion
+export { Stat, Stats };
+
+//# sourceMappingURL=Stat.js.map

package/dist/kit/Stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","names":[],"sources":["../../src/kit/Stat.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { joined, useParts } from \"./context\";\n\nexport type Tone = \"info\" | \"success\" | \"warning\" | \"danger\";\n\n/** One number that matters: a quiet label, the figure large, a line of context in its tone. */\nexport function Stat({\n  label,\n  value,\n  hint,\n  tone,\n  className,\n}: {\n  label: ReactNode;\n  value: ReactNode;\n  hint?: ReactNode;\n  /** The hint's: a rise in success, a fall in danger. */\n  tone?: Tone | undefined;\n  className?: string | undefined;\n}) {\n  const part = useParts();\n  return (\n    <div\n      part=\"stat\"\n      className={joined(\n        part(\"sc-stat\", ...(tone !== undefined ? ([`sc-stat--${tone}`] as const) : [])),\n        className,\n      )}\n    >\n      <span className={part(\"sc-stat__label\")}>{label}</span>\n      <strong className={part(\"sc-stat__value\")}>{value}</strong>\n      {hint !== undefined && <small className={part(\"sc-stat__hint\")}>{hint}</small>}\n    </div>\n  );\n}\n\n/**\n * Figures side by side in one hairline box, a hairline between each, their figures a size\n * quieter than a `Stat` alone: a day at a glance. All in a row where the box has room, two\n * across where it has not.\n */\nexport function Stats({\n  label,\n  className,\n  children,\n}: {\n  /** What the figures are, for screen readers, when no heading above them says it. */\n  label?: string | undefined;\n  className?: string | undefined;\n  /** The figures, each a `Stat`. */\n  children: ReactNode;\n}) {\n  const part = useParts();\n  return (\n    <div role=\"group\" aria-label={label} className={joined(part(\"sc-stats\"), className)}>\n      <div className={part(\"sc-stats__grid\")}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,KAAK,EACnB,OACA,OACA,MACA,MACA,aAQC;CACD,MAAM,OAAO,SAAS;CACtB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,OACT,KAAK,WAAW,GAAI,SAAS,KAAA,IAAa,CAAC,YAAY,MAAM,IAAc,CAAC,CAAE,GAC9E,SACF;EALF,UAAA;GAOE,oBAAC,QAAD;IAAM,WAAW,KAAK,gBAAgB;IAAI,UAAA;GAAY,CAAA;GACtD,oBAAC,UAAD;IAAQ,WAAW,KAAK,gBAAgB;IAAI,UAAA;GAAc,CAAA;GACzD,SAAS,KAAA,KAAa,oBAAC,SAAD;IAAO,WAAW,KAAK,eAAe;IAAI,UAAA;GAAY,CAAA;EAC1E;;AAET;;;;;;AAOA,SAAgB,MAAM,EACpB,OACA,WACA,YAOC;CACD,MAAM,OAAO,SAAS;CACtB,OACE,oBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAW,OAAO,KAAK,UAAU,GAAG,SAAS;EAChF,UAAA,oBAAC,OAAD;GAAK,WAAW,KAAK,gBAAgB;GAAI;EAAc,CAAA;CACpD,CAAA;AAET"}

package/dist/kit/Switch.d.ts

@@ -0,0 +1,14 @@
+//#region src/kit/Switch.d.ts
+export interface SwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  /** What it turns on and off, for screen readers when no label beside it says so. */
+  label?: string | undefined;
+  labelledBy?: string | undefined;
+  disabled?: boolean | undefined;
+  className?: string | undefined;
+}
+/** On or off at once, as the ARIA switch: a track lit in the accent when on, its knob across. */
+export declare function Switch({ checked, onChange, label, labelledBy, disabled, className }: SwitchProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Switch.d.ts.map

package/dist/kit/Switch.js

@@ -0,0 +1,21 @@
+import { joined, useParts } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/kit/Switch.tsx
+/** On or off at once, as the ARIA switch: a track lit in the accent when on, its knob across. */
+function Switch({ checked, onChange, label, labelledBy, disabled, className }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"aria-label": labelledBy === void 0 ? label : void 0,
+		"aria-labelledby": labelledBy,
+		disabled,
+		onClick: () => onChange(!checked),
+		className: joined(part("sc-switch"), className)
+	});
+}
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=Switch.js.map

package/dist/kit/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":[],"sources":["../../src/kit/Switch.tsx"],"sourcesContent":["import { joined, useParts } from \"./context\";\n\nexport interface SwitchProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  /** What it turns on and off, for screen readers when no label beside it says so. */\n  label?: string | undefined;\n  labelledBy?: string | undefined;\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n}\n\n/** On or off at once, as the ARIA switch: a track lit in the accent when on, its knob across. */\nexport function Switch({ checked, onChange, label, labelledBy, disabled, className }: SwitchProps) {\n  const part = useParts();\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={labelledBy === undefined ? label : undefined}\n      aria-labelledby={labelledBy}\n      disabled={disabled}\n      onClick={() => onChange(!checked)}\n      className={joined(part(\"sc-switch\"), className)}\n    />\n  );\n}\n"],"mappings":";;;;AAaA,SAAgB,OAAO,EAAE,SAAS,UAAU,OAAO,YAAY,UAAU,aAA0B;CACjG,MAAM,OAAO,SAAS;CACtB,OACE,oBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,eAAe,KAAA,IAAY,QAAQ,KAAA;EAC/C,mBAAiB;EACP;EACV,eAAe,SAAS,CAAC,OAAO;EAChC,WAAW,OAAO,KAAK,WAAW,GAAG,SAAS;CAC/C,CAAA;AAEL"}

package/dist/kit/Tag.d.ts

@@ -0,0 +1,16 @@
+import { Tone } from "./Stat.js";
+import { ReactNode } from "react";
+//#region src/kit/Tag.d.ts
+/**
+ * A short word beside what it qualifies, no pill: how something stands, in its tone ("Falló" in
+ * danger, "Espera tu respuesta" in the accent), a small glyph or dot before the words when
+ * `children` starts with one. For state only: a property a row always has is said by where the
+ * row sits (under a heading), not by a word on each.
+ */
+export declare function Tag({ tone, className, children }: {
+  tone?: Tone | undefined;
+  className?: string | undefined;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Tag.d.ts.map

package/dist/kit/Tag.js

@@ -0,0 +1,20 @@
+import { joined, useParts } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/kit/Tag.tsx
+/**
+* A short word beside what it qualifies, no pill: how something stands, in its tone ("Falló" in
+* danger, "Espera tu respuesta" in the accent), a small glyph or dot before the words when
+* `children` starts with one. For state only: a property a row always has is said by where the
+* row sits (under a heading), not by a word on each.
+*/
+function Tag({ tone, className, children }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("span", {
+		className: joined(part("sc-tag", ...tone !== void 0 ? [`sc-tag--${tone}`] : []), className),
+		children
+	});
+}
+//#endregion
+export { Tag };
+
+//# sourceMappingURL=Tag.js.map

package/dist/kit/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","names":[],"sources":["../../src/kit/Tag.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { joined, useParts } from \"./context\";\nimport type { Tone } from \"./Stat\";\n\n/**\n * A short word beside what it qualifies, no pill: how something stands, in its tone (\"Falló\" in\n * danger, \"Espera tu respuesta\" in the accent), a small glyph or dot before the words when\n * `children` starts with one. For state only: a property a row always has is said by where the\n * row sits (under a heading), not by a word on each.\n */\nexport function Tag({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const part = useParts();\n  return (\n    <span\n      className={joined(\n        part(\"sc-tag\", ...(tone !== undefined ? ([`sc-tag--${tone}`] as const) : [])),\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,IAAI,EAClB,MACA,WACA,YAKC;CACD,MAAM,OAAO,SAAS;CACtB,OACE,oBAAC,QAAD;EACE,WAAW,OACT,KAAK,UAAU,GAAI,SAAS,KAAA,IAAa,CAAC,WAAW,MAAM,IAAc,CAAC,CAAE,GAC5E,SACF;EAEC;CACG,CAAA;AAEV"}

package/dist/kit/Tile.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+//#region src/kit/Tile.d.ts
+/**
+ * Tiles in a grid that asks its own width, not the window's: two across, one when narrow, three
+ * when there is room. What an agent works with, a squad's agents at a glance.
+ */
+export declare function Tiles({ label, className, children }: {
+  /** The grid's name, for screen readers, when no heading above it says it. */
+  label?: string | undefined;
+  className?: string | undefined;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export interface TileProps {
+  /** At its start, usually a small `Mark`: what kind of thing it is. */
+  mark?: ReactNode;
+  /** What it is, in a word or two. */
+  title: ReactNode;
+  /** How many it holds, at its end, in figures that line up. */
+  count?: ReactNode;
+  /** In the count's place, what says it better: a few logos and how many more. */
+  end?: ReactNode;
+  /** Pressing the tile: it opens what it stands for. */
+  onPress?: (() => void) | undefined;
+  /** Holding nothing yet: quieter, still to press. */
+  quiet?: boolean | undefined;
+  className?: string | undefined;
+}
+/**
+ * One tile of `Tiles`, on one line: its mark, its name, and at its end its count (or what says it
+ * better). With `onPress` the whole tile is a button.
+ */
+export declare function Tile({ mark, title, count, end, onPress, quiet, className }: TileProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Tile.d.ts.map

package/dist/kit/Tile.js

@@ -0,0 +1,52 @@
+import { joined, useParts } from "./context.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Tile.tsx
+/**
+* Tiles in a grid that asks its own width, not the window's: two across, one when narrow, three
+* when there is room. What an agent works with, a squad's agents at a glance.
+*/
+function Tiles({ label, className, children }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		className: joined(part("sc-tiles"), className),
+		children: /* @__PURE__ */ jsx("ul", {
+			"aria-label": label,
+			className: part("sc-tiles__grid"),
+			children
+		})
+	});
+}
+/**
+* One tile of `Tiles`, on one line: its mark, its name, and at its end its count (or what says it
+* better). With `onPress` the whole tile is a button.
+*/
+function Tile({ mark, title, count, end, onPress, quiet, className }) {
+	const part = useParts();
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		mark,
+		/* @__PURE__ */ jsx("span", {
+			className: part("sc-tile__title"),
+			children: title
+		}),
+		end ?? (count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: part("sc-tile__count"),
+			children: count
+		}))
+	] });
+	return /* @__PURE__ */ jsx("li", {
+		className: joined(part("sc-tile", ...quiet ? ["sc-tile--quiet"] : []), className),
+		children: onPress ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onPress,
+			className: part("sc-tile__main"),
+			children: body
+		}) : /* @__PURE__ */ jsx("div", {
+			className: part("sc-tile__main"),
+			children: body
+		})
+	});
+}
+//#endregion
+export { Tile, Tiles };
+
+//# sourceMappingURL=Tile.js.map

package/dist/kit/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","names":[],"sources":["../../src/kit/Tile.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { joined, useParts } from \"./context\";\n\n/**\n * Tiles in a grid that asks its own width, not the window's: two across, one when narrow, three\n * when there is room. What an agent works with, a squad's agents at a glance.\n */\nexport function Tiles({\n  label,\n  className,\n  children,\n}: {\n  /** The grid's name, for screen readers, when no heading above it says it. */\n  label?: string | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const part = useParts();\n  return (\n    <div className={joined(part(\"sc-tiles\"), className)}>\n      <ul aria-label={label} className={part(\"sc-tiles__grid\")}>\n        {children}\n      </ul>\n    </div>\n  );\n}\n\nexport interface TileProps {\n  /** At its start, usually a small `Mark`: what kind of thing it is. */\n  mark?: ReactNode;\n  /** What it is, in a word or two. */\n  title: ReactNode;\n  /** How many it holds, at its end, in figures that line up. */\n  count?: ReactNode;\n  /** In the count's place, what says it better: a few logos and how many more. */\n  end?: ReactNode;\n  /** Pressing the tile: it opens what it stands for. */\n  onPress?: (() => void) | undefined;\n  /** Holding nothing yet: quieter, still to press. */\n  quiet?: boolean | undefined;\n  className?: string | undefined;\n}\n\n/**\n * One tile of `Tiles`, on one line: its mark, its name, and at its end its count (or what says it\n * better). With `onPress` the whole tile is a button.\n */\nexport function Tile({ mark, title, count, end, onPress, quiet, className }: TileProps) {\n  const part = useParts();\n  const body = (\n    <>\n      {mark}\n      <span className={part(\"sc-tile__title\")}>{title}</span>\n      {end ?? (count !== undefined && <span className={part(\"sc-tile__count\")}>{count}</span>)}\n    </>\n  );\n  return (\n    <li\n      className={joined(\n        part(\"sc-tile\", ...(quiet ? ([\"sc-tile--quiet\"] as const) : [])),\n        className,\n      )}\n    >\n      {onPress ? (\n        <button type=\"button\" onClick={onPress} className={part(\"sc-tile__main\")}>\n          {body}\n        </button>\n      ) : (\n        <div className={part(\"sc-tile__main\")}>{body}</div>\n      )}\n    </li>\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,MAAM,EACpB,OACA,WACA,YAMC;CACD,MAAM,OAAO,SAAS;CACtB,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO,KAAK,UAAU,GAAG,SAAS;EAChD,UAAA,oBAAC,MAAD;GAAI,cAAY;GAAO,WAAW,KAAK,gBAAgB;GACpD;EACC,CAAA;CACD,CAAA;AAET;;;;;AAsBA,SAAgB,KAAK,EAAE,MAAM,OAAO,OAAO,KAAK,SAAS,OAAO,aAAwB;CACtF,MAAM,OAAO,SAAS;CACtB,MAAM,OACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACD,oBAAC,QAAD;GAAM,WAAW,KAAK,gBAAgB;GAAI,UAAA;EAAY,CAAA;EACrD,QAAQ,UAAU,KAAA,KAAa,oBAAC,QAAD;GAAM,WAAW,KAAK,gBAAgB;GAAI,UAAA;EAAY,CAAA;CACtF,EAAA,CAAA;CAEJ,OACE,oBAAC,MAAD;EACE,WAAW,OACT,KAAK,WAAW,GAAI,QAAS,CAAC,gBAAgB,IAAc,CAAC,CAAE,GAC/D,SACF;EAEC,UAAA,UACC,oBAAC,UAAD;GAAQ,MAAK;GAAS,SAAS;GAAS,WAAW,KAAK,eAAe;GACpE,UAAA;EACK,CAAA,IAER,oBAAC,OAAD;GAAK,WAAW,KAAK,eAAe;GAAI,UAAA;EAAU,CAAA;CAElD,CAAA;AAER"}

package/dist/kit/TimeField.d.ts

@@ -0,0 +1,31 @@
+import { ControlBase } from "./Field.js";
+import { DayBounds } from "./dates.js";
+//#region src/kit/TimeField.d.ts
+export interface TimeFieldProps extends ControlBase {
+  /** The time picked, "HH:MM", or none. */
+  value: string | null;
+  onChange: (time: string | null) => void;
+  /** The only slots, "HH:MM". */
+  times?: string[] | undefined;
+  placeholder?: string | undefined;
+  /** It is where a stretch of the day ends: the day's end ("24:00") is offered last, and typed. */
+  endOfDay?: boolean | undefined;
+}
+/**
+ * A time: the slots offered as chips to pick one of, when there are; else a list of the half
+ * hours to search, which also takes a time typed ("9:15", "21.30").
+ */
+export declare function TimeField(props: TimeFieldProps): import("react").JSX.Element;
+export interface DateTimeFieldProps extends ControlBase, DayBounds {
+  /** "YYYY-MM-DDTHH:MM"; held as "YYYY-MM-DDT" or "THH:MM" while half picked; none when neither. */
+  value: string | null;
+  onChange: (moment: string | null) => void;
+  times?: string[] | undefined;
+}
+/**
+ * A moment: a day and a time side by side, one over the other when narrow or when the time is
+ * a grid of slots. Each half is kept while the other is still to pick.
+ */
+export declare function DateTimeField({ value, onChange, dates, earliest, latest, times, ...control }: DateTimeFieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=TimeField.d.ts.map

package/dist/kit/TimeField.js

@@ -0,0 +1,109 @@
+import { useKit, useParts } from "./context.js";
+import { ariaOf } from "./Field.js";
+import { useRadios } from "./Choices.js";
+import { Combobox } from "./Combobox.js";
+import { DAY_END, formatTime, halfHours, momentOf, momentParts, parseEndTime, parseTime } from "./dates.js";
+import { DateField } from "./DateField.js";
+import { ClockIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/TimeField.tsx
+/** Where a list of times opens while none is picked: the start of a working day. */
+const MORNING = "09:00";
+/**
+* A time: the slots offered as chips to pick one of, when there are; else a list of the half
+* hours to search, which also takes a time typed ("9:15", "21.30").
+*/
+function TimeField(props) {
+	return props.times ? /* @__PURE__ */ jsx(Slots, {
+		...props,
+		times: props.times
+	}) : /* @__PURE__ */ jsx(AnyTime, { ...props });
+}
+/** The slots, a chip each in a grid, as one group of radios. */
+function Slots({ value, onChange, times, endOfDay: _, ...control }) {
+	const { code } = useKit();
+	const part = useParts();
+	const checked = value === null ? -1 : times.indexOf(value);
+	const radios = useRadios(times.length, checked, (index) => {
+		const time = times[index];
+		if (time !== void 0) onChange(time);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		...ariaOf(control),
+		className: part("sc-slots"),
+		children: times.map((time, index) => /* @__PURE__ */ jsx("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(time),
+			className: part("sc-chip"),
+			children: formatTime(time, code)
+		}, time))
+	});
+}
+/** Any time of the day: the half hours to pick from, or one typed; an end, the day's end too. */
+function AnyTime({ value, onChange, placeholder, times: _, endOfDay = false, ...control }) {
+	const { code, messages } = useKit();
+	const parse = endOfDay ? parseEndTime : parseTime;
+	const time = value !== null && parse(value) ? value : null;
+	const times = endOfDay ? [...halfHours(), DAY_END] : halfHours();
+	if (time !== null && !times.includes(time)) times.push(time);
+	return /* @__PURE__ */ jsx(Combobox, {
+		...control,
+		options: times.toSorted().map((at) => ({
+			id: at,
+			label: formatTime(at, code)
+		})),
+		value: time === null ? [] : [time],
+		multiple: false,
+		onChange: (ids) => onChange(ids[0] ?? null),
+		typed: (text) => {
+			const typed = parse(text);
+			return typed === null ? null : {
+				id: typed,
+				label: formatTime(typed, code)
+			};
+		},
+		start: MORNING,
+		placeholder: placeholder ?? messages.chooseTime,
+		icon: ClockIcon
+	});
+}
+/**
+* A moment: a day and a time side by side, one over the other when narrow or when the time is
+* a grid of slots. Each half is kept while the other is still to pick.
+*/
+function DateTimeField({ value, onChange, dates, earliest, latest, times, ...control }) {
+	const part = useParts();
+	const [date, time] = momentParts(value);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		...ariaOf(control),
+		"aria-required": void 0,
+		"data-slots": times ? "" : void 0,
+		className: part("sc-moment"),
+		children: [/* @__PURE__ */ jsx(DateField, {
+			...control,
+			value: date || null,
+			dates,
+			earliest,
+			latest,
+			onChange: (day) => onChange(momentOf(day, time))
+		}), /* @__PURE__ */ jsx(TimeField, {
+			...control,
+			id: control.id === void 0 ? void 0 : `${control.id}-time`,
+			value: time || null,
+			times,
+			onChange: (at) => onChange(momentOf(date, at ?? ""))
+		})]
+	});
+}
+//#endregion
+export { DateTimeField, TimeField };
+
+//# sourceMappingURL=TimeField.js.map

package/dist/kit/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","names":[],"sources":["../../src/kit/TimeField.tsx"],"sourcesContent":["import { ClockIcon } from \"@phosphor-icons/react\";\n\nimport { useRadios } from \"./Choices\";\nimport { Combobox } from \"./Combobox\";\nimport { useKit, useParts } from \"./context\";\nimport { DateField } from \"./DateField\";\nimport {\n  DAY_END,\n  formatTime,\n  halfHours,\n  momentOf,\n  momentParts,\n  parseEndTime,\n  parseTime,\n  type DayBounds,\n} from \"./dates\";\nimport { ariaOf, type ControlBase } from \"./Field\";\n\n/** Where a list of times opens while none is picked: the start of a working day. */\nconst MORNING = \"09:00\";\n\nexport interface TimeFieldProps extends ControlBase {\n  /** The time picked, \"HH:MM\", or none. */\n  value: string | null;\n  onChange: (time: string | null) => void;\n  /** The only slots, \"HH:MM\". */\n  times?: string[] | undefined;\n  placeholder?: string | undefined;\n  /** It is where a stretch of the day ends: the day's end (\"24:00\") is offered last, and typed. */\n  endOfDay?: boolean | undefined;\n}\n\n/**\n * A time: the slots offered as chips to pick one of, when there are; else a list of the half\n * hours to search, which also takes a time typed (\"9:15\", \"21.30\").\n */\nexport function TimeField(props: TimeFieldProps) {\n  return props.times ? <Slots {...props} times={props.times} /> : <AnyTime {...props} />;\n}\n\n/** The slots, a chip each in a grid, as one group of radios. */\nfunction Slots({\n  value,\n  onChange,\n  times,\n  endOfDay: _,\n  ...control\n}: TimeFieldProps & { times: string[] }) {\n  const { code } = useKit();\n  const part = useParts();\n  const checked = value === null ? -1 : times.indexOf(value);\n  const radios = useRadios(times.length, checked, (index) => {\n    const time = times[index];\n    if (time !== undefined) onChange(time);\n  });\n  return (\n    <div role=\"radiogroup\" {...ariaOf(control)} className={part(\"sc-slots\")}>\n      {times.map((time, index) => (\n        <button\n          key={time}\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(time)}\n          className={part(\"sc-chip\")}\n        >\n          {formatTime(time, code)}\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/** Any time of the day: the half hours to pick from, or one typed; an end, the day's end too. */\nfunction AnyTime({\n  value,\n  onChange,\n  placeholder,\n  times: _,\n  endOfDay = false,\n  ...control\n}: TimeFieldProps) {\n  const { code, messages } = useKit();\n  const parse = endOfDay ? parseEndTime : parseTime;\n  const time = value !== null && parse(value) ? value : null;\n  const times = endOfDay ? [...halfHours(), DAY_END] : halfHours();\n  if (time !== null && !times.includes(time)) times.push(time);\n  return (\n    <Combobox\n      {...control}\n      options={times.toSorted().map((at) => ({ id: at, label: formatTime(at, code) }))}\n      value={time === null ? [] : [time]}\n      multiple={false}\n      onChange={(ids) => onChange(ids[0] ?? null)}\n      typed={(text) => {\n        const typed = parse(text);\n        return typed === null ? null : { id: typed, label: formatTime(typed, code) };\n      }}\n      start={MORNING}\n      placeholder={placeholder ?? messages.chooseTime}\n      icon={ClockIcon}\n    />\n  );\n}\n\nexport interface DateTimeFieldProps extends ControlBase, DayBounds {\n  /** \"YYYY-MM-DDTHH:MM\"; held as \"YYYY-MM-DDT\" or \"THH:MM\" while half picked; none when neither. */\n  value: string | null;\n  onChange: (moment: string | null) => void;\n  times?: string[] | undefined;\n}\n\n/**\n * A moment: a day and a time side by side, one over the other when narrow or when the time is\n * a grid of slots. Each half is kept while the other is still to pick.\n */\nexport function DateTimeField({\n  value,\n  onChange,\n  dates,\n  earliest,\n  latest,\n  times,\n  ...control\n}: DateTimeFieldProps) {\n  const part = useParts();\n  const [date, time] = momentParts(value);\n  return (\n    <div\n      role=\"group\"\n      {...ariaOf(control)}\n      aria-required={undefined}\n      data-slots={times ? \"\" : undefined}\n      className={part(\"sc-moment\")}\n    >\n      <DateField\n        {...control}\n        value={date || null}\n        dates={dates}\n        earliest={earliest}\n        latest={latest}\n        onChange={(day) => onChange(momentOf(day, time))}\n      />\n      <TimeField\n        {...control}\n        id={control.id === undefined ? undefined : `${control.id}-time`}\n        value={time || null}\n        times={times}\n        onChange={(at) => onChange(momentOf(date, at ?? \"\"))}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,UAAU;;;;;AAiBhB,SAAgB,UAAU,OAAuB;CAC/C,OAAO,MAAM,QAAQ,oBAAC,OAAD;EAAO,GAAI;EAAO,OAAO,MAAM;CAAQ,CAAA,IAAI,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA;AACvF;;AAGA,SAAS,MAAM,EACb,OACA,UACA,OACA,UAAU,GACV,GAAG,WACoC;CACvC,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,UAAU,OAAO,KAAK,MAAM,QAAQ,KAAK;CACzD,MAAM,SAAS,UAAU,MAAM,QAAQ,UAAU,UAAU;EACzD,MAAM,OAAO,MAAM;EACnB,IAAI,SAAS,KAAA,GAAW,SAAS,IAAI;CACvC,CAAC;CACD,OACE,oBAAC,OAAD;EAAK,MAAK;EAAa,GAAI,OAAO,OAAO;EAAG,WAAW,KAAK,UAAU;EACnE,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,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,IAAI;GAC5B,WAAW,KAAK,SAAS;GAExB,UAAA,WAAW,MAAM,IAAI;EAChB,GAZD,IAYC,CACT;CACE,CAAA;AAET;;AAGA,SAAS,QAAQ,EACf,OACA,UACA,aACA,OAAO,GACP,WAAW,OACX,GAAG,WACc;CACjB,MAAM,EAAE,MAAM,aAAa,OAAO;CAClC,MAAM,QAAQ,WAAW,eAAe;CACxC,MAAM,OAAO,UAAU,QAAQ,MAAM,KAAK,IAAI,QAAQ;CACtD,MAAM,QAAQ,WAAW,CAAC,GAAG,UAAU,GAAG,OAAO,IAAI,UAAU;CAC/D,IAAI,SAAS,QAAQ,CAAC,MAAM,SAAS,IAAI,GAAG,MAAM,KAAK,IAAI;CAC3D,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,SAAS,MAAM,SAAS,CAAC,CAAC,KAAK,QAAQ;GAAE,IAAI;GAAI,OAAO,WAAW,IAAI,IAAI;EAAE,EAAE;EAC/E,OAAO,SAAS,OAAO,CAAC,IAAI,CAAC,IAAI;EACjC,UAAU;EACV,WAAW,QAAQ,SAAS,IAAI,MAAM,IAAI;EAC1C,QAAQ,SAAS;GACf,MAAM,QAAQ,MAAM,IAAI;GACxB,OAAO,UAAU,OAAO,OAAO;IAAE,IAAI;IAAO,OAAO,WAAW,OAAO,IAAI;GAAE;EAC7E;EACA,OAAO;EACP,aAAa,eAAe,SAAS;EACrC,MAAM;CACP,CAAA;AAEL;;;;;AAaA,SAAgB,cAAc,EAC5B,OACA,UACA,OACA,UACA,QACA,OACA,GAAG,WACkB;CACrB,MAAM,OAAO,SAAS;CACtB,MAAM,CAAC,MAAM,QAAQ,YAAY,KAAK;CACtC,OACE,qBAAC,OAAD;EACE,MAAK;EACL,GAAI,OAAO,OAAO;EAClB,iBAAe,KAAA;EACf,cAAY,QAAQ,KAAK,KAAA;EACzB,WAAW,KAAK,WAAW;EAL7B,UAAA,CAOE,oBAAC,WAAD;GACE,GAAI;GACJ,OAAO,QAAQ;GACR;GACG;GACF;GACR,WAAW,QAAQ,SAAS,SAAS,KAAK,IAAI,CAAC;EAChD,CAAA,GACD,oBAAC,WAAD;GACE,GAAI;GACJ,IAAI,QAAQ,OAAO,KAAA,IAAY,KAAA,IAAY,GAAG,QAAQ,GAAG;GACzD,OAAO,QAAQ;GACR;GACP,WAAW,OAAO,SAAS,SAAS,MAAM,MAAM,EAAE,CAAC;EACpD,CAAA,CACE;;AAET"}

package/dist/kit/context.d.ts

@@ -0,0 +1,22 @@
+import { KitLocale, KitMessages } from "./messages.js";
+import { ReactNode } from "react";
+//#region src/kit/context.d.ts
+/**
+ * The kit's parts, by the class each carries: one BEM family per primitive. `classNames` adds a
+ * host's own under the same keys, so a host styles every place a primitive appears at once.
+ * (`sc-card` is the Ficha's; the kit's card is `sc-panel`.)
+ */
+export type KitPart = "sc-panel" | "sc-panel__head" | "sc-panel__head--image" | "sc-panel__heading" | "sc-panel__title" | "sc-panel__subtitle" | "sc-list" | "sc-row" | "sc-row--quiet" | "sc-row--pressed" | "sc-row__main" | "sc-row__text" | "sc-row__title" | "sc-row__subtitle" | "sc-row__error" | "sc-row__meta" | "sc-row__trailing" | "sc-mark" | "sc-mark--logo" | "sc-mark--photo" | "sc-mark--round" | "sc-tiles" | "sc-tiles__grid" | "sc-tile" | "sc-tile--quiet" | "sc-tile__main" | "sc-tile__count" | "sc-tile__title" | "sc-stack" | "sc-stack__item" | "sc-stack__more" | "sc-tag" | "sc-tag--info" | "sc-tag--success" | "sc-tag--warning" | "sc-tag--danger" | "sc-stat" | "sc-stat--info" | "sc-stat--success" | "sc-stat--warning" | "sc-stat--danger" | "sc-stat__label" | "sc-stat__value" | "sc-stat__hint" | "sc-stats" | "sc-stats__grid" | "sc-chart" | "sc-chart--bar" | "sc-chart--line" | "sc-chart__row" | "sc-chart__label" | "sc-chart__track" | "sc-chart__bar" | "sc-chart__value" | "sc-chart__top" | "sc-chart__plot" | "sc-chart__wash" | "sc-chart__axis" | "sc-chart__line" | "sc-chart__dot" | "sc-chart__tip" | "sc-chart__ends" | "sc-chart__data" | "sc-note" | "sc-note--info" | "sc-note--success" | "sc-note--warning" | "sc-note--danger" | "sc-note__body" | "sc-button" | "sc-button--primary" | "sc-button--neutral" | "sc-button--danger" | "sc-button--ghost" | "sc-button--sm" | "sc-button--icon" | "sc-switch" | "sc-audio" | "sc-audio--compact" | "sc-audio__play" | "sc-audio__wave" | "sc-audio__time" | "sc-field" | "sc-field__label" | "sc-field__optional" | "sc-field__help" | "sc-field__error" | "sc-control" | "sc-control--trigger" | "sc-control__input" | "sc-control__unit" | "sc-control__steppers" | "sc-control__reveal" | "sc-control__tag" | "sc-check" | "sc-popover" | "sc-listbox" | "sc-listbox__item" | "sc-listbox__empty" | "sc-calendar" | "sc-picks" | "sc-segments" | "sc-pick" | "sc-chips" | "sc-chip" | "sc-slots" | "sc-moment" | "sc-range" | "sc-rating" | "sc-upload" | "sc-upload__zone" | "sc-upload__icon" | "sc-upload__text" | "sc-attachments" | "sc-attachment" | "sc-attachment--failed" | "sc-attachment__main" | "sc-attachment__text" | "sc-attachment__name" | "sc-attachment__meta" | "sc-attachment__action" | "sc-attachment__bar" | "sc-orb" | "sc-orb--idle" | "sc-orb--listening" | "sc-orb--thinking" | "sc-orb--speaking" | "sc-orb--still" | "sc-orb--loading" | "sc-orb__ring" | "sc-orb__core" | "sc-automation" | "sc-automation--gone" | "sc-automation__head" | "sc-automation__heading" | "sc-automation__title" | "sc-automation__when" | "sc-automation__end" | "sc-automation__dot" | "sc-automation__summary" | "sc-automation__section" | "sc-automation__label" | "sc-automation__steps" | "sc-automation__step" | "sc-automation__number" | "sc-automation__name" | "sc-automation__uses" | "sc-automation__use" | "sc-automation__board" | "sc-automation__more" | "sc-automation__runs" | "sc-automation__run--open" | "sc-automation__status" | "sc-automation__empty" | "sc-run" | "sc-run__head" | "sc-run__by" | "sc-run__end" | "sc-run__took" | "sc-run__heading" | "sc-run__title" | "sc-run__meta" | "sc-run__summary" | "sc-run__section" | "sc-run__label" | "sc-run__steps" | "sc-run__step" | "sc-run__number" | "sc-run__name" | "sc-run__calls" | "sc-run__call" | "sc-run__call--would" | "sc-run__call--failed" | "sc-run__count" | "sc-run__error" | "sc-run__live" | "sc-run__links" | "sc-run__empty";
+export type KitClassNames = Partial<Record<KitPart, string>> | undefined;
+/**
+ * Gives the primitives under it the host's classes, words and language; without it they are
+ * the package's, in English.
+ */
+export declare function KitProvider({ classNames, messages, locale, children }: {
+  classNames?: KitClassNames;
+  messages?: Partial<KitMessages> | undefined;
+  locale?: KitLocale | undefined;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=context.d.ts.map