shadcn-zod-formkit 3.0.2 → 3.2.0

package/dist/index.cjs

@@ -12763,7 +12763,8 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
             isSubmitting,
             field,
             form,
-            isValid
+            isValid,
+            autoCapitalize: input.autoCapitalize
           }) }),
           input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
           /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
@@ -12781,7 +12782,8 @@ var CustomInputGroup = ({
   form,
   isSubmitting,
   onChange,
-  isValid
+  isValid,
+  autoCapitalize = "none"
 }) => {
   const groupConfig = input.inputGroupConfig;
   const infoTooltip = input?.infoTooltip;
@@ -12797,7 +12799,64 @@ var CustomInputGroup = ({
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
   const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
-  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+  const applyMask = (value2, mask) => {
+    if (!mask) return value2;
+    if (typeof mask === "string") {
+      let result = "";
+      let valueIndex = 0;
+      for (let i = 0; i < mask.length && valueIndex < value2.length; i++) {
+        if (mask[i] === "#") {
+          result += value2[valueIndex++];
+        } else {
+          result += mask[i];
+        }
+      }
+      return result;
+    } else if (mask instanceof RegExp) {
+      const matches = value2.match(mask);
+      return matches ? matches.join("") : value2;
+    }
+    return value2;
+  };
+  const formatNumber = (value2, config) => {
+    if (!config || value2 === "") return value2;
+    let numValue = parseFloat(value2);
+    if (isNaN(numValue)) return value2;
+    if (config.min !== void 0 && numValue < config.min) return config.min.toString();
+    if (config.max !== void 0 && numValue > config.max) return config.max.toString();
+    if (!config.allowDecimals) numValue = Math.floor(numValue);
+    const options = {
+      minimumFractionDigits: config.allowDecimals ? config.decimalPlaces || 2 : 0,
+      maximumFractionDigits: config.allowDecimals ? config.decimalPlaces || 2 : 0
+    };
+    let formatted = numValue.toLocaleString("en-US", options);
+    if (config.thousandsSeparator) {
+      formatted = formatted.replace(/,/g, config.thousandsSeparator);
+    }
+    if (config.decimalSeparator && config.decimalSeparator !== ".") {
+      formatted = formatted.replace(".", config.decimalSeparator);
+    }
+    return `${config.prefix || ""}${formatted}${config.suffix || ""}`;
+  };
+  const applyTransform = (value2, transform) => {
+    if (!transform) return value2;
+    if (typeof transform === "function") {
+      return transform(value2);
+    }
+    switch (transform) {
+      case "uppercase":
+        return value2.toUpperCase();
+      case "lowercase":
+        return value2.toLowerCase();
+      case "capitalize":
+        return value2.charAt(0).toUpperCase() + value2.slice(1).toLowerCase();
+      case "trim":
+        return value2.trim();
+      default:
+        return value2;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: input.classNameGroupInput ?? "h-10", children: [
     (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
       textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textLeft }),
       iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index))
@@ -12805,6 +12864,7 @@ var CustomInputGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       InputGroupInput,
       {
+        className: input.classNameInput ?? "h-full text-xl font-semibold",
         placeholder: input.placeHolder,
         disabled: input.disabled || isSubmitting,
         onBlur: field?.onBlur,
@@ -12818,7 +12878,18 @@ var CustomInputGroup = ({
           }
           let value2 = e.target.value;
           if (isNumberField) {
-            value2 = e.target.value === "" ? "" : Number(e.target.value);
+            const numConfig = input.inputNumberConfig;
+            const cleanValue = value2.replace(/[^\d.-]/g, "");
+            const numValue = cleanValue === "" ? "" : Number(cleanValue);
+            if (numConfig?.formatOnInput) {
+              value2 = formatNumber(cleanValue, numConfig);
+            } else {
+              value2 = numValue;
+            }
+          } else {
+            let processedValue = e.target.value;
+            processedValue = applyMask(processedValue, input.mask);
+            value2 = applyTransform(processedValue, input.transform);
           }
           field?.onChange(value2);
           isValidField(input, form);
@@ -14097,6 +14168,44 @@ var TextInput = class extends BaseInput {
 var FieldText = ({ input, form, isSubmitting }) => {
   const hidden = input.hidden ?? input.inputType === "hidden" /* HIDDEN */;
   const type = hidden ? "hidden" : input.keyboardType || "text";
+  const applyMask = (value, mask) => {
+    if (!mask) return value;
+    if (typeof mask === "string") {
+      let result = "";
+      let valueIndex = 0;
+      for (let i = 0; i < mask.length && valueIndex < value.length; i++) {
+        if (mask[i] === "#") {
+          result += value[valueIndex++];
+        } else {
+          result += mask[i];
+        }
+      }
+      return result;
+    } else if (mask instanceof RegExp) {
+      const matches = value.match(mask);
+      return matches ? matches.join("") : value;
+    }
+    return value;
+  };
+  const applyTransform = (value) => {
+    input.inputGroupConfig?.transform || input.transform;
+    if (!input.inputGroupConfig?.transform) return value;
+    if (typeof input.transform === "function") {
+      return input.transform(value);
+    }
+    switch (input.transform) {
+      case "uppercase":
+        return value.toUpperCase();
+      case "lowercase":
+        return value.toLowerCase();
+      case "capitalize":
+        return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+      case "trim":
+        return value.trim();
+      default:
+        return value;
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -14108,10 +14217,17 @@ var FieldText = ({ input, form, isSubmitting }) => {
           Input,
           {
             className: "min-w-[180px]",
+            autoCapitalize: input.autoCapitalize,
             placeholder: input.placeHolder,
             ...field,
             type,
-            onChange: (e) => handleOnChage(e, input, field),
+            onChange: (e) => {
+              let processedValue = e.target.value;
+              processedValue = applyMask(processedValue, input.mask);
+              const transformedValue = applyTransform(processedValue);
+              field.onChange(transformedValue);
+              handleOnChage(e, input, field);
+            },
             disabled: input.disabled || isSubmitting
           }
         ) }),
@@ -15228,7 +15344,8 @@ var DynamicForm = ({
   debug = false,
   isWrapInWizard = false,
   totalSteps = 0,
-  currentStep = 1
+  currentStep = 1,
+  submitBtnIcon = lucideReact.Save
 }) => {
   const [isPending, startTransition] = React3.useTransition();
   const schema = React3.useMemo(() => {
@@ -15303,7 +15420,7 @@ var DynamicForm = ({
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 mr-2 animate-spin" })
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             submitBtnLabel,
-            (totalSteps == 0 || totalSteps == currentStep) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-5 w-5 mr-2" })
+            (totalSteps == 0 || totalSteps == currentStep) && submitBtnIcon && React3__namespace.default.createElement(submitBtnIcon, { className: "h-5 w-5 mr-2" })
           ] })
         }
       )