npm - @stealthscale/component-actions - Versions diffs - 0.1.0 - Mend

@stealthscale/component-actions 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Stealth Scale B.V.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,78 @@
+# @stealthscale/component-actions
+Draws what a person presses: the button, and the square button that holds one glyph. Every component
+binds a recipe and draws nothing of its own, so a theme restyles all of them by extending the
+recipe. The preset under `./theme` registers the recipes with an application's compiler.
+Every value a theme can change on a component is an axis of its recipe, so a caller sets it as a
+prop and writes no style. A caller changes the element a component draws with `as`.
+## Install
+```bash
+pnpm add @stealthscale/component-actions
+```
+The package peers on `react` and `@stealthscale/theme`. An application lists the preset under
+`./theme` among the presets its compiler installs.
+## Button
+Draws the element a person presses, in a look, a size and a status, raised off the page and glowing
+or rippling where a page sets that effect. Under a press the look fills to its pressed colour, the
+box scales to 98 percent, and an elevated button drops towards the page. A button that opens with a
+mark leads with one step less inset, so the room before the mark is the width of the gap after it
+rather than a word's worth. The element is `button`, and `type` defaults to `button` so one inside a
+form does not send it.
+```tsx
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+<Button size="lg" variant="outline">
+  Save
+</Button>;
+<Button as="a">Read on</Button>;
+<ButtonPropsProvider value={{ size: "sm", variant: "subtle" }}>
+  <Button>Cancel</Button>
+  <Button variant="solid">Save</Button>
+</ButtonPropsProvider>;
+```
+`ButtonPropsProvider` sets the variants of every button below it. A prop on the button itself
+overrides the provider's.
+The `glass` look is translucent, so the contrast of its label depends on what sits behind it. The
+theme's contrast gate measures the opaque looks alone, and a page puts a glass button on a surface
+it has checked.
+| Axis        | Values                                                             | Default |
+| ----------- | ------------------------------------------------------------------ | ------- |
+| `variant`   | `solid`, `subtle`, `surface`, `outline`, `ghost`, `plain`, `glass` | `solid` |
+| `size`      | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`                  | `md`    |
+| `status`    | `info`, `success`, `warning`, `error`                              | primary |
+| `shape`     | `square`                                                           | none    |
+| `effect`    | `glow`, `ripple`                                                   | none    |
+| `elevation` | `raised`, `floating`                                               | flat    |
+## IconButton
+Draws a button that holds one glyph and no words. It binds the button's recipe with the square shape
+as its default, so it takes every axis a button takes and a theme that moves the button moves it
+too. A glyph names nothing, so the props require an accessible name: `aria-label`, or
+`aria-labelledby` pointing at the element that holds the words. The type refuses an icon button
+without one.
+```tsx
+import { IconButton } from "@stealthscale/component-actions";
+import { Icon } from "@stealthscale/component-typography";
+<IconButton aria-label="Close" variant="ghost">
+  <Icon>
+    <path d="M6 6l12 12M18 6L6 18" />
+  </Icon>
+</IconButton>;
+```
+## Licence
+MIT. See [LICENSE](LICENSE).

package/dist/cyclonedx/bom.json ADDED Viewed

@@ -0,0 +1 @@

+ {"$schema":"http://cyclonedx.org/schema/bom-1.7.schema.json","bomFormat":"CycloneDX","specVersion":"1.7","version":1,"metadata":{"lifecycles":[{"phase":"build"}],"tools":{"components":[{"type":"application","name":"rolldown","version":"1.2.7"},{"type":"application","name":"vite","version":"8.2.2"},{"type":"library","name":"core","group":"@arethetypeswrong","version":"0.18.5","bom-ref":"pkg:npm/%40arethetypeswrong/core@0.18.5","author":"Andrew Branch","description":"The API behind arethetypeswrong.github.io","hashes":[{"alg":"SHA-512","content":"f72b63cc6c318e6f54cfb23d6af7dbb79be542deae93db914444b3263aabce797a58abc8e9dc184e8faf277534d96aeafe64778aa97f3f386f1e129d2480230d"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40arethetypeswrong/core@0.18.5","externalReferences":[{"url":"https://github.com/arethetypeswrong/arethetypeswrong.github.io.git#packages/core","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=20"}]},{"type":"library","name":"theme","group":"@stealthscale","version":"0.3.0","bom-ref":"pkg:npm/%40stealthscale/theme@0.3.0","description":"Publishes the foundation every recipe is written against, the runtime every component binds its recipe with, and the vocabulary a theme is written in.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/theme@0.3.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#foundations/theme","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/foundations/theme#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-react","group":"@stealthscale","version":"0.8.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-react@0.8.0","description":"Adds the JSX transform, the React lint rules, a test document and an MDX compiler to a package that renders.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-react@0.8.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-react#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-theme","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-theme@0.1.0","description":"Adds the runtime generator to a design-system package and the stylesheet compiler to an application.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-theme@0.1.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-theme","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-theme#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-typescript","group":"@stealthscale","version":"0.3.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-typescript@0.3.0","description":"Sets the TypeScript options every stealthscale package compiles with.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-typescript@0.3.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-typescript","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-typescript#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config","group":"@stealthscale","version":"0.6.0","bom-ref":"pkg:npm/%40stealthscale/vite-config@0.6.0","description":"Configures a package from five Vite+ tiers and a named layer for every block.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config@0.6.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"react","group":"@testing-library","version":"16.3.3","bom-ref":"pkg:npm/%40testing-library/react@16.3.3","author":"Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)","description":"Simple and complete React DOM testing utilities that encourage good testing practices.","hashes":[{"alg":"SHA-512","content":"528d7ddcd8106cf333ea5aeb86d45040570c0ba45efc42cb15b6ee54bdf4583959c65a597fdfe53074c05713d12f0d6ad62bbd389991d5cd812e210d46cb5d06"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40testing-library/react@16.3.3","externalReferences":[{"url":"https://github.com/testing-library/react-testing-library/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/testing-library/react-testing-library","type":"vcs","comment":"as detected from PackageJson property \"repository.url\""},{"url":"https://github.com/testing-library/react-testing-library#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=18"}]},{"type":"library","name":"react-dom","group":"@types","version":"19.3.0","bom-ref":"pkg:npm/%40types/react-dom@19.3.0","description":"TypeScript definitions for react-dom","hashes":[{"alg":"SHA-512","content":"648edb538da66575ca1e7fea34b130d88adb888354ed7e7ebdf81d8b10479023696165e32a07d0fcffaec866f90a338b07d51c9d37a0debca542d5768729b8e1"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40types/react-dom@19.3.0","externalReferences":[{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped.git#types/react-dom","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"react","group":"@types","version":"19.3.0","bom-ref":"pkg:npm/%40types/react@19.3.0","description":"TypeScript definitions for react","hashes":[{"alg":"SHA-512","content":"374ac50ae1fd628c46f7f9bad65f4c7e924a7e62ce554d1e9bb8a9233e9346049292f45e2c1f6f2fce4607ecabf01b3995eaa9be0f7a252c05e194b5b38be242"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40types/react@19.3.0","externalReferences":[{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped.git#types/react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"babel-plugin-react-compiler","version":"1.0.0","bom-ref":"pkg:npm/babel-plugin-react-compiler@1.0.0","description":"Babel plugin for React Compiler.","hashes":[{"alg":"SHA-512","content":"2319bcb457e828a20f61d0822984ecaaff85778209d0342a3321229a8fa9c5438c511f5c54f9704eb16df40beefb771be99a77980ce5fadd4cac6d9fc712acc7"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/babel-plugin-react-compiler@1.0.0","externalReferences":[{"url":"git+https://github.com/facebook/react.git#compiler/packages/babel-plugin-react-compiler","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""}]},{"type":"library","name":"happy-dom","version":"20.14.5","bom-ref":"pkg:npm/happy-dom@20.14.5","author":"David Ortner","description":"Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.","hashes":[{"alg":"SHA-512","content":"c7f47392958ee346d38c8a13df4890b6deb814b2e61ff89171408dd97fff6cbc7b1f789f91d7cf5f2aacae8fce62dab32008622cc300ee69a2391f42dcd38a8d"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/happy-dom@20.14.5","externalReferences":[{"url":"https://github.com/capricorn86/happy-dom","type":"vcs","comment":"as detected from PackageJson property \"repository\""},{"url":"https://github.com/capricorn86/happy-dom","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=20.0.0"}]},{"type":"library","name":"oxc-transform-react","version":"0.149.0","bom-ref":"pkg:npm/oxc-transform-react@0.149.0","author":"Boshen and oxc contributors","description":"Oxc React Compiler Node API","hashes":[{"alg":"SHA-512","content":"69bdddc5c3ed90349f211f6d35dc4752d9a974bd258479ddb010fd214014e41c6d26dc061bff39367473b367f62b0a2e3641e5edc692b3030b41e52fc3714447"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/oxc-transform-react@0.149.0","externalReferences":[{"url":"https://github.com/oxc-project/oxc/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/oxc-project/oxc.git#napi/transform-react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://oxc.rs","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":"^20.19.0 || >=22.12.0"}]},{"type":"library","name":"react-dom","version":"19.3.0","bom-ref":"pkg:npm/react-dom@19.3.0","description":"React package for working with the DOM.","hashes":[{"alg":"SHA-512","content":"24393c76089fe753a31680c4ef4f8e4fd202c98afeebd1e59a284dc29d7e36c7db9dadede6c22209af59264b43990e3fd5bfeb9f6ea1200476b985c332be6bd1"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/react-dom@19.3.0","externalReferences":[{"url":"https://github.com/react/react/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/react/react.git#packages/react-dom","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://react.dev/","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"react","version":"19.3.0","bom-ref":"pkg:npm/react@19.3.0","description":"React is a JavaScript library for building user interfaces.","hashes":[{"alg":"SHA-512","content":"13c2d471bb415addb46db9766281dfc7864305dc554df38ab42667f5c0d227897afe7ba8029729201723e3bb76c19a155fc836647b8c1db892860091d53e52a2"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/react@19.3.0","externalReferences":[{"url":"https://github.com/react/react/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"https://github.com/react/react.git#packages/react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://react.dev/","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=0.10.0"}]},{"type":"library","name":"typescript","version":"7.0.2","bom-ref":"pkg:npm/typescript@7.0.2","author":"Microsoft Corp.","description":"TypeScript is a language for application scale JavaScript development","hashes":[{"alg":"SHA-512","content":"f0561abbdea8dcd28e85b8ca8bfa8dbc6fd6e63873c646dd9b9b23f406d9ff94f9b16aa7de12602df1b1dbbb11299593bf2cc23fc74b4414dfe6d05349155434"}],"licenses":[{"license":{"id":"Apache-2.0"}}],"purl":"pkg:npm/typescript@7.0.2","externalReferences":[{"url":"https://github.com/microsoft/TypeScript/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/microsoft/TypeScript.git","type":"vcs","comment":"as detected from PackageJson property \"repository.url\""},{"url":"https://www.typescriptlang.org/","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=16.20.0"}]},{"type":"library","name":"vitest","version":"4.1.11","bom-ref":"pkg:npm/vitest@4.1.11","author":"Anthony Fu <anthonyfu117@hotmail.com>","description":"Next generation testing framework powered by Vite","hashes":[{"alg":"SHA-512","content":"7e1002acd5d489d21b19206be4595bb8190eed5582d59c8b9740cee025360eb42800fc57f3862cc6cf877864298a2e656565754388016534eee3d985f80e8477"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/vitest@4.1.11","externalReferences":[{"url":"https://github.com/vitest-dev/vitest/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"git+https://github.com/vitest-dev/vitest.git#packages/vitest","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://vitest.dev","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":"^20.0.0 || ^22.0.0 || >=24.0.0"}]}]},"component":{"type":"library","name":"component-actions","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/component-actions@0.1.0","description":"Draws what a person presses: a button, a toggle, and the triggers that carry an action.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/component-actions@0.1.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#components/actions","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/components/actions#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}],"evidence":{"licenses":[{"license":{"name":"file: LICENSE","text":{"content":"TUlUIExpY2Vuc2UKCkNvcHlyaWdodCAoYykgMjAyNiBTdGVhbHRoIFNjYWxlIEIuVi4KClBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHkKb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgIlNvZnR3YXJlIiksIHRvIGRlYWwKaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlIHJpZ2h0cwp0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsCmNvcGllcyBvZiB0aGUgU29mdHdhcmUsIGFuZCB0byBwZXJtaXQgcGVyc29ucyB0byB3aG9tIHRoZSBTb2Z0d2FyZSBpcwpmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOgoKVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW4gYWxsCmNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuCgpUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgIkFTIElTIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUgpJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSwKRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFCkFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVIKTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSwKT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTiBUSEUKU09GVFdBUkUuCg==","contentType":"text/plain","encoding":"base64"}}}]}},"supplier":{"name":"Stealth Scale B.V.","url":["https://stealthscale.io"]}},"components":[],"dependencies":[{"ref":"pkg:npm/%40stealthscale/component-actions@0.1.0"}]}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,99 @@
+import { ComponentProps, JSX } from "react";
+//#region src/button/button.d.ts
+/**
+ * Draws a button in a look, a size and a status, square where it holds one glyph.
+ */
+export declare const Button: import("@stealthscale/theme").StyledComponent<"button", {
+  readonly effect?: "glow" | "ripple";
+  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
+  readonly shape?: "square";
+  readonly size?: import("@stealthscale/theme/authoring").Scale;
+  readonly status?: "error" | "info" | "success" | "warning";
+  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
+}>;
+/**
+ * Describes what a button takes: the variants its recipe offers, and everything a styled button
+ * element takes.
+ */
+type ButtonProps = ComponentProps<typeof Button>;
+//#endregion
+//#region src/button/context.d.ts
+/**
+ * Binds the button's recipe to the elements that draw it.
+ *
+ * @remarks
+ *   Apart from the recipe, because an application's compiler reads the recipe at build time and
+ *   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
+ *   every compiler configuration that reads it.
+ */
+/**
+ * Binds the recipe once, for the button, for the square that holds one glyph, and for whatever
+ * sets their variants from above.
+ */
+declare const PropsProvider: import("react").Provider<import("@stealthscale/theme").DataAttrs & Partial<{
+  readonly effect?: "glow" | "ripple";
+  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
+  readonly shape?: "square";
+  readonly size?: import("@stealthscale/theme/authoring").Scale;
+  readonly status?: "error" | "info" | "success" | "warning";
+  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
+}>>, withContext: <Tag extends import("react").ElementType>(Component: Tag, options?: import("@stealthscale/theme").JsxFactoryOptions<import("@stealthscale/theme").ComponentProps<Tag> & Partial<{
+  readonly effect?: "glow" | "ripple";
+  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
+  readonly shape?: "square";
+  readonly size?: import("@stealthscale/theme/authoring").Scale;
+  readonly status?: "error" | "info" | "success" | "warning";
+  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
+}>> | undefined) => import("@stealthscale/theme").StyledComponent<Tag, {
+  readonly effect?: "glow" | "ripple";
+  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
+  readonly shape?: "square";
+  readonly size?: import("@stealthscale/theme/authoring").Scale;
+  readonly status?: "error" | "info" | "success" | "warning";
+  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
+}>;
+//#endregion
+//#region src/button/icon-button.d.ts
+/**
+ * Binds the button's recipe with the square shape fixed, beside the button's own default type.
+ */
+declare const Square: import("@stealthscale/theme").StyledComponent<"button", {
+  readonly effect?: "glow" | "ripple";
+  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
+  readonly shape?: "square";
+  readonly size?: import("@stealthscale/theme/authoring").Scale;
+  readonly status?: "error" | "info" | "success" | "warning";
+  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
+}>;
+/**
+ * Gives the control a label of its own.
+ */
+interface Labelled {
+  /**
+   * The words that name the control.
+   */
+  "aria-label": string;
+}
+/**
+ * Points the control at the element that holds its name.
+ */
+interface LabelledBy {
+  /**
+   * The id of the element that holds the words.
+   */
+  "aria-labelledby": string;
+}
+/**
+ * Requires an accessible name for a control whose content gives it none.
+ */
+type Named = Labelled | LabelledBy;
+/**
+ * Describes what an icon button takes: everything a button takes, and an accessible name.
+ */
+type IconButtonProps = ComponentProps<typeof Square> & Named;
+/**
+ * Draws a square button in a look, a size and a status, named in words for the glyph it holds.
+ */
+export declare const IconButton: (props: IconButtonProps) => JSX.Element;
+//#endregion
+export { type ButtonProps, PropsProvider as ButtonPropsProvider, type IconButtonProps };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { t as recipe } from "./recipe-19HSwhAG.js";
+import "react";
+import { createRecipeContext } from "@stealthscale/theme";
+//#region src/button/context.ts
+/**
+* Binds the button's recipe to the elements that draw it.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
+*   every compiler configuration that reads it.
+*/
+/**
+* Binds the recipe once, for the button, for the square that holds one glyph, and for whatever
+* sets their variants from above.
+*/
+const { PropsProvider, withContext } = createRecipeContext(recipe);
+//#endregion
+//#region src/button/button.ts
+/**
+* Draws a button in a look, a size and a status, square where it holds one glyph.
+*/
+const Button = withContext("button", { defaultProps: { type: "button" } });
+/**
+* Draws a square button in a look, a size and a status, named in words for the glyph it holds.
+*/
+const IconButton = withContext("button", { defaultProps: {
+	shape: "square",
+	type: "button"
+} });
+//#endregion
+export { Button, PropsProvider as ButtonPropsProvider, IconButton };

package/dist/recipe-19HSwhAG.js ADDED Viewed

@@ -0,0 +1,70 @@
+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 };

package/dist/theme.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+//#region src/theme.d.ts
+/**
+ * Publishes the preset that registers every recipe in this package, for an application's compiler
+ * to install.
+ *
+ * @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.
+ */
+declare const _default: import("@stealthscale/theme/authoring").Preset;
+//#endregion
+export { _default as default };

package/dist/theme.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { t as recipe } from "./recipe-19HSwhAG.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.
+*
+* @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.
+*/
+var theme_default = definePreset({
+	name: "@stealthscale/component-actions",
+	theme: { extend: { recipes: { button: recipe } } }
+});
+//#endregion
+export { theme_default as default };

package/package.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "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.",
+  "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",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stealth-scale/config.git",
+    "directory": "components/actions"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme": "./dist/theme.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "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",
+    "@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"
+  },
+  "peerDependencies": {
+    "@stealthscale/theme": "^0.3.0",
+    "react": "^19.3.0"
+  },
+  "engines": {
+    "node": ">=26.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test"
+  }
+}