@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/components/ui/advanced-transition-system.esm.js

@@ -4,7 +4,15 @@ import { useAdvancedTransitionSystem } from '../../hooks/use-advanced-transition
 
 // Advanced Transition Container Component
 export interface AdvancedTransitionContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  duration?}
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  performance?: boolean
+  deviceOptimization?: boolean
+  accessibility?: boolean
+  batteryAware?: boolean
+  children: React.ReactNode
+}
 
 export const AdvancedTransitionContainer = forwardRef<HTMLDivElement, AdvancedTransitionContainerProps>(
   ({ className, duration = 300, easing = 'ease-out', delay = 0, performance = true, deviceOptimization = true, accessibility = true, batteryAware = true, children, ...props }, ref) => {
@@ -31,38 +39,41 @@ export const AdvancedTransitionContainer = forwardRef<HTMLDivElement, AdvancedTr
 
     const baseClasses = 'advanced-transition transition-performance'
     const easingClasses = {
-      'ease-out',
-      'ease-in',
-      'ease-in-out',
-      'ease-out-quint',
-      'ease-in-quint',
-      'ease-in-out-quint',
-      'ease-out-expo',
-      'ease-in-expo',
-      'ease-in-out-expo',
-      'ease-out-circ',
-      'ease-in-circ',
-      'ease-in-out-circ'}
+      'ease-out': 'transition-ease-out',
+      'ease-in': 'transition-ease-in',
+      'ease-in-out': 'transition-ease-in-out',
+      'ease-out-quint': 'transition-ease-out-quint',
+      'ease-in-quint': 'transition-ease-in-quint',
+      'ease-in-out-quint': 'transition-ease-in-out-quint',
+      'ease-out-expo': 'transition-ease-out-expo',
+      'ease-in-expo': 'transition-ease-in-expo',
+      'ease-in-out-expo': 'transition-ease-in-out-expo',
+      'ease-out-circ': 'transition-ease-out-circ',
+      'ease-in-circ': 'transition-ease-in-circ',
+      'ease-in-out-circ': 'transition-ease-in-out-circ'
+    }
 
     const durationClasses = {
-      75,
-      100,
-      150,
-      200,
-      300,
-      500,
-      700,
-      1000}
+      75: 'transition-duration-75',
+      100: 'transition-duration-100',
+      150: 'transition-duration-150',
+      200: 'transition-duration-200',
+      300: 'transition-duration-300',
+      500: 'transition-duration-500',
+      700: 'transition-duration-700',
+      1000: 'transition-duration-1000'
+    }
 
     const delayClasses = {
-      75,
-      100,
-      150,
-      200,
-      300,
-      500,
-      700,
-      1000}
+      75: 'transition-delay-75',
+      100: 'transition-delay-100',
+      150: 'transition-delay-150',
+      200: 'transition-delay-200',
+      300: 'transition-delay-300',
+      500: 'transition-delay-500',
+      700: 'transition-delay-700',
+      1000: 'transition-delay-1000'
+    }
 
     return (
       <div
@@ -72,13 +83,13 @@ export const AdvancedTransitionContainer = forwardRef<HTMLDivElement, AdvancedTr
           easingClasses[easing],
           durationClasses[duration as keyof typeof durationClasses] || 'transition-duration-300',
           delayClasses[delay as keyof typeof delayClasses] || '',
-          isVisible ? 'opacity-100' ,
-          isTransitionActive() ? 'transitioning' ,
+          isVisible ? 'opacity-100' : 'opacity-0',
+          isTransitionActive() ? 'transitioning' : '',
           className
         )}
         style={{
-          transitionDuration}ms`,
-          transitionDelay}ms`
+          transitionDuration: `${transitionState.currentDuration}ms`,
+          transitionDelay: `${transitionState.currentDelay}ms`
         }}
         {...props}
       >
@@ -95,7 +106,13 @@ AdvancedTransitionContainer.displayName = 'AdvancedTransitionContainer'
 
 // Advanced Transition Button Component
 export interface AdvancedTransitionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  duration?}
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost'
+  size?: 'sm' | 'default' | 'lg'
+  children: React.ReactNode
+}
 
 export const AdvancedTransitionButton = forwardRef<HTMLButtonElement, AdvancedTransitionButtonProps>(
   ({ className, duration = 200, easing = 'ease-out', delay = 0, variant = 'default', size = 'default', children, ...props }, ref) => {
@@ -103,10 +120,11 @@ export const AdvancedTransitionButton = forwardRef<HTMLButtonElement, AdvancedTr
       duration,
       easing,
       delay,
-      performance,
-      deviceOptimization,
-      accessibility,
-      batteryAware})
+      performance: true,
+      deviceOptimization: true,
+      accessibility: true,
+      batteryAware: true
+    })
 
     const handleClick = () => {
       startTransition()
@@ -114,29 +132,31 @@ export const AdvancedTransitionButton = forwardRef<HTMLButtonElement, AdvancedTr
 
     const baseClasses = 'advanced-transition transition-performance transition-transform'
     const easingClasses = {
-      'ease-out',
-      'ease-in',
-      'ease-in-out',
-      'ease-out-quint',
-      'ease-in-quint',
-      'ease-in-out-quint',
-      'ease-out-expo',
-      'ease-in-expo',
-      'ease-in-out-expo',
-      'ease-out-circ',
-      'ease-in-circ',
-      'ease-in-out-circ'}
+      'ease-out': 'transition-ease-out',
+      'ease-in': 'transition-ease-in',
+      'ease-in-out': 'transition-ease-in-out',
+      'ease-out-quint': 'transition-ease-out-quint',
+      'ease-in-quint': 'transition-ease-in-quint',
+      'ease-in-out-quint': 'transition-ease-in-out-quint',
+      'ease-out-expo': 'transition-ease-out-expo',
+      'ease-in-expo': 'transition-ease-in-expo',
+      'ease-in-out-expo': 'transition-ease-in-out-expo',
+      'ease-out-circ': 'transition-ease-out-circ',
+      'ease-in-circ': 'transition-ease-in-circ',
+      'ease-in-out-circ': 'transition-ease-in-out-circ'
+    }
 
     const variantClasses = {
-      default,
-      secondary,
-      outline,
-      ghost}
+      default: 'bg-cs-primary text-white hover:bg-cs-primary-hover active:bg-cs-primary-active',
+      secondary: 'bg-cs-secondary text-cs-text-primary hover:bg-cs-secondary-hover active:bg-cs-secondary-active',
+      outline: 'bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg',
+      ghost: 'bg-transparent text-cs-text-primary hover:bg-cs-hover-bg'
+    }
 
     const sizeClasses = {
-      sm] min-w-[44px]',
-      default] min-w-[48px]',
-      lg] min-w-[56px]'
+      sm: 'px-3 py-2 text-sm min-h-[44px] min-w-[44px]',
+      default: 'px-4 py-3 text-base min-h-[48px] min-w-[48px]',
+      lg: 'px-6 py-4 text-lg min-h-[56px] min-w-[56px]'
     }
 
     return (
@@ -147,13 +167,13 @@ export const AdvancedTransitionButton = forwardRef<HTMLButtonElement, AdvancedTr
           easingClasses[easing],
           variantClasses[variant],
           sizeClasses[size],
-          'rounded-lg font-medium focus,
-          isTransitionActive() ? 'scale-95' ,
+          'rounded-lg font-medium focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2',
+          isTransitionActive() ? 'scale-95' : 'scale-100',
           className
         )}
         style={{
-          transitionDuration}ms`,
-          transitionDelay}ms`
+          transitionDuration: `${transitionState.currentDuration}ms`,
+          transitionDelay: `${transitionState.currentDelay}ms`
         }}
         onClick={handleClick}
         {...props}
@@ -171,7 +191,12 @@ AdvancedTransitionButton.displayName = 'AdvancedTransitionButton'
 
 // Advanced Transition Card Component
 export interface AdvancedTransitionCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  duration?}
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  interactive?: boolean
+  children: React.ReactNode
+}
 
 export const AdvancedTransitionCard = forwardRef<HTMLDivElement, AdvancedTransitionCardProps>(
   ({ className, duration = 300, easing = 'ease-out', delay = 0, interactive = false, children, ...props }, ref) => {
@@ -179,10 +204,11 @@ export const AdvancedTransitionCard = forwardRef<HTMLDivElement, AdvancedTransit
       duration,
       easing,
       delay,
-      performance,
-      deviceOptimization,
-      accessibility,
-      batteryAware})
+      performance: true,
+      deviceOptimization: true,
+      accessibility: true,
+      batteryAware: true
+    })
 
     const handleClick = () => {
       if (interactive) {
@@ -192,31 +218,36 @@ export const AdvancedTransitionCard = forwardRef<HTMLDivElement, AdvancedTransit
 
     const baseClasses = 'advanced-transition transition-performance transition-shadow'
     const easingClasses = {
-      'ease-out',
-      'ease-in',
-      'ease-in-out',
-      'ease-out-quint',
-      'ease-in-quint',
-      'ease-in-out-quint',
-      'ease-out-expo',
-      'ease-in-expo',
-      'ease-in-out-expo',
-      'ease-out-circ',
-      'ease-in-circ',
-      'ease-in-out-circ'}
-
-    const interactiveClasses = interactive ? 'cursor-pointer hover={ref}
+      'ease-out': 'transition-ease-out',
+      'ease-in': 'transition-ease-in',
+      'ease-in-out': 'transition-ease-in-out',
+      'ease-out-quint': 'transition-ease-out-quint',
+      'ease-in-quint': 'transition-ease-in-quint',
+      'ease-in-out-quint': 'transition-ease-in-out-quint',
+      'ease-out-expo': 'transition-ease-out-expo',
+      'ease-in-expo': 'transition-ease-in-expo',
+      'ease-in-out-expo': 'transition-ease-in-out-expo',
+      'ease-out-circ': 'transition-ease-out-circ',
+      'ease-in-circ': 'transition-ease-in-circ',
+      'ease-in-out-circ': 'transition-ease-in-out-circ'
+    }
+
+    const interactiveClasses = interactive ? 'cursor-pointer hover:shadow-lg active:shadow-xl' : ''
+
+    return (
+      <div
+        ref={ref}
         className={cn(
           baseClasses,
           easingClasses[easing],
           'bg-cs-surface-bg border border-cs-border rounded-lg shadow-sm p-4',
           interactiveClasses,
-          isTransitionActive() ? 'shadow-2xl' ,
+          isTransitionActive() ? 'shadow-2xl' : 'shadow-sm',
           className
         )}
         style={{
-          transitionDuration}ms`,
-          transitionDelay}ms`
+          transitionDuration: `${transitionState.currentDuration}ms`,
+          transitionDelay: `${transitionState.currentDelay}ms`
         }}
         onClick={handleClick}
         {...props}
@@ -234,7 +265,11 @@ AdvancedTransitionCard.displayName = 'AdvancedTransitionCard'
 
 // Advanced Transition Input Component
 export interface AdvancedTransitionInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  duration?}
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  children?: React.ReactNode
+}
 
 export const AdvancedTransitionInput = forwardRef<HTMLInputElement, AdvancedTransitionInputProps>(
   ({ className, duration = 200, easing = 'ease-out', delay = 0, children, ...props }, ref) => {
@@ -242,10 +277,11 @@ export const AdvancedTransitionInput = forwardRef<HTMLInputElement, AdvancedTran
       duration,
       easing,
       delay,
-      performance,
-      deviceOptimization,
-      accessibility,
-      batteryAware})
+      performance: true,
+      deviceOptimization: true,
+      accessibility: true,
+      batteryAware: true
+    })
 
     const handleFocus = () => {
       startTransition()
@@ -253,18 +289,19 @@ export const AdvancedTransitionInput = forwardRef<HTMLInputElement, AdvancedTran
 
     const baseClasses = 'advanced-transition transition-performance transition-colors'
     const easingClasses = {
-      'ease-out',
-      'ease-in',
-      'ease-in-out',
-      'ease-out-quint',
-      'ease-in-quint',
-      'ease-in-out-quint',
-      'ease-out-expo',
-      'ease-in-expo',
-      'ease-in-out-expo',
-      'ease-out-circ',
-      'ease-in-circ',
-      'ease-in-out-circ'}
+      'ease-out': 'transition-ease-out',
+      'ease-in': 'transition-ease-in',
+      'ease-in-out': 'transition-ease-in-out',
+      'ease-out-quint': 'transition-ease-out-quint',
+      'ease-in-quint': 'transition-ease-in-quint',
+      'ease-in-out-quint': 'transition-ease-in-out-quint',
+      'ease-out-expo': 'transition-ease-out-expo',
+      'ease-in-expo': 'transition-ease-in-expo',
+      'ease-in-out-expo': 'transition-ease-in-out-expo',
+      'ease-out-circ': 'transition-ease-out-circ',
+      'ease-in-circ': 'transition-ease-in-circ',
+      'ease-in-out-circ': 'transition-ease-in-out-circ'
+    }
 
     return (
       <div className="relative">
@@ -274,14 +311,14 @@ export const AdvancedTransitionInput = forwardRef<HTMLInputElement, AdvancedTran
             baseClasses,
             easingClasses[easing],
             'w-full bg-cs-surface-bg border border-cs-border rounded-lg px-4 py-3 text-cs-text-primary',
-            'focus,
-            'placeholder,
-            isTransitionActive() ? 'border-cs-primary ring-2 ring-cs-primary' ,
+            'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:border-cs-primary',
+            'placeholder:text-cs-text-secondary',
+            isTransitionActive() ? 'border-cs-primary ring-2 ring-cs-primary' : '',
             className
           )}
           style={{
-            transitionDuration}ms`,
-            transitionDelay}ms`
+            transitionDuration: `${transitionState.currentDuration}ms`,
+            transitionDelay: `${transitionState.currentDelay}ms`
           }}
           onFocus={handleFocus}
           {...props}
@@ -299,24 +336,30 @@ AdvancedTransitionInput.displayName = 'AdvancedTransitionInput'
 
 // Advanced Transition List Component
 export interface AdvancedTransitionListProps extends React.HTMLAttributes<HTMLUListElement> {
-  duration?}
+  duration?: number
+  easing?: 'ease-out' | 'ease-in' | 'ease-in-out' | 'ease-out-quint' | 'ease-in-quint' | 'ease-in-out-quint' | 'ease-out-expo' | 'ease-in-expo' | 'ease-in-out-expo' | 'ease-out-circ' | 'ease-in-circ' | 'ease-in-out-circ'
+  delay?: number
+  staggerDelay?: number
+  children: React.ReactNode
+}
 
 export const AdvancedTransitionList = forwardRef<HTMLUListElement, AdvancedTransitionListProps>(
   ({ className, duration = 300, easing = 'ease-out', delay = 0, staggerDelay = 100, children, ...props }, ref) => {
     const baseClasses = 'advanced-transition transition-performance'
     const easingClasses = {
-      'ease-out',
-      'ease-in',
-      'ease-in-out',
-      'ease-out-quint',
-      'ease-in-quint',
-      'ease-in-out-quint',
-      'ease-out-expo',
-      'ease-in-expo',
-      'ease-in-out-expo',
-      'ease-out-circ',
-      'ease-in-circ',
-      'ease-in-out-circ'}
+      'ease-out': 'transition-ease-out',
+      'ease-in': 'transition-ease-in',
+      'ease-in-out': 'transition-ease-in-out',
+      'ease-out-quint': 'transition-ease-out-quint',
+      'ease-in-quint': 'transition-ease-in-quint',
+      'ease-in-out-quint': 'transition-ease-in-out-quint',
+      'ease-out-expo': 'transition-ease-out-expo',
+      'ease-in-expo': 'transition-ease-in-expo',
+      'ease-in-out-expo': 'transition-ease-in-out-expo',
+      'ease-out-circ': 'transition-ease-out-circ',
+      'ease-in-circ': 'transition-ease-in-circ',
+      'ease-in-out-circ': 'transition-ease-in-out-circ'
+    }
 
     return (
       <ul
@@ -328,16 +371,17 @@ export const AdvancedTransitionList = forwardRef<HTMLUListElement, AdvancedTrans
           className
         )}
         style={{
-          transitionDuration}ms`,
-          transitionDelay}ms`
+          transitionDuration: `${duration}ms`,
+          transitionDelay: `${delay}ms`
         }}
         {...props}
       >
         {React.Children.map(children, (child, index) => {
           if (React.isValidElement(child)) {
             return React.cloneElement(child, {
-              style,
-                transitionDelay)}ms`
+              style: {
+                ...child.props.style,
+                transitionDelay: `${delay + (index * staggerDelay)}ms`
               }
             })
           }