laif-ds 0.2.46 → 0.2.48

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

@@ -1,22 +1,23 @@
 "use client";
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { cn as o } from "../../lib/utils.js";
-import { Controller as V } from "../../node_modules/react-hook-form/dist/index.esm.js";
-import { AppSelect as m } from "./app-select.js";
-import { Button as j } from "./button.js";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { cn as s } from "../../lib/utils.js";
+import { Controller as w } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { AppSelect as v } from "./app-select.js";
+import { AsyncSelect as O } from "./async-select.js";
+import { Button as I } from "./button.js";
 import { Checkbox as A } from "./checkbox.js";
 import { DatePicker as F } from "./date-picker.js";
-import { Input as I } from "./input.js";
+import { Input as R } from "./input.js";
 import { Label as t } from "./label.js";
-import { RadioGroup as R, RadioGroupItem as B } from "./radio-group.js";
-import { Slider as $ } from "./slider.js";
-import { Switch as D } from "./switch.js";
-import { Textarea as G } from "./textarea.js";
+import { RadioGroup as j, 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 X = ({
-  items: h,
-  cols: v = "2",
-  form: b,
+const Z = ({
+  items: u,
+  cols: b = "2",
+  form: m,
   submitText: g = "Invia",
   onSubmit: x,
   isSubmitting: p = !1,
@@ -25,98 +26,130 @@ const X = ({
   const {
     control: N,
     handleSubmit: y,
-    formState: { errors: f, isValid: S, isDirty: k }
-  } = b, w = (e) => {
+    formState: { errors: f, isValid: S, isDirty: V }
+  } = m, k = (e) => {
     const c = f[e.name]?.message, d = c ? String(c) : void 0;
     return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-      V,
+      w,
       {
         name: e.name,
         control: N,
         render: ({ field: r }) => {
-          const s = /* @__PURE__ */ n("div", { className: "mb-2 flex items-center justify-between", children: [
+          const o = /* @__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__ */ n("div", { children: [
-                s,
+              return /* @__PURE__ */ l("div", { children: [
+                o,
                 /* @__PURE__ */ a(
-                  I,
+                  R,
                   {
                     ...r,
+                    type: e.inputType,
                     placeholder: e.placeholder,
-                    className: o(d && "border-d-destructive"),
+                    className: s(d && "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: [
+                  o,
+                  /* @__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: [
+                o,
+                /* @__PURE__ */ a(
+                  O,
+                  {
+                    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__ */ n("div", { children: [
-                s,
+              return /* @__PURE__ */ l("div", { children: [
+                o,
                 /* @__PURE__ */ a(
-                  G,
+                  $,
                   {
                     ...r,
                     placeholder: e.placeholder,
-                    className: o(d && "border-d-destructive"),
+                    className: s(d && "border-d-destructive"),
                     disabled: e.disabled
                   }
                 )
               ] });
             case "radio":
-              return /* @__PURE__ */ n("div", { children: [
-                s,
+              return /* @__PURE__ */ l("div", { children: [
+                o,
                 /* @__PURE__ */ a(
-                  R,
+                  j,
                   {
                     value: r.value != null ? String(r.value) : "",
-                    onValueChange: (l) => r.onChange(l),
+                    onValueChange: (n) => r.onChange(n),
                     className: "space-y-2",
                     disabled: e.disabled,
-                    children: (e.options ?? []).map((l) => {
-                      const u = `${e.name}-${l.value}`;
-                      return /* @__PURE__ */ n(
+                    children: (e.options ?? []).map((n) => {
+                      const h = `${e.name}-${n.value}`;
+                      return /* @__PURE__ */ l(
                         "div",
                         {
                           className: "flex items-center gap-2",
                           children: [
                             /* @__PURE__ */ a(
-                              B,
+                              M,
                               {
-                                id: u,
-                                value: String(l.value),
+                                id: h,
+                                value: String(n.value),
                                 disabled: e.disabled
                               }
                             ),
                             /* @__PURE__ */ a(
                               t,
                               {
-                                htmlFor: u,
-                                className: o(
+                                htmlFor: h,
+                                className: s(
                                   "cursor-pointer",
                                   e.disabled && "cursor-not-allowed opacity-60"
                                 ),
-                                children: l.label
+                                children: n.label
                               }
                             )
                           ]
                         },
-                        l.value
+                        n.value
                       );
                     })
                   }
                 )
               ] });
             case "select":
-              return /* @__PURE__ */ n("div", { children: [
-                s,
+              return /* @__PURE__ */ l("div", { children: [
+                o,
                 /* @__PURE__ */ a(
-                  m,
+                  v,
                   {
                     ...r,
-                    onValueChange: (l) => r.onChange(l),
+                    onValueChange: (n) => r.onChange(n),
                     options: e.options ?? [],
                     placeholder: e.placeholder,
                     disabled: e.disabled
@@ -124,14 +157,14 @@ const X = ({
                 )
               ] });
             case "multiselect":
-              return /* @__PURE__ */ n("div", { children: [
-                s,
+              return /* @__PURE__ */ l("div", { children: [
+                o,
                 /* @__PURE__ */ a(
-                  m,
+                  v,
                   {
                     ...r,
                     multiple: !0,
-                    onValueChange: (l) => r.onChange(l),
+                    onValueChange: (n) => r.onChange(n),
                     options: e.options ?? [],
                     placeholder: e.placeholder,
                     disabled: e.disabled
@@ -139,13 +172,13 @@ const X = ({
                 )
               ] });
             case "datepicker":
-              return /* @__PURE__ */ n("div", { className: "relative", children: [
-                s,
+              return /* @__PURE__ */ l("div", { className: "relative", children: [
+                o,
                 /* @__PURE__ */ a(
                   F,
                   {
                     value: r.value,
-                    onChange: e.disabled || e.calendarRange ? void 0 : (l) => r.onChange(l),
+                    onChange: e.disabled || e.calendarRange ? void 0 : (n) => r.onChange(n),
                     placeholder: e.placeholder,
                     disabled: e.disabled,
                     customCalendarProps: e.disabled ? {
@@ -154,20 +187,20 @@ const X = ({
                     } : e.calendarRange ? {
                       mode: "range",
                       selected: r.value,
-                      onSelect: (l) => r.onChange(l)
+                      onSelect: (n) => r.onChange(n)
                     } : void 0
                   }
                 )
               ] });
             case "checkbox":
-              return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+              return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ a(
                     A,
                     {
                       ...r,
                       id: e.name,
-                      onCheckedChange: (l) => r.onChange(l),
+                      onCheckedChange: (n) => r.onChange(n),
                       defaultChecked: !!e.defaultValue,
                       disabled: e.disabled
                     }
@@ -176,7 +209,7 @@ const X = ({
                     t,
                     {
                       htmlFor: e.name,
-                      className: o(
+                      className: s(
                         "cursor-pointer",
                         e.disabled && "cursor-not-allowed opacity-60"
                       ),
@@ -195,9 +228,9 @@ const X = ({
                 )
               ] });
             case "switch":
-              return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ n("div", { children: [
+              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,
@@ -209,11 +242,11 @@ const X = ({
                     )
                   ] }),
                   /* @__PURE__ */ a(
-                    D,
+                    T,
                     {
                       id: e.name,
                       checked: !!r.value,
-                      onCheckedChange: (l) => r.onChange(l),
+                      onCheckedChange: (n) => r.onChange(n),
                       disabled: e.disabled
                     }
                   )
@@ -221,13 +254,13 @@ const X = ({
                 d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
               ] });
             case "slider":
-              return /* @__PURE__ */ n("div", { children: [
-                s,
+              return /* @__PURE__ */ l("div", { children: [
+                o,
                 /* @__PURE__ */ a(
-                  $,
+                  B,
                   {
                     value: Array.isArray(r.value) ? r.value : [r.value || e.min || 0],
-                    onValueChange: (l) => r.onChange(l[0]),
+                    onValueChange: (n) => r.onChange(n[0]),
                     min: e.min ?? 0,
                     max: e.max ?? 100,
                     step: e.step ?? 1,
@@ -249,20 +282,20 @@ const X = ({
       }
     ) });
   };
-  return /* @__PURE__ */ n("form", { onSubmit: y((e) => x?.(e)), children: [
-    /* @__PURE__ */ a("div", { className: o("grid gap-4", `grid-cols-${v}`), children: h.map((e, c) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ l("form", { onSubmit: y((e) => x?.(e)), children: [
+    /* @__PURE__ */ a("div", { className: s("grid gap-4", `grid-cols-${b}`), children: u.map((e, c) => /* @__PURE__ */ a(
       "div",
       {
-        className: o(c === h.length - 1 && "col-span-full"),
-        children: w(e)
+        className: s(c === u.length - 1 && "col-span-full"),
+        children: k(e)
       },
       e.name
     )) }),
     C && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
-      j,
+      I,
       {
         type: "submit",
-        disabled: !S || !k || p,
+        disabled: !S || !V || p,
         isLoading: p,
         children: g
       }
@@ -270,5 +303,5 @@ const X = ({
   ] });
 };
 export {
-  X as AppForm
+  Z as AppForm
 };

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

@@ -0,0 +1,137 @@
+"use client";
+import { jsx as d, jsxs as f, Fragment as P } from "react/jsx-runtime";
+import { useState as H } from "react";
+import { KanbanBoardProvider as S, KanbanBoard as A, KanbanBoardColumn as F, KanbanBoardColumnHeader as I, KanbanBoardColumnList as J, KanbanBoardColumnListItem as W, KanbanBoardCard as $, KanbanBoardCardTitle as q, KanbanBoardCardDescription as w } from "../kanban.js";
+import { Button as E } from "./button.js";
+import { stringToHexColor as x } from "../../lib/utils.js";
+import G from "../../node_modules/lucide-react/dist/esm/icons/plus.js";
+function Z({
+  columns: g,
+  initialTasks: N,
+  onTaskMove: l,
+  onTaskEdit: b,
+  onTaskCreate: h,
+  taskActions: O,
+  renderTaskContent: u,
+  className: j,
+  allowTaskCreate: v = !0
+}) {
+  const [C, K] = H(N), y = (e) => {
+    const i = {};
+    for (const r of Object.keys(e))
+      i[r] = [...e[r]];
+    return i;
+  }, D = (e, i) => {
+    K((r) => {
+      const o = y(r);
+      let t, n;
+      for (const a of Object.keys(o)) {
+        const c = o[a].findIndex((p) => p.id === e);
+        if (c !== -1) {
+          n = a, [t] = o[a].splice(c, 1);
+          break;
+        }
+      }
+      return !t || n === i ? r : (o[i] || (o[i] = []), o[i].push(t), n && l && l(e, n, i), o);
+    });
+  }, z = (e, i, r, o) => {
+    K((t) => {
+      const n = y(t), a = Object.keys(n).find(
+        (s) => n[s].some((L) => L.id === e)
+      );
+      if (!a) return t;
+      const c = n[a].findIndex(
+        (s) => s.id === e
+      );
+      if (c === -1) return t;
+      const [p] = n[a].splice(c, 1);
+      n[r] || (n[r] = []);
+      const m = n[r].findIndex(
+        (s) => s.id === i
+      );
+      if (m === -1)
+        n[r].push(p);
+      else {
+        const s = o === "top" ? m : m + 1;
+        n[r].splice(s, 0, p);
+      }
+      return a !== r && l && l(e, a, r), n;
+    });
+  }, B = (e) => JSON.parse(e);
+  return /* @__PURE__ */ d(S, { children: /* @__PURE__ */ d(A, { className: j, children: g.map((e) => /* @__PURE__ */ f(
+    F,
+    {
+      columnId: e.id,
+      onDropOverColumn: (i) => {
+        const r = B(i);
+        D(r.id, e.id);
+      },
+      className: "group/column",
+      children: [
+        /* @__PURE__ */ f(I, { className: "relative", children: [
+          /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ d(
+              "span",
+              {
+                className: "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium",
+                style: {
+                  backgroundColor: `${x(e.label)}20`,
+                  color: x(e.label)
+                },
+                children: e.label
+              }
+            ),
+            /* @__PURE__ */ d("span", { className: "text-d-muted-foreground text-xs", children: C[e.id]?.length ?? 0 })
+          ] }),
+          v && h && /* @__PURE__ */ d(
+            E,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "size-6 opacity-0 transition-opacity group-hover/column:opacity-100",
+              onClick: (i) => {
+                i.stopPropagation(), h(e.id);
+              },
+              children: /* @__PURE__ */ d(G, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ d(J, { children: C[e.id]?.map((i) => /* @__PURE__ */ d(
+          W,
+          {
+            cardId: i.id,
+            onDropOverListItem: (r, o) => {
+              if (o === "none") return;
+              const t = B(r);
+              z(
+                t.id,
+                i.id,
+                e.id,
+                o
+              );
+            },
+            children: /* @__PURE__ */ d(
+              $,
+              {
+                data: i,
+                onEdit: b ? () => b(i, e.id) : void 0,
+                actions: O?.(i, e.id),
+                meta: i.meta,
+                backgroundColor: x(e.label),
+                children: u ? u(i, e.id) : /* @__PURE__ */ f(P, { children: [
+                  /* @__PURE__ */ d(q, { children: i.title }),
+                  i.description && /* @__PURE__ */ d(w, { children: i.description })
+                ] })
+              }
+            )
+          },
+          i.id
+        )) })
+      ]
+    },
+    e.id
+  )) }) });
+}
+export {
+  Z as AppKanban
+};