@spark-web/box 1.0.1 → 1.0.4
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/README.md +62 -60
- package/dist/declarations/src/Box.d.ts +7 -4
- package/dist/declarations/src/context.d.ts +1 -1
- package/dist/spark-web-box.cjs.dev.js +3 -2
- package/dist/spark-web-box.cjs.prod.js +3 -2
- package/dist/spark-web-box.esm.js +4 -3
- package/package.json +12 -6
- package/CHANGELOG.md +0 -31
- package/src/BackgroundProvider.tsx +0 -19
- package/src/Box.stories.tsx +0 -26
- package/src/Box.tsx +0 -45
- package/src/context.tsx +0 -54
- package/src/index.ts +0 -8
- package/src/useBoxProps.ts +0 -99
- package/src/useBoxStyles.ts +0 -422
package/README.md
CHANGED
|
@@ -38,69 +38,71 @@ 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
|
-
|
|
|
49
|
-
|
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
| |
|
|
64
|
-
| padding? | [ResponsiveProp][responsive-prop]
|
|
65
|
-
| paddingTop? | [ResponsiveProp][responsive-prop]
|
|
66
|
-
| paddingBottom? | [ResponsiveProp][responsive-prop]
|
|
67
|
-
| paddingLeft? | [ResponsiveProp][responsive-prop]
|
|
68
|
-
| paddingRight? | [ResponsiveProp][responsive-prop]
|
|
69
|
-
| paddingY? | [ResponsiveProp][responsive-prop]
|
|
70
|
-
| paddingX? | [ResponsiveProp][responsive-prop]
|
|
71
|
-
| |
|
|
72
|
-
| border? | [ResponsiveProp][responsive-prop]
|
|
73
|
-
| borderRadius? | [ResponsiveProp][responsive-prop]
|
|
74
|
-
| borderWidth? | [ResponsiveProp][responsive-prop]
|
|
75
|
-
| |
|
|
76
|
-
| height? | [ResponsiveProp][responsive-prop]
|
|
77
|
-
| width? | [ResponsiveProp][responsive-prop]
|
|
78
|
-
| |
|
|
79
|
-
| alignItems? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch'
|
|
80
|
-
| gap? | 'small' \| 'medium' \| 'xsmall' \| 'large' \| 'xxsmall' \| 'xlarge' \| 'xxlarge'
|
|
81
|
-
| flexDirection? | 'row' \| 'row-reverse' \| 'column' \| 'column-reverse'
|
|
82
|
-
| justifyContent? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'space-between'
|
|
83
|
-
| flexWrap? | [ResponsiveProp][responsive-prop]
|
|
84
|
-
| |
|
|
85
|
-
| alignSelf? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch'
|
|
86
|
-
| flex? | [ResponsiveProp][responsive-prop]
|
|
87
|
-
| flexGrow? | [ResponsiveProp][responsive-prop]
|
|
88
|
-
| flexShrink? | [ResponsiveProp][responsive-prop]
|
|
89
|
-
| |
|
|
90
|
-
| position? | [ResponsiveProp][responsive-prop]
|
|
91
|
-
| top? | [ResponsiveProp][responsive-prop]
|
|
92
|
-
| bottom? | [ResponsiveProp][responsive-prop]
|
|
93
|
-
| left? | [ResponsiveProp][responsive-prop]
|
|
94
|
-
| right? | [ResponsiveProp][responsive-prop]
|
|
95
|
-
| zIndex? | [ResponsiveProp][responsive-prop]
|
|
96
|
-
| |
|
|
97
|
-
| display? | [ResponsiveProp][responsive-prop]
|
|
98
|
-
| opacity? | [ResponsiveProp][responsive-prop]
|
|
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
|
+
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
48
|
+
| | | | |
|
|
49
|
+
| background? | keyof [BrighteTheme][brighte-theme]['color']['background'] | | Sets the backgroud of the component. |
|
|
50
|
+
| cursor? | 'default' \| 'pointer' | | Sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. |
|
|
51
|
+
| 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. |
|
|
52
|
+
| 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. |
|
|
53
|
+
| 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. |
|
|
54
|
+
| shadow? | keyof [BrighteTheme][brighte-theme]['shadow'] | | Adds shadow effects around the element's frame. |
|
|
55
|
+
| userSelect? | 'none' | | Controls whether the user can select text. |
|
|
56
|
+
| | | | |
|
|
57
|
+
| margin? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on all 4 sides of the element at once. |
|
|
58
|
+
| marginTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top side. |
|
|
59
|
+
| marginBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the bottom side. |
|
|
60
|
+
| marginLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the left side. |
|
|
61
|
+
| marginRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the right side. |
|
|
62
|
+
| marginY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top and bottom side. |
|
|
63
|
+
| | | | |
|
|
64
|
+
| padding? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on all 4 sides of the element at once. |
|
|
65
|
+
| paddingTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top side. |
|
|
66
|
+
| paddingBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the bottom side. |
|
|
67
|
+
| paddingLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left side. |
|
|
68
|
+
| paddingRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the right side. |
|
|
69
|
+
| paddingY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top and bottom side. |
|
|
70
|
+
| paddingX? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left and right side. |
|
|
71
|
+
| | | | |
|
|
72
|
+
| border? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the colour of the element's border. |
|
|
73
|
+
| borderRadius? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Rounds the corners of the element's outer border edge. |
|
|
74
|
+
| borderWidth? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the width of the element's border. |
|
|
75
|
+
| | | | |
|
|
76
|
+
| height? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's height. |
|
|
77
|
+
| width? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's width. |
|
|
78
|
+
| | | | |
|
|
79
|
+
| alignItems? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Controls alignment of items on the cross axis. |
|
|
80
|
+
| gap? | 'small' \| 'medium' \| 'xsmall' \| 'large' \| 'xxsmall' \| 'xlarge' \| 'xxlarge' | | Size of the gap between each child element. |
|
|
81
|
+
| flexDirection? | 'row' \| 'row-reverse' \| 'column' \| 'column-reverse' | | Defines the main axis, or how the children are placed. |
|
|
82
|
+
| justifyContent? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'space-between' | | Sets how to distribute space between and around content items along the main axis. |
|
|
83
|
+
| flexWrap? | [ResponsiveProp][responsive-prop]\<'nowrap' \| 'wrap'> | | Allow flex items to flow onto multiple lines. |
|
|
84
|
+
| | | | |
|
|
85
|
+
| alignSelf? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Override's parent's `align-items` value and controls alignment of item's on the cross axis. |
|
|
86
|
+
| flex? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets how a flex item will grow or shrink to fit the space available in its flex container. |
|
|
87
|
+
| flexGrow? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets the flex grow factor of a flex item main size. |
|
|
88
|
+
| 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. |
|
|
89
|
+
| | | |
|
|
90
|
+
| 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. |
|
|
91
|
+
| top? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
|
|
92
|
+
| bottom? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
|
|
93
|
+
| left? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
|
|
94
|
+
| right? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
|
|
95
|
+
| 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. |
|
|
96
|
+
| | | |
|
|
97
|
+
| display? | [ResponsiveProp][responsive-prop]\<'block' \| 'flex' \| 'inline' \| 'inline-block' \| 'inline-flex' \| 'none'> | | Sets the display of element. |
|
|
98
|
+
| opacity? | [ResponsiveProp][responsive-prop]\<number> | | Sets the opacity of the element. |
|
|
99
99
|
|
|
100
100
|
By default, Box renders a `div` element. You can customise this via the `as`
|
|
101
101
|
prop. Extra props will also be forwarded to the underlying element.
|
|
102
102
|
|
|
103
103
|
[brighte-theme]:
|
|
104
|
-
https://
|
|
104
|
+
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
|
|
105
105
|
[responsive-prop]:
|
|
106
|
-
https://
|
|
106
|
+
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L11
|
|
107
|
+
[data-attribute-map]:
|
|
108
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
1
2
|
import type { ReactNode } from 'react';
|
|
2
3
|
import type { BoxStyleProps } from './useBoxStyles';
|
|
3
4
|
export declare type BoxProps = {
|
|
4
5
|
children?: ReactNode;
|
|
6
|
+
data?: DataAttributeMap;
|
|
5
7
|
/** An identifier which must be unique in the whole document. */
|
|
6
8
|
id?: string;
|
|
7
9
|
className?: string;
|
|
@@ -15,9 +17,10 @@ export declare type BoxProps = {
|
|
|
15
17
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
16
18
|
export declare const Box: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
17
19
|
as?: Comp | undefined;
|
|
18
|
-
ref?: import("react").Ref<Comp extends "symbol" | "
|
|
20
|
+
ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
19
21
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
20
22
|
children?: ReactNode;
|
|
23
|
+
data?: DataAttributeMap | undefined;
|
|
21
24
|
/** An identifier which must be unique in the whole document. */
|
|
22
25
|
id?: string | undefined;
|
|
23
26
|
className?: string | undefined;
|
|
@@ -28,11 +31,11 @@ export declare const Box: <Comp extends import("react").ElementType<any> = "div"
|
|
|
28
31
|
*/
|
|
29
32
|
asElement?: keyof HTMLElementTagNameMap | undefined;
|
|
30
33
|
} & {
|
|
31
|
-
background?: "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "
|
|
34
|
+
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
35
|
cursor?: "default" | "pointer" | undefined;
|
|
33
36
|
minHeight?: 0 | undefined;
|
|
34
37
|
minWidth?: 0 | undefined;
|
|
35
|
-
overflow?: "
|
|
36
|
-
shadow?: "
|
|
38
|
+
overflow?: "auto" | "hidden" | "visible" | "scroll" | undefined;
|
|
39
|
+
shadow?: "medium" | "large" | "small" | undefined;
|
|
37
40
|
userSelect?: "none" | undefined;
|
|
38
41
|
} & import("./useBoxStyles").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -4,4 +4,4 @@ export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']>
|
|
|
4
4
|
export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
|
|
5
5
|
export declare const useBackground: () => BackgroundVariant;
|
|
6
6
|
export declare function renderBackgroundProvider(background: BackgroundVariant | undefined, element: ReactElement | null): JSX.Element | null;
|
|
7
|
-
export declare const useBackgroundLightness: (backgroundOverride?: BackgroundVariant | undefined) => "
|
|
7
|
+
export declare const useBackgroundLightness: (backgroundOverride?: BackgroundVariant | undefined) => "dark" | "light";
|
|
@@ -280,7 +280,7 @@ function useBoxProps(props) {
|
|
|
280
280
|
};
|
|
281
281
|
}
|
|
282
282
|
|
|
283
|
-
var _excluded = ["as", "asElement", "className", "id"];
|
|
283
|
+
var _excluded = ["as", "asElement", "className", "data", "id"];
|
|
284
284
|
|
|
285
285
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
286
286
|
var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
@@ -288,6 +288,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
288
288
|
Tag = _ref$as === void 0 ? 'div' : _ref$as,
|
|
289
289
|
asElement = _ref.asElement,
|
|
290
290
|
className = _ref.className,
|
|
291
|
+
data = _ref.data,
|
|
291
292
|
id = _ref.id,
|
|
292
293
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
293
294
|
|
|
@@ -297,7 +298,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
297
298
|
|
|
298
299
|
var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
|
|
299
300
|
|
|
300
|
-
var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
|
|
301
|
+
var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
301
302
|
ref: forwardedRef,
|
|
302
303
|
id: id,
|
|
303
304
|
className: css.cx(css.css(resetStyles), css.css(styles), className)
|
|
@@ -280,7 +280,7 @@ function useBoxProps(props) {
|
|
|
280
280
|
};
|
|
281
281
|
}
|
|
282
282
|
|
|
283
|
-
var _excluded = ["as", "asElement", "className", "id"];
|
|
283
|
+
var _excluded = ["as", "asElement", "className", "data", "id"];
|
|
284
284
|
|
|
285
285
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
286
286
|
var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
@@ -288,6 +288,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
288
288
|
Tag = _ref$as === void 0 ? 'div' : _ref$as,
|
|
289
289
|
asElement = _ref.asElement,
|
|
290
290
|
className = _ref.className,
|
|
291
|
+
data = _ref.data,
|
|
291
292
|
id = _ref.id,
|
|
292
293
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
293
294
|
|
|
@@ -297,7 +298,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
297
298
|
|
|
298
299
|
var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
|
|
299
300
|
|
|
300
|
-
var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
|
|
301
|
+
var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
301
302
|
ref: forwardedRef,
|
|
302
303
|
id: id,
|
|
303
304
|
className: css.cx(css.css(resetStyles), css.css(styles), className)
|
|
@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
5
5
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
6
6
|
import { cx, css } from '@emotion/css';
|
|
7
|
-
import { resetElementStyles } from '@spark-web/utils/internal';
|
|
7
|
+
import { resetElementStyles, buildDataAttributes } from '@spark-web/utils/internal';
|
|
8
8
|
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
9
9
|
|
|
10
10
|
// prepare context
|
|
@@ -276,7 +276,7 @@ function useBoxProps(props) {
|
|
|
276
276
|
};
|
|
277
277
|
}
|
|
278
278
|
|
|
279
|
-
var _excluded = ["as", "asElement", "className", "id"];
|
|
279
|
+
var _excluded = ["as", "asElement", "className", "data", "id"];
|
|
280
280
|
|
|
281
281
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
282
282
|
var Box = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
@@ -284,6 +284,7 @@ var Box = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
284
284
|
Tag = _ref$as === void 0 ? 'div' : _ref$as,
|
|
285
285
|
asElement = _ref.asElement,
|
|
286
286
|
className = _ref.className,
|
|
287
|
+
data = _ref.data,
|
|
287
288
|
id = _ref.id,
|
|
288
289
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
289
290
|
|
|
@@ -293,7 +294,7 @@ var Box = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
293
294
|
|
|
294
295
|
var resetStyles = resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
|
|
295
296
|
|
|
296
|
-
var element = /*#__PURE__*/jsx(Tag, _objectSpread({
|
|
297
|
+
var element = /*#__PURE__*/jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
|
|
297
298
|
ref: forwardedRef,
|
|
298
299
|
id: id,
|
|
299
300
|
className: cx(css(resetStyles), css(styles), className)
|
package/package.json
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/box",
|
|
3
|
+
"version": "1.0.4",
|
|
3
4
|
"license": "MIT",
|
|
4
|
-
"version": "1.0.1",
|
|
5
5
|
"main": "dist/spark-web-box.cjs.js",
|
|
6
6
|
"module": "dist/spark-web-box.esm.js",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@babel/runtime": "^7.14.6",
|
|
12
12
|
"@emotion/css": "^11.7.1",
|
|
13
|
-
"@spark-web/theme": "^
|
|
14
|
-
"@spark-web/utils": "^1.
|
|
13
|
+
"@spark-web/theme": "^3.0.0",
|
|
14
|
+
"@spark-web/utils": "^1.1.2"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@types/react": "^17.0.12",
|
|
15
18
|
"react": "^17.0.2"
|
|
16
19
|
},
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"react": ">=17.0.2"
|
|
22
|
+
},
|
|
17
23
|
"engines": {
|
|
18
24
|
"node": ">= 14.13"
|
|
19
25
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
# @spark-web/box
|
|
2
|
-
|
|
3
|
-
## 1.0.1
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
8
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
9
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
10
|
-
config
|
|
11
|
-
|
|
12
|
-
- Updated dependencies
|
|
13
|
-
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
14
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
15
|
-
- @spark-web/theme@2.0.0
|
|
16
|
-
- @spark-web/utils@1.0.1
|
|
17
|
-
|
|
18
|
-
## 1.0.0
|
|
19
|
-
|
|
20
|
-
### Major Changes
|
|
21
|
-
|
|
22
|
-
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
23
|
-
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
24
|
-
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
25
|
-
|
|
26
|
-
### Patch Changes
|
|
27
|
-
|
|
28
|
-
- Updated dependencies
|
|
29
|
-
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
30
|
-
- @spark-web/theme@1.0.0
|
|
31
|
-
- @spark-web/utils@1.0.0
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { ReactElement } from 'react';
|
|
2
|
-
|
|
3
|
-
import { renderBackgroundProvider } from './context';
|
|
4
|
-
|
|
5
|
-
export type BackgroundProviderProps = {
|
|
6
|
-
type: 'light' | 'dark';
|
|
7
|
-
children: ReactElement;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
/** Enforce background "lightness" without applying a background color. */
|
|
11
|
-
export const BackgroundProvider = ({
|
|
12
|
-
type,
|
|
13
|
-
children,
|
|
14
|
-
}: BackgroundProviderProps) => {
|
|
15
|
-
return renderBackgroundProvider(
|
|
16
|
-
type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT',
|
|
17
|
-
children
|
|
18
|
-
);
|
|
19
|
-
};
|
package/src/Box.stories.tsx
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { Text } from '@spark-web/text';
|
|
2
|
-
import type { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
import type { BoxProps } from './Box';
|
|
5
|
-
import { Box } from './Box';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Page & Layout / Box',
|
|
9
|
-
component: Box,
|
|
10
|
-
} as ComponentMeta<typeof Box>;
|
|
11
|
-
|
|
12
|
-
const BoxStory: ComponentStory<typeof Box> = (
|
|
13
|
-
args: Omit<BoxProps, 'className'>
|
|
14
|
-
) => (
|
|
15
|
-
<Box {...args}>
|
|
16
|
-
<Text>I'm some text inside a Box</Text>
|
|
17
|
-
</Box>
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
export const Default = BoxStory.bind({});
|
|
21
|
-
|
|
22
|
-
Default.args = {
|
|
23
|
-
padding: 'small',
|
|
24
|
-
shadow: 'medium',
|
|
25
|
-
borderRadius: 'medium',
|
|
26
|
-
} as BoxProps;
|
package/src/Box.tsx
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { css, cx } from '@emotion/css';
|
|
2
|
-
import { resetElementStyles } from '@spark-web/utils/internal';
|
|
3
|
-
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
4
|
-
import type { ReactNode } from 'react';
|
|
5
|
-
|
|
6
|
-
import { renderBackgroundProvider } from './context';
|
|
7
|
-
import { useBoxProps } from './useBoxProps';
|
|
8
|
-
import type { BoxStyleProps } from './useBoxStyles';
|
|
9
|
-
|
|
10
|
-
export type BoxProps = {
|
|
11
|
-
children?: ReactNode;
|
|
12
|
-
|
|
13
|
-
/** An identifier which must be unique in the whole document. */
|
|
14
|
-
id?: string;
|
|
15
|
-
|
|
16
|
-
// experiment
|
|
17
|
-
className?: string;
|
|
18
|
-
|
|
19
|
-
// TODO: this API is less than ideal, consider alternative
|
|
20
|
-
/**
|
|
21
|
-
* When providing a component using the "as" prop, optionally tell the system
|
|
22
|
-
* what the underlying element will be. Used internally to manage reset
|
|
23
|
-
* styles.
|
|
24
|
-
*/
|
|
25
|
-
asElement?: keyof HTMLElementTagNameMap;
|
|
26
|
-
} & BoxStyleProps;
|
|
27
|
-
|
|
28
|
-
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
29
|
-
export const Box = forwardRefWithAs<'div', BoxProps>(
|
|
30
|
-
({ as: Tag = 'div', asElement, className, id, ...props }, forwardedRef) => {
|
|
31
|
-
const { styles, attributes } = useBoxProps(props);
|
|
32
|
-
const resetStyles = resetElementStyles(asElement ?? Tag);
|
|
33
|
-
|
|
34
|
-
const element = (
|
|
35
|
-
<Tag
|
|
36
|
-
ref={forwardedRef}
|
|
37
|
-
id={id}
|
|
38
|
-
className={cx(css(resetStyles), css(styles), className)}
|
|
39
|
-
{...attributes}
|
|
40
|
-
/>
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
return renderBackgroundProvider(props.background, element);
|
|
44
|
-
}
|
|
45
|
-
);
|
package/src/context.tsx
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { useTheme } from '@spark-web/theme';
|
|
2
|
-
import type { ReactElement } from 'react';
|
|
3
|
-
import { createContext, useContext } from 'react';
|
|
4
|
-
|
|
5
|
-
import type { BoxStyleProps } from './useBoxStyles';
|
|
6
|
-
|
|
7
|
-
export type BackgroundVariant =
|
|
8
|
-
| NonNullable<BoxStyleProps['background']>
|
|
9
|
-
| 'UNKNOWN_DARK'
|
|
10
|
-
| 'UNKNOWN_LIGHT';
|
|
11
|
-
|
|
12
|
-
// prepare context
|
|
13
|
-
|
|
14
|
-
const backgroundContext = createContext<BackgroundVariant>('body');
|
|
15
|
-
export const InternalBackgroundProvider = backgroundContext.Provider;
|
|
16
|
-
export const useBackground = () => useContext(backgroundContext);
|
|
17
|
-
|
|
18
|
-
// conditional provider
|
|
19
|
-
|
|
20
|
-
export function renderBackgroundProvider(
|
|
21
|
-
background: BackgroundVariant | undefined,
|
|
22
|
-
element: ReactElement | null
|
|
23
|
-
) {
|
|
24
|
-
return background ? (
|
|
25
|
-
<InternalBackgroundProvider value={background}>
|
|
26
|
-
{element}
|
|
27
|
-
</InternalBackgroundProvider>
|
|
28
|
-
) : (
|
|
29
|
-
element
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// a11y contrast utility
|
|
34
|
-
|
|
35
|
-
export const useBackgroundLightness = (
|
|
36
|
-
backgroundOverride?: ReturnType<typeof useBackground>
|
|
37
|
-
) => {
|
|
38
|
-
const backgroundFromContext = useBackground();
|
|
39
|
-
const background = backgroundOverride || backgroundFromContext;
|
|
40
|
-
const { backgroundLightness } = useTheme();
|
|
41
|
-
const defaultLightness = backgroundLightness.body;
|
|
42
|
-
|
|
43
|
-
// used by the consumer-facing/external BackgroundProvider
|
|
44
|
-
if (background === 'UNKNOWN_DARK') {
|
|
45
|
-
return 'dark';
|
|
46
|
-
}
|
|
47
|
-
if (background === 'UNKNOWN_LIGHT') {
|
|
48
|
-
return 'light';
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
return background
|
|
52
|
-
? backgroundLightness[background] || defaultLightness
|
|
53
|
-
: defaultLightness;
|
|
54
|
-
};
|
package/src/index.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { BackgroundProvider } from './BackgroundProvider';
|
|
2
|
-
export { Box } from './Box';
|
|
3
|
-
export { useBackground, useBackgroundLightness } from './context';
|
|
4
|
-
|
|
5
|
-
// types
|
|
6
|
-
|
|
7
|
-
export type { BackgroundProviderProps } from './BackgroundProvider';
|
|
8
|
-
export type { BoxProps } from './Box';
|
package/src/useBoxProps.ts
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import type { BoxStyleProps } from './useBoxStyles';
|
|
2
|
-
import { useBoxStyles } from './useBoxStyles';
|
|
3
|
-
|
|
4
|
-
/** Separate the style properties from the element attributes. */
|
|
5
|
-
export function useBoxProps(props: BoxStyleProps) {
|
|
6
|
-
const {
|
|
7
|
-
alignItems,
|
|
8
|
-
alignSelf,
|
|
9
|
-
background,
|
|
10
|
-
border,
|
|
11
|
-
borderRadius,
|
|
12
|
-
borderWidth,
|
|
13
|
-
bottom,
|
|
14
|
-
cursor,
|
|
15
|
-
display,
|
|
16
|
-
flex,
|
|
17
|
-
flexDirection,
|
|
18
|
-
flexGrow,
|
|
19
|
-
flexShrink,
|
|
20
|
-
flexWrap,
|
|
21
|
-
gap,
|
|
22
|
-
height,
|
|
23
|
-
justifyContent,
|
|
24
|
-
left,
|
|
25
|
-
margin,
|
|
26
|
-
marginBottom,
|
|
27
|
-
marginLeft,
|
|
28
|
-
marginRight,
|
|
29
|
-
marginTop,
|
|
30
|
-
marginX,
|
|
31
|
-
marginY,
|
|
32
|
-
minHeight,
|
|
33
|
-
minWidth,
|
|
34
|
-
opacity,
|
|
35
|
-
overflow,
|
|
36
|
-
padding,
|
|
37
|
-
paddingBottom,
|
|
38
|
-
paddingLeft,
|
|
39
|
-
paddingRight,
|
|
40
|
-
paddingTop,
|
|
41
|
-
paddingX,
|
|
42
|
-
paddingY,
|
|
43
|
-
position,
|
|
44
|
-
right,
|
|
45
|
-
shadow,
|
|
46
|
-
top,
|
|
47
|
-
userSelect,
|
|
48
|
-
width,
|
|
49
|
-
zIndex,
|
|
50
|
-
...attributes
|
|
51
|
-
} = props;
|
|
52
|
-
const styles = useBoxStyles({
|
|
53
|
-
alignItems,
|
|
54
|
-
alignSelf,
|
|
55
|
-
background,
|
|
56
|
-
border,
|
|
57
|
-
borderRadius,
|
|
58
|
-
borderWidth,
|
|
59
|
-
bottom,
|
|
60
|
-
cursor,
|
|
61
|
-
display,
|
|
62
|
-
flex,
|
|
63
|
-
flexDirection,
|
|
64
|
-
flexGrow,
|
|
65
|
-
flexShrink,
|
|
66
|
-
flexWrap,
|
|
67
|
-
gap,
|
|
68
|
-
height,
|
|
69
|
-
justifyContent,
|
|
70
|
-
left,
|
|
71
|
-
margin,
|
|
72
|
-
marginBottom,
|
|
73
|
-
marginLeft,
|
|
74
|
-
marginRight,
|
|
75
|
-
marginTop,
|
|
76
|
-
marginX,
|
|
77
|
-
marginY,
|
|
78
|
-
minHeight,
|
|
79
|
-
minWidth,
|
|
80
|
-
opacity,
|
|
81
|
-
overflow,
|
|
82
|
-
padding,
|
|
83
|
-
paddingBottom,
|
|
84
|
-
paddingLeft,
|
|
85
|
-
paddingRight,
|
|
86
|
-
paddingTop,
|
|
87
|
-
paddingX,
|
|
88
|
-
paddingY,
|
|
89
|
-
position,
|
|
90
|
-
right,
|
|
91
|
-
shadow,
|
|
92
|
-
top,
|
|
93
|
-
userSelect,
|
|
94
|
-
width,
|
|
95
|
-
zIndex,
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
return { styles, attributes };
|
|
99
|
-
}
|
package/src/useBoxStyles.ts
DELETED
|
@@ -1,422 +0,0 @@
|
|
|
1
|
-
import type { BrighteTheme, ResponsiveProp } from '@spark-web/theme';
|
|
2
|
-
import { useTheme } from '@spark-web/theme';
|
|
3
|
-
|
|
4
|
-
// TODO perf review
|
|
5
|
-
// TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
|
|
6
|
-
|
|
7
|
-
// types
|
|
8
|
-
|
|
9
|
-
type ValidGapKeys = keyof Omit<BrighteTheme['spacing'], 'none' | 'full'>;
|
|
10
|
-
type ResponsiveSpacing = ResponsiveProp<keyof BrighteTheme['spacing']>;
|
|
11
|
-
type ResponsiveSizing = ResponsiveProp<keyof BrighteTheme['sizing']>;
|
|
12
|
-
|
|
13
|
-
export type ResponsiveBoxProps = {
|
|
14
|
-
/**
|
|
15
|
-
* The `margin` shorthand property sets the margin area on all four sides of
|
|
16
|
-
* an element at once.
|
|
17
|
-
*/
|
|
18
|
-
margin?: ResponsiveSpacing;
|
|
19
|
-
/**
|
|
20
|
-
* The `marginTop` property sets the margin area on the top side of an
|
|
21
|
-
* element.
|
|
22
|
-
*/
|
|
23
|
-
marginTop?: ResponsiveSpacing;
|
|
24
|
-
/**
|
|
25
|
-
* The `marginRight` property sets the margin area on the right side of an
|
|
26
|
-
* element.
|
|
27
|
-
*/
|
|
28
|
-
marginRight?: ResponsiveSpacing;
|
|
29
|
-
/**
|
|
30
|
-
* The `marginBottom` property sets the margin area on the bottom side of an
|
|
31
|
-
* element.
|
|
32
|
-
*/
|
|
33
|
-
marginBottom?: ResponsiveSpacing;
|
|
34
|
-
/**
|
|
35
|
-
* The `marginLeft` property sets the margin area on the left side of an
|
|
36
|
-
* element.
|
|
37
|
-
*/
|
|
38
|
-
marginLeft?: ResponsiveSpacing;
|
|
39
|
-
/**
|
|
40
|
-
* The `marginY` shorthand property sets the margin area on the top and
|
|
41
|
-
* bottom of the element.
|
|
42
|
-
*/
|
|
43
|
-
marginY?: ResponsiveSpacing;
|
|
44
|
-
/**
|
|
45
|
-
* The `marginY` shorthand property sets the margin area on the left and
|
|
46
|
-
* right of the element.
|
|
47
|
-
*/
|
|
48
|
-
marginX?: ResponsiveSpacing;
|
|
49
|
-
|
|
50
|
-
// ==============================
|
|
51
|
-
// PADDING
|
|
52
|
-
// ==============================
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* The `padding` shorthand property sets the padding area on all four sides
|
|
56
|
-
* of an element at once.
|
|
57
|
-
*/
|
|
58
|
-
padding?: ResponsiveSpacing;
|
|
59
|
-
/**
|
|
60
|
-
* The `paddingTop` property sets the height of the padding area on the top
|
|
61
|
-
* of an element.
|
|
62
|
-
*/
|
|
63
|
-
paddingTop?: ResponsiveSpacing;
|
|
64
|
-
/**
|
|
65
|
-
* The `paddingRight` property sets the width of the padding area on the
|
|
66
|
-
* right of an element.
|
|
67
|
-
*/
|
|
68
|
-
paddingRight?: ResponsiveSpacing;
|
|
69
|
-
/**
|
|
70
|
-
* The `paddingBottom` property sets the height of the padding area on the
|
|
71
|
-
* bottom of an element.
|
|
72
|
-
*/
|
|
73
|
-
paddingBottom?: ResponsiveSpacing;
|
|
74
|
-
/**
|
|
75
|
-
* The `paddingLeft` property sets the width of the padding area on the left
|
|
76
|
-
* of an element.
|
|
77
|
-
*/
|
|
78
|
-
paddingLeft?: ResponsiveSpacing;
|
|
79
|
-
/**
|
|
80
|
-
* The `paddingY` shorthand property sets the padding area on the top and
|
|
81
|
-
* bottom of the element.
|
|
82
|
-
*/
|
|
83
|
-
paddingY?: ResponsiveSpacing;
|
|
84
|
-
/**
|
|
85
|
-
* The `paddingX` shorthand property sets the padding area on the left and
|
|
86
|
-
* right of the element.
|
|
87
|
-
*/
|
|
88
|
-
paddingX?: ResponsiveSpacing;
|
|
89
|
-
|
|
90
|
-
// ==============================
|
|
91
|
-
// BORDER
|
|
92
|
-
// ==============================
|
|
93
|
-
|
|
94
|
-
/** The `border` property sets the color of an element's border. */
|
|
95
|
-
border?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
|
|
96
|
-
/**
|
|
97
|
-
* The `borderRadius` property rounds the corners of an element's outer
|
|
98
|
-
* border edge.
|
|
99
|
-
*/
|
|
100
|
-
borderRadius?: ResponsiveProp<keyof BrighteTheme['border']['radius']>;
|
|
101
|
-
/**
|
|
102
|
-
* The `borderWidth` property sets the width of an element's border.
|
|
103
|
-
*/
|
|
104
|
-
borderWidth?: ResponsiveProp<keyof BrighteTheme['border']['width']>;
|
|
105
|
-
|
|
106
|
-
// ==============================
|
|
107
|
-
// DIMENSIONS
|
|
108
|
-
// ==============================
|
|
109
|
-
|
|
110
|
-
/** Sets the element's height. */
|
|
111
|
-
height?: ResponsiveSizing;
|
|
112
|
-
/** Sets the element's width. */
|
|
113
|
-
width?: ResponsiveSizing;
|
|
114
|
-
|
|
115
|
-
// ==============================
|
|
116
|
-
// FLEX: Parent
|
|
117
|
-
// ==============================
|
|
118
|
-
|
|
119
|
-
/** Controls the alignment of items on the cross axis. */
|
|
120
|
-
alignItems?: ResponsiveProp<keyof typeof flexMap.alignItems>;
|
|
121
|
-
/** The size of the gap between each child element. */
|
|
122
|
-
gap?: ResponsiveProp<ValidGapKeys>;
|
|
123
|
-
/** Defines the main axis, or how the children are placed. */
|
|
124
|
-
flexDirection?: ResponsiveProp<keyof typeof flexMap.flexDirection>;
|
|
125
|
-
/**
|
|
126
|
-
* defines how the browser distributes space between and around content items
|
|
127
|
-
* along the main-axis.
|
|
128
|
-
*/
|
|
129
|
-
justifyContent?: ResponsiveProp<keyof typeof flexMap.justifyContent>;
|
|
130
|
-
/** Allow flex items to flow onto multiple lines. */
|
|
131
|
-
flexWrap?: ResponsiveProp<'nowrap' | 'wrap'>;
|
|
132
|
-
|
|
133
|
-
// ==============================
|
|
134
|
-
// FLEX: Child
|
|
135
|
-
// ==============================
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Overrides the parent's `align-items` value. Controls the alignment of
|
|
139
|
-
* item's on the cross axis.
|
|
140
|
-
*/
|
|
141
|
-
alignSelf?: ResponsiveProp<keyof typeof flexMap.alignItems>;
|
|
142
|
-
/**
|
|
143
|
-
* The `flex` shorthand property sets how a flex item will grow or shrink to
|
|
144
|
-
* fit the space available in its flex container.
|
|
145
|
-
*/
|
|
146
|
-
flex?: ResponsiveProp<0 | 1>;
|
|
147
|
-
/** The `flexGrow` property sets the flex grow factor of a flex item main size. */
|
|
148
|
-
flexGrow?: ResponsiveProp<0 | 1>;
|
|
149
|
-
/**
|
|
150
|
-
* The `flexShrink` property sets the flex shrink factor of a flex item. If
|
|
151
|
-
* the size of all flex items is larger than the flex container, items shrink
|
|
152
|
-
* to fit according to `flex-shrink`.
|
|
153
|
-
*/
|
|
154
|
-
flexShrink?: ResponsiveProp<0 | 1>;
|
|
155
|
-
|
|
156
|
-
// ==============================
|
|
157
|
-
// POSITION
|
|
158
|
-
// ==============================
|
|
159
|
-
|
|
160
|
-
/**
|
|
161
|
-
* The `position` property sets how an element is positioned in a document.
|
|
162
|
-
* The `top`, `right`, `bottom`, and `left` properties determine the final
|
|
163
|
-
* location of positioned elements.
|
|
164
|
-
*/
|
|
165
|
-
position?: ResponsiveProp<'absolute' | 'fixed' | 'relative' | 'sticky'>;
|
|
166
|
-
/**
|
|
167
|
-
* The `top` property participates in specifying the vertical position of a
|
|
168
|
-
* positioned element. It has no effect on non-positioned elements.
|
|
169
|
-
*/
|
|
170
|
-
top?: ResponsiveProp<0>;
|
|
171
|
-
/**
|
|
172
|
-
* The `right` property participates in specifying the horizontal position of
|
|
173
|
-
* a positioned element. It has no effect on non-positioned elements.
|
|
174
|
-
*/
|
|
175
|
-
right?: ResponsiveProp<0>;
|
|
176
|
-
/**
|
|
177
|
-
* The `bottom` property participates in setting the vertical position of a
|
|
178
|
-
* positioned element. It has no effect on non-positioned elements.
|
|
179
|
-
*/
|
|
180
|
-
bottom?: ResponsiveProp<0>;
|
|
181
|
-
/**
|
|
182
|
-
* The `left` property participates in specifying the horizontal position of a
|
|
183
|
-
* positioned element. It has no effect on non-positioned elements.
|
|
184
|
-
*/
|
|
185
|
-
left?: ResponsiveProp<0>;
|
|
186
|
-
/**
|
|
187
|
-
* The `zIndex` property sets the "z-order" of a positioned element and its
|
|
188
|
-
* descendants or flex items. Overlapping elements with a larger z-index cover
|
|
189
|
-
* those with a smaller one.
|
|
190
|
-
*/
|
|
191
|
-
zIndex?: ResponsiveProp<keyof BrighteTheme['elevation']>;
|
|
192
|
-
|
|
193
|
-
// ==============================
|
|
194
|
-
// MISC...
|
|
195
|
-
// ==============================
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Sets whether an element is treated as a block or inline element and the
|
|
199
|
-
* layout used for its children.
|
|
200
|
-
*/
|
|
201
|
-
display?: ResponsiveProp<
|
|
202
|
-
'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'none'
|
|
203
|
-
>;
|
|
204
|
-
/**
|
|
205
|
-
* Sets the opacity of the element. Opacity is the degree to which content
|
|
206
|
-
* behind an element is hidden, and is the opposite of transparency.
|
|
207
|
-
*/
|
|
208
|
-
opacity?: ResponsiveProp<number>;
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
type UnresponsiveBoxProps = {
|
|
212
|
-
/** The `background` property sets the background color of an element. */
|
|
213
|
-
background?: keyof BrighteTheme['color']['background'];
|
|
214
|
-
/**
|
|
215
|
-
* The `cursor` property sets the type of mouse cursor, if any, to show when
|
|
216
|
-
* the mouse pointer is over an element.
|
|
217
|
-
*/
|
|
218
|
-
cursor?: 'default' | 'pointer';
|
|
219
|
-
/**
|
|
220
|
-
* The `minHeight` property sets the minimum height of an element. It prevents
|
|
221
|
-
* the used value of the height property from becoming smaller than the value
|
|
222
|
-
* specified for `minHeight`.
|
|
223
|
-
*/
|
|
224
|
-
minHeight?: 0;
|
|
225
|
-
/**
|
|
226
|
-
* The `minWidth` property sets the minimum width of an element. It prevents
|
|
227
|
-
* the used value of the width property from becoming smaller than the value
|
|
228
|
-
* specified for `minWidth`.
|
|
229
|
-
*/
|
|
230
|
-
minWidth?: 0;
|
|
231
|
-
/**
|
|
232
|
-
* The `overflow` shorthand property sets the desired behavior for an
|
|
233
|
-
* element's overflow — i.e. when an element's content is too big to fit in
|
|
234
|
-
* its block formatting context — in both directions.
|
|
235
|
-
*/
|
|
236
|
-
overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
|
|
237
|
-
/** The `boxShadow` property adds shadow effects around an element's frame. */
|
|
238
|
-
shadow?: keyof BrighteTheme['shadow'];
|
|
239
|
-
/** The `userSelect` property controls whether the user can select text. */
|
|
240
|
-
userSelect?: 'none';
|
|
241
|
-
};
|
|
242
|
-
|
|
243
|
-
export type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
|
|
244
|
-
|
|
245
|
-
// Hook
|
|
246
|
-
// ------------------------------
|
|
247
|
-
|
|
248
|
-
export const useBoxStyles = ({
|
|
249
|
-
alignItems,
|
|
250
|
-
alignSelf,
|
|
251
|
-
background,
|
|
252
|
-
border,
|
|
253
|
-
borderRadius,
|
|
254
|
-
borderWidth = 'standard',
|
|
255
|
-
bottom,
|
|
256
|
-
cursor,
|
|
257
|
-
display,
|
|
258
|
-
flex,
|
|
259
|
-
flexDirection,
|
|
260
|
-
flexGrow,
|
|
261
|
-
flexShrink,
|
|
262
|
-
flexWrap,
|
|
263
|
-
gap,
|
|
264
|
-
height,
|
|
265
|
-
justifyContent,
|
|
266
|
-
left,
|
|
267
|
-
margin,
|
|
268
|
-
marginBottom,
|
|
269
|
-
marginLeft,
|
|
270
|
-
marginRight,
|
|
271
|
-
marginTop,
|
|
272
|
-
marginX,
|
|
273
|
-
marginY,
|
|
274
|
-
minHeight,
|
|
275
|
-
minWidth,
|
|
276
|
-
opacity,
|
|
277
|
-
overflow,
|
|
278
|
-
padding,
|
|
279
|
-
paddingBottom,
|
|
280
|
-
paddingLeft,
|
|
281
|
-
paddingRight,
|
|
282
|
-
paddingTop,
|
|
283
|
-
paddingX,
|
|
284
|
-
paddingY,
|
|
285
|
-
position,
|
|
286
|
-
right,
|
|
287
|
-
shadow,
|
|
288
|
-
top,
|
|
289
|
-
userSelect,
|
|
290
|
-
width,
|
|
291
|
-
zIndex,
|
|
292
|
-
}: BoxStyleProps) => {
|
|
293
|
-
const theme = useTheme();
|
|
294
|
-
|
|
295
|
-
const unresponsiveProps = {
|
|
296
|
-
background: background ? theme.color.background[background] : undefined,
|
|
297
|
-
boxShadow: shadow ? theme.shadow[shadow] : undefined,
|
|
298
|
-
cursor,
|
|
299
|
-
minHeight,
|
|
300
|
-
minWidth,
|
|
301
|
-
opacity,
|
|
302
|
-
overflow,
|
|
303
|
-
userSelect,
|
|
304
|
-
};
|
|
305
|
-
|
|
306
|
-
const conditionalBorderStyles = border
|
|
307
|
-
? {
|
|
308
|
-
borderStyle: 'solid',
|
|
309
|
-
borderColor: theme.utils.mapResponsiveScale(border, theme.border.color),
|
|
310
|
-
borderWidth: theme.utils.mapResponsiveScale(
|
|
311
|
-
borderWidth,
|
|
312
|
-
theme.border.width
|
|
313
|
-
),
|
|
314
|
-
}
|
|
315
|
-
: null;
|
|
316
|
-
|
|
317
|
-
return theme.utils.resolveResponsiveProps({
|
|
318
|
-
...unresponsiveProps,
|
|
319
|
-
...conditionalBorderStyles,
|
|
320
|
-
|
|
321
|
-
// allow padding and height/width props to play nice
|
|
322
|
-
display: theme.utils.mapResponsiveProp(display),
|
|
323
|
-
|
|
324
|
-
// margin
|
|
325
|
-
marginBottom: theme.utils.mapResponsiveScale(
|
|
326
|
-
marginBottom || marginY || margin,
|
|
327
|
-
theme.spacing
|
|
328
|
-
),
|
|
329
|
-
marginTop: theme.utils.mapResponsiveScale(
|
|
330
|
-
marginTop || marginY || margin,
|
|
331
|
-
theme.spacing
|
|
332
|
-
),
|
|
333
|
-
marginLeft: theme.utils.mapResponsiveScale(
|
|
334
|
-
marginLeft || marginX || margin,
|
|
335
|
-
theme.spacing
|
|
336
|
-
),
|
|
337
|
-
marginRight: theme.utils.mapResponsiveScale(
|
|
338
|
-
marginRight || marginX || margin,
|
|
339
|
-
theme.spacing
|
|
340
|
-
),
|
|
341
|
-
|
|
342
|
-
// padding
|
|
343
|
-
paddingBottom: theme.utils.mapResponsiveScale(
|
|
344
|
-
paddingBottom || paddingY || padding,
|
|
345
|
-
theme.spacing
|
|
346
|
-
),
|
|
347
|
-
paddingTop: theme.utils.mapResponsiveScale(
|
|
348
|
-
paddingTop || paddingY || padding,
|
|
349
|
-
theme.spacing
|
|
350
|
-
),
|
|
351
|
-
paddingLeft: theme.utils.mapResponsiveScale(
|
|
352
|
-
paddingLeft || paddingX || padding,
|
|
353
|
-
theme.spacing
|
|
354
|
-
),
|
|
355
|
-
paddingRight: theme.utils.mapResponsiveScale(
|
|
356
|
-
paddingRight || paddingX || padding,
|
|
357
|
-
theme.spacing
|
|
358
|
-
),
|
|
359
|
-
|
|
360
|
-
// border
|
|
361
|
-
borderRadius: theme.utils.mapResponsiveScale(
|
|
362
|
-
borderRadius,
|
|
363
|
-
theme.border.radius
|
|
364
|
-
),
|
|
365
|
-
|
|
366
|
-
// flex: parent
|
|
367
|
-
alignItems: theme.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
|
|
368
|
-
gap: theme.utils.mapResponsiveScale(gap, theme.spacing),
|
|
369
|
-
flexDirection: theme.utils.mapResponsiveScale(
|
|
370
|
-
flexDirection,
|
|
371
|
-
flexMap.flexDirection
|
|
372
|
-
),
|
|
373
|
-
justifyContent: theme.utils.mapResponsiveScale(
|
|
374
|
-
justifyContent,
|
|
375
|
-
flexMap.justifyContent
|
|
376
|
-
),
|
|
377
|
-
flexWrap: theme.utils.mapResponsiveProp(flexWrap),
|
|
378
|
-
|
|
379
|
-
// flex: child
|
|
380
|
-
alignSelf: theme.utils.mapResponsiveScale(alignSelf, flexMap.alignItems),
|
|
381
|
-
flex: theme.utils.mapResponsiveProp(flex),
|
|
382
|
-
flexGrow: theme.utils.mapResponsiveProp(flexGrow),
|
|
383
|
-
flexShrink: theme.utils.mapResponsiveProp(flexShrink),
|
|
384
|
-
|
|
385
|
-
// dimension
|
|
386
|
-
height: theme.utils.mapResponsiveScale(height, theme.sizing),
|
|
387
|
-
width: theme.utils.mapResponsiveScale(width, theme.sizing),
|
|
388
|
-
|
|
389
|
-
// position
|
|
390
|
-
position: theme.utils.mapResponsiveProp(position),
|
|
391
|
-
bottom: theme.utils.mapResponsiveProp(bottom),
|
|
392
|
-
left: theme.utils.mapResponsiveProp(left),
|
|
393
|
-
right: theme.utils.mapResponsiveProp(right),
|
|
394
|
-
top: theme.utils.mapResponsiveProp(top),
|
|
395
|
-
zIndex: theme.utils.mapResponsiveScale(zIndex, theme.elevation),
|
|
396
|
-
});
|
|
397
|
-
};
|
|
398
|
-
|
|
399
|
-
// Flex shorthand / adjustments
|
|
400
|
-
// ------------------------------
|
|
401
|
-
|
|
402
|
-
const flexMap = {
|
|
403
|
-
alignItems: {
|
|
404
|
-
start: 'flex-start',
|
|
405
|
-
center: 'center',
|
|
406
|
-
end: 'flex-end',
|
|
407
|
-
stretch: 'stretch',
|
|
408
|
-
},
|
|
409
|
-
justifyContent: {
|
|
410
|
-
start: 'flex-start',
|
|
411
|
-
center: 'center',
|
|
412
|
-
end: 'flex-end',
|
|
413
|
-
spaceBetween: 'space-between',
|
|
414
|
-
stretch: 'stretch',
|
|
415
|
-
},
|
|
416
|
-
flexDirection: {
|
|
417
|
-
row: 'row',
|
|
418
|
-
rowReverse: 'row-reverse',
|
|
419
|
-
column: 'column',
|
|
420
|
-
columnReverse: 'column-reverse',
|
|
421
|
-
},
|
|
422
|
-
} as const;
|