@herca/rn-kit 0.1.32 → 0.1.33

package/README.md

@@ -4,7 +4,7 @@ UI Kit untuk pengembangan aplikasi internal **HerCa**.
 
 Kit ini dirancang untuk mempercepat proses pengembangan antarmuka pengguna dengan pendekatan minimal terhadap penggunaan `style` manual. Beberapa komponen dibuat **fix dan konsisten** agar tampilan aplikasi memiliki nuansa yang seragam.
 
-> **Catatan:** Jika menggunakan UI Kit ini, **tidak disarankan untuk menambahkan style atau melakukan kustomisasi manual**.  
+> **Catatan:** Jika menggunakan UI Kit ini, **tidak disarankan untuk menambahkan style atau melakukan kustomisasi manual**.
 > Untuk kebutuhan kustomisasi, gunakan konfigurasi `Theme` yang telah disediakan.
 
 ---
@@ -107,6 +107,7 @@ Komponen untuk mengumpulkan input dari pengguna.
 - [Checkbox](./src/CheckBox/README_CHECKBOX.md)
 - [Checkbox List](./src/CheckBox/README_CHECKBOXLIST.md)
 - [Chip-(Select)](./src/Chip/README.md)
+- [ChipItem](./src/Chip/README_CHIP_ITEM.md)
 - [CounterButton](./src/CounterButton/README.md)
 - [DatePicker](./src/DatePicker/README_DATEPICKER.md)
 - [DropDown](./src/DropDown/README.md)
@@ -142,7 +143,7 @@ Komponen untuk menyembunyikan atau menampilkan konten.
 
 ---
 
-### 🔹 4. Feedback 
+### 🔹 4. Feedback
 
 Komponen untuk memberikan umpan balik atau informasi kepada pengguna.
 
@@ -169,6 +170,7 @@ Komponen untuk menampilkan informasi atau elemen visual.
 - [List](./src/List/README.md)
 - [Timeline](./src/Timeline/README.md)
 - [Typography](./src/Typography/README.md)
+- [Skeleton](./src/Skeleton/README.md)
 
 ---
 
@@ -184,4 +186,4 @@ Silakan baca panduan kontribusi pada [CONTRIBUTING.md](CONTRIBUTING.md) untuk me
 
 ## 📄 Lisensi
 
-MIT License
+MIT License

package/lib/module/Chip/README_CHIP_ITEM.md

@@ -0,0 +1,73 @@
+# 📦 Komponen `ChipItem` – React Native
+
+Komponen `ChipItem` merupakan komponen presentasional dalam bentuk "chip" atau "pill" yang digunakan sebagai bagian dari list filter/select menggunakan UI gaya chip, baik single maupun multiple select.
+
+---
+
+## 🔧 Props
+
+| Prop           | Type                                                                                             | Default      | Description                                                                        |
+| -------------- | ------------------------------------------------------------------------------------------------ | ------------ | ---------------------------------------------------------------------------------- |
+| `item`         | `ChipOptionProps`                                                                                | **Required** | Data item yang akan ditampilkan, berisi label, value, dan optional `disabled`      |
+| `isSelected`   | `(value: boolean) => boolean`                                                                    | **Required** | Fungsi untuk menentukan apakah item saat ini sedang terpilih                       |
+| `color`        | `'default' \| 'success' \| 'danger' \| 'primary' \| 'warning' \| 'info' \| 'purple' \| 'orange'` | `'default'`  | Warna tema chip berdasarkan `CHIP_COLOR_MAP`                                       |
+| `block`        | `boolean`                                                                                        | `false`      | Apakah chip harus mengisi lebar penuh jika ditampilkan secara vertikal             |
+| `size`         | `'small' \| 'medium' \| 'large'`                                                                 | `'medium'`   | Ukuran padding dan font chip                                                       |
+| `renderItem`   | `(item: ChipOptionProps, selected: boolean, disabled: boolean) => ReactNode`                     | `undefined`  | Fungsi untuk mengkustomisasi isi tampilan chip                                     |
+| `isHorizontal` | `boolean`                                                                                        | `false`      | Jika true, maka `block` akan diabaikan agar chip tetap fleksibel secara horizontal |
+| `onPress`      | `(disabled: boolean, val: ChipOptionProps) => void`                                              | `undefined`  | Callback saat chip ditekan                                                         |
+| `onLayout`     | `(event: LayoutChangeEvent) => void`                                                             | `undefined`  | Callback ketika layout chip dihitung oleh React Native                             |
+
+---
+
+## 🎨 Style Behavior
+
+- **Warna Dinamis**: Warna border, background, dan teks akan menyesuaikan status:
+  - Default
+  - Selected
+  - Disabled
+
+- **Ukuran**:
+  - `'small'`: Padding kecil, font size 12
+  - `'medium'`: Default, font size 14
+  - `'large'`: Padding besar, font size 16
+
+- **Block Mode**:
+  - Bila `block: true` dan `isHorizontal: false`, chip akan mengisi lebar penuh kontainer
+
+---
+
+## 💡 Contoh Penggunaan
+
+```tsx
+<ChipItem
+  item={{ label: 'Marketing', value: 'marketing' }}
+  isSelected={() => true}
+  color="primary"
+  size="medium"
+  onPress={(disabled, val) => console.log('Pressed:', val)}
+/>
+```
+
+---
+
+## 🛠️ Tips
+
+- Gunakan `renderItem` untuk mengganti isi chip dengan tampilan kustom.
+- Pastikan `isSelected` di-define dengan benar agar state visual chip sesuai.
+
+---
+
+## 🧱 Dependencies
+
+- `Typography`
+- `CHIP_COLOR_MAP`
+- `Pressable` & `StyleSheet` dari React Native
+
+---
+
+## 🗂️ Related
+
+- `Chip`
+- `Select`
+- `ChipOptionProps`

package/lib/module/Select/README.md

@@ -14,22 +14,23 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
 
 ## 📦 Props
 
-| Prop         | Tipe                                            | Default       | Keterangan |
-|--------------|--------------------------------------------------|---------------|------------|
-| `isOpen`     | `boolean`                                       | `false`       | Menentukan apakah bottom sheet terbuka |
-| `data`       | `ChipOptionProps[]`                             | -             | Data pilihan untuk ditampilkan |
-| `multiple`   | `boolean`                                       | `false`       | Mengizinkan multiple selection |
-| `renderItem` | `(item, selected, disabled) => React.ReactNode` | -             | Kustom tampilan item |
-| `onSubmit`   | `(selected: ChipSelectedProps) => void`         | -             | Callback saat tombol submit ditekan |
-| `onClose`    | `(val: boolean) => void`                        | -             | Callback saat bottom sheet ditutup |
-| `onSearch`   | `(val: string) => void`                         | -             | Callback saat input pencarian berubah |
-| `required`   | `boolean`                                       | `false`       | Jika `true`, validasi input saat submit |
-| `loading`    | `boolean`                                       | `false`       | Menampilkan loading saat data di-fetch |
-| `delaySearch`| `number`                                        | `300`         | Delay pencarian dalam milidetik |
-| `height`     | `BottomSheetHeighProps`                         | -             | Ukuran tinggi BottomSheet |
-| `onRefresh`  | `() => void`                                    | -             | Callback saat pull-to-refresh dilakukan |
-| `header`     | ReactElement| –              | Jika ingin chip mempunyai header.                          |
-| `footer`     | ReactElement| –              | Jika ingin chip mempunyai footer.                          |
+| Prop          | Tipe                                            | Default | Keterangan                                                                                                                                                    |
+| ------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `isOpen`      | `boolean`                                       | `false` | Menentukan apakah bottom sheet terbuka                                                                                                                        |
+| `data`        | `ChipOptionProps[]`                             | -       | Data pilihan untuk ditampilkan                                                                                                                                |
+| `multiple`    | `boolean`                                       | `false` | Mengizinkan multiple selection                                                                                                                                |
+| `renderItem`  | `(item, selected, disabled) => React.ReactNode` | -       | Kustom tampilan item                                                                                                                                          |
+| `onSubmit`    | `(selected: ChipSelectedProps) => void`         | -       | Callback saat tombol submit ditekan                                                                                                                           |
+| `onClose`     | `(val: boolean) => void`                        | -       | Callback saat bottom sheet ditutup                                                                                                                            |
+| `onSearch`    | `(val: string) => void`                         | -       | Callback saat input pencarian berubah                                                                                                                         |
+| `required`    | `boolean`                                       | `false` | Jika `true`, validasi input saat submit                                                                                                                       |
+| `loading`     | `boolean`                                       | `false` | Menampilkan loading saat data di-fetch                                                                                                                        |
+| `delaySearch` | `number`                                        | `300`   | Delay pencarian dalam milidetik                                                                                                                               |
+| `height`      | `BottomSheetHeighProps`                         | -       | Ukuran tinggi BottomSheet                                                                                                                                     |
+| `onRefresh`   | `() => void`                                    | -       | Callback saat pull-to-refresh dilakukan                                                                                                                       |
+| `header`      | ReactElement                                    | –       | Jika ingin chip mempunyai header.                                                                                                                             |
+| `footer`      | ReactElement                                    | –       | Jika ingin chip mempunyai footer.                                                                                                                             |
+| `value`       | ChipSelectedProps                               | –       | Nilai pilihan yang dikontrol dari luar. Cocok untuk membuat komponen controlled. Akan mensinkronkan state internal selected dengan value setiap kali berubah. |
 
 ## 📌 Contoh Penggunaan
 
@@ -53,6 +54,7 @@ const MyScreen = () => {
       <Button title="Pilih Data" onPress={() => setOpen(true)} />
       <Select
         isOpen={open}
+        value={selected}
         data={data}
         multiple={true}
         onClose={() => setOpen(false)}
@@ -77,4 +79,11 @@ const MyScreen = () => {
   - `Loading`
   - `Toast` (untuk validasi/error)
 
-- Jika ingin menambahkan animasi shimmer saat loading, bisa modifikasi komponen `Loading`.
+- Jika ingin menambahkan animasi shimmer saat loading, bisa modifikasi komponen `Loading`.
+
+## ⚠️ Behavior Penting
+
+- Jika `multiple={false}` dan `required={true}`, maka:
+  - Item yang dipilih akan langsung dikirim ke `onSubmit`.
+  - BottomSheet akan langsung tertutup tanpa menekan tombol submit.
+- Jika `required={false}`, user bisa membatalkan pilihan (deselect), dan mengirim data kosong.

package/lib/module/Select/Select.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { Keyboard, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
 import BottomSheet from "../BottomSheet/BottomSheet.js";
 import Button from "../Button/Button.js";
@@ -27,7 +27,8 @@ export default function Select({
   footer,
   header,
   onEndReached,
-  submitBtnLabel
+  submitBtnLabel,
+  value
 }) {
   // const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
   const [selected, setSelected] = useState();
@@ -66,6 +67,11 @@ export default function Select({
       onSearch?.(val);
     }, delaySearch);
   };
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelected(value);
+    }
+  }, [value]);
   return /*#__PURE__*/_jsx(BottomSheet, {
     onClose: val => handleOnCloseBottom(val),
     isOpen: isOpen,

package/lib/module/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useState","Keyboard","StyleSheet","TouchableWithoutFeedback","View","BottomSheet","Button","Chip","Input","Loading","useToast","useRef","jsx","_jsx","jsxs","_jsxs","Select","isOpen","data","renderItem","onClose","onSubmit","multiple","onSearch","required","loading","delaySearch","height","onRefresh","refreshing","footer","header","onEndReached","submitBtnLabel","selected","setSelected","searchQuery","setSearchQuery","show","handleOnCloseBottom","val","handleOnPresSubmitSelect","length","searchTimeout","handleOnSearch","current","clearTimeout","setTimeout","title","color","disabled","onPress","undefined","children","style","styles","container","containerSearch","dismiss","accessible","submitBehavior","icon","placeholder","value","onChangeText","containerChip","options","direction","scrollable","size","block","onSelect","item","isSame","Array","isArray","nextValue","create","marginBottom","gap","paddingBottom"],"sourceRoot":"../../../src","sources":["Select/Select.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useState","useEffect","Keyboard","StyleSheet","TouchableWithoutFeedback","View","BottomSheet","Button","Chip","Input","Loading","useToast","useRef","jsx","_jsx","jsxs","_jsxs","Select","isOpen","data","renderItem","onClose","onSubmit","multiple","onSearch","required","loading","delaySearch","height","onRefresh","refreshing","footer","header","onEndReached","submitBtnLabel","value","selected","setSelected","searchQuery","setSearchQuery","show","handleOnCloseBottom","val","handleOnPresSubmitSelect","length","searchTimeout","handleOnSearch","current","clearTimeout","setTimeout","undefined","title","color","disabled","onPress","children","style","styles","container","containerSearch","dismiss","accessible","submitBehavior","icon","placeholder","onChangeText","containerChip","options","direction","scrollable","size","block","onSelect","item","isSame","Array","isArray","nextValue","create","marginBottom","gap","paddingBottom"],"sourceRoot":"../../../src","sources":["Select/Select.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Skeleton/README.md

@@ -0,0 +1,79 @@
+# 🦴 Skeleton Loader Component
+
+Komponen `Skeleton` adalah placeholder UI yang menampilkan efek shimmer animasi, berguna untuk memberikan feedback loading saat data belum tersedia.
+
+---
+
+## 📦 Props
+
+| Prop              | Tipe             | Default                      | Deskripsi                                                                          |
+| ----------------- | ---------------- | ---------------------------- | ---------------------------------------------------------------------------------- |
+| `width`           | `DimensionValue` | `"100%"`                     | Lebar dari skeleton block. Bisa berupa angka atau string (`'100%'`, `'50%'`, dsb). |
+| `height`          | `DimensionValue` | `50`                         | Tinggi dari skeleton block.                                                        |
+| `rounded`         | `number`         | `8`                          | Radius border untuk membuat sudut membulat.                                        |
+| `backgroundColor` | `string`         | `"#F0F0F0"`                  | Warna latar belakang dari blok skeleton.                                           |
+| `shimmerColor`    | `string`         | `"rgba(255, 255, 255, 0.7)"` | Warna efek shimmer yang bergerak.                                                  |
+| `duration`        | `number`         | `1500`                       | Durasi animasi shimmer (dalam milidetik).                                          |
+
+---
+
+## 🧠 Cara Kerja
+
+- Komponen menggunakan `Animated.Value` untuk menggerakkan efek shimmer dari kiri ke kanan secara loop.
+- Lebar shimmer dihitung berdasarkan lebar aktual komponen yang didapat dari event `onLayout`.
+- Shimmer bergerak dengan `translateX` menggunakan `interpolate()` untuk efek linear mulus.
+
+---
+
+## 📌 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import Skeleton from './components/Skeleton';
+
+const MyLoadingScreen = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <Skeleton height={20} width="60%" />
+      <View style={{ height: 16 }} />
+      <Skeleton height={20} width="80%" />
+      <View style={{ height: 16 }} />
+      <Skeleton height={100} width="100%" rounded={12} />
+    </View>
+  );
+};
+```
+
+---
+
+## 🧱 Struktur Rendered
+
+```tsx
+<View>
+  {' '}
+  // container
+  <Animated.View /> // shimmer yang bergerak horizontal
+</View>
+```
+
+---
+
+## ⚠️ Catatan
+
+- Komponen ini **tidak menerima children**, hanya untuk placeholder visual.
+- Efek shimmer akan selalu berjalan secara loop selama komponen hidup.
+- Perhatikan performa jika digunakan secara masif di satu halaman.
+
+---
+
+## 🛠 Tips
+
+- Gunakan `Skeleton` dalam daftar (list, table, card) untuk meningkatkan UX saat loading.
+- Dapat digabungkan dengan kondisi seperti:
+
+```tsx
+{
+  isLoading ? <Skeleton height={50} /> : <ActualComponent data={data} />;
+}
+```

package/lib/module/Skeleton/Skeleton.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Skeleton = ({
+  width = '100%',
+  height = 50,
+  rounded = 8,
+  backgroundColor = '#F0F0F0',
+  shimmerColor = 'rgba(255, 255, 255, 0.7)',
+  duration = 1500
+}) => {
+  const shimmerAnimation = useRef(new Animated.Value(0)).current;
+  const skeletonWidth = useRef(0);
+  const handleLayout = event => {
+    skeletonWidth.current = event.nativeEvent.layout.width;
+  };
+  useEffect(() => {
+    const animateShimmer = () => {
+      Animated.loop(Animated.sequence([Animated.timing(shimmerAnimation, {
+        toValue: 1,
+        duration: duration,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }), Animated.timing(shimmerAnimation, {
+        toValue: 0,
+        duration: 0,
+        useNativeDriver: true
+      })])).start();
+    };
+    animateShimmer();
+    return () => {
+      shimmerAnimation.stopAnimation();
+    };
+  }, [shimmerAnimation, duration]);
+  const shimmerTranslate = shimmerAnimation.interpolate({
+    inputRange: [0, 1],
+    // Gunakan lebar skeleton untuk perhitungan yang presisi
+    outputRange: [-200, skeletonWidth.current + 200]
+  });
+  return /*#__PURE__*/_jsx(View, {
+    onLayout: handleLayout,
+    style: [styles.skeletonCard, {
+      width,
+      height,
+      backgroundColor,
+      borderRadius: rounded
+    }],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.shimmer, {
+        backgroundColor: shimmerColor,
+        transform: [{
+          translateX: shimmerTranslate
+        }],
+        borderRadius: rounded
+      }]
+    })
+  });
+};
+export default Skeleton;
+const styles = StyleSheet.create({
+  skeletonCard: {
+    overflow: 'hidden'
+  },
+  shimmer: {
+    ...StyleSheet.absoluteFillObject,
+    width: '90%',
+    height: '100%',
+    opacity: 0.3
+  }
+});
+//# sourceMappingURL=Skeleton.js.map

package/lib/module/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Animated","Easing","StyleSheet","View","jsx","_jsx","Skeleton","width","height","rounded","backgroundColor","shimmerColor","duration","shimmerAnimation","Value","current","skeletonWidth","handleLayout","event","nativeEvent","layout","animateShimmer","loop","sequence","timing","toValue","easing","linear","useNativeDriver","start","stopAnimation","shimmerTranslate","interpolate","inputRange","outputRange","onLayout","style","styles","skeletonCard","borderRadius","children","shimmer","transform","translateX","create","overflow","absoluteFillObject","opacity"],"sourceRoot":"../../../src","sources":["Skeleton/Skeleton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SACEC,QAAQ,EACRC,MAAM,EACNC,UAAU,EACVC,IAAI,QAIC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGtB,MAAMC,QAAiC,GAAGA,CAAC;EACzCC,KAAK,GAAG,MAAM;EACdC,MAAM,GAAG,EAAE;EACXC,OAAO,GAAG,CAAC;EACXC,eAAe,GAAG,SAAS;EAC3BC,YAAY,GAAG,0BAA0B;EACzCC,QAAQ,GAAG;AACb,CAAC,KAAK;EACJ,MAAMC,gBAAgB,GAAGd,MAAM,CAAC,IAAIC,QAAQ,CAACc,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAC9D,MAAMC,aAAa,GAAGjB,MAAM,CAAC,CAAC,CAAC;EAE/B,MAAMkB,YAAY,GAAIC,KAAwB,IAAK;IACjDF,aAAa,CAACD,OAAO,GAAGG,KAAK,CAACC,WAAW,CAACC,MAAM,CAACb,KAAK;EACxD,CAAC;EAEDT,SAAS,CAAC,MAAM;IACd,MAAMuB,cAAc,GAAGA,CAAA,KAAM;MAC3BrB,QAAQ,CAACsB,IAAI,CACXtB,QAAQ,CAACuB,QAAQ,CAAC,CAChBvB,QAAQ,CAACwB,MAAM,CAACX,gBAAgB,EAAE;QAChCY,OAAO,EAAE,CAAC;QACVb,QAAQ,EAAEA,QAAQ;QAClBc,MAAM,EAAEzB,MAAM,CAAC0B,MAAM;QACrBC,eAAe,EAAE;MACnB,CAAC,CAAC,EACF5B,QAAQ,CAACwB,MAAM,CAACX,gBAAgB,EAAE;QAChCY,OAAO,EAAE,CAAC;QACVb,QAAQ,EAAE,CAAC;QACXgB,eAAe,EAAE;MACnB,CAAC,CAAC,CACH,CACH,CAAC,CAACC,KAAK,CAAC,CAAC;IACX,CAAC;IAEDR,cAAc,CAAC,CAAC;IAEhB,OAAO,MAAM;MACXR,gBAAgB,CAACiB,aAAa,CAAC,CAAC;IAClC,CAAC;EACH,CAAC,EAAE,CAACjB,gBAAgB,EAAED,QAAQ,CAAC,CAAC;EAEhC,MAAMmB,gBAAgB,GAAGlB,gBAAgB,CAACmB,WAAW,CAAC;IACpDC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClB;IACAC,WAAW,EAAE,CAAC,CAAC,GAAG,EAAElB,aAAa,CAACD,OAAO,GAAG,GAAG;EACjD,CAAC,CAAC;EAEF,oBACEV,IAAA,CAACF,IAAI;IACHgC,QAAQ,EAAElB,YAAa;IACvBmB,KAAK,EAAE,CACLC,MAAM,CAACC,YAAY,EACnB;MACE/B,KAAK;MACLC,MAAM;MACNE,eAAe;MACf6B,YAAY,EAAE9B;IAChB,CAAC,CACD;IAAA+B,QAAA,eAEFnC,IAAA,CAACL,QAAQ,CAACG,IAAI;MACZiC,KAAK,EAAE,CACLC,MAAM,CAACI,OAAO,EACd;QACE/B,eAAe,EAAEC,YAAY;QAC7B+B,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAEZ;QAAiB,CAAC,CAAC;QAC7CQ,YAAY,EAAE9B;MAChB,CAAC;IACD,CACH;EAAC,CACE,CAAC;AAEX,CAAC;AAED,eAAeH,QAAQ;AAEvB,MAAM+B,MAAM,GAAGnC,UAAU,CAAC0C,MAAM,CAAC;EAC/BN,YAAY,EAAE;IACZO,QAAQ,EAAE;EACZ,CAAC;EACDJ,OAAO,EAAE;IACP,GAAGvC,UAAU,CAAC4C,kBAAkB;IAChCvC,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,MAAM;IACduC,OAAO,EAAE;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Skeleton/type.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=type.js.map

package/lib/module/Skeleton/type.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["Skeleton/type.ts"],"mappings":"","ignoreList":[]}

package/lib/module/index.js

@@ -18,6 +18,7 @@ export { default as Gap } from "./Ui/Gap.js";
 export { default as Grid } from "./Ui/Grid.js";
 export { default as Col } from "./Ui/Col.js";
 export { default as Chip } from "./Chip/Chip.js";
+export { default as ChipItem } from "./Chip/ChipItem.js";
 export { default as Footer } from "./Ui/Footer.js";
 export { default as Devider } from "./Ui/Devider.js";
 export { default as Select } from "./Select/Select.js";
@@ -60,4 +61,6 @@ export { default as TextArea } from "./Input/TextArea.js";
 export { default as TextEditor } from "./TextEditor/TextEditor.js";
 // export { default as PdfView } from './FileView/PdfView';
 export { ToastProvider, useToast } from "./Toast/ToastContext.js";
+export { default as Skeleton } from "./Skeleton/Skeleton.js";
+export { default as CounterButton } from "./CounterButton/CounterButton.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","Icon","Modal","Label","List","ListItem","Loading","Avatar","AvatarGroup","Badge","Alert","Timeline","TimelineItem","Theme","Provider","useFooter","Drawing","Calendar","DatePicker","YearPicker","MonthPicker","TimePicker","Step","StepItem","Tab","TabItem","Toast","TextArea","TextEditor","ToastProvider","useToast"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","ChipItem","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","Icon","Modal","Label","List","ListItem","Loading","Avatar","AvatarGroup","Badge","Alert","Timeline","TimelineItem","Theme","Provider","useFooter","Drawing","Calendar","DatePicker","YearPicker","MonthPicker","TimePicker","Step","StepItem","Tab","TabItem","Toast","TextArea","TextEditor","ToastProvider","useToast","Skeleton","CounterButton"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/Select/Select.d.ts

@@ -1,3 +1,3 @@
 import { type SelectProps } from './type';
-export default function Select({ isOpen, data, renderItem, onClose, onSubmit, multiple, onSearch, required, loading, delaySearch, height, onRefresh, refreshing, footer, header, onEndReached, submitBtnLabel, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ isOpen, data, renderItem, onClose, onSubmit, multiple, onSearch, required, loading, delaySearch, height, onRefresh, refreshing, footer, header, onEndReached, submitBtnLabel, value, }: SelectProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/Select/Select.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,WAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,YAAY,EACZ,cAAc,GACf,EAAE,WAAW,2CAsHb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/Select/Select.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,WAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,YAAY,EACZ,cAAc,EACd,KAAK,GACN,EAAE,WAAW,2CA4Hb"}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ChipOnSelectProps, ChipOptionProps } from '../Chip/type';
 import type { BottomSheetHeighProps } from '../BottomSheet/type';
+import type { ChipSelectedProps } from '../Chip/type';
 export interface SelectDataProps {
     value: string | number;
     label: string | number;
@@ -22,6 +23,7 @@ export interface SelectProps {
     onEndReached?: () => void;
     refreshing?: boolean;
     submitBtnLabel?: string;
+    value?: ChipSelectedProps;
     footer?: React.ComponentType<any> | React.ReactElement | null | undefined;
     header?: React.ComponentType<any> | React.ReactElement | null | undefined;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Select/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;CAC3E"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Select/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;CAC3E"}

package/lib/typescript/src/Skeleton/Skeleton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SkeletonProps } from './type';
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwErC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { DimensionValue } from 'react-native';
+export interface SkeletonProps {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    rounded?: number;
+    backgroundColor?: string;
+    shimmerColor?: string;
+    duration?: number;
+}
+//# sourceMappingURL=type.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Skeleton/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/lib/typescript/src/index.d.ts

@@ -16,6 +16,7 @@ export { default as Gap } from './Ui/Gap';
 export { default as Grid } from './Ui/Grid';
 export { default as Col } from './Ui/Col';
 export { default as Chip } from './Chip/Chip';
+export { default as ChipItem } from './Chip/ChipItem';
 export type { ChipSelectedProps, ChipOnSelectProps, ChipOptionProps, } from './Chip/type';
 export { default as Footer } from './Ui/Footer';
 export { default as Devider } from './Ui/Devider';
@@ -62,4 +63,7 @@ export { default as Toast } from './Toast/Toast';
 export { default as TextArea } from './Input/TextArea';
 export { default as TextEditor } from './TextEditor/TextEditor';
 export { ToastProvider, useToast } from './Toast/ToastContext';
+export { default as Skeleton } from './Skeleton/Skeleton';
+export type { SkeletonProps } from './Skeleton/type';
+export { default as CounterButton } from './CounterButton/CounterButton';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/Chip/README_CHIP_ITEM.md

@@ -0,0 +1,73 @@
+# 📦 Komponen `ChipItem` – React Native
+
+Komponen `ChipItem` merupakan komponen presentasional dalam bentuk "chip" atau "pill" yang digunakan sebagai bagian dari list filter/select menggunakan UI gaya chip, baik single maupun multiple select.
+
+---
+
+## 🔧 Props
+
+| Prop           | Type                                                                                             | Default      | Description                                                                        |
+| -------------- | ------------------------------------------------------------------------------------------------ | ------------ | ---------------------------------------------------------------------------------- |
+| `item`         | `ChipOptionProps`                                                                                | **Required** | Data item yang akan ditampilkan, berisi label, value, dan optional `disabled`      |
+| `isSelected`   | `(value: boolean) => boolean`                                                                    | **Required** | Fungsi untuk menentukan apakah item saat ini sedang terpilih                       |
+| `color`        | `'default' \| 'success' \| 'danger' \| 'primary' \| 'warning' \| 'info' \| 'purple' \| 'orange'` | `'default'`  | Warna tema chip berdasarkan `CHIP_COLOR_MAP`                                       |
+| `block`        | `boolean`                                                                                        | `false`      | Apakah chip harus mengisi lebar penuh jika ditampilkan secara vertikal             |
+| `size`         | `'small' \| 'medium' \| 'large'`                                                                 | `'medium'`   | Ukuran padding dan font chip                                                       |
+| `renderItem`   | `(item: ChipOptionProps, selected: boolean, disabled: boolean) => ReactNode`                     | `undefined`  | Fungsi untuk mengkustomisasi isi tampilan chip                                     |
+| `isHorizontal` | `boolean`                                                                                        | `false`      | Jika true, maka `block` akan diabaikan agar chip tetap fleksibel secara horizontal |
+| `onPress`      | `(disabled: boolean, val: ChipOptionProps) => void`                                              | `undefined`  | Callback saat chip ditekan                                                         |
+| `onLayout`     | `(event: LayoutChangeEvent) => void`                                                             | `undefined`  | Callback ketika layout chip dihitung oleh React Native                             |
+
+---
+
+## 🎨 Style Behavior
+
+- **Warna Dinamis**: Warna border, background, dan teks akan menyesuaikan status:
+  - Default
+  - Selected
+  - Disabled
+
+- **Ukuran**:
+  - `'small'`: Padding kecil, font size 12
+  - `'medium'`: Default, font size 14
+  - `'large'`: Padding besar, font size 16
+
+- **Block Mode**:
+  - Bila `block: true` dan `isHorizontal: false`, chip akan mengisi lebar penuh kontainer
+
+---
+
+## 💡 Contoh Penggunaan
+
+```tsx
+<ChipItem
+  item={{ label: 'Marketing', value: 'marketing' }}
+  isSelected={() => true}
+  color="primary"
+  size="medium"
+  onPress={(disabled, val) => console.log('Pressed:', val)}
+/>
+```
+
+---
+
+## 🛠️ Tips
+
+- Gunakan `renderItem` untuk mengganti isi chip dengan tampilan kustom.
+- Pastikan `isSelected` di-define dengan benar agar state visual chip sesuai.
+
+---
+
+## 🧱 Dependencies
+
+- `Typography`
+- `CHIP_COLOR_MAP`
+- `Pressable` & `StyleSheet` dari React Native
+
+---
+
+## 🗂️ Related
+
+- `Chip`
+- `Select`
+- `ChipOptionProps`

package/src/Select/README.md

@@ -14,22 +14,23 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
 
 ## 📦 Props
 
-| Prop         | Tipe                                            | Default       | Keterangan |
-|--------------|--------------------------------------------------|---------------|------------|
-| `isOpen`     | `boolean`                                       | `false`       | Menentukan apakah bottom sheet terbuka |
-| `data`       | `ChipOptionProps[]`                             | -             | Data pilihan untuk ditampilkan |
-| `multiple`   | `boolean`                                       | `false`       | Mengizinkan multiple selection |
-| `renderItem` | `(item, selected, disabled) => React.ReactNode` | -             | Kustom tampilan item |
-| `onSubmit`   | `(selected: ChipSelectedProps) => void`         | -             | Callback saat tombol submit ditekan |
-| `onClose`    | `(val: boolean) => void`                        | -             | Callback saat bottom sheet ditutup |
-| `onSearch`   | `(val: string) => void`                         | -             | Callback saat input pencarian berubah |
-| `required`   | `boolean`                                       | `false`       | Jika `true`, validasi input saat submit |
-| `loading`    | `boolean`                                       | `false`       | Menampilkan loading saat data di-fetch |
-| `delaySearch`| `number`                                        | `300`         | Delay pencarian dalam milidetik |
-| `height`     | `BottomSheetHeighProps`                         | -             | Ukuran tinggi BottomSheet |
-| `onRefresh`  | `() => void`                                    | -             | Callback saat pull-to-refresh dilakukan |
-| `header`     | ReactElement| –              | Jika ingin chip mempunyai header.                          |
-| `footer`     | ReactElement| –              | Jika ingin chip mempunyai footer.                          |
+| Prop          | Tipe                                            | Default | Keterangan                                                                                                                                                    |
+| ------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `isOpen`      | `boolean`                                       | `false` | Menentukan apakah bottom sheet terbuka                                                                                                                        |
+| `data`        | `ChipOptionProps[]`                             | -       | Data pilihan untuk ditampilkan                                                                                                                                |
+| `multiple`    | `boolean`                                       | `false` | Mengizinkan multiple selection                                                                                                                                |
+| `renderItem`  | `(item, selected, disabled) => React.ReactNode` | -       | Kustom tampilan item                                                                                                                                          |
+| `onSubmit`    | `(selected: ChipSelectedProps) => void`         | -       | Callback saat tombol submit ditekan                                                                                                                           |
+| `onClose`     | `(val: boolean) => void`                        | -       | Callback saat bottom sheet ditutup                                                                                                                            |
+| `onSearch`    | `(val: string) => void`                         | -       | Callback saat input pencarian berubah                                                                                                                         |
+| `required`    | `boolean`                                       | `false` | Jika `true`, validasi input saat submit                                                                                                                       |
+| `loading`     | `boolean`                                       | `false` | Menampilkan loading saat data di-fetch                                                                                                                        |
+| `delaySearch` | `number`                                        | `300`   | Delay pencarian dalam milidetik                                                                                                                               |
+| `height`      | `BottomSheetHeighProps`                         | -       | Ukuran tinggi BottomSheet                                                                                                                                     |
+| `onRefresh`   | `() => void`                                    | -       | Callback saat pull-to-refresh dilakukan                                                                                                                       |
+| `header`      | ReactElement                                    | –       | Jika ingin chip mempunyai header.                                                                                                                             |
+| `footer`      | ReactElement                                    | –       | Jika ingin chip mempunyai footer.                                                                                                                             |
+| `value`       | ChipSelectedProps                               | –       | Nilai pilihan yang dikontrol dari luar. Cocok untuk membuat komponen controlled. Akan mensinkronkan state internal selected dengan value setiap kali berubah. |
 
 ## 📌 Contoh Penggunaan
 
@@ -53,6 +54,7 @@ const MyScreen = () => {
       <Button title="Pilih Data" onPress={() => setOpen(true)} />
       <Select
         isOpen={open}
+        value={selected}
         data={data}
         multiple={true}
         onClose={() => setOpen(false)}
@@ -77,4 +79,11 @@ const MyScreen = () => {
   - `Loading`
   - `Toast` (untuk validasi/error)
 
-- Jika ingin menambahkan animasi shimmer saat loading, bisa modifikasi komponen `Loading`.
+- Jika ingin menambahkan animasi shimmer saat loading, bisa modifikasi komponen `Loading`.
+
+## ⚠️ Behavior Penting
+
+- Jika `multiple={false}` dan `required={true}`, maka:
+  - Item yang dipilih akan langsung dikirim ke `onSubmit`.
+  - BottomSheet akan langsung tertutup tanpa menekan tombol submit.
+- Jika `required={false}`, user bisa membatalkan pilihan (deselect), dan mengirim data kosong.

package/src/Select/Select.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import {
   Keyboard,
   StyleSheet,
@@ -32,6 +32,7 @@ export default function Select({
   header,
   onEndReached,
   submitBtnLabel,
+  value,
 }: SelectProps) {
   // const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
   const [selected, setSelected] = useState<ChipSelectedProps>();
@@ -75,6 +76,12 @@ export default function Select({
     }, delaySearch);
   };
 
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelected(value);
+    }
+  }, [value]);
+
   return (
     <BottomSheet
       onClose={(val: boolean) => handleOnCloseBottom(val)}

package/src/Select/type.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ChipOnSelectProps, ChipOptionProps } from '../Chip/type';
 import type { BottomSheetHeighProps } from '../BottomSheet/type';
+import type { ChipSelectedProps } from '../Chip/type';
 
 export interface SelectDataProps {
   value: string | number;
@@ -29,6 +30,7 @@ export interface SelectProps {
   onEndReached?: () => void;
   refreshing?: boolean;
   submitBtnLabel?: string;
+  value?: ChipSelectedProps;
   footer?: React.ComponentType<any> | React.ReactElement | null | undefined;
   header?: React.ComponentType<any> | React.ReactElement | null | undefined;
 }

package/src/Skeleton/README.md

@@ -0,0 +1,79 @@
+# 🦴 Skeleton Loader Component
+
+Komponen `Skeleton` adalah placeholder UI yang menampilkan efek shimmer animasi, berguna untuk memberikan feedback loading saat data belum tersedia.
+
+---
+
+## 📦 Props
+
+| Prop              | Tipe             | Default                      | Deskripsi                                                                          |
+| ----------------- | ---------------- | ---------------------------- | ---------------------------------------------------------------------------------- |
+| `width`           | `DimensionValue` | `"100%"`                     | Lebar dari skeleton block. Bisa berupa angka atau string (`'100%'`, `'50%'`, dsb). |
+| `height`          | `DimensionValue` | `50`                         | Tinggi dari skeleton block.                                                        |
+| `rounded`         | `number`         | `8`                          | Radius border untuk membuat sudut membulat.                                        |
+| `backgroundColor` | `string`         | `"#F0F0F0"`                  | Warna latar belakang dari blok skeleton.                                           |
+| `shimmerColor`    | `string`         | `"rgba(255, 255, 255, 0.7)"` | Warna efek shimmer yang bergerak.                                                  |
+| `duration`        | `number`         | `1500`                       | Durasi animasi shimmer (dalam milidetik).                                          |
+
+---
+
+## 🧠 Cara Kerja
+
+- Komponen menggunakan `Animated.Value` untuk menggerakkan efek shimmer dari kiri ke kanan secara loop.
+- Lebar shimmer dihitung berdasarkan lebar aktual komponen yang didapat dari event `onLayout`.
+- Shimmer bergerak dengan `translateX` menggunakan `interpolate()` untuk efek linear mulus.
+
+---
+
+## 📌 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import Skeleton from './components/Skeleton';
+
+const MyLoadingScreen = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <Skeleton height={20} width="60%" />
+      <View style={{ height: 16 }} />
+      <Skeleton height={20} width="80%" />
+      <View style={{ height: 16 }} />
+      <Skeleton height={100} width="100%" rounded={12} />
+    </View>
+  );
+};
+```
+
+---
+
+## 🧱 Struktur Rendered
+
+```tsx
+<View>
+  {' '}
+  // container
+  <Animated.View /> // shimmer yang bergerak horizontal
+</View>
+```
+
+---
+
+## ⚠️ Catatan
+
+- Komponen ini **tidak menerima children**, hanya untuk placeholder visual.
+- Efek shimmer akan selalu berjalan secara loop selama komponen hidup.
+- Perhatikan performa jika digunakan secara masif di satu halaman.
+
+---
+
+## 🛠 Tips
+
+- Gunakan `Skeleton` dalam daftar (list, table, card) untuk meningkatkan UX saat loading.
+- Dapat digabungkan dengan kondisi seperti:
+
+```tsx
+{
+  isLoading ? <Skeleton height={50} /> : <ActualComponent data={data} />;
+}
+```

package/src/Skeleton/Skeleton.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { SkeletonProps } from './type';
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  width = '100%',
+  height = 50,
+  rounded = 8,
+  backgroundColor = '#F0F0F0',
+  shimmerColor = 'rgba(255, 255, 255, 0.7)',
+  duration = 1500,
+}) => {
+  const shimmerAnimation = useRef(new Animated.Value(0)).current;
+  const skeletonWidth = useRef(0);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    skeletonWidth.current = event.nativeEvent.layout.width;
+  };
+
+  useEffect(() => {
+    const animateShimmer = () => {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(shimmerAnimation, {
+            toValue: 1,
+            duration: duration,
+            easing: Easing.linear,
+            useNativeDriver: true,
+          }),
+          Animated.timing(shimmerAnimation, {
+            toValue: 0,
+            duration: 0,
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    };
+
+    animateShimmer();
+
+    return () => {
+      shimmerAnimation.stopAnimation();
+    };
+  }, [shimmerAnimation, duration]);
+
+  const shimmerTranslate = shimmerAnimation.interpolate({
+    inputRange: [0, 1],
+    // Gunakan lebar skeleton untuk perhitungan yang presisi
+    outputRange: [-200, skeletonWidth.current + 200],
+  });
+
+  return (
+    <View
+      onLayout={handleLayout}
+      style={[
+        styles.skeletonCard,
+        {
+          width,
+          height,
+          backgroundColor,
+          borderRadius: rounded,
+        } as StyleProp<ViewStyle>,
+      ]}
+    >
+      <Animated.View
+        style={[
+          styles.shimmer,
+          {
+            backgroundColor: shimmerColor,
+            transform: [{ translateX: shimmerTranslate }],
+            borderRadius: rounded,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default Skeleton;
+
+const styles = StyleSheet.create({
+  skeletonCard: {
+    overflow: 'hidden',
+  },
+  shimmer: {
+    ...StyleSheet.absoluteFillObject,
+    width: '90%',
+    height: '100%',
+    opacity: 0.3,
+  },
+});

package/src/Skeleton/type.ts

@@ -0,0 +1,10 @@
+import type { DimensionValue } from 'react-native';
+
+export interface SkeletonProps {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  rounded?: number;
+  backgroundColor?: string;
+  shimmerColor?: string;
+  duration?: number;
+}

package/src/index.tsx

@@ -26,6 +26,7 @@ export { default as Gap } from './Ui/Gap';
 export { default as Grid } from './Ui/Grid';
 export { default as Col } from './Ui/Col';
 export { default as Chip } from './Chip/Chip';
+export { default as ChipItem } from './Chip/ChipItem';
 export type {
   ChipSelectedProps,
   ChipOnSelectProps,
@@ -82,3 +83,6 @@ export { default as TextArea } from './Input/TextArea';
 export { default as TextEditor } from './TextEditor/TextEditor';
 // export { default as PdfView } from './FileView/PdfView';
 export { ToastProvider, useToast } from './Toast/ToastContext';
+export { default as Skeleton } from './Skeleton/Skeleton';
+export type { SkeletonProps } from './Skeleton/type';
+export { default as CounterButton } from './CounterButton/CounterButton';