@react-types/shared 3.33.1 → 3.35.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/package.json +9 -6
  2. package/src/collections.d.ts +87 -73
  3. package/src/dna.d.ts +9 -40
  4. package/src/dnd.d.ts +105 -84
  5. package/src/dom.d.ts +279 -170
  6. package/src/events.d.ts +54 -58
  7. package/src/inputs.d.ts +32 -27
  8. package/src/labelable.d.ts +9 -6
  9. package/src/refs.d.ts +10 -5
  10. package/src/removable.d.ts +2 -2
  11. package/src/selection.d.ts +11 -11
  12. package/src/style.d.ts +504 -180
package/src/style.d.ts CHANGED
@@ -10,245 +10,569 @@
10
10
  * governing permissions and limitations under the License.
11
11
  */
12
12
 
13
- import {BackgroundColorValue, BackgroundColorValueV6, BorderColorValue, BorderColorValueV6, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
13
+ import {
14
+ BackgroundColorValue,
15
+ BackgroundColorValueV6,
16
+ BorderColorValue,
17
+ BorderColorValueV6,
18
+ BorderRadiusValue,
19
+ BorderSizeValue,
20
+ DimensionValue
21
+ } from './dna';
14
22
  import {CSSProperties} from 'react';
15
23
 
16
24
  type ResponsiveProp<T> = {
17
- base?: T,
18
- S?: T,
19
- M?: T,
20
- L?: T,
21
- [custom: string]: T | undefined
22
- }
23
- type Responsive<T> = T | ResponsiveProp<T>
25
+ base?: T;
26
+ S?: T;
27
+ M?: T;
28
+ L?: T;
29
+ [custom: string]: T | undefined;
30
+ };
31
+ type Responsive<T> = T | ResponsiveProp<T>;
24
32
 
25
33
  export interface StyleProps {
26
34
  // For backward compatibility!
27
- /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */
28
- UNSAFE_className?: string,
29
- /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use style props instead. */
30
- UNSAFE_style?: CSSProperties,
31
-
32
- /** The margin for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
33
- margin?: Responsive<DimensionValue>,
34
- /** The margin for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start). */
35
- marginStart?: Responsive<DimensionValue>,
36
- /** The margin for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end). */
37
- marginEnd?: Responsive<DimensionValue>,
35
+ /**
36
+ * Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
37
+ * for the element. Only use as a **last resort**. Use style props instead.
38
+ */
39
+ UNSAFE_className?: string;
40
+ /**
41
+ * Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the
42
+ * element. Only use as a **last resort**. Use style props instead.
43
+ */
44
+ UNSAFE_style?: CSSProperties;
45
+
46
+ /**
47
+ * The margin for all four sides of the element. See
48
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
49
+ */
50
+ margin?: Responsive<DimensionValue>;
51
+ /**
52
+ * The margin for the logical start side of the element, depending on layout direction. See
53
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start).
54
+ */
55
+ marginStart?: Responsive<DimensionValue>;
56
+ /**
57
+ * The margin for the logical end side of an element, depending on layout direction. See
58
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end).
59
+ */
60
+ marginEnd?: Responsive<DimensionValue>;
38
61
  // /** The margin for the left side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left). Consider using `marginStart` instead for RTL support. */
39
62
  // marginLeft?: Responsive<DimensionValue>,
40
63
  // /** The margin for the right side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left). Consider using `marginEnd` instead for RTL support. */
41
64
  // marginRight?: Responsive<DimensionValue>,
42
- /** The margin for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top). */
43
- marginTop?: Responsive<DimensionValue>,
44
- /** The margin for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom). */
45
- marginBottom?: Responsive<DimensionValue>,
46
- /** The margin for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
47
- marginX?: Responsive<DimensionValue>,
48
- /** The margin for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
49
- marginY?: Responsive<DimensionValue>,
65
+ /**
66
+ * The margin for the top side of the element. See
67
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top).
68
+ */
69
+ marginTop?: Responsive<DimensionValue>;
70
+ /**
71
+ * The margin for the bottom side of the element. See
72
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom).
73
+ */
74
+ marginBottom?: Responsive<DimensionValue>;
75
+ /**
76
+ * The margin for both the left and right sides of the element. See
77
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
78
+ */
79
+ marginX?: Responsive<DimensionValue>;
80
+ /**
81
+ * The margin for both the top and bottom sides of the element. See
82
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
83
+ */
84
+ marginY?: Responsive<DimensionValue>;
50
85
 
51
86
  /** The width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width). */
52
- width?: Responsive<DimensionValue>,
87
+ width?: Responsive<DimensionValue>;
53
88
  /** The height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height). */
54
- height?: Responsive<DimensionValue>,
55
- /** The minimum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). */
56
- minWidth?: Responsive<DimensionValue>,
57
- /** The minimum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). */
58
- minHeight?: Responsive<DimensionValue>,
59
- /** The maximum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). */
60
- maxWidth?: Responsive<DimensionValue>,
61
- /** The maximum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). */
62
- maxHeight?: Responsive<DimensionValue>,
63
-
64
- /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex). */
65
- flex?: Responsive<string | number | boolean>,
66
- /** When used in a flex layout, specifies how the element will grow to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). */
67
- flexGrow?: Responsive<number>,
68
- /** When used in a flex layout, specifies how the element will shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). */
69
- flexShrink?: Responsive<number>,
70
- /** When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). */
71
- flexBasis?: Responsive<number | string>,
72
- /** Specifies how the element is justified inside a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). */
73
- justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>, // ...
74
- /** Overrides the `alignItems` property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). */
75
- alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>,
76
- /** The layout order for the element within a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order). */
77
- order?: Responsive<number>,
78
-
79
- /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area). */
80
- gridArea?: Responsive<string>,
81
- /** When used in a grid layout, specifies the column the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column). */
82
- gridColumn?: Responsive<string>,
83
- /** When used in a grid layout, specifies the row the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row). */
84
- gridRow?: Responsive<string>,
85
- /** When used in a grid layout, specifies the starting column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start). */
86
- gridColumnStart?: Responsive<string>,
87
- /** When used in a grid layout, specifies the ending column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end). */
88
- gridColumnEnd?: Responsive<string>,
89
- /** When used in a grid layout, specifies the starting row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start). */
90
- gridRowStart?: Responsive<string>,
91
- /** When used in a grid layout, specifies the ending row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end). */
92
- gridRowEnd?: Responsive<string>,
93
-
94
- /** Specifies how the element is positioned. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position). */
95
- position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>,
96
- /** The stacking order for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). */
97
- zIndex?: Responsive<number>,
98
- /** The top position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top). */
99
- top?: Responsive<DimensionValue>,
100
- /** The bottom position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom). */
101
- bottom?: Responsive<DimensionValue>,
102
- /** The logical start position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start). */
103
- start?: Responsive<DimensionValue>,
104
- /** The logical end position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end). */
105
- end?: Responsive<DimensionValue>,
106
- /** The left position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left). Consider using `start` instead for RTL support. */
107
- left?: Responsive<DimensionValue>,
108
- /** The right position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right). Consider using `start` instead for RTL support. */
109
- right?: Responsive<DimensionValue>,
89
+ height?: Responsive<DimensionValue>;
90
+ /**
91
+ * The minimum width of the element. See
92
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
93
+ */
94
+ minWidth?: Responsive<DimensionValue>;
95
+ /**
96
+ * The minimum height of the element. See
97
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height).
98
+ */
99
+ minHeight?: Responsive<DimensionValue>;
100
+ /**
101
+ * The maximum width of the element. See
102
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
103
+ */
104
+ maxWidth?: Responsive<DimensionValue>;
105
+ /**
106
+ * The maximum height of the element. See
107
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height).
108
+ */
109
+ maxHeight?: Responsive<DimensionValue>;
110
+
111
+ /**
112
+ * When used in a flex layout, specifies how the element will grow or shrink to fit the space
113
+ * available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
114
+ */
115
+ flex?: Responsive<string | number | boolean>;
116
+ /**
117
+ * When used in a flex layout, specifies how the element will grow to fit the space available. See
118
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow).
119
+ */
120
+ flexGrow?: Responsive<number>;
121
+ /**
122
+ * When used in a flex layout, specifies how the element will shrink to fit the space available.
123
+ * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink).
124
+ */
125
+ flexShrink?: Responsive<number>;
126
+ /**
127
+ * When used in a flex layout, specifies the initial main size of the element. See
128
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
129
+ */
130
+ flexBasis?: Responsive<number | string>;
131
+ /**
132
+ * Specifies how the element is justified inside a flex or grid container. See
133
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self).
134
+ */
135
+ justifySelf?: Responsive<
136
+ | 'auto'
137
+ | 'normal'
138
+ | 'start'
139
+ | 'end'
140
+ | 'flex-start'
141
+ | 'flex-end'
142
+ | 'self-start'
143
+ | 'self-end'
144
+ | 'center'
145
+ | 'left'
146
+ | 'right'
147
+ | 'stretch'
148
+ >; // ...
149
+ /**
150
+ * Overrides the `alignItems` property of a flex or grid container. See
151
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self).
152
+ */
153
+ alignSelf?: Responsive<
154
+ | 'auto'
155
+ | 'normal'
156
+ | 'start'
157
+ | 'end'
158
+ | 'center'
159
+ | 'flex-start'
160
+ | 'flex-end'
161
+ | 'self-start'
162
+ | 'self-end'
163
+ | 'stretch'
164
+ >;
165
+ /**
166
+ * The layout order for the element within a flex or grid container. See
167
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order).
168
+ */
169
+ order?: Responsive<number>;
170
+
171
+ /**
172
+ * When used in a grid layout, specifies the named grid area that the element should be placed in
173
+ * within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area).
174
+ */
175
+ gridArea?: Responsive<string>;
176
+ /**
177
+ * When used in a grid layout, specifies the column the element should be placed in within the
178
+ * grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).
179
+ */
180
+ gridColumn?: Responsive<string>;
181
+ /**
182
+ * When used in a grid layout, specifies the row the element should be placed in within the grid.
183
+ * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).
184
+ */
185
+ gridRow?: Responsive<string>;
186
+ /**
187
+ * When used in a grid layout, specifies the starting column to span within the grid. See
188
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start).
189
+ */
190
+ gridColumnStart?: Responsive<string>;
191
+ /**
192
+ * When used in a grid layout, specifies the ending column to span within the grid. See
193
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end).
194
+ */
195
+ gridColumnEnd?: Responsive<string>;
196
+ /**
197
+ * When used in a grid layout, specifies the starting row to span within the grid. See
198
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start).
199
+ */
200
+ gridRowStart?: Responsive<string>;
201
+ /**
202
+ * When used in a grid layout, specifies the ending row to span within the grid. See
203
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end).
204
+ */
205
+ gridRowEnd?: Responsive<string>;
206
+
207
+ /**
208
+ * Specifies how the element is positioned. See
209
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
210
+ */
211
+ position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>;
212
+ /**
213
+ * The stacking order for the element. See
214
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
215
+ */
216
+ zIndex?: Responsive<number>;
217
+ /**
218
+ * The top position for the element. See
219
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top).
220
+ */
221
+ top?: Responsive<DimensionValue>;
222
+ /**
223
+ * The bottom position for the element. See
224
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom).
225
+ */
226
+ bottom?: Responsive<DimensionValue>;
227
+ /**
228
+ * The logical start position for the element, depending on layout direction. See
229
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start).
230
+ */
231
+ start?: Responsive<DimensionValue>;
232
+ /**
233
+ * The logical end position for the element, depending on layout direction. See
234
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end).
235
+ */
236
+ end?: Responsive<DimensionValue>;
237
+ /**
238
+ * The left position for the element. See
239
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left). Consider using `start` instead
240
+ * for RTL support.
241
+ */
242
+ left?: Responsive<DimensionValue>;
243
+ /**
244
+ * The right position for the element. See
245
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right). Consider using `start` instead
246
+ * for RTL support.
247
+ */
248
+ right?: Responsive<DimensionValue>;
110
249
 
111
250
  /** Hides the element. */
112
- isHidden?: Responsive<boolean>
251
+ isHidden?: Responsive<boolean>;
113
252
  }
114
253
 
115
254
  export type ColorVersion = 5 | 6;
116
255
  type BackgroundColor = {
117
- 5: BackgroundColorValue,
118
- 6: BackgroundColorValueV6
256
+ 5: BackgroundColorValue;
257
+ 6: BackgroundColorValueV6;
119
258
  };
120
259
 
121
260
  type BorderColor = {
122
- 5: BorderColorValue,
123
- 6: BorderColorValueV6
124
- }
261
+ 5: BorderColorValue;
262
+ 6: BorderColorValueV6;
263
+ };
125
264
 
126
265
  // These support more properties than specific Spectrum components
127
266
  // but still based on spectrum global/alias variables.
128
267
  export interface ViewStyleProps<C extends ColorVersion> extends StyleProps {
129
268
  /**
130
269
  * The Spectrum color token version number.
270
+ *
131
271
  * @default 5
132
272
  */
133
- colorVersion?: C,
273
+ colorVersion?: C;
134
274
 
135
275
  /** The background color for the element. */
136
- backgroundColor?: Responsive<BackgroundColor[C]>,
137
-
138
- /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
139
- borderWidth?: Responsive<BorderSizeValue>,
140
- /** The width of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width). */
141
- borderStartWidth?: Responsive<BorderSizeValue>,
142
- /** The width of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width). */
143
- borderEndWidth?: Responsive<BorderSizeValue>,
276
+ backgroundColor?: Responsive<BackgroundColor[C]>;
277
+
278
+ /**
279
+ * The width of the element's border on all four sides. See
280
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
281
+ */
282
+ borderWidth?: Responsive<BorderSizeValue>;
283
+ /**
284
+ * The width of the border on the logical start side, depending on the layout direction. See
285
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width).
286
+ */
287
+ borderStartWidth?: Responsive<BorderSizeValue>;
288
+ /**
289
+ * The width of the border on the logical end side, depending on the layout direction. See
290
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width).
291
+ */
292
+ borderEndWidth?: Responsive<BorderSizeValue>;
144
293
  // borderLeftWidth?: BorderSizeValue,
145
294
  // borderRightWidth?: BorderSizeValue,
146
- /** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */
147
- borderTopWidth?: Responsive<BorderSizeValue>,
148
- /** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */
149
- borderBottomWidth?: Responsive<BorderSizeValue>,
150
- /** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
151
- borderXWidth?: Responsive<BorderSizeValue>,
152
- /** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
153
- borderYWidth?: Responsive<BorderSizeValue>,
154
-
155
- /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
156
- borderColor?: Responsive<BorderColor[C]>,
157
- /** The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color). */
158
- borderStartColor?: Responsive<BorderColor[C]>,
159
- /** The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color). */
160
- borderEndColor?: Responsive<BorderColor[C]>,
295
+ /**
296
+ * The width of the top border. See
297
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width).
298
+ */
299
+ borderTopWidth?: Responsive<BorderSizeValue>;
300
+ /**
301
+ * The width of the bottom border. See
302
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width).
303
+ */
304
+ borderBottomWidth?: Responsive<BorderSizeValue>;
305
+ /**
306
+ * The width of the left and right borders. See
307
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
308
+ */
309
+ borderXWidth?: Responsive<BorderSizeValue>;
310
+ /**
311
+ * The width of the top and bottom borders. See
312
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
313
+ */
314
+ borderYWidth?: Responsive<BorderSizeValue>;
315
+
316
+ /**
317
+ * The color of the element's border on all four sides. See
318
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color).
319
+ */
320
+ borderColor?: Responsive<BorderColor[C]>;
321
+ /**
322
+ * The color of the border on the logical start side, depending on the layout direction. See
323
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color).
324
+ */
325
+ borderStartColor?: Responsive<BorderColor[C]>;
326
+ /**
327
+ * The color of the border on the logical end side, depending on the layout direction. See
328
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color).
329
+ */
330
+ borderEndColor?: Responsive<BorderColor[C]>;
161
331
  // borderLeftColor?: BorderColorValue,
162
332
  // borderRightColor?: BorderColorValue,
163
- /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
164
- borderTopColor?: Responsive<BorderColor[C]>,
165
- /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
166
- borderBottomColor?: Responsive<BorderColor[C]>,
167
- /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
168
- borderXColor?: Responsive<BorderColor[C]>,
169
- /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
170
- borderYColor?: Responsive<BorderColor[C]>,
171
-
172
- /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
173
- borderRadius?: Responsive<BorderRadiusValue>,
174
- /** The border radius for the top start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius). */
175
- borderTopStartRadius?: Responsive<BorderRadiusValue>,
176
- /** The border radius for the top end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius). */
177
- borderTopEndRadius?: Responsive<BorderRadiusValue>,
178
- /** The border radius for the bottom start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius). */
179
- borderBottomStartRadius?: Responsive<BorderRadiusValue>,
180
- /** The border radius for the bottom end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius). */
181
- borderBottomEndRadius?: Responsive<BorderRadiusValue>,
333
+ /**
334
+ * The color of the top border. See
335
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color).
336
+ */
337
+ borderTopColor?: Responsive<BorderColor[C]>;
338
+ /**
339
+ * The color of the bottom border. See
340
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color).
341
+ */
342
+ borderBottomColor?: Responsive<BorderColor[C]>;
343
+ /**
344
+ * The color of the left and right borders. See
345
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color).
346
+ */
347
+ borderXColor?: Responsive<BorderColor[C]>;
348
+ /**
349
+ * The color of the top and bottom borders. See
350
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
351
+ */
352
+ borderYColor?: Responsive<BorderColor[C]>;
353
+
354
+ /**
355
+ * The border radius on all four sides of the element. See
356
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius).
357
+ */
358
+ borderRadius?: Responsive<BorderRadiusValue>;
359
+ /**
360
+ * The border radius for the top start corner of the element, depending on the layout direction.
361
+ * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius).
362
+ */
363
+ borderTopStartRadius?: Responsive<BorderRadiusValue>;
364
+ /**
365
+ * The border radius for the top end corner of the element, depending on the layout direction. See
366
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius).
367
+ */
368
+ borderTopEndRadius?: Responsive<BorderRadiusValue>;
369
+ /**
370
+ * The border radius for the bottom start corner of the element, depending on the layout
371
+ * direction. See
372
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius).
373
+ */
374
+ borderBottomStartRadius?: Responsive<BorderRadiusValue>;
375
+ /**
376
+ * The border radius for the bottom end corner of the element, depending on the layout direction.
377
+ * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius).
378
+ */
379
+ borderBottomEndRadius?: Responsive<BorderRadiusValue>;
182
380
  // borderTopLeftRadius?: BorderRadiusValue,
183
381
  // borderTopRightRadius?: BorderRadiusValue,
184
382
  // borderBottomLeftRadius?: BorderRadiusValue,
185
383
  // borderBottomRightRadius?: BorderRadiusValue,
186
384
 
187
- /** The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
188
- padding?: Responsive<DimensionValue>,
189
- /** The padding for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start). */
190
- paddingStart?: Responsive<DimensionValue>,
191
- /** The padding for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end). */
192
- paddingEnd?: Responsive<DimensionValue>,
385
+ /**
386
+ * The padding for all four sides of the element. See
387
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
388
+ */
389
+ padding?: Responsive<DimensionValue>;
390
+ /**
391
+ * The padding for the logical start side of the element, depending on layout direction. See
392
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start).
393
+ */
394
+ paddingStart?: Responsive<DimensionValue>;
395
+ /**
396
+ * The padding for the logical end side of an element, depending on layout direction. See
397
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end).
398
+ */
399
+ paddingEnd?: Responsive<DimensionValue>;
193
400
  // paddingLeft?: Responsive<DimensionValue>,
194
401
  // paddingRight?: Responsive<DimensionValue>,
195
- /** The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top). */
196
- paddingTop?: Responsive<DimensionValue>,
197
- /** The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). */
198
- paddingBottom?: Responsive<DimensionValue>,
199
- /** The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
200
- paddingX?: Responsive<DimensionValue>,
201
- /** The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
202
- paddingY?: Responsive<DimensionValue>,
203
-
204
- /** Species what to do when the element's content is too long to fit its size. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). */
205
- overflow?: Responsive<string>
402
+ /**
403
+ * The padding for the top side of the element. See
404
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top).
405
+ */
406
+ paddingTop?: Responsive<DimensionValue>;
407
+ /**
408
+ * The padding for the bottom side of the element. See
409
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom).
410
+ */
411
+ paddingBottom?: Responsive<DimensionValue>;
412
+ /**
413
+ * The padding for both the left and right sides of the element. See
414
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
415
+ */
416
+ paddingX?: Responsive<DimensionValue>;
417
+ /**
418
+ * The padding for both the top and bottom sides of the element. See
419
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
420
+ */
421
+ paddingY?: Responsive<DimensionValue>;
422
+
423
+ /**
424
+ * Species what to do when the element's content is too long to fit its size. See
425
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow).
426
+ */
427
+ overflow?: Responsive<string>;
206
428
  // ...
207
429
  // shadows?
208
430
  // transforms?
209
431
  }
210
432
 
211
433
  export interface BoxAlignmentStyleProps {
212
- /** The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). */
213
- justifyContent?: Responsive<'start' | 'end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
214
- /** The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).*/
215
- alignContent?: Responsive<'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
216
- /** The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). */
217
- alignItems?: Responsive<'start' | 'end' | 'center' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
218
- /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
219
- gap?: Responsive<DimensionValue>,
220
- /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
221
- columnGap?: Responsive<DimensionValue>,
222
- /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
223
- rowGap?: Responsive<DimensionValue>
434
+ /**
435
+ * The distribution of space around items along the main axis. See
436
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
437
+ */
438
+ justifyContent?: Responsive<
439
+ | 'start'
440
+ | 'end'
441
+ | 'center'
442
+ | 'left'
443
+ | 'right'
444
+ | 'space-between'
445
+ | 'space-around'
446
+ | 'space-evenly'
447
+ | 'stretch'
448
+ | 'baseline'
449
+ | 'first baseline'
450
+ | 'last baseline'
451
+ | 'safe center'
452
+ | 'unsafe center'
453
+ >;
454
+ /**
455
+ * The distribution of space around child items along the cross axis. See
456
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
457
+ */
458
+ alignContent?: Responsive<
459
+ | 'start'
460
+ | 'end'
461
+ | 'center'
462
+ | 'space-between'
463
+ | 'space-around'
464
+ | 'space-evenly'
465
+ | 'stretch'
466
+ | 'baseline'
467
+ | 'first baseline'
468
+ | 'last baseline'
469
+ | 'safe center'
470
+ | 'unsafe center'
471
+ >;
472
+ /**
473
+ * The alignment of children within their container. See
474
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
475
+ */
476
+ alignItems?: Responsive<
477
+ | 'start'
478
+ | 'end'
479
+ | 'center'
480
+ | 'stretch'
481
+ | 'self-start'
482
+ | 'self-end'
483
+ | 'baseline'
484
+ | 'first baseline'
485
+ | 'last baseline'
486
+ | 'safe center'
487
+ | 'unsafe center'
488
+ >;
489
+ /**
490
+ * The space to display between both rows and columns. See
491
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
492
+ */
493
+ gap?: Responsive<DimensionValue>;
494
+ /**
495
+ * The space to display between columns. See
496
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).
497
+ */
498
+ columnGap?: Responsive<DimensionValue>;
499
+ /**
500
+ * The space to display between rows. See
501
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap).
502
+ */
503
+ rowGap?: Responsive<DimensionValue>;
224
504
  }
225
505
 
226
506
  export interface FlexStyleProps extends BoxAlignmentStyleProps, StyleProps {
227
507
  /**
228
- * The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
508
+ * The direction in which to layout children. See
509
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
510
+ *
229
511
  * @default 'row'
230
512
  */
231
- direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>,
513
+ direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
232
514
  /**
233
- * Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
515
+ * Whether to wrap items onto multiple lines. See
516
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
517
+ *
234
518
  * @default false
235
519
  */
236
- wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>
520
+ wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>;
237
521
  }
238
522
 
239
523
  export interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {
240
- /** Defines named grid areas. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). */
241
- areas?: Responsive<string[]>,
242
- /** Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). */
243
- rows?: Responsive<string | DimensionValue[]>,
244
- /** Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
245
- columns?: Responsive<string | DimensionValue[]>,
246
- /** Defines the size of implicitly generated columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns). */
247
- autoColumns?: Responsive<DimensionValue>,
248
- /** Defines the size of implicitly generated rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). */
249
- autoRows?: Responsive<DimensionValue>,
250
- /** Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow). */
251
- autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>,
252
- /** Defines the default `justifySelf` for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). */
253
- justifyItems?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'left' | 'right' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center'>
524
+ /**
525
+ * Defines named grid areas. See
526
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).
527
+ */
528
+ areas?: Responsive<string[]>;
529
+ /**
530
+ * Defines the sizes of each row in the grid. See
531
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows).
532
+ */
533
+ rows?: Responsive<string | DimensionValue[]>;
534
+ /**
535
+ * Defines the sizes of each column in the grid. See
536
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
537
+ */
538
+ columns?: Responsive<string | DimensionValue[]>;
539
+ /**
540
+ * Defines the size of implicitly generated columns. See
541
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns).
542
+ */
543
+ autoColumns?: Responsive<DimensionValue>;
544
+ /**
545
+ * Defines the size of implicitly generated rows. See
546
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows).
547
+ */
548
+ autoRows?: Responsive<DimensionValue>;
549
+ /**
550
+ * Controls how auto-placed items are flowed into the grid. See
551
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
552
+ */
553
+ autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>;
554
+ /**
555
+ * Defines the default `justifySelf` for all items in the grid. See
556
+ * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).
557
+ */
558
+ justifyItems?: Responsive<
559
+ | 'auto'
560
+ | 'normal'
561
+ | 'start'
562
+ | 'end'
563
+ | 'center'
564
+ | 'left'
565
+ | 'right'
566
+ | 'stretch'
567
+ | 'self-start'
568
+ | 'self-end'
569
+ | 'baseline'
570
+ | 'first baseline'
571
+ | 'last baseline'
572
+ | 'safe center'
573
+ | 'unsafe center'
574
+ | 'legacy right'
575
+ | 'legacy left'
576
+ | 'legacy center'
577
+ >;
254
578
  }