@herca/rn-kit 0.1.40 → 0.1.42

package/lib/module/Input/README_INPUT_FILE.md

@@ -0,0 +1,132 @@
+# 📂 InputFile Component
+
+Komponen `InputFile` digunakan untuk mengunggah, menampilkan, mengganti, menghapus, serta memberi label pada dokumen atau gambar di aplikasi React Native.
+Mendukung **camera**, **gallery**, dan **document picker** dengan tampilan preview dan konfirmasi aksi.
+
+---
+
+## ✨ Fitur
+- Upload file dari **kamera**, **galeri**, atau **dokumen perangkat**.
+- Preview file (gambar atau dokumen).
+- Mendukung **multiple file upload**.
+- Ganti file (replace) atau hapus file dengan konfirmasi.
+- Tambahkan label/nama dokumen secara manual.
+- Konfigurasi teks modal (custom title, description, button).
+- Callback `onChange` untuk mengirim data file terbaru ke parent.
+
+---
+
+## 📦 Dependencies
+Komponen ini membutuhkan beberapa library:
+- [`@react-native-documents/picker`](https://github.com/react-native-documents/picker)
+- [`@react-native-documents/viewer`](https://github.com/react-native-documents/viewer)
+- [`react-native-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker)
+
+---
+
+## 🚀 Penggunaan
+
+```tsx
+import InputFile from "@/components/Input/InputFile";
+import { useState } from "react";
+
+export default function ExampleScreen() {
+  const [files, setFiles] = useState<any[]>([]);
+
+  return (
+    <InputFile
+      title="Upload Dokumen"
+      description="Format file: JPG, PNG, PDF"
+      btnChooseFileText="Pilih File"
+      multiple={true}
+      value={files}
+      useChangeLabel={true}
+      modalPickFileText={{
+        title: "Pilih Sumber",
+        description: "Unggah dokumen atau ambil foto",
+        camera: { title: "Kamera", description: "Ambil foto langsung" },
+        gallery: { title: "Galeri", description: "Pilih gambar dari galeri" },
+        document: { title: "Dokumen", description: "Pilih file dari perangkat" },
+      }}
+      modalDeleteText={{
+        title: "Hapus File?",
+        description: "Apakah kamu yakin ingin menghapus file ini?",
+        confirmBtn: {
+          confirm: "Ya, Hapus",
+          cancel: "Batal",
+        },
+      }}
+      onChange={(newFiles) => setFiles(newFiles)}
+    />
+  );
+}
+```
+
+---
+
+## ⚙️ 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.        |
+
+---
+
+## 🔤 Tipe Tambahan
+
+### `ModalOption`
+```ts
+interface ModalOption {
+  title?: string;
+  description?: string;
+}
+```
+
+### `modalPickFileText`
+```ts
+interface modalPickFileText {
+  title?: string;
+  description?: string;
+  camera?: ModalOption;
+  gallery?: ModalOption;
+  document?: ModalOption;
+}
+```
+
+### `modalDeleteText`
+```ts
+interface ModalOption {
+  title?: string;
+  description?: string;
+  confirmBtn?: {
+    confirm?: string;
+    cancel?: string;
+  };
+}
+```
+
+---
+
+## 📸 Preview UI
+- **Card input awal** → tombol pilih file + icon ilustrasi.
+- **Preview file** → menampilkan nama, ukuran, icon (atau thumbnail jika image).
+- **Aksi file**:
+  - 🔄 Replace
+  - ❌ Delete
+  - 👁 Preview (buka dokumen dengan `viewDocument`)
+
+---
+
+## 🛠 Catatan
+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.

package/lib/module/Ui/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","jsx","_jsx","Container","children","style","styles","container","create","paddingHorizontal","paddingVertical"],"sourceRoot":"../../../src","sources":["Ui/Container.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEhD,eAAe,SAASC,SAASA,CAAC;EAAEC,QAAQ;EAAEC;AAAW,CAAC,EAAE;EAC1D,oBAAOH,IAAA,CAACF,IAAI;IAACK,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEF,KAAK,IAAIA,KAAK,CAAE;IAAAD,QAAA,EAAEA;EAAQ,CAAO,CAAC;AAC3E;AAEA,MAAME,MAAM,GAAGP,UAAU,CAACS,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","jsx","_jsx","Container","children","style","styles","container","create","paddingHorizontal","paddingVertical"],"sourceRoot":"../../../src","sources":["Ui/Container.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOhE,eAAe,SAASC,SAASA,CAAC;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAE;EAC5D,oBAAOH,IAAA,CAACF,IAAI;IAACK,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEF,KAAK,IAAIA,KAAK,CAAE;IAAAD,QAAA,EAAEA;EAAQ,CAAO,CAAC;AAC3E;AAEA,MAAME,MAAM,GAAGP,UAAU,CAACS,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,QAAQ,CAAC;AAyJvD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,QAAQ,CAAC;AA+JvD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/typescript/src/Icon/icons/ExclamationTriangle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const ExclamationTriangle: React.FC<Props>;
+export default ExclamationTriangle;
+//# sourceMappingURL=ExclamationTriangle.d.ts.map

package/lib/typescript/src/Icon/icons/ExclamationTriangle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExclamationTriangle.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/ExclamationTriangle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWxC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/typescript/src/Icon/icons/PdfFile.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    bgColor?: string;
+    cornerColor?: string;
+    textColor?: string;
+    style?: object;
+}
+declare const PdfFile: React.FC<Props>;
+export default PdfFile;
+//# sourceMappingURL=PdfFile.d.ts.map

package/lib/typescript/src/Icon/icons/PdfFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdfFile.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/PdfFile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0B5B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/typescript/src/Icon/icons/RotateRight.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const RotateRight: React.FC<Props>;
+export default RotateRight;
+//# sourceMappingURL=RotateRight.d.ts.map

package/lib/typescript/src/Icon/icons/RotateRight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotateRight.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/RotateRight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWhC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/Icon/type.d.ts

@@ -1,5 +1,5 @@
 import { type ViewStyle } from 'react-native';
-export type IconNameProps = 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times' | 'Plus' | 'Minus' | 'Bell' | 'file-list-check' | 'file-text' | 'bookmark-user' | 'folder-clock' | 'home-fill' | 'home-outline' | 'user-circle-outline' | 'user-circle-fill' | 'clipboard-list-check' | 'clipboard-list' | 'Megaphone' | 'Scanner' | 'Clock' | 'clock-outline' | 'clipboard-list-check-outline' | 'box-outline' | 'Box' | 'plus-square' | 'at-sign' | 'briefcase-outline' | 'edit-square-outline' | 'globe-earth' | 'lock-fill' | 'logo-herca-hris' | 'question-circle-outline' | 'shield-fill' | 'Users' | 'Bold' | 'Italic' | 'UnderLine' | 'settings-slider' | 'location-pin-fill' | 'discount-fill' | 'rotate-square-fill' | 'copy-fill' | 'copy-text-fill' | 'shield-checked-fill' | 'calendar-edit' | 'info-circle-outline' | 'Tag' | 'Tool' | 'user-edit' | 'Bolt' | 'bolt-slash' | 'image-plus' | 'Trash' | 'time-forward' | 'Signature' | 'Money' | 'info-circle-fill' | 'Flag' | 'Coupon' | 'more-vertical' | 'whatsapp-fill';
+export type IconNameProps = 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'exclamation-triangle' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'pdf-file' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times' | 'Plus' | 'Minus' | 'Bell' | 'file-list-check' | 'file-text' | 'bookmark-user' | 'folder-clock' | 'home-fill' | 'home-outline' | 'user-circle-outline' | 'user-circle-fill' | 'clipboard-list-check' | 'clipboard-list' | 'Megaphone' | 'Scanner' | 'Clock' | 'clock-outline' | 'clipboard-list-check-outline' | 'box-outline' | 'Box' | 'plus-square' | 'at-sign' | 'briefcase-outline' | 'edit-square-outline' | 'globe-earth' | 'lock-fill' | 'logo-herca-hris' | 'question-circle-outline' | 'shield-fill' | 'Users' | 'Bold' | 'Italic' | 'UnderLine' | 'settings-slider' | 'location-pin-fill' | 'discount-fill' | 'rotate-square-fill' | 'rotate-right' | 'copy-fill' | 'copy-text-fill' | 'shield-checked-fill' | 'calendar-edit' | 'info-circle-outline' | 'Tag' | 'Tool' | 'user-edit' | 'Bolt' | 'bolt-slash' | 'image-plus' | 'Trash' | 'time-forward' | 'Signature' | 'Money' | 'info-circle-fill' | 'Flag' | 'Coupon' | 'more-vertical' | 'whatsapp-fill';
 export interface IconProps {
     name: IconNameProps;
     size?: number;

package/lib/typescript/src/Icon/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,iBAAiB,GACjB,WAAW,GACX,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,OAAO,GACP,eAAe,GACf,8BAA8B,GAC9B,aAAa,GACb,KAAK,GACL,aAAa,GACb,SAAS,GACT,mBAAmB,GACnB,qBAAqB,GACrB,aAAa,GACb,WAAW,GACX,iBAAiB,GACjB,yBAAyB,GACzB,aAAa,GACb,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,GACpB,WAAW,GACX,gBAAgB,GAChB,qBAAqB,GACrB,eAAe,GACf,qBAAqB,GACrB,KAAK,GACL,MAAM,GACN,WAAW,GACX,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,cAAc,GACd,WAAW,GACX,OAAO,GACP,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,eAAe,GACf,eAAe,CAAC;AACpB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,sBAAsB,GACtB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,UAAU,GACV,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,iBAAiB,GACjB,WAAW,GACX,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,OAAO,GACP,eAAe,GACf,8BAA8B,GAC9B,aAAa,GACb,KAAK,GACL,aAAa,GACb,SAAS,GACT,mBAAmB,GACnB,qBAAqB,GACrB,aAAa,GACb,WAAW,GACX,iBAAiB,GACjB,yBAAyB,GACzB,aAAa,GACb,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,WAAW,GACX,gBAAgB,GAChB,qBAAqB,GACrB,eAAe,GACf,qBAAqB,GACrB,KAAK,GACL,MAAM,GACN,WAAW,GACX,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,cAAc,GACd,WAAW,GACX,OAAO,GACP,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,eAAe,GACf,eAAe,CAAC;AACpB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}

package/lib/typescript/src/Input/InputFile.d.ts

@@ -1,11 +1,31 @@
+export interface ModalOption {
+    title?: string;
+    description?: string;
+}
+export interface modalPickFileText {
+    title?: string;
+    description?: string;
+    camera?: ModalOption;
+    gallery?: ModalOption;
+    document?: ModalOption;
+}
 type InputFileProps = {
     title?: string;
     description?: string;
-    maxFileSize?: number;
     accept?: string[];
     multiple?: boolean;
-    onChange?: (files: any[]) => void;
+    onChange?: (files: any) => void;
+    value?: any[];
+    modalPickFileText?: modalPickFileText;
+    useChangeLabel?: boolean;
+    btnChooseFileText?: string;
+    modalDeleteText?: ModalOption & {
+        confirmBtn?: {
+            confirm?: string;
+            cancel?: string;
+        };
+    };
 };
-export default function InputFile({ title, description, maxFileSize, accept, multiple, onChange, }: InputFileProps): import("react/jsx-runtime").JSX.Element;
+export default function InputFile({ title, description, accept, btnChooseFileText, multiple, value, modalPickFileText, modalDeleteText, useChangeLabel, onChange, }: InputFileProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=InputFile.d.ts.map

package/lib/typescript/src/Input/InputFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputFile.d.ts","sourceRoot":"","sources":["../../../../src/Input/InputFile.tsx"],"names":[],"mappings":"AAgBA,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAqB,EACrB,WAAqD,EACrD,WAAe,EACf,MAAuD,EACvD,QAAgB,EAChB,QAAQ,GACT,EAAE,cAAc,2CAkPhB"}
+{"version":3,"file":"InputFile.d.ts","sourceRoot":"","sources":["../../../../src/Input/InputFile.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AACD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,CAAC;CACxB;AAED,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,WAAW,GAAG;QAC9B,UAAU,CAAC,EAAE;YACX,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAqB,EACrB,WAAqD,EACrD,MAAuD,EACvD,iBAAiC,EACjC,QAAgB,EAChB,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,cAAsB,EACtB,QAAQ,GACT,EAAE,cAAc,2CA+WhB"}

package/lib/typescript/src/Ui/Container.d.ts

@@ -1,2 +1,8 @@
-export default function Container({ children, style }: any): import("react/jsx-runtime").JSX.Element;
+import { type ViewStyle } from 'react-native';
+interface Props {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+export default function Container({ children, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Container.d.ts.map

package/lib/typescript/src/Ui/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/Ui/Container.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,2CAEzD"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/Ui/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,2CAE3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/Icon/Icon.tsx

@@ -82,6 +82,9 @@ import InfoCircleFill from './icons/InfoCircleFill';
 import Flag from './icons/Flag';
 import Coupon from './icons/Coupon';
 import MoreVertical from './icons/MoreVertical';
+import ExclamationTriangle from './icons/ExclamationTriangle';
+import PdfFile from './icons/PdfFile';
+import RotateRight from './icons/RotateRight';
 
 const icons: Record<
   IconNameProps,
@@ -168,6 +171,9 @@ const icons: Record<
   'Flag': Flag,
   'Coupon': Coupon,
   'more-vertical': MoreVertical,
+  'exclamation-triangle': ExclamationTriangle,
+  'pdf-file': PdfFile,
+  'rotate-right': RotateRight,
 };
 
 const Icon: React.FC<IconProps> = ({

package/src/Icon/README.md

@@ -129,3 +129,6 @@ export default function App() {
 - Flag
 - Coupon
 - more-vertical
+- exclamation-triangle
+- pdf-file
+- rotate-right

package/src/Icon/icons/ExclamationTriangle.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ExclamationTriangle: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={style}>
+    <Path
+      d="M14.4046 11.4345L9.99996 3.197C9.14662 1.601 6.85396 1.601 5.99996 3.197L1.59533 11.4345C0.812667 12.8985 1.87536 14.6664 3.53869 14.6664H12.4612C14.1239 14.6664 15.1872 12.8978 14.4046 11.4345ZM7.49996 6.6664C7.49996 6.3904 7.72396 6.1664 7.99996 6.1664C8.27596 6.1664 8.49996 6.3904 8.49996 6.6664V9.33307C8.49996 9.60907 8.27596 9.83307 7.99996 9.83307C7.72396 9.83307 7.49996 9.60907 7.49996 9.33307V6.6664ZM8.0133 11.9997C7.6453 11.9997 7.34322 11.7011 7.34322 11.3331C7.34322 10.9651 7.63863 10.6664 8.00663 10.6664H8.0133C8.38197 10.6664 8.67997 10.9651 8.67997 11.3331C8.67997 11.7011 8.3813 11.9997 8.0133 11.9997Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ExclamationTriangle;

package/src/Icon/icons/PdfFile.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  bgColor?: string;
+  cornerColor?: string;
+  textColor?: string;
+  style?: object;
+}
+
+const PdfFile: React.FC<Props> = ({
+  size = 24,
+  style,
+  bgColor = '#F04438',
+  cornerColor = '#FF8689',
+  textColor = '#fff',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 44 44" fill="none" style={style}>
+    <Path
+      d="M8.5957 10.8281C8.5957 7.12609 11.5968 4.125 15.2988 4.125H25.2488L35.4058 14.6875V33.1719C35.4058 36.8739 32.4047 39.875 28.7027 39.875H15.2988C11.5968 39.875 8.5957 36.8739 8.5957 33.1719V10.8281Z"
+      fill={bgColor}
+    />
+    <Path d="M25.25 14.6875V4.125L35.4062 14.6875H25.25Z" fill={cornerColor} />
+    <Path
+      d="M16.5114 25.9497C17.2466 25.9497 17.7968 26.1097 18.1617 26.4297C18.5294 26.7498 18.7132 27.2047 18.7132 27.7945C18.7132 28.059 18.6748 28.3129 18.5981 28.5562C18.5241 28.7995 18.4011 29.0164 18.2292 29.2068C18.0599 29.3973 17.8338 29.548 17.5508 29.6591C17.2704 29.7702 16.924 29.8257 16.5114 29.8257H16.071V31.7499H14.5039V25.9497H16.5114ZM16.4756 27.2153H16.071V28.5483H16.3804C16.5153 28.5483 16.641 28.5258 16.7573 28.4808C16.8737 28.4332 16.9663 28.3578 17.035 28.2547C17.1064 28.1489 17.1422 28.0087 17.1422 27.8342C17.1422 27.6517 17.0879 27.5036 16.9795 27.3898C16.8711 27.2735 16.7031 27.2153 16.4756 27.2153Z"
+      fill={textColor}
+    />
+    <Path
+      d="M24.3985 28.7268C24.3985 29.4012 24.2728 29.962 24.0216 30.4089C23.7703 30.8559 23.4159 31.1918 22.9584 31.4166C22.5034 31.6388 21.9679 31.7499 21.3516 31.7499H19.4751V25.9497H21.4825C22.1067 25.9497 22.6357 26.0568 23.0694 26.2711C23.5032 26.4853 23.8325 26.7987 24.0573 27.2113C24.2847 27.6239 24.3985 28.1291 24.3985 28.7268ZM22.7719 28.7823C22.7719 28.4306 22.7243 28.1396 22.6291 27.9095C22.5365 27.6768 22.3963 27.5036 22.2085 27.3898C22.0207 27.2735 21.784 27.2153 21.4984 27.2153H21.0422V30.4645H21.3913C21.8673 30.4645 22.2165 30.3269 22.4386 30.0519C22.6608 29.7742 22.7719 29.351 22.7719 28.7823Z"
+      fill={textColor}
+    />
+    <Path
+      d="M26.8226 31.7499H25.2794V25.9497H28.7071V27.2073H26.8226V28.3142H28.5603V29.5718H26.8226V31.7499Z"
+      fill={textColor}
+    />
+  </Svg>
+);
+
+export default PdfFile;

package/src/Icon/icons/RotateRight.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const RotateRight: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={style}>
+    <Path
+      d="M14.6663 2.66699V6.00033C14.6663 6.36833 14.3683 6.66699 13.9997 6.66699H10.6663C10.2977 6.66699 9.99967 6.36833 9.99967 6.00033C9.99967 5.63233 10.2977 5.33366 10.6663 5.33366H12.6063C11.6683 3.71033 9.92434 2.66699 7.99967 2.66699C5.05901 2.66699 2.66634 5.05966 2.66634 8.00033C2.66634 10.941 5.05901 13.3337 7.99967 13.3337C10.0383 13.3337 11.8684 12.1983 12.7757 10.3703C12.939 10.0409 13.3403 9.90499 13.6689 10.0697C13.9989 10.2337 14.1337 10.6337 13.9697 10.9631C12.8357 13.2477 10.5477 14.6663 7.99967 14.6663C4.32367 14.6663 1.33301 11.6757 1.33301 7.99967C1.33301 4.32367 4.32367 1.33301 7.99967 1.33301C10.135 1.33301 12.0977 2.35638 13.333 4.00505V2.66699C13.333 2.29899 13.631 2.00033 13.9997 2.00033C14.3683 2.00033 14.6663 2.29899 14.6663 2.66699Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default RotateRight;

package/src/Icon/type.tsx

@@ -12,11 +12,13 @@ export type IconNameProps =
   | 'Document'
   | 'Calendar'
   | 'ExclamationMark'
+  | 'exclamation-triangle'
   | 'Download'
   | 'x-circle'
   | 'StickyNote'
   | 'RadioButton'
   | 'Pdf'
+  | 'pdf-file'
   | 'ArrowBackAlt'
   | 'ArrowForwardAlt'
   | 'ArrowDown'
@@ -64,6 +66,7 @@ export type IconNameProps =
   | 'location-pin-fill'
   | 'discount-fill'
   | 'rotate-square-fill'
+  | 'rotate-right'
   | 'copy-fill'
   | 'copy-text-fill'
   | 'shield-checked-fill'