@arolariu/components/dist/components/ui/button-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 { Separator } from "./separator";
/** Supported layout directions for {@link ButtonGroup}. */
export type ButtonGroupOrientation = "horizontal" | "vertical";
interface ButtonGroupVariantOptions {
    /** Orientation used to resolve the root style classes. @default "horizontal" */
    orientation?: ButtonGroupOrientation;
    /** Additional classes merged into the generated variant string. @default undefined */
    className?: string;
}
/**
 * Props for the {@link ButtonGroup} component.
 */
export interface ButtonGroupProps extends React.ComponentPropsWithoutRef<"div"> {
    /** Arrangement of grouped controls. @default "horizontal" */
    orientation?: ButtonGroupOrientation;
}
/**
 * Props for the {@link ButtonGroupText} component.
 */
export interface ButtonGroupTextProps extends React.ComponentPropsWithoutRef<"div"> {
    /** Enables rendering an existing div-compatible child element. @default false */
    asChild?: boolean;
}
/**
 * Props for the {@link ButtonGroupSeparator} component.
 */
export type ButtonGroupSeparatorProps = React.ComponentPropsWithoutRef<typeof Separator>;
/**
 * Returns the CSS class list for a button group root.
 *
 * @param options - Variant options used to derive the generated class string.
 * @returns The merged class name string for the requested orientation.
 *
 * @example
 * ```tsx
 * const className = buttonGroupVariants({orientation: "vertical"});
 * ```
 */
declare function buttonGroupVariants({ orientation, className }?: Readonly<ButtonGroupVariantOptions>): string;
/**
 * Aligns related buttons into a single visual control group.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <ButtonGroup>
 *   <button type='button'>Left</button>
 *   <button type='button'>Right</button>
 * </ButtonGroup>
 * ```
 *
 * @see {@link ButtonGroupProps} for available props
 */
declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Adds descriptive text content within a button group layout.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element by default
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <ButtonGroupText>Actions</ButtonGroupText>
 * ```
 *
 * @see {@link ButtonGroupTextProps} for available props
 */
declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Inserts a separator between grouped controls.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a wrapped `Separator` component
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <ButtonGroupSeparator orientation='vertical' />
 * ```
 *
 * @see {@link ButtonGroupSeparatorProps} for available props
 */
declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("./separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
//# sourceMappingURL=button-group.d.ts.map