@eintrek/erp-theme 1.4.10 → 1.4.12

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1, { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDownIcon, ChevronRight, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, ArrowRight, ArrowLeft, CheckIcon, XIcon, SearchIcon, CircleIcon, ChevronsUpDown, Check, Paperclip, X as X$1, AlertCircle, MoreHorizontalIcon, GripVerticalIcon, ChevronUpIcon, PanelLeftIcon, ChevronLeft, MoreHorizontal, ChevronDown, ChevronUp, EyeOff, Filter, Settings2, ListChecks, ArrowDownUp, Trash2, GripVertical, ListFilter, CalendarIcon, Copy, Code2, FileSpreadsheetIcon, CommandIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronRight, CheckIcon, ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, ArrowRight, ArrowLeft, XIcon, SearchIcon, CircleIcon, ChevronsUpDown, Check, Paperclip, X as X$1, AlertCircle, MoreHorizontalIcon, GripVerticalIcon, PanelLeftIcon, ChevronLeft, MoreHorizontal, ChevronDown, ChevronUp, EyeOff, Filter, Settings2, ListChecks, ArrowDownUp, Trash2, GripVertical, ListFilter, CalendarIcon, Copy, Code2, FileSpreadsheetIcon, CommandIcon } from 'lucide-react';
 import '@radix-ui/react-accessible-icon';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -213,6 +213,80 @@ function BreadcrumbSeparator({ children, className, ...props }) {
     return (jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn$1("[&>svg]:size-3.5", className), ...props, children: children ?? jsx(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.useRef(defaultOpen ?? false);
+    if (open !== undefined)
+        isOpenRef.current = open;
+    return (jsx(SelectPrimitive.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 jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+    return (jsxs(SelectPrimitive.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, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+    return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.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: [jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.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 }), jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (jsx(SelectPrimitive.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 (jsxs(SelectPrimitive.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: [jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(CheckIcon, { className: "size-4" }) }) }), jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (jsx(SelectPrimitive.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 (jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: jsx(ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: jsx(ChevronDownIcon, { className: "size-4" }) }));
+}
+
 /**
  * @module constants
  * @summary Useful constants
@@ -659,11 +733,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.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.useState(() => getInitialMonth(selected));
+    // Jump the grid to the selected date when it changes (e.g. form load).
+    React.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();
@@ -671,13 +769,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.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));
         }
@@ -689,7 +794,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;
@@ -699,7 +807,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;
     };
@@ -718,7 +826,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 });
             }
@@ -742,9 +849,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]);
@@ -752,7 +859,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);
@@ -763,18 +870,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 (jsxs("div", { "data-slot": "calendar", className: cn$1("bg-background group/calendar p-3 w-fit", className), children: [jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigateMonth("prev"), className: "h-8 w-8 p-0", children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), jsx("div", { className: "text-sm font-medium", children: formatMonthCaption(currentMonth) }), jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigateMonth("next"), className: "h-8 w-8 p-0", children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) })] }), jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_TH.map((day) => (jsx("div", { className: "text-muted-foreground text-xs font-normal text-center h-8 flex items-center justify-center", children: day }, day))) }), 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 (jsxs("div", { "data-slot": "calendar", className: cn$1("bg-background group/calendar p-3 w-fit", className), children: [jsxs("div", { className: "mb-4 flex items-center justify-between gap-1", children: [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: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), jsxs("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-1", children: [jsxs(Select, { value: String(month), onValueChange: handleMonthChange, children: [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: jsx(SelectValue, { children: THAI_MONTH_NAMES[month] }) }), jsx(SelectContent, { className: "z-[100] max-h-60", children: THAI_MONTH_NAMES.map((name, index) => (jsx(SelectItem, { value: String(index), children: name }, name))) })] }), jsxs(Select, { value: String(toBuddhistYear(year)), onValueChange: handleYearChange, children: [jsx(SelectTrigger, { size: "sm", className: "h-8 w-[5.5rem] px-2 text-xs", "aria-label": "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E1B\u0E35", children: jsx(SelectValue, { children: toBuddhistYear(year) }) }), jsx(SelectContent, { className: "z-[100] max-h-60", children: yearOptions.map((y) => (jsx(SelectItem, { value: String(toBuddhistYear(y)), children: toBuddhistYear(y) }, y))) })] })] }), 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: jsx(ChevronRightIcon, { className: "h-4 w-4" }) })] }), jsx("div", { className: "mb-2 grid grid-cols-7 gap-1", children: WEEK_DAYS_TH.map((day) => (jsx("div", { className: "text-muted-foreground flex h-8 items-center justify-center text-center text-xs font-normal", children: day }, day))) }), jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => {
                     if (!date) {
                         return jsx("div", { className: "h-8" }, index);
                     }
                     const isDateSelected = isSelected(date);
                     const isDateToday = isToday(date);
                     const isDateDisabled = isDisabled(date);
-                    return (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 (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) {
@@ -785,9 +908,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 (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 (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 = {
@@ -1282,17 +1405,29 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
     return (jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className), ...props }) }));
 }
 
-const defaultDisabledDates = (date) => date > new Date() || date < new Date("1900-01-01");
+/**
+ * Only the lower bound is universal. Rejecting future dates by default made
+ * every forward-looking field — due dates, expiry, delivery, installment
+ * schedules — silently unusable unless the caller remembered to override it,
+ * and several forms already carried `d => d < new Date("1900-01-01")` purely
+ * to undo it. A field that must stay in the past says so with its own
+ * `disabledDates`; the picker no longer guesses.
+ */
+const defaultDisabledDates = (date) => date < new Date("1900-01-01");
+/** Ready-made matcher for fields that genuinely cannot be in the future
+ *  (date of birth, an issue date on a document already in hand). */
+const disallowFutureDates = (date) => date > new Date() || date < new Date("1900-01-01");
 const defaultFormatDate = (date) => new Intl.DateTimeFormat("th-TH", {
     day: "numeric",
     month: "long",
     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.useState(false);
     const isDateDisabled = disabledDates ?? defaultDisabledDates;
-    return (jsxs(Popover, { open: open && !disabled, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs("div", { className: "relative w-full", children: [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 }), jsx(Calendar$1, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2" })] }) }), jsx(PopoverContent, { className: "w-[280px] overflow-hidden p-0", align: "start", children: jsx(Calendar, { ...{ locale: th }, mode: "single", selected: date, onSelect: (selectedDate) => {
+    const resolvedToYear = toYear ?? new Date().getFullYear() + 10;
+    return (jsxs(Popover, { open: open && !disabled, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs("div", { className: "relative w-full", children: [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 }), jsx(Calendar$1, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2" })] }) }), jsx(PopoverContent, { className: "w-auto overflow-visible p-0", align: "start", children: jsx(Calendar, { ...{ locale: th }, mode: "single", selected: date, onSelect: (selectedDate) => {
                         if (selectedDate instanceof Date) {
                             onDateChange?.(selectedDate);
                             setOpen(false);
@@ -1301,7 +1436,7 @@ function DatePicker({ date, onDateChange, placeholder = "เลือกวั
                             onDateChange?.(undefined);
                             setOpen(false);
                         }
-                    }, disabled: isDateDisabled, initialFocus: true }) })] }));
+                    }, disabled: isDateDisabled, fromYear: fromYear, toYear: resolvedToYear, initialFocus: true }) })] }));
 }
 
 const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
@@ -16384,80 +16519,6 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
             "h-2.5 flex-col border-t border-t-transparent", className), ...props, children: jsx(ScrollAreaPrimitive.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.useRef(defaultOpen ?? false);
-    if (open !== undefined)
-        isOpenRef.current = open;
-    return (jsx(SelectPrimitive.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 jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
-}
-function SelectValue({ ...props }) {
-    return jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
-}
-function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (jsxs(SelectPrimitive.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, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
-}
-function SelectContent({ className, children, position = "popper", ...props }) {
-    return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.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: [jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.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 }), jsx(SelectScrollDownButton, {})] }) }));
-}
-function SelectLabel({ className, ...props }) {
-    return (jsx(SelectPrimitive.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 (jsxs(SelectPrimitive.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: [jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(CheckIcon, { className: "size-4" }) }) }), jsx(SelectPrimitive.ItemText, { children: children })] }));
-}
-function SelectSeparator({ className, ...props }) {
-    return (jsx(SelectPrimitive.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 (jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: jsx(ChevronUpIcon, { className: "size-4" }) }));
-}
-function SelectScrollDownButton({ className, ...props }) {
-    return (jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn$1("flex cursor-default items-center justify-center py-1", className), ...props, children: jsx(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.useId();
     const inputId = id ?? reactId;
@@ -34802,5 +34863,5 @@ const flagConfig = {
     ],
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandBlock, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CustomSelectField2, DataTable, DataTableCell, DataTableColumnHeader, DataTableDateFilter, DataTableFacetedFilter, DataTableFilterDropdown, DataTableFilterList, DataTablePagination, DataTableRangeFilter, DataTableSkeleton, DataTableSliderFilter, DataTableSortList, DataTableToolbar, DataTableViewOptions, DateInput, DatePicker, DatePickerField, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Faceted, FacetedBadgeList, FacetedContent, FacetedEmpty, FacetedGroup, FacetedInput, FacetedItem, FacetedList, FacetedSeparator, FacetedTrigger, FileUploader, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormSkeleton, FormattedNumberInput, Header, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputField, InputOTP, InputOTPGroup, InputOTPSlot, Label, LoadingScreen, MASK_PRESETS, MaskedTextInput, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, PageHeader, Pagination$1 as Pagination, PaginationContent$1 as PaginationContent, PaginationEllipsis$1 as PaginationEllipsis, PaginationItem$1 as PaginationItem, PaginationLink$1 as PaginationLink, PaginationNext$1 as PaginationNext, PaginationPrevious$1 as PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RegistryItemRow, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay, Switch, THAI_MONTH_NAMES, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaField, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, ValidationErrors, badgeVariants, buttonVariants, cn$1 as cn, convertFileToUploadedFile, convertFilesToUploadedFiles, dataTableConfig, databasePrefix, flagConfig, formatCurrency, formatDate, formatDateThai, formatDateThaiShort, formatFileSize, formatMasked as formatMaskedValue, formatNumber, formatThaiMonth, formatThaiMonthShort, generateFileId, generateId, getBaseUrl, getCommonPinningStyles, getDefaultFilterOperator, getFilterOperators, getFiltersStateParser, getMonthDateRange, getSortingStateParser, getThaiMonthName, getValidFilters, isImageFile, navigationMenuTriggerStyle, parseDigits as parseMaskedDigits, siteConfig, thaiBahtText, toBuddhistIso, toBuddhistYear, toGregorianYear, toggleVariants, unknownError, useCallbackRef, useDataTable, useDebounce, useDebouncedCallback, useFormField, useIsMobile, useMediaQuery, validateFileSize, validateFileType };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandBlock, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CustomSelectField2, DataTable, DataTableCell, DataTableColumnHeader, DataTableDateFilter, DataTableFacetedFilter, DataTableFilterDropdown, DataTableFilterList, DataTablePagination, DataTableRangeFilter, DataTableSkeleton, DataTableSliderFilter, DataTableSortList, DataTableToolbar, DataTableViewOptions, DateInput, DatePicker, DatePickerField, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Faceted, FacetedBadgeList, FacetedContent, FacetedEmpty, FacetedGroup, FacetedInput, FacetedItem, FacetedList, FacetedSeparator, FacetedTrigger, FileUploader, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormSkeleton, FormattedNumberInput, Header, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputField, InputOTP, InputOTPGroup, InputOTPSlot, Label, LoadingScreen, MASK_PRESETS, MaskedTextInput, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, PageHeader, Pagination$1 as Pagination, PaginationContent$1 as PaginationContent, PaginationEllipsis$1 as PaginationEllipsis, PaginationItem$1 as PaginationItem, PaginationLink$1 as PaginationLink, PaginationNext$1 as PaginationNext, PaginationPrevious$1 as PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RegistryItemRow, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay, Switch, THAI_MONTH_NAMES, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaField, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, ValidationErrors, badgeVariants, buttonVariants, cn$1 as cn, convertFileToUploadedFile, convertFilesToUploadedFiles, dataTableConfig, databasePrefix, disallowFutureDates, flagConfig, formatCurrency, formatDate, formatDateThai, formatDateThaiShort, formatFileSize, formatMasked as formatMaskedValue, formatNumber, formatThaiMonth, formatThaiMonthShort, generateFileId, generateId, getBaseUrl, getCommonPinningStyles, getDefaultFilterOperator, getFilterOperators, getFiltersStateParser, getMonthDateRange, getSortingStateParser, getThaiMonthName, getValidFilters, isImageFile, navigationMenuTriggerStyle, parseDigits as parseMaskedDigits, siteConfig, thaiBahtText, toBuddhistIso, toBuddhistYear, toGregorianYear, toggleVariants, unknownError, useCallbackRef, useDataTable, useDebounce, useDebouncedCallback, useFormField, useIsMobile, useMediaQuery, validateFileSize, validateFileType };
 //# sourceMappingURL=index.esm.js.map