@sudobility/components-rn 1.0.1

package/src/ui/AnimatedCounter/AnimatedCounter.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Text, Animated } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface AnimatedCounterProps {
+  /** Target value to count to */
+  value: number;
+  /** Animation duration in milliseconds */
+  duration?: number;
+  /** Number of decimal places */
+  decimals?: number;
+  /** Prefix (e.g., "$") */
+  prefix?: string;
+  /** Suffix (e.g., "%") */
+  suffix?: string;
+  /** Format with commas */
+  formatWithCommas?: boolean;
+  /** Additional className */
+  className?: string;
+  /** Text color className */
+  textClassName?: string;
+}
+
+/**
+ * AnimatedCounter Component
+ *
+ * Animated number counter that counts up/down to target value.
+ * Useful for statistics, dashboards, and metrics display.
+ *
+ * @example
+ * ```tsx
+ * <AnimatedCounter
+ *   value={1234}
+ *   duration={2000}
+ *   prefix="$"
+ *   formatWithCommas
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <AnimatedCounter
+ *   value={99.9}
+ *   decimals={1}
+ *   suffix="%"
+ * />
+ * ```
+ */
+export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({
+  value,
+  duration = 1000,
+  decimals = 0,
+  prefix = '',
+  suffix = '',
+  formatWithCommas = false,
+  className,
+  textClassName,
+}) => {
+  const [displayValue, setDisplayValue] = useState(0);
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const previousValue = useRef(0);
+
+  useEffect(() => {
+    // Listen to animated value changes
+    const listenerId = animatedValue.addListener(({ value: animValue }) => {
+      setDisplayValue(animValue);
+    });
+
+    // Animate from previous value to new value
+    Animated.timing(animatedValue, {
+      toValue: value,
+      duration,
+      useNativeDriver: false,
+    }).start();
+
+    previousValue.current = value;
+
+    return () => {
+      animatedValue.removeListener(listenerId);
+    };
+  }, [value, duration, animatedValue]);
+
+  // Format the display value
+  const formatValue = (val: number): string => {
+    const fixed = val.toFixed(decimals);
+
+    if (formatWithCommas) {
+      const parts = fixed.split('.');
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      return parts.join('.');
+    }
+
+    return fixed;
+  };
+
+  return (
+    <Text
+      className={cn(
+        'text-2xl font-bold text-gray-900 dark:text-white',
+        textClassName,
+        className
+      )}
+    >
+      {prefix}
+      {formatValue(displayValue)}
+      {suffix}
+    </Text>
+  );
+};

package/src/ui/AnimatedCounter/index.ts

@@ -0,0 +1,2 @@
+export { AnimatedCounter } from './AnimatedCounter';
+export type { AnimatedCounterProps } from './AnimatedCounter';

package/src/ui/AnimatedSection/AnimatedSection.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { Animated, ViewStyle } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export type AnimationType =
+  | 'fade-in'
+  | 'fade-in-up'
+  | 'fade-in-down'
+  | 'fade-in-left'
+  | 'fade-in-right'
+  | 'scale-in';
+
+export interface AnimatedSectionProps {
+  /** Animation type */
+  animation?: AnimationType;
+  /** Animation delay in milliseconds */
+  delay?: number;
+  /** Animation duration in milliseconds */
+  duration?: number;
+  /** Children to animate */
+  children: React.ReactNode;
+  /** Additional className */
+  className?: string;
+  /** Additional style */
+  style?: ViewStyle;
+}
+
+/**
+ * AnimatedSection Component
+ *
+ * Wrapper component that animates its children on mount.
+ * Supports various animation types for entrance animations.
+ *
+ * @example
+ * ```tsx
+ * <AnimatedSection animation="fade-in-up" delay={200}>
+ *   <Card>Content</Card>
+ * </AnimatedSection>
+ * ```
+ */
+export const AnimatedSection: React.FC<AnimatedSectionProps> = ({
+  animation = 'fade-in',
+  delay = 0,
+  duration = 400,
+  children,
+  className,
+  style,
+}) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(0)).current;
+  const translateX = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    // Set initial values based on animation type
+    switch (animation) {
+      case 'fade-in':
+        opacity.setValue(0);
+        break;
+      case 'fade-in-up':
+        opacity.setValue(0);
+        translateY.setValue(20);
+        break;
+      case 'fade-in-down':
+        opacity.setValue(0);
+        translateY.setValue(-20);
+        break;
+      case 'fade-in-left':
+        opacity.setValue(0);
+        translateX.setValue(-20);
+        break;
+      case 'fade-in-right':
+        opacity.setValue(0);
+        translateX.setValue(20);
+        break;
+      case 'scale-in':
+        opacity.setValue(0);
+        scale.setValue(0.9);
+        break;
+    }
+
+    // Animate to final values
+    const animations: Animated.CompositeAnimation[] = [];
+
+    animations.push(
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration,
+        delay,
+        useNativeDriver: true,
+      })
+    );
+
+    if (animation === 'fade-in-up' || animation === 'fade-in-down') {
+      animations.push(
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration,
+          delay,
+          useNativeDriver: true,
+        })
+      );
+    }
+
+    if (animation === 'fade-in-left' || animation === 'fade-in-right') {
+      animations.push(
+        Animated.timing(translateX, {
+          toValue: 0,
+          duration,
+          delay,
+          useNativeDriver: true,
+        })
+      );
+    }
+
+    if (animation === 'scale-in') {
+      animations.push(
+        Animated.timing(scale, {
+          toValue: 1,
+          duration,
+          delay,
+          useNativeDriver: true,
+        })
+      );
+    }
+
+    Animated.parallel(animations).start();
+  }, [animation, delay, duration, opacity, translateY, translateX, scale]);
+
+  return (
+    <Animated.View
+      className={cn(className)}
+      style={[
+        style,
+        {
+          opacity,
+          transform: [{ translateY }, { translateX }, { scale }],
+        },
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+// Utility components for common animation patterns
+export const FadeIn: React.FC<{
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+}> = ({ children, delay = 0, className }) => (
+  <AnimatedSection animation='fade-in' delay={delay} className={className}>
+    {children}
+  </AnimatedSection>
+);
+
+export const FadeInUp: React.FC<{
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+}> = ({ children, delay = 0, className }) => (
+  <AnimatedSection animation='fade-in-up' delay={delay} className={className}>
+    {children}
+  </AnimatedSection>
+);
+
+export const FadeInScale: React.FC<{
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+}> = ({ children, delay = 0, className }) => (
+  <AnimatedSection animation='scale-in' delay={delay} className={className}>
+    {children}
+  </AnimatedSection>
+);

package/src/ui/AnimatedSection/index.ts

@@ -0,0 +1,7 @@
+export {
+  AnimatedSection,
+  FadeIn,
+  FadeInUp,
+  FadeInScale,
+} from './AnimatedSection';
+export type { AnimatedSectionProps, AnimationType } from './AnimatedSection';

package/src/ui/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface AspectRatioProps {
+  /** Content to maintain aspect ratio */
+  children: React.ReactNode;
+  /** Aspect ratio (width/height or preset) */
+  ratio?: number | '16/9' | '4/3' | '1/1' | '21/9' | '3/2';
+  /** Additional className */
+  className?: string;
+  /** Fixed width (optional, defaults to full width) */
+  width?: number | 'full';
+}
+
+/**
+ * AspectRatio Component
+ *
+ * Maintains a specific aspect ratio for its content.
+ * Useful for responsive images, videos, and embeds.
+ *
+ * @example
+ * ```tsx
+ * <AspectRatio ratio="16/9">
+ *   <Image source={{ uri: '/image.jpg' }} style={{ flex: 1 }} />
+ * </AspectRatio>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <AspectRatio ratio={1.5} width={200}>
+ *   <View style={{ backgroundColor: 'blue', flex: 1 }} />
+ * </AspectRatio>
+ * ```
+ */
+export const AspectRatio: React.FC<AspectRatioProps> = ({
+  children,
+  ratio = '16/9',
+  className,
+  width = 'full',
+}) => {
+  const { width: screenWidth } = useWindowDimensions();
+
+  // Convert preset ratios to numbers
+  const ratioMap: Record<string, number> = {
+    '16/9': 16 / 9,
+    '4/3': 4 / 3,
+    '1/1': 1,
+    '21/9': 21 / 9,
+    '3/2': 3 / 2,
+  };
+
+  const numericRatio = typeof ratio === 'string' ? ratioMap[ratio] : ratio;
+
+  // Calculate container width
+  const containerWidth = width === 'full' ? screenWidth : width;
+
+  return (
+    <View
+      className={cn('relative overflow-hidden', className)}
+      style={{
+        width: width === 'full' ? '100%' : containerWidth,
+        aspectRatio: numericRatio,
+      }}
+    >
+      <View className='absolute inset-0'>{children}</View>
+    </View>
+  );
+};

package/src/ui/AspectRatio/index.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps } from './AspectRatio';

package/src/ui/Avatar/Avatar.tsx

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { View, Text, Image, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface AvatarProps {
+  /** Image source URL */
+  src?: string;
+  /** Alt text for image */
+  alt?: string;
+  /** Fallback text (initials) to display when no image */
+  fallback?: string;
+  /** Name to generate initials from */
+  name?: string;
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Show status indicator */
+  status?: 'online' | 'offline' | 'away' | 'busy';
+  /** Additional className */
+  className?: string;
+  /** Click handler */
+  onPress?: () => void;
+}
+
+/**
+ * Avatar Component
+ *
+ * Avatar component for displaying user images or initials.
+ *
+ * @example
+ * ```tsx
+ * // User image
+ * <Avatar src="https://example.com/avatar.jpg" alt="John Doe" fallback="JD" />
+ *
+ * // Generate initials from name
+ * <Avatar name="John Doe" />
+ *
+ * // With status indicator
+ * <Avatar src="/avatar.jpg" status="online" />
+ * ```
+ */
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt = 'Avatar',
+  fallback,
+  name,
+  size = 'md',
+  status,
+  className,
+  onPress,
+}) => {
+  const [imageError, setImageError] = useState(false);
+
+  // Size configurations
+  const sizeClasses = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-12 h-12',
+    xl: 'w-16 h-16',
+  };
+
+  const textSizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+    xl: 'text-lg',
+  };
+
+  const statusSizeClasses = {
+    xs: 'w-1.5 h-1.5',
+    sm: 'w-2 h-2',
+    md: 'w-2.5 h-2.5',
+    lg: 'w-3 h-3',
+    xl: 'w-4 h-4',
+  };
+
+  // Status indicator configurations
+  const statusClasses = {
+    online: 'bg-green-500',
+    offline: 'bg-gray-400',
+    away: 'bg-yellow-500',
+    busy: 'bg-red-500',
+  };
+
+  // Generate initials from name
+  const generateInitials = (name: string): string => {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+      return parts[0].charAt(0).toUpperCase();
+    }
+    return (
+      parts[0].charAt(0).toUpperCase() +
+      parts[parts.length - 1].charAt(0).toUpperCase()
+    );
+  };
+
+  // Determine what to display
+  const displayFallback = fallback || (name ? generateInitials(name) : '');
+  const showImage = src && !imageError;
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  const content = (
+    <View className='relative'>
+      <View
+        className={cn(
+          'flex items-center justify-center overflow-hidden rounded-full',
+          sizeClasses[size],
+          !showImage && 'bg-gray-300 dark:bg-gray-600',
+          className
+        )}
+      >
+        {showImage ? (
+          <Image
+            source={{ uri: src }}
+            className='w-full h-full'
+            accessibilityLabel={alt}
+            onError={handleImageError}
+          />
+        ) : (
+          <Text
+            className={cn(
+              'font-semibold text-gray-700 dark:text-gray-200',
+              textSizeClasses[size]
+            )}
+          >
+            {displayFallback}
+          </Text>
+        )}
+      </View>
+      {status && (
+        <View
+          className={cn(
+            'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-gray-800',
+            statusClasses[status],
+            statusSizeClasses[size]
+          )}
+          accessibilityLabel={status}
+        />
+      )}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        accessibilityRole='button'
+        accessibilityLabel={alt}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
+};
+
+export interface AvatarGroupProps {
+  /** Avatar components */
+  children: React.ReactNode;
+  /** Maximum number of avatars to show */
+  max?: number;
+  /** Size for all avatars */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * AvatarGroup - Display multiple avatars in a stack
+ */
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  children,
+  max = 5,
+  size = 'md',
+  className,
+}) => {
+  const childArray = React.Children.toArray(children);
+  const excess = childArray.length - max;
+  const visibleChildren = childArray.slice(0, max);
+
+  // Overlap amounts based on size
+  const overlapClasses = {
+    xs: '-ml-2',
+    sm: '-ml-2',
+    md: '-ml-3',
+    lg: '-ml-4',
+    xl: '-ml-5',
+  };
+
+  return (
+    <View className={cn('flex flex-row items-center', className)}>
+      {visibleChildren.map((child, index) => (
+        <View
+          key={index}
+          className={cn(index > 0 && overlapClasses[size])}
+          style={{ zIndex: visibleChildren.length - index }}
+        >
+          {React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<AvatarProps>, {
+                size,
+              })
+            : child}
+        </View>
+      ))}
+      {excess > 0 && (
+        <View
+          className={cn(
+            overlapClasses[size],
+            'flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-600',
+            {
+              xs: 'w-6 h-6',
+              sm: 'w-8 h-8',
+              md: 'w-10 h-10',
+              lg: 'w-12 h-12',
+              xl: 'w-16 h-16',
+            }[size]
+          )}
+        >
+          <Text
+            className={cn(
+              'font-medium text-gray-700 dark:text-gray-200',
+              {
+                xs: 'text-xs',
+                sm: 'text-xs',
+                md: 'text-sm',
+                lg: 'text-base',
+                xl: 'text-lg',
+              }[size]
+            )}
+          >
+            +{excess}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from './Avatar';
+export type { AvatarProps, AvatarGroupProps } from './Avatar';

package/src/ui/Backdrop/Backdrop.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface BackdropProps {
+  /** Whether the backdrop is visible */
+  isOpen: boolean;
+  /** Press handler for backdrop */
+  onPress?: () => void;
+  /** Backdrop opacity variant */
+  opacity?: 'light' | 'medium' | 'dark';
+  /** Children to render on top of backdrop */
+  children?: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Backdrop Component
+ *
+ * Reusable backdrop/overlay for modals, drawers, and dialogs.
+ * Provides consistent darkening effect.
+ *
+ * @example
+ * ```tsx
+ * <Backdrop isOpen={isModalOpen} onPress={closeModal}>
+ *   <View onStartShouldSetResponder={() => true}>
+ *     <ModalContent />
+ *   </View>
+ * </Backdrop>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Backdrop
+ *   isOpen={isDrawerOpen}
+ *   onPress={closeDrawer}
+ *   opacity="medium"
+ * >
+ *   <Drawer />
+ * </Backdrop>
+ * ```
+ */
+export const Backdrop: React.FC<BackdropProps> = ({
+  isOpen,
+  onPress,
+  opacity = 'medium',
+  children,
+  className,
+}) => {
+  if (!isOpen) return null;
+
+  // Opacity configurations
+  const opacityClasses = {
+    light: 'bg-black/20',
+    medium: 'bg-black/50',
+    dark: 'bg-black/75',
+  };
+
+  if (children) {
+    return (
+      <Pressable
+        onPress={onPress}
+        className={cn('absolute inset-0', opacityClasses[opacity], className)}
+        accessibilityRole='none'
+      >
+        <View
+          className='flex-1'
+          onStartShouldSetResponder={() => true}
+          onResponderRelease={e => e.stopPropagation()}
+        >
+          {children}
+        </View>
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      className={cn('absolute inset-0', opacityClasses[opacity], className)}
+      accessibilityRole='none'
+    />
+  );
+};

package/src/ui/Backdrop/index.ts

@@ -0,0 +1,2 @@
+export { Backdrop } from './Backdrop';
+export type { BackdropProps } from './Backdrop';