@stealthscale/component-navigation 0.3.1 → 0.3.2

package/dist/pages/breadcrumb/breadcrumb.js

@@ -0,0 +1,274 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { s as recipe } from "../../recipes-BN0p1O6u.js";
+import { B as Separator, G as Ellipsis, H as List, K as CurrentLink, U as Link, V as Root, W as Item } from "../../shared-Cz6A-cF-.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { landmarked, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+//#region src/breadcrumb/examples/collapsed.example.tsx
+var collapsed_example_exports = /* @__PURE__ */ __exportAll({
+	Collapsed: () => Collapsed,
+	source: () => source$1
+});
+function Collapsed(props) {
+	const $ = c(24);
+	const { t } = useWords("breadcrumb");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("home");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Link, {
+			href: "#home",
+			children: t1
+		}) });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Separator, { children: "/" });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("dropped", { count: 4 });
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Ellipsis, {
+			"aria-label": t4,
+			children: "…"
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Separator, { children: "/" });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("april");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(CurrentLink, { children: t7 }) });
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t2 || $[17] !== t5 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(List, { children: [
+			t2,
+			t3,
+			t5,
+			t6,
+			t8
+		] });
+		$[16] = t2;
+		$[17] = t5;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== props || $[21] !== t0 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			...props,
+			children: t9
+		});
+		$[20] = props;
+		$[21] = t0;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Breadcrumb } from \"@stealthscale/component-navigation\";\n\nexport function Collapsed(props: Breadcrumb.RootProps): ReactElement {\n  const { t } = useWords(\"breadcrumb\");\n\n  return (\n    <Breadcrumb.Root aria-label={t(\"label\")} {...props}>\n      <Breadcrumb.List>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"#home\">{t(\"home\")}</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator>/</Breadcrumb.Separator>\n        <Breadcrumb.Ellipsis aria-label={t(\"dropped\", { count: 4 })}>…</Breadcrumb.Ellipsis>\n        <Breadcrumb.Separator>/</Breadcrumb.Separator>\n        <Breadcrumb.Item>\n          <Breadcrumb.CurrentLink>{t(\"april\")}</Breadcrumb.CurrentLink>\n        </Breadcrumb.Item>\n      </Breadcrumb.List>\n    </Breadcrumb.Root>\n  );\n}\n";
+//#endregion
+//#region src/breadcrumb/examples/trail.example.tsx
+var trail_example_exports = /* @__PURE__ */ __exportAll({
+	Trail: () => Trail,
+	source: () => source
+});
+function Trail(props) {
+	const $ = c(24);
+	const { t } = useWords("breadcrumb");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("home");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Link, {
+			href: "#home",
+			children: t1
+		}) });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Separator, { children: "/" });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("invoices");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Link, {
+			href: "#invoices",
+			children: t4
+		}) });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Separator, { children: "/" });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("april");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(CurrentLink, { children: t7 }) });
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t2 || $[17] !== t5 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(List, { children: [
+			t2,
+			t3,
+			t5,
+			t6,
+			t8
+		] });
+		$[16] = t2;
+		$[17] = t5;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== props || $[21] !== t0 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			...props,
+			children: t9
+		});
+		$[20] = props;
+		$[21] = t0;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Breadcrumb } from \"@stealthscale/component-navigation\";\n\nexport function Trail(props: Breadcrumb.RootProps): ReactElement {\n  const { t } = useWords(\"breadcrumb\");\n\n  return (\n    <Breadcrumb.Root aria-label={t(\"label\")} {...props}>\n      <Breadcrumb.List>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"#home\">{t(\"home\")}</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator>/</Breadcrumb.Separator>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"#invoices\">{t(\"invoices\")}</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Separator>/</Breadcrumb.Separator>\n        <Breadcrumb.Item>\n          <Breadcrumb.CurrentLink>{t(\"april\")}</Breadcrumb.CurrentLink>\n        </Breadcrumb.Item>\n      </Breadcrumb.List>\n    </Breadcrumb.Root>\n  );\n}\n";
+//#endregion
+//#region src/breadcrumb/breadcrumb.specimen.tsx
+/**
+* Renders the trail example with a landmark name that includes the cell's props.
+*
+* @remarks
+*   Every cell renders a `nav`, and the page's eight trails with one name fail axe
+*   `landmark-unique`. The name is set here, so the example's source keeps its single label.
+*/
+function Labelled(props) {
+	const $ = c(6);
+	const { t } = useWords("breadcrumb");
+	let t0;
+	if ($[0] !== props || $[1] !== t) {
+		t0 = landmarked(t("label"), props);
+		$[0] = props;
+		$[1] = t;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Trail, {
+			...props,
+			"aria-label": t0
+		});
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+/**
+* Renders the collapsed example with a landmark name apart from the catalogue's own breadcrumb.
+*/
+function Shortened() {
+	const $ = c(4);
+	const { t } = useWords("breadcrumb");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("shortened");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Collapsed, { "aria-label": t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+/**
+* Hand-written scene for a trail with its middle crumbs replaced by an ellipsis.
+*/
+const shortened = {
+	about: "breadcrumb.collapsed.about",
+	draw: Shortened,
+	example: collapsed_example_exports,
+	title: "breadcrumb.collapsed.title"
+};
+var breadcrumb_specimen_default = specimen({
+	about: "breadcrumb.about",
+	id: "components/navigation/breadcrumb",
+	imports: "import { Breadcrumb } from \"@stealthscale/component-navigation\";",
+	scenes: [...scenesOf(recipe, {
+		axes: {
+			size: { direction: "column" },
+			variant: { direction: "column" }
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Labelled, { ...props }),
+		example: trail_example_exports,
+		namespace: "breadcrumb"
+	}), shortened],
+	title: "breadcrumb.title"
+});
+//#endregion
+export { breadcrumb_specimen_default as default, shortened };

package/dist/pages/breadcrumb/breadcrumb.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"CurrentLinkProps": {"conditions": 284, "foreign": 1041}, "EllipsisProps": {"conditions": 284, "foreign": 1042}, "ItemProps": {"conditions": 284, "foreign": 1042}, "LinkProps": {"conditions": 284, "foreign": 1049}, "ListProps": {"conditions": 284, "foreign": 1043}, "RootProps": {"conditions": 284, "foreign": 1041}, "SeparatorProps": {"conditions": 284, "foreign": 1042}};
+export const parts = {"CurrentLinkProps": [], "EllipsisProps": [], "ItemProps": [], "LinkProps": [], "ListProps": [], "RootProps": [{"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "The text style of the root and the gap between list rows."}, {"accepts": "\"plain\" | \"underline\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Whether the links show an underline at rest or only on hover."}], "SeparatorProps": []};
+export const shapes = {};

package/dist/pages/link/link.js

@@ -0,0 +1,151 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { o as recipe } from "../../recipes-BN0p1O6u.js";
+import { L as Link } from "../../shared-Cz6A-cF-.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Text } from "@stealthscale/component-typography";
+//#region src/link/examples/footnote.example.tsx
+var footnote_example_exports = /* @__PURE__ */ __exportAll({
+	Footnote: () => Footnote,
+	source: () => source$1
+});
+function Footnote(props) {
+	const $ = c(13);
+	const { t } = useWords("link");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("before");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("terms");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Link, {
+			href: "#terms",
+			...props,
+			children: t1
+		});
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("after");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t0 || $[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Text, {
+			tone: "muted",
+			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 { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Link } from \"@stealthscale/component-navigation\";\n\nexport function Footnote(props: Parameters<typeof Link>[0]): ReactElement {\n  const { t } = useWords(\"link\");\n\n  return (\n    <Text tone=\"muted\">\n      {t(\"before\")}{\" \"}\n      <Link href=\"#terms\" {...props}>\n        {t(\"terms\")}\n      </Link>\n      {t(\"after\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/link/examples/terms.example.tsx
+var terms_example_exports = /* @__PURE__ */ __exportAll({
+	Terms: () => Terms,
+	source: () => source
+});
+function Terms(props) {
+	const $ = c(13);
+	const { t } = useWords("link");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("before");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("terms");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Link, {
+			href: "#terms",
+			...props,
+			children: t1
+		});
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("after");
+		$[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 { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Link } from \"@stealthscale/component-navigation\";\n\nexport function Terms(props: Parameters<typeof Link>[0]): ReactElement {\n  const { t } = useWords(\"link\");\n\n  return (\n    <Text>\n      {t(\"before\")}{\" \"}\n      <Link href=\"#terms\" {...props}>\n        {t(\"terms\")}\n      </Link>\n      {t(\"after\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/link/link.specimen.tsx
+/**
+* Catalogue page for the link.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. Every scene renders a component from
+*   `examples/` and shows that file as its source. Each link stands inside a sentence, because a
+*   reader finds a link by its contrast with the text around it. The inherit scene sets the
+*   sentence in muted text, because a link that inherits body text is identical to one that
+*   inherits nothing. The words are keys under `link` in `locales/en/specimen/link.json`.
+*/
+var link_specimen_default = specimen({
+	about: "link.about",
+	id: "components/navigation/link",
+	imports: "import { Link } from \"@stealthscale/component-navigation\";",
+	scenes: scenesOf(recipe, {
+		axes: { inherit: {
+			draw: (props) => /* @__PURE__ */ jsx(Footnote, { ...props }),
+			example: footnote_example_exports
+		} },
+		draw: (props) => /* @__PURE__ */ jsx(Terms, { ...props }),
+		example: terms_example_exports,
+		namespace: "link",
+		order: [
+			"variant",
+			"palette",
+			"inherit"
+		]
+	}),
+	title: "link.title"
+});
+//#endregion
+export { link_specimen_default as default };

package/dist/pages/link/link.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"LinkProps": {"conditions": 284, "foreign": 1049}};
+export const parts = {"LinkProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "inherit", "refers": [], "required": false, "says": "Whether the link inherits the text color in place of the link ink."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "The semantic palette the ink and the focus ring read from."}, {"accepts": "\"plain\" | \"underline\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Whether the underline shows at rest or only on hover."}]};
+export const shapes = {};