@spark-web/box 2.0.0-rc.9 → 5.0.0-rc.24

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 +156 -0
  2. package/dist/declarations/src/box.d.ts +4 -3
  3. package/dist/declarations/src/use-box-styles.d.ts +14 -14
  4. package/dist/spark-web-box.cjs.dev.js +5 -11
  5. package/dist/spark-web-box.cjs.prod.js +5 -11
  6. package/dist/spark-web-box.esm.js +6 -12
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,161 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 5.0.0-rc.24
4
+
5
+ ### Minor Changes
6
+
7
+ - Resolve issues with package build output
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/theme@5.0.0-rc.24
13
+ - @spark-web/utils@5.0.0-rc.24
14
+
15
+ ## 2.0.0-rc.21
16
+
17
+ ### Minor Changes
18
+
19
+ - Introduce global theming provider to set global default theme
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies []:
24
+ - @spark-web/theme@4.0.0-rc.21
25
+ - @spark-web/utils@2.0.0-rc.21
26
+
27
+ ## 2.0.0-rc.20
28
+
29
+ ### Minor Changes
30
+
31
+ - Support for component-level theming; button-level theming
32
+
33
+ ### Patch Changes
34
+
35
+ - Updated dependencies []:
36
+ - @spark-web/theme@4.0.0-rc.20
37
+ - @spark-web/utils@2.0.0-rc.20
38
+
39
+ ## 2.0.0-rc.19
40
+
41
+ ### Major Changes
42
+
43
+ - test
44
+
45
+ ### Patch Changes
46
+
47
+ - Updated dependencies []:
48
+ - @spark-web/theme@4.0.0-rc.19
49
+ - @spark-web/utils@2.0.0-rc.19
50
+
51
+ ## 2.0.0-rc.18
52
+
53
+ ### Major Changes
54
+
55
+ - tests
56
+
57
+ ### Patch Changes
58
+
59
+ - Updated dependencies []:
60
+ - @spark-web/theme@4.0.0-rc.18
61
+ - @spark-web/utils@2.0.0-rc.18
62
+
63
+ ## 2.0.0-rc.17
64
+
65
+ ### Major Changes
66
+
67
+ - test
68
+
69
+ ### Patch Changes
70
+
71
+ - Updated dependencies []:
72
+ - @spark-web/theme@4.0.0-rc.17
73
+ - @spark-web/utils@2.0.0-rc.17
74
+
75
+ ## 2.0.0-rc.16
76
+
77
+ ### Major Changes
78
+
79
+ - test
80
+
81
+ ### Patch Changes
82
+
83
+ - Updated dependencies []:
84
+ - @spark-web/theme@4.0.0-rc.16
85
+ - @spark-web/utils@2.0.0-rc.16
86
+
87
+ ## 2.0.0-rc.15
88
+
89
+ ### Major Changes
90
+
91
+ - test
92
+
93
+ ### Patch Changes
94
+
95
+ - Updated dependencies []:
96
+ - @spark-web/theme@4.0.0-rc.15
97
+ - @spark-web/utils@2.0.0-rc.15
98
+
99
+ ## 2.0.0-rc.14
100
+
101
+ ### Major Changes
102
+
103
+ - test
104
+
105
+ ### Patch Changes
106
+
107
+ - Updated dependencies []:
108
+ - @spark-web/theme@4.0.0-rc.14
109
+ - @spark-web/utils@2.0.0-rc.14
110
+
111
+ ## 2.0.0-rc.13
112
+
113
+ ### Major Changes
114
+
115
+ - test
116
+
117
+ ### Patch Changes
118
+
119
+ - Updated dependencies []:
120
+ - @spark-web/theme@4.0.0-rc.13
121
+ - @spark-web/utils@2.0.0-rc.13
122
+
123
+ ## 2.0.0-rc.12
124
+
125
+ ### Major Changes
126
+
127
+ - test
128
+
129
+ ### Patch Changes
130
+
131
+ - Updated dependencies []:
132
+ - @spark-web/theme@4.0.0-rc.12
133
+ - @spark-web/utils@2.0.0-rc.12
134
+
135
+ ## 2.0.0-rc.11
136
+
137
+ ### Major Changes
138
+
139
+ - test
140
+
141
+ ### Patch Changes
142
+
143
+ - Updated dependencies []:
144
+ - @spark-web/theme@4.0.0-rc.11
145
+ - @spark-web/utils@2.0.0-rc.11
146
+
147
+ ## 2.0.0-rc.10
148
+
149
+ ### Major Changes
150
+
151
+ - test
152
+
153
+ ### Patch Changes
154
+
155
+ - Updated dependencies []:
156
+ - @spark-web/theme@4.0.0-rc.10
157
+ - @spark-web/utils@2.0.0-rc.10
158
+
3
159
  ## 2.0.0-rc.9
4
160
 
5
161
  ### Major Changes
package/dist/declarations/src/box.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /** @jsxImportSource @emotion/react */
1
2
  import { type SerializedStyles } from '@emotion/react';
2
3
  import type { DataAttributeMap } from '@spark-web/utils/internal';
3
4
  import type { ReactNode } from 'react';
@@ -21,7 +22,7 @@ export declare type BoxProps = {
21
22
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
22
23
  export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
23
24
  as?: Comp | undefined;
24
- 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;
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
26
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
26
27
  /** Children element to be rendered inside the component. */
27
28
  children?: ReactNode;
@@ -38,11 +39,11 @@ export declare const Box: <Comp extends import("react").ElementType<any, keyof i
38
39
  */
39
40
  asElement?: keyof HTMLElementTagNameMap | undefined;
40
41
  } & {
41
- background?: "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "body" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "input" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
42
+ background?: string | number | undefined;
42
43
  cursor?: "default" | "pointer" | undefined;
43
44
  minHeight?: 0 | undefined;
44
45
  minWidth?: 0 | undefined;
45
46
  overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
46
- shadow?: "small" | "large" | "medium" | undefined;
47
+ shadow?: "small" | "medium" | "large" | undefined;
47
48
  userSelect?: "none" | undefined;
48
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
@@ -1,7 +1,7 @@
1
- import type { BrighteTheme, ResponsiveProp } from '@spark-web/theme';
2
- declare type ValidGapKeys = keyof Omit<BrighteTheme['spacing'], 'none' | 'full'>;
3
- declare type ResponsiveSpacing = ResponsiveProp<keyof BrighteTheme['spacing']>;
4
- declare type ResponsiveSizing = ResponsiveProp<keyof BrighteTheme['sizing']>;
1
+ import type { ResponsiveProp, SparkTheme } from '@spark-web/theme';
2
+ declare type ValidGapKeys = keyof Omit<SparkTheme['spacing'], 'none' | 'full'>;
3
+ declare type ResponsiveSpacing = ResponsiveProp<keyof SparkTheme['spacing']>;
4
+ declare type ResponsiveSizing = ResponsiveProp<keyof SparkTheme['sizing']>;
5
5
  export declare type ResponsiveBoxProps = {
6
6
  /**
7
7
  * The `margin` shorthand property sets the margin area on all four sides of
@@ -74,24 +74,24 @@ 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 BrighteTheme['border']['color']>;
77
+ border?: ResponsiveProp<keyof SparkTheme['border']['color']>;
78
78
  /** The `border` property sets the color of an element's border on the top side. */
79
- borderTop?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
79
+ borderTop?: ResponsiveProp<keyof SparkTheme['border']['color']>;
80
80
  /** The `border` property sets the color of an element's border on the bottom side. */
81
- borderBottom?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
81
+ borderBottom?: ResponsiveProp<keyof SparkTheme['border']['color']>;
82
82
  /** The `border` property sets the color of an element's border on the left side. */
83
- borderLeft?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
83
+ borderLeft?: ResponsiveProp<keyof SparkTheme['border']['color']>;
84
84
  /** The `border` property sets the color of an element's border on the right side. */
85
- borderRight?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
85
+ borderRight?: ResponsiveProp<keyof SparkTheme['border']['color']>;
86
86
  /**
87
87
  * The `borderRadius` property rounds the corners of an element's outer
88
88
  * border edge.
89
89
  */
90
- borderRadius?: ResponsiveProp<keyof BrighteTheme['border']['radius']>;
90
+ borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']>;
91
91
  /**
92
92
  * The `borderWidth` property sets the width of an element's border.
93
93
  */
94
- borderWidth?: ResponsiveProp<keyof BrighteTheme['border']['width']>;
94
+ borderWidth?: ResponsiveProp<keyof SparkTheme['border']['width']>;
95
95
  /** Sets the element's height. */
96
96
  height?: ResponsiveSizing;
97
97
  /** Sets the element's width. */
@@ -158,7 +158,7 @@ export declare type ResponsiveBoxProps = {
158
158
  * descendants or flex items. Overlapping elements with a larger z-index cover
159
159
  * those with a smaller one.
160
160
  */
161
- zIndex?: ResponsiveProp<keyof BrighteTheme['elevation']>;
161
+ zIndex?: ResponsiveProp<keyof SparkTheme['elevation']>;
162
162
  /**
163
163
  * Sets whether an element is treated as a block or inline element and the
164
164
  * layout used for its children.
@@ -172,7 +172,7 @@ export declare type ResponsiveBoxProps = {
172
172
  };
173
173
  declare type UnresponsiveBoxProps = {
174
174
  /** The `background` property sets the background color of an element. */
175
- background?: keyof BrighteTheme['color']['background'];
175
+ background?: keyof SparkTheme['color']['background'];
176
176
  /**
177
177
  * The `cursor` property sets the type of mouse cursor, if any, to show when
178
178
  * the mouse pointer is over an element.
@@ -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 BrighteTheme['shadow'];
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
@@ -327,17 +327,11 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
327
327
  styles = _useBoxProps.styles,
328
328
  attributes = _useBoxProps.attributes;
329
329
  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
330
- var element = jsxRuntime.jsx(react$1.ClassNames, {
331
- children: function children(_ref2) {
332
- var css = _ref2.css,
333
- cx = _ref2.cx;
334
- return jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
- ref: forwardedRef,
336
- id: id,
337
- css: cx(css(resetStyles), css(styles, cssProps))
338
- }, attributes));
339
- }
340
- });
330
+ var element = jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
331
+ ref: forwardedRef,
332
+ id: id,
333
+ css: [react$1.css(resetStyles), react$1.css(styles), cssProps]
334
+ }, attributes));
341
335
  return renderBackgroundProvider(props.background, element);
342
336
  });
343
337
 
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -327,17 +327,11 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
327
327
  styles = _useBoxProps.styles,
328
328
  attributes = _useBoxProps.attributes;
329
329
  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
330
- var element = jsxRuntime.jsx(react$1.ClassNames, {
331
- children: function children(_ref2) {
332
- var css = _ref2.css,
333
- cx = _ref2.cx;
334
- return jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
- ref: forwardedRef,
336
- id: id,
337
- css: cx(css(resetStyles), css(styles, cssProps))
338
- }, attributes));
339
- }
340
- });
330
+ var element = jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
331
+ ref: forwardedRef,
332
+ id: id,
333
+ css: [react$1.css(resetStyles), react$1.css(styles), cssProps]
334
+ }, attributes));
341
335
  return renderBackgroundProvider(props.background, element);
342
336
  });
343
337
 
package/dist/spark-web-box.esm.js CHANGED
@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react';
3
3
  import { jsx } from '@emotion/react/jsx-runtime';
4
4
  import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
5
5
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
6
- import { ClassNames } from '@emotion/react';
6
+ import { css } from '@emotion/react';
7
7
  import { resetElementStyles, buildDataAttributes } from '@spark-web/utils/internal';
8
8
  import { forwardRefWithAs } from '@spark-web/utils/ts';
9
9
 
@@ -323,17 +323,11 @@ var Box = forwardRefWithAs(function (_ref, forwardedRef) {
323
323
  styles = _useBoxProps.styles,
324
324
  attributes = _useBoxProps.attributes;
325
325
  var resetStyles = resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
326
- var element = jsx(ClassNames, {
327
- children: function children(_ref2) {
328
- var css = _ref2.css,
329
- cx = _ref2.cx;
330
- return jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
331
- ref: forwardedRef,
332
- id: id,
333
- css: cx(css(resetStyles), css(styles, cssProps))
334
- }, attributes));
335
- }
336
- });
326
+ var element = jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
327
+ ref: forwardedRef,
328
+ id: id,
329
+ css: [css(resetStyles), css(styles), cssProps]
330
+ }, attributes));
337
331
  return renderBackgroundProvider(props.background, element);
338
332
  });
339
333
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/box",
3
- "version": "2.0.0-rc.9",
3
+ "version": "5.0.0-rc.24",
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": "^4.0.0-rc.9",
21
- "@spark-web/utils": "^2.0.0-rc.9"
20
+ "@spark-web/theme": "^5.0.0-rc.24",
21
+ "@spark-web/utils": "^5.0.0-rc.24"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/react": "^18.2.0",