@spark-web/box 1.0.0 → 1.0.3
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.
- package/CHANGELOG.md +43 -0
- package/README.md +57 -58
- package/dist/declarations/src/Box.d.ts +1 -1
- package/dist/spark-web-box.cjs.dev.js +11 -19
- package/dist/spark-web-box.cjs.prod.js +11 -19
- package/dist/spark-web-box.esm.js +8 -12
- package/package.json +9 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,48 @@
|
|
|
1
1
|
# @spark-web/box
|
|
2
2
|
|
|
3
|
+
## 1.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#42](https://github.com/brighte-labs/spark-web/pull/42)
|
|
8
|
+
[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
|
|
9
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
|
|
10
|
+
versions of React
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
[[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
|
|
14
|
+
- @spark-web/theme@2.0.2
|
|
15
|
+
- @spark-web/utils@1.1.1
|
|
16
|
+
|
|
17
|
+
## 1.0.2
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
22
|
+
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
23
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
24
|
+
@babel/transform-runtime
|
|
25
|
+
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
28
|
+
- @spark-web/theme@2.0.1
|
|
29
|
+
- @spark-web/utils@1.0.2
|
|
30
|
+
|
|
31
|
+
## 1.0.1
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
36
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
37
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
38
|
+
config
|
|
39
|
+
|
|
40
|
+
- Updated dependencies
|
|
41
|
+
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
42
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
43
|
+
- @spark-web/theme@2.0.0
|
|
44
|
+
- @spark-web/utils@1.0.1
|
|
45
|
+
|
|
3
46
|
## 1.0.0
|
|
4
47
|
|
|
5
48
|
### Major Changes
|
package/README.md
CHANGED
|
@@ -38,64 +38,63 @@ elements only have styling rules that have been explicitly specified.
|
|
|
38
38
|
|
|
39
39
|
## Props
|
|
40
40
|
|
|
41
|
-
| Prop | Type
|
|
42
|
-
| --------------- |
|
|
43
|
-
| children | React.ReactNode
|
|
44
|
-
| id? | string
|
|
45
|
-
| className? | string
|
|
46
|
-
| asElement? | string
|
|
47
|
-
| |
|
|
48
|
-
| background? | keyof [BrighteTheme][brighte-theme]['color']['background']
|
|
49
|
-
| cursor? | 'default' \| 'pointer'
|
|
50
|
-
| minHeight? | 0
|
|
51
|
-
| minWidth? | 0
|
|
52
|
-
| overflow? | 'hidden' \| 'scroll' \| 'visible' \| 'auto'
|
|
53
|
-
| shadow? | keyof [BrighteTheme][brighte-theme]['shadow']
|
|
54
|
-
| userSelect? | 'none'
|
|
55
|
-
| |
|
|
56
|
-
| margin? | [ResponsiveProp][responsive-prop]
|
|
57
|
-
| marginTop? | [ResponsiveProp][responsive-prop]
|
|
58
|
-
| marginBottom? | [ResponsiveProp][responsive-prop]
|
|
59
|
-
| marginLeft? | [ResponsiveProp][responsive-prop]
|
|
60
|
-
| marginRight? | [ResponsiveProp][responsive-prop]
|
|
61
|
-
| marginY? | [ResponsiveProp][responsive-prop]
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
| opacity? | [ResponsiveProp][responsive-prop]<number\> | | Sets the opacity of the element. |
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| --------------- | -------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
43
|
+
| children | React.ReactNode | | Children element to be rendered inside the component. |
|
|
44
|
+
| id? | string | | An identifier that must be unique in the whole document. |
|
|
45
|
+
| className? | string | | Custom css styles. |
|
|
46
|
+
| asElement? | string | | An option to indicate what the underlying element of the box should be. |
|
|
47
|
+
| | | | |
|
|
48
|
+
| background? | keyof [BrighteTheme][brighte-theme]['color']['background'] | | Sets the backgroud of the component. |
|
|
49
|
+
| cursor? | 'default' \| 'pointer' | | Sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. |
|
|
50
|
+
| minHeight? | 0 | | Sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified. |
|
|
51
|
+
| minWidth? | 0 | | Sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified. |
|
|
52
|
+
| overflow? | 'hidden' \| 'scroll' \| 'visible' \| 'auto' | | Sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions. |
|
|
53
|
+
| shadow? | keyof [BrighteTheme][brighte-theme]['shadow'] | | Adds shadow effects around the element's frame. |
|
|
54
|
+
| userSelect? | 'none' | | Controls whether the user can select text. |
|
|
55
|
+
| | | | |
|
|
56
|
+
| margin? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on all 4 sides of the element at once. |
|
|
57
|
+
| marginTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top side. |
|
|
58
|
+
| marginBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the bottom side. |
|
|
59
|
+
| marginLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the left side. |
|
|
60
|
+
| marginRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the right side. |
|
|
61
|
+
| marginY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top and bottom side. |
|
|
62
|
+
| | | | |
|
|
63
|
+
| padding? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on all 4 sides of the element at once. |
|
|
64
|
+
| paddingTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top side. |
|
|
65
|
+
| paddingBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the bottom side. |
|
|
66
|
+
| paddingLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left side. |
|
|
67
|
+
| paddingRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the right side. |
|
|
68
|
+
| paddingY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top and bottom side. |
|
|
69
|
+
| paddingX? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left and right side. |
|
|
70
|
+
| | | | |
|
|
71
|
+
| border? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the colour of the element's border. |
|
|
72
|
+
| borderRadius? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Rounds the corners of the element's outer border edge. |
|
|
73
|
+
| borderWidth? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the width of the element's border. |
|
|
74
|
+
| | | | |
|
|
75
|
+
| height? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's height. |
|
|
76
|
+
| width? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's width. |
|
|
77
|
+
| | | | |
|
|
78
|
+
| alignItems? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Controls alignment of items on the cross axis. |
|
|
79
|
+
| gap? | 'small' \| 'medium' \| 'xsmall' \| 'large' \| 'xxsmall' \| 'xlarge' \| 'xxlarge' | | Size of the gap between each child element. |
|
|
80
|
+
| flexDirection? | 'row' \| 'row-reverse' \| 'column' \| 'column-reverse' | | Defines the main axis, or how the children are placed. |
|
|
81
|
+
| justifyContent? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'space-between' | | Sets how to distribute space between and around content items along the main axis. |
|
|
82
|
+
| flexWrap? | [ResponsiveProp][responsive-prop]\<'nowrap' \| 'wrap'> | | Allow flex items to flow onto multiple lines. |
|
|
83
|
+
| | | | |
|
|
84
|
+
| alignSelf? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Override's parent's `align-items` value and controls alignment of item's on the cross axis. |
|
|
85
|
+
| flex? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets how a flex item will grow or shrink to fit the space available in its flex container. |
|
|
86
|
+
| flexGrow? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets the flex grow factor of a flex item main size. |
|
|
87
|
+
| flexShrink? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets the flex shrink factor of a flex item.If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. |
|
|
88
|
+
| | | |
|
|
89
|
+
| position? | [ResponsiveProp][responsive-prop]\<'absolute' \| 'fixed' \| 'relative' \| 'sticky'> | | Sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements. |
|
|
90
|
+
| top? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
|
|
91
|
+
| bottom? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
|
|
92
|
+
| left? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
|
|
93
|
+
| right? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
|
|
94
|
+
| zIndex? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['elevation']> | | Sets the z-order of a positioned element and its descendants or flex-items. Overlapping element with a larger z-index cover those with a smaller one. |
|
|
95
|
+
| | | |
|
|
96
|
+
| display? | [ResponsiveProp][responsive-prop]\<'block' \| 'flex' \| 'inline' \| 'inline-block' \| 'inline-flex' \| 'none'> | | Sets the display of element. |
|
|
97
|
+
| opacity? | [ResponsiveProp][responsive-prop]\<number> | | Sets the opacity of the element. |
|
|
99
98
|
|
|
100
99
|
By default, Box renders a `div` element. You can customise this via the `as`
|
|
101
100
|
prop. Extra props will also be forwarded to the underlying element.
|
|
@@ -28,7 +28,7 @@ export declare const Box: <Comp extends import("react").ElementType<any> = "div"
|
|
|
28
28
|
*/
|
|
29
29
|
asElement?: keyof HTMLElementTagNameMap | undefined;
|
|
30
30
|
} & {
|
|
31
|
-
background?: "disabled" | "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "
|
|
31
|
+
background?: "disabled" | "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "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;
|
|
32
32
|
cursor?: "default" | "pointer" | undefined;
|
|
33
33
|
minHeight?: 0 | undefined;
|
|
34
34
|
minWidth?: 0 | undefined;
|
|
@@ -2,31 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var React = require('react');
|
|
6
5
|
var theme = require('@spark-web/theme');
|
|
7
|
-
var
|
|
8
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
9
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
9
10
|
var css = require('@emotion/css');
|
|
10
11
|
var internal = require('@spark-web/utils/internal');
|
|
11
12
|
var ts = require('@spark-web/utils/ts');
|
|
12
|
-
var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
|
|
13
13
|
|
|
14
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
17
|
-
|
|
18
|
-
var __jsx$1 = React__default["default"].createElement;
|
|
19
14
|
// prepare context
|
|
20
|
-
var backgroundContext = /*#__PURE__*/
|
|
15
|
+
var backgroundContext = /*#__PURE__*/react.createContext('body');
|
|
21
16
|
var InternalBackgroundProvider = backgroundContext.Provider;
|
|
22
17
|
var useBackground = function useBackground() {
|
|
23
|
-
return
|
|
18
|
+
return react.useContext(backgroundContext);
|
|
24
19
|
}; // conditional provider
|
|
25
20
|
|
|
26
21
|
function renderBackgroundProvider(background, element) {
|
|
27
|
-
return background ?
|
|
28
|
-
value: background
|
|
29
|
-
|
|
22
|
+
return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
|
|
23
|
+
value: background,
|
|
24
|
+
children: element
|
|
25
|
+
}) : element;
|
|
30
26
|
} // a11y contrast utility
|
|
31
27
|
|
|
32
28
|
var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
|
|
@@ -56,9 +52,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
|
|
|
56
52
|
return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
|
|
57
53
|
};
|
|
58
54
|
|
|
59
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
60
|
-
|
|
61
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
62
55
|
// TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
|
|
63
56
|
// types
|
|
64
57
|
|
|
@@ -288,7 +281,6 @@ function useBoxProps(props) {
|
|
|
288
281
|
}
|
|
289
282
|
|
|
290
283
|
var _excluded = ["as", "asElement", "className", "id"];
|
|
291
|
-
var __jsx = React__default["default"].createElement;
|
|
292
284
|
|
|
293
285
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
294
286
|
var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
@@ -305,7 +297,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
305
297
|
|
|
306
298
|
var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
|
|
307
299
|
|
|
308
|
-
var element =
|
|
300
|
+
var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
|
|
309
301
|
ref: forwardedRef,
|
|
310
302
|
id: id,
|
|
311
303
|
className: css.cx(css.css(resetStyles), css.css(styles), className)
|
|
@@ -2,31 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var React = require('react');
|
|
6
5
|
var theme = require('@spark-web/theme');
|
|
7
|
-
var
|
|
8
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
9
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
9
10
|
var css = require('@emotion/css');
|
|
10
11
|
var internal = require('@spark-web/utils/internal');
|
|
11
12
|
var ts = require('@spark-web/utils/ts');
|
|
12
|
-
var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
|
|
13
13
|
|
|
14
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
17
|
-
|
|
18
|
-
var __jsx$1 = React__default["default"].createElement;
|
|
19
14
|
// prepare context
|
|
20
|
-
var backgroundContext = /*#__PURE__*/
|
|
15
|
+
var backgroundContext = /*#__PURE__*/react.createContext('body');
|
|
21
16
|
var InternalBackgroundProvider = backgroundContext.Provider;
|
|
22
17
|
var useBackground = function useBackground() {
|
|
23
|
-
return
|
|
18
|
+
return react.useContext(backgroundContext);
|
|
24
19
|
}; // conditional provider
|
|
25
20
|
|
|
26
21
|
function renderBackgroundProvider(background, element) {
|
|
27
|
-
return background ?
|
|
28
|
-
value: background
|
|
29
|
-
|
|
22
|
+
return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
|
|
23
|
+
value: background,
|
|
24
|
+
children: element
|
|
25
|
+
}) : element;
|
|
30
26
|
} // a11y contrast utility
|
|
31
27
|
|
|
32
28
|
var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
|
|
@@ -56,9 +52,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
|
|
|
56
52
|
return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
|
|
57
53
|
};
|
|
58
54
|
|
|
59
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
60
|
-
|
|
61
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
62
55
|
// TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
|
|
63
56
|
// types
|
|
64
57
|
|
|
@@ -288,7 +281,6 @@ function useBoxProps(props) {
|
|
|
288
281
|
}
|
|
289
282
|
|
|
290
283
|
var _excluded = ["as", "asElement", "className", "id"];
|
|
291
|
-
var __jsx = React__default["default"].createElement;
|
|
292
284
|
|
|
293
285
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
294
286
|
var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
@@ -305,7 +297,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
305
297
|
|
|
306
298
|
var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
|
|
307
299
|
|
|
308
|
-
var element =
|
|
300
|
+
var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
|
|
309
301
|
ref: forwardedRef,
|
|
310
302
|
id: id,
|
|
311
303
|
className: css.cx(css.css(resetStyles), css.css(styles), className)
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import React, { createContext, useContext } from 'react';
|
|
2
1
|
import { useTheme } from '@spark-web/theme';
|
|
3
|
-
import
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
4
5
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
5
6
|
import { cx, css } from '@emotion/css';
|
|
6
7
|
import { resetElementStyles } from '@spark-web/utils/internal';
|
|
7
8
|
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
8
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
9
9
|
|
|
10
|
-
var __jsx$1 = React.createElement;
|
|
11
10
|
// prepare context
|
|
12
11
|
var backgroundContext = /*#__PURE__*/createContext('body');
|
|
13
12
|
var InternalBackgroundProvider = backgroundContext.Provider;
|
|
@@ -16,9 +15,10 @@ var useBackground = function useBackground() {
|
|
|
16
15
|
}; // conditional provider
|
|
17
16
|
|
|
18
17
|
function renderBackgroundProvider(background, element) {
|
|
19
|
-
return background ?
|
|
20
|
-
value: background
|
|
21
|
-
|
|
18
|
+
return background ? /*#__PURE__*/jsx(InternalBackgroundProvider, {
|
|
19
|
+
value: background,
|
|
20
|
+
children: element
|
|
21
|
+
}) : element;
|
|
22
22
|
} // a11y contrast utility
|
|
23
23
|
|
|
24
24
|
var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
|
|
@@ -48,9 +48,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
|
|
|
48
48
|
return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
52
|
-
|
|
53
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
54
51
|
// TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
|
|
55
52
|
// types
|
|
56
53
|
|
|
@@ -280,7 +277,6 @@ function useBoxProps(props) {
|
|
|
280
277
|
}
|
|
281
278
|
|
|
282
279
|
var _excluded = ["as", "asElement", "className", "id"];
|
|
283
|
-
var __jsx = React.createElement;
|
|
284
280
|
|
|
285
281
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
286
282
|
var Box = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
@@ -297,7 +293,7 @@ var Box = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
297
293
|
|
|
298
294
|
var resetStyles = resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
|
|
299
295
|
|
|
300
|
-
var element =
|
|
296
|
+
var element = /*#__PURE__*/jsx(Tag, _objectSpread({
|
|
301
297
|
ref: forwardedRef,
|
|
302
298
|
id: id,
|
|
303
299
|
className: cx(css(resetStyles), css(styles), className)
|
package/package.json
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/box",
|
|
3
|
+
"version": "1.0.3",
|
|
3
4
|
"license": "MIT",
|
|
4
|
-
"version": "1.0.0",
|
|
5
5
|
"main": "dist/spark-web-box.cjs.js",
|
|
6
6
|
"module": "dist/spark-web-box.esm.js",
|
|
7
|
-
"devDependencies": {
|
|
8
|
-
"@types/react": "^17.0.12"
|
|
9
|
-
},
|
|
10
7
|
"dependencies": {
|
|
11
8
|
"@babel/runtime": "^7.14.6",
|
|
12
9
|
"@emotion/css": "^11.7.1",
|
|
13
|
-
"@spark-web/theme": "^
|
|
14
|
-
"@spark-web/utils": "^1.
|
|
10
|
+
"@spark-web/theme": "^2.0.2",
|
|
11
|
+
"@spark-web/utils": "^1.1.1"
|
|
12
|
+
},
|
|
13
|
+
"devDependencies": {
|
|
14
|
+
"@types/react": "^17.0.12",
|
|
15
15
|
"react": "^17.0.2"
|
|
16
16
|
},
|
|
17
|
+
"peerDependencies": {
|
|
18
|
+
"react": ">=17.0.2"
|
|
19
|
+
},
|
|
17
20
|
"engines": {
|
|
18
21
|
"node": ">= 14.13"
|
|
19
22
|
}
|