@mahatisystems/mahati-ui-components 1.2.1 → 1.3.2

package/dist/index.mjs

@@ -1,4 +1,3 @@
-// src/components/Button.tsx
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -148,6 +147,69 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var _Chart;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = function(cb, mod) {
+    return function __require() {
+        return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = {
+            exports: {}
+        }).exports, mod), mod.exports;
+    };
+};
+// src/assets/icons/check-mark_1.png
+var require_check_mark_1 = __commonJS({
+    "src/assets/icons/check-mark_1.png": function(exports, module) {
+        module.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(exports, module) {
+        module.exports = "./check-mark_2-YWM2KQA2.png";
+    }
+});
+// src/assets/icons/danger_1.png
+var require_danger_1 = __commonJS({
+    "src/assets/icons/danger_1.png": function(exports, module) {
+        module.exports = "./danger_1-LUIFNS2J.png";
+    }
+});
+// src/assets/icons/danger_2.png
+var require_danger_2 = __commonJS({
+    "src/assets/icons/danger_2.png": function(exports, module) {
+        module.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(exports, module) {
+        module.exports = "./danger_1_1-PHLDGYEA.png";
+    }
+});
+// src/assets/icons/notification_1.png
+var require_notification_1 = __commonJS({
+    "src/assets/icons/notification_1.png": function(exports, module) {
+        module.exports = "./notification_1-K2I7DVDH.png";
+    }
+});
+// src/assets/icons/notification_2.png
+var require_notification_2 = __commonJS({
+    "src/assets/icons/notification_2.png": function(exports, module) {
+        module.exports = "./notification_2-KFI6MN7T.png";
+    }
+});
+// src/assets/icons/close.png
+var require_close = __commonJS({
+    "src/assets/icons/close.png": function(exports, module) {
+        module.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(exports, module) {
+        module.exports = "./close_copy_1-PFFNUORV.png";
+    }
+});
+// src/components/Button.tsx
 import React from "react";
 import { cva } from "class-variance-authority";
 // src/lib/utils.ts
@@ -2890,8 +2952,318 @@ var Calendar = function(param) {
     })), isOpen && calendarContent);
 };
 Calendar.displayName = "Calendar";
+// src/components/ToastMessage.tsx
+import React13, { useEffect as useEffect6, useMemo, useState as useState9 } from "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 _useState9 = _sliced_to_array(useState9(false), 2), isExiting = _useState9[0], setIsExiting = _useState9[1];
+    var _useState91 = _sliced_to_array(useState9(false), 2), hovered = _useState91[0], setHovered = _useState91[1];
+    var hasActions = !!(toast.actions && toast.actions.length > 0);
+    var preset = 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();
+    };
+    useEffect6(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__ */ React13.createElement("div", {
+        onMouseEnter: function() {
+            return setHovered(true);
+        },
+        onMouseLeave: function() {
+            return setHovered(false);
+        },
+        className: baseClass,
+        role: "status",
+        "aria-live": "polite"
+    }, /* @__PURE__ */ React13.createElement("div", {
+        className: stripClass,
+        "aria-hidden": "true"
+    }), /* @__PURE__ */ React13.createElement("div", {
+        className: iconWrapClass,
+        "aria-hidden": "true"
+    }, /* @__PURE__ */ React13.createElement("img", {
+        src: iconSrc,
+        alt: "",
+        className: iconImgClass
+    })), /* @__PURE__ */ React13.createElement("h4", {
+        className: titleClass
+    }, toast.title), hasMessage && /* @__PURE__ */ React13.createElement("p", {
+        className: messageClass
+    }, rawMessage), !hasActions && /* @__PURE__ */ React13.createElement("button", {
+        onClick: handleClose,
+        className: closeBtnClass,
+        "aria-label": "Close"
+    }, /* @__PURE__ */ React13.createElement("img", {
+        src: closeSrc,
+        alt: "",
+        className: "block h-[14px] w-[14px] object-contain",
+        "aria-hidden": "true"
+    })), hasActions && /* @__PURE__ */ React13.createElement("div", {
+        className: actionsWrapClass
+    }, ((_toast_actions = toast.actions) === null || _toast_actions === void 0 ? void 0 : _toast_actions[0]) && /* @__PURE__ */ React13.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__ */ React13.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__ */ React13.createElement("div", {
+        className: cn5("fixed z-[9999] flex flex-col gap-3 pointer-events-none", posClass(position))
+    }, toasts.map(function(t) {
+        return /* @__PURE__ */ React13.createElement("div", {
+            key: t.id,
+            className: "pointer-events-auto"
+        }, /* @__PURE__ */ React13.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
-import React13, { useState as useState9, useRef as useRef3, useEffect as useEffect6 } from "react";
+import React14, { useState as useState10, useRef as useRef3, useEffect as useEffect7 } from "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",
@@ -2904,13 +3276,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 _useState9 = _sliced_to_array(useState9(false), 2), open = _useState9[0], setOpen = _useState9[1];
-    var _useState91 = _sliced_to_array(useState9(null), 2), internalSelected = _useState91[0], setInternalSelected = _useState91[1];
+    var _useState10 = _sliced_to_array(useState10(false), 2), open = _useState10[0], setOpen = _useState10[1];
+    var _useState101 = _sliced_to_array(useState10(null), 2), internalSelected = _useState101[0], setInternalSelected = _useState101[1];
     var dropdownRef = useRef3(null);
     var selectedOption = value !== void 0 ? options.find(function(opt) {
         return opt.value === value;
     }) : internalSelected;
-    useEffect6(function() {
+    useEffect7(function() {
         var handleClickOutside = function handleClickOutside(event) {
             if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                 setOpen(false);
@@ -2931,18 +3303,18 @@ var Dropdown = function(param) {
         onSelect(option.value);
         setOpen(false);
     };
-    return /* @__PURE__ */ React13.createElement("div", {
+    return /* @__PURE__ */ React14.createElement("div", {
         ref: dropdownRef,
         className: "relative w-56 ".concat(className)
-    }, /* @__PURE__ */ React13.createElement("button", {
+    }, /* @__PURE__ */ React14.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__ */ React13.createElement("div", {
+    }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key) || placeholder), open && /* @__PURE__ */ React14.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__ */ React13.createElement("div", {
+        return /* @__PURE__ */ React14.createElement("div", {
             key: opt.value,
             onClick: function() {
                 return handleSelect(opt);
@@ -2953,11 +3325,16 @@ var Dropdown = function(param) {
 };
 Dropdown.displayName = "Dropdown";
 // src/components/Filter.tsx
-import React14, { useState as useState10 } from "react";
+import React15, { useState as useState11, useEffect as useEffect8, useRef as useRef4 } from "react";
 import { X as X2, ChevronDown as ChevronDown2 } from "lucide-react";
+import { createPortal } from "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 _useState10 = _sliced_to_array(useState10(false), 2), open = _useState10[0], setOpen = _useState10[1];
-    var _useState101 = _sliced_to_array(useState10({
+    var _useState11 = _sliced_to_array(useState11(false), 2), open = _useState11[0], setOpen = _useState11[1];
+    var _useState111 = _sliced_to_array(useState11({
         date: {
             start: null,
             end: null
@@ -2965,7 +3342,7 @@ var Filter = function() {
         activity: "",
         status: "",
         keyword: ""
-    }), 2), values = _useState101[0], setValues = _useState101[1];
+    }), 2), values = _useState111[0], setValues = _useState111[1];
     var handleChange = function(name, value) {
         setValues(function(prev) {
             return _object_spread_props(_object_spread({}, prev), _define_property({}, name, value));
@@ -3002,9 +3379,9 @@ var Filter = function() {
         console.log("Applied Filters:", values);
         setOpen(false);
     };
-    return /* @__PURE__ */ React14.createElement("div", {
+    return /* @__PURE__ */ React15.createElement("div", {
         className: "relative"
-    }, /* @__PURE__ */ React14.createElement(Button, {
+    }, /* @__PURE__ */ React15.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() {
@@ -3012,148 +3389,292 @@ var Filter = function() {
                 return !p;
             });
         }
-    }, "Filter"), open && /* @__PURE__ */ React14.createElement("div", {
+    }, "Filter"), open && /* @__PURE__ */ React15.createElement("div", {
         className: "absolute right-0 mt-3 z-50"
-    }, /* @__PURE__ */ React14.createElement(Card, {
+    }, /* @__PURE__ */ React15.createElement(Card, {
         variant: "figma",
         className: "w-[360px] p-0 overflow-hidden bg-white"
-    }, /* @__PURE__ */ React14.createElement("div", {
+    }, /* @__PURE__ */ React15.createElement("div", {
         className: "flex justify-between items-center px-5 py-3 border-b border-[rgba(23,97,163,0.35)]"
-    }, /* @__PURE__ */ React14.createElement("h3", {
+    }, /* @__PURE__ */ React15.createElement("h3", {
         className: "text-md font-semibold"
-    }, "Add Filter"), /* @__PURE__ */ React14.createElement("button", {
+    }, "Add Filter"), /* @__PURE__ */ React15.createElement("button", {
         onClick: function() {
             return setOpen(false);
         },
         className: "w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center"
-    }, /* @__PURE__ */ React14.createElement(X2, {
+    }, /* @__PURE__ */ React15.createElement(X2, {
         className: "w-4 h-4 text-slate-600"
-    }))), /* @__PURE__ */ React14.createElement(Section, {
+    }))), /* @__PURE__ */ React15.createElement(Section, {
         title: "Date Range",
         onReset: function() {
             return resetField("date");
         }
-    }, /* @__PURE__ */ React14.createElement(Calendar, {
+    }, /* @__PURE__ */ React15.createElement(Calendar, {
         enableRangeSelection: true,
         rangeValue: values.date,
         onRangeChange: function(range) {
             return handleChange("date", range);
         },
         size: "small"
-    })), /* @__PURE__ */ React14.createElement(Section, {
-        title: "Activity Type",
-        onReset: function() {
-            return resetField("activity");
-        }
-    }, /* @__PURE__ */ React14.createElement(MahatiActivity, {
+    })), /* @__PURE__ */ React15.createElement("div", {
+        className: "relative w-full"
+    }, /* @__PURE__ */ React15.createElement("select", {
         value: values.activity,
-        onChange: function(v) {
-            return handleChange("activity", v);
-        }
-    })), /* @__PURE__ */ React14.createElement(Section, {
-        title: "Status",
-        onReset: function() {
-            return resetField("status");
-        }
-    }, /* @__PURE__ */ React14.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__ */ React15.createElement("option", {
+        value: ""
+    }, "Select Activity"), /* @__PURE__ */ React15.createElement("option", null, "Activity List"), /* @__PURE__ */ React15.createElement("option", null, "Login"), /* @__PURE__ */ React15.createElement("option", null, "Update"), /* @__PURE__ */ React15.createElement("option", null, "Delete")), /* @__PURE__ */ React15.createElement(ChevronDown2, {
+        className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none"
+    })), /* @__PURE__ */ React15.createElement("div", {
+        className: "relative w-full"
+    }, /* @__PURE__ */ React15.createElement("select", {
         value: values.status,
-        onChange: function(v) {
-            return handleChange("status", v);
-        }
-    })), /* @__PURE__ */ React14.createElement(Section, {
-        title: "Keyword search",
-        onReset: function() {
-            return resetField("keyword");
-        }
-    }, /* @__PURE__ */ React14.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__ */ React15.createElement("option", {
+        value: ""
+    }, "Select Status"), /* @__PURE__ */ React15.createElement("option", null, "Pending"), /* @__PURE__ */ React15.createElement("option", null, "Approved"), /* @__PURE__ */ React15.createElement("option", null, "Rejected")), /* @__PURE__ */ React15.createElement(ChevronDown2, {
+        className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none"
+    })), /* @__PURE__ */ React15.createElement("input", {
         value: values.keyword,
-        onChange: function(v) {
-            return handleChange("keyword", v);
-        }
-    })), /* @__PURE__ */ React14.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__ */ React15.createElement("div", {
         className: "flex justify-between items-center px-5 py-4 bg-gradient-to-r from-[#f3fbf8] to-[#eef6fb]"
-    }, /* @__PURE__ */ React14.createElement(Button, {
+    }, /* @__PURE__ */ React15.createElement(Button, {
         variant: "outline",
         className: "border-[#1761A3] bg-[#F0F8FF]",
         onClick: resetAll
-    }, "Reset all"), /* @__PURE__ */ React14.createElement(Button, {
+    }, "Reset all"), /* @__PURE__ */ React15.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__ */ React14.createElement("div", {
+    return /* @__PURE__ */ React15.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__ */ React14.createElement("div", {
+    }, /* @__PURE__ */ React15.createElement("div", {
         className: "flex justify-between items-center mb-3"
-    }, /* @__PURE__ */ React14.createElement("h6", {
+    }, /* @__PURE__ */ React15.createElement("h6", {
         className: "font-semibold text-sm"
-    }, title), /* @__PURE__ */ React14.createElement("button", {
+    }, title), /* @__PURE__ */ React15.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__ */ React14.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 _useState11 = _sliced_to_array(useState11(false), 2), open = _useState11[0], setOpen = _useState11[1];
+    var triggerRef = useRef4(null);
+    var dropdownRef = useRef4(null);
+    var _useState111 = _sliced_to_array(useState11(null), 2), pos = _useState111[0], setPos = _useState111[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
+        });
+    };
+    useEffect8(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
+    ]);
+    useEffect8(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__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.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__ */ React15.createElement("span", {
+        className: "truncate"
+    }, selectedLabel), /* @__PURE__ */ React15.createElement(ChevronDown2, {
+        className: "w-4 h-4 text-slate-500 transition-transform ".concat(open ? "rotate-180" : "")
+    })), open && pos && createPortal(/* @__PURE__ */ React15.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__ */ React15.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__ */ React14.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 _useState11 = _sliced_to_array(useState11(false), 2), open = _useState11[0], setOpen = _useState11[1];
+    var triggerRef = useRef4(null);
+    var dropdownRef = useRef4(null);
+    var _useState111 = _sliced_to_array(useState11(null), 2), pos = _useState111[0], setPos = _useState111[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
+        });
+    };
+    useEffect8(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
+    ]);
+    useEffect8(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__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.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__ */ React15.createElement("span", {
+        className: "truncate"
+    }, selectedLabel), /* @__PURE__ */ React15.createElement(ChevronDown2, {
+        className: "w-4 h-4 text-slate-500 transition-transform ".concat(open ? "rotate-180" : "")
+    })), open && pos && createPortal(/* @__PURE__ */ React15.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__ */ React15.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__ */ React14.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__ */ React15.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__ */ React14.createElement("div", {
-        className: "relative"
-    }, /* @__PURE__ */ React14.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__ */ React14.createElement("option", {
-        value: ""
-    }, placeholder), options.map(function(opt) {
-        return /* @__PURE__ */ React14.createElement("option", {
-            key: opt
-        }, opt);
-    })), /* @__PURE__ */ React14.createElement(ChevronDown2, {
-        className: "absolute right-3 top-1/2 -translate-y-1/2\r\n      w-4 h-4 text-slate-500 pointer-events-none"
-    }));
-};
-export { MahatiActivity, Button as MahatiButton, Calendar as MahatiCalendar, Card as MahatiCard, ChartInterface as MahatiChart, Dropdown as MahatiDropdown, Filter as MahatiFilter, FormContainer as MahatiFormContainer, Input as MahatiInput, Modal as MahatiModal, MahatiSearch, MahatiStatus, TabbedInterface as MahatiTabbedInterface, TabbedInterface2 as MahatiTabbedInterfaceTailwind, Table as MahatiTable, Table2 as MahatiTableTailwind, Tooltip as MahatiTooltip };
+export { MahatiActivity, Button as MahatiButton, Calendar as MahatiCalendar, Card as MahatiCard, ChartInterface as MahatiChart, Dropdown as MahatiDropdown, Filter as MahatiFilter, FormContainer as MahatiFormContainer, Input as MahatiInput, Modal as MahatiModal, MahatiSearch, MahatiStatus, TabbedInterface as MahatiTabbedInterface, TabbedInterface2 as MahatiTabbedInterfaceTailwind, Table as MahatiTable, Table2 as MahatiTableTailwind, ToastMessage as MahatiToastMessage, Tooltip as MahatiTooltip };
 //# sourceMappingURL=index.mjs.map