@eifi1/ui-kit 0.9.0 → 0.11.0

package/src/components/table.tsx

@@ -1,10 +1,33 @@
-import { createContext, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import { Children, createContext, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { THIN_SCROLLBAR_CLASS, useScrollOverflow } from "./scroll-area";
 
-export type TableDensity = "comfortable" | "compact";
+/** `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`. */
+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. */
+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
+ * 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.
+ */
+export type TableVAlign = "top" | "middle" | "bottom";
+/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */
+export type TableHeaderCellSize = "xs" | "sm";
+/** The header cell's weight. Default `medium`. */
+export type TableHeaderCellWeight = "normal" | "medium" | "semibold";
 
 interface TableContextValue {
   density: TableDensity;
@@ -25,9 +48,32 @@ const TableContext = createContext<TableContextValue>({
 /** Which section a row sits in — zebra and hover apply to body rows only. */
 const SectionContext = createContext<"head" | "body" | "foot">("body");
 
+/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It
+ *  cannot be left to CSS inheritance: every cell states its own default alignment,
+ *  and a class on the cell beats one on the row. */
+const RowVAlignContext = createContext<TableVAlign | undefined>(undefined);
+
+const VALIGN: Record<TableVAlign, string> = {
+  top: "align-top",
+  middle: "align-middle",
+  bottom: "align-bottom",
+};
+
+const HEADER_SIZE: Record<TableHeaderCellSize, string> = {
+  xs: "text-xs",
+  sm: "text-sm",
+};
+
+const HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+};
+
 const CELL_PAD: Record<TableDensity, string> = {
   comfortable: "px-3 py-2",
   compact: "px-2 py-1",
+  none: "p-0",
 };
 
 const ALIGN: Record<TableAlign, string> = {
@@ -54,6 +100,8 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
   hover?: boolean;
   /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */
   wrapperClassName?: string;
+  /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */
+  layout?: TableLayout;
 }
 
 /**
@@ -78,6 +126,7 @@ export function Table({
   zebra = false,
   hover = false,
   wrapperClassName,
+  layout,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -113,6 +162,7 @@ export function Table({
         {...(overflowing ? regionName : null)}
         tabIndex={overflowing ? 0 : undefined}
         data-overflowing={overflowing || undefined}
+        data-clips=""
         className={cn(
           // `relative`: the containing block for an `sr-only` caption.
           "relative w-full overflow-x-auto",
@@ -127,6 +177,8 @@ export function Table({
           className={cn(
             "w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]",
             density === "compact" && "text-xs",
+            layout === "fixed" && "table-fixed",
+            layout === "auto" && "table-auto",
             className,
           )}
         />
@@ -145,16 +197,87 @@ export function TableHead({ className, ...rest }: TableHeadProps) {
   );
 }
 
-export type TableBodyProps = ComponentPropsWithoutRef<"tbody">;
+export interface TableBodyProps extends ComponentPropsWithoutRef<"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-
+   * writes that row with a counted `colSpan` in unit-values-editor, the meeting agenda
+   * and invitations tabs, the journal-entry and invoice detail pages, and a column
+   * added later leaves every one of those counts one short.
+   */
+  empty?: ReactNode;
+}
 
-export function TableBody({ className, ...rest }: TableBodyProps) {
+export function TableBody({ className, empty, children, ...rest }: TableBodyProps) {
+  // `toArray` drops null/undefined/booleans and flattens arrays, so `[[], false]` —
+  // an empty map beside a conditional row that is off — is no rows.
+  const hasRows = Children.toArray(children).length > 0;
   return (
     <SectionContext.Provider value="body">
-      <tbody {...rest} className={cn("[&>tr:last-child]:border-b-0", className)} />
+      <tbody {...rest} className={cn("[&>tr:last-child]:border-b-0", className)}>
+        {hasRows || empty === undefined || empty === null || empty === false ? (
+          children
+        ) : (
+          <TableEmpty>{empty}</TableEmpty>
+        )}
+      </tbody>
     </SectionContext.Provider>
   );
 }
 
+export interface TableEmptyProps extends Omit<ComponentPropsWithoutRef<"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. */
+  colSpan?: number;
+  /** Classes for the `<td>`. */
+  cellClassName?: string;
+}
+
+/**
+ * The "nothing here" row: one cell across every column, centred, muted. What
+ * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows
+ * are not its direct children.
+ */
+export function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps) {
+  const { density } = useContext(TableContext);
+  const cell = useRef<HTMLTableCellElement | null>(null);
+  const [measured, setMeasured] = useState(1);
+  // Every render, deliberately: a column can appear in the head without anything this
+  // row depends on changing. It cannot loop — setting the same count is a bail-out.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    if (colSpan !== undefined) return;
+    const row = cell.current?.parentElement;
+    const table = cell.current?.closest("table");
+    if (!row || !table) return;
+    let widest = 1;
+    for (const r of Array.from(table.rows)) {
+      if (r === row) continue;
+      let n = 0;
+      for (const c of Array.from(r.cells)) n += c.colSpan || 1;
+      widest = Math.max(widest, n);
+    }
+    setMeasured(widest);
+  });
+  return (
+    <tr {...rest} data-table-empty="" className={className}>
+      <td
+        ref={cell}
+        colSpan={colSpan ?? measured}
+        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)]",
+          cellClassName,
+        )}
+      >
+        {children}
+      </td>
+    </tr>
+  );
+}
+
 export type TableFootProps = ComponentPropsWithoutRef<"tfoot">;
 
 /** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`
@@ -167,23 +290,31 @@ export function TableFoot({ className, ...rest }: TableFootProps) {
   );
 }
 
-export type TableRowProps = ComponentPropsWithoutRef<"tr">;
+/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */
+export 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;
+}
 
-export function TableRow({ className, ...rest }: TableRowProps) {
+export function TableRow({ valign, className, ...rest }: TableRowProps) {
   const { zebra, hover } = useContext(TableContext);
   const section = useContext(SectionContext);
   const body = section === "body";
-  return (
+  const row = (
     <tr
       {...rest}
       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)]",
+        // On the row as well, for a raw `<td>` of the caller's, which inherits it.
+        valign && VALIGN[valign],
         className,
       )}
     />
   );
+  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;
 }
 
 interface CellAlignProps {
@@ -191,19 +322,44 @@ interface CellAlignProps {
   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. */
-export interface TableHeaderCellProps extends Omit<ComponentPropsWithoutRef<"th">, "align">, CellAlignProps {}
+/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */
+export 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.
  */
-export function TableHeaderCell({ numeric = false, align, scope, className, ...rest }: TableHeaderCellProps) {
+export function TableHeaderCell({
+  numeric = false,
+  align,
+  valign,
+  size,
+  weight = "medium",
+  scope,
+  className,
+  ...rest
+}: TableHeaderCellProps) {
   const { density } = useContext(TableContext);
   const section = useContext(SectionContext);
+  const rowVAlign = useContext(RowVAlignContext);
+  const head = section === "head";
+  const textSize = size ?? (head ? "xs" : undefined);
   return (
     <th
       {...rest}
@@ -212,24 +368,27 @@ export function TableHeaderCell({ numeric = false, align, scope, className, ...r
         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,
       )}
     />
   );
 }
 
-export interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "align">, CellAlignProps {}
+export interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "align" | "valign">, CellAlignProps {}
 
-export function TableCell({ numeric = false, align, className, ...rest }: TableCellProps) {
+export function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {
   const { density } = useContext(TableContext);
+  const rowVAlign = useContext(RowVAlignContext);
   return (
     <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/src/components/text.tsx

@@ -0,0 +1,97 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+/* ── SectionLabel ─────────────────────────────────────────────────────────── */
+
+/**
+ * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;
+ * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings
+ * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a
+ * dense panel (a legend, a menu) or above a block of page content, and one size looked
+ * wrong in the other place.
+ *
+ * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels
+ * its figures ("Assigned", "Activity", "Upcoming", "Available" —
+ * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line
+ * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a
+ * figure that size, 12px competed with it. Named `md` rather than slotted in order
+ * because `sm` was already the default and renaming it would move every caller.
+ */
+export type SectionLabelSize = "xs" | "md" | "sm";
+
+/**
+ * The small, uppercase, tracked, muted label — as a class string, per size.
+ *
+ * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a
+ * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better
+ * reached as a string than wrapped in a component that only takes a `className`. The
+ * uppercase is CSS, so a screen reader reads the text as written: write it in normal
+ * case.
+ */
+export const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {
+  xs: "text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+  md: "text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+  sm: "text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+};
+
+type SectionLabelElement = "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "legend";
+
+export interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
+  /**
+   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit
+   * cannot know where in the outline the label sits. Default `h3`, which is what
+   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a
+   * label that is not a heading at all (a legend group's title).
+   */
+  as?: SectionLabelElement;
+  size?: SectionLabelSize;
+  children: ReactNode;
+}
+
+/**
+ * A section's small uppercase label. lenkbank spells
+ * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`
+ * on every `<h3>` of its control page and more; keksdose's budget switcher writes the
+ * 10px version on a menu row. One component, the token colour, and the level chosen
+ * where the outline is known.
+ */
+export function SectionLabel({ as = "h3", size = "sm", className, children, ...rest }: SectionLabelProps) {
+  const Tag = as as ElementType;
+  return (
+    <Tag {...rest} className={cn(SECTION_LABEL_CLASS[size], className)}>
+      {children}
+    </Tag>
+  );
+}
+
+/* ── Caption ──────────────────────────────────────────────────────────────── */
+
+/**
+ * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`
+ * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a
+ * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.
+ * Exported for the same reason lenkbank's is a string: every caller positions it
+ * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the
+ * type, not the box.
+ */
+export const CAPTION_CLASS = "text-[11px] leading-snug text-[var(--text-muted)]";
+
+export interface CaptionProps extends ComponentPropsWithoutRef<"p"> {
+  /** Default `p`; `span` for a caption inside a line of other content. */
+  as?: "p" | "span" | "div";
+  children: ReactNode;
+}
+
+/**
+ * The small grey sentence under a field, a table or a button — prose ABOUT the thing
+ * above it. Not `FieldHint`, which hides behind a field label's "?" so a paragraph does
+ * not make one field taller than its neighbour (lenkbank feedback #27).
+ */
+export function Caption({ as = "p", className, children, ...rest }: CaptionProps) {
+  const Tag = as as ElementType;
+  return (
+    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>
+      {children}
+    </Tag>
+  );
+}