@tecsinapse/react-core 1.17.3 → 1.19.0

package/src/components/molecules/IconTextButton/IconComponent.tsx

@@ -0,0 +1,31 @@
+import {
+  ButtonSizeType,
+  FontColor,
+  Icon,
+  IconProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+
+interface IconComponentProps {
+  iconProps?: IconProps;
+  size?: ButtonSizeType;
+  defaultFontColor: keyof FontColor;
+}
+
+const IconComponent: FC<IconComponentProps> = ({
+  iconProps,
+  size = 'default',
+  defaultFontColor,
+}) => {
+  return iconProps ? (
+    <Icon
+      size={iconProps.size ?? size === 'small' ? 'deca' : 'kilo'}
+      fontColor={iconProps.fontColor ?? defaultFontColor}
+      {...iconProps}
+    />
+  ) : (
+    <></>
+  );
+};
+
+export default React.memo(IconComponent);

package/src/components/molecules/IconTextButton/IconTextButton.tsx

@@ -0,0 +1,10 @@
+import { ButtonProps, IconProps, TextProps } from '@tecsinapse/react-core';
+
+export type IconPositionOptions = 'left' | 'right';
+
+export interface IconTextButtonProps extends ButtonProps {
+  iconProps?: IconProps;
+  iconPosition?: IconPositionOptions;
+  textProps?: TextProps;
+  label?: string;
+}

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

@@ -0,0 +1,2 @@
+export { default as IconComponent } from './IconComponent';
+export { IconPositionOptions, IconTextButtonProps } from './IconTextButton';

package/src/components/molecules/IconTextButton/styled.ts

@@ -0,0 +1,20 @@
+import styled, { css } from '@emotion/native';
+import { IconPositionOptions, StyleProps, Text } from '@tecsinapse/react-core';
+
+export const StyledText = styled(Text)<
+  Partial<StyleProps> & {
+    iconPosition: IconPositionOptions;
+    hasIcon?: boolean;
+  }
+>`
+  ${({ theme, iconPosition, hasIcon = false }) => {
+    if (hasIcon && iconPosition === 'left')
+      return css`
+        margin-left: ${theme?.spacing.mili};
+      `;
+    else if (hasIcon && iconPosition === 'right')
+      return css`
+        margin-right: ${theme?.spacing.mili};
+      `;
+  }}
+`;

package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx

@@ -0,0 +1,9 @@
+import { SwitchProps } from '../../atoms/Switch';
+
+export type LabelPositionOptions = 'left' | 'right';
+
+export interface LabeledSwitchProps extends SwitchProps {
+  label: string;
+  labelPosition?: LabelPositionOptions;
+  pressableLabel?: boolean;
+}

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

@@ -0,0 +1 @@
+export { LabeledSwitchProps, LabelPositionOptions } from './LabeledSwitch';

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -84,7 +84,7 @@ export const Snackbar: React.FC<SnackbarProps> = ({
       anchor={anchor}
       anchorDistance={anchorDistance}
       visible={open}
-      style={[{ opacity: (fadeAnim as unknown) as number }, style]}
+      style={[{ opacity: fadeAnim as unknown as number }, style]}
       timeout={timeout}
     >
       <StyledContainerFlexRow>

package/src/components/molecules/Snackbar/styled.ts

@@ -32,7 +32,9 @@ const anchorTop = ({
   return (
     anchor === 'top' &&
     css`
-      top: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
+      top: ${anchorDistance
+        ? `${RFValue(anchorDistance)}px`
+        : theme.spacing.deca};
     `
   );
 };
@@ -45,7 +47,9 @@ const anchorBottom = ({
   return (
     anchor === 'bottom' &&
     css`
-      bottom: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
+      bottom: ${anchorDistance
+        ? `${RFValue(anchorDistance)}px`
+        : theme.spacing.deca};
     `
   );
 };

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,7 +1,11 @@
 import React, { FC } from 'react';
 import { View } from 'react-native';
-import { FontStackType, FontWeightType } from '../../../types/defaults';
-import { Hint, InputContainerProps, InputElementProps } from '../../atoms/Input';
+import { FontStackType, FontWeightType } from '@tecsinapse/react-core';
+import {
+  Hint,
+  InputContainerProps,
+  InputElementProps,
+} from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { StyledInputContainer } from './styled';
 

package/src/components/molecules/TextArea/styled.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { StyleProps } from '../../../types/defaults';
+import { StyleProps } from '@tecsinapse/react-core';
 import { extractNumbersFromString, RFValue, RFValueStr } from '../../../utils';
 import { InputContainer, InputElement } from '../../atoms/Input';
 import { TextAreaProps } from './TextArea';
@@ -12,7 +12,10 @@ export const TextAreaInputBase = styled(InputElement)<
   Partial<TextAreaProps> & Partial<StyleProps>
 >`
   max-height: ${({ theme, numberOfLines }) =>
-    `${RFValue(extractNumbersFromString(theme.typography.h5.lineHeight) * (numberOfLines || 1))}px`};
+    `${RFValue(
+      extractNumbersFromString(theme.typography.h5.lineHeight) *
+        (numberOfLines || 1)
+    )}px`};
   width: 100%;
   padding: 0;
   margin: ${RFValueStr('3px')} 0;

package/src/hooks/useDebouncedState.ts

@@ -18,7 +18,7 @@ export function useDebouncedState<S>(
     if (timeoutId.current) clearTimeout(timeoutId.current);
     if (timeoutCallback)
       timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
-  }, [state, timeoutCallback]);
+  }, [state]);
 
   return [state, setState];
 }

package/src/index.ts

@@ -25,6 +25,7 @@ export {
 } from './components/atoms/GroupButton';
 export { Icon, IconProps } from './components/atoms/Icon';
 export {
+  disabledInputStyles,
   Hint,
   InputContainer,
   InputContainerProps,
@@ -39,7 +40,6 @@ export {
   useInputFocus,
   useNumberMask,
   useStringMask,
-  disabledInputStyles,
 } from './components/atoms/Input';
 export { Paper, PaperProps } from './components/atoms/Paper';
 export {
@@ -68,21 +68,41 @@ export {
   DateTimeSelectorMode,
   DateTimeSelectorProps,
 } from './components/molecules/DateTimeSelector';
-export { InputPasswordIcon } from './components/molecules/InputPassword';
-export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
+export {
+  GridSpacing,
+  IGridItem,
+  getGridItemPadding,
+  getGridItemColumSpan,
+  IGrid,
+  FlexAlignBase,
+  FlexAlignType,
+  FlexPositioning,
+  FlexSpacing,
+  PaddingPosition,
+} from './components/molecules/Grid';
 export {
   HintInputContainer,
   HintInputContainerProps,
 } from './components/molecules/HintInputContainer';
+export {
+  IconComponent,
+  IconPositionOptions,
+  IconTextButtonProps,
+} from './components/molecules/IconTextButton';
+export { InputPasswordIcon } from './components/molecules/InputPassword';
+export {
+  LabeledSwitchProps,
+  LabelPositionOptions,
+} from './components/molecules/LabeledSwitch';
+export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
 export {
   TextArea,
-  TextAreaProps,
   TextAreaInputBase,
+  TextAreaProps,
 } from './components/molecules/TextArea';
-export { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';
+export * from './hooks';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';
 export * from './types/defaults';
 export * from './utils';
-export * from './hooks';

package/src/styles/definitions.ts

@@ -1,6 +1,7 @@
 import {
   BorderRadius,
   BorderWidth,
+  Breakpoints,
   FontColor,
   FontStack,
   FontWeight,
@@ -8,7 +9,7 @@ import {
   Miscellaneous,
   Spacing,
   TypographyVariation,
-  ZIndex
+  ZIndex,
 } from '../types/defaults';
 import { RFValueStr } from '../utils';
 
@@ -179,3 +180,9 @@ export type IconType =
   | 'antdesign'
   | 'font-awesome-5'
   | string;
+
+export const breakpoints: Breakpoints = {
+  sm: 480,
+  md: 768,
+  lg: 1366,
+};

package/src/styles/light.ts

@@ -2,6 +2,7 @@ import { ThemeProp } from '../types/defaults';
 import {
   borderRadius,
   borderWidth,
+  breakpoints,
   fontColor,
   fontFiles,
   fontStack,
@@ -51,4 +52,5 @@ export const lightTheme: ThemeProp = {
     files: fontFiles,
   },
   zIndex,
+  breakpoints,
 };

package/src/types/defaults.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export type Color = {
   primary: ColorGradation;
   secondary: ColorGradation;
@@ -107,6 +109,12 @@ export type FontWeight = {
   black: string;
 };
 
+export type Breakpoints = {
+  sm: number;
+  md: number;
+  lg: number;
+};
+
 export type ThemeProp = {
   color: Color;
   miscellaneous: Miscellaneous;
@@ -122,10 +130,12 @@ export type ThemeProp = {
     files: FontWeight;
   };
   zIndex: ZIndex;
+  /** Designed to web */
+  breakpoints: Breakpoints;
 };
 
 export interface ThemeProviderProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   theme: ThemeProp;
 }
 

package/src/utils/IPhoneXHelper.ts

@@ -1,34 +1,39 @@
 import { Dimensions, Platform, StatusBar } from 'react-native';
 
 export function isIphoneX() {
-    const dimen = Dimensions.get('window');
-    return (
-        Platform.OS === 'ios' &&
-        !Platform.isPad &&
-        !Platform.isTVOS &&
-        ((dimen.height === 780 || dimen.width === 780)
-          || (dimen.height === 812 || dimen.width === 812)
-          || (dimen.height === 844 || dimen.width === 844)
-          || (dimen.height === 896 || dimen.width === 896)
-          || (dimen.height === 926 || dimen.width === 926))
-    );
+  const dimen = Dimensions.get('window');
+  return (
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    !Platform.isTVOS &&
+    (dimen.height === 780 ||
+      dimen.width === 780 ||
+      dimen.height === 812 ||
+      dimen.width === 812 ||
+      dimen.height === 844 ||
+      dimen.width === 844 ||
+      dimen.height === 896 ||
+      dimen.width === 896 ||
+      dimen.height === 926 ||
+      dimen.width === 926)
+  );
 }
 
 export function ifIphoneX(iphoneXStyle, regularStyle) {
-    if (isIphoneX()) {
-        return iphoneXStyle;
-    }
-    return regularStyle;
+  if (isIphoneX()) {
+    return iphoneXStyle;
+  }
+  return regularStyle;
 }
 
 export function getStatusBarHeight(safe) {
-    return Platform.select({
-        ios: ifIphoneX(safe ? 44 : 30, 20),
-        android: StatusBar.currentHeight,
-        default: 0
-    });
+  return Platform.select({
+    ios: ifIphoneX(safe ? 44 : 30, 20),
+    android: StatusBar.currentHeight,
+    default: 0,
+  });
 }
 
 export function getBottomSpace() {
-    return isIphoneX() ? 34 : 0;
-}
+  return isIphoneX() ? 34 : 0;
+}

package/src/utils/ResponsiveFontSize.ts

@@ -1,52 +1,71 @@
-import { Dimensions, Platform, StatusBar } from "react-native";
-import { extractNumbersFromString } from "./extractNumbersFromString";
-import { isIphoneX } from "./IPhoneXHelper";
+import { Dimensions, Platform, StatusBar } from 'react-native';
+import { extractNumbersFromString } from './extractNumbersFromString';
+import { isIphoneX } from './IPhoneXHelper';
 
-const STANDARD_SCREEN_HEIGHT = 680
+const STANDARD_SCREEN_HEIGHT = 680;
 
 /**
  * Use this function when you want to scale a percentage number
  * to a reasonable value that will fit better on most of devices.
- * 
- * @param percent 
- * @returns 
+ *
+ * @param percent
+ * @returns
  */
 export const RFPercentage = (percent: number) => {
-    if (Platform.OS === 'web') return percent
-    const { height, width } = Dimensions.get("window");
-    const standardLength = width > height ? width : height;
-    const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait
-    const deviceHeight = isIphoneX() || Platform.OS === "android" ? standardLength - offset : standardLength;
-    const heightPercent = (percent * deviceHeight) / 100;
-    return Math.round(heightPercent);
-}
+  if (Platform.OS === 'web') return percent;
+  const { height, width } = Dimensions.get('window');
+  const standardLength = width > height ? width : height;
+  const offset =
+    width > height
+      ? 0
+      : Platform.OS === 'ios'
+      ? 78
+      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait
+  const deviceHeight =
+    isIphoneX() || Platform.OS === 'android'
+      ? standardLength - offset
+      : standardLength;
+  const heightPercent = (percent * deviceHeight) / 100;
+  return Math.round(heightPercent);
+};
 
 /**
- * Use this function when you want to scale a font size based on pixel unit 
+ * Use this function when you want to scale a font size based on pixel unit
  * to a reasonable value that will fit better on most of devices.
- * 
- * @param fontSize 
- * @param standardScreenHeight 
- * @returns 
+ *
+ * @param fontSize
+ * @param standardScreenHeight
+ * @returns
  */
-export const RFValue = (fontSize: number, standardScreenHeight: number = STANDARD_SCREEN_HEIGHT) => {
-    if (Platform.OS === 'web') return fontSize
-    const { height, width } = Dimensions.get("window");
-    const standardLength = width > height ? width : height;
-    const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait
-    const deviceHeight = isIphoneX() || Platform.OS === "android" ? standardLength - offset : standardLength;
-    const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;
-    return Math.round(heightPercent);
-}
+export const RFValue = (
+  fontSize: number,
+  standardScreenHeight: number = STANDARD_SCREEN_HEIGHT
+) => {
+  if (Platform.OS === 'web') return fontSize;
+  const { height, width } = Dimensions.get('window');
+  const standardLength = width > height ? width : height;
+  const offset =
+    width > height
+      ? 0
+      : Platform.OS === 'ios'
+      ? 78
+      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait
+  const deviceHeight =
+    isIphoneX() || Platform.OS === 'android'
+      ? standardLength - offset
+      : standardLength;
+  const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;
+  return Math.round(heightPercent);
+};
 
 /**
  * Same as RFValue, however you can provide string values. E.g: '10px', '-5px'.
- * 
- * @param fontSize 
- * @param standardScreenHeight 
- * @returns 
+ *
+ * @param fontSize
+ * @param standardScreenHeight
+ * @returns
  */
 export const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {
-    const _fontSize = extractNumbersFromString(fontSize)
-    return `${RFValue(_fontSize, standardScreenHeight)}px`
-}
+  const _fontSize = extractNumbersFromString(fontSize);
+  return `${RFValue(_fontSize, standardScreenHeight)}px`;
+};

package/src/utils/index.ts

@@ -1,9 +1,10 @@
-export { lightenDarkenColor } from './lightenDarkenColor';
 export {
-  extractNumbersFromString,
   extractDigitsFromString,
+  extractNumbersFromString,
 } from './extractNumbersFromString';
+export * from './formatWithMask';
 export * from './IPhoneXHelper';
-export * from './ResponsiveFontSize';
+export { lightenDarkenColor } from './lightenDarkenColor';
 export * from './masks';
-export * from './formatWithMask';
+export * from './ResponsiveFontSize';
+export * from './variantComplement';

package/src/utils/variantComplement.ts

@@ -0,0 +1,36 @@
+import {
+  ColorGradationType,
+  ColorType,
+  FontColorType,
+  VariantType,
+} from '../types/defaults';
+
+export const fontColorVC: Record<VariantType, FontColorType> = {
+  filled: 'light',
+  outlined: 'orange',
+  text: 'orange',
+};
+
+export const colorVC: Record<VariantType, ColorType> = {
+  filled: 'primary',
+  outlined: 'primary',
+  text: 'primary',
+};
+
+export const colorGradationVC: Record<VariantType, ColorGradationType> = {
+  filled: 'dark',
+  outlined: 'dark',
+  text: 'dark',
+};
+
+export const borderColorVC: Record<VariantType, ColorType> = {
+  filled: 'primary',
+  outlined: 'primary',
+  text: 'primary',
+};
+
+export const borderColorGradationVC: Record<VariantType, ColorGradationType> = {
+  filled: 'dark',
+  outlined: 'dark',
+  text: 'dark',
+};

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

@@ -1,15 +0,0 @@
-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 | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-    };
-}
-declare const Grid: ({ children, columns, layout, style, spacing, ...rest }: IGrid) => JSX.Element;
-export default Grid;

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

@@ -1,55 +0,0 @@
-"use strict";
-
-exports.__esModule = 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 ? void 0 : child.props),
-      columns,
-      spacing: (child == null ? void 0 : child.props.spacing) ?? spacing
-    });
-  }));
-};
-
-var _default = Grid;
-exports.default = _default;
-//# sourceMappingURL=Grid.js.map

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

@@ -1 +0,0 @@
-{"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;;;;;;AA0BA,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,oBAAGA,KAAK,CAAEG,KAAV,CAD+B;AAE/BhB,MAAAA,OAF+B;AAG/BG,MAAAA,OAAO,EAAE,CAAAU,KAAK,QAAL,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?:\n    | SpacingType\n    | {\n        top?: SpacingType;\n        right?: SpacingType;\n        bottom?: SpacingType;\n        left?: SpacingType;\n      };\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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { SpacingType } from '../../../../types/defaults';
-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 | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-    };
-    wrapper?: boolean;
-}
-declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, wrapper, ...rest }: IGridItem) => JSX.Element;
-export default GridItem;