import type { EffectReference } from '../effects/types';
/**
 * Button background treatment types
 */
export type ButtonBackground = {
    type: 'solid';
    colorToken: string;
} | {
    type: 'gradient';
    stops: string[];
    direction: GradientDirection;
} | {
    type: 'transparent';
};
/**
 * Gradient direction
 */
export type GradientDirection = 'to-r' | 'to-l' | 'to-t' | 'to-b' | 'to-br' | 'to-bl' | 'to-tr' | 'to-tl';
/**
 * Border radius options (Tailwind classes)
 */
export type BorderRadius = 'rounded-none' | 'rounded-sm' | 'rounded' | 'rounded-md' | 'rounded-lg' | 'rounded-xl' | 'rounded-2xl' | 'rounded-3xl' | 'rounded-full';
/**
 * Shadow options (Tailwind classes)
 */
export type Shadow = 'shadow-none' | 'shadow-sm' | 'shadow' | 'shadow-md' | 'shadow-lg' | 'shadow-xl' | 'shadow-2xl';
/**
 * Border width options (Tailwind classes)
 */
export type BorderWidth = 'border' | 'border-2' | 'border-[3px]';
/**
 * Button border configuration
 */
export interface ButtonBorder {
    widthClass: BorderWidth;
    colorToken: string;
}
/**
 * Button preset - high-level button configuration
 *
 * A button preset defines the complete appearance of a button:
 * - Background treatment (solid/gradient using tokens)
 * - Text color, shape, shadow
 * - Composable effects for different states
 *
 * All colors use theme tokens so changing the palette updates all buttons.
 */
export interface ButtonPreset {
    /** Unique identifier */
    id: string;
    /** Display name */
    name: string;
    /** Background treatment (uses theme tokens) */
    background: ButtonBackground;
    /** Text color token (e.g., 'white', 'text-900', 'primary-100') */
    textColorToken: string;
    /** Border radius (Tailwind class) */
    borderRadius: BorderRadius;
    /** Shadow (Tailwind class) */
    shadow: Shadow;
    /** Optional border */
    border?: ButtonBorder;
    /** Optional padding override (CSS shorthand, defaults to "0.5rem 1rem") */
    padding?: string;
    /** Optional font size override (Tailwind text size class like "text-sm", "text-base", "text-lg") */
    fontSize?: string;
    /**
     * Composable effects for different states
     *
     * - base: Always applied (for persistent effects like cosmic glow)
     * - hover: Applied on :hover
     * - active: Applied on :active
     * - focus: Applied on :focus
     */
    effects: {
        base?: EffectReference[];
        hover?: EffectReference[];
        active?: EffectReference[];
        focus?: EffectReference[];
    };
    /**
     * Fields that users cannot change
     *
     * These are locked by the preset author to maintain design integrity.
     * Examples: ['background', 'borderRadius', 'effects.base[0].preset']
     */
    lockedFields?: string[];
}
