@cambly/syntax-core 19.4.0 → 20.1.0

package/dist/__chunks/SJOBDTPK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray700,\n  ColorCambioWhite100,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  on,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Indicate whether the component renders on a light or dark background. Changes the color of the text\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLSelectElement>) => void;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n  const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n  const errorTextColor =\n    on !== \"darkBackground\"\n      ? \"destructive-lightBackground\"\n      : \"destructive-darkBackground\";\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLSelectElement> = (\n    event,\n  ) => {\n    if (disabled || onClick == null) return;\n    if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n      onClick(event);\n    }\n  };\n\n  const getArrowIconColor = () => {\n    if (errorText) {\n      return ColorBaseDestructive700;\n    } else {\n      if (on === \"darkBackground\") {\n        return ColorCambioWhite100;\n      } else {\n        return ColorBaseGray700;\n      }\n    }\n  };\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\n            <Typography size={100} color={textColor}>\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles.selectBoxCambio, {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectErrorCambio]: errorText && on === \"lightBackground\",\n            [styles.transparentInputError]:\n              errorText && on === \"darkBackground\",\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            [styles.transparent]: on === \"darkBackground\",\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          onKeyDown={handleKeyDown}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={24}\n          >\n            <path\n              fill={getArrowIconColor()}\n              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\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography size={100} color={errorText ? errorTextColor : textColor}>\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_13v7l_1\",\"opacityOverlay\":\"_opacityOverlay_13v7l_7\",\"selectWrapper\":\"_selectWrapper_13v7l_11\",\"selectBox\":\"_selectBox_13v7l_16\",\"selectBoxCambio\":\"_selectBoxCambio_13v7l_30\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_13v7l_38\",\"unselected\":\"_unselected_13v7l_43\",\"selected\":\"_selected_13v7l_47\",\"transparent\":\"_transparent_13v7l_51\",\"arrowIcon\":\"_arrowIcon_13v7l_63\",\"selectErrorCambio\":\"_selectErrorCambio_13v7l_77\",\"selectColorwhite\":\"_selectColorwhite_13v7l_83\",\"transparentInputError\":\"_transparentInputError_13v7l_89\",\"transparenInputError\":\"_transparenInputError_13v7l_94\"}"]}

package/dist/index.cjs

@@ -32,11 +32,11 @@ var _RUXLZWRZcjs = require('./__chunks/RUXLZWRZ.cjs');
 require('./__chunks/TH4TA3JN.cjs');
 
 
-var _BDOOAHOCcjs = require('./__chunks/BDOOAHOC.cjs');
+var _SJOBDTPKcjs = require('./__chunks/SJOBDTPK.cjs');
 require('./__chunks/JVGX637E.cjs');
 
 
-var _RE4YJRHBcjs = require('./__chunks/RE4YJRHB.cjs');
+var _3ZKXEILCcjs = require('./__chunks/3ZKXEILC.cjs');
 
 
 var _VZTP4FJUcjs = require('./__chunks/VZTP4FJU.cjs');
@@ -46,7 +46,7 @@ require('./__chunks/3RX4RMGC.cjs');
 
 var _VJWLFFADcjs = require('./__chunks/VJWLFFAD.cjs');
 require('./__chunks/WFVGNGEP.cjs');
-require('./__chunks/BJU7QKAS.cjs');
+require('./__chunks/LT2LND2P.cjs');
 require('./__chunks/5I7B5SAF.cjs');
 
 
@@ -77,13 +77,13 @@ require('./__chunks/RYUXG4AS.cjs');
 var _36JMUQOLcjs = require('./__chunks/36JMUQOL.cjs');
 
 
-var _WVK5Z5JAcjs = require('./__chunks/WVK5Z5JA.cjs');
+var _LVKEK2EYcjs = require('./__chunks/LVKEK2EY.cjs');
 
 
-var _SJSSW5MPcjs = require('./__chunks/SJSSW5MP.cjs');
+var _5NYVFU4Acjs = require('./__chunks/5NYVFU4A.cjs');
 
 
-var _Z6EWS3QIcjs = require('./__chunks/Z6EWS3QI.cjs');
+var _IUX3GQRDcjs = require('./__chunks/IUX3GQRD.cjs');
 
 
 
@@ -162,5 +162,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _SJSSW5MPcjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _7COSMEXWcjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _S7BCIAUQcjs.Checkbox_default; exports.Chip = _PBHDA7GVcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _Q7CC3YA4cjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _YNGB4N62cjs.LinkButton_default; exports.Modal = _SAPSO6DDcjs.Modal; exports.Popover = _VZTP4FJUcjs.Popover_default; exports.RadioButton = _AI52ORKAcjs.RadioButton_default; exports.RichSelectList = _RE4YJRHBcjs.RichSelectList_default; exports.SelectList = _BDOOAHOCcjs.SelectList; exports.TabButton = _Q65LBFK3cjs.TabButton; exports.TabLink = _E3KSILLWcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _Z6EWS3QIcjs.TextArea_default; exports.TextField = _WVK5Z5JAcjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _JACR34JOcjs.Tooltip_default; exports.Typography = _RVU3UEZIcjs.Typography_default; exports.WordConfetti = _FHQ7KPFEcjs.WordConfetti_default;
+exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _5NYVFU4Acjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _7COSMEXWcjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _S7BCIAUQcjs.Checkbox_default; exports.Chip = _PBHDA7GVcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _Q7CC3YA4cjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _YNGB4N62cjs.LinkButton_default; exports.Modal = _SAPSO6DDcjs.Modal; exports.Popover = _VZTP4FJUcjs.Popover_default; exports.RadioButton = _AI52ORKAcjs.RadioButton_default; exports.RichSelectList = _3ZKXEILCcjs.RichSelectList_default; exports.SelectList = _SJOBDTPKcjs.SelectList; exports.TabButton = _Q65LBFK3cjs.TabButton; exports.TabLink = _E3KSILLWcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _IUX3GQRDcjs.TextArea_default; exports.TextField = _LVKEK2EYcjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _JACR34JOcjs.Tooltip_default; exports.Typography = _RVU3UEZIcjs.Typography_default; exports.WordConfetti = _FHQ7KPFEcjs.WordConfetti_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.css

@@ -2966,19 +2966,19 @@
 }
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css/#css-module-data */
-._selectContainer_1g9ap_1 {
+._selectContainer_13v7l_1 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._opacityOverlay_1g9ap_7 {
+._opacityOverlay_13v7l_7 {
   opacity: 0.5;
 }
-._selectWrapper_1g9ap_11 {
+._selectWrapper_13v7l_11 {
   display: flex;
   position: relative;
 }
-._selectBox_1g9ap_16 {
+._selectBox_13v7l_16 {
   align-items: center;
   appearance: none;
   cursor: pointer;
@@ -2998,24 +2998,34 @@
   outline: 0;
   width: 100%;
 }
-._selectBoxCambio_1g9ap_30 {
+._selectBoxCambio_13v7l_30 {
   border-radius: 8px;
   box-sizing: border-box;
   font-size: 16px;
   height: 48px;
   padding: 12px 36px 12px 12px;
 }
-._selectMouseFocusStyling_1g9ap_38 {
+._selectMouseFocusStyling_13v7l_38 {
   border: 1px solid var(--color-base-primary-700);
   box-shadow: 0 0 0 1px var(--color-base-primary-700);
 }
-._unselected_1g9ap_43 {
+._unselected_13v7l_43 {
   color: var(--color-base-gray-700);
 }
-._selected_1g9ap_47 {
+._selected_13v7l_47 {
   color: var(--color-base-gray-800);
 }
-._arrowIcon_1g9ap_51 {
+._transparent_13v7l_51 {
+  background: transparent;
+  border: 1px solid var(--color-cambio-white-40);
+  color: var(--color-cambio-white-70);
+}
+._transparent_13v7l_51:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
+  color: var(--color-cambio-white-100);
+}
+._arrowIcon_13v7l_63 {
   display: flex;
   position: absolute;
   right: 0;
@@ -3024,22 +3034,24 @@
   padding-inline-end: 8px;
   pointer-events: none;
 }
-._selectBox_1g9ap_16:disabled {
+._selectBox_13v7l_16:disabled {
   cursor: auto;
 }
-._selectErrorCambio_1g9ap_65 {
+._selectErrorCambio_13v7l_77 {
   color: var(--color-cambio-destructive-900);
   border-color: var(--color-cambio-destructive-700);
 }
-._selectColorwhite_1g9ap_71 {
+._selectColorwhite_13v7l_83 {
   background-color: var(--color-base-white);
   border: 1px solid var(--color-cambio-gray-370);
   color: var(--color-base-gray-700);
 }
-._selectColorclear_1g9ap_77 {
-  background-color: transparent;
-  border: none;
-  color: var(--color-cambio-white-100);
+._transparentInputError_13v7l_89 {
+  color: var(--color-cambio-destructive-370);
+  border: 1px solid var(--color-cambio-destructive-300);
+}
+._transparenInputError_13v7l_94::placeholder {
+  color: var(--color-cambio-destructive-370);
 }
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/RichSelect/RichSelect.module.css/#css-module-data */
@@ -3134,7 +3146,7 @@
 }
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css/#css-module-data */
-._textfield_f2wi6_1 {
+._textfield_17wxq_1 {
   appearance: none;
   border: 1px solid var(--color-cambio-gray-370);
   border-radius: 8px;
@@ -3151,40 +3163,47 @@
   margin: 0;
   width: 100%;
   font-size: 16px;
+  color: var(--color-cambio-gray-700);
+}
+._textfield_17wxq_1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
+  color: var(--color-cambio-black);
 }
-._transparent_f2wi6_13 {
+._transparent_17wxq_20 {
   background: transparent;
-  border: 1px solid var(--color-cambio-white-100);
-  color: var(--color-cambio-white-100);
+  border: 1px solid var(--color-cambio-white-40);
+  color: var(--color-cambio-white-70);
 }
-._textfield_f2wi6_1:focus {
+._transparent_17wxq_20:focus {
   outline: none;
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
+  color: var(--color-cambio-white-100);
 }
-._textfield_f2wi6_1:disabled {
+._textfield_17wxq_1:disabled {
   cursor: auto;
 }
-._label_f2wi6_28 {
+._label_17wxq_36 {
   cursor: pointer;
 }
-._md_f2wi6_32 {
+._md_17wxq_40 {
   padding: 12px;
 }
-._height_f2wi6_36 {
+._height_17wxq_44 {
   height: 48px;
 }
-._inputError_f2wi6_40 {
+._inputError_17wxq_48 {
   color: var(--color-cambio-destructive-900);
   border: 1px solid var(--color-cambio-destructive-700);
 }
-._inputError_f2wi6_40::placeholder {
+._inputError_17wxq_48::placeholder {
   color: var(--color-cambio-destructive-900);
 }
-._transparentInputError_f2wi6_49 {
+._transparentInputError_17wxq_57 {
   color: var(--color-cambio-destructive-370);
   border: 1px solid var(--color-cambio-destructive-300);
 }
-._transparenInputError_f2wi6_54::placeholder {
+._transparenInputError_17wxq_62::placeholder {
   color: var(--color-cambio-destructive-370);
 }