@stealthscale/component-disclosure 0.2.3 → 0.2.4

package/dist/pages/accordion/accordion.js

@@ -0,0 +1,512 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { m as recipe } from "../../recipes-95yCB2V3.js";
+import { Bt as Item, Gt as ItemBody, Ht as ItemIndicator, Ut as ItemHeading, Vt as ItemTrigger, Wt as ItemContent, zt as Root } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { flushSync } from "react-dom";
+import { CheckIcon, ChevronDownIcon, DownloadIcon, FileTextIcon, ScaleIcon, ShieldIcon } from "lucide-react";
+import { Button, IconButton } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+import { Text } from "@stealthscale/component-typography";
+import { Checkbox } from "@stealthscale/component-forms";
+import { Avatar } from "@stealthscale/component-media";
+//#region src/accordion/examples/checkout.example.tsx
+var checkout_example_exports = /* @__PURE__ */ __exportAll({
+	Checkout: () => Checkout,
+	source: () => source$5
+});
+const STEPS = [
+	"shipping",
+	"payment",
+	"review"
+];
+function Checkout() {
+	const $ = c(10);
+	const { t } = useWords("accordion");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["shipping"];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [open, setOpen] = useState(t0);
+	const [reached, setReached] = useState(0);
+	const [placed, setPlaced] = useState(false);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {};
+		$[1] = t1;
+	} else t1 = $[1];
+	const triggers = useRef(t1);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (details) => {
+			setOpen(details.value);
+		};
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== placed || $[4] !== reached || $[5] !== t) {
+		t3 = STEPS.map((step, at) => /* @__PURE__ */ jsxs(Item, {
+			disabled: at > reached,
+			value: step,
+			children: [/* @__PURE__ */ jsx(ItemHeading, { children: /* @__PURE__ */ jsxs(ItemTrigger, {
+				ref: (node) => {
+					triggers.current[step] = node;
+				},
+				children: [t(`checkout.${step}.title`), /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) })]
+			}) }), /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemBody, { children: /* @__PURE__ */ jsxs(Stack, {
+				align: "flex-start",
+				gap: "md",
+				children: [
+					/* @__PURE__ */ jsx(Text, { children: t(`checkout.${step}.summary`) }),
+					/* @__PURE__ */ jsx(Button, {
+						onClick: () => {
+							const next = STEPS[at + 1];
+							if (next === void 0) {
+								setPlaced(true);
+								return;
+							}
+							flushSync(() => {
+								setReached(Math.max(reached, at + 1));
+								setOpen([next]);
+							});
+							triggers.current[next]?.focus();
+						},
+						size: "sm",
+						children: t(`checkout.${step}.next`)
+					}),
+					step === "review" ? /* @__PURE__ */ jsx(Text, {
+						as: "output",
+						children: placed ? t("checkout.placed") : null
+					}) : null
+				]
+			}) }) })]
+		}, step));
+		$[3] = placed;
+		$[4] = reached;
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== open || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Root, {
+			onValueChange: t2,
+			value: open,
+			variant: "outline",
+			children: t3
+		});
+		$[7] = open;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+const source$5 = "import { type ReactElement, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Accordion } from \"@stealthscale/component-disclosure\";\n\nconst STEPS = [\"shipping\", \"payment\", \"review\"] as const;\n\nexport function Checkout(): ReactElement {\n  const { t } = useWords(\"accordion\");\n  const [open, setOpen] = useState<string[]>([\"shipping\"]);\n  const [reached, setReached] = useState(0);\n  const [placed, setPlaced] = useState(false);\n  const triggers = useRef<Partial<Record<string, HTMLButtonElement | null>>>({});\n\n  return (\n    <Accordion.Root\n      onValueChange={(details) => {\n        setOpen(details.value);\n      }}\n      value={open}\n      variant=\"outline\"\n    >\n      {STEPS.map((step, at) => (\n        <Accordion.Item disabled={at > reached} key={step} value={step}>\n          <Accordion.ItemHeading>\n            <Accordion.ItemTrigger\n              ref={(node) => {\n                triggers.current[step] = node;\n              }}\n            >\n              {t(`checkout.${step}.title`)}\n              <Accordion.ItemIndicator>\n                <ChevronDownIcon size=\"100%\" />\n              </Accordion.ItemIndicator>\n            </Accordion.ItemTrigger>\n          </Accordion.ItemHeading>\n          <Accordion.ItemContent>\n            <Accordion.ItemBody>\n              <Stack align=\"flex-start\" gap=\"md\">\n                <Text>{t(`checkout.${step}.summary`)}</Text>\n                <Button\n                  onClick={() => {\n                    const next = STEPS[at + 1];\n\n                    if (next === undefined) {\n                      setPlaced(true);\n                      return;\n                    }\n                    flushSync(() => {\n                      setReached(Math.max(reached, at + 1));\n                      setOpen([next]);\n                    });\n                    triggers.current[next]?.focus();\n                  }}\n                  size=\"sm\"\n                >\n                  {t(`checkout.${step}.next`)}\n                </Button>\n                {step === \"review\" ? (\n                  <Text as=\"output\">{placed ? t(\"checkout.placed\") : null}</Text>\n                ) : null}\n              </Stack>\n            </Accordion.ItemBody>\n          </Accordion.ItemContent>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n}\n";
+//#endregion
+//#region src/accordion/examples/clauses.example.tsx
+var clauses_example_exports = /* @__PURE__ */ __exportAll({
+	Clauses: () => Clauses,
+	source: () => source$4
+});
+const CLAUSES = [
+	{
+		Icon: FileTextIcon,
+		value: "scope"
+	},
+	{
+		Icon: ScaleIcon,
+		value: "payment"
+	},
+	{
+		Icon: ShieldIcon,
+		value: "liability"
+	}
+];
+function Clauses() {
+	const $ = c(5);
+	const { t } = useWords("accordion");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["payment"];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = CLAUSES.map((t2) => {
+			const { Icon, value } = t2;
+			return /* @__PURE__ */ jsxs(Item, {
+				value,
+				children: [/* @__PURE__ */ jsx(ItemHeading, { children: /* @__PURE__ */ jsxs(ItemTrigger, { children: [
+					/* @__PURE__ */ jsx(Icon, {}),
+					t(`clauses.${value}.title`),
+					/* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) })
+				] }) }), /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemBody, { children: t(`clauses.${value}.body`) }) })]
+			}, value);
+		});
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			collapsible: true,
+			defaultValue: t0,
+			variant: "outline",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon, FileTextIcon, ScaleIcon, ShieldIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Accordion } from \"@stealthscale/component-disclosure\";\n\nconst CLAUSES = [\n  { Icon: FileTextIcon, value: \"scope\" },\n  { Icon: ScaleIcon, value: \"payment\" },\n  { Icon: ShieldIcon, value: \"liability\" },\n] as const;\n\nexport function Clauses(): ReactElement {\n  const { t } = useWords(\"accordion\");\n\n  return (\n    <Accordion.Root collapsible defaultValue={[\"payment\"]} variant=\"outline\">\n      {CLAUSES.map(({ Icon, value }) => (\n        <Accordion.Item key={value} value={value}>\n          <Accordion.ItemHeading>\n            <Accordion.ItemTrigger>\n              <Icon />\n              {t(`clauses.${value}.title`)}\n              <Accordion.ItemIndicator>\n                <ChevronDownIcon size=\"100%\" />\n              </Accordion.ItemIndicator>\n            </Accordion.ItemTrigger>\n          </Accordion.ItemHeading>\n          <Accordion.ItemContent>\n            <Accordion.ItemBody>{t(`clauses.${value}.body`)}</Accordion.ItemBody>\n          </Accordion.ItemContent>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n}\n";
+//#endregion
+//#region src/accordion/examples/documents.example.tsx
+var documents_example_exports = /* @__PURE__ */ __exportAll({
+	Documents: () => Documents,
+	source: () => source$3
+});
+const DOCUMENTS = [
+	"contract",
+	"invoice",
+	"nda"
+];
+function Documents() {
+	const $ = c(5);
+	const { t } = useWords("accordion");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["contract"];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = DOCUMENTS.map((document) => /* @__PURE__ */ jsxs(Item, {
+			value: document,
+			children: [/* @__PURE__ */ jsxs(ItemHeading, { children: [/* @__PURE__ */ jsxs(ItemTrigger, { children: [t(`documents.${document}.title`), /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) })] }), /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": t("documents.download", { file: t(`documents.${document}.title`) }),
+				size: "sm",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(DownloadIcon, {})
+			})] }), /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemBody, { children: t(`documents.${document}.body`) }) })]
+		}, document));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			collapsible: true,
+			defaultValue: t0,
+			variant: "surface",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon, DownloadIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Accordion } from \"@stealthscale/component-disclosure\";\n\nconst DOCUMENTS = [\"contract\", \"invoice\", \"nda\"] as const;\n\nexport function Documents(): ReactElement {\n  const { t } = useWords(\"accordion\");\n\n  return (\n    <Accordion.Root collapsible defaultValue={[\"contract\"]} variant=\"surface\">\n      {DOCUMENTS.map((document) => (\n        <Accordion.Item key={document} value={document}>\n          <Accordion.ItemHeading>\n            <Accordion.ItemTrigger>\n              {t(`documents.${document}.title`)}\n              <Accordion.ItemIndicator>\n                <ChevronDownIcon size=\"100%\" />\n              </Accordion.ItemIndicator>\n            </Accordion.ItemTrigger>\n            <IconButton\n              aria-label={t(\"documents.download\", { file: t(`documents.${document}.title`) })}\n              size=\"sm\"\n              variant=\"ghost\"\n            >\n              <DownloadIcon />\n            </IconButton>\n          </Accordion.ItemHeading>\n          <Accordion.ItemContent>\n            <Accordion.ItemBody>{t(`documents.${document}.body`)}</Accordion.ItemBody>\n          </Accordion.ItemContent>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n}\n";
+//#endregion
+//#region src/accordion/examples/faq.example.tsx
+var faq_example_exports = /* @__PURE__ */ __exportAll({
+	Faq: () => Faq,
+	source: () => source$2
+});
+const QUESTIONS = [
+	"delivery",
+	"returns",
+	"abroad"
+];
+function Faq(props) {
+	const $ = c(6);
+	const { t } = useWords("accordion");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["delivery"];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = QUESTIONS.map((question) => /* @__PURE__ */ jsxs(Item, {
+			value: question,
+			children: [/* @__PURE__ */ jsx(ItemHeading, { children: /* @__PURE__ */ jsxs(ItemTrigger, { children: [t(`faq.${question}.question`), /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) })] }) }), /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemBody, { children: t(`faq.${question}.answer`) }) })]
+		}, question));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== props || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			collapsible: true,
+			defaultValue: t0,
+			...props,
+			children: t1
+		});
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Accordion } from \"@stealthscale/component-disclosure\";\n\nconst QUESTIONS = [\"delivery\", \"returns\", \"abroad\"] as const;\n\nexport function Faq(props: Accordion.RootProps): ReactElement {\n  const { t } = useWords(\"accordion\");\n\n  return (\n    <Accordion.Root collapsible defaultValue={[\"delivery\"]} {...props}>\n      {QUESTIONS.map((question) => (\n        <Accordion.Item key={question} value={question}>\n          <Accordion.ItemHeading>\n            <Accordion.ItemTrigger>\n              {t(`faq.${question}.question`)}\n              <Accordion.ItemIndicator>\n                <ChevronDownIcon size=\"100%\" />\n              </Accordion.ItemIndicator>\n            </Accordion.ItemTrigger>\n          </Accordion.ItemHeading>\n          <Accordion.ItemContent>\n            <Accordion.ItemBody>{t(`faq.${question}.answer`)}</Accordion.ItemBody>\n          </Accordion.ItemContent>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n}\n";
+//#endregion
+//#region src/accordion/examples/filters.example.tsx
+var filters_example_exports = /* @__PURE__ */ __exportAll({
+	Filters: () => Filters,
+	source: () => source$1
+});
+const GROUPS = [
+	{
+		options: [
+			"coats",
+			"knitwear",
+			"shoes"
+		],
+		value: "category"
+	},
+	{
+		options: [
+			"under50",
+			"under100",
+			"over100"
+		],
+		value: "price"
+	},
+	{
+		options: [
+			"black",
+			"navy",
+			"sand"
+		],
+		value: "colour"
+	}
+];
+function Filters() {
+	const $ = c(5);
+	const { t } = useWords("accordion");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["category", "price"];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = GROUPS.map((group) => /* @__PURE__ */ jsxs(Item, {
+			value: group.value,
+			children: [/* @__PURE__ */ jsx(ItemHeading, { children: /* @__PURE__ */ jsxs(ItemTrigger, { children: [t(`filters.${group.value}`), /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) })] }) }), /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemBody, { children: /* @__PURE__ */ jsx(Stack, {
+				gap: "sm",
+				children: group.options.map((option) => /* @__PURE__ */ jsxs(Checkbox.Root, {
+					size: "sm",
+					value: option,
+					children: [/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 }) }) }), /* @__PURE__ */ jsx(Checkbox.Label, { children: t(`filters.${option}`) })]
+				}, option))
+			}) }) })]
+		}, group.value));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			defaultValue: t0,
+			multiple: true,
+			size: "sm",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\";\n\nimport { Checkbox } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Accordion } from \"@stealthscale/component-disclosure\";\n\nconst GROUPS = [\n  { options: [\"coats\", \"knitwear\", \"shoes\"], value: \"category\" },\n  { options: [\"under50\", \"under100\", \"over100\"], value: \"price\" },\n  { options: [\"black\", \"navy\", \"sand\"], value: \"colour\" },\n] as const;\n\nexport function Filters(): ReactElement {\n  const { t } = useWords(\"accordion\");\n\n  return (\n    <Accordion.Root defaultValue={[\"category\", \"price\"]} multiple size=\"sm\">\n      {GROUPS.map((group) => (\n        <Accordion.Item key={group.value} value={group.value}>\n          <Accordion.ItemHeading>\n            <Accordion.ItemTrigger>\n              {t(`filters.${group.value}`)}\n              <Accordion.ItemIndicator>\n                <ChevronDownIcon size=\"100%\" />\n              </Accordion.ItemIndicator>\n            </Accordion.ItemTrigger>\n          </Accordion.ItemHeading>\n          <Accordion.ItemContent>\n            <Accordion.ItemBody>\n              <Stack gap=\"sm\">\n                {group.options.map((option) => (\n                  <Checkbox.Root key={option} size=\"sm\" value={option}>\n                    <Checkbox.Control>\n                      <Checkbox.Indicator>\n                        <CheckIcon strokeWidth={3} />\n                      </Checkbox.Indicator>\n                    </Checkbox.Control>\n                    <Checkbox.Label>{t(`filters.${option}`)}</Checkbox.Label>\n                  </Checkbox.Root>\n                ))}\n              </Stack>\n            </Accordion.ItemBody>\n          </Accordion.ItemContent>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n}\n";
+//#endregion
+//#region src/accordion/examples/reviewers.example.tsx
+var reviewers_example_exports = /* @__PURE__ */ __exportAll({
+	Reviewers: () => Reviewers,
+	source: () => source
+});
+const REVIEWERS = [
+	"ada",
+	"tomas",
+	"iris"
+];
+function Reviewers() {
+	const $ = c(5);
+	const { t } = useWords("accordion");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["tomas"];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = REVIEWERS.map((reviewer) => /* @__PURE__ */ jsxs(Item, {
+			value: reviewer,
+			children: [/* @__PURE__ */ jsx(ItemHeading, { children: /* @__PURE__ */ jsxs(ItemTrigger, { children: [
+				/* @__PURE__ */ jsx(Avatar.Root, {
+					"aria-hidden": true,
+					name: t(`reviewers.${reviewer}.name`),
+					size: "xs",
+					variant: "surface",
+					children: /* @__PURE__ */ jsx(Avatar.Fallback, {})
+				}),
+				/* @__PURE__ */ jsxs(Stack, {
+					as: "span",
+					gap: "xs",
+					children: [t(`reviewers.${reviewer}.name`), /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: "sm",
+						tone: "muted",
+						weight: "normal",
+						children: t(`reviewers.${reviewer}.role`)
+					})]
+				}),
+				/* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) })
+			] }) }), /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemBody, { children: t(`reviewers.${reviewer}.note`) }) })]
+		}, reviewer));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			collapsible: true,
+			defaultValue: t0,
+			variant: "subtle",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Accordion } from \"@stealthscale/component-disclosure\";\n\nconst REVIEWERS = [\"ada\", \"tomas\", \"iris\"] as const;\n\nexport function Reviewers(): ReactElement {\n  const { t } = useWords(\"accordion\");\n\n  return (\n    <Accordion.Root collapsible defaultValue={[\"tomas\"]} variant=\"subtle\">\n      {REVIEWERS.map((reviewer) => (\n        <Accordion.Item key={reviewer} value={reviewer}>\n          <Accordion.ItemHeading>\n            <Accordion.ItemTrigger>\n              <Avatar.Root\n                aria-hidden\n                name={t(`reviewers.${reviewer}.name`)}\n                size=\"xs\"\n                variant=\"surface\"\n              >\n                <Avatar.Fallback />\n              </Avatar.Root>\n              <Stack as=\"span\" gap=\"xs\">\n                {t(`reviewers.${reviewer}.name`)}\n                <Text as=\"span\" size=\"sm\" tone=\"muted\" weight=\"normal\">\n                  {t(`reviewers.${reviewer}.role`)}\n                </Text>\n              </Stack>\n              <Accordion.ItemIndicator>\n                <ChevronDownIcon size=\"100%\" />\n              </Accordion.ItemIndicator>\n            </Accordion.ItemTrigger>\n          </Accordion.ItemHeading>\n          <Accordion.ItemContent>\n            <Accordion.ItemBody>{t(`reviewers.${reviewer}.note`)}</Accordion.ItemBody>\n          </Accordion.ItemContent>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n}\n";
+//#endregion
+//#region src/accordion/accordion.specimen.tsx
+/**
+* Catalogue page for the accordion.
+*
+* @remarks
+*   `scenesOf` generates the looks, palettes, sizes and motions from the questions example, which
+*   opens its first question, so every scene shows an open item beside closed ones. The palettes
+*   use the subtle look, which fills the open item from the palette. The hand-written scenes show a
+*   filter panel with several items open, icons, avatars, a controlled checkout, actions beside the
+*   triggers and a disabled accordion. Every accordion renders in a room at its real width: the
+*   filter panel in a sidebar's, the others in a column's. The words are keys under `accordion` in
+*   `locales/en/specimen/accordion.json`.
+*/
+/**
+* Props of the disabled scene's accordion.
+*/
+const DISABLED = { disabled: true };
+/**
+* Hand-written scene for a filter panel that keeps several items open.
+*/
+const multiple = {
+	about: "accordion.multiple.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Filters, {})
+	}),
+	example: filters_example_exports,
+	title: "accordion.multiple.title"
+};
+/**
+* Hand-written scene for triggers that start with an icon.
+*/
+const icons = {
+	about: "accordion.icons.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Clauses, {})
+	}),
+	example: clauses_example_exports,
+	title: "accordion.icons.title"
+};
+/**
+* Hand-written scene for triggers with an avatar and a second line.
+*/
+const reviewers = {
+	about: "accordion.reviewers.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Reviewers, {})
+	}),
+	example: reviewers_example_exports,
+	title: "accordion.reviewers.title"
+};
+/**
+* Hand-written scene for a checkout whose caller opens the next section.
+*/
+const checkout = {
+	about: "accordion.checkout.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Checkout, {})
+	}),
+	example: checkout_example_exports,
+	title: "accordion.checkout.title"
+};
+/**
+* Hand-written scene for an action button after each trigger.
+*/
+const documents = {
+	about: "accordion.documents.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Documents, {})
+	}),
+	example: documents_example_exports,
+	title: "accordion.documents.title"
+};
+/**
+* Hand-written scene for a disabled accordion.
+*/
+const disabled = {
+	about: "accordion.disabled.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Faq, { ...DISABLED })
+	}),
+	example: faq_example_exports,
+	props: { disabled: true },
+	title: "accordion.disabled.title"
+};
+var accordion_specimen_default = specimen({
+	about: "accordion.about",
+	id: "components/disclosure/accordion",
+	imports: "import { Accordion } from \"@stealthscale/component-disclosure\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				palette: { with: { variant: "subtle" } },
+				size: { direction: "column" },
+				variant: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "md",
+				children: /* @__PURE__ */ jsx(Faq, { ...props })
+			}),
+			example: faq_example_exports,
+			namespace: "accordion",
+			order: [
+				"variant",
+				"palette",
+				"size",
+				"motion"
+			]
+		}),
+		multiple,
+		icons,
+		reviewers,
+		checkout,
+		documents,
+		disabled
+	],
+	title: "accordion.title"
+});
+//#endregion
+export { checkout, accordion_specimen_default as default, disabled, documents, icons, multiple, reviewers };

package/dist/pages/accordion/accordion.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ItemBodyProps": {"conditions": 284, "foreign": 1041}, "ItemContentProps": {"conditions": 284, "foreign": 1041}, "ItemHeadingProps": {"conditions": 284, "foreign": 1041}, "ItemIndicatorProps": {"conditions": 284, "foreign": 1041}, "ItemTriggerProps": {"conditions": 284, "foreign": 1051}, "ItemProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1038}};
+export const parts = {"ItemBodyProps": [], "ItemContentProps": [], "ItemHeadingProps": [], "ItemIndicatorProps": [], "ItemTriggerProps": [], "ItemProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the accordion item is disabled."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "The value of the accordion item."}], "RootProps": [{"accepts": "boolean", "fallback": "false", "kind": "option", "name": "collapsible", "refers": [], "required": false, "says": "Whether an accordion item can be closed after it has been expanded."}, {"accepts": "string[]", "fallback": "", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the accordion items are disabled"}, {"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": ["accordion.ElementIds"], "required": false, "says": "The ids of the elements in the accordion. Useful for composition."}, {"accepts": "\"fade\" | \"none\" | \"slide\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Animation of the content as it opens and closes."}, {"accepts": "boolean", "fallback": "false", "kind": "option", "name": "multiple", "refers": [], "required": false, "says": "Whether multiple accordion items can be expanded at the same time."}, {"accepts": "((details: FocusChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onFocusChange", "refers": ["accordion.FocusChangeDetails"], "required": false, "says": "The callback fired when the focused accordion item changes."}, {"accepts": "((details: ValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": ["accordion.ValueChangeDetails"], "required": false, "says": "The callback fired when the state of expanded/collapsed accordion items changes."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette the looks read, set on the root."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Size of the trigger on the control scale, the indicator on the icon scale, and the body's padding and text."}, {"accepts": "string[]", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "The controlled value of the expanded accordion items."}, {"accepts": "\"flushed\" | \"outline\" | \"plain\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the items and the box around them."}]};
+export const shapes = {"accordion.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "((value: string) => string)", "name": "item", "says": ""}, {"accepts": "((value: string) => string)", "name": "itemContent", "says": ""}, {"accepts": "((value: string) => string)", "name": "itemTrigger", "says": ""}], "accordion.ValueChangeDetails": [{"accepts": "string[]", "name": "value", "says": ""}], "accordion.FocusChangeDetails": [{"accepts": "string | null", "name": "value", "says": ""}]};