@herca/rn-kit 0.1.0

package/src/Accordion/README.md

@@ -0,0 +1,48 @@
+# 📂 Accordion
+
+Komponen **Accordion** digunakan untuk menyembunyikan atau menampilkan konten secara dinamis. Biasanya digunakan untuk struktur seperti FAQ atau daftar konten bertingkat.
+![Deskripsi Alt](../../assets/doc/Accordion/Accordion.gif)
+
+## 📦 USAGE
+
+```tsx
+import React from 'react';
+import { Text } from 'react-native';
+import Accordion from '@herca/rn-kit/Accordion';
+import AccordionItem from '@herca/rn-kit/Accordion/AccordionItem';
+
+export default function FAQSection() {
+  return (
+    <Accordion
+      header={() => <Text style={{ fontWeight: 'bold' }}>Apa itu produk ini?</Text>}
+      isOpen={false}
+      onCollapse={(isOpen) => console.log('Status:', isOpen)}
+    >
+      <AccordionItem>
+        Produk ini adalah solusi digital untuk kebutuhan bisnis Anda.
+      </AccordionItem>
+      <AccordionItem>
+        Dapat digunakan di berbagai platform termasuk Android dan iOS.
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+```
+
+
+## Props
+
+| props name           | mandatory | types   | default                                                  |
+| -------------------- | --------- | ------- | -------------------------------------------------------- |
+| header             |          | ReactNode | false                                            |
+| isOpen              |         | boolean    |  true                                             |
+| onCollapse              |         | (isOpen: boolean) => void	    |  true                                             |                         |
+
+## Note
+
+Komponen Accordion menggunakan state internal (useState) untuk mengatur apakah kontennya sedang terbuka atau tidak.
+
+Fungsi header digunakan untuk merender tampilan judul Accordion dan dapat disesuaikan.
+
+Konten yang disembunyikan/diperluas sebaiknya dibungkus dalam AccordionItem.

package/src/Accordion/type.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface AccordionContextType {
+  expandedIndex: number | null;
+  setExpandedIndex: (index: number | null) => void;
+}
+
+export type AccordionRenderHeaderProps = ReactNode | null;
+
+export interface AccordionProps {
+  children: ReactNode;
+  renderHeader?: AccordionRenderHeaderProps;
+  isOpen?: boolean;
+  onCollapse?: (isOpen: boolean) => void;
+}
+export interface AccordionItemProps {
+  children: ReactNode;
+  index?: number;
+}

package/src/Alert/Alert.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+import Color from '../Color/Color';
+import Typography from '../Typography/Typography';
+import { Icon } from '../Icon';
+import type { IconNameProps } from '../Icon/type';
+import type { ColorVariantType } from '../Color/type';
+
+interface AlertProps {
+  icon?: IconNameProps;
+  title?: string;
+  message?: string;
+  color?: ColorVariantType;
+  style?: ViewStyle;
+  titleStyle?: StyleProp<ViewStyle>;
+  messageStyle?: StyleProp<ViewStyle>;
+}
+
+const COLORS: Record<
+  ColorVariantType,
+  {
+    background: string;
+    borderColor: string;
+    fontColor: string;
+  }
+> = {
+  success: {
+    background: Color.success[50],
+    fontColor: Color.success[500],
+    borderColor: Color.success[500],
+  },
+  default: {
+    background: Color.gray[50],
+    fontColor: Color.gray[500],
+    borderColor: Color.gray[500],
+  },
+  info: {
+    background: Color.info[50],
+    fontColor: Color.info[500],
+    borderColor: Color.info[500],
+  },
+  warning: {
+    background: Color.warning[50],
+    fontColor: Color.warning[400],
+    borderColor: Color.warning[400],
+  },
+  danger: {
+    background: Color.danger[50],
+    fontColor: Color.danger[500],
+    borderColor: Color.danger[200],
+  },
+  primary: {
+    background: Color.primary[50],
+    fontColor: Color.primary[500],
+    borderColor: Color.primary[200],
+  },
+  orange: {
+    background: Color.orange[50],
+    fontColor: Color.orange[500],
+    borderColor: Color.orange[200],
+  },
+  purple: {
+    background: Color.purple[50],
+    fontColor: Color.purple[500],
+    borderColor: Color.purple[200],
+  },
+};
+
+const Alert: React.FC<AlertProps> = ({
+  icon = 'ExlamationMark',
+  title,
+  message,
+  color = 'primary',
+  titleStyle,
+  messageStyle,
+}) => {
+  const { background, fontColor, borderColor } = COLORS[color];
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: background, borderColor: borderColor },
+      ]}
+    >
+      <View style={{ marginRight: 10 }}>
+        <Icon name={icon || 'ExlamationMark'} color={fontColor} />
+      </View>
+      <View style={styles.textContainer}>
+        {title && (
+          <Typography
+            variant="t2"
+            weight="bold"
+            color={fontColor}
+            style={StyleSheet.flatten([styles.title, titleStyle])}
+          >
+            {title}
+          </Typography>
+        )}
+        {message && (
+          <Typography
+            variant="t3"
+            color={fontColor}
+            style={StyleSheet.flatten([styles.message, messageStyle])}
+          >
+            {message}
+          </Typography>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: 12,
+    borderRadius: 8,
+    marginVertical: 8,
+    borderWidth: 1,
+  },
+  iconContainer: {
+    marginRight: 10,
+    width: 24,
+  },
+  textContainer: {
+    justifyContent: 'center',
+    flex: 1,
+    maxWidth: '90%',
+  },
+  title: {
+    flexShrink: 1,
+    flexWrap: 'wrap',
+  },
+  message: {
+    flexShrink: 1,
+    flexWrap: 'wrap',
+  },
+});
+
+export default Alert;

package/src/Alert/README.md

@@ -0,0 +1,68 @@
+# 📢 Alert Component
+
+Komponen `Alert` digunakan untuk menampilkan pesan notifikasi dengan ikon, judul, dan pesan yang dapat dikustomisasi warnanya sesuai konteks (seperti *success*, *info*, *warning*, dll).
+
+![Deskripsi Alt](../../assets/doc/Alert/Alert.png)
+## ✨ Fitur
+
+- Menampilkan ikon notifikasi
+- Mendukung berbagai warna status
+- Mendukung judul dan pesan
+- Gaya dapat dikustomisasi
+
+## 🧱 Props
+
+| Prop           | Tipe                                                                 | Default            | Deskripsi                                                                 |
+|----------------|----------------------------------------------------------------------|---------------------|---------------------------------------------------------------------------|
+| `icon`         | `IconNameProps`                                                      | `'ExlamationMark'`  | Nama ikon dari komponen `Icon`                                           |
+| `title`        | `string`                                                             | `undefined`         | Judul alert                                                               |
+| `message`      | `string`                                                             | `undefined`         | Pesan tambahan                                                            |
+| `color`        | `'success' \| 'info' \| 'warning' \| 'danger' \| 'primary' \| 'orange' \| 'purple'` | `'primary'` | Warna tema alert                                                         |
+| `style`        | `ViewStyle`                                                          | `undefined`         | Gaya tambahan untuk container                                             |
+| `titleStyle`   | `StyleProp<ViewStyle>`                                               | `undefined`         | Gaya tambahan untuk judul                                                 |
+| `messageStyle` | `StyleProp<ViewStyle>`                                               | `undefined`         | Gaya tambahan untuk pesan                                                 |
+
+## 🎨 Warna yang Didukung
+
+```ts
+type ColorProps =
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'primary'
+  | 'orange'
+  | 'purple';
+```
+
+## 📦 Cara Penggunaan
+
+```tsx
+import React from 'react';
+import Alert from './Alert'; // sesuaikan dengan path Anda
+
+export default function MyScreen() {
+  return (
+    <Alert
+      icon="CheckCircle"
+      title="Berhasil"
+      message="Data Anda berhasil disimpan."
+      color="success"
+    />
+  );
+}
+```
+
+## 🛠️ Kustomisasi
+
+```tsx
+<Alert
+  icon="Warning"
+  title="Peringatan"
+  message="Pastikan semua data telah diisi."
+  color="warning"
+  style={{ marginTop: 16 }}
+  titleStyle={{ fontSize: 16 }}
+  messageStyle={{ fontStyle: 'italic' }}
+/>
+```

package/src/Avatar/Avatar.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Image, View, StyleSheet } from 'react-native';
+import type { AvatarProps, AvatarSizeType } from './type';
+import Typography from '../Typography/Typography';
+
+const SIZE_MAP: Record<AvatarSizeType, number> = {
+  small: 30,
+  medium: 40,
+  large: 50,
+};
+
+const Avatar: React.FC<AvatarProps> = ({
+  size = 'medium',
+  source,
+  name,
+  backgroundColor = '#ccc',
+  textColor = '#fff',
+  style,
+}) => {
+  const avatarSize = SIZE_MAP[size] || SIZE_MAP.medium;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: avatarSize,
+          height: avatarSize,
+          borderRadius: avatarSize / 2,
+          backgroundColor,
+        },
+        style,
+      ]}
+    >
+      {source ? (
+        <Image
+          source={source}
+          style={{
+            width: avatarSize,
+            height: avatarSize,
+            borderRadius: avatarSize / 2,
+          }}
+        />
+      ) : (
+        <Typography
+          variant="p2"
+          weight="medium"
+          style={[styles.initials, { color: textColor }]}
+        >
+          {name}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  initials: {
+    textAlign: 'center',
+  },
+});
+
+export default Avatar;

package/src/Avatar/AvatarGroup.tsx

@@ -0,0 +1,135 @@
+import { View, Image, Text, StyleSheet } from 'react-native';
+import { Icon } from '../Icon';
+import Color from '../Color/Color';
+import type { AvatarGroupProps, AvatarSizeType } from './type';
+
+const SIZE_MAP: Record<AvatarSizeType, number> = {
+  small: 30,
+  medium: 40,
+  large: 50,
+};
+
+const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  avatars = [],
+  maxVisible = 5,
+  size = 'medium',
+}) => {
+  const avatarSize = SIZE_MAP[size] || SIZE_MAP.medium;
+  const visibleAvatars = avatars.slice(0, maxVisible);
+  const remainingCount = avatars.length - maxVisible;
+
+  return (
+    <View style={[styles.container, { height: avatarSize }]}>
+      {visibleAvatars.map((avatar, index) => {
+        const hasImage = avatar.source;
+        const initials = avatar.name;
+        const styleSize = {
+          width: avatarSize,
+          height: avatarSize,
+          borderRadius: avatarSize / 2,
+        };
+
+        return (
+          <View
+            key={index}
+            style={[
+              styles.avatarWrapper,
+              {
+                left: index * (avatarSize * 0.6),
+                zIndex: avatars.length - index,
+              },
+            ]}
+          >
+            {hasImage ? (
+              <Image
+                source={avatar.source}
+                style={[styles.avatar, styleSize]}
+              />
+            ) : initials ? (
+              <View style={[styles.initialWrapper, styleSize]}>
+                <Text
+                  style={[styles.initialText, { fontSize: avatarSize * 0.4 }]}
+                >
+                  {initials}
+                </Text>
+              </View>
+            ) : (
+              <View style={[styles.iconWrapper, styleSize]}>
+                <Icon name="User" color={Color.base.white100} />
+              </View>
+            )}
+          </View>
+        );
+      })}
+
+      {remainingCount > 0 && (
+        <View
+          style={[
+            styles.avatarWrapper,
+            { left: visibleAvatars.length * (avatarSize * 0.6), zIndex: 0 },
+          ]}
+        >
+          <View
+            style={[
+              styles.remaining,
+              {
+                width: avatarSize,
+                height: avatarSize,
+                borderRadius: avatarSize / 2,
+              },
+            ]}
+          >
+            <Text
+              style={[styles.remainingText, { fontSize: avatarSize * 0.4 }]}
+            >
+              +{remainingCount}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  avatarWrapper: {
+    position: 'absolute',
+  },
+  avatar: {
+    borderWidth: 2,
+    borderColor: Color.base.white100,
+  },
+  initialWrapper: {
+    backgroundColor: Color.gray[400],
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: Color.base.white100,
+  },
+  iconWrapper: {
+    backgroundColor: Color.gray[400],
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: Color.base.white100,
+  },
+  initialText: {
+    color: Color.base.white100,
+    fontWeight: 'bold',
+  },
+  remaining: {
+    backgroundColor: Color.gray[400],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  remainingText: {
+    color: Color.base.white100,
+    fontWeight: 'bold',
+  },
+});
+
+export default AvatarGroup;

package/src/Avatar/README_AVATAR.md

@@ -0,0 +1,57 @@
+# 🧑‍🎨 Avatar Component
+
+Komponen `Avatar` digunakan untuk menampilkan foto pengguna atau inisial nama jika foto tidak tersedia.
+![Deskripsi Alt](../../assets/doc/Avatar/Avatar.png)
+
+## ✨ Fitur
+
+- Menampilkan gambar avatar dari `Image source`
+- Menampilkan inisial nama jika gambar tidak tersedia
+- Mendukung tiga ukuran: kecil, sedang, besar
+- Warna latar dan teks dapat dikustomisasi
+
+## 🧱 Props
+
+| Prop            | Tipe                    | Default     | Deskripsi                                                               |
+|-----------------|-------------------------|-------------|-------------------------------------------------------------------------|
+| `size`          | `'small'` \| `'medium'` \| `'large'` | `'medium'` | Ukuran avatar                                                          |
+| `source`        | `ImageSourcePropType`   | `undefined` | Sumber gambar avatar                                                   |
+| `name`          | `string`                | `undefined` | Digunakan untuk menampilkan inisial jika `source` tidak tersedia       |
+| `backgroundColor` | `string`              | `'#ccc'`    | Warna latar belakang jika tanpa gambar                                 |
+| `textColor`     | `string`                | `'#fff'`    | Warna teks inisial jika tanpa gambar                                   |
+| `style`         | `ViewStyle`             | `undefined` | Gaya tambahan untuk container                                          |
+
+## 📏 Ukuran Avatar
+
+| Ukuran  | Nilai pixel |
+|---------|-------------|
+| small   | 30          |
+| medium  | 40          |
+| large   | 50          |
+
+## 🧪 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import Avatar from './Avatar'; // sesuaikan path
+
+export default function ProfileHeader() {
+  return (
+    <>
+      {/* Dengan gambar */}
+      <Avatar
+        size="large"
+        source={{ uri: 'https://example.com/profile.jpg' }}
+      />
+
+      {/* Tanpa gambar, menggunakan nama */}
+      <Avatar
+        size="medium"
+        name="SR"
+        backgroundColor="#1E88E5"
+        textColor="#fff"
+      />
+    </>
+  );
+}
+```

package/src/Avatar/README_AVATARGROUP.md

@@ -0,0 +1,58 @@
+
+# AvatarGroup Component (React Native)
+
+The `AvatarGroup` component displays a group of user avatars. It supports image avatars, initials-based avatars, and a fallback icon. If there are more avatars than the maximum visible count, it displays a "+X" bubble.
+![Deskripsi Alt](../../assets/doc/Avatar/AvatarGroup.png)
+---
+
+## 📦 Props
+
+### `AvatarGroupProps`
+
+| Prop         | Type                                | Default   | Description                                      |
+|--------------|-------------------------------------|-----------|--------------------------------------------------|
+| `avatars`    | `AvatarProps[]`                     | `[]`      | Array of avatar objects.                         |
+| `maxVisible` | `number`                            | `5`       | Max number of avatars to display.                |
+| `size`       | `'small' | 'medium' | 'large'`     | `'medium'` | Size of avatars.                                 |
+
+### `AvatarProps`
+
+| Prop            | Type                  | Description                                         |
+|-----------------|-----------------------|-----------------------------------------------------|
+| `size`          | `'small' | 'medium' | 'large'` | Size of individual avatar (optional).              |
+| `source`        | `ImageSourcePropType` | Image source for avatar.                           |
+| `name`          | `string`              | Initials to show if image is not available.        |
+| `backgroundColor` | `string`            | Background color for initials or icon avatar.      |
+| `textColor`     | `string`              | Color of the initials text.                        |
+| `style`         | `object`              | Additional style for individual avatar container.  |
+
+---
+
+## 🖼️ Example Usage
+
+```tsx
+import AvatarGroup from './AvatarGroup';
+
+const teamMembers = [
+  { name: 'JS', backgroundColor: '#3498db' },
+  { name: 'EM', source: require('./assets/emily.png') },
+  { name: 'RS' },
+  { name: 'AB', textColor: '#fff' },
+  { name: 'ZK' },
+  { name: 'XY' },
+];
+
+<AvatarGroup avatars={teamMembers} maxVisible={4} size="small" />
+```
+
+---
+
+## 🎨 Avatar Sizes
+
+| Size    | Dimension (px) |
+|---------|----------------|
+| small   | 30             |
+| medium  | 40             |
+| large   | 50             |
+
+---

package/src/Avatar/type.tsx

@@ -0,0 +1,17 @@
+import type { ImageSourcePropType } from 'react-native';
+
+export type AvatarSizeType = 'small' | 'medium' | 'large';
+export interface AvatarProps {
+  size?: AvatarSizeType;
+  source?: ImageSourcePropType;
+  name?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  style?: object;
+}
+
+export interface AvatarGroupProps {
+  avatars?: AvatarProps[];
+  maxVisible?: number;
+  size?: AvatarSizeType;
+}