laif-ds 0.2.48 → 0.2.50

package/dist/components/kanban.js

@@ -1,26 +1,26 @@
 "use client";
 import { jsx as d, jsxs as D, Fragment as A } from "react/jsx-runtime";
-import { useId as E, useRef as R, useCallback as b, useMemo as k, createContext as $, useState as C, useEffect as M, useContext as O } from "react";
+import { useId as E, useRef as R, useCallback as b, useMemo as M, createContext as $, useState as y, useEffect as O, useContext as S } from "react";
 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 S } 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";
 const T = $(void 0);
 function J(e) {
-  const r = O(T);
+  const r = S(T);
   if (!r)
     throw new Error("useDndMonitor must be used within a DndMonitorProvider");
   const { registerMonitor: i, unregisterMonitor: t } = r;
-  M(() => (i(e), () => {
+  O(() => (i(e), () => {
     t(e);
   }), [e, i, t]);
 }
 function B() {
-  const e = O(T);
+  const e = S(T);
   if (!e)
     throw new Error("useDndEvents must be used within a DndMonitorProvider");
   const { activeIdRef: r, draggableDescribedById: i, triggerEvent: t } = e, s = b(
@@ -28,23 +28,23 @@ function B() {
       r.current = a, t("onDragStart", a);
     },
     [t, r]
-  ), l = b(
+  ), c = b(
     (a, o) => {
       t("onDragMove", a, o);
     },
     [t]
-  ), c = b(
+  ), l = b(
     (a, o) => {
       const g = a || r.current;
       t("onDragOver", g, o);
     },
     [t, r]
-  ), u = b(
+  ), p = b(
     (a, o) => {
       t("onDragEnd", a, o);
     },
     [t]
-  ), p = b(
+  ), u = b(
     (a) => {
       t("onDragCancel", a);
     },
@@ -53,10 +53,10 @@ function B() {
   return {
     draggableDescribedById: i,
     onDragStart: s,
-    onDragMove: l,
-    onDragOver: c,
-    onDragEnd: u,
-    onDragCancel: p
+    onDragMove: c,
+    onDragOver: l,
+    onDragEnd: p,
+    onDragCancel: u
   };
 }
 const V = `
@@ -83,7 +83,7 @@ function W({
   className: i,
   id: t,
   ref: s,
-  ...l
+  ...c
 }) {
   return /* @__PURE__ */ d(
     "div",
@@ -97,7 +97,7 @@ function W({
       id: t,
       ref: s,
       role: "status",
-      ...l,
+      ...c,
       children: e
     }
   );
@@ -112,7 +112,7 @@ function q({
   return /* @__PURE__ */ d("div", { id: e, className: m("hidden", i), ref: t, ...s, children: r });
 }
 function G() {
-  const [e, r] = C("");
+  const [e, r] = y("");
   return { announce: b((t) => {
     t != null && r(t);
   }, []), announcement: e };
@@ -123,11 +123,11 @@ const Q = ({
   hiddenTextDescribedById: i,
   screenReaderInstructions: t = V
 }) => {
-  const { announce: s, announcement: l } = G(), c = E(), [u, p] = C(!1);
-  if (M(() => {
-    p(!0);
+  const { announce: s, announcement: c } = G(), l = E(), [p, u] = y(!1);
+  if (O(() => {
+    u(!0);
   }, []), J(
-    k(
+    M(
       () => ({
         onDragStart(o) {
           s(e.onDragStart(o));
@@ -147,7 +147,7 @@ const Q = ({
       }),
       [s, e]
     )
-  ), !u)
+  ), !p)
     return null;
   const a = /* @__PURE__ */ D(A, { children: [
     /* @__PURE__ */ d(
@@ -157,7 +157,7 @@ const Q = ({
         value: t
       }
     ),
-    /* @__PURE__ */ d(W, { id: c, announcement: l })
+    /* @__PURE__ */ d(W, { id: l, announcement: c })
   ] });
   return r ? I(a, r) : a;
 }, ce = ({
@@ -166,39 +166,39 @@ const Q = ({
   container: i,
   children: t
 }) => {
-  const s = E(), l = R([]), c = R(""), u = b(
+  const s = E(), c = R([]), l = R(""), p = b(
     (g) => {
-      l.current.push(g);
+      c.current.push(g);
     },
     []
-  ), p = b(
+  ), u = b(
     (g) => {
-      l.current = l.current.filter(
-        (h) => h !== g
+      c.current = c.current.filter(
+        (v) => v !== g
       );
     },
     []
   ), a = b(
-    (g, h, w) => {
-      for (const N of l.current) {
-        const y = N[g];
-        y && y(h, w);
+    (g, v, C) => {
+      for (const N of c.current) {
+        const w = N[g];
+        w && w(v, C);
       }
     },
     []
-  ), o = k(
+  ), o = M(
     () => ({
-      activeIdRef: c,
+      activeIdRef: l,
       draggableDescribedById: s,
-      registerMonitor: u,
-      unregisterMonitor: p,
+      registerMonitor: p,
+      unregisterMonitor: u,
       triggerEvent: a
     }),
     [
-      c,
+      l,
       s,
-      u,
       p,
+      u,
       a
     ]
   );
@@ -238,22 +238,22 @@ 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";
-function ue({
+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,
   onDropOverColumn: i,
   ref: t,
   ...s
 }) {
-  const [l, c] = C(!1), { onDragEnd: u, onDragOver: p } = B();
+  const [c, l] = y(!1), { onDragEnd: p, onDragOver: u } = B();
   return /* @__PURE__ */ d(
     "section",
     {
       "aria-labelledby": `column-${r}-title`,
       className: m(
         U,
-        l && "border-d-primary",
+        c && "border-d-primary border-2 bg-d-primary/5",
         e
       ),
       draggable: !1,
@@ -261,16 +261,16 @@ function ue({
         a.preventDefault(), a.stopPropagation();
       },
       onDragLeave: () => {
-        c(!1);
+        l(!1);
       },
       onDragOver: (a) => {
-        a.dataTransfer.types.includes(x.CARD) && (a.preventDefault(), c(!0), p("", r));
+        a.dataTransfer.types.includes(x.CARD) && (a.preventDefault(), l(!0), u("", r));
       },
       onDrop: (a) => {
         if (a.dataTransfer.types.includes(x.CARD)) {
-          a.preventDefault(), c(!1);
+          a.preventDefault(), l(!1);
           const o = a.dataTransfer.getData(x.CARD);
-          i?.(o), u("", r);
+          i?.(o), p("", r);
         }
       },
       ref: t,
@@ -278,7 +278,7 @@ function ue({
     }
   );
 }
-function pe({
+function ue({
   className: e,
   ref: r,
   ...i
@@ -314,50 +314,50 @@ function me({
   ref: t,
   ...s
 }) {
-  const [l, c] = C("none"), { onDragOver: u, onDragEnd: p } = B();
+  const [c, l] = y("none"), { onDragOver: p, onDragEnd: u } = B();
   return /* @__PURE__ */ d(
     "li",
     {
       className: m(
         X,
-        l === "top" && "border-t-d-primary",
-        l === "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: () => {
-        c("none");
+        l("none");
       },
       onDragOver: (a) => {
         if (a.dataTransfer.types.includes(x.CARD)) {
           a.preventDefault(), a.stopPropagation();
           const o = a.currentTarget.getBoundingClientRect(), g = (o.top + o.bottom) / 2;
-          c(a.clientY <= g ? "top" : "bottom"), u("", e);
+          l(a.clientY <= g ? "top" : "bottom"), p("", e);
         }
       },
       onDrop: (a) => {
         a.stopPropagation();
         const o = a.dataTransfer.getData(x.CARD);
-        i?.(o, l), p(JSON.parse(o).id, e), c("none");
+        i?.(o, c), u(JSON.parse(o).id, e), l("none");
       },
       ref: t,
       ...s
     }
   );
 }
-const Z = "p-3 text-start";
+const Z = "p-2.5 text-start";
 function be({
   className: e,
   data: r,
   isActive: i = !1,
   onEdit: t,
   actions: s,
-  meta: l,
-  backgroundColor: c,
-  ref: u,
-  children: p,
+  meta: c,
+  backgroundColor: l,
+  ref: p,
+  children: u,
   ...a
 }) {
-  const [o, g] = C(!1), [h, w] = C(!1), { draggableDescribedById: N, onDragStart: y } = 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",
     {
@@ -371,12 +371,12 @@ function be({
           x.CARD,
           JSON.stringify(r)
         );
-        const f = n.currentTarget.cloneNode(!0), v = n.currentTarget.getBoundingClientRect();
-        f.style.position = "absolute", f.style.top = "-9999px", f.style.width = `${v.width}px`, f.style.opacity = "0.8", document.body.appendChild(f), n.dataTransfer.setDragImage(
+        const f = n.currentTarget.cloneNode(!0), h = n.currentTarget.getBoundingClientRect();
+        f.style.position = "absolute", f.style.top = "-9999px", f.style.width = `${h.width}px`, f.style.opacity = "0.8", document.body.appendChild(f), n.dataTransfer.setDragImage(
           f,
-          v.width / 2,
-          v.height / 2
-        ), setTimeout(() => document.body.removeChild(f), 0), n.currentTarget.blur(), y(r.id);
+          h.width / 2,
+          h.height / 2
+        ), setTimeout(() => document.body.removeChild(f), 0), n.currentTarget.blur(), w(r.id);
       },
       onDragEnd: () => {
         g(!1);
@@ -389,31 +389,36 @@ function be({
       },
       className: m(
         "border-d-border text-d-card-foreground rounded-lg border shadow-sm",
-        !c && "bg-d-card",
+        !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
       ),
       style: {
-        backgroundColor: c ? `${c}15` : void 0,
-        borderColor: c ? `${c}30` : void 0,
+        backgroundColor: l ? `${l}18` : void 0,
+        borderColor: l ? `${l}35` : void 0,
         ...a.style
       },
-      ref: u,
+      ref: p,
       ...a,
       children: [
-        p,
-        l && l.length > 0 && /* @__PURE__ */ d("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: l.map((n, f) => /* @__PURE__ */ D(
+        u,
+        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: "bg-d-muted/60 text-d-muted-foreground 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: void 0,
+              color: void 0,
+              borderColor: l ? `${l}40` : void 0
+            },
             children: [
-              /* @__PURE__ */ d("span", { className: "text-d-foreground/80 truncate font-medium", children: n.name }),
+              /* @__PURE__ */ d("span", { className: "truncate font-medium", children: n.name }),
               n.value && /* @__PURE__ */ D(A, { children: [
-                /* @__PURE__ */ d("span", { className: "text-d-border/60", children: "•" }),
-                /* @__PURE__ */ d("span", { className: "truncate", children: n.value })
+                /* @__PURE__ */ d("span", { className: "opacity-60", children: "•" }),
+                /* @__PURE__ */ d("span", { className: "truncate opacity-80", children: n.value })
               ] })
             ]
           },
@@ -424,7 +429,7 @@ function be({
           {
             className: m(
               "bg-d-card border-d-border absolute top-2 right-2 items-center gap-1 rounded-md border p-0.5 shadow-sm",
-              h ? "flex" : "hidden group-focus-within/card:flex group-hover/card:flex"
+              v ? "flex" : "hidden group-focus-within/card:flex group-hover/card:flex"
             ),
             children: [
               t && /* @__PURE__ */ d(
@@ -439,7 +444,7 @@ function be({
                   children: /* @__PURE__ */ d(F, { className: "size-3.5" })
                 }
               ),
-              s && s.length > 0 && /* @__PURE__ */ D(z, { open: h, onOpenChange: w, children: [
+              s && s.length > 0 && /* @__PURE__ */ D(z, { open: v, onOpenChange: C, children: [
                 /* @__PURE__ */ d(L, { asChild: !0, children: /* @__PURE__ */ d(
                   P,
                   {
@@ -466,8 +471,8 @@ function be({
                         variant: n.variant === "destructive" ? "ghost-destructive" : "ghost",
                         size: "sm",
                         className: "w-full justify-start gap-2",
-                        onClick: (v) => {
-                          v.stopPropagation(), v.preventDefault(), n.onClick(), w(!1);
+                        onClick: (h) => {
+                          h.stopPropagation(), h.preventDefault(), n.onClick(), C(!1);
                         },
                         children: [
                           n.icon && /* @__PURE__ */ d("span", { className: "size-4", children: n.icon }),
@@ -491,21 +496,21 @@ function De({
   ...r
 }) {
   return /* @__PURE__ */ d(
-    S,
+    k,
     {
       variant: "small",
       as: "h3",
-      className: m("text-[13px] font-semibold", e),
+      className: m("text-sm font-semibold", e),
       ...r
     }
   );
 }
-function he({
+function ve({
   className: e,
   ...r
 }) {
   return /* @__PURE__ */ d(
-    S,
+    k,
     {
       variant: "caption",
       as: "p",
@@ -521,10 +526,10 @@ export {
   ge as KanbanBoard,
   Q as KanbanBoardAccessibility,
   be as KanbanBoardCard,
-  he as KanbanBoardCardDescription,
+  ve as KanbanBoardCardDescription,
   De as KanbanBoardCardTitle,
-  ue as KanbanBoardColumn,
-  pe as KanbanBoardColumnHeader,
+  pe as KanbanBoardColumn,
+  ue as KanbanBoardColumnHeader,
   fe as KanbanBoardColumnList,
   me as KanbanBoardColumnListItem,
   T as KanbanBoardContext,