@herca/rn-kit 0.1.69 → 0.1.70

package/src/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/src/Input/partials/InputFile/CardTrigger.tsx

@@ -0,0 +1,87 @@
+import { Image, StyleSheet, View } from 'react-native';
+import Button from '../../../Button/Button';
+import Typography from '../../../Typography/Typography';
+import Card from '../../../Ui/Card';
+import Center from '../../../Ui/Center';
+import Color from '../../../Color/Color';
+import { spacing } from '../../../styles/spacing';
+
+interface Props {
+  title: string;
+  description: string;
+  btnSelect?: string;
+  onPress?: () => void;
+  hasError?: boolean;
+  hint?: string;
+}
+
+export default function CardTrigger({
+  title,
+  description,
+  btnSelect,
+  onPress,
+  hint,
+  hasError,
+}: Props) {
+  return (
+    <Card style={styles.containerInput}>
+      <Center style={styles.centerInput}>
+        <Image source={require('../../assets/input-file.png')} />
+        <View style={spacing.gap[4]}>
+          <Typography
+            variant="t1"
+            weight="semibold"
+            color={Color.gray[500]}
+            center
+          >
+            {title}
+          </Typography>
+          {hint && (
+            <Typography
+              variant="t3"
+              weight="regular"
+              color={hasError ? Color.danger[500] : Color.gray[500]}
+              center
+            >
+              {hint}
+            </Typography>
+          )}
+          <Typography variant="t3" weight="regular" color={Color.gray[500]}>
+            {description}
+          </Typography>
+        </View>
+        <Button
+          color="primary"
+          title={btnSelect}
+          size="small"
+          onPress={onPress}
+        />
+      </Center>
+    </Card>
+  );
+}
+
+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,
+  },
+});

package/src/Input/partials/InputFile/CardTriggerSmall.tsx

@@ -0,0 +1,120 @@
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Card from '../../../Ui/Card';
+import Color from '../../../Color/Color';
+import Typography from '../../../Typography/Typography';
+import Button from '../../../Button/Button';
+import { layouting } from '../../../styles/layouting';
+import ItemPreview from './ItemPreview';
+import { spacing } from '../../../styles/spacing';
+
+interface Props {
+  title?: string;
+  textButton?: string;
+  files: any[];
+  onChooseFile?: () => void;
+  onPreview?: (file: any) => void;
+  onReplace?: (index: number) => void;
+  onDelete?: (index: number) => void;
+}
+
+export default function CardTriggerSmall({
+  title = 'Upload File',
+  textButton = 'Choose File',
+  onChooseFile,
+  files,
+  onDelete,
+  onPreview,
+  onReplace,
+}: Props) {
+  const Component = files?.length === 0 ? View : TouchableOpacity;
+
+  return (
+    <View style={[layouting.flex.row, spacing.gap[8]]}>
+      <Card
+        style={[styles.card, files.length === 0 ? layouting.flex.grow : {}]}
+        backgroundColor={Color?.gray[50]}
+        borderColor={Color?.gray[200]}
+      >
+        <Component
+          style={[
+            styles.titleWrapper,
+            files.length > 0 ? layouting.flex.col : {},
+            files.length > 0 ? spacing.gap[6] : {},
+          ]}
+          {...(files?.length > 0 && { onPress: onChooseFile })}
+        >
+          <Image
+            source={require('../../assets/input-file.png')}
+            style={files?.length === 0 ? styles.image : styles.imageSmall}
+          />
+          <Typography
+            variant={files?.length === 0 ? 't1' : 't3'}
+            weight={files?.length === 0 ? 'semibold' : 'regular'}
+            color={Color.gray[600]}
+          >
+            {title}
+          </Typography>
+        </Component>
+
+        {files.length === 0 && (
+          <Button
+            title={textButton}
+            color="primary"
+            size="small"
+            onPress={onChooseFile}
+          />
+        )}
+      </Card>
+
+      {files.length > 0 && (
+        <ScrollView
+          style={[layouting.flex[1]]}
+          contentContainerStyle={[spacing.gap[8], layouting.align.center]}
+          horizontal
+        >
+          {files.map((file, index) => (
+            <ItemPreview
+              variant="small"
+              key={index}
+              index={index}
+              file={file}
+              onPress={() => onPreview?.(file)}
+              onDelete={() => onDelete?.(index)}
+              onReplace={() => onReplace?.(index)}
+            />
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+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,
+  },
+});

package/src/Input/partials/InputFile/ItemPicker.tsx

@@ -0,0 +1,46 @@
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  type TouchableOpacityProps,
+} from 'react-native';
+import Icon, { type IconNameProps } from '../../../Icon';
+import Typography from '../../../Typography/Typography';
+import Color from '../../../Color/Color';
+
+interface Props extends TouchableOpacityProps {
+  title: string;
+  description: string;
+  icon: IconNameProps;
+}
+
+export default function ItemPicker({
+  title,
+  description,
+  icon,
+  ...props
+}: Props) {
+  return (
+    <TouchableOpacity {...props}>
+      <View style={styles.containerListItem}>
+        <Icon name={icon} color={Color.primary[1000]} />
+        <View>
+          <Typography variant="t2" weight="semibold" color={Color.gray[800]}>
+            {title}
+          </Typography>
+          <Typography variant="t2" color={Color.gray[600]}>
+            {description}
+          </Typography>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  containerListItem: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+  },
+});

package/src/Input/partials/InputFile/ItemPreview.tsx

@@ -0,0 +1,182 @@
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Card from '../../../Ui/Card';
+import Color from '../../../Color/Color';
+import Typography from '../../../Typography/Typography';
+import Icon from '../../../Icon';
+
+interface Props {
+  file: any;
+  onPress: () => void;
+  index: number;
+  onReplace: (index: number) => void;
+  onDelete: (index: number) => void;
+  variant?: 'default' | 'small';
+}
+
+export default function ItemPreview({
+  file,
+  onPress,
+  index,
+  onDelete,
+  onReplace,
+  variant = 'default',
+}: Props) {
+  const Wrapper = variant === 'default' ? Card : View;
+
+  return (
+    <Wrapper>
+      <TouchableOpacity
+        onPress={onPress}
+        style={styles.containerPreview}
+        activeOpacity={0.7}
+      >
+        <View style={styles.containerListItem}>
+          {file.type.startsWith('image') && (
+            <View
+              style={
+                (variant === 'small' ? styles.previewImageSmall : {},
+                variant === 'small' && file.error
+                  ? styles.previewImageError
+                  : {})
+              }
+            >
+              {variant === 'small' && (
+                <BtnIcon onPress={() => onDelete(index)} />
+              )}
+
+              <Image source={{ uri: file.uri }} style={styles.previewImage} />
+            </View>
+          )}
+
+          {!file.type.startsWith('image') && (
+            <View
+              style={[
+                styles.previewImage,
+                variant === 'small' ? styles.previewImageSmall : {},
+                variant === 'small' && file.error
+                  ? styles.previewImageError
+                  : {},
+              ]}
+            >
+              {variant === 'small' && (
+                <BtnIcon onPress={() => onDelete(index)} />
+              )}
+
+              <Icon
+                name={file.type === 'application/pdf' ? 'pdf-file' : 'Document'}
+                size={file.type === 'application/pdf' ? 32 : 24}
+                color={Color.primary[1000]}
+              />
+            </View>
+          )}
+
+          {variant === 'default' && (
+            <View style={styles.fileDetails}>
+              <Typography
+                variant="t1"
+                weight="semibold"
+                color={Color.gray[600]}
+                numberOfLines={1}
+              >
+                {file.name || `Image_${index + 1}`}
+              </Typography>
+
+              <Typography variant="t2" weight="regular" color={Color.gray[600]}>
+                {((file?.size ?? file?.fileSize ?? 0) / (1024 * 1024)).toFixed(
+                  2
+                )}
+                MB
+              </Typography>
+            </View>
+          )}
+        </View>
+
+        {/* action default */}
+        {variant === 'default' && (
+          <View style={styles.action}>
+            {file.error && (
+              <Icon
+                name="exclamation-triangle"
+                color={Color.danger[500]}
+                size={20}
+              />
+            )}
+
+            <TouchableOpacity onPress={() => onReplace(index)}>
+              <Icon name="rotate-right" size={18} color={Color.gray[700]} />
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={() => onDelete(index)}>
+              <Icon name="Times" size={12} color={Color.gray[700]} />
+            </TouchableOpacity>
+          </View>
+        )}
+      </TouchableOpacity>
+    </Wrapper>
+  );
+}
+
+const BtnIcon = ({ onPress }: { onPress: () => any }) => {
+  return (
+    <TouchableOpacity
+      style={styles.actionDelete}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <Icon name="times-new" color="white" size={15} />
+    </TouchableOpacity>
+  );
+};
+
+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,
+  },
+});