/**
 * ButtonGroup — several buttons drawn as one control.
 *
 * ```tsx
 * <ButtonGroup>
 *   <Button startContent={<ListChecksIcon size={16} />}>Tasks</Button>
 *   <Button startContent={<CalendarIcon size={16} />}>Agenda</Button>
 *   <Button startContent={<ChartIcon size={16} />}>Board</Button>
 * </ButtonGroup>
 * ```
 *
 * The buttons stay buttons. Anything a `Button` does — an icon, a badge, a
 * loading state, a disabled segment, opening a Popover — it still does inside a
 * group, because the group is a container rather than a component that takes a
 * list of items and renders them for you. A list-of-items API has to grow a
 * prop for every one of those things; this one has none of them and can do all
 * of them.
 *
 * ## Why the container draws the border
 *
 * A joined run could be built by giving the first and last segments their
 * corners and squaring the ones between, then collapsing every shared edge with
 * a negative margin. That works on the web and is a stack of off-by-one
 * problems on a phone: the hairlines land on different fractions of a pixel per
 * device, and a run that wraps has no first or last segment any more.
 *
 * So the group draws the shape once — one border, one radius, one shadow,
 * clipped — and the buttons inside it draw none of their own. The dividers are
 * real one-pixel views the group puts between its children, which is also why
 * they are always exactly one pixel and always in the same place.
 *
 * ## What it passes down
 *
 * `variant` and `size` fill in for a button that did not choose its own, so a
 * run of six does not repeat the same two props six times. A segment that wants
 * to stand out — the selected one, the destructive one — sets its own and wins.
 *
 * ```tsx
 * <ButtonGroup size="sm">
 *   <Button>Day</Button>
 *   <Button variant="secondary">Week</Button>   {/* the selected one *\/}
 *   <Button>Month</Button>
 * </ButtonGroup>
 * ```
 *
 * ## Not a selection control
 *
 * This joins buttons; what they mean is yours. For a control that owns which
 * one is on, reach for `ToggleButtonGroup`, and for switching between panels of
 * content reach for `Tabs` — a segmented run of buttons that swaps a screen is
 * navigation, and navigation should say so to a screen reader.
 */
import { type ReactNode } from 'react';
import { View, type ViewProps } from 'react-native';
import { type VariantProps } from 'tailwind-variants';
import { type ButtonSize, type ButtonVariant } from '../button/index.js';
/** Which way the run reads. */
export type ButtonGroupOrientation = 'horizontal' | 'vertical';
declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
    orientation: {
        horizontal: {
            root: string;
            divider: string;
        };
        vertical: {
            root: string;
            divider: string;
        };
    };
    attached: {
        true: {
            root: string;
        };
        false: {
            root: string;
        };
    };
    size: {
        sm: {
            root: string;
        };
        md: {
            root: string;
        };
        lg: {
            root: string;
        };
        xl: {
            root: string;
        };
        icon: {
            root: string;
        };
    };
    fullWidth: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    divider: string;
}, undefined, {
    orientation: {
        horizontal: {
            root: string;
            divider: string;
        };
        vertical: {
            root: string;
            divider: string;
        };
    };
    attached: {
        true: {
            root: string;
        };
        false: {
            root: string;
        };
    };
    size: {
        sm: {
            root: string;
        };
        md: {
            root: string;
        };
        lg: {
            root: string;
        };
        xl: {
            root: string;
        };
        icon: {
            root: string;
        };
    };
    fullWidth: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    divider: string;
}, import("tailwind-variants").TVReturnType<{
    orientation: {
        horizontal: {
            root: string;
            divider: string;
        };
        vertical: {
            root: string;
            divider: string;
        };
    };
    attached: {
        true: {
            root: string;
        };
        false: {
            root: string;
        };
    };
    size: {
        sm: {
            root: string;
        };
        md: {
            root: string;
        };
        lg: {
            root: string;
        };
        xl: {
            root: string;
        };
        icon: {
            root: string;
        };
    };
    fullWidth: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    divider: string;
}, undefined, unknown, unknown, undefined>>;
type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;
export interface ButtonGroupProps extends ViewProps, Omit<ButtonGroupVariantProps, 'size' | 'attached'> {
    className?: string;
    /** Which way the run reads. Vertical is the toolbar down the side of a canvas. */
    orientation?: ButtonGroupOrientation;
    /** Fills in for any button that did not choose its own. */
    variant?: ButtonVariant;
    /** Fills in for any button that did not choose its own, and sets the radius. */
    size?: ButtonSize;
    /**
     * Draw the run as one joined shape.
     *
     * On by default — that is what a group is. Turn it off for a plain row of
     * separate buttons that should still share a variant and a size, which is a
     * toolbar rather than a segmented control.
     */
    attached?: boolean;
    /**
     * Span the container, with the segments sharing it equally.
     *
     * Equally, not by content: a row of segments at their natural widths is a row
     * whose divisions move when the labels change, and a picker whose halves are
     * different sizes reads as though one of them matters more.
     */
    fullWidth?: boolean;
    children?: ReactNode;
}
export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<View>>;
export {};
//# sourceMappingURL=index.d.ts.map