@cambly/syntax-core 12.2.0 → 12.4.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.d.ts +1 -1
- package/dist/Badge/Badge.cjs +4 -3
- package/dist/Badge/Badge.d.ts +6 -2
- package/dist/Badge/Badge.js +3 -2
- package/dist/Button/Button.cjs +5 -4
- package/dist/Button/Button.d.ts +5 -3
- package/dist/Button/Button.js +4 -3
- package/dist/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/Checkbox/Checkbox.cjs +4 -3
- package/dist/Checkbox/Checkbox.d.ts +1 -1
- package/dist/Checkbox/Checkbox.js +3 -2
- package/dist/Chip/Chip.cjs +4 -3
- package/dist/Chip/Chip.d.ts +4 -2
- package/dist/Chip/Chip.js +3 -2
- package/dist/Dialog/ModalDialog.cjs +4 -4
- package/dist/Dialog/ModalDialog.js +3 -3
- package/dist/Heading/Heading.cjs +4 -3
- package/dist/Heading/Heading.d.ts +2 -2
- package/dist/Heading/Heading.js +3 -2
- package/dist/Icon/Icon.cjs +12 -0
- package/dist/Icon/Icon.cjs.map +1 -0
- package/dist/Icon/Icon.css +470 -0
- package/dist/Icon/Icon.css.map +1 -0
- package/dist/Icon/Icon.d.ts +35 -0
- package/dist/Icon/Icon.js +12 -0
- package/dist/Icon/Icon.js.map +1 -0
- package/dist/IconButton/IconButton.cjs +2 -2
- package/dist/IconButton/IconButton.d.ts +8 -3
- package/dist/IconButton/IconButton.js +1 -1
- package/dist/LinkButton/LinkButton.cjs +4 -3
- package/dist/LinkButton/LinkButton.d.ts +5 -3
- package/dist/LinkButton/LinkButton.js +3 -2
- package/dist/Modal/Modal.cjs +8 -7
- package/dist/Modal/Modal.js +7 -6
- package/dist/Popover/Popover.cjs +5 -5
- package/dist/Popover/Popover.js +4 -4
- package/dist/RadioButton/RadioButton.cjs +4 -3
- package/dist/RadioButton/RadioButton.d.ts +1 -1
- package/dist/RadioButton/RadioButton.js +3 -2
- package/dist/RichSelect/RichSelectBox.cjs +12 -11
- package/dist/RichSelect/RichSelectBox.d.ts +1 -1
- package/dist/RichSelect/RichSelectBox.js +11 -10
- package/dist/RichSelect/RichSelectChip.cjs +5 -4
- package/dist/RichSelect/RichSelectChip.js +4 -3
- package/dist/RichSelect/RichSelectList.cjs +17 -16
- package/dist/RichSelect/RichSelectList.d.ts +1 -1
- package/dist/RichSelect/RichSelectList.js +16 -15
- package/dist/RichSelect/RichSelectRadioButton.cjs +6 -5
- package/dist/RichSelect/RichSelectRadioButton.d.ts +1 -1
- package/dist/RichSelect/RichSelectRadioButton.js +5 -4
- package/dist/RichSelect/RichSelectSection.cjs +4 -3
- package/dist/RichSelect/RichSelectSection.js +3 -2
- package/dist/SelectList/SelectList.cjs +5 -4
- package/dist/SelectList/SelectList.js +4 -3
- package/dist/TapArea/TapArea.d.ts +1 -1
- package/dist/TextArea/TextArea.cjs +4 -3
- package/dist/TextArea/TextArea.css +13 -1
- package/dist/TextArea/TextArea.css.map +1 -1
- package/dist/TextArea/TextArea.d.ts +10 -0
- package/dist/TextArea/TextArea.js +3 -2
- package/dist/TextField/TextField.cjs +4 -3
- package/dist/TextField/TextField.js +3 -2
- package/dist/Tooltip/Tooltip.cjs +4 -3
- package/dist/Tooltip/Tooltip.js +3 -2
- package/dist/Typography/Typography.cjs +3 -2
- package/dist/Typography/Typography.d.ts +5 -5
- package/dist/Typography/Typography.js +2 -1
- package/dist/__chunks/{NDV4446A.cjs → 2OJKC2AX.cjs} +3 -3
- package/dist/__chunks/{ZMLKUOZ2.cjs → 2YPCVUF4.cjs} +3 -3
- package/dist/__chunks/{AWBESVTU.js → 36CGIMVN.js} +13 -7
- package/dist/__chunks/36CGIMVN.js.map +1 -0
- package/dist/__chunks/{7TTYWZJV.js → 3LABGGXX.js} +5 -5
- package/dist/__chunks/{WIHMNKU4.cjs → 3QFLV73A.cjs} +3 -3
- package/dist/__chunks/{AC3JZOEZ.cjs → 4B34QFEQ.cjs} +4 -4
- package/dist/__chunks/{MEOMWLNG.js → 4JFE4NWI.js} +2 -2
- package/dist/__chunks/4JFE4NWI.js.map +1 -0
- package/dist/__chunks/{PROA22UK.cjs → 63XQSPT7.cjs} +2 -2
- package/dist/__chunks/63XQSPT7.cjs.map +1 -0
- package/dist/__chunks/{52WECBHV.js → 6KU7VVNL.js} +4 -4
- package/dist/__chunks/72UQX6IX.cjs +31 -0
- package/dist/__chunks/72UQX6IX.cjs.map +1 -0
- package/dist/__chunks/{UX5KRRO4.js → 7EM2GOIC.js} +9 -7
- package/dist/__chunks/7EM2GOIC.js.map +1 -0
- package/dist/__chunks/{NT2USB3G.cjs → 7FYS3TSR.cjs} +3 -3
- package/dist/__chunks/{DSX7DSIZ.cjs → A3SEZYRY.cjs} +19 -19
- package/dist/__chunks/{JCOCOPM4.js → CGTJ4LLU.js} +1 -1
- package/dist/__chunks/{JCOCOPM4.js.map → CGTJ4LLU.js.map} +1 -1
- package/dist/__chunks/{ITALBBTF.js → COREQINY.js} +9 -5
- package/dist/__chunks/COREQINY.js.map +1 -0
- package/dist/__chunks/{4GZL7Q7G.cjs → CQQJROZE.cjs} +5 -5
- package/dist/__chunks/CQQJROZE.cjs.map +1 -0
- package/dist/__chunks/CSBTHGRF.cjs +37 -0
- package/dist/__chunks/CSBTHGRF.cjs.map +1 -0
- package/dist/__chunks/{HWDLLEM4.js → EGLA4ZQ6.js} +2 -2
- package/dist/__chunks/{UH56LVRG.cjs → ELEREGBW.cjs} +3 -3
- package/dist/__chunks/{YFADRNTB.cjs → F6ESU4Z7.cjs} +6 -6
- package/dist/__chunks/FE66UYFD.js +37 -0
- package/dist/__chunks/FE66UYFD.js.map +1 -0
- package/dist/__chunks/{UUIXG3PQ.cjs → GUACYIXB.cjs} +3 -23
- package/dist/__chunks/GUACYIXB.cjs.map +1 -0
- package/dist/__chunks/{ICTDYMZM.cjs → HK7T4244.cjs} +8 -8
- package/dist/__chunks/{Y4BEP7DV.js → HN2MMSUI.js} +2 -2
- package/dist/__chunks/{JXI2A4FD.cjs → ID2WKUNH.cjs} +3 -3
- package/dist/__chunks/{S2S77Y7G.js → LL5Q6ZDS.js} +2 -2
- package/dist/__chunks/{KUPD7W7N.js → NCV3QLVA.js} +6 -6
- package/dist/__chunks/{FVGIQTM2.js → NPZBG5AK.js} +5 -5
- package/dist/__chunks/{BGSF75WT.js → ODQM5XK6.js} +8 -8
- package/dist/__chunks/{QF7K6PY3.js → OK2J3AOJ.js} +2 -2
- package/dist/__chunks/{RMDRDNHT.js → PDVLGG4C.js} +3 -3
- package/dist/__chunks/PDVLGG4C.js.map +1 -0
- package/dist/__chunks/{FHLZXSCX.js → Q6657TAT.js} +3 -3
- package/dist/__chunks/Q6657TAT.js.map +1 -0
- package/dist/__chunks/{OPJKUJKD.js → QX77I7J7.js} +2 -2
- package/dist/__chunks/{AN6SGUNO.js → RR6KYFRT.js} +2 -2
- package/dist/__chunks/{ANY6BV2W.cjs → S2VK4XNL.cjs} +10 -8
- package/dist/__chunks/S2VK4XNL.cjs.map +1 -0
- package/dist/__chunks/{M3KSATCF.cjs → SFZ2MHPA.cjs} +4 -4
- package/dist/__chunks/SFZ2MHPA.cjs.map +1 -0
- package/dist/__chunks/{XMP55GA2.cjs → T5NFBPT6.cjs} +16 -10
- package/dist/__chunks/T5NFBPT6.cjs.map +1 -0
- package/dist/__chunks/{2QPXNLJ6.js → TQ7D5O7L.js} +2 -2
- package/dist/__chunks/{D62L3CWM.cjs → TYPTB7HD.cjs} +6 -6
- package/dist/__chunks/{RWYADXNX.cjs → UK5I7UHL.cjs} +1 -1
- package/dist/__chunks/{RWYADXNX.cjs.map → UK5I7UHL.cjs.map} +1 -1
- package/dist/__chunks/{B7DRDFQ5.js → UTGUC2G6.js} +3 -3
- package/dist/__chunks/{RXXGDO2J.js → V562ZHQ7.js} +3 -23
- package/dist/__chunks/V562ZHQ7.js.map +1 -0
- package/dist/__chunks/{5E23KLF4.cjs → W45CFJI7.cjs} +9 -5
- package/dist/__chunks/W45CFJI7.cjs.map +1 -0
- package/dist/__chunks/{T5LYIWR3.cjs → XF4T4J3B.cjs} +10 -10
- package/dist/__chunks/{T6Q66MTP.cjs → XVSTRGEE.cjs} +4 -4
- package/dist/__chunks/{H4L7P2Y7.js → Y67FDYEF.js} +2 -2
- package/dist/__chunks/{5AKXXMJG.cjs → ZTK7E42P.cjs} +3 -3
- package/dist/__chunks/ZVJGV6GH.js +31 -0
- package/dist/__chunks/ZVJGV6GH.js.map +1 -0
- package/dist/colors/textColors.cjs +11 -0
- package/dist/colors/textColors.cjs.map +1 -0
- package/dist/colors/textColors.css +446 -0
- package/dist/colors/textColors.css.map +1 -0
- package/dist/colors/textColors.d.ts +3 -0
- package/dist/colors/textColors.js +11 -0
- package/dist/colors/textColors.js.map +1 -0
- package/dist/index.cjs +40 -35
- package/dist/index.css +37 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +41 -36
- package/package.json +1 -1
- package/dist/__chunks/4GZL7Q7G.cjs.map +0 -1
- package/dist/__chunks/5E23KLF4.cjs.map +0 -1
- package/dist/__chunks/ANY6BV2W.cjs.map +0 -1
- package/dist/__chunks/AWBESVTU.js.map +0 -1
- package/dist/__chunks/FHLZXSCX.js.map +0 -1
- package/dist/__chunks/ITALBBTF.js.map +0 -1
- package/dist/__chunks/M3KSATCF.cjs.map +0 -1
- package/dist/__chunks/MEOMWLNG.js.map +0 -1
- package/dist/__chunks/PROA22UK.cjs.map +0 -1
- package/dist/__chunks/RMDRDNHT.js.map +0 -1
- package/dist/__chunks/RXXGDO2J.js.map +0 -1
- package/dist/__chunks/UUIXG3PQ.cjs.map +0 -1
- package/dist/__chunks/UX5KRRO4.js.map +0 -1
- package/dist/__chunks/XMP55GA2.cjs.map +0 -1
- /package/dist/__chunks/{NDV4446A.cjs.map → 2OJKC2AX.cjs.map} +0 -0
- /package/dist/__chunks/{ZMLKUOZ2.cjs.map → 2YPCVUF4.cjs.map} +0 -0
- /package/dist/__chunks/{7TTYWZJV.js.map → 3LABGGXX.js.map} +0 -0
- /package/dist/__chunks/{WIHMNKU4.cjs.map → 3QFLV73A.cjs.map} +0 -0
- /package/dist/__chunks/{AC3JZOEZ.cjs.map → 4B34QFEQ.cjs.map} +0 -0
- /package/dist/__chunks/{52WECBHV.js.map → 6KU7VVNL.js.map} +0 -0
- /package/dist/__chunks/{NT2USB3G.cjs.map → 7FYS3TSR.cjs.map} +0 -0
- /package/dist/__chunks/{DSX7DSIZ.cjs.map → A3SEZYRY.cjs.map} +0 -0
- /package/dist/__chunks/{HWDLLEM4.js.map → EGLA4ZQ6.js.map} +0 -0
- /package/dist/__chunks/{UH56LVRG.cjs.map → ELEREGBW.cjs.map} +0 -0
- /package/dist/__chunks/{YFADRNTB.cjs.map → F6ESU4Z7.cjs.map} +0 -0
- /package/dist/__chunks/{ICTDYMZM.cjs.map → HK7T4244.cjs.map} +0 -0
- /package/dist/__chunks/{Y4BEP7DV.js.map → HN2MMSUI.js.map} +0 -0
- /package/dist/__chunks/{JXI2A4FD.cjs.map → ID2WKUNH.cjs.map} +0 -0
- /package/dist/__chunks/{S2S77Y7G.js.map → LL5Q6ZDS.js.map} +0 -0
- /package/dist/__chunks/{KUPD7W7N.js.map → NCV3QLVA.js.map} +0 -0
- /package/dist/__chunks/{FVGIQTM2.js.map → NPZBG5AK.js.map} +0 -0
- /package/dist/__chunks/{BGSF75WT.js.map → ODQM5XK6.js.map} +0 -0
- /package/dist/__chunks/{QF7K6PY3.js.map → OK2J3AOJ.js.map} +0 -0
- /package/dist/__chunks/{OPJKUJKD.js.map → QX77I7J7.js.map} +0 -0
- /package/dist/__chunks/{AN6SGUNO.js.map → RR6KYFRT.js.map} +0 -0
- /package/dist/__chunks/{2QPXNLJ6.js.map → TQ7D5O7L.js.map} +0 -0
- /package/dist/__chunks/{D62L3CWM.cjs.map → TYPTB7HD.cjs.map} +0 -0
- /package/dist/__chunks/{B7DRDFQ5.js.map → UTGUC2G6.js.map} +0 -0
- /package/dist/__chunks/{T5LYIWR3.cjs.map → XF4T4J3B.cjs.map} +0 -0
- /package/dist/__chunks/{T6Q66MTP.cjs.map → XVSTRGEE.cjs.map} +0 -0
- /package/dist/__chunks/{H4L7P2Y7.js.map → Y67FDYEF.js.map} +0 -0
- /package/dist/__chunks/{5AKXXMJG.cjs.map → ZTK7E42P.cjs.map} +0 -0
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./M36V23WR.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./V562ZHQ7.js";
|
|
8
8
|
import {
|
|
9
9
|
useIsHydrated
|
|
10
10
|
} from "./JB65NEXK.js";
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
import { useId, forwardRef } from "react";
|
|
14
14
|
|
|
15
15
|
// css-module:./TextArea.module.css#css-module
|
|
16
|
-
var TextArea_module_default = { "textarea": "
|
|
16
|
+
var TextArea_module_default = { "textarea": "_textarea_1sb0v_1", "resizenone": "_resizenone_1sb0v_6", "resizehorizontal": "_resizehorizontal_1sb0v_10", "resizevertical": "_resizevertical_1sb0v_14", "resizeboth": "_resizeboth_1sb0v_18" };
|
|
17
17
|
|
|
18
18
|
// css-module:../TextField/TextField.module.css#css-module
|
|
19
19
|
var TextField_module_default = { "textfield": "_textfield_wgza3_1", "label": "_label_wgza3_22", "md": "_md_wgza3_26", "height": "_height_wgza3_30", "inputError": "_inputError_wgza3_34" };
|
|
@@ -33,7 +33,8 @@ var TextArea = forwardRef(
|
|
|
33
33
|
placeholder = "",
|
|
34
34
|
rows = 3,
|
|
35
35
|
value = "",
|
|
36
|
-
onChange
|
|
36
|
+
onChange,
|
|
37
|
+
resize = "none"
|
|
37
38
|
}, forwardedRef) {
|
|
38
39
|
const isHydrated = useIsHydrated();
|
|
39
40
|
const disabled = !isHydrated || disabledProp;
|
|
@@ -59,9 +60,14 @@ var TextArea = forwardRef(
|
|
|
59
60
|
{
|
|
60
61
|
"data-testid": dataTestId,
|
|
61
62
|
ref: forwardedRef,
|
|
62
|
-
className: classNames(
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
className: classNames(
|
|
64
|
+
TextField_module_default.textfield,
|
|
65
|
+
TextArea_module_default.textarea,
|
|
66
|
+
TextArea_module_default[`resize${resize}`],
|
|
67
|
+
{
|
|
68
|
+
[TextField_module_default.inputError]: errorText
|
|
69
|
+
}
|
|
70
|
+
),
|
|
65
71
|
id: inputId,
|
|
66
72
|
placeholder,
|
|
67
73
|
maxLength,
|
|
@@ -89,4 +95,4 @@ var TextArea_default = TextArea;
|
|
|
89
95
|
export {
|
|
90
96
|
TextArea_default
|
|
91
97
|
};
|
|
92
|
-
//# sourceMappingURL=
|
|
98
|
+
//# sourceMappingURL=36CGIMVN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n /**\n * A data-testid to make querying for the TextArea easier.\n */\n \"data-testid\"?: string;\n /**\n * If true, the TextArea will be disabled.\n */\n disabled?: boolean;\n /**\n * Text shown below TextArea if there is an input error.\n */\n errorText?: string;\n /**\n * Informative helper text shown below TextArea\n */\n helperText?: string;\n /**\n * TextField id, if not provided, a unique id will be generated\n */\n id?: string;\n /**\n * TextArea visible label\n */\n label: string;\n /**\n * Maximum number of characters allowed in the TextArea\n */\n maxLength?: number;\n /**\n * Callback fired when the value is changed.\n */\n onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n /**\n * Placeholder text to display when TextArea is empty\n */\n placeholder?: string;\n /**\n * Sets which part resizes when the user drags the resize handle.\n * * `none`: TextArea can not be resized\n * * `horizontal`: TextArea can only be resized horizontally\n * * `vertical`: TextArea can only be resized vertically\n * * `both`: TextArea can be resized horizontally and vertically\n *\n * @defaultvalue `none`\n */\n resize?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n /**\n * Number of rows to display\n */\n rows?: number;\n /**\n * Value of the TextArea\n */\n value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n function TextArea(\n {\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText = \"\",\n helperText = \"\",\n id,\n label,\n maxLength = 1024,\n placeholder = \"\",\n rows = 3,\n value = \"\",\n onChange,\n resize = \"none\",\n }: TextAreaProps,\n forwardedRef,\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 position=\"relative\"\n >\n <label className={textFieldStyles.label} htmlFor={inputId}>\n <Box paddingX={1}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n <Typography size={100}>\n <textarea\n data-testid={dataTestId}\n ref={forwardedRef}\n className={classNames(\n textFieldStyles.textfield,\n styles.textarea,\n styles[`resize${resize}`],\n {\n [textFieldStyles.inputError]: errorText,\n },\n )}\n id={inputId}\n placeholder={placeholder}\n maxLength={maxLength}\n onChange={onChange}\n rows={rows}\n value={value}\n disabled={disabled}\n />\n </Typography>\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);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_1sb0v_1\",\"resizenone\":\"_resizenone_1sb0v_6\",\"resizehorizontal\":\"_resizehorizontal_1sb0v_10\",\"resizevertical\":\"_resizevertical_1sb0v_14\",\"resizeboth\":\"_resizeboth_1sb0v_18\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_wgza3_1\",\"label\":\"_label_wgza3_22\",\"md\":\"_md_wgza3_26\",\"height\":\"_height_wgza3_30\",\"inputError\":\"_inputError_wgza3_34\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,cAAa,uBAAsB,oBAAmB,8BAA6B,kBAAiB,4BAA2B,cAAa,uBAAsB;;;ACA/M,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,uBAAsB;;;AFKhQ,OAAO,gBAAgB;AAuFjB,SAcM,KAdN;AAxBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,SAAS;AAAA,EACX,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAS;AAAA,QAET;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,wBAAO;AAAA,gBACP,wBAAO,SAAS,QAAQ;AAAA,gBACxB;AAAA,kBACE,CAAC,yBAAgB,UAAU,GAAG;AAAA,gBAChC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}
|
|
@@ -4,19 +4,19 @@ import {
|
|
|
4
4
|
} from "./BOX3VY3Q.js";
|
|
5
5
|
import {
|
|
6
6
|
Button_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./7EM2GOIC.js";
|
|
8
8
|
import {
|
|
9
9
|
Divider
|
|
10
10
|
} from "./TK2EQ6QG.js";
|
|
11
11
|
import {
|
|
12
12
|
RichSelectChip_default
|
|
13
|
-
} from "./
|
|
13
|
+
} from "./TQ7D5O7L.js";
|
|
14
14
|
import {
|
|
15
15
|
RichSelectSection_default
|
|
16
|
-
} from "./
|
|
16
|
+
} from "./HN2MMSUI.js";
|
|
17
17
|
import {
|
|
18
18
|
RichSelectRadioButton_default
|
|
19
|
-
} from "./
|
|
19
|
+
} from "./6KU7VVNL.js";
|
|
20
20
|
import {
|
|
21
21
|
RichSelectItemContext,
|
|
22
22
|
RichSelect_module_default
|
|
@@ -208,4 +208,4 @@ export {
|
|
|
208
208
|
RichSelectBoxContext,
|
|
209
209
|
RichSelectBox_default
|
|
210
210
|
};
|
|
211
|
-
//# sourceMappingURL=
|
|
211
|
+
//# sourceMappingURL=3LABGGXX.js.map
|
|
@@ -7,7 +7,7 @@ var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
|
7
7
|
var _FESAFV44cjs = require('./FESAFV44.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _GUACYIXBcjs = require('./GUACYIXB.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
|
|
@@ -113,7 +113,7 @@ var RadioButton = ({
|
|
|
113
113
|
}
|
|
114
114
|
),
|
|
115
115
|
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
116
|
-
|
|
116
|
+
_GUACYIXBcjs.Typography_default,
|
|
117
117
|
{
|
|
118
118
|
size: size === "md" ? 200 : 100,
|
|
119
119
|
color: error ? "destructive-primary" : "gray900",
|
|
@@ -129,4 +129,4 @@ var RadioButton_default = RadioButton;
|
|
|
129
129
|
|
|
130
130
|
|
|
131
131
|
exports.RadioButton_default = RadioButton_default;
|
|
132
|
-
//# sourceMappingURL=
|
|
132
|
+
//# sourceMappingURL=3QFLV73A.cjs.map
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _FESAFV44cjs = require('./FESAFV44.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _GUACYIXBcjs = require('./GUACYIXB.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
@@ -50,7 +50,7 @@ function TextField({
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
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, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
53
|
+
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
|
|
54
54
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
55
55
|
"input",
|
|
56
56
|
{
|
|
@@ -68,7 +68,7 @@ function TextField({
|
|
|
68
68
|
}
|
|
69
69
|
),
|
|
70
70
|
(helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
71
|
-
|
|
71
|
+
_GUACYIXBcjs.Typography_default,
|
|
72
72
|
{
|
|
73
73
|
size: 100,
|
|
74
74
|
color: errorText ? "destructive-primary" : "gray700",
|
|
@@ -83,4 +83,4 @@ function TextField({
|
|
|
83
83
|
|
|
84
84
|
|
|
85
85
|
exports.TextField = TextField;
|
|
86
|
-
//# sourceMappingURL=
|
|
86
|
+
//# sourceMappingURL=4B34QFEQ.cjs.map
|
|
@@ -58,7 +58,7 @@ var IconButton = forwardRef(
|
|
|
58
58
|
IconButton_module_default[size]
|
|
59
59
|
),
|
|
60
60
|
ref,
|
|
61
|
-
children: /* @__PURE__ */ jsx(Icon, { className: iconSize[size] })
|
|
61
|
+
children: /* @__PURE__ */ jsx(Icon, { className: iconSize[size], size })
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
64
|
}
|
|
@@ -69,4 +69,4 @@ var IconButton_default = IconButton;
|
|
|
69
69
|
export {
|
|
70
70
|
IconButton_default
|
|
71
71
|
};
|
|
72
|
-
//# sourceMappingURL=
|
|
72
|
+
//# sourceMappingURL=4JFE4NWI.js.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 { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { type ComponentProps, forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\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?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\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`: 48px\n * * `lg`: 64px\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.\n *\n * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Preferred: Syntax icon\n */\n icon:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\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 on = \"lightBackground\",\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\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 foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n styles[size],\n )}\n ref={ref}\n >\n <Icon className={iconSize[size]} size={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_1h8zl_1\",\"sm\":\"_sm_1h8zl_45\",\"md\":\"_md_1h8zl_50\",\"lg\":\"_lg_1h8zl_55\",\"smIcon\":\"_smIcon_1h8zl_60\",\"mdIcon\":\"_mdIcon_1h8zl_67\",\"lgIcon\":\"_lgIcon_1h8zl_74\"}"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAqC,kBAAkB;;;ACF6C,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADyH9R;AA/GR,IAAM,WAAW;AAAA,EACf,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAuEA,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,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG,MAAY;AAAA;AAAA,IAC/C;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
|
|
@@ -58,7 +58,7 @@ var IconButton = _react.forwardRef.call(void 0,
|
|
|
58
58
|
IconButton_module_default[size]
|
|
59
59
|
),
|
|
60
60
|
ref,
|
|
61
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconSize[size] })
|
|
61
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconSize[size], size })
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
64
|
}
|
|
@@ -69,4 +69,4 @@ var IconButton_default = IconButton;
|
|
|
69
69
|
|
|
70
70
|
|
|
71
71
|
exports.IconButton_default = IconButton_default;
|
|
72
|
-
//# sourceMappingURL=
|
|
72
|
+
//# sourceMappingURL=63XQSPT7.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAqC,kBAAkB;;;ACF6C,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADyH9R;AA/GR,IAAM,WAAW;AAAA,EACf,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAuEA,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,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG,MAAY;AAAA;AAAA,IAC/C;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { type ComponentProps, forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\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?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\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`: 48px\n * * `lg`: 64px\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.\n *\n * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Preferred: Syntax icon\n */\n icon:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\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 on = \"lightBackground\",\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\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 foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n styles[size],\n )}\n ref={ref}\n >\n <Icon className={iconSize[size]} size={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_1h8zl_1\",\"sm\":\"_sm_1h8zl_45\",\"md\":\"_md_1h8zl_50\",\"lg\":\"_lg_1h8zl_55\",\"smIcon\":\"_smIcon_1h8zl_60\",\"mdIcon\":\"_mdIcon_1h8zl_67\",\"lgIcon\":\"_lgIcon_1h8zl_74\"}"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import {
|
|
3
|
-
RadioButton_default
|
|
4
|
-
} from "./AN6SGUNO.js";
|
|
5
2
|
import {
|
|
6
3
|
RichSelectItem_default
|
|
7
4
|
} from "./ODMJANSX.js";
|
|
5
|
+
import {
|
|
6
|
+
RadioButton_default
|
|
7
|
+
} from "./RR6KYFRT.js";
|
|
8
8
|
import {
|
|
9
9
|
__objRest,
|
|
10
10
|
__spreadProps,
|
|
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
|
|
|
37
37
|
export {
|
|
38
38
|
RichSelectRadioButton_default
|
|
39
39
|
};
|
|
40
|
-
//# sourceMappingURL=
|
|
40
|
+
//# sourceMappingURL=6KU7VVNL.js.map
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
|
|
5
|
+
|
|
6
|
+
// src/colors/textColors.ts
|
|
7
|
+
function textColor(color) {
|
|
8
|
+
switch (color) {
|
|
9
|
+
case "gray700":
|
|
10
|
+
return _QT6IRCGWcjs.colors_module_default.cambioGray800Color;
|
|
11
|
+
case "white":
|
|
12
|
+
return _QT6IRCGWcjs.colors_module_default.cambioWhiteColor;
|
|
13
|
+
case "inherit":
|
|
14
|
+
return _QT6IRCGWcjs.colors_module_default.inheritColor;
|
|
15
|
+
case "destructive-primary":
|
|
16
|
+
return _QT6IRCGWcjs.colors_module_default.cambioDestructive900Color;
|
|
17
|
+
case "destructive-darkBackground":
|
|
18
|
+
return _QT6IRCGWcjs.colors_module_default.cambioDestructive100Color;
|
|
19
|
+
case "success":
|
|
20
|
+
return _QT6IRCGWcjs.colors_module_default.cambioSuccess900Color;
|
|
21
|
+
case "success-darkBackground":
|
|
22
|
+
return _QT6IRCGWcjs.colors_module_default.cambioSuccess100Color;
|
|
23
|
+
default:
|
|
24
|
+
return _QT6IRCGWcjs.colors_module_default.cambioBlackColor;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
exports.textColor = textColor;
|
|
31
|
+
//# sourceMappingURL=72UQX6IX.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/colors/textColors.ts"],"names":[],"mappings":";;;;;;AAEe,SAAR,UACL,OAUQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF","sourcesContent":["import colorStyles from \"../colors/colors.module.css\";\n\nexport default function textColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray800Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive100Color;\n case \"success\":\n return colorStyles.cambioSuccess900Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n"]}
|
|
@@ -8,6 +8,9 @@ import {
|
|
|
8
8
|
import {
|
|
9
9
|
iconSize_default
|
|
10
10
|
} from "./C7PW7CPK.js";
|
|
11
|
+
import {
|
|
12
|
+
Box_default
|
|
13
|
+
} from "./M36V23WR.js";
|
|
11
14
|
import {
|
|
12
15
|
foregroundColor
|
|
13
16
|
} from "./UVQS6LU3.js";
|
|
@@ -17,12 +20,9 @@ import {
|
|
|
17
20
|
import {
|
|
18
21
|
backgroundColor
|
|
19
22
|
} from "./T6PXFSRX.js";
|
|
20
|
-
import {
|
|
21
|
-
Box_default
|
|
22
|
-
} from "./M36V23WR.js";
|
|
23
23
|
import {
|
|
24
24
|
Typography_default
|
|
25
|
-
} from "./
|
|
25
|
+
} from "./V562ZHQ7.js";
|
|
26
26
|
import {
|
|
27
27
|
useIsHydrated
|
|
28
28
|
} from "./JB65NEXK.js";
|
|
@@ -89,7 +89,8 @@ var Button = forwardRef(
|
|
|
89
89
|
Button_module_default.icon,
|
|
90
90
|
iconSize_default[size],
|
|
91
91
|
disabledPrimary && Button_module_default.disabledPrimary
|
|
92
|
-
)
|
|
92
|
+
),
|
|
93
|
+
size
|
|
93
94
|
}
|
|
94
95
|
),
|
|
95
96
|
(loading && loadingText || !loading && text) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: textVariant_default[size], weight: "medium", children: /* @__PURE__ */ jsx(
|
|
@@ -109,7 +110,8 @@ var Button = forwardRef(
|
|
|
109
110
|
Button_module_default.icon,
|
|
110
111
|
iconSize_default[size],
|
|
111
112
|
disabledPrimary && Button_module_default.disabledPrimary
|
|
112
|
-
)
|
|
113
|
+
),
|
|
114
|
+
size
|
|
113
115
|
}
|
|
114
116
|
),
|
|
115
117
|
loading && /* @__PURE__ */ jsx(
|
|
@@ -143,4 +145,4 @@ var Button_default = Button;
|
|
|
143
145
|
export {
|
|
144
146
|
Button_default
|
|
145
147
|
};
|
|
146
|
-
//# sourceMappingURL=
|
|
148
|
+
//# sourceMappingURL=7EM2GOIC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ComponentProps } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\n\ntype ButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\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?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n *\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\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?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\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 * The type you want to set for the primitive `<button/>`\n */\n type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n \"data-testid\": dataTestId,\n text,\n loadingText,\n color = \"primary\",\n size = \"md\",\n accessibilityLabel,\n disabled = false,\n loading = false,\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n on = \"lightBackground\",\n onClick,\n tooltip,\n type = \"button\",\n }: ButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n const disabledPrimary = color === \"primary\" && disabled;\n const isDisabled = !isHydrated || disabled || loading;\n\n return (\n <button\n data-testid={dataTestId}\n ref={ref}\n aria-label={accessibilityLabel}\n type={type}\n title={tooltip}\n disabled={isDisabled}\n onClick={onClick}\n className={classNames(\n styles.button,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n styles[size],\n {\n [styles.fullWidth]: fullWidth,\n [styles.buttonGap]: size === \"lg\" || size === \"md\",\n [styles.disabled]: isDisabled,\n },\n )}\n >\n {!loading && StartIcon && (\n <StartIcon\n className={classNames(\n styles.icon,\n iconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={size}\n />\n )}\n {((loading && loadingText) || (!loading && text)) && (\n <Box paddingX={1}>\n <Typography size={textVariant[size]} weight=\"medium\">\n <span\n className={classNames(\n foregroundColorClass,\n disabledPrimary && styles.disabledPrimary,\n )}\n >\n {loading ? loadingText : text}\n </span>\n </Typography>\n </Box>\n )}\n {!loading && EndIcon && (\n <EndIcon\n className={classNames(\n styles.icon,\n iconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={size}\n />\n )}\n {loading && (\n <svg\n className={classNames(styles.loading, foregroundColorClass)}\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);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_hjka3_1\",\"buttonGap\":\"_buttonGap_hjka3_8\",\"disabled\":\"_disabled_hjka3_42\",\"disabledPrimary\":\"_disabledPrimary_hjka3_49\",\"fullWidth\":\"_fullWidth_hjka3_53\",\"sm\":\"_sm_hjka3_57\",\"md\":\"_md_hjka3_64\",\"lg\":\"_lg_hjka3_71\",\"icon\":\"_icon_hjka3_78\",\"smIcon\":\"_smIcon_hjka3_82\",\"mdIcon\":\"_mdIcon_hjka3_89\",\"lgIcon\":\"_lgIcon_hjka3_96\",\"loading\":\"_loading_hjka3_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hjka3_1\",\"loadingCircle\":\"_loadingCircle_hjka3_117\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAuC;AACvD,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;AD4IpkB,SAsBI,KAtBJ;AA7BN,IAAM,SAAS;AAAA,EACb,CACE;AAAA,IACE,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,kBAAkB,UAAU,aAAa;AAC/C,UAAM,aAAa,CAAC,cAAc,YAAY;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YAC9C,CAAC,sBAAO,QAAQ,GAAG;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cAEC,oBAAU,cAAc;AAAA;AAAA,UAC3B,GACF,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAO;AAAA,kBAClB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;","names":[]}
|
|
@@ -10,7 +10,7 @@ var _IL22HCBFcjs = require('./IL22HCBF.cjs');
|
|
|
10
10
|
var _CHDS4D44cjs = require('./CHDS4D44.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _GUACYIXBcjs = require('./GUACYIXB.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
|
|
@@ -102,7 +102,7 @@ var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref)
|
|
|
102
102
|
childrenProp,
|
|
103
103
|
(children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
104
104
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipArrow, {}),
|
|
105
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
105
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: 100, color: "white", children }),
|
|
106
106
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
107
107
|
_E5P6WRJDcjs.OverlayVisibility,
|
|
108
108
|
{
|
|
@@ -162,4 +162,4 @@ var Tooltip_default = Tooltip;
|
|
|
162
162
|
|
|
163
163
|
|
|
164
164
|
exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
|
|
165
|
-
//# sourceMappingURL=
|
|
165
|
+
//# sourceMappingURL=7FYS3TSR.cjs.map
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _XF4T4J3Bcjs = require('./XF4T4J3B.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _ID2WKUNHcjs = require('./ID2WKUNH.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _ELEREGBWcjs = require('./ELEREGBW.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
var _76LTWV2Qcjs = require('./76LTWV2Q.cjs');
|
|
@@ -19,19 +19,19 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _UK5I7UHLcjs = require('./UK5I7UHL.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var _ZTK7E42Pcjs = require('./ZTK7E42P.cjs');
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _XVSTRGEEcjs = require('./XVSTRGEE.cjs');
|
|
29
29
|
|
|
30
30
|
|
|
31
31
|
var _FESAFV44cjs = require('./FESAFV44.cjs');
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var _GUACYIXBcjs = require('./GUACYIXB.cjs');
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
@@ -100,11 +100,11 @@ function RichSelectList(props) {
|
|
|
100
100
|
const disabled = !isHydrated || disabledProp;
|
|
101
101
|
const overlayHandlerRef = _react.useRef.call(void 0, {});
|
|
102
102
|
const selectedKeysProp = _react.useMemo.call(void 0,
|
|
103
|
-
() =>
|
|
103
|
+
() => _XF4T4J3Bcjs.convertSelection.call(void 0, selectedValuesProp),
|
|
104
104
|
[selectedValuesProp]
|
|
105
105
|
);
|
|
106
106
|
const defaultSelectedKeys = _react.useMemo.call(void 0,
|
|
107
|
-
() =>
|
|
107
|
+
() => _XF4T4J3Bcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
|
|
108
108
|
[defaultSelectedValuesProp]
|
|
109
109
|
);
|
|
110
110
|
const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0,
|
|
@@ -142,7 +142,7 @@ function RichSelectList(props) {
|
|
|
142
142
|
_reactariacomponents.Provider,
|
|
143
143
|
{
|
|
144
144
|
values: [
|
|
145
|
-
[
|
|
145
|
+
[_XF4T4J3Bcjs.RichSelectBoxContext, { autoFocus: true }],
|
|
146
146
|
[_76LTWV2Qcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
|
|
147
147
|
// this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
|
|
148
148
|
],
|
|
@@ -166,11 +166,11 @@ function RichSelectList(props) {
|
|
|
166
166
|
(_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
|
|
167
167
|
_interactions.setInteractionModality.call(void 0, "keyboard");
|
|
168
168
|
},
|
|
169
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
169
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
|
|
170
170
|
})
|
|
171
171
|
) }),
|
|
172
172
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
173
|
-
|
|
173
|
+
_ELEREGBWcjs.Popover_default,
|
|
174
174
|
{
|
|
175
175
|
ref: overlayHandlerRef,
|
|
176
176
|
disabled,
|
|
@@ -182,7 +182,7 @@ function RichSelectList(props) {
|
|
|
182
182
|
padding: autosave ? void 0 : 5,
|
|
183
183
|
dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
|
|
184
184
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
185
|
-
|
|
185
|
+
_XF4T4J3Bcjs.RichSelectBox_default,
|
|
186
186
|
_X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
|
|
187
187
|
autosave,
|
|
188
188
|
selectedValues: selectedKeys,
|
|
@@ -231,7 +231,7 @@ function RichSelectList(props) {
|
|
|
231
231
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
232
232
|
"path",
|
|
233
233
|
{
|
|
234
|
-
fill: errorText ?
|
|
234
|
+
fill: errorText ? _UK5I7UHLcjs.ColorBaseDestructive700 : _UK5I7UHLcjs.ColorBaseGray800,
|
|
235
235
|
d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
|
|
236
236
|
}
|
|
237
237
|
)
|
|
@@ -243,7 +243,7 @@ function RichSelectList(props) {
|
|
|
243
243
|
}
|
|
244
244
|
),
|
|
245
245
|
(helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
246
|
-
|
|
246
|
+
_GUACYIXBcjs.Typography_default,
|
|
247
247
|
_X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
|
|
248
248
|
size: 100,
|
|
249
249
|
color: errorText ? "destructive-primary" : "gray700"
|
|
@@ -258,12 +258,12 @@ function RichSelectList(props) {
|
|
|
258
258
|
);
|
|
259
259
|
}
|
|
260
260
|
var RichSelectList_default = Object.assign(RichSelectList, {
|
|
261
|
-
Section:
|
|
262
|
-
Chip:
|
|
263
|
-
RadioButton:
|
|
261
|
+
Section: _ZTK7E42Pcjs.RichSelectSection_default,
|
|
262
|
+
Chip: _ID2WKUNHcjs.RichSelectChip_default,
|
|
263
|
+
RadioButton: _XVSTRGEEcjs.RichSelectRadioButton_default
|
|
264
264
|
});
|
|
265
265
|
|
|
266
266
|
|
|
267
267
|
|
|
268
268
|
exports.RichSelectList_default = RichSelectList_default;
|
|
269
|
-
//# sourceMappingURL=
|
|
269
|
+
//# sourceMappingURL=A3SEZYRY.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 07 May 2024
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 07 May 2024 19:30:08 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
|
|
@@ -19,10 +19,12 @@ import {
|
|
|
19
19
|
} from "./T6PXFSRX.js";
|
|
20
20
|
import {
|
|
21
21
|
Typography_default
|
|
22
|
-
} from "./
|
|
22
|
+
} from "./V562ZHQ7.js";
|
|
23
23
|
|
|
24
24
|
// src/LinkButton/LinkButton.tsx
|
|
25
|
-
import {
|
|
25
|
+
import {
|
|
26
|
+
forwardRef
|
|
27
|
+
} from "react";
|
|
26
28
|
import classNames from "classnames";
|
|
27
29
|
|
|
28
30
|
// css-module:../Button/Button.module.css#css-module
|
|
@@ -82,7 +84,8 @@ var LinkButton = forwardRef(
|
|
|
82
84
|
Button_module_default.icon,
|
|
83
85
|
iconSize_default[size],
|
|
84
86
|
foregroundColorClass
|
|
85
|
-
)
|
|
87
|
+
),
|
|
88
|
+
size
|
|
86
89
|
}
|
|
87
90
|
),
|
|
88
91
|
!loading && text && /* @__PURE__ */ jsx(Typography_default, { size: textVariant_default[size], weight: "medium", children: /* @__PURE__ */ jsx(
|
|
@@ -99,7 +102,8 @@ var LinkButton = forwardRef(
|
|
|
99
102
|
Button_module_default.icon,
|
|
100
103
|
iconSize_default[size],
|
|
101
104
|
foregroundColorClass
|
|
102
|
-
)
|
|
105
|
+
),
|
|
106
|
+
size
|
|
103
107
|
}
|
|
104
108
|
),
|
|
105
109
|
loading && /* @__PURE__ */ jsx(
|
|
@@ -133,4 +137,4 @@ var LinkButton_default = LinkButton;
|
|
|
133
137
|
export {
|
|
134
138
|
LinkButton_default
|
|
135
139
|
};
|
|
136
|
-
//# sourceMappingURL=
|
|
140
|
+
//# sourceMappingURL=COREQINY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:../Button/Button.module.css#css-module","css-module:./LinkButton.module.css#css-module"],"sourcesContent":["import {\n forwardRef,\n type HtmlHTMLAttributes,\n type ComponentProps,\n} from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport loadingIconSize from \"../Button/constants/loadingIconSize\";\nimport styles from \"./LinkButton.module.css\";\nimport { backgroundColor } from \"../colors//backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\n\ntype LinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\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?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n loading = false,\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n on = \"lightBackground\",\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n buttonStyles[size],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n [buttonStyles.disabled]: loading,\n },\n )}\n onClick={onClick}\n >\n {!loading && StartIcon && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n size={size}\n />\n )}\n {!loading && text && (\n <Typography size={textVariant[size]} weight=\"medium\">\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n >\n {text}\n </span>\n </Typography>\n )}\n {!loading && EndIcon && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n size={size}\n />\n )}\n {loading && (\n <svg\n className={classNames(buttonStyles.loading, foregroundColorClass)}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={buttonStyles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_hjka3_1\",\"buttonGap\":\"_buttonGap_hjka3_8\",\"disabled\":\"_disabled_hjka3_42\",\"disabledPrimary\":\"_disabledPrimary_hjka3_49\",\"fullWidth\":\"_fullWidth_hjka3_53\",\"sm\":\"_sm_hjka3_57\",\"md\":\"_md_hjka3_64\",\"lg\":\"_lg_hjka3_71\",\"icon\":\"_icon_hjka3_78\",\"smIcon\":\"_smIcon_hjka3_82\",\"mdIcon\":\"_mdIcon_hjka3_89\",\"lgIcon\":\"_lgIcon_hjka3_96\",\"loading\":\"_loading_hjka3_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hjka3_1\",\"loadingCircle\":\"_loadingCircle_hjka3_117\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACLqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACAte,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFkIpL,SAuBI,KAvBJ;AAvBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAED,CAAC,WAAW,QACX,oBAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,SAAS,oBAAoB;AAAA,cAChE,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAa;AAAA,kBACxB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _FESAFV44cjs = require('./FESAFV44.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _GUACYIXBcjs = require('./GUACYIXB.cjs');
|
|
8
8
|
|
|
9
9
|
// css-module:./Badge.module.css#css-module
|
|
10
10
|
var Badge_module_default = { "icon": "_icon_1g9xb_1" };
|
|
@@ -43,15 +43,15 @@ var Badge = ({
|
|
|
43
43
|
justifyContent: "center",
|
|
44
44
|
minHeight: 24,
|
|
45
45
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
46
|
-
|
|
46
|
+
_GUACYIXBcjs.Typography_default,
|
|
47
47
|
{
|
|
48
48
|
size: 100,
|
|
49
49
|
weight: "medium",
|
|
50
50
|
color: textColorForBackgroundColor(color),
|
|
51
51
|
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _FESAFV44cjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
|
|
52
|
-
Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon }),
|
|
52
|
+
Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon, size: "xs" }),
|
|
53
53
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
54
|
-
|
|
54
|
+
_GUACYIXBcjs.Typography_default,
|
|
55
55
|
{
|
|
56
56
|
color: textColorForBackgroundColor(color),
|
|
57
57
|
size: 100,
|
|
@@ -70,4 +70,4 @@ var Badge_default = Badge;
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
exports.Badge_default = Badge_default;
|
|
73
|
-
//# sourceMappingURL=
|
|
73
|
+
//# sourceMappingURL=CQQJROZE.cjs.map
|