@deenruv/react-ui-devkit 1.0.16 → 1.0.17-dev.5

package/dist/universal_components/DateTimePicker.js

@@ -4,7 +4,6 @@
  * Find the latest source code at https://github.com/huybuidac/shadcn-datetime-picker
  */
 "use client";
-import { __assign, __rest } from "tslib";
 import * as React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CalendarIcon } from "@radix-ui/react-icons";
@@ -15,22 +14,21 @@ import { cn } from "../lib/utils";
 import { Button, Popover, PopoverContent, PopoverTrigger, ScrollArea, } from "../components/index.js";
 import { buttonVariants } from "../utils/styles.js";
 import { useTranslation } from "../hooks/useTranslation.js";
-var AM_VALUE = 0;
-var PM_VALUE = 1;
-export function DateTimePicker(_a) {
-    var value = _a.value, onChange = _a.onChange, renderTrigger = _a.renderTrigger, min = _a.min, max = _a.max, timezone = _a.timezone, hideTime = _a.hideTime, use12HourFormat = _a.use12HourFormat, disabled = _a.disabled, clearable = _a.clearable, classNames = _a.classNames, timePicker = _a.timePicker, _b = _a.modal, modal = _b === void 0 ? false : _b, props = __rest(_a, ["value", "onChange", "renderTrigger", "min", "max", "timezone", "hideTime", "use12HourFormat", "disabled", "clearable", "classNames", "timePicker", "modal"]);
-    var t = useTranslation("common").t;
-    var _c = useState(false), open = _c[0], setOpen = _c[1];
-    var _d = useState(false), monthYearPicker = _d[0], setMonthYearPicker = _d[1];
-    var initDate = useMemo(function () { return new TZDate(value || new Date(), timezone); }, [value, timezone]);
-    var _e = useState(initDate), month = _e[0], setMonth = _e[1];
-    var _f = useState(initDate), date = _f[0], setDate = _f[1];
-    var endMonth = useMemo(function () {
+const AM_VALUE = 0;
+const PM_VALUE = 1;
+export function DateTimePicker({ value, onChange, renderTrigger, min, max, timezone, hideTime, use12HourFormat, disabled, clearable, classNames, timePicker, modal = false, ...props }) {
+    const { t } = useTranslation("common");
+    const [open, setOpen] = useState(false);
+    const [monthYearPicker, setMonthYearPicker] = useState(false);
+    const initDate = useMemo(() => new TZDate(value || new Date(), timezone), [value, timezone]);
+    const [month, setMonth] = useState(initDate);
+    const [date, setDate] = useState(initDate);
+    const endMonth = useMemo(() => {
         return setYear(month, getYear(month) + 1);
     }, [month]);
-    var minDate = useMemo(function () { return (min ? new TZDate(min, timezone) : undefined); }, [min, timezone]);
-    var maxDate = useMemo(function () { return (max ? new TZDate(max, timezone) : undefined); }, [max, timezone]);
-    var onDayChanged = useCallback(function (d) {
+    const minDate = useMemo(() => (min ? new TZDate(min, timezone) : undefined), [min, timezone]);
+    const maxDate = useMemo(() => (max ? new TZDate(max, timezone) : undefined), [max, timezone]);
+    const onDayChanged = useCallback((d) => {
         d.setHours(date.getHours(), date.getMinutes(), date.getSeconds());
         if (min && d < min) {
             d.setHours(min.getHours(), min.getMinutes(), min.getSeconds());
@@ -40,11 +38,11 @@ export function DateTimePicker(_a) {
         }
         setDate(d);
     }, [setDate, setMonth]);
-    var onSubmit = useCallback(function () {
+    const onSubmit = useCallback(() => {
         onChange(new Date(date));
         setOpen(false);
     }, [date, onChange]);
-    var onMonthYearChanged = useCallback(function (d, mode) {
+    const onMonthYearChanged = useCallback((d, mode) => {
         setMonth(d);
         if (mode === "year") {
             setMonthYearPicker("month");
@@ -53,42 +51,42 @@ export function DateTimePicker(_a) {
             setMonthYearPicker(false);
         }
     }, [setMonth, setMonthYearPicker]);
-    var onNextMonth = useCallback(function () {
+    const onNextMonth = useCallback(() => {
         setMonth(addMonths(month, 1));
     }, [month]);
-    var onPrevMonth = useCallback(function () {
+    const onPrevMonth = useCallback(() => {
         setMonth(subMonths(month, 1));
     }, [month]);
-    useEffect(function () {
+    useEffect(() => {
         if (open) {
             setDate(initDate);
             setMonth(initDate);
             setMonthYearPicker(false);
         }
     }, [open, initDate]);
-    var displayValue = useMemo(function () {
+    const displayValue = useMemo(() => {
         if (!open && !value)
             return value;
         return open ? date : initDate;
     }, [date, value, open]);
-    var displayFormat = useMemo(function () {
+    const displayFormat = useMemo(() => {
         if (!displayValue)
             return "Pick a date";
-        return format(displayValue, "".concat(!hideTime ? "MMM" : "MMMM", " d, yyyy").concat(!hideTime ? (use12HourFormat ? " hh:mm:ss a" : " HH:mm:ss") : ""));
+        return format(displayValue, `${!hideTime ? "MMM" : "MMMM"} d, yyyy${!hideTime ? (use12HourFormat ? " hh:mm:ss a" : " HH:mm:ss") : ""}`);
     }, [displayValue, hideTime, use12HourFormat]);
     return (React.createElement(Popover, { open: open, onOpenChange: setOpen, modal: modal },
         React.createElement(PopoverTrigger, { asChild: true }, renderTrigger ? (renderTrigger({
             value: displayValue,
-            open: open,
-            timezone: timezone,
-            disabled: disabled,
-            use12HourFormat: use12HourFormat,
-            setOpen: setOpen,
-        })) : (React.createElement("div", { className: cn("flex w-full cursor-pointer items-center h-9 ps-3 pe-1 font-normal border border-input rounded-md text-sm shadow-sm", !displayValue && "text-muted-foreground", (!clearable || !value) && "pe-3", disabled && "opacity-50 cursor-not-allowed", classNames === null || classNames === void 0 ? void 0 : classNames.trigger), tabIndex: 0 },
+            open,
+            timezone,
+            disabled,
+            use12HourFormat,
+            setOpen,
+        })) : (React.createElement("div", { className: cn("flex w-full cursor-pointer items-center h-9 ps-3 pe-1 font-normal border border-input rounded-md text-sm shadow-sm", !displayValue && "text-muted-foreground", (!clearable || !value) && "pe-3", disabled && "opacity-50 cursor-not-allowed", classNames?.trigger), tabIndex: 0 },
             React.createElement("div", { className: "flex-grow flex items-center" },
                 React.createElement(CalendarIcon, { className: "mr-2 size-4" }),
                 displayFormat),
-            clearable && value && (React.createElement(Button, { disabled: disabled, variant: "ghost", size: "sm", role: "button", "aria-label": "Clear date", className: "size-6 p-1 ms-1", onClick: function (e) {
+            clearable && value && (React.createElement(Button, { disabled: disabled, variant: "ghost", size: "sm", role: "button", "aria-label": "Clear date", className: "size-6 p-1 ms-1", onClick: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     onChange(undefined);
@@ -99,22 +97,16 @@ export function DateTimePicker(_a) {
             React.createElement("div", { className: "flex items-center justify-between" },
                 React.createElement("div", { className: "text-md font-bold ms-2 flex items-center cursor-pointer" },
                     React.createElement("div", null,
-                        React.createElement("span", { onClick: function () {
-                                return setMonthYearPicker(monthYearPicker === "month" ? false : "month");
-                            } }, format(month, "MMMM")),
-                        React.createElement("span", { className: "ms-1", onClick: function () {
-                                return setMonthYearPicker(monthYearPicker === "year" ? false : "year");
-                            } }, format(month, "yyyy"))),
-                    React.createElement(Button, { variant: "ghost", size: "icon", onClick: function () {
-                            return setMonthYearPicker(monthYearPicker ? false : "year");
-                        } }, monthYearPicker ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null))),
+                        React.createElement("span", { onClick: () => setMonthYearPicker(monthYearPicker === "month" ? false : "month") }, format(month, "MMMM")),
+                        React.createElement("span", { className: "ms-1", onClick: () => setMonthYearPicker(monthYearPicker === "year" ? false : "year") }, format(month, "yyyy"))),
+                    React.createElement(Button, { variant: "ghost", size: "icon", onClick: () => setMonthYearPicker(monthYearPicker ? false : "year") }, monthYearPicker ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null))),
                 React.createElement("div", { className: cn("flex space-x-2", monthYearPicker ? "hidden" : "") },
                     React.createElement(Button, { variant: "ghost", size: "icon", onClick: onPrevMonth },
                         React.createElement(ChevronLeftIcon, null)),
                     React.createElement(Button, { variant: "ghost", size: "icon", onClick: onNextMonth },
                         React.createElement(ChevronRightIcon, null)))),
             React.createElement("div", { className: "relative overflow-hidden" },
-                React.createElement(DayPicker, __assign({ timeZone: timezone, mode: "single", selected: date, onSelect: function (d) { return d && onDayChanged(d); }, month: month, endMonth: endMonth, disabled: [
+                React.createElement(DayPicker, { timeZone: timezone, mode: "single", selected: date, onSelect: (d) => d && onDayChanged(d), month: month, endMonth: endMonth, disabled: [
                         max ? { after: max } : null,
                         min ? { before: min } : null,
                     ].filter(Boolean), onMonthChange: setMonth, classNames: {
@@ -137,7 +129,7 @@ export function DateTimePicker(_a) {
                         disabled: "text-muted-foreground opacity-50",
                         range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
                         hidden: "invisible",
-                    }, showOutsideDays: true }, props)),
+                    }, showOutsideDays: true, ...props }),
                 React.createElement("div", { className: cn("absolute top-0 left-0 bottom-0 right-0", monthYearPicker ? "bg-popover" : "hidden") }),
                 React.createElement(MonthYearPicker, { value: month, mode: monthYearPicker, onChange: onMonthYearChanged, minDate: minDate, maxDate: maxDate, className: cn("absolute top-0 left-0 bottom-0 right-0", monthYearPicker ? "" : "hidden") })),
             React.createElement("div", { className: "flex flex-col gap-2" },
@@ -148,39 +140,38 @@ export function DateTimePicker(_a) {
                         React.createElement("span", null, "Timezone:"),
                         React.createElement("span", { className: "font-semibold ms-1" }, timezone))))))));
 }
-function MonthYearPicker(_a) {
-    var value = _a.value, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.mode, mode = _b === void 0 ? "month" : _b, onChange = _a.onChange, className = _a.className;
-    var yearRef = useRef(null);
-    var years = useMemo(function () {
-        var years = [];
-        for (var i = 1912; i < 2100; i++) {
-            var disabled = false;
-            var startY = startOfYear(setYear(value, i));
-            var endY = endOfYear(setYear(value, i));
+function MonthYearPicker({ value, minDate, maxDate, mode = "month", onChange, className, }) {
+    const yearRef = useRef(null);
+    const years = useMemo(() => {
+        const years = [];
+        for (let i = 1912; i < 2100; i++) {
+            let disabled = false;
+            const startY = startOfYear(setYear(value, i));
+            const endY = endOfYear(setYear(value, i));
             if (minDate && endY < minDate)
                 disabled = true;
             if (maxDate && startY > maxDate)
                 disabled = true;
-            years.push({ value: i, label: i.toString(), disabled: disabled });
+            years.push({ value: i, label: i.toString(), disabled });
         }
         return years;
     }, [value]);
-    var months = useMemo(function () {
-        var months = [];
-        for (var i = 0; i < 12; i++) {
-            var disabled = false;
-            var startM = startOfMonth(setMonthFns(value, i));
-            var endM = endOfMonth(setMonthFns(value, i));
+    const months = useMemo(() => {
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+            let disabled = false;
+            const startM = startOfMonth(setMonthFns(value, i));
+            const endM = endOfMonth(setMonthFns(value, i));
             if (minDate && endM < minDate)
                 disabled = true;
             if (maxDate && startM > maxDate)
                 disabled = true;
-            months.push({ value: i, label: format(new Date(0, i), "MMM"), disabled: disabled });
+            months.push({ value: i, label: format(new Date(0, i), "MMM"), disabled });
         }
         return months;
     }, [value]);
-    var onYearChange = useCallback(function (v) {
-        var newDate = setYear(value, v.value);
+    const onYearChange = useCallback((v) => {
+        let newDate = setYear(value, v.value);
         if (minDate && newDate < minDate) {
             newDate = setMonthFns(newDate, getMonth(minDate));
         }
@@ -189,75 +180,67 @@ function MonthYearPicker(_a) {
         }
         onChange(newDate, "year");
     }, [onChange, value, minDate, maxDate]);
-    useEffect(function () {
-        var _a;
+    useEffect(() => {
         if (mode === "year") {
-            (_a = yearRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "auto", block: "center" });
+            yearRef.current?.scrollIntoView({ behavior: "auto", block: "center" });
         }
     }, [mode, value]);
     return (React.createElement("div", { className: cn(className) },
         React.createElement(ScrollArea, { className: "h-full" },
-            mode === "year" && (React.createElement("div", { className: "grid grid-cols-4" }, years.map(function (year) { return (React.createElement("div", { key: year.value, ref: year.value === getYear(value) ? yearRef : undefined },
-                React.createElement(Button, { disabled: year.disabled, variant: getYear(value) === year.value ? "default" : "ghost", className: "rounded-full", onClick: function () { return onYearChange(year); } }, year.label))); }))),
-            mode === "month" && (React.createElement("div", { className: "grid grid-cols-3 gap-4" }, months.map(function (month) { return (React.createElement(Button, { key: month.value, size: "lg", disabled: month.disabled, variant: getMonth(value) === month.value ? "default" : "ghost", className: "rounded-full", onClick: function () {
-                    return onChange(setMonthFns(value, month.value), "month");
-                } }, month.label)); }))))));
+            mode === "year" && (React.createElement("div", { className: "grid grid-cols-4" }, years.map((year) => (React.createElement("div", { key: year.value, ref: year.value === getYear(value) ? yearRef : undefined },
+                React.createElement(Button, { disabled: year.disabled, variant: getYear(value) === year.value ? "default" : "ghost", className: "rounded-full", onClick: () => onYearChange(year) }, year.label)))))),
+            mode === "month" && (React.createElement("div", { className: "grid grid-cols-3 gap-4" }, months.map((month) => (React.createElement(Button, { key: month.value, size: "lg", disabled: month.disabled, variant: getMonth(value) === month.value ? "default" : "ghost", className: "rounded-full", onClick: () => onChange(setMonthFns(value, month.value), "month") }, month.label))))))));
 }
-function TimePicker(_a) {
-    var value = _a.value, onChange = _a.onChange, use12HourFormat = _a.use12HourFormat, min = _a.min, max = _a.max, timePicker = _a.timePicker;
+function TimePicker({ value, onChange, use12HourFormat, min, max, timePicker, }) {
     // hours24h = HH
     // hours12h = hh
-    var formatStr = useMemo(function () {
-        return use12HourFormat
-            ? "yyyy-MM-dd hh:mm:ss.SSS a xxxx"
-            : "yyyy-MM-dd HH:mm:ss.SSS xxxx";
-    }, [use12HourFormat]);
-    var _b = useState(format(value, "a") === "AM" ? AM_VALUE : PM_VALUE), ampm = _b[0], setAmpm = _b[1];
-    var _c = useState(use12HourFormat ? +format(value, "hh") : value.getHours()), hour = _c[0], setHour = _c[1];
-    var _d = useState(value.getMinutes()), minute = _d[0], setMinute = _d[1];
-    var _e = useState(value.getSeconds()), second = _e[0], setSecond = _e[1];
-    useEffect(function () {
+    const formatStr = useMemo(() => use12HourFormat
+        ? "yyyy-MM-dd hh:mm:ss.SSS a xxxx"
+        : "yyyy-MM-dd HH:mm:ss.SSS xxxx", [use12HourFormat]);
+    const [ampm, setAmpm] = useState(format(value, "a") === "AM" ? AM_VALUE : PM_VALUE);
+    const [hour, setHour] = useState(use12HourFormat ? +format(value, "hh") : value.getHours());
+    const [minute, setMinute] = useState(value.getMinutes());
+    const [second, setSecond] = useState(value.getSeconds());
+    useEffect(() => {
         onChange(buildTime({
-            use12HourFormat: use12HourFormat,
-            value: value,
-            formatStr: formatStr,
-            hour: hour,
-            minute: minute,
-            second: second,
-            ampm: ampm,
+            use12HourFormat,
+            value,
+            formatStr,
+            hour,
+            minute,
+            second,
+            ampm,
         }));
     }, [hour, minute, second, ampm, formatStr, use12HourFormat]);
-    var _hourIn24h = useMemo(function () {
+    const _hourIn24h = useMemo(() => {
         // if (use12HourFormat) {
         //   return (hour % 12) + ampm * 12;
         // }
         return use12HourFormat ? (hour % 12) + ampm * 12 : hour;
     }, [value, use12HourFormat, ampm]);
-    var hours = useMemo(function () {
-        return Array.from({ length: use12HourFormat ? 12 : 24 }, function (_, i) {
-            var disabled = false;
-            var hourValue = use12HourFormat ? (i === 0 ? 12 : i) : i;
-            var hDate = setHours(value, use12HourFormat ? i + ampm * 12 : i);
-            var hStart = startOfHour(hDate);
-            var hEnd = endOfHour(hDate);
-            if (min && hEnd < min)
-                disabled = true;
-            if (max && hStart > max)
-                disabled = true;
-            return {
-                value: hourValue,
-                label: hourValue.toString().padStart(2, "0"),
-                disabled: disabled,
-            };
-        });
-    }, [value, min, max, use12HourFormat, ampm]);
-    var minutes = useMemo(function () {
-        var anchorDate = setHours(value, _hourIn24h);
-        return Array.from({ length: 60 }, function (_, i) {
-            var disabled = false;
-            var mDate = setMinutes(anchorDate, i);
-            var mStart = startOfMinute(mDate);
-            var mEnd = endOfMinute(mDate);
+    const hours = useMemo(() => Array.from({ length: use12HourFormat ? 12 : 24 }, (_, i) => {
+        let disabled = false;
+        const hourValue = use12HourFormat ? (i === 0 ? 12 : i) : i;
+        const hDate = setHours(value, use12HourFormat ? i + ampm * 12 : i);
+        const hStart = startOfHour(hDate);
+        const hEnd = endOfHour(hDate);
+        if (min && hEnd < min)
+            disabled = true;
+        if (max && hStart > max)
+            disabled = true;
+        return {
+            value: hourValue,
+            label: hourValue.toString().padStart(2, "0"),
+            disabled,
+        };
+    }), [value, min, max, use12HourFormat, ampm]);
+    const minutes = useMemo(() => {
+        const anchorDate = setHours(value, _hourIn24h);
+        return Array.from({ length: 60 }, (_, i) => {
+            let disabled = false;
+            const mDate = setMinutes(anchorDate, i);
+            const mStart = startOfMinute(mDate);
+            const mEnd = endOfMinute(mDate);
             if (min && mEnd < min)
                 disabled = true;
             if (max && mStart > max)
@@ -265,17 +248,17 @@ function TimePicker(_a) {
             return {
                 value: i,
                 label: i.toString().padStart(2, "0"),
-                disabled: disabled,
+                disabled,
             };
         });
     }, [value, min, max, _hourIn24h]);
-    var seconds = useMemo(function () {
-        var anchorDate = setMilliseconds(setMinutes(setHours(value, _hourIn24h), minute), 0);
-        var _min = min ? setMilliseconds(min, 0) : undefined;
-        var _max = max ? setMilliseconds(max, 0) : undefined;
-        return Array.from({ length: 60 }, function (_, i) {
-            var disabled = false;
-            var sDate = setSeconds(anchorDate, i);
+    const seconds = useMemo(() => {
+        const anchorDate = setMilliseconds(setMinutes(setHours(value, _hourIn24h), minute), 0);
+        const _min = min ? setMilliseconds(min, 0) : undefined;
+        const _max = max ? setMilliseconds(max, 0) : undefined;
+        return Array.from({ length: 60 }, (_, i) => {
+            let disabled = false;
+            const sDate = setSeconds(anchorDate, i);
             if (_min && sDate < _min)
                 disabled = true;
             if (_max && sDate > _max)
@@ -283,52 +266,51 @@ function TimePicker(_a) {
             return {
                 value: i,
                 label: i.toString().padStart(2, "0"),
-                disabled: disabled,
+                disabled,
             };
         });
     }, [value, minute, min, max, _hourIn24h]);
-    var ampmOptions = useMemo(function () {
-        var startD = startOfDay(value);
-        var endD = endOfDay(value);
+    const ampmOptions = useMemo(() => {
+        const startD = startOfDay(value);
+        const endD = endOfDay(value);
         return [
             { value: AM_VALUE, label: "AM" },
             { value: PM_VALUE, label: "PM" },
-        ].map(function (v) {
-            var disabled = false;
-            var start = addHours(startD, v.value * 12);
-            var end = subHours(endD, (1 - v.value) * 12);
+        ].map((v) => {
+            let disabled = false;
+            const start = addHours(startD, v.value * 12);
+            const end = subHours(endD, (1 - v.value) * 12);
             if (min && end < min)
                 disabled = true;
             if (max && start > max)
                 disabled = true;
-            return __assign(__assign({}, v), { disabled: disabled });
+            return { ...v, disabled };
         });
     }, [value, min, max]);
-    var _f = useState(false), open = _f[0], setOpen = _f[1];
-    var hourRef = useRef(null);
-    var minuteRef = useRef(null);
-    var secondRef = useRef(null);
-    useEffect(function () {
-        var timeoutId = setTimeout(function () {
-            var _a, _b, _c;
+    const [open, setOpen] = useState(false);
+    const hourRef = useRef(null);
+    const minuteRef = useRef(null);
+    const secondRef = useRef(null);
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
             if (open) {
-                (_a = hourRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "auto" });
-                (_b = minuteRef.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ behavior: "auto" });
-                (_c = secondRef.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ behavior: "auto" });
+                hourRef.current?.scrollIntoView({ behavior: "auto" });
+                minuteRef.current?.scrollIntoView({ behavior: "auto" });
+                secondRef.current?.scrollIntoView({ behavior: "auto" });
             }
         }, 1);
-        return function () { return clearTimeout(timeoutId); };
+        return () => clearTimeout(timeoutId);
     }, [open]);
-    var onHourChange = useCallback(function (v) {
+    const onHourChange = useCallback((v) => {
         if (min) {
-            var newTime = buildTime({
-                use12HourFormat: use12HourFormat,
-                value: value,
-                formatStr: formatStr,
+            const newTime = buildTime({
+                use12HourFormat,
+                value,
+                formatStr,
                 hour: v.value,
-                minute: minute,
-                second: second,
-                ampm: ampm,
+                minute,
+                second,
+                ampm,
             });
             if (newTime < min) {
                 setMinute(min.getMinutes());
@@ -336,14 +318,14 @@ function TimePicker(_a) {
             }
         }
         if (max) {
-            var newTime = buildTime({
-                use12HourFormat: use12HourFormat,
-                value: value,
-                formatStr: formatStr,
+            const newTime = buildTime({
+                use12HourFormat,
+                value,
+                formatStr,
                 hour: v.value,
-                minute: minute,
-                second: second,
-                ampm: ampm,
+                minute,
+                second,
+                ampm,
             });
             if (newTime > max) {
                 setMinute(max.getMinutes());
@@ -352,30 +334,30 @@ function TimePicker(_a) {
         }
         setHour(v.value);
     }, [setHour, use12HourFormat, value, formatStr, minute, second, ampm]);
-    var onMinuteChange = useCallback(function (v) {
+    const onMinuteChange = useCallback((v) => {
         if (min) {
-            var newTime = buildTime({
-                use12HourFormat: use12HourFormat,
-                value: value,
-                formatStr: formatStr,
+            const newTime = buildTime({
+                use12HourFormat,
+                value,
+                formatStr,
                 hour: v.value,
-                minute: minute,
-                second: second,
-                ampm: ampm,
+                minute,
+                second,
+                ampm,
             });
             if (newTime < min) {
                 setSecond(min.getSeconds());
             }
         }
         if (max) {
-            var newTime = buildTime({
-                use12HourFormat: use12HourFormat,
-                value: value,
-                formatStr: formatStr,
+            const newTime = buildTime({
+                use12HourFormat,
+                value,
+                formatStr,
                 hour: v.value,
-                minute: minute,
-                second: second,
-                ampm: ampm,
+                minute,
+                second,
+                ampm,
             });
             if (newTime > max) {
                 setSecond(newTime.getSeconds());
@@ -383,36 +365,36 @@ function TimePicker(_a) {
         }
         setMinute(v.value);
     }, [setMinute, use12HourFormat, value, formatStr, hour, second, ampm]);
-    var onAmpmChange = useCallback(function (v) {
+    const onAmpmChange = useCallback((v) => {
         if (min) {
-            var newTime = buildTime({
-                use12HourFormat: use12HourFormat,
-                value: value,
-                formatStr: formatStr,
-                hour: hour,
-                minute: minute,
-                second: second,
+            const newTime = buildTime({
+                use12HourFormat,
+                value,
+                formatStr,
+                hour,
+                minute,
+                second,
                 ampm: v.value,
             });
             if (newTime < min) {
-                var minH = min.getHours() % 12;
+                const minH = min.getHours() % 12;
                 setHour(minH === 0 ? 12 : minH);
                 setMinute(min.getMinutes());
                 setSecond(min.getSeconds());
             }
         }
         if (max) {
-            var newTime = buildTime({
-                use12HourFormat: use12HourFormat,
-                value: value,
-                formatStr: formatStr,
-                hour: hour,
-                minute: minute,
-                second: second,
+            const newTime = buildTime({
+                use12HourFormat,
+                value,
+                formatStr,
+                hour,
+                minute,
+                second,
                 ampm: v.value,
             });
             if (newTime > max) {
-                var maxH = max.getHours() % 12;
+                const maxH = max.getHours() % 12;
                 setHour(maxH === 0 ? 12 : maxH);
                 setMinute(max.getMinutes());
                 setSecond(max.getSeconds());
@@ -430,10 +412,9 @@ function TimePicker(_a) {
         min,
         max,
     ]);
-    var display = useMemo(function () {
-        var arr = [];
-        for (var _i = 0, _a = ["hour", "minute", "second"]; _i < _a.length; _i++) {
-            var element = _a[_i];
+    const display = useMemo(() => {
+        const arr = [];
+        for (const element of ["hour", "minute", "second"]) {
             if (!timePicker || timePicker[element]) {
                 if (element === "hour") {
                     arr.push(use12HourFormat ? "hh" : "HH");
@@ -455,31 +436,30 @@ function TimePicker(_a) {
             React.createElement("div", { className: "flex-col gap-2 p-2" },
                 React.createElement("div", { className: "flex h-56 grow" },
                     (!timePicker || timePicker.hour) && (React.createElement(ScrollArea, { className: "h-full flex-grow" },
-                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48" }, hours.map(function (v) { return (React.createElement("div", { key: v.value, ref: v.value === hour ? hourRef : undefined },
-                            React.createElement(TimeItem, { option: v, selected: v.value === hour, onSelect: onHourChange, className: "h-8", disabled: v.disabled }))); })))),
+                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48" }, hours.map((v) => (React.createElement("div", { key: v.value, ref: v.value === hour ? hourRef : undefined },
+                            React.createElement(TimeItem, { option: v, selected: v.value === hour, onSelect: onHourChange, className: "h-8", disabled: v.disabled }))))))),
                     (!timePicker || timePicker.minute) && (React.createElement(ScrollArea, { className: "h-full flex-grow" },
-                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48" }, minutes.map(function (v) { return (React.createElement("div", { key: v.value, ref: v.value === minute ? minuteRef : undefined },
-                            React.createElement(TimeItem, { option: v, selected: v.value === minute, onSelect: onMinuteChange, className: "h-8", disabled: v.disabled }))); })))),
+                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48" }, minutes.map((v) => (React.createElement("div", { key: v.value, ref: v.value === minute ? minuteRef : undefined },
+                            React.createElement(TimeItem, { option: v, selected: v.value === minute, onSelect: onMinuteChange, className: "h-8", disabled: v.disabled }))))))),
                     (!timePicker || timePicker.second) && (React.createElement(ScrollArea, { className: "h-full flex-grow" },
-                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48" }, seconds.map(function (v) { return (React.createElement("div", { key: v.value, ref: v.value === second ? secondRef : undefined },
-                            React.createElement(TimeItem, { option: v, selected: v.value === second, onSelect: function (v) { return setSecond(v.value); }, className: "h-8", disabled: v.disabled }))); })))),
+                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48" }, seconds.map((v) => (React.createElement("div", { key: v.value, ref: v.value === second ? secondRef : undefined },
+                            React.createElement(TimeItem, { option: v, selected: v.value === second, onSelect: (v) => setSecond(v.value), className: "h-8", disabled: v.disabled }))))))),
                     use12HourFormat && (React.createElement(ScrollArea, { className: "h-full flex-grow" },
-                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2" }, ampmOptions.map(function (v) { return (React.createElement(TimeItem, { key: v.value, option: v, selected: v.value === ampm, onSelect: onAmpmChange, className: "h-8", disabled: v.disabled })); })))))))));
+                        React.createElement("div", { className: "flex grow flex-col items-stretch overflow-y-auto pe-2" }, ampmOptions.map((v) => (React.createElement(TimeItem, { key: v.value, option: v, selected: v.value === ampm, onSelect: onAmpmChange, className: "h-8", disabled: v.disabled })))))))))));
 }
-var TimeItem = function (_a) {
-    var option = _a.option, selected = _a.selected, onSelect = _a.onSelect, className = _a.className, disabled = _a.disabled;
-    return (React.createElement(Button, { variant: "ghost", className: cn("flex justify-center px-1 pe-2 ps-1", className), onClick: function () { return onSelect(option); }, disabled: disabled },
+const TimeItem = ({ option, selected, onSelect, className, disabled, }) => {
+    return (React.createElement(Button, { variant: "ghost", className: cn("flex justify-center px-1 pe-2 ps-1", className), onClick: () => onSelect(option), disabled: disabled },
         React.createElement("div", { className: "w-4" }, selected && React.createElement(CheckIcon, { className: "my-auto size-4" })),
         React.createElement("span", { className: "ms-2" }, option.label)));
 };
 function buildTime(options) {
-    var use12HourFormat = options.use12HourFormat, value = options.value, formatStr = options.formatStr, hour = options.hour, minute = options.minute, second = options.second, ampm = options.ampm;
-    var date;
+    const { use12HourFormat, value, formatStr, hour, minute, second, ampm } = options;
+    let date;
     if (use12HourFormat) {
-        var dateStrRaw = format(value, formatStr);
+        const dateStrRaw = format(value, formatStr);
         // yyyy-MM-dd hh:mm:ss.SSS a zzzz
         // 2024-10-14 01:20:07.524 AM GMT+00:00
-        var dateStr = dateStrRaw.slice(0, 11) +
+        let dateStr = dateStrRaw.slice(0, 11) +
             hour.toString().padStart(2, "0") +
             dateStrRaw.slice(13);
         dateStr =