@krizaka/ui 3.3.0 → 3.4.0

package/dist/kanban.d.ts

@@ -0,0 +1,132 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const kanban: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    column: string;
+    header: string;
+    title: string;
+    count: string;
+    list: string;
+    card: string;
+    empty: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    column: string;
+    header: string;
+    title: string;
+    count: string;
+    list: string;
+    card: string;
+    empty: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    column: string;
+    header: string;
+    title: string;
+    count: string;
+    list: string;
+    card: string;
+    empty: string;
+}>>;
+type KanbanColumn = {
+    /** A stable id. */
+    id: string;
+    /** Its name — passed translated (“To review”). */
+    title: string;
+    /** The most cards it should hold: the count turns to danger past it. */
+    limit?: number;
+};
+type KanbanMove = {
+    /** The card moved. */
+    cardId: string;
+    /** Where it came from. */
+    from: string;
+    /** The column it went to. */
+    to: string;
+    /** Its position in that column (0 = top). */
+    index: number;
+};
+type KanbanLabels = {
+    /** The hint read on a card: how to move it with the keyboard. */
+    instructions: string;
+    /** Announced when a card is picked up: `(card, column) => …`. */
+    grabbed: (card: string, column: string) => string;
+    /** Announced as it moves: `(card, column, position, total) => …`. */
+    moved: (card: string, column: string, position: number, total: number) => string;
+    /** Announced when it is dropped. */
+    dropped: (card: string, column: string, position: number) => string;
+    /** Announced when the move is cancelled. */
+    cancelled: (card: string) => string;
+    /** A column without card (“No card”). */
+    empty: string;
+};
+declare const kanbanLabels: KanbanLabels;
+type KanbanProps<T> = {
+    /** The columns, in order. */
+    columns: readonly KanbanColumn[];
+    /** The cards, in their order within each column. */
+    cards: readonly T[];
+    /** A card's id. */
+    getId: (card: T) => string;
+    /** A card's column. */
+    getColumn: (card: T) => string;
+    /** A card's name, for the announcements. */
+    getTitle: (card: T) => string;
+    /** What a card shows. */
+    renderCard: (card: T) => React.ReactNode;
+    /** Called when a card is dropped somewhere new: update the data here. */
+    onMove: (move: KanbanMove) => void;
+    /** The board's accessible name (“Moderation queue”). */
+    "aria-label": string;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<KanbanLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/**
+ * A board of cards in columns — a moderation queue, a release plan: drag and drop with the pointer, or Space and the
+ * arrow keys, every step announced. Column limits show in the counts.
+ */
+declare function Kanban<T>({ columns, cards, getId, getColumn, getTitle, renderCard, onMove, "aria-label": label, labels: words, className }: KanbanProps<T>): React.JSX.Element;
+
+export { Kanban, type KanbanColumn, type KanbanLabels, type KanbanMove, type KanbanProps, kanban, kanbanLabels };

package/dist/kanban.js

@@ -0,0 +1,187 @@
+"use client";
+
+// src/kanban/kanban.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var kanban = tv({
+  slots: {
+    root: "flex w-full gap-3 overflow-x-auto pb-2",
+    column: "flex w-72 shrink-0 flex-col rounded-xl border border-border-default bg-surface-1 data-[over]:border-accent data-[over]:bg-accent-soft/40",
+    header: "flex items-center gap-2 px-3 pb-2 pt-3",
+    title: "min-w-0 flex-1 truncate text-sm font-semibold text-fg",
+    count: "rounded-full bg-surface-3 px-2 text-xs font-semibold tabular-nums text-fg-secondary data-[over-limit]:bg-danger data-[over-limit]:text-on-accent",
+    list: "m-0 flex min-h-16 list-none flex-col gap-2 p-2 pt-0",
+    card: "cursor-grab rounded-lg border border-border-default bg-surface-0 p-3 text-sm text-fg shadow-xs outline-hidden transition-shadow focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing data-[grabbed]:ring-2 data-[grabbed]:ring-accent data-[grabbed]:shadow-lg data-[dragging]:opacity-40",
+    empty: "rounded-lg border border-dashed border-border-default px-3 py-4 text-center text-xs text-fg-secondary"
+  }
+});
+var kanbanLabels = {
+  instructions: "Press Space to pick it up, the arrow keys to move it, Space to drop it, Escape to cancel.",
+  grabbed: (card, column) => `${card} picked up, in ${column}.`,
+  moved: (card, column, position, total) => `${card}: ${column}, position ${position} of ${total}.`,
+  dropped: (card, column, position) => `${card} dropped in ${column}, position ${position}.`,
+  cancelled: (card) => `Move of ${card} cancelled.`,
+  empty: "No card"
+};
+function Kanban({ columns, cards, getId, getColumn, getTitle, renderCard, onMove, "aria-label": label, labels: words, className }) {
+  const labels = { ...kanbanLabels, ...words };
+  const s = kanban();
+  const instructionsId = React.useId();
+  const [grab, setGrab] = React.useState(null);
+  const [dragging, setDragging] = React.useState(null);
+  const [over, setOver] = React.useState(null);
+  const [message, setMessage] = React.useState("");
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  const byColumn = (column, without) => cards.filter((c) => getColumn(c) === column && getId(c) !== without);
+  const titleOf = (id) => {
+    const card = cards.find((c) => getId(c) === id);
+    return card ? getTitle(card) : id;
+  };
+  const columnTitle = (id) => columns.find((c) => c.id === id)?.title ?? id;
+  const placementOf = (id) => {
+    const card = cards.find((c) => getId(c) === id);
+    const column = getColumn(card);
+    return { column, index: byColumn(column).findIndex((c) => getId(c) === id) };
+  };
+  const commit = (id, from, to) => {
+    if (from.column !== to.column || from.index !== to.index) onMove({ cardId: id, from: from.column, to: to.column, index: to.index });
+  };
+  const shown = (column) => {
+    const list = byColumn(column, grab?.id);
+    if (grab && grab.at.column === column) {
+      const card = cards.find((c) => getId(c) === grab.id);
+      if (card) list.splice(grab.at.index, 0, card);
+    }
+    return list;
+  };
+  React.useEffect(() => {
+    if (grab) refs.current.get(grab.id)?.focus();
+  }, [grab]);
+  const onKeyDown = (event, id) => {
+    const title = titleOf(id);
+    if (!grab) {
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        const origin2 = placementOf(id);
+        setGrab({ id, origin: origin2, at: origin2 });
+        setMessage(labels.grabbed(title, columnTitle(origin2.column)));
+      }
+      return;
+    }
+    const { at, origin } = grab;
+    const columnIndex = columns.findIndex((c) => c.id === at.column);
+    let next = null;
+    if (event.key === "ArrowLeft" && columnIndex > 0) next = { column: columns[columnIndex - 1].id, index: Math.min(at.index, byColumn(columns[columnIndex - 1].id, id).length) };
+    if (event.key === "ArrowRight" && columnIndex < columns.length - 1) next = { column: columns[columnIndex + 1].id, index: Math.min(at.index, byColumn(columns[columnIndex + 1].id, id).length) };
+    if (event.key === "ArrowUp" && at.index > 0) next = { ...at, index: at.index - 1 };
+    if (event.key === "ArrowDown" && at.index < byColumn(at.column, id).length) next = { ...at, index: at.index + 1 };
+    if (next) {
+      event.preventDefault();
+      setGrab({ ...grab, at: next });
+      setMessage(labels.moved(title, columnTitle(next.column), next.index + 1, byColumn(next.column, id).length + 1));
+      return;
+    }
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      setGrab(null);
+      commit(id, origin, at);
+      setMessage(labels.dropped(title, columnTitle(at.column), at.index + 1));
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setGrab(null);
+      setMessage(labels.cancelled(title));
+    }
+  };
+  const indexAt = (column, y) => {
+    const list = byColumn(column, dragging ?? void 0);
+    const i = list.findIndex((c) => {
+      const box = refs.current.get(getId(c))?.getBoundingClientRect();
+      return box ? y < box.top + box.height / 2 : false;
+    });
+    return i === -1 ? list.length : i;
+  };
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": label, className: s.root({ className }), children: [
+    /* @__PURE__ */ jsx("p", { id: instructionsId, className: "sr-only", children: labels.instructions }),
+    /* @__PURE__ */ jsx("p", { className: "sr-only", "aria-live": "assertive", children: message }),
+    columns.map((column) => {
+      const list = shown(column.id);
+      const overLimit = column.limit !== void 0 && list.length > column.limit;
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-label": column.title,
+          "data-over": over?.column === column.id || void 0,
+          className: s.column(),
+          onDragOver: (e) => {
+            if (!dragging) return;
+            e.preventDefault();
+            setOver({ column: column.id, index: indexAt(column.id, e.clientY) });
+          },
+          onDragLeave: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) setOver(null);
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            if (dragging) commit(dragging, placementOf(dragging), { column: column.id, index: indexAt(column.id, e.clientY) });
+            setDragging(null);
+            setOver(null);
+          },
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: s.header(), children: [
+              /* @__PURE__ */ jsx("h3", { className: s.title(), children: column.title }),
+              /* @__PURE__ */ jsx("span", { className: s.count(), "data-over-limit": overLimit || void 0, children: column.limit !== void 0 ? `${list.length}/${column.limit}` : list.length })
+            ] }),
+            /* @__PURE__ */ jsxs("ul", { className: s.list(), children: [
+              list.length === 0 ? /* @__PURE__ */ jsx("li", { className: s.empty(), children: labels.empty }) : null,
+              list.map((card) => {
+                const id = getId(card);
+                return /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    ref: (el) => {
+                      if (el) refs.current.set(id, el);
+                      else refs.current.delete(id);
+                    },
+                    tabIndex: 0,
+                    draggable: true,
+                    "aria-describedby": instructionsId,
+                    "aria-roledescription": "card",
+                    "data-grabbed": grab?.id === id || void 0,
+                    "data-dragging": dragging === id || void 0,
+                    className: s.card(),
+                    onKeyDown: (e) => onKeyDown(e, id),
+                    onFocus: () => {
+                      if (grab && grab.id !== id) {
+                        setMessage(labels.cancelled(titleOf(grab.id)));
+                        setGrab(null);
+                      }
+                    },
+                    onDragStart: (e) => {
+                      e.dataTransfer.effectAllowed = "move";
+                      e.dataTransfer.setData("text/plain", id);
+                      setDragging(id);
+                    },
+                    onDragEnd: () => {
+                      setDragging(null);
+                      setOver(null);
+                    },
+                    children: renderCard(card)
+                  },
+                  id
+                );
+              })
+            ] })
+          ]
+        },
+        column.id
+      );
+    })
+  ] });
+}
+export {
+  Kanban,
+  kanban,
+  kanbanLabels
+};
+//# sourceMappingURL=kanban.js.map

package/dist/kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/kanban/kanban.tsx"],"sourcesContent":["// Client (the drag, the keyboard move, the announcements). Cards in columns that move by drag and drop — and by the\n// keyboard: Space picks a card up, the arrows carry it (← → between columns, ↑ ↓ within one), Space drops it, Esc puts it\n// back. Every move is announced in words. The app owns the data: `onMove` says where a card went.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const kanban = tv({\n  slots: {\n    root: \"flex w-full gap-3 overflow-x-auto pb-2\",\n    column: \"flex w-72 shrink-0 flex-col rounded-xl border border-border-default bg-surface-1 data-[over]:border-accent data-[over]:bg-accent-soft/40\",\n    header: \"flex items-center gap-2 px-3 pb-2 pt-3\",\n    title: \"min-w-0 flex-1 truncate text-sm font-semibold text-fg\",\n    count: \"rounded-full bg-surface-3 px-2 text-xs font-semibold tabular-nums text-fg-secondary data-[over-limit]:bg-danger data-[over-limit]:text-on-accent\",\n    list: \"m-0 flex min-h-16 list-none flex-col gap-2 p-2 pt-0\",\n    card:\n      \"cursor-grab rounded-lg border border-border-default bg-surface-0 p-3 text-sm text-fg shadow-xs outline-hidden transition-shadow \" +\n      \"focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing data-[grabbed]:ring-2 data-[grabbed]:ring-accent data-[grabbed]:shadow-lg data-[dragging]:opacity-40\",\n    empty: \"rounded-lg border border-dashed border-border-default px-3 py-4 text-center text-xs text-fg-secondary\",\n  },\n});\n\nexport type KanbanColumn = {\n  /** A stable id. */\n  id: string;\n  /** Its name — passed translated (“To review”). */\n  title: string;\n  /** The most cards it should hold: the count turns to danger past it. */\n  limit?: number;\n};\n\nexport type KanbanMove = {\n  /** The card moved. */\n  cardId: string;\n  /** Where it came from. */\n  from: string;\n  /** The column it went to. */\n  to: string;\n  /** Its position in that column (0 = top). */\n  index: number;\n};\n\nexport type KanbanLabels = {\n  /** The hint read on a card: how to move it with the keyboard. */\n  instructions: string;\n  /** Announced when a card is picked up: `(card, column) => …`. */\n  grabbed: (card: string, column: string) => string;\n  /** Announced as it moves: `(card, column, position, total) => …`. */\n  moved: (card: string, column: string, position: number, total: number) => string;\n  /** Announced when it is dropped. */\n  dropped: (card: string, column: string, position: number) => string;\n  /** Announced when the move is cancelled. */\n  cancelled: (card: string) => string;\n  /** A column without card (“No card”). */\n  empty: string;\n};\n\nexport const kanbanLabels: KanbanLabels = {\n  instructions: \"Press Space to pick it up, the arrow keys to move it, Space to drop it, Escape to cancel.\",\n  grabbed: (card, column) => `${card} picked up, in ${column}.`,\n  moved: (card, column, position, total) => `${card}: ${column}, position ${position} of ${total}.`,\n  dropped: (card, column, position) => `${card} dropped in ${column}, position ${position}.`,\n  cancelled: (card) => `Move of ${card} cancelled.`,\n  empty: \"No card\",\n};\n\nexport type KanbanProps<T> = {\n  /** The columns, in order. */\n  columns: readonly KanbanColumn[];\n  /** The cards, in their order within each column. */\n  cards: readonly T[];\n  /** A card's id. */\n  getId: (card: T) => string;\n  /** A card's column. */\n  getColumn: (card: T) => string;\n  /** A card's name, for the announcements. */\n  getTitle: (card: T) => string;\n  /** What a card shows. */\n  renderCard: (card: T) => React.ReactNode;\n  /** Called when a card is dropped somewhere new: update the data here. */\n  onMove: (move: KanbanMove) => void;\n  /** The board's accessible name (“Moderation queue”). */\n  \"aria-label\": string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<KanbanLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\ntype Placement = { column: string; index: number };\n\n/**\n * A board of cards in columns — a moderation queue, a release plan: drag and drop with the pointer, or Space and the\n * arrow keys, every step announced. Column limits show in the counts.\n */\nexport function Kanban<T>({ columns, cards, getId, getColumn, getTitle, renderCard, onMove, \"aria-label\": label, labels: words, className }: KanbanProps<T>) {\n  const labels = { ...kanbanLabels, ...words };\n  const s = kanban();\n  const instructionsId = React.useId();\n  const [grab, setGrab] = React.useState<{ id: string; origin: Placement; at: Placement } | null>(null);\n  const [dragging, setDragging] = React.useState<string | null>(null);\n  const [over, setOver] = React.useState<Placement | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const refs = React.useRef(new Map<string, HTMLLIElement>());\n  const byColumn = (column: string, without?: string) => cards.filter((c) => getColumn(c) === column && getId(c) !== without);\n  const titleOf = (id: string) => {\n    const card = cards.find((c) => getId(c) === id);\n    return card ? getTitle(card) : id;\n  };\n  const columnTitle = (id: string) => columns.find((c) => c.id === id)?.title ?? id;\n  const placementOf = (id: string): Placement => {\n    const card = cards.find((c) => getId(c) === id)!;\n    const column = getColumn(card);\n    return { column, index: byColumn(column).findIndex((c) => getId(c) === id) };\n  };\n  const commit = (id: string, from: Placement, to: Placement) => {\n    if (from.column !== to.column || from.index !== to.index) onMove({ cardId: id, from: from.column, to: to.column, index: to.index });\n  };\n  // The cards of a column as shown, with the grabbed card at its keyboard position.\n  const shown = (column: string) => {\n    const list = byColumn(column, grab?.id);\n    if (grab && grab.at.column === column) {\n      const card = cards.find((c) => getId(c) === grab.id);\n      if (card) list.splice(grab.at.index, 0, card);\n    }\n    return list;\n  };\n  React.useEffect(() => {\n    if (grab) refs.current.get(grab.id)?.focus();\n  }, [grab]);\n\n  const onKeyDown = (event: React.KeyboardEvent, id: string) => {\n    const title = titleOf(id);\n    if (!grab) {\n      if (event.key === \" \" || event.key === \"Enter\") {\n        event.preventDefault();\n        const origin = placementOf(id);\n        setGrab({ id, origin, at: origin });\n        setMessage(labels.grabbed(title, columnTitle(origin.column)));\n      }\n      return;\n    }\n    const { at, origin } = grab;\n    const columnIndex = columns.findIndex((c) => c.id === at.column);\n    let next: Placement | null = null;\n    if (event.key === \"ArrowLeft\" && columnIndex > 0) next = { column: columns[columnIndex - 1]!.id, index: Math.min(at.index, byColumn(columns[columnIndex - 1]!.id, id).length) };\n    if (event.key === \"ArrowRight\" && columnIndex < columns.length - 1) next = { column: columns[columnIndex + 1]!.id, index: Math.min(at.index, byColumn(columns[columnIndex + 1]!.id, id).length) };\n    if (event.key === \"ArrowUp\" && at.index > 0) next = { ...at, index: at.index - 1 };\n    if (event.key === \"ArrowDown\" && at.index < byColumn(at.column, id).length) next = { ...at, index: at.index + 1 };\n    if (next) {\n      event.preventDefault();\n      setGrab({ ...grab, at: next });\n      setMessage(labels.moved(title, columnTitle(next.column), next.index + 1, byColumn(next.column, id).length + 1));\n      return;\n    }\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      setGrab(null);\n      commit(id, origin, at);\n      setMessage(labels.dropped(title, columnTitle(at.column), at.index + 1));\n    } else if (event.key === \"Escape\") {\n      event.preventDefault();\n      setGrab(null);\n      setMessage(labels.cancelled(title));\n    }\n  };\n\n  const indexAt = (column: string, y: number) => {\n    const list = byColumn(column, dragging ?? undefined);\n    const i = list.findIndex((c) => {\n      const box = refs.current.get(getId(c))?.getBoundingClientRect();\n      return box ? y < box.top + box.height / 2 : false;\n    });\n    return i === -1 ? list.length : i;\n  };\n\n  return (\n    <div role=\"group\" aria-label={label} className={s.root({ className })}>\n      <p id={instructionsId} className=\"sr-only\">\n        {labels.instructions}\n      </p>\n      <p className=\"sr-only\" aria-live=\"assertive\">\n        {message}\n      </p>\n      {columns.map((column) => {\n        const list = shown(column.id);\n        const overLimit = column.limit !== undefined && list.length > column.limit;\n        return (\n          <section\n            key={column.id}\n            aria-label={column.title}\n            data-over={over?.column === column.id || undefined}\n            className={s.column()}\n            onDragOver={(e) => {\n              if (!dragging) return;\n              e.preventDefault();\n              setOver({ column: column.id, index: indexAt(column.id, e.clientY) });\n            }}\n            onDragLeave={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setOver(null);\n            }}\n            onDrop={(e) => {\n              e.preventDefault();\n              if (dragging) commit(dragging, placementOf(dragging), { column: column.id, index: indexAt(column.id, e.clientY) });\n              setDragging(null);\n              setOver(null);\n            }}\n          >\n            <header className={s.header()}>\n              <h3 className={s.title()}>{column.title}</h3>\n              <span className={s.count()} data-over-limit={overLimit || undefined}>\n                {column.limit !== undefined ? `${list.length}/${column.limit}` : list.length}\n              </span>\n            </header>\n            <ul className={s.list()}>\n              {list.length === 0 ? <li className={s.empty()}>{labels.empty}</li> : null}\n              {list.map((card) => {\n                const id = getId(card);\n                return (\n                  <li\n                    key={id}\n                    ref={(el) => {\n                      if (el) refs.current.set(id, el);\n                      else refs.current.delete(id);\n                    }}\n                    tabIndex={0}\n                    draggable\n                    aria-describedby={instructionsId}\n                    aria-roledescription=\"card\"\n                    data-grabbed={grab?.id === id || undefined}\n                    data-dragging={dragging === id || undefined}\n                    className={s.card()}\n                    onKeyDown={(e) => onKeyDown(e, id)}\n                    onFocus={() => {\n                      // Tab to another card while one is carried: the carried one goes back.\n                      if (grab && grab.id !== id) {\n                        setMessage(labels.cancelled(titleOf(grab.id)));\n                        setGrab(null);\n                      }\n                    }}\n                    onDragStart={(e) => {\n                      e.dataTransfer.effectAllowed = \"move\";\n                      e.dataTransfer.setData(\"text/plain\", id);\n                      setDragging(id);\n                    }}\n                    onDragEnd={() => {\n                      setDragging(null);\n                      setOver(null);\n                    }}\n                  >\n                    {renderCard(card)}\n                  </li>\n                );\n              })}\n            </ul>\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":["origin"]}

package/dist/list.d.ts

@@ -0,0 +1,153 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const list: tailwind_variants.TVReturnType<{
+    density: {
+        comfortable: {
+            item: string;
+        };
+        compact: {
+            item: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    ul: string;
+    item: string;
+    main: string;
+    leading: string;
+    text: string;
+    title: string;
+    description: string;
+    meta: string;
+    actions: string;
+    chevron: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}, undefined, {
+    density: {
+        comfortable: {
+            item: string;
+        };
+        compact: {
+            item: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    ul: string;
+    item: string;
+    main: string;
+    leading: string;
+    text: string;
+    title: string;
+    description: string;
+    meta: string;
+    actions: string;
+    chevron: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    density: {
+        comfortable: {
+            item: string;
+        };
+        compact: {
+            item: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    ul: string;
+    item: string;
+    main: string;
+    leading: string;
+    text: string;
+    title: string;
+    description: string;
+    meta: string;
+    actions: string;
+    chevron: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}>>;
+type ListLabels = {
+    /** The checkbox of a row: `(title) => "Select " + title`. */
+    selectRow: (title: string) => string;
+    /** Read while the rows load (“Loading”). */
+    loading: string;
+    /** The default empty state (“Nothing to show”). */
+    empty: string;
+};
+declare const listLabels: ListLabels;
+type ListRow = {
+    /** The row's main line — passed translated. */
+    title: string;
+    /** A second line (a detail, a status in words). */
+    description?: React.ReactNode;
+    /** Before the text: an `Avatar`, an icon, a thumbnail. */
+    leading?: React.ReactNode;
+    /** After the text: a time, an amount, a `Badge`. */
+    meta?: React.ReactNode;
+    /** Secondary actions beside the row (icon buttons, a menu) — outside the main action. */
+    actions?: React.ReactNode;
+    /** The row opens this address (its main action is a link). */
+    href?: string;
+    /** The row's main action (a button), when it is not a link. */
+    onSelect?: () => void;
+};
+type ListProps<T> = {
+    /** The records, in order. */
+    items: readonly T[];
+    /** A stable id per record: the React key and the selection's value. */
+    getId: (item: T) => string;
+    /** What a record shows: its title, line, visuals, details, actions and where it leads. */
+    row: (item: T) => ListRow;
+    /** The list's accessible name (“Jobs”). */
+    "aria-label": string;
+    /** comfortable (default: 64 px rows with a line) · compact (44 px: dense admin lists). */
+    density?: "comfortable" | "compact";
+    /** A checkbox per row. */
+    selectable?: boolean;
+    /** The ids selected (controlled). */
+    selected?: readonly string[];
+    /** The ids selected at first, uncontrolled. */
+    defaultSelected?: readonly string[];
+    /** Called with the new selection. */
+    onSelectedChange?: (selected: string[]) => void;
+    /** Shows a chevron on the rows that lead somewhere. */
+    chevrons?: boolean;
+    /** Loading: `loadingRows` skeleton rows and `aria-busy`. */
+    loading?: boolean;
+    /** How many skeleton rows. Default 5. */
+    loadingRows?: number;
+    /** A failure in place of the rows (an `Alert` with a retry); announced. */
+    error?: React.ReactNode;
+    /** Shown when there is no record (an `EmptyState`). */
+    empty?: React.ReactNode;
+    /** Renders only the rows in view: fixed `rowHeight`, a scrolling region of `height` px. */
+    virtualize?: {
+        rowHeight: number;
+        height: number;
+        overscan?: number;
+    };
+    /** Under the list: a `Pagination`, a “Load more” button, a total. */
+    footer?: React.ReactNode;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<ListLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A list of records: dense or comfortable, selectable, actions beside each row, windowed when long, with its states. */
+declare function List<T>({ items, getId, row, "aria-label": label, density, selectable, selected: selectedProp, defaultSelected, onSelectedChange, chevrons, loading, loadingRows, error, empty, virtualize, footer, labels: given, className, }: ListProps<T>): React.JSX.Element;
+
+export { List, type ListLabels, type ListProps, type ListRow, list, listLabels };

package/dist/list.js

@@ -0,0 +1,130 @@
+"use client";
+import {
+  Checkbox
+} from "./chunk-7Z4KHPFC.js";
+import {
+  useControllable
+} from "./chunk-BRKMQ6JV.js";
+import {
+  ChevronGlyph
+} from "./chunk-CPA5CF35.js";
+
+// src/list/list.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var list = tv({
+  slots: {
+    root: "w-full overflow-hidden rounded-xl border border-border-default bg-surface-1",
+    scroller: "overflow-y-auto focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    ul: "m-0 list-none divide-y divide-border-subtle p-0",
+    item: "relative flex items-center gap-3 px-4 transition-colors data-[state=selected]:bg-accent-soft has-[[data-main]:hover]:bg-surface-2/60",
+    main: "flex min-w-0 flex-1 items-center gap-3 self-stretch text-left text-fg outline-hidden focus-visible:after:absolute focus-visible:after:inset-0.5 focus-visible:after:rounded-lg focus-visible:after:ring-2 focus-visible:after:ring-ring",
+    leading: "flex shrink-0 items-center justify-center text-fg-secondary",
+    text: "flex min-w-0 flex-1 flex-col",
+    title: "truncate text-sm font-semibold text-fg",
+    description: "line-clamp-2 text-xs text-fg-secondary",
+    meta: "flex shrink-0 flex-col items-end gap-1 text-xs tabular-nums text-fg-secondary",
+    actions: "relative z-10 flex shrink-0 items-center gap-1",
+    chevron: "h-4 w-4 shrink-0 text-fg-muted",
+    message: "px-4 py-10 text-center text-sm text-fg-secondary",
+    skeleton: "animate-pulse rounded bg-surface-3 motion-reduce:animate-none",
+    footer: "border-t border-border-default px-4 py-3"
+  },
+  variants: {
+    density: {
+      comfortable: { item: "min-h-16 py-2.5" },
+      compact: { item: "min-h-11 py-1.5", description: "line-clamp-1" }
+    }
+  },
+  defaultVariants: { density: "comfortable" }
+});
+var listLabels = { selectRow: (title) => `Select ${title}`, loading: "Loading", empty: "Nothing to show" };
+function List({
+  items,
+  getId,
+  row,
+  "aria-label": label,
+  density,
+  selectable,
+  selected: selectedProp,
+  defaultSelected = [],
+  onSelectedChange,
+  chevrons,
+  loading,
+  loadingRows = 5,
+  error,
+  empty,
+  virtualize,
+  footer,
+  labels: given,
+  className
+}) {
+  const labels = { ...listLabels, ...given };
+  const s = list({ density });
+  const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const chosen = new Set(selected);
+  const toggle = (id) => setSelected(chosen.has(id) ? selected.filter((x) => x !== id) : [...selected, id]);
+  let shown = items;
+  let before = 0;
+  let after = 0;
+  if (virtualize && !loading) {
+    const overscan = virtualize.overscan ?? 6;
+    const start = Math.max(0, Math.floor(scrollTop / virtualize.rowHeight) - overscan);
+    const end = Math.min(items.length, Math.ceil((scrollTop + virtualize.height) / virtualize.rowHeight) + overscan);
+    shown = items.slice(start, end);
+    before = start * virtualize.rowHeight;
+    after = (items.length - end) * virtualize.rowHeight;
+  }
+  let body;
+  if (loading) {
+    body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs("li", { "aria-hidden": true, className: s.item(), children: [
+      /* @__PURE__ */ jsx("div", { className: s.skeleton({ className: "h-9 w-9 rounded-full" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: s.skeleton({ className: "h-3.5 w-2/5" }) }),
+        /* @__PURE__ */ jsx("div", { className: s.skeleton({ className: "h-3 w-3/5" }) })
+      ] })
+    ] }, `loading-${i}`));
+  } else if (error) {
+    body = /* @__PURE__ */ jsx("li", { className: s.message(), children: /* @__PURE__ */ jsx("div", { role: "alert", children: error }) });
+  } else if (items.length === 0) {
+    body = /* @__PURE__ */ jsx("li", { className: s.message(), children: empty ?? labels.empty });
+  } else {
+    body = shown.map((item) => {
+      const id = getId(item);
+      const r = row(item);
+      const isChosen = chosen.has(id);
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        r.leading ? /* @__PURE__ */ jsx("span", { className: s.leading(), children: r.leading }) : null,
+        /* @__PURE__ */ jsxs("span", { className: s.text(), children: [
+          /* @__PURE__ */ jsx("span", { className: s.title(), children: r.title }),
+          r.description ? /* @__PURE__ */ jsx("span", { className: s.description(), children: r.description }) : null
+        ] }),
+        r.meta ? /* @__PURE__ */ jsx("span", { className: s.meta(), children: r.meta }) : null,
+        chevrons && (r.href || r.onSelect) ? /* @__PURE__ */ jsx(ChevronGlyph, { direction: "right", className: s.chevron() }) : null
+      ] });
+      return /* @__PURE__ */ jsxs("li", { "data-state": isChosen ? "selected" : void 0, className: s.item(), style: virtualize ? { height: virtualize.rowHeight } : void 0, children: [
+        selectable ? /* @__PURE__ */ jsx(Checkbox, { checked: isChosen, onCheckedChange: () => toggle(id), "aria-label": labels.selectRow(r.title), className: "relative z-10" }) : null,
+        r.href ? /* @__PURE__ */ jsx("a", { href: r.href, "data-main": "", className: s.main(), children: content }) : r.onSelect ? /* @__PURE__ */ jsx("button", { type: "button", "data-main": "", onClick: r.onSelect, className: s.main(), children: content }) : /* @__PURE__ */ jsx("div", { className: s.main(), children: content }),
+        r.actions ? /* @__PURE__ */ jsx("div", { className: s.actions(), children: r.actions }) : null
+      ] }, id);
+    });
+  }
+  const ul = /* @__PURE__ */ jsxs("ul", { "aria-label": label, "aria-busy": loading || void 0, className: s.ul(), children: [
+    before > 0 ? /* @__PURE__ */ jsx("li", { "aria-hidden": true, style: { height: before } }) : null,
+    body,
+    after > 0 ? /* @__PURE__ */ jsx("li", { "aria-hidden": true, style: { height: after } }) : null
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), children: [
+    loading ? /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", children: labels.loading }) : null,
+    virtualize ? /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "region", "aria-label": label, className: s.scroller(), style: { height: virtualize.height }, onScroll: (e) => setScrollTop(e.currentTarget.scrollTop), children: ul }) : ul,
+    footer ? /* @__PURE__ */ jsx("div", { className: s.footer(), children: footer }) : null
+  ] });
+}
+export {
+  List,
+  list,
+  listLabels
+};
+//# sourceMappingURL=list.js.map