bianic-ui 1.9.3 → 1.10.0

package/dist/esm/index.js

@@ -263,13 +263,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 = useState(initialState), isActive = _a[0], setIsActive = _a[1];
     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);
             }
         };
@@ -412,7 +419,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 ',
@@ -490,10 +497,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)
@@ -1481,8 +1488,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',
     },
 };
 
@@ -1549,12 +1556,12 @@ function Color() {
             tailwind: 'blue',
         },
         {
-            css: 'olympic',
-            tailwind: 'olympicblue',
+            css: 'crayola',
+            tailwind: 'crayola',
         },
         {
             css: 'sky',
-            tailwind: 'skyblue',
+            tailwind: 'sky',
         },
         {
             css: 'coolgrey',
@@ -1783,7 +1790,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]',
@@ -1839,13 +1846,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 = 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';
@@ -1884,7 +1891,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),
@@ -1911,7 +1918,7 @@ TextInput.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$b = {
+var sizeConfig$a = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1926,7 +1933,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 }),
@@ -1942,7 +1949,7 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$a = {
+var sizeConfig$9 = {
     md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
@@ -1965,7 +1972,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" },
@@ -1995,7 +2002,7 @@ TextArea.defaultProps = {
     value: '',
 };
 
-var sizeConfig$9 = {
+var sizeConfig$8 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -2009,7 +2016,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)),
@@ -2027,7 +2034,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]',
@@ -2038,7 +2045,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',
@@ -2056,7 +2063,7 @@ function CustomDropdownItem(_a) {
     var _f = 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 () { } },
@@ -2083,7 +2090,7 @@ function DefaultDropdownItem(_a) {
     var _g = 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 () { } },
@@ -2105,12 +2112,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 = 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), Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
+                    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 = useState(false), isHovered = _j[0], setIsHovered = _j[1];
+    var _k = 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 = useRef(null);
+    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 = 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 = 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 = useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2149,7 +2239,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 : '';
@@ -2160,6 +2250,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))));
 }
@@ -2174,7 +2276,7 @@ SelectInput.defaultProps = {
     setSelected: function () { },
 };
 
-var sizeConfig$6 = {
+var sizeConfig$5 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -2189,90 +2291,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 = 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), Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
-                    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 = useState(false), isHovered = _j[0], setIsHovered = _j[1];
-    var _k = 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 = useRef(null);
-    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 = useState(false), isOpen = _l[0], setIsOpen = _l[1];
     var _m = 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 = useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2368,11 +2393,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 () {
@@ -2383,7 +2407,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.") }))))),
@@ -2445,9 +2469,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 = {
@@ -2456,16 +2480,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) {
@@ -2505,6 +2535,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 = useState(modeMap[0]), pickerMode = _b[0], setPickerMode = _b[1];
+    var _c = 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 = useState(new Date(selectedDate || todayValue).getMonth()), viewMonthValue = _d[0], setViewMonthValue = _d[1]; // get the month of the selected date
+    var _e = useState(new Date(selectedDate || todayValue).getFullYear()), viewYearValue = _e[0], setViewYearValue = _e[1]; // get the year of the selected date
+    var _f = 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 = 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
+    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 = useRef(null);
+    var wrapperRef = useRef(null);
+    var pickerRef = 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 = useState(formattedValue), viewValue = _d[0], setViewValue = _d[1];
+    useRef(null);
+    var _e = 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
+    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" },
@@ -2967,8 +3434,8 @@ function ResizeableDiv(_a) {
     var container = useRef(null);
     var resizer = 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;
@@ -2982,12 +3449,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;
@@ -3021,13 +3488,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',
@@ -3488,4 +3955,4 @@ function Window(_a) {
         React.createElement("div", { className: "bianic-window-content flex w-full flex-col items-start gap-[20px] px-[20px] pb-[20px] text-primary-black" }, rest.children)));
 }
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };