@sudobility/components-rn 1.0.1

package/src/ui/FeatureCard/FeatureCard.tsx

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export type FeatureCardColor =
+  | 'green'
+  | 'blue'
+  | 'purple'
+  | 'orange'
+  | 'red'
+  | 'indigo'
+  | 'cyan'
+  | 'emerald'
+  | 'pink'
+  | 'gray';
+
+export interface FeatureCardProps {
+  /** Icon or emoji to display */
+  icon: React.ReactNode;
+  /** Title of the feature */
+  title: string;
+  /** Description of the feature */
+  description: string;
+  /** List of benefits (shown as bullet points) */
+  benefits?: string[];
+  /** Metrics to display */
+  metrics?: { [key: string]: string };
+  /** Color theme */
+  color?: FeatureCardColor;
+  /** Highlight with gradient background */
+  isHighlight?: boolean;
+  /** Optional CTA element */
+  cta?: React.ReactNode;
+  /** Press handler */
+  onPress?: () => void;
+  /** Show colored left border */
+  borderColor?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * FeatureCard Component
+ *
+ * Card component for displaying features with icon, title, description,
+ * benefits, and metrics.
+ *
+ * @example
+ * ```tsx
+ * <FeatureCard
+ *   icon={<ShieldIcon />}
+ *   title="Security"
+ *   description="End-to-end encryption for all your data"
+ *   benefits={['256-bit encryption', 'Zero-knowledge architecture']}
+ *   color="blue"
+ * />
+ * ```
+ */
+export const FeatureCard: React.FC<FeatureCardProps> = ({
+  icon,
+  title,
+  description,
+  benefits,
+  metrics,
+  color = 'blue',
+  isHighlight = false,
+  cta,
+  onPress,
+  borderColor = false,
+  className,
+}) => {
+  // Color configurations
+  const colorClasses: Record<FeatureCardColor, string> = {
+    blue: 'text-blue-600 dark:text-blue-400',
+    green: 'text-green-600 dark:text-green-400',
+    purple: 'text-purple-600 dark:text-purple-400',
+    orange: 'text-orange-600 dark:text-orange-400',
+    pink: 'text-pink-600 dark:text-pink-400',
+    gray: 'text-gray-600 dark:text-gray-400',
+    red: 'text-red-600 dark:text-red-400',
+    indigo: 'text-indigo-600 dark:text-indigo-400',
+    cyan: 'text-cyan-600 dark:text-cyan-400',
+    emerald: 'text-emerald-600 dark:text-emerald-400',
+  };
+
+  const borderColorClasses: Record<FeatureCardColor, string> = {
+    green: 'border-l-4 border-l-green-500',
+    blue: 'border-l-4 border-l-blue-500',
+    purple: 'border-l-4 border-l-purple-500',
+    orange: 'border-l-4 border-l-orange-500',
+    red: 'border-l-4 border-l-red-500',
+    indigo: 'border-l-4 border-l-indigo-500',
+    cyan: 'border-l-4 border-l-cyan-500',
+    emerald: 'border-l-4 border-l-emerald-500',
+    pink: 'border-l-4 border-l-pink-500',
+    gray: 'border-l-4 border-l-gray-500',
+  };
+
+  const iconBackgroundClasses: Record<FeatureCardColor, string> = {
+    green: 'bg-green-100 dark:bg-green-900/20',
+    blue: 'bg-blue-100 dark:bg-blue-900/20',
+    purple: 'bg-purple-100 dark:bg-purple-900/20',
+    orange: 'bg-orange-100 dark:bg-orange-900/20',
+    red: 'bg-red-100 dark:bg-red-900/20',
+    indigo: 'bg-indigo-100 dark:bg-indigo-900/20',
+    cyan: 'bg-cyan-100 dark:bg-cyan-900/20',
+    emerald: 'bg-emerald-100 dark:bg-emerald-900/20',
+    pink: 'bg-pink-100 dark:bg-pink-900/20',
+    gray: 'bg-gray-100 dark:bg-gray-900/20',
+  };
+
+  const bulletColorClasses: Record<FeatureCardColor, string> = {
+    green: 'bg-green-500',
+    blue: 'bg-blue-500',
+    purple: 'bg-purple-500',
+    orange: 'bg-orange-500',
+    red: 'bg-red-500',
+    indigo: 'bg-indigo-500',
+    cyan: 'bg-cyan-500',
+    emerald: 'bg-emerald-500',
+    pink: 'bg-pink-500',
+    gray: 'bg-gray-500',
+  };
+
+  const CardContent = () => (
+    <>
+      {/* Icon */}
+      {borderColor ? (
+        <View
+          className={cn(
+            'w-12 h-12 rounded-lg items-center justify-center mb-4',
+            iconBackgroundClasses[color]
+          )}
+        >
+          <View className={colorClasses[color]}>{icon}</View>
+        </View>
+      ) : (
+        <View className={cn('mb-4', colorClasses[color])}>{icon}</View>
+      )}
+
+      {/* Title */}
+      <Text className='text-xl font-semibold text-gray-900 dark:text-white mb-3'>
+        {title}
+      </Text>
+
+      {/* Description */}
+      <Text className='text-gray-600 dark:text-gray-300 mb-4 leading-relaxed'>
+        {description}
+      </Text>
+
+      {/* CTA */}
+      {cta && <View className='mt-3 mb-4'>{cta}</View>}
+
+      {/* Benefits */}
+      {benefits && benefits.length > 0 && (
+        <View className='gap-2 mb-4'>
+          {benefits.map((benefit, index) => (
+            <View key={index} className='flex-row items-start'>
+              <View
+                className={cn(
+                  'w-2 h-2 rounded-full mt-2 mr-3',
+                  bulletColorClasses[color]
+                )}
+              />
+              <Text className='flex-1 text-sm text-gray-600 dark:text-gray-400'>
+                {benefit}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {/* Metrics */}
+      {metrics && Object.keys(metrics).length > 0 && (
+        <View className='flex-row flex-wrap gap-4 mt-4'>
+          {Object.entries(metrics).map(([key, value], index) => (
+            <View
+              key={index}
+              className='flex-1 min-w-[80px] items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg'
+            >
+              <Text className={cn('text-lg font-bold', colorClasses[color])}>
+                {value}
+              </Text>
+              <Text className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                {key}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
+    </>
+  );
+
+  const baseClasses = cn(
+    'p-6 rounded-xl',
+    borderColor && borderColorClasses[color],
+    isHighlight
+      ? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
+      : 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
+    className
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        className={baseClasses}
+        accessibilityRole='button'
+        accessibilityLabel={title}
+      >
+        <CardContent />
+      </Pressable>
+    );
+  }
+
+  return (
+    <View className={baseClasses}>
+      <CardContent />
+    </View>
+  );
+};

package/src/ui/FeatureCard/index.ts

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

package/src/ui/FeatureGrid/FeatureGrid.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface Feature {
+  /** Unique identifier */
+  id?: string;
+  /** Icon element */
+  icon: React.ReactNode;
+  /** Feature title */
+  title: string;
+  /** Feature description */
+  description: string | React.ReactNode;
+  /** Badge text and variant */
+  badge?: {
+    text: string;
+    variant?: 'success' | 'info' | 'warning' | 'default';
+  };
+}
+
+export interface FeatureGridProps {
+  /** Array of features to display */
+  features: Feature[];
+  /** Number of columns */
+  columns?: 1 | 2 | 3 | 4;
+  /** Gap between items */
+  gap?: 'sm' | 'md' | 'lg';
+  /** Card style variant */
+  cardVariant?: 'default' | 'card' | 'minimal';
+  /** Icon size */
+  iconSize?: 'sm' | 'md' | 'lg';
+  /** Feature press handler */
+  onFeaturePress?: (feature: Feature) => void;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * FeatureGrid Component
+ *
+ * Grid layout for displaying feature cards.
+ *
+ * @example
+ * ```tsx
+ * <FeatureGrid
+ *   features={[
+ *     { icon: <Icon1 />, title: 'Feature 1', description: 'Description 1' },
+ *     { icon: <Icon2 />, title: 'Feature 2', description: 'Description 2' },
+ *   ]}
+ *   columns={2}
+ * />
+ * ```
+ */
+export const FeatureGrid: React.FC<FeatureGridProps> = ({
+  features,
+  columns = 2,
+  gap = 'md',
+  cardVariant = 'default',
+  iconSize = 'md',
+  onFeaturePress,
+  className,
+}) => {
+  const gapClasses = {
+    sm: 'gap-4',
+    md: 'gap-6',
+    lg: 'gap-8',
+  };
+
+  const iconSizeClasses = {
+    sm: 'w-12 h-12',
+    md: 'w-16 h-16',
+    lg: 'w-20 h-20',
+  };
+
+  const badgeVariants = {
+    success:
+      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
+    info: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300',
+    warning:
+      'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300',
+    default: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300',
+  };
+
+  const renderFeature = (feature: Feature, index: number) => {
+    const content = (
+      <View
+        className={cn(
+          'items-center',
+          cardVariant === 'card' &&
+            'bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg',
+          cardVariant === 'minimal' && 'gap-4'
+        )}
+      >
+        {/* Badge */}
+        {feature.badge && (
+          <View className='mb-4'>
+            <View
+              className={cn(
+                'px-2.5 py-0.5 rounded-full',
+                badgeVariants[feature.badge.variant || 'default']
+              )}
+            >
+              <Text className='text-xs font-medium'>{feature.badge.text}</Text>
+            </View>
+          </View>
+        )}
+
+        {/* Icon */}
+        <View
+          className={cn(
+            'items-center justify-center rounded-2xl mb-4',
+            'bg-blue-100 dark:bg-blue-900/30',
+            iconSizeClasses[iconSize]
+          )}
+        >
+          <View className='text-blue-600 dark:text-blue-400'>
+            {feature.icon}
+          </View>
+        </View>
+
+        {/* Title */}
+        <Text className='text-lg font-bold text-gray-900 dark:text-white mb-2 text-center'>
+          {feature.title}
+        </Text>
+
+        {/* Description */}
+        {typeof feature.description === 'string' ? (
+          <Text className='text-gray-600 dark:text-gray-300 text-center leading-relaxed'>
+            {feature.description}
+          </Text>
+        ) : (
+          feature.description
+        )}
+      </View>
+    );
+
+    if (onFeaturePress) {
+      return (
+        <Pressable
+          key={feature.id || index}
+          onPress={() => onFeaturePress(feature)}
+          className='flex-1'
+          style={{ minWidth: `${100 / columns - 5}%` }}
+          accessibilityRole='button'
+          accessibilityLabel={feature.title}
+        >
+          {content}
+        </Pressable>
+      );
+    }
+
+    return (
+      <View
+        key={feature.id || index}
+        className='flex-1'
+        style={{ minWidth: `${100 / columns - 5}%` }}
+      >
+        {content}
+      </View>
+    );
+  };
+
+  return (
+    <View className={cn('flex-row flex-wrap', gapClasses[gap], className)}>
+      {features.map(renderFeature)}
+    </View>
+  );
+};
+
+// Helper function to create feature objects
+export const createFeature = (
+  icon: React.ReactNode,
+  title: string,
+  description: string | React.ReactNode,
+  options?: Partial<Feature>
+): Feature => ({
+  icon,
+  title,
+  description,
+  ...options,
+});

package/src/ui/FeatureGrid/index.ts

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

package/src/ui/FileInput/FileInput.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import { View, Text, Pressable, ScrollView } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface FileInfo {
+  /** File name */
+  name: string;
+  /** File size in bytes */
+  size: number;
+  /** File type/mime */
+  type?: string;
+  /** File URI (for RN) */
+  uri?: string;
+}
+
+export interface FileInputProps {
+  /** Callback when files should be selected (opens picker) */
+  onSelectFiles: () => void;
+  /** Current files */
+  files?: FileInfo[];
+  /** Callback to remove a file */
+  onRemove?: (index: number) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Show drop zone style */
+  showDropZone?: boolean;
+  /** Show file list */
+  showFileList?: boolean;
+  /** Maximum file size in bytes (for display) */
+  maxSize?: number;
+  /** Button text */
+  buttonText?: string;
+  /** Drop zone text */
+  dropZoneText?: string;
+  /** Error message */
+  error?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * FileInput Component
+ *
+ * File input button/zone that triggers file selection callback.
+ * The actual file picking should be handled by the parent using
+ * expo-document-picker or similar library.
+ *
+ * @example
+ * ```tsx
+ * <FileInput
+ *   onSelectFiles={pickDocuments}
+ *   files={selectedFiles}
+ *   onRemove={removeFile}
+ *   showDropZone
+ * />
+ * ```
+ */
+export const FileInput: React.FC<FileInputProps> = ({
+  onSelectFiles,
+  files = [],
+  onRemove,
+  disabled = false,
+  showDropZone = false,
+  showFileList = true,
+  maxSize,
+  buttonText = 'Choose Files',
+  dropZoneText = 'Tap to select files',
+  error,
+  className,
+}) => {
+  // Format file size to human-readable string
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  // Drop zone UI
+  if (showDropZone) {
+    return (
+      <View className={cn('w-full', className)}>
+        <Pressable
+          onPress={onSelectFiles}
+          disabled={disabled}
+          className={cn(
+            'border-2 border-dashed rounded-lg p-8',
+            'border-gray-300 dark:border-gray-600',
+            'active:border-blue-500 active:bg-blue-50 dark:active:bg-blue-900/10',
+            disabled && 'opacity-50'
+          )}
+          accessibilityRole='button'
+          accessibilityLabel={buttonText}
+          accessibilityState={{ disabled }}
+        >
+          <View className='items-center justify-center gap-3'>
+            <Text className='text-4xl text-gray-400 dark:text-gray-500'>
+              📁
+            </Text>
+            <Text className='text-sm text-gray-600 dark:text-gray-400 text-center'>
+              {dropZoneText}
+            </Text>
+            {maxSize && (
+              <Text className='text-xs text-gray-500 dark:text-gray-500'>
+                Max file size: {formatFileSize(maxSize)}
+              </Text>
+            )}
+          </View>
+        </Pressable>
+
+        {error && (
+          <Text className='mt-2 text-sm text-red-600 dark:text-red-400'>
+            {error}
+          </Text>
+        )}
+
+        {showFileList && files.length > 0 && (
+          <FileList
+            files={files}
+            onRemove={onRemove}
+            formatFileSize={formatFileSize}
+          />
+        )}
+      </View>
+    );
+  }
+
+  // Button UI
+  return (
+    <View className={cn('w-full', className)}>
+      <Pressable
+        onPress={onSelectFiles}
+        disabled={disabled}
+        className={cn(
+          'flex-row items-center px-4 py-2',
+          'border border-gray-300 dark:border-gray-600',
+          'rounded-lg',
+          'bg-white dark:bg-gray-800',
+          'active:bg-gray-50 dark:active:bg-gray-700',
+          disabled && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={buttonText}
+        accessibilityState={{ disabled }}
+      >
+        <Text className='text-lg mr-2'>📄</Text>
+        <Text className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+          {buttonText}
+        </Text>
+      </Pressable>
+
+      {error && (
+        <Text className='mt-2 text-sm text-red-600 dark:text-red-400'>
+          {error}
+        </Text>
+      )}
+
+      {showFileList && files.length > 0 && (
+        <FileList
+          files={files}
+          onRemove={onRemove}
+          formatFileSize={formatFileSize}
+        />
+      )}
+    </View>
+  );
+};
+
+/**
+ * FileList Component - Internal
+ */
+const FileList: React.FC<{
+  files: FileInfo[];
+  onRemove?: (index: number) => void;
+  formatFileSize: (bytes: number) => string;
+}> = ({ files, onRemove, formatFileSize }) => {
+  return (
+    <ScrollView className='mt-3 max-h-48'>
+      {files.map((file, index) => (
+        <View
+          key={`${file.name}-${index}`}
+          className='flex-row items-center justify-between p-2 mb-2 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700'
+        >
+          <View className='flex-row items-center flex-1 mr-2'>
+            <Text className='text-lg mr-2'>📄</Text>
+            <View className='flex-1'>
+              <Text
+                className='text-sm font-medium text-gray-900 dark:text-gray-100'
+                numberOfLines={1}
+              >
+                {file.name}
+              </Text>
+              <Text className='text-xs text-gray-500 dark:text-gray-400'>
+                {formatFileSize(file.size)}
+              </Text>
+            </View>
+          </View>
+
+          {onRemove && (
+            <Pressable
+              onPress={() => onRemove(index)}
+              className='p-1 active:bg-red-100 dark:active:bg-red-900/20 rounded'
+              accessibilityRole='button'
+              accessibilityLabel='Remove file'
+            >
+              <Text className='text-red-500 dark:text-red-400'>✕</Text>
+            </Pressable>
+          )}
+        </View>
+      ))}
+    </ScrollView>
+  );
+};

package/src/ui/FileInput/index.ts

@@ -0,0 +1,2 @@
+export { FileInput } from './FileInput';
+export type { FileInputProps, FileInfo } from './FileInput';