bianic-ui 1.9.3 → 1.10.0

package/dist/cjs/index.js

@@ -265,13 +265,20 @@ var childrenElement = function (element) {
 var validUnion = function (value, union) {
     return union.includes(value) ? value : union[0];
 };
-var useDetectOutsideClick = function (ref, initialState, event) {
+var useDetectOutsideClick = function (ref, initialState, ignoreRef, event) {
     if (event === void 0) { event = 'click'; }
     var _a = React.useState(initialState), isActive = _a[0], setIsActive = _a[1];
     React.useEffect(function () {
         var pageClickEvent = function (event) {
             // If the active element exists and is clicked outside of
-            if (ref.current !== null && !ref.current.contains(event.target)) {
+            if (ignoreRef &&
+                ignoreRef.current &&
+                ignoreRef.current.contains(event.target)) {
+                console.log('enter');
+            }
+            else if (ref.current !== null &&
+                !ref.current.contains(event.target)) {
+                console.log('close');
                 setIsActive(!isActive);
             }
         };
@@ -414,7 +421,7 @@ var radiusConfig$1 = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$d = {
+var sizeConfig$c = {
     lg: 'py-[10.5px] h-[48px] flex items-center justify-center gap-[10px] text-size-md ',
     md: 'py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base ',
     sm: 'py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm ',
@@ -492,10 +499,10 @@ function Button(_a) {
     }
     var sizingRules;
     if (variant.includes('link')) {
-        sizingRules = "".concat(sizeConfig$d[validatedSize]);
+        sizingRules = "".concat(sizeConfig$c[validatedSize]);
     }
     else {
-        sizingRules = "".concat(sizeConfig$d[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
+        sizingRules = "".concat(sizeConfig$c[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
@@ -1483,8 +1490,8 @@ var colorConfig$1 = {
         active: 'bg-bia-verdantgreen-dark-40 text-primary-white',
     },
     blue: {
-        default: 'bg-bia-olympicblue hover:bg-bia-olympicblue-light-10 active:bg-bia-olympicblue-dark-10 text-primary-white disabled:bg-bia-olympicblue-dark-20 disabled:text-primary-white/50 disabled:cursor-default',
-        active: 'bg-bia-olympicblue-dark-10 text-primary-white',
+        default: 'bg-bia-crayola hover:bg-bia-crayola-light-10 active:bg-bia-crayola-dark-10 text-primary-white disabled:bg-bia-crayola-dark-20 disabled:text-primary-white/50 disabled:cursor-default',
+        active: 'bg-bia-crayola-dark-10 text-primary-white',
     },
 };
 
@@ -1551,12 +1558,12 @@ function Color() {
             tailwind: 'blue',
         },
         {
-            css: 'olympic',
-            tailwind: 'olympicblue',
+            css: 'crayola',
+            tailwind: 'crayola',
         },
         {
             css: 'sky',
-            tailwind: 'skyblue',
+            tailwind: 'sky',
         },
         {
             css: 'coolgrey',
@@ -1785,7 +1792,7 @@ MenuItem.defaultProps = {
     onClick: function () { },
 };
 
-var sizeConfig$c = {
+var sizeConfig$b = {
     md: {
         fieldSize: 'text-size-base p-2.5 font-[350] h-10',
         iconPosition: 'right-[10px]',
@@ -1841,13 +1848,13 @@ function PasswordIcon(_a) {
 }
 
 function TextInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, ref = _a.ref, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete", "ref"]);
     var isTransparent = variant.includes('transparent');
     var _r = React.useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
     var _t = isTransparent
-        ? __assign(__assign({}, sizeConfig$c[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$c[size].fieldSize +
-                " pe-[".concat(9 + sizeConfig$c[size].iconSize, "px]") }) : sizeConfig$c[size], iconSize = _t.iconSize, fieldSize = _t.fieldSize, iconPosition = _t.iconPosition;
+        ? __assign(__assign({}, sizeConfig$b[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$b[size].fieldSize +
+                " pe-[".concat(9 + sizeConfig$b[size].iconSize, "px]") }) : sizeConfig$b[size], iconSize = _t.iconSize, fieldSize = _t.fieldSize, iconPosition = _t.iconPosition;
     var borderStyle = isTransparent
         ? 'border-transparent bg-transparent' // customize border rule for transparent variant
         : 'border border-bia-grey-dark-10 bg-primary-white';
@@ -1886,7 +1893,7 @@ function TextInput(_a) {
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
         React.createElement("div", { className: "relative w-full" },
-            React.createElement("input", __assign({ 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 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), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete }, props)),
+            React.createElement("input", __assign({ 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 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), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
         (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs ".concat(descColor) },
             React.createElement("span", null, descText),
@@ -1913,7 +1920,7 @@ TextInput.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$b = {
+var sizeConfig$a = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1928,7 +1935,7 @@ var sizeUnion$4 = ['md', 'sm'];
 function Radio(_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
     var validatedSize = validUnion(size, sizeUnion$4);
-    var _f = sizeConfig$b[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    var _f = sizeConfig$a[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
             React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
@@ -1944,7 +1951,7 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$a = {
+var sizeConfig$9 = {
     md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
@@ -1967,7 +1974,7 @@ var ResizeIcon = function (_a) {
 function TextArea(_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, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, _e = _a.maxLength, maxLength = _e === void 0 ? undefined : _e, value = _a.value, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value", "readOnly", "autoComplete"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
-    var inputClass = sizeConfig$a[size].inputClass;
+    var inputClass = sizeConfig$9[size].inputClass;
     var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
     return (React.createElement("div", { className: "field-group flex w-full flex-col" },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold read-only:pointer-events-none" },
@@ -1997,7 +2004,7 @@ TextArea.defaultProps = {
     value: '',
 };
 
-var sizeConfig$9 = {
+var sizeConfig$8 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -2011,7 +2018,7 @@ var sizeConfig$9 = {
 var sizeUnion$3 = ['md', 'sm'];
 function Checkbox(_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, props = __rest(_a, ["disabled", "id", "size", "label", "onChange"]);
-    var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
+    var _e = sizeConfig$8[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
             React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
@@ -2029,7 +2036,7 @@ Checkbox.defaultProps = {
     onChange: function () { },
 };
 
-var sizeConfig$8 = {
+var sizeConfig$7 = {
     md: {
         searchSize: 'text-size-base p-2.5 font-[350] h-10',
         iconSize: 'right-[10px] text-[18px]',
@@ -2040,7 +2047,7 @@ var sizeConfig$8 = {
     },
 };
 
-var sizeConfig$7 = {
+var sizeConfig$6 = {
     md: {
         container: 'text-size-base font-[350] py-[3px] first:pt-[8px] last:pb-[8px]',
         item: 'min-h-[34px] p-2.5',
@@ -2058,7 +2065,7 @@ function CustomDropdownItem(_a) {
     var _f = React.useState(false), isHoveredSubMenu = _f[0], setIsHoveredSubMenu = _f[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _g = sizeConfig$7[size], containerClass = _g.container, item = _g.item;
+    var _g = sizeConfig$6[size], containerClass = _g.container, item = _g.item;
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "relative w-full focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
@@ -2085,7 +2092,7 @@ function DefaultDropdownItem(_a) {
     var _g = React.useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _h = sizeConfig$7[size], containerClass = _h.container, item = _h.item;
+    var _h = sizeConfig$6[size], containerClass = _h.container, item = _h.item;
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "relative w-full focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
@@ -2107,12 +2114,95 @@ DefaultDropdownItem.defaultProps = {
     caption: '',
 };
 
+var containerSizeConfig = {
+    sm: 'min-w-[72px]',
+    md: 'min-w-[96px]',
+};
+var itemSizeConfig = {
+    sm: 'min-h-[30px] border-y-[2px] border-bia-white',
+    md: 'min-h-[40px] border-y-[3px] border-bia-white',
+};
+var fontConfig = {
+    sm: 'text-[12px] font-[400]',
+    md: 'text-[14px] font-[350]',
+};
+
+var DropdownContainer = React.forwardRef(function DropdownContainer(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.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 0 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
+    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 handleClickDrpdownItem = function (e, val) {
+        onClickItem(e, val);
+        onClose();
+    };
+    return (open && (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(); } })),
+        React.createElement("div", __assign({ style: {
+                zIndex: zIndex + 10, // Ensure dropdown is above overlay
+            }, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
+                    React.cloneElement(child, {
+                        onClose: function () { return onClose(); },
+                        size: size,
+                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
+                        zIndex: zIndex + 10,
+                    })
+                : child;
+        })))));
+});
+DropdownContainer.defaultProps = {
+    isTopFlat: false,
+};
+
+function DropdownItem(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.onClickItem, onClickItem = _c === void 0 ? function () { } : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.value, value = _f === void 0 ? '' : _f, content = _a.content, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
+    var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
+    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var fontClass = fontConfig[size] || fontConfig['md'];
+    var itemSizeClass = itemSizeConfig[size] || itemSizeConfig['md'];
+    var itemClass = "".concat(itemSizeClass, " ").concat(fontClass, " ").concat(className);
+    var chevronSize = size === 'sm' ? 14 : 18;
+    var DropdownContRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        if (DropdownContRef.current) {
+            // Adjust dropdown position to prevent overflow on the right.
+            var MenuContRect = (_a = DropdownContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
+            var innerWindow = window.innerWidth;
+            if (RectRight > innerWindow)
+                setIsLeft(true);
+            else
+                setIsLeft(false);
+        }
+    }, [isHovered]);
+    var translateClass = isLeft
+        ? 'left-0 -translate-x-full'
+        : 'right-0 translate-x-full';
+    var currentZIndex = zIndex + 10;
+    return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[5px] last:rounded-b-radius-sm last:pb-[5px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        React.createElement("button", __assign({ className: "relative flex w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
+                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
+            }, onClick: function (e) {
+                onClickItem(e, value);
+            }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
+            content,
+            React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
+        children && (React.createElement(DropdownContainer, { 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), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
+}
+DropdownItem.defaultProps = {
+    className: '',
+    onClickItem: function () { },
+};
+
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected, _e = _a.onClickDropdown, onClickDropdown = _e === void 0 ? function () { } : _e, props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown"]);
-    var _f = React.useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
+    var _k = React.useState(false), isOpen = _k[0], setIsOpen = _k[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _g = sizeConfig$8[validatedSize], searchSize = _g.searchSize, iconSize = _g.iconSize;
+    var _l = sizeConfig$7[validatedSize], searchSize = _l.searchSize, iconSize = _l.iconSize;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2151,7 +2241,7 @@ function SelectInput(_a) {
         React.createElement("div", { className: "group relative w-full" },
             React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
-            isOpen && (React.createElement("div", { className: "absolute z-10 w-full overflow-y-auto rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
+            children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full overflow-y-auto rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
                 var optionLabel = isObjectOptionItem ? option.label : option;
                 var optionCaption = isObjectOptionItem ? option.caption : '';
@@ -2162,6 +2252,18 @@ function SelectInput(_a) {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
+            }))),
+            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(dropContClassName) }, restDropContProps), React.Children.map(children, function (child) {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, {
+                        isSelected: selected && selected.id === child.props.value.id,
+                        onClick: function () {
+                            setSelected(child.props.value);
+                            setIsOpen(false);
+                        },
+                    });
+                }
+                return child;
             })))),
         descText && (React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText))));
 }
@@ -2176,7 +2278,7 @@ SelectInput.defaultProps = {
     setSelected: function () { },
 };
 
-var sizeConfig$6 = {
+var sizeConfig$5 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -2191,90 +2293,13 @@ var sizeConfig$6 = {
     },
 };
 
-var sizeConfig$5 = {
-    sm: 'min-w-[72px]',
-    md: 'min-w-[96px]',
-};
-var fontConfig = {
-    sm: 'text-[12px] font-[400]',
-    md: 'text-[14px] font-[350]',
-};
-
-var DropdownContainer = React.forwardRef(function DropdownContainer(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.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 0 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
-    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
-    var sizeClass = sizeConfig$5[size] || sizeConfig$5['md'];
-    var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
-    var handleClickDrpdownItem = function (e, val) {
-        onClickItem(e, val);
-        onClose();
-    };
-    return (open && (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(); } })),
-        React.createElement("div", __assign({ style: {
-                zIndex: zIndex + 10, // Ensure dropdown is above overlay
-            }, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), React.Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
-                    React.cloneElement(child, {
-                        onClose: function () { return onClose(); },
-                        size: size,
-                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
-                        zIndex: zIndex + 10,
-                    })
-                : child;
-        })))));
-});
-DropdownContainer.defaultProps = {
-    isTopFlat: false,
-};
-
-function DropdownItem(_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.onClickItem, onClickItem = _c === void 0 ? function () { } : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.value, value = _f === void 0 ? '' : _f, content = _a.content, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
-    var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
-    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
-    var fontClass = fontConfig[size] || fontConfig['md'];
-    var itemClass = "".concat(fontClass, " ").concat(className);
-    var chevronSize = size === 'sm' ? 14 : 18;
-    var DropdownContRef = React.useRef(null);
-    React.useEffect(function () {
-        var _a;
-        if (DropdownContRef.current) {
-            // Adjust dropdown position to prevent overflow on the right.
-            var MenuContRect = (_a = DropdownContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
-            var innerWindow = window.innerWidth;
-            if (RectRight > innerWindow)
-                setIsLeft(true);
-            else
-                setIsLeft(false);
-        }
-    }, [isHovered]);
-    var translateClass = isLeft
-        ? 'left-0 -translate-x-full'
-        : 'right-0 translate-x-full';
-    var currentZIndex = zIndex + 10;
-    return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("button", __assign({ className: "relative flex h-full w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
-                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
-            }, onClick: function (e) {
-                onClickItem(e, value);
-            }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
-            content,
-            React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
-        children && (React.createElement(DropdownContainer, { 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), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
-}
-DropdownItem.defaultProps = {
-    className: '',
-    onClickItem: function () { },
-};
-
 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;
     var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
     var _m = React.useState(value.label || ''), searchTerm = _m[0], setSearchTerm = _m[1];
-    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var _o = sizeConfig$5[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
     var dropContClassName = dropContProps.className, restDropContProps = __rest(dropContProps, ["className"]);
+    var isValueExist = value && value.label !== undefined && value.label !== '';
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2370,11 +2395,10 @@ function LiveSearch(_a) {
                     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 group-hover:hidden ".concat(iconClass) },
-                React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
-            React.createElement("div", { className: "absolute inset-y-0 z-20 hidden pl-3 group-hover:block ".concat(iconClass) },
-                React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
-                    React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } }))),
+            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
+                !isValueExist && (React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
+                isValueExist && (React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
+                    React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } })))),
             children === undefined && isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
                 return option.custom ? (React.createElement(CustomDropdownItem, { size: size, isSelected: isSelected, className: dropContClassName, onClick: function () {
@@ -2385,7 +2409,7 @@ function LiveSearch(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(dropContClassName) }, restDropContProps), hasFilteredResults
+            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, zIndex: 10, className: "bianic-livesearch-dropdown absolute w-full overflow-hidden bg-white shadow-lg" }, restDropContProps), hasFilteredResults
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
@@ -2447,9 +2471,9 @@ var roundedConfig = {
     tn: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
 };
 var sizeConfig$3 = {
-    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px] ',
-    md: 'text-size-base leading-[21px] px-[11px] py-[9px] ',
-    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px] ',
+    lg: 'text-size-md leading-[23.94px] px-[13px] py-[11px] ',
+    md: 'text-size-base leading-[21px] px-[11px] py-[8.5px] ',
+    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[6px] ',
     tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px] ',
 };
 var minWidthConfig = {
@@ -2458,16 +2482,22 @@ var minWidthConfig = {
     sm: 'min-w-[72px]',
     tn: 'min-w-[64px]',
 };
+var minHeightConfig = {
+    lg: 'min-h-[48px]',
+    md: 'min-h-[40px]',
+    sm: 'min-h-[30px]',
+    tn: 'min-h-[22px]',
+};
 
 function SegmentButtonItem(_a) {
-    var _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, _c = _a.isfitContent, isfitContent = _c === void 0 ? false : _c, onClick = _a.onClick;
+    var className = _a.className, _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, _c = _a.isfitContent, isfitContent = _c === void 0 ? false : _c, onClick = _a.onClick;
     var isSelected = selected ? 'selected' : 'notSelected';
     var sizingStyle = isfitContent
-        ? "".concat(sizeConfig$3[size])
-        : "".concat(sizeConfig$3[size], " ").concat(minWidthConfig[size]);
+        ? "".concat(sizeConfig$3[size], " ").concat(minHeightConfig[size])
+        : "".concat(sizeConfig$3[size], " ").concat(minWidthConfig[size], " ").concat(minHeightConfig[size]);
     var radiusStyle = "".concat(roundedConfig[size]);
     var selectedStyle = "".concat(isSelectedConfig[isSelected]);
-    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "group:last:border-l-0 border-[1px] border-l-0 border-bia-grey-dark-10 first:border-l-[1px] focus-visible:z-50 focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-1 focus-visible:outline-bia-blue-light-50 disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 ".concat(selectedStyle, " ").concat(radiusStyle, " ").concat(sizingStyle) }, children));
+    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "group:last:border-l-0 flex items-center justify-center border-[1px] border-l-0 border-bia-grey-dark-10 first:border-l-[1px] focus-visible:z-50 focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-1 focus-visible:outline-bia-blue-light-50 disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 ".concat(selectedStyle, " ").concat(radiusStyle, " ").concat(sizingStyle, " ").concat(className) }, children));
 }
 
 function SegmentButtonGroup(_a) {
@@ -2507,6 +2537,443 @@ var FormGroupLabel = function (_a) {
         childrenElement(iconRight)));
 };
 
+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
+var PickerCalendar = function (_a) {
+    var selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, ref = _a.ref;
+    // Constants
+    var daysMap = [
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+        'Sunday',
+    ];
+    var monthMap = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ];
+    var modeMap = ['date', 'year', 'month'];
+    // Mode Controller
+    var _b = React.useState(modeMap[0]), pickerMode = _b[0], setPickerMode = _b[1];
+    var _c = React.useState(''), prevMode = _c[0], setPrevMode = _c[1];
+    // styling constants and functions
+    var chevronButtonStyle = 'text-bia-coolgrey';
+    var selectedDateStyle = function (date, dateSelected) {
+        var isSelected = checkDateEquals(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';
+        }
+        else if (!isSelected && isToday) {
+            return 'bg-bia-blue-pastel text-bia-black rounded-full border border-bia-blue-light-50';
+        }
+        else {
+            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) {
+            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';
+        }
+    };
+    // 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) {
+            setViewMonthValue(0);
+            setViewYearValue(viewYearValue + 1);
+            setViewDecadeValue(viewYearValue + 1);
+        }
+        else {
+            setViewMonthValue(viewMonthValue + 1);
+        }
+    };
+    var handleViewNextYear = function () {
+        setViewYearValue(function (oldYear) { return oldYear + 1; });
+        setViewDecadeValue(function (oldYear) { return oldYear + 1; });
+    };
+    var handleViewPrevYear = function () {
+        setViewYearValue(function (oldYear) { return oldYear - 1; });
+        setViewDecadeValue(function (oldYear) { return oldYear - 1; });
+    };
+    var handleViewPrevMonth = function () {
+        if (viewMonthValue === 0) {
+            setViewMonthValue(11);
+            setViewYearValue(viewYearValue - 1);
+            setViewDecadeValue(viewYearValue - 1);
+        }
+        else {
+            setViewMonthValue(viewMonthValue - 1);
+        }
+    };
+    var handleNextAction = function () {
+        if (pickerMode === 'date') {
+            handleViewNextMonth();
+        }
+        else if (pickerMode === 'month') {
+            handleViewNextYear();
+        }
+        else {
+            setViewDecadeValue(function (oldvalue) { return oldvalue + 10; });
+        }
+    };
+    var handlePrevAction = function () {
+        if (pickerMode === 'date') {
+            handleViewPrevMonth();
+        }
+        else if (pickerMode === 'month') {
+            handleViewPrevYear();
+        }
+        else {
+            setViewDecadeValue(function (oldvalue) { return oldvalue - 10; });
+        }
+    };
+    var handleSetMonth = function (monthNumber) {
+        setViewMonthValue(monthNumber);
+        setPickerMode('date');
+    };
+    var handleSetYear = function (year, index) {
+        setViewYearValue(year);
+        setPickerMode(prevMode);
+    };
+    var handleSetSelectedDate = function (date) {
+        if (date.getMonth() !== viewMonthValue) {
+            // if the date is not in the current view month, update the view month and year
+            setViewMonthValue(date.getMonth());
+            setViewYearValue(date.getFullYear());
+        }
+        if (onDateChange) {
+            onDateChange(date);
+        }
+    };
+    var handlePickerMode = function (mode) {
+        setPickerMode(function (oldvalue) {
+            setPrevMode(oldvalue);
+            return mode;
+        });
+    };
+    // View Date Logic
+    var _d = React.useState(new Date(selectedDate || todayValue).getMonth()), viewMonthValue = _d[0], setViewMonthValue = _d[1]; // get the month of the selected date
+    var _e = React.useState(new Date(selectedDate || todayValue).getFullYear()), viewYearValue = _e[0], setViewYearValue = _e[1]; // get the year of the selected date
+    var _f = React.useState(new Date(selectedDate || todayValue).getFullYear()), viewDecadeValue = _f[0], setViewDecadeValue = _f[1]; // get the year for decaderange
+    // Month view logic
+    var monthStartDay = new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01")).getDay() === 0
+        ? 6
+        : new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01")).getDay() - 1;
+    var monthTotalDate = new Date(viewYearValue, viewMonthValue + 1, 0).getDate(); // get total days in the month
+    var monthCalenderView = monthTotalDate + monthStartDay > 35 ? 42 : 35; // for 5 or 6 weeks view for the calendar
+    var viewFirstDate = new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01"));
+    viewFirstDate.setDate(viewFirstDate.getDate() - monthStartDay); // get the first date of the view
+    var viewLastDate = new Date(viewFirstDate);
+    viewLastDate.setDate(viewLastDate.getDate() + monthCalenderView - 1); // get the last date of the view
+    // Generate the view days array
+    var _g = React.useState([]), displayDays = _g[0], setDisplayDays = _g[1];
+    function getDecadeRange(year) {
+        // Calculate the start of the decade
+        var startOfDecade = Math.floor(year / 10) * 10;
+        // Calculate the end of the decade
+        var endOfDecade = startOfDecade + 9;
+        // Create an array to hold the years in the decade
+        var decadeRange = [];
+        for (var i = startOfDecade; i <= endOfDecade + 2; i++) {
+            decadeRange.push(i);
+        }
+        return decadeRange;
+    }
+    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" }, 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" }, 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))); })));
+    // useEffect to update displayDays when viewMonthValue or viewYearValue changes
+    React.useEffect(function () {
+        var tempDisplayDays = [];
+        for (var d = viewFirstDate; d <= viewLastDate; d.setDate(d.getDate() + 1)) {
+            tempDisplayDays.push(new Date(d));
+        }
+        setDisplayDays(tempDisplayDays);
+    }, [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(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'); } },
+                    React.createElement(Text, { variant: "normal-text-semibold" },
+                        monthMap[viewMonthValue],
+                        ' ')),
+                React.createElement("button", { className: "".concat(pickerMode === 'date' || pickerMode === 'month' ? '' : 'hidden'), onClick: function () { return handlePickerMode('year'); } },
+                    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(TbChevronRight, { size: 18 }))),
+        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid flex flex-col " },
+            dateDisplay,
+            monthDisplay,
+            yearDisplay)));
+};
+
+var monthMap = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+function DatePicker(_a) {
+    var value = _a.value, onChange = _a.onChange;
+    // State and Ref
+    var inputRef = React.useRef(null);
+    var wrapperRef = React.useRef(null);
+    var pickerRef = React.useRef(null);
+    var _b = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _b[0], setIsPickerOpen = _b[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: "YYYY-MM-DD", value: value, onChange: onChange, buttonAction: function () { return setIsPickerOpen(true); }, setIsActive: setIsPickerOpen })),
+        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, buttonAction = _a.buttonAction, props = __rest(_a, ["className", "value", "isActive", "setIsActive", "label", "id", "size", "onChange", "required", "buttonAction"]);
+    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 _d = React.useState(formattedValue), viewValue = _d[0], setViewValue = _d[1];
+    React.useRef(null);
+    var _e = React.useState(0); _e[0]; _e[1];
+    var _f = styleConfig['text'], fieldStyle = _f.fieldStyle;
+    var _g = sizeConfig$b[size]; _g.iconSize; var fieldSize = _g.fieldSize, iconPosition = _g.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' : '';
+    // Don't remove this, it will be used later
+    // Helper function to format the cleaned input with specific group sizes
+    // const formatInput = (cleanedValue: string, separator: string = '-') => {
+    //   let formattedValue = ''
+    //   // Define the group lengths: 4, 2, 2
+    //   const groupLengths = [4, 2, 2]
+    //   let currentIndex = 0
+    //   for (let i = 0; i < groupLengths.length; i++) {
+    //     const groupLength = groupLengths[i]
+    //     const nextSegment = cleanedValue.substring(
+    //       currentIndex,
+    //       currentIndex + groupLength
+    //     )
+    //     if (nextSegment.length > 0) {
+    //       formattedValue += nextSegment
+    //       currentIndex += groupLength
+    //       // Add separator if there are more groups to follow and we have enough characters
+    //       if (i < groupLengths.length - 1 && currentIndex < cleanedValue.length) {
+    //         formattedValue += separator
+    //       }
+    //     } else {
+    //       // Stop if there are no more characters for the current group
+    //       break
+    //     }
+    //   }
+    //   return formattedValue
+    // }
+    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
+        }
+    };
+    // Handle input change will develop later don't remove
+    // const handleChange = (event) => {
+    //   const inputElement = event.target
+    //   const rawValue = inputElement.value
+    //   const currentCursorPos = inputElement.selectionStart
+    //   const cleaned = cleanInput(rawValue)
+    //   // Max total digits for XXXX-XX-XX is 4 + 2 + 2 = 8
+    //   const maxDigits = 8
+    //   const truncatedCleaned = cleaned.substring(0, maxDigits)
+    //   const formatted = formatInput(truncatedCleaned)
+    //   // --- Cursor Position Adjustment Logic ---
+    //   let newCursorPos = currentCursorPos
+    //   const prevFormattedLength = viewValue.length // Length of the string *before* update
+    //   const currentFormattedLength = formatted.length // Length of the string *after* update
+    //   // If text was added and formatted length increased
+    //   if (currentFormattedLength > prevFormattedLength) {
+    //     // Count how many separators are now *before* the cursor in the new string
+    //     // We'll compare the raw cursor position with the formatted string to adjust
+    //     let separatorCountBeforeCursor = 0
+    //     let originalCleanedValue = cleanInput(viewValue) // Clean value before this change
+    //     // If a character was inserted, estimate new cursor position
+    //     if (cleaned.length > originalCleanedValue.length) {
+    //       // Count separators in the *new* formatted string up to the currentCursorPos
+    //       for (let i = 0; i < currentCursorPos; i++) {
+    //         if (formatted.charAt(i) === '-') {
+    //           separatorCountBeforeCursor++
+    //         }
+    //       }
+    //       newCursorPos = currentCursorPos + separatorCountBeforeCursor
+    //     } else {
+    //       // If characters were deleted (backspace/delete)
+    //       newCursorPos = currentCursorPos
+    //       // More sophisticated logic for backspace/delete on separators can go here.
+    //       // For example, if you backspace a digit and it causes a separator to disappear,
+    //       // the cursor might need to jump back an extra position.
+    //       // This basic setup often works acceptably for most cases.
+    //     }
+    //   } else {
+    //     // If text was deleted or no change in length
+    //     newCursorPos = currentCursorPos
+    //   }
+    //   const handleKeyDown = (event) => {
+    //     if (event.key === 'Enter') {
+    //       // Prevent default form submission if the input is inside a <form>
+    //       // event.preventDefault();
+    //     }
+    //   }
+    //   setViewValue(formatted)
+    //   setLastCursorPos(newCursorPos)
+    // }
+    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);
+        }
+    };
+    // Will Develop later
+    // useEffect to set cursor position after render
+    // useEffect(() => {
+    //   if (inputRef.current) {
+    //     inputRef.current.setSelectionRange(lastCursorPos, lastCursorPos)
+    //   }
+    // }, [viewValue, lastCursorPos]) // Re-run when viewValue or lastCursorPos changes
+    React.useEffect(function () {
+        setViewValue(formattedValue);
+    }, [value]);
+    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" },
+            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 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, onFocus: function () {
+                    setIsActive && setIsActive(true);
+                    setViewValue(editDateFormatter(value));
+                }, onChange: handleChange, 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-[18px] ".concat(iconPosition) },
+                React.createElement("button", { className: "bianic-datepicker-toggle-button", onClick: function () {
+                        buttonAction && buttonAction();
+                    } },
+                    React.createElement(TbCalendar, null))))));
+};
+
 var Node = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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" },
@@ -2969,8 +3436,8 @@ function ResizeableDiv(_a) {
     var container = React.useRef(null);
     var resizer = React.useRef(null);
     var handleResize = function (e) {
-        var mouseY = e.pageY;
-        var mouseX = e.pageX;
+        var mouseY = e.clientY;
+        var mouseX = e.clientX;
         var divBottom = container.current.getBoundingClientRect().bottom;
         var divLeft = container.current.getBoundingClientRect().left;
         var divTop = container.current.getBoundingClientRect().top;
@@ -2984,12 +3451,12 @@ function ResizeableDiv(_a) {
                     container.current.style.height = "".concat(height, "px");
                 break;
             case 'right':
-                width = mouseX + divLeft;
+                width = mouseX - divLeft;
                 if (width > 9)
                     container.current.style.width = "".concat(width, "px");
                 break;
             case 'bottom':
-                height = mouseY + divTop;
+                height = mouseY - divTop;
                 if (height > 9)
                     container.current.style.height = "".concat(height, "px");
                 break;
@@ -3023,13 +3490,13 @@ function ResizeableDiv(_a) {
             minWidth: minimumWidth,
             minHeight: minimumHeight,
         } },
-        React.createElement("div", { className: "h-full w-full ".concat(className) }, children),
-        React.createElement("div", { className: "group absolute z-10 flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
+        React.createElement("div", { className: "group peer absolute z-10 flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
                 window.addEventListener('mousemove', handleResize);
                 window.addEventListener('mouseup', stopResize);
             }, role: "button" },
             React.createElement("div", { className: "flex h-[9px] w-[25px] items-center justify-center rounded-radius-full border border-bia-grey-light-10 bg-primary-white opacity-20 group-hover:opacity-100 group-active:bg-bia-coolgrey-light-90 group-active:opacity-100 ".concat(thumbClass) },
-                React.createElement(TbDots, { className: "text-bia-grey-light-30" })))));
+                React.createElement(TbDots, { className: "text-bia-grey-light-30" }))),
+        React.createElement("div", { className: "h-full w-full peer-active:select-none ".concat(className) }, children)));
 }
 ResizeableDiv.defaultProps = {
     position: 'left',
@@ -3523,6 +3990,7 @@ exports.ButtonApp = ButtonApp;
 exports.Checkbox = Checkbox;
 exports.Color = Color;
 exports.ContextualButton = ContextualButton;
+exports.DatePicker = DatePicker;
 exports.Display = Display;
 exports.Divider = Divider;
 exports.DropdownContainer = DropdownContainer;