@stealthscale/component-actions 0.2.1 → 0.2.3

package/dist/pages/clipboard/clipboard.js

@@ -0,0 +1,400 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { _ as Control, b as Button, d as ValueText, f as Trigger, g as Indicator, h as Input$1, m as Label, p as Root, v as Consumer, x as PropsProvider, y as IconButton } from "../../shared-Dv6Wx5nA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@stealthscale/component-layout";
+import { Matrix, Room, specimen, useWords } from "@stealthscale/specimen";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Input, InputPropsProvider } from "@stealthscale/component-forms";
+//#region src/clipboard/examples/alone.example.tsx
+var alone_example_exports = /* @__PURE__ */ __exportAll({
+	Alone: () => Alone,
+	source: () => source$4
+});
+function Alone(props) {
+	const $ = c(20);
+	const { t } = useWords("clipboard");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			size: "sm",
+			variant: "outline"
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("copied");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("copy");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Indicator, {
+			copied: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" }),
+			children: /* @__PURE__ */ jsx(CopyIcon, { size: "1em" })
+		});
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("copied");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("copy");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Indicator, {
+			copied: t4,
+			children: t5
+		});
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t1 || $[14] !== t2 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(PropsProvider, {
+			value: t0,
+			children: /* @__PURE__ */ jsxs(Trigger, {
+				as: Button,
+				copiedLabel: t1,
+				label: t2,
+				children: [t3, t6]
+			})
+		});
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== props || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Root, {
+			value: "https://stealthscale.io/payouts/4109",
+			...props,
+			children: t7
+		});
+		$[17] = props;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button, ButtonPropsProvider, Clipboard } from \"@stealthscale/component-actions\";\n\nexport function Alone(props: Clipboard.RootProps): ReactElement {\n  const { t } = useWords(\"clipboard\");\n\n  return (\n    <Clipboard.Root value=\"https://stealthscale.io/payouts/4109\" {...props}>\n      <ButtonPropsProvider value={{ size: \"sm\", variant: \"outline\" }}>\n        <Clipboard.Trigger as={Button} copiedLabel={t(\"copied\")} label={t(\"copy\")}>\n          <Clipboard.Indicator copied={<CheckIcon size=\"1em\" />}>\n            <CopyIcon size=\"1em\" />\n          </Clipboard.Indicator>\n          <Clipboard.Indicator copied={t(\"copied\")}>{t(\"copy\")}</Clipboard.Indicator>\n        </Clipboard.Trigger>\n      </ButtonPropsProvider>\n    </Clipboard.Root>\n  );\n}\n";
+//#endregion
+//#region src/clipboard/examples/beside.example.tsx
+var beside_example_exports = /* @__PURE__ */ __exportAll({
+	Beside: () => Beside,
+	source: () => source$3
+});
+function Beside() {
+	const $ = c(9);
+	const { t } = useWords("clipboard");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(InputPropsProvider, {
+			value: { size: "sm" },
+			children: /* @__PURE__ */ jsx(Input$1, { as: Input })
+		});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			size: "sm",
+			variant: "ghost"
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(Control, { children: [t2, /* @__PURE__ */ jsx(PropsProvider, {
+			value: t3,
+			children: /* @__PURE__ */ jsx(Trigger, {
+				as: IconButton,
+				children: /* @__PURE__ */ jsx(Indicator, {
+					copied: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" }),
+					children: /* @__PURE__ */ jsx(CopyIcon, { size: "1em" })
+				})
+			})
+		})] });
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t1) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			value: "https://stealthscale.io/payouts/4109",
+			children: [t1, t4]
+		});
+		$[7] = t1;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\nimport { Input, InputPropsProvider } from \"@stealthscale/component-forms\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ButtonPropsProvider, Clipboard, IconButton } from \"@stealthscale/component-actions\";\n\nexport function Beside(): ReactElement {\n  const { t } = useWords(\"clipboard\");\n\n  return (\n    <Clipboard.Root value=\"https://stealthscale.io/payouts/4109\">\n      <Clipboard.Label>{t(\"label\")}</Clipboard.Label>\n      <Clipboard.Control>\n        <InputPropsProvider value={{ size: \"sm\" }}>\n          <Clipboard.Input as={Input} />\n        </InputPropsProvider>\n        <ButtonPropsProvider value={{ size: \"sm\", variant: \"ghost\" }}>\n          <Clipboard.Trigger as={IconButton}>\n            <Clipboard.Indicator copied={<CheckIcon size=\"1em\" />}>\n              <CopyIcon size=\"1em\" />\n            </Clipboard.Indicator>\n          </Clipboard.Trigger>\n        </ButtonPropsProvider>\n      </Clipboard.Control>\n    </Clipboard.Root>\n  );\n}\n";
+//#endregion
+//#region src/clipboard/examples/own.example.tsx
+var own_example_exports = /* @__PURE__ */ __exportAll({
+	Own: () => Own,
+	source: () => source$2
+});
+function Own() {
+	const $ = c(2);
+	const { t } = useWords("clipboard");
+	let t0;
+	if ($[0] !== t) {
+		t0 = /* @__PURE__ */ jsx(Root, {
+			value: "https://stealthscale.io/payouts/4109",
+			children: /* @__PURE__ */ jsx(Consumer, { children: (api) => /* @__PURE__ */ jsx(Button, {
+				onClick: api.copy,
+				palette: api.copied ? "success" : "neutral",
+				size: "sm",
+				children: api.copied ? t("copied") : t("copy")
+			}) })
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button, Clipboard } from \"@stealthscale/component-actions\";\n\nexport function Own(): ReactElement {\n  const { t } = useWords(\"clipboard\");\n\n  return (\n    <Clipboard.Root value=\"https://stealthscale.io/payouts/4109\">\n      <Clipboard.Consumer>\n        {(api) => (\n          <Button onClick={api.copy} palette={api.copied ? \"success\" : \"neutral\"} size=\"sm\">\n            {api.copied ? t(\"copied\") : t(\"copy\")}\n          </Button>\n        )}\n      </Clipboard.Consumer>\n    </Clipboard.Root>\n  );\n}\n";
+//#endregion
+//#region src/clipboard/examples/sizes.example.tsx
+var sizes_example_exports = /* @__PURE__ */ __exportAll({
+	Sizes: () => Sizes,
+	source: () => source$1
+});
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+function Sizes() {
+	const $ = c(4);
+	const { t } = useWords("clipboard");
+	let t0;
+	if ($[0] !== t) {
+		t0 = SIZES.map((size) => /* @__PURE__ */ jsxs(Root, {
+			size,
+			value: "https://stealthscale.io/payouts/4109",
+			children: [/* @__PURE__ */ jsx(Label, { children: t("label") }), /* @__PURE__ */ jsxs(Control, { children: [/* @__PURE__ */ jsx(InputPropsProvider, {
+				value: { size },
+				children: /* @__PURE__ */ jsx(Input$1, { as: Input })
+			}), /* @__PURE__ */ jsx(PropsProvider, {
+				value: {
+					size,
+					variant: "outline"
+				},
+				children: /* @__PURE__ */ jsx(Trigger, {
+					as: IconButton,
+					children: /* @__PURE__ */ jsx(Indicator, {
+						copied: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" }),
+						children: /* @__PURE__ */ jsx(CopyIcon, { size: "1em" })
+					})
+				})
+			})] })]
+		}, size));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			gap: "lg",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\nimport { Input, InputPropsProvider } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ButtonPropsProvider, Clipboard, IconButton } from \"@stealthscale/component-actions\";\n\nconst SIZES = [\"sm\", \"md\", \"lg\"] as const;\n\nexport function Sizes(): ReactElement {\n  const { t } = useWords(\"clipboard\");\n\n  return (\n    <Stack direction=\"column\" gap=\"lg\">\n      {SIZES.map((size) => (\n        <Clipboard.Root key={size} size={size} value=\"https://stealthscale.io/payouts/4109\">\n          <Clipboard.Label>{t(\"label\")}</Clipboard.Label>\n          <Clipboard.Control>\n            <InputPropsProvider value={{ size }}>\n              <Clipboard.Input as={Input} />\n            </InputPropsProvider>\n            <ButtonPropsProvider value={{ size, variant: \"outline\" }}>\n              <Clipboard.Trigger as={IconButton}>\n                <Clipboard.Indicator copied={<CheckIcon size=\"1em\" />}>\n                  <CopyIcon size=\"1em\" />\n                </Clipboard.Indicator>\n              </Clipboard.Trigger>\n            </ButtonPropsProvider>\n          </Clipboard.Control>\n        </Clipboard.Root>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/clipboard/examples/value.example.tsx
+var value_example_exports = /* @__PURE__ */ __exportAll({
+	Value: () => Value,
+	source: () => source
+});
+const LINK = "https://stealthscale.io/payouts/4109";
+function Value() {
+	const $ = c(10);
+	const { t } = useWords("clipboard");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			size: "sm",
+			variant: "ghost"
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("copiedValue", { value: LINK });
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("copyValue", { value: LINK });
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ValueText, {});
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Indicator, {
+			copied: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" }),
+			children: /* @__PURE__ */ jsx(CopyIcon, { size: "1em" })
+		});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t1 || $[8] !== t2) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			value: LINK,
+			children: /* @__PURE__ */ jsx(PropsProvider, {
+				value: t0,
+				children: /* @__PURE__ */ jsxs(Trigger, {
+					as: Button,
+					copiedLabel: t1,
+					label: t2,
+					children: [t3, t4]
+				})
+			})
+		});
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button, ButtonPropsProvider, Clipboard } from \"@stealthscale/component-actions\";\n\nconst LINK = \"https://stealthscale.io/payouts/4109\";\n\nexport function Value(): ReactElement {\n  const { t } = useWords(\"clipboard\");\n\n  return (\n    <Clipboard.Root value={LINK}>\n      <ButtonPropsProvider value={{ size: \"sm\", variant: \"ghost\" }}>\n        <Clipboard.Trigger\n          as={Button}\n          copiedLabel={t(\"copiedValue\", { value: LINK })}\n          label={t(\"copyValue\", { value: LINK })}\n        >\n          <Clipboard.ValueText />\n          <Clipboard.Indicator copied={<CheckIcon size=\"1em\" />}>\n            <CopyIcon size=\"1em\" />\n          </Clipboard.Indicator>\n        </Clipboard.Trigger>\n      </ButtonPropsProvider>\n    </Clipboard.Root>\n  );\n}\n";
+//#endregion
+//#region src/clipboard/clipboard.specimen.tsx
+/**
+* Catalogue page for the clipboard.
+*
+* @remarks
+*   Every scene is hand-written and renders a component from `examples/`. The size scene renders
+*   the three sizes itself, because the field and the button take the size through their own
+*   providers. The duration scene renders the `alone` example with each `timeout`. The trigger has
+*   no styles of its own, so every example renders it as `Button` or `IconButton` through `as`. The
+*   words are keys under `clipboard` in the `specimen` namespace, stored in
+*   `locales/en/specimen/clipboard.json`.
+*/
+/**
+* Copied-state durations the duration scene compares, in milliseconds.
+*/
+const TIMEOUTS = [250, 3e3];
+/**
+* Hand-written scene for a copy button with visible text.
+*/
+const lone = {
+	about: "clipboard.alone.about",
+	draw: () => /* @__PURE__ */ jsx(Alone, {}),
+	example: alone_example_exports,
+	title: "clipboard.alone.title"
+};
+/**
+* Hand-written scene for an icon button next to a read-only field.
+*/
+const besides = {
+	about: "clipboard.beside.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Beside, {})
+	}),
+	example: beside_example_exports,
+	title: "clipboard.beside.title"
+};
+/**
+* Hand-written scene for the value as the trigger text.
+*/
+const value = {
+	about: "clipboard.value.about",
+	draw: Value,
+	example: value_example_exports,
+	title: "clipboard.value.title"
+};
+/**
+* Hand-written scene for a control built with `Clipboard.Consumer`.
+*/
+const custom = {
+	about: "clipboard.own.about",
+	draw: Own,
+	example: own_example_exports,
+	title: "clipboard.own.title"
+};
+/**
+* Hand-written scene for the `size` axis.
+*/
+const size = {
+	about: "clipboard.size.about",
+	axes: ["size"],
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Sizes, {})
+	}),
+	example: sizes_example_exports,
+	title: "clipboard.size.title"
+};
+/**
+* Hand-written scene for two copied-state durations.
+*/
+const held = {
+	about: "clipboard.held.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "timeout",
+		of: TIMEOUTS,
+		children: (timeout) => /* @__PURE__ */ jsx(Alone, { timeout })
+	}),
+	example: alone_example_exports,
+	props: { timeout: 250 },
+	title: "clipboard.held.title"
+};
+var clipboard_specimen_default = specimen({
+	about: "clipboard.about",
+	id: "components/actions/clipboard",
+	imports: "import { Button, ButtonPropsProvider, Clipboard, IconButton } from \"@stealthscale/component-actions\";",
+	scenes: [
+		lone,
+		besides,
+		value,
+		custom,
+		size,
+		held
+	],
+	title: "clipboard.title"
+});
+//#endregion
+export { besides, custom, clipboard_specimen_default as default, held, lone, size, value };

package/dist/pages/clipboard/clipboard.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ConsumerProps": {"conditions": 0, "foreign": 0}, "ControlProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "InputProps": {"conditions": 284, "foreign": 1069}, "LabelProps": {"conditions": 284, "foreign": 1043}, "RootProps": {"conditions": 284, "foreign": 1038}, "TriggerProps": {"conditions": 284, "foreign": 1051}, "ValueTextProps": {"conditions": 284, "foreign": 1041}, "ButtonProps": {"conditions": 284, "foreign": 1051}, "IconButtonProps": {"conditions": 284, "foreign": 1049}};
+export const parts = {"ConsumerProps": [{"accepts": "(api: ClipboardApi<PropTypes>) => ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["clipboard.ClipboardApi", "types.PropTypes"], "required": true, "says": "Render function called with the machine's API."}], "ControlProps": [], "IndicatorProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "copied", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Mark rendered during the copied state."}], "InputProps": [], "LabelProps": [], "RootProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "The initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["clipboard.ElementIds"], "required": false, "says": "The ids of the elements in the clipboard. Useful for composition."}, {"accepts": "((details: CopyStatusDetails) => void)", "fallback": "", "kind": "option", "name": "onStatusChange", "refers": ["clipboard.CopyStatusDetails"], "required": false, "says": "The function to be called when the value is copied to the clipboard"}, {"accepts": "((details: ValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": ["clipboard.ValueChangeDetails"], "required": false, "says": "The function to be called when the value changes"}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "The label text style and the two gaps."}, {"accepts": "number", "fallback": "3000", "kind": "option", "name": "timeout", "refers": [], "required": false, "says": "The timeout for the copy operation"}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "The controlled value of the clipboard"}], "TriggerProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "copiedLabel", "refers": [], "required": false, "says": "Accessible name in the copied state. Defaults to \"Copied to clipboard\"."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name in the idle state. Defaults to \"Copy to clipboard\"."}], "ValueTextProps": [], "ButtonProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "IconButtonProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "aria-label", "refers": [], "required": false, "says": "Defines a string value that labels the current element. The accessible name a screen reader announces in place of the icon."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "aria-labelledby", "refers": [], "required": false, "says": "Identifies the element (or elements) that labels the current element. The id of the element whose text names the control."}, {"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}]};
+export const shapes = {"types.PropTypes": [{"accepts": "Dict<any>", "name": "button", "says": ""}, {"accepts": "Dict<any>", "name": "circle", "says": ""}, {"accepts": "Dict<any>", "name": "element", "says": ""}, {"accepts": "Dict<any>", "name": "img", "says": ""}, {"accepts": "Dict<any>", "name": "input", "says": ""}, {"accepts": "Dict<any>", "name": "label", "says": ""}, {"accepts": "Dict<any>", "name": "output", "says": ""}, {"accepts": "Dict<any>", "name": "path", "says": ""}, {"accepts": "Dict<any>", "name": "rect", "says": ""}, {"accepts": "Dict<any>", "name": "select", "says": ""}, {"accepts": "Dict<any>", "name": "style", "says": ""}, {"accepts": "Dict<any>", "name": "svg", "says": ""}, {"accepts": "Dict<any>", "name": "textarea", "says": ""}], "clipboard.ClipboardApi": [{"accepts": "boolean", "name": "copied", "says": "Whether the value has been copied to the clipboard"}, {"accepts": "string", "name": "value", "says": "The value to be copied to the clipboard"}, {"accepts": "(value: string) => void", "name": "setValue", "says": "Set the value to be copied to the clipboard"}, {"accepts": "VoidFunction", "name": "copy", "says": "Copy the value to the clipboard"}, {"accepts": "() => Dict<any>", "name": "getRootProps", "says": ""}, {"accepts": "() => Dict<any>", "name": "getLabelProps", "says": ""}, {"accepts": "() => Dict<any>", "name": "getControlProps", "says": ""}, {"accepts": "() => Dict<any>", "name": "getTriggerProps", "says": ""}, {"accepts": "() => Dict<any>", "name": "getInputProps", "says": ""}, {"accepts": "(props: IndicatorProps) => Dict<any>", "name": "getIndicatorProps", "says": ""}], "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": ""}], "clipboard.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "string", "name": "input", "says": ""}, {"accepts": "string", "name": "label", "says": ""}], "clipboard.ValueChangeDetails": [{"accepts": "string", "name": "value", "says": ""}], "clipboard.CopyStatusDetails": [{"accepts": "boolean", "name": "copied", "says": ""}], "kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}]};

package/dist/pages/color-mode-toggle/color-mode-toggle.js

@@ -0,0 +1,176 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { o as ColorModeToggle } from "../../shared-Dv6Wx5nA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "@stealthscale/component-layout";
+import { Matrix, specimen, useWords } from "@stealthscale/specimen";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+//#region src/color-mode-toggle/examples/header.example.tsx
+var header_example_exports = /* @__PURE__ */ __exportAll({
+	Header: () => Header,
+	source: () => source$1
+});
+function Header() {
+	const $ = c(13);
+	const { t } = useWords("color-mode-toggle");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("header.product");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Text, {
+			weight: "semibold",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(MoonIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("label");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(SunIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(ColorModeToggle, {
+			dark: t2,
+			label: t3,
+			light: t4
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t1 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Group, {
+			align: "baseline",
+			justify: "between",
+			children: [t1, t5]
+		});
+		$[10] = t1;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\n\nimport { Group } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ColorModeToggle } from \"@stealthscale/component-actions\";\n\nexport function Header(): ReactElement {\n  const { t } = useWords(\"color-mode-toggle\");\n\n  return (\n    <Group align=\"baseline\" justify=\"between\">\n      <Text weight=\"semibold\">{t(\"header.product\")}</Text>\n      <ColorModeToggle\n        dark={<MoonIcon aria-hidden size=\"1em\" />}\n        label={t(\"label\")}\n        light={<SunIcon aria-hidden size=\"1em\" />}\n      />\n    </Group>\n  );\n}\n";
+//#endregion
+//#region src/color-mode-toggle/examples/looks.example.tsx
+var looks_example_exports = /* @__PURE__ */ __exportAll({
+	Looks: () => Looks,
+	source: () => source
+});
+function Looks(props) {
+	const $ = c(7);
+	const { t } = useWords("color-mode-toggle");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(MoonIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("label");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(SunIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		});
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== props || $[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(ColorModeToggle, {
+			dark: t0,
+			label: t1,
+			light: t2,
+			...props
+		});
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ColorModeToggle, ColorModeToggleProps } from \"@stealthscale/component-actions\";\n\nexport function Looks(props: Partial<ColorModeToggleProps>): ReactElement {\n  const { t } = useWords(\"color-mode-toggle\");\n\n  return (\n    <ColorModeToggle\n      dark={<MoonIcon aria-hidden size=\"1em\" />}\n      label={t(\"label\")}\n      light={<SunIcon aria-hidden size=\"1em\" />}\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/color-mode-toggle/color-mode-toggle.specimen.tsx
+/**
+* Catalogue page for the color mode toggle.
+*
+* @remarks
+*   The toggle has no recipe of its own: it renders the button and the swap, so every scene is
+*   hand-written. Each toggle switches the catalogue's own color mode, because the catalogue
+*   renders inside a color mode provider. The header scene shows the toggle at the end of an
+*   application's header, and the looks scene turns the button's `variant`. The words are keys
+*   under `color-mode-toggle` in `locales/en/specimen/color-mode-toggle.json`.
+*/
+/**
+* Looks of the looks scene: the button's looks for a control in a bar, in reading order.
+*/
+const LOOKS = [
+	"ghost",
+	"outline",
+	"subtle",
+	"surface"
+];
+/**
+* Hand-written scene for the toggle at the end of a header.
+*/
+const headed = {
+	about: "color-mode-toggle.header.about",
+	draw: Header,
+	example: header_example_exports,
+	title: "color-mode-toggle.header.title"
+};
+/**
+* Hand-written scene for the looks a toggle takes from the button.
+*/
+const looked = {
+	about: "color-mode-toggle.looks.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "variant",
+		of: LOOKS,
+		children: (variant) => /* @__PURE__ */ jsx(Looks, { variant })
+	}),
+	example: looks_example_exports,
+	props: { variant: "ghost" },
+	title: "color-mode-toggle.looks.title"
+};
+var color_mode_toggle_specimen_default = specimen({
+	about: "color-mode-toggle.about",
+	id: "components/actions/color-mode-toggle",
+	imports: "import { ColorModeToggle } from \"@stealthscale/component-actions\";",
+	scenes: [headed, looked],
+	title: "color-mode-toggle.title"
+});
+//#endregion
+export { color_mode_toggle_specimen_default as default, headed, looked };

package/dist/pages/color-mode-toggle/color-mode-toggle.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ColorModeToggleProps": {"conditions": 284, "foreign": 1047}};
+export const parts = {"ColorModeToggleProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "dark", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Glyph shown while the page is dark."}, {"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Name of the button in both states, \"Dark mode\" unless the caller passes another."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "light", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Glyph shown while the page is light."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}]};
+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.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}]};