import { type ComponentProps, type ReactNode } from "react";
/**
 * The list toolbar: search on the left, filters and the page's action on the
 * right, in a row that keeps its shape when tabs or filters change. On narrow
 * widths (its own container, not the viewport) the search takes the first line
 * and everything else moves to a second line, still in the same order.
 */
export declare function Toolbar({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
/**
 * Groups controls that belong together (a segmented filter and a view toggle,
 * or the page action). `align="end"` pins the group to the right edge, on
 * either line when the toolbar wraps.
 */
export declare function ToolbarGroup({ align, className, ...props }: ComponentProps<"div"> & {
    align?: "start" | "end";
}): import("react").JSX.Element;
export type ToolbarSearchSize = "md" | "lg";
export interface ToolbarSearchProps extends Omit<ComponentProps<"input">, "size" | "value" | "onChange" | "type"> {
    value: string;
    onValueChange: (value: string) => void;
    /** Names what is searchable: "Search connections, skills, and plugins". */
    placeholder: string;
    /**
     * `md` (36px, radius 10) sits in a row with 36px controls. `lg` (44px,
     * radius 14) is the page-level search on its own line, as on Capabilities.
     */
    size?: ToolbarSearchSize | undefined;
    /** Classes for the field wrapper (width, flex basis). */
    wrapperClassName?: string | undefined;
}
export declare function ToolbarSearch({ value, onValueChange, placeholder, size, wrapperClassName, className, disabled, onKeyDown, "aria-label": ariaLabel, ...props }: ToolbarSearchProps): import("react").JSX.Element;
export interface ToolbarFilterOption {
    id: string;
    label: string;
    /** Optional count shown right-aligned in the menu. */
    count?: number | undefined;
}
export interface ToolbarFilterGroup {
    id: string;
    /** Sentence case: "Type", "Status". */
    label: string;
    options: ToolbarFilterOption[];
}
/** Selected option ids per group id. An empty or missing list means "any". */
export type ToolbarFilterValue = Record<string, readonly string[]>;
export declare function countActiveFilters(value: ToolbarFilterValue): number;
export declare function toggleFilter(value: ToolbarFilterValue, groupId: string, optionId: string, checked: boolean): ToolbarFilterValue;
export interface ToolbarFilterMenuProps {
    groups: ToolbarFilterGroup[];
    value: ToolbarFilterValue;
    onValueChange: (value: ToolbarFilterValue) => void;
    /** Button label. Default "Filter". */
    label?: string | undefined;
    disabled?: boolean | undefined;
    align?: "start" | "end" | undefined;
    className?: string | undefined;
}
export declare function ToolbarFilterMenu({ groups, value, onValueChange, label, disabled, align, className, }: ToolbarFilterMenuProps): import("react").JSX.Element;
/**
 * The applied filters as removable chips, shown next to the Filter button so
 * the active state is never hidden inside a closed menu.
 */
export declare function ToolbarFilterChips({ groups, value, onValueChange, className, }: {
    groups: ToolbarFilterGroup[];
    value: ToolbarFilterValue;
    onValueChange: (value: ToolbarFilterValue) => void;
    className?: string | undefined;
}): import("react").JSX.Element | null;
/** A quiet result line under the toolbar: "3 of 12 connections". */
export declare function ToolbarSummary({ className, children, }: {
    className?: string | undefined;
    children: ReactNode;
}): import("react").JSX.Element;