@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/components/ui.d.ts

@@ -1,730 +1,53 @@
-import * as react from 'react';
-import { ButtonHTMLAttributes, Ref, ReactNode, SelectHTMLAttributes, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
-import { TooltipSide } from './tooltip.js';
+import 'react';
+import './tooltip.js';
+export { B as Button, a as ButtonClassesOptions, b as ButtonLinkProps, c as ButtonProps, d as ButtonSize, e as ButtonTone, f as ButtonVariant, g as Card, h as CardAction, i as CardActionProps, j as CardContent, k as CardContentProps, l as CardDescription, m as CardDescriptionProps, n as CardFooter, o as CardFooterProps, p as CardHeader, q as CardHeaderProps, r as CardProps, s as CardTitle, t as CardTitleProps, u as CardTone, P as DEFAULT_PASSWORD_REVEAL_LABELS, S as DEFAULT_TABS_LABELS, V as EmptyState, W as EmptyStateProps, X as FIELD_BASE, Y as FIELD_DISPLAY, Z as FIELD_FLOATING_PAD, _ as FIELD_INVALID, $ as FIELD_TRIGGER, a0 as FIELD_WRITABLE_LOOK, a1 as FLOATING_INPUT_CLASS, a2 as FLOATING_LABEL_CLASS, a3 as FLOATING_LABEL_STATIC, a4 as FieldChevron, a5 as FieldChevronProps, a6 as FieldHint, a7 as FieldHintProps, a8 as FieldLabel, a9 as FieldLabelProps, ah as FloatingField, ai as FloatingFieldProps, ap as IconButton, aq as IconButtonGlyphSize, ar as IconButtonProps, as as IconButtonSize, at as IconButtonTone, au as IconButtonVariant, av as Input, aw as InputProps, az as Label, aB as LabelProps, aD as PHONE_QUERY, aE as PasswordRevealLabels, aG as Select, aH as SelectProps, aI as Spinner, aJ as SpinnerProps, aL as TabItem, aM as Tabs, aN as TabsLabels, aO as TabsProps, aP as Textarea, aQ as TextareaProps, aY as buttonClasses, b0 as resolvePasswordRevealLabels } from '../kit-labels-v3biUF1L.js';
 import '../hooks/use-anchored-rect.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}. */
-    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.
- */
-declare function buttonClasses(variant?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
-/**
- * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS
- * it unless you pass `type="button"`. Kept native on purpose — a form's own submit
- * button relies on it, and changing the default would silently stop those forms from
- * submitting. Pass `type="button"` for every other action in a form (keksdose had six
- * link buttons submitting their form).
- */
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    /** `md` (default) is the page's action button. `sm` is the compact one — 12px text
-     *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a
-     *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand
-     *  there). Every variant takes either size. */
-    size?: ButtonSize;
-    /** In a flex row next to a taller labelled field, fill the field's height so the
-     *  two line up. No effect outside a flex row. */
-    stretch?: boolean;
-    /** The `<button>` element. React 19 passes `ref` to a function component as an
-     *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
-     *  declared here only because `ButtonHTMLAttributes` does not carry it. */
-    ref?: Ref<HTMLButtonElement>;
-    /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or
-     *  `danger` (quiet, `--danger` on hover). 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, tone, pressed, disabledReason, className, onClick, ...rest }: ButtonProps): react.JSX.Element;
-type IconButtonSize = "lg" | "md" | "sm" | "xs" | "2xs";
-type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info";
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Any {@link ButtonVariant}, or `overlay` — a round translucent disc for use over
-     *  an image (see `ICON_BUTTON_OVERLAY`). */
-    variant?: ButtonVariant | "overlay";
-    /** Box size: lg = 44px (a phone's touch target), md = 36px (matches the top bar),
-     *  sm = 32px — all three with a 20px icon;
-     *  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;
-    /** 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
-     *  turning a coloured tone's resting look the other way. */
-    tone?: IconButtonTone;
-    /**
-     * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:
-     * `true` is placeholder grey at rest and the tone's colour on hover and focus;
-     * `false` wears the tone's colour at rest. Left out, each tone keeps its own
-     * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by
-     * definition) and `default` (no tone).
-     *
-     * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where
-     * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one
-     * "delete all" and a touch screen that never hovers, so it painted rose by hand.
-     * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated
-     * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an
-     * `emphasis` scale: there are exactly two resting looks, every coloured tone has
-     * both, and which one fits is a question about the SITE (alone or repeated, touch or
-     * pointer), not about the tone — so it is one switch the family shares.
-     */
-    quiet?: boolean;
-    /**
-     * Make it a toggle button. `true` sets `aria-pressed="true"` and draws the "on" look
-     * (brand glyph on the quiet brand fill); `false` sets `aria-pressed="false"` with the
-     * normal look, so a screen reader still hears a toggle that is off. Left out, it is
-     * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller
-     * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own
-     * brand colour over a ghost button today. Keep the `aria-label` the same in both
-     * states ("Share budget"): the pressed state already says whether it is on.
-     */
-    pressed?: boolean;
-    /** Keep the click (and the Enter/Space that produces it) from reaching an
-     *  ancestor's handler — for an action inside a clickable table row or card.
-     *
-     *  **Not a licence to put this inside another `<button>`.** HTML forbids any
-     *  interactive content, and any element with a `tabindex`, inside a button — so
-     *  the `<span role="button" tabIndex={0}>` workaround is invalid too — and ARIA
-     *  makes a button's children presentational, so a screen reader flattens the
-     *  inner one into the outer one's name and it cannot be reached at all. Make the
-     *  row's main action a button that fills the row and put this one BESIDE it, on
-     *  top:
-     *
-     *  ```tsx
-     *  <div className="relative">
-     *    <button className="w-full pe-16 …" onClick={open}>…row…</button>
-     *    <div className="absolute inset-y-0 end-2 flex items-center gap-0.5">
-     *      <IconButton size="xs" tone="danger" aria-label="Delete" onClick={remove}>
-     *        <Trash2 />
-     *      </IconButton>
-     *    </div>
-     *  </div>
-     *  ```
-     *
-     *  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;
-}
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
-declare const FIELD_BASE: string;
-/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a
- *  reason other than "you may not edit this". Attribute-scoped for the same reason
- *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge
- *  cannot make the later one win. */
-declare const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-[var(--bg-surface)] [&[readonly]]:text-[var(--text-primary)]";
-declare const FIELD_FLOATING_PAD = "pt-4 pb-1";
-declare const FIELD_INVALID = "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
-declare const FLOATING_INPUT_CLASS: string;
-/** The phone breakpoint the display treatment below keys off — the same one the
- *  numpad sheet uses, kept in one place so the two can't drift apart. */
-declare const PHONE_QUERY = "(max-width: 767px)";
-/**
- * The PHONE display treatment (Keksdose feedback #176, carried across the entry
- * forms by #179): the field chrome removed so the ONE input a form is actually
- * about reads as the thing itself, not as another boxed row in a stack.
- *
- * Every control that takes `variant="display"` — {@link Input}, `NumberInput`,
- * `AmountInput` — means exactly the same thing by it: the treatment applies below
- * {@link PHONE_QUERY} and the field is untouched above it, so a caller never has
- * to ask the viewport, and a form can't end up half-treated across breakpoints.
- *
- * What stays, deliberately:
- *  - A hairline baseline. With the box gone something still has to say "you can
- *    type here"; it takes the brand colour on focus, where a bordered field would
- *    light its whole outline. Each edge is set exactly once (`border-x-0
- *    border-t-0 border-b`) so the rule can't hinge on utility order.
- *  - The muted placeholder colour, because a display field is usually empty at
- *    the moment it matters most and has nothing else to show.
- *  - The label, moved to `sr-only` rather than dropped: display type is legible
- *    to the eye, not to a screen reader.
- *
- * Size and weight are NOT here — an amount wants display type, a subject line
- * wants a heading — so each control adds its own on top.
- */
-declare const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
-declare const FIELD_TRIGGER: string;
-/** An alias rather than an interface: the chevron adds nothing of its own to an
- *  `<svg>`'s props, and an interface declaring no members is the same type wearing a
- *  name that suggests otherwise. */
-type FieldChevronProps = Omit<ComponentPropsWithoutRef<"svg">, "children">;
-/** The dropdown chevron, shared by the native {@link Select} and every custom
- * {@link FIELD_TRIGGER} control.
- *
- * Absolutely positioned and centred on the FIELD box. As an ordinary flex child
- * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)
- * pushes that box's midline down — so a labelled currency/multi-select chevron
- * sat visibly lower than the native select's right beside it (feedback #400).
- * Pair it with `pe-9` on the trigger so the value can't run underneath. At the
- * inline END, not the right: a right-to-left form reads the value from the right,
- * and a chevron parked on top of its first word hid exactly the part that says
- * what was picked. */
-declare function FieldChevron({ className, ...rest }: FieldChevronProps): react.JSX.Element;
-declare const FLOATING_LABEL_CLASS: string;
-declare const FLOATING_LABEL_STATIC: string;
-/**
- * The one place that assembles a labelled field: a `relative` wrapper around the
- * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`
- * for controls that always have a value (selects); omit it for free-text fields whose
- * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the
- * dropdown controls that need a ref + menu keep their own wrapper but the same label
- * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.
- */
-interface FloatingFieldProps extends ComponentPropsWithoutRef<"div"> {
-    htmlFor?: string;
-    label?: ReactNode;
-    staticLabel?: boolean;
-    /** Keep the label in the accessibility tree but out of the layout — what
-     *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no
-     *  field left would have nothing to float in. */
-    srOnlyLabel?: boolean;
-    /** Something interactive that belongs to the LABEL rather than to the value —
-     *  in practice a {@link FieldHint} "?" (dev#468). It is rendered in a flex row
-     *  with the label, so it is centred on the label's line by the layout instead
-     *  of by a hand-tuned `top-…`, and it can never drift when the type changes.
-     *
-     *  It rides an ANIMATED label too, and the two cases place it differently on
-     *  purpose. A static label has a field-wide strip to itself, so the hint sits
-     *  at the far end of it and a long label truncates into the gap. An animated
-     *  one belongs to a control with something at the end edge of the field — a
-     *  calculator, a stepper — so the hint follows the label instead, and it is
-     *  the label that gives way (steering-design feedback #48). */
-    hint?: ReactNode;
-    children: ReactNode;
-}
-declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyLabel, hint, children, ...rest }: FloatingFieldProps): react.JSX.Element;
-/**
- * The "?" that explains a field, on the field's own label line (dev#468).
- *
- * Pass it to a labelled {@link Select} / {@link Input} as `hint`. It exists as a
- * component rather than as a snippet each form repeats because the previous
- * version was exactly that snippet — an absolutely-positioned button whose
- * `top-1.5` was one guess at where an 11px label sits — and the reporter's
- * follow-up was *"question mark is not centered. Is it part of the hoc?
- * positioning problems seem quite frequently."* It was not part of the HOC. Now
- * it is, and there is one place left where the answer can be wrong.
- *
- * A `<button>` rather than a bare icon: hover alone puts the explanation out of
- * reach of a keyboard and of every touch device, and the tooltip shows on focus
- * too. The text is also its accessible name, so a screen reader gets it without
- * the bubble ever opening.
- */
-interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
-    /** The explanation. It is both the tooltip's text and, by default, the button's
-     *  accessible name, so a screen reader gets it without the bubble ever opening. */
-    label: string;
-    /** Default `"start"`: before the hint in the reading direction (the left in LTR, the
-     *  right in RTL). `left` / `right` stay physical. */
-    side?: TooltipSide;
-}
-declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): react.JSX.Element;
-/**
- * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
- * button not a labelable input). Same placement as {@link FloatingField}'s static label,
- * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
- */
-interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
-    children: ReactNode;
-}
-declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
-interface LabelProps extends ComponentPropsWithoutRef<"label"> {
-    /** Draw the required mark after the text. The mark is `aria-hidden`: what a
-     *  screen reader hears is the control's own `required` / `aria-required`, which
-     *  the caller still sets — a "star" read out as the last word of every name is
-     *  noise, and a control that is not marked required is not required however its
-     *  label looks. */
-    required?: boolean;
-    /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */
-    size?: "sm" | "md";
-    /** Dim the label with its control. A label ABOVE its field is not the field's
-     *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */
-    disabled?: boolean;
-}
-/**
- * The label ABOVE a field, for the places a floating label does not fit: a control
- * the kit did not render (a third-party picker, a range slider, a group of radios),
- * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels
- * above its fields throughout.
- *
- * A new component rather than a mode of {@link FieldLabel}, because the two share
- * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a
- * trigger's `relative` box and has to stay exactly that for every dropdown that
- * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,
- * that a click focuses the control through. Spacing below it belongs to the caller's
- * layout (`space-y-1.5` on the pair, typically), as it would for any block.
- */
-declare function Label({ required, size, disabled, className, children, ...rest }: LabelProps): react.JSX.Element;
-/** The two names the password reveal toggle can wear. See {@link Input}. */
-interface PasswordRevealLabels {
-    /** While the value is hidden — activating the toggle will show it. */
-    show: string;
-    /** While the value is shown. */
-    hide: string;
-}
-declare const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels;
-/** Caller's labels over the English defaults — the same shape as
- *  `resolveDataTableLabels`, so a consumer translates every kit string one way. */
-declare function resolvePasswordRevealLabels(partial?: Partial<PasswordRevealLabels>): PasswordRevealLabels;
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    label?: ReactNode;
-    /** Classes for the `<input>` itself, as distinct from `className`, which
-     *  styles the field WRAPPER once a `label` turns this into a FloatingField.
-     *  Without it a labelled Input had no way to reach its own element — so
-     *  `tabular-nums` on a numeric text field, which NumberInput has supported
-     *  all along through the identically named prop, was simply unavailable. */
-    inputClassName?: string;
-    /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a
-     *  heading. For the one field a form is about (a feedback subject, an account
-     *  name), never for a stack of them. Labelled fields only: the label is what
-     *  the placeholder falls back to once it goes `sr-only`. */
-    variant?: "field" | "display";
-    /** The field is required and unanswered, or holds something that cannot be
-     *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn
-     *  since feedback #235.
-     *
-     *  It exists here because writing `aria-invalid` by hand did NOT do this. The
-     *  attribute spreads onto the element and nothing styles it — there is no
-     *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —
-     *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader
-     *  and painted the field exactly as if it were fine. Setting the prop sets the
-     *  attribute too, so the two can no longer be spelled separately. */
-    invalid?: boolean;
-    /** What is wrong with the value, in the caller's own words ("That IBAN has 21
-     *  digits"). Rendered under the field, pointed at by the control's
-     *  `aria-describedby` — MERGED with any the caller already passed — and implies
-     *  `invalid`, so the field paints as well as announces. `invalid` alone still
-     *  covers the case where the message lives elsewhere. See {@link useFieldError}. */
-    error?: ReactNode;
-    /** Names for the password reveal toggle, English by default — it is the one
-     *  string this component renders on its own behalf, and a German form was
-     *  reading it out in English. See {@link PasswordRevealLabels}. */
-    passwordLabels?: Partial<PasswordRevealLabels>;
-}
-declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
-    label?: ReactNode;
-    /** See {@link Input}'s `invalid`. */
-    invalid?: boolean;
-    /** See {@link Input}'s `error`. */
-    error?: ReactNode;
-    /** A {@link FieldHint} for the label line — see {@link FloatingField}. */
-    hint?: ReactNode;
-    /**
-     * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
-     * 36px field stands a head taller than the buttons beside it. `"md"` (default)
-     * is the field every form uses. Unlabelled selects only — a floating label needs
-     * the tall box to float in, so a labelled Select ignores `"sm"`.
-     *
-     * A NUMBER is still the native attribute (the rows of a list box) and is passed
-     * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as
-     * with `multiple`) the browser draws a list box, and the Select drops its chevron
-     * and the end padding reserved for it.
-     */
-    size?: "sm" | "md" | number;
-    /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box
-     *  the chevron is positioned against — so it could set a width and nothing
-     *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */
-    selectClassName?: string;
-}
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: ReactNode;
-    /** See {@link Input}'s `invalid`. */
-    invalid?: boolean;
-    /** See {@link Input}'s `error`. */
-    error?: ReactNode;
-}
-declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
-interface CardProps extends ComponentPropsWithoutRef<"div"> {
-    children: ReactNode;
-    /**
-     * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the
-     * card spans edge-to-edge. Chrome reappears at the `md` breakpoint. Use for primary
-     * content cards on data pages; leave off for centered dialog/panel cards.
-     */
-    flush?: boolean;
-    /**
-     * `inset`: a panel INSIDE a card rather than a card on the page — the raised
-     * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since
-     * it is already sitting on the card that has them. Lenkbank's results blocks and
-     * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of
-     * their own. Unlike the default card it carries its padding, because every one of
-     * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:
-     * an inset panel never runs edge to edge.
-     */
-    variant?: "default" | "inset";
-}
-declare function Card({ className, children, flush, variant, ...rest }: CardProps): react.JSX.Element;
-/** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a
- *  `data-slot` and a padding rhythm — so each name is an alias rather than an empty
- *  interface pretending to be more. They exist so a consumer's own wrapper can say
- *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */
-type CardHeaderProps = ComponentPropsWithoutRef<"div">;
-type CardTitleProps = ComponentPropsWithoutRef<"div">;
-type CardDescriptionProps = ComponentPropsWithoutRef<"div">;
-type CardActionProps = ComponentPropsWithoutRef<"div">;
-type CardContentProps = ComponentPropsWithoutRef<"div">;
-type CardFooterProps = ComponentPropsWithoutRef<"div">;
-declare function CardHeader({ className, ...props }: CardHeaderProps): react.JSX.Element;
-declare function CardTitle({ className, ...props }: CardTitleProps): react.JSX.Element;
-declare function CardDescription({ className, ...props }: CardDescriptionProps): react.JSX.Element;
-declare function CardAction({ className, ...props }: CardActionProps): react.JSX.Element;
-declare function CardContent({ className, ...props }: CardContentProps): react.JSX.Element;
-declare function CardFooter({ className, ...props }: CardFooterProps): react.JSX.Element;
-/** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.
- *  The ring is drawn with a border, so there is nothing inside it to put children in. */
-interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
-    /**
-     * What the spinner means, for a screen reader. Default: `common.loading` from the
-     * {@link UiKitProvider}, else "Loading…".
-     *
-     * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it
-     * whenever words are already there: beside visible "Loading…" text (otherwise it is
-     * announced twice), inside a labelled button (otherwise its text joins the button's
-     * name), or inside a live region of the app's own (otherwise that region and this
-     * one both announce).
-     */
-    label?: string | null;
-}
-/**
- * A spinning ring that also SAYS it is loading.
- *
- * It used to be a bordered span and nothing else, so a reader met no element at all
- * where a sighted user saw the page working — or, beside an emptied list, met the
- * empty list and concluded there was nothing there. `role="status"` makes it a polite
- * live region, and the text inside is what that region announces. Text rather than
- * `aria-label`: a live region's announcement is its CONTENT, and several readers
- * ignore a name on one.
- *
- * `relative` so the `sr-only` text has a local containing block (see
- * sr-only-containment.test). Where the words are already on screen, pass
- * `label={null}`: announcing is right for a spinner standing alone and wrong for one
- * beside text, inside a button, or inside the app's own live region.
- */
-declare function Spinner({ className, label, ...rest }: SpinnerProps): react.JSX.Element;
-interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
-    /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
-     *  every empty state in three apps look like the same thing — so there is no
-     *  `children` slot to put arbitrary content in. The two slots below are the only
-     *  other things an empty state has turned out to need, and each has a fixed place. */
-    /** Nodes rather than strings, so a title can carry a code, a link or an emphasised
-     *  word — keksdose's error boundary shows the error's name in `<code>` — while the
-     *  box still sets the type. */
-    title: ReactNode;
-    hint?: ReactNode;
-    /**
-     * Render the title as a heading of this level. Left out it is a `<div>`, as before:
-     * most empty states are a message inside a section that already has its heading.
-     * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing
-     * when it moved onto EmptyState — so the page's heading outline lost the one line
-     * that says what happened. Only the element changes; the look is the box's.
-     */
-    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
-    /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
-     *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
-     *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,
-     *  because the title already says what it shows. */
-    icon?: ReactNode;
-    /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its
-     *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they
-     *  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";
-}
-declare function EmptyState({ title, hint, icon, action, headingAs, variant, tone, className, ...rest }: EmptyStateProps): react.JSX.Element;
-/** One tab of a {@link Tabs} strip. */
-interface TabItem<T extends string> {
-    id: T;
-    /** A ReactNode so a tab can pair an icon with text. */
-    label: ReactNode;
-    /** Optional trailing node (e.g. a count pill). */
-    badge?: ReactNode;
-    /** Marks a tab that IS a route — see {@link TabsProps}. */
-    href?: string;
-    /** Leading decoration: an icon, or the colour swatches of the lines this tab
-     *  draws in a chart above the strip. Hidden from assistive tech — it repeats
-     *  what the label says, or it says something the label must say instead. */
-    icon?: ReactNode;
-    /** A second, smaller line under the label — the one fact that tells two tabs
-     *  with similar labels apart ("80 km/h", "Level 3"). Part of the tab's name. */
-    detail?: ReactNode;
-    /** A tab that exists as a slot with nothing in it yet, drawn with a dashed
-     *  outline so a gap in a sequence looks like a gap. Visual only: say "empty" in
-     *  the label or `detail` if a screen reader needs to know. */
-    empty?: boolean;
-    /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a
-     *  workbook cannot be without. Default: removable. */
-    removable?: boolean;
-    /** Plain-text name for the labels the strip composes about this tab ("Remove
-     *  …"), for when `label` is not a string. Default: `label` if it is a string,
-     *  else the id. */
-    name?: string;
-}
-/** The strings the strip renders on its own behalf — only when it can add or
- *  remove tabs. */
-interface TabsLabels {
-    /** The "add" button's visible text when the caller gives no `addLabel`. */
-    add: string;
-    /** Accessible name of a tab's × — "Remove <tab>". */
-    remove: (tab: string) => string;
-}
-declare const DEFAULT_TABS_LABELS: TabsLabels;
-/**
- * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything
- * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an
- * `aria-describedby` — lands there. `onChange` is omitted from the div's props because
- * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and
- * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up
- * through `panelId`, which is the whole point of that prop.
- */
-interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
-    /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an
-     *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:
-     *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose
-     *  feedback #451), while a plain click still goes through `onChange` and stays
-     *  client-side. Tabs that only flip local state leave it unset — a link to a URL
-     *  that does not select the tab would be worse than no link. */
-    tabs: TabItem<T>[];
-    active: T;
-    onChange: (id: T) => void;
-    className?: string;
-    /** Let the strip WRAP onto as many rows as it needs below `md`, instead of
-     *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.
-     *  Keksdose live #262: ten reports on a 406px screen showed about three, and the
-     *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.
-     *  *"I would rather keep the tabs but have multirow tabs depending on the screen
-     *  size, I will not loose the function to see all reports at once and navigate by
-     *  single click rather by double click."*
-     *
-     *  The active MARKER has to change with the layout, which is why this cannot be
-     *  done from a call site with a `className`: the default marker is a `border-b-2`
-     *  underline riding the container's own bottom rule, and a tab sitting in a row
-     *  that does not touch that rule cannot wear it — every row but the last would
-     *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a
-     *  pixel into the row beneath it. A wrapped strip marks the active tab with a
-     *  filled brand chip instead, which is also the only thing findable at a glance
-     *  among ten same-weight labels on three rows.
-     *
-     *  From `md` up NOTHING changes: same single-line underline strip, same paddings,
-     *  same colours as every other strip in the app.
-     *
-     *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)
-     *  already fit a phone row, and turning those into chips would be an unrequested
-     *  redesign of three other pages. */
-    wrap?: boolean;
-    /**
-     * Accessible name for the `role="tablist"` container. Every tab carries its own
-     * text, so this names the GROUP, not the tabs; leave it unset where a visible
-     * heading immediately above already does that job.
-     *
-     * @deprecated Pass `aria-label` instead. This kit had three spellings for one idea
-     * — `ariaLabel`, `aria-label` and this `label` — and settled on the DOM one, which
-     * is also the one that arrives for free now that the strip spreads its rest props.
-     * `label` still works and is unchanged; it names the strip only when `aria-label`
-     * is absent.
-     */
-    label?: string;
-    /**
-     * `id` of the element the caller renders the open tab's content into — the missing
-     * half of `role="tab"`. A tab that controls nothing is a tab in name only: a screen
-     * reader announces "tab, 2 of 5" and then has no way to take the user to what it
-     * opened, and no way back.
-     *
-     * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the
-     * content lives wherever the caller put it — three Keksdose pages render it in a
-     * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route
-     * (`href`), in which case the panel is a whole page this component never sees.
-     * Wrapping `children` here would mean either moving that content into the strip's
-     * subtree — a layout change on every page that uses tabs — or shipping a wrapper
-     * that only some callers could use. So the two halves are joined by an id instead.
-     *
-     * Wire the other end yourself:
-     *
-     * ```tsx
-     * <Tabs tabs={tabs} active={active} onChange={setActive} panelId="report-panel" />
-     * <div id="report-panel" role="tabpanel" aria-labelledby="report-panel-tab" tabIndex={-1}>
-     * ```
-     *
-     * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the
-     * closed tabs' panels are not in the document, and a dangling `aria-controls`
-     * describes a tab as opening something that is not there.
-     */
-    panelId?: string;
-    /**
-     * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab
-     * (only on the open one with `removeOn="active"`).
-     *
-     * The × is on the open tab only — a row of tabs each carrying one is a row of
-     * things to hit by accident, and the tab you can remove should be the one you
-     * are looking at — but its room is reserved on every removable tab, so opening a
-     * tab never widens it and never pushes the rest of the strip along (lenkbank
-     * feedback #72). It is named "Remove <tab>" and is not a tab stop of its own: the
-     * strip stays one stop, and the keyboard path is Delete (announced through
-     * `aria-keyshortcuts`), which removes whichever tab has focus (see `removeOn`).
-     *
-     * The strip only ASKS: it calls this, and the tab goes when the caller drops it
-     * from `tabs` — after a confirmation, a request, whatever it needs. When it does,
-     * focus that was on the removed tab (or its ×) moves to the open tab if the
-     * removed one was open, else to its neighbour, instead of falling to the page.
-     */
-    onRemove?: (id: T) => void;
-    /**
-     * Which tabs the Delete key removes.
-     *
-     * - `"every"` (default): any focused removable tab — the ARIA pattern's reading.
-     * - `"active"`: only the OPEN tab, the same one that wears the ×. For a strip whose
-     *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement
-     *   sheet at once), so arrowing across the strip and pressing Delete cannot take
-     *   out a sheet the user is not looking at. Delete on a closed tab does nothing,
-     *   and only the open tab announces the shortcut (`aria-keyshortcuts`).
-     *
-     * Either way the × is drawn on the open tab only and its room stays reserved on
-     * every removable tab, so the strip never relayouts when the selection moves.
-     */
-    removeOn?: "every" | "active";
-    /** Renders an "add" button after the last tab, outside the tablist — it is an
-     *  action, not a tab, and a tablist may own only tabs. */
-    onAdd?: () => void;
-    /** The add button's text. Say what is added — "Add loop", "Add report" says
-     *  more than "Add". Default: `tabs.add` from the {@link UiKitProvider}. */
-    addLabel?: string;
-    /** Overrides for this strip's strings. See {@link TabsLabels}. */
-    labels?: Partial<TabsLabels>;
-    /** An add or a remove is in flight: the × and the add button are disabled and
-     *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */
-    busy?: boolean;
-    /**
-     * `"vertical"`: the same strip as a SIDE NAV — one item per row, the open one
-     * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation="vertical"` on
-     * the tablist. For keksdose's admin page and settings page, which each hand-built
-     * the identical sidebar with none of this strip's keyboard, roving tab stop or
-     * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,
-     * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the
-     * badge moves to the row's end.
-     *
-     * **On a phone ({@link PHONE_QUERY}) it becomes the horizontal strip**, `wrap` and
-     * all, rather than staying a column. A side nav only works beside its content; on
-     * a phone it has to go ABOVE it, and eight full-width rows there push the panel
-     * the user picked below the fold on every visit — the two keksdose pages both
-     * collapsed theirs into a scrolling row by hand for exactly that reason. The
-     * orientation is switched in JavaScript, not with `md:` classes, so the
-     * `aria-orientation` a screen reader hears and the arrow keys that work always
-     * match the layout on screen. The caller's own two-column layout has to stack at
-     * the same breakpoint (`md:grid-cols-[14rem_1fr]`).
-     */
-    orientation?: "horizontal" | "vertical";
-}
-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 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 };
+import '../lib/clipping.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+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 './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.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 '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';