@tradly/asset 1.0.18 → 1.0.20

package/dist/native/MediaGallery.native.js

@@ -10,7 +10,6 @@ var _reactNative = require("react-native");
 var _FileUpload = _interopRequireDefault(require("./FileUpload.native"));
 var _ImagesSkeleton = _interopRequireDefault(require("./ImagesSkeleton.native"));
 var _Pagination = _interopRequireDefault(require("./Pagination.native"));
-var _Icons = require("./Icons.native");
 var _theme = require("./theme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,14 +27,20 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var _Dimensions$get = _reactNative.Dimensions.get('window'),
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Icons are now passed via props, no need to import here
+var _Dimensions$get = _reactNative.Dimensions.get("window"),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
-var ITEM_MARGIN = 8;
-var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS; // 40 = padding, adjust for margins
-
-var IMAGE_MIME_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml', 'image/gif', 'image/avif', 'image/x-icon', 'image/vnd.microsoft.icon', 'image/heic', 'image/heif'];
+var ITEM_MARGIN = 4; // Reduced margin for better fit
+// Calculate item size accounting for:
+// - Container padding (md = 12px on each side = 24px total)
+// - Grid padding (2px on each side = 4px total)
+// - Item margins between items (4px * 2 gaps = 8px total)
+var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
+var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
+var IMAGE_MIME_TYPES = ["image/png", "image/jpeg", "image/webp", "image/svg+xml", "image/gif", "image/avif", "image/x-icon", "image/vnd.microsoft.icon", "image/heic", "image/heif"];
 var ImagesGallery = function ImagesGallery(_ref) {
   var update_data = _ref.update_data,
     closePopup = _ref.closePopup,
@@ -43,6 +48,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -105,7 +111,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
           case 3:
             _context.p = 3;
             _t = _context.v;
-            console.error('Error loading media:', _t);
+            console.error("Error loading media:", _t);
             if (onError) {
               onError(_t);
             }
@@ -144,13 +150,13 @@ var ImagesGallery = function ImagesGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
+          icons: icons,
+          theme: theme
         })
       });
     }
     var image = images[index - 1];
-    var imageUrl = typeof image === 'string' ? image : image.url;
+    var imageUrl = typeof image === "string" ? image : image.url;
     var imageKey = image.id || image.url || index;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: function onPress() {
@@ -172,7 +178,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
     });
   };
   var data = isLoading ? [] : [{
-    type: 'upload'
+    type: "upload"
   }].concat(_toConsumableArray(images));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.container, containerStyle],
@@ -180,7 +186,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
       data: data,
       renderItem: renderItem,
       keyExtractor: function keyExtractor(item, index) {
-        if (index === 0) return 'upload';
+        if (index === 0) return "upload";
         var image = images[index - 1];
         return image.id || image.url || "image-".concat(index);
       },
@@ -211,15 +217,16 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   grid: {
-    padding: 4
+    padding: 2 // Reduced padding for better fit
   },
   uploadContainer: {
-    margin: ITEM_MARGIN
+    margin: ITEM_MARGIN,
+    overflow: "hidden"
   },
   imageItem: {
     margin: ITEM_MARGIN,
     borderRadius: 8,
-    overflow: 'hidden',
+    overflow: "hidden",
     shadowOffset: {
       width: 0,
       height: 2
@@ -229,8 +236,8 @@ var styles = _reactNative.StyleSheet.create({
     elevation: 5
   },
   image: {
-    width: '100%',
-    height: '100%'
+    width: "100%",
+    height: "100%"
   },
   paginationContainer: {
     // Styles applied via theme

package/dist/native/MediaPopup.native.js

@@ -32,6 +32,7 @@ var MediaPopup = function MediaPopup(_ref) {
     title = _ref$title === void 0 ? "Media Gallery" : _ref$title,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     theme = _ref.theme,
     overlayStyle = _ref.overlayStyle,
     containerStyle = _ref.containerStyle,
@@ -93,7 +94,9 @@ var MediaPopup = function MediaPopup(_ref) {
               borderTopRightRadius: currentTheme.radius.xxl,
               height: SCREEN_HEIGHT * sheetHeight,
               maxHeight: SCREEN_HEIGHT * sheetHeight,
-              padding: currentTheme.spacing.xl
+              paddingTop: currentTheme.spacing.sm,
+              paddingBottom: currentTheme.spacing.xl,
+              paddingHorizontal: currentTheme.spacing.md // Reduced from xl to md for better fit
             }, containerStyle, {
               transform: [{
                 translateY: slideAnim
@@ -101,7 +104,7 @@ var MediaPopup = function MediaPopup(_ref) {
             }],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: [styles.header, {
-                marginBottom: currentTheme.spacing.md
+                marginBottom: currentTheme.spacing.sm
               }, headerStyle],
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.title, {
@@ -134,6 +137,7 @@ var MediaPopup = function MediaPopup(_ref) {
               onError: onError,
               picker: picker,
               pickerOptions: pickerOptions,
+              icons: icons,
               theme: currentTheme
             })]
           })

package/dist/native/MediaTab.native.js

@@ -29,6 +29,7 @@ var MediaTab = function MediaTab(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -75,6 +76,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }
@@ -88,6 +90,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }
@@ -102,6 +105,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }
@@ -114,11 +118,13 @@ var MediaTab = function MediaTab(_ref) {
         backgroundColor: theme.colors.tabBackground,
         borderBottomColor: theme.colors.border,
         paddingHorizontal: theme.spacing.xs,
-        // Always left align
-        justifyContent: "flex-start"
+        // Always left align - no center alignment
+        justifyContent: "flex-start",
+        alignItems: "flex-start"
       }, tabListStyle],
       children: availableTabs.map(function (type, index) {
         var isSelected = index === selectedIndex;
+        var isSingleTab = availableTabs.length === 1;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
           onPress: function onPress() {
             return setSelectedIndex(index);
@@ -126,7 +132,10 @@ var MediaTab = function MediaTab(_ref) {
           style: [styles.tabButton, {
             paddingVertical: theme.spacing.md,
             paddingHorizontal: theme.spacing.lg,
-            flex: 1
+            // For single tab, don't use flex: 1 to prevent centering
+            // Use auto width so it stays left-aligned
+            flex: isSingleTab ? 0 : 1,
+            alignSelf: "flex-start"
           }, tabButtonStyle, isSelected ? [styles.tabButtonActive, tabButtonActiveStyle] : [styles.tabButtonInactive, tabButtonInactiveStyle]],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.tabButtonText, {

package/dist/native/VideosGallery.native.js

@@ -10,7 +10,6 @@ var _reactNative = require("react-native");
 var _FileUpload = _interopRequireDefault(require("./FileUpload.native"));
 var _ImagesSkeleton = _interopRequireDefault(require("./ImagesSkeleton.native"));
 var _Pagination = _interopRequireDefault(require("./Pagination.native"));
-var _Icons = require("./Icons.native");
 var _theme = require("./theme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,13 +27,21 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Note: You'll need to install react-native-video for video playback
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Icons are now passed via props, no need to import here
+// Note: You'll need to install react-native-video for video playback
 // import Video from 'react-native-video'
 var _Dimensions$get = _reactNative.Dimensions.get('window'),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
-var ITEM_MARGIN = 8;
-var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS;
+var ITEM_MARGIN = 4; // Reduced margin for better fit
+// Calculate item size accounting for:
+// - Container padding (md = 12px on each side = 24px total)
+// - Grid padding (2px on each side = 4px total)
+// - Item margins between items (4px * 2 gaps = 8px total)
+var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
+var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
 var VIDEO_MIME_TYPES = ['video/mp4', 'video/quicktime', 'video/x-ms-wmv', 'video/h265', 'video/hevc', 'video/webm'];
 var VideosGallery = function VideosGallery(_ref) {
   var update_data = _ref.update_data,
@@ -43,6 +50,7 @@ var VideosGallery = function VideosGallery(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -144,8 +152,8 @@ var VideosGallery = function VideosGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
+          icons: icons,
+          theme: theme
         })
       });
     }
@@ -209,7 +217,7 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   grid: {
-    padding: 4
+    padding: 2 // Reduced padding for better fit
   },
   uploadContainer: {
     margin: ITEM_MARGIN

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.18",
+    "version": "1.0.20",
     "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",