@tradly/asset 1.0.12 → 1.0.14

package/README.md

@@ -10,9 +10,10 @@ videos, files) with Tradly authentication support.
 - 📁 Upload and browse files
 - 🔐 Tradly authentication support
 - 🎨 Customizable UI
-- 📱 Responsive design
+- 📱 Responsive design (Web) + Native mobile support (React Native)
 - 🔄 Pagination support
 - ⚡ Lightweight and performant
+- 🌐 **Cross-platform**: Works on Web (React) and Mobile (React Native)
 
 ## Installation
 
@@ -24,20 +25,33 @@ yarn add @tradly/asset
 
 ## Peer Dependencies
 
-This package requires the following peer dependencies:
+### Web (React)
 
 - `react` (>=16.8.0)
 - `react-dom` (>=16.8.0)
-- `@headlessui/react` (^1.7.0) - for Tab components
 - `axios` (^0.24.0) - for API calls
 
+### React Native
+
+- `react` (>=16.8.0)
+- `react-native` (>=0.60.0)
+- `axios` (^0.24.0) - for API calls
+- **File Picker Library** (choose one):
+     - `react-native-image-picker` - Recommended for React Native CLI
+     - `expo-image-picker` - For Expo projects
+     - Any other picker library that returns `{ uri, type, fileName }` format
+
 **Note:**
 
 - All pagination logic is built-in, no external pagination library needed!
 - No Tradly SDK dependency - uses direct API calls
+- **React Native**: File picker is configurable - you choose which library to
+  use
 
 ## Basic Usage
 
+### Web (React)
+
 ```jsx
 import React, { useState } from "react";
 import { MediaPopup, MediaApiService } from "@tradly/asset";
@@ -80,6 +94,154 @@ function MyComponent() {
 }
 ```
 
+### React Native
+
+```jsx
+import React, { useState } from "react";
+import { View, Button } from "react-native";
+import { MediaPopup, MediaApiService } from "@tradly/asset";
+import { launchImageLibrary } from "react-native-image-picker";
+
+function MyComponent() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [selectedMedia, setSelectedMedia] = useState(null);
+
+	const apiService = new MediaApiService({
+		authKey: "your-tradly-auth-key",
+		bearerToken: "your-bearer-token",
+		environment: "dev", // or "production"
+	});
+
+	const handleSelect = (mediaUrl) => {
+		setSelectedMedia(mediaUrl);
+		setIsOpen(false);
+	};
+
+	// Configure file picker - REQUIRED for React Native
+	const picker = (options) => {
+		return new Promise((resolve) => {
+			launchImageLibrary(options, (response) => {
+				resolve(response.assets || []);
+			});
+		});
+	};
+
+	return (
+		<View>
+			<Button
+				title="Open Media Gallery"
+				onPress={() => setIsOpen(true)}
+			/>
+
+			<MediaPopup
+				isOpen={isOpen}
+				onClose={() => setIsOpen(false)}
+				onSelect={handleSelect}
+				options={["image", "video"]}
+				apiService={apiService}
+				picker={picker} // REQUIRED: Your file picker function
+			/>
+		</View>
+	);
+}
+```
+
+## React Native Setup
+
+### File Picker Configuration
+
+React Native requires you to provide a file picker function. The package
+supports any picker library that returns files in the format
+`{ uri, type, fileName }`.
+
+#### Option 1: Using react-native-image-picker
+
+```bash
+npm install react-native-image-picker
+# or
+yarn add react-native-image-picker
+```
+
+```jsx
+import { launchImageLibrary } from "react-native-image-picker";
+
+<MediaPopup
+	picker={(options) => {
+		return new Promise((resolve) => {
+			launchImageLibrary(options, (response) => {
+				if (response.didCancel) {
+					resolve([]);
+					return;
+				}
+				resolve(response.assets || []);
+			});
+		});
+	}}
+	apiService={apiService}
+	// ... other props
+/>;
+```
+
+#### Option 2: Using expo-image-picker
+
+```bash
+npx expo install expo-image-picker
+```
+
+```jsx
+import * as ImagePicker from "expo-image-picker";
+
+<MediaPopup
+	picker={async (options) => {
+		const result = await ImagePicker.launchImageLibraryAsync({
+			mediaTypes:
+				options.mediaType === "photo"
+					? ImagePicker.MediaTypeOptions.Images
+					: options.mediaType === "video"
+					? ImagePicker.MediaTypeOptions.Videos
+					: ImagePicker.MediaTypeOptions.All,
+			allowsMultipleSelection: options.allowsMultiple,
+			quality: options.quality,
+		});
+
+		if (result.canceled) {
+			return [];
+		}
+
+		return result.assets || [];
+	}}
+	apiService={apiService}
+	// ... other props
+/>;
+```
+
+#### Option 3: Custom Picker Options
+
+You can customize picker options based on the accept type:
+
+```jsx
+<MediaPopup
+	picker={yourPickerFunction}
+	pickerOptions={(accept) => ({
+		mediaType: accept?.includes("image") ? "photo" : "video",
+		quality: 0.9,
+		allowsMultiple: true,
+		// Add any other options your picker library supports
+	})}
+	apiService={apiService}
+	// ... other props
+/>
+```
+
+### React Native UI Differences
+
+- **Bottom Sheet**: Media gallery opens as a bottom sheet (slides up from
+  bottom)
+- **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
+
 ## Advanced Usage
 
 ### Upload Functionality
@@ -179,19 +341,31 @@ apiService.setBearerToken("new-bearer-token");
 
 ### MediaPopup Props
 
-| Prop          | Type              | Default           | Description                                         |
-| ------------- | ----------------- | ----------------- | --------------------------------------------------- |
-| `isOpen`      | `boolean`         | `false`           | Controls popup visibility                           |
-| `onClose`     | `function`        | -                 | Callback when popup closes                          |
-| `onSelect`    | `function`        | -                 | Callback when media is selected                     |
-| `currentData` | `any`             | -                 | Currently selected media data                       |
-| `options`     | `array`           | `['image']`       | Media types to show: `'image'`, `'video'`, `'file'` |
-| `apiService`  | `MediaApiService` | -                 | **Required**: API service instance                  |
-| `onError`     | `function`        | -                 | Error handler callback                              |
-| `title`       | `string`          | `'Media Gallery'` | Popup title                                         |
+| 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  |
+
+**React Native Required Props:**
+
+- `picker`: A function that accepts options and returns a Promise resolving to
+  an array of file objects
+     - Each file object should have:
+       `{ uri: string, type?: string, fileName?: string }`
+     - Example: `picker={(options) => launchImageLibrary(options, callback)}`
 
 ## Styling
 
+### Web (React)
+
 This package uses Tailwind CSS classes and supports full customization at every
 component level. All components accept `className` props that allow you to
 override default styles.
@@ -237,6 +411,38 @@ override default styles.
 **Individual Components:** You can also style individual components when using
 them separately. See `STYLING_GUIDE.md` for complete documentation.
 
+### React Native
+
+React Native components use `StyleSheet` for styling. You can customize styles
+using style props:
+
+```jsx
+<MediaPopup
+	apiService={apiService}
+	picker={picker}
+	// Customize styles
+	containerStyle={{ backgroundColor: "#F5F5F5" }}
+	headerStyle={{ padding: 20 }}
+	titleStyle={{ fontSize: 28, color: "#000" }}
+	// ... other props
+/>
+```
+
+**Available Style Props (React Native):**
+
+- `containerStyle` - Main popup container
+- `headerStyle` - Header container
+- `titleStyle` - Title text
+- `closeButtonStyle` - Close button
+- `tabListStyle` - Tab list
+- `tabButtonStyle` - Base tab button
+- `tabButtonActiveStyle` - Active tab button
+- `tabButtonInactiveStyle` - Inactive tab button
+- `gridStyle` - Media grid layout
+- `imageItemStyle` - Image item styles
+- `videoItemStyle` - Video item styles
+- `paginationContainerStyle` - Pagination container
+
 ### Full Styling Guide
 
 For detailed styling documentation with examples, see
@@ -270,6 +476,8 @@ For detailed styling documentation with examples, see
 
 ### All Media Types
 
+**Web:**
+
 ```jsx
 <MediaPopup
 	isOpen={isOpen}
@@ -280,6 +488,36 @@ For detailed styling documentation with examples, see
 />
 ```
 
+**React Native:**
+
+```jsx
+<MediaPopup
+	isOpen={isOpen}
+	onClose={() => setIsOpen(false)}
+	onSelect={handleSelect}
+	options={["image", "video", "file"]}
+	apiService={apiService}
+	picker={picker} // Required
+/>
+```
+
+## Platform-Specific Notes
+
+### Web (React)
+
+- Uses `react-dom` for portal rendering
+- Tailwind CSS for styling
+- HTML file input for file selection
+- Canvas API for image compression
+
+### React Native
+
+- Uses `Modal` component for bottom sheet
+- React Native `StyleSheet` for styling
+- Requires file picker library (configurable)
+- Uses `FlatList` for efficient media rendering
+- Supports both iOS and Android
+
 ## Development
 
 To develop or modify this package:
@@ -290,6 +528,12 @@ npm install
 npm run dev
 ```
 
+**Note:** The package automatically detects the platform and uses the
+appropriate components:
+
+- Web bundlers will use `.web.jsx` files
+- React Native bundlers (Metro) will use `.native.jsx` files
+
 ## License
 
 MIT

package/dist/components/FileUpload.js

@@ -1,252 +1,13 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Icons = require("./Icons");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
-function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-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; } // Helper: compress image on the client before upload
-// - Downscale to fit within maxWidth/maxHeight.
-// - Convert raster images (JPEG/PNG, etc.) to WebP for better compression.
-// - Skip SVG (vector) to avoid degradation.
-var compressImage = function compressImage(file) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? 1600 : _ref$maxWidth,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
-    _ref$quality = _ref.quality,
-    quality = _ref$quality === void 0 ? 1 : _ref$quality,
-    _ref$convertToWebp = _ref.convertToWebp,
-    convertToWebp = _ref$convertToWebp === void 0 ? true : _ref$convertToWebp;
-  return new Promise(function (resolve) {
-    // Non-image or SVG: skip compression to avoid losing vector quality
-    if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
-      resolve(file);
-      return;
-    }
-    var img = new Image();
-    img.onload = function () {
-      var width = img.width,
-        height = img.height;
-
-      // If the image is already small, keep it as-is
-      if (width <= maxWidth && height <= maxHeight) {
-        resolve(file);
-        return;
-      }
-      var scale = Math.min(maxWidth / width, maxHeight / height);
-      var targetWidth = Math.round(width * scale);
-      var targetHeight = Math.round(height * scale);
-      var canvas = document.createElement("canvas");
-      canvas.width = targetWidth;
-      canvas.height = targetHeight;
-      var ctx = canvas.getContext("2d");
-      if (!ctx) {
-        resolve(file);
-        return;
-      }
-      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
-
-      // Prefer WebP for raster images to reduce size (where supported)
-      // Keep original type for GIF to avoid breaking animation.
-      var isRaster = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/png" || file.type === "image/webp" || file.type === "image/heic" || file.type === "image/heif";
-      var targetType = convertToWebp && isRaster && file.type !== "image/gif" ? "image/webp" : file.type;
-      canvas.toBlob(function (blob) {
-        if (!blob) {
-          resolve(file);
-          return;
-        }
-        var compressedFile = new File([blob], file.name, {
-          type: targetType,
-          lastModified: Date.now()
-        });
-        resolve(compressedFile);
-      }, targetType, quality);
-    };
-    img.onerror = function () {
-      resolve(file);
-    };
-    var reader = new FileReader();
-    reader.onload = function (event) {
-      var _event$target;
-      img.src = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
-    };
-    reader.onerror = function () {
-      return resolve(file);
-    };
-    reader.readAsDataURL(file);
-  });
-};
-var FileUpload = function FileUpload(_ref2) {
-  var loadMedia = _ref2.loadMedia,
-    accept = _ref2.accept,
-    title = _ref2.title,
-    apiService = _ref2.apiService,
-    onUploadStart = _ref2.onUploadStart,
-    onUploadComplete = _ref2.onUploadComplete,
-    onUploadError = _ref2.onUploadError,
-    className = _ref2.className,
-    buttonClassName = _ref2.buttonClassName,
-    iconContainerClassName = _ref2.iconContainerClassName,
-    titleClassName = _ref2.titleClassName,
-    loadingClassName = _ref2.loadingClassName;
-  var _useState = (0, _react.useState)([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    files = _useState2[0],
-    setFiles = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isLoading = _useState4[0],
-    setISLoading = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    length = _useState6[0],
-    setLength = _useState6[1];
-
-  // Upload files
-  var uploadFiles = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fileList) {
-      var filesToUpload, uploadedUrls, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
-          case 0:
-            if (onUploadStart) {
-              onUploadStart(fileList);
-            }
-            setISLoading(true);
-            setLength(fileList.length);
-            _context.p = 1;
-            filesToUpload = fileList; // For image uploads, compress on the client before sending
-            if (!(accept && accept.includes("image"))) {
-              _context.n = 3;
-              break;
-            }
-            _context.n = 2;
-            return Promise.all(fileList.map(function (file) {
-              return compressImage(file, {
-                maxWidth: 1600,
-                maxHeight: 1600,
-                quality: 0.95,
-                convertToWebp: true
-              });
-            }));
-          case 2:
-            filesToUpload = _context.v;
-          case 3:
-            _context.n = 4;
-            return apiService.uploadMedia(filesToUpload, apiService.authKey);
-          case 4:
-            uploadedUrls = _context.v;
-            if (onUploadComplete) {
-              onUploadComplete(uploadedUrls);
-            }
-            setLength(0);
-            if (loadMedia) {
-              loadMedia();
-            }
-            _context.n = 6;
-            break;
-          case 5:
-            _context.p = 5;
-            _t = _context.v;
-            console.error("Upload error:", _t);
-            if (onUploadError) {
-              onUploadError(_t);
-            }
-          case 6:
-            _context.p = 6;
-            setISLoading(false);
-            return _context.f(6);
-          case 7:
-            return _context.a(2);
-        }
-      }, _callee, null, [[1, 5, 6, 7]]);
-    }));
-    return function uploadFiles(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-
-  // Default classes with customization support
-  var defaultContainerClass = "min-w-40 h-40";
-  var defaultButtonClass = "w-full h-full flex flex-col justify-center items-center text-sm border border-primary border-dashed rounded-lg hover:bg-gray-50 transition-colors";
-  var defaultIconContainerClass = "p-[10px] bg-primary rounded-full";
-  var defaultTitleClass = "mt-2";
-  var defaultLoadingClass = "flex items-center justify-center h-40 bg-gray-200 rounded-lg shadow-md animate-pulse";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: className || defaultContainerClass,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        required: true,
-        id: "media_select_".concat(files === null || files === void 0 ? void 0 : files.length),
-        type: "file",
-        className: "hidden",
-        accept: accept,
-        placeholder: "",
-        onChange: (/*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
-            var all_files;
-            return _regenerator().w(function (_context2) {
-              while (1) switch (_context2.n) {
-                case 0:
-                  e.stopPropagation();
-                  all_files = Array.from(e.target.files || []);
-                  if (!((all_files === null || all_files === void 0 ? void 0 : all_files.length) > 0)) {
-                    _context2.n = 1;
-                    break;
-                  }
-                  _context2.n = 1;
-                  return uploadFiles(all_files);
-                case 1:
-                  // Reset input
-                  e.target.value = "";
-                case 2:
-                  return _context2.a(2);
-              }
-            }, _callee2);
-          }));
-          return function (_x2) {
-            return _ref4.apply(this, arguments);
-          };
-        }()),
-        multiple: true
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        type: "button",
-        className: buttonClassName || defaultButtonClass,
-        onClick: function onClick() {
-          return document.getElementById("media_select_".concat(files === null || files === void 0 ? void 0 : files.length)).click();
-        },
-        disabled: isLoading,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: iconContainerClassName || defaultIconContainerClass,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: titleClassName || defaultTitleClass,
-          children: title
-        })]
-      })]
-    }), isLoading && Array.from({
-      length: length
-    }).map(function (_, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: loadingClassName || defaultLoadingClass,
-        children: ["File Uploading... ", index + 1, "/", length]
-      }, index);
-    })]
-  });
-};
-var _default = exports.default = FileUpload;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _FileUpload.default;
+  }
+});
+var _FileUpload = _interopRequireDefault(require("../web/FileUpload.web"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/FileUpload.native.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _FileUpload.default;
+  }
+});
+var _FileUpload = _interopRequireDefault(require("../native/FileUpload.native"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Icons.js

@@ -3,37 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CloseIcon = exports.CameraIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var CloseIcon = exports.CloseIcon = function CloseIcon(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? 'w-8 h-8' : _ref$className;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    strokeWidth: "1.5",
-    stroke: "currentColor",
-    className: className,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M6 18L18 6M6 6l12 12"
-    })
+var _Icons = require("../web/Icons.web");
+Object.keys(_Icons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Icons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Icons[key];
+    }
   });
-};
-var CameraIcon = exports.CameraIcon = function CameraIcon() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-    width: "22",
-    height: "18",
-    viewBox: "0 0 22 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M7.75033 0.166672L5.76783 2.33334H2.33366C1.14199 2.33334 0.166992 3.30834 0.166992 4.50001V17.5C0.166992 18.6917 1.14199 19.6667 2.33366 19.6667H19.667C20.8587 19.6667 21.8337 18.6917 21.8337 17.5V4.50001C21.8337 3.30834 20.8587 2.33334 19.667 2.33334H16.2328L14.2503 0.166672H7.75033ZM11.0003 16.4167C8.01033 16.4167 5.58366 13.99 5.58366 11C5.58366 8.01001 8.01033 5.58334 11.0003 5.58334C13.9903 5.58334 16.417 8.01001 16.417 11C16.417 13.99 13.9903 16.4167 11.0003 16.4167Z",
-      fill: "white"
-    })
-  });
-};
+});

package/dist/components/Icons.native.js

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