@retray-dev/ui-kit 12.1.0 → 13.0.0

package/dist/HolographicCard.js

@@ -4,80 +4,29 @@ var React = require('react');
 var reactNative = require('react-native');
 var reactNativeSkia = require('@shopify/react-native-skia');
 var Animated = require('react-native-reanimated');
+var pressto = require('pressto');
 
 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)
+// src/components/HolographicCard/HolographicCard.tsx
+var makePressable = (scale) => pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  return { transform: [{ scale: 1 - (1 - scale) * progress }] };
 });
-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
-  };
-}
+makePressable(0.95);
+var PressableCard = makePressable(0.98);
+makePressable(0.97);
+makePressable(0.94);
+makePressable(0.95);
 var _haptics = null;
-var _hapticsLoaded = false;
+var _loaded = false;
 async function getHaptics() {
   if (reactNative.Platform.OS === "web") return null;
-  if (!_hapticsLoaded) {
-    _hapticsLoaded = true;
+  if (!_loaded) {
+    _loaded = true;
     try {
       _haptics = await import('expo-haptics');
     } catch {
@@ -86,45 +35,8 @@ async function getHaptics() {
   }
   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();
-    }
-  });
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
 }
 
 // src/tokens.ts
@@ -133,7 +45,6 @@ var RADIUS = {
 
 // src/components/HolographicCard/HolographicCard.tsx
 var FOIL_PRESETS = {
-  // Classic holographic rainbow
   rainbow: [
     "rgba(255, 0, 128, 0.45)",
     "rgba(255, 200, 0, 0.40)",
@@ -141,7 +52,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -149,7 +59,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -157,7 +66,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -165,7 +73,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -173,7 +80,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -181,7 +87,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -189,7 +94,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -197,7 +101,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -205,7 +108,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -226,7 +128,6 @@ function HolographicCard({
   intensity = 1,
   onPress,
   style,
-  // New customization props
   foilPreset = "rainbow",
   foilColors,
   maxTiltDegrees = DEFAULT_TILT_DEG,
@@ -271,10 +172,6 @@ function HolographicCard({
       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 },
@@ -288,29 +185,22 @@ function HolographicCard({
   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,
+  return /* @__PURE__ */ React__default.default.createElement(
+    PressableCard,
     {
       onPress: () => {
         impactLight();
         onPress();
       },
-      onPressIn,
-      onPressOut,
-      activeOpacity: 1,
+      enabled: true,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
       accessibilityRole: "imagebutton",
-      ...hoverHandlers,
-      style: styles.touch
+      style: { alignSelf: "flex-start" }
     },
     card
-  ));
+  );
 }
-var styles = reactNative.StyleSheet.create({
-  touch: {
-    alignSelf: "flex-start"
-  }
-});
 
 exports.FOIL_PRESETS = FOIL_PRESETS;
 exports.HolographicCard = HolographicCard;

package/dist/HolographicCard.mjs

@@ -1,15 +1,13 @@
-import { usePressScale } from './chunk-YNROWHQJ.mjs';
-import { impactLight } from './chunk-EJ7ZPXOH.mjs';
-import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import { PressableCard } from './chunk-IFYMBOEN.mjs';
+import { impactLight } from './chunk-ARONDO7M.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 { Platform } 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)",
@@ -17,7 +15,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -25,7 +22,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -33,7 +29,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -41,7 +36,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -49,7 +43,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -57,7 +50,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -65,7 +57,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -73,7 +64,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -81,7 +71,6 @@ var FOIL_PRESETS = {
     "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)",
@@ -102,7 +91,6 @@ function HolographicCard({
   intensity = 1,
   onPress,
   style,
-  // New customization props
   foilPreset = "rainbow",
   foilColors,
   maxTiltDegrees = DEFAULT_TILT_DEG,
@@ -147,10 +135,6 @@ function HolographicCard({
       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 },
@@ -164,28 +148,21 @@ function HolographicCard({
   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,
+  return /* @__PURE__ */ React.createElement(
+    PressableCard,
     {
       onPress: () => {
         impactLight();
         onPress();
       },
-      onPressIn,
-      onPressOut,
-      activeOpacity: 1,
+      enabled: true,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
       accessibilityRole: "imagebutton",
-      ...hoverHandlers,
-      style: styles.touch
+      style: { alignSelf: "flex-start" }
     },
     card
-  ));
+  );
 }
-var styles = StyleSheet.create({
-  touch: {
-    alignSelf: "flex-start"
-  }
-});
 
 export { FOIL_PRESETS, HolographicCard };