@arolariu/components/dist/components/ui/input-group.d.ts

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import * as React from "react";
import { Button } from "./button";
/** Supported alignment options for {@link InputGroupAddon}. */
export type InputGroupAddonAlign = "inline-start" | "inline-end" | "block-start" | "block-end";
/** Supported compact button sizes for {@link InputGroupButton}. */
export type InputGroupButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm";
/**
 * Props for the {@link InputGroup} component.
 */
export type InputGroupProps = React.ComponentPropsWithoutRef<"div">;
/**
 * Props for the {@link InputGroupAddon} component.
 */
export interface InputGroupAddonProps extends React.ComponentPropsWithoutRef<"div"> {
    /** Position of the addon relative to the input control. @default "inline-start" */
    align?: InputGroupAddonAlign;
}
/**
 * Props for the {@link InputGroupButton} component.
 */
export interface InputGroupButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Button>, "size"> {
    /** Compact button size used within the group chrome. @default "xs" */
    size?: InputGroupButtonSize;
}
/**
 * Props for the {@link InputGroupText} component.
 */
export type InputGroupTextProps = React.ComponentPropsWithoutRef<"span">;
/**
 * Props for the {@link InputGroupInput} component.
 */
export type InputGroupInputProps = React.ComponentPropsWithoutRef<"input">;
/**
 * Props for the {@link InputGroupTextarea} component.
 */
export type InputGroupTextareaProps = React.ComponentPropsWithoutRef<"textarea">;
/**
 * Creates a composable shell for grouped text inputs and controls.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputGroup>
 *   <InputGroupInput />
 * </InputGroup>
 * ```
 *
 * @see {@link InputGroupProps} for available props
 */
declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders supplementary content around an input group control.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputGroupAddon align='inline-end'>.com</InputGroupAddon>
 * ```
 *
 * @see {@link InputGroupAddonProps} for available props
 */
declare const InputGroupAddon: React.ForwardRefExoticComponent<InputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders a compact button matched to input group dimensions.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a wrapped `Button` component
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputGroupButton size='sm'>Search</InputGroupButton>
 * ```
 *
 * @see {@link InputGroupButtonProps} for available props
 */
declare const InputGroupButton: React.ForwardRefExoticComponent<InputGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Displays static inline text within an input group.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<span>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputGroupText>@</InputGroupText>
 * ```
 *
 * @see {@link InputGroupTextProps} for available props
 */
declare const InputGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
/**
 * Renders the primary input control inside an input group.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a wrapped `Input` component
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputGroupInput placeholder='Search...' />
 * ```
 *
 * @see {@link InputGroupInputProps} for available props
 */
declare const InputGroupInput: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
/**
 * Renders a textarea control inside an input group.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a wrapped `Textarea` component
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <InputGroupTextarea rows={4} />
 * ```
 *
 * @see {@link InputGroupTextareaProps} for available props
 */
declare const InputGroupTextarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
//# sourceMappingURL=input-group.d.ts.map