@spark-web/box 6.0.0-rc.0 → 6.0.1

package/CHANGELOG.md

@@ -1,16 +1,49 @@
 # @spark-web/box
 
-## 6.0.0-rc.0
+## 6.0.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
+
+## 6.0.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/theme@5.12.0-rc.0
-  - @spark-web/utils@5.1.0-rc.0
+- Updated dependencies
+  [[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
+  - @spark-web/theme@5.13.0
+  - @spark-web/utils@5.1.0
+
+## 5.2.2
+
+### Patch Changes
+
+- [#698](https://github.com/brighte-labs/spark-web/pull/698)
+  [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
+  Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
+
+- Updated dependencies
+  [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
+  - @spark-web/theme@5.12.1
+
+## 5.2.1
+
+### Patch Changes
+
+- Updated dependencies
+  [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
+  - @spark-web/theme@5.12.0
 
 ## 5.2.0
 

package/CLAUDE.md

@@ -0,0 +1,87 @@
+# @spark-web/box — AI Context
+
+## What this is
+
+The foundational layout primitive. Every Spark component is built on `Box`. It
+exposes a prop-based API for applying theme-constrained styles to any HTML
+element. Use it when no higher-level layout component (`Stack`, `Row`,
+`Columns`) fits the shape of what you need.
+
+## What this is NOT
+
+- Not a text component — use `Text` for any rendered text content
+- Not a layout shorthand — for vertical stacks use `Stack`, for horizontal rows
+  use `Row`, for CSS grid use `Columns`
+- Not a button — use `Button` or `ButtonLink` for interactive elements
+
+## Props interface
+
+`Box` accepts all `BoxStyleProps` (see below) plus:
+
+| Prop        | Type                          | Notes                                            |
+| ----------- | ----------------------------- | ------------------------------------------------ |
+| `as`        | `keyof HTMLElementTagNameMap` | Changes the rendered element; defaults to `div`  |
+| `asElement` | `keyof HTMLElementTagNameMap` | Tells the reset system what element `as` renders |
+| `children`  | `ReactNode`                   | —                                                |
+| `data`      | `DataAttributeMap`            | Test/analytics attributes                        |
+| `id`        | `string`                      | —                                                |
+| `css`       | `CSSObject`                   | Escape hatch for styles not covered by props     |
+
+### BoxStyleProps — commonly used
+
+Spacing values map to `SparkTheme['spacing']` keys:
+`none | xsmall | small | medium | large | xlarge | xxlarge`
+
+Sizing values map to `SparkTheme['sizing']` keys:
+`xxsmall | xsmall | small | medium | large | xlarge | xxlarge | full`
+
+| Prop                              | Values                                                                       |
+| --------------------------------- | ---------------------------------------------------------------------------- |
+| `padding`                         | spacing token (responsive)                                                   |
+| `paddingX`                        | spacing token (responsive)                                                   |
+| `paddingY`                        | spacing token (responsive)                                                   |
+| `paddingTop/Bottom/Left/Right`    | spacing token (responsive)                                                   |
+| `margin`                          | spacing token (responsive)                                                   |
+| `marginX/Y/Top/Bottom/Left/Right` | spacing token (responsive)                                                   |
+| `gap`                             | spacing token (responsive, excludes `none` and `full`)                       |
+| `width`                           | sizing token or `'full'` (responsive)                                        |
+| `height`                          | sizing token (responsive)                                                    |
+| `display`                         | `'block' \| 'inline' \| 'inline-block' \| 'inline-flex' \| 'flex' \| 'none'` |
+| `flexDirection`                   | `'row' \| 'rowReverse' \| 'column' \| 'columnReverse'`                       |
+| `flexWrap`                        | `'wrap' \| 'nowrap'`                                                         |
+| `alignItems`                      | `'center' \| 'flexStart' \| 'flexEnd' \| 'stretch'`                          |
+| `justifyContent`                  | `'start' \| 'center' \| 'end' \| 'spaceBetween' \| 'stretch'`                |
+| `flexShrink`                      | `0 \| 1`                                                                     |
+| `position`                        | `'relative' \| 'absolute' \| 'fixed' \| 'sticky'`                            |
+| `top/bottom/left/right`           | `number` (responsive)                                                        |
+| `overflow`                        | `'hidden' \| 'auto' \| 'scroll' \| 'visible'`                                |
+| `background`                      | background token (e.g. `'surface' \| 'primary' \| 'primarySoft'`)            |
+| `border`                          | border color token (e.g. `'standard' \| 'primary'`)                          |
+| `borderRadius`                    | `'small' \| 'medium' \| 'large' \| 'full'`                                   |
+| `cursor`                          | `'default' \| 'pointer'`                                                     |
+
+## Token usage
+
+All values come from the theme — never raw hex, px, or Tailwind. Use
+`useTheme()` from `@spark-web/theme` for any value not expressible as a Box prop
+(e.g. inline color from `theme.color.foreground.muted`).
+
+The `background` prop automatically pushes a background context so child `Text`
+components can invert their color tone when placed on dark backgrounds.
+
+## Composition
+
+`Box` is the leaf — it does not compose other Spark components. Every other
+Spark component composes `Box` internally.
+
+## Do NOTs
+
+- NEVER use raw hex, px, em, rem, or Tailwind classes
+- NEVER use `Box` for text content — use `Text`
+- NEVER use `Box` when `Stack`, `Row`, or `Columns` fits the layout — those
+  components encode the correct flex/grid setup automatically
+- NEVER pass `display`, `alignItems`, `flexDirection`, or `justifyContent` to
+  `Stack` or `Row` — those are locked internally; use `Box` if you need custom
+  flex control
+- NEVER use `style={{}}` for theme values — use Box props or `css` prop with
+  theme tokens

package/dist/declarations/src/background-provider.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-export declare type BackgroundProviderProps = {
+export type BackgroundProviderProps = {
     type: 'light' | 'dark';
     children: ReactElement;
 };

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

@@ -1,9 +1,8 @@
-/** @jsxImportSource @emotion/react */
 import type { CSSObject } from '@emotion/react';
 import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { ReactNode } from 'react';
 import type { BoxStyleProps } from "./use-box-styles.js";
-export declare type BoxProps = {
+export type BoxProps = {
     /** Children element to be rendered inside the component. */
     children?: ReactNode;
     /** Sets data attributes on the component. */
@@ -20,30 +19,30 @@ export declare type BoxProps = {
     asElement?: keyof HTMLElementTagNameMap;
 } & BoxStyleProps;
 /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
-export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
+export declare const Box: <Comp extends import("react").ElementType = "div">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "text" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
     /** Children element to be rendered inside the component. */
     children?: ReactNode;
     /** Sets data attributes on the component. */
-    data?: DataAttributeMap | undefined;
+    data?: DataAttributeMap;
     /** An identifier which must be unique in the whole document. */
-    id?: string | undefined;
+    id?: string;
     /** Custom css styles. */
-    css?: CSSObject | undefined;
+    css?: CSSObject;
     /**
      * When providing a component using the "as" prop, optionally tell the system
      * what the underlying element will be. Used internally to manage reset
      * styles.
      */
-    asElement?: keyof HTMLElementTagNameMap | undefined;
+    asElement?: keyof HTMLElementTagNameMap;
 } & {
-    background?: string | number | undefined;
-    cursor?: "default" | "pointer" | undefined;
-    minHeight?: 0 | undefined;
-    minWidth?: 0 | undefined;
-    overflow?: "hidden" | "auto" | "scroll" | "visible" | undefined;
-    shadow?: "small" | "medium" | "large" | undefined;
-    userSelect?: "none" | undefined;
-} & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    background?: keyof import("@spark-web/theme").SparkTheme["color"]["background"];
+    cursor?: "default" | "pointer";
+    minHeight?: 0;
+    minWidth?: 0;
+    overflow?: "hidden" | "scroll" | "visible" | "auto";
+    shadow?: keyof import("@spark-web/theme").SparkTheme["shadow"] | string | null;
+    userSelect?: "none";
+} & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement;

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

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import type { BoxStyleProps } from "./use-box-styles.js";
-export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
+export type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
 export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
 export declare const useBackground: () => BackgroundVariant;
 export declare function renderBackgroundProvider(background: BackgroundVariant | undefined, element: ReactElement | null): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/declarations/src/use-box-styles.d.ts

@@ -1,8 +1,8 @@
 import type { ResponsiveProp, SparkTheme } from '@spark-web/theme';
-declare type ValidGapKeys = keyof Omit<SparkTheme['spacing'], 'none' | 'full'>;
-declare type ResponsiveSpacing = ResponsiveProp<keyof SparkTheme['spacing']>;
-declare type ResponsiveSizing = ResponsiveProp<keyof SparkTheme['sizing']>;
-export declare type ResponsiveBoxProps = {
+type ValidGapKeys = keyof Omit<SparkTheme['spacing'], 'none' | 'full'>;
+type ResponsiveSpacing = ResponsiveProp<keyof SparkTheme['spacing']>;
+type ResponsiveSizing = ResponsiveProp<keyof SparkTheme['sizing']>;
+export type ResponsiveBoxProps = {
     /**
      * The `margin` shorthand property sets the margin area on all four sides of
      * an element at once.
@@ -87,7 +87,7 @@ export declare type ResponsiveBoxProps = {
      * The `borderRadius` property rounds the corners of an element's outer
      * border edge.
      */
-    borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']>;
+    borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']> | number;
     /**
      * The `borderWidth` property sets the width of an element's border.
      */
@@ -137,22 +137,22 @@ export declare type ResponsiveBoxProps = {
      * The `top` property participates in specifying the vertical position of a
      * positioned element. It has no effect on non-positioned elements.
      */
-    top?: ResponsiveProp<0>;
+    top?: ResponsiveProp<number>;
     /**
      * The `right` property participates in specifying the horizontal position of
      * a positioned element. It has no effect on non-positioned elements.
      */
-    right?: ResponsiveProp<0>;
+    right?: ResponsiveProp<number>;
     /**
      * The `bottom` property participates in setting the vertical position of a
      * positioned element. It has no effect on non-positioned elements.
      */
-    bottom?: ResponsiveProp<0>;
+    bottom?: ResponsiveProp<number>;
     /**
      * The `left` property participates in specifying the horizontal position of a
      * positioned element. It has no effect on non-positioned elements.
      */
-    left?: ResponsiveProp<0>;
+    left?: ResponsiveProp<number>;
     /**
      * The `zIndex` property sets the "z-order" of a positioned element and its
      * descendants or flex items. Overlapping elements with a larger z-index cover
@@ -170,7 +170,7 @@ export declare type ResponsiveBoxProps = {
      */
     opacity?: ResponsiveProp<number>;
 };
-declare type UnresponsiveBoxProps = {
+type UnresponsiveBoxProps = {
     /** The `background` property sets the background color of an element. */
     background?: keyof SparkTheme['color']['background'];
     /**
@@ -197,11 +197,11 @@ declare type UnresponsiveBoxProps = {
      */
     overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
     /** The `boxShadow` property adds shadow effects around an element's frame. */
-    shadow?: keyof SparkTheme['shadow'];
+    shadow?: keyof SparkTheme['shadow'] | string | null;
     /** The `userSelect` property controls whether the user can select text. */
     userSelect?: 'none';
 };
-export declare type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
+export type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
 export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderTop, borderBottom, borderLeft, borderRight, borderRadius, borderWidth, bottom, cursor, display, flex, flexDirection, flexGrow, flexShrink, flexWrap, gap, height, justifyContent, left, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, minHeight, minWidth, opacity, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, right, shadow, top, userSelect, width, zIndex, }: BoxStyleProps) => import("facepaint").DynamicStyle[];
 declare const flexMap: {
     readonly alignItems: {

package/dist/spark-web-box.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJveC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

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

@@ -53,6 +53,10 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
   return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
 };
 
+function isObjKey(key, obj) {
+  return key in obj;
+}
+
 // TODO perf review
 // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
 
@@ -111,9 +115,18 @@ var useBoxStyles = function useBoxStyles(_ref) {
     width = _ref.width,
     zIndex = _ref.zIndex;
   var theme$1 = theme.useTheme();
+  var convertShadowValue = function convertShadowValue(shadow) {
+    if (!shadow) {
+      return undefined;
+    }
+    if (isObjKey(shadow, theme$1.shadow)) {
+      return theme$1.shadow[shadow];
+    }
+    return shadow;
+  };
   var unresponsiveProps = {
     background: background ? theme$1.color.background[background] : undefined,
-    boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
+    boxShadow: convertShadowValue(shadow),
     cursor: cursor,
     minHeight: minHeight,
     minWidth: minWidth,
@@ -162,7 +175,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
     paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
     paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
     // border
-    borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
+    borderRadius: typeof borderRadius === 'number' ? borderRadius : theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
     // flex: parent
     alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
     gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),

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

@@ -53,6 +53,10 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
   return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
 };
 
+function isObjKey(key, obj) {
+  return key in obj;
+}
+
 // TODO perf review
 // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
 
@@ -111,9 +115,18 @@ var useBoxStyles = function useBoxStyles(_ref) {
     width = _ref.width,
     zIndex = _ref.zIndex;
   var theme$1 = theme.useTheme();
+  var convertShadowValue = function convertShadowValue(shadow) {
+    if (!shadow) {
+      return undefined;
+    }
+    if (isObjKey(shadow, theme$1.shadow)) {
+      return theme$1.shadow[shadow];
+    }
+    return shadow;
+  };
   var unresponsiveProps = {
     background: background ? theme$1.color.background[background] : undefined,
-    boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
+    boxShadow: convertShadowValue(shadow),
     cursor: cursor,
     minHeight: minHeight,
     minWidth: minWidth,
@@ -162,7 +175,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
     paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
     paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
     // border
-    borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
+    borderRadius: typeof borderRadius === 'number' ? borderRadius : theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
     // flex: parent
     alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
     gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),

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

@@ -49,6 +49,10 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
   return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
 };
 
+function isObjKey(key, obj) {
+  return key in obj;
+}
+
 // TODO perf review
 // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
 
@@ -107,9 +111,18 @@ var useBoxStyles = function useBoxStyles(_ref) {
     width = _ref.width,
     zIndex = _ref.zIndex;
   var theme = useTheme();
+  var convertShadowValue = function convertShadowValue(shadow) {
+    if (!shadow) {
+      return undefined;
+    }
+    if (isObjKey(shadow, theme.shadow)) {
+      return theme.shadow[shadow];
+    }
+    return shadow;
+  };
   var unresponsiveProps = {
     background: background ? theme.color.background[background] : undefined,
-    boxShadow: shadow ? theme.shadow[shadow] : undefined,
+    boxShadow: convertShadowValue(shadow),
     cursor: cursor,
     minHeight: minHeight,
     minWidth: minWidth,
@@ -158,7 +171,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
     paddingLeft: theme.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme.spacing),
     paddingRight: theme.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme.spacing),
     // border
-    borderRadius: theme.utils.mapResponsiveScale(borderRadius, theme.border.radius),
+    borderRadius: typeof borderRadius === 'number' ? borderRadius : theme.utils.mapResponsiveScale(borderRadius, theme.border.radius),
     // flex: parent
     alignItems: theme.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
     gap: theme.utils.mapResponsiveScale(gap, theme.spacing),

package/package.json

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