@stealthscale/component-typography 0.3.0 → 0.3.2

package/dist/pages/kbd/kbd.js

@@ -0,0 +1,234 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { o as recipe } from "../../recipes-DuvOpofr.js";
+import { d as Group, t as Text, u 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";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/kbd/examples/escape.example.tsx
+var escape_example_exports = /* @__PURE__ */ __exportAll({
+	Escape: () => Escape,
+	source: () => source$3
+});
+function Escape(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Root, {
+			...props,
+			children: "Esc"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { Kbd } from \"@stealthscale/component-typography\";\n\nexport function Escape(props: Kbd.RootProps): ReactElement {\n  return <Kbd.Root {...props}>Esc</Kbd.Root>;\n}\n";
+//#endregion
+//#region src/kbd/examples/keys.example.tsx
+var keys_example_exports = /* @__PURE__ */ __exportAll({
+	Keys: () => Keys,
+	source: () => source$2
+});
+const KEYS = [
+	"⌘",
+	"⌥",
+	"⇧",
+	"⌃",
+	"↵",
+	"⌫",
+	"↑",
+	"↓",
+	"Tab",
+	"Esc"
+];
+function Keys() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "xs",
+			wrap: true,
+			children: KEYS.map(_temp$1)
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function _temp$1(key) {
+	return /* @__PURE__ */ jsx(Root, { children: key }, key);
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\n\nimport { Kbd } from \"@stealthscale/component-typography\";\n\nconst KEYS = [\"⌘\", \"⌥\", \"⇧\", \"⌃\", \"↵\", \"⌫\", \"↑\", \"↓\", \"Tab\", \"Esc\"];\n\nexport function Keys(): ReactElement {\n  return (\n    <Stack direction=\"row\" gap=\"xs\" wrap>\n      {KEYS.map((key) => (\n        <Kbd.Root key={key}>{key}</Kbd.Root>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/kbd/examples/sentence.example.tsx
+var sentence_example_exports = /* @__PURE__ */ __exportAll({
+	Sentence: () => Sentence,
+	source: () => source$1
+});
+function Sentence() {
+	const $ = c(8);
+	const { t } = useWords("kbd");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("press");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Root, { children: "⌘" }), /* @__PURE__ */ jsx(Root, { children: "K" })] });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("find");
+		$[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 { Kbd, Text } from \"@stealthscale/component-typography\";\n\nexport function Sentence(): ReactElement {\n  const { t } = useWords(\"kbd\");\n\n  return (\n    <Text>\n      {t(\"press\")}{\" \"}\n      <Kbd.Group>\n        <Kbd.Root>⌘</Kbd.Root>\n        <Kbd.Root>K</Kbd.Root>\n      </Kbd.Group>{\" \"}\n      {t(\"find\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/kbd/examples/shortcuts.example.tsx
+var shortcuts_example_exports = /* @__PURE__ */ __exportAll({
+	Shortcuts: () => Shortcuts,
+	source: () => source
+});
+const SHORTCUTS = [
+	{
+		command: "palette",
+		keys: ["⌘", "K"]
+	},
+	{
+		command: "save",
+		keys: ["⌘", "S"]
+	},
+	{
+		command: "undo",
+		keys: ["⌘", "Z"]
+	},
+	{
+		command: "redo",
+		keys: [
+			"⇧",
+			"⌘",
+			"Z"
+		]
+	}
+];
+function Shortcuts() {
+	const $ = c(4);
+	const { t } = useWords("kbd");
+	let t0;
+	if ($[0] !== t) {
+		t0 = SHORTCUTS.map((t1) => {
+			const { command, keys } = t1;
+			return /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				justify: "between",
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					children: t(`commands.${command}`)
+				}), /* @__PURE__ */ jsx(Group, {
+					size: "sm",
+					children: keys.map(_temp)
+				})]
+			}, command);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stack, {
+			gap: "sm",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function _temp(key) {
+	return /* @__PURE__ */ jsx(Root, { children: key }, key);
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Kbd, Text } from \"@stealthscale/component-typography\";\n\nconst SHORTCUTS = [\n  { command: \"palette\", keys: [\"⌘\", \"K\"] },\n  { command: \"save\", keys: [\"⌘\", \"S\"] },\n  { command: \"undo\", keys: [\"⌘\", \"Z\"] },\n  { command: \"redo\", keys: [\"⇧\", \"⌘\", \"Z\"] },\n] as const;\n\nexport function Shortcuts(): ReactElement {\n  const { t } = useWords(\"kbd\");\n\n  return (\n    <Stack gap=\"sm\">\n      {SHORTCUTS.map(({ command, keys }) => (\n        <Stack direction=\"row\" justify=\"between\" key={command}>\n          <Text size=\"sm\">{t(`commands.${command}`)}</Text>\n          <Kbd.Group size=\"sm\">\n            {keys.map((key) => (\n              <Kbd.Root key={key}>{key}</Kbd.Root>\n            ))}\n          </Kbd.Group>\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/kbd/kbd.specimen.tsx
+/**
+* Catalogue page for the keycap.
+*
+* @remarks
+*   `scenesOf` generates the look scene, crossed with the size axis, and the palette scene, crossed
+*   with the look axis. Hand-written scenes render the modifier and named keys, a combination
+*   inside a line of body text, and a list of commands with their combinations in a 384px room.
+*   Every scene renders a component from `examples/` and shows that file as its source. Key labels
+*   are literal and the other words are keys under `kbd` in `locales/en/specimen/kbd.json`.
+*/
+/**
+* Hand-written scene for the modifier and named keys.
+*/
+const named = {
+	about: "kbd.keys.about",
+	draw: Keys,
+	example: keys_example_exports,
+	title: "kbd.keys.title"
+};
+/**
+* Hand-written scene for a combination inside a line of body text.
+*/
+const inline = {
+	about: "kbd.sentence.about",
+	draw: Sentence,
+	example: sentence_example_exports,
+	title: "kbd.sentence.title"
+};
+/**
+* Hand-written scene for a list of commands in a 384px room.
+*/
+const listed = {
+	about: "kbd.shortcuts.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Shortcuts, {})
+	}),
+	example: shortcuts_example_exports,
+	title: "kbd.shortcuts.title"
+};
+var kbd_specimen_default = specimen({
+	about: "kbd.about",
+	id: "components/typography/kbd",
+	imports: "import { Kbd } from \"@stealthscale/component-typography\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				palette: { across: "variant" },
+				variant: { across: "size" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Escape, { ...props }),
+			example: escape_example_exports,
+			namespace: "kbd",
+			order: ["variant", "palette"]
+		}),
+		named,
+		inline,
+		listed
+	],
+	title: "kbd.title"
+});
+//#endregion
+export { kbd_specimen_default as default, inline, listed, named };

package/dist/pages/kbd/kbd.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"GroupProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1041}, "TextProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"GroupProps": [{"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": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Height, minimum width, inline padding and text style."}, {"accepts": "\"outline\" | \"plain\" | \"raised\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the keycap."}], "RootProps": [{"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": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Height, minimum width, inline padding and text style."}, {"accepts": "\"outline\" | \"plain\" | \"raised\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the keycap."}], "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/list/list.js

@@ -0,0 +1,175 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as recipe } from "../../recipes-DuvOpofr.js";
+import { c as Indicator, o as Root, s as Item, x as Icon } 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";
+import { CheckIcon } from "lucide-react";
+//#region src/list/examples/features.example.tsx
+var features_example_exports = /* @__PURE__ */ __exportAll({
+	Features: () => Features,
+	source: () => source$1
+});
+const FEATURES = [
+	"invoices",
+	"currencies",
+	"sso"
+];
+function Features(props) {
+	const $ = c(5);
+	const { t } = useWords("list");
+	let t0;
+	if ($[0] !== t) {
+		t0 = FEATURES.map((feature) => /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Icon, {
+			as: CheckIcon,
+			tone: "success"
+		}) }), t(`features.${feature}`)] }, feature));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Root, {
+			variant: "plain",
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Icon, List } from \"@stealthscale/component-typography\";\n\nconst FEATURES = [\"invoices\", \"currencies\", \"sso\"] as const;\n\nexport function Features(props: List.RootProps): ReactElement {\n  const { t } = useWords(\"list\");\n\n  return (\n    <List.Root variant=\"plain\" {...props}>\n      {FEATURES.map((feature) => (\n        <List.Item key={feature}>\n          <List.Indicator>\n            <Icon as={CheckIcon} tone=\"success\" />\n          </List.Indicator>\n          {t(`features.${feature}`)}\n        </List.Item>\n      ))}\n    </List.Root>\n  );\n}\n";
+//#endregion
+//#region src/list/examples/steps.example.tsx
+var steps_example_exports = /* @__PURE__ */ __exportAll({
+	Steps: () => Steps,
+	source: () => source
+});
+function Steps(props) {
+	const $ = c(17);
+	const { t } = useWords("list");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("steps.verify");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Item, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("steps.connect");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Item, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("steps.invite");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Item, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== props || $[13] !== t1 || $[14] !== t3 || $[15] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t1,
+				t3,
+				t5
+			]
+		});
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { List } from \"@stealthscale/component-typography\";\n\nexport function Steps(props: List.RootProps): ReactElement {\n  const { t } = useWords(\"list\");\n\n  return (\n    <List.Root {...props}>\n      <List.Item>{t(\"steps.verify\")}</List.Item>\n      <List.Item>{t(\"steps.connect\")}</List.Item>\n      <List.Item>{t(\"steps.invite\")}</List.Item>\n    </List.Root>\n  );\n}\n";
+//#endregion
+//#region src/list/list.specimen.tsx
+/**
+* Catalogue page for the list.
+*
+* @remarks
+*   `scenesOf` generates the marker, gap, alignment and motion scenes. The marker scene renders a
+*   counting marker on an `ol` and the others on a `ul`. The alignment scene renders the feature
+*   list in a 320px room, where its last item wraps. A hand-written scene renders the `plain` look
+*   with a lucide check in each indicator, and every other scene renders the `marker` look. Every
+*   scene renders a component from `examples/` and shows that file as its source. The words are
+*   keys under `list` in `locales/en/specimen/list.json`.
+*/
+/**
+* Lists the markers that count, which render on an `ol`.
+*/
+const COUNTING = /* @__PURE__ */ new Set([
+	"decimal",
+	"leading-zero",
+	"lower-alpha",
+	"lower-greek",
+	"lower-roman",
+	"upper-alpha",
+	"upper-roman"
+]);
+/**
+* Hand-written scene for the plain look with an indicator on each item.
+*/
+const plain = {
+	about: "list.variant.about",
+	axes: ["variant"],
+	draw: Features,
+	example: features_example_exports,
+	title: "list.variant.title"
+};
+var list_specimen_default = specimen({
+	about: "list.about",
+	id: "components/typography/list",
+	imports: "import { List } from \"@stealthscale/component-typography\";",
+	scenes: [...scenesOf(recipe, {
+		axes: {
+			align: {
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "xs",
+					children: /* @__PURE__ */ jsx(Features, { ...props })
+				}),
+				example: features_example_exports
+			},
+			marker: { draw: (props) => /* @__PURE__ */ jsx(Steps, {
+				as: COUNTING.has(props.marker) ? "ol" : "ul",
+				...props
+			}) }
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Steps, { ...props }),
+		example: steps_example_exports,
+		namespace: "list",
+		order: [
+			"marker",
+			"gap",
+			"align",
+			"motion"
+		],
+		skip: { variant: "The plain scene renders the plain look, and every other scene the marker look." }
+	}), plain],
+	title: "list.title"
+});
+//#endregion
+export { list_specimen_default as default, plain };

package/dist/pages/list/list.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"IndicatorProps": {"conditions": 284, "foreign": 1041}, "ItemProps": {"conditions": 284, "foreign": 1042}, "RootProps": {"conditions": 284, "foreign": 1039}, "IconProps": {"conditions": 284, "foreign": 1178}};
+export const parts = {"IndicatorProps": [], "ItemProps": [], "RootProps": [{"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Block alignment of an item's indicator against its text, in the `plain` look."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "gap", "refers": ["kit.Scale"], "required": false, "says": "Gap token between the items."}, {"accepts": "\"circle\" | \"dash\" | \"decimal\" | \"disc\" | \"leading-zero\" | \"lower-alpha\" | \"lower-greek\" | \"lower-roman\" | \"square\" | \"upper-alpha\" | \"upper-roman\"", "fallback": "", "kind": "variant", "name": "marker", "refers": [], "required": false, "says": "Browser marker type of the items, in the `marker` look."}, {"accepts": "\"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Entrance animation of each item. Each value reads the theme's animation style of the same name."}, {"accepts": "\"marker\" | \"plain\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the list."}], "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."}]};
+export const shapes = {"kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}]};

package/dist/pages/mark/mark.js

@@ -0,0 +1,127 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { c as recipe } from "../../recipes-DuvOpofr.js";
+import { p as Mark, t as Text } from "../../shared-CRBzNmJA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { scenesOf, specimen, useWords } from "@stealthscale/specimen";
+//#region src/mark/examples/hit.example.tsx
+var hit_example_exports = /* @__PURE__ */ __exportAll({
+	Hit: () => Hit,
+	source: () => source$1
+});
+function Hit(props) {
+	const $ = c(13);
+	const { t } = useWords("mark");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("found");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("term");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Mark, {
+			...props,
+			children: t1
+		});
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("files");
+		$[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$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Mark, Text } from \"@stealthscale/component-typography\";\n\nexport function Hit(props: Parameters<typeof Mark>[0]): ReactElement {\n  const { t } = useWords(\"mark\");\n\n  return (\n    <Text>\n      {t(\"found\")} <Mark {...props}>{t(\"term\")}</Mark> {t(\"files\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/mark/examples/term.example.tsx
+var term_example_exports = /* @__PURE__ */ __exportAll({
+	Term: () => Term,
+	source: () => source
+});
+function Term(props) {
+	const $ = c(5);
+	const { t } = useWords("mark");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("term");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Mark, {
+			...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 { Mark } from \"@stealthscale/component-typography\";\n\nexport function Term(props: Parameters<typeof Mark>[0]): ReactElement {\n  const { t } = useWords(\"mark\");\n\n  return <Mark {...props}>{t(\"term\")}</Mark>;\n}\n";
+//#endregion
+//#region src/mark/mark.specimen.tsx
+/**
+* Catalogue page for the highlight.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. The palette scene crosses the look axis and
+*   renders the highlighted word alone, so each of its 48 cells is one line in a 95px column at
+*   1280px. The other scenes render the highlight inside a `Text` line, because a highlight is read
+*   against the surrounding text. The corner scene crosses the inset axis. Every scene renders a
+*   component from `examples/` and shows that file as its source. The words are keys under `mark`
+*   in `locales/en/specimen/mark.json`.
+*/
+var mark_specimen_default = specimen({
+	about: "mark.about",
+	id: "components/typography/mark",
+	imports: "import { Mark, Text } from \"@stealthscale/component-typography\";",
+	scenes: scenesOf(recipe, {
+		axes: {
+			palette: {
+				across: "variant",
+				draw: (props) => /* @__PURE__ */ jsx(Term, { ...props }),
+				example: term_example_exports
+			},
+			radius: { across: "inset" }
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Hit, { ...props }),
+		example: hit_example_exports,
+		namespace: "mark",
+		order: [
+			"palette",
+			"radius",
+			"effect",
+			"motion"
+		]
+	}),
+	title: "mark.title"
+});
+//#endregion
+export { mark_specimen_default as default };

package/dist/pages/mark/mark.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"MarkProps": {"conditions": 284, "foreign": 1040}, "TextProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"MarkProps": [{"accepts": "\"glow\" | \"shine\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "Effect around the highlight."}, {"accepts": "\"md\" | \"none\" | \"sm\" | \"xs\"", "fallback": "", "kind": "variant", "name": "inset", "refers": [], "required": false, "says": "Inline padding from the inset scale, or `none`. The plain and text looks set no padding."}, {"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": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Semantic palette of the fill and the edge, and of the text in the plain and text looks."}, {"accepts": "Corner", "fallback": "", "kind": "variant", "name": "radius", "refers": ["kit.Corner"], "required": false, "says": "Corner radius token."}, {"accepts": "\"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\" | \"text\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the highlight."}], "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.Corner": [{"accepts": "", "name": "\"full\"", "says": ""}, {"accepts": "", "name": "\"l1\"", "says": ""}, {"accepts": "", "name": "\"l2\"", "says": ""}, {"accepts": "", "name": "\"l3\"", "says": ""}], "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": ""}]};