@spark-web/box 2.0.0-rc.1 → 2.0.0-rc.11

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 (6) hide show
  1. package/CHANGELOG.md +120 -0
  2. package/dist/declarations/src/box.d.ts +6 -5
  3. package/dist/spark-web-box.cjs.dev.js +9 -15
  4. package/dist/spark-web-box.cjs.prod.js +9 -15
  5. package/dist/spark-web-box.esm.js +10 -16
  6. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,125 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 2.0.0-rc.11
4
+
5
+ ### Major Changes
6
+
7
+ - test
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/theme@4.0.0-rc.11
13
+ - @spark-web/utils@2.0.0-rc.11
14
+
15
+ ## 2.0.0-rc.10
16
+
17
+ ### Major Changes
18
+
19
+ - test
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies []:
24
+ - @spark-web/theme@4.0.0-rc.10
25
+ - @spark-web/utils@2.0.0-rc.10
26
+
27
+ ## 2.0.0-rc.9
28
+
29
+ ### Major Changes
30
+
31
+ - test
32
+
33
+ ### Patch Changes
34
+
35
+ - Updated dependencies []:
36
+ - @spark-web/theme@4.0.0-rc.9
37
+ - @spark-web/utils@2.0.0-rc.9
38
+
39
+ ## 2.0.0-rc.8
40
+
41
+ ### Major Changes
42
+
43
+ - test
44
+
45
+ ### Patch Changes
46
+
47
+ - Updated dependencies []:
48
+ - @spark-web/theme@4.0.0-rc.8
49
+ - @spark-web/utils@2.0.0-rc.8
50
+
51
+ ## 2.0.0-rc.7
52
+
53
+ ### Major Changes
54
+
55
+ - test
56
+
57
+ ### Patch Changes
58
+
59
+ - Updated dependencies []:
60
+ - @spark-web/theme@4.0.0-rc.7
61
+ - @spark-web/utils@2.0.0-rc.7
62
+
63
+ ## 2.0.0-rc.6
64
+
65
+ ### Major Changes
66
+
67
+ - test
68
+
69
+ ### Patch Changes
70
+
71
+ - Updated dependencies []:
72
+ - @spark-web/theme@4.0.0-rc.6
73
+ - @spark-web/utils@2.0.0-rc.6
74
+
75
+ ## 2.0.0-rc.5
76
+
77
+ ### Major Changes
78
+
79
+ - test
80
+
81
+ ### Patch Changes
82
+
83
+ - Updated dependencies []:
84
+ - @spark-web/theme@4.0.0-rc.5
85
+ - @spark-web/utils@2.0.0-rc.5
86
+
87
+ ## 2.0.0-rc.4
88
+
89
+ ### Major Changes
90
+
91
+ - bug
92
+
93
+ ### Patch Changes
94
+
95
+ - Updated dependencies []:
96
+ - @spark-web/theme@4.0.0-rc.4
97
+ - @spark-web/utils@2.0.0-rc.4
98
+
99
+ ## 2.0.0-rc.3
100
+
101
+ ### Major Changes
102
+
103
+ - upgrade package
104
+
105
+ ### Patch Changes
106
+
107
+ - Updated dependencies []:
108
+ - @spark-web/theme@4.0.0-rc.3
109
+ - @spark-web/utils@2.0.0-rc.3
110
+
111
+ ## 2.0.0-rc.2
112
+
113
+ ### Major Changes
114
+
115
+ - add parser
116
+
117
+ ### Patch Changes
118
+
119
+ - Updated dependencies []:
120
+ - @spark-web/theme@4.0.0-rc.2
121
+ - @spark-web/utils@2.0.0-rc.2
122
+
3
123
  ## 2.0.0-rc.1
4
124
 
5
125
  ### Major Changes
package/dist/declarations/src/box.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { type SerializedStyles } from '@emotion/react';
1
2
  import type { DataAttributeMap } from '@spark-web/utils/internal';
2
3
  import type { ReactNode } from 'react';
3
4
  import type { BoxStyleProps } from "./use-box-styles.js";
@@ -9,7 +10,7 @@ export declare type BoxProps = {
9
10
  /** An identifier which must be unique in the whole document. */
10
11
  id?: string;
11
12
  /** Custom css styles. */
12
- className?: string;
13
+ css?: SerializedStyles;
13
14
  /**
14
15
  * When providing a component using the "as" prop, optionally tell the system
15
16
  * what the underlying element will be. Used internally to manage reset
@@ -20,7 +21,7 @@ export declare type BoxProps = {
20
21
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
21
22
  export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
22
23
  as?: Comp | undefined;
23
- 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;
24
+ 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;
24
25
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
25
26
  /** Children element to be rendered inside the component. */
26
27
  children?: ReactNode;
@@ -29,7 +30,7 @@ export declare const Box: <Comp extends import("react").ElementType<any, keyof i
29
30
  /** An identifier which must be unique in the whole document. */
30
31
  id?: string | undefined;
31
32
  /** Custom css styles. */
32
- className?: string | undefined;
33
+ css?: SerializedStyles | undefined;
33
34
  /**
34
35
  * When providing a component using the "as" prop, optionally tell the system
35
36
  * what the underlying element will be. Used internally to manage reset
@@ -37,11 +38,11 @@ export declare const Box: <Comp extends import("react").ElementType<any, keyof i
37
38
  */
38
39
  asElement?: keyof HTMLElementTagNameMap | undefined;
39
40
  } & {
40
- background?: "body" | "input" | "disabled" | "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;
41
+ 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;
41
42
  cursor?: "default" | "pointer" | undefined;
42
43
  minHeight?: 0 | undefined;
43
44
  minWidth?: 0 | undefined;
44
45
  overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
45
- shadow?: "small" | "large" | "medium" | undefined;
46
+ shadow?: "small" | "medium" | "large" | undefined;
46
47
  userSelect?: "none" | undefined;
47
48
  } & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/spark-web-box.cjs.dev.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var theme = require('@spark-web/theme');
6
6
  var react = require('react');
7
- var jsxRuntime = require('react/jsx-runtime');
7
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
8
8
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
9
9
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
10
10
  var react$1 = require('@emotion/react');
@@ -22,7 +22,7 @@ var useBackground = function useBackground() {
22
22
  // conditional provider
23
23
 
24
24
  function renderBackgroundProvider(background, element) {
25
- return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
25
+ return background ? jsxRuntime.jsx(InternalBackgroundProvider, {
26
26
  value: background,
27
27
  children: element
28
28
  }) : element;
@@ -313,13 +313,13 @@ function useBoxProps(props) {
313
313
  };
314
314
  }
315
315
 
316
- var _excluded = ["as", "asElement", "className", "data", "id"];
316
+ var _excluded = ["as", "asElement", "css", "data", "id"];
317
317
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
318
318
  var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
319
319
  var _ref$as = _ref.as,
320
320
  Tag = _ref$as === void 0 ? 'div' : _ref$as,
321
321
  asElement = _ref.asElement,
322
- className = _ref.className,
322
+ cssProps = _ref.css,
323
323
  data = _ref.data,
324
324
  id = _ref.id,
325
325
  props = _objectWithoutProperties(_ref, _excluded);
@@ -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 = /*#__PURE__*/jsxRuntime.jsx(react$1.ClassNames, {
331
- children: function children(_ref2) {
332
- var css = _ref2.css,
333
- cx = _ref2.cx;
334
- return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
- ref: forwardedRef,
336
- id: id,
337
- className: cx(css(resetStyles), css(styles), className)
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(cssProps, styles, resetStyles)
334
+ }, attributes));
341
335
  return renderBackgroundProvider(props.background, element);
342
336
  });
343
337
 
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var theme = require('@spark-web/theme');
6
6
  var react = require('react');
7
- var jsxRuntime = require('react/jsx-runtime');
7
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
8
8
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
9
9
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
10
10
  var react$1 = require('@emotion/react');
@@ -22,7 +22,7 @@ var useBackground = function useBackground() {
22
22
  // conditional provider
23
23
 
24
24
  function renderBackgroundProvider(background, element) {
25
- return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
25
+ return background ? jsxRuntime.jsx(InternalBackgroundProvider, {
26
26
  value: background,
27
27
  children: element
28
28
  }) : element;
@@ -313,13 +313,13 @@ function useBoxProps(props) {
313
313
  };
314
314
  }
315
315
 
316
- var _excluded = ["as", "asElement", "className", "data", "id"];
316
+ var _excluded = ["as", "asElement", "css", "data", "id"];
317
317
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
318
318
  var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
319
319
  var _ref$as = _ref.as,
320
320
  Tag = _ref$as === void 0 ? 'div' : _ref$as,
321
321
  asElement = _ref.asElement,
322
- className = _ref.className,
322
+ cssProps = _ref.css,
323
323
  data = _ref.data,
324
324
  id = _ref.id,
325
325
  props = _objectWithoutProperties(_ref, _excluded);
@@ -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 = /*#__PURE__*/jsxRuntime.jsx(react$1.ClassNames, {
331
- children: function children(_ref2) {
332
- var css = _ref2.css,
333
- cx = _ref2.cx;
334
- return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
- ref: forwardedRef,
336
- id: id,
337
- className: cx(css(resetStyles), css(styles), className)
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(cssProps, styles, resetStyles)
334
+ }, attributes));
341
335
  return renderBackgroundProvider(props.background, element);
342
336
  });
343
337
 
package/dist/spark-web-box.esm.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { useTheme } from '@spark-web/theme';
2
2
  import { createContext, useContext } from 'react';
3
- import { jsx } from 'react/jsx-runtime';
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
 
@@ -18,7 +18,7 @@ var useBackground = function useBackground() {
18
18
  // conditional provider
19
19
 
20
20
  function renderBackgroundProvider(background, element) {
21
- return background ? /*#__PURE__*/jsx(InternalBackgroundProvider, {
21
+ return background ? jsx(InternalBackgroundProvider, {
22
22
  value: background,
23
23
  children: element
24
24
  }) : element;
@@ -309,13 +309,13 @@ function useBoxProps(props) {
309
309
  };
310
310
  }
311
311
 
312
- var _excluded = ["as", "asElement", "className", "data", "id"];
312
+ var _excluded = ["as", "asElement", "css", "data", "id"];
313
313
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
314
314
  var Box = forwardRefWithAs(function (_ref, forwardedRef) {
315
315
  var _ref$as = _ref.as,
316
316
  Tag = _ref$as === void 0 ? 'div' : _ref$as,
317
317
  asElement = _ref.asElement,
318
- className = _ref.className,
318
+ cssProps = _ref.css,
319
319
  data = _ref.data,
320
320
  id = _ref.id,
321
321
  props = _objectWithoutProperties(_ref, _excluded);
@@ -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 = /*#__PURE__*/jsx(ClassNames, {
327
- children: function children(_ref2) {
328
- var css = _ref2.css,
329
- cx = _ref2.cx;
330
- return /*#__PURE__*/jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
331
- ref: forwardedRef,
332
- id: id,
333
- className: cx(css(resetStyles), css(styles), className)
334
- }, attributes));
335
- }
336
- });
326
+ var element = jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
327
+ ref: forwardedRef,
328
+ id: id,
329
+ css: css(cssProps, styles, resetStyles)
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.1",
3
+ "version": "2.0.0-rc.11",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -16,9 +16,9 @@
16
16
  ],
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
- "@emotion/react": "^11.13.5",
20
- "@spark-web/theme": "^4.0.0-rc.1",
21
- "@spark-web/utils": "^2.0.0-rc.1"
19
+ "@emotion/react": "^11.14.0",
20
+ "@spark-web/theme": "^4.0.0-rc.11",
21
+ "@spark-web/utils": "^2.0.0-rc.11"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/react": "^18.2.0",