shadcn-zod-formkit 1.14.0 → 1.16.0

package/dist/index.d.mts

@@ -73,13 +73,15 @@ declare enum InputTypes {
     REPEATER = "repeater",
     MULTI_SELECT = "multi_select",
     COMBOBOX = "COMBO_BOX",
-    SORTABLE_LIST = "sortable_list"
+    SORTABLE_LIST = "sortable_list",
+    REPEATER_TABS = "repeater_tabs"
 }
 declare const inputFieldComp: InputTypes[];
 
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
@@ -193,6 +195,8 @@ interface FormResp<T> {
     data: T;
 }
 interface Props$4<T extends Record<string, any>> {
+    showIcon?: boolean;
+    showFormHeader?: boolean;
     formTitle: string;
     formSubTitle?: string;
     readOnly?: boolean;
@@ -205,8 +209,10 @@ interface Props$4<T extends Record<string, any>> {
     withCard?: boolean;
     submitBtnLabel?: string;
     submitBtnClass?: string;
+    children?: ReactNode;
+    childrenHeader?: ReactNode;
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

package/dist/index.d.ts

@@ -73,13 +73,15 @@ declare enum InputTypes {
     REPEATER = "repeater",
     MULTI_SELECT = "multi_select",
     COMBOBOX = "COMBO_BOX",
-    SORTABLE_LIST = "sortable_list"
+    SORTABLE_LIST = "sortable_list",
+    REPEATER_TABS = "repeater_tabs"
 }
 declare const inputFieldComp: InputTypes[];
 
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
@@ -193,6 +195,8 @@ interface FormResp<T> {
     data: T;
 }
 interface Props$4<T extends Record<string, any>> {
+    showIcon?: boolean;
+    showFormHeader?: boolean;
     formTitle: string;
     formSubTitle?: string;
     readOnly?: boolean;
@@ -205,8 +209,10 @@ interface Props$4<T extends Record<string, any>> {
     withCard?: boolean;
     submitBtnLabel?: string;
     submitBtnClass?: string;
+    children?: ReactNode;
+    childrenHeader?: ReactNode;
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Pencil, Loader2, Save, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, ChevronsUpDown, Check, Trash2, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Pencil, Loader2, Save, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, Trash2, ChevronsUpDown, Check, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
@@ -26,6 +26,7 @@ import { Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 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';
@@ -236,9 +237,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["MULTI_SELECT"] = "multi_select";
   InputTypes2["COMBOBOX"] = "COMBO_BOX";
   InputTypes2["SORTABLE_LIST"] = "sortable_list";
+  InputTypes2["REPEATER_TABS"] = "repeater_tabs";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "repeater_tabs" /* REPEATER_TABS */,
   "sortable_list" /* SORTABLE_LIST */,
   "COMBO_BOX" /* COMBOBOX */,
   "multi_select" /* MULTI_SELECT */,
@@ -4583,6 +4586,161 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
     }
   );
 };
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+var RepeaterTabsInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsx(FieldRepeaterTabs, { form, input, isSubmitting });
+  }
+};
+var FieldRepeaterTabs = ({ form, input, isSubmitting }) => {
+  const { control } = form;
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: input.name
+  });
+  const [activeTab, setActiveTab] = useState(fields[0]?.id ?? "");
+  const canAdd = !input.maxItems || fields.length < input.maxItems;
+  const canRemove = fields.length > (input.minItems ?? 0);
+  const handleAdd = () => {
+    const newItem = { id: `tab-${Date.now()}` };
+    append(newItem);
+    setActiveTab(newItem.id);
+  };
+  const handleRemove = (index) => {
+    const removedId = fields[index].id;
+    remove(index);
+    if (activeTab === removedId && fields.length > 1) {
+      const nextTab = fields[index - 1] ?? fields[0];
+      if (nextTab) setActiveTab(nextTab.id);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name: input.name,
+      render: () => /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
+        input.label && /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [
+          /* @__PURE__ */ jsxs(TabsList, { className: "flex w-full justify-start overflow-x-auto", children: [
+            fields.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx(TabsTrigger, { value: item.id, className: "flex items-center gap-1", children: input.tabLabelField ? form.watch(`${input.name}.${index}.${input.tabLabelField}`) || `Item ${index + 1}` : `Item ${index + 1}` }),
+              canRemove && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  onClick: () => handleRemove(index),
+                  children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
+                }
+              )
+            ] }, item.id)),
+            canAdd && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "secondary",
+                size: "sm",
+                onClick: handleAdd,
+                disabled: isSubmitting,
+                className: "ml-2",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { size: 14, className: "mr-1" }),
+                  " Agregar"
+                ]
+              }
+            )
+          ] }),
+          fields.map((item, index) => /* @__PURE__ */ jsx(TabsContent, { value: item.id, className: "mt-4", children: input.repeaterFields?.map((fieldGroup, groupIndex) => {
+            const group = Array.isArray(fieldGroup) ? fieldGroup : [fieldGroup];
+            const cols = group.length;
+            return /* @__PURE__ */ jsx("div", { className: `grid gap-3 grid-cols-${cols}`, children: group.map((subField) => /* @__PURE__ */ jsx(
+              FormField,
+              {
+                control,
+                name: `${input.name}.${index}.${subField.name}`,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx(FormLabel, { children: subField.label }),
+                  /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      placeholder: subField.placeHolder,
+                      disabled: subField.disabled || isSubmitting,
+                      ...field
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(FormMessage, { children: fieldState.error?.message })
+                ] })
+              },
+              `${input.name}.${index}.${subField.name}`
+            )) }, groupIndex);
+          }) }, item.id))
+        ] }) }) }),
+        input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+};
 var SelectInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5262,6 +5420,7 @@ var inputMap = {
   ["multi_select" /* MULTI_SELECT */]: MultiSelectInput,
   ["COMBO_BOX" /* COMBOBOX */]: ComboboxInput,
   ["sortable_list" /* SORTABLE_LIST */]: SortableListInput,
+  ["repeater_tabs" /* REPEATER_TABS */]: RepeaterTabsInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -5424,6 +5583,10 @@ var DynamicForm = ({
   record = {},
   onSubmit,
   extraValidations,
+  children,
+  childrenHeader,
+  showIcon = true,
+  showFormHeader = true,
   withErrorsAlert = true,
   errorAlertPosition = "up",
   withCard = false,
@@ -5453,12 +5616,18 @@ var DynamicForm = ({
     }
   };
   const formContent = /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 p-2 border-b", children: [
-      /* @__PURE__ */ jsx(Pencil, { className: "h-5 w-5" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx("p", { children: formTitle }),
-        formSubTitle && /* @__PURE__ */ jsx(CardDescription, { children: formSubTitle })
-      ] })
+    showFormHeader && /* @__PURE__ */ jsxs(CardTitle, { className: "flex flex-row items-center gap-2 p-2 border-b", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 w-full", children: [
+        showIcon && /* @__PURE__ */ jsx(Pencil, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs(CardTitle, { className: "text-xl", children: [
+            formTitle,
+            " "
+          ] }),
+          formSubTitle && /* @__PURE__ */ jsx(CardDescription, { children: formSubTitle })
+        ] })
+      ] }),
+      childrenHeader && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
     ] }),
     withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsx(FormErrorsAlert, { formState: form.formState, fields }),
     /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
@@ -5467,7 +5636,10 @@ var DynamicForm = ({
         onSubmit: form.handleSubmit(handleSubmit),
         className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "w-full grid grid-cols-1", children: /* @__PURE__ */ jsx(FormFieldsGrid, { fields, form, readOnly }) }),
+          /* @__PURE__ */ jsxs("div", { className: "w-full grid grid-cols-1", children: [
+            /* @__PURE__ */ jsx(FormFieldsGrid, { fields, form, readOnly }),
+            children && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
+          ] }),
           !readOnly && /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 justify-end items-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "lg", className: submitBtnClass, disabled: isPending, children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
             "Guardando..."