shadcn-zod-formkit 1.1.0 → 1.3.0

package/dist/index.cjs

@@ -3835,6 +3835,9 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     const fieldState = form.getFieldState(input.name);
     return !fieldState.error && value !== void 0 && value !== "";
   });
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const isPasswordField = input.keyboardType === "password";
+  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
   const formField = /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -3856,16 +3859,25 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                 placeholder: input.placeHolder,
                 disabled: input.disabled || isSubmitting,
                 ...field,
-                type: input.keyboardType
+                type: isPasswordField && !showPassword ? "password" : "text"
               }
             ),
-            (iconsRight.length > 0 || textRight || autoValidate || infoTooltip) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
+            showInputGroupAddons && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
               infoTooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 20 }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: infoTooltip }) })
               ] }),
               textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
               iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
+              isPasswordField && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "p-1",
+                  children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
+                }
+              ),
               autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -4382,20 +4394,22 @@ 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";
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
       control: form.control,
       name: input.name,
       render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+        !hidden && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
         /* @__PURE__ */ jsxRuntime.jsx(FormControl, { className: "shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
             className: "min-w-[180px]",
             placeholder: input.placeHolder,
             ...field,
-            type: input.keyboardType,
+            type,
             disabled: input.disabled || isSubmitting
           }
         ) }),