@aws-amplify/ui 3.6.1 → 3.6.4

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 (54) 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/esm/theme/tokens/components/switchField.js +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/styles.css +32 -32
  11. package/dist/theme.css +32 -32
  12. package/dist/types/theme/tokens/components/alert.d.ts +28 -65
  13. package/dist/types/theme/tokens/components/authenticator.d.ts +47 -71
  14. package/dist/types/theme/tokens/components/badge.d.ts +29 -83
  15. package/dist/types/theme/tokens/components/button.d.ts +81 -326
  16. package/dist/types/theme/tokens/components/card.d.ts +15 -62
  17. package/dist/types/theme/tokens/components/checkbox.d.ts +75 -140
  18. package/dist/types/theme/tokens/components/checkboxField.d.ts +8 -14
  19. package/dist/types/theme/tokens/components/copy.d.ts +20 -26
  20. package/dist/types/theme/tokens/components/countryCodeSelect.d.ts +5 -5
  21. package/dist/types/theme/tokens/components/divider.d.ts +21 -38
  22. package/dist/types/theme/tokens/components/expander.d.ts +69 -135
  23. package/dist/types/theme/tokens/components/field.d.ts +17 -29
  24. package/dist/types/theme/tokens/components/fieldControl.d.ts +72 -174
  25. package/dist/types/theme/tokens/components/fieldGroup.d.ts +14 -15
  26. package/dist/types/theme/tokens/components/fieldMessages.d.ts +16 -21
  27. package/dist/types/theme/tokens/components/flex.d.ts +9 -17
  28. package/dist/types/theme/tokens/components/heading.d.ts +17 -56
  29. package/dist/types/theme/tokens/components/icon.d.ts +6 -8
  30. package/dist/types/theme/tokens/components/image.d.ts +8 -14
  31. package/dist/types/theme/tokens/components/index.d.ts +75 -2493
  32. package/dist/types/theme/tokens/components/link.d.ts +18 -35
  33. package/dist/types/theme/tokens/components/loader.d.ts +40 -92
  34. package/dist/types/theme/tokens/components/menu.d.ts +27 -59
  35. package/dist/types/theme/tokens/components/pagination.d.ts +48 -82
  36. package/dist/types/theme/tokens/components/placeholder.d.ts +15 -29
  37. package/dist/types/theme/tokens/components/radio.d.ts +72 -131
  38. package/dist/types/theme/tokens/components/rating.d.ts +19 -27
  39. package/dist/types/theme/tokens/components/select.d.ts +33 -60
  40. package/dist/types/theme/tokens/components/selectField.d.ts +5 -5
  41. package/dist/types/theme/tokens/components/sliderField.d.ts +61 -118
  42. package/dist/types/theme/tokens/components/stepperField.d.ts +10 -10
  43. package/dist/types/theme/tokens/components/switchField.d.ts +53 -78
  44. package/dist/types/theme/tokens/components/table.d.ts +61 -197
  45. package/dist/types/theme/tokens/components/tabs.d.ts +44 -84
  46. package/dist/types/theme/tokens/components/text.d.ts +16 -40
  47. package/dist/types/theme/tokens/components/toggleButton.d.ts +103 -154
  48. package/dist/types/theme/tokens/components/toggleButtonGroup.d.ts +7 -11
  49. package/dist/types/theme/tokens/index.d.ts +2 -1
  50. package/dist/types/theme/tokens/types/designToken.d.ts +41 -5
  51. package/dist/types/types/authenticator/stateMachine/context.d.ts +1 -0
  52. package/package.json +4 -2
  53. package/dist/esm/theme/tokens/components/phoneNumberField.js +0 -1
  54. 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 {};