@eifi1/ui-kit 0.9.0 → 0.11.0

package/dist/components/ui.d.ts

@@ -1,10 +1,28 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, Ref, SelectHTMLAttributes, ReactNode, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, Ref, ReactNode, SelectHTMLAttributes, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
 import { TooltipSide } from './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
 type ButtonSize = "sm" | "md";
+/**
+ * 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`. The filled and bordered variants
+ * carry their meaning in the box, not the text, so a tone on them does nothing.
+ */
+type ButtonTone = "default" | "muted" | "danger";
 /** The second argument of {@link buttonClasses} in its options form. */
 interface ButtonClassesOptions {
     /** See {@link ButtonProps.size}. */
@@ -44,10 +62,43 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
      *  declared here only because `ButtonHTMLAttributes` does not carry it. */
     ref?: Ref<HTMLButtonElement>;
+    /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or
+     *  `danger` (quiet, `--danger` on hover). Ignored by the other variants. See
+     *  {@link ButtonTone}. */
+    tone?: ButtonTone;
+    /**
+     * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets
+     * `aria-pressed="true"` and draws the "on" look — on a `link`, the brand colour and a
+     * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and
+     * `false` sets `aria-pressed="false"` with the ordinary look. Left out, no
+     * `aria-pressed` (or the caller's own). For lenkbank's "All speeds" text toggle
+     * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`
+     * swapping two class strings; with `variant="link" tone="muted"` it is this.
+     */
+    pressed?: boolean;
+    /**
+     * Why the action is not available — the button's half of DangerConfirm's
+     * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).
+     *
+     * A disabled button that cannot say why is a dead end: the native `disabled` takes it
+     * out of the tab order, so a keyboard user never lands on it, and a pointer gets a
+     * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`
+     * instead — still focusable, still hoverable — clicks (and the Enter/Space and form
+     * submission they stand for) do nothing, and the reason is shown in the kit
+     * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it
+     * on focus. It wins over `disabled`: passing both keeps the button reachable, which is
+     * the point of giving a reason.
+     *
+     * The description is a `hidden` copy of the reason rather than the bubble itself: the
+     * bubble exists only while hovered or focused once it is portalled, and a description
+     * that comes and goes is read inconsistently. The bubble is kept visual, the way
+     * DangerConfirm keeps its own.
+     */
+    disabledReason?: ReactNode;
 }
-declare function Button({ variant, size, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
-type IconButtonSize = "lg" | "md" | "sm" | "xs" | "2xs";
-type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info";
+declare function Button({ variant, size, stretch, tone, pressed, disabledReason, className, onClick, ...rest }: ButtonProps): react.JSX.Element;
+type IconButtonSize = "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
+type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info" | "success" | "custom";
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Any {@link ButtonVariant}, or `overlay` — a round translucent disc for use over
      *  an image (see `ICON_BUTTON_OVERLAY`). */
@@ -57,11 +108,31 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px
      *  icon (an action on a chip or a tab). */
     size?: IconButtonSize;
+    /**
+     * Fill the height of the flex row it stands in, keeping its width — the delete at
+     * the end of keksdose's split line (transaction-fields:162), level with the labelled
+     * fields beside it rather than floating at half their height. {@link Button}'s
+     * `stretch`; no effect outside a flex row. With a `label`, the tooltip's wrapper is
+     * what stretches.
+     */
+    stretch?: boolean;
+    /** `round`: a circle instead of the rounded square — a compact status chip in a top
+     *  bar (keksdose's sync indicator). `overlay` is always round. */
+    shape?: "square" | "round";
+    /**
+     * The colour of `tone="custom"`, as any CSS colour — a token (`var(--warning)`),
+     * ideally. Sets `--icon-button-tone` on the button, so passing a different one per
+     * state re-colours the glyph, its hover fill and its focus ring together. Passing it
+     * implies `tone="custom"`. Or leave it out and set the variable yourself from a class
+     * (`className="[--icon-button-tone:var(--success)]"`).
+     */
+    toneColor?: string;
     /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on
      *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a
      *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that
      *  wants attention. `info`: sky at rest — a notice-worthy but harmless action
-     *  (keksdose's reconcile). Default: the variant's own colours. See `quiet` for
+     *  (keksdose's reconcile). `success`: green at rest — a good state worth seeing.
+     *  `custom`: the colour of `toneColor` (see there). Default: the variant's own colours. See `quiet` for
      *  turning a coloured tone's resting look the other way. */
     tone?: IconButtonTone;
     /**
@@ -116,6 +187,53 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  The pair look exactly like the nested version, click exactly like it, and
      *  are two tab stops a screen reader can tell apart. */
     stopPropagation?: boolean;
+    /**
+     * The button's name, said once: it becomes the `aria-label` AND the text of a kit
+     * {@link Tooltip} round the button.
+     *
+     * Every app writes the pair by hand. lenkbank's nine icon actions all carry
+     * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,
+     * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,
+     * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,
+     * which shows late, never on focus and never on touch, and looks like no other
+     * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)
+     * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.
+     *
+     * A caller's own `aria-label` still wins, for the rare name that should be longer
+     * than the bubble. The bubble is visual only: it would otherwise describe the button
+     * with its own name, and a screen reader would read the same word twice. Tooltip's
+     * default placement applies — in place, or portalled inside a scroll container —
+     * unless `tooltipPortal` says otherwise.
+     */
+    label?: string;
+    /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the
+     *  accessible name only — for a button whose glyph is universally read (a close ✕ in
+     *  a dialog header) or that already sits under a tooltip of its own. */
+    tooltip?: boolean;
+    /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */
+    tooltipSide?: TooltipSide;
+    /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */
+    tooltipPortal?: boolean;
+    /**
+     * Why the action is not available — {@link Button}'s `disabledReason`, on the icon
+     * button: keksdose's accounts page cannot hide an account with a balance or delete
+     * one with bookings (accounts-page:879/913 — "hide requires zero", "delete blocked"),
+     * nor its budgets page delete the only budget (budgets-page:330), and each wrapped a
+     * natively disabled IconButton in a Tooltip that swaps its label for the reason — a
+     * bubble a keyboard never opens, since `disabled` leaves the tab order, and a reason
+     * a screen reader never hears.
+     *
+     * The same contract as Button's: `aria-disabled` instead of `disabled`, so it stays
+     * focusable and hoverable; clicks (and the Enter/Space they stand for) are swallowed
+     * — `stopPropagation` still applies, so a locked action in a clickable row does not
+     * open the row either; the reason shows in the kit {@link Tooltip} and is attached
+     * through `aria-describedby` as a `hidden` copy. The NAME stays `aria-label` /
+     * `label` — "Delete", described by "The active budget cannot be deleted" — and the
+     * bubble shows the reason in place of the label, since the glyph already says what
+     * the button is and the reason is the news. Shown even with `tooltip={false}`: a
+     * reason nobody can see is not one. Wins over `disabled`, as on Button.
+     */
+    disabledReason?: ReactNode;
 }
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 declare const FIELD_BASE: string;
@@ -441,8 +559,41 @@ interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "childre
      *  wrap and centre as one row), kastlan's "Create a rule". Buttons or links the
      *  caller renders; the box only places them. */
     action?: ReactNode;
+    /**
+     * `box` (default): the dashed, padded card that stands in for a whole section.
+     * `inline`: one quiet line with no box — for the empty state INSIDE something that
+     * already has its own frame, where a dashed card would be a box in a box. keksdose
+     * writes that line by hand five times as a muted `<p className="py-6 text-center">`:
+     * the notification inbox (notification-inbox:140), a support thread
+     * (support-thread:144), the assistant (assistant-page:321), the admin support panel
+     * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks
+     * to the text's size and sits before the title, the hint follows on the same line,
+     * and the row wraps only when it must. Centred like the box; `className="justify-start"`
+     * for a list that reads from the start edge (funding-dialog).
+     */
+    variant?: "box" | "inline";
+    /**
+     * Colour the icon and the title: `danger` for an error standing where the content
+     * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and
+     * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a
+     * message — and `success` for an empty state that is GOOD news, kastlan's "No defects
+     * recorded for this room" (handover defects-step.tsx:142, a green check). Left out,
+     * both stay muted. The hint stays muted either way: it is the explanation, not the
+     * verdict.
+     */
+    tone?: "danger" | "success";
+    /**
+     * `inline` only (0.11.0). `sm`: 12px, start-aligned and tight (`py-1`) — the empty
+     * line INSIDE a detail panel, under a panel heading and among `text-xs` rows, where
+     * the default's 14px centred line with `py-4` read as a section of its own.
+     * keksdose's holdings panel (holdings-panel:563), asset-loan panel
+     * (asset-loan-panel:108) and loan-payment panel (loan-payment-panel:191) each wrote
+     * `className="justify-start py-1"` over it and still got body-size text. Default `md`,
+     * the look it had. Ignored by the box.
+     */
+    size?: "sm" | "md";
 }
-declare function EmptyState({ title, hint, icon, action, headingAs, className, ...rest }: EmptyStateProps): react.JSX.Element;
+declare function EmptyState({ title, hint, icon, action, headingAs, variant, tone, size, className, ...rest }: EmptyStateProps): react.JSX.Element;
 /** One tab of a {@link Tabs} strip. */
 interface TabItem<T extends string> {
     id: T;
@@ -627,4 +778,4 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
 }
 declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
 
-export { Button, type ButtonClassesOptions, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonTone, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };
+export { Button, type ButtonClassesOptions, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonTone, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };

package/dist/components/ui.js

@@ -27,15 +27,48 @@ const buttonVariantClasses = {
   // ring hugging the word instead of drawing a pill round it.
   link: "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]"
 };
+const BUTTON_TONES = {
+  muted: "text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]",
+  danger: "text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)] disabled:hover:text-[var(--text-secondary)]"
+};
+const TONED_VARIANTS = /* @__PURE__ */ new Set(["link", "ghost"]);
+const BUTTON_LINK_PRESSED = "font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]";
 function buttonClasses(variant = "primary", classNameOrOptions) {
   const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
   return cn(BUTTON_BASE, BUTTON_SIZES[size], buttonVariantClasses[variant], className);
 }
-function Button({ variant = "primary", size = "md", stretch, className, ...rest }) {
-  return /* @__PURE__ */ jsx(
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function Button({
+  variant = "primary",
+  size = "md",
+  stretch,
+  tone = "default",
+  pressed,
+  disabledReason,
+  className,
+  onClick,
+  ...rest
+}) {
+  const reasonId = useId();
+  const locked = hasContent(disabledReason);
+  const ownDescribedBy = rest["aria-describedby"];
+  const button = /* @__PURE__ */ jsx(
     "button",
     {
       ...rest,
+      disabled: locked ? void 0 : rest.disabled,
+      "aria-disabled": locked || rest["aria-disabled"],
+      "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
+      "aria-pressed": pressed ?? rest["aria-pressed"],
+      onClick: (e) => {
+        if (locked) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
       className: cn(
         BUTTON_BASE,
         BUTTON_SIZES[size],
@@ -44,13 +77,31 @@ function Button({ variant = "primary", size = "md", stretch, className, ...rest
         // 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],
+        pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
+        // The disabled look for the focusable kind of disabled.
+        locked && "cursor-not-allowed opacity-50",
         className
       )
     }
   );
+  if (!locked) return button;
+  return (
+    // The button in a FRAGMENT so Tooltip does not clone its bubble into the
+    // description as well — the hidden copy below already describes it, and the same
+    // sentence twice would be read on every focus. `stretch` moves to the wrapper,
+    // which is now the flex item.
+    /* @__PURE__ */ jsx(Tooltip, { label: disabledReason, className: stretch ? "self-stretch" : void 0, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      button,
+      /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+    ] }) })
+  );
 }
 const ICON_BUTTON_BASE = "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 const ICON_BUTTON_SIZES = {
+  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step
+  // past the 44px minimum rather than on it.
+  xl: "size-12 [&_svg]:size-6",
   // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's
   // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.
   lg: "size-11 [&_svg]:size-5",
@@ -59,6 +110,14 @@ const ICON_BUTTON_SIZES = {
   xs: "size-7 rounded [&_svg]:size-4",
   "2xs": "size-6 rounded [&_svg]:size-3.5"
 };
+const ICON_BUTTON_STRETCH_SIZES = {
+  xl: "w-12 min-h-12 self-stretch [&_svg]:size-6",
+  lg: "w-11 min-h-11 self-stretch [&_svg]:size-5",
+  md: "w-9 min-h-9 self-stretch [&_svg]:size-5",
+  sm: "w-8 min-h-8 self-stretch [&_svg]:size-5",
+  xs: "w-7 min-h-7 self-stretch rounded [&_svg]:size-4",
+  "2xs": "w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5"
+};
 const ICON_BUTTON_TONES = {
   danger: {
     quiet: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
@@ -71,10 +130,27 @@ const ICON_BUTTON_TONES = {
   info: {
     quiet: "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus:ring-[var(--info-border)]",
     toned: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]"
+  },
+  success: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--success-bg)] hover:text-[var(--success)] focus:ring-[var(--success-border)]",
+    toned: "text-[var(--success)] hover:bg-[var(--success-bg)] focus:ring-[var(--success-border)]"
+  },
+  // The hover fill and the ring are MIXED from the one colour, since a custom tone
+  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a
+  // `custom` tone with no colour set is the default look rather than invisible.
+  custom: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]",
+    toned: "text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]"
   }
 };
 const ICON_BUTTON_MUTED = "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
-const QUIET_BY_DEFAULT = { danger: true, warning: false, info: false };
+const QUIET_BY_DEFAULT = {
+  danger: true,
+  warning: false,
+  info: false,
+  success: false,
+  custom: false
+};
 function iconButtonToneClass(tone, quiet) {
   if (tone === "default") return "";
   if (tone === "muted") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);
@@ -94,15 +170,48 @@ const ICON_BUTTON_DISABLED_REST = {
 const ICON_BUTTON_QUIET_DISABLED_REST = "disabled:hover:text-[var(--text-placeholder)]";
 const ICON_BUTTON_PRESSED = "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-[var(--brand)] disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]";
 const ICON_BUTTON_OVERLAY = "rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus:ring-[var(--text-inverse)]";
-const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", quiet, pressed, stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
-  return /* @__PURE__ */ jsx(
+const IconButton = forwardRef(function IconButton2({
+  variant = "ghost",
+  size = "md",
+  tone: toneProp,
+  quiet,
+  pressed,
+  stopPropagation,
+  stretch,
+  shape = "square",
+  toneColor,
+  label,
+  tooltip = true,
+  tooltipSide,
+  tooltipPortal,
+  disabledReason,
+  className,
+  style,
+  onClick,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const tone = toneProp ?? (toneColor !== void 0 ? "custom" : "default");
+  const reasonId = useId();
+  const locked = hasContent(disabledReason);
+  const ownDescribedBy = rest["aria-describedby"];
+  const button = /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       ...rest,
+      disabled: locked ? void 0 : rest.disabled,
+      "aria-disabled": locked || rest["aria-disabled"],
+      "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
+      "aria-label": rest["aria-label"] ?? label,
       "aria-pressed": pressed ?? rest["aria-pressed"],
+      style: toneColor !== void 0 ? { ...style, ["--icon-button-tone"]: toneColor } : style,
       onClick: (e) => {
         if (stopPropagation) e.stopPropagation();
+        if (locked) {
+          e.preventDefault();
+          return;
+        }
         onClick?.(e);
       },
       onKeyDown: (e) => {
@@ -111,16 +220,44 @@ const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "
       },
       className: cn(
         ICON_BUTTON_BASE,
-        ICON_BUTTON_SIZES[size],
+        stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
         // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
         variant === "overlay" ? ICON_BUTTON_OVERLAY : buttonVariantClasses[variant],
+        shape === "round" && "rounded-full",
         ICON_BUTTON_DISABLED_REST[variant],
         iconButtonToneClass(tone, quiet),
         pressed && ICON_BUTTON_PRESSED,
+        // The disabled look for the focusable kind of disabled, as on Button.
+        locked && "cursor-not-allowed opacity-50",
         className
       )
     }
   );
+  if (locked) {
+    return (
+      // Button's shape: the button and the hidden reason in a FRAGMENT, so Tooltip does
+      // not add its bubble to the description as well.
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          label: disabledReason,
+          side: tooltipSide,
+          portal: tooltipPortal,
+          className: stretch ? "self-stretch" : void 0,
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            button,
+            /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+          ] })
+        }
+      )
+    );
+  }
+  if (!tooltip || label === void 0 || label === "") return button;
+  return (
+    // A fragment, so Tooltip leaves the button's description alone: the bubble says
+    // exactly what `aria-label` already does.
+    /* @__PURE__ */ jsx(Tooltip, { label, side: tooltipSide, portal: tooltipPortal, className: stretch ? "self-stretch" : void 0, children: /* @__PURE__ */ jsx(Fragment, { children: button }) })
+  );
 });
 IconButton.displayName = "IconButton";
 const FIELD_BASE = "block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-sm placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:ring-[var(--brand)] disabled:cursor-default disabled:bg-[var(--bg-surface-2)] disabled:text-[var(--text-muted)] [&[readonly]]:bg-[var(--bg-surface-2)] [&[readonly]]:text-[var(--text-muted)]";
@@ -581,8 +718,52 @@ function Spinner({ className, label, ...rest }) {
     " "
   ] }) });
 }
-function EmptyState({ title, hint, icon, action, headingAs, className, ...rest }) {
+const EMPTY_STATE_TONE = {
+  danger: "text-[var(--danger)]",
+  success: "text-[var(--success)]"
+};
+function EmptyState({
+  title,
+  hint,
+  icon,
+  action,
+  headingAs,
+  variant = "box",
+  tone,
+  size = "md",
+  className,
+  ...rest
+}) {
   const Title = headingAs ?? "div";
+  const toneClass = tone ? EMPTY_STATE_TONE[tone] : void 0;
+  const hasHint = hint != null && hint !== false && hint !== "";
+  if (variant === "inline") {
+    const sm = size === "sm";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        className: cn(
+          "flex flex-wrap items-center text-[var(--text-muted)]",
+          sm ? "justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs" : "justify-center gap-x-2 gap-y-1 py-4 text-center text-sm",
+          className
+        ),
+        children: [
+          icon != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("flex text-[var(--text-placeholder)]", sm ? "[&_svg]:size-3.5" : "[&_svg]:size-4", toneClass),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx(Title, { className: cn(sm ? "text-xs" : "text-sm", toneClass), children: title }),
+          hasHint && /* @__PURE__ */ jsx("span", { className: "text-xs", children: hint }),
+          action != null && /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2", children: action })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -592,9 +773,9 @@ function EmptyState({ title, hint, icon, action, headingAs, className, ...rest }
         className
       ),
       children: [
-        icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", children: icon }),
-        /* @__PURE__ */ jsx(Title, { className: "text-sm font-medium text-[var(--text-secondary)]", children: title }),
-        hint != null && hint !== false && hint !== "" && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
+        icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", toneClass), children: icon }),
+        /* @__PURE__ */ jsx(Title, { className: cn("text-sm font-medium text-[var(--text-secondary)]", toneClass), children: title }),
+        hasHint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
         action != null && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: action })
       ]
     }