@expokit/cli 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,205 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { motion } from '@/lib/kit';
+
+export type FlipDirection = 'horizontal' | 'vertical';
+export type FlipTrigger = 'press' | 'none';
+
+export interface FlipCardProps {
+  /** Shown first. Sets the card's size — the back fills the same box. */
+  front: React.ReactNode;
+  back: React.ReactNode;
+  /** Controlled side: `true` shows the back. */
+  flipped?: boolean;
+  /** Uncontrolled initial side (default false). */
+  defaultFlipped?: boolean;
+  onFlip?: (flipped: boolean) => void;
+  /** Spin around the vertical axis (left/right) or the horizontal one (top/bottom). */
+  direction?: FlipDirection;
+  /** `press` flips on tap; `none` leaves it to `flipped` (e.g. a button elsewhere). */
+  trigger?: FlipTrigger;
+  /** Depth of the 3D effect — smaller is more dramatic (default 1000). */
+  perspective?: number;
+  /** Corner radius of both faces (default 20). */
+  radius?: number;
+  /** Soft shadow that narrows as the card turns edge-on (default true). */
+  shadow?: boolean;
+  /**
+   * Drive the turn from outside (0 = front, 1 = back) — from `useFlipProgress`, when something else
+   * must follow the flip, like a TiltCard's shadow. `flipped` still sets the side for accessibility.
+   */
+  progress?: Animated.Value;
+  /** Accessibility label; the hint says which side is showing. */
+  accessibilityLabel?: string;
+  /** Screen-reader hints (defaults in English). */
+  labels?: { toBack?: string; toFront?: string };
+  style?: StyleProp<ViewStyle>;
+}
+
+// How wide the shadow under a flipping card is through the turn: roughly cos θ, always a little
+// narrower than the card so a flat shadow plate never shows past it, and none at all edge-on.
+const SQUEEZE = {
+  inputRange: [0, 0.25, 0.45, 0.5, 0.55, 0.75, 1],
+  outputRange: [1, 0.6, 0.12, 0, 0.12, 0.6, 1],
+};
+
+/**
+ * The flip as an animated 0 → 1 value, springing like FlipCard's own, plus `shadowScaleX` — pass
+ * `progress` to the FlipCard and `shadowScaleX` to a TiltCard wrapped round it, so the tilt
+ * shadow narrows as the card turns edge-on instead of showing as a dark box behind it.
+ */
+export function useFlipProgress(flipped: boolean) {
+  const progress = useRef(new Animated.Value(flipped ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.spring(progress, { toValue: flipped ? 1 : 0, ...motion.gentle, useNativeDriver: true }).start();
+  }, [flipped, progress]);
+  const shadowScaleX = useMemo(() => progress.interpolate(SQUEEZE), [progress]);
+  return { progress, shadowScaleX };
+}
+
+/**
+ * A card with two faces that flips in 3D on tap — it lifts toward you half-way through and its
+ * shadow narrows as it turns edge-on, like a real card turning over. Controlled or uncontrolled.
+ */
+export function FlipCard({
+  front,
+  back,
+  flipped: flippedProp,
+  defaultFlipped = false,
+  onFlip,
+  direction = 'horizontal',
+  trigger = 'press',
+  perspective = 1000,
+  radius = 20,
+  shadow = true,
+  progress,
+  accessibilityLabel,
+  labels,
+  style,
+}: FlipCardProps) {
+  const controlled = flippedProp !== undefined;
+  const [own, setOwn] = useState(defaultFlipped);
+  const flipped = controlled ? flippedProp : own;
+
+  const turn = useFlipProgress(flipped).progress;
+  const p = progress ?? turn;
+
+  const toggle = () => {
+    const next = !flipped;
+    if (!controlled) setOwn(next);
+    onFlip?.(next);
+  };
+
+  const horizontal = direction === 'horizontal';
+  const axis = horizontal ? 'rotateY' : 'rotateX';
+  const frontTurn = p.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  });
+  const backTurn = p.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['180deg', '360deg'],
+  });
+  // Lift toward the viewer half-way through the turn.
+  const lift = p.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [1, 1.05, 1],
+  });
+  // Swap faces exactly at 90° — backfaceVisibility alone flickers on some Android versions.
+  const frontOpacity = p.interpolate({
+    inputRange: [0, 0.499, 0.5, 1],
+    outputRange: [1, 1, 0, 0],
+  });
+  const backOpacity = p.interpolate({
+    inputRange: [0, 0.499, 0.5, 1],
+    outputRange: [0, 0, 1, 1],
+  });
+
+  const face = (turn: Animated.AnimatedInterpolation<string>, opacity: Animated.AnimatedInterpolation<number>) =>
+    ({
+      borderRadius: radius,
+      opacity,
+      transform: [{ perspective }, { [axis]: turn } as never, { scale: lift }],
+    }) as Animated.WithAnimatedObject<ViewStyle>;
+
+  // The shadow squeezes along the turning axis as the card goes edge-on (see SQUEEZE) and fades a little.
+  const squeeze = p.interpolate(SQUEEZE);
+
+  const body = (
+    <View>
+      {shadow ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.plate,
+            {
+              borderRadius: radius,
+              opacity: p.interpolate({
+                inputRange: [0, 0.5, 1],
+                outputRange: [1, 0.4, 1],
+              }),
+              transform: [{ scale: 0.9 }, horizontal ? { scaleX: squeeze } : { scaleY: squeeze }],
+            },
+          ]}
+        />
+      ) : null}
+      {/* Faces live in their own (non-collapsing) layer: iOS intersects sibling layers in 3D, so a
+          turning face next to the flat shadow plate would be sliced by it. */}
+      {/* On Android the wrapper carries the elevation that keeps the faces above the plate; the faces
+          get none, since a face turned in 3D would cast a warped shadow wedge below the card. */}
+      <View collapsable={false} style={{ elevation: shadow ? 23 : 0 }}>
+        {/* The hidden face stays mounted (for the turn) but is hidden from screen readers. */}
+        <Animated.View
+          style={[styles.face, face(frontTurn, frontOpacity)]}
+          pointerEvents={flipped ? 'none' : 'auto'}
+          accessibilityElementsHidden={flipped}
+          importantForAccessibility={flipped ? 'no-hide-descendants' : 'auto'}
+        >
+          {front}
+        </Animated.View>
+        <Animated.View
+          style={[styles.face, styles.back, face(backTurn, backOpacity)]}
+          pointerEvents={flipped ? 'auto' : 'none'}
+          accessibilityElementsHidden={!flipped}
+          importantForAccessibility={flipped ? 'auto' : 'no-hide-descendants'}
+        >
+          {back}
+        </Animated.View>
+      </View>
+    </View>
+  );
+
+  if (trigger === 'none') return <View style={style}>{body}</View>;
+  return (
+    <Pressable
+      onPress={toggle}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={flipped ? (labels?.toFront ?? 'Showing the back. Tap to flip to the front.') : (labels?.toBack ?? 'Tap to flip to the back.')}
+      accessibilityState={{ expanded: flipped }}
+      style={style}
+    >
+      {body}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  face: { overflow: 'hidden', backfaceVisibility: 'hidden' },
+  back: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+  plate: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#000',
+    shadowColor: '#000',
+    shadowOpacity: 0.4,
+    shadowRadius: 20,
+    shadowOffset: { width: 0, height: 14 },
+    // High enough that Android's shadow spreads past the inset plate (iOS uses the shadow* props).
+    elevation: 22,
+  },
+});

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

@@ -0,0 +1,385 @@
+import React, { useState } from 'react';
+import {
+  Image,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, ClipPath, Defs, G, Line, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
+
+import { FlipCard, useFlipProgress } from '@/components/ui/flip-card';
+import { TiltCard } from '@/components/ui/tilt-card';
+
+export type PaymentCardBrand = 'visa' | 'mastercard' | 'amex' | 'rupay' | 'none';
+
+export interface PaymentCardProps {
+  /** Card number — spaces are fine. Shown masked to the last 4 unless `masked` is false. */
+  number: string;
+  /** Cardholder name. */
+  name: string;
+  /** Expiry, e.g. "09/29". */
+  expiry: string;
+  /** Shown on the back. */
+  cvv?: string;
+  brand?: PaymentCardBrand;
+  /** Issuer name, top-left. */
+  bank?: string;
+  /** Small label top-right, e.g. "Debit", "World Elite". */
+  label?: string;
+  /** Card art — a photo or texture (`require('./card.jpg')` or `{ uri }`). Default: brushed graphite. */
+  image?: ImageSourcePropType;
+  /** `light` text for dark art (default), `dark` text for pale art. */
+  tone?: 'light' | 'dark';
+  /** EMV chip finish. */
+  chip?: 'gold' | 'silver';
+  /** Show only the last 4 digits (default true). */
+  masked?: boolean;
+  /** Controlled side: true shows the back. */
+  flipped?: boolean;
+  defaultFlipped?: boolean;
+  onFlip?: (flipped: boolean) => void;
+  /** Tilt toward the finger (default true). */
+  tilt?: boolean;
+  /**
+   * Tap flips the card (default true). `false` makes it a still card — no tilt, no taps — for use
+   * inside something tappable (e.g. a CardStack); a controlled `flipped` still turns it.
+   */
+  flippable?: boolean;
+  /** Frozen cards are frosted over with a label and ignore taps. */
+  frozen?: boolean;
+  /** Corner radius (default 16 — a real card's corner at phone size). */
+  radius?: number;
+  /** Every built-in string, for translation ({bank} and {last4} are filled in). */
+  labels?: PaymentCardLabels;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface PaymentCardLabels {
+  cardholder?: string;
+  validThru?: string;
+  frozen?: string;
+  /** Fine print on the back (default "This card is the property of {bank} …"). */
+  legal?: string;
+  /** Default "Card ending {last4} · tap to turn back". */
+  back?: string;
+  /** Screen-reader label (default "{bank} card ending {last4}"). */
+  accessibility?: string;
+}
+
+/**
+ * "4821 7590 1234 0317" → groups of 4 (Amex 4-6-5, 14-digit Diners 4-6-4, 19-digit cards get a
+ * fifth group). Masking hides every digit but the last four, whatever the length. Keeps • placeholders.
+ */
+function formatNumber(number: string, brand: PaymentCardBrand, masked: boolean) {
+  const raw = number.replace(/[^\d•]/g, '');
+  const shown = masked ? [...raw].map((c, i) => (i < raw.length - 4 ? '•' : c)).join('') : raw;
+  const groups = brand === 'amex' ? [4, 6, 5] : raw.length === 14 ? [4, 6, 4] : [4, 4, 4, 4];
+  const out: string[] = [];
+  let i = 0;
+  for (const g of groups) {
+    const part = shown.slice(i, i + g);
+    if (!part) break;
+    out.push(part);
+    i += g;
+  }
+  if (i < shown.length) out.push(shown.slice(i));
+  return out.join('  ');
+}
+
+function BrandMark({ brand, ink }: { brand: PaymentCardBrand; ink: string }) {
+  if (brand === 'none') return null;
+  if (brand === 'mastercard') {
+    // Red and yellow circles with the true orange overlap.
+    return (
+      <Svg width={46} height={28} viewBox="0 0 46 28">
+        <Defs>
+          <ClipPath id="mc-left">
+            <Circle cx={15} cy={14} r={13} />
+          </ClipPath>
+        </Defs>
+        <Circle cx={15} cy={14} r={13} fill="#EB001B" />
+        <Circle cx={31} cy={14} r={13} fill="#F79E1B" />
+        <G clipPath="url(#mc-left)">
+          <Circle cx={31} cy={14} r={13} fill="#FF5F00" />
+        </G>
+      </Svg>
+    );
+  }
+  if (brand === 'visa') {
+    return <Text style={[styles.visa, { color: ink }]}>VISA</Text>;
+  }
+  if (brand === 'amex') {
+    return (
+      <View style={[styles.amex, { borderColor: ink }]}>
+        <Text style={{ color: ink, fontSize: 9, fontWeight: '800', letterSpacing: 0.6, lineHeight: 10 }}>AMERICAN</Text>
+        <Text style={{ color: ink, fontSize: 9, fontWeight: '800', letterSpacing: 0.6, lineHeight: 10 }}>EXPRESS</Text>
+      </View>
+    );
+  }
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+      <Text style={{ color: ink, fontSize: 18, fontWeight: '800', fontStyle: 'italic', letterSpacing: -0.3 }}>RuPay</Text>
+      <Svg width={14} height={16} viewBox="0 0 14 16">
+        <Path d="M2 1 L10 8 L2 15 Z" fill="#F47920" />
+        <Path d="M6 1 L14 8 L6 15 Z" fill="#0B8E36" />
+      </Svg>
+    </View>
+  );
+}
+
+/** EMV chip with contact pads, in gold or silver. */
+function Chip({ finish }: { finish: 'gold' | 'silver' }) {
+  const [a, b, c] = finish === 'gold' ? ['#f3dc9d', '#d1ab5c', '#9c7a34'] : ['#f1f2f4', '#c4c7cd', '#8d9199'];
+  return (
+    <Svg width={42} height={32} viewBox="0 0 42 32">
+      <Defs>
+        <LinearGradient id={`chip-${finish}`} x1="0" y1="0" x2="1" y2="1">
+          <Stop offset="0" stopColor={a} />
+          <Stop offset="0.55" stopColor={b} />
+          <Stop offset="1" stopColor={c} />
+        </LinearGradient>
+      </Defs>
+      <Rect x={0.5} y={0.5} width={41} height={31} rx={6} fill={`url(#chip-${finish})`} stroke={c} strokeOpacity={0.6} />
+      <Path d="M0 11 H14 Q17 11 17 14 V18 Q17 21 14 21 H0 M42 11 H28 Q25 11 25 14 V18 Q25 21 28 21 H42 M14 0 V11 M28 0 V11 M14 32 V21 M28 32 V21" stroke={c} strokeOpacity={0.7} strokeWidth={1} fill="none" />
+    </Svg>
+  );
+}
+
+function Contactless({ ink }: { ink: string }) {
+  return (
+    <Svg width={20} height={24} viewBox="0 0 20 24">
+      {[5, 9, 13].map((r, k) => (
+        <Path key={r} d={`M${3 + k * 4} ${12 - r * 0.72} A ${r} ${r} 0 0 1 ${3 + k * 4} ${12 + r * 0.72}`} stroke={ink} strokeOpacity={0.85} strokeWidth={1.8} fill="none" strokeLinecap="round" />
+      ))}
+    </Svg>
+  );
+}
+
+/** Brushed graphite, used when no `image` is given. */
+function Graphite() {
+  return (
+    <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} preserveAspectRatio="none" viewBox="0 0 100 63">
+      <Defs>
+        <LinearGradient id="pc-graphite" x1="0" y1="0" x2="1" y2="1">
+          <Stop offset="0" stopColor="#3a3a40" />
+          <Stop offset="0.45" stopColor="#232327" />
+          <Stop offset="1" stopColor="#141416" />
+        </LinearGradient>
+      </Defs>
+      <Rect width="100" height="63" fill="url(#pc-graphite)" />
+      {Array.from({ length: 32 }, (_, i) => (
+        <Line key={i} x1="0" y1={i * 2} x2="100" y2={i * 2 + 0.6} stroke="#ffffff" strokeOpacity={i % 3 ? 0.012 : 0.025} strokeWidth={0.4} />
+      ))}
+    </Svg>
+  );
+}
+
+/** A soft darkening (mostly toward the bottom) so the text stays crisp on busy or pale art. */
+function Shade({ strength }: { strength: number }) {
+  return (
+    <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} preserveAspectRatio="none" viewBox="0 0 1 1">
+      <Defs>
+        <LinearGradient id={`pc-shade-${Math.round(strength * 100)}`} x1="0" y1="0" x2="0" y2="1">
+          {/* A whisper at the top keeps the issuer name readable on pale art; most of it is at the bottom. */}
+          <Stop offset="0" stopColor="#000" stopOpacity={strength * 0.4} />
+          <Stop offset="0.4" stopColor="#000" stopOpacity={0} />
+          <Stop offset="1" stopColor="#000" stopOpacity={strength} />
+        </LinearGradient>
+      </Defs>
+      <Rect width="1" height="1" fill={`url(#pc-shade-${Math.round(strength * 100)})`} />
+    </Svg>
+  );
+}
+
+/**
+ * A realistic bank card: card art (any photo), EMV chip, contactless mark, embossed number and
+ * the network's mark. It tilts toward your finger and flips on tap to the back — magnetic stripe,
+ * signature panel with the CVV and a hologram. Frozen state for card controls.
+ */
+export function PaymentCard({
+  number,
+  name,
+  expiry,
+  cvv,
+  brand = 'visa',
+  bank,
+  label,
+  image,
+  tone = 'light',
+  chip = 'gold',
+  masked = true,
+  flipped: flippedProp,
+  defaultFlipped = false,
+  onFlip,
+  tilt = true,
+  flippable = true,
+  frozen = false,
+  radius = 16,
+  labels,
+  style,
+}: PaymentCardProps) {
+  const controlled = flippedProp !== undefined;
+  const [own, setOwn] = useState(defaultFlipped);
+  // A frozen card always shows its front (where the frost and the label are).
+  const flipped = (controlled ? flippedProp : own) && !frozen;
+  // One flip drives both the card and the tilt shadow, so the shadow narrows as the card turns
+  // edge-on — otherwise the flat shadow plate behind it shows as a dark box mid-flip.
+  const flip = useFlipProgress(flipped);
+
+  const toggle = () => {
+    if (frozen) return;
+    if (!controlled) setOwn(!flipped);
+    onFlip?.(!flipped);
+  };
+
+  const ink = tone === 'light' ? '#ffffff' : '#141414';
+  const soft = tone === 'light' ? 'rgba(255,255,255,0.72)' : 'rgba(20,20,20,0.62)';
+  const emboss = tone === 'light' ? { textShadowColor: 'rgba(0,0,0,0.35)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 1.5 } : null;
+  const last4 = number.replace(/\D/g, '').slice(-4);
+  const fill = (t: string) => t.replace('{bank}', bank ?? 'the issuer').replace('{last4}', last4);
+  const text = {
+    cardholder: 'CARDHOLDER',
+    validThru: 'VALID THRU',
+    frozen: 'Frozen',
+    legal: 'This card is the property of {bank} and must be returned on request. Use is subject to the cardholder agreement.',
+    back: 'Card ending {last4} · tap to turn back',
+    accessibility: bank ? '{bank} card ending {last4}' : 'Card ending {last4}',
+    ...labels,
+  };
+
+  const art = (darken: number) => (
+    <>
+      {image ? <Image alt="" source={image} style={StyleSheet.absoluteFill} resizeMode="cover" accessibilityIgnoresInvertColors /> : <Graphite />}
+      {darken > 0 ? <View style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${darken})` }]} /> : null}
+    </>
+  );
+  const edge = <View pointerEvents="none" style={[StyleSheet.absoluteFill, { borderRadius: radius, borderWidth: 1, borderColor: 'rgba(255,255,255,0.16)' }]} />;
+
+  const front = (
+    <View style={[styles.face, { borderRadius: radius }]}>
+      {art(0)}
+      {tone === 'light' ? <Shade strength={image ? 0.38 : 0.2} /> : null}
+      <View style={styles.inner}>
+        <View style={styles.row}>
+          <Text style={[{ color: ink, fontSize: 16, fontWeight: '700', letterSpacing: -0.2 }, emboss]}>{bank ?? ''}</Text>
+          {label ? <Text style={[{ color: soft, fontSize: 11, fontWeight: '600', letterSpacing: 1 }, emboss]}>{label.toUpperCase()}</Text> : null}
+        </View>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+          <Chip finish={chip} />
+          <Contactless ink={ink} />
+        </View>
+        <View style={{ gap: 10 }}>
+          <Text style={[{ color: ink, fontSize: 19, fontWeight: '500', letterSpacing: 2, fontVariant: ['tabular-nums'] }, emboss]}>
+            {formatNumber(number, brand, masked)}
+          </Text>
+          <View style={[styles.row, { alignItems: 'flex-end' }]}>
+            <View style={{ flexDirection: 'row', gap: 20, flexShrink: 1 }}>
+              <View style={{ flexShrink: 1 }}>
+                <Text style={[styles.tiny, { color: soft }]}>{text.cardholder}</Text>
+                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', letterSpacing: 0.8 }, emboss]} numberOfLines={1}>
+                  {name.toUpperCase()}
+                </Text>
+              </View>
+              <View>
+                <Text style={[styles.tiny, { color: soft }]}>{text.validThru}</Text>
+                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', fontVariant: ['tabular-nums'] }, emboss]}>{expiry}</Text>
+              </View>
+            </View>
+            <BrandMark brand={brand} ink={ink} />
+          </View>
+        </View>
+      </View>
+      {frozen ? (
+        <View style={[StyleSheet.absoluteFill, styles.center, { backgroundColor: 'rgba(214,232,255,0.28)' }]}>
+          <View style={styles.frozenPill}>
+            <Text style={{ color: '#ffffff', fontSize: 13, fontWeight: '700', letterSpacing: 0.4 }}>❄︎  {text.frozen}</Text>
+          </View>
+        </View>
+      ) : null}
+      {edge}
+    </View>
+  );
+
+  const back = (
+    <View style={[styles.face, { borderRadius: radius }]}>
+      {art(0.42)}
+      <View style={styles.stripe} />
+      <View style={styles.backRow}>
+        <View style={styles.signature}>
+          <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} preserveAspectRatio="none" viewBox="0 0 100 10">
+            {Array.from({ length: 26 }, (_, i) => (
+              <Line key={i} x1={i * 4} y1={10} x2={i * 4 + 6} y2={0} stroke="#9aa3b2" strokeOpacity={0.35} strokeWidth={0.6} />
+            ))}
+          </Svg>
+        </View>
+        <View style={styles.cvv}>
+          <Text style={{ color: '#111', fontSize: 15, fontWeight: '700', fontStyle: 'italic', letterSpacing: 1.5, fontVariant: ['tabular-nums'] }}>{cvv ?? '•••'}</Text>
+        </View>
+      </View>
+      <View style={styles.backFoot}>
+        <View style={{ flex: 1, gap: 3 }}>
+          <Text style={{ color: 'rgba(255,255,255,0.78)', fontSize: 9, lineHeight: 12 }}>
+            {fill(text.legal)}
+          </Text>
+          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: 10, fontWeight: '600' }}>{fill(text.back)}</Text>
+        </View>
+        {/* Security hologram. */}
+        <Svg width={40} height={30} viewBox="0 0 40 30">
+          <Defs>
+            <LinearGradient id="pc-holo" x1="0" y1="0" x2="1" y2="1">
+              <Stop offset="0" stopColor="#c9f2ff" />
+              <Stop offset="0.3" stopColor="#f5c6ff" />
+              <Stop offset="0.6" stopColor="#fff1b8" />
+              <Stop offset="1" stopColor="#b8ffe1" />
+            </LinearGradient>
+          </Defs>
+          <Rect x={0} y={0} width={40} height={30} rx={4} fill="url(#pc-holo)" opacity={0.92} />
+          <Circle cx={20} cy={15} r={8} fill="none" stroke="#ffffff" strokeOpacity={0.7} strokeWidth={1.2} />
+        </Svg>
+      </View>
+      {edge}
+    </View>
+  );
+
+  const card = <FlipCard front={front} back={back} flipped={flipped} progress={flip.progress} trigger="none" perspective={1600} radius={radius} shadow={false} />;
+  const a11y = [fill(text.accessibility), frozen ? text.frozen : null].filter(Boolean).join(', ');
+
+  if (!flippable) {
+    // A still card: no tilt and no taps of its own, so a parent (e.g. a CardStack) gets the touch.
+    return (
+      <View accessible accessibilityLabel={a11y} style={[{ borderRadius: radius }, style]}>
+        {card}
+      </View>
+    );
+  }
+  return tilt ? (
+    <TiltCard onPress={toggle} glare="soft" maxTilt={10} radius={radius} shadowScaleX={flip.shadowScaleX} accessibilityLabel={a11y} style={style}>
+      {card}
+    </TiltCard>
+  ) : (
+    <Pressable onPress={toggle} accessibilityRole="button" accessibilityState={{ disabled: frozen }} accessibilityLabel={a11y} style={[styles.flat, { borderRadius: radius }, style]}>
+      {card}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  face: { aspectRatio: 1.586, overflow: 'hidden', backgroundColor: '#1c1c20' },
+  inner: { flex: 1, padding: 20, justifyContent: 'space-between' },
+  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  tiny: { fontSize: 8, fontWeight: '700', letterSpacing: 1.2, marginBottom: 2 },
+  visa: { fontSize: 24, fontWeight: '900', fontStyle: 'italic', letterSpacing: -0.5 },
+  amex: { borderWidth: 1.5, borderRadius: 3, paddingHorizontal: 5, paddingVertical: 3 },
+  center: { alignItems: 'center', justifyContent: 'center' },
+  frozenPill: { paddingHorizontal: 14, paddingVertical: 7, borderRadius: 999, backgroundColor: 'rgba(10,20,35,0.45)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.35)' },
+  stripe: { position: 'absolute', left: 0, right: 0, top: '13%', height: '19%', backgroundColor: '#0b0b0c' },
+  backRow: { position: 'absolute', left: 18, right: 18, top: '42%', height: '16%', flexDirection: 'row', gap: 8 },
+  signature: { flex: 1, borderRadius: 3, backgroundColor: '#eef0f4', overflow: 'hidden' },
+  cvv: { width: 58, borderRadius: 3, backgroundColor: '#ffffff', alignItems: 'center', justifyContent: 'center' },
+  backFoot: { position: 'absolute', left: 18, right: 18, bottom: 16, flexDirection: 'row', alignItems: 'flex-end', gap: 12 },
+  flat: { shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 18, shadowOffset: { width: 0, height: 10 }, elevation: 8 },
+});