@stealthscale/component-actions 0.1.0 → 0.2.1

package/dist/recipe-BhcK7PNL.js

@@ -0,0 +1,317 @@
+import { PALETTES, axis, below, controlSizes, defineRecipe, defineSlotRecipe, dense, interactive, liftVariants, lookVariants, motion, onSlot, onSlots, paletteVariants, sizeVariants, touchTarget } from "@stealthscale/theme/authoring";
+//#region src/button/recipe.ts
+/**
+* Declares the button recipe: the base styles and the axes a caller sets.
+*
+* @remarks
+*   Every value is a token, so a theme moves all of them. The border is transparent at the control
+*   width in every look, so the outline look is the same size as the others. A press changes the
+*   fill, spreads the ripple and lowers the elevation, and never moves the box, because a target
+*   that shifts under the pointer is easy to miss. `staticCss` lists `shape="square"` and every
+*   palette. The icon button sets the shape through a default prop, and callers set the palette
+*   through a provider or from data, so the compiler extracts neither from source.
+*/
+/**
+* Returns the fill of a button that is on under forced colors: `Highlight` behind `HighlightText`.
+*
+* @remarks
+*   Forced colors replace every background and remove every shadow, so without it a button that is
+*   on reads the same as one that is off.
+*/
+function forcedOn() {
+	return { _highContrast: {
+		background: "Highlight",
+		color: "HighlightText",
+		forcedColorAdjust: "none"
+	} };
+}
+/**
+* Returns the `_currentPage` and `_pressed` styles of a look with no fill of its own.
+*
+* @remarks
+*   A button is on when it has `aria-pressed="true"` or `aria-current="page"`, so the fill matches
+*   what a screen reader announces. The styles go in a compound variant, not the base, because the
+*   compiler emits a look's background in a later cascade layer than the base, and a later layer
+*   applies over an earlier one at any specificity. Pass `colorPalette.subtle` for a look with no
+*   resting fill and `colorPalette.muted` for a look that rests on the subtle fill, so the on state
+*   is one step deeper in both. A pressed button's edge is the palette's emphasized role, one step
+*   darker than the outline look's muted edge.
+*/
+function on(background) {
+	return {
+		_currentPage: {
+			background,
+			color: "colorPalette.fg",
+			fontWeight: "semibold",
+			...forcedOn()
+		},
+		_pressed: {
+			background,
+			borderColor: "colorPalette.emphasized",
+			color: "colorPalette.fg",
+			...forcedOn()
+		}
+	};
+}
+/**
+* Returns the `_currentPage` and `_pressed` styles of the solid look.
+*
+* @remarks
+*   The solid look has no deeper fill, and any other fill matches its hover fill. The on state is
+*   the theme's inset line and the semibold weight. `:active` is the momentary press.
+*/
+function marked() {
+	return {
+		_currentPage: {
+			boxShadow: "inset",
+			fontWeight: "semibold",
+			...forcedOn()
+		},
+		_pressed: {
+			boxShadow: "inset",
+			fontWeight: "semibold",
+			...forcedOn()
+		}
+	};
+}
+/**
+* Styles a button, defaulting to the solid look at the md size in the primary palette.
+*/
+const recipe$2 = defineRecipe({
+	base: {
+		...interactive(),
+		...touchTarget(),
+		layerStyle: "ripple",
+		alignItems: "center",
+		appearance: "none",
+		borderColor: "transparent",
+		borderRadius: "l2",
+		borderWidth: "control",
+		colorPalette: "primary",
+		display: "inline-flex",
+		flexShrink: "0",
+		fontWeight: "medium",
+		justifyContent: "center",
+		verticalAlign: "middle",
+		whiteSpace: "nowrap"
+	},
+	className: "button",
+	compoundVariants: [
+		(
+		/**
+		* Zeroes the inline padding of a square button.
+		*
+		* @remarks
+		*   The compiler emits the size axis after the shape axis, and the size axis sets the padding,
+		*   so the reset is a compound. `aspect-ratio` fixes the width, so padding only narrows the
+		*   content box: at md, 16px each side leaves 6px for a 16px icon.
+		*/
+		{
+			css: { paddingInline: "0" },
+			name: "squared",
+			shape: "square"
+		}),
+		{
+			css: on("colorPalette.subtle"),
+			name: "on",
+			variant: [
+				"ghost",
+				"glass",
+				"outline",
+				"plain"
+			]
+		},
+		{
+			css: on("colorPalette.muted"),
+			name: "on-deeper",
+			variant: ["subtle", "surface"]
+		},
+		{
+			css: marked(),
+			name: "on-marked",
+			variant: ["solid"]
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "solid"
+	},
+	jsx: [/Button$/u],
+	staticCss: [{ shape: ["square"] }, { palette: [...PALETTES] }],
+	variants: {
+		/**
+		* The halo around the button, in the palette's solid at half opacity.
+		*
+		* @remarks
+		*   `pulse` sets `boxShadowColor` because its keyframe writes the whole `box-shadow`, which
+		*   replaces a static glow. The axis offers no moving border. `border.moving` paints over the
+		*   padding box and hides the look's fill, and a ring without it needs a pseudo-element, but
+		*   `::after` renders the ripple and `::before` the touch target.
+		*/
+		effect: {
+			glow: { layerStyle: "glow.md" },
+			pulse: {
+				animationStyle: "pulse-glow",
+				boxShadowColor: "colorPalette.solid/50"
+			}
+		},
+		elevation: liftVariants(),
+		/**
+		* Palette of every look. The base sets `primary`.
+		*
+		* @remarks
+		*   `neutral` renders the control in the surrounding text ink, for a button in a toolbar.
+		*/
+		palette: paletteVariants(),
+		shape: { square: { aspectRatio: "square" } },
+		size: controlSizes(),
+		variant: {
+			...lookVariants(),
+			glass: { layerStyle: "glass" }
+		}
+	}
+});
+//#endregion
+//#region src/clipboard/recipe.ts
+/**
+* Declares the slot recipe of the clipboard: layout and spacing for its seven parts.
+*
+* @remarks
+*   The trigger has no control styles. A caller renders it as the library's `Button` or
+*   `IconButton` through `as`, so it matches every other button in a theme. The clipboard has no
+*   colour or surface of its own, so it offers no `palette` or `effect` axis. The button it renders
+*   through `as` carries both. The root aligns its children at the start, so a trigger on its own
+*   keeps its button width. The control row stretches to the width of the root, so a field inside
+*   it fills the row.
+*/
+/**
+* Sizes the label text and the gaps step through.
+*/
+const STEPS = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Slot styles and the size axis. Defaults to `md`.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		control: {
+			alignItems: "center",
+			alignSelf: "stretch",
+			display: "flex"
+		},
+		indicator: {
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center"
+		},
+		label: {
+			color: "fg",
+			display: "block"
+		},
+		root: {
+			alignItems: "start",
+			display: "flex",
+			flexDirection: "column"
+		}
+	},
+	className: "clipboard",
+	defaultVariants: { size: "md" },
+	jsx: [/^Clipboard(\.\w+)?$/u],
+	slots: [
+		"root",
+		"label",
+		"control",
+		"input",
+		"trigger",
+		"indicator",
+		"valueText"
+	],
+	variants: { 
+	/**
+	* The label text style and the two gaps.
+	*
+	* @remarks
+	*   The gap between the label and the row is one size smaller than the gap between the field
+	*   and the trigger. The field and the trigger take their own size through their providers.
+	*/
+size: onSlots({
+		control: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), STEPS),
+		label: sizeVariants((size) => ({ textStyle: `label.${size}` }), STEPS),
+		root: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(size)}}`) }), STEPS)
+	}) }
+});
+//#endregion
+//#region src/swap/recipe.ts
+/**
+* Recipe for a swap: two marks in one place, one of which shows, and the motion that replaces one
+* with the other.
+*
+* @remarks
+*   The root is an inline grid and both indicators take its one cell, so the root is as large as
+*   the larger mark whichever shows, and nothing beside it moves. An indicator with `data-hidden`
+*   keeps its room with `visibility: hidden`, which also takes it out of the accessibility tree and
+*   the tab order. The `motion` axis
+*   picks the pair of animation styles an indicator enters and leaves with, and the leaving mark
+*   and the entering mark run at once. Under reduced motion the animation styles run nothing, so
+*   the marks change at once. The recipe has no `palette` and no `size` axis: the marks take their
+*   color and their size from the control around them.
+*/
+/**
+* Class name of the recipe.
+*/
+const CLASS = "swap";
+/**
+* Lists the motions in reading order: the default first, then the others, then none.
+*/
+const MOTIONS = [
+	"scale",
+	"fade",
+	"slide",
+	"none"
+];
+/**
+* Maps each motion to the animation styles an indicator enters and leaves with, or to no animation.
+* The scale runs from half a mark's size, so a small icon visibly grows into place.
+*/
+const PAIRS = {
+	fade: motion("fade.in", "fade.out"),
+	none: { animation: "none" },
+	scale: {
+		...motion("scale-fade.in", "scale-fade.out"),
+		"--scale-distance": "0.5"
+	},
+	slide: motion("slide-up.in", "slide-up.out")
+};
+/**
+* Defines the swap recipe, which scales the marks in and out by default.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		indicator: {
+			"&[data-hidden]": { visibility: "hidden" },
+			alignItems: "center",
+			display: "inline-flex",
+			gridArea: "1 / 1 / 2 / 2",
+			justifyContent: "center"
+		},
+		root: {
+			display: "inline-grid",
+			placeItems: "center"
+		}
+	},
+	className: CLASS,
+	defaultVariants: { motion: "scale" },
+	jsx: [/^Swap(\.\w+)?$/u],
+	slots: ["root", "indicator"],
+	variants: { 
+	/**
+	* Motion the marks replace each other with.
+	*/
+motion: onSlot("indicator", axis(MOTIONS, (name) => PAIRS[name])()) }
+});
+//#endregion
+export { recipe$1 as n, recipe$2 as r, recipe as t };

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/theme.d.ts

@@ -1,11 +1,10 @@
 //#region src/theme.d.ts
 /**
- * Publishes the preset that registers every recipe in this package, for an application's compiler
- * to install.
+ * Publishes the preset an application's style compiler installs to pick up this package's recipes.
  *
  * @remarks
- *   The list is written by hand. The package's own specification reports a recipe file the list
- *   leaves out, so no generator runs here.
+ *   The list of recipes is maintained by hand. The package's own specification fails when a recipe
+ *   file is missing from it, which is why nothing generates the list.
  */
 declare const _default: import("@stealthscale/theme/authoring").Preset;
 //#endregion

package/dist/theme.js

@@ -1,17 +1,22 @@
-import { t as recipe } from "./recipe-19HSwhAG.js";
+import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-BhcK7PNL.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#region src/theme.ts
 /**
-* Publishes the preset that registers every recipe in this package, for an application's compiler
-* to install.
+* Publishes the preset an application's style compiler installs to pick up this package's recipes.
 *
 * @remarks
-*   The list is written by hand. The package's own specification reports a recipe file the list
-*   leaves out, so no generator runs here.
+*   The list of recipes is maintained by hand. The package's own specification fails when a recipe
+*   file is missing from it, which is why nothing generates the list.
 */
 var theme_default = definePreset({
 	name: "@stealthscale/component-actions",
-	theme: { extend: { recipes: { button: recipe } } }
+	theme: { extend: {
+		recipes: { button: recipe },
+		slotRecipes: {
+			clipboard: recipe$1,
+			swap: recipe$2
+		}
+	} }
 });
 //#endregion
 export { theme_default as default };

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@stealthscale/component-actions",
-  "version": "0.1.0",
-  "description": "Draws what a person presses: a button, a toggle, and the triggers that carry an action.",
+  "version": "0.2.1",
+  "description": "Renders what a person presses: a button, a toggle group, a swap, a color mode toggle, a clipboard and a download trigger.",
   "keywords": [
     "actions",
     "button",
     "components",
     "react"
   ],
-  "homepage": "https://github.com/stealth-scale/config/tree/main/components/actions#readme",
-  "bugs": "https://github.com/stealth-scale/config/issues",
+  "homepage": "https://github.com/stealth-scale/scale/tree/main/components/actions#readme",
+  "bugs": "https://github.com/stealth-scale/scale/issues",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/stealth-scale/config.git",
+    "url": "git+https://github.com/stealth-scale/scale.git",
     "directory": "components/actions"
   },
   "files": [
@@ -34,29 +34,44 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@stealthscale/component-layout": "^0.2.1",
+    "@zag-js/clipboard": "1.45.0",
+    "@zag-js/file-utils": "1.45.0",
+    "@zag-js/react": "1.45.0",
+    "@zag-js/toggle-group": "1.45.0",
+    "@zag-js/types": "1.45.0",
+    "@zag-js/utils": "1.45.0"
+  },
   "devDependencies": {
-    "@arethetypeswrong/core": "^0.18.5",
-    "@rolldown/plugin-babel": "^0.2.4",
-    "@stealthscale/theme": "^0.3.0",
-    "@stealthscale/vite-config": "^0.6.0",
-    "@stealthscale/vite-config-react": "^0.8.0",
-    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@arethetypeswrong/core": "^0.18",
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/provider-color-mode": "^0.2.2",
+    "@stealthscale/settings": "^0.2.0",
+    "@stealthscale/theme": "^0.5.0",
+    "@stealthscale/vite-config": "^0.8.0",
+    "@stealthscale/vite-config-i18n": "^0.2.1",
+    "@stealthscale/vite-config-react": "^0.9.1",
+    "@stealthscale/vite-config-specimen": "^0.2.1",
+    "@stealthscale/vite-config-theme": "^0.2.1",
     "@stealthscale/vite-config-typescript": "^0.3.0",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "happy-dom": "^20.14.3",
-    "oxc-transform-react": "^0.149.0",
-    "publint": "^0.3.24",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "typescript": "^7.0.2",
-    "vitest": "4.1.11"
+    "@testing-library/react": "^16.3",
+    "@types/react": "^19.3",
+    "@types/react-dom": "^19.3",
+    "happy-dom": "^20.14",
+    "lucide-react": "^1.52",
+    "oxc-transform-react": "^0.153",
+    "publint": "^0.3",
+    "react": "^19.3",
+    "react-dom": "^19.3",
+    "typescript": "^7.0",
+    "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@stealthscale/theme": "^0.3.0",
-    "react": "^19.3.0"
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/provider-color-mode": "^0.2.2",
+    "@stealthscale/theme": "^0.5.0",
+    "react": "^19.3"
   },
   "engines": {
     "node": ">=26.0.0"

package/dist/recipe-19HSwhAG.js

@@ -1,70 +0,0 @@
-import { controlSizes, defineRecipe, interactive, liftVariants, lookVariants, statusVariants, touchTarget } from "@stealthscale/theme/authoring";
-//#region src/button/recipe.ts
-/**
-* States what a button is: the element a person presses, drawn in a look and a size, in the
-* palette of its status, square where it holds one glyph, and glowing where a page asks.
-*
-* @remarks
-*   Every value is a layer style, a semantic control height, a semantic inset, a label role or a
-*   palette, so a theme moves all of them. The interactive fragment gives the cursor, the focus
-*   ring, the disabled layer and the transitions every control shares, and the touch target widens
-*   the hit area on a coarse pointer without moving the box. The border is drawn transparent at the
-*   small width in every look, so the outline look changes its colour and not its size. A press is
-*   read from the look's own pressed fill and from the elevation dropping under the pointer. The
-*   box scales rather than shifting, because a control that shifts under a press is one a reader
-*   can miss. The square is listed under `staticCss`, because the icon button fixes it through a
-*   default prop and no JSX literal writes it for the compiler to extract.
-*/
-/**
-* Draws a button on the primary palette in the solid look and the middle size until a caller says
-* otherwise, set inline so it sits in a line of controls.
-*/
-const recipe = defineRecipe({
-	base: {
-		...interactive(),
-		...touchTarget(),
-		alignItems: "center",
-		appearance: "none",
-		borderColor: "transparent",
-		borderRadius: "l2",
-		borderWidth: "sm",
-		colorPalette: "primary",
-		display: "inline-flex",
-		flexShrink: "0",
-		fontWeight: "medium",
-		justifyContent: "center",
-		verticalAlign: "middle",
-		whiteSpace: "nowrap"
-	},
-	className: "button",
-	compoundVariants: [{
-		css: { "&:has(> svg:first-child)": { paddingInline: "0" } },
-		name: "squared",
-		shape: "square"
-	}],
-	defaultVariants: {
-		size: "md",
-		variant: "solid"
-	},
-	jsx: [/Button$/u],
-	staticCss: [{ shape: ["square"] }],
-	variants: {
-		effect: {
-			glow: { layerStyle: "glow.md" },
-			ripple: { layerStyle: "ripple" }
-		},
-		elevation: liftVariants(),
-		shape: { square: {
-			aspectRatio: "square",
-			paddingInline: "0"
-		} },
-		size: controlSizes(),
-		status: statusVariants(),
-		variant: {
-			...lookVariants(),
-			glass: { layerStyle: "glass" }
-		}
-	}
-});
-//#endregion
-export { recipe as t };