@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/bulk-action-bar.d.ts

@@ -1,7 +1,7 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
-interface BulkActionBarLabels {
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_BULK_ACTION_BAR_LABELS } from "./bulk-action-bar-labels.js";
+export interface BulkActionBarLabels {
     /** The count, shown in the bar, spoken by its live region and used as the toolbar's
      *  name: "3 selected". */
     selected: (count: number) => string;
@@ -11,14 +11,14 @@ interface BulkActionBarLabels {
     /** Spoken when the selection empties and the bar goes. */
     cleared: string;
 }
-declare const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels;
+export { DEFAULT_BULK_ACTION_BAR_LABELS };
 /**
  * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the
  * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the
  * desktop's: pinned to the top of its scroll container, over the rows it acts on.
  * `inline` — in the flow, where the caller places it.
  */
-type BulkActionBarVariant = "floating" | "sticky" | "inline";
+export type BulkActionBarVariant = "floating" | "sticky" | "inline";
 /**
  * A variant per breakpoint, mobile first — `{ base: "floating", md: "sticky" }` is the
  * phone's floating card below 768px and the desktop's sticky bar from there up. The
@@ -31,14 +31,14 @@ type BulkActionBarVariant = "floating" | "sticky" | "inline";
  * than classes: the floating bar's clear is an icon at the start, the others' a text
  * button at the end, and the floating bar is positioned by inline style.
  */
-interface ResponsiveBulkActionBarVariant {
+export interface ResponsiveBulkActionBarVariant {
     base: BulkActionBarVariant;
     sm?: BulkActionBarVariant;
     md?: BulkActionBarVariant;
     lg?: BulkActionBarVariant;
     xl?: BulkActionBarVariant;
 }
-interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "children"> {
+export interface BulkActionBarProps extends Omit<ComponentPropsWithRef<"div">, "role" | "children"> {
     /** How many items are selected. The bar shows only while this is above zero —
      *  unless {@link open} says otherwise. */
     count: number;
@@ -84,7 +84,7 @@ interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role
      */
     panel?: ReactNode;
     /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */
-    labels?: Partial<BulkActionBarLabels>;
+    labels?: LabelOverride<BulkActionBarLabels>;
 }
 /**
  * The bar that appears while rows are selected: the count, a way out, and what can be
@@ -115,6 +115,4 @@ interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role
  * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,
  * because tapping more rows is how a selection grows.
  */
-declare function BulkActionBar({ count, onClear, children, variant: variantProp, open, panel, labels: labelsProp, className, style, onKeyDown, onFocus, ...rest }: BulkActionBarProps): react.JSX.Element;
-
-export { BulkActionBar, type BulkActionBarLabels, type BulkActionBarProps, type BulkActionBarVariant, DEFAULT_BULK_ACTION_BAR_LABELS, type ResponsiveBulkActionBarVariant };
+export declare function BulkActionBar({ count, onClear, children, variant: variantProp, open, panel, labels: labelsProp, className, style, onKeyDown, onFocus, ...rest }: BulkActionBarProps): import("react").JSX.Element;

package/dist/components/bulk-action-bar.js

@@ -7,13 +7,10 @@ import { horizontalStep } from "../lib/direction.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { useBreakpoint } from "../hooks/use-breakpoint.js";
-import { OVERLAY_EXIT_MS, prefersReducedMotion } from "../hooks/use-close-transition.js";
-import { Button, IconButton } from "./ui.js";
-const DEFAULT_BULK_ACTION_BAR_LABELS = {
-  selected: (count) => `${count} selected`,
-  clear: "Clear selection",
-  cleared: "Selection cleared"
-};
+import { OVERLAY_EXIT_MS, skipsExitAnimation } from "../hooks/use-close-transition.js";
+import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
+import { DEFAULT_BULK_ACTION_BAR_LABELS } from "./bulk-action-bar-labels.js";
 const BREAKPOINTS = ["xl", "lg", "md", "sm"];
 function useResolvedVariant(variant) {
   const matches = {
@@ -69,7 +66,7 @@ function BulkActionBar({
       setShownCount(count);
       setLeaving(false);
     } else if (prev.shown) {
-      setLeaving(!prefersReducedMotion());
+      setLeaving(!skipsExitAnimation());
     }
   }
   useEffect(() => {
@@ -114,10 +111,10 @@ function BulkActionBar({
   );
   const hasPanel = panel !== void 0 && panel !== null && panel !== false;
   const surfaceClass = floating ? cn(
-    "fixed z-30 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+    "fixed z-30 rounded-2xl border border-subtle bg-surface shadow-lg",
     shown ? "animate-sheet" : "animate-sheet-out"
   ) : cn(
-    variant === "sticky" && "sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
+    variant === "sticky" && "sticky top-0 z-20 border-b border-subtle bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
     shown ? "animate-overlay" : "animate-overlay-out"
   );
   const rowClass = cn("flex flex-wrap items-center", floating ? "gap-1 px-2 py-1" : "gap-2 px-3 py-2");
@@ -145,7 +142,7 @@ function BulkActionBar({
       className: hasPanel ? rowClass : cn(rowClass, surfaceClass, className),
       children: [
         floating && clear,
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-auto truncate text-sm font-medium text-[var(--text-primary)]", children: labels.selected(shownCount) }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-auto truncate text-sm font-medium text-primary", children: labels.selected(shownCount) }),
         /* @__PURE__ */ jsx("div", { className: "contents", children }),
         !floating && clear
       ]
@@ -168,7 +165,7 @@ function BulkActionBar({
             {
               "data-bulk-action-bar-panel": "",
               className: cn(
-                "border-t border-[var(--border)] px-3 py-3",
+                "border-t border-subtle px-3 py-3",
                 floating && "max-h-[60dvh] overflow-y-auto"
               ),
               children: panel

package/dist/components/bulk-action-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/bulk-action-bar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useBreakpoint } from \"../hooks/use-breakpoint\";\nimport { OVERLAY_EXIT_MS, prefersReducedMotion } from \"../hooks/use-close-transition\";\nimport { Button, IconButton } from \"./ui\";\n\nexport interface BulkActionBarLabels {\n  /** The count, shown in the bar, spoken by its live region and used as the toolbar's\n   *  name: \"3 selected\". */\n  selected: (count: number) => string;\n  /** The clear/cancel action's name — the X of the floating bar, the text button of the\n   *  others. */\n  clear: string;\n  /** Spoken when the selection empties and the bar goes. */\n  cleared: string;\n}\n\nexport const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels = {\n  selected: (count) => `${count} selected`,\n  clear: \"Clear selection\",\n  cleared: \"Selection cleared\",\n};\n\n/**\n * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the\n * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the\n * desktop's: pinned to the top of its scroll container, over the rows it acts on.\n * `inline` — in the flow, where the caller places it.\n */\nexport type BulkActionBarVariant = \"floating\" | \"sticky\" | \"inline\";\n\n/**\n * A variant per breakpoint, mobile first — `{ base: \"floating\", md: \"sticky\" }` is the\n * phone's floating card below 768px and the desktop's sticky bar from there up. The\n * breakpoints are the ones the kit's classes use (sm 640, md 768, lg 1024, xl 1280px\n * at Normal text size; since 0.32 they move with the text size, as `md:` does). keksdose's payees selection bar (payees-selection-bar.tsx)\n * computes exactly this with its own `useMediaQuery(\"(min-width: 768px)\")`; every bar\n * that is a card on a phone and a strip on a desktop would repeat it.\n *\n * Resolved in JS rather than with `md:` classes because the variants differ in more\n * than classes: the floating bar's clear is an icon at the start, the others' a text\n * button at the end, and the floating bar is positioned by inline style.\n */\nexport interface ResponsiveBulkActionBarVariant {\n  base: BulkActionBarVariant;\n  sm?: BulkActionBarVariant;\n  md?: BulkActionBarVariant;\n  lg?: BulkActionBarVariant;\n  xl?: BulkActionBarVariant;\n}\n\n/** Widest first: the first that matches and names a value wins. Each is the class's own\n *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */\nconst BREAKPOINTS = [\"xl\", \"lg\", \"md\", \"sm\"] as const;\n\n/** The variant in force: the widest breakpoint that matches AND names one, else\n *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —\n *  and a plain string variant simply ignores them. Without `matchMedia` (SSR, tests)\n *  every query is false, so the bar renders its `base`, the phone's, first. */\nfunction useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {\n  const matches = {\n    xl: useBreakpoint(\"xl\"),\n    lg: useBreakpoint(\"lg\"),\n    md: useBreakpoint(\"md\"),\n    sm: useBreakpoint(\"sm\"),\n  };\n  if (typeof variant === \"string\") return variant;\n  for (const key of BREAKPOINTS) {\n    const v = variant[key];\n    if (matches[key] && v !== undefined) return v;\n  }\n  return variant.base;\n}\n\nexport interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\" | \"children\"> {\n  /** How many items are selected. The bar shows only while this is above zero —\n   *  unless {@link open} says otherwise. */\n  count: number;\n  /**\n   * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked\n   * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as\n   * before.\n   *\n   * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a\n   * \"Select\" button, and the bar must be there at \"0 selected\" to hold the way out and\n   * a \"Select all\" (pass it as a child); gated on the count, the bar appeared only at\n   * the first tick, and the user who pressed \"Select\" saw nothing happen. The exit plays\n   * when it closes either way, and the count is still announced on every change.\n   */\n  open?: boolean;\n  /** Clear the selection / leave selection mode. */\n  onClear: () => void;\n  /**\n   * The actions: buttons (`IconButton size=\"lg\"` on a phone, `Button` from md up),\n   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.\n   *\n   * LINKS rove too (keksdose F8): a `<Button href>` — \"View report\", which navigates\n   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place\n   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled\n   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any\n   * other focusable of your own joins with `data-toolbar-item`.\n   */\n  children?: ReactNode;\n  /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per\n   *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */\n  variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;\n  /**\n   * Content BELOW the toolbar row, inside the same surface — the same floating card or\n   * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops\n   * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's\n   * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —\n   * a category picker, an exclude checkbox, Apply — under the count and the clear; a\n   * form is not a toolbar's content (`role=\"toolbar\"` promises one arrow-key widget),\n   * and set beside the bar it lost the sticky tint and scrolled away from it.\n   *\n   * On the floating variant the panel scrolls within 60% of the viewport's height, so a\n   * long form on a phone cannot push the bar off the top of the screen.\n   */\n  panel?: ReactNode;\n  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */\n  labels?: Partial<BulkActionBarLabels>;\n}\n\n/** Where the floating bar sits: clear of the phone nav and of the home indicator,\n *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.\n *  Set as inline style, so reposition it through `style` (which is merged over this,\n *  e.g. `style={{ insetInline: \"auto 2rem\", width: \"24rem\" }}`), not `className`. */\nconst FLOATING_STYLE: CSSProperties = {\n  bottom: \"calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)\",\n  // Both insets on both sides: a logical side has no one physical inset to name, and\n  // the bar is symmetric, so RTL needs nothing more.\n  insetInline: \"max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\",\n};\n\n/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by\n *  `tabindex`, because the roving below sets every one but the current to `-1` — a\n *  custom control joins with `data-toolbar-item`.\n *\n *  `a[href]` is here on purpose (keksdose F8, a \"View report\" `Button href` in the bar):\n *  a link in a toolbar is a toolbar item like any other, and left out it would keep its\n *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`\n *  WITHOUT one, and is skipped as a disabled button is. */\nconst ITEMS =\n  \"button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]\";\n\n/** Keys a text field needs for itself — the toolbar must not take its caret away. */\nfunction ownsArrows(el: Element): boolean {\n  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;\n  if (el instanceof HTMLInputElement) return ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\"].includes(el.type);\n  return (el as HTMLElement).isContentEditable;\n}\n\n/**\n * The bar that appears while rows are selected: the count, a way out, and what can be\n * done to all of them at once.\n *\n * keksdose had written it three times — the transactions phone bar\n * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars\n * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had\n * drifted where it matters: two parked themselves with a guessed `bottom-16` that the\n * third had already found leaves a 24px gap (live #314: the nav is content-sized and\n * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,\n * and all three were `role=\"toolbar\"` without the arrow keys that role promises.\n *\n * ## Keep it mounted\n *\n * Render it unconditionally and let `count` decide. At zero it renders only its live\n * region — which must already be in the DOM for the first \"3 selected\" to be heard —\n * and when the count drops to zero it plays its exit before it goes, which a\n * `{count > 0 && <Bar/>}` gate would cut off.\n *\n * ## The toolbar\n *\n * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab\n * leaves — the WAI-ARIA toolbar pattern, since that is what `role=\"toolbar\"` tells a\n * screen reader to expect. The stop remembers the control last used. Arrow keys inside\n * a text field stay the field's.\n *\n * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,\n * because tapping more rows is how a selection grows.\n */\nexport function BulkActionBar({\n  count,\n  onClear,\n  children,\n  variant: variantProp = \"floating\",\n  open,\n  panel,\n  labels: labelsProp,\n  className,\n  style,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: BulkActionBarProps) {\n  const labels = useKitLabels(\"bulkActionBar\", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const barRef = useRef<HTMLDivElement>(null);\n  const variant = useResolvedVariant(variantProp);\n  const shown = open ?? count > 0;\n\n  // The count the bar last SHOWED, so a bar lowering itself after \"clear\" still reads\n  // \"3 selected\" on its way out rather than \"0 selected\". Adjusted during render\n  // (`Collapse`'s pattern), as is the exit below.\n  const [shownCount, setShownCount] = useState(count);\n  const [leaving, setLeaving] = useState(false);\n  const [prev, setPrev] = useState({ count, shown });\n  if (count !== prev.count || shown !== prev.shown) {\n    setPrev({ count, shown });\n    if (shown) {\n      setShownCount(count);\n      setLeaving(false);\n    } else if (prev.shown) {\n      setLeaving(!prefersReducedMotion());\n    }\n  }\n  useEffect(() => {\n    if (!leaving) return;\n    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [leaving]);\n\n  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected\n  // was not the result of anything the user just did.\n  const spoken = useRef(count);\n  useEffect(() => {\n    if (spoken.current === count) return;\n    spoken.current = count;\n    // In selection mode the bar stays at zero, so zero is a count like any other.\n    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);\n  }, [count, shown, labels, announce]);\n\n  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM\n  // rather than through props: after every render the remembered control (or the\n  // first) is the one with `tabindex=0`, every other one `-1`.\n  const active = useRef<HTMLElement | null>(null);\n  // Every render: the caller's controls come and go (a \"remove added\" that exists\n  // only while some are removable), and a stop on a control that left must move on.\n  useLayoutEffect(() => {\n    rove(barRef.current, active);\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;\n    const list = itemsOf(barRef.current);\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    if (at === -1 || list.length === 0) return;\n    const step = horizontalStep(e.key, barRef.current);\n    let next = -1;\n    if (step !== 0) next = (at + step + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === -1) return;\n    e.preventDefault();\n    active.current = list[next];\n    rove(barRef.current, active);\n    list[next].focus();\n  };\n\n  if (!shown && !leaving) {\n    return <span {...regionProps} />;\n  }\n\n  const floating = variant === \"floating\";\n  const clear = floating ? (\n    <IconButton size=\"lg\" onClick={onClear} aria-label={labels.clear}>\n      <X />\n    </IconButton>\n  ) : (\n    // `ms-auto`: when the actions wrap, the way out still sits at the bar's end.\n    <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={onClear} className=\"ms-auto\">\n      {labels.clear}\n    </Button>\n  );\n\n  const hasPanel = panel !== undefined && panel !== null && panel !== false;\n  // The surface — where the bar sits and what it looks like — and the toolbar row's\n  // own layout. Without a panel they are one element, exactly as before 0.11.0; with\n  // one the surface wraps the row and the panel, so both share its tint and position.\n  const surfaceClass = floating\n    ? cn(\n        \"fixed z-30 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        shown ? \"animate-sheet\" : \"animate-sheet-out\",\n      )\n    : cn(\n        variant === \"sticky\" &&\n          \"sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur\",\n        shown ? \"animate-overlay\" : \"animate-overlay-out\",\n      );\n  // `flex-wrap`: on a phone the count, three actions and a text \"Clear selection\" are\n  // wider than the screen. Without wrapping the count (the one shrinkable item)\n  // collapsed to a sliver and the rest ran out of the bar; wrapped, the actions that do\n  // not fit move to a second line and every label stays whole.\n  const rowClass = cn(\"flex flex-wrap items-center\", floating ? \"gap-1 px-2 py-1\" : \"gap-2 px-3 py-2\");\n  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;\n\n  const toolbar = (\n    <div\n      {...(hasPanel ? null : rest)}\n      ref={barRef}\n      role=\"toolbar\"\n      aria-label={labels.selected(shownCount)}\n      aria-orientation=\"horizontal\"\n      data-bulk-action-bar={hasPanel ? undefined : variant}\n      // Leaving: out of the tab order and the accessibility tree at once, while the\n      // bar still animates. The selection it acted on is already gone.\n      inert={(!hasPanel && !shown) || undefined}\n      onKeyDown={handleKeyDown}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // Clicking a control is using it: the stop follows the pointer too.\n        const hit = itemsOf(barRef.current).find((el) => el === e.target);\n        if (hit) {\n          active.current = hit;\n          rove(barRef.current, active);\n        }\n      }}\n      style={hasPanel ? undefined : surfaceStyle}\n      className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}\n    >\n      {floating && clear}\n      {/* `flex-auto`, not `flex-1`: a zero basis told the wrapping that the count needs\n          no room, so it was the item squeezed to nothing instead of a line breaking.\n          Its own width is its basis now; `truncate` is left for a label too long for a\n          line on its own. */}\n      <span className=\"min-w-0 flex-auto truncate text-sm font-medium text-[var(--text-primary)]\">\n        {labels.selected(shownCount)}\n      </span>\n      {/* `contents`, so the caller's controls are flex items of the bar itself. */}\n      <div className=\"contents\">{children}</div>\n      {!floating && clear}\n    </div>\n  );\n\n  return (\n    <>\n      <span {...regionProps} />\n      {hasPanel ? (\n        <div\n          {...rest}\n          data-bulk-action-bar={variant}\n          inert={!shown || undefined}\n          style={surfaceStyle}\n          className={cn(\"flex flex-col\", surfaceClass, className)}\n        >\n          {toolbar}\n          <div\n            data-bulk-action-bar-panel=\"\"\n            className={cn(\n              \"border-t border-[var(--border)] px-3 py-3\",\n              floating && \"max-h-[60dvh] overflow-y-auto\",\n            )}\n          >\n            {panel}\n          </div>\n        </div>\n      ) : (\n        toolbar\n      )}\n    </>\n  );\n}\n\nfunction itemsOf(bar: HTMLElement | null): HTMLElement[] {\n  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];\n}\n\n/** Put the one Tab stop on the remembered control — or the first, when that one has\n *  gone or was never set — and take it off every other. */\nfunction rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {\n  const list = itemsOf(bar);\n  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;\n  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/bulk-action-bar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useBreakpoint } from \"../hooks/use-breakpoint\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation } from \"../hooks/use-close-transition\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./icon-button\";\nimport { DEFAULT_BULK_ACTION_BAR_LABELS } from \"./bulk-action-bar-labels\";\n\nexport interface BulkActionBarLabels {\n  /** The count, shown in the bar, spoken by its live region and used as the toolbar's\n   *  name: \"3 selected\". */\n  selected: (count: number) => string;\n  /** The clear/cancel action's name — the X of the floating bar, the text button of the\n   *  others. */\n  clear: string;\n  /** Spoken when the selection empties and the bar goes. */\n  cleared: string;\n}\n\n// Defined in ./bulk-action-bar-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_BULK_ACTION_BAR_LABELS };\n\n/**\n * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the\n * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the\n * desktop's: pinned to the top of its scroll container, over the rows it acts on.\n * `inline` — in the flow, where the caller places it.\n */\nexport type BulkActionBarVariant = \"floating\" | \"sticky\" | \"inline\";\n\n/**\n * A variant per breakpoint, mobile first — `{ base: \"floating\", md: \"sticky\" }` is the\n * phone's floating card below 768px and the desktop's sticky bar from there up. The\n * breakpoints are the ones the kit's classes use (sm 640, md 768, lg 1024, xl 1280px\n * at Normal text size; since 0.32 they move with the text size, as `md:` does). keksdose's payees selection bar (payees-selection-bar.tsx)\n * computes exactly this with its own `useMediaQuery(\"(min-width: 768px)\")`; every bar\n * that is a card on a phone and a strip on a desktop would repeat it.\n *\n * Resolved in JS rather than with `md:` classes because the variants differ in more\n * than classes: the floating bar's clear is an icon at the start, the others' a text\n * button at the end, and the floating bar is positioned by inline style.\n */\nexport interface ResponsiveBulkActionBarVariant {\n  base: BulkActionBarVariant;\n  sm?: BulkActionBarVariant;\n  md?: BulkActionBarVariant;\n  lg?: BulkActionBarVariant;\n  xl?: BulkActionBarVariant;\n}\n\n/** Widest first: the first that matches and names a value wins. Each is the class's own\n *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */\nconst BREAKPOINTS = [\"xl\", \"lg\", \"md\", \"sm\"] as const;\n\n/** The variant in force: the widest breakpoint that matches AND names one, else\n *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —\n *  and a plain string variant simply ignores them. Without `matchMedia` (SSR, tests)\n *  every query is false, so the bar renders its `base`, the phone's, first. */\nfunction useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {\n  const matches = {\n    xl: useBreakpoint(\"xl\"),\n    lg: useBreakpoint(\"lg\"),\n    md: useBreakpoint(\"md\"),\n    sm: useBreakpoint(\"sm\"),\n  };\n  if (typeof variant === \"string\") return variant;\n  for (const key of BREAKPOINTS) {\n    const v = variant[key];\n    if (matches[key] && v !== undefined) return v;\n  }\n  return variant.base;\n}\n\nexport interface BulkActionBarProps extends Omit<ComponentPropsWithRef<\"div\">, \"role\" | \"children\"> {\n  /** How many items are selected. The bar shows only while this is above zero —\n   *  unless {@link open} says otherwise. */\n  count: number;\n  /**\n   * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked\n   * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as\n   * before.\n   *\n   * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a\n   * \"Select\" button, and the bar must be there at \"0 selected\" to hold the way out and\n   * a \"Select all\" (pass it as a child); gated on the count, the bar appeared only at\n   * the first tick, and the user who pressed \"Select\" saw nothing happen. The exit plays\n   * when it closes either way, and the count is still announced on every change.\n   */\n  open?: boolean;\n  /** Clear the selection / leave selection mode. */\n  onClear: () => void;\n  /**\n   * The actions: buttons (`IconButton size=\"lg\"` on a phone, `Button` from md up),\n   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.\n   *\n   * LINKS rove too (keksdose F8): a `<Button href>` — \"View report\", which navigates\n   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place\n   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled\n   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any\n   * other focusable of your own joins with `data-toolbar-item`.\n   */\n  children?: ReactNode;\n  /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per\n   *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */\n  variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;\n  /**\n   * Content BELOW the toolbar row, inside the same surface — the same floating card or\n   * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops\n   * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's\n   * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —\n   * a category picker, an exclude checkbox, Apply — under the count and the clear; a\n   * form is not a toolbar's content (`role=\"toolbar\"` promises one arrow-key widget),\n   * and set beside the bar it lost the sticky tint and scrolled away from it.\n   *\n   * On the floating variant the panel scrolls within 60% of the viewport's height, so a\n   * long form on a phone cannot push the bar off the top of the screen.\n   */\n  panel?: ReactNode;\n  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */\n  labels?: LabelOverride<BulkActionBarLabels>;\n}\n\n/** Where the floating bar sits: clear of the phone nav and of the home indicator,\n *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.\n *  Set as inline style, so reposition it through `style` (which is merged over this,\n *  e.g. `style={{ insetInline: \"auto 2rem\", width: \"24rem\" }}`), not `className`. */\nconst FLOATING_STYLE: CSSProperties = {\n  bottom: \"calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)\",\n  // Both insets on both sides: a logical side has no one physical inset to name, and\n  // the bar is symmetric, so RTL needs nothing more.\n  insetInline: \"max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\",\n};\n\n/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by\n *  `tabindex`, because the roving below sets every one but the current to `-1` — a\n *  custom control joins with `data-toolbar-item`.\n *\n *  `a[href]` is here on purpose (keksdose F8, a \"View report\" `Button href` in the bar):\n *  a link in a toolbar is a toolbar item like any other, and left out it would keep its\n *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`\n *  WITHOUT one, and is skipped as a disabled button is. */\nconst ITEMS =\n  \"button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]\";\n\n/** Keys a text field needs for itself — the toolbar must not take its caret away. */\nfunction ownsArrows(el: Element): boolean {\n  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;\n  if (el instanceof HTMLInputElement) return ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\"].includes(el.type);\n  return (el as HTMLElement).isContentEditable;\n}\n\n/**\n * The bar that appears while rows are selected: the count, a way out, and what can be\n * done to all of them at once.\n *\n * keksdose had written it three times — the transactions phone bar\n * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars\n * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had\n * drifted where it matters: two parked themselves with a guessed `bottom-16` that the\n * third had already found leaves a 24px gap (live #314: the nav is content-sized and\n * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,\n * and all three were `role=\"toolbar\"` without the arrow keys that role promises.\n *\n * ## Keep it mounted\n *\n * Render it unconditionally and let `count` decide. At zero it renders only its live\n * region — which must already be in the DOM for the first \"3 selected\" to be heard —\n * and when the count drops to zero it plays its exit before it goes, which a\n * `{count > 0 && <Bar/>}` gate would cut off.\n *\n * ## The toolbar\n *\n * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab\n * leaves — the WAI-ARIA toolbar pattern, since that is what `role=\"toolbar\"` tells a\n * screen reader to expect. The stop remembers the control last used. Arrow keys inside\n * a text field stay the field's.\n *\n * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,\n * because tapping more rows is how a selection grows.\n */\nexport function BulkActionBar({\n  count,\n  onClear,\n  children,\n  variant: variantProp = \"floating\",\n  open,\n  panel,\n  labels: labelsProp,\n  className,\n  style,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: BulkActionBarProps) {\n  const labels = useKitLabels(\"bulkActionBar\", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const barRef = useRef<HTMLDivElement>(null);\n  const variant = useResolvedVariant(variantProp);\n  const shown = open ?? count > 0;\n\n  // The count the bar last SHOWED, so a bar lowering itself after \"clear\" still reads\n  // \"3 selected\" on its way out rather than \"0 selected\". Adjusted during render\n  // (`Collapse`'s pattern), as is the exit below.\n  const [shownCount, setShownCount] = useState(count);\n  const [leaving, setLeaving] = useState(false);\n  const [prev, setPrev] = useState({ count, shown });\n  if (count !== prev.count || shown !== prev.shown) {\n    setPrev({ count, shown });\n    if (shown) {\n      setShownCount(count);\n      setLeaving(false);\n    } else if (prev.shown) {\n      setLeaving(!skipsExitAnimation());\n    }\n  }\n  useEffect(() => {\n    if (!leaving) return;\n    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [leaving]);\n\n  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected\n  // was not the result of anything the user just did.\n  const spoken = useRef(count);\n  useEffect(() => {\n    if (spoken.current === count) return;\n    spoken.current = count;\n    // In selection mode the bar stays at zero, so zero is a count like any other.\n    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);\n  }, [count, shown, labels, announce]);\n\n  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM\n  // rather than through props: after every render the remembered control (or the\n  // first) is the one with `tabindex=0`, every other one `-1`.\n  const active = useRef<HTMLElement | null>(null);\n  // Every render: the caller's controls come and go (a \"remove added\" that exists\n  // only while some are removable), and a stop on a control that left must move on.\n  useLayoutEffect(() => {\n    rove(barRef.current, active);\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;\n    const list = itemsOf(barRef.current);\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    if (at === -1 || list.length === 0) return;\n    const step = horizontalStep(e.key, barRef.current);\n    let next = -1;\n    if (step !== 0) next = (at + step + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === -1) return;\n    e.preventDefault();\n    active.current = list[next];\n    rove(barRef.current, active);\n    list[next].focus();\n  };\n\n  if (!shown && !leaving) {\n    return <span {...regionProps} />;\n  }\n\n  const floating = variant === \"floating\";\n  const clear = floating ? (\n    <IconButton size=\"lg\" onClick={onClear} aria-label={labels.clear}>\n      <X />\n    </IconButton>\n  ) : (\n    // `ms-auto`: when the actions wrap, the way out still sits at the bar's end.\n    <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={onClear} className=\"ms-auto\">\n      {labels.clear}\n    </Button>\n  );\n\n  const hasPanel = panel !== undefined && panel !== null && panel !== false;\n  // The surface — where the bar sits and what it looks like — and the toolbar row's\n  // own layout. Without a panel they are one element, exactly as before 0.11.0; with\n  // one the surface wraps the row and the panel, so both share its tint and position.\n  const surfaceClass = floating\n    ? cn(\n        \"fixed z-30 rounded-2xl border border-subtle bg-surface shadow-lg\",\n        shown ? \"animate-sheet\" : \"animate-sheet-out\",\n      )\n    : cn(\n        variant === \"sticky\" &&\n          \"sticky top-0 z-20 border-b border-subtle bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur\",\n        shown ? \"animate-overlay\" : \"animate-overlay-out\",\n      );\n  // `flex-wrap`: on a phone the count, three actions and a text \"Clear selection\" are\n  // wider than the screen. Without wrapping the count (the one shrinkable item)\n  // collapsed to a sliver and the rest ran out of the bar; wrapped, the actions that do\n  // not fit move to a second line and every label stays whole.\n  const rowClass = cn(\"flex flex-wrap items-center\", floating ? \"gap-1 px-2 py-1\" : \"gap-2 px-3 py-2\");\n  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;\n\n  const toolbar = (\n    <div\n      {...(hasPanel ? null : rest)}\n      ref={barRef}\n      role=\"toolbar\"\n      aria-label={labels.selected(shownCount)}\n      aria-orientation=\"horizontal\"\n      data-bulk-action-bar={hasPanel ? undefined : variant}\n      // Leaving: out of the tab order and the accessibility tree at once, while the\n      // bar still animates. The selection it acted on is already gone.\n      inert={(!hasPanel && !shown) || undefined}\n      onKeyDown={handleKeyDown}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // Clicking a control is using it: the stop follows the pointer too.\n        const hit = itemsOf(barRef.current).find((el) => el === e.target);\n        if (hit) {\n          active.current = hit;\n          rove(barRef.current, active);\n        }\n      }}\n      style={hasPanel ? undefined : surfaceStyle}\n      className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}\n    >\n      {floating && clear}\n      {/* `flex-auto`, not `flex-1`: a zero basis told the wrapping that the count needs\n          no room, so it was the item squeezed to nothing instead of a line breaking.\n          Its own width is its basis now; `truncate` is left for a label too long for a\n          line on its own. */}\n      <span className=\"min-w-0 flex-auto truncate text-sm font-medium text-primary\">\n        {labels.selected(shownCount)}\n      </span>\n      {/* `contents`, so the caller's controls are flex items of the bar itself. */}\n      <div className=\"contents\">{children}</div>\n      {!floating && clear}\n    </div>\n  );\n\n  return (\n    <>\n      <span {...regionProps} />\n      {hasPanel ? (\n        <div\n          {...rest}\n          data-bulk-action-bar={variant}\n          inert={!shown || undefined}\n          style={surfaceStyle}\n          className={cn(\"flex flex-col\", surfaceClass, className)}\n        >\n          {toolbar}\n          <div\n            data-bulk-action-bar-panel=\"\"\n            className={cn(\n              \"border-t border-subtle px-3 py-3\",\n              floating && \"max-h-[60dvh] overflow-y-auto\",\n            )}\n          >\n            {panel}\n          </div>\n        </div>\n      ) : (\n        toolbar\n      )}\n    </>\n  );\n}\n\nfunction itemsOf(bar: HTMLElement | null): HTMLElement[] {\n  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];\n}\n\n/** Put the one Tab stop on the remembered control — or the first, when that one has\n *  gone or was never set — and take it off every other. */\nfunction rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {\n  const list = itemsOf(bar);\n  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;\n  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;\n}\n"],"mappings":"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","names":[]}

package/dist/components/button-group.d.ts

@@ -1,106 +1,6 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { bO as ButtonVariant, bM as ButtonSize } from '../delete-account-setting-DiPX4Vue.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 './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';
-
-interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, ReactElement, ReactNode, Ref } from "react";
+import { type ButtonSize, type ButtonVariant } from "./button-look.js";
+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";
@@ -135,10 +35,10 @@ interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role">
  * 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.
  */
-declare function ButtonGroup({ orientation, variant, elevated, className, ...rest }: ButtonGroupProps): react.JSX.Element;
+export declare function ButtonGroup({ orientation, variant, elevated, className, ...rest }: ButtonGroupProps): import("react").JSX.Element;
 /** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's
  *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
-interface ButtonGroupLinkRenderProps {
+export interface ButtonGroupLinkRenderProps {
     href: string;
     /** The button look — keep it, or the member is a bare link in the frame. */
     className: string;
@@ -149,7 +49,7 @@ interface ButtonGroupLinkRenderProps {
     [key: `aria-${string}`]: string | boolean | number | undefined;
     [key: `data-${string}`]: unknown;
 }
-interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href" | "className" | "children"> {
+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;
@@ -172,6 +72,4 @@ interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href
  * 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`).
  */
-declare function ButtonGroupLink({ href, variant, size, current, renderLink, className, children, ...rest }: ButtonGroupLinkProps): react.JSX.Element;
-
-export { ButtonGroup, ButtonGroupLink, type ButtonGroupLinkProps, type ButtonGroupLinkRenderProps, type ButtonGroupProps };
+export declare function ButtonGroupLink({ href, variant, size, current, renderLink, className, children, ...rest }: ButtonGroupLinkProps): import("react").JSX.Element;

package/dist/components/button-group.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-import { buttonClasses } from "./ui.js";
+import { buttonClasses } from "./button-look.js";
 import { useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer } from "./text-link.js";
 const JOINED_COMMON = cn(
-  "inline-flex rounded-md border border-[var(--border)]",
+  "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-[var(--border)]",
+  "[&>*]: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"
@@ -48,7 +48,7 @@ const GAPPED = {
   horizontal: "inline-flex flex-row items-center gap-1",
   vertical: "inline-flex flex-col items-center gap-1"
 };
-const ELEVATED_JOINED = "bg-[var(--bg-surface)] shadow-lg";
+const ELEVATED_JOINED = "bg-surface shadow-lg";
 const ELEVATED_GAPPED = "[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md";
 function ButtonGroup({
   orientation = "horizontal",
@@ -73,7 +73,7 @@ function ButtonGroup({
     }
   );
 }
-const LINK_CURRENT = "bg-[var(--brand-bg)] text-brand-muted hover:bg-[var(--brand-bg-hover)]";
+const LINK_CURRENT = "bg-brand-soft text-brand-muted hover:bg-brand-soft-hover";
 function ButtonGroupLink({
   href,
   variant = "secondary",

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

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

package/dist/components/button-look.d.ts

@@ -0,0 +1,88 @@
+import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels.js";
+/**
+ * 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 ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.
+ * The other exports are the two buttons' shared parts (`@internal`).
+ */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
+/**
+ * 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 declare const TOUCH_TARGET_LARGE = "large:min-h-[48px] large:min-w-[48px]";
+export type ButtonSize = "sm" | "md";
+/**
+ * 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 declare const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
+export declare const buttonVariantClasses: Record<ButtonVariant, string>;
+/**
+ * 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 `primary` 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`, `brand` and `link`'s own colours are left alone: a tone that recoloured a
+ * solid danger or brand button would be a second variant under another name.
+ */
+export type ButtonTone = "default" | "muted" | "danger";
+export declare const BUTTON_LINK_PRESSED = "font-medium text-brand hover:text-brand disabled:hover:text-brand";
+/** 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 declare function buttonClasses(variant?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
+export declare 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 declare function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone): string;
+/** @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 declare function RenderedButtonLink({ render, ...props }: KitLinkProps & {
+    render: KitLinkComponent;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;