@tecsinapse/react-native-kit 1.18.4 → 1.19.0

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

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.LabeledSwitchNativeProps = exports.LabeledSwitch = void 0;
+
+var _LabeledSwitch = _interopRequireWildcard(require("./LabeledSwitch"));
+
+exports.LabeledSwitch = _LabeledSwitch.default;
+exports.LabeledSwitchNativeProps = _LabeledSwitch.LabeledSwitchNativeProps;
+
+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/LabeledSwitch/index.js.map

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

package/dist/components/molecules/LabeledSwitch/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { View } from 'react-native';
+export declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledLabel: import("@emotion/native").StyledComponent<any, {}, {}>;

package/dist/components/molecules/LabeledSwitch/styled.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledLabel = exports.StyledView = void 0;
+
+var _native = _interopRequireWildcard(require("@emotion/native"));
+
+var _reactNative = require("react-native");
+
+var _Text = require("../../atoms/Text");
+
+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; }
+
+const StyledView = (0, _native.default)(_reactNative.View)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+exports.StyledView = StyledView;
+const StyledLabel = (0, _native.default)(_Text.Text)`
+  ${({
+  theme,
+  labelPosition
+}) => {
+  if (labelPosition === 'right') return (0, _native.css)`
+        margin-left: ${theme == null ? void 0 : theme.spacing.centi};
+      `;else if (labelPosition === 'left') return (0, _native.css)`
+        margin-right: ${theme == null ? void 0 : theme.spacing.centi};
+      `;
+}}
+`;
+exports.StyledLabel = StyledLabel;
+//# sourceMappingURL=styled.js.map

package/dist/components/molecules/LabeledSwitch/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/LabeledSwitch/styled.ts"],"names":["StyledView","View","StyledLabel","Text","theme","labelPosition","spacing","centi"],"mappings":";;;;;AAAA;;AAEA;;AACA;;;;;;AAEO,MAAMA,UAAU,GAAG,qBAAOC,iBAAP,CAAa;AACvC;AACA;AACA;AACA,CAJO;;AAMA,MAAMC,WAAW,GAAG,qBAAOC,UAAP,CAIzB;AACF,IAAI,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAA8B;AAC9B,MAAIA,aAAa,KAAK,OAAtB,EACE,OAAO,gBAAI;AACjB,uBAAuBD,KADP,oBACOA,KAAK,CAAEE,OAAP,CAAeC,KAAM;AAC5C,OAFM,CADF,KAIK,IAAIF,aAAa,KAAK,MAAtB,EACH,OAAO,gBAAI;AACjB,wBAAwBD,KADR,oBACQA,KAAK,CAAEE,OAAP,CAAeC,KAAM;AAC7C,OAFM;AAGH,CAAC;AACJ,CAfO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { LabelPositionOptions, StyleProps } from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { Text } from '../../atoms/Text';\n\nexport const StyledView = styled(View)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const StyledLabel = styled(Text)<\n  Partial<StyleProps> & {\n    labelPosition: LabelPositionOptions;\n  }\n>`\n  ${({ theme, labelPosition }) => {\n    if (labelPosition === 'right')\n      return css`\n        margin-left: ${theme?.spacing.centi};\n      `;\n    else if (labelPosition === 'left')\n      return css`\n        margin-right: ${theme?.spacing.centi};\n      `;\n  }}\n`;\n"],"file":"styled.js"}

package/dist/components/molecules/Select/Select.js

@@ -117,11 +117,11 @@ function Select({
   const getDisplayValue = React.useCallback(() => {
     if (Array.isArray(value)) {
       if (value.length === 0) return _placeholder;else {
-        let options = selectOptions.length > 0 ? selectOptions : value;
+        const options = selectOptions.length > 0 ? selectOptions : value;
         return options == null ? void 0 : options.reduce((acc, option, index) => value.find(key => keyExtractor(option, index) == keyExtractor(key, index)) ? acc + labelExtractor(option) + ', ' : acc, '').slice(0, -2);
       }
     } else {
-      if (value === undefined) return _placeholder;
+      if (!value) return _placeholder;
       const selectedOption = selectOptions == null ? void 0 : selectOptions.find((option, index) => keyExtractor(option, index) == keyExtractor(value, index));
       return labelExtractor(selectedOption ?? value);
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","label","numberOfLines","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","onlyLabel","hasValue","length","_placeholder","_label","undefined","handleLazyFocus","React","useCallback","result","find","v","e","handleOnSearch","searchInput","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n  HintInputContainer,\n  InputContainerProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n  options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n  onSelect: (\n    option: Type extends 'single' ? Data | undefined : Data[]\n  ) => never | void;\n  value: Type extends 'single' ? Data | null | undefined : Data[];\n  type: Type;\n\n  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  groupKeyExtractor?: (t: Data) => string;\n\n  hideSearchBar?: boolean;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  onSearch?:\n    | ((searchArg: string) => void)\n    | ((searchInput?: string) => Promise<Data[]>)\n    | never;\n  searchBarPlaceholder?: string;\n  confirmButtonText?: string;\n  selectModalTitle?: string;\n  selectModalTitleComponent?: JSX.Element;\n  closeOnPick?: boolean;\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  numberOfLines?: number;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n  /** Select props */\n  value,\n  options,\n  keyExtractor,\n  groupKeyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  searchBarPlaceholder,\n  hideSearchBar,\n  confirmButtonText,\n  rightComponent,\n  variant = 'default',\n  hintComponent,\n  hint,\n  style,\n  controlComponent,\n  closeOnPick = type === 'single',\n  label,\n  numberOfLines,\n  ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n  const modal = useLazyModalManager();\n\n  // TODO: Add Skeleton to modal height when loading is true\n  const [loading, setLoading] = useState<boolean>(false);\n\n  const onlyLabel = label && !placeholder;\n  const hasValue =\n    type === 'single' ? !!value : ((value || []) as []).length > 0;\n  const _placeholder = onlyLabel ? label : placeholder;\n  const _label = hasValue ? label : undefined;\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  const handleLazyFocus = React.useCallback(async () => {\n    if (typeof options === 'function') {\n      setLoading(true);\n      try {\n        const result = await options();\n        if (result) {\n          if (\n            value &&\n            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n          ) {\n            setSelectOptions([value as Data, ...result]);\n          } else setSelectOptions(result);\n        }\n      } catch (e) {\n        // TODO: Catch error\n      } finally {\n        setLoading(false);\n      }\n    }\n  }, [options, value, setSelectOptions]);\n\n  const handleOnSearch = React.useCallback(\n    async (searchInput: string | undefined) => {\n      if (searchInput !== undefined && onSearch) {\n        setLoading(true);\n        try {\n          const result = await onSearch(searchInput);\n          if (result) {\n            if (type === 'single') {\n              if (\n                value &&\n                !result.find(\n                  v => keyExtractor(value as Data) === keyExtractor(v)\n                )\n              ) {\n                setSelectOptions([value as Data, ...result]);\n              } else setSelectOptions(result);\n            } else {\n              if ((value as Data[]).length > 0) {\n                const selectedValues =\n                  (value as Data[]).filter(\n                    v =>\n                      !result.find(\n                        current =>\n                          keyExtractor(v as Data) === keyExtractor(current)\n                      )\n                  ) || [];\n                setSelectOptions([...selectedValues, ...result]);\n              } else {\n                setSelectOptions(result);\n              }\n            }\n          }\n        } catch (e) {\n          // TODO: Catch error\n        } finally {\n          modal.requestUpdate();\n          setLoading(false);\n        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const getDisplayValue = React.useCallback(() => {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return _placeholder;\n      else {\n        let options =\n          selectOptions.length > 0 ? selectOptions : (value as Data[]);\n        return options\n          ?.reduce(\n            (acc, option, index) =>\n              value.find(\n                key => keyExtractor(option, index) == keyExtractor(key, index)\n              )\n                ? acc + labelExtractor(option) + ', '\n                : acc,\n            ''\n          )\n          .slice(0, -2);\n      }\n    } else {\n      if (value === undefined) return _placeholder;\n      const selectedOption = selectOptions?.find(\n        (option, index) =>\n          keyExtractor(option, index) == keyExtractor(value as Data, index)\n      );\n      return labelExtractor(selectedOption ?? (value as Data));\n    }\n  }, [_placeholder, value, selectOptions]);\n\n  modal.sync(\n    <Modal\n      options={selectOptions || []}\n      focused={true}\n      keyExtractor={keyExtractor}\n      labelExtractor={labelExtractor}\n      groupKeyExtractor={groupKeyExtractor}\n      searchBarPlaceholder={searchBarPlaceholder}\n      type={type}\n      onSelect={onSelect}\n      value={value}\n      hideSearchBar={hideSearchBar}\n      onSearch={handleOnSearch}\n      selectModalTitle={selectModalTitle}\n      selectModalTitleComponent={selectModalTitleComponent}\n      confirmButtonText={confirmButtonText}\n      loading={loading}\n      onClose={handleBlur}\n      closeOnPick={closeOnPick}\n    />\n  );\n\n  const handlePressInput = async () => {\n    modal.show();\n    handleFocus();\n    await handleLazyFocus();\n  };\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue() || '')\n      ) : (\n        <HintInputContainer\n          viewStyle={style}\n          onPress={handlePressInput}\n          focused={focused}\n          disabled={disabled}\n          LabelComponent={Text}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          label={_label}\n          rightComponent={\n            <>\n              <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledSelectionText\n            numberOfLines={numberOfLines}\n            fontWeight=\"bold\"\n            disabled={disabled}\n          >\n            {getDisplayValue() || ' '}\n          </StyledSelectionText>\n        </HintInputContainer>\n      )}\n    </>\n  );\n}\n\nexport default Select;\n"],"file":"Select.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","label","numberOfLines","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","onlyLabel","hasValue","length","_placeholder","_label","undefined","handleLazyFocus","React","useCallback","result","find","v","e","handleOnSearch","searchInput","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n  HintInputContainer,\n  InputContainerProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n  options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n  onSelect: (\n    option: Type extends 'single' ? Data | undefined : Data[]\n  ) => never | void;\n  value: Type extends 'single' ? Data | null | undefined : Data[];\n  type: Type;\n\n  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  groupKeyExtractor?: (t: Data) => string;\n\n  hideSearchBar?: boolean;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  onSearch?:\n    | ((searchArg: string) => void)\n    | ((searchInput?: string) => Promise<Data[]>)\n    | never;\n  searchBarPlaceholder?: string;\n  confirmButtonText?: string;\n  selectModalTitle?: string;\n  selectModalTitleComponent?: JSX.Element;\n  closeOnPick?: boolean;\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  numberOfLines?: number;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n  /** Select props */\n  value,\n  options,\n  keyExtractor,\n  groupKeyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  searchBarPlaceholder,\n  hideSearchBar,\n  confirmButtonText,\n  rightComponent,\n  variant = 'default',\n  hintComponent,\n  hint,\n  style,\n  controlComponent,\n  closeOnPick = type === 'single',\n  label,\n  numberOfLines,\n  ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n  const modal = useLazyModalManager();\n\n  // TODO: Add Skeleton to modal height when loading is true\n  const [loading, setLoading] = useState<boolean>(false);\n\n  const onlyLabel = label && !placeholder;\n  const hasValue =\n    type === 'single' ? !!value : ((value || []) as []).length > 0;\n  const _placeholder = onlyLabel ? label : placeholder;\n  const _label = hasValue ? label : undefined;\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  const handleLazyFocus = React.useCallback(async () => {\n    if (typeof options === 'function') {\n      setLoading(true);\n      try {\n        const result = await options();\n        if (result) {\n          if (\n            value &&\n            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n          ) {\n            setSelectOptions([value as Data, ...result]);\n          } else setSelectOptions(result);\n        }\n      } catch (e) {\n        // TODO: Catch error\n      } finally {\n        setLoading(false);\n      }\n    }\n  }, [options, value, setSelectOptions]);\n\n  const handleOnSearch = React.useCallback(\n    async (searchInput: string | undefined) => {\n      if (searchInput !== undefined && onSearch) {\n        setLoading(true);\n        try {\n          const result = await onSearch(searchInput);\n          if (result) {\n            if (type === 'single') {\n              if (\n                value &&\n                !result.find(\n                  v => keyExtractor(value as Data) === keyExtractor(v)\n                )\n              ) {\n                setSelectOptions([value as Data, ...result]);\n              } else setSelectOptions(result);\n            } else {\n              if ((value as Data[]).length > 0) {\n                const selectedValues =\n                  (value as Data[]).filter(\n                    v =>\n                      !result.find(\n                        current =>\n                          keyExtractor(v as Data) === keyExtractor(current)\n                      )\n                  ) || [];\n                setSelectOptions([...selectedValues, ...result]);\n              } else {\n                setSelectOptions(result);\n              }\n            }\n          }\n        } catch (e) {\n          // TODO: Catch error\n        } finally {\n          modal.requestUpdate();\n          setLoading(false);\n        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const getDisplayValue = React.useCallback(() => {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return _placeholder;\n      else {\n        const options =\n          selectOptions.length > 0 ? selectOptions : (value as Data[]);\n        return options\n          ?.reduce(\n            (acc, option, index) =>\n              value.find(\n                key => keyExtractor(option, index) == keyExtractor(key, index)\n              )\n                ? acc + labelExtractor(option) + ', '\n                : acc,\n            ''\n          )\n          .slice(0, -2);\n      }\n    } else {\n      if (!value) return _placeholder;\n      const selectedOption = selectOptions?.find(\n        (option, index) =>\n          keyExtractor(option, index) == keyExtractor(value as Data, index)\n      );\n      return labelExtractor(selectedOption ?? (value as Data));\n    }\n  }, [_placeholder, value, selectOptions]);\n\n  modal.sync(\n    <Modal\n      options={selectOptions || []}\n      focused={true}\n      keyExtractor={keyExtractor}\n      labelExtractor={labelExtractor}\n      groupKeyExtractor={groupKeyExtractor}\n      searchBarPlaceholder={searchBarPlaceholder}\n      type={type}\n      onSelect={onSelect}\n      value={value}\n      hideSearchBar={hideSearchBar}\n      onSearch={handleOnSearch}\n      selectModalTitle={selectModalTitle}\n      selectModalTitleComponent={selectModalTitleComponent}\n      confirmButtonText={confirmButtonText}\n      loading={loading}\n      onClose={handleBlur}\n      closeOnPick={closeOnPick}\n    />\n  );\n\n  const handlePressInput = async () => {\n    modal.show();\n    handleFocus();\n    await handleLazyFocus();\n  };\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue() || '')\n      ) : (\n        <HintInputContainer\n          viewStyle={style}\n          onPress={handlePressInput}\n          focused={focused}\n          disabled={disabled}\n          LabelComponent={Text}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          label={_label}\n          rightComponent={\n            <>\n              <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledSelectionText\n            numberOfLines={numberOfLines}\n            fontWeight=\"bold\"\n            disabled={disabled}\n          >\n            {getDisplayValue() || ' '}\n          </StyledSelectionText>\n        </HintInputContainer>\n      )}\n    </>\n  );\n}\n\nexport default Select;\n"],"file":"Select.js"}

package/dist/index.d.ts

@@ -1,22 +1,25 @@
 export * from '@tecsinapse/react-core';
+export { Avatar } from './components/atoms/Avatar';
+export { Badge, BadgeNativeProps } from './components/atoms/Badge';
+export { BottomNavigator, BottomNavigatorProps, } from './components/atoms/BottomNavigator';
+export { Button, ButtonNativeProps, Error, Loading, Success, } from './components/atoms/Button';
+export { GroupButtonOption } from './components/atoms/GroupButton';
 export { Header, HeaderProps } from './components/atoms/Header';
-export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
-export { TextArea, TextAreaProps } from './components/atoms/TextArea';
-export { Text, TextNativeProps } from './components/atoms/Text';
-export { Error, Loading, Success, Button, ButtonNativeProps, } from './components/atoms/Button';
-export { GroupButtonOption } from './components/atoms/GroupButton';
-export { InputPassword, InputPasswordNativeProps, } from './components/molecules/InputPassword';
-export { BottomNavigator, BottomNavigatorProps, } from './components/atoms/BottomNavigator';
-export { Tag, TagProps } from './components/atoms/Tag';
+export { IBaseModal, ModalGroupManager, ModalLifecycleHandler, ModalView, useLazyModalManager, useModalManager, useModalRemoteControl, } from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
 export { SnappingSlider, SnappingSliderProps, } from './components/atoms/SnappingSlider';
-export { Badge, BadgeNativeProps } from './components/atoms/Badge';
-export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Tag, TagProps } from './components/atoms/Tag';
+export { Text, TextNativeProps } from './components/atoms/Text';
+export { TextArea, TextAreaProps } from './components/atoms/TextArea';
+export { Calendar } from './components/molecules/Calendar';
 export { DatePicker, NativeDatePickerProps, } from './components/molecules/DatePicker';
 export { DateTimePicker, NativeDateTimePickerProps, } from './components/molecules/DateTimePicker';
-export { Avatar } from './components/atoms/Avatar';
-export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, useModalRemoteControl, IBaseModal, } from './components/atoms/Modal';
-export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
+export { IconTextButton, NativeIconTextButtonProps, } from './components/molecules/IconTextButton';
+export { InputPassword, InputPasswordNativeProps, } from './components/molecules/InputPassword';
+export { LabeledSwitch, LabeledSwitchNativeProps, } from './components/molecules/LabeledSwitch';
+export { Select, SelectNativeProps } from './components/molecules/Select';
+export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Grid, GridItem } from './components/molecules/Grid';

package/dist/index.js

@@ -2,54 +2,60 @@
 
 exports.__esModule = true;
 var _exportNames = {
+  Avatar: true,
+  Badge: true,
+  BadgeNativeProps: true,
+  BottomNavigator: true,
+  BottomNavigatorProps: true,
+  Button: true,
+  ButtonNativeProps: true,
+  Error: true,
+  Loading: true,
+  Success: true,
+  GroupButtonOption: true,
   Header: true,
   HeaderProps: true,
-  Select: true,
-  SelectNativeProps: true,
   Input: true,
   InputNativeProps: true,
   InputMask: true,
   InputMaskNativeProps: true,
-  TextArea: true,
-  TextAreaProps: true,
-  Text: true,
-  TextNativeProps: true,
-  Error: true,
-  Loading: true,
-  Success: true,
-  Button: true,
-  ButtonNativeProps: true,
-  GroupButtonOption: true,
-  InputPassword: true,
-  InputPasswordNativeProps: true,
-  BottomNavigator: true,
-  BottomNavigatorProps: true,
-  Tag: true,
-  TagProps: true,
+  IBaseModal: true,
+  ModalGroupManager: true,
+  ModalLifecycleHandler: true,
+  ModalView: true,
+  useLazyModalManager: true,
+  useModalManager: true,
+  useModalRemoteControl: true,
+  Skeleton: true,
+  SkeletonProps: true,
   SnappingSlider: true,
   SnappingSliderProps: true,
-  Badge: true,
-  BadgeNativeProps: true,
-  Snackbar: true,
-  SnackbarNativeProps: true,
+  Tag: true,
+  TagProps: true,
+  Text: true,
+  TextNativeProps: true,
+  TextArea: true,
+  TextAreaProps: true,
+  Calendar: true,
   DatePicker: true,
   NativeDatePickerProps: true,
   DateTimePicker: true,
   NativeDateTimePickerProps: true,
-  Avatar: true,
-  Calendar: true,
   DateTimeSelector: true,
-  ModalGroupManager: true,
-  ModalView: true,
-  ModalLifecycleHandler: true,
-  useLazyModalManager: true,
-  useModalManager: true,
-  useModalRemoteControl: true,
-  IBaseModal: true,
-  Skeleton: true,
-  SkeletonProps: true
+  IconTextButton: true,
+  NativeIconTextButtonProps: true,
+  InputPassword: true,
+  InputPasswordNativeProps: true,
+  LabeledSwitch: true,
+  LabeledSwitchNativeProps: true,
+  Select: true,
+  SelectNativeProps: true,
+  Snackbar: true,
+  SnackbarNativeProps: true,
+  Grid: true,
+  GridItem: true
 };
-exports.SkeletonProps = exports.Skeleton = exports.IBaseModal = exports.useModalRemoteControl = exports.useModalManager = exports.useLazyModalManager = exports.ModalLifecycleHandler = exports.ModalView = exports.ModalGroupManager = exports.DateTimeSelector = exports.Calendar = exports.Avatar = exports.NativeDateTimePickerProps = exports.DateTimePicker = exports.NativeDatePickerProps = exports.DatePicker = exports.SnackbarNativeProps = exports.Snackbar = exports.BadgeNativeProps = exports.Badge = exports.SnappingSliderProps = exports.SnappingSlider = exports.TagProps = exports.Tag = exports.BottomNavigatorProps = exports.BottomNavigator = exports.InputPasswordNativeProps = exports.InputPassword = exports.GroupButtonOption = exports.ButtonNativeProps = exports.Button = exports.Success = exports.Loading = exports.Error = exports.TextNativeProps = exports.Text = exports.TextAreaProps = exports.TextArea = exports.InputMaskNativeProps = exports.InputMask = exports.InputNativeProps = exports.Input = exports.SelectNativeProps = exports.Select = exports.HeaderProps = exports.Header = void 0;
+exports.GridItem = exports.Grid = exports.SnackbarNativeProps = exports.Snackbar = exports.SelectNativeProps = exports.Select = exports.LabeledSwitchNativeProps = exports.LabeledSwitch = exports.InputPasswordNativeProps = exports.InputPassword = exports.NativeIconTextButtonProps = exports.IconTextButton = exports.DateTimeSelector = exports.NativeDateTimePickerProps = exports.DateTimePicker = exports.NativeDatePickerProps = exports.DatePicker = exports.Calendar = exports.TextAreaProps = exports.TextArea = exports.TextNativeProps = exports.Text = exports.TagProps = exports.Tag = exports.SnappingSliderProps = exports.SnappingSlider = exports.SkeletonProps = exports.Skeleton = exports.useModalRemoteControl = exports.useModalManager = exports.useLazyModalManager = exports.ModalView = exports.ModalLifecycleHandler = exports.ModalGroupManager = exports.IBaseModal = exports.InputMaskNativeProps = exports.InputMask = exports.InputNativeProps = exports.Input = exports.HeaderProps = exports.Header = exports.GroupButtonOption = exports.Success = exports.Loading = exports.Error = exports.ButtonNativeProps = exports.Button = exports.BottomNavigatorProps = exports.BottomNavigator = exports.BadgeNativeProps = exports.Badge = exports.Avatar = void 0;
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -60,16 +66,37 @@ Object.keys(_reactCore).forEach(function (key) {
   exports[key] = _reactCore[key];
 });
 
+var _Avatar = require("./components/atoms/Avatar");
+
+exports.Avatar = _Avatar.Avatar;
+
+var _Badge = require("./components/atoms/Badge");
+
+exports.Badge = _Badge.Badge;
+exports.BadgeNativeProps = _Badge.BadgeNativeProps;
+
+var _BottomNavigator = require("./components/atoms/BottomNavigator");
+
+exports.BottomNavigator = _BottomNavigator.BottomNavigator;
+exports.BottomNavigatorProps = _BottomNavigator.BottomNavigatorProps;
+
+var _Button = require("./components/atoms/Button");
+
+exports.Button = _Button.Button;
+exports.ButtonNativeProps = _Button.ButtonNativeProps;
+exports.Error = _Button.Error;
+exports.Loading = _Button.Loading;
+exports.Success = _Button.Success;
+
+var _GroupButton = require("./components/atoms/GroupButton");
+
+exports.GroupButtonOption = _GroupButton.GroupButtonOption;
+
 var _Header = require("./components/atoms/Header");
 
 exports.Header = _Header.Header;
 exports.HeaderProps = _Header.HeaderProps;
 
-var _Select = require("./components/molecules/Select");
-
-exports.Select = _Select.Select;
-exports.SelectNativeProps = _Select.SelectNativeProps;
-
 var _Input = require("./components/atoms/Input");
 
 exports.Input = _Input.Input;
@@ -80,57 +107,44 @@ var _InputMask = require("./components/atoms/InputMask");
 exports.InputMask = _InputMask.InputMask;
 exports.InputMaskNativeProps = _InputMask.InputMaskNativeProps;
 
-var _TextArea = require("./components/atoms/TextArea");
-
-exports.TextArea = _TextArea.TextArea;
-exports.TextAreaProps = _TextArea.TextAreaProps;
-
-var _Text = require("./components/atoms/Text");
-
-exports.Text = _Text.Text;
-exports.TextNativeProps = _Text.TextNativeProps;
-
-var _Button = require("./components/atoms/Button");
-
-exports.Error = _Button.Error;
-exports.Loading = _Button.Loading;
-exports.Success = _Button.Success;
-exports.Button = _Button.Button;
-exports.ButtonNativeProps = _Button.ButtonNativeProps;
-
-var _GroupButton = require("./components/atoms/GroupButton");
+var _Modal = require("./components/atoms/Modal");
 
-exports.GroupButtonOption = _GroupButton.GroupButtonOption;
+exports.IBaseModal = _Modal.IBaseModal;
+exports.ModalGroupManager = _Modal.ModalGroupManager;
+exports.ModalLifecycleHandler = _Modal.ModalLifecycleHandler;
+exports.ModalView = _Modal.ModalView;
+exports.useLazyModalManager = _Modal.useLazyModalManager;
+exports.useModalManager = _Modal.useModalManager;
+exports.useModalRemoteControl = _Modal.useModalRemoteControl;
 
-var _InputPassword = require("./components/molecules/InputPassword");
+var _Skeleton = require("./components/atoms/Skeleton");
 
-exports.InputPassword = _InputPassword.InputPassword;
-exports.InputPasswordNativeProps = _InputPassword.InputPasswordNativeProps;
+exports.Skeleton = _Skeleton.Skeleton;
+exports.SkeletonProps = _Skeleton.SkeletonProps;
 
-var _BottomNavigator = require("./components/atoms/BottomNavigator");
+var _SnappingSlider = require("./components/atoms/SnappingSlider");
 
-exports.BottomNavigator = _BottomNavigator.BottomNavigator;
-exports.BottomNavigatorProps = _BottomNavigator.BottomNavigatorProps;
+exports.SnappingSlider = _SnappingSlider.SnappingSlider;
+exports.SnappingSliderProps = _SnappingSlider.SnappingSliderProps;
 
 var _Tag = require("./components/atoms/Tag");
 
 exports.Tag = _Tag.Tag;
 exports.TagProps = _Tag.TagProps;
 
-var _SnappingSlider = require("./components/atoms/SnappingSlider");
+var _Text = require("./components/atoms/Text");
 
-exports.SnappingSlider = _SnappingSlider.SnappingSlider;
-exports.SnappingSliderProps = _SnappingSlider.SnappingSliderProps;
+exports.Text = _Text.Text;
+exports.TextNativeProps = _Text.TextNativeProps;
 
-var _Badge = require("./components/atoms/Badge");
+var _TextArea = require("./components/atoms/TextArea");
 
-exports.Badge = _Badge.Badge;
-exports.BadgeNativeProps = _Badge.BadgeNativeProps;
+exports.TextArea = _TextArea.TextArea;
+exports.TextAreaProps = _TextArea.TextAreaProps;
 
-var _Snackbar = require("./components/molecules/Snackbar");
+var _Calendar = require("./components/molecules/Calendar");
 
-exports.Snackbar = _Snackbar.Snackbar;
-exports.SnackbarNativeProps = _Snackbar.SnackbarNativeProps;
+exports.Calendar = _Calendar.Calendar;
 
 var _DatePicker = require("./components/molecules/DatePicker");
 
@@ -142,30 +156,37 @@ var _DateTimePicker = require("./components/molecules/DateTimePicker");
 exports.DateTimePicker = _DateTimePicker.DateTimePicker;
 exports.NativeDateTimePickerProps = _DateTimePicker.NativeDateTimePickerProps;
 
-var _Avatar = require("./components/atoms/Avatar");
+var _DateTimeSelector = require("./components/molecules/DateTimeSelector");
 
-exports.Avatar = _Avatar.Avatar;
+exports.DateTimeSelector = _DateTimeSelector.DateTimeSelector;
 
-var _Calendar = require("./components/molecules/Calendar");
+var _IconTextButton = require("./components/molecules/IconTextButton");
 
-exports.Calendar = _Calendar.Calendar;
+exports.IconTextButton = _IconTextButton.IconTextButton;
+exports.NativeIconTextButtonProps = _IconTextButton.NativeIconTextButtonProps;
 
-var _DateTimeSelector = require("./components/molecules/DateTimeSelector");
+var _InputPassword = require("./components/molecules/InputPassword");
 
-exports.DateTimeSelector = _DateTimeSelector.DateTimeSelector;
+exports.InputPassword = _InputPassword.InputPassword;
+exports.InputPasswordNativeProps = _InputPassword.InputPasswordNativeProps;
 
-var _Modal = require("./components/atoms/Modal");
+var _LabeledSwitch = require("./components/molecules/LabeledSwitch");
 
-exports.ModalGroupManager = _Modal.ModalGroupManager;
-exports.ModalView = _Modal.ModalView;
-exports.ModalLifecycleHandler = _Modal.ModalLifecycleHandler;
-exports.useLazyModalManager = _Modal.useLazyModalManager;
-exports.useModalManager = _Modal.useModalManager;
-exports.useModalRemoteControl = _Modal.useModalRemoteControl;
-exports.IBaseModal = _Modal.IBaseModal;
+exports.LabeledSwitch = _LabeledSwitch.LabeledSwitch;
+exports.LabeledSwitchNativeProps = _LabeledSwitch.LabeledSwitchNativeProps;
 
-var _Skeleton = require("./components/atoms/Skeleton");
+var _Select = require("./components/molecules/Select");
 
-exports.Skeleton = _Skeleton.Skeleton;
-exports.SkeletonProps = _Skeleton.SkeletonProps;
+exports.Select = _Select.Select;
+exports.SelectNativeProps = _Select.SelectNativeProps;
+
+var _Snackbar = require("./components/molecules/Snackbar");
+
+exports.Snackbar = _Snackbar.Snackbar;
+exports.SnackbarNativeProps = _Snackbar.SnackbarNativeProps;
+
+var _Grid = require("./components/molecules/Grid");
+
+exports.Grid = _Grid.Grid;
+exports.GridItem = _Grid.GridItem;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;;;;AAOA;;;;AACA;;;;;AAIA;;;;;AAIA;;;;;AACA;;;;;AAIA;;;;;AACA;;;;;AACA;;;;;AAIA;;;;;AAIA;;;;AACA;;;;AACA;;;;AACA;;;;;;;;;;AASA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport {\n  Error,\n  Loading,\n  Success,\n  Button,\n  ButtonNativeProps,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  ModalGroupManager,\n  ModalView,\n  ModalLifecycleHandler,\n  useLazyModalManager,\n  useModalManager,\n  useModalRemoteControl,\n  IBaseModal,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;AACA;;;;;AACA;;;;;AAIA;;;;;;;;AAOA;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;;;;;;AASA;;;;;AACA;;;;;AAIA;;;;;AACA;;;;;AACA;;;;;AACA;;;;AACA;;;;;AAIA;;;;;AAIA;;;;AACA;;;;;AAIA;;;;;AAIA;;;;;AAIA;;;;;AACA;;;;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport {\n  Button,\n  ButtonNativeProps,\n  Error,\n  Loading,\n  Success,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';\nexport {\n  IBaseModal,\n  ModalGroupManager,\n  ModalLifecycleHandler,\n  ModalView,\n  useLazyModalManager,\n  useModalManager,\n  useModalRemoteControl,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Calendar } from './components/molecules/Calendar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  IconTextButton,\n  NativeIconTextButtonProps,\n} from './components/molecules/IconTextButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  LabeledSwitch,\n  LabeledSwitchNativeProps,\n} from './components/molecules/LabeledSwitch';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport { Grid, GridItem } from './components/molecules/Grid';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.18.4",
+  "version": "1.19.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,9 +14,9 @@
     "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
-    "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.17.3",
+    "@emotion/native": "^11.10.0",
+    "@emotion/react": "^11.10.0",
+    "@tecsinapse/react-core": "^1.18.0",
     "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
@@ -39,5 +39,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "941e9b8aca99e29d87c1cc309e60d099c13be116"
+  "gitHead": "7014df32d2de88a1f42259b56599d7fc10d794a9"
 }

package/src/components/atoms/Button/Button.tsx

@@ -1,17 +1,23 @@
-import { Button as ButtonCore, ButtonProps } from "@tecsinapse/react-core";
-import React, { FC, useCallback } from "react";
-import { Keyboard } from "react-native";
+import { Button as ButtonCore, ButtonProps } from '@tecsinapse/react-core';
+import React, { FC, useCallback } from 'react';
+import { Keyboard } from 'react-native';
 
 export type ButtonNativeProps = ButtonProps & {
-    autoDismissKeyboard?: boolean
-}
+  autoDismissKeyboard?: boolean;
+};
 
-export const Button: FC<ButtonNativeProps> = ({ autoDismissKeyboard = true, onPress, ...others }) => {
+export const Button: FC<ButtonNativeProps> = ({
+  autoDismissKeyboard = true,
+  onPress,
+  ...others
+}) => {
+  const handleOnPress = useCallback(
+    event => {
+      autoDismissKeyboard && Keyboard.dismiss();
+      onPress?.(event);
+    },
+    [onPress]
+  );
 
-    const handleOnPress = useCallback((event) => {
-        autoDismissKeyboard && Keyboard.dismiss()
-        onPress?.(event)
-    }, [onPress])
-
-    return <ButtonCore {...others} onPress={handleOnPress}/>
-}
+  return <ButtonCore {...others} onPress={handleOnPress} />;
+};

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { GridItem } from './Item';
+import { IGrid } from '@tecsinapse/react-core';
+
+export type IGridNative = IGrid & ViewProps;
+
+const Grid = ({
+  children,
+  columns = 12,
+  layout,
+  style,
+  spacing,
+  ...rest
+}: IGridNative): JSX.Element => {
+  if (layout) {
+    const flatLayout = layout.flat();
+    return (
+      <View
+        style={[
+          style,
+          {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}
+        {...rest}
+      >
+        {React.Children.map(children, (child, index) => (
+          <GridItem
+            key={`child-${index}`}
+            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, index) => {
+        return React.cloneElement(child, {
+          ...child?.props,
+          columns,
+          spacing: child?.props.spacing ?? spacing,
+          key: `child-${index}`,
+        });
+      })}
+    </View>
+  );
+};
+
+export default Grid;