@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/switcher/switcher.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ActionProps": {"conditions": 284, "foreign": 1044}, "DetailProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "LabelProps": {"conditions": 284, "foreign": 1041}, "MarkProps": {"conditions": 284, "foreign": 1041}, "NameProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1063}, "TriggerProps": {"conditions": 284, "foreign": 1051}};
+export const parts = {"ActionProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "icon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Mark before the words."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "Value the menu identifies the row by. A generated one when absent."}], "DetailProps": [], "IndicatorProps": [], "LabelProps": [], "MarkProps": [], "NameProps": [], "RootProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "checkIcon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Glyph that marks the current choice's row in the menu."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "Value of the choice that is current at first, when the caller does not control it. Defaults to the first choice."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "Highlight", "fallback": "", "kind": "variant", "name": "highlight", "refers": ["kit.Highlight"], "required": false, "says": "Look of the highlighted row."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "indicator", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Glyph at the end of the trigger."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "inset", "refers": [], "required": false, "says": "Whether a row without a leading icon or mark starts its text after the gutter an icon takes, for a menu where some rows lead with an icon."}, {"accepts": "readonly Choice[]", "fallback": "", "kind": "option", "name": "items", "refers": ["kit.Choice", "react.ReactElement", "react.ReactPortal"], "required": false, "says": "The choices. With them the root renders the trigger and the menu."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Kind of thing the switcher switches, which a screen reader announces before the current name. Used with `items`."}, {"accepts": "((value: string) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": [], "required": false, "says": "Called with the value of the choice the reader switches to."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "The palette of the look and the mark."}, {"accepts": "Placement", "fallback": "", "kind": "option", "name": "placement", "refers": ["kit.Placement"], "required": false, "says": "Where the switcher renders. Read from the sidebar or the toolbar around it when absent."}, {"accepts": "SwitcherSize", "fallback": "", "kind": "option", "name": "size", "refers": ["kit.SwitcherSize"], "required": false, "says": "Size of the switcher. The sidebar's or the toolbar's size when absent, and `md` alone."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "Value of the current choice, when the caller controls it."}, {"accepts": "Look", "fallback": "", "kind": "variant", "name": "variant", "refers": ["kit.Look"], "required": false, "says": "The button's six looks, each one of the theme's layer styles."}], "TriggerProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Kind of thing the control switches: `Workspace`, `Project`, `Environment`. A screen reader announces it before the current name."}]};
+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.Choice": [{"accepts": "string", "name": "detail", "says": "Plan, role or region, rendered under the name in a sidebar and in the menu's row."}, {"accepts": "boolean", "name": "disabled", "says": "Whether the reader cannot switch to the choice."}, {"accepts": "string", "name": "href", "says": "Address of the choice's own page, which renders its row as a link."}, {"accepts": "string", "name": "label", "says": "Name of the choice."}, {"accepts": "ReactNode", "name": "mark", "says": "Logo or avatar. The mark shows the name's initials without one."}, {"accepts": "string", "name": "value", "says": "Value the application knows the choice by."}], "kit.Placement": [{"accepts": "", "name": "\"alone\"", "says": ""}, {"accepts": "", "name": "\"sidebar\"", "says": ""}, {"accepts": "", "name": "\"toolbar\"", "says": ""}], "kit.SwitcherSize": [{"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}], "kit.Highlight": [{"accepts": "", "name": "\"bar\"", "says": ""}, {"accepts": "", "name": "\"fill\"", "says": ""}, {"accepts": "", "name": "\"tint\"", "says": ""}], "kit.Look": [{"accepts": "", "name": "\"ghost\"", "says": ""}, {"accepts": "", "name": "\"outline\"", "says": ""}, {"accepts": "", "name": "\"plain\"", "says": ""}, {"accepts": "", "name": "\"solid\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"surface\"", "says": ""}]};

package/dist/pages/theme-switcher/theme-switcher.js

@@ -0,0 +1,180 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as Start, c as Root, d as End, t as ThemeSwitcher } from "../../shared-DxlFabHA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Matrix, Sample, specimen, useWords } from "@stealthscale/specimen";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+//#region src/theme-switcher/examples/bar.example.tsx
+var bar_example_exports = /* @__PURE__ */ __exportAll({
+	Bar: () => Bar,
+	source: () => source$1
+});
+function Bar() {
+	const $ = c(16);
+	const { t } = useWords("theme-switcher");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("application");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("product");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Start, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: "sm",
+			weight: "semibold",
+			children: t1
+		}) });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CheckIcon, { size: "1em" });
+		t4 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("label");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(End, { children: /* @__PURE__ */ jsx(ThemeSwitcher, {
+			checkIcon: t3,
+			indicator: t4,
+			label: t5
+		}) });
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t0 || $[13] !== t2 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			"aria-label": t0,
+			size: "sm",
+			children: [t2, t6]
+		});
+		$[12] = t0;
+		$[13] = t2;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-react\";\n\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ThemeSwitcher, Toolbar } from \"@stealthscale/component-screen\";\n\nexport function Bar(): ReactElement {\n  const { t } = useWords(\"theme-switcher\");\n\n  return (\n    <Toolbar.Root aria-label={t(\"application\")} size=\"sm\">\n      <Toolbar.Start>\n        <Text as=\"span\" size=\"sm\" weight=\"semibold\">\n          {t(\"product\")}\n        </Text>\n      </Toolbar.Start>\n      <Toolbar.End>\n        <ThemeSwitcher\n          checkIcon={<CheckIcon size=\"1em\" />}\n          indicator={<ChevronsUpDownIcon size=\"1em\" />}\n          label={t(\"label\")}\n        />\n      </Toolbar.End>\n    </Toolbar.Root>\n  );\n}\n";
+//#endregion
+//#region src/theme-switcher/examples/looks.example.tsx
+var looks_example_exports = /* @__PURE__ */ __exportAll({
+	Looks: () => Looks,
+	source: () => source
+});
+function Looks(props) {
+	const $ = c(7);
+	const { t } = useWords("theme-switcher");
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(CheckIcon, { size: "1em" });
+		t1 = /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: "1em" });
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("label");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== props || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ThemeSwitcher, {
+			checkIcon: t0,
+			indicator: t1,
+			label: t2,
+			...props
+		});
+		$[4] = props;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ThemeSwitcher, ThemeSwitcherProps } from \"@stealthscale/component-screen\";\n\nexport function Looks(props: Partial<ThemeSwitcherProps>): ReactElement {\n  const { t } = useWords(\"theme-switcher\");\n\n  return (\n    <ThemeSwitcher\n      checkIcon={<CheckIcon size=\"1em\" />}\n      indicator={<ChevronsUpDownIcon size=\"1em\" />}\n      label={t(\"label\")}\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/theme-switcher/theme-switcher.specimen.tsx
+/**
+* Catalogue page for the theme switcher.
+*
+* @remarks
+*   The switcher has no recipe of its own: it renders `Switcher.Root`, so every scene is
+*   hand-written. Each switcher changes the catalogue's own theme, because the catalogue renders
+*   inside a shell that offers ten themes. The toolbar scene shows the switcher at the end of an
+*   application's bar, and the looks scene turns the switcher's `variant`. The examples come
+*   through their barrel, and the switcher's own barrel is imported as a type, so the props band
+*   reads the switcher alone and not the toolbar an example renders it in. The words are keys under
+*   `theme-switcher` in `locales/en/specimen/theme-switcher.json`.
+*/
+/**
+* Looks of the looks scene: the switcher's looks for a control in a bar, in reading order.
+*/
+const LOOKS = [
+	"ghost",
+	"outline",
+	"subtle",
+	"surface"
+];
+/**
+* Hand-written scene for the switcher at the end of an application's bar.
+*/
+const inToolbar = {
+	about: "theme-switcher.toolbar.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, {
+		place: "stretch",
+		variant: "outline",
+		children: /* @__PURE__ */ jsx(Bar, {})
+	}),
+	example: bar_example_exports,
+	title: "theme-switcher.toolbar.title"
+};
+/**
+* Hand-written scene for the looks the switcher takes from `Switcher.Root`.
+*/
+const looked = {
+	about: "theme-switcher.looks.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "variant",
+		of: LOOKS,
+		children: (variant) => /* @__PURE__ */ jsx(Looks, { variant })
+	}),
+	example: looks_example_exports,
+	props: { variant: "ghost" },
+	title: "theme-switcher.looks.title"
+};
+var theme_switcher_specimen_default = specimen({
+	about: "theme-switcher.about",
+	id: "components/screen/theme-switcher",
+	imports: "import { ThemeSwitcher } from \"@stealthscale/component-screen/shell\";",
+	scenes: [inToolbar, looked],
+	title: "theme-switcher.title"
+});
+//#endregion
+export { theme_switcher_specimen_default as default, inToolbar, looked };

package/dist/pages/theme-switcher/theme-switcher.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ThemeSwitcherProps": {"conditions": 284, "foreign": 1063}};
+export const parts = {"ThemeSwitcherProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "checkIcon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Glyph that marks the current choice's row in the menu."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "Highlight", "fallback": "", "kind": "variant", "name": "highlight", "refers": ["kit.Highlight"], "required": false, "says": "Look of the highlighted row."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "indicator", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Glyph at the end of the trigger."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "inset", "refers": [], "required": false, "says": "Whether a row without a leading icon or mark starts its text after the gutter an icon takes, for a menu where some rows lead with an icon."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Name of the control, which a screen reader announces before the current theme. \"Theme\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "The palette of the look and the mark."}, {"accepts": "Placement", "fallback": "", "kind": "option", "name": "placement", "refers": ["kit.Placement"], "required": false, "says": "Where the switcher renders. Read from the sidebar or the toolbar around it when absent."}, {"accepts": "SwitcherSize", "fallback": "", "kind": "option", "name": "size", "refers": ["kit.SwitcherSize"], "required": false, "says": "Size of the switcher. The sidebar's or the toolbar's size when absent, and `md` alone."}, {"accepts": "Look", "fallback": "", "kind": "variant", "name": "variant", "refers": ["kit.Look"], "required": false, "says": "The button's six looks, each one of the theme's layer styles."}]};
+export const shapes = {"kit.Highlight": [{"accepts": "", "name": "\"bar\"", "says": ""}, {"accepts": "", "name": "\"fill\"", "says": ""}, {"accepts": "", "name": "\"tint\"", "says": ""}], "kit.Look": [{"accepts": "", "name": "\"ghost\"", "says": ""}, {"accepts": "", "name": "\"outline\"", "says": ""}, {"accepts": "", "name": "\"plain\"", "says": ""}, {"accepts": "", "name": "\"solid\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"surface\"", "says": ""}], "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.Placement": [{"accepts": "", "name": "\"alone\"", "says": ""}, {"accepts": "", "name": "\"sidebar\"", "says": ""}, {"accepts": "", "name": "\"toolbar\"", "says": ""}], "kit.SwitcherSize": [{"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}]};