cnnative-ui 1.0.0

package/src/premium/magic/ripple.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+  withDelay,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+
+export interface RippleProps extends ViewProps {
+  color?: string;
+  numRipples?: number;
+}
+
+export const Ripple = React.forwardRef<React.ElementRef<typeof View>, RippleProps>(
+  ({ className, color = 'rgba(0, 0, 0, 0.1)', numRipples = 3, style, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn('items-center justify-center overflow-hidden', className)}
+        style={style}
+        {...props}
+      >
+        {Array.from({ length: numRipples }).map((_, i) => (
+          <RippleCircle key={i} delay={i * 1000} color={color} />
+        ))}
+      </View>
+    );
+  }
+);
+Ripple.displayName = 'Ripple';
+
+const RippleCircle = ({ delay, color }: { delay: number; color: string }) => {
+  const scale = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    scale.value = withDelay(
+      delay,
+      withRepeat(withTiming(4, { duration: 3000, easing: Easing.out(Easing.ease) }), -1, false)
+    );
+    opacity.value = withDelay(
+      delay,
+      withRepeat(withTiming(0, { duration: 3000, easing: Easing.out(Easing.ease) }), -1, false)
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: 'absolute',
+          width: 100,
+          height: 100,
+          borderRadius: 50,
+          backgroundColor: color,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+};

package/src/premium/magic/shimmer.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, type ViewProps, type DimensionValue } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+  interpolate,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+
+export interface ShimmerProps extends ViewProps {
+  duration?: number;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  borderRadius?: number;
+}
+
+export const Shimmer = React.forwardRef<React.ElementRef<typeof View>, ShimmerProps>(
+  ({ className, duration = 1500, width = '100%', height = 20, borderRadius = 8, style, ...props }, ref) => {
+    const animatedValue = useSharedValue(0);
+
+    useEffect(() => {
+      animatedValue.value = withRepeat(
+        withTiming(1, { duration, easing: Easing.linear }),
+        -1,
+        false
+      );
+    }, [duration]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const translateX = interpolate(animatedValue.value, [0, 1], [-500, 500]); // Rough estimate, ideally measure width
+      return {
+        transform: [{ translateX }],
+      };
+    });
+
+    return (
+      <View
+        ref={ref}
+        style={[{ width, height, borderRadius, backgroundColor: '#E2E8F0', overflow: 'hidden' }, style]}
+        className={className}
+        {...props}
+      >
+        <Animated.View style={[StyleSheet.absoluteFill, animatedStyle, { width: 1000 }]}>
+          <LinearGradient
+            colors={['transparent', 'rgba(255,255,255,0.6)', 'transparent']}
+            start={{ x: 0, y: 0.5 }}
+            end={{ x: 1, y: 0.5 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+      </View>
+    );
+  }
+);
+Shimmer.displayName = 'Shimmer';

package/src/premium/magic/shiny-button.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import { View, Pressable, StyleSheet, type PressableProps, type GestureResponderEvent } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+  interpolate,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useHaptics } from '../../hooks/use-haptics';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface ShinyButtonProps extends PressableProps {
+  label: string;
+  className?: string;
+}
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const ShinyButton = React.forwardRef<React.ElementRef<typeof Pressable>, ShinyButtonProps>(
+  ({ className, label, style, onPress, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+    const animatedValue = useSharedValue(0);
+
+    useEffect(() => {
+      animatedValue.value = withRepeat(
+        withTiming(1, { duration: 3000, easing: Easing.linear }),
+        -1,
+        false
+      );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const translateX = interpolate(animatedValue.value, [0, 1], [-200, 200]);
+      return {
+        transform: [{ translateX }],
+      };
+    });
+
+    return (
+      <AnimatedPressable
+        ref={ref as any}
+        onPress={(e: GestureResponderEvent) => {
+          triggerHaptic('light');
+          onPress?.(e);
+        }}
+        className={cn('relative overflow-hidden rounded-full bg-primary px-6 py-3 shadow-md', className)}
+        style={style}
+        {...props}
+      >
+        <Text className="text-center font-semibold text-primary-foreground">{label}</Text>
+        
+        {/* Shine Effect */}
+        <Animated.View style={[StyleSheet.absoluteFill, animatedStyle, { width: 100, opacity: 0.3 }]}>
+          <LinearGradient
+            colors={['transparent', 'rgba(255,255,255,1)', 'transparent']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+      </AnimatedPressable>
+    );
+  }
+);
+ShinyButton.displayName = 'ShinyButton';

package/src/premium/mobile/biometric-button.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { View, type ViewProps, ActivityIndicator } from 'react-native';
+import * as LocalAuthentication from 'expo-local-authentication';
+import { HapticPressable } from './haptic-pressable';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+import { Fingerprint, ScanFace } from 'lucide-react-native'; // Assuming these exist or substitute with standard icons
+
+export interface BiometricButtonProps extends ViewProps {
+  onSuccess: () => void;
+  onError?: (error: Error) => void;
+  promptMessage?: string;
+  fallbackLabel?: string;
+}
+
+export const BiometricButton = React.forwardRef<React.ElementRef<typeof View>, BiometricButtonProps>(
+  ({ className, onSuccess, onError, promptMessage = 'Authenticate to continue', fallbackLabel = 'Use Passcode', ...props }, ref) => {
+    const [isAuthenticating, setIsAuthenticating] = useState(false);
+    const [biometricType, setBiometricType] = useState<LocalAuthentication.AuthenticationType | null>(null);
+
+    React.useEffect(() => {
+      (async () => {
+        const hasHardware = await LocalAuthentication.hasHardwareAsync();
+        const isEnrolled = await LocalAuthentication.isEnrolledAsync();
+        if (hasHardware && isEnrolled) {
+          const types = await LocalAuthentication.supportedAuthenticationTypesAsync();
+          if (types.includes(LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION)) {
+            setBiometricType(LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION);
+          } else if (types.includes(LocalAuthentication.AuthenticationType.FINGERPRINT)) {
+            setBiometricType(LocalAuthentication.AuthenticationType.FINGERPRINT);
+          }
+        }
+      })();
+    }, []);
+
+    const handleAuthenticate = async () => {
+      try {
+        setIsAuthenticating(true);
+        const result = await LocalAuthentication.authenticateAsync({
+          promptMessage,
+          fallbackLabel,
+          disableDeviceFallback: false,
+        });
+
+        if (result.success) {
+          onSuccess();
+        } else {
+          onError?.(new Error(result.error || 'Authentication failed'));
+        }
+      } catch (err: any) {
+        onError?.(err);
+      } finally {
+        setIsAuthenticating(false);
+      }
+    };
+
+    if (!biometricType) return null; // Don't render if biometrics aren't available
+
+    return (
+      <View ref={ref} className={cn('items-center justify-center', className)} {...props}>
+        <HapticPressable
+          onPress={handleAuthenticate}
+          disabled={isAuthenticating}
+          hapticStyle="medium"
+          className="h-16 w-16 items-center justify-center rounded-full bg-primary/10 transition-colors active:bg-primary/20"
+        >
+          {isAuthenticating ? (
+            <ActivityIndicator color="hsl(var(--primary))" />
+          ) : biometricType === LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION ? (
+            <ScanFace size={32} className="text-primary" />
+          ) : (
+            <Fingerprint size={32} className="text-primary" />
+          )}
+        </HapticPressable>
+        <Text className="mt-2 text-xs font-medium text-muted-foreground">
+          {biometricType === LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION ? 'Face ID' : 'Touch ID'}
+        </Text>
+      </View>
+    );
+  }
+);
+BiometricButton.displayName = 'BiometricButton';

package/src/premium/mobile/bottom-tab-bar.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { View, Pressable, type ViewProps, Dimensions } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring, interpolateColor, useSharedValue } from 'react-native-reanimated';
+import { useHaptics } from '../../hooks/use-haptics';
+import { useSpring } from '../../hooks/use-spring';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+import { useThemeContext } from '../../context/theme-context';
+
+export interface BottomTabBarItem {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+export interface BottomTabBarProps extends ViewProps {
+  items: BottomTabBarItem[];
+  activeKey: string;
+  onTabPress: (key: string) => void;
+}
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export const BottomTabBar = React.forwardRef<React.ElementRef<typeof View>, BottomTabBarProps>(
+  ({ className, items, activeKey, onTabPress, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+    const springConfig = useSpring('snappy');
+    const { theme } = useThemeContext();
+    const [containerWidth, setContainerWidth] = useState(SCREEN_WIDTH);
+
+    const activeIndex = Math.max(0, items.findIndex(i => i.key === activeKey));
+    const tabWidth = containerWidth / items.length;
+
+    const indicatorStyle = useAnimatedStyle(() => {
+      return {
+        width: withSpring(tabWidth - 24, springConfig),
+        transform: [{ translateX: withSpring(activeIndex * tabWidth + 12, springConfig) }],
+      };
+    }, [activeIndex, tabWidth, springConfig]);
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          'flex-row items-center w-full bg-background border-t border-border pb-safe pt-2',
+          className
+        )}
+        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+        {...props}
+      >
+        <Animated.View
+          className="absolute top-2 h-10 rounded-full bg-primary/10"
+          style={indicatorStyle}
+        />
+        
+        {items.map((item, index) => {
+          const isActive = index === activeIndex;
+
+          return (
+            <Pressable
+              key={item.key}
+              onPress={() => {
+                triggerHaptic('selection');
+                onTabPress(item.key);
+              }}
+              className="flex-1 items-center justify-center h-12"
+            >
+              <View className={cn("mb-1", isActive ? "text-primary" : "text-muted-foreground")}>
+                {item.icon}
+              </View>
+              <Text className={cn("text-[10px] font-medium", isActive ? "text-primary" : "text-muted-foreground")}>
+                {item.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  }
+);
+BottomTabBar.displayName = 'BottomTabBar';

package/src/premium/mobile/fab.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring, useSharedValue } from 'react-native-reanimated';
+import { useHaptics } from '../../hooks/use-haptics';
+import { useSpring } from '../../hooks/use-spring';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface FabProps extends PressableProps {
+  icon: React.ReactNode;
+  label?: string;
+  isExpanded?: boolean;
+  position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const Fab = React.forwardRef<React.ElementRef<typeof Pressable>, FabProps>(
+  ({ className, icon, label, isExpanded = false, position = 'bottom-right', onPress, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+    const springConfig = useSpring('bouncy');
+    const pressed = useSharedValue(0);
+
+    const handlePressIn = () => {
+      pressed.value = 1;
+    };
+    
+    const handlePressOut = () => {
+      pressed.value = 0;
+    };
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ scale: withSpring(pressed.value ? 0.9 : 1, springConfig) }],
+      };
+    });
+
+    const getPositionClasses = () => {
+      switch (position) {
+        case 'bottom-left': return 'absolute bottom-6 left-6';
+        case 'bottom-center': return 'absolute bottom-6 self-center';
+        case 'bottom-right':
+        default: return 'absolute bottom-6 right-6';
+      }
+    };
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onPress={(e) => {
+          triggerHaptic('light');
+          onPress?.(e);
+        }}
+        className={cn(
+          'flex-row items-center justify-center rounded-full bg-primary p-4 shadow-lg active:bg-primary/90',
+          getPositionClasses(),
+          className
+        )}
+        style={animatedStyle}
+        {...props}
+      >
+        {icon}
+        {label && isExpanded && (
+          <Text className="ml-2 font-semibold text-primary-foreground">
+            {label}
+          </Text>
+        )}
+      </AnimatedPressable>
+    );
+  }
+);
+Fab.displayName = 'Fab';

package/src/premium/mobile/haptic-pressable.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { useHaptics } from '../../hooks/use-haptics';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+
+export interface HapticPressableProps extends PressableProps {
+  hapticStyle?: 'light' | 'medium' | 'heavy' | 'selection' | 'success' | 'warning' | 'error';
+  scaleOnPress?: boolean;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const HapticPressable = React.forwardRef<React.ElementRef<typeof Pressable>, HapticPressableProps>(
+  ({ onPress, onPressIn, onPressOut, hapticStyle = 'light', scaleOnPress = true, style, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+    const scale = useSharedValue(1);
+
+    const handlePress = (e: any) => {
+      triggerHaptic(hapticStyle);
+      onPress?.(e);
+    };
+
+    const handlePressIn = (e: any) => {
+      if (scaleOnPress) {
+        scale.value = withSpring(0.96, { damping: 15, stiffness: 300 });
+      }
+      onPressIn?.(e);
+    };
+
+    const handlePressOut = (e: any) => {
+      if (scaleOnPress) {
+        scale.value = withSpring(1, { damping: 15, stiffness: 300 });
+      }
+      onPressOut?.(e);
+    };
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scale.value }],
+    }));
+
+    return (
+      <AnimatedPressable
+        ref={ref as any}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        style={[scaleOnPress ? animatedStyle : undefined, style]}
+        {...props}
+      />
+    );
+  }
+);
+HapticPressable.displayName = 'HapticPressable';

package/src/premium/mobile/notification-badge.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withSequence,
+  withDelay,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface NotificationBadgeProps extends ViewProps {
+  count?: number;
+  maxCount?: number;
+  showZero?: boolean;
+}
+
+export const NotificationBadge = React.forwardRef<React.ElementRef<typeof View>, NotificationBadgeProps>(
+  ({ className, count = 0, maxCount = 99, showZero = false, style, ...props }, ref) => {
+    const scale = useSharedValue(0);
+    const displayCount = count > maxCount ? `${maxCount}+` : count.toString();
+    const shouldShow = count > 0 || showZero;
+
+    useEffect(() => {
+      if (shouldShow) {
+        // Pop in animation
+        scale.value = withSequence(
+          withSpring(1.2, { damping: 12, stiffness: 200 }),
+          withSpring(1, { damping: 15, stiffness: 300 })
+        );
+      } else {
+        // Shrink out
+        scale.value = withSpring(0);
+      }
+    }, [count, shouldShow]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scale.value }],
+    }));
+
+    if (!shouldShow && scale.value === 0) return null;
+
+    return (
+      <Animated.View
+        ref={ref as any}
+        style={[animatedStyle, style]}
+        className={cn(
+          'absolute -right-2 -top-2 z-10 flex min-h-[20px] min-w-[20px] items-center justify-center rounded-full bg-destructive px-1 ring-2 ring-background',
+          className
+        )}
+        {...props}
+      >
+        <Text className="text-[10px] font-bold text-destructive-foreground leading-none">
+          {displayCount}
+        </Text>
+      </Animated.View>
+    );
+  }
+);
+NotificationBadge.displayName = 'NotificationBadge';

package/src/premium/mobile/pull-to-refresh.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View, type ViewProps, type NativeSyntheticEvent, type NativeScrollEvent, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolate,
+  Extrapolate,
+  runOnJS,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { RefreshCw } from 'lucide-react-native';
+import { useHaptics } from '../../hooks/use-haptics';
+import { useSpring } from '../../hooks/use-spring';
+
+export interface PullToRefreshProps extends ViewProps {
+  isRefreshing: boolean;
+  onRefresh: () => void;
+  /** Pass the Y scroll offset from your ScrollView/FlatList here */
+  scrollY: SharedValue<number>;
+  threshold?: number;
+}
+
+export const PullToRefresh = ({ isRefreshing, onRefresh, scrollY, threshold = 80, ...props }: PullToRefreshProps) => {
+  const triggerHaptic = useHaptics();
+  const hasTriggeredHaptic = useSharedValue(false);
+  const rotation = useSharedValue(0);
+
+  React.useEffect(() => {
+    if (isRefreshing) {
+      rotation.value = withTiming(rotation.value + 360, { duration: 1000 }, () => {
+        // Simple loop if still refreshing
+        if (isRefreshing) rotation.value += 360; 
+      });
+    }
+  }, [isRefreshing]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const pullDistance = Math.max(0, -scrollY.value);
+    
+    // Trigger haptic once when crossing threshold
+    if (pullDistance >= threshold && !hasTriggeredHaptic.value && !isRefreshing) {
+      hasTriggeredHaptic.value = true;
+      runOnJS(triggerHaptic)('success');
+    } else if (pullDistance < threshold) {
+      hasTriggeredHaptic.value = false;
+    }
+
+    const scale = interpolate(pullDistance, [0, threshold], [0.5, 1], Extrapolate.CLAMP);
+    const opacity = interpolate(pullDistance, [0, threshold / 2, threshold], [0, 0.5, 1], Extrapolate.CLAMP);
+
+    return {
+      opacity: isRefreshing ? 1 : opacity,
+      transform: [
+        { scale: isRefreshing ? 1 : scale },
+        { translateY: isRefreshing ? threshold / 2 : Math.min(pullDistance, threshold) / 2 },
+      ],
+    };
+  });
+
+  const iconStyle = useAnimatedStyle(() => ({
+    transform: [{ rotateZ: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        { height: threshold, alignItems: 'center', justifyContent: 'center' },
+        animatedStyle,
+      ]}
+      pointerEvents="none"
+      {...props}
+    >
+      <View className="h-10 w-10 items-center justify-center rounded-full bg-background shadow-md border border-border">
+        <Animated.View style={iconStyle}>
+          <RefreshCw size={20} className="text-primary" />
+        </Animated.View>
+      </View>
+    </Animated.View>
+  );
+};
+PullToRefresh.displayName = 'PullToRefresh';

package/src/premium/mobile/scroll-header.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolate,
+  Extrapolate,
+  type SharedValue
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+
+export interface ScrollHeaderProps extends ViewProps {
+  scrollY: SharedValue<number>;
+  headerHeight?: number;
+  children: React.ReactNode;
+}
+
+export const ScrollHeader = React.forwardRef<React.ElementRef<typeof View>, ScrollHeaderProps>(
+  ({ className, scrollY, headerHeight = 100, children, style, ...props }, ref) => {
+    
+    const animatedStyle = useAnimatedStyle(() => {
+      const translateY = interpolate(
+        scrollY.value,
+        [0, headerHeight],
+        [0, -headerHeight],
+        Extrapolate.CLAMP
+      );
+      
+      const opacity = interpolate(
+        scrollY.value,
+        [0, headerHeight * 0.8],
+        [1, 0],
+        Extrapolate.CLAMP
+      );
+
+      return {
+        transform: [{ translateY }],
+        opacity,
+      };
+    });
+
+    return (
+      <Animated.View
+        ref={ref as any}
+        className={cn('absolute top-0 left-0 right-0 z-50 bg-background border-b border-border pt-safe', className)}
+        style={[{ height: headerHeight }, animatedStyle, style]}
+        {...props}
+      >
+        <View className="flex-1 justify-end pb-4 px-4">
+          {children}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+ScrollHeader.displayName = 'ScrollHeader';