bianic-ui 2.7.0 → 2.8.0-alpha.0

package/dist/esm/index.js

@@ -117,6 +117,8 @@ function TbCircleCheckFilled (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 3a9 9 0 1 0 9 9"},"child":[]}]})(props);
 }function TbPlaystationX (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 21a9 9 0 0 0 9 -9a9 9 0 0 0 -9 -9a9 9 0 0 0 -9 9a9 9 0 0 0 9 9z"},"child":[]},{"tag":"path","attr":{"d":"M8.5 8.5l7 7"},"child":[]},{"tag":"path","attr":{"d":"M8.5 15.5l7 -7"},"child":[]}]})(props);
+}function TbRefresh (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"},"child":[]},{"tag":"path","attr":{"d":"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"},"child":[]}]})(props);
 }function TbX (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M18 6l-12 12"},"child":[]},{"tag":"path","attr":{"d":"M6 6l12 12"},"child":[]}]})(props);
 }function TbXboxX (props) {
@@ -372,6 +374,16 @@ function __rest(s, e) {
     return t;
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -3106,7 +3118,7 @@ var checkIsValidDate = function (dateString) {
         date.getUTCMonth() === month - 1 &&
         date.getUTCDate() === day);
 };
-var dateToInputString$1 = function (dateObj) {
+var dateToInputString = function (dateObj) {
     if (!(dateObj instanceof Date) || isNaN(dateObj.getTime()))
         return '';
     var year = dateObj.getFullYear();
@@ -3114,9 +3126,31 @@ var dateToInputString$1 = function (dateObj) {
     var day = String(dateObj.getDate()).padStart(2, '0');
     return "".concat(year, "-").concat(month, "-").concat(day);
 };
+/**
+ * Check if two months are adjacent (consecutive)
+ * @param leftMonth - Month number (0-11) of left panel
+ * @param leftYear - Year of left panel
+ * @param rightMonth - Month number (0-11) of right panel
+ * @param rightYear - Year of right panel
+ * @returns true if months are adjacent
+ */
+var areMonthsAdjacent = function (leftMonth, leftYear, rightMonth, rightYear) {
+    // Check if right is exactly one month after left
+    if (leftMonth === 11) {
+        // December + 1 month = January of next year
+        return rightMonth === 0 && rightYear === leftYear + 1;
+    }
+    else {
+        // Any other month + 1 month
+        return rightMonth === leftMonth + 1 && rightYear === leftYear;
+    }
+};
 
 var DateDisplay = function (_a) {
     var displayDays = _a.displayDays, viewMonthValue = _a.viewMonthValue, selectedDate = _a.selectedDate, onDateSelect = _a.onDateSelect, minDateValue = _a.minDateValue, maxDateValue = _a.maxDateValue;
+    var isRangeMode = Array.isArray(selectedDate);
+    var startRangeDate = isRangeMode && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[0]) ? new Date(selectedDate[0]) : null;
+    var endRangeDate = isRangeMode && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1]) ? new Date(selectedDate[1]) : null;
     return (React.createElement("div", null,
         React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-header grid grid-cols-7 gap-[3px] pb-1.5" }, DAYS_MAP.map(function (day) { return (React.createElement("div", { key: day, className: "bianic-datepicker-calendar-day flex h-[18px] w-[31px] items-center justify-center" },
             React.createElement(Text, { variant: "small-text", extended: "text-bia-coolgrey" }, day.slice(0, 3)))); })),
@@ -3124,16 +3158,43 @@ var DateDisplay = function (_a) {
             var isOutOfRange = !!((minDateValue && date < minDateValue) ||
                 (maxDateValue && date > maxDateValue));
             var isOutOfMonth = date.getMonth() !== viewMonthValue;
+            var isStartRange = isRangeMode && checkDateEquals(date, startRangeDate);
+            var isEndRange = isRangeMode && checkDateEquals(date, endRangeDate);
             var isSelected = selectedDate
-                ? checkDateEquals(date, new Date(selectedDate))
+                ? isRangeMode
+                    ? isStartRange || isEndRange
+                    : checkDateEquals(date, new Date(selectedDate))
+                : false;
+            var isBetween = isRangeMode && startRangeDate && endRangeDate
+                ? (function () {
+                    var start = startRangeDate;
+                    var end = endRangeDate;
+                    if (start > end) {
+                        var t = start;
+                        start = end;
+                        end = t;
+                    }
+                    return date > start && date < end;
+                })()
                 : false;
             var isToday = checkDateEquals(date, new Date(TODAY_VALUE));
-            return (React.createElement("button", { key: date.toString(), className: "bianic-datepicker-calendar-day flex h-[31px] w-[31px] items-center justify-center rounded-full ".concat(isSelected
+            var customClassname = isRangeMode && (isBetween || isStartRange || isEndRange)
+                ? isBetween
+                    ? 'w-full'
+                    : isStartRange
+                        ? 'w-full rounded-l-full'
+                        : 'rounded-r-full'
+                : 'w-[31px] rounded-full';
+            return (React.createElement("button", { key: date.toString(), className: "bianic-datepicker-calendar-day flex h-[31px] items-center justify-center ".concat(customClassname, " ").concat(isSelected
                     ? 'border border-bia-blue-dark-10 bg-bia-blue-dark-10'
-                    : isToday && !isOutOfRange
-                        ? 'border border-bia-blue-light-50 bg-bia-blue-pastel'
-                        : 'hover:bg-bia-blue-pastel'), disabled: isOutOfRange, onClick: function () { return onDateSelect(date); } },
-                React.createElement(Text, { variant: "small-text", extended: isSelected
+                    : isBetween
+                        ? isOutOfMonth
+                            ? 'border border-bia-blue-light-50 bg-bia-blue-light-50'
+                            : 'border border-bia-blue-light-10 bg-bia-blue-light-10'
+                        : isToday && !isOutOfRange
+                            ? 'border border-bia-blue-light-50 bg-bia-blue-pastel'
+                            : 'hover:bg-bia-blue-pastel'), disabled: isOutOfRange, onClick: function () { return onDateSelect(date); } },
+                React.createElement(Text, { variant: "small-text", extended: isSelected || isBetween
                         ? 'text-bia-white'
                         : isOutOfRange
                             ? 'text-bia-coolgrey-light-50'
@@ -3144,7 +3205,19 @@ var DateDisplay = function (_a) {
 };
 
 var MonthDisplay = function (_a) {
-    var viewYearValue = _a.viewYearValue, selectedDate = _a.selectedDate, viewMonthValue = _a.viewMonthValue, minDateValue = _a.minDateValue, maxDateValue = _a.maxDateValue, onMonthSelect = _a.onMonthSelect;
+    var viewYearValue = _a.viewYearValue, selectedDate = _a.selectedDate; _a.viewMonthValue; var minDateValue = _a.minDateValue, maxDateValue = _a.maxDateValue, onMonthSelect = _a.onMonthSelect;
+    var selectedDates = Array.isArray(selectedDate)
+        ? selectedDate
+        : selectedDate
+            ? [selectedDate]
+            : [];
+    var isMonthAlreadySelected = function (monthIndex) {
+        return selectedDates.some(function (date) {
+            var dateYear = parseInt(date.slice(0, 4));
+            var dateMonth = parseInt(date.slice(5, 7)) - 1;
+            return dateYear === viewYearValue && dateMonth === monthIndex;
+        });
+    };
     return (React.createElement("div", { className: "bianic-datepicker-calendar-month-grid grid grid-cols-3 gap-y-1.5" }, MONTH_MAP.map(function (month, index) {
         var isOutOfRange = !!((minDateValue &&
             minDateValue.getFullYear() <= viewYearValue &&
@@ -3158,16 +3231,25 @@ var MonthDisplay = function (_a) {
                     (maxDateValue.getFullYear() === viewYearValue
                         ? maxDateValue.getMonth()
                         : 11)));
+        var isAlreadySelected = isMonthAlreadySelected(index);
         var isSelected = selectedDate &&
-            viewYearValue === parseInt(selectedDate.slice(0, 4)) &&
-            index === viewMonthValue;
+            (Array.isArray(selectedDate) ? selectedDate[0] : selectedDate) &&
+            viewYearValue ===
+                parseInt((Array.isArray(selectedDate)
+                    ? selectedDate[0]
+                    : selectedDate).slice(0, 4)) &&
+            index ===
+                parseInt((Array.isArray(selectedDate)
+                    ? selectedDate[0]
+                    : selectedDate).slice(5, 7)) -
+                    1;
         return (React.createElement("button", { key: month, onClick: function (e) {
                 e.stopPropagation();
                 onMonthSelect(index);
-            }, disabled: isOutOfRange, className: "bianic-datepicker-calendar-month mx-[15px] flex h-[31px] items-center justify-center rounded-full ".concat(isSelected
+            }, disabled: isOutOfRange, className: "bianic-datepicker-calendar-month mx-[15px] flex h-[31px] items-center justify-center rounded-full ".concat(isSelected || isAlreadySelected
                 ? 'border border-bia-blue-dark-10 bg-bia-blue-dark-10'
                 : 'enabled:hover:bg-bia-blue-pastel') },
-            React.createElement(Text, { variant: "small-text", extended: isSelected
+            React.createElement(Text, { variant: "small-text", extended: isSelected || isAlreadySelected
                     ? 'text-bia-white'
                     : isOutOfRange
                         ? 'text-bia-coolgrey-light-50'
@@ -3198,6 +3280,38 @@ var YearDisplay = function (_a) {
     })));
 };
 
+var PickerHeader = function (_a) {
+    var pickerMode = _a.pickerMode, viewMonthValue = _a.viewMonthValue, viewYearValue = _a.viewYearValue, yearDisplayRange = _a.yearDisplayRange, isPrevDisabled = _a.isPrevDisabled, isNextDisabled = _a.isNextDisabled, handlePrevMonth = _a.handlePrevMonth, handlePrevYear = _a.handlePrevYear, handlePrevDecade = _a.handlePrevDecade, handleNextMonth = _a.handleNextMonth, handleNextYear = _a.handleNextYear, handleNextDecade = _a.handleNextDecade, handlePickerMode = _a.handlePickerMode;
+    return (React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
+        React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
+                ? handlePrevMonth
+                : pickerMode === 'month'
+                    ? handlePrevYear
+                    : handlePrevDecade },
+            React.createElement(TbChevronLeft, { size: 18 })),
+        React.createElement("div", { className: "bianic-datepicker-calendar-current-month flex items-center justify-center gap-1" },
+            React.createElement("button", { className: pickerMode === 'date' ? '' : 'hidden', onClick: function (e) {
+                    e.stopPropagation();
+                    handlePickerMode('month');
+                } },
+                React.createElement(Text, { variant: "normal-text-semibold" },
+                    MONTH_MAP[viewMonthValue],
+                    " ")),
+            React.createElement("button", { className: pickerMode === 'date' || pickerMode === 'month' ? '' : 'hidden', onClick: function (e) {
+                    e.stopPropagation();
+                    handlePickerMode('year');
+                } },
+                React.createElement(Text, { variant: "normal-text" }, viewYearValue)),
+            React.createElement("button", { className: pickerMode === 'year' ? '' : 'hidden' },
+                React.createElement(Text, { variant: "normal-text" }, "".concat(yearDisplayRange[1], " - ").concat(yearDisplayRange[10])))),
+        React.createElement("button", { className: "bianic-datepicker-calendar-next-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isNextDisabled(), onClick: pickerMode === 'date'
+                ? handleNextMonth
+                : pickerMode === 'month'
+                    ? handleNextYear
+                    : handleNextDecade },
+            React.createElement(TbChevronRight, { size: 18 }))));
+};
+
 var useCalendarLogic = function (selectedDate, minDate, maxDate) {
     var _a = useState('date'), pickerMode = _a[0], setPickerMode = _a[1];
     var _b = useState('date'), prevMode = _b[0], setPrevMode = _b[1];
@@ -3238,12 +3352,16 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
         setViewDecadeValue(function (prev) { return prev + 10; });
     };
     useEffect(function () {
-        var monthStartDay = new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01")).getDay() === 0
+        var calculatedDisplayDays = getDisplayDays(viewMonthValue, viewYearValue);
+        setDisplayDays(calculatedDisplayDays);
+    }, [viewMonthValue, viewYearValue, selectedDate]);
+    var getDisplayDays = function (month, year) {
+        var monthStartDay = new Date("".concat(year, "-").concat(month + 1, "-01")).getDay() === 0
             ? 6
-            : new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01")).getDay() - 1;
-        var monthTotalDate = new Date(viewYearValue, viewMonthValue + 1, 0).getDate();
+            : new Date("".concat(year, "-").concat(month + 1, "-01")).getDay() - 1;
+        var monthTotalDate = new Date(year, month + 1, 0).getDate();
         var monthCalenderView = monthTotalDate + monthStartDay > 35 ? 42 : 35;
-        var viewFirstDate = new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01"));
+        var viewFirstDate = new Date("".concat(year, "-").concat(month + 1, "-01"));
         viewFirstDate.setDate(viewFirstDate.getDate() - monthStartDay);
         var viewLastDate = new Date(viewFirstDate);
         viewLastDate.setDate(viewLastDate.getDate() + monthCalenderView - 1);
@@ -3251,8 +3369,8 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
         for (var d = new Date(viewFirstDate); d <= viewLastDate; d.setDate(d.getDate() + 1)) {
             tempDisplayDays.push(new Date(d));
         }
-        setDisplayDays(tempDisplayDays);
-    }, [viewMonthValue, viewYearValue, selectedDate]);
+        return tempDisplayDays;
+    };
     var handleSetSelectedDate = function (date, onDateChange) {
         if (date.getMonth() !== viewMonthValue) {
             // if the date is not in the current view month, update the view month and year
@@ -3260,7 +3378,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
             setViewYearValue(date.getFullYear());
         }
         if (onDateChange) {
-            onDateChange(dateToInputString$1(date));
+            onDateChange(dateToInputString(date));
         }
     };
     var handlePickerMode = function (mode) {
@@ -3334,13 +3452,213 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
         yearDisplayRange: yearDisplayRange,
         isPrevDisabled: isPrevDisabled,
         isNextDisabled: isNextDisabled,
+        getDisplayDays: getDisplayDays,
     };
 };
 
+var PickerContent = function (_a) {
+    var selectedDate = _a.selectedDate, onDateSelect = _a.onDateSelect, initialViewMonth = _a.initialViewMonth, initialViewYear = _a.initialViewYear, minDate = _a.minDate, maxDate = _a.maxDate, onPrevMonth = _a.onPrevMonth, onNextMonth = _a.onNextMonth, onMonthSelect = _a.onMonthSelect;
+    var _b = useCalendarLogic(
+    // use first selectedDate if array
+    Array.isArray(selectedDate)
+        ? selectedDate[0]
+        : selectedDate, minDate, maxDate), pickerMode = _b.pickerMode, viewMonthValue = _b.viewMonthValue, viewYearValue = _b.viewYearValue, yearDisplayRange = _b.yearDisplayRange, isPrevDisabled = _b.isPrevDisabled, isNextDisabled = _b.isNextDisabled, internalHandlePrevMonth = _b.handlePrevMonth, handlePrevYear = _b.handlePrevYear, handlePrevDecade = _b.handlePrevDecade, internalHandleNextMonth = _b.handleNextMonth, handleNextYear = _b.handleNextYear, handleNextDecade = _b.handleNextDecade, handlePickerMode = _b.handlePickerMode, getDisplayDays = _b.getDisplayDays, setViewMonthValue = _b.setViewMonthValue, setViewYearValue = _b.setViewYearValue, maxDateValue = _b.maxDateValue, minDateValue = _b.minDateValue;
+    useEffect(function () {
+        if (typeof initialViewMonth === 'number') {
+            setViewMonthValue(initialViewMonth);
+        }
+        if (typeof initialViewYear === 'number') {
+            setViewYearValue(initialViewYear);
+        }
+    }, [initialViewMonth, initialViewYear]);
+    // Use custom handlers for range mode, fall back to internal for single mode
+    var handlePrevMonth = onPrevMonth || internalHandlePrevMonth;
+    var handleNextMonth = onNextMonth || internalHandleNextMonth;
+    var days = getDisplayDays(viewMonthValue, viewYearValue);
+    return (React.createElement("div", { className: "picker-body flex w-[250px] flex-col gap-[15px]" },
+        React.createElement(PickerHeader, { pickerMode: pickerMode, viewMonthValue: viewMonthValue, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange, isPrevDisabled: isPrevDisabled, isNextDisabled: isNextDisabled, handlePrevMonth: handlePrevMonth, handlePrevYear: handlePrevYear, handlePrevDecade: handlePrevDecade, handleNextMonth: handleNextMonth, handleNextYear: handleNextYear, handleNextDecade: handleNextDecade, handlePickerMode: handlePickerMode }),
+        pickerMode === 'date' && (React.createElement(DateDisplay, { displayDays: days, maxDateValue: maxDateValue, minDateValue: minDateValue, onDateSelect: onDateSelect, selectedDate: selectedDate, viewMonthValue: viewMonthValue })),
+        pickerMode === 'month' && (React.createElement(MonthDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onMonthSelect: function (m) {
+                if (onMonthSelect)
+                    onMonthSelect(m);
+                else
+                    setViewMonthValue(m);
+                handlePickerMode('date');
+            }, selectedDate: selectedDate, viewMonthValue: viewMonthValue, viewYearValue: viewYearValue })),
+        pickerMode === 'year' && (React.createElement(YearDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onYearSelect: function (y) {
+                setViewYearValue(y);
+                handlePickerMode('month');
+            }, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange }))));
+};
+
+var SinglePicker = function (_a) {
+    var selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, minDate = _a.minDate, maxDate = _a.maxDate;
+    var handleDateSelect = function (date) {
+        onDateChange(dateToInputString(date));
+    };
+    return (React.createElement("div", { className: "single-picker picker-body" },
+        React.createElement(PickerContent, { selectedDate: selectedDate !== null && selectedDate !== void 0 ? selectedDate : null, onDateSelect: handleDateSelect, minDate: minDate, maxDate: maxDate })));
+};
+
+var RangePicker = function (_a) {
+    var 
+    // pickerMode,
+    selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, onClose = _a.onClose, minDate = _a.minDate, maxDate = _a.maxDate;
+    // compute initial view month/year for left and right panels from current selection
+    var leftInitDate = selectedDate && selectedDate[0] ? new Date(selectedDate[0]) : new Date();
+    var leftInitMonth = leftInitDate.getMonth();
+    var leftInitYear = leftInitDate.getFullYear();
+    var rightInitMonth = leftInitMonth === 11 ? 0 : leftInitMonth + 1;
+    var rightInitYear = leftInitMonth === 11 ? leftInitYear + 1 : leftInitYear;
+    // State to track left and right panel month/year
+    var _b = useState(leftInitMonth), leftMonth = _b[0], setLeftMonth = _b[1];
+    var _c = useState(leftInitYear), leftYear = _c[0], setLeftYear = _c[1];
+    var _d = useState(rightInitMonth), rightMonth = _d[0], setRightMonth = _d[1];
+    var _e = useState(rightInitYear), rightYear = _e[0], setRightYear = _e[1];
+    var _f = useState(selectedDate || []), tempSelectedDate = _f[0], setTempSelectedDate = _f[1];
+    // Sync state when initial selection changes
+    useEffect(function () {
+        var initDate = selectedDate && selectedDate[0] ? new Date(selectedDate[0]) : new Date();
+        var initMonth = initDate.getMonth();
+        var initYear = initDate.getFullYear();
+        var nextMonth = initMonth === 11 ? 0 : initMonth + 1;
+        var nextYear = initMonth === 11 ? initYear + 1 : initYear;
+        setLeftMonth(initMonth);
+        setLeftYear(initYear);
+        setRightMonth(nextMonth);
+        setRightYear(nextYear);
+    }, [selectedDate]);
+    var isAdjacent = useMemo(function () { return areMonthsAdjacent(leftMonth, leftYear, rightMonth, rightYear); }, [leftMonth, leftYear, rightMonth, rightYear]);
+    var handleLeftPrevMonth = function () {
+        if (leftMonth === 0) {
+            setLeftMonth(11);
+            setLeftYear(function (prev) { return prev - 1; });
+        }
+        else {
+            setLeftMonth(function (prev) { return prev - 1; });
+        }
+    };
+    var handleLeftNextMonth = function () {
+        if (isAdjacent) {
+            // If adjacent, move both panels forward by 2 months
+            if (leftMonth === 11) {
+                setLeftMonth(1);
+                setLeftYear(function (prev) { return prev + 2; });
+            }
+            else {
+                setLeftMonth(function (prev) { return prev + 2; });
+            }
+            if (rightMonth === 11) {
+                setRightMonth(1);
+                setRightYear(function (prev) { return prev + 2; });
+            }
+            else {
+                setRightMonth(function (prev) { return prev + 2; });
+            }
+        }
+        else {
+            // If not adjacent, move left panel forward by 1 month
+            if (leftMonth === 11) {
+                setLeftMonth(0);
+                setLeftYear(function (prev) { return prev + 1; });
+            }
+            else {
+                setLeftMonth(function (prev) { return prev + 1; });
+            }
+        }
+    };
+    var handleRightPrevMonth = function () {
+        if (isAdjacent) {
+            // If adjacent, move both panels backward by 2 months
+            if (leftMonth === 0) {
+                setLeftMonth(10);
+                setLeftYear(function (prev) { return prev - 1; });
+            }
+            else {
+                setLeftMonth(function (prev) { return prev - 2; });
+            }
+            if (rightMonth === 0) {
+                setRightMonth(10);
+                setRightYear(function (prev) { return prev - 1; });
+            }
+            else {
+                setRightMonth(function (prev) { return prev - 2; });
+            }
+        }
+        else {
+            // If not adjacent, move right panel backward by 1 month
+            if (rightMonth === 0) {
+                setRightMonth(11);
+                setRightYear(function (prev) { return prev - 1; });
+            }
+            else {
+                setRightMonth(function (prev) { return prev - 1; });
+            }
+        }
+    };
+    var handleRightNextMonth = function () {
+        if (rightMonth === 11) {
+            setRightMonth(0);
+            setRightYear(function (prev) { return prev + 1; });
+        }
+        else {
+            setRightMonth(function (prev) { return prev + 1; });
+        }
+    };
+    var handleDateSelect = function (date) {
+        if (tempSelectedDate.length >= 2) {
+            setTempSelectedDate([dateToInputString(date)]);
+        }
+        else {
+            setTempSelectedDate(__spreadArray(__spreadArray([], tempSelectedDate, true), [dateToInputString(date)], false));
+        }
+    };
+    var handleMonthSelect = function (setMonth, dateIndex, initYear) {
+        return function (val) {
+            var selectedDates = Array.isArray(selectedDate)
+                ? selectedDate
+                : selectedDate
+                    ? [selectedDate]
+                    : [];
+            var isMonthAlreadySelected = selectedDates.some(function (date) {
+                var dateYear = parseInt(date.slice(0, 4));
+                var dateMonth = parseInt(date.slice(5, 7)) - 1;
+                return dateYear === initYear && dateMonth === val;
+            });
+            if (isMonthAlreadySelected) {
+                if (!selectedDates[dateIndex]) {
+                    return;
+                }
+                var selectedMonth = parseInt(selectedDates[dateIndex].slice(5, 7)) - 1;
+                if (val === selectedMonth) {
+                    setMonth(selectedMonth);
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                setMonth(val);
+            }
+        };
+    };
+    return (React.createElement("div", { className: "space-y-[30px]" },
+        React.createElement("div", { className: "range-picker picker-body flex gap-x-[22px]" },
+            React.createElement(PickerContent, { selectedDate: tempSelectedDate, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, initialViewMonth: leftMonth, initialViewYear: leftYear, onPrevMonth: handleLeftPrevMonth, onNextMonth: handleLeftNextMonth, onMonthSelect: handleMonthSelect(setLeftMonth, 0, leftInitYear) }),
+            React.createElement(PickerContent, { selectedDate: tempSelectedDate, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, initialViewMonth: rightMonth, initialViewYear: rightYear, onPrevMonth: handleRightPrevMonth, onNextMonth: handleRightNextMonth, onMonthSelect: handleMonthSelect(setRightMonth, 1, rightInitYear) })),
+        React.createElement("div", { className: "flex justify-between" },
+            React.createElement(Button, { label: "Reset", size: "sm", variant: "primary-outlined", iconLeft: React.createElement(TbRefresh, { className: "text-bia-blue", size: 14 }), onClick: function () { return setTempSelectedDate([]); } }),
+            React.createElement("div", { className: "flex gap-x-2.5" },
+                React.createElement(Button, { label: "Cancel", size: "sm", variant: "subtle", onClick: onClose }),
+                React.createElement(Button, { label: "Done", size: "sm", iconLeft: React.createElement(TbCheck, { className: "text-bia-white", size: 14 }), variant: "primary", onClick: function () {
+                        onDateChange(tempSelectedDate.length ? tempSelectedDate : null);
+                        onClose();
+                    } })))));
+};
+
 var PickerCalendar = function (_a) {
-    var _b = _a.zIndex, zIndex = _b === void 0 ? 100 : _b, anchorRef = _a.anchorRef, maxDate = _a.maxDate, minDate = _a.minDate, onDateChange = _a.onDateChange; _a.ref; var _c = _a.selectedDate, selectedDate = _c === void 0 ? null : _c, _d = _a.isOpen, isOpen = _d === void 0 ? false : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, props = __rest(_a, ["zIndex", "anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate", "isOpen", "onClose"]);
+    var _b = _a.zIndex, zIndex = _b === void 0 ? 100 : _b, anchorRef = _a.anchorRef, maxDate = _a.maxDate, minDate = _a.minDate, onDateChange = _a.onDateChange; _a.ref; var _c = _a.selectedDate, selectedDate = _c === void 0 ? null : _c, _d = _a.isOpen, isOpen = _d === void 0 ? false : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, _f = _a.pickerVariant, pickerVariant = _f === void 0 ? 'range' : _f, props = __rest(_a, ["zIndex", "anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate", "isOpen", "onClose", "pickerVariant"]);
     // Hooks & States
-    var _f = useCalendarLogic(selectedDate, minDate, maxDate), displayDays = _f.displayDays, handleNextDecade = _f.handleNextDecade, handleNextMonth = _f.handleNextMonth, handleNextYear = _f.handleNextYear, handlePickerMode = _f.handlePickerMode, handlePrevDecade = _f.handlePrevDecade, handlePrevMonth = _f.handlePrevMonth, handlePrevYear = _f.handlePrevYear, handleSetSelectedDate = _f.handleSetSelectedDate, isNextDisabled = _f.isNextDisabled, isPrevDisabled = _f.isPrevDisabled, maxDateValue = _f.maxDateValue, minDateValue = _f.minDateValue, pickerMode = _f.pickerMode, setViewMonthValue = _f.setViewMonthValue, setViewYearValue = _f.setViewYearValue, viewMonthValue = _f.viewMonthValue, viewYearValue = _f.viewYearValue, yearDisplayRange = _f.yearDisplayRange;
     var pickerCalendarRef = useRef(null);
     var _g = useDetectOutsideClick(anchorRef, false, pickerCalendarRef), isPickerOpen = _g[0], setIsPickerOpen = _g[1];
     var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
@@ -3348,56 +3666,17 @@ var PickerCalendar = function (_a) {
     useEffect(function () {
         setIsPickerOpen(isOpen);
     }, [isOpen]);
+    return createPortal(React.createElement("div", __assign({ className: "bianic-datepicker-calendar absolute rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] text-bia-black shadow-md ".concat(className), ref: pickerCalendarRef, style: __assign(__assign({ zIndex: zIndex, display: isPickerOpen ? 'flex' : 'none' }, positionStyle), style) }, restProps),
+        React.createElement(PickerBody, { selectedDate: selectedDate, minDate: minDate, maxDate: maxDate, onDateChange: onDateChange, isPickerOpen: isPickerOpen, pickerVariant: pickerVariant, onClose: onClose })), document.body);
+};
+var PickerBody = function (_a) {
+    var selectedDate = _a.selectedDate, minDate = _a.minDate, maxDate = _a.maxDate, onDateChange = _a.onDateChange, isPickerOpen = _a.isPickerOpen, _b = _a.pickerVariant, pickerVariant = _b === void 0 ? 'range' : _b, onClose = _a.onClose;
     useEffect(function () {
         if (!isPickerOpen) {
             onClose();
-            handlePickerMode('date');
         }
     }, [isPickerOpen]);
-    // Event Handlers
-    var handleDateSelect = function (date) {
-        handleSetSelectedDate(date, onDateChange);
-    };
-    var handleMonthSelect = function (month) {
-        setViewMonthValue(month);
-        handlePickerMode('date');
-    };
-    var handleYearSelect = function (year) {
-        setViewYearValue(year);
-        handlePickerMode('month');
-    };
-    return createPortal(React.createElement("div", __assign({ className: "bianic-datepicker-calendar absolute flex w-[250px] flex-col gap-[15px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] text-bia-black shadow-md ".concat(className), ref: pickerCalendarRef, style: __assign(__assign({ zIndex: zIndex, display: isPickerOpen ? 'block' : 'none' }, positionStyle), style) }, restProps),
-        React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
-            React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
-                    ? handlePrevMonth
-                    : pickerMode === 'month'
-                        ? handlePrevYear
-                        : handlePrevDecade },
-                React.createElement(TbChevronLeft, { size: 18 })),
-            React.createElement("div", { className: "bianic-datepicker-calendar-current-month flex items-center justify-center gap-1" },
-                React.createElement("button", { className: pickerMode === 'date' ? '' : 'hidden', onClick: function (e) {
-                        e.stopPropagation();
-                        handlePickerMode('month');
-                    } },
-                    React.createElement(Text, { variant: "normal-text-semibold" },
-                        MONTH_MAP[viewMonthValue],
-                        ' ')),
-                React.createElement("button", { className: pickerMode === 'date' || pickerMode === 'month' ? '' : 'hidden', onClick: function (e) {
-                        e.stopPropagation();
-                        handlePickerMode('year');
-                    } },
-                    React.createElement(Text, { variant: "normal-text" }, viewYearValue)),
-                React.createElement("button", { className: pickerMode === 'year' ? '' : 'hidden' },
-                    React.createElement(Text, { variant: "normal-text" }, "".concat(yearDisplayRange[1], " - ").concat(yearDisplayRange[10])))),
-            React.createElement("button", { className: "bianic-datepicker-calendar-next-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isNextDisabled(), onClick: pickerMode === 'date'
-                    ? handleNextMonth
-                    : pickerMode === 'month'
-                        ? handleNextYear
-                        : handleNextDecade },
-                React.createElement(TbChevronRight, { size: 18 }))),
-        pickerMode === 'date' && (React.createElement(DateDisplay, { displayDays: displayDays, maxDateValue: maxDateValue, minDateValue: minDateValue, onDateSelect: handleDateSelect, selectedDate: selectedDate, viewMonthValue: viewMonthValue })),
-        pickerMode === 'month' && (React.createElement(MonthDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onMonthSelect: handleMonthSelect, selectedDate: selectedDate, viewMonthValue: viewMonthValue, viewYearValue: viewYearValue })),
-        pickerMode === 'year' && (React.createElement(YearDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onYearSelect: handleYearSelect, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange }))), document.body);
+    return (React.createElement("div", { className: "picker-body flex gap-x-5" }, pickerVariant === 'single' ? (React.createElement(SinglePicker, { selectedDate: selectedDate, onDateChange: onDateChange, minDate: minDate, maxDate: maxDate })) : (React.createElement(RangePicker, { selectedDate: selectedDate, onDateChange: onDateChange, minDate: minDate, maxDate: maxDate, onClose: onClose }))));
 };
 
 var monthMap = [
@@ -3416,12 +3695,22 @@ var monthMap = [
 ];
 var DateInputDisplay = forwardRef(function (_a, ref) {
     var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, nullDisplay = _a.nullDisplay, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction", "nullDisplay"]);
+    var inputValue = value || (value === null || value === void 0 ? void 0 : value.length) > 0
+        ? Array.isArray(value)
+            ? "".concat(value[0], " ").concat(value[1] ? "- ".concat(value[1]) : '')
+            : value
+        : '';
+    var viewValue = value || (value === null || value === void 0 ? void 0 : value.length) > 0
+        ? Array.isArray(value)
+            ? "".concat(displayDateFormatter(new Date(value[0])), " ").concat(value[1] ? "- ".concat(displayDateFormatter(new Date(value[1]))) : '')
+            : displayDateFormatter(new Date(value))
+        : nullDisplay || placeholder;
     var _e = useState(false), isEditing = _e[0], setIsEditing = _e[1];
-    var _f = useState(value), dateString = _f[0], setDateString = _f[1];
+    var _f = useState(inputValue), dateString = _f[0], setDateString = _f[1];
     var _g = styleConfig['text'], fieldStyle = _g.fieldStyle;
     var _h = sizeConfig$c[size], iconSize = _h.iconSize, fieldSize = _h.fieldSize, iconPosition = _h.iconPosition;
     var borderStyle = 'border border-bia-grey-dark-10 bg-primary-white';
-    var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(borderStyle, " ").concat(className);
+    var extendedInputClassName = "w-full ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(borderStyle, " ").concat(className);
     var labelStatus = props.readOnly ? 'read-only:pointer-events-none' : '';
     var handleTextChange = function (event) {
         var rawValue = event.target.value;
@@ -3442,51 +3731,45 @@ var DateInputDisplay = forwardRef(function (_a, ref) {
     };
     var handleBlur = function () {
         setIsEditing(false);
-        setDateString(value);
+        setDateString(inputValue);
     };
-    var input = isEditing || disabled ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, disabled: disabled, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey disabled:cursor-not-allowed", disabled: disabled, onClick: function () {
+    var input = isEditing || disabled ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: extendedInputClassName, autoFocus: true, disabled: disabled, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey disabled:cursor-not-allowed", disabled: disabled, onClick: function () {
                 buttonAction && buttonAction();
             } },
             React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full min-w-[185px] rounded hover:rounded-b-none hover:border-b-bia-blue focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName, " ").concat(value || nullDisplay ? 'text-bia-black' : 'text-bia-coolgrey', " ").concat(className) }, value
-            ? displayDateFormatter(new Date(value))
-            : nullDisplay || placeholder),
+        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full rounded hover:rounded-b-none hover:border-b-bia-blue focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName, " ").concat(inputValue || nullDisplay ? 'text-bia-black' : 'text-bia-coolgrey') }, viewValue),
         React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey ".concat(iconPosition) },
             React.createElement("button", { className: "bianic-datepicker-toggle-button", disabled: disabled, onClick: function () { return buttonAction && buttonAction(); } },
                 React.createElement(TbCalendar, { size: iconSize })))));
     useEffect(function () {
         // Only update dateString if we are NOT currently editing.
         if (!isEditing)
-            setDateString(value ? dateToInputString(new Date(value)) : '');
-    }, [value, isEditing]);
+            setDateString(inputValue !== null && inputValue !== void 0 ? inputValue : '');
+    }, [inputValue, isEditing]);
     return (React.createElement("div", { className: "bianic-date-input-container bianic-fgc-container flex w-full flex-col gap-y-2 text-bia-black" },
         label && (React.createElement("label", { htmlFor: id, className: "bianic-text-input-label text-xs font-semibold ".concat(labelStatus) },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
         React.createElement("div", { className: "relative w-full", ref: ref }, input)));
 });
-var dateToInputString = function (dateObj) {
-    if (!(dateObj instanceof Date) || isNaN(dateObj))
-        return ''; // Return empty string for invalid dates
-    // Use local time methods for consistent display/input
-    var year = dateObj.getFullYear();
-    var month = String(dateObj.getMonth() + 1).padStart(2, '0');
-    var day = String(dateObj.getDate()).padStart(2, '0');
-    return "".concat(year, "-").concat(month, "-").concat(day);
-};
 var displayDateFormatter = function (date) {
+    if (!isDate(date))
+        return '';
     return "".concat(date.getDate(), " ").concat(monthMap[date.getMonth()].slice(0, 3), " '").concat(date.getFullYear().toString().slice(2, 4));
 };
+function isDate(val) {
+    return val instanceof Date && !isNaN(val);
+}
 
 function DatePicker(_a) {
-    var _b = _a.zIndexCalendar, zIndexCalendar = _b === void 0 ? 100 : _b, value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required, nullDisplay = _a.nullDisplay, inputclassName = _a.inputclassName, containerClassName = _a.containerClassName;
+    var _b = _a.zIndexCalendar, zIndexCalendar = _b === void 0 ? 100 : _b, value = _a.value, onChange = _a.onChange, _c = _a.variant, variant = _c === void 0 ? 'single' : _c, size = _a.size, disabled = _a.disabled, _d = _a.placeholder, placeholder = _d === void 0 ? '"YYYY-MM-DD"' : _d, label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required, nullDisplay = _a.nullDisplay, inputClassName = _a.inputClassName, containerClassName = _a.containerClassName;
     // State and Ref
     var inputRef = useRef(null);
-    var _d = useState(false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
+    var _e = useState(false), isPickerOpen = _e[0], setIsPickerOpen = _e[1];
     return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName) },
         React.createElement("div", { className: "bianic-datepicker-field-container" },
-            React.createElement(DateInputDisplay, { inputClassName: inputclassName, value: value, setValue: onChange, placeholder: "YYYY-MM-DD", nullDisplay: nullDisplay, size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
-        React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate, isOpen: isPickerOpen, onClose: function () { return setIsPickerOpen(false); } })));
+            React.createElement(DateInputDisplay, { className: inputClassName, value: value, setValue: onChange, placeholder: placeholder, nullDisplay: nullDisplay, size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
+        React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, pickerVariant: variant, onDateChange: onChange, minDate: minDate, maxDate: maxDate, isOpen: isPickerOpen, onClose: function () { return setIsPickerOpen(false); } })));
 }
 
 var AlertRoundedSquare = function (_a) {
@@ -3769,7 +4052,7 @@ function PaginationBar(_a) {
     var size = _a.size, position = _a.position, currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
     var totalRange = Array.from({ length: totalPages }, function (_, i) { return i + 1; });
     var PAGE_SIZE = 5;
-    var _b = useState(0), startIndex = _b[0], setStartIndex = _b[1];
+    var _b = useState((currentPage || 1) - 1), startIndex = _b[0], setStartIndex = _b[1];
     var _c = useState(totalRange.slice(startIndex, PAGE_SIZE)), showedPages = _c[0], setShowedPages = _c[1];
     var buttonSizingStyle = size === 'sm' ? 31 : 38;
     var iconSize = size === 'sm' ? 14 : 18;
@@ -3777,13 +4060,6 @@ function PaginationBar(_a) {
         if (page >= 1 && page <= totalPages)
             onPageChange(page);
     };
-    var handleNextRange = function () {
-        var newStartIndex = startIndex + PAGE_SIZE;
-        if (newStartIndex < totalPages)
-            setStartIndex(newStartIndex);
-        else
-            setStartIndex(totalPages - PAGE_SIZE);
-    };
     var handlePrevRange = function () {
         var newStartIndex = startIndex - PAGE_SIZE;
         if (newStartIndex >= 0)
@@ -3791,6 +4067,13 @@ function PaginationBar(_a) {
         else
             setStartIndex(0);
     };
+    var handleNextRange = function () {
+        var newStartIndex = startIndex + PAGE_SIZE;
+        if (newStartIndex < totalPages)
+            setStartIndex(newStartIndex);
+        else
+            setStartIndex(totalPages - PAGE_SIZE);
+    };
     useEffect(function () {
         var start = Math.max(0, Math.min(startIndex, totalPages - PAGE_SIZE));
         var newPages = Array.from({ length: totalPages }, function (_, i) { return i + 1; }).slice(start, start + PAGE_SIZE);
@@ -3802,6 +4085,8 @@ function PaginationBar(_a) {
                 handlePageChange(currentPage - 1);
                 if (showedPages[0] === currentPage)
                     setStartIndex(function (old) { return old - 1; });
+                if (!showedPages.includes(currentPage))
+                    setStartIndex(currentPage - 2);
             }, className: currentPage === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
         showedPages.map(function (page) {
             if (page === currentPage) {
@@ -3813,9 +4098,10 @@ function PaginationBar(_a) {
         }),
         React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: function () {
                 handlePageChange(currentPage + 1);
-                if (showedPages[4] === currentPage) {
+                if (showedPages[4] === currentPage)
                     setStartIndex(function (old) { return old + 1; });
-                }
+                if (!showedPages.includes(currentPage))
+                    setStartIndex(currentPage - 4);
             }, className: currentPage === totalPages ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages }),
         totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handleNextRange, className: showedPages[showedPages.length - 1] === totalPages
                 ? ''