@herca/rn-kit 0.1.0

package/src/CheckBox/README_CHECKBOXLIST.md

@@ -0,0 +1,41 @@
+# ✅ Komponen CheckBoxList
+
+`CheckBoxList` adalah komponen React Native untuk menampilkan daftar checkbox berdasarkan array item yang dapat dipilih lebih dari satu.
+
+---
+
+## 🚀 Contoh Penggunaan
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import CheckBoxList from './CheckBoxList';
+
+export default function App() {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  return (
+    <View>
+      <CheckBoxList
+        items={[
+          { label: 'Item A', value: 'a' },
+          { label: 'Item B', value: 'b' },
+          { label: 'Item C', value: 'c' },
+        ]}
+        selectedValues={selected}
+        onChange={setSelected}
+        direction="vertical"
+      />
+    </View>
+  );
+}
+
+## ⚙️ Props
+
+| Prop             | Tipe                           | Deskripsi                                                                    |                                                 |
+| ---------------- | ------------------------------ | ---------------------------------------------------------------------------- | ----------------------------------------------- |
+| `items`          | `CheckBoxListItem[]`           | Daftar item yang akan ditampilkan. Setiap item memiliki `label` dan `value`. |                                                 |
+| `selectedValues` | `string[]`                     | Nilai-nilai yang saat ini sedang dipilih.                                    |                                                 |
+| `onChange`       | `(selected: string[]) => void` | Callback saat nilai pilihan berubah.                                         |                                                 |
+| `direction`      | \`'vertical'                   | 'horizontal'\` (opsional)                                                    | Arah tampilan checkbox (default: `'vertical'`). |
+

package/src/Chip/Chip.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { FlatList, StyleSheet } from 'react-native';
+import {
+  type ChipOptionProps,
+  type ChipProps,
+  type ChipSelectedProps,
+  type ChipValue,
+} from './type';
+import ChipItem from './ChipItem';
+
+const Chip: React.FC<ChipProps> = ({
+  options,
+  selected = [],
+  onSelect,
+  onPress,
+  direction = 'horizontal',
+  color = 'default',
+  renderItem,
+  multiple = false,
+  scrollable = true,
+  block = false,
+  size = 'medium',
+  onRefresh,
+  refreshing = false,
+}) => {
+  const isHorizontal = direction === 'horizontal';
+
+  const normalizeSelected = (val: ChipSelectedProps) =>
+    Array.isArray(val) ? val : val ? [val] : [];
+
+  const [internalSelected, setInternalSelected] = useState<ChipSelectedProps>(
+    normalizeSelected(selected)
+  );
+
+  useEffect(() => {
+    const newSelected = normalizeSelected(selected);
+    if (JSON.stringify(newSelected) !== JSON.stringify(internalSelected)) {
+      setInternalSelected(newSelected);
+    }
+  }, [selected, internalSelected]);
+
+  const isSelected = (value: ChipValue) => internalSelected.includes(value);
+
+  const handleSelect = (value: string | number) => {
+    let newSelected: ChipSelectedProps;
+
+    if (multiple || (!multiple && internalSelected.length === 0)) {
+      newSelected = isSelected(value)
+        ? internalSelected.filter((v) => v !== value)
+        : [...internalSelected, value];
+    } else {
+      newSelected = [value];
+    }
+
+    setInternalSelected(newSelected);
+
+    if (onSelect) {
+      onSelect(newSelected);
+    }
+  };
+
+  const numColumns = useMemo(() => {
+    if (isHorizontal || block) return 1;
+    return 2;
+  }, [block, isHorizontal]);
+
+  const handleOnPresChipItem = (isDisabled: boolean, item: ChipOptionProps) => {
+    !isDisabled && handleSelect(item.value);
+    onPress?.(item.value);
+  };
+
+  return (
+    <FlatList
+      data={options}
+      renderItem={({ item }) => (
+        <ChipItem
+          item={item}
+          isSelected={() => isSelected(item.value)}
+          color={color}
+          block={block}
+          onPress={handleOnPresChipItem}
+          size={size}
+          renderItem={renderItem}
+        />
+      )}
+      keyExtractor={(item) => String(item.value)}
+      horizontal={isHorizontal}
+      onRefresh={onRefresh}
+      refreshing={refreshing}
+      scrollEnabled={scrollable}
+      keyboardShouldPersistTaps="always"
+      numColumns={numColumns}
+      contentContainerStyle={[
+        styles.container,
+        {
+          flexDirection: isHorizontal ? 'row' : 'column',
+          alignItems: block ? 'stretch' : 'flex-start',
+        },
+      ]}
+      columnWrapperStyle={
+        numColumns > 1 ? { gap: 8, flexWrap: 'wrap' } : undefined
+      }
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  chip: {
+    borderRadius: 8,
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+  },
+  chipSmall: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  chipMedium: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  chipLarge: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  blockChip: {
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+});
+
+export default Chip;

package/src/Chip/ChipItem.tsx

@@ -0,0 +1,124 @@
+import { Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import Typography from '../Typography/Typography';
+import { CHIP_COLOR_MAP, type ChipItem, type ChipOptionProps } from './type';
+import type { ColorVariantType } from '../Color/type';
+
+export default function ChipItem({
+  item,
+  isSelected,
+  color = 'default',
+  block,
+  size,
+  renderItem,
+  isHorizontal,
+  onPress,
+}: ChipItem) {
+  const validColors: ColorVariantType[] = [
+    'default',
+    'success',
+    'danger',
+    'primary',
+    'warning',
+    'info',
+    'purple',
+    'orange',
+  ];
+
+  const safeColor = validColors.includes(color) ? color : 'default';
+  const colors = CHIP_COLOR_MAP[safeColor];
+
+  const selectedState = isSelected(item.value ? true : false);
+  const isDisabled = item.disabled ?? false;
+
+  const dynamicStyle: ViewStyle = {
+    borderColor: colors.borderColor,
+    backgroundColor: colors.backgroundColor,
+  };
+
+  if (selectedState) {
+    dynamicStyle.borderColor = colors.selectedBorderColor;
+    dynamicStyle.backgroundColor = colors.selectedBackgroundColor;
+  }
+
+  if (isDisabled) {
+    dynamicStyle.borderColor = colors.disabledBorderColor;
+    dynamicStyle.backgroundColor = colors.disabledBackgroundColor;
+  }
+
+  const isBlockMode = block && !isHorizontal;
+
+  const getSizeStyle = () => {
+    switch (size) {
+      case 'small':
+        return styles.chipSmall;
+      case 'large':
+        return styles.chipLarge;
+      case 'medium':
+      default:
+        return styles.chipMedium;
+    }
+  };
+
+  const handleOnPres = (disabled: boolean, val: ChipOptionProps) => {
+    onPress?.(disabled, val);
+  };
+
+  return (
+    <Pressable
+      key={item.value}
+      style={[
+        styles.chip,
+        getSizeStyle(),
+        dynamicStyle,
+        isBlockMode && styles.blockChip,
+      ]}
+      onPress={() => handleOnPres(isDisabled, item)}
+      disabled={isDisabled}
+    >
+      {renderItem ? (
+        renderItem(item, selectedState, isDisabled)
+      ) : (
+        <Typography
+          variant="t2"
+          style={{
+            fontSize: size === 'small' ? 12 : size === 'large' ? 16 : 14,
+            color: isDisabled
+              ? colors.disabledTextColor
+              : selectedState
+                ? colors.selectedTextColor
+                : colors.textColor,
+          }}
+        >
+          {item.label}
+        </Typography>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  chip: {
+    borderRadius: 8,
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+  },
+  chipSmall: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  chipMedium: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  chipLarge: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  blockChip: {
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+});

package/src/Chip/README.md

@@ -0,0 +1,89 @@
+# 📦 Komponen `Chip` – React Native
+
+Komponen `Chip` digunakan untuk menampilkan daftar pilihan seperti tag, filter, atau kategori dalam bentuk tombol kecil (chip). Komponen ini mendukung pilihan tunggal maupun jamak, arah horizontal/vertikal, dan gaya warna yang dapat disesuaikan.
+![Deskripsi Alt](../../assets/doc/Chip/Chip.png)
+
+---
+
+## 🔧 Props
+
+| Nama Props       | Tipe                                         | Default        | Deskripsi                                                                 |
+|------------------|----------------------------------------------|----------------|--------------------------------------------------------------------------|
+| `options`        | `ChipOption[]`                               | –              | Daftar opsi yang akan ditampilkan. Setiap opsi memiliki `label`, `value`, dan opsional `disabled`. |
+| `selected`       | `string \| string[] \| null \| undefined` | `[]`           | Nilai yang dipilih. Bisa berupa string (single), array (multiple), atau null. |
+| `onSelect`       | `(value: string \| string[]) => void`       | –              | Fungsi callback saat chip dipilih. Akan mengembalikan value terpilih. |
+| `multiple`       | `boolean`                                    | `false`        | Jika `true`, bisa memilih lebih dari satu chip.                        |
+| `direction`      | `'horizontal' \| 'vertical'`                | `'horizontal'` | Arah layout chip: horizontal (dalam baris) atau vertical (ke bawah).    |
+| `scrollable`     | `boolean`                                    | `true` (horizontal) / `false` (vertical) | Apakah chip bisa digulir (scroll) saat melebihi lebar/tinggi.          |
+| `block`          | `boolean`                                    | `false`        | Jika `true` dan `direction='vertical'`, maka chip akan memenuhi lebar kontainer (full width). |
+| `color`          | `'default' \| 'success' \| 'danger' \| 'primary' \| 'warning' \| 'info' \| 'orange' \| 'purple'` | `'default'` | Warna tema chip.                                                         |
+| `renderItem`     | `(item, isSelected, isDisabled) => ReactNode`| –              | Jika ingin custom tampilan chip secara manual.                          |
+
+---
+
+## 🧪 Contoh Penggunaan
+
+### Single Select Horizontal (default)
+```tsx
+<Chip
+  options={[
+    { label: 'A', value: 'a' },
+    { label: 'B', value: 'b' },
+  ]}
+  selected="a"
+  onSelect={val => console.log(val)}
+/>
+```
+
+### Multiple Select Vertical Block
+```tsx
+<Chip
+  options={[
+    { label: 'One', value: '1' },
+    { label: 'Two', value: '2' },
+  ]}
+  selected={['1']}
+  onSelect={val => console.log(val)}
+  multiple
+  direction="vertical"
+  block
+  scrollable={false}
+/>
+```
+
+---
+
+## 🎨 Warna yang Didukung
+
+- `default`
+- `success`
+- `danger`
+- `primary`
+- `warning`
+- `info`
+- `orange`
+- `purple`
+
+---
+
+## 📂 Tipe `ChipOption`
+
+```ts
+interface ChipOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+```
+
+---
+
+## 🧩 Catatan
+
+- Jika `multiple = false`, maka `onSelect` mengembalikan satu string.
+- Jika `multiple = true`, maka `onSelect` mengembalikan array string.
+- `block` hanya berfungsi bila arah `vertical`.
+- gunakan scrollable = false jika ingin membungkus di ScrollView
+---
+
+© 2025 – Komponen Chip by YourTeam

package/src/Chip/type.tsx

@@ -0,0 +1,152 @@
+import type { ColorValue } from 'react-native';
+import Color from '../Color/Color';
+import type { ColorVariantType } from '../Color/type';
+
+export const CHIP_COLOR_MAP: Record<
+  ColorVariantType,
+  {
+    backgroundColor: ColorValue;
+    textColor: ColorValue;
+    borderColor: ColorValue;
+    selectedBackgroundColor: ColorValue;
+    selectedBorderColor: ColorValue;
+    selectedTextColor: ColorValue;
+    disabledBackgroundColor: ColorValue;
+    disabledBorderColor: ColorValue;
+    disabledTextColor: ColorValue;
+  }
+> = {
+  default: {
+    backgroundColor: Color.gray[600],
+    textColor: Color.base.white100,
+    borderColor: Color.gray[600],
+    selectedBackgroundColor: Color.gray[600],
+    selectedBorderColor: Color.gray[200],
+    selectedTextColor: Color.gray[200],
+    disabledBackgroundColor: Color.gray[600],
+    disabledBorderColor: Color.gray[200],
+    disabledTextColor: Color.gray[200],
+  },
+  success: {
+    backgroundColor: Color.base.white100,
+    textColor: Color.success[900],
+    borderColor: Color.success[200],
+    selectedBackgroundColor: Color.success[50],
+    selectedBorderColor: Color.success[200],
+    selectedTextColor: Color.success[900],
+    disabledBackgroundColor: Color.success[100],
+    disabledBorderColor: Color.success[100],
+    disabledTextColor: Color.base.white100,
+  },
+  danger: {
+    backgroundColor: Color.base.white100,
+    textColor: Color.danger[900],
+    borderColor: Color.danger[200],
+    selectedBackgroundColor: Color.danger[50],
+    selectedBorderColor: Color.danger[200],
+    selectedTextColor: Color.danger[900],
+    disabledBackgroundColor: Color.danger[100],
+    disabledBorderColor: Color.danger[100],
+    disabledTextColor: Color.base.white100,
+  },
+  primary: {
+    backgroundColor: Color.base.white100,
+    textColor: Color.primary[1000],
+    borderColor: Color.primary[200],
+    selectedBackgroundColor: Color.primary[50],
+    selectedBorderColor: Color.primary[200],
+    selectedTextColor: Color.primary[1000],
+    disabledBackgroundColor: Color.primary[100],
+    disabledBorderColor: Color.primary[100],
+    disabledTextColor: Color.base.white100,
+  },
+  warning: {
+    backgroundColor: Color.base.white100,
+    textColor: Color.warning[900],
+    borderColor: Color.warning[200],
+    selectedBackgroundColor: Color.warning[50],
+    selectedBorderColor: Color.warning[200],
+    selectedTextColor: Color.warning[900],
+    disabledBackgroundColor: Color.warning[100],
+    disabledBorderColor: Color.warning[100],
+    disabledTextColor: Color.base.white100,
+  },
+  info: {
+    backgroundColor: Color.base.white100,
+    textColor: Color.info[900],
+    borderColor: Color.info[200],
+    selectedBackgroundColor: Color.info[50],
+    selectedBorderColor: Color.info[200],
+    selectedTextColor: Color.info[900],
+    disabledBackgroundColor: Color.info[100],
+    disabledBorderColor: Color.info[100],
+    disabledTextColor: Color.base.white100,
+  },
+  orange: {
+    backgroundColor: Color.base.white100,
+    textColor: Color.orange[900],
+    borderColor: Color.orange[200],
+    selectedBackgroundColor: Color.orange[50],
+    selectedBorderColor: Color.orange[200],
+    selectedTextColor: Color.orange[900],
+    disabledBackgroundColor: Color.orange[100],
+    disabledBorderColor: Color.orange[100],
+    disabledTextColor: Color.base.white100,
+  },
+  purple: {
+    backgroundColor: Color.base.white100,
+    textColor: Color.purple[900],
+    borderColor: Color.purple[200],
+    selectedBackgroundColor: Color.purple[50],
+    selectedBorderColor: Color.purple[200],
+    selectedTextColor: Color.purple[900],
+    disabledBackgroundColor: Color.purple[100],
+    disabledBorderColor: Color.purple[100],
+    disabledTextColor: Color.base.white100,
+  },
+};
+
+export interface ChipOptionProps {
+  label: string | number;
+  value: string | number;
+  disabled?: boolean;
+  [key: string]: string | number | boolean | undefined;
+}
+export type ChipValue = number | string | null | undefined | boolean;
+
+export type ChipSelectedProps = ChipValue[];
+
+export type ChipSizeProps = 'small' | 'medium' | 'large';
+export type ChipRenderItemFn = (
+  item: ChipOptionProps,
+  selected: boolean,
+  disabled: boolean
+) => React.ReactNode;
+
+export type ChipOnSelectProps = (value: ChipSelectedProps) => void;
+
+export interface ChipItem {
+  item: ChipOptionProps;
+  color?: ColorVariantType;
+  block?: boolean;
+  isSelected: (value: boolean) => boolean;
+  size?: ChipSizeProps;
+  renderItem?: ChipRenderItemFn;
+  isHorizontal?: boolean;
+  onPress?: (isDisabled: boolean, value: ChipOptionProps) => void;
+}
+export interface ChipProps {
+  options: ChipOptionProps[];
+  selected?: ChipSelectedProps;
+  onSelect?: ChipOnSelectProps;
+  onPress?: (value: string | number | undefined | null) => void;
+  direction?: 'horizontal' | 'vertical';
+  scrollable?: boolean;
+  block?: boolean;
+  multiple?: boolean;
+  color?: ColorVariantType;
+  size?: ChipSizeProps;
+  renderItem?: ChipRenderItemFn;
+  onRefresh?: () => void;
+  refreshing?: boolean;
+}

package/src/Color/Color.tsx

@@ -0,0 +1,133 @@
+const Color = {
+  base: {
+    white100: '#FFFFFF',
+    white60: 'rgba(255, 255, 255, 0.6)',
+    black100: '#282828',
+    black60: 'rgba(40, 40, 40, 0.6)',
+  },
+
+  gray: {
+    50: '#F7F7F7',
+    100: '#F2F2F2',
+    200: '#EBEBEB',
+    300: '#E5E5E5',
+    400: '#DEDEDE',
+    500: '#D7D7D7',
+    600: '#B4B4B4',
+    700: '#909090',
+    800: '#6C6C6C',
+    900: '#484848',
+    950: '#2B2B2B',
+  },
+
+  primary: {
+    50: '#F1F2FF',
+    100: '#E6E8FF',
+    200: '#D0D5FF',
+    300: '#ABB1FF',
+    400: '#7B7EFF',
+    500: '#4D46FF',
+    600: '#3421FF',
+    700: '#250FF2',
+    800: '#1E0CCB',
+    900: '#1B0CA6',
+    950: '#14087D',
+    1000: '#080355',
+  },
+
+  warning: {
+    50: '#FFFAEB',
+    100: '#FEF0C7',
+    200: '#FEDF89',
+    300: '#FEC84B',
+    400: '#FDB022',
+    500: '#F79009',
+    600: '#DC6803',
+    700: '#B54708',
+    800: '#93370D',
+    900: '#7A2E0E',
+    950: '#6B2508',
+  },
+
+  danger: {
+    50: '#FEF3F2',
+    100: '#FEE4E2',
+    200: '#FECDCA',
+    300: '#FDA29B',
+    400: '#F97066',
+    500: '#F04438',
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A',
+    950: '#66180C',
+  },
+
+  success: {
+    50: '#E5FFE8',
+    100: '#CEFBD4',
+    200: '#9EF7B3',
+    300: '#6BE995',
+    400: '#44D382',
+    500: '#12B76A',
+    600: '#0D9D68',
+    700: '#098363',
+    800: '#056A59',
+    900: '#035752',
+    950: '#034C48',
+  },
+
+  info: {
+    50: '#E6FBFF',
+    100: '#CDF8FF',
+    200: '#9DEBFF',
+    300: '#6CD8FF',
+    400: '#48C5FF',
+    500: '#0CA2FF',
+    600: '#077EDA',
+    700: '#065EB7',
+    800: '#012F7A',
+    900: '#012F7A',
+    950: '#052B69',
+  },
+  orange: {
+    50: '#FFFBED',
+    100: '#FFF7D4',
+    200: '#FFEBA8',
+    300: '#FFDA71',
+    400: '#FFBF38',
+    500: '#FDA712',
+    600: '#F79009',
+    700: '#C56A09',
+    800: '#9D530F',
+    900: '#7E4510',
+    950: '#442106',
+  },
+  purple: {
+    50: '#eeefff',
+    100: '#e0e2ff',
+    200: '#c8c9fd',
+    300: '#a6a6fb',
+    400: '#8c82f7',
+    500: '#7761ef',
+    600: '#6c48e3',
+    700: '#5d3ac8',
+    800: '#4c31a2',
+    900: '#402f80',
+    950: '#261c4a',
+  },
+
+  divider: {
+    25: 'rgba(40, 40, 40, 0.12)',
+  },
+
+  disabled: {
+    25: 'rgba(40, 40, 40, 0.12)',
+  },
+
+  shadow: {
+    // kamu bisa tambahkan shadow warna di sini jika ada
+  },
+};
+
+export default Color;