@stealthscale/component-collections 0.1.2 → 0.1.3

package/dist/pages/status-matrix/status-matrix.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"StatusMatrixProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"StatusMatrixProps": [{"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Vertical alignment of a cell's content in a row taller than one line."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "banded", "refers": [], "required": false, "says": "Whether the column names render on `bg.subtle`, in capitals, tracked out."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "caption", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Caption rendered under the grid, and the accessible name of the table and the scroller."}, {"accepts": "((state: MatrixState, row: MatrixHeading, column: MatrixHeading) => string)", "fallback": "", "kind": "option", "name": "cellLabel", "refers": ["kit.MatrixHeading", "kit.MatrixState", "kit.MatrixTone", "react.ReactElement", "react.ReactPortal"], "required": false, "says": "Returns a crossing's accessible name. Defaults to the state's label. A matrix with `onSelectCell` needs it, because every button in a column would otherwise share one name."}, {"accepts": "readonly MatrixCell[]", "fallback": "", "kind": "option", "name": "cells", "refers": ["kit.MatrixCell"], "required": true, "says": "Measured crossings. A pair without a cell renders `unmeasured`, and the later of two cells for one pair applies."}, {"accepts": "readonly MatrixHeading[]", "fallback": "", "kind": "option", "name": "columns", "refers": ["kit.MatrixHeading"], "required": true, "says": "Headings across the top."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "corner", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Content of the header cell over the row names."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "empty", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Content of a full-width row rendered while `rows` is empty."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "focusable", "refers": [], "required": false, "says": "Whether the viewport is a region with a tab stop while the table overflows. `false` keeps it out of the tab order, for a table whose cells take focus. `true` unless stated."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "interactive", "refers": [], "required": false, "says": "Whether a body row fills under the pointer and while a control inside it has focus."}, {"accepts": "\"auto\" | \"fixed\"", "fallback": "", "kind": "variant", "name": "layout", "refers": [], "required": false, "says": "Column widths from the content, or from the column declarations and the first row."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "legend", "refers": [], "required": false, "says": "Accessible name of the legend. The legend renders only with it."}, {"accepts": "((row: string, column: string, cell: MatrixCell) => void)", "fallback": "", "kind": "option", "name": "onSelectCell", "refers": ["kit.MatrixCell"], "required": false, "says": "Called with the row, the column and the cell of a pressed crossing. The cell is undefined for a pair without one. Setting it renders every crossing as a button."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette the selected row and the interactive row fill read."}, {"accepts": "\"l1\" | \"l2\" | \"l3\"", "fallback": "", "kind": "variant", "name": "radius", "refers": [], "required": false, "says": "Corner radius of the scroller, from the layer radii without the pill, which clips the first and last rows."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "rollup", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Header of the last column, which renders each row's worst state. The column renders only with it."}, {"accepts": "readonly MatrixHeading[]", "fallback": "", "kind": "option", "name": "rows", "refers": ["kit.MatrixHeading"], "required": true, "says": "Headings down the side, one per row."}, {"accepts": "\"all\" | \"none\" | \"rows\"", "fallback": "", "kind": "variant", "name": "rules", "refers": [], "required": false, "says": "Where the body rules run: `rows` between rows, `all` between rows and between columns, and `none` nowhere. The rule under the header and the rule over the footer render in every value."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Text size and cell padding: cells read the body role at the size, and the column names and the caption read the label role one size smaller."}, {"accepts": "Readonly<Record<string, MatrixState>>", "fallback": "", "kind": "option", "name": "states", "refers": ["kit.MatrixState"], "required": true, "says": "Vocabulary of states, keyed by the names the cells use. Two states with one tone need a mark each, or they render alike."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "stickyColumn", "refers": [], "required": false, "says": "Whether the row headers and the first column header stick to the start of the scroll area's viewport."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "stickyHeader", "refers": [], "required": false, "says": "Whether the header rows stick to the top of the scroll area's viewport."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "striped", "refers": [], "required": false, "says": "Whether every odd body row renders on `bg.muted`."}, {"accepts": "MatrixState", "fallback": "", "kind": "option", "name": "unmeasured", "refers": ["kit.MatrixState"], "required": true, "says": "State of a pair without a cell, listed last in the legend."}, {"accepts": "\"plain\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Surface of the scroller: the panel inside a hairline edge, or transparent."}, {"accepts": "Ref<HTMLDivElement>", "fallback": "", "kind": "option", "name": "viewportRef", "refers": ["react.RefObject", "react.bivarianceHack"], "required": false, "says": "Ref of the scroll area's viewport, the element that scrolls."}]};
+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": ""}], "kit.MatrixState": [{"accepts": "string", "name": "label", "says": "Text of the state in the legend, and the accessible name of a crossing without `cellLabel`."}, {"accepts": "ReactNode", "name": "mark", "says": "Mark rendered in the cell. Defaults to a filled dot. Two states with one tone need a mark each, or they render alike."}, {"accepts": "MatrixTone", "name": "tone", "says": "Palette of the mark, and the rank the rollup reads."}], "kit.MatrixTone": [{"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"neutral\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}], "kit.MatrixHeading": [{"accepts": "string", "name": "group", "says": "Section a row is grouped under, as both its key and its heading. Read on rows only. Sections render only when every row has one."}, {"accepts": "string", "name": "id", "says": "Identifier of the row or the column in the cells."}, {"accepts": "ReactNode", "name": "label", "says": "Content of the row header or the column header."}], "kit.MatrixCell": [{"accepts": "string", "name": "column", "says": "Identifier of the column."}, {"accepts": "string", "name": "row", "says": "Identifier of the row."}, {"accepts": "string", "name": "state", "says": "Key of the state in the matrix's vocabulary."}], "react.RefObject": [{"accepts": "HTMLDivElement | null", "name": "current", "says": "The current value of the ref."}]};

package/dist/pages/swipe-actions/swipe-actions.js

@@ -0,0 +1,212 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { A as Action, D as Root, O as Content, k as Actions } from "../../shared-DVn824MJ.js";
+import { c } from "react/compiler-runtime";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@stealthscale/component-actions";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+import { flushSync } from "react-dom";
+import { ArchiveIcon, RotateCcwIcon, Trash2Icon } from "lucide-react";
+import { Span, Strong, Text } from "@stealthscale/component-typography";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/swipe-actions/examples/inbox.example.tsx
+var inbox_example_exports = /* @__PURE__ */ __exportAll({
+	Inbox: () => Inbox,
+	source: () => source
+});
+const SENDERS = [
+	"ada",
+	"bram",
+	"chen",
+	"dana"
+];
+function rowOf(sender, id, t, done) {
+	const name = t(`senders.${sender}`);
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Root, {
+		id,
+		children: [/* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(Strong, { children: name }), /* @__PURE__ */ jsx(Span, { children: t(`subjects.${sender}`) })]
+		}) }), /* @__PURE__ */ jsxs(Actions, { children: [/* @__PURE__ */ jsxs(Action, {
+			"aria-label": t("archiveOf", { sender: name }),
+			onClick: () => {
+				done(sender, "archived");
+			},
+			palette: "neutral",
+			children: [/* @__PURE__ */ jsx(ArchiveIcon, { size: "1em" }), t("archive")]
+		}), /* @__PURE__ */ jsxs(Action, {
+			"aria-label": t("deleteOf", { sender: name }),
+			onClick: () => {
+				done(sender, "deleted");
+			},
+			palette: "error",
+			children: [/* @__PURE__ */ jsx(Trash2Icon, { size: "1em" }), t("delete")]
+		})] })]
+	}) }, sender);
+}
+function Inbox() {
+	const $ = c(32);
+	const { t } = useWords("swipe-actions");
+	const base = useId();
+	const [open, setOpen] = useState(SENDERS);
+	const [said, setSaid] = useState("");
+	let t0;
+	if ($[0] !== base || $[1] !== open || $[2] !== t) {
+		t0 = (sender, verb) => {
+			const at = open.indexOf(sender);
+			const next = open[at + 1] ?? open[at - 1] ?? "restore";
+			flushSync(() => {
+				setOpen((was) => was.filter((each) => each !== sender));
+				setSaid(t(verb, { sender: t(`senders.${sender}`) }));
+			});
+			document.querySelector(`[id="${base}${next}"]`)?.focus();
+		};
+		$[0] = base;
+		$[1] = open;
+		$[2] = t;
+		$[3] = t0;
+	} else t0 = $[3];
+	const done = t0;
+	let t1;
+	if ($[4] !== t) {
+		t1 = t("label");
+		$[4] = t;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== base || $[7] !== done || $[8] !== open || $[9] !== t) {
+		let t3;
+		if ($[11] !== base || $[12] !== done || $[13] !== t) {
+			t3 = (sender_0) => rowOf(sender_0, `${base}${sender_0}`, t, done);
+			$[11] = base;
+			$[12] = done;
+			$[13] = t;
+			$[14] = t3;
+		} else t3 = $[14];
+		t2 = open.map(t3);
+		$[6] = base;
+		$[7] = done;
+		$[8] = open;
+		$[9] = t;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[15] !== t1 || $[16] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stack, {
+			"aria-label": t1,
+			as: "ul",
+			gap: "xs",
+			children: t2
+		});
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	let t4;
+	if ($[18] !== said) {
+		t4 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			children: said
+		});
+		$[18] = said;
+		$[19] = t4;
+	} else t4 = $[19];
+	const t5 = open.length === SENDERS.length || void 0;
+	const t6 = `${base}restore`;
+	let t7;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			setOpen(SENDERS);
+		};
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(RotateCcwIcon, { size: "1em" });
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t) {
+		t9 = t("restore");
+		$[22] = t;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t5 || $[25] !== t6 || $[26] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Button, {
+			"aria-disabled": t5,
+			id: t6,
+			onClick: t7,
+			size: "sm",
+			variant: "outline",
+			children: [t8, t9]
+		});
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== t10 || $[29] !== t3 || $[30] !== t4) {
+		t11 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [
+				t3,
+				t4,
+				t10
+			]
+		});
+		$[28] = t10;
+		$[29] = t3;
+		$[30] = t4;
+		$[31] = t11;
+	} else t11 = $[31];
+	return t11;
+}
+const source = "import { type ReactElement, useId, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\n\nimport { ArchiveIcon, RotateCcwIcon, Trash2Icon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Span, Strong, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SwipeActions } from \"@stealthscale/component-collections\";\n\nconst SENDERS = [\"ada\", \"bram\", \"chen\", \"dana\"];\n\ntype Done = (sender: string, verb: \"archived\" | \"deleted\") => void;\n\nfunction rowOf(\n  sender: string,\n  id: string,\n  t: ReturnType<typeof useWords>[\"t\"],\n  done: Done,\n): ReactElement {\n  const name = t(`senders.${sender}`);\n\n  return (\n    <li key={sender}>\n      <SwipeActions.Root id={id}>\n        <SwipeActions.Content>\n          <Stack gap=\"xs\">\n            <Strong>{name}</Strong>\n            <Span>{t(`subjects.${sender}`)}</Span>\n          </Stack>\n        </SwipeActions.Content>\n        <SwipeActions.Actions>\n          <SwipeActions.Action\n            aria-label={t(\"archiveOf\", { sender: name })}\n            onClick={() => {\n              done(sender, \"archived\");\n            }}\n            palette=\"neutral\"\n          >\n            <ArchiveIcon size=\"1em\" />\n            {t(\"archive\")}\n          </SwipeActions.Action>\n          <SwipeActions.Action\n            aria-label={t(\"deleteOf\", { sender: name })}\n            onClick={() => {\n              done(sender, \"deleted\");\n            }}\n            palette=\"error\"\n          >\n            <Trash2Icon size=\"1em\" />\n            {t(\"delete\")}\n          </SwipeActions.Action>\n        </SwipeActions.Actions>\n      </SwipeActions.Root>\n    </li>\n  );\n}\n\nexport function Inbox(): ReactElement {\n  const { t } = useWords(\"swipe-actions\");\n  const base = useId();\n  const [open, setOpen] = useState(SENDERS);\n  const [said, setSaid] = useState(\"\");\n\n  const done: Done = (sender, verb) => {\n    const at = open.indexOf(sender);\n    const next = open[at + 1] ?? open[at - 1] ?? \"restore\";\n\n    flushSync(() => {\n      setOpen((was) => was.filter((each) => each !== sender));\n      setSaid(t(verb, { sender: t(`senders.${sender}`) }));\n    });\n    document.querySelector<HTMLElement>(`[id=\"${base}${next}\"]`)?.focus();\n  };\n\n  return (\n    <Stack gap=\"sm\">\n      <Stack aria-label={t(\"label\")} as=\"ul\" gap=\"xs\">\n        {open.map((sender) => rowOf(sender, `${base}${sender}`, t, done))}\n      </Stack>\n      <Text as=\"output\">{said}</Text>\n      <Button\n        aria-disabled={open.length === SENDERS.length || undefined}\n        id={`${base}restore`}\n        onClick={() => {\n          setOpen(SENDERS);\n        }}\n        size=\"sm\"\n        variant=\"outline\"\n      >\n        <RotateCcwIcon size=\"1em\" />\n        {t(\"restore\")}\n      </Button>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/swipe-actions/swipe-actions.specimen.tsx
+/**
+* Catalogue page for the swipe actions.
+*
+* @remarks
+*   Two hand-written scenes render the inbox example at a phone's width, left to right and right
+*   to left. The recipe has no axis, so no scene is generated. The words are keys under
+*   `swipe-actions` in `locales/en/specimen/swipe-actions.json`.
+*/
+/**
+* Hand-written scene for an inbox at a phone's width.
+*/
+const phone = {
+	about: "swipe-actions.inbox.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Inbox, {})
+	}),
+	example: inbox_example_exports,
+	title: "swipe-actions.inbox.title"
+};
+/**
+* Hand-written scene for the inbox laid out right to left.
+*/
+const rightToLeft = {
+	about: "swipe-actions.rtl.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx("div", {
+			dir: "rtl",
+			children: /* @__PURE__ */ jsx(Inbox, {})
+		})
+	}),
+	example: inbox_example_exports,
+	title: "swipe-actions.rtl.title"
+};
+var swipe_actions_specimen_default = specimen({
+	about: "swipe-actions.about",
+	id: "components/collections/swipe-actions",
+	imports: "import { SwipeActions } from \"@stealthscale/component-collections\";",
+	scenes: [phone, rightToLeft],
+	title: "swipe-actions.title"
+});
+//#endregion
+export { swipe_actions_specimen_default as default, phone, rightToLeft };

package/dist/pages/swipe-actions/swipe-actions.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ActionProps": {"conditions": 284, "foreign": 1051}, "ActionsProps": {"conditions": 284, "foreign": 1040}, "ContentProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1040}};
+export const parts = {"ActionProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ActionsProps": [], "ContentProps": [], "RootProps": []};
+export const shapes = {"kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}]};