laif-ds 0.2.75 → 0.2.77

package/dist/components/ui/app-form.js

@@ -1,313 +1,346 @@
 "use client";
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { Controller as O } from "../../node_modules/react-hook-form/dist/index.esm.js";
-import { cn as s } from "../../lib/utils.js";
-import { AppSelect as v } from "./app-select.js";
-import { AsyncSelect as I } from "./async-select.js";
-import { Button as A } from "./button.js";
-import { Checkbox as F } from "./checkbox.js";
-import { DatePicker as b } from "./date-picker.js";
-import { Input as j } from "./input.js";
-import { Label as t } from "./label.js";
-import { RadioGroup as R, RadioGroupItem as M } from "./radio-group.js";
-import { Slider as B } from "./slider.js";
-import { Switch as T } from "./switch.js";
-import { Textarea as $ } from "./textarea.js";
-import { Typo as i } from "./typo.js";
-const Z = ({
-  items: u,
-  cols: g = "2",
-  form: m,
-  submitText: x = "Invia",
-  onSubmit: C,
-  isSubmitting: p = !1,
-  showSubmitButton: N = !1
+import { jsxs as r, jsx as a, Fragment as f } from "react/jsx-runtime";
+import { Controller as S } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { cn as t } from "../../lib/utils.js";
+import { AppSelect as h } from "./app-select.js";
+import { AsyncSelect as P } from "./async-select.js";
+import { Button as V } from "./button.js";
+import { Checkbox as R } from "./checkbox.js";
+import { DatePicker as v } from "./date-picker.js";
+import { Input as k } from "./input.js";
+import { Label as u } from "./label.js";
+import { RadioGroup as w, RadioGroupItem as I } from "./radio-group.js";
+import { Slider as O } from "./slider.js";
+import { Switch as F } from "./switch.js";
+import { Textarea as A } from "./textarea.js";
+import { Typo as p } from "./typo.js";
+const j = ({
+  item: e,
+  errors: n,
+  control: c
 }) => {
-  const {
-    control: y,
-    handleSubmit: f,
-    formState: { errors: V, isValid: S, isDirty: k }
-  } = m, w = (e) => {
-    const c = V[e.name]?.message, o = c ? String(c) : void 0;
-    return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-      O,
-      {
-        name: e.name,
-        control: y,
-        render: ({ field: r }) => {
-          const d = /* @__PURE__ */ l("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ a(t, { children: e.label }),
-            o && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: o })
-          ] });
-          switch (e.component) {
-            case "input":
-              return /* @__PURE__ */ l("div", { children: [
-                d,
-                /* @__PURE__ */ a(
-                  j,
-                  {
-                    ...r,
-                    type: e.inputType,
-                    placeholder: e.placeholder,
-                    className: s(o && "border-d-destructive"),
-                    disabled: e.disabled
-                  }
-                )
-              ] });
-            case "async":
-            case "async-multiple": {
-              if (!e.fetcher || !e.renderOptionItem || !e.resolveOptionValue || !e.renderSelectedValue)
-                return /* @__PURE__ */ l("div", { children: [
-                  d,
-                  /* @__PURE__ */ a(i, { variant: "caption", className: "text-d-destructive", children: "Async select non configurato correttamente." })
-                ] });
-              const n = e.component === "async-multiple";
-              return /* @__PURE__ */ l("div", { children: [
-                d,
+  const l = n[e.name]?.message, o = l ? String(l) : void 0;
+  return /* @__PURE__ */ a("div", { className: t(e.className), children: /* @__PURE__ */ a(
+    S,
+    {
+      name: e.name,
+      control: c,
+      render: ({ field: s }) => {
+        const i = !e.hideLabel && /* @__PURE__ */ r("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ a(u, { children: e.label }),
+          o && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: o })
+        ] });
+        return /* @__PURE__ */ a(
+          L,
+          {
+            item: e,
+            field: s,
+            errorMessage: o,
+            labelWithError: i
+          }
+        );
+      }
+    }
+  ) });
+}, L = ({
+  item: e,
+  field: n,
+  errorMessage: c,
+  labelWithError: l
+}) => {
+  switch (e.component) {
+    case "input":
+      return /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(
+          k,
+          {
+            ...n,
+            type: e.inputType,
+            placeholder: e.placeholder,
+            className: t(c && "border-d-destructive"),
+            disabled: e.disabled,
+            iconLeft: e.iconLeft,
+            iconRight: e.iconRight,
+            ...e.componentProps
+          }
+        )
+      ] });
+    case "async":
+    case "async-multiple": {
+      if (!e.fetcher || !e.renderOptionItem || !e.resolveOptionValue || !e.renderSelectedValue)
+        return /* @__PURE__ */ r("div", { children: [
+          l,
+          /* @__PURE__ */ a(p, { variant: "caption", className: "text-d-destructive", children: "Async select non configurato correttamente." })
+        ] });
+      const o = e.component === "async-multiple";
+      return /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(
+          P,
+          {
+            multiple: o,
+            fetcher: e.fetcher,
+            initialOptions: e.initialOptions,
+            renderOptionItem: e.renderOptionItem,
+            resolveOptionValue: e.resolveOptionValue,
+            renderSelectedValue: e.renderSelectedValue,
+            value: n.value,
+            onChange: n.onChange,
+            placeholder: e.placeholder,
+            disabled: e.disabled,
+            notFound: e.notFound,
+            noResultsMessage: e.noResultsMessage,
+            debounce: e.debounce,
+            clearable: e.clearable,
+            ...e.componentProps
+          }
+        )
+      ] });
+    }
+    case "textarea":
+      return /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(
+          A,
+          {
+            ...n,
+            placeholder: e.placeholder,
+            className: t(c && "border-d-destructive"),
+            disabled: e.disabled,
+            ...e.componentProps
+          }
+        )
+      ] });
+    case "radio":
+      return /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(
+          w,
+          {
+            value: n.value != null ? String(n.value) : "",
+            onValueChange: (o) => n.onChange(o),
+            className: "space-y-2",
+            disabled: e.disabled,
+            ...e.componentProps,
+            children: (e.options ?? []).map((o) => {
+              const s = `${e.name}-${o.value}`;
+              return /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ a(
                   I,
                   {
-                    multiple: n,
-                    fetcher: e.fetcher,
-                    initialOptions: e.initialOptions,
-                    renderOptionItem: e.renderOptionItem,
-                    resolveOptionValue: e.resolveOptionValue,
-                    renderSelectedValue: e.renderSelectedValue,
-                    value: r.value,
-                    onChange: r.onChange,
-                    placeholder: e.placeholder,
-                    disabled: e.disabled,
-                    notFound: e.notFound,
-                    noResultsMessage: e.noResultsMessage,
-                    debounce: e.debounce,
-                    clearable: e.clearable
-                  }
-                )
-              ] });
-            }
-            case "textarea":
-              return /* @__PURE__ */ l("div", { children: [
-                d,
-                /* @__PURE__ */ a(
-                  $,
-                  {
-                    ...r,
-                    placeholder: e.placeholder,
-                    className: s(o && "border-d-destructive"),
-                    disabled: e.disabled
-                  }
-                )
-              ] });
-            case "radio":
-              return /* @__PURE__ */ l("div", { children: [
-                d,
-                /* @__PURE__ */ a(
-                  R,
-                  {
-                    value: r.value != null ? String(r.value) : "",
-                    onValueChange: (n) => r.onChange(n),
-                    className: "space-y-2",
-                    disabled: e.disabled,
-                    children: (e.options ?? []).map((n) => {
-                      const h = `${e.name}-${n.value}`;
-                      return /* @__PURE__ */ l(
-                        "div",
-                        {
-                          className: "flex items-center gap-2",
-                          children: [
-                            /* @__PURE__ */ a(
-                              M,
-                              {
-                                id: h,
-                                value: String(n.value),
-                                disabled: e.disabled
-                              }
-                            ),
-                            /* @__PURE__ */ a(
-                              t,
-                              {
-                                htmlFor: h,
-                                className: s(
-                                  "cursor-pointer",
-                                  e.disabled && "cursor-not-allowed opacity-60"
-                                ),
-                                children: n.label
-                              }
-                            )
-                          ]
-                        },
-                        n.value
-                      );
-                    })
-                  }
-                )
-              ] });
-            case "select":
-              return /* @__PURE__ */ l("div", { children: [
-                d,
-                /* @__PURE__ */ a(
-                  v,
-                  {
-                    ...r,
-                    onValueChange: (n) => r.onChange(n),
-                    options: e.options ?? [],
-                    placeholder: e.placeholder,
-                    disabled: e.disabled
-                  }
-                )
-              ] });
-            case "multiselect":
-              return /* @__PURE__ */ l("div", { children: [
-                d,
-                /* @__PURE__ */ a(
-                  v,
-                  {
-                    ...r,
-                    multiple: !0,
-                    onValueChange: (n) => r.onChange(n),
-                    options: e.options ?? [],
-                    placeholder: e.placeholder,
-                    disabled: e.disabled
-                  }
-                )
-              ] });
-            case "datepicker":
-              return /* @__PURE__ */ l("div", { className: "relative", children: [
-                d,
-                e.calendarRange ? /* @__PURE__ */ a(
-                  b,
-                  {
-                    mode: "range",
-                    value: r.value,
-                    onChange: e.disabled ? void 0 : (n) => r.onChange(n),
-                    placeholder: e.placeholder,
+                    id: s,
+                    value: String(o.value),
                     disabled: e.disabled
                   }
-                ) : /* @__PURE__ */ a(
-                  b,
-                  {
-                    mode: "single",
-                    value: r.value,
-                    onChange: e.disabled ? void 0 : (n) => r.onChange(n),
-                    placeholder: e.placeholder,
-                    disabled: e.disabled,
-                    customCalendarProps: e.disabled ? {
-                      disabled: !0,
-                      mode: "single"
-                    } : void 0
-                  }
-                )
-              ] });
-            case "checkbox":
-              return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ a(
-                    F,
-                    {
-                      ...r,
-                      id: e.name,
-                      onCheckedChange: (n) => r.onChange(n),
-                      defaultChecked: !!e.defaultValue,
-                      disabled: e.disabled
-                    }
-                  ),
-                  /* @__PURE__ */ a(
-                    t,
-                    {
-                      htmlFor: e.name,
-                      className: s(
-                        "cursor-pointer",
-                        e.disabled && "cursor-not-allowed opacity-60"
-                      ),
-                      children: e.label
-                    }
-                  ),
-                  o && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: o })
-                ] }),
-                e.caption && /* @__PURE__ */ a(
-                  i,
-                  {
-                    variant: "caption",
-                    className: "text-d-muted-foreground",
-                    children: e.caption
-                  }
-                )
-              ] });
-            case "switch":
-              return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ l("div", { children: [
-                    /* @__PURE__ */ a(t, { htmlFor: e.name, children: e.label }),
-                    e.caption && /* @__PURE__ */ a(
-                      i,
-                      {
-                        variant: "caption",
-                        className: "text-d-muted-foreground mt-0.5",
-                        children: e.caption
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ a(
-                    T,
-                    {
-                      id: e.name,
-                      checked: !!r.value,
-                      onCheckedChange: (n) => r.onChange(n),
-                      disabled: e.disabled
-                    }
-                  )
-                ] }),
-                o && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: o })
-              ] });
-            case "slider":
-              return /* @__PURE__ */ l("div", { children: [
-                d,
-                /* @__PURE__ */ a(
-                  B,
-                  {
-                    value: Array.isArray(r.value) ? r.value : [r.value || e.min || 0],
-                    onValueChange: (n) => r.onChange(n[0]),
-                    min: e.min ?? 0,
-                    max: e.max ?? 100,
-                    step: e.step ?? 1,
-                    disabled: e.disabled,
-                    showValues: !0
-                  }
                 ),
-                e.caption && /* @__PURE__ */ a(
-                  i,
+                /* @__PURE__ */ a(
+                  u,
                   {
-                    variant: "caption",
-                    className: "text-d-muted-foreground mt-1",
-                    children: e.caption
+                    htmlFor: s,
+                    className: t(
+                      "cursor-pointer",
+                      e.disabled && "cursor-not-allowed opacity-60"
+                    ),
+                    children: o.label
                   }
                 )
-              ] });
+              ] }, o.value);
+            })
           }
-        }
-      }
-    ) });
-  };
-  return /* @__PURE__ */ l("form", { onSubmit: f((e) => C?.(e)), children: [
-    /* @__PURE__ */ a("div", { className: s("grid gap-4", `grid-cols-${g}`), children: u.map((e, c) => /* @__PURE__ */ a(
+        )
+      ] });
+    case "select":
+      return /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(
+          h,
+          {
+            ...n,
+            onValueChange: (o) => n.onChange(o),
+            options: e.options ?? [],
+            placeholder: e.placeholder,
+            disabled: e.disabled,
+            searchable: e.searchable ?? !0,
+            ...e.componentProps
+          }
+        )
+      ] });
+    case "multiselect":
+      return /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(
+          h,
+          {
+            ...n,
+            multiple: !0,
+            onValueChange: (o) => n.onChange(o),
+            options: e.options ?? [],
+            placeholder: e.placeholder,
+            disabled: e.disabled,
+            searchable: e.searchable ?? !0,
+            ...e.componentProps
+          }
+        )
+      ] });
+    case "datepicker":
+      return /* @__PURE__ */ r("div", { className: "relative", children: [
+        l,
+        e.calendarRange ? /* @__PURE__ */ a(
+          v,
+          {
+            mode: "range",
+            value: n.value,
+            onChange: e.disabled ? void 0 : (o) => n.onChange(o),
+            placeholder: e.placeholder,
+            disabled: e.disabled,
+            ...e.componentProps
+          }
+        ) : /* @__PURE__ */ a(
+          v,
+          {
+            mode: "single",
+            value: n.value,
+            onChange: e.disabled ? void 0 : (o) => n.onChange(o),
+            placeholder: e.placeholder,
+            disabled: e.disabled,
+            customCalendarProps: e.disabled ? {
+              disabled: !0,
+              mode: "single"
+            } : void 0,
+            ...e.componentProps
+          }
+        )
+      ] });
+    case "checkbox":
+      return /* @__PURE__ */ r("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ a(
+            R,
+            {
+              ...n,
+              id: e.name,
+              onCheckedChange: (o) => n.onChange(o),
+              defaultChecked: !!e.defaultValue,
+              disabled: e.disabled,
+              ...e.componentProps
+            }
+          ),
+          /* @__PURE__ */ a(
+            u,
+            {
+              htmlFor: e.name,
+              className: t(
+                "cursor-pointer",
+                e.disabled && "cursor-not-allowed opacity-60"
+              ),
+              children: e.label
+            }
+          ),
+          c && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: c })
+        ] }),
+        e.caption && /* @__PURE__ */ a(p, { variant: "caption", className: "text-d-muted-foreground", children: e.caption })
+      ] });
+    case "switch":
+      return /* @__PURE__ */ r("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ r("div", { children: [
+            /* @__PURE__ */ a(u, { htmlFor: e.name, children: e.label }),
+            e.caption && /* @__PURE__ */ a(
+              p,
+              {
+                variant: "caption",
+                className: "text-d-muted-foreground mt-0.5",
+                children: e.caption
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(
+            F,
+            {
+              id: e.name,
+              checked: !!n.value,
+              onCheckedChange: (o) => n.onChange(o),
+              disabled: e.disabled,
+              ...e.componentProps
+            }
+          )
+        ] }),
+        c && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: c })
+      ] });
+    case "slider":
+      return /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(
+          O,
+          {
+            value: Array.isArray(n.value) ? n.value : [n.value || e.min || 0],
+            onValueChange: (o) => n.onChange(o[0]),
+            min: e.min ?? 0,
+            max: e.max ?? 100,
+            step: e.step ?? 1,
+            disabled: e.disabled,
+            showValues: !0,
+            ...e.componentProps
+          }
+        ),
+        e.caption && /* @__PURE__ */ a(p, { variant: "caption", className: "text-d-muted-foreground mt-1", children: e.caption })
+      ] });
+    case "custom":
+      return e.render ? /* @__PURE__ */ a(f, { children: e.render({
+        field: n,
+        error: c,
+        label: l
+      }) }) : /* @__PURE__ */ r("div", { children: [
+        l,
+        /* @__PURE__ */ a(p, { variant: "caption", className: "text-d-destructive", children: "Custom component richiede prop 'render'." })
+      ] });
+    default:
+      return /* @__PURE__ */ a("div", {});
+  }
+}, _ = ({
+  items: e,
+  cols: n = "2",
+  form: c,
+  submitText: l = "Invia",
+  onSubmit: o,
+  isSubmitting: s = !1,
+  showSubmitButton: i = !1
+}) => {
+  const {
+    control: b,
+    handleSubmit: g,
+    formState: { errors: m, isValid: x, isDirty: C }
+  } = c, N = (d) => d.colSpan ? `col-span-${d.colSpan}` : "";
+  return /* @__PURE__ */ r("form", { onSubmit: g((d) => o?.(d)), children: [
+    /* @__PURE__ */ a("div", { className: t("grid gap-4", `grid-cols-${n}`), children: e.map((d, y) => /* @__PURE__ */ a(
       "div",
       {
-        className: s(c === u.length - 1 && "col-span-full"),
-        children: w(e)
+        className: t(
+          N(d) || y === e.length - 1 && "col-span-full"
+        ),
+        children: /* @__PURE__ */ a(
+          j,
+          {
+            item: d,
+            errors: m,
+            control: b
+          }
+        )
       },
-      e.name
+      d.name
     )) }),
-    N && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
-      A,
+    i && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
+      V,
       {
         type: "submit",
-        disabled: !S || !k || p,
-        isLoading: p,
-        children: x
+        disabled: !x || !C || s,
+        isLoading: s,
+        children: l
       }
     ) })
   ] });
 };
 export {
-  Z as AppForm
+  _ as AppForm
 };