import { default as React, ReactNode } from 'react';
import { StyleProps } from '../../style-engine';
import { ButtonGroupProps } from './ButtonGroup';
declare const toggleGroupItemStyles: import('../../style-engine').StylesDef<{
    readonly color: {
        readonly primary: "bg-primary text-white";
        readonly secondary: "bg-secondary text-white";
        readonly accent: "bg-accent text-white";
        readonly muted: "bg-muted text-foreground";
        readonly success: "bg-success text-white";
        readonly warning: "bg-warning text-white";
        readonly danger: "bg-danger text-white";
        readonly info: "bg-info text-white";
        readonly gradient: "bg-gradient-ui text-white";
    };
    readonly shadow: {
        readonly sm: "shadow-sm";
        readonly md: "shadow";
        readonly lg: "shadow-lg";
        readonly xl: "shadow-xl";
        readonly '2xl': "shadow-2xl";
    };
    readonly size: {
        readonly sm: "px-3 py-1 text-sm";
        readonly md: "px-4 py-2 text-base";
        readonly lg: "px-8 py-3 text-lg";
    };
    readonly rounding: {
        readonly none: "rounded-none";
        readonly sm: "rounded-sm";
        readonly md: "rounded-md";
        readonly lg: "rounded-lg";
        readonly xl: "rounded-xl";
        readonly full: "rounded-full";
    };
} & {
    fill: {
        solid: string;
        outline: string;
        ghost: string;
    };
    rounding: {
        readonly none: "rounded-none";
        readonly sm: "rounded-sm";
        readonly md: "rounded-md";
        readonly lg: "rounded-lg";
        readonly xl: "rounded-xl";
        readonly full: "rounded-full";
    };
} & {
    state: {
        on: string;
        off: string;
    };
}>;
type ToggleGroupItemVariantProps = StyleProps<typeof toggleGroupItemStyles>;
type ToggleGroupAppearance = Pick<ToggleGroupItemVariantProps, 'size' | 'color' | 'fill'>;
type SingleToggleGroupProps = {
    type: 'single';
    value?: string;
    defaultValue?: string;
    onValueChange?: (value: string | undefined) => void;
};
type MultipleToggleGroupProps = {
    type: 'multiple';
    value?: string[];
    defaultValue?: string[];
    onValueChange?: (value: string[]) => void;
};
export type ToggleGroupProps = (SingleToggleGroupProps | MultipleToggleGroupProps) & Omit<ButtonGroupProps<'div'>, 'onChange'> & ToggleGroupAppearance & {
    disabled?: boolean;
};
export declare function ToggleGroup(props: ToggleGroupProps): React.JSX.Element;
export type ToggleGroupItemProps<E extends React.ElementType> = Omit<Omit<React.ComponentProps<E>, 'as' | keyof ToggleGroupItemVariantProps> & Omit<ToggleGroupItemVariantProps, 'state'> & {
    as?: E;
}, 'value' | 'onClick'> & {
    value: string;
    icon?: ReactNode;
};
export declare function ToggleGroupItem<E extends React.ElementType = 'button'>({ value, children, className, disabled, color, fill, size, as, icon, ...props }: ToggleGroupItemProps<E>): React.JSX.Element;
export {};