@med-o/ui 0.0.0-stage → 0.3.0

package/dist/index.d.ts

@@ -0,0 +1,2237 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, HTMLAttributes, ImgHTMLAttributes } from 'react';
+import { ButtonProps as ButtonProps$1, TextFieldProps as TextFieldProps$1, CheckboxFieldProps, CheckboxGroupProps as CheckboxGroupProps$1, RadioFieldProps, RadioGroupProps as RadioGroupProps$1, SwitchFieldProps, ValidationResult, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, ProgressBarProps as ProgressBarProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToolbarProps as ToolbarProps$1, ListBoxProps as ListBoxProps$1, ListBoxItemProps, SelectProps as SelectProps$1, Key, ModalOverlayProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuTriggerProps as MenuTriggerProps$1, ComboBoxProps, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, PopoverProps as PopoverProps$1, DialogTrigger, PressEvent, LinkProps as LinkProps$1, GridListItemProps, GridListProps, SearchFieldProps as SearchFieldProps$1, DisclosureGroupProps, SliderProps as SliderProps$1, NumberFieldProps as NumberFieldProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps, TableProps as TableProps$1, TableBodyProps, TableHeaderProps, DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1, DateFieldProps as DateFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1 } from 'react-aria-components';
+export { DateValue, DialogTrigger, TimeValue } from 'react-aria-components';
+export { CalendarDate, CalendarDateTime, Time, ZonedDateTime, getLocalTimeZone, isToday, isWeekend, now, parseDate, parseDateTime, parseTime, parseZonedDateTime, today } from '@internationalized/date';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'text' | 'ghost-danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<ButtonProps$1, 'children' | 'className' | 'style'> {
+    /** Visual weight. One primary button per area. */
+    variant?: ButtonVariant;
+    /** sm 32 px · md 40 px · lg 48 px (touch). */
+    size?: ButtonSize;
+    /** Icon before the label (decorative, hidden from screen readers). */
+    startIcon?: ReactNode;
+    /** Icon after the label (decorative, hidden from screen readers). */
+    endIcon?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Button – triggers an action. Built on React Aria: consistent press,
+ * hover and focus behaviour on mouse, touch, keyboard and screen readers.
+ * Use onPress instead of onClick and isDisabled instead of disabled.
+ * While saving, set isPending and change the label (“Saving…”): the button keeps its look and size.
+ */
+declare function Button({ variant, size, startIcon, endIcon, className, children, ...props }: ButtonProps): react.JSX.Element;
+interface ButtonGroupProps {
+    /** footer: right, primary last · header: right, next to a title · content: left, primary first. */
+    context?: 'footer' | 'header' | 'content';
+    /** Buttons in reading order (footer: Cancel, Save · content: Get started, Learn more). */
+    children: ReactNode;
+    /** Footer only: a destructive action, placed on the far left and separated. */
+    destructive?: ReactNode;
+    /** Name of the group for screen readers, when it is not obvious from the context. */
+    'aria-label'?: string;
+    className?: string;
+}
+/** Button group – spacing, alignment and mobile stacking for related buttons. */
+declare function ButtonGroup({ context, children, destructive, className, ...props }: ButtonGroupProps): react.JSX.Element;
+
+interface IconButtonProps extends Omit<ButtonProps$1, 'children' | 'className' | 'style'> {
+    /** Required: describes the action (“Delete file”), because there is no visible label. */
+    'aria-label': string;
+    icon: ReactNode;
+    /**
+     * ghost (default for toolbars) · secondary · primary · danger.
+     * On images and video: media – round overlay/media fill for busy images ·
+     * media-ghost – no fill, on a gradient bar (video controls).
+     */
+    variant?: 'ghost' | 'secondary' | 'primary' | 'danger' | 'media' | 'media-ghost';
+    /** sm 32 · md 40 · lg 48 px with 16 / 20 / 24 px icons. Media variants: sm 28 with a 44 px hit area. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Tooltip text. Default: the aria-label, so sighted users see the same name.
+     * Pass false to turn it off (e.g. when a visible label is next to the button).
+     */
+    tooltip?: ReactNode | false;
+    /** Keyboard shortcut in aria-keyshortcuts syntax (e.g. “Control+C”). Exposed to screen readers and shown in the tooltip. */
+    shortcut?: string;
+    /** Visible form of the shortcut. Default: “Control+C” → “Ctrl C”, “Meta+C” → “⌘ C”. */
+    shortcutLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Square icon-only action. Shares the Button styles. Shows its label as a tooltip. */
+declare function IconButton({ icon, variant, size, tooltip, shortcut, shortcutLabel, className, ...props }: IconButtonProps): react.JSX.Element;
+
+type InputSize = 'sm' | 'md' | 'lg';
+interface TextFieldProps extends Omit<TextFieldProps$1, 'children' | 'className' | 'style'> {
+    /**
+     * Visible label. Always set one – a placeholder is no label. Without it set `aria-label` – only where the
+     * context names the field (a table row, a filter bar), like Select and NumberField.
+     */
+    label?: ReactNode;
+    /** Helper text below the field. Replaced by the error message when invalid. */
+    description?: ReactNode;
+    /** Error text shown when the field is invalid (isInvalid or failed validation). */
+    errorMessage?: ReactNode;
+    placeholder?: string;
+    /** sm 32 · md 40 · lg 48 px. Use lg on mobile and touch. Textareas: md or lg. */
+    size?: InputSize;
+    /** Decorative icon before the text (hidden from screen readers). */
+    leadingIcon?: ReactNode;
+    /** Trailing action, e.g. `<InputAction aria-label="Show password" />`. */
+    trailing?: ReactNode;
+    /** Multi-line text (Textarea): min 3 rows, grows up to 8 rows. */
+    multiline?: boolean;
+    /** Soft limit: typing beyond is allowed, the counter turns red. Validate on submit. */
+    characterLimit?: number;
+    className?: string;
+}
+/** Text input with label, helper and error text (Field + Input / Textarea). */
+declare function TextField({ label, description, errorMessage, placeholder, size, leadingIcon, trailing, multiline, characterLimit, className, onChange, ...props }: TextFieldProps): react.JSX.Element;
+interface InputActionProps extends Omit<ButtonProps$1, 'className' | 'children'> {
+    /** Required: icon-only buttons need an accessible name. */
+    'aria-label': string;
+    icon: ReactNode;
+}
+/** Icon button inside an input, e.g. clear or show password. */
+declare function InputAction({ icon, ...props }: InputActionProps): react.JSX.Element;
+
+type ChoiceSize = 'md' | 'lg';
+interface CheckboxProps extends Omit<CheckboxFieldProps, 'children' | 'className' | 'style'> {
+    /** Label. Clicking it toggles the checkbox. */
+    children?: ReactNode;
+    /** Second line below the label. */
+    description?: ReactNode;
+    /** md (16 px box, 14 px text) · lg (20 px box, 16 px text, mobile). Inherits from a group. */
+    size?: ChoiceSize;
+    className?: string;
+}
+/** Checkbox – on its own or inside a CheckboxGroup. */
+declare function Checkbox({ children, description, size, className, ...props }: CheckboxProps): react.JSX.Element;
+interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, 'children' | 'className' | 'style'> {
+    /** Group label (rendered like a legend). Without it set `aria-label` – only where the context names the group (e.g. an Accordion title). */
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    size?: ChoiceSize;
+    /** vertical (default) or horizontal for 2–3 short options. */
+    orientation?: 'vertical' | 'horizontal';
+    children: ReactNode;
+    className?: string;
+}
+/** Several checkboxes with one label, helper and error text. */
+declare function CheckboxGroup({ label, description, errorMessage, size, orientation, children, className, ...props }: CheckboxGroupProps): react.JSX.Element;
+
+interface RadioProps extends Omit<RadioFieldProps, 'children' | 'className' | 'style'> {
+    children?: ReactNode;
+    description?: ReactNode;
+    size?: ChoiceSize;
+    className?: string;
+}
+/** One option of a RadioGroup. */
+declare function Radio({ children, description, size, className, ...props }: RadioProps): react.JSX.Element;
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'children' | 'className' | 'style'> {
+    /** Group label (rendered like a legend). Without it set `aria-label` – only where the context names the group (e.g. an Accordion title). */
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    size?: ChoiceSize;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Pick exactly one of 2–4 visible options (5 or more: use a Select).
+ * Arrow keys move and select; a choice cannot be removed again.
+ */
+declare function RadioGroup({ label, description, errorMessage, size, children, className, ...props }: RadioGroupProps): react.JSX.Element;
+
+interface SwitchProps extends Omit<SwitchFieldProps, 'children' | 'className' | 'style'> {
+    /** Label. Describes the setting, never the state (“Notifications”, not “On”). */
+    children: ReactNode;
+    description?: ReactNode;
+    /** md (36 × 20) · lg (44 × 24, mobile). */
+    size?: 'md' | 'lg';
+    /** start: label first, switch at the end (settings lists). end: switch first (forms). */
+    labelPosition?: 'start' | 'end';
+    /** While the change is being saved. The switch cannot be toggled meanwhile. */
+    isLoading?: boolean;
+    className?: string;
+}
+/** Switch – on / off with immediate effect. */
+declare function Switch({ children, description, size, labelPosition, isLoading, isReadOnly, className, ...props }: SwitchProps): react.JSX.Element;
+
+/** Label with the visual required marker. The field itself is announced as required. */
+declare function FieldLabel({ children, isRequired }: {
+    children: ReactNode;
+    isRequired?: boolean;
+}): react.JSX.Element;
+/** Helper text and error message. The error replaces the helper text when the field is invalid. */
+declare function FieldFooter({ description, errorMessage, children, }: {
+    description?: ReactNode;
+    /** A function gets the validation details (rangeUnderflow, badInput …) to name the rule. */
+    errorMessage?: ReactNode | ((validation: ValidationResult) => ReactNode);
+    children?: ReactNode;
+}): react.JSX.Element;
+
+type BadgeTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Meaning: success, warning, danger, info. Brand for “New”, neutral for everything else. */
+    tone?: BadgeTone;
+    /** sm 20 px · md 24 px. */
+    size?: 'sm' | 'md';
+    /** Leading dot in the text colour, so the status does not rely on colour alone. */
+    dot?: boolean;
+    /** Leading icon (12 px, decorative). Ignored when `dot` is set. */
+    icon?: ReactNode;
+    /** 1–2 words, sentence case. */
+    children: ReactNode;
+}
+/**
+ * Badge – short, non-interactive status label.
+ * Plain text: never clickable. For a badge that changes live, pass role="status".
+ */
+declare function Badge({ tone, size, dot, icon, className, children, ...props }: BadgeProps): react.JSX.Element;
+interface BadgeCountProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    count: number;
+    /** Above this number the badge shows “99+”. */
+    max?: number;
+    tone?: 'danger' | 'brand' | 'neutral';
+    /** sm 16 px · md 20 px. */
+    size?: 'sm' | 'md';
+    /**
+     * Text for screen readers, e.g. “3 unread messages”.
+     * Without it the number is hidden: then the parent names it (“Notifications, 3 unread”).
+     */
+    label?: string;
+}
+/** Count for notifications. Hidden at 0. */
+declare function BadgeCount({ count, max, tone, size, label, className, ...props }: BadgeCountProps): react.JSX.Element | null;
+interface BadgeDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    tone?: BadgeTone;
+    /** Text for screen readers (“Unread”, “Online”). Without it the dot is decorative. */
+    label?: string;
+}
+/** Dot for unread or presence. Always pair it with text or a label. */
+declare function BadgeDot({ tone, label, className, ...props }: BadgeDotProps): react.JSX.Element;
+
+type TagSize = 'sm' | 'md';
+interface TagGroupProps<T> extends Omit<TagGroupProps$1, 'children' | 'className' | 'style'> {
+    /** Visible label. Without it, set aria-label. */
+    label?: ReactNode;
+    /** Helper text below the tags. */
+    description?: ReactNode;
+    /** sm 24 px · md 32 px. Follows the field size (Select sm/md → sm, lg/mobile → md). */
+    size?: TagSize;
+    /** Tags, or a render function together with `items`. */
+    children: TagListProps<T>['children'];
+    items?: Iterable<T>;
+    /** Shown when there are no tags. */
+    renderEmptyState?: () => ReactNode;
+    /** Text announced after a removal. Default: “{label} removed”. */
+    removedMessage?: (labels: string[]) => string;
+    className?: string;
+}
+/**
+ * Tag group – a labelled list of tags. Built on React Aria TagGroup:
+ * arrow keys move between tags, Backspace/Delete removes, Space/Enter toggles a filter.
+ *
+ * Two roles, never mixed in one group:
+ * - removable values: pass `onRemove`
+ * - filters: pass `selectionMode="multiple"` (or "single"). Click again to deselect.
+ */
+declare function TagGroup<T extends object>({ label, description, size, children, items, renderEmptyState, onRemove, removedMessage: removedMessageProp, className, ...props }: TagGroupProps<T>): react.JSX.Element;
+interface TagProps extends Omit<TagProps$1, 'children' | 'className'> {
+    /** Short label; long text is truncated at 200 px. */
+    children: ReactNode;
+    /** Leading icon (decorative). A selected filter shows a check instead. */
+    icon?: ReactNode;
+    className?: string;
+}
+/** A single tag inside a TagGroup. */
+declare function Tag({ children, icon, textValue, className, ...props }: TagProps): react.JSX.Element;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+/** First letters of first and last name; one word: first two letters. */
+declare function initialsOf(name: string): string;
+interface AvatarProps {
+    /** Person or organization name. Used for alt text, initials and (without `colorKey`) the tone. */
+    name?: string;
+    /** Photo URL. Falls back to initials if it is missing or fails to load. */
+    src?: string;
+    /** xs 20 · sm 24 · md 32 · lg 40 · xl 56 · 2xl 80 px. */
+    size?: AvatarSize;
+    /** circle = person · square = organization, team, workspace. */
+    shape?: 'circle' | 'square';
+    /** Stable id (user id) for the initials colour, so it survives name changes. */
+    colorKey?: string;
+    /** Presence dot. Also added to the accessible name (“Lea M., online”). */
+    status?: AvatarStatus;
+    /** Words for the status in the accessible name. */
+    statusLabels?: Partial<Record<AvatarStatus, string>>;
+    /** Next to a visible name the avatar is decorative and hidden from screen readers. */
+    decorative?: boolean;
+    /** Accessible name when the name is unknown (guest, deleted account). */
+    unknownLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Avatar – picture of a person or organization with fallback image → initials → icon. */
+declare function Avatar({ name, src, size, shape, colorKey, status, statusLabels, decorative, unknownLabel, className, style, }: AvatarProps): react.JSX.Element;
+interface AvatarGroupProps {
+    /** Avatars, most relevant first (owner, you). */
+    children: ReactNode;
+    /** Visible avatars before “+N”. */
+    max?: number;
+    /** xs · sm · md · lg. */
+    size?: Exclude<AvatarSize, 'xl' | '2xl'>;
+    /** Name of the group, e.g. “Assignees”. */
+    'aria-label': string;
+    /** Opens the full list (e.g. a popover). Without it “+N” is plain text. */
+    onMorePress?: () => void;
+    /** Accessible name of “+N”. Default: “N more”. */
+    moreLabel?: (count: number) => string;
+    className?: string;
+}
+/** Overlapping avatars, max 4 + “+N”. */
+declare function AvatarGroup({ children, max, size, onMorePress, moreLabel: moreLabelProp, className, ...props }: AvatarGroupProps): react.JSX.Element;
+
+/**
+ * Wraps a focusable trigger (e.g. Button, IconButton) and its Tooltip.
+ * Timing: 500 ms delay on hover, 100 ms close delay, instant on keyboard focus.
+ * React Aria handles warm-up between neighbours, Escape and touch (no tooltip on touch).
+ */
+declare function TooltipTrigger({ delay, closeDelay, ...props }: TooltipTriggerComponentProps): react.JSX.Element;
+interface TooltipProps extends Omit<TooltipProps$1, 'children' | 'className'> {
+    /** A few words, at most one sentence. No links or buttons. */
+    children: ReactNode;
+    /** Keyboard shortcut, shown dimmed after the text (e.g. “⌘C”). */
+    shortcut?: string;
+    className?: string;
+}
+/** Tooltip – short label on hover or focus. Top, 8 px offset, flips if needed. */
+declare function Tooltip({ children, shortcut, placement, offset, className, ...props }: TooltipProps): react.JSX.Element;
+
+interface SpinnerProps {
+    /** sm 16 · md 20 · lg 24 · xl 40 px. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** current = text colour of the parent (default, fits every button) · brand · neutral · on-brand. */
+    tone?: 'current' | 'brand' | 'neutral' | 'on-brand';
+    /** Name for screen readers. */
+    'aria-label'?: string;
+    /** Inside a control that already says what happens (“Saving…”): hide the spinner from screen readers. */
+    decorative?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Spinner – short wait of unknown length. */
+declare function Spinner({ size, tone, decorative, className, style, ...props }: SpinnerProps): react.JSX.Element;
+interface ProgressBarProps extends Omit<ProgressBarProps$1, 'children' | 'className' | 'style'> {
+    /** Visible label (“Uploading 3 files”). Without it, set aria-label. */
+    label?: ReactNode;
+    /** Helper below the bar: files, time left, or what to do after an error. */
+    description?: ReactNode;
+    /** md 8 px in content · sm 4 px in dense rows (file list). */
+    size?: 'sm' | 'md';
+    /** success when done, error when it failed. Announced politely. */
+    status?: 'default' | 'success' | 'error';
+    /** Show the value (“64 %”) next to the label. Hidden when indeterminate. */
+    showValue?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Progress bar – measurable or long work. Built on React Aria ProgressBar:
+ * role progressbar with value and value text. Use `valueLabel` for words (“64 %, 2 of 3 files”).
+ */
+declare function ProgressBar({ label, description, size, status, showValue, className, style, ...props }: ProgressBarProps): react.JSX.Element;
+interface SkeletonProps {
+    /** text: 12 px line · circle: avatar · rect: image or card. */
+    shape?: 'text' | 'circle' | 'rect';
+    /** Number of text lines; the last one is shorter. */
+    lines?: number;
+    /** Any CSS length, e.g. "60%", 160. Match the real content. */
+    width?: CSSProperties['inlineSize'];
+    height?: CSSProperties['blockSize'];
+    className?: string;
+}
+/**
+ * Skeleton – placeholder in the shape of the content.
+ * Hidden from screen readers; mark the loading region with aria-busy="true".
+ */
+declare function Skeleton({ shape, lines, width, height, className }: SkeletonProps): react.JSX.Element;
+
+type ToggleSize = 'sm' | 'md' | 'lg';
+interface ToggleButtonProps extends Omit<ToggleButtonProps$1, 'children' | 'className' | 'style'> {
+    /** Visible label. It never changes with the state (“Bold” stays “Bold”). Leave out for icon only. */
+    children?: ReactNode;
+    /** Leading icon; alone it makes an icon-only toggle (then aria-label is required). */
+    icon?: ReactNode;
+    /** sm 32 · md 40 · lg 48 px, like Button. Inside a group the group sets it. */
+    size?: ToggleSize;
+    /** Icon only: tooltip text. Default: the aria-label. false turns it off. */
+    tooltip?: ReactNode | false;
+    /** Keyboard shortcut in aria-keyshortcuts syntax (e.g. “Control+B”), shown in the tooltip. */
+    shortcut?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Toggle Button – a button that stays pressed.
+ * Built on React Aria ToggleButton: announced as pressed / not pressed (aria-pressed).
+ * For an immediate, local effect (bold, mute, favourite). Saved settings use Switch, navigation uses Tabs.
+ */
+declare function ToggleButton({ children, icon, size, tooltip, shortcut, className, ...props }: ToggleButtonProps): react.JSX.Element;
+interface ToggleButtonGroupProps extends Omit<ToggleButtonGroupProps$1, 'children' | 'className' | 'style'> {
+    /**
+     * segmented: switch between 2–5 views, exactly one on, shared container.
+     * toolbar: formatting options, any combination (or selectionMode="single", e.g. text alignment), no container.
+     */
+    variant?: 'segmented' | 'toolbar';
+    /** Height of the group: md 40 · lg 48 (segmented items are one size smaller). */
+    size?: 'md' | 'lg';
+    /** Segmented only: full width, items share the space (mobile). */
+    fullWidth?: boolean;
+    /** Required when there is no visible label: names the group (“View”). */
+    'aria-label'?: string;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Toggle button group. Built on React Aria ToggleButtonGroup:
+ * Tab enters once on the selected item, arrow keys move between items.
+ */
+declare function ToggleButtonGroup({ variant, size, fullWidth, selectionMode, disallowEmptySelection, children, className, ...props }: ToggleButtonGroupProps): react.JSX.Element;
+interface ToolbarProps extends Omit<ToolbarProps$1, 'className' | 'style'> {
+    /** Required: names the toolbar (“Text formatting”). */
+    'aria-label': string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Toolbar – several toggle groups (and buttons) in one row.
+ * Built on React Aria Toolbar: one Tab stop for the whole toolbar, arrow keys move across all groups.
+ */
+declare function Toolbar({ className, ...props }: ToolbarProps): react.JSX.Element;
+/** Divider between groups in a Toolbar (1 px border/default, 24 px high). */
+declare function ToolbarSeparator(): react.JSX.Element;
+
+type ListBoxSize = 'md' | 'lg';
+interface ListBoxProps<T> extends Omit<ListBoxProps$1<T>, 'className' | 'style'> {
+    /** md on desktop · lg on mobile and in the Bottom Sheet. */
+    size?: ListBoxSize;
+    className?: string;
+}
+/**
+ * Listbox – the list behind Select, Combobox and Bottom Sheet.
+ * Built on React Aria ListBox: arrow keys, type-ahead, Home/End; sections and separators.
+ */
+declare function ListBox<T extends object>({ size, className, ...props }: ListBoxProps<T>): react.JSX.Element;
+interface OptionProps extends Omit<ListBoxItemProps, 'children' | 'className' | 'style'> {
+    /** Label. Long labels wrap; keep them short and put details into the description. */
+    children: ReactNode;
+    /** Second line in text/secondary. */
+    description?: ReactNode;
+    /** Decorative leading icon. */
+    icon?: ReactNode;
+}
+/** Option – one row in a Listbox. Single: check on the right. Multi: checkbox on the left. */
+declare function Option({ children, description, icon, textValue, ...props }: OptionProps): react.JSX.Element;
+interface ListBoxSectionProps<T> {
+    /** Group heading (overline). Use headings only with two or more groups. Without a title, set aria-label. */
+    title?: ReactNode;
+    'aria-label'?: string;
+    children: ReactNode | ((item: T) => ReactNode);
+    items?: Iterable<T>;
+    id?: string;
+}
+/**
+ * A group of options with a heading (announced as the name of the group).
+ * Groups are divided by a line automatically (a separator element is not allowed inside a listbox).
+ */
+declare function ListBoxSection<T extends object>({ title, children, items, id, ...props }: ListBoxSectionProps<T>): react.JSX.Element;
+/** Message row for empty and loading states – never an empty popup. Announced as status. */
+declare function ListBoxMessage({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+type SelectMode = 'single' | 'multiple';
+type ValueOf<M extends SelectMode> = M extends 'multiple' ? Key[] : Key | null;
+/** Where the options open. auto: popover on desktop; below 640 px native picker (single) or Bottom Sheet (multi). */
+type SelectOverlay = 'auto' | 'popover' | 'sheet' | 'native';
+interface SelectProps<T extends object, M extends SelectMode = 'single'> extends Omit<SelectProps$1<T, M>, 'children' | 'className' | 'style' | 'placeholder'> {
+    /** Visible label. Without it set `aria-label` – only where the context names the field (filter bars, toolbars). */
+    label?: ReactNode;
+    /** Helper text below the field. Replaced by the error message when invalid. */
+    description?: ReactNode;
+    /** Error text shown when the field is invalid. Validate on submit or blur, not while open. */
+    errorMessage?: ReactNode;
+    /** A hint like “Select…”. Never required information. */
+    placeholder?: string;
+    /** sm 32 · md 40 · lg 48 px. lg on mobile (opens the lg list). */
+    size?: InputSize;
+    /** Decorative icon before the value. */
+    leadingIcon?: ReactNode;
+    /** Single only: shows a clear button for optional fields. Multi always has clear-all. */
+    clearable?: boolean;
+    /** Value can be read and copied but not changed. Not the same as disabled. */
+    isReadOnly?: boolean;
+    /** Options as data; then pass a render function as children. */
+    items?: Iterable<T>;
+    /** Option and ListBoxSection elements, or a render function with items. */
+    children: ReactNode | ((item: T) => ReactNode);
+    /** auto (default) · popover · sheet (Bottom Sheet) · native (system picker, single only). */
+    overlay?: SelectOverlay;
+    /**
+     * Multi: what happens with the selection. live (forms): it is the value, nothing else happens.
+     * onClose (filters, reloads): `onApply` runs once when the list closes – any way – and only if the selection changed.
+     */
+    commit?: 'live' | 'onClose';
+    /** commit="onClose": apply the selection (load results, write the URL …). */
+    onApply?: (value: ValueOf<M>) => void;
+    /** commit="onClose": label of the primary sheet button, ideally with the live result count (“Show 128 results”). */
+    resultLabel?: (value: ValueOf<M>) => ReactNode;
+    className?: string;
+}
+/**
+ * Select – choose one or several values from a list.
+ * Built on React Aria Select with a hidden native select: forms, autofill and validation keep working.
+ * 2–4 options: Radio. 5–10: Select. More, or users know what to type: Combobox.
+ */
+declare function Select<T extends object, M extends SelectMode = 'single'>({ label, description, errorMessage, placeholder: placeholderProp, size, leadingIcon, clearable, isReadOnly, items, children, overlay, commit, onApply, resultLabel: resultLabelProp, className, selectionMode, ...props }: SelectProps<T, M>): react.JSX.Element;
+
+interface BottomSheetProps extends Omit<ModalOverlayProps, 'children' | 'className' | 'style'> {
+    /** Required: names the dialog (for a Select sheet: the field label). */
+    title: ReactNode;
+    /** Content; scrolls when taller than the sheet. */
+    children: ReactNode;
+    /** Sticky footer, e.g. a full-width primary action. A function gets `close`. */
+    footer?: ReactNode | ((close: () => void) => ReactNode);
+    /** content: height of the content, max 90 % · full: fixed 90 % (with search, so it does not jump). */
+    height?: 'content' | 'full';
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+    /** Shows a back button before the title (second view, e.g. a submenu). */
+    onBack?: () => void;
+    /** Accessible name of the back button. */
+    backLabel?: string;
+    className?: string;
+}
+/**
+ * Bottom Sheet – a modal layer from the bottom on small screens.
+ * Built on React Aria ModalOverlay + Modal + Dialog: focus stays inside and returns to the trigger,
+ * page scroll is locked, Esc and a tap on the scrim close it. Swipe down on the handle or header closes it,
+ * the close button is the non-drag alternative (WCAG 2.5.7). Use inside a DialogTrigger or with isOpen.
+ */
+declare function BottomSheet({ title, children, footer, height, closeLabel, onBack, backLabel, isDismissable, className, ...props }: BottomSheetProps): react.JSX.Element;
+
+interface MenuTriggerProps extends Omit<MenuTriggerProps$1, 'children'> {
+    /** The trigger (default: an ellipsis Icon Button) and the Menu. Without a trigger, pass `label`. */
+    children: ReactNode;
+}
+/** Opens a Menu from a trigger (React Aria MenuTrigger). Focus returns to the trigger. */
+declare function MenuTrigger(props: MenuTriggerProps): react.JSX.Element;
+/**
+ * Default trigger: ghost Icon Button with an ellipsis. The name includes the object
+ * (“More actions for Q3-Report.pdf”); it looks pressed while the menu is open.
+ */
+declare function MenuButton({ 'aria-label': label, size }: {
+    'aria-label': string;
+    size?: 'sm' | 'md' | 'lg';
+}): react.JSX.Element;
+interface MenuProps<T> extends Omit<MenuProps$1<T>, 'className' | 'style'> {
+    /** Mobile sheet title: the object the actions apply to (“Q3-Report.pdf”). */
+    title?: ReactNode;
+    /** auto: popover on desktop, Bottom Sheet below 640 px · popover · sheet. */
+    overlay?: 'auto' | 'popover' | 'sheet';
+    className?: string;
+}
+/**
+ * Menu – a list of actions. Built on React Aria Menu: arrow keys, Enter runs the item,
+ * Esc closes, type to jump, Home/End. Every item has an icon, labels start with a verb; danger items last.
+ * Not for values (Select) or site navigation (disclosure pattern).
+ */
+declare function Menu<T extends object>({ title, overlay, className, ...props }: MenuProps<T>): react.JSX.Element;
+interface MenuItemProps extends Omit<MenuItemProps$1, 'children' | 'className' | 'style'> {
+    /** Label, starting with a verb (“Duplicate”). “…” only when a dialog or second step follows. */
+    children: string;
+    /** Required: shows the action. Decorative for screen readers – the label carries the meaning. */
+    icon: ReactNode;
+    /** Keyboard shortcut in aria-keyshortcuts syntax; “Mod” = ⌘ on Apple, Ctrl elsewhere. Desktop only. It must also work without the menu. */
+    shortcut?: string;
+    /** Destructive action: red, last in its own group. Irreversible actions open a confirmation dialog. */
+    variant?: 'default' | 'danger';
+}
+/** One action in a Menu. */
+declare function MenuItem({ children, icon, shortcut, variant, textValue, ...props }: MenuItemProps): react.JSX.Element;
+interface SubmenuProps {
+    /** Label of the parent item. */
+    label: string;
+    icon: ReactNode;
+    /** The submenu's items (one level only). */
+    children: ReactNode;
+    isDisabled?: boolean;
+}
+/** Submenu (one level). Desktop: opens to the side. Mobile: second view in the sheet with a back button. */
+declare function Submenu({ label, icon, children, isDisabled }: SubmenuProps): react.JSX.Element;
+interface MenuSectionProps {
+    /** Optional overline heading. Without a title the group is only divided by a line; then set aria-label if it helps. */
+    title?: ReactNode;
+    'aria-label'?: string;
+    children: ReactNode;
+}
+/** A group of related actions. Groups are divided by a line; the danger group comes last. */
+declare function MenuSection({ title, children, ...props }: MenuSectionProps): react.JSX.Element;
+
+interface DialogAction {
+    /** Verb that says what happens (“Send invite”, “Delete”). Never “OK”, “Yes” or “Confirm”. */
+    label: string;
+    /**
+     * Runs on press, then the dialog closes. Return a promise to show the pending state until it
+     * resolves; when it rejects, the dialog stays open (show the error inside the dialog).
+     */
+    onAction?: () => void | Promise<unknown>;
+    /** Id of a form in the dialog: the button submits it. The form's onSubmit saves and calls `close`. */
+    form?: string;
+    /** Dialog only: danger for a destructive main action. */
+    variant?: 'primary' | 'danger';
+    isDisabled?: boolean;
+    /** Controlled pending state (e.g. while a submitted form saves). */
+    isPending?: boolean;
+}
+interface OpenProps {
+    /** Controlled open state. Inside a DialogTrigger the trigger controls it. */
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+interface DirtyGuardProps extends OpenProps {
+    isDirty?: boolean;
+    discardText?: Partial<DialogDiscardText>;
+}
+interface DialogDiscardText {
+    title: string;
+    description: string;
+    actionLabel: string;
+    cancelLabel: string;
+}
+interface DialogProps extends OpenProps {
+    /** Required. Names the task (“Invite member”). Screen readers announce it when the dialog opens. */
+    title: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /** Content or form. A function gets `close`: closes without asking – call it after saving (X, Cancel and Esc still ask when isDirty). */
+    children?: ReactNode | ((close: () => void) => ReactNode);
+    /** sm 400 (one or two fields) · md 560 · lg 720 (tables, two-column forms). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Main action at the end of the footer, next to Cancel. On mobile fullscreen it moves to the header. Without it, no footer. */
+    primaryAction?: DialogAction;
+    cancelLabel?: string;
+    /** Accessible name of the X (and the label of the mobile close button without a main action). */
+    closeLabel?: string;
+    /** Shows the X in the header. */
+    showClose?: boolean;
+    /**
+     * Unsaved input. While true, a click on the scrim no longer closes, and X, Esc and Cancel
+     * first ask “Discard changes?” (Alert dialog).
+     */
+    isDirty?: boolean;
+    /** Text of the “Discard changes?” Alert dialog. */
+    discardText?: Partial<DialogDiscardText>;
+    /** auto: dialog on desktop, `mobile` below 640 px · dialog · fullscreen · sheet. */
+    overlay?: 'auto' | 'dialog' | 'fullscreen' | 'sheet';
+    /** Pattern below 640 px: fullscreen for forms (keyboard needs space), sheet for short content. */
+    mobile?: 'fullscreen' | 'sheet';
+    className?: string;
+}
+/**
+ * Dialog – a modal window for a focused task. Built on React Aria ModalOverlay,
+ * Modal and Dialog: role dialog with aria-modal, the title names it, focus starts in the first field,
+ * stays inside and returns to the trigger; the page behind does not scroll. Use inside a DialogTrigger or with isOpen.
+ */
+declare function Dialog({ title, description, children, size, primaryAction, cancelLabel: cancelLabelProp, closeLabel: closeLabelProp, showClose, isDirty, discardText, overlay, mobile, className, ...openProps }: DialogProps): react.JSX.Element;
+type AlertDialogTone = 'danger' | 'warning' | 'info';
+interface AlertDialogProps extends OpenProps {
+    /** danger: irreversible or destructive · warning: risk of data loss · info: must be acknowledged. */
+    tone?: AlertDialogTone;
+    /** Required. A question (“Delete Q3-Report.pdf?”). */
+    title: ReactNode;
+    /** The consequence (“This cannot be undone.”). */
+    children?: ReactNode;
+    /** Verb of the action (“Delete”). Danger tone: danger button, else primary. */
+    actionLabel: string;
+    /** Runs, then the dialog closes. A promise shows the pending state until it resolves. */
+    onAction?: () => void | Promise<unknown>;
+    cancelLabel?: string;
+    className?: string;
+}
+/**
+ * Alert dialog – a decision that needs an answer before the user can go on.
+ * role alertdialog, no X, a click on the scrim never closes, Esc = Cancel. Focus starts on Cancel,
+ * so an accidental Enter never deletes. Below 640 px: icon on top, buttons stacked (lg).
+ */
+declare function AlertDialog({ tone, title, children, actionLabel, onAction, cancelLabel: cancelLabelProp, className, ...openProps }: AlertDialogProps): react.JSX.Element;
+
+type ComboMode = 'single' | 'multiple';
+interface ComboboxProps<T extends object, M extends ComboMode = 'single'> extends Omit<ComboBoxProps<T, M>, 'children' | 'className' | 'style' | 'placeholder' | 'menuTrigger'> {
+    /** Visible label. Always set one. */
+    label: ReactNode;
+    /** Helper text below the field. Replaced by the error message when invalid. */
+    description?: ReactNode;
+    /** Error text shown when the field is invalid. */
+    errorMessage?: ReactNode;
+    /** A hint like “Search…”. */
+    placeholder?: string;
+    /** sm 32 · md 40 · lg 48 px. lg on mobile. */
+    size?: InputSize;
+    /** Decorative icon before the text, e.g. a search icon. */
+    leadingIcon?: ReactNode;
+    /** Server search: shows a loading row (previous results stay) and marks the list busy. */
+    isLoading?: boolean;
+    /** Empty list text. Default: “No results for “…””. */
+    noResultsMessage?: (inputValue: string) => ReactNode;
+    /** Multi only: shows an “Add …” row for text without an exact match. Return the key of the new item to select it. */
+    onCreate?: (text: string) => Key | void;
+    /** Option and ListBoxSection elements, or a render function with items / defaultItems. */
+    children: ReactNode | ((item: T) => ReactNode);
+    /** auto (default): popover on desktop, Bottom Sheet with search below 640 px · popover · sheet. */
+    overlay?: 'auto' | 'popover' | 'sheet';
+    /** Multi in the sheet: live (forms, footer “Done”) · onClose (filters: onApply once when the sheet closes, if changed). */
+    commit?: 'live' | 'onClose';
+    /** commit="onClose": apply the selection (load results, write the URL …). */
+    onApply?: (value: Key[]) => void;
+    /** commit="onClose": label of the primary sheet button, ideally with the live result count. */
+    resultLabel?: (value: Key[]) => ReactNode;
+    className?: string;
+}
+/**
+ * Combobox – a Select you can type into; typing filters the list.
+ * Built on React Aria ComboBox: opens on typing, arrow down or the chevron – never on focus.
+ * Contains-match, case and accent insensitive; the first match is highlighted, Enter picks it.
+ * Leaving without a selection restores the last valid value.
+ * Local data: `defaultItems` (filtered here). Server data: `items` + `inputValue` / `onInputChange` + `isLoading`.
+ */
+declare function Combobox<T extends object, M extends ComboMode = 'single'>({ label, description, errorMessage, placeholder: placeholderProp, size, leadingIcon, isLoading, noResultsMessage: noResultsProp, onCreate, children, overlay, commit, onApply, resultLabel: resultLabelProp, className, selectionMode, value: valueProp, defaultValue, onChange, onInputChange, ...props }: ComboboxProps<T, M>): react.JSX.Element;
+
+interface ToastAction {
+    /** “Undo”, “View” or “Retry”. It must also be reachable elsewhere in the app. */
+    label: string;
+    onAction: () => void;
+}
+interface ToastOptions {
+    /** Max one action. Pressing it runs the action and closes the toast. */
+    action?: ToastAction;
+    /** Errors (“Could not save”): stays until closed. Otherwise 5 s, with an action 8 s. */
+    persistent?: boolean;
+    /** Called when the toast closes (timeout, close button, Esc or action). */
+    onClose?: () => void;
+}
+/**
+ * Shows a toast: short, temporary feedback after an action.
+ * Write the result, not the process (“Q3-Report.pdf deleted”), one line, max about 50 characters.
+ * Returns the key for `toast.close(key)`. The same message is never shown twice at once.
+ */
+declare function toast(message: string, { action, persistent, onClose }?: ToastOptions): string;
+declare namespace toast {
+    var close: (key: string) => void;
+    var clear: () => void;
+}
+interface ToastRegionProps {
+    /** Accessible name of the landmark. Default: “Notifications” (localized by React Aria). */
+    'aria-label'?: string;
+    /** Accessible name of the close buttons. Default: “Close” (localized by React Aria). */
+    closeLabel?: string;
+}
+/**
+ * The place where toasts appear – render it once at the root of the app.
+ * A landmark: F6 moves focus into it, new toasts are announced. Desktop bottom right,
+ * mobile full width (set `--medo-toast-offset` to the height of a bottom navigation).
+ * Hover, focus and a hidden window pause the timers (WCAG 2.2.1).
+ */
+declare function ToastRegion({ closeLabel, ...props }: ToastRegionProps): react.JSX.Element | null;
+
+interface TabsProps extends Omit<TabsProps$1, 'className' | 'style' | 'orientation'> {
+    /** md: tab 32 / track 40 · lg: 40 / 48. Below 640 px tabs are always lg. */
+    size?: 'md' | 'lg';
+    /** The tabs share the full width. Below 640 px automatic: up to 3 tabs fill, more scroll. */
+    fullWidth?: boolean;
+    className?: string;
+}
+/**
+ * Tabs – switch between views of the same context, one panel visible at a time.
+ * Built on React Aria Tabs: tablist / tab / tabpanel, only the selected tab is in the Tab order,
+ * ← → move and select, Home / End. `keyboardActivation="manual"` for slow panels (select with Enter).
+ * Keep the selected tab in the URL with `selectedKey` + `onSelectionChange`.
+ */
+declare function Tabs({ size, fullWidth, className, ...props }: TabsProps): react.JSX.Element;
+interface TabListProps<T> extends Omit<TabListProps$1<T>, 'className' | 'style'> {
+    /** Names the tabs when there is no visible heading (“Project”). */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * The track with the tabs. 2 to 6 tabs. Scrolls horizontally when it does not fit
+ * (with a fade at the edge that still has tabs) – tabs never wrap.
+ */
+declare function TabList<T extends object>({ className, ...props }: TabListProps<T>): react.JSX.Element;
+interface TabProps extends Omit<TabProps$1, 'className' | 'style' | 'children'> {
+    /** Required. 1–2 words, a noun (“Activity”). */
+    children: string;
+    /** Optional, then on all tabs. Decorative – the label carries the meaning. */
+    icon?: ReactNode;
+    /** Items waiting in the tab (Badge count, neutral). Hidden at 0. */
+    count?: number;
+    /** Screen-reader text of the count (“3 new”). Without it the number is read as part of the name. */
+    countLabel?: string;
+}
+/** One tab. The selected tab is a raised thumb that slides to the new tab with a snappy spring (no slide with reduced motion). */
+declare function Tab({ children, icon, count, countLabel, ...props }: TabProps): react.JSX.Element;
+interface TabPanelProps extends Omit<TabPanelProps$1, 'className' | 'style' | 'shouldForceMount'> {
+    /**
+     * Keeps the panel (hidden) while another tab is selected, so input is never lost.
+     * Set false for heavy panels (large tables, charts) to unmount them.
+     */
+    keepMounted?: boolean;
+    className?: string;
+}
+/** The content of one tab, directly below the tab list. It is focusable when nothing inside is. */
+declare function TabPanel({ keepMounted, className, ...props }: TabPanelProps): react.JSX.Element;
+
+/** Opens a Popover from a trigger on click (React Aria DialogTrigger). The trigger is pressed and aria-expanded while open. */
+declare const PopoverTrigger: typeof DialogTrigger;
+interface PopoverProps {
+    /** Header with title and close button. Use it when the content needs a title or holds a form. */
+    title?: ReactNode;
+    /** Required without a title: names the popover. */
+    'aria-label'?: string;
+    /** Interactive content. A function gets `close`. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    /** sm 240 · md 320 · lg 400 · auto: hugs content without padding (e.g. a calendar). */
+    size?: 'sm' | 'md' | 'lg' | 'auto';
+    /** Footer, only when changes must be confirmed – otherwise apply them live. Cancel + main action (Button sm). */
+    primaryAction?: DialogAction;
+    cancelLabel?: string;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+    /** auto: popover on desktop, Bottom Sheet below 640 px · popover · sheet. */
+    overlay?: 'auto' | 'popover' | 'sheet';
+    /** Default bottom start; flips when there is no space. */
+    placement?: PopoverProps$1['placement'];
+    className?: string;
+}
+/**
+ * Popover – a small floating panel with interactive content, anchored to its trigger.
+ * Opens on click, never on hover. Non-modal: the page stays usable; focus moves in, Esc or a click
+ * outside closes it and focus returns to the trigger. One topic per popover, one popover at a time.
+ */
+declare function Popover({ title, 'aria-label': ariaLabel, children, size, primaryAction, cancelLabel: cancelLabelProp, closeLabel: closeLabelProp, overlay, placement, className, }: PopoverProps): react.JSX.Element;
+interface ToggletipProps {
+    /** Required. Names the info button and the toggletip after the topic (“About billing email”). */
+    'aria-label': string;
+    /** One or two short sentences. Text only. */
+    children: ReactNode;
+    /** Optional link to more help. */
+    link?: {
+        label: string;
+        href: string;
+        external?: boolean;
+    };
+    className?: string;
+}
+/**
+ * Toggletip – a short explanation behind an info button, next to a label or value.
+ * Opens on click, so it works with touch, keyboard and screen readers – unlike a tooltip.
+ * Esc or a click outside closes it. Stays a popover on mobile (full width minus 16 px).
+ */
+declare function Toggletip({ 'aria-label': label, children, link, className }: ToggletipProps): react.JSX.Element;
+
+type NavVariant = 'header' | 'sidebar' | 'rail' | 'sheet';
+interface NavItemProps extends Omit<LinkProps$1, 'children' | 'className' | 'style'> {
+    /** Required. 1–2 words, a noun – the same name in header, sidebar, tab bar and page title. */
+    children: string;
+    /** Sidebar, rail and sheet: icon before the label (decorative). Header items have no icon. */
+    icon?: ReactNode;
+    /** The current page (exactly one). Marked with aria-current="page" and action/selected. */
+    isCurrent?: boolean;
+    /** Number in the item (Badge count, neutral). */
+    count?: number;
+    /** Screen-reader text of the count (“3 unread”, “12 projects”). */
+    countLabel?: string;
+    /** The count is new or unread: in the rail it turns into a dot. Plain totals (“12 projects”) are hidden there. */
+    unread?: boolean;
+}
+/**
+ * One navigation link. Built on React Aria Link, so client-side routing works
+ * with any router through RouterProvider. The container decides the form (header, sidebar, rail, sheet).
+ */
+declare function NavItem({ children, icon, isCurrent, count, countLabel, unread, ...props }: NavItemProps): react.JSX.Element;
+interface NavGroupProps {
+    /** Label of the group button. */
+    label: string;
+    /** Sidebar, rail and sheet: icon before the label. */
+    icon?: ReactNode;
+    /** NavItems – one level only. */
+    children: ReactNode;
+    /** Open at start. Default: open when it contains the current page (sidebar, sheet). */
+    defaultOpen?: boolean;
+}
+/**
+ * A group of links behind a disclosure button (aria-expanded) – never a menu.
+ * Header: a dropdown panel on the popover surface; Tab moves through the links, Esc or a click outside closes.
+ * Sidebar and sheet: opens in place, one level. The parent shows “current” only while it is closed.
+ */
+declare function NavGroup({ label, icon, children, defaultOpen }: NavGroupProps): react.JSX.Element;
+interface NavListProps {
+    /** Form of the items: header (row) · sidebar · rail · sheet. */
+    variant?: NavVariant;
+    /** Name of the navigation region (“Footer”, “Account”). */
+    'aria-label': string;
+    children: ReactNode;
+    className?: string;
+}
+/** A named navigation region with items of one form – for navigation outside the ready-made headers and bars. */
+declare function NavList({ variant, 'aria-label': label, children, className }: NavListProps): react.JSX.Element;
+interface NavSectionProps {
+    /** Overline heading (“Workspace”). In the rail the section is divided by a line. */
+    title: string;
+    children: ReactNode;
+}
+/** A titled section of the side navigation. */
+declare function NavSection({ title, children }: NavSectionProps): react.JSX.Element;
+interface SkipLinkProps {
+    /** Id target of the main content. */
+    href?: string;
+    children?: string;
+}
+/** “Skip to content” – the first focusable element on every page (WCAG 2.4.1). Visible on focus only. */
+declare function SkipLink({ href, children }: SkipLinkProps): react.JSX.Element;
+interface NavAction {
+    label: string;
+    /** Usually a link (“Log in”, “Get started”). */
+    href?: string;
+    onPress?: (e: PressEvent) => void;
+    /** primary: max one · secondary · ghost. */
+    variant?: 'primary' | 'secondary' | 'ghost';
+}
+interface SiteHeaderProps {
+    /** Logo link with a name (“med.o home”). */
+    logo: ReactNode;
+    /** NavItems and NavGroups – max 5 links; more go into a group. */
+    children: ReactNode;
+    /** Max 2 actions, at most one primary (last). In the mobile menu they are pinned at the bottom (lg). */
+    actions?: NavAction[];
+    /** Name of the navigation region. */
+    'aria-label'?: string;
+    /** Mobile: label of the menu button and title of the fullscreen menu. */
+    menuLabel?: string;
+    closeLabel?: string;
+    /** auto: menu button below 768 px · desktop · mobile (forced, e.g. for previews). */
+    layout?: 'auto' | 'desktop' | 'mobile';
+}
+/**
+ * Website header: logo, links, actions. Sticky, with a divider once the page scrolls.
+ * Below 768 px only the logo, the primary action and a menu button remain; the menu opens fullscreen.
+ */
+declare function SiteHeader({ logo, children, actions, 'aria-label': labelProp, menuLabel: menuLabelProp, closeLabel: closeLabelProp, layout }: SiteHeaderProps): react.JSX.Element;
+interface AppHeaderProps {
+    /** Page title – the same name as the current nav item. */
+    title: ReactNode;
+    /** Heading level of the title (default 1: the page title). */
+    headingLevel?: 1 | 2 | 3;
+    /** Mobile only: logo mark before the title (the side navigation is hidden there). */
+    logo?: ReactNode;
+    /** Search field (desktop). */
+    search?: ReactNode;
+    /** Notifications, account … */
+    actions?: ReactNode;
+}
+/** App header: page title, search and actions. Navigation lives in the side navigation. */
+declare function AppHeader({ title, headingLevel, logo, search, actions }: AppHeaderProps): react.JSX.Element;
+interface SideNavUser {
+    name: string;
+    email?: string;
+    src?: string;
+}
+interface SideNavProps {
+    /** Full logo (expanded). */
+    logo: ReactNode;
+    /** Logo mark (collapsed, 32 px). */
+    logoMark: ReactNode;
+    /** NavItems, NavSections and NavGroups. Most used first. */
+    children: ReactNode;
+    /** Signed-in user at the bottom. */
+    user?: SideNavUser;
+    /** Collapsed to the 64 px rail (controlled). Remember it per user via onCollapsedChange. */
+    isCollapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Name of the navigation region. */
+    'aria-label'?: string;
+    collapseLabel?: string;
+    expandLabel?: string;
+    /** Close button of the tablet drawer. */
+    closeLabel?: string;
+}
+/**
+ * Side navigation for apps: 256 px with icons, counts, sections and groups;
+ * collapses to a 64 px rail with tooltips. 640–1023 px: always a rail; expanding opens the full navigation
+ * as a Drawer on the left. Below 640 px it is hidden – use the BottomTabBar there.
+ */
+declare function SideNav({ logo, logoMark, children, user, isCollapsed, defaultCollapsed, onCollapsedChange, 'aria-label': labelProp, collapseLabel: collapseLabelProp, expandLabel: expandLabelProp, closeLabel: closeLabelProp, }: SideNavProps): react.JSX.Element;
+interface BottomTabBarProps {
+    /** 3–5 TabBarItems; the last can be TabBarMore. */
+    children: ReactNode;
+    'aria-label'?: string;
+    /** mobile: only below 640 px (default) · always (e.g. in a native-like web app). */
+    display?: 'mobile' | 'always';
+}
+/**
+ * Bottom tab bar: the main destinations of an app on phones, in thumb reach.
+ * Max 4 destinations + “More”. Fixed to the bottom with the safe area; set `--medo-toast-offset` so toasts stay above it.
+ */
+declare function BottomTabBar({ children, 'aria-label': labelProp, display }: BottomTabBarProps): react.JSX.Element;
+interface TabBarItemProps extends Omit<LinkProps$1, 'children' | 'className' | 'style'> {
+    /** Always visible – icons alone are ambiguous. */
+    children: string;
+    icon: ReactNode;
+    isCurrent?: boolean;
+    /** Something new (dot). Name it for screen readers with dotLabel. */
+    dot?: boolean;
+    dotLabel?: string;
+}
+/** One destination of the bottom tab bar: icon in a pill indicator, label below. */
+declare function TabBarItem({ children, icon, isCurrent, dot, dotLabel, ...props }: TabBarItemProps): react.JSX.Element;
+interface TabBarMoreProps {
+    /** Label of the button and title of the sheet. */
+    label?: string;
+    /** NavItems for the remaining destinations (rendered large in the Nav sheet). */
+    children: ReactNode;
+    closeLabel?: string;
+}
+/** “More”: opens the remaining destinations in the Nav sheet (Bottom Sheet). Shows “current” when one of them is. */
+declare function TabBarMore({ label: labelProp, children, closeLabel }: TabBarMoreProps): react.JSX.Element;
+
+interface DrawerProps extends DirtyGuardProps {
+    /** Says what it is (“Account”, “Filter”, “Invoice #1042”). Can be a logo for a navigation drawer – then set aria-label. */
+    title: ReactNode;
+    /** Name of the drawer when the title is not text (e.g. a logo). */
+    'aria-label'?: string;
+    /** Content; scrolls between header and footer. A function gets `close`: closes without asking – call it after saving. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    /**
+     * Only for decisions (Apply, Save) – usually a ButtonGroup. Links and switches act immediately.
+     * A function gets `close` (after applying or saving, never asks) and `cancel` (asks “Discard changes?” when isDirty).
+     */
+    footer?: ReactNode | ((close: () => void, cancel: () => void) => ReactNode);
+    /** right: account, filters, details (default) · left: navigation only. */
+    side?: 'left' | 'right';
+    /** sm 320 (links) · md 400 (filters) · lg 560 (details, forms). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+    className?: string;
+}
+/**
+ * Drawer – a modal panel that slides in from the side. Same building blocks and behaviour
+ * as the Dialog (React Aria ModalOverlay + Modal + Dialog): scrim, focus trap, no page scroll, Esc and the close
+ * button close it, focus returns to the trigger; `isDirty` asks “Discard changes?”. Below 640 px it keeps its side,
+ * viewport − 56 px wide; a swipe towards the edge closes it. Use inside a DialogTrigger or with isOpen.
+ */
+declare function Drawer({ title, 'aria-label': ariaLabel, children, footer, side, size, closeLabel, isDirty, discardText, className, ...openProps }: DrawerProps): react.JSX.Element;
+
+type ListType = 'bullet' | 'number' | 'check';
+interface ListProps extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, 'children'> {
+    /** bullet: unordered points (ul) · number: order matters (ol) · check: features, included first (ul). */
+    type?: ListType;
+    /** Without it the list takes the size of the surrounding text. sm body/sm · md body/md · lg body/lg. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Number list: first number (e.g. a list that continues after a paragraph). */
+    start?: number;
+    /** 2–7 ListItems. A nested List inside an item is level 2 (max 2 levels). */
+    children: ReactNode;
+}
+/**
+ * List – a real list in running text: bullets, numbers or a feature list.
+ * Plain markup, no library needed. Markers are neutral (text/secondary) in their own column; long items
+ * wrap flush with their first line. Level 2 (a List inside a ListItem) switches the marker: ring, “a.”.
+ */
+declare function List({ type, size, start, className, style, children, ...props }: ListProps): react.JSX.Element;
+interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+    children: ReactNode;
+    /** Feature list: not included – cross, muted text and a hidden “Not included:” for screen readers. */
+    excluded?: boolean;
+    /** Hidden prefix of excluded items. */
+    excludedLabel?: string;
+}
+/** One item of a List. */
+declare function ListItem({ children, excluded, excludedLabel, className, ...props }: ListItemProps): react.JSX.Element;
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** auto: stacked as soon as the list itself is narrower than 22.5 rem (360 px) (phone, Drawer, narrow column) · horizontal · stacked. */
+    layout?: 'auto' | 'horizontal' | 'stacked';
+    /** DescriptionItems. */
+    children: ReactNode;
+}
+/** Description list – term–value pairs for details of a record, an order or a profile. */
+declare function DescriptionList({ layout, className, children, ...props }: DescriptionListProps): react.JSX.Element;
+interface DescriptionItemProps {
+    /** The term (“Status”). */
+    term: ReactNode;
+    /** The value (“Active”). */
+    children: ReactNode;
+}
+/** One term–value pair (a div grouping dt and dd – valid inside dl). */
+declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
+
+interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'layout' | 'keyboardNavigationBehavior'> {
+    /** Required: names the list (“Inbox”). */
+    'aria-label'?: string;
+    /** plain: full-page lists (inbox) · card: inside settings or dashboards (border, radius/lg) · cards: records on mobile (Table cards, use ListCard). */
+    variant?: 'plain' | 'card' | 'cards';
+    /** Shows 3 skeleton rows instead of the items (aria-busy). */
+    isLoading?: boolean;
+    /** Shown when there are no rows: an EmptyState with `size="inline"`. */
+    emptyState?: ReactNode;
+    className?: string;
+}
+/**
+ * List view – an interactive list of objects in apps: inbox, people, files, notifications, settings
+ *. Built on React Aria GridList: ↑ ↓ move between rows, Enter opens a row, Tab reaches
+ * the controls inside a row (menu, switch, buttons). `selectionMode="multiple"` shows a checkbox per row and a click
+ * toggles the row – use it without `onAction` (React Aria would run the action on click instead).
+ * Rows can have swipe actions on touch (`swipeActions`) – the same actions always sit in the row's “…” menu.
+ */
+declare function ListView<T extends object>({ variant, isLoading, emptyState, className, children, items, ...props }: ListViewProps<T>): react.JSX.Element;
+interface ListRowProps extends Omit<GridListItemProps, 'children' | 'className' | 'style' | 'textValue'> {
+    /** Required. One line, most important word first. Also the row's accessible name. */
+    title: string;
+    /** One line (2-line row) or two lines (`lines={3}`). */
+    description?: ReactNode;
+    /** 3: description up to two lines (row 88). Default: 1 without, 2 with a description. */
+    lines?: 2 | 3;
+    /** Avatar (sized automatically: sm in 1-line rows, lg otherwise), an icon tile (ListRowIcon) or a 40 px thumbnail. */
+    leading?: ReactNode;
+    /** Meta text (time, size) in caption. */
+    meta?: ReactNode;
+    /** One trailing type per list: Badge, Menu (“…”), Switch or max 2 Button sm. With buttons the row has no action. */
+    trailing?: ReactNode;
+    /** The row navigates (href) – shows a chevron. */
+    chevron?: boolean;
+    /** New or unread: title and excerpt strong, meta in brand, dot below the meta, “Unread” for screen readers. */
+    unread?: boolean;
+    /** Screen-reader word for unread rows. */
+    unreadLabel?: string;
+    /**
+     * Touch only: end = swipe toward the start (left in LTR, e.g. Delete) · start = swipe toward the end (a safe action,
+     * e.g. Archive). Always put the same actions into the row's “…” menu – swipe is a shortcut, never the only way.
+     */
+    swipeActions?: {
+        start?: SwipeAction;
+        end?: SwipeAction;
+    };
+}
+interface SwipeAction {
+    /** Short verb (“Delete”, “Archive”). */
+    label: string;
+    icon: ReactNode;
+    /** Runs on a full swipe or a tap on the revealed action. Delete: remove at once and offer “Undo” in a Toast. */
+    onAction: () => void;
+    /** danger: feedback/danger/solid (Delete) · primary: action/primary (Archive). */
+    tone?: 'danger' | 'primary';
+}
+/** One row of a List view: leading – content – trailing. Height 48, 64 or 88 by lines. */
+declare function ListRow({ title, description, lines, leading, meta, trailing, chevron, unread, unreadLabel, swipeActions, ...props }: ListRowProps): react.JSX.Element;
+/** Leading icon in a 40 px tile (settings rows). Decorative – the title carries the meaning. */
+declare function ListRowIcon({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+interface ListCardProps extends Omit<GridListItemProps, 'children' | 'className' | 'style' | 'textValue'> {
+    /** Required. The record (“INV-2026-0140”). Also the card's accessible name. */
+    title: string;
+    /** Key number on the right of the title (amount, count) – strong, never truncated. */
+    amount?: ReactNode;
+    /** Second line, e.g. the owner with an Avatar (sized xs automatically). */
+    description?: ReactNode;
+    /** Bottom left: date or other meta in caption. */
+    meta?: ReactNode;
+    /** Bottom right: status as Badge sm with dot. */
+    status?: ReactNode;
+}
+/**
+ * List card – a record as a card, the mobile form of a table row. Use inside
+ * `<ListView variant="cards">`: the whole card opens the record (`href` or `onAction`); in selection mode
+ * a checkbox lg shows and a tap toggles the card.
+ */
+declare function ListCard({ title, amount, description, meta, status, ...props }: ListCardProps): react.JSX.Element;
+
+interface BulkAction {
+    /** Verb (“Export”, “Archive”, “Delete”). */
+    label: string;
+    onAction: () => void;
+    /** danger: destructive – confirm it (Alert dialog) or offer Undo (Toast). Mobile: ghost danger. */
+    variant?: 'default' | 'danger';
+    /** Icon for the “…” menu (actions that do not fit in the bar). */
+    icon?: ReactNode;
+}
+interface BulkActionBarProps {
+    /** Number of selected items. 0 hides the bar. */
+    count: number;
+    /** Desktop shows 3, mobile 2 (with more: 1 and “…”); the rest go into the “…” menu. Most important first, destructive last. */
+    actions: BulkAction[];
+    /** Clears the selection (× and Esc). */
+    onClear: () => void;
+    /** auto: floating dark bar on desktop, full-width bar at the bottom below 640 px · desktop · mobile. */
+    variant?: 'auto' | 'desktop' | 'mobile';
+    /** Texts (localize). */
+    countLabel?: (count: number) => string;
+    clearLabel?: string;
+    moreLabel?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * Bulk action bar – actions for the selected rows of a Table or List view.
+ * Appears with ≥ 1 selected item and floats, so selecting never shifts the layout. A toolbar: the count is
+ * announced, Esc or × clears the selection. Render it right after the list, so Tab reaches it next.
+ */
+declare function BulkActionBar({ count, actions, onClear, variant, countLabel: countLabelProp, clearLabel: clearLabelProp, moreLabel: moreLabelProp, 'aria-label': ariaLabelProp, className, }: BulkActionBarProps): react.JSX.Element;
+
+type EmptyStateType = 'first-use' | 'no-results' | 'error' | 'no-access' | 'all-done';
+type EmptyStateSize = 'page' | 'section' | 'inline';
+interface EmptyStateAction {
+    /** Verb that says what happens (“Create project”, “Clear filters”, “Try again”). */
+    label: string;
+    /** Runs the action. */
+    onPress?: () => void;
+    /** Second action only: navigates – rendered as a Link (“Learn more”, “View archive”). */
+    href?: string;
+    isDisabled?: boolean;
+}
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Sets the default icon, its tone and the look of the main action. */
+    type?: EmptyStateType;
+    /** page: a whole view · section: a card or panel · inline: inside a list or table (header stays). */
+    size?: EmptyStateSize;
+    /** Required. The situation in plain words – never “No data”. */
+    title: ReactNode;
+    /** Why it is empty or what comes next, in one or two sentences. */
+    description?: ReactNode;
+    /** Main action: primary for first use, secondary for all other types. “All done” needs none. */
+    action?: EmptyStateAction;
+    /** Second action as a text button, or a Link with `href`. */
+    secondaryAction?: EmptyStateAction;
+    /** Replaces the type's default icon (Lucide). */
+    icon?: ReactNode;
+    /** Illustration instead of the icon – only from the shared illustration style. Decorative. */
+    illustration?: ReactNode;
+    /** Heading level of the title (page and section). Match the page outline. Default: page h2, section h3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+/**
+ * Empty state – what users see when there is nothing to show, and what they can do next.
+ * Page and section render a `<section>` named by its heading; inline renders a plain block, so it does not add
+ * a landmark inside a list or table. “No results” puts its text in a polite status region; focus stays where it was.
+ */
+declare function EmptyState({ type, size, title, description, action, secondaryAction, icon, illustration, headingLevel, className, ...props }: EmptyStateProps): react.JSX.Element;
+
+interface PaginationProps {
+    /** Current page (1-based, controlled). */
+    page?: number;
+    /** Start page when uncontrolled. */
+    defaultPage?: number;
+    /** Called with the new page (apps). Not needed with `getPageHref`. */
+    onChange?: (page: number) => void;
+    /** Websites: every page becomes a real link (“?page=5”) – shareable, back button works. Works with RouterProvider. */
+    getPageHref?: (page: number) => string;
+    /** Number of pages. Default: totalItems / pageSize. With 1 page nothing is shown. */
+    totalPages?: number;
+    /** Total count: shows the summary (“81–100 of 380”). */
+    totalItems?: number;
+    /** Rows per page. */
+    pageSize?: number;
+    /** Shows “Rows per page” (Select sm). */
+    onPageSizeChange?: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    /** auto: compact below 640 px · full: summary, rows per page and pages · compact: ‹ Page 5 of 19 › (narrow panels). */
+    variant?: 'auto' | 'full' | 'compact';
+    /** Full only: md 40 · lg 48 (touch). Compact is always lg. */
+    size?: 'md' | 'lg';
+    /** Name of the navigation region. */
+    'aria-label'?: string;
+    /** Texts (localize). */
+    summary?: (from: number, to: number, total: number) => string;
+    pageSizeLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Accessible name of a page item and the compact text. */
+    pageLabel?: (page: number) => string;
+    compactLabel?: (page: number, totalPages: number) => string;
+    className?: string;
+}
+/**
+ * Pagination – move through long lists page by page. A navigation region:
+ * buttons for apps (`onChange`) or real links for websites (`getPageHref`). Full on desktop, compact below 640 px.
+ * After a change the app scrolls to the top of the list and focuses its heading. “Load more” is a Button, not a variant.
+ */
+declare function Pagination({ page: pageProp, defaultPage, onChange, getPageHref, totalPages: totalPagesProp, totalItems, pageSize, onPageSizeChange, pageSizeOptions, variant, size, 'aria-label': ariaLabelProp, summary: summaryProp, pageSizeLabel: pageSizeLabelProp, previousLabel: previousLabelProp, nextLabel: nextLabelProp, pageLabel: pageLabelProp, compactLabel: compactLabelProp, className, }: PaginationProps): react.JSX.Element | null;
+
+interface SearchFieldProps extends Omit<SearchFieldProps$1, 'children' | 'className' | 'style'> {
+    /** Visible label. Without it set `aria-label` (e.g. in a table toolbar or the header). */
+    label?: ReactNode;
+    /** Helper text below the field. */
+    description?: ReactNode;
+    /** A hint like “Search invoices”. Never the only label. */
+    placeholder?: string;
+    /** sm 32 (toolbars) · md 40 · lg 48 (search page, Quick search, mobile). */
+    size?: InputSize;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    className?: string;
+}
+/**
+ * Search field – a text field for a search term. Built on React Aria
+ * SearchField: Enter submits (`onSubmit`), Esc or × clears. Put it in a `<search>` element (search landmark);
+ * keep the term in the field after searching.
+ */
+declare function SearchField({ label, description, placeholder, size, clearLabel, className, ...props }: SearchFieldProps): react.JSX.Element;
+
+type SearchResultType = 'page' | 'document' | 'person' | 'media';
+interface SearchResultProps {
+    /** Sets the default leading icon: page (globe), document (file). Person and media take `leading`. */
+    type?: SearchResultType;
+    /** base: divider between hits, title in brand colour · aesthetic: no divider, larger title, rounded hover surface. */
+    variant?: 'base' | 'aesthetic';
+    /** Required. The hit's title – a link to the result. */
+    title: string;
+    href: string;
+    /** Search term: shown in bold in title and snippet (every match), never by colour alone. */
+    query?: string;
+    /** Where it lives (“Help center › Billing”). */
+    path?: ReactNode;
+    /** Text around the match, max 2 lines. A string gets the highlight. */
+    snippet?: ReactNode;
+    /** Type label as Badge sm (“Page”, “PDF”, “Video”). */
+    badge?: string;
+    /** Meta text next to the badge (“Updated 3 days ago”). */
+    meta?: ReactNode;
+    /** Person: Avatar (sized lg automatically). Media: an image (4:3; 128 wide, 160 in aesthetic). Overrides the type icon. */
+    leading?: ReactNode;
+    /** Heading level of the title. Match the page outline (default h3 below the results heading). */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Router options or target for the link. */
+    linkProps?: Omit<LinkProps$1, 'href' | 'children' | 'className'>;
+    className?: string;
+}
+/**
+ * Search result – one hit: path, title with the search term in bold, snippet,
+ * meta row with type badge. The whole result is one link (the title), so it is one tab stop.
+ * Put results into `<ul role="list" className="medo-search-results">` with one `<li>` per hit.
+ */
+declare function SearchResult({ type, variant, title, href, query, path, snippet, badge, meta, leading, headingLevel, linkProps, className, }: SearchResultProps): react.JSX.Element;
+
+interface QuickSearchProps<T extends object> {
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Opens with Cmd / Ctrl + K (ignored while the user types in another field). */
+    shortcut?: boolean;
+    /** The search term (controlled) – e.g. to load suggestions from the server. */
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    /** Filters the options on the client (contains, case insensitive). Off when the server filters. */
+    clientFilter?: boolean;
+    /** Empty field: Recent and Suggested. While typing: hits grouped by type (ListBoxSection), max 5 per group. */
+    children: ReactNode | ((item: T) => ReactNode);
+    items?: Iterable<T>;
+    /** Opens the highlighted hit (Enter or click). */
+    onAction?: (key: React.Key) => void;
+    /** “All results”: the search page with the same term. */
+    allResultsHref?: (query: string) => string;
+    /** Enter without a highlighted hit, and “Search all content” when nothing matches. */
+    onSearch?: (query: string) => void;
+    /** Texts (localize). */
+    'aria-label'?: string;
+    placeholder?: string;
+    cancelLabel?: string;
+    suggestionsLabel?: string;
+    allResultsLabel?: (query: string) => string;
+    noResultsLabel?: (query: string) => string;
+    searchAllLabel?: (query: string) => string;
+    hints?: {
+        navigate: string;
+        open: string;
+        close: string;
+    };
+}
+/**
+ * Quick search – find and open pages, files and people from anywhere. A modal with
+ * React Aria Autocomplete: focus stays in the field while ↑ ↓ move through the suggestions, Enter opens the
+ * highlighted hit, Esc closes and focus returns to the trigger. Desktop: overlay 640 wide · mobile: full screen with Cancel.
+ */
+declare function QuickSearch<T extends object>({ isOpen, defaultOpen, onOpenChange, shortcut, inputValue, onInputChange, clientFilter, children, items, onAction, allResultsHref, onSearch, 'aria-label': ariaLabelProp, placeholder: placeholderProp, cancelLabel: cancelLabelProp, suggestionsLabel: suggestionsLabelProp, allResultsLabel: allResultsLabelProp, noResultsLabel: noResultsLabelProp, searchAllLabel: searchAllLabelProp, hints: hintsProp, }: QuickSearchProps<T>): react.JSX.Element;
+
+/** Shows the matching parts of a text in bold (`className` on each match). Visual only; screen readers read plain text. */
+declare function Highlight({ text, query, all, as: Tag, className, }: {
+    text: string;
+    query?: string;
+    all?: boolean;
+    as?: 'mark' | 'span';
+    className?: string;
+}): ReactNode;
+
+interface BreadcrumbItem {
+    /** The page name – the same words as its title. */
+    label: string;
+    /** Link to the page. The last item is the current page and needs none. */
+    href?: string;
+}
+interface BreadcrumbsProps {
+    /** The path from the top: first the start page, last the current page (not a link). */
+    items: BreadcrumbItem[];
+    /** sm: dense apps (caption, 24) · md: websites (body/sm, 28). */
+    size?: 'sm' | 'md';
+    /** The first item shows a house icon; its label stays the accessible name (“Home”). */
+    homeIcon?: boolean;
+    /** auto: full path, below 640 px only a link to the parent page · full · back. From 5 levels the middle collapses into “…”. */
+    layout?: 'auto' | 'full' | 'back';
+    /** Texts (localize). */
+    'aria-label'?: string;
+    moreLabel?: (count: number) => string;
+    className?: string;
+}
+/**
+ * Breadcrumbs – where a page sits in the hierarchy, with links to the levels above.
+ * Built on React Aria Breadcrumbs: a navigation region with an ordered list, the current page last with
+ * aria-current="page". Not on the start page; place it above the page title.
+ */
+declare function Breadcrumbs({ items, size, homeIcon, layout, 'aria-label': ariaLabelProp, moreLabel: moreLabelProp, className, }: BreadcrumbsProps): react.JSX.Element | null;
+
+type AccordionSize = 'md' | 'lg';
+interface AccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'> {
+    /** md: apps and settings · lg: websites and FAQs. */
+    size?: AccordionSize;
+    /** Heading level of the item titles (h2–h4), matching the page outline. */
+    headingLevel?: 2 | 3 | 4;
+    /** Several sections open at once (default). false: one at a time – only for short, mutually exclusive steps. */
+    allowsMultipleExpanded?: boolean;
+    /** “Expand all” / “Collapse all” above groups with more than 6 sections (multiple only). */
+    expandAll?: boolean;
+    expandAllLabel?: string;
+    collapseAllLabel?: string;
+    /** AccordionItems. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Accordion – sections that open and close in place. Built on React Aria DisclosureGroup:
+ * each header is a button inside a real heading (aria-expanded, aria-controls); closed panels stay findable by
+ * the browser search (hidden="until-found"). Several open by default. A link to an item's id (#billing) opens it.
+ */
+declare function Accordion({ size, headingLevel, allowsMultipleExpanded, expandAll, expandAllLabel, collapseAllLabel, expandedKeys: expandedProp, defaultExpandedKeys, onExpandedChange, children, className, ...props }: AccordionProps): react.JSX.Element;
+interface AccordionItemProps {
+    /** Required: key in expandedKeys and the anchor for links (#billing). */
+    id: string;
+    /** Short and scannable: nouns for settings, real questions for FAQs. */
+    title: ReactNode;
+    /** Second line in the header. Announced as the button's description. */
+    description?: ReactNode;
+    /** Decorative icon before the title (20 md / 24 lg). */
+    icon?: ReactNode;
+    /** Badge sm – part of the button name (“Billing, Payment failed”). */
+    badge?: ReactNode;
+    isDisabled?: boolean;
+    /** Panel content – text, a form or a list. No accordion inside. */
+    children: ReactNode;
+}
+/** One section of an Accordion: a header button inside a heading and its panel. */
+declare function AccordionItem({ id, title, description, icon, badge, isDisabled, children }: AccordionItemProps): react.JSX.Element;
+
+type Value = number | number[];
+interface SliderProps<T extends Value = number> extends Omit<SliderProps$1<T>, 'children' | 'className' | 'style'> {
+    /** Visible label. Without it set `aria-label`. */
+    label?: ReactNode;
+    /** Range: a name per thumb (“Minimum price”, “Maximum price”). Default: “Minimum” / “Maximum” + label. */
+    thumbLabels?: [string, string];
+    /** Tick marks for few fixed steps (≤ 10) – the thumb snaps to them. */
+    showTicks?: boolean;
+    /** Min and max below the track, when the range is not obvious from the label. */
+    showMinMax?: boolean;
+    /** The value label above the track (always visible by default). */
+    showValue?: boolean;
+    className?: string;
+}
+/**
+ * Slider – pick an approximate value or a range by dragging. Built on React Aria Slider:
+ * arrow keys (step), Page Up/Down (10 %), Home/End, a click on the track moves the nearest thumb; range thumbs
+ * never cross. The value is always shown next to the label and read out in the same format (`formatOptions`).
+ * While dragging, a tooltip repeats it above the thumb. For exact values use SliderField.
+ */
+declare function Slider<T extends Value = number>({ label, thumbLabels, showTicks, showMinMax, showValue, minValue, maxValue, step, formatOptions, className, ...props }: SliderProps<T>): react.JSX.Element;
+interface SliderFieldProps<T extends Value = number> extends Omit<SliderProps<T>, 'value' | 'defaultValue' | 'onChange' | 'showValue'> {
+    value: T;
+    onChange: (value: T) => void;
+    /** Accessible names of the number inputs. Default: the label (single) or the thumb labels (range). */
+    inputLabels?: [string, string];
+}
+/**
+ * Slider field – a Slider plus number inputs for exact values. Single: input on the
+ * right (88). Range: two inputs below (min – max). Slider and inputs stay in sync; the inputs clamp on blur.
+ */
+declare function SliderField<T extends Value = number>({ value, onChange, inputLabels, ...props }: SliderFieldProps<T>): react.JSX.Element;
+
+interface NumberFieldProps extends Omit<NumberFieldProps$1, 'children' | 'className' | 'style'> {
+    /** Visible label. Without it set `aria-label` – only where the context names the field (e.g. next to a Slider). */
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    placeholder?: string;
+    /** sm 32 · md 40 · lg 48 px. lg on mobile and touch. */
+    size?: InputSize;
+    className?: string;
+}
+/**
+ * Number field – a number with format and limits. Built on React Aria
+ * NumberField: formats with Intl (`formatOptions`: currency, percent, unit), clamps to min/max and rounds to the
+ * step when the field is left, ↑ ↓ change by one step. Tabular figures.
+ */
+declare function NumberField({ label, description, errorMessage, placeholder, size, className, ...props }: NumberFieldProps): react.JSX.Element;
+
+interface LinkProps extends Omit<LinkProps$1, 'children' | 'className'> {
+    /** The text says where it goes (“Privacy policy”, not “click here”). */
+    children: ReactNode;
+    /** inline: inside running text, always underlined · standalone: own line, underline on hover. */
+    variant?: 'inline' | 'standalone';
+    /** Standalone only: sm (label/sm) · md (label/md). Inline links take the size of the surrounding text. */
+    size?: 'sm' | 'md';
+    /** Another website: shows the external icon. With target="_blank" screen readers also hear “opens in a new tab”. */
+    external?: boolean;
+    /** Standalone only: arrow after the text (“View all →”). */
+    arrow?: boolean;
+    /** Hidden text for links that open a new tab. */
+    newTabLabel?: string;
+    className?: string;
+}
+/**
+ * Link – navigates to a page, place or file. Built on React Aria Link:
+ * a real `<a href>`, works with client-side routers through RouterProvider. For actions use Button.
+ */
+declare function Link({ children, variant, size, external, arrow, newTabLabel, className, ...props }: LinkProps): react.JSX.Element;
+
+type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** danger: failed or blocks · warning: risk ahead · success: done · info: good to know. */
+    tone?: AlertTone;
+    /** inline: in the content · banner: full width above the header, for app-wide states. */
+    variant?: 'inline' | 'banner';
+    /** Required. Says what happened (“Your trial ends in 3 days”). */
+    title: ReactNode;
+    /** What to do next. */
+    children?: ReactNode;
+    /** Max two text buttons (Button variant="text" size="sm"), the main one first. */
+    actions?: ReactNode;
+    /** Shows the close button. Only when it is safe to hide the message. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    /**
+     * Set when the alert appears after the page has loaded: danger and warning are announced
+     * immediately (role="alert"), info and success politely (role="status").
+     */
+    announce?: boolean;
+}
+/** Alert – persistent message inside the page. Plain markup, no library needed. */
+declare function Alert({ tone, variant, title, children, actions, onDismiss, dismissLabel, announce, className, ...props }: AlertProps): react.JSX.Element;
+
+interface CardProps {
+    /** Required: every card has a heading, so it can be scanned and announced. */
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Heading level of the title. Match the page outline (default h3). */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** outlined (default) · elevated (needs attention, draggable) · filled (inside white areas) · brand (one per view) · plain (editorial). */
+    variant?: 'outlined' | 'elevated' | 'filled' | 'brand' | 'plain';
+    /** standard 24 px · compact 16 px (dense layouts and mobile). */
+    density?: 'standard' | 'compact';
+    /** vertical (media on top, 16:9) · horizontal (media 180 px left, for lists). */
+    layout?: 'vertical' | 'horizontal';
+    /** Image or video. Decorative images use alt="". */
+    media?: ReactNode;
+    /** Actions for the whole card, next to the title (ButtonGroup context="header"). */
+    headerActions?: ReactNode;
+    /** Actions that finish a task in the card (ButtonGroup context="footer"). */
+    footer?: ReactNode;
+    /** Makes the whole card open something: the title becomes one link stretched over the card. */
+    href?: LinkProps$1['href'];
+    /** Link props such as target or routerOptions. */
+    linkProps?: Omit<LinkProps$1, 'href' | 'children' | 'className'>;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Card – a container for one topic. Rendered as an article with a heading. */
+declare function Card({ title, subtitle, headingLevel, variant, density, layout, media, headerActions, footer, href, linkProps, children, className, style, }: CardProps): react.JSX.Element;
+
+type Density = 'standard' | 'compact';
+interface StaticTableProps {
+    /** thead / tbody / tr / th / td as usual. Use <th scope="row"> for row headers. */
+    children: ReactNode;
+    /** Visible caption or, with captionHidden, a name for screen readers. */
+    caption?: ReactNode;
+    captionHidden?: boolean;
+    density?: Density;
+    striped?: boolean;
+    /** Without the border and radius, e.g. inside a card or documentation. */
+    plain?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Static table – a native, non-interactive table with the Table look.
+ * For content and simple data. Numbers: add className="medo-table__cell--number".
+ * When it is wider than its container it scrolls sideways; the container then takes the keyboard focus
+ * (arrow keys scroll) and is announced as a region named by the caption.
+ */
+declare function StaticTable({ children, caption, captionHidden, density, striped, plain, className, style }: StaticTableProps): react.JSX.Element;
+interface TableProps extends Omit<TableProps$1, 'className' | 'style'> {
+    density?: Density;
+    /** Bar above the header: search (Input sm 240), filter, ColumnsMenu, primary action on the right (Buttons sm). */
+    toolbar?: ReactNode;
+    /** Bar below the rows, usually Pagination. */
+    footer?: ReactNode;
+    striped?: boolean;
+    plain?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Table – interactive data table. Built on React Aria Table:
+ * arrow keys move between cells, Space selects, Enter opens, sortable headers announce the order.
+ * Data logic (sorting, filtering, paging) stays in your code or a headless table library.
+ */
+declare function Table({ density, striped, plain, toolbar, footer, className, style, ...props }: TableProps): react.JSX.Element;
+declare function TableHeader<T extends object>({ columns, children, ...props }: Omit<TableHeaderProps<T>, 'className'>): react.JSX.Element;
+interface ColumnProps extends Omit<ColumnProps$1, 'className' | 'children'> {
+    children: ReactNode;
+    /** end: numbers, amounts, dates – right-aligned with tabular figures. */
+    align?: 'start' | 'end';
+}
+/** Header cell. With allowsSorting it is a button: ascending → descending → ascending. */
+declare function Column({ children, align, ...props }: ColumnProps): react.JSX.Element;
+declare function TableBody<T extends object>(props: Omit<TableBodyProps<T>, 'className'>): react.JSX.Element;
+declare function Row<T extends object>({ id, columns, children, ...props }: Omit<RowProps<T>, 'className'>): react.JSX.Element;
+interface CellProps extends Omit<CellProps$1, 'className'> {
+    align?: 'start' | 'end';
+}
+declare function Cell({ align, ...props }: CellProps): react.JSX.Element;
+
+interface ColumnOption {
+    id: string;
+    label: string;
+    /** Can't be hidden: the first column (row header) and actions. */
+    isLocked?: boolean;
+}
+interface ColumnsMenuProps {
+    /** All columns that can be shown, in table order. */
+    columns: ColumnOption[];
+    /** Ids of the visible columns. */
+    visibleColumns: string[];
+    onVisibleColumnsChange: (ids: string[]) => void;
+    /** Button label. */
+    label?: string;
+    /** Title of the list. */
+    title?: string;
+}
+/**
+ * Columns menu – shows or hides table columns. A ghost button sm in the
+ * table toolbar opens a Popover sm with checkboxes; locked columns stay visible. Render only the visible columns.
+ */
+declare function ColumnsMenu({ columns, visibleColumns, onVisibleColumnsChange, label: labelProp, title: titleProp }: ColumnsMenuProps): react.JSX.Element;
+
+/** “2.4 MB”, “860 kB” – decimal units like the operating systems' file dialogs. */
+declare function formatBytes(bytes: number, locale?: string): string;
+interface UploadFile {
+    /** Stable id (e.g. crypto.randomUUID() when the file is added). */
+    id: string;
+    name: string;
+    /** Size in bytes. */
+    size: number;
+    /** MIME type. image/* with a `previewUrl` shows a thumbnail, everything else a type icon. */
+    type?: string;
+    status: 'uploading' | 'done' | 'error';
+    /** Uploaded bytes (ProgressEvent.loaded). Without it the bar is indeterminate. */
+    loaded?: number;
+    /** What happened and how to fix it (“Upload interrupted. Check your connection and retry.”). No error codes. */
+    error?: string;
+    /** Thumbnail (URL.createObjectURL(file) or the server URL). */
+    previewUrl?: string;
+    /** false hides “Retry” (e.g. the server rejected the file). Default true. */
+    canRetry?: boolean;
+}
+interface UploadTexts {
+    /** Dropzone and trigger. */
+    title: string;
+    dropTitle: string;
+    chooseFiles: string;
+    chooseFile: string;
+    listLabel: string;
+    /** File actions – always name the file. */
+    cancel: (name: string) => string;
+    remove: (name: string) => string;
+    retry: (name: string) => string;
+    retryShort: string;
+    /** Name of the progress bar. */
+    uploading: (name: string) => string;
+    /** “1.6 of 2.4 MB · 64 %” */
+    progress: (loaded: string, total: string, percent: number) => string;
+    /** Validation. */
+    typeNotAllowed: (names: string, types: string) => string;
+    tooLarge: (size: string, max: string) => string;
+    tooMany: (max: number) => string;
+    /** Polite announcements. */
+    uploaded: (name: string) => string;
+    failed: (name: string, error: string) => string;
+}
+/** English defaults. The components use the texts of the current language (see i18n). */
+declare const defaultUploadTexts: UploadTexts;
+interface ItemActions {
+    onRemove: (id: string) => void;
+    onCancel?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    texts?: Partial<UploadTexts>;
+}
+interface FileItemProps extends ItemActions {
+    file: UploadFile;
+    className?: string;
+}
+/**
+ * File item – one file in the upload list. Uploading: progress + cancel · Done: size +
+ * remove · Error: the reason + retry + remove. Images show a 40 px thumbnail, other files a type icon.
+ */
+declare function FileItem({ file, onRemove, onCancel, onRetry, texts: own, className }: FileItemProps): react.JSX.Element;
+interface FileTileProps extends ItemActions {
+    file: UploadFile;
+    className?: string;
+}
+/**
+ * File tile – an image in the grid view. Uploading: dark overlay with % and bar ·
+ * Done: remove top right · Error: danger border, the overlay retries, the caption names the problem.
+ */
+declare function FileTile({ file, onRemove, onCancel, onRetry, texts: own, className }: FileTileProps): react.JSX.Element;
+interface PickerProps {
+    /** Accepted types as for <input accept>: [“.pdf”, “image/*”]. Checked again before upload. */
+    acceptedFileTypes?: string[];
+    /** Several files at once. Default true. */
+    allowsMultiple?: boolean;
+    /** Mobile: open the camera first (“environment” = back camera). */
+    defaultCamera?: 'user' | 'environment';
+    isDisabled?: boolean;
+    /** Types, size and count – shown before the user picks a file. */
+    hint?: ReactNode;
+    /** Validation or required message. Never only by color. */
+    errorMessage?: ReactNode;
+    onSelect: (files: File[]) => void;
+    texts?: Partial<UploadTexts>;
+    className?: string;
+}
+interface DropzoneProps extends PickerProps {
+    /** Ids of elements that also name the zone (the field label). */
+    'aria-labelledby'?: string;
+}
+/**
+ * Dropzone – drag and drop files or choose them. Built on React Aria DropZone +
+ * FileTrigger: the button always opens the system picker (drag and drop is only a shortcut, WCAG 2.5.7),
+ * the zone is focusable for paste (Ctrl+V). Below 640 px use the FileTrigger instead.
+ */
+declare function Dropzone({ acceptedFileTypes, allowsMultiple, defaultCamera, isDisabled, hint, errorMessage, onSelect, texts: own, className, ...props }: DropzoneProps): react.JSX.Element;
+interface FileTriggerProps extends PickerProps {
+    label?: ReactNode;
+    /** Visual marker; check “at least one file” on submit and pass `errorMessage`. */
+    isRequired?: boolean;
+}
+/**
+ * File trigger – compact upload for forms and mobile: label, Button secondary with
+ * upload icon, hint, error. The system picker offers camera, photos and files on touch devices.
+ */
+declare function FileTrigger({ label, isRequired, acceptedFileTypes, allowsMultiple, defaultCamera, isDisabled, hint, errorMessage, onSelect, texts: own, className, }: FileTriggerProps): react.JSX.Element;
+interface UploadFieldProps extends Omit<ItemActions, 'texts'> {
+    /** Visible label. Without it set `aria-label`. */
+    label?: ReactNode;
+    'aria-label'?: string;
+    /** The files – controlled. The app uploads them (fetch, S3, tus …) and updates status and `loaded`. */
+    files: UploadFile[];
+    /** Files that passed type, size and count. Start the upload right away. */
+    onAdd: (files: File[]) => void;
+    /**
+     * auto: Dropzone + list, below 640 px the File trigger (default) · list · compact (File trigger + list, forms) ·
+     * grid (images only: tiles; below 640 px with the File trigger).
+     */
+    layout?: 'auto' | 'list' | 'compact' | 'grid';
+    acceptedFileTypes?: string[];
+    /** Readable form of the types for hint and message (“PDF, JPG or PNG”). */
+    typesLabel?: string;
+    /** Max size per file in bytes. */
+    maxSize?: number;
+    /** Max number of files. 1 = single file picker. */
+    maxFiles?: number;
+    defaultCamera?: 'user' | 'environment';
+    /** Default: “{typesLabel} · max. {maxSize} each”. */
+    hint?: ReactNode;
+    /** Field error from the app (e.g. required on submit). Wins over the built-in validation message. */
+    errorMessage?: ReactNode;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    texts?: Partial<UploadTexts>;
+    className?: string;
+}
+/**
+ * Upload field – ready composition. Checks type, size and count in the browser
+ * before anything is uploaded (check again on the server). Rejected types and too many files show at the
+ * picker, too large files as an error row – removable. Results are announced in a polite live region.
+ */
+declare function UploadField({ label, 'aria-label': ariaLabel, files, onAdd, onRemove, onCancel, onRetry, layout, acceptedFileTypes, typesLabel, maxSize, maxFiles, defaultCamera, hint, errorMessage, isRequired, isDisabled, texts: own, className, }: UploadFieldProps): react.JSX.Element;
+
+interface CalendarTexts {
+    previousMonth: string;
+    nextMonth: string;
+    previousYear: string;
+    nextYear: string;
+    previousYears: string;
+    nextYears: string;
+    /** Name of the month-and-year button: “October 2026 – choose month and year”. */
+    chooseMonth: (title: string) => string;
+    chooseYear: (year: string) => string;
+    weekNumber: string;
+}
+/** English defaults. The components use the texts of the current language (see i18n). */
+declare const defaultCalendarTexts: CalendarTexts;
+interface SharedProps {
+    /** md: 40 px days for desktop popovers · lg: 48 px for touch (Bottom Sheet). */
+    size?: 'md' | 'lg';
+    /** ISO week numbers (KW) before each row. */
+    showWeekNumbers?: boolean;
+    texts?: Partial<CalendarTexts>;
+    className?: string;
+}
+interface CalendarProps<T extends DateValue> extends Omit<CalendarProps$1<T>, 'children' | 'className' | 'style' | 'visibleDuration'>, SharedProps {
+}
+/**
+ * Calendar – pick a day. React Aria Calendar: a grid with arrow keys (day/week),
+ * Page Up/Down (month), Shift + Page Up/Down (year), Home/End. The month-and-year button switches to a month
+ * grid, then a year grid – far dates in three clicks. Weekdays and the first day of the week from the locale.
+ */
+declare function Calendar<T extends DateValue>({ size, showWeekNumbers, texts, className, ...props }: CalendarProps<T>): react.JSX.Element;
+interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarProps$1<T>, 'children' | 'className' | 'style' | 'visibleDuration'>, SharedProps {
+    /** auto: two months on desktop, one below 640 px. */
+    visibleMonths?: 'auto' | 1 | 2;
+}
+/**
+ * Range calendar – pick a start and an end day. The first click sets the
+ * start, the second the end; hovering previews the range. Two months side by side on desktop, one on mobile.
+ */
+declare function RangeCalendar<T extends DateValue>({ size, showWeekNumbers, visibleMonths, texts, className, ...props }: RangeCalendarProps<T>): react.JSX.Element;
+
+interface FieldBase {
+    /** Visible label. Without it set `aria-label`. */
+    label?: ReactNode;
+    description?: ReactNode;
+    /** A function gets the validation details (rangeUnderflow, rangeOverflow, badInput) – name the rule. */
+    errorMessage?: ReactNode | ((validation: ValidationResult) => ReactNode);
+    /** md 40 (desktop) · lg 48 (touch, below 640 px). */
+    size?: 'md' | 'lg';
+    className?: string;
+}
+interface DateFieldProps<T extends DateValue> extends Omit<DateFieldProps$1<T>, 'children' | 'className' | 'style'>, FieldBase {
+}
+/**
+ * Date field – type a date without a calendar. React Aria DateField: every segment is a
+ * spinbutton (“day”, “month”, “year”), ↑ ↓ change it, ← → move, Backspace clears, a pasted date fills all.
+ * `granularity="minute"` adds the time. For a calendar use DatePicker.
+ */
+declare function DateField<T extends DateValue>({ label, description, errorMessage, size, className, ...props }: DateFieldProps<T>): react.JSX.Element;
+interface TimeSlot {
+    value: TimeValue;
+    /** Booked slots stay visible, disabled, with the reason (“Booked”). */
+    isDisabled?: boolean;
+    reason?: string;
+}
+interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, 'children' | 'className' | 'style'>, FieldBase {
+    /** Optional fixed times (e.g. every 15 min). Adds a clock button that opens them. No clock faces. */
+    slots?: TimeSlot[];
+    /** Name of the clock button and the list. */
+    slotsLabel?: string;
+}
+/**
+ * Time field – type a time. HH:MM, 24 h in de – from the locale. Typing only;
+ * with `slots` a clock button opens a list of fixed times (bookings), booked ones disabled with a reason.
+ */
+declare function TimeField({ label, description, errorMessage, size, slots, slotsLabel: slotsLabelProp, className, defaultValue, onChange, ...props }: TimeFieldProps): react.JSX.Element;
+
+/**
+ * Built-in texts of the components: button labels, screen-reader names, announcements, validation messages.
+ * One object per language (en.ts, de.ts). TypeScript checks that every language has every text with the
+ * right parameters. A component prop (e.g. `closeLabel`) always wins over these defaults.
+ */
+interface Messages {
+    common: {
+        close: string;
+        cancel: string;
+        back: string;
+        more: string;
+        done: string;
+        search: string;
+        showResults: string;
+        loading: string;
+        clear: string;
+        clearAll: string;
+        noResults: string;
+        noResultsFor: (query: string) => string;
+        /** Name of a chosen value list: “Assignee: selected”. */
+        selected: (name: string) => string;
+        /** Announcement after removing values: “Design removed”. */
+        removed: (labels: string[]) => string;
+        /** Combobox: row that creates a new value. */
+        add: (text: string) => string;
+        create: string;
+        reset: string;
+        /** Sheet footer: “3 selected”. */
+        countSelected: (count: number) => string;
+        /** Fallback name of chosen values without a text label. */
+        selectedValues: string;
+    };
+    /** Key names in shortcuts (⌘, ⇧ and Alt are the same everywhere). */
+    keys: {
+        control: string;
+    };
+    accordion: {
+        expandAll: string;
+        collapseAll: string;
+    };
+    alert: {
+        dismiss: string;
+    };
+    avatar: {
+        status: Record<'online' | 'away' | 'busy' | 'offline', string>;
+        unknownPerson: string;
+        unknownOrganization: string;
+        more: (count: number) => string;
+    };
+    breadcrumbs: {
+        label: string;
+        more: (count: number) => string;
+    };
+    bulkActionBar: {
+        label: string;
+        count: (count: number) => string;
+        clear: string;
+        more: string;
+    };
+    calendar: {
+        previousMonth: string;
+        nextMonth: string;
+        previousYear: string;
+        nextYear: string;
+        previousYears: string;
+        nextYears: string;
+        chooseMonth: (title: string) => string;
+        chooseYear: (year: string) => string;
+        weekNumber: string;
+    };
+    datePicker: {
+        openCalendar: string;
+        time: string;
+        presets: string;
+        beforeMin: (date: string) => string;
+        afterMax: (date: string) => string;
+        unavailable: string;
+        reversed: string;
+        today: string;
+        yesterday: string;
+        last7Days: string;
+        last14Days: string;
+        last30Days: string;
+        thisMonth: string;
+        lastMonth: string;
+        availableTimes: string;
+    };
+    dialog: {
+        discardTitle: string;
+        discardDescription: string;
+        discardAction: string;
+        discardCancel: string;
+    };
+    embed: {
+        video: EmbedMessages;
+        map: EmbedMessages;
+        generic: EmbedMessages;
+        privacy: string;
+    };
+    list: {
+        notIncluded: string;
+    };
+    listView: {
+        unread: string;
+    };
+    navigation: {
+        skipToContent: string;
+        main: string;
+        app: string;
+        menu: string;
+        collapse: string;
+        expand: string;
+    };
+    pagination: {
+        label: string;
+        summary: (from: number, to: number, total: number) => string;
+        pageSize: string;
+        previous: string;
+        next: string;
+        page: (page: number) => string;
+        pageOf: (page: number, total: number) => string;
+    };
+    quickSearch: {
+        placeholder: string;
+        suggestions: string;
+        allResults: (query: string) => string;
+        noResults: (query: string) => string;
+        searchAll: (query: string) => string;
+        navigate: string;
+        open: string;
+    };
+    searchField: {
+        clear: string;
+    };
+    select: {
+        placeholder: string;
+        clearSelection: string;
+    };
+    combobox: {
+        placeholder: string;
+    };
+    slider: {
+        minimum: (label: string) => string;
+        maximum: (label: string) => string;
+    };
+    /** scrollRegion: name of a table that scrolls sideways and has no caption. */
+    table: {
+        columns: string;
+        showColumns: string;
+        scrollRegion: string;
+    };
+    textField: {
+        counter: (count: number, limit: number) => string;
+        tooMany: (over: number) => string;
+        /** Announcement after a pause. */
+        charactersLeft: (left: number) => string;
+        charactersTooMany: (over: number) => string;
+    };
+    upload: {
+        title: string;
+        dropTitle: string;
+        chooseFiles: string;
+        chooseFile: string;
+        listLabel: string;
+        cancel: (name: string) => string;
+        remove: (name: string) => string;
+        retry: (name: string) => string;
+        retryShort: string;
+        uploading: (name: string) => string;
+        progress: (loaded: string, total: string, percent: number) => string;
+        typeNotAllowed: (names: string, types: string) => string;
+        tooLarge: (size: string, max: string) => string;
+        tooMany: (max: number) => string;
+        uploaded: (name: string) => string;
+        failed: (name: string, error: string) => string;
+    };
+}
+/** Texts of the Embed consent for one type. provider: the service (“Example Video”), to: who receives the data (“Example Inc.”). */
+interface EmbedMessages {
+    title: string;
+    body: (provider: string | undefined, to: string | undefined) => string;
+    bodyCompact: (provider: string | undefined, company: string | undefined, to: string | undefined) => string;
+    load: string;
+    remember: (provider: string | undefined) => string;
+}
+
+declare const de: Messages;
+
+/** English (default and fallback). */
+declare const en: Messages;
+
+/**
+ * Own texts for all components below, e.g. another language or a different tone:
+ *   <MessagesProvider messages={{ ...enMessages, common: { ...enMessages.common, close: 'Fermer' } }}>
+ * Wins over the built-in languages. Props of a single component still win over both.
+ */
+declare function MessagesProvider({ messages, children }: {
+    messages: Messages;
+    children: ReactNode;
+}): react.JSX.Element;
+/** The built-in texts for the current language. */
+declare function useMessages(): Messages;
+
+interface DatePickerTexts extends CalendarTexts {
+    openCalendar: string;
+    done: string;
+    time: string;
+    presets: string;
+    /** Validation – name the rule, never just “invalid date”. */
+    beforeMin: (date: string) => string;
+    afterMax: (date: string) => string;
+    unavailable: string;
+    reversed: string;
+}
+/** English defaults. The components use the texts of the current language (see i18n). */
+declare const defaultDatePickerTexts: Omit<DatePickerTexts, keyof CalendarTexts>;
+interface PickerBase {
+    label?: ReactNode;
+    description?: ReactNode;
+    /** Own message or a function of the validation details. Default: the built-in messages (min, max, unavailable, reversed). */
+    errorMessage?: ReactNode | ((validation: ValidationResult) => ReactNode);
+    /** md 40 (desktop) · lg 48 (touch). */
+    size?: 'md' | 'lg';
+    /** auto: popover on desktop, Bottom Sheet with a lg calendar below 640 px · popover · sheet. */
+    overlay?: 'auto' | 'popover' | 'sheet';
+    /** ISO week numbers in the calendar. */
+    showWeekNumbers?: boolean;
+    texts?: Partial<DatePickerTexts>;
+    className?: string;
+}
+interface DatePickerProps<T extends DateValue> extends Omit<DatePickerProps$1<T>, 'children' | 'className' | 'style'>, PickerBase {
+}
+/**
+ * Date picker – type a date or pick it. The field is the main input, the calendar is a
+ * helper: the button “Open calendar” (or Alt + ↓) opens it, picking a day closes it and focus returns to the
+ * field. `granularity="minute"` makes it a date + time picker with a time field in the panel.
+ */
+declare function DatePicker<T extends DateValue>({ label, description, errorMessage, size, overlay, showWeekNumbers, texts, className, ...props }: DatePickerProps<T>): react.JSX.Element;
+interface DateRangePreset {
+    label: string;
+    value: {
+        start: DateValue;
+        end: DateValue;
+    };
+}
+/**
+ * The default presets (Today … Last month), relative to today in the local time zone.
+ * Labels: own ones win, else those of `messages` (default English; the DateRangePicker passes the current language).
+ */
+declare function defaultDatePresets(labels?: Partial<Record<'today' | 'yesterday' | 'last7' | 'last14' | 'last30' | 'thisMonth' | 'lastMonth', string>>, messages?: Messages): DateRangePreset[];
+interface DateRangePickerProps<T extends DateValue> extends Omit<DateRangePickerProps$1<T>, 'children' | 'className' | 'style'>, PickerBase {
+    /** true: the default presets (Today … Last month) · own list · none. Fits dashboards and filters. */
+    presets?: boolean | DateRangePreset[];
+}
+/**
+ * Date range picker – start and end in one field. Two months side by side on desktop,
+ * one on mobile; the first click sets the start, the second the end, hovering previews the range. Optional presets.
+ */
+declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, size, overlay, showWeekNumbers, presets, texts, className, ...props }: DateRangePickerProps<T>): react.JSX.Element;
+
+type ImageRatio = '1:1' | '3:4' | '4:3' | '3:2' | '16:9' | '21:9' | 'original';
+interface MediaPlayButtonProps {
+    /** md 48 (cards, lists) · lg 64 (hero, player). */
+    size?: 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Media play button – marks video on a thumbnail. Visual only: the whole
+ * thumbnail is the hit area (a link or button around it); hover, pressed and focus come from there.
+ */
+declare function MediaPlayButton({ size, className }: MediaPlayButtonProps): react.JSX.Element;
+interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'src' | 'placeholder' | 'children' | 'className' | 'style'> {
+    /** Without src the image stays in its loading state (e.g. while the URL is resolved). */
+    src?: string;
+    /** Required. Describe the purpose, not the pixels. Decorative images: alt="" on purpose. */
+    alt: string;
+    /** Reserves the space before the file arrives. original: from width/height (fallback 3:2 while loading). */
+    ratio?: ImageRatio;
+    /** cover: photos (fills, crops) · contain: logos, screenshots, product shots, charts (shows everything). */
+    fit?: 'cover' | 'contain';
+    /** Default radius/md; in cards the image takes the card's radius (none). */
+    radius?: 'none' | 'sm' | 'md' | 'lg';
+    /** 1 px border/media inside – for images on a similar background. */
+    bordered?: boolean;
+    /** Tiny preview (≈ 20 px, data URI) for blur-up. Without it a Skeleton shows. */
+    placeholder?: string;
+    /** Hero / largest image at the top: loads first (eager, fetchpriority high). Everything else loads lazily. */
+    priority?: boolean;
+    /** Text on a gradient – translatable, searchable, read by screen readers. Never bake text into images. */
+    overlay?: {
+        title: ReactNode;
+        meta?: ReactNode;
+        position?: 'bottom' | 'top';
+    };
+    /** One Badge (sm), top left. */
+    badge?: ReactNode;
+    /** Marks video. */
+    play?: 'md' | 'lg';
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Image – an image with reserved space and calm loading states. Loading: blur-up preview or
+ * Skeleton; the image fades in (250 ms; 100 ms with reduced motion). Error keeps the space and shows image-off;
+ * the alt text stays available. Overlays (text, badge, play) only on the loaded image.
+ */
+declare function Image({ src, alt, ratio, fit, radius, bordered, placeholder, priority, overlay, badge, play, className, style, onLoad, onError, ...props }: ImageProps): react.JSX.Element;
+interface FigureProps {
+    /** The Image. */
+    children: ReactNode;
+    /** Describes what matters (adds to the image – never repeat the alt text). */
+    caption?: ReactNode;
+    /** Names the source (“© Photographer”). */
+    credit?: ReactNode;
+    className?: string;
+}
+/** Figure – image with caption and credit. A real figure + figcaption. */
+declare function Figure({ children, caption, credit, className }: FigureProps): react.JSX.Element;
+
+type EmbedType = 'video' | 'map' | 'generic';
+interface EmbedTexts {
+    title: string;
+    /** Default size: who provides it and what is sent. */
+    body: string;
+    /** Compact size (< 480 px). */
+    bodyCompact: string;
+    load: string;
+    remember: string;
+    privacy: string;
+}
+/**
+ * Texts per type. provider: the service (“Example Video”) · company: who runs it, when it differs (“Example Inc.”).
+ * `messages`: the language (default English); the component passes the current one.
+ */
+declare function defaultEmbedTexts(type: EmbedType, provider?: string, company?: string, messages?: Messages): EmbedTexts;
+interface EmbedConsentProps {
+    type?: EmbedType;
+    /** Name of the service that provides the content (“Example Video”). */
+    provider?: string;
+    /** Who receives the data, when it differs from the service (“Example Inc.”). */
+    company?: string;
+    /** The embed URL – requested only after consent. Prefer the privacy-friendly embed URL of the service, if it offers one. */
+    src: string;
+    /** Required: names the iframe (“Video: Product tour”). */
+    title: string;
+    /** Ratio of the final embed. The placeholder may grow so text never clips. */
+    ratio?: Exclude<ImageRatio, 'original'>;
+    /** The provider's privacy policy (or your own). */
+    privacyHref: string;
+    /** Stored consent from the consent manager – loads at once. */
+    isConsented?: boolean;
+    /** The user clicked “Load”; `remember` = “Always load …” checked – store it per provider in the consent manager. */
+    onConsent?: (remember: boolean) => void;
+    /** iframe permissions, e.g. “autoplay; encrypted-media; picture-in-picture; fullscreen”. */
+    allow?: string;
+    texts?: Partial<EmbedTexts>;
+    className?: string;
+}
+/**
+ * Embed consent – two-click placeholder for third-party embeds.
+ * Nothing loads from the provider – not even a thumbnail – until the user clicks. Then the iframe replaces the
+ * placeholder in place and takes the focus. Compact below 480 px width (measured on the component).
+ */
+declare function EmbedConsent({ type, provider, company, src, title, ratio, privacyHref, isConsented, onConsent, allow, texts, className, }: EmbedConsentProps): react.JSX.Element;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertProps, type AlertTone, AppHeader, type AppHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, BadgeCount, type BadgeCountProps, BadgeDot, type BadgeDotProps, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, BottomTabBar, type BottomTabBarProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type BulkAction, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, type CalendarTexts, Card, type CardProps, Cell, type CellProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceSize, Column, type ColumnOption, type ColumnProps, ColumnsMenu, type ColumnsMenuProps, Combobox, type ComboboxProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, type DatePickerTexts, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, Dialog, type DialogAction, type DialogDiscardText, type DialogProps, Drawer, type DrawerProps, Dropzone, type DropzoneProps, EmbedConsent, type EmbedConsentProps, type EmbedMessages, type EmbedTexts, type EmbedType, EmptyState, type EmptyStateAction, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, FieldFooter, FieldLabel, Figure, type FigureProps, FileItem, type FileItemProps, FileTile, type FileTileProps, FileTrigger, type FileTriggerProps, Highlight, IconButton, type IconButtonProps, Image, type ImageProps, type ImageRatio, InputAction, type InputActionProps, type InputSize, Link, type LinkProps, List, ListBox, ListBoxMessage, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, type ListBoxSize, ListCard, type ListCardProps, ListItem, type ListItemProps, type ListProps, ListRow, ListRowIcon, type ListRowProps, type ListType, ListView, type ListViewProps, MediaPlayButton, type MediaPlayButtonProps, Menu, MenuButton, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type Messages, MessagesProvider, type NavAction, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NavList, type NavListProps, NavSection, type NavSectionProps, type NavVariant, NumberField, type NumberFieldProps, Option, type OptionProps, Pagination, type PaginationProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, QuickSearch, type QuickSearchProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, Row, SearchField, type SearchFieldProps, SearchResult, type SearchResultProps, type SearchResultType, Select, type SelectOverlay, type SelectProps, SideNav, type SideNavProps, type SideNavUser, SiteHeader, type SiteHeaderProps, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, Slider, SliderField, type SliderFieldProps, type SliderProps, Spinner, type SpinnerProps, StaticTable, type StaticTableProps, Submenu, type SubmenuProps, Switch, type SwitchProps, Tab, TabBarItem, type TabBarItemProps, TabBarMore, type TabBarMoreProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, TextField, type TextFieldProps, TimeField, type TimeFieldProps, type TimeSlot, type ToastAction, type ToastOptions, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toggletip, type ToggletipProps, Toolbar, type ToolbarProps, ToolbarSeparator, Tooltip, type TooltipProps, TooltipTrigger, UploadField, type UploadFieldProps, type UploadFile, type UploadTexts, de as deMessages, defaultCalendarTexts, defaultDatePickerTexts, defaultDatePresets, defaultEmbedTexts, defaultUploadTexts, en as enMessages, formatBytes, initialsOf, toast, useMessages };