@stealthscale/component-a11y 0.1.2 → 0.1.3

package/dist/pages/visually-hidden/visually-hidden.js

@@ -0,0 +1,203 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { t as VisuallyHidden } from "../../shared-UZQEmdYt.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Contained, Room, Sample, specimen, useWords } from "@stealthscale/specimen";
+import { Button } from "@stealthscale/component-actions";
+import { Spacer, Stack } from "@stealthscale/component-layout";
+import { Heading, Text } from "@stealthscale/component-typography";
+import { XIcon } from "lucide-react";
+//#region src/visually-hidden/examples/close.example.tsx
+var close_example_exports = /* @__PURE__ */ __exportAll({
+	Close: () => Close,
+	source: () => source$1
+});
+function Close() {
+	const $ = c(5);
+	const { t } = useWords("visually-hidden");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(XIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("close");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Button, {
+			shape: "square",
+			variant: "outline",
+			children: [t0, /* @__PURE__ */ jsx(VisuallyHidden, { children: t1 })]
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { VisuallyHidden } from \"@stealthscale/component-a11y\";\n\nexport function Close(): ReactElement {\n  const { t } = useWords(\"visually-hidden\");\n\n  return (\n    <Button shape=\"square\" variant=\"outline\">\n      <XIcon aria-hidden size=\"1em\" />\n      <VisuallyHidden>{t(\"close\")}</VisuallyHidden>\n    </Button>\n  );\n}\n";
+//#endregion
+//#region src/visually-hidden/examples/shortcuts.example.tsx
+var shortcuts_example_exports = /* @__PURE__ */ __exportAll({
+	Shortcuts: () => Shortcuts,
+	source: () => source
+});
+function Shortcuts() {
+	const $ = c(24);
+	const { t } = useWords("visually-hidden");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("shortcuts");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(VisuallyHidden, {
+			as: Button,
+			focusable: true,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("invoices");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			size: "sm",
+			children: t2
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Spacer, {});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("create");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t5
+		});
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t1 || $[14] !== t3 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			children: [
+				t1,
+				t3,
+				t4,
+				t6
+			]
+		});
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t) {
+		t8 = t("summary");
+		$[17] = t;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Text, { children: t8 });
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t7 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t7, t9]
+		});
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Spacer, Stack } from \"@stealthscale/component-layout\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { VisuallyHidden } from \"@stealthscale/component-a11y\";\n\nexport function Shortcuts(): ReactElement {\n  const { t } = useWords(\"visually-hidden\");\n\n  return (\n    <Stack gap=\"md\">\n      <Stack direction=\"row\">\n        <VisuallyHidden as={Button} focusable>\n          {t(\"shortcuts\")}\n        </VisuallyHidden>\n        <Heading as=\"h3\" size=\"sm\">\n          {t(\"invoices\")}\n        </Heading>\n        <Spacer />\n        <Button size=\"sm\">{t(\"create\")}</Button>\n      </Stack>\n      <Text>{t(\"summary\")}</Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/visually-hidden/visually-hidden.specimen.tsx
+/**
+* Renders the close button at its own width in a sample.
+*/
+function Named() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Close, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Renders the page section in a 512px room that contains its fixed control.
+*/
+function Focusable() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Room, {
+			size: "lg",
+			children: /* @__PURE__ */ jsx(Contained, { children: /* @__PURE__ */ jsx(Shortcuts, {}) })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Hand-written scene for hidden text that names an icon-only button.
+*/
+const named = {
+	about: "visually-hidden.name.about",
+	draw: Named,
+	example: close_example_exports,
+	title: "visually-hidden.name.title"
+};
+/**
+* Hand-written scene for a hidden control that appears under keyboard focus.
+*/
+const focusable = {
+	about: "visually-hidden.focusable.about",
+	axes: ["focusable"],
+	draw: Focusable,
+	example: shortcuts_example_exports,
+	title: "visually-hidden.focusable.title"
+};
+var visually_hidden_specimen_default = specimen({
+	about: "visually-hidden.about",
+	id: "components/a11y/visually-hidden",
+	imports: "import { VisuallyHidden } from \"@stealthscale/component-a11y\";",
+	scenes: [named, focusable],
+	title: "visually-hidden.title"
+});
+//#endregion
+export { visually_hidden_specimen_default as default, focusable, named };

package/dist/pages/visually-hidden/visually-hidden.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"VisuallyHiddenProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"VisuallyHiddenProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "focusable", "refers": [], "required": false, "says": "Reveals the element under keyboard focus, on the `fill.surface` layer style at the window's start corner."}]};
+export const shapes = {};