@stealthscale/component-actions 0.2.1 → 0.2.3

package/dist/pages/button/button.js

@@ -0,0 +1,323 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { r as recipe } from "../../recipes-BhcK7PNL.js";
+import { b as Button, y as IconButton } from "../../shared-Dv6Wx5nA.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Matrix, scenesOf, specimen, useWords, valuesOf } from "@stealthscale/specimen";
+import { CheckIcon } from "lucide-react";
+//#region src/button/examples/approve.example.tsx
+var approve_example_exports = /* @__PURE__ */ __exportAll({
+	Approve: () => Approve,
+	source: () => source$6
+});
+function Approve(props) {
+	const $ = c(6);
+	const { t } = useWords("button");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("approve");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(CheckIcon, { size: "1em" });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== props || $[4] !== t0) {
+		t2 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t0,
+			...props,
+			children: t1
+		});
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\n\nexport function Approve(\n  props: Omit<Parameters<typeof IconButton>[0], \"aria-label\" | \"children\">,\n): ReactElement {\n  const { t } = useWords(\"button\");\n\n  return (\n    <IconButton aria-label={t(\"approve\")} {...props}>\n      <CheckIcon size=\"1em\" />\n    </IconButton>\n  );\n}\n";
+//#endregion
+//#region src/button/examples/archive.example.tsx
+var archive_example_exports = /* @__PURE__ */ __exportAll({
+	Archive: () => Archive,
+	source: () => source$5
+});
+function Archive(props) {
+	const $ = c(5);
+	const { t } = useWords("button");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("archive");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button } from \"@stealthscale/component-actions\";\n\nexport function Archive(props: Parameters<typeof Button>[0]): ReactElement {\n  const { t } = useWords(\"button\");\n\n  return <Button {...props}>{t(\"archive\")}</Button>;\n}\n";
+//#endregion
+//#region src/button/examples/bold.example.tsx
+var bold_example_exports = /* @__PURE__ */ __exportAll({
+	Bold: () => Bold,
+	source: () => source$4
+});
+function Bold(props) {
+	const $ = c(5);
+	const { t } = useWords("button");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("bold");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button } from \"@stealthscale/component-actions\";\n\nexport function Bold(props: Parameters<typeof Button>[0]): ReactElement {\n  const { t } = useWords(\"button\");\n\n  return <Button {...props}>{t(\"bold\")}</Button>;\n}\n";
+//#endregion
+//#region src/button/examples/celebrate.example.tsx
+var celebrate_example_exports = /* @__PURE__ */ __exportAll({
+	Celebrate: () => Celebrate,
+	source: () => source$3
+});
+function Celebrate(props) {
+	const $ = c(5);
+	const { t } = useWords("button");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("celebrate");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button } from \"@stealthscale/component-actions\";\n\nexport function Celebrate(props: Parameters<typeof Button>[0]): ReactElement {\n  const { t } = useWords(\"button\");\n\n  return <Button {...props}>{t(\"celebrate\")}</Button>;\n}\n";
+//#endregion
+//#region src/button/examples/publish.example.tsx
+var publish_example_exports = /* @__PURE__ */ __exportAll({
+	Publish: () => Publish,
+	source: () => source$2
+});
+function Publish(props) {
+	const $ = c(5);
+	const { t } = useWords("button");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("publish");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button } from \"@stealthscale/component-actions\";\n\nexport function Publish(props: Parameters<typeof Button>[0]): ReactElement {\n  const { t } = useWords(\"button\");\n\n  return <Button {...props}>{t(\"publish\")}</Button>;\n}\n";
+//#endregion
+//#region src/button/examples/retry.example.tsx
+var retry_example_exports = /* @__PURE__ */ __exportAll({
+	Retry: () => Retry,
+	source: () => source$1
+});
+function Retry(props) {
+	const $ = c(5);
+	const { t } = useWords("button");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("retry");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button } from \"@stealthscale/component-actions\";\n\nexport function Retry(props: Parameters<typeof Button>[0]): ReactElement {\n  const { t } = useWords(\"button\");\n\n  return <Button {...props}>{t(\"retry\")}</Button>;\n}\n";
+//#endregion
+//#region src/button/examples/upload.example.tsx
+var upload_example_exports = /* @__PURE__ */ __exportAll({
+	Upload: () => Upload,
+	source: () => source
+});
+function Upload(props) {
+	const $ = c(5);
+	const { t } = useWords("button");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("upload");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Button } from \"@stealthscale/component-actions\";\n\nexport function Upload(props: Parameters<typeof Button>[0]): ReactElement {\n  const { t } = useWords(\"button\");\n\n  return <Button {...props}>{t(\"upload\")}</Button>;\n}\n";
+//#endregion
+//#region src/button/button.specimen.tsx
+/**
+* Catalogue page for the button.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. The pressed and disabled scenes are
+*   hand-written, because `aria-pressed` and `disabled` are element attributes, not recipe axes.
+*   Every scene renders a component from `examples/` and shows that file as its source, and each
+*   scene labels its buttons with a different action. The words are keys under `button` in the
+*   `specimen` namespace, stored in `locales/en/specimen/button.json`.
+*/
+/**
+* Look values, crossed with every other axis.
+*/
+const LOOKS = valuesOf(recipe, "variant");
+/**
+* Both values of a boolean attribute, false first.
+*/
+const EITHER = [false, true];
+/**
+* Hand-written scene for `aria-pressed` on every look.
+*/
+const pressed = {
+	about: "button.pressed.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		across: {
+			knob: "variant",
+			of: LOOKS
+		},
+		knob: "aria-pressed",
+		of: EITHER,
+		children: (on, variant) => /* @__PURE__ */ jsx(Bold, {
+			"aria-pressed": on,
+			variant
+		})
+	}),
+	example: bold_example_exports,
+	props: {
+		"aria-pressed": true,
+		variant: "solid"
+	},
+	title: "button.pressed.title"
+};
+/**
+* Hand-written scene for `disabled` on every look.
+*/
+const disabled = {
+	about: "button.disabled.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		across: {
+			knob: "variant",
+			of: LOOKS
+		},
+		knob: "disabled",
+		of: EITHER,
+		children: (off, variant) => /* @__PURE__ */ jsx(Archive, {
+			disabled: off,
+			variant
+		})
+	}),
+	example: archive_example_exports,
+	props: {
+		disabled: true,
+		variant: "solid"
+	},
+	title: "button.disabled.title"
+};
+var button_specimen_default = specimen({
+	about: "button.about",
+	id: "components/actions/button",
+	imports: "import { Button, IconButton } from \"@stealthscale/component-actions\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				effect: {
+					across: "variant",
+					draw: (props) => /* @__PURE__ */ jsx(Celebrate, { ...props }),
+					example: celebrate_example_exports
+				},
+				elevation: {
+					across: "variant",
+					draw: (props) => /* @__PURE__ */ jsx(Upload, { ...props }),
+					example: upload_example_exports
+				},
+				palette: {
+					across: "variant",
+					draw: (props) => /* @__PURE__ */ jsx(Retry, { ...props }),
+					example: retry_example_exports
+				},
+				shape: {
+					across: "variant",
+					draw: (props) => /* @__PURE__ */ jsx(Approve, { ...props }),
+					example: approve_example_exports
+				},
+				variant: { across: "size" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Publish, { ...props }),
+			example: publish_example_exports,
+			namespace: "button",
+			order: [
+				"variant",
+				"palette",
+				"elevation",
+				"effect",
+				"shape"
+			]
+		}),
+		pressed,
+		disabled
+	],
+	title: "button.title"
+});
+//#endregion
+export { button_specimen_default as default, disabled, pressed };

package/dist/pages/button/button.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ButtonProps": {"conditions": 284, "foreign": 1051}, "IconButtonProps": {"conditions": 284, "foreign": 1049}};
+export const parts = {"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": ""}]};