/**
 * @file ToggleButton.tsx
 * @input Uses Button, React, StyleX, theme tokens
 * @output Exports ToggleButton component and types
 * @position Thin wrapper over Button; adds controlled toggle pattern
 *
 * ToggleButton wraps Button with `isPressed` and adds:
 * - `onPressedChange` controlled toggle callback
 * - `pressedIcon` for outline-to-filled icon swap
 * - Font weight shift on press with width reservation to prevent layout shift
 * - Group integration via ToggleButtonGroupContext
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/ToggleButton/index.ts (exports if types change)
 * - /apps/storybook/stories/ToggleButton.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/ToggleButton/ (showcase blocks)
 */
import React, { type ReactNode } from 'react';
import { type ButtonSize } from '../Button';
import type { BaseProps } from '../BaseProps';
export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
    ref?: React.Ref<HTMLButtonElement>;
    /**
     * Accessible label for the button (required).
     * Used as visible text, or as aria-label for icon-only buttons.
     */
    label: string;
    /**
     * Whether the button is currently pressed/active.
     * When used inside ToggleButtonGroup, this is controlled by the group
     * and this prop is ignored.
     */
    isPressed?: boolean;
    /**
     * Called when the pressed state should change. Receives the next pressed
     * state and the originating click event. Call `event.preventDefault()` to
     * opt out of running `pressedChangeAction` (e.g. to handle the toggle
     * entirely in this callback).
     * When used inside ToggleButtonGroup, this is handled by the group
     * and this prop is ignored.
     */
    onPressedChange?: (isPressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
    /**
     * Action handler for API- or navigation-backed toggles, run inside a
     * transition by Button. The button shows a loading spinner while the action
     * is pending — whether it returns a promise or synchronously triggers a
     * suspending update (e.g. a router navigation that suspends on data).
     *
     * @example
     * ```
     * <ToggleButton
     *   label="Favorite"
     *   isPressed={isFavorited}
     *   onPressedChange={setIsFavorited}
     *   pressedChangeAction={async (newState) => {
     *     await api.setFavorite(itemId, newState);
     *   }}
     * />
     * ```
     */
    pressedChangeAction?: (isPressed: boolean) => void | Promise<void>;
    /**
     * The size of the toggle button.
     * When used inside ToggleButtonGroup, defaults to the group's size.
     * @default 'md'
     */
    size?: ButtonSize;
    /**
     * Whether the button is disabled.
     * When used inside ToggleButtonGroup, the group's isDisabled overrides this.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Whether the button is in a loading state.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Icon element rendered before the label text.
     */
    icon?: ReactNode;
    /**
     * When true, renders as a square icon-only button with `label` as aria-label
     * and an automatic tooltip from the label.
     * @default false
     */
    isIconOnly?: boolean;
    /**
     * Icon element to render when the button is pressed.
     * Use to swap between outline (unpressed) and filled (pressed) icon styles.
     * Falls back to `icon` if not provided.
     *
     * To color the pressed icon, pass an already-colored element:
     * @example
     * ```
     * pressedIcon={<StarIconSolid style={{color: 'var(--color-icon-yellow)'}} />}
     * ```
     */
    pressedIcon?: ReactNode;
    /**
     * Optional visible content. When provided, rendered instead of `label`
     * as the visible text.
     */
    children?: ReactNode;
    /**
     * Tooltip text shown on hover.
     * Passed through to Button.
     */
    tooltip?: string;
    /**
     * Value identifier when used inside ToggleButtonGroup.
     * Required when used in a group.
     */
    value?: string;
}
/**
 * A button that toggles between pressed and unpressed states.
 * Thin wrapper over Button — adds controlled toggle pattern,
 * icon swap, and font weight emphasis.
 *
 * Use for toolbar actions, view mode switches, and formatting controls.
 * For on/off settings, use Switch instead.
 *
 * Works standalone (with `isPressed`/`onPressedChange`) or inside
 * ToggleButtonGroup (which controls selection via `value`).
 *
 * @example
 * ```
 * const [isBold, setIsBold] = useState(false);
 * <ToggleButton
 *   label="Bold"
 *   icon={<BoldIcon />}
 *   isPressed={isBold}
 *   onPressedChange={setIsBold}
 * />
 * ```
 */
export declare function ToggleButton({ ref, label, isPressed: isPressedProp, onPressedChange: onPressedChangeProp, pressedChangeAction, size: sizeProp, isDisabled: isDisabledProp, isLoading, icon, isIconOnly, pressedIcon, children, tooltip, value, xstyle, className: _className, style, ...props }: ToggleButtonProps): ReactNode;
export declare namespace ToggleButton {
    var displayName: string;
}
//# sourceMappingURL=ToggleButton.d.ts.map