@herca/rn-kit 0.1.0

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

@@ -0,0 +1,109 @@
+"use strict";
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { FlatList, StyleSheet } from 'react-native';
+import ChipItem from "./ChipItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Chip = ({
+  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 => Array.isArray(val) ? val : val ? [val] : [];
+  const [internalSelected, setInternalSelected] = useState(normalizeSelected(selected));
+  useEffect(() => {
+    const newSelected = normalizeSelected(selected);
+    if (JSON.stringify(newSelected) !== JSON.stringify(internalSelected)) {
+      setInternalSelected(newSelected);
+    }
+  }, [selected, internalSelected]);
+  const isSelected = value => internalSelected.includes(value);
+  const handleSelect = value => {
+    let newSelected;
+    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, item) => {
+    !isDisabled && handleSelect(item.value);
+    onPress?.(item.value);
+  };
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: options,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/_jsx(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;
+//# sourceMappingURL=Chip.js.map

package/lib/module/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","useMemo","FlatList","StyleSheet","ChipItem","jsx","_jsx","Chip","options","selected","onSelect","onPress","direction","color","renderItem","multiple","scrollable","block","size","onRefresh","refreshing","isHorizontal","normalizeSelected","val","Array","isArray","internalSelected","setInternalSelected","newSelected","JSON","stringify","isSelected","value","includes","handleSelect","length","filter","v","numColumns","handleOnPresChipItem","isDisabled","item","data","keyExtractor","String","horizontal","scrollEnabled","keyboardShouldPersistTaps","contentContainerStyle","styles","container","flexDirection","alignItems","columnWrapperStyle","gap","flexWrap","undefined","create","chip","borderRadius","borderWidth","alignSelf","chipSmall","paddingVertical","paddingHorizontal","chipMedium","chipLarge","blockChip","width"],"sourceRoot":"../../../src","sources":["Chip/Chip.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Chip/ChipItem.js

@@ -0,0 +1,89 @@
+"use strict";
+
+import { Pressable, StyleSheet } from 'react-native';
+import Typography from "../Typography/Typography.js";
+import { CHIP_COLOR_MAP } from "./type.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ChipItem({
+  item,
+  isSelected,
+  color = 'default',
+  block,
+  size,
+  renderItem,
+  isHorizontal,
+  onPress
+}) {
+  const validColors = ['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 = {
+    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, val) => {
+    onPress?.(disabled, val);
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    style: [styles.chip, getSizeStyle(), dynamicStyle, isBlockMode && styles.blockChip],
+    onPress: () => handleOnPres(isDisabled, item),
+    disabled: isDisabled,
+    children: renderItem ? renderItem(item, selectedState, isDisabled) : /*#__PURE__*/_jsx(Typography, {
+      variant: "t2",
+      style: {
+        fontSize: size === 'small' ? 12 : size === 'large' ? 16 : 14,
+        color: isDisabled ? colors.disabledTextColor : selectedState ? colors.selectedTextColor : colors.textColor
+      },
+      children: item.label
+    })
+  }, item.value);
+}
+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'
+  }
+});
+//# sourceMappingURL=ChipItem.js.map

package/lib/module/Chip/ChipItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","StyleSheet","Typography","CHIP_COLOR_MAP","jsx","_jsx","ChipItem","item","isSelected","color","block","size","renderItem","isHorizontal","onPress","validColors","safeColor","includes","colors","selectedState","value","isDisabled","disabled","dynamicStyle","borderColor","backgroundColor","selectedBorderColor","selectedBackgroundColor","disabledBorderColor","disabledBackgroundColor","isBlockMode","getSizeStyle","styles","chipSmall","chipLarge","chipMedium","handleOnPres","val","style","chip","blockChip","children","variant","fontSize","disabledTextColor","selectedTextColor","textColor","label","create","container","gap","borderRadius","borderWidth","alignSelf","paddingVertical","paddingHorizontal","width"],"sourceRoot":"../../../src","sources":["Chip/ChipItem.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,UAAU,QAAwB,cAAc;AACpE,OAAOC,UAAU,MAAM,6BAA0B;AACjD,SAASC,cAAc,QAA6C,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG7E,eAAe,SAASC,QAAQA,CAAC;EAC/BC,IAAI;EACJC,UAAU;EACVC,KAAK,GAAG,SAAS;EACjBC,KAAK;EACLC,IAAI;EACJC,UAAU;EACVC,YAAY;EACZC;AACQ,CAAC,EAAE;EACX,MAAMC,WAA+B,GAAG,CACtC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,CACT;EAED,MAAMC,SAAS,GAAGD,WAAW,CAACE,QAAQ,CAACR,KAAK,CAAC,GAAGA,KAAK,GAAG,SAAS;EACjE,MAAMS,MAAM,GAAGf,cAAc,CAACa,SAAS,CAAC;EAExC,MAAMG,aAAa,GAAGX,UAAU,CAACD,IAAI,CAACa,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC;EAC3D,MAAMC,UAAU,GAAGd,IAAI,CAACe,QAAQ,IAAI,KAAK;EAEzC,MAAMC,YAAuB,GAAG;IAC9BC,WAAW,EAAEN,MAAM,CAACM,WAAW;IAC/BC,eAAe,EAAEP,MAAM,CAACO;EAC1B,CAAC;EAED,IAAIN,aAAa,EAAE;IACjBI,YAAY,CAACC,WAAW,GAAGN,MAAM,CAACQ,mBAAmB;IACrDH,YAAY,CAACE,eAAe,GAAGP,MAAM,CAACS,uBAAuB;EAC/D;EAEA,IAAIN,UAAU,EAAE;IACdE,YAAY,CAACC,WAAW,GAAGN,MAAM,CAACU,mBAAmB;IACrDL,YAAY,CAACE,eAAe,GAAGP,MAAM,CAACW,uBAAuB;EAC/D;EAEA,MAAMC,WAAW,GAAGpB,KAAK,IAAI,CAACG,YAAY;EAE1C,MAAMkB,YAAY,GAAGA,CAAA,KAAM;IACzB,QAAQpB,IAAI;MACV,KAAK,OAAO;QACV,OAAOqB,MAAM,CAACC,SAAS;MACzB,KAAK,OAAO;QACV,OAAOD,MAAM,CAACE,SAAS;MACzB,KAAK,QAAQ;MACb;QACE,OAAOF,MAAM,CAACG,UAAU;IAC5B;EACF,CAAC;EAED,MAAMC,YAAY,GAAGA,CAACd,QAAiB,EAAEe,GAAoB,KAAK;IAChEvB,OAAO,GAAGQ,QAAQ,EAAEe,GAAG,CAAC;EAC1B,CAAC;EAED,oBACEhC,IAAA,CAACL,SAAS;IAERsC,KAAK,EAAE,CACLN,MAAM,CAACO,IAAI,EACXR,YAAY,CAAC,CAAC,EACdR,YAAY,EACZO,WAAW,IAAIE,MAAM,CAACQ,SAAS,CAC/B;IACF1B,OAAO,EAAEA,CAAA,KAAMsB,YAAY,CAACf,UAAU,EAAEd,IAAI,CAAE;IAC9Ce,QAAQ,EAAED,UAAW;IAAAoB,QAAA,EAEpB7B,UAAU,GACTA,UAAU,CAACL,IAAI,EAAEY,aAAa,EAAEE,UAAU,CAAC,gBAE3ChB,IAAA,CAACH,UAAU;MACTwC,OAAO,EAAC,IAAI;MACZJ,KAAK,EAAE;QACLK,QAAQ,EAAEhC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAGA,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;QAC5DF,KAAK,EAAEY,UAAU,GACbH,MAAM,CAAC0B,iBAAiB,GACxBzB,aAAa,GACXD,MAAM,CAAC2B,iBAAiB,GACxB3B,MAAM,CAAC4B;MACf,CAAE;MAAAL,QAAA,EAEDlC,IAAI,CAACwC;IAAK,CACD;EACb,GA1BIxC,IAAI,CAACa,KA2BD,CAAC;AAEhB;AAEA,MAAMY,MAAM,GAAG/B,UAAU,CAAC+C,MAAM,CAAC;EAC/BC,SAAS,EAAE;IACTC,GAAG,EAAE;EACP,CAAC;EACDX,IAAI,EAAE;IACJY,YAAY,EAAE,CAAC;IACfC,WAAW,EAAE,CAAC;IACdC,SAAS,EAAE;EACb,CAAC;EACDpB,SAAS,EAAE;IACTqB,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB,CAAC;EACDpB,UAAU,EAAE;IACVmB,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB,CAAC;EACDrB,SAAS,EAAE;IACToB,eAAe,EAAE,EAAE;IACnBC,iBAAiB,EAAE;EACrB,CAAC;EACDf,SAAS,EAAE;IACTgB,KAAK,EAAE,MAAM;IACbH,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,94 @@
+"use strict";
+
+import Color from "../Color/Color.js";
+export const CHIP_COLOR_MAP = {
+  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
+  }
+};
+//# sourceMappingURL=type.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Color","CHIP_COLOR_MAP","default","backgroundColor","gray","textColor","base","white100","borderColor","selectedBackgroundColor","selectedBorderColor","selectedTextColor","disabledBackgroundColor","disabledBorderColor","disabledTextColor","success","danger","primary","warning","info","orange","purple"],"sourceRoot":"../../../src","sources":["Chip/type.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Color/Color.js

@@ -0,0 +1,126 @@
+"use strict";
+
+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;
+//# sourceMappingURL=Color.js.map

package/lib/module/Color/Color.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Color","base","white100","white60","black100","black60","gray","primary","warning","danger","success","info","orange","purple","divider","disabled","shadow"],"sourceRoot":"../../../src","sources":["Color/Color.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Color/README.md

@@ -0,0 +1,54 @@
+# 📦 Konstanta: Color
+Konstanta Color berisi daftar token warna yang digunakan untuk styling antarmuka aplikasi menggunakan React Native. Warna-warna ini disusun berdasarkan tema dan gradasi, cocok digunakan bersama desain sistem seperti Design Token.
+
+## 🎨 Struktur Warna
+✅ Base
+Warna dasar utama:
+
+white100: putih solid
+
+white60: putih transparan 60%
+
+black100: hitam solid
+
+black60: hitam transparan 60%
+
+### ⚪ Gray (abu-abu)
+Gradasi abu-abu dari terang (gray.50) hingga gelap (gray.950), cocok untuk teks, latar, border, dsb.
+
+### 🔵 Primary
+Gradasi warna utama (biru), digunakan untuk tombol, highlight, atau elemen penting lainnya.
+
+### 🟠 Warning
+Warna peringatan, digunakan untuk menandai hal-hal seperti alert, notifikasi kuning, dll.
+
+### 🔴 Danger
+Warna untuk kondisi berbahaya atau error (merah).
+
+### 🟢 Success
+Digunakan untuk kondisi berhasil atau sukses (hijau).
+
+### 🔷 Info
+Warna tambahan untuk informasi, notifikasi, atau status sekunder.
+
+### 🟧 Orange
+Warna oranye, alternatif dari primary/warning.
+
+### 🟣 Purple
+Warna ungu, bisa digunakan untuk status spesial atau branding.
+
+🧱 Divider
+divider.25: Warna pembatas antar elemen UI.
+
+📴 Disabled
+disabled.25: Warna untuk elemen non-aktif.
+
+## Cara menggunakan 
+
+```tsx
+import Color from '@herca/rn-kit';
+
+<View style={{ backgroundColor: Color.primary[500] }} />
+<Text style={{ color: Color.gray[900] }}>Teks</Text>
+
+```

package/lib/module/Color/type.js

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

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

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