@tradly/asset 1.0.13 → 1.0.15

package/dist/esm/native/MediaPopup.native.js

@@ -0,0 +1,170 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+import React from 'react';
+import { Modal, View, Text, TouchableOpacity, StyleSheet, Dimensions, Animated, TouchableWithoutFeedback } from 'react-native';
+import MediaTab from './MediaTab.native';
+import { CloseIcon } from './Icons.native';
+import { createTheme } from './theme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var _Dimensions$get = Dimensions.get('window'),
+  SCREEN_HEIGHT = _Dimensions$get.height;
+var MediaPopup = function MediaPopup(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect,
+    currentData = _ref.currentData,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? ['image'] : _ref$options,
+    apiService = _ref.apiService,
+    onError = _ref.onError,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Media Gallery' : _ref$title,
+    picker = _ref.picker,
+    pickerOptions = _ref.pickerOptions,
+    theme = _ref.theme,
+    overlayStyle = _ref.overlayStyle,
+    containerStyle = _ref.containerStyle,
+    headerStyle = _ref.headerStyle,
+    titleStyle = _ref.titleStyle,
+    closeButtonStyle = _ref.closeButtonStyle,
+    closeButtonTextStyle = _ref.closeButtonTextStyle,
+    bottomSheetHeight = _ref.bottomSheetHeight;
+  var currentTheme = React.useMemo(function () {
+    return createTheme(theme);
+  }, [theme]);
+  var sheetHeight = bottomSheetHeight || currentTheme.bottomSheetHeight || 0.9;
+  var _React$useState = React.useState(new Animated.Value(SCREEN_HEIGHT)),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    slideAnim = _React$useState2[0];
+  React.useEffect(function () {
+    if (isOpen) {
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 65,
+        friction: 11
+      }).start();
+    } else {
+      Animated.timing(slideAnim, {
+        toValue: SCREEN_HEIGHT,
+        duration: 250,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [isOpen]);
+  var handleUpdate = function handleUpdate(data) {
+    if (onSelect) {
+      onSelect(data);
+    }
+  };
+  var handleClose = function handleClose() {
+    if (onClose) {
+      onClose();
+    }
+  };
+  if (!isOpen) return null;
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: isOpen,
+    transparent: true,
+    animationType: "none",
+    onRequestClose: handleClose,
+    children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+      onPress: handleClose,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.overlay, {
+          backgroundColor: currentTheme.colors.overlay
+        }, overlayStyle],
+        children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+          children: /*#__PURE__*/_jsxs(Animated.View, {
+            style: [styles.container, {
+              backgroundColor: currentTheme.colors.background,
+              borderTopLeftRadius: currentTheme.radius.xxl,
+              borderTopRightRadius: currentTheme.radius.xxl,
+              maxHeight: SCREEN_HEIGHT * sheetHeight,
+              padding: currentTheme.spacing.xl
+            }, containerStyle, {
+              transform: [{
+                translateY: slideAnim
+              }]
+            }],
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [styles.header, {
+                borderBottomColor: currentTheme.colors.border,
+                marginBottom: currentTheme.spacing.lg,
+                paddingBottom: currentTheme.spacing.md
+              }, headerStyle],
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.title, {
+                  fontSize: currentTheme.typography.title.fontSize,
+                  fontWeight: currentTheme.typography.title.fontWeight,
+                  color: currentTheme.colors.text
+                }, titleStyle],
+                children: title
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: handleClose,
+                style: [styles.closeButton, closeButtonStyle],
+                hitSlop: {
+                  top: 10,
+                  bottom: 10,
+                  left: 10,
+                  right: 10
+                },
+                children: /*#__PURE__*/_jsx(CloseIcon, {
+                  size: 24,
+                  color: currentTheme.colors.text
+                })
+              })]
+            }), /*#__PURE__*/_jsx(MediaTab, {
+              imagePopup: isOpen,
+              update_data: handleUpdate,
+              current_data: currentData,
+              closePopup: handleClose,
+              options: options,
+              apiService: apiService,
+              onError: onError,
+              picker: picker,
+              pickerOptions: pickerOptions,
+              theme: currentTheme
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+var styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  container: {
+    minHeight: 200,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: -2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1
+  },
+  title: {
+    flex: 1
+  },
+  closeButton: {
+    padding: 8,
+    borderRadius: 20,
+    marginLeft: 12
+  }
+});
+export default MediaPopup;

package/dist/esm/native/MediaTab.native.js

@@ -0,0 +1,192 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+import React, { useMemo, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import ImagesGallery from './MediaGallery.native';
+import VideosGallery from './VideosGallery.native';
+import { defaultTheme } from './theme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MediaTab = function MediaTab(_ref) {
+  var imagePopup = _ref.imagePopup,
+    current_data = _ref.current_data,
+    update_data = _ref.update_data,
+    closePopup = _ref.closePopup,
+    options = _ref.options,
+    apiService = _ref.apiService,
+    onError = _ref.onError,
+    picker = _ref.picker,
+    pickerOptions = _ref.pickerOptions,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
+    containerStyle = _ref.containerStyle,
+    tabListStyle = _ref.tabListStyle,
+    tabButtonStyle = _ref.tabButtonStyle,
+    tabButtonActiveStyle = _ref.tabButtonActiveStyle,
+    tabButtonInactiveStyle = _ref.tabButtonInactiveStyle,
+    tabButtonTextStyle = _ref.tabButtonTextStyle,
+    tabButtonTextActiveStyle = _ref.tabButtonTextActiveStyle,
+    tabButtonTextInactiveStyle = _ref.tabButtonTextInactiveStyle,
+    tabIndicatorStyle = _ref.tabIndicatorStyle,
+    tabPanelStyle = _ref.tabPanelStyle;
+  // Build a stable list of enabled tabs in order
+  var availableTabs = useMemo(function () {
+    var tabs = [];
+    if (options !== null && options !== void 0 && options.includes('image')) tabs.push('image');
+    if (options !== null && options !== void 0 && options.includes('video')) tabs.push('video');
+    if (options !== null && options !== void 0 && options.includes('file')) tabs.push('file');
+    return tabs;
+  }, [options]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedIndex = _useState2[0],
+    setSelectedIndex = _useState2[1];
+
+  // Guard: if no options passed, render nothing
+  if (!availableTabs.length) {
+    return null;
+  }
+  var renderTabLabel = function renderTabLabel(type) {
+    if (type === 'image') return 'Images';
+    if (type === 'video') return 'Videos';
+    if (type === 'file') return 'Files';
+    return type;
+  };
+  var renderPanel = function renderPanel(type) {
+    if (type === 'image') {
+      return /*#__PURE__*/_jsx(ImagesGallery, {
+        imagePopup: imagePopup,
+        update_data: update_data,
+        current_data: current_data,
+        closePopup: closePopup,
+        apiService: apiService,
+        onError: onError,
+        picker: picker,
+        pickerOptions: pickerOptions
+      });
+    }
+    if (type === 'video') {
+      return /*#__PURE__*/_jsx(VideosGallery, {
+        imagePopup: imagePopup,
+        update_data: update_data,
+        current_data: current_data,
+        closePopup: closePopup,
+        apiService: apiService,
+        onError: onError,
+        picker: picker,
+        pickerOptions: pickerOptions,
+        theme: theme
+      });
+    }
+    if (type === 'file') {
+      // Reuse ImagesGallery for files as in original implementation
+      return /*#__PURE__*/_jsx(ImagesGallery, {
+        imagePopup: imagePopup,
+        update_data: update_data,
+        current_data: current_data,
+        closePopup: closePopup,
+        apiService: apiService,
+        onError: onError,
+        picker: picker,
+        pickerOptions: pickerOptions
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.tabList, {
+        backgroundColor: theme.colors.tabBackground,
+        borderBottomColor: theme.colors.border,
+        paddingHorizontal: theme.spacing.xs
+      }, tabListStyle],
+      children: availableTabs.map(function (type, index) {
+        var isSelected = index === selectedIndex;
+        return /*#__PURE__*/_jsxs(TouchableOpacity, {
+          onPress: function onPress() {
+            return setSelectedIndex(index);
+          },
+          style: [styles.tabButton, {
+            paddingVertical: theme.spacing.md,
+            paddingHorizontal: theme.spacing.lg
+          }, tabButtonStyle, isSelected ? [styles.tabButtonActive, tabButtonActiveStyle] : [styles.tabButtonInactive, tabButtonInactiveStyle]],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.tabButtonText, {
+              fontSize: theme.typography.body.fontSize,
+              fontWeight: theme.typography.body.fontWeight
+            }, isSelected ? [styles.tabButtonTextActive, {
+              color: theme.colors.tabActive
+            }, tabButtonTextActiveStyle] : [styles.tabButtonTextInactive, {
+              color: theme.colors.tabInactive
+            }, tabButtonTextInactiveStyle], tabButtonTextStyle],
+            children: renderTabLabel(type)
+          }), isSelected && /*#__PURE__*/_jsx(View, {
+            style: [styles.tabIndicator, {
+              backgroundColor: theme.colors.tabIndicator
+            }, tabIndicatorStyle]
+          })]
+        }, type);
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.tabPanel, tabPanelStyle],
+      children: availableTabs.map(function (type, index) {
+        var isSelected = index === selectedIndex;
+        return /*#__PURE__*/_jsx(View, {
+          style: isSelected ? styles.panelVisible : styles.panelHidden,
+          children: isSelected && renderPanel(type)
+        }, type);
+      })
+    })]
+  });
+};
+var styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  tabList: {
+    flexDirection: 'row',
+    borderBottomWidth: 2
+  },
+  tabButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  tabButtonActive: {
+    // Active state styling applied via theme
+  },
+  tabButtonInactive: {
+    // Inactive state styling applied via theme
+  },
+  tabButtonText: {
+    // Base text styling applied via theme
+  },
+  tabButtonTextActive: {
+    // Active text color applied via theme
+  },
+  tabButtonTextInactive: {
+    // Inactive text color applied via theme
+  },
+  tabIndicator: {
+    position: 'absolute',
+    bottom: -2,
+    left: 0,
+    right: 0,
+    height: 2
+  },
+  tabPanel: {
+    flex: 1
+  },
+  panelVisible: {
+    flex: 1
+  },
+  panelHidden: {
+    display: 'none'
+  }
+});
+export default MediaTab;

package/dist/esm/native/Pagination.native.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { defaultTheme } from './theme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Pagination = function Pagination(_ref) {
+  var nextPage = _ref.nextPage,
+    current_page = _ref.current_page,
+    pageCount = _ref.pageCount,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
+    containerStyle = _ref.containerStyle,
+    navStyle = _ref.navStyle,
+    previousButtonStyle = _ref.previousButtonStyle,
+    nextButtonStyle = _ref.nextButtonStyle,
+    pageButtonStyle = _ref.pageButtonStyle,
+    pageButtonActiveStyle = _ref.pageButtonActiveStyle,
+    ellipsisStyle = _ref.ellipsisStyle,
+    pageButtonTextStyle = _ref.pageButtonTextStyle,
+    pageButtonTextActiveStyle = _ref.pageButtonTextActiveStyle;
+  var totalPages = Math.ceil(pageCount) || 1;
+  var currentPage = current_page || 1;
+
+  // Generate page numbers to display
+  var getPageNumbers = function getPageNumbers() {
+    var pages = [];
+    var maxVisible = 5;
+    var startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    var endPage = Math.min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) {
+      startPage = Math.max(1, endPage - maxVisible + 1);
+    }
+
+    // Add first page and ellipsis
+    if (startPage > 1) {
+      pages.push(1);
+      if (startPage > 2) {
+        pages.push('...');
+      }
+    }
+
+    // Add visible pages
+    for (var i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    // Add ellipsis and last page
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pages.push('...');
+      }
+      pages.push(totalPages);
+    }
+    return pages;
+  };
+  var handlePageClick = function handlePageClick(page) {
+    if (page !== currentPage && page >= 1 && page <= totalPages && typeof page === 'number') {
+      nextPage(page);
+    }
+  };
+  var handlePrevious = function handlePrevious() {
+    if (currentPage > 1) {
+      nextPage(currentPage - 1);
+    }
+  };
+  var handleNext = function handleNext() {
+    if (currentPage < totalPages) {
+      nextPage(currentPage + 1);
+    }
+  };
+  if (totalPages <= 1) return null;
+  var pageNumbers = getPageNumbers();
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, containerStyle],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.nav, navStyle],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handlePrevious,
+        disabled: currentPage === 1,
+        style: [styles.button, styles.previousButton, {
+          backgroundColor: theme.colors.paginationButton,
+          borderColor: theme.colors.paginationBorder
+        }, previousButtonStyle, currentPage === 1 && styles.buttonDisabled],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.buttonText, {
+            color: theme.colors.paginationText
+          }],
+          children: "\u2039"
+        })
+      }), pageNumbers.map(function (page, index) {
+        if (page === '...') {
+          return /*#__PURE__*/_jsx(View, {
+            style: [styles.ellipsis, {
+              backgroundColor: theme.colors.paginationButton,
+              borderColor: theme.colors.paginationBorder
+            }, ellipsisStyle],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.ellipsisText, {
+                color: theme.colors.paginationText
+              }],
+              children: "..."
+            })
+          }, "ellipsis-".concat(index));
+        }
+        var isActive = page === currentPage;
+        return /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: function onPress() {
+            return handlePageClick(page);
+          },
+          style: [styles.button, styles.pageButton, {
+            backgroundColor: isActive ? theme.colors.paginationButtonActive : theme.colors.paginationButton,
+            borderColor: isActive ? theme.colors.paginationButtonActive : theme.colors.paginationBorder
+          }, pageButtonStyle, isActive && [styles.pageButtonActive, pageButtonActiveStyle]],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.pageButtonText, {
+              color: isActive ? theme.colors.paginationTextActive : theme.colors.paginationText,
+              fontWeight: isActive ? '600' : '500'
+            }, isActive && pageButtonTextActiveStyle, pageButtonTextStyle],
+            children: page
+          })
+        }, page);
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleNext,
+        disabled: currentPage === totalPages,
+        style: [styles.button, styles.nextButton, {
+          backgroundColor: theme.colors.paginationButton,
+          borderColor: theme.colors.paginationBorder
+        }, nextButtonStyle, currentPage === totalPages && styles.buttonDisabled],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.buttonText, {
+            color: theme.colors.paginationText
+          }],
+          children: "\u203A"
+        })
+      })]
+    })
+  });
+};
+var styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  nav: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexWrap: 'wrap'
+  },
+  button: {
+    minWidth: 40,
+    height: 40,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1
+    // Colors applied via theme
+  },
+  previousButton: {
+    borderTopLeftRadius: 6,
+    borderBottomLeftRadius: 6,
+    borderRightWidth: 0
+  },
+  nextButton: {
+    borderTopRightRadius: 6,
+    borderBottomRightRadius: 6,
+    borderLeftWidth: 0
+  },
+  pageButton: {
+    borderLeftWidth: 0,
+    borderRightWidth: 0
+  },
+  pageButtonActive: {
+    backgroundColor: '#3B3269',
+    borderColor: '#3B3269'
+  },
+  buttonDisabled: {
+    opacity: 0.5
+  },
+  buttonText: {
+    fontSize: 18,
+    fontWeight: '500'
+    // Color applied via theme
+  },
+  pageButtonText: {
+    fontSize: 14,
+    fontWeight: '500'
+    // Color applied via theme
+  },
+  pageButtonTextActive: {
+    fontWeight: '600'
+    // Color applied via theme
+  },
+  ellipsis: {
+    minWidth: 40,
+    height: 40,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderLeftWidth: 0,
+    borderRightWidth: 0
+    // Colors applied via theme
+  },
+  ellipsisText: {
+    fontSize: 14,
+    fontWeight: '500'
+    // Color applied via theme
+  }
+});
+export default Pagination;

package/dist/esm/native/THEME_EXAMPLE.js

@@ -0,0 +1,112 @@
+/**
+ * Theme Configuration Examples
+ * 
+ * This file shows how to customize the Media Gallery theme for React Native
+ */
+
+import { createTheme } from './theme';
+
+// Example 1: Light Mode (Default)
+export var lightTheme = createTheme({
+  mode: 'light'
+});
+
+// Example 2: Dark Mode
+export var darkTheme = createTheme({
+  mode: 'dark'
+});
+
+// Example 3: Custom Brand Colors
+export var customBrandTheme = createTheme({
+  mode: 'light',
+  colors: {
+    primary: '#FF6B6B',
+    // Custom red primary
+    tabActive: '#FF6B6B',
+    tabIndicator: '#FF6B6B',
+    uploadBorder: '#FF6B6B',
+    uploadIconBackground: '#FF6B6B',
+    paginationButtonActive: '#FF6B6B'
+  },
+  bottomSheetHeight: 0.85 // 85% of screen height
+});
+
+// Example 4: Full Customization
+export var fullyCustomTheme = createTheme({
+  mode: 'dark',
+  colors: {
+    // Primary colors
+    primary: '#6366F1',
+    primaryLight: '#818CF8',
+    primaryDark: '#4F46E5',
+    // Backgrounds
+    background: '#0F172A',
+    backgroundSecondary: '#1E293B',
+    backgroundTertiary: '#334155',
+    // Text
+    text: '#F1F5F9',
+    textSecondary: '#CBD5E1',
+    textTertiary: '#94A3B8',
+    // Tabs
+    tabActive: '#6366F1',
+    tabInactive: '#94A3B8',
+    tabIndicator: '#6366F1',
+    tabBackground: '#0F172A',
+    // Borders
+    border: '#334155',
+    borderLight: '#1E293B',
+    borderDark: '#475569',
+    // Overlay
+    overlay: 'rgba(0, 0, 0, 0.8)',
+    // Pagination
+    paginationBackground: '#1E293B',
+    paginationButton: '#0F172A',
+    paginationButtonActive: '#6366F1',
+    paginationText: '#CBD5E1',
+    paginationTextActive: '#FFFFFF',
+    paginationBorder: '#334155',
+    // Upload
+    uploadBorder: '#6366F1',
+    uploadBackground: '#0F172A',
+    uploadIconBackground: '#6366F1',
+    uploadText: '#F1F5F9',
+    // Items
+    itemBackground: '#1E293B',
+    itemShadow: '#000000',
+    // Loading
+    loadingBackground: '#1E293B',
+    loadingText: '#94A3B8'
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    xxl: 24
+  },
+  radius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    xxl: 20
+  },
+  bottomSheetHeight: 0.92 // 92% of screen height
+});
+
+// Usage in your component:
+/*
+import { MediaPopup, MediaApiService } from '@tradly/asset'
+import { darkTheme } from './theme'
+
+<MediaPopup
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={handleSelect}
+  apiService={apiService}
+  picker={picker}
+  theme={darkTheme} // Pass your custom theme
+  bottomSheetHeight={0.9} // Or override height directly
+/>
+*/