/**
 * ToggleButton — a button that stays down.
 *
 * The difference from Button is the whole point: a button does something and
 * springs back, a toggle button *is* something afterwards. So the selected
 * state is the loud one — a filled accent surface — and the resting state is
 * quiet, either a soft fill or nothing at all.
 *
 * ```tsx
 * <ToggleButton defaultSelected>Like</ToggleButton>
 *
 * <ToggleButton iconOnly accessibilityLabel="Bold">
 *   <BoldIcon size={16} />
 * </ToggleButton>
 * ```
 *
 * `ToggleButtonGroup` takes over the state for a set of them — a segmented
 * toolbar in `multiple` mode, an either-or choice in `single`. Inside a group
 * each button needs an `id`, which is the value the group reports.
 *
 * ```tsx
 * <ToggleButtonGroup selectionMode="multiple" value={marks} onValueChange={setMarks}>
 *   <ToggleButton id="bold" iconOnly accessibilityLabel="Bold">…</ToggleButton>
 *   <ToggleButton id="italic" iconOnly accessibilityLabel="Italic">…</ToggleButton>
 * </ToggleButtonGroup>
 * ```
 */
import { type ReactNode } from 'react';
import { View, type ViewProps } from 'react-native';
import { type VariantProps } from 'tailwind-variants';
import { type AnimatedPressableProps } from '../../primitives/animated-pressable.js';
declare const toggleVariants: import("tailwind-variants").TVReturnType<{
    variant: {
        /** A soft fill at rest, so the control is visible before you touch it. */
        default: {
            root: string;
        };
        /** Nothing at rest — for a dense toolbar where six fills would be noise. */
        ghost: {
            root: string;
        };
    };
    size: {
        sm: {
            root: string;
            label: string;
        };
        md: {
            root: string;
            label: string;
        };
        lg: {
            root: string;
            label: string;
        };
    };
    selected: {
        true: {
            root: string;
            label: string;
        };
        false: {
            label: string;
        };
    };
    iconOnly: {
        true: {
            root: string;
        };
    };
    disabled: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    label: string;
}, undefined, {
    variant: {
        /** A soft fill at rest, so the control is visible before you touch it. */
        default: {
            root: string;
        };
        /** Nothing at rest — for a dense toolbar where six fills would be noise. */
        ghost: {
            root: string;
        };
    };
    size: {
        sm: {
            root: string;
            label: string;
        };
        md: {
            root: string;
            label: string;
        };
        lg: {
            root: string;
            label: string;
        };
    };
    selected: {
        true: {
            root: string;
            label: string;
        };
        false: {
            label: string;
        };
    };
    iconOnly: {
        true: {
            root: string;
        };
    };
    disabled: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    label: string;
}, import("tailwind-variants").TVReturnType<{
    variant: {
        /** A soft fill at rest, so the control is visible before you touch it. */
        default: {
            root: string;
        };
        /** Nothing at rest — for a dense toolbar where six fills would be noise. */
        ghost: {
            root: string;
        };
    };
    size: {
        sm: {
            root: string;
            label: string;
        };
        md: {
            root: string;
            label: string;
        };
        lg: {
            root: string;
            label: string;
        };
    };
    selected: {
        true: {
            root: string;
            label: string;
        };
        false: {
            label: string;
        };
    };
    iconOnly: {
        true: {
            root: string;
        };
    };
    disabled: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    label: string;
}, undefined, unknown, unknown, undefined>>;
type ToggleVariantProps = VariantProps<typeof toggleVariants>;
export type ToggleButtonSize = NonNullable<ToggleVariantProps['size']>;
export type ToggleButtonVariant = NonNullable<ToggleVariantProps['variant']>;
export type ToggleSelectionMode = 'single' | 'multiple';
export interface ToggleButtonGroupProps extends ViewProps {
    className?: string;
    /**
     * `multiple` is a set of independent marks — bold *and* italic. `single` is
     * an either-or choice where picking one clears the last.
     */
    selectionMode?: ToggleSelectionMode;
    /** Selected ids. Controlled — pair with `onValueChange`. */
    value?: string[];
    /** Starting selection when uncontrolled. */
    defaultValue?: string[];
    onValueChange?: (value: string[]) => void;
    /** Disables every button in the group. */
    disabled?: boolean;
    /** Applied to every button that does not set its own. */
    variant?: ToggleButtonVariant;
    size?: ToggleButtonSize;
    /**
     * A tick under the finger each time a button is pressed. Off by default —
     * needs the optional `expo-haptics`, and is silent without it. Inherited by
     * every button that does not set its own.
     */
    haptics?: boolean;
    children: ReactNode;
}
declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<View>>;
interface ToggleStateValue {
    selected: boolean;
    disabled: boolean;
}
/**
 * The toggle's own state, for anything rendered inside it — an icon that
 * changes shape when selected, a count that only shows when it is on.
 */
export declare function useToggleButton(): ToggleStateValue;
export interface ToggleButtonProps extends Omit<AnimatedPressableProps, 'children' | 'disabled'>, Omit<ToggleVariantProps, 'selected' | 'disabled' | 'iconOnly'> {
    children?: ReactNode;
    className?: string;
    /** Extra classes for the label when children is a string. */
    labelClassName?: string;
    /** Identifies this button within a `ToggleButtonGroup`. Required there. */
    id?: string;
    /** Controlled selection. Ignored inside a group, which owns the state. */
    selected?: boolean;
    /** Starting state when uncontrolled and outside a group. */
    defaultSelected?: boolean;
    onSelectedChange?: (selected: boolean) => void;
    disabled?: boolean;
    /**
     * A tick under the finger each time the button is pressed. Off by default —
     * needs the optional `expo-haptics`, and is silent without it. Inside a
     * group, falls back to the group's `haptics`.
     */
    haptics?: boolean;
    /** Square, with no horizontal padding — for a single icon. */
    iconOnly?: boolean;
    /** Extra classes applied only while selected. */
    selectedClassName?: string;
    /** Extra classes applied only while unselected. */
    unselectedClassName?: string;
}
export interface ToggleButtonLabelProps {
    className?: string;
    children: ReactNode;
}
/**
 * The label, when the button holds more than a string — an icon beside text.
 * It reads the selected state itself, so composing the two does not mean
 * threading the colour through by hand.
 */
declare function ToggleButtonLabel({ className, children }: ToggleButtonLabelProps): import("react").JSX.Element;
declare namespace ToggleButtonLabel {
    var displayName: string;
}
export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<View>> & {
    Label: typeof ToggleButtonLabel;
};
export { ToggleButtonGroup };
//# sourceMappingURL=index.d.ts.map