shadcn-zod-formkit 1.14.0 → 1.16.0

package/README.md

@@ -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 button-group command
+ 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 command tabs
  ```
 
 

package/dist/index.cjs

@@ -27,6 +27,7 @@ var sonner = require('sonner');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var cmdk = require('cmdk');
+var TabsPrimitive = require('@radix-ui/react-tabs');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
@@ -67,6 +68,7 @@ var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPr
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var z2__default = /*#__PURE__*/_interopDefault(z2);
 
@@ -273,9 +275,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 */,
@@ -4620,6 +4624,161 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
     }
   );
 };
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.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__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.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__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.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__ */ jsxRuntime.jsx(FieldRepeaterTabs, { form, input, isSubmitting });
+  }
+};
+var FieldRepeaterTabs = ({ form, input, isSubmitting }) => {
+  const { control } = form;
+  const { fields, append, remove } = reactHookForm.useFieldArray({
+    control,
+    name: input.name
+  });
+  const [activeTab, setActiveTab] = React3.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__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control,
+      name: input.name,
+      render: () => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
+        input.label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "flex w-full justify-start overflow-x-auto", children: [
+            fields.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  onClick: () => handleRemove(index),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 14 })
+                }
+              )
+            ] }, item.id)),
+            canAdd && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "secondary",
+                size: "sm",
+                onClick: handleAdd,
+                disabled: isSubmitting,
+                className: "ml-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14, className: "mr-1" }),
+                  " Agregar"
+                ]
+              }
+            )
+          ] }),
+          fields.map((item, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `grid gap-3 grid-cols-${cols}`, children: group.map((subField) => /* @__PURE__ */ jsxRuntime.jsx(
+              FormField,
+              {
+                control,
+                name: `${input.name}.${index}.${subField.name}`,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: subField.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Input,
+                    {
+                      placeholder: subField.placeHolder,
+                      disabled: subField.disabled || isSubmitting,
+                      ...field
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { children: fieldState.error?.message })
+                ] })
+              },
+              `${input.name}.${index}.${subField.name}`
+            )) }, groupIndex);
+          }) }, item.id))
+        ] }) }) }),
+        input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+      ] })
+    }
+  );
+};
 var SelectInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5299,6 +5458,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.!!!
@@ -5461,6 +5621,10 @@ var DynamicForm = ({
   record = {},
   onSubmit,
   extraValidations,
+  children,
+  childrenHeader,
+  showIcon = true,
+  showFormHeader = true,
   withErrorsAlert = true,
   errorAlertPosition = "up",
   withCard = false,
@@ -5490,12 +5654,18 @@ var DynamicForm = ({
     }
   };
   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.Pencil, { className: "h-5 w-5" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: formTitle }),
-        formSubTitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formSubTitle })
-      ] })
+    showFormHeader && /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex flex-row items-center gap-2 p-2 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-2 w-full", children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-xl", children: [
+            formTitle,
+            " "
+          ] }),
+          formSubTitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formSubTitle })
+        ] })
+      ] }),
+      childrenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
     ] }),
     withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields }),
     /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5504,7 +5674,10 @@ var DynamicForm = ({
         onSubmit: form.handleSubmit(handleSubmit),
         className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldsGrid, { fields, form, readOnly }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full grid grid-cols-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FormFieldsGrid, { fields, form, readOnly }),
+            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
+          ] }),
           !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 justify-end items-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "lg", className: submitBtnClass, disabled: isPending, children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
             "Guardando..."