@cambly/syntax-core 1.11.0 → 1.13.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 +71 -11
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +65 -4
- package/dist/index.js +57 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +56 -9
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -23,37 +23,43 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css/#css-module-data */
|
|
26
|
-
.
|
|
26
|
+
._primary700Color_1pqzf_2 {
|
|
27
27
|
color: var(--color-base-primary-700);
|
|
28
28
|
}
|
|
29
|
-
.
|
|
29
|
+
._destructive700Color_1pqzf_6 {
|
|
30
30
|
color: var(--color-base-destructive-700);
|
|
31
31
|
}
|
|
32
|
-
.
|
|
32
|
+
._gray700Color_1pqzf_10 {
|
|
33
|
+
color: var(--color-base-gray-700);
|
|
34
|
+
}
|
|
35
|
+
._gray900Color_1pqzf_14 {
|
|
33
36
|
color: var(--color-base-gray-900);
|
|
34
37
|
}
|
|
35
|
-
.
|
|
38
|
+
._whiteColor_1pqzf_18 {
|
|
36
39
|
color: var(--color-base-white);
|
|
37
40
|
}
|
|
38
|
-
.
|
|
41
|
+
._inheritColor_1pqzf_22 {
|
|
42
|
+
color: inherit;
|
|
43
|
+
}
|
|
44
|
+
._primary100BackgroundColor_1pqzf_27 {
|
|
39
45
|
background-color: var(--color-base-primary-100);
|
|
40
46
|
}
|
|
41
|
-
.
|
|
47
|
+
._destructive700Background_1pqzf_31 {
|
|
42
48
|
background-color: var(--color-base-destructive-700);
|
|
43
49
|
}
|
|
44
|
-
.
|
|
50
|
+
._destructive100BackgroundColor_1pqzf_35 {
|
|
45
51
|
background-color: var(--color-base-destructive-100);
|
|
46
52
|
}
|
|
47
|
-
.
|
|
53
|
+
._success700BackgroundColor_1pqzf_39 {
|
|
48
54
|
background-color: var(--color-base-success-700);
|
|
49
55
|
}
|
|
50
|
-
.
|
|
56
|
+
._whiteBackgroundColor_1pqzf_43 {
|
|
51
57
|
background-color: var(--color-base-white);
|
|
52
58
|
}
|
|
53
|
-
.
|
|
59
|
+
._yellow700BackgroundColor_1pqzf_47 {
|
|
54
60
|
background-color: var(--color-extended-yellow-700);
|
|
55
61
|
}
|
|
56
|
-
.
|
|
62
|
+
._primary700BackgroundColor_1pqzf_51 {
|
|
57
63
|
background-color: var(--color-base-primary-700);
|
|
58
64
|
}
|
|
59
65
|
|
|
@@ -211,6 +217,60 @@
|
|
|
211
217
|
margin: 0;
|
|
212
218
|
}
|
|
213
219
|
|
|
220
|
+
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css/#css-module-data */
|
|
221
|
+
._iconButton_dzhn0_1 {
|
|
222
|
+
align-items: center;
|
|
223
|
+
justify-content: center;
|
|
224
|
+
display: flex;
|
|
225
|
+
border: none;
|
|
226
|
+
border-radius: 50%;
|
|
227
|
+
}
|
|
228
|
+
._iconButton_dzhn0_1:hover {
|
|
229
|
+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
|
|
230
|
+
transition-duration: 0.2s;
|
|
231
|
+
cursor: pointer;
|
|
232
|
+
}
|
|
233
|
+
._iconButton_dzhn0_1:focus-visible {
|
|
234
|
+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
235
|
+
box-shadow: 0 0 0 4px #000;
|
|
236
|
+
outline: solid 2px #fff;
|
|
237
|
+
}
|
|
238
|
+
._iconButton_dzhn0_1:active {
|
|
239
|
+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
240
|
+
transform: scale(0.97);
|
|
241
|
+
transition-duration: 0.2s;
|
|
242
|
+
}
|
|
243
|
+
._iconButton_dzhn0_1:disabled {
|
|
244
|
+
filter: opacity(30%);
|
|
245
|
+
background-image: none;
|
|
246
|
+
transform: none;
|
|
247
|
+
cursor: auto;
|
|
248
|
+
}
|
|
249
|
+
._sm_dzhn0_46 {
|
|
250
|
+
height: 32px;
|
|
251
|
+
width: 32px;
|
|
252
|
+
}
|
|
253
|
+
._md_dzhn0_51 {
|
|
254
|
+
height: 40px;
|
|
255
|
+
width: 40px;
|
|
256
|
+
}
|
|
257
|
+
._lg_dzhn0_56 {
|
|
258
|
+
height: 48px;
|
|
259
|
+
width: 48px;
|
|
260
|
+
}
|
|
261
|
+
._smIcon_dzhn0_61 {
|
|
262
|
+
height: 16px !important;
|
|
263
|
+
width: 16px !important;
|
|
264
|
+
}
|
|
265
|
+
._mdIcon_dzhn0_68 {
|
|
266
|
+
height: 20px !important;
|
|
267
|
+
width: 20px !important;
|
|
268
|
+
}
|
|
269
|
+
._lgIcon_dzhn0_75 {
|
|
270
|
+
height: 24px !important;
|
|
271
|
+
width: 24px !important;
|
|
272
|
+
}
|
|
273
|
+
|
|
214
274
|
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css/#css-module-data */
|
|
215
275
|
._miniActionCard_qebkn_1 {
|
|
216
276
|
border-radius: 24px;
|
package/dist/index.css.map
CHANGED
|
@@ -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/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.
|
|
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/IconButton/IconButton.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_1pqzf_2 {\n color: var(--color-base-primary-700);\n}\n\n._destructive700Color_1pqzf_6 {\n color: var(--color-base-destructive-700);\n}\n\n._gray700Color_1pqzf_10 {\n color: var(--color-base-gray-700);\n}\n\n._gray900Color_1pqzf_14 {\n color: var(--color-base-gray-900);\n}\n\n._whiteColor_1pqzf_18 {\n color: var(--color-base-white);\n}\n\n._inheritColor_1pqzf_22 {\n color: inherit;\n}\n\n/* Background Colors */\n._primary100BackgroundColor_1pqzf_27 {\n background-color: var(--color-base-primary-100);\n}\n\n._destructive700Background_1pqzf_31 {\n background-color: var(--color-base-destructive-700);\n}\n\n._destructive100BackgroundColor_1pqzf_35 {\n background-color: var(--color-base-destructive-100);\n}\n\n._success700BackgroundColor_1pqzf_39 {\n background-color: var(--color-base-success-700);\n}\n\n._whiteBackgroundColor_1pqzf_43 {\n background-color: var(--color-base-white);\n}\n\n._yellow700BackgroundColor_1pqzf_47 {\n background-color: var(--color-extended-yellow-700);\n}\n\n._primary700BackgroundColor_1pqzf_51 {\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","._iconButton_dzhn0_1 {\n align-items: center;\n justify-content: center;\n display: flex;\n border: none;\n border-radius: 50%;\n}\n\n._iconButton_dzhn0_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._iconButton_dzhn0_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._iconButton_dzhn0_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._iconButton_dzhn0_1:disabled {\n filter: opacity(30%);\n background-image: none;\n transform: none;\n cursor: auto;\n}\n\n._sm_dzhn0_46 {\n height: 32px;\n width: 32px;\n}\n\n._md_dzhn0_51 {\n height: 40px;\n width: 40px;\n}\n\n._lg_dzhn0_56 {\n height: 48px;\n width: 48px;\n}\n\n._smIcon_dzhn0_61 {\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n height: 16px !important;\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n width: 16px !important;\n}\n\n._mdIcon_dzhn0_68 {\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n height: 20px !important;\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n width: 20px !important;\n}\n\n._lgIcon_dzhn0_75 {\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n height: 24px !important;\n /* stylelint-disable-next-line declaration-no-important -- Need to use !important to override MUI icon sizes */\n width: 24px !important;\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;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;;;ACnDF;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;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;;;AC9EF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -15,13 +15,20 @@ declare const Avatar: ({ src, accessibilityLabel, size, }: {
|
|
|
15
15
|
accessibilityLabel: string;
|
|
16
16
|
/**
|
|
17
17
|
* Size of the avatar.
|
|
18
|
-
*
|
|
18
|
+
*
|
|
19
|
+
* * `sm`: 24px
|
|
20
|
+
* * `md`: 40px
|
|
21
|
+
* * `lg`: 72px
|
|
22
|
+
* * `xl`: 128px
|
|
19
23
|
*
|
|
20
24
|
* @defaultValue `md`
|
|
21
25
|
*/
|
|
22
26
|
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
23
27
|
}) => JSX.Element;
|
|
24
28
|
|
|
29
|
+
/**
|
|
30
|
+
* Button is a clickable element that is used to perform an action.
|
|
31
|
+
*/
|
|
25
32
|
declare const Button: ({ text, loadingText, color, size: sizeProp, accessibilityLabel, disabled: disabledProp, loading, fullWidth: fullWidthProp, startIcon: StartIcon, endIcon: EndIcon, onClick, tooltip, }: {
|
|
26
33
|
/**
|
|
27
34
|
* The text to be displayed inside the button
|
|
@@ -40,7 +47,11 @@ declare const Button: ({ text, loadingText, color, size: sizeProp, accessibility
|
|
|
40
47
|
/**
|
|
41
48
|
* The size of the button
|
|
42
49
|
*
|
|
43
|
-
*
|
|
50
|
+
* * `sm`: 32px
|
|
51
|
+
* * `md`: 40px
|
|
52
|
+
* * `lg`: 48px
|
|
53
|
+
*
|
|
54
|
+
* @defaultValue "md"
|
|
44
55
|
*/
|
|
45
56
|
size?: "sm" | "md" | "lg" | undefined;
|
|
46
57
|
/**
|
|
@@ -112,7 +123,11 @@ declare const ButtonGroup: ({ disabled, fullWidth, orientation, size, children,
|
|
|
112
123
|
/**
|
|
113
124
|
* The size of the button group
|
|
114
125
|
*
|
|
115
|
-
*
|
|
126
|
+
* * `sm`: 32px
|
|
127
|
+
* * `md`: 40px
|
|
128
|
+
* * `lg`: 48px
|
|
129
|
+
*
|
|
130
|
+
* @defaultValue "md"
|
|
116
131
|
*/
|
|
117
132
|
size?: "sm" | "md" | "lg" | undefined;
|
|
118
133
|
/**
|
|
@@ -139,6 +154,52 @@ declare namespace Divider {
|
|
|
139
154
|
var displayName: string;
|
|
140
155
|
}
|
|
141
156
|
|
|
157
|
+
/**
|
|
158
|
+
* IconButton is a clickable element that is used to perform an action.
|
|
159
|
+
*/
|
|
160
|
+
declare const IconButton: ({ accessibilityLabel, color, disabled: disabledProp, icon: Icon, size: sizeProp, tooltip, onClick, }: {
|
|
161
|
+
/**
|
|
162
|
+
* The color of the button
|
|
163
|
+
*
|
|
164
|
+
* @defaultValue "primary"
|
|
165
|
+
*/
|
|
166
|
+
color?: "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "gray200" | "gray700" | "gray800" | "gray900" | "white" | "inherit" | undefined;
|
|
167
|
+
/**
|
|
168
|
+
* The size of the button
|
|
169
|
+
*
|
|
170
|
+
* * `sm`: 32px
|
|
171
|
+
* * `md`: 40px
|
|
172
|
+
* * `lg`: 48px
|
|
173
|
+
*
|
|
174
|
+
* @defaultValue "md"
|
|
175
|
+
*/
|
|
176
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
177
|
+
/**
|
|
178
|
+
* The label to be used for accessibility
|
|
179
|
+
*/
|
|
180
|
+
accessibilityLabel?: string | undefined;
|
|
181
|
+
/**
|
|
182
|
+
* The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
|
|
183
|
+
*/
|
|
184
|
+
icon: React.ComponentType<{
|
|
185
|
+
className: string;
|
|
186
|
+
}>;
|
|
187
|
+
/**
|
|
188
|
+
* If `true`, the button will be disabled
|
|
189
|
+
*
|
|
190
|
+
* @defaultValue false
|
|
191
|
+
*/
|
|
192
|
+
disabled?: boolean | undefined;
|
|
193
|
+
/**
|
|
194
|
+
* The callback to be called when the button is clicked
|
|
195
|
+
*/
|
|
196
|
+
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
197
|
+
/**
|
|
198
|
+
* The tooltip to be displayed when the user hovers over the button
|
|
199
|
+
*/
|
|
200
|
+
tooltip?: string | undefined;
|
|
201
|
+
}) => ReactElement;
|
|
202
|
+
|
|
142
203
|
/**
|
|
143
204
|
* MiniActionCard is component that alerts users to a call to action.
|
|
144
205
|
*/
|
|
@@ -149,4 +210,4 @@ declare const MiniActionCard: ({ children, }: {
|
|
|
149
210
|
children: JSX.Element;
|
|
150
211
|
}) => JSX.Element;
|
|
151
212
|
|
|
152
|
-
export { Avatar, Button, ButtonGroup, Card, Divider, MiniActionCard };
|
|
213
|
+
export { Avatar, Button, ButtonGroup, Card, Divider, IconButton, 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
|
|
40
|
+
function classNames5() {
|
|
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 =
|
|
51
|
+
var inner = classNames5.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
|
-
|
|
72
|
-
module2.exports =
|
|
71
|
+
classNames5.default = classNames5;
|
|
72
|
+
module2.exports = classNames5;
|
|
73
73
|
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
74
74
|
define("classnames", [], function() {
|
|
75
|
-
return
|
|
75
|
+
return classNames5;
|
|
76
76
|
});
|
|
77
77
|
} else {
|
|
78
|
-
window.classNames =
|
|
78
|
+
window.classNames = classNames5;
|
|
79
79
|
}
|
|
80
80
|
})();
|
|
81
81
|
}
|
|
@@ -89,6 +89,7 @@ __export(src_exports, {
|
|
|
89
89
|
ButtonGroup: () => ButtonGroup_default,
|
|
90
90
|
Card: () => Card_default,
|
|
91
91
|
Divider: () => Divider,
|
|
92
|
+
IconButton: () => IconButton_default,
|
|
92
93
|
MiniActionCard: () => MiniActionCard_default
|
|
93
94
|
});
|
|
94
95
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -121,7 +122,7 @@ var Avatar_default = Avatar;
|
|
|
121
122
|
var import_classnames2 = __toESM(require_classnames());
|
|
122
123
|
|
|
123
124
|
// css-module:./colors.module.css#css-module
|
|
124
|
-
var colors_module_default = { "primary700Color": "
|
|
125
|
+
var colors_module_default = { "primary700Color": "_primary700Color_1pqzf_2", "destructive700Color": "_destructive700Color_1pqzf_6", "gray700Color": "_gray700Color_1pqzf_10", "gray900Color": "_gray900Color_1pqzf_14", "whiteColor": "_whiteColor_1pqzf_18", "inheritColor": "_inheritColor_1pqzf_22", "primary100BackgroundColor": "_primary100BackgroundColor_1pqzf_27", "destructive700Background": "_destructive700Background_1pqzf_31", "destructive100BackgroundColor": "_destructive100BackgroundColor_1pqzf_35", "success700BackgroundColor": "_success700BackgroundColor_1pqzf_39", "whiteBackgroundColor": "_whiteBackgroundColor_1pqzf_43", "yellow700BackgroundColor": "_yellow700BackgroundColor_1pqzf_47", "primary700BackgroundColor": "_primary700BackgroundColor_1pqzf_51" };
|
|
125
126
|
|
|
126
127
|
// src/colors/backgroundColor.ts
|
|
127
128
|
function backgroundColor(color) {
|
|
@@ -311,14 +312,60 @@ function Divider({}) {
|
|
|
311
312
|
}
|
|
312
313
|
Divider.displayName = "Divider";
|
|
313
314
|
|
|
315
|
+
// src/IconButton/IconButton.tsx
|
|
316
|
+
var import_classnames4 = __toESM(require_classnames());
|
|
317
|
+
var import_react4 = require("react");
|
|
318
|
+
|
|
319
|
+
// css-module:./IconButton.module.css#css-module
|
|
320
|
+
var IconButton_module_default = { "iconButton": "_iconButton_dzhn0_1", "sm": "_sm_dzhn0_46", "md": "_md_dzhn0_51", "lg": "_lg_dzhn0_56", "smIcon": "_smIcon_dzhn0_61", "mdIcon": "_mdIcon_dzhn0_68", "lgIcon": "_lgIcon_dzhn0_75" };
|
|
321
|
+
|
|
322
|
+
// src/IconButton/IconButton.tsx
|
|
323
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
324
|
+
var iconSize2 = {
|
|
325
|
+
["sm"]: IconButton_module_default.smIcon,
|
|
326
|
+
["md"]: IconButton_module_default.mdIcon,
|
|
327
|
+
["lg"]: IconButton_module_default.lgIcon
|
|
328
|
+
};
|
|
329
|
+
var IconButton = ({
|
|
330
|
+
accessibilityLabel,
|
|
331
|
+
color = "primary",
|
|
332
|
+
disabled: disabledProp = false,
|
|
333
|
+
icon: Icon,
|
|
334
|
+
size: sizeProp = "md",
|
|
335
|
+
tooltip,
|
|
336
|
+
onClick
|
|
337
|
+
}) => {
|
|
338
|
+
const contextProps = (0, import_react4.useContext)(ButtonGroupContext_default);
|
|
339
|
+
const size = (contextProps == null ? void 0 : contextProps.size) || sizeProp;
|
|
340
|
+
const disabled = (contextProps == null ? void 0 : contextProps.disabled) || disabledProp;
|
|
341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
342
|
+
"button",
|
|
343
|
+
{
|
|
344
|
+
"aria-label": accessibilityLabel,
|
|
345
|
+
type: "button",
|
|
346
|
+
title: tooltip,
|
|
347
|
+
disabled,
|
|
348
|
+
onClick,
|
|
349
|
+
className: (0, import_classnames4.default)(
|
|
350
|
+
IconButton_module_default.iconButton,
|
|
351
|
+
foregroundColor(color),
|
|
352
|
+
backgroundColor(color),
|
|
353
|
+
IconButton_module_default[size]
|
|
354
|
+
),
|
|
355
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: iconSize2[size] })
|
|
356
|
+
}
|
|
357
|
+
);
|
|
358
|
+
};
|
|
359
|
+
var IconButton_default = IconButton;
|
|
360
|
+
|
|
314
361
|
// css-module:./MiniActionCard.module.css#css-module
|
|
315
362
|
var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
|
|
316
363
|
|
|
317
364
|
// src/MiniActionCard/MiniActionCard.tsx
|
|
318
|
-
var
|
|
365
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
319
366
|
var MiniActionCard = ({
|
|
320
367
|
children
|
|
321
|
-
}) => /* @__PURE__ */ (0,
|
|
368
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
|
|
322
369
|
var MiniActionCard_default = MiniActionCard;
|
|
323
370
|
// Annotate the CommonJS export names for ESM import in node:
|
|
324
371
|
0 && (module.exports = {
|
|
@@ -327,6 +374,7 @@ var MiniActionCard_default = MiniActionCard;
|
|
|
327
374
|
ButtonGroup,
|
|
328
375
|
Card,
|
|
329
376
|
Divider,
|
|
377
|
+
IconButton,
|
|
330
378
|
MiniActionCard
|
|
331
379
|
});
|
|
332
380
|
/*! Bundled license information:
|
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","../src/Button/Button.tsx","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, Size } 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 [\"sm\"]: styles.buttonTextSmall,\n [\"md\"]: styles.buttonTextMedium,\n [\"lg\"]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n [\"sm\"]: 16,\n [\"md\"]: 20,\n [\"lg\"]: 24,\n};\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\nconst Button = ({\n text,\n loadingText,\n color = \"primary\",\n size: sizeProp = \"md\",\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?: (typeof Color)[number];\n /**\n * The size of the button\n *\n * @defaultValue \"medium\"\n */\n size?: (typeof Size)[number];\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 === \"lg\" || size === \"md\",\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","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 } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n return styles.primary100BackgroundColor;\n case \"destructive-primary\":\n return styles.destructive700Background;\n case \"destructive-secondary\":\n return styles.destructive100BackgroundColor;\n case \"success\":\n return styles.success700BackgroundColor;\n case \"tertiary\":\n case \"destructive-tertiary\":\n return styles.whiteBackgroundColor;\n case \"branded\":\n return styles.yellow700BackgroundColor;\n default:\n return styles.primary700BackgroundColor;\n }\n}\n","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n case \"tertiary\":\n return styles.primary700Color;\n case \"destructive-secondary\":\n case \"destructive-tertiary\":\n return styles.destructive700Color;\n case \"branded\":\n return styles.gray900Color;\n default:\n return styles.whiteColor;\n }\n}\n","import { Size } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n size?: (typeof Size)[number];\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 } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n [\"sm\"]: styles.smallGap,\n [\"md\"]: styles.mediumGap,\n [\"lg\"]: 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 = \"horizontal\",\n size = \"md\",\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?: (typeof Size)[number];\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 === \"horizontal\",\n [styles.vertical]: 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"]}
|
|
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","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","../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module","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 IconButton from \"./IconButton/IconButton\";\nimport MiniActionCard from \"./MiniActionCard/MiniActionCard\";\n\nexport {\n Avatar,\n Button,\n ButtonGroup,\n Card,\n Divider,\n IconButton,\n MiniActionCard,\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 *\n * * `sm`: 24px\n * * `md`: 40px\n * * `lg`: 72px\n * * `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, Size } 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 [\"sm\"]: styles.buttonTextSmall,\n [\"md\"]: styles.buttonTextMedium,\n [\"lg\"]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n [\"sm\"]: 16,\n [\"md\"]: 20,\n [\"lg\"]: 24,\n};\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * Button is a clickable element that is used to perform an action.\n */\nconst Button = ({\n text,\n loadingText,\n color = \"primary\",\n size: sizeProp = \"md\",\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?: (typeof Color)[number];\n /**\n * The size of the button\n *\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\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 === \"lg\" || size === \"md\",\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","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_1pqzf_2\",\"destructive700Color\":\"_destructive700Color_1pqzf_6\",\"gray700Color\":\"_gray700Color_1pqzf_10\",\"gray900Color\":\"_gray900Color_1pqzf_14\",\"whiteColor\":\"_whiteColor_1pqzf_18\",\"inheritColor\":\"_inheritColor_1pqzf_22\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_1pqzf_27\",\"destructive700Background\":\"_destructive700Background_1pqzf_31\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_1pqzf_35\",\"success700BackgroundColor\":\"_success700BackgroundColor_1pqzf_39\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_1pqzf_43\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_1pqzf_47\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_1pqzf_51\"}","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n return styles.primary100BackgroundColor;\n case \"destructive-primary\":\n return styles.destructive700Background;\n case \"destructive-secondary\":\n return styles.destructive100BackgroundColor;\n case \"success\":\n return styles.success700BackgroundColor;\n case \"tertiary\":\n case \"destructive-tertiary\":\n return styles.whiteBackgroundColor;\n case \"branded\":\n return styles.yellow700BackgroundColor;\n default:\n return styles.primary700BackgroundColor;\n }\n}\n","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n case \"tertiary\":\n return styles.primary700Color;\n case \"destructive-secondary\":\n case \"destructive-tertiary\":\n return styles.destructive700Color;\n case \"branded\":\n return styles.gray900Color;\n default:\n return styles.whiteColor;\n }\n}\n","import { Size } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n size?: (typeof Size)[number];\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 } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n [\"sm\"]: styles.smallGap,\n [\"md\"]: styles.mediumGap,\n [\"lg\"]: 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 = \"horizontal\",\n size = \"md\",\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 * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\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 === \"horizontal\",\n [styles.vertical]: 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 classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { ReactElement, useContext } from \"react\";\nimport { Color, Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * IconButton is a clickable element that is used to perform an action.\n */\nconst IconButton = ({\n accessibilityLabel,\n color = \"primary\",\n disabled: disabledProp = false,\n icon: Icon,\n size: sizeProp = \"md\",\n tooltip,\n onClick,\n}: {\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: (typeof Color)[number];\n /**\n * The size of the button\n *\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n icon: React.ComponentType<{ className: string }>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\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\n return (\n <button\n aria-label={accessibilityLabel}\n type=\"button\"\n title={tooltip}\n disabled={disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColor(color),\n backgroundColor(color),\n styles[size],\n )}\n >\n <Icon className={iconSize[size]} />\n </button>\n );\n};\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_dzhn0_1\",\"sm\":\"_sm_dzhn0_46\",\"md\":\"_md_dzhn0_51\",\"lg\":\"_lg_dzhn0_56\",\"smIcon\":\"_smIcon_dzhn0_61\",\"mdIcon\":\"_mdIcon_dzhn0_68\",\"lgIcon\":\"_lgIcon_dzhn0_75\"}","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_classnames","import_react","import_jsx_runtime","iconSize","classNames","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
|
|
34
|
+
function classNames5() {
|
|
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 =
|
|
45
|
+
var inner = classNames5.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
|
-
|
|
66
|
-
module.exports =
|
|
65
|
+
classNames5.default = classNames5;
|
|
66
|
+
module.exports = classNames5;
|
|
67
67
|
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
68
68
|
define("classnames", [], function() {
|
|
69
|
-
return
|
|
69
|
+
return classNames5;
|
|
70
70
|
});
|
|
71
71
|
} else {
|
|
72
|
-
window.classNames =
|
|
72
|
+
window.classNames = classNames5;
|
|
73
73
|
}
|
|
74
74
|
})();
|
|
75
75
|
}
|
|
@@ -103,7 +103,7 @@ var Avatar_default = Avatar;
|
|
|
103
103
|
var import_classnames2 = __toESM(require_classnames());
|
|
104
104
|
|
|
105
105
|
// css-module:./colors.module.css#css-module
|
|
106
|
-
var colors_module_default = { "primary700Color": "
|
|
106
|
+
var colors_module_default = { "primary700Color": "_primary700Color_1pqzf_2", "destructive700Color": "_destructive700Color_1pqzf_6", "gray700Color": "_gray700Color_1pqzf_10", "gray900Color": "_gray900Color_1pqzf_14", "whiteColor": "_whiteColor_1pqzf_18", "inheritColor": "_inheritColor_1pqzf_22", "primary100BackgroundColor": "_primary100BackgroundColor_1pqzf_27", "destructive700Background": "_destructive700Background_1pqzf_31", "destructive100BackgroundColor": "_destructive100BackgroundColor_1pqzf_35", "success700BackgroundColor": "_success700BackgroundColor_1pqzf_39", "whiteBackgroundColor": "_whiteBackgroundColor_1pqzf_43", "yellow700BackgroundColor": "_yellow700BackgroundColor_1pqzf_47", "primary700BackgroundColor": "_primary700BackgroundColor_1pqzf_51" };
|
|
107
107
|
|
|
108
108
|
// src/colors/backgroundColor.ts
|
|
109
109
|
function backgroundColor(color) {
|
|
@@ -293,14 +293,60 @@ function Divider({}) {
|
|
|
293
293
|
}
|
|
294
294
|
Divider.displayName = "Divider";
|
|
295
295
|
|
|
296
|
+
// src/IconButton/IconButton.tsx
|
|
297
|
+
var import_classnames4 = __toESM(require_classnames());
|
|
298
|
+
import { useContext as useContext2 } from "react";
|
|
299
|
+
|
|
300
|
+
// css-module:./IconButton.module.css#css-module
|
|
301
|
+
var IconButton_module_default = { "iconButton": "_iconButton_dzhn0_1", "sm": "_sm_dzhn0_46", "md": "_md_dzhn0_51", "lg": "_lg_dzhn0_56", "smIcon": "_smIcon_dzhn0_61", "mdIcon": "_mdIcon_dzhn0_68", "lgIcon": "_lgIcon_dzhn0_75" };
|
|
302
|
+
|
|
303
|
+
// src/IconButton/IconButton.tsx
|
|
304
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
305
|
+
var iconSize2 = {
|
|
306
|
+
["sm"]: IconButton_module_default.smIcon,
|
|
307
|
+
["md"]: IconButton_module_default.mdIcon,
|
|
308
|
+
["lg"]: IconButton_module_default.lgIcon
|
|
309
|
+
};
|
|
310
|
+
var IconButton = ({
|
|
311
|
+
accessibilityLabel,
|
|
312
|
+
color = "primary",
|
|
313
|
+
disabled: disabledProp = false,
|
|
314
|
+
icon: Icon,
|
|
315
|
+
size: sizeProp = "md",
|
|
316
|
+
tooltip,
|
|
317
|
+
onClick
|
|
318
|
+
}) => {
|
|
319
|
+
const contextProps = useContext2(ButtonGroupContext_default);
|
|
320
|
+
const size = (contextProps == null ? void 0 : contextProps.size) || sizeProp;
|
|
321
|
+
const disabled = (contextProps == null ? void 0 : contextProps.disabled) || disabledProp;
|
|
322
|
+
return /* @__PURE__ */ jsx6(
|
|
323
|
+
"button",
|
|
324
|
+
{
|
|
325
|
+
"aria-label": accessibilityLabel,
|
|
326
|
+
type: "button",
|
|
327
|
+
title: tooltip,
|
|
328
|
+
disabled,
|
|
329
|
+
onClick,
|
|
330
|
+
className: (0, import_classnames4.default)(
|
|
331
|
+
IconButton_module_default.iconButton,
|
|
332
|
+
foregroundColor(color),
|
|
333
|
+
backgroundColor(color),
|
|
334
|
+
IconButton_module_default[size]
|
|
335
|
+
),
|
|
336
|
+
children: /* @__PURE__ */ jsx6(Icon, { className: iconSize2[size] })
|
|
337
|
+
}
|
|
338
|
+
);
|
|
339
|
+
};
|
|
340
|
+
var IconButton_default = IconButton;
|
|
341
|
+
|
|
296
342
|
// css-module:./MiniActionCard.module.css#css-module
|
|
297
343
|
var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
|
|
298
344
|
|
|
299
345
|
// src/MiniActionCard/MiniActionCard.tsx
|
|
300
|
-
import { jsx as
|
|
346
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
301
347
|
var MiniActionCard = ({
|
|
302
348
|
children
|
|
303
|
-
}) => /* @__PURE__ */
|
|
349
|
+
}) => /* @__PURE__ */ jsx7("div", { className: MiniActionCard_module_default.miniActionCard, children });
|
|
304
350
|
var MiniActionCard_default = MiniActionCard;
|
|
305
351
|
export {
|
|
306
352
|
Avatar_default as Avatar,
|
|
@@ -308,6 +354,7 @@ export {
|
|
|
308
354
|
ButtonGroup_default as ButtonGroup,
|
|
309
355
|
Card_default as Card,
|
|
310
356
|
Divider,
|
|
357
|
+
IconButton_default as IconButton,
|
|
311
358
|
MiniActionCard_default as MiniActionCard
|
|
312
359
|
};
|
|
313
360
|
/*! Bundled license information:
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","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, Size } 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 [\"sm\"]: styles.buttonTextSmall,\n [\"md\"]: styles.buttonTextMedium,\n [\"lg\"]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n [\"sm\"]: 16,\n [\"md\"]: 20,\n [\"lg\"]: 24,\n};\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\nconst Button = ({\n text,\n loadingText,\n color = \"primary\",\n size: sizeProp = \"md\",\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?: (typeof Color)[number];\n /**\n * The size of the button\n *\n * @defaultValue \"medium\"\n */\n size?: (typeof Size)[number];\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 === \"lg\" || size === \"md\",\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","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 } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n return styles.primary100BackgroundColor;\n case \"destructive-primary\":\n return styles.destructive700Background;\n case \"destructive-secondary\":\n return styles.destructive100BackgroundColor;\n case \"success\":\n return styles.success700BackgroundColor;\n case \"tertiary\":\n case \"destructive-tertiary\":\n return styles.whiteBackgroundColor;\n case \"branded\":\n return styles.yellow700BackgroundColor;\n default:\n return styles.primary700BackgroundColor;\n }\n}\n","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n case \"tertiary\":\n return styles.primary700Color;\n case \"destructive-secondary\":\n case \"destructive-tertiary\":\n return styles.destructive700Color;\n case \"branded\":\n return styles.gray900Color;\n default:\n return styles.whiteColor;\n }\n}\n","import { Size } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n size?: (typeof Size)[number];\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 } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n [\"sm\"]: styles.smallGap,\n [\"md\"]: styles.mediumGap,\n [\"lg\"]: 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 = \"horizontal\",\n size = \"md\",\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?: (typeof Size)[number];\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 === \"horizontal\",\n [styles.vertical]: 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"]}
|
|
1
|
+
{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","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","../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module","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 *\n * * `sm`: 24px\n * * `md`: 40px\n * * `lg`: 72px\n * * `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, Size } 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 [\"sm\"]: styles.buttonTextSmall,\n [\"md\"]: styles.buttonTextMedium,\n [\"lg\"]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n [\"sm\"]: 16,\n [\"md\"]: 20,\n [\"lg\"]: 24,\n};\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * Button is a clickable element that is used to perform an action.\n */\nconst Button = ({\n text,\n loadingText,\n color = \"primary\",\n size: sizeProp = \"md\",\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?: (typeof Color)[number];\n /**\n * The size of the button\n *\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\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 === \"lg\" || size === \"md\",\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","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_1pqzf_2\",\"destructive700Color\":\"_destructive700Color_1pqzf_6\",\"gray700Color\":\"_gray700Color_1pqzf_10\",\"gray900Color\":\"_gray900Color_1pqzf_14\",\"whiteColor\":\"_whiteColor_1pqzf_18\",\"inheritColor\":\"_inheritColor_1pqzf_22\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_1pqzf_27\",\"destructive700Background\":\"_destructive700Background_1pqzf_31\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_1pqzf_35\",\"success700BackgroundColor\":\"_success700BackgroundColor_1pqzf_39\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_1pqzf_43\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_1pqzf_47\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_1pqzf_51\"}","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n return styles.primary100BackgroundColor;\n case \"destructive-primary\":\n return styles.destructive700Background;\n case \"destructive-secondary\":\n return styles.destructive100BackgroundColor;\n case \"success\":\n return styles.success700BackgroundColor;\n case \"tertiary\":\n case \"destructive-tertiary\":\n return styles.whiteBackgroundColor;\n case \"branded\":\n return styles.yellow700BackgroundColor;\n default:\n return styles.primary700BackgroundColor;\n }\n}\n","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n case \"tertiary\":\n return styles.primary700Color;\n case \"destructive-secondary\":\n case \"destructive-tertiary\":\n return styles.destructive700Color;\n case \"branded\":\n return styles.gray900Color;\n default:\n return styles.whiteColor;\n }\n}\n","import { Size } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n size?: (typeof Size)[number];\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 } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n [\"sm\"]: styles.smallGap,\n [\"md\"]: styles.mediumGap,\n [\"lg\"]: 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 = \"horizontal\",\n size = \"md\",\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 * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\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 === \"horizontal\",\n [styles.vertical]: 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 classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { ReactElement, useContext } from \"react\";\nimport { Color, Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * IconButton is a clickable element that is used to perform an action.\n */\nconst IconButton = ({\n accessibilityLabel,\n color = \"primary\",\n disabled: disabledProp = false,\n icon: Icon,\n size: sizeProp = \"md\",\n tooltip,\n onClick,\n}: {\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: (typeof Color)[number];\n /**\n * The size of the button\n *\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n icon: React.ComponentType<{ className: string }>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\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\n return (\n <button\n aria-label={accessibilityLabel}\n type=\"button\"\n title={tooltip}\n disabled={disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColor(color),\n backgroundColor(color),\n styles[size],\n )}\n >\n <Icon className={iconSize[size]} />\n </button>\n );\n};\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_dzhn0_1\",\"sm\":\"_sm_dzhn0_46\",\"md\":\"_md_dzhn0_51\",\"lg\":\"_lg_dzhn0_56\",\"smIcon\":\"_smIcon_dzhn0_61\",\"mdIcon\":\"_mdIcon_dzhn0_68\",\"lgIcon\":\"_lgIcon_dzhn0_75\"}","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","import_classnames","useContext","jsx","iconSize","useContext","classNames","jsx"]}
|