cnnative-ui 1.0.0

package/src/premium/mobile/swipe-row.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { View, Dimensions, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated';
+import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { useHaptics } from '../../hooks/use-haptics';
+import { useSpring } from '../../hooks/use-spring';
+import { cn } from '../../lib/utils';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface SwipeRowProps extends ViewProps {
+  leftActions?: React.ReactNode;
+  rightActions?: React.ReactNode;
+  leftThreshold?: number;
+  rightThreshold?: number;
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  actionWidth?: number;
+}
+
+export const SwipeRow = React.forwardRef<React.ElementRef<typeof View>, SwipeRowProps>(
+  (
+    {
+      className,
+      children,
+      leftActions,
+      rightActions,
+      leftThreshold = SCREEN_WIDTH * 0.3,
+      rightThreshold = SCREEN_WIDTH * 0.3,
+      onSwipeLeft,
+      onSwipeRight,
+      actionWidth = 80,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const translateX = useSharedValue(0);
+    const triggerHaptic = useHaptics();
+    const springConfig = useSpring('snappy');
+
+    const handleRelease = (currentX: number) => {
+      'worklet';
+      if (rightActions && currentX < -rightThreshold) {
+        if (onSwipeLeft) runOnJS(onSwipeLeft)();
+        runOnJS(triggerHaptic)('success');
+        translateX.value = withSpring(-actionWidth, springConfig);
+      } else if (leftActions && currentX > leftThreshold) {
+        if (onSwipeRight) runOnJS(onSwipeRight)();
+        runOnJS(triggerHaptic)('success');
+        translateX.value = withSpring(actionWidth, springConfig);
+      } else {
+        translateX.value = withSpring(0, springConfig);
+      }
+    };
+
+    const panGestureEvent = (event: PanGestureHandlerGestureEvent) => {
+      'worklet';
+      const translationX = event.nativeEvent.translationX;
+      
+      // Limit swipe directions based on available actions
+      if (!leftActions && translationX > 0) return;
+      if (!rightActions && translationX < 0) return;
+
+      // Apply resistance when swiping past threshold
+      let newX = translationX;
+      if (translationX > leftThreshold) {
+        newX = leftThreshold + (translationX - leftThreshold) * 0.3;
+      } else if (translationX < -rightThreshold) {
+        newX = -rightThreshold + (translationX + rightThreshold) * 0.3;
+      }
+      
+      translateX.value = newX;
+
+      if (event.nativeEvent.state === 5 || event.nativeEvent.state === 3) {
+        handleRelease(translationX);
+      }
+    };
+
+    const rStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ translateX: translateX.value }],
+      };
+    });
+
+    const leftActionStyle = useAnimatedStyle(() => {
+      return {
+        opacity: translateX.value > 0 ? 1 : 0,
+        transform: [{ translateX: (translateX.value - actionWidth) / 2 }],
+      };
+    });
+
+    const rightActionStyle = useAnimatedStyle(() => {
+      return {
+        opacity: translateX.value < 0 ? 1 : 0,
+        transform: [{ translateX: (translateX.value + actionWidth) / 2 }],
+      };
+    });
+
+    return (
+      <View ref={ref} className={cn('relative w-full overflow-hidden', className)} style={style} {...props}>
+        {/* Background Actions Layer */}
+        <View className="absolute inset-0 flex-row justify-between">
+          <Animated.View style={[{ width: actionWidth, height: '100%' }, leftActionStyle]}>
+            {leftActions}
+          </Animated.View>
+          <Animated.View style={[{ width: actionWidth, height: '100%' }, rightActionStyle]}>
+            {rightActions}
+          </Animated.View>
+        </View>
+
+        {/* Foreground Content Layer */}
+        <PanGestureHandler onGestureEvent={panGestureEvent as any}>
+          <Animated.View style={[rStyle, { width: '100%' }]} className="bg-background">
+            {children}
+          </Animated.View>
+        </PanGestureHandler>
+      </View>
+    );
+  }
+);
+SwipeRow.displayName = 'SwipeRow';

package/src/premium/mobile/swipeable-card-stack.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { View, Dimensions, StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolate,
+  Extrapolate,
+  runOnJS,
+} from 'react-native-reanimated';
+import { useHaptics } from '../../hooks/use-haptics';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const SWIPE_THRESHOLD = SCREEN_WIDTH * 0.3;
+
+export interface SwipeableCardStackProps {
+  data: any[];
+  renderCard: (item: any, index: number) => React.ReactNode;
+  onSwipedLeft?: (item: any) => void;
+  onSwipedRight?: (item: any) => void;
+  onSwipedAll?: () => void;
+}
+
+export const SwipeableCardStack = ({ data, renderCard, onSwipedLeft, onSwipedRight, onSwipedAll }: SwipeableCardStackProps) => {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const triggerHaptic = useHaptics();
+
+  const handleSwipeComplete = (direction: 'left' | 'right') => {
+    const item = data[currentIndex];
+    if (direction === 'left') onSwipedLeft?.(item);
+    if (direction === 'right') onSwipedRight?.(item);
+    
+    setCurrentIndex((prev) => {
+      const next = prev + 1;
+      if (next >= data.length) {
+        onSwipedAll?.();
+      }
+      return next;
+    });
+    
+    translateX.value = 0;
+    translateY.value = 0;
+  };
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      translateX.value = event.translationX;
+      translateY.value = event.translationY;
+    })
+    .onEnd((event) => {
+      if (Math.abs(event.translationX) > SWIPE_THRESHOLD) {
+        // Swiped off screen
+        const isRight = event.translationX > 0;
+        runOnJS(triggerHaptic)('success');
+        translateX.value = withSpring(isRight ? SCREEN_WIDTH : -SCREEN_WIDTH, { velocity: event.velocityX }, () => {
+          runOnJS(handleSwipeComplete)(isRight ? 'right' : 'left');
+        });
+      } else {
+        // Return to center
+        runOnJS(triggerHaptic)('light');
+        translateX.value = withSpring(0);
+        translateY.value = withSpring(0);
+      }
+    });
+
+  const animatedCardStyle = useAnimatedStyle(() => {
+    const rotate = interpolate(translateX.value, [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], [-10, 0, 10], Extrapolate.CLAMP);
+    return {
+      transform: [
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+        { rotateZ: `${rotate}deg` },
+      ],
+    };
+  });
+
+  if (currentIndex >= data.length) {
+    return null; // or a finished state
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Next Card (Background) */}
+      {currentIndex + 1 < data.length && (
+        <Animated.View style={[styles.card, { transform: [{ scale: 0.95 }, { translateY: 20 }] }]}>
+          {renderCard(data[currentIndex + 1], currentIndex + 1)}
+        </Animated.View>
+      )}
+
+      {/* Current Card (Foreground) */}
+      <GestureDetector gesture={panGesture}>
+        <Animated.View style={[styles.card, animatedCardStyle]}>
+          {renderCard(data[currentIndex], currentIndex)}
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    position: 'absolute',
+    width: '90%',
+    height: '70%',
+    borderRadius: 20,
+    backgroundColor: 'white',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.1,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+});

package/src/premium/motion/blur-fade.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { useSpring } from '../../hooks/use-spring';
+
+export interface BlurFadeProps extends ViewProps {
+  delay?: number;
+  duration?: number;
+  yOffset?: number;
+  blurAmount?: number;
+  inView?: boolean;
+}
+
+export const BlurFade = React.forwardRef<React.ElementRef<typeof View>, BlurFadeProps>(
+  ({ className, children, delay = 0, duration = 400, yOffset = 24, blurAmount = 10, inView = true, style, ...props }, ref) => {
+    const opacity = useSharedValue(0);
+    const translateY = useSharedValue(yOffset);
+    // Note: True blur animation requires complex shader setups in React Native or Expo Blur
+    // We simulate the effect with opacity + transform which works incredibly well
+    
+    const springConfig = useSpring('smooth');
+
+    useEffect(() => {
+      if (inView) {
+        opacity.value = withDelay(delay, withTiming(1, { duration }));
+        translateY.value = withDelay(delay, withSpring(0, springConfig));
+      } else {
+        opacity.value = withTiming(0, { duration });
+        translateY.value = withSpring(yOffset, springConfig);
+      }
+    }, [inView, delay, duration, yOffset, springConfig]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }],
+    }));
+
+    return (
+      <Animated.View ref={ref as any} style={[animatedStyle, style]} className={className} {...props}>
+        {children}
+      </Animated.View>
+    );
+  }
+);
+BlurFade.displayName = 'BlurFade';

package/src/premium/motion/fade-up.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
+
+export interface FadeUpProps extends ViewProps {
+  delay?: number;
+  duration?: number;
+  distance?: number;
+  children: React.ReactNode;
+}
+
+export const FadeUp = React.forwardRef<React.ElementRef<typeof View>, FadeUpProps>(
+  ({ className, delay = 0, duration = 500, distance = 20, children, style, ...props }, ref) => {
+    const opacity = useSharedValue(0);
+    const translateY = useSharedValue(distance);
+
+    useEffect(() => {
+      opacity.value = withDelay(delay, withTiming(1, { duration }));
+      translateY.value = withDelay(delay, withSpring(0, { damping: 20, stiffness: 100 }));
+    }, [delay, duration, distance]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }],
+    }));
+
+    return (
+      <Animated.View ref={ref as any} style={[animatedStyle, style]} className={className} {...props}>
+        {children}
+      </Animated.View>
+    );
+  }
+);
+FadeUp.displayName = 'FadeUp';

package/src/premium/motion/marquee.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { View, type ViewProps, Dimensions } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+
+export interface MarqueeProps extends ViewProps {
+  duration?: number;
+  direction?: 'left' | 'right';
+  reverse?: boolean;
+}
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export const Marquee = React.forwardRef<React.ElementRef<typeof View>, MarqueeProps>(
+  ({ className, children, duration = 10000, direction = 'left', reverse = false, ...props }, ref) => {
+    const [contentWidth, setContentWidth] = useState(0);
+    const translateX = useSharedValue(0);
+
+    const actualDirection = reverse ? (direction === 'left' ? 'right' : 'left') : direction;
+
+    useEffect(() => {
+      if (contentWidth > 0) {
+        // Reset translation
+        translateX.value = actualDirection === 'left' ? 0 : -contentWidth;
+
+        translateX.value = withRepeat(
+          withTiming(actualDirection === 'left' ? -contentWidth : 0, {
+            duration: duration,
+            easing: Easing.linear,
+          }),
+          -1, // Infinite loop
+          false // No reverse
+        );
+      }
+      return () => cancelAnimation(translateX);
+    }, [contentWidth, actualDirection, duration]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: translateX.value }],
+    }));
+
+    return (
+      <View ref={ref} className={cn('flex-row overflow-hidden w-full', className)} {...props}>
+        <Animated.View
+          style={[animatedStyle, { flexDirection: 'row' }]}
+          onLayout={(e) => setContentWidth(e.nativeEvent.layout.width)}
+        >
+          {children}
+        </Animated.View>
+        {/* Render a duplicate so it loops seamlessly */}
+        {contentWidth > 0 && (
+          <Animated.View style={[animatedStyle, { flexDirection: 'row', position: 'absolute', left: contentWidth }]}>
+            {children}
+          </Animated.View>
+        )}
+      </View>
+    );
+  }
+);
+Marquee.displayName = 'Marquee';

package/src/premium/motion/pulsating-button.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import { View, Pressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  withSpring,
+  Easing,
+} from 'react-native-reanimated';
+import { useThemeContext } from '../../context/theme-context';
+import { useHaptics } from '../../hooks/use-haptics';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface PulsatingButtonProps extends Omit<PressableProps, 'style'> {
+  label: string;
+  pulseColor?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const PulsatingButton = React.forwardRef<React.ElementRef<typeof Pressable>, PulsatingButtonProps>(
+  ({ className, label, pulseColor, onPress, style, ...props }, ref) => {
+    const { theme } = useThemeContext();
+    const triggerHaptic = useHaptics();
+    const pulseScale = useSharedValue(1);
+    const pulseOpacity = useSharedValue(0.5);
+    const pressScale = useSharedValue(1);
+
+    const actualPulseColor = pulseColor || theme.primary.DEFAULT;
+
+    useEffect(() => {
+      pulseScale.value = withRepeat(
+        withTiming(1.5, { duration: 1500, easing: Easing.out(Easing.ease) }),
+        -1,
+        false
+      );
+      pulseOpacity.value = withRepeat(
+        withTiming(0, { duration: 1500, easing: Easing.out(Easing.ease) }),
+        -1,
+        false
+      );
+    }, []);
+
+    const ringStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: pulseScale.value }],
+      opacity: pulseOpacity.value,
+    }));
+
+    const buttonStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: pressScale.value }],
+    }));
+
+    const handlePressIn = () => {
+      pressScale.value = withSpring(0.95);
+    };
+
+    const handlePressOut = () => {
+      pressScale.value = withSpring(1);
+    };
+
+    return (
+      <View className={cn('relative items-center justify-center', className)} style={style}>
+        {/* Pulsating Ring */}
+        <Animated.View
+          style={[
+            { backgroundColor: actualPulseColor },
+            ringStyle,
+          ]}
+          className="absolute inset-0 rounded-full"
+        />
+
+        {/* Actual Button */}
+        <AnimatedPressable
+          ref={ref as any}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          onPress={(e) => {
+            triggerHaptic('selection');
+            onPress?.(e);
+          }}
+          className="rounded-full bg-primary px-6 py-3 shadow-lg flex-row items-center justify-center z-10"
+          style={buttonStyle}
+          {...props}
+        >
+          <Text className="text-primary-foreground font-semibold text-base">{label}</Text>
+        </AnimatedPressable>
+      </View>
+    );
+  }
+);
+PulsatingButton.displayName = 'PulsatingButton';

package/src/premium/motion/slide-in.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withDelay, withSpring } from 'react-native-reanimated';
+
+export interface SlideInProps extends ViewProps {
+  delay?: number;
+  direction?: 'left' | 'right' | 'up' | 'down';
+  distance?: number;
+  children: React.ReactNode;
+}
+
+export const SlideIn = React.forwardRef<React.ElementRef<typeof View>, SlideInProps>(
+  ({ className, delay = 0, direction = 'left', distance = 50, children, style, ...props }, ref) => {
+    const translation = useSharedValue(distance);
+    
+    // Determine the axis and sign
+    const isX = direction === 'left' || direction === 'right';
+    const initialTranslate = (direction === 'left' || direction === 'up') ? distance : -distance;
+
+    useEffect(() => {
+      translation.value = initialTranslate;
+      translation.value = withDelay(delay, withSpring(0, { damping: 20, stiffness: 150 }));
+    }, [delay, direction, distance]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [
+        isX ? { translateX: translation.value } : { translateY: translation.value }
+      ],
+    }));
+
+    return (
+      <Animated.View ref={ref as any} style={[animatedStyle, style]} className={className} {...props}>
+        {children}
+      </Animated.View>
+    );
+  }
+);
+SlideIn.displayName = 'SlideIn';

package/src/premium/motion/stagger-children.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { FadeUp } from './fade-up';
+
+export interface StaggerChildrenProps extends ViewProps {
+  staggerDelay?: number;
+  initialDelay?: number;
+  children: React.ReactNode;
+}
+
+export const StaggerChildren = React.forwardRef<React.ElementRef<typeof View>, StaggerChildrenProps>(
+  ({ className, staggerDelay = 100, initialDelay = 0, children, ...props }, ref) => {
+    
+    // We expect children to be an array of React Elements
+    const childrenArray = React.Children.toArray(children);
+
+    return (
+      <View ref={ref} className={className} {...props}>
+        {childrenArray.map((child, index) => (
+          <FadeUp key={index} delay={initialDelay + index * staggerDelay}>
+            {child}
+          </FadeUp>
+        ))}
+      </View>
+    );
+  }
+);
+StaggerChildren.displayName = 'StaggerChildren';

package/src/premium/motion/typing-text.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Text } from '../../components/typography';
+import { cn } from '../../lib/utils';
+
+export interface TypingTextProps extends ViewProps {
+  text: string;
+  typingSpeed?: number;
+  cursor?: string;
+  cursorBlinkSpeed?: number;
+}
+
+export const TypingText = React.forwardRef<React.ElementRef<typeof View>, TypingTextProps>(
+  ({ className, text, typingSpeed = 50, cursor = '|', cursorBlinkSpeed = 500, style, ...props }, ref) => {
+    const [displayedText, setDisplayedText] = useState('');
+    const [showCursor, setShowCursor] = useState(true);
+    const [isTyping, setIsTyping] = useState(true);
+
+    useEffect(() => {
+      let i = 0;
+      setIsTyping(true);
+      setDisplayedText('');
+
+      const typingInterval = setInterval(() => {
+        if (i < text.length) {
+          setDisplayedText((prev) => prev + text.charAt(i));
+          i++;
+        } else {
+          clearInterval(typingInterval);
+          setIsTyping(false);
+        }
+      }, typingSpeed);
+
+      return () => clearInterval(typingInterval);
+    }, [text, typingSpeed]);
+
+    useEffect(() => {
+      const cursorInterval = setInterval(() => {
+        setShowCursor((prev) => !prev);
+      }, cursorBlinkSpeed);
+
+      return () => clearInterval(cursorInterval);
+    }, [cursorBlinkSpeed]);
+
+    return (
+      <View ref={ref} className={cn('flex-row items-center', className)} style={style} {...props}>
+        <Text className="text-foreground">{displayedText}</Text>
+        <Text className={cn('text-foreground opacity-100', !showCursor && 'opacity-0')}>
+          {cursor}
+        </Text>
+      </View>
+    );
+  }
+);
+TypingText.displayName = 'TypingText';

package/src/premium/motion/word-pull-up.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Text } from '../../components/typography';
+import { FadeUp } from './fade-up';
+import { cn } from '../../lib/utils';
+
+export interface WordPullUpProps extends ViewProps {
+  text: string;
+  delay?: number;
+  wordDelay?: number;
+}
+
+export const WordPullUp = React.forwardRef<React.ElementRef<typeof View>, WordPullUpProps>(
+  ({ className, text, delay = 0, wordDelay = 100, style, ...props }, ref) => {
+    const words = text.split(' ');
+
+    return (
+      <View ref={ref} className={cn('flex-row flex-wrap', className)} style={style} {...props}>
+        {words.map((word, i) => (
+          <FadeUp
+            key={i}
+            delay={delay + i * wordDelay}
+            duration={500}
+            distance={20}
+            className="mr-1 mb-1"
+          >
+            <Text className="text-foreground font-medium text-lg">{word}</Text>
+          </FadeUp>
+        ))}
+      </View>
+    );
+  }
+);
+WordPullUp.displayName = 'WordPullUp';