@spark-web/box 5.2.0 → 6.0.0-rc.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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/declarations/src/box.d.ts +3 -3
  3. package/dist/declarations/src/use-box-styles.d.ts +2 -2
  4. package/dist/spark-web-box.cjs.dev.js +2 -15
  5. package/dist/spark-web-box.cjs.prod.js +2 -15
  6. package/dist/spark-web-box.esm.js +2 -15
  7. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 6.0.0-rc.0
4
+
5
+ ### Minor Changes
6
+
7
+ - update react version and other packages
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/theme@5.12.0-rc.0
13
+ - @spark-web/utils@5.1.0-rc.0
14
+
3
15
  ## 5.2.0
4
16
 
5
17
  ### Minor Changes
package/dist/declarations/src/box.d.ts CHANGED
@@ -22,7 +22,7 @@ export declare type BoxProps = {
22
22
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
23
23
  export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
24
24
  as?: Comp | undefined;
25
- ref?: import("react").Ref<Comp extends "symbol" | "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" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "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" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
25
+ 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;
26
26
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
27
27
  /** Children element to be rendered inside the component. */
28
28
  children?: ReactNode;
@@ -43,7 +43,7 @@ export declare const Box: <Comp extends import("react").ElementType<any, keyof i
43
43
  cursor?: "default" | "pointer" | undefined;
44
44
  minHeight?: 0 | undefined;
45
45
  minWidth?: 0 | undefined;
46
- overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
47
- shadow?: string | null | undefined;
46
+ overflow?: "hidden" | "auto" | "scroll" | "visible" | undefined;
47
+ shadow?: "small" | "medium" | "large" | undefined;
48
48
  userSelect?: "none" | undefined;
49
49
  } & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/declarations/src/use-box-styles.d.ts CHANGED
@@ -87,7 +87,7 @@ export declare type ResponsiveBoxProps = {
87
87
  * The `borderRadius` property rounds the corners of an element's outer
88
88
  * border edge.
89
89
  */
90
- borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']> | number;
90
+ borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']>;
91
91
  /**
92
92
  * The `borderWidth` property sets the width of an element's border.
93
93
  */
@@ -197,7 +197,7 @@ declare type UnresponsiveBoxProps = {
197
197
  */
198
198
  overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
199
199
  /** The `boxShadow` property adds shadow effects around an element's frame. */
200
- shadow?: keyof SparkTheme['shadow'] | string | null;
200
+ shadow?: keyof SparkTheme['shadow'];
201
201
  /** The `userSelect` property controls whether the user can select text. */
202
202
  userSelect?: 'none';
203
203
  };
package/dist/spark-web-box.cjs.dev.js CHANGED
@@ -53,10 +53,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
53
53
  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
54
54
  };
55
55
 
56
- function isObjKey(key, obj) {
57
- return key in obj;
58
- }
59
-
60
56
  // TODO perf review
61
57
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
62
58
 
@@ -115,18 +111,9 @@ var useBoxStyles = function useBoxStyles(_ref) {
115
111
  width = _ref.width,
116
112
  zIndex = _ref.zIndex;
117
113
  var theme$1 = theme.useTheme();
118
- var convertShadowValue = function convertShadowValue(shadow) {
119
- if (!shadow) {
120
- return undefined;
121
- }
122
- if (isObjKey(shadow, theme$1.shadow)) {
123
- return theme$1.shadow[shadow];
124
- }
125
- return shadow;
126
- };
127
114
  var unresponsiveProps = {
128
115
  background: background ? theme$1.color.background[background] : undefined,
129
- boxShadow: convertShadowValue(shadow),
116
+ boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
130
117
  cursor: cursor,
131
118
  minHeight: minHeight,
132
119
  minWidth: minWidth,
@@ -175,7 +162,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
175
162
  paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
176
163
  paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
177
164
  // border
178
- borderRadius: typeof borderRadius === 'number' ? borderRadius : theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
165
+ borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
179
166
  // flex: parent
180
167
  alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
181
168
  gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -53,10 +53,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
53
53
  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
54
54
  };
55
55
 
56
- function isObjKey(key, obj) {
57
- return key in obj;
58
- }
59
-
60
56
  // TODO perf review
61
57
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
62
58
 
@@ -115,18 +111,9 @@ var useBoxStyles = function useBoxStyles(_ref) {
115
111
  width = _ref.width,
116
112
  zIndex = _ref.zIndex;
117
113
  var theme$1 = theme.useTheme();
118
- var convertShadowValue = function convertShadowValue(shadow) {
119
- if (!shadow) {
120
- return undefined;
121
- }
122
- if (isObjKey(shadow, theme$1.shadow)) {
123
- return theme$1.shadow[shadow];
124
- }
125
- return shadow;
126
- };
127
114
  var unresponsiveProps = {
128
115
  background: background ? theme$1.color.background[background] : undefined,
129
- boxShadow: convertShadowValue(shadow),
116
+ boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
130
117
  cursor: cursor,
131
118
  minHeight: minHeight,
132
119
  minWidth: minWidth,
@@ -175,7 +162,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
175
162
  paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
176
163
  paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
177
164
  // border
178
- borderRadius: typeof borderRadius === 'number' ? borderRadius : theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
165
+ borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
179
166
  // flex: parent
180
167
  alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
181
168
  gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
package/dist/spark-web-box.esm.js CHANGED
@@ -49,10 +49,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
49
49
  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
50
50
  };
51
51
 
52
- function isObjKey(key, obj) {
53
- return key in obj;
54
- }
55
-
56
52
  // TODO perf review
57
53
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
58
54
 
@@ -111,18 +107,9 @@ var useBoxStyles = function useBoxStyles(_ref) {
111
107
  width = _ref.width,
112
108
  zIndex = _ref.zIndex;
113
109
  var theme = useTheme();
114
- var convertShadowValue = function convertShadowValue(shadow) {
115
- if (!shadow) {
116
- return undefined;
117
- }
118
- if (isObjKey(shadow, theme.shadow)) {
119
- return theme.shadow[shadow];
120
- }
121
- return shadow;
122
- };
123
110
  var unresponsiveProps = {
124
111
  background: background ? theme.color.background[background] : undefined,
125
- boxShadow: convertShadowValue(shadow),
112
+ boxShadow: shadow ? theme.shadow[shadow] : undefined,
126
113
  cursor: cursor,
127
114
  minHeight: minHeight,
128
115
  minWidth: minWidth,
@@ -171,7 +158,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
171
158
  paddingLeft: theme.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme.spacing),
172
159
  paddingRight: theme.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme.spacing),
173
160
  // border
174
- borderRadius: typeof borderRadius === 'number' ? borderRadius : theme.utils.mapResponsiveScale(borderRadius, theme.border.radius),
161
+ borderRadius: theme.utils.mapResponsiveScale(borderRadius, theme.border.radius),
175
162
  // flex: parent
176
163
  alignItems: theme.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
177
164
  gap: theme.utils.mapResponsiveScale(gap, theme.spacing),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/box",
3
- "version": "5.2.0",
3
+ "version": "6.0.0-rc.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,16 +17,16 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/utils": "^5.0.0"
20
+ "@spark-web/utils": "^5.1.0-rc.0"
21
21
  },
22
22
  "devDependencies": {
23
- "@spark-web/theme": "^5.10.0",
24
- "@types/react": "^18.2.0",
25
- "react": "^18.2.0"
23
+ "@spark-web/theme": "^5.12.0-rc.0",
24
+ "@types/react": "^19.1.0",
25
+ "react": "^19.1.0"
26
26
  },
27
27
  "peerDependencies": {
28
- "@spark-web/theme": "^5.10.0",
29
- "react": ">=17.0.2"
28
+ "@spark-web/theme": "^5.12.0-rc.0",
29
+ "react": ">=19.1.0"
30
30
  },
31
31
  "engines": {
32
32
  "node": ">=14"