@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/components/ui/animation/animated-container.d.ts

@@ -0,0 +1,162 @@
+export interface AnimatedContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  animation?: 'fadeIn' | 'slideIn' | 'scaleIn' | 'bounce' | 'none'
+  duration?: 'fast' | 'normal' | 'slow'
+  easing?: 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce'
+  delay?: number
+  stagger?: number
+  onAnimationStart?: () => void
+  onAnimationEnd?: () => void
+  children: React.ReactNode
+}
+
+export declare const AnimatedContainer: forwardRef<HTMLDivElement, AnimatedContainerProps>(
+  (
+    {
+      animation = 'fadeIn',
+      duration = 'normal',
+      easing = 'ease',
+      delay = 0,
+      stagger = 0,
+      onAnimationStart,
+      onAnimationEnd,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    // Use the forwarded ref if provided, otherwise use local ref
+    const finalRef = ref || containerRef
+    const [isAnimating, setIsAnimating] = useState(false)
+    const [hasAnimated, setHasAnimated] = useState(false)
+
+    const {
+      getOptimizedDuration,
+      getOptimizedEasing,
+      getAnimationClasses,
+      shouldDisableAnimations
+    } = useAnimationProfile()
+
+    const optimizedDuration = getOptimizedDuration(duration)
+    const optimizedEasing = getOptimizedEasing(easing)
+    const animationClasses = getAnimationClasses()
+    const shouldDisable = shouldDisableAnimations()
+
+    useEffect(() => {
+      if (shouldDisable || animation === 'none') {
+        setHasAnimated(true)
+        return
+      }
+
+      const element = containerRef.current
+      if (!element) return
+
+      const startAnimation = () => {
+        setIsAnimating(true)
+        onAnimationStart?.()
+
+        // Apply initial state
+        element.style.opacity = '0'
+        element.style.transform = getInitialTransform(animation)
+
+        // Apply animation
+        const animationOptions: KeyframeAnimationOptions = {
+          duration: parseFloat(optimizedDuration) * 1000,
+          easing: optimizedEasing,
+          delay: (delay + stagger) * 1000,
+          fill: 'forwards'
+        }
+
+        const keyframes = getKeyframes(animation)
+        const anim = element.animate(keyframes, animationOptions)
+
+        anim.onfinish = () => {
+          setIsAnimating(false)
+          setHasAnimated(true)
+          onAnimationEnd?.()
+        }
+      }
+
+      // Small delay to ensure DOM is ready
+      const timer = setTimeout(startAnimation, 50)
+
+      return () => {
+        clearTimeout(timer)
+        if (element.getAnimations) {
+          element.getAnimations().forEach(anim => anim.cancel())
+        }
+      }
+    }, [animation, optimizedDuration, optimizedEasing, delay, stagger, shouldDisable, onAnimationStart, onAnimationEnd])
+
+    const getInitialTransform = (anim: string): string => {
+      switch (anim) {
+        case 'slideIn':
+          return 'translateX(-100%)'
+        case 'scaleIn':
+          return 'scale(0.8)'
+        case 'bounce':
+          return 'translateY(-20px)'
+        default:
+          return 'none'
+      }
+    }
+
+    const getKeyframes = (anim: string): Keyframe[] => {
+      switch (anim) {
+        case 'fadeIn':
+          return [
+            { opacity: 0, transform: 'none' },
+            { opacity: 1, transform: 'none' }
+          ]
+        case 'slideIn':
+          return [
+            { opacity: 0, transform: 'translateX(-100%)' },
+            { opacity: 1, transform: 'translateX(0)' }
+          ]
+        case 'scaleIn':
+          return [
+            { opacity: 0, transform: 'scale(0.8)' },
+            { opacity: 1, transform: 'scale(1)' }
+          ]
+        case 'bounce':
+          return [
+            { opacity: 0, transform: 'translateY(-20px)' },
+            { opacity: 1, transform: 'translateY(0)' }
+          ]
+        default:
+          return [
+            { opacity: 0 },
+            { opacity: 1 }
+          ]
+      }
+    }
+
+    const containerClassName = cn(
+      'coach-stan-animation-base',
+      animationClasses,
+      {
+        'opacity-0': !hasAnimated && !shouldDisable,
+        'pointer-events-none': isAnimating
+      },
+      className
+    )
+
+    return (
+      <div
+        ref={finalRef}
+        className={containerClassName}
+        style={{
+          '--animation-duration': optimizedDuration,
+          '--animation-easing': optimizedEasing,
+          '--animation-delay': `${delay + stagger}s`
+        } as React.CSSProperties}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+AnimatedContainer.displayName = 'AnimatedContainer'

package/dist/components/ui/animation/animated-container.esm.js

@@ -0,0 +1,143 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import { cn } from '../../../lib/utils'
+import { useAnimationProfile } from '../../../hooks/use-animation-profile'
+
+export interface AnimatedContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  animation?) => void
+  onAnimationEnd?) => void
+  children}
+
+export const AnimatedContainer = forwardRef<HTMLDivElement, AnimatedContainerProps>(
+  (
+    {
+      animation = 'fadeIn',
+      duration = 'normal',
+      easing = 'ease',
+      delay = 0,
+      stagger = 0,
+      onAnimationStart,
+      onAnimationEnd,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    // Use the forwarded ref if provided, otherwise use local ref
+    const finalRef = ref || containerRef
+    const [isAnimating, setIsAnimating] = useState(false)
+    const [hasAnimated, setHasAnimated] = useState(false)
+    
+    const {
+      getOptimizedDuration,
+      getOptimizedEasing,
+      getAnimationClasses,
+      shouldDisableAnimations
+    } = useAnimationProfile()
+
+    const optimizedDuration = getOptimizedDuration(duration)
+    const optimizedEasing = getOptimizedEasing(easing)
+    const animationClasses = getAnimationClasses()
+    const shouldDisable = shouldDisableAnimations()
+
+    useEffect(() => {
+      if (shouldDisable || animation === 'none') {
+        setHasAnimated(true)
+        return
+      }
+
+      const element = containerRef.current
+      if (!element) return
+
+      const startAnimation = () => {
+        setIsAnimating(true)
+        onAnimationStart?.()
+
+        // Apply initial state
+        element.style.opacity = '0'
+        element.style.transform = getInitialTransform(animation)
+
+        // Apply animation
+        const animationOptions= {
+          duration) * 1000,
+          easing,
+          delay) * 1000,
+          fill}
+
+        const keyframes = getKeyframes(animation)
+        const anim = element.animate(keyframes, animationOptions)
+
+        anim.onfinish = () => {
+          setIsAnimating(false)
+          setHasAnimated(true)
+          onAnimationEnd?.()
+        }
+      }
+
+      // Small delay to ensure DOM is ready
+      const timer = setTimeout(startAnimation, 50)
+
+      return () => {
+        clearTimeout(timer)
+        if (element.getAnimations) {
+          element.getAnimations().forEach(anim => anim.cancel())
+        }
+      }
+    }, [animation, optimizedDuration, optimizedEasing, delay, stagger, shouldDisable, onAnimationStart, onAnimationEnd])
+
+    const getInitialTransform = (anim)=> {
+      switch (anim) {
+        case 'slideIn')'
+        case 'scaleIn')'
+        case 'bounce')'
+        default}
+    }
+
+    const getKeyframes = (anim)] => {
+      switch (anim) {
+        case 'fadeIn', transform},
+            { opacity, transform}
+          ]
+        case 'slideIn', transform)' },
+            { opacity, transform)' }
+          ]
+        case 'scaleIn', transform)' },
+            { opacity, transform)' }
+          ]
+        case 'bounce', transform)' },
+            { opacity, transform)' }
+          ]
+        default},
+            { opacity}
+          ]
+      }
+    }
+
+    const containerClassName = cn(
+      'coach-stan-animation-base',
+      animationClasses,
+      {
+        'opacity-0',
+        'pointer-events-none'},
+      className
+    )
+
+    return (
+      <div
+        ref={finalRef}
+        className={containerClassName}
+        style={{
+          '--animation-duration',
+          '--animation-easing',
+          '--animation-delay'}s`
+        } as React.CSSProperties}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+AnimatedContainer.displayName = 'AnimatedContainer'

package/dist/components/ui/animation/animated-container.js

@@ -0,0 +1,143 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import { cn } from '../../../lib/utils'
+import { useAnimationProfile } from '../../../hooks/use-animation-profile'
+
+export interface AnimatedContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  animation?) => void
+  onAnimationEnd?) => void
+  children}
+
+export const AnimatedContainer = forwardRef<HTMLDivElement, AnimatedContainerProps>(
+  (
+    {
+      animation = 'fadeIn',
+      duration = 'normal',
+      easing = 'ease',
+      delay = 0,
+      stagger = 0,
+      onAnimationStart,
+      onAnimationEnd,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    // Use the forwarded ref if provided, otherwise use local ref
+    const finalRef = ref || containerRef
+    const [isAnimating, setIsAnimating] = useState(false)
+    const [hasAnimated, setHasAnimated] = useState(false)
+    
+    const {
+      getOptimizedDuration,
+      getOptimizedEasing,
+      getAnimationClasses,
+      shouldDisableAnimations
+    } = useAnimationProfile()
+
+    const optimizedDuration = getOptimizedDuration(duration)
+    const optimizedEasing = getOptimizedEasing(easing)
+    const animationClasses = getAnimationClasses()
+    const shouldDisable = shouldDisableAnimations()
+
+    useEffect(() => {
+      if (shouldDisable || animation === 'none') {
+        setHasAnimated(true)
+        return
+      }
+
+      const element = containerRef.current
+      if (!element) return
+
+      const startAnimation = () => {
+        setIsAnimating(true)
+        onAnimationStart?.()
+
+        // Apply initial state
+        element.style.opacity = '0'
+        element.style.transform = getInitialTransform(animation)
+
+        // Apply animation
+        const animationOptions= {
+          duration) * 1000,
+          easing,
+          delay) * 1000,
+          fill}
+
+        const keyframes = getKeyframes(animation)
+        const anim = element.animate(keyframes, animationOptions)
+
+        anim.onfinish = () => {
+          setIsAnimating(false)
+          setHasAnimated(true)
+          onAnimationEnd?.()
+        }
+      }
+
+      // Small delay to ensure DOM is ready
+      const timer = setTimeout(startAnimation, 50)
+
+      return () => {
+        clearTimeout(timer)
+        if (element.getAnimations) {
+          element.getAnimations().forEach(anim => anim.cancel())
+        }
+      }
+    }, [animation, optimizedDuration, optimizedEasing, delay, stagger, shouldDisable, onAnimationStart, onAnimationEnd])
+
+    const getInitialTransform = (anim)=> {
+      switch (anim) {
+        case 'slideIn')'
+        case 'scaleIn')'
+        case 'bounce')'
+        default}
+    }
+
+    const getKeyframes = (anim)] => {
+      switch (anim) {
+        case 'fadeIn', transform},
+            { opacity, transform}
+          ]
+        case 'slideIn', transform)' },
+            { opacity, transform)' }
+          ]
+        case 'scaleIn', transform)' },
+            { opacity, transform)' }
+          ]
+        case 'bounce', transform)' },
+            { opacity, transform)' }
+          ]
+        default},
+            { opacity}
+          ]
+      }
+    }
+
+    const containerClassName = cn(
+      'coach-stan-animation-base',
+      animationClasses,
+      {
+        'opacity-0',
+        'pointer-events-none'},
+      className
+    )
+
+    return (
+      <div
+        ref={finalRef}
+        className={containerClassName}
+        style={{
+          '--animation-duration',
+          '--animation-easing',
+          '--animation-delay'}s`
+        } as React.CSSProperties}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+AnimatedContainer.displayName = 'AnimatedContainer'

package/dist/components/ui/animation/index.d.ts

@@ -0,0 +1,9 @@
+export type { AnimatedContainerProps } from './animated-container'
+
+export type { StaggeredContainerProps } from './staggered-container'
+
+// Re-export animation profile hook for convenience
+export type { 
+  AnimationProfile,
+  PerformanceMetrics
+} from '../../../hooks/use-animation-profile'

package/dist/components/ui/animation/index.esm.js

@@ -0,0 +1,19 @@
+export { AnimatedContainer } from './animated-container'
+export type { AnimatedContainerProps } from './animated-container'
+
+export { StaggeredContainer } from './staggered-container'
+export type { StaggeredContainerProps } from './staggered-container'
+
+// Re-export animation profile hook for convenience
+export { 
+  useAnimationProfile,
+  useAnimationDuration,
+  useAnimationEasing,
+  useAnimationClasses,
+  usePerformanceMode
+} from '../../../hooks/use-animation-profile'
+
+export type { 
+  AnimationProfile,
+  PerformanceMetrics
+} from '../../../hooks/use-animation-profile'

package/dist/components/ui/animation/index.js

@@ -0,0 +1,19 @@
+export { AnimatedContainer } from './animated-container'
+export type { AnimatedContainerProps } from './animated-container'
+
+export { StaggeredContainer } from './staggered-container'
+export type { StaggeredContainerProps } from './staggered-container'
+
+// Re-export animation profile hook for convenience
+export { 
+  useAnimationProfile,
+  useAnimationDuration,
+  useAnimationEasing,
+  useAnimationClasses,
+  usePerformanceMode
+} from '../../../hooks/use-animation-profile'
+
+export type { 
+  AnimationProfile,
+  PerformanceMetrics
+} from '../../../hooks/use-animation-profile'

package/dist/components/ui/animation/staggered-container.d.ts

@@ -0,0 +1,64 @@
+export interface StaggeredContainerProps extends Omit<AnimatedContainerProps, 'children'> {
+  children: React.ReactNode
+  staggerDelay?: number
+  staggerDirection?: 'forward' | 'reverse' | 'center'
+  staggerEasing?: 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut'
+}
+
+export const StaggeredContainer: React.FC<StaggeredContainerProps> = ({
+  children,
+  staggerDelay = 0.1,
+  staggerDirection = 'forward',
+  staggerEasing = 'ease',
+  className,
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children)
+  const totalChildren = childrenArray.length
+
+  const getStaggerDelay = (index: number): number => {
+    switch (staggerDirection) {
+      case 'reverse':
+        return (totalChildren - 1 - index) * staggerDelay
+      case 'center':
+        const centerIndex = Math.floor(totalChildren / 2)
+        const distanceFromCenter = Math.abs(index - centerIndex)
+        return distanceFromCenter * staggerDelay
+      case 'forward':
+      default:
+        return index * staggerDelay
+    }
+  }
+
+  const renderChild = (child: React.ReactNode, index: number): ReactElement | null => {
+    if (!isValidElement(child)) {
+      return null
+    }
+
+    // If the child is already an AnimatedContainer, just add stagger
+    if (child.type === AnimatedContainer) {
+      return cloneElement(child, {
+        ...child.props,
+        stagger: getStaggerDelay(index),
+        key: `staggered-${index}`
+      })
+    }
+
+    // Wrap non-animated children in AnimatedContainer
+    return (
+      <AnimatedContainer
+        key={`staggered-${index}`}
+        stagger={getStaggerDelay(index)}
+        {...props}
+      >
+        {child}
+      </AnimatedContainer>
+    )
+  }
+
+  return (
+    <div className={cn('coach-stan-staggered-container', className)}>
+      {childrenArray.map((child, index) => renderChild(child, index))}
+    </div>
+  )
+}

package/dist/components/ui/animation/staggered-container.esm.js

@@ -0,0 +1,59 @@
+import React, { Children, cloneElement, isValidElement, ReactElement } from 'react'
+import { cn } from '../../../lib/utils'
+import { AnimatedContainer, AnimatedContainerProps } from './animated-container'
+
+export interface StaggeredContainerProps extends Omit<AnimatedContainerProps, 'children'> {
+  children}
+
+export const StaggeredContainer= ({
+  children,
+  staggerDelay = 0.1,
+  staggerDirection = 'forward',
+  staggerEasing = 'ease',
+  className,
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children)
+  const totalChildren = childrenArray.length
+
+  const getStaggerDelay = (index)=> {
+    switch (staggerDirection) {
+      case 'reverse') * staggerDelay
+      case 'center'= Math.floor(totalChildren / 2)
+        const distanceFromCenter = Math.abs(index - centerIndex)
+        return distanceFromCenter * staggerDelay
+      case 'forward'}
+  }
+
+  const renderChild = (child, index)=> {
+    if (!isValidElement(child)) {
+      return null
+    }
+
+    // If the child is already an AnimatedContainer, just add stagger
+    if (child.type === AnimatedContainer) {
+      return cloneElement(child, {
+        ...child.props,
+        stagger),
+        key}`
+      })
+    }
+
+    // Wrap non-animated children in AnimatedContainer
+    return (
+      <AnimatedContainer
+        key={`staggered-${index}`}
+        stagger={getStaggerDelay(index)}
+        {...props}
+      >
+        {child}
+      </AnimatedContainer>
+    )
+  }
+
+  return (
+    <div className={cn('coach-stan-staggered-container', className)}>
+      {childrenArray.map((child, index) => renderChild(child, index))}
+    </div>
+  )
+}

package/dist/components/ui/animation/staggered-container.js

@@ -0,0 +1,59 @@
+import React, { Children, cloneElement, isValidElement, ReactElement } from 'react'
+import { cn } from '../../../lib/utils'
+import { AnimatedContainer, AnimatedContainerProps } from './animated-container'
+
+export interface StaggeredContainerProps extends Omit<AnimatedContainerProps, 'children'> {
+  children}
+
+export const StaggeredContainer= ({
+  children,
+  staggerDelay = 0.1,
+  staggerDirection = 'forward',
+  staggerEasing = 'ease',
+  className,
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children)
+  const totalChildren = childrenArray.length
+
+  const getStaggerDelay = (index)=> {
+    switch (staggerDirection) {
+      case 'reverse') * staggerDelay
+      case 'center'= Math.floor(totalChildren / 2)
+        const distanceFromCenter = Math.abs(index - centerIndex)
+        return distanceFromCenter * staggerDelay
+      case 'forward'}
+  }
+
+  const renderChild = (child, index)=> {
+    if (!isValidElement(child)) {
+      return null
+    }
+
+    // If the child is already an AnimatedContainer, just add stagger
+    if (child.type === AnimatedContainer) {
+      return cloneElement(child, {
+        ...child.props,
+        stagger),
+        key}`
+      })
+    }
+
+    // Wrap non-animated children in AnimatedContainer
+    return (
+      <AnimatedContainer
+        key={`staggered-${index}`}
+        stagger={getStaggerDelay(index)}
+        {...props}
+      >
+        {child}
+      </AnimatedContainer>
+    )
+  }
+
+  return (
+    <div className={cn('coach-stan-staggered-container', className)}>
+      {childrenArray.map((child, index) => renderChild(child, index))}
+    </div>
+  )
+}