/**
 * SortBy Component
 *
 * Displays sort options for search results in multiple display variants:
 * - dropdown (default) — native select element
 * - button-group — horizontal row of toggle buttons
 * - radio-group — vertical list of radio inputs
 *
 * Integrates with SearchStateManager for automatic state sync.
 *
 * CSS Variables (apply on a parent element to customize):
 * --seekora-sort-bg           — background color
 * --seekora-sort-color        — text color
 * --seekora-sort-border       — border color
 * --seekora-sort-active-bg    — active item background
 * --seekora-sort-active-color — active item text color
 */
import React from 'react';
export interface SortOption {
    value: string;
    label: string;
}
export type SortByVariant = 'dropdown' | 'button-group' | 'radio-group';
export type SortBySize = 'small' | 'medium' | 'large';
export interface SortByTheme {
    /** Root container */
    container?: string;
    /** Dropdown select element */
    select?: string;
    /** Dropdown option element */
    option?: string;
    /** Optional label above the control */
    label?: string;
    /** Button group wrapper */
    buttonGroup?: string;
    /** Individual button in the group */
    buttonGroupItem?: string;
    /** Active button in the group */
    buttonGroupItemActive?: string;
    /** Radio group wrapper */
    radioGroup?: string;
    /** Individual radio row (input + label) */
    radioItem?: string;
    /** Active radio row */
    radioItemActive?: string;
    /** Radio label text */
    radioLabel?: string;
}
export interface SortByProps {
    /** Available sort options */
    options: SortOption[];
    /** Current sort value (controlled mode - overrides StateManager) */
    value?: string;
    /** Default sort value */
    defaultValue?: string;
    /** Callback when sort changes */
    onSortChange?: (value: string) => void;
    /** Custom render function for select (only used in dropdown variant) */
    renderSelect?: (props: {
        value: string;
        onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
        options: SortOption[];
    }) => React.ReactNode;
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: React.CSSProperties;
    /** Custom theme */
    theme?: SortByTheme;
    /** Placeholder text (dropdown variant) */
    placeholder?: string;
    /** Whether to sync with SearchStateManager (default: true) */
    syncWithState?: boolean;
    /** Display variant (default: 'dropdown') */
    variant?: SortByVariant;
    /** Optional label text displayed above the control */
    label?: string;
    /** Whether to show the label (default: true when label is provided) */
    showLabel?: boolean;
    /** Size variant affecting padding and font size (default: 'medium') */
    size?: SortBySize;
}
export declare const SortBy: React.FC<SortByProps>;
//# sourceMappingURL=SortBy.d.ts.map