@sudobility/components-rn 1.0.1

package/src/ui/Select/Select.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  FlatList,
+  SafeAreaView,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  /** Currently selected value */
+  value?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string) => void;
+  /** Options to display */
+  options: SelectOption[];
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Whether the select is disabled */
+  disabled?: boolean;
+  /** Additional className for the trigger */
+  className?: string;
+  /** Title for the modal */
+  title?: string;
+}
+
+/**
+ * Select Component
+ *
+ * Dropdown select component using a modal picker for React Native.
+ * Provides a native-feeling selection experience.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   value={selectedValue}
+ *   onValueChange={setSelectedValue}
+ *   options={[
+ *     { label: 'Option 1', value: '1' },
+ *     { label: 'Option 2', value: '2' },
+ *     { label: 'Option 3', value: '3' },
+ *   ]}
+ *   placeholder="Select an option..."
+ * />
+ * ```
+ */
+export const Select: React.FC<SelectProps> = ({
+  value,
+  onValueChange,
+  options,
+  placeholder = 'Select...',
+  disabled = false,
+  className,
+  title = 'Select Option',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedOption = options.find(opt => opt.value === value);
+
+  const handleSelect = useCallback(
+    (optionValue: string) => {
+      onValueChange?.(optionValue);
+      setIsOpen(false);
+    },
+    [onValueChange]
+  );
+
+  const renderOption = ({ item }: { item: SelectOption; index: number }) => (
+    <Pressable
+      onPress={() => !item.disabled && handleSelect(item.value)}
+      disabled={item.disabled}
+      className={cn(
+        'px-4 py-3 border-b border-gray-200 dark:border-gray-700',
+        item.value === value && 'bg-blue-50 dark:bg-blue-900/30',
+        item.disabled && 'opacity-50'
+      )}
+      accessibilityRole='button'
+      accessibilityState={{
+        selected: item.value === value,
+        disabled: item.disabled,
+      }}
+    >
+      <View className='flex flex-row items-center justify-between'>
+        <Text
+          className={cn(
+            'text-base',
+            item.value === value
+              ? 'text-blue-600 dark:text-blue-400 font-medium'
+              : 'text-gray-900 dark:text-gray-100'
+          )}
+        >
+          {item.label}
+        </Text>
+        {item.value === value && (
+          <Text className='text-blue-600 dark:text-blue-400'>✓</Text>
+        )}
+      </View>
+    </Pressable>
+  );
+
+  return (
+    <>
+      {/* Trigger */}
+      <Pressable
+        onPress={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        className={cn(
+          'flex flex-row items-center justify-between h-11 px-3 py-2 rounded-md border',
+          'border-gray-300 dark:border-gray-600',
+          'bg-white dark:bg-gray-800',
+          disabled && 'opacity-50',
+          className
+        )}
+        accessibilityRole='combobox'
+        accessibilityState={{ disabled, expanded: isOpen }}
+      >
+        <Text
+          className={cn(
+            'text-base flex-1',
+            selectedOption
+              ? 'text-gray-900 dark:text-gray-100'
+              : 'text-gray-400 dark:text-gray-500'
+          )}
+          numberOfLines={1}
+        >
+          {selectedOption?.label || placeholder}
+        </Text>
+        <Text className='text-gray-400 dark:text-gray-500 ml-2'>▼</Text>
+      </Pressable>
+
+      {/* Modal Picker */}
+      <Modal
+        visible={isOpen}
+        animationType='slide'
+        transparent
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <View className='flex-1 justify-end bg-black/50'>
+          <SafeAreaView className='bg-white dark:bg-gray-800 rounded-t-xl'>
+            {/* Header */}
+            <View className='flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700'>
+              <Pressable onPress={() => setIsOpen(false)}>
+                <Text className='text-blue-600 dark:text-blue-400 text-base'>
+                  Cancel
+                </Text>
+              </Pressable>
+              <Text className='text-base font-semibold text-gray-900 dark:text-white'>
+                {title}
+              </Text>
+              <View style={{ width: 60 }} />
+            </View>
+
+            {/* Options */}
+            <FlatList
+              data={options}
+              renderItem={renderOption}
+              keyExtractor={(item: SelectOption) => item.value}
+              style={{ maxHeight: 300 }}
+            />
+          </SafeAreaView>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+/**
+ * SelectTrigger - For compound component pattern
+ */
+export const SelectTrigger = Select;
+
+/**
+ * SelectValue - Display component for the selected value
+ */
+export const SelectValue: React.FC<{ placeholder?: string }> = ({
+  placeholder = 'Select...',
+}) => <Text className='text-gray-400 dark:text-gray-500'>{placeholder}</Text>;

package/src/ui/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select, SelectTrigger, SelectValue } from './Select';
+export type { SelectProps, SelectOption } from './Select';

package/src/ui/Separator/Separator.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SeparatorProps {
+  /** Separator orientation */
+  orientation?: 'horizontal' | 'vertical';
+  /** Spacing around separator */
+  spacing?: 'none' | 'sm' | 'md' | 'lg';
+  /** Line thickness */
+  thickness?: 'thin' | 'medium' | 'thick';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Separator Component
+ *
+ * Simple horizontal or vertical line separator.
+ * Use for visual separation in menus, lists, and layouts.
+ *
+ * @example
+ * ```tsx
+ * <View>
+ *   <MenuItem>Option 1</MenuItem>
+ *   <Separator />
+ *   <MenuItem>Option 2</MenuItem>
+ * </View>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <View className="flex flex-row items-center gap-4">
+ *   <Button>Action 1</Button>
+ *   <Separator orientation="vertical" spacing="md" />
+ *   <Button>Action 2</Button>
+ * </View>
+ * ```
+ */
+export const Separator: React.FC<SeparatorProps> = ({
+  orientation = 'horizontal',
+  spacing = 'md',
+  thickness = 'thin',
+  className,
+}) => {
+  // Spacing configurations
+  const spacingClasses = {
+    horizontal: {
+      none: '',
+      sm: 'my-1',
+      md: 'my-2',
+      lg: 'my-4',
+    },
+    vertical: {
+      none: '',
+      sm: 'mx-1',
+      md: 'mx-2',
+      lg: 'mx-4',
+    },
+  };
+
+  // Thickness configurations
+  const thicknessClasses = {
+    horizontal: {
+      thin: 'h-px',
+      medium: 'h-0.5',
+      thick: 'h-1',
+    },
+    vertical: {
+      thin: 'w-px',
+      medium: 'w-0.5',
+      thick: 'w-1',
+    },
+  };
+
+  const isHorizontal = orientation === 'horizontal';
+
+  return (
+    <View
+      accessibilityRole='none'
+      className={cn(
+        'bg-gray-200 dark:bg-gray-700',
+        isHorizontal ? 'w-full' : 'h-full',
+        thicknessClasses[orientation][thickness],
+        spacingClasses[orientation][spacing],
+        className
+      )}
+    />
+  );
+};

package/src/ui/Separator/index.ts

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

package/src/ui/SettingsList/SettingsList.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+/**
+ * Setting item interface
+ */
+export interface SettingItem {
+  /** Unique identifier */
+  id: string;
+  /** Setting title */
+  title: string;
+  /** Icon component or element */
+  icon?: React.ReactNode;
+  /** Optional description */
+  description?: string;
+}
+
+export interface SettingsListProps {
+  /** Array of setting items to display */
+  settings: SettingItem[];
+  /** Currently selected setting ID */
+  selectedSetting?: string;
+  /** Callback when a setting is selected */
+  onSettingSelect: (settingId: string) => void;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SettingsList Component
+ *
+ * Displays a list of setting items for navigation, similar to how
+ * mailboxes are displayed in a mail client sidebar.
+ *
+ * Features:
+ * - Each item shows an icon and title
+ * - Highlights the currently selected setting
+ * - Active states for better UX
+ * - Dark mode support
+ * - Accessible navigation
+ *
+ * @example
+ * ```tsx
+ * <SettingsList
+ *   settings={[
+ *     { id: 'general', title: 'General', icon: <CogIcon /> },
+ *     { id: 'forwarding', title: 'Forwarding', icon: <ArrowRightIcon /> },
+ *   ]}
+ *   selectedSetting="general"
+ *   onSettingSelect={handleSelect}
+ * />
+ * ```
+ */
+export const SettingsList: React.FC<SettingsListProps> = ({
+  settings,
+  selectedSetting,
+  onSettingSelect,
+  className,
+}) => {
+  return (
+    <View
+      className={cn('gap-1', className)}
+      accessibilityRole='list'
+      accessibilityLabel='Settings navigation'
+    >
+      {settings.map(setting => {
+        const isSelected = selectedSetting === setting.id;
+
+        return (
+          <Pressable
+            key={setting.id}
+            onPress={() => onSettingSelect(setting.id)}
+            className={cn(
+              'flex-row items-center px-3 py-2.5 rounded-lg min-h-[44px]',
+              isSelected
+                ? 'bg-orange-100 dark:bg-orange-900/30'
+                : 'active:bg-gray-100 dark:active:bg-gray-700'
+            )}
+            accessibilityRole='button'
+            accessibilityState={{ selected: isSelected }}
+            accessibilityLabel={setting.title}
+            accessibilityHint={setting.description}
+          >
+            {setting.icon && (
+              <View className='w-5 h-5 mr-3 flex-shrink-0'>{setting.icon}</View>
+            )}
+            <View className='flex-1 min-w-0'>
+              <Text
+                className={cn(
+                  'text-sm',
+                  isSelected
+                    ? 'text-orange-700 dark:text-orange-300'
+                    : 'text-gray-700 dark:text-gray-300'
+                )}
+                numberOfLines={1}
+              >
+                {setting.title}
+              </Text>
+            </View>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};

package/src/ui/SettingsList/index.ts

@@ -0,0 +1,2 @@
+export { SettingsList } from './SettingsList';
+export type { SettingsListProps, SettingItem } from './SettingsList';

package/src/ui/Sheet/Sheet.tsx

@@ -0,0 +1,309 @@
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  ScrollView,
+  Animated,
+  Dimensions,
+  PanResponder,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface SheetProps {
+  /** Whether sheet is open */
+  isOpen: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Sheet content */
+  children: React.ReactNode;
+  /** Sheet title */
+  title?: string;
+  /** Sheet description */
+  description?: string;
+  /** Sheet footer */
+  footer?: React.ReactNode;
+  /** Sheet side */
+  side?: 'bottom' | 'top' | 'left' | 'right';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg' | 'full';
+  /** Show drag handle */
+  showHandle?: boolean;
+  /** Show close button */
+  showCloseButton?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Sheet Component
+ *
+ * Mobile-first bottom sheet that slides up from screen edge.
+ * Also supports top, left, and right positions.
+ * Includes gesture support for drag to dismiss (bottom sheets).
+ *
+ * @example
+ * ```tsx
+ * <Sheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Filter Options"
+ *   showHandle
+ * >
+ *   <View>Filter content...</View>
+ * </Sheet>
+ * ```
+ */
+export const Sheet: React.FC<SheetProps> = ({
+  isOpen,
+  onClose,
+  children,
+  title,
+  description,
+  footer,
+  side = 'bottom',
+  size = 'md',
+  showHandle = true,
+  showCloseButton = true,
+  className,
+}) => {
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const panY = useRef(new Animated.Value(0)).current;
+
+  // Size configurations (percentage of screen)
+  const sizeValues = {
+    bottom: {
+      sm: SCREEN_HEIGHT * 0.33,
+      md: SCREEN_HEIGHT * 0.5,
+      lg: SCREEN_HEIGHT * 0.66,
+      full: SCREEN_HEIGHT,
+    },
+    top: {
+      sm: SCREEN_HEIGHT * 0.33,
+      md: SCREEN_HEIGHT * 0.5,
+      lg: SCREEN_HEIGHT * 0.66,
+      full: SCREEN_HEIGHT,
+    },
+    left: {
+      sm: SCREEN_WIDTH * 0.6,
+      md: SCREEN_WIDTH * 0.75,
+      lg: SCREEN_WIDTH * 0.9,
+      full: SCREEN_WIDTH,
+    },
+    right: {
+      sm: SCREEN_WIDTH * 0.6,
+      md: SCREEN_WIDTH * 0.75,
+      lg: SCREEN_WIDTH * 0.9,
+      full: SCREEN_WIDTH,
+    },
+  };
+
+  const sheetSize = sizeValues[side][size];
+  const isVertical = side === 'bottom' || side === 'top';
+
+  useEffect(() => {
+    if (isOpen) {
+      panY.setValue(0);
+      Animated.spring(slideAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        friction: 8,
+      }).start();
+    } else {
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isOpen, slideAnim, panY]);
+
+  // Pan responder for drag-to-dismiss (bottom sheets)
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => side === 'bottom',
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        side === 'bottom' && gestureState.dy > 10,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          panY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 100 || gestureState.vy > 0.5) {
+          onClose();
+        } else {
+          Animated.spring(panY, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  // Calculate transform based on side
+  const getTransform = () => {
+    const baseTransform = slideAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sheetSize, 0],
+    });
+
+    switch (side) {
+      case 'bottom':
+        return {
+          transform: [
+            {
+              translateY: Animated.add(
+                slideAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [sheetSize, 0],
+                }),
+                panY
+              ),
+            },
+          ],
+        };
+      case 'top':
+        return {
+          transform: [
+            {
+              translateY: slideAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-sheetSize, 0],
+              }),
+            },
+          ],
+        };
+      case 'left':
+        return {
+          transform: [
+            {
+              translateX: slideAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-sheetSize, 0],
+              }),
+            },
+          ],
+        };
+      case 'right':
+        return {
+          transform: [
+            {
+              translateX: baseTransform,
+            },
+          ],
+        };
+      default:
+        return {};
+    }
+  };
+
+  // Position styles
+  const positionStyles = {
+    bottom: { bottom: 0, left: 0, right: 0 },
+    top: { top: 0, left: 0, right: 0 },
+    left: { left: 0, top: 0, bottom: 0 },
+    right: { right: 0, top: 0, bottom: 0 },
+  };
+
+  // Border radius styles
+  const radiusClasses = {
+    bottom: 'rounded-t-2xl',
+    top: 'rounded-b-2xl',
+    left: 'rounded-r-2xl',
+    right: 'rounded-l-2xl',
+  };
+
+  return (
+    <Modal
+      visible={isOpen}
+      animationType='none'
+      transparent
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      {/* Backdrop */}
+      <Pressable onPress={onClose} className='absolute inset-0 bg-black/50' />
+
+      {/* Sheet */}
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            ...positionStyles[side],
+            ...(isVertical ? { height: sheetSize } : { width: sheetSize }),
+          },
+          getTransform(),
+        ]}
+        {...(side === 'bottom' ? panResponder.panHandlers : {})}
+      >
+        <View
+          className={cn(
+            'flex-1 bg-white dark:bg-gray-900 shadow-xl',
+            radiusClasses[side],
+            className
+          )}
+        >
+          {/* Drag Handle */}
+          {showHandle && (side === 'bottom' || side === 'top') && (
+            <View
+              className={cn(
+                'items-center justify-center',
+                side === 'bottom' ? 'pt-3 pb-2' : 'pb-3 pt-2'
+              )}
+            >
+              <View className='w-12 h-1.5 bg-gray-300 dark:bg-gray-700 rounded-full' />
+            </View>
+          )}
+
+          {/* Header */}
+          {(title || description || showCloseButton) && (
+            <View className='px-4 py-4 border-b border-gray-200 dark:border-gray-700'>
+              <View className='flex flex-row items-start justify-between'>
+                <View className='flex-1'>
+                  {title && (
+                    <Text className='text-lg font-semibold text-gray-900 dark:text-white'>
+                      {title}
+                    </Text>
+                  )}
+                  {description && (
+                    <Text className='mt-1 text-sm text-gray-600 dark:text-gray-400'>
+                      {description}
+                    </Text>
+                  )}
+                </View>
+                {showCloseButton && (
+                  <Pressable
+                    onPress={onClose}
+                    className='ml-4 p-1'
+                    accessibilityRole='button'
+                    accessibilityLabel='Close sheet'
+                  >
+                    <Text className='text-xl text-gray-400'>✕</Text>
+                  </Pressable>
+                )}
+              </View>
+            </View>
+          )}
+
+          {/* Content */}
+          <ScrollView className='flex-1 px-4 py-4' bounces={false}>
+            {children}
+          </ScrollView>
+
+          {/* Footer */}
+          {footer && (
+            <View className='px-4 py-4 border-t border-gray-200 dark:border-gray-700'>
+              {footer}
+            </View>
+          )}
+        </View>
+      </Animated.View>
+    </Modal>
+  );
+};

package/src/ui/Sheet/index.ts

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