@mahatisystems/mahati-ui-components 5.0.0 → 5.0.2

package/dist/index.mjs

@@ -11046,6 +11046,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 _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
+    var _useState161 = _sliced_to_array(useState16(""), 2), search = _useState161[0], setSearch = _useState161[1];
+    var ref = useRef8(null);
+    var removeValue = function removeValue(val) {
+        onChange(values.filter(function(v) {
+            return v !== val;
+        }));
+    };
+    useEffect12(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__ */ jsxs26("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            /* @__PURE__ */ jsx31("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ jsxs26("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__ */ jsx31(ChevronDown4, {
+                        size: 16
+                    })
+                ]
+            }),
+            values.length > 0 && /* @__PURE__ */ jsx31("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__ */ jsxs26("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__ */ jsx31(X3, {
+                                size: 14,
+                                className: "cursor-pointer",
+                                onClick: function onClick() {
+                                    return removeValue(val);
+                                }
+                            })
+                        ]
+                    }, val);
+                })
+            }),
+            open && /* @__PURE__ */ jsxs26("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__ */ jsxs26("div", {
+                        className: "p-3 border-b border-[#e5e7eb] relative",
+                        children: [
+                            /* @__PURE__ */ jsx31("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__ */ jsx31("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__ */ jsxs26("div", {
+                        className: "max-h-[220px] overflow-y-auto",
+                        children: [
+                            filteredOptions.map(function(opt) {
+                                return /* @__PURE__ */ jsxs26("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__ */ jsx31("input", {
+                                            type: "checkbox",
+                                            checked: values.includes(opt.value),
+                                            readOnly: true
+                                        }),
+                                        opt.label
+                                    ]
+                                }, opt.value);
+                            }),
+                            filteredOptions.length === 0 && /* @__PURE__ */ jsx31("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 _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
+    var ref = useRef8(null);
+    useEffect12(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__ */ jsxs26("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            /* @__PURE__ */ jsx31("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ jsxs26("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__ */ jsx31(ChevronDown4, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && /* @__PURE__ */ jsxs26("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__ */ jsx31("div", {
+                        className: "max-h-[220px] overflow-y-auto",
+                        children: level1.map(function(opt) {
+                            return /* @__PURE__ */ jsx31("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__ */ jsx31("div", {
+                        className: "max-h-[220px] overflow-y-auto border-t border-[#e5e7eb]",
+                        children: level2.map(function(opt) {
+                            return /* @__PURE__ */ jsxs26("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__ */ jsx31("div", {
+                        className: "max-h-[220px] overflow-y-auto border-t border-[#e5e7eb]",
+                        children: level3.map(function(opt) {
+                            return /* @__PURE__ */ jsxs26("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 _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
+    var ref = useRef8(null);
+    useEffect12(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__ */ jsxs26("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ jsx31("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ jsxs26("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__ */ jsx31(ChevronDown4, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && /* @__PURE__ */ jsx31("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__ */ jsxs26("div", {
+                        className: "p-3",
+                        children: [
+                            /* @__PURE__ */ jsxs26("div", {
+                                className: "flex items-center gap-2 font-semibold",
+                                children: [
+                                    /* @__PURE__ */ jsx31("input", {
+                                        type: "checkbox",
+                                        checked: isSectionSelected(group),
+                                        onChange: function onChange() {
+                                            return toggleSection(group);
+                                        }
+                                    }),
+                                    group.label
+                                ]
+                            }),
+                            group.options.map(function(opt) {
+                                return /* @__PURE__ */ jsxs26("label", {
+                                    className: "flex items-center gap-2 text-[14px] mt-[6px] ml-[22px]",
+                                    children: [
+                                        /* @__PURE__ */ jsx31("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 _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
+    var ref = useRef8(null);
+    useEffect12(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__ */ jsxs26("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ jsx31("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ jsxs26("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__ */ jsx31("span", {
+                        className: "flex items-center gap-[10px]",
+                        children: selected ? /* @__PURE__ */ jsxs26(Fragment11, {
+                            children: [
+                                /* @__PURE__ */ jsx31("img", {
+                                    src: selected.image,
+                                    alt: selected.label,
+                                    className: "w-[28px] h-[28px] rounded-[6px] object-cover"
+                                }),
+                                selected.label
+                            ]
+                        }) : placeholder
+                    }),
+                    /* @__PURE__ */ jsx31(ChevronDown4, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && /* @__PURE__ */ jsx31("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__ */ jsx31("div", {
+                    className: "max-h-[220px] overflow-y-auto",
+                    children: options.map(function(opt) {
+                        return /* @__PURE__ */ jsxs26("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__ */ jsx31("img", {
+                                    src: opt.image,
+                                    alt: opt.label,
+                                    className: "w-[36px] h-[28px] rounded-[6px] object-cover"
+                                }),
+                                /* @__PURE__ */ jsxs26("div", {
+                                    children: [
+                                        /* @__PURE__ */ jsx31("div", {
+                                            className: "font-medium",
+                                            children: opt.label
+                                        }),
+                                        opt.subtitle && /* @__PURE__ */ jsx31("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 _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
+    var ref = useRef8(null);
+    useEffect12(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__ */ jsxs26("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ jsx31("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ jsxs26("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__ */ jsx31(ChevronDown4, {
+                        size: 16
+                    })
+                ]
+            }),
+            values.length > 0 && /* @__PURE__ */ jsx31("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__ */ jsxs26("div", {
+                        className: "flex items-center gap-2 px-[10px] py-[6px]\r\n              bg-white border border-[#cde3f1] rounded-[10px] text-[13px]",
+                        children: [
+                            /* @__PURE__ */ jsx31("img", {
+                                src: opt.image,
+                                alt: opt.label,
+                                className: "w-[24px] h-[24px] rounded-[6px] object-cover"
+                            }),
+                            opt.label,
+                            /* @__PURE__ */ jsx31(X3, {
+                                size: 14,
+                                className: "cursor-pointer",
+                                onClick: function onClick() {
+                                    return removeValue(val);
+                                }
+                            })
+                        ]
+                    }, val);
+                })
+            }),
+            open && /* @__PURE__ */ jsx31("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__ */ jsx31("div", {
+                    className: "max-h-[220px] overflow-y-auto",
+                    children: options.map(function(opt) {
+                        var active = values.includes(opt.value);
+                        return /* @__PURE__ */ jsxs26("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__ */ jsx31("input", {
+                                    type: "checkbox",
+                                    checked: active,
+                                    readOnly: true,
+                                    className: "accent-[#1761a3]"
+                                }),
+                                /* @__PURE__ */ jsx31("img", {
+                                    src: opt.image,
+                                    alt: opt.label,
+                                    className: "w-[36px] h-[28px] rounded-[6px] object-cover"
+                                }),
+                                /* @__PURE__ */ jsxs26("div", {
+                                    children: [
+                                        /* @__PURE__ */ jsx31("div", {
+                                            className: "font-medium",
+                                            children: opt.label
+                                        }),
+                                        opt.subtitle && /* @__PURE__ */ jsx31("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 _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
+    var _useState161 = _sliced_to_array(useState16(""), 2), search = _useState161[0], setSearch = _useState161[1];
+    var _useState162 = _sliced_to_array(useState16([]), 2), options = _useState162[0], setOptions = _useState162[1];
+    var _useState163 = _sliced_to_array(useState16(false), 2), loading = _useState163[0], setLoading = _useState163[1];
+    var ref = useRef8(null);
+    useEffect12(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);
+        };
+    }, []);
+    useEffect12(function() {
+        if (!open) return;
+        setLoading(true);
+        loadOptions(search).then(setOptions).finally(function() {
+            return setLoading(false);
+        });
+    }, [
+        open,
+        search,
+        loadOptions
+    ]);
+    return /* @__PURE__ */ jsxs26("div", {
+        ref: ref,
+        "data-testid": testId,
+        className: "relative w-[320px] max-w-full mx-auto",
+        children: [
+            label && /* @__PURE__ */ jsx31("label", {
+                className: "block mb-2 text-[12px] font-semibold text-[#1761a3]",
+                children: label
+            }),
+            /* @__PURE__ */ jsxs26("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__ */ jsx31(ChevronDown4, {
+                        size: 16
+                    })
+                ]
+            }),
+            open && !disabled && /* @__PURE__ */ jsxs26("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__ */ jsxs26("div", {
+                        className: "p-3 border-b border-[#e5e7eb] relative",
+                        children: [
+                            /* @__PURE__ */ jsx31("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__ */ jsx31("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__ */ jsxs26("div", {
+                        className: "px-4 py-[10px] text-[14px] flex items-center gap-2",
+                        children: [
+                            /* @__PURE__ */ jsx31(Loader2, {
+                                size: 14,
+                                className: "mr-2 animate-spin"
+                            }),
+                            "Loading..."
+                        ]
+                    }),
+                    !loading && /* @__PURE__ */ jsxs26("div", {
+                        className: "max-h-[220px] overflow-y-auto",
+                        children: [
+                            options.map(function(opt) {
+                                return /* @__PURE__ */ jsx31("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__ */ jsx31("div", {
+                                className: "p-3 text-[#9ca3af]",
+                                children: "No results"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
 // src/components/TextToAudio.tsx
 import { useEffect as useEffect13, useRef as useRef9, useState as useState17 } from "react";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -12400,5 +13089,5 @@ var MahatiNotificationCard = function MahatiNotificationCard(param) {
         ]
     });
 };
-export { Accordion, CardOverlayLoader, CardWithLoading, CircularSpinner, DEFAULT_ACTIVITY_OPTIONS, DEFAULT_STATUS_OPTIONS, Filter, LoadingDots, LoadingDotsLinear, MahatiActivity, Button as MahatiButton, Calendar as MahatiCalendar, MahatiCameraAccessModal, Card as MahatiCard, MahatiChartAnalyticsWidget, ConfettiExplosion as MahatiConfettiExplosion, Dropdown as MahatiDropdown, FormContainer as MahatiFormContainer, Input as MahatiInput, MahatiLocationAccessModal, MahatiMicrophoneAccessModal, Modal as MahatiModal, MahatiNotificationCard, MahatiPromotionModal as MahatiPromotionModal_V1, MahatiPromotionModalV2Modal as MahatiPromotionModal_V2, MahatiPromotionModalV3Modal as MahatiPromotionModal_V3, RealisticConfetti as MahatiRealisticConfetti, MahatiSearch, SearchableDropdown as MahatiSearchableDropdown, MahatiStatus, TabbedInterface as MahatiTabbedInterface, Table as MahatiTable, TableWithTab as MahatiTableWithTab, TexttoAudio as MahatiTexttoAudio, ToastMessage as MahatiToastMessage, Tooltip2 as MahatiTooltip, Spinner };
+export { Accordion, CardOverlayLoader, CardWithLoading, CircularSpinner, DEFAULT_ACTIVITY_OPTIONS, DEFAULT_STATUS_OPTIONS, Filter, LoadingDots, LoadingDotsLinear, MahatiActivity, AsyncDropdown as MahatiAsyncDropdown, AvatarDropdown as MahatiAvatarDropdown, AvatarMultiSelectDropdown as MahatiAvatarMultiSelectDropdown, Button as MahatiButton, Calendar as MahatiCalendar, MahatiCameraAccessModal, Card as MahatiCard, CascadingDropdown as MahatiCascadingDropdown, MahatiChartAnalyticsWidget, ConfettiExplosion as MahatiConfettiExplosion, Dropdown as MahatiDropdown, FormContainer as MahatiFormContainer, GroupedDropdown as MahatiGroupedDropdown, Input as MahatiInput, MahatiLocationAccessModal, MahatiMicrophoneAccessModal, Modal as MahatiModal, MultiSelectDropdown as MahatiMultiSelectDropdown, MahatiNotificationCard, MahatiPromotionModal as MahatiPromotionModal_V1, MahatiPromotionModalV2Modal as MahatiPromotionModal_V2, MahatiPromotionModalV3Modal as MahatiPromotionModal_V3, RealisticConfetti as MahatiRealisticConfetti, MahatiSearch, SearchableDropdown as MahatiSearchableDropdown, MahatiStatus, TabbedInterface as MahatiTabbedInterface, Table as MahatiTable, TableWithTab as MahatiTableWithTab, TexttoAudio as MahatiTexttoAudio, ToastMessage as MahatiToastMessage, Tooltip2 as MahatiTooltip, Spinner };
 //# sourceMappingURL=index.mjs.map