@stacksjs/stx/dist/transitions.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Perform an enter transition on an element.
 */
export declare function performEnter(el: Element, options?: TransitionOptions): Promise<void>;
/**
 * Perform a leave transition on an element.
 */
export declare function performLeave(el: Element, options?: TransitionOptions): Promise<void>;
/**
 * Process @transition directives in templates.
 *
 * Syntax:
 *   @transition(name: 'fade')
 *   @transition(name: 'slide', duration: 300)
 *   @transition(name: 'fade', mode: 'out-in')
 */
export declare function processTransitionDirectives(template: string, _context?: Record<string, unknown>, _filePath?: string): string;
/**
 * Generate CSS for common transition presets.
 */
export declare function generateTransitionCSS(): string;
/**
 * Generate the client-side transition runtime.
 */
export declare function generateTransitionRuntime(): string;
/**
 * Process @transition attribute on elements.
 *
 * Usage:
 *   <div @transition.fade="visible">Content</div>
 *   <div @transition.slide-up.300="isOpen">Content</div>
 */
export declare function processTransitionAttributes(template: string): string;
/**
 * STX Transitions
 *
 * Vue-inspired transition system for enter/leave animations.
 * Supports CSS transitions, CSS animations, and JavaScript hooks.
 *
 * @module transitions
 *
 * @example
 * ```html
 * @transition(name: 'fade')
 *   @if (visible)
 *     <div class="modal">Content</div>
 *   @endif
 * @endtransition
 * ```
 *
 * CSS classes applied:
 * - `.fade-enter-from` - Starting state for enter
 * - `.fade-enter-active` - Active state during enter
 * - `.fade-enter-to` - Ending state for enter
 * - `.fade-leave-from` - Starting state for leave
 * - `.fade-leave-active` - Active state during leave
 * - `.fade-leave-to` - Ending state for leave
 */
// =============================================================================
// Types
// =============================================================================
export declare interface TransitionOptions {
  name?: string
  duration?: number | { enter: number; leave: number }
  easing?: string
  mode?: 'in-out' | 'out-in' | 'default'
  css?: boolean
  enterClass?: string
  enterActiveClass?: string
  enterToClass?: string
  leaveClass?: string
  leaveActiveClass?: string
  leaveToClass?: string
  onBeforeEnter?: (el: Element) => void
  onEnter?: (el: Element, done: () => void) => void
  onAfterEnter?: (el: Element) => void
  onEnterCancelled?: (el: Element) => void
  onBeforeLeave?: (el: Element) => void
  onLeave?: (el: Element, done: () => void) => void
  onAfterLeave?: (el: Element) => void
  onLeaveCancelled?: (el: Element) => void
}
export declare interface TransitionState {
  isEntering: boolean
  isLeaving: boolean
  isCancelled: boolean
}