bianic-ui 1.15.0-beta.1 → 1.15.0

package/dist/cjs/index.js

@@ -2773,8 +2773,32 @@ var oneDayValue = 24 * 60 * 60 * 1000; // milliseconds in one day
 var todayValue = Date.now() -
     (Date.now() % oneDayValue) +
     new Date().getTimezoneOffset() * 1000 * 60; // today in milliseconds
+// Supporting functions
+var checkDateEquals = function (date1, date2) {
+    if (!date2 || !date1)
+        return false;
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+};
+var checkIsValidDate = function (dateString) {
+    // format check YYYY-MM-DD
+    var regex = /^\d{4}-\d{2}-\d{2}$/;
+    if (!regex.test(dateString)) {
+        return false;
+    }
+    // Date validity check
+    var parts = dateString.split('-');
+    var year = parseInt(parts[0], 10);
+    var month = parseInt(parts[1], 10);
+    var day = parseInt(parts[2], 10);
+    var date = new Date(Date.UTC(year, month - 1, day));
+    return (date.getUTCFullYear() === year &&
+        date.getUTCMonth() === month - 1 && // Check against 0-based month
+        date.getUTCDate() === day);
+};
 var PickerCalendar = function (_a) {
-    var _b = _a.selectedDate, selectedDate = _b === void 0 ? null : _b, onDateChange = _a.onDateChange, ref = _a.ref;
+    var _b = _a.selectedDate, selectedDate = _b === void 0 ? null : _b, onDateChange = _a.onDateChange, ref = _a.ref, minDate = _a.minDate, maxDate = _a.maxDate;
     // Constants
     var daysMap = [
         'Monday',
@@ -2803,10 +2827,12 @@ var PickerCalendar = function (_a) {
     // Mode Controller
     var _c = React.useState(modeMap[0]), pickerMode = _c[0], setPickerMode = _c[1];
     var _d = React.useState(''), prevMode = _d[0], setPrevMode = _d[1];
+    var minDateValue = minDate && checkIsValidDate(minDate || '') ? new Date(minDate) : null;
+    var maxDateValue = maxDate && checkIsValidDate(maxDate || '') ? new Date(maxDate) : null;
     // styling constants and functions
-    var chevronButtonStyle = 'text-bia-coolgrey';
+    var chevronButtonStyle = 'text-bia-coolgrey disabled:text-bia-coolgrey-light-50';
     var selectedDateStyle = function (date, dateSelected) {
-        var isSelected = checkDateEquals(date, dateSelected);
+        var isSelected = checkDateEquals(date, new Date(dateSelected));
         var isToday = checkDateEquals(date, new Date(todayValue));
         if (isSelected) {
             return 'bg-bia-blue-dark-10 text-bia-white rounded-full border border-bia-blue-dark-10';
@@ -2818,30 +2844,14 @@ var PickerCalendar = function (_a) {
             return 'hover:bg-bia-blue-pastel rounded-full';
         }
     };
-    var datesColorStyle = function (date, viewMonth) {
-        if (date.getMonth() === viewMonth) {
-            return 'text-bia-black';
-        }
-        else {
-            return 'text-bia-coolgrey';
-        }
-    };
-    var selectedMonthStyle = function (month, monthSelected) {
-        if (month === monthSelected) {
+    var selectedStyle = function (match) {
+        if (match) {
             return 'bg-bia-blue-dark-10 text-bia-white rounded-full border border-bia-blue-dark-10';
         }
         else {
-            return 'hover:bg-bia-blue-pastel rounded-full';
+            return 'enabled:hover:bg-bia-blue-pastel rounded-full';
         }
     };
-    // Supporting functions
-    var checkDateEquals = function (date1, date2) {
-        if (!date2 || !date1)
-            return false;
-        return (date1.getFullYear() === date2.getFullYear() &&
-            date1.getMonth() === date2.getMonth() &&
-            date1.getDate() === date2.getDate());
-    };
     // handler
     var handleViewNextMonth = function () {
         if (viewMonthValue === 11) {
@@ -2908,7 +2918,7 @@ var PickerCalendar = function (_a) {
             setViewYearValue(date.getFullYear());
         }
         if (onDateChange) {
-            onDateChange(date);
+            onDateChange(dateToInputString$1(date));
         }
     };
     var handlePickerMode = function (mode) {
@@ -2948,17 +2958,59 @@ var PickerCalendar = function (_a) {
     var yearDisplayRange = getDecadeRange(viewDecadeValue);
     // Variable display
     var dateDisplay = (React.createElement("div", { className: "".concat(pickerMode === 'date' ? '' : 'hidden') },
-        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-header grid grid-cols-7 gap-[3px] pb-1.5", style: { zIndex: 100 } }, daysMap.map(function (day) { return (React.createElement("div", { key: day, className: "bianic-datepicker-calendar-day flex h-[18px] w-[31px] items-center justify-center text-bia-coolgrey" },
-            React.createElement(Text, { variant: "small-text" }, day.slice(0, 3)))); })),
-        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-body grid grid-cols-7 gap-y-1.5" }, displayDays.map(function (date) { return (React.createElement("button", { key: date.toString(), className: "bianic-datepicker-calendar-day flex h-[31px] w-[31px] items-center justify-center ".concat(datesColorStyle(date, viewMonthValue), " ").concat(selectedDateStyle(date, selectedDate)), onClick: function () {
-                // Handle date selection logic here
-                handleSetSelectedDate(date);
-            } },
-            React.createElement(Text, { variant: "small-text", extended: checkDateEquals(date, selectedDate) ? 'text-bia-white' : '' }, date.getDate()))); }))));
-    var monthDisplay = (React.createElement("div", { className: "bianic-datepicker-calendar-month-grid grid grid-cols-3 gap-y-1.5 ".concat(pickerMode === 'month' ? '' : 'hidden') }, monthMap.map(function (month, index) { return (React.createElement("button", { className: "bianic-datepicker-calendar-month mx-[15px] flex h-[31px] items-center justify-center ".concat(selectedMonthStyle(index, viewMonthValue)), key: index, onClick: function () { return handleSetMonth(index); } },
-        React.createElement(Text, { variant: "small-text" }, month.slice(0, 3)))); })));
-    var yearDisplay = (React.createElement("div", { className: "bianic-datepicker-calendar-year-grid grid grid-cols-4 gap-y-1.5 ".concat(pickerMode === 'year' ? '' : 'hidden') }, yearDisplayRange.map(function (year, index) { return (React.createElement("button", { className: "bianic-datepicker-calendar-month mx-[6px] flex h-[31px] items-center justify-center ".concat(selectedMonthStyle(year, viewYearValue), " ").concat(index === 0 || index === 11 ? 'text-bia-coolgrey' : 'text-bia-black'), key: index, onClick: function () { return handleSetYear(year); } },
-        React.createElement(Text, { variant: "small-text" }, year))); })));
+        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-header grid grid-cols-7 gap-[3px] pb-1.5", style: { zIndex: 100 } }, daysMap.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)))); })),
+        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-body grid grid-cols-7 gap-y-1.5" }, displayDays.map(function (date) {
+            var isOutOfRange = !!((minDateValue && date < minDateValue) ||
+                (maxDateValue && date > maxDateValue));
+            var isOutOfMonth = date.getMonth() !== viewMonthValue;
+            var calendarDateStyle = isOutOfMonth
+                ? 'text-bia-coolgrey'
+                : 'text-bia-black';
+            var dateDisplayStyle = isOutOfRange
+                ? 'text-bia-coolgrey-light-50'
+                : calendarDateStyle;
+            return (React.createElement("button", { key: date.toString(), className: "bianic-datepicker-calendar-day flex h-[31px] w-[31px] items-center justify-center ".concat(isOutOfRange ? '' : selectedDateStyle(date, selectedDate)), disabled: isOutOfRange, onClick: function () {
+                    handleSetSelectedDate(date);
+                } },
+                React.createElement(Text, { variant: "small-text", extended: selectedDate &&
+                        date.getDate() === parseInt(selectedDate.slice(8, 10)) &&
+                        date.getMonth() + 1 === parseInt(selectedDate.slice(5, 7)) &&
+                        date.getFullYear() === parseInt(selectedDate.slice(0, 4))
+                        ? 'text-bia-white'
+                        : dateDisplayStyle }, date.getDate())));
+        }))));
+    var monthDisplay = (React.createElement("div", { className: "bianic-datepicker-calendar-month-grid grid grid-cols-3 gap-y-1.5 ".concat(pickerMode === 'month' ? '' : 'hidden') }, monthMap.map(function (month, index) {
+        var isOutOfRange = !!((minDateValue &&
+            (minDateValue.getFullYear() < viewYearValue ||
+                index <
+                    (minDateValue.getFullYear() === viewYearValue
+                        ? minDateValue.getMonth()
+                        : 0))) ||
+            (maxDateValue &&
+                (maxDateValue.getFullYear() > viewYearValue ||
+                    index >
+                        (maxDateValue.getFullYear() === viewYearValue
+                            ? maxDateValue.getMonth()
+                            : 11))));
+        var monthDisplayStyle = isOutOfRange
+            ? 'text-bia-coolgrey-light-50'
+            : 'text-bia-black';
+        return (React.createElement("button", { className: "bianic-datepicker-calendar-month mx-[15px] flex h-[31px] items-center justify-center ".concat(selectedStyle(viewYearValue === new Number(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.slice(0, 4)) && index === viewMonthValue)), key: index, disabled: isOutOfRange, onClick: function () { return handleSetMonth(index); } },
+            React.createElement(Text, { variant: "small-text", extended: viewYearValue === new Number(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.slice(0, 4)) &&
+                    index === viewMonthValue
+                    ? 'text-bia-white'
+                    : monthDisplayStyle }, month.slice(0, 3))));
+    })));
+    var yearDisplay = (React.createElement("div", { className: "bianic-datepicker-calendar-year-grid grid grid-cols-4 gap-y-1.5 ".concat(pickerMode === 'year' ? '' : 'hidden') }, yearDisplayRange.map(function (year, index) {
+        var isOutOfRange = !!((minDateValue && year < minDateValue.getFullYear()) ||
+            (maxDateValue && year > maxDateValue.getFullYear()));
+        var yearDisplayStyle = isOutOfRange
+            ? 'text-bia-coolgrey-light-50'
+            : 'text-bia-black';
+        return (React.createElement("button", { className: "bianic-datepicker-calendar-month mx-[6px] flex h-[31px] items-center justify-center ".concat(selectedStyle(year === viewYearValue), " ").concat(index === 0 || index === 11 ? 'text-bia-coolgrey' : 'text-bia-black'), key: index, disabled: isOutOfRange, onClick: function () { return handleSetYear(year); } },
+            React.createElement(Text, { variant: "small-text", extended: year === viewYearValue ? 'text-bia-white' : yearDisplayStyle }, year)));
+    })));
     // useEffect to update displayDays when viewMonthValue or viewYearValue changes
     React.useEffect(function () {
         var tempDisplayDays = [];
@@ -2969,7 +3021,10 @@ var PickerCalendar = function (_a) {
     }, [viewMonthValue, viewYearValue, selectedDate]);
     return (React.createElement("div", { className: "bianic-datepicker-calendar flex flex-col gap-[15px] text-bia-black", ref: ref },
         React.createElement("div", { className: "bianic-datepicker-calendar-controller flex  w-full items-center justify-between" },
-            React.createElement("button", { className: "bianic-datepicker-calendar-prev-button ".concat(chevronButtonStyle), onClick: function () { return handlePrevAction(); } },
+            React.createElement("button", { className: "bianic-datepicker-calendar-prev-button ".concat(chevronButtonStyle), disabled: minDateValue !== null &&
+                    yearDisplayRange.includes(minDateValue.getFullYear()) &&
+                    viewYearValue <= minDateValue.getFullYear() &&
+                    viewMonthValue <= minDateValue.getMonth(), onClick: function () { return handlePrevAction(); } },
                 React.createElement(TbChevronLeft, { size: 18 })),
             React.createElement("div", { className: "bianic-datepicker-calendar-current-month gap flex items-center justify-center gap-1" },
                 React.createElement("button", { className: "".concat(pickerMode === 'date' ? '' : 'hidden'), onClick: function () { return handlePickerMode('month'); } },
@@ -2980,13 +3035,25 @@ var PickerCalendar = function (_a) {
                     React.createElement(Text, { variant: "normal-text" }, viewYearValue)),
                 React.createElement("button", { className: "".concat(pickerMode === 'year' ? '' : 'hidden') },
                     React.createElement(Text, { variant: "normal-text" }, "".concat(yearDisplayRange[1], " - ").concat(yearDisplayRange[10])))),
-            React.createElement("button", { className: "bianic-datepicker-calendar-next-button ".concat(chevronButtonStyle), onClick: function () { return handleNextAction(); } },
+            React.createElement("button", { className: "bianic-datepicker-calendar-next-button ".concat(chevronButtonStyle), disabled: maxDateValue !== null &&
+                    yearDisplayRange.includes(maxDateValue.getFullYear()) &&
+                    viewYearValue >= maxDateValue.getFullYear() &&
+                    viewMonthValue >= maxDateValue.getMonth(), onClick: function () { return handleNextAction(); } },
                 React.createElement(TbChevronRight, { size: 18 }))),
         React.createElement("div", { className: "bianic-datepicker-calendar-days-grid flex flex-col " },
             dateDisplay,
             monthDisplay,
             yearDisplay)));
 };
+var dateToInputString$1 = 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 monthMap = [
     'January',
@@ -3002,8 +3069,70 @@ var monthMap = [
     'November',
     'December',
 ];
+var DateInputDisplay = function (_a) {
+    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, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction"]);
+    var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
+    var _f = React.useState(value), 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 labelStatus = props.readOnly ? 'read-only:pointer-events-none' : '';
+    var handleTextChange = function (event) {
+        var rawValue = event.target.value;
+        setDateString(rawValue); // Update the displayed text input immediately
+        // --- Validation and Conversion Logic ---
+        if (rawValue) {
+            var newDate = new Date(rawValue);
+            if (!isNaN(newDate.getTime())) {
+                // If valid, update the Date object state
+                if (setValue)
+                    setValue(rawValue);
+                return;
+            }
+        }
+        // If the string is empty or invalid, set the Date object state to null
+        if (setValue)
+            setValue('');
+    };
+    var handleBlur = function () {
+        setIsEditing(false);
+        setDateString(value);
+    };
+    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", 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 ? 'text-bia-black' : 'text-bia-coolgrey') }, value ? displayDateFormatter(new Date(value)) : placeholder),
+        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 })))));
+    React.useEffect(function () {
+        // Only update dateString if we are NOT currently editing.
+        if (!isEditing)
+            setDateString(value ? dateToInputString(new Date(value)) : '');
+    }, [value, 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" }, 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) {
+    return "".concat(date.getDate(), " ").concat(monthMap[date.getMonth()].slice(0, 3), " '").concat(date.getFullYear().toString().slice(2, 4));
+};
+
 function DatePicker(_a) {
-    var value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled, _b = _a.placeholder, placeholder = _b === void 0 ? '"YYYY-MM-DD"' : _b, label = _a.label, descText = _a.descText, required = _a.required;
+    var 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;
     // State and Ref
     var inputRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
@@ -3011,114 +3140,10 @@ function DatePicker(_a) {
     var _c = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
     return (React.createElement("div", { className: "bianic-datepicker-container relative", ref: wrapperRef },
         React.createElement("div", { className: "bianic-datepicker-field-container" },
-            React.createElement(DateInput, { ref: inputRef, placeholder: placeholder, value: value, onChange: onChange, size: size, disabled: disabled, buttonAction: function () { return setIsPickerOpen(true); }, setIsActive: setIsPickerOpen, label: label, descText: descText, required: required })),
+            React.createElement(DateInputDisplay, { value: value, setValue: onChange, placeholder: "YYYY-MM-DD", size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
         isPickerOpen && (React.createElement("div", { className: "bianic-datepicker-calendar-container absolute left-0 w-[250px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] shadow-md" },
-            React.createElement(PickerCalendar, { selectedDate: new Date(value), onDateChange: onChange, ref: pickerRef })))));
+            React.createElement(PickerCalendar, { selectedDate: value, onDateChange: onChange, ref: pickerRef, minDate: minDate, maxDate: maxDate })))));
 }
-var DateInput = function (_a) {
-    var className = _a.className, value = _a.value; _a.isActive; var setIsActive = _a.setIsActive, label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? 'md' : _b, onChange = _a.onChange, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, readOnly = _a.readOnly, descText = _a.descText, props = __rest(_a, ["className", "value", "isActive", "setIsActive", "label", "id", "size", "onChange", "required", "disabled", "buttonAction", "readOnly", "descText"]);
-    var editDateFormatter = function (date) {
-        var localString = date.toLocaleDateString().split('/');
-        return localString.reverse().join('-');
-    };
-    var displayDateFormatter = function (date) {
-        return "".concat(date.getDate(), " ").concat(monthMap[date.getMonth()].slice(0, 3), " '").concat(date.getFullYear().toString().slice(2, 4));
-    };
-    // Convert Date to string for display
-    var formattedValue = value instanceof Date ? displayDateFormatter(value) : value;
-    var _e = React.useState(formattedValue), viewValue = _e[0], setViewValue = _e[1];
-    React.useRef(null);
-    var _f = React.useState(0); _f[0]; _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 validateAndFormatDate = function (value) {
-        // 1. validate separator
-        var splittedDate = value.split('-');
-        if (splittedDate.length !== 3) {
-            return [1, value]; // Invalid format
-        }
-        var year = splittedDate[0];
-        var month = splittedDate[1];
-        var day = splittedDate[2];
-        // 2. validate year
-        if (!/^\d{4}$/.test(year)) {
-            return [2, value];
-        }
-        var parsedYear = parseInt(year, 10);
-        // 3. validate month digit
-        if (!/^\d{1,2}$/.test(month)) {
-            return [3, value];
-        }
-        // 4. validate month range
-        var parsedMonth = parseInt(month, 10);
-        if (parsedMonth < 1 || parsedMonth > 12) {
-            return [4, value];
-        }
-        var formattedMonth = String(parsedMonth).padStart(2, '0');
-        // 5. validate date digit
-        if (!/^\d{1,2}$/.test(day)) {
-            return [5, value];
-        }
-        // 6. validate date range
-        var parsedDate = parseInt(day, 10);
-        if (parsedDate < 1 || parsedDate > 31) {
-            return [6, value];
-        }
-        var formattedDay = String(parsedDate).padStart(2, '0');
-        // 7. validate date rightness
-        var dateObject = new Date(parsedYear, parsedMonth - 1, parsedDate);
-        if (dateObject.getFullYear() !== parsedYear ||
-            dateObject.getMonth() !== parsedMonth - 1 ||
-            dateObject.getDate() !== parsedDate) {
-            return [7, value];
-        }
-        // If all checks pass, the date is valid and formatted
-        var formattedDate = "".concat(year, "-").concat(formattedMonth, "-").concat(formattedDay);
-        return [0, formattedDate];
-    };
-    // Update actual value on release
-    var updateValue = function (newValue) {
-        var date = new Date(newValue); // Create a Date object from the input
-        if (onChange && !Number.isNaN(date.valueOf())) {
-            onChange(date); // Update the value if it's a valid date
-        }
-    };
-    var handleChange = function (event) {
-        var value = event.target.value;
-        // Regular expression to allow only numbers (0-9) and hyphens (-)
-        // The caret (^) matches the beginning of the string, and the dollar sign ($) matches the end.
-        // This ensures the *entire* string matches the pattern.
-        var regex = /^[0-9-]*$/;
-        if (regex.test(value)) {
-            setViewValue(value);
-        }
-    };
-    React.useEffect(function () {
-        setViewValue(formattedValue);
-    }, [value]);
-    return (React.createElement("div", { className: "bianic-date-input-container bianic-fgc-container group/form flex w-full flex-col gap-y-2 text-bia-black " },
-        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
-        React.createElement("div", { className: "relative w-full" },
-            React.createElement("input", __assign({}, props, { type: "text", className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 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), id: id, value: viewValue, disabled: disabled, onChange: handleChange, required: required, onFocus: function () {
-                    setIsActive && setIsActive(true);
-                    setViewValue(editDateFormatter(value));
-                }, onBlur: function () {
-                    var _a = validateAndFormatDate(viewValue), status = _a[0], validatedValue = _a[1];
-                    setViewValue(displayDateFormatter(value));
-                    if (status !== 0) ;
-                    else {
-                        updateValue(validatedValue);
-                    }
-                }, maxLength: 10 })),
-            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 () {
-                        buttonAction && buttonAction();
-                    } },
-                    React.createElement(TbCalendar, { size: iconSize })))),
-        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
-};
 
 var Node = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
@@ -4094,6 +4119,7 @@ exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.P = P;
 exports.PaginationBar = PaginationBar;
+exports.PickerCalendar = PickerCalendar;
 exports.Pills = Pills;
 exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;