@spark-web/box 5.0.0-rc.24 → 5.0.0-rc.26

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 +25 -0
  2. package/dist/declarations/src/box.d.ts +1 -1
  3. package/dist/declarations/src/use-box-styles.d.ts +5 -5
  4. package/dist/spark-web-box.cjs.dev.js +11 -5
  5. package/dist/spark-web-box.cjs.prod.js +11 -5
  6. package/dist/spark-web-box.esm.js +11 -5
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 5.0.0-rc.26
4
+
5
+ ### Minor Changes
6
+
7
+ - Roll back on using theme prop for component level theming; prefer using
8
+ ThemeProvider in applications instead
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies []:
13
+ - @spark-web/theme@5.0.0-rc.26
14
+ - @spark-web/utils@5.0.0-rc.26
15
+
16
+ ## 5.0.0-rc.25
17
+
18
+ ### Minor Changes
19
+
20
+ - Implement checkbox tokens for test theme
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies []:
25
+ - @spark-web/theme@5.0.0-rc.25
26
+ - @spark-web/utils@5.0.0-rc.25
27
+
3
28
  ## 5.0.0-rc.24
4
29
 
5
30
  ### 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" | "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;
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;
package/dist/declarations/src/use-box-styles.d.ts CHANGED
@@ -74,15 +74,15 @@ export declare type ResponsiveBoxProps = {
74
74
  */
75
75
  paddingX?: ResponsiveSpacing;
76
76
  /** The `border` property sets the color of an element's border. */
77
- border?: ResponsiveProp<keyof SparkTheme['border']['color']>;
77
+ border?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
78
78
  /** The `border` property sets the color of an element's border on the top side. */
79
- borderTop?: ResponsiveProp<keyof SparkTheme['border']['color']>;
79
+ borderTop?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
80
80
  /** The `border` property sets the color of an element's border on the bottom side. */
81
- borderBottom?: ResponsiveProp<keyof SparkTheme['border']['color']>;
81
+ borderBottom?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
82
82
  /** The `border` property sets the color of an element's border on the left side. */
83
- borderLeft?: ResponsiveProp<keyof SparkTheme['border']['color']>;
83
+ borderLeft?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
84
84
  /** The `border` property sets the color of an element's border on the right side. */
85
- borderRight?: ResponsiveProp<keyof SparkTheme['border']['color']>;
85
+ borderRight?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
86
86
  /**
87
87
  * The `borderRadius` property rounds the corners of an element's outer
88
88
  * border edge.
package/dist/spark-web-box.cjs.dev.js CHANGED
@@ -121,25 +121,31 @@ var useBoxStyles = function useBoxStyles(_ref) {
121
121
  overflow: overflow,
122
122
  userSelect: userSelect
123
123
  };
124
+ var convertBorderValue = function convertBorderValue(value, scaleDefinition) {
125
+ if (!(typeof value === 'string' && value in scaleDefinition)) {
126
+ return value;
127
+ }
128
+ return theme$1.utils.mapResponsiveScale(value, scaleDefinition);
129
+ };
124
130
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
125
131
  borderStyle: 'solid',
126
- borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
132
+ borderColor: convertBorderValue(border, theme$1.border.color),
127
133
  borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
128
134
  } : {}), borderTop ? {
129
135
  borderTopStyle: 'solid',
130
- borderTopColor: theme$1.utils.mapResponsiveScale(borderTop, theme$1.border.color),
136
+ borderTopColor: convertBorderValue(borderTop, theme$1.border.color),
131
137
  borderTopWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
132
138
  } : {}), borderBottom ? {
133
139
  borderBottomStyle: 'solid',
134
- borderBottomColor: theme$1.utils.mapResponsiveScale(borderBottom, theme$1.border.color),
140
+ borderBottomColor: convertBorderValue(borderBottom, theme$1.border.color),
135
141
  borderBottomWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
136
142
  } : {}), borderLeft ? {
137
143
  borderLeftStyle: 'solid',
138
- borderLeftColor: theme$1.utils.mapResponsiveScale(borderLeft, theme$1.border.color),
144
+ borderLeftColor: convertBorderValue(borderLeft, theme$1.border.color),
139
145
  borderLeftWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
140
146
  } : {}), borderRight ? {
141
147
  borderRightStyle: 'solid',
142
- borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
148
+ borderRightColor: convertBorderValue(borderRight, theme$1.border.color),
143
149
  borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
144
150
  } : {});
145
151
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -121,25 +121,31 @@ var useBoxStyles = function useBoxStyles(_ref) {
121
121
  overflow: overflow,
122
122
  userSelect: userSelect
123
123
  };
124
+ var convertBorderValue = function convertBorderValue(value, scaleDefinition) {
125
+ if (!(typeof value === 'string' && value in scaleDefinition)) {
126
+ return value;
127
+ }
128
+ return theme$1.utils.mapResponsiveScale(value, scaleDefinition);
129
+ };
124
130
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
125
131
  borderStyle: 'solid',
126
- borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
132
+ borderColor: convertBorderValue(border, theme$1.border.color),
127
133
  borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
128
134
  } : {}), borderTop ? {
129
135
  borderTopStyle: 'solid',
130
- borderTopColor: theme$1.utils.mapResponsiveScale(borderTop, theme$1.border.color),
136
+ borderTopColor: convertBorderValue(borderTop, theme$1.border.color),
131
137
  borderTopWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
132
138
  } : {}), borderBottom ? {
133
139
  borderBottomStyle: 'solid',
134
- borderBottomColor: theme$1.utils.mapResponsiveScale(borderBottom, theme$1.border.color),
140
+ borderBottomColor: convertBorderValue(borderBottom, theme$1.border.color),
135
141
  borderBottomWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
136
142
  } : {}), borderLeft ? {
137
143
  borderLeftStyle: 'solid',
138
- borderLeftColor: theme$1.utils.mapResponsiveScale(borderLeft, theme$1.border.color),
144
+ borderLeftColor: convertBorderValue(borderLeft, theme$1.border.color),
139
145
  borderLeftWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
140
146
  } : {}), borderRight ? {
141
147
  borderRightStyle: 'solid',
142
- borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
148
+ borderRightColor: convertBorderValue(borderRight, theme$1.border.color),
143
149
  borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
144
150
  } : {});
145
151
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
package/dist/spark-web-box.esm.js CHANGED
@@ -117,25 +117,31 @@ var useBoxStyles = function useBoxStyles(_ref) {
117
117
  overflow: overflow,
118
118
  userSelect: userSelect
119
119
  };
120
+ var convertBorderValue = function convertBorderValue(value, scaleDefinition) {
121
+ if (!(typeof value === 'string' && value in scaleDefinition)) {
122
+ return value;
123
+ }
124
+ return theme.utils.mapResponsiveScale(value, scaleDefinition);
125
+ };
120
126
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
121
127
  borderStyle: 'solid',
122
- borderColor: theme.utils.mapResponsiveScale(border, theme.border.color),
128
+ borderColor: convertBorderValue(border, theme.border.color),
123
129
  borderWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
124
130
  } : {}), borderTop ? {
125
131
  borderTopStyle: 'solid',
126
- borderTopColor: theme.utils.mapResponsiveScale(borderTop, theme.border.color),
132
+ borderTopColor: convertBorderValue(borderTop, theme.border.color),
127
133
  borderTopWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
128
134
  } : {}), borderBottom ? {
129
135
  borderBottomStyle: 'solid',
130
- borderBottomColor: theme.utils.mapResponsiveScale(borderBottom, theme.border.color),
136
+ borderBottomColor: convertBorderValue(borderBottom, theme.border.color),
131
137
  borderBottomWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
132
138
  } : {}), borderLeft ? {
133
139
  borderLeftStyle: 'solid',
134
- borderLeftColor: theme.utils.mapResponsiveScale(borderLeft, theme.border.color),
140
+ borderLeftColor: convertBorderValue(borderLeft, theme.border.color),
135
141
  borderLeftWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
136
142
  } : {}), borderRight ? {
137
143
  borderRightStyle: 'solid',
138
- borderRightColor: theme.utils.mapResponsiveScale(borderRight, theme.border.color),
144
+ borderRightColor: convertBorderValue(borderRight, theme.border.color),
139
145
  borderRightWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
140
146
  } : {});
141
147
  return theme.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/box",
3
- "version": "5.0.0-rc.24",
3
+ "version": "5.0.0-rc.26",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,8 +17,8 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/theme": "^5.0.0-rc.24",
21
- "@spark-web/utils": "^5.0.0-rc.24"
20
+ "@spark-web/theme": "^5.0.0-rc.26",
21
+ "@spark-web/utils": "^5.0.0-rc.26"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/react": "^18.2.0",