@cambly/syntax-core 18.5.0 → 18.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/Button.cjs +3 -3
- package/dist/Button/Button.css +21 -20
- package/dist/Button/Button.css.map +1 -1
- package/dist/Button/Button.js +2 -2
- package/dist/Button/constants/iconSize.cjs +2 -2
- package/dist/Button/constants/iconSize.css +21 -20
- package/dist/Button/constants/iconSize.css.map +1 -1
- package/dist/Button/constants/iconSize.js +1 -1
- package/dist/Dialog/ModalDialog.cjs +6 -5
- package/dist/Dialog/ModalDialog.css +21 -20
- package/dist/Dialog/ModalDialog.css.map +1 -1
- package/dist/Dialog/ModalDialog.js +4 -3
- package/dist/IconButton/IconButton.cjs +5 -4
- package/dist/IconButton/IconButton.css +21 -20
- package/dist/IconButton/IconButton.css.map +1 -1
- package/dist/IconButton/IconButton.js +3 -2
- package/dist/IconLinkButton/IconLinkButton.cjs +17 -0
- package/dist/IconLinkButton/IconLinkButton.cjs.map +1 -0
- package/dist/IconLinkButton/IconLinkButton.css +607 -0
- package/dist/IconLinkButton/IconLinkButton.css.map +1 -0
- package/dist/IconLinkButton/IconLinkButton.d.ts +76 -0
- package/dist/IconLinkButton/IconLinkButton.js +17 -0
- package/dist/IconLinkButton/IconLinkButton.js.map +1 -0
- package/dist/LinkButton/LinkButton.cjs +4 -3
- package/dist/LinkButton/LinkButton.css +21 -20
- package/dist/LinkButton/LinkButton.css.map +1 -1
- package/dist/LinkButton/LinkButton.js +3 -2
- package/dist/Modal/Modal.cjs +6 -5
- package/dist/Modal/Modal.css +21 -20
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.js +4 -3
- package/dist/Popover/Popover.cjs +7 -6
- package/dist/Popover/Popover.css +21 -20
- package/dist/Popover/Popover.css.map +1 -1
- package/dist/Popover/Popover.js +5 -4
- package/dist/RichSelect/RichSelectBox.cjs +5 -5
- package/dist/RichSelect/RichSelectBox.css +21 -20
- package/dist/RichSelect/RichSelectBox.css.map +1 -1
- package/dist/RichSelect/RichSelectBox.js +4 -4
- package/dist/RichSelect/RichSelectList.cjs +12 -11
- package/dist/RichSelect/RichSelectList.css +21 -20
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.d.ts +5 -0
- package/dist/RichSelect/RichSelectList.js +10 -9
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/__chunks/{IUSNCMKA.cjs → 33OLOKXZ.cjs} +5 -5
- package/dist/__chunks/33OLOKXZ.cjs.map +1 -0
- package/dist/__chunks/{BZ546NNE.cjs → 5UGT7MVT.cjs} +18 -18
- package/dist/__chunks/{BZ546NNE.cjs.map → 5UGT7MVT.cjs.map} +1 -1
- package/dist/__chunks/64WM4STC.js +22 -0
- package/dist/__chunks/{ESVDNOSI.js.map → 64WM4STC.js.map} +1 -1
- package/dist/__chunks/65BTPZZT.cjs +22 -0
- package/dist/__chunks/{7TEFD526.cjs.map → 65BTPZZT.cjs.map} +1 -1
- package/dist/__chunks/{YJAKY2I2.cjs → 7QBU4DTX.cjs} +4 -4
- package/dist/__chunks/{O2K6UM3Z.cjs → A7LK5QZS.cjs} +34 -15
- package/dist/__chunks/A7LK5QZS.cjs.map +1 -0
- package/dist/__chunks/{C4GAUB4Y.cjs → AHFP6M2N.cjs} +3 -3
- package/dist/__chunks/BFZKWCPH.cjs +83 -0
- package/dist/__chunks/BFZKWCPH.cjs.map +1 -0
- package/dist/__chunks/{L67MBZZR.cjs → BIJUVIB4.cjs} +2 -4
- package/dist/__chunks/BIJUVIB4.cjs.map +1 -0
- package/dist/__chunks/{BNRTELQX.js → CP27NWEM.js} +5 -5
- package/dist/__chunks/CP27NWEM.js.map +1 -0
- package/dist/__chunks/{RUHTSUF3.js → F2UOAZUN.js} +2 -2
- package/dist/__chunks/F2UOAZUN.js.map +1 -0
- package/dist/__chunks/{65PXO4OL.js → H4FEI25U.js} +2 -2
- package/dist/__chunks/JE76S4R4.js +83 -0
- package/dist/__chunks/JE76S4R4.js.map +1 -0
- package/dist/__chunks/{TU2BVOKD.js → JFPMPJ2P.js} +5 -5
- package/dist/__chunks/{RCCK2EW4.cjs → NIIFJYOC.cjs} +3 -3
- package/dist/__chunks/{IYYTLOO3.cjs → NNGCYWZA.cjs} +3 -3
- package/dist/__chunks/{BTBAAACD.js → NOPJE4A2.js} +3 -3
- package/dist/__chunks/{BTBAAACD.js.map → NOPJE4A2.js.map} +1 -1
- package/dist/__chunks/{HTCVFULF.js → OXV7VGXO.js} +1 -3
- package/dist/__chunks/{HTCVFULF.js.map → OXV7VGXO.js.map} +1 -1
- package/dist/__chunks/{LIUV3J2M.cjs → QKBS4OXL.cjs} +6 -6
- package/dist/__chunks/{UYQTZSTJ.js → R47ZRXRK.js} +30 -11
- package/dist/__chunks/R47ZRXRK.js.map +1 -0
- package/dist/__chunks/{BLW57GRR.js → RPWXCCIV.js} +2 -2
- package/dist/__chunks/TH4TA3JN.cjs +9 -0
- package/dist/__chunks/TH4TA3JN.cjs.map +1 -0
- package/dist/__chunks/{MZOGVH4K.js → UASXKT55.js} +2 -2
- package/dist/__chunks/{TSMYMWWE.cjs → UYUCK2UE.cjs} +7 -7
- package/dist/__chunks/{TSMYMWWE.cjs.map → UYUCK2UE.cjs.map} +1 -1
- package/dist/__chunks/{SNLD3DG6.js → W7VHIMWJ.js} +2 -2
- package/dist/__chunks/YLWWTB4I.js +9 -0
- package/dist/__chunks/YLWWTB4I.js.map +1 -0
- package/dist/index.cjs +24 -18
- package/dist/index.css +21 -20
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +25 -19
- package/package.json +1 -1
- package/dist/__chunks/7TEFD526.cjs +0 -22
- package/dist/__chunks/BNRTELQX.js.map +0 -1
- package/dist/__chunks/ESVDNOSI.js +0 -22
- package/dist/__chunks/IUSNCMKA.cjs.map +0 -1
- package/dist/__chunks/L67MBZZR.cjs.map +0 -1
- package/dist/__chunks/O2K6UM3Z.cjs.map +0 -1
- package/dist/__chunks/RUHTSUF3.js.map +0 -1
- package/dist/__chunks/UYQTZSTJ.js.map +0 -1
- /package/dist/__chunks/{YJAKY2I2.cjs.map → 7QBU4DTX.cjs.map} +0 -0
- /package/dist/__chunks/{C4GAUB4Y.cjs.map → AHFP6M2N.cjs.map} +0 -0
- /package/dist/__chunks/{65PXO4OL.js.map → H4FEI25U.js.map} +0 -0
- /package/dist/__chunks/{TU2BVOKD.js.map → JFPMPJ2P.js.map} +0 -0
- /package/dist/__chunks/{RCCK2EW4.cjs.map → NIIFJYOC.cjs.map} +0 -0
- /package/dist/__chunks/{IYYTLOO3.cjs.map → NNGCYWZA.cjs.map} +0 -0
- /package/dist/__chunks/{LIUV3J2M.cjs.map → QKBS4OXL.cjs.map} +0 -0
- /package/dist/__chunks/{BLW57GRR.js.map → RPWXCCIV.js.map} +0 -0
- /package/dist/__chunks/{MZOGVH4K.js.map → UASXKT55.js.map} +0 -0
- /package/dist/__chunks/{SNLD3DG6.js.map → W7VHIMWJ.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"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,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;AD4IrkB,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,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;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,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;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","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 { materialIconSize, internalIconSize } 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 materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[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 materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[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\":\"
|
|
1
|
+
{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"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,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;AD4IrkB,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,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;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,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;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","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 { materialIconSize, internalIconSize } 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 materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[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 materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[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_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ModalDialog_default
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./RPWXCCIV.js";
|
|
5
5
|
import {
|
|
6
6
|
Dialog_default
|
|
7
7
|
} from "./5HEC7ASW.js";
|
|
@@ -141,4 +141,4 @@ export {
|
|
|
141
141
|
AriaPopover,
|
|
142
142
|
Popover_default
|
|
143
143
|
};
|
|
144
|
-
//# sourceMappingURL=
|
|
144
|
+
//# sourceMappingURL=W7VHIMWJ.js.map
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
// css-module:../Button/Button.module.css#css-module
|
|
4
|
+
var Button_module_default = { "button": "_button_v2jgj_1", "buttonGap": "_buttonGap_v2jgj_8", "disabled": "_disabled_v2jgj_42", "disabledPrimary": "_disabledPrimary_v2jgj_57", "fullWidth": "_fullWidth_v2jgj_61", "sm": "_sm_v2jgj_65", "md": "_md_v2jgj_72", "lg": "_lg_v2jgj_79", "icon": "_icon_v2jgj_86", "smIcon": "_smIcon_v2jgj_90", "mdIcon": "_mdIcon_v2jgj_97", "lgIcon": "_lgIcon_v2jgj_104", "loading": "_loading_v2jgj_121", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_v2jgj_1", "loadingCircle": "_loadingCircle_v2jgj_125" };
|
|
5
|
+
|
|
6
|
+
export {
|
|
7
|
+
Button_module_default
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=YLWWTB4I.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["css-module:../Button/Button.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}"],"mappings":";;;AAA4F,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,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _RC7EMZ6Ncjs = require('./__chunks/RC7EMZ6N.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _XG7O4UGWcjs = require('./__chunks/XG7O4UGW.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _5COVOOB3cjs = require('./__chunks/5COVOOB3.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
+
var _L5RBAKANcjs = require('./__chunks/L5RBAKAN.cjs');
|
|
14
|
+
|
|
15
|
+
|
|
13
16
|
var _C3FW5QDGcjs = require('./__chunks/C3FW5QDG.cjs');
|
|
14
17
|
|
|
15
18
|
|
|
16
19
|
var _L32D5WEGcjs = require('./__chunks/L32D5WEG.cjs');
|
|
17
20
|
|
|
18
21
|
|
|
19
|
-
var
|
|
22
|
+
var _NNGCYWZAcjs = require('./__chunks/NNGCYWZA.cjs');
|
|
20
23
|
|
|
21
24
|
|
|
22
25
|
var _Q4P2W7UUcjs = require('./__chunks/Q4P2W7UU.cjs');
|
|
@@ -25,38 +28,40 @@ require('./__chunks/G3SXARBL.cjs');
|
|
|
25
28
|
require('./__chunks/THM3NAFO.cjs');
|
|
26
29
|
|
|
27
30
|
|
|
28
|
-
var
|
|
31
|
+
var _5UGT7MVTcjs = require('./__chunks/5UGT7MVT.cjs');
|
|
29
32
|
|
|
30
33
|
|
|
31
|
-
var
|
|
34
|
+
var _BFZKWCPHcjs = require('./__chunks/BFZKWCPH.cjs');
|
|
35
|
+
require('./__chunks/TH4TA3JN.cjs');
|
|
32
36
|
|
|
33
37
|
|
|
34
|
-
var
|
|
38
|
+
var _33OLOKXZcjs = require('./__chunks/33OLOKXZ.cjs');
|
|
35
39
|
|
|
36
40
|
|
|
37
|
-
var
|
|
41
|
+
var _A7LK5QZScjs = require('./__chunks/A7LK5QZS.cjs');
|
|
38
42
|
|
|
39
43
|
|
|
40
|
-
var
|
|
41
|
-
require('./__chunks/
|
|
44
|
+
var _AHFP6M2Ncjs = require('./__chunks/AHFP6M2N.cjs');
|
|
45
|
+
require('./__chunks/NIIFJYOC.cjs');
|
|
42
46
|
require('./__chunks/J27AGJQB.cjs');
|
|
43
47
|
|
|
44
48
|
|
|
45
|
-
var
|
|
46
|
-
require('./__chunks/
|
|
47
|
-
require('./__chunks/
|
|
49
|
+
var _7QBU4DTXcjs = require('./__chunks/7QBU4DTX.cjs');
|
|
50
|
+
require('./__chunks/WFVGNGEP.cjs');
|
|
51
|
+
require('./__chunks/BIJUVIB4.cjs');
|
|
52
|
+
require('./__chunks/QKBS4OXL.cjs');
|
|
48
53
|
|
|
49
54
|
|
|
50
|
-
var
|
|
55
|
+
var _C5XPZTFOcjs = require('./__chunks/C5XPZTFO.cjs');
|
|
51
56
|
|
|
52
57
|
|
|
53
|
-
var
|
|
58
|
+
var _UYUCK2UEcjs = require('./__chunks/UYUCK2UE.cjs');
|
|
54
59
|
|
|
55
60
|
|
|
56
|
-
var
|
|
61
|
+
var _42SRFCQLcjs = require('./__chunks/42SRFCQL.cjs');
|
|
57
62
|
require('./__chunks/5JUNB754.cjs');
|
|
58
63
|
require('./__chunks/3P2PWHOU.cjs');
|
|
59
|
-
require('./__chunks/
|
|
64
|
+
require('./__chunks/65BTPZZT.cjs');
|
|
60
65
|
require('./__chunks/I76WKOLE.cjs');
|
|
61
66
|
require('./__chunks/MF7LLV7V.cjs');
|
|
62
67
|
require('./__chunks/XTZEWLM5.cjs');
|
|
@@ -75,7 +80,7 @@ var _CW24HTITcjs = require('./__chunks/CW24HTIT.cjs');
|
|
|
75
80
|
|
|
76
81
|
|
|
77
82
|
var _HBHOLWEMcjs = require('./__chunks/HBHOLWEM.cjs');
|
|
78
|
-
|
|
83
|
+
|
|
79
84
|
|
|
80
85
|
|
|
81
86
|
var _HBIGKRZ2cjs = require('./__chunks/HBIGKRZ2.cjs');
|
|
@@ -145,5 +150,6 @@ require('./__chunks/X2SDR4SD.cjs');
|
|
|
145
150
|
|
|
146
151
|
|
|
147
152
|
|
|
148
|
-
|
|
153
|
+
|
|
154
|
+
exports.Avatar = _RC7EMZ6Ncjs.Avatar_default; exports.AvatarGroup = _5COVOOB3cjs.AvatarGroup; exports.Badge = _XG7O4UGWcjs.Badge_default; exports.Box = _KJLBDAZHcjs.Box_default; exports.Button = _UYUCK2UEcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _L32D5WEGcjs.Card_default; exports.Checkbox = _C3FW5QDGcjs.Checkbox_default; exports.Chip = _SKFX2MXKcjs.Chip_default; exports.Divider = _42SRFCQLcjs.Divider; exports.Heading = _Q4P2W7UUcjs.Heading_default; exports.Icon = _L5RBAKANcjs.Icon_default; exports.IconButton = _7QBU4DTXcjs.IconButton_default; exports.IconLinkButton = _BFZKWCPHcjs.IconLinkButton_default; exports.LinkButton = _5UGT7MVTcjs.LinkButton_default; exports.Modal = _NNGCYWZAcjs.Modal; exports.Popover = _AHFP6M2Ncjs.Popover_default; exports.RadioButton = _EF6R3LRBcjs.RadioButton_default; exports.RichSelectList = _A7LK5QZScjs.RichSelectList_default; exports.SelectList = _33OLOKXZcjs.SelectList; exports.Tabs = _HBIGKRZ2cjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _HBHOLWEMcjs.TextArea_default; exports.TextField = _CW24HTITcjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _QI5Q2WJGcjs.Tooltip_default; exports.Typography = _FEFAG4KTcjs.Typography_default;
|
|
149
155
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.css
CHANGED
|
@@ -2263,82 +2263,83 @@
|
|
|
2263
2263
|
}
|
|
2264
2264
|
|
|
2265
2265
|
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css/#css-module-data */
|
|
2266
|
-
.
|
|
2266
|
+
._button_v2jgj_1 {
|
|
2267
2267
|
display: flex;
|
|
2268
2268
|
flex-direction: row;
|
|
2269
2269
|
align-items: center;
|
|
2270
2270
|
justify-content: center;
|
|
2271
2271
|
}
|
|
2272
|
-
.
|
|
2272
|
+
._buttonGap_v2jgj_8 {
|
|
2273
2273
|
gap: 4px;
|
|
2274
2274
|
}
|
|
2275
|
-
.
|
|
2275
|
+
._button_v2jgj_1:hover {
|
|
2276
2276
|
background-image: linear-gradient(to bottom, rgba(190, 180, 171, 0.3) 0%, rgba(190, 180, 171, 0.3) 100%);
|
|
2277
2277
|
transition-duration: 0.2s;
|
|
2278
2278
|
cursor: pointer;
|
|
2279
2279
|
}
|
|
2280
|
-
.
|
|
2280
|
+
._button_v2jgj_1:focus-visible {
|
|
2281
2281
|
background-image: linear-gradient(to bottom, rgba(190, 180, 171, 0.3) 0%, rgba(190, 180, 171, 0.3) 100%);
|
|
2282
2282
|
box-shadow: 0 0 0 4px #000;
|
|
2283
2283
|
outline: solid 2px #fff;
|
|
2284
2284
|
}
|
|
2285
|
-
.
|
|
2285
|
+
._button_v2jgj_1:active {
|
|
2286
2286
|
background-image: linear-gradient(to bottom, rgba(190, 180, 171, 0.3) 0%, rgba(190, 180, 171, 0.3) 100%);
|
|
2287
2287
|
transform: scale(0.97);
|
|
2288
2288
|
transition-duration: 0.2s;
|
|
2289
2289
|
}
|
|
2290
|
-
.
|
|
2290
|
+
._disabled_v2jgj_42 {
|
|
2291
2291
|
filter: opacity(50%);
|
|
2292
2292
|
background-image: none;
|
|
2293
2293
|
transform: none;
|
|
2294
2294
|
cursor: auto;
|
|
2295
|
+
pointer-events: none;
|
|
2295
2296
|
}
|
|
2296
|
-
.
|
|
2297
|
+
._disabled_v2jgj_42:hover {
|
|
2297
2298
|
filter: opacity(50%);
|
|
2298
2299
|
background-image: none;
|
|
2299
2300
|
transform: none;
|
|
2300
2301
|
cursor: auto;
|
|
2301
2302
|
}
|
|
2302
|
-
.
|
|
2303
|
+
._disabledPrimary_v2jgj_57 {
|
|
2303
2304
|
opacity: 0.5;
|
|
2304
2305
|
}
|
|
2305
|
-
.
|
|
2306
|
+
._fullWidth_v2jgj_61 {
|
|
2306
2307
|
width: 100%;
|
|
2307
2308
|
}
|
|
2308
|
-
.
|
|
2309
|
+
._sm_v2jgj_65 {
|
|
2309
2310
|
min-width: 52px;
|
|
2310
2311
|
height: 32px;
|
|
2311
2312
|
padding: 0 16px;
|
|
2312
2313
|
border-radius: 100px;
|
|
2313
2314
|
}
|
|
2314
|
-
.
|
|
2315
|
+
._md_v2jgj_72 {
|
|
2315
2316
|
min-width: 78px;
|
|
2316
2317
|
height: 48px;
|
|
2317
2318
|
padding: 0 24px;
|
|
2318
2319
|
border-radius: 100px;
|
|
2319
2320
|
}
|
|
2320
|
-
.
|
|
2321
|
+
._lg_v2jgj_79 {
|
|
2321
2322
|
min-width: 104px;
|
|
2322
2323
|
height: 64px;
|
|
2323
2324
|
padding: 0 32px;
|
|
2324
2325
|
border-radius: 100px;
|
|
2325
2326
|
}
|
|
2326
|
-
.
|
|
2327
|
+
._icon_v2jgj_86 {
|
|
2327
2328
|
color: inherit;
|
|
2328
2329
|
}
|
|
2329
|
-
.
|
|
2330
|
+
._smIcon_v2jgj_90 {
|
|
2330
2331
|
width: 16px !important;
|
|
2331
2332
|
height: 16px !important;
|
|
2332
2333
|
}
|
|
2333
|
-
.
|
|
2334
|
+
._mdIcon_v2jgj_97 {
|
|
2334
2335
|
width: 20px !important;
|
|
2335
2336
|
height: 20px !important;
|
|
2336
2337
|
}
|
|
2337
|
-
.
|
|
2338
|
+
._lgIcon_v2jgj_104 {
|
|
2338
2339
|
width: 24px !important;
|
|
2339
2340
|
height: 24px !important;
|
|
2340
2341
|
}
|
|
2341
|
-
@keyframes
|
|
2342
|
+
@keyframes _syntaxButtonLoadingRotate_v2jgj_1 {
|
|
2342
2343
|
0% {
|
|
2343
2344
|
transform-origin: 50% 50%;
|
|
2344
2345
|
}
|
|
@@ -2346,10 +2347,10 @@
|
|
|
2346
2347
|
transform: rotate(360deg);
|
|
2347
2348
|
}
|
|
2348
2349
|
}
|
|
2349
|
-
.
|
|
2350
|
-
animation:
|
|
2350
|
+
._loading_v2jgj_121 {
|
|
2351
|
+
animation: _syntaxButtonLoadingRotate_v2jgj_1 1.4s linear infinite;
|
|
2351
2352
|
}
|
|
2352
|
-
.
|
|
2353
|
+
._loadingCircle_v2jgj_125 {
|
|
2353
2354
|
stroke: currentcolor;
|
|
2354
2355
|
stroke-dasharray: 80px, 200px;
|
|
2355
2356
|
stroke-dashoffset: 0;
|