@cambly/syntax-core 1.7.0 → 1.8.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.
package/dist/index.css CHANGED
@@ -22,6 +22,174 @@
22
22
  height: 128px;
23
23
  }
24
24
 
25
+ /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css/#css-module-data */
26
+ ._primary700Color_18uh7_2 {
27
+ color: var(--color-base-primary-700);
28
+ }
29
+ ._destructive700Color_18uh7_6 {
30
+ color: var(--color-base-destructive-700);
31
+ }
32
+ ._gray900Color_18uh7_10 {
33
+ color: var(--color-base-gray-900);
34
+ }
35
+ ._whiteColor_18uh7_14 {
36
+ color: var(--color-base-white);
37
+ }
38
+ ._primary100BackgroundColor_18uh7_19 {
39
+ background-color: var(--color-base-primary-100);
40
+ }
41
+ ._destructive700Background_18uh7_23 {
42
+ background-color: var(--color-base-destructive-700);
43
+ }
44
+ ._destructive100BackgroundColor_18uh7_27 {
45
+ background-color: var(--color-base-destructive-100);
46
+ }
47
+ ._success700BackgroundColor_18uh7_31 {
48
+ background-color: var(--color-base-success-700);
49
+ }
50
+ ._whiteBackgroundColor_18uh7_35 {
51
+ background-color: var(--color-base-white);
52
+ }
53
+ ._yellow700BackgroundColor_18uh7_39 {
54
+ background-color: var(--color-extended-yellow-700);
55
+ }
56
+ ._primary700BackgroundColor_18uh7_43 {
57
+ background-color: var(--color-base-primary-700);
58
+ }
59
+
60
+ /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css/#css-module-data */
61
+ ._button_6lbba_1 {
62
+ border: none;
63
+ display: flex;
64
+ flex-direction: row;
65
+ align-items: center;
66
+ justify-content: center;
67
+ }
68
+ ._buttonGap_6lbba_9 {
69
+ gap: 4px;
70
+ }
71
+ ._button_6lbba_1:hover {
72
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
73
+ transition-duration: 0.2s;
74
+ cursor: pointer;
75
+ }
76
+ ._button_6lbba_1:focus-visible {
77
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
78
+ box-shadow: 0 0 0 4px #000;
79
+ outline: solid 2px #fff;
80
+ }
81
+ ._button_6lbba_1:active {
82
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
83
+ transform: scale(0.97);
84
+ transition-duration: 0.2s;
85
+ }
86
+ ._button_6lbba_1:disabled {
87
+ filter: opacity(30%);
88
+ background-image: none;
89
+ transform: none;
90
+ cursor: auto;
91
+ }
92
+ ._fullWidth_6lbba_50 {
93
+ width: 100%;
94
+ }
95
+ ._sm_6lbba_54 {
96
+ min-width: 52px;
97
+ height: 32px;
98
+ padding: 0 12px;
99
+ border-radius: 12px;
100
+ }
101
+ ._md_6lbba_61 {
102
+ min-width: 72px;
103
+ height: 40px;
104
+ padding: 0 16px;
105
+ border-radius: 12px;
106
+ }
107
+ ._lg_6lbba_68 {
108
+ min-width: 88px;
109
+ height: 48px;
110
+ padding: 0 20px;
111
+ border-radius: 16px;
112
+ }
113
+ ._icon_6lbba_75 {
114
+ color: inherit;
115
+ }
116
+ ._smIcon_6lbba_79 {
117
+ width: 16px !important;
118
+ height: 16px !important;
119
+ }
120
+ ._mdIcon_6lbba_86 {
121
+ width: 20px !important;
122
+ height: 20px !important;
123
+ }
124
+ ._lgIcon_6lbba_93 {
125
+ width: 24px !important;
126
+ height: 24px !important;
127
+ }
128
+ ._textContainer_6lbba_100 {
129
+ padding-left: 4px;
130
+ padding-right: 4px;
131
+ }
132
+ @keyframes _syntaxButtonLoadingRotate_6lbba_1 {
133
+ 0% {
134
+ transform-origin: 50% 50%;
135
+ }
136
+ 100% {
137
+ transform: rotate(360deg);
138
+ }
139
+ }
140
+ ._loading_6lbba_115 {
141
+ animation: _syntaxButtonLoadingRotate_6lbba_1 1.4s linear infinite;
142
+ }
143
+ ._loadingCircle_6lbba_119 {
144
+ stroke: currentcolor;
145
+ stroke-dasharray: 80px, 200px;
146
+ stroke-dashoffset: 0;
147
+ transform-origin: center;
148
+ }
149
+ ._buttonText_6lbba_127 {
150
+ color: inherit;
151
+ font-family:
152
+ -apple-system,
153
+ system-ui,
154
+ BlinkMacSystemFont,
155
+ "Segoe UI",
156
+ Roboto,
157
+ Helvetica,
158
+ Arial,
159
+ sans-serif;
160
+ font-weight: 500;
161
+ }
162
+ ._buttonTextSmall_6lbba_134 {
163
+ font-size: 12px;
164
+ }
165
+ ._buttonTextMedium_6lbba_138 {
166
+ font-size: 14px;
167
+ }
168
+ ._buttonTextLarge_6lbba_142 {
169
+ font-size: 16px;
170
+ }
171
+
172
+ /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css/#css-module-data */
173
+ ._buttonGroup_184aa_1 {
174
+ display: flex;
175
+ gap: 8px;
176
+ }
177
+ ._horizontal_184aa_6 {
178
+ flex-direction: row;
179
+ }
180
+ ._vertical_184aa_10 {
181
+ flex-direction: column;
182
+ }
183
+ ._smallGap_184aa_14 {
184
+ gap: 8px;
185
+ }
186
+ ._mediumGap_184aa_18 {
187
+ gap: 12px;
188
+ }
189
+ ._largeGap_184aa_22 {
190
+ gap: 16px;
191
+ }
192
+
25
193
  /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css/#css-module-data */
26
194
  ._card_hvz2b_1 {
27
195
  border-radius: 24px;
@@ -1 +1 @@
1
- {"version":3,"sources":["css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css/#css-module-data"],"sourcesContent":["._avatar_1s8z7_1 {\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n border-radius: 50%;\n}\n\n._sm_1s8z7_8 {\n width: 24px;\n height: 24px;\n}\n\n._md_1s8z7_13 {\n width: 40px;\n height: 40px;\n}\n\n._lg_1s8z7_18 {\n width: 72px;\n height: 72px;\n}\n\n._xl_1s8z7_23 {\n width: 128px;\n height: 128px;\n}\n","._card_hvz2b_1 {\n border-radius: 24px;\n padding: 28px;\n background-color: #fff;\n}\n\n@media (min-width: 480px) {\n ._card_hvz2b_1 {\n padding: 36px;\n }\n}\n","._divider_1ddgq_1 {\n background-color: var(--color-base-gray-10);\n border-radius: 50px;\n border: none;\n height: 1px;\n margin: 0;\n}\n","._miniActionCard_qebkn_1 {\n border-radius: 24px;\n padding: 20px;\n width: 169px;\n height: 156px;\n background-color: #fff;\n}\n\n._card_qebkn_9 {\n border-radius: 24px;\n padding: 28px;\n background-color: #fff;\n}\n\n@media (min-width: 480px) {\n ._miniActionCard_qebkn_1 {\n width: 232px;\n }\n}\n"],"mappings":";AAAA;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACxBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;;;ACRJ;AACE;AACA;AACA;AACA;AACA;AAAA;;;ACLF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;","names":[]}
1
+ {"version":3,"sources":["css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css/#css-module-data"],"sourcesContent":["._avatar_1s8z7_1 {\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n border-radius: 50%;\n}\n\n._sm_1s8z7_8 {\n width: 24px;\n height: 24px;\n}\n\n._md_1s8z7_13 {\n width: 40px;\n height: 40px;\n}\n\n._lg_1s8z7_18 {\n width: 72px;\n height: 72px;\n}\n\n._xl_1s8z7_23 {\n width: 128px;\n height: 128px;\n}\n","/* Regular Colors */\n._primary700Color_18uh7_2 {\n color: var(--color-base-primary-700);\n}\n\n._destructive700Color_18uh7_6 {\n color: var(--color-base-destructive-700);\n}\n\n._gray900Color_18uh7_10 {\n color: var(--color-base-gray-900);\n}\n\n._whiteColor_18uh7_14 {\n color: var(--color-base-white);\n}\n\n/* Background Colors */\n._primary100BackgroundColor_18uh7_19 {\n background-color: var(--color-base-primary-100);\n}\n\n._destructive700Background_18uh7_23 {\n background-color: var(--color-base-destructive-700);\n}\n\n._destructive100BackgroundColor_18uh7_27 {\n background-color: var(--color-base-destructive-100);\n}\n\n._success700BackgroundColor_18uh7_31 {\n background-color: var(--color-base-success-700);\n}\n\n._whiteBackgroundColor_18uh7_35 {\n background-color: var(--color-base-white);\n}\n\n._yellow700BackgroundColor_18uh7_39 {\n background-color: var(--color-extended-yellow-700);\n}\n\n._primary700BackgroundColor_18uh7_43 {\n background-color: var(--color-base-primary-700);\n}\n","._button_6lbba_1 {\n border: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n}\n\n._buttonGap_6lbba_9 {\n gap: 4px;\n}\n\n._button_6lbba_1:hover {\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.1) 0%,\n rgba(0, 0, 0, 0.1) 100%\n );\n transition-duration: 0.2s;\n cursor: pointer;\n}\n\n._button_6lbba_1:focus-visible {\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.2) 0%,\n rgba(0, 0, 0, 0.2) 100%\n );\n box-shadow: 0 0 0 4px #000;\n outline: solid 2px #fff;\n}\n\n._button_6lbba_1:active {\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.2) 0%,\n rgba(0, 0, 0, 0.2) 100%\n );\n transform: scale(0.97);\n transition-duration: 0.2s;\n}\n\n._button_6lbba_1:disabled {\n filter: opacity(30%);\n background-image: none;\n transform: none;\n cursor: auto;\n}\n\n._fullWidth_6lbba_50 {\n width: 100%;\n}\n\n._sm_6lbba_54 {\n min-width: 52px;\n height: 32px;\n padding: 0 12px;\n border-radius: 12px;\n}\n\n._md_6lbba_61 {\n min-width: 72px;\n height: 40px;\n padding: 0 16px;\n border-radius: 12px;\n}\n\n._lg_6lbba_68 {\n min-width: 88px;\n height: 48px;\n padding: 0 20px;\n border-radius: 16px;\n}\n\n._icon_6lbba_75 {\n color: inherit;\n}\n\n._smIcon_6lbba_79 {\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n width: 16px !important;\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n height: 16px !important;\n}\n\n._mdIcon_6lbba_86 {\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n width: 20px !important;\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n height: 20px !important;\n}\n\n._lgIcon_6lbba_93 {\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n width: 24px !important;\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n height: 24px !important;\n}\n\n._textContainer_6lbba_100 {\n padding-left: 4px;\n padding-right: 4px;\n}\n\n@keyframes _syntaxButtonLoadingRotate_6lbba_1 {\n 0% {\n transform-origin: 50% 50%;\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n._loading_6lbba_115 {\n animation: _syntaxButtonLoadingRotate_6lbba_1 1.4s linear infinite;\n}\n\n._loadingCircle_6lbba_119 {\n stroke: currentcolor;\n stroke-dasharray: 80px, 200px;\n stroke-dashoffset: 0;\n transform-origin: center;\n}\n\n/** TODO Change with `Typography` component when available */\n._buttonText_6lbba_127 {\n color: inherit;\n font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n Helvetica, Arial, sans-serif;\n font-weight: 500;\n}\n\n._buttonTextSmall_6lbba_134 {\n font-size: 12px;\n}\n\n._buttonTextMedium_6lbba_138 {\n font-size: 14px;\n}\n\n._buttonTextLarge_6lbba_142 {\n font-size: 16px;\n}\n","._buttonGroup_184aa_1 {\n display: flex;\n gap: 8px;\n}\n\n._horizontal_184aa_6 {\n flex-direction: row;\n}\n\n._vertical_184aa_10 {\n flex-direction: column;\n}\n\n._smallGap_184aa_14 {\n gap: 8px;\n}\n\n._mediumGap_184aa_18 {\n gap: 12px;\n}\n\n._largeGap_184aa_22 {\n gap: 16px;\n}\n","._card_hvz2b_1 {\n border-radius: 24px;\n padding: 28px;\n background-color: #fff;\n}\n\n@media (min-width: 480px) {\n ._card_hvz2b_1 {\n padding: 36px;\n }\n}\n","._divider_1ddgq_1 {\n background-color: var(--color-base-gray-10);\n border-radius: 50px;\n border: none;\n height: 1px;\n margin: 0;\n}\n","._miniActionCard_qebkn_1 {\n border-radius: 24px;\n padding: 20px;\n width: 169px;\n height: 156px;\n background-color: #fff;\n}\n\n._card_qebkn_9 {\n border-radius: 24px;\n padding: 28px;\n background-color: #fff;\n}\n\n@media (min-width: 480px) {\n ._miniActionCard_qebkn_1 {\n width: 232px;\n }\n}\n"],"mappings":";AAAA;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACvBF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC3CF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEI;AAAA;AAAA;AAIA;AAAA;AAAA;AAIJ;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC9IF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACtBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;;;ACRJ;AACE;AACA;AACA;AACA;AACA;AAAA;;;ACLF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;","names":[]}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import React, { ReactElement, ReactNode } from 'react';
2
+
1
3
  /**
2
4
  * Avatar is a circular image that represents a user.
3
5
  */
@@ -20,6 +22,131 @@ declare const Avatar: ({ src, accessibilityLabel, size, }: {
20
22
  size?: "sm" | "md" | "lg" | "xl" | undefined;
21
23
  }) => JSX.Element;
22
24
 
25
+ declare const Color: {
26
+ readonly PRIMARY: "primary";
27
+ readonly SECONDARY: "secondary";
28
+ readonly TERTIARY: "tertiary";
29
+ readonly BRANDED: "branded";
30
+ readonly DESTRUCTIVE_PRIMARY: "destructive-primary";
31
+ readonly DESTRUCTIVE_SECONDARY: "destructive-secondary";
32
+ readonly DESTRUCTIVE_TERTIARY: "destructive-tertiary";
33
+ readonly SUCCESS: "success";
34
+ readonly GRAY200: "gray200";
35
+ readonly GRAY700: "gray700";
36
+ readonly GRAY800: "gray800";
37
+ readonly GRAY900: "gray900";
38
+ readonly WHITE: "white";
39
+ readonly INHERIT: "inherit";
40
+ };
41
+ type ColorKeys = keyof typeof Color;
42
+ type ColorValue = (typeof Color)[ColorKeys];
43
+ declare const Size: {
44
+ readonly SMALL: "sm";
45
+ readonly MEDIUM: "md";
46
+ readonly LARGE: "lg";
47
+ };
48
+ type SizeKeys = keyof typeof Size;
49
+ type SizeValue = (typeof Size)[SizeKeys];
50
+
51
+ declare const Button: ({ text, loadingText, color, size: sizeProp, accessibilityLabel, disabled: disabledProp, loading, fullWidth: fullWidthProp, startIcon: StartIcon, endIcon: EndIcon, onClick, tooltip, }: {
52
+ /**
53
+ * The text to be displayed inside the button
54
+ */
55
+ text: string;
56
+ /**
57
+ * The text to be displayed inside the button when it is in a loading state
58
+ */
59
+ loadingText?: string | undefined;
60
+ /**
61
+ * The color of the button
62
+ *
63
+ * @defaultValue "primary"
64
+ */
65
+ color?: ColorValue | undefined;
66
+ /**
67
+ * The size of the button
68
+ *
69
+ * @defaultValue "medium"
70
+ */
71
+ size?: SizeValue | undefined;
72
+ /**
73
+ * The label to be used for accessibility
74
+ */
75
+ accessibilityLabel?: string | undefined;
76
+ /**
77
+ * If `true`, the button will be disabled
78
+ *
79
+ * @defaultValue false
80
+ */
81
+ disabled?: boolean | undefined;
82
+ /**
83
+ * If `true`, the button will be in a loading state
84
+ *
85
+ * @defaultValue false
86
+ */
87
+ loading?: boolean | undefined;
88
+ /**
89
+ * If `true`, the button will take up the full width of its container
90
+ *
91
+ * @defaultValue false
92
+ */
93
+ fullWidth?: boolean | undefined;
94
+ /**
95
+ * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
96
+ */
97
+ startIcon?: React.ComponentType<{
98
+ className: string;
99
+ }> | undefined;
100
+ /**
101
+ * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
102
+ */
103
+ endIcon?: React.ComponentType<{
104
+ className: string;
105
+ }> | undefined;
106
+ /**
107
+ * The callback to be called when the button is clicked
108
+ */
109
+ onClick: React.MouseEventHandler<HTMLButtonElement>;
110
+ /**
111
+ * The tooltip to be displayed when the user hovers over the button
112
+ */
113
+ tooltip?: string | undefined;
114
+ }) => ReactElement;
115
+
116
+ /**
117
+ * Group buttons to render them in a row or column with consistent spacing in between each button
118
+ */
119
+ declare const ButtonGroup: ({ disabled, fullWidth, orientation, size, children, }: {
120
+ /**
121
+ * If `true`, all buttons will be disabled.
122
+ *
123
+ * @defaultValue false
124
+ */
125
+ disabled: boolean;
126
+ /**
127
+ * If `true`, all buttons will be full width.
128
+ *
129
+ * @defaultValue false
130
+ */
131
+ fullWidth: boolean;
132
+ /**
133
+ * The orientation of the button group
134
+ *
135
+ * @defaultValue "horizontal"
136
+ */
137
+ orientation: "horizontal" | "vertical";
138
+ /**
139
+ * The size of the button group
140
+ *
141
+ * @defaultValue "medium"
142
+ */
143
+ size: SizeValue;
144
+ /**
145
+ * Buttons to be rendered inside the button group
146
+ */
147
+ children?: ReactNode;
148
+ }) => ReactElement;
149
+
23
150
  /**
24
151
  * Card is a basic container component to apply consistent styling and render child components.
25
152
  */
@@ -48,4 +175,4 @@ declare const MiniActionCard: ({ children, }: {
48
175
  children: JSX.Element;
49
176
  }) => JSX.Element;
50
177
 
51
- export { Avatar, Card, Divider, MiniActionCard };
178
+ export { Avatar, Button, ButtonGroup, Card, Divider, MiniActionCard };
package/dist/index.js CHANGED
@@ -37,7 +37,7 @@ var require_classnames = __commonJS({
37
37
  "use strict";
38
38
  var hasOwn = {}.hasOwnProperty;
39
39
  var nativeCodeString = "[native code]";
40
- function classNames2() {
40
+ function classNames4() {
41
41
  var classes = [];
42
42
  for (var i = 0; i < arguments.length; i++) {
43
43
  var arg = arguments[i];
@@ -48,7 +48,7 @@ var require_classnames = __commonJS({
48
48
  classes.push(arg);
49
49
  } else if (Array.isArray(arg)) {
50
50
  if (arg.length) {
51
- var inner = classNames2.apply(null, arg);
51
+ var inner = classNames4.apply(null, arg);
52
52
  if (inner) {
53
53
  classes.push(inner);
54
54
  }
@@ -68,14 +68,14 @@ var require_classnames = __commonJS({
68
68
  return classes.join(" ");
69
69
  }
70
70
  if (typeof module2 !== "undefined" && module2.exports) {
71
- classNames2.default = classNames2;
72
- module2.exports = classNames2;
71
+ classNames4.default = classNames4;
72
+ module2.exports = classNames4;
73
73
  } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
74
74
  define("classnames", [], function() {
75
- return classNames2;
75
+ return classNames4;
76
76
  });
77
77
  } else {
78
- window.classNames = classNames2;
78
+ window.classNames = classNames4;
79
79
  }
80
80
  })();
81
81
  }
@@ -85,6 +85,8 @@ var require_classnames = __commonJS({
85
85
  var src_exports = {};
86
86
  __export(src_exports, {
87
87
  Avatar: () => Avatar_default,
88
+ Button: () => Button_default,
89
+ ButtonGroup: () => ButtonGroup_default,
88
90
  Card: () => Card_default,
89
91
  Divider: () => Divider,
90
92
  MiniActionCard: () => MiniActionCard_default
@@ -115,23 +117,225 @@ var Avatar = ({
115
117
  };
116
118
  var Avatar_default = Avatar;
117
119
 
120
+ // src/Button/Button.tsx
121
+ var import_classnames2 = __toESM(require_classnames());
122
+
123
+ // src/constants.ts
124
+ var Color = {
125
+ PRIMARY: "primary",
126
+ SECONDARY: "secondary",
127
+ TERTIARY: "tertiary",
128
+ BRANDED: "branded",
129
+ DESTRUCTIVE_PRIMARY: "destructive-primary",
130
+ DESTRUCTIVE_SECONDARY: "destructive-secondary",
131
+ DESTRUCTIVE_TERTIARY: "destructive-tertiary",
132
+ SUCCESS: "success",
133
+ GRAY200: "gray200",
134
+ GRAY700: "gray700",
135
+ GRAY800: "gray800",
136
+ GRAY900: "gray900",
137
+ WHITE: "white",
138
+ INHERIT: "inherit"
139
+ };
140
+ var Size = {
141
+ SMALL: "sm",
142
+ MEDIUM: "md",
143
+ LARGE: "lg"
144
+ };
145
+ var Orientation = {
146
+ HORIZONTAL: "horizontal",
147
+ VERTICAL: "vertical"
148
+ };
149
+
150
+ // css-module:./colors.module.css#css-module
151
+ var colors_module_default = { "primary700Color": "_primary700Color_18uh7_2", "destructive700Color": "_destructive700Color_18uh7_6", "gray900Color": "_gray900Color_18uh7_10", "whiteColor": "_whiteColor_18uh7_14", "primary100BackgroundColor": "_primary100BackgroundColor_18uh7_19", "destructive700Background": "_destructive700Background_18uh7_23", "destructive100BackgroundColor": "_destructive100BackgroundColor_18uh7_27", "success700BackgroundColor": "_success700BackgroundColor_18uh7_31", "whiteBackgroundColor": "_whiteBackgroundColor_18uh7_35", "yellow700BackgroundColor": "_yellow700BackgroundColor_18uh7_39", "primary700BackgroundColor": "_primary700BackgroundColor_18uh7_43" };
152
+
153
+ // src/colors/backgroundColor.ts
154
+ function backgroundColor(color) {
155
+ switch (color) {
156
+ case Color.SECONDARY:
157
+ return colors_module_default.primary100BackgroundColor;
158
+ case Color.DESTRUCTIVE_PRIMARY:
159
+ return colors_module_default.destructive700Background;
160
+ case Color.DESTRUCTIVE_SECONDARY:
161
+ return colors_module_default.destructive100BackgroundColor;
162
+ case Color.SUCCESS:
163
+ return colors_module_default.success700BackgroundColor;
164
+ case Color.TERTIARY:
165
+ case Color.DESTRUCTIVE_TERTIARY:
166
+ return colors_module_default.whiteBackgroundColor;
167
+ case Color.BRANDED:
168
+ return colors_module_default.yellow700BackgroundColor;
169
+ default:
170
+ return colors_module_default.primary700BackgroundColor;
171
+ }
172
+ }
173
+
174
+ // src/colors/foregroundColor.ts
175
+ function foregroundColor(color) {
176
+ switch (color) {
177
+ case Color.SECONDARY:
178
+ case Color.TERTIARY:
179
+ return colors_module_default.primary700Color;
180
+ case Color.DESTRUCTIVE_SECONDARY:
181
+ case Color.DESTRUCTIVE_TERTIARY:
182
+ return colors_module_default.destructive700Color;
183
+ case Color.BRANDED:
184
+ return colors_module_default.gray900Color;
185
+ default:
186
+ return colors_module_default.whiteColor;
187
+ }
188
+ }
189
+
190
+ // src/Button/Button.tsx
191
+ var import_react2 = require("react");
192
+
193
+ // src/ButtonGroup/ButtonGroupContext.tsx
194
+ var import_react = __toESM(require("react"));
195
+ var ButtonGroupContext = import_react.default.createContext(
196
+ {}
197
+ );
198
+ ButtonGroupContext.displayName = "ButtonGroupContext";
199
+ var ButtonGroupContext_default = ButtonGroupContext;
200
+
201
+ // css-module:./Button.module.css#css-module
202
+ var Button_module_default = { "button": "_button_6lbba_1", "buttonGap": "_buttonGap_6lbba_9", "fullWidth": "_fullWidth_6lbba_50", "sm": "_sm_6lbba_54", "md": "_md_6lbba_61", "lg": "_lg_6lbba_68", "icon": "_icon_6lbba_75", "smIcon": "_smIcon_6lbba_79", "mdIcon": "_mdIcon_6lbba_86", "lgIcon": "_lgIcon_6lbba_93", "textContainer": "_textContainer_6lbba_100", "loading": "_loading_6lbba_115", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_6lbba_1", "loadingCircle": "_loadingCircle_6lbba_119", "buttonText": "_buttonText_6lbba_127", "buttonTextSmall": "_buttonTextSmall_6lbba_134", "buttonTextMedium": "_buttonTextMedium_6lbba_138", "buttonTextLarge": "_buttonTextLarge_6lbba_142" };
203
+
204
+ // src/Button/Button.tsx
205
+ var import_jsx_runtime2 = require("react/jsx-runtime");
206
+ var textVariant = {
207
+ // Replace with `Typography` once it lands in `syntax-core`
208
+ [Size.SMALL]: Button_module_default.buttonTextSmall,
209
+ [Size.MEDIUM]: Button_module_default.buttonTextMedium,
210
+ [Size.LARGE]: Button_module_default.buttonTextLarge
211
+ };
212
+ var loadingIconSize = {
213
+ [Size.SMALL]: 16,
214
+ [Size.MEDIUM]: 20,
215
+ [Size.LARGE]: 24
216
+ };
217
+ var iconSize = {
218
+ [Size.SMALL]: Button_module_default.smIcon,
219
+ [Size.MEDIUM]: Button_module_default.mdIcon,
220
+ [Size.LARGE]: Button_module_default.lgIcon
221
+ };
222
+ var Button = ({
223
+ text,
224
+ loadingText,
225
+ color = Color.PRIMARY,
226
+ size: sizeProp = Size.MEDIUM,
227
+ accessibilityLabel,
228
+ disabled: disabledProp = false,
229
+ loading = false,
230
+ fullWidth: fullWidthProp = false,
231
+ startIcon: StartIcon,
232
+ endIcon: EndIcon,
233
+ onClick,
234
+ tooltip
235
+ }) => {
236
+ var _a, _b, _c;
237
+ const contextProps = (0, import_react2.useContext)(ButtonGroupContext_default);
238
+ const size = (_a = contextProps == null ? void 0 : contextProps.size) != null ? _a : sizeProp;
239
+ const disabled = (_b = contextProps == null ? void 0 : contextProps.disabled) != null ? _b : disabledProp;
240
+ const fullWidth = (_c = contextProps == null ? void 0 : contextProps.fullWidth) != null ? _c : fullWidthProp;
241
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
242
+ "button",
243
+ {
244
+ "aria-label": accessibilityLabel,
245
+ type: "button",
246
+ title: tooltip,
247
+ disabled: disabled || loading,
248
+ onClick,
249
+ className: (0, import_classnames2.default)(
250
+ Button_module_default.button,
251
+ foregroundColor(color),
252
+ backgroundColor(color),
253
+ Button_module_default[size],
254
+ {
255
+ [Button_module_default.fullWidth]: fullWidth,
256
+ [Button_module_default.buttonGap]: size === Size.LARGE || size === Size.MEDIUM
257
+ }
258
+ ),
259
+ children: [
260
+ !loading && StartIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StartIcon, { className: (0, import_classnames2.default)(Button_module_default.icon, iconSize[size]) }),
261
+ (loading && loadingText || !loading && text) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_classnames2.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
262
+ !loading && EndIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EndIcon, { className: (0, import_classnames2.default)(Button_module_default.icon, iconSize[size]) }),
263
+ loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
264
+ "svg",
265
+ {
266
+ className: (0, import_classnames2.default)(Button_module_default.loading, foregroundColor(color)),
267
+ viewBox: "22 22 44 44",
268
+ width: loadingIconSize[size],
269
+ height: loadingIconSize[size],
270
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
271
+ "circle",
272
+ {
273
+ className: Button_module_default.loadingCircle,
274
+ cx: "44",
275
+ cy: "44",
276
+ r: "20.2",
277
+ fill: "none",
278
+ strokeWidth: "3.6"
279
+ }
280
+ )
281
+ }
282
+ )
283
+ ]
284
+ }
285
+ );
286
+ };
287
+ var Button_default = Button;
288
+
289
+ // src/ButtonGroup/ButtonGroup.tsx
290
+ var import_react3 = require("react");
291
+
292
+ // css-module:./ButtonGroup.module.css#css-module
293
+ var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_184aa_1", "horizontal": "_horizontal_184aa_6", "vertical": "_vertical_184aa_10", "smallGap": "_smallGap_184aa_14", "mediumGap": "_mediumGap_184aa_18", "largeGap": "_largeGap_184aa_22" };
294
+
295
+ // src/ButtonGroup/ButtonGroup.tsx
296
+ var import_classnames3 = __toESM(require_classnames());
297
+ var import_jsx_runtime3 = require("react/jsx-runtime");
298
+ var gap = {
299
+ [Size.SMALL]: ButtonGroup_module_default.smallGap,
300
+ [Size.MEDIUM]: ButtonGroup_module_default.mediumGap,
301
+ [Size.LARGE]: ButtonGroup_module_default.largeGap
302
+ };
303
+ var ButtonGroup = ({
304
+ disabled = false,
305
+ fullWidth = false,
306
+ orientation = Orientation.HORIZONTAL,
307
+ size = Size.MEDIUM,
308
+ children
309
+ }) => {
310
+ const context = (0, import_react3.useMemo)(
311
+ () => ({ disabled, fullWidth, size }),
312
+ [disabled, fullWidth, size]
313
+ );
314
+ const classnames = (0, import_classnames3.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
315
+ [ButtonGroup_module_default.horizontal]: orientation === Orientation.HORIZONTAL,
316
+ [ButtonGroup_module_default.vertical]: orientation === Orientation.VERTICAL
317
+ });
318
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonGroupContext_default.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: classnames, children }) });
319
+ };
320
+ var ButtonGroup_default = ButtonGroup;
321
+
118
322
  // css-module:./Card.module.css#css-module
119
323
  var Card_module_default = { "card": "_card_hvz2b_1" };
120
324
 
121
325
  // src/Card/Card.tsx
122
- var import_jsx_runtime2 = require("react/jsx-runtime");
326
+ var import_jsx_runtime4 = require("react/jsx-runtime");
123
327
  var Card = ({
124
328
  children
125
- }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Card_module_default.card, children });
329
+ }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: Card_module_default.card, children });
126
330
  var Card_default = Card;
127
331
 
128
332
  // css-module:./Divider.module.css#css-module
129
333
  var Divider_module_default = { "divider": "_divider_1ddgq_1" };
130
334
 
131
335
  // src/Divider/Divider.tsx
132
- var import_jsx_runtime3 = require("react/jsx-runtime");
336
+ var import_jsx_runtime5 = require("react/jsx-runtime");
133
337
  function Divider({}) {
134
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: Divider_module_default.divider });
338
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", { className: Divider_module_default.divider });
135
339
  }
136
340
  Divider.displayName = "Divider";
137
341
 
@@ -139,14 +343,16 @@ Divider.displayName = "Divider";
139
343
  var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
140
344
 
141
345
  // src/MiniActionCard/MiniActionCard.tsx
142
- var import_jsx_runtime4 = require("react/jsx-runtime");
346
+ var import_jsx_runtime6 = require("react/jsx-runtime");
143
347
  var MiniActionCard = ({
144
348
  children
145
- }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
349
+ }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
146
350
  var MiniActionCard_default = MiniActionCard;
147
351
  // Annotate the CommonJS export names for ESM import in node:
148
352
  0 && (module.exports = {
149
353
  Avatar,
354
+ Button,
355
+ ButtonGroup,
150
356
  Card,
151
357
  Divider,
152
358
  MiniActionCard
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/classnames/index.js","../src/index.tsx","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import Avatar from \"./Avatar/Avatar\";\nimport Card from \"./Card/Card\";\nimport Divider from \"./Divider/Divider\";\nimport MiniActionCard from \"./MiniActionCard/MiniActionCard\";\n\nexport { Avatar, Card, Divider, MiniActionCard };\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * Size of the avatar.\n * sm: 24px, md: 40px, lg: 72px, xl: 128px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n children,\n}: {\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n children,\n}: {\n /**\n * The child components to render within MiniActionCard.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,oDAAAA,SAAA;AAOA,KAAC,WAAY;AACZ;AAEA,UAAI,SAAS,CAAC,EAAE;AAChB,UAAI,mBAAmB;AAEvB,eAASC,cAAa;AACrB,YAAI,UAAU,CAAC;AAEf,iBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAC1C,cAAI,MAAM,UAAU,CAAC;AACrB,cAAI,CAAC;AAAK;AAEV,cAAI,UAAU,OAAO;AAErB,cAAI,YAAY,YAAY,YAAY,UAAU;AACjD,oBAAQ,KAAK,GAAG;AAAA,UACjB,WAAW,MAAM,QAAQ,GAAG,GAAG;AAC9B,gBAAI,IAAI,QAAQ;AACf,kBAAI,QAAQA,YAAW,MAAM,MAAM,GAAG;AACtC,kBAAI,OAAO;AACV,wBAAQ,KAAK,KAAK;AAAA,cACnB;AAAA,YACD;AAAA,UACD,WAAW,YAAY,UAAU;AAChC,gBAAI,IAAI,aAAa,OAAO,UAAU,YAAY,CAAC,IAAI,SAAS,SAAS,EAAE,SAAS,eAAe,GAAG;AACrG,sBAAQ,KAAK,IAAI,SAAS,CAAC;AAC3B;AAAA,YACD;AAEA,qBAAS,OAAO,KAAK;AACpB,kBAAI,OAAO,KAAK,KAAK,GAAG,KAAK,IAAI,GAAG,GAAG;AACtC,wBAAQ,KAAK,GAAG;AAAA,cACjB;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAEA,eAAO,QAAQ,KAAK,GAAG;AAAA,MACxB;AAEA,UAAI,OAAOD,YAAW,eAAeA,QAAO,SAAS;AACpD,QAAAC,YAAW,UAAUA;AACrB,QAAAD,QAAO,UAAUC;AAAA,MAClB,WAAW,OAAO,WAAW,cAAc,OAAO,OAAO,QAAQ,YAAY,OAAO,KAAK;AAExF,eAAO,cAAc,CAAC,GAAG,WAAY;AACpC,iBAAOA;AAAA,QACR,CAAC;AAAA,MACF,OAAO;AACN,eAAO,aAAaA;AAAA,MACrB;AAAA,IACD,GAAE;AAAA;AAAA;;;AC3DF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,wBAAuB;;;ACAqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,eAAc,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD6BjN;AAvBJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,kBAAAC,SAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC;AAAA;AAAA,EACnD;AAEJ;AAEA,IAAO,iBAAQ;;;AErCyE,IAAO,sBAAQ,EAAC,QAAO,gBAAe;;;ACY3G,IAAAC,sBAAA;AAPnB,IAAM,OAAO,CAAC;AAAA,EACZ;AACF,MAKmB,6CAAC,SAAI,WAAW,oBAAO,MAAO,UAAS;AAE1D,IAAO,eAAQ;;;ACd+E,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI,IAAAC,sBAAA;AADM,SAAR,QAAyB,CAAC,GAA0B;AACzD,SAAO,6CAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc;;;ACTsF,IAAO,gCAAQ,EAAC,kBAAiB,2BAA0B,QAAO,gBAAe;;;ACY1K,IAAAC,sBAAA;AAPnB,IAAM,iBAAiB,CAAC;AAAA,EACtB;AACF,MAKmB,6CAAC,SAAI,WAAW,8BAAO,gBAAiB,UAAS;AAEpE,IAAO,yBAAQ;","names":["module","classNames","classNames","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../../node_modules/classnames/index.js","../src/index.tsx","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","../src/constants.ts","css-module:./colors.module.css#css-module","../src/colors/backgroundColor.ts","../src/colors/foregroundColor.ts","../src/ButtonGroup/ButtonGroupContext.tsx","css-module:./Button.module.css#css-module","../src/ButtonGroup/ButtonGroup.tsx","css-module:./ButtonGroup.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import Avatar from \"./Avatar/Avatar\";\nimport Button from \"./Button/Button\";\nimport ButtonGroup from \"./ButtonGroup/ButtonGroup\";\nimport Card from \"./Card/Card\";\nimport Divider from \"./Divider/Divider\";\nimport MiniActionCard from \"./MiniActionCard/MiniActionCard\";\n\nexport { Avatar, Button, ButtonGroup, Card, Divider, MiniActionCard };\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * Size of the avatar.\n * sm: 24px, md: 40px, lg: 72px, xl: 128px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { useContext, ReactElement } from \"react\";\nimport { Color, ColorValue, Size, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\nimport styles from \"./Button.module.css\";\n\nconst textVariant = {\n // Replace with `Typography` once it lands in `syntax-core`\n [Size.SMALL]: styles.buttonTextSmall,\n [Size.MEDIUM]: styles.buttonTextMedium,\n [Size.LARGE]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 20,\n [Size.LARGE]: 24,\n};\n\nconst iconSize = {\n [Size.SMALL]: styles.smIcon,\n [Size.MEDIUM]: styles.mdIcon,\n [Size.LARGE]: styles.lgIcon,\n};\n\nconst Button = ({\n text,\n loadingText,\n color = Color.PRIMARY,\n size: sizeProp = Size.MEDIUM,\n accessibilityLabel,\n disabled: disabledProp = false,\n loading = false,\n fullWidth: fullWidthProp = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n onClick,\n tooltip,\n}: {\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The text to be displayed inside the button when it is in a loading state\n */\n loadingText?: string;\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: ColorValue;\n /**\n * The size of the button\n *\n * @defaultValue \"medium\"\n */\n size?: SizeValue;\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be in a loading state\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n startIcon?: React.ComponentType<{ className: string }>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n endIcon?: React.ComponentType<{ className: string }>;\n /**\n * The callback to be called when the button is clicked\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n}): ReactElement => {\n const contextProps = useContext(ButtonGroupContext);\n\n const size = contextProps?.size ?? sizeProp;\n const disabled = contextProps?.disabled ?? disabledProp;\n const fullWidth = contextProps?.fullWidth ?? fullWidthProp;\n\n return (\n <button\n aria-label={accessibilityLabel}\n type=\"button\"\n title={tooltip}\n disabled={disabled || loading}\n onClick={onClick}\n className={classNames(\n styles.button,\n foregroundColor(color),\n backgroundColor(color),\n styles[size],\n {\n [styles.fullWidth]: fullWidth,\n [styles.buttonGap]: size === Size.LARGE || size === Size.MEDIUM,\n },\n )}\n >\n {!loading && StartIcon && (\n <StartIcon className={classNames(styles.icon, iconSize[size])} />\n )}\n {((loading && loadingText) || (!loading && text)) && (\n <div className={styles.textContainer}>\n {/* Replace with `Typography` once it lands in `syntax-core` */}\n <div className={classNames(styles.buttonText, textVariant[size])}>\n {loading ? loadingText : text}\n </div>\n </div>\n )}\n {!loading && EndIcon && (\n <EndIcon className={classNames(styles.icon, iconSize[size])} />\n )}\n {loading && (\n <svg\n className={classNames(styles.loading, foregroundColor(color))}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={styles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </button>\n );\n};\n\nexport default Button;\n","export const Color = {\n PRIMARY: \"primary\",\n SECONDARY: \"secondary\",\n TERTIARY: \"tertiary\",\n BRANDED: \"branded\",\n DESTRUCTIVE_PRIMARY: \"destructive-primary\",\n DESTRUCTIVE_SECONDARY: \"destructive-secondary\",\n DESTRUCTIVE_TERTIARY: \"destructive-tertiary\",\n SUCCESS: \"success\",\n GRAY200: \"gray200\",\n GRAY700: \"gray700\",\n GRAY800: \"gray800\",\n GRAY900: \"gray900\",\n WHITE: \"white\",\n INHERIT: \"inherit\",\n} as const;\n\nexport type ColorKeys = keyof typeof Color;\nexport type ColorValue = (typeof Color)[ColorKeys];\n\nexport const Size = {\n SMALL: \"sm\",\n MEDIUM: \"md\",\n LARGE: \"lg\",\n} as const;\n\nexport type SizeKeys = keyof typeof Size;\nexport type SizeValue = (typeof Size)[SizeKeys];\n\nexport const Orientation = {\n HORIZONTAL: \"horizontal\",\n VERTICAL: \"vertical\",\n} as const;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_18uh7_2\",\"destructive700Color\":\"_destructive700Color_18uh7_6\",\"gray900Color\":\"_gray900Color_18uh7_10\",\"whiteColor\":\"_whiteColor_18uh7_14\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_18uh7_19\",\"destructive700Background\":\"_destructive700Background_18uh7_23\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_18uh7_27\",\"success700BackgroundColor\":\"_success700BackgroundColor_18uh7_31\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_18uh7_35\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_18uh7_39\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_18uh7_43\"}","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: ColorValue): string {\n switch (color) {\n case Color.SECONDARY:\n return styles.primary100BackgroundColor;\n case Color.DESTRUCTIVE_PRIMARY:\n return styles.destructive700Background;\n case Color.DESTRUCTIVE_SECONDARY:\n return styles.destructive100BackgroundColor;\n case Color.SUCCESS:\n return styles.success700BackgroundColor;\n case Color.TERTIARY:\n case Color.DESTRUCTIVE_TERTIARY:\n return styles.whiteBackgroundColor;\n case Color.BRANDED:\n return styles.yellow700BackgroundColor;\n default:\n return styles.primary700BackgroundColor;\n }\n}\n","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: ColorValue): string {\n switch (color) {\n case Color.SECONDARY:\n case Color.TERTIARY:\n return styles.primary700Color;\n case Color.DESTRUCTIVE_SECONDARY:\n case Color.DESTRUCTIVE_TERTIARY:\n return styles.destructive700Color;\n case Color.BRANDED:\n return styles.gray900Color;\n default:\n return styles.whiteColor;\n }\n}\n","import { SizeValue } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n size?: SizeValue;\n disabled?: boolean;\n fullWidth?: boolean;\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType | null>(\n {},\n);\n\nButtonGroupContext.displayName = \"ButtonGroupContext\";\n\nexport default ButtonGroupContext;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_6lbba_1\",\"buttonGap\":\"_buttonGap_6lbba_9\",\"fullWidth\":\"_fullWidth_6lbba_50\",\"sm\":\"_sm_6lbba_54\",\"md\":\"_md_6lbba_61\",\"lg\":\"_lg_6lbba_68\",\"icon\":\"_icon_6lbba_75\",\"smIcon\":\"_smIcon_6lbba_79\",\"mdIcon\":\"_mdIcon_6lbba_86\",\"lgIcon\":\"_lgIcon_6lbba_93\",\"textContainer\":\"_textContainer_6lbba_100\",\"loading\":\"_loading_6lbba_115\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_6lbba_1\",\"loadingCircle\":\"_loadingCircle_6lbba_119\",\"buttonText\":\"_buttonText_6lbba_127\",\"buttonTextSmall\":\"_buttonTextSmall_6lbba_134\",\"buttonTextMedium\":\"_buttonTextMedium_6lbba_138\",\"buttonTextLarge\":\"_buttonTextLarge_6lbba_142\"}","import { useMemo, ReactElement, ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { Size, Orientation, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n [Size.SMALL]: styles.smallGap,\n [Size.MEDIUM]: styles.mediumGap,\n [Size.LARGE]: styles.largeGap,\n} as const;\n\n/**\n * Group buttons to render them in a row or column with consistent spacing in between each button\n */\nconst ButtonGroup = ({\n disabled = false,\n fullWidth = false,\n orientation = Orientation.HORIZONTAL,\n size = Size.MEDIUM,\n children,\n}: {\n /**\n * If `true`, all buttons will be disabled.\n *\n * @defaultValue false\n */\n disabled: boolean;\n /**\n * If `true`, all buttons will be full width.\n *\n * @defaultValue false\n */\n fullWidth: boolean;\n /**\n * The orientation of the button group\n *\n * @defaultValue \"horizontal\"\n */\n orientation: \"horizontal\" | \"vertical\";\n /**\n * The size of the button group\n *\n * @defaultValue \"medium\"\n */\n size: SizeValue;\n /**\n * Buttons to be rendered inside the button group\n */\n children?: ReactNode;\n}): ReactElement => {\n const context = useMemo(\n () => ({ disabled, fullWidth, size }),\n [disabled, fullWidth, size],\n );\n\n const classnames = classNames(styles.buttonGroup, gap[size], {\n [styles.horizontal]: orientation === Orientation.HORIZONTAL,\n [styles.vertical]: orientation === Orientation.VERTICAL,\n });\n\n return (\n <ButtonGroupContext.Provider value={context}>\n <div className={classnames}>{children}</div>\n </ButtonGroupContext.Provider>\n );\n};\n\nexport default ButtonGroup;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_184aa_1\",\"horizontal\":\"_horizontal_184aa_6\",\"vertical\":\"_vertical_184aa_10\",\"smallGap\":\"_smallGap_184aa_14\",\"mediumGap\":\"_mediumGap_184aa_18\",\"largeGap\":\"_largeGap_184aa_22\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n children,\n}: {\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n children,\n}: {\n /**\n * The child components to render within MiniActionCard.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":"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","names":["module","classNames","classNames","import_classnames","import_react","React","import_jsx_runtime","classNames","import_react","import_classnames","import_jsx_runtime","classNames","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
package/dist/index.mjs CHANGED
@@ -31,7 +31,7 @@ var require_classnames = __commonJS({
31
31
  "use strict";
32
32
  var hasOwn = {}.hasOwnProperty;
33
33
  var nativeCodeString = "[native code]";
34
- function classNames2() {
34
+ function classNames4() {
35
35
  var classes = [];
36
36
  for (var i = 0; i < arguments.length; i++) {
37
37
  var arg = arguments[i];
@@ -42,7 +42,7 @@ var require_classnames = __commonJS({
42
42
  classes.push(arg);
43
43
  } else if (Array.isArray(arg)) {
44
44
  if (arg.length) {
45
- var inner = classNames2.apply(null, arg);
45
+ var inner = classNames4.apply(null, arg);
46
46
  if (inner) {
47
47
  classes.push(inner);
48
48
  }
@@ -62,14 +62,14 @@ var require_classnames = __commonJS({
62
62
  return classes.join(" ");
63
63
  }
64
64
  if (typeof module !== "undefined" && module.exports) {
65
- classNames2.default = classNames2;
66
- module.exports = classNames2;
65
+ classNames4.default = classNames4;
66
+ module.exports = classNames4;
67
67
  } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
68
68
  define("classnames", [], function() {
69
- return classNames2;
69
+ return classNames4;
70
70
  });
71
71
  } else {
72
- window.classNames = classNames2;
72
+ window.classNames = classNames4;
73
73
  }
74
74
  })();
75
75
  }
@@ -99,23 +99,225 @@ var Avatar = ({
99
99
  };
100
100
  var Avatar_default = Avatar;
101
101
 
102
+ // src/Button/Button.tsx
103
+ var import_classnames2 = __toESM(require_classnames());
104
+
105
+ // src/constants.ts
106
+ var Color = {
107
+ PRIMARY: "primary",
108
+ SECONDARY: "secondary",
109
+ TERTIARY: "tertiary",
110
+ BRANDED: "branded",
111
+ DESTRUCTIVE_PRIMARY: "destructive-primary",
112
+ DESTRUCTIVE_SECONDARY: "destructive-secondary",
113
+ DESTRUCTIVE_TERTIARY: "destructive-tertiary",
114
+ SUCCESS: "success",
115
+ GRAY200: "gray200",
116
+ GRAY700: "gray700",
117
+ GRAY800: "gray800",
118
+ GRAY900: "gray900",
119
+ WHITE: "white",
120
+ INHERIT: "inherit"
121
+ };
122
+ var Size = {
123
+ SMALL: "sm",
124
+ MEDIUM: "md",
125
+ LARGE: "lg"
126
+ };
127
+ var Orientation = {
128
+ HORIZONTAL: "horizontal",
129
+ VERTICAL: "vertical"
130
+ };
131
+
132
+ // css-module:./colors.module.css#css-module
133
+ var colors_module_default = { "primary700Color": "_primary700Color_18uh7_2", "destructive700Color": "_destructive700Color_18uh7_6", "gray900Color": "_gray900Color_18uh7_10", "whiteColor": "_whiteColor_18uh7_14", "primary100BackgroundColor": "_primary100BackgroundColor_18uh7_19", "destructive700Background": "_destructive700Background_18uh7_23", "destructive100BackgroundColor": "_destructive100BackgroundColor_18uh7_27", "success700BackgroundColor": "_success700BackgroundColor_18uh7_31", "whiteBackgroundColor": "_whiteBackgroundColor_18uh7_35", "yellow700BackgroundColor": "_yellow700BackgroundColor_18uh7_39", "primary700BackgroundColor": "_primary700BackgroundColor_18uh7_43" };
134
+
135
+ // src/colors/backgroundColor.ts
136
+ function backgroundColor(color) {
137
+ switch (color) {
138
+ case Color.SECONDARY:
139
+ return colors_module_default.primary100BackgroundColor;
140
+ case Color.DESTRUCTIVE_PRIMARY:
141
+ return colors_module_default.destructive700Background;
142
+ case Color.DESTRUCTIVE_SECONDARY:
143
+ return colors_module_default.destructive100BackgroundColor;
144
+ case Color.SUCCESS:
145
+ return colors_module_default.success700BackgroundColor;
146
+ case Color.TERTIARY:
147
+ case Color.DESTRUCTIVE_TERTIARY:
148
+ return colors_module_default.whiteBackgroundColor;
149
+ case Color.BRANDED:
150
+ return colors_module_default.yellow700BackgroundColor;
151
+ default:
152
+ return colors_module_default.primary700BackgroundColor;
153
+ }
154
+ }
155
+
156
+ // src/colors/foregroundColor.ts
157
+ function foregroundColor(color) {
158
+ switch (color) {
159
+ case Color.SECONDARY:
160
+ case Color.TERTIARY:
161
+ return colors_module_default.primary700Color;
162
+ case Color.DESTRUCTIVE_SECONDARY:
163
+ case Color.DESTRUCTIVE_TERTIARY:
164
+ return colors_module_default.destructive700Color;
165
+ case Color.BRANDED:
166
+ return colors_module_default.gray900Color;
167
+ default:
168
+ return colors_module_default.whiteColor;
169
+ }
170
+ }
171
+
172
+ // src/Button/Button.tsx
173
+ import { useContext } from "react";
174
+
175
+ // src/ButtonGroup/ButtonGroupContext.tsx
176
+ import React from "react";
177
+ var ButtonGroupContext = React.createContext(
178
+ {}
179
+ );
180
+ ButtonGroupContext.displayName = "ButtonGroupContext";
181
+ var ButtonGroupContext_default = ButtonGroupContext;
182
+
183
+ // css-module:./Button.module.css#css-module
184
+ var Button_module_default = { "button": "_button_6lbba_1", "buttonGap": "_buttonGap_6lbba_9", "fullWidth": "_fullWidth_6lbba_50", "sm": "_sm_6lbba_54", "md": "_md_6lbba_61", "lg": "_lg_6lbba_68", "icon": "_icon_6lbba_75", "smIcon": "_smIcon_6lbba_79", "mdIcon": "_mdIcon_6lbba_86", "lgIcon": "_lgIcon_6lbba_93", "textContainer": "_textContainer_6lbba_100", "loading": "_loading_6lbba_115", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_6lbba_1", "loadingCircle": "_loadingCircle_6lbba_119", "buttonText": "_buttonText_6lbba_127", "buttonTextSmall": "_buttonTextSmall_6lbba_134", "buttonTextMedium": "_buttonTextMedium_6lbba_138", "buttonTextLarge": "_buttonTextLarge_6lbba_142" };
185
+
186
+ // src/Button/Button.tsx
187
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
188
+ var textVariant = {
189
+ // Replace with `Typography` once it lands in `syntax-core`
190
+ [Size.SMALL]: Button_module_default.buttonTextSmall,
191
+ [Size.MEDIUM]: Button_module_default.buttonTextMedium,
192
+ [Size.LARGE]: Button_module_default.buttonTextLarge
193
+ };
194
+ var loadingIconSize = {
195
+ [Size.SMALL]: 16,
196
+ [Size.MEDIUM]: 20,
197
+ [Size.LARGE]: 24
198
+ };
199
+ var iconSize = {
200
+ [Size.SMALL]: Button_module_default.smIcon,
201
+ [Size.MEDIUM]: Button_module_default.mdIcon,
202
+ [Size.LARGE]: Button_module_default.lgIcon
203
+ };
204
+ var Button = ({
205
+ text,
206
+ loadingText,
207
+ color = Color.PRIMARY,
208
+ size: sizeProp = Size.MEDIUM,
209
+ accessibilityLabel,
210
+ disabled: disabledProp = false,
211
+ loading = false,
212
+ fullWidth: fullWidthProp = false,
213
+ startIcon: StartIcon,
214
+ endIcon: EndIcon,
215
+ onClick,
216
+ tooltip
217
+ }) => {
218
+ var _a, _b, _c;
219
+ const contextProps = useContext(ButtonGroupContext_default);
220
+ const size = (_a = contextProps == null ? void 0 : contextProps.size) != null ? _a : sizeProp;
221
+ const disabled = (_b = contextProps == null ? void 0 : contextProps.disabled) != null ? _b : disabledProp;
222
+ const fullWidth = (_c = contextProps == null ? void 0 : contextProps.fullWidth) != null ? _c : fullWidthProp;
223
+ return /* @__PURE__ */ jsxs(
224
+ "button",
225
+ {
226
+ "aria-label": accessibilityLabel,
227
+ type: "button",
228
+ title: tooltip,
229
+ disabled: disabled || loading,
230
+ onClick,
231
+ className: (0, import_classnames2.default)(
232
+ Button_module_default.button,
233
+ foregroundColor(color),
234
+ backgroundColor(color),
235
+ Button_module_default[size],
236
+ {
237
+ [Button_module_default.fullWidth]: fullWidth,
238
+ [Button_module_default.buttonGap]: size === Size.LARGE || size === Size.MEDIUM
239
+ }
240
+ ),
241
+ children: [
242
+ !loading && StartIcon && /* @__PURE__ */ jsx2(StartIcon, { className: (0, import_classnames2.default)(Button_module_default.icon, iconSize[size]) }),
243
+ (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx2("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ jsx2("div", { className: (0, import_classnames2.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
244
+ !loading && EndIcon && /* @__PURE__ */ jsx2(EndIcon, { className: (0, import_classnames2.default)(Button_module_default.icon, iconSize[size]) }),
245
+ loading && /* @__PURE__ */ jsx2(
246
+ "svg",
247
+ {
248
+ className: (0, import_classnames2.default)(Button_module_default.loading, foregroundColor(color)),
249
+ viewBox: "22 22 44 44",
250
+ width: loadingIconSize[size],
251
+ height: loadingIconSize[size],
252
+ children: /* @__PURE__ */ jsx2(
253
+ "circle",
254
+ {
255
+ className: Button_module_default.loadingCircle,
256
+ cx: "44",
257
+ cy: "44",
258
+ r: "20.2",
259
+ fill: "none",
260
+ strokeWidth: "3.6"
261
+ }
262
+ )
263
+ }
264
+ )
265
+ ]
266
+ }
267
+ );
268
+ };
269
+ var Button_default = Button;
270
+
271
+ // src/ButtonGroup/ButtonGroup.tsx
272
+ import { useMemo } from "react";
273
+
274
+ // css-module:./ButtonGroup.module.css#css-module
275
+ var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_184aa_1", "horizontal": "_horizontal_184aa_6", "vertical": "_vertical_184aa_10", "smallGap": "_smallGap_184aa_14", "mediumGap": "_mediumGap_184aa_18", "largeGap": "_largeGap_184aa_22" };
276
+
277
+ // src/ButtonGroup/ButtonGroup.tsx
278
+ var import_classnames3 = __toESM(require_classnames());
279
+ import { jsx as jsx3 } from "react/jsx-runtime";
280
+ var gap = {
281
+ [Size.SMALL]: ButtonGroup_module_default.smallGap,
282
+ [Size.MEDIUM]: ButtonGroup_module_default.mediumGap,
283
+ [Size.LARGE]: ButtonGroup_module_default.largeGap
284
+ };
285
+ var ButtonGroup = ({
286
+ disabled = false,
287
+ fullWidth = false,
288
+ orientation = Orientation.HORIZONTAL,
289
+ size = Size.MEDIUM,
290
+ children
291
+ }) => {
292
+ const context = useMemo(
293
+ () => ({ disabled, fullWidth, size }),
294
+ [disabled, fullWidth, size]
295
+ );
296
+ const classnames = (0, import_classnames3.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
297
+ [ButtonGroup_module_default.horizontal]: orientation === Orientation.HORIZONTAL,
298
+ [ButtonGroup_module_default.vertical]: orientation === Orientation.VERTICAL
299
+ });
300
+ return /* @__PURE__ */ jsx3(ButtonGroupContext_default.Provider, { value: context, children: /* @__PURE__ */ jsx3("div", { className: classnames, children }) });
301
+ };
302
+ var ButtonGroup_default = ButtonGroup;
303
+
102
304
  // css-module:./Card.module.css#css-module
103
305
  var Card_module_default = { "card": "_card_hvz2b_1" };
104
306
 
105
307
  // src/Card/Card.tsx
106
- import { jsx as jsx2 } from "react/jsx-runtime";
308
+ import { jsx as jsx4 } from "react/jsx-runtime";
107
309
  var Card = ({
108
310
  children
109
- }) => /* @__PURE__ */ jsx2("div", { className: Card_module_default.card, children });
311
+ }) => /* @__PURE__ */ jsx4("div", { className: Card_module_default.card, children });
110
312
  var Card_default = Card;
111
313
 
112
314
  // css-module:./Divider.module.css#css-module
113
315
  var Divider_module_default = { "divider": "_divider_1ddgq_1" };
114
316
 
115
317
  // src/Divider/Divider.tsx
116
- import { jsx as jsx3 } from "react/jsx-runtime";
318
+ import { jsx as jsx5 } from "react/jsx-runtime";
117
319
  function Divider({}) {
118
- return /* @__PURE__ */ jsx3("hr", { className: Divider_module_default.divider });
320
+ return /* @__PURE__ */ jsx5("hr", { className: Divider_module_default.divider });
119
321
  }
120
322
  Divider.displayName = "Divider";
121
323
 
@@ -123,13 +325,15 @@ Divider.displayName = "Divider";
123
325
  var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
124
326
 
125
327
  // src/MiniActionCard/MiniActionCard.tsx
126
- import { jsx as jsx4 } from "react/jsx-runtime";
328
+ import { jsx as jsx6 } from "react/jsx-runtime";
127
329
  var MiniActionCard = ({
128
330
  children
129
- }) => /* @__PURE__ */ jsx4("div", { className: MiniActionCard_module_default.miniActionCard, children });
331
+ }) => /* @__PURE__ */ jsx6("div", { className: MiniActionCard_module_default.miniActionCard, children });
130
332
  var MiniActionCard_default = MiniActionCard;
131
333
  export {
132
334
  Avatar_default as Avatar,
335
+ Button_default as Button,
336
+ ButtonGroup_default as ButtonGroup,
133
337
  Card_default as Card,
134
338
  Divider,
135
339
  MiniActionCard_default as MiniActionCard
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/classnames/index.js","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * Size of the avatar.\n * sm: 24px, md: 40px, lg: 72px, xl: 128px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n children,\n}: {\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n children,\n}: {\n /**\n * The child components to render within MiniActionCard.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAOA,KAAC,WAAY;AACZ;AAEA,UAAI,SAAS,CAAC,EAAE;AAChB,UAAI,mBAAmB;AAEvB,eAASA,cAAa;AACrB,YAAI,UAAU,CAAC;AAEf,iBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAC1C,cAAI,MAAM,UAAU,CAAC;AACrB,cAAI,CAAC;AAAK;AAEV,cAAI,UAAU,OAAO;AAErB,cAAI,YAAY,YAAY,YAAY,UAAU;AACjD,oBAAQ,KAAK,GAAG;AAAA,UACjB,WAAW,MAAM,QAAQ,GAAG,GAAG;AAC9B,gBAAI,IAAI,QAAQ;AACf,kBAAI,QAAQA,YAAW,MAAM,MAAM,GAAG;AACtC,kBAAI,OAAO;AACV,wBAAQ,KAAK,KAAK;AAAA,cACnB;AAAA,YACD;AAAA,UACD,WAAW,YAAY,UAAU;AAChC,gBAAI,IAAI,aAAa,OAAO,UAAU,YAAY,CAAC,IAAI,SAAS,SAAS,EAAE,SAAS,eAAe,GAAG;AACrG,sBAAQ,KAAK,IAAI,SAAS,CAAC;AAC3B;AAAA,YACD;AAEA,qBAAS,OAAO,KAAK;AACpB,kBAAI,OAAO,KAAK,KAAK,GAAG,KAAK,IAAI,GAAG,GAAG;AACtC,wBAAQ,KAAK,GAAG;AAAA,cACjB;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAEA,eAAO,QAAQ,KAAK,GAAG;AAAA,MACxB;AAEA,UAAI,OAAO,WAAW,eAAe,OAAO,SAAS;AACpD,QAAAA,YAAW,UAAUA;AACrB,eAAO,UAAUA;AAAA,MAClB,WAAW,OAAO,WAAW,cAAc,OAAO,OAAO,QAAQ,YAAY,OAAO,KAAK;AAExF,eAAO,cAAc,CAAC,GAAG,WAAY;AACpC,iBAAOA;AAAA,QACR,CAAC;AAAA,MACF,OAAO;AACN,eAAO,aAAaA;AAAA,MACrB;AAAA,IACD,GAAE;AAAA;AAAA;;;AC3DF,wBAAuB;;;ACAqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,eAAc,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD6BjN;AAvBJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,kBAAAC,SAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC;AAAA;AAAA,EACnD;AAEJ;AAEA,IAAO,iBAAQ;;;AErCyE,IAAO,sBAAQ,EAAC,QAAO,gBAAe;;;ACY3G,gBAAAC,YAAA;AAPnB,IAAM,OAAO,CAAC;AAAA,EACZ;AACF,MAKmB,gBAAAA,KAAC,SAAI,WAAW,oBAAO,MAAO,UAAS;AAE1D,IAAO,eAAQ;;;ACd+E,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI,gBAAAC,YAAA;AADM,SAAR,QAAyB,CAAC,GAA0B;AACzD,SAAO,gBAAAA,KAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc;;;ACTsF,IAAO,gCAAQ,EAAC,kBAAiB,2BAA0B,QAAO,gBAAe;;;ACY1K,gBAAAC,YAAA;AAPnB,IAAM,iBAAiB,CAAC;AAAA,EACtB;AACF,MAKmB,gBAAAA,KAAC,SAAI,WAAW,8BAAO,gBAAiB,UAAS;AAEpE,IAAO,yBAAQ;","names":["classNames","classNames","jsx","jsx","jsx"]}
1
+ {"version":3,"sources":["../../../node_modules/classnames/index.js","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","../src/constants.ts","css-module:./colors.module.css#css-module","../src/colors/backgroundColor.ts","../src/colors/foregroundColor.ts","../src/ButtonGroup/ButtonGroupContext.tsx","css-module:./Button.module.css#css-module","../src/ButtonGroup/ButtonGroup.tsx","css-module:./ButtonGroup.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * Size of the avatar.\n * sm: 24px, md: 40px, lg: 72px, xl: 128px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { useContext, ReactElement } from \"react\";\nimport { Color, ColorValue, Size, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\nimport styles from \"./Button.module.css\";\n\nconst textVariant = {\n // Replace with `Typography` once it lands in `syntax-core`\n [Size.SMALL]: styles.buttonTextSmall,\n [Size.MEDIUM]: styles.buttonTextMedium,\n [Size.LARGE]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 20,\n [Size.LARGE]: 24,\n};\n\nconst iconSize = {\n [Size.SMALL]: styles.smIcon,\n [Size.MEDIUM]: styles.mdIcon,\n [Size.LARGE]: styles.lgIcon,\n};\n\nconst Button = ({\n text,\n loadingText,\n color = Color.PRIMARY,\n size: sizeProp = Size.MEDIUM,\n accessibilityLabel,\n disabled: disabledProp = false,\n loading = false,\n fullWidth: fullWidthProp = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n onClick,\n tooltip,\n}: {\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The text to be displayed inside the button when it is in a loading state\n */\n loadingText?: string;\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: ColorValue;\n /**\n * The size of the button\n *\n * @defaultValue \"medium\"\n */\n size?: SizeValue;\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be in a loading state\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n startIcon?: React.ComponentType<{ className: string }>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n endIcon?: React.ComponentType<{ className: string }>;\n /**\n * The callback to be called when the button is clicked\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n}): ReactElement => {\n const contextProps = useContext(ButtonGroupContext);\n\n const size = contextProps?.size ?? sizeProp;\n const disabled = contextProps?.disabled ?? disabledProp;\n const fullWidth = contextProps?.fullWidth ?? fullWidthProp;\n\n return (\n <button\n aria-label={accessibilityLabel}\n type=\"button\"\n title={tooltip}\n disabled={disabled || loading}\n onClick={onClick}\n className={classNames(\n styles.button,\n foregroundColor(color),\n backgroundColor(color),\n styles[size],\n {\n [styles.fullWidth]: fullWidth,\n [styles.buttonGap]: size === Size.LARGE || size === Size.MEDIUM,\n },\n )}\n >\n {!loading && StartIcon && (\n <StartIcon className={classNames(styles.icon, iconSize[size])} />\n )}\n {((loading && loadingText) || (!loading && text)) && (\n <div className={styles.textContainer}>\n {/* Replace with `Typography` once it lands in `syntax-core` */}\n <div className={classNames(styles.buttonText, textVariant[size])}>\n {loading ? loadingText : text}\n </div>\n </div>\n )}\n {!loading && EndIcon && (\n <EndIcon className={classNames(styles.icon, iconSize[size])} />\n )}\n {loading && (\n <svg\n className={classNames(styles.loading, foregroundColor(color))}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={styles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </button>\n );\n};\n\nexport default Button;\n","export const Color = {\n PRIMARY: \"primary\",\n SECONDARY: \"secondary\",\n TERTIARY: \"tertiary\",\n BRANDED: \"branded\",\n DESTRUCTIVE_PRIMARY: \"destructive-primary\",\n DESTRUCTIVE_SECONDARY: \"destructive-secondary\",\n DESTRUCTIVE_TERTIARY: \"destructive-tertiary\",\n SUCCESS: \"success\",\n GRAY200: \"gray200\",\n GRAY700: \"gray700\",\n GRAY800: \"gray800\",\n GRAY900: \"gray900\",\n WHITE: \"white\",\n INHERIT: \"inherit\",\n} as const;\n\nexport type ColorKeys = keyof typeof Color;\nexport type ColorValue = (typeof Color)[ColorKeys];\n\nexport const Size = {\n SMALL: \"sm\",\n MEDIUM: \"md\",\n LARGE: \"lg\",\n} as const;\n\nexport type SizeKeys = keyof typeof Size;\nexport type SizeValue = (typeof Size)[SizeKeys];\n\nexport const Orientation = {\n HORIZONTAL: \"horizontal\",\n VERTICAL: \"vertical\",\n} as const;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_18uh7_2\",\"destructive700Color\":\"_destructive700Color_18uh7_6\",\"gray900Color\":\"_gray900Color_18uh7_10\",\"whiteColor\":\"_whiteColor_18uh7_14\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_18uh7_19\",\"destructive700Background\":\"_destructive700Background_18uh7_23\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_18uh7_27\",\"success700BackgroundColor\":\"_success700BackgroundColor_18uh7_31\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_18uh7_35\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_18uh7_39\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_18uh7_43\"}","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: ColorValue): string {\n switch (color) {\n case Color.SECONDARY:\n return styles.primary100BackgroundColor;\n case Color.DESTRUCTIVE_PRIMARY:\n return styles.destructive700Background;\n case Color.DESTRUCTIVE_SECONDARY:\n return styles.destructive100BackgroundColor;\n case Color.SUCCESS:\n return styles.success700BackgroundColor;\n case Color.TERTIARY:\n case Color.DESTRUCTIVE_TERTIARY:\n return styles.whiteBackgroundColor;\n case Color.BRANDED:\n return styles.yellow700BackgroundColor;\n default:\n return styles.primary700BackgroundColor;\n }\n}\n","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: ColorValue): string {\n switch (color) {\n case Color.SECONDARY:\n case Color.TERTIARY:\n return styles.primary700Color;\n case Color.DESTRUCTIVE_SECONDARY:\n case Color.DESTRUCTIVE_TERTIARY:\n return styles.destructive700Color;\n case Color.BRANDED:\n return styles.gray900Color;\n default:\n return styles.whiteColor;\n }\n}\n","import { SizeValue } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n size?: SizeValue;\n disabled?: boolean;\n fullWidth?: boolean;\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType | null>(\n {},\n);\n\nButtonGroupContext.displayName = \"ButtonGroupContext\";\n\nexport default ButtonGroupContext;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_6lbba_1\",\"buttonGap\":\"_buttonGap_6lbba_9\",\"fullWidth\":\"_fullWidth_6lbba_50\",\"sm\":\"_sm_6lbba_54\",\"md\":\"_md_6lbba_61\",\"lg\":\"_lg_6lbba_68\",\"icon\":\"_icon_6lbba_75\",\"smIcon\":\"_smIcon_6lbba_79\",\"mdIcon\":\"_mdIcon_6lbba_86\",\"lgIcon\":\"_lgIcon_6lbba_93\",\"textContainer\":\"_textContainer_6lbba_100\",\"loading\":\"_loading_6lbba_115\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_6lbba_1\",\"loadingCircle\":\"_loadingCircle_6lbba_119\",\"buttonText\":\"_buttonText_6lbba_127\",\"buttonTextSmall\":\"_buttonTextSmall_6lbba_134\",\"buttonTextMedium\":\"_buttonTextMedium_6lbba_138\",\"buttonTextLarge\":\"_buttonTextLarge_6lbba_142\"}","import { useMemo, ReactElement, ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { Size, Orientation, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n [Size.SMALL]: styles.smallGap,\n [Size.MEDIUM]: styles.mediumGap,\n [Size.LARGE]: styles.largeGap,\n} as const;\n\n/**\n * Group buttons to render them in a row or column with consistent spacing in between each button\n */\nconst ButtonGroup = ({\n disabled = false,\n fullWidth = false,\n orientation = Orientation.HORIZONTAL,\n size = Size.MEDIUM,\n children,\n}: {\n /**\n * If `true`, all buttons will be disabled.\n *\n * @defaultValue false\n */\n disabled: boolean;\n /**\n * If `true`, all buttons will be full width.\n *\n * @defaultValue false\n */\n fullWidth: boolean;\n /**\n * The orientation of the button group\n *\n * @defaultValue \"horizontal\"\n */\n orientation: \"horizontal\" | \"vertical\";\n /**\n * The size of the button group\n *\n * @defaultValue \"medium\"\n */\n size: SizeValue;\n /**\n * Buttons to be rendered inside the button group\n */\n children?: ReactNode;\n}): ReactElement => {\n const context = useMemo(\n () => ({ disabled, fullWidth, size }),\n [disabled, fullWidth, size],\n );\n\n const classnames = classNames(styles.buttonGroup, gap[size], {\n [styles.horizontal]: orientation === Orientation.HORIZONTAL,\n [styles.vertical]: orientation === Orientation.VERTICAL,\n });\n\n return (\n <ButtonGroupContext.Provider value={context}>\n <div className={classnames}>{children}</div>\n </ButtonGroupContext.Provider>\n );\n};\n\nexport default ButtonGroup;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_184aa_1\",\"horizontal\":\"_horizontal_184aa_6\",\"vertical\":\"_vertical_184aa_10\",\"smallGap\":\"_smallGap_184aa_14\",\"mediumGap\":\"_mediumGap_184aa_18\",\"largeGap\":\"_largeGap_184aa_22\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n children,\n}: {\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n children,\n}: {\n /**\n * The child components to render within MiniActionCard.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":"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","names":["classNames","classNames","import_classnames","jsx","classNames","import_classnames","jsx","classNames","jsx","jsx","jsx"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cambly/syntax-core",
3
- "version": "1.7.0",
3
+ "version": "1.8.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",