@spark-web/box 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.md +106 -0
- package/dist/declarations/src/BackgroundProvider.d.ts +7 -0
- package/dist/declarations/src/Box.d.ts +38 -0
- package/dist/declarations/src/context.d.ts +7 -0
- package/dist/declarations/src/index.d.ts +5 -0
- package/dist/declarations/src/useBoxProps.d.ts +6 -0
- package/dist/declarations/src/useBoxStyles.d.ts +219 -0
- package/dist/spark-web-box.cjs.d.ts +1 -0
- package/dist/spark-web-box.cjs.dev.js +320 -0
- package/dist/spark-web-box.cjs.js +7 -0
- package/dist/spark-web-box.cjs.prod.js +320 -0
- package/dist/spark-web-box.esm.js +309 -0
- package/package.json +20 -0
- package/src/BackgroundProvider.tsx +19 -0
- package/src/Box.stories.tsx +26 -0
- package/src/Box.tsx +45 -0
- package/src/context.tsx +54 -0
- package/src/index.ts +8 -0
- package/src/useBoxProps.ts +99 -0
- package/src/useBoxStyles.ts +422 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# @spark-web/box
|
|
2
|
+
|
|
3
|
+
## 1.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
8
|
+
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
9
|
+
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
15
|
+
- @spark-web/theme@1.0.0
|
|
16
|
+
- @spark-web/utils@1.0.0
|
package/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Box
|
|
3
|
+
storybookPath: page-layout-box--default
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Box is the lowest-level component for binding theme-based styles to an
|
|
7
|
+
individual element on the screen. Internally, all Spark components are made up
|
|
8
|
+
of Boxes.
|
|
9
|
+
|
|
10
|
+
All elements rendered via Box are provided with a CSS reset to ensure that
|
|
11
|
+
elements only have styling rules that have been explicitly specified.
|
|
12
|
+
|
|
13
|
+
## Examples
|
|
14
|
+
|
|
15
|
+
### Box with border
|
|
16
|
+
|
|
17
|
+
```jsx live
|
|
18
|
+
<Box border="standard" borderRadius="full" padding="large">
|
|
19
|
+
<Text>Lorem ipsum dolor sit amet.</Text>
|
|
20
|
+
</Box>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Flexbox layouts
|
|
24
|
+
|
|
25
|
+
```jsx live
|
|
26
|
+
<Box display="flex">
|
|
27
|
+
<Box padding="large" margin="large" background="primary">
|
|
28
|
+
<Text>hi</Text>
|
|
29
|
+
</Box>
|
|
30
|
+
<Box padding="large" margin="large" background="primary">
|
|
31
|
+
<Text>there</Text>
|
|
32
|
+
</Box>
|
|
33
|
+
<Box padding="large" margin="large" background="primary">
|
|
34
|
+
<Text>friend</Text>
|
|
35
|
+
</Box>
|
|
36
|
+
</Box>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Props
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| --------------- | ------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
43
|
+
| children | React.ReactNode | | Children element to be rendered inside the component. |
|
|
44
|
+
| id? | string | | An identifier that must be unique in the whole document. |
|
|
45
|
+
| className? | string | | Custom css styles. |
|
|
46
|
+
| asElement? | string | | An option to indicate what the underlying element of the box should be. |
|
|
47
|
+
| | | | |
|
|
48
|
+
| background? | keyof [BrighteTheme][brighte-theme]['color']['background'] | | Sets the backgroud of the component. |
|
|
49
|
+
| cursor? | 'default' \| 'pointer' | | Sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. |
|
|
50
|
+
| minHeight? | 0 | | Sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified. |
|
|
51
|
+
| minWidth? | 0 | | Sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified. |
|
|
52
|
+
| overflow? | 'hidden' \| 'scroll' \| 'visible' \| 'auto' | | Sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions. |
|
|
53
|
+
| shadow? | keyof [BrighteTheme][brighte-theme]['shadow'] | | Adds shadow effects around the element's frame. |
|
|
54
|
+
| userSelect? | 'none' | | Controls whether the user can select text. |
|
|
55
|
+
| | | | |
|
|
56
|
+
| margin? | [ResponsiveProp][responsive-prop]<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on all 4 sides of the element at once. |
|
|
57
|
+
| marginTop? | [ResponsiveProp][responsive-prop]<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top side. |
|
|
58
|
+
| marginBottom? | [ResponsiveProp][responsive-prop]<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the bottom side. |
|
|
59
|
+
| marginLeft? | [ResponsiveProp][responsive-prop]<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the left side. |
|
|
60
|
+
| marginRight? | [ResponsiveProp][responsive-prop]<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the right side. |
|
|
61
|
+
| marginY? | [ResponsiveProp][responsive-prop]<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top and bottom side. |
|
|
62
|
+
| marginX? | [ResponsiveProp][responsive-prop]<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the left and right 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
|
+
|
|
100
|
+
By default, Box renders a `div` element. You can customise this via the `as`
|
|
101
|
+
prop. Extra props will also be forwarded to the underlying element.
|
|
102
|
+
|
|
103
|
+
[brighte-theme]:
|
|
104
|
+
https://bitbucket.org/brighte-energy/energy/src/24cfd1fbc07ea0f737a4580df8b20e970a32e369/spark-web/packages/theme/src/makeTheme.ts#spark-web/packages/theme/src/makeTheme.ts-173
|
|
105
|
+
[responsive-prop]:
|
|
106
|
+
https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/theme/src/themeUtils.ts#spark-web/packages/theme/src/themeUtils.ts-11
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
export declare type BackgroundProviderProps = {
|
|
3
|
+
type: 'light' | 'dark';
|
|
4
|
+
children: ReactElement;
|
|
5
|
+
};
|
|
6
|
+
/** Enforce background "lightness" without applying a background color. */
|
|
7
|
+
export declare const BackgroundProvider: ({ type, children, }: BackgroundProviderProps) => JSX.Element | null;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { BoxStyleProps } from './useBoxStyles';
|
|
3
|
+
export declare type BoxProps = {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
/** An identifier which must be unique in the whole document. */
|
|
6
|
+
id?: string;
|
|
7
|
+
className?: string;
|
|
8
|
+
/**
|
|
9
|
+
* When providing a component using the "as" prop, optionally tell the system
|
|
10
|
+
* what the underlying element will be. Used internally to manage reset
|
|
11
|
+
* styles.
|
|
12
|
+
*/
|
|
13
|
+
asElement?: keyof HTMLElementTagNameMap;
|
|
14
|
+
} & BoxStyleProps;
|
|
15
|
+
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
16
|
+
export declare const Box: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
17
|
+
as?: Comp | undefined;
|
|
18
|
+
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
|
+
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
/** An identifier which must be unique in the whole document. */
|
|
22
|
+
id?: string | undefined;
|
|
23
|
+
className?: string | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* When providing a component using the "as" prop, optionally tell the system
|
|
26
|
+
* what the underlying element will be. Used internally to manage reset
|
|
27
|
+
* styles.
|
|
28
|
+
*/
|
|
29
|
+
asElement?: keyof HTMLElementTagNameMap | undefined;
|
|
30
|
+
} & {
|
|
31
|
+
background?: "disabled" | "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "temporary-green" | "temporary-green-low" | "temporary-green-high" | "temporary-green-soft" | "temporary-yellow" | "temporary-yellow-low" | "temporary-yellow-high" | "temporary-yellow-soft" | "temporary-dark" | "temporary-dark-low" | "temporary-dark-high" | "temporary-dark-soft" | "temporary-blue" | "temporary-blue-low" | "temporary-blue-high" | "temporary-blue-soft" | "temporary-red" | "temporary-red-low" | "temporary-red-high" | "temporary-red-soft" | "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
|
+
cursor?: "default" | "pointer" | undefined;
|
|
33
|
+
minHeight?: 0 | undefined;
|
|
34
|
+
minWidth?: 0 | undefined;
|
|
35
|
+
overflow?: "auto" | "hidden" | "visible" | "scroll" | undefined;
|
|
36
|
+
shadow?: "medium" | "large" | "small" | undefined;
|
|
37
|
+
userSelect?: "none" | undefined;
|
|
38
|
+
} & import("./useBoxStyles").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { BoxStyleProps } from './useBoxStyles';
|
|
3
|
+
export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
|
|
4
|
+
export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
|
|
5
|
+
export declare const useBackground: () => BackgroundVariant;
|
|
6
|
+
export declare function renderBackgroundProvider(background: BackgroundVariant | undefined, element: ReactElement | null): JSX.Element | null;
|
|
7
|
+
export declare const useBackgroundLightness: (backgroundOverride?: BackgroundVariant | undefined) => "dark" | "light";
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
import type { BrighteTheme, ResponsiveProp } from '@spark-web/theme';
|
|
2
|
+
declare type ValidGapKeys = keyof Omit<BrighteTheme['spacing'], 'none' | 'full'>;
|
|
3
|
+
declare type ResponsiveSpacing = ResponsiveProp<keyof BrighteTheme['spacing']>;
|
|
4
|
+
declare type ResponsiveSizing = ResponsiveProp<keyof BrighteTheme['sizing']>;
|
|
5
|
+
export declare type ResponsiveBoxProps = {
|
|
6
|
+
/**
|
|
7
|
+
* The `margin` shorthand property sets the margin area on all four sides of
|
|
8
|
+
* an element at once.
|
|
9
|
+
*/
|
|
10
|
+
margin?: ResponsiveSpacing;
|
|
11
|
+
/**
|
|
12
|
+
* The `marginTop` property sets the margin area on the top side of an
|
|
13
|
+
* element.
|
|
14
|
+
*/
|
|
15
|
+
marginTop?: ResponsiveSpacing;
|
|
16
|
+
/**
|
|
17
|
+
* The `marginRight` property sets the margin area on the right side of an
|
|
18
|
+
* element.
|
|
19
|
+
*/
|
|
20
|
+
marginRight?: ResponsiveSpacing;
|
|
21
|
+
/**
|
|
22
|
+
* The `marginBottom` property sets the margin area on the bottom side of an
|
|
23
|
+
* element.
|
|
24
|
+
*/
|
|
25
|
+
marginBottom?: ResponsiveSpacing;
|
|
26
|
+
/**
|
|
27
|
+
* The `marginLeft` property sets the margin area on the left side of an
|
|
28
|
+
* element.
|
|
29
|
+
*/
|
|
30
|
+
marginLeft?: ResponsiveSpacing;
|
|
31
|
+
/**
|
|
32
|
+
* The `marginY` shorthand property sets the margin area on the top and
|
|
33
|
+
* bottom of the element.
|
|
34
|
+
*/
|
|
35
|
+
marginY?: ResponsiveSpacing;
|
|
36
|
+
/**
|
|
37
|
+
* The `marginY` shorthand property sets the margin area on the left and
|
|
38
|
+
* right of the element.
|
|
39
|
+
*/
|
|
40
|
+
marginX?: ResponsiveSpacing;
|
|
41
|
+
/**
|
|
42
|
+
* The `padding` shorthand property sets the padding area on all four sides
|
|
43
|
+
* of an element at once.
|
|
44
|
+
*/
|
|
45
|
+
padding?: ResponsiveSpacing;
|
|
46
|
+
/**
|
|
47
|
+
* The `paddingTop` property sets the height of the padding area on the top
|
|
48
|
+
* of an element.
|
|
49
|
+
*/
|
|
50
|
+
paddingTop?: ResponsiveSpacing;
|
|
51
|
+
/**
|
|
52
|
+
* The `paddingRight` property sets the width of the padding area on the
|
|
53
|
+
* right of an element.
|
|
54
|
+
*/
|
|
55
|
+
paddingRight?: ResponsiveSpacing;
|
|
56
|
+
/**
|
|
57
|
+
* The `paddingBottom` property sets the height of the padding area on the
|
|
58
|
+
* bottom of an element.
|
|
59
|
+
*/
|
|
60
|
+
paddingBottom?: ResponsiveSpacing;
|
|
61
|
+
/**
|
|
62
|
+
* The `paddingLeft` property sets the width of the padding area on the left
|
|
63
|
+
* of an element.
|
|
64
|
+
*/
|
|
65
|
+
paddingLeft?: ResponsiveSpacing;
|
|
66
|
+
/**
|
|
67
|
+
* The `paddingY` shorthand property sets the padding area on the top and
|
|
68
|
+
* bottom of the element.
|
|
69
|
+
*/
|
|
70
|
+
paddingY?: ResponsiveSpacing;
|
|
71
|
+
/**
|
|
72
|
+
* The `paddingX` shorthand property sets the padding area on the left and
|
|
73
|
+
* right of the element.
|
|
74
|
+
*/
|
|
75
|
+
paddingX?: ResponsiveSpacing;
|
|
76
|
+
/** The `border` property sets the color of an element's border. */
|
|
77
|
+
border?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
|
|
78
|
+
/**
|
|
79
|
+
* The `borderRadius` property rounds the corners of an element's outer
|
|
80
|
+
* border edge.
|
|
81
|
+
*/
|
|
82
|
+
borderRadius?: ResponsiveProp<keyof BrighteTheme['border']['radius']>;
|
|
83
|
+
/**
|
|
84
|
+
* The `borderWidth` property sets the width of an element's border.
|
|
85
|
+
*/
|
|
86
|
+
borderWidth?: ResponsiveProp<keyof BrighteTheme['border']['width']>;
|
|
87
|
+
/** Sets the element's height. */
|
|
88
|
+
height?: ResponsiveSizing;
|
|
89
|
+
/** Sets the element's width. */
|
|
90
|
+
width?: ResponsiveSizing;
|
|
91
|
+
/** Controls the alignment of items on the cross axis. */
|
|
92
|
+
alignItems?: ResponsiveProp<keyof typeof flexMap.alignItems>;
|
|
93
|
+
/** The size of the gap between each child element. */
|
|
94
|
+
gap?: ResponsiveProp<ValidGapKeys>;
|
|
95
|
+
/** Defines the main axis, or how the children are placed. */
|
|
96
|
+
flexDirection?: ResponsiveProp<keyof typeof flexMap.flexDirection>;
|
|
97
|
+
/**
|
|
98
|
+
* defines how the browser distributes space between and around content items
|
|
99
|
+
* along the main-axis.
|
|
100
|
+
*/
|
|
101
|
+
justifyContent?: ResponsiveProp<keyof typeof flexMap.justifyContent>;
|
|
102
|
+
/** Allow flex items to flow onto multiple lines. */
|
|
103
|
+
flexWrap?: ResponsiveProp<'nowrap' | 'wrap'>;
|
|
104
|
+
/**
|
|
105
|
+
* Overrides the parent's `align-items` value. Controls the alignment of
|
|
106
|
+
* item's on the cross axis.
|
|
107
|
+
*/
|
|
108
|
+
alignSelf?: ResponsiveProp<keyof typeof flexMap.alignItems>;
|
|
109
|
+
/**
|
|
110
|
+
* The `flex` shorthand property sets how a flex item will grow or shrink to
|
|
111
|
+
* fit the space available in its flex container.
|
|
112
|
+
*/
|
|
113
|
+
flex?: ResponsiveProp<0 | 1>;
|
|
114
|
+
/** The `flexGrow` property sets the flex grow factor of a flex item main size. */
|
|
115
|
+
flexGrow?: ResponsiveProp<0 | 1>;
|
|
116
|
+
/**
|
|
117
|
+
* The `flexShrink` property sets the flex shrink factor of a flex item. If
|
|
118
|
+
* the size of all flex items is larger than the flex container, items shrink
|
|
119
|
+
* to fit according to `flex-shrink`.
|
|
120
|
+
*/
|
|
121
|
+
flexShrink?: ResponsiveProp<0 | 1>;
|
|
122
|
+
/**
|
|
123
|
+
* The `position` property sets how an element is positioned in a document.
|
|
124
|
+
* The `top`, `right`, `bottom`, and `left` properties determine the final
|
|
125
|
+
* location of positioned elements.
|
|
126
|
+
*/
|
|
127
|
+
position?: ResponsiveProp<'absolute' | 'fixed' | 'relative' | 'sticky'>;
|
|
128
|
+
/**
|
|
129
|
+
* The `top` property participates in specifying the vertical position of a
|
|
130
|
+
* positioned element. It has no effect on non-positioned elements.
|
|
131
|
+
*/
|
|
132
|
+
top?: ResponsiveProp<0>;
|
|
133
|
+
/**
|
|
134
|
+
* The `right` property participates in specifying the horizontal position of
|
|
135
|
+
* a positioned element. It has no effect on non-positioned elements.
|
|
136
|
+
*/
|
|
137
|
+
right?: ResponsiveProp<0>;
|
|
138
|
+
/**
|
|
139
|
+
* The `bottom` property participates in setting the vertical position of a
|
|
140
|
+
* positioned element. It has no effect on non-positioned elements.
|
|
141
|
+
*/
|
|
142
|
+
bottom?: ResponsiveProp<0>;
|
|
143
|
+
/**
|
|
144
|
+
* The `left` property participates in specifying the horizontal position of a
|
|
145
|
+
* positioned element. It has no effect on non-positioned elements.
|
|
146
|
+
*/
|
|
147
|
+
left?: ResponsiveProp<0>;
|
|
148
|
+
/**
|
|
149
|
+
* The `zIndex` property sets the "z-order" of a positioned element and its
|
|
150
|
+
* descendants or flex items. Overlapping elements with a larger z-index cover
|
|
151
|
+
* those with a smaller one.
|
|
152
|
+
*/
|
|
153
|
+
zIndex?: ResponsiveProp<keyof BrighteTheme['elevation']>;
|
|
154
|
+
/**
|
|
155
|
+
* Sets whether an element is treated as a block or inline element and the
|
|
156
|
+
* layout used for its children.
|
|
157
|
+
*/
|
|
158
|
+
display?: ResponsiveProp<'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'none'>;
|
|
159
|
+
/**
|
|
160
|
+
* Sets the opacity of the element. Opacity is the degree to which content
|
|
161
|
+
* behind an element is hidden, and is the opposite of transparency.
|
|
162
|
+
*/
|
|
163
|
+
opacity?: ResponsiveProp<number>;
|
|
164
|
+
};
|
|
165
|
+
declare type UnresponsiveBoxProps = {
|
|
166
|
+
/** The `background` property sets the background color of an element. */
|
|
167
|
+
background?: keyof BrighteTheme['color']['background'];
|
|
168
|
+
/**
|
|
169
|
+
* The `cursor` property sets the type of mouse cursor, if any, to show when
|
|
170
|
+
* the mouse pointer is over an element.
|
|
171
|
+
*/
|
|
172
|
+
cursor?: 'default' | 'pointer';
|
|
173
|
+
/**
|
|
174
|
+
* The `minHeight` property sets the minimum height of an element. It prevents
|
|
175
|
+
* the used value of the height property from becoming smaller than the value
|
|
176
|
+
* specified for `minHeight`.
|
|
177
|
+
*/
|
|
178
|
+
minHeight?: 0;
|
|
179
|
+
/**
|
|
180
|
+
* The `minWidth` property sets the minimum width of an element. It prevents
|
|
181
|
+
* the used value of the width property from becoming smaller than the value
|
|
182
|
+
* specified for `minWidth`.
|
|
183
|
+
*/
|
|
184
|
+
minWidth?: 0;
|
|
185
|
+
/**
|
|
186
|
+
* The `overflow` shorthand property sets the desired behavior for an
|
|
187
|
+
* element's overflow — i.e. when an element's content is too big to fit in
|
|
188
|
+
* its block formatting context — in both directions.
|
|
189
|
+
*/
|
|
190
|
+
overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
|
|
191
|
+
/** The `boxShadow` property adds shadow effects around an element's frame. */
|
|
192
|
+
shadow?: keyof BrighteTheme['shadow'];
|
|
193
|
+
/** The `userSelect` property controls whether the user can select text. */
|
|
194
|
+
userSelect?: 'none';
|
|
195
|
+
};
|
|
196
|
+
export declare type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
|
|
197
|
+
export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, 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[];
|
|
198
|
+
declare const flexMap: {
|
|
199
|
+
readonly alignItems: {
|
|
200
|
+
readonly start: "flex-start";
|
|
201
|
+
readonly center: "center";
|
|
202
|
+
readonly end: "flex-end";
|
|
203
|
+
readonly stretch: "stretch";
|
|
204
|
+
};
|
|
205
|
+
readonly justifyContent: {
|
|
206
|
+
readonly start: "flex-start";
|
|
207
|
+
readonly center: "center";
|
|
208
|
+
readonly end: "flex-end";
|
|
209
|
+
readonly spaceBetween: "space-between";
|
|
210
|
+
readonly stretch: "stretch";
|
|
211
|
+
};
|
|
212
|
+
readonly flexDirection: {
|
|
213
|
+
readonly row: "row";
|
|
214
|
+
readonly rowReverse: "row-reverse";
|
|
215
|
+
readonly column: "column";
|
|
216
|
+
readonly columnReverse: "column-reverse";
|
|
217
|
+
};
|
|
218
|
+
};
|
|
219
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./declarations/src/index";
|