@tradly/asset 1.0.14 → 1.0.16

package/README.md

@@ -236,11 +236,130 @@ You can customize picker options based on the accept type:
 ### React Native UI Differences
 
 - **Bottom Sheet**: Media gallery opens as a bottom sheet (slides up from
-  bottom)
+  bottom) - defaults to 90% of screen height, customizable
 - **Native Styling**: Uses React Native `StyleSheet` instead of Tailwind CSS
 - **Components**: Uses React Native primitives (`View`, `Text`,
   `TouchableOpacity`, `FlatList`, `Image`)
 - **File Upload**: Requires `picker` prop to be provided
+- **Theme System**: Full theme support for easy dark/light mode customization
+
+### React Native Theme & Customization
+
+The package includes a comprehensive theme system that makes it easy to
+customize colors, spacing, and styling for dark/light mode.
+
+#### Basic Theme Usage
+
+```jsx
+import { MediaPopup, MediaApiService } from "@tradly/asset";
+import { createTheme } from "@tradly/asset/native/theme";
+
+// Use dark mode
+const darkTheme = createTheme({ mode: "dark" });
+
+// Use light mode (default)
+const lightTheme = createTheme({ mode: "light" });
+
+<MediaPopup
+	apiService={apiService}
+	picker={picker}
+	theme={darkTheme} // Pass your theme
+	bottomSheetHeight={0.9} // 90% of screen (default), customize as needed
+/>;
+```
+
+#### Custom Theme Colors
+
+```jsx
+import { createTheme } from "@tradly/asset/native/theme";
+
+const customTheme = createTheme({
+  mode: "dark", // or "light"
+  colors: {
+    // Primary colors
+    primary: "#6366F1",
+    tabActive: "#6366F1",
+    tabIndicator: "#6366F1",
+
+    // Backgrounds
+    background: "#0F172A",
+    backgroundSecondary: "#1E293B",
+
+    // Text
+    text: "#F1F5F9",
+    textSecondary: "#CBD5E1",
+
+    // Tabs
+    tabActive: "#6366F1",
+    tabInactive: "#94A3B8",
+    tabBackground: "#0F172A",
+
+    // Borders
+    border: "#334155",
+
+    // Pagination
+    paginationButtonActive: "#6366F1",
+    paginationTextActive: "#FFFFFF",
+
+    // Upload button
+    uploadBorder: "#6366F1",
+    uploadIconBackground: "#6366F1",
+
+    // And many more...
+  },
+  bottomSheetHeight: 0.92, // 92% of screen height
+});
+
+<MediaPopup theme={customTheme} ... />
+```
+
+#### Available Theme Colors
+
+All colors are customizable via the theme object:
+
+- **Primary**: `primary`, `primaryLight`, `primaryDark`
+- **Backgrounds**: `background`, `backgroundSecondary`, `backgroundTertiary`
+- **Text**: `text`, `textSecondary`, `textTertiary`, `textInverse`
+- **Borders**: `border`, `borderLight`, `borderDark`
+- **Tabs**: `tabActive`, `tabInactive`, `tabIndicator`, `tabBackground`
+- **Pagination**: `paginationBackground`, `paginationButton`,
+  `paginationButtonActive`, `paginationText`, `paginationTextActive`,
+  `paginationBorder`
+- **Upload**: `uploadBorder`, `uploadBackground`, `uploadIconBackground`,
+  `uploadText`
+- **Items**: `itemBackground`, `itemShadow`
+- **Loading**: `loadingBackground`, `loadingText`
+- **Overlay**: `overlay`
+
+#### Customizing Bottom Sheet Height
+
+```jsx
+<MediaPopup
+	bottomSheetHeight={0.85} // 85% of screen height
+	// or via theme:
+	theme={createTheme({ bottomSheetHeight: 0.92 })}
+/>
+```
+
+#### Individual Component Styling
+
+You can also override individual component styles:
+
+```jsx
+<MediaPopup
+	theme={darkTheme}
+	// Override specific styles
+	containerStyle={{ padding: 24 }}
+	headerStyle={{ paddingBottom: 16 }}
+	titleStyle={{ fontSize: 28 }}
+	closeButtonStyle={{ padding: 12 }}
+	tabListStyle={{ paddingHorizontal: 8 }}
+	tabButtonStyle={{ paddingVertical: 16 }}
+	tabButtonActiveStyle={{ backgroundColor: "#F0F0F0" }}
+	tabButtonTextActiveStyle={{ fontWeight: "700" }}
+	// ... and many more style props
+/>
+```
 
 ## Advanced Usage
 
@@ -341,18 +460,20 @@ apiService.setBearerToken("new-bearer-token");
 
 ### MediaPopup Props
 
-| Prop            | Type              | Default           | Description                                         | Platform     |
-| --------------- | ----------------- | ----------------- | --------------------------------------------------- | ------------ |
-| `isOpen`        | `boolean`         | `false`           | Controls popup visibility                           | Web & Native |
-| `onClose`       | `function`        | -                 | Callback when popup closes                          | Web & Native |
-| `onSelect`      | `function`        | -                 | Callback when media is selected                     | Web & Native |
-| `currentData`   | `any`             | -                 | Currently selected media data                       | Web & Native |
-| `options`       | `array`           | `['image']`       | Media types to show: `'image'`, `'video'`, `'file'` | Web & Native |
-| `apiService`    | `MediaApiService` | -                 | **Required**: API service instance                  | Web & Native |
-| `onError`       | `function`        | -                 | Error handler callback                              | Web & Native |
-| `title`         | `string`          | `'Media Gallery'` | Popup title                                         | Web & Native |
-| `picker`        | `function`        | -                 | **Required for React Native**: File picker function | Native only  |
-| `pickerOptions` | `function`        | -                 | Optional: Function to generate picker options       | Native only  |
+| Prop                | Type              | Default           | Description                                         | Platform     |
+| ------------------- | ----------------- | ----------------- | --------------------------------------------------- | ------------ |
+| `isOpen`            | `boolean`         | `false`           | Controls popup visibility                           | Web & Native |
+| `onClose`           | `function`        | -                 | Callback when popup closes                          | Web & Native |
+| `onSelect`          | `function`        | -                 | Callback when media is selected                     | Web & Native |
+| `currentData`       | `any`             | -                 | Currently selected media data                       | Web & Native |
+| `options`           | `array`           | `['image']`       | Media types to show: `'image'`, `'video'`, `'file'` | Web & Native |
+| `apiService`        | `MediaApiService` | -                 | **Required**: API service instance                  | Web & Native |
+| `onError`           | `function`        | -                 | Error handler callback                              | Web & Native |
+| `title`             | `string`          | `'Media Gallery'` | Popup title                                         | Web & Native |
+| `picker`            | `function`        | -                 | **Required for React Native**: File picker function | Native only  |
+| `pickerOptions`     | `function`        | -                 | Optional: Function to generate picker options       | Native only  |
+| `theme`             | `object`          | -                 | Theme object for colors/spacing (see Theme docs)    | Native only  |
+| `bottomSheetHeight` | `number`          | `0.9`             | Bottom sheet height (0.85 = 85%, 0.9 = 90%, etc.)   | Native only  |
 
 **React Native Required Props:**
 
@@ -430,19 +551,55 @@ using style props:
 
 **Available Style Props (React Native):**
 
+**MediaPopup:**
+
+- `overlayStyle` - Overlay/backdrop
 - `containerStyle` - Main popup container
 - `headerStyle` - Header container
 - `titleStyle` - Title text
 - `closeButtonStyle` - Close button
+- `closeButtonTextStyle` - Close button text/icon
+
+**MediaTab:**
+
+- `containerStyle` - Tab container
 - `tabListStyle` - Tab list
 - `tabButtonStyle` - Base tab button
 - `tabButtonActiveStyle` - Active tab button
 - `tabButtonInactiveStyle` - Inactive tab button
+- `tabButtonTextStyle` - Base tab text
+- `tabButtonTextActiveStyle` - Active tab text
+- `tabButtonTextInactiveStyle` - Inactive tab text
+- `tabIndicatorStyle` - Tab indicator line
+- `tabPanelStyle` - Tab panel container
+
+**ImagesGallery/VideosGallery:**
+
+- `containerStyle` - Gallery container
 - `gridStyle` - Media grid layout
-- `imageItemStyle` - Image item styles
-- `videoItemStyle` - Video item styles
+- `imageItemStyle` / `videoItemStyle` - Media item styles
 - `paginationContainerStyle` - Pagination container
 
+**FileUpload:**
+
+- `containerStyle` - Upload container
+- `buttonStyle` - Upload button
+- `iconContainerStyle` - Icon container
+- `titleStyle` - Upload title text
+- `loadingStyle` - Loading state container
+
+**Pagination:**
+
+- `containerStyle` - Pagination container
+- `navStyle` - Navigation container
+- `previousButtonStyle` - Previous button
+- `nextButtonStyle` - Next button
+- `pageButtonStyle` - Page number button
+- `pageButtonActiveStyle` - Active page button
+- `pageButtonTextStyle` - Page button text
+- `pageButtonTextActiveStyle` - Active page text
+- `ellipsisStyle` - Ellipsis container
+
 ### Full Styling Guide
 
 For detailed styling documentation with examples, see

package/dist/esm/index.js

@@ -21,6 +21,9 @@ export { MediaTab, ImagesGallery, VideosGallery, FileUpload };
 // Export API service
 export { MediaApiService };
 
+// Export React Native theme utilities
+export { createTheme, defaultTheme } from "./native/theme";
+
 // Export default as MediaPopup for convenience
 export default MediaPopup;
 

package/dist/esm/native/FileUpload.native.js

@@ -11,6 +11,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useState } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Alert, ActivityIndicator } from "react-native";
 import { CameraIcon } from "./Icons.native";
+import { defaultTheme } from "./theme";
 
 /**
  * FileUpload component for React Native
@@ -78,6 +79,8 @@ var FileUpload = function FileUpload(_ref) {
     onUploadError = _ref.onUploadError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
     buttonStyle = _ref.buttonStyle,
     iconContainerStyle = _ref.iconContainerStyle,
@@ -227,12 +230,18 @@ var FileUpload = function FileUpload(_ref) {
   }();
   if (isLoading) {
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.loadingContainer, loadingStyle],
+      style: [styles.loadingContainer, {
+        backgroundColor: theme.colors.loadingBackground,
+        borderRadius: theme.radius.md
+      }, loadingStyle],
       children: [/*#__PURE__*/_jsx(ActivityIndicator, {
         size: "small",
-        color: "#3B3269"
+        color: theme.colors.primary
       }), /*#__PURE__*/_jsx(Text, {
-        style: styles.loadingText,
+        style: [styles.loadingText, {
+          color: theme.colors.loadingText,
+          marginTop: theme.spacing.sm
+        }],
         children: "Uploading..."
       })]
     });
@@ -241,13 +250,26 @@ var FileUpload = function FileUpload(_ref) {
     style: [styles.container, containerStyle],
     children: /*#__PURE__*/_jsxs(TouchableOpacity, {
       onPress: handlePickFile,
-      style: [styles.button, buttonStyle],
+      style: [styles.button, {
+        borderColor: theme.colors.uploadBorder,
+        backgroundColor: theme.colors.uploadBackground,
+        borderRadius: theme.radius.md
+      }, buttonStyle],
       disabled: isLoading,
       children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.iconContainer, iconContainerStyle],
+        style: [styles.iconContainer, {
+          backgroundColor: theme.colors.uploadIconBackground,
+          borderRadius: theme.radius.xl,
+          marginBottom: theme.spacing.sm,
+          padding: theme.spacing.md
+        }, iconContainerStyle],
         children: /*#__PURE__*/_jsx(CameraIcon, {})
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.title, titleStyle],
+        style: [styles.title, {
+          color: theme.colors.uploadText,
+          marginTop: theme.spacing.sm,
+          fontSize: theme.typography.caption.fontSize
+        }, titleStyle],
         children: title
       })]
     })
@@ -265,34 +287,24 @@ var styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     borderWidth: 1,
-    borderColor: "#3B3269",
-    borderStyle: "dashed",
-    borderRadius: 8,
-    backgroundColor: "#FFFFFF"
+    borderStyle: "dashed"
+    // Colors applied via theme
   },
   iconContainer: {
-    padding: 10,
-    backgroundColor: "#3B3269",
-    borderRadius: 20,
-    marginBottom: 8
+    // Colors and spacing applied via theme
   },
   title: {
-    fontSize: 14,
-    color: "#000000",
-    marginTop: 8
+    // Colors and typography applied via theme
   },
   loadingContainer: {
     width: "100%",
     height: 160,
     justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#E5E5E5",
-    borderRadius: 8
+    alignItems: "center"
+    // Colors applied via theme
   },
   loadingText: {
-    marginTop: 8,
-    fontSize: 14,
-    color: "#666666"
+    // Colors applied via theme
   }
 });
 export default FileUpload;

package/dist/esm/native/MediaGallery.native.js

@@ -17,6 +17,7 @@ import { View, FlatList, Image, TouchableOpacity, StyleSheet, Dimensions } from
 import FileUpload from './FileUpload.native';
 import ImagesSkeleton from './ImagesSkeleton.native';
 import Pagination from './Pagination.native';
+import { defaultTheme } from './theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 var _Dimensions$get = Dimensions.get('window'),
   SCREEN_WIDTH = _Dimensions$get.width;
@@ -32,6 +33,8 @@ var ImagesGallery = function ImagesGallery(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
     gridStyle = _ref.gridStyle,
     imageItemStyle = _ref.imageItemStyle,
@@ -130,7 +133,8 @@ var ImagesGallery = function ImagesGallery(_ref) {
           apiService: apiService,
           onUploadError: onError,
           picker: picker,
-          pickerOptions: pickerOptions
+          pickerOptions: pickerOptions,
+          theme: theme
         })
       });
     }
@@ -143,7 +147,9 @@ var ImagesGallery = function ImagesGallery(_ref) {
       },
       style: [styles.imageItem, {
         width: ITEM_SIZE,
-        height: ITEM_SIZE
+        height: ITEM_SIZE,
+        backgroundColor: theme.colors.itemBackground,
+        shadowColor: theme.colors.itemShadow
       }, imageItemStyle],
       children: /*#__PURE__*/_jsx(Image, {
         source: {
@@ -171,13 +177,19 @@ var ImagesGallery = function ImagesGallery(_ref) {
       contentContainerStyle: [styles.grid, gridStyle],
       showsVerticalScrollIndicator: false,
       ListFooterComponent: total_count > 0 ? /*#__PURE__*/_jsx(View, {
-        style: [styles.paginationContainer, paginationContainerStyle],
+        style: [styles.paginationContainer, {
+          backgroundColor: theme.colors.paginationBackground,
+          paddingVertical: theme.spacing.lg,
+          paddingHorizontal: theme.spacing.sm,
+          marginTop: theme.spacing.sm
+        }, paginationContainerStyle],
         children: /*#__PURE__*/_jsx(Pagination, {
           nextPage: function nextPage(value) {
             return loadMedia(value);
           },
           pageCount: Math.ceil(total_count / 30),
-          current_page: currentPage
+          current_page: currentPage,
+          theme: theme
         })
       }) : null
     })
@@ -197,8 +209,6 @@ var styles = StyleSheet.create({
     margin: ITEM_MARGIN,
     borderRadius: 8,
     overflow: 'hidden',
-    backgroundColor: '#FFFFFF',
-    shadowColor: '#000',
     shadowOffset: {
       width: 0,
       height: 2
@@ -212,10 +222,7 @@ var styles = StyleSheet.create({
     height: '100%'
   },
   paginationContainer: {
-    paddingVertical: 16,
-    paddingHorizontal: 8,
-    backgroundColor: '#F5F5F5',
-    marginTop: 8
+    // Styles applied via theme
   }
 });
 export default ImagesGallery;

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

@@ -8,6 +8,7 @@ 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;
@@ -24,10 +25,18 @@ var MediaPopup = function MediaPopup(_ref) {
     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;
+    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];
@@ -66,18 +75,35 @@ var MediaPopup = function MediaPopup(_ref) {
     children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
       onPress: handleClose,
       children: /*#__PURE__*/_jsx(View, {
-        style: styles.overlay,
+        style: [styles.overlay, {
+          backgroundColor: currentTheme.colors.overlay
+        }, overlayStyle],
         children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
           children: /*#__PURE__*/_jsxs(Animated.View, {
-            style: [styles.container, containerStyle, {
+            style: [styles.container, {
+              backgroundColor: currentTheme.colors.background,
+              borderTopLeftRadius: currentTheme.radius.xxl,
+              borderTopRightRadius: currentTheme.radius.xxl,
+              height: SCREEN_HEIGHT * sheetHeight,
+              maxHeight: SCREEN_HEIGHT * sheetHeight,
+              padding: currentTheme.spacing.xl
+            }, containerStyle, {
               transform: [{
                 translateY: slideAnim
               }]
             }],
             children: [/*#__PURE__*/_jsxs(View, {
-              style: [styles.header, headerStyle],
+              style: [styles.header, {
+                borderBottomColor: currentTheme.colors.border,
+                marginBottom: currentTheme.spacing.lg,
+                paddingBottom: currentTheme.spacing.md
+              }, headerStyle],
               children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.title, titleStyle],
+                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,
@@ -88,7 +114,10 @@ var MediaPopup = function MediaPopup(_ref) {
                   left: 10,
                   right: 10
                 },
-                children: /*#__PURE__*/_jsx(CloseIcon, {})
+                children: /*#__PURE__*/_jsx(CloseIcon, {
+                  size: 24,
+                  color: currentTheme.colors.text
+                })
               })]
             }), /*#__PURE__*/_jsx(MediaTab, {
               imagePopup: isOpen,
@@ -99,7 +128,8 @@ var MediaPopup = function MediaPopup(_ref) {
               apiService: apiService,
               onError: onError,
               picker: picker,
-              pickerOptions: pickerOptions
+              pickerOptions: pickerOptions,
+              theme: currentTheme
             })]
           })
         })
@@ -110,16 +140,10 @@ var MediaPopup = function MediaPopup(_ref) {
 var styles = StyleSheet.create({
   overlay: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
     justifyContent: 'flex-end'
   },
   container: {
-    backgroundColor: '#FFFFFF',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    maxHeight: SCREEN_HEIGHT * 0.85,
-    minHeight: 200,
-    padding: 20,
+    width: '100%',
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -127,25 +151,22 @@ var styles = StyleSheet.create({
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
-    elevation: 5
+    elevation: 5,
+    overflow: 'hidden' // Ensure content doesn't overflow
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginBottom: 16,
-    paddingBottom: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5'
+    borderBottomWidth: 1
   },
   title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#000000'
+    flex: 1
   },
   closeButton: {
     padding: 8,
-    borderRadius: 20
+    borderRadius: 20,
+    marginLeft: 12
   }
 });
 export default MediaPopup;