@stealthscale/component-disclosure 0.2.2 → 0.2.4

package/dist/pages/truncate/truncate.js

@@ -0,0 +1,235 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { t as Truncate } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Matrix, Room, specimen, useWords } from "@stealthscale/specimen";
+import { Stack } from "@stealthscale/component-layout";
+import { Code } from "@stealthscale/component-typography";
+import { DataList } from "@stealthscale/component-collections";
+import { Badge } from "@stealthscale/component-data";
+//#region src/truncate/examples/description.example.tsx
+var description_example_exports = /* @__PURE__ */ __exportAll({
+	Description: () => Description,
+	source: () => source$3
+});
+function Description(props) {
+	const $ = c(5);
+	const { t } = useWords("truncate");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("description.text");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Truncate, {
+			...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 { Truncate, TruncateProps } from \"@stealthscale/component-disclosure\";\n\nexport function Description(props: Omit<TruncateProps, \"children\">): ReactElement {\n  const { t } = useWords(\"truncate\");\n\n  return <Truncate {...props}>{t(\"description.text\")}</Truncate>;\n}\n";
+//#endregion
+//#region src/truncate/examples/fits.example.tsx
+var fits_example_exports = /* @__PURE__ */ __exportAll({
+	Fits: () => Fits,
+	source: () => source$2
+});
+function Fits() {
+	const $ = c(4);
+	const { t } = useWords("truncate");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("fits.name");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Truncate, {
+			focusable: true,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Truncate } from \"@stealthscale/component-disclosure\";\n\nexport function Fits(): ReactElement {\n  const { t } = useWords(\"truncate\");\n\n  return <Truncate focusable>{t(\"fits.name\")}</Truncate>;\n}\n";
+//#endregion
+//#region src/truncate/examples/notes.example.tsx
+var notes_example_exports = /* @__PURE__ */ __exportAll({
+	Notes: () => Notes,
+	source: () => source$1
+});
+const SHIPMENTS = [
+	{
+		id: "NL-2291",
+		key: "held"
+	},
+	{
+		id: "NL-2292",
+		key: "delivered"
+	},
+	{
+		id: "NL-2293",
+		key: "rerouted"
+	}
+];
+function Notes() {
+	const $ = c(4);
+	const { t } = useWords("truncate");
+	let t0;
+	if ($[0] !== t) {
+		t0 = SHIPMENTS.map((t1) => {
+			const { id, key } = t1;
+			return /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: /* @__PURE__ */ jsx(Code, { children: id }) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsx(Truncate, {
+				focusable: true,
+				children: t(`notes.items.${key}`)
+			}) })] }, id);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(DataList.Root, {
+			orientation: "horizontal",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Code } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Truncate } from \"@stealthscale/component-disclosure\";\n\nconst SHIPMENTS = [\n  { id: \"NL-2291\", key: \"held\" },\n  { id: \"NL-2292\", key: \"delivered\" },\n  { id: \"NL-2293\", key: \"rerouted\" },\n] as const;\n\nexport function Notes(): ReactElement {\n  const { t } = useWords(\"truncate\");\n\n  return (\n    <DataList.Root orientation=\"horizontal\">\n      {SHIPMENTS.map(({ id, key }) => (\n        <DataList.Item key={id}>\n          <DataList.ItemLabel>\n            <Code>{id}</Code>\n          </DataList.ItemLabel>\n          <DataList.ItemValue>\n            <Truncate focusable>{t(`notes.items.${key}`)}</Truncate>\n          </DataList.ItemValue>\n        </DataList.Item>\n      ))}\n    </DataList.Root>\n  );\n}\n";
+//#endregion
+//#region src/truncate/examples/shipment.example.tsx
+var shipment_example_exports = /* @__PURE__ */ __exportAll({
+	Shipment: () => Shipment,
+	source: () => source
+});
+function Shipment() {
+	const $ = c(11);
+	const { t } = useWords("truncate");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("shipment.note");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Truncate, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("shipment.status");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Badge, {
+			palette: "warning",
+			children: t2
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Stack, {
+			align: "baseline",
+			direction: "row",
+			gap: "md",
+			children: [t1, t3]
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Truncate } from \"@stealthscale/component-disclosure\";\n\nexport function Shipment(): ReactElement {\n  const { t } = useWords(\"truncate\");\n\n  return (\n    <Stack align=\"baseline\" direction=\"row\" gap=\"md\">\n      <Truncate>{t(\"shipment.note\")}</Truncate>\n      <Badge palette=\"warning\">{t(\"shipment.status\")}</Badge>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/truncate/truncate.specimen.tsx
+/**
+* Line counts of the lines scene.
+*/
+const LINES = [
+	1,
+	2,
+	3
+];
+/**
+* Hand-written scene for clipped text beside a badge on a row.
+*/
+const beside = {
+	about: "truncate.shipment.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Shipment, {})
+	}),
+	example: shipment_example_exports,
+	title: "truncate.shipment.title"
+};
+/**
+* Hand-written scene for one description at three line counts.
+*/
+const kept = {
+	about: "truncate.lines.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "lines",
+		of: LINES,
+		children: (lines) => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Description, { lines })
+		})
+	}),
+	example: description_example_exports,
+	props: { lines: 1 },
+	title: "truncate.lines.title"
+};
+/**
+* Hand-written scene for clipped notes that take keyboard focus.
+*/
+const reached = {
+	about: "truncate.notes.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Notes, {})
+	}),
+	example: notes_example_exports,
+	title: "truncate.notes.title"
+};
+/**
+* Hand-written scene for text that fits.
+*/
+const fitted = {
+	about: "truncate.fits.about",
+	draw: Fits,
+	example: fits_example_exports,
+	title: "truncate.fits.title"
+};
+var truncate_specimen_default = specimen({
+	about: "truncate.about",
+	id: "components/disclosure/truncate",
+	imports: "import { Truncate } from \"@stealthscale/component-disclosure\";",
+	scenes: [
+		beside,
+		kept,
+		reached,
+		fitted
+	],
+	title: "truncate.title"
+});
+//#endregion
+export { beside, truncate_specimen_default as default, fitted, kept, reached };

package/dist/pages/truncate/truncate.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"TruncateProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"TruncateProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "children", "refers": [], "required": true, "says": "Whole text, as a string."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "focusable", "refers": [], "required": false, "says": "Whether the text takes a tab stop while it is clipped, false unless stated."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "lines", "refers": [], "required": false, "says": "Lines the text keeps, 1 unless stated."}]};
+export const shapes = {};