@skalfa/skalfa-component 1.0.52 → 1.0.54

package/dist/input/InputDate.component.d.ts

@@ -16,6 +16,7 @@ export interface InputDateProps extends Omit<InputHTMLAttributes<HTMLInputElemen
 }
 export declare function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputDateProps): import("@types/react").JSX.Element;
 export interface InputDatePickerProps {
+    value?: string;
     onChange?: (date: string) => void;
     minDate?: string;
     maxDate?: string;

package/dist/input/InputDate.component.js

@@ -27,45 +27,62 @@ function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: inputHandler.value, onChange: (e) => {
                                         inputHandler.setValue(e.target.value);
-                                        inputHandler.setValue(false);
+                                        inputHandler.setIdle(false);
                                         onChange?.(e.target.value);
                                     }, onFocus: (e) => {
                                         props.onFocus?.(e);
                                         inputHandler.setFocus(true);
                                     }, onBlur: (e) => {
                                         props.onBlur?.(e);
-                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-date-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { onChange: (e) => {
+                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-date-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { value: inputHandler.value, onChange: (e) => {
                                             inputHandler.setValue(e);
+                                            inputHandler.setIdle(false);
                                             onChange?.(e);
-                                        } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { onChange: (e) => {
+                                            inputHandler.setFocus(false);
+                                        } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { value: inputHandler.value, onChange: (e) => {
                             inputHandler.setValue(e);
+                            inputHandler.setIdle(false);
                             onChange?.(e);
                         } }) }) }))] }));
 }
 ;
-const InputDatePickerComponent = ({ onChange, minDate, maxDate, rightElement, }) => {
+const InputDatePickerComponent = ({ value, onChange, minDate, maxDate, rightElement, }) => {
     const activeYearRef = (0, react_1.useRef)(null);
     const containerYearRef = (0, react_1.useRef)(null);
-    const [currentDate, setCurrentDate] = (0, react_1.useState)((0, moment_1.default)());
-    const [selectedDate, setSelectedDate] = (0, react_1.useState)((0, moment_1.default)());
+    const initialDate = (0, react_1.useMemo)(() => {
+        return value && (0, moment_1.default)(value).isValid() ? (0, moment_1.default)(value) : (0, moment_1.default)();
+    }, [value]);
+    const [currentDate, setCurrentDate] = (0, react_1.useState)(initialDate);
+    const [selectedDate, setSelectedDate] = (0, react_1.useState)(initialDate);
+    (0, react_1.useEffect)(() => {
+        if (value && (0, moment_1.default)(value).isValid()) {
+            const m = (0, moment_1.default)(value);
+            setCurrentDate(m);
+            setSelectedDate(m);
+        }
+    }, [value]);
     const startDate = (0, moment_1.default)(currentDate).startOf("month").startOf("week");
     const endDate = (0, moment_1.default)(currentDate).endOf("month").endOf("week");
-    const handlePrevMonth = () => setCurrentDate((0, moment_1.default)(currentDate).subtract(1, "month"));
-    const handleNextMonth = () => setCurrentDate((0, moment_1.default)(currentDate).add(1, "month"));
+    const handlePrevMonth = (e) => {
+        e?.preventDefault();
+        e?.stopPropagation();
+        setCurrentDate((0, moment_1.default)(currentDate).subtract(1, "month"));
+    };
+    const handleNextMonth = (e) => {
+        e?.preventDefault();
+        e?.stopPropagation();
+        setCurrentDate((0, moment_1.default)(currentDate).add(1, "month"));
+    };
     const handleDateClick = (date) => {
-        if ((minDate && date.isBefore((0, moment_1.default)(minDate))) || (maxDate && date.isAfter((0, moment_1.default)(maxDate)))) {
+        if ((minDate && date.isBefore((0, moment_1.default)(minDate), "day")) || (maxDate && date.isAfter((0, moment_1.default)(maxDate), "day"))) {
             return;
         }
         setSelectedDate(date);
         onChange?.(date.format("YYYY-MM-DD"));
     };
     const renderDays = () => {
-        const days = [];
-        const startDay = (0, moment_1.default)(startDate);
-        for (let i = 0; i < 7; i++) {
-            days.push((0, jsx_runtime_1.jsx)("div", { className: "text-center font-bold", children: startDay.add(i, "days").format("dd") }, i));
-        }
-        return days;
+        const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+        return dayNames.map((d, i) => ((0, jsx_runtime_1.jsx)("div", { className: "text-center text-[11px] font-semibold text-light-foreground", children: d }, i)));
     };
     const renderCells = () => {
         const rows = [];
@@ -74,35 +91,36 @@ const InputDatePickerComponent = ({ onChange, minDate, maxDate, rightElement, })
         while (day.isBefore(endDate) || day.isSame(endDate, "day")) {
             for (let i = 0; i < 7; i++) {
                 const cloneDay = (0, moment_1.default)(day);
-                days.push((0, jsx_runtime_1.jsx)("div", { className: `w-8 aspect-square flex items-center justify-center text-center rounded-lg transition-all 
-              ${day.isSame(currentDate, "month") ? "text-foreground" : "text-light-foreground"} 
-              ${day.isSame(selectedDate, "day") ? "bg-primary text-background" : "hover:bg-light-primary"}
-              ${day.isSame((0, moment_1.default)(), "day") ? "border !border-primary" : "hover:bg-light-primary"} 
-              ${(minDate && day.isBefore((0, moment_1.default)(minDate))) || (maxDate && day.isAfter((0, moment_1.default)(maxDate))) ? "opacity-10 cursor-not-allowed" : "cursor-pointer"}`, onClick: () => handleDateClick(cloneDay), children: day.format("D") }, day.toString()));
+                const isCurrentMonth = day.isSame(currentDate, "month");
+                const isSelected = day.isSame(selectedDate, "day");
+                const isToday = day.isSame((0, moment_1.default)(), "day");
+                const isDisabled = (minDate && day.isBefore((0, moment_1.default)(minDate), "day")) ||
+                    (maxDate && day.isAfter((0, moment_1.default)(maxDate), "day"));
+                days.push((0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, _utils_1.cn)("w-8 h-8 text-xs flex items-center justify-center text-center rounded-lg transition-all border-none select-none", isCurrentMonth ? "text-foreground font-medium" : "text-light-foreground/40", isSelected ? "bg-primary text-white font-bold hover:bg-primary" : (isToday ? "border border-primary font-semibold hover:bg-light-primary" : "hover:bg-light-primary"), isDisabled ? "opacity-20 cursor-not-allowed pointer-events-none" : "cursor-pointer"), onClick: () => !isDisabled && handleDateClick(cloneDay), children: day.format("D") }, day.format("YYYY-MM-DD")));
                 day.add(1, "day");
             }
-            rows.push((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days }, day.toString()));
+            rows.push((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days }, day.format("YYYY-MM-DD-row")));
             days = [];
         }
         return rows;
     };
     const years = (0, react_1.useMemo)(() => {
         const dumpYears = [];
-        for (let i = 1945; i <= (0, moment_1.default)().year(); i++) {
+        for (let i = 1940; i <= (0, moment_1.default)().year() + 10; i++) {
             dumpYears.push(i);
         }
         return dumpYears;
     }, []);
     (0, react_1.useEffect)(() => {
         if (activeYearRef.current && containerYearRef.current) {
-            containerYearRef.current.scrollTo({
-                top: activeYearRef.current.offsetTop - containerYearRef.current.offsetTop,
-            });
+            const container = containerYearRef.current;
+            const activeEl = activeYearRef.current;
+            container.scrollTop = activeEl.offsetTop - container.offsetTop - (container.clientHeight / 2) + (activeEl.clientHeight / 2);
         }
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full flex gap-2 max-h-[260]", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-1/5 overflow-y-auto input-scroll pr-1", ref: containerYearRef, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: years?.map((item) => {
+    }, [currentDate.year()]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full flex gap-2.5 h-[260px] select-none", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-[68px] shrink-0 h-full overflow-y-auto input-scroll pr-1 border-r border-stroke", ref: containerYearRef, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-0.5", children: years?.map((item) => {
                         const isActive = currentDate?.year() === item;
-                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: isActive ? activeYearRef : null, className: `py-1 px-2 font-semibold rounded-[6px] cursor-pointer ${isActive && "bg-light-primary"}`, onClick: () => setCurrentDate((0, moment_1.default)().set("year", item)), children: item }, item) }));
-                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-4/5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handlePrevMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "font-semibold", children: currentDate.format("MMMM") }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNextMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-right" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: renderDays() }), (0, jsx_runtime_1.jsx)("div", { children: renderCells() })] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
+                        return ((0, jsx_runtime_1.jsx)("div", { ref: isActive ? activeYearRef : null, className: (0, _utils_1.cn)("py-1 px-2 font-semibold rounded-md cursor-pointer transition-colors text-center select-none", isActive ? "bg-primary text-white" : "hover:bg-light-primary text-foreground"), onClick: () => setCurrentDate((0, moment_1.default)(currentDate).set("year", item)), children: item }, item));
+                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col justify-between pl-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-1.5", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handlePrevMonth, className: "w-7 h-7 flex items-center justify-center text-xs rounded-full hover:bg-light-primary transition-colors cursor-pointer border-none bg-transparent", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left", className: "w-3.5 h-3.5" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "font-semibold", children: currentDate.format("MMMM YYYY") }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleNextMonth, className: "w-7 h-7 flex items-center justify-center text-xs rounded-full hover:bg-light-primary transition-colors cursor-pointer border-none bg-transparent", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-right", className: "w-3.5 h-3.5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-1", children: renderDays() }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: renderCells() })] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
 };
 exports.InputDatePickerComponent = InputDatePickerComponent;

package/dist/input/InputDatetime.component.js

@@ -55,7 +55,7 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
                                                         label: "Jam",
                                                         value: 'time'
                                                     },
-                                                ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { onChange: (e) => {
+                                                ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { value: dateValue, onChange: (e) => {
                                                     setDateValue(e);
                                                     handleChange(e, timeValue);
                                                 } })) : ((0, jsx_runtime_1.jsx)(InputTime_component_1.InputTimePickerComponent, { onChange: (e) => {
@@ -70,7 +70,7 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
                                     label: "Jam",
                                     value: 'time'
                                 },
-                            ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { onChange: (e) => {
+                            ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { value: dateValue, onChange: (e) => {
                                 setDateValue(e);
                                 handleChange(e, timeValue);
                             } })) : ((0, jsx_runtime_1.jsx)(InputTime_component_1.InputTimePickerComponent, { onChange: (e) => {

package/dist/input/InputImage.component.d.ts

@@ -17,6 +17,8 @@ export declare const InputImageComponent: React.FC<InputImageProps>;
 interface CropperProps {
     src: string;
     aspect: number;
+    fileName?: string;
+    fileType?: string;
     onDone?: (file: File) => void;
 }
 export declare const CanvasCropper: React.FC<CropperProps>;

package/dist/input/InputImage.component.js

@@ -16,6 +16,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
     const [preview, setPreview] = (0, react_1.useState)("");
     const [drag, setDrag] = (0, react_1.useState)(false);
     const [cropSrc, setCropSrc] = (0, react_1.useState)(null);
+    const [cropFile, setCropFile] = (0, react_1.useState)(null);
     const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
     const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true, unregister);
     const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
@@ -35,6 +36,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
         }
     }, [value]);
     const openCropper = (file) => {
+        setCropFile(file);
         const reader = new FileReader();
         reader.onload = () => {
             setCropSrc(reader.result);
@@ -68,10 +70,14 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
     };
     const onCropCancel = () => {
         setOpenCrop(false);
+        setCropFile(null);
+        setCropSrc(null);
         inputRef.current.value = "";
     };
     const remove = () => {
         setPreview("");
+        setCropFile(null);
+        setCropSrc(null);
         onChange?.(null);
         inputRef.current && (inputRef.current.value = "");
     };
@@ -99,12 +105,11 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
                     }, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
                         e.preventDefault();
                         setDrag(true);
-                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-fit max-w-[90vw]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
+                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-fit max-w-[90vw]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), fileName: cropFile?.name, fileType: cropFile?.type, onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), fileName: cropFile?.name, fileType: cropFile?.type, onDone: onCropDone }) })) }))] }));
 };
 exports.InputImageComponent = InputImageComponent;
-const CanvasCropper = ({ src, aspect, onDone, }) => {
+const CanvasCropper = ({ src, aspect, fileName, fileType, onDone, }) => {
     const canvasRef = (0, react_1.useRef)(null);
-    const previewRef = (0, react_1.useRef)(null);
     const pinchDistRef = (0, react_1.useRef)(0);
     const pinchStartZoomRef = (0, react_1.useRef)(1);
     const [img, setImg] = (0, react_1.useState)(null);
@@ -130,8 +135,8 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
         canvas.width = CROP_W;
         canvas.height = CROP_SIZE;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        const scaledW = img.width * zoom;
-        const scaledH = img.height * zoom;
+        const scaledW = img.naturalWidth * zoom;
+        const scaledH = img.naturalHeight * zoom;
         const x = pos.x - scaledW / 2 + CROP_W / 2;
         const y = pos.y - scaledH / 2 + CROP_SIZE / 2;
         ctx.drawImage(img, x, y, scaledW, scaledH);
@@ -178,19 +183,50 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
     const performCrop = () => {
         if (!img)
             return;
-        const preview = previewRef.current;
-        const pctx = preview.getContext("2d");
-        preview.width = CROP_W;
-        preview.height = CROP_SIZE;
-        const scaledW = img.width * zoom;
-        const scaledH = img.height * zoom;
-        const x = pos.x - scaledW / 2 + CROP_W / 2;
-        const y = pos.y - scaledH / 2 + CROP_SIZE / 2;
-        pctx.drawImage(img, x, y, scaledW, scaledH);
-        preview.toBlob((blob) => {
-            const file = new File([blob], "cropped.png", { type: "image/png" });
+        const scaleFactor = 1 / zoom;
+        const scaledW = img.naturalWidth * zoom;
+        const scaledH = img.naturalHeight * zoom;
+        const cropDisplayX = (scaledW - CROP_W) / 2 - pos.x;
+        const cropDisplayY = (scaledH - CROP_SIZE) / 2 - pos.y;
+        const sourceX = cropDisplayX * scaleFactor;
+        const sourceY = cropDisplayY * scaleFactor;
+        const sourceW = CROP_W * scaleFactor;
+        const sourceH = CROP_SIZE * scaleFactor;
+        const sx = Math.max(0, Math.min(img.naturalWidth - 1, sourceX));
+        const sy = Math.max(0, Math.min(img.naturalHeight - 1, sourceY));
+        const sw = Math.min(sourceW, img.naturalWidth - sx);
+        const sh = Math.min(sourceH, img.naturalHeight - sy);
+        let targetW = Math.round(sw);
+        let targetH = Math.round(sh);
+        const MAX_DIMENSION = 2560;
+        if (targetW > MAX_DIMENSION || targetH > MAX_DIMENSION) {
+            if (targetW >= targetH) {
+                targetH = Math.round((targetH * MAX_DIMENSION) / targetW);
+                targetW = MAX_DIMENSION;
+            }
+            else {
+                targetW = Math.round((targetW * MAX_DIMENSION) / targetH);
+                targetH = MAX_DIMENSION;
+            }
+        }
+        const outputCanvas = document.createElement("canvas");
+        outputCanvas.width = targetW;
+        outputCanvas.height = targetH;
+        const octx = outputCanvas.getContext("2d");
+        if (!octx)
+            return;
+        octx.imageSmoothingEnabled = true;
+        octx.imageSmoothingQuality = "high";
+        octx.drawImage(img, sx, sy, sw, sh, 0, 0, targetW, targetH);
+        const type = fileType || "image/jpeg";
+        const name = fileName || (type === "image/png" ? "cropped.png" : "cropped.jpg");
+        const quality = type === "image/png" ? undefined : 0.92;
+        outputCanvas.toBlob((blob) => {
+            if (!blob)
+                return;
+            const file = new File([blob], name, { type, lastModified: Date.now() });
             onDone?.(file);
-        });
+        }, type, quality);
     };
     const handleWheel = (e) => {
         e.preventDefault();
@@ -276,6 +312,6 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
         setDragging(false);
         pinchDistRef.current = 0;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) }), (0, jsx_runtime_1.jsx)("canvas", { ref: previewRef, className: "hidden" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) })] }));
 };
 exports.CanvasCropper = CanvasCropper;

package/dist/input/InputTime.component.d.ts

@@ -8,16 +8,18 @@ export interface InputTimeProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     value?: string;
     invalid?: string;
     validations?: ValidationRules;
+    showSeconds?: boolean;
     onChange?: (value: string) => any;
     register?: (name: string, validations?: ValidationRules) => void;
     unregister?: (name: string) => void;
     /** Use custom class with: "label::", "tip::", "error::", "icon::". */
     className?: string;
 }
-export declare function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputTimeProps): import("@types/react").JSX.Element;
-interface InputTimePickerProps {
+export declare function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, showSeconds, register, unregister, onChange, className, ...props }: InputTimeProps): import("@types/react").JSX.Element;
+export interface InputTimePickerProps {
+    value?: string;
+    showSeconds?: boolean;
     onChange?: (time: string) => void;
     rightElement?: ReactNode;
 }
 export declare const InputTimePickerComponent: FC<InputTimePickerProps>;
-export {};

package/dist/input/InputTime.component.js

@@ -10,7 +10,7 @@ const _utils_1 = require("@utils");
 const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const Button_component_1 = require("../button/Button.component");
 const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
-function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
+function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, showSeconds, register, unregister, onChange, className = "", ...props }) {
     const { isSm } = (0, _utils_1.useResponsive)();
     // =========================>
     // ## Initial
@@ -28,48 +28,129 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
                                     }, onFocus: (e) => {
                                         props.onFocus?.(e);
                                         inputHandler.setFocus(true);
-                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-time-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
+                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-time-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { value: inputHandler.value, showSeconds: showSeconds, onChange: (time) => {
                                             inputHandler.setValue(time);
+                                            inputHandler.setIdle(false);
                                             onChange?.(time);
-                                        } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
+                                        } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { value: inputHandler.value, showSeconds: showSeconds, onChange: (time) => {
                             inputHandler.setValue(time);
+                            inputHandler.setIdle(false);
                             onChange?.(time);
                         } }) }) }))] }));
 }
 ;
-const InputTimePickerComponent = ({ onChange, rightElement, }) => {
-    const [hour, setHour] = (0, react_1.useState)(0);
-    const [minute, setMinute] = (0, react_1.useState)(0);
-    const [second, setSecond] = (0, react_1.useState)(0);
+const InputTimePickerComponent = ({ value, showSeconds = false, onChange, rightElement, }) => {
+    const parsed = (0, react_1.useMemo)(() => {
+        if (!value || typeof value !== "string") {
+            return { h: 0, m: 0, s: 0, hasValue: false };
+        }
+        const parts = value.split(":").map((p) => parseInt(p, 10));
+        return {
+            h: isNaN(parts[0]) ? 0 : Math.min(23, Math.max(0, parts[0])),
+            m: isNaN(parts[1]) ? 0 : Math.min(59, Math.max(0, parts[1])),
+            s: isNaN(parts[2]) ? 0 : Math.min(59, Math.max(0, parts[2])),
+            hasValue: true,
+        };
+    }, [value]);
+    const [hour, setHour] = (0, react_1.useState)(parsed.h);
+    const [minute, setMinute] = (0, react_1.useState)(parsed.m);
+    const [second, setSecond] = (0, react_1.useState)(parsed.s);
+    const shouldShowSeconds = showSeconds || (typeof value === "string" && value.split(":").length >= 3 && value.split(":")[2] !== "");
+    (0, react_1.useEffect)(() => {
+        if (parsed.hasValue) {
+            setHour(parsed.h);
+            setMinute(parsed.m);
+            setSecond(parsed.s);
+        }
+    }, [parsed]);
     const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
     const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
     const seconds = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
-    const handleSelect = (type, val) => {
-        if (type === "h")
-            setHour(Number(val));
-        if (type === "m")
-            setMinute(Number(val));
-        if (type === "s")
-            setSecond(Number(val));
+    const presetContainerRef = (0, react_1.useRef)(null);
+    const activePresetRef = (0, react_1.useRef)(null);
+    const hourContainerRef = (0, react_1.useRef)(null);
+    const activeHourRef = (0, react_1.useRef)(null);
+    const minuteContainerRef = (0, react_1.useRef)(null);
+    const activeMinuteRef = (0, react_1.useRef)(null);
+    const secondContainerRef = (0, react_1.useRef)(null);
+    const activeSecondRef = (0, react_1.useRef)(null);
+    const scrollToActive = (container, active) => {
+        if (container && active) {
+            container.scrollTop = active.offsetTop - container.offsetTop - (container.clientHeight / 2) + (active.clientHeight / 2);
+        }
     };
     (0, react_1.useEffect)(() => {
-        const formatted = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:${String(second).padStart(2, "0")}`;
+        scrollToActive(hourContainerRef.current, activeHourRef.current);
+        scrollToActive(minuteContainerRef.current, activeMinuteRef.current);
+        if (shouldShowSeconds) {
+            scrollToActive(secondContainerRef.current, activeSecondRef.current);
+        }
+        scrollToActive(presetContainerRef.current, activePresetRef.current);
+    }, []);
+    const emitChange = (newH, newM, newS) => {
+        const hh = String(newH).padStart(2, "0");
+        const mm = String(newM).padStart(2, "0");
+        const ss = String(newS).padStart(2, "0");
+        const formatted = shouldShowSeconds ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;
         onChange?.(formatted);
-    }, [hour, minute, second]);
-    const renderColumn = (items, type, activeValue) => ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto text-center input-scroll", children: items.map((item) => {
-            const active = Number(item) === activeValue;
-            return ((0, jsx_runtime_1.jsx)("div", { onClick: () => handleSelect(type, item), className: (0, _utils_1.cn)("p-2 cursor-pointer rounded text-sm", active ? "bg-primary text-background font-semibold" : "hover:bg-light-primary"), children: item }, item));
-        }) }));
+    };
+    const handleSelect = (type, val) => {
+        let newH = hour;
+        let newM = minute;
+        let newS = second;
+        if (type === "h") {
+            newH = val;
+            setHour(val);
+        }
+        else if (type === "m") {
+            newM = val;
+            setMinute(val);
+        }
+        else if (type === "s") {
+            newS = val;
+            setSecond(val);
+        }
+        emitChange(newH, newM, newS);
+    };
+    const handlePresetSelect = (presetStr) => {
+        const parts = presetStr.split(":").map(Number);
+        const newH = parts[0] ?? 0;
+        const newM = parts[1] ?? 0;
+        const newS = 0;
+        setHour(newH);
+        setMinute(newM);
+        setSecond(newS);
+        emitChange(newH, newM, newS);
+    };
     const timeSlots = (0, react_1.useMemo)(() => {
-        const newTimeSlots = [];
-        for (let i = 0; i <= 24 * 60; i += 30) {
-            const hours = Math.floor(i / 60);
-            const minutes = i % 60;
-            const label = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
-            newTimeSlots.push(label);
+        const slots = [];
+        for (let i = 0; i < 24 * 60; i += 30) {
+            const h = Math.floor(i / 60);
+            const m = i % 60;
+            slots.push(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
         }
-        return newTimeSlots;
+        return slots;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full max-h-[260] flex gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-1/3 overflow-y-auto bg-background rounded-[6px] input-scroll", children: timeSlots.map((time) => ((0, jsx_runtime_1.jsx)("div", { className: "p-2 text-sm rounded cursor-pointer hover:bg-light-primary text-center", onClick: () => onChange?.(time), children: time }, time))) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-2/3 flex gap-2", children: [renderColumn(hours, "h", hour), renderColumn(minutes, "m", minute), renderColumn(seconds, "s", second)] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full flex gap-2 h-[260px] select-none text-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-20 shrink-0 h-full flex flex-col border-r border-stroke pr-1.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke", children: "Preset" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5", ref: presetContainerRef, children: timeSlots.map((time) => {
+                            const isPresetActive = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}` === time;
+                            return ((0, jsx_runtime_1.jsx)("div", { ref: isPresetActive ? activePresetRef : null, className: (0, _utils_1.cn)("py-1.5 px-1 text-center font-medium rounded-md cursor-pointer transition-colors", isPresetActive
+                                    ? "bg-primary text-white font-semibold"
+                                    : "hover:bg-light-primary text-foreground"), onClick: () => handlePresetSelect(time), children: time }, time));
+                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 h-full flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke", children: "Jam" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5", ref: hourContainerRef, children: hours.map((item) => {
+                            const active = Number(item) === hour;
+                            return ((0, jsx_runtime_1.jsx)("div", { ref: active ? activeHourRef : null, onClick: () => handleSelect("h", Number(item)), className: (0, _utils_1.cn)("py-1.5 text-center font-medium rounded-md cursor-pointer transition-colors", active
+                                    ? "bg-primary text-white font-semibold"
+                                    : "hover:bg-light-primary text-foreground"), children: item }, item));
+                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 h-full flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke", children: "Menit" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5", ref: minuteContainerRef, children: minutes.map((item) => {
+                            const active = Number(item) === minute;
+                            return ((0, jsx_runtime_1.jsx)("div", { ref: active ? activeMinuteRef : null, onClick: () => handleSelect("m", Number(item)), className: (0, _utils_1.cn)("py-1.5 text-center font-medium rounded-md cursor-pointer transition-colors", active
+                                    ? "bg-primary text-white font-semibold"
+                                    : "hover:bg-light-primary text-foreground"), children: item }, item));
+                        }) })] }), shouldShowSeconds && ((0, jsx_runtime_1.jsxs)("div", { className: "flex-1 h-full flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke", children: "Detik" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5", ref: secondContainerRef, children: seconds.map((item) => {
+                            const active = Number(item) === second;
+                            return ((0, jsx_runtime_1.jsx)("div", { ref: active ? activeSecondRef : null, onClick: () => handleSelect("s", Number(item)), className: (0, _utils_1.cn)("py-1.5 text-center font-medium rounded-md cursor-pointer transition-colors", active
+                                    ? "bg-primary text-white font-semibold"
+                                    : "hover:bg-light-primary text-foreground"), children: item }, item));
+                        }) })] })), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
 };
 exports.InputTimePickerComponent = InputTimePickerComponent;

package/dist/input/Select.component.d.ts

@@ -5,6 +5,8 @@ export interface SelectOptionProps {
     value: string | number;
     searchable?: string[];
     customLabel?: ReactNode;
+    customOption?: ((option: any) => ReactNode) | ReactNode;
+    [key: string]: any;
 }
 export interface SelectProps {
     name: string;
@@ -23,7 +25,8 @@ export interface SelectProps {
     options?: SelectOptionProps[];
     searchable?: boolean;
     serverOptionControl?: ApiType & {
-        cacheName?: string | false;
+        cacheName?: string | boolean;
+        selectableOption?: string[];
     };
     idbOptionControl?: {
         store: string;
@@ -38,6 +41,8 @@ export interface SelectProps {
     maxShowOption?: number;
     creatable?: boolean | string;
     creatableLabel?: string;
+    customOption?: (option: any) => ReactNode;
+    selectableOption?: string[];
     onChange?: (value: any, data?: any) => any;
     register?: (name: string, validations?: ValidationRules) => void;
     unregister?: (name: string) => void;
@@ -46,4 +51,4 @@ export interface SelectProps {
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className?: string;
 }
-export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, creatable, creatableLabel, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("@types/react").JSX.Element;
+export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, creatable, creatableLabel, customOption, selectableOption, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("@types/react").JSX.Element;