@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/components/signed-amount.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, Minus } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { formatMoney, formatNumber, formatPercent } from "../lib/format.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile.js";
+const TEXT_TONE = {
+  default: "text-[var(--text-primary)]",
+  muted: "text-[var(--text-muted)]",
+  brand: "text-[var(--brand)]",
+  income: "text-[var(--money-income)]",
+  expense: "text-[var(--money-expense)]",
+  net: "text-[var(--money-net)]",
+  success: "text-[var(--success)]",
+  warning: "text-[var(--warning)]",
+  danger: "text-[var(--danger)]",
+  info: "text-[var(--info)]"
+};
+function toneTextClass(tone) {
+  return TEXT_TONE[tone];
+}
+function Tone({ tone, className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cn(TEXT_TONE[tone], className) });
+}
+const DEFAULT_SIGNED_AMOUNT_LABELS = {
+  positive: (amount) => `plus ${amount}`,
+  negative: (amount) => `minus ${amount}`
+};
+function useMagnitudeFormatter({ currency, unit, compact, digits, format, locale }) {
+  const kitLocale = useKitLocale(locale);
+  return (magnitude) => {
+    if (format) return format(magnitude);
+    if (unit === "percent") return formatPercent(magnitude, { locale: kitLocale, compact, digits });
+    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });
+    return formatNumber(magnitude, { locale: kitLocale, compact, digits });
+  };
+}
+function directionOf(value) {
+  return value > 0 ? "up" : value < 0 ? "down" : "flat";
+}
+function signedToneClass(tone, dir, goodDirection) {
+  if (tone === "verdict" || goodDirection && tone === "signed") {
+    if (dir === "flat" || !goodDirection) return TEXT_TONE.muted;
+    return dir === goodDirection ? TEXT_TONE.success : TEXT_TONE.danger;
+  }
+  if (tone === "signed") return dir === "flat" ? TEXT_TONE.muted : dir === "up" ? TEXT_TONE.income : TEXT_TONE.expense;
+  if (tone === "neutral") return "";
+  return TEXT_TONE[tone];
+}
+const ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus };
+function SignedAmount({
+  value,
+  currency,
+  unit,
+  compact,
+  digits,
+  format,
+  locale,
+  tone = "signed",
+  goodDirection,
+  showPlus = true,
+  arrow = false,
+  sensitive = false,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = useKitLabels("signedAmount", DEFAULT_SIGNED_AMOUNT_LABELS, labels);
+  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });
+  const finite = Number.isFinite(value);
+  const dir = finite ? directionOf(value) : "flat";
+  const amount = finite ? fmt(Math.abs(value)) : "\u2014";
+  const sign = dir === "up" ? showPlus ? "+" : "" : dir === "down" ? "\u2212" : "";
+  const spoken = dir === "up" ? text.positive(amount) : dir === "down" ? text.negative(amount) : amount;
+  const Icon = ARROW[dir];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "data-private": sensitive ? "" : void 0,
+      "data-direction": dir,
+      className: cn(
+        "relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums",
+        signedToneClass(tone, dir, goodDirection),
+        className
+      ),
+      children: [
+        arrow && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-[1em] shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
+          sign,
+          amount
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
+      ]
+    }
+  );
+}
+function Delta({
+  value,
+  currency,
+  unit,
+  compact,
+  digits,
+  format,
+  locale,
+  goodDirection,
+  label,
+  arrow = true,
+  sensitive = false,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
+  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });
+  if (!Number.isFinite(value)) return null;
+  const amount = fmt(Math.abs(value));
+  const dir = directionOf(value);
+  const Icon = ARROW[dir];
+  let spoken = dir === "up" ? text.increase(amount) : dir === "down" ? text.decrease(amount) : text.unchanged;
+  let tone = TEXT_TONE.muted;
+  if (goodDirection && dir !== "flat") {
+    const good = dir === goodDirection;
+    spoken = good ? text.better(spoken) : text.worse(spoken);
+    tone = good ? TEXT_TONE.success : TEXT_TONE.danger;
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "data-direction": dir,
+      className: cn("relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums", className),
+      children: [
+        /* @__PURE__ */ jsxs("span", { "data-private": sensitive ? "" : void 0, className: cn("inline-flex items-center gap-0.5 font-medium", tone), children: [
+          arrow && /* @__PURE__ */ jsx(Icon, { className: "size-[1em] shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: dir === "flat" && arrow ? null : amount }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
+        ] }),
+        label != null && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: label })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_SIGNED_AMOUNT_LABELS,
+  Delta,
+  SignedAmount,
+  Tone,
+  toneTextClass
+};
+//# sourceMappingURL=signed-amount.js.map

package/dist/components/signed-amount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/signed-amount.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatMoney, formatNumber, formatPercent } from \"../lib/format\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile\";\nimport type { StatTileLabels } from \"./stat-tile\";\n\n/**\n * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class\n * any span can take.\n *\n *  - `default` — the primary text colour. `muted` — the secondary, quiet one.\n *  - `income` / `expense` / `net` — the money trio (CVD-safe teal / amber / violet).\n *  - `success` / `warning` / `danger` / `info` — a verdict: a rent rise is the tenant's\n *    bad news (kastlan lease-columns), a vote \"for\" is green (meeting-agenda-tab).\n *  - `brand` — the app's accent.\n *\n * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.\n */\nexport type TextTone =\n  | \"default\"\n  | \"muted\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TEXT_TONE: Record<TextTone, string> = {\n  default: \"text-[var(--text-primary)]\",\n  muted: \"text-[var(--text-muted)]\",\n  brand: \"text-[var(--brand)]\",\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n  net: \"text-[var(--money-net)]\",\n  success: \"text-[var(--success)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--info)]\",\n};\n\n/**\n * The class that colours text in `tone` — for the spans kastlan colours by hand with\n * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,\n * meeting-agenda-tab), so the palette they draw from is the kit's tokens.\n */\nexport function toneTextClass(tone: TextTone): string {\n  return TEXT_TONE[tone];\n}\n\nexport interface ToneProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone: TextTone;\n}\n\n/** A `<span>` in a {@link TextTone} — `<Tone tone=\"success\">{votesFor}</Tone>`. */\nexport function Tone({ tone, className, ...rest }: ToneProps) {\n  return <span {...rest} className={cn(TEXT_TONE[tone], className)} />;\n}\n\n/* ── Signed amounts ──────────────────────────────────────────────────────── */\n\n/** Which way is +1: `up` for a figure where more is good news (income, savings),\n *  `down` where less is (a rent the tenant pays, a cost). */\nexport type GoodDirection = \"up\" | \"down\";\n\n/**\n * How a signed figure is coloured:\n *  - `signed` (default) — money read by its own sign: above zero `income`, below zero\n *    `expense`, zero muted. A balance, a net.\n *  - `income` / `expense` / `neutral` — one colour whatever the sign (`neutral` is the\n *    text's own colour).\n *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good\n *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.\n */\nexport type SignedAmountTone = \"signed\" | \"income\" | \"expense\" | \"neutral\" | \"verdict\";\n\n/** What a signed figure says to a screen reader, whose readers disagree about a\n *  leading \"+\" (most skip it) and a \"−\" (some read \"dash\", some nothing). */\nexport interface SignedAmountLabels {\n  /** A figure above zero. `amount` is formatted and unsigned. */\n  positive: (amount: string) => string;\n  /** A figure below zero. `amount` is formatted and unsigned. */\n  negative: (amount: string) => string;\n}\n\nexport const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {\n  positive: (amount) => `plus ${amount}`,\n  negative: (amount) => `minus ${amount}`,\n};\n\ninterface SignedFormatProps {\n  /** ISO 4217 code: format as money. */\n  currency?: string;\n  /** `\"percent\"` reads `value` as a RATIO (`0.12` → 12 %), as `StatTile`'s delta does. */\n  unit?: \"value\" | \"percent\";\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Fraction digits, as `formatNumber`'s `digits`. */\n  digits?: number | { min?: number; max?: number };\n  /** Formats the UNSIGNED magnitude, replacing the `Intl` default outright. The sign\n   *  is the component's. */\n  format?: (magnitude: number) => string;\n  locale?: string;\n}\n\nfunction useMagnitudeFormatter({ currency, unit, compact, digits, format, locale }: SignedFormatProps) {\n  const kitLocale = useKitLocale(locale);\n  return (magnitude: number): string => {\n    if (format) return format(magnitude);\n    if (unit === \"percent\") return formatPercent(magnitude, { locale: kitLocale, compact, digits });\n    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });\n    return formatNumber(magnitude, { locale: kitLocale, compact, digits });\n  };\n}\n\nfunction directionOf(value: number): \"up\" | \"down\" | \"flat\" {\n  return value > 0 ? \"up\" : value < 0 ? \"down\" : \"flat\";\n}\n\nfunction signedToneClass(\n  tone: SignedAmountTone,\n  dir: \"up\" | \"down\" | \"flat\",\n  goodDirection: GoodDirection | undefined,\n): string {\n  if (tone === \"verdict\" || (goodDirection && tone === \"signed\")) {\n    if (dir === \"flat\" || !goodDirection) return TEXT_TONE.muted;\n    return dir === goodDirection ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  if (tone === \"signed\") return dir === \"flat\" ? TEXT_TONE.muted : dir === \"up\" ? TEXT_TONE.income : TEXT_TONE.expense;\n  if (tone === \"neutral\") return \"\";\n  return TEXT_TONE[tone];\n}\n\nconst ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;\n\nexport interface SignedAmountProps\n  extends SignedFormatProps,\n    Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  value: number;\n  /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */\n  tone?: SignedAmountTone;\n  /** Which way is good news — colours by verdict (`success` / `danger`). */\n  goodDirection?: GoodDirection;\n  /** Print \"+\" before a positive figure (default `true`). A negative always shows its\n   *  minus; zero shows neither. */\n  showPlus?: boolean;\n  /** An arrow before the figure (up / down / a dash at zero) — so the direction does not\n   *  ride on colour alone. Decorative; the words say the same. */\n  arrow?: boolean;\n  /** Tag the figure `data-private`, for the host's demo-mode blur. */\n  sensitive?: boolean;\n  labels?: Partial<SignedAmountLabels>;\n}\n\n/**\n * A figure with a sign that matters: a balance, a rent change, a net.\n *\n * kastlan writes it by hand in five places — `{change > 0 ? \"+\" : \"\"}{formatCurrency(\n * change)}` in a span coloured by a ternary (lease-columns:190, settlement-table:58,\n * the tenancy `formatPct`) — and each picks its own colours for the same verdict.\n *\n * The visible figure (sign, digits, arrow) is hidden from assistive tech and spoken as\n * words instead (\"plus CHF 50.00\" / \"minus CHF 50.00\", `signedAmount.*`): a \"+\" is\n * skipped by most screen readers, and `Intl`'s \"−\" is read as \"dash\" or not at all.\n */\nexport function SignedAmount({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  tone = \"signed\",\n  goodDirection,\n  showPlus = true,\n  arrow = false,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: SignedAmountProps) {\n  const text = useKitLabels(\"signedAmount\", DEFAULT_SIGNED_AMOUNT_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  const finite = Number.isFinite(value);\n  const dir = finite ? directionOf(value) : \"flat\";\n  const amount = finite ? fmt(Math.abs(value)) : \"—\";\n  // U+2212, the typographic minus: the same width as \"+\", so a column of signed figures\n  // lines up under `tabular-nums`.\n  const sign = dir === \"up\" ? (showPlus ? \"+\" : \"\") : dir === \"down\" ? \"−\" : \"\";\n  const spoken = dir === \"up\" ? text.positive(amount) : dir === \"down\" ? text.negative(amount) : amount;\n  const Icon = ARROW[dir];\n  return (\n    <span\n      {...rest}\n      data-private={sensitive ? \"\" : undefined}\n      data-direction={dir}\n      className={cn(\n        \"relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums\",\n        signedToneClass(tone, dir, goodDirection),\n        className,\n      )}\n    >\n      {arrow && <Icon aria-hidden className=\"size-[1em] shrink-0\" />}\n      <span aria-hidden>\n        {sign}\n        {amount}\n      </span>\n      <span className=\"sr-only\">{spoken}</span>\n    </span>\n  );\n}\n\nexport interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  /** The change. Above zero is \"up\". */\n  value: number;\n  /** Which way is good news. Unset, the change is stated and not judged (muted); set,\n   *  it is coloured `success` / `danger` and its sentence says \"(better)\" / \"(worse)\". */\n  goodDirection?: GoodDirection;\n  /** What it is measured against, after it: \"vs last month\". */\n  label?: ReactNode;\n  /** Hide the arrow (shown by default, as on a StatTile). */\n  arrow?: boolean;\n  sensitive?: boolean;\n  /** The `statTile` namespace's direction words — a delta says the same as a tile's. */\n  labels?: Partial<Pick<StatTileLabels, \"increase\" | \"decrease\" | \"unchanged\" | \"better\" | \"worse\">>;\n}\n\n/**\n * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for\n * screen readers (\"Up 12% (worse)\"), coloured only when `goodDirection` judges it —\n * users up and cost up are the same arrow until someone says which is good.\n *\n * For a change shown outside a tile: kastlan's rent-change column\n * (lease-columns:219, a \"+1.25%\" chip), the breakdown rows of the rent calculator\n * (breakdown-row:5, a trend icon coloured by hand).\n */\nexport function Delta({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  goodDirection,\n  label,\n  arrow = true,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: DeltaProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  if (!Number.isFinite(value)) return null;\n  const amount = fmt(Math.abs(value));\n  const dir = directionOf(value);\n  const Icon = ARROW[dir];\n  let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n  let tone = TEXT_TONE.muted;\n  if (goodDirection && dir !== \"flat\") {\n    const good = dir === goodDirection;\n    spoken = good ? text.better(spoken) : text.worse(spoken);\n    tone = good ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  return (\n    <span\n      {...rest}\n      data-direction={dir}\n      className={cn(\"relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums\", className)}\n    >\n      <span data-private={sensitive ? \"\" : undefined} className={cn(\"inline-flex items-center gap-0.5 font-medium\", tone)}>\n        {arrow && <Icon className=\"size-[1em] shrink-0\" aria-hidden />}\n        {/* Flat with an arrow is the dash alone, as on a tile; without one, the zero. */}\n        <span aria-hidden>{dir === \"flat\" && arrow ? null : amount}</span>\n        <span className=\"sr-only\">{spoken}</span>\n      </span>\n      {label != null && <span className=\"text-[var(--text-muted)]\">{label}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/skeleton.d.ts

@@ -19,6 +19,13 @@ interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
     shape?: SkeletonShape;
     /** For `line`: this many lines, the last one shorter — a paragraph's outline. */
     lines?: number;
+    /**
+     * Say what is loading, once: wraps the placeholder in a `role="status"` region with
+     * this as its (visually hidden) text — kastlan's activity feed (activity-feed:52)
+     * built exactly that by hand around `<Skeleton lines={5} />`. The placeholder itself
+     * stays hidden. Left out, nothing is announced, as before.
+     */
+    label?: string;
 }
 /**
  * A grey stand-in for content that is on its way.
@@ -28,9 +35,9 @@ interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
  *
  * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve
  * unnamed grey boxes would have learned nothing. Say "loading" once, where it
- * belongs: `aria-busy` on the region being filled, or a `Spinner` / sr-only line
- * beside the skeletons.
+ * belongs: `aria-busy` on the region being filled, a `Spinner` / sr-only line
+ * beside the skeletons, or this component's own `label`.
  */
-declare function Skeleton({ shape, lines, className, ...rest }: SkeletonProps): react.JSX.Element;
+declare function Skeleton({ label, ...props }: SkeletonProps): react.JSX.Element;
 
 export { SKELETON_CLASS, Skeleton, type SkeletonProps, type SkeletonShape };

package/dist/components/skeleton.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 const SKELETON_CLASS = "animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none";
 const SHAPE = {
@@ -7,7 +7,17 @@ const SHAPE = {
   block: "h-24 w-full rounded-md",
   circle: "size-10 rounded-full"
 };
-function Skeleton({ shape = "line", lines, className, ...rest }) {
+function Skeleton({ label, ...props }) {
+  if (!label) return /* @__PURE__ */ jsx(SkeletonFill, { ...props });
+  return (
+    // `relative`: the containing block for the sr-only text (sr-only-containment.test).
+    /* @__PURE__ */ jsxs("div", { role: "status", className: "relative", "data-skeleton-status": "", children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+      /* @__PURE__ */ jsx(SkeletonFill, { ...props })
+    ] })
+  );
+}
+function SkeletonFill({ shape = "line", lines, className, ...rest }) {
   if (shape === "line" && lines !== void 0 && lines > 1) {
     return /* @__PURE__ */ jsx("div", { ...rest, "aria-hidden": true, className: cn("flex flex-col gap-2", className), "data-skeleton": "lines", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(
       "div",

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The look of a placeholder, as one class string — the same fill and pulse\n * `StatTile`'s `loading` headline draws (it imports this), so a tile and the list\n * beside it shimmer as one surface.\n *\n * `motion-reduce:animate-none`: a pulse is motion with no information in it, which\n * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the\n * shape of what is coming is still there.\n */\nexport const SKELETON_CLASS = \"animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none\";\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** `line` (default): a bar the height of a line of small text. `block`: an area\n   *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with\n   *  `className` (`w-32`, `h-40`, `size-8`). */\n  shape?: SkeletonShape;\n  /** For `line`: this many lines, the last one shorter — a paragraph's outline. */\n  lines?: number;\n}\n\nconst SHAPE: Record<SkeletonShape, string> = {\n  line: \"h-3 w-full\",\n  block: \"h-24 w-full rounded-md\",\n  circle: \"size-10 rounded-full\",\n};\n\n/**\n * A grey stand-in for content that is on its way.\n *\n * keksdose and kastlan both drew these by hand — `animate-pulse bg-slate-200` in one\n * place, a token in the next, a pulse that ran under reduced motion everywhere.\n *\n * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve\n * unnamed grey boxes would have learned nothing. Say \"loading\" once, where it\n * belongs: `aria-busy` on the region being filled, or a `Spinner` / sr-only line\n * beside the skeletons.\n */\nexport function Skeleton({ shape = \"line\", lines, className, ...rest }: SkeletonProps) {\n  if (shape === \"line\" && lines !== undefined && lines > 1) {\n    return (\n      <div {...rest} aria-hidden className={cn(\"flex flex-col gap-2\", className)} data-skeleton=\"lines\">\n        {Array.from({ length: lines }, (_, i) => (\n          <div\n            key={i}\n            className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && \"w-2/3\")}\n            data-skeleton=\"line\"\n          />\n        ))}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      aria-hidden\n      data-skeleton={shape}\n      className={cn(SKELETON_CLASS, SHAPE[shape], className)}\n    />\n  );\n}\n"],"mappings":";AA+CU;AA9CV,SAAS,UAAU;AAWZ,MAAM,iBAAiB;AAa9B,MAAM,QAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAaO,SAAS,SAAS,EAAE,QAAQ,QAAQ,OAAO,WAAW,GAAG,KAAK,GAAkB;AACrF,MAAI,UAAU,UAAU,UAAU,UAAa,QAAQ,GAAG;AACxD,WACE,oBAAC,SAAK,GAAG,MAAM,eAAW,MAAC,WAAW,GAAG,uBAAuB,SAAS,GAAG,iBAAc,SACvF,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,GAAG,gBAAgB,MAAM,MAAM,MAAM,QAAQ,KAAK,OAAO;AAAA,QACpE,iBAAc;AAAA;AAAA,MAFT;AAAA,IAGP,CACD,GACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,MACX,iBAAe;AAAA,MACf,WAAW,GAAG,gBAAgB,MAAM,KAAK,GAAG,SAAS;AAAA;AAAA,EACvD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The look of a placeholder, as one class string — the same fill and pulse\n * `StatTile`'s `loading` headline draws (it imports this), so a tile and the list\n * beside it shimmer as one surface.\n *\n * `motion-reduce:animate-none`: a pulse is motion with no information in it, which\n * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the\n * shape of what is coming is still there.\n */\nexport const SKELETON_CLASS = \"animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none\";\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** `line` (default): a bar the height of a line of small text. `block`: an area\n   *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with\n   *  `className` (`w-32`, `h-40`, `size-8`). */\n  shape?: SkeletonShape;\n  /** For `line`: this many lines, the last one shorter — a paragraph's outline. */\n  lines?: number;\n  /**\n   * Say what is loading, once: wraps the placeholder in a `role=\"status\"` region with\n   * this as its (visually hidden) text — kastlan's activity feed (activity-feed:52)\n   * built exactly that by hand around `<Skeleton lines={5} />`. The placeholder itself\n   * stays hidden. Left out, nothing is announced, as before.\n   */\n  label?: string;\n}\n\nconst SHAPE: Record<SkeletonShape, string> = {\n  line: \"h-3 w-full\",\n  block: \"h-24 w-full rounded-md\",\n  circle: \"size-10 rounded-full\",\n};\n\n/**\n * A grey stand-in for content that is on its way.\n *\n * keksdose and kastlan both drew these by hand — `animate-pulse bg-slate-200` in one\n * place, a token in the next, a pulse that ran under reduced motion everywhere.\n *\n * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve\n * unnamed grey boxes would have learned nothing. Say \"loading\" once, where it\n * belongs: `aria-busy` on the region being filled, a `Spinner` / sr-only line\n * beside the skeletons, or this component's own `label`.\n */\nexport function Skeleton({ label, ...props }: SkeletonProps) {\n  if (!label) return <SkeletonFill {...props} />;\n  return (\n    // `relative`: the containing block for the sr-only text (sr-only-containment.test).\n    <div role=\"status\" className=\"relative\" data-skeleton-status=\"\">\n      <span className=\"sr-only\">{label}</span>\n      <SkeletonFill {...props} />\n    </div>\n  );\n}\n\nfunction SkeletonFill({ shape = \"line\", lines, className, ...rest }: Omit<SkeletonProps, \"label\">) {\n  if (shape === \"line\" && lines !== undefined && lines > 1) {\n    return (\n      <div {...rest} aria-hidden className={cn(\"flex flex-col gap-2\", className)} data-skeleton=\"lines\">\n        {Array.from({ length: lines }, (_, i) => (\n          <div\n            key={i}\n            className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && \"w-2/3\")}\n            data-skeleton=\"line\"\n          />\n        ))}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      aria-hidden\n      data-skeleton={shape}\n      className={cn(SKELETON_CLASS, SHAPE[shape], className)}\n    />\n  );\n}\n"],"mappings":";AAkDqB,cAGjB,YAHiB;AAjDrB,SAAS,UAAU;AAWZ,MAAM,iBAAiB;AAoB9B,MAAM,QAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAaO,SAAS,SAAS,EAAE,OAAO,GAAG,MAAM,GAAkB;AAC3D,MAAI,CAAC,MAAO,QAAO,oBAAC,gBAAc,GAAG,OAAO;AAC5C;AAAA;AAAA,IAEE,qBAAC,SAAI,MAAK,UAAS,WAAU,YAAW,wBAAqB,IAC3D;AAAA,0BAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,MACjC,oBAAC,gBAAc,GAAG,OAAO;AAAA,OAC3B;AAAA;AAEJ;AAEA,SAAS,aAAa,EAAE,QAAQ,QAAQ,OAAO,WAAW,GAAG,KAAK,GAAiC;AACjG,MAAI,UAAU,UAAU,UAAU,UAAa,QAAQ,GAAG;AACxD,WACE,oBAAC,SAAK,GAAG,MAAM,eAAW,MAAC,WAAW,GAAG,uBAAuB,SAAS,GAAG,iBAAc,SACvF,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,GAAG,gBAAgB,MAAM,MAAM,MAAM,QAAQ,KAAK,OAAO;AAAA,QACpE,iBAAc;AAAA;AAAA,MAFT;AAAA,IAGP,CACD,GACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,MACX,iBAAe;AAAA,MACf,WAAW,GAAG,gBAAgB,MAAM,KAAK,GAAG,SAAS;AAAA;AAAA,EACvD;AAEJ;","names":[]}

package/dist/components/stat-tile.d.ts

@@ -166,7 +166,8 @@ interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
     /** Makes the tile a link. See {@link renderLink} for a router. */
     href?: string;
     /** Renders the link for `href` — pass your router's `<Link>` here, since a plain
-     *  `<a>` reloads a single-page app. Default: `<a>`. */
+     *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`
+     *  (for an in-app `href`), then `<a>`. */
     renderLink?: (props: StatTileLinkProps) => ReactElement;
     /** Makes the tile a button (ignored when `href` is given). */
     onClick?: () => void;

package/dist/components/stat-tile.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useId, useLayoutEffect, useState } from "react";
 import { ArrowDown, ArrowUp, Minus } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels.js";
+import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
 import { Card, FieldHint } from "./ui.js";
 import { Sparkline } from "./sparkline.js";
 import { Tooltip } from "./tooltip.js";
@@ -82,6 +83,7 @@ function StatTile({
   ...rest
 }) {
   const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
+  const kitLink = useKitLink();
   const [labelEl, setLabelEl] = useState(null);
   const labelCut = useIsTruncated(truncateLabel ? labelEl : null);
   const kitLocale = useKitLocale(locale);
@@ -112,7 +114,8 @@ function StatTile({
       "aria-describedby": describedBy,
       children: label
     };
-    labelNode = renderLink ? renderLink(linkProps) : /* @__PURE__ */ jsx("a", { href, className: stretched, "aria-describedby": describedBy, children: label });
+    const kit = pickLinkRenderer(void 0, kitLink, href);
+    labelNode = renderLink ? renderLink(linkProps) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props: linkProps }) : /* @__PURE__ */ jsx("a", { href, className: stretched, "aria-describedby": describedBy, children: label });
   } else if (onClick) {
     labelNode = /* @__PURE__ */ jsx("button", { type: "button", onClick, "aria-describedby": describedBy, className: stretched, children: label });
   }

package/dist/components/stat-tile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { isValidElement, useId, useLayoutEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { Card, FieldHint } from \"./ui\";\nimport { Sparkline } from \"./sparkline\";\nimport { Tooltip } from \"./tooltip\";\n// The kit's one placeholder look, so a loading tile and the Skeleton list beside it\n// shimmer as one surface — and both stop under `prefers-reduced-motion`, which this\n// tile's private copy of the string did not.\nimport { SKELETON_CLASS } from \"./skeleton\";\n\n/**\n * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a\n * sentence: a screen reader gets the direction (and, under `goodDirection`, the\n * verdict) as words, and a sighted reader who cannot tell the two delta colours apart\n * still has the arrow — neither judgement rides on colour alone.\n */\nexport interface StatTileLabels {\n  /** The delta, rising. `amount` is already formatted and unsigned. */\n  increase: (amount: string) => string;\n  decrease: (amount: string) => string;\n  unchanged: string;\n  /** Wraps the direction sentence when `goodDirection` says the change is good. */\n  better: (change: string) => string;\n  worse: (change: string) => string;\n  /** Spoken in place of a missing value (the tile shows a dash). */\n  noValue: string;\n  /** Spoken while `loading`. */\n  loading: string;\n}\n\nexport const DEFAULT_STAT_TILE_LABELS: StatTileLabels = {\n  increase: (amount) => `Up ${amount}`,\n  decrease: (amount) => `Down ${amount}`,\n  unchanged: \"No change\",\n  better: (change) => `${change} (better)`,\n  worse: (change) => `${change} (worse)`,\n  noValue: \"No data\",\n  loading: \"Loading…\",\n};\n\n/**\n * What colours a figure. Token-backed like everything else in the kit.\n *\n *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).\n *  - `signed` — a money figure read by its own sign: above zero `income`, below zero\n *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER\n *    value; a pre-formatted string cannot be read and stays neutral.\n *  - `success` / `warning` / `danger` / `info` — a threshold verdict (\"phase margin\n *    below 30°\"). Say it in the hint or description as well; colour alone is not one.\n */\nexport type StatTileTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"signed\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TONE_CLASS: Record<Exclude<StatTileTone, \"signed\">, string> = {\n  neutral: \"text-[var(--text-primary)]\",\n  brand: \"text-[var(--brand)]\",\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n  net: \"text-[var(--money-net)]\",\n  success: \"text-[var(--success)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--info)]\",\n};\n\nfunction toneClass(tone: StatTileTone, value: unknown): string {\n  if (tone !== \"signed\") return TONE_CLASS[tone];\n  if (typeof value !== \"number\" || value === 0) return TONE_CLASS.neutral;\n  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;\n}\n\n/** A change since the previous period. A bare number is shorthand for `{ value }`. */\nexport interface StatTileDelta {\n  /** Signed: above zero is \"up\". */\n  value: number;\n  /** `\"value\"` (default) formats it like the headline — same currency, same\n   *  notation. `\"percent\"` reads it as a RATIO: `0.12` is shown as 12 %. */\n  unit?: \"value\" | \"percent\";\n  /** What it is measured against, shown after it: \"vs last month\". */\n  label?: ReactNode;\n}\n\n/** A smaller figure under the headline — a prior period, a projection, a split. */\nexport interface StatTileSubValue {\n  label: ReactNode;\n  /** A number is formatted like the headline; anything else is rendered as given. */\n  value: ReactNode;\n  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a\n   *  teal September above an amber August). Sub-values are always the muted weight\n   *  of their tone: they are history, and must not outshout the figure above them.\n   *\n   *  `\"none\"` leaves the figure untinted — the row's own muted text, like its label —\n   *  even on a toned tile: keksdose's report KpiCard (reports/charts/kpi-card.tsx),\n   *  whose `negative` convention tints only a figure below zero and leaves the rest\n   *  plain. (`\"neutral\"` is not that: it is the headline's full text colour, at the\n   *  sub-value's 75 %.) */\n  tone?: StatTileTone | \"none\";\n}\n\n/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's\n *  link: the class is what stretches the link over the whole tile. */\nexport interface StatTileLinkProps {\n  href: string;\n  className: string;\n  \"aria-describedby\": string;\n  children: ReactNode;\n}\n\nexport interface StatTileProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onClick\"> {\n  /** What is measured. Also the tile's accessible name when it is a link/button. */\n  label: ReactNode;\n  /**\n   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale\n   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is\n   * rendered as given. `null`/`undefined` shows a dash and says \"No data\".\n   */\n  value?: ReactNode;\n  /** ISO 4217 code — formats a number value (and a `\"value\"` delta, and numeric\n   *  sub-values) as money. */\n  currency?: string;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Any further `Intl.NumberFormat` options, merged over the two above. */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */\n  format?: (value: number) => string;\n  locale?: string;\n  /** A short unit after the value that `Intl` has no name for: \"ms\", \"dB\", \"Hz\". */\n  unit?: ReactNode;\n  /** The period the headline belongs to, shown to its left (\"SEP\"). */\n  valueLabel?: ReactNode;\n  tone?: StatTileTone;\n  delta?: number | StatTileDelta;\n  /** Which way is good news. Unset, the delta is stated and not judged (users up and\n   *  cost up are the same arrow); set, it is coloured and its sentence says so. */\n  goodDirection?: \"up\" | \"down\";\n  /** The explanation behind a \"?\" beside the label (a {@link FieldHint}) — hidden\n   *  until asked for, so it is for what a reader MIGHT want to know (\"excludes\n   *  transfers between your own accounts\"). For a line everyone should read, use\n   *  {@link StatTileProps.description} instead. */\n  hint?: string;\n  /**\n   * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a\n   * {@link Tooltip} on hover and focus — but only while it is actually cut, so a\n   * label that fits shows no bubble repeating itself. keksdose's admin MetricTile\n   * wall: twenty tiles whose German labels (\"Aktive Abonnements (30 Tage)\") wrapped\n   * onto two or three lines and pushed each tile's figure to a different height.\n   *\n   * The label element keeps the FULL text — the ellipsis is paint — so it is still\n   * the tile's accessible name (and the stretched link's, on a link tile) exactly as\n   * without this. Off by default: a wrapping label is what every existing tile does,\n   * and a tile standing alone has room to.\n   *\n   * This is the tooltip: pass the label as a plain STRING rather than wrapping it in\n   * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134\n   * does, from before this prop). A wrapped label shows a bubble even when nothing is\n   * cut, and nests its trigger inside this one's.\n   */\n  truncateLabel?: boolean;\n  /**\n   * The tile's name as plain text, for the places that need a string rather than a\n   * node — today the {@link StatTileProps.trend} sparkline's accessible name. Only\n   * needed when `label` is not a string AND its text cannot be read from it: a label\n   * element's text children are found on their own (a `<Tooltip label=\"…\">Spend\n   * </Tooltip>` label still names its sparkline \"Spend\"), an icon or a formatted\n   * message component's are not.\n   */\n  name?: string;\n  /** A visible line under the value: \"Last 12 months\", \"3 estates / 9 buildings\" —\n   *  always shown, so it is for what every reader needs. An explanation only some\n   *  will want belongs in {@link StatTileProps.hint}, the \"?\" beside the label. */\n  description?: ReactNode;\n  /**\n   * One figure that belongs WITH the headline rather than under it: keksdose's\n   * \"Projected €1,850\" under a to-date \"€420\" (KpiCard, feedback #51), which it\n   * currently smuggles into `description` with hand-set margins so the prior-month\n   * sub-values do not come between the two. It is drawn directly under the value\n   * (before the delta, the description and the sparkline) as a sub-value row, with\n   * only a hair of space above it.\n   *\n   * A slot of its own rather than a placement switch for `subValues`: the history\n   * rows (last month, last year) should stay at the bottom where they are, and moving\n   * the whole list up to bring one row with it would put them between the headline\n   * and its delta. Same shape as a sub-value, so the `tone` rules are the same.\n   * Withheld while `loading`, like the sub-values.\n   */\n  projection?: StatTileSubValue;\n  subValues?: StatTileSubValue[];\n  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in\n   *  the tile's number format. The name is the label's text; see\n   *  {@link StatTileProps.name} for a label that has none. */\n  trend?: ReadonlyArray<number | null | undefined>;\n  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */\n  sparkline?: ReactNode;\n  /** A decorative icon at the top end of the tile. */\n  icon?: ReactNode;\n  /** Anything below the rest — a progress bar, a link row. */\n  footer?: ReactNode;\n  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the\n   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */\n  sensitive?: boolean;\n  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */\n  loading?: boolean;\n  /** `\"sm\"` for dense grids (a metrics wall); `\"md\"` the default KPI. */\n  size?: \"sm\" | \"md\";\n  /** Makes the tile a link. See {@link renderLink} for a router. */\n  href?: string;\n  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain\n   *  `<a>` reloads a single-page app. Default: `<a>`. */\n  renderLink?: (props: StatTileLinkProps) => ReactElement;\n  /** Makes the tile a button (ignored when `href` is given). */\n  onClick?: () => void;\n  labels?: Partial<StatTileLabels>;\n}\n\n// One formatter per option set: a metrics wall is twenty of these.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = `${locale ?? \"\"}|${JSON.stringify(options)}`;\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, options);\n    formatters.set(key, f);\n  }\n  return f;\n}\n\n// The headline sizes are keyed on the TILE's width (it is a @container), not the\n// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport\n// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,\n// sized so a worst-case \"CHF 123,456.78\" still fits a 320px phone's 2-up tiles.\nconst VALUE_TEXT = {\n  md: \"text-xl @[13rem]:text-2xl\",\n  sm: \"text-xs @[8.5rem]:text-sm @[13rem]:text-base\",\n} as const;\nconst PADDING = { md: \"p-3 sm:p-4\", sm: \"px-2.5 py-2\" } as const;\n\n/**\n * The KPI card: a label, one number, and optionally how it moved, what it is made of\n * and which way it has been going.\n *\n * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and\n * kastlan's `KpiCard` — the same card four times, with four answers to the same\n * questions (how a currency is formatted, whether a delta is judged, what happens to\n * the figures in demo mode).\n *\n * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its\n * `::after` covers the card. Making the card itself the link would nest the hint's\n * `<button>` inside it, which is invalid HTML and an unreachable control; this way\n * the hint sits above the overlay and stays its own tab stop. The link's name is the\n * label, and it is described by the value and the delta.\n */\nexport function StatTile({\n  label,\n  value,\n  currency,\n  compact = false,\n  numberFormat,\n  format,\n  locale,\n  unit,\n  valueLabel,\n  tone = \"neutral\",\n  delta,\n  goodDirection,\n  hint,\n  truncateLabel = false,\n  name,\n  description,\n  projection,\n  subValues,\n  trend,\n  sparkline,\n  icon,\n  footer,\n  sensitive = false,\n  loading = false,\n  size = \"md\",\n  href,\n  renderLink,\n  onClick,\n  labels,\n  className,\n  ...rest\n}: StatTileProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null);\n  const labelCut = useIsTruncated(truncateLabel ? labelEl : null);\n  const kitLocale = useKitLocale(locale);\n  const id = useId();\n  const valueId = `${id}-value`;\n  const deltaId = `${id}-delta`;\n  const priv = sensitive ? \"\" : undefined;\n\n  const fmt =\n    format ??\n    ((n: number) =>\n      numberFormatter(kitLocale, {\n        ...(currency ? { style: \"currency\", currency } : null),\n        ...(compact ? { notation: \"compact\" } : null),\n        ...numberFormat,\n      }).format(n));\n  const show = (v: ReactNode) => (typeof v === \"number\" ? fmt(v) : v);\n\n  const d = typeof delta === \"number\" ? { value: delta } : delta;\n  const hasValue = value !== null && value !== undefined && value !== \"\";\n  const labelText = name ?? plainText(label);\n\n  // ── The label, which is also the link/button when the tile is interactive ──\n  const stretched = cn(\n    \"text-start uppercase tracking-wide\",\n    \"after:absolute after:inset-0 after:rounded-lg after:content-['']\",\n    \"focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n  );\n  const describedBy = d ? `${valueId} ${deltaId}` : valueId;\n  let labelNode: ReactNode = label;\n  if (href !== undefined) {\n    const linkProps: StatTileLinkProps = {\n      href,\n      className: stretched,\n      \"aria-describedby\": describedBy,\n      children: label,\n    };\n    labelNode = renderLink ? (\n      renderLink(linkProps)\n    ) : (\n      <a href={href} className={stretched} aria-describedby={describedBy}>\n        {label}\n      </a>\n    );\n  } else if (onClick) {\n    labelNode = (\n      <button type=\"button\" onClick={onClick} aria-describedby={describedBy} className={stretched}>\n        {label}\n      </button>\n    );\n  }\n  const interactive = href !== undefined || onClick !== undefined;\n\n  // ── Delta ──\n  let deltaNode: ReactNode = null;\n  if (d && !loading && Number.isFinite(d.value)) {\n    const magnitude = Math.abs(d.value);\n    const amount =\n      d.unit === \"percent\"\n        ? numberFormatter(kitLocale, { style: \"percent\", maximumFractionDigits: 1 }).format(magnitude)\n        : fmt(magnitude);\n    const dir = d.value > 0 ? \"up\" : d.value < 0 ? \"down\" : \"flat\";\n    const Icon = dir === \"up\" ? ArrowUp : dir === \"down\" ? ArrowDown : Minus;\n    let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n    let deltaTone = \"text-[var(--text-muted)]\";\n    if (goodDirection && dir !== \"flat\") {\n      const good = dir === goodDirection;\n      spoken = good ? text.better(spoken) : text.worse(spoken);\n      deltaTone = good ? \"text-[var(--success)]\" : \"text-[var(--danger)]\";\n    }\n    deltaNode = (\n      // `relative`: the containing block for the sr-only sentence (see the\n      // sr-only-containment test for what an escaped one does to the page).\n      <div className=\"relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums\">\n        <span id={deltaId} data-private={priv} className={cn(\"inline-flex items-center gap-0.5 font-medium\", deltaTone)}>\n          <Icon className=\"size-3 shrink-0\" aria-hidden />\n          <span aria-hidden>{dir === \"flat\" ? null : amount}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </span>\n        {d.label != null && <span className=\"text-[var(--text-muted)]\">{d.label}</span>}\n      </div>\n    );\n  }\n\n  // ── Headline ──\n  const valueClass = cn(\n    \"whitespace-nowrap font-semibold tabular-nums\",\n    VALUE_TEXT[size],\n    toneClass(tone, value),\n  );\n  const headline = loading ? (\n    <span id={valueId} className=\"relative block py-0.5\">\n      <span aria-hidden className={cn(SKELETON_CLASS, \"block h-6 w-24 max-w-full\")} />\n      <span className=\"sr-only\">{text.loading}</span>\n    </span>\n  ) : hasValue ? (\n    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && \"ms-auto\")}>\n      {show(value)}\n      {unit != null && (\n        <span className=\"ms-1 text-[0.7em] font-medium text-[var(--text-muted)]\">{unit}</span>\n      )}\n    </span>\n  ) : (\n    <span id={valueId} className={cn(\"relative\", valueClass, \"text-[var(--text-muted)]\")}>\n      <span aria-hidden>—</span>\n      <span className=\"sr-only\">{text.noValue}</span>\n    </span>\n  );\n\n  const graphic =\n    loading ? null : sparkline ??\n      (trend && (\n        <Sparkline\n          data={trend}\n          fluid\n          height={size === \"sm\" ? 20 : 28}\n          label={labelText}\n          formatValue={fmt}\n          locale={kitLocale}\n          tone={tone === \"signed\" ? \"signed\" : tone === \"neutral\" ? \"chart\" : tone}\n          data-private={priv}\n        />\n      ));\n\n  return (\n    <Card\n      {...rest}\n      aria-busy={loading || undefined}\n      className={cn(\n        // @container: the headline sizes read the tile's width. relative: the stretched\n        // link's overlay. overflow-hidden: at pathological widths a figure clips inside\n        // the border instead of painting over the neighbouring tile.\n        \"@container relative flex min-w-0 flex-col overflow-hidden\",\n        PADDING[size],\n        interactive && \"transition-colors hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-[var(--text-muted)]\">\n          {truncateLabel && labelCut ? (\n            // Portalled: the tile is `overflow-hidden`, and a bubble inside it would be\n            // clipped by the very box whose edge cut the label.\n            <Tooltip label={label} side=\"top\" portal className=\"flex min-w-0\">\n              <span ref={setLabelEl} className=\"block min-w-0 truncate\">\n                {labelNode}\n              </span>\n            </Tooltip>\n          ) : (\n            <span ref={setLabelEl} className={cn(\"min-w-0\", truncateLabel && \"block truncate\")}>\n              {labelNode}\n            </span>\n          )}\n          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}\n          {hint && <FieldHint label={hint} side=\"top\" className=\"relative z-10 shrink-0\" />}\n        </div>\n        {icon != null && (\n          <span aria-hidden className=\"shrink-0 text-[var(--text-muted)] [&_svg]:size-4\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      {valueLabel != null ? (\n        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a\n        // too-long amount drop to its own end-aligned line instead of overflowing.\n        <div className=\"mt-1 flex flex-wrap items-baseline gap-x-1.5\">\n          <span className=\"shrink-0 text-xs uppercase tracking-wide text-[var(--text-muted)]\">{valueLabel}</span>\n          {headline}\n        </div>\n      ) : (\n        <div className=\"mt-1\">{headline}</div>\n      )}\n\n      {!loading && projection && (\n        <dl className=\"mt-0.5\">\n          <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} />\n        </dl>\n      )}\n\n      {deltaNode}\n      {description != null && <div className=\"mt-1 text-xs text-[var(--text-muted)]\">{description}</div>}\n      {graphic && <div className=\"mt-2\">{graphic}</div>}\n\n      {!loading && subValues && subValues.length > 0 && (\n        <dl className=\"mt-1.5 space-y-0.5\">\n          {subValues.map((sv, i) => (\n            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} />\n          ))}\n        </dl>\n      )}\n\n      {footer != null && <div className=\"mt-2\">{footer}</div>}\n    </Card>\n  );\n}\n\n/** One label/value row of a `<dl>`: a sub-value, or the projection. */\nfunction FigureRow({\n  figure,\n  tileTone,\n  show,\n  priv,\n}: {\n  figure: StatTileSubValue;\n  tileTone: StatTileTone;\n  show: (v: ReactNode) => ReactNode;\n  priv: \"\" | undefined;\n}) {\n  const own = figure.tone ?? (tileTone === \"neutral\" ? undefined : tileTone);\n  const svTone = own === \"none\" ? undefined : own;\n  return (\n    <div className=\"flex flex-wrap items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]\">\n      <dt className=\"uppercase tracking-wide\">{figure.label}</dt>\n      <dd\n        data-private={priv}\n        className={cn(\"ms-auto whitespace-nowrap\", svTone && [toneClass(svTone, figure.value), \"opacity-75\"])}\n      >\n        {show(figure.value)}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * The text of a label node, for the sparkline's name: a string or number as is, an\n * element by its children, recursively. A `<Tooltip label=\"…\">Spend</Tooltip>` label\n * yields \"Spend\" — the text the reader sees, not the bubble's. `undefined` when there\n * is no text to find (an icon), so the sparkline falls back to its unnamed summary.\n */\nfunction plainText(node: ReactNode): string | undefined {\n  const walk = (n: ReactNode): string => {\n    if (typeof n === \"string\" || typeof n === \"number\") return String(n);\n    if (Array.isArray(n)) return n.map(walk).join(\"\");\n    if (isValidElement<{ children?: ReactNode }>(n)) return walk(n.props.children);\n    return \"\";\n  };\n  const text = walk(node).replace(/\\s+/g, \" \").trim();\n  return text === \"\" ? undefined : text;\n}\n\n/**\n * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.\n * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not\n * only on mount. Keyed on the ELEMENT (a callback ref), because wrapping the label in\n * its tooltip remounts it, and an observer on the old node would watch nothing.\n */\nfunction useIsTruncated(el: HTMLElement | null): boolean {\n  const [cut, setCut] = useState(false);\n  useLayoutEffect(() => {\n    // No reset while there is no node: between the unwrapped label unmounting and the\n    // wrapped one mounting there is none, and a reset there would unwrap it again.\n    if (!el) return;\n    const measure = () => setCut(el.scrollWidth > el.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [el]);\n  return cut;\n}\n\nexport interface StatTileGridProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** The narrowest a tile may get before the grid drops a column. The default fits\n   *  two tiles on a 320px phone. */\n  minTileWidth?: string;\n}\n\n/**\n * The row of tiles every dashboard in the three apps lays out by hand, each with its\n * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).\n * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in\n * the band where the sidebar was open. This fits as many columns as `minTileWidth`\n * allows in the space the grid actually has, and needs no breakpoint at all.\n */\nexport function StatTileGrid({ minTileWidth = \"9rem\", className, style, ...rest }: StatTileGridProps) {\n  const columns: CSSProperties = {\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minTileWidth}), 1fr))`,\n  };\n  return <div {...rest} className={cn(\"grid gap-3\", className)} style={{ ...columns, ...style }} />;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { isValidElement, useId, useLayoutEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLink, useKitLocale } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\nimport { Card, FieldHint } from \"./ui\";\nimport { Sparkline } from \"./sparkline\";\nimport { Tooltip } from \"./tooltip\";\n// The kit's one placeholder look, so a loading tile and the Skeleton list beside it\n// shimmer as one surface — and both stop under `prefers-reduced-motion`, which this\n// tile's private copy of the string did not.\nimport { SKELETON_CLASS } from \"./skeleton\";\n\n/**\n * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a\n * sentence: a screen reader gets the direction (and, under `goodDirection`, the\n * verdict) as words, and a sighted reader who cannot tell the two delta colours apart\n * still has the arrow — neither judgement rides on colour alone.\n */\nexport interface StatTileLabels {\n  /** The delta, rising. `amount` is already formatted and unsigned. */\n  increase: (amount: string) => string;\n  decrease: (amount: string) => string;\n  unchanged: string;\n  /** Wraps the direction sentence when `goodDirection` says the change is good. */\n  better: (change: string) => string;\n  worse: (change: string) => string;\n  /** Spoken in place of a missing value (the tile shows a dash). */\n  noValue: string;\n  /** Spoken while `loading`. */\n  loading: string;\n}\n\nexport const DEFAULT_STAT_TILE_LABELS: StatTileLabels = {\n  increase: (amount) => `Up ${amount}`,\n  decrease: (amount) => `Down ${amount}`,\n  unchanged: \"No change\",\n  better: (change) => `${change} (better)`,\n  worse: (change) => `${change} (worse)`,\n  noValue: \"No data\",\n  loading: \"Loading…\",\n};\n\n/**\n * What colours a figure. Token-backed like everything else in the kit.\n *\n *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).\n *  - `signed` — a money figure read by its own sign: above zero `income`, below zero\n *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER\n *    value; a pre-formatted string cannot be read and stays neutral.\n *  - `success` / `warning` / `danger` / `info` — a threshold verdict (\"phase margin\n *    below 30°\"). Say it in the hint or description as well; colour alone is not one.\n */\nexport type StatTileTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"signed\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TONE_CLASS: Record<Exclude<StatTileTone, \"signed\">, string> = {\n  neutral: \"text-[var(--text-primary)]\",\n  brand: \"text-[var(--brand)]\",\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n  net: \"text-[var(--money-net)]\",\n  success: \"text-[var(--success)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--info)]\",\n};\n\nfunction toneClass(tone: StatTileTone, value: unknown): string {\n  if (tone !== \"signed\") return TONE_CLASS[tone];\n  if (typeof value !== \"number\" || value === 0) return TONE_CLASS.neutral;\n  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;\n}\n\n/** A change since the previous period. A bare number is shorthand for `{ value }`. */\nexport interface StatTileDelta {\n  /** Signed: above zero is \"up\". */\n  value: number;\n  /** `\"value\"` (default) formats it like the headline — same currency, same\n   *  notation. `\"percent\"` reads it as a RATIO: `0.12` is shown as 12 %. */\n  unit?: \"value\" | \"percent\";\n  /** What it is measured against, shown after it: \"vs last month\". */\n  label?: ReactNode;\n}\n\n/** A smaller figure under the headline — a prior period, a projection, a split. */\nexport interface StatTileSubValue {\n  label: ReactNode;\n  /** A number is formatted like the headline; anything else is rendered as given. */\n  value: ReactNode;\n  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a\n   *  teal September above an amber August). Sub-values are always the muted weight\n   *  of their tone: they are history, and must not outshout the figure above them.\n   *\n   *  `\"none\"` leaves the figure untinted — the row's own muted text, like its label —\n   *  even on a toned tile: keksdose's report KpiCard (reports/charts/kpi-card.tsx),\n   *  whose `negative` convention tints only a figure below zero and leaves the rest\n   *  plain. (`\"neutral\"` is not that: it is the headline's full text colour, at the\n   *  sub-value's 75 %.) */\n  tone?: StatTileTone | \"none\";\n}\n\n/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's\n *  link: the class is what stretches the link over the whole tile. */\nexport interface StatTileLinkProps {\n  href: string;\n  className: string;\n  \"aria-describedby\": string;\n  children: ReactNode;\n}\n\nexport interface StatTileProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onClick\"> {\n  /** What is measured. Also the tile's accessible name when it is a link/button. */\n  label: ReactNode;\n  /**\n   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale\n   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is\n   * rendered as given. `null`/`undefined` shows a dash and says \"No data\".\n   */\n  value?: ReactNode;\n  /** ISO 4217 code — formats a number value (and a `\"value\"` delta, and numeric\n   *  sub-values) as money. */\n  currency?: string;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Any further `Intl.NumberFormat` options, merged over the two above. */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */\n  format?: (value: number) => string;\n  locale?: string;\n  /** A short unit after the value that `Intl` has no name for: \"ms\", \"dB\", \"Hz\". */\n  unit?: ReactNode;\n  /** The period the headline belongs to, shown to its left (\"SEP\"). */\n  valueLabel?: ReactNode;\n  tone?: StatTileTone;\n  delta?: number | StatTileDelta;\n  /** Which way is good news. Unset, the delta is stated and not judged (users up and\n   *  cost up are the same arrow); set, it is coloured and its sentence says so. */\n  goodDirection?: \"up\" | \"down\";\n  /** The explanation behind a \"?\" beside the label (a {@link FieldHint}) — hidden\n   *  until asked for, so it is for what a reader MIGHT want to know (\"excludes\n   *  transfers between your own accounts\"). For a line everyone should read, use\n   *  {@link StatTileProps.description} instead. */\n  hint?: string;\n  /**\n   * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a\n   * {@link Tooltip} on hover and focus — but only while it is actually cut, so a\n   * label that fits shows no bubble repeating itself. keksdose's admin MetricTile\n   * wall: twenty tiles whose German labels (\"Aktive Abonnements (30 Tage)\") wrapped\n   * onto two or three lines and pushed each tile's figure to a different height.\n   *\n   * The label element keeps the FULL text — the ellipsis is paint — so it is still\n   * the tile's accessible name (and the stretched link's, on a link tile) exactly as\n   * without this. Off by default: a wrapping label is what every existing tile does,\n   * and a tile standing alone has room to.\n   *\n   * This is the tooltip: pass the label as a plain STRING rather than wrapping it in\n   * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134\n   * does, from before this prop). A wrapped label shows a bubble even when nothing is\n   * cut, and nests its trigger inside this one's.\n   */\n  truncateLabel?: boolean;\n  /**\n   * The tile's name as plain text, for the places that need a string rather than a\n   * node — today the {@link StatTileProps.trend} sparkline's accessible name. Only\n   * needed when `label` is not a string AND its text cannot be read from it: a label\n   * element's text children are found on their own (a `<Tooltip label=\"…\">Spend\n   * </Tooltip>` label still names its sparkline \"Spend\"), an icon or a formatted\n   * message component's are not.\n   */\n  name?: string;\n  /** A visible line under the value: \"Last 12 months\", \"3 estates / 9 buildings\" —\n   *  always shown, so it is for what every reader needs. An explanation only some\n   *  will want belongs in {@link StatTileProps.hint}, the \"?\" beside the label. */\n  description?: ReactNode;\n  /**\n   * One figure that belongs WITH the headline rather than under it: keksdose's\n   * \"Projected €1,850\" under a to-date \"€420\" (KpiCard, feedback #51), which it\n   * currently smuggles into `description` with hand-set margins so the prior-month\n   * sub-values do not come between the two. It is drawn directly under the value\n   * (before the delta, the description and the sparkline) as a sub-value row, with\n   * only a hair of space above it.\n   *\n   * A slot of its own rather than a placement switch for `subValues`: the history\n   * rows (last month, last year) should stay at the bottom where they are, and moving\n   * the whole list up to bring one row with it would put them between the headline\n   * and its delta. Same shape as a sub-value, so the `tone` rules are the same.\n   * Withheld while `loading`, like the sub-values.\n   */\n  projection?: StatTileSubValue;\n  subValues?: StatTileSubValue[];\n  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in\n   *  the tile's number format. The name is the label's text; see\n   *  {@link StatTileProps.name} for a label that has none. */\n  trend?: ReadonlyArray<number | null | undefined>;\n  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */\n  sparkline?: ReactNode;\n  /** A decorative icon at the top end of the tile. */\n  icon?: ReactNode;\n  /** Anything below the rest — a progress bar, a link row. */\n  footer?: ReactNode;\n  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the\n   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */\n  sensitive?: boolean;\n  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */\n  loading?: boolean;\n  /** `\"sm\"` for dense grids (a metrics wall); `\"md\"` the default KPI. */\n  size?: \"sm\" | \"md\";\n  /** Makes the tile a link. See {@link renderLink} for a router. */\n  href?: string;\n  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain\n   *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`\n   *  (for an in-app `href`), then `<a>`. */\n  renderLink?: (props: StatTileLinkProps) => ReactElement;\n  /** Makes the tile a button (ignored when `href` is given). */\n  onClick?: () => void;\n  labels?: Partial<StatTileLabels>;\n}\n\n// One formatter per option set: a metrics wall is twenty of these.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = `${locale ?? \"\"}|${JSON.stringify(options)}`;\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, options);\n    formatters.set(key, f);\n  }\n  return f;\n}\n\n// The headline sizes are keyed on the TILE's width (it is a @container), not the\n// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport\n// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,\n// sized so a worst-case \"CHF 123,456.78\" still fits a 320px phone's 2-up tiles.\nconst VALUE_TEXT = {\n  md: \"text-xl @[13rem]:text-2xl\",\n  sm: \"text-xs @[8.5rem]:text-sm @[13rem]:text-base\",\n} as const;\nconst PADDING = { md: \"p-3 sm:p-4\", sm: \"px-2.5 py-2\" } as const;\n\n/**\n * The KPI card: a label, one number, and optionally how it moved, what it is made of\n * and which way it has been going.\n *\n * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and\n * kastlan's `KpiCard` — the same card four times, with four answers to the same\n * questions (how a currency is formatted, whether a delta is judged, what happens to\n * the figures in demo mode).\n *\n * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its\n * `::after` covers the card. Making the card itself the link would nest the hint's\n * `<button>` inside it, which is invalid HTML and an unreachable control; this way\n * the hint sits above the overlay and stays its own tab stop. The link's name is the\n * label, and it is described by the value and the delta.\n */\nexport function StatTile({\n  label,\n  value,\n  currency,\n  compact = false,\n  numberFormat,\n  format,\n  locale,\n  unit,\n  valueLabel,\n  tone = \"neutral\",\n  delta,\n  goodDirection,\n  hint,\n  truncateLabel = false,\n  name,\n  description,\n  projection,\n  subValues,\n  trend,\n  sparkline,\n  icon,\n  footer,\n  sensitive = false,\n  loading = false,\n  size = \"md\",\n  href,\n  renderLink,\n  onClick,\n  labels,\n  className,\n  ...rest\n}: StatTileProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const kitLink = useKitLink();\n  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null);\n  const labelCut = useIsTruncated(truncateLabel ? labelEl : null);\n  const kitLocale = useKitLocale(locale);\n  const id = useId();\n  const valueId = `${id}-value`;\n  const deltaId = `${id}-delta`;\n  const priv = sensitive ? \"\" : undefined;\n\n  const fmt =\n    format ??\n    ((n: number) =>\n      numberFormatter(kitLocale, {\n        ...(currency ? { style: \"currency\", currency } : null),\n        ...(compact ? { notation: \"compact\" } : null),\n        ...numberFormat,\n      }).format(n));\n  const show = (v: ReactNode) => (typeof v === \"number\" ? fmt(v) : v);\n\n  const d = typeof delta === \"number\" ? { value: delta } : delta;\n  const hasValue = value !== null && value !== undefined && value !== \"\";\n  const labelText = name ?? plainText(label);\n\n  // ── The label, which is also the link/button when the tile is interactive ──\n  const stretched = cn(\n    \"text-start uppercase tracking-wide\",\n    \"after:absolute after:inset-0 after:rounded-lg after:content-['']\",\n    \"focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n  );\n  const describedBy = d ? `${valueId} ${deltaId}` : valueId;\n  let labelNode: ReactNode = label;\n  if (href !== undefined) {\n    const linkProps: StatTileLinkProps = {\n      href,\n      className: stretched,\n      \"aria-describedby\": describedBy,\n      children: label,\n    };\n    const kit = pickLinkRenderer<StatTileLinkProps>(undefined, kitLink, href);\n    labelNode = renderLink ? (\n      renderLink(linkProps)\n    ) : kit ? (\n      <RenderedKitLink render={kit} props={linkProps} />\n    ) : (\n      <a href={href} className={stretched} aria-describedby={describedBy}>\n        {label}\n      </a>\n    );\n  } else if (onClick) {\n    labelNode = (\n      <button type=\"button\" onClick={onClick} aria-describedby={describedBy} className={stretched}>\n        {label}\n      </button>\n    );\n  }\n  const interactive = href !== undefined || onClick !== undefined;\n\n  // ── Delta ──\n  let deltaNode: ReactNode = null;\n  if (d && !loading && Number.isFinite(d.value)) {\n    const magnitude = Math.abs(d.value);\n    const amount =\n      d.unit === \"percent\"\n        ? numberFormatter(kitLocale, { style: \"percent\", maximumFractionDigits: 1 }).format(magnitude)\n        : fmt(magnitude);\n    const dir = d.value > 0 ? \"up\" : d.value < 0 ? \"down\" : \"flat\";\n    const Icon = dir === \"up\" ? ArrowUp : dir === \"down\" ? ArrowDown : Minus;\n    let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n    let deltaTone = \"text-[var(--text-muted)]\";\n    if (goodDirection && dir !== \"flat\") {\n      const good = dir === goodDirection;\n      spoken = good ? text.better(spoken) : text.worse(spoken);\n      deltaTone = good ? \"text-[var(--success)]\" : \"text-[var(--danger)]\";\n    }\n    deltaNode = (\n      // `relative`: the containing block for the sr-only sentence (see the\n      // sr-only-containment test for what an escaped one does to the page).\n      <div className=\"relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums\">\n        <span id={deltaId} data-private={priv} className={cn(\"inline-flex items-center gap-0.5 font-medium\", deltaTone)}>\n          <Icon className=\"size-3 shrink-0\" aria-hidden />\n          <span aria-hidden>{dir === \"flat\" ? null : amount}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </span>\n        {d.label != null && <span className=\"text-[var(--text-muted)]\">{d.label}</span>}\n      </div>\n    );\n  }\n\n  // ── Headline ──\n  const valueClass = cn(\n    \"whitespace-nowrap font-semibold tabular-nums\",\n    VALUE_TEXT[size],\n    toneClass(tone, value),\n  );\n  const headline = loading ? (\n    <span id={valueId} className=\"relative block py-0.5\">\n      <span aria-hidden className={cn(SKELETON_CLASS, \"block h-6 w-24 max-w-full\")} />\n      <span className=\"sr-only\">{text.loading}</span>\n    </span>\n  ) : hasValue ? (\n    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && \"ms-auto\")}>\n      {show(value)}\n      {unit != null && (\n        <span className=\"ms-1 text-[0.7em] font-medium text-[var(--text-muted)]\">{unit}</span>\n      )}\n    </span>\n  ) : (\n    <span id={valueId} className={cn(\"relative\", valueClass, \"text-[var(--text-muted)]\")}>\n      <span aria-hidden>—</span>\n      <span className=\"sr-only\">{text.noValue}</span>\n    </span>\n  );\n\n  const graphic =\n    loading ? null : sparkline ??\n      (trend && (\n        <Sparkline\n          data={trend}\n          fluid\n          height={size === \"sm\" ? 20 : 28}\n          label={labelText}\n          formatValue={fmt}\n          locale={kitLocale}\n          tone={tone === \"signed\" ? \"signed\" : tone === \"neutral\" ? \"chart\" : tone}\n          data-private={priv}\n        />\n      ));\n\n  return (\n    <Card\n      {...rest}\n      aria-busy={loading || undefined}\n      className={cn(\n        // @container: the headline sizes read the tile's width. relative: the stretched\n        // link's overlay. overflow-hidden: at pathological widths a figure clips inside\n        // the border instead of painting over the neighbouring tile.\n        \"@container relative flex min-w-0 flex-col overflow-hidden\",\n        PADDING[size],\n        interactive && \"transition-colors hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-[var(--text-muted)]\">\n          {truncateLabel && labelCut ? (\n            // Portalled: the tile is `overflow-hidden`, and a bubble inside it would be\n            // clipped by the very box whose edge cut the label.\n            <Tooltip label={label} side=\"top\" portal className=\"flex min-w-0\">\n              <span ref={setLabelEl} className=\"block min-w-0 truncate\">\n                {labelNode}\n              </span>\n            </Tooltip>\n          ) : (\n            <span ref={setLabelEl} className={cn(\"min-w-0\", truncateLabel && \"block truncate\")}>\n              {labelNode}\n            </span>\n          )}\n          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}\n          {hint && <FieldHint label={hint} side=\"top\" className=\"relative z-10 shrink-0\" />}\n        </div>\n        {icon != null && (\n          <span aria-hidden className=\"shrink-0 text-[var(--text-muted)] [&_svg]:size-4\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      {valueLabel != null ? (\n        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a\n        // too-long amount drop to its own end-aligned line instead of overflowing.\n        <div className=\"mt-1 flex flex-wrap items-baseline gap-x-1.5\">\n          <span className=\"shrink-0 text-xs uppercase tracking-wide text-[var(--text-muted)]\">{valueLabel}</span>\n          {headline}\n        </div>\n      ) : (\n        <div className=\"mt-1\">{headline}</div>\n      )}\n\n      {!loading && projection && (\n        <dl className=\"mt-0.5\">\n          <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} />\n        </dl>\n      )}\n\n      {deltaNode}\n      {description != null && <div className=\"mt-1 text-xs text-[var(--text-muted)]\">{description}</div>}\n      {graphic && <div className=\"mt-2\">{graphic}</div>}\n\n      {!loading && subValues && subValues.length > 0 && (\n        <dl className=\"mt-1.5 space-y-0.5\">\n          {subValues.map((sv, i) => (\n            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} />\n          ))}\n        </dl>\n      )}\n\n      {footer != null && <div className=\"mt-2\">{footer}</div>}\n    </Card>\n  );\n}\n\n/** One label/value row of a `<dl>`: a sub-value, or the projection. */\nfunction FigureRow({\n  figure,\n  tileTone,\n  show,\n  priv,\n}: {\n  figure: StatTileSubValue;\n  tileTone: StatTileTone;\n  show: (v: ReactNode) => ReactNode;\n  priv: \"\" | undefined;\n}) {\n  const own = figure.tone ?? (tileTone === \"neutral\" ? undefined : tileTone);\n  const svTone = own === \"none\" ? undefined : own;\n  return (\n    <div className=\"flex flex-wrap items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]\">\n      <dt className=\"uppercase tracking-wide\">{figure.label}</dt>\n      <dd\n        data-private={priv}\n        className={cn(\"ms-auto whitespace-nowrap\", svTone && [toneClass(svTone, figure.value), \"opacity-75\"])}\n      >\n        {show(figure.value)}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * The text of a label node, for the sparkline's name: a string or number as is, an\n * element by its children, recursively. A `<Tooltip label=\"…\">Spend</Tooltip>` label\n * yields \"Spend\" — the text the reader sees, not the bubble's. `undefined` when there\n * is no text to find (an icon), so the sparkline falls back to its unnamed summary.\n */\nfunction plainText(node: ReactNode): string | undefined {\n  const walk = (n: ReactNode): string => {\n    if (typeof n === \"string\" || typeof n === \"number\") return String(n);\n    if (Array.isArray(n)) return n.map(walk).join(\"\");\n    if (isValidElement<{ children?: ReactNode }>(n)) return walk(n.props.children);\n    return \"\";\n  };\n  const text = walk(node).replace(/\\s+/g, \" \").trim();\n  return text === \"\" ? undefined : text;\n}\n\n/**\n * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.\n * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not\n * only on mount. Keyed on the ELEMENT (a callback ref), because wrapping the label in\n * its tooltip remounts it, and an observer on the old node would watch nothing.\n */\nfunction useIsTruncated(el: HTMLElement | null): boolean {\n  const [cut, setCut] = useState(false);\n  useLayoutEffect(() => {\n    // No reset while there is no node: between the unwrapped label unmounting and the\n    // wrapped one mounting there is none, and a reset there would unwrap it again.\n    if (!el) return;\n    const measure = () => setCut(el.scrollWidth > el.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [el]);\n  return cut;\n}\n\nexport interface StatTileGridProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** The narrowest a tile may get before the grid drops a column. The default fits\n   *  two tiles on a 320px phone. */\n  minTileWidth?: string;\n}\n\n/**\n * The row of tiles every dashboard in the three apps lays out by hand, each with its\n * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).\n * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in\n * the band where the sidebar was open. This fits as many columns as `minTileWidth`\n * allows in the space the grid actually has, and needs no breakpoint at all.\n */\nexport function StatTileGrid({ minTileWidth = \"9rem\", className, style, ...rest }: StatTileGridProps) {\n  const columns: CSSProperties = {\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minTileWidth}), 1fr))`,\n  };\n  return <div {...rest} className={cn(\"grid gap-3\", className)} style={{ ...columns, ...style }} />;\n}\n"],"mappings":"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","names":[]}

package/dist/components/table.d.ts

@@ -26,6 +26,15 @@ type TableVAlign = "top" | "middle" | "bottom";
 type TableHeaderCellSize = "xs" | "sm";
 /** The header cell's weight. Default `medium`. */
 type TableHeaderCellWeight = "normal" | "medium" | "semibold";
+/**
+ * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a
+ * `group` heading ("Current assets", a tinted full-width label row), a `subtotal` under
+ * a group, or the `total` of the whole table. kastlan's balance sheet, income statement
+ * and journal entry each spelled these as `className="font-medium"`, `"font-bold
+ * border-t-2"` and `bg-muted/50` on the cell — three pages, three sets of classes for
+ * the same four kinds of line.
+ */
+type TableRowVariant = "row" | "group" | "subtotal" | "total";
 /**
  * The alignment a figure column wants: end-aligned (so the units line up under each
  * other in either reading direction) with tabular digits (so they line up at all).
@@ -45,6 +54,22 @@ interface TableProps extends ComponentPropsWithoutRef<"table"> {
     wrapperClassName?: string;
     /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */
     layout?: TableLayout;
+    /**
+     * A rounded border round the whole table (0.12.0) — for a table standing on the page
+     * or in a dialog rather than inside a card. kastlan wraps six of them in
+     * `<div className="rounded-md border">` by hand (payment allocation, the new-budget
+     * lines, the meter readings, the deposit transactions, the unit values editor, the
+     * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip
+     * the rows' tint to its corners.
+     */
+    framed?: boolean;
+    /**
+     * The rule between body rows. Default true. `false` for a small table whose rows are
+     * spaced by their own content — keksdose's VAT summary, a block of three quiet
+     * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One
+     * row can still say otherwise with {@link TableRowProps.bordered}.
+     */
+    rowDividers?: boolean;
 }
 /**
  * A plain, static HTML table in the kit's tokens — for the detail views that need
@@ -63,9 +88,13 @@ interface TableProps extends ComponentPropsWithoutRef<"table"> {
  * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left
  * page gets its first column on the right without a class changing.
  */
-declare function Table({ density, zebra, hover, wrapperClassName, layout, className, "aria-label": ariaLabel, ...rest }: TableProps): react.JSX.Element;
-type TableHeadProps = ComponentPropsWithoutRef<"thead">;
-declare function TableHead({ className, ...rest }: TableHeadProps): react.JSX.Element;
+declare function Table({ density, zebra, hover, wrapperClassName, layout, framed, rowDividers, className, "aria-label": ariaLabel, ...rest }: TableProps): react.JSX.Element;
+interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {
+    /** The rule under the head. Default true; `false` for a quiet header over a small
+     *  table (keksdose's VAT summary wrote `className="border-b-0"` to lose it). */
+    bordered?: boolean;
+}
+declare function TableHead({ bordered, className, ...rest }: TableHeadProps): react.JSX.Element;
 interface TableBodyProps extends ComponentPropsWithoutRef<"tbody"> {
     /**
      * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —
@@ -100,8 +129,13 @@ interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
     /** Vertical alignment for every cell of the row that does not set its own. See
      *  {@link TableVAlign}. Left out, each cell keeps its default. */
     valign?: TableVAlign;
+    /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows
+     *  only: a group heading or a total is not one more record. */
+    variant?: TableRowVariant;
+    /** The rule under this body row. Default: the table's `rowDividers`. */
+    bordered?: boolean;
 }
-declare function TableRow({ valign, className, ...rest }: TableRowProps): react.JSX.Element;
+declare function TableRow({ valign, variant, bordered, className, ...rest }: TableRowProps): react.JSX.Element;
 interface CellAlignProps {
     /** Shorthand for a figure column: end-aligned, tabular digits. */
     numeric?: boolean;
@@ -145,4 +179,4 @@ type TableCaptionProps = ComponentPropsWithoutRef<"caption">;
  */
 declare function TableCaption({ className, id, ...rest }: TableCaptionProps): react.JSX.Element;
 
-export { NUMERIC_CELL_CLASS, Table, type TableAlign, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, type TableDensity, TableEmpty, type TableEmptyProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, type TableHeaderCellWeight, type TableLayout, type TableProps, TableRow, type TableRowProps, type TableVAlign };
+export { NUMERIC_CELL_CLASS, Table, type TableAlign, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, type TableDensity, TableEmpty, type TableEmptyProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, type TableHeaderCellWeight, type TableLayout, type TableProps, TableRow, type TableRowProps, type TableRowVariant, type TableVAlign };