@stealthscale/component-actions 0.2.2 → 0.2.3

package/dist/pages/toggle-group/toggle-group.js

@@ -0,0 +1,326 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { n as Root, r as Item } from "../../shared-Dv6Wx5nA.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Matrix, specimen, useWords } from "@stealthscale/specimen";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, ItalicIcon, StrikethroughIcon, UnderlineIcon } from "lucide-react";
+//#region src/toggle-group/examples/alignment.example.tsx
+var alignment_example_exports = /* @__PURE__ */ __exportAll({
+	Alignment: () => Alignment,
+	source: () => source$2
+});
+const ALIGNMENTS = [
+	{
+		Icon: AlignLeftIcon,
+		value: "left"
+	},
+	{
+		Icon: AlignCenterIcon,
+		value: "center"
+	},
+	{
+		Icon: AlignRightIcon,
+		value: "right"
+	}
+];
+function Alignment(props) {
+	const $ = c(9);
+	const { t } = useWords("toggle-group");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("align");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = ["left"];
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = ALIGNMENTS.map((t3) => {
+			const { Icon, value } = t3;
+			return /* @__PURE__ */ jsxs(Item, {
+				value,
+				children: [/* @__PURE__ */ jsx(Icon, { size: "1em" }), t(`alignments.${value}`)]
+			}, value);
+		});
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== props || $[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			defaultValue: t1,
+			deselectable: false,
+			variant: "outline",
+			...props,
+			children: t2
+		});
+		$[5] = props;
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ToggleGroup } from \"@stealthscale/component-actions\";\n\nconst ALIGNMENTS = [\n  { Icon: AlignLeftIcon, value: \"left\" },\n  { Icon: AlignCenterIcon, value: \"center\" },\n  { Icon: AlignRightIcon, value: \"right\" },\n] as const;\n\nexport function Alignment(props: ToggleGroup.RootProps): ReactElement {\n  const { t } = useWords(\"toggle-group\");\n\n  return (\n    <ToggleGroup.Root\n      aria-label={t(\"align\")}\n      defaultValue={[\"left\"]}\n      deselectable={false}\n      variant=\"outline\"\n      {...props}\n    >\n      {ALIGNMENTS.map(({ Icon, value }) => (\n        <ToggleGroup.Item key={value} value={value}>\n          <Icon size=\"1em\" />\n          {t(`alignments.${value}`)}\n        </ToggleGroup.Item>\n      ))}\n    </ToggleGroup.Root>\n  );\n}\n";
+//#endregion
+//#region src/toggle-group/examples/filters.example.tsx
+var filters_example_exports = /* @__PURE__ */ __exportAll({
+	Filters: () => Filters,
+	source: () => source$1
+});
+const STATUSES = [
+	"open",
+	"pending",
+	"paid",
+	"archived"
+];
+function Filters() {
+	const $ = c(8);
+	const { t } = useWords("toggle-group");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("show");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = ["open", "pending"];
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = STATUSES.map((status) => /* @__PURE__ */ jsx(Item, {
+			disabled: status === "archived",
+			value: status,
+			children: t(`statuses.${status}`)
+		}, status));
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t0 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			attached: false,
+			defaultValue: t1,
+			gap: "xs",
+			multiple: true,
+			palette: "neutral",
+			size: "sm",
+			variant: "ghost",
+			children: t2
+		});
+		$[5] = t0;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ToggleGroup } from \"@stealthscale/component-actions\";\n\nconst STATUSES = [\"open\", \"pending\", \"paid\", \"archived\"] as const;\n\nexport function Filters(): ReactElement {\n  const { t } = useWords(\"toggle-group\");\n\n  return (\n    <ToggleGroup.Root\n      aria-label={t(\"show\")}\n      attached={false}\n      defaultValue={[\"open\", \"pending\"]}\n      gap=\"xs\"\n      multiple\n      palette=\"neutral\"\n      size=\"sm\"\n      variant=\"ghost\"\n    >\n      {STATUSES.map((status) => (\n        <ToggleGroup.Item disabled={status === \"archived\"} key={status} value={status}>\n          {t(`statuses.${status}`)}\n        </ToggleGroup.Item>\n      ))}\n    </ToggleGroup.Root>\n  );\n}\n";
+//#endregion
+//#region src/toggle-group/examples/formatting.example.tsx
+var formatting_example_exports = /* @__PURE__ */ __exportAll({
+	Formatting: () => Formatting,
+	source: () => source
+});
+const STYLES = [
+	{
+		Icon: BoldIcon,
+		value: "bold"
+	},
+	{
+		Icon: ItalicIcon,
+		value: "italic"
+	},
+	{
+		Icon: UnderlineIcon,
+		value: "underline"
+	},
+	{
+		Icon: StrikethroughIcon,
+		value: "strikethrough"
+	}
+];
+function Formatting(props) {
+	const $ = c(9);
+	const { t } = useWords("toggle-group");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("style");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = ["bold", "italic"];
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = STYLES.map((t3) => {
+			const { Icon, value } = t3;
+			return /* @__PURE__ */ jsx(Item, {
+				"aria-label": t(`styles.${value}`),
+				shape: "square",
+				value,
+				children: /* @__PURE__ */ jsx(Icon, { size: "1em" })
+			}, value);
+		});
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== props || $[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			defaultValue: t1,
+			multiple: true,
+			variant: "outline",
+			...props,
+			children: t2
+		});
+		$[5] = props;
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { BoldIcon, ItalicIcon, StrikethroughIcon, UnderlineIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ToggleGroup } from \"@stealthscale/component-actions\";\n\nconst STYLES = [\n  { Icon: BoldIcon, value: \"bold\" },\n  { Icon: ItalicIcon, value: \"italic\" },\n  { Icon: UnderlineIcon, value: \"underline\" },\n  { Icon: StrikethroughIcon, value: \"strikethrough\" },\n] as const;\n\nexport function Formatting(props: ToggleGroup.RootProps): ReactElement {\n  const { t } = useWords(\"toggle-group\");\n\n  return (\n    <ToggleGroup.Root\n      aria-label={t(\"style\")}\n      defaultValue={[\"bold\", \"italic\"]}\n      multiple\n      variant=\"outline\"\n      {...props}\n    >\n      {STYLES.map(({ Icon, value }) => (\n        <ToggleGroup.Item\n          aria-label={t(`styles.${value}`)}\n          key={value}\n          shape=\"square\"\n          value={value}\n        >\n          <Icon size=\"1em\" />\n        </ToggleGroup.Item>\n      ))}\n    </ToggleGroup.Root>\n  );\n}\n";
+//#endregion
+//#region src/toggle-group/toggle-group.specimen.tsx
+/**
+* Catalogue page for the toggle group.
+*
+* @remarks
+*   The toggle group has no recipe of its own: the layout's `Group` lays the items out and the
+*   button's recipe draws them, so every scene is hand-written. The looks and sizes scenes turn the
+*   formatting example's `variant` and `size`. The single scene shows the alignment example, the
+*   orientation scene turns its `orientation`, the spaced scene shows filters with a gap and one
+*   filter disabled, and the states scene a disabled group. The words are keys under
+*   `toggle-group` in `locales/en/specimen/toggle-group.json`.
+*/
+/**
+* Props of the disabled scene's group.
+*/
+const DISABLED = { disabled: true };
+/**
+* Looks of the looks scene: the button's looks that show which icon items are on, in reading order.
+*
+* @remarks
+*   The solid look marks a pressed button with an inset shadow and a semibold label, and an icon
+*   has no label to set in bold, so the scene leaves it out.
+*/
+const LOOKS = [
+	"outline",
+	"subtle",
+	"surface",
+	"ghost",
+	"plain"
+];
+/**
+* Sizes of the sizes scene.
+*/
+const SIZES = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+/**
+* Orientations of the orientation scene.
+*/
+const ORIENTATIONS = ["horizontal", "vertical"];
+/**
+* Hand-written scene for every look of the items.
+*/
+const looks = {
+	about: "toggle-group.looks.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "variant",
+		of: LOOKS,
+		children: (variant) => /* @__PURE__ */ jsx(Formatting, { variant })
+	}),
+	example: formatting_example_exports,
+	props: { variant: "outline" },
+	title: "toggle-group.looks.title"
+};
+/**
+* Hand-written scene for every size of the items.
+*/
+const sizes = {
+	about: "toggle-group.sizes.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "size",
+		of: SIZES,
+		children: (size) => /* @__PURE__ */ jsx(Formatting, { size })
+	}),
+	example: formatting_example_exports,
+	props: { size: "xs" },
+	title: "toggle-group.sizes.title"
+};
+/**
+* Hand-written scene for a group that keeps one item on.
+*/
+const single = {
+	about: "toggle-group.single.about",
+	draw: () => /* @__PURE__ */ jsx(Alignment, {}),
+	example: alignment_example_exports,
+	title: "toggle-group.single.title"
+};
+/**
+* Hand-written scene for a group in a row and in a column.
+*/
+const orientation = {
+	about: "toggle-group.orientation.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "orientation",
+		of: ORIENTATIONS,
+		children: (way) => /* @__PURE__ */ jsx(Alignment, { orientation: way })
+	}),
+	example: alignment_example_exports,
+	props: { orientation: "horizontal" },
+	title: "toggle-group.orientation.title"
+};
+/**
+* Hand-written scene for spaced items, one of them disabled.
+*/
+const spaced = {
+	about: "toggle-group.spaced.about",
+	draw: Filters,
+	example: filters_example_exports,
+	title: "toggle-group.spaced.title"
+};
+/**
+* Hand-written scene for a disabled group.
+*/
+const states = {
+	about: "toggle-group.states.about",
+	draw: () => /* @__PURE__ */ jsx(Formatting, { ...DISABLED }),
+	example: formatting_example_exports,
+	props: { disabled: true },
+	title: "toggle-group.states.title"
+};
+var toggle_group_specimen_default = specimen({
+	about: "toggle-group.about",
+	id: "components/actions/toggle-group",
+	imports: "import { ToggleGroup } from \"@stealthscale/component-actions\";",
+	scenes: [
+		looks,
+		sizes,
+		single,
+		orientation,
+		spaced,
+		states
+	],
+	title: "toggle-group.title"
+});
+//#endregion
+export { toggle_group_specimen_default as default, looks, orientation, single, sizes, spaced, states };

package/dist/pages/toggle-group/toggle-group.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ItemProps": {"conditions": 284, "foreign": 1049}, "RootProps": {"conditions": 284, "foreign": 1037}};
+export const parts = {"ItemProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": ""}, {"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": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "RootProps": [{"accepts": "Align", "fallback": "", "kind": "variant", "name": "align", "refers": ["kit.Align"], "required": false, "says": "Cross-axis alignment of the children."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "attached", "refers": [], "required": false, "says": "Joins the children into one control."}, {"accepts": "string[]", "fallback": "", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "The initial selected value of the toggle group when rendered. Use when you don't need to control the selected value of the toggle group."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "deselectable", "refers": [], "required": false, "says": "Whether the toggle group allows empty selection. **Note:** This is ignored if `multiple` is `true`."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "dim", "refers": [], "required": false, "says": "Dims every child except a hovered, keyboard-focused or pressed one."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the toggle is disabled."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "gap", "refers": [], "required": false, "says": "Gap token between the children, from `xs` to `xl`."}, {"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": "boolean", "fallback": "", "kind": "variant", "name": "grow", "refers": [], "required": false, "says": "Makes the group full width and gives every child an equal share of it."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["toggle-group.ElementIds"], "required": false, "says": "The ids of the elements in the toggle. Useful for composition."}, {"accepts": "Justify", "fallback": "", "kind": "variant", "name": "justify", "refers": ["kit.Justify"], "required": false, "says": "Distribution of the space left over along the main axis."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "loopFocus", "refers": [], "required": false, "says": "Whether to loop focus inside the toggle group."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "multiple", "refers": [], "required": false, "says": "Whether to allow multiple toggles to be selected."}, {"accepts": "((details: ValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": ["toggle-group.ValueChangeDetails"], "required": false, "says": "Function to call when the toggle is clicked."}, {"accepts": "Orientation", "fallback": "\"horizontal\"", "kind": "option", "name": "orientation", "refers": ["types.Orientation"], "required": false, "says": "The orientation of the toggle group."}, {"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": "boolean", "fallback": "true", "kind": "option", "name": "rovingFocus", "refers": [], "required": false, "says": "Whether to use roving tab index to manage focus."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "string[]", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "The controlled selected value of the toggle group."}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}]};
+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": ""}], "kit.Align": [{"accepts": "", "name": "\"baseline\"", "says": ""}, {"accepts": "", "name": "\"flex-end\"", "says": ""}, {"accepts": "", "name": "\"flex-start\"", "says": ""}, {"accepts": "", "name": "\"stretch\"", "says": ""}], "kit.Justify": [{"accepts": "", "name": "\"around\"", "says": ""}, {"accepts": "", "name": "\"between\"", "says": ""}, {"accepts": "", "name": "\"center\"", "says": ""}, {"accepts": "", "name": "\"end\"", "says": ""}, {"accepts": "", "name": "\"evenly\"", "says": ""}, {"accepts": "", "name": "\"start\"", "says": ""}], "toggle-group.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "((value: string) => string)", "name": "item", "says": ""}], "toggle-group.ValueChangeDetails": [{"accepts": "string[]", "name": "value", "says": ""}], "types.Orientation": [{"accepts": "", "name": "\"horizontal\"", "says": ""}, {"accepts": "", "name": "\"vertical\"", "says": ""}]};