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

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

@@ -0,0 +1,351 @@
+import React, { forwardRef, useState, useEffect } from 'react'
+import { cn } from '../../lib/utils'
+import { useAdvancedTransitionSystem } from '../../hooks/use-advanced-transition-system'
+
+// Advanced Transition Container Component
+export interface AdvancedTransitionContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  duration?}
+
+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) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware
+    })
+
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setIsVisible(true)
+        startTransition()
+      }, delay)
+
+      return () => clearTimeout(timer)
+    }, [startTransition, delay])
+
+    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'}
+
+    const durationClasses = {
+      75,
+      100,
+      150,
+      200,
+      300,
+      500,
+      700,
+      1000}
+
+    const delayClasses = {
+      75,
+      100,
+      150,
+      200,
+      300,
+      500,
+      700,
+      1000}
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          durationClasses[duration as keyof typeof durationClasses] || 'transition-duration-300',
+          delayClasses[delay as keyof typeof delayClasses] || '',
+          isVisible ? 'opacity-100' ,
+          isTransitionActive() ? 'transitioning' ,
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        {...props}
+      >
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-green-500 bg-opacity-20 pointer-events-none z-10" />
+        )}
+      </div>
+    )
+  }
+)
+
+AdvancedTransitionContainer.displayName = 'AdvancedTransitionContainer'
+
+// Advanced Transition Button Component
+export interface AdvancedTransitionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  duration?}
+
+export const AdvancedTransitionButton = forwardRef<HTMLButtonElement, AdvancedTransitionButtonProps>(
+  ({ className, duration = 200, easing = 'ease-out', delay = 0, variant = 'default', size = 'default', children, ...props }, ref) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware})
+
+    const handleClick = () => {
+      startTransition()
+    }
+
+    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'}
+
+    const variantClasses = {
+      default,
+      secondary,
+      outline,
+      ghost}
+
+    const sizeClasses = {
+      sm] min-w-[44px]',
+      default] min-w-[48px]',
+      lg] min-w-[56px]'
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          variantClasses[variant],
+          sizeClasses[size],
+          'rounded-lg font-medium focus,
+          isTransitionActive() ? 'scale-95' ,
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-blue-500 bg-opacity-20 pointer-events-none rounded-lg" />
+        )}
+      </button>
+    )
+  }
+)
+
+AdvancedTransitionButton.displayName = 'AdvancedTransitionButton'
+
+// Advanced Transition Card Component
+export interface AdvancedTransitionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  duration?}
+
+export const AdvancedTransitionCard = forwardRef<HTMLDivElement, AdvancedTransitionCardProps>(
+  ({ className, duration = 300, easing = 'ease-out', delay = 0, interactive = false, children, ...props }, ref) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware})
+
+    const handleClick = () => {
+      if (interactive) {
+        startTransition()
+      }
+    }
+
+    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}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          'bg-cs-surface-bg border border-cs-border rounded-lg shadow-sm p-4',
+          interactiveClasses,
+          isTransitionActive() ? 'shadow-2xl' ,
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-purple-500 bg-opacity-20 pointer-events-none rounded-lg" />
+        )}
+      </div>
+    )
+  }
+)
+
+AdvancedTransitionCard.displayName = 'AdvancedTransitionCard'
+
+// Advanced Transition Input Component
+export interface AdvancedTransitionInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  duration?}
+
+export const AdvancedTransitionInput = forwardRef<HTMLInputElement, AdvancedTransitionInputProps>(
+  ({ className, duration = 200, easing = 'ease-out', delay = 0, children, ...props }, ref) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware})
+
+    const handleFocus = () => {
+      startTransition()
+    }
+
+    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'}
+
+    return (
+      <div className="relative">
+        <input
+          ref={ref}
+          className={cn(
+            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' ,
+            className
+          )}
+          style={{
+            transitionDuration}ms`,
+            transitionDelay}ms`
+          }}
+          onFocus={handleFocus}
+          {...props}
+        />
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-yellow-500 bg-opacity-20 pointer-events-none rounded-lg" />
+        )}
+      </div>
+    )
+  }
+)
+
+AdvancedTransitionInput.displayName = 'AdvancedTransitionInput'
+
+// Advanced Transition List Component
+export interface AdvancedTransitionListProps extends React.HTMLAttributes<HTMLUListElement> {
+  duration?}
+
+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'}
+
+    return (
+      <ul
+        ref={ref}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          'space-y-2',
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        {...props}
+      >
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+              style,
+                transitionDelay)}ms`
+              }
+            })
+          }
+          return child
+        })}
+      </ul>
+    )
+  }
+)
+
+AdvancedTransitionList.displayName = 'AdvancedTransitionList'

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

@@ -0,0 +1,351 @@
+import React, { forwardRef, useState, useEffect } from 'react'
+import { cn } from '../../lib/utils'
+import { useAdvancedTransitionSystem } from '../../hooks/use-advanced-transition-system'
+
+// Advanced Transition Container Component
+export interface AdvancedTransitionContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  duration?}
+
+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) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware
+    })
+
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setIsVisible(true)
+        startTransition()
+      }, delay)
+
+      return () => clearTimeout(timer)
+    }, [startTransition, delay])
+
+    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'}
+
+    const durationClasses = {
+      75,
+      100,
+      150,
+      200,
+      300,
+      500,
+      700,
+      1000}
+
+    const delayClasses = {
+      75,
+      100,
+      150,
+      200,
+      300,
+      500,
+      700,
+      1000}
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          durationClasses[duration as keyof typeof durationClasses] || 'transition-duration-300',
+          delayClasses[delay as keyof typeof delayClasses] || '',
+          isVisible ? 'opacity-100' ,
+          isTransitionActive() ? 'transitioning' ,
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        {...props}
+      >
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-green-500 bg-opacity-20 pointer-events-none z-10" />
+        )}
+      </div>
+    )
+  }
+)
+
+AdvancedTransitionContainer.displayName = 'AdvancedTransitionContainer'
+
+// Advanced Transition Button Component
+export interface AdvancedTransitionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  duration?}
+
+export const AdvancedTransitionButton = forwardRef<HTMLButtonElement, AdvancedTransitionButtonProps>(
+  ({ className, duration = 200, easing = 'ease-out', delay = 0, variant = 'default', size = 'default', children, ...props }, ref) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware})
+
+    const handleClick = () => {
+      startTransition()
+    }
+
+    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'}
+
+    const variantClasses = {
+      default,
+      secondary,
+      outline,
+      ghost}
+
+    const sizeClasses = {
+      sm] min-w-[44px]',
+      default] min-w-[48px]',
+      lg] min-w-[56px]'
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          variantClasses[variant],
+          sizeClasses[size],
+          'rounded-lg font-medium focus,
+          isTransitionActive() ? 'scale-95' ,
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-blue-500 bg-opacity-20 pointer-events-none rounded-lg" />
+        )}
+      </button>
+    )
+  }
+)
+
+AdvancedTransitionButton.displayName = 'AdvancedTransitionButton'
+
+// Advanced Transition Card Component
+export interface AdvancedTransitionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  duration?}
+
+export const AdvancedTransitionCard = forwardRef<HTMLDivElement, AdvancedTransitionCardProps>(
+  ({ className, duration = 300, easing = 'ease-out', delay = 0, interactive = false, children, ...props }, ref) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware})
+
+    const handleClick = () => {
+      if (interactive) {
+        startTransition()
+      }
+    }
+
+    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}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          'bg-cs-surface-bg border border-cs-border rounded-lg shadow-sm p-4',
+          interactiveClasses,
+          isTransitionActive() ? 'shadow-2xl' ,
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-purple-500 bg-opacity-20 pointer-events-none rounded-lg" />
+        )}
+      </div>
+    )
+  }
+)
+
+AdvancedTransitionCard.displayName = 'AdvancedTransitionCard'
+
+// Advanced Transition Input Component
+export interface AdvancedTransitionInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  duration?}
+
+export const AdvancedTransitionInput = forwardRef<HTMLInputElement, AdvancedTransitionInputProps>(
+  ({ className, duration = 200, easing = 'ease-out', delay = 0, children, ...props }, ref) => {
+    const { startTransition, transitionState, isTransitionActive } = useAdvancedTransitionSystem({
+      duration,
+      easing,
+      delay,
+      performance,
+      deviceOptimization,
+      accessibility,
+      batteryAware})
+
+    const handleFocus = () => {
+      startTransition()
+    }
+
+    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'}
+
+    return (
+      <div className="relative">
+        <input
+          ref={ref}
+          className={cn(
+            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' ,
+            className
+          )}
+          style={{
+            transitionDuration}ms`,
+            transitionDelay}ms`
+          }}
+          onFocus={handleFocus}
+          {...props}
+        />
+        {children}
+        {isTransitionActive() && (
+          <div className="absolute inset-0 bg-yellow-500 bg-opacity-20 pointer-events-none rounded-lg" />
+        )}
+      </div>
+    )
+  }
+)
+
+AdvancedTransitionInput.displayName = 'AdvancedTransitionInput'
+
+// Advanced Transition List Component
+export interface AdvancedTransitionListProps extends React.HTMLAttributes<HTMLUListElement> {
+  duration?}
+
+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'}
+
+    return (
+      <ul
+        ref={ref}
+        className={cn(
+          baseClasses,
+          easingClasses[easing],
+          'space-y-2',
+          className
+        )}
+        style={{
+          transitionDuration}ms`,
+          transitionDelay}ms`
+        }}
+        {...props}
+      >
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+              style,
+                transitionDelay)}ms`
+              }
+            })
+          }
+          return child
+        })}
+      </ul>
+    )
+  }
+)
+
+AdvancedTransitionList.displayName = 'AdvancedTransitionList'