import { type AnchorHTMLAttributes, type MouseEvent, type ReactNode } from "react";
import { type LogoTileSize } from "./logo-tile.js";
export type RowListVariant = "catalog" | "resource" | "table";
export interface RowListColumn {
    /** Key into each row's `cells`. */
    id: string;
    /** Header in tables; the small label above the value in resource rows. */
    label: string;
    /** Column width in px on wide layouts. Default 132. */
    width?: number | undefined;
    align?: "start" | "end" | undefined;
    /** Tables only: the header becomes a sort button. */
    sortable?: boolean | undefined;
    /**
     * Hide the label in resource rows and the folded meta line, for values that
     * explain themselves ("4 variables"). The table header still shows it.
     */
    hideLabel?: boolean | undefined;
    /**
     * On narrow lists this fact folds in ahead of the meta items instead of
     * after them and stays on a phone-width line, for a value the row exists to
     * show (an amount). Keep it to one or two short facts per list.
     */
    leadsWhenFolded?: boolean | undefined;
}
export interface RowListSort {
    /** A column id, or "name" for the title column. */
    column: string;
    direction: "asc" | "desc";
}
/** The layout of the enclosing RowList. */
export declare function useRowListVariant(): RowListVariant;
export interface RowListProps {
    /** Default "resource". */
    variant?: RowListVariant | undefined;
    /** Fact columns: labelled values in resource rows, real columns in tables. */
    columns?: RowListColumn[] | undefined;
    /** Accessible name for the list or table, for example "Variable sets". */
    label: string;
    /** Header of the title column in tables. Default "Name". */
    nameLabel?: string | undefined;
    /** Tables: make the title column sortable. */
    nameSortable?: boolean | undefined;
    /** Tables: the current sort. Sorting the rows is the caller's job. */
    sort?: RowListSort | undefined;
    onSortChange?: ((sort: RowListSort) => void) | undefined;
    /** Rows are loading; announces it and sets aria-busy. */
    busy?: boolean | undefined;
    /**
     * Resource lists inside an open section or page: tiles and titles line up
     * with the section's edge, the row hover bleeds 12px out with rounded
     * corners, and the hairlines stay inside the content edge.
     */
    flush?: boolean | undefined;
    className?: string | undefined;
    children: ReactNode;
}
export declare function RowList({ variant, columns, label, nameLabel, nameSortable, sort, onSortChange, busy, flush, className, children, }: RowListProps): import("react").JSX.Element;
export type RowIndicatorKind = "open" | "expand" | "external" | "add" | "added" | "attention" | "unavailable" | "loading";
export interface RowIndicatorProps {
    kind: RowIndicatorKind;
    /**
     * The state in words. Visible for "attention" and "unavailable" ("Needs
     * reconnect"); screen-reader only for the others.
     */
    label?: string | undefined;
    id?: string | undefined;
    className?: string | undefined;
}
export declare function RowIndicator({ kind, label, id, className }: RowIndicatorProps): import("react").JSX.Element;
type RowLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "children">;
export interface ListRowProps {
    /** Leading tile: a LogoTile (sized by the list), an avatar or a status dot. */
    leading?: (ReactNode | ((size: LogoTileSize) => ReactNode)) | undefined;
    /** One line, 14/500. The row's accessible name. */
    title: ReactNode;
    /** Small chips right after the title: "Organization", "Primary", "You". */
    titleAddon?: ReactNode | undefined;
    /** One sentence, 12/18 muted. Two lines in catalog rows, one elsewhere. */
    description?: ReactNode | undefined;
    /** Quiet facts joined with " · " (the meta line). */
    meta?: ReactNode[] | undefined;
    /**
     * The row's state, usually a dot StatusBadge ("Suspended", "Invited ·
     * expires in 14 days"). It sits at the right of the name area on wide lists
     * and joins the meta line on narrow ones: a status never adds a line.
     */
    status?: ReactNode | undefined;
    /** Values for the list's fact columns, by column id. */
    cells?: Record<string, ReactNode> | undefined;
    /** Display-only trailing glyph. A kind, or a kind with its state in words. */
    indicator?: RowIndicatorKind | {
        kind: RowIndicatorKind;
        label?: string;
    };
    /**
     * One interactive control (a switch, a small button). Sits above the row
     * target; drops under the text on narrow lists that have fact columns.
     */
    control?: ReactNode | undefined;
    /** Items for the row's ⋯ menu (DropdownMenuItem elements). */
    menu?: ReactNode | undefined;
    /** Accessible name of the ⋯ button. Default "More actions for <title>". */
    menuLabel?: string | undefined;
    /** Makes the whole row a button. */
    onOpen?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
    /** Makes the whole row a link. */
    href?: string | undefined;
    /**
     * Extra props for the link (target, rel, router handlers). An in-app `href`
     * needs `onClick` (or `onOpen`) to call the router and preventDefault on a
     * plain click; otherwise the row loads the whole page.
     */
    linkProps?: RowLinkProps | undefined;
    /** The row's detail is open (sheet or page). */
    selected?: boolean | undefined;
    /**
     * Expand in place (one level of secondary detail). The row toggles `panel`
     * below it and announces aria-expanded. Prefer a sheet for anything larger.
     */
    expanded?: boolean | undefined;
    /** The content shown under the row while `expanded`. List layouts only. */
    panel?: ReactNode | undefined;
    /** Not actionable right now. Say why with `disabledReason`. */
    disabled?: boolean | undefined;
    /** Why the row can't be used, and who can fix it. Replaces the description. */
    disabledReason?: ReactNode | undefined;
    className?: string | undefined;
}
export declare function ListRow({ leading, title, titleAddon, description, meta, status, cells, indicator, control, menu, menuLabel, onOpen, href, linkProps, selected, expanded, panel, disabled, disabledReason, className, }: ListRowProps): import("react").JSX.Element;
export declare function ListRowSkeleton({ count }: {
    count?: number;
}): import("react").JSX.Element;
export {};