@tecsinapse/react-core 1.11.0 → 1.12.2

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.1...@tecsinapse/react-core@1.12.2) (2021-12-22)
+
+
+### Bug Fixes
+
+* spacing grid ([4929fd8](https://github.com/tecsinapse/design-system/commit/4929fd83cb91484959e19aeee2dfc8cfcce6f009))
+
+
+
+
+
+## [1.12.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.0...@tecsinapse/react-core@1.12.1) (2021-12-21)
+
+
+### Bug Fixes
+
+* wrapper on gridItem. ([db99917](https://github.com/tecsinapse/design-system/commit/db999176d1440ed12b91a041fbfb850f76b3b867))
+
+
+
+
+
+# [1.12.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.11.1...@tecsinapse/react-core@1.12.0) (2021-12-21)
+
+
+### Bug Fixes
+
+* extractNumbersFromString spacing GridItem ([65a88e6](https://github.com/tecsinapse/design-system/commit/65a88e660418d8a7903faa249e6e322b21d6791a))
+
+
+### Features
+
+* add grid element based on flex layout ([732f6c4](https://github.com/tecsinapse/design-system/commit/732f6c455c270325cb71c487ae01f2eee1869e0f))
+
+
+
+
+
+## [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)
 
 

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

@@ -54,7 +54,7 @@ const Switch = ({
     backgroundColor: interpolateColor
   };
   (0, _react2.useEffect)(() => {
-    (0, _animation.transitionSwitch)(active, transitionValue, animatedColor);
+    (0, _animation.transitionSwitch)(!active, transitionValue, animatedColor);
   }, [active]);
   const handleChange = (0, _react2.useCallback)(() => {
     onChange(!active);

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,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"}
+{"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/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/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/Grid/Grid.d.ts

@@ -0,0 +1,10 @@
+import { ViewProps } from 'react-native';
+import { SpacingType } from '@tecsinapse/react-core';
+export interface IGrid extends ViewProps {
+    children: JSX.Element[];
+    layout?: number[][];
+    columns?: number;
+    spacing?: SpacingType;
+}
+declare const Grid: ({ children, columns, layout, style, spacing, ...rest }: IGrid) => JSX.Element;
+export default Grid;

package/dist/components/molecules/Grid/Grid.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Grid = ({
+  children,
+  columns = 12,
+  layout,
+  style,
+  spacing,
+  ...rest
+}) => {
+  if (layout) {
+    const flatLayout = layout.flat();
+    return _react.default.createElement(_reactNative.View, _extends({
+      style: [style, {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      }]
+    }, rest), _react.default.Children.map(children, (child, index) => _react.default.createElement(_Item.GridItem, {
+      columns: columns,
+      span: flatLayout[index],
+      spacing: spacing
+    }, child)));
+  }
+
+  return _react.default.createElement(_reactNative.View, _extends({
+    style: [style, {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    }]
+  }, rest), _react.default.Children.map(children, child => {
+    return _react.default.cloneElement(child, { ...(child === null || child === void 0 ? void 0 : child.props),
+      columns,
+      spacing: (child === null || child === void 0 ? void 0 : child.props.spacing) ?? spacing
+    });
+  }));
+};
+
+var _default = Grid;
+exports.default = _default;
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Grid/Grid.tsx"],"names":["Grid","children","columns","layout","style","spacing","rest","flatLayout","flat","display","flexDirection","flexWrap","React","Children","map","child","index","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAmBA,MAAMA,IAAI,GAAG,CAAC;AACZC,EAAAA,QADY;AAEZC,EAAAA,OAAO,GAAG,EAFE;AAGZC,EAAAA,MAHY;AAIZC,EAAAA,KAJY;AAKZC,EAAAA,OALY;AAMZ,KAAGC;AANS,CAAD,KAOA;AACX,MAAIH,MAAJ,EAAY;AACV,UAAMI,UAAU,GAAGJ,MAAM,CAACK,IAAP,EAAnB;AACA,WACE,6BAAC,iBAAD;AACE,MAAA,KAAK,EAAE,CACLJ,KADK,EAEL;AACEK,QAAAA,OAAO,EAAE,MADX;AAEEC,QAAAA,aAAa,EAAE,KAFjB;AAGEC,QAAAA,QAAQ,EAAE;AAHZ,OAFK;AADT,OASML,IATN,GAWGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,CAACc,KAAD,EAAQC,KAAR,KAC5B,6BAAC,cAAD;AACE,MAAA,OAAO,EAAEd,OADX;AAEE,MAAA,IAAI,EAAEK,UAAU,CAACS,KAAD,CAFlB;AAGE,MAAA,OAAO,EAAEX;AAHX,OAKGU,KALH,CADD,CAXH,CADF;AAuBD;;AAED,SACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACLX,KADK,EAEL;AACEK,MAAAA,OAAO,EAAE,MADX;AAEEC,MAAAA,aAAa,EAAE,KAFjB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KAFK;AADT,KASML,IATN,GAWGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6Bc,KAAK,IAAI;AACrC,WAAOH,eAAMK,YAAN,CAAmBF,KAAnB,EAA0B,EAC/B,IAAGA,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEG,KAAV,CAD+B;AAE/BhB,MAAAA,OAF+B;AAG/BG,MAAAA,OAAO,EAAE,CAAAU,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,KAAP,CAAab,OAAb,KAAwBA;AAHF,KAA1B,CAAP;AAKD,GANA,CAXH,CADF;AAqBD,CAxDD;;eA0DeL,I","sourcesContent":["import React from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { GridItem } from './Item';\nimport { SpacingType } from '@tecsinapse/react-core';\n\nexport interface IGrid extends ViewProps {\n  children: JSX.Element[];\n  /** Layout should represent the multiplier of columns to fill the rows properly.\n   * Example:\n   * const layout = [\n   *   [6, 6], // Two elements on row\n   *   [4, 4, 4], // Three elements on row\n   *   [12], // One element on row\n   * ];\n   * */\n  layout?: number[][];\n  /** Number of grid columns to be considered (not the number of elements per row) */\n  columns?: number;\n  spacing?: SpacingType;\n}\n\nconst Grid = ({\n  children,\n  columns = 12,\n  layout,\n  style,\n  spacing,\n  ...rest\n}: IGrid) => {\n  if (layout) {\n    const flatLayout = layout.flat();\n    return (\n      <View\n        style={[\n          style,\n          {\n            display: 'flex',\n            flexDirection: 'row',\n            flexWrap: 'wrap',\n          },\n        ]}\n        {...rest}\n      >\n        {React.Children.map(children, (child, index) => (\n          <GridItem\n            columns={columns}\n            span={flatLayout[index]}\n            spacing={spacing}\n          >\n            {child}\n          </GridItem>\n        ))}\n      </View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        style,\n        {\n          display: 'flex',\n          flexDirection: 'row',\n          flexWrap: 'wrap',\n        },\n      ]}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        return React.cloneElement(child, {\n          ...child?.props,\n          columns,\n          spacing: child?.props.spacing ?? spacing,\n        });\n      })}\n    </View>\n  );\n};\n\nexport default Grid;\n"],"file":"Grid.js"}

package/dist/components/molecules/Grid/Item/Item.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SpacingType } from '@tecsinapse/react-core';
+declare type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
+declare type FlexAlignBase = FlexPositioning | 'stretch';
+declare type FlexAlignType = FlexAlignBase | 'baseline';
+declare type FlexSpacing = 'space-between' | 'space-around';
+export interface IGridItem {
+    children: React.ReactElement;
+    span: number;
+    columns?: number;
+    loading?: boolean;
+    loadingComponent?: React.ReactElement;
+    alignContent?: FlexAlignBase | FlexSpacing;
+    alignItems?: FlexAlignType;
+    alignSelf?: 'auto' | FlexAlignType;
+    flex?: number;
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    flexGrow?: number;
+    flexShrink?: number;
+    justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
+    spacing?: SpacingType;
+    wrapper?: boolean;
+}
+declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, wrapper, ...rest }: IGridItem) => JSX.Element;
+export default GridItem;

package/dist/components/molecules/Grid/Item/Item.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _reactNative = require("react-native");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const GridItem = ({
+  children,
+  span,
+  columns = 12,
+  loadingComponent,
+  loading = false,
+  spacing: _spacing,
+  wrapper = false,
+  ...rest
+}) => {
+  const {
+    spacing
+  } = (0, _reactCore.useTheme)();
+
+  if (!_react.default.Children.only(children)) {
+    throw new Error('The number of children in GridItem should be one');
+  }
+
+  if (loadingComponent && loading) {
+    return loadingComponent;
+  }
+
+  const style = { ...rest,
+    boxSizing: 'border-box',
+    flexBasis: `${100 / (columns / span)}%`,
+    padding: _spacing ? (0, _reactCore.extractNumbersFromString)(spacing[_spacing]) : undefined
+  };
+
+  const clone = _react.default.cloneElement(children, { ...(children === null || children === void 0 ? void 0 : children.props),
+    style: wrapper ? children === null || children === void 0 ? void 0 : children.props.style : { ...style,
+      ...(children === null || children === void 0 ? void 0 : children.props.style)
+    }
+  });
+
+  return wrapper ? _react.default.createElement(_reactNative.View, {
+    style: style
+  }, clone) : clone;
+};
+
+var _default = GridItem;
+exports.default = _default;
+//# sourceMappingURL=Item.js.map

package/dist/components/molecules/Grid/Item/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","columns","loadingComponent","loading","spacing","_spacing","wrapper","rest","React","Children","only","Error","style","boxSizing","flexBasis","padding","undefined","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;AA+BA,MAAMA,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,IAFgB;AAGhBC,EAAAA,OAAO,GAAG,EAHM;AAIhBC,EAAAA,gBAJgB;AAKhBC,EAAAA,OAAO,GAAG,KALM;AAMhBC,EAAAA,OAAO,EAAEC,QANO;AAOhBC,EAAAA,OAAO,GAAG,KAPM;AAQhB,KAAGC;AARa,CAAD,KASA;AACf,QAAM;AAAEH,IAAAA;AAAF,MAAc,0BAApB;;AACA,MAAI,CAACI,eAAMC,QAAN,CAAeC,IAAf,CAAoBX,QAApB,CAAL,EAAoC;AAClC,UAAM,IAAIY,KAAJ,CAAU,kDAAV,CAAN;AACD;;AACD,MAAIT,gBAAgB,IAAIC,OAAxB,EAAiC;AAC/B,WAAOD,gBAAP;AACD;;AAED,QAAMU,KAAK,GAAG,EACZ,GAAGL,IADS;AAEZM,IAAAA,SAAS,EAAE,YAFC;AAGZC,IAAAA,SAAS,EAAG,GAAE,OAAOb,OAAO,GAAGD,IAAjB,CAAuB,GAHzB;AAIZe,IAAAA,OAAO,EAAEV,QAAQ,GAAG,yCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAH,GAAiDW;AAJtD,GAAd;;AAOA,QAAMC,KAAK,GAAGT,eAAMU,YAAN,CAAmBnB,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEoB,KAAb,CADyC;AAEzCP,IAAAA,KAAK,EAAEN,OAAO,GACVP,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEoB,KAAV,CAAgBP,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGb,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEoB,KAAV,CAAgBP,KAAnB;AAAZ;AAJqC,GAA7B,CAAd;;AAOA,SAAON,OAAO,GAAG,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEM;AAAb,KAAqBK,KAArB,CAAH,GAAwCA,KAAtD;AACD,CAjCD;;eAmCenB,Q","sourcesContent":["import React from 'react';\nimport {\n  extractNumbersFromString,\n  SpacingType,\n  useTheme,\n} from '@tecsinapse/react-core';\nimport { View } from 'react-native';\n\ntype FlexPositioning = 'flex-start' | 'flex-end' | 'center';\ntype FlexAlignBase = FlexPositioning | 'stretch';\ntype FlexAlignType = FlexAlignBase | 'baseline';\ntype FlexSpacing = 'space-between' | 'space-around';\n\nexport interface IGridItem {\n  children: React.ReactElement;\n  /** Number of columns to fill */\n  span: number;\n  /** You don't have to give this property since is inherited from Grid */\n  columns?: number;\n  loading?: boolean;\n  /** If your GridItem has a loading state, specify the component here (Skeleton) */\n  loadingComponent?: React.ReactElement;\n  /** Flex properties below */\n  alignContent?: FlexAlignBase | FlexSpacing;\n  alignItems?: FlexAlignType;\n  alignSelf?: 'auto' | FlexAlignType;\n  flex?: number;\n  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  flexGrow?: number;\n  flexShrink?: number;\n  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';\n  /** You don't have to give this property since is inherited from Grid */\n  spacing?: SpacingType;\n  /** Used to wrap children in a View when its style extrapolates the dimensions*/\n  wrapper?: boolean;\n}\n\nconst GridItem = ({\n  children,\n  span,\n  columns = 12,\n  loadingComponent,\n  loading = false,\n  spacing: _spacing,\n  wrapper = false,\n  ...rest\n}: IGridItem) => {\n  const { spacing } = useTheme();\n  if (!React.Children.only(children)) {\n    throw new Error('The number of children in GridItem should be one');\n  }\n  if (loadingComponent && loading) {\n    return loadingComponent;\n  }\n\n  const style = {\n    ...rest,\n    boxSizing: 'border-box',\n    flexBasis: `${100 / (columns / span)}%`,\n    padding: _spacing ? extractNumbersFromString(spacing[_spacing]) : undefined,\n  };\n\n  const clone = React.cloneElement(children, {\n    ...children?.props,\n    style: wrapper\n      ? children?.props.style\n      : { ...style, ...children?.props.style },\n  });\n\n  return wrapper ? <View style={style}>{clone}</View> : clone;\n};\n\nexport default GridItem;\n"],"file":"Item.js"}

package/dist/components/molecules/Grid/Item/index.d.ts

@@ -0,0 +1 @@
+export { default as GridItem, IGridItem } from './Item';

package/dist/components/molecules/Grid/Item/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.default;
+  }
+});
+Object.defineProperty(exports, "IGridItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.IGridItem;
+  }
+});
+
+var _Item = _interopRequireWildcard(require("./Item"));
+
+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; }
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Grid/Item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as GridItem, IGridItem } from './Item';\n"],"file":"index.js"}

package/dist/components/molecules/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export { GridItem, IGridItem } from './Item';
+export { default as Grid, IGrid } from './Grid';

package/dist/components/molecules/Grid/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.GridItem;
+  }
+});
+Object.defineProperty(exports, "IGridItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.IGridItem;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "IGrid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.IGrid;
+  }
+});
+
+var _Item = require("./Item");
+
+var _Grid = _interopRequireWildcard(require("./Grid"));
+
+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; }
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Grid/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { GridItem, IGridItem } from './Item';\nexport { default as Grid, IGrid } from './Grid';\n"],"file":"index.js"}

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { InputPasswordIcon } from './components/molecules/InputPassword';
 export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
 export { HintInputContainer, HintInputContainerProps, } from './components/molecules/HintInputContainer';
 export { TextArea, TextAreaProps, TextAreaInputBase, } from './components/molecules/TextArea';
+export { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';

package/dist/index.js

@@ -84,6 +84,10 @@ var _exportNames = {
   TextArea: true,
   TextAreaProps: true,
   TextAreaInputBase: true,
+  GridItem: true,
+  Grid: true,
+  IGridItem: true,
+  IGrid: true,
   ThemeProvider: true
 };
 Object.defineProperty(exports, "Avatar", {
@@ -566,6 +570,30 @@ Object.defineProperty(exports, "TextAreaInputBase", {
     return _TextArea.TextAreaInputBase;
   }
 });
+Object.defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function () {
+    return _Grid.GridItem;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.Grid;
+  }
+});
+Object.defineProperty(exports, "IGridItem", {
+  enumerable: true,
+  get: function () {
+    return _Grid.IGridItem;
+  }
+});
+Object.defineProperty(exports, "IGrid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.IGrid;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -627,6 +655,8 @@ var _HintInputContainer = require("./components/molecules/HintInputContainer");
 
 var _TextArea = require("./components/molecules/TextArea");
 
+var _Grid = require("./components/molecules/Grid");
+
 var _definitions = require("./styles/definitions");
 
 Object.keys(_definitions).forEach(function (key) {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAkBA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAKA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Avatar, AvatarProps } from './components/atoms/Avatar';\nexport { Badge, BadgeProps } from './components/atoms/Badge';\nexport { BoxContent, BoxContentProps } from './components/atoms/BoxContent';\nexport {\n  Button,\n  ButtonProps,\n  ButtonSizeType,\n  ButtonStateProps,\n  ButtonStateType,\n  Error,\n  Loading,\n  Success,\n} from './components/atoms/Button';\nexport { Card, CardProps } from './components/atoms/Card';\nexport { Footer, FooterProps } from './components/atoms/Card/Footer';\nexport { Header, HeaderProps } from './components/atoms/Card/Header';\nexport { Checkbox, CheckboxProps } from './components/atoms/Checkbox';\nexport { Divider, DividerProps } from './components/atoms/Divider';\nexport {\n  GroupButton,\n  GroupButtonOption,\n  GroupButtonOptionProps,\n  GroupButtonProps,\n  GroupButtonValue,\n} from './components/atoms/GroupButton';\nexport { Icon, IconProps } from './components/atoms/Icon';\nexport {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElement,\n  InputElementProps,\n  InputVariantType,\n  Masks,\n  PressableInputContainer,\n  PressableInputContainerProps,\n  StyledBorderKeeper,\n  useCurrencyMask,\n  useInputFocus,\n  useMask,\n  disabledInputStyles,\n  IMask,\n  IMaskValue,\n} from './components/atoms/Input';\nexport { Paper, PaperProps } from './components/atoms/Paper';\nexport {\n  PressableSurface,\n  PressableSurfaceProps,\n} from './components/atoms/PressableSurface';\nexport { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';\nexport { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';\nexport { Switch, SwitchProps } from './components/atoms/Switch';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextProps } from './components/atoms/Text';\nexport {\n  Calendar,\n  CalendarProps,\n  DateRange,\n  SelectionType,\n} from './components/molecules/Calendar';\nexport { DatePicker, DatePickerProps } from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  DateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport {\n  DateTimeSelector,\n  DateTimeSelectorMode,\n  DateTimeSelectorProps,\n} from './components/molecules/DateTimeSelector';\nexport { InputPasswordIcon } from './components/molecules/InputPassword';\nexport { Snackbar, SnackbarProps } from './components/molecules/Snackbar';\nexport {\n  HintInputContainer,\n  HintInputContainerProps,\n} from './components/molecules/HintInputContainer';\nexport {\n  TextArea,\n  TextAreaProps,\n  TextAreaInputBase,\n} from './components/molecules/TextArea';\nexport * from './styles/definitions';\nexport * from './styles/light';\nexport { default as ThemeProvider } from './styles/ThemeProvider';\nexport * from './types/defaults';\nexport * from './utils';\nexport * from './hooks';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAkBA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAKA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Avatar, AvatarProps } from './components/atoms/Avatar';\nexport { Badge, BadgeProps } from './components/atoms/Badge';\nexport { BoxContent, BoxContentProps } from './components/atoms/BoxContent';\nexport {\n  Button,\n  ButtonProps,\n  ButtonSizeType,\n  ButtonStateProps,\n  ButtonStateType,\n  Error,\n  Loading,\n  Success,\n} from './components/atoms/Button';\nexport { Card, CardProps } from './components/atoms/Card';\nexport { Footer, FooterProps } from './components/atoms/Card/Footer';\nexport { Header, HeaderProps } from './components/atoms/Card/Header';\nexport { Checkbox, CheckboxProps } from './components/atoms/Checkbox';\nexport { Divider, DividerProps } from './components/atoms/Divider';\nexport {\n  GroupButton,\n  GroupButtonOption,\n  GroupButtonOptionProps,\n  GroupButtonProps,\n  GroupButtonValue,\n} from './components/atoms/GroupButton';\nexport { Icon, IconProps } from './components/atoms/Icon';\nexport {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElement,\n  InputElementProps,\n  InputVariantType,\n  Masks,\n  PressableInputContainer,\n  PressableInputContainerProps,\n  StyledBorderKeeper,\n  useCurrencyMask,\n  useInputFocus,\n  useMask,\n  disabledInputStyles,\n  IMask,\n  IMaskValue,\n} from './components/atoms/Input';\nexport { Paper, PaperProps } from './components/atoms/Paper';\nexport {\n  PressableSurface,\n  PressableSurfaceProps,\n} from './components/atoms/PressableSurface';\nexport { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';\nexport { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';\nexport { Switch, SwitchProps } from './components/atoms/Switch';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextProps } from './components/atoms/Text';\nexport {\n  Calendar,\n  CalendarProps,\n  DateRange,\n  SelectionType,\n} from './components/molecules/Calendar';\nexport { DatePicker, DatePickerProps } from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  DateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport {\n  DateTimeSelector,\n  DateTimeSelectorMode,\n  DateTimeSelectorProps,\n} from './components/molecules/DateTimeSelector';\nexport { InputPasswordIcon } from './components/molecules/InputPassword';\nexport { Snackbar, SnackbarProps } from './components/molecules/Snackbar';\nexport {\n  HintInputContainer,\n  HintInputContainerProps,\n} from './components/molecules/HintInputContainer';\nexport {\n  TextArea,\n  TextAreaProps,\n  TextAreaInputBase,\n} from './components/molecules/TextArea';\nexport { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';\nexport * from './styles/definitions';\nexport * from './styles/light';\nexport { default as ThemeProvider } from './styles/ThemeProvider';\nexport * from './types/defaults';\nexport * from './utils';\nexport * from './hooks';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.11.0",
+  "version": "1.12.2",
   "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": "27a01035cee1b709734bd4b6b6f518c4320814f6"
+  "gitHead": "b7e0f13351b82b8687b03ab059f7dc90ff975a10"
 }

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

@@ -59,7 +59,7 @@ const Switch: FC<SwitchProps> = ({
   };
 
   useEffect(() => {
-    transitionSwitch(active, transitionValue, animatedColor);
+    transitionSwitch(!active, transitionValue, animatedColor);
   }, [active]);
 
   const handleChange = useCallback(() => {
@@ -76,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/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/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/Grid/Grid.stories.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import Grid, { IGrid } from './Grid';
+import { GridItem } from './Item';
+import { Text } from '@tecsinapse/react-core';
+import { View } from 'react-native';
+import styled from '@emotion/native';
+
+export default {
+  title: 'Hybrid/Grid',
+  component: Grid,
+  subcomponents: { GridItem },
+};
+
+const Container = styled(View)`
+  background-color: orange;
+  padding: 2px;
+  border-width: 1px;
+  border-color: white;
+  border-style: solid;
+  border-radius: 8px;
+`;
+
+const TemplateGrid: Story<IGrid> = args => {
+  return (
+    <Grid {...args}>
+      <GridItem span={12}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem span={6}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem span={6}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem span={4} flexShrink={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem span={4} flexGrow={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem span={4} flexShrink={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem span={3}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem span={3}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem span={3}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem span={3}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export const WithGridItem = TemplateGrid.bind({});
+
+WithGridItem.args = {
+  spacing: 'mili',
+};
+
+const TemplateLayout: Story<IGrid> = args => {
+  return (
+    <Grid {...args}>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+    </Grid>
+  );
+};
+
+export const WithLayout = TemplateLayout.bind({});
+
+WithLayout.args = {
+  layout: [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3]],
+  spacing: 'mili',
+};

package/src/components/molecules/Grid/Grid.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { GridItem } from './Item';
+import { SpacingType } from '@tecsinapse/react-core';
+
+export interface IGrid extends ViewProps {
+  children: JSX.Element[];
+  /** Layout should represent the multiplier of columns to fill the rows properly.
+   * Example:
+   * const layout = [
+   *   [6, 6], // Two elements on row
+   *   [4, 4, 4], // Three elements on row
+   *   [12], // One element on row
+   * ];
+   * */
+  layout?: number[][];
+  /** Number of grid columns to be considered (not the number of elements per row) */
+  columns?: number;
+  spacing?: SpacingType;
+}
+
+const Grid = ({
+  children,
+  columns = 12,
+  layout,
+  style,
+  spacing,
+  ...rest
+}: IGrid) => {
+  if (layout) {
+    const flatLayout = layout.flat();
+    return (
+      <View
+        style={[
+          style,
+          {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}
+        {...rest}
+      >
+        {React.Children.map(children, (child, index) => (
+          <GridItem
+            columns={columns}
+            span={flatLayout[index]}
+            spacing={spacing}
+          >
+            {child}
+          </GridItem>
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        style,
+        {
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        },
+      ]}
+      {...rest}
+    >
+      {React.Children.map(children, child => {
+        return React.cloneElement(child, {
+          ...child?.props,
+          columns,
+          spacing: child?.props.spacing ?? spacing,
+        });
+      })}
+    </View>
+  );
+};
+
+export default Grid;

package/src/components/molecules/Grid/Item/Item.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  extractNumbersFromString,
+  SpacingType,
+  useTheme,
+} from '@tecsinapse/react-core';
+import { View } from 'react-native';
+
+type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
+type FlexAlignBase = FlexPositioning | 'stretch';
+type FlexAlignType = FlexAlignBase | 'baseline';
+type FlexSpacing = 'space-between' | 'space-around';
+
+export interface IGridItem {
+  children: React.ReactElement;
+  /** Number of columns to fill */
+  span: number;
+  /** You don't have to give this property since is inherited from Grid */
+  columns?: number;
+  loading?: boolean;
+  /** If your GridItem has a loading state, specify the component here (Skeleton) */
+  loadingComponent?: React.ReactElement;
+  /** Flex properties below */
+  alignContent?: FlexAlignBase | FlexSpacing;
+  alignItems?: FlexAlignType;
+  alignSelf?: 'auto' | FlexAlignType;
+  flex?: number;
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  flexGrow?: number;
+  flexShrink?: number;
+  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
+  /** You don't have to give this property since is inherited from Grid */
+  spacing?: SpacingType;
+  /** Used to wrap children in a View when its style extrapolates the dimensions*/
+  wrapper?: boolean;
+}
+
+const GridItem = ({
+  children,
+  span,
+  columns = 12,
+  loadingComponent,
+  loading = false,
+  spacing: _spacing,
+  wrapper = false,
+  ...rest
+}: IGridItem) => {
+  const { spacing } = useTheme();
+  if (!React.Children.only(children)) {
+    throw new Error('The number of children in GridItem should be one');
+  }
+  if (loadingComponent && loading) {
+    return loadingComponent;
+  }
+
+  const style = {
+    ...rest,
+    boxSizing: 'border-box',
+    flexBasis: `${100 / (columns / span)}%`,
+    padding: _spacing ? extractNumbersFromString(spacing[_spacing]) : undefined,
+  };
+
+  const clone = React.cloneElement(children, {
+    ...children?.props,
+    style: wrapper
+      ? children?.props.style
+      : { ...style, ...children?.props.style },
+  });
+
+  return wrapper ? <View style={style}>{clone}</View> : clone;
+};
+
+export default GridItem;

package/src/components/molecules/Grid/Item/index.ts

@@ -0,0 +1 @@
+export { default as GridItem, IGridItem } from './Item';

package/src/components/molecules/Grid/index.ts

@@ -0,0 +1,2 @@
+export { GridItem, IGridItem } from './Item';
+export { default as Grid, IGrid } from './Grid';

package/src/index.ts

@@ -79,6 +79,7 @@ export {
   TextAreaProps,
   TextAreaInputBase,
 } from './components/molecules/TextArea';
+export { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';