import { type ComponentType } from "react";
import { type ViewStyle, type TextStyle } from "react-native";
import { type ColorTokens } from "../../style/index.js";
import { type CheckboxProps } from "../../atoms/checkbox/checkbox.shared.js";
import { type BadgeProps } from "../../atoms/badge/badge.shared.js";
import { type ButtonProps } from "../../atoms/button/button.shared.js";
export type Density = "compact" | "base";
export type CheckboxComponent = ComponentType<CheckboxProps>;
export type BadgeComponent = ComponentType<BadgeProps>;
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 (radius is per-OS). */
    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>;
    /** Row spacing inside a group + between a group's title and options, per density. */
    groupGap: Record<Density, ViewStyle>;
    /** Header row: title cluster left, Clear right. */
    headerRow: ViewStyle;
    /** Title + active-count cluster. */
    titleCluster: ViewStyle;
    /** "Filters" heading type. */
    titleText: (tokens: ColorTokens) => TextStyle;
    /** A group column (title above its option list). */
    groupColumn: ViewStyle;
    /** Group heading type (the per-OS tracking/case touch lives here). */
    groupTitle: (tokens: ColorTokens) => TextStyle;
    /** One option row: checkbox left, optional count badge right. */
    optionRow: ViewStyle;
    /** iOS/web dim the row on press; 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