@spark-web/box 1.0.8 → 1.1.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.
Files changed (12) hide show
  1. package/CHANGELOG.md +187 -0
  2. package/README.md +119 -85
  3. package/dist/declarations/src/{BackgroundProvider.d.ts → background-provider.d.ts} +0 -0
  4. package/dist/declarations/src/{Box.d.ts → box.d.ts} +8 -2
  5. package/dist/declarations/src/context.d.ts +1 -1
  6. package/dist/declarations/src/index.d.ts +4 -4
  7. package/dist/declarations/src/{useBoxProps.d.ts → use-box-props.d.ts} +1 -1
  8. package/dist/declarations/src/{useBoxStyles.d.ts → use-box-styles.d.ts} +9 -1
  9. package/dist/spark-web-box.cjs.dev.js +36 -9
  10. package/dist/spark-web-box.cjs.prod.js +36 -9
  11. package/dist/spark-web-box.esm.js +36 -9
  12. package/package.json +14 -7
package/CHANGELOG.md ADDED
@@ -0,0 +1,187 @@
1
+ # @spark-web/box
2
+
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#234](https://github.com/brighte-labs/spark-web/pull/234)
8
+ [`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b)
9
+ Thanks [@justinnhan](https://github.com/justinnhan)! - Implemented single
10
+ direction border prop for box component
11
+
12
+ ### Patch Changes
13
+
14
+ - [#246](https://github.com/brighte-labs/spark-web/pull/246)
15
+ [`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c)
16
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove
17
+ destructuring from theme object
18
+
19
+ - [#218](https://github.com/brighte-labs/spark-web/pull/218)
20
+ [`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
21
+ Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
22
+
23
+ - [#222](https://github.com/brighte-labs/spark-web/pull/222)
24
+ [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
25
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
26
+ dependencies
27
+
28
+ - [#242](https://github.com/brighte-labs/spark-web/pull/242)
29
+ [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
30
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
31
+ and repository keys to package.json
32
+ - Add CHANGELOG and README to files key in package.json
33
+ - Updated dependencies
34
+ [[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
35
+ [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
36
+ [`62f7de8`](https://github.com/brighte-labs/spark-web/commit/62f7de8a2e1df5ae088c093d3acdaa868d3f61fe),
37
+ [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
38
+ - @spark-web/theme@3.1.0
39
+ - @spark-web/utils@1.2.3
40
+
41
+ ## 1.0.9
42
+
43
+ ### Patch Changes
44
+
45
+ - [#208](https://github.com/brighte-labs/spark-web/pull/208)
46
+ [`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
47
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
48
+ node version
49
+
50
+ - Updated dependencies
51
+ [[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
52
+ - @spark-web/theme@3.0.6
53
+ - @spark-web/utils@1.2.2
54
+
55
+ ## 1.0.8
56
+
57
+ ### Patch Changes
58
+
59
+ - [#197](https://github.com/brighte-labs/spark-web/pull/197)
60
+ [`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
61
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
62
+
63
+ - Updated dependencies
64
+ [[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
65
+ - @spark-web/theme@3.0.5
66
+ - @spark-web/utils@1.2.1
67
+
68
+ ## 1.0.7
69
+
70
+ ### Patch Changes
71
+
72
+ - [#173](https://github.com/brighte-labs/spark-web/pull/173)
73
+ [`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
74
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
75
+ dependency
76
+
77
+ - Updated dependencies
78
+ [[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
79
+ [`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
80
+ - @spark-web/theme@3.0.3
81
+ - @spark-web/utils@1.2.0
82
+
83
+ ## 1.0.6
84
+
85
+ ### Patch Changes
86
+
87
+ - [#167](https://github.com/brighte-labs/spark-web/pull/167)
88
+ [`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
89
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
90
+
91
+ - Updated dependencies
92
+ [[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
93
+ [`60f7281`](https://github.com/brighte-labs/spark-web/commit/60f7281c4a194d934a2ce561cad47e737b0fb48e)]:
94
+ - @spark-web/theme@3.0.2
95
+ - @spark-web/utils@1.1.5
96
+
97
+ ## 1.0.5
98
+
99
+ ### Patch Changes
100
+
101
+ - [#113](https://github.com/brighte-labs/spark-web/pull/113)
102
+ [`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
103
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
104
+ dependencies
105
+
106
+ - Updated dependencies
107
+ [[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
108
+ - @spark-web/theme@3.0.1
109
+ - @spark-web/utils@1.1.3
110
+
111
+ ## 1.0.4
112
+
113
+ ### Patch Changes
114
+
115
+ - [#52](https://github.com/brighte-labs/spark-web/pull/52)
116
+ [`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
117
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
118
+ to package.json files
119
+
120
+ * [#84](https://github.com/brighte-labs/spark-web/pull/84)
121
+ [`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)
122
+ Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
123
+ Data attribute added to component props to allow consumers to attach custom
124
+ attributes to components
125
+ * Updated dependencies
126
+ [[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff),
127
+ [`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)]:
128
+ - @spark-web/theme@3.0.0
129
+ - @spark-web/utils@1.1.2
130
+
131
+ ## 1.0.3
132
+
133
+ ### Patch Changes
134
+
135
+ - [#42](https://github.com/brighte-labs/spark-web/pull/42)
136
+ [`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
137
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
138
+ versions of React
139
+
140
+ - Updated dependencies
141
+ [[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
142
+ - @spark-web/theme@2.0.2
143
+ - @spark-web/utils@1.1.1
144
+
145
+ ## 1.0.2
146
+
147
+ ### Patch Changes
148
+
149
+ - [#40](https://github.com/brighte-labs/spark-web/pull/40)
150
+ [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
151
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
152
+ @babel/transform-runtime
153
+
154
+ - Updated dependencies
155
+ [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
156
+ - @spark-web/theme@2.0.1
157
+ - @spark-web/utils@1.0.2
158
+
159
+ ## 1.0.1
160
+
161
+ ### Patch Changes
162
+
163
+ - [#36](https://github.com/brighte-labs/spark-web/pull/36)
164
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
165
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
166
+ config
167
+
168
+ - Updated dependencies
169
+ [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
170
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
171
+ - @spark-web/theme@2.0.0
172
+ - @spark-web/utils@1.0.1
173
+
174
+ ## 1.0.0
175
+
176
+ ### Major Changes
177
+
178
+ - [#27](https://github.com/brighte-labs/spark-web/pull/27)
179
+ [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
180
+ Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
181
+
182
+ ### Patch Changes
183
+
184
+ - Updated dependencies
185
+ [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
186
+ - @spark-web/theme@1.0.0
187
+ - @spark-web/utils@1.0.0
package/README.md CHANGED
@@ -4,106 +4,140 @@ storybookPath: page-layout-box--default
4
4
  isExperimentalPackage: false
5
5
  ---
6
6
 
7
- Box is the lowest-level component for binding theme-based styles to an
8
- individual element on the screen. Internally, all Spark components are made up
9
- of Boxes.
7
+ The Box component is our lowest-level primitive. The goal of the Box component
8
+ is to map props to our tokens so that consumers should be able to use these
9
+ props for all of their styling needs. Ideally, you shouldn't need to use the
10
+ `className` or `style` prop at all. Internally, all Spark Web components are
11
+ composed using the Box component.
10
12
 
11
- All elements rendered via Box are provided with a CSS reset to ensure that
12
- elements only have styling rules that have been explicitly specified.
13
+ Box is a polymorphic component (meaning it will render different elements
14
+ depending on what is provided to the `as` prop). If no `as` prop is provided,
15
+ Box will render a `div`.
16
+
17
+ We also spread in consumer props, so any valid HTML attributes are also valid
18
+ for Box. Due to some clever TypeScript we can even warn you when you use an
19
+ invalid combination of props.
20
+
21
+ ```jsx
22
+ <Box as="input" href="https://spark.brighte.com.au" />
23
+ ```
24
+
25
+ In the example above, you should see a "red squiggly" under the `href` element
26
+ with the following error:
27
+
28
+ ```console
29
+ Type '{ as: "input"; href: string; }' is not assignable to type 'IntrinsicAttributes & { as?: "input" | undefined; ref?: Ref<HTMLInputElement> | undefined; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>, "as"> & { ...; } & UnresponsiveBoxProps & ResponsiveBoxProps'.
30
+ Property 'href' does not exist on type 'IntrinsicAttributes & { as?: "input" | undefined; ref?: Ref<HTMLInputElement> | undefined; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>, "as"> & { ...; } & UnresponsiveBoxProps & ResponsiveBoxProps'. Did you mean 'ref'?
31
+ ```
32
+
33
+ Unfortunately TypeScript errors can be pretty cryptic sometimes 🙃.
34
+
35
+ **Pro tip**: copying the error message and pasting it into
36
+ [TypeScript Error Translator](https://ts-error-translator.vercel.app/) can
37
+ sometimes help make these errors easier to understand.
38
+
39
+ A minimal CSS reset is also applied to each element rendered with Box. This
40
+ helps prevent styles from "leaking" out and effecting other elements (which
41
+ should make it easier to incrementally adopt Spark Web into existing projects).
42
+ If you provide a non-Spark component to the `as` prop instead of an element, it
43
+ is recommended that you also use the `asElement` prop so the appropriate styles
44
+ can be applied.
13
45
 
14
46
  ## Examples
15
47
 
16
- ### Box with border
48
+ ### Responsive styles
49
+
50
+ Most of Box's props accept a string value (usually corresponding to a token), we
51
+ also accept an object for responsive styles.
17
52
 
18
53
  ```jsx live
19
- <Box border="standard" borderRadius="full" padding="large">
20
- <Text>Lorem ipsum dolor sit amet.</Text>
21
- </Box>
54
+ const items = [1, 2, 3];
55
+
56
+ return (
57
+ <Box
58
+ background="primaryLow"
59
+ display="inline-flex"
60
+ flexDirection={{ mobile: 'row', tablet: 'column', desktop: 'rowReverse' }}
61
+ gap={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
62
+ padding={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
63
+ >
64
+ {items.map(item => (
65
+ <Row
66
+ key={item}
67
+ align="center"
68
+ alignY="center"
69
+ background="primary"
70
+ height={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
71
+ width={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
72
+ >
73
+ <Text>{item}</Text>
74
+ </Row>
75
+ ))}
76
+ </Box>
77
+ );
22
78
  ```
23
79
 
24
- ### Flexbox layouts
80
+ Resize your browser to see the example above change at different breakpoints.
81
+
82
+ ### Backgrounds
83
+
84
+ Box stores the background in a provider. We can use this to work out what colour
85
+ to use by default for text elements.
25
86
 
26
87
  ```jsx live
27
- <Box display="flex">
28
- <Box padding="large" margin="large" background="primary">
29
- <Text>hi</Text>
30
- </Box>
31
- <Box padding="large" margin="large" background="primary">
32
- <Text>there</Text>
33
- </Box>
34
- <Box padding="large" margin="large" background="primary">
35
- <Text>friend</Text>
36
- </Box>
88
+ const backgroundTones = [
89
+ // Light
90
+ ['surface', 'positiveLight', 'infoLight', 'cautionLight', 'criticalLight'],
91
+ // Dark
92
+ ['muted', 'positive', 'info', 'caution', 'critical'],
93
+ ];
94
+
95
+ return (
96
+ <Stack gap="large">
97
+ {backgroundTones.map((backgrounds, index) => (
98
+ <Columns
99
+ key={index}
100
+ collapseBelow="tablet"
101
+ gap="large"
102
+ template={[1, 1, 1]}
103
+ >
104
+ {backgrounds.map(background => (
105
+ <Box
106
+ key={background}
107
+ shadow="medium"
108
+ background={background}
109
+ height="large"
110
+ display="flex"
111
+ flexShrink={0}
112
+ alignItems="center"
113
+ justifyContent="center"
114
+ >
115
+ <Text weight="semibold">{background}</Text>
116
+ </Box>
117
+ ))}
118
+ </Columns>
119
+ ))}
120
+ </Stack>
121
+ );
122
+ ```
123
+
124
+ Notice that the Text in the example above doesn't use the tone prop, the colour
125
+ is worked out using the BackgroundProvider in Box.
126
+
127
+ **Note:** this will only work if you use the `background` prop. If you try to
128
+ style the background colour in any other way the Text component will not know
129
+ what colour the background is and so cannot invert its colour to make sure that
130
+ its contents are readable.
131
+
132
+ ```jsx
133
+ <Box style={{ background: 'midnightblue' }} padding="large">
134
+ <Text>Good luck reading this!</Text>
37
135
  </Box>
38
136
  ```
39
137
 
40
138
  ## Props
41
139
 
42
- | Prop | Type | Default | Description |
43
- | --------------- | -------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
44
- | children | React.ReactNode | | Children element to be rendered inside the component. |
45
- | id? | string | | An identifier that must be unique in the whole document. |
46
- | className? | string | | Custom css styles. |
47
- | asElement? | string | | An option to indicate what the underlying element of the box should be. |
48
- | data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
49
- | | | | |
50
- | background? | keyof [BrighteTheme][brighte-theme]['color']['background'] | | Sets the backgroud of the component. |
51
- | cursor? | 'default' \| 'pointer' | | Sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. |
52
- | 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. |
53
- | 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. |
54
- | 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. |
55
- | shadow? | keyof [BrighteTheme][brighte-theme]['shadow'] | | Adds shadow effects around the element's frame. |
56
- | userSelect? | 'none' | | Controls whether the user can select text. |
57
- | | | | |
58
- | margin? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on all 4 sides of the element at once. |
59
- | marginTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top side. |
60
- | marginBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the bottom side. |
61
- | marginLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the left side. |
62
- | marginRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the right side. |
63
- | marginY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top and bottom side. |
64
- | | | | |
65
- | padding? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on all 4 sides of the element at once. |
66
- | paddingTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top side. |
67
- | paddingBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the bottom side. |
68
- | paddingLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left side. |
69
- | paddingRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the right side. |
70
- | paddingY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top and bottom side. |
71
- | paddingX? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left and right side. |
72
- | | | | |
73
- | border? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the colour of the element's border. |
74
- | borderRadius? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Rounds the corners of the element's outer border edge. |
75
- | borderWidth? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the width of the element's border. |
76
- | | | | |
77
- | height? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's height. |
78
- | width? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's width. |
79
- | | | | |
80
- | alignItems? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Controls alignment of items on the cross axis. |
81
- | gap? | 'small' \| 'medium' \| 'xsmall' \| 'large' \| 'xxsmall' \| 'xlarge' \| 'xxlarge' | | Size of the gap between each child element. |
82
- | flexDirection? | 'row' \| 'row-reverse' \| 'column' \| 'column-reverse' | | Defines the main axis, or how the children are placed. |
83
- | justifyContent? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'space-between' | | Sets how to distribute space between and around content items along the main axis. |
84
- | flexWrap? | [ResponsiveProp][responsive-prop]\<'nowrap' \| 'wrap'> | | Allow flex items to flow onto multiple lines. |
85
- | | | | |
86
- | alignSelf? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Override's parent's `align-items` value and controls alignment of item's on the cross axis. |
87
- | flex? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets how a flex item will grow or shrink to fit the space available in its flex container. |
88
- | flexGrow? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets the flex grow factor of a flex item main size. |
89
- | 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. |
90
- | | | |
91
- | 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. |
92
- | top? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
93
- | bottom? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
94
- | left? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
95
- | right? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
96
- | 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. |
97
- | | | |
98
- | display? | [ResponsiveProp][responsive-prop]\<'block' \| 'flex' \| 'inline' \| 'inline-block' \| 'inline-flex' \| 'none'> | | Sets the display of element. |
99
- | opacity? | [ResponsiveProp][responsive-prop]\<number> | | Sets the opacity of the element. |
140
+ <PropsTable displayName="Box" />
100
141
 
101
142
  By default, Box renders a `div` element. You can customise this via the `as`
102
143
  prop. Extra props will also be forwarded to the underlying element.
103
-
104
- [brighte-theme]:
105
- https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
106
- [responsive-prop]:
107
- https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L11
108
- [data-attribute-map]:
109
- https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
package/dist/declarations/src/{Box.d.ts → box.d.ts} RENAMED
@@ -1,11 +1,14 @@
1
1
  import type { DataAttributeMap } from '@spark-web/utils/internal';
2
2
  import type { ReactNode } from 'react';
3
- import type { BoxStyleProps } from './useBoxStyles';
3
+ import type { BoxStyleProps } from './use-box-styles';
4
4
  export declare type BoxProps = {
5
+ /** Children element to be rendered inside the component. */
5
6
  children?: ReactNode;
7
+ /** Sets data attributes on the component. */
6
8
  data?: DataAttributeMap;
7
9
  /** An identifier which must be unique in the whole document. */
8
10
  id?: string;
11
+ /** Custom css styles. */
9
12
  className?: string;
10
13
  /**
11
14
  * When providing a component using the "as" prop, optionally tell the system
@@ -19,10 +22,13 @@ export declare const Box: <Comp extends import("react").ElementType<any> = "div"
19
22
  as?: Comp | undefined;
20
23
  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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | 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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
21
24
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
25
+ /** Children element to be rendered inside the component. */
22
26
  children?: ReactNode;
27
+ /** Sets data attributes on the component. */
23
28
  data?: DataAttributeMap | undefined;
24
29
  /** An identifier which must be unique in the whole document. */
25
30
  id?: string | undefined;
31
+ /** Custom css styles. */
26
32
  className?: string | undefined;
27
33
  /**
28
34
  * When providing a component using the "as" prop, optionally tell the system
@@ -38,4 +44,4 @@ export declare const Box: <Comp extends import("react").ElementType<any> = "div"
38
44
  overflow?: "scroll" | "hidden" | "auto" | "visible" | undefined;
39
45
  shadow?: "small" | "large" | "medium" | undefined;
40
46
  userSelect?: "none" | undefined;
41
- } & import("./useBoxStyles").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
47
+ } & import("./use-box-styles").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/declarations/src/context.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { ReactElement } from 'react';
2
- import type { BoxStyleProps } from './useBoxStyles';
2
+ import type { BoxStyleProps } from './use-box-styles';
3
3
  export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
4
4
  export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
5
5
  export declare const useBackground: () => BackgroundVariant;
package/dist/declarations/src/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export { BackgroundProvider } from './BackgroundProvider';
2
- export { Box } from './Box';
1
+ export { BackgroundProvider } from './background-provider';
2
+ export { Box } from './box';
3
3
  export { useBackground, useBackgroundLightness } from './context';
4
- export type { BackgroundProviderProps } from './BackgroundProvider';
5
- export type { BoxProps } from './Box';
4
+ export type { BackgroundProviderProps } from './background-provider';
5
+ export type { BoxProps } from './box';
package/dist/declarations/src/{useBoxProps.d.ts → use-box-props.d.ts} RENAMED
@@ -1,4 +1,4 @@
1
- import type { BoxStyleProps } from './useBoxStyles';
1
+ import type { BoxStyleProps } from './use-box-styles';
2
2
  /** Separate the style properties from the element attributes. */
3
3
  export declare function useBoxProps(props: BoxStyleProps): {
4
4
  styles: import("facepaint").DynamicStyle[];
package/dist/declarations/src/{useBoxStyles.d.ts → use-box-styles.d.ts} RENAMED
@@ -75,6 +75,14 @@ export declare type ResponsiveBoxProps = {
75
75
  paddingX?: ResponsiveSpacing;
76
76
  /** The `border` property sets the color of an element's border. */
77
77
  border?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
78
+ /** The `border` property sets the color of an element's border on the top side. */
79
+ borderTop?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
80
+ /** The `border` property sets the color of an element's border on the bottom side. */
81
+ borderBottom?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
82
+ /** The `border` property sets the color of an element's border on the left side. */
83
+ borderLeft?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
84
+ /** The `border` property sets the color of an element's border on the right side. */
85
+ borderRight?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
78
86
  /**
79
87
  * The `borderRadius` property rounds the corners of an element's outer
80
88
  * border edge.
@@ -194,7 +202,7 @@ declare type UnresponsiveBoxProps = {
194
202
  userSelect?: 'none';
195
203
  };
196
204
  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[];
205
+ 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[];
198
206
  declare const flexMap: {
199
207
  readonly alignItems: {
200
208
  readonly start: "flex-start";
package/dist/spark-web-box.cjs.dev.js CHANGED
@@ -28,11 +28,8 @@ function renderBackgroundProvider(background, element) {
28
28
  var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
29
29
  var backgroundFromContext = useBackground();
30
30
  var background = backgroundOverride || backgroundFromContext;
31
-
32
- var _useTheme = theme.useTheme(),
33
- backgroundLightness = _useTheme.backgroundLightness;
34
-
35
- var defaultLightness = backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
31
+ var theme$1 = theme.useTheme();
32
+ var defaultLightness = theme$1.backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
36
33
 
37
34
  if (background === 'UNKNOWN_DARK') {
38
35
  return 'dark';
@@ -42,7 +39,7 @@ var useBackgroundLightness = function useBackgroundLightness(backgroundOverride)
42
39
  return 'light';
43
40
  }
44
41
 
45
- return background ? backgroundLightness[background] || defaultLightness : defaultLightness;
42
+ return background ? theme$1.backgroundLightness[background] || defaultLightness : defaultLightness;
46
43
  };
47
44
 
48
45
  /** Enforce background "lightness" without applying a background color. */
@@ -62,6 +59,10 @@ var useBoxStyles = function useBoxStyles(_ref) {
62
59
  alignSelf = _ref.alignSelf,
63
60
  background = _ref.background,
64
61
  border = _ref.border,
62
+ borderTop = _ref.borderTop,
63
+ borderBottom = _ref.borderBottom,
64
+ borderLeft = _ref.borderLeft,
65
+ borderRight = _ref.borderRight,
65
66
  borderRadius = _ref.borderRadius,
66
67
  _ref$borderWidth = _ref.borderWidth,
67
68
  borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
@@ -113,11 +114,29 @@ var useBoxStyles = function useBoxStyles(_ref) {
113
114
  overflow: overflow,
114
115
  userSelect: userSelect
115
116
  };
116
- var conditionalBorderStyles = border ? {
117
+
118
+ var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
117
119
  borderStyle: 'solid',
118
120
  borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
119
121
  borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
120
- } : null;
122
+ } : {}), borderTop ? {
123
+ borderTopStyle: 'solid',
124
+ borderTopColor: theme$1.utils.mapResponsiveScale(borderTop, theme$1.border.color),
125
+ borderTopWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
126
+ } : {}), borderBottom ? {
127
+ borderBottomStyle: 'solid',
128
+ borderBottomColor: theme$1.utils.mapResponsiveScale(borderBottom, theme$1.border.color),
129
+ borderBottomWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
130
+ } : {}), borderLeft ? {
131
+ borderLeftStyle: 'solid',
132
+ borderLeftColor: theme$1.utils.mapResponsiveScale(borderLeft, theme$1.border.color),
133
+ borderLeftWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
134
+ } : {}), borderRight ? {
135
+ borderRightStyle: 'solid',
136
+ borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
137
+ borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
138
+ } : {});
139
+
121
140
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
122
141
  // allow padding and height/width props to play nice
123
142
  display: theme$1.utils.mapResponsiveProp(display),
@@ -180,7 +199,7 @@ var flexMap = {
180
199
  }
181
200
  };
182
201
 
183
- var _excluded$1 = ["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"];
202
+ var _excluded$1 = ["alignItems", "alignSelf", "background", "border", "borderRadius", "borderWidth", "borderTop", "borderBottom", "borderLeft", "borderRight", "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"];
184
203
  /** Separate the style properties from the element attributes. */
185
204
 
186
205
  function useBoxProps(props) {
@@ -190,6 +209,10 @@ function useBoxProps(props) {
190
209
  border = props.border,
191
210
  borderRadius = props.borderRadius,
192
211
  borderWidth = props.borderWidth,
212
+ borderTop = props.borderTop,
213
+ borderBottom = props.borderBottom,
214
+ borderLeft = props.borderLeft,
215
+ borderRight = props.borderRight,
193
216
  bottom = props.bottom,
194
217
  cursor = props.cursor,
195
218
  display = props.display,
@@ -236,6 +259,10 @@ function useBoxProps(props) {
236
259
  border: border,
237
260
  borderRadius: borderRadius,
238
261
  borderWidth: borderWidth,
262
+ borderBottom: borderBottom,
263
+ borderLeft: borderLeft,
264
+ borderRight: borderRight,
265
+ borderTop: borderTop,
239
266
  bottom: bottom,
240
267
  cursor: cursor,
241
268
  display: display,
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -28,11 +28,8 @@ function renderBackgroundProvider(background, element) {
28
28
  var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
29
29
  var backgroundFromContext = useBackground();
30
30
  var background = backgroundOverride || backgroundFromContext;
31
-
32
- var _useTheme = theme.useTheme(),
33
- backgroundLightness = _useTheme.backgroundLightness;
34
-
35
- var defaultLightness = backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
31
+ var theme$1 = theme.useTheme();
32
+ var defaultLightness = theme$1.backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
36
33
 
37
34
  if (background === 'UNKNOWN_DARK') {
38
35
  return 'dark';
@@ -42,7 +39,7 @@ var useBackgroundLightness = function useBackgroundLightness(backgroundOverride)
42
39
  return 'light';
43
40
  }
44
41
 
45
- return background ? backgroundLightness[background] || defaultLightness : defaultLightness;
42
+ return background ? theme$1.backgroundLightness[background] || defaultLightness : defaultLightness;
46
43
  };
47
44
 
48
45
  /** Enforce background "lightness" without applying a background color. */
@@ -62,6 +59,10 @@ var useBoxStyles = function useBoxStyles(_ref) {
62
59
  alignSelf = _ref.alignSelf,
63
60
  background = _ref.background,
64
61
  border = _ref.border,
62
+ borderTop = _ref.borderTop,
63
+ borderBottom = _ref.borderBottom,
64
+ borderLeft = _ref.borderLeft,
65
+ borderRight = _ref.borderRight,
65
66
  borderRadius = _ref.borderRadius,
66
67
  _ref$borderWidth = _ref.borderWidth,
67
68
  borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
@@ -113,11 +114,29 @@ var useBoxStyles = function useBoxStyles(_ref) {
113
114
  overflow: overflow,
114
115
  userSelect: userSelect
115
116
  };
116
- var conditionalBorderStyles = border ? {
117
+
118
+ var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
117
119
  borderStyle: 'solid',
118
120
  borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
119
121
  borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
120
- } : null;
122
+ } : {}), borderTop ? {
123
+ borderTopStyle: 'solid',
124
+ borderTopColor: theme$1.utils.mapResponsiveScale(borderTop, theme$1.border.color),
125
+ borderTopWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
126
+ } : {}), borderBottom ? {
127
+ borderBottomStyle: 'solid',
128
+ borderBottomColor: theme$1.utils.mapResponsiveScale(borderBottom, theme$1.border.color),
129
+ borderBottomWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
130
+ } : {}), borderLeft ? {
131
+ borderLeftStyle: 'solid',
132
+ borderLeftColor: theme$1.utils.mapResponsiveScale(borderLeft, theme$1.border.color),
133
+ borderLeftWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
134
+ } : {}), borderRight ? {
135
+ borderRightStyle: 'solid',
136
+ borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
137
+ borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
138
+ } : {});
139
+
121
140
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
122
141
  // allow padding and height/width props to play nice
123
142
  display: theme$1.utils.mapResponsiveProp(display),
@@ -180,7 +199,7 @@ var flexMap = {
180
199
  }
181
200
  };
182
201
 
183
- var _excluded$1 = ["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"];
202
+ var _excluded$1 = ["alignItems", "alignSelf", "background", "border", "borderRadius", "borderWidth", "borderTop", "borderBottom", "borderLeft", "borderRight", "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"];
184
203
  /** Separate the style properties from the element attributes. */
185
204
 
186
205
  function useBoxProps(props) {
@@ -190,6 +209,10 @@ function useBoxProps(props) {
190
209
  border = props.border,
191
210
  borderRadius = props.borderRadius,
192
211
  borderWidth = props.borderWidth,
212
+ borderTop = props.borderTop,
213
+ borderBottom = props.borderBottom,
214
+ borderLeft = props.borderLeft,
215
+ borderRight = props.borderRight,
193
216
  bottom = props.bottom,
194
217
  cursor = props.cursor,
195
218
  display = props.display,
@@ -236,6 +259,10 @@ function useBoxProps(props) {
236
259
  border: border,
237
260
  borderRadius: borderRadius,
238
261
  borderWidth: borderWidth,
262
+ borderBottom: borderBottom,
263
+ borderLeft: borderLeft,
264
+ borderRight: borderRight,
265
+ borderTop: borderTop,
239
266
  bottom: bottom,
240
267
  cursor: cursor,
241
268
  display: display,
package/dist/spark-web-box.esm.js CHANGED
@@ -24,11 +24,8 @@ function renderBackgroundProvider(background, element) {
24
24
  var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
25
25
  var backgroundFromContext = useBackground();
26
26
  var background = backgroundOverride || backgroundFromContext;
27
-
28
- var _useTheme = useTheme(),
29
- backgroundLightness = _useTheme.backgroundLightness;
30
-
31
- var defaultLightness = backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
27
+ var theme = useTheme();
28
+ var defaultLightness = theme.backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
32
29
 
33
30
  if (background === 'UNKNOWN_DARK') {
34
31
  return 'dark';
@@ -38,7 +35,7 @@ var useBackgroundLightness = function useBackgroundLightness(backgroundOverride)
38
35
  return 'light';
39
36
  }
40
37
 
41
- return background ? backgroundLightness[background] || defaultLightness : defaultLightness;
38
+ return background ? theme.backgroundLightness[background] || defaultLightness : defaultLightness;
42
39
  };
43
40
 
44
41
  /** Enforce background "lightness" without applying a background color. */
@@ -58,6 +55,10 @@ var useBoxStyles = function useBoxStyles(_ref) {
58
55
  alignSelf = _ref.alignSelf,
59
56
  background = _ref.background,
60
57
  border = _ref.border,
58
+ borderTop = _ref.borderTop,
59
+ borderBottom = _ref.borderBottom,
60
+ borderLeft = _ref.borderLeft,
61
+ borderRight = _ref.borderRight,
61
62
  borderRadius = _ref.borderRadius,
62
63
  _ref$borderWidth = _ref.borderWidth,
63
64
  borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
@@ -109,11 +110,29 @@ var useBoxStyles = function useBoxStyles(_ref) {
109
110
  overflow: overflow,
110
111
  userSelect: userSelect
111
112
  };
112
- var conditionalBorderStyles = border ? {
113
+
114
+ var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
113
115
  borderStyle: 'solid',
114
116
  borderColor: theme.utils.mapResponsiveScale(border, theme.border.color),
115
117
  borderWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
116
- } : null;
118
+ } : {}), borderTop ? {
119
+ borderTopStyle: 'solid',
120
+ borderTopColor: theme.utils.mapResponsiveScale(borderTop, theme.border.color),
121
+ borderTopWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
122
+ } : {}), borderBottom ? {
123
+ borderBottomStyle: 'solid',
124
+ borderBottomColor: theme.utils.mapResponsiveScale(borderBottom, theme.border.color),
125
+ borderBottomWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
126
+ } : {}), borderLeft ? {
127
+ borderLeftStyle: 'solid',
128
+ borderLeftColor: theme.utils.mapResponsiveScale(borderLeft, theme.border.color),
129
+ borderLeftWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
130
+ } : {}), borderRight ? {
131
+ borderRightStyle: 'solid',
132
+ borderRightColor: theme.utils.mapResponsiveScale(borderRight, theme.border.color),
133
+ borderRightWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
134
+ } : {});
135
+
117
136
  return theme.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
118
137
  // allow padding and height/width props to play nice
119
138
  display: theme.utils.mapResponsiveProp(display),
@@ -176,7 +195,7 @@ var flexMap = {
176
195
  }
177
196
  };
178
197
 
179
- var _excluded$1 = ["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"];
198
+ var _excluded$1 = ["alignItems", "alignSelf", "background", "border", "borderRadius", "borderWidth", "borderTop", "borderBottom", "borderLeft", "borderRight", "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"];
180
199
  /** Separate the style properties from the element attributes. */
181
200
 
182
201
  function useBoxProps(props) {
@@ -186,6 +205,10 @@ function useBoxProps(props) {
186
205
  border = props.border,
187
206
  borderRadius = props.borderRadius,
188
207
  borderWidth = props.borderWidth,
208
+ borderTop = props.borderTop,
209
+ borderBottom = props.borderBottom,
210
+ borderLeft = props.borderLeft,
211
+ borderRight = props.borderRight,
189
212
  bottom = props.bottom,
190
213
  cursor = props.cursor,
191
214
  display = props.display,
@@ -232,6 +255,10 @@ function useBoxProps(props) {
232
255
  border: border,
233
256
  borderRadius: borderRadius,
234
257
  borderWidth: borderWidth,
258
+ borderBottom: borderBottom,
259
+ borderLeft: borderLeft,
260
+ borderRight: borderRight,
261
+ borderTop: borderTop,
235
262
  bottom: bottom,
236
263
  cursor: cursor,
237
264
  display: display,
package/package.json CHANGED
@@ -1,17 +1,24 @@
1
1
  {
2
2
  "name": "@spark-web/box",
3
- "version": "1.0.8",
4
- "license": "MIT",
3
+ "version": "1.1.0",
4
+ "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/brighte-labs/spark-web.git",
8
+ "directory": "packages/box"
9
+ },
5
10
  "main": "dist/spark-web-box.cjs.js",
6
11
  "module": "dist/spark-web-box.esm.js",
7
12
  "files": [
8
- "dist"
13
+ "CHANGELOG.md",
14
+ "dist",
15
+ "README.md"
9
16
  ],
10
17
  "dependencies": {
11
- "@babel/runtime": "^7.18.9",
18
+ "@babel/runtime": "^7.19.0",
12
19
  "@emotion/css": "^11.9.0",
13
- "@spark-web/theme": "^3.0.5",
14
- "@spark-web/utils": "^1.2.1"
20
+ "@spark-web/theme": "^3.1.0",
21
+ "@spark-web/utils": "^1.2.3"
15
22
  },
16
23
  "devDependencies": {
17
24
  "@types/react": "^17.0.12",
@@ -21,6 +28,6 @@
21
28
  "react": ">=17.0.2"
22
29
  },
23
30
  "engines": {
24
- "node": ">= 14.13"
31
+ "node": ">=14"
25
32
  }
26
33
  }