@cambly/syntax-core 9.5.0 → 9.7.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/Avatar/Avatar.css +28 -0
- package/dist/Avatar/Avatar.css.map +1 -0
- package/dist/Avatar/Avatar.d.ts +27 -0
- package/dist/Avatar/Avatar.js +8 -0
- package/dist/Avatar/Avatar.js.map +1 -0
- package/dist/Avatar/Avatar.mjs +8 -0
- package/dist/Avatar/Avatar.mjs.map +1 -0
- package/dist/Badge/Badge.css +1870 -0
- package/dist/Badge/Badge.css.map +1 -0
- package/dist/Badge/Badge.d.ts +25 -0
- package/dist/Badge/Badge.js +13 -0
- package/dist/Badge/Badge.js.map +1 -0
- package/dist/Badge/Badge.mjs +13 -0
- package/dist/Badge/Badge.mjs.map +1 -0
- package/dist/Box/Box.css +1783 -0
- package/dist/Box/Box.css.map +1 -0
- package/dist/Box/Box.d.ts +371 -0
- package/dist/Box/Box.js +11 -0
- package/dist/Box/Box.js.map +1 -0
- package/dist/Box/Box.mjs +11 -0
- package/dist/Box/Box.mjs.map +1 -0
- package/dist/Button/Button.css +1956 -0
- package/dist/Button/Button.css.map +1 -0
- package/dist/Button/Button.d.ts +85 -0
- package/dist/Button/Button.js +21 -0
- package/dist/Button/Button.js.map +1 -0
- package/dist/Button/Button.mjs +21 -0
- package/dist/Button/Button.mjs.map +1 -0
- package/dist/Button/constants/iconSize.css +92 -0
- package/dist/Button/constants/iconSize.css.map +1 -0
- package/dist/Button/constants/iconSize.d.ts +7 -0
- package/dist/Button/constants/iconSize.js +8 -0
- package/dist/Button/constants/iconSize.js.map +1 -0
- package/dist/Button/constants/iconSize.mjs +8 -0
- package/dist/Button/constants/iconSize.mjs.map +1 -0
- package/dist/Button/constants/loadingIconSize.d.ts +7 -0
- package/dist/Button/constants/loadingIconSize.js +8 -0
- package/dist/Button/constants/loadingIconSize.js.map +1 -0
- package/dist/Button/constants/loadingIconSize.mjs +8 -0
- package/dist/Button/constants/loadingIconSize.mjs.map +1 -0
- package/dist/Button/constants/textVariant.d.ts +7 -0
- package/dist/Button/constants/textVariant.js +8 -0
- package/dist/Button/constants/textVariant.js.map +1 -0
- package/dist/Button/constants/textVariant.mjs +8 -0
- package/dist/Button/constants/textVariant.mjs.map +1 -0
- package/dist/ButtonGroup/ButtonGroup.css +20 -0
- package/dist/ButtonGroup/ButtonGroup.css.map +1 -0
- package/dist/ButtonGroup/ButtonGroup.d.ts +29 -0
- package/dist/ButtonGroup/ButtonGroup.js +8 -0
- package/dist/ButtonGroup/ButtonGroup.js.map +1 -0
- package/dist/ButtonGroup/ButtonGroup.mjs +8 -0
- package/dist/ButtonGroup/ButtonGroup.mjs.map +1 -0
- package/dist/Card/Card.css +1783 -0
- package/dist/Card/Card.css.map +1 -0
- package/dist/Card/Card.d.ts +27 -0
- package/dist/Card/Card.js +12 -0
- package/dist/Card/Card.js.map +1 -0
- package/dist/Card/Card.mjs +12 -0
- package/dist/Card/Card.mjs.map +1 -0
- package/dist/Checkbox/Checkbox.css +313 -0
- package/dist/Checkbox/Checkbox.css.map +1 -0
- package/dist/Checkbox/Checkbox.d.ts +48 -0
- package/dist/Checkbox/Checkbox.js +14 -0
- package/dist/Checkbox/Checkbox.js.map +1 -0
- package/dist/Checkbox/Checkbox.mjs +14 -0
- package/dist/Checkbox/Checkbox.mjs.map +1 -0
- package/dist/Chip/Chip.css +1902 -0
- package/dist/Chip/Chip.css.map +1 -0
- package/dist/Chip/Chip.d.ts +45 -0
- package/dist/Chip/Chip.js +14 -0
- package/dist/Chip/Chip.js.map +1 -0
- package/dist/Chip/Chip.mjs +14 -0
- package/dist/Chip/Chip.mjs.map +1 -0
- package/dist/Divider/Divider.css +10 -0
- package/dist/Divider/Divider.css.map +1 -0
- package/dist/Divider/Divider.d.ts +9 -0
- package/dist/Divider/Divider.js +8 -0
- package/dist/Divider/Divider.js.map +1 -0
- package/dist/Divider/Divider.mjs +8 -0
- package/dist/Divider/Divider.mjs.map +1 -0
- package/dist/Heading/Heading.css +248 -0
- package/dist/Heading/Heading.css.map +1 -0
- package/dist/Heading/Heading.d.ts +52 -0
- package/dist/Heading/Heading.js +11 -0
- package/dist/Heading/Heading.js.map +1 -0
- package/dist/Heading/Heading.mjs +11 -0
- package/dist/Heading/Heading.mjs.map +1 -0
- package/dist/IconButton/IconButton.css +227 -0
- package/dist/IconButton/IconButton.css.map +1 -0
- package/dist/IconButton/IconButton.d.ts +55 -0
- package/dist/IconButton/IconButton.js +13 -0
- package/dist/IconButton/IconButton.js.map +1 -0
- package/dist/IconButton/IconButton.mjs +13 -0
- package/dist/IconButton/IconButton.mjs.map +1 -0
- package/dist/LinkButton/LinkButton.css +353 -0
- package/dist/LinkButton/LinkButton.css.map +1 -0
- package/dist/LinkButton/LinkButton.d.ts +72 -0
- package/dist/LinkButton/LinkButton.js +17 -0
- package/dist/LinkButton/LinkButton.js.map +1 -0
- package/dist/LinkButton/LinkButton.mjs +17 -0
- package/dist/LinkButton/LinkButton.mjs.map +1 -0
- package/dist/Modal/FocusTrap.d.ts +10 -0
- package/dist/Modal/FocusTrap.js +8 -0
- package/dist/Modal/FocusTrap.js.map +1 -0
- package/dist/Modal/FocusTrap.mjs +8 -0
- package/dist/Modal/FocusTrap.mjs.map +1 -0
- package/dist/Modal/Layer.css +1783 -0
- package/dist/Modal/Layer.css.map +1 -0
- package/dist/Modal/Layer.d.ts +8 -0
- package/dist/Modal/Layer.js +12 -0
- package/dist/Modal/Layer.js.map +1 -0
- package/dist/Modal/Layer.mjs +12 -0
- package/dist/Modal/Layer.mjs.map +1 -0
- package/dist/Modal/Modal.css +1898 -0
- package/dist/Modal/Modal.css.map +1 -0
- package/dist/Modal/Modal.d.ts +113 -0
- package/dist/Modal/Modal.js +17 -0
- package/dist/Modal/Modal.js.map +1 -0
- package/dist/Modal/Modal.mjs +17 -0
- package/dist/Modal/Modal.mjs.map +1 -0
- package/dist/Modal/StopScroll.d.ts +7 -0
- package/dist/Modal/StopScroll.js +8 -0
- package/dist/Modal/StopScroll.js.map +1 -0
- package/dist/Modal/StopScroll.mjs +8 -0
- package/dist/Modal/StopScroll.mjs.map +1 -0
- package/dist/RadioButton/RadioButton.css +318 -0
- package/dist/RadioButton/RadioButton.css.map +1 -0
- package/dist/RadioButton/RadioButton.d.ts +60 -0
- package/dist/RadioButton/RadioButton.js +14 -0
- package/dist/RadioButton/RadioButton.js.map +1 -0
- package/dist/RadioButton/RadioButton.mjs +14 -0
- package/dist/RadioButton/RadioButton.mjs.map +1 -0
- package/dist/SelectList/SelectList.css +335 -0
- package/dist/SelectList/SelectList.css.map +1 -0
- package/dist/SelectList/SelectList.d.ts +72 -0
- package/dist/SelectList/SelectList.js +15 -0
- package/dist/SelectList/SelectList.js.map +1 -0
- package/dist/SelectList/SelectList.mjs +15 -0
- package/dist/SelectList/SelectList.mjs.map +1 -0
- package/dist/SelectList/SelectOption.d.ts +10 -0
- package/dist/SelectList/SelectOption.js +8 -0
- package/dist/SelectList/SelectOption.js.map +1 -0
- package/dist/SelectList/SelectOption.mjs +8 -0
- package/dist/SelectList/SelectOption.mjs.map +1 -0
- package/dist/TapArea/TapArea.css +53 -0
- package/dist/TapArea/TapArea.css.map +1 -0
- package/dist/TapArea/TapArea.d.ts +53 -0
- package/dist/TapArea/TapArea.js +10 -0
- package/dist/TapArea/TapArea.js.map +1 -0
- package/dist/TapArea/TapArea.mjs +10 -0
- package/dist/TapArea/TapArea.mjs.map +1 -0
- package/dist/TextField/TextField.css +1913 -0
- package/dist/TextField/TextField.css.map +1 -0
- package/dist/TextField/TextField.d.ts +68 -0
- package/dist/TextField/TextField.js +14 -0
- package/dist/TextField/TextField.js.map +1 -0
- package/dist/TextField/TextField.mjs +14 -0
- package/dist/TextField/TextField.mjs.map +1 -0
- package/dist/Typography/Typography.css +248 -0
- package/dist/Typography/Typography.css.map +1 -0
- package/dist/Typography/Typography.d.ts +83 -0
- package/dist/Typography/Typography.js +10 -0
- package/dist/Typography/Typography.js.map +1 -0
- package/dist/Typography/Typography.mjs +10 -0
- package/dist/Typography/Typography.mjs.map +1 -0
- package/dist/__chunks/2JWMSFS7.js +31 -0
- package/dist/__chunks/2JWMSFS7.js.map +1 -0
- package/dist/__chunks/2O6FDRTF.js +7 -0
- package/dist/__chunks/2O6FDRTF.js.map +1 -0
- package/dist/__chunks/2PHVTRWC.js +86 -0
- package/dist/__chunks/2PHVTRWC.js.map +1 -0
- package/dist/__chunks/37CQV3RS.js +111 -0
- package/dist/__chunks/37CQV3RS.js.map +1 -0
- package/dist/__chunks/3PCHHAIY.mjs +7 -0
- package/dist/__chunks/3PCHHAIY.mjs.map +1 -0
- package/dist/__chunks/3VUMTAUX.js +68 -0
- package/dist/__chunks/3VUMTAUX.js.map +1 -0
- package/dist/__chunks/42YPEAFS.js +70 -0
- package/dist/__chunks/42YPEAFS.js.map +1 -0
- package/dist/__chunks/4PWSK5GI.js +15 -0
- package/dist/__chunks/4PWSK5GI.js.map +1 -0
- package/dist/__chunks/5AR53MHD.js +1 -0
- package/dist/__chunks/5AR53MHD.js.map +1 -0
- package/dist/__chunks/5DBWL6IK.js +12 -0
- package/dist/__chunks/5DBWL6IK.js.map +1 -0
- package/dist/__chunks/5R6HCJP6.mjs +68 -0
- package/dist/__chunks/5R6HCJP6.mjs.map +1 -0
- package/dist/__chunks/6VWFOSQZ.js +14 -0
- package/dist/__chunks/6VWFOSQZ.js.map +1 -0
- package/dist/__chunks/A7UVLRKG.mjs +15 -0
- package/dist/__chunks/A7UVLRKG.mjs.map +1 -0
- package/dist/__chunks/AFINOME7.js +17 -0
- package/dist/__chunks/AFINOME7.js.map +1 -0
- package/dist/__chunks/AGAHNSZM.js +127 -0
- package/dist/__chunks/AGAHNSZM.js.map +1 -0
- package/dist/__chunks/AMBZXKUQ.mjs +12 -0
- package/dist/__chunks/AMBZXKUQ.mjs.map +1 -0
- package/dist/__chunks/BCWLWS7W.mjs +74 -0
- package/dist/__chunks/BCWLWS7W.mjs.map +1 -0
- package/dist/__chunks/BJXYKZMK.mjs +53 -0
- package/dist/__chunks/BJXYKZMK.mjs.map +1 -0
- package/dist/__chunks/BSFWQWVJ.js +36 -0
- package/dist/__chunks/BSFWQWVJ.js.map +1 -0
- package/dist/__chunks/BSWWGQAS.js +111 -0
- package/dist/__chunks/BSWWGQAS.js.map +1 -0
- package/dist/__chunks/BWTLHCW3.mjs +111 -0
- package/dist/__chunks/BWTLHCW3.mjs.map +1 -0
- package/dist/__chunks/CATJI2RJ.js +26 -0
- package/dist/__chunks/CATJI2RJ.js.map +1 -0
- package/dist/__chunks/CGGEM6XS.mjs +96 -0
- package/dist/__chunks/CGGEM6XS.mjs.map +1 -0
- package/dist/__chunks/CPBWDVD4.mjs +110 -0
- package/dist/__chunks/CPBWDVD4.mjs.map +1 -0
- package/dist/__chunks/CQ2HIJ62.js +35 -0
- package/dist/__chunks/CQ2HIJ62.js.map +1 -0
- package/dist/__chunks/CUDAH5IW.mjs +38 -0
- package/dist/__chunks/CUDAH5IW.mjs.map +1 -0
- package/dist/__chunks/D24RSGYP.js +7 -0
- package/dist/__chunks/D24RSGYP.js.map +1 -0
- package/dist/__chunks/DVVFHZBW.mjs +120 -0
- package/dist/__chunks/DVVFHZBW.mjs.map +1 -0
- package/dist/__chunks/EKJ4XOIM.mjs +12 -0
- package/dist/__chunks/EKJ4XOIM.mjs.map +1 -0
- package/dist/__chunks/ERJ5XXDH.js +96 -0
- package/dist/__chunks/ERJ5XXDH.js.map +1 -0
- package/dist/__chunks/ERXGNP37.js +7 -0
- package/dist/__chunks/ERXGNP37.js.map +1 -0
- package/dist/__chunks/F3ZST4RL.js +74 -0
- package/dist/__chunks/F3ZST4RL.js.map +1 -0
- package/dist/__chunks/FCX7QDZS.mjs +94 -0
- package/dist/__chunks/FCX7QDZS.mjs.map +1 -0
- package/dist/__chunks/FOTKCGZZ.js +53 -0
- package/dist/__chunks/FOTKCGZZ.js.map +1 -0
- package/dist/__chunks/FUBK3VZO.js +28 -0
- package/dist/__chunks/FUBK3VZO.js.map +1 -0
- package/dist/__chunks/FWVHWU47.mjs +7 -0
- package/dist/__chunks/FWVHWU47.mjs.map +1 -0
- package/dist/__chunks/G4DDTGDI.js +31 -0
- package/dist/__chunks/G4DDTGDI.js.map +1 -0
- package/dist/__chunks/GPS2XNQI.js +120 -0
- package/dist/__chunks/GPS2XNQI.js.map +1 -0
- package/dist/__chunks/GVNDZZAU.mjs +14 -0
- package/dist/__chunks/GVNDZZAU.mjs.map +1 -0
- package/dist/__chunks/HAZN2FCY.mjs +28 -0
- package/dist/__chunks/HAZN2FCY.mjs.map +1 -0
- package/dist/__chunks/HOUO3WV6.js +14 -0
- package/dist/__chunks/HOUO3WV6.js.map +1 -0
- package/dist/__chunks/HQVZUEWO.js +22 -0
- package/dist/__chunks/HQVZUEWO.js.map +1 -0
- package/dist/__chunks/IXDA4ZXP.mjs +1 -0
- package/dist/__chunks/IXDA4ZXP.mjs.map +1 -0
- package/dist/__chunks/JSEHOGL7.mjs +7 -0
- package/dist/__chunks/JSEHOGL7.mjs.map +1 -0
- package/dist/__chunks/LJHH6KUW.js +28 -0
- package/dist/__chunks/LJHH6KUW.js.map +1 -0
- package/dist/__chunks/LKQ7PJ4S.mjs +229 -0
- package/dist/__chunks/LKQ7PJ4S.mjs.map +1 -0
- package/dist/__chunks/LULBCTQR.js +38 -0
- package/dist/__chunks/LULBCTQR.js.map +1 -0
- package/dist/__chunks/LZSDWT4M.mjs +110 -0
- package/dist/__chunks/LZSDWT4M.mjs.map +1 -0
- package/dist/__chunks/M6YFAP6P.mjs +28 -0
- package/dist/__chunks/M6YFAP6P.mjs.map +1 -0
- package/dist/__chunks/MX7C572C.mjs +36 -0
- package/dist/__chunks/MX7C572C.mjs.map +1 -0
- package/dist/__chunks/MZEIZAZH.mjs +35 -0
- package/dist/__chunks/MZEIZAZH.mjs.map +1 -0
- package/dist/__chunks/OGJDUOWP.js +94 -0
- package/dist/__chunks/OGJDUOWP.js.map +1 -0
- package/dist/__chunks/OQ26OWU4.mjs +111 -0
- package/dist/__chunks/OQ26OWU4.mjs.map +1 -0
- package/dist/__chunks/PGVLU6C3.mjs +70 -0
- package/dist/__chunks/PGVLU6C3.mjs.map +1 -0
- package/dist/__chunks/PYNS67IV.js +229 -0
- package/dist/__chunks/PYNS67IV.js.map +1 -0
- package/dist/__chunks/Q2TIB7ZC.mjs +26 -0
- package/dist/__chunks/Q2TIB7ZC.mjs.map +1 -0
- package/dist/__chunks/R6CDK4GP.mjs +31 -0
- package/dist/__chunks/R6CDK4GP.mjs.map +1 -0
- package/dist/__chunks/RRE7PRE5.mjs +86 -0
- package/dist/__chunks/RRE7PRE5.mjs.map +1 -0
- package/dist/__chunks/RSU3GDHB.mjs +73 -0
- package/dist/__chunks/RSU3GDHB.mjs.map +1 -0
- package/dist/__chunks/RVT6EXR3.mjs +31 -0
- package/dist/__chunks/RVT6EXR3.mjs.map +1 -0
- package/dist/__chunks/SAEVPDUP.js +12 -0
- package/dist/__chunks/SAEVPDUP.js.map +1 -0
- package/dist/__chunks/SXTRSFG5.mjs +14 -0
- package/dist/__chunks/SXTRSFG5.mjs.map +1 -0
- package/dist/__chunks/TKYRBLSM.js +110 -0
- package/dist/__chunks/TKYRBLSM.js.map +1 -0
- package/dist/__chunks/TPMQI44L.js +7 -0
- package/dist/__chunks/TPMQI44L.js.map +1 -0
- package/dist/__chunks/UCMB6MFN.mjs +17 -0
- package/dist/__chunks/UCMB6MFN.mjs.map +1 -0
- package/dist/__chunks/UNIBFDXV.js +73 -0
- package/dist/__chunks/UNIBFDXV.js.map +1 -0
- package/dist/__chunks/WCEOAOUO.mjs +127 -0
- package/dist/__chunks/WCEOAOUO.mjs.map +1 -0
- package/dist/__chunks/WJDAVT5R.mjs +7 -0
- package/dist/__chunks/WJDAVT5R.mjs.map +1 -0
- package/dist/__chunks/X74O4HUS.js +110 -0
- package/dist/__chunks/X74O4HUS.js.map +1 -0
- package/dist/__chunks/XFKGXL73.mjs +14 -0
- package/dist/__chunks/XFKGXL73.mjs.map +1 -0
- package/dist/__chunks/XN5AALLC.mjs +22 -0
- package/dist/__chunks/XN5AALLC.mjs.map +1 -0
- package/dist/__chunks/YJ7YDIGB.js +14 -0
- package/dist/__chunks/YJ7YDIGB.js.map +1 -0
- package/dist/colors/allColors.d.ts +3 -0
- package/dist/colors/allColors.js +58 -0
- package/dist/colors/allColors.js.map +1 -0
- package/dist/colors/allColors.mjs +58 -0
- package/dist/colors/allColors.mjs.map +1 -0
- package/dist/colors/backgroundColor.css +167 -0
- package/dist/colors/backgroundColor.css.map +1 -0
- package/dist/colors/backgroundColor.d.ts +5 -0
- package/dist/colors/backgroundColor.js +10 -0
- package/dist/colors/backgroundColor.js.map +1 -0
- package/dist/colors/backgroundColor.mjs +10 -0
- package/dist/colors/backgroundColor.mjs.map +1 -0
- package/dist/colors/foregroundColor.css +167 -0
- package/dist/colors/foregroundColor.css.map +1 -0
- package/dist/colors/foregroundColor.d.ts +5 -0
- package/dist/colors/foregroundColor.js +10 -0
- package/dist/colors/foregroundColor.js.map +1 -0
- package/dist/colors/foregroundColor.mjs +10 -0
- package/dist/colors/foregroundColor.mjs.map +1 -0
- package/dist/colors/foregroundTypographyColor.d.ts +5 -0
- package/dist/colors/foregroundTypographyColor.js +8 -0
- package/dist/colors/foregroundTypographyColor.js.map +1 -0
- package/dist/colors/foregroundTypographyColor.mjs +8 -0
- package/dist/colors/foregroundTypographyColor.mjs.map +1 -0
- package/dist/constants.d.ts +4 -0
- package/dist/constants.js +26 -0
- package/dist/constants.js.map +1 -0
- package/dist/constants.mjs +26 -0
- package/dist/constants.mjs.map +1 -0
- package/dist/index.css +9 -8
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +21 -1250
- package/dist/index.js +38 -1676
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +70 -1682
- package/dist/index.mjs.map +1 -1
- package/dist/useFocusVisible.d.ts +5 -0
- package/dist/useFocusVisible.js +8 -0
- package/dist/useFocusVisible.js.map +1 -0
- package/dist/useFocusVisible.mjs +8 -0
- package/dist/useFocusVisible.mjs.map +1 -0
- package/dist/useIsHydrated.d.ts +3 -0
- package/dist/useIsHydrated.js +8 -0
- package/dist/useIsHydrated.js.map +1 -0
- package/dist/useIsHydrated.mjs +8 -0
- package/dist/useIsHydrated.mjs.map +1 -0
- package/package.json +4 -4
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
|
+
|
|
3
|
+
var _PYNS67IVjs = require('./PYNS67IV.js');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _F3ZST4RLjs = require('./F3ZST4RL.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
|
|
10
|
+
|
|
11
|
+
// src/TextField/TextField.tsx
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var _react = require('react');
|
|
15
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
16
|
+
|
|
17
|
+
// css-module:./TextField.module.css#css-module
|
|
18
|
+
var TextField_module_default = { "textfield": "_textfield_cltsv_1", "label": "_label_cltsv_21", "sm": "_sm_cltsv_25", "md": "_md_cltsv_30", "lg": "_lg_cltsv_35", "inputError": "_inputError_cltsv_40" };
|
|
19
|
+
|
|
20
|
+
// src/TextField/TextField.tsx
|
|
21
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
22
|
+
function TextField({
|
|
23
|
+
autoComplete,
|
|
24
|
+
"data-testid": dataTestId,
|
|
25
|
+
disabled: disabledProp = false,
|
|
26
|
+
errorText = "",
|
|
27
|
+
helperText = "",
|
|
28
|
+
id,
|
|
29
|
+
label,
|
|
30
|
+
onChange,
|
|
31
|
+
placeholder = "",
|
|
32
|
+
size = "md",
|
|
33
|
+
type = "text",
|
|
34
|
+
value = ""
|
|
35
|
+
}) {
|
|
36
|
+
const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
|
|
37
|
+
const disabled = !isHydrated || disabledProp;
|
|
38
|
+
const reactId = _react.useId.call(void 0, );
|
|
39
|
+
const inputId = id != null ? id : reactId;
|
|
40
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
41
|
+
_PYNS67IVjs.Box_default,
|
|
42
|
+
{
|
|
43
|
+
display: "flex",
|
|
44
|
+
direction: "column",
|
|
45
|
+
gap: 2,
|
|
46
|
+
width: "100%",
|
|
47
|
+
dangerouslySetInlineStyle: {
|
|
48
|
+
__style: {
|
|
49
|
+
opacity: disabled ? 0.5 : 1
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
children: [
|
|
53
|
+
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYNS67IVjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _F3ZST4RLjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
|
|
54
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
55
|
+
"input",
|
|
56
|
+
{
|
|
57
|
+
autoComplete,
|
|
58
|
+
className: _classnames2.default.call(void 0, TextField_module_default.textfield, TextField_module_default[size], {
|
|
59
|
+
[TextField_module_default.inputError]: errorText
|
|
60
|
+
}),
|
|
61
|
+
"data-testid": dataTestId,
|
|
62
|
+
disabled,
|
|
63
|
+
id: inputId,
|
|
64
|
+
type,
|
|
65
|
+
onChange,
|
|
66
|
+
placeholder,
|
|
67
|
+
value
|
|
68
|
+
}
|
|
69
|
+
),
|
|
70
|
+
(helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYNS67IVjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
71
|
+
_F3ZST4RLjs.Typography_default,
|
|
72
|
+
{
|
|
73
|
+
size: 100,
|
|
74
|
+
color: errorText ? "destructive-primary" : "gray700",
|
|
75
|
+
children: errorText || helperText
|
|
76
|
+
}
|
|
77
|
+
) })
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
exports.TextField = TextField;
|
|
86
|
+
//# sourceMappingURL=2PHVTRWC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;AD8FxQ,SAcQ,KAdR;AAhFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GA4DiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,WAAW,yBAAO,WAAW,yBAAO,IAAI,GAAG;AAAA,cACpD,CAAC,yBAAO,UAAU,GAAG;AAAA,YACvB,CAAC;AAAA,YACD,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ","sourcesContent":["import React, {\n type ReactElement,\n type HTMLInputTypeAttribute,\n useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n autoComplete,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText = \"\",\n helperText = \"\",\n id,\n label,\n onChange,\n placeholder = \"\",\n size = \"md\",\n type = \"text\",\n value = \"\",\n}: {\n /**\n * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n *\n * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n */\n autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n /**\n * A data-testid to make querying for the TextField easier.\n */\n \"data-testid\"?: string;\n /**\n * If true, the TextField will be disabled.\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Text shown below TextField if there is an input error.\n */\n errorText?: string;\n /**\n * Informative helper text shown below TextField\n */\n helperText?: string;\n /**\n * TextField id, if not provided, a unique id will be generated\n */\n id?: string;\n /**\n * TextField visible label\n */\n label: string;\n /**\n * The callback to be called the input changes\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Optional TextField placeholder text\n */\n placeholder?: string;\n /**\n * Size of the TextField\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /**\n * Input type of the TextField\n *\n * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value of the TextField\n */\n value: string;\n}): ReactElement {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const reactId = useId();\n const inputId = id ?? reactId;\n\n return (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={2}\n width=\"100%\"\n dangerouslySetInlineStyle={{\n __style: {\n opacity: disabled ? 0.5 : 1,\n },\n }}\n >\n {label && (\n <label className={styles.label} htmlFor={inputId}>\n <Box paddingX={1}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n )}\n <input\n autoComplete={autoComplete}\n className={classNames(styles.textfield, styles[size], {\n [styles.inputError]: errorText,\n })}\n data-testid={dataTestId}\n disabled={disabled}\n id={inputId}\n type={type}\n onChange={onChange}\n placeholder={placeholder}\n value={value}\n />\n {(helperText || errorText) && (\n <Box paddingX={1}>\n <Typography\n size={100}\n color={errorText ? \"destructive-primary\" : \"gray700\"}\n >\n {errorText || helperText}\n </Typography>\n </Box>\n )}\n </Box>\n );\n}\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_cltsv_1\",\"label\":\"_label_cltsv_21\",\"sm\":\"_sm_cltsv_25\",\"md\":\"_md_cltsv_30\",\"lg\":\"_lg_cltsv_35\",\"inputError\":\"_inputError_cltsv_40\"}"]}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
|
+
|
|
3
|
+
var _TPMQI44Ljs = require('./TPMQI44L.js');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
var _LULBCTQRjs = require('./LULBCTQR.js');
|
|
11
|
+
|
|
12
|
+
// src/TapArea/TapArea.tsx
|
|
13
|
+
var _react = require('react');
|
|
14
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
15
|
+
|
|
16
|
+
// css-module:./TapArea.module.css#css-module
|
|
17
|
+
var TapArea_module_default = { "tapArea": "_tapArea_g6gkz_1", "fullWidth": "_fullWidth_g6gkz_5", "disabled": "_disabled_g6gkz_9", "enabled": "_enabled_g6gkz_16", "overlay": "_overlay_g6gkz_29", "hoveredOrFocussed": "_hoveredOrFocussed_g6gkz_39" };
|
|
18
|
+
|
|
19
|
+
// src/TapArea/TapArea.tsx
|
|
20
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
21
|
+
function reducer(state, action) {
|
|
22
|
+
switch (action.type) {
|
|
23
|
+
case "BLUR":
|
|
24
|
+
return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { focussed: false });
|
|
25
|
+
case "FOCUS":
|
|
26
|
+
return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { focussed: true });
|
|
27
|
+
case "MOUSE_ENTER":
|
|
28
|
+
return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { hovered: true });
|
|
29
|
+
case "MOUSE_LEAVE":
|
|
30
|
+
return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { hovered: false });
|
|
31
|
+
default:
|
|
32
|
+
return state;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
var TapArea = _react.forwardRef.call(void 0,
|
|
36
|
+
({
|
|
37
|
+
children,
|
|
38
|
+
accessibilityLabel,
|
|
39
|
+
"data-testid": dataTestId,
|
|
40
|
+
disabled: disabledProp = false,
|
|
41
|
+
fullWidth = true,
|
|
42
|
+
onClick,
|
|
43
|
+
rounding = "none",
|
|
44
|
+
tabIndex = 0
|
|
45
|
+
}, ref) => {
|
|
46
|
+
const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
|
|
47
|
+
const disabled = !isHydrated || disabledProp;
|
|
48
|
+
const [{ hovered, focussed }, dispatch] = _react.useReducer.call(void 0, reducer, {
|
|
49
|
+
hovered: false,
|
|
50
|
+
focussed: false
|
|
51
|
+
});
|
|
52
|
+
const handleClick = (event) => {
|
|
53
|
+
if (disabled) {
|
|
54
|
+
} else {
|
|
55
|
+
event.currentTarget.blur();
|
|
56
|
+
onClick(event);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const handleKeyDown = (event) => {
|
|
60
|
+
if (disabled)
|
|
61
|
+
return;
|
|
62
|
+
if (event.key === "Enter" || event.key === " " || event.key === "Space") {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
onClick(event);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const isHoveredOrFocussed = !disabled && (hovered || focussed);
|
|
68
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
"aria-disabled": disabled,
|
|
72
|
+
"aria-label": accessibilityLabel,
|
|
73
|
+
className: _classnames2.default.call(void 0,
|
|
74
|
+
TapArea_module_default.tapArea,
|
|
75
|
+
TapArea_module_default[`${disabled ? "disabled" : "enabled"}`],
|
|
76
|
+
fullWidth && TapArea_module_default.fullWidth,
|
|
77
|
+
isHoveredOrFocussed && TapArea_module_default.hoveredOrFocussed
|
|
78
|
+
),
|
|
79
|
+
"data-testid": dataTestId,
|
|
80
|
+
onClick: handleClick,
|
|
81
|
+
onKeyDown: handleKeyDown,
|
|
82
|
+
onMouseEnter: () => dispatch({ type: "MOUSE_ENTER" }),
|
|
83
|
+
onMouseLeave: () => dispatch({ type: "MOUSE_LEAVE" }),
|
|
84
|
+
onFocus: () => dispatch({ type: "FOCUS" }),
|
|
85
|
+
onBlur: () => dispatch({ type: "BLUR" }),
|
|
86
|
+
ref,
|
|
87
|
+
role: "button",
|
|
88
|
+
tabIndex: disabled ? void 0 : tabIndex,
|
|
89
|
+
children: [
|
|
90
|
+
!disabled && (hovered || focussed) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
className: _classnames2.default.call(void 0,
|
|
94
|
+
TapArea_module_default.overlay,
|
|
95
|
+
rounding !== "none" && _TPMQI44Ljs.rounding_module_default[`rounding${rounding}`]
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
),
|
|
99
|
+
children
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
TapArea.displayName = "TapArea";
|
|
106
|
+
var TapArea_default = TapArea;
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
exports.TapArea_default = TapArea_default;
|
|
111
|
+
//# sourceMappingURL=37CQV3RS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgC,YAAY,kBAAkB;AAC9D,OAAO,gBAAgB;;;ACDuE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;ADyHlT,SAqBI,KArBJ;AArEN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,EACb,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,QAChC;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,uBAAO;AAAA,gBACP,aAAa,UAAU,wBAAe,WAAW,UAAU;AAAA,cAC7D;AAAA;AAAA,UACF;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ","sourcesContent":["import React, { type ReactNode, forwardRef, useReducer } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TapAreaProps = {\n /**\n * The children to be rendered inside the tap area.\n */\n children?: ReactNode;\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * Test id for the tap area\n */\n \"data-testid\"?: string;\n /**\n * If `true`, the tap area will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * If `true`, the tap area will be full width\n */\n fullWidth?: boolean;\n /**\n * The callback to be called when the tap area is clicked\n */\n onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n /**\n * Border radius of the tap area.\n *\n * * `none`: 0px\n * * `sm`: 8px\n * * `md`: 12px\n * * `lg`: 16px\n * * `xl`: 32px\n * * `full`: 999px\n *\n * @defaultValue \"none\"\n */\n rounding?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"full\" | \"none\";\n /**\n * The tab index of the tap area\n */\n tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n state: {\n hovered: boolean;\n focussed: boolean;\n },\n action: {\n type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n },\n) {\n switch (action.type) {\n case \"BLUR\":\n return { ...state, focussed: false };\n case \"FOCUS\":\n return { ...state, focussed: true };\n case \"MOUSE_ENTER\":\n return { ...state, hovered: true };\n case \"MOUSE_LEAVE\":\n return { ...state, hovered: false };\n default:\n return state;\n }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n (\n {\n children,\n accessibilityLabel,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n fullWidth = true,\n onClick,\n rounding = \"none\",\n tabIndex = 0,\n }: TapAreaProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n hovered: false,\n focussed: false,\n });\n\n const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n undefined;\n } else {\n event.currentTarget.blur();\n onClick(event);\n }\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n event,\n ) => {\n if (disabled) return;\n if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n event.preventDefault();\n onClick(event);\n }\n };\n\n const isHoveredOrFocussed = !disabled && (hovered || focussed);\n\n return (\n <div\n aria-disabled={disabled}\n aria-label={accessibilityLabel}\n className={classNames(\n styles.tapArea,\n styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n fullWidth && styles.fullWidth,\n isHoveredOrFocussed && styles.hoveredOrFocussed,\n )}\n data-testid={dataTestId}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onMouseEnter={() => dispatch({ type: \"MOUSE_ENTER\" })}\n onMouseLeave={() => dispatch({ type: \"MOUSE_LEAVE\" })}\n onFocus={() => dispatch({ type: \"FOCUS\" })}\n onBlur={() => dispatch({ type: \"BLUR\" })}\n ref={ref}\n role=\"button\"\n tabIndex={disabled ? undefined : tabIndex}\n >\n {!disabled && (hovered || focussed) && (\n <div\n className={classNames(\n styles.overlay,\n rounding !== \"none\" && roundingStyles[`rounding${rounding}`],\n )}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// css-module:../rounding.module.css#css-module
|
|
2
|
+
var rounding_module_default = { "roundingsm": "_roundingsm_1bo6p_2", "roundingmd": "_roundingmd_1bo6p_6", "roundinglg": "_roundinglg_1bo6p_10", "roundingxl": "_roundingxl_1bo6p_14", "roundingfull": "_roundingfull_1bo6p_18" };
|
|
3
|
+
|
|
4
|
+
export {
|
|
5
|
+
rounding_module_default
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=3PCHHAIY.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["css-module:../rounding.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css\"; export default {\"roundingsm\":\"_roundingsm_1bo6p_2\",\"roundingmd\":\"_roundingmd_1bo6p_6\",\"roundinglg\":\"_roundinglg_1bo6p_10\",\"roundingxl\":\"_roundingxl_1bo6p_14\",\"roundingfull\":\"_roundingfull_1bo6p_18\"}"],"mappings":";AAAuF,IAAO,0BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,cAAa,wBAAuB,cAAa,wBAAuB,gBAAe,yBAAwB;","names":[]}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
|
+
|
|
3
|
+
var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _CATJI2RJjs = require('./CATJI2RJ.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _G4DDTGDIjs = require('./G4DDTGDI.js');
|
|
10
|
+
|
|
11
|
+
// src/IconButton/IconButton.tsx
|
|
12
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
13
|
+
var _react = require('react');
|
|
14
|
+
|
|
15
|
+
// css-module:./IconButton.module.css#css-module
|
|
16
|
+
var IconButton_module_default = { "iconButton": "_iconButton_4e8qe_1", "sm": "_sm_4e8qe_46", "md": "_md_4e8qe_51", "lg": "_lg_4e8qe_56", "smIcon": "_smIcon_4e8qe_61", "mdIcon": "_mdIcon_4e8qe_68", "lgIcon": "_lgIcon_4e8qe_75", "secondaryBorder": "_secondaryBorder_4e8qe_82", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_4e8qe_86" };
|
|
17
|
+
|
|
18
|
+
// src/IconButton/IconButton.tsx
|
|
19
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
20
|
+
var iconSize = {
|
|
21
|
+
["sm"]: IconButton_module_default.smIcon,
|
|
22
|
+
["md"]: IconButton_module_default.mdIcon,
|
|
23
|
+
["lg"]: IconButton_module_default.lgIcon
|
|
24
|
+
};
|
|
25
|
+
var IconButton = _react.forwardRef.call(void 0,
|
|
26
|
+
({
|
|
27
|
+
accessibilityLabel,
|
|
28
|
+
color = "primary",
|
|
29
|
+
"data-testid": dataTestId,
|
|
30
|
+
disabled = false,
|
|
31
|
+
icon: Icon,
|
|
32
|
+
size = "md",
|
|
33
|
+
tooltip,
|
|
34
|
+
onClick
|
|
35
|
+
}, ref) => {
|
|
36
|
+
const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
|
|
37
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
38
|
+
"button",
|
|
39
|
+
{
|
|
40
|
+
"aria-label": accessibilityLabel,
|
|
41
|
+
"data-testid": dataTestId,
|
|
42
|
+
type: "button",
|
|
43
|
+
title: tooltip,
|
|
44
|
+
disabled: !isHydrated || disabled,
|
|
45
|
+
onClick,
|
|
46
|
+
className: _classnames2.default.call(void 0,
|
|
47
|
+
IconButton_module_default.iconButton,
|
|
48
|
+
_CATJI2RJjs.foregroundColor.call(void 0, color),
|
|
49
|
+
_G4DDTGDIjs.backgroundColor.call(void 0, color),
|
|
50
|
+
IconButton_module_default[size],
|
|
51
|
+
{
|
|
52
|
+
[IconButton_module_default.secondaryBorder]: color === "secondary",
|
|
53
|
+
[IconButton_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
ref,
|
|
57
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconSize[size] })
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
IconButton.displayName = "IconButton";
|
|
63
|
+
var IconButton_default = IconButton;
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
exports.IconButton_default = IconButton_default;
|
|
68
|
+
//# sourceMappingURL=3VUMTAUX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,uCAAsC;;;ADmGhZ;AA3FR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: (typeof Color)[number];\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\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};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColor(color),\n backgroundColor(color),\n styles[size],\n {\n [styles.secondaryBorder]: color === \"secondary\",\n [styles.secondaryDestructiveBorder]:\n color === \"destructive-secondary\",\n },\n )}\n ref={ref}\n >\n <Icon className={iconSize[size]} />\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_4e8qe_1\",\"sm\":\"_sm_4e8qe_46\",\"md\":\"_md_4e8qe_51\",\"lg\":\"_lg_4e8qe_56\",\"smIcon\":\"_smIcon_4e8qe_61\",\"mdIcon\":\"_mdIcon_4e8qe_68\",\"lgIcon\":\"_lgIcon_4e8qe_75\",\"secondaryBorder\":\"_secondaryBorder_4e8qe_82\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_4e8qe_86\"}"]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Modal/FocusTrap.tsx
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
4
|
+
function queryFocusableAll(el) {
|
|
5
|
+
const selector = [
|
|
6
|
+
"a[href]",
|
|
7
|
+
"area[href]",
|
|
8
|
+
"input:not([disabled])",
|
|
9
|
+
"select:not([disabled])",
|
|
10
|
+
"textarea:not([disabled])",
|
|
11
|
+
"button:not([disabled])",
|
|
12
|
+
"iframe",
|
|
13
|
+
"object",
|
|
14
|
+
"embed",
|
|
15
|
+
'[tabindex="-1"]',
|
|
16
|
+
'[tabindex="0"]',
|
|
17
|
+
"[contenteditable]",
|
|
18
|
+
"audio[controls]",
|
|
19
|
+
"video[controls]",
|
|
20
|
+
"summary"
|
|
21
|
+
].join(",");
|
|
22
|
+
return el.querySelectorAll(selector);
|
|
23
|
+
}
|
|
24
|
+
var focusElement = (el) => {
|
|
25
|
+
if (typeof el.focus === "function") {
|
|
26
|
+
el.focus();
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
function FocusTrap({
|
|
30
|
+
children
|
|
31
|
+
}) {
|
|
32
|
+
const elRef = _react.useRef.call(void 0, null);
|
|
33
|
+
const previouslyFocusedElRef = _react.useRef.call(void 0, null);
|
|
34
|
+
_react.useEffect.call(void 0, () => {
|
|
35
|
+
const { current: element } = elRef;
|
|
36
|
+
const focusFirstChild = () => {
|
|
37
|
+
const withinIframe = window !== window.parent;
|
|
38
|
+
if (element && !withinIframe) {
|
|
39
|
+
focusElement(queryFocusableAll(element)[0]);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const handleFocus = (event) => {
|
|
43
|
+
if (!element || event.target instanceof Node && element.contains(event.target)) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
if (event.target instanceof Element && event.target.closest('[data-testid="syntax-focus-trap"]') !== null) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
event.stopPropagation();
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
focusFirstChild();
|
|
52
|
+
};
|
|
53
|
+
previouslyFocusedElRef.current = document.activeElement;
|
|
54
|
+
focusFirstChild();
|
|
55
|
+
document.addEventListener("focus", handleFocus, true);
|
|
56
|
+
return function cleanup() {
|
|
57
|
+
const { current: previouslyFocusedEl } = previouslyFocusedElRef;
|
|
58
|
+
document.removeEventListener("focus", handleFocus, true);
|
|
59
|
+
if (previouslyFocusedEl) {
|
|
60
|
+
focusElement(previouslyFocusedEl);
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
}, [elRef, previouslyFocusedElRef]);
|
|
64
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
exports.FocusTrap = FocusTrap;
|
|
70
|
+
//# sourceMappingURL=42YPEAFS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/FocusTrap.tsx"],"names":[],"mappings":";AAAA,SAAgB,WAAW,cAAiC;AAyFxD;AAvFJ,SAAS,kBAAkB,IAA6C;AAEtE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AACV,SAAO,GAAG,iBAAiB,QAAQ;AACrC;AAEA,IAAM,eAAe,CAAC,OAAoB;AACxC,MAAI,OAAO,GAAG,UAAU,YAAY;AAClC,OAAG,MAAM;AAAA,EACX;AACF;AAKe,SAAR,UAA2B;AAAA,EAChC;AACF,GAEiB;AACf,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,yBAAyB,OAA2B,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,EAAE,SAAS,QAAQ,IAAI;AAG7B,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,WAAW,OAAO;AACvC,UAAI,WAAW,CAAC,cAAc;AAC5B,qBAAa,kBAAkB,OAAO,EAAE,CAAC,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,cAA2C,CAAC,UAAsB;AACtE,UACE,CAAC,WACA,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,MAAM,GAC9D;AACA;AAAA,MACF;AAGA,UACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,mCAAmC,MAAM,MAC9D;AACA;AAAA,MACF;AAEA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,sBAAgB;AAAA,IAClB;AAGA,2BAAuB,UAAU,SAAS;AAC1C,oBAAgB;AAChB,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAEpD,WAAO,SAAS,UAAU;AACxB,YAAM,EAAE,SAAS,oBAAoB,IAAI;AACzC,eAAS,oBAAoB,SAAS,aAAa,IAAI;AAEvD,UAAI,qBAAqB;AACvB,qBAAa,mBAAmB;AAAA,MAClC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,sBAAsB,CAAC;AAElC,SACE,oBAAC,SAAI,eAAY,qBAAoB,KAAK,OACvC,UACH;AAEJ","sourcesContent":["import React, { useEffect, useRef, type ReactElement } from \"react\";\n\nfunction queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {\n // Focusable, interactive elements that could possibly be in children\n const selector = [\n \"a[href]\",\n \"area[href]\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n \"textarea:not([disabled])\",\n \"button:not([disabled])\",\n \"iframe\",\n \"object\",\n \"embed\",\n '[tabindex=\"-1\"]',\n '[tabindex=\"0\"]',\n \"[contenteditable]\",\n \"audio[controls]\",\n \"video[controls]\",\n \"summary\",\n ].join(\",\");\n return el.querySelectorAll(selector);\n}\n\nconst focusElement = (el: HTMLElement) => {\n if (typeof el.focus === \"function\") {\n el.focus();\n }\n};\n\n/**\n * FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.\n */\nexport default function FocusTrap({\n children,\n}: {\n children?: ReactElement | null;\n}): ReactElement {\n const elRef = useRef<HTMLDivElement | null>(null);\n const previouslyFocusedElRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n const { current: element } = elRef;\n\n // Focus the first child element among all the focusable, interactive elements within `children`\n const focusFirstChild = () => {\n const withinIframe = window !== window.parent;\n if (element && !withinIframe) {\n focusElement(queryFocusableAll(element)[0]);\n }\n };\n\n const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {\n if (\n !element ||\n (event.target instanceof Node && element.contains(event.target))\n ) {\n return;\n }\n\n // This prevents stack overflow when multiple FocusTraps are rendered\n if (\n event.target instanceof Element &&\n event.target.closest('[data-testid=\"syntax-focus-trap\"]') !== null\n ) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n focusFirstChild();\n };\n\n // If an element has focus currently, keep a reference to that element\n previouslyFocusedElRef.current = document.activeElement as HTMLElement;\n focusFirstChild();\n document.addEventListener(\"focus\", handleFocus, true);\n\n return function cleanup() {\n const { current: previouslyFocusedEl } = previouslyFocusedElRef;\n document.removeEventListener(\"focus\", handleFocus, true);\n // If we previously stored a reference to a focused element, return focus to that element\n if (previouslyFocusedEl) {\n focusElement(previouslyFocusedEl);\n }\n };\n }, [elRef, previouslyFocusedElRef]);\n\n return (\n <div data-testid=\"syntax-focus-trap\" ref={elRef}>\n {children}\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:../Button.module.css#css-module
|
|
2
|
+
var Button_module_default = { "button": "_button_1iunh_1", "buttonGap": "_buttonGap_1iunh_9", "fullWidth": "_fullWidth_1iunh_50", "sm": "_sm_1iunh_54", "md": "_md_1iunh_61", "lg": "_lg_1iunh_68", "icon": "_icon_1iunh_75", "smIcon": "_smIcon_1iunh_79", "mdIcon": "_mdIcon_1iunh_86", "lgIcon": "_lgIcon_1iunh_93", "secondaryBorder": "_secondaryBorder_1iunh_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1iunh_104", "loading": "_loading_1iunh_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1iunh_1", "loadingCircle": "_loadingCircle_1iunh_122" };
|
|
3
|
+
|
|
4
|
+
// src/Button/constants/iconSize.ts
|
|
5
|
+
var iconSize = {
|
|
6
|
+
["sm"]: Button_module_default.smIcon,
|
|
7
|
+
["md"]: Button_module_default.mdIcon,
|
|
8
|
+
["lg"]: Button_module_default.lgIcon
|
|
9
|
+
};
|
|
10
|
+
var iconSize_default = iconSize;
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
exports.iconSize_default = iconSize_default;
|
|
15
|
+
//# sourceMappingURL=4PWSK5GI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"names":[],"mappings":";AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEhnB,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AACjB;AAEA,IAAO,mBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1iunh_1\",\"buttonGap\":\"_buttonGap_1iunh_9\",\"fullWidth\":\"_fullWidth_1iunh_50\",\"sm\":\"_sm_1iunh_54\",\"md\":\"_md_1iunh_61\",\"lg\":\"_lg_1iunh_68\",\"icon\":\"_icon_1iunh_75\",\"smIcon\":\"_smIcon_1iunh_79\",\"mdIcon\":\"_mdIcon_1iunh_86\",\"lgIcon\":\"_lgIcon_1iunh_93\",\"secondaryBorder\":\"_secondaryBorder_1iunh_100\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1iunh_104\",\"loading\":\"_loading_1iunh_118\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1iunh_1\",\"loadingCircle\":\"_loadingCircle_1iunh_122\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\nexport default iconSize;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";//# sourceMappingURL=5AR53MHD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Button/constants/textVariant.ts
|
|
2
|
+
var textVariant = {
|
|
3
|
+
["sm"]: 100,
|
|
4
|
+
["md"]: 200,
|
|
5
|
+
["lg"]: 300
|
|
6
|
+
};
|
|
7
|
+
var textVariant_default = textVariant;
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
exports.textVariant_default = textVariant_default;
|
|
12
|
+
//# sourceMappingURL=5DBWL6IK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"names":[],"mappings":";AAAA,IAAM,cAAc;AAAA,EAClB,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AACV;AAEA,IAAO,sBAAQ","sourcesContent":["const textVariant = {\n [\"sm\"]: 100,\n [\"md\"]: 200,\n [\"lg\"]: 300,\n} as const;\n\nexport default textVariant;\n"]}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useIsHydrated
|
|
3
|
+
} from "./XFKGXL73.mjs";
|
|
4
|
+
import {
|
|
5
|
+
foregroundColor
|
|
6
|
+
} from "./Q2TIB7ZC.mjs";
|
|
7
|
+
import {
|
|
8
|
+
backgroundColor
|
|
9
|
+
} from "./R6CDK4GP.mjs";
|
|
10
|
+
|
|
11
|
+
// src/IconButton/IconButton.tsx
|
|
12
|
+
import classNames from "classnames";
|
|
13
|
+
import { forwardRef } from "react";
|
|
14
|
+
|
|
15
|
+
// css-module:./IconButton.module.css#css-module
|
|
16
|
+
var IconButton_module_default = { "iconButton": "_iconButton_4e8qe_1", "sm": "_sm_4e8qe_46", "md": "_md_4e8qe_51", "lg": "_lg_4e8qe_56", "smIcon": "_smIcon_4e8qe_61", "mdIcon": "_mdIcon_4e8qe_68", "lgIcon": "_lgIcon_4e8qe_75", "secondaryBorder": "_secondaryBorder_4e8qe_82", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_4e8qe_86" };
|
|
17
|
+
|
|
18
|
+
// src/IconButton/IconButton.tsx
|
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
|
20
|
+
var iconSize = {
|
|
21
|
+
["sm"]: IconButton_module_default.smIcon,
|
|
22
|
+
["md"]: IconButton_module_default.mdIcon,
|
|
23
|
+
["lg"]: IconButton_module_default.lgIcon
|
|
24
|
+
};
|
|
25
|
+
var IconButton = forwardRef(
|
|
26
|
+
({
|
|
27
|
+
accessibilityLabel,
|
|
28
|
+
color = "primary",
|
|
29
|
+
"data-testid": dataTestId,
|
|
30
|
+
disabled = false,
|
|
31
|
+
icon: Icon,
|
|
32
|
+
size = "md",
|
|
33
|
+
tooltip,
|
|
34
|
+
onClick
|
|
35
|
+
}, ref) => {
|
|
36
|
+
const isHydrated = useIsHydrated();
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
"button",
|
|
39
|
+
{
|
|
40
|
+
"aria-label": accessibilityLabel,
|
|
41
|
+
"data-testid": dataTestId,
|
|
42
|
+
type: "button",
|
|
43
|
+
title: tooltip,
|
|
44
|
+
disabled: !isHydrated || disabled,
|
|
45
|
+
onClick,
|
|
46
|
+
className: classNames(
|
|
47
|
+
IconButton_module_default.iconButton,
|
|
48
|
+
foregroundColor(color),
|
|
49
|
+
backgroundColor(color),
|
|
50
|
+
IconButton_module_default[size],
|
|
51
|
+
{
|
|
52
|
+
[IconButton_module_default.secondaryBorder]: color === "secondary",
|
|
53
|
+
[IconButton_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
ref,
|
|
57
|
+
children: /* @__PURE__ */ jsx(Icon, { className: iconSize[size] })
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
IconButton.displayName = "IconButton";
|
|
63
|
+
var IconButton_default = IconButton;
|
|
64
|
+
|
|
65
|
+
export {
|
|
66
|
+
IconButton_default
|
|
67
|
+
};
|
|
68
|
+
//# sourceMappingURL=5R6HCJP6.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: (typeof Color)[number];\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\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};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColor(color),\n backgroundColor(color),\n styles[size],\n {\n [styles.secondaryBorder]: color === \"secondary\",\n [styles.secondaryDestructiveBorder]:\n color === \"destructive-secondary\",\n },\n )}\n ref={ref}\n >\n <Icon className={iconSize[size]} />\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_4e8qe_1\",\"sm\":\"_sm_4e8qe_46\",\"md\":\"_md_4e8qe_51\",\"lg\":\"_lg_4e8qe_56\",\"smIcon\":\"_smIcon_4e8qe_61\",\"mdIcon\":\"_mdIcon_4e8qe_68\",\"lgIcon\":\"_lgIcon_4e8qe_75\",\"secondaryBorder\":\"_secondaryBorder_4e8qe_82\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_4e8qe_86\"}"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,uCAAsC;;;ADmGhZ;AA3FR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:./Divider.module.css#css-module
|
|
2
|
+
var Divider_module_default = { "divider": "_divider_ra8vz_1" };
|
|
3
|
+
|
|
4
|
+
// src/Divider/Divider.tsx
|
|
5
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
6
|
+
function Divider() {
|
|
7
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "hr", { className: Divider_module_default.divider });
|
|
8
|
+
}
|
|
9
|
+
Divider.displayName = "Divider";
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
exports.Divider = Divider;
|
|
14
|
+
//# sourceMappingURL=6VWFOSQZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"names":[],"mappings":";AAA8F,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI;AADM,SAAR,UAA+C;AACpD,SAAO,oBAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_ra8vz_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// css-module:../Button.module.css#css-module
|
|
2
|
+
var Button_module_default = { "button": "_button_1iunh_1", "buttonGap": "_buttonGap_1iunh_9", "fullWidth": "_fullWidth_1iunh_50", "sm": "_sm_1iunh_54", "md": "_md_1iunh_61", "lg": "_lg_1iunh_68", "icon": "_icon_1iunh_75", "smIcon": "_smIcon_1iunh_79", "mdIcon": "_mdIcon_1iunh_86", "lgIcon": "_lgIcon_1iunh_93", "secondaryBorder": "_secondaryBorder_1iunh_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1iunh_104", "loading": "_loading_1iunh_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1iunh_1", "loadingCircle": "_loadingCircle_1iunh_122" };
|
|
3
|
+
|
|
4
|
+
// src/Button/constants/iconSize.ts
|
|
5
|
+
var iconSize = {
|
|
6
|
+
["sm"]: Button_module_default.smIcon,
|
|
7
|
+
["md"]: Button_module_default.mdIcon,
|
|
8
|
+
["lg"]: Button_module_default.lgIcon
|
|
9
|
+
};
|
|
10
|
+
var iconSize_default = iconSize;
|
|
11
|
+
|
|
12
|
+
export {
|
|
13
|
+
iconSize_default
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=A7UVLRKG.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1iunh_1\",\"buttonGap\":\"_buttonGap_1iunh_9\",\"fullWidth\":\"_fullWidth_1iunh_50\",\"sm\":\"_sm_1iunh_54\",\"md\":\"_md_1iunh_61\",\"lg\":\"_lg_1iunh_68\",\"icon\":\"_icon_1iunh_75\",\"smIcon\":\"_smIcon_1iunh_79\",\"mdIcon\":\"_mdIcon_1iunh_86\",\"lgIcon\":\"_lgIcon_1iunh_93\",\"secondaryBorder\":\"_secondaryBorder_1iunh_100\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1iunh_104\",\"loading\":\"_loading_1iunh_118\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1iunh_1\",\"loadingCircle\":\"_loadingCircle_1iunh_122\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n [\"sm\"]: styles.smIcon,\n [\"md\"]: styles.mdIcon,\n [\"lg\"]: styles.lgIcon,\n};\n\nexport default iconSize;\n"],"mappings":";AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEhnB,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AACjB;AAEA,IAAO,mBAAQ;","names":[]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Modal/StopScroll.tsx
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
function StopScroll(props) {
|
|
4
|
+
_react.useEffect.call(void 0, () => {
|
|
5
|
+
const originalStyle = window.getComputedStyle(document.body).overflow;
|
|
6
|
+
document.body.style.overflow = "hidden";
|
|
7
|
+
return () => {
|
|
8
|
+
document.body.style.overflow = originalStyle;
|
|
9
|
+
};
|
|
10
|
+
}, []);
|
|
11
|
+
return props.children;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
exports.StopScroll = StopScroll;
|
|
17
|
+
//# sourceMappingURL=AFINOME7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/StopScroll.tsx"],"names":[],"mappings":";AAAA,SAAS,iBAAoC;AAE9B,SAAR,WAA4B,OAElB;AACf,YAAU,MAAM;AACd,UAAM,gBAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE;AAC7D,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,MAAM;AACf","sourcesContent":["import { useEffect, type ReactElement } from \"react\";\n\nexport default function StopScroll(props: {\n children: ReactElement;\n}): ReactElement {\n useEffect(() => {\n const originalStyle = window.getComputedStyle(document.body).overflow;\n document.body.style.overflow = \"hidden\";\n return () => {\n document.body.style.overflow = originalStyle;\n };\n }, []);\n\n return props.children;\n}\n"]}
|