@skalfa/skalfa-component 1.0.53 → 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/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;