import { Renderable, TNode, Value } from '@tempots/dom';
import { ControlSize, ButtonVariant } from '../theme';
import { ThemeColorName } from '../../tokens';
import { RadiusName } from '../../tokens/radius';
/** Configuration options for the {@link CopyButton} component. */
export interface CopyButtonOptions {
    /** The text to copy to clipboard when clicked. @default 'Hello World!'' */
    text: Value<string>;
    /** Size of the button. @default 'sm' */
    size?: Value<ControlSize>;
    /** Theme color. @default 'base' */
    color?: Value<ThemeColorName>;
    /** Visual variant. @default 'subtle' */
    variant?: Value<ButtonVariant>;
    /** Border radius. @default 'sm' */
    roundedness?: Value<RadiusName>;
    /** Whether the button is disabled. @default false */
    disabled?: Value<boolean>;
    /** Duration in ms to show the "copied" state before resetting. @default 2000 */
    timeout?: Value<number>;
}
/**
 * A button that copies text to the clipboard with visual feedback.
 *
 * Shows a copy icon in its idle state. When clicked, copies the provided text
 * to the clipboard and briefly shows a checkmark icon before resetting.
 *
 * @param options - Configuration for the copy button
 * @param children - Optional additional children appended to the button
 * @returns A copy button element
 *
 * @example
 * ```ts
 * CopyButton({ text: 'Hello, world!' })
 * ```
 *
 * @example
 * ```ts
 * CopyButton({ text: apiKey, variant: 'outline', color: 'primary' }, 'Copy Key')
 * ```
 */
export declare function CopyButton({ text, size, color, variant, roundedness, disabled, timeout, }: CopyButtonOptions, ...children: TNode[]): Renderable;