@spark-web/box 2.0.0-rc.6 → 2.0.0-rc.8

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 +24 -0
  2. package/dist/declarations/src/box.d.ts +6 -5
  3. package/dist/spark-web-box.cjs.dev.js +3 -3
  4. package/dist/spark-web-box.cjs.prod.js +3 -3
  5. package/dist/spark-web-box.esm.js +3 -3
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 2.0.0-rc.8
4
+
5
+ ### Major Changes
6
+
7
+ - test
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/theme@4.0.0-rc.8
13
+ - @spark-web/utils@2.0.0-rc.8
14
+
15
+ ## 2.0.0-rc.7
16
+
17
+ ### Major Changes
18
+
19
+ - test
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies []:
24
+ - @spark-web/theme@4.0.0-rc.7
25
+ - @spark-web/utils@2.0.0-rc.7
26
+
3
27
  ## 2.0.0-rc.6
4
28
 
5
29
  ### 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" | "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;
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?: "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;
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
@@ -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);
@@ -334,7 +334,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
334
334
  return jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
335
  ref: forwardedRef,
336
336
  id: id,
337
- css: cx(css(resetStyles), css(styles), className)
337
+ css: cx(css(resetStyles), css(styles), css(cssProps))
338
338
  }, attributes));
339
339
  }
340
340
  });
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -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);
@@ -334,7 +334,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
334
334
  return jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
335
  ref: forwardedRef,
336
336
  id: id,
337
- css: cx(css(resetStyles), css(styles), className)
337
+ css: cx(css(resetStyles), css(styles), css(cssProps))
338
338
  }, attributes));
339
339
  }
340
340
  });
package/dist/spark-web-box.esm.js CHANGED
@@ -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);
@@ -330,7 +330,7 @@ var Box = forwardRefWithAs(function (_ref, forwardedRef) {
330
330
  return jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
331
331
  ref: forwardedRef,
332
332
  id: id,
333
- css: cx(css(resetStyles), css(styles), className)
333
+ css: cx(css(resetStyles), css(styles), css(cssProps))
334
334
  }, attributes));
335
335
  }
336
336
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/box",
3
- "version": "2.0.0-rc.6",
3
+ "version": "2.0.0-rc.8",
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.6",
21
- "@spark-web/utils": "^2.0.0-rc.6"
20
+ "@spark-web/theme": "^4.0.0-rc.8",
21
+ "@spark-web/utils": "^2.0.0-rc.8"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/react": "^18.2.0",