@stealthscale/component-disclosure 0.2.2 → 0.2.4

package/dist/pages/tabs/tabs.js

@@ -0,0 +1,815 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { i as recipe } from "../../recipes-95yCB2V3.js";
+import { C as CloseTrigger, S as selectionAfterClose, _ as Trigger, b as Indicator, v as Root, x as Content, y as List } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@stealthscale/component-primitives";
+import { VisuallyHidden } from "@stealthscale/component-a11y";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { FileCodeIcon, FolderOpenIcon, RotateCcwIcon, XIcon } from "lucide-react";
+import { Button } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+import { EmptyState } from "@stealthscale/component-feedback";
+import { Status } from "@stealthscale/component-data";
+//#region src/tabs/examples/account.example.tsx
+var account_example_exports = /* @__PURE__ */ __exportAll({
+	Account: () => Account,
+	source: () => source$4
+});
+function Account(props) {
+	const $ = c(41);
+	const { t } = useWords("tabs");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("overview");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Trigger, {
+			value: "overview",
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("activity");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Trigger, {
+			value: "activity",
+			children: t3
+		});
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("settings");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Trigger, {
+			value: "settings",
+			children: t5
+		});
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Indicator, {});
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t0 || $[16] !== t2 || $[17] !== t4 || $[18] !== t6) {
+		t8 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			focusable: false,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(List, {
+				"aria-label": t0,
+				children: [
+					t2,
+					t4,
+					t6,
+					t7
+				]
+			}) })
+		});
+		$[15] = t0;
+		$[16] = t2;
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "horizontal" });
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t8) {
+		t10 = /* @__PURE__ */ jsxs(ScrollArea.Root, {
+			fade: true,
+			inset: "xs",
+			scrolls: "horizontal",
+			children: [t8, t9]
+		});
+		$[21] = t8;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t) {
+		t11 = t("holds");
+		$[23] = t;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Content, {
+			value: "overview",
+			children: t11
+		});
+		$[25] = t11;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t) {
+		t13 = t("lately");
+		$[27] = t;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Content, {
+			value: "activity",
+			children: t13
+		});
+		$[29] = t13;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t) {
+		t15 = t("tuned");
+		$[31] = t;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Content, {
+			value: "settings",
+			children: t15
+		});
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== props || $[36] !== t10 || $[37] !== t12 || $[38] !== t14 || $[39] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Root, {
+			defaultValue: "overview",
+			...props,
+			children: [
+				t10,
+				t12,
+				t14,
+				t16
+			]
+		});
+		$[35] = props;
+		$[36] = t10;
+		$[37] = t12;
+		$[38] = t14;
+		$[39] = t16;
+		$[40] = t17;
+	} else t17 = $[40];
+	return t17;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Tabs } from \"@stealthscale/component-disclosure\";\n\nexport function Account(props: Tabs.RootProps): ReactElement {\n  const { t } = useWords(\"tabs\");\n\n  return (\n    <Tabs.Root defaultValue=\"overview\" {...props}>\n      <ScrollArea.Root fade inset=\"xs\" scrolls=\"horizontal\">\n        <ScrollArea.Viewport focusable={false}>\n          <ScrollArea.Content>\n            <Tabs.List aria-label={t(\"label\")}>\n              <Tabs.Trigger value=\"overview\">{t(\"overview\")}</Tabs.Trigger>\n              <Tabs.Trigger value=\"activity\">{t(\"activity\")}</Tabs.Trigger>\n              <Tabs.Trigger value=\"settings\">{t(\"settings\")}</Tabs.Trigger>\n              <Tabs.Indicator />\n            </Tabs.List>\n          </ScrollArea.Content>\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"horizontal\" />\n      </ScrollArea.Root>\n      <Tabs.Content value=\"overview\">{t(\"holds\")}</Tabs.Content>\n      <Tabs.Content value=\"activity\">{t(\"lately\")}</Tabs.Content>\n      <Tabs.Content value=\"settings\">{t(\"tuned\")}</Tabs.Content>\n    </Tabs.Root>\n  );\n}\n";
+//#endregion
+//#region src/tabs/examples/drafts.example.tsx
+var drafts_example_exports = /* @__PURE__ */ __exportAll({
+	Drafts: () => Drafts,
+	source: () => source$3
+});
+const DRAFTS = Array.from({ length: 14 }, (_, at) => String(1041 + at));
+function Drafts() {
+	const $ = c(23);
+	const { t } = useWords("tabs");
+	const [open, setOpen] = useState(DRAFTS);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (t1) => {
+			const { value } = t1;
+			setOpen((was) => was.filter((draft) => draft !== value));
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("drafts.label");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== open || $[4] !== t) {
+		let t3;
+		if ($[6] !== t) {
+			t3 = (draft_0) => /* @__PURE__ */ jsxs(Trigger, {
+				closable: true,
+				value: draft_0,
+				children: [t("drafts.name", { number: draft_0 }), /* @__PURE__ */ jsx(CloseTrigger, {
+					label: t("drafts.close"),
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})]
+			}, draft_0);
+			$[6] = t;
+			$[7] = t3;
+		} else t3 = $[7];
+		t2 = open.map(t3);
+		$[3] = open;
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Indicator, {});
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t1 || $[10] !== t2) {
+		t4 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			focusable: false,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(List, {
+				"aria-label": t1,
+				children: [t2, t3]
+			}) })
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "horizontal" });
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(ScrollArea.Root, {
+			fade: true,
+			inset: "xs",
+			scrolls: "horizontal",
+			children: [t4, t5]
+		});
+		$[13] = t4;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== open || $[16] !== t) {
+		let t8;
+		if ($[18] !== t) {
+			t8 = (draft_1) => /* @__PURE__ */ jsx(Content, {
+				value: draft_1,
+				children: t("drafts.body", { number: draft_1 })
+			}, draft_1);
+			$[18] = t;
+			$[19] = t8;
+		} else t8 = $[19];
+		t7 = open.map(t8);
+		$[15] = open;
+		$[16] = t;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			defaultValue: "1052",
+			onClose: t0,
+			children: [t6, t7]
+		});
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
+}
+const source$3 = "import { type ReactElement, useState } from \"react\";\n\nimport { XIcon } from \"lucide-react\";\n\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Tabs } from \"@stealthscale/component-disclosure\";\n\nconst DRAFTS = Array.from({ length: 14 }, (_, at) => String(1041 + at));\n\nexport function Drafts(): ReactElement {\n  const { t } = useWords(\"tabs\");\n  const [open, setOpen] = useState(DRAFTS);\n\n  return (\n    <Tabs.Root\n      defaultValue=\"1052\"\n      onClose={({ value }) => {\n        setOpen((was) => was.filter((draft) => draft !== value));\n      }}\n    >\n      <ScrollArea.Root fade inset=\"xs\" scrolls=\"horizontal\">\n        <ScrollArea.Viewport focusable={false}>\n          <ScrollArea.Content>\n            <Tabs.List aria-label={t(\"drafts.label\")}>\n              {open.map((draft) => (\n                <Tabs.Trigger closable key={draft} value={draft}>\n                  {t(\"drafts.name\", { number: draft })}\n                  <Tabs.CloseTrigger label={t(\"drafts.close\")}>\n                    <XIcon />\n                  </Tabs.CloseTrigger>\n                </Tabs.Trigger>\n              ))}\n              <Tabs.Indicator />\n            </Tabs.List>\n          </ScrollArea.Content>\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"horizontal\" />\n      </ScrollArea.Root>\n      {open.map((draft) => (\n        <Tabs.Content key={draft} value={draft}>\n          {t(\"drafts.body\", { number: draft })}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n}\n";
+//#endregion
+//#region src/tabs/examples/files.example.tsx
+var files_example_exports = /* @__PURE__ */ __exportAll({
+	Files: () => Files,
+	source: () => source$2
+});
+const FILES = [
+	"deploy",
+	"build",
+	"release",
+	"nightly"
+];
+const UNSAVED = "release";
+function emptied(t, onReopen) {
+	return /* @__PURE__ */ jsx(EmptyState.Root, {
+		size: "sm",
+		children: /* @__PURE__ */ jsxs(EmptyState.Content, { children: [
+			/* @__PURE__ */ jsx(EmptyState.Indicator, { children: /* @__PURE__ */ jsx(FolderOpenIcon, {}) }),
+			/* @__PURE__ */ jsx(EmptyState.Title, {
+				as: "h3",
+				children: t("files.empty.title")
+			}),
+			/* @__PURE__ */ jsx(EmptyState.Description, { children: t("files.empty.about") }),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: onReopen,
+				size: "sm",
+				variant: "outline",
+				children: t("files.empty.reopen")
+			})
+		] })
+	});
+}
+function Files() {
+	const $ = c(26);
+	const { t } = useWords("tabs");
+	const [open, setOpen] = useState(FILES);
+	if (open.length === 0) {
+		let t0;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = () => {
+				setOpen(FILES);
+			};
+			$[0] = t0;
+		} else t0 = $[0];
+		let t1;
+		if ($[1] !== t) {
+			t1 = emptied(t, t0);
+			$[1] = t;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	let t0;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (t1) => {
+			const { value } = t1;
+			setOpen((was) => was.filter((file) => file !== value));
+		};
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== t) {
+		t1 = t("files.label");
+		$[4] = t;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== open || $[7] !== t) {
+		let t3;
+		if ($[9] !== t) {
+			t3 = (file_0) => /* @__PURE__ */ jsxs(Trigger, {
+				closable: true,
+				value: file_0,
+				children: [
+					/* @__PURE__ */ jsx(FileCodeIcon, {}),
+					t(`files.names.${file_0}`),
+					file_0 === UNSAVED ? /* @__PURE__ */ jsxs(Status.Root, {
+						palette: "warning",
+						size: "inherit",
+						children: [/* @__PURE__ */ jsx(Status.Indicator, {}), /* @__PURE__ */ jsx(VisuallyHidden, { children: t("files.unsaved") })]
+					}) : null,
+					/* @__PURE__ */ jsx(CloseTrigger, {
+						label: t("files.close"),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			}, file_0);
+			$[9] = t;
+			$[10] = t3;
+		} else t3 = $[10];
+		t2 = open.map(t3);
+		$[6] = open;
+		$[7] = t;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Indicator, {});
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t1 || $[13] !== t2) {
+		t4 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			focusable: false,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(List, {
+				"aria-label": t1,
+				children: [t2, t3]
+			}) })
+		});
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "horizontal" });
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(ScrollArea.Root, {
+			fade: true,
+			inset: "xs",
+			scrolls: "horizontal",
+			children: [t4, t5]
+		});
+		$[16] = t4;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== open || $[19] !== t) {
+		let t8;
+		if ($[21] !== t) {
+			t8 = (file_1) => /* @__PURE__ */ jsx(Content, {
+				value: file_1,
+				children: t(`files.about.${file_1}`)
+			}, file_1);
+			$[21] = t;
+			$[22] = t8;
+		} else t8 = $[22];
+		t7 = open.map(t8);
+		$[18] = open;
+		$[19] = t;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[23] !== t6 || $[24] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			defaultValue: "build",
+			onClose: t0,
+			children: [t6, t7]
+		});
+		$[23] = t6;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	return t8;
+}
+const source$2 = "import { type ReactElement, useState } from \"react\";\n\nimport { FileCodeIcon, FolderOpenIcon, XIcon } from \"lucide-react\";\n\nimport { VisuallyHidden } from \"@stealthscale/component-a11y\";\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Status } from \"@stealthscale/component-data\";\nimport { EmptyState } from \"@stealthscale/component-feedback\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Tabs } from \"@stealthscale/component-disclosure\";\n\nconst FILES = [\"deploy\", \"build\", \"release\", \"nightly\"];\n\nconst UNSAVED = \"release\";\n\nfunction emptied(t: ReturnType<typeof useWords>[\"t\"], onReopen: () => void): ReactElement {\n  return (\n    <EmptyState.Root size=\"sm\">\n      <EmptyState.Content>\n        <EmptyState.Indicator>\n          <FolderOpenIcon />\n        </EmptyState.Indicator>\n        <EmptyState.Title as=\"h3\">{t(\"files.empty.title\")}</EmptyState.Title>\n        <EmptyState.Description>{t(\"files.empty.about\")}</EmptyState.Description>\n        <Button onClick={onReopen} size=\"sm\" variant=\"outline\">\n          {t(\"files.empty.reopen\")}\n        </Button>\n      </EmptyState.Content>\n    </EmptyState.Root>\n  );\n}\n\nexport function Files(): ReactElement {\n  const { t } = useWords(\"tabs\");\n  const [open, setOpen] = useState(FILES);\n\n  if (open.length === 0) {\n    return emptied(t, () => {\n      setOpen(FILES);\n    });\n  }\n\n  return (\n    <Tabs.Root\n      defaultValue=\"build\"\n      onClose={({ value }) => {\n        setOpen((was) => was.filter((file) => file !== value));\n      }}\n    >\n      <ScrollArea.Root fade inset=\"xs\" scrolls=\"horizontal\">\n        <ScrollArea.Viewport focusable={false}>\n          <ScrollArea.Content>\n            <Tabs.List aria-label={t(\"files.label\")}>\n              {open.map((file) => (\n                <Tabs.Trigger closable key={file} value={file}>\n                  <FileCodeIcon />\n                  {t(`files.names.${file}`)}\n                  {file === UNSAVED ? (\n                    <Status.Root palette=\"warning\" size=\"inherit\">\n                      <Status.Indicator />\n                      <VisuallyHidden>{t(\"files.unsaved\")}</VisuallyHidden>\n                    </Status.Root>\n                  ) : null}\n                  <Tabs.CloseTrigger label={t(\"files.close\")}>\n                    <XIcon />\n                  </Tabs.CloseTrigger>\n                </Tabs.Trigger>\n              ))}\n              <Tabs.Indicator />\n            </Tabs.List>\n          </ScrollArea.Content>\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"horizontal\" />\n      </ScrollArea.Root>\n      {open.map((file) => (\n        <Tabs.Content key={file} value={file}>\n          {t(`files.about.${file}`)}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n}\n";
+//#endregion
+//#region src/tabs/examples/preferences.example.tsx
+var preferences_example_exports = /* @__PURE__ */ __exportAll({
+	Preferences: () => Preferences,
+	source: () => source$1
+});
+const SECTIONS = [
+	"profile",
+	"security",
+	"billing",
+	"notifications"
+];
+function Preferences() {
+	const $ = c(13);
+	const { t } = useWords("tabs");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("preferences.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = SECTIONS.map((section) => /* @__PURE__ */ jsx(Trigger, {
+			value: section,
+			children: t(`preferences.names.${section}`)
+		}, section));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Indicator, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t0 || $[6] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(List, {
+			"aria-label": t0,
+			children: [t1, t2]
+		});
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = SECTIONS.map((section_0) => /* @__PURE__ */ jsx(Content, {
+			value: section_0,
+			children: t(`preferences.bodies.${section_0}`)
+		}, section_0));
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			defaultValue: "profile",
+			orientation: "vertical",
+			children: [t3, t4]
+		});
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Tabs } from \"@stealthscale/component-disclosure\";\n\nconst SECTIONS = [\"profile\", \"security\", \"billing\", \"notifications\"];\n\nexport function Preferences(): ReactElement {\n  const { t } = useWords(\"tabs\");\n\n  return (\n    <Tabs.Root defaultValue=\"profile\" orientation=\"vertical\">\n      <Tabs.List aria-label={t(\"preferences.label\")}>\n        {SECTIONS.map((section) => (\n          <Tabs.Trigger key={section} value={section}>\n            {t(`preferences.names.${section}`)}\n          </Tabs.Trigger>\n        ))}\n        <Tabs.Indicator />\n      </Tabs.List>\n      {SECTIONS.map((section) => (\n        <Tabs.Content key={section} value={section}>\n          {t(`preferences.bodies.${section}`)}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n}\n";
+//#endregion
+//#region src/tabs/examples/reader.example.tsx
+var reader_example_exports = /* @__PURE__ */ __exportAll({
+	Reader: () => Reader,
+	source: () => source
+});
+const ARTICLES = [
+	"billing",
+	"invoices",
+	"refunds",
+	"disputes"
+];
+function listOf(open, t) {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		fade: true,
+		inset: "xs",
+		scrolls: "horizontal",
+		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			focusable: false,
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs(List, {
+				"aria-label": t("reader.label"),
+				children: [open.map((article) => /* @__PURE__ */ jsxs(Trigger, {
+					closable: true,
+					value: article,
+					children: [t(`reader.names.${article}`), /* @__PURE__ */ jsx(CloseTrigger, {
+						label: t("reader.closeTab"),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}, article)), /* @__PURE__ */ jsx(Indicator, {})]
+			}) })
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "horizontal" })]
+	});
+}
+function Reader() {
+	const $ = c(41);
+	const { t } = useWords("tabs");
+	const [open, setOpen] = useState(ARTICLES);
+	const [value, setValue] = useState("invoices");
+	let t0;
+	if ($[0] !== open) {
+		t0 = (closed) => {
+			setValue((was) => selectionAfterClose(open, was, closed));
+			setOpen((was_0) => was_0.filter((article) => article !== closed));
+		};
+		$[0] = open;
+		$[1] = t0;
+	} else t0 = $[1];
+	const close = t0;
+	let t1;
+	if ($[2] !== close) {
+		t1 = (details) => {
+			close(details.value);
+		};
+		$[2] = close;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (details_0) => {
+			setValue(details_0.value);
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== open || $[6] !== t) {
+		t3 = listOf(open, t);
+		$[5] = open;
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== open || $[9] !== t) {
+		let t5;
+		if ($[11] !== t) {
+			t5 = (article_0) => /* @__PURE__ */ jsx(Content, {
+				value: article_0,
+				children: t(`reader.bodies.${article_0}`)
+			}, article_0);
+			$[11] = t;
+			$[12] = t5;
+		} else t5 = $[12];
+		t4 = open.map(t5);
+		$[8] = open;
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[13] !== t1 || $[14] !== t3 || $[15] !== t4 || $[16] !== value) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			onClose: t1,
+			onValueChange: t2,
+			value,
+			children: [t3, t4]
+		});
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = value;
+		$[17] = t5;
+	} else t5 = $[17];
+	const t6 = value === null || void 0;
+	let t7;
+	if ($[18] !== close || $[19] !== value) {
+		t7 = () => {
+			if (value !== null) close(value);
+		};
+		$[18] = close;
+		$[19] = value;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(XIcon, { size: "1em" });
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t) {
+		t9 = t("reader.close");
+		$[22] = t;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t6 || $[25] !== t7 || $[26] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Button, {
+			"aria-disabled": t6,
+			onClick: t7,
+			size: "sm",
+			variant: "outline",
+			children: [t8, t9]
+		});
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	const t11 = open.length === ARTICLES.length || void 0;
+	let t12;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = () => {
+			setOpen(ARTICLES);
+			setValue(_temp);
+		};
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(RotateCcwIcon, { size: "1em" });
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("reader.reopen");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t11 || $[33] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Button, {
+			"aria-disabled": t11,
+			onClick: t12,
+			size: "sm",
+			variant: "outline",
+			children: [t13, t14]
+		});
+		$[32] = t11;
+		$[33] = t14;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== t10 || $[36] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "sm",
+			wrap: true,
+			children: [t10, t15]
+		});
+		$[35] = t10;
+		$[36] = t15;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] !== t16 || $[39] !== t5) {
+		t17 = /* @__PURE__ */ jsxs(Stack, {
+			align: "stretch",
+			gap: "md",
+			children: [t5, t16]
+		});
+		$[38] = t16;
+		$[39] = t5;
+		$[40] = t17;
+	} else t17 = $[40];
+	return t17;
+}
+function _temp(was_1) {
+	return was_1 ?? "billing";
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { RotateCcwIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { ScrollArea } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Tabs } from \"@stealthscale/component-disclosure\";\n\nconst ARTICLES = [\"billing\", \"invoices\", \"refunds\", \"disputes\"];\n\nfunction listOf(open: readonly string[], t: ReturnType<typeof useWords>[\"t\"]): ReactElement {\n  return (\n    <ScrollArea.Root fade inset=\"xs\" scrolls=\"horizontal\">\n      <ScrollArea.Viewport focusable={false}>\n        <ScrollArea.Content>\n          <Tabs.List aria-label={t(\"reader.label\")}>\n            {open.map((article) => (\n              <Tabs.Trigger closable key={article} value={article}>\n                {t(`reader.names.${article}`)}\n                <Tabs.CloseTrigger label={t(\"reader.closeTab\")}>\n                  <XIcon />\n                </Tabs.CloseTrigger>\n              </Tabs.Trigger>\n            ))}\n            <Tabs.Indicator />\n          </Tabs.List>\n        </ScrollArea.Content>\n      </ScrollArea.Viewport>\n      <ScrollArea.Scrollbar orientation=\"horizontal\" />\n    </ScrollArea.Root>\n  );\n}\n\nexport function Reader(): ReactElement {\n  const { t } = useWords(\"tabs\");\n  const [open, setOpen] = useState(ARTICLES);\n  const [value, setValue] = useState<null | string>(\"invoices\");\n\n  const close = (closed: string): void => {\n    setValue((was) => Tabs.selectionAfterClose(open, was, closed));\n    setOpen((was) => was.filter((article) => article !== closed));\n  };\n\n  return (\n    <Stack align=\"stretch\" gap=\"md\">\n      <Tabs.Root\n        onClose={(details) => {\n          close(details.value);\n        }}\n        onValueChange={(details) => {\n          setValue(details.value);\n        }}\n        value={value}\n      >\n        {listOf(open, t)}\n        {open.map((article) => (\n          <Tabs.Content key={article} value={article}>\n            {t(`reader.bodies.${article}`)}\n          </Tabs.Content>\n        ))}\n      </Tabs.Root>\n      <Stack direction=\"row\" gap=\"sm\" wrap>\n        <Button\n          aria-disabled={value === null || undefined}\n          onClick={() => {\n            if (value !== null) close(value);\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          <XIcon size=\"1em\" />\n          {t(\"reader.close\")}\n        </Button>\n        <Button\n          aria-disabled={open.length === ARTICLES.length || undefined}\n          onClick={() => {\n            setOpen(ARTICLES);\n            setValue((was) => was ?? \"billing\");\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          <RotateCcwIcon size=\"1em\" />\n          {t(\"reader.reopen\")}\n        </Button>\n      </Stack>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/tabs/tabs.specimen.tsx
+/**
+* Catalogue page for the tabs.
+*
+* @remarks
+*   `scenesOf` generates the looks, palettes, sizes, fitted tabs and distributions from the account
+*   example, whose list scrolls sideways where the tabs are wider than their room. The fitted scene
+*   uses the enclosed look, where each tab's width shows. The orientation scene is hand-written,
+*   because the orientation is the machine's option and not an axis, and draws a vertical list of
+*   preferences. Three more hand-written scenes close tabs: files in a `2xl` room, drafts that
+*   overflow an `md` room, and a controlled list closed from outside. Each generated set renders in
+*   an `md` room, open on its first panel. The words are keys under `tabs` in
+*   `locales/en/specimen/tabs.json`.
+*/
+/**
+* Hand-written scene for a vertical list.
+*/
+const orientation = {
+	about: "tabs.orientation.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Preferences, {})
+	}),
+	example: preferences_example_exports,
+	title: "tabs.orientation.title"
+};
+/**
+* Hand-written scene for closable tabs over a list of files.
+*/
+const closing = {
+	about: "tabs.closing.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Files, {})
+	}),
+	example: files_example_exports,
+	title: "tabs.closing.title"
+};
+/**
+* Hand-written scene for a list of tabs wider than its room.
+*/
+const scrolling = {
+	about: "tabs.scrolling.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Drafts, {})
+	}),
+	example: drafts_example_exports,
+	title: "tabs.scrolling.title"
+};
+/**
+* Hand-written scene for a close from outside the list.
+*/
+const controlled = {
+	about: "tabs.controlled.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Reader, {})
+	}),
+	example: reader_example_exports,
+	title: "tabs.controlled.title"
+};
+var tabs_specimen_default = specimen({
+	about: "tabs.about",
+	id: "components/disclosure/tabs",
+	imports: "import { Tabs } from \"@stealthscale/component-disclosure\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				fitted: {
+					direction: "column",
+					with: { variant: "enclosed" }
+				},
+				justify: { direction: "column" },
+				size: { direction: "column" },
+				variant: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "md",
+				children: /* @__PURE__ */ jsx(Account, { ...props })
+			}),
+			example: account_example_exports,
+			namespace: "tabs",
+			order: [
+				"variant",
+				"palette",
+				"size",
+				"fitted",
+				"justify"
+			]
+		}),
+		orientation,
+		closing,
+		scrolling,
+		controlled
+	],
+	title: "tabs.title"
+});
+//#endregion
+export { closing, controlled, tabs_specimen_default as default, orientation, scrolling };