@stacksjs/components 0.2.92 → 0.2.94

package/src/utils/animation/easing.ts

@@ -1,368 +0,0 @@
-/**
- * Easing functions for smooth animations
- *
- * All easing functions follow the signature:
- * @param t - Current time (0 to duration)
- * @param b - Start value
- * @param c - Change in value (end - start)
- * @param d - Duration
- * @returns Current value at time t
- *
- * @example
- * ```ts
- * import { Easing } from '@stacksjs/components'
- *
- * const value = Easing.easeInOutCubic(currentTime, startValue, changeInValue, duration)
- * ```
- */
-
-/**
- * Easing function type signature
- */
-export type EasingFunction = (_t: number, _b: number, _c: number, _d: number) => number
-
-/**
- * Linear easing - no acceleration
- */
-export const linear: EasingFunction = (t, b, c, d) => {
-  return (c * t) / d + b
-}
-
-/**
- * Quadratic ease-in - accelerating from zero velocity
- */
-export const easeInQuad: EasingFunction = (t, b, c, d) => {
-  t /= d
-  return c * t * t + b
-}
-
-/**
- * Quadratic ease-out - decelerating to zero velocity
- */
-export const easeOutQuad: EasingFunction = (t, b, c, d) => {
-  t /= d
-  return -c * t * (t - 2) + b
-}
-
-/**
- * Quadratic ease-in-out - acceleration until halfway, then deceleration
- */
-export const easeInOutQuad: EasingFunction = (t, b, c, d) => {
-  t /= d / 2
-  if (t < 1)
-    return (c / 2) * t * t + b
-  t--
-  return (-c / 2) * (t * (t - 2) - 1) + b
-}
-
-// Cubic
-export const easeInCubic: EasingFunction = (t, b, c, d) => {
-  t /= d
-  return c * t * t * t + b
-}
-
-export const easeOutCubic: EasingFunction = (t, b, c, d) => {
-  t /= d
-  t--
-  return c * (t * t * t + 1) + b
-}
-
-export const easeInOutCubic: EasingFunction = (t, b, c, d) => {
-  t /= d / 2
-  if (t < 1)
-    return (c / 2) * t * t * t + b
-  t -= 2
-  return (c / 2) * (t * t * t + 2) + b
-}
-
-// Quartic
-export const easeInQuart: EasingFunction = (t, b, c, d) => {
-  t /= d
-  return c * t * t * t * t + b
-}
-
-export const easeOutQuart: EasingFunction = (t, b, c, d) => {
-  t /= d
-  t--
-  return -c * (t * t * t * t - 1) + b
-}
-
-export const easeInOutQuart: EasingFunction = (t, b, c, d) => {
-  t /= d / 2
-  if (t < 1)
-    return (c / 2) * t * t * t * t + b
-  t -= 2
-  return (-c / 2) * (t * t * t * t - 2) + b
-}
-
-// Quintic
-export const easeInQuint: EasingFunction = (t, b, c, d) => {
-  t /= d
-  return c * t * t * t * t * t + b
-}
-
-export const easeOutQuint: EasingFunction = (t, b, c, d) => {
-  t /= d
-  t--
-  return c * (t * t * t * t * t + 1) + b
-}
-
-export const easeInOutQuint: EasingFunction = (t, b, c, d) => {
-  t /= d / 2
-  if (t < 1)
-    return (c / 2) * t * t * t * t * t + b
-  t -= 2
-  return (c / 2) * (t * t * t * t * t + 2) + b
-}
-
-// Sinusoidal
-export const easeInSine: EasingFunction = (t, b, c, d) => {
-  return -c * Math.cos((t / d) * (Math.PI / 2)) + c + b
-}
-
-export const easeOutSine: EasingFunction = (t, b, c, d) => {
-  return c * Math.sin((t / d) * (Math.PI / 2)) + b
-}
-
-export const easeInOutSine: EasingFunction = (t, b, c, d) => {
-  return (-c / 2) * (Math.cos((Math.PI * t) / d) - 1) + b
-}
-
-// Exponential
-export const easeInExpo: EasingFunction = (t, b, c, d) => {
-  return t === 0 ? b : c * 2 ** (10 * (t / d - 1)) + b
-}
-
-export const easeOutExpo: EasingFunction = (t, b, c, d) => {
-  return t === d ? b + c : c * (-(2 ** ((-10 * t) / d)) + 1) + b
-}
-
-export const easeInOutExpo: EasingFunction = (t, b, c, d) => {
-  if (t === 0)
-    return b
-  if (t === d)
-    return b + c
-  t /= d / 2
-  if (t < 1)
-    return (c / 2) * 2 ** (10 * (t - 1)) + b
-  t--
-  return (c / 2) * (-(2 ** (-10 * t)) + 2) + b
-}
-
-// Circular
-export const easeInCirc: EasingFunction = (t, b, c, d) => {
-  t /= d
-  return -c * (Math.sqrt(1 - t * t) - 1) + b
-}
-
-export const easeOutCirc: EasingFunction = (t, b, c, d) => {
-  t /= d
-  t--
-  return c * Math.sqrt(1 - t * t) + b
-}
-
-export const easeInOutCirc: EasingFunction = (t, b, c, d) => {
-  t /= d / 2
-  if (t < 1)
-    return (-c / 2) * (Math.sqrt(1 - t * t) - 1) + b
-  t -= 2
-  return (c / 2) * (Math.sqrt(1 - t * t) + 1) + b
-}
-
-// Elastic
-export const easeInElastic: EasingFunction = (t, b, c, d) => {
-  let s = 1.70158
-  let p = 0
-  let a = c
-  if (t === 0)
-    return b
-  t /= d
-  if (t === 1)
-    return b + c
-  if (!p)
-    p = d * 0.3
-  if (a < Math.abs(c)) {
-    a = c
-    s = p / 4
-  }
-  else {
-    s = (p / (2 * Math.PI)) * Math.asin(c / a)
-  }
-  t -= 1
-  return -(a * 2 ** (10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p)) + b
-}
-
-export const easeOutElastic: EasingFunction = (t, b, c, d) => {
-  let s = 1.70158
-  let p = 0
-  let a = c
-  if (t === 0)
-    return b
-  t /= d
-  if (t === 1)
-    return b + c
-  if (!p)
-    p = d * 0.3
-  if (a < Math.abs(c)) {
-    a = c
-    s = p / 4
-  }
-  else {
-    s = (p / (2 * Math.PI)) * Math.asin(c / a)
-  }
-  return a * 2 ** (-10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p) + c + b
-}
-
-export const easeInOutElastic: EasingFunction = (t, b, c, d) => {
-  let s = 1.70158
-  let p = 0
-  let a = c
-  if (t === 0)
-    return b
-  t /= d / 2
-  if (t === 2)
-    return b + c
-  if (!p)
-    p = d * (0.3 * 1.5)
-  if (a < Math.abs(c)) {
-    a = c
-    s = p / 4
-  }
-  else {
-    s = (p / (2 * Math.PI)) * Math.asin(c / a)
-  }
-  if (t < 1) {
-    t -= 1
-    return -0.5 * (a * 2 ** (10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p)) + b
-  }
-  t -= 1
-  return a * 2 ** (-10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p) * 0.5 + c + b
-}
-
-// Back
-export const easeInBack: EasingFunction = (t, b, c, d) => {
-  const s = 1.70158
-  t /= d
-  return c * t * t * ((s + 1) * t - s) + b
-}
-
-export const easeOutBack: EasingFunction = (t, b, c, d) => {
-  const s = 1.70158
-  t /= d
-  t--
-  return c * (t * t * ((s + 1) * t + s) + 1) + b
-}
-
-export const easeInOutBack: EasingFunction = (t, b, c, d) => {
-  let s = 1.70158
-  t /= d / 2
-  if (t < 1) {
-    s *= 1.525
-    return (c / 2) * (t * t * ((s + 1) * t - s)) + b
-  }
-  t -= 2
-  s *= 1.525
-  return (c / 2) * (t * t * ((s + 1) * t + s) + 2) + b
-}
-
-// Bounce
-export const easeOutBounce: EasingFunction = (t, b, c, d) => {
-  t /= d
-  if (t < 1 / 2.75) {
-    return c * (7.5625 * t * t) + b
-  }
-  else if (t < 2 / 2.75) {
-    t -= 1.5 / 2.75
-    return c * (7.5625 * t * t + 0.75) + b
-  }
-  else if (t < 2.5 / 2.75) {
-    t -= 2.25 / 2.75
-    return c * (7.5625 * t * t + 0.9375) + b
-  }
-  else {
-    t -= 2.625 / 2.75
-    return c * (7.5625 * t * t + 0.984375) + b
-  }
-}
-
-export const easeInBounce: EasingFunction = (t, b, c, d) => {
-  return c - easeOutBounce(d - t, 0, c, d) + b
-}
-
-export const easeInOutBounce: EasingFunction = (t, b, c, d) => {
-  if (t < d / 2)
-    return easeInBounce(t * 2, 0, c, d) * 0.5 + b
-  return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
-}
-
-/**
- * Object containing all easing functions
- *
- * Available easings: Linear, Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back, Bounce
- * Each with In, Out, InOut variants (except Linear)
- */
-export const Easing: {
-  linear: EasingFunction
-  easeInQuad: EasingFunction
-  easeOutQuad: EasingFunction
-  easeInOutQuad: EasingFunction
-  easeInCubic: EasingFunction
-  easeOutCubic: EasingFunction
-  easeInOutCubic: EasingFunction
-  easeInQuart: EasingFunction
-  easeOutQuart: EasingFunction
-  easeInOutQuart: EasingFunction
-  easeInQuint: EasingFunction
-  easeOutQuint: EasingFunction
-  easeInOutQuint: EasingFunction
-  easeInSine: EasingFunction
-  easeOutSine: EasingFunction
-  easeInOutSine: EasingFunction
-  easeInExpo: EasingFunction
-  easeOutExpo: EasingFunction
-  easeInOutExpo: EasingFunction
-  easeInCirc: EasingFunction
-  easeOutCirc: EasingFunction
-  easeInOutCirc: EasingFunction
-  easeInElastic: EasingFunction
-  easeOutElastic: EasingFunction
-  easeInOutElastic: EasingFunction
-  easeInBack: EasingFunction
-  easeOutBack: EasingFunction
-  easeInOutBack: EasingFunction
-  easeInBounce: EasingFunction
-  easeOutBounce: EasingFunction
-  easeInOutBounce: EasingFunction
-} = {
-  linear,
-  easeInQuad,
-  easeOutQuad,
-  easeInOutQuad,
-  easeInCubic,
-  easeOutCubic,
-  easeInOutCubic,
-  easeInQuart,
-  easeOutQuart,
-  easeInOutQuart,
-  easeInQuint,
-  easeOutQuint,
-  easeInOutQuint,
-  easeInSine,
-  easeOutSine,
-  easeInOutSine,
-  easeInExpo,
-  easeOutExpo,
-  easeInOutExpo,
-  easeInCirc,
-  easeOutCirc,
-  easeInOutCirc,
-  easeInElastic,
-  easeOutElastic,
-  easeInOutElastic,
-  easeInBack,
-  easeOutBack,
-  easeInOutBack,
-  easeInBounce,
-  easeOutBounce,
-  easeInOutBounce,
-}

package/src/utils/animation/helpers.ts

@@ -1,223 +0,0 @@
-/**
- * CSS Animation helper utilities
- *
- * @example
- * ```ts
- * import { applyAnimation, staggerAnimation } from '@stacksjs/components'
- *
- * // Apply animation
- * applyAnimation(element, 'fade-in', { duration: '300ms' })
- *
- * // Stagger multiple elements
- * staggerAnimation(elements, 'slide-in', { stagger: 100 })
- * ```
- */
-
-/**
- * CSS animation configuration options
- */
-export interface CSSAnimationOptions {
-  /** Animation duration (e.g., '300ms', '1s') */
-  duration?: string
-  /** Timing function, e.g. 'ease', 'linear', 'cubic-bezier(...)' */
-  timing?: string
-  /** Delay before animation (e.g., '100ms') */
-  delay?: string
-  /** Number of iterations (e.g., '1', 'infinite') */
-  iteration?: string
-  /** Animation direction */
-  direction?: string
-  /** Fill mode */
-  fill?: string
-  /** Play state */
-  playState?: string
-}
-
-/**
- * Generate CSS animation string
- *
- * @param name - Animation name
- * @param options - Animation options
- * @returns CSS animation string
- */
-export function cssAnimation(name: string, options: CSSAnimationOptions = {}): string {
-  const {
-    duration = '1s',
-    timing = 'ease',
-    delay = '0s',
-    iteration = '1',
-    direction = 'normal',
-    fill = 'both',
-    playState = 'running',
-  } = options
-
-  return `${name} ${duration} ${timing} ${delay} ${iteration} ${direction} ${fill} ${playState}`
-}
-
-/**
- * Apply CSS animation to an element
- *
- * @param element - Target element
- * @param animationName - Name of CSS animation
- * @param options - Animation options
- */
-export function applyAnimation(
-  element: HTMLElement,
-  animationName: string,
-  options: CSSAnimationOptions = {},
-): void {
-  element.style.animation = cssAnimation(animationName, options)
-}
-
-/**
- * Remove animation from an element
- *
- * @param element - Target element
- */
-export function removeAnimation(element: HTMLElement): void {
-  element.style.animation = ''
-}
-
-/**
- * Wait for animation to complete
- *
- * @param element - Target element
- * @returns Promise that resolves when animation ends
- */
-export function waitForAnimation(element: HTMLElement): Promise<void> {
-  return new Promise((resolve) => {
-    const handleAnimationEnd = () => {
-      element.removeEventListener('animationend', handleAnimationEnd)
-      resolve()
-    }
-
-    element.addEventListener('animationend', handleAnimationEnd)
-  })
-}
-
-/**
- * Stagger animations across multiple elements
- *
- * @param elements - Array of elements to animate
- * @param animationName - Name of CSS animation
- * @param options - Animation options with stagger delay in ms
- */
-export function staggerAnimation(
-  elements: HTMLElement[],
-  animationName: string,
-  options: CSSAnimationOptions & { stagger?: number } = {},
-): void {
-  const { stagger = 100, ...animationOptions } = options
-
-  elements.forEach((element, index) => {
-    const delay = `${index * stagger}ms`
-    applyAnimation(element, animationName, {
-      ...animationOptions,
-      delay,
-    })
-  })
-}
-
-/**
- * Run animations in sequence
- *
- * @param element - Target element
- * @param animations - Array of animations to run in order
- * @returns Promise that resolves when all animations complete
- */
-export async function sequenceAnimations(
-  element: HTMLElement,
-  animations: Array<{ name: string, options?: CSSAnimationOptions }>,
-): Promise<void> {
-  for (const animation of animations) {
-    applyAnimation(element, animation.name, animation.options)
-    await waitForAnimation(element)
-  }
-}
-
-/**
- * Predefined CSS animation class names (compatible with Tailwind/headwind)
- */
-export const AnimationClasses = {
-  // Fade
-  fadeIn: 'animate-fade-in',
-  fadeOut: 'animate-fade-out',
-
-  // Slide
-  slideInUp: 'animate-slide-in-up',
-  slideInDown: 'animate-slide-in-down',
-  slideInLeft: 'animate-slide-in-left',
-  slideInRight: 'animate-slide-in-right',
-
-  // Zoom
-  zoomIn: 'animate-zoom-in',
-  zoomOut: 'animate-zoom-out',
-
-  // Bounce
-  bounce: 'animate-bounce',
-
-  // Spin
-  spin: 'animate-spin',
-
-  // Ping
-  ping: 'animate-ping',
-
-  // Pulse
-  pulse: 'animate-pulse',
-} as const
-
-/**
- * Add animation class with automatic removal
- *
- * @param element - Target element
- * @param animationClass - CSS class name
- * @param duration - Duration in milliseconds before removing class
- * @returns Promise that resolves when animation completes
- */
-export function animateWithClass(
-  element: HTMLElement,
-  animationClass: string,
-  duration = 1000,
-): Promise<void> {
-  return new Promise((resolve) => {
-    element.classList.add(animationClass)
-
-    setTimeout(() => {
-      element.classList.remove(animationClass)
-      resolve()
-    }, duration)
-  })
-}
-
-/**
- * Create custom CSS @keyframes rule dynamically
- *
- * @param name - Animation name
- * @param frames - Keyframe definitions (percentage -> styles)
- *
- * @example
- * ```ts
- * createKeyframes('custom-fade', {
- *   '0%': { opacity: '0' },
- *   '100%': { opacity: '1' }
- * })
- * ```
- */
-export function createKeyframes(name: string, frames: Record<string, Record<string, string>>): void {
-  const keyframesRule = `
-    @keyframes ${name} {
-      ${Object.entries(frames)
-    .map(([percentage, styles]) => {
-    const styleString = Object.entries(styles)
-      .map(([prop, value]) => `${prop}: ${value};`)
-      .join(' ')
-    return `${percentage} { ${styleString} }`
-  })
-    .join('\n')}
-    }
-  `
-
-  const styleSheet = document.createElement('style')
-  styleSheet.textContent = keyframesRule
-  document.head.appendChild(styleSheet)
-}

package/src/utils/animation/index.ts

@@ -1,5 +0,0 @@
-// Animation utilities exports
-
-export * from './easing'
-export * from './helpers'
-export * from './keyframes'