shadcn-zod-formkit 1.24.0 → 1.25.0

package/dist/index.cjs

@@ -294,9 +294,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["COMBOBOX"] = "COMBO_BOX";
   InputTypes2["SORTABLE_LIST"] = "sortable_list";
   InputTypes2["REPEATER_TABS"] = "repeater_tabs";
+  InputTypes2["STRING_LIST"] = "string_list";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "string_list" /* STRING_LIST */,
   "repeater_tabs" /* REPEATER_TABS */,
   "sortable_list" /* SORTABLE_LIST */,
   "COMBO_BOX" /* COMBOBOX */,
@@ -4220,7 +4222,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 shadow-lg rounded-xl p-3 bg-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-xl p-3 ", children: [
             pairs.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No pairs have been added yet." }),
             pairs.map((pair, index) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
@@ -5198,6 +5200,102 @@ function SortableWrapper({
     }
   );
 }
+var StringValueListInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FieldStringValueList,
+      {
+        input,
+        form,
+        isSubmitting
+      }
+    );
+  }
+};
+var FieldStringValueList = ({ form, input, isSubmitting }) => {
+  const fieldName = input.name;
+  React3.useEffect(() => {
+    const current = form.getValues(fieldName);
+    if (!Array.isArray(current)) {
+      form.setValue(fieldName, []);
+    }
+  }, [form, fieldName]);
+  const handleAddItem = () => {
+    const current = form.getValues(fieldName) || [];
+    form.setValue(fieldName, [...current, ""]);
+  };
+  const handleRemoveItem = (index) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.filter((_, i) => i !== index);
+    form.setValue(fieldName, updated);
+  };
+  const handleChange = (index, newValue) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.map(
+      (item, i) => i === index ? newValue : item
+    );
+    form.setValue(fieldName, updated);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: fieldName,
+      render: () => {
+        const items = form.watch(fieldName) || [];
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3  rounded-xl ", children: [
+            items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No items have been added yet." }),
+            items.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex gap-2 items-center",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Input,
+                    {
+                      placeholder: `Item ${index + 1}`,
+                      value,
+                      disabled: isSubmitting,
+                      onChange: (e) => handleChange(index, e.target.value)
+                    }
+                  ),
+                  input.isRemovebleOption && /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "destructive",
+                      size: "icon",
+                      onClick: () => handleRemoveItem(index),
+                      disabled: isSubmitting,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 18 })
+                    }
+                  )
+                ]
+              },
+              index
+            )),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: handleAddItem,
+                disabled: isSubmitting,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 18, className: "mr-1" })
+              }
+            ) })
+          ] }) }),
+          input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description })
+        ] });
+      }
+    }
+  );
+};
 var SwitchInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5509,6 +5607,7 @@ var inputMap = {
   ["COMBO_BOX" /* COMBOBOX */]: ComboboxInput,
   ["sortable_list" /* SORTABLE_LIST */]: SortableListInput,
   ["repeater_tabs" /* REPEATER_TABS */]: RepeaterTabsInput,
+  ["string_list" /* STRING_LIST */]: StringValueListInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!