@dropi/react-native-design-system 0.1.5 → 0.1.6

package/lib/atoms/Buttons/DefaultButton.js

@@ -27,7 +27,7 @@ const DefaultButton = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     style: {
       backgroundColor: variant == 'primary' ? _constants.colors['Primary-500'].light : 'transparent',
-      paddingVertical: size === 'small' ? 8 : size === 'large' ? _constants.spacing['size-4'] : _constants.spacing['size-3'],
+      paddingVertical: size === 'small' ? _constants.spacing['size-2'] : size === 'large' ? _constants.spacing['size-4'] : _constants.spacing['size-3'],
       paddingHorizontal: _constants.spacing['size-4'],
       borderRadius: _constants.radius['border-2'],
       alignItems: 'center',

package/lib/atoms/Buttons/FeedbackButton.js

@@ -29,7 +29,7 @@ const FeedbackButton = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     style: {
       backgroundColor: variant === 'primary' ? color : 'transparent',
-      paddingVertical: size === 'small' ? 8 : size === 'large' ? _constants.spacing['size-4'] : _constants.spacing['size-3'],
+      paddingVertical: size === 'small' ? _constants.spacing['size-2'] : size === 'large' ? _constants.spacing['size-4'] : _constants.spacing['size-3'],
       paddingHorizontal: _constants.spacing['size-4'],
       borderRadius: _constants.radius['border-2'],
       alignItems: 'center',

package/lib/molecules/Alert/Alert.d.ts

@@ -0,0 +1,9 @@
+interface AlertProps {
+    message: string;
+    variant: 'info' | 'warning' | 'error' | 'success';
+    buttonLabel?: string;
+    onButtonPress?: () => void;
+    onClosePress?: () => void;
+}
+export declare const Alert: ({ message, variant, buttonLabel, onButtonPress, onClosePress }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Alert/Alert.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Alert = void 0;
+var _reactNative = require("react-native");
+var _reactNative2 = require("dropi-lib-icons/react-native");
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _atoms = require("../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+const variantStyles = {
+  info: {
+    backgroundColor: _constants.colors['Info-50'].light,
+    borderColor: _constants.colors['Info-500'].light,
+    icon: 'check-circle'
+  },
+  warning: {
+    backgroundColor: _constants.colors['Warning-50'].light,
+    borderColor: _constants.colors['Warning-500'].light,
+    icon: 'cross-circle'
+  },
+  error: {
+    backgroundColor: _constants.colors['Error-50'].light,
+    borderColor: _constants.colors['Error-500'].light,
+    icon: 'warning-circle'
+  },
+  success: {
+    backgroundColor: _constants.colors['Success-50'].light,
+    borderColor: _constants.colors['Success-500'].light,
+    icon: 'info'
+  }
+};
+const Alert = ({
+  message,
+  variant,
+  buttonLabel,
+  onButtonPress,
+  onClosePress
+}) => {
+  const {
+    backgroundColor,
+    borderColor,
+    icon
+  } = variantStyles[variant];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      backgroundColor: backgroundColor,
+      borderWidth: 1,
+      borderColor: borderColor,
+      padding: 12,
+      borderRadius: _constants.radius["border-2"],
+      flexDirection: 'row'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.alertIcon,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Icon, {
+        name: icon,
+        size: _constants.sizes.s,
+        color: borderColor
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      type: "s-regular",
+      style: {
+        color: _constants.colors['Gray-700'].light,
+        flex: 1,
+        marginRight: !_utils.isTablet ? 8 : 12
+      },
+      children: message
+    }), buttonLabel && onButtonPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginRight: !_utils.isTablet ? 8 : 12
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.FeedbackButton, {
+        feedbackType: variant,
+        label: buttonLabel || 'Label',
+        variant: "primary",
+        size: "small",
+        onPress: onButtonPress
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.TextButton, {
+      label: "",
+      size: "large",
+      variant: "secondary",
+      preIcon: 'close-small',
+      onPress: onClosePress
+    })]
+  });
+};
+exports.Alert = Alert;
+const styles = _reactNative.StyleSheet.create({
+  alertIcon: {
+    marginRight: 16,
+    marginTop: 4
+  }
+});

package/lib/molecules/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/lib/molecules/Alert/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Alert = require("./Alert");
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Alert[key];
+    }
+  });
+});

package/lib/molecules/EmptyState/EmptyState.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    title?: string;
+    message: string;
+    buttonLabel?: string;
+    onButtonPress?: () => void;
+}
+export declare const EmptyState: ({ title, message, buttonLabel, onButtonPress }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/EmptyState/EmptyState.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _reactNative = require("react-native");
+var _expoImage = require("expo-image");
+var _constants = require("../../constants");
+var _atoms = require("../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+const EmptyState = ({
+  title,
+  message,
+  buttonLabel,
+  onButtonPress
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      paddingVertical: _constants.spacing['size-4']
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+      source: require('../../../assets/not-found.png'),
+      style: {
+        width: 51,
+        height: 48,
+        alignSelf: 'center',
+        marginBottom: _constants.spacing['size-4']
+      },
+      contentFit: "contain"
+    }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      type: "l-medium",
+      style: {
+        color: _constants.colors['Gray-700'].light,
+        textAlign: 'center',
+        marginBottom: _constants.spacing['size-2']
+      },
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      type: "m-regular",
+      style: {
+        color: _constants.colors['Gray-500'].light,
+        textAlign: 'center'
+      },
+      children: message
+    }), buttonLabel && onButtonPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginTop: 24,
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+        label: buttonLabel,
+        onPress: onButtonPress,
+        variant: 'tertiary',
+        size: 'normal'
+      })
+    })]
+  });
+};
+exports.EmptyState = EmptyState;

package/lib/molecules/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/lib/molecules/EmptyState/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _EmptyState = require("./EmptyState");
+Object.keys(_EmptyState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EmptyState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EmptyState[key];
+    }
+  });
+});

package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.d.ts

@@ -0,0 +1,10 @@
+import { TouchableOpacityProps } from 'react-native';
+interface TitleDescriptionProps extends TouchableOpacityProps {
+    title: string;
+    label?: string;
+    imageSource?: string | number;
+    isActive: boolean;
+    isDisabled?: boolean;
+}
+export declare const TitleDescription: ({ title, label, imageSource, isActive, isDisabled, ...rest }: TitleDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleDescription = void 0;
+var _reactNative = require("react-native");
+var _expoImage = require("expo-image");
+var _utils = require("../../../utils");
+var _constants = require("../../../constants");
+var _atoms = require("../../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+const TitleDescription = ({
+  title,
+  label,
+  imageSource,
+  isActive,
+  isDisabled,
+  ...rest
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: isActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.selectedOption,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.selectedOptionSelector,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.innerSelector
+        })
+      }), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+        source: imageSource,
+        style: styles.image
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "m-regular",
+          style: styles.optionText,
+          children: title
+        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "s-regular",
+          style: styles.optionText,
+          children: label
+        })]
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.option,
+      ...rest,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.optionSelector
+      }), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+        source: imageSource,
+        style: styles.image
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "m-regular",
+          style: styles.optionText,
+          children: title
+        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "s-regular",
+          style: styles.optionText,
+          children: label
+        })]
+      })]
+    })
+  });
+};
+exports.TitleDescription = TitleDescription;
+const styles = _reactNative.StyleSheet.create({
+  option: {
+    padding: _constants.spacing['size-4'],
+    borderRadius: _constants.radius['border-2'],
+    borderWidth: 1,
+    borderColor: _constants.colors['Gray-200'].light,
+    marginBottom: _constants.spacing['size-5'],
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  selectedOption: {
+    padding: _constants.spacing['size-4'],
+    borderRadius: _constants.radius['border-2'],
+    borderWidth: 1,
+    borderColor: _constants.colors["Primary-500"].light,
+    marginBottom: _constants.spacing['size-5'],
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: _constants.colors['Primary-50'].light
+  },
+  optionSelector: {
+    width: !_utils.isTablet ? 20 : 20 * 1.5,
+    height: !_utils.isTablet ? 20 : 20 * 1.5,
+    borderRadius: _constants.radius.circle,
+    marginRight: _constants.spacing['size-3'],
+    borderWidth: 2,
+    borderColor: _constants.colors['Gray-200'].light
+  },
+  selectedOptionSelector: {
+    width: !_utils.isTablet ? 20 : 20 * 1.5,
+    height: !_utils.isTablet ? 20 : 20 * 1.5,
+    borderRadius: _constants.radius.circle,
+    marginRight: _constants.spacing['size-3'],
+    borderWidth: 2,
+    borderColor: _constants.colors["Primary-500"].light,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  innerSelector: {
+    width: !_utils.isTablet ? 12 : 12 * 1.5,
+    height: !_utils.isTablet ? 12 : 12 * 1.5,
+    borderRadius: _constants.radius.circle,
+    backgroundColor: _constants.colors["Primary-500"].light
+  },
+  image: {
+    width: 32,
+    height: 32,
+    marginRight: _constants.spacing['size-3'],
+    borderRadius: _constants.radius.circle
+  },
+  textContainer: {
+    flexDirection: 'column'
+  },
+  optionText: {
+    color: _constants.colors['Gray-700'].light
+  },
+  labelTaxt: {
+    color: _constants.colors['Gray-600'].light
+  }
+});

package/lib/molecules/RadioButtons/TitleDescription/index.d.ts

@@ -0,0 +1 @@
+export * from './TitleDescription';

package/lib/molecules/RadioButtons/TitleDescription/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TitleDescription = require("./TitleDescription");
+Object.keys(_TitleDescription).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TitleDescription[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TitleDescription[key];
+    }
+  });
+});

package/lib/molecules/RadioButtons/index.d.ts

@@ -0,0 +1 @@
+export * from './TitleDescription';

package/lib/molecules/RadioButtons/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TitleDescription = require("./TitleDescription");
+Object.keys(_TitleDescription).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TitleDescription[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TitleDescription[key];
+    }
+  });
+});

package/lib/molecules/Search/Search.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    filterText: string;
+    setFilterText: (text: string) => void;
+    placeholder?: string;
+}
+export declare const Search: ({ filterText, setFilterText, placeholder }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Search/Search.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Search = void 0;
+var _reactNative = require("react-native");
+var _reactNative2 = require("dropi-lib-icons/react-native");
+var _constants = require("../../constants");
+var _atoms = require("../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+const Search = ({
+  filterText,
+  setFilterText,
+  placeholder
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      width: '100%',
+      backgroundColor: _constants.colors['Gray-50'].light,
+      borderColor: '#D3D7DE',
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingVertical: 16,
+      paddingHorizontal: 8,
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: _constants.spacing['size-5']
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Icon, {
+      name: "search",
+      size: 20,
+      color: _constants.colors['Gray-500'].light,
+      style: {
+        marginRight: _constants.spacing['size-2']
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      style: {
+        flex: 1,
+        fontSize: _constants.sizes.m,
+        color: _constants.colors['Gray-900'].light,
+        padding: 0
+      },
+      placeholder: placeholder || 'Buscar',
+      placeholderTextColor: _constants.colors['Gray-500'].light,
+      value: filterText,
+      onChangeText: setFilterText
+    }), filterText !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.TextButton, {
+      label: "",
+      size: "large",
+      variant: "secondary",
+      preIcon: "close-small",
+      onPress: () => setFilterText(''),
+      replaceColor: _constants.colors['Gray-600'].light
+    })]
+  });
+};
+exports.Search = Search;

package/lib/molecules/Search/index.d.ts

@@ -0,0 +1 @@
+export * from './Search';

package/lib/molecules/Search/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Search = require("./Search");
+Object.keys(_Search).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Search[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Search[key];
+    }
+  });
+});

package/lib/molecules/Tooltip/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface Props {
+    width: number;
+    onClosePress?: () => void;
+    xPosition: number;
+    yPosition: number;
+    children: ReactNode;
+}
+export declare const Tooltip: ({ width, xPosition, yPosition, children, onClosePress }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Tooltip/Tooltip.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+var _reactNative = require("react-native");
+var _constants = require("../../constants");
+var _atoms = require("../../atoms");
+var _utils = require("../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const Tooltip = ({
+  width,
+  xPosition,
+  yPosition,
+  children,
+  onClosePress
+}) => {
+  let localXPosition = xPosition + width > _utils.windowWidth ? _utils.windowWidth - width - 40 : xPosition;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      position: 'absolute',
+      top: yPosition,
+      left: localXPosition,
+      width: width,
+      backgroundColor: _constants.colors['Gray-800'].light,
+      padding: _constants.spacing['size-4'],
+      borderRadius: _constants.radius['border-2']
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flex: 1
+        },
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          paddingLeft: _constants.spacing['size-1']
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.TextButton, {
+          label: "",
+          size: "large",
+          variant: "secondary",
+          preIcon: "close-small",
+          replaceColor: _constants.colors.White.light,
+          onPress: onClosePress
+        })
+      })]
+    })
+  });
+};
+exports.Tooltip = Tooltip;

package/lib/molecules/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/lib/molecules/Tooltip/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Tooltip = require("./Tooltip");
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tooltip[key];
+    }
+  });
+});

package/lib/molecules/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Alert';
+export * from './EmptyState';
+export * from './RadioButtons';
+export * from './Search';
+export * from './Tooltip';

package/lib/molecules/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Alert = require("./Alert");
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Alert[key];
+    }
+  });
+});
+var _EmptyState = require("./EmptyState");
+Object.keys(_EmptyState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EmptyState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EmptyState[key];
+    }
+  });
+});
+var _RadioButtons = require("./RadioButtons");
+Object.keys(_RadioButtons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RadioButtons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadioButtons[key];
+    }
+  });
+});
+var _Search = require("./Search");
+Object.keys(_Search).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Search[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Search[key];
+    }
+  });
+});
+var _Tooltip = require("./Tooltip");
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tooltip[key];
+    }
+  });
+});

package/lib/utils/DeviceInfo.d.ts

@@ -0,0 +1,2 @@
+export declare const windowWidth: number;
+export declare const isTablet: boolean;

package/lib/utils/DeviceInfo.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowWidth = exports.isTablet = void 0;
+var _reactNative = require("react-native");
+const windowWidth = exports.windowWidth = _reactNative.Dimensions.get("window").width;
+const isTablet = exports.isTablet = windowWidth >= 768;

package/lib/utils/index.d.ts

@@ -1,2 +1,2 @@
-export declare const isTablet: boolean;
 export * from './TextUtils';
+export * from './DeviceInfo';

package/lib/utils/index.js

@@ -3,15 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  isTablet: true
-};
-exports.isTablet = void 0;
-var _reactNative = require("react-native");
 var _TextUtils = require("./TextUtils");
 Object.keys(_TextUtils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextUtils[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -20,5 +14,14 @@ Object.keys(_TextUtils).forEach(function (key) {
     }
   });
 });
-const windowWidth = _reactNative.Dimensions.get("window").width;
-const isTablet = exports.isTablet = windowWidth >= 768;
+var _DeviceInfo = require("./DeviceInfo");
+Object.keys(_DeviceInfo).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DeviceInfo[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DeviceInfo[key];
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -21,7 +21,8 @@
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.79.5",
-    "dropi-lib-icons": ">=1.2.5"
+    "dropi-lib-icons": ">=1.2.5",
+    "expo-image": ">=2.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
@@ -33,6 +34,7 @@
     "react": "^19.2.0",
     "react-native": "^0.82.1",
     "typescript": "^5.6.0",
-    "dropi-lib-icons": "^1.2.5"
+    "dropi-lib-icons": "^1.2.5",
+    "expo-image": ">=2.4.0"
   }
 }