@stealthscale/component-feedback 0.2.1 → 0.2.3

package/dist/pages/alert/alert.js

@@ -0,0 +1,223 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { f as recipe } from "../../recipes-CX1gSsN7.js";
+import { G as Description, H as Title, K as Content, U as Root, W as Indicator, q as CloseTrigger } from "../../shared-Xc-n0bn7.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+//#region src/alert/examples/failed.example.tsx
+var failed_example_exports = /* @__PURE__ */ __exportAll({
+	Failed: () => Failed,
+	source: () => source$1
+});
+function Failed(props) {
+	const $ = c(21);
+	const { t } = useWords("alert");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(TriangleAlertIcon, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("failed");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Title, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("declined");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Description, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Content, { children: [t2, t4] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("dismiss", { name: t("failed") });
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(XIcon, {});
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t6) {
+		t8 = /* @__PURE__ */ jsx(CloseTrigger, {
+			label: t6,
+			children: t7
+		});
+		$[15] = t6;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== props || $[18] !== t5 || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t0,
+				t5,
+				t8
+			]
+		});
+		$[17] = props;
+		$[18] = t5;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { TriangleAlertIcon, XIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Alert } from \"@stealthscale/component-feedback\";\n\nexport function Failed(props: Alert.RootProps): ReactElement {\n  const { t } = useWords(\"alert\");\n\n  return (\n    <Alert.Root {...props}>\n      <Alert.Indicator>\n        <TriangleAlertIcon />\n      </Alert.Indicator>\n      <Alert.Content>\n        <Alert.Title>{t(\"failed\")}</Alert.Title>\n        <Alert.Description>{t(\"declined\")}</Alert.Description>\n      </Alert.Content>\n      <Alert.CloseTrigger label={t(\"dismiss\", { name: t(\"failed\") })}>\n        <XIcon />\n      </Alert.CloseTrigger>\n    </Alert.Root>\n  );\n}\n";
+//#endregion
+//#region src/alert/examples/saved.example.tsx
+var saved_example_exports = /* @__PURE__ */ __exportAll({
+	Saved: () => Saved,
+	source: () => source
+});
+function Saved(props) {
+	const $ = c(21);
+	const { t } = useWords("alert");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(InfoIcon, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("saved");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Title, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("restored");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Description, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Content, { children: [t2, t4] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("dismiss", { name: t("saved") });
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(XIcon, {});
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t6) {
+		t8 = /* @__PURE__ */ jsx(CloseTrigger, {
+			label: t6,
+			children: t7
+		});
+		$[15] = t6;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== props || $[18] !== t5 || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t0,
+				t5,
+				t8
+			]
+		});
+		$[17] = props;
+		$[18] = t5;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { InfoIcon, XIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Alert } from \"@stealthscale/component-feedback\";\n\nexport function Saved(props: Alert.RootProps): ReactElement {\n  const { t } = useWords(\"alert\");\n\n  return (\n    <Alert.Root {...props}>\n      <Alert.Indicator>\n        <InfoIcon />\n      </Alert.Indicator>\n      <Alert.Content>\n        <Alert.Title>{t(\"saved\")}</Alert.Title>\n        <Alert.Description>{t(\"restored\")}</Alert.Description>\n      </Alert.Content>\n      <Alert.CloseTrigger label={t(\"dismiss\", { name: t(\"saved\") })}>\n        <XIcon />\n      </Alert.CloseTrigger>\n    </Alert.Root>\n  );\n}\n";
+//#endregion
+//#region src/alert/alert.specimen.tsx
+/**
+* Settings of the scenes that render the failed payment.
+*/
+const FAILED = {
+	draw: (props) => /* @__PURE__ */ jsx(Failed, {
+		...props,
+		live: "off"
+	}),
+	example: failed_example_exports
+};
+var alert_specimen_default = specimen({
+	about: "alert.about",
+	id: "components/feedback/alert",
+	imports: "import { Alert } from \"@stealthscale/component-feedback\";",
+	scenes: scenesOf(recipe, {
+		axes: {
+			edge: { with: { status: "warning" } },
+			layout: { with: { status: "success" } },
+			motion: {
+				...FAILED,
+				with: { status: "error" }
+			},
+			size: { direction: "column" },
+			status: FAILED,
+			variant: {
+				...FAILED,
+				with: { status: "error" }
+			}
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Saved, {
+			...props,
+			live: "off"
+		}),
+		example: saved_example_exports,
+		namespace: "alert",
+		order: [
+			"variant",
+			"status",
+			"size",
+			"radius",
+			"layout",
+			"edge",
+			"motion"
+		]
+	}),
+	title: "alert.title"
+});
+//#endregion
+export { alert_specimen_default as default };

package/dist/pages/alert/alert.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"AsideProps": {"conditions": 284, "foreign": 1041}, "CloseTriggerProps": {"conditions": 284, "foreign": 1051}, "ContentProps": {"conditions": 284, "foreign": 1041}, "DescriptionProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1041}, "TitleProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"AsideProps": [], "CloseTriggerProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the button. Defaults to `Dismiss`."}], "ContentProps": [], "DescriptionProps": [], "IndicatorProps": [], "RootProps": [{"accepts": "\"bottom\" | \"end\" | \"top\"", "fallback": "", "kind": "variant", "name": "edge", "refers": [], "required": false, "says": "The edge with a rule in the palette's solid color. Unset by default."}, {"accepts": "\"inline\" | \"stacked\"", "fallback": "", "kind": "variant", "name": "layout", "refers": [], "required": false, "says": "Whether the title is above the description or on the same line with it."}, {"accepts": "Live", "fallback": "", "kind": "option", "name": "live", "refers": ["kit.Live"], "required": false, "says": "Announcement level, which sets the role. Defaults to `polite`."}, {"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": ""}, {"accepts": "Corner", "fallback": "", "kind": "variant", "name": "radius", "refers": ["kit.Corner"], "required": false, "says": ""}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": ""}, {"accepts": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "status", "refers": [], "required": false, "says": "The severity of the alert. It sets `colorPalette` and nothing else."}, {"accepts": "Flat", "fallback": "", "kind": "variant", "name": "variant", "refers": ["kit.Flat"], "required": false, "says": "The fill and edge of the alert, from the `flat.*` layer styles."}], "TitleProps": []};
+export const shapes = {"kit.Live": [{"accepts": "", "name": "\"assertive\"", "says": ""}, {"accepts": "", "name": "\"off\"", "says": ""}, {"accepts": "", "name": "\"polite\"", "says": ""}], "kit.Corner": [{"accepts": "", "name": "\"full\"", "says": ""}, {"accepts": "", "name": "\"l1\"", "says": ""}, {"accepts": "", "name": "\"l2\"", "says": ""}, {"accepts": "", "name": "\"l3\"", "says": ""}], "kit.Flat": [{"accepts": "", "name": "\"outline\"", "says": ""}, {"accepts": "", "name": "\"plain\"", "says": ""}, {"accepts": "", "name": "\"solid\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"surface\"", "says": ""}]};

package/dist/pages/empty-state/empty-state.js

@@ -0,0 +1,96 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { d as recipe } from "../../recipes-CX1gSsN7.js";
+import { B as Content, I as Title, L as Root, R as Indicator, z as Description } from "../../shared-Xc-n0bn7.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { InboxIcon } from "lucide-react";
+//#region src/empty-state/examples/invoices.example.tsx
+var invoices_example_exports = /* @__PURE__ */ __exportAll({
+	Invoices: () => Invoices,
+	source: () => source
+});
+function Invoices(props) {
+	const $ = c(15);
+	const { t } = useWords("empty-state");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(InboxIcon, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("none");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("description");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Description, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Content, { children: [
+			t0,
+			t2,
+			t4
+		] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== props || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Root, {
+			...props,
+			children: t5
+		});
+		$[12] = props;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { InboxIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { EmptyState } from \"@stealthscale/component-feedback\";\n\nexport function Invoices(props: EmptyState.RootProps): ReactElement {\n  const { t } = useWords(\"empty-state\");\n\n  return (\n    <EmptyState.Root {...props}>\n      <EmptyState.Content>\n        <EmptyState.Indicator>\n          <InboxIcon />\n        </EmptyState.Indicator>\n        <EmptyState.Title as=\"h3\">{t(\"none\")}</EmptyState.Title>\n        <EmptyState.Description>{t(\"description\")}</EmptyState.Description>\n      </EmptyState.Content>\n    </EmptyState.Root>\n  );\n}\n";
+//#endregion
+//#region src/empty-state/empty-state.specimen.tsx
+/**
+* Catalogue page for the empty state.
+*
+* @remarks
+*   `scenesOf` generates the size scene, one panel per row, because a panel fills the width it
+*   gets. The scene renders the example from `examples/` and shows it as its source. The example's
+*   title is an `h3` under the scene's `h2`. The words are keys under `empty-state` in
+*   `locales/en/specimen/empty-state.json`.
+*/
+var empty_state_specimen_default = specimen({
+	about: "empty-state.about",
+	id: "components/feedback/empty-state",
+	imports: "import { EmptyState } from \"@stealthscale/component-feedback\";",
+	scenes: scenesOf(recipe, {
+		axes: { size: { direction: "column" } },
+		draw: (props) => /* @__PURE__ */ jsx(Invoices, { ...props }),
+		example: invoices_example_exports,
+		namespace: "empty-state"
+	}),
+	title: "empty-state.title"
+});
+//#endregion
+export { empty_state_specimen_default as default };

package/dist/pages/empty-state/empty-state.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ContentProps": {"conditions": 284, "foreign": 1041}, "DescriptionProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1041}, "TitleProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"ContentProps": [], "DescriptionProps": [], "IndicatorProps": [], "RootProps": [{"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "The inset of the panel, the gap in the column, the box of the mark and the title's text style."}], "TitleProps": []};
+export const shapes = {};

package/dist/pages/loader/loader.js

@@ -0,0 +1,359 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { u as recipe } from "../../recipes-CX1gSsN7.js";
+import { M as LoaderOverlay, N as Loader } from "../../shared-Xc-n0bn7.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Card } from "@stealthscale/component-surfaces";
+import { Stack } from "@stealthscale/component-layout";
+import { Button } from "@stealthscale/component-actions";
+import { Text } from "@stealthscale/component-typography";
+//#region src/loader/examples/covered.example.tsx
+var covered_example_exports = /* @__PURE__ */ __exportAll({
+	Covered: () => Covered,
+	source: () => source$4
+});
+function Covered(props) {
+	const $ = c(21);
+	const { t } = useWords("loader");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("lines");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Card.Title, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("ledger");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Card.Description, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Card.Header, { children: [t1, t3] });
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("matching");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Loader, { text: t5 });
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== props || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(LoaderOverlay, {
+			...props,
+			children: t6
+		});
+		$[15] = props;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t4 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Card.Root, { children: [t4, t7] });
+		$[18] = t4;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Loader, LoaderOverlay } from \"@stealthscale/component-feedback\";\n\nexport function Covered(props: Parameters<typeof LoaderOverlay>[0]): ReactElement {\n  const { t } = useWords(\"loader\");\n\n  return (\n    <Card.Root>\n      <Card.Header>\n        <Card.Title>{t(\"lines\")}</Card.Title>\n        <Card.Description>{t(\"ledger\")}</Card.Description>\n      </Card.Header>\n      <LoaderOverlay {...props}>\n        <Loader text={t(\"matching\")} />\n      </LoaderOverlay>\n    </Card.Root>\n  );\n}\n";
+//#endregion
+//#region src/loader/examples/matching.example.tsx
+var matching_example_exports = /* @__PURE__ */ __exportAll({
+	Matching: () => Matching,
+	source: () => source$3
+});
+function Matching(props) {
+	const $ = c(5);
+	const { t } = useWords("loader");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("matching");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Loader, {
+			text: t0,
+			...props
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Loader } from \"@stealthscale/component-feedback\";\n\nexport function Matching(props: Omit<Parameters<typeof Loader>[0], \"text\">): ReactElement {\n  const { t } = useWords(\"loader\");\n\n  return <Loader text={t(\"matching\")} {...props} />;\n}\n";
+//#endregion
+//#region src/loader/examples/placements.example.tsx
+var placements_example_exports = /* @__PURE__ */ __exportAll({
+	Placements: () => Placements,
+	source: () => source$2
+});
+function Placements() {
+	const $ = c(11);
+	const { t } = useWords("loader");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("matching");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Loader, {
+			placement: "start",
+			text: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("matching");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Loader, {
+			placement: "end",
+			text: t2
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			direction: "column",
+			gap: "md",
+			children: [t1, t3]
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Loader } from \"@stealthscale/component-feedback\";\n\nexport function Placements(): ReactElement {\n  const { t } = useWords(\"loader\");\n\n  return (\n    <Stack align=\"flex-start\" direction=\"column\" gap=\"md\">\n      <Loader placement=\"start\" text={t(\"matching\")} />\n      <Loader placement=\"end\" text={t(\"matching\")} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/loader/examples/saving.example.tsx
+var saving_example_exports = /* @__PURE__ */ __exportAll({
+	Saving: () => Saving,
+	source: () => source$1
+});
+function Saving() {
+	const $ = c(17);
+	const { t } = useWords("loader");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("saving");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("save");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Loader, {
+			label: t0,
+			loading: false,
+			children: t1
+		}) });
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("saving");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("save");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Button, {
+			disabled: true,
+			children: /* @__PURE__ */ jsx(Loader, {
+				label: t3,
+				loading: true,
+				children: t4
+			})
+		});
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t2 || $[15] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "xl",
+			children: [t2, t5]
+		});
+		$[14] = t2;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Loader } from \"@stealthscale/component-feedback\";\n\nexport function Saving(): ReactElement {\n  const { t } = useWords(\"loader\");\n\n  return (\n    <Stack direction=\"row\" gap=\"xl\">\n      <Button>\n        <Loader label={t(\"saving\")} loading={false}>\n          {t(\"save\")}\n        </Loader>\n      </Button>\n      <Button disabled>\n        <Loader label={t(\"saving\")} loading>\n          {t(\"save\")}\n        </Loader>\n      </Button>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/loader/examples/value.example.tsx
+var value_example_exports = /* @__PURE__ */ __exportAll({
+	Value: () => Value,
+	source: () => source
+});
+function Value() {
+	const $ = c(11);
+	const { t } = useWords("loader");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("settled");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Text, {
+			weight: "semibold",
+			children: /* @__PURE__ */ jsx(Loader, {
+				loading: false,
+				children: t0
+			})
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("settled");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Text, {
+			weight: "semibold",
+			children: /* @__PURE__ */ jsx(Loader, {
+				loading: true,
+				children: t2
+			})
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "xl",
+			children: [t1, t3]
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Loader } from \"@stealthscale/component-feedback\";\n\nexport function Value(): ReactElement {\n  const { t } = useWords(\"loader\");\n\n  return (\n    <Stack direction=\"row\" gap=\"xl\">\n      <Text weight=\"semibold\">\n        <Loader loading={false}>{t(\"settled\")}</Loader>\n      </Text>\n      <Text weight=\"semibold\">\n        <Loader loading>{t(\"settled\")}</Loader>\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/loader/loader.specimen.tsx
+/**
+* Catalogue page for the loader.
+*
+* @remarks
+*   `scenesOf` generates the palette and scrim scenes from the recipe. Every scene renders a
+*   component from `examples/` and shows that file as its source. The value and button scenes
+*   render the loaded and the loading state next to each other, so the page shows that the box
+*   keeps its size. The words are keys under `loader` in the `specimen` namespace, stored in
+*   `locales/en/specimen/loader.json`.
+*/
+/**
+* Hand-written scene for the spinner on either side of the text.
+*/
+const placement = {
+	about: "loader.placement.about",
+	draw: Placements,
+	example: placements_example_exports,
+	title: "loader.placement.title"
+};
+/**
+* Hand-written scene for a loader over a value, loaded and loading.
+*/
+const value = {
+	about: "loader.value.about",
+	draw: Value,
+	example: value_example_exports,
+	title: "loader.value.title"
+};
+/**
+* Hand-written scene for a loader in a button, loaded and loading.
+*/
+const button = {
+	about: "loader.button.about",
+	draw: Saving,
+	example: saving_example_exports,
+	title: "loader.button.title"
+};
+var loader_specimen_default = specimen({
+	about: "loader.about",
+	id: "components/feedback/loader",
+	imports: "import { Loader, LoaderOverlay } from \"@stealthscale/component-feedback\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: { scrim: {
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "xs",
+					children: /* @__PURE__ */ jsx(Covered, { ...props })
+				}),
+				example: covered_example_exports
+			} },
+			draw: (props) => /* @__PURE__ */ jsx(Matching, { ...props }),
+			example: matching_example_exports,
+			namespace: "loader",
+			order: ["palette", "scrim"]
+		}),
+		placement,
+		value,
+		button
+	],
+	title: "loader.title"
+});
+//#endregion
+export { button, loader_specimen_default as default, placement, value };