laif-ds 0.2.47 → 0.2.48

package/dist/components/kanban.js

@@ -0,0 +1,540 @@
+"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 { 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 { 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);
+  if (!r)
+    throw new Error("useDndMonitor must be used within a DndMonitorProvider");
+  const { registerMonitor: i, unregisterMonitor: t } = r;
+  M(() => (i(e), () => {
+    t(e);
+  }), [e, i, t]);
+}
+function B() {
+  const e = O(T);
+  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);
+    },
+    [t, r]
+  ), l = b(
+    (a, o) => {
+      t("onDragMove", a, o);
+    },
+    [t]
+  ), c = b(
+    (a, o) => {
+      const g = a || r.current;
+      t("onDragOver", g, o);
+    },
+    [t, r]
+  ), u = b(
+    (a, o) => {
+      t("onDragEnd", a, o);
+    },
+    [t]
+  ), p = b(
+    (a) => {
+      t("onDragCancel", a);
+    },
+    [t]
+  );
+  return {
+    draggableDescribedById: i,
+    onDragStart: s,
+    onDragMove: l,
+    onDragOver: c,
+    onDragEnd: u,
+    onDragCancel: p
+  };
+}
+const V = `
+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 = {
+  onDragStart(e) {
+    return `Picked up draggable item ${e}.`;
+  },
+  onDragOver(e, r) {
+    return r ? `Draggable item ${e} was moved over droppable area ${r}.` : `Draggable item ${e} is no longer over a droppable area.`;
+  },
+  onDragEnd(e, r) {
+    return r ? `Draggable item ${e} was dropped over droppable area ${r}` : `Draggable item ${e} was dropped.`;
+  },
+  onDragCancel(e) {
+    return `Dragging was cancelled. Draggable item ${e} was dropped.`;
+  }
+};
+function W({
+  announcement: e,
+  ariaLiveType: r = "assertive",
+  className: i,
+  id: t,
+  ref: s,
+  ...l
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "aria-live": r,
+      "aria-atomic": !0,
+      className: m(
+        "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
+      ),
+      id: t,
+      ref: s,
+      role: "status",
+      ...l,
+      children: e
+    }
+  );
+}
+function q({
+  id: e,
+  value: r,
+  className: i,
+  ref: t,
+  ...s
+}) {
+  return /* @__PURE__ */ d("div", { id: e, className: m("hidden", i), ref: t, ...s, children: r });
+}
+function G() {
+  const [e, r] = C("");
+  return { announce: b((t) => {
+    t != null && r(t);
+  }, []), announcement: e };
+}
+const Q = ({
+  announcements: e = Y,
+  container: r,
+  hiddenTextDescribedById: i,
+  screenReaderInstructions: t = V
+}) => {
+  const { announce: s, announcement: l } = G(), c = E(), [u, p] = C(!1);
+  if (M(() => {
+    p(!0);
+  }, []), J(
+    k(
+      () => ({
+        onDragStart(o) {
+          s(e.onDragStart(o));
+        },
+        onDragMove(o, g) {
+          e.onDragMove && s(e.onDragMove(o, g));
+        },
+        onDragOver(o, g) {
+          s(e.onDragOver(o, g));
+        },
+        onDragEnd(o, g) {
+          s(e.onDragEnd(o, g));
+        },
+        onDragCancel(o) {
+          s(e.onDragCancel(o));
+        }
+      }),
+      [s, e]
+    )
+  ), !u)
+    return null;
+  const a = /* @__PURE__ */ D(A, { children: [
+    /* @__PURE__ */ d(
+      q,
+      {
+        id: i,
+        value: t
+      }
+    ),
+    /* @__PURE__ */ d(W, { id: c, announcement: l })
+  ] });
+  return r ? I(a, r) : a;
+}, ce = ({
+  announcements: e,
+  screenReaderInstructions: r,
+  container: i,
+  children: t
+}) => {
+  const s = E(), l = R([]), c = R(""), u = b(
+    (g) => {
+      l.current.push(g);
+    },
+    []
+  ), p = b(
+    (g) => {
+      l.current = l.current.filter(
+        (h) => h !== g
+      );
+    },
+    []
+  ), a = b(
+    (g, h, w) => {
+      for (const N of l.current) {
+        const y = N[g];
+        y && y(h, w);
+      }
+    },
+    []
+  ), o = k(
+    () => ({
+      activeIdRef: c,
+      draggableDescribedById: s,
+      registerMonitor: u,
+      unregisterMonitor: p,
+      triggerEvent: a
+    }),
+    [
+      c,
+      s,
+      u,
+      p,
+      a
+    ]
+  );
+  return /* @__PURE__ */ d(j, { children: /* @__PURE__ */ D(T.Provider, { value: o, children: [
+    t,
+    /* @__PURE__ */ d(
+      Q,
+      {
+        announcements: e,
+        screenReaderInstructions: r,
+        container: i,
+        hiddenTextDescribedById: s
+      }
+    )
+  ] }) });
+}, x = {
+  CARD: "kanban-board-card"
+};
+function ge({
+  className: e,
+  ref: r,
+  ...i
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: m(
+        "flex h-full flex-grow items-start gap-x-2 overflow-x-auto py-1 select-none",
+        e
+      ),
+      draggable: !1,
+      onDragStart: (t) => {
+        t.preventDefault(), t.stopPropagation();
+      },
+      ref: r,
+      ...i
+    }
+  );
+}
+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({
+  className: e,
+  columnId: r,
+  onDropOverColumn: i,
+  ref: t,
+  ...s
+}) {
+  const [l, c] = C(!1), { onDragEnd: u, onDragOver: p } = B();
+  return /* @__PURE__ */ d(
+    "section",
+    {
+      "aria-labelledby": `column-${r}-title`,
+      className: m(
+        U,
+        l && "border-d-primary",
+        e
+      ),
+      draggable: !1,
+      onDragStart: (a) => {
+        a.preventDefault(), a.stopPropagation();
+      },
+      onDragLeave: () => {
+        c(!1);
+      },
+      onDragOver: (a) => {
+        a.dataTransfer.types.includes(x.CARD) && (a.preventDefault(), c(!0), p("", r));
+      },
+      onDrop: (a) => {
+        if (a.dataTransfer.types.includes(x.CARD)) {
+          a.preventDefault(), c(!1);
+          const o = a.dataTransfer.getData(x.CARD);
+          i?.(o), u("", r);
+        }
+      },
+      ref: t,
+      ...s
+    }
+  );
+}
+function pe({
+  className: e,
+  ref: r,
+  ...i
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: m("flex items-center justify-between px-2 py-1", e),
+      ref: r,
+      ...i
+    }
+  );
+}
+function fe({
+  className: e,
+  ref: r,
+  ...i
+}) {
+  return /* @__PURE__ */ d(
+    "ul",
+    {
+      className: m("min-h-0.5 flex-grow overflow-y-auto", e),
+      ref: r,
+      ...i
+    }
+  );
+}
+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({
+  cardId: e,
+  className: r,
+  onDropOverListItem: i,
+  ref: t,
+  ...s
+}) {
+  const [l, c] = C("none"), { onDragOver: u, onDragEnd: p } = B();
+  return /* @__PURE__ */ d(
+    "li",
+    {
+      className: m(
+        X,
+        l === "top" && "border-t-d-primary",
+        l === "bottom" && "border-b-d-primary",
+        r
+      ),
+      onDragLeave: () => {
+        c("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);
+        }
+      },
+      onDrop: (a) => {
+        a.stopPropagation();
+        const o = a.dataTransfer.getData(x.CARD);
+        i?.(o, l), p(JSON.parse(o).id, e), c("none");
+      },
+      ref: t,
+      ...s
+    }
+  );
+}
+const Z = "p-3 text-start";
+function be({
+  className: e,
+  data: r,
+  isActive: i = !1,
+  onEdit: t,
+  actions: s,
+  meta: l,
+  backgroundColor: c,
+  ref: u,
+  children: p,
+  ...a
+}) {
+  const [o, g] = C(!1), [h, w] = C(!1), { draggableDescribedById: N, onDragStart: y } = B(), K = t || s && s.length > 0;
+  return /* @__PURE__ */ D(
+    "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,
+          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(
+          f,
+          v.width / 2,
+          v.height / 2
+        ), setTimeout(() => document.body.removeChild(f), 0), n.currentTarget.blur(), y(r.id);
+      },
+      onDragEnd: () => {
+        g(!1);
+      },
+      onClick: (n) => {
+        o && (n.preventDefault(), n.stopPropagation());
+      },
+      onKeyDown: (n) => {
+        (n.key === "Enter" || n.key === " ") && n.preventDefault();
+      },
+      className: m(
+        "border-d-border text-d-card-foreground rounded-lg border shadow-sm",
+        !c && "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",
+        i && "rotate-1 transform shadow-lg",
+        e
+      ),
+      style: {
+        backgroundColor: c ? `${c}15` : void 0,
+        borderColor: c ? `${c}30` : void 0,
+        ...a.style
+      },
+      ref: u,
+      ...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(
+          "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]",
+            children: [
+              /* @__PURE__ */ d("span", { className: "text-d-foreground/80 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 })
+              ] })
+            ]
+          },
+          f
+        )) }),
+        K && !o && /* @__PURE__ */ D(
+          "div",
+          {
+            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"
+            ),
+            children: [
+              t && /* @__PURE__ */ d(
+                P,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "hover:bg-d-accent size-6",
+                  onClick: (n) => {
+                    n.stopPropagation(), n.preventDefault(), o || t();
+                  },
+                  children: /* @__PURE__ */ d(F, { className: "size-3.5" })
+                }
+              ),
+              s && s.length > 0 && /* @__PURE__ */ D(z, { open: h, onOpenChange: w, children: [
+                /* @__PURE__ */ d(L, { asChild: !0, children: /* @__PURE__ */ d(
+                  P,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "hover:bg-d-accent size-6",
+                    onClick: (n) => {
+                      n.stopPropagation();
+                    },
+                    children: /* @__PURE__ */ d(H, { className: "size-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ d(
+                  _,
+                  {
+                    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,
+                      {
+                        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);
+                        },
+                        children: [
+                          n.icon && /* @__PURE__ */ d("span", { className: "size-4", children: n.icon }),
+                          n.label
+                        ]
+                      },
+                      f
+                    )) })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function De({
+  className: e,
+  ...r
+}) {
+  return /* @__PURE__ */ d(
+    S,
+    {
+      variant: "small",
+      as: "h3",
+      className: m("text-[13px] font-semibold", e),
+      ...r
+    }
+  );
+}
+function he({
+  className: e,
+  ...r
+}) {
+  return /* @__PURE__ */ d(
+    S,
+    {
+      variant: "caption",
+      as: "p",
+      className: m(
+        "text-d-muted-foreground leading-relaxed whitespace-pre-wrap",
+        e
+      ),
+      ...r
+    }
+  );
+}
+export {
+  ge as KanbanBoard,
+  Q as KanbanBoardAccessibility,
+  be as KanbanBoardCard,
+  he as KanbanBoardCardDescription,
+  De as KanbanBoardCardTitle,
+  ue as KanbanBoardColumn,
+  pe 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
+};