@tecsinapse/react-core 1.10.1 → 1.11.0

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.4...@tecsinapse/react-core@1.11.0) (2021-12-17)
+
+
+### Bug Fixes
+
+* [163127] Modais de picker do DS estão em inglês ([a95b0b2](https://github.com/tecsinapse/design-system/commit/a95b0b283f3535af20a23ac6a9a5e5633127d5b0))
+
+
+
+
+
+## [1.10.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.3...@tecsinapse/react-core@1.10.4) (2021-12-07)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
+## [1.10.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.2...@tecsinapse/react-core@1.10.3) (2021-11-29)
+
+
+### Bug Fixes
+
+* added method extractDigitsFromString ([76daa94](https://github.com/tecsinapse/design-system/commit/76daa943cc1be981b587830d0024c4a01c4df6e2))
+* remove cursor css prop from avatar ([2f9ed15](https://github.com/tecsinapse/design-system/commit/2f9ed15bafb6697e2aee883b417574b4ee3275d5))
+
+
+
+
+
+## [1.10.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.1...@tecsinapse/react-core@1.10.2) (2021-11-16)
+
+
+### Features
+
+* added property disabled in groupButton. ([e6eaf19](https://github.com/tecsinapse/design-system/commit/e6eaf193a0ef75fd1468fb030e8b6e64595d2722))
+
+
+
+
+
 ## [1.10.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.0...@tecsinapse/react-core@1.10.1) (2021-10-08)
 
 **Note:** Version bump only for package @tecsinapse/react-core

package/dist/components/atoms/Avatar/styled.js

@@ -22,9 +22,6 @@ const ContainerButtonAvatar = (0, _native.default)(_PressableSurface.PressableSu
   theme,
   size = 'mega'
 }) => theme.iconSize[size]};
-  cursor: ${({
-  onPress
-}) => onPress ? 'pointer' : 'default'};
 `;
 exports.ContainerButtonAvatar = ContainerButtonAvatar;
 const StyledAvatar = (0, _native.default)(_reactNative.Image)`

package/dist/components/atoms/Avatar/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Avatar/styled.ts"],"names":["ContainerButtonAvatar","PressableSurface","theme","size","iconSize","onPress","StyledAvatar","Image","borderRadius","pill","StyledBackground","View","color","secondary","dark","getStyledTextComponent","component"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIO,MAAMA,qBAAqB,GAAG,qBAAOC,kCAAP,CAEnC;AACF,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACPD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAED,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACRD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAEE,EAAAA;AAAF,CAAD,KAAkBA,OAAO,GAAG,SAAH,GAAe,SAAW;AAC/D,CARO;;AAUA,MAAMC,YAAY,GAAG,qBAAOC,kBAAP,CAAmC;AAC/D,mBAAmB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBC,IAAK;AACtE;AACA;AACA;AACA,CALO;;AAOA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAkC;AAClE,mBAAmB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBC,IAAK;AACtE,sBAAsB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACU,KAAN,CAAYC,SAAZ,CAAsBC,IAAK;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CATO;;;AAWA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,CAAkB;AAC3B;AACA;AACA;AACA;AACA,GALE;AAMD,CAPM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n  Partial<StyleProps & AvatarProps>\n>`\n  width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  cursor: ${({ onPress }) => (onPress ? 'pointer' : 'default')};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: uppercase;\n    text-align: center;\n    align-self: center;\n    flex: 1;\n  `;\n};\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Avatar/styled.ts"],"names":["ContainerButtonAvatar","PressableSurface","theme","size","iconSize","StyledAvatar","Image","borderRadius","pill","StyledBackground","View","color","secondary","dark","getStyledTextComponent","component"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIO,MAAMA,qBAAqB,GAAG,qBAAOC,kCAAP,CAEnC;AACF,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACPD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAED,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACRD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,CAPO;;AASA,MAAME,YAAY,GAAG,qBAAOC,kBAAP,CAAmC;AAC/D,mBAAmB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE;AACA;AACA;AACA,CALO;;AAOA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAkC;AAClE,mBAAmB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE,sBAAsB,CAAC;AAAEN,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACS,KAAN,CAAYC,SAAZ,CAAsBC,IAAK;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CATO;;;AAWA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,CAAkB;AAC3B;AACA;AACA;AACA;AACA,GALE;AAMD,CAPM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n  Partial<StyleProps & AvatarProps>\n>`\n  width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: uppercase;\n    text-align: center;\n    align-self: center;\n    flex: 1;\n  `;\n};\n"],"file":"styled.js"}

package/dist/components/atoms/GroupButton/GroupButton.d.ts

@@ -12,6 +12,7 @@ export interface GroupButtonOptions {
     inactiveBorderColorTone?: ColorGradationType;
     activeStyle?: StyleProp<ViewStyle>;
     inactiveStyle?: StyleProp<ViewStyle>;
+    disabled?: boolean;
 }
 export interface GroupButtonValue<T> {
     value: T;
@@ -25,6 +26,7 @@ export interface GroupButtonProps<T> {
     onChange: (option: T) => void;
     buttonSize?: ButtonSizeType;
     style?: StyleProp<ViewStyle>;
+    disableAllOptions?: boolean;
 }
 declare const GroupButton: <T extends unknown>({ style, ...rest }: GroupButtonProps<T>) => JSX.Element;
 export default GroupButton;

package/dist/components/atoms/GroupButton/GroupButton.js

@@ -30,10 +30,13 @@ const groupOptions = ({
   renderKey,
   onChange,
   value,
+  disableAllOptions,
   ...rest
 }) => {
   const theme = (0, _react.useTheme)();
   return options === null || options === void 0 ? void 0 : options.map((option, idx) => {
+    var _option$options;
+
     const {
       value: optionValue,
       options: {
@@ -42,7 +45,8 @@ const groupOptions = ({
         activeBackgroundColor,
         activeBackgroundColorTone,
         inactiveBackgroundColor,
-        inactiveBackgroundColorTone
+        inactiveBackgroundColorTone,
+        disabled = disableAllOptions || ((_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.disabled)
       } = {}
     } = option;
     const key = renderKey === null || renderKey === void 0 ? void 0 : renderKey(optionValue);
@@ -62,7 +66,7 @@ const groupOptions = ({
     return _react2.default.createElement(_styled.StyledOption, {
       key: key
     }, _react2.default.createElement(_styled.StyledPressable, _extends({}, rest, option.options, {
-      disabled: active,
+      disabled: disabled,
       isActive: active,
       isFirstOption: isFirst,
       isLastOption: isLast,

package/dist/components/atoms/GroupButton/GroupButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/GroupButton/GroupButton.tsx"],"names":["GroupButton","style","rest","groupOptions","options","renderOption","renderKey","onChange","value","theme","map","option","idx","optionValue","activeStyle","inactiveStyle","activeBackgroundColor","activeBackgroundColorTone","inactiveBackgroundColor","inactiveBackgroundColorTone","key","active","isFirst","isLast","length","colors","miscellaneous","surfaceColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;;;;;AAmCA,MAAMA,WAAW,GAAG,CAAoB;AACtCC,EAAAA,KADsC;AAEtC,KAAGC;AAFmC,CAApB,KAGO;AACzB,SACE,8BAAC,yBAAD;AAAmB,IAAA,KAAK,EAAED;AAA1B,KAAkCE,YAAY,CAACD,IAAD,CAA9C,CADF;AAGD,CAPD;;AASA,MAAMC,YAAY,GAAG,CAAoB;AACvCC,EAAAA,OADuC;AAEvCC,EAAAA,YAFuC;AAGvCC,EAAAA,SAHuC;AAIvCC,EAAAA,QAJuC;AAKvCC,EAAAA,KALuC;AAMvC,KAAGN;AANoC,CAApB,KAOe;AAClC,QAAMO,KAAK,GAAG,sBAAd;AACA,SAAOL,OAAP,aAAOA,OAAP,uBAAOA,OAAO,CAAEM,GAAT,CAAa,CAACC,MAAD,EAASC,GAAT,KAAiB;AACnC,UAAM;AACJJ,MAAAA,KAAK,EAAEK,WADH;AAEJT,MAAAA,OAAO,EAAE;AACPU,QAAAA,WADO;AAEPC,QAAAA,aAFO;AAGPC,QAAAA,qBAHO;AAIPC,QAAAA,yBAJO;AAKPC,QAAAA,uBALO;AAMPC,QAAAA;AANO,UAOL;AATA,QAUFR,MAVJ;AAYA,UAAMS,GAAG,GAAGd,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAGO,WAAH,CAArB;AACA,UAAMQ,MAAM,GAAGD,GAAG,MAAKd,SAAL,aAAKA,SAAL,uBAAKA,SAAS,CAAGE,KAAH,CAAd,CAAlB;AACA,UAAMc,OAAO,GAAGV,GAAG,KAAK,CAAxB;AACA,UAAMW,MAAM,GAAGX,GAAG,KAAKR,OAAO,CAACoB,MAAR,GAAiB,CAAxC;AAEA,QAAIC,MAAM,GAAGhB,KAAK,CAACiB,aAAN,CAAoBC,YAAjC;;AACA,QAAIN,MAAJ,EAAY;AACVI,MAAAA,MAAM,GACJhB,KAAK,CAACmB,KAAN,CAAYZ,qBAAqB,IAAI,WAArC,EACEC,yBAAyB,IAAI,QAD/B,CADF;AAID;;AAED,QAAI,CAACI,MAAD,KAAYH,uBAAuB,IAAIC,2BAAvC,CAAJ,EAAyE;AACvEM,MAAAA,MAAM,GACJhB,KAAK,CAACmB,KAAN,CAAYV,uBAAuB,IAAI,WAAvC,EACEC,2BAA2B,IAAI,QADjC,CADF;AAID;;AAED,WACE,8BAAC,oBAAD;AAAc,MAAA,GAAG,EAAEC;AAAnB,OACE,8BAAC,uBAAD,eACMlB,IADN,EAEMS,MAAM,CAACP,OAFb;AAGE,MAAA,QAAQ,EAAEiB,MAHZ;AAIE,MAAA,QAAQ,EAAEA,MAJZ;AAKE,MAAA,aAAa,EAAEC,OALjB;AAME,MAAA,YAAY,EAAEC,MANhB;AAOE,MAAA,OAAO,EAAE,MAAMhB,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAGM,WAAH,CAPzB;AAQE,MAAA,YAAY,EAAEY,MARhB;AASE,MAAA,KAAK,EAAEJ,MAAM,GAAGP,WAAH,GAAiBC;AAThC,QAWGV,YAXH,aAWGA,YAXH,uBAWGA,YAAY,CAAGM,MAAM,CAACH,KAAV,EAAiBa,MAAjB,CAXf,CADF,EAcG,CAACE,MAAD,IAAW,8BAAC,qBAAD,OAdd,CADF;AAkBD,GAnDM,CAAP;AAoDD,CA7DD;;eA+DevB,W","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport {\n  StyledDivider,\n  StyledGroupButton,\n  StyledOption,\n  StyledPressable,\n} from './styled';\n\nexport interface GroupButtonOptions {\n  activeBackgroundColor?: ColorType;\n  activeBackgroundColorTone?: ColorGradationType;\n  activeBorderColor?: ColorType;\n  activeBorderColorTone?: ColorGradationType;\n  inactiveBackgroundColor?: ColorType;\n  inactiveBackgroundColorTone?: ColorGradationType;\n  inactiveBorderColor?: ColorType;\n  inactiveBorderColorTone?: ColorGradationType;\n  activeStyle?: StyleProp<ViewStyle>;\n  inactiveStyle?: StyleProp<ViewStyle>;\n}\n\nexport interface GroupButtonValue<T> {\n  value: T;\n  options?: GroupButtonOptions;\n}\n\nexport interface GroupButtonProps<T> {\n  value: T;\n  options: GroupButtonValue<T>[];\n  renderKey: (option?: T) => string | number | undefined;\n  renderOption: (option: T, active: boolean) => JSX.Element;\n  onChange: (option: T) => void;\n  buttonSize?: ButtonSizeType;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst GroupButton = <T extends unknown>({\n  style,\n  ...rest\n}: GroupButtonProps<T>) => {\n  return (\n    <StyledGroupButton style={style}>{groupOptions(rest)}</StyledGroupButton>\n  );\n};\n\nconst groupOptions = <T extends unknown>({\n  options,\n  renderOption,\n  renderKey,\n  onChange,\n  value,\n  ...rest\n}: Partial<GroupButtonProps<T>>) => {\n  const theme = useTheme() as ThemeProp;\n  return options?.map((option, idx) => {\n    const {\n      value: optionValue,\n      options: {\n        activeStyle,\n        inactiveStyle,\n        activeBackgroundColor,\n        activeBackgroundColorTone,\n        inactiveBackgroundColor,\n        inactiveBackgroundColorTone,\n      } = {},\n    } = option;\n\n    const key = renderKey?.(optionValue);\n    const active = key === renderKey?.(value);\n    const isFirst = idx === 0;\n    const isLast = idx === options.length - 1;\n\n    let colors = theme.miscellaneous.surfaceColor;\n    if (active) {\n      colors =\n        theme.color[activeBackgroundColor || 'secondary'][\n          activeBackgroundColorTone || 'medium'\n        ];\n    }\n\n    if (!active && (inactiveBackgroundColor || inactiveBackgroundColorTone)) {\n      colors =\n        theme.color[inactiveBackgroundColor || 'secondary'][\n          inactiveBackgroundColorTone || 'medium'\n        ];\n    }\n\n    return (\n      <StyledOption key={key}>\n        <StyledPressable\n          {...rest}\n          {...option.options}\n          disabled={active}\n          isActive={active}\n          isFirstOption={isFirst}\n          isLastOption={isLast}\n          onPress={() => onChange?.(optionValue)}\n          surfaceColor={colors}\n          style={active ? activeStyle : inactiveStyle}\n        >\n          {renderOption?.(option.value, active)}\n        </StyledPressable>\n        {!isLast && <StyledDivider />}\n      </StyledOption>\n    );\n  });\n};\n\nexport default GroupButton;\n"],"file":"GroupButton.js"}
+{"version":3,"sources":["../../../../src/components/atoms/GroupButton/GroupButton.tsx"],"names":["GroupButton","style","rest","groupOptions","options","renderOption","renderKey","onChange","value","disableAllOptions","theme","map","option","idx","optionValue","activeStyle","inactiveStyle","activeBackgroundColor","activeBackgroundColorTone","inactiveBackgroundColor","inactiveBackgroundColorTone","disabled","key","active","isFirst","isLast","length","colors","miscellaneous","surfaceColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;;;;;AAqCA,MAAMA,WAAW,GAAG,CAAoB;AACtCC,EAAAA,KADsC;AAEtC,KAAGC;AAFmC,CAApB,KAGO;AACzB,SACE,8BAAC,yBAAD;AAAmB,IAAA,KAAK,EAAED;AAA1B,KAAkCE,YAAY,CAACD,IAAD,CAA9C,CADF;AAGD,CAPD;;AASA,MAAMC,YAAY,GAAG,CAAoB;AACvCC,EAAAA,OADuC;AAEvCC,EAAAA,YAFuC;AAGvCC,EAAAA,SAHuC;AAIvCC,EAAAA,QAJuC;AAKvCC,EAAAA,KALuC;AAMvCC,EAAAA,iBANuC;AAOvC,KAAGP;AAPoC,CAApB,KAQe;AAClC,QAAMQ,KAAK,GAAG,sBAAd;AACA,SAAON,OAAP,aAAOA,OAAP,uBAAOA,OAAO,CAAEO,GAAT,CAAa,CAACC,MAAD,EAASC,GAAT,KAAiB;AAAA;;AACnC,UAAM;AACJL,MAAAA,KAAK,EAAEM,WADH;AAEJV,MAAAA,OAAO,EAAE;AACPW,QAAAA,WADO;AAEPC,QAAAA,aAFO;AAGPC,QAAAA,qBAHO;AAIPC,QAAAA,yBAJO;AAKPC,QAAAA,uBALO;AAMPC,QAAAA,2BANO;AAOPC,QAAAA,QAAQ,GAAGZ,iBAAiB,wBAAIG,MAAM,CAACR,OAAX,oDAAI,gBAAgBiB,QAApB;AAPrB,UAQL;AAVA,QAWFT,MAXJ;AAaA,UAAMU,GAAG,GAAGhB,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAGQ,WAAH,CAArB;AACA,UAAMS,MAAM,GAAGD,GAAG,MAAKhB,SAAL,aAAKA,SAAL,uBAAKA,SAAS,CAAGE,KAAH,CAAd,CAAlB;AACA,UAAMgB,OAAO,GAAGX,GAAG,KAAK,CAAxB;AACA,UAAMY,MAAM,GAAGZ,GAAG,KAAKT,OAAO,CAACsB,MAAR,GAAiB,CAAxC;AAEA,QAAIC,MAAM,GAAGjB,KAAK,CAACkB,aAAN,CAAoBC,YAAjC;;AACA,QAAIN,MAAJ,EAAY;AACVI,MAAAA,MAAM,GACJjB,KAAK,CAACoB,KAAN,CAAYb,qBAAqB,IAAI,WAArC,EACEC,yBAAyB,IAAI,QAD/B,CADF;AAID;;AAED,QAAI,CAACK,MAAD,KAAYJ,uBAAuB,IAAIC,2BAAvC,CAAJ,EAAyE;AACvEO,MAAAA,MAAM,GACJjB,KAAK,CAACoB,KAAN,CAAYX,uBAAuB,IAAI,WAAvC,EACEC,2BAA2B,IAAI,QADjC,CADF;AAID;;AAED,WACE,8BAAC,oBAAD;AAAc,MAAA,GAAG,EAAEE;AAAnB,OACE,8BAAC,uBAAD,eACMpB,IADN,EAEMU,MAAM,CAACR,OAFb;AAGE,MAAA,QAAQ,EAAEiB,QAHZ;AAIE,MAAA,QAAQ,EAAEE,MAJZ;AAKE,MAAA,aAAa,EAAEC,OALjB;AAME,MAAA,YAAY,EAAEC,MANhB;AAOE,MAAA,OAAO,EAAE,MAAMlB,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAGO,WAAH,CAPzB;AAQE,MAAA,YAAY,EAAEa,MARhB;AASE,MAAA,KAAK,EAAEJ,MAAM,GAAGR,WAAH,GAAiBC;AAThC,QAWGX,YAXH,aAWGA,YAXH,uBAWGA,YAAY,CAAGO,MAAM,CAACJ,KAAV,EAAiBe,MAAjB,CAXf,CADF,EAcG,CAACE,MAAD,IAAW,8BAAC,qBAAD,OAdd,CADF;AAkBD,GApDM,CAAP;AAqDD,CA/DD;;eAiEezB,W","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport {\n  StyledDivider,\n  StyledGroupButton,\n  StyledOption,\n  StyledPressable,\n} from './styled';\n\nexport interface GroupButtonOptions {\n  activeBackgroundColor?: ColorType;\n  activeBackgroundColorTone?: ColorGradationType;\n  activeBorderColor?: ColorType;\n  activeBorderColorTone?: ColorGradationType;\n  inactiveBackgroundColor?: ColorType;\n  inactiveBackgroundColorTone?: ColorGradationType;\n  inactiveBorderColor?: ColorType;\n  inactiveBorderColorTone?: ColorGradationType;\n  activeStyle?: StyleProp<ViewStyle>;\n  inactiveStyle?: StyleProp<ViewStyle>;\n  disabled?: boolean;\n}\n\nexport interface GroupButtonValue<T> {\n  value: T;\n  options?: GroupButtonOptions;\n}\n\nexport interface GroupButtonProps<T> {\n  value: T;\n  options: GroupButtonValue<T>[];\n  renderKey: (option?: T) => string | number | undefined;\n  renderOption: (option: T, active: boolean) => JSX.Element;\n  onChange: (option: T) => void;\n  buttonSize?: ButtonSizeType;\n  style?: StyleProp<ViewStyle>;\n  disableAllOptions?: boolean;\n}\n\nconst GroupButton = <T extends unknown>({\n  style,\n  ...rest\n}: GroupButtonProps<T>) => {\n  return (\n    <StyledGroupButton style={style}>{groupOptions(rest)}</StyledGroupButton>\n  );\n};\n\nconst groupOptions = <T extends unknown>({\n  options,\n  renderOption,\n  renderKey,\n  onChange,\n  value,\n  disableAllOptions,\n  ...rest\n}: Partial<GroupButtonProps<T>>) => {\n  const theme = useTheme() as ThemeProp;\n  return options?.map((option, idx) => {\n    const {\n      value: optionValue,\n      options: {\n        activeStyle,\n        inactiveStyle,\n        activeBackgroundColor,\n        activeBackgroundColorTone,\n        inactiveBackgroundColor,\n        inactiveBackgroundColorTone,\n        disabled = disableAllOptions || option.options?.disabled,\n      } = {},\n    } = option;\n\n    const key = renderKey?.(optionValue);\n    const active = key === renderKey?.(value);\n    const isFirst = idx === 0;\n    const isLast = idx === options.length - 1;\n\n    let colors = theme.miscellaneous.surfaceColor;\n    if (active) {\n      colors =\n        theme.color[activeBackgroundColor || 'secondary'][\n          activeBackgroundColorTone || 'medium'\n        ];\n    }\n\n    if (!active && (inactiveBackgroundColor || inactiveBackgroundColorTone)) {\n      colors =\n        theme.color[inactiveBackgroundColor || 'secondary'][\n          inactiveBackgroundColorTone || 'medium'\n        ];\n    }\n\n    return (\n      <StyledOption key={key}>\n        <StyledPressable\n          {...rest}\n          {...option.options}\n          disabled={disabled}\n          isActive={active}\n          isFirstOption={isFirst}\n          isLastOption={isLast}\n          onPress={() => onChange?.(optionValue)}\n          surfaceColor={colors}\n          style={active ? activeStyle : inactiveStyle}\n        >\n          {renderOption?.(option.value, active)}\n        </StyledPressable>\n        {!isLast && <StyledDivider />}\n      </StyledOption>\n    );\n  });\n};\n\nexport default GroupButton;\n"],"file":"GroupButton.js"}

package/dist/components/atoms/GroupButton/styled.js

@@ -18,6 +18,13 @@ const StyledGroupButton = _native.default.View`
 `;
 exports.StyledGroupButton = StyledGroupButton;
 
+const disabledStyles = ({
+  disabled,
+  isActive
+}) => disabled && !isActive && (0, _native.css)`
+    background-color: #dcdcdc;
+  `;
+
 const getStyledGroupItemText = component => {
   return (0, _native.default)(component)`
     color: ${({
@@ -127,6 +134,7 @@ const StyledPressable = (0, _native.default)(StyledPressableBase)(props => (0, _
     ${leftStyles(props)}
     ${rightStyles(props)}
     ${sizeStyles(props)}
+    ${disabledStyles(props)}
   `);
 exports.StyledPressable = StyledPressable;
 //# sourceMappingURL=styled.js.map

package/dist/components/atoms/GroupButton/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/GroupButton/styled.ts"],"names":["StyledGroupButton","styled","View","getStyledGroupItemText","component","active","theme","miscellaneous","surfaceColor","color","secondary","medium","activeStyles","isActive","activeBorderColor","activeBorderColorTone","inactiveStyles","inactiveBackgroundColor","inactiveBackgroundColorTone","inactiveBorderColor","inactiveBorderColorTone","leftStyles","isFirstOption","borderRadius","mili","borderWidth","pico","rightStyles","isLastOption","sizeStyles","buttonSize","spacing","deca","kilo","StyledPressableBase","PressableSurface","StyledOption","StyledDivider","light","StyledPressable","props"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { GroupButtonOptions } from './GroupButton';\nimport { GroupButtonOptionProps } from './GroupButtonOption';\n\ninterface PressableOptions extends GroupButtonOptions {\n  isActive: boolean;\n  isFirstOption: boolean;\n  isLastOption: boolean;\n  buttonSize?: ButtonSizeType;\n}\n\nexport const StyledGroupButton = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n`;\n\nexport const getStyledGroupItemText = (component: FC<TextProps>) => {\n  return styled(component)<\n    Partial<GroupButtonOptionProps> & Partial<StyleProps>\n  >`\n    color: ${({ active, theme }) =>\n      active ? theme.miscellaneous.surfaceColor : theme.color.secondary.medium};\n  `;\n};\n\nconst activeStyles = ({\n  theme,\n  isActive,\n  activeBorderColor = 'secondary',\n  activeBorderColorTone = 'medium',\n}: PressableOptions & Partial<StyleProps>) =>\n  isActive &&\n  css`\n    border-color: ${theme?.color[activeBorderColor][activeBorderColorTone]};\n  `;\n\nconst inactiveStyles = ({\n  theme,\n  isActive,\n  inactiveBackgroundColor,\n  inactiveBackgroundColorTone,\n  inactiveBorderColor = 'secondary',\n  inactiveBorderColorTone = 'light',\n}: PressableOptions & Partial<StyleProps>) => {\n  if (!isActive && inactiveBackgroundColor && inactiveBackgroundColorTone) {\n    return css`\n      border-color: ${theme?.color[inactiveBorderColor][\n        inactiveBorderColorTone\n      ]};\n    `;\n  }\n\n  if (!isActive) {\n    return css`\n      border-color: ${theme?.color[inactiveBorderColor][\n        inactiveBorderColorTone\n      ]};\n    `;\n  }\n};\n\nconst leftStyles = ({\n  theme,\n  isFirstOption,\n}: PressableOptions & Partial<StyleProps>) =>\n  isFirstOption &&\n  css`\n    border-top-left-radius: ${theme?.borderRadius.mili};\n    border-bottom-left-radius: ${theme?.borderRadius.mili};\n    border-left-width: ${theme?.borderWidth.pico};\n  `;\n\nconst rightStyles = ({\n  theme,\n  isLastOption,\n}: PressableOptions & Partial<StyleProps>) =>\n  isLastOption &&\n  css`\n    border-top-right-radius: ${theme?.borderRadius.mili};\n    border-bottom-right-radius: ${theme?.borderRadius.mili};\n    border-right-width: ${theme?.borderWidth.pico};\n  `;\n\nconst sizeStyles = ({\n  theme,\n  buttonSize = 'small',\n}: PressableOptions & Partial<StyleProps>) => {\n  switch (buttonSize) {\n    case 'small':\n      return css`\n        padding: ${theme?.spacing.mili} ${theme?.spacing.deca};\n        min-height: 34px;\n      `;\n    default:\n      return css`\n        padding: ${theme?.spacing.mili} ${theme?.spacing.kilo};\n        min-height: 44px;\n      `;\n  }\n};\n\nconst StyledPressableBase = styled(PressableSurface)<\n  PressableOptions & Partial<StyleProps>\n>`\n  border-top-width: ${({ theme }) => theme.borderWidth.pico};\n  border-bottom-width: ${({ theme }) => theme.borderWidth.pico};\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n`;\n\nexport const StyledOption = styled.View`\n  flex-direction: row;\n  flex: 1;\n`;\n\nexport const StyledDivider = styled.View<Partial<StyleProps>>`\n  width: ${({ theme }) => theme.borderWidth.pico};\n  background-color: ${({ theme }) => theme.color.secondary.light}; ;\n`;\n\nexport const StyledPressable = styled(StyledPressableBase)(\n  (props: PressableOptions & Partial<StyleProps>) => css`\n    ${activeStyles(props)}\n    ${inactiveStyles(props)}\n    ${leftStyles(props)}\n    ${rightStyles(props)}\n    ${sizeStyles(props)}\n  `\n);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/GroupButton/styled.ts"],"names":["StyledGroupButton","styled","View","disabledStyles","disabled","isActive","getStyledGroupItemText","component","active","theme","miscellaneous","surfaceColor","color","secondary","medium","activeStyles","activeBorderColor","activeBorderColorTone","inactiveStyles","inactiveBackgroundColor","inactiveBackgroundColorTone","inactiveBorderColor","inactiveBorderColorTone","leftStyles","isFirstOption","borderRadius","mili","borderWidth","pico","rightStyles","isLastOption","sizeStyles","buttonSize","spacing","deca","kilo","StyledPressableBase","PressableSurface","StyledOption","StyledDivider","light","StyledPressable","props"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { ButtonSizeType } from '../Button';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { GroupButtonOptions } from './GroupButton';\nimport { GroupButtonOptionProps } from './GroupButtonOption';\n\ninterface PressableOptions extends GroupButtonOptions {\n  isActive: boolean;\n  isFirstOption: boolean;\n  isLastOption: boolean;\n  buttonSize?: ButtonSizeType;\n}\n\nexport const StyledGroupButton = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n`;\n\n// TO FIXED: hexa color to theme definitions\nconst disabledStyles = ({\n  disabled,\n  isActive,\n}: PressableOptions & Partial<StyleProps>) =>\n  disabled &&\n  !isActive &&\n  css`\n    background-color: #dcdcdc;\n  `;\n\nexport const getStyledGroupItemText = (component: FC<TextProps>) => {\n  return styled(component)<\n    Partial<GroupButtonOptionProps> & Partial<StyleProps>\n  >`\n    color: ${({ active, theme }) =>\n      active ? theme.miscellaneous.surfaceColor : theme.color.secondary.medium};\n  `;\n};\n\nconst activeStyles = ({\n  theme,\n  isActive,\n  activeBorderColor = 'secondary',\n  activeBorderColorTone = 'medium',\n}: PressableOptions & Partial<StyleProps>) =>\n  isActive &&\n  css`\n    border-color: ${theme?.color[activeBorderColor][activeBorderColorTone]};\n  `;\n\nconst inactiveStyles = ({\n  theme,\n  isActive,\n  inactiveBackgroundColor,\n  inactiveBackgroundColorTone,\n  inactiveBorderColor = 'secondary',\n  inactiveBorderColorTone = 'light',\n}: PressableOptions & Partial<StyleProps>) => {\n  if (!isActive && inactiveBackgroundColor && inactiveBackgroundColorTone) {\n    return css`\n      border-color: ${theme?.color[inactiveBorderColor][\n        inactiveBorderColorTone\n      ]};\n    `;\n  }\n\n  if (!isActive) {\n    return css`\n      border-color: ${theme?.color[inactiveBorderColor][\n        inactiveBorderColorTone\n      ]};\n    `;\n  }\n};\n\nconst leftStyles = ({\n  theme,\n  isFirstOption,\n}: PressableOptions & Partial<StyleProps>) =>\n  isFirstOption &&\n  css`\n    border-top-left-radius: ${theme?.borderRadius.mili};\n    border-bottom-left-radius: ${theme?.borderRadius.mili};\n    border-left-width: ${theme?.borderWidth.pico};\n  `;\n\nconst rightStyles = ({\n  theme,\n  isLastOption,\n}: PressableOptions & Partial<StyleProps>) =>\n  isLastOption &&\n  css`\n    border-top-right-radius: ${theme?.borderRadius.mili};\n    border-bottom-right-radius: ${theme?.borderRadius.mili};\n    border-right-width: ${theme?.borderWidth.pico};\n  `;\n\nconst sizeStyles = ({\n  theme,\n  buttonSize = 'small',\n}: PressableOptions & Partial<StyleProps>) => {\n  switch (buttonSize) {\n    case 'small':\n      return css`\n        padding: ${theme?.spacing.mili} ${theme?.spacing.deca};\n        min-height: 34px;\n      `;\n    default:\n      return css`\n        padding: ${theme?.spacing.mili} ${theme?.spacing.kilo};\n        min-height: 44px;\n      `;\n  }\n};\n\nconst StyledPressableBase = styled(PressableSurface)<\n  PressableOptions & Partial<StyleProps>\n>`\n  border-top-width: ${({ theme }) => theme.borderWidth.pico};\n  border-bottom-width: ${({ theme }) => theme.borderWidth.pico};\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n`;\n\nexport const StyledOption = styled.View`\n  flex-direction: row;\n  flex: 1;\n`;\n\nexport const StyledDivider = styled.View<Partial<StyleProps>>`\n  width: ${({ theme }) => theme.borderWidth.pico};\n  background-color: ${({ theme }) => theme.color.secondary.light}; ;\n`;\n\nexport const StyledPressable = styled(StyledPressableBase)(\n  (props: PressableOptions & Partial<StyleProps>) => css`\n    ${activeStyles(props)}\n    ${inactiveStyles(props)}\n    ${leftStyles(props)}\n    ${rightStyles(props)}\n    ${sizeStyles(props)}\n    ${disabledStyles(props)}\n  `\n);\n"],"file":"styled.js"}

package/dist/components/atoms/Input/hooks/useMask.js

@@ -30,7 +30,7 @@ const getMask = (value = '', mask) => {
 
 const useMask = (mask, defaultValue) => {
   const applyMask = (0, _react.useCallback)((value = '') => {
-    const onlyNumbers = String((0, _reactCore.extractNumbersFromString)(value));
+    const onlyNumbers = value ? (0, _reactCore.extractDigitsFromString)(value) : value;
     const selectedMask = getMask(onlyNumbers, mask);
     const formattedValue = mergeMask(onlyNumbers, selectedMask);
     return {

package/dist/components/atoms/Input/hooks/useMask.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","String","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAaO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGC,MAAM,CAAC,yCAAyBb,KAAzB,CAAD,CAA1B;AACA,UAAMc,YAAY,GAAGN,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcE,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEH,WADA;AAELI,MAAAA,SAAS,EAAEb;AAFN,KAAP;AAID,GAVe,EAWhB,CAACF,IAAD,CAXgB,CAAlB;AAcA,QAAM,CAACD,KAAD,EAAQiB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEP,SAD6B;AAExCQ,IAAAA,SAAS,EAAER,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMU,iBAAiB,GAAG,wBACvBpB,KAAD,IAAmB;AACjB,UAAM;AAAEe,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBL,SAAS,CAACX,KAAD,CAApC;AACAiB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACL,SAAD,EAAYM,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAACjB,KAAD,EAAQoB,iBAAR,CAAP;AACD,CAtCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '@tecsinapse/react-core';\n\nexport interface IMaskValue {\n  formatted?: string;\n  raw?: any;\n}\n\nexport interface IMask {\n  converter?: (raw?: string) => IMaskValue;\n  maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n  const chars = '' + value;\n  let formattedValue = '';\n\n  for (\n    let iMask = 0, iChars = 0;\n    iMask < mask.length && iChars < chars.length;\n    iMask++\n  ) {\n    formattedValue +=\n      mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n  }\n  return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n  if (typeof mask === 'function') {\n    return mask(value);\n  }\n  return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useMask = (\n  mask: ((raw: any) => string) | string,\n  defaultValue?: string\n): [IMask, (text: string) => void] => {\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const onlyNumbers = String(extractNumbersFromString(value));\n      const selectedMask = getMask(onlyNumbers, mask);\n      const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n      return {\n        raw: onlyNumbers,\n        formatted: formattedValue,\n      };\n    },\n    [mask]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (value: string) => {\n      const { raw, formatted } = applyMask(value);\n      setValue(oldValue => ({\n        ...oldValue,\n        maskValue: {\n          raw,\n          formatted,\n        },\n      }));\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAaO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGZ,KAAK,GAAG,wCAAwBA,KAAxB,CAAH,GAAoCA,KAA7D;AACA,UAAMa,YAAY,GAAGL,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcC,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEF,WADA;AAELG,MAAAA,SAAS,EAAEZ;AAFN,KAAP;AAID,GAVe,EAWhB,CAACF,IAAD,CAXgB,CAAlB;AAcA,QAAM,CAACD,KAAD,EAAQgB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEN,SAD6B;AAExCO,IAAAA,SAAS,EAAEP,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMS,iBAAiB,GAAG,wBACvBnB,KAAD,IAAmB;AACjB,UAAM;AAAEc,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBJ,SAAS,CAACX,KAAD,CAApC;AACAgB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACJ,SAAD,EAAYK,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAAChB,KAAD,EAAQmB,iBAAR,CAAP;AACD,CAtCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractDigitsFromString } from '@tecsinapse/react-core';\n\nexport interface IMaskValue {\n  formatted?: string;\n  raw?: any;\n}\n\nexport interface IMask {\n  converter?: (raw?: string) => IMaskValue;\n  maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n  const chars = '' + value;\n  let formattedValue = '';\n\n  for (\n    let iMask = 0, iChars = 0;\n    iMask < mask.length && iChars < chars.length;\n    iMask++\n  ) {\n    formattedValue +=\n      mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n  }\n  return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n  if (typeof mask === 'function') {\n    return mask(value);\n  }\n  return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useMask = (\n  mask: ((raw: any) => string) | string,\n  defaultValue?: string\n): [IMask, (text: string) => void] => {\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const onlyNumbers = value ? extractDigitsFromString(value) : value;\n      const selectedMask = getMask(onlyNumbers, mask);\n      const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n      return {\n        raw: onlyNumbers,\n        formatted: formattedValue,\n      };\n    },\n    [mask]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (value: string) => {\n      const { raw, formatted } = applyMask(value);\n      setValue(oldValue => ({\n        ...oldValue,\n        maskValue: {\n          raw,\n          formatted,\n        },\n      }));\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}

package/dist/components/atoms/Input/masks/index.js

@@ -12,7 +12,7 @@ const Masks = {
   CEP: '99999-999',
   PHONE: '(99) 9999-9999',
   PHONE_EXTENDED: '(99) 99999-9999',
-  COMBINED_PHONE: value => value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
+  COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
 };
 exports.Masks = Masks;
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/Input/masks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACdA,KAAK,CAACC,MAAN,IAAgB,EAAhB,GAAqBV,KAAK,CAACM,KAA3B,GAAmCN,KAAK,CAACO;AATxB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, then you can use it on input components everywhere.\nexport const Masks = {\n  CPF: '999.999.999-99',\n  CNPJ: '99.999.999/9999-99',\n  DATE: '99/99/9999',\n  MONTH_YEAR: '99/9999',\n  CEP: '99999-999',\n  PHONE: '(99) 9999-9999',\n  PHONE_EXTENDED: '(99) 99999-9999',\n  COMBINED_PHONE: (value: string) =>\n    value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO;AATzB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, then you can use it on input components everywhere.\nexport const Masks = {\n  CPF: '999.999.999-99',\n  CNPJ: '99.999.999/9999-99',\n  DATE: '99/99/9999',\n  MONTH_YEAR: '99/9999',\n  CEP: '99999-999',\n  PHONE: '(99) 9999-9999',\n  PHONE_EXTENDED: '(99) 99999-9999',\n  COMBINED_PHONE: (value: string) =>\n    value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}

package/dist/components/atoms/Switch/Switch.d.ts

@@ -10,6 +10,7 @@ export interface SwitchProps {
     inactiveColorTone?: ColorGradationType;
     style?: StyleProp<ViewStyle>;
     dotStyle?: StyleProp<ViewStyle>;
+    disabled?: boolean;
 }
 declare const Switch: FC<SwitchProps>;
 export default Switch;

package/dist/components/atoms/Switch/Switch.js

@@ -33,6 +33,7 @@ const Switch = ({
   inactiveColorTone = 'light',
   active,
   dotStyle,
+  disabled = false,
   ...rest
 }) => {
   const theme = (0, _react.useTheme)();
@@ -41,18 +42,24 @@ const Switch = ({
 
   const animatedColor = _react2.default.useRef(new _reactNative.Animated.Value(active ? 1 : 0)).current;
 
+  const getBackgroundColor = (color, variation) => {
+    return disabled ? (0, _utils.lightenDarkenColor)(color, variation) : color;
+  };
+
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
-    outputRange: [theme.color[inactiveColor][inactiveColorTone], theme.color[activeColor][activeColorTone]]
+    outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25), getBackgroundColor(theme.color[activeColor][activeColorTone], 50)]
   });
   const animatedStyle = {
     backgroundColor: interpolateColor
   };
+  (0, _react2.useEffect)(() => {
+    (0, _animation.transitionSwitch)(active, transitionValue, animatedColor);
+  }, [active]);
   const handleChange = (0, _react2.useCallback)(() => {
     onChange(!active);
-    (0, _animation.transitionSwitch)(active, transitionValue, animatedColor);
   }, [active, onChange]);
-  const stylesDefaut = {
+  const stylesDefault = {
     borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),
     paddingHorizontal: (0, _utils.extractNumbersFromString)(theme.spacing.micro),
     paddingVertical: 0,
@@ -62,10 +69,11 @@ const Switch = ({
   };
   return _react2.default.createElement(_PressableSurface.PressableSurface, _extends({}, rest, {
     onPress: handleChange,
-    effect: "none"
+    effect: "none",
+    disabled: disabled
   }), _react2.default.createElement(_reactNative.Animated.View, {
     style: { ...animatedStyle,
-      ...stylesDefaut
+      ...stylesDefault
     }
   }, _react2.default.createElement(_styled.StyledSwitch, {
     style: [dotStyle, {

package/dist/components/atoms/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","interpolateColor","interpolate","inputRange","outputRange","color","animatedStyle","backgroundColor","handleChange","stylesDefaut","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAaA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/B,KAAGC;AAR4B,CAAD,KASb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBS,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBS,OADH;;AAGA,QAAME,gBAAgB,GAAGD,aAAa,CAACE,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXX,KAAK,CAACY,KAAN,CAAYjB,aAAZ,EAA2BC,iBAA3B,CADW,EAEXI,KAAK,CAACY,KAAN,CAAYnB,WAAZ,EAAyBC,eAAzB,CAFW;AAFoC,GAA1B,CAAzB;AAQA,QAAMmB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEN;AADG,GAAtB;AAIA,QAAMO,YAAY,GAAG,yBAAY,MAAM;AACrCvB,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACA,qCAAiBA,MAAjB,EAAyBI,eAAzB,EAA0CM,aAA1C;AACD,GAHoB,EAGlB,CAACV,MAAD,EAASL,QAAT,CAHkB,CAArB;AAKA,QAAMwB,YAAuB,GAAG;AAC9BC,IAAAA,YAAY,EAAE,qCAAyBjB,KAAK,CAACiB,YAAN,CAAmBC,IAA5C,CADgB;AAE9BC,IAAAA,iBAAiB,EAAE,qCAAyBnB,KAAK,CAACoB,OAAN,CAAcC,KAAvC,CAFW;AAG9BC,IAAAA,eAAe,EAAE,CAHa;AAI9BC,IAAAA,cAAc,EAAE,QAJc;AAK9BC,IAAAA,KAAK,EAAE,EALuB;AAM9BC,IAAAA,MAAM,EAAE;AANsB,GAAhC;AASA,SACE,8BAAC,kCAAD,eAAsB1B,IAAtB;AAA4B,IAAA,OAAO,EAAEgB,YAArC;AAAmD,IAAA,MAAM,EAAC;AAA1D,MACE,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGF,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAAClB,QAAD,EAAW;AAAE4B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE1B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CADF,CADF;AASD,CArDD;;eAuDeV,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback } from 'react';\nimport { Animated, StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString } from '../../../utils';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n    .current;\n\n  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n    .current;\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      theme.color[inactiveColor][inactiveColorTone],\n      theme.color[activeColor][activeColorTone],\n    ],\n  });\n\n  const animatedStyle = {\n    backgroundColor: interpolateColor,\n  };\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n    transitionSwitch(active, transitionValue, animatedColor);\n  }, [active, onChange]);\n\n  const stylesDefaut: ViewStyle = {\n    borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n    paddingVertical: 0,\n    justifyContent: 'center',\n    width: 40,\n    height: 22,\n  };\n\n  return (\n    <PressableSurface {...rest} onPress={handleChange} effect=\"none\">\n      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </Animated.View>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","disabled","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","getBackgroundColor","color","variation","interpolateColor","interpolate","inputRange","outputRange","animatedStyle","backgroundColor","handleChange","stylesDefault","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAcA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/BC,EAAAA,QAAQ,GAAG,KARoB;AAS/B,KAAGC;AAT4B,CAAD,KAUb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBU,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBU,OADH;;AAGA,QAAME,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,SAAhB,KAAsC;AAC/D,WAAOZ,QAAQ,GAAG,+BAAmBW,KAAnB,EAA0BC,SAA1B,CAAH,GAA0CD,KAAzD;AACD,GAFD;;AAIA,QAAME,gBAAgB,GAAGJ,aAAa,CAACK,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXN,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYf,aAAZ,EAA2BC,iBAA3B,CAAD,EAAgD,EAAhD,CADP,EAEXa,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYjB,WAAZ,EAAyBC,eAAzB,CAAD,EAA4C,EAA5C,CAFP;AAFoC,GAA1B,CAAzB;AAQA,QAAMsB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEL;AADG,GAAtB;AAIA,yBAAU,MAAM;AACd,qCAAiBf,MAAjB,EAAyBK,eAAzB,EAA0CM,aAA1C;AACD,GAFD,EAEG,CAACX,MAAD,CAFH;AAIA,QAAMqB,YAAY,GAAG,yBAAY,MAAM;AACrC1B,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACD,GAFoB,EAElB,CAACA,MAAD,EAASL,QAAT,CAFkB,CAArB;AAIA,QAAM2B,aAAwB,GAAG;AAC/BC,IAAAA,YAAY,EAAE,qCAAyBnB,KAAK,CAACmB,YAAN,CAAmBC,IAA5C,CADiB;AAE/BC,IAAAA,iBAAiB,EAAE,qCAAyBrB,KAAK,CAACsB,OAAN,CAAcC,KAAvC,CAFY;AAG/BC,IAAAA,eAAe,EAAE,CAHc;AAI/BC,IAAAA,cAAc,EAAE,QAJe;AAK/BC,IAAAA,KAAK,EAAE,EALwB;AAM/BC,IAAAA,MAAM,EAAE;AANuB,GAAjC;AASA,SACI,8BAAC,kCAAD,eACM5B,IADN;AAEE,IAAA,OAAO,EAAEkB,YAFX;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAEnB;AAJZ,MAME,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGiB,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAACrB,QAAD,EAAW;AAAE+B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE5B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CANF,CADJ;AAcD,CAlED;;eAoEeX,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Animated, StyleProp, ViewStyle, Text } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString, lightenDarkenColor } from '../../../utils';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n  disabled?: boolean;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  disabled = false,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n    .current;\n\n  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n    .current;\n\n  const getBackgroundColor = (color: string, variation: number) => {\n    return disabled ? lightenDarkenColor(color, variation) : color;\n  };\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),\n      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),\n    ],\n  });\n\n  const animatedStyle = {\n    backgroundColor: interpolateColor,\n  };\n\n  useEffect(() => {\n    transitionSwitch(active, transitionValue, animatedColor);\n  }, [active]);\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n  }, [active, onChange]);\n\n  const stylesDefault: ViewStyle = {\n    borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n    paddingVertical: 0,\n    justifyContent: 'center',\n    width: 40,\n    height: 22,\n  };\n\n  return (\n      <PressableSurface\n        {...rest}\n        onPress={handleChange}\n        effect=\"none\"\n        disabled={disabled}\n      >\n        <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>\n          <StyledSwitch\n            style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n          />\n        </Animated.View>\n      </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}

package/dist/components/atoms/Switch/animation.js

@@ -11,25 +11,25 @@ const transitionSwitch = (active, transitionValue, animatedColor) => {
   if (active) {
     _reactNative.Animated.timing(transitionValue, {
       toValue: 0,
-      duration: 250,
+      duration: 150,
       useNativeDriver: true
     }).start();
 
     _reactNative.Animated.timing(animatedColor, {
       toValue: 0,
-      duration: 250,
+      duration: 150,
       useNativeDriver: false
     }).start();
   } else {
     _reactNative.Animated.timing(transitionValue, {
       toValue: 16.5,
-      duration: 250,
+      duration: 150,
       useNativeDriver: true
     }).start();
 
     _reactNative.Animated.timing(animatedColor, {
       toValue: 1,
-      duration: 250,
+      duration: 150,
       useNativeDriver: false
     }).start();
   }

package/dist/components/atoms/Switch/animation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["transitionSwitch","active","transitionValue","animatedColor","Animated","timing","toValue","duration","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,gBAAgB,GAAG,CAC9BC,MAD8B,EAE9BC,eAF8B,EAG9BC,aAH8B,KAIrB;AACT,MAAIF,MAAJ,EAAY;AACVG,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,CADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD,GAXD,MAWO;AACLL,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,IADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD;AACF,CA5BM","sourcesContent":["import { Animated } from 'react-native';\n\nexport const transitionSwitch = (\n  active: boolean,\n  transitionValue: Animated.Value,\n  animatedColor: Animated.Value\n): void => {\n  if (active) {\n    Animated.timing(transitionValue, {\n      toValue: 0,\n      duration: 250,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 0,\n      duration: 250,\n      useNativeDriver: false,\n    }).start();\n  } else {\n    Animated.timing(transitionValue, {\n      toValue: 16.5,\n      duration: 250,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 1,\n      duration: 250,\n      useNativeDriver: false,\n    }).start();\n  }\n};\n"],"file":"animation.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["transitionSwitch","active","transitionValue","animatedColor","Animated","timing","toValue","duration","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,gBAAgB,GAAG,CAC9BC,MAD8B,EAE9BC,eAF8B,EAG9BC,aAH8B,KAIrB;AACT,MAAIF,MAAJ,EAAY;AACVG,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,CADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD,GAXD,MAWO;AACLL,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,IADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD;AACF,CA5BM","sourcesContent":["import { Animated } from 'react-native';\n\nexport const transitionSwitch = (\n  active: boolean,\n  transitionValue: Animated.Value,\n  animatedColor: Animated.Value\n): void => {\n  if (active) {\n    Animated.timing(transitionValue, {\n      toValue: 0,\n      duration: 150,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 0,\n      duration: 150,\n      useNativeDriver: false,\n    }).start();\n  } else {\n    Animated.timing(transitionValue, {\n      toValue: 16.5,\n      duration: 150,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 1,\n      duration: 150,\n      useNativeDriver: false,\n    }).start();\n  }\n};\n"],"file":"animation.js"}

package/dist/components/molecules/DatePicker/Modal.js

@@ -13,6 +13,8 @@ var _Calendar = require("../Calendar");
 
 var _styled = require("./styled");
 
+var _reactCore = require("@tecsinapse/react-core");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,7 +42,7 @@ const Component = ({
   }), React.createElement(_styled.Backdrop, {
     onPress: onRequestClose,
     effect: "none"
-  }, React.createElement(_styled.ModalContent, {
+  }, React.createElement(_reactCore.PressableSurface, null, React.createElement(_styled.ModalContent, {
     offset: bottomOffset
   }, React.createElement(CalendarComponent, {
     pointerEvents: 'box-none',
@@ -50,7 +52,7 @@ const Component = ({
     year: year,
     onChange: onChange,
     locale: locale
-  }))));
+  })))));
 };
 
 const Modal = Component;

package/dist/components/molecules/DatePicker/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","type","value","onRequestClose","month","year","onChange","CalendarComponent","Calendar","bottomOffset","locale","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAAS,GAAG,CAA0B;AAC1CC,EAAAA,IAD0C;AAE1CC,EAAAA,KAF0C;AAG1CC,EAAAA,cAH0C;AAI1CC,EAAAA,KAJ0C;AAK1CC,EAAAA,IAL0C;AAM1CC,EAAAA,QAN0C;AAO1CC,EAAAA,iBAAiB,GAAGC,kBAPsB;AAQ1CC,EAAAA,YAAY,GAAG,CAR2B;AAS1CC,EAAAA,MAT0C;AAU1C,KAAGC;AAVuC,CAA1B,KAW0D;AAC1E,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAER;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEM;AAAtB,KACE,oBAAC,iBAAD;AACE,IAAA,aAAa,EAAE,UADjB;AAEE,IAAA,IAAI,EAAER,IAFR;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,MAAM,EAAEI;AAPV,IADF,CADF,CAPF,CADF;AAuBD,CAnCD;;AAqCO,MAAME,KAAK,GAAGZ,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Calendar, CalendarProps, SelectionType } from '../Calendar';\nimport { Backdrop, ModalContent } from './styled';\n\nexport interface DatePickerModalProps<T extends SelectionType> {\n  CalendarComponent?: React.FC<CalendarProps<T>>;\n  bottomOffset?: number;\n}\n\nconst Component = <T extends SelectionType>({\n  type,\n  value,\n  onRequestClose,\n  month,\n  year,\n  onChange,\n  CalendarComponent = Calendar,\n  bottomOffset = 0,\n  locale,\n  ...modalProps\n}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <ModalContent offset={bottomOffset}>\n          <CalendarComponent\n            pointerEvents={'box-none'}\n            type={type}\n            value={value}\n            month={month}\n            year={year}\n            onChange={onChange}\n            locale={locale}\n          />\n        </ModalContent>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","type","value","onRequestClose","month","year","onChange","CalendarComponent","Calendar","bottomOffset","locale","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAAS,GAAG,CAA0B;AAC1CC,EAAAA,IAD0C;AAE1CC,EAAAA,KAF0C;AAG1CC,EAAAA,cAH0C;AAI1CC,EAAAA,KAJ0C;AAK1CC,EAAAA,IAL0C;AAM1CC,EAAAA,QAN0C;AAO1CC,EAAAA,iBAAiB,GAAGC,kBAPsB;AAQ1CC,EAAAA,YAAY,GAAG,CAR2B;AAS1CC,EAAAA,MAT0C;AAU1C,KAAGC;AAVuC,CAA1B,KAW0D;AAC1E,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAER;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,2BAAD,QACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEM;AAAtB,KACE,oBAAC,iBAAD;AACE,IAAA,aAAa,EAAE,UADjB;AAEE,IAAA,IAAI,EAAER,IAFR;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,MAAM,EAAEI;AAPV,IADF,CADF,CADF,CAPF,CADF;AAyBD,CArCD;;AAuCO,MAAME,KAAK,GAAGZ,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Calendar, CalendarProps, SelectionType } from '../Calendar';\nimport { Backdrop, ModalContent } from './styled';\nimport { PressableSurface } from '@tecsinapse/react-core';\n\nexport interface DatePickerModalProps<T extends SelectionType> {\n  CalendarComponent?: React.FC<CalendarProps<T>>;\n  bottomOffset?: number;\n}\n\nconst Component = <T extends SelectionType>({\n  type,\n  value,\n  onRequestClose,\n  month,\n  year,\n  onChange,\n  CalendarComponent = Calendar,\n  bottomOffset = 0,\n  locale,\n  ...modalProps\n}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <PressableSurface>\n          <ModalContent offset={bottomOffset}>\n            <CalendarComponent\n              pointerEvents={'box-none'}\n              type={type}\n              value={value}\n              month={month}\n              year={year}\n              onChange={onChange}\n              locale={locale}\n            />\n          </ModalContent>\n        </PressableSurface>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js

@@ -113,7 +113,9 @@ const DateTimeSelector = ({
   };
 
   const getDisplayedValue = granularity => value => {
-    return granularity === 'month' ? (0, _dateFns.format)(date, 'MMM').slice(0, 3) : value.toString().padStart(2, '0');
+    return granularity === 'month' ? (0, _dateFns.format)(date, 'MMM', {
+      locale: locale
+    }).slice(0, 3) : value.toString().padStart(2, '0');
   };
 
   const handlePressConfirm = () => {

package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimeSelector/DateTimeSelector.tsx"],"names":["getThresholdUnit","mode","threshold","months","includes","days","hours","DateTimeSelector","TextComponent","Text","value","onChange","format","locale","upperDateThreshold","_upperDateThreshold","lowerDateThreshold","_lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","rest","Date","date","setDate","React","useState","currentMode","setCurrentMode","isDate","modalTitle","confirmButtonText","handleChange","granularity","newValue","newState","newDate","daysInMonth","getMonth","month","getDate","getDisplayedValue","slice","toString","padStart","handlePressConfirm","handlePressBack","getFullYear","getHours","getMinutes"],"mappings":"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","sourcesContent":["import {\n  add,\n  compareAsc,\n  format as formatDate,\n  getDaysInMonth,\n  isSameDay,\n  isSameMonth,\n  isSameYear,\n  set,\n  sub,\n} from 'date-fns';\nimport * as React from 'react';\nimport { ViewProps } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Icon } from '../../atoms/Icon';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { Granularity, Selector } from './Selector';\nimport { BackButton, Content, Header, Root, SelectorContainer } from './styled';\n\nexport type DateTimeSelectorMode = 'date' | 'time' | 'datetime' | 'month';\n\nexport interface DateTimeSelectorProps extends ViewProps {\n  TextComponent?: React.FC<TextProps>;\n  value?: Date;\n  onChange?: (value: Date) => void | never;\n\n  /**\n   * Defines the Picker behavior\n   * Must be one of ['date', 'time', 'datetime', 'month']\n   */\n  mode?: DateTimeSelectorMode;\n  format?: string;\n  locale?: Locale;\n\n  /**\n   * Maximum date from today\n   */\n  upperDateThreshold?: Date;\n\n  /**\n   * Minimum date from today\n   */\n  lowerDateThreshold?: Date;\n\n  /**\n   * Minimum and maximum date in distance units from today.\n   * The distance unit used depends on the picker mode\n   * If mode is date, the unit is day\n   * If mode is time, the unit is hour\n   * If mode is datetime, the unit is day\n   * If mode is month, the unit is month\n   */\n  offsetThreshold?: number;\n\n  /**\n   * Maximum date in distance units from today.\n   * The distance unit used depends on the picker mode\n   * If mode is date, the unit is day\n   * If mode is time, the unit is hour\n   * If mode is datetime, the unit is day\n   * If mode is month, the unit is month\n   */\n  upperOffsetThreshold?: number;\n\n  /**\n   * Minimum date in distance units from today.\n   * The distance unit used depends on the picker mode\n   * If mode is date, the unit is day\n   * If mode is time, the unit is hour\n   * If mode is datetime, the unit is day\n   * If mode is month, the unit is month\n   */\n  lowerOffsetThreshold?: number;\n\n  dateModalTitle?: string;\n  timeModalTitle?: string;\n  dateConfirmButtonText?: string;\n  timeConfirmButtonText?: string;\n  dayLabel?: string;\n  monthLabel?: string;\n  yearLabel?: string;\n  hourLabel?: string;\n  minuteLabel?: string;\n}\n\nfunction getThresholdUnit(mode: DateTimeSelectorMode, threshold?: number) {\n  if (!threshold) return {};\n  if (mode === 'month') {\n    return { months: threshold };\n  } else if (['date', 'datetime'].includes(mode)) {\n    return { days: threshold };\n  } else {\n    return { hours: threshold };\n  }\n}\n\nconst DateTimeSelector: React.FC<DateTimeSelectorProps> = ({\n  TextComponent = Text,\n  value,\n  onChange,\n  mode = 'date',\n  format,\n  locale,\n  upperDateThreshold: _upperDateThreshold,\n  lowerDateThreshold: _lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n  ...rest\n}) => {\n  const lowerDateThreshold =\n    _lowerDateThreshold ||\n    ((offsetThreshold || lowerOffsetThreshold) &&\n      sub(\n        new Date(),\n        getThresholdUnit(mode, offsetThreshold || lowerOffsetThreshold)\n      ));\n\n  const upperDateThreshold =\n    _upperDateThreshold ||\n    ((offsetThreshold || upperOffsetThreshold) &&\n      add(\n        new Date(),\n        getThresholdUnit(mode, offsetThreshold || upperOffsetThreshold)\n      ));\n\n  const [date, setDate] = React.useState<Date>(value || new Date());\n  const [currentMode, setCurrentMode] = React.useState<0 | 1>(0);\n\n  const isDate =\n    ['date', 'month'].includes(mode) ||\n    (mode === 'datetime' && currentMode === 0);\n\n  const modalTitle = isDate ? dateModalTitle : timeModalTitle;\n  const confirmButtonText = isDate\n    ? dateConfirmButtonText\n    : timeConfirmButtonText;\n\n  const handleChange = (granularity: Granularity) => (newValue: number) => {\n    setDate(date => {\n      let newState: Date;\n      // Months and years must have a different handling for being\n      // the only date units that may interfere another unit.\n      if (['month', 'year'].includes(granularity)) {\n        let newDate = set(date, { [granularity]: newValue });\n        const daysInMonth = getDaysInMonth(newDate);\n        if (granularity === 'year' && date.getMonth() != newDate.getMonth()) {\n          newDate = set(newDate, { month: date.getMonth() });\n          newState = set(newDate, { date: getDaysInMonth(newDate) });\n        }\n        newState =\n          daysInMonth < date.getDate()\n            ? set(newDate, { date: daysInMonth })\n            : newDate;\n      } else {\n        newState = set(date, { [granularity]: newValue });\n      }\n\n      if (upperDateThreshold && compareAsc(newState, upperDateThreshold) > 0) {\n        return upperDateThreshold;\n      } else if (\n        lowerDateThreshold &&\n        compareAsc(newState, lowerDateThreshold) < 0\n      ) {\n        return lowerDateThreshold;\n      } else {\n        return newState;\n      }\n    });\n  };\n\n  const getDisplayedValue = (granularity: Granularity) => (value: number) => {\n    return granularity === 'month'\n      ? formatDate(date, 'MMM').slice(0, 3)\n      : value.toString().padStart(2, '0');\n  };\n\n  const handlePressConfirm = () => {\n    if (mode === 'datetime' && currentMode === 0) {\n      setCurrentMode(1);\n    } else {\n      onChange?.(date);\n    }\n  };\n\n  const handlePressBack = () => {\n    setCurrentMode(0);\n  };\n\n  return (\n    <Root {...rest}>\n      <Header>\n        {currentMode === 1 && (\n          <BackButton onPress={handlePressBack}>\n            <Icon\n              type={'material-community'}\n              name={'chevron-left'}\n              size={'mega'}\n              colorVariant={'secondary'}\n            />\n          </BackButton>\n        )}\n        <TextComponent typography={'base'} colorVariant={'secondary'}>\n          {modalTitle}\n        </TextComponent>\n      </Header>\n\n      {isDate ? (\n        <Content>\n          {mode !== 'month' && (\n            <SelectorContainer isFirst>\n              <Selector\n                TextComponent={TextComponent}\n                onChange={handleChange('date')}\n                referenceDate={date}\n                value={date.getDate()}\n                label={dayLabel || 'Day'}\n                granularity={'date'}\n                getDisplayValue={getDisplayedValue('date')}\n                preventUpper={\n                  upperDateThreshold\n                    ? isSameDay(upperDateThreshold, date)\n                    : false\n                }\n                preventLower={\n                  lowerDateThreshold\n                    ? isSameDay(lowerDateThreshold, date)\n                    : false\n                }\n              />\n            </SelectorContainer>\n          )}\n          <SelectorContainer>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('month')}\n              referenceDate={date}\n              value={date.getMonth()}\n              label={monthLabel || 'Month'}\n              granularity={'month'}\n              getDisplayValue={getDisplayedValue('month')}\n              preventUpper={\n                upperDateThreshold\n                  ? isSameMonth(upperDateThreshold, date)\n                  : false\n              }\n              preventLower={\n                lowerDateThreshold\n                  ? isSameMonth(lowerDateThreshold, date)\n                  : false\n              }\n            />\n          </SelectorContainer>\n          <SelectorContainer isLast>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('year')}\n              referenceDate={date}\n              value={date.getFullYear()}\n              label={yearLabel || 'Year'}\n              granularity={'year'}\n              getDisplayValue={getDisplayedValue('year')}\n              preventUpper={\n                upperDateThreshold\n                  ? isSameYear(upperDateThreshold, date)\n                  : false\n              }\n              preventLower={\n                lowerDateThreshold\n                  ? isSameYear(lowerDateThreshold, date)\n                  : false\n              }\n            />\n          </SelectorContainer>\n        </Content>\n      ) : (\n        <Content>\n          <SelectorContainer isFirst>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('hours')}\n              referenceDate={date}\n              value={date.getHours()}\n              label={hourLabel || 'Hour'}\n              granularity={'hours'}\n              getDisplayValue={getDisplayedValue('hours')}\n            />\n          </SelectorContainer>\n          <SelectorContainer isLast>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('minutes')}\n              referenceDate={date}\n              value={date.getMinutes()}\n              label={minuteLabel || 'Minute'}\n              granularity={'minutes'}\n              getDisplayValue={getDisplayedValue('minutes')}\n            />\n          </SelectorContainer>\n        </Content>\n      )}\n      <Button color={'primary'} onPress={handlePressConfirm}>\n        <TextComponent fontWeight=\"bold\" fontColor=\"light\">\n          {confirmButtonText || 'OK'}\n        </TextComponent>\n      </Button>\n    </Root>\n  );\n};\n\nexport default DateTimeSelector;\n"],"file":"DateTimeSelector.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimeSelector/DateTimeSelector.tsx"],"names":["getThresholdUnit","mode","threshold","months","includes","days","hours","DateTimeSelector","TextComponent","Text","value","onChange","format","locale","upperDateThreshold","_upperDateThreshold","lowerDateThreshold","_lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","rest","Date","date","setDate","React","useState","currentMode","setCurrentMode","isDate","modalTitle","confirmButtonText","handleChange","granularity","newValue","newState","newDate","daysInMonth","getMonth","month","getDate","getDisplayedValue","slice","toString","padStart","handlePressConfirm","handlePressBack","getFullYear","getHours","getMinutes"],"mappings":"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","sourcesContent":["import {\n  add,\n  compareAsc,\n  format as formatDate,\n  getDaysInMonth,\n  isSameDay,\n  isSameMonth,\n  isSameYear,\n  set,\n  sub,\n} from 'date-fns';\nimport * as React from 'react';\nimport { ViewProps } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Icon } from '../../atoms/Icon';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { Granularity, Selector } from './Selector';\nimport { BackButton, Content, Header, Root, SelectorContainer } from './styled';\n\nexport type DateTimeSelectorMode = 'date' | 'time' | 'datetime' | 'month';\n\nexport interface DateTimeSelectorProps extends ViewProps {\n  TextComponent?: React.FC<TextProps>;\n  value?: Date;\n  onChange?: (value: Date) => void | never;\n\n  /**\n   * Defines the Picker behavior\n   * Must be one of ['date', 'time', 'datetime', 'month']\n   */\n  mode?: DateTimeSelectorMode;\n  format?: string;\n  locale?: Locale;\n\n  /**\n   * Maximum date from today\n   */\n  upperDateThreshold?: Date;\n\n  /**\n   * Minimum date from today\n   */\n  lowerDateThreshold?: Date;\n\n  /**\n   * Minimum and maximum date in distance units from today.\n   * The distance unit used depends on the picker mode\n   * If mode is date, the unit is day\n   * If mode is time, the unit is hour\n   * If mode is datetime, the unit is day\n   * If mode is month, the unit is month\n   */\n  offsetThreshold?: number;\n\n  /**\n   * Maximum date in distance units from today.\n   * The distance unit used depends on the picker mode\n   * If mode is date, the unit is day\n   * If mode is time, the unit is hour\n   * If mode is datetime, the unit is day\n   * If mode is month, the unit is month\n   */\n  upperOffsetThreshold?: number;\n\n  /**\n   * Minimum date in distance units from today.\n   * The distance unit used depends on the picker mode\n   * If mode is date, the unit is day\n   * If mode is time, the unit is hour\n   * If mode is datetime, the unit is day\n   * If mode is month, the unit is month\n   */\n  lowerOffsetThreshold?: number;\n\n  dateModalTitle?: string;\n  timeModalTitle?: string;\n  dateConfirmButtonText?: string;\n  timeConfirmButtonText?: string;\n  dayLabel?: string;\n  monthLabel?: string;\n  yearLabel?: string;\n  hourLabel?: string;\n  minuteLabel?: string;\n}\n\nfunction getThresholdUnit(mode: DateTimeSelectorMode, threshold?: number) {\n  if (!threshold) return {};\n  if (mode === 'month') {\n    return { months: threshold };\n  } else if (['date', 'datetime'].includes(mode)) {\n    return { days: threshold };\n  } else {\n    return { hours: threshold };\n  }\n}\n\nconst DateTimeSelector: React.FC<DateTimeSelectorProps> = ({\n  TextComponent = Text,\n  value,\n  onChange,\n  mode = 'date',\n  format,\n  locale,\n  upperDateThreshold: _upperDateThreshold,\n  lowerDateThreshold: _lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n  ...rest\n}) => {\n  const lowerDateThreshold =\n    _lowerDateThreshold ||\n    ((offsetThreshold || lowerOffsetThreshold) &&\n      sub(\n        new Date(),\n        getThresholdUnit(mode, offsetThreshold || lowerOffsetThreshold)\n      ));\n\n  const upperDateThreshold =\n    _upperDateThreshold ||\n    ((offsetThreshold || upperOffsetThreshold) &&\n      add(\n        new Date(),\n        getThresholdUnit(mode, offsetThreshold || upperOffsetThreshold)\n      ));\n\n  const [date, setDate] = React.useState<Date>(value || new Date());\n  const [currentMode, setCurrentMode] = React.useState<0 | 1>(0);\n\n  const isDate =\n    ['date', 'month'].includes(mode) ||\n    (mode === 'datetime' && currentMode === 0);\n\n  const modalTitle = isDate ? dateModalTitle : timeModalTitle;\n  const confirmButtonText = isDate\n    ? dateConfirmButtonText\n    : timeConfirmButtonText;\n\n  const handleChange = (granularity: Granularity) => (newValue: number) => {\n    setDate(date => {\n      let newState: Date;\n      // Months and years must have a different handling for being\n      // the only date units that may interfere another unit.\n      if (['month', 'year'].includes(granularity)) {\n        let newDate = set(date, { [granularity]: newValue });\n        const daysInMonth = getDaysInMonth(newDate);\n        if (granularity === 'year' && date.getMonth() != newDate.getMonth()) {\n          newDate = set(newDate, { month: date.getMonth() });\n          newState = set(newDate, { date: getDaysInMonth(newDate) });\n        }\n        newState =\n          daysInMonth < date.getDate()\n            ? set(newDate, { date: daysInMonth })\n            : newDate;\n      } else {\n        newState = set(date, { [granularity]: newValue });\n      }\n\n      if (upperDateThreshold && compareAsc(newState, upperDateThreshold) > 0) {\n        return upperDateThreshold;\n      } else if (\n        lowerDateThreshold &&\n        compareAsc(newState, lowerDateThreshold) < 0\n      ) {\n        return lowerDateThreshold;\n      } else {\n        return newState;\n      }\n    });\n  };\n\n  const getDisplayedValue = (granularity: Granularity) => (value: number) => {\n    return granularity === 'month'\n      ? formatDate(date, 'MMM', { locale: locale }).slice(0, 3)\n      : value.toString().padStart(2, '0');\n  };\n\n  const handlePressConfirm = () => {\n    if (mode === 'datetime' && currentMode === 0) {\n      setCurrentMode(1);\n    } else {\n      onChange?.(date);\n    }\n  };\n\n  const handlePressBack = () => {\n    setCurrentMode(0);\n  };\n\n  return (\n    <Root {...rest}>\n      <Header>\n        {currentMode === 1 && (\n          <BackButton onPress={handlePressBack}>\n            <Icon\n              type={'material-community'}\n              name={'chevron-left'}\n              size={'mega'}\n              colorVariant={'secondary'}\n            />\n          </BackButton>\n        )}\n        <TextComponent typography={'base'} colorVariant={'secondary'}>\n          {modalTitle}\n        </TextComponent>\n      </Header>\n\n      {isDate ? (\n        <Content>\n          {mode !== 'month' && (\n            <SelectorContainer isFirst>\n              <Selector\n                TextComponent={TextComponent}\n                onChange={handleChange('date')}\n                referenceDate={date}\n                value={date.getDate()}\n                label={dayLabel || 'Day'}\n                granularity={'date'}\n                getDisplayValue={getDisplayedValue('date')}\n                preventUpper={\n                  upperDateThreshold\n                    ? isSameDay(upperDateThreshold, date)\n                    : false\n                }\n                preventLower={\n                  lowerDateThreshold\n                    ? isSameDay(lowerDateThreshold, date)\n                    : false\n                }\n              />\n            </SelectorContainer>\n          )}\n          <SelectorContainer>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('month')}\n              referenceDate={date}\n              value={date.getMonth()}\n              label={monthLabel || 'Month'}\n              granularity={'month'}\n              getDisplayValue={getDisplayedValue('month')}\n              preventUpper={\n                upperDateThreshold\n                  ? isSameMonth(upperDateThreshold, date)\n                  : false\n              }\n              preventLower={\n                lowerDateThreshold\n                  ? isSameMonth(lowerDateThreshold, date)\n                  : false\n              }\n            />\n          </SelectorContainer>\n          <SelectorContainer isLast>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('year')}\n              referenceDate={date}\n              value={date.getFullYear()}\n              label={yearLabel || 'Year'}\n              granularity={'year'}\n              getDisplayValue={getDisplayedValue('year')}\n              preventUpper={\n                upperDateThreshold\n                  ? isSameYear(upperDateThreshold, date)\n                  : false\n              }\n              preventLower={\n                lowerDateThreshold\n                  ? isSameYear(lowerDateThreshold, date)\n                  : false\n              }\n            />\n          </SelectorContainer>\n        </Content>\n      ) : (\n        <Content>\n          <SelectorContainer isFirst>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('hours')}\n              referenceDate={date}\n              value={date.getHours()}\n              label={hourLabel || 'Hour'}\n              granularity={'hours'}\n              getDisplayValue={getDisplayedValue('hours')}\n            />\n          </SelectorContainer>\n          <SelectorContainer isLast>\n            <Selector\n              TextComponent={TextComponent}\n              onChange={handleChange('minutes')}\n              referenceDate={date}\n              value={date.getMinutes()}\n              label={minuteLabel || 'Minute'}\n              granularity={'minutes'}\n              getDisplayValue={getDisplayedValue('minutes')}\n            />\n          </SelectorContainer>\n        </Content>\n      )}\n      <Button color={'primary'} onPress={handlePressConfirm}>\n        <TextComponent fontWeight=\"bold\" fontColor=\"light\">\n          {confirmButtonText || 'OK'}\n        </TextComponent>\n      </Button>\n    </Root>\n  );\n};\n\nexport default DateTimeSelector;\n"],"file":"DateTimeSelector.js"}

package/dist/utils/extractNumbersFromString.d.ts

@@ -1 +1,2 @@
 export declare const extractNumbersFromString: (value: string) => number;
+export declare const extractDigitsFromString: (value: string) => string;

package/dist/utils/extractNumbersFromString.js

@@ -3,9 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractNumbersFromString = void 0;
+exports.extractDigitsFromString = exports.extractNumbersFromString = void 0;
 
 const extractNumbersFromString = value => Number(value.replace(/[^0-9]/g, ''));
 
 exports.extractNumbersFromString = extractNumbersFromString;
+
+const extractDigitsFromString = value => value.replace(/[^0-9]/g, '');
+
+exports.extractDigitsFromString = extractDigitsFromString;
 //# sourceMappingURL=extractNumbersFromString.js.map

package/dist/utils/extractNumbersFromString.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","replace"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACD,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAAD,CADD","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(value.replace(/[^0-9]/g, ''));\n"],"file":"extractNumbersFromString.js"}
+{"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","replace","extractDigitsFromString"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACD,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAAD,CADD;;;;AAMA,MAAMC,uBAAuB,GAAIH,KAAD,IACrCA,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CADK","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(value.replace(/[^0-9]/g, ''));\n\n/*\n * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91\n * */\nexport const extractDigitsFromString = (value: string): string =>\n  value.replace(/[^0-9]/g, '');\n"],"file":"extractNumbersFromString.js"}

package/dist/utils/index.d.ts

@@ -1,2 +1,2 @@
 export { lightenDarkenColor } from './lightenDarkenColor';
-export { extractNumbersFromString } from './extractNumbersFromString';
+export { extractNumbersFromString, extractDigitsFromString, } from './extractNumbersFromString';

package/dist/utils/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "extractNumbersFromString", {
     return _extractNumbersFromString.extractNumbersFromString;
   }
 });
+Object.defineProperty(exports, "extractDigitsFromString", {
+  enumerable: true,
+  get: function () {
+    return _extractNumbersFromString.extractDigitsFromString;
+  }
+});
 
 var _lightenDarkenColor = require("./lightenDarkenColor");
 

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport { extractNumbersFromString } from './extractNumbersFromString';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "ca024fc90cc0f20ec96514e66b99bbd6400f5adb"
+  "gitHead": "27a01035cee1b709734bd4b6b6f518c4320814f6"
 }

package/src/components/atoms/Avatar/styled.ts

@@ -13,7 +13,6 @@ export const ContainerButtonAvatar = styled(PressableSurface)<
     theme.iconSize[size]};
   height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>
     theme.iconSize[size]};
-  cursor: ${({ onPress }) => (onPress ? 'pointer' : 'default')};
 `;
 
 export const StyledAvatar = styled(Image)<Partial<StyleProps>>`

package/src/components/atoms/GroupButton/GroupButton.tsx

@@ -25,6 +25,7 @@ export interface GroupButtonOptions {
   inactiveBorderColorTone?: ColorGradationType;
   activeStyle?: StyleProp<ViewStyle>;
   inactiveStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
 }
 
 export interface GroupButtonValue<T> {
@@ -40,6 +41,7 @@ export interface GroupButtonProps<T> {
   onChange: (option: T) => void;
   buttonSize?: ButtonSizeType;
   style?: StyleProp<ViewStyle>;
+  disableAllOptions?: boolean;
 }
 
 const GroupButton = <T extends unknown>({
@@ -57,6 +59,7 @@ const groupOptions = <T extends unknown>({
   renderKey,
   onChange,
   value,
+  disableAllOptions,
   ...rest
 }: Partial<GroupButtonProps<T>>) => {
   const theme = useTheme() as ThemeProp;
@@ -70,6 +73,7 @@ const groupOptions = <T extends unknown>({
         activeBackgroundColorTone,
         inactiveBackgroundColor,
         inactiveBackgroundColorTone,
+        disabled = disableAllOptions || option.options?.disabled,
       } = {},
     } = option;
 
@@ -98,7 +102,7 @@ const groupOptions = <T extends unknown>({
         <StyledPressable
           {...rest}
           {...option.options}
-          disabled={active}
+          disabled={disabled}
           isActive={active}
           isFirstOption={isFirst}
           isLastOption={isLast}

package/src/components/atoms/GroupButton/styled.ts

@@ -18,6 +18,17 @@ export const StyledGroupButton = styled.View<Partial<StyleProps>>`
   flex-direction: row;
 `;
 
+// TO FIXED: hexa color to theme definitions
+const disabledStyles = ({
+  disabled,
+  isActive,
+}: PressableOptions & Partial<StyleProps>) =>
+  disabled &&
+  !isActive &&
+  css`
+    background-color: #dcdcdc;
+  `;
+
 export const getStyledGroupItemText = (component: FC<TextProps>) => {
   return styled(component)<
     Partial<GroupButtonOptionProps> & Partial<StyleProps>
@@ -130,5 +141,6 @@ export const StyledPressable = styled(StyledPressableBase)(
     ${leftStyles(props)}
     ${rightStyles(props)}
     ${sizeStyles(props)}
+    ${disabledStyles(props)}
   `
 );

package/src/components/atoms/Input/hooks/useMask.ts

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { extractNumbersFromString } from '@tecsinapse/react-core';
+import { extractDigitsFromString } from '@tecsinapse/react-core';
 
 export interface IMaskValue {
   formatted?: string;
@@ -57,7 +57,7 @@ export const useMask = (
 ): [IMask, (text: string) => void] => {
   const applyMask = useCallback(
     (value = ''): IMaskValue => {
-      const onlyNumbers = String(extractNumbersFromString(value));
+      const onlyNumbers = value ? extractDigitsFromString(value) : value;
       const selectedMask = getMask(onlyNumbers, mask);
       const formattedValue = mergeMask(onlyNumbers, selectedMask);
 

package/src/components/atoms/Input/masks/index.ts

@@ -8,5 +8,5 @@ export const Masks = {
   PHONE: '(99) 9999-9999',
   PHONE_EXTENDED: '(99) 99999-9999',
   COMBINED_PHONE: (value: string) =>
-    value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
+    value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
 };

package/src/components/atoms/Switch/Switch.stories.tsx

@@ -15,7 +15,7 @@ const Template: Story<SwitchProps> = args => {
     args.onChange(arg);
   };
 
-  return <Switch active={active} onChange={onChange} />;
+  return <Switch active={active} onChange={onChange} disabled={args.disabled}/>;
 };
 
 export const Base = Template.bind({});
@@ -23,4 +23,5 @@ export const Base = Template.bind({});
 Base.args = {
   active: true,
   onChange: value => action('Cicked')(value),
+  disabled: false,
 };

package/src/components/atoms/Switch/Switch.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
-import React, { FC, useCallback } from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
+import React, { FC, useCallback, useEffect } from 'react';
+import { Animated, StyleProp, ViewStyle, Text } from 'react-native';
 import {
   ColorGradationType,
   ColorType,
@@ -9,7 +9,7 @@ import {
 import { PressableSurface } from '../PressableSurface';
 import { StyledSwitch } from './styled';
 import { transitionSwitch } from './animation';
-import { extractNumbersFromString } from '../../../utils';
+import { extractNumbersFromString, lightenDarkenColor } from '../../../utils';
 
 export interface SwitchProps {
   onChange: (active: boolean) => void;
@@ -20,6 +20,7 @@ export interface SwitchProps {
   inactiveColorTone?: ColorGradationType;
   style?: StyleProp<ViewStyle>;
   dotStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
 }
 
 const Switch: FC<SwitchProps> = ({
@@ -30,6 +31,7 @@ const Switch: FC<SwitchProps> = ({
   inactiveColorTone = 'light',
   active,
   dotStyle,
+  disabled = false,
   ...rest
 }): JSX.Element => {
   const theme = useTheme() as ThemeProp;
@@ -40,11 +42,15 @@ const Switch: FC<SwitchProps> = ({
   const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))
     .current;
 
+  const getBackgroundColor = (color: string, variation: number) => {
+    return disabled ? lightenDarkenColor(color, variation) : color;
+  };
+
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
     outputRange: [
-      theme.color[inactiveColor][inactiveColorTone],
-      theme.color[activeColor][activeColorTone],
+      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),
+      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),
     ],
   });
 
@@ -52,12 +58,15 @@ const Switch: FC<SwitchProps> = ({
     backgroundColor: interpolateColor,
   };
 
+  useEffect(() => {
+    transitionSwitch(active, transitionValue, animatedColor);
+  }, [active]);
+
   const handleChange = useCallback(() => {
     onChange(!active);
-    transitionSwitch(active, transitionValue, animatedColor);
   }, [active, onChange]);
 
-  const stylesDefaut: ViewStyle = {
+  const stylesDefault: ViewStyle = {
     borderRadius: extractNumbersFromString(theme.borderRadius.pill),
     paddingHorizontal: extractNumbersFromString(theme.spacing.micro),
     paddingVertical: 0,
@@ -67,13 +76,18 @@ const Switch: FC<SwitchProps> = ({
   };
 
   return (
-    <PressableSurface {...rest} onPress={handleChange} effect="none">
-      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>
-        <StyledSwitch
-          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
-        />
-      </Animated.View>
-    </PressableSurface>
+      <PressableSurface
+        {...rest}
+        onPress={handleChange}
+        effect="none"
+        disabled={disabled}
+      >
+        <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
+          <StyledSwitch
+            style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
+          />
+        </Animated.View>
+      </PressableSurface>
   );
 };
 

package/src/components/atoms/Switch/animation.ts

@@ -8,23 +8,23 @@ export const transitionSwitch = (
   if (active) {
     Animated.timing(transitionValue, {
       toValue: 0,
-      duration: 250,
+      duration: 150,
       useNativeDriver: true,
     }).start();
     Animated.timing(animatedColor, {
       toValue: 0,
-      duration: 250,
+      duration: 150,
       useNativeDriver: false,
     }).start();
   } else {
     Animated.timing(transitionValue, {
       toValue: 16.5,
-      duration: 250,
+      duration: 150,
       useNativeDriver: true,
     }).start();
     Animated.timing(animatedColor, {
       toValue: 1,
-      duration: 250,
+      duration: 150,
       useNativeDriver: false,
     }).start();
   }

package/src/components/molecules/DatePicker/Modal.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Modal as RNModal, ModalProps } from 'react-native';
 import { Calendar, CalendarProps, SelectionType } from '../Calendar';
 import { Backdrop, ModalContent } from './styled';
+import { PressableSurface } from '@tecsinapse/react-core';
 
 export interface DatePickerModalProps<T extends SelectionType> {
   CalendarComponent?: React.FC<CalendarProps<T>>;
@@ -29,17 +30,19 @@ const Component = <T extends SelectionType>({
       onRequestClose={onRequestClose}
     >
       <Backdrop onPress={onRequestClose} effect="none">
-        <ModalContent offset={bottomOffset}>
-          <CalendarComponent
-            pointerEvents={'box-none'}
-            type={type}
-            value={value}
-            month={month}
-            year={year}
-            onChange={onChange}
-            locale={locale}
-          />
-        </ModalContent>
+        <PressableSurface>
+          <ModalContent offset={bottomOffset}>
+            <CalendarComponent
+              pointerEvents={'box-none'}
+              type={type}
+              value={value}
+              month={month}
+              year={year}
+              onChange={onChange}
+              locale={locale}
+            />
+          </ModalContent>
+        </PressableSurface>
       </Backdrop>
     </RNModal>
   );

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -180,7 +180,7 @@ const DateTimeSelector: React.FC<DateTimeSelectorProps> = ({
 
   const getDisplayedValue = (granularity: Granularity) => (value: number) => {
     return granularity === 'month'
-      ? formatDate(date, 'MMM').slice(0, 3)
+      ? formatDate(date, 'MMM', { locale: locale }).slice(0, 3)
       : value.toString().padStart(2, '0');
   };
 

package/src/utils/extractNumbersFromString.ts

@@ -1,2 +1,8 @@
 export const extractNumbersFromString = (value: string): number =>
   Number(value.replace(/[^0-9]/g, ''));
+
+/*
+ * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91
+ * */
+export const extractDigitsFromString = (value: string): string =>
+  value.replace(/[^0-9]/g, '');

package/src/utils/index.ts

@@ -1,2 +1,5 @@
 export { lightenDarkenColor } from './lightenDarkenColor';
-export { extractNumbersFromString } from './extractNumbersFromString';
+export {
+  extractNumbersFromString,
+  extractDigitsFromString,
+} from './extractNumbersFromString';