@sudobility/components-rn 1.0.1

package/src/ui/List/List.tsx

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ListProps {
+  /** List items */
+  children: React.ReactNode;
+  /** List type */
+  type?: 'unordered' | 'ordered';
+  /** Spacing between items */
+  spacing?: 'none' | 'sm' | 'md' | 'lg';
+  /** Marker/bullet style */
+  marker?: 'disc' | 'circle' | 'square' | 'decimal' | 'alpha' | 'none';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+export interface ListItemProps {
+  /** List item content */
+  children: React.ReactNode;
+  /** Item index (for ordered lists) */
+  index?: number;
+  /** Marker type (inherited from List) */
+  marker?: 'disc' | 'circle' | 'square' | 'decimal' | 'alpha' | 'none';
+  /** List type (inherited from List) */
+  listType?: 'unordered' | 'ordered';
+  /** Size (inherited from List) */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+// Context for passing list props to items
+const ListContext = React.createContext<{
+  type: 'unordered' | 'ordered';
+  marker: 'disc' | 'circle' | 'square' | 'decimal' | 'alpha' | 'none';
+  size: 'sm' | 'md' | 'lg';
+}>({
+  type: 'unordered',
+  marker: 'disc',
+  size: 'md',
+});
+
+/**
+ * List Component
+ *
+ * List component with consistent styling and spacing options.
+ * Supports both ordered and unordered lists with various marker styles.
+ *
+ * @example
+ * ```tsx
+ * <List>
+ *   <ListItem>First item</ListItem>
+ *   <ListItem>Second item</ListItem>
+ *   <ListItem>Third item</ListItem>
+ * </List>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <List type="ordered" marker="decimal" spacing="md">
+ *   <ListItem>Step one</ListItem>
+ *   <ListItem>Step two</ListItem>
+ * </List>
+ * ```
+ */
+export const List: React.FC<ListProps> = ({
+  children,
+  type = 'unordered',
+  spacing = 'sm',
+  marker,
+  size = 'md',
+  className,
+}) => {
+  // Default marker based on type
+  const defaultMarker = type === 'ordered' ? 'decimal' : 'disc';
+  const actualMarker = marker || defaultMarker;
+
+  // Spacing configurations
+  const spacingClasses = {
+    none: 'gap-0',
+    sm: 'gap-1',
+    md: 'gap-2',
+    lg: 'gap-4',
+  };
+
+  // Clone children with index for ordered lists
+  const childrenWithIndex = React.Children.map(children, (child, index) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child as React.ReactElement<ListItemProps>, {
+        index: index + 1,
+      });
+    }
+    return child;
+  });
+
+  return (
+    <ListContext.Provider value={{ type, marker: actualMarker, size }}>
+      <View
+        className={cn('ml-4', spacingClasses[spacing], className)}
+        accessibilityRole='list'
+      >
+        {childrenWithIndex}
+      </View>
+    </ListContext.Provider>
+  );
+};
+
+/**
+ * ListItem Component
+ *
+ * Individual list item to be used within List component.
+ */
+export const ListItem: React.FC<ListItemProps> = ({
+  children,
+  index = 1,
+  className,
+}) => {
+  const { type, marker, size } = React.useContext(ListContext);
+
+  // Size configurations
+  const sizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  // Get marker symbol
+  const getMarker = (): string => {
+    if (marker === 'none') return '';
+
+    if (type === 'ordered') {
+      switch (marker) {
+        case 'decimal':
+          return `${index}.`;
+        case 'alpha':
+          return `${String.fromCharCode(96 + index)}.`;
+        default:
+          return `${index}.`;
+      }
+    } else {
+      switch (marker) {
+        case 'disc':
+          return '•';
+        case 'circle':
+          return '○';
+        case 'square':
+          return '▪';
+        default:
+          return '•';
+      }
+    }
+  };
+
+  const markerSymbol = getMarker();
+
+  return (
+    <View className={cn('flex flex-row', className)}>
+      {markerSymbol !== '' && (
+        <Text
+          className={cn(
+            'mr-2 text-gray-600 dark:text-gray-400',
+            sizeClasses[size],
+            type === 'ordered' ? 'w-6' : 'w-3'
+          )}
+        >
+          {markerSymbol}
+        </Text>
+      )}
+      <Text
+        className={cn(
+          'flex-1 text-gray-900 dark:text-gray-100 leading-relaxed',
+          sizeClasses[size]
+        )}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+};

package/src/ui/List/index.ts

@@ -0,0 +1,2 @@
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps } from './List';

package/src/ui/ListItemWithAction/ListItemWithAction.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { View, Text, Pressable, ActivityIndicator } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ListItemWithActionProps {
+  /** Main content/text to display */
+  children: React.ReactNode;
+  /** Action to perform */
+  onAction: () => void;
+  /** Action button text */
+  actionText?: string;
+  /** Action button icon */
+  actionIcon?: React.ReactNode;
+  /** Whether the action is destructive */
+  destructive?: boolean;
+  /** Whether the action is in progress */
+  isProcessing?: boolean;
+  /** Variant of the list item */
+  variant?: 'default' | 'compact' | 'elevated';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * ListItemWithAction Component
+ *
+ * Displays a list item with an action button (typically remove/delete).
+ * Commonly used for managing lists of items with actions.
+ *
+ * @example
+ * ```tsx
+ * <ListItemWithAction
+ *   onAction={() => handleRemove(item.id)}
+ *   actionText="Remove"
+ *   destructive
+ *   isProcessing={isDeleting}
+ * >
+ *   user@example.com
+ * </ListItemWithAction>
+ * ```
+ */
+export const ListItemWithAction: React.FC<ListItemWithActionProps> = ({
+  children,
+  onAction,
+  actionText = 'Remove',
+  actionIcon,
+  destructive = true,
+  isProcessing = false,
+  variant = 'default',
+  className,
+}) => {
+  const variantClasses = {
+    default: 'bg-gray-50 dark:bg-gray-700',
+    compact: 'bg-gray-50 dark:bg-gray-700 py-2 px-3',
+    elevated:
+      'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm',
+  };
+
+  return (
+    <View
+      className={cn(
+        'flex-row items-center justify-between p-4 rounded-lg',
+        variantClasses[variant],
+        className
+      )}
+    >
+      <View className='flex-1 mr-4'>
+        {typeof children === 'string' ? (
+          <Text className='text-sm text-gray-900 dark:text-white'>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </View>
+
+      <Pressable
+        onPress={onAction}
+        disabled={isProcessing}
+        className={cn(
+          'flex-row items-center px-3 py-1.5 rounded-md',
+          destructive
+            ? 'active:bg-red-50 dark:active:bg-red-900/20'
+            : 'bg-gray-100 dark:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500',
+          isProcessing && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={actionText}
+        accessibilityState={{ disabled: isProcessing }}
+      >
+        {isProcessing ? (
+          <ActivityIndicator
+            size='small'
+            color={destructive ? '#dc2626' : '#6b7280'}
+          />
+        ) : (
+          <>
+            {actionIcon && <View className='mr-1'>{actionIcon}</View>}
+            <Text
+              className={cn(
+                'text-sm font-medium',
+                destructive
+                  ? 'text-red-600 dark:text-red-400'
+                  : 'text-gray-700 dark:text-gray-300'
+              )}
+            >
+              {actionText}
+            </Text>
+          </>
+        )}
+      </Pressable>
+    </View>
+  );
+};

package/src/ui/ListItemWithAction/index.ts

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

package/src/ui/LoadingDots/LoadingDots.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import { View, Animated } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface LoadingDotsProps {
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color variant */
+  variant?: 'primary' | 'secondary' | 'white';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * LoadingDots Component
+ *
+ * Animated loading indicator with bouncing dots.
+ * Simple and lightweight alternative to spinners.
+ *
+ * @example
+ * ```tsx
+ * <LoadingDots size="md" variant="primary" />
+ * ```
+ */
+export const LoadingDots: React.FC<LoadingDotsProps> = ({
+  size = 'md',
+  variant = 'primary',
+  className,
+}) => {
+  const dot1Anim = useRef(new Animated.Value(0)).current;
+  const dot2Anim = useRef(new Animated.Value(0)).current;
+  const dot3Anim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const createAnimation = (animValue: Animated.Value, delay: number) => {
+      return Animated.loop(
+        Animated.sequence([
+          Animated.delay(delay),
+          Animated.timing(animValue, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+          Animated.timing(animValue, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+          Animated.delay(600 - delay),
+        ])
+      );
+    };
+
+    const anim1 = createAnimation(dot1Anim, 0);
+    const anim2 = createAnimation(dot2Anim, 150);
+    const anim3 = createAnimation(dot3Anim, 300);
+
+    anim1.start();
+    anim2.start();
+    anim3.start();
+
+    return () => {
+      anim1.stop();
+      anim2.stop();
+      anim3.stop();
+    };
+  }, [dot1Anim, dot2Anim, dot3Anim]);
+
+  const sizeClasses = {
+    sm: 'w-1.5 h-1.5',
+    md: 'w-2 h-2',
+    lg: 'w-3 h-3',
+  };
+
+  const variantClasses = {
+    primary: 'bg-blue-600 dark:bg-blue-500',
+    secondary: 'bg-gray-600 dark:bg-gray-400',
+    white: 'bg-white',
+  };
+
+  const gapClasses = {
+    sm: 'gap-1',
+    md: 'gap-1.5',
+    lg: 'gap-2',
+  };
+
+  const dotClass = cn(
+    'rounded-full',
+    sizeClasses[size],
+    variantClasses[variant]
+  );
+
+  const getAnimatedStyle = (animValue: Animated.Value) => ({
+    opacity: animValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0.3, 1],
+    }),
+    transform: [
+      {
+        scale: animValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.8, 1.2],
+        }),
+      },
+    ],
+  });
+
+  return (
+    <View
+      className={cn('flex flex-row items-center', gapClasses[size], className)}
+    >
+      <Animated.View className={dotClass} style={getAnimatedStyle(dot1Anim)} />
+      <Animated.View className={dotClass} style={getAnimatedStyle(dot2Anim)} />
+      <Animated.View className={dotClass} style={getAnimatedStyle(dot3Anim)} />
+    </View>
+  );
+};

package/src/ui/LoadingDots/index.ts

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

package/src/ui/LoadingOverlay/LoadingOverlay.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { View, Text, Modal } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Spinner } from '../Spinner';
+
+export interface LoadingOverlayProps {
+  /** Whether the overlay is visible */
+  isLoading: boolean;
+  /** Loading message */
+  message?: string;
+  /** Overlay mode */
+  mode?: 'fullscreen' | 'container';
+  /** Spinner size */
+  spinnerSize?: 'small' | 'default' | 'large' | 'extraLarge';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * LoadingOverlay Component
+ *
+ * Full-screen or container loading overlay with spinner and optional message.
+ * Useful for async operations, page loads, and data fetching.
+ *
+ * @example
+ * ```tsx
+ * <LoadingOverlay
+ *   isLoading={isSubmitting}
+ *   message="Saving changes..."
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <View className="relative flex-1">
+ *   <LoadingOverlay
+ *     isLoading={isLoading}
+ *     mode="container"
+ *   />
+ *   <YourContent />
+ * </View>
+ * ```
+ */
+export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
+  isLoading,
+  message,
+  mode = 'fullscreen',
+  spinnerSize = 'large',
+  className,
+}) => {
+  if (!isLoading) return null;
+
+  const content = (
+    <View
+      className={cn(
+        mode === 'fullscreen' ? 'flex-1' : 'absolute inset-0',
+        'items-center justify-center',
+        'bg-white/80 dark:bg-gray-900/80',
+        className
+      )}
+      accessibilityRole='alert'
+      accessibilityLabel={message || 'Loading'}
+    >
+      <Spinner size={spinnerSize} />
+      {message && (
+        <Text className='text-base text-gray-700 dark:text-gray-300 mt-4'>
+          {message}
+        </Text>
+      )}
+    </View>
+  );
+
+  // Fullscreen mode uses Modal
+  if (mode === 'fullscreen') {
+    return (
+      <Modal
+        visible={isLoading}
+        transparent
+        animationType='fade'
+        statusBarTranslucent
+      >
+        {content}
+      </Modal>
+    );
+  }
+
+  // Container mode renders inline
+  return content;
+};

package/src/ui/LoadingOverlay/index.ts

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

package/src/ui/Logo/Logo.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  Pressable,
+  ImageSourcePropType,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface LogoProps {
+  /** Logo size */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Additional className */
+  className?: string;
+  /** Show text alongside logo */
+  showText?: boolean;
+  /** Press handler */
+  onPress?: () => void;
+  /** Logo image source */
+  logoSource?: ImageSourcePropType;
+  /** Logo alt text */
+  logoAlt?: string;
+  /** Logo text (required) */
+  logoText: string;
+}
+
+/**
+ * Logo Component
+ *
+ * Displays a logo with optional text.
+ * Supports multiple sizes and optional press handler.
+ *
+ * @example
+ * ```tsx
+ * <Logo
+ *   logoText="MyApp"
+ *   logoSource={require('./assets/logo.png')}
+ *   size="lg"
+ *   onPress={() => navigation.navigate('Home')}
+ * />
+ * ```
+ */
+export const Logo: React.FC<LogoProps> = ({
+  size = 'md',
+  className,
+  showText = true,
+  onPress,
+  logoSource,
+  logoAlt = 'Logo',
+  logoText,
+}) => {
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      container: 'gap-2',
+      image: { width: 24, height: 24 },
+      text: 'text-lg',
+    },
+    md: {
+      container: 'gap-2',
+      image: { width: 32, height: 32 },
+      text: 'text-2xl',
+    },
+    lg: {
+      container: 'gap-3',
+      image: { width: 40, height: 40 },
+      text: 'text-3xl',
+    },
+    xl: {
+      container: 'gap-4',
+      image: { width: 48, height: 48 },
+      text: 'text-4xl',
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  const logoContent = (
+    <>
+      {logoSource && (
+        <Image
+          source={logoSource}
+          style={config.image}
+          accessibilityLabel={logoAlt}
+          resizeMode='contain'
+        />
+      )}
+      {showText && (
+        <Text
+          className={cn(
+            'font-bold text-gray-900 dark:text-gray-100',
+            config.text
+          )}
+        >
+          {logoText}
+        </Text>
+      )}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        className={cn(
+          'flex-row items-center',
+          config.container,
+          'active:opacity-80',
+          className
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={`${logoText} logo`}
+      >
+        {logoContent}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      className={cn('flex-row items-center', config.container, className)}
+      accessibilityRole='image'
+      accessibilityLabel={`${logoText} logo`}
+    >
+      {logoContent}
+    </View>
+  );
+};

package/src/ui/Logo/index.ts

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

package/src/ui/Masonry/Masonry.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface MasonryProps {
+  /** Children elements */
+  children: React.ReactNode;
+  /** Number of columns */
+  columns?: number;
+  /** Gap between items */
+  gap?: number;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Masonry Component
+ *
+ * Pinterest-style masonry grid layout for React Native.
+ * Distributes items across columns for optimal spacing.
+ *
+ * @example
+ * ```tsx
+ * <Masonry columns={2} gap={16}>
+ *   {items.map(item => <Card key={item.id}>{item.content}</Card>)}
+ * </Masonry>
+ * ```
+ */
+export const Masonry: React.FC<MasonryProps> = ({
+  children,
+  columns = 2,
+  gap = 16,
+  className,
+}) => {
+  // Distribute items into columns
+  const childArray = React.Children.toArray(children);
+  const columnArrays: React.ReactNode[][] = Array.from(
+    { length: columns },
+    () => []
+  );
+
+  childArray.forEach((child, index) => {
+    columnArrays[index % columns].push(child);
+  });
+
+  return (
+    <View className={cn('flex-row', className)} style={{ gap }}>
+      {columnArrays.map((column, columnIndex) => (
+        <View key={columnIndex} className='flex-1' style={{ gap }}>
+          {column.map((item, itemIndex) => (
+            <View key={itemIndex}>{item}</View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+};