import { type ComponentType } from "react";
import { type ViewStyle, type TextStyle } from "react-native";
import { type ColorTokens } from "../../style/index.js";
import { type CheckboxIndicatorProps } from "../../atoms/checkbox/indicator/shared.js";
import { type ButtonProps } from "../../atoms/button/button.shared.js";
export type Density = "compact" | "base";
export type CheckboxComponent = ComponentType<CheckboxIndicatorProps>;
export type ButtonComponent = ComponentType<ButtonProps>;
export interface FilterPanelSkin {
    /** Fixed panel width + column layout, shared by both surfaces. */
    panelBase: ViewStyle;
    /** `bordered` card chrome: radius + border + card fill. */
    borderedSurface: (tokens: ColorTokens) => ViewStyle;
    /** Panel inset per density. */
    panelPad: Record<Density, ViewStyle>;
    /** Vertical rhythm between header and groups, and between groups, per density. */
    panelStack: Record<Density, ViewStyle>;
    /** Between a group's heading and its options, per density. */
    groupGap: Record<Density, ViewStyle>;
    /** Between a group's options, per density. */
    optionGap: Record<Density, ViewStyle>;
    /** Header row: the title left, Clear right. */
    headerRow: ViewStyle;
    /** "Filters" heading type. */
    titleText: (tokens: ColorTokens) => TextStyle;
    /** A group column (title above its option list). */
    groupColumn: ViewStyle;
    /** Group heading type. */
    groupTitle: (tokens: ColorTokens) => TextStyle;
    /** One option row: the mark and label left, the optional count right. */
    optionRow: ViewStyle;
    /** The option's count: plain mono text at the row's end. */
    countText: (tokens: ColorTokens) => TextStyle;
    /**
     * How an option row marks its selection: the platform's selection Checkbox beside
     * the label (the web and Android), or the label alone with a trailing check after
     * its count (iOS lists). An indicator row with a `label` sets the label in that type
     * beside the bare box (the web); without one the label is the Checkbox's own (Android).
     */
    optionMark: {
        kind: "indicator";
        label?: (tokens: ColorTokens) => TextStyle;
    } | {
        kind: "trailing";
        label: (tokens: ColorTokens) => TextStyle;
        check: (tokens: ColorTokens) => TextStyle;
    };
    /** iOS dims the row on press; the web takes none and Android uses a ripple instead (null). */
    rowPressedOpacity: number | null;
    /** Android ripple over the option row; null on iOS/web. */
    rowRipple: ((tokens: ColorTokens) => {
        color: string;
        borderless: boolean;
    }) | null;
}
export declare const webSkin: FilterPanelSkin;
export declare const iosSkin: FilterPanelSkin;
export declare const androidSkin: FilterPanelSkin;
//# sourceMappingURL=filter-panel.styles.d.ts.map