cnnative-ui 1.0.0

package/src/premium/layout/floating-dock.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Pressable, type ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { useHaptics } from '../../hooks/use-haptics';
+
+export interface FloatingDockItem {
+  icon: React.ReactNode;
+  onPress: () => void;
+  label?: string;
+}
+
+export interface FloatingDockProps extends ViewProps {
+  items: FloatingDockItem[];
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const FloatingDock = React.forwardRef<React.ElementRef<typeof View>, FloatingDockProps>(
+  ({ className, items, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn('absolute bottom-8 self-center rounded-2xl bg-background/80 p-2 border border-border shadow-lg flex-row items-center gap-2', className)}
+        style={{ backdropFilter: 'blur(10px)' } as any}
+        {...props}
+      >
+        {items.map((item, index) => (
+          <DockItem key={index} item={item} />
+        ))}
+      </View>
+    );
+  }
+);
+FloatingDock.displayName = 'FloatingDock';
+
+const DockItem = ({ item }: { item: FloatingDockItem }) => {
+  const triggerHaptic = useHaptics();
+  const scale = useSharedValue(1);
+  const translateY = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }, { translateY: translateY.value }],
+  }));
+
+  return (
+    <AnimatedPressable
+      onPressIn={() => {
+        triggerHaptic('light');
+        scale.value = withSpring(1.2);
+        translateY.value = withSpring(-10);
+      }}
+      onPressOut={() => {
+        scale.value = withSpring(1);
+        translateY.value = withSpring(0);
+      }}
+      onPress={item.onPress}
+      className="h-12 w-12 items-center justify-center rounded-xl bg-accent hover:bg-accent/80 transition-colors"
+    >
+      {item.icon}
+    </AnimatedPressable>
+  );
+};

package/src/premium/layout/masonry-grid.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, ScrollView, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { FadeUp } from '../motion/fade-up';
+
+export interface MasonryGridProps extends ViewProps {
+  data: any[];
+  renderItem: (item: any, index: number) => React.ReactNode;
+  columns?: number;
+}
+
+export const MasonryGrid = React.forwardRef<React.ElementRef<typeof ScrollView>, MasonryGridProps>(
+  ({ className, data, renderItem, columns = 2, ...props }, ref) => {
+    
+    // Distribute items into columns
+    const columnsData = Array.from({ length: columns }, () => [] as any[]);
+    data.forEach((item, i) => {
+      const col = columnsData[i % columns];
+      if (col) {
+        col.push({ item, index: i });
+      }
+    });
+
+    return (
+      <ScrollView ref={ref as any} className={cn('flex-1', className)} {...props}>
+        <View className="flex-row items-start px-2 py-4 gap-2">
+          {columnsData.map((col, colIndex) => (
+            <View key={colIndex} className="flex-1 flex-col gap-2">
+              {col.map((wrapper) => (
+                <FadeUp key={wrapper.index} delay={wrapper.index * 50}>
+                  {renderItem(wrapper.item, wrapper.index)}
+                </FadeUp>
+              ))}
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    );
+  }
+);
+MasonryGrid.displayName = 'MasonryGrid';

package/src/premium/layout/parallax-scroll.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+  useAnimatedStyle,
+  interpolate,
+  Extrapolate,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+
+export interface ParallaxScrollProps {
+  headerImage: React.ReactNode;
+  headerHeight?: number;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export const ParallaxScroll = React.forwardRef<React.ElementRef<typeof Animated.ScrollView>, ParallaxScrollProps>(
+  ({ className, headerImage, headerHeight = 300, children, ...props }, ref) => {
+    const scrollY = useSharedValue(0);
+
+    const scrollHandler = useAnimatedScrollHandler({
+      onScroll: (event) => {
+        scrollY.value = event.contentOffset.y;
+      },
+    });
+
+    const headerAnimatedStyle = useAnimatedStyle(() => {
+      const translateY = interpolate(
+        scrollY.value,
+        [-headerHeight, 0, headerHeight],
+        [-headerHeight / 2, 0, headerHeight * 0.5],
+        Extrapolate.CLAMP
+      );
+      const scale = interpolate(
+        scrollY.value,
+        [-headerHeight, 0],
+        [2, 1],
+        Extrapolate.CLAMP
+      );
+
+      return {
+        transform: [{ translateY }, { scale }],
+      };
+    });
+
+    return (
+      <View className={cn('flex-1 bg-background', className)}>
+        <Animated.View style={[styles.header, { height: headerHeight }, headerAnimatedStyle]}>
+          {headerImage}
+        </Animated.View>
+        <Animated.ScrollView
+          ref={ref as any}
+          onScroll={scrollHandler}
+          scrollEventThrottle={16}
+          contentContainerStyle={{ paddingTop: headerHeight }}
+          {...props}
+        >
+          <View className="bg-background min-h-screen rounded-t-3xl -mt-6 p-6">
+            {children}
+          </View>
+        </Animated.ScrollView>
+      </View>
+    );
+  }
+);
+ParallaxScroll.displayName = 'ParallaxScroll';
+
+const styles = StyleSheet.create({
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    width: SCREEN_WIDTH,
+    overflow: 'hidden',
+  },
+});

package/src/premium/magic/animated-number.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps, type TextStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolate,
+} from 'react-native-reanimated';
+import { useSpring } from '../../hooks/use-spring';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface AnimatedNumberProps extends ViewProps {
+  value: number;
+  fontSize?: number;
+  textStyle?: TextStyle | string;
+}
+
+const NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+/**
+ * Renders a single digit column that slides up/down
+ */
+const AnimatedDigit = ({ digit, fontSize = 32, textStyle }: { digit: number, fontSize?: number, textStyle?: any }) => {
+  const translateY = useSharedValue(0);
+  const springConfig = useSpring('bouncy');
+
+  useEffect(() => {
+    translateY.value = withSpring(-digit * fontSize, springConfig);
+  }, [digit, fontSize, springConfig]);
+
+  const rStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+    };
+  });
+
+  return (
+    <View style={{ height: fontSize, overflow: 'hidden' }}>
+      <Animated.View style={rStyle}>
+        {NUMBERS.map((num) => (
+          <Text
+            key={num}
+            style={[{ height: fontSize, lineHeight: fontSize, fontSize }, typeof textStyle === 'object' ? textStyle : {}]}
+            className={cn('text-center font-bold font-mono tracking-tighter', typeof textStyle === 'string' ? textStyle : '')}
+          >
+            {num}
+          </Text>
+        ))}
+      </Animated.View>
+    </View>
+  );
+};
+
+/**
+ * A Magic UI inspired Animated Number component.
+ * Rolls the digits into place like a slot machine when the value changes.
+ */
+export const AnimatedNumber = React.forwardRef<React.ElementRef<typeof View>, AnimatedNumberProps>(
+  ({ value, fontSize = 48, textStyle, className, style, ...props }, ref) => {
+    const valueStr = Math.abs(value).toString();
+    const isNegative = value < 0;
+
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-row items-center overflow-hidden', className)}
+        style={style}
+        {...props}
+      >
+        {isNegative && (
+          <Text
+            style={[{ fontSize, lineHeight: fontSize }, typeof textStyle === 'object' ? textStyle : {}]}
+            className={cn('font-bold font-mono tracking-tighter', typeof textStyle === 'string' ? textStyle : '')}
+          >
+            -
+          </Text>
+        )}
+        {valueStr.split('').map((char, index) => {
+          if (char === '.') {
+            return (
+              <Text
+                key={`dot-${index}`}
+                style={[{ fontSize, lineHeight: fontSize }, typeof textStyle === 'object' ? textStyle : {}]}
+                className={cn('font-bold font-mono tracking-tighter', typeof textStyle === 'string' ? textStyle : '')}
+              >
+                .
+              </Text>
+            );
+          }
+          return (
+            <AnimatedDigit
+              key={`${index}-${valueStr.length}`}
+              digit={parseInt(char, 10)}
+              fontSize={fontSize}
+              textStyle={textStyle}
+            />
+          );
+        })}
+      </View>
+    );
+  }
+);
+AnimatedNumber.displayName = 'AnimatedNumber';

package/src/premium/magic/bento-grid.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface BentoGridProps extends ViewProps {}
+
+export const BentoGrid = React.forwardRef<React.ElementRef<typeof View>, BentoGridProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          'flex flex-row flex-wrap gap-4 mx-auto w-full max-w-7xl',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+BentoGrid.displayName = 'BentoGrid';
+
+export interface BentoCardProps extends ViewProps {
+  colSpan?: 1 | 2 | 3 | 4;
+}
+
+export const BentoCard = React.forwardRef<React.ElementRef<typeof View>, BentoCardProps>(
+  ({ className, colSpan = 1, children, ...props }, ref) => {
+    // Very basic mapping for flex-basis based on a 4-column desktop grid
+    // For React Native, percentage widths work best. We'll subtract the gap roughly.
+    const basisMap = {
+      1: 'basis-[23%]',
+      2: 'basis-[48%]',
+      3: 'basis-[73%]',
+      4: 'basis-[100%]',
+    };
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          'flex-1 min-w-[280px] rounded-xl border border-border bg-card shadow-sm overflow-hidden p-6',
+          basisMap[colSpan],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+BentoCard.displayName = 'BentoCard';

package/src/premium/magic/border-beam.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, type ViewProps, Dimensions } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+  interpolate,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+
+export interface BorderBeamProps extends ViewProps {
+  duration?: number;
+  color?: string;
+  size?: number;
+}
+
+export const BorderBeam = React.forwardRef<React.ElementRef<typeof View>, BorderBeamProps>(
+  ({ className, duration = 4000, color = 'hsl(var(--primary))', size = 50, style, ...props }, ref) => {
+    const perimeter = useSharedValue(0);
+
+    useEffect(() => {
+      perimeter.value = withRepeat(
+        withTiming(1, { duration, easing: Easing.linear }),
+        -1,
+        false
+      );
+    }, [duration]);
+
+    // This is a simplified border beam using a rotating gradient mask approach
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${interpolate(perimeter.value, [0, 1], [0, 360])}deg` }],
+    }));
+
+    return (
+      <View
+        ref={ref}
+        className="absolute inset-0 z-10 overflow-hidden rounded-[inherit] pointer-events-none"
+        style={style}
+        {...props}
+      >
+        <Animated.View
+          style={[
+            {
+              position: 'absolute',
+              top: '-50%',
+              left: '-50%',
+              width: '200%',
+              height: '200%',
+            },
+            animatedStyle,
+          ]}
+        >
+           {/* The beam is a conic/linear sweep. Linear works reasonably well when masked by borders. */}
+          <LinearGradient
+            colors={[color, 'transparent', 'transparent']}
+            start={{ x: 0.5, y: 0.5 }}
+            end={{ x: 1, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+        <View className="absolute inset-[2px] rounded-[inherit] bg-background" />
+      </View>
+    );
+  }
+);
+BorderBeam.displayName = 'BorderBeam';

package/src/premium/magic/confetti.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  withDelay,
+  Easing,
+  runOnJS,
+} from 'react-native-reanimated';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+const COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#a855f7'];
+
+export const Confetti = ({ count = 50, duration = 3000, onComplete }: { count?: number; duration?: number; onComplete?: () => void }) => {
+  const [pieces, setPieces] = useState<any[]>([]);
+
+  useEffect(() => {
+    const newPieces = Array.from({ length: count }).map((_, i) => ({
+      id: i,
+      x: Math.random() * SCREEN_WIDTH,
+      color: COLORS[Math.floor(Math.random() * COLORS.length)],
+      delay: Math.random() * 500,
+      size: Math.random() * 10 + 5,
+    }));
+    setPieces(newPieces);
+  }, [count]);
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      {pieces.map((p, i) => (
+        <ConfettiPiece
+          key={p.id}
+          x={p.x}
+          color={p.color}
+          delay={p.delay}
+          size={p.size}
+          duration={duration}
+          onComplete={i === pieces.length - 1 ? onComplete : undefined}
+        />
+      ))}
+    </View>
+  );
+};
+
+const ConfettiPiece = ({ x, color, delay, size, duration, onComplete }: any) => {
+  const translateY = useSharedValue(-50);
+  const rotateX = useSharedValue(0);
+  const rotateY = useSharedValue(0);
+
+  useEffect(() => {
+    translateY.value = withDelay(
+      delay,
+      withTiming(SCREEN_HEIGHT + 50, { duration, easing: Easing.linear }, (finished) => {
+        if (finished && onComplete) {
+          runOnJS(onComplete)();
+        }
+      })
+    );
+
+    rotateX.value = withDelay(delay, withTiming(Math.random() * 720, { duration, easing: Easing.linear }));
+    rotateY.value = withDelay(delay, withTiming(Math.random() * 720, { duration, easing: Easing.linear }));
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateY: translateY.value },
+      { rotateX: `${rotateX.value}deg` },
+      { rotateY: `${rotateY.value}deg` },
+    ],
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: 'absolute',
+          top: 0,
+          left: x,
+          width: size,
+          height: size,
+          backgroundColor: color,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+};

package/src/premium/magic/magic-card.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+  interpolateColor,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { cn } from '../../lib/utils';
+
+export interface MagicCardProps extends ViewProps {
+  children: React.ReactNode;
+}
+
+export const MagicCard = React.forwardRef<React.ElementRef<typeof View>, MagicCardProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const rotation = useSharedValue(0);
+
+    useEffect(() => {
+      rotation.value = withRepeat(
+        withTiming(360, { duration: 4000, easing: Easing.linear }),
+        -1,
+        false
+      );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+
+    return (
+      <View
+        ref={ref}
+        className={cn('relative overflow-hidden rounded-2xl bg-card p-[1px]', className)}
+        style={style}
+        {...props}
+      >
+        {/* The rotating gradient background behind the inner card */}
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            { width: '200%', height: '200%', top: '-50%', left: '-50%' },
+            animatedStyle,
+          ]}
+        >
+          <LinearGradient
+            colors={['transparent', 'hsl(var(--primary))', 'transparent']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+
+        {/* Inner Card content */}
+        <View className="relative h-full w-full rounded-[15px] bg-card p-6">
+          {children}
+        </View>
+      </View>
+    );
+  }
+);
+MagicCard.displayName = 'MagicCard';

package/src/premium/magic/meteors.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps, Dimensions } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+  interpolate,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { cn } from '../../lib/utils';
+
+export interface MeteorsProps extends ViewProps {
+  number?: number;
+}
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export const Meteors = React.forwardRef<React.ElementRef<typeof View>, MeteorsProps>(
+  ({ className, number = 20, style, ...props }, ref) => {
+    
+    return (
+      <View
+        ref={ref}
+        className={cn('absolute inset-0 overflow-hidden', className)}
+        style={style}
+        pointerEvents="none"
+        {...props}
+      >
+        {Array.from({ length: number }).map((_, idx) => (
+          <Meteor key={idx} />
+        ))}
+      </View>
+    );
+  }
+);
+Meteors.displayName = 'Meteors';
+
+const Meteor = () => {
+  const animatedValue = useSharedValue(0);
+
+  // Randomize initial properties
+  const top = Math.random() * SCREEN_HEIGHT * 0.5 - 100;
+  const left = Math.random() * SCREEN_WIDTH * 1.5 - SCREEN_WIDTH * 0.2;
+  const delay = Math.random() * 5000;
+  const duration = Math.random() * 2000 + 1500;
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      animatedValue.value = withRepeat(
+        withTiming(1, { duration, easing: Easing.linear }),
+        -1,
+        false
+      );
+    }, delay);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const translateX = interpolate(animatedValue.value, [0, 1], [0, -SCREEN_WIDTH * 1.5]);
+    const translateY = interpolate(animatedValue.value, [0, 1], [0, SCREEN_WIDTH * 1.5]);
+    const opacity = interpolate(animatedValue.value, [0, 0.1, 0.8, 1], [0, 1, 1, 0]);
+
+    return {
+      transform: [
+        { translateX },
+        { translateY },
+        { rotate: '-45deg' },
+      ],
+      opacity,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: 'absolute',
+          top,
+          left,
+          width: 100,
+          height: 2,
+        },
+        animatedStyle,
+      ]}
+    >
+      <LinearGradient
+        colors={['rgba(255,255,255,0.8)', 'transparent']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        style={StyleSheet.absoluteFill}
+      />
+    </Animated.View>
+  );
+};