@mahatisystems/mahati-ui-components 1.2.1 → 1.3.2

package/dist/index.js

@@ -154,6 +154,13 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = function(cb, mod) {
+    return function __require() {
+        return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = {
+            exports: {}
+        }).exports, mod), mod.exports;
+    };
+};
 var __export = function(target, all) {
     for(var name in all)__defProp(target, name, {
         get: all[name],
@@ -206,6 +213,60 @@ var __toCommonJS = function(mod) {
         value: true
     }), mod);
 };
+// src/assets/icons/check-mark_1.png
+var require_check_mark_1 = __commonJS({
+    "src/assets/icons/check-mark_1.png": function(exports2, module2) {
+        module2.exports = "./check-mark_1-6GNY6HFY.png";
+    }
+});
+// src/assets/icons/check-mark_2.png
+var require_check_mark_2 = __commonJS({
+    "src/assets/icons/check-mark_2.png": function(exports2, module2) {
+        module2.exports = "./check-mark_2-YWM2KQA2.png";
+    }
+});
+// src/assets/icons/danger_1.png
+var require_danger_1 = __commonJS({
+    "src/assets/icons/danger_1.png": function(exports2, module2) {
+        module2.exports = "./danger_1-LUIFNS2J.png";
+    }
+});
+// src/assets/icons/danger_2.png
+var require_danger_2 = __commonJS({
+    "src/assets/icons/danger_2.png": function(exports2, module2) {
+        module2.exports = "./danger_2-YTNTGWQA.png";
+    }
+});
+// src/assets/icons/danger_1_1.png
+var require_danger_1_1 = __commonJS({
+    "src/assets/icons/danger_1_1.png": function(exports2, module2) {
+        module2.exports = "./danger_1_1-PHLDGYEA.png";
+    }
+});
+// src/assets/icons/notification_1.png
+var require_notification_1 = __commonJS({
+    "src/assets/icons/notification_1.png": function(exports2, module2) {
+        module2.exports = "./notification_1-K2I7DVDH.png";
+    }
+});
+// src/assets/icons/notification_2.png
+var require_notification_2 = __commonJS({
+    "src/assets/icons/notification_2.png": function(exports2, module2) {
+        module2.exports = "./notification_2-KFI6MN7T.png";
+    }
+});
+// src/assets/icons/close.png
+var require_close = __commonJS({
+    "src/assets/icons/close.png": function(exports2, module2) {
+        module2.exports = "./close-EEDOIEDC.png";
+    }
+});
+// src/assets/icons/close_copy_1.png
+var require_close_copy_1 = __commonJS({
+    "src/assets/icons/close_copy_1.png": function(exports2, module2) {
+        module2.exports = "./close_copy_1-PFFNUORV.png";
+    }
+});
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -257,6 +318,9 @@ __export(index_exports, {
     MahatiTableTailwind: function() {
         return Table2;
     },
+    MahatiToastMessage: function() {
+        return ToastMessage;
+    },
     MahatiTooltip: function() {
         return Tooltip;
     }
@@ -3005,8 +3069,318 @@ var Calendar = function(param) {
     })), isOpen && calendarContent);
 };
 Calendar.displayName = "Calendar";
-// src/components/Dropdown.tsx
+// src/components/ToastMessage.tsx
 var import_react12 = __toESM(require("react"));
+var cn5 = function() {
+    for(var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++){
+        values[_key] = arguments[_key];
+    }
+    return values.filter(Boolean).join(" ");
+};
+var cnArr = function(values) {
+    return values.filter(Boolean).join(" ");
+};
+var assetSrc = function(m) {
+    if (typeof m === "string") return m;
+    var anyM = m;
+    if (typeof (anyM === null || anyM === void 0 ? void 0 : anyM.src) === "string") return anyM.src;
+    var d = anyM === null || anyM === void 0 ? void 0 : anyM.default;
+    if (typeof d === "string") return d;
+    if (typeof (d === null || d === void 0 ? void 0 : d.src) === "string") return d.src;
+    return "";
+};
+var checkMarkSolid = require_check_mark_1();
+var checkMarkTransparent = require_check_mark_2();
+var dangerSolid = require_danger_1();
+var dangerTransparent = require_danger_2();
+var warningTransparent = require_danger_1_1();
+var notificationSolid = require_notification_1();
+var notificationTransparent = require_notification_2();
+var closeSolid = require_close();
+var closeTransparent = require_close_copy_1();
+var presetFor = function(type) {
+    var commonContainer = "w-[min(92vw,420px)] md:w-[325px] rounded-[12px] shadow-[0_4px_12px_0_rgba(0,0,0,0.08)]";
+    switch(type){
+        case "Success":
+            return {
+                container: "".concat(commonContainer, " h-[70px]"),
+                bgSolid: "bg-[linear-gradient(90deg,rgba(40,167,69,1)_0%,rgba(58,208,125,1)_100%)]",
+                stripBg: "bg-[linear-gradient(90deg,rgba(40,167,69,1)_22.5%,rgba(58,208,125,1)_130%)]",
+                stripTitleColor: "text-[rgba(40,167,69,1)]"
+            };
+        case "Error":
+            return {
+                container: "".concat(commonContainer, " h-[70px]"),
+                bgSolid: "bg-[linear-gradient(90deg,rgba(220,53,69,1)_0%,rgba(183,28,28,1)_100%)]",
+                stripBg: "bg-[linear-gradient(90deg,rgba(220,53,69,1)_22.5%,rgba(183,28,28,1)_130%)]",
+                stripTitleColor: "text-[rgba(220,53,69,1)]"
+            };
+        case "Warning":
+            return {
+                container: "".concat(commonContainer, " h-[70px]"),
+                bgSolid: "bg-[linear-gradient(90deg,rgba(245,158,11,1)_0%,rgba(255,191,92,1)_100%)]",
+                stripBg: "bg-[linear-gradient(90deg,rgba(245,158,11,1)_22.5%,rgba(255,191,92,1)_130%)]",
+                stripTitleColor: "text-[rgba(245,158,11,1)]"
+            };
+        case "Notification":
+            return {
+                container: "".concat(commonContainer, " h-[70px]"),
+                bgSolid: "bg-[linear-gradient(90deg,rgba(23,97,163,1)_0%,rgba(77,175,131,1)_100%)]",
+                stripBg: "bg-[linear-gradient(90deg,rgba(23,97,163,1)_22.5%,rgba(77,175,131,1)_130%)]",
+                stripTitleColor: "text-[rgba(23,97,163,1)]"
+            };
+        case "LiquidUI":
+            return {
+                container: "".concat(commonContainer, " h-[70px]"),
+                bgSolid: "bg-[linear-gradient(90deg,rgba(16,185,129,1)_0%,rgba(59,130,246,1)_100%)]",
+                stripBg: "bg-[linear-gradient(90deg,rgba(16,185,129,1)_22.5%,rgba(59,130,246,1)_130%)]",
+                stripTitleColor: "text-[rgba(16,185,129,1)]"
+            };
+        case "Action":
+            return {
+                container: "".concat(commonContainer, " h-[110px]"),
+                bgSolid: "bg-[linear-gradient(90deg,rgba(139,92,246,1)_0%,rgba(168,85,247,1)_100%)]",
+                stripBg: "bg-[linear-gradient(90deg,rgba(139,92,246,1)_22.5%,rgba(168,85,247,1)_130%)]",
+                stripTitleColor: "text-[rgba(139,92,246,1)]"
+            };
+        default:
+            return {
+                container: "".concat(commonContainer, " h-[70px]"),
+                bgSolid: "bg-[linear-gradient(90deg,rgba(245,158,11,1)_0%,rgba(255,191,92,1)_100%)]",
+                stripBg: "bg-[linear-gradient(90deg,rgba(245,158,11,1)_22.5%,rgba(255,191,92,1)_130%)]",
+                stripTitleColor: "text-[rgba(245,158,11,1)]"
+            };
+    }
+};
+var titleForType = function(type) {
+    switch(type){
+        case "LiquidUI":
+            return "Liquid UI";
+        case "Action":
+            return "Confirmation";
+        default:
+            return type;
+    }
+};
+var iconFor = function(type, background) {
+    var solid = background === "solid";
+    switch(type){
+        case "Success":
+            return assetSrc(solid ? checkMarkSolid : checkMarkTransparent);
+        case "Error":
+            return assetSrc(solid ? dangerSolid : dangerTransparent);
+        case "Warning":
+            return assetSrc(solid ? dangerSolid : warningTransparent);
+        case "Notification":
+            return assetSrc(solid ? notificationSolid : notificationTransparent);
+        case "LiquidUI":
+            return assetSrc(checkMarkSolid);
+        case "Action":
+            return assetSrc(checkMarkSolid);
+        default:
+            return assetSrc(checkMarkSolid);
+    }
+};
+var closeIconFor = function(background) {
+    return assetSrc(background === "solid" ? closeSolid : closeTransparent);
+};
+var ToastItem = function(param) {
+    var toast = param.toast, onClose = param.onClose;
+    var _toast_actions, _toast_actions1;
+    var _ref = _sliced_to_array((0, import_react12.useState)(false), 2), isExiting = _ref[0], setIsExiting = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react12.useState)(false), 2), hovered = _ref1[0], setHovered = _ref1[1];
+    var hasActions = !!(toast.actions && toast.actions.length > 0);
+    var preset = (0, import_react12.useMemo)(function() {
+        return presetFor(toast.type);
+    }, [
+        toast.type
+    ]);
+    var _toast_background;
+    var background = (_toast_background = toast.background) !== null && _toast_background !== void 0 ? _toast_background : "solid";
+    var _toast_message;
+    var rawMessage = (_toast_message = toast.message) !== null && _toast_message !== void 0 ? _toast_message : "";
+    var hasMessage = rawMessage.trim().length > 0;
+    var handleClose = function() {
+        setIsExiting(true);
+        setTimeout(function() {
+            return onClose(toast.id);
+        }, 300);
+    };
+    var handleAction = function(action) {
+        action === null || action === void 0 ? void 0 : action();
+        handleClose();
+    };
+    (0, import_react12.useEffect)(function() {
+        if (toast.duration && toast.duration > 0 && !hovered && !hasActions) {
+            var t = setTimeout(function() {
+                return handleClose();
+            }, toast.duration);
+            return function() {
+                return clearTimeout(t);
+            };
+        }
+        return;
+    }, [
+        toast.duration,
+        hovered,
+        hasActions
+    ]);
+    var titleBottomClass = hasActions ? "bottom-[78px]" : "bottom-[33px]";
+    var messageBottomClass = hasActions ? "bottom-[52px]" : "bottom-[16px]";
+    var containerBgClass = background === "solid" ? preset.bgSolid : "bg-[rgba(255,255,255,1)]";
+    var titleTextClass = background === "transparent" ? preset.stripTitleColor : "text-[rgba(255,255,255,1)]";
+    var messageTextClass = background === "transparent" ? "text-[rgba(0,0,0,1)]" : "text-[rgba(255,255,255,1)]";
+    var _toast_classNames;
+    var slots = (_toast_classNames = toast.classNames) !== null && _toast_classNames !== void 0 ? _toast_classNames : {};
+    var titleRight = "right-[80px] md:right-[140px]";
+    var messageRight = "right-[70px] md:right-[94px]";
+    var closeLeft = "left-[calc(100%-36px)] md:left-[289px]";
+    var baseClass = cnArr([
+        "relative flex overflow-hidden border border-transparent transition-all duration-300",
+        preset.container,
+        containerBgClass,
+        isExiting ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0",
+        slots.base
+    ]);
+    var stripClass = cnArr([
+        "absolute top-0 left-[5px] w-[5px] h-full rounded-[20px_0_0_20px]",
+        preset.stripBg,
+        slots.strip
+    ]);
+    var iconWrapClass = cnArr([
+        "absolute left-[36px] top-[22px] h-[26px] w-[26px]",
+        slots.icon
+    ]);
+    var iconImgClass = "block h-[26px] w-[26px] object-contain";
+    var isTitleCentered = !hasActions && !hasMessage;
+    var titleTopClass = isTitleCentered ? "top-1/2 -translate-y-1/2" : "top-[13px]";
+    var titleClass = cnArr([
+        "absolute left-[80px]",
+        titleTopClass,
+        titleRight,
+        !isTitleCentered && titleBottomClass,
+        'font-["Poppins"] text-[16px] font-[700] leading-none overflow-hidden text-ellipsis whitespace-nowrap',
+        titleTextClass,
+        slots.title
+    ]);
+    var messageClass = cnArr([
+        "absolute left-[80px] top-[39px]",
+        messageRight,
+        messageBottomClass,
+        'font-["Poppins"] text-[10px] font-[400] leading-none truncate',
+        messageTextClass,
+        slots.message
+    ]);
+    var closeBtnClass = cnArr([
+        "absolute top-[27px] h-[14px] w-[14px]",
+        closeLeft,
+        slots.close
+    ]);
+    var actionsWrapClass = cnArr([
+        "absolute left-[80px] right-[12px] md:right-[22px] bottom-[10px] flex flex-wrap gap-2",
+        slots.actions
+    ]);
+    var primaryActionClass = cnArr([
+        "inline-flex w-fit whitespace-nowrap items-center justify-center rounded-lg",
+        "bg-[rgba(17,24,39,1)] px-3 py-2 text-[12px] font-[600] text-[rgba(255,255,255,1)] transition-colors hover:bg-[rgba(31,41,55,1)]",
+        slots.primaryAction
+    ]);
+    var secondaryActionClass = cnArr([
+        "inline-flex w-fit whitespace-nowrap items-center justify-center rounded-lg",
+        "border border-[rgba(255,255,255,0.6)] bg-[rgba(255,255,255,0.15)] px-3 py-2 text-[12px] font-[600] text-[rgba(255,255,255,1)] transition-colors hover:bg-[rgba(255,255,255,0.22)]",
+        slots.secondaryAction
+    ]);
+    var iconSrc = iconFor(toast.type, background);
+    var closeSrc = closeIconFor(background);
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+        onMouseEnter: function() {
+            return setHovered(true);
+        },
+        onMouseLeave: function() {
+            return setHovered(false);
+        },
+        className: baseClass,
+        role: "status",
+        "aria-live": "polite"
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: stripClass,
+        "aria-hidden": "true"
+    }), /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: iconWrapClass,
+        "aria-hidden": "true"
+    }, /* @__PURE__ */ import_react12.default.createElement("img", {
+        src: iconSrc,
+        alt: "",
+        className: iconImgClass
+    })), /* @__PURE__ */ import_react12.default.createElement("h4", {
+        className: titleClass
+    }, toast.title), hasMessage && /* @__PURE__ */ import_react12.default.createElement("p", {
+        className: messageClass
+    }, rawMessage), !hasActions && /* @__PURE__ */ import_react12.default.createElement("button", {
+        onClick: handleClose,
+        className: closeBtnClass,
+        "aria-label": "Close"
+    }, /* @__PURE__ */ import_react12.default.createElement("img", {
+        src: closeSrc,
+        alt: "",
+        className: "block h-[14px] w-[14px] object-contain",
+        "aria-hidden": "true"
+    })), hasActions && /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: actionsWrapClass
+    }, ((_toast_actions = toast.actions) === null || _toast_actions === void 0 ? void 0 : _toast_actions[0]) && /* @__PURE__ */ import_react12.default.createElement("button", {
+        onClick: function() {
+            var _toast_actions_, _toast_actions;
+            return handleAction((_toast_actions = toast.actions) === null || _toast_actions === void 0 ? void 0 : (_toast_actions_ = _toast_actions[0]) === null || _toast_actions_ === void 0 ? void 0 : _toast_actions_.onClick);
+        },
+        className: primaryActionClass
+    }, toast.actions[0].label), ((_toast_actions1 = toast.actions) === null || _toast_actions1 === void 0 ? void 0 : _toast_actions1[1]) && /* @__PURE__ */ import_react12.default.createElement("button", {
+        onClick: function() {
+            var _toast_actions_, _toast_actions;
+            return handleAction((_toast_actions = toast.actions) === null || _toast_actions === void 0 ? void 0 : (_toast_actions_ = _toast_actions[1]) === null || _toast_actions_ === void 0 ? void 0 : _toast_actions_.onClick);
+        },
+        className: secondaryActionClass
+    }, toast.actions[1].label)));
+};
+ToastItem.displayName = "ToastItem";
+var posClass = function(p) {
+    switch(p){
+        case "top-left":
+            return "top-4 left-4";
+        case "top-center":
+            return "top-4 left-1/2 -translate-x-1/2";
+        case "top-right":
+            return "top-4 right-4";
+        case "bottom-left":
+            return "bottom-4 left-4";
+        case "bottom-center":
+            return "bottom-4 left-1/2 -translate-x-1/2";
+        case "bottom-right":
+            return "bottom-4 right-4";
+        default:
+            return "top-4 right-4";
+    }
+};
+var ToastMessageBase = function(param) {
+    var toasts = param.toasts, position = param.position, onClose = param.onClose;
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: cn5("fixed z-[9999] flex flex-col gap-3 pointer-events-none", posClass(position))
+    }, toasts.map(function(t) {
+        return /* @__PURE__ */ import_react12.default.createElement("div", {
+            key: t.id,
+            className: "pointer-events-auto"
+        }, /* @__PURE__ */ import_react12.default.createElement(ToastItem, {
+            toast: t,
+            onClose: onClose
+        }));
+    }));
+};
+ToastMessageBase.displayName = "ToastMessage";
+var ToastMessage = ToastMessageBase;
+ToastMessage.cn = cn5;
+ToastMessage.titleForType = titleForType;
+ToastMessage.displayName = "ToastMessage";
+// src/components/Dropdown.tsx
+var import_react13 = __toESM(require("react"));
 var variantStyles = {
     basic: "bg-blue-600 text-white hover:bg-blue-700",
     outline: "border border-black-600 text-blue-600 hover:bg-blue-50",
@@ -3019,13 +3393,13 @@ var variantStyles = {
 };
 var Dropdown = function(param) {
     var options = param.options, value = param.value, onSelect = param.onSelect, _param_variant = param.variant, variant = _param_variant === void 0 ? "basic" : _param_variant, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select an option" : _param_placeholder;
-    var _ref = _sliced_to_array((0, import_react12.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react12.useState)(null), 2), internalSelected = _ref1[0], setInternalSelected = _ref1[1];
-    var dropdownRef = (0, import_react12.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react13.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react13.useState)(null), 2), internalSelected = _ref1[0], setInternalSelected = _ref1[1];
+    var dropdownRef = (0, import_react13.useRef)(null);
     var selectedOption = value !== void 0 ? options.find(function(opt) {
         return opt.value === value;
     }) : internalSelected;
-    (0, import_react12.useEffect)(function() {
+    (0, import_react13.useEffect)(function() {
         var handleClickOutside = function handleClickOutside(event) {
             if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                 setOpen(false);
@@ -3046,18 +3420,18 @@ var Dropdown = function(param) {
         onSelect(option.value);
         setOpen(false);
     };
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
         ref: dropdownRef,
         className: "relative w-56 ".concat(className)
-    }, /* @__PURE__ */ import_react12.default.createElement("button", {
+    }, /* @__PURE__ */ import_react13.default.createElement("button", {
         onClick: function() {
             return setOpen(!open);
         },
         className: "w-full text-left px-4 py-2 rounded-md transition-all duration-200 ".concat(variantStyles[variant])
-    }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key) || placeholder), open && /* @__PURE__ */ import_react12.default.createElement("div", {
+    }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key) || placeholder), open && /* @__PURE__ */ import_react13.default.createElement("div", {
         className: "absolute mt-2 w-full bg-white border border-gray-200 rounded-md shadow-lg z-20"
     }, options.map(function(opt) {
-        return /* @__PURE__ */ import_react12.default.createElement("div", {
+        return /* @__PURE__ */ import_react13.default.createElement("div", {
             key: opt.value,
             onClick: function() {
                 return handleSelect(opt);
@@ -3068,11 +3442,16 @@ var Dropdown = function(param) {
 };
 Dropdown.displayName = "Dropdown";
 // src/components/Filter.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_lucide_react3 = require("lucide-react");
+var import_react_dom = require("react-dom");
+var fieldStyles = {
+    small: "w-full px-3 py-2 pr-5 bg-white border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-2 focus:ring-[#1761a3]",
+    medium: "w-full px-4 py-3 pr-6 bg-white border border-slate-300 rounded-md appearance-none focus:outline-none focus:ring-2 focus:ring-[#1761a3]"
+};
 var Filter = function() {
-    var _ref = _sliced_to_array((0, import_react13.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react13.useState)({
+    var _ref = _sliced_to_array((0, import_react14.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react14.useState)({
         date: {
             start: null,
             end: null
@@ -3117,9 +3496,9 @@ var Filter = function() {
         console.log("Applied Filters:", values);
         setOpen(false);
     };
-    return /* @__PURE__ */ import_react13.default.createElement("div", {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
         className: "relative"
-    }, /* @__PURE__ */ import_react13.default.createElement(Button, {
+    }, /* @__PURE__ */ import_react14.default.createElement(Button, {
         variant: "outline",
         className: "flex items-center gap-2 px-5 py-3 rounded-lg\r\n          border border-[rgba(23,97,163,0.35)]\r\n          bg-gradient-to-r from-[#f2fbf8] to-[#eef6fb]\r\n          text-[#0f172a] font-semibold shadow-sm",
         onClick: function() {
@@ -3127,149 +3506,293 @@ var Filter = function() {
                 return !p;
             });
         }
-    }, "Filter"), open && /* @__PURE__ */ import_react13.default.createElement("div", {
+    }, "Filter"), open && /* @__PURE__ */ import_react14.default.createElement("div", {
         className: "absolute right-0 mt-3 z-50"
-    }, /* @__PURE__ */ import_react13.default.createElement(Card, {
+    }, /* @__PURE__ */ import_react14.default.createElement(Card, {
         variant: "figma",
         className: "w-[360px] p-0 overflow-hidden bg-white"
-    }, /* @__PURE__ */ import_react13.default.createElement("div", {
+    }, /* @__PURE__ */ import_react14.default.createElement("div", {
         className: "flex justify-between items-center px-5 py-3 border-b border-[rgba(23,97,163,0.35)]"
-    }, /* @__PURE__ */ import_react13.default.createElement("h3", {
+    }, /* @__PURE__ */ import_react14.default.createElement("h3", {
         className: "text-md font-semibold"
-    }, "Add Filter"), /* @__PURE__ */ import_react13.default.createElement("button", {
+    }, "Add Filter"), /* @__PURE__ */ import_react14.default.createElement("button", {
         onClick: function() {
             return setOpen(false);
         },
         className: "w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center"
-    }, /* @__PURE__ */ import_react13.default.createElement(import_lucide_react3.X, {
+    }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react3.X, {
         className: "w-4 h-4 text-slate-600"
-    }))), /* @__PURE__ */ import_react13.default.createElement(Section, {
+    }))), /* @__PURE__ */ import_react14.default.createElement(Section, {
         title: "Date Range",
         onReset: function() {
             return resetField("date");
         }
-    }, /* @__PURE__ */ import_react13.default.createElement(Calendar, {
+    }, /* @__PURE__ */ import_react14.default.createElement(Calendar, {
         enableRangeSelection: true,
         rangeValue: values.date,
         onRangeChange: function(range) {
             return handleChange("date", range);
         },
         size: "small"
-    })), /* @__PURE__ */ import_react13.default.createElement(Section, {
-        title: "Activity Type",
-        onReset: function() {
-            return resetField("activity");
-        }
-    }, /* @__PURE__ */ import_react13.default.createElement(MahatiActivity, {
+    })), /* @__PURE__ */ import_react14.default.createElement("div", {
+        className: "relative w-full"
+    }, /* @__PURE__ */ import_react14.default.createElement("select", {
         value: values.activity,
-        onChange: function(v) {
-            return handleChange("activity", v);
-        }
-    })), /* @__PURE__ */ import_react13.default.createElement(Section, {
-        title: "Status",
-        onReset: function() {
-            return resetField("status");
-        }
-    }, /* @__PURE__ */ import_react13.default.createElement(MahatiStatus, {
+        onChange: function(e) {
+            return handleChange("activity", e.target.value);
+        },
+        className: "\r\n                w-full appearance-none\r\n                px-4 py-3 pr-10\r\n                rounded-[6px]\r\n                border border-slate-300\r\n                bg-white text-sm\r\n                focus:outline-none focus:ring-2 focus:ring-[#1761A3]\r\n              "
+    }, /* @__PURE__ */ import_react14.default.createElement("option", {
+        value: ""
+    }, "Select Activity"), /* @__PURE__ */ import_react14.default.createElement("option", null, "Activity List"), /* @__PURE__ */ import_react14.default.createElement("option", null, "Login"), /* @__PURE__ */ import_react14.default.createElement("option", null, "Update"), /* @__PURE__ */ import_react14.default.createElement("option", null, "Delete")), /* @__PURE__ */ import_react14.default.createElement(import_lucide_react3.ChevronDown, {
+        className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none"
+    })), /* @__PURE__ */ import_react14.default.createElement("div", {
+        className: "relative w-full"
+    }, /* @__PURE__ */ import_react14.default.createElement("select", {
         value: values.status,
-        onChange: function(v) {
-            return handleChange("status", v);
-        }
-    })), /* @__PURE__ */ import_react13.default.createElement(Section, {
-        title: "Keyword search",
-        onReset: function() {
-            return resetField("keyword");
-        }
-    }, /* @__PURE__ */ import_react13.default.createElement(MahatiSearch, {
+        onChange: function(e) {
+            return handleChange("status", e.target.value);
+        },
+        className: "\r\n                w-full appearance-none\r\n                px-4 py-3 pr-10\r\n                rounded-[6px]\r\n                border border-slate-300\r\n                bg-white text-sm\r\n                focus:outline-none focus:ring-2 focus:ring-[#1761A3]\r\n              "
+    }, /* @__PURE__ */ import_react14.default.createElement("option", {
+        value: ""
+    }, "Select Status"), /* @__PURE__ */ import_react14.default.createElement("option", null, "Pending"), /* @__PURE__ */ import_react14.default.createElement("option", null, "Approved"), /* @__PURE__ */ import_react14.default.createElement("option", null, "Rejected")), /* @__PURE__ */ import_react14.default.createElement(import_lucide_react3.ChevronDown, {
+        className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none"
+    })), /* @__PURE__ */ import_react14.default.createElement("input", {
         value: values.keyword,
-        onChange: function(v) {
-            return handleChange("keyword", v);
-        }
-    })), /* @__PURE__ */ import_react13.default.createElement("div", {
+        onChange: function(e) {
+            return handleChange("keyword", e.target.value);
+        },
+        placeholder: "Search...",
+        className: "\r\n                w-full px-4 py-3\r\n                rounded-[6px]\r\n                border border-slate-300\r\n                bg-white text-sm\r\n                focus:outline-none focus:ring-2 focus:ring-[#1761A3]\r\n              "
+    }), /* @__PURE__ */ import_react14.default.createElement("div", {
         className: "flex justify-between items-center px-5 py-4 bg-gradient-to-r from-[#f3fbf8] to-[#eef6fb]"
-    }, /* @__PURE__ */ import_react13.default.createElement(Button, {
+    }, /* @__PURE__ */ import_react14.default.createElement(Button, {
         variant: "outline",
         className: "border-[#1761A3] bg-[#F0F8FF]",
         onClick: resetAll
-    }, "Reset all"), /* @__PURE__ */ import_react13.default.createElement(Button, {
+    }, "Reset all"), /* @__PURE__ */ import_react14.default.createElement(Button, {
         className: "text-white bg-gradient-to-r from-[#1761a3] to-[#4daf83]",
         onClick: applyFilters
     }, "Apply Now")))));
 };
 var Section = function(param) {
     var title = param.title, onReset = param.onReset, children = param.children;
-    return /* @__PURE__ */ import_react13.default.createElement("div", {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
         className: "px-5 py-4 bg-gradient-to-r from-[#f3fbf8] to-[#eef6fb]\r\n    border-b border-[rgba(23,97,163,0.35)]"
-    }, /* @__PURE__ */ import_react13.default.createElement("div", {
+    }, /* @__PURE__ */ import_react14.default.createElement("div", {
         className: "flex justify-between items-center mb-3"
-    }, /* @__PURE__ */ import_react13.default.createElement("h6", {
+    }, /* @__PURE__ */ import_react14.default.createElement("h6", {
         className: "font-semibold text-sm"
-    }, title), /* @__PURE__ */ import_react13.default.createElement("button", {
+    }, title), /* @__PURE__ */ import_react14.default.createElement("button", {
         onClick: onReset,
         className: "text-[#1761a3] font-semibold text-sm"
     }, "Reset")), children);
 };
-var activityOptions = [
-    "Activity List",
-    "Login",
-    "Update",
-    "Delete"
-];
-var statusOptions = [
-    "Active",
-    "Inactive",
-    "Pending"
+var DEFAULT_ACTIVITY_OPTIONS = [
+    {
+        label: "Select Activity",
+        value: ""
+    },
+    {
+        label: "Activity List",
+        value: "Activity List"
+    },
+    {
+        label: "Login",
+        value: "Login"
+    },
+    {
+        label: "Update",
+        value: "Update"
+    },
+    {
+        label: "Delete",
+        value: "Delete"
+    }
 ];
 var MahatiActivity = function(param) {
-    var value = param.value, onChange = param.onChange;
-    return /* @__PURE__ */ import_react13.default.createElement(Select, {
-        value: value,
-        onChange: onChange,
-        placeholder: "Select Activity",
-        options: activityOptions
-    });
+    var value = param.value, onChange = param.onChange, _param_options = param.options, options = _param_options === void 0 ? DEFAULT_ACTIVITY_OPTIONS : _param_options, _param_size = param.size, size = _param_size === void 0 ? "medium" : _param_size;
+    var _options_find;
+    var _ref = _sliced_to_array((0, import_react14.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var triggerRef = (0, import_react14.useRef)(null);
+    var dropdownRef = (0, import_react14.useRef)(null);
+    var _ref1 = _sliced_to_array((0, import_react14.useState)(null), 2), pos = _ref1[0], setPos = _ref1[1];
+    var selectedLabel = ((_options_find = options.find(function(o) {
+        return o.value == value;
+    })) === null || _options_find === void 0 ? void 0 : _options_find.label) || "Select Activity";
+    var updatePosition = function() {
+        if (!triggerRef.current) return;
+        var rect = triggerRef.current.getBoundingClientRect();
+        setPos({
+            top: rect.bottom + window.scrollY + 6,
+            left: rect.left + window.scrollX,
+            width: rect.width
+        });
+    };
+    (0, import_react14.useEffect)(function() {
+        if (!open) return;
+        updatePosition();
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+        return function() {
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [
+        open
+    ]);
+    (0, import_react14.useEffect)(function() {
+        var handler = function(e) {
+            var _triggerRef_current, _dropdownRef_current;
+            if (((_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.contains(e.target)) || ((_dropdownRef_current = dropdownRef.current) === null || _dropdownRef_current === void 0 ? void 0 : _dropdownRef_current.contains(e.target))) {
+                return;
+            }
+            setOpen(false);
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("div", {
+        ref: triggerRef,
+        onClick: function() {
+            return setOpen(function(p) {
+                return !p;
+            });
+        },
+        className: "\n          ".concat(fieldStyles[size], "\n          cursor-pointer\n          flex items-center justify-between\n          relative\n          ").concat(open ? "border-[#1761a3] ring-2 ring-[#1761a3]" : "", "\n        ")
+    }, /* @__PURE__ */ import_react14.default.createElement("span", {
+        className: "truncate"
+    }, selectedLabel), /* @__PURE__ */ import_react14.default.createElement(import_lucide_react3.ChevronDown, {
+        className: "w-4 h-4 text-slate-500 transition-transform ".concat(open ? "rotate-180" : "")
+    })), open && pos && (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react14.default.createElement("div", {
+        ref: dropdownRef,
+        style: {
+            position: "absolute",
+            top: pos.top,
+            left: pos.left,
+            width: pos.width
+        },
+        className: "\r\n              z-[9999]\r\n              rounded-[6px]\r\n              border border-slate-300\r\n              bg-white\r\n              shadow-xl\r\n              max-h-[240px]\r\n              overflow-y-auto\r\n            "
+    }, options.map(function(opt) {
+        return /* @__PURE__ */ import_react14.default.createElement("div", {
+            key: String(opt.value),
+            onClick: function() {
+                onChange(opt.value);
+                setOpen(false);
+            },
+            className: "\r\n                  px-4 py-2\r\n                  text-sm\r\n                  cursor-pointer\r\n                  text-black hover:bg-[#1761a3] hover:text-white\r\n                "
+        }, opt.label);
+    })), document.body));
 };
+var DEFAULT_STATUS_OPTIONS = [
+    {
+        label: "Select Status",
+        value: ""
+    },
+    {
+        label: "Pending",
+        value: "Pending"
+    },
+    {
+        label: "Approved",
+        value: "Approved"
+    },
+    {
+        label: "Rejected",
+        value: "Rejected"
+    }
+];
 var MahatiStatus = function(param) {
-    var value = param.value, onChange = param.onChange;
-    return /* @__PURE__ */ import_react13.default.createElement(Select, {
-        value: value,
-        onChange: onChange,
-        placeholder: "Select Status",
-        options: statusOptions
-    });
+    var value = param.value, onChange = param.onChange, _param_options = param.options, options = _param_options === void 0 ? DEFAULT_STATUS_OPTIONS : _param_options, _param_size = param.size, size = _param_size === void 0 ? "medium" : _param_size;
+    var _options_find;
+    var _ref = _sliced_to_array((0, import_react14.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var triggerRef = (0, import_react14.useRef)(null);
+    var dropdownRef = (0, import_react14.useRef)(null);
+    var _ref1 = _sliced_to_array((0, import_react14.useState)(null), 2), pos = _ref1[0], setPos = _ref1[1];
+    var selectedLabel = (options === null || options === void 0 ? void 0 : (_options_find = options.find(function(o) {
+        return o.value == value;
+    })) === null || _options_find === void 0 ? void 0 : _options_find.label) || "Select Status";
+    var updatePosition = function() {
+        if (!triggerRef.current) return;
+        var rect = triggerRef.current.getBoundingClientRect();
+        setPos({
+            top: rect.bottom + window.scrollY + 6,
+            left: rect.left + window.scrollX,
+            width: rect.width
+        });
+    };
+    (0, import_react14.useEffect)(function() {
+        if (!open) return;
+        updatePosition();
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+        return function() {
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [
+        open
+    ]);
+    (0, import_react14.useEffect)(function() {
+        var handler = function(e) {
+            var _triggerRef_current, _dropdownRef_current;
+            if (((_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.contains(e.target)) || ((_dropdownRef_current = dropdownRef.current) === null || _dropdownRef_current === void 0 ? void 0 : _dropdownRef_current.contains(e.target))) {
+                return;
+            }
+            setOpen(false);
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("div", {
+        ref: triggerRef,
+        onClick: function() {
+            return setOpen(function(p) {
+                return !p;
+            });
+        },
+        className: "\n          ".concat(fieldStyles[size], "\n          cursor-pointer\n          flex items-center justify-between\n          relative\n          ").concat(open ? "border-[#1761a3] ring-2 ring-[#1761a3]" : "", "\n        ")
+    }, /* @__PURE__ */ import_react14.default.createElement("span", {
+        className: "truncate"
+    }, selectedLabel), /* @__PURE__ */ import_react14.default.createElement(import_lucide_react3.ChevronDown, {
+        className: "w-4 h-4 text-slate-500 transition-transform ".concat(open ? "rotate-180" : "")
+    })), open && pos && (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react14.default.createElement("div", {
+        ref: dropdownRef,
+        style: {
+            position: "absolute",
+            top: pos.top,
+            left: pos.left,
+            width: pos.width
+        },
+        className: "\r\n              z-[9999]\r\n              rounded-[6px]\r\n              border border-slate-300\r\n              bg-white\r\n              shadow-xl\r\n              max-h-[240px]\r\n              overflow-y-auto\r\n            "
+    }, options === null || options === void 0 ? void 0 : options.map(function(opt) {
+        return /* @__PURE__ */ import_react14.default.createElement("div", {
+            key: String(opt.value),
+            onClick: function() {
+                onChange(opt.value);
+                setOpen(false);
+            },
+            className: "\r\n                  px-4 py-2\r\n                  text-sm\r\n                  cursor-pointer\r\n                  text-black hover:bg-[#1761a3] hover:text-white\r\n                "
+        }, opt.label);
+    })), document.body));
 };
 var MahatiSearch = function(param) {
-    var value = param.value, onChange = param.onChange;
-    return /* @__PURE__ */ import_react13.default.createElement("input", {
+    var value = param.value, onChange = param.onChange, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Search..." : _param_placeholder, _param_size = param.size, size = _param_size === void 0 ? "medium" : _param_size;
+    return /* @__PURE__ */ import_react14.default.createElement("input", {
         type: "text",
         value: value,
-        placeholder: "Search...",
+        placeholder: placeholder,
         onChange: function(e) {
             return onChange(e.target.value);
         },
-        className: "w-full px-4 py-3 rounded-[6px]\r\n      border border-slate-300 bg-white\r\n      focus:outline-none focus:ring-2 focus:ring-[#1761a3]"
+        className: fieldStyles[size]
     });
 };
-var Select = function(param) {
-    var value = param.value, options = param.options, placeholder = param.placeholder, onChange = param.onChange;
-    return /* @__PURE__ */ import_react13.default.createElement("div", {
-        className: "relative"
-    }, /* @__PURE__ */ import_react13.default.createElement("select", {
-        value: value,
-        onChange: function(e) {
-            return onChange(e.target.value);
-        },
-        className: "w-full appearance-none px-4 py-3 pr-10\r\n        rounded-[6px] border border-slate-300 bg-white\r\n        focus:outline-none focus:ring-2 focus:ring-[#1761a3]"
-    }, /* @__PURE__ */ import_react13.default.createElement("option", {
-        value: ""
-    }, placeholder), options.map(function(opt) {
-        return /* @__PURE__ */ import_react13.default.createElement("option", {
-            key: opt
-        }, opt);
-    })), /* @__PURE__ */ import_react13.default.createElement(import_lucide_react3.ChevronDown, {
-        className: "absolute right-3 top-1/2 -translate-y-1/2\r\n      w-4 h-4 text-slate-500 pointer-events-none"
-    }));
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     MahatiActivity: MahatiActivity,
@@ -3288,6 +3811,7 @@ var Select = function(param) {
     MahatiTabbedInterfaceTailwind: MahatiTabbedInterfaceTailwind,
     MahatiTable: MahatiTable,
     MahatiTableTailwind: MahatiTableTailwind,
+    MahatiToastMessage: MahatiToastMessage,
     MahatiTooltip: MahatiTooltip
 });
 //# sourceMappingURL=index.js.map