@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/field-strip.tsx

@@ -1,129 +0,0 @@
-import { useId } from "react";
-import type { ComponentPropsWithRef, ReactNode } from "react";
-import { LabelStrip, useFieldMessages, type FieldHelpProps } from "./field-parts";
-
-/** What a {@link FieldStrip} hands render-prop children. */
-export interface FieldStripIds {
-  /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)
-   *  under `group={false}`, or anything else that has to point at it. */
-  labelId: string;
-  /** The ids of the caption and the error while they are on screen, else `undefined`.
-   *  The group is described by them already; spread this on the content under
-   *  `group={false}`, where there is no group to describe. */
-  describedBy: string | undefined;
-}
-
-/**
- * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, as Card and EmptyState took
- * it in 0.34, API-2): the ref is the root — the group, or the plain box under
- * `group={false}` — which a caller scrolls into view or measures.
- */
-export interface FieldStripProps extends Omit<ComponentPropsWithRef<"div">, "children">, FieldHelpProps {
-  /** The 11px static label, on the line a labelled field's label sits on. */
-  label: ReactNode;
-  /**
-   * Field anatomy, as on {@link Input}: plain text is a caption under the content (and
-   * describes the group); a {@link FieldHint} "?" rides the label line.
-   */
-  hint?: ReactNode;
-  /** A message under the content, in `--danger`, describing the group. `null`,
-   *  `false` and `""` are no error. The content's own controls are the caller's to
-   *  mark `aria-invalid`; a `group` cannot be. */
-  error?: ReactNode;
-  /**
-   * Dims the label with the content, as a disabled field's label dims. The content is
-   * the caller's: disable (or hide) its controls yourself — keksdose's location cell
-   * turns its map into a picture and drops its buttons, which no flag here could guess.
-   */
-  disabled?: boolean;
-  /**
-   * The wrapper is a `role="group"` named by the label (default), so a screen reader
-   * entering the map or the first button hears "Location, group" — what the visible
-   * label tells a sighted reader the content is about.
-   *
-   * `false` for content that is a labelled group ITSELF (a `role="radiogroup"` of the
-   * app's own, a TileRadioGroup's container, a fieldset): a group inside a group, both
-   * named "Pattern", is read twice. The wrapper is then a plain box, and the content
-   * takes the name from the render-prop's `labelId` (and the caption and error from
-   * its `describedBy`).
-   */
-  group?: boolean;
-  /** The content. A function receives {@link FieldStripIds}. */
-  children: ReactNode | ((ids: FieldStripIds) => ReactNode);
-}
-
-/**
- * The kit's label strip for content of your own — keksdose G8.
- *
- * 0.22 gave three groups a strip label (keksdose K2): ToggleGroup's
- * `labelPlacement="strip"`, SwatchPicker's and IconPicker's `label`. Each draws the
- * 11px label (and its `FieldHint`) on the same line as the labelled fields beside it,
- * over content WITHOUT a field's border round it. keksdose's transaction row has one
- * cell left that is not one of those groups: the location — a map, a "Locate me" and a
- * "Search" button — still built by hand as a `relative` cell, a floated `FieldLabel`
- * and a `pt-5` box (transaction-location-field.tsx), and so is the reconciled-status
- * stand-in (cleared-status-toggle.tsx, `ClearedStatusLocked`). This is the strip on its
- * own, the same component the three groups draw theirs with:
- *
- * ```tsx
- * <FieldStrip label={t("transactions.location")} className={className}>
- *   <div className="space-y-2">
- *     <PinMap … />
- *     <div className="flex flex-wrap gap-2"><Button …>Locate me</Button>…</div>
- *   </div>
- * </FieldStrip>
- * ```
- *
- * The label sits where a field's static label sits (`top-1`, `inset-x-3`, 11px in a
- * `leading-tight` line); the content starts 20px down, full width, clear of the label
- * and its "?". `className` styles the wrapper — the grid or flex item in the caller's
- * row — and merges after the strip's padding.
- *
- * Not a {@link Field}: that one sets a 14px label ABOVE its control, in flow, for a form
- * that labels its fields that way. This is for a row whose fields float their labels
- * inside them, where a label above would be the only one of its kind.
- */
-export function FieldStrip({
-  label,
-  hint,
-  help,
-  error,
-  disabled = false,
-  group = true,
-  className,
-  children,
-  ...rest
-}: FieldStripProps) {
-  const labelId = useId();
-  const messages = useFieldMessages({ hint, help, name: label, error });
-  const content = typeof children === "function" ? children({ labelId, describedBy: messages.describedBy }) : children;
-  // The caller's own description first, then the caption, then the error — the order
-  // every kit field reads them in.
-  const groupDescribedBy = [rest["aria-describedby"], messages.describedBy].filter(Boolean).join(" ") || undefined;
-  return (
-    // `rest` carries the caller's `ref` too (a plain prop in React 19): LabelStrip spreads
-    // its own rest onto the wrapper `<div>`, so the ref lands on the root.
-    <LabelStrip
-      {...rest}
-      {...(group
-        ? {
-            role: "group",
-            // An explicit name wins, as on the kit's labelled groups.
-            "aria-labelledby":
-              rest["aria-label"] === undefined && rest["aria-labelledby"] === undefined
-                ? labelId
-                : rest["aria-labelledby"],
-            "aria-describedby": groupDescribedBy,
-          }
-        : null)}
-      labelId={labelId}
-      label={label}
-      hint={messages.labelHint}
-      disabled={disabled}
-      className={className}
-    >
-      {content}
-      {messages.below}
-    </LabelStrip>
-  );
-}

package/src/components/field.tsx

@@ -1,206 +0,0 @@
-/**
- * A field group with its label ABOVE the control: label, control, hint, error.
- *
- * ```tsx
- * <Field label="IBAN" required hint="22 characters" error={errors.iban}>
- *   {(ids) => <Input {...ids} value={iban} onChange={…} />}
- * </Field>
- * ```
- *
- * The kit's `Input` and `Select` float their label inside the field, and the pickers
- * draw theirs the same way. That is the wrong shape for a control the kit did not
- * render, a radio group, a range slider, or a form that sets its labels above the
- * fields throughout — which is what kastlan's wizards are, and why it kept its own
- * `WizardField` after the kit dropped the one it had never rendered. This is that
- * group, with the wiring the old one left to the caller: the label names the control
- * through `htmlFor`, and the control is described by the hint and the error that are
- * actually on screen.
- *
- * ## Wiring
- *
- * Pass a function as `children` and it receives {@link FieldControlProps} — `id`,
- * `aria-describedby`, `aria-invalid` and `aria-required` — to spread on the control.
- * Plain children render as they are, for a control that wires itself (a checkbox that
- * carries its own label, a group with `aria-labelledby`); `htmlFor` then points the
- * label at the control's own id, and the hint and error are on screen but describe
- * nothing — the same as the `WizardField` this replaces.
- *
- * ## Decoupled
- *
- * Deliberately knows neither the wizard nor react-hook-form: `error` is a plain
- * value. Pass `wizard.fieldErrors.iban`, a step-local error, or
- * `fieldState.error?.message` from a react-hook-form `Controller` — the markup is the
- * same whichever of them gates the step, so a step can move between them without its
- * fields changing. (Inside a react-hook-form form, `RhfField` from `@eifi1/ui-kit/rhf`
- * does the same job with the ids taken from the form.)
- *
- * The error is NOT `role="alert"`, for the reason the kit's `error` prop gives (see
- * `useFieldError` in components/field-parts.tsx): it is read when focus reaches the control.
- */
-import { useId, type ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { hasContent } from "../lib/presence";
-import { fieldHelpMark, useInlineHint, type FieldHelpProps } from "./field-parts";
-import { Label } from "./field-base";
-
-/** What a `Field` hands its render-prop children, to spread on the control. */
-export interface FieldControlProps {
-  /** The id the label's `htmlFor` points at. */
-  id: string;
-  /** The ids of the hint and the error that are rendered, or `undefined` when
-   *  neither is. */
-  "aria-describedby": string | undefined;
-  /** `true` while the field has an error, `undefined` otherwise. */
-  "aria-invalid": true | undefined;
-  /** `true` when the field is `required`. The label's star is `aria-hidden`; this
-   *  is what a screen reader hears instead. */
-  "aria-required": true | undefined;
-}
-
-/**
- * The second argument of a `Field`'s render-prop children: what a GROUP needs that
- * a single control does not. `htmlFor` names an `<input>`, but a `<label>` pointing
- * at a `role="radiogroup"` div names nothing — so a group (a {@link ToggleGroup})
- * takes `aria-labelledby={labelId}` instead. Kept out of {@link FieldControlProps}
- * so the spread every existing control takes is unchanged.
- */
-export interface FieldRenderMeta {
-  /** The label element's id, or `undefined` when the field has no label. */
-  labelId: string | undefined;
-}
-
-/**
- * Where the label is visible. `"visible"` (default); `"sr-only"`: never drawn, still
- * the control's name; `"below-sm"` / `"below-md"` / `"below-lg"`: drawn only under
- * that breakpoint and screen-reader-only from it up.
- *
- * For table-like editors — kastlan's journal entry lines
- * (accounting/components/wizard/journal-entry-lines-step.tsx) — where a desktop
- * row sits under column headers that already say "Account" and "Amount", but the
- * phone layout stacks each line as a card and needs the labels back. The name stays
- * on the control at every width; only the ink changes.
- */
-export type FieldLabelVisibility = "visible" | "sr-only" | "below-sm" | "below-md" | "below-lg";
-
-// Literal class strings so Tailwind's scanner sees each one.
-const LABEL_VISIBILITY: Record<FieldLabelVisibility, string | undefined> = {
-  visible: undefined,
-  "sr-only": "sr-only",
-  "below-sm": "sm:sr-only",
-  "below-md": "md:sr-only",
-  "below-lg": "lg:sr-only",
-};
-
-export interface FieldProps extends FieldHelpProps {
-  /** The label above the control. Omit it for a group whose control is labelled
-   *  some other way; the hint and error still render. */
-  label?: ReactNode;
-  /** Draws the kit's required mark after the label, and sets `aria-required` on the
-   *  render-prop control. */
-  required?: boolean;
-  /** Muted helper text below the control. */
-  hint?: ReactNode;
-  /** The error below the control. `null`, `false` and `""` are no error — what a
-   *  `touched && errors.x` evaluates to on the happy path. */
-  error?: ReactNode;
-  /** The control's id. Defaults to a generated one; set it when the control carries
-   *  its own id (plain children). */
-  htmlFor?: string;
-  /** Dims the label with its control. */
-  disabled?: boolean;
-  /** The label's size: `sm` for a dense row, `md` otherwise. */
-  labelSize?: "sm" | "md";
-  /** See {@link FieldLabelVisibility}. */
-  labelVisibility?: FieldLabelVisibility;
-  /** Wrapper className. */
-  className?: string;
-  /** The control. A function receives {@link FieldControlProps} to spread on it, and
-   *  {@link FieldRenderMeta} (the label's id, for a group). */
-  children: ReactNode | ((control: FieldControlProps, meta: FieldRenderMeta) => ReactNode);
-}
-
-export function Field({
-  label,
-  required,
-  hint: hintProp,
-  help,
-  error,
-  htmlFor,
-  disabled,
-  labelSize,
-  labelVisibility = "visible",
-  className,
-  children,
-}: FieldProps) {
-  const generated = useId();
-  const id = htmlFor ?? `${generated}-control`;
-  const hintId = `${generated}-hint`;
-  const errorId = `${generated}-error`;
-  const labelId = `${generated}-label`;
-  // §4: a FieldHint under the control is its words at Large and on a touch screen, not
-  // a lone "?" (DUP-2, refactor audit 2026-10). A HelpPopover stays a "?".
-  // With a `help` (0.36) its "?" follows the label, and a FieldHint is its words at
-  // every size: the help's is the field's only "?".
-  const helpMark = fieldHelpMark(help, label);
-  const hint = useInlineHint(hintProp, helpMark !== undefined);
-  const hasHint = hasContent(hint);
-  const hasError = hasContent(error);
-  const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(" ");
-  const control: FieldControlProps = {
-    id,
-    "aria-describedby": describedBy || undefined,
-    "aria-invalid": hasError || undefined,
-    "aria-required": required || undefined,
-  };
-  const labelEl = label !== undefined && (
-    <Label
-      id={labelId}
-      htmlFor={id}
-      required={required}
-      disabled={disabled}
-      size={labelSize}
-      data-error={hasError || undefined}
-      className={cn("data-[error=true]:text-danger", LABEL_VISIBILITY[labelVisibility])}
-    >
-      {label}
-    </Label>
-  );
-  return (
-    <div
-      data-slot="field"
-      className={cn(
-        // `content-start`: in a grid row next to a taller item (one with a hint), a
-        // stretched Field would hand the extra height to its rows — the label grew,
-        // and the control sat lower than its neighbour's (showcase audit, #/forms).
-        "grid content-start gap-1.5",
-        // A hidden label is `position: absolute`; `relative` keeps its containing
-        // block here rather than the page's (see sr-only-containment.test).
-        labelVisibility !== "visible" && "relative",
-        className,
-      )}
-    >
-      {helpMark === undefined && labelEl}
-      {helpMark !== undefined && (
-        // The label and its "?" on one line; the "?" stays visible where the label is
-        // hidden (`labelVisibility`) — a hidden button would still take the focus.
-        <div className="flex items-center gap-1">
-          {labelEl}
-          <span className="flex shrink-0 items-center">{helpMark}</span>
-        </div>
-      )}
-      {typeof children === "function"
-        ? children(control, { labelId: label !== undefined ? labelId : undefined })
-        : children}
-      {hasHint && (
-        <p id={hintId} className="text-caption leading-tight text-muted">
-          {hint}
-        </p>
-      )}
-      {hasError && (
-        <p id={errorId} className="text-caption leading-tight text-danger">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}

package/src/components/file-button.tsx

@@ -1,295 +0,0 @@
-import { useId, useState } from "react";
-import type { ComponentPropsWithoutRef, DragEvent, ReactNode, Ref } from "react";
-import { cn } from "../lib/cn";
-import { hasContent } from "../lib/presence";
-import { useKitLabels } from "../i18n/kit-labels";
-import { Button } from "./button";
-import { Spinner } from "./spinner";
-import { Tooltip } from "./tooltip";
-import { useCommitReason, type CommitScope } from "./write-lock";
-import { DEFAULT_FILE_PICKER_LABELS } from "../hooks/use-file-picker-labels";
-import { useFilePicker, type UseFilePickerOptions } from "../hooks/use-file-picker";
-
-/**
- * A button that opens the file picker — the shape all three apps kept writing by hand
- * as a `<Button>` plus a hidden `<input type="file">` plus a ref between them (seven
- * copies in keksdose, two each in kastlan and lenkbank).
- *
- * Every copy had to remember the same four things, and each one forgot at least one:
- *
- *  1. **Reset the input after every pick.** A file input fires `change` only when its
- *     value CHANGES, so picking the same file twice in a row — the retry after a failed
- *     upload, the second photo of the same receipt — did nothing at all, which reads as
- *     a broken button. `value = ""` after each pick; always, not per call site.
- *  2. **`type="button"`.** `<Button>` does not set it, and inside a form a bare button
- *     submits the form before the picker opens.
- *  3. **Check the file.** `accept` filters the DIALOG, not the result: the dialog's
- *     "All files" switch, a drop, and a mobile share sheet all hand over whatever the
- *     user chose. So `accept` is re-checked here, along with `maxSize`, `maxFiles` and
- *     an optional `isValid`.
- *  4. **Say no without a toast.** A rejection is reported through `onReject`, with a
- *     translated message per file, and spoken through a live region — the kit does not
- *     decide how an app surfaces errors (keksdose's proposal §1 asked for exactly that).
- *
- * The part that is not a button — the hidden input, the check, the announcement — is
- * {@link useFilePicker}, for the case where the thing that opens the picker is someone
- * else's control (a card's "Add" action, a menu item, a second button for the camera).
- */
-
-// The picker's words, its screening and `useFilePicker` live in hooks/use-file-picker
-// since 0.34 (MOD-8, refactor audit 2026-10): useFileDrop is built on the hook, and a hook
-// importing a component module was a folder-level back-edge. Re-exported here, so every
-// import of them from this module keeps working.
-export { DEFAULT_FILE_PICKER_LABELS };
-export {
-  formatAccept,
-  judgePick,
-  matchesAccept,
-  screenFiles,
-  summariseRejections,
-  useFilePicker,
-} from "../hooks/use-file-picker";
-export type {
-  FilePickHandler,
-  FilePickerLabels,
-  FileRejection,
-  FileRejectionReason,
-  FileScreenOptions,
-  UseFilePickerOptions,
-  UseFilePickerReturn,
-} from "../hooks/use-file-picker";
-
-/* ── FileButton ──────────────────────────────────────────────────────────── */
-
-type ButtonOwnProps = ComponentPropsWithoutRef<typeof Button>;
-
-export interface FileButtonProps
-  extends
-    Omit<UseFilePickerOptions, "disabled">,
-    // `onDrop` & co. stay the caller's own when `droppable` is off; `type` is fixed to
-    // "button" (see 2. above) — a file trigger never submits a form.
-    Omit<ButtonOwnProps, "type" | "children" | "accept" | "capture" | "multiple"> {
-  /** The button's content — usually an icon and a word. It is the accessible name. */
-  children: ReactNode;
-  /** Busy: disabled, `aria-busy`, and a spinner before the content — for "uploading". */
-  pending?: boolean;
-  /** Also accept files dropped ON the button (lenkbank's "drop onto the button").
-   *  Off by default: a button that silently takes drops is a surprise on a page that
-   *  has a real drop target elsewhere. */
-  droppable?: boolean;
-  /**
-   * Show what was picked beside the button: the file's name, or "3 files selected"
-   * (`filePicker.selected`) for several — a native `<input type="file">` says this,
-   * and a bare button that takes a file and says nothing leaves the user to trust it.
-   * The read-out is a polite live region and describes the button, so it is heard
-   * when it changes and again on focus. It holds the last ACCEPTED pick: a refused
-   * file leaves it as it was. Off by default, so the button's layout is unchanged.
-   */
-  showFileName?: boolean;
-  /**
-   * Why picking is not available — {@link Button}'s `disabledReason`, with the picker's
-   * half added (keksdose K3): the button is `aria-disabled` but stays focusable, the
-   * reason is in the kit Tooltip and its description, a click opens no picker, and a
-   * `droppable` button takes no drop (the drag is still cancelled, so the browser does
-   * not navigate to the file). Wins over `disabled`, as on Button.
-   */
-  disabledReason?: ReactNode;
-  /**
-   * This pick COMMITS — an upload that starts on pick, an attachment saved at once.
-   * Under a locked {@link WriteLockProvider} it takes the `disabledReason` path with
-   * the lock's reason (which wins over one of its own). No provider, or an unlocked
-   * one: no effect. A picker that only fills a form the user saves later is not a
-   * commit, and is left live — the form's Save carries the lock.
-   */
-  commit?: CommitScope;
-  /** The `<button>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it
-   *  was `forwardRef`. */
-  ref?: Ref<HTMLButtonElement>;
-}
-
-/**
- * {@link useFilePicker} behind a {@link Button}: `variant` and every other button prop
- * pass through, and the ref is the `<button>` (so `ref.current.click()` opens the
- * picker from elsewhere too).
- *
- * ```tsx
- * <FileButton accept="image/*,application/pdf" capture="environment" variant="secondary"
- *   maxSize={10_000_000} onFiles={([f]) => upload(f)} onReject={([r]) => setError(r.message)}>
- *   <Camera aria-hidden /> Photograph receipt
- * </FileButton>
- * ```
- */
-export function FileButton({
-  ref,
-  accept,
-  multiple,
-  capture,
-  maxSize,
-  maxFiles,
-  isValid,
-  invalidMessage,
-  onFiles,
-  onPick,
-  onReject,
-  labels,
-  pending,
-  droppable,
-  showFileName = false,
-  disabled,
-  disabledReason: ownDisabledReason,
-  commit,
-  children,
-  className,
-  onClick,
-  onDragEnter,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  ...rest
-}: FileButtonProps) {
-  const disabledReason = useCommitReason(commit, ownDisabledReason);
-  const locked = hasContent(disabledReason);
-  const inert = Boolean(disabled || pending);
-  // What takes no files: busy, disabled, or locked with a reason. Kept apart from
-  // `inert`, which is what reaches the button's NATIVE `disabled` — a locked button
-  // stays focusable (Button's `disabledReason` path), so `locked` must not get there.
-  const refusing = inert || locked;
-  const [picked, setPicked] = useState<readonly File[]>([]);
-  const pickedId = useId();
-  const pickerLabels = useKitLabels("filePicker", DEFAULT_FILE_PICKER_LABELS, labels);
-  const picker = useFilePicker({
-    accept,
-    multiple,
-    capture,
-    maxSize,
-    maxFiles,
-    isValid,
-    invalidMessage,
-    onFiles: showFileName
-      ? (files) => {
-          setPicked(files);
-          onFiles?.(files);
-        }
-      : onFiles,
-    onPick,
-    onReject,
-    labels,
-    disabled: refusing,
-  });
-  const pickedText =
-    picked.length === 0
-      ? ""
-      : picked.length === 1
-        ? picked[0].name
-        : pickerLabels.selected(picked.length, picked[0].name);
-  const [dragOver, setDragOver] = useState(false);
-
-  const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
-  // Only when `droppable`: otherwise the caller's own handlers are passed untouched.
-  const dropHandlers = droppable
-    ? {
-        onDragEnter: (e: DragEvent<HTMLButtonElement>) => {
-          onDragEnter?.(e);
-          if (!hasFiles(e)) return;
-          e.preventDefault();
-          if (!refusing) setDragOver(true);
-        },
-        onDragOver: (e: DragEvent<HTMLButtonElement>) => {
-          onDragOver?.(e);
-          if (!hasFiles(e)) return;
-          // Always cancel for a file drag, busy or not: an uncancelled drop makes the
-          // browser NAVIGATE to the file, which loses the page.
-          e.preventDefault();
-          e.dataTransfer.dropEffect = refusing ? "none" : "copy";
-        },
-        onDragLeave: (e: DragEvent<HTMLButtonElement>) => {
-          onDragLeave?.(e);
-          if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
-          setDragOver(false);
-        },
-        onDrop: (e: DragEvent<HTMLButtonElement>) => {
-          onDrop?.(e);
-          if (!hasFiles(e)) return;
-          e.preventDefault();
-          setDragOver(false);
-          picker.take(e.dataTransfer.files);
-        },
-      }
-    : { onDragEnter, onDragOver, onDragLeave, onDrop };
-
-  // `Button` is a plain function component; under React 19 `ref` is an ordinary prop
-  // and reaches the `<button>` through its `...rest`. Its props type just does not
-  // declare it, hence the widening here rather than a second button implementation.
-  const refProp = { ref } as { ref?: Ref<HTMLButtonElement> };
-
-  const button = (
-    <Button
-      {...rest}
-      {...refProp}
-      {...dropHandlers}
-      type="button"
-      disabled={inert}
-      // Resolved here rather than passed on as `commit`: the picker above has to know
-      // it is locked too, and one resolution keeps the two from disagreeing.
-      disabledReason={locked ? disabledReason : undefined}
-      aria-busy={pending || undefined}
-      aria-describedby={
-        showFileName && pickedText
-          ? [rest["aria-describedby"], pickedId].filter(Boolean).join(" ")
-          : rest["aria-describedby"]
-      }
-      data-drag-over={dragOver || undefined}
-      className={cn(
-        // A live drag gets the focus ring's colour as a ring: "let go here", in the
-        // same vocabulary the button already uses for "you are here".
-        dragOver && "ring-2 ring-brand",
-        // Beside a long file name it is the NAME that gives way, never the button.
-        showFileName && "shrink-0",
-        className,
-      )}
-      onClick={(e) => {
-        onClick?.(e);
-        if (!e.defaultPrevented) picker.open();
-      }}
-    >
-      {/* `label={null}`: the spinner is decoration here — `aria-busy` says the same
-          thing on the button, and a spoken "Loading" would run into its name. */}
-      {pending && <Spinner label={null} className="size-4" />}
-      {children}
-    </Button>
-  );
-
-  if (!showFileName) {
-    return (
-      <>
-        {button}
-        {picker.element}
-      </>
-    );
-  }
-  return (
-    // One inline row, so the name sits beside the button wherever the button sits; the
-    // name truncates rather than pushing the row wider (at Normal: from Large up it wraps,
-    // `truncate-until-large`, text size §10.17), and the full list is in the
-    // kit's own Tooltip — not a native `title` (0.16.0 shipped one: the one-tooltip rule
-    // since keksdose dev#523, and a title never opens on touch). Lazy, so the closed
-    // bubble adds nothing to the read-out's text.
-    <span className="inline-flex max-w-full min-w-0 items-center gap-2">
-      {button}
-      {/* The live region is the OUTER span and never remounts: a Tooltip with an empty
-          label renders no wrapper, so wrapping the region itself would swap its element
-          the moment the first file arrives — and a fresh live region may not announce. */}
-      <span
-        id={pickedId}
-        aria-live="polite"
-        data-slot="file-button-name"
-        className="flex min-w-0 text-sm text-secondary"
-      >
-        <Tooltip label={picked.map((f) => f.name).join(", ")} lazy className="min-w-0">
-          <span className="block truncate-until-large">{pickedText}</span>
-        </Tooltip>
-      </span>
-      {picker.element}
-    </span>
-  );
-}