mytek-components 2.1.4 → 2.1.7

package/dist/main.umd.js

@@ -530,40 +530,44 @@
     children,
     onClick,
     fontSize = "16px",
-    color: color2 = "#ffffff",
-    backgroundColor: backgroundColor2 = "#3369BB",
+    color: color2 = "#fff",
+    backgroundColor: backgroundColor2 = "#3B5AA1",
+    hoverBackgroundColor = "#2F4B8A",
+    disabledBackgroundColor = "#9CA3AF",
+    // gray-400
+    disabledTextColor = "#E5E7EB",
+    // gray-200
     height: height2 = "40px",
-    width: width2 = "100px",
+    width: width2 = "auto",
     border: border2 = "none",
-    borderRadius: borderRadius2 = "4px",
-    padding: padding2 = "10px 20px",
-    fontWeight = "normal",
-    style: style2 = {},
+    borderRadius: borderRadius2 = "6px",
+    padding: padding2 = "10px 16px",
+    fontWeight = "500",
     loader = false,
     disabled = false,
+    style: style2 = {},
     ...rest
   }) => {
     const isDisabled = loader || disabled;
     const className = clsx(
-      "flex items-center justify-center transition-opacity",
+      "flex items-center justify-center transition-all duration-200 overflow-hidden",
       {
         "cursor-not-allowed opacity-60": isDisabled,
-        "cursor-pointer": !isDisabled
+        "cursor-pointer hover:brightness-110 active:scale-[0.98]": !isDisabled
       },
       rest.className
-      // ✅ allow external Tailwind className overrides
     );
     const buttonStyle = {
       fontSize,
-      color: color2,
-      backgroundColor: backgroundColor2,
+      color: isDisabled ? disabledTextColor : color2,
+      backgroundColor: isDisabled ? disabledBackgroundColor : backgroundColor2,
       height: height2,
-      // ✅ Only apply width if w-full is NOT passed via className
       width: rest.className?.includes("w-full") ? void 0 : width2,
       border: border2,
       borderRadius: borderRadius2,
       padding: padding2,
       fontWeight,
+      cursor: isDisabled ? "not-allowed" : "pointer",
       ...style2
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -573,8 +577,14 @@
         disabled: isDisabled,
         className,
         style: buttonStyle,
+        onMouseEnter: (e) => {
+          if (!isDisabled) e.currentTarget.style.backgroundColor = hoverBackgroundColor;
+        },
+        onMouseLeave: (e) => {
+          if (!isDisabled) e.currentTarget.style.backgroundColor = backgroundColor2;
+        },
         ...rest,
-        children: loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : label || children
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate w-full", children: loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : label || children })
       }
     );
   };
@@ -6162,7 +6172,8 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     mode = "both",
     isRequired = false,
     optionLabelKey = "label",
-    optionValueKey = "value"
+    optionValueKey = "value",
+    wrapperClass = ""
   }) => {
     const [inputValue, setInputValue] = React.useState("");
     const [filteredOptions, setFilteredOptions] = React.useState([]);
@@ -6284,7 +6295,10 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
             ref: inputRef,
             type: isPassword ? "password" : "text",
             placeholder: getPlaceholder(),
-            className: `w-full border rounded-sm px-3 pr-8 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-green-200 ${error ? "border-red-500" : "border-green-500"} ${disabled ? "bg-gray-100 cursor-not-allowed" : ""}`,
+            className: `w-full border rounded-sm px-3 pr-8 py-2 text-sm focus:outline-none focus:ring-1 
+            focus:ring-[#3B5AA1]
+            ${disabled ? "border-gray-300 bg-gray-100 cursor-not-allowed" : error ? "border-red-500" : "border-[#3B5AA1]"} 
+            ${wrapperClass}`,
             name,
             value: inputValue,
             onChange: handleInputChange,
@@ -12597,7 +12611,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
         }
         var E, T, I, A = Array.prototype, D = Function.prototype, P = Object.prototype, F = b["__core-js_shared__"], M = (E = /[^.]+$/.exec(F && F.keys && F.keys.IE_PROTO || "")) ? "Symbol(src)_1." + E : "", R = D.toString, L = P.hasOwnProperty, z = P.toString, B = RegExp("^" + R.call(L).replace(/[\\^$.*+?()[\]{}|]/g, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"), G = b.Symbol, $ = b.Uint8Array, V = P.propertyIsEnumerable, K = A.splice, U = (T = Object.keys, I = Object, function(e3) {
           return T(I(e3));
-        }), q = Ne(b, "DataView"), H = Ne(b, "Map"), W = Ne(b, "Promise"), J = Ne(b, "Set"), Z = Ne(b, "WeakMap"), Q = Ne(Object, "create"), Y = Pe(q), X = Pe(H), ee = Pe(W), te = Pe(J), re = Pe(Z), ne = G ? G.prototype : void 0, ae = ne ? ne.valueOf : void 0, oe = ne ? ne.toString : void 0;
+        }), q = Ne(b, "DataView"), H = Ne(b, "Map"), W = Ne(b, "Promise"), J = Ne(b, "Set"), Z = Ne(b, "WeakMap"), Q = Ne(Object, "create"), Y = Pe(q), X2 = Pe(H), ee = Pe(W), te = Pe(J), re = Pe(Z), ne = G ? G.prototype : void 0, ae = ne ? ne.valueOf : void 0, oe = ne ? ne.toString : void 0;
         function ie(e3) {
           var t2 = -1, r4 = e3 ? e3.length : 0;
           for (this.clear(); ++t2 < r4; ) {
@@ -12935,7 +12949,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
           if (n2) switch (n2) {
             case Y:
               return "[object DataView]";
-            case X:
+            case X2:
               return a;
             case ee:
               return "[object Promise]";
@@ -13990,7 +14004,11 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     onValidationChange,
     // color,
     showTimer,
-    timer
+    timer,
+    minValue,
+    maxValue,
+    stepValue,
+    wrapperClassName
   }) => {
     const [countryCode, setCountryCode] = React.useState("IN");
     const [nationalNumber, setNationalNumber] = React.useState("");
@@ -14003,7 +14021,6 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
         validate(value);
       }
     }, [value]);
-    console.log(enable);
     const validate = (val) => {
       const raw = category === "amount" ? removeCommas(val) : val;
       if (!isRequired && !val) {
@@ -14226,7 +14243,6 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     const handleChange = (e) => {
       let val;
       if (category == "mobile") {
-        console.log(e);
         val = e;
         validate(val);
       } else {
@@ -14317,20 +14333,9 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       }
       const nationalNumber1 = parsed.nationalNumber || "";
       setNationalNumber(nationalNumber1);
-      console.log(nationalNumber);
       const { length, startsWith } = rules;
       const callingCodeLength = country.dialCode.length;
       const maxTotalLength = callingCodeLength + length;
-      console.log(
-        value2,
-        value2.length,
-        maxTotalLength,
-        length,
-        nationalNumber.length,
-        startsWith,
-        startsWith.test(nationalNumber),
-        "len"
-      );
       if (value2.length > maxTotalLength) {
         setError("Invalid phone number for selected country");
         setEnable(true);
@@ -14377,7 +14382,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
             prefix && /* @__PURE__ */ jsxRuntimeExports.jsx(
               InputGroup.Text,
               {
-                style: { backgroundColor: "#fff", borderColor: "#12AB5B" },
+                style: { backgroundColor: "#fff", borderColor: "#3B5AA1" },
                 children: prefix
               }
             ),
@@ -14386,107 +14391,138 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
               {
                 placement: "top",
                 overlay: isAmount && amountInWords && (currency === "₹" || currency === "$") ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { id: `${name}-tooltip`, children: amountInWords }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
-                children: category === "mobile" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-[#12AB5B] rounded-md w-full", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    PhoneInput,
-                    {
-                      value,
-                      onChange: (value2, country) => handlePhoneChange(value2, country),
-                      country: countryCode.toLowerCase(),
-                      enableLongNumbers: true,
-                      disableDropdown: false,
-                      countryCodeEditable: false,
-                      inputProps: { autoComplete: "off" },
-                      containerStyle: { width: "100%" },
-                      disabled,
-                      inputStyle: {
-                        width: "100%",
-                        height: "40px",
-                        fontSize: "14px",
-                        paddingLeft: "48px",
-                        // leave space for flag
-                        border: "none",
-                        backgroundColor: disabled ? "#f1f1f1" : "#fff",
-                        // ✅ gray when disabled
-                        color: disabled ? "#6c757d" : "#000",
-                        // ✅ muted text when disabled
-                        cursor: disabled ? "not-allowed" : "text"
-                        // ✅ show disabled cursor
-                      },
-                      buttonStyle: {
-                        borderRight: "1px solid #12AB5B",
-                        backgroundColor: disabled ? "#f1f1f1" : "#fff",
-                        // ✅ gray when disabled
-                        borderRadius: "0.375rem 0 0 0.375rem",
-                        cursor: disabled ? "not-allowed" : "pointer"
-                      },
-                      dropdownClass: "z-50 mt-1 bg-white border border-gray-300 rounded-md text-sm max-h-60 overflow-y-auto shadow-lg"
-                    }
-                  ),
-                  button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: button.onClick,
-                      disabled: button.disabled || enable,
-                      className: `px-4 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#12AB5B] rounded-r-md ${button.disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
-                      style: { height: height2 },
-                      children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
-                    }
-                  )
-                ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-[#12AB5B] overflow-hidden rounded-md", children: [
-                  prefix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-r border-[#12AB5B]", children: prefix }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "input",
-                    {
-                      type: isPassword ? showPassword ? "text" : "password" : type,
-                      name,
-                      value,
-                      onChange: handleChange,
-                      disabled,
-                      placeholder,
-                      className: `flex-1 px-2 py-2 focus:outline-none ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500" : ""}`,
-                      style: {
-                        height: height2,
-                        backgroundColor: disabled ? "#f1f1f1" : void 0,
-                        color: disabled ? "#6c757d" : void 0
-                      }
-                    }
-                  ),
-                  suffix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-l border-[#12AB5B]", children: suffix }),
-                  !error && showTimer && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "span",
-                    {
-                      className: `flex items-center gap-1 justify-center h-[40px] min-w-[60px] px-2 ml-1 rounded text-sm 
-      ${validationStatus === "valid" ? "text-green-600 bg-gray-100" : validationStatus === "invalid" ? "text-red-600" : "text-gray-600 bg-gray-100"}`,
-                      title: validationStatus === "valid" ? "Correct OTP" : validationStatus === "invalid" ? "Incorrect OTP" : "OTP Timer",
-                      children: [
-                        validationStatus === "valid" && /* @__PURE__ */ jsxRuntimeExports.jsx(FaCheck, { size: 18 }),
-                        validationStatus === "invalid" && /* @__PURE__ */ jsxRuntimeExports.jsx(IoMdClose, { size: 18 }),
-                        typeof timer === "number" && validationStatus !== "valid" && `${timer}s`
-                      ]
-                    }
-                  ),
-                  isPassword && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setShowPassword(!showPassword),
-                      className: "px-2  bg-white text-gray-500 border-l border-[#12AB5B]",
-                      children: showPassword ? /* @__PURE__ */ jsxRuntimeExports.jsx(FiEye, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FiEyeOff, {})
-                    }
-                  ),
-                  button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      onClick: button?.onClick,
-                      disabled: disabled || enable,
-                      className: `px-2 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#12AB5B] rounded-r-md ${disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
-                      style: { height: height2 },
-                      children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
-                    }
-                  )
-                ] })
+                children: category === "mobile" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "div",
+                  {
+                    className: `
+                  flex items-center w-full
+                  rounded-md
+                  transition-all duration-200
+                  border border-[1px]
+                  ${disabled ? "border-gray-300 bg-gray-100 cursor-not-allowed" : "border-[#3B5AA1] focus-within:ring-1 focus-within:ring-[#3B5AA1] focus-within:border-[#3B5AA1]"}
+                  ${wrapperClassName || ""}
+                `,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        PhoneInput,
+                        {
+                          value,
+                          onChange: (value2, country) => handlePhoneChange(value2, country),
+                          country: countryCode.toLowerCase(),
+                          enableLongNumbers: false,
+                          disableDropdown: false,
+                          countryCodeEditable: false,
+                          inputProps: { autoComplete: "off" },
+                          containerStyle: { width: "100%" },
+                          disabled,
+                          inputStyle: {
+                            width: "100%",
+                            height: "40px",
+                            fontSize: "14px",
+                            paddingLeft: "48px",
+                            // leave space for flag
+                            border: "none",
+                            backgroundColor: disabled ? "#f1f1f1" : "#fff",
+                            // ✅ gray when disabled
+                            color: disabled ? "#6c757d" : "#000",
+                            // ✅ muted text when disabled
+                            cursor: disabled ? "not-allowed" : "text"
+                            // ✅ show disabled cursor
+                          },
+                          buttonStyle: {
+                            borderRight: "1px solid #3B5AA1",
+                            backgroundColor: disabled ? "#f1f1f1" : "#fff",
+                            // ✅ gray when disabled
+                            borderRadius: "0.375rem 0 0 0.375rem",
+                            cursor: disabled ? "not-allowed" : "pointer"
+                          },
+                          dropdownClass: "z-50 mt-1 bg-white border border-gray-300 rounded-md text-sm max-h-60 overflow-y-auto shadow-lg"
+                        }
+                      ),
+                      button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: button.onClick,
+                          disabled: button.disabled || enable,
+                          className: `px-4 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#3B5AA1] rounded-r-md ${button.disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
+                          style: { height: height2 },
+                          children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
+                        }
+                      )
+                    ]
+                  }
+                ) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "div",
+                  {
+                    className: `
+              flex items-center
+              overflow-hidden
+              rounded-md
+              transition-all duration-200
+
+              ${disabled ? "border border-gray-300 bg-gray-100 cursor-not-allowed" : "border border-[#3B5AA1] focus-within:border-[#3B5AA1] focus-within:ring-1 focus-within:ring-[#3B5AA1]"}
+                
+              ${wrapperClassName || ""}
+            `,
+                    children: [
+                      prefix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-r border-[#3B5AA1]", children: prefix }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "input",
+                        {
+                          type: isPassword ? showPassword ? "text" : "password" : type,
+                          name,
+                          value,
+                          onChange: handleChange,
+                          disabled,
+                          placeholder,
+                          className: `flex-1 px-2 py-2 focus:outline-none ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500" : ""}`,
+                          style: {
+                            height: height2,
+                            backgroundColor: disabled ? "#f1f1f1" : void 0,
+                            color: disabled ? "#6c757d" : void 0
+                          },
+                          min: minValue,
+                          max: maxValue,
+                          step: stepValue
+                        }
+                      ),
+                      suffix && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 bg-white text-gray-700 border-l border-[#3B5AA1]", children: suffix }),
+                      !error && showTimer && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                        "span",
+                        {
+                          className: `flex items-center gap-1 justify-center h-[40px] min-w-[60px] px-2 ml-1 rounded text-sm 
+                    ${validationStatus === "valid" ? "text-[#3B5AA1] bg-gray-100" : validationStatus === "invalid" ? "text-red-600" : "text-gray-600 bg-gray-100"}`,
+                          title: validationStatus === "valid" ? "Correct OTP" : validationStatus === "invalid" ? "Incorrect OTP" : "OTP Timer",
+                          children: [
+                            validationStatus === "valid" && /* @__PURE__ */ jsxRuntimeExports.jsx(FaCheck, { size: 18 }),
+                            validationStatus === "invalid" && /* @__PURE__ */ jsxRuntimeExports.jsx(IoMdClose, { size: 18 }),
+                            typeof timer === "number" && validationStatus !== "valid" && `${timer}s`
+                          ]
+                        }
+                      ),
+                      isPassword && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setShowPassword(!showPassword),
+                          className: "px-2  bg-white text-gray-500 border-l border-[#3B5AA1]",
+                          children: showPassword ? /* @__PURE__ */ jsxRuntimeExports.jsx(FiEye, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FiEyeOff, {})
+                        }
+                      ),
+                      button?.label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          onClick: button?.onClick,
+                          disabled: disabled || enable,
+                          className: `px-2 py-2 text-white ${backgroundColor2 || "bg-[#3B5AA1]"} border-l border-[#3B5AA1] rounded-r-md ${disabled || enable ? "opacity-50 cursor-not-allowed" : ""}`,
+                          style: { height: height2 },
+                          children: button.loader ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { inline: true }) : button.label
+                        }
+                      )
+                    ]
+                  }
+                )
               }
             )
           ] }),
@@ -15788,11 +15824,18 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     centered = false,
     scrollButtons = "auto",
     indicatorColor = "primary",
-    textColor = "primary"
+    textColor = "primary",
+    handleTabChange,
+    tabIndex
   }) {
-    const [value, setValue] = React.useState(defaultValue);
+    const [value, setValue] = React.useState(tabIndex || defaultValue);
+    React.useEffect(() => {
+      const setUpVal = tabs.length - 1 >= tabIndex ? tabIndex : tabs.length - 1;
+      setValue(setUpVal);
+    }, [tabIndex]);
     const handleChange = (event, newValue) => {
       setValue(newValue);
+      handleTabChange(newValue);
     };
     const getTabsStyles = () => {
       const baseStyles = "w-full";
@@ -16415,13 +16458,20 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     Component.displayName = toPascalCase(iconName);
     return Component;
   };
-  const __iconNode$4 = [
+  const __iconNode$6 = [
+    ["path", { d: "M8 2v4", key: "1cmpym" }],
+    ["path", { d: "M16 2v4", key: "4m81vk" }],
+    ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+    ["path", { d: "M3 10h18", key: "8toen8" }]
+  ];
+  const Calendar = createLucideIcon("calendar", __iconNode$6);
+  const __iconNode$5 = [
     ["path", { d: "M12 15V3", key: "m9g1x1" }],
     ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
     ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
   ];
-  const Download = createLucideIcon("download", __iconNode$4);
-  const __iconNode$3 = [
+  const Download = createLucideIcon("download", __iconNode$5);
+  const __iconNode$4 = [
     [
       "path",
       {
@@ -16430,28 +16480,33 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       }
     ]
   ];
-  const Funnel = createLucideIcon("funnel", __iconNode$3);
-  const __iconNode$2 = [
+  const Funnel = createLucideIcon("funnel", __iconNode$4);
+  const __iconNode$3 = [
     ["path", { d: "m8 11 2 2 4-4", key: "1sed1v" }],
     ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
     ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
   ];
-  const SearchCheck = createLucideIcon("search-check", __iconNode$2);
-  const __iconNode$1 = [
+  const SearchCheck = createLucideIcon("search-check", __iconNode$3);
+  const __iconNode$2 = [
     ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
     ["line", { x1: "3", x2: "21", y1: "9", y2: "9", key: "1vqk6q" }],
     ["line", { x1: "3", x2: "21", y1: "15", y2: "15", key: "o2sbyz" }],
     ["line", { x1: "9", x2: "9", y1: "9", y2: "21", key: "1ib60c" }],
     ["line", { x1: "15", x2: "15", y1: "9", y2: "21", key: "1n26ft" }]
   ];
-  const Sheet = createLucideIcon("sheet", __iconNode$1);
-  const __iconNode = [
+  const Sheet = createLucideIcon("sheet", __iconNode$2);
+  const __iconNode$1 = [
     ["path", { d: "M12 3v18", key: "108xh3" }],
     ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
     ["path", { d: "M3 9h18", key: "1pudct" }],
     ["path", { d: "M3 15h18", key: "5xshup" }]
   ];
-  const Table = createLucideIcon("table", __iconNode);
+  const Table = createLucideIcon("table", __iconNode$1);
+  const __iconNode = [
+    ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+    ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+  ];
+  const X = createLucideIcon("x", __iconNode);
   var weekOfYear$1 = { exports: {} };
   var weekOfYear = weekOfYear$1.exports;
   var hasRequiredWeekOfYear;
@@ -17794,9 +17849,41 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       };
     }
     if (col.TotTyp) {
-      column.Footer = () => {
-        const value = aggregates[col.ColFields];
-        if (value === void 0 || value === null) return "";
+      column.Footer = ({ table }) => {
+        const rows = table.getFilteredRowModel().rows;
+        if (!rows.length) return "";
+        let count = 0;
+        let sum = 0;
+        let min2 = Infinity;
+        let max2 = -Infinity;
+        for (const row of rows) {
+          const val = Number(row.original[col.ColFields]);
+          if (isNaN(val)) continue;
+          count++;
+          sum += val;
+          min2 = Math.min(min2, val);
+          max2 = Math.max(max2, val);
+        }
+        let value;
+        switch (col.TotTyp) {
+          case "SUM":
+            value = sum;
+            break;
+          case "AVG":
+            value = count ? sum / count : 0;
+            break;
+          case "MIN":
+            value = count ? min2 : "";
+            break;
+          case "MAX":
+            value = count ? max2 : "";
+            break;
+          case "COUNT":
+            value = count;
+            break;
+          default:
+            return "";
+        }
         if (isNumericColumn && col.IsPercentage) {
           return formatPercentage({
             value,
@@ -17837,6 +17924,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     colPinning: true,
     pagination: true,
     rowSelection: false,
+    enableSelectAllRows: true,
     rowPinning: false,
     grouping: false,
     sorting: true,
@@ -17853,7 +17941,8 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     topToolbar = defaultToolBarOpt,
     controls = defaultControlOpt,
     onRowSelectionChange,
-    isLoading = false
+    isLoading = false,
+    resetRowSelection
   }) {
     const safeColumns = React.useMemo(
       () => sanitizeColumns(columns),
@@ -17865,6 +17954,9 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     );
     const [rowSelection, setRowSelection] = React.useState({});
     const isMobile = material.useMediaQuery("(max-width:600px)");
+    React.useEffect(() => {
+      setRowSelection({});
+    }, [resetRowSelection]);
     const mergedTheme = { ...DEFAULT_THEME, ...theme };
     topToolbar = { ...defaultToolBarOpt, ...topToolbar };
     controls = { ...defaultControlOpt, ...controls };
@@ -17942,7 +18034,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     const finalColumns = React.useMemo(() => {
       if (safeColumns.length === 0) return [];
       return safeColumns.sort((a, b) => a.ColOrder - b.ColOrder).map(
-        (col) => buildColumn(col, fyOptions, detectedColumnTypes, aggregates)
+        (col) => buildColumn(col, fyOptions, detectedColumnTypes)
       );
     }, [safeColumns, fyOptions, detectedColumnTypes, aggregates]);
     const columnPinning = React.useMemo(() => {
@@ -17991,6 +18083,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       enablePagination: !isGridDisabled && controls.pagination,
       enableColumnActions: !isGridDisabled && controls.columnActions,
       enableRowSelection: !isGridDisabled && controls.rowSelection,
+      enableSelectAll: !isGridDisabled && controls.rowSelection && controls?.enableSelectAllRows,
       enableGrouping: !isGridDisabled && controls.grouping,
       enableSorting: !isGridDisabled && controls.sorting,
       enableEditing: !isGridDisabled && controls.editing,
@@ -18435,47 +18528,560 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       )
     ] });
   };
-  const SmartTable = ({
-    controls = {
-      columnActions: true,
-      dragging: false,
-      colPinning: true,
-      pagination: true,
-      rowSelection: false,
-      rowPinning: false,
-      grouping: false,
-      sorting: true,
-      editing: false,
-      resizing: true
-    },
-    topToolbar = {
-      enabled: true,
-      globalSearch: true,
-      columnFilters: true,
-      densityToggle: true,
-      fullscreenToggle: false,
-      exportBtn: true,
-      showHideColumnsBtn: true
-    },
-    theme = {
-      headerBg: "#3f5fa3",
-      headerText: "#ffffff",
-      bodyBg: "#ffffff",
-      border: "#cfd6e4"
+  const SmartTable = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SmartGridTable, { ...props }) });
+  const FinancialDateRangePicker = ({
+    value = null,
+    onChange = () => {
     },
-    height: height2 = "100%",
-    width: width2 = "100%",
-    columns = [],
-    data = [],
-    paginationStyle = "default",
-    isLoading = false,
-    onRowSelectionChange = () => {
-    }
+    placeholder = "Select date range",
+    className = "",
+    disabled = false,
+    error = "",
+    label = "",
+    required = false,
+    defaultMode = "yearly",
+    showFinancialYear = true,
+    showYearly = true,
+    showMonthly = true,
+    showCustom = true,
+    isSticky = false,
+    stickyTop = 0,
+    stickyRight = 0
   }) => {
-    const props = { controls, topToolbar, height: height2, width: width2, isLoading, columns, data, onRowSelectionChange, paginationStyle, theme };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SmartGridTable, { ...props }) });
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectionMode, setSelectionMode] = React.useState(defaultMode);
+    const [financialYear, setFinancialYear] = React.useState("");
+    const [yearlySubMode, setYearlySubMode] = React.useState("half-yearly");
+    const [selectedHalfYear, setSelectedHalfYear] = React.useState(null);
+    const [selectedQuarter, setSelectedQuarter] = React.useState(null);
+    const [selectedMonthStart, setSelectedMonthStart] = React.useState(null);
+    const [selectedMonthEnd, setSelectedMonthEnd] = React.useState(null);
+    const [monthRangeSelecting, setMonthRangeSelecting] = React.useState(false);
+    const [customStart, setCustomStart] = React.useState("");
+    const [customEnd, setCustomEnd] = React.useState("");
+    const [tempDateRange, setTempDateRange] = React.useState({ start: "", end: "" });
+    const [dropdownPosition, setDropdownPosition] = React.useState({
+      top: true,
+      left: 0,
+      right: "auto",
+      arrowLeft: 24
+    });
+    const containerRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const [parentWidth, setParentWidth] = React.useState("100%");
+    React.useEffect(() => {
+      if (containerRef.current) {
+        const parent = containerRef.current.parentElement;
+        const updateWidth = () => {
+          setParentWidth(parent.offsetWidth);
+        };
+        updateWidth();
+        window.addEventListener("resize", updateWidth);
+        return () => window.removeEventListener("resize", updateWidth);
+      }
+    }, []);
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    const financialYears = Array.from({ length: 5 }, (_, i) => {
+      const year = currentYear - 5 + i + 1;
+      return `${year}-${String(year + 1).slice(2)}`;
+    });
+    const halfYears = [
+      { id: "H1", label: "H1 (Apr-Sep)", startMonth: 3, endMonth: 8 },
+      { id: "H2", label: "H2 (Oct-Mar)", startMonth: 9, endMonth: 2 }
+    ];
+    const quarters = [
+      { id: "Q1", label: "Q1 (Apr-Jun)", startMonth: 3, endMonth: 5 },
+      { id: "Q2", label: "Q2 (Jul-Sep)", startMonth: 6, endMonth: 8 },
+      { id: "Q3", label: "Q3 (Oct-Dec)", startMonth: 9, endMonth: 11 },
+      { id: "Q4", label: "Q4 (Jan-Mar)", startMonth: 0, endMonth: 2 }
+    ];
+    const months = [
+      { id: 4, label: "April", short: "Apr", index: 3 },
+      { id: 5, label: "May", short: "May", index: 4 },
+      { id: 6, label: "June", short: "Jun", index: 5 },
+      { id: 7, label: "July", short: "Jul", index: 6 },
+      { id: 8, label: "August", short: "Aug", index: 7 },
+      { id: 9, label: "September", short: "Sep", index: 8 },
+      { id: 10, label: "October", short: "Oct", index: 9 },
+      { id: 11, label: "November", short: "Nov", index: 10 },
+      { id: 12, label: "December", short: "Dec", index: 11 },
+      { id: 1, label: "January", short: "Jan", index: 0 },
+      { id: 2, label: "February", short: "Feb", index: 1 },
+      { id: 3, label: "March", short: "Mar", index: 2 }
+    ];
+    React.useEffect(() => {
+      if (isOpen && value) {
+        setTempDateRange(value);
+        setSelectionMode(value?.mode);
+        setFinancialYear(value?.financialYear);
+        if (value?.mode === "monthly") {
+          setSelectedMonthStart(value?.monthStart);
+          setSelectedMonthEnd(value?.monthEnd);
+        }
+        if (value?.mode === "yearly") {
+          setYearlySubMode(value?.yearlySubMode);
+          setSelectedHalfYear(value?.halfYear);
+          setSelectedQuarter(value?.quarter);
+        }
+        if (value?.mode === "custom") {
+          setCustomStart(value?.start);
+          setCustomEnd(value?.end);
+        }
+      }
+    }, [value, isOpen]);
+    React.useEffect(() => {
+      if (isOpen && containerRef.current && dropdownRef.current && inputRef.current) {
+        const calculatePosition = () => {
+          const container = containerRef.current.getBoundingClientRect();
+          const input = inputRef.current.getBoundingClientRect();
+          const dropdown = dropdownRef.current;
+          const dropdownWidth = 400;
+          const dropdownHeight = dropdown.scrollHeight;
+          const viewportHeight = window.innerHeight;
+          const viewportWidth = window.innerWidth;
+          const spaceBelow = viewportHeight - container.bottom;
+          const spaceAbove = container.top;
+          const showBelow = spaceBelow >= dropdownHeight + 10 || spaceBelow > spaceAbove;
+          let leftPos = 0;
+          let rightPos = "auto";
+          let arrowLeftPos = 24;
+          const containerLeft = container.left;
+          const containerWidth = container.width;
+          const containerRight = containerLeft + containerWidth;
+          const fitsOnRight = containerLeft + dropdownWidth <= viewportWidth - 16;
+          const fitsOnLeft = containerRight - dropdownWidth >= 16;
+          if (fitsOnRight) {
+            leftPos = 0;
+            rightPos = "auto";
+            arrowLeftPos = 24;
+          } else if (fitsOnLeft) {
+            leftPos = "auto";
+            rightPos = 0;
+            arrowLeftPos = dropdownWidth - 40;
+          } else {
+            const maxLeft = viewportWidth - dropdownWidth - 16;
+            const desiredLeft = Math.max(16 - containerLeft, Math.min(0, maxLeft - containerLeft));
+            leftPos = desiredLeft;
+            rightPos = "auto";
+            const inputCenter = input.left + input.width / 2 - container.left;
+            arrowLeftPos = Math.max(16, Math.min(dropdownWidth - 32, inputCenter - desiredLeft - 8));
+          }
+          setDropdownPosition({
+            top: showBelow,
+            left: leftPos,
+            right: rightPos,
+            arrowLeft: arrowLeftPos
+          });
+        };
+        setTimeout(calculatePosition, 10);
+        window.addEventListener("resize", calculatePosition);
+        window.addEventListener("scroll", calculatePosition, true);
+        return () => {
+          window.removeEventListener("resize", calculatePosition);
+          window.removeEventListener("scroll", calculatePosition, true);
+        };
+      }
+    }, [isOpen]);
+    React.useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen]);
+    const getHalfYearDates = (fy, halfYear) => {
+      const [startYear] = fy.split("-");
+      const year = parseInt(startYear);
+      const hy = halfYears.find((h) => h.id === halfYear);
+      const startDate = new Date(
+        hy.startMonth >= 3 ? year : year + 1,
+        hy.startMonth,
+        1
+      );
+      const endDate = new Date(
+        hy.endMonth >= 3 ? year : year + 1,
+        hy.endMonth + 1,
+        0
+      );
+      return {
+        start: startDate.toLocaleDateString("en-CA"),
+        end: endDate.toLocaleDateString("en-CA")
+      };
+    };
+    const getQuarterDates = (fy, quarter) => {
+      const [startYear] = fy.split("-");
+      const year = parseInt(startYear);
+      const q = quarters.find((q2) => q2.id === quarter);
+      const startDate = new Date(
+        q.startMonth >= 3 ? year : year + 1,
+        q.startMonth,
+        1
+      );
+      const endDate = new Date(
+        q.endMonth >= 3 ? year : year + 1,
+        q.endMonth + 1,
+        0
+      );
+      return {
+        start: startDate.toLocaleDateString("en-CA"),
+        end: endDate.toLocaleDateString("en-CA")
+      };
+    };
+    const getMonthRangeDates = (fy, startMonthId, endMonthId) => {
+      const [startYear] = fy.split("-");
+      const year = parseInt(startYear);
+      const startMonth = months.find((m) => m.id === startMonthId);
+      const endMonth = months.find((m) => m.id === endMonthId);
+      const startDate = new Date(
+        startMonth.index >= 3 ? year : year + 1,
+        startMonth.index,
+        1
+      );
+      const endDate = new Date(
+        endMonth.index >= 3 ? year : year + 1,
+        endMonth.index + 1,
+        0
+      );
+      return {
+        start: startDate.toLocaleDateString("en-CA"),
+        end: endDate.toLocaleDateString("en-CA")
+      };
+    };
+    React.useEffect(() => {
+      if (selectionMode === "yearly") {
+        if (selectedHalfYear) {
+          const dates = getHalfYearDates(financialYear, selectedHalfYear);
+          setTempDateRange(dates);
+        } else if (selectedQuarter) {
+          const dates = getQuarterDates(financialYear, selectedQuarter);
+          setTempDateRange(dates);
+        }
+      } else if (selectionMode === "monthly" && selectedMonthStart && selectedMonthEnd) {
+        const dates = getMonthRangeDates(financialYear, selectedMonthStart, selectedMonthEnd);
+        setTempDateRange(dates);
+      } else if (selectionMode === "custom" && customStart && customEnd) {
+        setTempDateRange({ start: customStart, end: customEnd });
+      }
+    }, [selectionMode, yearlySubMode, financialYear, selectedHalfYear, selectedQuarter, selectedMonthStart, selectedMonthEnd, customStart, customEnd]);
+    const handleHalfYearSelect = (halfYearId) => {
+      setSelectedHalfYear(halfYearId);
+      setSelectedQuarter(null);
+    };
+    const handleQuarterSelect = (quarterId) => {
+      setSelectedQuarter(quarterId);
+      setSelectedHalfYear(null);
+    };
+    const handleMonthClick = (monthId) => {
+      if (!monthRangeSelecting) {
+        setSelectedMonthStart(monthId);
+        setSelectedMonthEnd(null);
+        setMonthRangeSelecting(true);
+      } else {
+        const startId = selectedMonthStart;
+        const endId = monthId;
+        const startIndex = months.findIndex((m) => m.id === startId);
+        const endIndex = months.findIndex((m) => m.id === endId);
+        if (startIndex <= endIndex) {
+          setSelectedMonthStart(startId);
+          setSelectedMonthEnd(endId);
+        } else {
+          setSelectedMonthStart(endId);
+          setSelectedMonthEnd(startId);
+        }
+        setMonthRangeSelecting(false);
+      }
+    };
+    const isMonthInRange = (monthId) => {
+      if (!selectedMonthStart) return false;
+      if (!selectedMonthEnd) return monthId === selectedMonthStart;
+      const startIndex = months.findIndex((m) => m.id === selectedMonthStart);
+      const endIndex = months.findIndex((m) => m.id === selectedMonthEnd);
+      const currentIndex = months.findIndex((m) => m.id === monthId);
+      const minIndex = Math.min(startIndex, endIndex);
+      const maxIndex = Math.max(startIndex, endIndex);
+      return currentIndex >= minIndex && currentIndex <= maxIndex;
+    };
+    const isMonthRangeEdge = (monthId) => {
+      return monthId === selectedMonthStart || monthId === selectedMonthEnd;
+    };
+    const resetAllSelections = () => {
+      setSelectedHalfYear(null);
+      setSelectedQuarter(null);
+      setSelectedMonthStart(null);
+      setSelectedMonthEnd(null);
+      setMonthRangeSelecting(false);
+      setCustomStart("");
+      setCustomEnd("");
+      setTempDateRange({ start: "", end: "" });
+    };
+    const handleCancel = () => {
+      resetAllSelections();
+      setIsOpen(false);
+    };
+    const handleApply = () => {
+      if (tempDateRange.start && tempDateRange.end) {
+        onChange({
+          start: tempDateRange.start,
+          end: tempDateRange.end,
+          financialYear,
+          mode: selectionMode,
+          yearlySubMode: selectionMode === "yearly" ? yearlySubMode : null,
+          halfYear: selectedHalfYear,
+          quarter: selectedQuarter,
+          monthStart: selectedMonthStart,
+          monthEnd: selectedMonthEnd
+        });
+        setIsOpen(false);
+      }
+    };
+    const handleClear = () => {
+      resetAllSelections();
+      onChange(null);
+      setFinancialYear((/* @__PURE__ */ new Date()).getFullYear() + "-" + String((/* @__PURE__ */ new Date()).getFullYear() + 1).slice(2));
+    };
+    const formatDate2 = (dateStr) => {
+      if (!dateStr) return "";
+      const date = new Date(dateStr);
+      return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+    };
+    const getDisplayValue = () => {
+      if (!value) return "";
+      return `${formatDate2(value.start)} - ${formatDate2(value.end)}`;
+    };
+    const availableModes = [];
+    if (showYearly) availableModes.push("yearly");
+    if (showMonthly) availableModes.push("monthly");
+    if (showCustom) availableModes.push("custom");
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: `${isSticky ? "fixed z-40 bg-white" : "relative"} ${className}`,
+        style: isSticky ? {
+          top: stickyTop,
+          right: stickyRight || "auto",
+          width: parentWidth
+          // dynamic width applied here
+        } : {},
+        children: [
+          label && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              ref: inputRef,
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              className: `
+          flex items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-2 rounded-lg cursor-pointer transition
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white hover:border-[#3B5AA1]/70"}
+          ${error ? "border-red-500" : "border-gray-300"}
+          ${isOpen ? "border-[#3B5AA1]/70 ring-2 ring-[#3B5AA1]/70" : ""}
+        `,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: `w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0 ${disabled ? "text-gray-400" : "text-[#3B5AA1]"}` }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs sm:text-sm truncate ${value ? "text-gray-900" : "text-gray-400"}`, children: getDisplayValue() || placeholder })
+                ] }),
+                value && !disabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleClear();
+                    },
+                    className: "p-1 hover:bg-gray-100 rounded flex-shrink-0 ml-2",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-3 h-3 sm:w-4 sm:h-4 text-gray-500" })
+                  }
+                )
+              ]
+            }
+          ),
+          error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-red-500", children: error }),
+          isOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              ref: dropdownRef,
+              style: {
+                left: dropdownPosition.left !== "auto" ? `${dropdownPosition.left}px` : "auto",
+                right: dropdownPosition.right !== "auto" ? `${dropdownPosition.right}px` : "auto"
+              },
+              className: `
+            absolute z-50 w-full sm:w-[400px] bg-white rounded-xl shadow-2xl border-2 border-gray-200 
+            ${dropdownPosition.top ? "mt-2" : "mb-2 bottom-full"}
+          `,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    style: { left: `${dropdownPosition.arrowLeft}px` },
+                    className: `
+              absolute w-4 h-4 bg-white border-gray-200 transform rotate-45
+              ${dropdownPosition.top ? "-top-2 border-t-2 border-l-2" : "-bottom-2 border-b-2 border-r-2"}
+            `
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative bg-white rounded-xl p-4 sm:p-5 max-h-[70vh] overflow-y-auto", children: [
+                  showFinancialYear && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-xs sm:text-sm font-semibold text-gray-700 mb-2", children: "Financial Year" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "select",
+                      {
+                        value: financialYear,
+                        onChange: (e) => {
+                          setFinancialYear(e.target.value);
+                          resetAllSelections();
+                        },
+                        className: "w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:border-[#3B5AA1]/70 focus:ring-2 focus:ring-[#3B5AA1]/70 transition",
+                        children: financialYears.map((fy) => /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: fy, children: [
+                          "FY ",
+                          fy
+                        ] }, fy))
+                      }
+                    )
+                  ] }),
+                  availableModes.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2 mb-4 bg-gray-100 p-1 rounded-lg", children: availableModes.map((mode) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setSelectionMode(mode);
+                        resetAllSelections();
+                      },
+                      className: `flex-1 px-3 py-2 font-medium capitalize rounded-md transition text-sm ${selectionMode === mode ? "bg-[#3B5AA1] text-white shadow-md" : "bg-transparent text-gray-600 hover:bg-gray-200"}`,
+                      children: mode
+                    },
+                    mode
+                  )) }),
+                  selectionMode === "yearly" && showYearly && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Select Half Year" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2", children: halfYears.map((halfYear) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          onClick: () => handleHalfYearSelect(halfYear.id),
+                          className: `p-3 rounded-lg border-2 font-medium text-sm transition ${selectedHalfYear === halfYear.id ? "bg-[#3B5AA1] text-white border-[#3B5AA1]/70 shadow-md" : "bg-white text-gray-700 border-gray-300 hover:border-[#3B5AA1]/70 hover:bg-[#3B5AA1]/10"}`,
+                          children: halfYear.label
+                        },
+                        halfYear.id
+                      )) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Select Quarter" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2", children: quarters.map((quarter) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          onClick: () => handleQuarterSelect(quarter.id),
+                          className: `p-3 rounded-lg border-2 font-medium text-sm transition ${selectedQuarter === quarter.id ? "bg-[#3B5AA1] text-white border-[#3B5AA1]/70 shadow-md" : "bg-white text-gray-700 border-gray-300 hover:border-[#3B5AA1]/70 hover:bg-[#3B5AA1]/10"}`,
+                          children: quarter.label
+                        },
+                        quarter.id
+                      )) })
+                    ] })
+                  ] }),
+                  selectionMode === "monthly" && showMonthly && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Select Month Range" }),
+                      monthRangeSelecting && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-[#3B5AA1] font-medium", children: "Select end →" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((month) => {
+                      const inRange = isMonthInRange(month.id);
+                      const isEdge = isMonthRangeEdge(month.id);
+                      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          onClick: () => handleMonthClick(month.id),
+                          className: `p-2 rounded-lg border-2 font-medium text-xs transition ${inRange ? isEdge ? "bg-[#3B5AA1] text-white border-[#3B5AA1]/70 shadow-md" : "bg-[#3B5AA1]/10 text-[#3B5AA1] border-[#3B5AA1]/70" : "bg-white text-gray-700 border-gray-300 hover:border-[#3B5AA1]/70 hover:bg-[#3B5AA1]/10"}`,
+                          children: month.short
+                        },
+                        month.id
+                      );
+                    }) }),
+                    selectedMonthStart && selectedMonthEnd && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        onClick: () => {
+                          setSelectedMonthStart(null);
+                          setSelectedMonthEnd(null);
+                          setMonthRangeSelecting(false);
+                        },
+                        className: "mt-2 text-xs text-[#3B5AA1] hover:underline font-medium",
+                        children: "Clear Selection"
+                      }
+                    )
+                  ] }),
+                  selectionMode === "custom" && showCustom && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Custom Date Range" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Date" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "input",
+                          {
+                            type: "date",
+                            value: customStart,
+                            onChange: (e) => setCustomStart(e.target.value),
+                            className: "w-full px-2.5 py-2 border-2 border-gray-300 rounded-lg text-xs focus:border-[#3B5AA1]/70 focus:ring-2 focus:ring-[#3B5AA1]/70 transition"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Date" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "input",
+                          {
+                            type: "date",
+                            value: customEnd,
+                            onChange: (e) => setCustomEnd(e.target.value),
+                            min: customStart,
+                            className: "w-full px-2.5 py-2 border-2 border-gray-300 rounded-lg text-xs focus:border-[#3B5AA1]/70 focus:ring-2 focus:ring-[#3B5AA1]/70 transition"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  tempDateRange.start && tempDateRange.end && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#3B5AA1]/10 rounded-lg p-3 mb-4 border border-[#3B5AA1]/70", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-medium text-gray-600 mb-1", children: "Selected Range" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs font-semibold text-[#3B5AA1] break-words", children: [
+                      formatDate2(tempDateRange.start),
+                      " - ",
+                      formatDate2(tempDateRange.end)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        onClick: handleCancel,
+                        className: "flex-1 px-4 py-2 border-2 border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50 transition text-sm",
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        onClick: handleApply,
+                        disabled: !tempDateRange.start || !tempDateRange.end,
+                        className: `flex-1 px-4 py-2 rounded-lg font-medium transition text-sm ${tempDateRange.start && tempDateRange.end ? "bg-[#3B5AA1] text-white hover:bg-[#2d4680] shadow-md" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`,
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
   };
   exports2.MytekComboDropdown = ComboDropdown;
+  exports2.MytekFinancialDateRangePicker = FinancialDateRangePicker;
   exports2.MytekInputField = CustomInput;
   exports2.MytekLoader = Loader;
   exports2.MytekMessageBox = Mt_MessageBox;