@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/components/line-items.d.ts

@@ -0,0 +1,114 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Key } from 'react';
+
+/** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */
+interface LineItemsLabels {
+    /** The dashed add button. */
+    add: string;
+    /** The remove button's name for one row. */
+    remove: (row: number) => string;
+    /** Its name while it waits for the second press (`confirmRemove`). */
+    confirmRemove: (row: number) => string;
+    /** A row's group name, when the caller gives no `rowLabel`. */
+    row: (row: number) => string;
+    /** The name a cell's field should carry: the column, and which row. */
+    cell: (column: string, row: number) => string;
+    /** The totals row's label, and its group name. */
+    totals: string;
+}
+declare const DEFAULT_LINE_ITEMS_LABELS: LineItemsLabels;
+/** What a column's `render` receives for one row. */
+interface LineItemCellContext<T> {
+    item: T;
+    /** 0-based. */
+    index: number;
+    /** The accessible name for the cell's field — "Debit, row 2". The header is
+     *  hidden from assistive tech (each row repeats it), so the field has to carry it:
+     *  `<Input aria-label={label} … />`. */
+    label: string;
+}
+interface LineItemsColumn<T> {
+    /** Stable id: the React key, and the key into `totals`. */
+    key: string;
+    /** The column header (and the small label over the cell once the rows stack). */
+    header: ReactNode;
+    /** The column's name for {@link LineItemCellContext.label}, when `header` is not a
+     *  string. */
+    label?: string;
+    /** The grid track once the rows are wide enough to be a table. Default
+     *  `minmax(0,1fr)`; `"7rem"` for an amount. */
+    width?: string;
+    /** `end` for figures: the header and the totals cell end-align with the field. */
+    align?: "start" | "end";
+    render: (ctx: LineItemCellContext<T>) => ReactNode;
+}
+interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    items: readonly T[];
+    columns: readonly LineItemsColumn<T>[];
+    /** The row's React key. Default: the item's `id` (react-hook-form's `useFieldArray`
+     *  `fields` carry one), else its index. */
+    getKey?: (item: T, index: number) => Key;
+    /** Append a row. Omitted: no add button. The first field of the new row is focused. */
+    onAdd?: () => void;
+    /** Remove the row at `index`. Omitted: no remove buttons. */
+    onRemove?: (index: number) => void;
+    /** Remove is disabled at or below this many rows (a journal entry needs two).
+     *  Default 0. */
+    minItems?: number;
+    /** Add is disabled at this many rows. */
+    maxItems?: number;
+    /**
+     * Ask before a row goes:
+     *  - `true`: the remove button asks for a second press — it fills red and its name
+     *    becomes `lineItems.confirmRemove`; Escape, or leaving it, calls it off.
+     *  - a function: called with the row, and the row goes only if it answers `true`
+     *    (`(item, i) => confirm({ title: … , tone: "danger" })` with `useConfirm`).
+     */
+    confirmRemove?: boolean | ((item: T, index: number) => boolean | Promise<boolean>);
+    /** The add button's text. Default `lineItems.add`. */
+    addLabel?: ReactNode;
+    /** A row's group name ("Line 2"). Default `lineItems.row`. */
+    rowLabel?: (index: number, item: T) => string;
+    /** A totals row under the lines, one entry per column `key`. The first column
+     *  without an entry carries {@link totalsLabel}. Omitted: no totals row. */
+    totals?: Partial<Record<string, ReactNode>>;
+    /** Default `lineItems.totals`, "Total". */
+    totalsLabel?: ReactNode;
+    /** Shown in place of the rows when there are none. */
+    empty?: ReactNode;
+    /** A message about the list as a whole ("The entry does not balance"). */
+    error?: ReactNode;
+    /** Disables add and remove (the fields are the caller's to disable). */
+    disabled?: boolean;
+    labels?: Partial<LineItemsLabels>;
+}
+/**
+ * An editable list of lines — journal entry lines, lease components, invoice
+ * positions, budget rows: column headers, a row of fields per item, a remove button
+ * per row, a dashed "add" button under them, and an optional totals row.
+ *
+ * Presentation only: the rows are the caller's `items` and the fields are the
+ * caller's, rendered per column. So it works over plain state —
+ *
+ * ```tsx
+ * <LineItems items={lines} columns={cols} onAdd={() => setLines([...lines, blank()])}
+ *   onRemove={(i) => setLines(lines.filter((_, j) => j !== i))} minItems={2} />
+ * ```
+ *
+ * — and over react-hook-form's `useFieldArray` alike (`items={fields}`, `onAdd={() =>
+ * append(blank())}`, `onRemove={remove}`), for which `@eifi1/ui-kit/rhf` has
+ * `RhfLineItems`.
+ *
+ * On a wide pane the rows are a grid under the headers; on a narrow one (a container
+ * query, so a dialog stacks where it is cramped) each row stacks its fields, each
+ * under a small copy of its header. The headers are `aria-hidden`: every row is a
+ * named group and every field is named by `render`'s `label` ("Debit, row 2"), which
+ * is what a screen reader needs — a header row it would read once, out of context.
+ *
+ * Keyboard: after Add, focus lands in the new row's first field; after a remove, on
+ * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a
+ * row.
+ */
+declare function LineItems<T>({ items, columns, getKey, onAdd, onRemove, minItems, maxItems, confirmRemove, addLabel, rowLabel, totals, totalsLabel, empty, error, disabled, labels: labelsProp, className, style, ...rest }: LineItemsProps<T>): react.JSX.Element;
+
+export { DEFAULT_LINE_ITEMS_LABELS, type LineItemCellContext, LineItems, type LineItemsColumn, type LineItemsLabels, type LineItemsProps };

package/dist/components/line-items.js

@@ -0,0 +1,238 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { Button, IconButton } from "./ui.js";
+const DEFAULT_LINE_ITEMS_LABELS = {
+  add: "Add row",
+  remove: (row) => `Remove row ${row}`,
+  confirmRemove: (row) => `Remove row ${row}? Press again to confirm`,
+  row: (row) => `Row ${row}`,
+  cell: (column, row) => `${column}, row ${row}`,
+  totals: "Total"
+};
+const REMOVE_TRACK = "2.25rem";
+const FOCUSABLE = "input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])";
+function defaultKey(item, index) {
+  if (typeof item === "object" && item !== null && "id" in item) {
+    const id = item.id;
+    if (typeof id === "string" || typeof id === "number") return id;
+  }
+  return index;
+}
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function LineItems({
+  items,
+  columns,
+  getKey = defaultKey,
+  onAdd,
+  onRemove,
+  minItems = 0,
+  maxItems,
+  confirmRemove,
+  addLabel,
+  rowLabel,
+  totals,
+  totalsLabel,
+  empty,
+  error,
+  disabled = false,
+  labels: labelsProp,
+  className,
+  style,
+  ...rest
+}) {
+  const labels = useKitLabels("lineItems", DEFAULT_LINE_ITEMS_LABELS, labelsProp);
+  const rowRefs = useRef([]);
+  const addRef = useRef(null);
+  const pendingFocus = useRef(null);
+  const [confirmingAt, setConfirming] = useState(null);
+  const confirming = confirmingAt !== null && confirmingAt < items.length ? confirmingAt : null;
+  const tracks = [...columns.map((c) => c.width ?? "minmax(0,1fr)"), ...onRemove ? [REMOVE_TRACK] : []];
+  const gridStyle = { "--line-items-cols": tracks.join(" ") };
+  const canAdd = Boolean(onAdd) && !disabled && (maxItems === void 0 || items.length < maxItems);
+  const canRemove = Boolean(onRemove) && !disabled && items.length > minItems;
+  const hasError = hasContent(error);
+  useLayoutEffect(() => {
+    const pending = pendingFocus.current;
+    if (!pending) return;
+    pendingFocus.current = null;
+    if (pending.kind === "added") {
+      const row2 = rowRefs.current[items.length - 1];
+      row2?.querySelector(FOCUSABLE)?.focus();
+      return;
+    }
+    const row = rowRefs.current[Math.min(pending.index, items.length - 1)];
+    const target = row?.querySelector("[data-line-items-remove]:not([disabled])") ?? row?.querySelector(FOCUSABLE) ?? addRef.current;
+    target?.focus();
+  }, [items.length]);
+  const add = useCallback(() => {
+    if (!canAdd || !onAdd) return;
+    pendingFocus.current = { kind: "added" };
+    onAdd();
+  }, [canAdd, onAdd]);
+  const removeAt = async (index) => {
+    if (!canRemove || !onRemove) return;
+    if (confirmRemove === true && confirming !== index) {
+      setConfirming(index);
+      return;
+    }
+    if (typeof confirmRemove === "function") {
+      const ok = await confirmRemove(items[index], index);
+      if (!ok) return;
+    }
+    setConfirming(null);
+    pendingFocus.current = { kind: "removed", index };
+    onRemove(index);
+  };
+  const onRowKeyDown = (e) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && canAdd) {
+      e.preventDefault();
+      add();
+    }
+  };
+  const columnName = (column) => column.label ?? (typeof column.header === "string" ? column.header : column.key);
+  const headerCell = (column) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "min-w-0 truncate text-xs font-medium text-[var(--text-muted)]",
+        column.align === "end" && "text-end"
+      ),
+      children: column.header
+    },
+    column.key
+  );
+  const showTotals = totals !== void 0;
+  const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "line-items",
+      ...rest,
+      style: { ...gridStyle, ...style },
+      className: cn("@container space-y-2", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "hidden gap-2 @lg:grid @lg:grid-cols-[var(--line-items-cols)]", children: [
+          columns.map(headerCell),
+          onRemove && /* @__PURE__ */ jsx("span", {})
+        ] }),
+        items.length === 0 && hasContent(empty) && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-[var(--border)] px-3 py-4 text-center text-sm text-[var(--text-muted)]", children: empty }),
+        items.map((item, index) => {
+          const row = index + 1;
+          const isConfirming = confirming === index;
+          return (
+            // The row's Ctrl/⌘+Enter is a shortcut for the add button, which is itself
+            // reachable by Tab; the group only listens for it bubbling from its fields.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: (el) => {
+                  rowRefs.current[index] = el;
+                },
+                role: "group",
+                "aria-label": rowLabel ? rowLabel(index, item) : labels.row(row),
+                "data-line-items-row": "",
+                onKeyDown: onRowKeyDown,
+                className: cn(
+                  "grid grid-cols-1 gap-2 @lg:grid-cols-[var(--line-items-cols)] @lg:items-start",
+                  // Stacked, each row is a card of its own so the rows stay apart.
+                  "@max-lg:rounded-md @max-lg:border @max-lg:border-[var(--border)] @max-lg:p-3"
+                ),
+                children: [
+                  columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1 @lg:space-y-0", children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block text-xs font-medium text-[var(--text-muted)] @lg:hidden", children: column.header }),
+                    column.render({ item, index, label: labels.cell(columnName(column), row) })
+                  ] }, column.key)),
+                  onRemove && /* @__PURE__ */ jsx("div", { className: "flex justify-end @lg:justify-center", children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      type: "button",
+                      "data-line-items-remove": "",
+                      variant: isConfirming ? "danger" : "ghost",
+                      tone: isConfirming ? void 0 : "danger",
+                      label: isConfirming ? labels.confirmRemove(row) : labels.remove(row),
+                      disabled: !canRemove,
+                      onClick: () => void removeAt(index),
+                      onBlur: () => {
+                        if (isConfirming) setConfirming(null);
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Escape" && isConfirming) {
+                          e.stopPropagation();
+                          setConfirming(null);
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(Trash2, {})
+                    }
+                  ) })
+                ]
+              },
+              getKey(item, index)
+            )
+          );
+        }),
+        showTotals && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": typeof totalsLabel === "string" ? totalsLabel : labels.totals,
+            "data-line-items-totals": "",
+            className: "grid grid-cols-1 gap-2 border-t border-[var(--border)] pt-2 text-sm font-semibold tabular-nums text-[var(--text-primary)] @lg:grid-cols-[var(--line-items-cols)]",
+            children: [
+              columns.map((column) => {
+                const value = totals[column.key];
+                if (column.key === labelColumn) {
+                  return /* @__PURE__ */ jsx("span", { className: "min-w-0", children: totalsLabel ?? labels.totals }, column.key);
+                }
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0",
+                      column.align === "end" && "@lg:text-end",
+                      // Stacked, a column with no total takes no line.
+                      !hasContent(value) && "@max-lg:hidden"
+                    ),
+                    children: hasContent(value) && /* @__PURE__ */ jsxs("span", { className: "flex justify-between gap-2 @lg:block", children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "font-normal text-[var(--text-muted)] @lg:hidden", children: column.header }),
+                      value
+                    ] })
+                  },
+                  column.key
+                );
+              }),
+              onRemove && /* @__PURE__ */ jsx("span", { className: "@max-lg:hidden" })
+            ]
+          }
+        ),
+        hasError && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-tight text-[var(--danger)]", children: error }),
+        onAdd && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ref: addRef,
+            type: "button",
+            variant: "secondary",
+            className: "w-full border-dashed",
+            disabled: !canAdd,
+            onClick: add,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { "aria-hidden": true, className: "size-4" }),
+              addLabel ?? labels.add
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_LINE_ITEMS_LABELS,
+  LineItems
+};
+//# sourceMappingURL=line-items.js.map

package/dist/components/line-items.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/line-items.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, Key, ReactNode } from \"react\";\nimport { Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, IconButton } from \"./ui\";\n\n/** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */\nexport interface LineItemsLabels {\n  /** The dashed add button. */\n  add: string;\n  /** The remove button's name for one row. */\n  remove: (row: number) => string;\n  /** Its name while it waits for the second press (`confirmRemove`). */\n  confirmRemove: (row: number) => string;\n  /** A row's group name, when the caller gives no `rowLabel`. */\n  row: (row: number) => string;\n  /** The name a cell's field should carry: the column, and which row. */\n  cell: (column: string, row: number) => string;\n  /** The totals row's label, and its group name. */\n  totals: string;\n}\n\nexport const DEFAULT_LINE_ITEMS_LABELS: LineItemsLabels = {\n  add: \"Add row\",\n  remove: (row) => `Remove row ${row}`,\n  confirmRemove: (row) => `Remove row ${row}? Press again to confirm`,\n  row: (row) => `Row ${row}`,\n  cell: (column, row) => `${column}, row ${row}`,\n  totals: \"Total\",\n};\n\n/** What a column's `render` receives for one row. */\nexport interface LineItemCellContext<T> {\n  item: T;\n  /** 0-based. */\n  index: number;\n  /** The accessible name for the cell's field — \"Debit, row 2\". The header is\n   *  hidden from assistive tech (each row repeats it), so the field has to carry it:\n   *  `<Input aria-label={label} … />`. */\n  label: string;\n}\n\nexport interface LineItemsColumn<T> {\n  /** Stable id: the React key, and the key into `totals`. */\n  key: string;\n  /** The column header (and the small label over the cell once the rows stack). */\n  header: ReactNode;\n  /** The column's name for {@link LineItemCellContext.label}, when `header` is not a\n   *  string. */\n  label?: string;\n  /** The grid track once the rows are wide enough to be a table. Default\n   *  `minmax(0,1fr)`; `\"7rem\"` for an amount. */\n  width?: string;\n  /** `end` for figures: the header and the totals cell end-align with the field. */\n  align?: \"start\" | \"end\";\n  render: (ctx: LineItemCellContext<T>) => ReactNode;\n}\n\nexport interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  items: readonly T[];\n  columns: readonly LineItemsColumn<T>[];\n  /** The row's React key. Default: the item's `id` (react-hook-form's `useFieldArray`\n   *  `fields` carry one), else its index. */\n  getKey?: (item: T, index: number) => Key;\n  /** Append a row. Omitted: no add button. The first field of the new row is focused. */\n  onAdd?: () => void;\n  /** Remove the row at `index`. Omitted: no remove buttons. */\n  onRemove?: (index: number) => void;\n  /** Remove is disabled at or below this many rows (a journal entry needs two).\n   *  Default 0. */\n  minItems?: number;\n  /** Add is disabled at this many rows. */\n  maxItems?: number;\n  /**\n   * Ask before a row goes:\n   *  - `true`: the remove button asks for a second press — it fills red and its name\n   *    becomes `lineItems.confirmRemove`; Escape, or leaving it, calls it off.\n   *  - a function: called with the row, and the row goes only if it answers `true`\n   *    (`(item, i) => confirm({ title: … , tone: \"danger\" })` with `useConfirm`).\n   */\n  confirmRemove?: boolean | ((item: T, index: number) => boolean | Promise<boolean>);\n  /** The add button's text. Default `lineItems.add`. */\n  addLabel?: ReactNode;\n  /** A row's group name (\"Line 2\"). Default `lineItems.row`. */\n  rowLabel?: (index: number, item: T) => string;\n  /** A totals row under the lines, one entry per column `key`. The first column\n   *  without an entry carries {@link totalsLabel}. Omitted: no totals row. */\n  totals?: Partial<Record<string, ReactNode>>;\n  /** Default `lineItems.totals`, \"Total\". */\n  totalsLabel?: ReactNode;\n  /** Shown in place of the rows when there are none. */\n  empty?: ReactNode;\n  /** A message about the list as a whole (\"The entry does not balance\"). */\n  error?: ReactNode;\n  /** Disables add and remove (the fields are the caller's to disable). */\n  disabled?: boolean;\n  labels?: Partial<LineItemsLabels>;\n}\n\nconst REMOVE_TRACK = \"2.25rem\";\nconst FOCUSABLE =\n  \"input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])\";\n\nfunction defaultKey(item: unknown, index: number): Key {\n  if (typeof item === \"object\" && item !== null && \"id\" in item) {\n    const id = (item as { id: unknown }).id;\n    if (typeof id === \"string\" || typeof id === \"number\") return id;\n  }\n  return index;\n}\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\ntype PendingFocus = { kind: \"added\" } | { kind: \"removed\"; index: number };\n\n/**\n * An editable list of lines — journal entry lines, lease components, invoice\n * positions, budget rows: column headers, a row of fields per item, a remove button\n * per row, a dashed \"add\" button under them, and an optional totals row.\n *\n * Presentation only: the rows are the caller's `items` and the fields are the\n * caller's, rendered per column. So it works over plain state —\n *\n * ```tsx\n * <LineItems items={lines} columns={cols} onAdd={() => setLines([...lines, blank()])}\n *   onRemove={(i) => setLines(lines.filter((_, j) => j !== i))} minItems={2} />\n * ```\n *\n * — and over react-hook-form's `useFieldArray` alike (`items={fields}`, `onAdd={() =>\n * append(blank())}`, `onRemove={remove}`), for which `@eifi1/ui-kit/rhf` has\n * `RhfLineItems`.\n *\n * On a wide pane the rows are a grid under the headers; on a narrow one (a container\n * query, so a dialog stacks where it is cramped) each row stacks its fields, each\n * under a small copy of its header. The headers are `aria-hidden`: every row is a\n * named group and every field is named by `render`'s `label` (\"Debit, row 2\"), which\n * is what a screen reader needs — a header row it would read once, out of context.\n *\n * Keyboard: after Add, focus lands in the new row's first field; after a remove, on\n * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a\n * row.\n */\nexport function LineItems<T>({\n  items,\n  columns,\n  getKey = defaultKey,\n  onAdd,\n  onRemove,\n  minItems = 0,\n  maxItems,\n  confirmRemove,\n  addLabel,\n  rowLabel,\n  totals,\n  totalsLabel,\n  empty,\n  error,\n  disabled = false,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: LineItemsProps<T>) {\n  const labels = useKitLabels(\"lineItems\", DEFAULT_LINE_ITEMS_LABELS, labelsProp);\n  const rowRefs = useRef<Array<HTMLDivElement | null>>([]);\n  const addRef = useRef<HTMLButtonElement>(null);\n  const pendingFocus = useRef<PendingFocus | null>(null);\n  const [confirmingAt, setConfirming] = useState<number | null>(null);\n  // A confirm waiting on a row that has since gone is void.\n  const confirming = confirmingAt !== null && confirmingAt < items.length ? confirmingAt : null;\n\n  const tracks = [...columns.map((c) => c.width ?? \"minmax(0,1fr)\"), ...(onRemove ? [REMOVE_TRACK] : [])];\n  const gridStyle = { \"--line-items-cols\": tracks.join(\" \") } as CSSProperties;\n  const canAdd = Boolean(onAdd) && !disabled && (maxItems === undefined || items.length < maxItems);\n  const canRemove = Boolean(onRemove) && !disabled && items.length > minItems;\n  const hasError = hasContent(error);\n\n\n  // Focus after the list has re-rendered with the new rows — a layout effect, so the\n  // caret is where it belongs before paint.\n  useLayoutEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending) return;\n    pendingFocus.current = null;\n    if (pending.kind === \"added\") {\n      const row = rowRefs.current[items.length - 1];\n      row?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n      return;\n    }\n    const row = rowRefs.current[Math.min(pending.index, items.length - 1)];\n    const target =\n      row?.querySelector<HTMLElement>(\"[data-line-items-remove]:not([disabled])\") ??\n      row?.querySelector<HTMLElement>(FOCUSABLE) ??\n      addRef.current;\n    target?.focus();\n  }, [items.length]);\n\n  const add = useCallback(() => {\n    if (!canAdd || !onAdd) return;\n    pendingFocus.current = { kind: \"added\" };\n    onAdd();\n  }, [canAdd, onAdd]);\n\n  const removeAt = async (index: number) => {\n    if (!canRemove || !onRemove) return;\n    if (confirmRemove === true && confirming !== index) {\n      setConfirming(index);\n      return;\n    }\n    if (typeof confirmRemove === \"function\") {\n      const ok = await confirmRemove(items[index], index);\n      if (!ok) return;\n    }\n    setConfirming(null);\n    pendingFocus.current = { kind: \"removed\", index };\n    onRemove(index);\n  };\n\n  const onRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === \"Enter\" && (e.ctrlKey || e.metaKey) && canAdd) {\n      e.preventDefault();\n      add();\n    }\n  };\n\n  const columnName = (column: LineItemsColumn<T>) =>\n    column.label ?? (typeof column.header === \"string\" ? column.header : column.key);\n\n  const headerCell = (column: LineItemsColumn<T>) => (\n    <span\n      key={column.key}\n      className={cn(\n        \"min-w-0 truncate text-xs font-medium text-[var(--text-muted)]\",\n        column.align === \"end\" && \"text-end\",\n      )}\n    >\n      {column.header}\n    </span>\n  );\n\n  const showTotals = totals !== undefined;\n  const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : undefined;\n\n  return (\n    <div\n      data-slot=\"line-items\"\n      {...rest}\n      style={{ ...gridStyle, ...style }}\n      className={cn(\"@container space-y-2\", className)}\n    >\n      <div aria-hidden className=\"hidden gap-2 @lg:grid @lg:grid-cols-[var(--line-items-cols)]\">\n        {columns.map(headerCell)}\n        {onRemove && <span />}\n      </div>\n\n      {items.length === 0 && hasContent(empty) && (\n        <div className=\"rounded-md border border-dashed border-[var(--border)] px-3 py-4 text-center text-sm text-[var(--text-muted)]\">\n          {empty}\n        </div>\n      )}\n\n      {items.map((item, index) => {\n        const row = index + 1;\n        const isConfirming = confirming === index;\n        return (\n          // The row's Ctrl/⌘+Enter is a shortcut for the add button, which is itself\n          // reachable by Tab; the group only listens for it bubbling from its fields.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            key={getKey(item, index)}\n            ref={(el) => {\n              rowRefs.current[index] = el;\n            }}\n            role=\"group\"\n            aria-label={rowLabel ? rowLabel(index, item) : labels.row(row)}\n            data-line-items-row=\"\"\n            onKeyDown={onRowKeyDown}\n            className={cn(\n              \"grid grid-cols-1 gap-2 @lg:grid-cols-[var(--line-items-cols)] @lg:items-start\",\n              // Stacked, each row is a card of its own so the rows stay apart.\n              \"@max-lg:rounded-md @max-lg:border @max-lg:border-[var(--border)] @max-lg:p-3\",\n            )}\n          >\n            {columns.map((column) => (\n              <div key={column.key} className=\"min-w-0 space-y-1 @lg:space-y-0\">\n                <span aria-hidden className=\"block text-xs font-medium text-[var(--text-muted)] @lg:hidden\">\n                  {column.header}\n                </span>\n                {column.render({ item, index, label: labels.cell(columnName(column), row) })}\n              </div>\n            ))}\n            {onRemove && (\n              <div className=\"flex justify-end @lg:justify-center\">\n                <IconButton\n                  type=\"button\"\n                  data-line-items-remove=\"\"\n                  variant={isConfirming ? \"danger\" : \"ghost\"}\n                  tone={isConfirming ? undefined : \"danger\"}\n                  label={isConfirming ? labels.confirmRemove(row) : labels.remove(row)}\n                  disabled={!canRemove}\n                  onClick={() => void removeAt(index)}\n                  onBlur={() => {\n                    if (isConfirming) setConfirming(null);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Escape\" && isConfirming) {\n                      e.stopPropagation();\n                      setConfirming(null);\n                    }\n                  }}\n                >\n                  <Trash2 />\n                </IconButton>\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {showTotals && (\n        <div\n          role=\"group\"\n          aria-label={typeof totalsLabel === \"string\" ? totalsLabel : labels.totals}\n          data-line-items-totals=\"\"\n          className=\"grid grid-cols-1 gap-2 border-t border-[var(--border)] pt-2 text-sm font-semibold tabular-nums text-[var(--text-primary)] @lg:grid-cols-[var(--line-items-cols)]\"\n        >\n          {columns.map((column) => {\n            const value = totals[column.key];\n            if (column.key === labelColumn) {\n              return (\n                <span key={column.key} className=\"min-w-0\">\n                  {totalsLabel ?? labels.totals}\n                </span>\n              );\n            }\n            return (\n              <span\n                key={column.key}\n                className={cn(\n                  \"min-w-0\",\n                  column.align === \"end\" && \"@lg:text-end\",\n                  // Stacked, a column with no total takes no line.\n                  !hasContent(value) && \"@max-lg:hidden\",\n                )}\n              >\n                {hasContent(value) && (\n                  <span className=\"flex justify-between gap-2 @lg:block\">\n                    <span aria-hidden className=\"font-normal text-[var(--text-muted)] @lg:hidden\">\n                      {column.header}\n                    </span>\n                    {value}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n          {onRemove && <span className=\"@max-lg:hidden\" />}\n        </div>\n      )}\n\n      {hasError && (\n        <p className=\"text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n\n      {onAdd && (\n        <Button\n          ref={addRef}\n          type=\"button\"\n          variant=\"secondary\"\n          className=\"w-full border-dashed\"\n          disabled={!canAdd}\n          onClick={add}\n        >\n          <Plus aria-hidden className=\"size-4\" />\n          {addLabel ?? labels.add}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["row"]}

package/dist/components/list.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, MouseEvent, Ref, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes, MouseEvent, Ref, ReactElement } from 'react';
 import { LucideIcon } from 'lucide-react';
 
 interface ListLabels {
@@ -79,6 +79,26 @@ interface ListItemBaseProps {
      * on "Copy" from selecting the row.
      */
     actions?: ReactNode;
+    /**
+     * Rich content UNDER the title row and outside its target: photos, per-row buttons,
+     * form fields — kastlan's handover room inspector (room-inspector.tsx), the handover
+     * detail page and the wizard's defects step (wizard/defects-step.tsx), which draw
+     * each room or defect as a `Card variant="inset"` because a row could not hold a
+     * photo strip with its own buttons.
+     *
+     * The same rule as {@link actions}, one row down: the title area stays ONE named
+     * target (the button or link, with the title and subtitle as its name), and the body
+     * is its sibling, never nested in it — a thumbnail's "Remove" inside the row's button
+     * would be invalid HTML and unreachable by a screen reader. The body is a
+     * `role="group"` named by the row's title (`aria-labelledby`), so tabbing into the
+     * third photo's button of the second room is heard as "Kitchen, group" first rather
+     * than as a button floating free of any row. Inside the row's box, so a `selected`
+     * border and a `divider` hold both; the hover fill stays on the target alone, since
+     * the body is not what a click on the row does.
+     */
+    children?: ReactNode;
+    /** Classes on the {@link children} body. */
+    bodyClassName?: string;
     /**
      * The unread mark: a brand dot at the row's end, the title in semibold, and "Unread"
      * read after the title (keksdose notification-inbox.tsx:215). For another status,
@@ -110,6 +130,19 @@ interface ListItemBaseProps {
     className?: string;
     /** Classes on the main target (the button, link or static block). */
     targetClassName?: string;
+    /**
+     * Extra attributes and handlers for the main target — e.g. HTML5 drag-and-drop
+     * (`draggable`, `onDragStart`, `onDragEnd`): lenkbank's segment list drags the WHOLE
+     * 44px row, and a grip inside the button cannot start a drag in Firefox. Spread first,
+     * so the row's own role, name, state and click handling always win.
+     */
+    targetProps?: HTMLAttributes<HTMLElement>;
+    /**
+     * A visible border while unselected, instead of the transparent one. For rows laid out
+     * as a wrapping strip (lenkbank's profile bar), where borderless rows read as loose
+     * text. The selected row's brand border is unchanged.
+     */
+    bordered?: boolean;
     /** `div` for a single row outside a {@link List}; an `<li>` must sit in a list. */
     as?: "li" | "div";
     /** Reaches the main target — the element with the row's name and action. */
@@ -135,8 +168,9 @@ type ListItemProps = ListItemBaseProps & ({
      * cannot do.
      */
     href: string;
-    /** Your router's link for an in-app `href`. Default `<a>`. The API `Chip`,
-     *  `StatTile` and `MenuItem` share. Ignored for an `external` row. */
+    /** Your router's link for an in-app `href`. Default: the `<UiKitProvider
+     *  linkComponent>`, then `<a>`. The API `Chip`, `StatTile` and `MenuItem`
+     *  share. Ignored for an `external` row. */
     renderLink?: (props: ListItemLinkProps) => ReactElement;
     /**
      * The link leaves the app: a plain `<a target="_blank" rel="noopener

package/dist/components/list.js

@@ -1,11 +1,12 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useId } from "react";
 import { ExternalLink } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { Spinner } from "./ui.js";
 import { StatusDot } from "./status-dot.js";
-import { useKitLabels } from "../i18n/kit-labels.js";
+import { useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer } from "./text-link.js";
 const DEFAULT_LIST_LABELS = {
   unread: "Unread",
   opensInNewTab: "opens in a new tab"
@@ -32,9 +33,9 @@ const List = forwardRef(function List2({ as = "ul", density = "default", separat
   ) });
 });
 const PAD = {
-  compact: { target: "gap-2 px-2 py-1.5", actions: "pe-1.5", gap: "gap-0.5" },
-  default: { target: "gap-3 px-3 py-2.5", actions: "pe-2", gap: "gap-1" },
-  comfortable: { target: "gap-3 px-4 py-3", actions: "pe-3", gap: "gap-1" }
+  compact: { target: "gap-2 px-2 py-1.5", actions: "pe-1.5", gap: "gap-0.5", body: "px-2 pb-1.5" },
+  default: { target: "gap-3 px-3 py-2.5", actions: "pe-2", gap: "gap-1", body: "px-3 pb-2.5" },
+  comfortable: { target: "gap-3 px-4 py-3", actions: "pe-3", gap: "gap-1", body: "px-4 pb-3" }
 };
 const TARGET_RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]";
 const ListItem = forwardRef(function ListItem2({
@@ -55,7 +56,11 @@ const ListItem = forwardRef(function ListItem2({
   align = "center",
   className,
   targetClassName,
+  targetProps,
+  bordered = false,
   as = "li",
+  children,
+  bodyClassName,
   href,
   renderLink,
   external = false,
@@ -65,12 +70,15 @@ const ListItem = forwardRef(function ListItem2({
 }, ref) {
   const list = useContext(ListContext);
   const labels = useKitLabels("list", DEFAULT_LIST_LABELS);
+  const kitLink = useKitLink();
   const density = densityProp ?? list.density;
   const pad = PAD[density];
   const isLink = href !== void 0 && !disabled;
   const isButton = !isLink && onClick !== void 0 && href === void 0;
   const interactive = isLink || isButton;
   const inert = disabled || loading;
+  const hasBody = children !== void 0 && children !== null && children !== false;
+  const titleId = useId();
   const mark = status ?? (unread ? /* @__PURE__ */ jsx(StatusDot, { tone: "brand", size: "sm", className: align === "start" ? "mt-1.5" : void 0 }) : null);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     Icon && /* @__PURE__ */ jsx(
@@ -85,6 +93,7 @@ const ListItem = forwardRef(function ListItem2({
       /* @__PURE__ */ jsxs(
         "span",
         {
+          id: hasBody ? titleId : void 0,
           className: cn(
             "block truncate text-sm text-[var(--text-primary)]",
             unread ? "font-semibold" : "font-medium"
@@ -124,15 +133,20 @@ const ListItem = forwardRef(function ListItem2({
     "flex min-w-0 flex-1 text-start",
     align === "start" ? "items-start" : "items-center",
     pad.target,
-    "rounded-[inherit]",
+    // With a body the target is the top of the box, not all of it, so it takes its
+    // own corners and its own hover fill (see `children`).
+    hasBody ? "rounded-md" : "rounded-[inherit]",
+    hasBody && interactive && !inert && !selected && "transition-colors hover:bg-[var(--bg-hover)]",
     interactive && TARGET_RING,
     interactive && !inert && "cursor-pointer",
     loading && "cursor-progress",
     targetClassName
   );
+  const { role: _ignoredRole, ...targetExtras } = targetProps ?? {};
   let main;
   if (isLink) {
     const linkProps = {
+      ...targetExtras,
       ...rest,
       ref,
       href,
@@ -144,11 +158,13 @@ const ListItem = forwardRef(function ListItem2({
       children: body
     };
     const { children: linkBody, ...anchorProps } = linkProps;
-    main = renderLink && !external ? /* @__PURE__ */ jsx(RenderedLink, { render: renderLink, ...linkProps }) : /* @__PURE__ */ jsx("a", { ...anchorProps, ...external ? { target: "_blank", rel: "noopener noreferrer" } : null, children: linkBody });
+    const render = external ? void 0 : pickLinkRenderer(renderLink, kitLink, href);
+    main = render ? /* @__PURE__ */ jsx(RenderedLink, { render, ...linkProps }) : /* @__PURE__ */ jsx("a", { ...anchorProps, ...external ? { target: "_blank", rel: "noopener noreferrer" } : null, children: linkBody });
   } else if (isButton) {
     main = /* @__PURE__ */ jsx(
       "button",
       {
+        ...targetExtras,
         ...rest,
         ref,
         type: "button",
@@ -165,6 +181,7 @@ const ListItem = forwardRef(function ListItem2({
     main = /* @__PURE__ */ jsx(
       "div",
       {
+        ...targetExtras,
         ...rest,
         ref,
         "aria-disabled": disabled || void 0,
@@ -174,6 +191,7 @@ const ListItem = forwardRef(function ListItem2({
       }
     );
   }
+  const actionsEl = actions != null ? /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center", pad.gap, pad.actions), children: actions }) : null;
   const Tag = as;
   return /* @__PURE__ */ jsx(
     Tag,
@@ -182,20 +200,27 @@ const ListItem = forwardRef(function ListItem2({
         list.separator === "divider" && "border-b border-[var(--border)] last:border-b-0",
         list.separator === "divider" && as === "li" && "py-0.5"
       ),
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "flex min-w-0 items-center rounded-md border transition-colors",
-            selected ? "border-[var(--brand)] bg-[var(--bg-surface-2)]" : "border-transparent",
-            interactive && !inert && !selected && "hover:bg-[var(--bg-hover)]",
+            "flex min-w-0 rounded-md border transition-colors",
+            hasBody ? "flex-col" : "items-center",
+            selected ? "border-[var(--brand)] bg-[var(--bg-surface-2)]" : bordered ? "border-[var(--border)]" : "border-transparent",
+            !hasBody && interactive && !inert && !selected && "hover:bg-[var(--bg-hover)]",
             disabled && "opacity-50",
             className
           ),
-          children: [
+          children: hasBody ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
+              main,
+              actionsEl
+            ] }),
+            /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": titleId, className: cn("min-w-0", pad.body, bodyClassName), children })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             main,
-            actions != null && /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center", pad.gap, pad.actions), children: actions })
-          ]
+            actionsEl
+          ] })
         }
       )
     }