@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/button-group.tsx

@@ -1,223 +0,0 @@
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, ReactElement, ReactNode, Ref } from "react";
-import { cn } from "../lib/cn";
-import { buttonClasses, type ButtonSize, type ButtonVariant } from "./button-look";
-import { useKitLink } from "../i18n/kit-labels";
-import { pickLinkRenderer } from "./text-link";
-
-// Every class below is spelled out in full rather than assembled from parts: the
-// consumer's Tailwind build finds classes by scanning this package's source as text,
-// and a class that exists only after a template literal runs is never generated.
-//
-// Each rule is written twice, once for a direct child and once for a `<button>` one
-// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −
-// both carry a tooltip — where the direct child is the tooltip's wrapper span and the
-// button that draws the border and the corners sits inside it. The same again for an
-// `<a>` one level down: a router link member (see {@link ButtonGroupLink}) under a
-// tooltip. A bare link is a direct child and needs nothing extra.
-const JOINED_COMMON = cn(
-  "inline-flex rounded-md border border-subtle",
-  // The group draws the frame; each member gives up its own border, radius and shadow.
-  "[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none",
-  "[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none",
-  "[&>*>a]:rounded-none [&>*>a]:border-0 [&>*>a]:shadow-none",
-  "[&>*]:border-subtle",
-  // A focused member rises above its neighbours so its ring is not painted over by
-  // the next one's background.
-  "[&>*]:relative [&>*:focus-within]:z-10",
-);
-
-/**
- * A joined row at Large and Extra large wraps rather than run past its container (0.32.1,
- * the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 "nothing
- * overflows"): "Buttons | Chips | Feedback" was 329 px at 150 %, 67 px past a 360 px
- * phone's card. A wrapped row cannot keep one frame with dividers between members — the
- * second line's first member would carry a divider against the frame and no line would
- * part the rows — so at Large the frame is drawn by the members: each its own 1px
- * border, overlapping its neighbours by a pixel on both axes (the container's `ps-px
- * pt-px` takes the overlap back at the edges). On one row that draws the same frame and
- * dividers as Normal; wrapped, every line and every member is parted by one hairline,
- * and the members share out each line (`grow`), so the lines make one block. A group
- * that fits is only as wide as its members, so nothing grows there. A `large:` class,
- * so Normal keeps the frame it has, and it costs no render.
- */
-const JOINED_WRAP_AT_LARGE = cn(
-  "large:max-w-full large:flex-wrap large:border-0 large:ps-px large:pt-px",
-  "large:[&>*]:border large:[&>*]:-ms-px large:[&>*]:-mt-px",
-  "large:[&>*]:grow large:[&>*>button]:grow large:[&>*>a]:grow",
-);
-
-const JOINED: Record<"horizontal" | "vertical", string> = {
-  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the
-  // first member sits on the right with the right-hand corners rounded — the physical
-  // pair would round the outside of the last button and square off the first.
-  horizontal: cn(
-    JOINED_COMMON,
-    "flex-row items-stretch",
-    "[&>*:not(:first-child)]:border-s",
-    "[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md",
-    "[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md",
-    "[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md",
-    JOINED_WRAP_AT_LARGE,
-  ),
-  // The block axis is top-to-bottom in both reading directions, so top/bottom are
-  // already the logical edges here.
-  vertical: cn(
-    JOINED_COMMON,
-    "flex-col items-stretch",
-    "[&>*:not(:first-child)]:border-t",
-    "[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md",
-    "[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md",
-    "[&>:first-child>a]:rounded-t-md [&>:last-child>a]:rounded-b-md",
-  ),
-};
-
-// `gapped`: the members keep their own shape — round overlay discs, each its own
-// border and radius — and sit apart. Nothing is stripped, so there is nothing to
-// restore per edge, and the gap is logical by nature.
-const GAPPED: Record<"horizontal" | "vertical", string> = {
-  horizontal: "inline-flex flex-row items-center gap-1",
-  vertical: "inline-flex flex-col items-center gap-1",
-};
-
-// `elevated`, joined: the frame itself floats — a filled surface under the members (a
-// ghost member would otherwise show the content through it) and the shadow of a
-// control lifted over the page.
-const ELEVATED_JOINED = "bg-surface shadow-lg";
-// `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the
-// control, not the tooltip's square wrapper span, whose shadow would be a box round a
-// round disc.
-const ELEVATED_GAPPED = "[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md";
-
-export interface ButtonGroupProps extends Omit<ComponentPropsWithRef<"div">, "role"> {
-  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —
-   *  the map's zoom + over −. */
-  orientation?: "horizontal" | "vertical";
-  /**
-   * `joined` (default): one frame, hairline dividers, outer corners rounded. `gapped`:
-   * separate controls with a small gap, each keeping its own shape — the overlay
-   * discs of keksdose's receipt preview zoom (scan-file-preview.tsx:362, the − and +
-   * `IconButton variant="overlay"` in a hand-made `flex gap-1`), where a joined frame
-   * would be a box drawn over the photo.
-   */
-  variant?: "joined" | "gapped";
-  /**
-   * Float it: a surface with a shadow, for a toolbar that sits OVER content (a map's
-   * zoom, a photo's controls) rather than in the page's flow — keksdose adds
-   * `shadow-sm` to each disc on the receipt preview by hand. On a joined group the
-   * frame is filled and shadowed; on a gapped one, each member.
-   */
-  elevated?: boolean;
-}
-
-/**
- * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,
- * hairline dividers between the members, rounded only at the outer corners.
- *
- * keksdose asked for it twice — "collapse all / expand all" above its category
- * tree, and the + and − of its map zoom — both hand-built with negative margins and
- * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir="rtl"`.
- *
- * `role="group"` with a name: a reader then introduces the pair as "Zoom, group"
- * before reading "Zoom in", which is what tells a listener that the next button
- * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no
- * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key
- * roving, and every member keeps its own tab stop, as plain adjacent buttons do.
- * For one-of-many selection use `ToggleGroup`, which has the radio semantics.
- */
-export function ButtonGroup({
-  orientation = "horizontal",
-  variant = "joined",
-  elevated = false,
-  className,
-  ...rest
-}: ButtonGroupProps) {
-  const joined = variant === "joined";
-  return (
-    <div
-      {...rest}
-      role="group"
-      data-orientation={orientation}
-      data-variant={variant}
-      className={cn(
-        joined ? JOINED[orientation] : GAPPED[orientation],
-        elevated && (joined ? ELEVATED_JOINED : ELEVATED_GAPPED),
-        className,
-      )}
-    />
-  );
-}
-
-/** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's
- *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
-export interface ButtonGroupLinkRenderProps {
-  href: string;
-  /** The button look — keep it, or the member is a bare link in the frame. */
-  className: string;
-  children: ReactNode;
-  ref?: Ref<HTMLAnchorElement>;
-  "aria-current"?: "page";
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  [key: `aria-${string}`]: string | boolean | number | undefined;
-  [key: `data-${string}`]: unknown;
-}
-
-export interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href" | "className" | "children"> {
-  href: string;
-  /** The {@link Button} variant it looks like. Default `secondary`, the usual member. */
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  /** The member for the page you are on: `aria-current="page"` and the "on" look of a
-   *  pressed member, so a link row reads as a segmented switch between pages. */
-  current?: boolean;
-  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.
-   *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */
-  renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;
-  className?: string;
-  children: ReactNode;
-  ref?: Ref<HTMLAnchorElement>;
-}
-
-// The brand AS TEXT is `--brand-muted` (0.33, docs/colour-roles-harmonization.md §5.5):
-// `--brand` itself is solved to 3:1 and read 2.97:1 on its own wash in the derived dark
-// presets; the muted form holds 4.5:1 on it in every preset.
-const LINK_CURRENT = "bg-brand-soft text-brand-muted hover:bg-brand-soft-hover";
-
-/**
- * A {@link ButtonGroup} member that navigates: a link drawn as a {@link Button}, so it
- * joins the frame like one. A group mixing actions and pages — "Export" beside "Open
- * report" — had to either make the page a button with an `onClick` navigate (no
- * middle-click, no "open in new tab", no link semantics) or style an `<a>` whose
- * corners the group did not know about. Plain `<a>` by default; `renderLink` for the
- * router's `Link`, the kit's usual shape (`Chip`, `MenuItem`, `StatTile`).
- */
-export function ButtonGroupLink({
-  href,
-  variant = "secondary",
-  size,
-  current = false,
-  renderLink,
-  className,
-  children,
-  ...rest
-}: ButtonGroupLinkProps) {
-  const kitLink = useKitLink();
-  const props: ButtonGroupLinkRenderProps = {
-    ...rest,
-    href,
-    "aria-current": current ? "page" : undefined,
-    className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),
-    children,
-  };
-  const render = pickLinkRenderer(renderLink, kitLink, href);
-  if (render) return <RenderedGroupLink render={render} {...props} />;
-  const { children: content, ...anchor } = props;
-  return <a {...anchor}>{content}</a>;
-}
-
-/** Calls `renderLink` as a component, so the router link's hooks are its own. */
-function RenderedGroupLink({
-  render,
-  ...props
-}: ButtonGroupLinkRenderProps & { render: (props: ButtonGroupLinkRenderProps) => ReactElement }) {
-  return render(props);
-}

package/src/components/button-look.ts

@@ -1,256 +0,0 @@
-import { cn } from "../lib/cn";
-import { FOCUS_RING_WIDTH } from "./focus-ring";
-import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
-
-/**
- * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor
- * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew
- * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink
- * and its router link. Both now draw from this module, which renders nothing, so neither
- * imports the other.
- *
- * Public through the barrel (src/index.ts) by name: `buttonClasses`, `TOUCH_TARGET_LARGE`
- * and the four types. The other exports are the two buttons' shared parts (`@internal`).
- */
-
-/**
- * A button's look.
- *
- * - `default`: the quiet action — a warm filled chip with a hairline border. What a
- *   Button with no `variant` draws.
- * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one
- *   call to action a view leads with. "Accent" is the button's role here, painted in
- *   `--brand`; it is not the palette's second anchor colour, also called `accent`
- *   (theme/palette-derive.ts), which no button paints.
- * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,
- *   for an action that destroys something. `link`: a text link that acts (a `<button>`).
- *
- * 0.49's `primary` and `brand` (aliases of `default` and `accent`) were removed in 0.51;
- * `primary` will not come back with another meaning.
- */
-export type ButtonVariant = "default" | "accent" | "secondary" | "ghost" | "danger" | "link";
-
-// Shared base ring for every button-styled element. Kept as a named const so the
-// <Button> component and the {@link buttonClasses} helper draw from one source and
-// can never drift apart.
-//
-// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus
-// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each
-// variant's own colour below.
-//
-// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its
-// size when the label wraps at Large. Without it the svg was a flex item like the text,
-// and a two-line label squeezed it to a sliver ("New invoice" in a page header at 360 px
-// / Extra large).
-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,
-);
-
-/**
- * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at
- * least 48 px, the size a finger needs whatever the type. In px on purpose, like the
- * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that
- * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs
- * no render and is right on the first paint.
- */
-export const TOUCH_TARGET_LARGE = "large:min-h-[48px] large:min-w-[48px]";
-
-/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's
- *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`
- *  centred on it takes the taps a finger lands round the glyph. Not public. */
-export const HIT_AREA_LARGE =
-  "relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']";
-
-export type ButtonSize = "sm" | "md";
-
-// Box geometry per size, split out of the base so the two cannot be merged into one
-// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is
-// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and
-// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is
-// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for
-// a bigger text button (IconButton's `lg` is a touch target, not a text size). The
-// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.
-//
-// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its
-// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The
-// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which
-// is a word in a sentence and has no box to grow (see `buttonLook`).
-const BUTTON_SIZES: Record<ButtonSize, string> = {
-  md: "gap-2 px-3 py-2 text-sm",
-  sm: "gap-1.5 px-2 py-1 text-xs",
-};
-const BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {
-  md: "large:min-h-[48px]",
-  sm: "large:min-h-[48px] large:py-2.5",
-};
-
-/**
- * The hover of a control that may sit on the page, a card or a well (0.33, B′ —
- * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,
- * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or
- * more on all three surfaces, both themes, with the label at 7:1 and up. It was
- * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the
- * page would not have moved at all. Not `--bg-hover` either, which is mixed against the
- * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same
- * recipe at 12 %.
- */
-export const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
-
-// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.
-// Actions default to a warm bordered look (`default` = filled warm chip, secondary =
-// outline); `accent` is the solid brand fill for the rare strong CTA; `danger` takes the
-// semantic `--danger` family (destructive semantics), so a consumer can re-point the
-// destructive hue instead of inheriting a hard-coded red. Focus rings follow each
-// variant's own accent: brand for the four neutral ones, danger for `danger`.
-export const buttonVariantClasses: Record<ButtonVariant, string> = {
-  default:
-    // 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",
-  accent: "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.
-  //
-  // Under More contrast the word reads `--brand-muted`, the brand AS TEXT (0.36,
-  // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More
-  // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0
-  // as text too. Both modes, since `contrast:` does not split them.
-  link: "rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted",
-};
-
-/**
- * The text colour of a `link` or `ghost` button, over the variant's own.
- *
- * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's "Mark
- * undone", transaction-fields:176/215's "Add line" / "Fill total",
- * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the
- * body colour under the pointer, for an action that must be findable but not compete
- * with the brand-coloured one beside it. `danger` is the same quiet look turning
- * `--danger` on hover — transaction-editor:401's "Remove split", which is a text
- * action that destroys something.
- *
- * A `tone` rather than a `link-muted` variant, because it is the axis IconButton
- * already has (`tone="muted"`, `tone="danger"`, same quiet-until-hover meaning), and
- * because the same two looks are wanted on `ghost`.
- *
- * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:
- * `secondary` becomes an outlined destructive button (`--danger` text and a
- * `--danger-border` outline, the quiet danger fill on hover) and `default` a soft one
- * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-
- * tab.tsx "Remove all" is `variant="secondary" className="text-destructive"` — a
- * destructive action that must sit in a row of secondary buttons without shouting
- * like the solid `variant="danger"` would, and whose red text alone left the border
- * and hover saying "neutral". `muted` stays a text look and does nothing on a box, and
- * `danger`, `accent` and `link`'s own colours are left alone: a tone that recoloured a
- * solid danger or accent button would be a second variant under another name.
- */
-export type ButtonTone = "default" | "muted" | "danger";
-
-// `contrast:text-secondary` restates the tone's own colour under the `contrast:` variant,
-// so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link
-// stays quiet under More contrast. On `ghost` it reads the same either way.
-const BUTTON_TONES: Record<Exclude<ButtonTone, "default">, string> = {
-  muted: "text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary",
-  danger:
-    "text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast:text-secondary",
-};
-
-/** Only the two transparent variants take every tone; see {@link ButtonTone}. */
-const TONED_VARIANTS = new Set<ButtonVariant>(["link", "ghost"]);
-
-// `tone="danger"` on the neutral boxed variants — see {@link ButtonTone}. Each string
-// restates every colour the variant sets (border, fill, text, hover, ring) so none of
-// the neutral ones survives the merge.
-const BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {
-  // 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",
-  default:
-    "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",
-};
-
-// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what
-// lenkbank's "All speeds" toggle paints by hand (gear/hysteresis-charts.tsx:482). After
-// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey. Under
-// More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36, as the
-// `link` variant), whatever the tone.
-export const BUTTON_LINK_PRESSED =
-  "font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted";
-
-/** The second argument of {@link buttonClasses} in its options form. */
-export interface ButtonClassesOptions {
-  /** See {@link ButtonProps.size}. */
-  size?: ButtonSize;
-  className?: string;
-}
-
-/**
- * Button classes for the rare case where the styling must land on a non-`<button>`
- * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix
- * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real
- * button works, prefer `<Button>`. Draws from the same base, size and variant maps as
- * `<Button>`, so the two stay in lockstep.
- *
- * The second argument is either the extra classes (the pre-0.8.0 form) or
- * `{ size, className }` — `buttonClasses("secondary", { size: "sm" })` for keksdose's
- * compact toolbar links.
- */
-export function buttonClasses(
-  variant: ButtonVariant = "default",
-  classNameOrOptions?: string | ButtonClassesOptions,
-): string {
-  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,
-  );
-}
-
-// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the
-// "selected" look of a Chip or a SegmentedControl option, so an on toggle reads as on
-// beside them. After the tone, so a pressed `muted` button is brand, not grey. On hover
-// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark
-// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its
-// boxed variants too, which is why it lives here and not in ./icon-button.
-export 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";
-
-/** @internal The button look shared by the `<button>` and the `<a>` form. */
-export function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {
-  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],
-  );
-}
-
-/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip
- *  do — an inline `renderLink` arrow would otherwise be a new component type every
- *  render. Both buttons' link forms render through it. */
-export function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {
-  return render(props);
-}