@herca/rn-kit 0.1.7 → 0.1.9

package/src/Label/README.md

@@ -0,0 +1,65 @@
+# Label
+
+**Label** adalah komponen kecil berbentuk badge untuk menampilkan status, kategori, atau metadata ringkas. Komponen ini mendukung ikon, variasi warna, dan konten kustom.
+
+## API Reference
+
+| Prop       | Tipe                                                                                             | Default     | Deskripsi                                                                      |
+| ---------- | ------------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------ |
+| `label`    | `string`                                                                                         | `''`        | Teks yang ditampilkan jika `children` tidak disediakan.                        |
+| `children` | `React.ReactNode`                                                                                | `undefined` | Menampilkan elemen kustom sebagai isi label. Jika ada, `label` akan diabaikan. |
+| `color`    | `'default' \| 'success' \| 'danger' \| 'primary' \| 'warning' \| 'info' \| 'purple' \| 'orange'` | `'default'` | Variasi warna latar dan teks.                                                  |
+| `icon`     | `IconNameProps`                                                                                  | `undefined` | Menampilkan ikon di sebelah kiri teks.                                         |
+| `size`     | `'small' \| 'medium'`                                                                            | `'medium'`  | (Belum digunakan – untuk ekspansi ukuran ke depan.)                            |
+
+---
+
+## Warna yang Didukung
+
+| Warna     | Background          | Teks                 |
+| --------- | ------------------- | -------------------- |
+| `default` | `Color.gray[50]`    | `Color.gray[900]`    |
+| `success` | `Color.success[50]` | `Color.success[300]` |
+| `danger`  | `Color.danger[50]`  | `Color.danger[300]`  |
+| `primary` | `Color.primary[50]` | `Color.primary[300]` |
+| `warning` | `Color.warning[50]` | `Color.warning[300]` |
+| `info`    | `Color.info[50]`    | `Color.info[300]`    |
+| `purple`  | `Color.purple[50]`  | `Color.purple[300]`  |
+| `orange`  | `Color.orange[50]`  | `Color.orange[300]`  |
+
+---
+
+## Contoh Penggunaan
+
+### Label Sederhana
+
+```tsx
+<Label label="Active" color="success" />
+```
+
+### Label dengan Ikon
+
+```tsx
+<Label label="Error" color="danger" icon="AlertCircle" />
+```
+
+### Kustom Isi (Children)
+
+```tsx
+<Label color="primary">
+  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+    <Icon name="Check" color={Color.primary[300]} size={12} />
+    <Text style={{ color: Color.primary[300], marginLeft: 4 }}>Custom</Text>
+  </View>
+</Label>
+```
+
+---
+
+## Catatan Tambahan
+
+* Jika Anda memberikan `children`, maka `label` dan `icon` akan diabaikan.
+* Komponen ini menggunakan `alignSelf: 'flex-start'` agar ukuran label tidak penuh.
+* Prop `size` belum aktif, namun sudah disiapkan jika ke depan ingin mendukung skala `small`/`large`.
+
+---

package/src/RadioButton/README.md

@@ -1,7 +1,8 @@
 # 📦 RadioButton – Komponen React Native
 
 Komponen `RadioButton` ini digunakan untuk menampilkan daftar pilihan dalam bentuk radio button di aplikasi React Native.
-![Deskripsi Alt](../../assets/doc/RadioButton/RadioButton.png)
+<img src="../../assets/doc/RadioButton/RadioButton.png" width=200>
+
 
 ## 📄 Import
 

package/src/Step/Step.tsx

@@ -26,7 +26,6 @@ const Step = ({ children, current = 0, onChangeStep }: StepProps) => {
 
   return (
     <View style={styles.container}>
-      {/* Header */}
       <View style={[styles.headerContainer]}>
         <ScrollView
           ref={scrollRef}

package/src/Tab/README.md

@@ -0,0 +1,74 @@
+# 📱 Komponen Tab Kustom untuk React Native
+
+Komponen tab ringan dan fleksibel untuk React Native yang mendukung:
+
+* ✅ Swipe kiri/kanan antar tab
+* ✅ Scroll vertikal di dalam konten tiap tab
+* ✅ Tampilan tab yang bisa disesuaikan
+* ✅ Tanpa dependensi eksternal (tidak butuh react-navigation)
+
+---
+
+## 💡 Contoh Penggunaan
+
+```tsx
+import Tab from './Tab';
+import TabItem from './TabItem';
+import HomeScreen from './screens/Home';
+import ProfileScreen from './screens/Profile';
+
+export default function App() {
+  return (
+    <Tab>
+      <TabItem name="Beranda" component={HomeScreen} />
+      <TabItem name="Profil" component={ProfileScreen} />
+    </Tab>
+  );
+}
+```
+
+---
+
+## ✨ Fitur
+
+### 1. Navigasi Tab
+
+* Tap pada header tab untuk berpindah
+* Swipe kiri/kanan untuk berpindah antar tab
+
+### 2. Konten Scrollable
+
+Setiap tab dibungkus dalam `ScrollView` vertikal, sehingga bisa discroll ke bawah jika konten panjang.
+
+---
+
+## 🧩 Props
+
+### `TabProps`
+
+| Properti       | Tipe                      | Keterangan                    |
+| -------------- | ------------------------- | ----------------------------- |
+| `children`     | `React.ReactNode`         | Daftar elemen `<TabItem />`   |
+| `current?`     | `number`                  | Indeks tab aktif (default: 0) |
+| `onChangeTab?` | `(index: number) => void` | Callback saat tab berpindah   |
+
+### `TabItemProps`
+
+| Properti    | Tipe                  | Keterangan                         |
+| ----------- | --------------------- | ---------------------------------- |
+| `name`      | `string`              | Nama/tab label yang ditampilkan    |
+| `component` | `React.ComponentType` | Komponen yang akan dirender di tab |
+
+---
+
+## 🧪 Contoh Screen
+
+```tsx
+const HomeScreen = () => (
+  <View style={{ padding: 20 }}>
+    <Text>Selamat datang di tab Beranda!</Text>
+  </View>
+);
+```
+
+---

package/src/Tab/Tab.tsx

@@ -0,0 +1,112 @@
+import React, {
+  useCallback,
+  useState,
+  useEffect,
+  useRef,
+  Children,
+  isValidElement,
+} from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+import PagerView from 'react-native-pager-view';
+import Color from '../Color/Color';
+import Typography from '../Typography/Typography';
+import type { TabItemProps, TabProps } from './type';
+
+const Tab: React.FC<TabProps> = ({ children, current = 0, onChangeTab }) => {
+  const items = Children.toArray(children).filter(
+    isValidElement
+  ) as React.ReactElement<TabItemProps>[];
+
+  const [activeIndex, setActiveIndex] = useState<number>(current);
+  const pagerRef = useRef<PagerView>(null);
+
+  useEffect(() => {
+    setActiveIndex(current);
+    pagerRef.current?.setPageWithoutAnimation(current);
+  }, [current]);
+
+  const updateActive = useCallback(
+    (index: number) => {
+      if (index !== activeIndex) {
+        setActiveIndex(index);
+        onChangeTab?.(index);
+      }
+    },
+    [activeIndex, onChangeTab]
+  );
+
+  const handleHeaderPress = (index: number) => {
+    pagerRef.current?.setPage(index);
+    updateActive(index);
+  };
+
+  if (items.length === 0) return null;
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.headerContainer}>
+        {items.map((item, index) => {
+          const isActive = index === activeIndex;
+          return (
+            <Pressable
+              key={index}
+              style={[
+                styles.tabButton,
+                isActive ? styles.tabActive : styles.tabInactive,
+              ]}
+              onPress={() => handleHeaderPress(index)}
+            >
+              <Typography
+                center
+                variant="t2"
+                weight="semibold"
+                color={isActive ? Color.base.white100 : Color.gray[700]}
+              >
+                {item.props.name}
+              </Typography>
+            </Pressable>
+          );
+        })}
+      </View>
+      <PagerView
+        ref={pagerRef}
+        style={styles.pager}
+        initialPage={current}
+        onPageSelected={(e) => updateActive(e.nativeEvent.position)}
+      >
+        {items.map((item, index) => {
+          const Comp = item.props.component;
+          return (
+            <View key={index} collapsable={false} style={{ flex: 1 }}>
+              {Comp ? <Comp /> : null}
+            </View>
+          );
+        })}
+      </PagerView>
+    </View>
+  );
+};
+
+export default Tab;
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  headerContainer: {
+    flexDirection: 'row',
+    backgroundColor: Color.gray[100],
+    padding: 4,
+    borderRadius: 8,
+  },
+  tabButton: {
+    flex: 1,
+    borderRadius: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tabActive: { backgroundColor: Color.primary[1000] },
+  tabInactive: { backgroundColor: Color.gray[100] },
+  pager: { flex: 1 },
+});

package/src/Tab/TabItem.tsx

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+
+const TabItem = () => {
+  return <View></View>;
+};
+export default TabItem;

package/src/Tab/type.tsx

@@ -0,0 +1,11 @@
+import React, { type ReactElement } from 'react';
+
+export interface TabItemProps {
+  name: string | number;
+  component: React.ComponentType<any>;
+}
+export interface TabProps {
+  children: ReactElement<TabItemProps> | ReactElement<TabItemProps>[];
+  current?: number;
+  onChangeTab?: (e: any) => void;
+}

package/src/Ui/README_DEVIDER.md

@@ -0,0 +1,62 @@
+# Divider
+
+**Divider** adalah komponen garis horizontal sederhana yang digunakan untuk memisahkan konten secara visual dalam antarmuka pengguna.
+
+---
+
+## Instalasi
+
+Komponen ini tidak memerlukan dependensi eksternal. Hanya menggunakan:
+
+* `Color` – untuk warna garis.
+* `View` dan `StyleSheet` dari `react-native`.
+
+---
+
+## API Reference
+
+Tidak memiliki properti (props) khusus. Komponen ini dapat digunakan langsung dan bisa dikustomisasi melalui `style` eksternal jika diperlukan.
+
+---
+
+## Contoh Penggunaan
+
+### Divider Default
+
+```tsx
+import Divider from '@/components/Divider/Divider';
+
+<View>
+  <Text>Bagian Atas</Text>
+  <Divider />
+  <Text>Bagian Bawah</Text>
+</View>
+```
+
+### Divider dengan Margin
+
+```tsx
+<View style={{ marginVertical: 12 }}>
+  <Divider />
+</View>
+```
+
+### Divider yang Dikustomisasi
+
+```tsx
+<Divider style={{ backgroundColor: 'red', height: 2 }} />
+```
+
+> Catatan: Untuk mengubah gaya `Divider`, bungkus komponen dengan `View` tambahan atau tambahkan prop `style` melalui wrapper jika perlu.
+
+---
+
+## Style Default
+
+```ts
+{
+  height: 1,
+  backgroundColor: Color.gray[200],
+}
+```
+

package/src/index.tsx

@@ -10,6 +10,12 @@ export type { AccordionRenderHeaderProps } from './Accordion/type';
 export { default as Button } from './Button/Button';
 export { default as Color } from './Color/Color';
 export { default as Typography } from './Typography/Typography';
+export type {
+  fontSizeMap,
+  fontWeightMap,
+  lineHeightMap,
+  TypographyVariantProps,
+} from './Typography/type';
 export { default as BottomSheet } from './BottomSheet/BottomSheet';
 export { default as Container } from './Ui/Container';
 export { default as Card } from './Ui/Card';
@@ -61,6 +67,8 @@ export { default as MonthPicker } from './DatePicker/MonthPicker';
 export { default as TimePicker } from './DatePicker/TimePicker';
 export { default as Step } from './Step/Step';
 export { default as StepItem } from './Step/StepItem';
+export { default as Tab } from './Tab/Tab';
+export { default as TabItem } from './Tab/TabItem';
 export { default as Toast } from './Toast/Toast';
 export { default as TextArea } from './Input/TextArea';
 // export { default as PdfView } from './FileView/PdfView';