import { CommonProps, Refable } from "@trackunit/react-components";
import { HTMLAttributes, ReactElement } from "react";
export interface SortIndicatorProps extends CommonProps, HTMLAttributes<HTMLSpanElement>, Refable<HTMLDivElement> {
    /**
     * A id that can be used in tests to get the component
     */
    "data-testid"?: string;
    /**
     * Custom classNames that will be merged with the default classNames.
     */
    className?: string;
    /**
     * The current state of the sorting.
     */
    sortingState?: false | "asc" | "desc";
}
/**
 * SortIndicator renders ascending/descending arrow indicators in a table column header.
 * It is a visual-only component — it does not handle sorting logic. Set `sortingState` to
 * `"asc"`, `"desc"`, or `false` (hidden).
 *
 * In most cases, use the Table component which handles sort indication automatically.
 * Use SortIndicator directly only when building custom table headers with the Table Base Components.
 *
 * ### When to use
 * Use SortIndicator in custom table header cells that need to show the current sort direction.
 *
 * ### When not to use
 * Do not use SortIndicator when using the `Table` component — sorting indicators are built in.
 *
 * @example Sort indicator in a custom header
 * ```tsx
 * import { SortIndicator } from "@trackunit/react-table-base-components";
 *
 * const CustomHeader = ({ sortDirection }: { sortDirection: "asc" | "desc" | false }) => (
 *   <div className="flex items-center gap-1">
 *     <span>Column Name</span>
 *     <SortIndicator sortingState={sortDirection} />
 *   </div>
 * );
 * ```
 * @param {SortIndicatorProps} props - The props for the SortIndicator component
 * @returns {ReactElement} SortIndicator component
 */
export declare const SortIndicator: ({ sortingState, "data-testid": dataTestId, className, ref, ...rest }: SortIndicatorProps) => ReactElement;