warqadui 0.0.31 → 0.0.33

package/dist/index.d.mts

@@ -351,7 +351,7 @@ interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
 }
 declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps & React$1.RefAttributes<any>>;
 
-interface InputProps<T extends FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "form"> {
+interface InputProps<T extends FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "form" | "onChange"> {
     label?: string;
     icon?: React.ReactNode;
     error?: string;
@@ -360,6 +360,7 @@ interface InputProps<T extends FieldValues> extends Omit<React.InputHTMLAttribut
     form?: UseFormReturn<T>;
     type?: "text" | "number" | "email" | "password";
     variant?: "ghost" | "default";
+    onChange?: (value: any) => void;
 }
 declare const Input: <T extends FieldValues>(props: InputProps<T> & {
     ref?: React.ForwardedRef<HTMLInputElement>;
@@ -442,17 +443,18 @@ interface PostTableActions {
     focus: (columnId: string) => void;
     setError: (columnId: string, error: boolean | string) => void;
 }
+interface PostTableChangeParams<TData> {
+    entryData: Partial<TData>;
+    actions: PostTableActions;
+    actionType: "add" | "edit" | "delete";
+    fullData: TData[];
+}
 interface PostTableProps<TData> {
     columns: (ColumnDef<TData, any> & {
         key?: string;
     })[];
     data?: TData[];
-    onChange?: (params: {
-        entryData: Partial<TData>;
-        actions: PostTableActions;
-        actionType: "add" | "edit" | "delete";
-        fullData: TData[];
-    }) => void | Promise<void | boolean>;
+    onChange?: (params: PostTableChangeParams<TData>) => void | Promise<void | boolean>;
     isLoading?: boolean;
     className?: string;
     verticalLines?: boolean;
@@ -466,9 +468,12 @@ interface PostTableProps<TData> {
     hasSubComponent?: (row: TData) => boolean;
     defaultExpanded?: boolean;
     submitLoading?: boolean;
+    onCancel?: () => void;
+    onEdit?: (row: TData) => void;
+    onDelete?: (row: TData) => void;
 }
 declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
-defaultExpanded, submitLoading, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
+defaultExpanded, submitLoading, onCancel, onEdit, onDelete, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 type SimpleTableColumn<TData> = ColumnDef<TData, any> & {
     key?: string;
@@ -703,4 +708,4 @@ interface StorageManager {
  */
 declare const storage: StorageManager;
 
-export { A4DataView, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };
+export { A4DataView, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PostTableChangeParams, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };

package/dist/index.d.ts

@@ -351,7 +351,7 @@ interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
 }
 declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps & React$1.RefAttributes<any>>;
 
-interface InputProps<T extends FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "form"> {
+interface InputProps<T extends FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "form" | "onChange"> {
     label?: string;
     icon?: React.ReactNode;
     error?: string;
@@ -360,6 +360,7 @@ interface InputProps<T extends FieldValues> extends Omit<React.InputHTMLAttribut
     form?: UseFormReturn<T>;
     type?: "text" | "number" | "email" | "password";
     variant?: "ghost" | "default";
+    onChange?: (value: any) => void;
 }
 declare const Input: <T extends FieldValues>(props: InputProps<T> & {
     ref?: React.ForwardedRef<HTMLInputElement>;
@@ -442,17 +443,18 @@ interface PostTableActions {
     focus: (columnId: string) => void;
     setError: (columnId: string, error: boolean | string) => void;
 }
+interface PostTableChangeParams<TData> {
+    entryData: Partial<TData>;
+    actions: PostTableActions;
+    actionType: "add" | "edit" | "delete";
+    fullData: TData[];
+}
 interface PostTableProps<TData> {
     columns: (ColumnDef<TData, any> & {
         key?: string;
     })[];
     data?: TData[];
-    onChange?: (params: {
-        entryData: Partial<TData>;
-        actions: PostTableActions;
-        actionType: "add" | "edit" | "delete";
-        fullData: TData[];
-    }) => void | Promise<void | boolean>;
+    onChange?: (params: PostTableChangeParams<TData>) => void | Promise<void | boolean>;
     isLoading?: boolean;
     className?: string;
     verticalLines?: boolean;
@@ -466,9 +468,12 @@ interface PostTableProps<TData> {
     hasSubComponent?: (row: TData) => boolean;
     defaultExpanded?: boolean;
     submitLoading?: boolean;
+    onCancel?: () => void;
+    onEdit?: (row: TData) => void;
+    onDelete?: (row: TData) => void;
 }
 declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
-defaultExpanded, submitLoading, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
+defaultExpanded, submitLoading, onCancel, onEdit, onDelete, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 type SimpleTableColumn<TData> = ColumnDef<TData, any> & {
     key?: string;
@@ -703,4 +708,4 @@ interface StorageManager {
  */
 declare const storage: StorageManager;
 
-export { A4DataView, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };
+export { A4DataView, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PostTableChangeParams, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };

package/dist/index.js

@@ -1157,6 +1157,14 @@ var Input = (0, import_react8.forwardRef)(
     const [showPassword, setShowPassword] = (0, import_react8.useState)(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
+    (0, import_react8.useEffect)(() => {
+      if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, props.value);
+        }
+      }
+    }, [props.value, name, form]);
     let message = error;
     if (form && name) {
       const {
@@ -1239,39 +1247,62 @@ var Input = (0, import_react8.forwardRef)(
         {
           control: form.control,
           name,
-          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
-            {
-              ref: fieldRef,
-              onBlur: () => {
-                onBlur2();
-              },
-              value: value ? String(value).split(".").map(
-                (part, index) => index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-              ).join(".") : "",
-              onChange: (e) => {
-                const rawValue = e.target.value.replace(/,/g, "");
-                if (!/^\d*\.?\d*$/.test(rawValue)) return;
-                if (rawValue === "") {
-                  onChange("");
-                } else {
-                  const numValue = Number(rawValue);
-                  if (!isNaN(numValue) && String(numValue) === rawValue) {
-                    onChange(numValue);
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => {
+            const hasValue = value !== void 0 && value !== null && value !== "";
+            const hasPropsValue = props.value !== void 0 && props.value !== null && props.value !== "";
+            const displayValue = hasValue ? value : hasPropsValue ? props.value : "";
+            return renderInput(
+              {
+                ref: fieldRef,
+                onBlur: () => {
+                  onBlur2();
+                },
+                value: displayValue !== "" ? String(displayValue).split(".").map(
+                  (part, index) => index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+                ).join(".") : "",
+                onChange: (e) => {
+                  const rawValue = e.target.value.replace(/,/g, "");
+                  if (!/^\d*\.?\d*$/.test(rawValue)) return;
+                  if (rawValue === "") {
+                    onChange("");
+                    props.onChange?.("");
                   } else {
-                    onChange(rawValue);
+                    const numValue = Number(rawValue);
+                    if (!isNaN(numValue) && String(numValue) === rawValue) {
+                      onChange(numValue);
+                      props.onChange?.(numValue);
+                    } else {
+                      onChange(rawValue);
+                      props.onChange?.(rawValue);
+                    }
                   }
                 }
-                props.onChange?.(e);
-              }
-            },
-            "text"
-          )
+              },
+              "text"
+            );
+          }
         }
       );
     }
-    let inputPropsObj = form && name ? form.register(name, type === "number" ? { valueAsNumber: true } : {}) : {};
+    let inputPropsObj = {};
+    const originalOnChange = props.onChange;
+    if (form && name) {
+      const registeredProps = form.register(
+        name,
+        type === "number" ? { valueAsNumber: true } : {}
+      );
+      inputPropsObj = {
+        ...registeredProps,
+        onChange: (e) => {
+          registeredProps.onChange(e);
+          const rawValue = e.target.value.replace(/,/g, "");
+          originalOnChange?.(
+            type === "number" ? rawValue === "" ? "" : Number(rawValue) : e.target.value
+          );
+        }
+      };
+    }
     if (type === "number" && (!form || !name)) {
-      const originalOnChange = props.onChange;
       inputPropsObj = {
         ...inputPropsObj,
         value: props.value !== void 0 && props.value !== null ? String(props.value).split(".").map(
@@ -1281,20 +1312,20 @@ var Input = (0, import_react8.forwardRef)(
           const rawValue = e.target.value.replace(/,/g, "");
           if (!/^\d*\.?\d*$/.test(rawValue)) return;
           if (originalOnChange) {
-            const fakeEvent = {
-              ...e,
-              target: {
-                ...e.target,
-                value: rawValue,
-                valueAsNumber: rawValue === "" ? NaN : Number(rawValue)
-              }
-            };
-            originalOnChange(fakeEvent);
+            originalOnChange(rawValue === "" ? "" : Number(rawValue));
           }
         }
       };
       return renderInput(inputPropsObj, "text");
     }
+    if (!form || !name) {
+      inputPropsObj = {
+        ...inputPropsObj,
+        onChange: (e) => {
+          originalOnChange?.(e.target.value);
+        }
+      };
+    }
     return renderInput(inputPropsObj, type === "number" ? "text" : type);
   }
 );
@@ -1412,6 +1443,14 @@ var useSelectContext = () => {
 };
 var Select = (0, import_react10.forwardRef)((props, ref) => {
   const { form, name, onChange, value, children, options = [] } = props;
+  (0, import_react10.useEffect)(() => {
+    if (form && name && value !== void 0 && value !== null && value !== "") {
+      const currentFormValue = form.getValues(name);
+      if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+        form.setValue(name, value);
+      }
+    }
+  }, [value, name, form]);
   if (form && name) {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_react_hook_form3.Controller,
@@ -1866,30 +1905,47 @@ var Textarea = (0, import_react11.forwardRef)(
       ) }),
       message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
+    (0, import_react11.useEffect)(() => {
+      if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, props.value);
+        }
+      }
+    }, [props.value, name, form]);
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         import_react_hook_form4.Controller,
         {
           control: form.control,
           name,
-          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
-            {
-              value: value || "",
-              // Ensure controlled input doesn't warn about uncontrolled
-              onChange: (e) => {
-                onChange(e);
-                props.onChange?.(e);
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => {
+            const displayValue = value !== void 0 && value !== null && value !== "" ? value : props.value;
+            return renderInput(
+              {
+                value: displayValue || "",
+                onChange: (e) => {
+                  onChange(e);
+                  props.onChange?.(e);
+                },
+                onBlur: () => {
+                  onBlur2();
+                }
               },
-              onBlur: () => {
-                onBlur2();
-              }
-            },
-            fieldRef
-          )
+              fieldRef
+            );
+          }
         }
       );
     }
-    return renderInput({}, ref);
+    return renderInput(
+      {
+        onChange: (e) => {
+          props.onChange?.(e);
+        }
+      },
+      ref
+    );
   }
 );
 
@@ -2081,6 +2137,14 @@ var useSearchApiContext = () => {
 var SearchApi = (0, import_react13.forwardRef)(
   (props, _) => {
     const { form, name, onChange, onSelect, onClear, value, children, ...restProps } = props;
+    (0, import_react13.useEffect)(() => {
+      if (form && name && value !== void 0 && value !== null && value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, value);
+        }
+      }
+    }, [value, name, form]);
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_react_hook_form5.Controller,
@@ -2209,12 +2273,12 @@ var SearchApiRoot = ({
     }
   }, [isOpen]);
   (0, import_react13.useEffect)(() => {
-    if (currentValue && !selectedObject) {
+    if (currentValue !== void 0 && currentValue !== null && currentValue !== "" && !selectedObject) {
       setHasAttemptedHydration(false);
       fetchOptions(currentValue).finally(() => {
         setHasAttemptedHydration(true);
       });
-    } else if (!currentValue) {
+    } else if (currentValue === void 0 || currentValue === null || currentValue === "") {
       setHasAttemptedHydration(true);
       if (selectedObject) setSelectedObject(void 0);
     }
@@ -2226,7 +2290,7 @@ var SearchApiRoot = ({
     return option[valueKey];
   };
   (0, import_react13.useEffect)(() => {
-    if (currentValue && !selectedObject && options.length > 0) {
+    if (currentValue !== void 0 && currentValue !== null && currentValue !== "" && !selectedObject && options.length > 0) {
       const found = options.find((o) => getOptionValue(o) === currentValue);
       if (found) {
         setSelectedObject(found);
@@ -2279,13 +2343,13 @@ var SearchApiRoot = ({
   }, [fieldInternalProps]);
   const getDisplayValue = () => {
     if (selectedObject) return selectedObject[labelKey];
-    if (options.length > 0 && currentValue) {
+    if (options.length > 0 && (currentValue !== void 0 && currentValue !== null && currentValue !== "")) {
       const found = options.find((o) => getOptionValue(o) === currentValue);
       if (found) return found[labelKey];
     }
-    if (isLoading || currentValue && !hasAttemptedHydration)
+    if (isLoading || currentValue !== void 0 && currentValue !== null && currentValue !== "" && !hasAttemptedHydration)
       return "Loading...";
-    return currentValue || "";
+    return currentValue !== void 0 && currentValue !== null && currentValue !== "" ? currentValue : "";
   };
   const handleSelect = (option) => {
     const val = getOptionValue(option);
@@ -2540,7 +2604,7 @@ var SearchApiInput = (0, import_react13.forwardRef)(
       }
     };
     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() }),
+      !isOpen && (selectedValue !== void 0 && selectedValue !== null && 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",
         {
@@ -3240,7 +3304,10 @@ function PostTable({
   hasSubComponent = () => true,
   // default to true if renderSubComponent is provided
   defaultExpanded = false,
-  submitLoading = false
+  submitLoading = false,
+  onCancel,
+  onEdit,
+  onDelete
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
@@ -3295,7 +3362,10 @@ function PostTable({
     isSavingAsync,
     submitLoading,
     fieldErrors,
-    onChange
+    onChange,
+    onCancel,
+    onEdit,
+    onDelete
   });
   (0, import_react16.useEffect)(() => {
     latestStateRef.current = {
@@ -3305,7 +3375,10 @@ function PostTable({
       isSavingAsync,
       submitLoading,
       fieldErrors,
-      onChange
+      onChange,
+      onCancel,
+      onEdit,
+      onDelete
     };
   });
   const handleSaveField = (0, import_react16.useCallback)(async () => {
@@ -3378,80 +3451,92 @@ function PostTable({
     }
   }, []);
   const handleCancelEdit = (0, import_react16.useCallback)(() => {
+    const { onCancel: onCancel2 } = latestStateRef.current;
     setEditingIndex(null);
     setEntryData({});
     setFieldErrors({});
+    if (onCancel2) onCancel2();
   }, []);
   const handleEdit = (0, import_react16.useCallback)((index2, rowOriginal) => {
+    const { onEdit: onEdit2 } = latestStateRef.current;
     setEditingIndex(index2);
     setEntryData(rowOriginal);
+    if (onEdit2) onEdit2(rowOriginal);
   }, []);
-  const handleDelete = (0, import_react16.useCallback)((index2) => {
-    const { data: data2, editingIndex: editingIndex2, onChange: onChange2 } = latestStateRef.current;
-    const newData = data2.filter((_, i) => i !== index2);
-    setData(newData);
-    const actions = {
-      focus: (columnId) => {
-        if (entryRowRef.current) {
-          const td = entryRowRef.current.querySelector(
-            `td[data-column-id="${columnId}"]`
-          );
-          if (td) {
-            const input = td.querySelector(
-              `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+  const handleDelete = (0, import_react16.useCallback)(
+    (index2) => {
+      const { data: data2, editingIndex: editingIndex2, onChange: onChange2, onDelete: onDelete2 } = latestStateRef.current;
+      const rowToDelete = data2[index2];
+      const newData = data2.filter((_, i) => i !== index2);
+      setData(newData);
+      if (onDelete2) onDelete2(rowToDelete);
+      const actions = {
+        focus: (columnId) => {
+          if (entryRowRef.current) {
+            const td = entryRowRef.current.querySelector(
+              `td[data-column-id="${columnId}"]`
             );
-            if (input) input.focus();
+            if (td) {
+              const input = td.querySelector(
+                `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+              );
+              if (input) input.focus();
+            }
           }
+        },
+        setError: (columnId, error) => {
+          setFieldErrors((prev) => ({
+            ...prev,
+            [columnId]: error
+          }));
         }
-      },
-      setError: (columnId, error) => {
-        setFieldErrors((prev) => ({
-          ...prev,
-          [columnId]: error
-        }));
+      };
+      onChange2?.({
+        entryData: data2[index2],
+        actions,
+        actionType: "delete",
+        fullData: newData
+      });
+      if (editingIndex2 === index2) {
+        handleCancelEdit();
+      } else if (editingIndex2 !== null && editingIndex2 > index2) {
+        setEditingIndex(editingIndex2 - 1);
       }
-    };
-    onChange2?.({
-      entryData: data2[index2],
-      actions,
-      actionType: "delete",
-      fullData: newData
-    });
-    if (editingIndex2 === index2) {
-      handleCancelEdit();
-    } else if (editingIndex2 !== null && editingIndex2 > index2) {
-      setEditingIndex(editingIndex2 - 1);
-    }
-  }, [handleCancelEdit]);
-  const actionColumn = (0, import_react16.useMemo)(() => ({
-    id: "actions",
-    header: "Actions",
-    cell: ({ row, table: table2 }) => {
-      const { handleEdit: handleEdit2, handleDelete: handleDelete2, submitLoading: submitLoading2, isSavingAsync: isSavingAsync2 } = table2.options.meta;
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "button",
-          {
-            onClick: () => handleEdit2(row.index, row.original),
-            disabled: submitLoading2 || isSavingAsync2,
-            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 disabled:opacity-50",
-            title: "Edit",
-            children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Edit2, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "button",
-          {
-            onClick: () => handleDelete2(row.index),
-            disabled: submitLoading2 || isSavingAsync2,
-            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 disabled:opacity-50",
-            title: "Delete",
-            children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Trash2, { size: 16 })
-          }
-        )
-      ] });
-    }
-  }), []);
+    },
+    [handleCancelEdit]
+  );
+  const actionColumn = (0, import_react16.useMemo)(
+    () => ({
+      id: "actions",
+      header: "Actions",
+      cell: ({ row, table: table2 }) => {
+        const { handleEdit: handleEdit2, handleDelete: handleDelete2, submitLoading: submitLoading2, isSavingAsync: isSavingAsync2 } = table2.options.meta;
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "button",
+            {
+              onClick: () => handleEdit2(row.index, row.original),
+              disabled: submitLoading2 || isSavingAsync2,
+              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 disabled:opacity-50",
+              title: "Edit",
+              children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Edit2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "button",
+            {
+              onClick: () => handleDelete2(row.index),
+              disabled: submitLoading2 || isSavingAsync2,
+              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 disabled:opacity-50",
+              title: "Delete",
+              children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Trash2, { size: 16 })
+            }
+          )
+        ] });
+      }
+    }),
+    []
+  );
   const columns = (0, import_react16.useMemo)(() => {
     const mappedUserColumns = userColumns.map((col) => ({
       ...col,
@@ -3610,7 +3695,13 @@ function PostTable({
                               disabled: isSavingAsync || submitLoading,
                               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 || submitLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { size: 16, strokeWidth: 2.5 })
+                              children: isSavingAsync || submitLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                import_lucide_react11.Loader2,
+                                {
+                                  size: 16,
+                                  className: "animate-spin"
+                                }
+                              ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { size: 16, strokeWidth: 2.5 })
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3638,7 +3729,13 @@ function PostTable({
                             },
                             title: "Add Row",
                             children: [
-                              isSavingAsync || submitLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Plus, { size: 14, strokeWidth: 2.5 }),
+                              isSavingAsync || submitLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                import_lucide_react11.Loader2,
+                                {
+                                  size: 14,
+                                  className: "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 || submitLoading ? "Adding..." : "Add" })
                             ]
                           }

package/dist/index.mjs

@@ -1079,6 +1079,14 @@ var Input = forwardRef(
     const [showPassword, setShowPassword] = useState7(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
+    useEffect5(() => {
+      if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, props.value);
+        }
+      }
+    }, [props.value, name, form]);
     let message = error;
     if (form && name) {
       const {
@@ -1161,39 +1169,62 @@ var Input = forwardRef(
         {
           control: form.control,
           name,
-          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
-            {
-              ref: fieldRef,
-              onBlur: () => {
-                onBlur2();
-              },
-              value: value ? String(value).split(".").map(
-                (part, index) => index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-              ).join(".") : "",
-              onChange: (e) => {
-                const rawValue = e.target.value.replace(/,/g, "");
-                if (!/^\d*\.?\d*$/.test(rawValue)) return;
-                if (rawValue === "") {
-                  onChange("");
-                } else {
-                  const numValue = Number(rawValue);
-                  if (!isNaN(numValue) && String(numValue) === rawValue) {
-                    onChange(numValue);
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => {
+            const hasValue = value !== void 0 && value !== null && value !== "";
+            const hasPropsValue = props.value !== void 0 && props.value !== null && props.value !== "";
+            const displayValue = hasValue ? value : hasPropsValue ? props.value : "";
+            return renderInput(
+              {
+                ref: fieldRef,
+                onBlur: () => {
+                  onBlur2();
+                },
+                value: displayValue !== "" ? String(displayValue).split(".").map(
+                  (part, index) => index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+                ).join(".") : "",
+                onChange: (e) => {
+                  const rawValue = e.target.value.replace(/,/g, "");
+                  if (!/^\d*\.?\d*$/.test(rawValue)) return;
+                  if (rawValue === "") {
+                    onChange("");
+                    props.onChange?.("");
                   } else {
-                    onChange(rawValue);
+                    const numValue = Number(rawValue);
+                    if (!isNaN(numValue) && String(numValue) === rawValue) {
+                      onChange(numValue);
+                      props.onChange?.(numValue);
+                    } else {
+                      onChange(rawValue);
+                      props.onChange?.(rawValue);
+                    }
                   }
                 }
-                props.onChange?.(e);
-              }
-            },
-            "text"
-          )
+              },
+              "text"
+            );
+          }
         }
       );
     }
-    let inputPropsObj = form && name ? form.register(name, type === "number" ? { valueAsNumber: true } : {}) : {};
+    let inputPropsObj = {};
+    const originalOnChange = props.onChange;
+    if (form && name) {
+      const registeredProps = form.register(
+        name,
+        type === "number" ? { valueAsNumber: true } : {}
+      );
+      inputPropsObj = {
+        ...registeredProps,
+        onChange: (e) => {
+          registeredProps.onChange(e);
+          const rawValue = e.target.value.replace(/,/g, "");
+          originalOnChange?.(
+            type === "number" ? rawValue === "" ? "" : Number(rawValue) : e.target.value
+          );
+        }
+      };
+    }
     if (type === "number" && (!form || !name)) {
-      const originalOnChange = props.onChange;
       inputPropsObj = {
         ...inputPropsObj,
         value: props.value !== void 0 && props.value !== null ? String(props.value).split(".").map(
@@ -1203,20 +1234,20 @@ var Input = forwardRef(
           const rawValue = e.target.value.replace(/,/g, "");
           if (!/^\d*\.?\d*$/.test(rawValue)) return;
           if (originalOnChange) {
-            const fakeEvent = {
-              ...e,
-              target: {
-                ...e.target,
-                value: rawValue,
-                valueAsNumber: rawValue === "" ? NaN : Number(rawValue)
-              }
-            };
-            originalOnChange(fakeEvent);
+            originalOnChange(rawValue === "" ? "" : Number(rawValue));
           }
         }
       };
       return renderInput(inputPropsObj, "text");
     }
+    if (!form || !name) {
+      inputPropsObj = {
+        ...inputPropsObj,
+        onChange: (e) => {
+          originalOnChange?.(e.target.value);
+        }
+      };
+    }
     return renderInput(inputPropsObj, type === "number" ? "text" : type);
   }
 );
@@ -1343,6 +1374,14 @@ var useSelectContext = () => {
 };
 var Select = forwardRef3((props, ref) => {
   const { form, name, onChange, value, children, options = [] } = props;
+  useEffect6(() => {
+    if (form && name && value !== void 0 && value !== null && value !== "") {
+      const currentFormValue = form.getValues(name);
+      if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+        form.setValue(name, value);
+      }
+    }
+  }, [value, name, form]);
   if (form && name) {
     return /* @__PURE__ */ jsx19(
       Controller3,
@@ -1735,7 +1774,7 @@ var SelectItem = forwardRef3(
 SelectItem.displayName = "SelectItem";
 
 // src/components/Fields/textArea.tsx
-import { forwardRef as forwardRef4, useState as useState10 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect7, useState as useState10 } from "react";
 import {
   Controller as Controller4
 } from "react-hook-form";
@@ -1799,30 +1838,47 @@ var Textarea = forwardRef4(
       ) }),
       message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
+    useEffect7(() => {
+      if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, props.value);
+        }
+      }
+    }, [props.value, name, form]);
     if (form && name) {
       return /* @__PURE__ */ jsx20(
         Controller4,
         {
           control: form.control,
           name,
-          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
-            {
-              value: value || "",
-              // Ensure controlled input doesn't warn about uncontrolled
-              onChange: (e) => {
-                onChange(e);
-                props.onChange?.(e);
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => {
+            const displayValue = value !== void 0 && value !== null && value !== "" ? value : props.value;
+            return renderInput(
+              {
+                value: displayValue || "",
+                onChange: (e) => {
+                  onChange(e);
+                  props.onChange?.(e);
+                },
+                onBlur: () => {
+                  onBlur2();
+                }
               },
-              onBlur: () => {
-                onBlur2();
-              }
-            },
-            fieldRef
-          )
+              fieldRef
+            );
+          }
         }
       );
     }
-    return renderInput({}, ref);
+    return renderInput(
+      {
+        onChange: (e) => {
+          props.onChange?.(e);
+        }
+      },
+      ref
+    );
   }
 );
 
@@ -1832,7 +1888,7 @@ import {
   useContext as useContext4,
   useState as useState12,
   useRef as useRef4,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   forwardRef as forwardRef5
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -2021,6 +2077,14 @@ var useSearchApiContext = () => {
 var SearchApi = forwardRef5(
   (props, _) => {
     const { form, name, onChange, onSelect, onClear, value, children, ...restProps } = props;
+    useEffect8(() => {
+      if (form && name && value !== void 0 && value !== null && value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, value);
+        }
+      }
+    }, [value, name, form]);
     if (form && name) {
       return /* @__PURE__ */ jsx21(
         Controller5,
@@ -2135,7 +2199,7 @@ var SearchApiRoot = ({
       setOptions([]);
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     const timer = setTimeout(() => {
       if (isOpen) {
         fetchOptions(searchTerm);
@@ -2143,18 +2207,18 @@ var SearchApiRoot = ({
     }, 300);
     return () => clearTimeout(timer);
   }, [searchTerm, api, isOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isOpen && options.length === 0) {
       fetchOptions("");
     }
   }, [isOpen]);
-  useEffect7(() => {
-    if (currentValue && !selectedObject) {
+  useEffect8(() => {
+    if (currentValue !== void 0 && currentValue !== null && currentValue !== "" && !selectedObject) {
       setHasAttemptedHydration(false);
       fetchOptions(currentValue).finally(() => {
         setHasAttemptedHydration(true);
       });
-    } else if (!currentValue) {
+    } else if (currentValue === void 0 || currentValue === null || currentValue === "") {
       setHasAttemptedHydration(true);
       if (selectedObject) setSelectedObject(void 0);
     }
@@ -2165,8 +2229,8 @@ var SearchApiRoot = ({
     }
     return option[valueKey];
   };
-  useEffect7(() => {
-    if (currentValue && !selectedObject && options.length > 0) {
+  useEffect8(() => {
+    if (currentValue !== void 0 && currentValue !== null && currentValue !== "" && !selectedObject && options.length > 0) {
       const found = options.find((o) => getOptionValue(o) === currentValue);
       if (found) {
         setSelectedObject(found);
@@ -2179,7 +2243,7 @@ var SearchApiRoot = ({
       }
     }
   }, [currentValue, options, obj]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (prevApiRef.current !== api) {
       prevApiRef.current = api;
       setSearchTerm("");
@@ -2204,7 +2268,7 @@ var SearchApiRoot = ({
       fetchOptions("");
     }
   }, [api, name, obj]);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (containerRef.current && !containerRef.current.contains(target) && !(dropdownContentRef.current && dropdownContentRef.current.contains(target))) {
@@ -2219,13 +2283,13 @@ var SearchApiRoot = ({
   }, [fieldInternalProps]);
   const getDisplayValue = () => {
     if (selectedObject) return selectedObject[labelKey];
-    if (options.length > 0 && currentValue) {
+    if (options.length > 0 && (currentValue !== void 0 && currentValue !== null && currentValue !== "")) {
       const found = options.find((o) => getOptionValue(o) === currentValue);
       if (found) return found[labelKey];
     }
-    if (isLoading || currentValue && !hasAttemptedHydration)
+    if (isLoading || currentValue !== void 0 && currentValue !== null && currentValue !== "" && !hasAttemptedHydration)
       return "Loading...";
-    return currentValue || "";
+    return currentValue !== void 0 && currentValue !== null && currentValue !== "" ? currentValue : "";
   };
   const handleSelect = (option) => {
     const val = getOptionValue(option);
@@ -2480,7 +2544,7 @@ var SearchApiInput = forwardRef5(
       }
     };
     return /* @__PURE__ */ jsxs15(Fragment4, { children: [
-      !isOpen && selectedValue && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+      !isOpen && (selectedValue !== void 0 && selectedValue !== null && selectedValue !== "") && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
       /* @__PURE__ */ jsx21(
         "input",
         {
@@ -2554,7 +2618,7 @@ var SearchApiContent = forwardRef5(
         setDropdownStyle(newStyle);
       }
     };
-    useEffect7(() => {
+    useEffect8(() => {
       if (isOpen) {
         updateDropdownPosition();
         window.addEventListener("scroll", updateDropdownPosition, true);
@@ -2774,7 +2838,7 @@ var Fields = {
 var Fields_default = Fields;
 
 // src/components/tables/DataTable.tsx
-import React8, { useState as useState14, useMemo as useMemo3, useEffect as useEffect8 } from "react";
+import React8, { useState as useState14, useMemo as useMemo3, useEffect as useEffect9 } from "react";
 import {
   useReactTable,
   getCoreRowModel,
@@ -2829,7 +2893,7 @@ function DataTable({
     pageIndex: 0,
     pageSize: pageRows || 10
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (pageRows) {
       setPagination((prev) => ({ ...prev, pageSize: pageRows }));
     }
@@ -2895,7 +2959,7 @@ function DataTable({
     },
     manualPagination: false
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (onChange) {
       onChange({
         pagination: {
@@ -3093,7 +3157,13 @@ function DataTable({
 }
 
 // src/components/tables/PostTable.tsx
-import React9, { useState as useState15, useMemo as useMemo4, useEffect as useEffect9, useRef as useRef5, useCallback as useCallback2 } from "react";
+import React9, {
+  useState as useState15,
+  useMemo as useMemo4,
+  useEffect as useEffect10,
+  useRef as useRef5,
+  useCallback as useCallback2
+} from "react";
 import {
   useReactTable as useReactTable2,
   getCoreRowModel as getCoreRowModel2,
@@ -3102,7 +3172,15 @@ import {
   getExpandedRowModel as getExpandedRowModel2,
   flexRender as flexRender2
 } from "@tanstack/react-table";
-import { Plus, Edit2, Trash2, Check as Check4, X as X3, ChevronDown as ChevronDown5, Loader2 as Loader23 } from "lucide-react";
+import {
+  Plus,
+  Edit2,
+  Trash2,
+  Check as Check4,
+  X as X3,
+  ChevronDown as ChevronDown5,
+  Loader2 as Loader23
+} from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var TableCell = React9.memo(
   ({
@@ -3197,7 +3275,10 @@ function PostTable({
   hasSubComponent = () => true,
   // default to true if renderSubComponent is provided
   defaultExpanded = false,
-  submitLoading = false
+  submitLoading = false,
+  onCancel,
+  onEdit,
+  onDelete
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
@@ -3233,10 +3314,10 @@ function PostTable({
       }
     }, 50);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     focusAndScrollEntryRow();
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (controlledData) {
       setData(controlledData);
     }
@@ -3252,9 +3333,12 @@ function PostTable({
     isSavingAsync,
     submitLoading,
     fieldErrors,
-    onChange
+    onChange,
+    onCancel,
+    onEdit,
+    onDelete
   });
-  useEffect9(() => {
+  useEffect10(() => {
     latestStateRef.current = {
       data,
       entryData,
@@ -3262,7 +3346,10 @@ function PostTable({
       isSavingAsync,
       submitLoading,
       fieldErrors,
-      onChange
+      onChange,
+      onCancel,
+      onEdit,
+      onDelete
     };
   });
   const handleSaveField = useCallback2(async () => {
@@ -3335,80 +3422,92 @@ function PostTable({
     }
   }, []);
   const handleCancelEdit = useCallback2(() => {
+    const { onCancel: onCancel2 } = latestStateRef.current;
     setEditingIndex(null);
     setEntryData({});
     setFieldErrors({});
+    if (onCancel2) onCancel2();
   }, []);
   const handleEdit = useCallback2((index2, rowOriginal) => {
+    const { onEdit: onEdit2 } = latestStateRef.current;
     setEditingIndex(index2);
     setEntryData(rowOriginal);
+    if (onEdit2) onEdit2(rowOriginal);
   }, []);
-  const handleDelete = useCallback2((index2) => {
-    const { data: data2, editingIndex: editingIndex2, onChange: onChange2 } = latestStateRef.current;
-    const newData = data2.filter((_, i) => i !== index2);
-    setData(newData);
-    const actions = {
-      focus: (columnId) => {
-        if (entryRowRef.current) {
-          const td = entryRowRef.current.querySelector(
-            `td[data-column-id="${columnId}"]`
-          );
-          if (td) {
-            const input = td.querySelector(
-              `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+  const handleDelete = useCallback2(
+    (index2) => {
+      const { data: data2, editingIndex: editingIndex2, onChange: onChange2, onDelete: onDelete2 } = latestStateRef.current;
+      const rowToDelete = data2[index2];
+      const newData = data2.filter((_, i) => i !== index2);
+      setData(newData);
+      if (onDelete2) onDelete2(rowToDelete);
+      const actions = {
+        focus: (columnId) => {
+          if (entryRowRef.current) {
+            const td = entryRowRef.current.querySelector(
+              `td[data-column-id="${columnId}"]`
             );
-            if (input) input.focus();
+            if (td) {
+              const input = td.querySelector(
+                `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+              );
+              if (input) input.focus();
+            }
           }
+        },
+        setError: (columnId, error) => {
+          setFieldErrors((prev) => ({
+            ...prev,
+            [columnId]: error
+          }));
         }
-      },
-      setError: (columnId, error) => {
-        setFieldErrors((prev) => ({
-          ...prev,
-          [columnId]: error
-        }));
+      };
+      onChange2?.({
+        entryData: data2[index2],
+        actions,
+        actionType: "delete",
+        fullData: newData
+      });
+      if (editingIndex2 === index2) {
+        handleCancelEdit();
+      } else if (editingIndex2 !== null && editingIndex2 > index2) {
+        setEditingIndex(editingIndex2 - 1);
       }
-    };
-    onChange2?.({
-      entryData: data2[index2],
-      actions,
-      actionType: "delete",
-      fullData: newData
-    });
-    if (editingIndex2 === index2) {
-      handleCancelEdit();
-    } else if (editingIndex2 !== null && editingIndex2 > index2) {
-      setEditingIndex(editingIndex2 - 1);
-    }
-  }, [handleCancelEdit]);
-  const actionColumn = useMemo4(() => ({
-    id: "actions",
-    header: "Actions",
-    cell: ({ row, table: table2 }) => {
-      const { handleEdit: handleEdit2, handleDelete: handleDelete2, submitLoading: submitLoading2, isSavingAsync: isSavingAsync2 } = table2.options.meta;
-      return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx24(
-          "button",
-          {
-            onClick: () => handleEdit2(row.index, row.original),
-            disabled: submitLoading2 || isSavingAsync2,
-            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 disabled:opacity-50",
-            title: "Edit",
-            children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ jsx24(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Edit2, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ jsx24(
-          "button",
-          {
-            onClick: () => handleDelete2(row.index),
-            disabled: submitLoading2 || isSavingAsync2,
-            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 disabled:opacity-50",
-            title: "Delete",
-            children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ jsx24(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Trash2, { size: 16 })
-          }
-        )
-      ] });
-    }
-  }), []);
+    },
+    [handleCancelEdit]
+  );
+  const actionColumn = useMemo4(
+    () => ({
+      id: "actions",
+      header: "Actions",
+      cell: ({ row, table: table2 }) => {
+        const { handleEdit: handleEdit2, handleDelete: handleDelete2, submitLoading: submitLoading2, isSavingAsync: isSavingAsync2 } = table2.options.meta;
+        return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx24(
+            "button",
+            {
+              onClick: () => handleEdit2(row.index, row.original),
+              disabled: submitLoading2 || isSavingAsync2,
+              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 disabled:opacity-50",
+              title: "Edit",
+              children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ jsx24(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Edit2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx24(
+            "button",
+            {
+              onClick: () => handleDelete2(row.index),
+              disabled: submitLoading2 || isSavingAsync2,
+              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 disabled:opacity-50",
+              title: "Delete",
+              children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ jsx24(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Trash2, { size: 16 })
+            }
+          )
+        ] });
+      }
+    }),
+    []
+  );
   const columns = useMemo4(() => {
     const mappedUserColumns = userColumns.map((col) => ({
       ...col,
@@ -3567,7 +3666,13 @@ function PostTable({
                               disabled: isSavingAsync || submitLoading,
                               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 || submitLoading ? /* @__PURE__ */ jsx24(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Check4, { size: 16, strokeWidth: 2.5 })
+                              children: isSavingAsync || submitLoading ? /* @__PURE__ */ jsx24(
+                                Loader23,
+                                {
+                                  size: 16,
+                                  className: "animate-spin"
+                                }
+                              ) : /* @__PURE__ */ jsx24(Check4, { size: 16, strokeWidth: 2.5 })
                             }
                           ),
                           /* @__PURE__ */ jsx24(
@@ -3595,7 +3700,13 @@ function PostTable({
                             },
                             title: "Add Row",
                             children: [
-                              isSavingAsync || submitLoading ? /* @__PURE__ */ jsx24(Loader23, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Plus, { size: 14, strokeWidth: 2.5 }),
+                              isSavingAsync || submitLoading ? /* @__PURE__ */ jsx24(
+                                Loader23,
+                                {
+                                  size: 14,
+                                  className: "animate-spin"
+                                }
+                              ) : /* @__PURE__ */ jsx24(Plus, { size: 14, strokeWidth: 2.5 }),
                               /* @__PURE__ */ jsx24("span", { children: isSavingAsync || submitLoading ? "Adding..." : "Add" })
                             ]
                           }
@@ -3937,7 +4048,7 @@ var Branding = ({
 };
 
 // src/hooks/Fetches/useA4DataView.tsx
-import { useEffect as useEffect10, useRef as useRef6, useState as useState16 } from "react";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState16 } from "react";
 import { useReactToPrint } from "react-to-print";
 import { RefreshCw, Printer, AlertCircle, FileX } from "lucide-react";
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -3952,7 +4063,7 @@ var useA4StatementView = ({
   const reactToPrintFn = useReactToPrint({
     contentRef
   });
-  useEffect10(() => {
+  useEffect11(() => {
     if (url) {
       get({ url, v, params, delay });
     }
@@ -4029,7 +4140,7 @@ var useA4StatementView = ({
         renderFooter: c.renderFooter ? c.renderFooter.toString() : ""
       }))
     });
-    useEffect10(() => {
+    useEffect11(() => {
       if (filteredDisplayData && filteredDisplayData.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -4040,7 +4151,7 @@ var useA4StatementView = ({
         );
       }
     }, [depsString]);
-    useEffect10(() => {
+    useEffect11(() => {
       if (!isMeasuring || filteredDisplayData.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4258,7 +4369,7 @@ var A4DataView = (props) => {
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useTransaction.tsx
-import { useEffect as useEffect11, useState as useState17 } from "react";
+import { useEffect as useEffect12, useState as useState17 } from "react";
 import { AlertCircle as AlertCircle2, FileX as FileX2, Plus as Plus2, RefreshCw as RefreshCw2 } from "lucide-react";
 import moment from "moment";
 import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -4285,7 +4396,7 @@ var useTransaction = ({
       delay
     });
   };
-  useEffect11(() => {
+  useEffect12(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay, date]);
   const TransactionViewComponent = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "warqadui",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -18,7 +18,8 @@
   "scripts": {
     "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --injectStyle",
     "dev": "tsup src/index.ts src/styles.css --format esm,cjs --dts --watch --injectStyle",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "release": "npm run build && npm version patch && npm publish"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.12.0",