@aws-amplify/ui 3.6.2 → 3.6.3

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 (53) hide show
  1. package/dist/esm/machines/authenticator/index.js +1 -1
  2. package/dist/esm/theme/tokens/components/button.js +1 -1
  3. package/dist/esm/theme/tokens/components/countryCodeSelect.js +1 -1
  4. package/dist/esm/theme/tokens/components/fieldControl.js +1 -1
  5. package/dist/esm/theme/tokens/components/fieldGroup.js +1 -1
  6. package/dist/esm/theme/tokens/components/index.js +1 -1
  7. package/dist/esm/theme/tokens/components/menu.js +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/styles.css +9 -9
  10. package/dist/theme.css +9 -9
  11. package/dist/types/theme/tokens/components/alert.d.ts +28 -65
  12. package/dist/types/theme/tokens/components/authenticator.d.ts +47 -71
  13. package/dist/types/theme/tokens/components/badge.d.ts +29 -83
  14. package/dist/types/theme/tokens/components/button.d.ts +81 -326
  15. package/dist/types/theme/tokens/components/card.d.ts +15 -62
  16. package/dist/types/theme/tokens/components/checkbox.d.ts +75 -140
  17. package/dist/types/theme/tokens/components/checkboxField.d.ts +8 -14
  18. package/dist/types/theme/tokens/components/copy.d.ts +20 -26
  19. package/dist/types/theme/tokens/components/countryCodeSelect.d.ts +5 -5
  20. package/dist/types/theme/tokens/components/divider.d.ts +21 -38
  21. package/dist/types/theme/tokens/components/expander.d.ts +69 -135
  22. package/dist/types/theme/tokens/components/field.d.ts +17 -29
  23. package/dist/types/theme/tokens/components/fieldControl.d.ts +72 -174
  24. package/dist/types/theme/tokens/components/fieldGroup.d.ts +14 -15
  25. package/dist/types/theme/tokens/components/fieldMessages.d.ts +16 -21
  26. package/dist/types/theme/tokens/components/flex.d.ts +9 -17
  27. package/dist/types/theme/tokens/components/heading.d.ts +17 -56
  28. package/dist/types/theme/tokens/components/icon.d.ts +6 -8
  29. package/dist/types/theme/tokens/components/image.d.ts +8 -14
  30. package/dist/types/theme/tokens/components/index.d.ts +75 -2493
  31. package/dist/types/theme/tokens/components/link.d.ts +18 -35
  32. package/dist/types/theme/tokens/components/loader.d.ts +40 -92
  33. package/dist/types/theme/tokens/components/menu.d.ts +27 -59
  34. package/dist/types/theme/tokens/components/pagination.d.ts +48 -82
  35. package/dist/types/theme/tokens/components/placeholder.d.ts +15 -29
  36. package/dist/types/theme/tokens/components/radio.d.ts +72 -131
  37. package/dist/types/theme/tokens/components/rating.d.ts +19 -27
  38. package/dist/types/theme/tokens/components/select.d.ts +33 -60
  39. package/dist/types/theme/tokens/components/selectField.d.ts +5 -5
  40. package/dist/types/theme/tokens/components/sliderField.d.ts +61 -118
  41. package/dist/types/theme/tokens/components/stepperField.d.ts +10 -10
  42. package/dist/types/theme/tokens/components/switchField.d.ts +53 -78
  43. package/dist/types/theme/tokens/components/table.d.ts +61 -197
  44. package/dist/types/theme/tokens/components/tabs.d.ts +44 -84
  45. package/dist/types/theme/tokens/components/text.d.ts +16 -40
  46. package/dist/types/theme/tokens/components/toggleButton.d.ts +103 -154
  47. package/dist/types/theme/tokens/components/toggleButtonGroup.d.ts +7 -11
  48. package/dist/types/theme/tokens/index.d.ts +2 -1
  49. package/dist/types/theme/tokens/types/designToken.d.ts +41 -5
  50. package/dist/types/types/authenticator/stateMachine/context.d.ts +1 -0
  51. package/package.json +1 -1
  52. package/dist/esm/theme/tokens/components/phoneNumberField.js +0 -1
  53. package/dist/types/theme/tokens/components/phoneNumberField.d.ts +0 -1
@@ -1,140 +1,75 @@
1
- export declare const checkbox: {
2
- cursor: {
3
- value: string;
4
- };
5
- alignItems: {
6
- value: string;
7
- };
8
- _disabled: {
9
- cursor: {
10
- value: string;
11
- };
12
- };
13
- button: {
14
- position: {
15
- value: string;
16
- };
17
- alignItems: {
18
- value: string;
19
- };
20
- justifyContent: {
21
- value: string;
22
- };
23
- color: {
24
- value: string;
25
- };
26
- before: {
27
- width: {
28
- value: string;
29
- };
30
- height: {
31
- value: string;
32
- };
33
- borderWidth: {
34
- value: string;
35
- };
36
- borderRadius: {
37
- value: string;
38
- };
39
- borderStyle: {
40
- value: string;
41
- };
42
- borderColor: {
43
- value: string;
44
- };
45
- };
46
- _focus: {
47
- outlineColor: {
48
- value: string;
49
- };
50
- outlineStyle: {
51
- value: string;
52
- };
53
- outlineWidth: {
54
- value: string;
55
- };
56
- outlineOffset: {
57
- value: string;
58
- };
59
- borderColor: {
60
- value: string;
61
- };
62
- boxShadow: {
63
- value: {
64
- offsetX: string;
65
- offsetY: string;
66
- blurRadius: string;
67
- spreadRadius: string;
68
- color: string;
69
- };
70
- };
71
- };
72
- _disabled: {
73
- borderColor: {
74
- value: string;
75
- };
76
- };
77
- _error: {
78
- borderColor: {
79
- value: string;
80
- };
81
- _focus: {
82
- borderColor: {
83
- value: string;
84
- };
85
- boxShadow: {
86
- value: {
87
- offsetX: string;
88
- offsetY: string;
89
- blurRadius: string;
90
- spreadRadius: string;
91
- color: string;
92
- };
93
- };
94
- };
95
- };
96
- };
97
- icon: {
98
- backgroundColor: {
99
- value: string;
100
- };
101
- borderRadius: {
102
- value: string;
103
- };
104
- opacity: {
105
- value: string;
106
- };
107
- transform: {
108
- value: string;
109
- };
110
- transitionProperty: {
111
- value: string;
112
- };
113
- transitionDuration: {
114
- value: string;
115
- };
116
- transitionTimingFunction: {
117
- value: string;
118
- };
119
- _checked: {
120
- opacity: {
121
- value: string;
122
- };
123
- transform: {
124
- value: string;
125
- };
126
- _disabled: {
127
- backgroundColor: {
128
- value: string;
129
- };
130
- };
131
- };
132
- };
133
- label: {
134
- _disabled: {
135
- color: {
136
- value: string;
137
- };
138
- };
139
- };
140
- };
1
+ import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, ColorValue, CursorValue, DesignToken, JustifyContentValue, OpacityValue, OutlineColorValue, OutlineOffsetValue, OutlineStyleValue, OutlineWidthValue, PositionValue, SpaceValue, TransformValue, TransitionDurationValue, TransitionPropertyValue, TransitionTimingFunctionValue } from '../types/designToken';
2
+ interface DisableToken {
3
+ cursor: DesignToken<CursorValue>;
4
+ }
5
+ interface ButtonDisabledToken {
6
+ borderColor: DesignToken<BorderColorValue>;
7
+ }
8
+ interface ButtonErrorFocusToken {
9
+ borderColor: DesignToken<BorderColorValue>;
10
+ boxShadow: DesignToken<BoxShadowValue>;
11
+ }
12
+ interface ButtonErrorToken {
13
+ borderColor: DesignToken<BorderColorValue>;
14
+ _focus: ButtonErrorFocusToken;
15
+ }
16
+ interface ButtonFocusToken {
17
+ outlineColor: DesignToken<OutlineColorValue>;
18
+ outlineStyle: DesignToken<OutlineStyleValue>;
19
+ outlineWidth: DesignToken<OutlineWidthValue>;
20
+ outlineOffset: DesignToken<OutlineOffsetValue>;
21
+ borderColor: DesignToken<BorderColorValue>;
22
+ boxShadow: DesignToken<BoxShadowValue>;
23
+ }
24
+ interface BeforeToken {
25
+ width: DesignToken<SpaceValue>;
26
+ height: DesignToken<SpaceValue>;
27
+ borderWidth: DesignToken<BorderWidthValue>;
28
+ borderRadius: DesignToken<BorderRadiusValue>;
29
+ borderStyle: DesignToken<BorderStyleValue>;
30
+ borderColor: DesignToken<BorderColorValue>;
31
+ }
32
+ interface ButtonToken {
33
+ position: DesignToken<PositionValue>;
34
+ alignItems: DesignToken<AlignItemsValue>;
35
+ justifyContent: DesignToken<JustifyContentValue>;
36
+ color: DesignToken<ColorValue>;
37
+ before: BeforeToken;
38
+ _focus: ButtonFocusToken;
39
+ _disabled: ButtonDisabledToken;
40
+ _error: ButtonErrorToken;
41
+ }
42
+ interface IconCheckedDisabled {
43
+ backgroundColor: DesignToken<BackgroundColorValue>;
44
+ }
45
+ interface IconCheckedToken {
46
+ opacity: DesignToken<OpacityValue>;
47
+ transform: DesignToken<TransformValue>;
48
+ _disabled: IconCheckedDisabled;
49
+ }
50
+ interface IconToken {
51
+ backgroundColor: DesignToken<BackgroundColorValue>;
52
+ borderRadius: DesignToken<BorderRadiusValue>;
53
+ opacity: DesignToken<OpacityValue>;
54
+ transform: DesignToken<TransformValue>;
55
+ transitionProperty: DesignToken<TransitionPropertyValue>;
56
+ transitionDuration: DesignToken<TransitionDurationValue>;
57
+ transitionTimingFunction: DesignToken<TransitionTimingFunctionValue>;
58
+ _checked: IconCheckedToken;
59
+ }
60
+ interface LabelDisabledToken {
61
+ color: DesignToken<ColorValue>;
62
+ }
63
+ interface LabelToken {
64
+ _disabled: LabelDisabledToken;
65
+ }
66
+ export interface CheckboxTokens {
67
+ cursor: DesignToken<CursorValue>;
68
+ alignItems: DesignToken<AlignItemsValue>;
69
+ _disabled: DisableToken;
70
+ button: ButtonToken;
71
+ icon: IconToken;
72
+ label: LabelToken;
73
+ }
74
+ export declare const checkbox: CheckboxTokens;
75
+ export {};
@@ -1,14 +1,8 @@
1
- export declare const checkboxfield: {
2
- alignItems: {
3
- value: string;
4
- };
5
- alignContent: {
6
- value: string;
7
- };
8
- flexDirection: {
9
- value: string;
10
- };
11
- justifyContent: {
12
- value: string;
13
- };
14
- };
1
+ import { AlignContentValue, AlignItemsValue, DesignToken, FlexDirectionValue, JustifyContentValue } from '../types/designToken';
2
+ export interface CheckboxFieldTokens {
3
+ alignItems: DesignToken<AlignItemsValue>;
4
+ alignContent: DesignToken<AlignContentValue>;
5
+ flexDirection: DesignToken<FlexDirectionValue>;
6
+ justifyContent: DesignToken<JustifyContentValue>;
7
+ }
8
+ export declare const checkboxfield: CheckboxFieldTokens;
@@ -1,26 +1,20 @@
1
- export declare const copy: {
2
- fontSize: {
3
- value: string;
4
- };
5
- gap: {
6
- value: string;
7
- };
8
- svg: {
9
- path: {
10
- fill: {
11
- value: string;
12
- };
13
- };
14
- };
15
- toolTip: {
16
- bottom: {
17
- value: string;
18
- };
19
- color: {
20
- value: string;
21
- };
22
- fontSize: {
23
- value: string;
24
- };
25
- };
26
- };
1
+ import { ColorValue, DesignToken, FontSizeValue, SpaceValue } from '../types/designToken';
2
+ interface CopySVGFillTokens {
3
+ fill: DesignToken<ColorValue>;
4
+ }
5
+ interface CopySVGTokens {
6
+ path: CopySVGFillTokens;
7
+ }
8
+ interface CopyToolTipTokens {
9
+ bottom: DesignToken<SpaceValue>;
10
+ color: DesignToken<ColorValue>;
11
+ fontSize: DesignToken<FontSizeValue>;
12
+ }
13
+ export interface CopyTokens {
14
+ fontSize: DesignToken<FontSizeValue>;
15
+ gap: DesignToken<SpaceValue>;
16
+ svg: CopySVGTokens;
17
+ toolTip: CopyToolTipTokens;
18
+ }
19
+ export declare const copy: CopyTokens;
20
+ export {};
@@ -1,5 +1,5 @@
1
- export declare const countrycodeselect: {
2
- height: {
3
- value: string;
4
- };
5
- };
1
+ import { DesignToken, SpaceValue } from '../types/designToken';
2
+ export interface CountryCodeSelectTokens {
3
+ height: DesignToken<SpaceValue>;
4
+ }
5
+ export declare const countrycodeselect: CountryCodeSelectTokens;
@@ -1,38 +1,21 @@
1
- export declare const divider: {
2
- borderStyle: {
3
- value: string;
4
- };
5
- borderColor: {
6
- value: string;
7
- };
8
- borderWidth: {
9
- value: string;
10
- };
11
- label: {
12
- color: {
13
- value: string;
14
- };
15
- paddingInline: {
16
- value: string;
17
- };
18
- fontSize: {
19
- value: string;
20
- };
21
- backgroundColor: {
22
- value: string;
23
- };
24
- };
25
- small: {
26
- borderWidth: {
27
- value: string;
28
- };
29
- };
30
- large: {
31
- borderWidth: {
32
- value: string;
33
- };
34
- };
35
- opacity: {
36
- value: string;
37
- };
38
- };
1
+ import { BackgroundColorValue, BorderColorValue, BorderStyleValue, BorderWidthValue, ColorValue, DesignToken, FontSizeValue, OpacityValue, SpaceValue } from '../types/designToken';
2
+ interface DividerSizeTokens {
3
+ borderWidth: DesignToken<BorderWidthValue>;
4
+ }
5
+ interface DividerLabelTokens {
6
+ color: DesignToken<ColorValue>;
7
+ paddingInline: DesignToken<SpaceValue>;
8
+ fontSize: DesignToken<FontSizeValue>;
9
+ backgroundColor: DesignToken<BackgroundColorValue>;
10
+ }
11
+ export interface DividerTokens {
12
+ borderStyle: DesignToken<BorderStyleValue>;
13
+ borderColor: DesignToken<BorderColorValue>;
14
+ borderWidth: DesignToken<BorderWidthValue>;
15
+ label: DividerLabelTokens;
16
+ small: DividerSizeTokens;
17
+ large: DividerSizeTokens;
18
+ opacity: DesignToken<OpacityValue>;
19
+ }
20
+ export declare const divider: DividerTokens;
21
+ export {};
@@ -1,135 +1,69 @@
1
- export declare const expander: {
2
- display: {
3
- value: string;
4
- };
5
- backgroundColor: {
6
- value: string;
7
- };
8
- borderRadius: {
9
- value: string;
10
- };
11
- boxShadow: {
12
- value: string;
13
- };
14
- width: {
15
- value: string;
16
- };
17
- item: {
18
- marginTop: {
19
- value: string;
20
- };
21
- boxShadow: {
22
- value: string;
23
- };
24
- borderBottomLeftRadius: {
25
- value: string;
26
- };
27
- borderBottomRightRadius: {
28
- value: string;
29
- };
30
- borderTopLeftRadius: {
31
- value: string;
32
- };
33
- borderTopRightRadius: {
34
- value: string;
35
- };
36
- borderStartStartRadius: {
37
- value: string;
38
- };
39
- borderStartEndRadius: {
40
- value: string;
41
- };
42
- borderEndStartRadius: {
43
- value: string;
44
- };
45
- borderEndEndRadius: {
46
- value: string;
47
- };
48
- _focus: {
49
- boxShadow: {
50
- value: {
51
- offsetX: string;
52
- offsetY: string;
53
- blurRadius: string;
54
- spreadRadius: string;
55
- color: string;
56
- };
57
- };
58
- };
59
- };
60
- header: {
61
- boxShadow: {
62
- value: {
63
- offsetX: string;
64
- offsetY: string;
65
- blurRadius: string;
66
- color: string;
67
- };
68
- };
69
- };
70
- trigger: {
71
- minHeight: {
72
- value: string;
73
- };
74
- paddingInlineStart: {
75
- value: string;
76
- };
77
- paddingInlineEnd: {
78
- value: string;
79
- };
80
- alignItems: {
81
- value: string;
82
- };
83
- justifyContent: {
84
- value: string;
85
- };
86
- _hover: {
87
- backgroundColor: {
88
- value: string;
89
- };
90
- };
91
- };
92
- content: {
93
- paddingInlineStart: {
94
- value: string;
95
- };
96
- paddingInlineEnd: {
97
- value: string;
98
- };
99
- text: {
100
- color: {
101
- value: string;
102
- };
103
- paddingBlockStart: {
104
- value: string;
105
- };
106
- paddingBlockEnd: {
107
- value: string;
108
- };
109
- };
110
- _open: {
111
- animationDuration: {
112
- value: string;
113
- };
114
- animationTimingFunction: {
115
- value: string;
116
- };
117
- };
118
- _closed: {
119
- animationDuration: {
120
- value: string;
121
- };
122
- animationTimingFunction: {
123
- value: string;
124
- };
125
- };
126
- };
127
- icon: {
128
- transitionDuration: {
129
- value: string;
130
- };
131
- transitionTimingFunction: {
132
- value: string;
133
- };
134
- };
135
- };
1
+ import { AlignItemsValue, AnimationDurationValue, AnimationTimingFunctionValue, BackgroundColorValue, BorderRadiusValue, BoxShadowValue, ColorValue, DesignToken, DisplayValue, JustifyContentValue, RadiusValue, SpaceValue, TransitionDurationValue, TransitionTimingFunctionValue } from '../types/designToken';
2
+ interface ExpanderItemFocusTokens {
3
+ boxShadow: DesignToken<BoxShadowValue>;
4
+ }
5
+ interface ExpanderItemTokens {
6
+ marginTop: DesignToken<SpaceValue>;
7
+ boxShadow: DesignToken<BoxShadowValue>;
8
+ borderBottomLeftRadius: DesignToken<RadiusValue>;
9
+ borderBottomRightRadius: DesignToken<RadiusValue>;
10
+ borderTopLeftRadius: DesignToken<RadiusValue>;
11
+ borderTopRightRadius: DesignToken<RadiusValue>;
12
+ borderStartStartRadius: DesignToken<RadiusValue>;
13
+ borderStartEndRadius: DesignToken<RadiusValue>;
14
+ borderEndStartRadius: DesignToken<RadiusValue>;
15
+ borderEndEndRadius: DesignToken<RadiusValue>;
16
+ _focus: ExpanderItemFocusTokens;
17
+ }
18
+ interface ExpanderHeaderTokens {
19
+ boxShadow: DesignToken<BoxShadowValue>;
20
+ }
21
+ interface ExpanderTriggerTokens {
22
+ minHeight: DesignToken<SpaceValue>;
23
+ paddingInlineStart: DesignToken<SpaceValue>;
24
+ paddingInlineEnd: DesignToken<SpaceValue>;
25
+ alignItems: DesignToken<AlignItemsValue>;
26
+ justifyContent: DesignToken<JustifyContentValue>;
27
+ _hover: ExpanderTriggerHoverTokens;
28
+ }
29
+ interface ExpanderTriggerHoverTokens {
30
+ backgroundColor: DesignToken<BackgroundColorValue>;
31
+ }
32
+ interface ExpanderContentTokens {
33
+ paddingInlineStart: DesignToken<SpaceValue>;
34
+ paddingInlineEnd: DesignToken<SpaceValue>;
35
+ text: ExpanderContentTextTokens;
36
+ _open: ExpanderContentOpenTokens;
37
+ _closed: ExpanderContentClosedTokens;
38
+ }
39
+ interface ExpanderContentTextTokens {
40
+ color: DesignToken<ColorValue>;
41
+ paddingBlockStart: DesignToken<SpaceValue>;
42
+ paddingBlockEnd: DesignToken<SpaceValue>;
43
+ }
44
+ interface ExpanderContentOpenTokens {
45
+ animationDuration: DesignToken<AnimationDurationValue>;
46
+ animationTimingFunction: DesignToken<AnimationTimingFunctionValue>;
47
+ }
48
+ interface ExpanderContentClosedTokens {
49
+ animationDuration: DesignToken<AnimationDurationValue>;
50
+ animationTimingFunction: DesignToken<AnimationTimingFunctionValue>;
51
+ }
52
+ interface ExpanderIconTokens {
53
+ transitionDuration: DesignToken<TransitionDurationValue>;
54
+ transitionTimingFunction: DesignToken<TransitionTimingFunctionValue>;
55
+ }
56
+ export interface ExpanderTokens {
57
+ display: DesignToken<DisplayValue>;
58
+ backgroundColor: DesignToken<BackgroundColorValue>;
59
+ borderRadius: DesignToken<BorderRadiusValue>;
60
+ boxShadow: DesignToken<BoxShadowValue>;
61
+ width: DesignToken<SpaceValue>;
62
+ item: ExpanderItemTokens;
63
+ header: ExpanderHeaderTokens;
64
+ trigger: ExpanderTriggerTokens;
65
+ content: ExpanderContentTokens;
66
+ icon: ExpanderIconTokens;
67
+ }
68
+ export declare const expander: ExpanderTokens;
69
+ export {};
@@ -1,29 +1,17 @@
1
- export declare const field: {
2
- gap: {
3
- value: string;
4
- };
5
- fontSize: {
6
- value: string;
7
- };
8
- small: {
9
- gap: {
10
- value: string;
11
- };
12
- fontSize: {
13
- value: string;
14
- };
15
- };
16
- large: {
17
- gap: {
18
- value: string;
19
- };
20
- fontSize: {
21
- value: string;
22
- };
23
- };
24
- label: {
25
- color: {
26
- value: string;
27
- };
28
- };
29
- };
1
+ import { ColorValue, DesignToken, FontSizeValue, GapValue } from '../types/designToken';
2
+ interface FieldSizeTokens {
3
+ gap: DesignToken<GapValue>;
4
+ fontSize: DesignToken<FontSizeValue>;
5
+ }
6
+ interface FieldLabelTokens {
7
+ color: DesignToken<ColorValue>;
8
+ }
9
+ export interface FieldTokens {
10
+ gap: DesignToken<GapValue>;
11
+ fontSize: DesignToken<FontSizeValue>;
12
+ small: FieldSizeTokens;
13
+ large: FieldSizeTokens;
14
+ label: FieldLabelTokens;
15
+ }
16
+ export declare const field: FieldTokens;
17
+ export {};