@stealthscale/component-collections 0.1.1 → 0.1.3

package/dist/pages/data-list/data-list.js

@@ -0,0 +1,351 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { $ as Root, et as Item, nt as ItemLabel, tt as ItemValue } from "../../shared-DVn824MJ.js";
+import { f as recipe } from "../../recipes-C1oaF8pO.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ButtonPropsProvider, IconButton } from "@stealthscale/component-actions";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { createPortal } from "react-dom";
+import { InfoIcon } from "lucide-react";
+import { Popover } from "@stealthscale/component-disclosure";
+import { Badge, Status } from "@stealthscale/component-data";
+import { Code, Span } from "@stealthscale/component-typography";
+//#region src/data-list/examples/noted.example.tsx
+var noted_example_exports = /* @__PURE__ */ __exportAll({
+	Noted: () => Noted,
+	source: () => source$2
+});
+const NOTES = ["net", "window"];
+function Noted() {
+	const $ = c(4);
+	const { t } = useWords("data-list");
+	let t0;
+	if ($[0] !== t) {
+		t0 = NOTES.map((note) => /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsxs(ItemLabel, { children: [t(`${note}.label`), /* @__PURE__ */ jsxs(Popover.Root, {
+			size: "xs",
+			children: [/* @__PURE__ */ jsx(ButtonPropsProvider, {
+				value: {
+					size: "xs",
+					variant: "ghost"
+				},
+				children: /* @__PURE__ */ jsx(Popover.Trigger, {
+					"aria-label": t(`${note}.explain`),
+					as: IconButton,
+					children: /* @__PURE__ */ jsx(InfoIcon, { size: "1em" })
+				})
+			}), createPortal(/* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(Popover.Description, { children: t(`${note}.note`) }) }) }), document.body)]
+		})] }), /* @__PURE__ */ jsx(ItemValue, { children: t(`${note}.value`) })] }, note));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Root, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$2 = "import { type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { InfoIcon } from \"lucide-react\";\n\nimport { ButtonPropsProvider, IconButton } from \"@stealthscale/component-actions\";\nimport { Popover } from \"@stealthscale/component-disclosure\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\n\nconst NOTES = [\"net\", \"window\"] as const;\n\nexport function Noted(): ReactElement {\n  const { t } = useWords(\"data-list\");\n\n  return (\n    <DataList.Root>\n      {NOTES.map((note) => (\n        <DataList.Item key={note}>\n          <DataList.ItemLabel>\n            {t(`${note}.label`)}\n            <Popover.Root size=\"xs\">\n              <ButtonPropsProvider value={{ size: \"xs\", variant: \"ghost\" }}>\n                <Popover.Trigger aria-label={t(`${note}.explain`)} as={IconButton}>\n                  <InfoIcon size=\"1em\" />\n                </Popover.Trigger>\n              </ButtonPropsProvider>\n              {createPortal(\n                <Popover.Positioner>\n                  <Popover.Content>\n                    <Popover.Description>{t(`${note}.note`)}</Popover.Description>\n                  </Popover.Content>\n                </Popover.Positioner>,\n                document.body,\n              )}\n            </Popover.Root>\n          </DataList.ItemLabel>\n          <DataList.ItemValue>{t(`${note}.value`)}</DataList.ItemValue>\n        </DataList.Item>\n      ))}\n    </DataList.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-list/examples/payout.example.tsx
+var payout_example_exports = /* @__PURE__ */ __exportAll({
+	Payout: () => Payout,
+	source: () => source$1
+});
+const FIELDS = [
+	"account",
+	"raised",
+	"amount"
+];
+function Payout(props) {
+	const $ = c(17);
+	const { t } = useWords("data-list");
+	let t0;
+	if ($[0] !== t) {
+		t0 = FIELDS.map((field) => /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(ItemLabel, { children: t(`${field}.label`) }), /* @__PURE__ */ jsx(ItemValue, { children: t(`${field}.value`) })] }, field));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("state");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ItemLabel, { children: t1 });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("settled");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ItemValue, { children: /* @__PURE__ */ jsx(Badge, {
+			palette: "success",
+			children: t3
+		}) });
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Item, { children: [t2, t4] });
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== props || $[14] !== t0 || $[15] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [t0, t5]
+		});
+		$[13] = props;
+		$[14] = t0;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { Badge } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\n\nconst FIELDS = [\"account\", \"raised\", \"amount\"] as const;\n\nexport function Payout(props: DataList.RootProps): ReactElement {\n  const { t } = useWords(\"data-list\");\n\n  return (\n    <DataList.Root {...props}>\n      {FIELDS.map((field) => (\n        <DataList.Item key={field}>\n          <DataList.ItemLabel>{t(`${field}.label`)}</DataList.ItemLabel>\n          <DataList.ItemValue>{t(`${field}.value`)}</DataList.ItemValue>\n        </DataList.Item>\n      ))}\n      <DataList.Item>\n        <DataList.ItemLabel>{t(\"state\")}</DataList.ItemLabel>\n        <DataList.ItemValue>\n          <Badge palette=\"success\">{t(\"settled\")}</Badge>\n        </DataList.ItemValue>\n      </DataList.Item>\n    </DataList.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-list/examples/run.example.tsx
+var run_example_exports = /* @__PURE__ */ __exportAll({
+	Run: () => Run,
+	source: () => source
+});
+function Run() {
+	const $ = c(51);
+	const { t } = useWords("data-list");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("run.status");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(ItemLabel, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Status.Indicator, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("run.passed");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ItemValue, { children: /* @__PURE__ */ jsxs(Status.Root, {
+			palette: "success",
+			size: "inherit",
+			children: [t2, t3]
+		}) });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t1 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Item, { children: [t1, t4] });
+		$[9] = t1;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("run.branch");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ItemLabel, { children: t6 });
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ItemValue, { children: /* @__PURE__ */ jsx(Code, {
+			size: "sm",
+			children: "main"
+		}) });
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(Item, { children: [t7, t8] });
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("run.duration");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx(ItemLabel, { children: t10 });
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("run.took");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t) {
+		t13 = t("run.faster");
+		$[25] = t;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Span, {
+			tone: "muted",
+			children: t13
+		});
+		$[27] = t13;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t12 || $[30] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(ItemValue, { children: [t12, t14] });
+		$[29] = t12;
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t11 || $[33] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Item, { children: [t11, t15] });
+		$[32] = t11;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== t) {
+		t17 = t("run.artifact");
+		$[35] = t;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t17) {
+		t18 = /* @__PURE__ */ jsx(ItemLabel, { children: t17 });
+		$[37] = t17;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
+	if ($[39] !== t) {
+		t19 = t("run.urn");
+		$[39] = t;
+		$[40] = t19;
+	} else t19 = $[40];
+	let t20;
+	if ($[41] !== t19) {
+		t20 = /* @__PURE__ */ jsx(ItemValue, { children: t19 });
+		$[41] = t19;
+		$[42] = t20;
+	} else t20 = $[42];
+	let t21;
+	if ($[43] !== t18 || $[44] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(Item, { children: [t18, t20] });
+		$[43] = t18;
+		$[44] = t20;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t16 || $[47] !== t21 || $[48] !== t5 || $[49] !== t9) {
+		t22 = /* @__PURE__ */ jsxs(Root, {
+			orientation: "horizontal",
+			children: [
+				t5,
+				t9,
+				t16,
+				t21
+			]
+		});
+		$[46] = t16;
+		$[47] = t21;
+		$[48] = t5;
+		$[49] = t9;
+		$[50] = t22;
+	} else t22 = $[50];
+	return t22;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Status } from \"@stealthscale/component-data\";\nimport { Code, Span } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\n\nexport function Run(): ReactElement {\n  const { t } = useWords(\"data-list\");\n\n  return (\n    <DataList.Root orientation=\"horizontal\">\n      <DataList.Item>\n        <DataList.ItemLabel>{t(\"run.status\")}</DataList.ItemLabel>\n        <DataList.ItemValue>\n          <Status.Root palette=\"success\" size=\"inherit\">\n            <Status.Indicator />\n            {t(\"run.passed\")}\n          </Status.Root>\n        </DataList.ItemValue>\n      </DataList.Item>\n      <DataList.Item>\n        <DataList.ItemLabel>{t(\"run.branch\")}</DataList.ItemLabel>\n        <DataList.ItemValue>\n          <Code size=\"sm\">main</Code>\n        </DataList.ItemValue>\n      </DataList.Item>\n      <DataList.Item>\n        <DataList.ItemLabel>{t(\"run.duration\")}</DataList.ItemLabel>\n        <DataList.ItemValue>\n          {t(\"run.took\")}\n          <Span tone=\"muted\">{t(\"run.faster\")}</Span>\n        </DataList.ItemValue>\n      </DataList.Item>\n      <DataList.Item>\n        <DataList.ItemLabel>{t(\"run.artifact\")}</DataList.ItemLabel>\n        <DataList.ItemValue>{t(\"run.urn\")}</DataList.ItemValue>\n      </DataList.Item>\n    </DataList.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-list/data-list.specimen.tsx
+/**
+* Catalogue page for the data list.
+*
+* @remarks
+*   `scenesOf` generates the orientation, variant, size and divided scenes from the recipe, each
+*   rendering the payout example in a room as wide as an aside. Two hand-written scenes render
+*   values that are components and a note beside a label. The words are keys under `data-list` in
+*   `locales/en/specimen/data-list.json`.
+*/
+/**
+* Hand-written scene for values that are components.
+*/
+const components = {
+	about: "data-list.components.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Run, {})
+	}),
+	example: run_example_exports,
+	title: "data-list.components.title"
+};
+/**
+* Hand-written scene for a note beside a label.
+*/
+const notes = {
+	about: "data-list.notes.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Noted, {})
+	}),
+	example: noted_example_exports,
+	title: "data-list.notes.title"
+};
+var data_list_specimen_default = specimen({
+	about: "data-list.about",
+	id: "components/collections/data-list",
+	imports: "import { DataList } from \"@stealthscale/component-collections\";",
+	scenes: [
+		...scenesOf(recipe, {
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "xs",
+				children: /* @__PURE__ */ jsx(Payout, { ...props })
+			}),
+			example: payout_example_exports,
+			namespace: "data-list",
+			order: [
+				"orientation",
+				"variant",
+				"size",
+				"divided"
+			]
+		}),
+		components,
+		notes
+	],
+	title: "data-list.title"
+});
+//#endregion
+export { components, data_list_specimen_default as default, notes };

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

@@ -0,0 +1,3 @@
+export const dropped = {"ItemLabelProps": {"conditions": 284, "foreign": 1041}, "ItemValueProps": {"conditions": 284, "foreign": 1041}, "ItemProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"ItemLabelProps": [], "ItemValueProps": [], "ItemProps": [], "RootProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "divided", "refers": [], "required": false, "says": "Whether a hairline separates each item from the one before it."}, {"accepts": "\"horizontal\" | \"vertical\"", "fallback": "", "kind": "variant", "name": "orientation", "refers": [], "required": false, "says": "Which way a label and its value run: the label above the value, or beside it."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "The text style of the items, one size smaller than the list, and the gaps between them."}, {"accepts": "\"bold\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Which of the pair is louder."}]};
+export const shapes = {};