@arolariu/components/dist/components/ui/toggle-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 { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
import * as React from "react";
import { Toggle, type ToggleProps, type ToggleSize, type ToggleVariant } from "./toggle";
export interface ToggleGroupProps extends Omit<React.ComponentPropsWithRef<typeof BaseToggleGroup>, "className"> {
    /**
     * Additional CSS classes merged with the toggle-group root styles.
     * @default undefined
     */
    className?: string;
    /**
     * Shared visual variant inherited by descendant toggle items when not explicitly overridden.
     * @default undefined
     */
    variant?: ToggleVariant;
    /**
     * Shared size inherited by descendant toggle items when not explicitly overridden.
     * @default undefined
     */
    size?: ToggleSize;
}
/**
 * Props for an individual toggle-group item.
 *
 * @remarks
 * Inherits the shared toggle API except for pressed-state props, which are controlled
 * by the surrounding {@link ToggleGroup}.
 */
export interface ToggleGroupItemProps extends Omit<ToggleProps, "pressed" | "defaultPressed" | "onPressedChange"> {
}
/**
 * Groups related toggles into a single multi-select or single-select control.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on Base UI Toggle Group primitives
 * - Provides shared `size` and `variant` values to descendant items
 *
 * @example
 * ```tsx
 * <ToggleGroup
 *   defaultValue={["bold"]}
 *   toggleMultiple>
 *   <ToggleGroupItem value='bold'>Bold</ToggleGroupItem>
 *   <ToggleGroupItem value='italic'>Italic</ToggleGroupItem>
 * </ToggleGroup>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group Docs}
 */
declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders an individual toggle item within a toggle group.
 *
 * @remarks
 * - Renders a styled toggle button
 * - Built on the shared `Toggle` component and Base UI Toggle Group state
 * - Inherits `size` and `variant` from the nearest {@link ToggleGroup} when omitted
 *
 * @example
 * ```tsx
 * <ToggleGroup defaultValue={["left"]}>
 *   <ToggleGroupItem value='left'>Left</ToggleGroupItem>
 * </ToggleGroup>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group Docs}
 */
declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
declare namespace ToggleGroup {
    type Props = ToggleGroupProps;
    type State = BaseToggleGroup.State;
}
declare namespace ToggleGroupItem {
    type Props = ToggleGroupItemProps;
    type State = Toggle.State;
}
export { ToggleGroup, ToggleGroupItem };
//# sourceMappingURL=toggle-group.d.ts.map