@herca/rn-kit 0.1.0

package/lib/module/Avatar/AvatarGroup.js

@@ -0,0 +1,118 @@
+"use strict";
+
+import { View, Image, Text, StyleSheet } from 'react-native';
+import { Icon } from "../Icon/index.js";
+import Color from "../Color/Color.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SIZE_MAP = {
+  small: 30,
+  medium: 40,
+  large: 50
+};
+const AvatarGroup = ({
+  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 /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      height: avatarSize
+    }],
+    children: [visibleAvatars.map((avatar, index) => {
+      const hasImage = avatar.source;
+      const initials = avatar.name;
+      const styleSize = {
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius: avatarSize / 2
+      };
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.avatarWrapper, {
+          left: index * (avatarSize * 0.6),
+          zIndex: avatars.length - index
+        }],
+        children: hasImage ? /*#__PURE__*/_jsx(Image, {
+          source: avatar.source,
+          style: [styles.avatar, styleSize]
+        }) : initials ? /*#__PURE__*/_jsx(View, {
+          style: [styles.initialWrapper, styleSize],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.initialText, {
+              fontSize: avatarSize * 0.4
+            }],
+            children: initials
+          })
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [styles.iconWrapper, styleSize],
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "User",
+            color: Color.base.white100
+          })
+        })
+      }, index);
+    }), remainingCount > 0 && /*#__PURE__*/_jsx(View, {
+      style: [styles.avatarWrapper, {
+        left: visibleAvatars.length * (avatarSize * 0.6),
+        zIndex: 0
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.remaining, {
+          width: avatarSize,
+          height: avatarSize,
+          borderRadius: avatarSize / 2
+        }],
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: [styles.remainingText, {
+            fontSize: avatarSize * 0.4
+          }],
+          children: ["+", remainingCount]
+        })
+      })
+    })]
+  });
+};
+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;
+//# sourceMappingURL=AvatarGroup.js.map

package/lib/module/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Image","Text","StyleSheet","Icon","Color","jsx","_jsx","jsxs","_jsxs","SIZE_MAP","small","medium","large","AvatarGroup","avatars","maxVisible","size","avatarSize","visibleAvatars","slice","remainingCount","length","style","styles","container","height","children","map","avatar","index","hasImage","source","initials","name","styleSize","width","borderRadius","avatarWrapper","left","zIndex","initialWrapper","initialText","fontSize","iconWrapper","color","base","white100","remaining","remainingText","create","flexDirection","position","borderWidth","borderColor","backgroundColor","gray","justifyContent","alignItems","fontWeight"],"sourceRoot":"../../../src","sources":["Avatar/AvatarGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/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/lib/module/Avatar/type.js

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

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

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

package/lib/module/Badge/Badge.js

@@ -0,0 +1,119 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Color from "../Color/Color.js";
+import Typography from "../Typography/Typography.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const COLORS = {
+  default: {
+    background: Color.gray[100],
+    fontColor: Color.gray[800]
+  },
+  primary: {
+    background: Color.primary[50],
+    fontColor: Color.primary[1000]
+  },
+  success: {
+    background: Color.success[50],
+    fontColor: Color.success[500]
+  },
+  info: {
+    background: Color.info[50],
+    fontColor: Color.info[500]
+  },
+  danger: {
+    background: Color.danger[50],
+    fontColor: Color.danger[600]
+  },
+  warning: {
+    background: Color.warning[50],
+    fontColor: Color.warning[300]
+  },
+  orange: {
+    background: Color.orange[50],
+    fontColor: Color.orange[500]
+  },
+  purple: {
+    background: Color.purple[50],
+    fontColor: Color.purple[500]
+  }
+};
+const SIZE_MAP = {
+  small: {
+    height: 18,
+    fontSize: 't3',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  medium: {
+    height: 32,
+    fontSize: 't1',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8
+  }
+};
+const Badge = ({
+  value,
+  size = 'medium',
+  color = 'default',
+  dot = false,
+  children
+}) => {
+  const safeSize = ['small', 'medium'].includes(size) ? size : 'medium';
+  const {
+    background,
+    fontColor
+  } = COLORS[color];
+  const {
+    height,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius
+  } = SIZE_MAP[safeSize];
+  if (dot) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.dot, {
+        height: height,
+        paddingHorizontal: paddingHorizontal,
+        paddingVertical: paddingVertical,
+        borderRadius: borderRadius,
+        backgroundColor: background
+      }]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.badge, {
+      height: height,
+      borderRadius: 8,
+      backgroundColor: background,
+      paddingHorizontal: paddingHorizontal,
+      paddingVertical: paddingVertical
+    }],
+    children: children ? children : /*#__PURE__*/_jsx(Typography, {
+      color: fontColor,
+      variant: SIZE_MAP[safeSize].fontSize,
+      weight: "medium",
+      children: value
+    })
+  });
+};
+const styles = StyleSheet.create({
+  badge: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexWrap: 'wrap'
+  },
+  text: {
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  dot: {
+    alignSelf: 'flex-start'
+  }
+});
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/module/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Color","Typography","jsx","_jsx","COLORS","default","background","gray","fontColor","primary","success","info","danger","warning","orange","purple","SIZE_MAP","small","height","fontSize","paddingHorizontal","paddingVertical","borderRadius","medium","Badge","value","size","color","dot","children","safeSize","includes","style","styles","backgroundColor","badge","variant","weight","create","justifyContent","alignItems","alignSelf","flexWrap","text","fontWeight","textAlign"],"sourceRoot":"../../../src","sources":["Badge/Badge.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Badge/README.md

@@ -0,0 +1,64 @@
+# 🔖 Badge Component
+
+Komponen `Badge` digunakan untuk menampilkan label kecil yang memberikan informasi tambahan seperti status atau notifikasi.
+![Deskripsi Alt](../../assets/doc/Badge/Badge.png)
+
+## ✨ Fitur
+
+- Mendukung warna varian seperti success, warning, danger, dll
+- Dua ukuran tersedia: `small` dan `medium`
+- Mode `dot` untuk hanya menampilkan titik status kecil
+- Bisa menggunakan `children` untuk isi kustom atau gunakan `value` sebagai isi teks
+
+## 🧱 Props
+
+| Prop       | Tipe                                 | Default     | Deskripsi                                                  |
+|------------|--------------------------------------|-------------|------------------------------------------------------------|
+| `value`    | `string \\| number \\| ReactNode`    | `undefined` | Nilai yang ditampilkan di badge jika `children` tidak ada |
+| `color`    | `'default' \\| 'primary' \\| ...`    | `'default'` | Warna badge                                                |
+| `size`     | `'small'` \\| `'medium'`             | `'medium'`  | Ukuran badge                                               |
+| `dot`      | `boolean`                            | `false`     | Jika `true`, hanya menampilkan titik kecil                 |
+| `children` | `React.ReactNode`                    | `undefined` | Jika ada, akan menggantikan `value` sebagai isi badge     |
+
+## 🎨 Warna yang Tersedia
+
+- `default`
+- `primary`
+- `success`
+- `info`
+- `warning`
+- `danger`
+- `orange`
+- `purple`
+
+## 📏 Ukuran Badge
+
+| Ukuran | Tinggi | Font     | PaddingHorizontal | PaddingVertical | BorderRadius |
+|--------|--------|----------|-------------------|------------------|---------------|
+| small  | 18     | `t3`     | 4                 | 2                | 4             |
+| medium | 24     | `t1`     | 10                | 4                | 8             |
+
+## 📦 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import Badge from './Badge'; // sesuaikan path
+
+export default function Example() {
+  return (
+    <>
+      {/* Badge dengan value */}
+      <Badge color="success" value="Aktif" />
+
+      {/* Badge dengan dot */}
+      <Badge color="danger" dot />
+
+      {/* Badge dengan children */}
+      <Badge color="warning">
+        <CustomComponent />
+      </Badge>
+    </>
+  );
+}
+
+```

package/lib/module/Badge/type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=type.js.map

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

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

package/lib/module/BottomSheet/BottomSheet.js

@@ -0,0 +1,211 @@
+"use strict";
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { View, StyleSheet, PanResponder, TouchableOpacity, Animated, Modal, KeyboardAvoidingView, Keyboard, Dimensions, SafeAreaView, Platform, StatusBar } from 'react-native';
+import Container from "../Ui/Container.js";
+import Typography from "../Typography/Typography.js";
+import Color from "../Color/Color.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight ?? 24 : 65;
+const screenHeight = Dimensions.get('window').height;
+const actualScreenHeight = screenHeight - statusBarHeight;
+const DEFAULT_PADDING_BOTTOM = 40;
+export default function BottomSheet({
+  isOpen,
+  onClose,
+  children,
+  backdrop = true,
+  closable = true,
+  onRequestClose,
+  buttonClose = false,
+  height,
+  pullBar,
+  footer
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [heightFooter, setHeightFooter] = useState(0);
+  const [heighContent, setHeighContent] = useState('auto');
+  const [maxHeight, setMaxHeight] = useState(actualScreenHeight);
+  const translateY = useRef(new Animated.Value(600)).current;
+  const panResponder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => false,
+    onPanResponderMove: (_, gestureState) => {
+      if (gestureState.dy > 0) {
+        translateY.setValue(gestureState.dy);
+      }
+    },
+    onPanResponderRelease: (_, gestureState) => {
+      if (closable && gestureState.dy > 50) {
+        handleRequestClose();
+      } else {
+        resetModalPosition();
+      }
+    }
+  })).current;
+  const hideModal = useCallback(() => {
+    if (closable) {
+      Animated.timing(translateY, {
+        toValue: 500,
+        duration: 300,
+        useNativeDriver: false
+      }).start(() => {
+        setIsVisible(false);
+        onClose && onClose(false);
+      });
+    }
+  }, [closable, translateY, onClose]);
+  const showModal = useCallback(() => {
+    setIsVisible(true);
+    Animated.spring(translateY, {
+      toValue: 0,
+      useNativeDriver: false
+    }).start();
+  }, [translateY]);
+  const handleRequestClose = e => {
+    hideModal();
+    onRequestClose && onRequestClose(e);
+  };
+  const resetModalPosition = () => {
+    Animated.spring(translateY, {
+      toValue: 0,
+      useNativeDriver: false
+    }).start();
+  };
+  useEffect(() => {
+    if (isOpen) {
+      showModal();
+    } else {
+      hideModal();
+    }
+  }, [isOpen, showModal, hideModal]);
+  useEffect(() => {
+    if (height) {
+      setHeighContent(height);
+    }
+  }, [height]);
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', e => {
+      const keyboardHeight = e.endCoordinates?.height || 300;
+      setMaxHeight(screenHeight - statusBarHeight - keyboardHeight);
+    });
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      setMaxHeight(screenHeight - statusBarHeight);
+    });
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(Modal, {
+    transparent: true,
+    visible: isVisible,
+    onRequestClose: handleRequestClose,
+    animationType: "fade",
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.modalContainer, backdrop && styles.backdrop],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleRequestClose,
+        activeOpacity: 1,
+        style: styles.backdropTouchable
+      }), /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+        behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+        enabled: true,
+        style: styles.keyboardAvoiding,
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          style: [styles.bottomSheet, {
+            transform: [{
+              translateY
+            }],
+            height: heighContent,
+            maxHeight: maxHeight,
+            paddingBottom: DEFAULT_PADDING_BOTTOM + heightFooter
+          }],
+          children: [buttonClose && /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: handleRequestClose,
+            style: styles.closeButton,
+            children: /*#__PURE__*/_jsx(Typography, {
+              children: "x"
+            })
+          }), closable && /*#__PURE__*/_jsx(View, {
+            ...panResponder.panHandlers,
+            style: styles.dragIndicatorContainer,
+            children: pullBar ? pullBar : /*#__PURE__*/_jsx(View, {
+              style: styles.dragIndicator
+            })
+          }), /*#__PURE__*/_jsx(SafeAreaView, {
+            style: [styles.contentContainer, ...(footer ? [styles.contentWithFooter] : [])],
+            children: /*#__PURE__*/_jsx(Container, {
+              children: children
+            })
+          }), footer && /*#__PURE__*/_jsx(SafeAreaView, {
+            onLayout: event => {
+              const {
+                height
+              } = event.nativeEvent.layout;
+              setHeightFooter(height);
+            },
+            style: styles.footer,
+            children: /*#__PURE__*/_jsx(Container, {
+              children: footer
+            })
+          })]
+        })
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  backdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  backdropTouchable: {
+    flex: 1
+  },
+  keyboardAvoiding: {
+    justifyContent: 'flex-end'
+  },
+  bottomSheet: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
+  },
+  closeButton: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 50,
+    top: -50,
+    right: 24,
+    zIndex: 10
+  },
+  dragIndicatorContainer: {
+    alignItems: 'center',
+    paddingBottom: 20
+  },
+  dragIndicator: {
+    width: 70,
+    height: 5,
+    marginTop: 10,
+    borderRadius: 2,
+    backgroundColor: '#ccc'
+  },
+  contentContainer: {
+    flexGrow: 1
+  },
+  contentWithFooter: {},
+  footer: {
+    backgroundColor: Color.base.white100,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10
+  }
+});
+//# sourceMappingURL=BottomSheet.js.map