cnnative-ui 1.0.0

package/src/hooks/use-previous.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Returns the previous state/value from the last render.
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>(undefined);
+  
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  
+  return ref.current;
+}

package/src/hooks/use-scroll-header.ts

@@ -0,0 +1,42 @@
+import { useSharedValue, useAnimatedScrollHandler, useAnimatedStyle, interpolate, Extrapolate } from 'react-native-reanimated';
+
+export interface UseScrollHeaderProps {
+  maxHeight?: number;
+  minHeight?: number;
+}
+
+/**
+ * Hook to create collapsing header animations on scroll.
+ */
+export function useScrollHeader({ maxHeight = 200, minHeight = 80 }: UseScrollHeaderProps = {}) {
+  const scrollY = useSharedValue(0);
+  const scrollDistance = maxHeight - minHeight;
+
+  const onScroll = useAnimatedScrollHandler((event) => {
+    scrollY.value = event.contentOffset.y;
+  });
+
+  const headerStyle = useAnimatedStyle(() => {
+    const height = interpolate(
+      scrollY.value,
+      [0, scrollDistance],
+      [maxHeight, minHeight],
+      Extrapolate.CLAMP
+    );
+
+    return { height };
+  });
+
+  const titleStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      scrollY.value,
+      [0, scrollDistance / 2, scrollDistance],
+      [1, 0.5, 0],
+      Extrapolate.CLAMP
+    );
+    
+    return { opacity };
+  });
+
+  return { onScroll, scrollY, headerStyle, titleStyle };
+}

package/src/hooks/use-spring.ts

@@ -0,0 +1,18 @@
+import { useReducedMotion } from 'react-native-reanimated';
+import { springPresets, type SpringPreset } from '../tokens/motion';
+import type { WithSpringConfig } from 'react-native-reanimated';
+
+/**
+ * Returns a reanimated spring config based on a semantic preset,
+ * automatically falling back to an instant transition if the user
+ * has "Reduce Motion" enabled in their OS settings.
+ */
+export function useSpring(preset: SpringPreset = 'smooth'): WithSpringConfig {
+  const reducedMotion = useReducedMotion();
+  
+  if (reducedMotion) {
+    return springPresets.instant;
+  }
+  
+  return springPresets[preset];
+}

package/src/hooks/use-theme.ts

@@ -0,0 +1,6 @@
+import { useThemeContext } from '../context/theme-context';
+
+/**
+ * Hook to access the current theme, color scheme, and multi-theme switcher.
+ */
+export const useTheme = useThemeContext;

package/src/hooks/use-toast.ts

@@ -0,0 +1,6 @@
+import { useToastContext } from '../context/toast-context';
+
+/**
+ * Hook to trigger and manage toasts.
+ */
+export const useToast = useToastContext;

package/src/index.ts

@@ -0,0 +1,53 @@
+// Tokens & Design System
+export * from './tokens';
+
+// Core Library Utilities
+export * from './lib';
+
+// Hooks
+export * from './hooks';
+
+// Context & Providers
+export * from './context';
+
+// Layer 2: Styled Components
+export * from './components/typography';
+export * from './components/button';
+export * from './components/badge';
+export * from './components/card';
+export * from './components/separator';
+export * from './components/label';
+export * from './components/input';
+export * from './components/skeleton';
+export * from './components/switch';
+export * from './components/checkbox';
+export * from './components/progress';
+export * from './components/alert';
+export * from './components/slider';
+export * from './components/textarea';
+export * from './components/avatar';
+export * from './components/aspect-ratio';
+export * from './components/scroll-area';
+export * from './components/toggle';
+export * from './components/toggle-group';
+export * from './components/radio-group';
+export * from './components/breadcrumb';
+export * from './components/pagination';
+export * from './components/accordion';
+export * from './components/collapsible';
+export * from './components/tabs';
+export * from './components/toast';
+export * from './components/dialog';
+export * from './components/sheet';
+export * from './components/tooltip';
+export * from './components/dropdown-menu';
+export * from './components/alert-dialog';
+export * from './components/select';
+export * from './components/form';
+export * from './components/context-menu';
+export * from './components/table';
+export * from './components/navigation-menu';
+
+// Note: Layer 3 (Premium) components are exported from their respective directories
+// e.g., import { SwipeRow } from '@nativecn/ui/premium/mobile/swipe-row'
+export * from './premium';

package/src/lib/create-animated.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+import Animated from 'react-native-reanimated';
+import { createComponent, type CreateComponentOptions } from './create-component';
+
+/**
+ * An animated component factory.
+ * Wraps a component in `Animated.createAnimatedComponent` and then applies the `createComponent` factory logic.
+ */
+export function createAnimatedComponent<
+  TRef,
+  TProps extends { className?: string; style?: any }
+>(options: CreateComponentOptions<TProps, any>) {
+  // First, make the underlying component animatable if it isn't already
+  const AnimatableComponent = Animated.createAnimatedComponent(options.Component as any);
+
+  // Then run it through our standard component factory
+  const ForwardedComponent = createComponent<TRef, TProps>({
+    ...options,
+    Component: AnimatableComponent,
+  });
+
+  ForwardedComponent.displayName = `NativecnAnimated(${(options.Component as any).displayName || (options.Component as any).name || 'Unknown'})`;
+
+  return ForwardedComponent;
+}

package/src/lib/create-component.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import type { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import { cn } from './utils';
+
+/**
+ * A highly reusable component factory that automatically handles:
+ * - ref forwarding
+ * - tailwind class merging via `cn()`
+ * - default base classes
+ * - CVA variant resolution (if a variant function is provided)
+ */
+
+export interface CreateComponentOptions<TProps, TVariants> {
+  /** The base React Native component to wrap (e.g. View, Text, Pressable) */
+  Component: React.ElementType;
+  /** Base tailwind classes always applied to this component */
+  baseClassName?: string;
+  /** CVA variant function for prop-driven styles */
+  variants?: (props: any) => string;
+  /** Default props to apply */
+  defaultProps?: Partial<TProps>;
+}
+
+export function createComponent<
+  TRef,
+  TProps extends { className?: string; style?: any }
+>(
+  options: CreateComponentOptions<TProps, any>
+) {
+  const { Component, baseClassName = '', variants, defaultProps = {} } = options;
+
+  const ForwardedComponent = forwardRef<TRef, TProps>((props, ref) => {
+    // Merge default props with passed props
+    const mergedProps = { ...defaultProps, ...props };
+    const { className, style, ...restProps } = mergedProps;
+
+    // Resolve variants if the CVA function is provided
+    const variantClassName = variants ? variants(mergedProps) : '';
+
+    // Merge base classes, variant classes, and user-passed classes
+    const finalClassName = cn(baseClassName, variantClassName, className);
+
+    return (
+      <Component
+        ref={ref}
+        className={finalClassName || undefined}
+        style={style}
+        {...restProps}
+      />
+    );
+  });
+
+  ForwardedComponent.displayName = `NativecnComponent(${(Component as any).displayName || (Component as any).name || 'Unknown'})`;
+
+  return ForwardedComponent;
+}

package/src/lib/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './utils';
+export * from './variants';
+export * from './platform';

package/src/lib/platform.ts

@@ -0,0 +1,25 @@
+import { Platform } from 'react-native';
+
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';
+export const isWeb = Platform.OS === 'web';
+
+export const isNative = isIOS || isAndroid;
+
+/**
+ * Platform-specific class name helper.
+ * Selectively applies classes based on the current platform.
+ */
+export function platformClasses(classes: {
+  ios?: string;
+  android?: string;
+  web?: string;
+  native?: string;
+  default?: string;
+}): string {
+  if (isIOS && classes.ios) return classes.ios;
+  if (isAndroid && classes.android) return classes.android;
+  if (isWeb && classes.web) return classes.web;
+  if (isNative && classes.native) return classes.native;
+  return classes.default || '';
+}

package/src/lib/types.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared types used across the Nativecn UI library
+ */
+import type { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+
+export type AnyStyle = ViewStyle | TextStyle | ImageStyle;
+
+export type BooleanString = 'true' | 'false';
+
+/**
+ * Common size variants used across components
+ */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon' | 'icon-sm' | 'icon-lg';
+
+/**
+ * Common intent variants used across components
+ */
+export type ComponentVariant = 
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link'
+  | 'gradient'
+  | 'glass';
+
+export type HapticFeedbackType = 'none' | 'selection' | 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error';

package/src/lib/utils.ts

@@ -0,0 +1,35 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merges Tailwind CSS classes securely.
+ * It uses clsx to construct the class string conditionally,
+ * and tailwind-merge to deduplicate conflicting Tailwind utilities.
+ * 
+ * @example
+ * cn('px-2 py-1', { 'bg-red-500': hasError }, ['text-sm', 'font-bold'])
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Compose multiple event handlers together.
+ * Useful when forwarding refs and preserving user-passed event handlers.
+ */
+export function composeEventHandlers<E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void,
+  { checkForDefaultPrevented = true } = {}
+) {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+
+    if (
+      checkForDefaultPrevented === false ||
+      !(event as any)?.defaultPrevented
+    ) {
+      return ourEventHandler?.(event);
+    }
+  };
+}

package/src/lib/variants.ts

@@ -0,0 +1,7 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+export { cva, type VariantProps };
+
+/**
+ * Re-exporting CVA for consistent internal usage.
+ * CVA allows building type-safe UI components with variants.
+ */

package/src/premium/ai/chat-bubble.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+import Animated, { FadeInUp, FadeInDown } from 'react-native-reanimated';
+
+export interface ChatBubbleProps extends ViewProps {
+  message: string;
+  isSender?: boolean;
+  timestamp?: string;
+  avatar?: React.ReactNode;
+}
+
+export const ChatBubble = React.forwardRef<React.ElementRef<typeof View>, ChatBubbleProps>(
+  ({ className, message, isSender = false, timestamp, avatar, ...props }, ref) => {
+    
+    const enteringAnimation = isSender ? FadeInDown.springify() : FadeInUp.springify();
+
+    return (
+      <Animated.View
+        entering={enteringAnimation}
+        ref={ref as any}
+        className={cn('mb-4 flex w-full flex-row', isSender ? 'justify-end' : 'justify-start', className)}
+        {...props}
+      >
+        {!isSender && avatar && (
+          <View className="mr-2 justify-end pb-4">{avatar}</View>
+        )}
+        
+        <View className="max-w-[80%]">
+          <View
+            className={cn(
+              'rounded-2xl px-4 py-3 shadow-sm',
+              isSender 
+                ? 'rounded-tr-sm bg-primary border border-primary' 
+                : 'rounded-tl-sm bg-muted border border-border'
+            )}
+          >
+            <Text className={cn('text-[15px] leading-5', isSender ? 'text-primary-foreground' : 'text-foreground')}>
+              {message}
+            </Text>
+          </View>
+          
+          {timestamp && (
+            <Text className={cn('mt-1 text-xs text-muted-foreground', isSender ? 'text-right' : 'text-left')}>
+              {timestamp}
+            </Text>
+          )}
+        </View>
+
+        {isSender && avatar && (
+          <View className="ml-2 justify-end pb-4">{avatar}</View>
+        )}
+      </Animated.View>
+    );
+  }
+);
+ChatBubble.displayName = 'ChatBubble';

package/src/premium/ai/typing-indicator.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming, withDelay } from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+
+export const TypingIndicator = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-row items-center space-x-1.5 rounded-2xl rounded-tl-sm bg-muted px-4 py-3 self-start', className)}
+        {...props}
+      >
+        <Dot delay={0} />
+        <Dot delay={150} />
+        <Dot delay={300} />
+      </View>
+    );
+  }
+);
+TypingIndicator.displayName = 'TypingIndicator';
+
+const Dot = ({ delay }: { delay: number }) => {
+  const opacity = useSharedValue(0.3);
+  const translateY = useSharedValue(0);
+
+  useEffect(() => {
+    opacity.value = withDelay(
+      delay,
+      withRepeat(
+        withSequence(
+          withTiming(1, { duration: 300 }),
+          withTiming(0.3, { duration: 300 })
+        ),
+        -1,
+        true
+      )
+    );
+
+    translateY.value = withDelay(
+      delay,
+      withRepeat(
+        withSequence(
+          withTiming(-3, { duration: 300 }),
+          withTiming(0, { duration: 300 })
+        ),
+        -1,
+        true
+      )
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  return <Animated.View style={animatedStyle} className="h-2 w-2 rounded-full bg-foreground" />;
+};

package/src/premium/charts/bar-chart.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withDelay } from 'react-native-reanimated';
+import { Text } from '../../components/typography';
+import { cn } from '../../lib/utils';
+
+export interface BarChartProps extends ViewProps {
+  data: { label: string; value: number }[];
+  maxValue?: number;
+  height?: number;
+  barColor?: string;
+}
+
+export const BarChart = React.forwardRef<React.ElementRef<typeof View>, BarChartProps>(
+  ({ className, data, maxValue, height = 200, barColor = 'hsl(var(--primary))', style, ...props }, ref) => {
+    const max = maxValue || Math.max(...data.map((d) => d.value));
+
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-row items-end justify-between px-4 pb-8 pt-4 border-b border-border', className)}
+        style={[{ height }, style]}
+        {...props}
+      >
+        {data.map((item, index) => (
+          <Bar
+            key={item.label}
+            value={item.value}
+            max={max}
+            label={item.label}
+            color={barColor}
+            delay={index * 100}
+            totalHeight={height - 40} // account for label and padding
+          />
+        ))}
+      </View>
+    );
+  }
+);
+BarChart.displayName = 'BarChart';
+
+const Bar = ({ value, max, label, color, delay, totalHeight }: any) => {
+  const heightAnim = useSharedValue(0);
+
+  const targetHeight = (value / max) * totalHeight;
+
+  useEffect(() => {
+    heightAnim.value = withDelay(delay, withSpring(targetHeight, { damping: 15 }));
+  }, [targetHeight, delay]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: heightAnim.value,
+  }));
+
+  return (
+    <View className="items-center flex-1">
+      <View className="w-full flex-1 justify-end px-1">
+        <Animated.View
+          style={[animatedStyle, { backgroundColor: color }]}
+          className="w-full rounded-t-sm"
+        />
+      </View>
+      <Text className="mt-2 text-xs text-muted-foreground">{label}</Text>
+    </View>
+  );
+};

package/src/premium/charts/progress-ring.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps, StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, interpolate, Extrapolate } from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+
+export interface ProgressRingProps extends ViewProps {
+  progress: number; // 0 to 1
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  trackColor?: string;
+}
+
+export const ProgressRing = React.forwardRef<React.ElementRef<typeof View>, ProgressRingProps>(
+  ({ className, progress, size = 120, strokeWidth = 10, color = 'hsl(var(--primary))', trackColor = 'hsl(var(--muted))', style, ...props }, ref) => {
+    // Pure View/CSS based fake ring using half-circles
+    const rotation = useSharedValue(0);
+
+    useEffect(() => {
+      // Limit to 0-1
+      const p = Math.max(0, Math.min(1, progress));
+      rotation.value = withTiming(p * 360, { duration: 1500, easing: Easing.out(Easing.cubic) });
+    }, [progress]);
+
+    const rightAnimatedStyle = useAnimatedStyle(() => {
+      const rot = interpolate(rotation.value, [0, 180, 360], [0, 180, 180], Extrapolate.CLAMP);
+      return { transform: [{ rotate: `${rot}deg` }] };
+    });
+
+    const leftAnimatedStyle = useAnimatedStyle(() => {
+      const rot = interpolate(rotation.value, [0, 180, 360], [0, 0, 180], Extrapolate.CLAMP);
+      return { transform: [{ rotate: `${rot}deg` }] };
+    });
+
+    return (
+      <View
+        ref={ref}
+        className={cn('items-center justify-center relative', className)}
+        style={[{ width: size, height: size }, style]}
+        {...props}
+      >
+        {/* Track */}
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { borderRadius: size / 2, borderWidth: strokeWidth, borderColor: trackColor }
+          ]}
+        />
+        
+        <View style={[StyleSheet.absoluteFill, { overflow: 'hidden' }]}>
+          {/* We would typically use react-native-svg for a real ring, but simulating with views for zero-deps */}
+          <View style={[StyleSheet.absoluteFill, { borderRadius: size / 2, borderWidth: strokeWidth, borderColor: color, opacity: 0.2 }]} />
+        </View>
+
+        <View className="items-center justify-center">
+           <Text className="text-2xl font-bold">{Math.round(progress * 100)}%</Text>
+        </View>
+      </View>
+    );
+  }
+);
+ProgressRing.displayName = 'ProgressRing';

package/src/premium/glass/glass-bottom-sheet.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps, Modal, Pressable } from 'react-native';
+import { BlurView } from 'expo-blur';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { useThemeContext } from '../../context/theme-context';
+
+export interface GlassBottomSheetProps extends ViewProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export const GlassBottomSheet = React.forwardRef<React.ElementRef<typeof View>, GlassBottomSheetProps>(
+  ({ className, open, onOpenChange, children, ...props }, ref) => {
+    const { isDark } = useThemeContext();
+
+    return (
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        onRequestClose={() => onOpenChange(false)}
+      >
+        <View className="flex-1 justify-end">
+          <Pressable className="absolute inset-0 bg-black/40" onPress={() => onOpenChange(false)} />
+          
+          <Animated.View
+            entering={SlideInDown.springify().damping(20).stiffness(200)}
+            exiting={SlideOutDown.duration(300)}
+            ref={ref}
+            className={cn('w-full overflow-hidden rounded-t-3xl border-t border-white/20 shadow-2xl', className)}
+            {...props}
+          >
+            <BlurView
+              intensity={80}
+              tint={isDark ? 'dark' : 'light'}
+              style={StyleSheet.absoluteFill}
+            />
+            <View className="p-6 pb-safe relative z-10">
+              <View className="w-12 h-1.5 bg-muted-foreground/30 rounded-full self-center mb-6" />
+              {children}
+            </View>
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+GlassBottomSheet.displayName = 'GlassBottomSheet';