@stealthscale/component-actions 0.2.1 → 0.2.3

package/dist/pages/swap/swap.js

@@ -0,0 +1,379 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { t as recipe } from "../../recipes-BhcK7PNL.js";
+import { b as Button, c as Root, l as Indicator, y as IconButton } from "../../shared-Dv6Wx5nA.js";
+import { useState } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "@stealthscale/component-layout";
+import { Matrix, Sample, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { MoonIcon, PauseIcon, PlayIcon, SunIcon, Volume2Icon, VolumeXIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+//#region src/swap/examples/follow.example.tsx
+var follow_example_exports = /* @__PURE__ */ __exportAll({
+	Follow: () => Follow,
+	source: () => source$3
+});
+function Follow() {
+	const $ = c(23);
+	const { t } = useWords("swap");
+	const [following, setFollowing] = useState(false);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("follow.person");
+		$[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 = () => {
+			setFollowing(_temp$2);
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = following ? "outline" : "solid";
+	let t4;
+	if ($[5] !== t) {
+		t4 = t("follow.unfollow");
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Indicator, {
+			type: "on",
+			children: t4
+		});
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t) {
+		t6 = t("follow.follow");
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Indicator, {
+			type: "off",
+			children: t6
+		});
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== following || $[14] !== t5 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			motion: "slide",
+			swap: following,
+			children: [t5, t7]
+		});
+		$[13] = following;
+		$[14] = t5;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t3 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Button, {
+			onClick: t2,
+			size: "sm",
+			variant: t3,
+			children: t8
+		});
+		$[17] = t3;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t1 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Group, {
+			align: "baseline",
+			gap: "md",
+			children: [t1, t9]
+		});
+		$[20] = t1;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	return t10;
+}
+function _temp$2(was) {
+	return !was;
+}
+const source$3 = "import { type ReactElement, useState } from \"react\";\n\nimport { Group } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button, Swap } from \"@stealthscale/component-actions\";\n\nexport function Follow(): ReactElement {\n  const { t } = useWords(\"swap\");\n  const [following, setFollowing] = useState(false);\n\n  return (\n    <Group align=\"baseline\" gap=\"md\">\n      <Text weight=\"semibold\">{t(\"follow.person\")}</Text>\n      <Button\n        onClick={() => {\n          setFollowing((was) => !was);\n        }}\n        size=\"sm\"\n        variant={following ? \"outline\" : \"solid\"}\n      >\n        <Swap.Root motion=\"slide\" swap={following}>\n          <Swap.Indicator type=\"on\">{t(\"follow.unfollow\")}</Swap.Indicator>\n          <Swap.Indicator type=\"off\">{t(\"follow.follow\")}</Swap.Indicator>\n        </Swap.Root>\n      </Button>\n    </Group>\n  );\n}\n";
+//#endregion
+//#region src/swap/examples/marks.example.tsx
+var marks_example_exports = /* @__PURE__ */ __exportAll({
+	Marks: () => Marks,
+	source: () => source$2
+});
+function Marks(props) {
+	const $ = c(4);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Indicator, {
+			type: "on",
+			children: /* @__PURE__ */ jsx(MoonIcon, {
+				"aria-hidden": true,
+				size: "1.5em"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Indicator, {
+			type: "off",
+			children: /* @__PURE__ */ jsx(SunIcon, {
+				"aria-hidden": true,
+				size: "1.5em"
+			})
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== props) {
+		t2 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [t0, t1]
+		});
+		$[2] = props;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\n\nimport { Swap } from \"@stealthscale/component-actions\";\n\nexport function Marks(props: Swap.RootProps): ReactElement {\n  return (\n    <Swap.Root {...props}>\n      <Swap.Indicator type=\"on\">\n        <MoonIcon aria-hidden size=\"1.5em\" />\n      </Swap.Indicator>\n      <Swap.Indicator type=\"off\">\n        <SunIcon aria-hidden size=\"1.5em\" />\n      </Swap.Indicator>\n    </Swap.Root>\n  );\n}\n";
+//#endregion
+//#region src/swap/examples/mute.example.tsx
+var mute_example_exports = /* @__PURE__ */ __exportAll({
+	Mute: () => Mute,
+	source: () => source$1
+});
+function Mute(props) {
+	const $ = c(12);
+	const { t } = useWords("swap");
+	const [muted, setMuted] = useState(false);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("mute.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			setMuted(_temp$1);
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Indicator, {
+			type: "on",
+			children: /* @__PURE__ */ jsx(VolumeXIcon, {
+				"aria-hidden": true,
+				size: "1em"
+			})
+		});
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Indicator, {
+			type: "off",
+			children: /* @__PURE__ */ jsx(Volume2Icon, {
+				"aria-hidden": true,
+				size: "1em"
+			})
+		});
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== muted || $[6] !== props) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			swap: muted,
+			children: [t2, t3]
+		});
+		$[5] = muted;
+		$[6] = props;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== muted || $[9] !== t0 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t0,
+			"aria-pressed": muted,
+			onClick: t1,
+			variant: "outline",
+			children: t4
+		});
+		$[8] = muted;
+		$[9] = t0;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function _temp$1(was) {
+	return !was;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { Volume2Icon, VolumeXIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { IconButton, Swap } from \"@stealthscale/component-actions\";\n\nexport function Mute(props: Swap.RootProps): ReactElement {\n  const { t } = useWords(\"swap\");\n  const [muted, setMuted] = useState(false);\n\n  return (\n    <IconButton\n      aria-label={t(\"mute.label\")}\n      aria-pressed={muted}\n      onClick={() => {\n        setMuted((was) => !was);\n      }}\n      variant=\"outline\"\n    >\n      <Swap.Root {...props} swap={muted}>\n        <Swap.Indicator type=\"on\">\n          <VolumeXIcon aria-hidden size=\"1em\" />\n        </Swap.Indicator>\n        <Swap.Indicator type=\"off\">\n          <Volume2Icon aria-hidden size=\"1em\" />\n        </Swap.Indicator>\n      </Swap.Root>\n    </IconButton>\n  );\n}\n";
+//#endregion
+//#region src/swap/examples/playback.example.tsx
+var playback_example_exports = /* @__PURE__ */ __exportAll({
+	Playback: () => Playback,
+	source: () => source
+});
+function Playback() {
+	const $ = c(11);
+	const { t } = useWords("swap");
+	const [playing, setPlaying] = useState(false);
+	let t0;
+	if ($[0] !== playing || $[1] !== t) {
+		t0 = playing ? t("playback.pause") : t("playback.play");
+		$[0] = playing;
+		$[1] = t;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			setPlaying(_temp);
+		};
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Indicator, {
+			type: "on",
+			children: /* @__PURE__ */ jsx(PauseIcon, {
+				"aria-hidden": true,
+				size: "1em"
+			})
+		});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Indicator, {
+			type: "off",
+			children: /* @__PURE__ */ jsx(PlayIcon, {
+				"aria-hidden": true,
+				size: "1em"
+			})
+		});
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== playing) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			swap: playing,
+			children: [t2, t3]
+		});
+		$[6] = playing;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t0 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t0,
+			onClick: t1,
+			children: t4
+		});
+		$[8] = t0;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+}
+function _temp(was) {
+	return !was;
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { PauseIcon, PlayIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { IconButton, Swap } from \"@stealthscale/component-actions\";\n\nexport function Playback(): ReactElement {\n  const { t } = useWords(\"swap\");\n  const [playing, setPlaying] = useState(false);\n\n  return (\n    <IconButton\n      aria-label={playing ? t(\"playback.pause\") : t(\"playback.play\")}\n      onClick={() => {\n        setPlaying((was) => !was);\n      }}\n    >\n      <Swap.Root swap={playing}>\n        <Swap.Indicator type=\"on\">\n          <PauseIcon aria-hidden size=\"1em\" />\n        </Swap.Indicator>\n        <Swap.Indicator type=\"off\">\n          <PlayIcon aria-hidden size=\"1em\" />\n        </Swap.Indicator>\n      </Swap.Root>\n    </IconButton>\n  );\n}\n";
+//#endregion
+//#region src/swap/swap.specimen.tsx
+/**
+* Catalogue page for the swap.
+*
+* @remarks
+*   `scenesOf` generates the motion scene from the mute example, whose button turns the mark over.
+*   The other scenes are hand-written: the states matrix shows both marks at rest, and the mute,
+*   playback and follow scenes each show one example. The mute and playback buttons render in a
+*   `Sample`, because a lone control in a scene card stretches to the card's width. The words are
+*   keys under `swap` in `locales/en/specimen/swap.json`.
+*/
+/**
+* Values of `swap` the states scene shows.
+*/
+const SWAPS = [false, true];
+/**
+* Hand-written scene for both marks at rest.
+*/
+const states = {
+	about: "swap.states.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "swap",
+		of: SWAPS,
+		children: (swap) => /* @__PURE__ */ jsx(Marks, { swap })
+	}),
+	example: marks_example_exports,
+	props: { swap: false },
+	title: "swap.states.title"
+};
+/**
+* Hand-written scene for a toggle button that keeps one name.
+*/
+const toggle = {
+	about: "swap.mute.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Mute, {}) }),
+	example: mute_example_exports,
+	title: "swap.mute.title"
+};
+/**
+* Hand-written scene for a button whose name follows the mark.
+*/
+const named = {
+	about: "swap.playback.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Playback, {}) }),
+	example: playback_example_exports,
+	title: "swap.playback.title"
+};
+/**
+* Hand-written scene for two words in one place.
+*/
+const words = {
+	about: "swap.follow.about",
+	draw: Follow,
+	example: follow_example_exports,
+	title: "swap.follow.title"
+};
+var swap_specimen_default = specimen({
+	about: "swap.about",
+	id: "components/actions/swap",
+	imports: "import { Swap } from \"@stealthscale/component-actions\";",
+	scenes: [
+		states,
+		toggle,
+		named,
+		words,
+		...scenesOf(recipe, {
+			draw: (props) => /* @__PURE__ */ jsx(Mute, { ...props }),
+			example: mute_example_exports,
+			namespace: "swap"
+		})
+	],
+	title: "swap.title"
+});
+//#endregion
+export { swap_specimen_default as default, named, states, toggle, words };

package/dist/pages/swap/swap.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"IndicatorProps": {"conditions": 284, "foreign": 1040}, "RootProps": {"conditions": 284, "foreign": 1041}, "ButtonProps": {"conditions": 284, "foreign": 1051}, "IconButtonProps": {"conditions": 284, "foreign": 1049}};
+export const parts = {"IndicatorProps": [{"accepts": "\"off\" | \"on\"", "fallback": "", "kind": "option", "name": "type", "refers": [], "required": true, "says": "Which mark this is: `on` shows while the root's `swap` is true, `off` while it is false."}], "RootProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "lazyMount", "refers": [], "required": false, "says": "Whether a mark renders nothing until it first shows. False unless the caller passes true."}, {"accepts": "\"fade\" | \"none\" | \"scale\" | \"slide\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Motion the marks replace each other with."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "swap", "refers": [], "required": false, "says": "Whether the `on` mark shows. False unless the caller passes true, which shows the `off` mark."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "unmountOnExit", "refers": [], "required": false, "says": "Whether a mark renders nothing once its exit motion ends. False unless the caller passes true."}], "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 = {"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": ""}]};