warqadui 0.0.31 → 0.0.32

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>;

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>;

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",
         {
@@ -3386,72 +3450,78 @@ function PostTable({
     setEditingIndex(index2);
     setEntryData(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 } = 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 (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 +3680,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 +3714,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(
   ({
@@ -3233,10 +3311,10 @@ function PostTable({
       }
     }, 50);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     focusAndScrollEntryRow();
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (controlledData) {
       setData(controlledData);
     }
@@ -3254,7 +3332,7 @@ function PostTable({
     fieldErrors,
     onChange
   });
-  useEffect9(() => {
+  useEffect10(() => {
     latestStateRef.current = {
       data,
       entryData,
@@ -3343,72 +3421,78 @@ function PostTable({
     setEditingIndex(index2);
     setEntryData(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 } = 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 (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 +3651,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 +3685,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 +4033,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 +4048,7 @@ var useA4StatementView = ({
   const reactToPrintFn = useReactToPrint({
     contentRef
   });
-  useEffect10(() => {
+  useEffect11(() => {
     if (url) {
       get({ url, v, params, delay });
     }
@@ -4029,7 +4125,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 +4136,7 @@ var useA4StatementView = ({
         );
       }
     }, [depsString]);
-    useEffect10(() => {
+    useEffect11(() => {
       if (!isMeasuring || filteredDisplayData.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4258,7 +4354,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 +4381,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.32",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",