@majoo-ui/react 1.60.37 → 1.61.0-rc.1

package/components/datePicker/components/CalendarTimePicker.d.ts

@@ -4,6 +4,7 @@ interface CalendarProps {
     disabled?: boolean;
     language?: string;
     onSetDateValue?: Dispatch<SetStateAction<Date[]>>;
+    isSingle?: boolean;
 }
-declare const CalendarTimePicker: ({ selected, disabled, language, onSetDateValue }: CalendarProps) => JSX.Element;
+declare const CalendarTimePicker: ({ selected, disabled, language, onSetDateValue, isSingle }: CalendarProps) => JSX.Element;
 export default CalendarTimePicker;

package/components/form/components/InputSignature/InputSignature.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CSS } from '@stitches/react';
+interface InputSignatureProps {
+    onChange?: (value: string) => void;
+    title?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    css?: CSS;
+    isMobile?: boolean;
+}
+export declare function InputSignature({ title, onChange, defaultValue, disabled, css, isMobile, }: InputSignatureProps): JSX.Element;
+export default InputSignature;

package/components/form/components/InputSignature/SignatureModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SignatureModalProps {
+    t: any;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSave?: (signature: string) => void;
+    title?: any;
+    isMobile?: boolean;
+}
+declare const SignatureModal: React.FC<SignatureModalProps>;
+export default SignatureModal;

package/components/form/components/InputSignature/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputSignature } from './InputSignature';
+export * from './InputSignature';

package/components/form/components/index.d.ts

@@ -23,3 +23,5 @@ export * from './InputCombobox';
 export * from './InputOTP';
 export * from './InputCounter';
 export * from './InputDateRange';
+export { default as InputSignature } from './InputSignature/InputSignature';
+export * from './InputSignature';

package/index.esm.js

@@ -30,7 +30,7 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
+import { useMountedLayoutEffect, useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder } from 'react-table';
 import ReactDOM, { createPortal } from 'react-dom';
 import * as ADialog from '@radix-ui/react-alert-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -53,6 +53,7 @@ import ScrollSpy from 'react-ui-scrollspy';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
+import SignaturePad from 'react-signature-pad-wrapper';
 
 var _jsxFileName$12 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 function ThemeProvider({
@@ -8451,7 +8452,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }));
 });
 InputText.propTypes = {
-  placeholdren: PropTypes.string,
+  placeholder: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
@@ -8525,7 +8526,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }));
 });
 InputTextArea.propTypes = {
-  placeholdren: PropTypes.string,
+  placeholder: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
@@ -18023,14 +18024,18 @@ const CalendarTimePicker = ({
   selected,
   disabled,
   language,
-  onSetDateValue
+  onSetDateValue,
+  isSingle
 }) => {
   const {
     t
   } = useTranslation('MajooUI/datePicker');
   let startTime = moment('00:00', 'HH:mm').toDate();
   let endTime = moment('00:00', 'HH:mm').toDate();
-  if (selected && selected.length > 1) {
+  if (isSingle && selected && selected.length) {
+    startTime = selected[0];
+  }
+  if (!isSingle && selected && selected.length > 1) {
     startTime = selected[0];
     endTime = selected[1];
   }
@@ -18051,7 +18056,7 @@ const CalendarTimePicker = ({
         variant: "label",
         color: "primary"
       }, {
-        children: t('dateFromLabel', 'Dari Tanggal')
+        children: isSingle ? t('label.date', 'Tanggal') : t('dateFromLabel', 'Dari Tanggal')
       }), void 0), jsx(Text$1, Object.assign({
         variant: "label",
         color: "disable"
@@ -18066,53 +18071,55 @@ const CalendarTimePicker = ({
         variant: "label",
         color: "primary"
       }, {
-        children: t('timeFromLabel', 'Dari Pukul')
+        children: isSingle ? t('time', 'Waktu') : t('timeFromLabel', 'Dari Pukul')
       }), void 0), jsx(InputTimePicker, {
         onChange: val => {
-          if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
+          if (isSingle && selected && selected.length && !!onSetDateValue) onSetDateValue(val.toDate());else if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
         },
         size: "sm",
         value: startTime,
-        disabled: !(selected && selected.length > 1)
+        disabled: isSingle ? !(selected && selected.length) : !(selected && selected.length > 1)
       }, void 0)]
-    }), void 0), jsx(Separator$2, {
-      orientation: "horizontal"
-    }, void 0), jsxs(Flex$1, Object.assign({
-      direction: "column",
-      gap: 3
-    }, {
-      children: [jsx(Text$1, Object.assign({
-        variant: "label",
-        color: "primary"
+    }), void 0), isSingle ? null : jsxs(React__default.Fragment, {
+      children: [jsx(Separator$2, {
+        orientation: "horizontal"
+      }, void 0), jsxs(Flex$1, Object.assign({
+        direction: "column",
+        gap: 3
       }, {
-        children: t('dateUntilLabel', 'Hingga Tanggal')
-      }), void 0), jsx(Text$1, Object.assign({
-        variant: "label",
-        color: "disable"
+        children: [jsx(Text$1, Object.assign({
+          variant: "label",
+          color: "primary"
+        }, {
+          children: t('dateUntilLabel', 'Hingga Tanggal')
+        }), void 0), jsx(Text$1, Object.assign({
+          variant: "label",
+          color: "disable"
+        }, {
+          children: formattedEndDate
+        }), void 0)]
+      }), void 0), jsxs(Flex$1, Object.assign({
+        direction: "column",
+        gap: 3
       }, {
-        children: formattedEndDate
+        children: [jsx(Text$1, Object.assign({
+          variant: "label",
+          color: "primary"
+        }, {
+          children: t('timeUntilLabel', 'Hingga Pukul')
+        }), void 0), jsx(InputTimePicker, {
+          onChange: val => {
+            const endDate = moment(endTime).format('YYYY-MM-DD');
+            const newTime = val.format('HH:mm');
+            const newValue = moment(`${endDate} ${newTime}`, 'YYYY-MM-DD HH:mm').toDate();
+            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
+          },
+          size: "sm",
+          value: endTime,
+          disabled: !(selected && selected.length > 1)
+        }, void 0)]
       }), void 0)]
-    }), void 0), jsxs(Flex$1, Object.assign({
-      direction: "column",
-      gap: 3
-    }, {
-      children: [jsx(Text$1, Object.assign({
-        variant: "label",
-        color: "primary"
-      }, {
-        children: t('timeUntilLabel', 'Hingga Pukul')
-      }), void 0), jsx(InputTimePicker, {
-        onChange: val => {
-          const endDate = moment(endTime).format('YYYY-MM-DD');
-          const newTime = val.format('HH:mm');
-          const newValue = moment(`${endDate} ${newTime}`, 'YYYY-MM-DD HH:mm').toDate();
-          if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
-        },
-        size: "sm",
-        value: endTime,
-        disabled: !(selected && selected.length > 1)
-      }, void 0)]
-    }), void 0)]
+    }, void 0)]
   }), void 0);
 };
 
@@ -18175,17 +18182,22 @@ const WeekdayBox$1 = styled(Box, {
 });
 const CalendarsContainer$1 = styled(Box, {
   width: '100%',
-  padding: '$spacing-03',
   display: 'inline-flex',
   borderRadius: '$lg',
-  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
-  backgroundColor: '$white',
   justifyContent: 'center',
   gap: '$spacing-03',
   '@md': {
     width: 'unset'
   }
 });
+const CalenderBoxContainer = styled(Box, {
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+  borderRadius: '$lg',
+  backgroundColor: '$white',
+  padding: '$spacing-03'
+});
 const CalendarItemContainer$1 = styled(Flex$1, {});
 const DateContainer$1 = styled(Box, {
   width: '100%',
@@ -18258,7 +18270,7 @@ const MonthButton$1 = styled(Text$1, {
     }
   }
 });
-const ButtonTime = styled('button', {
+styled('button', {
   fontWeight: 600,
   fontStyle: 'normal',
   fontSize: 14,
@@ -18654,84 +18666,110 @@ const CalendarBox = ({
     }, void 0);
   };
   const renderTime = () => {
-    return jsxs(Box, Object.assign({
-      css: {
-        padding: 4
-      }
-    }, {
+    return jsxs(Fragment$1, {
       children: [jsx(Separator$2, {
-        css: {
-          my: '$spacing-02'
-        }
-      }, void 0), jsx(ButtonTime, Object.assign({
-        disabled: disabled,
-        onClick: () => setPickerState(current => Object.assign(Object.assign({}, current), {
-          type: TIME_PICKER
-        })),
-        type: "button"
+        orientation: "vertical"
+      }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
+        selected,
+        disabled,
+        language,
+        onSetDateValue
       }, {
-        children: selected && selected[0] ? moment(selected[0]).format('HH:mm') : moment().format('HH:mm')
+        isSingle: !multiDatePicker
       }), void 0)]
-    }), void 0);
+    }, void 0);
   };
-  const renderButtonTime = () => {
+  const renderFooterSingleTimePicker = () => {
     return jsxs(Box, Object.assign({
       css: {
-        padding: 4
+        width: '$full'
       }
     }, {
       children: [jsx(Separator$2, {
         css: {
-          my: '$spacing-02'
+          my: '$spacing-03'
+        }
+      }, void 0), jsx(Flex$1, Object.assign({
+        justify: "end",
+        align: "center",
+        css: {
+          padding: 8
         }
-      }, void 0), jsx(ButtonTime, Object.assign({
-        disabled: disabled,
-        onClick: () => onCancel === null || onCancel === void 0 ? void 0 : onCancel(),
-        type: "button"
       }, {
-        children: "Done"
+        children: jsxs(Flex$1, Object.assign({
+          gap: 3
+        }, {
+          children: [jsx(Button$4, Object.assign({
+            buttonType: "ghost",
+            css: {
+              fontWeight: 600
+            },
+            onClick: onCancel,
+            disabled: disabled,
+            size: "sm",
+            type: "button"
+          }, {
+            children: t('label.cancel', 'Batal', {
+              ns: 'translation'
+            })
+          }), void 0), jsx(Button$4, Object.assign({
+            css: {
+              fontWeight: 600
+            },
+            onClick: onUpdate,
+            disabled: disabled || !(selected && selected.length),
+            size: "sm",
+            type: "button"
+          }, {
+            children: t('label.save', 'Simpan', {
+              ns: 'translation'
+            })
+          }), void 0)]
+        }), void 0)
       }), void 0)]
     }), void 0);
   };
   if (calendars.length) {
-    return jsxs(CalendarsContainer$1, Object.assign({
-      css: containerStyle
-    }, {
-      children: [advanceView, advanceView && jsx(Separator$2, {
-        orientation: "vertical"
-      }, void 0), jsxs(Box, {
-        children: [renderHeader(), jsx(CalendarItemContainer$1, Object.assign({
-          gap: 5
-        }, {
-          children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
-            children: [index > 0 && jsx(Separator$2, {
-              orientation: "vertical",
-              css: {
-                height: 'auto'
-              }
-            }, void 0), jsxs(DateContainer$1, {
-              children: [jsx(Separator$2, {
+    return jsxs(CalenderBoxContainer, {
+      children: [jsxs(CalendarsContainer$1, Object.assign({
+        css: containerStyle
+      }, {
+        children: [advanceView, advanceView && jsx(Separator$2, {
+          orientation: "vertical"
+        }, void 0), jsxs(Box, {
+          children: [renderHeader(), jsx(CalendarItemContainer$1, Object.assign({
+            gap: 5
+          }, {
+            children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
+              children: [index > 0 && jsx(Separator$2, {
+                orientation: "vertical",
                 css: {
-                  mb: '$spacing-04',
-                  mt: '$spacing-02'
+                  height: 'auto'
                 }
-              }, void 0), pickerState.type === DATE_PICKER && jsxs(Fragment, {
-                children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
-              }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList(), pickerState.type === TIME_PICKER && renderTimePicker && renderTimePicker()]
-            }, void 0)]
-          }, `${calendar.month}${calendar.year}`))
-        }), void 0), multiDatePicker && renderFooter(), !advanceView && showTimePicker && (pickerState.type === TIME_PICKER ? renderButtonTime() : renderTime())]
-      }, void 0), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
-        children: [jsx(Separator$2, {
-          orientation: "vertical"
-        }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
-          selected,
-          disabled,
-          language,
-          onSetDateValue
-        }), void 0)]
-      }, void 0)]
-    }), void 0);
+              }, void 0), jsxs(DateContainer$1, {
+                children: [jsx(Separator$2, {
+                  css: {
+                    mb: '$spacing-04',
+                    mt: '$spacing-02'
+                  }
+                }, void 0), pickerState.type === DATE_PICKER && jsxs(Fragment, {
+                  children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
+                }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+              }, void 0)]
+            }, `${calendar.month}${calendar.year}`))
+          }), void 0)]
+        }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
+          children: [jsx(Separator$2, {
+            orientation: "vertical"
+          }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
+            selected,
+            disabled,
+            language,
+            onSetDateValue
+          }), void 0)]
+        }, void 0)]
+      }), void 0), !multiDatePicker && showTimePicker && renderFooterSingleTimePicker(), multiDatePicker && renderFooter()]
+    }, void 0);
   }
   return null;
 };
@@ -19299,6 +19337,7 @@ const CalendarPicker = _a => {
     if (dateValue && onChange) {
       onChange(dateValue);
     }
+    onClose();
   };
   const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
     date: calendarDate,
@@ -19315,39 +19354,22 @@ const CalendarPicker = _a => {
     }
   }, [selected]);
   useEffect(() => {
-    if (dateValue && !isMultiDatePicker && onChange) {
+    if (dateValue && !(isMultiDatePicker || showTimePicker) && onChange) {
       onChange(dateValue);
     }
   }, [dateValue]);
-  const renderTimePicker = props => {
-    return jsx(Box, Object.assign({
-      css: {
-        padding: '40px 60px'
-      }
-    }, {
-      children: jsx(NativeTimePicker, Object.assign({
-        size: "lg",
-        value: dateValue ? moment(dateValue) : moment(),
-        minDate: minDate,
-        maxDate: maxDate,
-        disabled: disabled,
-        onChange: date => {
-          setDateValue(new Date(date));
-        }
-      }, props), void 0)
-    }), void 0);
-  };
   return jsx(CalendarBox, Object.assign({
-    onUpdate: isMultiDatePicker ? updateHandler : undefined,
+    onUpdate: isMultiDatePicker || showTimePicker ? updateHandler : undefined,
     onCancel: onClose,
     selected: dateValue ? [dateValue] : undefined,
     advanceView: advanceView,
     disabled: disabled,
     onCalendarDateChange: setCalendarDate,
     showTimePicker: showTimePicker,
-    renderTimePicker: () => renderTimePicker(timePickerProps),
     minDate: minDate,
     maxDate: maxDate
+  }, showTimePicker && {
+    onSetDateValue: setDateValue
   }, dayzedData), void 0);
 };
 const CalendarRangePicker = _a => {
@@ -20318,6 +20340,183 @@ const InputDateRange = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }), void 0);
 });
 
+const SignatureModal = ({
+  t,
+  open,
+  onOpenChange,
+  onSave,
+  title,
+  isMobile
+}) => {
+  const signaturePadRef = useRef(null);
+  const handleSave = () => {
+    if (signaturePadRef.current) {
+      const signature = signaturePadRef.current.toDataURL();
+      onSave === null || onSave === void 0 ? void 0 : onSave(signature);
+    }
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+  };
+  return jsxs(ModalDialog, Object.assign({
+    open: open,
+    onOpenChange: onOpenChange,
+    isMobile: isMobile
+  }, {
+    children: [jsx(ModalDialogTitle, {
+      children: title
+    }, void 0), jsx(ModalDialogContent, {
+      children: jsx(SignaturePad, {
+        ref: signaturePadRef,
+        height: 256,
+        canvasProps: {
+          style: {
+            border: '2px dashed #C0C4C4',
+            borderRadius: '8px'
+          }
+        },
+        options: {
+          penColor: 'black',
+          backgroundColor: foundations.colors.bgGray
+        }
+      }, void 0)
+    }, void 0), jsxs(ModalDialogFooter, Object.assign({
+      css: {
+        display: 'flex',
+        gap: '$compact'
+      }
+    }, {
+      children: [jsx(DialogClose, Object.assign({
+        asChild: true
+      }, {
+        children: jsx(Button$4, Object.assign({
+          buttonType: "ghost",
+          size: "sm"
+        }, {
+          children: t('label.cancel', 'Batal')
+        }), void 0)
+      }), void 0), jsx(Button$4, Object.assign({
+        size: "sm",
+        onClick: handleSave
+      }, {
+        children: t('label.save', 'Simpan')
+      }), void 0)]
+    }), void 0)]
+  }), void 0);
+};
+
+const SignatureContainer = styled$1(Flex$1, {
+  position: 'relative',
+  border: '2px dashed $gray300',
+  borderRadius: 8,
+  height: '88px',
+  width: '100%',
+  cursor: 'pointer',
+  transition: '0.2s',
+  transitionDuration: '0.5s',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: '$bgGray',
+  '&:hover': {
+    border: '2px dashed $primary400',
+    background: '$bgSuccess'
+  },
+  variants: {
+    hasContent: {
+      true: {
+        '&:hover': {
+          background: '$bgGray'
+        }
+      }
+    },
+    showError: {
+      true: {
+        border: '2px dashed $red400',
+        '&:hover': {
+          border: '2px dashed  $red300',
+          background: '$bgFailed'
+        }
+      }
+    },
+    disabled: {
+      true: {
+        border: 'none',
+        cursor: 'not-allowed',
+        '&:hover': {
+          border: 'none',
+          background: '$bgGray'
+        }
+      }
+    }
+  }
+});
+function InputSignature({
+  title,
+  onChange,
+  defaultValue = '',
+  disabled = false,
+  css,
+  isMobile
+}) {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputSignature', 'translation']);
+  const [signatureImage, setSignatureImage] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const handleSave = signature => {
+    setSignatureImage(signature);
+  };
+  useMountedLayoutEffect(() => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(signatureImage);
+  }, [signatureImage]);
+  return jsxs(React__default.Fragment, {
+    children: [jsx(SignatureContainer, Object.assign({
+      hasContent: !!signatureImage,
+      onClick: () => {
+        if (!disabled) {
+          setOpen(true);
+        }
+      },
+      disabled: disabled,
+      css: css
+    }, {
+      children: signatureImage ? jsxs(React__default.Fragment, {
+        children: [!disabled ? jsx(Box, Object.assign({
+          css: {
+            position: 'absolute',
+            top: '8px',
+            right: '8px'
+          },
+          onClick: e => {
+            e.stopPropagation();
+            setSignatureImage('');
+          }
+        }, {
+          children: jsx(CloseFilled, {
+            color: foundations.colors.iconRed
+          }, void 0)
+        }), void 0) : null, jsx("img", {
+          src: signatureImage,
+          alt: "signature",
+          style: {
+            height: '100%'
+          }
+        }, void 0)]
+      }, void 0) : jsx(Text$1, Object.assign({
+        variant: "label",
+        color: "disable"
+      }, {
+        children: t('placeholder', 'Tanda tangan disini')
+      }), void 0)
+    }), void 0), jsx(SignatureModal, {
+      t: t,
+      open: open,
+      onOpenChange: setOpen,
+      onSave: handleSave,
+      isMobile: isMobile,
+      title: title || t('modalTitle', 'Tambah Tanda Tangan')
+    }, void 0)]
+  }, void 0);
+}
+
 const _excluded$9 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
 var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {
@@ -56815,4 +57014,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('react-i18next'), require('moment'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('superagent'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-virtual'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', 'react-i18next', 'moment', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'superagent', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.reactI18next, global.moment, global.icons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.request, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, icons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, request, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('react-i18next'), require('moment'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('superagent'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-virtual'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky'), require('react-signature-pad-wrapper')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', 'react-i18next', 'moment', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'superagent', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky', 'react-signature-pad-wrapper'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.reactI18next, global.moment, global.icons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.request, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky, global.SignaturePad));
+})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, icons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, request, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky, SignaturePad) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -56,6 +56,7 @@
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
+  var SignaturePad__default = /*#__PURE__*/_interopDefaultLegacy(SignaturePad);
 
   var _jsxFileName$12 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
   function ThemeProvider({
@@ -8521,7 +8522,7 @@
     }));
   });
   InputText.propTypes = {
-    placeholdren: PropTypes__default["default"].string,
+    placeholder: PropTypes__default["default"].string,
     value: PropTypes__default["default"].string,
     onChange: PropTypes__default["default"].func,
     disabled: PropTypes__default["default"].bool,
@@ -8595,7 +8596,7 @@
     }));
   });
   InputTextArea.propTypes = {
-    placeholdren: PropTypes__default["default"].string,
+    placeholder: PropTypes__default["default"].string,
     value: PropTypes__default["default"].string,
     onChange: PropTypes__default["default"].func,
     disabled: PropTypes__default["default"].bool,
@@ -18228,11 +18229,15 @@
     var selected = _a.selected,
       disabled = _a.disabled,
       language = _a.language,
-      onSetDateValue = _a.onSetDateValue;
+      onSetDateValue = _a.onSetDateValue,
+      isSingle = _a.isSingle;
     var t = reactI18next.useTranslation('MajooUI/datePicker').t;
     var startTime = moment__default["default"]('00:00', 'HH:mm').toDate();
     var endTime = moment__default["default"]('00:00', 'HH:mm').toDate();
-    if (selected && selected.length > 1) {
+    if (isSingle && selected && selected.length) {
+      startTime = selected[0];
+    }
+    if (!isSingle && selected && selected.length > 1) {
       startTime = selected[0];
       endTime = selected[1];
     }
@@ -18253,7 +18258,7 @@
           variant: "label",
           color: "primary"
         }, {
-          children: t('dateFromLabel', 'Dari Tanggal')
+          children: isSingle ? t('label.date', 'Tanggal') : t('dateFromLabel', 'Dari Tanggal')
         }), void 0), jsxRuntime.jsx(Text$1, __assign({
           variant: "label",
           color: "disable"
@@ -18268,53 +18273,55 @@
           variant: "label",
           color: "primary"
         }, {
-          children: t('timeFromLabel', 'Dari Pukul')
+          children: isSingle ? t('time', 'Waktu') : t('timeFromLabel', 'Dari Pukul')
         }), void 0), jsxRuntime.jsx(InputTimePicker, {
           onChange: function (val) {
-            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
+            if (isSingle && selected && selected.length && !!onSetDateValue) onSetDateValue(val.toDate());else if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
           },
           size: "sm",
           value: startTime,
-          disabled: !(selected && selected.length > 1)
+          disabled: isSingle ? !(selected && selected.length) : !(selected && selected.length > 1)
         }, void 0)]
-      }), void 0), jsxRuntime.jsx(Separator$2, {
-        orientation: "horizontal"
-      }, void 0), jsxRuntime.jsxs(Flex$1, __assign({
-        direction: "column",
-        gap: 3
-      }, {
-        children: [jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "primary"
+      }), void 0), isSingle ? null : jsxRuntime.jsxs(React__default["default"].Fragment, {
+        children: [jsxRuntime.jsx(Separator$2, {
+          orientation: "horizontal"
+        }, void 0), jsxRuntime.jsxs(Flex$1, __assign({
+          direction: "column",
+          gap: 3
         }, {
-          children: t('dateUntilLabel', 'Hingga Tanggal')
-        }), void 0), jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "disable"
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "primary"
+          }, {
+            children: t('dateUntilLabel', 'Hingga Tanggal')
+          }), void 0), jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "disable"
+          }, {
+            children: formattedEndDate
+          }), void 0)]
+        }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
+          direction: "column",
+          gap: 3
         }, {
-          children: formattedEndDate
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "primary"
+          }, {
+            children: t('timeUntilLabel', 'Hingga Pukul')
+          }), void 0), jsxRuntime.jsx(InputTimePicker, {
+            onChange: function (val) {
+              var endDate = moment__default["default"](endTime).format('YYYY-MM-DD');
+              var newTime = val.format('HH:mm');
+              var newValue = moment__default["default"]("".concat(endDate, " ").concat(newTime), 'YYYY-MM-DD HH:mm').toDate();
+              if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
+            },
+            size: "sm",
+            value: endTime,
+            disabled: !(selected && selected.length > 1)
+          }, void 0)]
         }), void 0)]
-      }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
-        direction: "column",
-        gap: 3
-      }, {
-        children: [jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "primary"
-        }, {
-          children: t('timeUntilLabel', 'Hingga Pukul')
-        }), void 0), jsxRuntime.jsx(InputTimePicker, {
-          onChange: function (val) {
-            var endDate = moment__default["default"](endTime).format('YYYY-MM-DD');
-            var newTime = val.format('HH:mm');
-            var newValue = moment__default["default"]("".concat(endDate, " ").concat(newTime), 'YYYY-MM-DD HH:mm').toDate();
-            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
-          },
-          size: "sm",
-          value: endTime,
-          disabled: !(selected && selected.length > 1)
-        }, void 0)]
-      }), void 0)]
+      }, void 0)]
     }), void 0);
   };
 
@@ -18376,17 +18383,22 @@
   });
   var CalendarsContainer$1 = styled(Box, {
     width: '100%',
-    padding: '$spacing-03',
     display: 'inline-flex',
     borderRadius: '$lg',
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
-    backgroundColor: '$white',
     justifyContent: 'center',
     gap: '$spacing-03',
     '@md': {
       width: 'unset'
     }
   });
+  var CalenderBoxContainer = styled(Box, {
+    display: 'flex',
+    flexDirection: 'column',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+    borderRadius: '$lg',
+    backgroundColor: '$white',
+    padding: '$spacing-03'
+  });
   var CalendarItemContainer$1 = styled(Flex$1, {});
   var DateContainer$1 = styled(Box, {
     width: '100%',
@@ -18459,7 +18471,7 @@
       }
     }
   });
-  var ButtonTime = styled('button', {
+  styled('button', {
     fontWeight: 600,
     fontStyle: 'normal',
     fontSize: 14,
@@ -18505,9 +18517,9 @@
       selected = _a.selected,
       containerStyle = _a.containerStyle,
       disabled = _a.disabled,
-      showTimePicker = _a.showTimePicker,
-      renderTimePicker = _a.renderTimePicker,
-      minDate = _a.minDate,
+      showTimePicker = _a.showTimePicker;
+      _a.renderTimePicker;
+      var minDate = _a.minDate,
       maxDate = _a.maxDate,
       allowReset = _a.allowReset,
       onSetDateValue = _a.onSetDateValue;
@@ -18886,92 +18898,112 @@
       }, void 0);
     };
     var renderTime = function renderTime() {
-      return jsxRuntime.jsxs(Box, __assign({
-        css: {
-          padding: 4
-        }
-      }, {
+      return jsxRuntime.jsxs(React.Fragment, {
         children: [jsxRuntime.jsx(Separator$2, {
-          css: {
-            my: '$spacing-02'
-          }
-        }, void 0), jsxRuntime.jsx(ButtonTime, __assign({
+          orientation: "vertical"
+        }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
+          selected: selected,
           disabled: disabled,
-          onClick: function () {
-            return setPickerState(function (current) {
-              return __assign(__assign({}, current), {
-                type: TIME_PICKER
-              });
-            });
-          },
-          type: "button"
+          language: language,
+          onSetDateValue: onSetDateValue
         }, {
-          children: selected && selected[0] ? moment__default["default"](selected[0]).format('HH:mm') : moment__default["default"]().format('HH:mm')
+          isSingle: !multiDatePicker
         }), void 0)]
-      }), void 0);
+      }, void 0);
     };
-    var renderButtonTime = function renderButtonTime() {
+    var renderFooterSingleTimePicker = function renderFooterSingleTimePicker() {
       return jsxRuntime.jsxs(Box, __assign({
         css: {
-          padding: 4
+          width: '$full'
         }
       }, {
         children: [jsxRuntime.jsx(Separator$2, {
           css: {
-            my: '$spacing-02'
+            my: '$spacing-03'
+          }
+        }, void 0), jsxRuntime.jsx(Flex$1, __assign({
+          justify: "end",
+          align: "center",
+          css: {
+            padding: 8
           }
-        }, void 0), jsxRuntime.jsx(ButtonTime, __assign({
-          disabled: disabled,
-          onClick: function () {
-            return onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-          },
-          type: "button"
         }, {
-          children: "Done"
+          children: jsxRuntime.jsxs(Flex$1, __assign({
+            gap: 3
+          }, {
+            children: [jsxRuntime.jsx(Button$4, __assign({
+              buttonType: "ghost",
+              css: {
+                fontWeight: 600
+              },
+              onClick: onCancel,
+              disabled: disabled,
+              size: "sm",
+              type: "button"
+            }, {
+              children: t('label.cancel', 'Batal', {
+                ns: 'translation'
+              })
+            }), void 0), jsxRuntime.jsx(Button$4, __assign({
+              css: {
+                fontWeight: 600
+              },
+              onClick: onUpdate,
+              disabled: disabled || !(selected && selected.length),
+              size: "sm",
+              type: "button"
+            }, {
+              children: t('label.save', 'Simpan', {
+                ns: 'translation'
+              })
+            }), void 0)]
+          }), void 0)
         }), void 0)]
       }), void 0);
     };
     if (calendars.length) {
-      return jsxRuntime.jsxs(CalendarsContainer$1, __assign({
-        css: containerStyle
-      }, {
-        children: [advanceView, advanceView && jsxRuntime.jsx(Separator$2, {
-          orientation: "vertical"
-        }, void 0), jsxRuntime.jsxs(Box, {
-          children: [renderHeader(), jsxRuntime.jsx(CalendarItemContainer$1, __assign({
-            gap: 5
-          }, {
-            children: calendars.map(function (calendar, index) {
-              return jsxRuntime.jsxs(React__default["default"].Fragment, {
-                children: [index > 0 && jsxRuntime.jsx(Separator$2, {
-                  orientation: "vertical",
-                  css: {
-                    height: 'auto'
-                  }
-                }, void 0), jsxRuntime.jsxs(DateContainer$1, {
-                  children: [jsxRuntime.jsx(Separator$2, {
+      return jsxRuntime.jsxs(CalenderBoxContainer, {
+        children: [jsxRuntime.jsxs(CalendarsContainer$1, __assign({
+          css: containerStyle
+        }, {
+          children: [advanceView, advanceView && jsxRuntime.jsx(Separator$2, {
+            orientation: "vertical"
+          }, void 0), jsxRuntime.jsxs(Box, {
+            children: [renderHeader(), jsxRuntime.jsx(CalendarItemContainer$1, __assign({
+              gap: 5
+            }, {
+              children: calendars.map(function (calendar, index) {
+                return jsxRuntime.jsxs(React__default["default"].Fragment, {
+                  children: [index > 0 && jsxRuntime.jsx(Separator$2, {
+                    orientation: "vertical",
                     css: {
-                      mb: '$spacing-04',
-                      mt: '$spacing-02'
+                      height: 'auto'
                     }
-                  }, void 0), pickerState.type === DATE_PICKER && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
-                  }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList(), pickerState.type === TIME_PICKER && renderTimePicker && renderTimePicker()]
-                }, void 0)]
-              }, "".concat(calendar.month).concat(calendar.year));
-            })
-          }), void 0), multiDatePicker && renderFooter(), !advanceView && showTimePicker && (pickerState.type === TIME_PICKER ? renderButtonTime() : renderTime())]
-        }, void 0), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxRuntime.jsxs(React.Fragment, {
-          children: [jsxRuntime.jsx(Separator$2, {
-            orientation: "vertical"
-          }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
-            selected: selected,
-            disabled: disabled,
-            language: language,
-            onSetDateValue: onSetDateValue
-          }), void 0)]
-        }, void 0)]
-      }), void 0);
+                  }, void 0), jsxRuntime.jsxs(DateContainer$1, {
+                    children: [jsxRuntime.jsx(Separator$2, {
+                      css: {
+                        mb: '$spacing-04',
+                        mt: '$spacing-02'
+                      }
+                    }, void 0), pickerState.type === DATE_PICKER && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                      children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
+                    }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+                  }, void 0)]
+                }, "".concat(calendar.month).concat(calendar.year));
+              })
+            }), void 0)]
+          }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxRuntime.jsxs(React.Fragment, {
+            children: [jsxRuntime.jsx(Separator$2, {
+              orientation: "vertical"
+            }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
+              selected: selected,
+              disabled: disabled,
+              language: language,
+              onSetDateValue: onSetDateValue
+            }), void 0)]
+          }, void 0)]
+        }), void 0), !multiDatePicker && showTimePicker && renderFooterSingleTimePicker(), multiDatePicker && renderFooter()]
+      }, void 0);
     }
     return null;
   };
@@ -19572,6 +19604,7 @@
       if (dateValue && onChange) {
         onChange(dateValue);
       }
+      onClose();
     };
     var dayzedData = dayzed.useDayzed(__assign(__assign({}, props), {
       date: calendarDate,
@@ -19588,41 +19621,22 @@
       }
     }, [selected]);
     React.useEffect(function () {
-      if (dateValue && !isMultiDatePicker && onChange) {
+      if (dateValue && !(isMultiDatePicker || showTimePicker) && onChange) {
         onChange(dateValue);
       }
     }, [dateValue]);
-    var renderTimePicker = function renderTimePicker(props) {
-      return jsxRuntime.jsx(Box, __assign({
-        css: {
-          padding: '40px 60px'
-        }
-      }, {
-        children: jsxRuntime.jsx(NativeTimePicker, __assign({
-          size: "lg",
-          value: dateValue ? moment__default["default"](dateValue) : moment__default["default"](),
-          minDate: minDate,
-          maxDate: maxDate,
-          disabled: disabled,
-          onChange: function (date) {
-            setDateValue(new Date(date));
-          }
-        }, props), void 0)
-      }), void 0);
-    };
     return jsxRuntime.jsx(CalendarBox, __assign({
-      onUpdate: isMultiDatePicker ? updateHandler : undefined,
+      onUpdate: isMultiDatePicker || showTimePicker ? updateHandler : undefined,
       onCancel: onClose,
       selected: dateValue ? [dateValue] : undefined,
       advanceView: advanceView,
       disabled: disabled,
       onCalendarDateChange: setCalendarDate,
       showTimePicker: showTimePicker,
-      renderTimePicker: function () {
-        return renderTimePicker(timePickerProps);
-      },
       minDate: minDate,
       maxDate: maxDate
+    }, showTimePicker && {
+      onSetDateValue: setDateValue
     }, dayzedData), void 0);
   };
   var CalendarRangePicker = function CalendarRangePicker(_a) {
@@ -20630,6 +20644,185 @@
     }), void 0);
   });
 
+  var SignatureModal = function SignatureModal(_a) {
+    var t = _a.t,
+      open = _a.open,
+      onOpenChange = _a.onOpenChange,
+      onSave = _a.onSave,
+      title = _a.title,
+      isMobile = _a.isMobile;
+    var signaturePadRef = React.useRef(null);
+    var handleSave = function handleSave() {
+      if (signaturePadRef.current) {
+        var signature = signaturePadRef.current.toDataURL();
+        onSave === null || onSave === void 0 ? void 0 : onSave(signature);
+      }
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    };
+    return jsxRuntime.jsxs(ModalDialog, __assign({
+      open: open,
+      onOpenChange: onOpenChange,
+      isMobile: isMobile
+    }, {
+      children: [jsxRuntime.jsx(ModalDialogTitle, {
+        children: title
+      }, void 0), jsxRuntime.jsx(ModalDialogContent, {
+        children: jsxRuntime.jsx(SignaturePad__default["default"], {
+          ref: signaturePadRef,
+          height: 256,
+          canvasProps: {
+            style: {
+              border: '2px dashed #C0C4C4',
+              borderRadius: '8px'
+            }
+          },
+          options: {
+            penColor: 'black',
+            backgroundColor: core.foundations.colors.bgGray
+          }
+        }, void 0)
+      }, void 0), jsxRuntime.jsxs(ModalDialogFooter, __assign({
+        css: {
+          display: 'flex',
+          gap: '$compact'
+        }
+      }, {
+        children: [jsxRuntime.jsx(DialogClose, __assign({
+          asChild: true
+        }, {
+          children: jsxRuntime.jsx(Button$4, __assign({
+            buttonType: "ghost",
+            size: "sm"
+          }, {
+            children: t('label.cancel', 'Batal')
+          }), void 0)
+        }), void 0), jsxRuntime.jsx(Button$4, __assign({
+          size: "sm",
+          onClick: handleSave
+        }, {
+          children: t('label.save', 'Simpan')
+        }), void 0)]
+      }), void 0)]
+    }), void 0);
+  };
+
+  var SignatureContainer = react.styled(Flex$1, {
+    position: 'relative',
+    border: '2px dashed $gray300',
+    borderRadius: 8,
+    height: '88px',
+    width: '100%',
+    cursor: 'pointer',
+    transition: '0.2s',
+    transitionDuration: '0.5s',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: '$bgGray',
+    '&:hover': {
+      border: '2px dashed $primary400',
+      background: '$bgSuccess'
+    },
+    variants: {
+      hasContent: {
+        true: {
+          '&:hover': {
+            background: '$bgGray'
+          }
+        }
+      },
+      showError: {
+        true: {
+          border: '2px dashed $red400',
+          '&:hover': {
+            border: '2px dashed  $red300',
+            background: '$bgFailed'
+          }
+        }
+      },
+      disabled: {
+        true: {
+          border: 'none',
+          cursor: 'not-allowed',
+          '&:hover': {
+            border: 'none',
+            background: '$bgGray'
+          }
+        }
+      }
+    }
+  });
+  function InputSignature(_a) {
+    var title = _a.title,
+      onChange = _a.onChange,
+      _b = _a.defaultValue,
+      defaultValue = _b === void 0 ? '' : _b,
+      _c = _a.disabled,
+      disabled = _c === void 0 ? false : _c,
+      css = _a.css,
+      isMobile = _a.isMobile;
+    var t = reactI18next.useTranslation(['MajooUI/inputSignature', 'translation']).t;
+    var _d = React.useState(defaultValue),
+      signatureImage = _d[0],
+      setSignatureImage = _d[1];
+    var _e = React.useState(false),
+      open = _e[0],
+      setOpen = _e[1];
+    var handleSave = function handleSave(signature) {
+      setSignatureImage(signature);
+    };
+    reactTable.useMountedLayoutEffect(function () {
+      onChange === null || onChange === void 0 ? void 0 : onChange(signatureImage);
+    }, [signatureImage]);
+    return jsxRuntime.jsxs(React__default["default"].Fragment, {
+      children: [jsxRuntime.jsx(SignatureContainer, __assign({
+        hasContent: !!signatureImage,
+        onClick: function () {
+          if (!disabled) {
+            setOpen(true);
+          }
+        },
+        disabled: disabled,
+        css: css
+      }, {
+        children: signatureImage ? jsxRuntime.jsxs(React__default["default"].Fragment, {
+          children: [!disabled ? jsxRuntime.jsx(Box, __assign({
+            css: {
+              position: 'absolute',
+              top: '8px',
+              right: '8px'
+            },
+            onClick: function (e) {
+              e.stopPropagation();
+              setSignatureImage('');
+            }
+          }, {
+            children: jsxRuntime.jsx(icons.CloseFilled, {
+              color: core.foundations.colors.iconRed
+            }, void 0)
+          }), void 0) : null, jsxRuntime.jsx("img", {
+            src: signatureImage,
+            alt: "signature",
+            style: {
+              height: '100%'
+            }
+          }, void 0)]
+        }, void 0) : jsxRuntime.jsx(Text$1, __assign({
+          variant: "label",
+          color: "disable"
+        }, {
+          children: t('placeholder', 'Tanda tangan disini')
+        }), void 0)
+      }), void 0), jsxRuntime.jsx(SignatureModal, {
+        t: t,
+        open: open,
+        onOpenChange: setOpen,
+        onSave: handleSave,
+        isMobile: isMobile,
+        title: title || t('modalTitle', 'Tambah Tanda Tangan')
+      }, void 0)]
+    }, void 0);
+  }
+
   const _excluded$9 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
   var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
   const StyledSlider = react.styled(SliderPrimitive__namespace.Root, {
@@ -57645,6 +57838,7 @@
   exports.InputSelect = InputSelect;
   exports.InputSelectCheck = InputSelectCheck;
   exports.InputSelectTag = InputSelectTag;
+  exports.InputSignature = InputSignature;
   exports.InputSuffix = InputSuffix;
   exports.InputSwitch = InputSwitch;
   exports.InputTags = TagsInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.60.37",
+  "version": "1.61.0-rc.1",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",
@@ -71,6 +71,7 @@
     "react-hook-form": "^7.31.3",
     "yup": "^0.32.11",
     "@radix-ui/react-dialog": "^1.0.0",
+    "react-signature-pad-wrapper": "^4.0.4",
     "@radix-ui/react-dismissable-layer": "^1.0.3"
   }
 }