warqadui 0.0.24 → 0.0.26

package/dist/index.js

@@ -1092,19 +1092,33 @@ var PageHeader = ({
 
 // src/hooks/useModal.tsx
 var import_react7 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var defaultState = {
+  type: null,
+  title: "Untitled",
+  content: null,
+  width: 600,
+  data: null
+};
 var useModal = (initialState = false) => {
   const [isOpen, setIsOpen] = (0, import_react7.useState)(initialState);
-  const [state, setState] = (0, import_react7.useState)(null);
+  const [state, setState] = (0, import_react7.useState)(defaultState);
+  const resetState = (0, import_react7.useCallback)(() => {
+    setState(defaultState);
+  }, []);
   const open = (0, import_react7.useCallback)(() => setIsOpen(true), []);
   const close = (0, import_react7.useCallback)(() => {
     setIsOpen(false);
-    setState(null);
+    resetState();
   }, []);
   const toggle = (0, import_react7.useCallback)(() => setIsOpen((prev) => !prev), []);
   const openState = (0, import_react7.useCallback)((data) => {
     setState(data);
     open();
   }, []);
+  const ModalComponent = (props) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Modal, { isOpen: true, onClose: close, title: state?.title, children: state?.content });
+  };
   return {
     isOpen,
     open,
@@ -1112,7 +1126,9 @@ var useModal = (initialState = false) => {
     toggle,
     openState,
     state,
-    Modal
+    resetState,
+    defaultState,
+    Modal: ModalComponent
   };
 };
 
@@ -1120,7 +1136,7 @@ var useModal = (initialState = false) => {
 var import_react8 = require("react");
 var import_lucide_react6 = require("lucide-react");
 var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Input = (0, import_react8.forwardRef)(
   ({
     label,
@@ -1153,12 +1169,12 @@ var Input = (0, import_react8.forwardRef)(
         form.clearErrors("root");
       }
     }, [form?.watch(name)]);
-    const renderInput = (inputProps, localType = type || "text") => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    const renderInput = (inputProps, localType = type || "text") => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
         className: `${label ? "space-y-2" : ""} group relative ${containerClassName} `,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "label",
             {
               htmlFor: props.id,
@@ -1166,12 +1182,12 @@ var Input = (0, import_react8.forwardRef)(
               style: { color: isFocused ? primaryColor : void 0 },
               children: [
                 label,
-                props.required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+                props.required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative", children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "div",
               {
                 className: `transition-colors duration-200`,
@@ -1179,7 +1195,7 @@ var Input = (0, import_react8.forwardRef)(
                 children: icon
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "input",
               {
                 ref,
@@ -1201,23 +1217,23 @@ var Input = (0, import_react8.forwardRef)(
                 type: localType === "password" ? showPassword ? "text" : "password" : localType
               }
             ),
-            type === "password" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            type === "password" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setShowPassword(!showPassword),
                 className: "absolute inset-y-0 right-0 pr-2.5 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors focus:outline-none cursor-pointer",
                 tabIndex: -1,
-                children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Eye, { className: "h-5 w-5" })
+                children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.Eye, { className: "h-5 w-5" })
               }
             )
           ] }),
-          message && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+          message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
         ]
       }
     );
     if (form && name && type === "number") {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         import_react_hook_form.Controller,
         {
           control: form.control,
@@ -1287,7 +1303,7 @@ var import_react9 = require("react");
 var import_react_phone_number_input = __toESM(require("react-phone-number-input"));
 var import_style = require("react-phone-number-input/style.css");
 var import_react_hook_form2 = require("react-hook-form");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var PhoneInput = (0, import_react9.forwardRef)(
   ({
     label,
@@ -1316,8 +1332,8 @@ var PhoneInput = (0, import_react9.forwardRef)(
       }
       message = currentError?.message || message;
     }
-    const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "label",
         {
           className: `block text-xs font-medium transition-colors duration-200`,
@@ -1326,12 +1342,12 @@ var PhoneInput = (0, import_react9.forwardRef)(
           },
           children: [
             label,
-            props.required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
             className: `transition-colors duration-200`,
@@ -1339,7 +1355,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
             children: icon
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_react_phone_number_input.default,
           {
             ref,
@@ -1359,10 +1375,10 @@ var PhoneInput = (0, import_react9.forwardRef)(
           }
         )
       ] }),
-      message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
     if (form && name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         import_react_hook_form2.Controller,
         {
           name,
@@ -1385,7 +1401,7 @@ var import_react10 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_lucide_react7 = require("lucide-react");
 var import_react_hook_form3 = require("react-hook-form");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SelectContext = (0, import_react10.createContext)(void 0);
 var useSelectContext = () => {
   const context = (0, import_react10.useContext)(SelectContext);
@@ -1396,7 +1412,7 @@ var useSelectContext = () => {
 var Select = (0, import_react10.forwardRef)((props, ref) => {
   const { form, name, onChange, value, children, options = [] } = props;
   if (form && name) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_react_hook_form3.Controller,
       {
         name,
@@ -1408,7 +1424,7 @@ var Select = (0, import_react10.forwardRef)((props, ref) => {
             ref: fieldRef,
             onBlur
           }
-        }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           SelectRoot,
           {
             ...props,
@@ -1425,7 +1441,7 @@ var Select = (0, import_react10.forwardRef)((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SelectRoot,
     {
       ...props,
@@ -1532,25 +1548,25 @@ var SelectRoot = ({
     disabled
   };
   const hasChildren = import_react10.default.Children.count(children) > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectContext.Provider, { value: valueCtx, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectContext.Provider, { value: valueCtx, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       ref: containerRef,
       className: `${label ? "space-y-2" : ""} group relative ${containerClassName}`,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "label",
           {
             className: `block text-xs font-medium transition-colors duration-200`,
             style: { color: isFocused || isOpen ? primaryColor : void 0 },
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
             ]
           }
         ),
-        hasChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        hasChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             SelectTrigger,
             {
               id,
@@ -1561,7 +1577,7 @@ var SelectRoot = ({
               ...props
             }
           ),
-          allOptions && allOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectContent, { children: allOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          allOptions && allOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectContent, { children: allOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             SelectItem,
             {
               value: opt.value,
@@ -1571,7 +1587,7 @@ var SelectRoot = ({
             String(opt.value) || index
           )) })
         ] }),
-        message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+        message && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
       ]
     }
   ) });
@@ -1603,7 +1619,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
     const lastFocusTime = (0, import_react10.useRef)(0);
     const displayOption = options.find((o) => o.value === selectedValue);
     const displayValue = displayOption ? displayOption.label : selectedValue != null && selectedValue !== "" ? String(selectedValue) : placeholder;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         id,
@@ -1652,8 +1668,8 @@ var SelectTrigger = (0, import_react10.forwardRef)(
           }
         },
         ...props,
-        children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "div",
             {
               className: `pl-2.5 pr-2 flex items-center transition-colors duration-200`,
@@ -1663,14 +1679,14 @@ var SelectTrigger = (0, import_react10.forwardRef)(
               children: icon
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "div",
             {
               className: `flex-1 truncate text-sm ${icon ? "" : "pl-2.5"} ${!selectedValue && selectedValue !== 0 && selectedValue !== false ? "text-gray-400 dark:text-zinc-500" : ""}`,
               children: displayValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             import_lucide_react7.ChevronDown,
             {
               className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -1716,7 +1732,7 @@ var SelectContent = (0, import_react10.forwardRef)(
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined") return null;
     return (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
           ref: dropdownContentRef,
@@ -1724,7 +1740,7 @@ var SelectContent = (0, import_react10.forwardRef)(
           style: { ...dropdownStyle, ...style },
           onMouseDown: (e) => e.stopPropagation(),
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-0.5", children: import_react10.default.Children.count(children) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" }) : children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col gap-0.5", children: import_react10.default.Children.count(children) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" }) : children })
         }
       ),
       document.body
@@ -1755,7 +1771,7 @@ var SelectItem = (0, import_react10.forwardRef)(
       setIsOpen(false);
       fieldInternalProps?.onBlur?.();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
       {
         ref,
@@ -1771,8 +1787,8 @@ var SelectItem = (0, import_react10.forwardRef)(
         },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "whitespace-nowrap truncate flex-1", children: children || label }),
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "whitespace-nowrap truncate flex-1", children: children || label }),
+          isSelected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             import_lucide_react7.Check,
             {
               className: "h-4 w-4 shrink-0 ml-2",
@@ -1789,7 +1805,7 @@ SelectItem.displayName = "SelectItem";
 // src/components/Fields/textArea.tsx
 var import_react11 = require("react");
 var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Textarea = (0, import_react11.forwardRef)(
   ({
     label,
@@ -1813,8 +1829,8 @@ var Textarea = (0, import_react11.forwardRef)(
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
       message = errorObj?.message;
     }
-    const renderInput = (inputProps, ref2) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    const renderInput = (inputProps, ref2) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "label",
         {
           htmlFor: props.id,
@@ -1822,11 +1838,11 @@ var Textarea = (0, import_react11.forwardRef)(
           style: { color: isFocused ? primaryColor : void 0 },
           children: [
             label,
-            props.required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "textarea",
         {
           ref: ref2,
@@ -1847,10 +1863,10 @@ var Textarea = (0, import_react11.forwardRef)(
           ...inputProps
         }
       ) }),
-      message && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
     if (form && name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         import_react_hook_form4.Controller,
         {
           control: form.control,
@@ -2049,7 +2065,7 @@ var useApis_default = useApi;
 
 // src/components/Fields/searchApi.tsx
 var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SearchApiContext = (0, import_react13.createContext)(
   void 0
 );
@@ -2065,12 +2081,12 @@ var SearchApi = (0, import_react13.forwardRef)(
   (props, _) => {
     const { form, name, onChange, value, children, ...restProps } = props;
     if (form && name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_react_hook_form5.Controller,
         {
           name,
           control: form.control,
-          render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             SearchApiRoot,
             {
               ...restProps,
@@ -2088,7 +2104,7 @@ var SearchApi = (0, import_react13.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SearchApiRoot,
       {
         ...restProps,
@@ -2117,7 +2133,7 @@ var SearchApiRoot = ({
   valueKey = "_id",
   filter = [],
   required,
-  v = 2,
+  v = 1,
   variant = "default",
   fieldInternalProps,
   label,
@@ -2348,26 +2364,26 @@ var SearchApiRoot = ({
     error: message
   };
   const hasChildren = !!children;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       ref: containerRef,
       className: `${label ? "space-y-2" : ""} group relative ${containerClassName}`,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "label",
           {
             className: `block text-xs font-medium transition-colors duration-200`,
             style: { color: isFocused || isOpen ? primaryColor : void 0 },
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
             ]
           }
         ),
-        hasChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiTrigger, { className, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiInput, { ...props }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiContent, { children: filteredOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        hasChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SearchApiTrigger, { className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SearchApiInput, { ...props }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SearchApiContent, { children: filteredOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             SearchApiItem,
             {
               option: opt,
@@ -2397,7 +2413,7 @@ var SearchApiTrigger = (0, import_react13.forwardRef)(
       inputRef,
       searchTerm
     } = useSearchApiContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         className: `flex items-center w-full px-0 text-gray-900 dark:text-white transition-all duration-200 cursor-text py-1 ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full" : isFocused || isOpen ? "ring-2 bg-white dark:bg-zinc-900 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
@@ -2414,25 +2430,25 @@ var SearchApiTrigger = (0, import_react13.forwardRef)(
         },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               className: `${variant === "ghost" ? "pl-0" : "pl-2.5"} text-gray-400`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Search, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Search, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 relative ms-2", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
-            selectedValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 relative ms-2", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Loader2, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
+            selectedValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: clearSelection,
                 type: "button",
                 className: "p-0.5 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               import_lucide_react8.ChevronDown,
               {
                 className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -2464,7 +2480,10 @@ var SearchApiInput = (0, import_react13.forwardRef)(
       options,
       handleSelect,
       inputRef,
-      fieldInternalProps
+      fieldInternalProps,
+      form,
+      name,
+      obj
     } = useSearchApiContext();
     const setInternalInputRef = (element) => {
       inputRef.current = element;
@@ -2508,9 +2527,9 @@ var SearchApiInput = (0, import_react13.forwardRef)(
           break;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      !isOpen && selectedValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      !isOpen && selectedValue && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         {
           ref: setInternalInputRef,
@@ -2526,6 +2545,10 @@ var SearchApiInput = (0, import_react13.forwardRef)(
             } else {
               setIsOpen(false);
             }
+            if (form) {
+              if (name) form.clearErrors(name);
+              if (obj) form.clearErrors(obj);
+            }
           },
           onFocus: () => {
             setIsFocused(true);
@@ -2585,7 +2608,7 @@ var SearchApiContent = (0, import_react13.forwardRef)(
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined") return null;
     return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "div",
         {
           ref: dropdownContentRef,
@@ -2594,11 +2617,11 @@ var SearchApiContent = (0, import_react13.forwardRef)(
           onMouseDown: (e) => e.stopPropagation(),
           ...props,
           children: [
-            error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 border-b border-gray-100 dark:border-zinc-800", children: error }),
-            isLoading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
+            error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 border-b border-gray-100 dark:border-zinc-800", children: error }),
+            isLoading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Loader2, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
               "Loading options..."
-            ] }) : children ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-1", children }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-4 text-center text-sm text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+            ] }) : children ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "py-1", children }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-4 text-center text-sm text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
           ]
         }
       ),
@@ -2627,7 +2650,7 @@ var SearchApiItem = (0, import_react13.forwardRef)(
     const optValue = getOptionValue(option);
     const isSelected = selectedValue === optValue;
     const isHighlighted = index === activeIndex;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "button",
       {
         ref,
@@ -2646,8 +2669,8 @@ var SearchApiItem = (0, import_react13.forwardRef)(
         onMouseEnter: () => setActiveIndex(index),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: option[labelKey] }),
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Check, { className: "h-4 w-4", style: { color: primaryColor } })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate", children: option[labelKey] }),
+          isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Check, { className: "h-4 w-4", style: { color: primaryColor } })
         ]
       },
       optValue || index
@@ -2663,7 +2686,7 @@ var import_react_hook_form6 = require("react-hook-form");
 var import_dayjs = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 import_dayjs.default.extend(import_customParseFormat.default);
 var DateInput = (0, import_react14.forwardRef)(
   ({
@@ -2700,7 +2723,7 @@ var DateInput = (0, import_react14.forwardRef)(
       ${className}`;
     const renderDatePicker = (val, changeHandler, blurHandler, refProps) => {
       const dateValue = val && typeof val === "string" ? (0, import_dayjs.default)(val, "DD/MM/YYYY", true) : import_dayjs.default.isDayjs(val) ? val : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_antd.DatePicker,
         {
           ref: refProps,
@@ -2727,7 +2750,7 @@ var DateInput = (0, import_react14.forwardRef)(
             boxShadow: isFocused && !message ? `${primaryColor}33 0px 0px 0px 2px` : void 0
           },
           classNames: { popup: { root: "z-50" } },
-          suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             import_lucide_react9.Calendar,
             {
               className: "h-5 w-5 text-gray-400",
@@ -2739,8 +2762,8 @@ var DateInput = (0, import_react14.forwardRef)(
         }
       );
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "label",
         {
           className: "block text-xs font-medium transition-colors duration-200",
@@ -2749,11 +2772,11 @@ var DateInput = (0, import_react14.forwardRef)(
           },
           children: [
             label,
-            props.required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
           ]
         }
       ),
-      form && name ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      form && name ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_react_hook_form6.Controller,
         {
           control: form.control,
@@ -2766,7 +2789,7 @@ var DateInput = (0, import_react14.forwardRef)(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      message && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
   }
 );
@@ -2793,7 +2816,7 @@ var Fields_default = Fields;
 var import_react15 = __toESM(require("react"));
 var import_react_table = require("@tanstack/react-table");
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function DataTable({
   columns: userColumns,
   data,
@@ -2868,7 +2891,7 @@ function DataTable({
       {
         id: "_index",
         header: "#",
-        cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
+        cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
         enableSorting: false
       },
       ...mappedColumns
@@ -2927,29 +2950,29 @@ function DataTable({
     table.getState().pagination.pageIndex,
     table.getState().pagination.pageSize
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `space-y-4 w-full ${className}`, children: [
-    filterables && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `space-y-4 w-full ${className}`, children: [
+    filterables && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         Fields_default.Input,
         {
           placeholder: searchPlaceholder,
           value: globalFilter,
           onChange: (e) => setGlobalFilter(e.target.value),
-          icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Search, { size: 16 }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Search, { size: 16 }),
           className: "h-9!"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { className: "flex items-center gap-2 px-3 h-9 rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "flex items-center gap-2 px-3 h-9 rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors", children: [
           "Columns",
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.ChevronDown, { size: 14, className: "text-gray-400" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.ChevronDown, { size: 14, className: "text-gray-400" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute right-0 top-full mt-2 w-48 py-1 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50", children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute right-0 top-full mt-2 w-48 py-1 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50", children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "label",
           {
             className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 cursor-pointer capitalize",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "input",
                 {
                   type: "checkbox",
@@ -2966,13 +2989,13 @@ function DataTable({
         )) })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden relative", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "table",
       {
         className: "w-full text-left border-collapse",
         style: { accentColor: primaryColor },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "th",
             {
               className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -2983,22 +3006,22 @@ function DataTable({
             },
             header.id
           )) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "tr",
             {
               className: "border-b border-gray-100 dark:border-zinc-800/50",
-              children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "td",
                 {
                   className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
                 },
                 `skeleton-cell-${j}`
               ))
             },
             `skeleton-${i}`
-          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react15.default.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react15.default.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "tr",
               {
                 className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
@@ -3013,7 +3036,7 @@ function DataTable({
                     }
                   }
                 },
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "td",
                   {
                     className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" || cell.column.id === "select" || cell.column.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -3026,14 +3049,14 @@ function DataTable({
                 ))
               }
             ),
-            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
+            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
               renderSubComponent({
                 row: row.original,
                 index: row.index
               })
             ] }) }) })
-          ] }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ] }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "td",
             {
               colSpan: columns.length,
@@ -3045,7 +3068,7 @@ function DataTable({
             (group) => group.headers.some(
               (header) => header.column.columnDef.footer
             )
-          ) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "td",
             {
               className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -3059,24 +3082,24 @@ function DataTable({
         ]
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 text-xs text-gray-500", children: selectable && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 text-xs text-gray-500", children: selectable && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
         table.getFilteredSelectedRowModel().rows.length,
         " of",
         " ",
         table.getFilteredRowModel().rows.length,
         " row(s) selected."
       ] }) }),
-      pageRows && table.getPageCount() > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-sm text-gray-700 dark:text-gray-300 mr-2 select-none", children: [
+      pageRows && table.getPageCount() > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "text-sm text-gray-700 dark:text-gray-300 mr-2 select-none", children: [
           "Page",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-semibold", children: table.getState().pagination.pageIndex + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-semibold", children: table.getState().pagination.pageIndex + 1 }),
           " ",
           "of ",
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-semibold", children: table.getPageCount() })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-semibold", children: table.getPageCount() })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             onClick: () => table.previousPage(),
@@ -3085,7 +3108,7 @@ function DataTable({
             children: "Previous"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             onClick: () => table.nextPage(),
@@ -3103,7 +3126,7 @@ function DataTable({
 var import_react16 = __toESM(require("react"));
 var import_react_table2 = require("@tanstack/react-table");
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function PostTable({
   columns: userColumns,
   data: controlledData,
@@ -3275,23 +3298,23 @@ function PostTable({
     id: "actions",
     header: "Actions",
     cell: ({ row }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
             onClick: () => handleEdit(row.index, row.original),
             className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-(--theme-primary) dark:hover:text-(--theme-primary) transition-colors",
             title: "Edit",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Edit2, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Edit2, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
             onClick: () => handleDelete(row.index),
             className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors",
             title: "Delete",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Trash2, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Trash2, { size: 16 })
           }
         )
       ] });
@@ -3308,9 +3331,9 @@ function PostTable({
       finalColumns.unshift({
         id: "_index",
         header: "#",
-        cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
-          renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
+          renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             import_lucide_react11.ChevronDown,
             {
               size: 16,
@@ -3320,7 +3343,7 @@ function PostTable({
         ] }),
         enableSorting: false,
         meta: {
-          field: () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-gray-400 font-medium px-2 block select-none", children: "#" })
+          field: () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-gray-400 font-medium px-2 block select-none", children: "#" })
         }
       });
     }
@@ -3344,13 +3367,13 @@ function PostTable({
       expanded
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       className: `space-y-4 w-full ${className}`,
       style: { "--theme-primary": primaryColor || "#3b82f6" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { className: "w-full text-left border-collapse", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "w-full text-left border-collapse", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "th",
           {
             className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
@@ -3361,23 +3384,23 @@ function PostTable({
           },
           header.id
         )) }, headerGroup.id)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("tbody", { className: "", children: [
-          isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "", children: [
+          isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "tr",
             {
               className: "border-b border-gray-100 dark:border-zinc-800/50",
-              children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "td",
                 {
                   className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
                 },
                 `skeleton-cell-${j}`
               ))
             },
             `skeleton-${i}`
-          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react16.default.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react16.default.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "tr",
               {
                 className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
@@ -3392,7 +3415,7 @@ function PostTable({
                     }
                   }
                 },
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "td",
                   {
                     className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
@@ -3405,14 +3428,14 @@ function PostTable({
                 ))
               }
             ),
-            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
+            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
               renderSubComponent({
                 row: row.original,
                 index: row.index
               })
             ] }) }) })
-          ] }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          ] }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "td",
             {
               colSpan: columns.length,
@@ -3420,7 +3443,7 @@ function PostTable({
               children: "No results found."
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "tr",
             {
               ref: entryRowRef,
@@ -3435,7 +3458,7 @@ function PostTable({
                 return visibleColumns.map((column) => {
                   const currentId = column.id || column.columnDef.accessorKey;
                   if (column.id === "actions") {
-                    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "td",
                       {
                         className: cn(
@@ -3443,32 +3466,32 @@ function PostTable({
                           "py-1! text-sm align-middle transition-colors duration-200",
                           verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center gap-2", children: editingIndex !== null ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: editingIndex !== null ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             "button",
                             {
                               onClick: handleSaveField,
                               disabled: isSavingAsync,
                               className: "flex-1 h-8 flex items-center justify-center rounded-lg bg-green-500/10 text-green-600 dark:bg-emerald-500/20 dark:text-emerald-400 hover:bg-green-500 hover:text-white dark:hover:bg-emerald-500 transition-colors shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
                               title: "Update",
-                              children: isSavingAsync ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-emerald-500/30 border-t-emerald-500 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Check, { size: 16, strokeWidth: 2.5 })
+                              children: isSavingAsync ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-emerald-500/30 border-t-emerald-500 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { size: 16, strokeWidth: 2.5 })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             "button",
                             {
                               onClick: handleCancelEdit,
                               disabled: isSavingAsync,
                               className: "flex-1 h-8 flex items-center justify-center rounded-lg bg-red-500/10 text-red-600 dark:bg-red-500/20 dark:text-red-400 hover:bg-red-500 hover:text-white dark:hover:bg-red-500 transition-colors shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
                               title: "Cancel",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.X, { size: 16, strokeWidth: 2.5 })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.X, { size: 16, strokeWidth: 2.5 })
                             }
                           )
-                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: renderAddButton ? renderAddButton(
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: renderAddButton ? renderAddButton(
                           entryData,
                           handleSaveField,
                           isSavingAsync
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                           "button",
                           {
                             onClick: handleSaveField,
@@ -3479,8 +3502,8 @@ function PostTable({
                             },
                             title: "Add Row",
                             children: [
-                              isSavingAsync ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Plus, { size: 14, strokeWidth: 2.5 }),
-                              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: isSavingAsync ? "Adding..." : "Add" })
+                              isSavingAsync ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Plus, { size: 14, strokeWidth: 2.5 }),
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: isSavingAsync ? "Adding..." : "Add" })
                             ]
                           }
                         ) }) })
@@ -3506,7 +3529,7 @@ function PostTable({
                       });
                     }
                   };
-                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "td",
                     {
                       "data-column-id": column.id,
@@ -3526,7 +3549,7 @@ function PostTable({
                         column.id === "_index" ? "w-px whitespace-nowrap" : "",
                         hasError && "ring-1 ring-inset ring-red-500"
                       ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                         "div",
                         {
                           className: cn(
@@ -3539,13 +3562,22 @@ function PostTable({
                               handleSaveField();
                             }
                           },
+                          onInput: () => {
+                            if (fieldErrors[accessor]) {
+                              setFieldErrors((prev) => {
+                                const next = { ...prev };
+                                delete next[accessor];
+                                return next;
+                              });
+                            }
+                          },
                           children: [
                             fieldRenderer ? fieldRenderer({
                               value,
                               onChange: onChangeValue,
                               rowData: entryData,
                               setRowData: setEntryData
-                            }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                               Fields_default.Input,
                               {
                                 id: `pti-${accessor}`,
@@ -3557,7 +3589,7 @@ function PostTable({
                                 placeholder: `${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`
                               }
                             ),
-                            typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute left-1/2 -translate-x-1/2 bottom-[100%] mb-2 z-[9999] pointer-events-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 group-focus-within:opacity-100 transition-opacity whitespace-nowrap bg-red-500 text-white text-xs px-2.5 py-1.5 rounded shadow-lg before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-red-500", children: error })
+                            typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 z-9999 pointer-events-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 group-focus-within:opacity-100 transition-opacity whitespace-nowrap bg-red-500 text-white text-xs px-2.5 py-1.5 rounded shadow-lg before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-red-500", children: error })
                           ]
                         }
                       )
@@ -3573,7 +3605,7 @@ function PostTable({
           (group) => group.headers.some(
             (header) => header.column.columnDef.footer
           )
-        ) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "td",
           {
             className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
@@ -3592,7 +3624,7 @@ function PostTable({
 // src/components/tables/SimpleTable.tsx
 var import_react17 = require("react");
 var import_react_table3 = require("@tanstack/react-table");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function SimpleTable({
   columns: userColumns,
   data,
@@ -3639,17 +3671,17 @@ function SimpleTable({
       )
     );
   }, [table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `w-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `w-full overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "table",
       {
         className: `w-full max-w-full text-left border-collapse table-fixed ${verticalLines ? "border border-black dark:border-white" : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-200 dark:border-zinc-800"}`,
-              children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "th",
                 {
                   className: `${rowPadding} font-semibold text-gray-900 dark:text-zinc-100 text-sm align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
@@ -3668,32 +3700,32 @@ function SimpleTable({
             },
             headerGroup.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { className: "text-black dark:text-white font-semibold font-sans tabular-nums", children: isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { className: "text-black dark:text-white font-semibold font-sans tabular-nums", children: isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-100 dark:border-zinc-800/60 last:border-0"}`,
-              children: columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "td",
                 {
                   className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-zinc-800 rounded-sm animate-pulse w-full" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-zinc-800 rounded-sm animate-pulse w-full" })
                 },
                 `skeleton-col-${colIdx}`
               ))
             },
             `skeleton-row-${i}`
-          )) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          )) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "td",
             {
               colSpan: columns.length,
               className: "text-center py-8 text-gray-500 font-medium",
               children: "No transactions found."
             }
-          ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-100 dark:border-zinc-800/60 last:border-0"} hover:bg-gray-50/50 dark:hover:bg-zinc-900/30 transition-colors`,
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "td",
                 {
                   className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${cell.column.columnDef.className || "wrap-break-word"}`,
@@ -3704,11 +3736,11 @@ function SimpleTable({
             },
             row.id
           )) }),
-          hasFooters && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { className: "text-black dark:text-white font-bold font-sans tabular-nums", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          hasFooters && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tfoot", { className: "text-black dark:text-white font-bold font-sans tabular-nums", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "tr",
             {
               className: `${verticalLines ? "border-t border-black dark:border-white" : "bg-gray-50/30 dark:bg-zinc-900/10"}`,
-              children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "td",
                 {
                   className: `text-sm ${rowPadding} ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
@@ -3725,13 +3757,13 @@ function SimpleTable({
         ]
       }
     ),
-    componentFooter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-2 pt-3 border-t border-gray-200 dark:border-zinc-800", children: componentFooter() })
+    componentFooter && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-2 pt-3 border-t border-gray-200 dark:border-zinc-800", children: componentFooter() })
   ] });
 }
 
 // src/components/Badge.tsx
 var import_react18 = __toESM(require("react"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Badge = import_react18.default.forwardRef(
   ({
     children,
@@ -3753,7 +3785,7 @@ var Badge = import_react18.default.forwardRef(
       md: "px-2.5 py-1 text-xs leading-tight font-semibold",
       lg: "px-3 py-1.5 text-sm leading-tight font-semibold"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "span",
       {
         ref,
@@ -3767,13 +3799,13 @@ var Badge = import_react18.default.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Branding.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Branding = ({
   text,
   disabled = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "p",
     {
       className: cn(
@@ -3790,7 +3822,7 @@ var Branding = ({
 var import_react19 = require("react");
 var import_react_to_print = require("react-to-print");
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var useA4StatementView = ({
   url,
   v = 1,
@@ -3819,7 +3851,7 @@ var useA4StatementView = ({
         renderFooter: (value) => value.reduce((acc, item) => acc + item.amount, 0)
       }
     ],
-    data = apiData || [],
+    data = [],
     error = apiError,
     info,
     index,
@@ -3850,20 +3882,20 @@ var useA4StatementView = ({
     const columnsWithFooters = columns.filter(
       (col) => col.renderFooter && !col.hide
     );
-    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "div",
       {
         id: "a4-final-total",
         className: "mt-6 flex flex-wrap justify-end items-center pt-4 border-t border-black dark:border-zinc-700 print:border-black gap-4",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs mr-auto", children: "Grand Totals" }),
-          columnsWithFooters.map((col, idx) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs mr-auto", children: "Grand Totals" }),
+          columnsWithFooters.map((col, idx) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             "div",
             {
               className: "flex items-center gap-3 px-4 py-2 rounded-md border border-black dark:border-zinc-700 print:border-black",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
               ]
             },
             col.key || idx
@@ -3938,53 +3970,53 @@ var useA4StatementView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
           ] }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-sm text-gray-500 dark:text-gray-400 print:text-gray-500 leading-relaxed text-right flex flex-col items-end", children: [
-              store?.address && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: store.email })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-sm text-gray-500 dark:text-gray-400 print:text-gray-500 leading-relaxed text-right flex flex-col items-end", children: [
+              store?.address && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoGrid, { className: "mb-4", items: info, isLoading }) }) : null;
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoGrid, { className: "mb-4", items: info, isLoading }) }) : null;
     if (!isLoading && (error || !data || data.length === 0)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center p-8 min-h-96", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-xl text-center shadow-sm", children: [
-        error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Statement" : "No Records Found" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-8 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
-        url && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center p-8 min-h-96", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-xl text-center shadow-sm", children: [
+        error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Statement" : "No Records Found" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-8 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
+        url && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "button",
           {
             onClick: () => get({ url, v, params, delay }),
             className: "flex items-center gap-2 px-6 py-2.5 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.RefreshCw, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.RefreshCw, { size: 16 }),
               "Try Again"
             ]
           }
         )
       ] }) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             "div",
             {
               ref: measureContainerRef,
@@ -3992,9 +4024,9 @@ var useA4StatementView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     SimpleTable,
                     {
                       columns,
@@ -4012,42 +4044,42 @@ var useA4StatementView = ({
           )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         PageA4,
         {
           className: "w-full",
           pageNumber: pageIndex + 1,
           totalPages: pages.length,
           isLastPage: pageIndex === pages.length - 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
               headers,
-              printable && pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              printable && pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                   "button",
                   {
                     onClick: () => url && get({ url, v, params, delay }),
                     disabled: isLoading,
                     className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         import_lucide_react12.RefreshCw,
                         {
                           size: 16,
                           className: isLoading ? "animate-spin" : ""
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
+                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                   "button",
                   {
                     onClick: () => reactToPrintFn(),
                     className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.Printer, { size: 16 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Printer, { size: 16 }),
                       "Print"
                     ]
                   }
@@ -4056,10 +4088,10 @@ var useA4StatementView = ({
             ] }),
             pageIndex === 0 && HeaderEl,
             pageIndex === 0 && DisplayInfoGridEl,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "input",
                   {
                     type: "text",
@@ -4070,9 +4102,9 @@ var useA4StatementView = ({
                   }
                 )
               ] }),
-              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
-              pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-5 print:h-0" }),
-              (pageData.length > 0 || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
+              pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-5 print:h-0" }),
+              (pageData.length > 0 || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 SimpleTable,
                 {
                   columns,
@@ -4104,7 +4136,7 @@ var useA4StatementView = ({
 var A4DataView = (props) => {
   const { url, v, delay, params, ...rest } = props;
   const { A4DataView: View } = useA4StatementView({ url, v, delay, params });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(View, { ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(View, { ...rest });
 };
 var useA4DataView_default = useA4StatementView;
 
@@ -4112,7 +4144,7 @@ var useA4DataView_default = useA4StatementView;
 var import_react20 = require("react");
 var import_lucide_react13 = require("lucide-react");
 var import_moment = __toESM(require("moment"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var useTransaction = ({
   url,
   v = 1,
@@ -4147,7 +4179,7 @@ var useTransaction = ({
         hide: true
       }
     ],
-    data = apiData || [],
+    data = [],
     error = apiError,
     pageRows,
     searchPlaceholder = "Search transactions...",
@@ -4164,21 +4196,21 @@ var useTransaction = ({
     ...rest
   }) => {
     if (!isLoading && (error || !data || data.length === 0)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           className: `flex flex-col relative w-full items-center justify-center p-8 min-h-96 ${className}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-xl text-center shadow-sm", children: [
-            error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-8 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
-            url && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-xl text-center shadow-sm", children: [
+            error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-8 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
+            url && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               "button",
               {
                 onClick: () => get({ url, v, params, delay }),
                 className: "flex items-center gap-2 px-6 py-2.5 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.RefreshCw, { size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.RefreshCw, { size: 16 }),
                   "Try Again"
                 ]
               }
@@ -4187,14 +4219,14 @@ var useTransaction = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Card.Title, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Card.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Title, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Description, { children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("section", { className: "flex gap-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Fields_default.DateInput,
             {
               value: date,
@@ -4204,20 +4236,20 @@ var useTransaction = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Button,
             {
               size: "sm",
               className: "rounded-md!",
               onClick: onCreate,
               variant: "primary",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.Plus, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Plus, {}),
               children: createTitle
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         DataTable,
         {
           columns,