@stealthscale/component-actions 0.2.1 → 0.2.3

package/dist/theme.js

@@ -1,14 +1,36 @@
-import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-BhcK7PNL.js";
+import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipes-BhcK7PNL.js";
 import { definePreset } from "@stealthscale/theme/authoring";
-//#region src/theme.ts
-/**
-* Publishes the preset an application's style compiler installs to pick up this package's recipes.
-*
-* @remarks
-*   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({
+//#endregion
+const theme_default$published = ((preset) => {
+	const extend = preset.theme.extend;
+	return {
+		...preset,
+		theme: {
+			...preset.theme,
+			extend: {
+				...extend,
+				"recipes": {
+					...extend["recipes"],
+					"button": {
+						...extend["recipes"]["button"],
+						staticCss: [...extend["recipes"]["button"].staticCss ?? [], {
+							"palette": ["neutral"],
+							"shape": ["square"],
+							"variant": ["ghost"]
+						}]
+					}
+				},
+				"slotRecipes": {
+					...extend["slotRecipes"],
+					"swap": {
+						...extend["slotRecipes"]["swap"],
+						staticCss: [...extend["slotRecipes"]["swap"].staticCss ?? []]
+					}
+				}
+			}
+		}
+	};
+})(definePreset({
 	name: "@stealthscale/component-actions",
 	theme: { extend: {
 		recipes: { button: recipe },
@@ -17,6 +39,5 @@ var theme_default = definePreset({
 			swap: recipe$2
 		}
 	} }
-});
-//#endregion
-export { theme_default as default };
+}));
+export { theme_default$published as default };

package/locales/en/specimen/button.json

@@ -0,0 +1,39 @@
+{
+  "about": "A control that runs an action when pressed, and a square variant that holds one icon.",
+  "approve": "Approve",
+  "archive": "Archive",
+  "bold": "Bold",
+  "celebrate": "Celebrate",
+  "disabled": {
+    "about": "A disabled button keeps its size in every look and ignores presses.",
+    "title": "Disabled"
+  },
+  "effect": {
+    "about": "A halo in the palette's solid at half opacity. `glow` holds still and `pulse` breathes. Every button also runs a ripple from the press point without an effect set.",
+    "title": "Effects"
+  },
+  "elevation": {
+    "about": "A raised button lifts under the pointer and drops back towards the page when pressed.",
+    "title": "Elevation"
+  },
+  "palette": {
+    "about": "The eight semantic palettes in every look. A palette sets the colors a look reads, so a theme moves every button that uses it.",
+    "title": "Palettes"
+  },
+  "pressed": {
+    "about": "A toggle is a button with `aria-pressed`. The recipe fills it while the attribute is true, so the fill matches what a screen reader announces.",
+    "title": "Pressed"
+  },
+  "publish": "Publish",
+  "retry": "Retry",
+  "shape": {
+    "about": "The square shape holds one icon. `IconButton` sets it by default and requires an accessible name.",
+    "title": "Square"
+  },
+  "title": "Button",
+  "upload": "Upload",
+  "variant": {
+    "about": "Every shared look plus `glass`, at every size. A look reads the palette, so a palette or a theme moves every look at once.",
+    "title": "Looks and sizes"
+  }
+}

package/locales/en/specimen/clipboard.json

@@ -0,0 +1,33 @@
+{
+  "about": "Copies a value to the clipboard and shows the copied state for a moment. The trigger has no styles of its own, so a page renders it as a `Button` or an `IconButton`.",
+  "alone": {
+    "about": "A button with visible text that copies the link. During the copied state the icon becomes a check mark and the text becomes `copiedLabel`. `label` and `copiedLabel` repeat the visible text, so the accessible name contains the label in both states.",
+    "title": "Copy button"
+  },
+  "beside": {
+    "about": "An icon button next to a read-only field. The field is focusable and selectable, so a person can copy by hand when the browser denies clipboard access.",
+    "title": "Beside a field"
+  },
+  "copied": "Copied",
+  "copiedValue": "Copied {{value}}",
+  "copy": "Copy the link",
+  "copyValue": "Copy {{value}}",
+  "held": {
+    "about": "`timeout` sets the duration of the copied state in milliseconds. The default is 3000. Press both buttons to compare 250 and 3000.",
+    "title": "Copied-state duration"
+  },
+  "label": "Link to the payout",
+  "own": {
+    "about": "A button the page builds with `Clipboard.Consumer`, which reads `copied` and calls `copy`. Use it when the control is not a plain button or its text changes with the state.",
+    "title": "Custom control"
+  },
+  "size": {
+    "about": "The labelled row at each size. The root size sets the label and the gaps. The field and the button take the same size through their providers.",
+    "title": "Sizes"
+  },
+  "title": "Clipboard",
+  "value": {
+    "about": "The value is the button text. `label` and `copiedLabel` name the action and the value, so the accessible name contains the visible text.",
+    "title": "Value as the trigger"
+  }
+}

package/locales/en/specimen/color-mode-toggle.json

@@ -0,0 +1,14 @@
+{
+  "about": "A color mode toggle switches the page between light and dark. It reads the mode the page is drawn in, so while the choice follows the operating system it shows the mode the system chose, and a press stores the other mode. It keeps one name and reports dark as pressed. Every toggle on this page switches the catalogue itself.",
+  "header": {
+    "about": "The toggle at the end of an application's header, ghost and neutral as a control in a bar is.",
+    "product": "Ledger",
+    "title": "In a header"
+  },
+  "label": "Dark mode",
+  "looks": {
+    "about": "Every button prop passes through, so a toolbar sets the look it uses for its other controls.",
+    "title": "Looks"
+  },
+  "title": "Color mode toggle"
+}

package/locales/en/specimen/download-trigger.json

@@ -0,0 +1,34 @@
+{
+  "about": "Saves a file built in the page, such as an export of the records on screen. The trigger is the library's `Button`, so it takes every button axis. The contents of the file come from the page itself.",
+  "built": {
+    "about": "`data` is a function the trigger calls on each press. This one compresses 20,000 rows with gzip and returns a promise of the file. While the promise is pending, a spinning `Icon` named Compressing replaces the download icon. The trigger is `aria-disabled` in that state, so it keeps focus, and its `onClick` cancels a second press with `preventDefault`.",
+    "title": "Built on press"
+  },
+  "compressing": "Compressing",
+  "download": "Download",
+  "export": "Export",
+  "exports": "Exports for September",
+  "file": "File",
+  "formats": {
+    "csv": "Spreadsheet (CSV)",
+    "json": "Data (JSON)",
+    "markdown": "Table (Markdown)"
+  },
+  "kinds": {
+    "about": "A CSV ledger, JSON totals and an SVG mark, each saved under its own name and `mimeType`. An icon-only trigger takes `aria-label` and `shape=\"square\"`. The size column reads the byte length of each file.",
+    "title": "Kinds of file"
+  },
+  "ledger": "Download the ledger",
+  "lone": {
+    "about": "A trigger with visible text saves the ledger as a CSV file. `data` is text in the page, and `mimeType` gives it a type.",
+    "title": "Download button"
+  },
+  "menu": {
+    "about": "A menu row is not a button, so the menu's `onSelect` calls `download` with the chosen format. `download` takes the trigger's options and returns a promise.",
+    "title": "From a menu"
+  },
+  "payouts": "Download all payouts",
+  "save": "Download {{file}}",
+  "size": "Size",
+  "title": "Download trigger"
+}

package/locales/en/specimen/swap.json

@@ -0,0 +1,30 @@
+{
+  "about": "A swap puts two marks in one place and shows one of them. When the control around it changes state, one mark leaves while the other enters. Both marks keep their room, so the swap is as large as the larger mark and nothing beside it moves. The swap has no role of its own: the button around it names the state.",
+  "follow": {
+    "about": "Words swap as well as icons. The button is as wide as Unfollow in both states, and its name is the action a press takes, so it sets no aria-pressed.",
+    "follow": "Follow",
+    "person": "Ada Lovelace",
+    "title": "Words",
+    "unfollow": "Unfollow"
+  },
+  "motion": {
+    "about": "Motion sets how one mark replaces the other: scaled, faded, rolled up, or at once. Press a button to watch it. Under reduced motion every swap changes at once.",
+    "title": "Motions"
+  },
+  "mute": {
+    "about": "A toggle button keeps one name, Mute, and reports its state as pressed. The swap shows the speaker with sound or crossed out.",
+    "label": "Mute",
+    "title": "Toggle button"
+  },
+  "playback": {
+    "about": "The button's name is the action a press takes, Play or Pause, and the mark follows it.",
+    "pause": "Pause",
+    "play": "Play",
+    "title": "Named by the action"
+  },
+  "states": {
+    "about": "The off mark shows while swap is false and the on mark while it is true.",
+    "title": "States"
+  },
+  "title": "Swap"
+}

package/locales/en/specimen/toggle-group.json

@@ -0,0 +1,48 @@
+{
+  "about": "Renders buttons that stay pressed: one at a time, as a choice, or several at once, as a set of toggles. The arrow keys move between the buttons, and Space and Enter toggle the focused one.",
+  "align": "Text alignment",
+  "alignments": {
+    "center": "Center",
+    "left": "Left",
+    "right": "Right"
+  },
+  "looks": {
+    "about": "The button's looks, as one attached strip. A button that is on takes its look's pressed fill, one step deeper than the look's rest. The `solid` look marks a pressed button with an inset shadow and a semibold label, which an icon does not show.",
+    "title": "Looks"
+  },
+  "orientation": {
+    "about": "`orientation=\"vertical\"` stacks the buttons, and the up and down arrow keys move between them.",
+    "title": "Orientation"
+  },
+  "show": "Show invoices",
+  "single": {
+    "about": "Without `multiple` the group keeps one button on and reads as a set of radios. `deselectable={false}` keeps a button on when it is pressed again.",
+    "title": "One at a time"
+  },
+  "sizes": {
+    "about": "The button's sizes, so a group in a toolbar is as tall as the buttons beside it.",
+    "title": "Sizes"
+  },
+  "spaced": {
+    "about": "`attached={false}` spaces the buttons by the group's gap. Archived is disabled, and the arrow keys skip it.",
+    "title": "Spaced"
+  },
+  "states": {
+    "about": "A disabled group dims every button and takes none out of the row.",
+    "title": "Disabled"
+  },
+  "statuses": {
+    "archived": "Archived",
+    "open": "Open",
+    "paid": "Paid",
+    "pending": "Pending"
+  },
+  "style": "Text style",
+  "styles": {
+    "bold": "Bold",
+    "italic": "Italic",
+    "strikethrough": "Strikethrough",
+    "underline": "Underline"
+  },
+  "title": "Toggle group"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-actions",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "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",
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -35,7 +36,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@stealthscale/component-layout": "^0.2.1",
+    "@stealthscale/component-layout": "^0.2.2",
     "@zag-js/clipboard": "1.45.0",
     "@zag-js/file-utils": "1.45.0",
     "@zag-js/react": "1.45.0",
@@ -50,10 +51,10 @@
     "@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-i18n": "^0.2.2",
     "@stealthscale/vite-config-react": "^0.9.1",
-    "@stealthscale/vite-config-specimen": "^0.2.1",
-    "@stealthscale/vite-config-theme": "^0.2.1",
+    "@stealthscale/vite-config-specimen": "^0.3.0",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
     "@testing-library/react": "^16.3",
     "@types/react": "^19.3",