import * as class_variance_authority_types from 'class-variance-authority/types';
import { useRender } from '@base-ui/react/use-render';
import { VariantProps } from 'class-variance-authority';
import * as React from 'react';
export { ButtonGroupBoundary } from '../lib/button-group-context.js';
import { ButtonProps } from './button.js';
import { Separator } from './separator.js';
import '@base-ui/react/button';
import './link.js';
import '@base-ui/react/separator';

/**
 * The group owns the boundary. It draws the frame or the band, the hairline
 * between segments and the 4px corners, and it clips its children to that
 * radius — so a segment never computes a corner of its own. The segments are
 * ordinary Buttons: they read `ButtonGroupContext` and give up the chrome the
 * group now draws (see `styles.segment` in button.tsx).
 *
 * This replaces a wrapper that collapsed borders through `[data-slot]` child
 * selectors copied from shadcn. Button never emitted `data-slot`, so none of
 * those rules matched: every Button kept its own 2px outline and 4px corners,
 * and neighbours met with a 4px doubled border.
 *
 * Every colour is Button's own `--btn-fill` / `--btn-bg` / `--btn-text` pair,
 * applied to the group by `buttonColorVariants`, so a group's `color` means
 * what a Button's does: the ink flips for dark mode the same way, and on a
 * soft or surface band it steps to the darker ink those tints need the same
 * way (`styles.tintInk` in button.tsx). The segments learn they sit on that
 * tint from the `band` the context carries, and step their own colour's ink,
 * so a segment naming another colour keeps it. Hairlines take the text
 * colour, per the masterbrand's line system. These classes therefore only
 * paint on an element that also carries `buttonColorVariants` —
 * `ring-(--btn-bg)` is invalid without it — so a consumer extending the
 * group's styling applies the two together, as `ButtonGroup` does.
 *
 * Two kinds of rule reach a segment. What depends on the segment's
 * NEIGHBOURS — dividers, seams, the text cell — lives here and uses the CHILD
 * combinator (`&>`) and sibling combinators, so it needs the segments to be
 * direct children. What depends only on the BAND — the re-ink on a solid
 * band, the frame-revealing `bg-clip-padding` — lives on the segment itself,
 * keyed on the `data-band` the group tells it through context, so it holds
 * for a segment rendered through a trigger's `render` prop or wrapped in a
 * span. Never a descendant rule: a group is not meant to nest, but if one
 * ever does, a descendant rule from the outer band would re-ink the inner
 * group's segments.
 */
declare const buttonGroupVariants: (props?: ({
    variant?: "solid" | "soft" | "surface" | "outline" | "ghost" | null | undefined;
    orientation?: "horizontal" | "vertical" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
/** The group variants a ButtonGroup can paint. `link` has no group form. */
type ButtonGroupVariant = NonNullable<VariantProps<typeof buttonGroupVariants>['variant']>;
type ButtonGroupProps = Omit<React.ComponentProps<'div'>, 'color'> & VariantProps<typeof buttonGroupVariants> & {
    /**
     * Colour token, with Button's meaning: `primary` by default. Sets the
     * ink the frame, band and dividers are drawn in, and the default colour
     * of every segment.
     */
    color?: ButtonProps['color'];
    /**
     * Scale step, with Button's meaning. The default size of every segment.
     * `icon` is not offered: it is a 40px chrome square, and the group clips
     * to its own box, so the 44px touch expansion Button adds on a coarse
     * pointer would be cut off. A segment that asks for `icon` anyway renders
     * as `iconOnly` at the group's own step, so it lines up with the segments
     * beside it.
     */
    size?: Exclude<ButtonProps['size'], 'icon'>;
};
/**
 * Joins a row (or column) of Buttons into one control. Takes Button's variant
 * family — `outline` (the default), `solid`, `soft`, `surface`, `ghost` — and
 * its colour tokens and size steps, and hands them to its segments as
 * defaults. A segment may name its own emphasis: a `solid` Save inside an
 * outline group is the primary action of that row.
 *
 * Children are Buttons (or ButtonLinks), `ButtonGroupText` for an inline
 * label, and `ButtonGroupSeparator` for a semantic boundary, as DIRECT
 * children: the hairlines between segments are drawn on the segments' shared
 * edges, so a segment wrapped in another element (a span holding a tooltip
 * on a disabled segment, say) keeps its label and its band treatment but
 * loses the hairlines it shares with its neighbours — the one before it, and
 * the one after it too when the wrapped segment is the first child. It is a group of buttons, not a general
 * control frame — an input or select with an attached action is InputGroup's
 * job — and groups do not nest.
 *
 * A popup opened from a segment (a split button's menu) renders through a
 * portal, which React context follows. Every popup in this package resets the
 * group context at its portal, so the Buttons inside render normally; wrap
 * the contents of an overlay from another library in `ButtonGroupBoundary`
 * to get the same. Without that reset a Button inside the popup renders as a
 * segment of the group it was opened from, and on a solid band that means its
 * label takes the band's colour — white on the popup's own surface.
 */
declare function ButtonGroup({ className, variant, orientation, color, size, children, ...props }: ButtonGroupProps): React.JSX.Element;
/**
 * An inline label between segments — a unit, a count, a mode. Sits at the
 * body size (16px), never smaller: it shares a line with 16px button labels,
 * so anything below that reads as fine print. Semibold, the weight the
 * InputGroup addon uses for the same job. On a framed or ghost group it sits
 * on the sunken surface so it reads as chrome rather than as a button; on a
 * band it sits on the band, and a solid band gives it the band's label colour
 * at the label weight (see `buttonGroupVariants`).
 */
declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
/**
 * A semantic boundary between segments. Every segment is already divided by
 * a hairline, so the separator draws nothing of its own — it exists for
 * assistive technology, which hears it as a region boundary, and it follows
 * the group's orientation unless told otherwise.
 */
declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;

export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupVariant, buttonGroupVariants };