import * as react from 'react';
import { FieldsetHTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, RefAttributes, ReactElement, AnchorHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, SelectHTMLAttributes, TextareaHTMLAttributes, SVGAttributes } from 'react';
import { ACCENTS } from '@apliteni/apliteni-ui';

declare function Icon({ name }: {
    name: string;
}): react.JSX.Element;

type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> & {
    label: ReactNode;
    /** Shown under the label words and described to assistive technology. */
    hint?: ReactNode;
    type?: 'checkbox' | 'radio';
};
declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & {
    label: ReactNode;
    /** Shown under the label words and described to assistive technology. */
    hint?: ReactNode;
    type?: "checkbox" | "radio";
} & react.RefAttributes<HTMLInputElement>>;
type CheckListProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'children'> & {
    legend: ReactNode;
    children: ReactNode;
};
/** A group of `Checkbox` children under a legend. */
declare function CheckList({ legend, children, className, ...props }: CheckListProps): react.JSX.Element;

type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> & {
    label: string;
};
declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & {
    label: string;
} & react.RefAttributes<HTMLInputElement>>;

type ButtonOptions = {
    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
    size?: 'xs' | 'sm' | 'md' | 'lg';
    icon?: string;
    /** Decorative caller artwork, before the label; takes precedence over icon. */
    leading?: ReactNode;
    iconRight?: string;
    iconOnly?: boolean;
    block?: boolean;
    /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
    busy?: boolean;
    /** Message after busy ends; an empty string leaves outcome announcements to the caller. */
    completionMessage?: string;
    children?: ReactNode;
};
type NativeButtonProps = ButtonOptions & ButtonHTMLAttributes<HTMLButtonElement> & {
    href?: never;
};
type ButtonLinkProps = ButtonOptions & AnchorHTMLAttributes<HTMLAnchorElement> & {
    href: string;
    disabled?: boolean;
};
type ButtonProps = NativeButtonProps | ButtonLinkProps;
type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
declare const Button: {
    (props: NativeButtonProps & RefAttributes<HTMLButtonElement>): ReactElement;
    (props: ButtonLinkProps & RefAttributes<HTMLAnchorElement>): ReactElement;
    (props: ButtonProps & RefAttributes<ButtonElement>): ReactElement;
    displayName?: string;
};

declare function Badge({ variant, children }: {
    variant?: string;
    children: ReactNode;
}): react.JSX.Element;

type AvatarProps = {
    /** The app's stable id for the person. It picks the hue, so one person keeps one hue. */
    personKey?: string | number;
    /** The person's name. The mark shows its first and last initials; empty draws the `user` glyph. */
    name?: string | null;
    /** A photo. The letters show if it fails to load. */
    src?: string;
    size?: 24 | 32;
    /** A dashed ring in place of a person: no value, or a "No one" row. */
    empty?: boolean;
};
declare function Avatar({ personKey, name, src, size, empty }: AvatarProps): react.JSX.Element;

type PillProps = HTMLAttributes<HTMLSpanElement> & {
    variant?: 'live' | 'soon';
};
declare const Pill: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
    variant?: "live" | "soon";
} & react.RefAttributes<HTMLSpanElement>>;

type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
    live?: boolean;
};
declare const StatusDot: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
    live?: boolean;
} & react.RefAttributes<HTMLSpanElement>>;

type Level = 2 | 3 | 4 | 5 | 6;
type CardProps = {
    title?: ReactNode;
    sub?: ReactNode;
    level?: Level;
    /** `accent` tints the card with the accent and `live` with green. */
    variant?: 'accent' | 'live';
    /** `sm` trims the vertical padding. `lg` is the centred landing card. */
    pad?: 'sm' | 'lg';
    /** Glyph name for the chip before the title. Needs a `title`. */
    icon?: string;
    /** Makes the whole card a link. Its title is then a plain block, because a link holds no heading. */
    href?: string;
    className?: string;
    children?: ReactNode;
};
declare function Card({ title, sub, level, variant, pad, icon, href, className, children }: CardProps): react.JSX.Element;

type CalloutVariant = 'neutral' | 'info' | 'success' | 'warn' | 'danger';
interface CalloutProps {
    variant?: CalloutVariant;
    icon?: string;
    children: ReactNode;
    actions?: ReactNode;
}
declare function Callout({ variant, icon, children, actions }: CalloutProps): react.JSX.Element;

type StatTone = 'good' | 'bad' | 'neutral';
type StatVariant = 'band' | 'tiles' | 'open';
interface StatDelta {
    value: string | null;
    tone?: StatTone;
    basis?: string;
    tooltip?: string;
    direction?: 'up' | 'down' | 'flat';
}
interface StatFigure {
    label: string;
    value: ReactNode;
    /** Context that is not a change, such as "of revenue": no arrow, no tone. It
     *  takes the row a change would take, and leads that row beside one. A short
     *  phrase: the row is one line, and a longer caption is clipped. */
    caption?: string;
    delta?: StatDelta;
    trend?: ReactNode;
}
interface StatBandProps {
    stats: StatFigure[];
    variant?: StatVariant;
    basis?: string;
    /** Existing caption before the figures; used when basis is omitted. */
    basisId?: string;
    label?: string;
    id?: string;
}
declare function StatBand({ stats, variant, basis, basisId: sharedBasisId, label, id }: StatBandProps): react.JSX.Element;

type ConfirmProps = {
    open: boolean;
    title: string;
    body: ReactNode;
    confirmLabel: string;
    cancelLabel: string;
    danger?: boolean;
    busy?: boolean;
    onConfirm: () => void;
    onCancel: () => void;
};
declare function Confirm({ open, title, body, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, }: ConfirmProps): react.JSX.Element;

type FeedbackPayload = {
    note: string;
    excerpt: string;
    anchor: string;
    sectionLabel: string;
    sectionTitle: string;
};
type FeedbackResult = {
    ok: boolean;
    error?: string;
};
type FeedbackSection = {
    label?: string;
    title?: string;
    anchor?: string;
};
type FeedbackProps = {
    /** The element whose text a reader may select. Pass a ref to it. */
    container: RefObject<HTMLElement | null>;
    /** Files the note. Resolve `{ ok: true }` when it is sent, or `{ ok: false, error }` to keep the form open with the error in place. */
    onSend: (payload: FeedbackPayload) => Promise<FeedbackResult>;
    /** Shortest selection that offers the pill. */
    minChars?: number;
    /** Shapes the chip and the payload from the heading above the selection. */
    section?: (heading: Element | null) => FeedbackSection;
    label?: string;
    placeholder?: string;
    /** The one line shown once the note is sent. */
    sentMessage?: string;
};
declare function Feedback({ container, onSend, minChars, section, label, placeholder, sentMessage, }: FeedbackProps): react.ReactPortal;

type ModalProps = {
    open: boolean;
    title: string;
    onClose: () => void;
    footer?: ReactNode;
    children?: ReactNode;
    role?: 'dialog' | 'alertdialog';
    initialFocusRef?: RefObject<HTMLElement | null>;
};
declare function Modal({ open, title, onClose, footer, children, initialFocusRef, role }: ModalProps): react.ReactPortal | null;

type DrawerProps = {
    open: boolean;
    title: string;
    onClose: () => void;
    side?: 'right' | 'left' | 'top' | 'bottom';
    size?: 'sm' | 'md' | 'lg';
    footer?: ReactNode;
    /** Controls in the header, between the title and the close button. */
    headerActions?: ReactNode;
    children?: ReactNode;
    closeLabel?: string;
    initialFocusRef?: RefObject<HTMLElement | null>;
};
declare function Drawer({ open, title, onClose, side, size, footer, headerActions, children, closeLabel, initialFocusRef, }: DrawerProps): react.ReactPortal | null;

type CommandItem = {
    id: string;
    label: string;
    description?: string;
    icon?: string;
    /** Aliases a reader might type instead of the label. */
    keywords?: string[];
    /** Drawn as <kbd>, never read out: the row already says what it does. */
    shortcut?: string | string[];
    badge?: string;
    /** A row that goes somewhere. Cmd or Ctrl held on Enter opens it in a tab. */
    href?: string;
    /** A row that destroys something. It must carry `onConfirm`, or it is disabled. */
    danger?: boolean;
    /** What a destructive row opens instead of running. */
    onConfirm?: () => void;
    disabled?: boolean;
};
type CommandGroup = {
    label?: string;
    items: CommandItem[];
};
type CommandPaletteProps = {
    open: boolean;
    onClose: () => void;
    groups: CommandGroup[];
    /** What the reader chose. `newTab` is Cmd or Ctrl held, for a row with an href. */
    onSelect?: (item: CommandItem, meta: {
        newTab: boolean;
    }) => void;
    label?: string;
    placeholder?: string;
    empty?: string;
    density?: 'compact' | 'roomy';
    hint?: boolean;
    /**
     * false → the caller ranks. `groups` is rendered in the order it is given and
     * `onQueryChange` is where the query goes — the shape a palette fed by a
     * server takes, where the rest of the results are not on this page to rank.
     */
    rank?: boolean;
    onQueryChange?: (query: string) => void;
};
declare function CommandPalette({ open, onClose, groups, onSelect, label, placeholder, empty, density, hint, rank, onQueryChange, }: CommandPaletteProps): react.ReactPortal | null;

type Column<T> = {
    key: keyof T & string;
    label: ReactNode;
    num?: boolean;
    sortable?: boolean;
    render?: (row: T) => ReactNode;
    /**
     * `true` marks this column's body cells as holding one link and nothing else, so the
     * link fills its cell and its focus ring outlines the cell rather than the words. It is
     * the consumer's to declare because CSS counts elements and not words: a cell reading
     * "Invoice 1162" with the number linked looks the same to a selector, and filling that
     * one would put the number on a line of its own. The header cell is never marked — it
     * holds a label, or a sort button that keeps its own ring.
     * why: docs/components.md#dense-financial-tables
     */
    linked?: boolean;
    /** Renders this column's body cells as row headers (`th scope="row"`), as the kit's compact table does. */
    rowHeader?: boolean;
    /** `title` gives the column the remaining width, `code` sets a handle or id in the table's small text, `long` is running text that gets its own line in a stacked row, `strong` bolds a figure, `act` right-aligns a row action. */
    cell?: 'title' | 'code' | 'long' | 'strong' | 'act';
};
type TableSort<T> = {
    key: (keyof T & string) | undefined;
    dir: 1 | -1;
};
type SelectionProps = {
    selectable: false;
    selected?: Set<string>;
    onToggle?: (name: string) => void;
    onTogglePage?: (names: string[]) => void;
} | {
    selectable?: true;
    selected: Set<string>;
    onToggle: (name: string) => void;
    onTogglePage: (names: string[]) => void;
};
type PagerProps = {
    page?: never;
    onPageChange?: (page: number) => void;
    total?: never;
    hasMore?: never;
} | {
    page: number;
    onPageChange: (page: number) => void;
    total: number;
    hasMore?: boolean;
} | {
    page: number;
    onPageChange: (page: number) => void;
    total: null;
    hasMore: boolean;
};
type DataTableProps<T> = {
    columns: Column<T>[];
    rows: T[];
    /** The kit's `--zebra`, `--hover` (on unless `false`) and `--stack` hooks. A stacked table lays each row out as a block below the phone step, so no column scrolls out of reach. */
    zebra?: boolean;
    hover?: boolean;
    stack?: boolean;
    /** Marks a row the reader landed on (`target`) or a revoked one (`dead`). A dead row is muted, so put the word that names its state in one of its cells. */
    rowState?: (row: T) => 'target' | 'dead' | undefined;
    /** Table footer rows, such as totals: `<tr>` elements with a `th scope="row"` label. */
    footer?: ReactNode;
    /** A caption read by assistive technology only. */
    caption?: string;
    dense?: boolean;
    density?: 'default' | 'dense' | 'compact';
    stickyHeader?: boolean;
    pinnedIdentity?: boolean;
    scrollLabel?: string;
    empty?: ReactNode;
    pageSize?: number;
    pageSizes?: readonly number[] | null;
    onPageSizeChange?: (size: number) => void;
    /** `false` renders no pager at all — for a surface that supplies its own. */
    pager?: boolean;
    /**
     * The pager's accessible name. Two tables on one page otherwise publish two
     * landmarks called "Pagination", and a reader listing the landmarks cannot tell
     * which one moves which table. Axe will not catch it: `landmark-unique` is a
     * best-practice rule and the kit's gate runs only the WCAG A/AA tags.
     */
    pagerLabel?: string;
    loading?: boolean;
} & SelectionProps & PagerProps & ({
    sort?: never;
    onSortChange?: (sort: TableSort<T>) => void;
} | {
    sort: TableSort<T>;
    onSortChange: (sort: TableSort<T>) => void;
});
declare function sortTableRows<T>(rows: T[], sort: TableSort<T>): T[];
declare function DataTable<T extends {
    name: string;
}>({ columns, rows, zebra, hover, stack, rowState, footer, caption, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;

type PaginationProps = {
    page?: number;
    pageSize?: number;
    /** Rows in the whole result. `null` — the honest answer for a caller who cannot count. */
    total?: number | null;
    /** Read only when `total` is null: whether a page exists after this one. */
    hasMore?: boolean;
    pageSizes?: readonly number[] | null;
    variant?: 'steps' | 'numbered' | 'jump';
    label?: string;
    loading?: boolean;
    id?: string;
    onPageChange?: (page: number) => void;
    onPageSizeChange?: (size: number) => void;
};
declare function Pagination({ page, pageSize, total, hasMore, pageSizes, variant, label, loading, id, onPageChange, onPageSizeChange, }: PaginationProps): react.JSX.Element | null;

type SkeletonProps = {
    /** A count of bars, or explicit widths when a ragged prose edge matters. */
    lines?: number | string[];
    width?: string;
    height?: string;
    radius?: string;
    className?: string;
};
declare function Skeleton({ lines, width, height, radius, className }: SkeletonProps): react.JSX.Element;
type SkeletonTableProps = {
    rows?: number;
    cols?: number;
    head?: boolean;
};
declare function SkeletonTable({ rows, cols, head }: SkeletonTableProps): react.JSX.Element;
type BusyRegionProps = {
    busy: boolean;
    /** Spoken while it works. */
    label?: string;
    /** Spoken when it finishes — the specific line ("14 invoices") beats "Loaded". */
    message?: string;
    /** Placeholder while busy. Defaults to a three-bar skeleton. */
    placeholder?: ReactNode;
    className?: string;
    children?: ReactNode;
};
declare function BusyRegion({ busy, label, message, placeholder, className, children, }: BusyRegionProps): react.JSX.Element;
type DeniedProps = {
    title?: string;
    sub?: string;
    /** The scope or role the reader is missing, verbatim. */
    need?: string;
    icon?: string;
    className?: string;
    /** Buttons. Nothing is assumed about what a reader can do next. */
    children?: ReactNode;
};
declare function Denied({ title, sub, need, icon, className, children, }: DeniedProps): react.JSX.Element;

/**
 * `'month'` and `'range'` work in whole months, `'day'` and `'day-range'` in
 * whole dates. The two range modes behave alike: a start, then an end, with the
 * days or months between them shown as the span.
 */
type DatePickerMode = 'month' | 'range' | 'day' | 'day-range';
/** Either end may be null while the reader is still picking. */
type DatePickerRange = {
    start: string | null;
    end: string | null;
};
type DatePickerPreset = {
    label: string;
    range: DatePickerRange;
};
type DatePickerProps = {
    mode?: DatePickerMode;
    /** `'YYYY-MM'` in month mode, `'YYYY-MM-DD'` in day mode. Controlled. */
    value?: string | null;
    /** Where an uncontrolled picker starts. */
    defaultValue?: string | null;
    onChange?: (value: string | null) => void;
    /** Range mode, controlled. */
    range?: DatePickerRange;
    defaultRange?: DatePickerRange;
    /** Fires on each end, so a half-picked range is visible to the host too. */
    onRangeChange?: (range: DatePickerRange) => void;
    /** Bounds, inclusive, in the mode's own grain. */
    min?: string;
    max?: string;
    /** Periods that cannot be picked, in the mode's own grain. */
    disabledPeriods?: readonly string[];
    /** Range mode: the shortcuts beside the grid. */
    presets?: readonly DatePickerPreset[];
    placeholder?: string;
    /**
     * Names the trigger and the panel where the screen around them does not.
     * With a value, the trigger's own text is already its name.
     */
    ariaLabel?: string;
    id?: string;
    disabled?: boolean;
    /** The edge the panel hugs. */
    align?: 'start' | 'end';
    /** Month and weekday names come from here. */
    locale?: string;
    /** 0 is Sunday. Day mode only. */
    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    /** `'YYYY-MM-DD'`. Given one, the grid marks it; stories and tests pass it to stay fixed. */
    today?: string;
    /**
     * Render the sheet rather than the popover whatever the viewport is. Left
     * out, the picker follows the kit's narrowest step. A host that already knows
     * it is on a phone — or renders on a server, where no viewport is readable —
     * says so here.
     */
    sheet?: boolean;
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
};
declare function DatePicker({ mode, value, defaultValue, onChange, range, defaultRange, onRangeChange, min, max, disabledPeriods, presets, placeholder, ariaLabel, id, disabled, align, locale, weekStartsOn, today, sheet, open: openProp, defaultOpen, onOpenChange, }: DatePickerProps): react.JSX.Element;

type DropdownBadge = string | {
    text: string;
    tone?: string;
};
type DropdownAvatar = {
    key?: string | number;
    name?: string | null;
    src?: string;
    empty?: boolean;
};
type DropdownItem = {
    label: string;
    /** The pick, as `onSelect` reports it and as `data-value` carries it. */
    value?: string | number;
    description?: string;
    /** A kit glyph name, drawn in the row's leading slot. */
    icon?: string;
    /** A person's mark in the leading slot, in place of `icon`. `key` picks the hue, `name` the
     *  letters, `src` a photo. `{ empty: true }` is the dashed ring of a "No one" row. */
    avatar?: DropdownAvatar;
    badge?: DropdownBadge;
    selected?: boolean;
    disabled?: boolean;
    danger?: boolean;
    /** A row that goes somewhere. A `select` row never becomes a link, as the factory decides it. */
    href?: string;
    target?: string;
};
/** A rule between rows. `'---'` is the factory's shorthand for the same thing. */
type DropdownSeparator = '---' | {
    separator: true;
};
type DropdownEntry = DropdownItem | DropdownSeparator;
type DropdownSection = {
    label?: string;
    items?: DropdownEntry[];
};
/** The field above the rows. `true` takes every default. */
type DropdownSearch = {
    placeholder?: string;
    /** Names the field. Without one it is named "Search " + the dropdown's name. */
    label?: string;
    /** The no-match line. `{q}` in it stands for the query. */
    empty?: string;
    /** The nudge under it. */
    hint?: string;
    /** What the field holds before it is opened; every open starts from the whole list. */
    query?: string;
    /** The size of the whole set, for "Search 214 people" in the placeholder and the field's
     *  name. `true` counts the rows, less a "No one" row. */
    count?: number | true;
    /** What the set is called in that line. Defaults to "people". */
    noun?: string;
};
/**
 * What a row has to carry to be a row: the classes, the role, the tab stop the
 * panel moves itself, the pick and the click. Spread it onto whatever element the
 * row should be — a router `<Link>`, a `<button>`, anything.
 */
type DropdownRowProps = {
    className: string;
    role: 'option' | 'menuitem';
    tabIndex: -1;
    'data-dd-item': string;
    'data-value'?: string;
    'aria-selected'?: boolean;
    'aria-disabled'?: true;
    href?: string;
    target?: string;
    /** Only with `search`: the field names the row Enter would pick. */
    id?: string;
    hidden?: boolean;
    onClick: (e: MouseEvent) => void;
    children: ReactNode;
};
type DropdownProps = {
    /** Muted prefix in the trigger, e.g. "version:". */
    label?: string;
    /** What the trigger shows. Given one, the trigger is yours to update. */
    value?: string;
    /** When given, the caller owns the selected row, including after a pick. */
    selectedValue?: string | number;
    placeholder?: string;
    /** Inferred from the items when it is left out, exactly as the factory infers it. */
    variant?: 'select' | 'menu';
    items?: DropdownEntry[];
    /** Grouped alternative to `items`. */
    sections?: DropdownSection[];
    header?: ReactNode;
    footer?: ReactNode;
    /** Replaces the trigger's label/value pair. With `ariaLabel`, names the trigger. */
    triggerContent?: ReactNode;
    triggerClass?: string;
    /** The trigger is off: no stop, no panel, the kit's unavailable paint. #580 */
    disabled?: boolean;
    chevron?: boolean;
    /** The edge the panel hugs. */
    align?: 'start' | 'end';
    /** `'up'` opens into the space above the trigger. */
    direction?: 'down' | 'up';
    /** `true`, or a max height in px, to cap the panel and scroll it. */
    scroll?: boolean | number;
    /** A field above the rows that filters them as the reader types. */
    search?: boolean | DropdownSearch;
    ariaLabel?: string;
    /** Names the elements that describe the trigger, e.g. a field's error and hint. */
    'aria-describedby'?: string;
    /** Marks the trigger invalid. `Field` supplies it while its error shows. */
    'aria-invalid'?: boolean | 'true' | 'false';
    id?: string;
    panelClass?: string;
    /** Controlled: the host owns the open state and answers `onOpenChange`. */
    open?: boolean;
    /** Uncontrolled: where it starts. */
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    onSelect?: (value: string | number | undefined, item: DropdownItem) => void;
    /** Draw the row yourself. `props` is everything the row needs; spread it. */
    row?: (item: DropdownItem, props: DropdownRowProps) => ReactNode;
};
declare function Dropdown({ label, value, selectedValue, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, 'aria-describedby': describedBy, 'aria-invalid': invalid, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;

type BackLinkOwnProps = {
    /** The address. No address, or a `javascript:` one, and nothing is rendered. */
    href?: string;
    /** The destination, spelled the way the sidebar or the trail spells it. */
    label?: string;
    className?: string;
};
type BackLinkProps<T extends ElementType = 'a'> = BackLinkOwnProps & {
    /** The element the anchor is drawn as — a router `<Link>`, say. Default `'a'`. */
    as?: T;
} & Omit<ComponentPropsWithoutRef<T>, keyof BackLinkOwnProps | 'as'>;
/**
 * The link a page under another page puts above its title.
 *
 * The arrow says "back" on screen and is aria-hidden, so the link's accessible name
 * says it in words: "Back to Invoices". Given `as`, the props this component does not
 * read are passed through, which is how a router link gets its own `to`.
 */
declare function BackLink<T extends ElementType = 'a'>({ href, label, as, className, ...rest }: BackLinkProps<T>): react.JSX.Element | null;

type NumericValueProps = {
    value?: string | number | null;
    unit?: string;
    missing?: string;
};
type DeltaValueProps = {
    value?: string | null;
    tone?: 'success' | 'danger' | 'neutral';
    basisId?: string;
    missing?: string;
};
declare function NumericValue(props: NumericValueProps): react.JSX.Element;
declare function DeltaValue(props: DeltaValueProps): react.JSX.Element;
type RowIdentityProps = {
    symbol: string;
    name: string;
    logo?: string;
    href?: string;
};
declare function RowIdentity({ symbol, name, logo, href }: RowIdentityProps): react.JSX.Element;

type SegmentOption = {
    label: string;
    value: string;
    ariaLabel?: string;
    disabled?: boolean;
};
type SegmentedProps = {
    options: SegmentOption[];
    value: string;
    onChange: (value: string) => void;
    label: string;
    appearance?: 'pill' | 'underline';
    size?: 'sm';
    block?: boolean;
    disabled?: boolean;
};
declare function Segmented({ options, value, onChange, label, appearance, size, block, disabled }: SegmentedProps): react.JSX.Element;

type Filter = {
    id: string;
    label: string; /** empty or absent while nothing is chosen; the chip then shows `label` */
    value?: string;
    items: DropdownEntry[];
    disabled?: boolean;
    open?: boolean;
};
/** A filter the bar can put on itself: the chip's name, and the values its menu offers. */
type AddFilter = {
    id: string;
    label: string;
    items: DropdownEntry[];
};
type FilterBarProps = {
    filters: Filter[];
    label?: string;
    clearLabel?: string;
    clearVariant?: 'ghost' | 'secondary' | 'link';
    disabled?: boolean;
    busy?: boolean;
    add?: AddFilter[];
    addLabel?: string;
    onRemove: (id: string) => void;
    onClear: () => void;
    onChange: (id: string, value: string | undefined) => void;
    onAdd?: (id: string, value: string | undefined) => void;
};
declare function FilterBar({ filters, label, clearLabel, clearVariant, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;

type KeyValueRow = {
    label: string;
    value?: ReactNode;
    redacted?: boolean;
};
type KeyValueListProps = Omit<ComponentPropsWithoutRef<'dl'>, 'children'> & {
    rows: readonly KeyValueRow[];
    columns?: 1 | 2;
};
declare function KeyValueList({ rows, columns, className, ...rest }: KeyValueListProps): react.JSX.Element;
type DrawerSectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
    title?: ReactNode;
    headingLevel?: 2 | 3 | 4 | 5 | 6;
};
declare function DrawerSection({ title, headingLevel, className, children, ...rest }: DrawerSectionProps): react.JSX.Element;

type SnippetProps = {
    label?: string;
    /** Original text to copy; displayed when children are absent. */
    code?: string;
    /** Token markup for display only. Strings are never parsed as HTML. */
    children?: ReactNode;
    copy?: boolean;
    reveal?: boolean;
    /** Accessible name and tooltip for the icon-only copy button; name what it copies. */
    copyLabel?: string;
};
declare function Snippet({ label, code, children, copy, reveal, copyLabel }: SnippetProps): react.JSX.Element;

type TabItem = {
    value: string;
    label: string;
    count?: number;
    panel: ReactNode;
};
type TabsProps = {
    items: TabItem[];
    value: string;
    onChange: (value: string) => void;
    label: string;
};
declare function Tabs({ items, value, onChange, label }: TabsProps): react.JSX.Element;

type TimelineEventKind = 'person' | 'rule' | 'reversal';
type TimelineEvent = {
    id: string;
    kind?: TimelineEventKind;
    actor: string;
    dateTime: string;
    timestamp: string;
    relativeTimestamp?: string;
    description: string;
    meta?: ReactNode;
    undo?: {
        label: string;
        onUndo: () => void;
    };
};
type TimelineProps = Omit<ComponentPropsWithoutRef<'ol'>, 'children' | 'reversed' | 'start'> & {
    events: readonly TimelineEvent[];
};
declare function Timeline({ events, className, ...rest }: TimelineProps): react.JSX.Element;

type FieldMessage = {
    label: string;
    hint?: string;
    error?: string;
};
type Wiring = 'id' | 'aria-describedby' | 'aria-invalid';
type FieldControlProps = {
    id: string;
    'aria-describedby'?: string;
    'aria-invalid'?: true;
    required?: boolean;
};
type FieldProps = FieldMessage & {
    id?: string;
    required?: boolean;
    children: (control: FieldControlProps) => ReactNode;
};
/** Spread the supplied attributes onto one labelable control. */
declare function Field({ id: suppliedId, label, hint, error, required, children }: FieldProps): react.JSX.Element;
type TextFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>, Wiring | 'type'> & {
    type?: 'text' | 'number' | 'email' | 'password' | 'search';
    unit?: string;
    /** Kit glyph name, as Button, Dropdown and vanilla input() take it. Decorative;
        the label supplies the control's name. */
    icon?: string;
};
declare const TextField: react.ForwardRefExoticComponent<FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | Wiring> & {
    type?: "text" | "number" | "email" | "password" | "search";
    unit?: string;
    /** Kit glyph name, as Button, Dropdown and vanilla input() take it. Decorative;
        the label supplies the control's name. */
    icon?: string;
} & react.RefAttributes<HTMLInputElement>>;
type TextAreaProps = FieldMessage & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, Wiring>;
declare function TextArea({ label, hint, error, required, className, ...props }: TextAreaProps): react.JSX.Element;
type SelectFieldProps = FieldMessage & Omit<SelectHTMLAttributes<HTMLSelectElement>, Wiring>;
declare function SelectField({ label, hint, error, required, className, children, ...props }: SelectFieldProps): react.JSX.Element;
type FileFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>, Wiring | 'type' | 'multiple' | 'value' | 'defaultValue' | 'onChange'> & {
    onFileChange?: (file: File | null) => void;
};
declare function FileField({ label, hint, error, required, disabled, onFileChange, className, ...props }: FileFieldProps): react.JSX.Element;

type FileDropStatus = 'uploading' | 'done' | 'error';
/** The file the consumer is uploading. */
type FileDropFile = {
    name: string;
    /** Already written for a reader; the kit picks no unit. */
    size?: string;
    /** Left out, the file is uploading: the kit never reports a success nobody claimed. */
    status?: FileDropStatus;
    /** 0 to 100. Left out, the word stands without a bar. */
    progress?: number;
    /** What this file did wrong, when the status is an error. */
    error?: string;
    /** Replaces the word the status carries. */
    state?: string;
};
type FileDropProps = {
    /** The button that opens the picker. */
    label?: string;
    /** The accepted types and the size limit, stated once beside the button. */
    note?: string;
    /** Makes the drop an empty page's area: a dashed box around a first-run block with this title,
     *  the note and the button. The block stands in for the row and `children`, and the page
     *  leaves the area when the first file arrives, so it never shows a file in hand. */
    title?: string;
    /** Lets the picker take several files. */
    multiple?: boolean;
    /** Filters the system picker only; the consumer still validates the file. */
    accept?: string;
    /** The words on the drop target. */
    dropLabel?: string;
    /** The word on the remove button. */
    removeLabel?: string;
    retryLabel?: string;
    /** The file the consumer is holding. Left out, the row is at rest. */
    file?: FileDropFile | null;
    /** Drives the target from a parent that owns the drag region. */
    dragging?: boolean;
    disabled?: boolean;
    /** The first file chosen or dropped. */
    onFile?: (file: File) => void;
    /** Every file chosen or dropped, together. A consumer may pass both props. */
    onFiles?: (files: File[]) => void;
    onRemove?: () => void;
    onRetry?: () => void;
    /** What the region accepts the file for; the target covers it while dragging. */
    children?: ReactNode;
    className?: string;
};
declare function FileDrop({ label, note, title, multiple, accept, dropLabel, removeLabel, retryLabel, file, dragging, disabled, onFile, onFiles, onRemove, onRetry, children, className, }: FileDropProps): react.JSX.Element;

type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-label'> & {
    /** The control's name. A toolbar search box shows no label, so this is the
        only name it has. */
    ariaLabel: string;
};
/**
 * The toolbar's search box: one `.ui-input-group` holding the `search` glyph and
 * a native `type="search"` control on `.ui-input`. It has no visible label, so
 * the row keeps the height of the unlabelled controls beside it, and no CSS of
 * its own, so the toolbar's row rule and the field's focus ring reach it from
 * the kit's stylesheet.
 *
 * No clear button. The browser paints its own near-black on the light field and
 * white on the dark one, beside the kit's `--muted` magnifier — two glyphs, and
 * only one answers to a token — so `input.css` suppresses it.
 * why: docs/components.md#react-search-field
 */
declare const SearchField: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-label"> & {
    /** The control's name. A toolbar search box shows no label, so this is the
        only name it has. */
    ariaLabel: string;
} & react.RefAttributes<HTMLInputElement>>;

type ToastNotice = {
    tone?: 'success' | 'danger' | 'warn' | 'info' | 'neutral';
    compact?: boolean;
    dismissible?: boolean;
    timer?: boolean | number;
    title: string;
    text?: string;
    action?: {
        label: string;
        onClick: () => void;
    };
};
type ToastProps = {
    children: ReactNode;
    collapse?: boolean;
};
declare function useToast(): (notice: ToastNotice) => void;
declare function Toast({ children, collapse }: ToastProps): react.JSX.Element;

type BreadcrumbItem = {
    label: string;
    href?: string;
    target?: string;
    icon?: string;
};
type BreadcrumbsProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
    items: readonly BreadcrumbItem[];
    /** Spread linkProps onto the router link, including children. */
    renderLink?: (item: BreadcrumbItem, linkProps: ComponentPropsWithoutRef<'a'>) => ReactNode;
};
declare const Breadcrumbs: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
    items: readonly BreadcrumbItem[];
    /** Spread linkProps onto the router link, including children. */
    renderLink?: (item: BreadcrumbItem, linkProps: ComponentPropsWithoutRef<"a">) => ReactNode;
} & react.RefAttributes<HTMLElement>>;

type AppShellSection = {
    href: string;
    label: string;
    icon: string;
    count?: number;
};
type AppShellProps = {
    sections: AppShellSection[];
    /** The vanilla rail layout, or the existing band layout. */
    layout?: 'rail' | 'topbar';
    /** Current router pathname; the longest matching section wins. */
    pathname: string;
    title: string;
    children?: ReactNode;
    word?: string;
    brand?: ReactNode;
    brandHref?: string;
    width?: 'centered' | 'wide';
    back?: {
        href: string;
        label: string;
    };
    crumbs?: readonly BreadcrumbItem[];
    lede?: string;
    actions?: ReactNode;
    bandControl?: ReactNode;
    /** One glyph control in the sidebar head, before the fold button, drawn as the fold is.
     *  On a phone it stands in the menu panel's head. Topbar layout only (#732). */
    headControl?: ReactNode;
    /** The band trigger's words and its name at every width. Below 560px the trigger shows
     *  only its glyph (#729), and the words stay its accessible name. */
    searchLabel?: string;
    /** @deprecated Not drawn since #729: the phone trigger shows only its glyph. */
    searchShortLabel?: string;
    account: {
        name: string;
        email: string;
    };
    onSignOut: () => void;
    /** Server-read fold preference. The browser restores the shared rail cookie. */
    defaultCollapsed?: boolean;
    palette?: Omit<CommandPaletteProps, 'open' | 'onClose'>;
    /** Spread linkProps onto the router link, including children and onClick. */
    renderLink?: (section: AppShellSection, linkProps: ComponentPropsWithoutRef<'a'>) => ReactNode;
};
declare function AppShell({ sections, pathname, title, children, word, brand, layout, brandHref, width, back, crumbs, lede, actions, bandControl, headControl, account, onSignOut, searchLabel, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;

type AuthShellProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    brand: ReactNode;
    children: ReactNode;
};
/** Centers one auth task on the kit's auth card. */
declare const AuthShell: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
    brand: ReactNode;
    children: ReactNode;
} & react.RefAttributes<HTMLDivElement>>;

type FooterLink = {
    label: string;
    href?: string;
    target?: string;
};
type FooterColumn = {
    title?: string;
    links: FooterLink[];
};
type FooterSocial = {
    label: string;
    href?: string;
    icon?: 'github' | 'x' | 'linkedin' | 'mail';
};
type FooterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
    /** `full` is the marketing footer, `slim` a single legal row, `app` the in-product row. */
    variant?: 'full' | 'slim' | 'app';
    /** Product word beside the mark. Default `Strategy`. */
    word?: string;
    brandHref?: string;
    /** Replaces the lockup. `false` hides the whole brand block: lockup, tagline and social links. Full variant only. */
    brand?: ReactNode | false;
    /** Short line under the brand. Full variant only. */
    tagline?: string;
    /** Link columns. Side by side above the phone step, stacked on a phone. Full variant only. */
    columns?: FooterColumn[];
    /** Contents of the link navigation. Takes the place of `columns`. Full variant only. */
    links?: ReactNode;
    social?: FooterSocial[];
    legal?: ReactNode;
    legalLinks?: FooterLink[];
    /** Slot for `<AccentPicker>` and `<ThemeToggle>`. */
    switcher?: ReactNode;
};
declare function Footer({ variant, word, brandHref, brand, tagline, columns, links, social, legal, legalLinks, switcher, className, ...rest }: FooterProps): react.JSX.Element;

type EmptyStateVariant = 'first-run' | 'no-matches' | 'not-found' | 'not-yet-built';
type EmptyStateProps = {
    variant?: EmptyStateVariant;
    title?: string;
    sub?: string;
    icon?: string;
    art?: ReactNode;
    actions?: ReactNode;
};
declare function EmptyState({ variant, title, sub, icon, art, actions }: EmptyStateProps): react.JSX.Element;

/** Place in a head script before styles load to apply the theme before first paint. */
declare const THEME_INIT_SCRIPT = "(()=>{let t;try{t=localStorage.getItem('apliteni-strategy-theme')}catch{}document.documentElement.setAttribute('data-theme',t==='dark'||t==='light'?t:window.matchMedia?.('(prefers-color-scheme: light)').matches?'light':'dark')})()";
type ThemeToggleProps = {
    /** Show the current theme beside the icon. */
    labelled?: boolean;
};
declare function ThemeToggle({ labelled }: ThemeToggleProps): react.JSX.Element;

type TooltipProps = {
    text?: string;
    label?: string;
    value?: string;
    detail?: string;
    placement?: 'top' | 'bottom';
    /** Inline content without nested controls. */
    children: ReactNode;
};
declare function Tooltip({ text, label, value, detail, placement, children }: TooltipProps): react.JSX.Element;

type SuccessMark = 'line' | 'circled';
type SuccessCheckProps = Omit<SVGAttributes<SVGSVGElement>, 'children'> & {
    /** `line` is the bare Lucide check and draws itself on; `circled` is Lucide
     *  circle-check-big at 20px, the kit's label size, drawn at rest. */
    variant?: SuccessMark;
};
/** Decorative mark. Supply the outcome in adjacent text. */
declare const SuccessCheck: react.ForwardRefExoticComponent<Omit<SVGAttributes<SVGSVGElement>, "children"> & {
    /** `line` is the bare Lucide check and draws itself on; `circled` is Lucide
     *  circle-check-big at 20px, the kit's label size, drawn at rest. */
    variant?: SuccessMark;
} & react.RefAttributes<SVGSVGElement>>;
type SuccessPanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
    title?: string;
    sub?: string;
    /** Which check mark to draw. See SuccessCheck. */
    check?: SuccessMark;
};
declare const SuccessPanel: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
    title?: string;
    sub?: string;
    /** Which check mark to draw. See SuccessCheck. */
    check?: SuccessMark;
} & react.RefAttributes<HTMLDivElement>>;
type SuccessCountdown = {
    seconds?: number;
    label?: string;
};
type SuccessProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
    layout?: 'hero' | 'split' | 'compact';
    level?: 1 | 2 | 3 | 4 | 5 | 6;
    /** Which check mark to draw. See SuccessCheck. */
    check?: SuccessMark;
    title?: string;
    /** One short line under the title, or nothing. There is no eyebrow tier.
     *  why: docs/components.md#success-confirmations */
    body?: string;
    /** Removed: a confirmation carries one title and at most one line. Typed as
     *  `never` so a caller still passing it is told where it went rather than
     *  having it spread silently onto the root as an unknown DOM attribute. */
    eyebrow?: never;
    actions?: ReactNode;
    confetti?: boolean;
    /** Set to null to cancel; changing seconds starts a new countdown. */
    countdown?: SuccessCountdown | null;
    onCountdownEnd?: () => void;
};
declare const Success: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
    layout?: "hero" | "split" | "compact";
    level?: 1 | 2 | 3 | 4 | 5 | 6;
    /** Which check mark to draw. See SuccessCheck. */
    check?: SuccessMark;
    title?: string;
    /** One short line under the title, or nothing. There is no eyebrow tier.
     *  why: docs/components.md#success-confirmations */
    body?: string;
    /** Removed: a confirmation carries one title and at most one line. Typed as
     *  `never` so a caller still passing it is told where it went rather than
     *  having it spread silently onto the root as an unknown DOM attribute. */
    eyebrow?: never;
    actions?: ReactNode;
    confetti?: boolean;
    /** Set to null to cancel; changing seconds starts a new countdown. */
    countdown?: SuccessCountdown | null;
    onCountdownEnd?: () => void;
} & react.RefAttributes<HTMLDivElement>>;

type ChartTone = 'accent' | 'accent-soft' | 'good' | 'bad' | 'warn' | 'info' | 'neutral';
type ChartPeriod = {
    /** The period as the readout and the table name it: `Jan 2026`. */
    label: string;
    /** The period as the axis names it. Defaults to `label`'s first word. */
    short?: string;
    /** The period is not final — estimated, forecast, or still running. */
    estimated?: boolean;
    /** Why it is not final. Printed in the readout and in the legend. */
    note?: string;
};
type ChartSeries = {
    id: string;
    name: string;
    values: readonly number[];
    /**
     * `bars` stand on the zero line, `bars-below` hang under it from positive
     * magnitudes (spend given as 31870, not −31870), and `line` crosses both.
     */
    shape?: 'bars' | 'bars-below' | 'line';
    /**
     * Bars take a tone. A line is `neutral` unless the caller says otherwise.
     * `accent` and `accent-soft` are one hue at two weights, which is how two
     * series read apart without spending a second colour on them.
     */
    tone?: ChartTone;
};
type ChartBridgeStep = {
    label: string;
    short?: string;
    /**
     * A `total` is an absolute column; a `change` is added to the running total.
     * The first step is a total and every later one a change, unless it says so.
     */
    kind?: 'total' | 'change';
    /** A change's amount. A `total` without one takes the running total. */
    value?: number;
    estimated?: boolean;
    note?: string;
};
type ChartBridgeTones = {
    rise?: ChartTone;
    fall?: ChartTone;
    total?: ChartTone;
};
type ChartCommon = {
    /**
     * Names the chart for a reader who cannot see it, and the table under it.
     * Never drawn: the card around a chart already carries its title.
     */
    title: string;
    /** Exact values, for the readout, the live region and the table. */
    format: (value: number) => string;
    /** Axis ticks, which are whole units. Defaults to `format`. */
    formatAxis?: (value: number) => string;
    /** The plot's height in CSS px. */
    height?: number;
    /** Offer the same numbers as a table. On by default, off for a sparkline. */
    table?: boolean;
    /** Let Enter and a click pick a column. */
    selectable?: boolean;
    /** The picked column, when the caller keeps that state. */
    selected?: number | null;
    onSelect?: (index: number) => void;
    className?: string;
};
type ChartProps = ChartCommon & ({
    variant?: 'months';
    periods: readonly ChartPeriod[];
    series: readonly ChartSeries[];
} | {
    variant: 'spark';
    periods: readonly ChartPeriod[];
    series: readonly ChartSeries[];
} | {
    variant: 'bridge';
    steps: readonly ChartBridgeStep[];
    tones?: ChartBridgeTones;
});
declare function Chart(props: ChartProps): react.JSX.Element;

type SidebarNavBadge = string | number | {
    text: string | number;
    tone?: 'neutral' | 'accent' | 'live' | 'danger';
};
/** A row that goes somewhere. A group takes these as its children. */
type SidebarNavLeaf = {
    id: string;
    label: string;
    href?: string;
    target?: string;
    icon?: string;
    leading?: ReactNode;
    badge?: SidebarNavBadge;
    disabled?: boolean;
    danger?: boolean;
};
/**
 * One level of nesting, the depth `sidebarNav()` renders: its `sideGroup()` maps
 * children through `sideLeaf()`, which has no group branch. A child's own `items`
 * are dropped here too, so the two halves render the same tree.
 */
type SidebarNavItem = SidebarNavLeaf & {
    items?: SidebarNavLeaf[];
    defaultOpen?: boolean;
};
type SidebarNavSection = {
    label?: string;
    items: SidebarNavItem[];
};
type SidebarNavProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
    items?: SidebarNavItem[];
    sections?: SidebarNavSection[];
    active?: string;
    activeIs?: 'page' | 'section';
    collapsed?: boolean;
    footer?: ReactNode;
    /** Spread all link props onto the router link to retain its name and current state. */
    renderLink?: (item: SidebarNavItem, props: ComponentPropsWithoutRef<'a'>) => ReactNode;
};
declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
    items?: SidebarNavItem[];
    sections?: SidebarNavSection[];
    active?: string;
    activeIs?: "page" | "section";
    collapsed?: boolean;
    footer?: ReactNode;
    /** Spread all link props onto the router link to retain its name and current state. */
    renderLink?: (item: SidebarNavItem, props: ComponentPropsWithoutRef<"a">) => ReactNode;
} & react.RefAttributes<HTMLElement>>;

type Accent = (typeof ACCENTS)[number];
type AccentPickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> & {
    value: Accent;
    onChange: (value: Accent) => void;
    options?: readonly Accent[];
};
declare const AccentPicker: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
    value: Accent;
    onChange: (value: Accent) => void;
    options?: readonly Accent[];
} & react.RefAttributes<HTMLDivElement>>;

type TopBarProps = Omit<ComponentPropsWithoutRef<'header'>, 'children'> & {
    /** The lockup. Left out, the bar draws the Apliteni mark and `word`. */
    brand?: ReactNode;
    /** The product word beside the mark, when `brand` is left out. */
    word?: string;
    brandHref?: string;
    /** A `ViewSwitch`, or nothing. */
    view?: ReactNode;
    /** A `VersionSwitcher`, or nothing. */
    version?: ReactNode;
    /** A `ThemeToggle`, or nothing. */
    theme?: ReactNode;
    /** An `AccountMenu`. Left out, the bar is the signed-out bar. */
    account?: ReactNode;
};
/** The band: brand first, the controls after the spacer. Each control is a slot. */
declare function TopBar({ brand, word, brandHref, view, version, theme, account, className, ...rest }: TopBarProps): react.JSX.Element;
type ViewSwitchItem = {
    id: string;
    label: string;
    href?: string;
    target?: string;
};
type ViewSwitchProps = {
    items: readonly ViewSwitchItem[];
    active: string;
    /** Names the group. */
    label?: string;
    /** Spread linkProps onto the router link, including children. */
    renderLink?: (item: ViewSwitchItem, linkProps: ComponentPropsWithoutRef<'a'>) => ReactNode;
};
/** The Deck and Text switch: links between views of one page, the current one filled. */
declare function ViewSwitch({ items, active, label, renderLink }: ViewSwitchProps): react.JSX.Element;
type Version = {
    value: string;
    label: string;
    badge?: 'live' | 'archive';
};
type VersionSwitcherProps = {
    versions: readonly Version[];
    value: string;
    onChange?: (value: string) => void;
    /** Names the list and the button. */
    label?: string;
    defaultOpen?: boolean;
};
/** The version menu: the button shows the chosen name, the open list ticks it. */
declare function VersionSwitcher({ versions, value, onChange, label, defaultOpen }: VersionSwitcherProps): react.JSX.Element;
type AccountMenuProps = {
    name: string;
    email: string;
    /** The rows above Sign out. Left out, the kit's account pages. */
    items?: DropdownEntry[];
    /** The current account page. One menu row takes the accent ink. */
    current?: string;
    signOutHref?: string;
    onSignOut?: () => void;
    onSelect?: (value: string | number | undefined) => void;
    defaultOpen?: boolean;
};
/** The avatar and its menu. */
declare function AccountMenu({ name, email, items, current, signOutHref, onSignOut, onSelect, defaultOpen, }: AccountMenuProps): react.JSX.Element;

type NavTabBadge = string | number | {
    text: string | number;
    tone?: 'neutral' | 'accent' | 'live' | 'danger';
};
type NavTabItem = {
    id: string;
    label: string;
    href?: string;
    target?: string;
    disabled?: boolean;
    badge?: NavTabBadge | null;
};
type NavTabsProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
    items: readonly NavTabItem[];
    active?: string;
    variant?: 'underline' | 'pill';
    /** Spread linkProps onto the router link, including children. */
    renderLink?: (item: NavTabItem, linkProps: ComponentPropsWithoutRef<'a'>) => ReactNode;
};
declare const NavTabs: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
    items: readonly NavTabItem[];
    active?: string;
    variant?: "underline" | "pill";
    /** Spread linkProps onto the router link, including children. */
    renderLink?: (item: NavTabItem, linkProps: ComponentPropsWithoutRef<"a">) => ReactNode;
} & react.RefAttributes<HTMLElement>>;

declare const PAGE_SIZES: readonly number[];
declare const DEFAULT_PAGE_SIZE: number;

export { type Accent, AccentPicker, type AccentPickerProps, AccountMenu, type AccountMenuProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, AuthShell, type AuthShellProps, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Feedback, type FeedbackPayload, type FeedbackProps, type FeedbackResult, type FeedbackSection, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Footer, type FooterColumn, type FooterLink, type FooterProps, type FooterSocial, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, type Version, VersionSwitcher, type VersionSwitcherProps, ViewSwitch, type ViewSwitchItem, type ViewSwitchProps, sortTableRows, useToast };