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

package/dist/components/ui/touch-friendly-interface.d.ts

@@ -0,0 +1,292 @@
+// Touch-Friendly Button Component
+export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  children: React.ReactNode
+}
+
+export declare const TouchFriendlyButton: forwardRef<HTMLButtonElement, TouchFriendlyButtonProps>(
+  ({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback
+    })
+
+    const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance'
+    const feedbackClasses = {
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    }
+
+    const variantClasses = {
+      default: 'touch-friendly-button',
+      secondary: 'touch-friendly-button-secondary',
+      outline: 'touch-target touch-spacing bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg',
+      ghost: 'touch-target touch-spacing bg-transparent text-cs-text-primary hover:bg-cs-hover-bg',
+      destructive: 'touch-target touch-spacing bg-cs-error text-white hover:bg-cs-error-hover'
+    }
+
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg',
+      xl: 'min-h-[64px] min-w-[64px] px-8 py-5 text-xl'
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        {...props}
+      >
+        {children}
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning ml-2">
+            ⚠️ Target too small
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+
+TouchFriendlyButton.displayName = 'TouchFriendlyButton'
+
+// Touch-Friendly Input Component
+export interface TouchFriendlyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  touchSize?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+}
+
+export declare const TouchFriendlyInput: forwardRef<HTMLInputElement, TouchFriendlyInputProps>(
+  ({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
+    const { getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback
+    })
+
+    const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance'
+    const feedbackClasses = {
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-focus',
+      none: ''
+    }
+
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg'
+    }
+
+    return (
+      <input
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          sizeClasses[touchSize],
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+TouchFriendlyInput.displayName = 'TouchFriendlyInput'
+
+// Touch-Friendly Card Component
+export interface TouchFriendlyCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  interactive?: boolean
+}
+
+export declare const TouchFriendlyCard: forwardRef<HTMLDivElement, TouchFriendlyCardProps>(
+  ({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback
+    })
+
+    const baseClasses = 'touch-friendly-card touch-interaction touch-performance'
+    const feedbackClasses = interactive ? {
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    } : { scale: '', ripple: '', color: '', none: '' }
+
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px] p-3',
+      default: 'min-h-[48px] min-w-[48px] p-4',
+      lg: 'min-h-[56px] min-w-[56px] p-6'
+    }
+
+    const interactiveClasses = interactive ? 'cursor-pointer' : ''
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          sizeClasses[size],
+          interactiveClasses,
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        {...props}
+      >
+        {children}
+        {interactive && !isTouchTargetCompliant() && (
+          <div className="text-xs text-cs-warning mt-2">
+            ⚠️ Interactive target too small
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+TouchFriendlyCard.displayName = 'TouchFriendlyCard'
+
+// Touch-Friendly Toggle Component
+export interface TouchFriendlyToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  size?: 'sm' | 'default' | 'lg'
+}
+
+export declare const TouchFriendlyToggle: forwardRef<HTMLButtonElement, TouchFriendlyToggleProps>(
+  ({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback: 'scale'
+    })
+
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
+    }
+
+    const handleClick = () => {
+      onCheckedChange?.(!checked)
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        className={cn(
+          baseClasses,
+          sizeClasses[size],
+          'relative inline-flex items-center justify-center rounded-full transition-colors',
+          checked ? 'bg-cs-primary' : 'bg-cs-border',
+          'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2',
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        <span
+          className={cn(
+            'inline-block rounded-full bg-white shadow transform transition-transform',
+            size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7',
+            checked ? 'translate-x-full' : 'translate-x-0'
+          )}
+        />
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2">
+            ⚠️ Target too small
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+
+TouchFriendlyToggle.displayName = 'TouchFriendlyToggle'
+
+// Touch-Friendly Slider Component
+export interface TouchFriendlySliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  touchSize?: 'sm' | 'default' | 'lg'
+  showValue?: boolean
+}
+
+export declare const TouchFriendlySlider: forwardRef<HTMLInputElement, TouchFriendlySliderProps>(
+  ({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback: 'scale'
+    })
+
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
+    }
+
+    return (
+      <div className="flex flex-col items-center space-y-2">
+        <input
+          ref={ref}
+          type="range"
+          className={cn(
+            baseClasses,
+            sizeClasses[touchSize],
+            'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer',
+            'focus:outline-none focus:ring-2 focus:ring-cs-primary',
+            className
+          )}
+          style={{
+            minHeight: `${getTouchTargetSize()}px`
+          }}
+          {...props}
+        />
+        {showValue && (
+          <span className="text-sm text-cs-text-secondary">
+            {props.value || props.defaultValue || 0}
+          </span>
+        )}
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning">
+            ⚠️ Slider target too small
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+TouchFriendlySlider.displayName = 'TouchFriendlySlider'

package/dist/components/ui/touch-friendly-interface.esm.js

@@ -0,0 +1,272 @@
+import React, { forwardRef } from 'react'
+import { cn } from '../../lib/utils'
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
+
+// Touch-Friendly Button Component
+export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?}
+
+export const TouchFriendlyButton = forwardRef<HTMLButtonElement, TouchFriendlyButtonProps>(
+  ({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize,
+      feedback
+    })
+
+    const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance'
+    const feedbackClasses = {
+      scale,
+      ripple,
+      color,
+      none}
+
+    const variantClasses = {
+      default,
+      secondary,
+      outline,
+      ghost,
+      destructive}
+
+    const sizeClasses = {
+      sm] min-w-[44px] px-3 py-2 text-sm',
+      default] min-w-[48px] px-4 py-3 text-base',
+      lg] min-w-[56px] px-6 py-4 text-lg',
+      xl] min-w-[64px] px-8 py-5 text-xl'
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        style={{
+          minHeight)}px`,
+          minWidth)}px`
+        }}
+        {...props}
+      >
+        {children}
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning ml-2">
+            ⚠️ Target too small
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+
+TouchFriendlyButton.displayName = 'TouchFriendlyButton'
+
+// Touch-Friendly Input Component
+export interface TouchFriendlyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  touchSize?}
+
+export const TouchFriendlyInput = forwardRef<HTMLInputElement, TouchFriendlyInputProps>(
+  ({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
+    const { getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize,
+      feedback
+    })
+
+    const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance'
+    const feedbackClasses = {
+      scale,
+      ripple,
+      color,
+      none}
+
+    const sizeClasses = {
+      sm] min-w-[44px] px-3 py-2 text-sm',
+      default] min-w-[48px] px-4 py-3 text-base',
+      lg] min-w-[56px] px-6 py-4 text-lg'
+    }
+
+    return (
+      <input
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          sizeClasses[touchSize],
+          className
+        )}
+        style={{
+          minHeight)}px`,
+          minWidth)}px`
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+TouchFriendlyInput.displayName = 'TouchFriendlyInput'
+
+// Touch-Friendly Card Component
+export interface TouchFriendlyCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?}
+
+export const TouchFriendlyCard = forwardRef<HTMLDivElement, TouchFriendlyCardProps>(
+  ({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize,
+      feedback
+    })
+
+    const baseClasses = 'touch-friendly-card touch-interaction touch-performance'
+    const feedbackClasses = interactive ? {
+      scale,
+      ripple,
+      color,
+      none} , ripple, color, none}
+
+    const sizeClasses = {
+      sm] min-w-[44px] p-3',
+      default] min-w-[48px] p-4',
+      lg] min-w-[56px] p-6'
+    }
+
+    const interactiveClasses = interactive ? 'cursor-pointer' ={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          sizeClasses[size],
+          interactiveClasses,
+          className
+        )}
+        style={{
+          minHeight)}px`,
+          minWidth)}px`
+        }}
+        {...props}
+      >
+        {children}
+        {interactive && !isTouchTargetCompliant() && (
+          <div className="text-xs text-cs-warning mt-2">
+            ⚠️ Interactive target too small
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+TouchFriendlyCard.displayName = 'TouchFriendlyCard'
+
+// Touch-Friendly Toggle Component
+export interface TouchFriendlyToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?) => void
+  size?}
+
+export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyToggleProps>(
+  ({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize,
+      feedback})
+
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+    const sizeClasses = {
+      sm] min-w-[44px]',
+      default] min-w-[48px]',
+      lg] min-w-[56px]'
+    }
+
+    const handleClick = () => {
+      onCheckedChange?.(!checked)
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        className={cn(
+          baseClasses,
+          sizeClasses[size],
+          'relative inline-flex items-center justify-center rounded-full transition-colors',
+          checked ? 'bg-cs-primary' ,
+          'focus,
+          className
+        )}
+        style={{
+          minHeight)}px`,
+          minWidth)}px`
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        <span
+          className={cn(
+            'inline-block rounded-full bg-white shadow transform transition-transform',
+            size === 'sm' ? 'w-5 h-5' === 'default' ? 'w-6 h-6' ,
+            checked ? 'translate-x-full' )}
+        />
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2">
+            ⚠️ Target too small
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+
+TouchFriendlyToggle.displayName = 'TouchFriendlyToggle'
+
+// Touch-Friendly Slider Component
+export interface TouchFriendlySliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  touchSize?}
+
+export const TouchFriendlySlider = forwardRef<HTMLInputElement, TouchFriendlySliderProps>(
+  ({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize,
+      feedback})
+
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+    const sizeClasses = {
+      sm] min-w-[44px]',
+      default] min-w-[48px]',
+      lg] min-w-[56px]'
+    }
+
+    return (
+      <div className="flex flex-col items-center space-y-2">
+        <input
+          ref={ref}
+          type="range"
+          className={cn(
+            baseClasses,
+            sizeClasses[touchSize],
+            'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer',
+            'focus,
+            className
+          )}
+          style={{
+            minHeight)}px`
+          }}
+          {...props}
+        />
+        {showValue && (
+          <span className="text-sm text-cs-text-secondary">
+            {props.value || props.defaultValue || 0}
+          </span>
+        )}
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning">
+            ⚠️ Slider target too small
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+TouchFriendlySlider.displayName = 'TouchFriendlySlider'