shadcn-zod-formkit 1.0.4 → 1.0.5

package/README.md

@@ -4,7 +4,7 @@
 
 
 
-📦 A React library for creating **dynamic forms** with **Zod validations**, supporting multiple input types: text, number, email, switch, color, date, select, file, and OTP.
+📦 A React library for creating **dynamic forms** with **Zod validations**, supporting multiple input types: text, number, email, switch, color, date, select, file, OTP and others.
 
 ---
 
@@ -26,7 +26,7 @@ yarn add shadcn-zod-formkit
  You need installa shadcn basic components
  ```typescript 
  # Add Shadcn Basics
- npx shadcn@latest add  accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group radio-group slider
+ npx shadcn@latest add  accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group radio-group slider button-group
  ```
 
 
@@ -58,6 +58,7 @@ export default function Home() {
 
   return (
     <DynamicForm
+      formTitle="Title Form"
       fields={mockFields}
       record={record}
       onSubmit={(data) => console.log("📤 Resultado final:", data)}
@@ -96,11 +97,16 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
   | **Switch List**          |  `InputTypes.GROUPED_SWITCH_LIST`  | 
   | **Radio Group**          |  `InputTypes.RADIO_GROUP`          | 
   | **Tags**                 |  `InputTypes.TAGS`                 | 
+  | **Input Date Time**      |  `InputTypes.DATE_TIME`            | 
+  | **Input Time**           |  `InputTypes.TIME`                 | 
+  | **Upload Multi File**    |  `InputTypes.FILE_MULTI_UPLOAD`    | 
+  | **Button Group**         |  `InputTypes.BUTTON_GROUP`         | 
+
 
 
 ## ✅ Features
   - Fully dynamic fields array support.
-  - Multiple input types (text, email, number, color, date, select, switch, file, OTP).
+  - Multiple input types (text, email, number, color, date, select, switch, file, OTP, and others).
   - Zod validation integration for robust form validation.
   - Supports default values via record prop.
   - Works seamlessly with React 18+ and TypeScript.
@@ -108,4 +114,11 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
 ## 💡 Tips
   - Use peerDependencies for React to avoid version conflicts.
   - Wrap your forms inside a "use client" component if using Next.js App Router.
-- Combine multiple FieldProps in arrays for grouped fields (like age + color).
+  - Combine multiple FieldProps in arrays for grouped fields (like age + color).
+
+## 🧠 Acknowledgements
+  React - A JavaScript library for building user interfaces.
+  Next.js - The React framework for production.
+  Tailwind CSS - A utility-first CSS framework for creating custom designs.
+  Zod - TypeScript-first schema declaration and validation.
+

package/dist/index.cjs

@@ -148,27 +148,30 @@ var CustomAlert = ({
   variant = "info"
 }) => {
   const variantClasses = {
-    info: "bg-blue-500/25",
-    warning: "bg-yellow-500/25",
-    error: "bg-red-500/25",
-    success: "bg-green-500/25"
+    info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+    warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+    error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+    success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
   };
   const variantIcons = {
-    info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { size: 32, className: "text-blue-400" }),
-    warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { size: 32, className: "text-yellow-400" }),
-    error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { size: 32, className: "text-red-400" }),
-    success: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.InfoCircledIcon, { className: "w-8 h-8 text-green-400" })
+    info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { size: 32, className: "text-blue-500 dark:text-blue-300" }),
+    warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { size: 32, className: "text-yellow-500 dark:text-yellow-300" }),
+    error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { size: 32, className: "text-red-500 dark:text-red-300" }),
+    success: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.InfoCircledIcon, { className: "w-8 h-8 text-green-500 dark:text-green-300" })
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Alert,
     {
-      className: cn(`mb-4 flex items-start gap-3 bg-red-500 border ${variantClasses[variant]}`, className),
-      style: { background: "#fcdbdbb8" },
+      className: cn(
+        "mb-4 flex items-start gap-3 border-l-4 p-4 rounded-lg",
+        variantClasses[variant],
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col shrink-0 w-1/3", children: variantIcons[variant] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col shrink-0", children: variantIcons[variant] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { className: "font-semibold text-xl", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { className: "text-sm text-muted-foreground", children: description })
+          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { className: "font-semibold text-lg", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { className: "text-sm text-muted-foreground dark:text-gray-300", children: description })
         ] })
       ]
     }
@@ -259,9 +262,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["TIME"] = "time";
   InputTypes2["FILE_MULTI_UPLOAD"] = "file_multi_upload";
   InputTypes2["SLIDER"] = "slider";
+  InputTypes2["BUTTON_GROUP"] = "button_group";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "button_group" /* BUTTON_GROUP */,
   "slider" /* SLIDER */,
   "file_multi_upload" /* FILE_MULTI_UPLOAD */,
   "time" /* TIME */,
@@ -1748,6 +1753,65 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
     input.name
   );
 };
+var buttonGroupVariants = classVarianceAuthority.cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+var ButtonGroupInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldButtonGroup, { input, form, isSubmitting });
+  }
+};
+var FieldButtonGroup = ({ input, form, isSubmitting }) => {
+  const options = (input.listConfig?.list ?? []).filter((option) => "name" in option);
+  const handleSelect = (value) => {
+    form.setValue(input.name, value, { shouldValidate: true });
+  };
+  const selectedValue = form.watch(input.name);
+  return (
+    // <div className="flex flex-col gap-1 w-full">
+    //   <label className="font-semibold">{input.label}</label>
+    //   <div className="flex flex-wrap gap-2">
+    /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: selectedValue === option.value ? "default" : "outline",
+        onClick: () => handleSelect(option.value),
+        disabled: isSubmitting,
+        children: option.label ?? option.name
+      },
+      option.value
+    )) })
+  );
+};
 var CheckListInput = class extends BaseInput {
   render() {
     const { input, isSubmitting } = this;
@@ -3472,7 +3536,7 @@ function cleanEscapedString(input) {
 var DateInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const formField = /* @__PURE__ */ jsxRuntime.jsx(
       FormField,
       {
         control: form.control,
@@ -3524,6 +3588,7 @@ var DateInput = class extends BaseInput {
       },
       input.name
     );
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
   }
 };
 var DateTimeInput = class extends BaseInput {
@@ -3680,7 +3745,7 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
     form.setValue(input.name, updatedFiles);
     setDragOver(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
       control: form.control,
@@ -3746,6 +3811,7 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
     },
     input.name
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 var TextInputGroup = class extends BaseInput {
   render() {
@@ -3768,7 +3834,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     const fieldState = form.getFieldState(input.name);
     return !fieldState.error && value !== void 0 && value !== "";
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
       control: form.control,
@@ -3805,6 +3871,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     },
     input.name
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 var NumberInput = class extends BaseInput {
   render() {
@@ -3902,8 +3969,7 @@ var FieldRadioGroup = ({ input, form, isSubmitting }) => {
     },
     input.name
   );
-  if (!input.wrapInCard) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 space-y-3", children: formField });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 var SelectInput = class extends BaseInput {
   render() {
@@ -4039,8 +4105,7 @@ var FieldSimpleCheckList = ({ input, value, onChange, isSubmitting }) => {
     )) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
   ] });
-  if (!input.wrapInCard) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 space-y-3", children: formField });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 function Slider({
   className,
@@ -4202,8 +4267,7 @@ var FieldTags = ({ input, form, isSubmitting }) => {
     },
     input.name
   );
-  if (!input.wrapInCard) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 space-y-3", children: formField });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 var SPLITTER_REGEX = /[\n#?=&\t,./-]+/;
 var FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g;
@@ -4601,6 +4665,7 @@ var inputMap = {
   ["date_time" /* DATE_TIME */]: DateTimeInput,
   ["time" /* TIME */]: TimeInput,
   ["file_multi_upload" /* FILE_MULTI_UPLOAD */]: FileMultiUploadInput,
+  ["button_group" /* BUTTON_GROUP */]: ButtonGroupInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -4614,13 +4679,15 @@ var inputMap = {
   // [InputTypes.IMAGE_UPLOAD]: TextInput,
   // [InputTypes.AUDIO_UPLOAD]: TextInput,
   // [InputTypes.VIDEO_UPLOAD]: TextInput,
+  // [InputTypes.CREDIT_CARD]: TextInput,
 };
 var InputFactory = class {
   static create(input, form, isSubmitting = false) {
     const inputType = input.inputType ?? "text" /* TEXT */;
     const InputClass = inputMap[inputType] ?? TextInput;
     const instance = new InputClass(input, form, isSubmitting);
-    return instance.render();
+    if (!input.wrapInCard) return instance.render();
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 space-y-3", children: instance.render() });
   }
 };
 function getDefaultValues(entity) {
@@ -4654,17 +4721,23 @@ function getDefaultValues(entity) {
   }
   return defaults;
 }
-var getDynamicSchema = (fields) => {
+var getDynamicSchema = (fields, extraValidations) => {
   const flatFields = fields.flatMap((f) => Array.isArray(f) ? f : [f]);
   const shape = {};
   flatFields.forEach((f) => {
-    shape[f.name] = f.zodTypeAny ?? z2__default.default.any();
+    shape[f.name] = f.zodType ?? z2__default.default.any();
   });
-  return z2__default.default.object(shape);
+  let schema = z2__default.default.object(shape);
+  if (extraValidations && extraValidations.length > 0) {
+    extraValidations.forEach((fn) => {
+      schema = fn(schema);
+    });
+  }
+  return schema;
 };
 var FormErrorsAlert = ({ formState, fields }) => {
   const flatFields = fields.flatMap((f) => Array.isArray(f) ? f : [f]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.entries(formState.errors).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 4 }, children: Object.entries(formState.errors).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
     CustomAlert,
     {
       title: "Revisar los siguientes criterios",
@@ -4686,17 +4759,20 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return findedField?.label ?? fieldErrorKey;
 };
 var DynamicForm = ({
+  formTitle,
+  formSubTitle,
   fields,
   record = {},
   onSubmit,
+  extraValidations,
   withCard = false,
   withErrorsAlert = true,
   errorAlertPosition = "up",
   submitBtnClass = "",
   submitBtnLabel = "Submit"
 }) => {
-  const [isPending, startTransition2] = React8.useTransition();
-  const schema = React8.useMemo(() => getDynamicSchema(fields), [fields]);
+  const [isPending, startTransition] = React8.useTransition();
+  const schema = React8.useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
   const defaultValues = React8.useMemo(() => getDefaultValues(record), [record]);
   const form = reactHookForm.useForm({
     resolver: zod.zodResolver(schema),
@@ -4708,7 +4784,7 @@ var DynamicForm = ({
   }, []);
   const handleSubmit = (data) => {
     try {
-      startTransition2(async () => {
+      startTransition(async () => {
         const resp = { data, form };
         await new Promise((resolve) => setTimeout(resolve, 3e3));
         onSubmit?.(resp);
@@ -4717,7 +4793,11 @@ var DynamicForm = ({
       console.error("Ocurri\xF3 un error al enviar el formulario.");
     }
   };
-  const formContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  const formContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex  items-center gap-2 p-2 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }),
+      formTitle
+    ] }),
     withErrorsAlert && errorAlertPosition == "up" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields }),
     /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", children: fields.map(
@@ -4748,6 +4828,7 @@ var DynamicFormExample = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     DynamicForm,
     {
+      formTitle: "User Form",
       fields: mockFields,
       record,
       onSubmit: (data) => console.log("\u{1F4E4} Resultado final:", data)
@@ -4761,7 +4842,7 @@ var mockFields = [
     label: "Nombre de usuario",
     inputType: "text" /* TEXT */,
     required: true,
-    zodTypeAny: z2__default.default.string().min(3, "El nombre debe tener al menos 3 caracteres").max(20, "El nombre no puede tener m\xE1s de 20 caracteres")
+    zodType: z2__default.default.string().min(3, "El nombre debe tener al menos 3 caracteres").max(20, "El nombre no puede tener m\xE1s de 20 caracteres")
   },
   // 📧 Campo de correo con validación personalizada (ZodTypeAny)
   {
@@ -4769,7 +4850,7 @@ var mockFields = [
     label: "Correo electr\xF3nico",
     inputType: "text" /* TEXT */,
     required: false,
-    zodTypeAny: z2__default.default.string().email("Correo inv\xE1lido").toLowerCase().refine((val) => !val.endsWith("@spam.com"), {
+    zodType: z2__default.default.string().email("Correo inv\xE1lido").toLowerCase().refine((val) => !val.endsWith("@spam.com"), {
       message: "No se permiten correos de spam.com"
     })
   },
@@ -4780,7 +4861,7 @@ var mockFields = [
     inputType: "text" /* TEXT */,
     required: false,
     keyboardType: "password" /* PASSWORD */,
-    zodTypeAny: z2__default.default.string().min(6, "Debe tener al menos 6 caracteres").max(20, "No m\xE1s de 20 caracteres").optional()
+    zodType: z2__default.default.string().min(6, "Debe tener al menos 6 caracteres").max(20, "No m\xE1s de 20 caracteres").optional()
   },
   // 🟢 Campo tipo switch (boolean)
   {
@@ -4788,7 +4869,7 @@ var mockFields = [
     label: "Usuario activo",
     inputType: "switch" /* SWITCH */,
     required: false,
-    zodTypeAny: z2__default.default.boolean().default(true)
+    zodType: z2__default.default.boolean().default(true)
   },
   // 🎨 Color con validación personalizada
   [
@@ -4797,7 +4878,7 @@ var mockFields = [
       label: "Color favorito",
       inputType: "color" /* COLOR */,
       required: false,
-      zodTypeAny: z2__default.default.string().regex(/^#([0-9A-Fa-f]{6})$/, "Debe ser un color hexadecimal v\xE1lido")
+      zodType: z2__default.default.string().regex(/^#([0-9A-Fa-f]{6})$/, "Debe ser un color hexadecimal v\xE1lido")
     },
     // 🔢 Número con rango
     {
@@ -4805,7 +4886,7 @@ var mockFields = [
       label: "Edad",
       inputType: "number" /* NUMBER */,
       required: true,
-      zodTypeAny: z2__default.default.coerce.number().min(18, "Debe ser mayor de 18").max(99, "Debe ser menor de 99")
+      zodType: z2__default.default.coerce.number().min(18, "Debe ser mayor de 18").max(99, "Debe ser menor de 99")
     }
   ],
   // 📅 Fecha
@@ -4814,7 +4895,7 @@ var mockFields = [
     label: "Fecha de nacimiento",
     inputType: "date" /* DATE */,
     required: true,
-    zodTypeAny: z2__default.default.coerce.date().refine((d) => d < /* @__PURE__ */ new Date(), {
+    zodType: z2__default.default.coerce.date().refine((d) => d < /* @__PURE__ */ new Date(), {
       message: "La fecha no puede ser futura"
     })
   },
@@ -4833,7 +4914,7 @@ var mockFields = [
         { id: 3, name: "Lector", value: "reader" }
       ]
     },
-    zodTypeAny: z2__default.default.enum(["admin", "editor", "reader"])
+    zodType: z2__default.default.enum(["admin", "editor", "reader"])
   },
   // 🧾 Campo tipo archivo (file)
   {
@@ -4841,7 +4922,7 @@ var mockFields = [
     label: "Imagen de perfil",
     inputType: "file" /* FILE */,
     required: false,
-    zodTypeAny: z2__default.default.any().refine(
+    zodType: z2__default.default.any().refine(
       (file) => {
         if (!file) return true;
         return file.size <= 10 * 1024 * 1024 && ["image/jpeg", "image/png"].includes(file.type);
@@ -4855,7 +4936,7 @@ var mockFields = [
     label: "C\xF3digo OTP",
     inputType: "otp" /* OTP */,
     required: true,
-    zodTypeAny: z2__default.default.string().min(4, "Debe tener al menos 4 d\xEDgitos").max(6, "Debe tener m\xE1ximo 6 d\xEDgitos")
+    zodType: z2__default.default.string().min(4, "Debe tener al menos 4 d\xEDgitos").max(6, "Debe tener m\xE1ximo 6 d\xEDgitos")
   }
 ];
 var InputList = ({ handleAddInput, inputsTypes }) => {