@herca/rn-kit 0.1.16 → 0.1.17

package/lib/typescript/src/Icon/icons/UserCircleFill.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const UserCircleFill: React.FC<Props>;
+export default UserCircleFill;
+//# sourceMappingURL=UserCircleFill.d.ts.map

package/lib/typescript/src/Icon/icons/UserCircleFill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCircleFill.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/UserCircleFill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWnC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/typescript/src/Icon/icons/UserCircleOutline.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const UserCircleOutline: React.FC<Props>;
+export default UserCircleOutline;
+//# sourceMappingURL=UserCircleOutline.d.ts.map

package/lib/typescript/src/Icon/icons/UserCircleOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCircleOutline.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/UserCircleOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWtC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { type ViewStyle } from 'react-native';
-export type IconNameProps = 'Home' | 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times';
+export type IconNameProps = 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times' | 'Plus' | 'Bell' | 'file-list-check' | 'file-text' | 'bookmark-user' | 'folder-clock' | 'home-fill' | 'home-outline' | 'user-circle-outline' | 'user-circle-fill' | 'clipboard-list-check' | 'clipboard-list' | 'Megaphone';
 export interface IconProps {
     name: IconNameProps;
     size?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,CAAC;AAEZ,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,iBAAiB,GACjB,WAAW,GACX,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,CAAC;AAEhB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}

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

@@ -1,3 +1,3 @@
 import { type SelectProps } from './type';
-export default function Select({ isOpen, data, renderItem, onClose, onSubmit, multiple, onSearch, required, loading, delaySearch, height, onRefresh, refreshing, footer, onEndReached, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ isOpen, data, renderItem, onClose, onSubmit, multiple, onSearch, required, loading, delaySearch, height, onRefresh, refreshing, footer, header, onEndReached, }: SelectProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/Select/Select.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAQ1C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,WAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,YAAY,GACb,EAAE,WAAW,2CAkFb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/Select/Select.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAQ1C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,WAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,YAAY,GACb,EAAE,WAAW,2CAmFb"}

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

@@ -21,6 +21,7 @@ export interface SelectProps {
     onRefresh?: () => void;
     onEndReached?: () => void;
     refreshing?: boolean;
-    footer?: React.ReactElement;
+    footer?: React.ReactNode | (() => React.ReactNode);
+    header?: React.ReactNode | (() => React.ReactNode);
 }
 //# sourceMappingURL=type.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Select/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC7B"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Select/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;CACpD"}

package/lib/typescript/src/Ui/Card.d.ts

@@ -5,7 +5,8 @@ interface CardProps {
     style?: StyleProp<ViewStyle>;
     backgroundImage?: any;
     backgroundColor?: string;
+    borderColor?: string;
 }
-export default function Card({ children, style, backgroundImage, backgroundColor, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function Card({ children, style, backgroundImage, backgroundColor, borderColor, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Card.d.ts.map

package/lib/typescript/src/Ui/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/Ui/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,UAAU,SAAS;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,eAAe,EACf,eAAe,GAChB,EAAE,SAAS,2CAuBX"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/Ui/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,UAAU,SAAS;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,eAAe,EACf,eAAe,EACf,WAA+B,GAChC,EAAE,SAAS,2CAwBX"}

package/package.json

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

package/src/Alert/Alert.tsx

@@ -14,6 +14,7 @@ interface AlertProps {
   style?: ViewStyle;
   titleStyle?: StyleProp<ViewStyle>;
   messageStyle?: StyleProp<ViewStyle>;
+  hide?: boolean;
 }
 
 const COLORS: Record<
@@ -73,6 +74,7 @@ const Alert: React.FC<AlertProps> = ({
   color = 'primary',
   titleStyle,
   messageStyle,
+  hide = false,
 }) => {
   const { background, fontColor, borderColor } = COLORS[color];
 
@@ -80,7 +82,11 @@ const Alert: React.FC<AlertProps> = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: background, borderColor: borderColor },
+        {
+          backgroundColor: background,
+          borderColor: borderColor,
+        },
+        hide ? { display: 'none' } : null,
       ]}
     >
       <View style={{ marginRight: 10 }}>

package/src/Calendar/Calendar.tsx

@@ -21,7 +21,13 @@ const DEFAULT_SELECTED_BACKGROUND_COLOR = Color.primary[1000];
 const DEFAULT_SELECTED_TEXT_COLOR = Color.base.white100;
 const DEFAULT_DISABLED_BACKGROUND_COLOR = Color.base.white100;
 const DEFAULT_DISABLED_TEXT_COLOR = Color.gray[400];
-
+export const formatDate = (date: Date | undefined | null) => {
+  if (!date) return null;
+  const y = date.getFullYear();
+  const m = `${date.getMonth() + 1}`.padStart(2, '0');
+  const d = `${date.getDate()}`.padStart(2, '0');
+  return `${y}-${m}-${d}`;
+};
 const Calendar = ({
   markedDates = {},
   disabledDays,

package/src/Calendar/CalendarPropsType.tsx

@@ -40,8 +40,10 @@ export type DayNameTuple = [
   string,
 ];
 
+export type CalendarModeType = 'single' | 'range';
+
 export interface CalendarTypes {
-  mode?: 'single' | 'range';
+  mode?: CalendarModeType;
   markedDates?: {
     [date: string]: MarkedDate;
   };

package/src/Chip/Chip.tsx

@@ -23,7 +23,8 @@ const Chip: React.FC<ChipProps> = ({
   onRefresh,
   refreshing = false,
   onEndReached,
-  footer,
+  // footer,
+  // header,
 }) => {
   const isHorizontal = direction === 'horizontal';
 
@@ -101,7 +102,8 @@ const Chip: React.FC<ChipProps> = ({
         },
       ]}
       columnWrapperStyle={numColumns > 1 ? styles.wrapperStyle : undefined}
-      ListFooterComponent={footer}
+      // ListFooterComponent={footer}
+      // ListHeaderComponent={header}
     />
   );
 };

package/src/Chip/README.md

@@ -19,6 +19,8 @@ Komponen `Chip` digunakan untuk menampilkan daftar pilihan seperti tag, filter,
 | `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.                          |
+| `header`     | ReactElement| –              | Jika ingin chip mempunyai header.                          |
+| `footer`     | ReactElement| –              | Jika ingin chip mempunyai footer.                          |
 
 ---
 

package/src/Chip/type.tsx

@@ -150,5 +150,6 @@ export interface ChipProps {
   onRefresh?: () => void;
   onEndReached?: () => void;
   refreshing?: boolean;
-  footer?: React.ReactElement;
+  footer?: React.ReactNode | (() => React.ReactNode);
+  header?: React.ReactNode | (() => React.ReactNode);
 }

package/src/DatePicker/DatePicker.tsx

@@ -1,13 +1,24 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import BottomSheet from '../BottomSheet/BottomSheet';
 import Calendar from '../Calendar/Calendar';
 import Button from '../Button/Button';
-import { type DateRangeProps } from '../Calendar/CalendarPropsType';
+import Alert from '../Alert/Alert';
+import {
+  type CalendarModeType,
+  type DateRangeProps,
+} from '../Calendar/CalendarPropsType';
+
 interface DatePickerProps {
   onChange: (selectedDate: DateRangeProps) => void;
   isOpen: boolean;
   onClose: () => void;
+  required?: boolean;
+  hasError?: boolean;
+  onHasError?: (val: boolean) => void;
+  hint?: string;
+  mode?: CalendarModeType;
+  value?: DateRangeProps;
   [key: string]: any;
 }
 
@@ -15,27 +26,84 @@ export default function DatePicker({
   onChange,
   isOpen,
   onClose,
+  required = false,
+  hasError = false,
+  onHasError,
+  hint,
+  mode,
+  // value,
   ...calendarProps
 }: DatePickerProps) {
-  const [valueDatepicker, setValueDatepicker] = useState<DateRangeProps>({
+  const [errorValidate, setErrorValidate] = useState<boolean>(false);
+  // const [markDates, setMarkDates] = useState();
+  const [valueOnChange, setValueOnChange] = useState<DateRangeProps>({
     startDate: null,
     endDate: null,
     date: null,
   });
+  // const [valueSelected, setValueSelected] = useState<DateRangeProps>({
+  //   startDate: null,
+  //   endDate: null,
+  //   date: null,
+  // });
 
   const handleOnChangeCalendar = useCallback((value: DateRangeProps) => {
-    setValueDatepicker(value);
+    // setMarkDates(null);
+    setValueOnChange(value);
+    setErrorValidate(false);
   }, []);
 
+  // const setDefaultValue = () => {
+  //   if (mode === 'single' && valueOnChange.date) {
+  //     setMarkDates({
+  //       [formatDate(valueOnChange.date)]: { selected: true },
+  //     });
+  //   } else if (
+  //     (mode === 'range' || mode === 'multiple') &&
+  //     valueOnChange.startDate &&
+  //     valueOnChange.endDate
+  //   ) {
+  //     const start = new Date(valueOnChange.startDate);
+  //     const end = new Date(valueOnChange.endDate);
+  //     const marks: Record<string, any> = {};
+  //     for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+  //       const key = formatDate(new Date(d));
+  //       marks[key] = { selected: true };
+  //     }
+  //     setMarkDates(marks);
+  //   }
+  // };
+
   const handleOnPressSubmitButton = useCallback(() => {
-    onChange?.(valueDatepicker);
+    const { startDate, endDate, date } = valueOnChange;
+    const isEmpty = !startDate && !endDate && !date;
+    const isRangeMode = mode === 'range';
+    const isInvalidRange = isRangeMode && (!startDate || !endDate);
+
+    if ((required && isEmpty) || isInvalidRange) {
+      onHasError?.(true);
+      setErrorValidate(true);
+      return;
+    }
+
+    onChange?.(valueOnChange);
     onClose?.();
-  }, [valueDatepicker, onChange, onClose]);
+    // setDefaultValue();
+    // setValueSelected(valueOnChange);
+  }, [required, mode, valueOnChange, onChange, onClose, onHasError]);
 
   const handleOnPressCancelButton = useCallback(() => {
     onClose?.();
   }, [onClose]);
 
+  useEffect(() => {
+    setErrorValidate(hasError);
+  }, [hasError]);
+
+  // useEffect(() => {
+  //   setDefaultValue();
+  // }, [isOpen, setDefaultValue, valueSelected]);
+
   return (
     <View>
       <BottomSheet
@@ -61,7 +129,17 @@ export default function DatePicker({
           </View>
         }
       >
-        <Calendar onChange={handleOnChangeCalendar} {...calendarProps} />
+        <Calendar
+          // markedDates={markDates}
+          mode={mode}
+          onChange={handleOnChangeCalendar}
+          {...calendarProps}
+        />
+        <Alert
+          color="danger"
+          message={hint ? hint : 'Error validation'}
+          hide={!errorValidate}
+        />
       </BottomSheet>
     </View>
   );

package/src/Icon/Icon.tsx

@@ -22,16 +22,27 @@ import Times from './icons/Times';
 import ArrowDown from './icons/ArrowDown';
 import ArrowUp from './icons/ArrowUp';
 import Search from './icons/Search';
-import Home from './icons/Home';
 import ArrowLeft from './icons/ArrowLeft';
 import EyeOpen from './icons/EyeOpen';
 import ExclamationMark from './icons/ExclamationMark';
+import FileListCheck from './icons/FileListCheck';
+import FileText from './icons/FileText';
+import FolderClock from './icons/FolderClock';
+import HomeFill from './icons/HomeFill';
+import HomeOutline from './icons/HomeOutline';
+import Plus from './icons/Plus';
+import UserCircleFill from './icons/UserCircleFill';
+import UserCircleOutline from './icons/UserCircleOutline';
+import ClipBoardListCheck from './icons/ClipBoardListCheck';
+import ClipBoardList from './icons/ClipBoardList';
+import Megaphone from './icons/Megaphone';
+import Bell from './icons/Bell';
+import BookmarkUser from './icons/BookmarkUser';
 
 const icons: Record<
   IconNameProps,
   React.FC<{ size: number; color: string; style?: ViewStyle }>
 > = {
-  'Home': Home,
   'Search': Search,
   'User': User,
   'Eye': Eye,
@@ -56,6 +67,19 @@ const icons: Record<
   'Times': Times,
   'ArrowDown': ArrowDown,
   'ArrowUp': ArrowUp,
+  'Plus': Plus,
+  'Bell': Bell,
+  'file-list-check': FileListCheck,
+  'file-text': FileText,
+  'bookmark-user': BookmarkUser,
+  'folder-clock': FolderClock,
+  'home-fill': HomeFill,
+  'home-outline': HomeOutline,
+  'user-circle-outline': UserCircleOutline,
+  'user-circle-fill': UserCircleFill,
+  'clipboard-list-check': ClipBoardListCheck,
+  'clipboard-list': ClipBoardList,
+  'Megaphone': Megaphone,
 };
 
 const Icon: React.FC<IconProps> = ({

package/src/Icon/README.md

@@ -70,4 +70,17 @@ export default function App() {
 - StickyNote  
 - Times  
 - User  
-- x-circle  
+- x-circle  
+- Plus
+- Bell
+- file-list-check
+- file-text
+- bookmark-user
+- folder-clock
+- home-fill
+- home-outline
+- user-circle-outline
+- user-circle-fill
+- clipboard-list-check
+- clipboard-list
+- Megaphone

package/src/Icon/icons/Bell.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Bell: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <G clip-path="url(#clip0_9105_4207)">
+      <Path
+        d="M12 2.9231C10.1435 2.9231 8.36301 3.66059 7.05026 4.97335C5.7375 6.2861 5.00001 8.06658 5.00001 9.9231V13.4511C5.00015 13.6062 4.9642 13.7593 4.89501 13.8981L3.17801 17.3311C3.09413 17.4988 3.05453 17.6852 3.06296 17.8725C3.07138 18.0599 3.12756 18.2419 3.22615 18.4014C3.32474 18.5609 3.46248 18.6926 3.62627 18.7839C3.79007 18.8752 3.97448 18.9231 4.16201 18.9231H19.838C20.0255 18.9231 20.2099 18.8752 20.3737 18.7839C20.5375 18.6926 20.6753 18.5609 20.7739 18.4014C20.8725 18.2419 20.9286 18.0599 20.9371 17.8725C20.9455 17.6852 20.9059 17.4988 20.822 17.3311L19.106 13.8981C19.0365 13.7593 19.0002 13.6063 19 13.4511V9.9231C19 8.06658 18.2625 6.2861 16.9498 4.97335C15.637 3.66059 13.8565 2.9231 12 2.9231ZM12 21.9231C11.3794 21.9233 10.774 21.731 10.2672 21.3729C9.76033 21.0147 9.37702 20.5082 9.17001 19.9231H14.83C14.623 20.5082 14.2397 21.0147 13.7329 21.3729C13.226 21.731 12.6206 21.9233 12 21.9231Z"
+        fill={color}
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_9105_4207">
+        <Rect
+          width={size}
+          height={size}
+          fill={color}
+          transform="translate(0 0.923096)"
+        />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export default Bell;

package/src/Icon/icons/BookmarkUser.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const BookmarkUser: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size + 3}
+    viewBox="0 0 17 20"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M16.4971 2.56995V16L16.49 15.986V16L14.1411 14.656C14.0471 14.603 13.99 14.503 13.99 14.396C13.99 14.396 13.99 6.50495 13.99 6.47095C13.949 3.98395 12.4439 2.501 9.92993 2.5H4.71704C4.54304 2.5 4.4911 2.34805 4.5061 2.17505C4.6311 0.731049 5.48506 0 7.06006 0H13.9199H13.927C15.637 0 16.4971 0.859946 16.4971 2.56995ZM12.5 6.57104V20L6.5 16.572L0.5 20V6.57104C0.5 4.85705 1.35704 4 3.07104 4H9.92798C11.643 4 12.5 4.85705 12.5 6.57104ZM4.6001 8.40002C4.6001 9.44802 5.453 10.3 6.5 10.3C7.547 10.3 8.3999 9.44802 8.3999 8.40002C8.3999 7.35202 7.547 6.5 6.5 6.5C5.453 6.5 4.6001 7.35202 4.6001 8.40002ZM9.52002 13.746C9.52002 12.58 8.66804 11.4 7.04004 11.4H5.96191C4.33291 11.4 3.48193 12.58 3.48193 13.746V14C3.48193 14.276 3.70593 14.5 3.98193 14.5H9.021C9.297 14.5 9.521 14.276 9.521 14V13.746H9.52002Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default BookmarkUser;

package/src/Icon/icons/ClipBoardList.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ClipBoardList: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M8 6.26917V5.26917C8 4.26917 8.5 3.76917 9.5 3.76917H14.5C15.5 3.76917 16 4.26917 16 5.26917V6.26917C16 7.26917 15.5 7.76917 14.5 7.76917H9.5C8.5 7.76917 8 7.26917 8 6.26917ZM20 8.76917V18.7692C20 20.7692 19 21.7692 17 21.7692H7C5 21.7692 4 20.7692 4 18.7692V8.76917C4 7.02716 4.75189 6.04617 6.26489 5.82617C6.38589 5.80817 6.5 5.90815 6.5 6.03015V6.26819C6.5 8.08819 7.68 9.26819 9.5 9.26819H14.5C16.32 9.26819 17.5 8.08819 17.5 6.26819V6.03015C17.5 5.90815 17.6151 5.80817 17.7351 5.82617C19.2481 6.04617 20 7.02716 20 8.76917ZM8.75 16.7692C8.75 16.3552 8.414 16.0192 8 16.0192C7.586 16.0192 7.25 16.3552 7.25 16.7692C7.25 17.1832 7.586 17.5192 8 17.5192C8.414 17.5192 8.75 17.1832 8.75 16.7692ZM8.75 12.7692C8.75 12.3552 8.414 12.0192 8 12.0192C7.586 12.0192 7.25 12.3552 7.25 12.7692C7.25 13.1832 7.586 13.5192 8 13.5192C8.414 13.5192 8.75 13.1832 8.75 12.7692ZM16.75 16.7692C16.75 16.3552 16.414 16.0192 16 16.0192H11C10.586 16.0192 10.25 16.3552 10.25 16.7692C10.25 17.1832 10.586 17.5192 11 17.5192H16C16.414 17.5192 16.75 17.1832 16.75 16.7692ZM16.75 12.7692C16.75 12.3552 16.414 12.0192 16 12.0192H11C10.586 12.0192 10.25 12.3552 10.25 12.7692C10.25 13.1832 10.586 13.5192 11 13.5192H16C16.414 13.5192 16.75 13.1832 16.75 12.7692Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ClipBoardList;

package/src/Icon/icons/ClipBoardListCheck.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ClipBoardListCheck: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M17.7351 5.82617C17.6141 5.80817 17.5 5.90815 17.5 6.03015V6.26819C17.5 8.08819 16.32 9.26819 14.5 9.26819H9.5C7.68 9.26819 6.5 8.08819 6.5 6.26819V6.03015C6.5 5.90815 6.38489 5.80817 6.26489 5.82617C4.75189 6.04617 4 7.02716 4 8.76917V18.7692C4 20.7692 5 21.7692 7 21.7692H17C19 21.7692 20 20.7692 20 18.7692V8.76917C20 7.02716 19.2481 6.04617 17.7351 5.82617ZM10.03 16.6332L8.69702 17.9662C8.55602 18.1072 8.36599 18.1862 8.16699 18.1862C7.96799 18.1862 7.77696 18.1072 7.63696 17.9672L6.96997 17.3002C6.67697 17.0072 6.67697 16.5321 6.96997 16.2391C7.26297 15.9461 7.73801 15.9461 8.03101 16.2391L8.16797 16.3762L8.97095 15.5732C9.26395 15.2802 9.73898 15.2802 10.032 15.5732C10.323 15.8652 10.323 16.3402 10.03 16.6332ZM10.03 12.6332L8.69702 13.9662C8.55602 14.1072 8.36599 14.1862 8.16699 14.1862C7.96799 14.1862 7.77696 14.1072 7.63696 13.9672L6.96997 13.3002C6.67697 13.0072 6.67697 12.5321 6.96997 12.2391C7.26297 11.9461 7.73801 11.9461 8.03101 12.2391L8.16797 12.3762L8.97095 11.5732C9.26395 11.2802 9.73898 11.2802 10.032 11.5732C10.323 11.8652 10.323 12.3402 10.03 12.6332ZM16.5 17.5192H12.5C12.086 17.5192 11.75 17.1832 11.75 16.7692C11.75 16.3552 12.086 16.0192 12.5 16.0192H16.5C16.914 16.0192 17.25 16.3552 17.25 16.7692C17.25 17.1832 16.914 17.5192 16.5 17.5192ZM16.5 13.5192H12.5C12.086 13.5192 11.75 13.1832 11.75 12.7692C11.75 12.3552 12.086 12.0192 12.5 12.0192H16.5C16.914 12.0192 17.25 12.3552 17.25 12.7692C17.25 13.1832 16.914 13.5192 16.5 13.5192ZM8 6.26917V5.26917C8 4.26917 8.5 3.76917 9.5 3.76917H14.5C15.5 3.76917 16 4.26917 16 5.26917V6.26917C16 7.26917 15.5 7.76917 14.5 7.76917H9.5C8.5 7.76917 8 7.26917 8 6.26917Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ClipBoardListCheck;

package/src/Icon/icons/FileListCheck.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const FileListCheck: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M12.75 5.53845V3.28845L17.25 7.78845H15C13.42 7.78845 12.75 7.11845 12.75 5.53845ZM12.74 20.1385C12.8 20.3385 12.66 20.5385 12.46 20.5385H6C4 20.5385 3 19.5385 3 17.5385V5.53845C3 3.53845 4 2.53845 6 2.53845H11.25V5.53845C11.25 7.95845 12.58 9.28845 15 9.28845H18V12.7484C18 12.9084 17.87 13.0385 17.71 13.0485C14.82 13.1985 12.5 15.6085 12.5 18.5385C12.5 19.0985 12.58 19.6385 12.74 20.1385ZM7.75 15.5385C7.75 15.1245 7.414 14.7885 7 14.7885C6.586 14.7885 6.25 15.1245 6.25 15.5385C6.25 15.9525 6.586 16.2885 7 16.2885C7.414 16.2885 7.75 15.9525 7.75 15.5385ZM7.75 11.5385C7.75 11.1245 7.414 10.7885 7 10.7885C6.586 10.7885 6.25 11.1245 6.25 11.5385C6.25 11.9525 6.586 12.2885 7 12.2885C7.414 12.2885 7.75 11.9525 7.75 11.5385ZM11.75 15.5385C11.75 15.1245 11.414 14.7885 11 14.7885H9.5C9.086 14.7885 8.75 15.1245 8.75 15.5385C8.75 15.9525 9.086 16.2885 9.5 16.2885H11C11.414 16.2885 11.75 15.9525 11.75 15.5385ZM14 12.2885C14.414 12.2885 14.75 11.9525 14.75 11.5385C14.75 11.1245 14.414 10.7885 14 10.7885H9.5C9.086 10.7885 8.75 11.1245 8.75 11.5385C8.75 11.9525 9.086 12.2885 9.5 12.2885H14ZM22 18.5385C22 20.7475 20.209 22.5385 18 22.5385C15.791 22.5385 14 20.7475 14 18.5385C14 16.3295 15.791 14.5385 18 14.5385C20.209 14.5385 22 16.3295 22 18.5385ZM19.604 17.3514C19.409 17.1564 19.092 17.1564 18.897 17.3514L17.584 18.6645L17.105 18.1844C16.91 17.9894 16.5929 17.9894 16.3979 18.1844C16.2029 18.3794 16.2029 18.6964 16.3979 18.8914L17.231 19.7245C17.325 19.8185 17.452 19.8705 17.585 19.8705C17.718 19.8705 17.845 19.8175 17.939 19.7245L19.606 18.0575C19.799 17.8635 19.799 17.5474 19.604 17.3514Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default FileListCheck;

package/src/Icon/icons/FileText.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const FileText: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M19.25 8.40381H17C15.42 8.40381 14.75 7.73381 14.75 6.15381V3.90381L19.25 8.40381ZM20 9.90381V18.1538C20 20.1538 19 21.1538 17 21.1538H8C6 21.1538 5 20.1538 5 18.1538V6.15381C5 4.15381 6 3.15381 8 3.15381H13.25V6.15381C13.25 8.57381 14.58 9.90381 17 9.90381H20ZM13.75 16.1538C13.75 15.7398 13.414 15.4038 13 15.4038H9C8.586 15.4038 8.25 15.7398 8.25 16.1538C8.25 16.5678 8.586 16.9038 9 16.9038H13C13.414 16.9038 13.75 16.5678 13.75 16.1538ZM16.75 12.1538C16.75 11.7398 16.414 11.4038 16 11.4038H9C8.586 11.4038 8.25 11.7398 8.25 12.1538C8.25 12.5678 8.586 12.9038 9 12.9038H16C16.414 12.9038 16.75 12.5678 16.75 12.1538Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default FileText;

package/src/Icon/icons/FolderClock.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const FolderClock: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size - 2}
+    viewBox="0 0 19 16"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M10.791 10.084C10.986 10.279 10.986 10.596 10.791 10.791C10.693 10.889 10.565 10.937 10.437 10.937C10.309 10.937 10.181 10.888 10.083 10.791L9.14502 9.854C9.05102 9.76 8.99902 9.633 8.99902 9.5V8.18799C8.99902 7.91199 9.22302 7.68799 9.49902 7.68799C9.77502 7.68799 9.99902 7.91199 9.99902 8.18799V9.293L10.791 10.084ZM18.5 6V13C18.5 15 17.5 16 15.5 16H3.5C1.5 16 0.5 15 0.5 13V3C0.5 1 1.5 0 3.5 0H7.5L10.5 3H15.5C17.5 3 18.5 4 18.5 6ZM13 9.5C13 7.567 11.433 6 9.5 6C7.567 6 6 7.567 6 9.5C6 11.433 7.567 13 9.5 13C11.433 13 13 11.433 13 9.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default FolderClock;

package/src/Icon/icons/HomeFill.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const HomeFill: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.2701 9.36973L13.5881 3.87668C12.6651 3.11768 11.3341 3.11768 10.4111 3.87668L3.73003 9.36973C3.16903 9.83073 2.90203 10.5587 3.03203 11.2727L4.48711 19.2547C4.70411 20.4427 5.73909 21.3067 6.94609 21.3067H17.052C18.26 21.3067 19.295 20.4427 19.511 19.2547L20.966 11.2717C21.098 10.5597 20.8311 9.83073 20.2701 9.36973ZM14 18.0577H10C9.58605 18.0577 9.25005 17.7217 9.25005 17.3077C9.25005 16.8937 9.58605 16.5577 10 16.5577H14C14.414 16.5577 14.75 16.8937 14.75 17.3077C14.75 17.7217 14.414 18.0577 14 18.0577Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default HomeFill;