laif-ds 0.2.48 → 0.2.50

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

@@ -1,137 +1,151 @@
 "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
+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: m,
+  onTaskEdit: x,
+  onTaskCreate: u,
+  taskActions: B,
+  renderTaskContent: b,
+  className: y,
+  allowTaskCreate: j = !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);
+  const [h, N] = L(K), g = (r) => {
+    const d = {};
+    for (const e of Object.keys(r))
+      d[e] = [...r[e]];
+    return d;
+  }, w = (r, d) => {
+    N((e) => {
+      const o = g(e);
       let t, n;
-      for (const a of Object.keys(o)) {
-        const c = o[a].findIndex((p) => p.id === e);
+      for (const s of Object.keys(o)) {
+        const c = o[s].findIndex((p) => p.id === r);
         if (c !== -1) {
-          n = a, [t] = o[a].splice(c, 1);
+          n = s, [t] = o[s].splice(c, 1);
           break;
         }
       }
-      return !t || n === i ? r : (o[i] || (o[i] = []), o[i].push(t), n && l && l(e, n, i), o);
+      return !t || n === d ? e : (o[d] || (o[d] = []), o[d].push(t), n && m && m(r, n, d), 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)
+  }, 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 (!a) return t;
-      const c = n[a].findIndex(
-        (s) => s.id === e
+      if (!s) return t;
+      const c = n[s].findIndex(
+        (a) => a.id === r
       );
       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
+      const [p] = n[s].splice(c, 1);
+      n[e] || (n[e] = []);
+      const f = n[e].findIndex(
+        (a) => a.id === d
       );
-      if (m === -1)
-        n[r].push(p);
+      if (f === -1)
+        n[e].push(p);
       else {
-        const s = o === "top" ? m : m + 1;
-        n[r].splice(s, 0, p);
+        const a = o === "top" ? f : f + 1;
+        n[e].splice(a, 0, p);
       }
-      return a !== r && l && l(e, a, r), n;
+      return s !== e && m && m(r, s, e), 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",
+  }, 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(
+      P,
+      {
+        columnId: r.id,
+        onDropOverColumn: (e) => {
+          const o = C(e);
+          w(o.id, r.id);
+        },
+        className: "group/column rounded-xl backdrop-blur-sm transition-colors",
+        children: [
+          /* @__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.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
+                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__ */ d("span", { className: "text-d-muted-foreground text-xs", children: C[e.id]?.length ?? 0 })
-          ] }),
-          v && h && /* @__PURE__ */ d(
-            E,
+            ) })
+          ] }) }),
+          /* @__PURE__ */ i(A, { className: "px-1 pb-2", children: h[r.id]?.map((e) => /* @__PURE__ */ i(
+            F,
             {
-              variant: "ghost",
-              size: "icon",
-              className: "size-6 opacity-0 transition-opacity group-hover/column:opacity-100",
-              onClick: (i) => {
-                i.stopPropagation(), h(e.id);
+              cardId: e.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,
+                  t
+                );
               },
-              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__ */ 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,
+                  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-muted-foreground mt-0.5 shrink-0"
+                        }
+                      ),
+                      /* @__PURE__ */ i(R, { className: "flex-1 text-sm leading-snug font-medium", children: e.title })
+                    ] }),
+                    e.description && /* @__PURE__ */ i(W, { className: "text-d-muted-foreground mt-1.5 line-clamp-2 text-xs", children: e.description })
+                  ] })
+                }
+              )
             },
-            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
-  )) }) });
+            e.id
+          )) })
+        ]
+      },
+      r.id
+    );
+  }) }) });
 }
 export {
-  Z 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
 };