@herca/rn-kit 0.1.48 → 0.1.50

package/lib/module/Input/Input.js

@@ -7,7 +7,7 @@ import Color from "../Color/Color.js";
 import LabelForm from "../LabelForm/LabelForm.js";
 import Typography from "../Typography/Typography.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Input = ({
+const Input = /*#__PURE__*/React.forwardRef(({
   icon,
   iconRight,
   label,
@@ -22,8 +22,9 @@ const Input = ({
   secureTextEntry = false,
   iconRightColor,
   prefix,
+  required = false,
   ...rest
-}) => {
+}, ref) => {
   const [inputValue, setInputValue] = useState(value || '');
   const handleClear = () => {
     setInputValue('');
@@ -42,7 +43,8 @@ const Input = ({
   return /*#__PURE__*/_jsxs(View, {
     style: styles.gap,
     children: [label ? /*#__PURE__*/_jsx(LabelForm, {
-      title: label
+      title: label,
+      required: required
     }) : null, /*#__PURE__*/_jsxs(View, {
       style: [styles.container, {
         borderColor: hasError ? Color.danger[500] : Color.gray[100]
@@ -60,6 +62,7 @@ const Input = ({
         children: prefix
       }), /*#__PURE__*/_jsx(TextInput, {
         ...rest,
+        ref: ref,
         style: [styles.input, style],
         secureTextEntry: secureTextEntry,
         value: inputValue,
@@ -92,7 +95,7 @@ const Input = ({
       children: hint
     }) : null]
   });
-};
+});
 const styles = StyleSheet.create({
   gap: {
     gap: 4

package/lib/module/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","TextInput","View","StyleSheet","TouchableOpacity","Icon","Color","LabelForm","Typography","jsx","_jsx","jsxs","_jsxs","Input","icon","iconRight","label","style","value","clearButton","hasError","hint","onChangeText","onPressIconLeft","onPressIconRight","secureTextEntry","iconRightColor","prefix","rest","inputValue","setInputValue","handleClear","handleChange","text","showRightIcons","undefined","styles","gap","children","title","container","borderColor","danger","gray","onPress","hitSlop","name","size","color","prefixContainer","input","placeholderTextColor","rightContainer","mr8","variant","weight","create","position","height","borderRadius","paddingHorizontal","borderWidth","backgroundColor","base","white100","justifyContent","flexDirection","alignItems","paddingTop","paddingBottom","fontSize","flex","marginRight"],"sourceRoot":"../../../src","sources":["Input/Input.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","TextInput","View","StyleSheet","TouchableOpacity","Icon","Color","LabelForm","Typography","jsx","_jsx","jsxs","_jsxs","Input","forwardRef","icon","iconRight","label","style","value","clearButton","hasError","hint","onChangeText","onPressIconLeft","onPressIconRight","secureTextEntry","iconRightColor","prefix","required","rest","ref","inputValue","setInputValue","handleClear","handleChange","text","showRightIcons","undefined","styles","gap","children","title","container","borderColor","danger","gray","onPress","hitSlop","name","size","color","prefixContainer","input","placeholderTextColor","rightContainer","mr8","variant","weight","create","position","height","borderRadius","paddingHorizontal","borderWidth","backgroundColor","base","white100","justifyContent","flexDirection","alignItems","paddingTop","paddingBottom","fontSize","flex","marginRight"],"sourceRoot":"../../../src","sources":["Input/Input.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Input/README_INPUT.md

@@ -6,22 +6,23 @@ Komponen `Input` ini adalah komponen input teks yang dapat dikustomisasi dengan
 
 ## 🔧 Props
 
-| Prop               | Tipe                      | Deskripsi                                                             |
-| ------------------ | ------------------------- | --------------------------------------------------------------------- |
-| `label`            | `string`                  | Label yang ditampilkan di atas input                                  |
-| `value`            | `string`                  | Nilai dari input (kontrol dari luar)                                  |
-| `onChange`         | `(value: string) => void` | Fungsi yang dipanggil saat nilai berubah                              |
-| `icon`             | `string`                  | Nama ikon (kiri) dari library `Icon`                                  |
-| `iconRight`        | `string`                  | Nama ikon kanan dari library `Icon`                                   |
-| `clearButton`      | `boolean`                 | Menampilkan tombol `x` untuk menghapus input                          |
-| `hasError`         | `boolean`                 | Menandai input error, border akan berubah merah                       |
-| `hint`             | `string`                  | Menampilkan teks kecil di bawah input, bisa untuk error atau petunjuk |
-| `onPressIconLeft`  | `() => void`              | Fungsi saat ikon kiri diklik                                          |
-| `onPressIconRight` | `() => void`              | Fungsi saat ikon kanan diklik                                         |
-| `secureTextEntry`  | `boolean`                 | Jika `true`, menyembunyikan input (untuk password)                    |
-| `style`            | `ViewStyle`               | Style tambahan untuk input                                            |
-| `prefix`           | `React.ReactNode`         | Slot `react node` yang bisa diisi oleh seluruh komponen react         |
-| `...rest`          | `TextInputProps`          | Props lain dari React Native `TextInput`                              |
+| Prop               | Tipe                      | Deskripsi                                                              |
+| ------------------ | ------------------------- | ---------------------------------------------------------------------- |
+| `label`            | `string`                  | Label yang ditampilkan di atas input                                   |
+| `value`            | `string`                  | Nilai dari input (kontrol dari luar)                                   |
+| `onChange`         | `(value: string) => void` | Fungsi yang dipanggil saat nilai berubah                               |
+| `icon`             | `string`                  | Nama ikon (kiri) dari library `Icon`                                   |
+| `iconRight`        | `string`                  | Nama ikon kanan dari library `Icon`                                    |
+| `clearButton`      | `boolean`                 | Menampilkan tombol `x` untuk menghapus input                           |
+| `hasError`         | `boolean`                 | Menandai input error, border akan berubah merah                        |
+| `hint`             | `string`                  | Menampilkan teks kecil di bawah input, bisa untuk error atau petunjuk  |
+| `onPressIconLeft`  | `() => void`              | Fungsi saat ikon kiri diklik                                           |
+| `onPressIconRight` | `() => void`              | Fungsi saat ikon kanan diklik                                          |
+| `secureTextEntry`  | `boolean`                 | Jika `true`, menyembunyikan input (untuk password)                     |
+| `style`            | `ViewStyle`               | Style tambahan untuk input                                             |
+| `prefix`           | `React.ReactNode`         | Slot `react node` yang bisa diisi oleh seluruh komponen react          |
+| `required`         | `boolean`                 | Jika `true` maka akan menampilkan bintang berwarna merah setelah label |
+| `...rest`          | `TextInputProps`          | Props lain dari React Native `TextInput`                               |
 
 ---
 

package/lib/module/LabelForm/LabelForm.js

@@ -2,15 +2,22 @@
 
 import { View } from 'react-native';
 import Typography from "../Typography/Typography.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import Color from "../Color/Color.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function LabelForm({
-  title
+  title,
+  required
 }) {
   return /*#__PURE__*/_jsx(View, {
-    children: /*#__PURE__*/_jsx(Typography, {
+    children: /*#__PURE__*/_jsxs(Typography, {
       variant: "t2",
       weight: "semibold",
-      children: title
+      children: [title, ' ', required && /*#__PURE__*/_jsx(Typography, {
+        variant: "t2",
+        weight: "semibold",
+        color: Color.danger[500],
+        children: "*"
+      })]
     })
   });
 }

package/lib/module/LabelForm/LabelForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","Typography","jsx","_jsx","LabelForm","title","children","variant","weight"],"sourceRoot":"../../../src","sources":["LabelForm/LabelForm.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,OAAOC,UAAU,MAAM,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElD,eAAe,SAASC,SAASA,CAAC;EAAEC;AAAyB,CAAC,EAAE;EAC9D,oBACEF,IAAA,CAACH,IAAI;IAAAM,QAAA,eACHH,IAAA,CAACF,UAAU;MAACM,OAAO,EAAC,IAAI;MAACC,MAAM,EAAC,UAAU;MAAAF,QAAA,EACvCD;IAAK,CACI;EAAC,CACT,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["View","Typography","Color","jsx","_jsx","jsxs","_jsxs","LabelForm","title","required","children","variant","weight","color","danger"],"sourceRoot":"../../../src","sources":["LabelForm/LabelForm.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,OAAOC,UAAU,MAAM,6BAA0B;AACjD,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOnC,eAAe,SAASC,SAASA,CAAC;EAAEC,KAAK;EAAEC;AAAgB,CAAC,EAAE;EAC5D,oBACEL,IAAA,CAACJ,IAAI;IAAAU,QAAA,eACHJ,KAAA,CAACL,UAAU;MAACU,OAAO,EAAC,IAAI;MAACC,MAAM,EAAC,UAAU;MAAAF,QAAA,GACvCF,KAAK,EAAE,GAAG,EACVC,QAAQ,iBACPL,IAAA,CAACH,UAAU;QAACU,OAAO,EAAC,IAAI;QAACC,MAAM,EAAC,UAAU;QAACC,KAAK,EAAEX,KAAK,CAACY,MAAM,CAAC,GAAG,CAAE;QAAAJ,QAAA,EAAC;MAErE,CAAY,CACb;IAAA,CACS;EAAC,CACT,CAAC;AAEX","ignoreList":[]}

package/lib/module/Provider/LayoutWithFooter.js

@@ -1,9 +1,9 @@
 "use strict";
 
-import { StyleSheet, SafeAreaView } from 'react-native';
-import { useFooter } from "./Provider.js";
 import React from 'react';
+import { StyleSheet, View } from 'react-native';
 import Color from "../Color/Color.js";
+import { useFooter } from "./Provider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function LayoutWithFooter({
   children
@@ -11,9 +11,9 @@ export default function LayoutWithFooter({
   const {
     footer
   } = useFooter();
-  return /*#__PURE__*/_jsxs(SafeAreaView, {
+  return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(SafeAreaView, {
+    children: [/*#__PURE__*/_jsx(View, {
       style: [styles.content, footer && styles.footer],
       children: children
     }), footer]

package/lib/module/Provider/LayoutWithFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","SafeAreaView","useFooter","React","Color","jsx","_jsx","jsxs","_jsxs","LayoutWithFooter","children","footer","style","styles","container","content","create","flex","backgroundColor","base","white100","marginBottom"],"sourceRoot":"../../../src","sources":["Provider/LayoutWithFooter.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,cAAc;AACvD,SAASC,SAAS,QAAQ,eAAY;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEnC,eAAe,SAASC,gBAAgBA,CAAC;EACvCC;AAGF,CAAC,EAAE;EACD,MAAM;IAAEC;EAAO,CAAC,GAAGT,SAAS,CAAC,CAAC;EAE9B,oBACEM,KAAA,CAACP,YAAY;IAACW,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAJ,QAAA,gBACpCJ,IAAA,CAACL,YAAY;MAACW,KAAK,EAAE,CAACC,MAAM,CAACE,OAAO,EAAEJ,MAAM,IAAIE,MAAM,CAACF,MAAM,CAAE;MAAAD,QAAA,EAC5DA;IAAQ,CACG,CAAC,EACdC,MAAM;EAAA,CACK,CAAC;AAEnB;AAEA,MAAME,MAAM,GAAGb,UAAU,CAACgB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IAAEG,IAAI,EAAE,CAAC;IAAEC,eAAe,EAAEd,KAAK,CAACe,IAAI,CAACC;EAAS,CAAC;EAC5DL,OAAO,EAAE;IAAEE,IAAI,EAAE;EAAE,CAAC;EACpBN,MAAM,EAAE;IAAEU,YAAY,EAAE;EAAG;AAC7B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","View","Color","useFooter","jsx","_jsx","jsxs","_jsxs","LayoutWithFooter","children","footer","style","styles","container","content","create","flex","backgroundColor","base","white100","marginBottom"],"sourceRoot":"../../../src","sources":["Provider/LayoutWithFooter.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,KAAK,MAAM,mBAAgB;AAClC,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvC,eAAe,SAASC,gBAAgBA,CAAC;EACvCC;AAGF,CAAC,EAAE;EACD,MAAM;IAAEC;EAAO,CAAC,GAAGP,SAAS,CAAC,CAAC;EAE9B,oBACEI,KAAA,CAACN,IAAI;IAACU,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAJ,QAAA,gBAC5BJ,IAAA,CAACJ,IAAI;MAACU,KAAK,EAAE,CAACC,MAAM,CAACE,OAAO,EAAEJ,MAAM,IAAIE,MAAM,CAACF,MAAM,CAAE;MAAAD,QAAA,EAAEA;IAAQ,CAAO,CAAC,EACxEC,MAAM;EAAA,CACH,CAAC;AAEX;AAEA,MAAME,MAAM,GAAGZ,UAAU,CAACe,MAAM,CAAC;EAC/BF,SAAS,EAAE;IAAEG,IAAI,EAAE,CAAC;IAAEC,eAAe,EAAEf,KAAK,CAACgB,IAAI,CAACC;EAAS,CAAC;EAC5DL,OAAO,EAAE;IAAEE,IAAI,EAAE;EAAE,CAAC;EACpBN,MAAM,EAAE;IAAEU,YAAY,EAAE;EAAG;AAC7B,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/Input/Input.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import { TextInput } from 'react-native';
 import type { InputProps } from './type';
-declare const Input: React.FC<InputProps>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
 export default Input;
 //# sourceMappingURL=Input.d.ts.map

package/lib/typescript/src/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEzC,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkG/B,CAAC;AAuCF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAsC,MAAM,cAAc,CAAC;AAK7E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEzC,QAAA,MAAM,KAAK,8EA0GV,CAAC;AAuCF,eAAe,KAAK,CAAC"}

package/lib/typescript/src/Input/type.d.ts

@@ -13,6 +13,7 @@ export interface InputProps extends TextInputProps {
     secureTextEntry?: boolean;
     iconRightColor?: string;
     prefix?: React.ReactNode;
+    required?: boolean;
 }
 export interface TextAreaProps extends InputProps {
     height?: number;

package/lib/typescript/src/Input/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Input/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,gBAAgB,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Input/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,gBAAgB,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/src/LabelForm/LabelForm.d.ts

@@ -1,4 +1,7 @@
-export default function LabelForm({ title }: {
+interface Props {
     title: string;
-}): import("react/jsx-runtime").JSX.Element;
+    required?: boolean;
+}
+export default function LabelForm({ title, required }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=LabelForm.d.ts.map

package/lib/typescript/src/LabelForm/LabelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelForm.d.ts","sourceRoot":"","sources":["../../../../src/LabelForm/LabelForm.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,2CAQ7D"}
+{"version":3,"file":"LabelForm.d.ts","sourceRoot":"","sources":["../../../../src/LabelForm/LabelForm.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAa3D"}

package/lib/typescript/src/Provider/LayoutWithFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutWithFooter.d.ts","sourceRoot":"","sources":["../../../../src/Provider/LayoutWithFooter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAWA"}
+{"version":3,"file":"LayoutWithFooter.d.ts","sourceRoot":"","sources":["../../../../src/Provider/LayoutWithFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CASA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/Input/Input.tsx

@@ -6,105 +6,113 @@ import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
 import type { InputProps } from './type';
 
-const Input: React.FC<InputProps> = ({
-  icon,
-  iconRight,
-  label,
-  style,
-  value,
-  clearButton = false,
-  hasError = false,
-  hint,
-  onChangeText,
-  onPressIconLeft,
-  onPressIconRight,
-  secureTextEntry = false,
-  iconRightColor,
-  prefix,
-  ...rest
-}) => {
-  const [inputValue, setInputValue] = useState(value || '');
+const Input = React.forwardRef<TextInput, InputProps>(
+  (
+    {
+      icon,
+      iconRight,
+      label,
+      style,
+      value,
+      clearButton = false,
+      hasError = false,
+      hint,
+      onChangeText,
+      onPressIconLeft,
+      onPressIconRight,
+      secureTextEntry = false,
+      iconRightColor,
+      prefix,
+      required = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = useState(value || '');
 
-  const handleClear = () => {
-    setInputValue('');
-    onChangeText?.('');
-  };
+    const handleClear = () => {
+      setInputValue('');
+      onChangeText?.('');
+    };
 
-  const handleChange = (text: string) => {
-    setInputValue(text);
-    onChangeText?.(text);
-  };
+    const handleChange = (text: string) => {
+      setInputValue(text);
+      onChangeText?.(text);
+    };
 
-  const showRightIcons = (clearButton && inputValue !== '') || iconRight;
+    const showRightIcons = (clearButton && inputValue !== '') || iconRight;
 
-  useEffect(() => {
-    if (value !== undefined) {
-      setInputValue(value);
-    }
-  }, [value]);
-  return (
-    <View style={styles.gap}>
-      {label ? <LabelForm title={label} /> : null}
+    useEffect(() => {
+      if (value !== undefined) {
+        setInputValue(value);
+      }
+    }, [value]);
 
-      <View
-        style={[
-          styles.container,
-          {
-            borderColor: hasError ? Color.danger[500] : Color.gray[100],
-          },
-        ]}
-      >
-        {icon && (
-          <TouchableOpacity onPress={onPressIconLeft} hitSlop={10}>
-            <Icon name={icon} size={20} color="#888" />
-          </TouchableOpacity>
-        )}
+    return (
+      <View style={styles.gap}>
+        {label ? <LabelForm title={label} required={required} /> : null}
 
-        {prefix && <View style={styles.prefixContainer}>{prefix}</View>}
+        <View
+          style={[
+            styles.container,
+            {
+              borderColor: hasError ? Color.danger[500] : Color.gray[100],
+            },
+          ]}
+        >
+          {icon && (
+            <TouchableOpacity onPress={onPressIconLeft} hitSlop={10}>
+              <Icon name={icon} size={20} color="#888" />
+            </TouchableOpacity>
+          )}
+
+          {prefix && <View style={styles.prefixContainer}>{prefix}</View>}
 
-        <TextInput
-          {...rest}
-          style={[styles.input, style]}
-          secureTextEntry={secureTextEntry}
-          value={inputValue}
-          onChangeText={handleChange}
-          placeholderTextColor={Color.gray[400]}
-        />
+          <TextInput
+            {...rest}
+            ref={ref}
+            style={[styles.input, style]}
+            secureTextEntry={secureTextEntry}
+            value={inputValue}
+            onChangeText={handleChange}
+            placeholderTextColor={Color.gray[400]}
+          />
 
-        {showRightIcons && (
-          <View style={styles.rightContainer}>
-            {clearButton && inputValue !== '' && (
-              <TouchableOpacity
-                onPress={handleClear}
-                style={iconRight && styles.mr8}
-              >
-                <Icon name="x-circle" size={20} color="#aaa" />
-              </TouchableOpacity>
-            )}
-            {iconRight && (
-              <TouchableOpacity onPress={onPressIconRight} hitSlop={10}>
-                <Icon
-                  name={iconRight}
-                  size={20}
-                  color={iconRightColor ?? '#888'}
-                />
-              </TouchableOpacity>
-            )}
-          </View>
-        )}
+          {showRightIcons && (
+            <View style={styles.rightContainer}>
+              {clearButton && inputValue !== '' && (
+                <TouchableOpacity
+                  onPress={handleClear}
+                  style={iconRight && styles.mr8}
+                >
+                  <Icon name="x-circle" size={20} color="#aaa" />
+                </TouchableOpacity>
+              )}
+              {iconRight && (
+                <TouchableOpacity onPress={onPressIconRight} hitSlop={10}>
+                  <Icon
+                    name={iconRight}
+                    size={20}
+                    color={iconRightColor ?? '#888'}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+          )}
+        </View>
+        {hint ? (
+          <Typography
+            color={hasError ? Color.danger[500] : Color.gray[700]}
+            variant="t3"
+            weight="medium"
+          >
+            {hint}
+          </Typography>
+        ) : null}
       </View>
-      {hint ? (
-        <Typography
-          color={hasError ? Color.danger[500] : Color.gray[700]}
-          variant="t3"
-          weight="medium"
-        >
-          {hint}
-        </Typography>
-      ) : null}
-    </View>
-  );
-};
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   gap: {

package/src/Input/README_INPUT.md

@@ -6,22 +6,23 @@ Komponen `Input` ini adalah komponen input teks yang dapat dikustomisasi dengan
 
 ## 🔧 Props
 
-| Prop               | Tipe                      | Deskripsi                                                             |
-| ------------------ | ------------------------- | --------------------------------------------------------------------- |
-| `label`            | `string`                  | Label yang ditampilkan di atas input                                  |
-| `value`            | `string`                  | Nilai dari input (kontrol dari luar)                                  |
-| `onChange`         | `(value: string) => void` | Fungsi yang dipanggil saat nilai berubah                              |
-| `icon`             | `string`                  | Nama ikon (kiri) dari library `Icon`                                  |
-| `iconRight`        | `string`                  | Nama ikon kanan dari library `Icon`                                   |
-| `clearButton`      | `boolean`                 | Menampilkan tombol `x` untuk menghapus input                          |
-| `hasError`         | `boolean`                 | Menandai input error, border akan berubah merah                       |
-| `hint`             | `string`                  | Menampilkan teks kecil di bawah input, bisa untuk error atau petunjuk |
-| `onPressIconLeft`  | `() => void`              | Fungsi saat ikon kiri diklik                                          |
-| `onPressIconRight` | `() => void`              | Fungsi saat ikon kanan diklik                                         |
-| `secureTextEntry`  | `boolean`                 | Jika `true`, menyembunyikan input (untuk password)                    |
-| `style`            | `ViewStyle`               | Style tambahan untuk input                                            |
-| `prefix`           | `React.ReactNode`         | Slot `react node` yang bisa diisi oleh seluruh komponen react         |
-| `...rest`          | `TextInputProps`          | Props lain dari React Native `TextInput`                              |
+| Prop               | Tipe                      | Deskripsi                                                              |
+| ------------------ | ------------------------- | ---------------------------------------------------------------------- |
+| `label`            | `string`                  | Label yang ditampilkan di atas input                                   |
+| `value`            | `string`                  | Nilai dari input (kontrol dari luar)                                   |
+| `onChange`         | `(value: string) => void` | Fungsi yang dipanggil saat nilai berubah                               |
+| `icon`             | `string`                  | Nama ikon (kiri) dari library `Icon`                                   |
+| `iconRight`        | `string`                  | Nama ikon kanan dari library `Icon`                                    |
+| `clearButton`      | `boolean`                 | Menampilkan tombol `x` untuk menghapus input                           |
+| `hasError`         | `boolean`                 | Menandai input error, border akan berubah merah                        |
+| `hint`             | `string`                  | Menampilkan teks kecil di bawah input, bisa untuk error atau petunjuk  |
+| `onPressIconLeft`  | `() => void`              | Fungsi saat ikon kiri diklik                                           |
+| `onPressIconRight` | `() => void`              | Fungsi saat ikon kanan diklik                                          |
+| `secureTextEntry`  | `boolean`                 | Jika `true`, menyembunyikan input (untuk password)                     |
+| `style`            | `ViewStyle`               | Style tambahan untuk input                                             |
+| `prefix`           | `React.ReactNode`         | Slot `react node` yang bisa diisi oleh seluruh komponen react          |
+| `required`         | `boolean`                 | Jika `true` maka akan menampilkan bintang berwarna merah setelah label |
+| `...rest`          | `TextInputProps`          | Props lain dari React Native `TextInput`                               |
 
 ---
 

package/src/Input/type.tsx

@@ -14,6 +14,7 @@ export interface InputProps extends TextInputProps {
   secureTextEntry?: boolean;
   iconRightColor?: string;
   prefix?: React.ReactNode;
+  required?: boolean;
 }
 
 export interface TextAreaProps extends InputProps {

package/src/LabelForm/LabelForm.tsx

@@ -1,11 +1,22 @@
 import { View } from 'react-native';
 import Typography from '../Typography/Typography';
+import Color from '../Color/Color';
 
-export default function LabelForm({ title }: { title: string }) {
+interface Props {
+  title: string;
+  required?: boolean;
+}
+
+export default function LabelForm({ title, required }: Props) {
   return (
     <View>
       <Typography variant="t2" weight="semibold">
-        {title}
+        {title}{' '}
+        {required && (
+          <Typography variant="t2" weight="semibold" color={Color.danger[500]}>
+            *
+          </Typography>
+        )}
       </Typography>
     </View>
   );

package/src/Provider/LayoutWithFooter.tsx

@@ -1,7 +1,7 @@
-import { StyleSheet, SafeAreaView } from 'react-native';
-import { useFooter } from './Provider';
 import React from 'react';
+import { StyleSheet, View } from 'react-native';
 import Color from '../Color/Color';
+import { useFooter } from './Provider';
 
 export default function LayoutWithFooter({
   children,
@@ -11,12 +11,10 @@ export default function LayoutWithFooter({
   const { footer } = useFooter();
 
   return (
-    <SafeAreaView style={styles.container}>
-      <SafeAreaView style={[styles.content, footer && styles.footer]}>
-        {children}
-      </SafeAreaView>
+    <View style={styles.container}>
+      <View style={[styles.content, footer && styles.footer]}>{children}</View>
       {footer}
-    </SafeAreaView>
+    </View>
   );
 }