import { TNode, Value } from '@tempots/dom';
import { ControlSize, ButtonVariant } from '../theme';
import { ThemeColorName } from '../../tokens';
import { RadiusName } from '../../tokens/radius';
/**
 * Configuration options for the {@link ToggleButton} component.
 */
export interface ToggleButtonOptions {
    /** Whether the button is currently pressed/active. */
    pressed: Value<boolean>;
    /** Callback invoked when the button is toggled. */
    onChange?: (pressed: boolean) => void;
    /** Whether the button is disabled. @default false */
    disabled?: Value<boolean>;
    /** Visual style variant. @default 'outline' */
    variant?: Value<ButtonVariant>;
    /** Size affecting padding, font size, and icon dimensions. @default 'md' */
    size?: Value<ControlSize>;
    /** Theme color for the pressed state. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Border radius preset. @default 'sm' */
    roundedness?: Value<RadiusName>;
    /** Whether the button takes the full width of its container. @default false */
    fullWidth?: Value<boolean>;
}
/**
 * A toggle button that can be pressed/unpressed, similar to a checkbox
 * but styled as a button with visual feedback for the pressed state.
 *
 * Uses `aria-pressed` for accessibility. When pressed, the button displays
 * a filled appearance using the specified color; when unpressed, it shows
 * the variant's default appearance.
 *
 * @param options - Configuration for the toggle button
 * @param children - Content to display inside the button
 * @returns A styled toggle button element
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { ToggleButton } from '@tempots/beatui'
 *
 * const bold = prop(false)
 * ToggleButton(
 *   { pressed: bold, onChange: v => bold.set(v), variant: 'outline' },
 *   'B'
 * )
 * ```
 *
 * @example
 * ```ts
 * // Icon toggle
 * const starred = prop(false)
 * ToggleButton(
 *   { pressed: starred, onChange: v => starred.set(v), color: 'yellow' },
 *   Icon({ icon: starred.map(s => s ? 'lucide:star' : 'lucide:star-off') })
 * )
 * ```
 */
export declare function ToggleButton({ pressed, onChange, disabled, variant, size, color, roundedness, fullWidth, }: ToggleButtonOptions, ...children: TNode[]): import("@tempots/dom").Renderable;