laif-ds 0.2.39 → 0.2.41

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

@@ -0,0 +1,273 @@
+"use client";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { cn as o } from "../../lib/utils.js";
+import { Controller as w } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { AppSelect as m } from "./app-select.js";
+import { Button as V } from "./button.js";
+import { Checkbox as j } from "./checkbox.js";
+import { DatePicker as A } from "./date-picker.js";
+import { Input as F } from "./input.js";
+import { Label as t } from "./label.js";
+import { RadioGroup as I, RadioGroupItem as R } from "./radio-group.js";
+import { Slider as B } from "./slider.js";
+import { Switch as $ } from "./switch.js";
+import { Textarea as D } from "./textarea.js";
+import { Typo as i } from "./typo.js";
+const U = ({
+  items: h,
+  cols: v = "2",
+  form: b,
+  submitText: g = "Invia",
+  onSubmit: x,
+  isSubmitting: p = !1
+}) => {
+  const {
+    control: C,
+    handleSubmit: N,
+    formState: { errors: y, isValid: f, isDirty: S }
+  } = b, k = (e) => {
+    const c = y[e.name]?.message, d = c ? String(c) : void 0;
+    return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
+      w,
+      {
+        name: e.name,
+        control: C,
+        render: ({ field: r }) => {
+          const s = /* @__PURE__ */ l("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ a(t, { children: e.label }),
+            d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
+          ] });
+          switch (e.component) {
+            case "input":
+              return /* @__PURE__ */ l("div", { children: [
+                s,
+                /* @__PURE__ */ a(
+                  F,
+                  {
+                    ...r,
+                    placeholder: e.placeholder,
+                    className: o(d && "border-d-destructive"),
+                    disabled: e.disabled
+                  }
+                )
+              ] });
+            case "textarea":
+              return /* @__PURE__ */ l("div", { children: [
+                s,
+                /* @__PURE__ */ a(
+                  D,
+                  {
+                    ...r,
+                    placeholder: e.placeholder,
+                    className: o(d && "border-d-destructive"),
+                    disabled: e.disabled
+                  }
+                )
+              ] });
+            case "radio":
+              return /* @__PURE__ */ l("div", { children: [
+                s,
+                /* @__PURE__ */ a(
+                  I,
+                  {
+                    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 u = `${e.name}-${n.value}`;
+                      return /* @__PURE__ */ l(
+                        "div",
+                        {
+                          className: "flex items-center gap-2",
+                          children: [
+                            /* @__PURE__ */ a(
+                              R,
+                              {
+                                id: u,
+                                value: String(n.value),
+                                disabled: e.disabled
+                              }
+                            ),
+                            /* @__PURE__ */ a(
+                              t,
+                              {
+                                htmlFor: u,
+                                className: o(
+                                  "cursor-pointer",
+                                  e.disabled && "cursor-not-allowed opacity-60"
+                                ),
+                                children: n.label
+                              }
+                            )
+                          ]
+                        },
+                        n.value
+                      );
+                    })
+                  }
+                )
+              ] });
+            case "select":
+              return /* @__PURE__ */ l("div", { children: [
+                s,
+                /* @__PURE__ */ a(
+                  m,
+                  {
+                    ...r,
+                    onValueChange: (n) => r.onChange(n),
+                    options: e.options ?? [],
+                    placeholder: e.placeholder,
+                    disabled: e.disabled
+                  }
+                )
+              ] });
+            case "multiselect":
+              return /* @__PURE__ */ l("div", { children: [
+                s,
+                /* @__PURE__ */ a(
+                  m,
+                  {
+                    ...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: [
+                s,
+                /* @__PURE__ */ a(
+                  A,
+                  {
+                    value: r.value,
+                    onChange: e.disabled || e.calendarRange ? void 0 : (n) => r.onChange(n),
+                    placeholder: e.placeholder,
+                    disabled: e.disabled,
+                    customCalendarProps: e.disabled ? {
+                      disabled: !0,
+                      mode: "single"
+                    } : e.calendarRange ? {
+                      mode: "range",
+                      selected: r.value,
+                      onSelect: (n) => r.onChange(n)
+                    } : 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(
+                    j,
+                    {
+                      ...r,
+                      id: e.name,
+                      onCheckedChange: (n) => r.onChange(n),
+                      defaultChecked: !!e.defaultValue,
+                      disabled: e.disabled
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    t,
+                    {
+                      htmlFor: e.name,
+                      className: o(
+                        "cursor-pointer",
+                        e.disabled && "cursor-not-allowed opacity-60"
+                      ),
+                      children: e.label
+                    }
+                  ),
+                  d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
+                ] }),
+                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(
+                    $,
+                    {
+                      id: e.name,
+                      checked: !!r.value,
+                      onCheckedChange: (n) => r.onChange(n),
+                      disabled: e.disabled
+                    }
+                  )
+                ] }),
+                d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
+              ] });
+            case "slider":
+              return /* @__PURE__ */ l("div", { children: [
+                s,
+                /* @__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,
+                  {
+                    variant: "caption",
+                    className: "text-d-muted-foreground mt-1",
+                    children: e.caption
+                  }
+                )
+              ] });
+          }
+        }
+      }
+    ) });
+  };
+  return /* @__PURE__ */ l("form", { onSubmit: N((e) => x?.(e)), children: [
+    /* @__PURE__ */ a("div", { className: o("grid gap-4", `grid-cols-${v}`), children: h.map((e, c) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: o(c === h.length - 1 && "col-span-full"),
+        children: k(e)
+      },
+      e.name
+    )) }),
+    /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
+      V,
+      {
+        type: "submit",
+        disabled: !f || !S || p,
+        isLoading: p,
+        children: g
+      }
+    ) })
+  ] });
+};
+export {
+  U as AppForm
+};

package/dist/components/ui/button.js

@@ -2,10 +2,10 @@
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
 import { Root as f } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { cva as m } from "../../node_modules/class-variance-authority/dist/index.js";
-import { cn as c } from "../../lib/utils.js";
-import { Icon as l } from "./icon.js";
+import { cn as l } from "../../lib/utils.js";
+import { Icon as c } from "./icon.js";
 const v = m(
-  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:ring-d-ring/50 focus-visible:ring-[3px] aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive transition-all duration-200 ease-out transform-gpu active:scale-[0.98] active:shadow-sm overflow-hidden relative group  disabled:cursor-not-allowed disabled:opacity-50  [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-d-ring",
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:ring-d-ring/50 focus-visible:ring-[3px] aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive transition-all duration-200 ease-out transform-gpu active:scale-[0.98] active:shadow-sm overflow-x-clip overflow-y-visible relative group  disabled:cursor-not-allowed disabled:opacity-50  [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-d-ring",
   {
     variants: {
       variant: {
@@ -48,14 +48,14 @@ function w({
     i,
     {
       "data-slot": "button",
-      className: c(v({ variant: a, size: e, className: o })),
+      className: l(v({ variant: a, size: e, className: o })),
       ...t
     }
   ) : /* @__PURE__ */ u(
     i,
     {
       "data-slot": "button",
-      className: c(v({ variant: a, size: e, className: o }), "relative"),
+      className: l(v({ variant: a, size: e, className: o }), "relative"),
       ...t,
       children: [
         b ? /* @__PURE__ */ u(
@@ -90,7 +90,7 @@ function w({
             ]
           }
         ) : s && /* @__PURE__ */ r(
-          l,
+          c,
           {
             name: s,
             size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
@@ -98,7 +98,7 @@ function w({
         ),
         t.children,
         n && /* @__PURE__ */ r(
-          l,
+          c,
           {
             name: n,
             size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"

package/dist/components/ui/date-picker.js

@@ -1,88 +1,92 @@
 "use client";
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { buttonVariants as j } from "./button.js";
-import { Calendar as M } from "./calendar.js";
-import { Icon as N } from "./icon.js";
-import { Popover as k, PopoverTrigger as I, PopoverContent as E } from "./popover.js";
-import { cn as F } from "../../lib/utils.js";
-import * as s from "react";
-import { formatDate as R } from "../../node_modules/date-fns/format.js";
-import { isSameDay as T } from "../../node_modules/date-fns/isSameDay.js";
-function L({
-  value: h,
-  onChange: d,
-  placeholder: g = "Seleziona data",
-  dateFormat: x = "dd/MM/yyyy",
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { buttonVariants as N } from "./button.js";
+import { Calendar as k } from "./calendar.js";
+import { Icon as v } from "./icon.js";
+import { Popover as I, PopoverTrigger as E, PopoverContent as R } from "./popover.js";
+import { cn as T } from "../../lib/utils.js";
+import * as x from "react";
+import { useEffect as V } from "react";
+import { formatDate as m } from "../../node_modules/date-fns/format.js";
+import { isSameDay as q } from "../../node_modules/date-fns/isSameDay.js";
+function U({
+  value: e,
+  onChange: c,
+  placeholder: b = "Seleziona data",
+  dateFormat: f = "dd/MM/yyyy",
   className: y,
-  buttonVariant: b = "default",
-  disabled: o = !1,
-  size: n = "default",
-  firstDate: f,
-  lastDate: i,
-  availableDates: u,
-  locale: v,
-  initialCalendarMonth: m,
-  customCalendarProps: w
+  buttonVariant: j = "default",
+  disabled: t = !1,
+  size: i = "default",
+  firstDate: a,
+  lastDate: p,
+  availableDates: l,
+  locale: C,
+  initialCalendarMonth: u,
+  customCalendarProps: P
 }) {
-  const [e, c] = s.useState(h), [C, l] = s.useState(
-    m
-  );
-  s.useEffect(() => {
-    c(e), l(e || m);
-  }, [e]);
-  const P = (r) => {
-    c(r), r && l(r), d && d(r);
+  const [r, h] = x.useState(e), [S, g] = x.useState(
+    u
+  ), w = (n) => {
+    h(n), n && g(n), c && c(n);
   };
-  let a = [];
-  return f && a.push({ before: f }), i && a.push({ after: i }), u?.length && a.push(
-    (r) => !u.some(
-      (S) => T(S, r)
+  let s = [];
+  return a && s.push({ before: a }), p && s.push({ after: p }), l?.length && s.push(
+    (n) => !l.some(
+      (M) => q(M, n)
     )
-  ), o && (a = [!0]), /* @__PURE__ */ p(k, { open: o ? !1 : void 0, children: [
-    /* @__PURE__ */ t(I, { asChild: !0, children: /* @__PURE__ */ t(
+  ), t && (s = [!0]), V(() => {
+    h(r), g(r || u);
+  }, [r]), /* @__PURE__ */ d(I, { open: t ? !1 : void 0, children: [
+    /* @__PURE__ */ o(E, { asChild: !0, children: /* @__PURE__ */ o(
       "div",
       {
-        className: F(
-          j({ variant: b, size: n }),
-          "border-d-input text-d-foreground hover:bg-d-accent bg-d-input ring-offset-background data-[placeholder]:text-d-muted-foreground focus:ring-d-ring flex items-center justify-between border px-3 py-2 font-normal whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none [&>span]:line-clamp-1",
-          !e && "text-d-muted-foreground",
-          o && "cursor-not-allowed opacity-50",
+        className: T(
+          N({ variant: j, size: i }),
+          "border-d-border/50 text-d-foreground hover:border-d-ring focus-visible:border-d-ring focus-visible:ring-d-ring/50 ring-offset-background data-[placeholder]:text-d-muted-foreground flex items-center justify-between border !bg-transparent px-3 py-2 font-normal whitespace-nowrap focus-visible:outline-none [&>span]:line-clamp-1",
+          !r && "text-d-muted-foreground",
+          t && "cursor-not-allowed opacity-50",
           y,
-          n === "sm" && "text-xs",
-          n === "lg" && "text-lg"
+          i === "sm" && "text-xs",
+          i === "lg" && "text-lg"
         ),
-        "aria-disabled": o,
+        "aria-disabled": t,
         role: "button",
-        tabIndex: o ? -1 : 0,
-        onClick: o ? void 0 : () => {
+        tabIndex: t ? -1 : 0,
+        onClick: t ? void 0 : () => {
         },
-        children: /* @__PURE__ */ p("div", { className: "flex w-full items-center justify-between gap-2", children: [
-          /* @__PURE__ */ t(
-            N,
+        children: /* @__PURE__ */ d("div", { className: "flex w-full items-center justify-between gap-2", children: [
+          /* @__PURE__ */ o(
+            v,
             {
               name: "Calendar",
-              size: n === "default" ? "md" : n === "sm" ? "xs" : "sm"
+              size: i === "default" ? "md" : i === "sm" ? "xs" : "sm"
             }
           ),
-          e ? /* @__PURE__ */ t("span", { children: R(e, x) }) : /* @__PURE__ */ t("span", { className: "text-d-muted-foreground", children: g })
+          e && typeof e == "object" && "from" in e ? /* @__PURE__ */ d("span", { children: [
+            e.from && m(e.from, f),
+            e.from && e.to && " - ",
+            e.to && m(e.to, f)
+          ] }) : r ? /* @__PURE__ */ o("span", { children: m(r, f) }) : /* @__PURE__ */ o("span", { className: "text-d-muted-foreground", children: b })
         ] })
       }
     ) }),
-    /* @__PURE__ */ t(E, { className: "w-auto p-0", children: /* @__PURE__ */ t(
-      M,
+    /* @__PURE__ */ o(R, { className: "w-auto p-0", children: /* @__PURE__ */ o(
+      k,
       {
-        ...w,
-        mode: "single",
-        selected: e,
-        onSelect: P,
+        ...P || {
+          mode: "single",
+          selected: r,
+          onSelect: w
+        },
         autoFocus: !0,
-        disabled: a,
-        locale: v,
-        defaultMonth: C
+        disabled: s,
+        locale: C,
+        defaultMonth: S
       }
     ) })
   ] });
 }
 export {
-  L as DatePicker
+  U as DatePicker
 };

package/dist/components/ui/dialog.js

@@ -1,34 +1,34 @@
 "use client";
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import { Root as c, Content as g, Close as l, Description as f, Title as u, Trigger as m, Portal as p, Overlay as x } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { Root as c, Content as u, Close as l, Description as f, Title as m, Trigger as p, Portal as x, Overlay as v } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
 import { cn as o } from "../../lib/utils.js";
 import D from "../../node_modules/lucide-react/dist/esm/icons/x.js";
-function C({
+function k({
   ...t
 }) {
   return /* @__PURE__ */ a(c, { "data-slot": "dialog", ...t });
 }
-function k({
+function T({
   ...t
 }) {
-  return /* @__PURE__ */ a(m, { "data-slot": "dialog-trigger", ...t });
+  return /* @__PURE__ */ a(p, { "data-slot": "dialog-trigger", ...t });
 }
-function v({
+function b({
   ...t
 }) {
-  return /* @__PURE__ */ a(p, { "data-slot": "dialog-portal", ...t });
+  return /* @__PURE__ */ a(x, { "data-slot": "dialog-portal", ...t });
 }
-function T({
+function j({
   ...t
 }) {
   return /* @__PURE__ */ a(l, { "data-slot": "dialog-close", ...t });
 }
-function b({
+function h({
   className: t,
   ...e
 }) {
   return /* @__PURE__ */ a(
-    x,
+    v,
     {
       "data-slot": "dialog-overlay",
       className: o(
@@ -39,36 +39,37 @@ function b({
     }
   );
 }
-function j({
+function O({
   className: t,
   children: e,
   size: r = "default",
+  closeOnOverlay: d = !0,
   ...i
 }) {
-  const d = {
+  const g = {
     sm: "sm:max-w-sm",
     default: "sm:max-w-lg",
     lg: "sm:max-w-2xl",
     xl: "sm:max-w-3xl"
   }[r];
-  return /* @__PURE__ */ n(v, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ a(b, {}),
-    /* @__PURE__ */ n(
-      g,
+  return /* @__PURE__ */ s(b, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ a(h, {}),
+    /* @__PURE__ */ s(
+      u,
       {
         "data-slot": "dialog-content",
-        onPointerDownOutside: (s) => {
-          s.target?.closest("[data-command-portal]") && s.preventDefault();
+        onPointerDownOutside: (n) => {
+          n.target?.closest("[data-command-portal]") && n.preventDefault(), d || n.preventDefault();
         },
         className: o(
           "bg-d-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 border-d-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200",
-          d,
+          g,
           t
         ),
         ...i,
         children: [
           e,
-          /* @__PURE__ */ n(l, { className: "ring-offset-d-background focus:ring-d-ring data-[state=open]:bg-d-accent data-[state=open]:text-d-secondary-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
+          /* @__PURE__ */ s(l, { className: "ring-offset-d-background focus:ring-d-ring data-[state=open]:bg-d-accent data-[state=open]:text-d-secondary-foreground absolute top-4 right-4 rounded-md p-1.5 bg-d-muted/30 hover:bg-d-muted/60 cursor-pointer transition-all hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
             /* @__PURE__ */ a(D, {}),
             /* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
           ] })
@@ -77,7 +78,7 @@ function j({
     )
   ] });
 }
-function O({ className: t, ...e }) {
+function P({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "div",
     {
@@ -87,7 +88,7 @@ function O({ className: t, ...e }) {
     }
   );
 }
-function P({ className: t, ...e }) {
+function _({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "div",
     {
@@ -100,12 +101,12 @@ function P({ className: t, ...e }) {
     }
   );
 }
-function _({
+function F({
   className: t,
   ...e
 }) {
   return /* @__PURE__ */ a(
-    u,
+    m,
     {
       "data-slot": "dialog-title",
       className: o("text-lg leading-none font-semibold", t),
@@ -113,7 +114,7 @@ function _({
     }
   );
 }
-function F({
+function H({
   className: t,
   ...e
 }) {
@@ -127,14 +128,14 @@ function F({
   );
 }
 export {
-  C as Dialog,
-  T as DialogClose,
-  j as DialogContent,
-  F as DialogDescription,
-  P as DialogFooter,
-  O as DialogHeader,
-  b as DialogOverlay,
-  v as DialogPortal,
-  _ as DialogTitle,
-  k as DialogTrigger
+  k as Dialog,
+  j as DialogClose,
+  O as DialogContent,
+  H as DialogDescription,
+  _ as DialogFooter,
+  P as DialogHeader,
+  h as DialogOverlay,
+  b as DialogPortal,
+  F as DialogTitle,
+  T as DialogTrigger
 };