@stealthscale/component-collections 0.1.1 → 0.1.3

package/dist/pages/transfer/transfer.js

@@ -0,0 +1,465 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { h as Transfer } from "../../shared-DVn824MJ.js";
+import { r as recipe } from "../../recipes-C1oaF8pO.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/transfer/examples/clients.example.tsx
+var clients_example_exports = /* @__PURE__ */ __exportAll({
+	Clients: () => Clients,
+	source: () => source$2
+});
+const CLIENTS$2 = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Clients(props) {
+	const $ = c(23);
+	const { t } = useWords("transfer");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("giveBack");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "100%" });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("nothingHere");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("available");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = CLIENTS$2.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("take");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "100%" });
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t) {
+		t8 = t("chosen");
+		$[13] = t;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== props || $[16] !== t0 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Transfer, {
+			giveBackLabel: t0,
+			giveBackMark: t1,
+			itemToString: _temp$2,
+			itemToValue: _temp2$2,
+			mark: t2,
+			nothing: t3,
+			offeredTitle: t4,
+			rows: t5,
+			takeLabel: t6,
+			takeMark: t7,
+			takenTitle: t8,
+			...props
+		});
+		$[15] = props;
+		$[16] = t0;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+function _temp2$2(client_0) {
+	return client_0.id;
+}
+function _temp$2(client) {
+	return client.name;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Transfer, TransferProps } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Clients(props: Pick<TransferProps<Client>, \"palette\" | \"size\">): ReactElement {\n  const { t } = useWords(\"transfer\");\n\n  return (\n    <Transfer<Client>\n      giveBackLabel={t(\"giveBack\")}\n      giveBackMark={<ChevronLeftIcon size=\"100%\" />}\n      itemToString={(client) => client.name}\n      itemToValue={(client) => client.id}\n      mark={<CheckIcon size=\"100%\" />}\n      nothing={t(\"nothingHere\")}\n      offeredTitle={t(\"available\")}\n      rows={CLIENTS.map((id) => ({ id, name: t(id) }))}\n      takeLabel={t(\"take\")}\n      takeMark={<ChevronRightIcon size=\"100%\" />}\n      takenTitle={t(\"chosen\")}\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/transfer/examples/described.example.tsx
+var described_example_exports = /* @__PURE__ */ __exportAll({
+	Described: () => Described,
+	source: () => source$1
+});
+const CLIENTS$1 = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Described() {
+	const $ = c(23);
+	const { t } = useWords("transfer");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["lantern"];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("giveBack");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "100%" });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t) {
+		t4 = t("nothingHere");
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("available");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t) {
+		t6 = CLIENTS$1.map((id) => ({
+			id,
+			name: t(id),
+			terms: t(`${id}Of`)
+		}));
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("take");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "100%" });
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t) {
+		t9 = t("chosen");
+		$[14] = t;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t1 || $[17] !== t4 || $[18] !== t5 || $[19] !== t6 || $[20] !== t7 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Transfer, {
+			defaultValue: t0,
+			description: _temp$1,
+			giveBackLabel: t1,
+			giveBackMark: t2,
+			itemToString: _temp2$1,
+			itemToValue: _temp3,
+			mark: t3,
+			nothing: t4,
+			offeredTitle: t5,
+			rows: t6,
+			takeLabel: t7,
+			takeMark: t8,
+			takenTitle: t9
+		});
+		$[16] = t1;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	return t10;
+}
+function _temp3(client_1) {
+	return client_1.id;
+}
+function _temp2$1(client_0) {
+	return client_0.name;
+}
+function _temp$1(client) {
+	return client.terms;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Transfer } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n  readonly terms: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Described(): ReactElement {\n  const { t } = useWords(\"transfer\");\n\n  return (\n    <Transfer<Client>\n      defaultValue={[\"lantern\"]}\n      description={(client) => client.terms}\n      giveBackLabel={t(\"giveBack\")}\n      giveBackMark={<ChevronLeftIcon size=\"100%\" />}\n      itemToString={(client) => client.name}\n      itemToValue={(client) => client.id}\n      mark={<CheckIcon size=\"100%\" />}\n      nothing={t(\"nothingHere\")}\n      offeredTitle={t(\"available\")}\n      rows={CLIENTS.map((id) => ({ id, name: t(id), terms: t(`${id}Of`) }))}\n      takeLabel={t(\"take\")}\n      takeMark={<ChevronRightIcon size=\"100%\" />}\n      takenTitle={t(\"chosen\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/transfer/examples/held.example.tsx
+var held_example_exports = /* @__PURE__ */ __exportAll({
+	Held: () => Held,
+	source: () => source
+});
+const CLIENTS = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Held() {
+	const $ = c(32);
+	const { t } = useWords("transfer");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["fathom"];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [taken, setTaken] = useState(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("giveBack");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "100%" });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t) {
+		t4 = t("nothingHere");
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("available");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t) {
+		t6 = CLIENTS.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("take");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "100%" });
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t) {
+		t9 = t("chosen");
+		$[14] = t;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t1 || $[17] !== t4 || $[18] !== t5 || $[19] !== t6 || $[20] !== t7 || $[21] !== t9 || $[22] !== taken) {
+		t10 = /* @__PURE__ */ jsx(Transfer, {
+			giveBackLabel: t1,
+			giveBackMark: t2,
+			itemToString: _temp,
+			itemToValue: _temp2,
+			mark: t3,
+			nothing: t4,
+			offeredTitle: t5,
+			onValueChange: setTaken,
+			rows: t6,
+			takeLabel: t7,
+			takeMark: t8,
+			takenTitle: t9,
+			value: taken
+		});
+		$[16] = t1;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t9;
+		$[22] = taken;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t || $[25] !== taken) {
+		t11 = taken.length === 0 ? t("nothing") : taken.map((id_0) => t(id_0)).join(", ");
+		$[24] = t;
+		$[25] = taken;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Text, {
+			"aria-live": "polite",
+			children: t11
+		});
+		$[27] = t11;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== t10 || $[30] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t10, t12]
+		});
+		$[29] = t10;
+		$[30] = t12;
+		$[31] = t13;
+	} else t13 = $[31];
+	return t13;
+}
+function _temp2(client_0) {
+	return client_0.id;
+}
+function _temp(client) {
+	return client.name;
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Transfer } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Held(): ReactElement {\n  const { t } = useWords(\"transfer\");\n  const [taken, setTaken] = useState<readonly string[]>([\"fathom\"]);\n\n  return (\n    <Stack gap=\"md\">\n      <Transfer<Client>\n        giveBackLabel={t(\"giveBack\")}\n        giveBackMark={<ChevronLeftIcon size=\"100%\" />}\n        itemToString={(client) => client.name}\n        itemToValue={(client) => client.id}\n        mark={<CheckIcon size=\"100%\" />}\n        nothing={t(\"nothingHere\")}\n        offeredTitle={t(\"available\")}\n        onValueChange={setTaken}\n        rows={CLIENTS.map((id) => ({ id, name: t(id) }))}\n        takeLabel={t(\"take\")}\n        takeMark={<ChevronRightIcon size=\"100%\" />}\n        takenTitle={t(\"chosen\")}\n        value={taken}\n      />\n      <Text aria-live=\"polite\">\n        {taken.length === 0 ? t(\"nothing\") : taken.map((id) => t(id)).join(\", \")}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/transfer/transfer.specimen.tsx
+/**
+* Catalogue page for the transfer.
+*
+* @remarks
+*   `scenesOf` generates the size and palette scenes from the clients example. The palette scene
+*   checks the first row after it mounts, so the palette shows in a still image. The described and
+*   held scenes are hand-written. Every transfer renders in an `lg` room, and every scene shows its
+*   example file as its source. The words are keys under `transfer` in
+*   `locales/en/specimen/transfer.json`.
+*/
+/**
+* Renders a transfer and checks its first row after it mounts.
+*
+* @remarks
+*   The staging clicks the row only while it is unchecked, so a second run of the effect leaves it
+*   checked. The staging never appears in an example.
+*/
+function Picked(t0) {
+	const $ = c(5);
+	const { children } = t0;
+	const [box, setBox] = useState(null);
+	let t1;
+	let t2;
+	if ($[0] !== box) {
+		t1 = () => {
+			const first = box?.querySelector("[role=option]");
+			if (first !== void 0 && first !== null && first.getAttribute("aria-selected") !== "true") first.click();
+		};
+		t2 = [box];
+		$[0] = box;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== children) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref: setBox,
+			children
+		});
+		$[3] = children;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+/**
+* Hand-written scene for rows with a second line.
+*/
+const described = {
+	about: "transfer.described.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Described, {})
+	}),
+	example: described_example_exports,
+	title: "transfer.described.title"
+};
+/**
+* Hand-written scene for a set the page controls.
+*/
+const held = {
+	about: "transfer.held.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Held, {})
+	}),
+	example: held_example_exports,
+	title: "transfer.held.title"
+};
+var transfer_specimen_default = specimen({
+	about: "transfer.about",
+	id: "components/collections/transfer",
+	imports: "import { Transfer } from \"@stealthscale/component-collections\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				palette: {
+					draw: (props) => /* @__PURE__ */ jsx(Room, {
+						size: "lg",
+						children: /* @__PURE__ */ jsx(Picked, { children: /* @__PURE__ */ jsx(Clients, { ...props }) })
+					}),
+					example: clients_example_exports
+				},
+				size: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "lg",
+				children: /* @__PURE__ */ jsx(Clients, { ...props })
+			}),
+			example: clients_example_exports,
+			namespace: "transfer",
+			order: ["size", "palette"]
+		}),
+		described,
+		held
+	],
+	title: "transfer.title"
+});
+//#endregion
+export { transfer_specimen_default as default, described, held };

package/dist/pages/transfer/transfer.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"TransferProps": {"conditions": 0, "foreign": 0}};
+export const parts = {"TransferProps": [{"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "Values of the moved rows on first render, when `value` is not set."}, {"accepts": "((row: Row) => ReactNode)", "fallback": "", "kind": "option", "name": "description", "refers": ["kit.Row"], "required": false, "says": "Returns a row's second line."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "giveBackLabel", "refers": [], "required": true, "says": "Accessible name of the control that moves checked rows back."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "giveBackMark", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Content of the control that moves checked rows back."}, {"accepts": "(row: Row) => string", "fallback": "", "kind": "option", "name": "itemToString", "refers": ["kit.Row"], "required": true, "says": "Returns a row's text."}, {"accepts": "(row: Row) => string", "fallback": "", "kind": "option", "name": "itemToValue", "refers": ["kit.Row"], "required": true, "says": "Returns a row's value."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "mark", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Mark of a checked row's checkbox."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "nothing", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Content rendered on a side with no rows."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "offeredTitle", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Label of the list rows are moved from."}, {"accepts": "((taken: readonly string[]) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": [], "required": false, "says": "Called with the values of the moved rows after each move."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "option", "name": "palette", "refers": [], "required": false, "says": "Palette the checkboxes and fills of both lists read."}, {"accepts": "readonly Row[]", "fallback": "", "kind": "option", "name": "rows", "refers": ["kit.Row"], "required": true, "says": "Every row, on either side."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "option", "name": "size", "refers": [], "required": false, "says": "Size of the gap between the parts and of the controls."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "takeLabel", "refers": [], "required": true, "says": "Accessible name of the control that moves checked rows across."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "takeMark", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Content of the control that moves checked rows across."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "takenTitle", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Label of the list rows are moved to."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "Values of the moved rows, when the caller controls them."}]};
+export const shapes = {"react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}]};