@stealthscale/component-disclosure 0.2.2 → 0.2.4

package/dist/pages/steps/steps.js

@@ -0,0 +1,660 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as recipe } from "../../recipes-95yCB2V3.js";
+import { A as PrevTrigger, D as Status, E as Title, F as Description, I as Content, L as CompletedContent, M as List, N as Item, O as Separator, P as Indicator, T as Trigger, j as NextTrigger, k as Root } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { BanknoteIcon, CheckIcon, CircleAlertIcon, PenLineIcon, WalletIcon } from "lucide-react";
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+import { Checkbox, Field } from "@stealthscale/component-forms";
+//#region src/steps/examples/gated.example.tsx
+var gated_example_exports = /* @__PURE__ */ __exportAll({
+	Gated: () => Gated,
+	source: () => source$4
+});
+const STEPS$3 = [
+	"account",
+	"amount",
+	"confirm"
+];
+function Gated() {
+	const $ = c(58);
+	const { t } = useWords("steps");
+	const [agreed, setAgreed] = useState(false);
+	const [refused, setRefused] = useState(false);
+	let t0;
+	if ($[0] !== agreed) {
+		t0 = (index) => index !== 1 || agreed;
+		$[0] = agreed;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			setRefused(true);
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = STEPS$3.map((step, index_0) => /* @__PURE__ */ jsxs(Item, {
+			index: index_0,
+			children: [/* @__PURE__ */ jsxs(Trigger, { children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Status, { complete: /* @__PURE__ */ jsx(CheckIcon, {}) }) }), /* @__PURE__ */ jsx(Title, { children: t(`payout.${step}.title`) })] }), /* @__PURE__ */ jsx(Separator, {})]
+		}, step));
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(List, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("payout.account.body");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Content, {
+			index: 0,
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const t6 = refused && !agreed;
+	let t7;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (t8) => {
+			const { checked } = t8;
+			setAgreed(checked === true);
+		};
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 }) }) });
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== t) {
+		t9 = t("gated.agree");
+		$[13] = t;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Checkbox.Label, { children: t9 });
+		$[15] = t9;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== agreed || $[18] !== t10) {
+		t11 = /* @__PURE__ */ jsxs(Checkbox.Root, {
+			checked: agreed,
+			onCheckedChange: t7,
+			children: [t8, t10]
+		});
+		$[17] = agreed;
+		$[18] = t10;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(CircleAlertIcon, {});
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== t) {
+		t13 = t("gated.check");
+		$[21] = t;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Field.ErrorText, { children: [t12, t13] });
+		$[23] = t13;
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== t11 || $[26] !== t14 || $[27] !== t6) {
+		t15 = /* @__PURE__ */ jsx(Content, {
+			index: 1,
+			children: /* @__PURE__ */ jsxs(Field.Root, {
+				invalid: t6,
+				children: [t11, t14]
+			})
+		});
+		$[25] = t11;
+		$[26] = t14;
+		$[27] = t6;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t) {
+		t16 = t("payout.confirm.body");
+		$[29] = t;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Content, {
+			index: 2,
+			children: t16
+		});
+		$[31] = t16;
+		$[32] = t17;
+	} else t17 = $[32];
+	let t18;
+	if ($[33] !== t) {
+		t18 = t("payout.queued");
+		$[33] = t;
+		$[34] = t18;
+	} else t18 = $[34];
+	let t19;
+	if ($[35] !== t18) {
+		t19 = /* @__PURE__ */ jsx(CompletedContent, { children: t18 });
+		$[35] = t18;
+		$[36] = t19;
+	} else t19 = $[36];
+	let t20;
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = {
+			size: "sm",
+			variant: "outline"
+		};
+		$[37] = t20;
+	} else t20 = $[37];
+	let t21;
+	if ($[38] !== t) {
+		t21 = t("back");
+		$[38] = t;
+		$[39] = t21;
+	} else t21 = $[39];
+	let t22;
+	if ($[40] !== t21) {
+		t22 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t20,
+			children: /* @__PURE__ */ jsx(PrevTrigger, {
+				as: Button,
+				children: t21
+			})
+		});
+		$[40] = t21;
+		$[41] = t22;
+	} else t22 = $[41];
+	let t23;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = { size: "sm" };
+		$[42] = t23;
+	} else t23 = $[42];
+	let t24;
+	if ($[43] !== t) {
+		t24 = t("next");
+		$[43] = t;
+		$[44] = t24;
+	} else t24 = $[44];
+	let t25;
+	if ($[45] !== t24) {
+		t25 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t23,
+			children: /* @__PURE__ */ jsx(NextTrigger, {
+				as: Button,
+				children: t24
+			})
+		});
+		$[45] = t24;
+		$[46] = t25;
+	} else t25 = $[46];
+	let t26;
+	if ($[47] !== t22 || $[48] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "sm",
+			children: [t22, t25]
+		});
+		$[47] = t22;
+		$[48] = t25;
+		$[49] = t26;
+	} else t26 = $[49];
+	let t27;
+	if ($[50] !== t0 || $[51] !== t15 || $[52] !== t17 || $[53] !== t19 || $[54] !== t26 || $[55] !== t3 || $[56] !== t5) {
+		t27 = /* @__PURE__ */ jsxs(Root, {
+			count: STEPS$3.length,
+			isStepValid: t0,
+			linear: true,
+			onStepInvalid: t1,
+			children: [
+				t3,
+				t5,
+				t15,
+				t17,
+				t19,
+				t26
+			]
+		});
+		$[50] = t0;
+		$[51] = t15;
+		$[52] = t17;
+		$[53] = t19;
+		$[54] = t26;
+		$[55] = t3;
+		$[56] = t5;
+		$[57] = t27;
+	} else t27 = $[57];
+	return t27;
+}
+const source$4 = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon, CircleAlertIcon } from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Checkbox, Field } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Steps } from \"@stealthscale/component-disclosure\";\n\nconst STEPS = [\"account\", \"amount\", \"confirm\"] as const;\n\nexport function Gated(): ReactElement {\n  const { t } = useWords(\"steps\");\n  const [agreed, setAgreed] = useState(false);\n  const [refused, setRefused] = useState(false);\n\n  return (\n    <Steps.Root\n      count={STEPS.length}\n      isStepValid={(index) => index !== 1 || agreed}\n      linear\n      onStepInvalid={() => {\n        setRefused(true);\n      }}\n    >\n      <Steps.List>\n        {STEPS.map((step, index) => (\n          <Steps.Item index={index} key={step}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<CheckIcon />} />\n              </Steps.Indicator>\n              <Steps.Title>{t(`payout.${step}.title`)}</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n        ))}\n      </Steps.List>\n      <Steps.Content index={0}>{t(\"payout.account.body\")}</Steps.Content>\n      <Steps.Content index={1}>\n        <Field.Root invalid={refused && !agreed}>\n          <Checkbox.Root\n            checked={agreed}\n            onCheckedChange={({ checked }) => {\n              setAgreed(checked === true);\n            }}\n          >\n            <Checkbox.Control>\n              <Checkbox.Indicator>\n                <CheckIcon strokeWidth={3} />\n              </Checkbox.Indicator>\n            </Checkbox.Control>\n            <Checkbox.Label>{t(\"gated.agree\")}</Checkbox.Label>\n          </Checkbox.Root>\n          <Field.ErrorText>\n            <CircleAlertIcon />\n            {t(\"gated.check\")}\n          </Field.ErrorText>\n        </Field.Root>\n      </Steps.Content>\n      <Steps.Content index={2}>{t(\"payout.confirm.body\")}</Steps.Content>\n      <Steps.CompletedContent>{t(\"payout.queued\")}</Steps.CompletedContent>\n      <Stack direction=\"row\" gap=\"sm\">\n        <ButtonPropsProvider value={{ size: \"sm\", variant: \"outline\" }}>\n          <Steps.PrevTrigger as={Button}>{t(\"back\")}</Steps.PrevTrigger>\n        </ButtonPropsProvider>\n        <ButtonPropsProvider value={{ size: \"sm\" }}>\n          <Steps.NextTrigger as={Button}>{t(\"next\")}</Steps.NextTrigger>\n        </ButtonPropsProvider>\n      </Stack>\n    </Steps.Root>\n  );\n}\n";
+//#endregion
+//#region src/steps/examples/marks.example.tsx
+var marks_example_exports = /* @__PURE__ */ __exportAll({
+	Marks: () => Marks,
+	source: () => source$3
+});
+const STEPS$2 = [
+	{
+		Icon: WalletIcon,
+		step: "account"
+	},
+	{
+		Icon: BanknoteIcon,
+		step: "amount"
+	},
+	{
+		Icon: PenLineIcon,
+		step: "confirm"
+	}
+];
+function Marks() {
+	const $ = c(9);
+	const { t } = useWords("steps");
+	let t0;
+	if ($[0] !== t) {
+		t0 = STEPS$2.map((t1, index) => {
+			const { Icon, step } = t1;
+			return /* @__PURE__ */ jsxs(Item, {
+				index,
+				children: [/* @__PURE__ */ jsxs(Trigger, { children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Status, {
+					complete: /* @__PURE__ */ jsx(CheckIcon, {}),
+					current: /* @__PURE__ */ jsx(Icon, {}),
+					incomplete: /* @__PURE__ */ jsx(Icon, {})
+				}) }), /* @__PURE__ */ jsx(Title, { children: t(`payout.${step}.title`) })] }), /* @__PURE__ */ jsx(Separator, {})]
+			}, step);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(List, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = STEPS$2.map((t3, index_0) => {
+			const { step: step_0 } = t3;
+			return /* @__PURE__ */ jsx(Content, {
+				index: index_0,
+				children: t(`payout.${step_0}.body`)
+			}, step_0);
+		});
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Root, {
+			count: STEPS$2.length,
+			defaultStep: 1,
+			children: [t1, t2]
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { BanknoteIcon, CheckIcon, PenLineIcon, WalletIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Steps } from \"@stealthscale/component-disclosure\";\n\nconst STEPS = [\n  { Icon: WalletIcon, step: \"account\" },\n  { Icon: BanknoteIcon, step: \"amount\" },\n  { Icon: PenLineIcon, step: \"confirm\" },\n] as const;\n\nexport function Marks(): ReactElement {\n  const { t } = useWords(\"steps\");\n\n  return (\n    <Steps.Root count={STEPS.length} defaultStep={1}>\n      <Steps.List>\n        {STEPS.map(({ Icon, step }, index) => (\n          <Steps.Item index={index} key={step}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<CheckIcon />} current={<Icon />} incomplete={<Icon />} />\n              </Steps.Indicator>\n              <Steps.Title>{t(`payout.${step}.title`)}</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n        ))}\n      </Steps.List>\n      {STEPS.map(({ step }, index) => (\n        <Steps.Content index={index} key={step}>\n          {t(`payout.${step}.body`)}\n        </Steps.Content>\n      ))}\n    </Steps.Root>\n  );\n}\n";
+//#endregion
+//#region src/steps/examples/parcel.example.tsx
+var parcel_example_exports = /* @__PURE__ */ __exportAll({
+	Parcel: () => Parcel,
+	source: () => source$2
+});
+const STAGES = [
+	"ordered",
+	"packed",
+	"shipped",
+	"delivered"
+];
+function Parcel() {
+	const $ = c(4);
+	const { t } = useWords("steps");
+	let t0;
+	if ($[0] !== t) {
+		t0 = STAGES.map((stage, index) => /* @__PURE__ */ jsxs(Item, {
+			index,
+			children: [
+				/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Status, { complete: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+				/* @__PURE__ */ jsx(Title, { children: t(`parcel.${stage}.title`) }),
+				/* @__PURE__ */ jsx(Description, { children: t(`parcel.${stage}.date`) }),
+				/* @__PURE__ */ jsx(Separator, {})
+			]
+		}, stage));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Root, {
+			count: STAGES.length,
+			labelPlacement: "below",
+			size: "sm",
+			step: 2,
+			children: /* @__PURE__ */ jsx(List, { children: t0 })
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Steps } from \"@stealthscale/component-disclosure\";\n\nconst STAGES = [\"ordered\", \"packed\", \"shipped\", \"delivered\"] as const;\n\nexport function Parcel(): ReactElement {\n  const { t } = useWords(\"steps\");\n\n  return (\n    <Steps.Root count={STAGES.length} labelPlacement=\"below\" size=\"sm\" step={2}>\n      <Steps.List>\n        {STAGES.map((stage, index) => (\n          <Steps.Item index={index} key={stage}>\n            <Steps.Indicator>\n              <Steps.Status complete={<CheckIcon />} />\n            </Steps.Indicator>\n            <Steps.Title>{t(`parcel.${stage}.title`)}</Steps.Title>\n            <Steps.Description>{t(`parcel.${stage}.date`)}</Steps.Description>\n            <Steps.Separator />\n          </Steps.Item>\n        ))}\n      </Steps.List>\n    </Steps.Root>\n  );\n}\n";
+//#endregion
+//#region src/steps/examples/payout.example.tsx
+var payout_example_exports = /* @__PURE__ */ __exportAll({
+	Payout: () => Payout,
+	source: () => source$1
+});
+const STEPS$1 = [
+	"account",
+	"amount",
+	"confirm"
+];
+function Payout(props) {
+	const $ = c(29);
+	const { t } = useWords("steps");
+	let t0;
+	if ($[0] !== t) {
+		t0 = STEPS$1.map((step, index) => /* @__PURE__ */ jsxs(Item, {
+			index,
+			children: [/* @__PURE__ */ jsxs(Trigger, { children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Status, { complete: /* @__PURE__ */ jsx(CheckIcon, {}) }) }), /* @__PURE__ */ jsx(Title, { children: t(`payout.${step}.title`) })] }), /* @__PURE__ */ jsx(Separator, {})]
+		}, step));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(List, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = STEPS$1.map((step_0, index_0) => /* @__PURE__ */ jsx(Content, {
+			index: index_0,
+			children: t(`payout.${step_0}.body`)
+		}, step_0));
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("payout.queued");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(CompletedContent, { children: t3 });
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			size: "sm",
+			variant: "outline"
+		};
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("back");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t5,
+			children: /* @__PURE__ */ jsx(PrevTrigger, {
+				as: Button,
+				children: t6
+			})
+		});
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { size: "sm" };
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("next");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t8,
+			children: /* @__PURE__ */ jsx(NextTrigger, {
+				as: Button,
+				children: t9
+			})
+		});
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10 || $[21] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "sm",
+			children: [t7, t10]
+		});
+		$[20] = t10;
+		$[21] = t7;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== props || $[24] !== t1 || $[25] !== t11 || $[26] !== t2 || $[27] !== t4) {
+		t12 = /* @__PURE__ */ jsxs(Root, {
+			count: STEPS$1.length,
+			defaultStep: 1,
+			...props,
+			children: [
+				t1,
+				t2,
+				t4,
+				t11
+			]
+		});
+		$[23] = props;
+		$[24] = t1;
+		$[25] = t11;
+		$[26] = t2;
+		$[27] = t4;
+		$[28] = t12;
+	} else t12 = $[28];
+	return t12;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Steps } from \"@stealthscale/component-disclosure\";\n\nconst STEPS = [\"account\", \"amount\", \"confirm\"] as const;\n\nexport function Payout(props: Steps.RootProps): ReactElement {\n  const { t } = useWords(\"steps\");\n\n  return (\n    <Steps.Root count={STEPS.length} defaultStep={1} {...props}>\n      <Steps.List>\n        {STEPS.map((step, index) => (\n          <Steps.Item index={index} key={step}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<CheckIcon />} />\n              </Steps.Indicator>\n              <Steps.Title>{t(`payout.${step}.title`)}</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n        ))}\n      </Steps.List>\n      {STEPS.map((step, index) => (\n        <Steps.Content index={index} key={step}>\n          {t(`payout.${step}.body`)}\n        </Steps.Content>\n      ))}\n      <Steps.CompletedContent>{t(\"payout.queued\")}</Steps.CompletedContent>\n      <Stack direction=\"row\" gap=\"sm\">\n        <ButtonPropsProvider value={{ size: \"sm\", variant: \"outline\" }}>\n          <Steps.PrevTrigger as={Button}>{t(\"back\")}</Steps.PrevTrigger>\n        </ButtonPropsProvider>\n        <ButtonPropsProvider value={{ size: \"sm\" }}>\n          <Steps.NextTrigger as={Button}>{t(\"next\")}</Steps.NextTrigger>\n        </ButtonPropsProvider>\n      </Stack>\n    </Steps.Root>\n  );\n}\n";
+//#endregion
+//#region src/steps/examples/setup.example.tsx
+var setup_example_exports = /* @__PURE__ */ __exportAll({
+	Setup: () => Setup,
+	source: () => source
+});
+const STEPS = [
+	"profile",
+	"team",
+	"billing"
+];
+function Setup() {
+	const $ = c(9);
+	const { t } = useWords("steps");
+	let t0;
+	if ($[0] !== t) {
+		t0 = STEPS.map((step, index) => /* @__PURE__ */ jsxs(Item, {
+			index,
+			children: [/* @__PURE__ */ jsxs(Trigger, { children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Status, { complete: /* @__PURE__ */ jsx(CheckIcon, {}) }) }), /* @__PURE__ */ jsxs(Stack, {
+				as: "span",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Title, { children: t(`setup.${step}.title`) }), /* @__PURE__ */ jsx(Description, { children: t(`setup.${step}.description`) })]
+			})] }), /* @__PURE__ */ jsx(Separator, {})]
+		}, step));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(List, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = STEPS.map((step_0, index_0) => /* @__PURE__ */ jsx(Content, {
+			index: index_0,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				align: "flex-start",
+				gap: "md",
+				children: [t(`setup.${step_0}.body`), /* @__PURE__ */ jsx(ButtonPropsProvider, {
+					value: { size: "sm" },
+					children: /* @__PURE__ */ jsx(NextTrigger, {
+						as: Button,
+						children: t("next")
+					})
+				})]
+			})
+		}, step_0));
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Root, {
+			count: STEPS.length,
+			defaultStep: 1,
+			orientation: "vertical",
+			children: [t1, t2]
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Steps } from \"@stealthscale/component-disclosure\";\n\nconst STEPS = [\"profile\", \"team\", \"billing\"] as const;\n\nexport function Setup(): ReactElement {\n  const { t } = useWords(\"steps\");\n\n  return (\n    <Steps.Root count={STEPS.length} defaultStep={1} orientation=\"vertical\">\n      <Steps.List>\n        {STEPS.map((step, index) => (\n          <Steps.Item index={index} key={step}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<CheckIcon />} />\n              </Steps.Indicator>\n              <Stack as=\"span\" gap=\"xs\">\n                <Steps.Title>{t(`setup.${step}.title`)}</Steps.Title>\n                <Steps.Description>{t(`setup.${step}.description`)}</Steps.Description>\n              </Stack>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n        ))}\n      </Steps.List>\n      {STEPS.map((step, index) => (\n        <Steps.Content index={index} key={step}>\n          <Stack align=\"flex-start\" gap=\"md\">\n            {t(`setup.${step}.body`)}\n            <ButtonPropsProvider value={{ size: \"sm\" }}>\n              <Steps.NextTrigger as={Button}>{t(\"next\")}</Steps.NextTrigger>\n            </ButtonPropsProvider>\n          </Stack>\n        </Steps.Content>\n      ))}\n    </Steps.Root>\n  );\n}\n";
+//#endregion
+//#region src/steps/steps.specimen.tsx
+/**
+* Catalogue page for the steps.
+*
+* @remarks
+*   `scenesOf` generates the looks, palettes, sizes and title placements from the payout example,
+*   which starts on the second step, so every scene shows a completed, a current and a later step.
+*   The hand-written scenes show a vertical flow with descriptions, marks that turn into a check, a
+*   gated linear flow and a parcel's progress without triggers. Every flow renders in a room at its
+*   real width. The words are keys under `steps` in `locales/en/specimen/steps.json`.
+*/
+/**
+* Hand-written scene for a vertical flow with a line under each title.
+*/
+const setup = {
+	about: "steps.setup.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Setup, {})
+	}),
+	example: setup_example_exports,
+	title: "steps.setup.title"
+};
+/**
+* Hand-written scene for discs that show an icon until their step is done.
+*/
+const marks = {
+	about: "steps.marks.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Marks, {})
+	}),
+	example: marks_example_exports,
+	title: "steps.marks.title"
+};
+/**
+* Hand-written scene for a linear flow that refuses to leave a step until it is filled in.
+*/
+const gated = {
+	about: "steps.gated.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Gated, {})
+	}),
+	example: gated_example_exports,
+	title: "steps.gated.title"
+};
+/**
+* Hand-written scene for steps that show progress without triggers or content.
+*/
+const parcel = {
+	about: "steps.parcel.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Parcel, {})
+	}),
+	example: parcel_example_exports,
+	title: "steps.parcel.title"
+};
+var steps_specimen_default = specimen({
+	about: "steps.about",
+	id: "components/disclosure/steps",
+	imports: "import { Steps } from \"@stealthscale/component-disclosure\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				labelPlacement: { direction: "column" },
+				size: { direction: "column" },
+				variant: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "md",
+				children: /* @__PURE__ */ jsx(Payout, { ...props })
+			}),
+			example: payout_example_exports,
+			namespace: "steps",
+			order: [
+				"variant",
+				"palette",
+				"size",
+				"labelPlacement"
+			]
+		}),
+		setup,
+		marks,
+		gated,
+		parcel
+	],
+	title: "steps.title"
+});
+//#endregion
+export { steps_specimen_default as default, gated, marks, parcel, setup };

package/dist/pages/steps/steps.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"CompletedContentProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1041}, "DescriptionProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "ItemProps": {"conditions": 284, "foreign": 1042}, "ListProps": {"conditions": 284, "foreign": 1042}, "NextTriggerProps": {"conditions": 284, "foreign": 1051}, "PrevTriggerProps": {"conditions": 284, "foreign": 1051}, "RootProps": {"conditions": 284, "foreign": 1039}, "SeparatorProps": {"conditions": 284, "foreign": 1041}, "StatusProps": {"conditions": 0, "foreign": 0}, "TitleProps": {"conditions": 284, "foreign": 1041}, "TriggerProps": {"conditions": 284, "foreign": 1051}};
+export const parts = {"CompletedContentProps": [], "ContentProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "index", "refers": [], "required": true, "says": "Index of the step the content belongs to, from zero."}], "DescriptionProps": [], "IndicatorProps": [], "ItemProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "index", "refers": [], "required": true, "says": "Index of the step, from zero."}], "ListProps": [], "NextTriggerProps": [], "PrevTriggerProps": [], "RootProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "count", "refers": [], "required": false, "says": "The total number of steps"}, {"accepts": "number", "fallback": "", "kind": "option", "name": "defaultStep", "refers": [], "required": false, "says": "The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"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": ["steps.ElementIds"], "required": false, "says": "The custom ids for the stepper elements"}, {"accepts": "((index: number) => boolean)", "fallback": "() => false", "kind": "option", "name": "isStepSkippable", "refers": [], "required": false, "says": "Whether a step can be skipped during navigation. Skippable steps are bypassed when using next/prev."}, {"accepts": "((index: number) => boolean)", "fallback": "() => true", "kind": "option", "name": "isStepValid", "refers": [], "required": false, "says": "Whether a step is valid. Invalid steps block forward navigation in linear mode."}, {"accepts": "\"below\" | \"beside\"", "fallback": "", "kind": "variant", "name": "labelPlacement", "refers": [], "required": false, "says": "Place of the titles in a horizontal flow: beside each disc, or centred below it."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "linear", "refers": [], "required": false, "says": "If `true`, the stepper requires the user to complete the steps in order"}, {"accepts": "((details: StepChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onStepChange", "refers": ["steps.StepChangeDetails"], "required": false, "says": "Callback to be called when the value changes"}, {"accepts": "VoidFunction", "fallback": "", "kind": "option", "name": "onStepComplete", "refers": [], "required": false, "says": "Callback to be called when a step is completed"}, {"accepts": "((details: StepInvalidDetails) => void)", "fallback": "", "kind": "option", "name": "onStepInvalid", "refers": ["steps.StepInvalidDetails"], "required": false, "says": "Called when navigation is blocked due to an invalid step."}, {"accepts": "\"horizontal\" | \"vertical\"", "fallback": "\"horizontal\"", "kind": "option", "name": "orientation", "refers": [], "required": false, "says": "The orientation of the stepper"}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette the discs and the completed rules read, set on the root."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Size of the discs on the control scale, the titles, the descriptions and the room around them."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "step", "refers": [], "required": false, "says": "The controlled value of the stepper"}, {"accepts": "\"solid\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the discs and of the rules between completed steps."}], "SeparatorProps": [], "StatusProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "complete", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Node a completed step shows, such as a check."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "current", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Node the current step shows."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "incomplete", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Node a later step shows."}], "TitleProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "completedLabel", "refers": [], "required": false, "says": "Hidden words before the name of a completed step, \"Completed: \" unless the caller passes others."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "currentLabel", "refers": [], "required": false, "says": "Hidden words before the name of the current step, \"Current: \" unless the caller passes others."}], "TriggerProps": []};
+export const shapes = {"steps.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "string", "name": "list", "says": ""}, {"accepts": "((index: number) => string)", "name": "triggerId", "says": ""}, {"accepts": "((index: number) => string)", "name": "contentId", "says": ""}], "steps.StepChangeDetails": [{"accepts": "number", "name": "step", "says": ""}], "steps.StepInvalidDetails": [{"accepts": "number", "name": "step", "says": ""}, {"accepts": "\"next\" | \"set\"", "name": "action", "says": ""}, {"accepts": "number", "name": "targetStep", "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": ""}]};