shadcn-zod-formkit 3.5.4 → 3.6.0

package/dist/index.cjs

@@ -9229,7 +9229,7 @@ var require_leaflet_src = __commonJS({
         // Amount of pixels to pan when pressing an arrow key.
         keyboardPanDelta: 80
       });
-      var Keyboard2 = Handler.extend({
+      var Keyboard3 = Handler.extend({
         keyCodes: {
           left: [37],
           right: [39],
@@ -9347,7 +9347,7 @@ var require_leaflet_src = __commonJS({
           stop(e);
         }
       });
-      Map2.addInitHook("addHandler", "keyboard", Keyboard2);
+      Map2.addInitHook("addHandler", "keyboard", Keyboard3);
       Map2.mergeOptions({
         // @section Mouse wheel options
         // @option scrollWheelZoom: Boolean|String = true
@@ -9565,7 +9565,7 @@ var require_leaflet_src = __commonJS({
       Map2.BoxZoom = BoxZoom;
       Map2.DoubleClickZoom = DoubleClickZoom;
       Map2.Drag = Drag;
-      Map2.Keyboard = Keyboard2;
+      Map2.Keyboard = Keyboard3;
       Map2.ScrollWheelZoom = ScrollWheelZoom;
       Map2.TapHold = TapHold;
       Map2.TouchZoom = TouchZoom;
@@ -13161,64 +13161,28 @@ var CurrencyInput = class extends BaseInput {
   }
 };
 var FieldCurrency = ({ form, input, isSubmitting }) => {
-  const groupConfig = input.inputGroupConfig;
-  input?.infoTooltip;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
+  const setCurrentInputField = useKeyboardStore((state) => state.setCurrentInputField);
+  const withKeyboard = input.withKeyboard;
+  const autoValidate = input.inputGroupConfig?.autoValidIcons;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
-  const [isValid, setIsValid] = React3.useState(() => {
-    const value = form.getValues(input.name);
-    const fieldState = form.getFieldState(input.name);
-    return !fieldState.error && value !== void 0 && value !== "";
-  });
-  const defaultCurrencyFormat = {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  };
-  const mask = input?.mask;
-  const currencyFormat = input?.currencyFormat ?? defaultCurrencyFormat;
-  const [rawValue, setRawValue] = React3.useState(form.getValues(input.name) ?? "");
   const formatter = React3.useMemo(() => {
-    return new Intl.NumberFormat("es-DO", currencyFormat);
-  }, [currencyFormat]);
-  const parseValue = (formatted) => {
-    const numeric = parseFloat(formatted.replace(/[^0-9.-]/g, ""));
+    return new Intl.NumberFormat("es-DO", {
+      style: "currency",
+      currency: input?.currencyFormat?.currency ?? "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, [input?.currencyFormat]);
+  const parseValue = (val) => {
+    const numeric = parseFloat(val.replace(/[^0-9.-]/g, ""));
     return isNaN(numeric) ? null : numeric;
   };
-  const formatValue = (value) => {
-    if (!value) return "";
-    const numeric = parseFloat(value.replace(/[^0-9.-]/g, ""));
-    if (isNaN(numeric)) return "";
-    if (typeof mask === "string") {
-      return mask.replace(/0+(?:[.,]0+)?/, formatter.format(numeric).replace(/[^\d.,]/g, ""));
-    }
-    if (mask instanceof RegExp) {
-      const valid = mask.test(value);
-      return valid ? value : rawValue;
-    }
-    return formatter.format(numeric);
-  };
-  const handleKeyDown = (e) => {
-    const allowedKeys = [
-      "Backspace",
-      "Delete",
-      "Tab",
-      "ArrowLeft",
-      "ArrowRight",
-      "Home",
-      "End"
-    ];
-    if (allowedKeys.includes(e.key)) return;
-    if (!/^[0-9.]$/.test(e.key)) {
-      e.preventDefault();
-      return;
-    }
-    if (e.key === "." && rawValue.includes(".")) {
-      e.preventDefault();
-    }
+  const formatValue = (val) => {
+    if (val === null || val === void 0) return "";
+    return formatter.format(val);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
@@ -13226,44 +13190,55 @@ var FieldCurrency = ({ form, input, isSubmitting }) => {
       control: form.control,
       name: input.name,
       render: ({ field, fieldState }) => {
-        const validNow = !fieldState.error && field.value !== void 0 && field.value !== "";
-        if (validNow !== isValid) setIsValid(validNow);
-        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+        const [displayValue, setDisplayValue] = React3.useState(() => {
+          return field.value ? formatValue(field.value) : "";
+        });
+        const isValid = !fieldState.error && field.value !== void 0 && field.value !== "";
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: `${input.withLateralLabel ? "flex items-center gap-2" : ""} ${input.className}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: `${input.withLateralLabel ? "w-32 text-right" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: "$" }),
-              input.inputGroupConfig?.textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: input.inputGroupConfig.textLeft })
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: "$" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               InputGroupInput,
               {
-                ...field,
+                ref: field.ref,
+                name: field.name,
                 disabled: input.disabled || isSubmitting,
-                placeholder: input.placeHolder ?? "0.00",
+                placeholder: "0.00",
                 inputMode: "decimal",
-                value: rawValue,
-                onKeyDown: handleKeyDown,
+                value: displayValue,
+                onFocus: (e) => {
+                  const raw = field.value ? String(field.value) : "";
+                  setDisplayValue(raw);
+                  setCurrentInputField({ input, field });
+                },
                 onChange: (e) => {
-                  const newVal = e.target.value;
-                  setRawValue(newVal);
-                  const parsed = parseValue(newVal);
-                  if (parsed !== null) field.onChange(parsed);
+                  const val = e.target.value;
+                  setDisplayValue(val);
+                  const parsed = parseValue(val);
+                  field.onChange(parsed);
                   handleOnChage(parsed, input, field);
                 },
-                onBlur: (e) => {
-                  const formatted = formatValue(e.target.value);
-                  setRawValue(formatted);
-                },
-                onFocus: (e) => {
-                  const numeric = e.target.value.replace(/[^0-9.-]/g, "");
-                  setRawValue(numeric);
+                onBlur: () => {
+                  const formatted = formatValue(field.value);
+                  setDisplayValue(formatted);
                 }
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: currencyFormat.currency }),
-              input.inputGroupConfig?.textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: input.inputGroupConfig.textRight }),
+              /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: input?.currencyFormat?.currency ?? "USD" }),
+              withKeyboard && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-2xl",
+                  onClick: () => {
+                    setIsOpen();
+                    setCurrentInputField({ input, field });
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {})
+                }
+              ),
               autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -13603,9 +13578,9 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
       name: input.name,
       render: ({ field }) => {
         setIsValid(isValidField(input, form));
-        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { className: "shadow-lg", children: CustomInputGroup({
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: `${input.withLateralLabel ? "flex items-center gap-2 flex-row" : ""} ${input.className}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: `${input.withLateralLabel ? "text-right" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { className: `shadow-lg ${input.withLateralLabel ? " text-right" : ""}`, children: CustomInputGroup({
             input,
             isSubmitting,
             field,
@@ -13646,7 +13621,7 @@ var CustomInputGroup = ({
   const [showPassword, setShowPassword] = React3.useState(false);
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
-  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
+  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField || withKeyboard;
   const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
   const setCurrentInputField = useKeyboardStore((state) => state.setCurrentInputField);
   const applyMask = (value2, mask) => {
@@ -13728,6 +13703,7 @@ var CustomInputGroup = ({
             onChange(e);
           }
           let value2 = e.target.value;
+          console.log("Valor raw del input:", value2);
           if (isNumberField) {
             const numConfig = input.inputNumberConfig;
             const cleanValue = value2.replace(/[^\d.-]/g, "");
@@ -14887,12 +14863,12 @@ function FieldTextArea({ form, input, isSubmitting }) {
     {
       control: form.control,
       name: input.name,
-      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "shadow-lg", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: `shadow-lg ${input.withLateralLabel ? "flex items-center gap-2" : ""} ${input.className}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: `${input.withLateralLabel ? "w-32 text-right" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
         /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
           Textarea,
           {
-            className: "min-w-[260px] bg-white",
+            className: "min-w-[260px]",
             placeholder: input.placeHolder,
             ...field,
             onChange: (event) => {
@@ -16620,7 +16596,8 @@ var FormFieldsGrid = ({
   isPending,
   readOnly,
   className = "",
-  gap = "gap-2"
+  gap = "gap-2",
+  py = "py-1"
 }) => {
   const values = form.watch();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map((inputOrGroup, idx) => {
@@ -16632,7 +16609,7 @@ var FormFieldsGrid = ({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "w-full flex flex-row items-start gap-4 py-3",
+          className: `w-full flex flex-row items-start gap-4 ${py}`,
           children: visibleFields.map((field, subIdx) => {
             const fieldCopy2 = {
               ...field,
@@ -16933,7 +16910,8 @@ var DynamicForm = ({
         {
           fields,
           form,
-          readOnly
+          readOnly,
+          gap: "gap-1"
         }
       ),
       children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
@@ -16985,7 +16963,7 @@ var DynamicForm = ({
           formSubTitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formSubTitle })
         ] })
       ] }),
-      childrenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
+      childrenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-1 w-full h-full", children: childrenHeader })
     ] }),
     withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsxRuntime.jsx(
       FormErrorsAlert,
@@ -17021,7 +16999,7 @@ var FormWrapper = ({ form, handleSubmit, children, readOnly, debug, isWrapInWiza
     "form",
     {
       onSubmit: form.handleSubmit(handleSubmit),
-      className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
+      className: `flex flex-col gap-1 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
       children: [
         children,
         debug && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-4 p-3 bg-muted text-xs rounded", children: JSON.stringify(allValues, null, 2) })