@stealthscale/component-typography 0.3.1 → 0.3.2

package/dist/pages/blockquote/blockquote.js

@@ -0,0 +1,117 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { p as recipe } from "../../recipes-DuvOpofr.js";
+import { C as Caption, S as Content, b as Icon, y as Root } from "../../shared-CRBzNmJA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+//#region src/blockquote/examples/testimonial.example.tsx
+var testimonial_example_exports = /* @__PURE__ */ __exportAll({
+	Testimonial: () => Testimonial,
+	source: () => source
+});
+function Testimonial(props) {
+	const $ = c(13);
+	const { t } = useWords("blockquote");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Icon, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("quotation");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Content, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("author");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Caption, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t0,
+				t2,
+				t4
+			]
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Blockquote } from \"@stealthscale/component-typography\";\n\nexport function Testimonial(props: Blockquote.RootProps): ReactElement {\n  const { t } = useWords(\"blockquote\");\n\n  return (\n    <Blockquote.Root {...props}>\n      <Blockquote.Icon />\n      <Blockquote.Content>{t(\"quotation\")}</Blockquote.Content>\n      <Blockquote.Caption>{t(\"author\")}</Blockquote.Caption>\n    </Blockquote.Root>\n  );\n}\n";
+//#endregion
+//#region src/blockquote/blockquote.specimen.tsx
+/**
+* Catalogue page for the block quotation.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. Every scene renders a customer testimonial with
+*   a lucide quote icon, the quotation and a caption. The look, size and alignment scenes render
+*   one quotation per row in a 512px room. The palette scene renders the surface look. Every scene
+*   renders a component from `examples/` and shows that file as its source. The words are keys
+*   under `blockquote` in `locales/en/specimen/blockquote.json`.
+*/
+/**
+* Renders the testimonial in a 512px room.
+*/
+function roomed(props) {
+	return /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Testimonial, { ...props })
+	});
+}
+var blockquote_specimen_default = specimen({
+	about: "blockquote.about",
+	id: "components/typography/blockquote",
+	imports: "import { Blockquote } from \"@stealthscale/component-typography\";",
+	scenes: scenesOf(recipe, {
+		axes: {
+			justify: {
+				direction: "column",
+				draw: roomed
+			},
+			palette: { with: { variant: "surface" } },
+			size: {
+				direction: "column",
+				draw: roomed
+			},
+			variant: {
+				direction: "column",
+				draw: roomed
+			}
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Testimonial, { ...props }),
+		example: testimonial_example_exports,
+		namespace: "blockquote",
+		order: [
+			"variant",
+			"palette",
+			"size",
+			"justify",
+			"motion"
+		]
+	}),
+	title: "blockquote.title"
+});
+//#endregion
+export { blockquote_specimen_default as default };

package/dist/pages/blockquote/blockquote.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"CaptionProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1042}, "IconProps": {"conditions": 284, "foreign": 1178}, "RootProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"CaptionProps": [], "ContentProps": [], "IconProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "mirrored", "refers": [], "required": false, "says": "Mirrors the icon in a right-to-left page, for an icon that points, such as an arrow."}, {"accepts": "\"float\" | \"spin\" | \"twinkle\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Motion. Each value reads the theme's animation style of the same name."}, {"accepts": "\"2xl\" | \"3xl\" | \"4xl\" | \"inherit\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Box size from the icon scale, or `1em` at `inherit`."}, {"accepts": "\"current\" | \"default\" | \"error\" | \"info\" | \"inverted\" | \"muted\" | \"subtle\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "tone", "refers": [], "required": false, "says": "Foreground token of the icon."}], "RootProps": [{"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "justify", "refers": [], "required": false, "says": "Inline alignment of the parts and their text."}, {"accepts": "\"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation of the root. Each value reads the theme's animation style of the same name."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Semantic palette of the rule, the fill and the icon."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Body text style of the quotation, the gap between the parts one step larger than the size, and the start padding inside the rule."}, {"accepts": "\"glass\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the root and the icon."}]};
+export const shapes = {};

package/dist/pages/code/code.js

@@ -0,0 +1,200 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { d as recipe } from "../../recipes-DuvOpofr.js";
+import { _ as Code, t as Text } from "../../shared-CRBzNmJA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+//#region src/code/examples/failure.example.tsx
+var failure_example_exports = /* @__PURE__ */ __exportAll({
+	Failure: () => Failure,
+	source: () => source$3
+});
+function Failure(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Code, {
+			...props,
+			children: "ENOENT"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { Code } from \"@stealthscale/component-typography\";\n\nexport function Failure(props: Parameters<typeof Code>[0]): ReactElement {\n  return <Code {...props}>ENOENT</Code>;\n}\n";
+//#endregion
+//#region src/code/examples/install.example.tsx
+var install_example_exports = /* @__PURE__ */ __exportAll({
+	Install: () => Install,
+	source: () => source$2
+});
+function Install(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Code, {
+			...props,
+			children: "pnpm add"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Code } from \"@stealthscale/component-typography\";\n\nexport function Install(props: Parameters<typeof Code>[0]): ReactElement {\n  return <Code {...props}>pnpm add</Code>;\n}\n";
+//#endregion
+//#region src/code/examples/sentence.example.tsx
+var sentence_example_exports = /* @__PURE__ */ __exportAll({
+	Sentence: () => Sentence,
+	source: () => source$1
+});
+function Sentence() {
+	const $ = c(8);
+	const { t } = useWords("code");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("run");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Code, { children: "pnpm add @stealthscale/theme" });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("where");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t0 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Text, { children: [
+			t0,
+			" ",
+			t1,
+			" ",
+			t2
+		] });
+		$[5] = t0;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Code, Text } from \"@stealthscale/component-typography\";\n\nexport function Sentence(): ReactElement {\n  const { t } = useWords(\"code\");\n\n  return (\n    <Text>\n      {t(\"run\")} <Code>pnpm add @stealthscale/theme</Code> {t(\"where\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/code/examples/subpath.example.tsx
+var subpath_example_exports = /* @__PURE__ */ __exportAll({
+	Subpath: () => Subpath,
+	source: () => source
+});
+function Subpath(props) {
+	const $ = c(10);
+	const { t } = useWords("code");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("subpath.before");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(Code, {
+			...props,
+			children: "@stealthscale/component-screen/shell"
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("subpath.after");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Text, { children: [
+			t0,
+			" ",
+			t1,
+			" ",
+			t2
+		] });
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Code, Text } from \"@stealthscale/component-typography\";\n\nexport function Subpath(props: Parameters<typeof Code>[0]): ReactElement {\n  const { t } = useWords(\"code\");\n\n  return (\n    <Text>\n      {t(\"subpath.before\")} <Code {...props}>@stealthscale/component-screen/shell</Code>{\" \"}\n      {t(\"subpath.after\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/code/code.specimen.tsx
+/**
+* Catalogue page for inline code.
+*
+* @remarks
+*   `scenesOf` generates the look scene, crossed with the size axis, and the palette scene, crossed
+*   with the look axis. A hand-written scene renders a package path that `wrap` breaks in a 320px
+*   room, and another renders a command inside a line of body text. Every scene renders a component
+*   from `examples/` and shows that file as its source. Code is literal and the other words are
+*   keys under `code` in `locales/en/specimen/code.json`.
+*/
+/**
+* Hand-written scene for a package path longer than a line of its room, which `wrap` breaks.
+*
+* @remarks
+*   The scene renders the path with `wrap` alone. Without it the path runs past its room, which is
+*   the fault the axis prevents.
+*/
+const wrapping = {
+	about: "code.wrap.about",
+	axes: ["wrap"],
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Subpath, { wrap: true })
+	}),
+	example: subpath_example_exports,
+	props: { wrap: true },
+	title: "code.wrap.title"
+};
+/**
+* Hand-written scene for a command inside a line of body text.
+*/
+const inline = {
+	about: "code.sentence.about",
+	draw: Sentence,
+	example: sentence_example_exports,
+	title: "code.sentence.title"
+};
+var code_specimen_default = specimen({
+	about: "code.about",
+	id: "components/typography/code",
+	imports: "import { Code } from \"@stealthscale/component-typography\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				palette: {
+					across: "variant",
+					draw: (props) => /* @__PURE__ */ jsx(Failure, { ...props }),
+					example: failure_example_exports
+				},
+				variant: { across: "size" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Install, { ...props }),
+			example: install_example_exports,
+			namespace: "code",
+			order: ["variant", "palette"],
+			skip: { wrap: "rendered by the wrapping scene, with the value that breaks the path" }
+		}),
+		wrapping,
+		inline
+	],
+	title: "code.title"
+});
+//#endregion
+export { code_specimen_default as default, inline, wrapping };

package/dist/pages/code/code.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"CodeProps": {"conditions": 284, "foreign": 1041}, "TextProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"CodeProps": [{"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Semantic palette of the fill, the edge and the text."}, {"accepts": "\"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Step of the code text style, with inline padding from the inset one size smaller."}, {"accepts": "\"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the snippet."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "wrap", "refers": [], "required": false, "says": "Breaks a snippet in running text where its line ends."}], "TextProps": [{"accepts": "\"center\" | \"end\" | \"justify\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Inline alignment of the lines. `start` and `end` follow the writing direction."}, {"accepts": "\"bottom\" | \"edges\" | \"radial\"", "fallback": "", "kind": "variant", "name": "mask", "refers": [], "required": false, "says": "Fade mask, read from the theme's `mask.*` layer styles."}, {"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation. Each value reads the theme's animation style of the same name."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Step of the body text role, from `xs` to `xl`."}, {"accepts": "Tone", "fallback": "", "kind": "variant", "name": "tone", "refers": ["kit.Tone"], "required": false, "says": "Foreground token of the text."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "truncate", "refers": [], "required": false, "says": "Cuts the text to one line that ends in an ellipsis."}, {"accepts": "Weight", "fallback": "", "kind": "variant", "name": "weight", "refers": ["kit.Weight"], "required": false, "says": "Font weight token."}]};
+export const shapes = {"kit.Tone": [{"accepts": "", "name": "\"default\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"inverted\"", "says": ""}, {"accepts": "", "name": "\"muted\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}], "kit.Weight": [{"accepts": "", "name": "\"bold\"", "says": ""}, {"accepts": "", "name": "\"medium\"", "says": ""}, {"accepts": "", "name": "\"normal\"", "says": ""}, {"accepts": "", "name": "\"semibold\"", "says": ""}]};

package/dist/pages/em/em.js

@@ -0,0 +1,85 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { u as recipe } from "../../recipes-DuvOpofr.js";
+import { g as Em, t as Text } from "../../shared-CRBzNmJA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { grounded, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+//#region src/em/examples/export.example.tsx
+var export_example_exports = /* @__PURE__ */ __exportAll({
+	Export: () => Export,
+	source: () => source
+});
+function Export(props) {
+	const $ = c(13);
+	const { t } = useWords("em");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("before");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("after");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Em, {
+			...props,
+			children: t1
+		});
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("backup");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t0 || $[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Text, { children: [
+			t0,
+			" ",
+			t2,
+			" ",
+			t3
+		] });
+		$[9] = t0;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Em, Text } from \"@stealthscale/component-typography\";\n\nexport function Export(props: Parameters<typeof Em>[0]): ReactElement {\n  const { t } = useWords(\"em\");\n\n  return (\n    <Text>\n      {t(\"before\")} <Em {...props}>{t(\"after\")}</Em> {t(\"backup\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/em/em.specimen.tsx
+/**
+* Catalogue page for the em element.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. The example renders the stressed run inside a
+*   `Text` line, because stress is relative to the surrounding text. The tone scene renders the
+*   inverted ink on `bg.inverted` through `grounded`. Every scene renders the example and shows it
+*   as its source. The words are keys under `em` in `locales/en/specimen/em.json`.
+*/
+var em_specimen_default = specimen({
+	about: "em.about",
+	id: "components/typography/em",
+	imports: "import { Em, Text } from \"@stealthscale/component-typography\";",
+	scenes: scenesOf(recipe, {
+		axes: { tone: { draw: (props) => grounded(props.tone, /* @__PURE__ */ jsx(Export, { ...props })) } },
+		draw: (props) => /* @__PURE__ */ jsx(Export, { ...props }),
+		example: export_example_exports,
+		namespace: "em",
+		order: ["tone", "motion"]
+	}),
+	title: "em.title"
+});
+//#endregion
+export { em_specimen_default as default };

package/dist/pages/em/em.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"EmProps": {"conditions": 284, "foreign": 1041}, "TextProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"EmProps": [{"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation. Each value reads the theme's animation style of the same name."}, {"accepts": "Tone", "fallback": "", "kind": "variant", "name": "tone", "refers": ["kit.Tone"], "required": false, "says": "Foreground token of the text."}], "TextProps": [{"accepts": "\"center\" | \"end\" | \"justify\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Inline alignment of the lines. `start` and `end` follow the writing direction."}, {"accepts": "\"bottom\" | \"edges\" | \"radial\"", "fallback": "", "kind": "variant", "name": "mask", "refers": [], "required": false, "says": "Fade mask, read from the theme's `mask.*` layer styles."}, {"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation. Each value reads the theme's animation style of the same name."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Step of the body text role, from `xs` to `xl`."}, {"accepts": "Tone", "fallback": "", "kind": "variant", "name": "tone", "refers": ["kit.Tone"], "required": false, "says": "Foreground token of the text."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "truncate", "refers": [], "required": false, "says": "Cuts the text to one line that ends in an ellipsis."}, {"accepts": "Weight", "fallback": "", "kind": "variant", "name": "weight", "refers": ["kit.Weight"], "required": false, "says": "Font weight token."}]};
+export const shapes = {"kit.Tone": [{"accepts": "", "name": "\"default\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"inverted\"", "says": ""}, {"accepts": "", "name": "\"muted\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}], "kit.Weight": [{"accepts": "", "name": "\"bold\"", "says": ""}, {"accepts": "", "name": "\"medium\"", "says": ""}, {"accepts": "", "name": "\"normal\"", "says": ""}, {"accepts": "", "name": "\"semibold\"", "says": ""}]};

package/dist/pages/heading/heading.js

@@ -0,0 +1,180 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { l as recipe } from "../../recipes-DuvOpofr.js";
+import { h as Heading } from "../../shared-CRBzNmJA.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Room, grounded, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+//#region src/heading/examples/migration.example.tsx
+var migration_example_exports = /* @__PURE__ */ __exportAll({
+	Migration: () => Migration,
+	source: () => source$3
+});
+function Migration(props) {
+	const $ = c(5);
+	const { t } = useWords("heading");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("migration");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heading } from \"@stealthscale/component-typography\";\n\nexport function Migration(props: Parameters<typeof Heading>[0]): ReactElement {\n  const { t } = useWords(\"heading\");\n\n  return (\n    <Heading as=\"h3\" {...props}>\n      {t(\"migration\")}\n    </Heading>\n  );\n}\n";
+//#endregion
+//#region src/heading/examples/report.example.tsx
+var report_example_exports = /* @__PURE__ */ __exportAll({
+	Report: () => Report,
+	source: () => source$2
+});
+function Report(props) {
+	const $ = c(5);
+	const { t } = useWords("heading");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("report");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heading } from \"@stealthscale/component-typography\";\n\nexport function Report(props: Parameters<typeof Heading>[0]): ReactElement {\n  const { t } = useWords(\"heading\");\n\n  return (\n    <Heading as=\"h3\" {...props}>\n      {t(\"report\")}\n    </Heading>\n  );\n}\n";
+//#endregion
+//#region src/heading/examples/settings.example.tsx
+var settings_example_exports = /* @__PURE__ */ __exportAll({
+	Settings: () => Settings,
+	source: () => source$1
+});
+function Settings(props) {
+	const $ = c(5);
+	const { t } = useWords("heading");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("settings");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heading } from \"@stealthscale/component-typography\";\n\nexport function Settings(props: Parameters<typeof Heading>[0]): ReactElement {\n  const { t } = useWords(\"heading\");\n\n  return (\n    <Heading as=\"h3\" {...props}>\n      {t(\"settings\")}\n    </Heading>\n  );\n}\n";
+//#endregion
+//#region src/heading/examples/welcome.example.tsx
+var welcome_example_exports = /* @__PURE__ */ __exportAll({
+	Welcome: () => Welcome,
+	source: () => source
+});
+function Welcome(props) {
+	const $ = c(5);
+	const { t } = useWords("heading");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("welcome");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heading } from \"@stealthscale/component-typography\";\n\nexport function Welcome(props: Parameters<typeof Heading>[0]): ReactElement {\n  const { t } = useWords(\"heading\");\n\n  return (\n    <Heading as=\"h3\" {...props}>\n      {t(\"welcome\")}\n    </Heading>\n  );\n}\n";
+//#endregion
+//#region src/heading/heading.specimen.tsx
+/**
+* Catalogue page for the heading.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. Every example renders an `h3`, one level below
+*   the scene's `h2`, so the page outline stays in order at every size. The display and effect
+*   scenes render at `2xl`. The tone scene renders the inverted ink on `bg.inverted` through
+*   `grounded`, and the truncation scene renders a long title in a 512px room. Every scene renders
+*   a component from `examples/` and shows that file as its source. The words are keys under
+*   `heading` in `locales/en/specimen/heading.json`.
+*/
+var heading_specimen_default = specimen({
+	about: "heading.about",
+	id: "components/typography/heading",
+	imports: "import { Heading } from \"@stealthscale/component-typography\";",
+	scenes: scenesOf(recipe, {
+		axes: {
+			display: {
+				draw: (props) => /* @__PURE__ */ jsx(Welcome, { ...props }),
+				example: welcome_example_exports,
+				with: { size: "2xl" }
+			},
+			effect: {
+				draw: (props) => /* @__PURE__ */ jsx(Welcome, { ...props }),
+				example: welcome_example_exports,
+				with: { size: "2xl" }
+			},
+			size: { direction: "column" },
+			tone: {
+				draw: (props) => grounded(props.tone, /* @__PURE__ */ jsx(Settings, { ...props })),
+				example: settings_example_exports
+			},
+			truncate: {
+				direction: "column",
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "lg",
+					children: /* @__PURE__ */ jsx(Migration, { ...props })
+				}),
+				example: migration_example_exports
+			}
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Report, { ...props }),
+		example: report_example_exports,
+		namespace: "heading",
+		order: [
+			"size",
+			"display",
+			"tone",
+			"effect",
+			"motion",
+			"truncate"
+		]
+	}),
+	title: "heading.title"
+});
+//#endregion
+export { heading_specimen_default as default };

package/dist/pages/heading/heading.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"HeadingProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"HeadingProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "display", "refers": [], "required": false, "says": "Sets the display text role in place of the heading role."}, {"accepts": "\"gradient\" | \"shine\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "Text effect."}, {"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation. Each value reads the theme's animation style of the same name."}, {"accepts": "\"2xl\" | \"3xl\" | \"4xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Step of the heading text role, from `xs` to `4xl`."}, {"accepts": "Tone", "fallback": "", "kind": "variant", "name": "tone", "refers": ["kit.Tone"], "required": false, "says": "Foreground token of the text."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "truncate", "refers": [], "required": false, "says": "Cuts the text to one line that ends in an ellipsis."}]};
+export const shapes = {"kit.Tone": [{"accepts": "", "name": "\"default\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"inverted\"", "says": ""}, {"accepts": "", "name": "\"muted\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}]};