import React from "react";
import { RippleEffectType } from "./Button.ripple";
import { SemanticColor } from "../../../utils/colorUtils";
/**
 * Button component props
 * @property {ButtonColor} color - The semantic color/intent of the button
 * @property {ButtonVariant} variant - The visual style variant of the button
 * @property {ButtonSize} size - The size of the button
 * @property {ButtonState} state - The state of the button (normal, disabled, error)
 * @property {boolean} iconOnly - Whether the button should display as icon-only (square padding)
 * @property {boolean} block - Whether the button should be full width
 * @property {boolean} enableRipple - Whether to enable ripple effect on click
 * @property {RippleEffectType} rippleEffect - Type of ripple effect (default, aurora, particle, glass, neon, echo)
 * @property {string} rippleClassName - Custom class name for ripple styling
 * @property {number} rippleScale - Scale multiplier for ripple expansion (default: 10)
 */
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /** The semantic color/intent of the button */
    color?: ButtonColor;
    /** The visual style variant of the button */
    variant?: ButtonVariant;
    /** The size of the button */
    size?: ButtonSize;
    /** The state of the button (normal, disabled, error) */
    state?: ButtonState;
    /** Whether the button should display as icon-only (square padding) */
    iconOnly?: boolean;
    /** Whether the button should be full width */
    block?: boolean;
    /** Button contents */
    children?: React.ReactNode;
    /** Additional class names */
    className?: string;
    /** Whether to enable ripple effect on click */
    enableRipple?: boolean;
    /** Type of ripple effect: 'default' | 'aurora' | 'particle' | 'glass' | 'neon' | 'echo' */
    rippleEffect?: RippleEffectType;
    /** Custom class name for ripple styling */
    rippleClassName?: string;
    /** Scale multiplier for ripple expansion (default: 10) */
    rippleScale?: number;
    /** Whether to show the glass reflection effect (default: true) */
    showReflection?: boolean;
    /**
     * Force dark mode styling for the component. Use when placing the component
     * on a dark background while the page is in light mode. This applies the
     * 'dark' class to the container, making text, borders, and other elements
     * use light colors for visibility.
     * @default false
     */
    darkMode?: boolean;
}
export type ButtonColor = SemanticColor;
export type ButtonVariant = "filled" | "outline" | "soft" | "link";
export type ButtonSize = "sm" | "md" | "lg";
export type ButtonState = "default" | "disabled" | "error" | "loading";
