@herca/rn-kit 0.1.69 → 0.1.71

package/lib/module/Input/README_INPUT_FILE.md

@@ -11,7 +11,8 @@ Mendukung **camera**, **gallery**, dan **document picker** dengan tampilan previ
 - Preview file (gambar atau dokumen).
 - Mendukung **multiple file upload**.
 - Ganti file (replace) atau hapus file dengan konfirmasi.
-- Tambahkan label/nama dokumen secara manual.
+- Tambahkan label/nama dokumen secara manual (hanya untuk variant `default`).
+- **2 Variant tampilan**: `default` (full) dan `small` (compact).
 - Konfigurasi teks modal (custom title, description, button).
 - Callback `onChange` untuk mengirim data file terbaru ke parent.
 
@@ -29,6 +30,8 @@ Komponen ini membutuhkan beberapa library:
 
 ## 🚀 Penggunaan
 
+### Variant Default (Full Features)
+
 ```tsx
 import InputFile from '@/components/Input/InputFile';
 import { useState } from 'react';
@@ -38,12 +41,19 @@ export default function ExampleScreen() {
 
   return (
     <InputFile
+      variant="default" // atau bisa dihilangkan (default)
       title="Upload Dokumen"
       description="Format file: JPG, PNG, PDF"
+      hint="Maksimal ukuran file 5MB"
+      hasError={false}
       btnChooseFileText="Pilih File"
       multiple={true}
       value={files}
       useChangeLabel={true}
+      changeLableProps={{
+        label: 'Nama Dokumen',
+        placeholder: 'Masukkan nama dokumen',
+      }}
       modalPickFileText={{
         title: 'Pilih Sumber',
         description: 'Unggah dokumen atau ambil foto',
@@ -68,23 +78,67 @@ export default function ExampleScreen() {
 }
 ```
 
+### Variant Small (Compact)
+
+```tsx
+import InputFile from '@/components/Input/InputFile';
+import { useState } from 'react';
+
+export default function ExampleScreen() {
+  const [files, setFiles] = useState<any[]>([]);
+
+  return (
+    <InputFile
+      variant="small"
+      title="Upload KTP"
+      btnChooseFileText="Pilih"
+      multiple={false}
+      value={files}
+      hasError={false}
+      onChange={(newFiles) => setFiles(newFiles)}
+      // ❌ description, hint, useChangeLabel, changeLableProps TIDAK BISA dipakai di variant small
+    />
+  );
+}
+```
+
 ---
 
 ## ⚙️ Props
 
-| Prop                | Tipe                              | Default                                          | Deskripsi                                                          |
-| ------------------- | --------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------ |
-| `title`             | `string`                          | `"Upload File"`                                  | Judul input file.                                                  |
-| `description`       | `string`                          | `"File harus berformat JPG, PNG dan PDF"`        | Deskripsi singkat tentang file yang diterima.                      |
-| `accept`            | `string[]`                        | `["application/pdf", "image/jpeg", "image/png"]` | Tipe MIME file yang diizinkan.                                     |
-| `multiple`          | `boolean`                         | `false`                                          | Jika `true`, memungkinkan memilih banyak file sekaligus.           |
-| `value`             | `any[]`                           | `[]`                                             | Daftar file yang sudah dipilih (state dari parent).                |
-| `onChange`          | `(files: any[]) => void`          | `undefined`                                      | Callback saat daftar file berubah (add, replace, delete).          |
-| `btnChooseFileText` | `string`                          | `"Choose File"`                                  | Label tombol untuk memilih file.                                   |
-| `modalPickFileText` | `ModalPickFileText` (lihat bawah) | `undefined`                                      | Teks kustom pada modal pemilihan sumber file.                      |
-| `modalDeleteText`   | `ModalOption & confirmBtn`        | `undefined`                                      | Teks kustom pada modal konfirmasi hapus file.                      |
-| `useChangeLabel`    | `boolean`                         | `false`                                          | Jika `true`, menampilkan input untuk memberi nama/label pada file. |
-| `changeLableProps`  | `ChangeLabelProps` (lihat bawah)  | `undefined`                                      | Teks kustom pada input text diatas preview file untuk              |
+### Base Props (Tersedia di Semua Variant)
+
+| Prop                | Tipe                              | Default                                          | Deskripsi                                                 |
+| ------------------- | --------------------------------- | ------------------------------------------------ | --------------------------------------------------------- |
+| `title`             | `string`                          | `"Upload File"`                                  | Judul input file.                                         |
+| `accept`            | `string[]`                        | `["application/pdf", "image/jpeg", "image/png"]` | Tipe MIME file yang diizinkan.                            |
+| `multiple`          | `boolean`                         | `false`                                          | Jika `true`, memungkinkan memilih banyak file sekaligus.  |
+| `value`             | `any[]`                           | `[]`                                             | Daftar file yang sudah dipilih (state dari parent).       |
+| `onChange`          | `(files: any[]) => void`          | `undefined`                                      | Callback saat daftar file berubah (add, replace, delete). |
+| `btnChooseFileText` | `string`                          | `"Choose File"`                                  | Label tombol untuk memilih file.                          |
+| `modalPickFileText` | `ModalPickFileText` (lihat bawah) | `undefined`                                      | Teks kustom pada modal pemilihan sumber file.             |
+| `modalDeleteText`   | `ModalOption & confirmBtn`        | `undefined`                                      | Teks kustom pada modal konfirmasi hapus file.             |
+| `hasError`          | `boolean`                         | `false`                                          | Menampilkan state error pada input.                       |
+
+### Variant-Specific Props
+
+#### Default Variant (`variant?: 'default'`)
+
+| Prop               | Tipe                             | Default                                   | Deskripsi                                                    |
+| ------------------ | -------------------------------- | ----------------------------------------- | ------------------------------------------------------------ |
+| `variant`          | `'default'`                      | `'default'`                               | Variant default dengan fitur lengkap.                        |
+| `description`      | `string`                         | `"File harus berformat JPG, PNG dan PDF"` | Deskripsi singkat tentang file yang diterima.                |
+| `hint`             | `string`                         | `undefined`                               | Teks hint tambahan di bawah input.                           |
+| `useChangeLabel`   | `boolean`                        | `false`                                   | Jika `true`, menampilkan input untuk memberi nama pada file. |
+| `changeLableProps` | `ChangeLabelProps` (lihat bawah) | `undefined`                               | Teks kustom pada input label di atas preview file.           |
+
+#### Small Variant (`variant: 'small'`)
+
+| Prop      | Tipe      | Default | Deskripsi                             |
+| --------- | --------- | ------- | ------------------------------------- |
+| `variant` | `'small'` | -       | Variant compact tanpa fitur tambahan. |
+
+> ⚠️ **Catatan**: Props `description`, `hint`, `useChangeLabel`, dan `changeLableProps` **TIDAK TERSEDIA** di variant `small`. TypeScript akan menampilkan error jika props ini digunakan dengan `variant: 'small'`.
 
 ---
 
@@ -99,7 +153,7 @@ interface ModalOption {
 }
 ```
 
-### `modalPickFileText`
+### `ModalPickFileText`
 
 ```ts
 interface ModalPickFileText {
@@ -111,20 +165,18 @@ interface ModalPickFileText {
 }
 ```
 
-### `modalDeleteText`
+### `ModalDeleteText`
 
 ```ts
-interface ModalOption {
-  title?: string;
-  description?: string;
+type ModalDeleteText = ModalOption & {
   confirmBtn?: {
     confirm?: string;
     cancel?: string;
   };
-}
+};
 ```
 
-### `changeLabelProps`
+### `ChangeLabelProps`
 
 ```ts
 interface ChangeLabelProps {
@@ -135,15 +187,81 @@ interface ChangeLabelProps {
 
 ---
 
-## 📸 Preview UI
+## 📐 Type Definitions
+
+```ts
+export interface ModalOption {
+  title?: string;
+  description?: string;
+}
+
+export interface ModalPickFileText {
+  title?: string;
+  description?: string;
+  camera?: ModalOption;
+  gallery?: ModalOption;
+  document?: ModalOption;
+}
+
+export interface ChangeLabelProps {
+  label?: string;
+  placeholder?: string;
+}
+
+type BaseInputFileProps = {
+  title?: string;
+  accept?: string[];
+  multiple?: boolean;
+  onChange?: (files: any) => void;
+  value?: any[];
+  modalPickFileText?: ModalPickFileText;
+  btnChooseFileText?: string;
+  modalDeleteText?: ModalOption & {
+    confirmBtn?: {
+      confirm?: string;
+      cancel?: string;
+    };
+  };
+  hasError?: boolean;
+};
+
+type DefaultVariantProps = BaseInputFileProps & {
+  variant?: 'default';
+  description?: string;
+  useChangeLabel?: boolean;
+  changeLableProps?: ChangeLabelProps;
+  hint?: string;
+};
+
+type SmallVariantProps = BaseInputFileProps & {
+  variant: 'small';
+  description?: never;
+  useChangeLabel?: never;
+  changeLableProps?: never;
+  hint?: never;
+};
+
+type InputFileProps = DefaultVariantProps | SmallVariantProps;
+```
+
+---
+
+### Variant Default
 
-- **Card input awal** → tombol pilih file + icon ilustrasi.
+- **Card input awal** → tombol pilih file + icon ilustrasi + description + hint.
 - **Preview file** → menampilkan nama, ukuran, icon (atau thumbnail jika image).
+- **Input label** (jika `useChangeLabel: true`) → input text untuk memberi nama dokumen.
 - **Aksi file**:
   - 🔄 Replace
   - ❌ Delete
   - 👁 Preview (buka dokumen dengan `viewDocument`)
 
+### Variant Small
+
+- **Compact card** → tombol pilih file dengan tampilan lebih ringkas.
+- **Preview file** → tampilan minimal tanpa label/hint tambahan.
+- **Aksi file**: sama seperti variant default (replace, delete, preview).
+
 ---
 
 ## 🛠 Catatan
@@ -151,3 +269,6 @@ interface ChangeLabelProps {
 1. Pastikan permission kamera & storage sudah diatur (Android/iOS).
 2. File hasil picker akan memiliki property standar (`uri`, `type`, `name`, `size`).
 3. Untuk **multiple upload**, `value` berupa array file yang akan dikelola oleh parent.
+4. **Variant `small`** cocok untuk form yang membutuhkan tampilan compact tanpa deskripsi dan hint.
+5. **Variant `default`** cocok untuk form yang membutuhkan instruksi detail dan fitur labeling dokumen.
+6. TypeScript akan memberikan error compile-time jika props yang tidak sesuai variant digunakan.

package/lib/module/Input/partials/InputFile/CardTrigger.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import { Image, StyleSheet, View } from 'react-native';
+import Button from "../../../Button/Button.js";
+import Typography from "../../../Typography/Typography.js";
+import Card from "../../../Ui/Card.js";
+import Center from "../../../Ui/Center.js";
+import Color from "../../../Color/Color.js";
+import { spacing } from "../../../styles/spacing.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function CardTrigger({
+  title,
+  description,
+  btnSelect,
+  onPress,
+  hint,
+  hasError
+}) {
+  return /*#__PURE__*/_jsx(Card, {
+    style: styles.containerInput,
+    children: /*#__PURE__*/_jsxs(Center, {
+      style: styles.centerInput,
+      children: [/*#__PURE__*/_jsx(Image, {
+        source: require('../../assets/input-file.png')
+      }), /*#__PURE__*/_jsxs(View, {
+        style: spacing.gap[4],
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "t1",
+          weight: "semibold",
+          color: Color.gray[500],
+          center: true,
+          children: title
+        }), hint && /*#__PURE__*/_jsx(Typography, {
+          variant: "t3",
+          weight: "regular",
+          color: hasError ? Color.danger[500] : Color.gray[500],
+          center: true,
+          children: hint
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "t3",
+          weight: "regular",
+          color: Color.gray[500],
+          children: description
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        title: btnSelect,
+        size: "small",
+        onPress: onPress
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 12
+  },
+  containerInput: {
+    borderStyle: 'dashed',
+    backgroundColor: Color.gray[50],
+    borderRadius: 16
+  },
+  centerInput: {
+    gap: 14
+  },
+  deleteFileContent: {
+    gap: 10
+  },
+  deleteFileCenter: {
+    alignItems: 'center',
+    gap: 4
+  },
+  previewWrapper: {
+    gap: 12
+  }
+});
+//# sourceMappingURL=CardTrigger.js.map

package/lib/module/Input/partials/InputFile/CardTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","StyleSheet","View","Button","Typography","Card","Center","Color","spacing","jsx","_jsx","jsxs","_jsxs","CardTrigger","title","description","btnSelect","onPress","hint","hasError","style","styles","containerInput","children","centerInput","source","require","gap","variant","weight","color","gray","center","danger","size","create","wrapper","borderStyle","backgroundColor","borderRadius","deleteFileContent","deleteFileCenter","alignItems","previewWrapper"],"sourceRoot":"../../../../../src","sources":["Input/partials/InputFile/CardTrigger.tsx"],"mappings":";;AAAA,SAASA,KAAK,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACtD,OAAOC,MAAM,MAAM,2BAAwB;AAC3C,OAAOC,UAAU,MAAM,mCAAgC;AACvD,OAAOC,IAAI,MAAM,qBAAkB;AACnC,OAAOC,MAAM,MAAM,uBAAoB;AACvC,OAAOC,KAAK,MAAM,yBAAsB;AACxC,SAASC,OAAO,QAAQ,4BAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAWlD,eAAe,SAASC,WAAWA,CAAC;EAClCC,KAAK;EACLC,WAAW;EACXC,SAAS;EACTC,OAAO;EACPC,IAAI;EACJC;AACK,CAAC,EAAE;EACR,oBACET,IAAA,CAACL,IAAI;IAACe,KAAK,EAAEC,MAAM,CAACC,cAAe;IAAAC,QAAA,eACjCX,KAAA,CAACN,MAAM;MAACc,KAAK,EAAEC,MAAM,CAACG,WAAY;MAAAD,QAAA,gBAChCb,IAAA,CAACV,KAAK;QAACyB,MAAM,EAAEC,OAAO,CAAC,6BAA6B;MAAE,CAAE,CAAC,eACzDd,KAAA,CAACV,IAAI;QAACkB,KAAK,EAAEZ,OAAO,CAACmB,GAAG,CAAC,CAAC,CAAE;QAAAJ,QAAA,gBAC1Bb,IAAA,CAACN,UAAU;UACTwB,OAAO,EAAC,IAAI;UACZC,MAAM,EAAC,UAAU;UACjBC,KAAK,EAAEvB,KAAK,CAACwB,IAAI,CAAC,GAAG,CAAE;UACvBC,MAAM;UAAAT,QAAA,EAELT;QAAK,CACI,CAAC,EACZI,IAAI,iBACHR,IAAA,CAACN,UAAU;UACTwB,OAAO,EAAC,IAAI;UACZC,MAAM,EAAC,SAAS;UAChBC,KAAK,EAAEX,QAAQ,GAAGZ,KAAK,CAAC0B,MAAM,CAAC,GAAG,CAAC,GAAG1B,KAAK,CAACwB,IAAI,CAAC,GAAG,CAAE;UACtDC,MAAM;UAAAT,QAAA,EAELL;QAAI,CACK,CACb,eACDR,IAAA,CAACN,UAAU;UAACwB,OAAO,EAAC,IAAI;UAACC,MAAM,EAAC,SAAS;UAACC,KAAK,EAAEvB,KAAK,CAACwB,IAAI,CAAC,GAAG,CAAE;UAAAR,QAAA,EAC9DR;QAAW,CACF,CAAC;MAAA,CACT,CAAC,eACPL,IAAA,CAACP,MAAM;QACL2B,KAAK,EAAC,SAAS;QACfhB,KAAK,EAAEE,SAAU;QACjBkB,IAAI,EAAC,OAAO;QACZjB,OAAO,EAAEA;MAAQ,CAClB,CAAC;IAAA,CACI;EAAC,CACL,CAAC;AAEX;AAEA,MAAMI,MAAM,GAAGpB,UAAU,CAACkC,MAAM,CAAC;EAC/BC,OAAO,EAAE;IACPT,GAAG,EAAE;EACP,CAAC;EACDL,cAAc,EAAE;IACde,WAAW,EAAE,QAAQ;IACrBC,eAAe,EAAE/B,KAAK,CAACwB,IAAI,CAAC,EAAE,CAAC;IAC/BQ,YAAY,EAAE;EAChB,CAAC;EACDf,WAAW,EAAE;IACXG,GAAG,EAAE;EACP,CAAC;EACDa,iBAAiB,EAAE;IACjBb,GAAG,EAAE;EACP,CAAC;EACDc,gBAAgB,EAAE;IAChBC,UAAU,EAAE,QAAQ;IACpBf,GAAG,EAAE;EACP,CAAC;EAEDgB,cAAc,EAAE;IACdhB,GAAG,EAAE;EACP;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Input/partials/InputFile/CardTriggerSmall.js

@@ -0,0 +1,86 @@
+"use strict";
+
+import { Image, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Card from "../../../Ui/Card.js";
+import Color from "../../../Color/Color.js";
+import Typography from "../../../Typography/Typography.js";
+import Button from "../../../Button/Button.js";
+import { layouting } from "../../../styles/layouting.js";
+import ItemPreview from "./ItemPreview.js";
+import { spacing } from "../../../styles/spacing.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function CardTriggerSmall({
+  title = 'Upload File',
+  textButton = 'Choose File',
+  onChooseFile,
+  files,
+  onDelete,
+  onPreview,
+  onReplace
+}) {
+  const Component = files?.length === 0 ? View : TouchableOpacity;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [layouting.flex.row, spacing.gap[8]],
+    children: [/*#__PURE__*/_jsxs(Card, {
+      style: [styles.card, files.length === 0 ? layouting.flex.grow : {}],
+      backgroundColor: Color?.gray[50],
+      borderColor: Color?.gray[200],
+      children: [/*#__PURE__*/_jsxs(Component, {
+        style: [styles.titleWrapper, files.length > 0 ? layouting.flex.col : {}, files.length > 0 ? spacing.gap[6] : {}],
+        ...(files?.length > 0 && {
+          onPress: onChooseFile
+        }),
+        children: [/*#__PURE__*/_jsx(Image, {
+          source: require('../../assets/input-file.png'),
+          style: files?.length === 0 ? styles.image : styles.imageSmall
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: files?.length === 0 ? 't1' : 't3',
+          weight: files?.length === 0 ? 'semibold' : 'regular',
+          color: Color.gray[600],
+          children: title
+        })]
+      }), files.length === 0 && /*#__PURE__*/_jsx(Button, {
+        title: textButton,
+        color: "primary",
+        size: "small",
+        onPress: onChooseFile
+      })]
+    }), files.length > 0 && /*#__PURE__*/_jsx(ScrollView, {
+      style: [layouting.flex[1]],
+      contentContainerStyle: [spacing.gap[8], layouting.align.center],
+      horizontal: true,
+      children: files.map((file, index) => /*#__PURE__*/_jsx(ItemPreview, {
+        variant: "small",
+        index: index,
+        file: file,
+        onPress: () => onPreview?.(file),
+        onDelete: () => onDelete?.(index),
+        onReplace: () => onReplace?.(index)
+      }, index))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  card: {
+    borderStyle: 'dashed',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flexShrink: 1
+  },
+  image: {
+    width: 48,
+    height: 48
+  },
+  imageSmall: {
+    width: 28,
+    height: 28
+  }
+});
+//# sourceMappingURL=CardTriggerSmall.js.map

package/lib/module/Input/partials/InputFile/CardTriggerSmall.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","ScrollView","StyleSheet","TouchableOpacity","View","Card","Color","Typography","Button","layouting","ItemPreview","spacing","jsx","_jsx","jsxs","_jsxs","CardTriggerSmall","title","textButton","onChooseFile","files","onDelete","onPreview","onReplace","Component","length","style","flex","row","gap","children","styles","card","grow","backgroundColor","gray","borderColor","titleWrapper","col","onPress","source","require","image","imageSmall","variant","weight","color","size","contentContainerStyle","align","center","horizontal","map","file","index","create","borderStyle","flexDirection","alignItems","justifyContent","flexShrink","width","height"],"sourceRoot":"../../../../../src","sources":["Input/partials/InputFile/CardTriggerSmall.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Input/partials/InputFile/ItemPicker.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon from "../../../Icon/index.js";
+import Typography from "../../../Typography/Typography.js";
+import Color from "../../../Color/Color.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ItemPicker({
+  title,
+  description,
+  icon,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    ...props,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.containerListItem,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: icon,
+        color: Color.primary[1000]
+      }), /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "t2",
+          weight: "semibold",
+          color: Color.gray[800],
+          children: title
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "t2",
+          color: Color.gray[600],
+          children: description
+        })]
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  containerListItem: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center'
+  }
+});
+//# sourceMappingURL=ItemPicker.js.map

package/lib/module/Input/partials/InputFile/ItemPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","TouchableOpacity","View","Icon","Typography","Color","jsx","_jsx","jsxs","_jsxs","ItemPicker","title","description","icon","props","children","style","styles","containerListItem","name","color","primary","variant","weight","gray","create","flexDirection","gap","alignItems"],"sourceRoot":"../../../../../src","sources":["Input/partials/InputFile/ItemPicker.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,gBAAgB,EAChBC,IAAI,QAEC,cAAc;AACrB,OAAOC,IAAI,MAA8B,wBAAe;AACxD,OAAOC,UAAU,MAAM,mCAAgC;AACvD,OAAOC,KAAK,MAAM,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQzC,eAAe,SAASC,UAAUA,CAAC;EACjCC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJ,GAAGC;AACE,CAAC,EAAE;EACR,oBACEP,IAAA,CAACN,gBAAgB;IAAA,GAAKa,KAAK;IAAAC,QAAA,eACzBN,KAAA,CAACP,IAAI;MAACc,KAAK,EAAEC,MAAM,CAACC,iBAAkB;MAAAH,QAAA,gBACpCR,IAAA,CAACJ,IAAI;QAACgB,IAAI,EAAEN,IAAK;QAACO,KAAK,EAAEf,KAAK,CAACgB,OAAO,CAAC,IAAI;MAAE,CAAE,CAAC,eAChDZ,KAAA,CAACP,IAAI;QAAAa,QAAA,gBACHR,IAAA,CAACH,UAAU;UAACkB,OAAO,EAAC,IAAI;UAACC,MAAM,EAAC,UAAU;UAACH,KAAK,EAAEf,KAAK,CAACmB,IAAI,CAAC,GAAG,CAAE;UAAAT,QAAA,EAC/DJ;QAAK,CACI,CAAC,eACbJ,IAAA,CAACH,UAAU;UAACkB,OAAO,EAAC,IAAI;UAACF,KAAK,EAAEf,KAAK,CAACmB,IAAI,CAAC,GAAG,CAAE;UAAAT,QAAA,EAC7CH;QAAW,CACF,CAAC;MAAA,CACT,CAAC;IAAA,CACH;EAAC,CACS,CAAC;AAEvB;AAEA,MAAMK,MAAM,GAAGjB,UAAU,CAACyB,MAAM,CAAC;EAC/BP,iBAAiB,EAAE;IACjBQ,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAE,CAAC;IACNC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Input/partials/InputFile/ItemPreview.js

@@ -0,0 +1,149 @@
+"use strict";
+
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Card from "../../../Ui/Card.js";
+import Color from "../../../Color/Color.js";
+import Typography from "../../../Typography/Typography.js";
+import Icon from "../../../Icon/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ItemPreview({
+  file,
+  onPress,
+  index,
+  onDelete,
+  onReplace,
+  variant = 'default'
+}) {
+  const Wrapper = variant === 'default' ? Card : View;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+      onPress: onPress,
+      style: styles.containerPreview,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.containerListItem,
+        children: [file.type.startsWith('image') && /*#__PURE__*/_jsxs(View, {
+          style: (variant === 'small' ? styles.previewImageSmall : {}, variant === 'small' && file.error ? styles.previewImageError : {}),
+          children: [variant === 'small' && /*#__PURE__*/_jsx(BtnIcon, {
+            onPress: () => onDelete(index)
+          }), /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: file.uri
+            },
+            style: styles.previewImage
+          })]
+        }), !file.type.startsWith('image') && /*#__PURE__*/_jsxs(View, {
+          style: [styles.previewImage, variant === 'small' ? styles.previewImageSmall : {}, variant === 'small' && file.error ? styles.previewImageError : {}],
+          children: [variant === 'small' && /*#__PURE__*/_jsx(BtnIcon, {
+            onPress: () => onDelete(index)
+          }), /*#__PURE__*/_jsx(Icon, {
+            name: file.type === 'application/pdf' ? 'pdf-file' : 'Document',
+            size: file.type === 'application/pdf' ? 32 : 24,
+            color: Color.primary[1000]
+          })]
+        }), variant === 'default' && /*#__PURE__*/_jsxs(View, {
+          style: styles.fileDetails,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "t1",
+            weight: "semibold",
+            color: Color.gray[600],
+            numberOfLines: 1,
+            children: file.name || `Image_${index + 1}`
+          }), /*#__PURE__*/_jsxs(Typography, {
+            variant: "t2",
+            weight: "regular",
+            color: Color.gray[600],
+            children: [((file?.size ?? file?.fileSize ?? 0) / (1024 * 1024)).toFixed(2), "MB"]
+          })]
+        })]
+      }), variant === 'default' && /*#__PURE__*/_jsxs(View, {
+        style: styles.action,
+        children: [file.error && /*#__PURE__*/_jsx(Icon, {
+          name: "exclamation-triangle",
+          color: Color.danger[500],
+          size: 20
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => onReplace(index),
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "rotate-right",
+            size: 18,
+            color: Color.gray[700]
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => onDelete(index),
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "Times",
+            size: 12,
+            color: Color.gray[700]
+          })
+        })]
+      })]
+    })
+  });
+}
+const BtnIcon = ({
+  onPress
+}) => {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: styles.actionDelete,
+    onPress: onPress,
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: "times-new",
+      color: "white",
+      size: 15
+    })
+  });
+};
+const styles = StyleSheet.create({
+  containerListItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flex: 1
+  },
+  previewImage: {
+    width: 48,
+    height: 48,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  containerPreview: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 8
+  },
+  fileDetails: {
+    justifyContent: 'center',
+    gap: 4,
+    flex: 1
+  },
+  action: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    flexShrink: 0
+  },
+  // small
+  previewImageSmall: {
+    borderWidth: 1,
+    borderColor: Color.gray[200],
+    borderRadius: 6,
+    position: 'relative'
+  },
+  previewImageError: {
+    borderColor: Color.danger[500]
+  },
+  actionDelete: {
+    position: 'absolute',
+    top: 1.5,
+    right: 1.5,
+    backgroundColor: Color.primary[1000],
+    zIndex: 1,
+    padding: 2,
+    borderRadius: 10
+  }
+});
+//# sourceMappingURL=ItemPreview.js.map

package/lib/module/Input/partials/InputFile/ItemPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","StyleSheet","TouchableOpacity","View","Card","Color","Typography","Icon","jsx","_jsx","jsxs","_jsxs","ItemPreview","file","onPress","index","onDelete","onReplace","variant","Wrapper","children","style","styles","containerPreview","activeOpacity","containerListItem","type","startsWith","previewImageSmall","error","previewImageError","BtnIcon","source","uri","previewImage","name","size","color","primary","fileDetails","weight","gray","numberOfLines","fileSize","toFixed","action","danger","actionDelete","create","flexDirection","alignItems","gap","flex","width","height","borderRadius","justifyContent","flexShrink","borderWidth","borderColor","position","top","right","backgroundColor","zIndex","padding"],"sourceRoot":"../../../../../src","sources":["Input/partials/InputFile/ItemPreview.tsx"],"mappings":"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","ignoreList":[]}