@spark-web/box 5.1.0 → 5.2.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 +9 -0
  2. package/dist/declarations/src/box.d.ts +2 -2
  3. package/dist/declarations/src/use-box-styles.d.ts +2 -2
  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,14 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 5.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#632](https://github.com/brighte-labs/spark-web/pull/632)
8
+ [`ecb2391`](https://github.com/brighte-labs/spark-web/commit/ecb23918e5994e174bb9b48accd52db940dbcbf0)
9
+ Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Introduce
10
+ component-level theming to TextInput component
11
+
3
12
  ## 5.1.0
4
13
 
5
14
  ### 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" | "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;
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;
@@ -44,6 +44,6 @@ export declare const Box: <Comp extends import("react").ElementType<any, keyof i
44
44
  minHeight?: 0 | undefined;
45
45
  minWidth?: 0 | undefined;
46
46
  overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
47
- shadow?: "small" | "medium" | "large" | null | 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
  */
@@ -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.0",
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.10.0",
24
24
  "@types/react": "^18.2.0",
25
25
  "react": "^18.2.0"
26
26
  },
27
27
  "peerDependencies": {
28
+ "@spark-web/theme": "^5.10.0",
28
29
  "react": ">=17.0.2"
29
30
  },
30
31
  "engines": {