@eintrek/erp-theme 1.4.10 → 1.4.11

package/dist/index.js

@@ -258,6 +258,80 @@ function BreadcrumbSeparator({ children, className, ...props }) {
     return (require$$1.jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn$1("[&>svg]:size-3.5", className), ...props, children: children ?? require$$1.jsx(lucideReact.ChevronRight, {}) }));
 }
 
+function Select({ onValueChange, onOpenChange, open, defaultOpen, ...props }) {
+    // Tracked in a ref, not state: this only needs to be readable inside the
+    // callback below, and putting it in state would re-render on every open.
+    const isOpenRef = React__namespace.useRef(defaultOpen ?? false);
+    if (open !== undefined)
+        isOpenRef.current = open;
+    return (require$$1.jsx(SelectPrimitive__namespace.Root, { "data-slot": "select", ...props, open: open, defaultOpen: defaultOpen, onOpenChange: next => {
+            isOpenRef.current = next;
+            onOpenChange?.(next);
+        }, onValueChange: value => {
+            // Drop ONLY the empty value Radix echoes back on its own.
+            //
+            // Radix keeps a hidden native <select> so the control works inside
+            // real forms. Whenever the controlled value changes it assigns that
+            // value to the native node and dispatches a synthetic change event,
+            // which comes straight back out through onValueChange:
+            //
+            //   setValue.call(select, selectValue);
+            //   select.dispatchEvent(new Event("change", { bubbles: true }));
+            //   ...
+            //   onChange: (event) => onValueChange(event.target.value)
+            //
+            // The native <option> list is registered by SelectItem, and the items
+            // live inside SelectContent — portalled, and only mounted while the
+            // menu is open. On a closed select the option for the incoming value
+            // usually does not exist yet, the DOM refuses the assignment,
+            // `select.value` collapses to "", and that empty string reaches the
+            // consumer. In a form this lands exactly when saved data arrives: the
+            // field is set to its stored value, Radix echoes "", and the handler
+            // writes that back — enum fields then snap to their fallback and zod
+            // rejects the submit with "received ''".
+            //
+            // The open check is what keeps a real "none" option working. Radix
+            // does NOT forbid <SelectItem value="">, and picking one is a
+            // legitimate way to clear a selection. A user pick always arrives
+            // while the menu is still open — SelectItem's handleSelect calls
+            // onValueChange(value) BEFORE onOpenChange(false) — whereas the echo
+            // above fires from an effect with the menu closed. So only the closed
+            // case is suppressed.
+            if (value === "" && !isOpenRef.current)
+                return;
+            onValueChange?.(value);
+        } }));
+}
+function SelectGroup({ ...props }) {
+    return require$$1.jsx(SelectPrimitive__namespace.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return require$$1.jsx(SelectPrimitive__namespace.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+    return (require$$1.jsxs(SelectPrimitive__namespace.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn$1("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, require$$1.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: require$$1.jsx(lucideReact.ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+    return (require$$1.jsx(SelectPrimitive__namespace.Portal, { children: require$$1.jsxs(SelectPrimitive__namespace.Content, { "data-slot": "select-content", className: cn$1("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [require$$1.jsx(SelectScrollUpButton, {}), require$$1.jsx(SelectPrimitive__namespace.Viewport, { className: cn$1("p-1", position === "popper" &&
+                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), require$$1.jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (require$$1.jsx(SelectPrimitive__namespace.Label, { "data-slot": "select-label", className: cn$1("text-muted-foreground px-2 py-1.5 text-xs", className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (require$$1.jsxs(SelectPrimitive__namespace.Item, { "data-slot": "select-item", className: cn$1("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [require$$1.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: require$$1.jsx(SelectPrimitive__namespace.ItemIndicator, { children: require$$1.jsx(lucideReact.CheckIcon, { className: "size-4" }) }) }), require$$1.jsx(SelectPrimitive__namespace.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (require$$1.jsx(SelectPrimitive__namespace.Separator, { "data-slot": "select-separator", className: cn$1("bg-border pointer-events-none -mx-1 my-1 h-px", className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (require$$1.jsx(SelectPrimitive__namespace.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: require$$1.jsx(lucideReact.ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (require$$1.jsx(SelectPrimitive__namespace.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: require$$1.jsx(lucideReact.ChevronDownIcon, { className: "size-4" }) }));
+}
+
 /**
  * @module constants
  * @summary Useful constants
@@ -704,11 +778,35 @@ function getThaiMonthName(monthIndex) {
 
 /** Thai weekday abbreviations (Sunday-first, matching JS getDay()). */
 const WEEK_DAYS_TH = ["อา.", "จ.", "อ.", "พ.", "พฤ.", "ศ.", "ส."];
-function formatMonthCaption(date) {
-    return `${THAI_MONTH_NAMES[date.getMonth()]} ${toBuddhistYear(date.getFullYear())}`;
+function getInitialMonth(selected) {
+    if (selected instanceof Date && !Number.isNaN(selected.getTime())) {
+        return new Date(selected.getFullYear(), selected.getMonth(), 1);
+    }
+    if (Array.isArray(selected) && selected[0] instanceof Date) {
+        return new Date(selected[0].getFullYear(), selected[0].getMonth(), 1);
+    }
+    if (selected &&
+        typeof selected === "object" &&
+        "from" in selected &&
+        selected.from instanceof Date) {
+        return new Date(selected.from.getFullYear(), selected.from.getMonth(), 1);
+    }
+    return new Date();
 }
-function Calendar({ className, selected, onSelect, mode = "single", disabled, }) {
-    const [currentMonth, setCurrentMonth] = React__namespace.useState(new Date());
+function Calendar({ className, selected, onSelect, mode = "single", disabled, fromYear = 1900, toYear, }) {
+    const maxYear = toYear ?? new Date().getFullYear() + 10;
+    const [currentMonth, setCurrentMonth] = React__namespace.useState(() => getInitialMonth(selected));
+    // Jump the grid to the selected date when it changes (e.g. form load).
+    React__namespace.useEffect(() => {
+        const next = getInitialMonth(selected);
+        setCurrentMonth((prev) => {
+            if (prev.getFullYear() === next.getFullYear() &&
+                prev.getMonth() === next.getMonth()) {
+                return prev;
+            }
+            return next;
+        });
+    }, [selected]);
     const today = new Date();
     const year = currentMonth.getFullYear();
     const month = currentMonth.getMonth();
@@ -716,13 +814,20 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, })
     const lastDayOfMonth = new Date(year, month + 1, 0);
     const firstDayOfWeek = firstDayOfMonth.getDay();
     const daysInMonth = lastDayOfMonth.getDate();
+    const yearOptions = React__namespace.useMemo(() => {
+        const years = [];
+        const start = Math.min(fromYear, maxYear);
+        const end = Math.max(fromYear, maxYear);
+        for (let y = end; y >= start; y--) {
+            years.push(y);
+        }
+        return years;
+    }, [fromYear, maxYear]);
     const getDaysInMonth = () => {
         const days = [];
-        // Add empty cells for days before the first day of the month
         for (let i = 0; i < firstDayOfWeek; i++) {
             days.push(null);
         }
-        // Add days of the month
         for (let day = 1; day <= daysInMonth; day++) {
             days.push(new Date(year, month, day));
         }
@@ -734,7 +839,10 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, })
         if (mode === "single" && selected instanceof Date) {
             return date.toDateString() === selected.toDateString();
         }
-        if (mode === "range" && selected && typeof selected === "object" && "from" in selected) {
+        if (mode === "range" &&
+            selected &&
+            typeof selected === "object" &&
+            "from" in selected) {
             const range = selected;
             if (range.from && range.to) {
                 return date >= range.from && date <= range.to;
@@ -744,7 +852,7 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, })
             }
         }
         if (mode === "multiple" && Array.isArray(selected)) {
-            return selected.some(d => d.toDateString() === date.toDateString());
+            return selected.some((d) => d.toDateString() === date.toDateString());
         }
         return false;
     };
@@ -763,7 +871,6 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, })
             onSelect?.(date);
         }
         else if (mode === "range") {
-            // Simple range selection - click to set start, click again to set end
             if (!selected || typeof selected !== "object" || !("from" in selected)) {
                 onSelect?.({ from: date, to: undefined });
             }
@@ -787,9 +894,9 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, })
         }
         else if (mode === "multiple") {
             const currentSelection = Array.isArray(selected) ? selected : [];
-            const isAlreadySelected = currentSelection.some(d => d.toDateString() === date.toDateString());
+            const isAlreadySelected = currentSelection.some((d) => d.toDateString() === date.toDateString());
             if (isAlreadySelected) {
-                onSelect?.(currentSelection.filter(d => d.toDateString() !== date.toDateString()));
+                onSelect?.(currentSelection.filter((d) => d.toDateString() !== date.toDateString()));
             }
             else {
                 onSelect?.([...currentSelection, date]);
@@ -797,7 +904,7 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, })
         }
     };
     const navigateMonth = (direction) => {
-        setCurrentMonth(prev => {
+        setCurrentMonth((prev) => {
             const newMonth = new Date(prev);
             if (direction === "prev") {
                 newMonth.setMonth(prev.getMonth() - 1);
@@ -808,18 +915,34 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, })
             return newMonth;
         });
     };
+    const handleMonthChange = (monthStr) => {
+        const nextMonth = Number.parseInt(monthStr, 10);
+        if (Number.isNaN(nextMonth))
+            return;
+        setCurrentMonth((prev) => new Date(prev.getFullYear(), nextMonth, 1));
+    };
+    const handleYearChange = (buddhistYearStr) => {
+        const gregorian = toGregorianYear(Number.parseInt(buddhistYearStr, 10));
+        if (Number.isNaN(gregorian))
+            return;
+        setCurrentMonth((prev) => new Date(gregorian, prev.getMonth(), 1));
+    };
     const days = getDaysInMonth();
-    return (require$$1.jsxs("div", { "data-slot": "calendar", className: cn$1("bg-background group/calendar p-3 w-fit", className), children: [require$$1.jsxs("div", { className: "flex items-center justify-between mb-4", children: [require$$1.jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigateMonth("prev"), className: "h-8 w-8 p-0", children: require$$1.jsx(lucideReact.ChevronLeftIcon, { className: "h-4 w-4" }) }), require$$1.jsx("div", { className: "text-sm font-medium", children: formatMonthCaption(currentMonth) }), require$$1.jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigateMonth("next"), className: "h-8 w-8 p-0", children: require$$1.jsx(lucideReact.ChevronRightIcon, { className: "h-4 w-4" }) })] }), require$$1.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_TH.map((day) => (require$$1.jsx("div", { className: "text-muted-foreground text-xs font-normal text-center h-8 flex items-center justify-center", children: day }, day))) }), require$$1.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => {
+    const canGoPrev = year > fromYear || (year === fromYear && month > 0);
+    const canGoNext = year < maxYear || (year === maxYear && month < 11);
+    return (require$$1.jsxs("div", { "data-slot": "calendar", className: cn$1("bg-background group/calendar p-3 w-fit", className), children: [require$$1.jsxs("div", { className: "mb-4 flex items-center justify-between gap-1", children: [require$$1.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => navigateMonth("prev"), disabled: !canGoPrev, className: "h-8 w-8 shrink-0 p-0", "aria-label": "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32", children: require$$1.jsx(lucideReact.ChevronLeftIcon, { className: "h-4 w-4" }) }), require$$1.jsxs("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-1", children: [require$$1.jsxs(Select, { value: String(month), onValueChange: handleMonthChange, children: [require$$1.jsx(SelectTrigger, { size: "sm", className: "h-8 w-[7.5rem] px-2 text-xs", "aria-label": "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19", children: require$$1.jsx(SelectValue, { children: THAI_MONTH_NAMES[month] }) }), require$$1.jsx(SelectContent, { className: "z-[100] max-h-60", children: THAI_MONTH_NAMES.map((name, index) => (require$$1.jsx(SelectItem, { value: String(index), children: name }, name))) })] }), require$$1.jsxs(Select, { value: String(toBuddhistYear(year)), onValueChange: handleYearChange, children: [require$$1.jsx(SelectTrigger, { size: "sm", className: "h-8 w-[5.5rem] px-2 text-xs", "aria-label": "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E1B\u0E35", children: require$$1.jsx(SelectValue, { children: toBuddhistYear(year) }) }), require$$1.jsx(SelectContent, { className: "z-[100] max-h-60", children: yearOptions.map((y) => (require$$1.jsx(SelectItem, { value: String(toBuddhistYear(y)), children: toBuddhistYear(y) }, y))) })] })] }), require$$1.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => navigateMonth("next"), disabled: !canGoNext, className: "h-8 w-8 shrink-0 p-0", "aria-label": "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B", children: require$$1.jsx(lucideReact.ChevronRightIcon, { className: "h-4 w-4" }) })] }), require$$1.jsx("div", { className: "mb-2 grid grid-cols-7 gap-1", children: WEEK_DAYS_TH.map((day) => (require$$1.jsx("div", { className: "text-muted-foreground flex h-8 items-center justify-center text-center text-xs font-normal", children: day }, day))) }), require$$1.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => {
                     if (!date) {
                         return require$$1.jsx("div", { className: "h-8" }, index);
                     }
                     const isDateSelected = isSelected(date);
                     const isDateToday = isToday(date);
                     const isDateDisabled = isDisabled(date);
-                    return (require$$1.jsx(Button, { variant: "ghost", size: "icon", className: cn$1("h-8 w-8 p-0 text-sm font-normal", isDateSelected && "bg-primary text-primary-foreground", isDateToday && !isDateSelected && "bg-accent text-accent-foreground", isDateDisabled && "opacity-50 cursor-not-allowed", "hover:bg-accent hover:text-accent-foreground"), onClick: () => handleDateClick(date), disabled: isDateDisabled, children: date.getDate() }, date.toISOString()));
+                    return (require$$1.jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn$1("h-8 w-8 p-0 text-sm font-normal", isDateSelected && "bg-primary text-primary-foreground", isDateToday &&
+                            !isDateSelected &&
+                            "bg-accent text-accent-foreground", isDateDisabled && "cursor-not-allowed opacity-50", "hover:bg-accent hover:text-accent-foreground"), onClick: () => handleDateClick(date), disabled: isDateDisabled, children: date.getDate() }, date.toISOString()));
                 }) })] }));
 }
-function DateInput({ value, onChange, placeholder = "Select date", className, disabled = false }) {
+function DateInput({ value, onChange, placeholder = "Select date", className, disabled = false, }) {
     const handleChange = (event) => {
         const dateValue = event.target.value;
         if (dateValue) {
@@ -830,9 +953,9 @@ function DateInput({ value, onChange, placeholder = "Select date", className, di
         }
     };
     const formatDateForInput = (date) => {
-        return date.toISOString().split('T')[0];
+        return date.toISOString().split("T")[0];
     };
-    return (require$$1.jsx("input", { type: "date", value: value ? formatDateForInput(value) : "", onChange: handleChange, placeholder: placeholder, disabled: disabled, className: cn$1("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className) }));
+    return (require$$1.jsx("input", { type: "date", value: value ? formatDateForInput(value) : "", onChange: handleChange, placeholder: placeholder, disabled: disabled, className: cn$1("border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className) }));
 }
 
 const formatDistanceLocale = {
@@ -1334,10 +1457,11 @@ const defaultFormatDate = (date) => new Intl.DateTimeFormat("th-TH", {
     year: "numeric",
     timeZone: "Asia/Bangkok",
 }).format(date);
-function DatePicker({ date, onDateChange, placeholder = "เลือกวันที่", disabled = false, disabledDates, formatDate = defaultFormatDate, className, id, ariaLabel, "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }) {
+function DatePicker({ date, onDateChange, placeholder = "เลือกวันที่", disabled = false, disabledDates, formatDate = defaultFormatDate, fromYear = 1900, toYear, className, id, ariaLabel, "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }) {
     const [open, setOpen] = React__namespace.useState(false);
     const isDateDisabled = disabledDates ?? defaultDisabledDates;
-    return (require$$1.jsxs(Popover, { open: open && !disabled, onOpenChange: setOpen, children: [require$$1.jsx(PopoverTrigger, { asChild: true, children: require$$1.jsxs("div", { className: "relative w-full", children: [require$$1.jsx(Input, { readOnly: true, disabled: disabled, value: date ? formatDate(date) : "", placeholder: placeholder, className: cn$1("border-border bg-background text-foreground placeholder:text-muted-foreground w-full pr-9", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), id: id, "aria-label": date ? undefined : (ariaLabel ?? placeholder), "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby }), require$$1.jsx(lucideReact.Calendar, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2" })] }) }), require$$1.jsx(PopoverContent, { className: "w-[280px] overflow-hidden p-0", align: "start", children: require$$1.jsx(Calendar, { ...{ locale: th }, mode: "single", selected: date, onSelect: (selectedDate) => {
+    const resolvedToYear = toYear ?? new Date().getFullYear() + 10;
+    return (require$$1.jsxs(Popover, { open: open && !disabled, onOpenChange: setOpen, children: [require$$1.jsx(PopoverTrigger, { asChild: true, children: require$$1.jsxs("div", { className: "relative w-full", children: [require$$1.jsx(Input, { readOnly: true, disabled: disabled, value: date ? formatDate(date) : "", placeholder: placeholder, className: cn$1("border-border bg-background text-foreground placeholder:text-muted-foreground w-full pr-9", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), id: id, "aria-label": date ? undefined : (ariaLabel ?? placeholder), "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby }), require$$1.jsx(lucideReact.Calendar, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2" })] }) }), require$$1.jsx(PopoverContent, { className: "w-auto overflow-visible p-0", align: "start", children: require$$1.jsx(Calendar, { ...{ locale: th }, mode: "single", selected: date, onSelect: (selectedDate) => {
                         if (selectedDate instanceof Date) {
                             onDateChange?.(selectedDate);
                             setOpen(false);
@@ -1346,7 +1470,7 @@ function DatePicker({ date, onDateChange, placeholder = "เลือกวั
                             onDateChange?.(undefined);
                             setOpen(false);
                         }
-                    }, disabled: isDateDisabled, initialFocus: true }) })] }));
+                    }, disabled: isDateDisabled, fromYear: fromYear, toYear: resolvedToYear, initialFocus: true }) })] }));
 }
 
 const labelVariants = classVarianceAuthority.cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
@@ -16429,80 +16553,6 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
             "h-2.5 flex-col border-t border-t-transparent", className), ...props, children: require$$1.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
 }
 
-function Select({ onValueChange, onOpenChange, open, defaultOpen, ...props }) {
-    // Tracked in a ref, not state: this only needs to be readable inside the
-    // callback below, and putting it in state would re-render on every open.
-    const isOpenRef = React__namespace.useRef(defaultOpen ?? false);
-    if (open !== undefined)
-        isOpenRef.current = open;
-    return (require$$1.jsx(SelectPrimitive__namespace.Root, { "data-slot": "select", ...props, open: open, defaultOpen: defaultOpen, onOpenChange: next => {
-            isOpenRef.current = next;
-            onOpenChange?.(next);
-        }, onValueChange: value => {
-            // Drop ONLY the empty value Radix echoes back on its own.
-            //
-            // Radix keeps a hidden native <select> so the control works inside
-            // real forms. Whenever the controlled value changes it assigns that
-            // value to the native node and dispatches a synthetic change event,
-            // which comes straight back out through onValueChange:
-            //
-            //   setValue.call(select, selectValue);
-            //   select.dispatchEvent(new Event("change", { bubbles: true }));
-            //   ...
-            //   onChange: (event) => onValueChange(event.target.value)
-            //
-            // The native <option> list is registered by SelectItem, and the items
-            // live inside SelectContent — portalled, and only mounted while the
-            // menu is open. On a closed select the option for the incoming value
-            // usually does not exist yet, the DOM refuses the assignment,
-            // `select.value` collapses to "", and that empty string reaches the
-            // consumer. In a form this lands exactly when saved data arrives: the
-            // field is set to its stored value, Radix echoes "", and the handler
-            // writes that back — enum fields then snap to their fallback and zod
-            // rejects the submit with "received ''".
-            //
-            // The open check is what keeps a real "none" option working. Radix
-            // does NOT forbid <SelectItem value="">, and picking one is a
-            // legitimate way to clear a selection. A user pick always arrives
-            // while the menu is still open — SelectItem's handleSelect calls
-            // onValueChange(value) BEFORE onOpenChange(false) — whereas the echo
-            // above fires from an effect with the menu closed. So only the closed
-            // case is suppressed.
-            if (value === "" && !isOpenRef.current)
-                return;
-            onValueChange?.(value);
-        } }));
-}
-function SelectGroup({ ...props }) {
-    return require$$1.jsx(SelectPrimitive__namespace.Group, { "data-slot": "select-group", ...props });
-}
-function SelectValue({ ...props }) {
-    return require$$1.jsx(SelectPrimitive__namespace.Value, { "data-slot": "select-value", ...props });
-}
-function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (require$$1.jsxs(SelectPrimitive__namespace.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn$1("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, require$$1.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: require$$1.jsx(lucideReact.ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
-}
-function SelectContent({ className, children, position = "popper", ...props }) {
-    return (require$$1.jsx(SelectPrimitive__namespace.Portal, { children: require$$1.jsxs(SelectPrimitive__namespace.Content, { "data-slot": "select-content", className: cn$1("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [require$$1.jsx(SelectScrollUpButton, {}), require$$1.jsx(SelectPrimitive__namespace.Viewport, { className: cn$1("p-1", position === "popper" &&
-                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), require$$1.jsx(SelectScrollDownButton, {})] }) }));
-}
-function SelectLabel({ className, ...props }) {
-    return (require$$1.jsx(SelectPrimitive__namespace.Label, { "data-slot": "select-label", className: cn$1("text-muted-foreground px-2 py-1.5 text-xs", className), ...props }));
-}
-function SelectItem({ className, children, ...props }) {
-    return (require$$1.jsxs(SelectPrimitive__namespace.Item, { "data-slot": "select-item", className: cn$1("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [require$$1.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: require$$1.jsx(SelectPrimitive__namespace.ItemIndicator, { children: require$$1.jsx(lucideReact.CheckIcon, { className: "size-4" }) }) }), require$$1.jsx(SelectPrimitive__namespace.ItemText, { children: children })] }));
-}
-function SelectSeparator({ className, ...props }) {
-    return (require$$1.jsx(SelectPrimitive__namespace.Separator, { "data-slot": "select-separator", className: cn$1("bg-border pointer-events-none -mx-1 my-1 h-px", className), ...props }));
-}
-function SelectScrollUpButton({ className, ...props }) {
-    return (require$$1.jsx(SelectPrimitive__namespace.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: require$$1.jsx(lucideReact.ChevronUpIcon, { className: "size-4" }) }));
-}
-function SelectScrollDownButton({ className, ...props }) {
-    return (require$$1.jsx(SelectPrimitive__namespace.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: require$$1.jsx(lucideReact.ChevronDownIcon, { className: "size-4" }) }));
-}
-
 function SelectField({ id, label, helperText, error, required, placeholder, value, defaultValue, onValueChange, disabled, options, children, containerClassName, labelClassName, triggerClassName, messageClassName, size, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, }) {
     const reactId = React__namespace.useId();
     const inputId = id ?? reactId;