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

A performant UI Framework. Powered by Bun.

import type { CustomDirective, StxOptions } from './types';
/**
 * Process animation directives in the template
 */
export declare function processAnimationDirectives(template: string, context: Record<string, any>, filePath: string, options: StxOptions): string;
/**
 * Create an animation timeline for coordinated animations
 */
export declare function createAnimationTimeline(entries: TimelineEntry[]): string;
/**
 * Generate CSS for a custom animation
 */
export declare function generateAnimationCSS(name: string, keyframes: Keyframe[], options: KeyframeAnimationOptions): string;
/**
 * Parse animation shorthand string
 * Format: "duration [delay] [easing] [iterations] [direction] [fill]"
 */
export declare function parseAnimationShorthand(shorthand: string): KeyframeAnimationOptions;
/**
 * Generate client-side animation runtime
 */
export declare function generateAnimationRuntime(): string;
/**
 * Register animation directives
 */
export declare function registerAnimationDirectives(options: StxOptions): StxOptions;
/**
 * Default transition options
 */
export declare const DEFAULT_TRANSITION_OPTIONS: {
  duration: number
  delay: number
  ease: string
  direction: string
};
/**
 * Transition directive for applying transitions to elements
 */
export declare const transitionDirective: CustomDirective;
/**
 * Scroll animation directive for triggering animations on scroll
 */
export declare const scrollAnimateDirective: CustomDirective;
/**
 * Animation group directive for coordinating multiple animations
 */
export declare const animationGroupDirective: CustomDirective;
/**
 * Motion preferences directive for controlling animation preferences
 */
export declare const motionDirective: CustomDirective;
/** Preset spring configurations */
export declare const SPRING_PRESETS: {
  default: {
  stiffness: 100;
  damping: 10;
  mass: 1
};
  gentle: {
  stiffness: 120;
  damping: 14;
  mass: 1
};
  wobbly: {
  stiffness: 180;
  damping: 12;
  mass: 1
};
  stiff: {
  stiffness: 210;
  damping: 20;
  mass: 1
};
  slow: {
  stiffness: 280;
  damping: 60;
  mass: 1
};
  molasses: {
  stiffness: 280;
  damping: 120;
  mass: 1
}
};
/**
 * @keyframe directive for custom keyframe animations
 */
export declare const keyframeDirective: CustomDirective;
/**
 * @stagger directive for staggered child animations
 */
export declare const staggerDirective: CustomDirective;
/**
 * @spring directive for spring physics animations
 */
export declare const springDirective: CustomDirective;
/** Keyframe definition */
export declare interface Keyframe {
  offset?: number
  properties: Record<string, string | number>
  easing?: string
}
/** Animation timeline entry */
export declare interface TimelineEntry {
  selector: string
  keyframes: Keyframe[]
  options: KeyframeAnimationOptions
}
/** Keyframe animation options */
export declare interface KeyframeAnimationOptions {
  duration: number
  delay?: number
  easing?: string
  iterations?: number | 'infinite'
  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'
  fill?: 'none' | 'forwards' | 'backwards' | 'both'
}
/** Spring animation config */
export declare interface SpringConfig {
  stiffness: number
  damping: number
  mass: number
  velocity?: number
}
/**
 * Available transition types that can be used with @transition directive
 */
export declare enum TransitionType {
  Fade = 'fade',
  Slide = 'slide',
  Scale = 'scale',
  Flip = 'flip',
  Rotate = 'rotate',
  Custom = 'custom',
}
/**
 * Available transition directions that can be used with @transition directive
 */
export declare enum TransitionDirection {
  In = 'in',
  Out = 'out',
  Both = 'both',
}
/**
 * Available ease functions for transitions
 */
export declare enum TransitionEase {
  Linear = 'linear',
  Ease = 'ease',
  EaseIn = 'ease-in',
  EaseOut = 'ease-out',
  EaseInOut = 'ease-in-out',
  Spring = 'spring',
}