shadcn-zod-formkit 1.25.0 → 1.26.1

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Loader2, Save, Pencil, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, Trash2, ChevronsUpDown, Check, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, CircleIcon, GripVerticalIcon, ChevronUpIcon, SearchIcon, ChevronsUpDown, Check, CalendarIcon, EyeOff, Eye, Upload, Trash2, Plus, Info, GripVertical, Loader2, Save, Pencil, Search, MessageCircleWarning, CircleCheck, CircleX } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React3 from 'react';
-import React3__default, { useState, useEffect, useTransition, useMemo, useRef } from 'react';
-import { FormProvider, Controller, useFormContext, useFormState, useForm, useFieldArray } from 'react-hook-form';
+import React3__default, { useMemo, useState, useEffect, useRef, useTransition } from 'react';
+import { FormProvider, Controller, useFormContext, useFormState, useFieldArray, useForm } from 'react-hook-form';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Slot } from '@radix-ui/react-slot';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -29,7 +29,7 @@ import { Command as Command$1 } from 'cmdk';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import z2 from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -195,9 +195,17 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
   return entities;
 };
 var handleOnChage = (event, input, field) => {
-  console.log("\u{1F680} ~ handleOnChage ~ event:", event);
   if (event) field?.onChange(event);
-  input.onChange?.(event);
+  input.onChange?.(event, input.form?.getValues());
+};
+var isValidField = (input, form, defaultValue) => {
+  const value = defaultValue ?? form.getValues(input.name);
+  const fieldState = form.getFieldState(input.name);
+  if (input.zodType) {
+    const result = input.zodType.safeParse(value);
+    return result.success;
+  }
+  return !fieldState.error && value !== void 0 && value !== "";
 };
 
 // src/components/custom/form/inputs/base/definitions.ts
@@ -931,7 +939,54 @@ function Separator({
     }
   );
 }
-cva(
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = cva(
   "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
   {
     variants: {
@@ -954,6 +1009,147 @@ cva(
     }
   }
 );
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-destructive text-sm font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
 var Form = FormProvider;
 var FormFieldContext = React3.createContext(
   {}
@@ -1145,7 +1341,7 @@ function InputGroupAddon({
     }
   );
 }
-cva(
+var inputGroupButtonVariants = cva(
   "text-sm shadow-none flex gap-2 items-center",
   {
     variants: {
@@ -1161,6 +1357,24 @@ cva(
     }
   }
 );
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
 function InputGroupText({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -1189,6 +1403,22 @@ function InputGroupInput({
     }
   );
 }
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function InputOTP({
   className,
   containerClassName,
@@ -1787,6 +2017,41 @@ function ButtonGroup({
     }
   );
 }
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var ButtonGroupInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -1814,7 +2079,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
-    key
+    `${input.name}-${key}-btn-g`
   )) });
 };
 var CheckListInput = class extends BaseInput {
@@ -1990,6 +2255,29 @@ function Command({
     }
   );
 }
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        className: cn("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+      }
+    )
+  ] });
+}
 function CommandInput({
   className,
   ...props
@@ -2060,6 +2348,19 @@ function CommandGroup({
     }
   );
 }
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("bg-border -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
 function CommandItem({
   className,
   ...props
@@ -2076,6 +2377,22 @@ function CommandItem({
     }
   );
 }
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var ComboboxInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -3857,60 +4174,82 @@ function cleanEscapedString(input) {
 var DateInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    const formField = /* @__PURE__ */ jsx(
-      FormField,
-      {
-        control: form.control,
-        name: input.name,
-        render: ({ field }) => {
-          const [date, setDate] = React3.useState(
-            field.value ? new Date(field.value) : void 0
-          );
-          React3.useEffect(() => {
-            if (field.value && !date) {
-              setDate(new Date(field.value));
-            }
-          }, [field.value]);
-          const handleSelect = (selectedDate) => {
-            setDate(selectedDate);
-            handleOnChage(selectedDate, input, field);
-          };
-          return /* @__PURE__ */ jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
-            /* @__PURE__ */ jsxs(Popover, { children: [
-              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "w-full justify-start text-left font-normal",
-                    !date && "text-muted-foreground"
-                  ),
-                  children: [
+    return /* @__PURE__ */ jsx(FieldTimeInput, { input, form, isSubmitting });
+  }
+};
+var FieldTimeInput = ({ form, input, isSubmitting }) => {
+  const [isValid2, setIsValid] = useState(isValidField(input, form));
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  groupConfig?.iconsLeft ?? [];
+  groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const formField = /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
+        const [date, setDate] = React3.useState(
+          field.value ? new Date(field.value) : void 0
+        );
+        React3.useEffect(() => {
+          if (field.value && !date) {
+            setDate(new Date(field.value));
+            setIsValid(isValidField(input, form));
+          }
+        }, [field.value]);
+        const handleSelect = (selectedDate) => {
+          setDate(selectedDate);
+          handleOnChage(selectedDate, input, field);
+        };
+        return /* @__PURE__ */ jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputGroup, { className: "flex flex-row gap-1", children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                className: cn(
+                  "w-full justify-start text-left py-0.5 ",
+                  !date && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
                     /* @__PURE__ */ jsx(CalendarIcon, {}),
                     date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Fecha" })
-                  ]
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
-                Calendar,
-                {
-                  mode: "single",
-                  selected: date,
-                  onSelect: handleSelect,
-                  initialFocus: true
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
-            /* @__PURE__ */ jsx(FormMessage, {})
-          ] });
-        }
-      },
-      input.name
-    );
-    return /* @__PURE__ */ jsx(Fragment, { children: formField });
-  }
+                  ] }),
+                  (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
+                    iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                    autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+                  ] })
+                ]
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "single",
+                selected: date,
+                onSelect: handleSelect,
+                initialFocus: true
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: formField });
 };
 var DateTimeInput = class extends BaseInput {
   render() {
@@ -3920,7 +4259,7 @@ var DateTimeInput = class extends BaseInput {
 };
 var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -3971,7 +4310,7 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
               textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
-              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 20 }, index)),
+              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 24 }, index)),
               autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -4294,7 +4633,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                     const option = lista.find(
                       (item) => getValue(item).toString() === val
                     );
-                    return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, val);
+                    return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, `${input.name}-${val}-ms`);
                   }) }) : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Selecciona..." }),
                   /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 opacity-50" })
                 ]
@@ -4327,7 +4666,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                         item.name
                       ]
                     },
-                    value
+                    `${value}-ms`
                   );
                 }) })
               ] })
@@ -4349,7 +4688,7 @@ var TextInputGroup = class extends BaseInput {
 var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const infoTooltip = input?.infoTooltip;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4357,11 +4696,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = useState(() => {
-    const value = form.getValues(input.name);
-    const fieldState = form.getFieldState(input.name);
-    return !fieldState.error && value !== void 0 && value !== "";
-  });
+  const [isValid2, setIsValid] = useState(isValidField(input, form));
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
@@ -4371,9 +4706,8 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     {
       control: form.control,
       name: input.name,
-      render: ({ field, fieldState }) => {
-        const validNow = !fieldState.error && field.value !== void 0 && field.value !== "";
-        if (validNow !== isValid2) setIsValid(validNow);
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsx(FormControl, { className: "shadow-lg", children: /* @__PURE__ */ jsxs(InputGroup, { children: [
@@ -4398,6 +4732,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   }
                   handleOnChage(value, input, field);
                   field.onChange(value);
+                  isValidField(input, form);
                 }
               }
             ),
@@ -4865,7 +5200,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
                   }
                 ) }) }),
                 /* @__PURE__ */ jsxs(SelectContent, { children: [
-                  lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)),
+                  lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, `${input.name}-${item.id}-s`)),
                   lista.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "p-2 text-sm text-muted-foreground", children: "No hay opciones disponibles" })
                 ] })
               ]
@@ -5475,10 +5810,10 @@ var FieldText = ({ input, form, isSubmitting }) => {
 var TimeInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsx(FieldTimeInput, { input, form, isSubmitting });
+    return /* @__PURE__ */ jsx(FieldTimeInput2, { input, form, isSubmitting });
   }
 };
-var FieldTimeInput = ({ form, input, isSubmitting }) => {
+var FieldTimeInput2 = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const autoValidate = groupConfig?.autoValidIcons;
   const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
@@ -5586,6 +5921,7 @@ var inputMap = {
 };
 var InputFactory = class {
   static create(input, form, isSubmitting = false) {
+    input.form = form;
     const inputType = input.inputType ?? "text" /* TEXT */;
     const InputClass = inputMap[inputType] ?? TextInput;
     const instance = new InputClass(input, form, isSubmitting);
@@ -5766,7 +6102,7 @@ var DynamicForm = ({
   });
   useEffect(() => {
     form.reset(initialValues);
-  }, [initialValues, form]);
+  }, []);
   const handleSubmit = (data) => {
     if (readOnly) return;
     startTransition(() => {
@@ -6047,7 +6383,122 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
     );
   }) });
 };
+var GenericFilter = ({
+  filters = [],
+  pagination,
+  autoSubmit = false,
+  defaultValues = {},
+  initPage = 1,
+  initLimit = 10,
+  rangeLimit = [10, 25, 50, 100],
+  onChange,
+  withSearch = true,
+  withInitDate = true,
+  withEndDate = true,
+  withActive = true,
+  withLimit = true,
+  wrapInCard = true
+}) => {
+  const record = {
+    page: initPage,
+    limit: initLimit,
+    ...defaultValues
+  };
+  const [values, setValues] = useState(record);
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+  }, [values]);
+  const handleChange = (name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    if (autoSubmit && onChange) onChange({ ...values, [name]: value });
+  };
+  const baseFields = [
+    ...withSearch ? [
+      {
+        name: "search",
+        label: "Buscar",
+        inputType: "text_group" /* TEXT_GROUP */,
+        inputGroupConfig: { iconsLeft: [Search] },
+        onChange: (value) => handleChange("search", value)
+      }
+    ] : [],
+    ...withInitDate ? [
+      {
+        name: "initDate",
+        label: "Fecha de Inicio",
+        inputType: "date" /* DATE */,
+        onChange: (value) => handleChange("initDate", value)
+      }
+    ] : [],
+    ...withEndDate ? [
+      {
+        name: "endDate",
+        label: "Fecha Final",
+        inputType: "date" /* DATE */,
+        onChange: (value) => handleChange("endDate", value)
+      }
+    ] : [],
+    ...withActive ? [
+      {
+        wrapInCard: true,
+        name: "active",
+        label: "",
+        inputType: "button_group" /* BUTTON_GROUP */,
+        description: "Estado",
+        listConfig: {
+          list: [
+            { id: 1, name: "Activo", value: true },
+            { id: 2, name: "Inactivo", value: false },
+            { id: 3, name: "Todos", value: void 0 }
+          ],
+          onOptionChange: (item) => {
+            if (Array.isArray(item) && item[0]) handleChange("active", item[0].value);
+            else if (item && "value" in item) handleChange("active", item.value);
+          }
+        }
+      }
+    ] : [],
+    ...withLimit ? [
+      {
+        name: "limit",
+        label: "L\xEDmite por p\xE1gina",
+        inputType: "select" /* SELECT */,
+        listConfig: {
+          list: rangeLimit.map((num) => ({
+            value: String(num),
+            id: num,
+            name: String(num)
+          })),
+          onOptionChange: (item) => handleChange("limit", Number(item?.value ?? 10))
+        }
+      }
+    ] : []
+  ];
+  const fieldsConfig = [
+    ...filters,
+    baseFields
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row md:items-end gap-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+    DynamicForm,
+    {
+      withCard: wrapInCard,
+      withSubmitBtn: !autoSubmit,
+      formTitle: "",
+      submitBtnLabel: "Buscar",
+      fields: fieldsConfig,
+      record: values,
+      showFormHeader: false,
+      onSubmit: ({ data }) => {
+        if (onChange && !autoSubmit) onChange(data);
+      }
+    }
+  ) }) });
+};
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, Label, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput2 as FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map