@tecsinapse/react-core 1.10.4 → 1.12.1

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.10.4",
+  "version": "1.12.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "a0f4ed0567683273692e4336ca4f05a9ee98a881"
+  "gitHead": "50b3fc522e7726e43f9dd16d9681faf0a1e5a4d6"
 }

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 = {

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

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

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

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

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

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

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

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

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

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

package/src/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,
+        });
+      })}
+    </View>
+  );
+};
+
+export default Grid;