@spark-web/box 5.1.0 → 5.2.2

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 +29 -0
  2. package/dist/declarations/src/box.d.ts +3 -3
  3. package/dist/declarations/src/use-box-styles.d.ts +6 -6
  4. package/dist/spark-web-box.cjs.dev.js +15 -2
  5. package/dist/spark-web-box.cjs.prod.js +15 -2
  6. package/dist/spark-web-box.esm.js +15 -2
  7. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 5.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#698](https://github.com/brighte-labs/spark-web/pull/698)
8
+ [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
9
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
10
+
11
+ - Updated dependencies
12
+ [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
13
+ - @spark-web/theme@5.12.1
14
+
15
+ ## 5.2.1
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+ [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
21
+ - @spark-web/theme@5.12.0
22
+
23
+ ## 5.2.0
24
+
25
+ ### Minor Changes
26
+
27
+ - [#632](https://github.com/brighte-labs/spark-web/pull/632)
28
+ [`ecb2391`](https://github.com/brighte-labs/spark-web/commit/ecb23918e5994e174bb9b48accd52db940dbcbf0)
29
+ Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Introduce
30
+ component-level theming to TextInput component
31
+
3
32
  ## 5.1.0
4
33
 
5
34
  ### 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" | "text" | "switch" | "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" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "switch" | "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" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
25
+ ref?: import("react").Ref<Comp extends "symbol" | "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" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "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" | "text" | "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?: "small" | "medium" | "large" | null | undefined;
46
+ overflow?: "hidden" | "scroll" | "auto" | "visible" | undefined;
47
+ shadow?: string | null | 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']>;
90
+ borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']> | number;
91
91
  /**
92
92
  * The `borderWidth` property sets the width of an element's border.
93
93
  */
@@ -137,22 +137,22 @@ export declare type ResponsiveBoxProps = {
137
137
  * The `top` property participates in specifying the vertical position of a
138
138
  * positioned element. It has no effect on non-positioned elements.
139
139
  */
140
- top?: ResponsiveProp<0>;
140
+ top?: ResponsiveProp<number>;
141
141
  /**
142
142
  * The `right` property participates in specifying the horizontal position of
143
143
  * a positioned element. It has no effect on non-positioned elements.
144
144
  */
145
- right?: ResponsiveProp<0>;
145
+ right?: ResponsiveProp<number>;
146
146
  /**
147
147
  * The `bottom` property participates in setting the vertical position of a
148
148
  * positioned element. It has no effect on non-positioned elements.
149
149
  */
150
- bottom?: ResponsiveProp<0>;
150
+ bottom?: ResponsiveProp<number>;
151
151
  /**
152
152
  * The `left` property participates in specifying the horizontal position of a
153
153
  * positioned element. It has no effect on non-positioned elements.
154
154
  */
155
- left?: ResponsiveProp<0>;
155
+ left?: ResponsiveProp<number>;
156
156
  /**
157
157
  * The `zIndex` property sets the "z-order" of a positioned element and its
158
158
  * descendants or flex items. Overlapping elements with a larger z-index cover
@@ -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'] | null;
200
+ shadow?: keyof SparkTheme['shadow'] | string | null;
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,6 +53,10 @@ 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
+
56
60
  // TODO perf review
57
61
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
58
62
 
@@ -111,9 +115,18 @@ var useBoxStyles = function useBoxStyles(_ref) {
111
115
  width = _ref.width,
112
116
  zIndex = _ref.zIndex;
113
117
  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
+ };
114
127
  var unresponsiveProps = {
115
128
  background: background ? theme$1.color.background[background] : undefined,
116
- boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
129
+ boxShadow: convertShadowValue(shadow),
117
130
  cursor: cursor,
118
131
  minHeight: minHeight,
119
132
  minWidth: minWidth,
@@ -162,7 +175,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
162
175
  paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
163
176
  paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
164
177
  // border
165
- borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
178
+ borderRadius: typeof borderRadius === 'number' ? borderRadius : theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
166
179
  // flex: parent
167
180
  alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
168
181
  gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -53,6 +53,10 @@ 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
+
56
60
  // TODO perf review
57
61
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
58
62
 
@@ -111,9 +115,18 @@ var useBoxStyles = function useBoxStyles(_ref) {
111
115
  width = _ref.width,
112
116
  zIndex = _ref.zIndex;
113
117
  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
+ };
114
127
  var unresponsiveProps = {
115
128
  background: background ? theme$1.color.background[background] : undefined,
116
- boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
129
+ boxShadow: convertShadowValue(shadow),
117
130
  cursor: cursor,
118
131
  minHeight: minHeight,
119
132
  minWidth: minWidth,
@@ -162,7 +175,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
162
175
  paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
163
176
  paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
164
177
  // border
165
- borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
178
+ borderRadius: typeof borderRadius === 'number' ? borderRadius : theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
166
179
  // flex: parent
167
180
  alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
168
181
  gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
package/dist/spark-web-box.esm.js CHANGED
@@ -49,6 +49,10 @@ 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
+
52
56
  // TODO perf review
53
57
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
54
58
 
@@ -107,9 +111,18 @@ var useBoxStyles = function useBoxStyles(_ref) {
107
111
  width = _ref.width,
108
112
  zIndex = _ref.zIndex;
109
113
  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
+ };
110
123
  var unresponsiveProps = {
111
124
  background: background ? theme.color.background[background] : undefined,
112
- boxShadow: shadow ? theme.shadow[shadow] : undefined,
125
+ boxShadow: convertShadowValue(shadow),
113
126
  cursor: cursor,
114
127
  minHeight: minHeight,
115
128
  minWidth: minWidth,
@@ -158,7 +171,7 @@ var useBoxStyles = function useBoxStyles(_ref) {
158
171
  paddingLeft: theme.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme.spacing),
159
172
  paddingRight: theme.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme.spacing),
160
173
  // border
161
- borderRadius: theme.utils.mapResponsiveScale(borderRadius, theme.border.radius),
174
+ borderRadius: typeof borderRadius === 'number' ? borderRadius : theme.utils.mapResponsiveScale(borderRadius, theme.border.radius),
162
175
  // flex: parent
163
176
  alignItems: theme.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
164
177
  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.1.0",
3
+ "version": "5.2.2",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,14 +17,15 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/theme": "^5.10.0",
21
20
  "@spark-web/utils": "^5.0.0"
22
21
  },
23
22
  "devDependencies": {
23
+ "@spark-web/theme": "^5.12.1",
24
24
  "@types/react": "^18.2.0",
25
25
  "react": "^18.2.0"
26
26
  },
27
27
  "peerDependencies": {
28
+ "@spark-web/theme": "^5.12.1",
28
29
  "react": ">=17.0.2"
29
30
  },
30
31
  "engines": {