august-design-system

import { A as AnimationTokens, D as DurationTokens, E as EasingTokens } from './tokens.types-kLhwMiT-.js'; /** * AugustDesignSystem - Animation Tokens * * Animation timing and easing values following Apple's motion design * principles. iOS uses spring-based animations for natural, physics-based * motion that feels responsive and alive. * * Key principles from Apple's Human Interface Guidelines: * - Prefer quick, precise animations * - Use spring animations for natural feel * - Motion should reinforce spatial relationships * - Animations should be brief and purposeful */ /** * Animation duration values in milliseconds. * * iOS animation guidelines: * - Most animations should be 200-400ms * - Avoid animations longer than 500ms unless providing feedback * - Instant feedback should be < 100ms * * These durations are calibrated for iOS-feel: * - instant: Immediate state changes * - fastest/faster: Micro-interactions, button presses * - fast: Small UI transitions * - normal: Standard transitions * - slow: Complex transitions, page changes * - slower/slowest: Deliberate, attention-drawing animations */ declare const duration: DurationTokens; /** * Easing curves and spring configurations. * * Bezier curves are defined as [x1, y1, x2, y2] for cubic-bezier. * Spring configurations define damping, stiffness, and mass. * * iOS typically uses spring animations with these characteristics: * - High response (quick initial movement) * - Moderate damping (smooth deceleration) * - Mass appropriate to visual weight */ declare const easing: EasingTokens; /** * Complete animation token set. */ declare const animation: AnimationTokens; /** * Pre-configured animation settings for common use cases. * These combine duration and easing for specific scenarios. */ declare const animationPresets: { /** * Button press feedback. */ readonly buttonPress: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Button release feedback. */ readonly buttonRelease: { readonly duration: number; readonly easing: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; }; /** * Modal/Sheet appear. */ readonly modalEnter: { readonly duration: number; readonly easing: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; }; /** * Modal/Sheet dismiss. */ readonly modalExit: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Page/Screen transition. */ readonly pageTransition: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Fade in content. */ readonly fadeIn: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Fade out content. */ readonly fadeOut: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Slide in from bottom. */ readonly slideInUp: { readonly duration: number; readonly easing: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; }; /** * Slide out to bottom. */ readonly slideOutDown: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Scale up (appearing). */ readonly scaleIn: { readonly duration: number; readonly easing: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; }; /** * Scale down (disappearing). */ readonly scaleOut: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Expand/Collapse accordion. */ readonly expand: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Switch/Toggle animation. */ readonly toggle: { readonly duration: number; readonly easing: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; }; /** * Skeleton loading shimmer. */ readonly skeleton: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Toast notification appear. */ readonly toastEnter: { readonly duration: number; readonly easing: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; }; /** * Toast notification dismiss. */ readonly toastExit: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Haptic feedback timing. */ readonly haptic: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; }; /** * Reduced motion alternatives for accessibility. * When user has 'Reduce Motion' enabled, use these instead. * * iOS respects the system 'Reduce Motion' setting. * These provide instant or minimal animations as alternatives. */ declare const reducedMotionPresets: { /** * Replaces spring/bouncy animations with simple fade. */ readonly default: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Replaces sliding animations with fade. */ readonly slide: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Replaces scale animations with fade. */ readonly scale: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; /** * Instant change (no animation). */ readonly instant: { readonly duration: number; readonly easing: readonly [number, number, number, number]; }; }; /** * Creates a delay before animation starts. * @param baseDelay - Base delay in ms * @param index - Optional index for staggered animations * @param staggerAmount - Amount to stagger per index */ declare function withDelay(baseDelay: number, index?: number, staggerAmount?: number): number; /** * Creates staggered delay for list animations. * @param index - Item index in list * @param staggerAmount - Delay between items (default 50ms) * @param maxDelay - Maximum total delay to prevent long waits */ declare function stagger(index: number, staggerAmount?: number, maxDelay?: number): number; /** * Type for animation preset keys. */ type AnimationPreset = keyof typeof animationPresets; /** * Type for duration token keys. */ type DurationKey = keyof DurationTokens; /** * Type for easing curve keys. */ type EasingKey = keyof EasingTokens; export { type AnimationPreset as A, type DurationKey as D, type EasingKey as E, animation as a, animationPresets as b, duration as d, easing as e, reducedMotionPresets as r, stagger as s, withDelay as w };