@cambly/syntax-core 18.11.2 → 18.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ButtonGroup/ButtonGroup.cjs +2 -2
- package/dist/ButtonGroup/ButtonGroup.css +22 -6
- package/dist/ButtonGroup/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts +13 -1
- package/dist/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/Checkbox/Checkbox.cjs +2 -2
- package/dist/Checkbox/Checkbox.css +23 -14
- package/dist/Checkbox/Checkbox.css.map +1 -1
- package/dist/Checkbox/Checkbox.js +1 -1
- package/dist/RadioButton/RadioButton.cjs +2 -2
- package/dist/RadioButton/RadioButton.css +26 -17
- package/dist/RadioButton/RadioButton.css.map +1 -1
- package/dist/RadioButton/RadioButton.js +1 -1
- package/dist/RichSelect/RichSelectBox.cjs +5 -5
- package/dist/RichSelect/RichSelectBox.css +48 -23
- package/dist/RichSelect/RichSelectBox.css.map +1 -1
- package/dist/RichSelect/RichSelectBox.js +4 -4
- package/dist/RichSelect/RichSelectList.cjs +7 -7
- package/dist/RichSelect/RichSelectList.css +48 -23
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.js +6 -6
- package/dist/RichSelect/RichSelectRadioButton.cjs +3 -3
- package/dist/RichSelect/RichSelectRadioButton.css +26 -17
- package/dist/RichSelect/RichSelectRadioButton.css.map +1 -1
- package/dist/RichSelect/RichSelectRadioButton.js +2 -2
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/__chunks/{AWWUKCOZ.js → 2D2PXUUQ.js} +2 -2
- package/dist/__chunks/36DG472B.js +38 -0
- package/dist/__chunks/36DG472B.js.map +1 -0
- package/dist/__chunks/{24C55LXA.cjs → 4AI6GQ5U.cjs} +6 -8
- package/dist/__chunks/4AI6GQ5U.cjs.map +1 -0
- package/dist/__chunks/{ZQE3JK65.js → 4MHKTQMD.js} +6 -8
- package/dist/__chunks/4MHKTQMD.js.map +1 -0
- package/dist/__chunks/6KSVCCCB.cjs +38 -0
- package/dist/__chunks/6KSVCCCB.cjs.map +1 -0
- package/dist/__chunks/{CXYPA5D7.cjs → BCWRGKWL.cjs} +5 -5
- package/dist/__chunks/{I4HVELSQ.cjs → C46WMA7X.cjs} +1 -1
- package/dist/__chunks/{I4HVELSQ.cjs.map → C46WMA7X.cjs.map} +1 -1
- package/dist/__chunks/{743ZAVMI.cjs → FQSSK4FT.cjs} +3 -3
- package/dist/__chunks/{RNYDANOZ.cjs → OVHMMIVE.cjs} +5 -7
- package/dist/__chunks/OVHMMIVE.cjs.map +1 -0
- package/dist/__chunks/{WFKWSOMR.cjs → TJDFEWPT.cjs} +12 -12
- package/dist/__chunks/{MLYNSEQ2.js → TL2IBN7H.js} +1 -1
- package/dist/__chunks/{MLYNSEQ2.js.map → TL2IBN7H.js.map} +1 -1
- package/dist/__chunks/{KKV5SSD5.js → U6TGYOG7.js} +3 -3
- package/dist/__chunks/{H35XGYBG.js → Y6HBRXLN.js} +2 -2
- package/dist/__chunks/{WFOUJAMP.js → YMIQ7WYX.js} +5 -7
- package/dist/__chunks/YMIQ7WYX.js.map +1 -0
- package/dist/__chunks/{6FVYJXHO.js → ZGOEPXUG.js} +4 -4
- package/dist/__chunks/{UON4NESK.cjs → ZZPX5ZUM.cjs} +5 -5
- package/dist/index.cjs +9 -9
- package/dist/index.css +71 -37
- package/dist/index.css.map +1 -1
- package/dist/index.js +8 -8
- package/package.json +3 -3
- package/dist/__chunks/24C55LXA.cjs.map +0 -1
- package/dist/__chunks/BOX3VY3Q.js +0 -30
- package/dist/__chunks/BOX3VY3Q.js.map +0 -1
- package/dist/__chunks/C5XPZTFO.cjs +0 -30
- package/dist/__chunks/C5XPZTFO.cjs.map +0 -1
- package/dist/__chunks/RNYDANOZ.cjs.map +0 -1
- package/dist/__chunks/WFOUJAMP.js.map +0 -1
- package/dist/__chunks/ZQE3JK65.js.map +0 -1
- /package/dist/__chunks/{AWWUKCOZ.js.map → 2D2PXUUQ.js.map} +0 -0
- /package/dist/__chunks/{CXYPA5D7.cjs.map → BCWRGKWL.cjs.map} +0 -0
- /package/dist/__chunks/{743ZAVMI.cjs.map → FQSSK4FT.cjs.map} +0 -0
- /package/dist/__chunks/{WFKWSOMR.cjs.map → TJDFEWPT.cjs.map} +0 -0
- /package/dist/__chunks/{KKV5SSD5.js.map → U6TGYOG7.js.map} +0 -0
- /package/dist/__chunks/{H35XGYBG.js.map → Y6HBRXLN.js.map} +0 -0
- /package/dist/__chunks/{6FVYJXHO.js.map → ZGOEPXUG.js.map} +0 -0
- /package/dist/__chunks/{UON4NESK.cjs.map → ZZPX5ZUM.cjs.map} +0 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
|
+
|
|
3
|
+
// css-module:./ButtonGroup.module.css#css-module
|
|
4
|
+
var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_6o6o0_1", "horizontal": "_horizontal_6o6o0_5", "vertical": "_vertical_6o6o0_9", "smallGap": "_smallGap_6o6o0_13", "mediumGap": "_mediumGap_6o6o0_17", "largeGap": "_largeGap_6o6o0_21", "orientationhorizontalSmall": "_orientationhorizontalSmall_6o6o0_27", "orientationverticalSmall": "_orientationverticalSmall_6o6o0_31", "orientationhorizontalLarge": "_orientationhorizontalLarge_6o6o0_38", "orientationverticalLarge": "_orientationverticalLarge_6o6o0_42" };
|
|
5
|
+
|
|
6
|
+
// src/ButtonGroup/ButtonGroup.tsx
|
|
7
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
8
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
9
|
+
var gap = {
|
|
10
|
+
sm: ButtonGroup_module_default.smallGap,
|
|
11
|
+
md: ButtonGroup_module_default.mediumGap,
|
|
12
|
+
lg: ButtonGroup_module_default.largeGap
|
|
13
|
+
};
|
|
14
|
+
var ButtonGroup = ({
|
|
15
|
+
orientation = "horizontal",
|
|
16
|
+
size = "md",
|
|
17
|
+
children,
|
|
18
|
+
smOrientation,
|
|
19
|
+
lgOrientation
|
|
20
|
+
}) => {
|
|
21
|
+
const classnames = _classnames2.default.call(void 0,
|
|
22
|
+
ButtonGroup_module_default.buttonGroup,
|
|
23
|
+
gap[size],
|
|
24
|
+
smOrientation != null && ButtonGroup_module_default[`orientation${smOrientation}Small`],
|
|
25
|
+
lgOrientation != null && ButtonGroup_module_default[`orientation${lgOrientation}Large`],
|
|
26
|
+
{
|
|
27
|
+
[ButtonGroup_module_default.horizontal]: orientation === "horizontal",
|
|
28
|
+
[ButtonGroup_module_default.vertical]: orientation === "vertical"
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classnames, children });
|
|
32
|
+
};
|
|
33
|
+
var ButtonGroup_default = ButtonGroup;
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
exports.ButtonGroup_default = ButtonGroup_default;
|
|
38
|
+
//# sourceMappingURL=6KSVCCCB.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["css-module:./ButtonGroup.module.css#css-module","../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;AAAsG,IAAO,6BAAQ,EAAC,eAAc,wBAAuB,cAAa,uBAAsB,YAAW,qBAAoB,YAAW,sBAAqB,aAAY,uBAAsB,YAAW,sBAAqB,8BAA6B,wCAAuC,4BAA2B,sCAAqC,8BAA6B,wCAAuC,4BAA2B,qCAAoC;;;ACGtkB,OAAO,gBAAgB;AA8Dd;AA5DT,IAAM,MAAM;AAAA,EACV,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AACb;AAKA,IAAM,cAAc,CAAC;AAAA,EACnB,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAiCoB;AAClB,QAAM,aAAa;AAAA,IACjB,2BAAO;AAAA,IACP,IAAI,IAAI;AAAA,IACR,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE;AAAA,MACE,CAAC,2BAAO,UAAU,GAAG,gBAAgB;AAAA,MACrC,CAAC,2BAAO,QAAQ,GAAG,gBAAgB;AAAA,IACrC;AAAA,EACF;AAEA,SAAO,oBAAC,SAAI,WAAW,YAAa,UAAS;AAC/C;AAEA,IAAO,sBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_6o6o0_1\",\"horizontal\":\"_horizontal_6o6o0_5\",\"vertical\":\"_vertical_6o6o0_9\",\"smallGap\":\"_smallGap_6o6o0_13\",\"mediumGap\":\"_mediumGap_6o6o0_17\",\"largeGap\":\"_largeGap_6o6o0_21\",\"orientationhorizontalSmall\":\"_orientationhorizontalSmall_6o6o0_27\",\"orientationverticalSmall\":\"_orientationverticalSmall_6o6o0_31\",\"orientationhorizontalLarge\":\"_orientationhorizontalLarge_6o6o0_38\",\"orientationverticalLarge\":\"_orientationverticalLarge_6o6o0_42\"}","import { type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { type Size } from \"../constants\";\nimport classNames from \"classnames\";\n\nconst gap = {\n sm: styles.smallGap,\n md: styles.mediumGap,\n lg: styles.largeGap,\n} as const;\n\n/**\n * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.\n */\nconst ButtonGroup = ({\n orientation = \"horizontal\",\n size = \"md\",\n children,\n smOrientation,\n lgOrientation,\n}: {\n /**\n * The orientation of the button group\n *\n * @defaultValue \"horizontal\"\n *\n * Responsive props:\n * `smOrientation`\n * `lgOrientation`\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The size of the button group defines the spacing between each button\n *\n * * `sm`: 4px\n * * `md`: 8px\n * * `lg`: 12px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * Buttons to be rendered inside the button group\n */\n children?: ReactNode;\n /**\n * Bottom margin on sm (480px) or larger viewports.\n */\n smOrientation?: typeof orientation;\n /**\n * Bottom margin on lg (960px) or larger viewports.\n */\n lgOrientation?: typeof orientation;\n}): ReactElement => {\n const classnames = classNames(\n styles.buttonGroup,\n gap[size],\n smOrientation != null && styles[`orientation${smOrientation}Small`],\n lgOrientation != null && styles[`orientation${lgOrientation}Large`],\n {\n [styles.horizontal]: orientation === \"horizontal\",\n [styles.vertical]: orientation === \"vertical\",\n },\n );\n\n return <div className={classnames}>{children}</div>;\n};\n\nexport default ButtonGroup;\n"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _C46WMA7Xcjs = require('./C46WMA7X.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
@@ -68,12 +68,12 @@ function SelectList({
|
|
|
68
68
|
};
|
|
69
69
|
const getArrowIconColor = () => {
|
|
70
70
|
if (errorText) {
|
|
71
|
-
return
|
|
71
|
+
return _C46WMA7Xcjs.ColorBaseDestructive700;
|
|
72
72
|
} else {
|
|
73
73
|
if (color === "clear") {
|
|
74
|
-
return
|
|
74
|
+
return _C46WMA7Xcjs.ColorCambioWhite100;
|
|
75
75
|
} else {
|
|
76
|
-
return
|
|
76
|
+
return _C46WMA7Xcjs.ColorBaseGray700;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
};
|
|
@@ -148,4 +148,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
|
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
exports.SelectList = SelectList;
|
|
151
|
-
//# sourceMappingURL=
|
|
151
|
+
//# sourceMappingURL=BCWRGKWL.cjs.map
|
|
@@ -10,4 +10,4 @@ var ColorCambioWhite100 = "#ffffff";
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray700 = ColorBaseGray700; exports.ColorCambioWhite100 = ColorCambioWhite100;
|
|
13
|
-
//# sourceMappingURL=
|
|
13
|
+
//# sourceMappingURL=C46WMA7X.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 05 Aug 2024 17:36:59 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 ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\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\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"]}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _4AI6GQ5Ucjs = require('./4AI6GQ5U.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
@@ -19,7 +19,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
|
|
|
19
19
|
function RichSelectRadioButton(props, ref) {
|
|
20
20
|
const _a = props, { size, name } = _a, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["size", "name"]);
|
|
21
21
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
22
|
-
|
|
22
|
+
_4AI6GQ5Ucjs.RadioButton_default,
|
|
23
23
|
{
|
|
24
24
|
checked: isSelected,
|
|
25
25
|
disabled: isDisabled,
|
|
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
|
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
|
|
40
|
-
//# sourceMappingURL=
|
|
40
|
+
//# sourceMappingURL=FQSSK4FT.cjs.map
|
|
@@ -7,9 +7,6 @@ var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
|
7
7
|
var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var _2XIVACBMcjs = require('./2XIVACBM.cjs');
|
|
11
|
-
|
|
12
|
-
|
|
13
10
|
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
14
11
|
|
|
15
12
|
|
|
@@ -20,7 +17,7 @@ var _react = require('react');
|
|
|
20
17
|
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
21
18
|
|
|
22
19
|
// css-module:./Checkbox.module.css#css-module
|
|
23
|
-
var Checkbox_module_default = { "mainContainer": "
|
|
20
|
+
var Checkbox_module_default = { "mainContainer": "_mainContainer_1r7sy_1", "inputOverlay": "_inputOverlay_1r7sy_9", "checkbox": "_checkbox_1r7sy_17", "checkboxChecked": "_checkboxChecked_1r7sy_28", "checkboxError": "_checkboxError_1r7sy_33", "disabled": "_disabled_1r7sy_38", "cursorDisabled": "_cursorDisabled_1r7sy_42", "cursorEnabled": "_cursorEnabled_1r7sy_46", "sm": "_sm_1r7sy_50", "md": "_md_1r7sy_55", "smBorderRadius": "_smBorderRadius_1r7sy_60", "mdBorderRadius": "_mdBorderRadius_1r7sy_64", "checkmark": "_checkmark_1r7sy_68", "checkmarkError": "_checkmarkError_1r7sy_72" };
|
|
24
21
|
|
|
25
22
|
// src/Checkbox/Checkbox.tsx
|
|
26
23
|
var _jsxruntime = require('react/jsx-runtime');
|
|
@@ -66,7 +63,8 @@ var Checkbox = ({
|
|
|
66
63
|
{
|
|
67
64
|
[_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
|
|
68
65
|
},
|
|
69
|
-
|
|
66
|
+
checked && Checkbox_module_default.checkboxChecked,
|
|
67
|
+
error && Checkbox_module_default.checkboxError
|
|
70
68
|
),
|
|
71
69
|
children: checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
72
70
|
"path",
|
|
@@ -103,7 +101,7 @@ var Checkbox = ({
|
|
|
103
101
|
_5NQO6SP3cjs.Typography_default,
|
|
104
102
|
{
|
|
105
103
|
size: typographySize[size],
|
|
106
|
-
color: error ? "destructive-
|
|
104
|
+
color: error ? "destructive-darkBackground" : "primary",
|
|
107
105
|
children: label
|
|
108
106
|
}
|
|
109
107
|
)
|
|
@@ -116,4 +114,4 @@ var Checkbox_default = Checkbox;
|
|
|
116
114
|
|
|
117
115
|
|
|
118
116
|
exports.Checkbox_default = Checkbox_default;
|
|
119
|
-
//# sourceMappingURL=
|
|
117
|
+
//# sourceMappingURL=OVHMMIVE.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,mBAAkB,6BAA4B,iBAAgB,2BAA0B,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;ADmFvnB,SAuBQ,KAvBR;AA3EJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,oBAAoB;AACtB,MA8CoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,WAAW,wBAAO;AAAA,cAClB,SAAS,wBAAO;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,oBAAkB;AAAA,YAClB,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,+BAA+B;AAAA,YAE7C;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst typographySize = {\n sm: 100,\n md: 200,\n} as const;\n\nconst iconWidth = {\n sm: 12,\n md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n checked = false,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n size = \"md\",\n label,\n error = false,\n onChange,\n \"aria-describedby\": ariaDescribedby,\n}: {\n /**\n * Whether or not the box has been clicked\n *\n * @defaultValue false\n */\n checked: boolean;\n /**\n * Test id for the checkbox\n */\n \"data-testid\"?: string;\n /**\n * The callback to be called when the checkbox value changes\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether or not the box is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The size of the checkbox and icon\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * The text accompanying the checkbox\n */\n label: string;\n /**\n * Whether or not there is an error with the input\n *\n * @defaultValue false\n */\n error?: boolean;\n /**\n * The aria-describedby attribute for the checkbox. This aria- prop identifies the element that describes the element on which the attribute is set.\n *\n * @defaultValue undefined\n */\n \"aria-describedby\"?: string;\n}): ReactElement => {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n return (\n <label\n className={classNames(\n styles.mainContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n },\n )}\n >\n <div\n className={classNames(\n styles.checkbox,\n styles[size],\n {\n [focusStyles.accessibilityOutlineFocus]:\n isFocused && isFocusVisible,\n },\n checked && styles.checkboxChecked,\n error && styles.checkboxError,\n )}\n >\n {checked && (\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n <path\n className={error ? styles.checkmarkError : styles.checkmark}\n d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n ></path>\n </svg>\n )}\n </div>\n <input\n data-testid={dataTestId}\n aria-describedby={ariaDescribedby}\n type=\"checkbox\"\n className={classNames(\n styles.inputOverlay,\n styles[size],\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n <Typography\n size={typographySize[size]}\n color={error ? \"destructive-darkBackground\" : \"primary\"}\n >\n {label}\n </Typography>\n </label>\n );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1r7sy_1\",\"inputOverlay\":\"_inputOverlay_1r7sy_9\",\"checkbox\":\"_checkbox_1r7sy_17\",\"checkboxChecked\":\"_checkboxChecked_1r7sy_28\",\"checkboxError\":\"_checkboxError_1r7sy_33\",\"disabled\":\"_disabled_1r7sy_38\",\"cursorDisabled\":\"_cursorDisabled_1r7sy_42\",\"cursorEnabled\":\"_cursorEnabled_1r7sy_46\",\"sm\":\"_sm_1r7sy_50\",\"md\":\"_md_1r7sy_55\",\"smBorderRadius\":\"_smBorderRadius_1r7sy_60\",\"mdBorderRadius\":\"_mdBorderRadius_1r7sy_64\",\"checkmark\":\"_checkmark_1r7sy_68\",\"checkmarkError\":\"_checkmarkError_1r7sy_72\"}"]}
|
|
@@ -9,18 +9,18 @@ var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _C46WMA7Xcjs = require('./C46WMA7X.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
var
|
|
17
|
+
var _ZZPX5ZUMcjs = require('./ZZPX5ZUM.cjs');
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
var _EHZAOGLQcjs = require('./EHZAOGLQ.cjs');
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
var
|
|
23
|
+
var _FQSSK4FTcjs = require('./FQSSK4FT.cjs');
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
var _URBKDUMUcjs = require('./URBKDUMU.cjs');
|
|
@@ -103,11 +103,11 @@ function RichSelectList(props) {
|
|
|
103
103
|
const disabled = !isHydrated || disabledProp;
|
|
104
104
|
const overlayHandlerRef = _react.useRef.call(void 0, {});
|
|
105
105
|
const selectedKeysProp = _react.useMemo.call(void 0,
|
|
106
|
-
() =>
|
|
106
|
+
() => _ZZPX5ZUMcjs.convertSelection.call(void 0, selectedValuesProp),
|
|
107
107
|
[selectedValuesProp]
|
|
108
108
|
);
|
|
109
109
|
const defaultSelectedKeys = _react.useMemo.call(void 0,
|
|
110
|
-
() =>
|
|
110
|
+
() => _ZZPX5ZUMcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
|
|
111
111
|
[defaultSelectedValuesProp]
|
|
112
112
|
);
|
|
113
113
|
const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0,
|
|
@@ -147,12 +147,12 @@ function RichSelectList(props) {
|
|
|
147
147
|
};
|
|
148
148
|
const getArrowIconColor = () => {
|
|
149
149
|
if (errorText) {
|
|
150
|
-
return
|
|
150
|
+
return _C46WMA7Xcjs.ColorBaseDestructive700;
|
|
151
151
|
} else {
|
|
152
152
|
if (color === "clear") {
|
|
153
|
-
return
|
|
153
|
+
return _C46WMA7Xcjs.ColorCambioWhite100;
|
|
154
154
|
} else {
|
|
155
|
-
return
|
|
155
|
+
return _C46WMA7Xcjs.ColorBaseGray700;
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
};
|
|
@@ -160,7 +160,7 @@ function RichSelectList(props) {
|
|
|
160
160
|
_reactariacomponents.Provider,
|
|
161
161
|
{
|
|
162
162
|
values: [
|
|
163
|
-
[
|
|
163
|
+
[_ZZPX5ZUMcjs.RichSelectBoxContext, { autoFocus: true }],
|
|
164
164
|
[_3RX4RMGCcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
|
|
165
165
|
// this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
|
|
166
166
|
],
|
|
@@ -201,7 +201,7 @@ function RichSelectList(props) {
|
|
|
201
201
|
dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
|
|
202
202
|
role: "menu",
|
|
203
203
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
204
|
-
|
|
204
|
+
_ZZPX5ZUMcjs.RichSelectBox_default,
|
|
205
205
|
_X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
|
|
206
206
|
autosave,
|
|
207
207
|
selectedValues: selectedKeys,
|
|
@@ -280,10 +280,10 @@ function RichSelectList(props) {
|
|
|
280
280
|
var RichSelectList_default = Object.assign(RichSelectList, {
|
|
281
281
|
Section: _EHZAOGLQcjs.RichSelectSection_default,
|
|
282
282
|
Chip: _URBKDUMUcjs.RichSelectChip_default,
|
|
283
|
-
RadioButton:
|
|
283
|
+
RadioButton: _FQSSK4FTcjs.RichSelectRadioButton_default
|
|
284
284
|
});
|
|
285
285
|
|
|
286
286
|
|
|
287
287
|
|
|
288
288
|
exports.RichSelectList_default = RichSelectList_default;
|
|
289
|
-
//# sourceMappingURL=
|
|
289
|
+
//# sourceMappingURL=TJDFEWPT.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 05 Aug 2024 17:36:59 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 ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\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\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ButtonGroup_default
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./36DG472B.js";
|
|
5
5
|
import {
|
|
6
6
|
Button_default
|
|
7
7
|
} from "./BIW5AZCF.js";
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
} from "./AHICHJTL.js";
|
|
14
14
|
import {
|
|
15
15
|
RichSelectRadioButton_default
|
|
16
|
-
} from "./
|
|
16
|
+
} from "./2D2PXUUQ.js";
|
|
17
17
|
import {
|
|
18
18
|
RichSelectChip_default
|
|
19
19
|
} from "./56LMASNQ.js";
|
|
@@ -208,4 +208,4 @@ export {
|
|
|
208
208
|
RichSelectBoxContext,
|
|
209
209
|
RichSelectBox_default
|
|
210
210
|
};
|
|
211
|
-
//# sourceMappingURL=
|
|
211
|
+
//# sourceMappingURL=U6TGYOG7.js.map
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
ColorBaseDestructive700,
|
|
4
4
|
ColorBaseGray700,
|
|
5
5
|
ColorCambioWhite100
|
|
6
|
-
} from "./
|
|
6
|
+
} from "./TL2IBN7H.js";
|
|
7
7
|
import {
|
|
8
8
|
Focus_module_default
|
|
9
9
|
} from "./KKADUD65.js";
|
|
@@ -148,4 +148,4 @@ SelectList.Option = SelectOption_default;
|
|
|
148
148
|
export {
|
|
149
149
|
SelectList
|
|
150
150
|
};
|
|
151
|
-
//# sourceMappingURL=
|
|
151
|
+
//# sourceMappingURL=Y6HBRXLN.js.map
|
|
@@ -5,9 +5,6 @@ import {
|
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
7
|
} from "./DAK5IGJK.js";
|
|
8
|
-
import {
|
|
9
|
-
colors_module_default
|
|
10
|
-
} from "./XSYKMCV5.js";
|
|
11
8
|
import {
|
|
12
9
|
useIsHydrated
|
|
13
10
|
} from "./JB65NEXK.js";
|
|
@@ -20,7 +17,7 @@ import { useState } from "react";
|
|
|
20
17
|
import classNames from "classnames";
|
|
21
18
|
|
|
22
19
|
// css-module:./Checkbox.module.css#css-module
|
|
23
|
-
var Checkbox_module_default = { "mainContainer": "
|
|
20
|
+
var Checkbox_module_default = { "mainContainer": "_mainContainer_1r7sy_1", "inputOverlay": "_inputOverlay_1r7sy_9", "checkbox": "_checkbox_1r7sy_17", "checkboxChecked": "_checkboxChecked_1r7sy_28", "checkboxError": "_checkboxError_1r7sy_33", "disabled": "_disabled_1r7sy_38", "cursorDisabled": "_cursorDisabled_1r7sy_42", "cursorEnabled": "_cursorEnabled_1r7sy_46", "sm": "_sm_1r7sy_50", "md": "_md_1r7sy_55", "smBorderRadius": "_smBorderRadius_1r7sy_60", "mdBorderRadius": "_mdBorderRadius_1r7sy_64", "checkmark": "_checkmark_1r7sy_68", "checkmarkError": "_checkmarkError_1r7sy_72" };
|
|
24
21
|
|
|
25
22
|
// src/Checkbox/Checkbox.tsx
|
|
26
23
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -66,7 +63,8 @@ var Checkbox = ({
|
|
|
66
63
|
{
|
|
67
64
|
[Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
|
|
68
65
|
},
|
|
69
|
-
|
|
66
|
+
checked && Checkbox_module_default.checkboxChecked,
|
|
67
|
+
error && Checkbox_module_default.checkboxError
|
|
70
68
|
),
|
|
71
69
|
children: checked && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
|
|
72
70
|
"path",
|
|
@@ -103,7 +101,7 @@ var Checkbox = ({
|
|
|
103
101
|
Typography_default,
|
|
104
102
|
{
|
|
105
103
|
size: typographySize[size],
|
|
106
|
-
color: error ? "destructive-
|
|
104
|
+
color: error ? "destructive-darkBackground" : "primary",
|
|
107
105
|
children: label
|
|
108
106
|
}
|
|
109
107
|
)
|
|
@@ -116,4 +114,4 @@ var Checkbox_default = Checkbox;
|
|
|
116
114
|
export {
|
|
117
115
|
Checkbox_default
|
|
118
116
|
};
|
|
119
|
-
//# sourceMappingURL=
|
|
117
|
+
//# sourceMappingURL=YMIQ7WYX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst typographySize = {\n sm: 100,\n md: 200,\n} as const;\n\nconst iconWidth = {\n sm: 12,\n md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n checked = false,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n size = \"md\",\n label,\n error = false,\n onChange,\n \"aria-describedby\": ariaDescribedby,\n}: {\n /**\n * Whether or not the box has been clicked\n *\n * @defaultValue false\n */\n checked: boolean;\n /**\n * Test id for the checkbox\n */\n \"data-testid\"?: string;\n /**\n * The callback to be called when the checkbox value changes\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether or not the box is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The size of the checkbox and icon\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * The text accompanying the checkbox\n */\n label: string;\n /**\n * Whether or not there is an error with the input\n *\n * @defaultValue false\n */\n error?: boolean;\n /**\n * The aria-describedby attribute for the checkbox. This aria- prop identifies the element that describes the element on which the attribute is set.\n *\n * @defaultValue undefined\n */\n \"aria-describedby\"?: string;\n}): ReactElement => {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n return (\n <label\n className={classNames(\n styles.mainContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n },\n )}\n >\n <div\n className={classNames(\n styles.checkbox,\n styles[size],\n {\n [focusStyles.accessibilityOutlineFocus]:\n isFocused && isFocusVisible,\n },\n checked && styles.checkboxChecked,\n error && styles.checkboxError,\n )}\n >\n {checked && (\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n <path\n className={error ? styles.checkmarkError : styles.checkmark}\n d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n ></path>\n </svg>\n )}\n </div>\n <input\n data-testid={dataTestId}\n aria-describedby={ariaDescribedby}\n type=\"checkbox\"\n className={classNames(\n styles.inputOverlay,\n styles[size],\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n <Typography\n size={typographySize[size]}\n color={error ? \"destructive-darkBackground\" : \"primary\"}\n >\n {label}\n </Typography>\n </label>\n );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1r7sy_1\",\"inputOverlay\":\"_inputOverlay_1r7sy_9\",\"checkbox\":\"_checkbox_1r7sy_17\",\"checkboxChecked\":\"_checkboxChecked_1r7sy_28\",\"checkboxError\":\"_checkboxError_1r7sy_33\",\"disabled\":\"_disabled_1r7sy_38\",\"cursorDisabled\":\"_cursorDisabled_1r7sy_42\",\"cursorEnabled\":\"_cursorEnabled_1r7sy_46\",\"sm\":\"_sm_1r7sy_50\",\"md\":\"_md_1r7sy_55\",\"smBorderRadius\":\"_smBorderRadius_1r7sy_60\",\"mdBorderRadius\":\"_mdBorderRadius_1r7sy_64\",\"checkmark\":\"_checkmark_1r7sy_68\",\"checkmarkError\":\"_checkmarkError_1r7sy_72\"}"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,mBAAkB,6BAA4B,iBAAgB,2BAA0B,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;ADmFvnB,SAuBQ,KAvBR;AA3EJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,oBAAoB;AACtB,MA8CoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,WAAW,wBAAO;AAAA,cAClB,SAAS,wBAAO;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,oBAAkB;AAAA,YAClB,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,+BAA+B;AAAA,YAE7C;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}
|
|
@@ -9,18 +9,18 @@ import {
|
|
|
9
9
|
ColorBaseDestructive700,
|
|
10
10
|
ColorBaseGray700,
|
|
11
11
|
ColorCambioWhite100
|
|
12
|
-
} from "./
|
|
12
|
+
} from "./TL2IBN7H.js";
|
|
13
13
|
import {
|
|
14
14
|
RichSelectBoxContext,
|
|
15
15
|
RichSelectBox_default,
|
|
16
16
|
convertSelection
|
|
17
|
-
} from "./
|
|
17
|
+
} from "./U6TGYOG7.js";
|
|
18
18
|
import {
|
|
19
19
|
RichSelectSection_default
|
|
20
20
|
} from "./AHICHJTL.js";
|
|
21
21
|
import {
|
|
22
22
|
RichSelectRadioButton_default
|
|
23
|
-
} from "./
|
|
23
|
+
} from "./2D2PXUUQ.js";
|
|
24
24
|
import {
|
|
25
25
|
RichSelectChip_default
|
|
26
26
|
} from "./56LMASNQ.js";
|
|
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
286
286
|
export {
|
|
287
287
|
RichSelectList_default
|
|
288
288
|
};
|
|
289
|
-
//# sourceMappingURL=
|
|
289
|
+
//# sourceMappingURL=ZGOEPXUG.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _6KSVCCCBcjs = require('./6KSVCCCB.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _RIAJV3ZHcjs = require('./RIAJV3ZH.cjs');
|
|
@@ -13,7 +13,7 @@ var _A3B4YKGNcjs = require('./A3B4YKGN.cjs');
|
|
|
13
13
|
var _EHZAOGLQcjs = require('./EHZAOGLQ.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _FQSSK4FTcjs = require('./FQSSK4FT.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
var _URBKDUMUcjs = require('./URBKDUMU.cjs');
|
|
@@ -167,7 +167,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
|
|
|
167
167
|
marginTop: -5,
|
|
168
168
|
display: "flex",
|
|
169
169
|
justifyContent: "end",
|
|
170
|
-
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
170
|
+
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _6KSVCCCBcjs.ButtonGroup_default, { orientation: "horizontal", children: [
|
|
171
171
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
172
172
|
_RIAJV3ZHcjs.Button_default,
|
|
173
173
|
{
|
|
@@ -200,7 +200,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
|
|
|
200
200
|
var RichSelectBox_default = Object.assign(RichSelectBox, {
|
|
201
201
|
Section: _EHZAOGLQcjs.RichSelectSection_default,
|
|
202
202
|
Chip: _URBKDUMUcjs.RichSelectChip_default,
|
|
203
|
-
RadioButton:
|
|
203
|
+
RadioButton: _FQSSK4FTcjs.RichSelectRadioButton_default
|
|
204
204
|
});
|
|
205
205
|
|
|
206
206
|
|
|
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
|
|
|
208
208
|
|
|
209
209
|
|
|
210
210
|
exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
|
|
211
|
-
//# sourceMappingURL=
|
|
211
|
+
//# sourceMappingURL=ZZPX5ZUM.cjs.map
|
package/dist/index.cjs
CHANGED
|
@@ -13,7 +13,7 @@ var _GEXK47GRcjs = require('./__chunks/GEXK47GR.cjs');
|
|
|
13
13
|
var _IBT4YOI5cjs = require('./__chunks/IBT4YOI5.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _OVHMMIVEcjs = require('./__chunks/OVHMMIVE.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
var _AVJQ2E2Gcjs = require('./__chunks/AVJQ2E2G.cjs');
|
|
@@ -35,10 +35,10 @@ var _RUXLZWRZcjs = require('./__chunks/RUXLZWRZ.cjs');
|
|
|
35
35
|
require('./__chunks/TH4TA3JN.cjs');
|
|
36
36
|
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var _BCWRGKWLcjs = require('./__chunks/BCWRGKWL.cjs');
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
var
|
|
41
|
+
var _TJDFEWPTcjs = require('./__chunks/TJDFEWPT.cjs');
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
var _B6775YJ4cjs = require('./__chunks/B6775YJ4.cjs');
|
|
@@ -48,11 +48,11 @@ require('./__chunks/3RX4RMGC.cjs');
|
|
|
48
48
|
|
|
49
49
|
var _PZEDDYBZcjs = require('./__chunks/PZEDDYBZ.cjs');
|
|
50
50
|
require('./__chunks/WFVGNGEP.cjs');
|
|
51
|
-
require('./__chunks/
|
|
52
|
-
require('./__chunks/
|
|
51
|
+
require('./__chunks/C46WMA7X.cjs');
|
|
52
|
+
require('./__chunks/ZZPX5ZUM.cjs');
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
var
|
|
55
|
+
var _6KSVCCCBcjs = require('./__chunks/6KSVCCCB.cjs');
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
var _RIAJV3ZHcjs = require('./__chunks/RIAJV3ZH.cjs');
|
|
@@ -64,7 +64,7 @@ require('./__chunks/3P2PWHOU.cjs');
|
|
|
64
64
|
require('./__chunks/65BTPZZT.cjs');
|
|
65
65
|
require('./__chunks/EHZAOGLQ.cjs');
|
|
66
66
|
require('./__chunks/MF7LLV7V.cjs');
|
|
67
|
-
require('./__chunks/
|
|
67
|
+
require('./__chunks/FQSSK4FT.cjs');
|
|
68
68
|
require('./__chunks/URBKDUMU.cjs');
|
|
69
69
|
|
|
70
70
|
|
|
@@ -72,7 +72,7 @@ var _IHGDCH62cjs = require('./__chunks/IHGDCH62.cjs');
|
|
|
72
72
|
require('./__chunks/RYUXG4AS.cjs');
|
|
73
73
|
|
|
74
74
|
|
|
75
|
-
var
|
|
75
|
+
var _4AI6GQ5Ucjs = require('./__chunks/4AI6GQ5U.cjs');
|
|
76
76
|
require('./__chunks/XLUVINJW.cjs');
|
|
77
77
|
|
|
78
78
|
|
|
@@ -151,5 +151,5 @@ require('./__chunks/X2SDR4SD.cjs');
|
|
|
151
151
|
|
|
152
152
|
|
|
153
153
|
|
|
154
|
-
exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _E3A6VFMBcjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _RIAJV3ZHcjs.Button_default; exports.ButtonGroup =
|
|
154
|
+
exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _E3A6VFMBcjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _RIAJV3ZHcjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _OVHMMIVEcjs.Checkbox_default; exports.Chip = _IHGDCH62cjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _CCKTB7L5cjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _PZEDDYBZcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _JOTFTEBXcjs.LinkButton_default; exports.Modal = _3Y6HGWJGcjs.Modal; exports.Popover = _B6775YJ4cjs.Popover_default; exports.RadioButton = _4AI6GQ5Ucjs.RadioButton_default; exports.RichSelectList = _TJDFEWPTcjs.RichSelectList_default; exports.SelectList = _BCWRGKWLcjs.SelectList; exports.Tabs = _6VFQ76T5cjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _AUO7CEJIcjs.TextArea_default; exports.TextField = _5NI7VPKScjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _UXSGTOGUcjs.Tooltip_default; exports.Typography = _5NQO6SP3cjs.Typography_default;
|
|
155
155
|
//# sourceMappingURL=index.cjs.map
|