@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/HolographicCard.d.mts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { useImage } from '@shopify/react-native-skia';
+
+/** Available foil color preset names */
+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 */
+declare const FOIL_PRESETS: Record<FoilPreset, string[]>;
+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;
+    /** 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.
+ */
+declare function HolographicCard({ source, width, height, borderRadius, enableTilt, intensity, onPress, style, foilPreset, foilColors, maxTiltDegrees, tiltSensitivity, sheenSpread, tiltAnimationDuration, perspective, blendMode, }: HolographicCardProps): React.JSX.Element;
+
+export { FOIL_PRESETS, type FoilPreset, HolographicCard, type HolographicCardProps };

package/dist/HolographicCard.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { useImage } from '@shopify/react-native-skia';
+
+/** Available foil color preset names */
+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 */
+declare const FOIL_PRESETS: Record<FoilPreset, string[]>;
+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;
+    /** 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.
+ */
+declare function HolographicCard({ source, width, height, borderRadius, enableTilt, intensity, onPress, style, foilPreset, foilColors, maxTiltDegrees, tiltSensitivity, sheenSpread, tiltAnimationDuration, perspective, blendMode, }: HolographicCardProps): React.JSX.Element;
+
+export { FOIL_PRESETS, type FoilPreset, HolographicCard, type HolographicCardProps };

package/dist/HolographicCard.js

@@ -0,0 +1,316 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var reactNativeSkia = require('@shopify/react-native-skia');
+var Animated = require('react-native-reanimated');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var SPRINGS = {
+  /** Tight, premium press feel — Buttons, Toggle, Tabs triggers. */
+  pressIn: { stiffness: 600, damping: 35, mass: 0.8 },
+  pressOut: { stiffness: 280, damping: 22, mass: 0.8 }};
+({
+  /** Material-style ease-out — natural deceleration for state changes. */
+  standard: Animated.Easing.bezier(0.2, 0, 0, 1),
+  /** Strong ease-out for expanding surfaces (Accordion open). */
+  expand: Animated.Easing.bezier(0.23, 1, 0.32, 1),
+  /** Quick ease-in for collapsing. */
+  collapse: Animated.Easing.in(Animated.Easing.ease)
+});
+var PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98};
+function useHover() {
+  const [hovered, setHovered] = React.useState(false);
+  const onMouseEnter = React.useCallback(() => setHovered(true), []);
+  const onMouseLeave = React.useCallback(() => setHovered(false), []);
+  if (reactNative.Platform.OS !== "web") {
+    return { hovered: false, hoverHandlers: {} };
+  }
+  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } };
+}
+
+// src/utils/usePressScale.ts
+function usePressScale({
+  pressScale = PRESS_SCALE.button,
+  hoverScale = 1.02,
+  pressInSpring = SPRINGS.pressIn,
+  pressOutSpring = SPRINGS.pressOut,
+  disabled = false
+} = {}) {
+  const scale = Animated.useSharedValue(1);
+  const { hovered, hoverHandlers } = useHover();
+  const onPressIn = React.useCallback(() => {
+    if (disabled) return;
+    scale.value = Animated.withSpring(pressScale, pressInSpring);
+  }, [disabled, pressScale, pressInSpring, scale]);
+  const onPressOut = React.useCallback(() => {
+    if (disabled) return;
+    scale.value = Animated.withSpring(1, pressOutSpring);
+  }, [disabled, pressOutSpring, scale]);
+  const hoverActive = reactNative.Platform.OS === "web" && hovered && hoverScale !== 1 && !disabled;
+  const animatedStyle = Animated.useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value * (hoverActive ? hoverScale : 1) }
+    ]
+  }));
+  return {
+    animatedStyle,
+    onPressIn,
+    onPressOut,
+    hoverHandlers
+  };
+}
+var _haptics = null;
+var _hapticsLoaded = false;
+async function getHaptics() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
+  }
+  return _haptics;
+}
+var _pulsar = null;
+var _pulsarChecked = false;
+var _pulsarAvailable = false;
+function isPulsarNativeRegistered() {
+  try {
+    const g = globalThis;
+    if (typeof g.__turboModuleProxy === "function") {
+      return g.__turboModuleProxy("RNPulsar") != null;
+    }
+    return reactNative.NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_pulsarChecked) {
+    _pulsarChecked = true;
+    try {
+      if (isPulsarNativeRegistered()) {
+        _pulsar = __require("react-native-pulsar");
+        _pulsarAvailable = true;
+      }
+    } catch {
+      _pulsar = null;
+      _pulsarAvailable = false;
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null;
+}
+function impactLight() {
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Light);
+    } else {
+      getPulsar()?.Presets.System.impactLight();
+    }
+  });
+}
+
+// src/tokens.ts
+var RADIUS = {
+  md: 14};
+
+// src/components/HolographicCard/HolographicCard.tsx
+var FOIL_PRESETS = {
+  // 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)"
+  ]
+};
+var DEFAULT_FOIL_COLORS = FOIL_PRESETS.rainbow;
+var DEFAULT_TILT_DEG = 10;
+var DEFAULT_NORM_FACTOR = Math.PI / 6;
+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"
+}) {
+  const h = height ?? width * 1.4;
+  const image = reactNativeSkia.useImage(source ?? null);
+  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(2e3, perspective));
+  const resolvedFoilColors = React.useMemo(() => {
+    if (foilColors && foilColors.length >= 2) return foilColors;
+    return FOIL_PRESETS[foilPreset] ?? DEFAULT_FOIL_COLORS;
+  }, [foilColors, foilPreset]);
+  const normFactor = DEFAULT_NORM_FACTOR / clampedSensitivity;
+  const tiltX = Animated.useSharedValue(0);
+  const tiltY = Animated.useSharedValue(0);
+  React.useEffect(() => {
+    if (!enableTilt || reactNative.Platform.OS === "web") return;
+    let remove;
+    let cancelled = false;
+    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 = Animated.withTiming(nx, { duration: tiltAnimationDuration });
+        tiltY.value = Animated.withTiming(ny, { duration: tiltAnimationDuration });
+      });
+      remove = () => sub.remove();
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+      remove?.();
+    };
+  }, [enableTilt, tiltX, tiltY, normFactor, tiltAnimationDuration]);
+  const { animatedStyle: pressStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    disabled: !onPress
+  });
+  const tiltStyle = Animated.useAnimatedStyle(() => ({
+    transform: [
+      { perspective: clampedPerspective },
+      { rotateX: `${-tiltY.value * clampedTilt}deg` },
+      { rotateY: `${tiltX.value * clampedTilt}deg` }
+    ]
+  }));
+  const start = Animated.useDerivedValue(() => reactNativeSkia.vec(width * (0.5 - tiltX.value * clampedSpread), h * (0.5 - tiltY.value * clampedSpread)));
+  const end = Animated.useDerivedValue(() => reactNativeSkia.vec(width * (0.5 + tiltX.value * clampedSpread), h * (0.5 + tiltY.value * clampedSpread)));
+  const rrct = { x: 0, y: 0, width, height: h };
+  const canvas = /* @__PURE__ */ React__default.default.createElement(reactNativeSkia.Canvas, { style: { width, height: h } }, image ? /* @__PURE__ */ React__default.default.createElement(reactNativeSkia.Group, { clip: { rect: rrct, rx: borderRadius, ry: borderRadius } }, /* @__PURE__ */ React__default.default.createElement(reactNativeSkia.Image, { image, x: 0, y: 0, width, height: h, fit: "cover" })) : null, /* @__PURE__ */ React__default.default.createElement(reactNativeSkia.RoundedRect, { x: 0, y: 0, width, height: h, r: borderRadius, opacity: intensity, blendMode }, /* @__PURE__ */ React__default.default.createElement(reactNativeSkia.LinearGradient, { start, end, colors: resolvedFoilColors })));
+  const card = /* @__PURE__ */ React__default.default.createElement(Animated__default.default.View, { style: [{ width, height: h }, tiltStyle, style] }, canvas);
+  if (!onPress) return card;
+  return /* @__PURE__ */ React__default.default.createElement(Animated__default.default.View, { style: pressStyle }, /* @__PURE__ */ React__default.default.createElement(
+    reactNative.TouchableOpacity,
+    {
+      onPress: () => {
+        impactLight();
+        onPress();
+      },
+      onPressIn,
+      onPressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      accessibilityRole: "imagebutton",
+      ...hoverHandlers,
+      style: styles.touch
+    },
+    card
+  ));
+}
+var styles = reactNative.StyleSheet.create({
+  touch: {
+    alignSelf: "flex-start"
+  }
+});
+
+exports.FOIL_PRESETS = FOIL_PRESETS;
+exports.HolographicCard = HolographicCard;

package/dist/HolographicCard.mjs

@@ -0,0 +1,191 @@
+import { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import './chunk-Y6FXYEAI.mjs';
+import React, { useMemo, useEffect } from 'react';
+import { StyleSheet, Platform, TouchableOpacity } from 'react-native';
+import { useImage, vec, Canvas, Group, Image, RoundedRect, LinearGradient } from '@shopify/react-native-skia';
+import Animated, { useSharedValue, withTiming, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
+
+var FOIL_PRESETS = {
+  // 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)"
+  ]
+};
+var DEFAULT_FOIL_COLORS = FOIL_PRESETS.rainbow;
+var DEFAULT_TILT_DEG = 10;
+var DEFAULT_NORM_FACTOR = Math.PI / 6;
+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"
+}) {
+  const h = height ?? width * 1.4;
+  const image = useImage(source ?? null);
+  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(2e3, perspective));
+  const resolvedFoilColors = useMemo(() => {
+    if (foilColors && foilColors.length >= 2) return foilColors;
+    return FOIL_PRESETS[foilPreset] ?? DEFAULT_FOIL_COLORS;
+  }, [foilColors, foilPreset]);
+  const normFactor = DEFAULT_NORM_FACTOR / clampedSensitivity;
+  const tiltX = useSharedValue(0);
+  const tiltY = useSharedValue(0);
+  useEffect(() => {
+    if (!enableTilt || Platform.OS === "web") return;
+    let remove;
+    let cancelled = false;
+    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(() => {
+    });
+    return () => {
+      cancelled = true;
+      remove?.();
+    };
+  }, [enableTilt, tiltX, tiltY, normFactor, tiltAnimationDuration]);
+  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` }
+    ]
+  }));
+  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 = /* @__PURE__ */ React.createElement(Canvas, { style: { width, height: h } }, image ? /* @__PURE__ */ React.createElement(Group, { clip: { rect: rrct, rx: borderRadius, ry: borderRadius } }, /* @__PURE__ */ React.createElement(Image, { image, x: 0, y: 0, width, height: h, fit: "cover" })) : null, /* @__PURE__ */ React.createElement(RoundedRect, { x: 0, y: 0, width, height: h, r: borderRadius, opacity: intensity, blendMode }, /* @__PURE__ */ React.createElement(LinearGradient, { start, end, colors: resolvedFoilColors })));
+  const card = /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width, height: h }, tiltStyle, style] }, canvas);
+  if (!onPress) return card;
+  return /* @__PURE__ */ React.createElement(Animated.View, { style: pressStyle }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => {
+        impactLight();
+        onPress();
+      },
+      onPressIn,
+      onPressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      accessibilityRole: "imagebutton",
+      ...hoverHandlers,
+      style: styles.touch
+    },
+    card
+  ));
+}
+var styles = StyleSheet.create({
+  touch: {
+    alignSelf: "flex-start"
+  }
+});
+
+export { FOIL_PRESETS, HolographicCard };

package/dist/IconButton.d.mts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+interface IconButtonProps {
+    iconName?: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    loading?: boolean;
+    /**
+     * Badge overlay. `true` shows a dot. A number shows a count (capped at 99).
+     * The dot/count appears top-right of the button.
+     */
+    badge?: boolean | number;
+    disabled?: boolean;
+    style?: ViewStyle;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+declare function IconButtonBase({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, accessibilityLabel, accessibilityHint, }: IconButtonProps): React.JSX.Element;
+declare const IconButton: React.MemoExoticComponent<typeof IconButtonBase>;
+
+export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant };

package/dist/IconButton.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+interface IconButtonProps {
+    iconName?: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    loading?: boolean;
+    /**
+     * Badge overlay. `true` shows a dot. A number shows a count (capped at 99).
+     * The dot/count appears top-right of the button.
+     */
+    badge?: boolean | number;
+    disabled?: boolean;
+    style?: ViewStyle;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+declare function IconButtonBase({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, accessibilityLabel, accessibilityHint, }: IconButtonProps): React.JSX.Element;
+declare const IconButton: React.MemoExoticComponent<typeof IconButtonBase>;
+
+export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant };