@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/table.d.ts

@@ -1,16 +1,14 @@
-import * as react from 'react';
-import { ComponentPropsWithRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithRef, ReactNode } from "react";
 /** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set
  *  inside a card's own padding whose columns are spaced by hand (`pl-2` on exactly the
  *  columns that need it). Type stays at the body size, as `comfortable`. */
-type TableDensity = "comfortable" | "compact" | "none";
+export type TableDensity = "comfortable" | "compact" | "none";
 /** CSS `table-layout`. `auto` (the browser default) sizes columns to their content;
  *  `fixed` takes widths from the first row and ignores the rest — keksdose's VAT
  *  summary switches to it while editing so two inputs stop bidding against the
  *  figures for room. */
-type TableLayout = "auto" | "fixed";
-type TableAlign = "start" | "center" | "end";
+export type TableLayout = "auto" | "fixed";
+export type TableAlign = "start" | "center" | "end";
 /**
  * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a
  * head cell sits on the `bottom` (a wrapped heading ends on the line above the
@@ -21,11 +19,11 @@ type TableAlign = "start" | "center" | "end";
  * so it writes `<tr className="align-middle">` over raw `<th>`/`<td>`, because the
  * kit's cells each stated `align-top` and a class on the row could not reach them.
  */
-type TableVAlign = "top" | "middle" | "bottom";
+export type TableVAlign = "top" | "middle" | "bottom";
 /** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */
-type TableHeaderCellSize = "xs" | "sm";
+export type TableHeaderCellSize = "xs" | "sm";
 /** The header cell's weight. Default `medium`. */
-type TableHeaderCellWeight = "normal" | "medium" | "semibold";
+export type TableHeaderCellWeight = "normal" | "medium" | "semibold";
 /**
  * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a
  * `group` heading ("Current assets", a tinted full-width label row), a `subtotal` under
@@ -34,20 +32,20 @@ type TableHeaderCellWeight = "normal" | "medium" | "semibold";
  * border-t-2"` and `bg-muted/50` on the cell — three pages, three sets of classes for
  * the same four kinds of line.
  */
-type TableRowVariant = "row" | "group" | "subtotal" | "total";
+export type TableRowVariant = "row" | "group" | "subtotal" | "total";
 /**
  * The alignment a figure column wants: end-aligned (so the units line up under each
  * other in either reading direction) with tabular digits (so they line up at all).
  * Exported for a cell the kit did not render — a DataTable column, a `<td>` of the
  * app's own.
  */
-declare const NUMERIC_CELL_CLASS = "text-end tabular-nums";
+export declare const NUMERIC_CELL_CLASS = "text-end tabular-nums";
 /**
  * Every part's props are `ComponentPropsWithRef` (0.16.0), so `ref` reaches the DOM
  * element: keksdose scrolled a budget row into view through `useId` + `getElementById`
  * because `<TableRow ref>` did not type-check.
  */
-interface TableProps extends ComponentPropsWithRef<"table"> {
+export interface TableProps extends ComponentPropsWithRef<"table"> {
     /** `compact` for a dense detail view (a ledger, a spec sheet). */
     density?: TableDensity;
     /** Tint every other body row. */
@@ -139,14 +137,14 @@ interface TableProps extends ComponentPropsWithRef<"table"> {
  * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left
  * page gets its first column on the right without a class changing.
  */
-declare function Table({ density, zebra, hover, wrapperClassName, layout, framed, rowDividers, stack, edgeFade, className, "aria-label": ariaLabel, ref, ...rest }: TableProps): react.JSX.Element;
-interface TableHeadProps extends ComponentPropsWithRef<"thead"> {
+export declare function Table({ density, zebra, hover, wrapperClassName, layout, framed, rowDividers, stack, edgeFade, className, "aria-label": ariaLabel, ref, ...rest }: TableProps): import("react").JSX.Element;
+export interface TableHeadProps extends ComponentPropsWithRef<"thead"> {
     /** The rule under the head. Default true; `false` for a quiet header over a small
      *  table (keksdose's VAT summary wrote `className="border-b-0"` to lose it). */
     bordered?: boolean;
 }
-declare function TableHead({ bordered, className, ...rest }: TableHeadProps): react.JSX.Element;
-interface TableBodyProps extends ComponentPropsWithRef<"tbody"> {
+export declare function TableHead({ bordered, className, ...rest }: TableHeadProps): import("react").JSX.Element;
+export interface TableBodyProps extends ComponentPropsWithRef<"tbody"> {
     /**
      * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —
      * `children` that render nothing: an empty `.map`, a `false`, `null`. kastlan hand-
@@ -156,8 +154,8 @@ interface TableBodyProps extends ComponentPropsWithRef<"tbody"> {
      */
     empty?: ReactNode;
 }
-declare function TableBody({ className, empty, children, ...rest }: TableBodyProps): react.JSX.Element;
-interface TableEmptyProps extends Omit<ComponentPropsWithRef<"tr">, "children"> {
+export declare function TableBody({ className, empty, children, ...rest }: TableBodyProps): import("react").JSX.Element;
+export interface TableEmptyProps extends Omit<ComponentPropsWithRef<"tr">, "children"> {
     children: ReactNode;
     /** Columns to span. Default: MEASURED — the widest row of the table it renders in,
      *  counted after mount, so the row stays full width when a column is added. */
@@ -170,13 +168,13 @@ interface TableEmptyProps extends Omit<ComponentPropsWithRef<"tr">, "children">
  * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows
  * are not its direct children.
  */
-declare function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps): react.JSX.Element;
-type TableFootProps = ComponentPropsWithRef<"tfoot">;
+export declare function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps): import("react").JSX.Element;
+export type TableFootProps = ComponentPropsWithRef<"tfoot">;
 /** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`
  *  is what tells a reader it is a total rather than one more row. */
-declare function TableFoot({ className, ...rest }: TableFootProps): react.JSX.Element;
+export declare function TableFoot({ className, ...rest }: TableFootProps): import("react").JSX.Element;
 /** The deprecated HTML `valign` attribute is replaced by a class-backed one. */
-interface TableRowProps extends ComponentPropsWithRef<"tr"> {
+export interface TableRowProps extends ComponentPropsWithRef<"tr"> {
     /** Vertical alignment for every cell of the row that does not set its own. See
      *  {@link TableVAlign}. Left out, each cell keeps its default. */
     valign?: TableVAlign;
@@ -186,7 +184,7 @@ interface TableRowProps extends ComponentPropsWithRef<"tr"> {
     /** The rule under this body row. Default: the table's `rowDividers`. */
     bordered?: boolean;
 }
-declare function TableRow({ valign, variant, bordered, className, ref: refProp, ...rest }: TableRowProps): react.JSX.Element;
+export declare function TableRow({ valign, variant, bordered, className, ref: refProp, ...rest }: TableRowProps): import("react").JSX.Element;
 interface CellAlignProps {
     /** Shorthand for a figure column: end-aligned, tabular digits. */
     numeric?: boolean;
@@ -197,7 +195,7 @@ interface CellAlignProps {
     valign?: TableVAlign;
 }
 /** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */
-interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<"th">, "align" | "valign">, CellAlignProps {
+export interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<"th">, "align" | "valign">, CellAlignProps {
     /**
      * Type size. Left out: `xs` in the head, the table's own size in the body — as
      * before. keksdose's VAT summary heads its columns at the body size and normal weight
@@ -213,11 +211,11 @@ interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<"th">, "align"
  * cell in a body row is the row's label ("Net rent" in a key-value table), and a
  * reader needs the scope to read it with each cell beside it.
  */
-declare function TableHeaderCell({ numeric, align, valign, size, weight, scope, className, ref: refProp, ...rest }: TableHeaderCellProps): react.JSX.Element;
-interface TableCellProps extends Omit<ComponentPropsWithRef<"td">, "align" | "valign">, CellAlignProps {
+export declare function TableHeaderCell({ numeric, align, valign, size, weight, scope, className, ref: refProp, ...rest }: TableHeaderCellProps): import("react").JSX.Element;
+export interface TableCellProps extends Omit<ComponentPropsWithRef<"td">, "align" | "valign">, CellAlignProps {
 }
-declare function TableCell({ numeric, align, valign, className, ...rest }: TableCellProps): react.JSX.Element;
-type TableCaptionProps = ComponentPropsWithRef<"caption">;
+export declare function TableCell({ numeric, align, valign, className, ...rest }: TableCellProps): import("react").JSX.Element;
+export type TableCaptionProps = ComponentPropsWithRef<"caption">;
 /**
  * The table's title. Beneath the table by default (`caption-bottom`, the shadcn
  * convention kastlan's views already follow); `className="caption-top"` moves it.
@@ -228,6 +226,5 @@ type TableCaptionProps = ComponentPropsWithRef<"caption">;
  * with the {@link Table} so the wrapper points at an id that exists, and never at
  * one that does not.
  */
-declare function TableCaption({ className, id, ...rest }: TableCaptionProps): react.JSX.Element;
-
-export { NUMERIC_CELL_CLASS, Table, type TableAlign, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, type TableDensity, TableEmpty, type TableEmptyProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, type TableHeaderCellWeight, type TableLayout, type TableProps, TableRow, type TableRowProps, type TableRowVariant, type TableVAlign };
+export declare function TableCaption({ className, id, ...rest }: TableCaptionProps): import("react").JSX.Element;
+export {};

package/dist/components/table.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { useEdgeFade } from "../lib/strip-fade.js";
-import { assignRef } from "./choice-parts.js";
+import { assignRef } from "./field-parts.js";
 import { THIN_SCROLLBAR_CLASS, useScrollOverflow } from "./scroll-area.js";
 const TableContext = createContext({
   density: "comfortable",
@@ -70,7 +70,7 @@ const STACK_PHONE_CLASSES = cn(
   "max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start",
   "max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5",
   "max-sm:[&_tbody_td:first-child]:font-medium",
-  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]"
+  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-muted max-sm:[&_td[data-label]]:before:content-[attr(data-label)]"
 );
 function Table({
   density = "comfortable",
@@ -150,9 +150,9 @@ function Table({
         "relative w-full overflow-x-auto",
         // On the scroll wrapper itself, so its clipping keeps the rows inside the
         // rounded corners.
-        framed && "rounded-md border border-[var(--border)]",
+        framed && "rounded-md border border-subtle",
         THIN_SCROLLBAR_CLASS,
-        "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+        "focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand",
         wrapperClassName
       ),
       children: /* @__PURE__ */ jsx(
@@ -162,7 +162,7 @@ function Table({
           ref: setTableRef,
           "aria-label": ariaLabel,
           className: cn(
-            "w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]",
+            "w-full caption-bottom border-collapse text-sm text-primary",
             density === "compact" && "text-xs",
             layout === "fixed" && "table-fixed",
             layout === "auto" && "table-auto",
@@ -175,7 +175,7 @@ function Table({
   ) });
 }
 function TableHead({ bordered = true, className, ...rest }) {
-  return /* @__PURE__ */ jsx(SectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx("thead", { ...rest, className: cn(bordered && "border-b border-[var(--border)]", className) }) });
+  return /* @__PURE__ */ jsx(SectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx("thead", { ...rest, className: cn(bordered && "border-b border-subtle", className) }) });
 }
 function TableBody({ className, empty, children, ...rest }) {
   const hasRows = Children.toArray(children).length > 0;
@@ -207,7 +207,7 @@ function TableEmpty({ children, colSpan, cellClassName, className, ...rest }) {
       className: cn(
         // `none` keeps the message off the edges regardless: it is text, not a figure.
         density === "none" ? "py-2" : CELL_PAD[density],
-        "text-center text-[var(--text-muted)]",
+        "text-center text-muted",
         cellClassName
       ),
       children
@@ -215,15 +215,15 @@ function TableEmpty({ children, colSpan, cellClassName, className, ...rest }) {
   ) });
 }
 function TableFoot({ className, ...rest }) {
-  return /* @__PURE__ */ jsx(SectionContext.Provider, { value: "foot", children: /* @__PURE__ */ jsx("tfoot", { ...rest, className: cn("border-t border-[var(--border-strong)] font-medium", className) }) });
+  return /* @__PURE__ */ jsx(SectionContext.Provider, { value: "foot", children: /* @__PURE__ */ jsx("tfoot", { ...rest, className: cn("border-t border-strong font-medium", className) }) });
 }
 const ROW_VARIANT = {
   row: false,
-  group: "bg-[var(--bg-surface-2)] font-semibold",
+  group: "bg-surface-2 font-semibold",
   subtotal: "font-medium",
   // A 2px rule over the 1px divider the row above draws on its bottom: collapsed
   // borders meet on one line, the wider wins, and the heavier rule is what says "sum".
-  total: "border-t-2 border-t-[var(--border-strong)] font-semibold"
+  total: "border-t-2 border-t-strong font-semibold"
 };
 function TableRow({ valign, variant = "row", bordered, className, ref: refProp, ...rest }) {
   const { zebra, hover, rowDividers } = useContext(TableContext);
@@ -238,9 +238,9 @@ function TableRow({ valign, variant = "row", bordered, className, ref: refProp,
       ...rest,
       "data-variant": variant === "row" ? void 0 : variant,
       className: cn(
-        body && (bordered ?? rowDividers) && "border-b border-[var(--border)]",
-        record && zebra && "even:bg-[var(--bg-surface-2)]",
-        record && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        body && (bordered ?? rowDividers) && "border-b border-subtle",
+        record && zebra && "even:bg-surface-2",
+        record && hover && "transition-colors hover:bg-hover",
         // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it
         // (0.33: the light well is the page colour): it hovers to the card instead, the
         // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at
@@ -285,7 +285,7 @@ function TableHeaderCell({
         numeric && "tabular-nums",
         VALIGN[valign ?? rowVAlign ?? (head ? "bottom" : "top")],
         HEADER_WEIGHT[weight],
-        head ? "text-[var(--text-muted)]" : "text-[var(--text-secondary)]",
+        head ? "text-muted" : "text-secondary",
         textSize && HEADER_SIZE[textSize],
         className
       )
@@ -317,7 +317,7 @@ function TableCaption({ className, id, ...rest }) {
     {
       ...rest,
       id: id ?? captionId,
-      className: cn("mt-2 text-start text-sm text-[var(--text-muted)]", className)
+      className: cn("mt-2 text-start text-sm text-muted", className)
     }
   );
 }

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEdgeFade } from \"../lib/strip-fade\";\nimport { assignRef } from \"./choice-parts\";\nimport { THIN_SCROLLBAR_CLASS, useScrollOverflow } from \"./scroll-area\";\n\n/** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set\n *  inside a card's own padding whose columns are spaced by hand (`pl-2` on exactly the\n *  columns that need it). Type stays at the body size, as `comfortable`. */\nexport type TableDensity = \"comfortable\" | \"compact\" | \"none\";\n/** CSS `table-layout`. `auto` (the browser default) sizes columns to their content;\n *  `fixed` takes widths from the first row and ignores the rest — keksdose's VAT\n *  summary switches to it while editing so two inputs stop bidding against the\n *  figures for room. */\nexport type TableLayout = \"auto\" | \"fixed\";\nexport type TableAlign = \"start\" | \"center\" | \"end\";\n/**\n * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a\n * head cell sits on the `bottom` (a wrapped heading ends on the line above the\n * figures), a body cell at the `top` (a wrapped note starts level with its row). A\n * table whose cells are INPUTS wants `middle`: keksdose's VAT summary\n * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,\n * and a figure at the top of its cell sat above the middle of the field next to it —\n * so it writes `<tr className=\"align-middle\">` over raw `<th>`/`<td>`, because the\n * kit's cells each stated `align-top` and a class on the row could not reach them.\n */\nexport type TableVAlign = \"top\" | \"middle\" | \"bottom\";\n/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */\nexport type TableHeaderCellSize = \"xs\" | \"sm\";\n/** The header cell's weight. Default `medium`. */\nexport type TableHeaderCellWeight = \"normal\" | \"medium\" | \"semibold\";\n\n/**\n * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a\n * `group` heading (\"Current assets\", a tinted full-width label row), a `subtotal` under\n * a group, or the `total` of the whole table. kastlan's balance sheet, income statement\n * and journal entry each spelled these as `className=\"font-medium\"`, `\"font-bold\n * border-t-2\"` and `bg-muted/50` on the cell — three pages, three sets of classes for\n * the same four kinds of line.\n */\nexport type TableRowVariant = \"row\" | \"group\" | \"subtotal\" | \"total\";\n\ninterface TableContextValue {\n  density: TableDensity;\n  zebra: boolean;\n  hover: boolean;\n  rowDividers: boolean;\n  captionId: string;\n  registerCaption: () => () => void;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"comfortable\",\n  zebra: false,\n  hover: false,\n  rowDividers: true,\n  captionId: \"\",\n  registerCaption: () => () => {},\n});\n\ntype TableSection = \"head\" | \"body\" | \"foot\";\n\n/** Which section a row sits in — zebra and hover apply to body rows only. `undefined`\n *  outside the kit's section parts: a raw `<thead>` / `<tbody>`, which\n *  {@link useSection} then reads off the DOM. */\nconst SectionContext = createContext<TableSection | undefined>(undefined);\n\nconst SECTION_OF_TAG: Record<string, TableSection> = { THEAD: \"head\", TBODY: \"body\", TFOOT: \"foot\" };\n\n/**\n * The section a row or cell sits in: the kit part's context where there is one, else the\n * nearest `<thead>` / `<tbody>` / `<tfoot>` in the DOM.\n *\n * keksdose's VAT summary writes a raw `<thead>` round kit cells in places, and a\n * `TableHeaderCell` there took itself for a BODY cell — `scope=\"row\"`, body type — with\n * nothing on the page to say why. React cannot see an ancestor's tag, so the fallback\n * reads it after mount; a layout effect, so the corrected cell is what gets painted.\n */\nfunction useSection<E extends HTMLElement>(): [TableSection, ((el: E | null) => void) | undefined] {\n  const fromContext = useContext(SectionContext);\n  const [node, setNode] = useState<E | null>(null);\n  const [detected, setDetected] = useState<TableSection | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (fromContext !== undefined || !node) return;\n    const section = node.closest(\"thead, tbody, tfoot\");\n    const found = section ? SECTION_OF_TAG[section.tagName] : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- read off the DOM, which only exists after mount\n    if (found !== detected) setDetected(found);\n  }, [fromContext, node, detected]);\n  // No ref at all under a kit section: holding the node would cost every row and cell\n  // a second render on mount for an answer the context already gave.\n  return [fromContext ?? detected ?? \"body\", fromContext === undefined ? setNode : undefined];\n}\n\n/**\n * One callback ref for the caller's `ref` and the part's own (0.16.0). Every part takes\n * a `ref` to its DOM element — React 19 hands it to a function component as a prop —\n * and the parts that hold the node themselves (the table, a row or a head cell reading\n * its section off the DOM) must still get it when the caller passes one too.\n */\nfunction useMergedRef<E>(own: ((el: E | null) => void) | { current: E | null } | undefined, ref: Ref<E> | undefined) {\n  return useCallback(\n    (node: E | null) => {\n      assignRef(own as Ref<E> | undefined, node);\n      assignRef(ref, node);\n    },\n    [own, ref],\n  );\n}\n\n/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It\n *  cannot be left to CSS inheritance: every cell states its own default alignment,\n *  and a class on the cell beats one on the row. */\nconst RowVAlignContext = createContext<TableVAlign | undefined>(undefined);\n\nconst VALIGN: Record<TableVAlign, string> = {\n  top: \"align-top\",\n  middle: \"align-middle\",\n  bottom: \"align-bottom\",\n};\n\nconst HEADER_SIZE: Record<TableHeaderCellSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n};\n\nconst HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {\n  normal: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n};\n\nconst CELL_PAD: Record<TableDensity, string> = {\n  comfortable: \"px-3 py-2\",\n  compact: \"px-2 py-1\",\n  none: \"p-0\",\n};\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\n/**\n * The alignment a figure column wants: end-aligned (so the units line up under each\n * other in either reading direction) with tabular digits (so they line up at all).\n * Exported for a cell the kit did not render — a DataTable column, a `<td>` of the\n * app's own.\n */\nexport const NUMERIC_CELL_CLASS = \"text-end tabular-nums\";\n\n/**\n * Every part's props are `ComponentPropsWithRef` (0.16.0), so `ref` reaches the DOM\n * element: keksdose scrolled a budget row into view through `useId` + `getElementById`\n * because `<TableRow ref>` did not type-check.\n */\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** `compact` for a dense detail view (a ledger, a spec sheet). */\n  density?: TableDensity;\n  /** Tint every other body row. */\n  zebra?: boolean;\n  /** Tint the body row under the pointer. Off by default: a static table whose rows\n   *  light up promises a click that does nothing. With `zebra`, a tinted row hovers to\n   *  the card colour (0.33): the hover tint is too close to the well. */\n  hover?: boolean;\n  /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */\n  wrapperClassName?: string;\n  /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */\n  layout?: TableLayout;\n  /**\n   * A rounded border round the whole table (0.12.0) — for a table standing on the page\n   * or in a dialog rather than inside a card. kastlan wraps six of them in\n   * `<div className=\"rounded-md border\">` by hand (payment allocation, the new-budget\n   * lines, the meter readings, the deposit transactions, the unit values editor, the\n   * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip\n   * the rows' tint to its corners.\n   */\n  framed?: boolean;\n  /**\n   * The rule between body rows. Default true. `false` for a small table whose rows are\n   * spaced by their own content — keksdose's VAT summary, a block of three quiet\n   * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One\n   * row can still say otherwise with {@link TableRowProps.bordered}.\n   */\n  rowDividers?: boolean;\n  /**\n   * `\"phone\"`: below `sm` each body row becomes a block — its first cell the row's\n   * title, every further cell under its column's header as a small label — and the\n   * head row is visually hidden (still read by screen readers). For tables of PROSE,\n   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into\n   * two-word slivers at 390px and ran its third column off the screen). A table of\n   * numbers should keep scrolling sideways, which is why this is opt-in. The labels\n   * are the head row's cell texts, read from the DOM; a body cell spanning several\n   * columns gets none.\n   */\n  stack?: \"phone\";\n  /**\n   * Fade out an edge of the scroll wrapper while columns are hidden behind it (0.25).\n   *\n   * A table wider than its box scrolls sideways inside the wrapper, and on a phone —\n   * whose scrollbars are overlays that show only while you drag — nothing said there\n   * was more: the last visible column simply ended at the edge, often mid-word. 0.24\n   * drew a fade for ColumnRoleTable's preview (Kurvenschmiede: the fourth column's\n   * role select sat off-screen with no hint) by wrapping this Table and reaching its\n   * wrapper as the `<table>`'s `parentElement`; this is that fade as the Table's own,\n   * so a table needs neither the reach-around nor a box of its own round it.\n   *\n   * It is the kit Tabs strip's fade, MEASURED rather than assumed: nothing is drawn\n   * while the table fits, so a table that fits paints exactly as without the prop;\n   * the end with columns behind it fades, and both ends once scrolled into the\n   * middle; the ends are the reading direction's, so in RTL the hidden columns fade\n   * on the left. It is a `mask-image` — no layout change, no background colour to\n   * fade to, so it works on any surface in either theme — and never animated, so\n   * there is nothing for reduced motion to turn off. The wrapper's own scrollbars\n   * stay out of it (a fade on a classic scrollbar hid the very thing that says the\n   * box scrolls).\n   *\n   * Focus that lands in a cell behind the fade — a link, a select, a checkbox — is\n   * scrolled clear of it, cell and all where the cell fits; the browser's own scroll\n   * stops at the edge, under the fade. And while the overflowing wrapper ITSELF holds\n   * keyboard focus (it is a tab stop then, for arrow-key scrolling) the fade lifts, so\n   * the focus outline round the box is drawn whole rather than faded out at its sides.\n   *\n   * The wrapper carries `data-overflow` — `\"start\"`, `\"end\"` or `\"both\"`, in\n   * reading-direction terms, absent while it fits — for a caller's own affordance\n   * (a scroll button) and for tests, which cannot read a mask.\n   *\n   * Off by default: it changes how every overflowing table looks.\n   */\n  edgeFade?: boolean;\n}\n\n/**\n * Below `sm` on a `stack=\"phone\"` table: rows as blocks, the head visually hidden,\n * the first cell as a title, the others labelled by `data-label` (set by the table).\n */\nconst STACK_PHONE_CLASSES = cn(\n  \"max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block\",\n  \"max-sm:[&_thead]:sr-only\",\n  \"max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2\",\n  \"max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start\",\n  \"max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5\",\n  \"max-sm:[&_tbody_td:first-child]:font-medium\",\n  \"max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]\",\n);\n\n/**\n * A plain, static HTML table in the kit's tokens — for the detail views that need\n * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.\n *\n * kastlan renders about twenty of these on shadcn's Table parts; the part names here\n * are the same idea (`TableHead` is the `<thead>`, `TableHeaderCell` the `<th>`), so\n * the move is a rename rather than a rewrite.\n *\n * The table sits in an overflow-x wrapper, because a table cannot shrink below its\n * content and on a phone it would otherwise widen the page. While it overflows that\n * wrapper becomes a tab stop and a `role=\"region\"` named by the `TableCaption` (or the\n * table's own `aria-label`), so a keyboard user can scroll it and a reader can say\n * what it is — the same contract as {@link ScrollArea}.\n *\n * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left\n * page gets its first column on the right without a class changing.\n */\nexport function Table({\n  density = \"comfortable\",\n  zebra = false,\n  hover = false,\n  wrapperClassName,\n  layout,\n  framed = false,\n  rowDividers = true,\n  stack,\n  edgeFade = false,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TableProps) {\n  const captionId = useId();\n  const [captions, setCaptions] = useState(0);\n  const wrapper = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(wrapper);\n  const fade = useEdgeFade(wrapper, edgeFade);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n  const setTableRef = useMergedRef(tableRef, ref);\n\n  // `stack=\"phone\"`: label every body cell with its column's header text, and keep the\n  // table's roles explicit — `display: block` on table parts drops their table\n  // semantics in some engines. Re-run on any change to the rows, which the caller\n  // renders and this component never sees.\n  useLayoutEffect(() => {\n    const table = tableRef.current;\n    if (!stack || !table) return;\n    const label = () => {\n      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? \"\");\n      table.setAttribute(\"role\", \"table\");\n      for (const row of Array.from(table.rows)) {\n        row.setAttribute(\"role\", \"row\");\n        let column = 0;\n        for (const cell of Array.from(row.cells)) {\n          const span = cell.colSpan || 1;\n          if (cell.tagName === \"TH\") cell.setAttribute(\"role\", cell.closest(\"thead\") ? \"columnheader\" : \"rowheader\");\n          else cell.setAttribute(\"role\", \"cell\");\n          const text = span === 1 && column > 0 ? heads[column] : undefined;\n          if (cell.tagName === \"TD\" && text) cell.setAttribute(\"data-label\", text);\n          else cell.removeAttribute(\"data-label\");\n          column += span;\n        }\n      }\n    };\n    label();\n    const observer = typeof MutationObserver === \"undefined\" ? null : new MutationObserver(label);\n    observer?.observe(table, { childList: true, subtree: true, characterData: true });\n    return () => observer?.disconnect();\n  }, [stack]);\n\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      density,\n      zebra,\n      hover,\n      rowDividers,\n      captionId,\n      registerCaption: () => {\n        setCaptions((n) => n + 1);\n        return () => setCaptions((n) => n - 1);\n      },\n    }),\n    [density, zebra, hover, rowDividers, captionId],\n  );\n\n  const regionName = captions > 0 ? { \"aria-labelledby\": captionId } : ariaLabel ? { \"aria-label\": ariaLabel } : null;\n\n  return (\n    <TableContext.Provider value={ctx}>\n      <div\n        ref={wrapper}\n        // Only a region when it scrolls AND has a name: a landmark for every short\n        // table on a page would bury the real ones.\n        role={overflowing && regionName ? \"region\" : undefined}\n        {...(overflowing ? regionName : null)}\n        tabIndex={overflowing ? 0 : undefined}\n        data-overflowing={overflowing || undefined}\n        data-clips=\"\"\n        data-framed={framed || undefined}\n        // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing while off.\n        {...fade}\n        className={cn(\n          // `relative`: the containing block for an `sr-only` caption.\n          \"relative w-full overflow-x-auto\",\n          // On the scroll wrapper itself, so its clipping keeps the rows inside the\n          // rounded corners.\n          framed && \"rounded-md border border-[var(--border)]\",\n          THIN_SCROLLBAR_CLASS,\n          \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\n          ref={setTableRef}\n          aria-label={ariaLabel}\n          className={cn(\n            \"w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]\",\n            density === \"compact\" && \"text-xs\",\n            layout === \"fixed\" && \"table-fixed\",\n            layout === \"auto\" && \"table-auto\",\n            stack === \"phone\" && STACK_PHONE_CLASSES,\n            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport interface TableHeadProps extends ComponentPropsWithRef<\"thead\"> {\n  /** The rule under the head. Default true; `false` for a quiet header over a small\n   *  table (keksdose's VAT summary wrote `className=\"border-b-0\"` to lose it). */\n  bordered?: boolean;\n}\n\nexport function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {\n  return (\n    <SectionContext.Provider value=\"head\">\n      <thead {...rest} className={cn(bordered && \"border-b border-[var(--border)]\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableBodyProps extends ComponentPropsWithRef<\"tbody\"> {\n  /**\n   * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —\n   * `children` that render nothing: an empty `.map`, a `false`, `null`. kastlan hand-\n   * writes that row with a counted `colSpan` in unit-values-editor, the meeting agenda\n   * and invitations tabs, the journal-entry and invoice detail pages, and a column\n   * added later leaves every one of those counts one short.\n   */\n  empty?: ReactNode;\n}\n\nexport function TableBody({ className, empty, children, ...rest }: TableBodyProps) {\n  // `toArray` drops null/undefined/booleans and flattens arrays, so `[[], false]` —\n  // an empty map beside a conditional row that is off — is no rows.\n  const hasRows = Children.toArray(children).length > 0;\n  return (\n    <SectionContext.Provider value=\"body\">\n      <tbody {...rest} className={cn(\"[&>tr:last-child]:border-b-0\", className)}>\n        {hasRows || empty === undefined || empty === null || empty === false ? (\n          children\n        ) : (\n          <TableEmpty>{empty}</TableEmpty>\n        )}\n      </tbody>\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableEmptyProps extends Omit<ComponentPropsWithRef<\"tr\">, \"children\"> {\n  children: ReactNode;\n  /** Columns to span. Default: MEASURED — the widest row of the table it renders in,\n   *  counted after mount, so the row stays full width when a column is added. */\n  colSpan?: number;\n  /** Classes for the `<td>`. */\n  cellClassName?: string;\n}\n\n/**\n * The \"nothing here\" row: one cell across every column, centred, muted. What\n * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows\n * are not its direct children.\n */\nexport function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps) {\n  const { density } = useContext(TableContext);\n  const cell = useRef<HTMLTableCellElement | null>(null);\n  const [measured, setMeasured] = useState(1);\n  // Every render, deliberately: a column can appear in the head without anything this\n  // row depends on changing. It cannot loop — setting the same count is a bail-out.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    if (colSpan !== undefined) return;\n    const row = cell.current?.parentElement;\n    const table = cell.current?.closest(\"table\");\n    if (!row || !table) return;\n    let widest = 1;\n    for (const r of Array.from(table.rows)) {\n      if (r === row) continue;\n      let n = 0;\n      for (const c of Array.from(r.cells)) n += c.colSpan || 1;\n      widest = Math.max(widest, n);\n    }\n    setMeasured(widest);\n  });\n  return (\n    <tr {...rest} data-table-empty=\"\" className={className}>\n      <td\n        ref={cell}\n        colSpan={colSpan ?? measured}\n        className={cn(\n          // `none` keeps the message off the edges regardless: it is text, not a figure.\n          density === \"none\" ? \"py-2\" : CELL_PAD[density],\n          \"text-center text-[var(--text-muted)]\",\n          cellClassName,\n        )}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n\nexport type TableFootProps = ComponentPropsWithRef<\"tfoot\">;\n\n/** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`\n *  is what tells a reader it is a total rather than one more row. */\nexport function TableFoot({ className, ...rest }: TableFootProps) {\n  return (\n    <SectionContext.Provider value=\"foot\">\n      <tfoot {...rest} className={cn(\"border-t border-[var(--border-strong)] font-medium\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nconst ROW_VARIANT: Record<TableRowVariant, string | false> = {\n  row: false,\n  group: \"bg-[var(--bg-surface-2)] font-semibold\",\n  subtotal: \"font-medium\",\n  // A 2px rule over the 1px divider the row above draws on its bottom: collapsed\n  // borders meet on one line, the wider wins, and the heavier rule is what says \"sum\".\n  total: \"border-t-2 border-t-[var(--border-strong)] font-semibold\",\n};\n\n/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */\nexport interface TableRowProps extends ComponentPropsWithRef<\"tr\"> {\n  /** Vertical alignment for every cell of the row that does not set its own. See\n   *  {@link TableVAlign}. Left out, each cell keeps its default. */\n  valign?: TableVAlign;\n  /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows\n   *  only: a group heading or a total is not one more record. */\n  variant?: TableRowVariant;\n  /** The rule under this body row. Default: the table's `rowDividers`. */\n  bordered?: boolean;\n}\n\nexport function TableRow({ valign, variant = \"row\", bordered, className, ref: refProp, ...rest }: TableRowProps) {\n  const { zebra, hover, rowDividers } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableRowElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const body = section === \"body\";\n  const record = body && variant === \"row\";\n  const row = (\n    <tr\n      ref={ref}\n      {...rest}\n      data-variant={variant === \"row\" ? undefined : variant}\n      className={cn(\n        body && (bordered ?? rowDividers) && \"border-b border-[var(--border)]\",\n        record && zebra && \"even:bg-[var(--bg-surface-2)]\",\n        record && hover && \"transition-colors hover:bg-[var(--bg-hover)]\",\n        // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it\n        // (0.33: the light well is the page colour): it hovers to the card instead, the\n        // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at\n        // 4.5:1 (docs/colour-roles-harmonization.md §12.2). `even:hover:` outranks the\n        // row's own `hover:`.\n        record && zebra && hover && \"even:hover:bg-surface\",\n        ROW_VARIANT[variant],\n        // On the row as well, for a raw `<td>` of the caller's, which inherits it.\n        valign && VALIGN[valign],\n        className,\n      )}\n    />\n  );\n  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;\n}\n\ninterface CellAlignProps {\n  /** Shorthand for a figure column: end-aligned, tabular digits. */\n  numeric?: boolean;\n  /** Logical alignment. Default `start` (`end` when `numeric`). */\n  align?: TableAlign;\n  /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and\n   *  `top` for a body cell. See {@link TableVAlign}. */\n  valign?: TableVAlign;\n}\n\n/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */\nexport interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<\"th\">, \"align\" | \"valign\">, CellAlignProps {\n  /**\n   * Type size. Left out: `xs` in the head, the table's own size in the body — as\n   * before. keksdose's VAT summary heads its columns at the body size and normal weight\n   * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a\n   * small table of figures, and could not say so without overriding classes.\n   */\n  size?: TableHeaderCellSize;\n  /** Default `medium`. `normal` for the quiet header above; see {@link size}. */\n  weight?: TableHeaderCellWeight;\n}\n\n/**\n * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header\n * cell in a body row is the row's label (\"Net rent\" in a key-value table), and a\n * reader needs the scope to read it with each cell beside it.\n */\nexport function TableHeaderCell({\n  numeric = false,\n  align,\n  valign,\n  size,\n  weight = \"medium\",\n  scope,\n  className,\n  ref: refProp,\n  ...rest\n}: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableCellElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const rowVAlign = useContext(RowVAlignContext);\n  const head = section === \"head\";\n  const textSize = size ?? (head ? \"xs\" : undefined);\n  return (\n    <th\n      ref={ref}\n      {...rest}\n      scope={scope ?? (section === \"head\" ? \"col\" : \"row\")}\n      className={cn(\n        CELL_PAD[density],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums\",\n        VALIGN[valign ?? rowVAlign ?? (head ? \"bottom\" : \"top\")],\n        HEADER_WEIGHT[weight],\n        head ? \"text-[var(--text-muted)]\" : \"text-[var(--text-secondary)]\",\n        textSize && HEADER_SIZE[textSize],\n        className,\n      )}\n    />\n  );\n}\n\nexport interface TableCellProps extends Omit<ComponentPropsWithRef<\"td\">, \"align\" | \"valign\">, CellAlignProps {}\n\nexport function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {\n  const { density } = useContext(TableContext);\n  const rowVAlign = useContext(RowVAlignContext);\n  return (\n    <td\n      {...rest}\n      className={cn(\n        CELL_PAD[density],\n        VALIGN[valign ?? rowVAlign ?? \"top\"],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums whitespace-nowrap\",\n        className,\n      )}\n    />\n  );\n}\n\nexport type TableCaptionProps = ComponentPropsWithRef<\"caption\">;\n\n/**\n * The table's title. Beneath the table by default (`caption-bottom`, the shadcn\n * convention kastlan's views already follow); `className=\"caption-top\"` moves it.\n * `className=\"sr-only\"` keeps it for readers only — the wrapper is `relative`, so\n * the hidden caption stays inside it.\n *\n * It also names the scroll region when the table overflows: it registers itself\n * with the {@link Table} so the wrapper points at an id that exists, and never at\n * one that does not.\n */\nexport function TableCaption({ className, id, ...rest }: TableCaptionProps) {\n  const { captionId, registerCaption } = useContext(TableContext);\n  useLayoutEffect(() => (id ? undefined : registerCaption()), [id, registerCaption]);\n  return (\n    <caption\n      {...rest}\n      id={id ?? captionId}\n      className={cn(\"mt-2 text-start text-sm text-[var(--text-muted)]\", className)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEdgeFade } from \"../lib/strip-fade\";\nimport { assignRef } from \"./field-parts\";\nimport { THIN_SCROLLBAR_CLASS, useScrollOverflow } from \"./scroll-area\";\n\n/** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set\n *  inside a card's own padding whose columns are spaced by hand (`pl-2` on exactly the\n *  columns that need it). Type stays at the body size, as `comfortable`. */\nexport type TableDensity = \"comfortable\" | \"compact\" | \"none\";\n/** CSS `table-layout`. `auto` (the browser default) sizes columns to their content;\n *  `fixed` takes widths from the first row and ignores the rest — keksdose's VAT\n *  summary switches to it while editing so two inputs stop bidding against the\n *  figures for room. */\nexport type TableLayout = \"auto\" | \"fixed\";\nexport type TableAlign = \"start\" | \"center\" | \"end\";\n/**\n * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a\n * head cell sits on the `bottom` (a wrapped heading ends on the line above the\n * figures), a body cell at the `top` (a wrapped note starts level with its row). A\n * table whose cells are INPUTS wants `middle`: keksdose's VAT summary\n * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,\n * and a figure at the top of its cell sat above the middle of the field next to it —\n * so it writes `<tr className=\"align-middle\">` over raw `<th>`/`<td>`, because the\n * kit's cells each stated `align-top` and a class on the row could not reach them.\n */\nexport type TableVAlign = \"top\" | \"middle\" | \"bottom\";\n/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */\nexport type TableHeaderCellSize = \"xs\" | \"sm\";\n/** The header cell's weight. Default `medium`. */\nexport type TableHeaderCellWeight = \"normal\" | \"medium\" | \"semibold\";\n\n/**\n * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a\n * `group` heading (\"Current assets\", a tinted full-width label row), a `subtotal` under\n * a group, or the `total` of the whole table. kastlan's balance sheet, income statement\n * and journal entry each spelled these as `className=\"font-medium\"`, `\"font-bold\n * border-t-2\"` and `bg-muted/50` on the cell — three pages, three sets of classes for\n * the same four kinds of line.\n */\nexport type TableRowVariant = \"row\" | \"group\" | \"subtotal\" | \"total\";\n\ninterface TableContextValue {\n  density: TableDensity;\n  zebra: boolean;\n  hover: boolean;\n  rowDividers: boolean;\n  captionId: string;\n  registerCaption: () => () => void;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"comfortable\",\n  zebra: false,\n  hover: false,\n  rowDividers: true,\n  captionId: \"\",\n  registerCaption: () => () => {},\n});\n\ntype TableSection = \"head\" | \"body\" | \"foot\";\n\n/** Which section a row sits in — zebra and hover apply to body rows only. `undefined`\n *  outside the kit's section parts: a raw `<thead>` / `<tbody>`, which\n *  {@link useSection} then reads off the DOM. */\nconst SectionContext = createContext<TableSection | undefined>(undefined);\n\nconst SECTION_OF_TAG: Record<string, TableSection> = { THEAD: \"head\", TBODY: \"body\", TFOOT: \"foot\" };\n\n/**\n * The section a row or cell sits in: the kit part's context where there is one, else the\n * nearest `<thead>` / `<tbody>` / `<tfoot>` in the DOM.\n *\n * keksdose's VAT summary writes a raw `<thead>` round kit cells in places, and a\n * `TableHeaderCell` there took itself for a BODY cell — `scope=\"row\"`, body type — with\n * nothing on the page to say why. React cannot see an ancestor's tag, so the fallback\n * reads it after mount; a layout effect, so the corrected cell is what gets painted.\n */\nfunction useSection<E extends HTMLElement>(): [TableSection, ((el: E | null) => void) | undefined] {\n  const fromContext = useContext(SectionContext);\n  const [node, setNode] = useState<E | null>(null);\n  const [detected, setDetected] = useState<TableSection | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (fromContext !== undefined || !node) return;\n    const section = node.closest(\"thead, tbody, tfoot\");\n    const found = section ? SECTION_OF_TAG[section.tagName] : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- read off the DOM, which only exists after mount\n    if (found !== detected) setDetected(found);\n  }, [fromContext, node, detected]);\n  // No ref at all under a kit section: holding the node would cost every row and cell\n  // a second render on mount for an answer the context already gave.\n  return [fromContext ?? detected ?? \"body\", fromContext === undefined ? setNode : undefined];\n}\n\n/**\n * One callback ref for the caller's `ref` and the part's own (0.16.0). Every part takes\n * a `ref` to its DOM element — React 19 hands it to a function component as a prop —\n * and the parts that hold the node themselves (the table, a row or a head cell reading\n * its section off the DOM) must still get it when the caller passes one too.\n */\nfunction useMergedRef<E>(own: ((el: E | null) => void) | { current: E | null } | undefined, ref: Ref<E> | undefined) {\n  return useCallback(\n    (node: E | null) => {\n      assignRef(own as Ref<E> | undefined, node);\n      assignRef(ref, node);\n    },\n    [own, ref],\n  );\n}\n\n/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It\n *  cannot be left to CSS inheritance: every cell states its own default alignment,\n *  and a class on the cell beats one on the row. */\nconst RowVAlignContext = createContext<TableVAlign | undefined>(undefined);\n\nconst VALIGN: Record<TableVAlign, string> = {\n  top: \"align-top\",\n  middle: \"align-middle\",\n  bottom: \"align-bottom\",\n};\n\nconst HEADER_SIZE: Record<TableHeaderCellSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n};\n\nconst HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {\n  normal: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n};\n\nconst CELL_PAD: Record<TableDensity, string> = {\n  comfortable: \"px-3 py-2\",\n  compact: \"px-2 py-1\",\n  none: \"p-0\",\n};\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\n/**\n * The alignment a figure column wants: end-aligned (so the units line up under each\n * other in either reading direction) with tabular digits (so they line up at all).\n * Exported for a cell the kit did not render — a DataTable column, a `<td>` of the\n * app's own.\n */\nexport const NUMERIC_CELL_CLASS = \"text-end tabular-nums\";\n\n/**\n * Every part's props are `ComponentPropsWithRef` (0.16.0), so `ref` reaches the DOM\n * element: keksdose scrolled a budget row into view through `useId` + `getElementById`\n * because `<TableRow ref>` did not type-check.\n */\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** `compact` for a dense detail view (a ledger, a spec sheet). */\n  density?: TableDensity;\n  /** Tint every other body row. */\n  zebra?: boolean;\n  /** Tint the body row under the pointer. Off by default: a static table whose rows\n   *  light up promises a click that does nothing. With `zebra`, a tinted row hovers to\n   *  the card colour (0.33): the hover tint is too close to the well. */\n  hover?: boolean;\n  /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */\n  wrapperClassName?: string;\n  /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */\n  layout?: TableLayout;\n  /**\n   * A rounded border round the whole table (0.12.0) — for a table standing on the page\n   * or in a dialog rather than inside a card. kastlan wraps six of them in\n   * `<div className=\"rounded-md border\">` by hand (payment allocation, the new-budget\n   * lines, the meter readings, the deposit transactions, the unit values editor, the\n   * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip\n   * the rows' tint to its corners.\n   */\n  framed?: boolean;\n  /**\n   * The rule between body rows. Default true. `false` for a small table whose rows are\n   * spaced by their own content — keksdose's VAT summary, a block of three quiet\n   * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One\n   * row can still say otherwise with {@link TableRowProps.bordered}.\n   */\n  rowDividers?: boolean;\n  /**\n   * `\"phone\"`: below `sm` each body row becomes a block — its first cell the row's\n   * title, every further cell under its column's header as a small label — and the\n   * head row is visually hidden (still read by screen readers). For tables of PROSE,\n   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into\n   * two-word slivers at 390px and ran its third column off the screen). A table of\n   * numbers should keep scrolling sideways, which is why this is opt-in. The labels\n   * are the head row's cell texts, read from the DOM; a body cell spanning several\n   * columns gets none.\n   */\n  stack?: \"phone\";\n  /**\n   * Fade out an edge of the scroll wrapper while columns are hidden behind it (0.25).\n   *\n   * A table wider than its box scrolls sideways inside the wrapper, and on a phone —\n   * whose scrollbars are overlays that show only while you drag — nothing said there\n   * was more: the last visible column simply ended at the edge, often mid-word. 0.24\n   * drew a fade for ColumnRoleTable's preview (Kurvenschmiede: the fourth column's\n   * role select sat off-screen with no hint) by wrapping this Table and reaching its\n   * wrapper as the `<table>`'s `parentElement`; this is that fade as the Table's own,\n   * so a table needs neither the reach-around nor a box of its own round it.\n   *\n   * It is the kit Tabs strip's fade, MEASURED rather than assumed: nothing is drawn\n   * while the table fits, so a table that fits paints exactly as without the prop;\n   * the end with columns behind it fades, and both ends once scrolled into the\n   * middle; the ends are the reading direction's, so in RTL the hidden columns fade\n   * on the left. It is a `mask-image` — no layout change, no background colour to\n   * fade to, so it works on any surface in either theme — and never animated, so\n   * there is nothing for reduced motion to turn off. The wrapper's own scrollbars\n   * stay out of it (a fade on a classic scrollbar hid the very thing that says the\n   * box scrolls).\n   *\n   * Focus that lands in a cell behind the fade — a link, a select, a checkbox — is\n   * scrolled clear of it, cell and all where the cell fits; the browser's own scroll\n   * stops at the edge, under the fade. And while the overflowing wrapper ITSELF holds\n   * keyboard focus (it is a tab stop then, for arrow-key scrolling) the fade lifts, so\n   * the focus outline round the box is drawn whole rather than faded out at its sides.\n   *\n   * The wrapper carries `data-overflow` — `\"start\"`, `\"end\"` or `\"both\"`, in\n   * reading-direction terms, absent while it fits — for a caller's own affordance\n   * (a scroll button) and for tests, which cannot read a mask.\n   *\n   * Off by default: it changes how every overflowing table looks.\n   */\n  edgeFade?: boolean;\n}\n\n/**\n * Below `sm` on a `stack=\"phone\"` table: rows as blocks, the head visually hidden,\n * the first cell as a title, the others labelled by `data-label` (set by the table).\n */\nconst STACK_PHONE_CLASSES = cn(\n  \"max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block\",\n  \"max-sm:[&_thead]:sr-only\",\n  \"max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2\",\n  \"max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start\",\n  \"max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5\",\n  \"max-sm:[&_tbody_td:first-child]:font-medium\",\n  \"max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-muted max-sm:[&_td[data-label]]:before:content-[attr(data-label)]\",\n);\n\n/**\n * A plain, static HTML table in the kit's tokens — for the detail views that need\n * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.\n *\n * kastlan renders about twenty of these on shadcn's Table parts; the part names here\n * are the same idea (`TableHead` is the `<thead>`, `TableHeaderCell` the `<th>`), so\n * the move is a rename rather than a rewrite.\n *\n * The table sits in an overflow-x wrapper, because a table cannot shrink below its\n * content and on a phone it would otherwise widen the page. While it overflows that\n * wrapper becomes a tab stop and a `role=\"region\"` named by the `TableCaption` (or the\n * table's own `aria-label`), so a keyboard user can scroll it and a reader can say\n * what it is — the same contract as {@link ScrollArea}.\n *\n * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left\n * page gets its first column on the right without a class changing.\n */\nexport function Table({\n  density = \"comfortable\",\n  zebra = false,\n  hover = false,\n  wrapperClassName,\n  layout,\n  framed = false,\n  rowDividers = true,\n  stack,\n  edgeFade = false,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TableProps) {\n  const captionId = useId();\n  const [captions, setCaptions] = useState(0);\n  const wrapper = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(wrapper);\n  const fade = useEdgeFade(wrapper, edgeFade);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n  const setTableRef = useMergedRef(tableRef, ref);\n\n  // `stack=\"phone\"`: label every body cell with its column's header text, and keep the\n  // table's roles explicit — `display: block` on table parts drops their table\n  // semantics in some engines. Re-run on any change to the rows, which the caller\n  // renders and this component never sees.\n  useLayoutEffect(() => {\n    const table = tableRef.current;\n    if (!stack || !table) return;\n    const label = () => {\n      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? \"\");\n      table.setAttribute(\"role\", \"table\");\n      for (const row of Array.from(table.rows)) {\n        row.setAttribute(\"role\", \"row\");\n        let column = 0;\n        for (const cell of Array.from(row.cells)) {\n          const span = cell.colSpan || 1;\n          if (cell.tagName === \"TH\") cell.setAttribute(\"role\", cell.closest(\"thead\") ? \"columnheader\" : \"rowheader\");\n          else cell.setAttribute(\"role\", \"cell\");\n          const text = span === 1 && column > 0 ? heads[column] : undefined;\n          if (cell.tagName === \"TD\" && text) cell.setAttribute(\"data-label\", text);\n          else cell.removeAttribute(\"data-label\");\n          column += span;\n        }\n      }\n    };\n    label();\n    const observer = typeof MutationObserver === \"undefined\" ? null : new MutationObserver(label);\n    observer?.observe(table, { childList: true, subtree: true, characterData: true });\n    return () => observer?.disconnect();\n  }, [stack]);\n\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      density,\n      zebra,\n      hover,\n      rowDividers,\n      captionId,\n      registerCaption: () => {\n        setCaptions((n) => n + 1);\n        return () => setCaptions((n) => n - 1);\n      },\n    }),\n    [density, zebra, hover, rowDividers, captionId],\n  );\n\n  const regionName = captions > 0 ? { \"aria-labelledby\": captionId } : ariaLabel ? { \"aria-label\": ariaLabel } : null;\n\n  return (\n    <TableContext.Provider value={ctx}>\n      <div\n        ref={wrapper}\n        // Only a region when it scrolls AND has a name: a landmark for every short\n        // table on a page would bury the real ones.\n        role={overflowing && regionName ? \"region\" : undefined}\n        {...(overflowing ? regionName : null)}\n        tabIndex={overflowing ? 0 : undefined}\n        data-overflowing={overflowing || undefined}\n        data-clips=\"\"\n        data-framed={framed || undefined}\n        // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing while off.\n        {...fade}\n        className={cn(\n          // `relative`: the containing block for an `sr-only` caption.\n          \"relative w-full overflow-x-auto\",\n          // On the scroll wrapper itself, so its clipping keeps the rows inside the\n          // rounded corners.\n          framed && \"rounded-md border border-subtle\",\n          THIN_SCROLLBAR_CLASS,\n          \"focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\n          ref={setTableRef}\n          aria-label={ariaLabel}\n          className={cn(\n            \"w-full caption-bottom border-collapse text-sm text-primary\",\n            density === \"compact\" && \"text-xs\",\n            layout === \"fixed\" && \"table-fixed\",\n            layout === \"auto\" && \"table-auto\",\n            stack === \"phone\" && STACK_PHONE_CLASSES,\n            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport interface TableHeadProps extends ComponentPropsWithRef<\"thead\"> {\n  /** The rule under the head. Default true; `false` for a quiet header over a small\n   *  table (keksdose's VAT summary wrote `className=\"border-b-0\"` to lose it). */\n  bordered?: boolean;\n}\n\nexport function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {\n  return (\n    <SectionContext.Provider value=\"head\">\n      <thead {...rest} className={cn(bordered && \"border-b border-subtle\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableBodyProps extends ComponentPropsWithRef<\"tbody\"> {\n  /**\n   * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —\n   * `children` that render nothing: an empty `.map`, a `false`, `null`. kastlan hand-\n   * writes that row with a counted `colSpan` in unit-values-editor, the meeting agenda\n   * and invitations tabs, the journal-entry and invoice detail pages, and a column\n   * added later leaves every one of those counts one short.\n   */\n  empty?: ReactNode;\n}\n\nexport function TableBody({ className, empty, children, ...rest }: TableBodyProps) {\n  // `toArray` drops null/undefined/booleans and flattens arrays, so `[[], false]` —\n  // an empty map beside a conditional row that is off — is no rows.\n  const hasRows = Children.toArray(children).length > 0;\n  return (\n    <SectionContext.Provider value=\"body\">\n      <tbody {...rest} className={cn(\"[&>tr:last-child]:border-b-0\", className)}>\n        {hasRows || empty === undefined || empty === null || empty === false ? (\n          children\n        ) : (\n          <TableEmpty>{empty}</TableEmpty>\n        )}\n      </tbody>\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableEmptyProps extends Omit<ComponentPropsWithRef<\"tr\">, \"children\"> {\n  children: ReactNode;\n  /** Columns to span. Default: MEASURED — the widest row of the table it renders in,\n   *  counted after mount, so the row stays full width when a column is added. */\n  colSpan?: number;\n  /** Classes for the `<td>`. */\n  cellClassName?: string;\n}\n\n/**\n * The \"nothing here\" row: one cell across every column, centred, muted. What\n * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows\n * are not its direct children.\n */\nexport function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps) {\n  const { density } = useContext(TableContext);\n  const cell = useRef<HTMLTableCellElement | null>(null);\n  const [measured, setMeasured] = useState(1);\n  // Every render, deliberately: a column can appear in the head without anything this\n  // row depends on changing. It cannot loop — setting the same count is a bail-out.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    if (colSpan !== undefined) return;\n    const row = cell.current?.parentElement;\n    const table = cell.current?.closest(\"table\");\n    if (!row || !table) return;\n    let widest = 1;\n    for (const r of Array.from(table.rows)) {\n      if (r === row) continue;\n      let n = 0;\n      for (const c of Array.from(r.cells)) n += c.colSpan || 1;\n      widest = Math.max(widest, n);\n    }\n    setMeasured(widest);\n  });\n  return (\n    <tr {...rest} data-table-empty=\"\" className={className}>\n      <td\n        ref={cell}\n        colSpan={colSpan ?? measured}\n        className={cn(\n          // `none` keeps the message off the edges regardless: it is text, not a figure.\n          density === \"none\" ? \"py-2\" : CELL_PAD[density],\n          \"text-center text-muted\",\n          cellClassName,\n        )}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n\nexport type TableFootProps = ComponentPropsWithRef<\"tfoot\">;\n\n/** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`\n *  is what tells a reader it is a total rather than one more row. */\nexport function TableFoot({ className, ...rest }: TableFootProps) {\n  return (\n    <SectionContext.Provider value=\"foot\">\n      <tfoot {...rest} className={cn(\"border-t border-strong font-medium\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nconst ROW_VARIANT: Record<TableRowVariant, string | false> = {\n  row: false,\n  group: \"bg-surface-2 font-semibold\",\n  subtotal: \"font-medium\",\n  // A 2px rule over the 1px divider the row above draws on its bottom: collapsed\n  // borders meet on one line, the wider wins, and the heavier rule is what says \"sum\".\n  total: \"border-t-2 border-t-strong font-semibold\",\n};\n\n/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */\nexport interface TableRowProps extends ComponentPropsWithRef<\"tr\"> {\n  /** Vertical alignment for every cell of the row that does not set its own. See\n   *  {@link TableVAlign}. Left out, each cell keeps its default. */\n  valign?: TableVAlign;\n  /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows\n   *  only: a group heading or a total is not one more record. */\n  variant?: TableRowVariant;\n  /** The rule under this body row. Default: the table's `rowDividers`. */\n  bordered?: boolean;\n}\n\nexport function TableRow({ valign, variant = \"row\", bordered, className, ref: refProp, ...rest }: TableRowProps) {\n  const { zebra, hover, rowDividers } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableRowElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const body = section === \"body\";\n  const record = body && variant === \"row\";\n  const row = (\n    <tr\n      ref={ref}\n      {...rest}\n      data-variant={variant === \"row\" ? undefined : variant}\n      className={cn(\n        body && (bordered ?? rowDividers) && \"border-b border-subtle\",\n        record && zebra && \"even:bg-surface-2\",\n        record && hover && \"transition-colors hover:bg-hover\",\n        // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it\n        // (0.33: the light well is the page colour): it hovers to the card instead, the\n        // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at\n        // 4.5:1 (docs/colour-roles-harmonization.md §12.2). `even:hover:` outranks the\n        // row's own `hover:`.\n        record && zebra && hover && \"even:hover:bg-surface\",\n        ROW_VARIANT[variant],\n        // On the row as well, for a raw `<td>` of the caller's, which inherits it.\n        valign && VALIGN[valign],\n        className,\n      )}\n    />\n  );\n  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;\n}\n\ninterface CellAlignProps {\n  /** Shorthand for a figure column: end-aligned, tabular digits. */\n  numeric?: boolean;\n  /** Logical alignment. Default `start` (`end` when `numeric`). */\n  align?: TableAlign;\n  /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and\n   *  `top` for a body cell. See {@link TableVAlign}. */\n  valign?: TableVAlign;\n}\n\n/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */\nexport interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<\"th\">, \"align\" | \"valign\">, CellAlignProps {\n  /**\n   * Type size. Left out: `xs` in the head, the table's own size in the body — as\n   * before. keksdose's VAT summary heads its columns at the body size and normal weight\n   * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a\n   * small table of figures, and could not say so without overriding classes.\n   */\n  size?: TableHeaderCellSize;\n  /** Default `medium`. `normal` for the quiet header above; see {@link size}. */\n  weight?: TableHeaderCellWeight;\n}\n\n/**\n * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header\n * cell in a body row is the row's label (\"Net rent\" in a key-value table), and a\n * reader needs the scope to read it with each cell beside it.\n */\nexport function TableHeaderCell({\n  numeric = false,\n  align,\n  valign,\n  size,\n  weight = \"medium\",\n  scope,\n  className,\n  ref: refProp,\n  ...rest\n}: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableCellElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const rowVAlign = useContext(RowVAlignContext);\n  const head = section === \"head\";\n  const textSize = size ?? (head ? \"xs\" : undefined);\n  return (\n    <th\n      ref={ref}\n      {...rest}\n      scope={scope ?? (section === \"head\" ? \"col\" : \"row\")}\n      className={cn(\n        CELL_PAD[density],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums\",\n        VALIGN[valign ?? rowVAlign ?? (head ? \"bottom\" : \"top\")],\n        HEADER_WEIGHT[weight],\n        head ? \"text-muted\" : \"text-secondary\",\n        textSize && HEADER_SIZE[textSize],\n        className,\n      )}\n    />\n  );\n}\n\nexport interface TableCellProps extends Omit<ComponentPropsWithRef<\"td\">, \"align\" | \"valign\">, CellAlignProps {}\n\nexport function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {\n  const { density } = useContext(TableContext);\n  const rowVAlign = useContext(RowVAlignContext);\n  return (\n    <td\n      {...rest}\n      className={cn(\n        CELL_PAD[density],\n        VALIGN[valign ?? rowVAlign ?? \"top\"],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums whitespace-nowrap\",\n        className,\n      )}\n    />\n  );\n}\n\nexport type TableCaptionProps = ComponentPropsWithRef<\"caption\">;\n\n/**\n * The table's title. Beneath the table by default (`caption-bottom`, the shadcn\n * convention kastlan's views already follow); `className=\"caption-top\"` moves it.\n * `className=\"sr-only\"` keeps it for readers only — the wrapper is `relative`, so\n * the hidden caption stays inside it.\n *\n * It also names the scroll region when the table overflows: it registers itself\n * with the {@link Table} so the wrapper points at an id that exists, and never at\n * one that does not.\n */\nexport function TableCaption({ className, id, ...rest }: TableCaptionProps) {\n  const { captionId, registerCaption } = useContext(TableContext);\n  useLayoutEffect(() => (id ? undefined : registerCaption()), [id, registerCaption]);\n  return (\n    <caption\n      {...rest}\n      id={id ?? captionId}\n      className={cn(\"mt-2 text-start text-sm text-muted\", className)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/tabs.d.ts

@@ -0,0 +1,182 @@
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_TABS_LABELS } from "./ui-labels.js";
+/** One tab of a {@link Tabs} strip. */
+export interface TabItem<T extends string> {
+    id: T;
+    /** A ReactNode so a tab can pair an icon with text. */
+    label: ReactNode;
+    /** Optional trailing node (e.g. a count pill). */
+    badge?: ReactNode;
+    /** Marks a tab that IS a route — see {@link TabsProps}. */
+    href?: string;
+    /** Leading decoration: an icon, or the colour swatches of the lines this tab
+     *  draws in a chart above the strip. Hidden from assistive tech — it repeats
+     *  what the label says, or it says something the label must say instead. */
+    icon?: ReactNode;
+    /** A second, smaller line under the label — the one fact that tells two tabs
+     *  with similar labels apart ("80 km/h", "Level 3"). Part of the tab's name. */
+    detail?: ReactNode;
+    /** A tab that exists as a slot with nothing in it yet, drawn with a dashed
+     *  outline so a gap in a sequence looks like a gap. Visual only: say "empty" in
+     *  the label or `detail` if a screen reader needs to know. */
+    empty?: boolean;
+    /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a
+     *  workbook cannot be without. Default: removable. */
+    removable?: boolean;
+    /** Plain-text name for the labels the strip composes about this tab ("Remove
+     *  …"), for when `label` is not a string. Default: `label` if it is a string,
+     *  else the id. */
+    name?: string;
+}
+/** The strings the strip renders on its own behalf — only when it can add or
+ *  remove tabs. */
+export interface TabsLabels {
+    /** The "add" button's visible text when the caller gives no `addLabel`. */
+    add: string;
+    /** Accessible name of a tab's × — "Remove <tab>". */
+    remove: (tab: string) => string;
+}
+export { DEFAULT_TABS_LABELS };
+/**
+ * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything
+ * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an
+ * `aria-describedby` — lands there. `onChange` is omitted from the div's props because
+ * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and
+ * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up
+ * through `panelId`, which is the whole point of that prop.
+ */
+export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
+    /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an
+     *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:
+     *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose
+     *  feedback #451), while a plain click still goes through `onChange` and stays
+     *  client-side. Tabs that only flip local state leave it unset — a link to a URL
+     *  that does not select the tab would be worse than no link. */
+    tabs: TabItem<T>[];
+    active: T;
+    onChange: (id: T) => void;
+    className?: string;
+    /** Let the strip WRAP onto as many rows as it needs below `md`, instead of
+     *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.
+     *  Keksdose live #262: ten reports on a 406px screen showed about three, and the
+     *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.
+     *  *"I would rather keep the tabs but have multirow tabs depending on the screen
+     *  size, I will not loose the function to see all reports at once and navigate by
+     *  single click rather by double click."*
+     *
+     *  The active MARKER has to change with the layout, which is why this cannot be
+     *  done from a call site with a `className`: the default marker is a `border-b-2`
+     *  underline riding the container's own bottom rule, and a tab sitting in a row
+     *  that does not touch that rule cannot wear it — every row but the last would
+     *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a
+     *  pixel into the row beneath it. A wrapped strip marks the active tab with a
+     *  filled brand chip instead, which is also the only thing findable at a glance
+     *  among ten same-weight labels on three rows.
+     *
+     *  From `md` up NOTHING changes: same single-line underline strip, same paddings,
+     *  same colours as every other strip in the app.
+     *
+     *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)
+     *  already fit a phone row, and turning those into chips would be an unrequested
+     *  redesign of three other pages. */
+    wrap?: boolean;
+    /**
+     * `id` of the element the caller renders the open tab's content into — the missing
+     * half of `role="tab"`. A tab that controls nothing is a tab in name only: a screen
+     * reader announces "tab, 2 of 5" and then has no way to take the user to what it
+     * opened, and no way back.
+     *
+     * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the
+     * content lives wherever the caller put it — three Keksdose pages render it in a
+     * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route
+     * (`href`), in which case the panel is a whole page this component never sees.
+     * Wrapping `children` here would mean either moving that content into the strip's
+     * subtree — a layout change on every page that uses tabs — or shipping a wrapper
+     * that only some callers could use. So the two halves are joined by an id instead.
+     *
+     * Wire the other end yourself:
+     *
+     * ```tsx
+     * <Tabs tabs={tabs} active={active} onChange={setActive} panelId="report-panel" />
+     * <div id="report-panel" role="tabpanel" aria-labelledby="report-panel-tab" tabIndex={-1}>
+     * ```
+     *
+     * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the
+     * closed tabs' panels are not in the document, and a dangling `aria-controls`
+     * describes a tab as opening something that is not there.
+     */
+    panelId?: string;
+    /**
+     * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab
+     * (only on the open one with `removeOn="active"`).
+     *
+     * The × is on the open tab only — a row of tabs each carrying one is a row of
+     * things to hit by accident, and the tab you can remove should be the one you
+     * are looking at — but its room is reserved on every removable tab, so opening a
+     * tab never widens it and never pushes the rest of the strip along (lenkbank
+     * feedback #72). It is not a tab stop of its own: the strip stays one stop, and the
+     * keyboard path is Delete (announced through `aria-keyshortcuts`), which removes
+     * whichever tab has focus (see `removeOn`).
+     *
+     * Assistive tech meets the remove as a "Remove <tab>" button right AFTER the strip,
+     * not as the × (0.34): a tablist may own tabs only, so the drawn × is the pointer's
+     * and `aria-hidden`, and the named button beside the tablist is visually hidden.
+     *
+     * The strip only ASKS: it calls this, and the tab goes when the caller drops it
+     * from `tabs` — after a confirmation, a request, whatever it needs. When it does,
+     * focus that was on the removed tab (or its ×) moves to the open tab if the
+     * removed one was open, else to its neighbour, instead of falling to the page.
+     */
+    onRemove?: (id: T) => void;
+    /**
+     * Which tabs the Delete key removes.
+     *
+     * - `"every"` (default): any focused removable tab — the ARIA pattern's reading.
+     * - `"active"`: only the OPEN tab, the same one that wears the ×. For a strip whose
+     *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement
+     *   sheet at once), so arrowing across the strip and pressing Delete cannot take
+     *   out a sheet the user is not looking at. Delete on a closed tab does nothing,
+     *   and only the open tab announces the shortcut (`aria-keyshortcuts`).
+     *
+     * Either way the × is drawn on the open tab only and its room stays reserved on
+     * every removable tab, so the strip never relayouts when the selection moves.
+     */
+    removeOn?: "every" | "active";
+    /** Renders an "add" button after the last tab, outside the tablist — it is an
+     *  action, not a tab, and a tablist may own only tabs. */
+    onAdd?: () => void;
+    /** The add button's text. Say what is added — "Add loop", "Add report" says
+     *  more than "Add". Default: `tabs.add` from the {@link UiKitProvider}. */
+    addLabel?: string;
+    /** Overrides for this strip's strings. See {@link TabsLabels}. */
+    labels?: LabelOverride<TabsLabels>;
+    /** An add or a remove is in flight: the × and the add button are disabled and
+     *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */
+    busy?: boolean;
+    /**
+     * `"vertical"`: the same strip as a SIDE NAV — one item per row, the open one
+     * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation="vertical"` on
+     * the tablist. For keksdose's admin page and settings page, which each hand-built
+     * the identical sidebar with none of this strip's keyboard, roving tab stop or
+     * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,
+     * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the
+     * badge moves to the row's end.
+     *
+     * **On a phone (`usePhoneLayout()`) it becomes the horizontal strip**, `wrap` and
+     * all, rather than staying a column. A side nav only works beside its content; on
+     * a phone it has to go ABOVE it, and eight full-width rows there push the panel
+     * the user picked below the fold on every visit — the two keksdose pages both
+     * collapsed theirs into a scrolling row by hand for exactly that reason. The
+     * orientation is switched in JavaScript, not with `md:` classes, so the
+     * `aria-orientation` a screen reader hears and the arrow keys that work always
+     * match the layout on screen. The caller's own two-column layout has to stack at
+     * the same breakpoint (`md:grid-cols-[14rem_1fr]`).
+     */
+    orientation?: "horizontal" | "vertical";
+    /** The `role="tablist"` strip, where the rest of the props go (0.34, API-2, refactor
+     *  audit 2026-10). Merged with the strip's own ref, which scrolls the open tab into
+     *  view and measures the fade, so neither loses the element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ref, ...rest }: TabsProps<T>): import("react").JSX.Element;