laif-ds 0.2.49 → 0.2.50

package/dist/components/kanban.js

@@ -5,7 +5,7 @@ import { createPortal as I } from "react-dom";
 import { Button as P } from "./ui/button.js";
 import { Popover as z, PopoverTrigger as L, PopoverContent as _ } from "./ui/popover.js";
 import { TooltipProvider as j } from "./ui/tooltip.js";
-import { Typo as K } from "./ui/typo.js";
+import { Typo as k } from "./ui/typo.js";
 import { cn as m } from "../lib/utils.js";
 import F from "../node_modules/lucide-react/dist/esm/icons/pencil.js";
 import H from "../node_modules/lucide-react/dist/esm/icons/ellipsis-vertical.js";
@@ -179,10 +179,10 @@ const Q = ({
     },
     []
   ), a = b(
-    (g, v, w) => {
+    (g, v, C) => {
       for (const N of c.current) {
-        const C = N[g];
-        C && C(v, w);
+        const w = N[g];
+        w && w(v, C);
       }
     },
     []
@@ -238,7 +238,7 @@ function ge({
     }
   );
 }
-const U = "w-80 flex-shrink-0 rounded-lg border flex flex-col border-d-border bg-d-sidebar py-2 max-h-full";
+const U = "w-80 flex-shrink-0 rounded-lg border flex flex-col border-d-border bg-d-sidebar py-1.5";
 function pe({
   className: e,
   columnId: r,
@@ -253,7 +253,7 @@ function pe({
       "aria-labelledby": `column-${r}-title`,
       className: m(
         U,
-        c && "border-d-primary",
+        c && "border-d-primary border-2 bg-d-primary/5",
         e
       ),
       draggable: !1,
@@ -320,8 +320,8 @@ function me({
     {
       className: m(
         X,
-        c === "top" && "border-t-d-primary",
-        c === "bottom" && "border-b-d-primary",
+        c === "top" && "border-t-d-primary !border-t-[3px]",
+        c === "bottom" && "border-b-d-primary !border-b-[3px]",
         r
       ),
       onDragLeave: () => {
@@ -344,7 +344,7 @@ function me({
     }
   );
 }
-const Z = "p-3 text-start";
+const Z = "p-2.5 text-start";
 function be({
   className: e,
   data: r,
@@ -357,7 +357,7 @@ function be({
   children: u,
   ...a
 }) {
-  const [o, g] = y(!1), [v, w] = y(!1), { draggableDescribedById: N, onDragStart: C } = B(), k = t || s && s.length > 0;
+  const [o, g] = y(!1), [v, C] = y(!1), { draggableDescribedById: N, onDragStart: w } = B(), K = t || s && s.length > 0;
   return /* @__PURE__ */ D(
     "div",
     {
@@ -376,7 +376,7 @@ function be({
           f,
           h.width / 2,
           h.height / 2
-        ), setTimeout(() => document.body.removeChild(f), 0), n.currentTarget.blur(), C(r.id);
+        ), setTimeout(() => document.body.removeChild(f), 0), n.currentTarget.blur(), w(r.id);
       },
       onDragEnd: () => {
         g(!1);
@@ -392,7 +392,7 @@ function be({
         !l && "bg-d-card",
         Z,
         "focus-visible:ring-d-ring inline-flex w-full cursor-grab touch-manipulation flex-col gap-2 focus-visible:ring-1 focus-visible:outline-none",
-        o ? "cursor-grabbing active:cursor-grabbing" : "group/card relative",
+        o ? "cursor-grabbing active:cursor-grabbing opacity-40" : "group/card relative",
         i && "rotate-1 transform shadow-lg",
         e
       ),
@@ -408,10 +408,11 @@ function be({
         c && c.length > 0 && /* @__PURE__ */ d("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: c.map((n, f) => /* @__PURE__ */ D(
           "div",
           {
-            className: "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px]",
+            className: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px]",
             style: {
-              backgroundColor: l ? `${l}25` : void 0,
-              color: l || void 0
+              backgroundColor: void 0,
+              color: void 0,
+              borderColor: l ? `${l}40` : void 0
             },
             children: [
               /* @__PURE__ */ d("span", { className: "truncate font-medium", children: n.name }),
@@ -423,7 +424,7 @@ function be({
           },
           f
         )) }),
-        k && !o && /* @__PURE__ */ D(
+        K && !o && /* @__PURE__ */ D(
           "div",
           {
             className: m(
@@ -443,7 +444,7 @@ function be({
                   children: /* @__PURE__ */ d(F, { className: "size-3.5" })
                 }
               ),
-              s && s.length > 0 && /* @__PURE__ */ D(z, { open: v, onOpenChange: w, children: [
+              s && s.length > 0 && /* @__PURE__ */ D(z, { open: v, onOpenChange: C, children: [
                 /* @__PURE__ */ d(L, { asChild: !0, children: /* @__PURE__ */ d(
                   P,
                   {
@@ -471,7 +472,7 @@ function be({
                         size: "sm",
                         className: "w-full justify-start gap-2",
                         onClick: (h) => {
-                          h.stopPropagation(), h.preventDefault(), n.onClick(), w(!1);
+                          h.stopPropagation(), h.preventDefault(), n.onClick(), C(!1);
                         },
                         children: [
                           n.icon && /* @__PURE__ */ d("span", { className: "size-4", children: n.icon }),
@@ -495,7 +496,7 @@ function De({
   ...r
 }) {
   return /* @__PURE__ */ d(
-    K,
+    k,
     {
       variant: "small",
       as: "h3",
@@ -509,7 +510,7 @@ function ve({
   ...r
 }) {
   return /* @__PURE__ */ d(
-    K,
+    k,
     {
       variant: "caption",
       as: "p",

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

@@ -1,151 +1,145 @@
 "use client";
-import { jsx as o, jsxs as l, Fragment as $ } from "react/jsx-runtime";
-import { useState as z } from "react";
-import { KanbanBoardProvider as H, KanbanBoard as I, KanbanBoardColumn as S, KanbanBoardColumnHeader as w, KanbanBoardColumnList as A, KanbanBoardColumnListItem as F, KanbanBoardCard as J, KanbanBoardCardTitle as W, KanbanBoardCardDescription as q } from "../kanban.js";
-import { stringToHexColor as E } from "../../lib/utils.js";
-import { Icon as G } from "./icon.js";
-import Q from "../../node_modules/lucide-react/dist/esm/icons/plus.js";
-function _({
-  columns: y,
+import { jsx as i, jsxs as l, Fragment as z } from "react/jsx-runtime";
+import { useState as L } from "react";
+import { KanbanBoardProvider as H, KanbanBoard as I, KanbanBoardColumn as P, KanbanBoardColumnHeader as S, KanbanBoardColumnList as A, KanbanBoardColumnListItem as F, KanbanBoardCard as J, KanbanBoardCardTitle as R, KanbanBoardCardDescription as W } from "../kanban.js";
+import { stringToHexColor as q, hexToRgba as E } from "../../lib/utils.js";
+import { Button as G } from "./button.js";
+import { Icon as Q } from "./icon.js";
+import U from "../../node_modules/lucide-react/dist/esm/icons/plus.js";
+function M({
+  columns: v,
   initialTasks: K,
-  onTaskMove: p,
+  onTaskMove: m,
   onTaskEdit: x,
   onTaskCreate: u,
   taskActions: B,
   renderTaskContent: b,
-  className: j,
-  allowTaskCreate: v = !0,
-  createTaskLabel: O = "Nuovo task"
+  className: y,
+  allowTaskCreate: j = !0
 }) {
-  const [h, C] = z(K), g = (r) => {
-    const n = {};
+  const [h, N] = L(K), g = (r) => {
+    const d = {};
     for (const e of Object.keys(r))
-      n[e] = [...r[e]];
-    return n;
-  }, D = (r, n) => {
-    C((e) => {
-      const t = g(e);
-      let d, i;
-      for (const s of Object.keys(t)) {
-        const c = t[s].findIndex((m) => m.id === r);
+      d[e] = [...r[e]];
+    return d;
+  }, w = (r, d) => {
+    N((e) => {
+      const o = g(e);
+      let t, n;
+      for (const s of Object.keys(o)) {
+        const c = o[s].findIndex((p) => p.id === r);
         if (c !== -1) {
-          i = s, [d] = t[s].splice(c, 1);
+          n = s, [t] = o[s].splice(c, 1);
           break;
         }
       }
-      return !d || i === n ? e : (t[n] || (t[n] = []), t[n].push(d), i && p && p(r, i, n), t);
+      return !t || n === d ? e : (o[d] || (o[d] = []), o[d].push(t), n && m && m(r, n, d), o);
     });
-  }, L = (r, n, e, t) => {
-    C((d) => {
-      const i = g(d), s = Object.keys(i).find(
-        (a) => i[a].some((P) => P.id === r)
+  }, O = (r, d, e, o) => {
+    N((t) => {
+      const n = g(t), s = Object.keys(n).find(
+        (a) => n[a].some((D) => D.id === r)
       );
-      if (!s) return d;
-      const c = i[s].findIndex(
+      if (!s) return t;
+      const c = n[s].findIndex(
         (a) => a.id === r
       );
-      if (c === -1) return d;
-      const [m] = i[s].splice(c, 1);
-      i[e] || (i[e] = []);
-      const f = i[e].findIndex(
-        (a) => a.id === n
+      if (c === -1) return t;
+      const [p] = n[s].splice(c, 1);
+      n[e] || (n[e] = []);
+      const f = n[e].findIndex(
+        (a) => a.id === d
       );
       if (f === -1)
-        i[e].push(m);
+        n[e].push(p);
       else {
-        const a = t === "top" ? f : f + 1;
-        i[e].splice(a, 0, m);
+        const a = o === "top" ? f : f + 1;
+        n[e].splice(a, 0, p);
       }
-      return s !== e && p && p(r, s, e), i;
+      return s !== e && m && m(r, s, e), n;
     });
-  }, N = (r) => JSON.parse(r);
-  return /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(I, { className: j, children: y.map((r) => {
-    const n = E(r.label);
+  }, C = (r) => JSON.parse(r);
+  return /* @__PURE__ */ i(H, { children: /* @__PURE__ */ i(I, { className: y, children: v.map((r) => {
+    const d = q(r.label);
     return /* @__PURE__ */ l(
-      S,
+      P,
       {
         columnId: r.id,
         onDropOverColumn: (e) => {
-          const t = N(e);
-          D(t.id, r.id);
-        },
-        className: "group/column border-0",
-        style: {
-          backgroundColor: `${n}1d`
+          const o = C(e);
+          w(o.id, r.id);
         },
+        className: "group/column rounded-xl backdrop-blur-sm transition-colors",
         children: [
-          /* @__PURE__ */ o(w, { className: "relative mb-2", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ o(
-              "span",
+          /* @__PURE__ */ i(S, { className: "relative mb-1.5 px-1.5 pt-1.5", children: /* @__PURE__ */ l("div", { className: "flex w-full items-center justify-between", children: [
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  className: "flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-semibold",
+                  style: {
+                    backgroundColor: E(d, 0.15),
+                    color: d
+                  },
+                  children: /* @__PURE__ */ i("span", { className: "max-w-[150px] truncate", children: r.label })
+                }
+              ),
+              /* @__PURE__ */ i("span", { className: "text-d-muted-foreground text-xs", children: h[r.id]?.length ?? 0 })
+            ] }),
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: j && u && /* @__PURE__ */ i(
+              G,
               {
-                className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-sm font-semibold tracking-tight",
-                style: {
-                  backgroundColor: `${n}18`,
-                  color: n
-                },
-                children: r.label
+                variant: "ghost",
+                size: "icon",
+                className: "text-d-muted-foreground hover:text-d-foreground h-6 w-6",
+                onClick: () => u(r.id),
+                children: /* @__PURE__ */ i(U, { className: "size-3.5" })
               }
-            ),
-            /* @__PURE__ */ o("span", { className: "text-d-muted-foreground text-sm", children: h[r.id]?.length ?? 0 })
+            ) })
           ] }) }),
-          /* @__PURE__ */ o(A, { children: h[r.id]?.map((e) => /* @__PURE__ */ o(
+          /* @__PURE__ */ i(A, { className: "px-1 pb-2", children: h[r.id]?.map((e) => /* @__PURE__ */ i(
             F,
             {
               cardId: e.id,
-              onDropOverListItem: (t, d) => {
-                if (d === "none") return;
-                const i = N(t);
-                L(
-                  i.id,
+              className: "mb-1.5 border-0 last:mb-0",
+              onDropOverListItem: (o, t) => {
+                if (t === "none") return;
+                const n = C(o);
+                O(
+                  n.id,
                   e.id,
                   r.id,
-                  d
+                  t
                 );
               },
-              children: /* @__PURE__ */ o(
+              children: /* @__PURE__ */ i(
                 J,
                 {
                   data: e,
+                  className: "group/card hover:border-d-border/40 relative rounded-md border border-transparent shadow-sm transition-all duration-200 hover:shadow-md",
+                  backgroundColor: d,
                   onEdit: x ? () => x(e, r.id) : void 0,
                   actions: B?.(e, r.id),
                   meta: e.meta,
-                  backgroundColor: n,
-                  children: b ? b(e, r.id) : /* @__PURE__ */ l($, { children: [
-                    /* @__PURE__ */ l("div", { className: "flex items-start gap-2", children: [
-                      e.icon && /* @__PURE__ */ o(
-                        G,
+                  children: b ? b(e, r.id) : /* @__PURE__ */ l(z, { children: [
+                    /* @__PURE__ */ l("div", { className: "mb-1 flex items-start gap-2", children: [
+                      e.icon && /* @__PURE__ */ i(
+                        Q,
                         {
                           name: e.icon,
                           size: "sm",
-                          className: "text-d-foreground/80 mt-0.5"
+                          className: "text-d-muted-foreground mt-0.5 shrink-0"
                         }
                       ),
-                      /* @__PURE__ */ o(W, { className: "flex-1", children: e.title })
+                      /* @__PURE__ */ i(R, { className: "flex-1 text-sm leading-snug font-medium", children: e.title })
                     ] }),
-                    e.description && /* @__PURE__ */ o(q, { children: e.description })
+                    e.description && /* @__PURE__ */ i(W, { className: "text-d-muted-foreground mt-1.5 line-clamp-2 text-xs", children: e.description })
                   ] })
                 }
               )
             },
             e.id
-          )) }),
-          v && u && /* @__PURE__ */ o("div", { className: "px-2 pt-1", children: /* @__PURE__ */ l(
-            "button",
-            {
-              className: "flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
-              style: {
-                backgroundColor: `${n}1a`,
-                color: n
-              },
-              onClick: (e) => {
-                e.stopPropagation(), u(r.id);
-              },
-              children: [
-                /* @__PURE__ */ o(Q, { className: "size-4" }),
-                /* @__PURE__ */ o("span", { children: O })
-              ]
-            }
-          ) })
+          )) })
         ]
       },
       r.id
@@ -153,5 +147,5 @@ function _({
   }) }) });
 }
 export {
-  _ as AppKanban
+  M as AppKanban
 };

package/dist/components/ui/app-radio-group.js

@@ -1,50 +1,64 @@
 "use client";
-import { jsxs as r, jsx as t, Fragment as G } from "react/jsx-runtime";
-import { cn as s } from "../../lib/utils.js";
-import { Icon as O } from "./icon.js";
-import { Label as j } from "./label.js";
-import { RadioGroup as C, RadioGroupItem as F } from "./radio-group.js";
-const a = ({ content: e }) => typeof e == "string" ? /* @__PURE__ */ t("span", { children: e }) : e, I = ({ option: e }) => /* @__PURE__ */ r(G, { children: [
-  /* @__PURE__ */ r("div", { className: "text-d-foreground flex flex-row items-center gap-1.5 text-sm font-medium", children: [
-    e.icon && /* @__PURE__ */ t(O, { size: "xs", className: "min-h-4 min-w-4", name: e.icon }),
-    /* @__PURE__ */ t(a, { content: e.label })
-  ] }),
-  e.description && /* @__PURE__ */ t("div", { className: "text-d-foreground text-xs font-light", children: /* @__PURE__ */ t(a, { content: e.description }) })
-] }), P = ({
+import { jsxs as r, jsx as t, Fragment as O } from "react/jsx-runtime";
+import { designTokens as h } from "../../lib/design-tokens.js";
+import { cn as o } from "../../lib/utils.js";
+import { Icon as j } from "./icon.js";
+import { Label as C } from "./label.js";
+import { RadioGroup as F, RadioGroupItem as I } from "./radio-group.js";
+const d = ({ content: e }) => typeof e == "string" ? /* @__PURE__ */ t("span", { children: e }) : e, P = ({ option: e }) => /* @__PURE__ */ r(O, { children: [
+  /* @__PURE__ */ r(
+    "div",
+    {
+      className: o(
+        "text-d-foreground flex flex-row items-center gap-1.5",
+        h.text.base
+      ),
+      children: [
+        e.icon && /* @__PURE__ */ t(j, { size: "xs", className: "min-h-4 min-w-4", name: e.icon }),
+        /* @__PURE__ */ t(d, { content: e.label })
+      ]
+    }
+  ),
+  e.description && /* @__PURE__ */ t("div", { className: "text-d-foreground text-xs font-light", children: /* @__PURE__ */ t(d, { content: e.description }) })
+] }), T = ({
   option: e,
   optionId: c,
-  isDisabled: o,
+  isDisabled: s,
   isCard: n,
   optionClassName: l
 }) => /* @__PURE__ */ r(
-  j,
+  C,
   {
     htmlFor: c,
-    className: s(
+    className: o(
       "flex items-center gap-2",
-      o ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-      n && "bg-d-card border-d-border rounded-lg border p-2 shadow",
+      s ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+      n && o(
+        "bg-d-card border-d-border border p-2 shadow",
+        h.radius.lg
+        // Card layout uses lg radius
+      ),
       l
     ),
     children: [
-      /* @__PURE__ */ t(F, { value: e.value, id: c, disabled: o }),
+      /* @__PURE__ */ t(I, { value: e.value, id: c, disabled: s }),
       /* @__PURE__ */ t(
         "div",
         {
-          className: s(
+          className: o(
             "flex flex-1 flex-col items-start gap-1",
-            o ? "cursor-not-allowed" : "cursor-pointer"
+            s ? "cursor-not-allowed" : "cursor-pointer"
           ),
-          children: /* @__PURE__ */ t(I, { option: e })
+          children: /* @__PURE__ */ t(P, { option: e })
         }
       )
     ]
   }
 );
-function k({
+function E({
   options: e,
   value: c,
-  defaultValue: o,
+  defaultValue: s,
   onValueChange: n,
   label: l,
   description: i,
@@ -52,55 +66,55 @@ function k({
   required: f = !1,
   name: u,
   orientation: p = "vertical",
-  loop: h = !0,
-  className: g = "",
-  wrpClassName: v = "",
-  optionClassName: N = "",
-  layout: w = "default",
+  loop: g = !0,
+  className: v = "",
+  wrpClassName: N = "",
+  optionClassName: w = "",
+  layout: b = "default",
   error: m
 }) {
-  const b = p === "horizontal", y = w === "card";
-  return /* @__PURE__ */ r("div", { className: s("flex w-full flex-col gap-2", v), children: [
+  const y = p === "horizontal", R = b === "card";
+  return /* @__PURE__ */ r("div", { className: o("flex w-full flex-col gap-2", N), children: [
     (l || i) && /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
       l && /* @__PURE__ */ r(
         "div",
         {
-          className: s(
+          className: o(
             "flex items-center gap-1 text-sm font-medium",
             m ? "text-d-destructive" : "text-d-foreground"
           ),
           children: [
-            /* @__PURE__ */ t(a, { content: l }),
+            /* @__PURE__ */ t(d, { content: l }),
             f && /* @__PURE__ */ t("span", { children: "*" })
           ]
         }
       ),
-      i && /* @__PURE__ */ t("div", { className: "text-bodySecondary text-xs", children: /* @__PURE__ */ t(a, { content: i }) })
+      i && /* @__PURE__ */ t("div", { className: "text-bodySecondary text-xs", children: /* @__PURE__ */ t(d, { content: i }) })
     ] }),
     /* @__PURE__ */ t(
-      C,
+      F,
       {
         value: c,
-        defaultValue: o,
+        defaultValue: s,
         onValueChange: n,
         disabled: x,
         required: f,
         name: u,
         orientation: p,
-        loop: h,
-        className: s(
+        loop: g,
+        className: o(
           "flex gap-2",
-          b ? "flex-row" : "flex-col",
-          g
+          y ? "flex-row" : "flex-col",
+          v
         ),
-        children: e.map((d) => {
-          const R = `${u || "radio"}-${d.value}`, z = x || !!d.disabled;
-          return /* @__PURE__ */ t(P, { isCard: y, ...{
-            option: d,
-            optionId: R,
-            isDisabled: z,
-            optionClassName: N
-          } }, d.value);
+        children: e.map((a) => {
+          const z = `${u || "radio"}-${a.value}`, G = x || !!a.disabled;
+          return /* @__PURE__ */ t(T, { isCard: R, ...{
+            option: a,
+            optionId: z,
+            isDisabled: G,
+            optionClassName: w
+          } }, a.value);
         })
       }
     ),
@@ -111,5 +125,5 @@ function k({
   ] });
 }
 export {
-  k as AppRadioGroup
+  E as AppRadioGroup
 };