@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/button-look.js

@@ -0,0 +1,91 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { FOCUS_RING_WIDTH } from "./focus-ring.js";
+const BUTTON_BASE = cn(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0",
+  FOCUS_RING_WIDTH
+);
+const TOUCH_TARGET_LARGE = "large:min-h-[48px] large:min-w-[48px]";
+const BUTTON_SIZES = {
+  md: "gap-2 px-3 py-2 text-sm",
+  sm: "gap-1.5 px-2 py-1 text-xs"
+};
+const BUTTON_SIZES_LARGE = {
+  md: "large:min-h-[48px]",
+  sm: "large:min-h-[48px] large:py-2.5"
+};
+const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
+const buttonVariantClasses = {
+  primary: (
+    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the
+    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.
+    "border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand"
+  ),
+  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,
+  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,
+  danger: "bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong",
+  brand: "bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand",
+  // A text link that is still a `<button>` — keksdose's six hand-rolled
+  // `<button className="text-brand underline">` sites ("Resend code", "Show all",
+  // "Undo" in a toast…), which act rather than navigate and so must not be anchors.
+  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but
+  // the base's focus ring stays: those copies had `outline-none` and no ring, so
+  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that
+  // ring hugging the word instead of drawing a pill round it.
+  link: "rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand"
+};
+const BUTTON_TONES = {
+  muted: "text-secondary hover:text-primary disabled:hover:text-secondary",
+  danger: "text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary"
+};
+const TONED_VARIANTS = /* @__PURE__ */ new Set(["link", "ghost"]);
+const BUTTON_BOXED_DANGER = {
+  // Not boxed, but its hover is a fill: the danger wash under the danger text, as
+  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1
+  // over a light page.
+  ghost: "hover:bg-danger-soft",
+  secondary: "border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong",
+  primary: "border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger"
+};
+const BUTTON_LINK_PRESSED = "font-medium text-brand hover:text-brand disabled:hover:text-brand";
+function buttonClasses(variant = "primary", classNameOrOptions) {
+  const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
+  return cn(
+    BUTTON_BASE,
+    BUTTON_SIZES[size],
+    variant !== "link" && BUTTON_SIZES_LARGE[size],
+    buttonVariantClasses[variant],
+    className
+  );
+}
+const ICON_BUTTON_PRESSED = "bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand";
+function buttonLook(variant, size, stretch, tone) {
+  return cn(
+    BUTTON_BASE,
+    BUTTON_SIZES[size],
+    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the
+    // order `buttonClasses` has it, so the two strings stay identical.
+    variant !== "link" && BUTTON_SIZES_LARGE[size],
+    // In a flex row next to a taller labelled field, `stretch` makes the button
+    // fill the field's height so the two line up (self-stretch overrides the row's
+    // align-items). No effect outside a flex row / when it's already the tallest.
+    stretch && "self-stretch",
+    buttonVariantClasses[variant],
+    tone !== "default" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],
+    tone === "danger" && BUTTON_BOXED_DANGER[variant]
+  );
+}
+function RenderedButtonLink({ render, ...props }) {
+  return render(props);
+}
+export {
+  BUTTON_LINK_PRESSED,
+  HOVER_INK,
+  ICON_BUTTON_PRESSED,
+  RenderedButtonLink,
+  TOUCH_TARGET_LARGE,
+  buttonClasses,
+  buttonLook,
+  buttonVariantClasses
+};
+//# sourceMappingURL=button-look.js.map

package/dist/components/button-look.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/button-look.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\n/**\n * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor\n * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew\n * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink\n * and its router link. Both now draw from this module, which renders nothing, so neither\n * imports the other.\n *\n * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.\n * The other exports are the two buttons' shared parts (`@internal`).\n */\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"brand\" | \"link\";\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\n//\n// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus\n// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each\n// variant's own colour below.\n//\n// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its\n// size when the label wraps at Large. Without it the svg was a flex item like the text,\n// and a two-line label squeezed it to a sliver (\"New invoice\" in a page header at 360 px\n// / Extra large).\nconst BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0\",\n  FOCUS_RING_WIDTH,\n);\n\n/**\n * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at\n * least 48 px, the size a finger needs whatever the type. In px on purpose, like the\n * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that\n * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs\n * no render and is right on the first paint.\n */\nexport const TOUCH_TARGET_LARGE = \"large:min-h-[48px] large:min-w-[48px]\";\n\nexport type ButtonSize = \"sm\" | \"md\";\n\n// Box geometry per size, split out of the base so the two cannot be merged into one\n// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is\n// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and\n// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is\n// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for\n// a bigger text button (IconButton's `lg` is a touch target, not a text size). The\n// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.\n//\n// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its\n// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The\n// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which\n// is a word in a sentence and has no box to grow (see `buttonLook`).\nconst BUTTON_SIZES: Record<ButtonSize, string> = {\n  md: \"gap-2 px-3 py-2 text-sm\",\n  sm: \"gap-1.5 px-2 py-1 text-xs\",\n};\nconst BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {\n  md: \"large:min-h-[48px]\",\n  sm: \"large:min-h-[48px] large:py-2.5\",\n};\n\n/**\n * The hover of a control that may sit on the page, a card or a well (0.33, B′ —\n * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,\n * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or\n * more on all three surfaces, both themes, with the label at 7:1 and up. It was\n * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the\n * page would not have moved at all. Not `--bg-hover` either, which is mixed against the\n * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same\n * recipe at 12 %.\n */\nexport const HOVER_INK = \"hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (primary = filled warm chip, secondary =\n// outline); `brand` stays the solid accent for the rare strong CTA; `danger` takes the\n// semantic `--danger` family (destructive semantics), so a consumer can re-point the\n// destructive hue instead of inheriting a hard-coded red. Focus rings follow each\n// variant's own accent: brand for the four neutral ones, danger for `danger`.\nexport const buttonVariantClasses: Record<ButtonVariant, string> = {\n  primary:\n    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the\n    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.\n    \"border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand\",\n  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  danger:\n    \"bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong\",\n  brand:\n    \"bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand\",\n  // A text link that is still a `<button>` — keksdose's six hand-rolled\n  // `<button className=\"text-brand underline\">` sites (\"Resend code\", \"Show all\",\n  // \"Undo\" in a toast…), which act rather than navigate and so must not be anchors.\n  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but\n  // the base's focus ring stays: those copies had `outline-none` and no ring, so\n  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that\n  // ring hugging the word instead of drawing a pill round it.\n  link:\n    \"rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand\",\n};\n\n/**\n * The text colour of a `link` or `ghost` button, over the variant's own.\n *\n * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's \"Mark\n * undone\", transaction-fields:176/215's \"Add line\" / \"Fill total\",\n * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the\n * body colour under the pointer, for an action that must be findable but not compete\n * with the brand-coloured one beside it. `danger` is the same quiet look turning\n * `--danger` on hover — transaction-editor:401's \"Remove split\", which is a text\n * action that destroys something.\n *\n * A `tone` rather than a `link-muted` variant, because it is the axis IconButton\n * already has (`tone=\"muted\"`, `tone=\"danger\"`, same quiet-until-hover meaning), and\n * because the same two looks are wanted on `ghost`.\n *\n * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:\n * `secondary` becomes an outlined destructive button (`--danger` text and a\n * `--danger-border` outline, the quiet danger fill on hover) and `primary` a soft one\n * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-\n * tab.tsx \"Remove all\" is `variant=\"secondary\" className=\"text-destructive\"` — a\n * destructive action that must sit in a row of secondary buttons without shouting\n * like the solid `variant=\"danger\"` would, and whose red text alone left the border\n * and hover saying \"neutral\". `muted` stays a text look and does nothing on a box, and\n * `danger`, `brand` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or brand button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-secondary hover:text-primary disabled:hover:text-secondary\",\n  danger:\n    \"text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<ButtonVariant>([\"link\", \"ghost\"]);\n\n// `tone=\"danger\"` on the neutral boxed variants — see {@link ButtonTone}. Each string\n// restates every colour the variant sets (border, fill, text, hover, ring) so none of\n// the neutral ones survives the merge.\nconst BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {\n  // Not boxed, but its hover is a fill: the danger wash under the danger text, as\n  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1\n  // over a light page.\n  ghost: \"hover:bg-danger-soft\",\n  secondary:\n    \"border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  primary:\n    \"border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger\",\n};\n\n// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what\n// lenkbank's \"All speeds\" toggle paints by hand (gear/hysteresis-charts.tsx:482). After\n// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey.\nexport const BUTTON_LINK_PRESSED =\n  \"font-medium text-brand hover:text-brand disabled:hover:text-brand\";\n\n/** The second argument of {@link buttonClasses} in its options form. */\nexport interface ButtonClassesOptions {\n  /** See {@link ButtonProps.size}. */\n  size?: ButtonSize;\n  className?: string;\n}\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base, size and variant maps as\n * `<Button>`, so the two stay in lockstep.\n *\n * The second argument is either the extra classes (the pre-0.8.0 form) or\n * `{ size, className }` — `buttonClasses(\"secondary\", { size: \"sm\" })` for keksdose's\n * compact toolbar links.\n */\nexport function buttonClasses(\n  variant: ButtonVariant = \"primary\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    buttonVariantClasses[variant],\n    className,\n  );\n}\n\n// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the\n// \"selected\" look of a Chip or a SegmentedControl option, so an on toggle reads as on\n// beside them. After the tone, so a pressed `muted` button is brand, not grey. On hover\n// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark\n// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its\n// boxed variants too, which is why it lives here and not in ./icon-button.\nexport const ICON_BUTTON_PRESSED =\n  \"bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand\";\n\n/** @internal The button look shared by the `<button>` and the `<a>` form. */\nexport function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the\n    // order `buttonClasses` has it, so the two strings stay identical.\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    // In a flex row next to a taller labelled field, `stretch` makes the button\n    // fill the field's height so the two line up (self-stretch overrides the row's\n    // align-items). No effect outside a flex row / when it's already the tallest.\n    stretch && \"self-stretch\",\n    buttonVariantClasses[variant],\n    tone !== \"default\" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],\n    tone === \"danger\" && BUTTON_BOXED_DANGER[variant],\n  );\n}\n\n/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip\n *  do — an inline `renderLink` arrow would otherwise be a new component type every\n *  render. Both buttons' link forms render through it. */\nexport function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,wBAAwB;AA4BjC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AACF;AASO,MAAM,qBAAqB;AAgBlC,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,YAAY;AAQlB,MAAM,uBAAsD;AAAA,EACjE;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,EACF,WAAW,oDAAoD,SAAS;AAAA,EACxE,OAAO,+BAA+B,SAAS;AAAA,EAC/C,QACE;AAAA,EACF,OACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQF,MACE;AACJ;AA8BA,MAAM,eAA+D;AAAA,EACnE,OACE;AAAA,EACF,QACE;AACJ;AAGA,MAAM,iBAAiB,oBAAI,IAAmB,CAAC,QAAQ,OAAO,CAAC;AAK/D,MAAM,sBAA8D;AAAA;AAAA;AAAA;AAAA,EAIlE,OAAO;AAAA,EACP,WACE;AAAA,EACF,SACE;AACJ;AAKO,MAAM,sBACX;AAoBK,SAAS,cACd,UAAyB,WACzB,oBACQ;AACR,QAAM,EAAE,OAAO,MAAM,UAAU,IAC7B,OAAO,uBAAuB,WAAW,qBAAqB,EAAE,WAAW,mBAAmB;AAChG,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,YAAY,UAAU,mBAAmB,IAAI;AAAA,IAC7C,qBAAqB,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,MAAM,sBACX;AAGK,SAAS,WAAW,SAAwB,MAAkB,SAA8B,MAAkB;AACnH,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA;AAAA;AAAA,IAGjB,YAAY,UAAU,mBAAmB,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7C,WAAW;AAAA,IACX,qBAAqB,OAAO;AAAA,IAC5B,SAAS,aAAa,eAAe,IAAI,OAAO,KAAK,aAAa,IAAI;AAAA,IACtE,SAAS,YAAY,oBAAoB,OAAO;AAAA,EAClD;AACF;AAKO,SAAS,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACpG,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/components/button.d.ts

@@ -0,0 +1,153 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+import type { KitLinkComponent } from "../i18n/kit-labels.js";
+import type { CommitScope } from "./write-lock.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import type { ButtonSize, ButtonTone, ButtonVariant } from "./button-look.js";
+/**
+ * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS
+ * it unless you pass `type="button"`. Kept native on purpose — a form's own submit
+ * button relies on it, and changing the default would silently stop those forms from
+ * submitting. Pass `type="button"` for every other action in a form (keksdose had six
+ * link buttons submitting their form).
+ */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    /** `md` (default) is the page's action button. `sm` is the compact one — 12px text
+     *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a
+     *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand
+     *  there). Every variant takes either size. */
+    size?: ButtonSize;
+    /** In a flex row next to a taller labelled field, fill the field's height so the
+     *  two line up. No effect outside a flex row. */
+    stretch?: boolean;
+    /** The `<button>` element. React 19 passes `ref` to a function component as an
+     *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
+     *  declared here only because `ButtonHTMLAttributes` does not carry it. */
+    ref?: Ref<HTMLButtonElement>;
+    /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or
+     *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an
+     *  outlined destructive button and `primary` a soft one; ignored by the other
+     *  variants. See {@link ButtonTone}. */
+    tone?: ButtonTone;
+    /**
+     * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets
+     * `aria-pressed="true"` and draws the "on" look — on a `link`, the brand colour and a
+     * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and
+     * `false` sets `aria-pressed="false"` with the ordinary look. Left out, no
+     * `aria-pressed` (or the caller's own). For lenkbank's "All speeds" text toggle
+     * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`
+     * swapping two class strings; with `variant="link" tone="muted"` it is this.
+     */
+    pressed?: boolean;
+    /**
+     * Why the action is not available — the button's half of DangerConfirm's
+     * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).
+     *
+     * A disabled button that cannot say why is a dead end: the native `disabled` takes it
+     * out of the tab order, so a keyboard user never lands on it, and a pointer gets a
+     * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`
+     * instead — still focusable, still hoverable — clicks (and the Enter/Space and form
+     * submission they stand for) do nothing, and the reason is shown in the kit
+     * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it
+     * on focus. It wins over `disabled`: passing both keeps the button reachable, which is
+     * the point of giving a reason.
+     *
+     * The description is a `hidden` copy of the reason rather than the bubble itself: the
+     * bubble exists only while hovered or focused once it is portalled, and a description
+     * that comes and goes is read inconsistently. The bubble is kept visual, the way
+     * DangerConfirm keeps its own.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * Where `disabledReason` shows (0.32, §4 "No fact only in a tooltip"): by default a
+     * line under the button at Large and on a touch screen, the tooltip otherwise. See
+     * {@link DisabledReasonDisplay}.
+     */
+    disabledReasonDisplay?: DisabledReasonDisplay;
+    /**
+     * This button COMMITS — it saves, creates, deletes. Under a locked
+     * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's
+     * reason (which wins over a `disabledReason` of its own). No provider, or an
+     * unlocked one: no effect. See {@link WriteLockProvider}; a {@link CommitScope} since
+     * 0.33 (`COMMIT_EXCEPT_BILLING`: every lock but a lapsed plan's).
+     */
+    commit?: CommitScope;
+    /**
+     * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.
+     *
+     * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a
+     * `submittingLabel`, so the button jumps width mid-click and a screen reader hears
+     * the name change instead of "busy". Here the label STAYS — it is still the
+     * accessible name and still holds the button's width — and the spinner is drawn over
+     * it in the text colour, so nothing beside the button moves.
+     *
+     * The same prop {@link FileButton} has (`pending`), with one difference: this one is
+     * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,
+     * and a native `disabled` drops that focus to `<body>` the moment the save starts;
+     * clicks, and the Enter that submits a form through it, are swallowed instead.
+     */
+    pending?: boolean;
+    /** Only on the link form — see {@link ButtonLinkProps}. */
+    href?: never;
+    renderLink?: never;
+    external?: never;
+    replace?: never;
+    reloadDocument?: never;
+}
+/**
+ * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.
+ *
+ * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the
+ * invoice / lease / unit preview dialogs' "Open" at invoice-preview-dialog.tsx:36,
+ * platform-companies-page.tsx:111, verify-email-page.tsx:86's "Log in",
+ * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>
+ * navigate(…)}>` that are links in all but markup: no middle-click, no "open in new
+ * tab", no URL on hover, and a screen reader announces a button that then changes the
+ * page. With `href` it is an `<a>`: the provider's router link
+ * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.
+ *
+ * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.
+ */
+export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "href"> {
+    href: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    stretch?: boolean;
+    tone?: ButtonTone;
+    /** The in-app router link, over the provider's `linkComponent` (see
+     *  {@link KitLinkComponent}). Ignored when `external`. */
+    renderLink?: KitLinkComponent;
+    /** Leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`, never the
+     *  router link, and "(opens in a new tab)" read after the label — billing-history's
+     *  Stripe PDF. A `target="_blank"` of your own is announced the same way. */
+    external?: boolean;
+    /**
+     * Navigate by replacing the current history entry, so Back does not return here —
+     * keksdose F1: the "Continue" out of a one-shot page (an emailed confirmation link, a
+     * payment return URL) that must not be landed on again. Handed to the router link as
+     * `replace` (see `KitLinkProps.replace` for mapping it); on a plain `<a>` a plain click
+     * becomes `location.replace(href)`. Ignored when `external`.
+     */
+    replace?: boolean;
+    /**
+     * A plain `<a>` for an in-app `href`, so the browser loads the whole document instead
+     * of the router swapping the view — keksdose F1: a route the SPA does not own (a
+     * server-rendered export, a logout that must drop every in-memory cache). Wins over
+     * `renderLink` and the provider's `linkComponent`.
+     */
+    reloadDocument?: boolean;
+    /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —
+     *  `role="link"` and `aria-disabled`, out of the tab order like a disabled button,
+     *  with the disabled look. The router link is not used: it needs somewhere to go. */
+    disabled?: boolean;
+    ref?: Ref<HTMLAnchorElement>;
+    type?: never;
+    form?: never;
+    pending?: never;
+    pressed?: never;
+    disabledReason?: never;
+    disabledReasonDisplay?: never;
+    commit?: never;
+}
+export declare function Button(props: ButtonLinkProps): ReactElement;
+export declare function Button(props: ButtonProps): ReactElement;

package/dist/components/button.js

@@ -0,0 +1,165 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link.js";
+import { useCommitReason } from "./write-lock.js";
+import { hasContent } from "../lib/presence.js";
+import { LockedReason } from "./field-parts.js";
+import { Spinner } from "./spinner.js";
+import { BUTTON_LINK_PRESSED, ICON_BUTTON_PRESSED, RenderedButtonLink, buttonLook } from "./button-look.js";
+function Button(props) {
+  if (props.href !== void 0) return /* @__PURE__ */ jsx(ButtonLink, { ...props });
+  return /* @__PURE__ */ jsx(ButtonElement, { ...props });
+}
+function ButtonLink({
+  href,
+  renderLink,
+  external,
+  replace,
+  reloadDocument,
+  disabled,
+  variant = "primary",
+  size = "md",
+  stretch,
+  tone = "default",
+  className,
+  children,
+  target,
+  rel,
+  onClick,
+  ...rest
+}) {
+  const kitLink = useKitLink();
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const Link = reloadDocument ? void 0 : pickLinkRenderer(renderLink, kitLink, href);
+  const newTab = !disabled && (external || target === "_blank");
+  const cls = cn(
+    buttonLook(variant, size, stretch, tone),
+    // `relative` holds the sr-only note (see sr-only-containment.test).
+    newTab && "relative",
+    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also
+    // keeps the hover fill from lighting up on something that refuses the click.
+    disabled && "pointer-events-none cursor-not-allowed opacity-50",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    newTab && " ",
+    newTab && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      "(",
+      common.opensInNewTab,
+      ")"
+    ] })
+  ] });
+  if (disabled) {
+    return /* @__PURE__ */ jsx("a", { ...rest, role: "link", "aria-disabled": "true", className: cls, children: body });
+  }
+  if (external || !Link) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        href,
+        target: external ? "_blank" : target,
+        rel: external ? rel ?? "noopener noreferrer" : rel,
+        onClick: external ? onClick : replacingClick(onClick, href, replace, target),
+        className: cls,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RenderedButtonLink,
+    {
+      render: Link,
+      ...rest,
+      ...routerLinkNavigation(replace),
+      href,
+      target,
+      rel,
+      onClick,
+      className: cls,
+      children: body
+    }
+  );
+}
+function ButtonElement({
+  variant = "primary",
+  size = "md",
+  stretch,
+  tone = "default",
+  pressed,
+  disabledReason: ownDisabledReason,
+  disabledReasonDisplay,
+  commit,
+  pending,
+  className,
+  onClick,
+  children,
+  href: _href,
+  renderLink: _renderLink,
+  external: _external,
+  replace: _replace,
+  reloadDocument: _reloadDocument,
+  ...rest
+}) {
+  const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
+  const locked = hasContent(disabledReason);
+  const inert = locked || Boolean(pending);
+  const ownDescribedBy = rest["aria-describedby"];
+  const button = /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...rest,
+      disabled: inert ? void 0 : rest.disabled,
+      "aria-disabled": inert || rest["aria-disabled"],
+      "aria-busy": pending || rest["aria-busy"],
+      "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
+      "aria-pressed": pressed ?? rest["aria-pressed"],
+      onClick: (e) => {
+        if (inert) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
+      className: cn(
+        buttonLook(variant, size, stretch, tone),
+        pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
+        // The disabled look for the focusable kind of disabled.
+        locked && "cursor-not-allowed opacity-50",
+        // No dimming while pending: the spinner IS the state, and at half opacity it
+        // would be the faintest thing on the button. `relative` anchors it.
+        pending && "relative cursor-progress",
+        className
+      ),
+      children: pending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center gap-[inherit] opacity-0", children }),
+        /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            label: null,
+            className: "absolute inset-0 m-auto size-4 border-current/30 border-t-current"
+          }
+        )
+      ] }) : children
+    }
+  );
+  if (!locked) return button;
+  return /* @__PURE__ */ jsx(
+    LockedReason,
+    {
+      lock: { reason: disabledReason, reasonId },
+      display: disabledReasonDisplay,
+      className: stretch ? "self-stretch" : void 0,
+      children: button
+    }
+  );
+}
+export {
+  Button
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/button.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, replacingClick, routerLinkNavigation } from \"./text-link\";\nimport { useCommitReason } from \"./write-lock\";\nimport type { CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport { LockedReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport { BUTTON_LINK_PRESSED, ICON_BUTTON_PRESSED, RenderedButtonLink, buttonLook } from \"./button-look\";\nimport type { ButtonSize, ButtonTone, ButtonVariant } from \"./button-look\";\n\n// The kit's text button, and `<Button href>`, the link that looks like one. Its look —\n// the variant, size and tone maps, and `buttonClasses` — is ./button-look, which\n// IconButton shares (0.34, MOD-2, refactor audit 2026-10).\n\n/**\n * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS\n * it unless you pass `type=\"button\"`. Kept native on purpose — a form's own submit\n * button relies on it, and changing the default would silently stop those forms from\n * submitting. Pass `type=\"button\"` for every other action in a form (keksdose had six\n * link buttons submitting their form).\n */\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  /** `md` (default) is the page's action button. `sm` is the compact one — 12px text\n   *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a\n   *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand\n   *  there). Every variant takes either size. */\n  size?: ButtonSize;\n  /** In a flex row next to a taller labelled field, fill the field's height so the\n   *  two line up. No effect outside a flex row. */\n  stretch?: boolean;\n  /** The `<button>` element. React 19 passes `ref` to a function component as an\n   *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —\n   *  declared here only because `ButtonHTMLAttributes` does not carry it. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or\n   *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an\n   *  outlined destructive button and `primary` a soft one; ignored by the other\n   *  variants. See {@link ButtonTone}. */\n  tone?: ButtonTone;\n  /**\n   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets\n   * `aria-pressed=\"true\"` and draws the \"on\" look — on a `link`, the brand colour and a\n   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and\n   * `false` sets `aria-pressed=\"false\"` with the ordinary look. Left out, no\n   * `aria-pressed` (or the caller's own). For lenkbank's \"All speeds\" text toggle\n   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`\n   * swapping two class strings; with `variant=\"link\" tone=\"muted\"` it is this.\n   */\n  pressed?: boolean;\n  /**\n   * Why the action is not available — the button's half of DangerConfirm's\n   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).\n   *\n   * A disabled button that cannot say why is a dead end: the native `disabled` takes it\n   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a\n   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`\n   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form\n   * submission they stand for) do nothing, and the reason is shown in the kit\n   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it\n   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is\n   * the point of giving a reason.\n   *\n   * The description is a `hidden` copy of the reason rather than the bubble itself: the\n   * bubble exists only while hovered or focused once it is portalled, and a description\n   * that comes and goes is read inconsistently. The bubble is kept visual, the way\n   * DangerConfirm keeps its own.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default a\n   * line under the button at Large and on a touch screen, the tooltip otherwise. See\n   * {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This button COMMITS — it saves, creates, deletes. Under a locked\n   * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's\n   * reason (which wins over a `disabledReason` of its own). No provider, or an\n   * unlocked one: no effect. See {@link WriteLockProvider}; a {@link CommitScope} since\n   * 0.33 (`COMMIT_EXCEPT_BILLING`: every lock but a lapsed plan's).\n   */\n  commit?: CommitScope;\n  /**\n   * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.\n   *\n   * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a\n   * `submittingLabel`, so the button jumps width mid-click and a screen reader hears\n   * the name change instead of \"busy\". Here the label STAYS — it is still the\n   * accessible name and still holds the button's width — and the spinner is drawn over\n   * it in the text colour, so nothing beside the button moves.\n   *\n   * The same prop {@link FileButton} has (`pending`), with one difference: this one is\n   * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,\n   * and a native `disabled` drops that focus to `<body>` the moment the save starts;\n   * clicks, and the Enter that submits a form through it, are swallowed instead.\n   */\n  pending?: boolean;\n  /** Only on the link form — see {@link ButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.\n *\n * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the\n * invoice / lease / unit preview dialogs' \"Open\" at invoice-preview-dialog.tsx:36,\n * platform-companies-page.tsx:111, verify-email-page.tsx:86's \"Log in\",\n * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>\n * navigate(…)}>` that are links in all but markup: no middle-click, no \"open in new\n * tab\", no URL on hover, and a screen reader announces a button that then changes the\n * page. With `href` it is an `<a>`: the provider's router link\n * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.\n *\n * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.\n */\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\"> {\n  href: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  stretch?: boolean;\n  tone?: ButtonTone;\n  /** The in-app router link, over the provider's `linkComponent` (see\n   *  {@link KitLinkComponent}). Ignored when `external`. */\n  renderLink?: KitLinkComponent;\n  /** Leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`, never the\n   *  router link, and \"(opens in a new tab)\" read after the label — billing-history's\n   *  Stripe PDF. A `target=\"_blank\"` of your own is announced the same way. */\n  external?: boolean;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return here —\n   * keksdose F1: the \"Continue\" out of a one-shot page (an emailed confirmation link, a\n   * payment return URL) that must not be landed on again. Handed to the router link as\n   * `replace` (see `KitLinkProps.replace` for mapping it); on a plain `<a>` a plain click\n   * becomes `location.replace(href)`. Ignored when `external`.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`, so the browser loads the whole document instead\n   * of the router swapping the view — keksdose F1: a route the SPA does not own (a\n   * server-rendered export, a logout that must drop every in-memory cache). Wins over\n   * `renderLink` and the provider's `linkComponent`.\n   */\n  reloadDocument?: boolean;\n  /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —\n   *  `role=\"link\"` and `aria-disabled`, out of the tab order like a disabled button,\n   *  with the disabled look. The router link is not used: it needs somewhere to go. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pending?: never;\n  pressed?: never;\n  disabledReason?: never;\n  disabledReasonDisplay?: never;\n  commit?: never;\n}\n\n// Declared link-first so `<Button href>` picks the link props; the LAST signature is\n// what `ComponentProps<typeof Button>` reads, so wrappers (FileButton) still see the\n// `<button>` props they always did.\nexport function Button(props: ButtonLinkProps): ReactElement;\nexport function Button(props: ButtonProps): ReactElement;\nexport function Button(props: ButtonProps | ButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <ButtonLink {...(props as ButtonLinkProps)} />;\n  return <ButtonElement {...(props as ButtonProps)} />;\n}\n\nfunction ButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"primary\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  className,\n  children,\n  target,\n  rel,\n  onClick,\n  ...rest\n}: ButtonLinkProps) {\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The same rule as every kit link (`pickLinkRenderer`): an external `href` or an\n  // in-page `#anchor` is never handed to the provider's router link, even without\n  // `external`.\n  // `reloadDocument` is the caller saying \"not the router\" for this one link.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const cls = cn(\n    buttonLook(variant, size, stretch, tone),\n    // `relative` holds the sr-only note (see sr-only-containment.test).\n    newTab && \"relative\",\n    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also\n    // keeps the hover fill from lighting up on something that refuses the click.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const body = (\n    <>\n      {children}\n      {/* The space OUTSIDE the sr-only span: a name computation trims each child's\n          text, so one inside it was lost (\"Download(opens…\"). In a flex box a bare\n          space draws nothing. */}\n      {newTab && \" \"}\n      {newTab && <span className=\"sr-only\">({common.opensInNewTab})</span>}\n    </>\n  );\n  if (disabled) {\n    return (\n      <a {...rest} role=\"link\" aria-disabled=\"true\" className={cls}>\n        {body}\n      </a>\n    );\n  }\n  if (external || !Link) {\n    return (\n      <a\n        {...rest}\n        href={href}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? onClick : replacingClick(onClick, href, replace, target)}\n        className={cls}\n      >\n        {body}\n      </a>\n    );\n  }\n  return (\n    <RenderedButtonLink\n      render={Link}\n      {...rest}\n      {...routerLinkNavigation(replace)}\n      href={href}\n      target={target}\n      rel={rel}\n      onClick={onClick}\n      className={cls}\n    >\n      {body}\n    </RenderedButtonLink>\n  );\n}\n\nfunction ButtonElement({\n  variant = \"primary\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  pressed,\n  disabledReason: ownDisabledReason,\n  disabledReasonDisplay,\n  commit,\n  pending,\n  className,\n  onClick,\n  children,\n  href: _href,\n  renderLink: _renderLink,\n  external: _external,\n  replace: _replace,\n  reloadDocument: _reloadDocument,\n  ...rest\n}: ButtonProps) {\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      onClick={(e) => {\n        // `preventDefault` as well as not calling through: a locked submit button must\n        // not submit its form, and the browser does that after this handler returns.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      className={cn(\n        buttonLook(variant, size, stretch, tone),\n        pressed && (variant === \"link\" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),\n        // The disabled look for the focusable kind of disabled.\n        locked && \"cursor-not-allowed opacity-50\",\n        // No dimming while pending: the spinner IS the state, and at half opacity it\n        // would be the faintest thing on the button. `relative` anchors it.\n        pending && \"relative cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        <>\n          {/* Transparent, not hidden: it keeps the width AND stays the accessible\n              name (`visibility: hidden` would drop it from the name). `gap-[inherit]`\n              keeps an icon + text spaced as the button spaces them. */}\n          <span className=\"inline-flex items-center justify-center gap-[inherit] opacity-0\">{children}</span>\n          {/* Decorative: `aria-busy` says it, as on FileButton. */}\n          <Spinner\n            label={null}\n            className=\"absolute inset-0 m-auto size-4 border-current/30 border-t-current\"\n          />\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n  if (!locked) return button;\n  return (\n    <LockedReason\n      lock={{ reason: disabledReason, reasonId }}\n      display={disabledReasonDisplay}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      {button}\n    </LockedReason>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/calculator.d.ts

@@ -1,109 +1,8 @@
-import * as react from 'react';
-import { bP as CalculatorLabels } from '../delete-account-setting-DAgGBrbn.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
-
+import { type CalculatorLabels } from "../i18n/kit-labels.js";
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not
  *  replaced, so every object that type-checked before still does. */
-type CalculatorButtonLabels = Partial<CalculatorLabels>;
+export type CalculatorButtonLabels = Partial<CalculatorLabels>;
 interface CalculatorButtonProps {
     /** Current field text — seeds the keypad so the user can keep calculating
      * from what's already entered. */
@@ -124,8 +23,8 @@ interface CalculatorButtonProps {
     onChange: (value: string, expression?: string) => void;
     className?: string;
     /** The trigger's accessible name; wins over `calculator.open` from the provider. */
-    ariaLabel?: string;
-    /** Screen-reader names for the panel's own controls. `ariaLabel` above already
+    "aria-label"?: string;
+    /** Screen-reader names for the panel's own controls. `aria-label` above already
      *  covers the trigger; these three were hardcoded English inside the popover,
      *  which a translating host had no way to reach. */
     labels?: CalculatorButtonLabels;
@@ -136,6 +35,5 @@ interface CalculatorButtonProps {
  * `relative` wrapper, positioned absolutely. The keypad seeds from the current
  * field value and writes evaluated results straight back through `onChange`.
  */
-declare function CalculatorButton({ value, onChange, className, ariaLabel, labels: labelsProp, }: CalculatorButtonProps): react.JSX.Element;
-
-export { CalculatorButton, type CalculatorButtonLabels };
+export declare function CalculatorButton({ value, onChange, className, "aria-label": ariaLabel, labels: labelsProp, }: CalculatorButtonProps): import("react").JSX.Element;
+export {};