bianic-ui 1.15.0-beta.2 → 1.16.0-alpha.0

package/dist/cjs/index.js

@@ -443,10 +443,10 @@ var minWidthConfig$1 = {
     tn: 'min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
-    lg: 'py-[13px] h-[48px] h-[48px] flex items-center justify-center gap-[10px]',
+    lg: 'py-[13px] h-[48px] w-[48px] flex items-center justify-center gap-[10px]',
     md: 'py-[11px] h-[40px] w-[40px] flex items-center justify-center gap-[5px]',
-    sm: 'py-[8px] h-[30px] h-[30px] flex items-center justify-center gap-[5px] ',
-    tn: 'py-[4px] h-[22px] h-[22px] flex items-center justify-center gap-[3px]',
+    sm: 'py-[8px] h-[30px] w-[30px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] h-[22px] w-[22px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$2 = {
@@ -1724,7 +1724,86 @@ var TreeItem = function (_a) {
         })))));
 };
 
-var MenuContainer = React.forwardRef(function MenuContainer(propsComp, ref) {
+var getDropdownStyle = function (anchorRef, popupRef) {
+    if (!anchorRef.current || !popupRef.current) {
+        return {};
+    }
+    var anchorRect = anchorRef.current.getBoundingClientRect();
+    var popupHeight = popupRef.current.offsetHeight;
+    var spaceToBottom = window.innerHeight - anchorRect.bottom;
+    var spaceToTop = anchorRect.top;
+    var style = {
+        left: "".concat(anchorRect.left, "px"),
+    };
+    // If space below is less than popup height,
+    // AND space above is more than space below
+    // then flip up
+    if (spaceToBottom < popupHeight && spaceToTop > spaceToBottom) {
+        style.bottom = "".concat(window.innerHeight - anchorRect.top, "px");
+    }
+    else {
+        style.top = "".concat(anchorRect.bottom, "px");
+    }
+    return style;
+};
+var usePopupPosition = function (anchorRef, popupRef) {
+    // In projects where bianic-ui is installed,
+    // there is a delay in rendering styles,
+    // which causes popups to lose their position and need to be re-rendered.
+    var _a = React.useState(0), repeateRender = _a[0], setRepeateRender = _a[1];
+    var _b = React.useState({}), positionStyle = _b[0], setPositionStyle = _b[1];
+    React.useLayoutEffect(function () {
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
+            return;
+        var newStyle = getDropdownStyle(anchorRef, popupRef);
+        setPositionStyle(newStyle);
+        var handleScrollOrResize = function () {
+            setPositionStyle(getDropdownStyle(anchorRef, popupRef));
+        };
+        window.addEventListener('scroll', handleScrollOrResize);
+        window.addEventListener('resize', handleScrollOrResize);
+        setRepeateRender(0);
+        return function () {
+            window.removeEventListener('scroll', handleScrollOrResize);
+            window.removeEventListener('resize', handleScrollOrResize);
+        };
+    }, [anchorRef]);
+    React.useEffect(function () {
+        if (repeateRender < 5 && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
+            setPositionStyle(getDropdownStyle(anchorRef, popupRef));
+            setRepeateRender(repeateRender + 1);
+        }
+    }, [repeateRender]);
+    return [positionStyle];
+};
+
+var MenuContainer = function (props) {
+    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef"]);
+    if (!open)
+        return null;
+    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
+    var MenuContainerRef = React.useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, MenuContainerRef)[0];
+    return (React.createElement(React.Fragment, null,
+        isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
+        reactDom.createPortal(React.createElement("div", __assign({ ref: MenuContainerRef, className: "absolute w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: __assign({ zIndex: zIndex + 10, minWidth: anchorRef.current
+                    ? anchorRef.current.offsetWidth
+                    : undefined }, positionStyle) }, restProps), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
+                    React.cloneElement(child, {
+                        onClose: function () { return onClose(); },
+                        zIndex: zIndex + 10,
+                        inheritedOnClick: function () { return onClickItem(); },
+                    })
+                : child;
+        })), document.body)));
+};
+MenuContainer.defaultProps = {
+    isTopFlat: false,
+};
+
+var MenuContainerNoAnchor = React.forwardRef(function MenuContainerNoAnchor(propsComp, ref) {
     var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     return (open && (React.createElement(React.Fragment, null,
@@ -1742,7 +1821,7 @@ var MenuContainer = React.forwardRef(function MenuContainer(propsComp, ref) {
                 : child;
         })))));
 });
-MenuContainer.defaultProps = {
+MenuContainerNoAnchor.defaultProps = {
     isTopFlat: false,
 };
 
@@ -1756,11 +1835,10 @@ function MenuItem(_a) {
     var itemClass = "".concat(leftPadding, " ").concat(rightPadding, " ").concat(className);
     var MenuContRef = React.useRef(null);
     React.useEffect(function () {
-        var _a;
         if (MenuContRef.current) {
             // Adjust dropdown position to prevent overflow on the right.
-            var MenuContRect = (_a = MenuContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
+            var MenuContRect = MenuContRef.current.getBoundingClientRect();
+            var RectRight = MenuContRect.right;
             var innerWindow = window.innerWidth;
             if (RectRight > innerWindow)
                 setIsLeft(true);
@@ -1784,7 +1862,7 @@ function MenuItem(_a) {
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
                 children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
+        children && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2385,71 +2463,22 @@ var sizeConfig$6 = {
     },
 };
 
-var getDropdownStyle = function (anchorRef, dropdownRef) {
-    if (!anchorRef.current || !dropdownRef.current) {
-        return { minWidth: 'auto' };
-    }
-    var anchorRect = anchorRef.current.getBoundingClientRect();
-    var dropdownHeight = dropdownRef.current.offsetHeight;
-    var spaceToBottom = window.innerHeight - anchorRect.bottom;
-    var spaceToTop = anchorRect.top;
-    var style = {
-        left: "".concat(anchorRect.left, "px"),
-        minWidth: "".concat(anchorRect.width, "px"),
-    };
-    // If space below is less than dropdown height, 
-    // AND space above is more than space below
-    // then flip up
-    if (spaceToBottom < dropdownHeight && spaceToTop > spaceToBottom) {
-        style.bottom = "".concat(window.innerHeight - anchorRect.top, "px");
-    }
-    else {
-        style.top = "".concat(anchorRect.bottom, "px");
-    }
-    return style;
-};
 var DropdownContainer = function (propsComp) {
     var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, anchorRef = propsComp.anchorRef, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef"]);
     if (!open)
         return null;
-    var _j = React.useState({ minWidth: 'auto' }), positionStyle = _j[0], setPositionStyle = _j[1];
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
     var dropdownRef = React.useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
     var handleClickDrpdownItem = function (e, val) {
         onClickItem(e, val);
         onClose();
     };
-    // In projects where bianic-ui is installed, 
-    // there is a delay in rendering styles, 
-    // which causes dropdowns to lose their position and need to be re-rendered.
-    var _k = React.useState(0), repeateRender = _k[0], setRepeateRender = _k[1];
-    React.useLayoutEffect(function () {
-        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
-            return;
-        var newStyle = getDropdownStyle(anchorRef, dropdownRef);
-        setPositionStyle(newStyle);
-        var handleScrollOrResize = function () {
-            setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
-        };
-        window.addEventListener('scroll', handleScrollOrResize);
-        window.addEventListener('resize', handleScrollOrResize);
-        setRepeateRender(0);
-        return function () {
-            window.removeEventListener('scroll', handleScrollOrResize);
-            window.removeEventListener('resize', handleScrollOrResize);
-        };
-    }, [anchorRef]);
-    React.useEffect(function () {
-        if (repeateRender < 5 && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
-            setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
-            setRepeateRender(repeateRender + 1);
-        }
-    }, [repeateRender]);
     return (React.createElement(React.Fragment, null,
         isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
-        reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "fixed max-w-fit bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
+        reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "fixed max-w-fit bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ minWidth: anchorRef.current ? anchorRef.current.offsetWidth : undefined, zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
                     React.cloneElement(child, {
@@ -2520,111 +2549,131 @@ var matchSearchTerm = function (content, term, variant) {
             return lowerContent.includes(lowerTerm);
     }
 };
-function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k, _l = _a.searchVariant, searchVariant = _l === void 0 ? 'include' : _l;
-    var _m = React.useState(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = React.useState(value.label || ''), searchTerm = _o[0], setSearchTerm = _o[1];
-    var _p = sizeConfig$6[size], iconClass = _p.iconClass, iconSize = _p.iconSize, inputClass = _p.inputClass;
-    var dropContClassName = dropContProps.className, dropContOnClickItem = dropContProps.onClickItem, restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
-    var isValueExist = value && value.label !== undefined && value.label !== '';
-    var inputRef = React.useRef(null);
-    var dropdownContRef = React.useRef(null);
-    // Will be used soon
-    // const handleOutsideClick = (e: MouseEvent) => {
-    //   if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
-    //     setIsOpen(false)
-    //   }
-    // }
-    // useEffect(() => {
-    //   document.addEventListener('mousedown', handleOutsideClick)
-    //   return () => {
-    //     document.removeEventListener('mousedown', handleOutsideClick)
-    //   }
-    // })
-    // Synchronize internal searchTerm with external value prop
-    React.useEffect(function () {
-        // Only update searchTerm if the label from the value prop differs from the current searchTerm
-        // This prevents infinite loops if searchTerm is already the same as value.label
-        if (value.label !== searchTerm) {
-            setSearchTerm(value.label || '');
-        }
-    }, [value.label, searchTerm]);
-    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
-        return item.label.toLowerCase().includes(value.label.toLowerCase());
+var filterOptions = function (options, searchTerm) {
+    return options === null || options === void 0 ? void 0 : options.filter(function (item) {
+        return item.label.toLowerCase().includes(searchTerm.toLowerCase());
     });
-    var handleInputChange = function (e) {
-        var newSearchTerm = e.target.value;
-        setSearchTerm(newSearchTerm);
-        setIsOpen(true); // Ensure dropdown opens when typing
-    };
-    var handleDropdownItemClick = React.useCallback(function (clickedValue) {
-        setSearchTerm(clickedValue.label); // Set input text to the selected label
-        setValue(clickedValue); // Update the value in the parent
-        setIsOpen(false);
-    }, [setValue]);
-    // Recursive function to filter and clone DropdownItems, including nested items
-    var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch) {
-        return React.Children.map(nodes, function (child) {
-            if (!React.isValidElement(child) || child.type !== DropdownItem) {
-                return child;
-            }
-            var itemProps = child.props;
-            // Assume content is a string for filtering; otherwise, filtering won't work well
-            var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
-            var itemValue = itemProps.value;
-            var isDisabled = itemProps.disabled;
-            // 2. Filtering Logic (Uses Global Search Variant)
-            if (!includeAllIfNoSearch) {
-                // Use the matchSearchTerm utility with the selected searchVariant
-                if (currentSearchTerm && !matchSearchTerm(itemValue, currentSearchTerm, searchVariant)) {
-                    return null; // Item does not match the search criteria
-                }
+};
+
+var getItemLabel = function (value) {
+    var _a;
+    return typeof value === 'object' && value !== null && 'label' in value
+        ? (_a = value.label) !== null && _a !== void 0 ? _a : ''
+        : String(value !== null && value !== void 0 ? value : '');
+};
+var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick) {
+    if (searchVariant === void 0) { searchVariant = 'include'; }
+    return React.Children.map(nodes, function (child) {
+        if (!React.isValidElement(child) || child.type !== DropdownItem) {
+            return child;
+        }
+        var itemProps = child.props;
+        var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
+        var itemValue = itemProps.value;
+        var isDisabled = itemProps.disabled;
+        // Filtering Logic
+        if (!includeAllIfNoSearch) {
+            var itemValueStr = typeof itemValue === 'object'
+                ? itemValue.label
+                : String(itemValue || '');
+            if (currentSearchTerm &&
+                !matchSearchTerm(itemValueStr, currentSearchTerm, searchVariant)) {
+                return null;
             }
-            // 3. Process Nested Children (Recursion)
-            var clonedChildren = itemProps.children
-                ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch)
-                : null;
-            // 4. Clone and Inject Click Handler
-            return React.cloneElement(child, {
-                onClick: function (e) {
-                    if (!isDisabled) {
-                        handleDropdownItemClick({
-                            id: itemValue !== undefined ? itemValue : itemContent,
-                            label: itemValue !== undefined ? itemValue : itemContent
-                        });
-                    }
-                    if (dropContOnClickItem) {
-                        dropContOnClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+        }
+        // Process Nested Children
+        var clonedChildren = itemProps.children
+            ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick)
+            : null;
+        // Clone and Inject Click Handler
+        return React.cloneElement(child, {
+            onClick: function (e) {
+                if (!isDisabled) {
+                    if (itemValue === undefined &&
+                        typeof itemProps.content === 'string') {
+                        return handleDropdownItemClick(e, itemContent);
                     }
-                    if (itemProps.onClickItem) {
-                        itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                    if (typeof itemValue === 'object' || itemValue !== undefined) {
+                        return handleDropdownItemClick(e, itemValue);
                     }
-                },
-                children: clonedChildren
-            });
+                }
+                if (itemProps.onClickItem) {
+                    itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                }
+            },
+            children: clonedChildren,
         });
-    };
-    // Determine which children to display
+    });
+};
+var processRenderedChildren = function (children, searchTerm, searchVariant, handleDropdownItemClick) {
     var renderedChildren = null;
     var hasFilteredResults = false;
     if (searchTerm) {
-        // If there's a searchTerm, filter children
-        renderedChildren = processDropdownChildren(children, searchTerm, false);
+        renderedChildren = processDropdownChildren(children, searchTerm, false, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
             React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
     else {
-        // If searchTerm is empty, display all children without filtering (but with onClick injected)
-        renderedChildren = processDropdownChildren(children, '', true);
+        renderedChildren = processDropdownChildren(children, '', true, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
-            React.Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
+            React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
+    return { renderedChildren: renderedChildren, hasFilteredResults: hasFilteredResults };
+};
+
+var useLiveSearch = function (_a) {
+    var value = _a.value, setValue = _a.setValue, onChangeText = _a.onChangeText, dropContOnClickItem = _a.dropContOnClickItem;
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.useState(String(value.label || '')), searchTerm = _c[0], setSearchTerm = _c[1];
+    React.useEffect(function () {
+        if (!isOpen && searchTerm !== '') {
+            setSearchTerm(getItemLabel(value));
+        }
+    }, [isOpen]);
+    var handleInputChange = function (e) {
+        var newSearchTerm = e.target.value;
+        setSearchTerm(newSearchTerm);
+        setIsOpen(true);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(e);
+    };
+    var handleDropdownItemClick = React.useCallback(function (event, clickedValue) {
+        dropContOnClickItem === null || dropContOnClickItem === void 0 ? void 0 : dropContOnClickItem(event, clickedValue);
+        var newLabel = getItemLabel(clickedValue);
+        setSearchTerm(newLabel);
+        setValue(clickedValue);
+        setIsOpen(false);
+    }, [setValue, dropContOnClickItem]);
+    return {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        searchTerm: searchTerm,
+        handleInputChange: handleInputChange,
+        handleDropdownItemClick: handleDropdownItemClick,
+    };
+};
+
+function LiveSearch(_a) {
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.dropContProps, dropContProps = _e === void 0 ? { className: undefined } : _e, id = _a.id, label = _a.label, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, options = _a.options, placeholder = _a.placeholder, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.searchVariant, searchVariant = _k === void 0 ? 'include' : _k, setValue = _a.setValue, _l = _a.size, size = _l === void 0 ? 'md' : _l, value = _a.value;
+    var inputRef = React.useRef(null);
+    var dropdownContRef = React.useRef(null);
+    var _m = useLiveSearch({
+        value: value,
+        setValue: setValue,
+        onChangeText: onChangeText,
+        dropContOnClickItem: dropContProps.onClickItem
+    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
+    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var dropContClassName = dropContProps.className; dropContProps.onClickItem; var restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
+    var isValueExist = value && value.label !== undefined && value.label !== '';
+    var filteredOptions = filterOptions(options || [], value.label);
+    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
     return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
-        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
+        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly },
+            label,
+            " Test")),
         React.createElement("div", { className: "group relative w-full" },
             React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
-                    setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
@@ -2773,8 +2822,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 +2876,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 +2893,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 +2967,7 @@ var PickerCalendar = function (_a) {
             setViewYearValue(date.getFullYear());
         }
         if (onDateChange) {
-            onDateChange(date);
+            onDateChange(dateToInputString$1(date));
         }
     };
     var handlePickerMode = function (mode) {
@@ -2948,17 +3007,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 +3070,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 +3084,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,124 +3118,84 @@ var monthMap = [
     'November',
     'December',
 ];
-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;
-    // State and Ref
-    var inputRef = React.useRef(null);
-    var wrapperRef = React.useRef(null);
-    var pickerRef = React.useRef(null);
-    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 })),
-        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 })))));
-}
-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 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, nullDisplay = _a.nullDisplay, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction", "nullDisplay"]);
+    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 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 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 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);
-        }
+    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, inputClassName: className, 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 || nullDisplay ? 'text-bia-black' : 'text-bia-coolgrey', " ").concat(className) }, value
+            ? displayDateFormatter(new Date(value))
+            : nullDisplay || 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 () {
-        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))));
+        // 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; _a.placeholder; var 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 = React.useRef(null);
+    var wrapperRef = React.useRef(null);
+    var pickerRef = React.useRef(null);
+    var _c = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
+    return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
+        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 })),
+        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: value, onDateChange: onChange, ref: pickerRef, minDate: minDate, maxDate: maxDate })))));
+}
+
 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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, stroke: fill, xmlns: "http://www.w3.org/2000/svg" },
@@ -3313,18 +3389,17 @@ var sizeConfig$3 = {
 };
 
 var InfoPanel = function (_a) {
-    var variant = _a.variant, color = _a.color, className = _a.className, textClassName = _a.textClassName;
+    var variant = _a.variant, color = _a.color, className = _a.className, children = _a.children;
     var sizeClass = sizeConfig$3[variant || 'container'];
     var colorClass = colorConfig$1[color || 'yellow'];
     var allClasses = "".concat(sizeClass, " ").concat(colorClass, " ").concat(className);
-    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) },
-        React.createElement(Text, { variant: "medium-text", extended: textClassName }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
+    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) }, children));
 };
 InfoPanel.defaultProps = {
     variant: 'container',
     color: 'yellow',
     className: '',
-    textClassName: '',
+    children: null,
 };
 
 function Modal(_a) {
@@ -3350,12 +3425,12 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
+        reactDom.createPortal(React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
             React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize), onClick: onClick },
                 React.createElement("div", { className: "bianic-modal-header flex justify-between" },
                     React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
                     React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, { size: 14 }), size: "tn", onClick: function () { return onClose(); } })),
-                React.createElement("div", { className: "bianic-modal-content flex w-full flex-col items-start gap-[20px]" }, rest.children))));
+                React.createElement("div", { className: "bianic-modal-content flex w-full flex-col items-start gap-[20px]" }, rest.children))), document.body));
     }
     return null;
 }
@@ -3411,7 +3486,7 @@ function PaginationBar(_a) {
     return (React.createElement("div", { className: "flex ".concat(positionConfig[position], " gap-[5px]") },
         React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage - 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
         showedPages.map(function (page) { return (React.createElement(Button, { key: page, variant: currentPage === page ? 'default' : 'subtle-link', size: size, type: "button", onClick: function () { return handlePageChange(page); }, className: "cursor-pointer ".concat(sizeConfig$2[size]), label: page.toString(), minWidth: buttonSizingStyle })); }),
-        React.createElement(Button, { variant: "subtle-link", size: "md", type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
+        React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
 }
 
 var activeConfig = {
@@ -3729,7 +3804,7 @@ var configTab = {
 };
 
 function Tab(_a) {
-    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size"]);
+    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, className = _a.className, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "className"]);
     var disabledKeyTab = disabled || active ? ' pointer-events-none' : '';
     var cursor;
     if (disabled) {
@@ -3750,8 +3825,9 @@ function Tab(_a) {
     var activeKeyTab = active
         ? 'group-disabled:text-bia-coolgrey-disabled text-primary-black'
         : 'text-bia-coolgrey group-hover:text-bia-coolgrey-hover group-active:text-bia-coolgrey-active group-disabled:text-bia-coolgrey-disabled';
+    var buttonClassName = "".concat(horizontalButtonStyle, " ").concat(disabledKeyTab, " ").concat(fit, " ").concat(className ? className : '');
     return (React.createElement("div", { className: "".concat(mode === 'horizontal' ? 'h-full' : 'w-full', " ").concat(cursor) },
-        React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "flex items-stretch justify-between ".concat(horizontalButtonStyle, " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
+        React.createElement("button", __assign({ type: "button", className: "flex items-stretch justify-between  group relative outline-none ".concat(buttonClassName), disabled: disabled }, rest),
             React.createElement("div", { className: "flex items-center justify-center ".concat(buttonContentStyle) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
                     React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },
@@ -4094,6 +4170,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;