@eztrak/shared 0.11.0 → 0.12.1

package/dist/{chunk-CIFNA6LN.mjs → chunk-3FD7O5VS.mjs}

@@ -533,9 +533,130 @@ function CustomPagination({
   );
 }
 
-// src/components/search-filters/ResetFiltersButton.tsx
+// src/components/search-filters/DropdownFilter.tsx
+import Select from "react-select";
 import { useSearchParams as useSearchParams2 } from "react-router-dom";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// 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
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DropdownFilter({
+  name,
+  valueKey = "id",
+  options,
+  placeholder,
+  borderRadius = "20px",
+  className,
+  isClearable = true,
+  isSearchable = true,
+  isDisabled = false,
+  isLoading = false,
+  ...otherProps
+}) {
+  const [searchParams, setSearchParams] = useSearchParams2();
+  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__ */ jsx3("div", { className: cn(className), children: /* @__PURE__ */ jsx3(
+    Select,
+    {
+      placeholder: placeholder ?? `Select ${name}`,
+      value: selectedOption,
+      onChange: handleChange,
+      options,
+      isClearable,
+      isSearchable,
+      isDisabled,
+      isLoading,
+      getOptionValue: (option) => String(option[valueKey] ?? ""),
+      getOptionLabel: (option) => String(option.label ?? option.name ?? option[valueKey] ?? ""),
+      styles: dropdownStyles(borderRadius),
+      ...otherProps
+    }
+  ) });
+}
+
+// src/components/search-filters/ResetFiltersButton.tsx
+import { useSearchParams as useSearchParams3 } from "react-router-dom";
+import { jsx as jsx4, jsxs as jsxs3 } from "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",
@@ -564,10 +685,10 @@ function ResetIcon({
       "aria-hidden": "true",
       className,
       children: [
-        /* @__PURE__ */ jsx3("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-        /* @__PURE__ */ jsx3("path", { d: "M21 3v5h-5" }),
-        /* @__PURE__ */ jsx3("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-        /* @__PURE__ */ jsx3("path", { d: "M8 16H3v5" })
+        /* @__PURE__ */ jsx4("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ jsx4("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ jsx4("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ jsx4("path", { d: "M8 16H3v5" })
       ]
     }
   );
@@ -581,12 +702,12 @@ function ResetFiltersButton({
   onReset,
   disabled = false
 }) {
-  const [, setSearchParams] = useSearchParams2();
+  const [, setSearchParams] = useSearchParams3();
   const handleReset = () => {
     setSearchParams({}, { replace: true });
     onReset?.();
   };
-  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsx3(ResetIcon, { size: 16 }) : icon;
+  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsx4(ResetIcon, { size: 16 }) : icon;
   return /* @__PURE__ */ jsxs3(
     "button",
     {
@@ -609,8 +730,8 @@ import {
   useState as useState2
 } from "react";
 import { FiSearch } from "react-icons/fi";
-import { useSearchParams as useSearchParams3 } from "react-router-dom";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useSearchParams as useSearchParams4 } from "react-router-dom";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function SearchInput({
   placeholder = "Search...",
   searchBtn = "",
@@ -627,7 +748,7 @@ function SearchInput({
   defaultValue,
   ...props
 }) {
-  const [searchParams, setSearchParams] = useSearchParams3();
+  const [searchParams, setSearchParams] = useSearchParams4();
   const queryParam = searchParams.get(defaultParam) || defaultValue || "";
   const [inputValue, setInputValue] = useState2(queryParam);
   const debounceTimerRef = useRef2(null);
@@ -688,7 +809,7 @@ function SearchInput({
         searchWrapperClass
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx4(
+        showIcon && /* @__PURE__ */ jsx5(
           "button",
           {
             type: "submit",
@@ -696,7 +817,7 @@ function SearchInput({
               "bg-white text-secondary rounded-full flex items-center justify-center w-10 h-10",
               searchBtn
             ),
-            children: customIcon ? customIcon : /* @__PURE__ */ jsx4(
+            children: customIcon ? customIcon : /* @__PURE__ */ jsx5(
               FiSearch,
               {
                 className: cn("h-5 w-5 text-gray-400", searchIconClassName)
@@ -704,7 +825,7 @@ function SearchInput({
             )
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "input",
           {
             value: inputValue,
@@ -729,9 +850,9 @@ import { FaFileExport, FaPrint } from "react-icons/fa";
 import { IoCloseCircleOutline } from "react-icons/io5";
 
 // src/components/Loader/Loader.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) => {
-  return /* @__PURE__ */ jsx5("div", { className: `loader`, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6("div", { className: `loader`, children: /* @__PURE__ */ jsx6(
     "div",
     {
       className: `spinner ${className}`,
@@ -748,7 +869,7 @@ var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) =>
 };
 
 // src/components/modal/Modal.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Modal({
   isOpen,
   onClose,
@@ -789,7 +910,7 @@ function Modal({
       document.body.style.overflow = "unset";
     };
   }, [isOpen, onClose, closeOnEscape]);
-  const modalContent = /* @__PURE__ */ jsx6(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs5(
+  const modalContent = /* @__PURE__ */ jsx7(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs5(
     "div",
     {
       className: "fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-1000 p-4",
@@ -837,7 +958,7 @@ 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__ */ jsx6("h2", { className: "font-semibold", children: title }),
+                    /* @__PURE__ */ jsx7("h2", { className: "font-semibold", children: title }),
                     /* @__PURE__ */ jsxs5("div", { className: "flex items-center space-x-4", children: [
                       onPrint && /* @__PURE__ */ jsxs5(
                         "button",
@@ -845,8 +966,8 @@ function Modal({
                           onClick: onPrint,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ jsx6(FaPrint, { name: "FaPrint" }),
-                            /* @__PURE__ */ jsx6("span", { children: "Print" })
+                            /* @__PURE__ */ jsx7(FaPrint, { name: "FaPrint" }),
+                            /* @__PURE__ */ jsx7("span", { children: "Print" })
                           ]
                         }
                       ),
@@ -856,24 +977,24 @@ function Modal({
                           onClick: onExport,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ jsx6(FaFileExport, {}),
-                            /* @__PURE__ */ jsx6("span", { children: "Export" })
+                            /* @__PURE__ */ jsx7(FaFileExport, {}),
+                            /* @__PURE__ */ jsx7("span", { children: "Export" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx6(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           onClick: onClose,
                           className: "px-2 hover:opacity-70 transition-opacity",
-                          children: /* @__PURE__ */ jsx6(IoCloseCircleOutline, { color: "#8898AA", size: 25 })
+                          children: /* @__PURE__ */ jsx7(IoCloseCircleOutline, { color: "#8898AA", size: 25 })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "div",
                 {
                   className: cn(
@@ -883,7 +1004,7 @@ function Modal({
                   children
                 }
               ),
-              footer && /* @__PURE__ */ jsx6(
+              footer && /* @__PURE__ */ jsx7(
                 "div",
                 {
                   className: cn("sticky bottom-0 flex justify-end p-4 space-x-4 border-t bg-white ", footerClassName),
@@ -897,7 +1018,7 @@ function Modal({
             ]
           }
         ),
-        isLoading && /* @__PURE__ */ jsx6(
+        isLoading && /* @__PURE__ */ jsx7(
           "div",
           {
             className: "fixed inset-0 flex items-center justify-center bg-gray-200/60",
@@ -906,7 +1027,7 @@ function Modal({
             "aria-live": "polite",
             role: "status",
             onClick: (e) => e.stopPropagation(),
-            children: customLoader ? customLoader : /* @__PURE__ */ jsx6(Loader, { size: "48px" })
+            children: customLoader ? customLoader : /* @__PURE__ */ jsx7(Loader, { size: "48px" })
           }
         )
       ]
@@ -922,7 +1043,7 @@ function Modal({
 }
 
 // src/components/skeleton/CardSkeleton.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_LINE_WIDTHS = ["w-32", "w-48"];
 function shouldShowAvatar(variant, showAvatar) {
   return showAvatar ?? variant === "profile";
@@ -931,7 +1052,7 @@ function shouldShowImage(variant, showImage) {
   return showImage ?? variant === "image";
 }
 function AvatarSkeleton({ className }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       className: cn("w-10 h-10 text-gray-200 dark:text-gray-700", className),
@@ -939,7 +1060,7 @@ function AvatarSkeleton({ className }) {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
       viewBox: "0 0 20 20",
-      children: /* @__PURE__ */ jsx7("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__ */ jsx8("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" })
     }
   );
 }
@@ -948,7 +1069,7 @@ function SkeletonBlock({
   className,
   isFirst
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: cn(
@@ -987,7 +1108,7 @@ function CardSkeleton({
         style: { animationDuration, ...style },
         ...props,
         children: [
-          renderImage ? /* @__PURE__ */ jsx7(
+          renderImage ? /* @__PURE__ */ jsx8(
             "div",
             {
               className: cn(
@@ -997,8 +1118,8 @@ function CardSkeleton({
             }
           ) : null,
           /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
-            renderAvatar ? /* @__PURE__ */ jsx7(AvatarSkeleton, { className: avatarClassName }) : null,
-            /* @__PURE__ */ jsx7("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ jsx7(
+            renderAvatar ? /* @__PURE__ */ jsx8(AvatarSkeleton, { className: avatarClassName }) : null,
+            /* @__PURE__ */ jsx8("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ jsx8(
               SkeletonBlock,
               {
                 widthClass: lineWidths[lineIndex] ?? lineWidths[lineWidths.length - 1] ?? DEFAULT_LINE_WIDTHS[1],
@@ -1008,19 +1129,19 @@ function CardSkeleton({
               lineIndex
             )) })
           ] }),
-          /* @__PURE__ */ jsx7("span", { className: "sr-only", children: srLabel })
+          /* @__PURE__ */ jsx8("span", { className: "sr-only", children: srLabel })
         ]
       },
       index
     );
   });
-  return /* @__PURE__ */ jsx7(Fragment, { children: skeletons });
+  return /* @__PURE__ */ jsx8(Fragment, { children: skeletons });
 }
 
 // src/components/tooltip/ToolTip.tsx
 import { useId as useId2 } from "react";
 import { Tooltip } from "react-tooltip";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultTooltipStyle = {
   color: "#fff",
   borderRadius: "5px",
@@ -1047,10 +1168,10 @@ function ToolTip({
   const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
   const tooltipText = String(text ?? "");
   if (disabled || !tooltipText) {
-    return /* @__PURE__ */ jsx8("span", { className, children });
+    return /* @__PURE__ */ jsx9("span", { className, children });
   }
   return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "span",
       {
         className,
@@ -1060,7 +1181,7 @@ function ToolTip({
         children
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Tooltip,
       {
         id: tooltipId,
@@ -1076,7 +1197,7 @@ function ToolTip({
 }
 
 // src/components/tooltip/TooltipText.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function TooltipText({
   text = "",
   maxLength = 20,
@@ -1096,7 +1217,7 @@ function TooltipText({
   const displayText = truncateText(fullText, maxLength);
   const isTruncated = displayText !== fullText;
   const tooltipDisabled = !showTooltip || !hasValue || tooltipWhenTruncatedOnly && !isTruncated;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     ToolTip,
     {
       text: fullText,
@@ -1108,7 +1229,7 @@ function TooltipText({
       tooltipStyle,
       wrapperTabIndex: tooltipDisabled ? void 0 : 0,
       disabled: tooltipDisabled,
-      children: /* @__PURE__ */ jsx9("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
+      children: /* @__PURE__ */ jsx10("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
     }
   );
 }
@@ -1123,7 +1244,7 @@ import {
   useState as useState3
 } from "react";
 import toast from "react-hot-toast";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function ButtonSpinner() {
   return /* @__PURE__ */ jsxs8(
     "svg",
@@ -1135,7 +1256,7 @@ function ButtonSpinner() {
       fill: "none",
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "circle",
           {
             cx: "12",
@@ -1146,7 +1267,7 @@ function ButtonSpinner() {
             strokeOpacity: "0.25"
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "path",
           {
             d: "M12 2a10 10 0 0 1 10 10",
@@ -1301,11 +1422,11 @@ var CustomCellEditor = forwardRef(
               className: inputClassName ?? defaultInputClass,
               disabled: isLoading,
               children: [
-                /* @__PURE__ */ jsx10("option", { value: "", disabled: true, children: "Select option..." }),
-                normalizedOptions.map((opt) => /* @__PURE__ */ jsx10("option", { value: opt.value, children: opt.label }, opt.value))
+                /* @__PURE__ */ jsx11("option", { value: "", disabled: true, children: "Select option..." }),
+                normalizedOptions.map((opt) => /* @__PURE__ */ jsx11("option", { value: opt.value, children: opt.label }, opt.value))
               ]
             }
-          ) : /* @__PURE__ */ jsx10(
+          ) : /* @__PURE__ */ jsx11(
             "input",
             {
               ref: inputRef,
@@ -1318,7 +1439,7 @@ var CustomCellEditor = forwardRef(
               disabled: isLoading
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -1327,10 +1448,10 @@ var CustomCellEditor = forwardRef(
               className: saveButtonClassName ?? (saveButtonStyle ? void 0 : defaultSaveBtnClass),
               style: saveButtonStyle,
               title: "Save (Enter)",
-              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ jsx10(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ jsx11(ButtonSpinner, {}) : saveButtonContent ?? "Save"
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -1354,6 +1475,8 @@ export {
   ResetColumnsButton,
   TableLayoutToolbarControls,
   CustomPagination,
+  dropdownStyles,
+  DropdownFilter,
   ResetFiltersButton,
   SearchInput,
   Loader,
@@ -1363,4 +1486,4 @@ export {
   TooltipText,
   CustomCellEditor
 };
-//# sourceMappingURL=chunk-CIFNA6LN.mjs.map
+//# sourceMappingURL=chunk-3FD7O5VS.mjs.map