@eifi1/ui-kit 0.9.0 → 0.11.0

package/dist/components/table.d.ts

@@ -1,8 +1,31 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-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`. */
+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";
+/**
+ * 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";
 /**
  * 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).
@@ -20,6 +43,8 @@ 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;
 }
 /**
  * A plain, static HTML table in the kit's tokens — for the detail views that need
@@ -38,35 +63,75 @@ 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, className, "aria-label": ariaLabel, ...rest }: TableProps): react.JSX.Element;
+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;
-type TableBodyProps = ComponentPropsWithoutRef<"tbody">;
-declare function TableBody({ className, ...rest }: TableBodyProps): react.JSX.Element;
+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;
+}
+declare function TableBody({ className, empty, children, ...rest }: TableBodyProps): react.JSX.Element;
+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.
+ */
+declare function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps): react.JSX.Element;
 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;
+}
+declare function TableRow({ valign, 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
@@ -80,4 +145,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, TableFoot, type TableFootProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, 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 TableVAlign };

package/dist/components/table.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, createContext, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { THIN_SCROLLBAR_CLASS, useScrollOverflow } from "./scroll-area.js";
 const TableContext = createContext({
@@ -12,9 +12,25 @@ const TableContext = createContext({
   }
 });
 const SectionContext = createContext("body");
+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"
+  compact: "px-2 py-1",
+  none: "p-0"
 };
 const ALIGN = {
   start: "text-start",
@@ -27,6 +43,7 @@ function Table({
   zebra = false,
   hover = false,
   wrapperClassName,
+  layout,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -57,6 +74,7 @@ function Table({
       ...overflowing ? regionName : null,
       tabIndex: overflowing ? 0 : void 0,
       "data-overflowing": overflowing || void 0,
+      "data-clips": "",
       className: cn(
         // `relative`: the containing block for an `sr-only` caption.
         "relative w-full overflow-x-auto",
@@ -72,6 +90,8 @@ 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
           )
         }
@@ -82,17 +102,51 @@ 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 TableBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx(SectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx("tbody", { ...rest, className: cn("[&>tr:last-child]:border-b-0", className) }) });
+function TableBody({ className, empty, children, ...rest }) {
+  const hasRows = Children.toArray(children).length > 0;
+  return /* @__PURE__ */ jsx(SectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx("tbody", { ...rest, className: cn("[&>tr:last-child]:border-b-0", className), children: hasRows || empty === void 0 || empty === null || empty === false ? children : /* @__PURE__ */ jsx(TableEmpty, { children: empty }) }) });
+}
+function TableEmpty({ children, colSpan, cellClassName, className, ...rest }) {
+  const { density } = useContext(TableContext);
+  const cell = useRef(null);
+  const [measured, setMeasured] = useState(1);
+  useLayoutEffect(() => {
+    if (colSpan !== void 0) 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 /* @__PURE__ */ jsx("tr", { ...rest, "data-table-empty": "", className, children: /* @__PURE__ */ jsx(
+    "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
+    }
+  ) });
 }
 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 }) {
+function TableRow({ valign, className, ...rest }) {
   const { zebra, hover } = useContext(TableContext);
   const section = useContext(SectionContext);
   const body = section === "body";
-  return /* @__PURE__ */ jsx(
+  const row = /* @__PURE__ */ jsx(
     "tr",
     {
       ...rest,
@@ -100,14 +154,29 @@ function TableRow({ className, ...rest }) {
         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 ? /* @__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 rowVAlign = useContext(RowVAlignContext);
+  const head = section === "head";
+  const textSize = size ?? (head ? "xs" : void 0);
   return /* @__PURE__ */ jsx(
     "th",
     {
@@ -117,22 +186,25 @@ function TableHeaderCell({ numeric = false, align, scope, className, ...rest })
         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
@@ -158,6 +230,7 @@ export {
   TableBody,
   TableCaption,
   TableCell,
+  TableEmpty,
   TableFoot,
   TableHead,
   TableHeaderCell,

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { createContext, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { THIN_SCROLLBAR_CLASS, useScrollOverflow } from \"./scroll-area\";\n\nexport type TableDensity = \"comfortable\" | \"compact\";\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};\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}\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  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            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 type TableBodyProps = ComponentPropsWithoutRef<\"tbody\">;\n\nexport function TableBody({ className, ...rest }: TableBodyProps) {\n  return (\n    <SectionContext.Provider value=\"body\">\n      <tbody {...rest} className={cn(\"[&>tr:last-child]:border-b-0\", className)} />\n    </SectionContext.Provider>\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\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\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\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        data-clips=\"\"\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\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}\n\nexport function TableRow({ valign, className, ...rest }: TableRowProps) {\n  const { zebra, hover } = useContext(TableContext);\n  const section = useContext(SectionContext);\n  const body = section === \"body\";\n  const row = (\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        // 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 = useContext(SectionContext);\n  const rowVAlign = useContext(RowVAlignContext);\n  const head = section === \"head\";\n  const textSize = size ?? (head ? \"xs\" : undefined);\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        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":[]}

package/dist/components/text.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/**
+ * `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.
+ */
+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.
+ */
+declare const SECTION_LABEL_CLASS: Record<SectionLabelSize, string>;
+type SectionLabelElement = "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "legend";
+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.
+ */
+declare function SectionLabel({ as, size, className, children, ...rest }: SectionLabelProps): react.JSX.Element;
+/**
+ * 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.
+ */
+declare const CAPTION_CLASS = "text-[11px] leading-snug text-[var(--text-muted)]";
+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).
+ */
+declare function Caption({ as, className, children, ...rest }: CaptionProps): react.JSX.Element;
+
+export { CAPTION_CLASS, Caption, type CaptionProps, SECTION_LABEL_CLASS, SectionLabel, type SectionLabelProps, type SectionLabelSize };

package/dist/components/text.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const SECTION_LABEL_CLASS = {
+  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)]"
+};
+function SectionLabel({ as = "h3", size = "sm", className, children, ...rest }) {
+  const Tag = as;
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(SECTION_LABEL_CLASS[size], className), children });
+}
+const CAPTION_CLASS = "text-[11px] leading-snug text-[var(--text-muted)]";
+function Caption({ as = "p", className, children, ...rest }) {
+  const Tag = as;
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(CAPTION_CLASS, className), children });
+}
+export {
+  CAPTION_CLASS,
+  Caption,
+  SECTION_LABEL_CLASS,
+  SectionLabel
+};
+//# sourceMappingURL=text.js.map

package/dist/components/text.js.map

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

package/dist/components/time-input.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { InputProps } from './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).