@mahatisystems/mahati-ui-components 5.0.0 → 5.0.2

package/dist/index.js

@@ -469,6 +469,15 @@ __export(index_exports, {
     MahatiActivity: function MahatiActivity1() {
         return MahatiActivity;
     },
+    MahatiAsyncDropdown: function MahatiAsyncDropdown1() {
+        return AsyncDropdown;
+    },
+    MahatiAvatarDropdown: function MahatiAvatarDropdown1() {
+        return AvatarDropdown;
+    },
+    MahatiAvatarMultiSelectDropdown: function MahatiAvatarMultiSelectDropdown1() {
+        return AvatarMultiSelectDropdown;
+    },
     MahatiButton: function MahatiButton1() {
         return Button;
     },
@@ -481,6 +490,9 @@ __export(index_exports, {
     MahatiCard: function MahatiCard1() {
         return Card;
     },
+    MahatiCascadingDropdown: function MahatiCascadingDropdown1() {
+        return CascadingDropdown;
+    },
     MahatiChartAnalyticsWidget: function MahatiChartAnalyticsWidget1() {
         return MahatiChartAnalyticsWidget;
     },
@@ -493,6 +505,9 @@ __export(index_exports, {
     MahatiFormContainer: function MahatiFormContainer1() {
         return FormContainer;
     },
+    MahatiGroupedDropdown: function MahatiGroupedDropdown1() {
+        return GroupedDropdown;
+    },
     MahatiInput: function MahatiInput1() {
         return Input;
     },
@@ -505,6 +520,9 @@ __export(index_exports, {
     MahatiModal: function MahatiModal1() {
         return Modal;
     },
+    MahatiMultiSelectDropdown: function MahatiMultiSelectDropdown1() {
+        return MultiSelectDropdown;
+    },
     MahatiNotificationCard: function MahatiNotificationCard1() {
         return MahatiNotificationCard;
     },
@@ -11220,6 +11238,695 @@ function SearchableDropdown(param) {
         ]
     });
 }
+function MultiSelectDropdown(param) {
+    var _param_label = param.label, label = _param_label === void 0 ? "Multi Select" : _param_label, options = param.options, values = param.values, onChange = param.onChange, testId = param.testId;
+    var _ref = _sliced_to_array((0, import_react22.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react22.useState)(""), 2), search = _ref1[0], setSearch = _ref1[1];
+    var ref = (0, import_react22.useRef)(null);
+    var removeValue = function removeValue(val) {
+        onChange(values.filter(function(v) {
+            return v !== val;
+        }));
+    };
+    (0, import_react22.useEffect)(function() {
+        var handler = function handler(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    var toggleValue = function toggleValue(value) {
+        if (values.includes(value)) {
+            onChange(values.filter(function(v) {
+                return v !== value;
+            }));
+        } else {
+            onChange(_to_consumable_array(values).concat([
+                value
+            ]));
+        }
+    };
+    var filteredOptions = options.filter(function(o) {
+        return o.label.toLowerCase().includes(search.toLowerCase());
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", {
+                onClick: function onClick() {
+                    return setOpen(!open);
+                },
+                className: "w-full flex justify-between items-center px-4 py-3 rounded-[8px]\r\n      bg-gradient-to-r from-[#1761a3] to-[#4daf83] text-white font-semibold",
+                children: [
+                    values.length === 0 ? "Multi Select" : "Multi Select",
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.ChevronDown, {
+                        size: 16
+                    })
+                ]
+            }),
+            values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                className: "flex flex-wrap gap-2 mt-3",
+                children: values.map(function(val) {
+                    var _options_find;
+                    var lbl = (_options_find = options.find(function(o) {
+                        return o.value === val;
+                    })) === null || _options_find === void 0 ? void 0 : _options_find.label;
+                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "flex items-center gap-[6px] px-[10px] py-[6px]\r\n              bg-white border border-[#cde3f1] rounded-[10px] text-[13px]",
+                        children: [
+                            lbl,
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.X, {
+                                size: 14,
+                                className: "cursor-pointer",
+                                onClick: function onClick() {
+                                    return removeValue(val);
+                                }
+                            })
+                        ]
+                    }, val);
+                })
+            }),
+            open && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                className: "absolute top-[calc(100%+8px)] left-0 w-full bg-white\r\n        rounded-[12px] border border-[rgba(77,175,131,0.4)] z-[100]",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "p-3 border-b border-[#e5e7eb] relative",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", {
+                                value: search,
+                                onChange: function onChange(e) {
+                                    return setSearch(e.target.value);
+                                },
+                                placeholder: "Search...",
+                                className: "w-full h-[36px] px-3 pr-9 border rounded-[6px]\r\n            border-[rgba(23,97,163,0.3)] outline-none"
+                            }),
+                            search && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", {
+                                onClick: function onClick() {
+                                    return setSearch("");
+                                },
+                                className: "absolute right-[15px] top-1/2 -translate-y-1/2\r\n              w-[22px] h-[22px] rounded-full bg-[#9ca3af] text-white",
+                                children: "\u2715"
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "max-h-[220px] overflow-y-auto",
+                        children: [
+                            filteredOptions.map(function(opt) {
+                                return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                                    onClick: function onClick() {
+                                        return toggleValue(opt.value);
+                                    },
+                                    className: "px-4 py-[10px] text-[14px] flex items-center gap-2 cursor-pointer\n              hover:bg-[#f1f5f9] ".concat(values.includes(opt.value) ? "bg-[#e6f3ef]" : ""),
+                                    children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", {
+                                            type: "checkbox",
+                                            checked: values.includes(opt.value),
+                                            readOnly: true
+                                        }),
+                                        opt.label
+                                    ]
+                                }, opt.value);
+                            }),
+                            filteredOptions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                className: "p-3 text-[#9ca3af]",
+                                children: "No results"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function CascadingDropdown(param) {
+    var _param_label = param.label, label = _param_label === void 0 ? "Cascading Dropdown" : _param_label, data = param.data, value = param.value, testId = param.testId, onChange = param.onChange;
+    var _data_find, _level2_find;
+    var _ref = _sliced_to_array((0, import_react22.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var ref = (0, import_react22.useRef)(null);
+    (0, import_react22.useEffect)(function() {
+        var handler = function handler(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    var level1 = data;
+    var level2 = ((_data_find = data.find(function(d) {
+        return d.value === value.level1;
+    })) === null || _data_find === void 0 ? void 0 : _data_find.children) || [];
+    var level3 = ((_level2_find = level2.find(function(d) {
+        return d.value === value.level2;
+    })) === null || _level2_find === void 0 ? void 0 : _level2_find.children) || [];
+    var displayText = value.level3 || value.level2 || value.level1 || "Select location";
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", {
+                onClick: function onClick() {
+                    return setOpen(function(o) {
+                        return !o;
+                    });
+                },
+                className: "w-full flex justify-between items-center px-4 py-3 rounded-[8px]\r\n      bg-gradient-to-r from-[#1761a3] to-[#4daf83] text-white font-semibold",
+                children: [
+                    displayText,
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.ChevronDown, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                className: "absolute top-[calc(100%+8px)] left-0 w-full bg-white\r\n        rounded-[12px] border border-[rgba(77,175,131,0.4)] z-[100]",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                        className: "max-h-[220px] overflow-y-auto",
+                        children: level1.map(function(opt) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                onClick: function onClick() {
+                                    return onChange({
+                                        level1: opt.value
+                                    });
+                                },
+                                className: "px-4 py-[10px] text-[14px] cursor-pointer\n              hover:bg-[#f1f5f9] ".concat(value.level1 === opt.value ? "bg-[#e6f3ef]" : ""),
+                                children: opt.label
+                            }, opt.value);
+                        })
+                    }),
+                    level2.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                        className: "max-h-[220px] overflow-y-auto border-t border-[#e5e7eb]",
+                        children: level2.map(function(opt) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                                onClick: function onClick() {
+                                    return onChange({
+                                        level1: value.level1,
+                                        level2: opt.value
+                                    });
+                                },
+                                className: "px-4 py-[10px] text-[14px] cursor-pointer\n                hover:bg-[#f1f5f9] ".concat(value.level2 === opt.value ? "bg-[#e6f3ef]" : ""),
+                                children: [
+                                    "\u2514 ",
+                                    opt.label
+                                ]
+                            }, opt.value);
+                        })
+                    }),
+                    level3.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                        className: "max-h-[220px] overflow-y-auto border-t border-[#e5e7eb]",
+                        children: level3.map(function(opt) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                                onClick: function onClick() {
+                                    return onChange({
+                                        level1: value.level1,
+                                        level2: value.level2,
+                                        level3: opt.value
+                                    });
+                                },
+                                className: "px-4 py-[10px] text-[14px] cursor-pointer\n                hover:bg-[#f1f5f9] ".concat(value.level3 === opt.value ? "bg-[#e6f3ef]" : ""),
+                                children: [
+                                    "\u2514\u2500 ",
+                                    opt.label
+                                ]
+                            }, opt.value);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function GroupedDropdown(param) {
+    var _param_label = param.label, label = _param_label === void 0 ? "Grouped Dropdown" : _param_label, groups = param.groups, values = param.values, onChange = param.onChange, testId = param.testId;
+    var _ref = _sliced_to_array((0, import_react22.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var ref = (0, import_react22.useRef)(null);
+    (0, import_react22.useEffect)(function() {
+        var handler = function handler(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    var isSectionSelected = function isSectionSelected(group) {
+        return (values === null || values === void 0 ? void 0 : values.section) === group.label;
+    };
+    var isChildChecked = function isChildChecked(value) {
+        var _ref;
+        return (_ref = values === null || values === void 0 ? void 0 : values.values.includes(value)) !== null && _ref !== void 0 ? _ref : false;
+    };
+    var toggleSection = function toggleSection(group) {
+        if ((values === null || values === void 0 ? void 0 : values.section) === group.label) {
+            onChange(null);
+        } else {
+            onChange({
+                section: group.label,
+                values: group.options.map(function(o) {
+                    return o.value;
+                })
+            });
+        }
+    };
+    var toggleChild = function toggleChild(group, value) {
+        if ((values === null || values === void 0 ? void 0 : values.section) !== group.label) {
+            onChange({
+                section: group.label,
+                values: [
+                    value
+                ]
+            });
+            return;
+        }
+        var exists = values.values.includes(value);
+        var newValues = exists ? values.values.filter(function(v) {
+            return v !== value;
+        }) : _to_consumable_array(values.values).concat([
+            value
+        ]);
+        onChange(newValues.length === 0 ? null : {
+            section: group.label,
+            values: newValues
+        });
+    };
+    var displayValue = !values ? "Select options" : "".concat(values.section, " (").concat(values.values.map(function(v) {
+        var _groups_flatMap_find;
+        return (_groups_flatMap_find = groups.flatMap(function(g) {
+            return g.options;
+        }).find(function(o) {
+            return o.value === v;
+        })) === null || _groups_flatMap_find === void 0 ? void 0 : _groups_flatMap_find.label;
+    }).join(", "), ")");
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", {
+                onClick: function onClick() {
+                    return setOpen(function(o) {
+                        return !o;
+                    });
+                },
+                className: "w-full px-4 py-3 rounded-[8px] text-white font-semibold\r\n      bg-gradient-to-r from-[#1761a3] to-[#4daf83]\r\n      flex justify-between items-center",
+                children: [
+                    displayValue,
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.ChevronDown, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                className: "absolute top-[calc(100%+8px)] left-0 w-full bg-white\r\n        rounded-[12px] border border-[rgba(23,97,163,0.3)] z-[100]",
+                children: groups.map(function(group) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "p-3",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                                className: "flex items-center gap-2 font-semibold",
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", {
+                                        type: "checkbox",
+                                        checked: isSectionSelected(group),
+                                        onChange: function onChange() {
+                                            return toggleSection(group);
+                                        }
+                                    }),
+                                    group.label
+                                ]
+                            }),
+                            group.options.map(function(opt) {
+                                return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", {
+                                    className: "flex items-center gap-2 text-[14px] mt-[6px] ml-[22px]",
+                                    children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", {
+                                            type: "checkbox",
+                                            checked: isChildChecked(opt.value),
+                                            onChange: function onChange() {
+                                                return toggleChild(group, opt.value);
+                                            }
+                                        }),
+                                        opt.label
+                                    ]
+                                }, opt.value);
+                            })
+                        ]
+                    }, group.label);
+                })
+            })
+        ]
+    });
+}
+function AvatarDropdown(param) {
+    var _param_label = param.label, label = _param_label === void 0 ? "Select Avatar" : _param_label, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Choose user" : _param_placeholder, options = param.options, value = param.value, testId = param.testId, onChange = param.onChange;
+    var _ref = _sliced_to_array((0, import_react22.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var ref = (0, import_react22.useRef)(null);
+    (0, import_react22.useEffect)(function() {
+        var handler = function handler(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    var selected = options.find(function(o) {
+        return o.value === value;
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", {
+                onClick: function onClick() {
+                    return setOpen(function(o) {
+                        return !o;
+                    });
+                },
+                className: "w-full px-4 py-3 rounded-[8px] text-white font-semibold\r\n      bg-gradient-to-r from-[#1761a3] to-[#4daf83]\r\n      flex justify-between items-center",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", {
+                        className: "flex items-center gap-[10px]",
+                        children: selected ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, {
+                            children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", {
+                                    src: selected.image,
+                                    alt: selected.label,
+                                    className: "w-[28px] h-[28px] rounded-[6px] object-cover"
+                                }),
+                                selected.label
+                            ]
+                        }) : placeholder
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.ChevronDown, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                className: "absolute top-[calc(100%+8px)] left-0 w-full bg-white\r\n        rounded-[12px] border border-[rgba(77,175,131,0.4)] z-[100]",
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                    className: "max-h-[220px] overflow-y-auto",
+                    children: options.map(function(opt) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                            onClick: function onClick() {
+                                onChange(opt.value);
+                                setOpen(false);
+                            },
+                            className: "px-4 py-[10px] text-[14px] cursor-pointer\n              flex items-center gap-[12px]\n              hover:bg-[#f1f5f9]\n              ".concat(opt.value === value ? "bg-[#e6f3ef]" : ""),
+                            children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", {
+                                    src: opt.image,
+                                    alt: opt.label,
+                                    className: "w-[36px] h-[28px] rounded-[6px] object-cover"
+                                }),
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                                    children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                            className: "font-medium",
+                                            children: opt.label
+                                        }),
+                                        opt.subtitle && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                            className: "text-[12px] text-[#64748b]",
+                                            children: opt.subtitle
+                                        })
+                                    ]
+                                })
+                            ]
+                        }, opt.value);
+                    })
+                })
+            })
+        ]
+    });
+}
+function AvatarMultiSelectDropdown(param) {
+    var _param_label = param.label, label = _param_label === void 0 ? "Avatar Multi Select" : _param_label, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select users" : _param_placeholder, options = param.options, values = param.values, testId = param.testId, onChange = param.onChange;
+    var _ref = _sliced_to_array((0, import_react22.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var ref = (0, import_react22.useRef)(null);
+    (0, import_react22.useEffect)(function() {
+        var handler = function handler(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    var toggleValue = function toggleValue(value) {
+        if (values.includes(value)) {
+            onChange(values.filter(function(v) {
+                return v !== value;
+            }));
+        } else {
+            onChange(_to_consumable_array(values).concat([
+                value
+            ]));
+        }
+    };
+    var removeValue = function removeValue(value) {
+        onChange(values.filter(function(v) {
+            return v !== value;
+        }));
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", {
+                onClick: function onClick() {
+                    return setOpen(function(o) {
+                        return !o;
+                    });
+                },
+                className: "w-full px-4 py-3 rounded-[8px] text-white font-semibold\r\n      bg-gradient-to-r from-[#1761a3] to-[#4daf83]\r\n      flex justify-between items-center",
+                children: [
+                    placeholder,
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.ChevronDown, {
+                        size: 16
+                    })
+                ]
+            }),
+            values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                className: "flex flex-wrap gap-2 mt-3",
+                children: values.map(function(val) {
+                    var opt = options.find(function(o) {
+                        return o.value === val;
+                    });
+                    if (!opt) return null;
+                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "flex items-center gap-2 px-[10px] py-[6px]\r\n              bg-white border border-[#cde3f1] rounded-[10px] text-[13px]",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", {
+                                src: opt.image,
+                                alt: opt.label,
+                                className: "w-[24px] h-[24px] rounded-[6px] object-cover"
+                            }),
+                            opt.label,
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.X, {
+                                size: 14,
+                                className: "cursor-pointer",
+                                onClick: function onClick() {
+                                    return removeValue(val);
+                                }
+                            })
+                        ]
+                    }, val);
+                })
+            }),
+            open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                className: "absolute top-[calc(100%+8px)] left-0 w-full bg-white\r\n        rounded-[12px] border border-[rgba(77,175,131,0.4)] z-[100]",
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                    className: "max-h-[220px] overflow-y-auto",
+                    children: options.map(function(opt) {
+                        var active = values.includes(opt.value);
+                        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                            onClick: function onClick() {
+                                return toggleValue(opt.value);
+                            },
+                            className: "px-4 py-[10px] text-[14px] cursor-pointer\n                flex items-center gap-[12px]\n                hover:bg-[#f1f5f9]\n                ".concat(active ? "bg-[#e6f3ef]" : ""),
+                            children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", {
+                                    type: "checkbox",
+                                    checked: active,
+                                    readOnly: true,
+                                    className: "accent-[#1761a3]"
+                                }),
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", {
+                                    src: opt.image,
+                                    alt: opt.label,
+                                    className: "w-[36px] h-[28px] rounded-[6px] object-cover"
+                                }),
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                                    children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                            className: "font-medium",
+                                            children: opt.label
+                                        }),
+                                        opt.subtitle && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                            className: "text-[12px] text-[#64748b]",
+                                            children: opt.subtitle
+                                        })
+                                    ]
+                                })
+                            ]
+                        }, opt.value);
+                    })
+                })
+            })
+        ]
+    });
+}
+function AsyncDropdown(param) {
+    var _param_label = param.label, label = _param_label === void 0 ? "Async Dropdown" : _param_label, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Search..." : _param_placeholder, value = param.value, disabled = param.disabled, testId = param.testId, loadOptions = param.loadOptions, onChange = param.onChange;
+    var _ref = _sliced_to_array((0, import_react22.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react22.useState)(""), 2), search = _ref1[0], setSearch = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react22.useState)([]), 2), options = _ref2[0], setOptions = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react22.useState)(false), 2), loading = _ref3[0], setLoading = _ref3[1];
+    var ref = (0, import_react22.useRef)(null);
+    (0, import_react22.useEffect)(function() {
+        var handler = function handler(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return function() {
+            return document.removeEventListener("mousedown", handler);
+        };
+    }, []);
+    (0, import_react22.useEffect)(function() {
+        if (!open) return;
+        setLoading(true);
+        loadOptions(search).then(setOptions).finally(function() {
+            return setLoading(false);
+        });
+    }, [
+        open,
+        search,
+        loadOptions
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", {
+                disabled: disabled,
+                onClick: function onClick() {
+                    return !disabled && setOpen(function(o) {
+                        return !o;
+                    });
+                },
+                className: "w-full px-4 py-3 rounded-[8px] text-white font-semibold\n      bg-gradient-to-r from-[#1761a3] to-[#4daf83]\n      flex justify-between items-center\n      ".concat(disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"),
+                children: [
+                    value || placeholder,
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.ChevronDown, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && !disabled && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                className: "absolute top-[calc(100%+8px)] left-0 w-full bg-white\r\n        rounded-[12px] border border-[rgba(77,175,131,0.4)] z-[100]",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "p-3 border-b border-[#e5e7eb] relative",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", {
+                                value: search,
+                                placeholder: "Search...",
+                                onChange: function onChange(e) {
+                                    return setSearch(e.target.value);
+                                },
+                                className: "w-full h-[36px] px-3 pr-9 border rounded-[6px]\r\n            border-[rgba(23,97,163,0.3)] outline-none"
+                            }),
+                            search && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", {
+                                onClick: function onClick() {
+                                    return setSearch("");
+                                },
+                                className: "absolute right-[15px] top-1/2 -translate-y-1/2\r\n              w-[22px] h-[22px] rounded-full bg-[#9ca3af] text-white",
+                                children: "\u2715"
+                            })
+                        ]
+                    }),
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "px-4 py-[10px] text-[14px] flex items-center gap-2",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react5.Loader2, {
+                                size: 14,
+                                className: "mr-2 animate-spin"
+                            }),
+                            "Loading..."
+                        ]
+                    }),
+                    !loading && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
+                        className: "max-h-[220px] overflow-y-auto",
+                        children: [
+                            options.map(function(opt) {
+                                return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                    onClick: function onClick() {
+                                        onChange(opt.value);
+                                        setOpen(false);
+                                        setSearch("");
+                                    },
+                                    className: "px-4 py-[10px] text-[14px] cursor-pointer hover:bg-[#f1f5f9]",
+                                    children: opt.label
+                                }, opt.value);
+                            }),
+                            options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                                className: "p-3 text-[#9ca3af]",
+                                children: "No results"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
 // src/components/TextToAudio.tsx
 var import_react23 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -12586,18 +13293,24 @@ var MahatiNotificationCard = function MahatiNotificationCard(param) {
     LoadingDots: LoadingDots,
     LoadingDotsLinear: LoadingDotsLinear,
     MahatiActivity: MahatiActivity,
+    MahatiAsyncDropdown: MahatiAsyncDropdown,
+    MahatiAvatarDropdown: MahatiAvatarDropdown,
+    MahatiAvatarMultiSelectDropdown: MahatiAvatarMultiSelectDropdown,
     MahatiButton: MahatiButton,
     MahatiCalendar: MahatiCalendar,
     MahatiCameraAccessModal: MahatiCameraAccessModal,
     MahatiCard: MahatiCard,
+    MahatiCascadingDropdown: MahatiCascadingDropdown,
     MahatiChartAnalyticsWidget: MahatiChartAnalyticsWidget,
     MahatiConfettiExplosion: MahatiConfettiExplosion,
     MahatiDropdown: MahatiDropdown,
     MahatiFormContainer: MahatiFormContainer,
+    MahatiGroupedDropdown: MahatiGroupedDropdown,
     MahatiInput: MahatiInput,
     MahatiLocationAccessModal: MahatiLocationAccessModal,
     MahatiMicrophoneAccessModal: MahatiMicrophoneAccessModal,
     MahatiModal: MahatiModal,
+    MahatiMultiSelectDropdown: MahatiMultiSelectDropdown,
     MahatiNotificationCard: MahatiNotificationCard,
     MahatiPromotionModal_V1: MahatiPromotionModal_V1,
     MahatiPromotionModal_V2: MahatiPromotionModal_V2,