@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/components/status-dot.js

@@ -9,7 +9,12 @@ const FILL = {
   danger: "bg-[var(--danger)]",
   info: "bg-[var(--info)]",
   income: "bg-[var(--money-income)]",
-  expense: "bg-[var(--money-expense)]"
+  expense: "bg-[var(--money-expense)]",
+  blue: "bg-[var(--hue-blue)]",
+  indigo: "bg-[var(--hue-indigo)]",
+  purple: "bg-[var(--hue-purple)]",
+  teal: "bg-[var(--hue-teal)]",
+  orange: "bg-[var(--hue-orange)]"
 };
 const SIZE = { sm: "size-2", md: "size-2.5", lg: "size-3" };
 function StatusDot({

package/dist/components/status-dot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/status-dot.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { ProgressBarTone } from \"./progress-bar\";\n\n/**\n * The tones are `ProgressBar`'s, name for name — which are `Chip`'s, less nothing — so a\n * dot in a legend, the bar it explains and the badge beside it can be given the same\n * word and agree. The money pair is here for the same reason it is there: a legend\n * swatch for income is money, not \"success\".\n */\nexport type StatusDotTone = ProgressBarTone;\n\n/** `sm` 8px (keksdose's unread dot on the support trigger), `md` 10px (the avatar's\n *  unread dot), `lg` 12px (kastlan's occupancy legend swatch). */\nexport type StatusDotSize = \"sm\" | \"md\" | \"lg\";\n\nconst FILL: Record<StatusDotTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst SIZE: Record<StatusDotSize, string> = { sm: \"size-2\", md: \"size-2.5\", lg: \"size-3\" };\n\nexport interface StatusDotProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  tone?: StatusDotTone;\n  size?: StatusDotSize;\n  /**\n   * Visible text beside the dot — a legend entry (\"Rented\") or a status (\"Online\"). It\n   * is also what a screen reader reads: the dot itself is decorative whenever there is\n   * a label.\n   *\n   * Without a label the dot is hidden from assistive technology, because a coloured\n   * circle says nothing to someone who cannot see it. Say the state where it IS read —\n   * keksdose's avatar trigger puts \"3 unread\" in its own `aria-label` — or give the dot\n   * an `aria-label` of its own, which makes it an image with that name.\n   */\n  label?: ReactNode;\n  /**\n   * A ring in the surface colour round the dot, so a dot laid over the corner of an\n   * icon or an avatar reads as a separate mark and not a smudge (keksdose top-bar.tsx\n   * :152, account-menu.tsx ~385, both hand-drawing `ring-2 ring-white\n   * dark:ring-slate-900`). Position it with `className` (`absolute -end-0.5 -top-0.5`).\n   */\n  ring?: boolean;\n  /** Extra classes for the dot itself; `className` goes on the outer element. */\n  dotClassName?: string;\n}\n\n/**\n * A small token-coloured dot, with an optional label.\n *\n * kastlan's reporting dashboard (dashboard-tab.tsx:79) paints its occupancy legend\n * with raw `bg-green-500` / `bg-red-500` / `bg-yellow-500`, which ignores the palette\n * and the dark theme; keksdose draws two unread dots by hand in `rose-500`. Both are\n * this.\n */\nexport function StatusDot({\n  tone = \"neutral\",\n  size = \"sm\",\n  label,\n  ring = false,\n  className,\n  dotClassName,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: StatusDotProps) {\n  const dot = (\n    <span\n      className={cn(\n        \"inline-block shrink-0 rounded-full\",\n        SIZE[size],\n        FILL[tone],\n        ring && \"ring-2 ring-[var(--bg-surface)]\",\n        label == null && className,\n        dotClassName,\n      )}\n      {...(label == null\n        ? ariaLabel\n          ? { role: \"img\", \"aria-label\": ariaLabel, ...rest }\n          : { \"aria-hidden\": true, ...rest }\n        : { \"aria-hidden\": true })}\n    />\n  );\n  if (label == null) return dot;\n  return (\n    // No `aria-label` here: the visible label is the text, and a name on a role-less\n    // span is one ARIA forbids and screen readers ignore.\n    <span {...rest} className={cn(\"inline-flex min-w-0 items-center gap-1.5 text-sm\", className)}>\n      {dot}\n      <span className=\"min-w-0 truncate\">{label}</span>\n    </span>\n  );\n}\n"],"mappings":";AAyEI,cAoBA,YApBA;AAxEJ,SAAS,UAAU;AAenB,MAAM,OAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,OAAsC,EAAE,IAAI,UAAU,IAAI,YAAY,IAAI,SAAS;AAmClF,SAAS,UAAU;AAAA,EACxB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAmB;AACjB,QAAM,MACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT,KAAK,IAAI;AAAA,QACT,QAAQ;AAAA,QACR,SAAS,QAAQ;AAAA,QACjB;AAAA,MACF;AAAA,MACC,GAAI,SAAS,OACV,YACE,EAAE,MAAM,OAAO,cAAc,WAAW,GAAG,KAAK,IAChD,EAAE,eAAe,MAAM,GAAG,KAAK,IACjC,EAAE,eAAe,KAAK;AAAA;AAAA,EAC5B;AAEF,MAAI,SAAS,KAAM,QAAO;AAC1B;AAAA;AAAA;AAAA,IAGE,qBAAC,UAAM,GAAG,MAAM,WAAW,GAAG,oDAAoD,SAAS,GACxF;AAAA;AAAA,MACD,oBAAC,UAAK,WAAU,oBAAoB,iBAAM;AAAA,OAC5C;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/status-dot.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { ProgressBarTone } from \"./progress-bar\";\nimport type { ChipHue } from \"./chip\";\n\n/**\n * The tones are `ProgressBar`'s, name for name — which are `Chip`'s, less nothing — so a\n * dot in a legend, the bar it explains and the badge beside it can be given the same\n * word and agree. The money pair is here for the same reason it is there: a legend\n * swatch for income is money, not \"success\". Chip's categorical hues are here too\n * (0.11): a unit-status dot in a combobox (kastlan lease-unit-step.tsx:35, \"rented\"\n * is blue) must match the Chip that states the same status elsewhere.\n */\nexport type StatusDotTone = ProgressBarTone | ChipHue;\n\n/** `sm` 8px (keksdose's unread dot on the support trigger), `md` 10px (the avatar's\n *  unread dot), `lg` 12px (kastlan's occupancy legend swatch). */\nexport type StatusDotSize = \"sm\" | \"md\" | \"lg\";\n\nconst FILL: Record<StatusDotTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n  blue: \"bg-[var(--hue-blue)]\",\n  indigo: \"bg-[var(--hue-indigo)]\",\n  purple: \"bg-[var(--hue-purple)]\",\n  teal: \"bg-[var(--hue-teal)]\",\n  orange: \"bg-[var(--hue-orange)]\",\n};\n\nconst SIZE: Record<StatusDotSize, string> = { sm: \"size-2\", md: \"size-2.5\", lg: \"size-3\" };\n\nexport interface StatusDotProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  tone?: StatusDotTone;\n  size?: StatusDotSize;\n  /**\n   * Visible text beside the dot — a legend entry (\"Rented\") or a status (\"Online\"). It\n   * is also what a screen reader reads: the dot itself is decorative whenever there is\n   * a label.\n   *\n   * Without a label the dot is hidden from assistive technology, because a coloured\n   * circle says nothing to someone who cannot see it. Say the state where it IS read —\n   * keksdose's avatar trigger puts \"3 unread\" in its own `aria-label` — or give the dot\n   * an `aria-label` of its own, which makes it an image with that name.\n   */\n  label?: ReactNode;\n  /**\n   * A ring in the surface colour round the dot, so a dot laid over the corner of an\n   * icon or an avatar reads as a separate mark and not a smudge (keksdose top-bar.tsx\n   * :152, account-menu.tsx ~385, both hand-drawing `ring-2 ring-white\n   * dark:ring-slate-900`). Position it with `className` (`absolute -end-0.5 -top-0.5`).\n   */\n  ring?: boolean;\n  /** Extra classes for the dot itself; `className` goes on the outer element. */\n  dotClassName?: string;\n}\n\n/**\n * A small token-coloured dot, with an optional label.\n *\n * kastlan's reporting dashboard (dashboard-tab.tsx:79) paints its occupancy legend\n * with raw `bg-green-500` / `bg-red-500` / `bg-yellow-500`, which ignores the palette\n * and the dark theme; keksdose draws two unread dots by hand in `rose-500`. Both are\n * this.\n */\nexport function StatusDot({\n  tone = \"neutral\",\n  size = \"sm\",\n  label,\n  ring = false,\n  className,\n  dotClassName,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: StatusDotProps) {\n  const dot = (\n    <span\n      className={cn(\n        \"inline-block shrink-0 rounded-full\",\n        SIZE[size],\n        FILL[tone],\n        ring && \"ring-2 ring-[var(--bg-surface)]\",\n        label == null && className,\n        dotClassName,\n      )}\n      {...(label == null\n        ? ariaLabel\n          ? { role: \"img\", \"aria-label\": ariaLabel, ...rest }\n          : { \"aria-hidden\": true, ...rest }\n        : { \"aria-hidden\": true })}\n    />\n  );\n  if (label == null) return dot;\n  return (\n    // No `aria-label` here: the visible label is the text, and a name on a role-less\n    // span is one ARIA forbids and screen readers ignore.\n    <span {...rest} className={cn(\"inline-flex min-w-0 items-center gap-1.5 text-sm\", className)}>\n      {dot}\n      <span className=\"min-w-0 truncate\">{label}</span>\n    </span>\n  );\n}\n"],"mappings":";AAiFI,cAoBA,YApBA;AAhFJ,SAAS,UAAU;AAkBnB,MAAM,OAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAEA,MAAM,OAAsC,EAAE,IAAI,UAAU,IAAI,YAAY,IAAI,SAAS;AAmClF,SAAS,UAAU;AAAA,EACxB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAmB;AACjB,QAAM,MACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT,KAAK,IAAI;AAAA,QACT,QAAQ;AAAA,QACR,SAAS,QAAQ;AAAA,QACjB;AAAA,MACF;AAAA,MACC,GAAI,SAAS,OACV,YACE,EAAE,MAAM,OAAO,cAAc,WAAW,GAAG,KAAK,IAChD,EAAE,eAAe,MAAM,GAAG,KAAK,IACjC,EAAE,eAAe,KAAK;AAAA;AAAA,EAC5B;AAEF,MAAI,SAAS,KAAM,QAAO;AAC1B;AAAA;AAAA;AAAA,IAGE,qBAAC,UAAM,GAAG,MAAM,WAAW,GAAG,oDAAoD,SAAS,GACxF;AAAA;AAAA,MACD,oBAAC,UAAK,WAAU,oBAAoB,iBAAM;AAAA,OAC5C;AAAA;AAEJ;","names":[]}

package/dist/components/table.d.ts

@@ -11,6 +11,30 @@ type TableDensity = "comfortable" | "compact" | "none";
  *  figures for room. */
 type TableLayout = "auto" | "fixed";
 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
+ * figures), a body cell at the `top` (a wrapped note starts level with its row). A
+ * table whose cells are INPUTS wants `middle`: keksdose's VAT summary
+ * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,
+ * and a figure at the top of its cell sat above the middle of the field next to it —
+ * 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";
+/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */
+type TableHeaderCellSize = "xs" | "sm";
+/** The header cell's weight. Default `medium`. */
+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
+ * a group, or the `total` of the whole table. kastlan's balance sheet, income statement
+ * and journal entry each spelled these as `className="font-medium"`, `"font-bold
+ * 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";
 /**
  * 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).
@@ -30,6 +54,22 @@ interface TableProps extends ComponentPropsWithoutRef<"table"> {
     wrapperClassName?: string;
     /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */
     layout?: TableLayout;
+    /**
+     * A rounded border round the whole table (0.12.0) — for a table standing on the page
+     * or in a dialog rather than inside a card. kastlan wraps six of them in
+     * `<div className="rounded-md border">` by hand (payment allocation, the new-budget
+     * lines, the meter readings, the deposit transactions, the unit values editor, the
+     * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip
+     * the rows' tint to its corners.
+     */
+    framed?: boolean;
+    /**
+     * The rule between body rows. Default true. `false` for a small table whose rows are
+     * spaced by their own content — keksdose's VAT summary, a block of three quiet
+     * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One
+     * row can still say otherwise with {@link TableRowProps.bordered}.
+     */
+    rowDividers?: boolean;
 }
 /**
  * A plain, static HTML table in the kit's tokens — for the detail views that need
@@ -48,9 +88,13 @@ interface TableProps extends ComponentPropsWithoutRef<"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, className, "aria-label": ariaLabel, ...rest }: TableProps): react.JSX.Element;
-type TableHeadProps = ComponentPropsWithoutRef<"thead">;
-declare function TableHead({ className, ...rest }: TableHeadProps): react.JSX.Element;
+declare function Table({ density, zebra, hover, wrapperClassName, layout, framed, rowDividers, className, "aria-label": ariaLabel, ...rest }: TableProps): react.JSX.Element;
+interface TableHeadProps extends ComponentPropsWithoutRef<"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 ComponentPropsWithoutRef<"tbody"> {
     /**
      * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —
@@ -80,26 +124,48 @@ type TableFootProps = ComponentPropsWithoutRef<"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;
-type TableRowProps = ComponentPropsWithoutRef<"tr">;
-declare function TableRow({ className, ...rest }: TableRowProps): react.JSX.Element;
+/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */
+interface TableRowProps extends ComponentPropsWithoutRef<"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;
+    /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows
+     *  only: a group heading or a total is not one more record. */
+    variant?: TableRowVariant;
+    /** The rule under this body row. Default: the table's `rowDividers`. */
+    bordered?: boolean;
+}
+declare function TableRow({ valign, variant, bordered, className, ...rest }: TableRowProps): react.JSX.Element;
 interface CellAlignProps {
     /** Shorthand for a figure column: end-aligned, tabular digits. */
     numeric?: boolean;
     /** Logical alignment. Default `start` (`end` when `numeric`). */
     align?: TableAlign;
+    /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and
+     *  `top` for a body cell. See {@link TableVAlign}. */
+    valign?: TableVAlign;
 }
-/** The deprecated HTML `align` attribute is replaced by a logical one. */
-interface TableHeaderCellProps extends Omit<ComponentPropsWithoutRef<"th">, "align">, CellAlignProps {
+/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */
+interface TableHeaderCellProps extends Omit<ComponentPropsWithoutRef<"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
+     * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a
+     * small table of figures, and could not say so without overriding classes.
+     */
+    size?: TableHeaderCellSize;
+    /** Default `medium`. `normal` for the quiet header above; see {@link size}. */
+    weight?: TableHeaderCellWeight;
 }
 /**
  * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header
  * 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, scope, className, ...rest }: TableHeaderCellProps): react.JSX.Element;
-interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "align">, CellAlignProps {
+declare function TableHeaderCell({ numeric, align, valign, size, weight, scope, className, ...rest }: TableHeaderCellProps): react.JSX.Element;
+interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "align" | "valign">, CellAlignProps {
 }
-declare function TableCell({ numeric, align, className, ...rest }: TableCellProps): react.JSX.Element;
+declare function TableCell({ numeric, align, valign, className, ...rest }: TableCellProps): react.JSX.Element;
 type TableCaptionProps = ComponentPropsWithoutRef<"caption">;
 /**
  * The table's title. Beneath the table by default (`caption-bottom`, the shadcn
@@ -113,4 +179,4 @@ type TableCaptionProps = ComponentPropsWithoutRef<"caption">;
  */
 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 TableLayout, type TableProps, TableRow, type TableRowProps };
+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 };

package/dist/components/table.js

@@ -7,11 +7,40 @@ const TableContext = createContext({
   density: "comfortable",
   zebra: false,
   hover: false,
+  rowDividers: true,
   captionId: "",
   registerCaption: () => () => {
   }
 });
-const SectionContext = createContext("body");
+const SectionContext = createContext(void 0);
+const SECTION_OF_TAG = { THEAD: "head", TBODY: "body", TFOOT: "foot" };
+function useSection() {
+  const fromContext = useContext(SectionContext);
+  const [node, setNode] = useState(null);
+  const [detected, setDetected] = useState(void 0);
+  useLayoutEffect(() => {
+    if (fromContext !== void 0 || !node) return;
+    const section = node.closest("thead, tbody, tfoot");
+    const found = section ? SECTION_OF_TAG[section.tagName] : void 0;
+    if (found !== detected) setDetected(found);
+  }, [fromContext, node, detected]);
+  return [fromContext ?? detected ?? "body", fromContext === void 0 ? setNode : void 0];
+}
+const RowVAlignContext = createContext(void 0);
+const VALIGN = {
+  top: "align-top",
+  middle: "align-middle",
+  bottom: "align-bottom"
+};
+const HEADER_SIZE = {
+  xs: "text-xs",
+  sm: "text-sm"
+};
+const HEADER_WEIGHT = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold"
+};
 const CELL_PAD = {
   comfortable: "px-3 py-2",
   compact: "px-2 py-1",
@@ -29,6 +58,8 @@ function Table({
   hover = false,
   wrapperClassName,
   layout,
+  framed = false,
+  rowDividers = true,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -42,13 +73,14 @@ function Table({
       density,
       zebra,
       hover,
+      rowDividers,
       captionId,
       registerCaption: () => {
         setCaptions((n) => n + 1);
         return () => setCaptions((n) => n - 1);
       }
     }),
-    [density, zebra, hover, captionId]
+    [density, zebra, hover, rowDividers, captionId]
   );
   const regionName = captions > 0 ? { "aria-labelledby": captionId } : ariaLabel ? { "aria-label": ariaLabel } : null;
   return /* @__PURE__ */ jsx(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
@@ -59,9 +91,14 @@ function Table({
       ...overflowing ? regionName : null,
       tabIndex: overflowing ? 0 : void 0,
       "data-overflowing": overflowing || void 0,
+      "data-clips": "",
+      "data-framed": framed || void 0,
       className: cn(
         // `relative`: the containing block for an `sr-only` caption.
         "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)]",
         THIN_SCROLLBAR_CLASS,
         "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
         wrapperClassName
@@ -83,8 +120,8 @@ function Table({
     }
   ) });
 }
-function TableHead({ className, ...rest }) {
-  return /* @__PURE__ */ jsx(SectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx("thead", { ...rest, className: cn("border-b border-[var(--border)]", className) }) });
+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) }) });
 }
 function TableBody({ className, empty, children, ...rest }) {
   const hasRows = Children.toArray(children).length > 0;
@@ -126,51 +163,82 @@ 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) }) });
 }
-function TableRow({ className, ...rest }) {
-  const { zebra, hover } = useContext(TableContext);
-  const section = useContext(SectionContext);
+const ROW_VARIANT = {
+  row: false,
+  group: "bg-[var(--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"
+};
+function TableRow({ valign, variant = "row", bordered, className, ...rest }) {
+  const { zebra, hover, rowDividers } = useContext(TableContext);
+  const [section, ref] = useSection();
   const body = section === "body";
-  return /* @__PURE__ */ jsx(
+  const record = body && variant === "row";
+  const row = /* @__PURE__ */ jsx(
     "tr",
     {
+      ref,
       ...rest,
+      "data-variant": variant === "row" ? void 0 : variant,
       className: cn(
-        body && "border-b border-[var(--border)]",
-        body && zebra && "even:bg-[var(--bg-surface-2)]",
-        body && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        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)]",
+        ROW_VARIANT[variant],
+        // On the row as well, for a raw `<td>` of the caller's, which inherits it.
+        valign && VALIGN[valign],
         className
       )
     }
   );
+  return valign ? /* @__PURE__ */ jsx(RowVAlignContext.Provider, { value: valign, children: row }) : row;
 }
-function TableHeaderCell({ numeric = false, align, scope, className, ...rest }) {
+function TableHeaderCell({
+  numeric = false,
+  align,
+  valign,
+  size,
+  weight = "medium",
+  scope,
+  className,
+  ...rest
+}) {
   const { density } = useContext(TableContext);
-  const section = useContext(SectionContext);
+  const [section, ref] = useSection();
+  const rowVAlign = useContext(RowVAlignContext);
+  const head = section === "head";
+  const textSize = size ?? (head ? "xs" : void 0);
   return /* @__PURE__ */ jsx(
     "th",
     {
+      ref,
       ...rest,
       scope: scope ?? (section === "head" ? "col" : "row"),
       className: cn(
         CELL_PAD[density],
         ALIGN[align ?? (numeric ? "end" : "start")],
         numeric && "tabular-nums",
-        "align-bottom font-medium",
-        section === "head" ? "text-xs text-[var(--text-muted)]" : "align-top text-[var(--text-secondary)]",
+        VALIGN[valign ?? rowVAlign ?? (head ? "bottom" : "top")],
+        HEADER_WEIGHT[weight],
+        head ? "text-[var(--text-muted)]" : "text-[var(--text-secondary)]",
+        textSize && HEADER_SIZE[textSize],
         className
       )
     }
   );
 }
-function TableCell({ numeric = false, align, className, ...rest }) {
+function TableCell({ numeric = false, align, valign, className, ...rest }) {
   const { density } = useContext(TableContext);
+  const rowVAlign = useContext(RowVAlignContext);
   return /* @__PURE__ */ jsx(
     "td",
     {
       ...rest,
       className: cn(
         CELL_PAD[density],
-        "align-top",
+        VALIGN[valign ?? rowVAlign ?? "top"],
         ALIGN[align ?? (numeric ? "end" : "start")],
         numeric && "tabular-nums whitespace-nowrap",
         className

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { Children, createContext, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\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\ninterface TableContextValue {\n  density: TableDensity;\n  zebra: boolean;\n  hover: boolean;\n  captionId: string;\n  registerCaption: () => () => void;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"comfortable\",\n  zebra: false,\n  hover: false,\n  captionId: \"\",\n  registerCaption: () => () => {},\n});\n\n/** Which section a row sits in — zebra and hover apply to body rows only. */\nconst SectionContext = createContext<\"head\" | \"body\" | \"foot\">(\"body\");\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\nexport interface TableProps extends ComponentPropsWithoutRef<\"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. */\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\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  className,\n  \"aria-label\": ariaLabel,\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\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      density,\n      zebra,\n      hover,\n      captionId,\n      registerCaption: () => {\n        setCaptions((n) => n + 1);\n        return () => setCaptions((n) => n - 1);\n      },\n    }),\n    [density, zebra, hover, 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        className={cn(\n          // `relative`: the containing block for an `sr-only` caption.\n          \"relative w-full overflow-x-auto\",\n          THIN_SCROLLBAR_CLASS,\n          \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\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            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport type TableHeadProps = ComponentPropsWithoutRef<\"thead\">;\n\nexport function TableHead({ className, ...rest }: TableHeadProps) {\n  return (\n    <SectionContext.Provider value=\"head\">\n      <thead {...rest} className={cn(\"border-b border-[var(--border)]\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableBodyProps extends ComponentPropsWithoutRef<\"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<ComponentPropsWithoutRef<\"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 = ComponentPropsWithoutRef<\"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\nexport type TableRowProps = ComponentPropsWithoutRef<\"tr\">;\n\nexport function TableRow({ className, ...rest }: TableRowProps) {\n  const { zebra, hover } = useContext(TableContext);\n  const section = useContext(SectionContext);\n  const body = section === \"body\";\n  return (\n    <tr\n      {...rest}\n      className={cn(\n        body && \"border-b border-[var(--border)]\",\n        body && zebra && \"even:bg-[var(--bg-surface-2)]\",\n        body && hover && \"transition-colors hover:bg-[var(--bg-hover)]\",\n        className,\n      )}\n    />\n  );\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}\n\n/** The deprecated HTML `align` attribute is replaced by a logical one. */\nexport interface TableHeaderCellProps extends Omit<ComponentPropsWithoutRef<\"th\">, \"align\">, CellAlignProps {}\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({ numeric = false, align, scope, className, ...rest }: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const section = useContext(SectionContext);\n  return (\n    <th\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        \"align-bottom font-medium\",\n        section === \"head\" ? \"text-xs text-[var(--text-muted)]\" : \"align-top text-[var(--text-secondary)]\",\n        className,\n      )}\n    />\n  );\n}\n\nexport interface TableCellProps extends Omit<ComponentPropsWithoutRef<\"td\">, \"align\">, CellAlignProps {}\n\nexport function TableCell({ numeric = false, align, className, ...rest }: TableCellProps) {\n  const { density } = useContext(TableContext);\n  return (\n    <td\n      {...rest}\n      className={cn(\n        CELL_PAD[density],\n        \"align-top\",\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums whitespace-nowrap\",\n        className,\n      )}\n    />\n  );\n}\n\nexport type TableCaptionProps = ComponentPropsWithoutRef<\"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, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\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/** 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\nexport interface TableProps extends ComponentPropsWithoutRef<\"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. */\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\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  className,\n  \"aria-label\": ariaLabel,\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\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        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-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\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            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport interface TableHeadProps extends ComponentPropsWithoutRef<\"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 ComponentPropsWithoutRef<\"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<ComponentPropsWithoutRef<\"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 = ComponentPropsWithoutRef<\"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 ComponentPropsWithoutRef<\"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, ...rest }: TableRowProps) {\n  const { zebra, hover, rowDividers } = useContext(TableContext);\n  const [section, ref] = useSection<HTMLTableRowElement>();\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        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<ComponentPropsWithoutRef<\"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  ...rest\n}: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const [section, ref] = useSection<HTMLTableCellElement>();\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<ComponentPropsWithoutRef<\"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 = ComponentPropsWithoutRef<\"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":[]}