laif-ds 0.2.69 → 0.2.70

package/dist/components/ui/kanban.js

@@ -1,69 +1,69 @@
 "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 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 "./button.js";
-import { Popover as z, PopoverTrigger as L, PopoverContent as _ } from "./popover.js";
-import { TooltipProvider as j } from "./tooltip.js";
-import { Typo as k } from "./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 = S(T);
+import { jsx as p, jsxs as C, Fragment as K } from "react/jsx-runtime";
+import { useId as $, useRef as P, useCallback as h, useMemo as S, createContext as V, useState as w, useLayoutEffect as q, useEffect as E, useContext as _ } from "react";
+import { createPortal as U } from "react-dom";
+import { Button as O } from "./button.js";
+import { Popover as W, PopoverTrigger as Y, PopoverContent as J } from "./popover.js";
+import { TooltipProvider as G } from "./tooltip.js";
+import { Typo as z } from "./typo.js";
+import { cn as D } from "../../lib/utils.js";
+import X from "../../node_modules/lucide-react/dist/esm/icons/pencil.js";
+import Q from "../../node_modules/lucide-react/dist/esm/icons/ellipsis-vertical.js";
+const M = V(void 0);
+function Z(e) {
+  const r = _(M);
   if (!r)
     throw new Error("useDndMonitor must be used within a DndMonitorProvider");
-  const { registerMonitor: i, unregisterMonitor: t } = r;
-  O(() => (i(e), () => {
+  const { registerMonitor: l, unregisterMonitor: t } = r;
+  E(() => (l(e), () => {
     t(e);
-  }), [e, i, t]);
+  }), [e, l, t]);
 }
-function B() {
-  const e = S(T);
+function L() {
+  const e = _(M);
   if (!e)
     throw new Error("useDndEvents must be used within a DndMonitorProvider");
-  const { activeIdRef: r, draggableDescribedById: i, triggerEvent: t } = e, s = b(
-    (a) => {
-      r.current = a, t("onDragStart", a);
+  const { activeIdRef: r, draggableDescribedById: l, triggerEvent: t } = e, u = h(
+    (i) => {
+      r.current = i, t("onDragStart", i);
     },
     [t, r]
-  ), c = b(
-    (a, o) => {
-      t("onDragMove", a, o);
+  ), d = h(
+    (i, n) => {
+      t("onDragMove", i, n);
     },
     [t]
-  ), l = b(
-    (a, o) => {
-      const g = a || r.current;
-      t("onDragOver", g, o);
+  ), g = h(
+    (i, n) => {
+      const c = i || r.current;
+      t("onDragOver", c, n);
     },
     [t, r]
-  ), p = b(
-    (a, o) => {
-      t("onDragEnd", a, o);
+  ), a = h(
+    (i, n) => {
+      t("onDragEnd", i, n);
     },
     [t]
-  ), u = b(
-    (a) => {
-      t("onDragCancel", a);
+  ), m = h(
+    (i) => {
+      t("onDragCancel", i);
     },
     [t]
   );
   return {
-    draggableDescribedById: i,
-    onDragStart: s,
-    onDragMove: c,
-    onDragOver: l,
-    onDragEnd: p,
-    onDragCancel: u
+    draggableDescribedById: l,
+    onDragStart: u,
+    onDragMove: d,
+    onDragOver: g,
+    onDragEnd: a,
+    onDragCancel: m
   };
 }
-const V = `
+const ee = `
 To pick up a draggable item, press the space bar.
 While dragging, use the arrow keys to move the item.
 Press space again to drop the item in its new position, or press escape to cancel.
-`, Y = {
+`, re = {
   onDragStart(e) {
     return `Picked up draggable item ${e}.`;
   },
@@ -77,409 +77,538 @@ Press space again to drop the item in its new position, or press escape to cance
     return `Dragging was cancelled. Draggable item ${e} was dropped.`;
   }
 };
-function W({
+function te({
   announcement: e,
   ariaLiveType: r = "assertive",
-  className: i,
+  className: l,
   id: t,
-  ref: s,
-  ...c
+  ref: u,
+  ...d
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ p(
     "div",
     {
       "aria-live": r,
       "aria-atomic": !0,
-      className: m(
+      className: D(
         "clip-[rect(0_0_0_0)] clip-path-[inset(100%)] fixed top-0 left-0 -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap",
-        i
+        l
       ),
       id: t,
-      ref: s,
+      ref: u,
       role: "status",
-      ...c,
+      ...d,
       children: e
     }
   );
 }
-function q({
+function ne({
   id: e,
   value: r,
-  className: i,
+  className: l,
   ref: t,
-  ...s
+  ...u
 }) {
-  return /* @__PURE__ */ d("div", { id: e, className: m("hidden", i), ref: t, ...s, children: r });
+  return /* @__PURE__ */ p("div", { id: e, className: D("hidden", l), ref: t, ...u, children: r });
 }
-function G() {
-  const [e, r] = y("");
-  return { announce: b((t) => {
+function oe() {
+  const [e, r] = w("");
+  return { announce: h((t) => {
     t != null && r(t);
   }, []), announcement: e };
 }
-const Q = ({
-  announcements: e = Y,
+const ae = ({
+  announcements: e = re,
   container: r,
-  hiddenTextDescribedById: i,
-  screenReaderInstructions: t = V
+  hiddenTextDescribedById: l,
+  screenReaderInstructions: t = ee
 }) => {
-  const { announce: s, announcement: c } = G(), l = E(), [p, u] = y(!1);
-  if (O(() => {
-    u(!0);
-  }, []), J(
-    M(
+  const { announce: u, announcement: d } = oe(), g = $(), [a, m] = w(!1);
+  if (E(() => {
+    m(!0);
+  }, []), Z(
+    S(
       () => ({
-        onDragStart(o) {
-          s(e.onDragStart(o));
+        onDragStart(n) {
+          u(e.onDragStart(n));
         },
-        onDragMove(o, g) {
-          e.onDragMove && s(e.onDragMove(o, g));
+        onDragMove(n, c) {
+          e.onDragMove && u(e.onDragMove(n, c));
         },
-        onDragOver(o, g) {
-          s(e.onDragOver(o, g));
+        onDragOver(n, c) {
+          u(e.onDragOver(n, c));
         },
-        onDragEnd(o, g) {
-          s(e.onDragEnd(o, g));
+        onDragEnd(n, c) {
+          u(e.onDragEnd(n, c));
         },
-        onDragCancel(o) {
-          s(e.onDragCancel(o));
+        onDragCancel(n) {
+          u(e.onDragCancel(n));
         }
       }),
-      [s, e]
+      [u, e]
     )
-  ), !p)
+  ), !a)
     return null;
-  const a = /* @__PURE__ */ D(A, { children: [
-    /* @__PURE__ */ d(
-      q,
+  const i = /* @__PURE__ */ C(K, { children: [
+    /* @__PURE__ */ p(
+      ne,
       {
-        id: i,
+        id: l,
         value: t
       }
     ),
-    /* @__PURE__ */ d(W, { id: l, announcement: c })
+    /* @__PURE__ */ p(te, { id: g, announcement: d })
   ] });
-  return r ? I(a, r) : a;
-}, ce = ({
+  return r ? U(i, r) : i;
+}, ve = ({
   announcements: e,
   screenReaderInstructions: r,
-  container: i,
+  container: l,
   children: t
 }) => {
-  const s = E(), c = R([]), l = R(""), p = b(
-    (g) => {
-      c.current.push(g);
+  const u = $(), d = P([]), g = P(""), a = h(
+    (c) => {
+      d.current.push(c);
     },
     []
-  ), u = b(
-    (g) => {
-      c.current = c.current.filter(
-        (v) => v !== g
+  ), m = h(
+    (c) => {
+      d.current = d.current.filter(
+        (f) => f !== c
       );
     },
     []
-  ), a = b(
-    (g, v, C) => {
-      for (const N of c.current) {
-        const w = N[g];
-        w && w(v, C);
+  ), i = h(
+    (c, f, y) => {
+      for (const T of d.current) {
+        const s = T[c];
+        s && s(f, y);
       }
     },
     []
-  ), o = M(
+  ), n = S(
     () => ({
-      activeIdRef: l,
-      draggableDescribedById: s,
-      registerMonitor: p,
-      unregisterMonitor: u,
-      triggerEvent: a
+      activeIdRef: g,
+      draggableDescribedById: u,
+      registerMonitor: a,
+      unregisterMonitor: m,
+      triggerEvent: i
     }),
     [
-      l,
-      s,
-      p,
+      g,
       u,
-      a
+      a,
+      m,
+      i
     ]
   );
-  return /* @__PURE__ */ d(j, { children: /* @__PURE__ */ D(T.Provider, { value: o, children: [
+  return /* @__PURE__ */ p(G, { children: /* @__PURE__ */ C(M.Provider, { value: n, children: [
     t,
-    /* @__PURE__ */ d(
-      Q,
+    /* @__PURE__ */ p(
+      ae,
       {
         announcements: e,
         screenReaderInstructions: r,
-        container: i,
-        hiddenTextDescribedById: s
+        container: l,
+        hiddenTextDescribedById: u
       }
     )
   ] }) });
-}, x = {
+}, N = {
   CARD: "kanban-board-card"
-};
-function ge({
+}, A = 48, H = 28;
+function I(e, r) {
+  e && (typeof e == "function" ? e(r) : e.current = r);
+}
+function j(e) {
+  const r = e.dataTransfer?.types;
+  return r ? Array.from(r).includes(N.CARD) : !1;
+}
+function F(e, r, l) {
+  const t = e.getBoundingClientRect(), u = r === "x" ? t.left : t.top, d = r === "x" ? t.right : t.bottom, g = l - u, a = d - l, m = r === "x" ? "scrollLeft" : "scrollTop", i = r === "x" ? e.scrollWidth - e.clientWidth : e.scrollHeight - e.clientHeight, n = e[m];
+  if (g < A && n > 0) {
+    const c = H * ((A - g) / A);
+    e[m] = n - Math.ceil(c);
+    return;
+  }
+  if (a < A && n < i) {
+    const c = H * ((A - a) / A);
+    e[m] = n + Math.ceil(c);
+  }
+}
+function xe({
   className: e,
   ref: r,
-  ...i
+  onDragOverCapture: l,
+  style: t,
+  ...u
 }) {
-  return /* @__PURE__ */ d(
+  const d = P(null), [g, a] = w(null), m = P(null), i = P(null), n = h((s) => {
+    m.current !== s && (m.current = s, a(s));
+  }, []), c = h(() => {
+    const s = d.current;
+    if (!s) return;
+    if (t && Object.prototype.hasOwnProperty.call(
+      t,
+      "--kanban-column-min-height"
+    )) {
+      n(null);
+      return;
+    }
+    if (Array.from(
+      s.querySelectorAll('[data-kanban-column-list="true"]')
+    ).some(
+      (k) => k.scrollHeight > k.clientHeight + 1
+    )) {
+      n(null);
+      return;
+    }
+    const o = Array.from(
+      s.querySelectorAll('[data-kanban-column="true"]')
+    );
+    if (!o.length) {
+      n(null);
+      return;
+    }
+    const b = s.style.getPropertyValue(
+      "--kanban-column-min-height"
+    );
+    b && s.style.setProperty("--kanban-column-min-height", "0px");
+    let x = 0;
+    for (const k of o)
+      x = Math.max(x, k.scrollHeight);
+    b && s.style.setProperty("--kanban-column-min-height", b);
+    const B = Math.ceil(x);
+    n(Number.isFinite(B) && B > 0 ? B : 0);
+  }, [n, t]), f = h(() => {
+    i.current === null && (i.current = requestAnimationFrame(() => {
+      i.current = null, c();
+    }));
+  }, [c]);
+  q(() => {
+    f();
+  }, [f]), E(() => {
+    const s = d.current;
+    if (!s) return;
+    const v = () => f(), R = new ResizeObserver(v);
+    R.observe(s);
+    const o = new MutationObserver(v);
+    return o.observe(s, { childList: !0, subtree: !0 }), window.addEventListener("resize", v), () => {
+      R.disconnect(), o.disconnect(), window.removeEventListener("resize", v), i.current !== null && cancelAnimationFrame(i.current);
+    };
+  }, [f]);
+  const y = h(
+    (s) => {
+      j(s) && d.current && F(d.current, "x", s.clientX), l?.(s);
+    },
+    [l]
+  ), T = S(() => {
+    const s = t ? { ...t } : void 0, v = s && Object.prototype.hasOwnProperty.call(
+      s,
+      "--kanban-column-min-height"
+    );
+    return !v && g && s && (s["--kanban-column-min-height"] = `${g}px`), !v && g && !s ? {
+      "--kanban-column-min-height": `${g}px`
+    } : s;
+  }, [g, t]);
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: m(
-        "flex h-full flex-grow items-start gap-x-2 overflow-x-auto py-1 select-none",
+      className: D(
+        "relative flex h-full w-full flex-1 items-stretch gap-x-4 overflow-x-auto py-2 pr-2 select-none",
         e
       ),
+      "data-kanban-board": "true",
       draggable: !1,
-      onDragStart: (t) => {
-        t.preventDefault(), t.stopPropagation();
+      onDragStart: (s) => {
+        s.preventDefault(), s.stopPropagation();
       },
-      ref: r,
-      ...i
+      onDragOverCapture: y,
+      ref: (s) => {
+        d.current = s, I(r, s);
+      },
+      style: T,
+      ...u
     }
   );
 }
-const U = "w-80 flex-shrink-0 rounded-lg border flex flex-col border-d-border bg-d-sidebar py-1.5";
-function pe({
+const se = "relative flex h-full min-w-[16rem] flex-[1_0_18rem] flex-col rounded-2xl border border-d-border/60 bg-d-sidebar/80 p-1.5 shadow-sm backdrop-blur transition-colors min-h-[var(--kanban-column-min-height,0px)]";
+function ye({
   className: e,
   columnId: r,
-  onDropOverColumn: i,
-  ref: t,
-  ...s
+  disabled: l = !1,
+  onDropOverColumn: t,
+  ref: u,
+  ...d
 }) {
-  const [c, l] = y(!1), { onDragEnd: p, onDragOver: u } = B();
-  return /* @__PURE__ */ d(
+  const [g, a] = w(!1), [m, i] = w(!1), { onDragEnd: n, onDragOver: c } = L();
+  return /* @__PURE__ */ p(
     "section",
     {
       "aria-labelledby": `column-${r}-title`,
-      className: m(
-        U,
-        c && "border-d-primary border-2 bg-d-primary/5",
+      className: D(
+        se,
+        g && "border-d-primary/80 bg-d-primary/10 ring-2 ring-d-primary/30",
+        m && "border-d-destructive/70 bg-d-destructive/10 ring-2 ring-d-destructive/20",
         e
       ),
+      "aria-disabled": l,
+      "data-kanban-column": "true",
       draggable: !1,
-      onDragStart: (a) => {
-        a.preventDefault(), a.stopPropagation();
+      onDragStart: (f) => {
+        f.preventDefault(), f.stopPropagation();
       },
       onDragLeave: () => {
-        l(!1);
+        a(!1), i(!1);
       },
-      onDragOver: (a) => {
-        a.dataTransfer.types.includes(x.CARD) && (a.preventDefault(), l(!0), u("", r));
+      onDragOver: (f) => {
+        if (f.dataTransfer.types.includes(N.CARD)) {
+          if (l) {
+            a(!1), i(!0);
+            return;
+          }
+          f.preventDefault(), i(!1), a(!0), c("", r);
+        }
       },
-      onDrop: (a) => {
-        if (a.dataTransfer.types.includes(x.CARD)) {
-          a.preventDefault(), l(!1);
-          const o = a.dataTransfer.getData(x.CARD);
-          i?.(o), p("", r);
+      onDrop: (f) => {
+        if (f.dataTransfer.types.includes(N.CARD)) {
+          if (l) {
+            a(!1), i(!1);
+            return;
+          }
+          f.preventDefault(), a(!1), i(!1);
+          const y = f.dataTransfer.getData(N.CARD);
+          t?.(y), n("", r);
         }
       },
-      ref: t,
-      ...s
+      ref: u,
+      ...d
     }
   );
 }
-function ue({
+function Ce({
   className: e,
   ref: r,
-  ...i
+  ...l
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: m("flex items-center justify-between px-2 py-1", e),
+      className: D("flex items-center justify-between px-2 py-1", e),
       ref: r,
-      ...i
+      ...l
     }
   );
 }
-function fe({
+function we({
   className: e,
   ref: r,
-  ...i
+  dropDisabled: l = !1,
+  onDragOverCapture: t,
+  ...u
 }) {
-  return /* @__PURE__ */ d(
+  const d = P(null), g = h(
+    (a) => {
+      if (l) {
+        t?.(a);
+        return;
+      }
+      j(a) && d.current && F(d.current, "y", a.clientY), t?.(a);
+    },
+    [l, t]
+  );
+  return /* @__PURE__ */ p(
     "ul",
     {
-      className: m("min-h-0.5 flex-grow overflow-y-auto", e),
-      ref: r,
-      ...i
+      className: D("min-h-0 flex-1 overflow-y-auto", e),
+      "data-kanban-column-list": "true",
+      onDragOverCapture: g,
+      ref: (a) => {
+        d.current = a, I(r, a);
+      },
+      ...u
     }
   );
 }
-const X = "-mb-[2px] border-b-2 border-t-2 border-b-transparent border-t-transparent px-2 py-1 last:mb-0";
-function me({
+const ie = "-mb-[2px] rounded-xl border-b-2 border-t-2 border-b-transparent border-t-transparent px-2 py-1 last:mb-0 transition-colors";
+function Ne({
   cardId: e,
   className: r,
-  onDropOverListItem: i,
-  ref: t,
-  ...s
+  dropDisabled: l = !1,
+  onDropOverListItem: t,
+  ref: u,
+  ...d
 }) {
-  const [c, l] = y("none"), { onDragOver: p, onDragEnd: u } = B();
-  return /* @__PURE__ */ d(
+  const [g, a] = w("none"), { onDragOver: m, onDragEnd: i } = L();
+  return /* @__PURE__ */ p(
     "li",
     {
-      className: m(
-        X,
-        c === "top" && "border-t-d-primary !border-t-[3px]",
-        c === "bottom" && "border-b-d-primary !border-b-[3px]",
+      className: D(
+        ie,
+        g === "top" && "border-t-d-primary !border-t-[3px]",
+        g === "bottom" && "border-b-d-primary !border-b-[3px]",
         r
       ),
       onDragLeave: () => {
-        l("none");
+        a("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;
-          l(a.clientY <= g ? "top" : "bottom"), p("", e);
+      onDragOver: (n) => {
+        if (!l && n.dataTransfer.types.includes(N.CARD)) {
+          n.preventDefault(), n.stopPropagation();
+          const c = n.currentTarget.getBoundingClientRect(), f = (c.top + c.bottom) / 2;
+          a(n.clientY <= f ? "top" : "bottom"), m("", e);
         }
       },
-      onDrop: (a) => {
-        a.stopPropagation();
-        const o = a.dataTransfer.getData(x.CARD);
-        i?.(o, c), u(JSON.parse(o).id, e), l("none");
+      onDrop: (n) => {
+        if (l) return;
+        n.stopPropagation();
+        const c = n.dataTransfer.getData(N.CARD);
+        t?.(c, g), i(JSON.parse(c).id, e), a("none");
       },
-      ref: t,
-      ...s
+      ref: u,
+      ...d
     }
   );
 }
-const Z = "p-2.5 text-start";
-function be({
+const le = "p-2.5 text-start";
+function Te({
   className: e,
   data: r,
-  isActive: i = !1,
-  onEdit: t,
-  actions: s,
-  meta: c,
-  backgroundColor: l,
-  ref: p,
-  children: u,
-  ...a
+  isActive: l = !1,
+  dragDisabled: t = !1,
+  onEdit: u,
+  actions: d,
+  meta: g,
+  backgroundColor: a,
+  ref: m,
+  children: i,
+  ...n
 }) {
-  const [o, g] = y(!1), [v, C] = y(!1), { draggableDescribedById: N, onDragStart: w } = B(), K = t || s && s.length > 0;
-  return /* @__PURE__ */ D(
+  const [c, f] = w(!1), [y, T] = w(!1), { draggableDescribedById: s, onDragStart: v } = L(), R = u || d && d.length > 0;
+  return /* @__PURE__ */ C(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      "aria-describedby": N,
-      "aria-roledescription": "draggable",
-      draggable: !0,
-      onDragStart: (n) => {
-        n.stopPropagation(), g(!0), n.dataTransfer.effectAllowed = "move", n.dataTransfer.setData(
-          x.CARD,
+      "aria-describedby": t ? void 0 : s,
+      "aria-roledescription": t ? void 0 : "draggable",
+      draggable: !t,
+      onDragStart: (o) => {
+        if (t) {
+          o.preventDefault(), o.stopPropagation();
+          return;
+        }
+        o.stopPropagation(), f(!0), o.dataTransfer.effectAllowed = "move", o.dataTransfer.setData(
+          N.CARD,
           JSON.stringify(r)
         );
-        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,
-          h.width / 2,
-          h.height / 2
-        ), setTimeout(() => document.body.removeChild(f), 0), n.currentTarget.blur(), w(r.id);
+        const b = o.currentTarget.cloneNode(!0), x = o.currentTarget.getBoundingClientRect();
+        b.style.position = "absolute", b.style.top = "-9999px", b.style.width = `${x.width}px`, b.style.opacity = "0.8", document.body.appendChild(b), o.dataTransfer.setDragImage(
+          b,
+          x.width / 2,
+          x.height / 2
+        ), setTimeout(() => document.body.removeChild(b), 0), o.currentTarget.blur(), v(r.id);
       },
       onDragEnd: () => {
-        g(!1);
+        f(!1);
       },
-      onClick: (n) => {
-        o && (n.preventDefault(), n.stopPropagation());
+      onClick: (o) => {
+        c && (o.preventDefault(), o.stopPropagation());
       },
-      onKeyDown: (n) => {
-        (n.key === "Enter" || n.key === " ") && n.preventDefault();
+      onKeyDown: (o) => {
+        (o.key === "Enter" || o.key === " ") && o.preventDefault();
       },
-      className: m(
-        "border-d-border text-d-card-foreground rounded-lg border shadow-sm",
-        !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 opacity-40" : "group/card relative",
-        i && "rotate-1 transform shadow-lg",
+      className: D(
+        "border-d-border text-d-card-foreground rounded-xl border shadow-sm",
+        !a && "bg-d-card/95",
+        le,
+        "focus-visible:ring-d-ring inline-flex w-full touch-manipulation flex-col gap-2 transition-all duration-200 focus-visible:ring-1 focus-visible:outline-none",
+        t ? "group/card relative cursor-default" : c ? "cursor-grabbing active:cursor-grabbing opacity-40" : "group/card relative cursor-grab hover:-translate-y-0.5 hover:shadow-lg",
+        l && "rotate-1 transform shadow-lg",
         e
       ),
       style: {
-        backgroundColor: l ? `${l}18` : void 0,
-        borderColor: l ? `${l}35` : void 0,
-        ...a.style
+        backgroundColor: a ? `${a}18` : void 0,
+        borderColor: a ? `${a}35` : void 0,
+        ...n.style
       },
-      ref: p,
-      ...a,
+      ref: m,
+      ...n,
       children: [
-        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(
+        i,
+        g && g.length > 0 && /* @__PURE__ */ p("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: g.map((o, b) => /* @__PURE__ */ C(
           "div",
           {
-            className: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px]",
+            className: "text-d-muted-foreground inline-flex items-center gap-1 rounded-full border bg-d-muted/40 px-2 py-0.5 text-[11px]",
             style: {
-              backgroundColor: void 0,
-              color: void 0,
-              borderColor: l ? `${l}40` : void 0
+              borderColor: a ? `${a}40` : void 0
             },
             children: [
-              /* @__PURE__ */ d("span", { className: "truncate font-medium", children: n.name }),
-              n.value && /* @__PURE__ */ D(A, { children: [
-                /* @__PURE__ */ d("span", { className: "opacity-60", children: "•" }),
-                /* @__PURE__ */ d("span", { className: "truncate opacity-80", children: n.value })
+              /* @__PURE__ */ p("span", { className: "truncate font-medium", children: o.name }),
+              o.value && /* @__PURE__ */ C(K, { children: [
+                /* @__PURE__ */ p("span", { className: "opacity-60", children: "•" }),
+                /* @__PURE__ */ p("span", { className: "truncate opacity-80", children: o.value })
               ] })
             ]
           },
-          f
+          b
         )) }),
-        K && !o && /* @__PURE__ */ D(
+        R && !c && /* @__PURE__ */ C(
           "div",
           {
-            className: m(
+            className: D(
               "bg-d-card border-d-border absolute top-2 right-2 items-center gap-1 rounded-md border p-0.5 shadow-sm",
-              v ? "flex" : "hidden group-focus-within/card:flex group-hover/card:flex"
+              y ? "flex" : "hidden group-focus-within/card:flex group-hover/card:flex"
             ),
             children: [
-              t && /* @__PURE__ */ d(
-                P,
+              u && /* @__PURE__ */ p(
+                O,
                 {
                   variant: "ghost",
                   size: "icon",
                   className: "hover:bg-d-accent size-6",
-                  onClick: (n) => {
-                    n.stopPropagation(), n.preventDefault(), o || t();
+                  onClick: (o) => {
+                    o.stopPropagation(), o.preventDefault(), c || u();
                   },
-                  children: /* @__PURE__ */ d(F, { className: "size-3.5" })
+                  children: /* @__PURE__ */ p(X, { className: "size-3.5" })
                 }
               ),
-              s && s.length > 0 && /* @__PURE__ */ D(z, { open: v, onOpenChange: C, children: [
-                /* @__PURE__ */ d(L, { asChild: !0, children: /* @__PURE__ */ d(
-                  P,
+              d && d.length > 0 && /* @__PURE__ */ C(W, { open: y, onOpenChange: T, children: [
+                /* @__PURE__ */ p(Y, { asChild: !0, children: /* @__PURE__ */ p(
+                  O,
                   {
                     variant: "ghost",
                     size: "icon",
                     className: "hover:bg-d-accent size-6",
-                    onClick: (n) => {
-                      n.stopPropagation();
+                    onClick: (o) => {
+                      o.stopPropagation();
                     },
-                    children: /* @__PURE__ */ d(H, { className: "size-3.5" })
+                    children: /* @__PURE__ */ p(Q, { className: "size-3.5" })
                   }
                 ) }),
-                /* @__PURE__ */ d(
-                  _,
+                /* @__PURE__ */ p(
+                  J,
                   {
                     className: "w-48 p-1",
                     align: "end",
                     side: "bottom",
                     sideOffset: 8,
-                    onClick: (n) => n.stopPropagation(),
-                    children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-0.5", children: s.map((n, f) => /* @__PURE__ */ D(
-                      P,
+                    onClick: (o) => o.stopPropagation(),
+                    children: /* @__PURE__ */ p("div", { className: "flex flex-col gap-0.5", children: d.map((o, b) => /* @__PURE__ */ C(
+                      O,
                       {
-                        variant: n.variant === "destructive" ? "ghost-destructive" : "ghost",
+                        variant: o.variant === "destructive" ? "ghost-destructive" : "ghost",
                         size: "sm",
                         className: "w-full justify-start gap-2",
-                        onClick: (h) => {
-                          h.stopPropagation(), h.preventDefault(), n.onClick(), C(!1);
+                        onClick: (x) => {
+                          x.stopPropagation(), x.preventDefault(), o.onClick(), T(!1);
                         },
                         children: [
-                          n.icon && /* @__PURE__ */ d("span", { className: "size-4", children: n.icon }),
-                          n.label
+                          o.icon && /* @__PURE__ */ p("span", { className: "size-4", children: o.icon }),
+                          o.label
                         ]
                       },
-                      f
+                      b
                     )) })
                   }
                 )
@@ -491,30 +620,30 @@ function be({
     }
   );
 }
-function De({
+function Ae({
   className: e,
   ...r
 }) {
-  return /* @__PURE__ */ d(
-    k,
+  return /* @__PURE__ */ p(
+    z,
     {
       variant: "small",
       as: "h3",
-      className: m("text-sm font-semibold", e),
+      className: D("text-sm font-semibold", e),
       ...r
     }
   );
 }
-function ve({
+function Pe({
   className: e,
   ...r
 }) {
-  return /* @__PURE__ */ d(
-    k,
+  return /* @__PURE__ */ p(
+    z,
     {
       variant: "caption",
       as: "p",
-      className: m(
+      className: D(
         "text-d-muted-foreground leading-relaxed whitespace-pre-wrap",
         e
       ),
@@ -523,23 +652,23 @@ function ve({
   );
 }
 export {
-  ge as KanbanBoard,
-  Q as KanbanBoardAccessibility,
-  be as KanbanBoardCard,
-  ve as KanbanBoardCardDescription,
-  De as KanbanBoardCardTitle,
-  pe as KanbanBoardColumn,
-  ue as KanbanBoardColumnHeader,
-  fe as KanbanBoardColumnList,
-  me as KanbanBoardColumnListItem,
-  T as KanbanBoardContext,
-  q as KanbanBoardHiddenText,
-  W as KanbanBoardLiveRegion,
-  ce as KanbanBoardProvider,
-  Y as defaultAnnouncements,
-  V as defaultScreenReaderInstructions,
-  U as kanbanBoardColumnClassNames,
-  X as kanbanBoardColumnListItemClassNames,
-  G as useAnnouncement,
-  B as useDndEvents
+  xe as KanbanBoard,
+  ae as KanbanBoardAccessibility,
+  Te as KanbanBoardCard,
+  Pe as KanbanBoardCardDescription,
+  Ae as KanbanBoardCardTitle,
+  ye as KanbanBoardColumn,
+  Ce as KanbanBoardColumnHeader,
+  we as KanbanBoardColumnList,
+  Ne as KanbanBoardColumnListItem,
+  M as KanbanBoardContext,
+  ne as KanbanBoardHiddenText,
+  te as KanbanBoardLiveRegion,
+  ve as KanbanBoardProvider,
+  re as defaultAnnouncements,
+  ee as defaultScreenReaderInstructions,
+  se as kanbanBoardColumnClassNames,
+  ie as kanbanBoardColumnListItemClassNames,
+  oe as useAnnouncement,
+  L as useDndEvents
 };