import { type ReactNode } from "react";
import { type ColorTokens, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
export interface CheckboxProps {
    /** Label text (the option's title) shown beside the box. */
    children?: ReactNode;
    /**
     * Optional muted secondary line rendered under the label, for the common
     * title-plus-description option (a notification setting, a consent row).
     * Supplying it builds the stacked title/description layout inside the control,
     * so the caller never hand-composes a Row + Column + two Typography nodes and
     * the whole row stays tappable.
     */
    description?: ReactNode;
    /** Controlled checked state; omit for uncontrolled use. */
    checked?: boolean;
    /** Initial state for uncontrolled use (a bare <Checkbox /> is interactive). */
    defaultChecked?: boolean;
    /**
     * Mixed state: some-but-not-all selected. Shown as a dash, not a tick.
     * Takes visual precedence over `checked`.
     */
    indeterminate?: boolean;
    /** Fired with the next checked value when the row is pressed (both modes). */
    onChange?: (next: boolean) => void;
    /** Alias of onChange, for parity with RN's value-style callbacks. */
    onValueChange?: (next: boolean) => void;
    /**
     * Accessible name for a LABEL-LESS checkbox (one with no `children`, e.g. a
     * row selector in a table). With a visible label the label itself is the name;
     * without one this is what a screen reader announces.
     */
    accessibilityLabel?: string;
    /** E2E hook forwarded to the pressable row. */
    testID?: string;
    small?: boolean;
    large?: boolean;
    disabled?: boolean;
    /** Outer layout composition only (width/flex within a parent), never a restyle hook. */
    style?: StyleProp<ViewStyle>;
}
export type Size = "small" | "base" | "large";
export interface CheckboxSkin {
    /** The square box. `filled` = checked or indeterminate. `nudge` aligns the box to a label's first line. */
    box: (tokens: ColorTokens, filled: boolean, size: Size, nudge: boolean) => ViewStyle;
    /** The check / dash glyph inside a filled box. */
    glyph: (tokens: ColorTokens, size: Size) => TextStyle;
    /** The label text to the right of the box. */
    label: (tokens: ColorTokens, size: Size) => TextStyle;
    /** The muted secondary description line, rendered under the label when present. */
    description: (tokens: ColorTokens, size: Size) => TextStyle;
    /** Opacity applied to the row when disabled. */
    disabledOpacity: number;
    /** iOS/web dim the row on press; Android uses a ripple instead (null). */
    pressedOpacity: number | null;
    /** Android ripple over the box; null on iOS/web. */
    ripple: ((tokens: ColorTokens) => {
        color: string;
        borderless: boolean;
        radius?: number;
    }) | null;
}
/** Build a Checkbox component from a platform skin. */
export declare function createCheckbox(skin: CheckboxSkin): (props: CheckboxProps) => import("react").JSX.Element;
//# sourceMappingURL=checkbox.shared.d.ts.map