@sudobility/components-rn 1.0.1

package/src/ui/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,283 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  TextInput,
+  ScrollView,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface MultiSelectOption {
+  /** Option value */
+  value: string;
+  /** Option label */
+  label: string;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export interface MultiSelectProps {
+  /** Available options */
+  options: MultiSelectOption[];
+  /** Selected values */
+  value: string[];
+  /** Change handler */
+  onChange: (values: string[]) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Search placeholder */
+  searchPlaceholder?: string;
+  /** Enable search */
+  searchable?: boolean;
+  /** Max selected items to show */
+  maxDisplay?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * MultiSelect Component
+ *
+ * Multi-select dropdown with search and tags.
+ * Shows selected items as removable tags.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   options={categories}
+ *   value={selectedCategories}
+ *   onChange={setSelectedCategories}
+ *   placeholder="Select categories"
+ *   searchable
+ * />
+ * ```
+ */
+export const MultiSelect: React.FC<MultiSelectProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select items...',
+  searchPlaceholder = 'Search...',
+  searchable = true,
+  maxDisplay = 3,
+  disabled = false,
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Filter options based on search
+  const filteredOptions = searchable
+    ? options.filter(opt =>
+        opt.label.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : options;
+
+  // Get selected option labels
+  const selectedOptions = options.filter(opt => value.includes(opt.value));
+
+  // Handle option toggle
+  const toggleOption = useCallback(
+    (optionValue: string) => {
+      if (value.includes(optionValue)) {
+        onChange(value.filter(v => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
+    },
+    [value, onChange]
+  );
+
+  // Remove selected item
+  const removeItem = useCallback(
+    (optionValue: string) => {
+      onChange(value.filter(v => v !== optionValue));
+    },
+    [value, onChange]
+  );
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setSearchQuery('');
+  }, []);
+
+  const displayedCount = selectedOptions.length;
+  const hiddenCount =
+    displayedCount > maxDisplay ? displayedCount - maxDisplay : 0;
+
+  return (
+    <View className={cn('w-full', className)}>
+      {/* Trigger */}
+      <Pressable
+        onPress={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        className={cn(
+          'min-h-[44px] px-3 py-2',
+          'bg-white dark:bg-gray-900',
+          'border border-gray-300 dark:border-gray-700',
+          'rounded-md',
+          disabled && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={placeholder}
+        accessibilityState={{ disabled, expanded: isOpen }}
+      >
+        <View className='flex-row flex-wrap gap-1.5'>
+          {selectedOptions.length === 0 ? (
+            <Text className='text-sm text-gray-500 dark:text-gray-400 py-0.5'>
+              {placeholder}
+            </Text>
+          ) : (
+            <>
+              {selectedOptions.slice(0, maxDisplay).map(opt => (
+                <View
+                  key={opt.value}
+                  className='flex-row items-center gap-1 px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 rounded'
+                >
+                  <Text className='text-xs font-medium text-blue-700 dark:text-blue-300'>
+                    {opt.label}
+                  </Text>
+                  <Pressable
+                    onPress={() => removeItem(opt.value)}
+                    hitSlop={8}
+                    accessibilityRole='button'
+                    accessibilityLabel={`Remove ${opt.label}`}
+                  >
+                    <Text className='text-blue-700 dark:text-blue-300'>×</Text>
+                  </Pressable>
+                </View>
+              ))}
+              {hiddenCount > 0 && (
+                <View className='px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded'>
+                  <Text className='text-xs font-medium text-gray-700 dark:text-gray-300'>
+                    +{hiddenCount} more
+                  </Text>
+                </View>
+              )}
+            </>
+          )}
+        </View>
+      </Pressable>
+
+      {/* Dropdown Modal */}
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='fade'
+        onRequestClose={handleClose}
+      >
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View className='flex-1 justify-end bg-black/50'>
+            <TouchableWithoutFeedback>
+              <View className='bg-white dark:bg-gray-900 rounded-t-xl max-h-[70%]'>
+                {/* Search */}
+                {searchable && (
+                  <View className='p-3 border-b border-gray-200 dark:border-gray-700'>
+                    <TextInput
+                      value={searchQuery}
+                      onChangeText={setSearchQuery}
+                      placeholder={searchPlaceholder}
+                      placeholderTextColor='#9ca3af'
+                      className='px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md'
+                    />
+                  </View>
+                )}
+
+                {/* Options */}
+                <ScrollView className='max-h-80'>
+                  {filteredOptions.length === 0 ? (
+                    <View className='px-3 py-4 items-center'>
+                      <Text className='text-sm text-gray-500 dark:text-gray-400'>
+                        No options found
+                      </Text>
+                    </View>
+                  ) : (
+                    filteredOptions.map(option => {
+                      const isSelected = value.includes(option.value);
+
+                      return (
+                        <Pressable
+                          key={option.value}
+                          onPress={() =>
+                            !option.disabled && toggleOption(option.value)
+                          }
+                          disabled={option.disabled}
+                          className={cn(
+                            'flex-row items-center gap-3 px-4 py-3',
+                            'active:bg-gray-100 dark:active:bg-gray-800',
+                            option.disabled && 'opacity-50'
+                          )}
+                          accessibilityRole='checkbox'
+                          accessibilityState={{
+                            checked: isSelected,
+                            disabled: option.disabled,
+                          }}
+                        >
+                          {/* Checkbox */}
+                          <View
+                            className={cn(
+                              'w-5 h-5 border-2 rounded items-center justify-center',
+                              isSelected
+                                ? 'bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500'
+                                : 'border-gray-300 dark:border-gray-600'
+                            )}
+                          >
+                            {isSelected && (
+                              <Text className='text-xs text-white font-bold'>
+                                ✓
+                              </Text>
+                            )}
+                          </View>
+
+                          {/* Label */}
+                          <Text className='flex-1 text-sm text-gray-900 dark:text-white'>
+                            {option.label}
+                          </Text>
+                        </Pressable>
+                      );
+                    })
+                  )}
+                </ScrollView>
+
+                {/* Footer */}
+                <View className='p-3 border-t border-gray-200 dark:border-gray-700 flex-row justify-between items-center'>
+                  <Text className='text-xs text-gray-600 dark:text-gray-400'>
+                    {value.length} selected
+                  </Text>
+                  <View className='flex-row gap-3'>
+                    {value.length > 0 && (
+                      <Pressable
+                        onPress={() => onChange([])}
+                        accessibilityRole='button'
+                        accessibilityLabel='Clear all'
+                      >
+                        <Text className='text-sm text-blue-600 dark:text-blue-400'>
+                          Clear all
+                        </Text>
+                      </Pressable>
+                    )}
+                    <Pressable
+                      onPress={handleClose}
+                      accessibilityRole='button'
+                      accessibilityLabel='Done'
+                    >
+                      <Text className='text-sm font-medium text-blue-600 dark:text-blue-400'>
+                        Done
+                      </Text>
+                    </Pressable>
+                  </View>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+};

package/src/ui/MultiSelect/index.ts

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect';
+export type { MultiSelectProps, MultiSelectOption } from './MultiSelect';

package/src/ui/NavigationList/NavigationList.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface NavigationItem {
+  /** Unique identifier for the item */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional description/subtitle */
+  description?: string;
+  /** Icon component or element */
+  icon: React.ReactNode;
+  /** Path or identifier for selection */
+  path: string;
+  /** Optional badge count */
+  badge?: number;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+}
+
+export interface NavigationListProps {
+  /** Array of navigation items */
+  items: NavigationItem[];
+  /** Currently selected item path */
+  selectedPath?: string;
+  /** Callback when an item is selected */
+  onSelect: (path: string) => void;
+  /** Variant of the navigation list */
+  variant?: 'default' | 'compact' | 'sidebar';
+  /** Additional className for the container */
+  className?: string;
+}
+
+/**
+ * NavigationList Component
+ *
+ * Displays a list of navigation items with icons, labels, and descriptions.
+ * Commonly used in settings pages and documentation for master-detail layouts.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   {
+ *     id: 'general',
+ *     label: 'General',
+ *     description: 'Basic account settings',
+ *     icon: <Cog6ToothIcon />,
+ *     path: '/settings/general'
+ *   },
+ *   // ...
+ * ];
+ *
+ * <NavigationList
+ *   items={items}
+ *   selectedPath={currentPath}
+ *   onSelect={handleSelect}
+ * />
+ * ```
+ */
+export const NavigationList: React.FC<NavigationListProps> = ({
+  items,
+  selectedPath,
+  onSelect,
+  variant = 'default',
+  className,
+}) => {
+  const containerClass = variant === 'compact' ? 'gap-1' : 'gap-0';
+
+  return (
+    <View className={cn(containerClass, className)} accessibilityRole='list'>
+      {items.map((item, index) => {
+        const isSelected = selectedPath === item.path;
+        const isDisabled = item.disabled;
+        const isLast = index === items.length - 1;
+
+        return (
+          <Pressable
+            key={item.id}
+            onPress={() => !isDisabled && onSelect(item.path)}
+            disabled={isDisabled}
+            className={cn(
+              'flex-row items-start',
+              variant === 'compact'
+                ? 'p-3 rounded-lg'
+                : cn(
+                    'p-4',
+                    !isLast && 'border-b border-gray-200 dark:border-gray-700'
+                  ),
+              isDisabled && 'opacity-50',
+              !isDisabled &&
+                (isSelected
+                  ? 'bg-blue-50 dark:bg-blue-900/20'
+                  : 'active:bg-gray-50 dark:active:bg-gray-700')
+            )}
+            accessibilityRole='button'
+            accessibilityState={{
+              selected: isSelected,
+              disabled: isDisabled,
+            }}
+            accessibilityLabel={item.label}
+            accessibilityHint={item.description}
+          >
+            <View className='w-5 h-5 mt-0.5 mr-3 flex-shrink-0'>
+              {item.icon}
+            </View>
+            <View className='flex-1 min-w-0'>
+              <View className='flex-row items-center'>
+                <Text
+                  className={cn(
+                    'font-medium',
+                    isSelected
+                      ? 'text-blue-600 dark:text-blue-400'
+                      : 'text-gray-700 dark:text-gray-300'
+                  )}
+                >
+                  {item.label}
+                </Text>
+                {item.badge !== undefined && item.badge > 0 && (
+                  <View className='ml-2 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 rounded-full'>
+                    <Text className='text-xs font-medium text-blue-800 dark:text-blue-200'>
+                      {item.badge}
+                    </Text>
+                  </View>
+                )}
+              </View>
+              {item.description && (
+                <Text className='text-xs text-gray-500 dark:text-gray-400 mt-0.5'>
+                  {item.description}
+                </Text>
+              )}
+            </View>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};

package/src/ui/NavigationList/index.ts

@@ -0,0 +1,2 @@
+export { NavigationList } from './NavigationList';
+export type { NavigationListProps, NavigationItem } from './NavigationList';

package/src/ui/NumberInput/NumberInput.tsx

@@ -0,0 +1,267 @@
+import * as React from 'react';
+import { View, Text, TextInput, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface NumberInputProps {
+  /** Current value */
+  value: number;
+  /** Callback when value changes */
+  onChange: (value: number) => void;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Show stepper buttons */
+  showSteppers?: boolean;
+  /** Stepper button position */
+  stepperPosition?: 'right' | 'sides';
+  /** Placeholder text */
+  placeholder?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * NumberInput Component
+ *
+ * Number input field with optional stepper buttons for increment/decrement.
+ * Supports min/max bounds, step values, and different layouts.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   value={quantity}
+ *   onChange={setQuantity}
+ *   min={1}
+ *   max={100}
+ *   showSteppers
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   value={price}
+ *   onChange={setPrice}
+ *   step={0.01}
+ *   min={0}
+ *   showSteppers
+ *   stepperPosition="sides"
+ * />
+ * ```
+ */
+export const NumberInput: React.FC<NumberInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  showSteppers = false,
+  stepperPosition = 'right',
+  placeholder,
+  size = 'md',
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: {
+      input: 'py-1.5 px-3 text-sm',
+      button: 'w-8 h-8',
+      icon: 'text-sm',
+    },
+    md: {
+      input: 'py-2 px-3 text-base',
+      button: 'w-10 h-10',
+      icon: 'text-base',
+    },
+    lg: {
+      input: 'py-3 px-4 text-lg',
+      button: 'w-12 h-12',
+      icon: 'text-lg',
+    },
+  };
+
+  const sizeConfig = sizeClasses[size];
+
+  const clampValue = (val: number): number => {
+    let clamped = val;
+    if (min !== undefined && clamped < min) clamped = min;
+    if (max !== undefined && clamped > max) clamped = max;
+    return clamped;
+  };
+
+  const handleTextChange = (text: string) => {
+    const newValue = parseFloat(text);
+    if (!isNaN(newValue)) {
+      const clampedValue = clampValue(newValue);
+      onChange(clampedValue);
+    } else if (text === '') {
+      onChange(min ?? 0);
+    }
+  };
+
+  const increment = () => {
+    if (disabled) return;
+    const newValue = clampValue(value + step);
+    onChange(newValue);
+  };
+
+  const decrement = () => {
+    if (disabled) return;
+    const newValue = clampValue(value - step);
+    onChange(newValue);
+  };
+
+  const canIncrement = max === undefined || value < max;
+  const canDecrement = min === undefined || value > min;
+
+  const StepperButton = ({
+    onPress,
+    icon,
+    buttonDisabled,
+    ariaLabel,
+  }: {
+    onPress: () => void;
+    icon: string;
+    buttonDisabled: boolean;
+    ariaLabel: string;
+  }) => (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || buttonDisabled}
+      accessibilityRole='button'
+      accessibilityLabel={ariaLabel}
+      className={cn(
+        'items-center justify-center',
+        'border border-gray-300 dark:border-gray-600',
+        'bg-white dark:bg-gray-800',
+        sizeConfig.button,
+        (disabled || buttonDisabled) && 'opacity-50'
+      )}
+    >
+      <Text className={cn('text-gray-700 dark:text-gray-300', sizeConfig.icon)}>
+        {icon}
+      </Text>
+    </Pressable>
+  );
+
+  // Sides layout: - [input] +
+  if (showSteppers && stepperPosition === 'sides') {
+    return (
+      <View className={cn('flex flex-row items-stretch', className)}>
+        <StepperButton
+          onPress={decrement}
+          buttonDisabled={!canDecrement}
+          icon='−'
+          ariaLabel='Decrement'
+        />
+        <TextInput
+          value={String(value)}
+          onChangeText={handleTextChange}
+          keyboardType='numeric'
+          editable={!disabled}
+          placeholder={placeholder}
+          className={cn(
+            'border-x-0 text-center flex-1',
+            'border-y border-gray-300 dark:border-gray-600',
+            'bg-white dark:bg-gray-800',
+            'text-gray-900 dark:text-gray-100',
+            sizeConfig.input,
+            disabled && 'opacity-50'
+          )}
+          accessibilityLabel='Number input'
+        />
+        <StepperButton
+          onPress={increment}
+          buttonDisabled={!canIncrement}
+          icon='+'
+          ariaLabel='Increment'
+        />
+      </View>
+    );
+  }
+
+  // Right layout: [input] [+/-]
+  if (showSteppers && stepperPosition === 'right') {
+    return (
+      <View className={cn('flex flex-row items-stretch gap-2', className)}>
+        <TextInput
+          value={String(value)}
+          onChangeText={handleTextChange}
+          keyboardType='numeric'
+          editable={!disabled}
+          placeholder={placeholder}
+          className={cn(
+            'flex-1 rounded-lg border',
+            'border-gray-300 dark:border-gray-600',
+            'bg-white dark:bg-gray-800',
+            'text-gray-900 dark:text-gray-100',
+            sizeConfig.input,
+            disabled && 'opacity-50'
+          )}
+          accessibilityLabel='Number input'
+        />
+        <View className='flex flex-col gap-0.5'>
+          <Pressable
+            onPress={increment}
+            disabled={disabled || !canIncrement}
+            accessibilityRole='button'
+            accessibilityLabel='Increment'
+            className={cn(
+              'flex-1 items-center justify-center',
+              'rounded border border-gray-300 dark:border-gray-600',
+              'bg-white dark:bg-gray-800',
+              'px-2',
+              (disabled || !canIncrement) && 'opacity-50'
+            )}
+          >
+            <Text className='text-gray-700 dark:text-gray-300 text-xs'>+</Text>
+          </Pressable>
+          <Pressable
+            onPress={decrement}
+            disabled={disabled || !canDecrement}
+            accessibilityRole='button'
+            accessibilityLabel='Decrement'
+            className={cn(
+              'flex-1 items-center justify-center',
+              'rounded border border-gray-300 dark:border-gray-600',
+              'bg-white dark:bg-gray-800',
+              'px-2',
+              (disabled || !canDecrement) && 'opacity-50'
+            )}
+          >
+            <Text className='text-gray-700 dark:text-gray-300 text-xs'>−</Text>
+          </Pressable>
+        </View>
+      </View>
+    );
+  }
+
+  // No steppers: just the input
+  return (
+    <TextInput
+      value={String(value)}
+      onChangeText={handleTextChange}
+      keyboardType='numeric'
+      editable={!disabled}
+      placeholder={placeholder}
+      className={cn(
+        'rounded-lg border',
+        'border-gray-300 dark:border-gray-600',
+        'bg-white dark:bg-gray-800',
+        'text-gray-900 dark:text-gray-100',
+        sizeConfig.input,
+        disabled && 'opacity-50',
+        className
+      )}
+      accessibilityLabel='Number input'
+    />
+  );
+};

package/src/ui/NumberInput/index.ts

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