@eztrak/shared 0.9.0 → 0.12.0

package/dist/components/index.js

@@ -33,6 +33,7 @@ __export(components_exports, {
   CardSkeleton: () => CardSkeleton,
   CustomCellEditor: () => CustomCellEditor,
   CustomPagination: () => CustomPagination,
+  DropdownFilter: () => DropdownFilter,
   EztrakTabs: () => EztrakTabs,
   Loader: () => Loader,
   Modal: () => Modal,
@@ -41,7 +42,8 @@ __export(components_exports, {
   SearchInput: () => SearchInput,
   TableLayoutToolbarControls: () => TableLayoutToolbarControls,
   ToolTip: () => ToolTip,
-  TooltipText: () => TooltipText
+  TooltipText: () => TooltipText,
+  dropdownStyles: () => dropdownStyles
 });
 module.exports = __toCommonJS(components_exports);
 
@@ -266,18 +268,92 @@ var import_react_router_dom = require("react-router-dom");
 // src/utils/handleApiError.ts
 var import_react_hot_toast = __toESM(require("react-hot-toast"));
 var import_sweetalert2 = __toESM(require("sweetalert2"));
+var BRAND_ORANGE = "#FF7335";
+var CANCEL_RED = "#ff0000";
+function getConfirmErrorMessage(error) {
+  if (error && typeof error === "object") {
+    const err = error;
+    return err.data?.message || err.data?.title || err.message || "Something went wrong. Please try again.";
+  }
+  return "Something went wrong. Please try again.";
+}
 function confirmationAlert(onConfirm, options = {}) {
-  void import_sweetalert2.default.fire({
-    title: options.title ?? "Are you sure?",
-    text: options.text,
-    icon: options.icon ?? "warning",
+  const {
+    title = options.inputExpectedValue ? "Confirmation Required" : "Are you sure?",
+    text,
+    html,
+    icon = "warning",
+    confirmButtonText = "Yes",
+    cancelButtonText = "Cancel",
+    confirmButtonColor = BRAND_ORANGE,
+    cancelButtonColor = CANCEL_RED,
+    showLoaderOnConfirm = false,
+    inputExpectedValue,
+    inputPlaceholder = "Type confirmation text to proceed",
+    reverseButtons,
+    focusCancel,
+    zIndex
+  } = options;
+  const hasInput = Boolean(inputExpectedValue);
+  const useLoader = showLoaderOnConfirm || hasInput;
+  const inputHtml = html ?? (hasInput ? `
+      ${text ? `<p style="margin-bottom: 15px;">${text}</p>` : ""}
+      <p style="margin-bottom: 10px; font-weight: bold; color: #666;">
+        Please type "<span style="color: ${BRAND_ORANGE}; font-weight: bold;">${inputExpectedValue}</span>" to confirm:
+      </p>
+    ` : void 0);
+  const swalOptions = {
+    title,
+    icon,
     showCancelButton: true,
-    confirmButtonText: options.confirmButtonText ?? "Yes",
-    cancelButtonText: options.cancelButtonText ?? "Cancel",
-    confirmButtonColor: "#FF7335"
-  }).then((result) => {
-    if (result.isConfirmed) {
-      onConfirm();
+    confirmButtonText,
+    cancelButtonText,
+    confirmButtonColor,
+    cancelButtonColor,
+    reverseButtons,
+    focusCancel,
+    allowOutsideClick: () => !import_sweetalert2.default.isLoading(),
+    allowEscapeKey: () => !import_sweetalert2.default.isLoading(),
+    didOpen: () => {
+      if (zIndex == null) return;
+      const container = import_sweetalert2.default.getContainer();
+      if (container) container.style.zIndex = String(zIndex);
+    }
+  };
+  if (hasInput) {
+    swalOptions.html = inputHtml;
+    swalOptions.input = "text";
+    swalOptions.inputPlaceholder = inputPlaceholder;
+    swalOptions.inputValidator = (value) => {
+      if (!value?.trim()) return "You need to enter the confirmation text!";
+      if (value.trim() !== inputExpectedValue.trim()) {
+        return `Please type "${inputExpectedValue}" exactly as shown!`;
+      }
+      return null;
+    };
+  } else if (html) {
+    swalOptions.html = html;
+  } else {
+    swalOptions.text = text;
+  }
+  if (useLoader) {
+    swalOptions.showLoaderOnConfirm = true;
+    swalOptions.preConfirm = (inputValue) => {
+      if (hasInput && inputValue?.trim() !== inputExpectedValue.trim()) {
+        import_sweetalert2.default.showValidationMessage(
+          `Please type "${inputExpectedValue}" exactly as shown!`
+        );
+        return false;
+      }
+      return Promise.resolve().then(() => onConfirm()).catch((error) => {
+        import_sweetalert2.default.showValidationMessage(getConfirmErrorMessage(error));
+        throw error;
+      });
+    };
+  }
+  void import_sweetalert2.default.fire(swalOptions).then((result) => {
+    if (result.isConfirmed && !useLoader) {
+      void Promise.resolve(onConfirm());
     }
   });
 }
@@ -597,9 +673,119 @@ function CustomPagination({
   );
 }
 
-// src/components/search-filters/ResetFiltersButton.tsx
+// src/components/search-filters/DropdownFilter.tsx
+var import_react_select = __toESM(require("react-select"));
 var import_react_router_dom2 = require("react-router-dom");
+
+// src/components/search-filters/dropdownStyles.ts
+var themeColors = {
+  primary: "#FF7335",
+  primaryHover: "#E65C2E",
+  lightBackground: "#FFF3EB",
+  textColor: "black",
+  white: "white"
+};
+var dropdownStyles = (_borderRadius = "5px") => ({
+  control: (provided, state) => ({
+    ...provided,
+    fontSize: "14px",
+    padding: "4px 8px",
+    minWidth: "180px",
+    borderRadius: "5px",
+    cursor: "pointer",
+    borderColor: state.isFocused ? themeColors.primary : "#e0e0e0",
+    boxShadow: state.isFocused ? "0 0 0 2px rgba(255, 115, 53, 0.3)" : "none",
+    "&:hover": {
+      borderColor: themeColors.primary
+    },
+    transition: "border-color 0.2s, box-shadow 0.2s",
+    zIndex: 50
+  }),
+  option: (provided, state) => ({
+    ...provided,
+    fontSize: "14px",
+    backgroundColor: state.isSelected ? themeColors.primary : state.isFocused ? themeColors.lightBackground : themeColors.white,
+    borderRadius: "5px",
+    cursor: "pointer",
+    borderColor: state.isFocused ? themeColors.primary : "#e0e0e0",
+    color: state.isSelected ? themeColors.white : state.isFocused ? themeColors.primary : themeColors.textColor,
+    "&:hover": {
+      backgroundColor: themeColors.lightBackground,
+      color: themeColors.primary
+    },
+    "&:active": {
+      backgroundColor: themeColors.primary,
+      color: themeColors.white
+    },
+    transition: "background-color 0.2s, color 0.2s",
+    zIndex: 50
+  }),
+  singleValue: (provided) => ({
+    ...provided,
+    color: themeColors.textColor,
+    zIndex: 50
+  }),
+  menu: (provided) => ({
+    ...provided,
+    borderRadius: "5px",
+    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+    marginTop: "4px",
+    zIndex: 50
+  }),
+  dropdownIndicator: (provided) => ({
+    ...provided,
+    color: themeColors.primary,
+    "&:hover": {
+      color: themeColors.primaryHover
+    },
+    zIndex: 50
+  }),
+  indicatorSeparator: () => ({
+    display: "none"
+  })
+});
+
+// src/components/search-filters/DropdownFilter.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function DropdownFilter({
+  name,
+  valueKey = "id",
+  options,
+  placeholder,
+  borderRadius = "20px",
+  ...otherProps
+}) {
+  const [searchParams, setSearchParams] = (0, import_react_router_dom2.useSearchParams)();
+  const currentValue = searchParams.get(name);
+  const selectedOption = currentValue ? options?.find(
+    (option) => option[valueKey]?.toString() === currentValue
+  ) ?? null : null;
+  const handleChange = (selected) => {
+    setSearchParams((prev) => {
+      if (!selected || selected[valueKey] === "") {
+        prev.delete(name);
+      } else {
+        prev.set(name, String(selected[valueKey]));
+      }
+      return prev;
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_select.default,
+    {
+      placeholder: placeholder ?? `Select ${name}`,
+      value: selectedOption,
+      onChange: handleChange,
+      options,
+      styles: dropdownStyles(borderRadius),
+      ...otherProps
+    }
+  );
+}
+
+// src/components/search-filters/ResetFiltersButton.tsx
+var import_react_router_dom3 = require("react-router-dom");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var BASE_STYLES = "inline-flex items-center gap-1.5 px-5 py-3 rounded-md text-sm font-medium transition-colors duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50";
 var VARIANTS = {
   primary: "bg-white text-secondary border border-secondary hover:bg-lightGray hover:text-black",
@@ -614,7 +800,7 @@ function ResetIcon({
   size = 16,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "svg",
     {
       width: size,
@@ -628,10 +814,10 @@ function ResetIcon({
       "aria-hidden": "true",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3v5h-5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 16H3v5" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 16H3v5" })
       ]
     }
   );
@@ -645,13 +831,13 @@ function ResetFiltersButton({
   onReset,
   disabled = false
 }) {
-  const [, setSearchParams] = (0, import_react_router_dom2.useSearchParams)();
+  const [, setSearchParams] = (0, import_react_router_dom3.useSearchParams)();
   const handleReset = () => {
     setSearchParams({}, { replace: true });
     onReset?.();
   };
-  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ResetIcon, { size: 16 }) : icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ResetIcon, { size: 16 }) : icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
       type: "button",
@@ -669,8 +855,8 @@ function ResetFiltersButton({
 // src/components/search-filters/SearchInput.tsx
 var import_react2 = require("react");
 var import_fi = require("react-icons/fi");
-var import_react_router_dom3 = require("react-router-dom");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react_router_dom4 = require("react-router-dom");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function SearchInput({
   placeholder = "Search...",
   searchBtn = "",
@@ -687,7 +873,7 @@ function SearchInput({
   defaultValue,
   ...props
 }) {
-  const [searchParams, setSearchParams] = (0, import_react_router_dom3.useSearchParams)();
+  const [searchParams, setSearchParams] = (0, import_react_router_dom4.useSearchParams)();
   const queryParam = searchParams.get(defaultParam) || defaultValue || "";
   const [inputValue, setInputValue] = (0, import_react2.useState)(queryParam);
   const debounceTimerRef = (0, import_react2.useRef)(null);
@@ -739,7 +925,7 @@ function SearchInput({
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "form",
     {
       onSubmit: handleSearch,
@@ -748,7 +934,7 @@ function SearchInput({
         searchWrapperClass
       ),
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             type: "submit",
@@ -756,7 +942,7 @@ function SearchInput({
               "bg-white text-secondary rounded-full flex items-center justify-center w-10 h-10",
               searchBtn
             ),
-            children: customIcon ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: customIcon ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               import_fi.FiSearch,
               {
                 className: cn("h-5 w-5 text-gray-400", searchIconClassName)
@@ -764,7 +950,7 @@ function SearchInput({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "input",
           {
             value: inputValue,
@@ -789,9 +975,9 @@ var import_fa = require("react-icons/fa");
 var import_io5 = require("react-icons/io5");
 
 // src/components/Loader/Loader.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `loader`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `loader`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: `spinner ${className}`,
@@ -808,7 +994,7 @@ var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) =>
 };
 
 // src/components/modal/Modal.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Modal({
   isOpen,
   onClose,
@@ -849,7 +1035,7 @@ function Modal({
       document.body.style.overflow = "unset";
     };
   }, [isOpen, onClose, closeOnEscape]);
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-1000 p-4",
@@ -868,7 +1054,7 @@ function Modal({
         zIndex
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           import_framer_motion.motion.div,
           {
             ref: modalRef,
@@ -889,7 +1075,7 @@ function Modal({
               // Ensure modal doesn't exceed viewport height
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "div",
                 {
                   style: {
@@ -897,43 +1083,43 @@ function Modal({
                   },
                   className: "sticky top-0 z-10 flex justify-between items-center bg-white text-2xl p-8 pb-4 rounded-t-3xl",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "font-semibold", children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center space-x-4", children: [
-                      onPrint && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: "font-semibold", children: title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center space-x-4", children: [
+                      onPrint && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                         "button",
                         {
                           onClick: onPrint,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPrint, { name: "FaPrint" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Print" })
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa.FaPrint, { name: "FaPrint" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Print" })
                           ]
                         }
                       ),
-                      onExport && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                      onExport && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                         "button",
                         {
                           onClick: onExport,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaFileExport, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Export" })
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa.FaFileExport, {}),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Export" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "button",
                         {
                           onClick: onClose,
                           className: "px-2 hover:opacity-70 transition-opacity",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_io5.IoCloseCircleOutline, { color: "#8898AA", size: 25 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_io5.IoCloseCircleOutline, { color: "#8898AA", size: 25 })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   className: cn(
@@ -943,7 +1129,7 @@ function Modal({
                   children
                 }
               ),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              footer && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   className: cn("sticky bottom-0 flex justify-end p-4 space-x-4 border-t bg-white ", footerClassName),
@@ -957,7 +1143,7 @@ function Modal({
             ]
           }
         ),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: "fixed inset-0 flex items-center justify-center bg-gray-200/60",
@@ -966,7 +1152,7 @@ function Modal({
             "aria-live": "polite",
             role: "status",
             onClick: (e) => e.stopPropagation(),
-            children: customLoader ? customLoader : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader, { size: "48px" })
+            children: customLoader ? customLoader : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loader, { size: "48px" })
           }
         )
       ]
@@ -982,7 +1168,7 @@ function Modal({
 }
 
 // src/components/skeleton/CardSkeleton.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEFAULT_LINE_WIDTHS = ["w-32", "w-48"];
 function shouldShowAvatar(variant, showAvatar) {
   return showAvatar ?? variant === "profile";
@@ -991,7 +1177,7 @@ function shouldShowImage(variant, showImage) {
   return showImage ?? variant === "image";
 }
 function AvatarSkeleton({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       className: cn("w-10 h-10 text-gray-200 dark:text-gray-700", className),
@@ -999,7 +1185,7 @@ function AvatarSkeleton({ className }) {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
       viewBox: "0 0 20 20",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" })
     }
   );
 }
@@ -1008,7 +1194,7 @@ function SkeletonBlock({
   className,
   isFirst
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       className: cn(
@@ -1040,14 +1226,14 @@ function CardSkeleton({
   const skeletons = Array.from({ length: Math.max(1, count) }, (_, index) => {
     const renderAvatar = shouldShowAvatar(variant, showAvatar);
     const renderImage = shouldShowImage(variant, showImage);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: cn("animate-pulse md:p-6 dark:border-gray-700", className),
         style: { animationDuration, ...style },
         ...props,
         children: [
-          renderImage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          renderImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: cn(
@@ -1056,9 +1242,9 @@ function CardSkeleton({
               )
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
-            renderAvatar ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvatarSkeleton, { className: avatarClassName }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
+            renderAvatar ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarSkeleton, { className: avatarClassName }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               SkeletonBlock,
               {
                 widthClass: lineWidths[lineIndex] ?? lineWidths[lineWidths.length - 1] ?? DEFAULT_LINE_WIDTHS[1],
@@ -1068,19 +1254,19 @@ function CardSkeleton({
               lineIndex
             )) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: srLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: srLabel })
         ]
       },
       index
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: skeletons });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: skeletons });
 }
 
 // src/components/tooltip/ToolTip.tsx
 var import_react4 = require("react");
 var import_react_tooltip = require("react-tooltip");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var defaultTooltipStyle = {
   color: "#fff",
   borderRadius: "5px",
@@ -1107,10 +1293,10 @@ function ToolTip({
   const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
   const tooltipText = String(text ?? "");
   if (disabled || !tooltipText) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
         className,
@@ -1120,7 +1306,7 @@ function ToolTip({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_react_tooltip.Tooltip,
       {
         id: tooltipId,
@@ -1164,7 +1350,7 @@ var toDateInputValue = (date) => {
 };
 
 // src/components/tooltip/TooltipText.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TooltipText({
   text = "",
   maxLength = 20,
@@ -1184,7 +1370,7 @@ function TooltipText({
   const displayText = truncateText(fullText, maxLength);
   const isTruncated = displayText !== fullText;
   const tooltipDisabled = !showTooltip || !hasValue || tooltipWhenTruncatedOnly && !isTruncated;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ToolTip,
     {
       text: fullText,
@@ -1196,7 +1382,7 @@ function TooltipText({
       tooltipStyle,
       wrapperTabIndex: tooltipDisabled ? void 0 : 0,
       disabled: tooltipDisabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
     }
   );
 }
@@ -1204,9 +1390,9 @@ function TooltipText({
 // src/components/cell-editor/CustomCellEditor.tsx
 var import_react5 = require("react");
 var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ButtonSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "svg",
     {
       className: "animate-spin",
@@ -1216,7 +1402,7 @@ function ButtonSpinner() {
       fill: "none",
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "circle",
           {
             cx: "12",
@@ -1227,7 +1413,7 @@ function ButtonSpinner() {
             strokeOpacity: "0.25"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "path",
           {
             d: "M12 2a10 10 0 0 1 10 10",
@@ -1363,7 +1549,7 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
     const defaultInputClass = "w-48 px-2 py-1 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-400";
     const defaultSaveBtnClass = "px-3 py-1 text-sm font-medium text-white bg-green-500 rounded-md hover:bg-green-600 disabled:opacity-50 whitespace-nowrap shrink-0";
     const defaultCancelBtnClass = "px-3 py-1 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600 disabled:opacity-50 whitespace-nowrap shrink-0";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         className: cn(
@@ -1372,7 +1558,7 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
         ),
         style: containerStyle,
         children: [
-          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "select",
             {
               ref: selectRef,
@@ -1382,11 +1568,11 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
               className: inputClassName ?? defaultInputClass,
               disabled: isLoading,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
-                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
+                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "input",
             {
               ref: inputRef,
@@ -1399,7 +1585,7 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
               disabled: isLoading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
@@ -1408,10 +1594,10 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
               className: saveButtonClassName ?? (saveButtonStyle ? void 0 : defaultSaveBtnClass),
               style: saveButtonStyle,
               title: "Save (Enter)",
-              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
@@ -1434,6 +1620,7 @@ CustomCellEditor.displayName = "CustomCellEditor";
   CardSkeleton,
   CustomCellEditor,
   CustomPagination,
+  DropdownFilter,
   EztrakTabs,
   Loader,
   Modal,
@@ -1442,6 +1629,7 @@ CustomCellEditor.displayName = "CustomCellEditor";
   SearchInput,
   TableLayoutToolbarControls,
   ToolTip,
-  TooltipText
+  TooltipText,
+  dropdownStyles
 });
 //# sourceMappingURL=index.js.map