@retray-dev/ui-kit 7.0.1 → 9.0.0

package/src/components/HolographicCard/HolographicCard.tsx

@@ -0,0 +1,315 @@
+import React, { useEffect, useMemo } from 'react'
+import { StyleSheet, ViewStyle, TouchableOpacity, Platform } from 'react-native'
+import {
+  Canvas,
+  Group,
+  Image as SkiaImage,
+  useImage,
+  RoundedRect,
+  LinearGradient,
+  vec,
+} from '@shopify/react-native-skia'
+import Animated, {
+  useSharedValue,
+  useDerivedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated'
+import { usePressScale } from '../../utils/usePressScale'
+import { PRESS_SCALE } from '../../utils/animations'
+import { impactLight } from '../../utils/haptics'
+import { RADIUS } from '../../tokens'
+
+// ─── Foil Color Presets ───────────────────────────────────────────────────────
+
+/** Available foil color preset names */
+export type FoilPreset = 
+  | 'rainbow'
+  | 'gold'
+  | 'silver'
+  | 'cosmic'
+  | 'emerald'
+  | 'rose'
+  | 'ocean'
+  | 'fire'
+  | 'aurora'
+  | 'neon'
+
+/** Foil color presets — each is an array of RGBA colors for the gradient */
+export const FOIL_PRESETS: Record<FoilPreset, string[]> = {
+  // Classic holographic rainbow
+  rainbow: [
+    'rgba(255, 0, 128, 0.45)',
+    'rgba(255, 200, 0, 0.40)',
+    'rgba(0, 255, 170, 0.40)',
+    'rgba(0, 170, 255, 0.45)',
+    'rgba(180, 0, 255, 0.45)',
+  ],
+  // Premium gold foil
+  gold: [
+    'rgba(255, 215, 0, 0.50)',
+    'rgba(255, 180, 0, 0.45)',
+    'rgba(218, 165, 32, 0.40)',
+    'rgba(255, 223, 128, 0.50)',
+    'rgba(184, 134, 11, 0.45)',
+  ],
+  // Chrome silver foil
+  silver: [
+    'rgba(192, 192, 192, 0.50)',
+    'rgba(220, 220, 220, 0.45)',
+    'rgba(169, 169, 169, 0.40)',
+    'rgba(240, 240, 240, 0.50)',
+    'rgba(128, 128, 128, 0.45)',
+  ],
+  // Deep space cosmic
+  cosmic: [
+    'rgba(75, 0, 130, 0.50)',
+    'rgba(138, 43, 226, 0.45)',
+    'rgba(255, 20, 147, 0.40)',
+    'rgba(0, 191, 255, 0.45)',
+    'rgba(148, 0, 211, 0.50)',
+  ],
+  // Emerald green luxury
+  emerald: [
+    'rgba(0, 201, 87, 0.50)',
+    'rgba(46, 139, 87, 0.45)',
+    'rgba(0, 255, 127, 0.40)',
+    'rgba(60, 179, 113, 0.45)',
+    'rgba(0, 128, 0, 0.50)',
+  ],
+  // Rose gold / pink
+  rose: [
+    'rgba(255, 105, 180, 0.50)',
+    'rgba(255, 182, 193, 0.45)',
+    'rgba(219, 112, 147, 0.40)',
+    'rgba(255, 20, 147, 0.45)',
+    'rgba(199, 21, 133, 0.50)',
+  ],
+  // Deep ocean blue
+  ocean: [
+    'rgba(0, 119, 190, 0.50)',
+    'rgba(0, 180, 216, 0.45)',
+    'rgba(72, 202, 228, 0.40)',
+    'rgba(144, 224, 239, 0.45)',
+    'rgba(0, 150, 199, 0.50)',
+  ],
+  // Hot fire gradient
+  fire: [
+    'rgba(255, 69, 0, 0.50)',
+    'rgba(255, 140, 0, 0.45)',
+    'rgba(255, 215, 0, 0.40)',
+    'rgba(255, 99, 71, 0.45)',
+    'rgba(220, 20, 60, 0.50)',
+  ],
+  // Aurora borealis
+  aurora: [
+    'rgba(0, 255, 127, 0.45)',
+    'rgba(127, 255, 212, 0.40)',
+    'rgba(0, 206, 209, 0.45)',
+    'rgba(138, 43, 226, 0.40)',
+    'rgba(255, 20, 147, 0.45)',
+  ],
+  // Neon cyberpunk
+  neon: [
+    'rgba(255, 0, 255, 0.55)',
+    'rgba(0, 255, 255, 0.50)',
+    'rgba(255, 255, 0, 0.45)',
+    'rgba(0, 255, 0, 0.50)',
+    'rgba(255, 0, 128, 0.55)',
+  ],
+}
+
+// Default preset
+const DEFAULT_FOIL_COLORS = FOIL_PRESETS.rainbow
+
+// ─── Tilt Configuration ───────────────────────────────────────────────────────
+
+/** Default max tilt in degrees */
+const DEFAULT_TILT_DEG = 10
+/** Default normalization factor (~30° of device rotation = full tilt) */
+const DEFAULT_NORM_FACTOR = Math.PI / 6
+
+export interface HolographicCardProps {
+  /** Card art — `require()` asset or `{ uri }`. Omitted = gradient-only foil surface. */
+  source?: Parameters<typeof useImage>[0]
+  /** Card width (dp). Defaults to 300. */
+  width?: number
+  /** Card height (dp). Defaults to `width * 1.4` (trading-card ratio). */
+  height?: number
+  /** Corner radius (dp). Defaults to `RADIUS.md`. */
+  borderRadius?: number
+  /** React to device motion (gyroscope) for parallax tilt + sheen. Defaults to true. */
+  enableTilt?: boolean
+  /** Strength of the foil sheen, 0–1. Defaults to 1. */
+  intensity?: number
+  /** Called when the card is pressed. */
+  onPress?: () => void
+  style?: ViewStyle
+
+  // ─── New Customization Props ────────────────────────────────────────────────
+
+  /** Foil color preset. Defaults to 'rainbow'. Ignored if `foilColors` is provided. */
+  foilPreset?: FoilPreset
+  /** Custom foil gradient colors (array of RGBA strings). Overrides `foilPreset`. */
+  foilColors?: string[]
+  /** Maximum tilt angle in degrees (0–45). Defaults to 10. */
+  maxTiltDegrees?: number
+  /** Sensitivity of tilt to device motion (0.1–2). Higher = more responsive. Defaults to 1. */
+  tiltSensitivity?: number
+  /** How far the sheen moves relative to tilt (0–1). Defaults to 0.6. */
+  sheenSpread?: number
+  /** Animation duration for tilt smoothing in ms. Defaults to 80. */
+  tiltAnimationDuration?: number
+  /** Perspective depth for 3D effect (200–2000). Defaults to 800. */
+  perspective?: number
+  /** Blend mode for the foil overlay. Defaults to 'plus'. */
+  blendMode?: 'plus' | 'screen' | 'overlay' | 'softLight' | 'hardLight'
+}
+
+/**
+ * Holographic / foil trading-card surface (Pokémon-TCG style). Renders the art
+ * on a Skia canvas with an animated rainbow sheen, and tilts in 3D toward device
+ * motion. The sheen position tracks the tilt so the foil "catches the light".
+ *
+ * Deep-import only — keeps Skia out of the main bundle:
+ *   `import { HolographicCard } from '@retray-dev/ui-kit/HolographicCard'`
+ *
+ * Requires the optional peers `@shopify/react-native-skia` and (for tilt)
+ * `expo-sensors`. Without `expo-sensors` the card renders with a static sheen.
+ */
+export function HolographicCard({
+  source,
+  width = 300,
+  height,
+  borderRadius = RADIUS.md,
+  enableTilt = true,
+  intensity = 1,
+  onPress,
+  style,
+  // New customization props
+  foilPreset = 'rainbow',
+  foilColors,
+  maxTiltDegrees = DEFAULT_TILT_DEG,
+  tiltSensitivity = 1,
+  sheenSpread = 0.6,
+  tiltAnimationDuration = 80,
+  perspective = 800,
+  blendMode = 'plus',
+}: HolographicCardProps) {
+  const h = height ?? width * 1.4
+  // Called unconditionally (rules of hooks); useImage returns null for a nullish source.
+  const image = useImage((source ?? null) as Parameters<typeof useImage>[0])
+
+  // Clamp and compute values
+  const clampedTilt = Math.max(0, Math.min(45, maxTiltDegrees))
+  const clampedSensitivity = Math.max(0.1, Math.min(2, tiltSensitivity))
+  const clampedSpread = Math.max(0, Math.min(1, sheenSpread))
+  const clampedPerspective = Math.max(200, Math.min(2000, perspective))
+  
+  // Resolve foil colors: custom > preset > default
+  const resolvedFoilColors = useMemo(() => {
+    if (foilColors && foilColors.length >= 2) return foilColors
+    return FOIL_PRESETS[foilPreset] ?? DEFAULT_FOIL_COLORS
+  }, [foilColors, foilPreset])
+
+  // Normalization factor adjusted by sensitivity
+  const normFactor = DEFAULT_NORM_FACTOR / clampedSensitivity
+
+  // Tilt in normalized [-1, 1] on each axis.
+  const tiltX = useSharedValue(0)
+  const tiltY = useSharedValue(0)
+
+  useEffect(() => {
+    if (!enableTilt || Platform.OS === 'web') return
+    let remove: (() => void) | undefined
+    let cancelled = false
+    // Dynamic import: expo-sensors is an optional peer. Absence = static sheen.
+    import('expo-sensors')
+      .then(({ DeviceMotion }) => {
+        if (cancelled) return
+        DeviceMotion.setUpdateInterval(16)
+        const sub = DeviceMotion.addListener(({ rotation }) => {
+          if (!rotation) return
+          const nx = Math.max(-1, Math.min(rotation.gamma / normFactor, 1))
+          const ny = Math.max(-1, Math.min(rotation.beta / normFactor, 1))
+          tiltX.value = withTiming(nx, { duration: tiltAnimationDuration })
+          tiltY.value = withTiming(ny, { duration: tiltAnimationDuration })
+        })
+        remove = () => sub.remove()
+      })
+      .catch(() => {
+        // expo-sensors not installed — leave tilt at rest.
+      })
+    return () => {
+      cancelled = true
+      remove?.()
+    }
+  }, [enableTilt, tiltX, tiltY, normFactor, tiltAnimationDuration])
+
+  // 3D parallax — perspective tilt of the whole card toward the device motion.
+  const { animatedStyle: pressStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    disabled: !onPress,
+  })
+
+  const tiltStyle = useAnimatedStyle(() => ({
+    transform: [
+      { perspective: clampedPerspective },
+      { rotateX: `${-tiltY.value * clampedTilt}deg` },
+      { rotateY: `${tiltX.value * clampedTilt}deg` },
+    ],
+  }))
+
+  // Sheen sweeps across the card as it tilts.
+  const start = useDerivedValue(() => vec(width * (0.5 - tiltX.value * clampedSpread), h * (0.5 - tiltY.value * clampedSpread)))
+  const end = useDerivedValue(() => vec(width * (0.5 + tiltX.value * clampedSpread), h * (0.5 + tiltY.value * clampedSpread)))
+
+  const rrct = { x: 0, y: 0, width, height: h }
+
+  const canvas = (
+    <Canvas style={{ width, height: h }}>
+      {/* Art clipped to the rounded card. */}
+      {image ? (
+        <Group clip={{ rect: rrct, rx: borderRadius, ry: borderRadius }}>
+          <SkiaImage image={image} x={0} y={0} width={width} height={h} fit="cover" />
+        </Group>
+      ) : null}
+      {/* Foil sheen — additive rainbow gradient that tracks the tilt. */}
+      <RoundedRect x={0} y={0} width={width} height={h} r={borderRadius} opacity={intensity} blendMode={blendMode}>
+        <LinearGradient start={start} end={end} colors={resolvedFoilColors} />
+      </RoundedRect>
+    </Canvas>
+  )
+
+  const card = (
+    <Animated.View style={[{ width, height: h }, tiltStyle, style]}>{canvas}</Animated.View>
+  )
+
+  if (!onPress) return card
+
+  return (
+    <Animated.View style={pressStyle}>
+      <TouchableOpacity
+        onPress={() => {
+          impactLight()
+          onPress()
+        }}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        accessibilityRole="imagebutton"
+        {...hoverHandlers}
+        style={styles.touch}
+      >
+        {card}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  touch: {
+    alignSelf: 'flex-start',
+  },
+})

package/src/components/HolographicCard/index.ts

@@ -0,0 +1 @@
+export * from './HolographicCard'

package/src/components/IconButton/IconButton.tsx

@@ -1,20 +1,16 @@
 import React from 'react'
 import {
-  TouchableOpacity,
   ActivityIndicator,
   StyleSheet,
   View,
   Text,
-  TouchableOpacityProps,
   ViewStyle,
 } from 'react-native'
-import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
-import { usePressScale } from '../../utils/usePressScale'
-import { PRESS_SCALE } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
 // primary: filled primary
 // secondary: filled surface — icon on neutral bg (Airbnb icon-button-circle)
@@ -24,7 +20,7 @@ import { PRESS_SCALE } from '../../utils/animations'
 export type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive'
 export type IconButtonSize = 'sm' | 'md' | 'lg'
 
-export interface IconButtonProps extends TouchableOpacityProps {
+export interface IconButtonProps {
   iconName?: string
   icon?: React.ReactNode
   iconColor?: string
@@ -36,10 +32,16 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * The dot/count appears top-right of the button.
    */
   badge?: boolean | number
+  disabled?: boolean
+  style?: ViewStyle
+  onPress?: () => void
+  accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 const sizeMap: Record<IconButtonSize, { container: number; icon: number }> = {
-  sm: { container: s(32), icon: 16 },
+  // AUDIT FIX: sm was 32pt — below Apple HIG 44pt minimum touch target.
+  sm: { container: s(44), icon: 18 },
   md: { container: s(44), icon: 20 },
   lg: { container: s(52), icon: 24 },
 }
@@ -57,18 +59,13 @@ function IconButtonBase({
   onPress,
   accessibilityLabel,
   accessibilityHint,
-  ...props
 }: IconButtonProps) {
   const { colors } = useTheme()
   const isDisabled = disabled || loading
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled: isDisabled,
-  })
 
-  const handlePress: TouchableOpacityProps['onPress'] = (e) => {
+  const handlePress = () => {
     impactLight()
-    onPress?.(e)
+    onPress?.()
   }
 
   const containerVariantStyle: ViewStyle = {
@@ -104,11 +101,8 @@ function IconButtonBase({
   const showCount = typeof badge === 'number' && badge > 0
 
   return (
-    <Animated.View
-      style={[styles.wrapper, animatedStyle]}
-      {...hoverHandlers}
-    >
-      <TouchableOpacity
+    <View style={styles.wrapper}>
+      <PressableButton
         style={[
           styles.base,
           containerVariantStyle,
@@ -116,24 +110,22 @@ function IconButtonBase({
           isDisabled && styles.disabled,
           style,
         ]}
-        disabled={isDisabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+        enabled={!isDisabled}
         onPress={handlePress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? iconName ?? 'icon button'}
         accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: isDisabled, busy: loading }}
-        {...props}
       >
         {loading ? (
           <ActivityIndicator size="small" color={spinnerColor} />
         ) : (
           resolvedIcon
         )}
-      </TouchableOpacity>
+      </PressableButton>
       {showBadge && (
         <View style={[
           styles.badge,
@@ -147,7 +139,7 @@ function IconButtonBase({
           )}
         </View>
       )}
-    </Animated.View>
+    </View>
   )
 }