@eifi1/ui-kit 0.9.0 → 0.10.0

package/dist/components/status-dot.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ProgressBarTone } from './progress-bar.js';
+
+/**
+ * The tones are `ProgressBar`'s, name for name — which are `Chip`'s, less nothing — so a
+ * dot in a legend, the bar it explains and the badge beside it can be given the same
+ * word and agree. The money pair is here for the same reason it is there: a legend
+ * swatch for income is money, not "success".
+ */
+type StatusDotTone = ProgressBarTone;
+/** `sm` 8px (keksdose's unread dot on the support trigger), `md` 10px (the avatar's
+ *  unread dot), `lg` 12px (kastlan's occupancy legend swatch). */
+type StatusDotSize = "sm" | "md" | "lg";
+interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    tone?: StatusDotTone;
+    size?: StatusDotSize;
+    /**
+     * Visible text beside the dot — a legend entry ("Rented") or a status ("Online"). It
+     * is also what a screen reader reads: the dot itself is decorative whenever there is
+     * a label.
+     *
+     * Without a label the dot is hidden from assistive technology, because a coloured
+     * circle says nothing to someone who cannot see it. Say the state where it IS read —
+     * keksdose's avatar trigger puts "3 unread" in its own `aria-label` — or give the dot
+     * an `aria-label` of its own, which makes it an image with that name.
+     */
+    label?: ReactNode;
+    /**
+     * A ring in the surface colour round the dot, so a dot laid over the corner of an
+     * icon or an avatar reads as a separate mark and not a smudge (keksdose top-bar.tsx
+     * :152, account-menu.tsx ~385, both hand-drawing `ring-2 ring-white
+     * dark:ring-slate-900`). Position it with `className` (`absolute -end-0.5 -top-0.5`).
+     */
+    ring?: boolean;
+    /** Extra classes for the dot itself; `className` goes on the outer element. */
+    dotClassName?: string;
+}
+/**
+ * A small token-coloured dot, with an optional label.
+ *
+ * kastlan's reporting dashboard (dashboard-tab.tsx:79) paints its occupancy legend
+ * with raw `bg-green-500` / `bg-red-500` / `bg-yellow-500`, which ignores the palette
+ * and the dark theme; keksdose draws two unread dots by hand in `rose-500`. Both are
+ * this.
+ */
+declare function StatusDot({ tone, size, label, ring, className, dotClassName, "aria-label": ariaLabel, ...rest }: StatusDotProps): react.JSX.Element;
+
+export { StatusDot, type StatusDotProps, type StatusDotSize, type StatusDotTone };

package/dist/components/status-dot.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const FILL = {
+  brand: "bg-[var(--brand)]",
+  neutral: "bg-[var(--text-muted)]",
+  success: "bg-[var(--success)]",
+  warning: "bg-[var(--warning)]",
+  danger: "bg-[var(--danger)]",
+  info: "bg-[var(--info)]",
+  income: "bg-[var(--money-income)]",
+  expense: "bg-[var(--money-expense)]"
+};
+const SIZE = { sm: "size-2", md: "size-2.5", lg: "size-3" };
+function StatusDot({
+  tone = "neutral",
+  size = "sm",
+  label,
+  ring = false,
+  className,
+  dotClassName,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const dot = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block shrink-0 rounded-full",
+        SIZE[size],
+        FILL[tone],
+        ring && "ring-2 ring-[var(--bg-surface)]",
+        label == null && className,
+        dotClassName
+      ),
+      ...label == null ? ariaLabel ? { role: "img", "aria-label": ariaLabel, ...rest } : { "aria-hidden": true, ...rest } : { "aria-hidden": true }
+    }
+  );
+  if (label == null) return dot;
+  return (
+    // No `aria-label` here: the visible label is the text, and a name on a role-less
+    // span is one ARIA forbids and screen readers ignore.
+    /* @__PURE__ */ jsxs("span", { ...rest, className: cn("inline-flex min-w-0 items-center gap-1.5 text-sm", className), children: [
+      dot,
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label })
+    ] })
+  );
+}
+export {
+  StatusDot
+};
+//# sourceMappingURL=status-dot.js.map

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

@@ -0,0 +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":[]}

package/dist/components/table.d.ts

@@ -1,7 +1,15 @@
 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";
 /**
  * The alignment a figure column wants: end-aligned (so the units line up under each
@@ -20,6 +28,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,11 +48,34 @@ 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. */
@@ -80,4 +113,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 TableLayout, type TableProps, TableRow, type TableRowProps };

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({
@@ -14,7 +14,8 @@ const TableContext = createContext({
 const SectionContext = createContext("body");
 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 +28,7 @@ function Table({
   zebra = false,
   hover = false,
   wrapperClassName,
+  layout,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -72,6 +74,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,8 +86,42 @@ 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) }) });
@@ -158,6 +196,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\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":[]}

package/dist/components/text.d.ts

@@ -0,0 +1,63 @@
+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.
+ */
+type SectionLabelSize = "xs" | "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,23 @@
+"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)]",
+  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 */\nexport type SectionLabelSize = \"xs\" | \"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  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":";AAoDI;AAnDJ,SAAS,UAAU;AAsBZ,MAAM,sBAAwD;AAAA,EACnE,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/toast.d.ts

@@ -0,0 +1,167 @@
+import * as react from 'react';
+import { ReactNode, MouseEvent, CSSProperties, ReactElement } from 'react';
+
+/** The words the toast layer says. `close` and `notifications` are read by a screen
+ *  reader (the close button's name, the toast region's name); `undo` and `redo` are
+ *  the default action labels of {@link toast.undo} / {@link toast.redo}. */
+interface ToastLabels {
+    close: string;
+    notifications: string;
+    undo: string;
+    redo: string;
+}
+declare const DEFAULT_TOAST_LABELS: ToastLabels;
+type ToastId = string | number;
+/** A button on the toast. Clicking it dismisses the toast, unless `onClick` calls
+ *  `event.preventDefault()`. */
+interface ToastAction {
+    label: ReactNode;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+interface ToastOptions {
+    /** Re-using an id REPLACES the toast on screen with that id (in place — it does not
+     *  stack a second one), which is how a toast is updated. Default: a fresh id. */
+    id?: ToastId;
+    description?: ReactNode;
+    action?: ToastAction;
+    /** A second, quieter button (sonner's `cancel`). */
+    cancel?: ToastAction;
+    /** Milliseconds; `Infinity` keeps it until dismissed. Default 4s — or
+     *  {@link TOAST_ACTION_DURATION} when there is an `action`, so there is time to
+     *  read the message AND reach the button. */
+    duration?: number;
+    /** Called when the toast is closed by the user (close button, swipe, action). */
+    onDismiss?: (toast: {
+        id: ToastId;
+    }) => void;
+    /** Called when the toast times out. */
+    onAutoClose?: (toast: {
+        id: ToastId;
+    }) => void;
+    /** Wrap the message and the description in `data-private`, so an app's demo /
+     *  privacy mode blurs them like every other sensitive value. */
+    redact?: boolean;
+    /** Replaces the tone's icon. */
+    icon?: ReactNode;
+    /** `false`: no close button, no swipe. */
+    dismissible?: boolean;
+    /** Per toast, over the `<Toaster>`'s `closeButton`. */
+    closeButton?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** The default duration of a toast that carries an action (8s rather than 4s). */
+declare const TOAST_ACTION_DURATION = 8000;
+type Kind = "default" | "success" | "error" | "warning" | "info" | "loading";
+interface ToastPromiseOptions<T> extends ToastOptions {
+    loading: ReactNode;
+    /** The success message, or a function of the resolved value. Omitted: the loading
+     *  toast is dismissed. */
+    success?: ReactNode | ((value: T) => ReactNode);
+    /** The error message, or a function of the rejection. Omitted: dismissed. */
+    error?: ReactNode | ((error: unknown) => ReactNode);
+    finally?: () => void;
+}
+interface ToastUndoOptions extends Omit<ToastOptions, "action"> {
+    /** Called when the button is pressed. */
+    onUndo: () => void;
+    /** Default: `toast.undo` from `<UiKitProvider>` ("Undo"). */
+    label?: ReactNode;
+    /** Default `success` — the step the toast reports worked. */
+    tone?: Exclude<Kind, "loading">;
+}
+interface ToastRedoOptions extends Omit<ToastUndoOptions, "onUndo"> {
+    onRedo: () => void;
+}
+/**
+ * Show a toast. The same shape as sonner's `toast`, so an app migrates by changing the
+ * import: `toast(msg, opts)`, `toast.success` / `error` / `warning` / `info` /
+ * `loading`, `toast.promise`, `toast.dismiss`, `toast.custom`. Each returns the toast's
+ * id; pass it back as `id` to replace that toast in place.
+ *
+ * Needs a mounted {@link Toaster}. Messages may be any ReactNode.
+ */
+declare const toast: ((message: ReactNode, opts?: ToastOptions) => ToastId) & {
+    message: (message: ReactNode, opts?: ToastOptions) => ToastId;
+    success: (message: ReactNode, opts?: ToastOptions) => ToastId;
+    error: (message: ReactNode, opts?: ToastOptions) => ToastId;
+    warning: (message: ReactNode, opts?: ToastOptions) => ToastId;
+    info: (message: ReactNode, opts?: ToastOptions) => ToastId;
+    /** A spinner that does not time out — replace it (same `id`) or dismiss it. */
+    loading: (message: ReactNode, opts?: ToastOptions) => ToastId;
+    /**
+     * A loading toast that becomes the success or the error toast, in place, when
+     * `promise` settles. Returns the toast's id; the promise itself is the caller's.
+     */
+    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): ToastId;
+    /** Close one toast, or every toast when `id` is omitted. */
+    dismiss(id?: ToastId): void;
+    /** Render your own node in a toast slot — `render` receives the id to dismiss it. */
+    custom(render: (id: ToastId) => ReactElement, opts?: Omit<ToastOptions, "redact">): ToastId;
+    /**
+     * "Deleted — Undo": a toast whose action takes the step back, labelled by the
+     * provider's `toast.undo`. The journal stays the app's; this is only its toast.
+     * Pair with {@link toast.redo} so the step back can itself be taken back.
+     */
+    undo(message: ReactNode, { onUndo, ...opts }: ToastUndoOptions): ToastId;
+    /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */
+    redo(message: ReactNode, { onRedo, ...opts }: ToastRedoOptions): ToastId;
+};
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastSwipeDirection = "top" | "right" | "bottom" | "left";
+/** sonner's offset: one value for every edge, or per edge. Numbers are px. */
+type ToasterOffset = string | number | {
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+};
+interface ToasterProps {
+    /** Default: `bottom-center` on a phone (so the toast covers neither the header's
+     *  buttons nor the bottom nav's), `top-center` from `md` up. */
+    position?: ToastPosition;
+    /** The height to keep clear at the bottom — AppShell's bottom nav. Default: its
+     *  measured `--app-nav-h`, so nothing has to be passed under an AppShell. The safe
+     *  area is added either way. Numbers are px. */
+    navOffset?: string | number;
+    /** Default: follows the `.dark` class the kit's theme store (`useApplyTheme`) puts
+     *  on `<html>` — whichever store the app built, with nothing passed. */
+    theme?: "light" | "dark" | "system";
+    labels?: Partial<ToastLabels>;
+    /** Default 4s (8s for a toast with an action). */
+    duration?: number;
+    visibleToasts?: number;
+    expand?: boolean;
+    /** Default true. */
+    closeButton?: boolean;
+    /** Tone-coloured toasts (the AlertBanner tokens). Default true. */
+    richColors?: boolean;
+    /** Default: every direction. */
+    swipeDirections?: ToastSwipeDirection[];
+    /** Overrides the computed offset outright (above the nav on a phone, below a 48px
+     *  top bar on desktop). */
+    offset?: ToasterOffset;
+    /** Below 600px, where sonner switches to its full-width layout. Default: `offset`'s
+     *  phone value. */
+    mobileOffset?: ToasterOffset;
+    /** Keyboard shortcut that moves focus into the toasts. Default Alt+T. */
+    hotkey?: string[];
+    gap?: number;
+    dir?: "ltr" | "rtl" | "auto";
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Where the toasts appear, with the kit's defaults — mount ONE, near the root and
+ * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a
+ * toast's content navigates.
+ *
+ * Accessible as sonner makes it: the toasts sit in a polite live region, so a message
+ * is announced with its description and its action's label; every toast and every
+ * button in it is focusable, the timer pauses while focus or the pointer is inside,
+ * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast
+ * with an action stays up 8s by default, so the button can be reached.
+ */
+declare function Toaster({ position, navOffset, theme, labels: labelsProp, closeButton, richColors, swipeDirections, offset, mobileOffset, className, style, ...rest }: ToasterProps): react.JSX.Element | null;
+
+export { DEFAULT_TOAST_LABELS, TOAST_ACTION_DURATION, type ToastAction, type ToastId, type ToastLabels, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastRedoOptions, type ToastSwipeDirection, type ToastUndoOptions, Toaster, type ToasterOffset, type ToasterProps, toast };