@spark-web/spinner 5.1.0-rc.0 → 5.1.1

package/CHANGELOG.md

@@ -1,18 +1,34 @@
 # @spark-web/spinner
 
-## 5.1.0-rc.0
+## 5.1.1
+
+### Patch Changes
+
+- [#782](https://github.com/brighte-labs/spark-web/pull/782)
+  [`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
+  **docs:** add CLAUDE.md AI context files to foundation and form packages;
+  patch data-table with manual sort and spinner overlay patterns
+- Updated dependencies
+  [[`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)]:
+  - @spark-web/box@6.0.1
+
+## 5.1.0
 
 ### Minor Changes
 
-- update react version and other packages
+- [#667](https://github.com/brighte-labs/spark-web/pull/667)
+  [`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)
+  Thanks [@Leo704099](https://github.com/Leo704099)! - Support react 17 to 19
 
 ### Patch Changes
 
-- Updated dependencies []:
-  - @spark-web/utils@5.1.0-rc.0
-  - @spark-web/a11y@5.3.0-rc.0
-  - @spark-web/icon@5.1.0-rc.0
-  - @spark-web/box@6.0.0-rc.0
+- Updated dependencies
+  [[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
+  - @spark-web/utils@5.1.0
+  - @spark-web/a11y@5.3.0
+  - @spark-web/icon@5.1.0
+  - @spark-web/box@6.0.0
 
 ## 5.0.1
 

package/CLAUDE.md

@@ -0,0 +1,73 @@
+# @spark-web/spinner — AI Context
+
+## What this is
+
+An animated circular loading indicator. Used to communicate that an async
+operation is in progress. Includes a visually hidden "is loading" label for
+screen readers.
+
+## What this is NOT
+
+- Not a progress bar — does not communicate percentage completion
+- Not the loading state for `DataTable` — use the `isLoading` prop on
+  `DataTable` instead of placing a `Spinner` externally alongside the table
+- Not a skeleton loader — for page-level skeleton loading use placeholder shapes
+
+## Props interface
+
+| Prop   | Type                    | Default     | Notes                      |
+| ------ | ----------------------- | ----------- | -------------------------- |
+| `tone` | icon tone (string)      | —           | Controls SVG stroke color  |
+| `size` | `'xxsmall' \| 'xsmall'` | `'xxsmall'` | Visual size of the spinner |
+| `data` | `DataAttributeMap`      | —           | Test/analytics attributes  |
+
+## Common tones
+
+- `tone="primary"` — green on white surface (default loading state)
+- `tone="neutral"` — grey, for subdued contexts
+- No tone — inherits ambient foreground color
+
+## Common patterns
+
+### Inline loading overlay (not inside DataTable)
+
+Use only when you cannot use `DataTable`'s `isLoading` prop — e.g., a full-page
+overlay or a custom loading region:
+
+```tsx
+{
+  isLoading && (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      gap="small"
+      padding="xlarge"
+    >
+      <Spinner tone="primary" size="xsmall" />
+      <Text tone="muted">Loading</Text>
+    </Box>
+  );
+}
+```
+
+### Inline next to text
+
+```tsx
+<Row gap="small" alignY="center">
+  <Spinner tone="primary" />
+  <Text tone="muted">Saving…</Text>
+</Row>
+```
+
+## Do NOTs
+
+- NEVER render a `Spinner` outside `DataTable` to indicate table loading — use
+  `DataTable`'s `isLoading` prop
+- NEVER use a size larger than `xsmall` — only `xxsmall` and `xsmall` are
+  supported
+- NEVER wrap `<Spinner>` in `aria-hidden="true"` — the component includes a
+  built-in visually hidden `"is loading"` label for screen readers. The inner
+  SVG is already `aria-hidden` by the component; do not suppress the outer
+  element.

package/dist/declarations/src/spinner.d.ts

@@ -1,6 +1,6 @@
 import type { IconProps } from '@spark-web/icon';
 import type { DataAttributeMap } from '@spark-web/utils/internal';
-export declare type SpinnerProps = {
+export type SpinnerProps = {
     /** Provide a tone to influence elements of the field, and its input. */
     tone?: IconProps['tone'];
     /** The size of the nested radios. */

package/dist/spark-web-spinner.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
+export * from "./declarations/src/index.js";
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXNwaW5uZXIuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/spark-web-spinner.cjs.dev.js

@@ -28,7 +28,7 @@ function Spinner(_ref) {
     justifyContent: "center",
     data: data,
     children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
-      children: "Image of a partial circle indicating \"loading\"."
+      children: "is loading"
     }), jsxRuntime.jsx(SpinnerIcon, {
       size: size,
       tone: tone,

package/dist/spark-web-spinner.cjs.prod.js

@@ -28,7 +28,7 @@ function Spinner(_ref) {
     justifyContent: "center",
     data: data,
     children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
-      children: "Image of a partial circle indicating \"loading\"."
+      children: "is loading"
     }), jsxRuntime.jsx(SpinnerIcon, {
       size: size,
       tone: tone,

package/dist/spark-web-spinner.esm.js

@@ -24,7 +24,7 @@ function Spinner(_ref) {
     justifyContent: "center",
     data: data,
     children: [jsx(VisuallyHidden, {
-      children: "Image of a partial circle indicating \"loading\"."
+      children: "is loading"
     }), jsx(SpinnerIcon, {
       size: size,
       tone: tone,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/spinner",
-  "version": "5.1.0-rc.0",
+  "version": "5.1.1",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -11,23 +11,24 @@
   "module": "dist/spark-web-spinner.esm.js",
   "files": [
     "CHANGELOG.md",
+    "CLAUDE.md",
     "dist",
     "README.md"
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^5.3.0-rc.0",
-    "@spark-web/box": "^6.0.0-rc.0",
-    "@spark-web/icon": "^5.1.0-rc.0",
-    "@spark-web/utils": "^5.1.0-rc.0"
+    "@spark-web/a11y": "^5.3.0",
+    "@spark-web/box": "^6.0.1",
+    "@spark-web/icon": "^5.1.0",
+    "@spark-web/utils": "^5.1.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "react": "^19.1.0"
   },
   "peerDependencies": {
-    "react": ">=19.1.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=14"