@spark-web/box 2.0.0-rc.2 → 2.0.0-rc.20

package/CHANGELOG.md

@@ -1,5 +1,221 @@
 # @spark-web/box
 
+## 2.0.0-rc.20
+
+### Minor Changes
+
+- Support for component-level theming; button-level theming
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.20
+  - @spark-web/utils@2.0.0-rc.20
+
+## 2.0.0-rc.19
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.19
+  - @spark-web/utils@2.0.0-rc.19
+
+## 2.0.0-rc.18
+
+### Major Changes
+
+- tests
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.18
+  - @spark-web/utils@2.0.0-rc.18
+
+## 2.0.0-rc.17
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.17
+  - @spark-web/utils@2.0.0-rc.17
+
+## 2.0.0-rc.16
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.16
+  - @spark-web/utils@2.0.0-rc.16
+
+## 2.0.0-rc.15
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.15
+  - @spark-web/utils@2.0.0-rc.15
+
+## 2.0.0-rc.14
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.14
+  - @spark-web/utils@2.0.0-rc.14
+
+## 2.0.0-rc.13
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.13
+  - @spark-web/utils@2.0.0-rc.13
+
+## 2.0.0-rc.12
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.12
+  - @spark-web/utils@2.0.0-rc.12
+
+## 2.0.0-rc.11
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.11
+  - @spark-web/utils@2.0.0-rc.11
+
+## 2.0.0-rc.10
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.10
+  - @spark-web/utils@2.0.0-rc.10
+
+## 2.0.0-rc.9
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.9
+  - @spark-web/utils@2.0.0-rc.9
+
+## 2.0.0-rc.8
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.8
+  - @spark-web/utils@2.0.0-rc.8
+
+## 2.0.0-rc.7
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.7
+  - @spark-web/utils@2.0.0-rc.7
+
+## 2.0.0-rc.6
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.6
+  - @spark-web/utils@2.0.0-rc.6
+
+## 2.0.0-rc.5
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.5
+  - @spark-web/utils@2.0.0-rc.5
+
+## 2.0.0-rc.4
+
+### Major Changes
+
+- bug
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.4
+  - @spark-web/utils@2.0.0-rc.4
+
+## 2.0.0-rc.3
+
+### Major Changes
+
+- upgrade package
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.3
+  - @spark-web/utils@2.0.0-rc.3
+
 ## 2.0.0-rc.2
 
 ### Major Changes

package/dist/spark-web-box.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJveC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
+export * from "../src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJveC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/spark-web-box.cjs.js

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./spark-web-box.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-box.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/box",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.20",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -16,9 +16,9 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@emotion/react": "^11.13.5",
-    "@spark-web/theme": "^4.0.0-rc.2",
-    "@spark-web/utils": "^2.0.0-rc.2"
+    "@emotion/react": "^11.14.0",
+    "@spark-web/theme": "^4.0.0-rc.20",
+    "@spark-web/utils": "^2.0.0-rc.20"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

package/dist/declarations/src/background-provider.d.ts

@@ -1,7 +0,0 @@
-import type { ReactElement } from 'react';
-export declare type BackgroundProviderProps = {
-    type: 'light' | 'dark';
-    children: ReactElement;
-};
-/** Enforce background "lightness" without applying a background color. */
-export declare const BackgroundProvider: ({ type, children, }: BackgroundProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/declarations/src/box.d.ts

@@ -1,47 +0,0 @@
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import type { ReactNode } from 'react';
-import type { BoxStyleProps } from "./use-box-styles.js";
-export declare type BoxProps = {
-    /** Children element to be rendered inside the component. */
-    children?: ReactNode;
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap;
-    /** An identifier which must be unique in the whole document. */
-    id?: string;
-    /** Custom css styles. */
-    className?: string;
-    /**
-     * When providing a component using the "as" prop, optionally tell the system
-     * what the underlying element will be. Used internally to manage reset
-     * styles.
-     */
-    asElement?: keyof HTMLElementTagNameMap;
-} & BoxStyleProps;
-/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
-export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
-    as?: Comp | undefined;
-    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;
-} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
-    /** Children element to be rendered inside the component. */
-    children?: ReactNode;
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap | undefined;
-    /** An identifier which must be unique in the whole document. */
-    id?: string | undefined;
-    /** Custom css styles. */
-    className?: string | undefined;
-    /**
-     * When providing a component using the "as" prop, optionally tell the system
-     * what the underlying element will be. Used internally to manage reset
-     * styles.
-     */
-    asElement?: keyof HTMLElementTagNameMap | undefined;
-} & {
-    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;
-    cursor?: "default" | "pointer" | undefined;
-    minHeight?: 0 | undefined;
-    minWidth?: 0 | undefined;
-    overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    shadow?: "small" | "medium" | "large" | undefined;
-    userSelect?: "none" | undefined;
-} & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/declarations/src/context.d.ts

@@ -1,7 +0,0 @@
-import type { ReactElement } from 'react';
-import type { BoxStyleProps } from "./use-box-styles.js";
-export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
-export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
-export declare const useBackground: () => BackgroundVariant;
-export declare function renderBackgroundProvider(background: BackgroundVariant | undefined, element: ReactElement | null): import("@emotion/react/jsx-runtime").JSX.Element | null;
-export declare const useBackgroundLightness: (backgroundOverride?: ReturnType<typeof useBackground>) => "light" | "dark";

package/dist/declarations/src/index.d.ts

@@ -1,5 +0,0 @@
-export { BackgroundProvider } from "./background-provider.js";
-export { Box } from "./box.js";
-export { useBackground, useBackgroundLightness } from "./context.js";
-export type { BackgroundProviderProps } from "./background-provider.js";
-export type { BoxProps } from "./box.js";

package/dist/declarations/src/use-box-styles.d.ts

@@ -1,227 +0,0 @@
-import type { BrighteTheme, ResponsiveProp } from '@spark-web/theme';
-declare type ValidGapKeys = keyof Omit<BrighteTheme['spacing'], 'none' | 'full'>;
-declare type ResponsiveSpacing = ResponsiveProp<keyof BrighteTheme['spacing']>;
-declare type ResponsiveSizing = ResponsiveProp<keyof BrighteTheme['sizing']>;
-export declare type ResponsiveBoxProps = {
-    /**
-     * The `margin` shorthand property sets the margin area on all four sides of
-     * an element at once.
-     */
-    margin?: ResponsiveSpacing;
-    /**
-     * The `marginTop` property sets the margin area on the top side of an
-     * element.
-     */
-    marginTop?: ResponsiveSpacing;
-    /**
-     * The `marginRight` property sets the margin area on the right side of an
-     * element.
-     */
-    marginRight?: ResponsiveSpacing;
-    /**
-     * The `marginBottom` property sets the margin area on the bottom side of an
-     * element.
-     */
-    marginBottom?: ResponsiveSpacing;
-    /**
-     * The `marginLeft` property sets the margin area on the left side of an
-     * element.
-     */
-    marginLeft?: ResponsiveSpacing;
-    /**
-     * The `marginY` shorthand property sets the margin area on the top and
-     * bottom of the element.
-     */
-    marginY?: ResponsiveSpacing;
-    /**
-     * The `marginY` shorthand property sets the margin area on the left and
-     * right of the element.
-     */
-    marginX?: ResponsiveSpacing;
-    /**
-     * The `padding` shorthand property sets the padding area on all four sides
-     * of an element at once.
-     */
-    padding?: ResponsiveSpacing;
-    /**
-     * The `paddingTop` property sets the height of the padding area on the top
-     * of an element.
-     */
-    paddingTop?: ResponsiveSpacing;
-    /**
-     * The `paddingRight` property sets the width of the padding area on the
-     * right of an element.
-     */
-    paddingRight?: ResponsiveSpacing;
-    /**
-     * The `paddingBottom` property sets the height of the padding area on the
-     * bottom of an element.
-     */
-    paddingBottom?: ResponsiveSpacing;
-    /**
-     * The `paddingLeft` property sets the width of the padding area on the left
-     * of an element.
-     */
-    paddingLeft?: ResponsiveSpacing;
-    /**
-     * The `paddingY` shorthand property sets the padding area on the top and
-     * bottom of the element.
-     */
-    paddingY?: ResponsiveSpacing;
-    /**
-     * The `paddingX` shorthand property sets the padding area on the left and
-     * right of the element.
-     */
-    paddingX?: ResponsiveSpacing;
-    /** The `border` property sets the color of an element's border. */
-    border?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
-    /** The `border` property sets the color of an element's border on the top side. */
-    borderTop?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
-    /** The `border` property sets the color of an element's border on the bottom side. */
-    borderBottom?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
-    /** The `border` property sets the color of an element's border on the left side. */
-    borderLeft?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
-    /** The `border` property sets the color of an element's border on the right side. */
-    borderRight?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
-    /**
-     * The `borderRadius` property rounds the corners of an element's outer
-     * border edge.
-     */
-    borderRadius?: ResponsiveProp<keyof BrighteTheme['border']['radius']>;
-    /**
-     * The `borderWidth` property sets the width of an element's border.
-     */
-    borderWidth?: ResponsiveProp<keyof BrighteTheme['border']['width']>;
-    /** Sets the element's height. */
-    height?: ResponsiveSizing;
-    /** Sets the element's width. */
-    width?: ResponsiveSizing;
-    /** Controls the alignment of items on the cross axis. */
-    alignItems?: ResponsiveProp<keyof typeof flexMap.alignItems>;
-    /** The size of the gap between each child element. */
-    gap?: ResponsiveProp<ValidGapKeys>;
-    /** Defines the main axis, or how the children are placed. */
-    flexDirection?: ResponsiveProp<keyof typeof flexMap.flexDirection>;
-    /**
-     * defines how the browser distributes space between and around content items
-     * along the main-axis.
-     */
-    justifyContent?: ResponsiveProp<keyof typeof flexMap.justifyContent>;
-    /** Allow flex items to flow onto multiple lines. */
-    flexWrap?: ResponsiveProp<'nowrap' | 'wrap'>;
-    /**
-     * Overrides the parent's `align-items` value. Controls the alignment of
-     * item's on the cross axis.
-     */
-    alignSelf?: ResponsiveProp<keyof typeof flexMap.alignItems>;
-    /**
-     * The `flex` shorthand property sets how a flex item will grow or shrink to
-     * fit the space available in its flex container.
-     */
-    flex?: ResponsiveProp<0 | 1>;
-    /** The `flexGrow` property sets the flex grow factor of a flex item main size. */
-    flexGrow?: ResponsiveProp<0 | 1>;
-    /**
-     * The `flexShrink` property 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`.
-     */
-    flexShrink?: ResponsiveProp<0 | 1>;
-    /**
-     * The `position` property sets how an element is positioned in a document.
-     * The `top`, `right`, `bottom`, and `left` properties determine the final
-     * location of positioned elements.
-     */
-    position?: ResponsiveProp<'absolute' | 'fixed' | 'relative' | 'sticky'>;
-    /**
-     * The `top` property participates in specifying the vertical position of a
-     * positioned element. It has no effect on non-positioned elements.
-     */
-    top?: ResponsiveProp<0>;
-    /**
-     * The `right` property participates in specifying the horizontal position of
-     * a positioned element. It has no effect on non-positioned elements.
-     */
-    right?: ResponsiveProp<0>;
-    /**
-     * The `bottom` property participates in setting the vertical position of a
-     * positioned element. It has no effect on non-positioned elements.
-     */
-    bottom?: ResponsiveProp<0>;
-    /**
-     * The `left` property participates in specifying the horizontal position of a
-     * positioned element. It has no effect on non-positioned elements.
-     */
-    left?: ResponsiveProp<0>;
-    /**
-     * The `zIndex` property sets the "z-order" of a positioned element and its
-     * descendants or flex items. Overlapping elements with a larger z-index cover
-     * those with a smaller one.
-     */
-    zIndex?: ResponsiveProp<keyof BrighteTheme['elevation']>;
-    /**
-     * Sets whether an element is treated as a block or inline element and the
-     * layout used for its children.
-     */
-    display?: ResponsiveProp<'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'none'>;
-    /**
-     * Sets the opacity of the element. Opacity is the degree to which content
-     * behind an element is hidden, and is the opposite of transparency.
-     */
-    opacity?: ResponsiveProp<number>;
-};
-declare type UnresponsiveBoxProps = {
-    /** The `background` property sets the background color of an element. */
-    background?: keyof BrighteTheme['color']['background'];
-    /**
-     * The `cursor` property sets the type of mouse cursor, if any, to show when
-     * the mouse pointer is over an element.
-     */
-    cursor?: 'default' | 'pointer';
-    /**
-     * The `minHeight` property sets the minimum height of an element. It prevents
-     * the used value of the height property from becoming smaller than the value
-     * specified for `minHeight`.
-     */
-    minHeight?: 0;
-    /**
-     * The `minWidth` property sets the minimum width of an element. It prevents
-     * the used value of the width property from becoming smaller than the value
-     * specified for `minWidth`.
-     */
-    minWidth?: 0;
-    /**
-     * The `overflow` shorthand property 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.
-     */
-    overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
-    /** The `boxShadow` property adds shadow effects around an element's frame. */
-    shadow?: keyof BrighteTheme['shadow'];
-    /** The `userSelect` property controls whether the user can select text. */
-    userSelect?: 'none';
-};
-export declare type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
-export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderTop, borderBottom, borderLeft, borderRight, borderRadius, borderWidth, bottom, cursor, display, flex, flexDirection, flexGrow, flexShrink, flexWrap, gap, height, justifyContent, left, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, minHeight, minWidth, opacity, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, right, shadow, top, userSelect, width, zIndex, }: BoxStyleProps) => import("facepaint").DynamicStyle[];
-declare const flexMap: {
-    readonly alignItems: {
-        readonly start: "flex-start";
-        readonly center: "center";
-        readonly end: "flex-end";
-        readonly stretch: "stretch";
-    };
-    readonly justifyContent: {
-        readonly start: "flex-start";
-        readonly center: "center";
-        readonly end: "flex-end";
-        readonly spaceBetween: "space-between";
-        readonly stretch: "stretch";
-    };
-    readonly flexDirection: {
-        readonly row: "row";
-        readonly rowReverse: "row-reverse";
-        readonly column: "column";
-        readonly columnReverse: "column-reverse";
-    };
-};
-export {};