/**
 * FacetDropdown Component
 *
 * A dropdown component that displays facet values from a specific field
 * and allows users to filter search results by selecting values.
 *
 * Can be used standalone (fetches its own data) or integrated with SearchProvider.
 *
 * @cssVariables
 * Customize the dropdown appearance using CSS variables:
 *
 * Button:
 * - `--facet-dropdown-button-bg`: Button background color
 * - `--facet-dropdown-text`: Button text color
 * - `--facet-dropdown-border`: Button and panel border color
 * - `--facet-dropdown-font-size`: Button font size (default: 0.875rem)
 * - `--facet-dropdown-font-weight`: Button font weight (default: 500)
 *
 * Dropdown Panel:
 * - `--facet-dropdown-bg`: Panel background color
 * - `--facet-dropdown-shadow`: Panel box shadow
 *
 * Options:
 * - `--facet-dropdown-option-text`: Option text color
 * - `--facet-dropdown-option-font-size`: Option font size (default: 0.875rem)
 * - `--facet-dropdown-option-font-weight-active`: Active option font weight (default: 500)
 * - `--facet-dropdown-option-active-bg`: Active option background color
 *
 * Count Badge:
 * - `--facet-dropdown-count-text`: Count text color
 * - `--facet-dropdown-count-font-size`: Count font size (default: 0.75rem)
 *
 * Scrollbar:
 * - `--facet-dropdown-scrollbar-thumb`: Scrollbar thumb color
 * - `--facet-dropdown-scrollbar-thumb-hover`: Scrollbar thumb hover color
 *
 * @example
 * ```tsx
 * <FacetDropdown
 *   field="category"
 *   placeholder="All Categories"
 *   applyFilter={true}
 *   showCounts={true}
 * />
 * ```
 */
import React from 'react';
import type { SeekoraClient } from '@seekora-ai/search-sdk';
export interface FacetDropdownOption {
    value: string;
    count: number;
    label?: string;
}
export interface FacetDropdownTheme {
    button?: string;
    buttonOpen?: string;
    panel?: string;
    option?: string;
    optionActive?: string;
    optionHover?: string;
    caretIcon?: string;
}
export interface FacetDropdownProps {
    /** The facet field to display (e.g., "category", "brand", "product_type") */
    field: string;
    /** Placeholder text when no value is selected */
    placeholder?: string;
    /** Custom className for the button */
    className?: string;
    /** Custom theme overrides */
    theme?: FacetDropdownTheme;
    /** Called when a value is selected */
    onChange?: (value: string) => void;
    /** Current selected value (controlled mode) */
    value?: string;
    /** Maximum number of options to show before scrolling */
    maxOptions?: number;
    /** Whether to show facet counts */
    showCounts?: boolean;
    /** Custom options (if you want to provide static options instead of fetching) */
    options?: FacetDropdownOption[];
    /** Standalone mode: provide your own search client */
    client?: SeekoraClient;
    /** Apply filter immediately on selection (default: true) */
    applyFilter?: boolean;
    /** Navigate to search page on selection (default: false) */
    navigateOnSelect?: boolean;
    /** Base URL for navigation (e.g., "/search") */
    searchPageUrl?: string;
    /** Use dedicated Filters API instead of search API for fetching facet values */
    useFiltersApi?: boolean;
}
export declare const FacetDropdown: React.FC<FacetDropdownProps>;
//# sourceMappingURL=FacetDropdown.d.ts.map