import * as React from 'react';
import { type ButtonProps } from '../../atoms/button';
export type InputGroupProps = React.HTMLAttributes<HTMLDivElement>;
/**
 * A field with things attached to it — a prefix, a unit, a button.
 *
 * **The composable version of `Input`'s `startAddon`/`endAddon` props**, which stay as they are: they
 * cover the common case and are what `Field` and `chat-input` already use. Those props take a single
 * node in a fixed position; this takes parts, so a caller can put two addons on one side, a button
 * inside the boundary, or a textarea instead of an input — none of which the props express.
 *
 * The **container** draws the boundary and owns the focus ring, which is why the inner control is
 * borderless: two boundaries read as a field inside a field. `has-[input:focus-visible]:` is what
 * moves the ring to the container when the control inside it is focused.
 *
 * From Figma's `Input bar`, `Phone Input` and `Bottom input`.
 *
 * @example
 * <InputGroup>
 *   <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
 *   <InputGroupInput placeholder="example.com" />
 *   <InputGroupAddon><InputGroupButton>Check</InputGroupButton></InputGroupAddon>
 * </InputGroup>
 */
export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
export type InputGroupInputProps = React.InputHTMLAttributes<HTMLInputElement>;
/** The control. Borderless, because the container draws the boundary. */
export declare const InputGroupInput: React.ForwardRefExoticComponent<InputGroupInputProps & React.RefAttributes<HTMLInputElement>>;
export type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
export declare const InputGroupTextarea: React.ForwardRefExoticComponent<InputGroupTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
export type InputGroupAddonProps = React.HTMLAttributes<HTMLDivElement>;
/** A slot at either end. Never grows, and centres whatever it holds. */
export declare const InputGroupAddon: React.ForwardRefExoticComponent<InputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
export type InputGroupTextProps = React.HTMLAttributes<HTMLSpanElement>;
/**
 * Static text in an addon — a unit, a protocol, a country code.
 *
 * Not focusable and `aria-hidden` is deliberately NOT set: "https://" or "kg" is part of what the
 * field means, and hiding it would leave a screen reader user without the unit.
 */
export declare const InputGroupText: React.ForwardRefExoticComponent<InputGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
export type InputGroupButtonProps = ButtonProps;
/**
 * A button inside the group's boundary.
 *
 * Square corners, so it reads as part of the field rather than a pill dropped into it — Figma draws
 * `.button-main` as a pill, which is right for a standalone CTA and wrong here.
 *
 * The `size` prop is gone with Button's size axis (0.5.0): Figma draws one 40px height, so the
 * addon is that height and the field sizes around it.
 */
export declare const InputGroupButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
//# sourceMappingURL=input-group.d.ts.map