@aws-amplify/ui-react 3.0.0 → 3.0.1

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 (45) hide show
  1. package/README.md +1 -1
  2. package/dist/styles.css +1 -1
  3. package/dist/types/primitives/types/alert.d.ts +6 -0
  4. package/dist/types/primitives/types/badge.d.ts +2 -0
  5. package/dist/types/primitives/types/base.d.ts +15 -0
  6. package/dist/types/primitives/types/button.d.ts +8 -0
  7. package/dist/types/primitives/types/card.d.ts +4 -0
  8. package/dist/types/primitives/types/checkbox.d.ts +5 -3
  9. package/dist/types/primitives/types/collection.d.ts +11 -0
  10. package/dist/types/primitives/types/divider.d.ts +3 -0
  11. package/dist/types/primitives/types/expander.d.ts +7 -0
  12. package/dist/types/primitives/types/field.d.ts +4 -0
  13. package/dist/types/primitives/types/fieldGroupIcon.d.ts +2 -0
  14. package/dist/types/primitives/types/flex.d.ts +7 -0
  15. package/dist/types/primitives/types/heading.d.ts +4 -0
  16. package/dist/types/primitives/types/icon.d.ts +9 -4
  17. package/dist/types/primitives/types/image.d.ts +17 -3
  18. package/dist/types/primitives/types/input.d.ts +18 -3
  19. package/dist/types/primitives/types/label.d.ts +2 -0
  20. package/dist/types/primitives/types/link.d.ts +3 -0
  21. package/dist/types/primitives/types/loader.d.ts +7 -0
  22. package/dist/types/primitives/types/menu.d.ts +10 -0
  23. package/dist/types/primitives/types/pagination.d.ts +17 -0
  24. package/dist/types/primitives/types/passwordField.d.ts +12 -1
  25. package/dist/types/primitives/types/phoneNumberField.d.ts +25 -0
  26. package/dist/types/primitives/types/placeholder.d.ts +2 -0
  27. package/dist/types/primitives/types/radio.d.ts +1 -0
  28. package/dist/types/primitives/types/radioGroupField.d.ts +2 -0
  29. package/dist/types/primitives/types/rating.d.ts +7 -0
  30. package/dist/types/primitives/types/searchField.d.ts +5 -0
  31. package/dist/types/primitives/types/select.d.ts +52 -0
  32. package/dist/types/primitives/types/selectField.d.ts +1 -0
  33. package/dist/types/primitives/types/sliderField.d.ts +48 -0
  34. package/dist/types/primitives/types/stepperField.d.ts +35 -0
  35. package/dist/types/primitives/types/style.d.ts +331 -6
  36. package/dist/types/primitives/types/switchField.d.ts +13 -0
  37. package/dist/types/primitives/types/table.d.ts +12 -0
  38. package/dist/types/primitives/types/tabs.d.ts +8 -0
  39. package/dist/types/primitives/types/text.d.ts +3 -0
  40. package/dist/types/primitives/types/textArea.d.ts +19 -3
  41. package/dist/types/primitives/types/textField.d.ts +5 -0
  42. package/dist/types/primitives/types/toggleButton.d.ts +16 -0
  43. package/dist/types/primitives/types/toggleButtonGroup.d.ts +20 -0
  44. package/dist/types/primitives/types/view.d.ts +24 -0
  45. package/package.json +2 -2
@@ -7,6 +7,7 @@ import { GridItemStyleProps, GridContainerStyleProps } from './grid';
7
7
  import { ImageStyleProps } from './image';
8
8
  import { TextAreaStyleProps } from './textArea';
9
9
  /**
10
+ * @description
10
11
  * Extract style compatible types (string literal | number | any string)
11
12
  */
12
13
  export declare type StyleProp<PropertyType> = (PropertyType extends number ? number : PropertyType extends string | WebDesignToken ? PropertyType : never) | (string & {});
@@ -19,91 +20,415 @@ export interface ResponsiveObject<PropertyType> {
19
20
  xxl?: PropertyType;
20
21
  }
21
22
  /**
23
+ * @description
22
24
  * Allows a style prop to be the property type
23
25
  * or a design token of that property type.
24
26
  */
25
27
  export declare type StyleToken<PropertyType> = PropertyType | WebDesignToken<PropertyType>;
26
28
  export declare type ResponsiveStyle<PropertyType> = StyleProp<PropertyType> | StyleProp<PropertyType>[] | ResponsiveObject<StyleProp<PropertyType>>;
27
29
  export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
30
+ /**
31
+ * @description
32
+ * Overrides a grid or flex item's align-items value.
33
+ * In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
34
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-self}
35
+ */
28
36
  alignSelf?: ResponsiveStyle<StyleToken<Property.AlignSelf>>;
37
+ /**
38
+ * @description
39
+ * Sets the background color of an element.
40
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-color}
41
+ */
29
42
  backgroundColor?: ResponsiveStyle<ColorKeys<StyleToken<Property.BackgroundColor>>>;
43
+ /**
44
+ * @description
45
+ * Sets one or more background images on an element.
46
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-image}
47
+ */
30
48
  backgroundImage?: ResponsiveStyle<StyleToken<Property.BackgroundImage>>;
49
+ /**
50
+ * @description
51
+ * Shorthand CSS property that sets an element's border-width, border-style, and border-color.
52
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/border}
53
+ */
31
54
  border?: ResponsiveStyle<StyleToken<Property.Border>>;
55
+ /**
56
+ * @description
57
+ * Rounds the corners of an element's outer border edge.
58
+ * You can set a single radius to make circular corners, or two radii to make elliptical corners.
59
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius}
60
+ */
32
61
  borderRadius?: ResponsiveStyle<RadiiKeys<StyleToken<Property.BorderRadius>>>;
62
+ /**
63
+ * @description
64
+ * Participates in setting the vertical position of a positioned element.
65
+ * It has no effect on non-positioned elements.
66
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/bottom}
67
+ */
33
68
  bottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Bottom>>>;
69
+ /**
70
+ * @description
71
+ * Adds shadow effects around an element's frame. You can set multiple effects separated by commas.
72
+ * A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
73
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow}
74
+ */
34
75
  boxShadow?: ResponsiveStyle<BoxShadowKeys<StyleToken<Property.BoxShadow>>>;
76
+ /**
77
+ * @description
78
+ * Sets the foreground color value of an element's text and text decorations, and sets the `currentcolor` value.
79
+ * `currentcolor` may be used as an indirect value on other properties and is the default for other color properties, such as border-color.
80
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/color}
81
+ */
35
82
  color?: ResponsiveStyle<ColorKeys<StyleToken<Property.Color>>>;
83
+ /**
84
+ * @description
85
+ * Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
86
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/display}
87
+ */
36
88
  display?: ResponsiveStyle<StyleToken<Property.Display>>;
89
+ /**
90
+ * @description
91
+ * Specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
92
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-family}
93
+ */
37
94
  fontFamily?: ResponsiveStyle<FontFamilyKeys<StyleToken<Property.FontFamily>>>;
95
+ /**
96
+ * @description
97
+ * Sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.
98
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size}
99
+ */
38
100
  fontSize?: ResponsiveStyle<FontSizeKeys<StyleToken<Property.FontSize>>>;
101
+ /**
102
+ * @description
103
+ * Sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
104
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-style}
105
+ */
39
106
  fontStyle?: ResponsiveStyle<StyleToken<Property.FontStyle>>;
107
+ /**
108
+ * @description
109
+ * Sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
110
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}
111
+ */
40
112
  fontWeight?: ResponsiveStyle<FontWeightKeys<StyleToken<Property.FontWeight>>>;
113
+ /**
114
+ * @description
115
+ * specifies the height of an element. By default, the property defines the height of the content area.
116
+ * If box-sizing is set to border-box, however, it instead determines the height of the border area.
117
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/height}
118
+ */
41
119
  height?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Height>>>;
120
+ /**
121
+ * @description
122
+ * Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
123
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/left}
124
+ */
42
125
  left?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Left>>>;
126
+ /**
127
+ * @description
128
+ * Sets the horizontal spacing behavior between text characters.
129
+ * This value is added to the natural spacing between characters while rendering the text.
130
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing}
131
+ */
43
132
  letterSpacing?: ResponsiveStyle<SpaceKeys<StyleToken<Property.LetterSpacing>>>;
133
+ /**
134
+ * @description
135
+ * Sets the height of a line box. It's commonly used to set the distance between lines of text.
136
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/line-height}
137
+ */
44
138
  lineHeight?: ResponsiveStyle<LineHeightKeys<StyleToken<Property.LineHeight>>>;
139
+ /**
140
+ * @description
141
+ * Shorthand CSS property that sets the margin area on all four sides of an element.
142
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin}
143
+ */
45
144
  margin?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Margin>>>;
145
+ /**
146
+ * @description
147
+ * Shorthand CSS property that defines the logical block start and end margins of an element,
148
+ * which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
149
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block}
150
+ */
46
151
  marginBlock?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlock>>>;
152
+ /**
153
+ * @description
154
+ * Defines the logical block end margin of an element,
155
+ * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
156
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end}
157
+ */
47
158
  marginBlockEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlockEnd>>>;
159
+ /**
160
+ * @description
161
+ * Defines the logical block start margin of an element,
162
+ * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
163
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start}
164
+ */
48
165
  marginBlockStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlockStart>>>;
166
+ /**
167
+ * @description
168
+ * Sets the margin area on the bottom of an element.
169
+ * A positive value places it farther from its neighbors, while a negative value places it closer.
170
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom}
171
+ */
49
172
  marginBottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBottom>>>;
173
+ /**
174
+ * @description
175
+ * Shorthand CSS property that defines both the logical inline start and end margins of an element,
176
+ * which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
177
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline}
178
+ */
50
179
  marginInline?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInline>>>;
180
+ /**
181
+ * @description
182
+ * Defines the logical inline end margin of an element,
183
+ * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
184
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end}
185
+ */
51
186
  marginInlineEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInlineEnd>>>;
187
+ /**
188
+ * @description
189
+ * Defines the logical inline start margin of an element,
190
+ * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
191
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start}
192
+ */
52
193
  marginInlineStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInlineStart>>>;
194
+ /**
195
+ * @description
196
+ * Sets the margin area on the left side of an element.
197
+ * A positive value places it farther from its neighbors, while a negative value places it closer.
198
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left}
199
+ */
53
200
  marginLeft?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginLeft>>>;
201
+ /**
202
+ * @description
203
+ * Sets the margin area on the right side of an element.
204
+ * A positive value places it farther from its neighbors, while a negative value places it closer.
205
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right}
206
+ */
54
207
  marginRight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginRight>>>;
208
+ /**
209
+ * @description
210
+ * Sets the margin area on the top of an element.
211
+ * A positive value places it farther from its neighbors, while a negative value places it closer.
212
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top}
213
+ */
55
214
  marginTop?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginTop>>>;
215
+ /**
216
+ * @description
217
+ * Sets the maximum height of an element.
218
+ * It prevents the used value of the height property from becoming larger than the value specified for max-height.
219
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-height}
220
+ */
56
221
  maxHeight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MaxHeight>>>;
222
+ /**
223
+ * @description
224
+ * Sets the maximum width of an element.
225
+ * It prevents the used value of the width property from becoming larger than the value specified by max-width.
226
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-width}
227
+ */
57
228
  maxWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MaxWidth>>>;
229
+ /**
230
+ * @description
231
+ * Sets the minimum height of an element.
232
+ * It prevents the used value of the height property from becoming smaller than the value specified for min-height.
233
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-height}
234
+ */
58
235
  minHeight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinHeight>>>;
236
+ /**
237
+ * @description
238
+ * Sets the minimum width of an element.
239
+ * It prevents the used value of the width property from becoming smaller than the value specified for min-width.
240
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-width}
241
+ */
59
242
  minWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinWidth>>>;
243
+ /**
244
+ * @description
245
+ * Sets the opacity of an element.
246
+ * Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
247
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/opacity}
248
+ */
60
249
  opacity?: ResponsiveStyle<OpacityKeys<StyleToken<Property.Opacity>>>;
250
+ /**
251
+ * @description
252
+ * Shorthand CSS property that sets the desired behavior for an element's overflow
253
+ * — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
254
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}
255
+ */
61
256
  overflow?: ResponsiveStyle<StyleToken<Property.Overflow>>;
257
+ /**
258
+ * @description
259
+ * Shorthand CSS property that sets the padding area on all four sides of an element at once.
260
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding}
261
+ */
62
262
  padding?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Padding>>>;
263
+ /**
264
+ * @description
265
+ * Shorthand CSS property that defines the logical block start and end padding of an element,
266
+ * which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
267
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block}
268
+ */
63
269
  paddingBlock?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlock>>>;
270
+ /**
271
+ * @description
272
+ * Defines the logical block end padding of an element,
273
+ * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
274
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end}
275
+ */
64
276
  paddingBlockEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlockEnd>>>;
277
+ /**
278
+ * @description
279
+ * Defines the logical block start padding of an element,
280
+ * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
281
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start}
282
+ */
65
283
  paddingBlockStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlockStart>>>;
284
+ /**
285
+ * @description
286
+ * Sets the height of the padding area on the bottom of an element.
287
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom}
288
+ */
66
289
  paddingBottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBottom>>>;
290
+ /**
291
+ * @description
292
+ * Shorthand CSS property that defines the logical inline start and end padding of an element,
293
+ * which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
294
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline}
295
+ */
67
296
  paddingInline?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInline>>>;
297
+ /**
298
+ * @description
299
+ * Defines the logical inline end padding of an element,
300
+ * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
301
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end}
302
+ */
68
303
  paddingInlineEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInlineEnd>>>;
304
+ /**
305
+ * @description
306
+ * Defines the logical inline start padding of an element,
307
+ * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
308
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start}
309
+ */
69
310
  paddingInlineStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInlineStart>>>;
311
+ /**
312
+ * @description
313
+ * Sets the width of the padding area to the left of an element.
314
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left}
315
+ */
70
316
  paddingLeft?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingLeft>>>;
317
+ /**
318
+ * @description
319
+ * Sets the width of the padding area on the right of an element.
320
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right}
321
+ */
71
322
  paddingRight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingRight>>>;
323
+ /**
324
+ * @description
325
+ * Sets the height of the padding area on the top of an element.
326
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top}
327
+ */
72
328
  paddingTop?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingTop>>>;
329
+ /**
330
+ * @description
331
+ * Sets how an element is positioned in a document.
332
+ * The top, right, bottom, and left properties determine the final location of positioned elements.
333
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/position}
334
+ */
73
335
  position?: ResponsiveStyle<StyleToken<Property.Position>>;
336
+ /**
337
+ * @description
338
+ * Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
339
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/right}
340
+ */
74
341
  right?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Right>>>;
342
+ /**
343
+ * @description
344
+ * Sets the horizontal alignment of the content inside a block element or table-cell box.
345
+ * This means it works like vertical-align but in the horizontal direction.
346
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/text-align}
347
+ */
75
348
  textAlign?: ResponsiveStyle<StyleToken<Property.TextAlign>>;
349
+ /**
350
+ * @description
351
+ * Shorthand CSS property that sets the appearance of decorative lines on text.
352
+ * It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.
353
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration}
354
+ */
76
355
  textDecoration?: ResponsiveStyle<StyleToken<Property.TextDecoration>>;
356
+ /**
357
+ * @description
358
+ * Specifies how to capitalize an element's text. It can be used to make text
359
+ * appear in all-uppercase or all-lowercase, or with each word capitalized.
360
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform}
361
+ */
77
362
  textTransform?: ResponsiveStyle<StyleToken<Property.TextTransform>>;
363
+ /**
364
+ * @description
365
+ * Participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.
366
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/top}
367
+ */
78
368
  top?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Top>>>;
369
+ /**
370
+ * @description
371
+ * Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
372
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform}
373
+ */
79
374
  transform?: ResponsiveStyle<TransformKeys<StyleToken<Property.Transform>>>;
375
+ /**
376
+ * @description
377
+ * Sets the origin for an element's transformations.
378
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin}
379
+ */
80
380
  transformOrigin?: ResponsiveStyle<StyleToken<Property.TransformOrigin>>;
381
+ /**
382
+ * @description
383
+ * Sets an element's width. By default, it sets the width of the content area,
384
+ * but if box-sizing is set to border-box, it sets the width of the border area.
385
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/width}
386
+ */
81
387
  width?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Width>>>;
388
+ /**
389
+ * @description
390
+ * Sets how white space inside an element is handled.
391
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/white-space}
392
+ */
82
393
  whiteSpace?: ResponsiveStyle<StyleToken<Property.WhiteSpace>>;
83
394
  }
84
395
  export interface CSSLayoutStyleProps {
85
396
  /**
86
- * Controls where the Flex/Grid items sit on the cross axis.
397
+ * @description
398
+ * Sets the align-self value on all direct children as a group.
399
+ * In Flexbox, it controls the alignment of items on the Cross Axis.
400
+ * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
401
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items}
87
402
  */
88
403
  alignItems?: ResponsiveStyle<Property.AlignItems>;
89
404
  /**
90
- * Sets the distribution of space between and around content items
405
+ * @description
406
+ * Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
407
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-content}
91
408
  */
92
409
  alignContent?: ResponsiveStyle<Property.AlignContent>;
93
410
  /**
94
- * Controls where the Flex/Grid items sit on the main axis.
411
+ * @description
412
+ * Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
413
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content}
95
414
  */
96
415
  justifyContent?: ResponsiveStyle<Property.JustifyContent>;
97
416
  /**
98
- * Spacing between child components. Shorthand for rowGap and columnGap.
417
+ * @description
418
+ * Controls the spacing between child components. Shorthand for rowGap and columnGap.
419
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/gap}
99
420
  */
100
421
  gap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Gap>>>;
101
422
  /**
102
- * Spacing between Flex/Grid child columns
423
+ * @description
424
+ * Controls the spacing between Flex/Grid child columns
425
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap}
103
426
  */
104
427
  columnGap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.GridColumnGap>>>;
105
428
  /**
106
- * Spacing between Flex/Grid child rows
429
+ * @description
430
+ * Controls the spacing between Flex/Grid child rows
431
+ * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap}
107
432
  */
108
433
  rowGap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.RowGap>>>;
109
434
  }
@@ -6,55 +6,68 @@ import { InputProps } from './input';
6
6
  import { FieldProps, LabelPositions } from './field';
7
7
  export interface SwitchFieldProps extends InputProps, FieldProps, BaseStyleProps {
8
8
  /**
9
+ * @description
9
10
  * Use this to provide a default checked value for an uncontrolled SwitchField
10
11
  */
11
12
  defaultChecked?: boolean;
12
13
  /**
14
+ * @description
13
15
  * If isChecked is provided, this will be a controlled SwitchField
14
16
  */
15
17
  isChecked?: boolean;
16
18
  /**
19
+ * @description
17
20
  * This property will set the switch to disabled
18
21
  */
19
22
  isDisabled?: boolean;
20
23
  /**
24
+ * @description
21
25
  * Visually hide the label, but the associated label text will still be required for accessibility.
22
26
  * @default false
23
27
  */
24
28
  isLabelHidden?: boolean;
25
29
  /**
30
+ * @description
26
31
  * Label text for field (required)
27
32
  */
28
33
  label: React.ReactNode;
29
34
  /**
35
+ * @description
30
36
  * Position of label in relation to the switchfield
31
37
  */
32
38
  labelPosition?: LabelPositions;
33
39
  /**
40
+ * @description
34
41
  * This prop adds a name attribute to the input element
35
42
  */
36
43
  name?: string;
37
44
  /**
45
+ * @description
38
46
  * Assign an onChange event to the switch field
39
47
  */
40
48
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
41
49
  /**
50
+ * @description
42
51
  * This prop adjusts the size of the switch component
43
52
  */
44
53
  size?: Sizes;
45
54
  /**
55
+ * @description
46
56
  * This property will change the color of the thumb in the switch component
47
57
  */
48
58
  thumbColor?: StyleToken<Property.Color>;
49
59
  /**
60
+ * @description
50
61
  * This property will change the color of the track in the switch component
51
62
  */
52
63
  trackColor?: StyleToken<Property.Color>;
53
64
  /**
65
+ * @description
54
66
  * This property will change the color of the checked track in the switch component
55
67
  */
56
68
  trackCheckedColor?: StyleToken<Property.Color>;
57
69
  /**
70
+ * @description
58
71
  * This is the value of the switch input and will be submitted with a form submission
59
72
  */
60
73
  value?: string | number;
@@ -5,19 +5,23 @@ export declare type TableSize = Sizes;
5
5
  export declare type TableVariation = 'bordered' | 'striped';
6
6
  export interface TableProps extends ViewProps {
7
7
  /**
8
+ * @description
8
9
  * Optional caption which serves as an accessible title/caption for
9
10
  * the table.
10
11
  */
11
12
  caption?: React.ReactNode;
12
13
  /**
14
+ * @description
13
15
  * If set to true, will highlight a table row on hover. Default is false.
14
16
  */
15
17
  highlightOnHover?: boolean;
16
18
  /**
19
+ * @description
17
20
  * Affects font size and padding. Default is in between 'small' and 'large'.
18
21
  */
19
22
  size?: TableSize;
20
23
  /**
24
+ * @description
21
25
  * Sets a supported style variation. Default is no specific variation.
22
26
  */
23
27
  variation?: TableVariation;
@@ -27,7 +31,15 @@ export interface TableBodyProps extends ViewProps {
27
31
  export declare type TableCellElement = 'td' | 'th';
28
32
  export interface TableCellProps extends ViewProps {
29
33
  as?: TableCellElement;
34
+ /**
35
+ * @description
36
+ * Defines the number of columns spanned by a cell within a <table>
37
+ */
30
38
  colspan?: Pick<React.HTMLProps<HTMLTableCellElement>, 'colSpan'>;
39
+ /**
40
+ * @description
41
+ * Defines the number of rows spanned by a cell within a <table>
42
+ */
31
43
  rowspan?: Pick<React.HTMLProps<HTMLTableCellElement>, 'rowSpan'>;
32
44
  }
33
45
  export interface TableFootProps extends ViewProps {
@@ -5,40 +5,48 @@ import { FlexProps } from './flex';
5
5
  export declare type TabsSpacing = 'equal' | 'relative';
6
6
  export interface TabsProps extends FlexProps {
7
7
  /**
8
+ * @description
8
9
  * The Tabs component only accepts TabItem components as children.
9
10
  */
10
11
  children: React.ReactElement | React.ReactElement[];
11
12
  /**
13
+ * @description
12
14
  * Change which Tab content is initially displayed. Pass in the index of the Tab you wish to show. The default is index 0 (the first tab).
13
15
  */
14
16
  defaultIndex?: number | string;
15
17
  /**
18
+ * @description
16
19
  * The controlled index of the currently selected tab. This should be used with
17
20
  * `onChange` as well to make the component controlled.
18
21
  */
19
22
  currentIndex?: number | string;
20
23
  /**
24
+ * @description
21
25
  * For controlled usage, use the onChange event to listen to when a tab is clicked
22
26
  * and update the `currentIndex` accordingly. The index of the tab clicked is passed
23
27
  * to onChange.
24
28
  */
25
29
  onChange?: (value: number | string) => void;
26
30
  /**
31
+ * @description
27
32
  * Control how Tabs take up the remaining space. Pass `equal` to make each tab take up the same amount of space,
28
33
  * and `relative` to make each tab take up space relative to the size of its title.
29
34
  */
30
35
  spacing?: TabsSpacing;
31
36
  /**
37
+ * @description
32
38
  * Sets the border and indicator of the tabs to be the top or bottom.
33
39
  */
34
40
  indicatorPosition?: 'top' | 'bottom';
35
41
  }
36
42
  export interface TabItemProps extends BaseComponentProps, BaseStyleProps {
37
43
  /**
44
+ * @description
38
45
  * Change the title corresponding with each Tab's content panel.
39
46
  */
40
47
  title: React.ReactNode;
41
48
  /**
49
+ * @description
42
50
  * Make a Tab not clickable and its content not visible to the user. Defaults to false (i.e., visible).
43
51
  */
44
52
  isDisabled?: boolean;
@@ -2,16 +2,19 @@ import { ViewProps } from './view';
2
2
  export declare type TextVariation = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'info' | 'success';
3
3
  export interface TextProps extends ViewProps {
4
4
  /**
5
+ * @description
5
6
  * HTML allowed tags
6
7
  */
7
8
  as?: 'p' | 'span' | 'strong' | 'em';
8
9
  /**
10
+ * @description
9
11
  * This should be the primary way to handle different styles of text. Lower-level
10
12
  * text styling attributes like color can be set directly, that should be more of an
11
13
  * escape hatch.
12
14
  */
13
15
  variation?: TextVariation;
14
16
  /**
17
+ * @description
15
18
  * This attribute will be used to indicate if the text component should truncate text
16
19
  * that exceeds the width of the text element. Truncated text will render an ellipsis.
17
20
  */