cnnative-ui 1.0.0

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+import { BlurView, type BlurViewProps } from 'expo-blur';
+import { cva, type VariantProps } from '../../lib/variants';
+import { useThemeContext } from '../../context/theme-context';
+import { cn } from '../../lib/utils';
+
+const glassVariants = cva(
+  'overflow-hidden rounded-xl border',
+  {
+    variants: {
+      intensity: {
+        light: 'border-white/20 bg-white/10',
+        medium: 'border-white/30 bg-white/20',
+        heavy: 'border-white/40 bg-white/30',
+      },
+    },
+    defaultVariants: {
+      intensity: 'medium',
+    },
+  }
+);
+
+export interface GlassCardProps extends Omit<BlurViewProps, 'intensity'>, VariantProps<typeof glassVariants> {
+  children?: React.ReactNode;
+}
+
+export const GlassCard = React.forwardRef<React.ElementRef<typeof BlurView>, GlassCardProps>(
+  ({ className, intensity, tint = 'default', children, style, ...props }, ref) => {
+    const { theme, isDark } = useThemeContext();
+
+    // In dark mode, we generally want a dark tint unless specified
+    const resolvedTint = tint === 'default' ? (isDark ? 'dark' : 'light') : tint;
+
+    return (
+      <BlurView
+        ref={ref}
+        intensity={intensity === 'light' ? 20 : intensity === 'medium' ? 50 : 80}
+        tint={resolvedTint}
+        className={cn(glassVariants({ intensity, className }))}
+        style={[style]}
+        {...props}
+      >
+        <View className="flex-1 p-6">
+          {children}
+        </View>
+      </BlurView>
+    );
+  }
+);
+GlassCard.displayName = 'GlassCard';

package/src/premium/glass/glass-header.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { useThemeContext } from '../../context/theme-context';
+import { cn } from '../../lib/utils';
+import Animated, { useAnimatedStyle, interpolate, Extrapolate, type SharedValue } from 'react-native-reanimated';
+
+export interface GlassHeaderProps extends ViewProps {
+  scrollY?: SharedValue<number>;
+  collapsedHeight?: number;
+}
+
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+
+export const GlassHeader = React.forwardRef<React.ElementRef<typeof View>, GlassHeaderProps>(
+  ({ className, children, scrollY, collapsedHeight = 100, style, ...props }, ref) => {
+    const { isDark } = useThemeContext();
+
+    const animatedStyle = useAnimatedStyle(() => {
+      if (!scrollY) return { opacity: 1 };
+      
+      const opacity = interpolate(
+        scrollY.value,
+        [0, collapsedHeight / 2, collapsedHeight],
+        [0, 0.5, 1],
+        Extrapolate.CLAMP
+      );
+      
+      return { opacity };
+    });
+
+    return (
+      <View
+        ref={ref}
+        className={cn('absolute top-0 w-full z-50 overflow-hidden', className)}
+        style={[{ height: collapsedHeight }, style]}
+        {...props}
+      >
+        {scrollY ? (
+          <AnimatedBlurView
+            intensity={80}
+            tint={isDark ? 'dark' : 'light'}
+            style={[StyleSheet.absoluteFill, animatedStyle]}
+          />
+        ) : (
+          <BlurView
+            intensity={80}
+            tint={isDark ? 'dark' : 'light'}
+            style={StyleSheet.absoluteFill}
+          />
+        )}
+        
+        {/* Safe Area Padding / Content */}
+        <View className="flex-1 justify-end pb-4 px-4">
+          {children}
+        </View>
+      </View>
+    );
+  }
+);
+GlassHeader.displayName = 'GlassHeader';

package/src/premium/glass/glass-panel.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+import { BlurView, type BlurViewProps } from 'expo-blur';
+import { useThemeContext } from '../../context/theme-context';
+import { cn } from '../../lib/utils';
+
+export interface GlassPanelProps extends BlurViewProps {
+  children?: React.ReactNode;
+}
+
+export const GlassPanel = React.forwardRef<React.ElementRef<typeof BlurView>, GlassPanelProps>(
+  ({ className, tint = 'default', intensity = 60, children, style, ...props }, ref) => {
+    const { isDark } = useThemeContext();
+
+    const resolvedTint = tint === 'default' ? (isDark ? 'dark' : 'light') : tint;
+
+    return (
+      <View className={cn('overflow-hidden rounded-2xl border border-white/20 shadow-xl', className)} style={style}>
+        <BlurView
+          ref={ref}
+          intensity={intensity}
+          tint={resolvedTint}
+          className="flex-1"
+          {...props}
+        >
+          {children}
+        </BlurView>
+      </View>
+    );
+  }
+);
+GlassPanel.displayName = 'GlassPanel';

package/src/premium/glass/glass-sidebar.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps, Modal, Pressable } from 'react-native';
+import { BlurView } from 'expo-blur';
+import Animated, { SlideInLeft, SlideOutLeft, SlideInRight, SlideOutRight } from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { useThemeContext } from '../../context/theme-context';
+
+export interface GlassSidebarProps extends ViewProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+  side?: 'left' | 'right';
+}
+
+export const GlassSidebar = React.forwardRef<React.ElementRef<typeof View>, GlassSidebarProps>(
+  ({ className, open, onOpenChange, children, side = 'left', ...props }, ref) => {
+    const { isDark } = useThemeContext();
+
+    const entering = side === 'left' ? SlideInLeft : SlideInRight;
+    const exiting = side === 'left' ? SlideOutLeft : SlideOutRight;
+
+    return (
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        onRequestClose={() => onOpenChange(false)}
+      >
+        <View className={cn('flex-1', side === 'left' ? 'justify-start items-start' : 'justify-end items-end')}>
+          <Pressable className="absolute inset-0 bg-black/40" onPress={() => onOpenChange(false)} />
+          
+          <Animated.View
+            entering={entering.springify().damping(20).stiffness(200)}
+            exiting={exiting.duration(300)}
+            ref={ref}
+            className={cn('h-full w-[80%] max-w-sm overflow-hidden border-white/20 shadow-2xl', 
+              side === 'left' ? 'rounded-r-3xl border-r' : 'rounded-l-3xl border-l',
+              className
+            )}
+            {...props}
+          >
+            <BlurView
+              intensity={80}
+              tint={isDark ? 'dark' : 'light'}
+              style={StyleSheet.absoluteFill}
+            />
+            <View className="flex-1 p-6 pt-safe">
+              {children}
+            </View>
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+GlassSidebar.displayName = 'GlassSidebar';

package/src/premium/index.ts

@@ -0,0 +1,44 @@
+export * from './glass/glass-card';
+export * from './glass/glass-header';
+export * from './glass/glass-panel';
+export * from './glass/glass-bottom-sheet';
+export * from './mobile/swipe-row';
+export * from './mobile/pull-to-refresh';
+export * from './mobile/fab';
+export * from './mobile/bottom-tab-bar';
+export * from './mobile/notification-badge';
+export * from './mobile/haptic-pressable';
+export * from './mobile/biometric-button';
+export * from './magic/animated-number';
+export * from './magic/bento-grid';
+export * from './motion/marquee';
+export * from './motion/blur-fade';
+export * from './motion/pulsating-button';
+export * from './glass/glass-sidebar';
+export * from './mobile/swipeable-card-stack';
+export * from './magic/shimmer';
+export * from './magic/shiny-button';
+export * from './motion/fade-up';
+export * from './motion/slide-in';
+export * from './motion/stagger-children';
+export * from './inputs/phone-input';
+export * from './inputs/currency-input';
+export * from './motion/typing-text';
+export * from './motion/word-pull-up';
+export * from './mobile/scroll-header';
+export * from './magic/ripple';
+export * from './magic/meteors';
+export * from './magic/magic-card';
+export * from './magic/border-beam';
+export * from './magic/confetti';
+export * from './inputs/rating';
+export * from './inputs/color-picker';
+export * from './ai/chat-bubble';
+export * from './ai/typing-indicator';
+export * from './charts/bar-chart';
+export * from './charts/progress-ring';
+export * from './layout/masonry-grid';
+export * from './layout/carousel';
+export * from './layout/parallax-scroll';
+export * from './layout/floating-dock';
+export * from './onboarding/step-indicator';

package/src/premium/index2.ts

@@ -0,0 +1,13 @@
+export * from './glass/glass-sidebar';
+export * from './mobile/swipeable-card-stack';
+export * from './magic/shimmer';
+export * from './magic/shiny-button';
+export * from './motion/fade-up';
+export * from './motion/slide-in';
+export * from './motion/stagger-children';
+export * from './inputs/phone-input';
+export * from './inputs/currency-input';
+export * from './motion/typing-text';
+export * from './motion/word-pull-up';
+export * from './mobile/scroll-header';
+export * from './magic/ripple';

package/src/premium/index3.ts

@@ -0,0 +1 @@
+export * from './magic/meteors';

package/src/premium/inputs/color-picker.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { View, Pressable, Modal, StyleSheet, Dimensions, type ViewProps } from 'react-native';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+import { useHaptics } from '../../hooks/use-haptics';
+import { BlurView } from 'expo-blur';
+
+export interface ColorPickerProps extends ViewProps {
+  colors?: string[];
+  selectedColor: string;
+  onColorChange: (color: string) => void;
+}
+
+const DEFAULT_COLORS = [
+  '#ef4444', // red
+  '#f97316', // orange
+  '#eab308', // yellow
+  '#22c55e', // green
+  '#06b6d4', // cyan
+  '#3b82f6', // blue
+  '#a855f7', // purple
+  '#ec4899', // pink
+  '#000000', // black
+  '#ffffff', // white
+];
+
+export const ColorPicker = React.forwardRef<React.ElementRef<typeof View>, ColorPickerProps>(
+  ({ className, colors = DEFAULT_COLORS, selectedColor, onColorChange, ...props }, ref) => {
+    const [open, setOpen] = useState(false);
+    const triggerHaptic = useHaptics();
+
+    return (
+      <>
+        <Pressable
+          ref={ref as any}
+          onPress={() => setOpen(true)}
+          className={cn('flex h-10 w-full flex-row items-center justify-between rounded-md border border-input bg-background px-3 py-2', className)}
+          {...props}
+        >
+          <Text className="text-sm">Choose Color</Text>
+          <View
+            className="h-6 w-6 rounded-full border border-border"
+            style={{ backgroundColor: selectedColor }}
+          />
+        </Pressable>
+
+        <Modal visible={open} transparent animationType="none" onRequestClose={() => setOpen(false)}>
+          <View className="flex-1 justify-end">
+            <Pressable className="absolute inset-0 bg-black/40" onPress={() => setOpen(false)} />
+            
+            <Animated.View
+              entering={SlideInDown.springify().damping(20)}
+              exiting={SlideOutDown}
+              className="bg-background rounded-t-3xl border-t border-border overflow-hidden"
+            >
+              <BlurView intensity={80} tint="light" style={StyleSheet.absoluteFill} />
+              <View className="p-6 pb-safe items-center">
+                <View className="w-12 h-1.5 bg-muted rounded-full mb-6" />
+                <Text className="text-lg font-semibold mb-4">Select a Color</Text>
+                
+                <View className="flex-row flex-wrap justify-center gap-4">
+                  {colors.map((c) => (
+                    <Pressable
+                      key={c}
+                      onPress={() => {
+                        triggerHaptic('selection');
+                        onColorChange(c);
+                        setOpen(false);
+                      }}
+                      className={cn(
+                        'h-12 w-12 rounded-full border shadow-sm items-center justify-center',
+                        c === '#ffffff' ? 'border-border' : 'border-transparent',
+                        selectedColor === c && 'ring-2 ring-primary ring-offset-2'
+                      )}
+                      style={{ backgroundColor: c }}
+                    >
+                      {selectedColor === c && (
+                        <View className={cn('h-4 w-4 rounded-full', c === '#ffffff' ? 'bg-black' : 'bg-white')} />
+                      )}
+                    </Pressable>
+                  ))}
+                </View>
+              </View>
+            </Animated.View>
+          </View>
+        </Modal>
+      </>
+    );
+  }
+);
+ColorPicker.displayName = 'ColorPicker';

package/src/premium/inputs/currency-input.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import { View, TextInput, type TextInputProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface CurrencyInputProps extends TextInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  currencySymbol?: string;
+}
+
+export const CurrencyInput = forwardRef<React.ElementRef<typeof TextInput>, CurrencyInputProps>(
+  ({ className, value, onChangeText, currencySymbol = '$', ...props }, ref) => {
+    
+    const handleChangeText = (text: string) => {
+      // Basic formatting, remove non-numeric except decimal
+      let cleanText = text.replace(/[^0-9.]/g, '');
+      
+      // Ensure only one decimal point
+      const parts = cleanText.split('.');
+      if (parts.length > 2) {
+        cleanText = parts[0] + '.' + parts.slice(1).join('');
+      }
+
+      // Limit to 2 decimal places
+      if (cleanText.includes('.')) {
+        const [integer, decimal = ''] = cleanText.split('.');
+        cleanText = `${integer}.${decimal.substring(0, 2)}`;
+      }
+
+      onChangeText(cleanText);
+    };
+
+    return (
+      <View className={cn('relative flex h-10 w-full flex-row items-center rounded-md border border-input bg-background px-3', className)}>
+        <Text className="text-muted-foreground font-medium mr-1">{currencySymbol}</Text>
+        <TextInput
+          ref={ref}
+          value={value}
+          onChangeText={handleChangeText}
+          keyboardType="decimal-pad"
+          className="flex-1 py-2 text-sm text-foreground focus:outline-none font-medium"
+          placeholderTextColor="hsl(var(--muted-foreground))"
+          {...props}
+        />
+      </View>
+    );
+  }
+);
+CurrencyInput.displayName = 'CurrencyInput';

package/src/premium/inputs/otp-input.tsx

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react';
+import { View, TextInput, Pressable, type ViewProps, type TextInputProps, Keyboard } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring, useSharedValue, withSequence, withTiming } from 'react-native-reanimated';
+import { useHaptics } from '../../hooks/use-haptics';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface OtpInputProps extends ViewProps {
+  length?: number;
+  value: string;
+  onChangeText: (value: string) => void;
+  onComplete?: (value: string) => void;
+}
+
+export const OtpInput = React.forwardRef<React.ElementRef<typeof View>, OtpInputProps>(
+  ({ className, length = 4, value, onChangeText, onComplete, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+    const triggerHaptic = useHaptics();
+
+    // Shake animation for error state (could be exposed via props)
+    const shakeOffset = useSharedValue(0);
+
+    const handlePress = () => {
+      inputRef.current?.focus();
+    };
+
+    const handleChange = (text: string) => {
+      // Keep only numeric (or alphanumeric depending on use case)
+      const cleanText = text.replace(/[^0-9]/g, '').slice(0, length);
+      if (cleanText !== value) {
+        triggerHaptic('light');
+        onChangeText(cleanText);
+        if (cleanText.length === length) {
+          triggerHaptic('success');
+          Keyboard.dismiss();
+          onComplete?.(cleanText);
+        }
+      }
+    };
+
+    const shakeStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: shakeOffset.value }],
+    }));
+
+    return (
+      <View ref={ref} className={cn('w-full', className)} {...props}>
+        <Pressable onPress={handlePress} className="flex-row items-center justify-between gap-2">
+          {Array.from({ length }).map((_, index) => {
+            const char = value[index] || '';
+            const isActive = isFocused && value.length === index;
+            const isFilled = value.length > index;
+
+            return (
+              <Animated.View
+                key={index}
+                style={shakeStyle}
+                className={cn(
+                  'flex h-14 w-12 items-center justify-center rounded-md border text-center transition-all',
+                  isActive ? 'border-primary ring-2 ring-primary/20' : 'border-input',
+                  isFilled ? 'bg-accent/50' : 'bg-background'
+                )}
+              >
+                <Text className="text-xl font-semibold">
+                  {char}
+                </Text>
+                {isActive && (
+                  <View className="absolute bottom-2 h-[2px] w-4 bg-primary animate-pulse" />
+                )}
+              </Animated.View>
+            );
+          })}
+        </Pressable>
+
+        {/* Hidden Input to capture native keyboard events easily */}
+        <TextInput
+          ref={inputRef}
+          value={value}
+          onChangeText={handleChange}
+          maxLength={length}
+          keyboardType="number-pad"
+          textContentType="oneTimeCode"
+          autoComplete="one-time-code"
+          className="absolute opacity-0 w-0 h-0"
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
+      </View>
+    );
+  }
+);
+OtpInput.displayName = 'OtpInput';

package/src/premium/inputs/phone-input.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, useState } from 'react';
+import { View, TextInput, type TextInputProps, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+import { ChevronDown } from 'lucide-react-native';
+import { useHaptics } from '../../hooks/use-haptics';
+
+export interface PhoneInputProps extends TextInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  defaultCountryCode?: string;
+  onCountryCodePress?: () => void;
+}
+
+export const PhoneInput = forwardRef<React.ElementRef<typeof TextInput>, PhoneInputProps>(
+  ({ className, value, onChangeText, defaultCountryCode = '+1', onCountryCodePress, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+
+    // Basic formatter for US numbers (xxx) xxx-xxxx
+    const formatPhoneNumber = (text: string): string => {
+      const cleaned = ('' + text).replace(/\D/g, '');
+      const match = cleaned.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+      if (match) {
+        return !match[2] ? (match[1] || '') : `(${match[1] || ''}) ${match[2] || ''}${match[3] ? `-${match[3]}` : ''}`;
+      }
+      return text;
+    };
+
+    const handleChangeText = (text: string) => {
+      onChangeText(formatPhoneNumber(text));
+    };
+
+    return (
+      <View className={cn('flex h-10 w-full flex-row items-center rounded-md border border-input bg-background overflow-hidden', className)}>
+        <Pressable
+          onPress={() => {
+            triggerHaptic('selection');
+            onCountryCodePress?.();
+          }}
+          className="flex-row items-center justify-center px-3 border-r border-input bg-muted/50 h-full active:bg-muted"
+        >
+          <Text className="text-sm font-medium mr-1">{defaultCountryCode}</Text>
+          <ChevronDown size={14} className="text-muted-foreground" />
+        </Pressable>
+        <TextInput
+          ref={ref}
+          value={value}
+          onChangeText={handleChangeText}
+          keyboardType="phone-pad"
+          className="flex-1 px-3 py-2 text-sm text-foreground focus:outline-none"
+          placeholderTextColor="hsl(var(--muted-foreground))"
+          {...props}
+        />
+      </View>
+    );
+  }
+);
+PhoneInput.displayName = 'PhoneInput';

package/src/premium/inputs/rating.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, Pressable, type ViewProps } from 'react-native';
+import { Star } from 'lucide-react-native';
+import { cn } from '../../lib/utils';
+import { useHaptics } from '../../hooks/use-haptics';
+
+export interface RatingProps extends ViewProps {
+  maxRating?: number;
+  rating: number;
+  onRatingChange: (rating: number) => void;
+  size?: number;
+  readonly?: boolean;
+}
+
+export const Rating = React.forwardRef<React.ElementRef<typeof View>, RatingProps>(
+  ({ className, maxRating = 5, rating, onRatingChange, size = 24, readonly = false, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+
+    return (
+      <View ref={ref} className={cn('flex-row items-center space-x-1', className)} {...props}>
+        {Array.from({ length: maxRating }).map((_, index) => {
+          const starValue = index + 1;
+          const isFilled = starValue <= rating;
+
+          return (
+            <Pressable
+              key={index}
+              disabled={readonly}
+              onPress={() => {
+                if (!readonly) {
+                  triggerHaptic('light');
+                  onRatingChange(starValue);
+                }
+              }}
+              className="p-1"
+            >
+              <Star
+                size={size}
+                className={cn(
+                  'transition-colors',
+                  isFilled ? 'text-amber-400 fill-amber-400' : 'text-muted-foreground'
+                )}
+              />
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  }
+);
+Rating.displayName = 'Rating';

package/src/premium/layout/carousel.tsx

@@ -0,0 +1,57 @@
+import React, { useRef, useState } from 'react';
+import { View, ScrollView, Dimensions, type ViewProps, type NativeSyntheticEvent, type NativeScrollEvent } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CarouselProps extends ViewProps {
+  data: any[];
+  renderItem: (item: any, index: number) => React.ReactNode;
+  itemWidth?: number;
+}
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export const Carousel = React.forwardRef<React.ElementRef<typeof View>, CarouselProps>(
+  ({ className, data, renderItem, itemWidth = SCREEN_WIDTH * 0.8, ...props }, ref) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const index = Math.round(offsetX / itemWidth);
+      setActiveIndex(index);
+    };
+
+    return (
+      <View ref={ref} className={cn('w-full', className)} {...props}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={itemWidth}
+          decelerationRate="fast"
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          contentContainerStyle={{ paddingHorizontal: (SCREEN_WIDTH - itemWidth) / 2 }}
+        >
+          {data.map((item, index) => (
+            <View key={index} style={{ width: itemWidth }} className="px-2">
+              {renderItem(item, index)}
+            </View>
+          ))}
+        </ScrollView>
+        
+        {/* Pagination Dots */}
+        <View className="flex-row justify-center mt-4 space-x-2">
+          {data.map((_, i) => (
+            <View
+              key={i}
+              className={cn(
+                'h-2 rounded-full transition-all duration-300',
+                i === activeIndex ? 'w-6 bg-primary' : 'w-2 bg-muted-foreground/30'
+              )}
+            />
+          ))}
+        </View>
+      </View>
+    );
+  }
+);
+Carousel.displayName = 'Carousel';