@expokit/cli 0.0.0-stage → 0.2.0

package/registry/payment-card/files/src/components/ui/tilt-card.tsx

@@ -0,0 +1,635 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Image,
+  PanResponder,
+  StyleSheet,
+  View,
+  type ImageSourcePropType,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Defs, LinearGradient, RadialGradient, Rect, Stop } from 'react-native-svg';
+
+import { motion } from '@/lib/kit';
+
+/** `holo` adds a rainbow foil sheen that shifts as the card tilts (always faintly visible). */
+export type TiltCardGlare = 'soft' | 'sharp' | 'holo' | 'none';
+
+/** A rectangle in card points. */
+export interface TiltRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface TiltCardProps {
+  children?: React.ReactNode;
+  /** Photo that fills the card behind the content (`require()` or `{ uri }`). */
+  image?: ImageSourcePropType;
+  /** Darkens the bottom of `image` so white text on it stays readable: 0 off … 1 strong (default 0.6). */
+  shade?: number;
+  /** Maximum tilt in degrees at the card's edge (default 12). */
+  maxTilt?: number;
+  /** Scale while touched (default 1.03). */
+  pressScale?: number;
+  /** Light reflection that slides across the card as it tilts. */
+  glare?: TiltCardGlare;
+  /**
+   * Where the reflection may fall, in card points — for cards with cut-outs (ticket notches,
+   * perforated edges), so light never shows over a hole. Default: the whole card.
+   */
+  glareClip?: TiltRect[];
+  /** Depth of the 3D effect — smaller is more dramatic (default 800). */
+  perspective?: number;
+  /** Slowly sway on its own while untouched, so the card reads as 3D at rest. */
+  idle?: boolean;
+  /** Corner radius (default 20). */
+  radius?: number;
+  /** Soft shadow under the card that shifts as it tilts (default true). */
+  shadow?: boolean;
+  /**
+   * The part of the card that casts the shadow, in card points — e.g. leave out a ticket stub that's
+   * being torn off, so the plate never shows where it was. Default: the whole card.
+   */
+  shadowRect?: TiltRect;
+  /**
+   * Narrows the shadow sideways (1 = full width, 0 = none) — for content that turns edge-on inside
+   * the card, like a FlipCard mid-flip, so the shadow plate never shows past it.
+   */
+  shadowScaleX?: Animated.Value | Animated.AnimatedInterpolation<number>;
+  /** Turn touch tilting off (the card still renders, e.g. while a parent list scrolls). */
+  disabled?: boolean;
+  /** Called with a light tap (not after a drag). */
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  /** Width, height, margins — applied to the card's outer box. */
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TiltLayerProps {
+  children?: React.ReactNode;
+  /**
+   * How far above the card this layer floats: 0 sits on the card, 1 floats well above it
+   * and slides furthest as the card tilts (default 0.5). Negative sinks below the surface.
+   */
+  depth?: number;
+  /** Layers fill the card by default; position content inside, or override here. */
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TiltState {
+  /** -1 … 1 across the card (left → right). */
+  tx: Animated.Value;
+  /** -1 … 1 down the card (top → bottom). */
+  ty: Animated.Value;
+  /** 0 at rest … 1 while touched. */
+  press: Animated.Value;
+  width: number;
+  height: number;
+}
+
+const Ctx = createContext<TiltState | null>(null);
+
+/** The surrounding TiltCard's live tilt (null outside one) — for your own layers and effects. */
+export function useTilt() {
+  return useContext(Ctx);
+}
+
+// Gradients are drawn small and scaled up: a smooth gradient looks the same at any size, and a
+// card-sized (or larger) SVG would cost megabytes of texture per card in a list.
+const PAINT = 96;
+
+// Six colour cycles across the paint, so a couple of bands cross the card like real foil. Cool
+// pinks, violets and cyans stay clean when blended over dark cards (yellow and green turn olive).
+const HOLO = Array.from({ length: 37 }, (_, i) => ['#ff6bd6', '#b38cff', '#6fb6ff', '#5ff0ff', '#a7ffe0', '#ffc2ef'][i % 6]);
+
+function GlarePaint({ variant }: { variant: 'soft' | 'sharp' }) {
+  const sharp = variant === 'sharp';
+  return (
+    <Svg width={PAINT} height={PAINT}>
+      <Defs>
+        <RadialGradient id={`tilt-glare-${variant}`} cx="50%" cy="50%" r="50%">
+          <Stop offset="0" stopColor="#ffffff" stopOpacity={sharp ? 0.85 : 0.6} />
+          <Stop offset={sharp ? '0.25' : '0.5'} stopColor="#ffffff" stopOpacity={0.1} />
+          <Stop offset="1" stopColor="#ffffff" stopOpacity={0} />
+        </RadialGradient>
+      </Defs>
+      <Rect width={PAINT} height={PAINT} fill={`url(#tilt-glare-${variant})`} />
+    </Svg>
+  );
+}
+
+function HoloPaint({ strength = 0.6 }: { strength?: number }) {
+  return (
+    <Svg width={PAINT} height={PAINT}>
+      <Defs>
+        <LinearGradient id={`tilt-holo-${Math.round(strength * 100)}`} x1="0" y1="0" x2="1" y2="1">
+          {HOLO.map((c, i) => (
+            <Stop key={i} offset={String(i / (HOLO.length - 1))} stopColor={c} stopOpacity={strength} />
+          ))}
+        </LinearGradient>
+      </Defs>
+      <Rect width={PAINT} height={PAINT} fill={`url(#tilt-holo-${Math.round(strength * 100)})`} />
+    </Svg>
+  );
+}
+
+/** The reflection (and holo sheen) for a card of size w × h, in card coordinates. */
+function Reflection({
+  variant,
+  w,
+  h,
+  tx,
+  ty,
+  press,
+  idle,
+}: {
+  variant: Exclude<TiltCardGlare, 'none'>;
+  w: number;
+  h: number;
+  tx: Animated.Value;
+  ty: Animated.Value;
+  press: Animated.Value;
+  idle: boolean;
+}) {
+  const G = Math.max(w, h) * 1.7;
+  const H = Math.max(w, h) * 2.6;
+  const box = {
+    position: 'absolute' as const,
+    width: PAINT,
+    height: PAINT,
+    left: (w - PAINT) / 2,
+    top: (h - PAINT) / 2,
+  };
+  const glareOpacity = press.interpolate({
+    inputRange: [0, 1],
+    outputRange: [idle ? 0.22 : 0, variant === 'sharp' ? 0.55 : 0.32],
+  });
+  return (
+    <>
+      {variant === 'holo' ? (
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            ...box,
+            // Overlay blending tints the card like foil instead of washing it out.
+            mixBlendMode: 'overlay',
+            opacity: press.interpolate({
+              inputRange: [0, 1],
+              outputRange: [idle ? 0.26 : 0, 0.5],
+            }),
+            transform: [
+              // Travels further than the light, so the colours sweep as the card leans.
+              {
+                translateX: tx.interpolate({
+                  inputRange: [-1, 1],
+                  outputRange: [w * 0.9, -w * 0.9],
+                }),
+              },
+              {
+                translateY: ty.interpolate({
+                  inputRange: [-1, 1],
+                  outputRange: [h * 0.6, -h * 0.6],
+                }),
+              },
+              { scale: H / PAINT },
+            ],
+          }}
+        >
+          <HoloPaint strength={0.85} />
+        </Animated.View>
+      ) : null}
+      <Animated.View
+        pointerEvents="none"
+        style={{
+          ...box,
+          opacity: glareOpacity,
+          transform: [
+            // The highlight sits under the finger.
+            {
+              translateX: tx.interpolate({
+                inputRange: [-1, 1],
+                outputRange: [-w * 0.5, w * 0.5],
+              }),
+            },
+            {
+              translateY: ty.interpolate({
+                inputRange: [-1, 1],
+                outputRange: [-h * 0.5, h * 0.5],
+              }),
+            },
+            { scale: G / PAINT },
+          ],
+        }}
+      >
+        <GlarePaint variant={variant === 'sharp' ? 'sharp' : 'soft'} />
+      </Animated.View>
+    </>
+  );
+}
+
+/**
+ * A card that tilts toward your finger in 3D: it lifts, its shadow slides away from the light,
+ * and a reflection glides across it. Put content in `TiltLayer`s to make it float above the
+ * surface. Native-driven transforms, no extra libraries.
+ */
+export function TiltCard({
+  children,
+  image,
+  shade = 0.6,
+  maxTilt = 12,
+  pressScale = 1.03,
+  glare = 'soft',
+  glareClip,
+  perspective = 800,
+  idle = false,
+  radius = 20,
+  shadow = true,
+  shadowRect,
+  shadowScaleX,
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  style,
+}: TiltCardProps) {
+  const [size, setSize] = useState({ w: 0, h: 0 });
+  const sizeRef = useRef(size);
+  sizeRef.current = size;
+
+  // -1 … 1 across the card; the card leans toward the finger.
+  const tx = useRef(new Animated.Value(0)).current;
+  const ty = useRef(new Animated.Value(0)).current;
+  const press = useRef(new Animated.Value(0)).current;
+  const touching = useRef(false);
+  const origin = useRef({ x: 0, y: 0 });
+  const moved = useRef(false);
+  const viewRef = useRef<View>(null);
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+
+  // Idle sway: a slow figure-eight while nobody is touching.
+  const idleLoop = useRef<Animated.CompositeAnimation | null>(null);
+  const startIdle = () => {
+    if (!idle) return;
+    const ease = Easing.inOut(Easing.sin);
+    const leg = (v: Animated.Value, to: number, ms: number) =>
+      Animated.timing(v, {
+        toValue: to,
+        duration: ms,
+        easing: ease,
+        useNativeDriver: true,
+      });
+    idleLoop.current = Animated.loop(
+      Animated.parallel([
+        Animated.sequence([leg(tx, 0.5, 2400), leg(tx, -0.5, 4800), leg(tx, 0, 2400)]),
+        Animated.sequence([leg(ty, -0.35, 1200), leg(ty, 0.35, 2400), leg(ty, -0.35, 2400), leg(ty, 0.35, 2400), leg(ty, 0, 1200)]),
+      ])
+    );
+    idleLoop.current.start();
+  };
+  useEffect(() => {
+    startIdle();
+    return () => idleLoop.current?.stop();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [idle]);
+
+  const aim = (pageX: number, pageY: number) => {
+    const { w, h } = sizeRef.current;
+    if (!w || !h) return;
+    tx.setValue(Math.max(-1, Math.min(1, ((pageX - origin.current.x) / w) * 2 - 1)));
+    ty.setValue(Math.max(-1, Math.min(1, ((pageY - origin.current.y) / h) * 2 - 1)));
+  };
+
+  const release = (tapped: boolean) => {
+    touching.current = false;
+    if (tapped && !moved.current) onPressRef.current?.();
+    Animated.parallel([
+      Animated.spring(tx, {
+        toValue: 0,
+        ...motion.gentle,
+        useNativeDriver: true,
+      }),
+      Animated.spring(ty, {
+        toValue: 0,
+        ...motion.gentle,
+        useNativeDriver: true,
+      }),
+      Animated.spring(press, {
+        toValue: 0,
+        ...motion.gentle,
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (finished && !touching.current) startIdle();
+    });
+  };
+  // Read the latest onPress at release time, so the responder never has to be rebuilt mid-gesture.
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
+  const releaseRef = useRef(release);
+  releaseRef.current = release;
+
+  const responder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabledRef.current,
+        // Only a real drag takes the touch from a button inside the card — a tap's tiny jitter must not.
+        onMoveShouldSetPanResponder: (_e, g) => !disabledRef.current && Math.abs(g.dx) + Math.abs(g.dy) > 6,
+        // Let a parent ScrollView take over scrolls that start on the card (on Android the native
+        // scroll view can only do that when the card doesn't block it).
+        onPanResponderTerminationRequest: () => true,
+        onShouldBlockNativeResponder: () => false,
+        onPanResponderGrant: (e) => {
+          touching.current = true;
+          moved.current = false;
+          idleLoop.current?.stop();
+          const { pageX, pageY, locationX, locationY } = e.nativeEvent;
+          // locationX is relative to the touched child, so measure the card itself and correct
+          // once the measurement arrives.
+          origin.current = { x: pageX - locationX, y: pageY - locationY };
+          viewRef.current?.measure((_x, _y, _w, _h, px, py) => {
+            if (typeof px === 'number' && typeof py === 'number') origin.current = { x: px, y: py };
+          });
+          aim(pageX, pageY);
+          Animated.spring(press, {
+            toValue: 1,
+            ...motion.snappy,
+            useNativeDriver: true,
+          }).start();
+        },
+        onPanResponderMove: (e, g) => {
+          if (Math.abs(g.dx) + Math.abs(g.dy) > 6) moved.current = true;
+          aim(e.nativeEvent.pageX, e.nativeEvent.pageY);
+        },
+        onPanResponderRelease: () => releaseRef.current(true),
+        onPanResponderTerminate: () => releaseRef.current(false),
+        // React Native grants before asking the current responder to let go; when a child keeps its
+        // gesture (e.g. a ticket stub being torn), the grant is rejected and no release follows.
+        onPanResponderReject: () => releaseRef.current(false),
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (width !== size.w || height !== size.h) setSize({ w: width, h: height });
+  };
+
+  const rotateY = tx.interpolate({
+    inputRange: [-1, 1],
+    outputRange: [`${-maxTilt}deg`, `${maxTilt}deg`],
+  });
+  const rotateX = ty.interpolate({
+    inputRange: [-1, 1],
+    outputRange: [`${maxTilt}deg`, `${-maxTilt}deg`],
+  });
+  const scale = press.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, pressScale],
+  });
+
+  const ctx = useMemo(() => ({ tx, ty, press, width: size.w, height: size.h }), [tx, ty, press, size.w, size.h]);
+  const drift = Math.min(10, size.w * 0.03);
+  // The plate sits well inside the outline — far enough that it never shows through a notch or a
+  // see-through corner, even at full tilt; the shadow offset does the downward shift.
+  const body = shadowRect ?? { x: 0, y: 0, width: size.w, height: size.h };
+  const inset = {
+    x: Math.max(18, body.width * 0.08),
+    y: Math.max(20, body.height * 0.08),
+  };
+
+  const reflection = glare !== 'none' && size.w ? <Reflection variant={glare} w={size.w} h={size.h} tx={tx} ty={ty} press={press} idle={idle} /> : null;
+
+  return (
+    <View style={style} onLayout={onLayout}>
+      {/* Shadow plate: hidden under the card, its soft shadow drifts away from the light as the
+          card leans, and spreads when the card lifts. */}
+      {shadow && size.w ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.plate,
+            {
+              ...(shadowRect
+                ? { left: body.x + inset.x, top: body.y + inset.y, width: Math.max(0, body.width - 2 * inset.x), height: Math.max(0, body.height - 2 * inset.y) }
+                : { left: inset.x, right: inset.x, top: inset.y, bottom: inset.y }),
+              borderRadius: radius,
+              opacity: press.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.75, 1],
+              }),
+              transform: [
+                {
+                  translateX: tx.interpolate({
+                    inputRange: [-1, 1],
+                    outputRange: [drift, -drift],
+                  }),
+                },
+                {
+                  scale: press.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [1, 1.035],
+                  }),
+                },
+                { scaleX: shadowScaleX ?? 1 },
+              ],
+            },
+          ]}
+        />
+      ) : null}
+      {/* The card sits in its own (non-collapsing) layer: iOS intersects sibling layers in 3D, so a
+          tilted card next to the flat shadow plate would be sliced by it along a diagonal. */}
+      {/* Android draws siblings by elevation, so the wrapper (not the card inside it) carries the
+          elevation that keeps it above the plate; with no background it casts no shadow itself. */}
+      <View collapsable={false} style={{ elevation: shadow ? 15 : 0 }}>
+        <Animated.View
+          ref={viewRef}
+          {...responder.panHandlers}
+          accessible={!!onPress || !!accessibilityLabel}
+          accessibilityRole={onPress ? 'button' : undefined}
+          accessibilityLabel={accessibilityLabel}
+          // Screen readers activate the card through an action, not synthesized touches.
+          accessibilityActions={onPress ? [{ name: 'activate' }] : undefined}
+          onAccessibilityAction={(e) => {
+            if (e.nativeEvent.actionName === 'activate') onPressRef.current?.();
+          }}
+          // elevation (no background → no extra shadow) keeps the card above its shadow plate on Android.
+          style={{
+            borderRadius: radius,
+            elevation: shadow ? 15 : 0,
+            transform: [{ perspective }, { rotateX }, { rotateY }, { scale }],
+          }}
+        >
+          <View style={[styles.clip, { borderRadius: radius }]}>
+            {image ? (
+              <>
+                <Image alt="" source={image} style={StyleSheet.absoluteFill} resizeMode="cover" accessibilityIgnoresInvertColors />
+                {shade > 0 ? (
+                  <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} preserveAspectRatio="none" viewBox="0 0 1 1">
+                    <Defs>
+                      <LinearGradient id={`tilt-shade-${Math.round(shade * 100)}`} x1="0" y1="0" x2="0" y2="1">
+                        <Stop offset="0.35" stopColor="#000" stopOpacity={0} />
+                        <Stop offset="1" stopColor="#000" stopOpacity={shade} />
+                      </LinearGradient>
+                    </Defs>
+                    <Rect width="1" height="1" fill={`url(#tilt-shade-${Math.round(shade * 100)})`} />
+                  </Svg>
+                ) : null}
+              </>
+            ) : null}
+            <Ctx.Provider value={ctx}>{children}</Ctx.Provider>
+            {reflection && !glareClip ? reflection : null}
+            {reflection && glareClip
+              ? glareClip.map((r, i) => (
+                  // One window per rect; each holds the full-card reflection shifted back into place.
+                  <View key={i} pointerEvents="none" style={[styles.window, { left: r.x, top: r.y, width: r.width, height: r.height }]}>
+                    <View
+                      style={{
+                        position: 'absolute',
+                        left: -r.x,
+                        top: -r.y,
+                        width: size.w,
+                        height: size.h,
+                      }}
+                    >
+                      {reflection}
+                    </View>
+                  </View>
+                ))
+              : null}
+          </View>
+        </Animated.View>
+      </View>
+    </View>
+  );
+}
+
+/**
+ * Content that floats above (or sinks below) a `TiltCard`'s surface: as the card tilts, a layer
+ * slides further the higher it floats, and lifts a little when the card is pressed.
+ */
+export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error('TiltLayer must be inside TiltCard');
+  const d = depth * 14;
+  return (
+    <Animated.View
+      pointerEvents="box-none"
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          transform: [
+            {
+              translateX: ctx.tx.interpolate({
+                inputRange: [-1, 1],
+                outputRange: [-d, d],
+              }),
+            },
+            {
+              translateY: ctx.ty.interpolate({
+                inputRange: [-1, 1],
+                outputRange: [-d, d],
+              }),
+            },
+            {
+              scale: ctx.press.interpolate({
+                inputRange: [0, 1],
+                outputRange: [1, 1 + Math.max(0, depth) * 0.035],
+              }),
+            },
+          ],
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+export interface TiltFoilProps {
+  children?: React.ReactNode;
+  /** Corner radius (default 8). */
+  radius?: number;
+  /** Base metal under the rainbow (default silver). */
+  base?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A holographic foil patch — a seal, a sticker, a security strip — whose rainbow shifts as the
+ * surrounding TiltCard leans. Outside a TiltCard it shows a still foil.
+ */
+export function TiltFoil({ children, radius = 8, base = '#d7dbe2', style }: TiltFoilProps) {
+  const ctx = useContext(Ctx);
+  const [size, setSize] = useState({ w: 0, h: 0 });
+  const S = Math.max(size.w, size.h) * 3.2;
+  const travel = Math.max(size.w, size.h) * 0.9;
+  return (
+    <View
+      onLayout={(e) => {
+        const { width, height } = e.nativeEvent.layout;
+        if (width !== size.w || height !== size.h) setSize({ w: width, h: height });
+      }}
+      style={[{ borderRadius: radius, overflow: 'hidden', backgroundColor: base }, style]}
+    >
+      {size.w ? (
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            width: PAINT,
+            height: PAINT,
+            left: (size.w - PAINT) / 2,
+            top: (size.h - PAINT) / 2,
+            transform: [
+              {
+                translateX: ctx
+                  ? ctx.tx.interpolate({
+                      inputRange: [-1, 1],
+                      outputRange: [travel, -travel],
+                    })
+                  : 0,
+              },
+              {
+                translateY: ctx
+                  ? ctx.ty.interpolate({
+                      inputRange: [-1, 1],
+                      outputRange: [travel * 0.6, -travel * 0.6],
+                    })
+                  : 0,
+              },
+              { scale: S / PAINT },
+            ],
+          }}
+        >
+          <HoloPaint strength={0.85} />
+        </Animated.View>
+      ) : null}
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  plate: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#000',
+    shadowColor: '#000',
+    shadowOpacity: 0.45,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 16 },
+    elevation: 14,
+  },
+  clip: { overflow: 'hidden' },
+  window: { position: 'absolute', overflow: 'hidden' },
+});