@tecsinapse/react-core 1.10.4 → 1.11.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.4...@tecsinapse/react-core@1.11.0) (2021-12-17)
+
+
+### Bug Fixes
+
+* [163127] Modais de picker do DS estão em inglês ([a95b0b2](https://github.com/tecsinapse/design-system/commit/a95b0b283f3535af20a23ac6a9a5e5633127d5b0))
+
+
+
+
+
 ## [1.10.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.3...@tecsinapse/react-core@1.10.4) (2021-12-07)
 
 **Note:** Version bump only for package @tecsinapse/react-core

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/Switch/Switch.js

@@ -53,9 +53,11 @@ const Switch = ({
   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 stylesDefault = {
     borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

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

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/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,
@@ -58,9 +58,12 @@ const Switch: FC<SwitchProps> = ({
     backgroundColor: interpolateColor,
   };
 
+  useEffect(() => {
+    transitionSwitch(active, transitionValue, animatedColor);
+  }, [active]);
+
   const handleChange = useCallback(() => {
     onChange(!active);
-    transitionSwitch(active, transitionValue, animatedColor);
   }, [active, onChange]);
 
   const stylesDefault: ViewStyle = {
@@ -73,18 +76,18 @@ const Switch: FC<SwitchProps> = ({
   };
 
   return (
-    <PressableSurface
-      {...rest}
-      onPress={handleChange}
-      effect="none"
-      disabled={disabled}
-    >
-      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
-        <StyledSwitch
-          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
-        />
-      </Animated.View>
-    </PressableSurface>
+      <PressableSurface
+        {...rest}
+        onPress={handleChange}
+        effect="none"
+        disabled={disabled}
+      >
+        <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
+          <StyledSwitch
+            style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
+          />
+        </Animated.View>
+      </PressableSurface>
   );
 };
 

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

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

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

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

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

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