/**
 * Transitions System - Smooth animations for enter/leave
 *
 * Provides built-in transitions and custom transition support for elements.
 * Works with conditional rendering (*if, *for) to animate element appearance.
 *
 * @example Basic usage
 * ```html
 * <div *if="show" g-transition="fade">Content</div>
 * <div *if="show" g-transition.500="slide-down">Slower slide</div>
 * ```
 */
export interface TransitionConfig {
    /** CSS animation name for enter (e.g., 'gyos-fade-in 250ms') */
    enter?: string;
    /** CSS animation name for leave (e.g., 'gyos-fade-out 250ms') */
    leave?: string;
    /** CSS classes to apply at the start of enter transition */
    enterFrom?: string;
    /** CSS classes to apply at the end of enter transition */
    enterTo?: string;
    /** CSS classes to apply at the start of leave transition */
    leaveFrom?: string;
    /** CSS classes to apply at the end of leave transition */
    leaveTo?: string;
    /** Transition duration in milliseconds (default: 250) */
    duration?: number;
    /** Hook called before enter transition starts */
    onBeforeEnter?: (el: HTMLElement) => void;
    /** Hook called after enter transition completes */
    onAfterEnter?: (el: HTMLElement) => void;
    /** Hook called before leave transition starts */
    onBeforeLeave?: (el: HTMLElement) => void;
    /** Hook called after leave transition completes */
    onAfterLeave?: (el: HTMLElement) => void;
}
/**
 * Register a custom transition
 *
 * @param name - Transition name
 * @param config - Transition configuration
 *
 * @example
 * ```javascript
 * Gyos.registerTransition('bounce-in', {
 *   enter: 'bounce-in 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
 *   leave: 'bounce-out 250ms ease-in',
 *   duration: 500
 * });
 * ```
 */
export declare function registerTransition(name: string, config: TransitionConfig): void;
/**
 * Transition manager - Handles enter/leave animations
 */
declare class TransitionManager {
    private active;
    cancel(el: HTMLElement): void;
    enter(el: HTMLElement, config: TransitionConfig, interruptLeave?: boolean): Promise<boolean>;
    leave(el: HTMLElement, config: TransitionConfig, removeElement?: boolean): Promise<boolean>;
    private run;
    /**
     * Apply CSS classes
     */
    private applyClasses;
    /**
     * Remove CSS classes
     */
    private removeClasses;
    /**
     * Get transition config by name or return custom config
     *
     * @param name - Transition name or custom config object
     * @returns Transition configuration
     */
    getConfig(name: string | TransitionConfig): TransitionConfig;
    /**
     * Get all available transition names
     *
     * @returns Array of transition names
     */
    getAvailableTransitions(): string[];
}
export declare const transitionManager: TransitionManager;
/**
 * Get transition config from element attribute
 *
 * Supports:
 * - `g-transition="fade"` - Built-in transition
 * - `g-transition.500="fade"` - Custom duration (500ms)
 *
 * @param source - Registered transition name or element containing a transition attribute
 * @returns Transition configuration or null
 *
 * @example
 * ```html
 * <div g-transition="fade">Default 250ms fade</div>
 * <div g-transition.500="slide-down">500ms slide</div>
 * ```
 */
export declare function getTransitionConfig(source: HTMLElement | string): TransitionConfig | null;
/**
 * Apply built-in transition utility styles to document
 *
 * Called automatically on component mount. Adds CSS classes and keyframes
 * used by built-in transitions (opacity, transform, scale, etc.)
 *
 * @example
 * ```javascript
 * // Usually called automatically, but can be called manually:
 * Gyos.applyTransitionStyles();
 * ```
 */
export declare function applyTransitionStyles(): void;
export {};
//# sourceMappingURL=transition.d.ts.map