@tecsinapse/react-core 1.10.2 → 1.11.1

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.11.0...@tecsinapse/react-core@1.11.1) (2021-12-20)
+
+
+### Bug Fixes
+
+* complement active on transitionSwitch ([969a047](https://github.com/tecsinapse/design-system/commit/969a04748dc74107e22be6bc103e12c813ee232d))
+* missing some locales on datetime formats ([97ca962](https://github.com/tecsinapse/design-system/commit/97ca9621dd67daf4b4d1f9e58783b3ba721a2e31))
+
+
+
+
+
+# [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)
 
 

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

@@ -26,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: {
@@ -43,7 +46,7 @@ const groupOptions = ({
         activeBackgroundColorTone,
         inactiveBackgroundColor,
         inactiveBackgroundColorTone,
-        disabled
+        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);

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","disabled","key","active","isFirst","isLast","length","colors","miscellaneous","surfaceColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;;;;;AAoCA,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,2BANO;AAOPC,QAAAA;AAPO,UAQL;AAVA,QAWFT,MAXJ;AAaA,UAAMU,GAAG,GAAGf,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAGO,WAAH,CAArB;AACA,UAAMS,MAAM,GAAGD,GAAG,MAAKf,SAAL,aAAKA,SAAL,uBAAKA,SAAS,CAAGE,KAAH,CAAd,CAAlB;AACA,UAAMe,OAAO,GAAGX,GAAG,KAAK,CAAxB;AACA,UAAMY,MAAM,GAAGZ,GAAG,KAAKR,OAAO,CAACqB,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,eACMnB,IADN,EAEMS,MAAM,CAACP,OAFb;AAGE,MAAA,QAAQ,EAAEgB,QAHZ;AAIE,MAAA,QAAQ,EAAEE,MAJZ;AAKE,MAAA,aAAa,EAAEC,OALjB;AAME,MAAA,YAAY,EAAEC,MANhB;AAOE,MAAA,OAAO,EAAE,MAAMjB,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAGM,WAAH,CAPzB;AAQE,MAAA,YAAY,EAAEa,MARhB;AASE,MAAA,KAAK,EAAEJ,MAAM,GAAGR,WAAH,GAAiBC;AAThC,QAWGV,YAXH,aAWGA,YAXH,uBAWGA,YAAY,CAAGM,MAAM,CAACH,KAAV,EAAiBc,MAAjB,CAXf,CADF,EAcG,CAACE,MAAD,IAAW,8BAAC,qBAAD,OAdd,CADF;AAkBD,GApDM,CAAP;AAqDD,CA9DD;;eAgEexB,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}\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        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"}
+{"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/Input/hooks/useMask.js

@@ -30,7 +30,7 @@ const getMask = (value = '', mask) => {
 
 const useMask = (mask, defaultValue) => {
   const applyMask = (0, _react.useCallback)((value = '') => {
-    const onlyNumbers = value ? String((0, _reactCore.extractNumbersFromString)(value)) : 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,GAAGZ,KAAK,GACrBa,MAAM,CAAC,yCAAyBb,KAAzB,CAAD,CADe,GAErBA,KAFJ;AAGA,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,GAZe,EAahB,CAACF,IAAD,CAbgB,CAAlB;AAgBA,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,CAxCM","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 = value\n        ? String(extractNumbersFromString(value))\n        : 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,qCAAiB,CAACf,MAAlB,EAA0BK,eAA1B,EAA2CM,aAA3C;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,SACE,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,CADF;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/DatePicker.js

@@ -69,13 +69,21 @@ function DatePicker({
     if (!value) return placeholder;
 
     if (type === 'day') {
-      return (0, _dateFns.format)(value, format);
+      return (0, _dateFns.format)(value, format, {
+        locale: locale
+      });
     } else {
       const {
         lowest,
         highest
       } = value;
-      if (highest) return `${(0, _dateFns.format)(lowest, format)} - ${(0, _dateFns.format)(highest, format)}`;else return (0, _dateFns.format)(lowest, format);
+      if (highest) return `${(0, _dateFns.format)(lowest, format, {
+        locale: locale
+      })} - ${(0, _dateFns.format)(highest, format, {
+        locale: locale
+      })}`;else return (0, _dateFns.format)(lowest, format, {
+        locale: locale
+      });
     }
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","bottomOffset","rightComponent","animationType","style","locale","closeOnPick","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","useCallback","handleCloseModal","getDisplayValue","lowest","highest","StyledText","setTimeout"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { DatePickerModalProps, Modal } from './Modal';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { useEffect } from 'react';\n\nexport interface DatePickerProps<T extends SelectionType>\n  extends InputContainerProps,\n    DatePickerModalProps<T>,\n    Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  locale,\n  closeOnPick = false,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = React.useCallback(() => {\n    setModalVisible(true);\n    handleFocus();\n  }, [handleFocus, setModalVisible]);\n\n  const handleCloseModal = React.useCallback(() => {\n    setModalVisible(false);\n    handleBlur();\n  }, [handleBlur, setModalVisible]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format);\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format)} - ${formatDate(highest, format)}`;\n      else return formatDate(lowest, format);\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(handleCloseModal, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(handleCloseModal, 200);\n    }\n  }, [value, closeOnPick, type, handleCloseModal]);\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        CalendarComponent={CalendarComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        month={month}\n        year={year}\n        onChange={onChange}\n        value={value}\n        type={type}\n        locale={locale}\n      />\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","bottomOffset","rightComponent","animationType","style","locale","closeOnPick","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","useCallback","handleCloseModal","getDisplayValue","lowest","highest","StyledText","setTimeout"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { DatePickerModalProps, Modal } from './Modal';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { useEffect } from 'react';\n\nexport interface DatePickerProps<T extends SelectionType>\n  extends InputContainerProps,\n    DatePickerModalProps<T>,\n    Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  locale,\n  closeOnPick = false,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = React.useCallback(() => {\n    setModalVisible(true);\n    handleFocus();\n  }, [handleFocus, setModalVisible]);\n\n  const handleCloseModal = React.useCallback(() => {\n    setModalVisible(false);\n    handleBlur();\n  }, [handleBlur, setModalVisible]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(handleCloseModal, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(handleCloseModal, 200);\n    }\n  }, [value, closeOnPick, type, handleCloseModal]);\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        CalendarComponent={CalendarComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        month={month}\n        year={year}\n        onChange={onChange}\n        value={value}\n        type={type}\n        locale={locale}\n      />\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.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/DateTimePicker/DateTimePicker.js

@@ -79,7 +79,9 @@ const DateTimePicker = ({
   };
 
   const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
-  const displayValue = (value ? (0, _dateFns.format)(value, format) : placeholder) || ' ';
+  const displayValue = (value ? (0, _dateFns.format)(value, format, {
+    locale: locale
+  }) : placeholder) || ' ';
   return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, displayValue) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
     focused: focused,
     viewStyle: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","bottomOffset","rightComponent","animationType","style","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","handleCloseModal","StyledText","displayValue"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\nimport { DateTimePickerModalProps, Modal } from './Modal';\nimport { HintInputContainer } from '../HintInputContainer';\n\nexport interface DateTimePickerProps\n  extends InputContainerProps,\n    DateTimePickerModalProps,\n    Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  ...rest\n}) => {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = () => {\n    setModalVisible(true);\n    handleFocus();\n  };\n\n  const handleCloseModal = () => {\n    setModalVisible(false);\n    handleBlur();\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue = (value ? formatDate(value, format) : placeholder) || ' ';\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        DateTimeSelectorComponent={DateTimeSelectorComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        onChange={onChange}\n        value={value}\n        mode={mode}\n        format={format}\n        locale={locale}\n        upperDateThreshold={upperDateThreshold}\n        lowerDateThreshold={lowerDateThreshold}\n        offsetThreshold={offsetThreshold}\n        upperOffsetThreshold={upperOffsetThreshold}\n        lowerOffsetThreshold={lowerOffsetThreshold}\n        dateModalTitle={dateModalTitle}\n        timeModalTitle={timeModalTitle}\n        dateConfirmButtonText={dateConfirmButtonText}\n        timeConfirmButtonText={timeConfirmButtonText}\n        dayLabel={dayLabel}\n        monthLabel={monthLabel}\n        yearLabel={yearLabel}\n        hourLabel={hourLabel}\n        minuteLabel={minuteLabel}\n      />\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","bottomOffset","rightComponent","animationType","style","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","handleCloseModal","StyledText","displayValue"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\nimport { DateTimePickerModalProps, Modal } from './Modal';\nimport { HintInputContainer } from '../HintInputContainer';\n\nexport interface DateTimePickerProps\n  extends InputContainerProps,\n    DateTimePickerModalProps,\n    Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  ...rest\n}) => {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = () => {\n    setModalVisible(true);\n    handleFocus();\n  };\n\n  const handleCloseModal = () => {\n    setModalVisible(false);\n    handleBlur();\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue =\n    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||\n    ' ';\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        DateTimeSelectorComponent={DateTimeSelectorComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        onChange={onChange}\n        value={value}\n        mode={mode}\n        format={format}\n        locale={locale}\n        upperDateThreshold={upperDateThreshold}\n        lowerDateThreshold={lowerDateThreshold}\n        offsetThreshold={offsetThreshold}\n        upperOffsetThreshold={upperOffsetThreshold}\n        lowerOffsetThreshold={lowerOffsetThreshold}\n        dateModalTitle={dateModalTitle}\n        timeModalTitle={timeModalTitle}\n        dateConfirmButtonText={dateConfirmButtonText}\n        timeConfirmButtonText={timeConfirmButtonText}\n        dayLabel={dayLabel}\n        monthLabel={monthLabel}\n        yearLabel={yearLabel}\n        hourLabel={hourLabel}\n        minuteLabel={minuteLabel}\n      />\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.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.2",
+  "version": "1.11.1",
   "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": "fb3e15d84dc2e9d529dc3a00343751302c325c39"
+  "gitHead": "4334fe0f86e0e31cfdbea1acd24c8a1fe64319f4"
 }

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

@@ -41,6 +41,7 @@ export interface GroupButtonProps<T> {
   onChange: (option: T) => void;
   buttonSize?: ButtonSizeType;
   style?: StyleProp<ViewStyle>;
+  disableAllOptions?: boolean;
 }
 
 const GroupButton = <T extends unknown>({
@@ -58,6 +59,7 @@ const groupOptions = <T extends unknown>({
   renderKey,
   onChange,
   value,
+  disableAllOptions,
   ...rest
 }: Partial<GroupButtonProps<T>>) => {
   const theme = useTheme() as ThemeProp;
@@ -71,7 +73,7 @@ const groupOptions = <T extends unknown>({
         activeBackgroundColorTone,
         inactiveBackgroundColor,
         inactiveBackgroundColorTone,
-        disabled,
+        disabled = disableAllOptions || option.options?.disabled,
       } = {},
     } = option;
 

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,9 +57,7 @@ export const useMask = (
 ): [IMask, (text: string) => void] => {
   const applyMask = useCallback(
     (value = ''): IMaskValue => {
-      const onlyNumbers = value
-        ? String(extractNumbersFromString(value))
-        : 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,8 +76,13 @@ const Switch: FC<SwitchProps> = ({
   };
 
   return (
-    <PressableSurface {...rest} onPress={handleChange} effect="none">
-      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>
+    <PressableSurface
+      {...rest}
+      onPress={handleChange}
+      effect="none"
+      disabled={disabled}
+    >
+      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
         <StyledSwitch
           style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
         />

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/DatePicker.tsx

@@ -74,12 +74,14 @@ function DatePicker<T extends SelectionType>({
   const getDisplayValue = () => {
     if (!value) return placeholder;
     if (type === 'day') {
-      return formatDate(value as Date, format);
+      return formatDate(value as Date, format, { locale: locale });
     } else {
       const { lowest, highest } = value as DateRange;
       if (highest)
-        return `${formatDate(lowest, format)} - ${formatDate(highest, format)}`;
-      else return formatDate(lowest, format);
+        return `${formatDate(lowest, format, {
+          locale: locale,
+        })} - ${formatDate(highest, format, { locale: locale })}`;
+      else return formatDate(lowest, format, { locale: locale });
     }
   };
 

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/DateTimePicker/DateTimePicker.tsx

@@ -80,7 +80,9 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   };
 
   const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue = (value ? formatDate(value, format) : placeholder) || ' ';
+  const displayValue =
+    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
+    ' ';
 
   return (
     <>

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';