@herca/rn-kit 0.1.104 → 0.1.106

package/src/Icon/icons/StopWartchCheckFillBulk.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  style?: object;
+}
+
+const StopWatchCheckFillBulk: React.FC<Props> = ({ size = 24, style }) => (
+  <Svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={style}>
+    <Path
+      d="M20.834 28.3334V31.6668C20.834 32.4934 20.9224 33.2652 21.0907 33.9652C21.154 34.2302 21.009 34.4984 20.7457 34.57C19.4607 34.9167 18.1139 35.0651 16.6872 34.9735C10.9539 34.6101 6.0572 30.2051 5.16054 24.5301C3.93054 16.7318 9.93396 9.99849 17.5006 9.99849C20.2873 9.99849 22.8572 10.9185 24.9355 12.4635L27.4506 9.94844C27.9339 9.4651 28.734 9.4651 29.2173 9.94844C29.7007 10.4318 29.7007 11.2319 29.2173 11.7152L26.7841 14.1485C28.2957 15.8301 29.3673 17.9184 29.7907 20.2384C29.8473 20.545 29.5974 20.8318 29.2857 20.8318H28.334C24.1923 20.8335 20.834 24.1918 20.834 28.3334ZM18.7506 16.6668C18.7506 15.9768 18.1906 15.4168 17.5006 15.4168C16.8106 15.4168 16.2506 15.9768 16.2506 16.6668V22.5001C16.2506 23.1901 16.8106 23.7501 17.5006 23.7501C18.1906 23.7501 18.7506 23.1901 18.7506 22.5001V16.6668Z"
+      fill="#080355"
+    />
+    <Path
+      d="M13.3359 3.75C12.6459 3.75 12.0859 4.31 12.0859 5C12.0859 5.69 12.6459 6.25 13.3359 6.25H21.6693C22.3593 6.25 22.9193 5.69 22.9193 5C22.9193 4.31 22.3593 3.75 21.6693 3.75H13.3359Z"
+      fill="#FEC84B"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M36.6693 28.3335V31.6668C36.6693 35.0002 35.0026 36.6668 31.6693 36.6668H28.3359C25.0026 36.6668 23.3359 35.0002 23.3359 31.6668V28.3335C23.3359 25.0002 25.0026 23.3335 28.3359 23.3335H31.6693C35.0026 23.3335 36.6693 25.0002 36.6693 28.3335ZM31.4976 28.0218C31.8226 27.6968 32.3509 27.6968 32.6759 28.0218C33.0009 28.3468 33.0009 28.8752 32.6792 29.1986L29.9009 31.9769C29.7442 32.1319 29.5325 32.2202 29.3109 32.2202C29.0892 32.2202 28.8775 32.1336 28.7209 31.9769L27.3325 30.5885C27.0075 30.2635 27.0075 29.7352 27.3325 29.4102C27.6575 29.0852 28.1859 29.0852 28.5109 29.4102L29.3092 30.2101L31.4976 28.0218Z"
+      fill="#12B76A"
+    />
+    <Path
+      d="M31.4947 28.0216C31.8197 27.6966 32.3481 27.6966 32.6731 28.0216C32.9981 28.3466 32.998 28.875 32.6764 29.1983L29.898 31.9767C29.7414 32.1317 29.5297 32.22 29.308 32.22C29.0864 32.22 28.8747 32.1333 28.718 31.9767L27.3297 30.5883C27.0047 30.2633 27.0047 29.7349 27.3297 29.4099C27.6547 29.0849 28.1831 29.0849 28.5081 29.4099L29.3064 30.2099L31.4947 28.0216Z"
+      fill="white"
+    />
+  </Svg>
+);
+
+export default StopWatchCheckFillBulk;

package/src/Icon/icons/UserClockFillBulk.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  style?: object;
+}
+
+const UserClockFillBulk: React.FC<Props> = ({ size = 24, style }) => (
+  <Svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={style}>
+    <Path
+      d="M36.6654 30.0002C36.6654 33.6835 33.682 36.6668 29.9987 36.6668C26.3154 36.6668 23.332 33.6835 23.332 30.0002C23.332 26.3168 26.3154 23.3335 29.9987 23.3335C33.682 23.3335 36.6654 26.3168 36.6654 30.0002ZM32.3654 31.2001L30.832 29.6502V27.5002C30.832 27.0335 30.4654 26.6668 29.9987 26.6668C29.532 26.6668 29.1654 27.0335 29.1654 27.5002V30.0002C29.1654 30.2168 29.2487 30.4335 29.4154 30.5835L31.1986 32.3669C31.3653 32.5336 31.5653 32.6167 31.7819 32.6167C31.9986 32.6167 32.2154 32.5336 32.3654 32.3669C32.6988 32.0502 32.6988 31.5168 32.3654 31.2001Z"
+      fill="#FEC84B"
+    />
+    <Path
+      d="M24.5524 22.6383C22.2974 24.3017 20.8291 26.9917 20.8291 30C20.8291 31.8767 21.3908 33.6217 22.3641 35.0767C22.5808 35.4 22.3291 35.835 21.9391 35.835H9.9974C6.18073 35.835 4.16406 33.835 4.16406 30.035C4.16406 25.785 6.56406 20.835 13.3307 20.835H19.9974C21.7891 20.835 23.2657 21.1834 24.4757 21.7684C24.8307 21.9401 24.8691 22.4033 24.5524 22.6383Z"
+      fill="#065EB7"
+    />
+    <Path
+      d="M16.6823 4.1665C13.0056 4.1665 10.0156 7.1565 10.0156 10.8332C10.0156 14.5098 13.0056 17.4998 16.6823 17.4998C20.359 17.4998 23.349 14.5098 23.349 10.8332C23.349 7.1565 20.359 4.1665 16.6823 4.1665Z"
+      fill="#080355"
+    />
+  </Svg>
+);
+
+export default UserClockFillBulk;

package/src/Icon/icons/UsersFillBulk.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  style?: object;
+}
+
+const UsersFillBulk: React.FC<Props> = ({ size = 24, style }) => (
+  <Svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={style}>
+    <Path
+      d="M31.3167 14.8834H28.6334C28.4001 14.8834 28.2 15.0501 28.15 15.2667C27.7834 16.8501 26.95 18.2666 25.8 19.35C25.5166 19.6166 25.6834 20.0833 26.0667 20.1833C29.0167 20.8833 31.0667 22.6167 32.2833 24.8167C32.3667 25 32.5334 25.1166 32.75 25.1166H33.4499C36.0666 25.1166 37.5 23.6834 37.5 21.0834C37.5 18.2334 35.8834 14.8834 31.3167 14.8834ZM29.1833 4.16667C27.52 4.16667 26.0683 5.07826 25.3066 6.42659C25.2449 6.5366 25.2483 6.65831 25.2716 6.76331C25.2966 6.87331 25.3451 6.93177 25.4484 7.01843C27.0801 8.39343 28.1684 10.3851 28.3468 12.6367C28.3568 12.7634 28.4001 12.8417 28.4768 12.9234C28.5534 13.005 28.6683 13.0549 28.82 13.0682C28.9383 13.0782 29.06 13.0849 29.1833 13.0849C31.6333 13.0849 33.6334 11.085 33.6334 8.61837C33.6334 6.1667 31.6333 4.16667 29.1833 4.16667ZM2.5 21.0834C2.5 23.6834 3.93342 25.1166 6.55009 25.1166H7.24996C7.46663 25.1166 7.63334 25 7.71667 24.8167C8.93334 22.6167 10.9833 20.8833 13.9333 20.1833C14.3166 20.0833 14.4834 19.6166 14.2 19.35C13.05 18.2666 12.2166 16.8501 11.85 15.2667C11.8 15.0501 11.5999 14.8834 11.3666 14.8834H8.68327C4.1166 14.8834 2.5 18.2334 2.5 21.0834ZM6.36658 8.61674C6.36658 11.0834 8.36665 13.0833 10.8167 13.0833C10.94 13.0833 11.0617 13.0766 11.18 13.0666C11.3333 13.0533 11.4466 13.0034 11.5232 12.9218C11.5999 12.8401 11.6432 12.7618 11.6532 12.6351C11.8316 10.3834 12.9199 8.3916 14.5516 7.0166C14.6533 6.92993 14.7034 6.87168 14.7284 6.76168C14.7517 6.65668 14.7551 6.53663 14.6934 6.42497C13.9301 5.07663 12.48 4.16504 10.8167 4.16504C8.36665 4.16671 6.36658 6.16674 6.36658 8.61674Z"
+      fill="#080355"
+    />
+    <Path
+      d="M25.8835 13.3433C25.8835 16.565 23.2518 19.1866 20.0151 19.1866C16.7785 19.1866 14.1484 16.565 14.1484 13.3433C14.1484 10.1216 16.7801 7.5 20.0151 7.5C23.2501 7.5 25.8835 10.12 25.8835 13.3433Z"
+      fill="#065EB7"
+    />
+    <Path
+      d="M25.945 35.8335C29.365 35.8335 31.25 33.9702 31.25 30.5835C31.25 26.7702 29.0834 22.3152 22.9734 22.3169H17.0249C10.9166 22.3169 8.75 26.7702 8.75 30.5835C8.75 33.9685 10.635 35.8335 14.055 35.8335H25.945Z"
+      fill="#065EB7"
+    />
+  </Svg>
+);
+
+export default UsersFillBulk;

package/src/Icon/type.tsx

@@ -158,6 +158,16 @@ export type IconNameProps =
   | 'sticky-note-text-square'
   | 'triangle-exclamation-time'
   | 'user-edit-triangle-exclamation'
+  | 'bookmark'
+  | 'calendar-clock-fill-bulk'
+  | 'clock-square-fill'
+  | 'fuel-fill'
+  | 'package-tool-fill'
+  | 'payslip-fill'
+  | 'stopwatch-check-fill-bulk'
+  | 'user-clock-fill-bulk'
+  | 'users-fill-bulk'
+  | 'file-list-plus-fill-bulk'
   | 'cube-scan';
 export interface IconProps {
   name: IconNameProps;

package/src/Input/InputDate.tsx

@@ -7,9 +7,11 @@ import {
   type DateRangeProps,
 } from '@herca/rn-kit';
 import { useState, useEffect } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { FormattedDateRangeProps } from '../Calendar/CalendarPropsType';
 import { dateFormatter } from '../function/dateFormatter';
+import { layouting } from '../styles/layouting';
+import { spacing } from '../styles/spacing';
 
 type DatePickerProps = React.ComponentProps<typeof DatePicker>;
 type DatePickerPropsWithoutOnChange = Omit<
@@ -28,6 +30,7 @@ interface BaseProps {
   onDateChange?: (value: DateRangeProps) => void;
   mode?: CalendarModeType;
   language?: 'en' | 'id';
+  hasClear?: boolean;
 }
 
 type SingleModeProps = BaseProps & {
@@ -54,6 +57,7 @@ export default function InputDate({
   onDateChange,
   mode = 'single',
   language,
+  hasClear,
   ...props
 }: Props) {
   const [isDatePickerOpen, setSelectOpen] = useState<boolean>(false);
@@ -161,20 +165,52 @@ export default function InputDate({
       <View style={styles.wrapper}>
         {/* sart date */}
         <Pressable
-          style={[styles.pickerTrigger, value !== '' && styles.hasValue]}
+          style={[
+            styles.pickerTrigger,
+            (value || dateValue) && styles.hasValue,
+          ]}
           onPress={handleOpenSelect}
           {...props}
         >
           <Typography variant="t2" color={Color.gray[900]} weight="medium">
             {startDate() ?? placeholder}
           </Typography>
-          <Icon name="ArrowDown" size={14} color={Color.gray[700]} />
+          <View style={[layouting.flex.rowCenter, spacing.gap[8]]}>
+            {hasClear && (value || dateValue) && (
+              <TouchableOpacity
+                style={{
+                  backgroundColor: Color.gray[600],
+                  borderRadius: 999,
+                  padding: 3,
+                }}
+                onPress={() => {
+                  onDateChange?.({
+                    date: null,
+                    startDate: null,
+                    endDate: null,
+                  });
+
+                  setDateValue({
+                    date: undefined,
+                    endDate: undefined,
+                    startDate: undefined,
+                  });
+                }}
+              >
+                <Icon name="times-new" size={14} color={'white'} />
+              </TouchableOpacity>
+            )}
+            <Icon name="ArrowDown" size={14} color={Color.gray[700]} />
+          </View>
         </Pressable>
 
         {/* end date */}
         {mode === 'range' && (
           <Pressable
-            style={[styles.pickerTrigger, value !== '' && styles.hasValue]}
+            style={[
+              styles.pickerTrigger,
+              (value || dateValue) && styles.hasValue,
+            ]}
             onPress={handleOpenSelect}
             {...props}
           >

package/src/Input/InputSelect.tsx

@@ -89,7 +89,7 @@ export default function InputSelect({
           style={[
             styles.select,
             hasError && border.color.danger[300],
-            internalValue !== '' && !hasError && border.color.primary[300],
+            internalValue && !hasError && border.color.primary[300],
           ]}
           onPress={handleOpenSelect}
           {...props}

package/src/Input/README_INPUT_DATE.md

@@ -65,6 +65,7 @@ function MyForm() {
 | `onDateChange`      | `(value: DateRangeProps) => void` | `undefined`        | Callback ketika tanggal berubah                    |
 | `mode`              | `'single' \| 'range'`             | `'single'`         | Mode pemilihan tanggal                             |
 | `language`          | `'en' \| 'id'`                    | `undefined`        | Bahasa untuk format tanggal                        |
+| `hasClear`          | `boolean`                         | `false`            | Nilai boolean untuk menampilkan opsi hapus tanggal |
 
 ### Single Mode Specific Props