@sudobility/components-rn 1.0.1

package/src/ui/TextArea/TextArea.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { View, TextInput, Text, TextInputProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TextAreaProps extends Omit<TextInputProps, 'onChange'> {
+  /** Current value */
+  value: string;
+  /** Callback when value changes */
+  onChangeText: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Number of visible lines (used to calculate height) */
+  numberOfLines?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Read-only state */
+  readOnly?: boolean;
+  /** Show character count */
+  showCount?: boolean;
+  /** Maximum character count */
+  maxLength?: number;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className for container */
+  className?: string;
+  /** Additional className for the input */
+  inputClassName?: string;
+}
+
+/**
+ * TextArea Component
+ *
+ * Multi-line text input with character counting and consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   value={message}
+ *   onChangeText={setMessage}
+ *   placeholder="Write your message..."
+ *   numberOfLines={5}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   value={bio}
+ *   onChangeText={setBio}
+ *   showCount
+ *   maxLength={500}
+ *   placeholder="Tell us about yourself..."
+ * />
+ * ```
+ */
+export const TextArea: React.FC<TextAreaProps> = ({
+  value,
+  onChangeText,
+  placeholder,
+  numberOfLines = 4,
+  disabled = false,
+  readOnly = false,
+  showCount = false,
+  maxLength,
+  size = 'md',
+  className,
+  inputClassName,
+  ...textInputProps
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: 'p-2 text-sm',
+    md: 'p-3 text-base',
+    lg: 'p-4 text-lg',
+  };
+
+  const handleChangeText = (newValue: string) => {
+    // Enforce maxLength if provided
+    if (maxLength && newValue.length > maxLength) {
+      return;
+    }
+
+    onChangeText(newValue);
+  };
+
+  const characterCount = value.length;
+  const showCountInfo = showCount || maxLength !== undefined;
+
+  return (
+    <View className={cn('w-full', className)}>
+      <TextInput
+        value={value}
+        onChangeText={handleChangeText}
+        placeholder={placeholder}
+        numberOfLines={numberOfLines}
+        editable={!disabled && !readOnly}
+        maxLength={maxLength}
+        multiline
+        textAlignVertical='top'
+        className={cn(
+          'w-full rounded-lg border',
+          'bg-white dark:bg-gray-800',
+          'text-gray-900 dark:text-gray-100',
+          'placeholder:text-gray-400 dark:placeholder:text-gray-500',
+          'border-gray-300 dark:border-gray-600',
+          sizeClasses[size],
+          disabled && 'opacity-50',
+          readOnly && 'bg-gray-50 dark:bg-gray-900',
+          inputClassName
+        )}
+        placeholderTextColor='#9CA3AF'
+        accessibilityRole='text'
+        accessibilityState={{ disabled }}
+        {...textInputProps}
+      />
+
+      {/* Character count */}
+      {showCountInfo && (
+        <View className='flex flex-row justify-end mt-1'>
+          <Text
+            className={cn(
+              'text-xs',
+              maxLength && characterCount > maxLength * 0.9
+                ? 'text-yellow-600 dark:text-yellow-400'
+                : 'text-gray-500 dark:text-gray-400',
+              maxLength &&
+                characterCount >= maxLength &&
+                'text-red-600 dark:text-red-400'
+            )}
+          >
+            {characterCount}
+            {maxLength && ` / ${maxLength}`}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/TextArea/index.ts

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

package/src/ui/TextInputModal/TextInputModal.tsx

@@ -0,0 +1,225 @@
+import * as React from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  Modal,
+  TouchableWithoutFeedback,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TextInputModalProps {
+  /** Modal visibility */
+  isOpen: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Submit handler */
+  onSubmit: (value: string) => void | Promise<void>;
+  /** Modal title */
+  title: string;
+  /** Modal description */
+  description: string;
+  /** Input placeholder */
+  placeholder?: string;
+  /** Initial input value */
+  initialValue?: string;
+  /** Cancel button text */
+  cancelText?: string;
+  /** Confirm button text */
+  confirmText?: string;
+  /** Loading state */
+  isLoading?: boolean;
+  /** Loading button text */
+  loadingText?: string;
+  /** Max input length */
+  maxLength?: number;
+  /** Required validation */
+  required?: boolean;
+  /** Custom validation function */
+  validate?: (value: string) => string | null;
+}
+
+/**
+ * TextInputModal Component
+ *
+ * Modal dialog with text input for collecting user input.
+ * Supports validation, loading states, and customization.
+ *
+ * @example
+ * ```tsx
+ * <TextInputModal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   onSubmit={handleSubmit}
+ *   title="Rename Item"
+ *   description="Enter a new name for this item"
+ *   placeholder="New name..."
+ *   initialValue={currentName}
+ * />
+ * ```
+ */
+export const TextInputModal: React.FC<TextInputModalProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  title,
+  description,
+  placeholder = '',
+  initialValue = '',
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  isLoading = false,
+  loadingText = 'Processing...',
+  maxLength,
+  required = true,
+  validate,
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset value when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setValue(initialValue);
+      setError(null);
+    }
+  }, [isOpen, initialValue]);
+
+  const handleSubmit = useCallback(async () => {
+    // Clear previous errors
+    setError(null);
+
+    // Validate required
+    if (required && !value.trim()) {
+      setError('This field is required');
+      return;
+    }
+
+    // Custom validation
+    if (validate) {
+      const validationError = validate(value);
+      if (validationError) {
+        setError(validationError);
+        return;
+      }
+    }
+
+    // Submit
+    try {
+      await onSubmit(value.trim());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    }
+  }, [value, required, validate, onSubmit]);
+
+  const handleCancel = useCallback(() => {
+    setValue(initialValue);
+    setError(null);
+    onClose();
+  }, [initialValue, onClose]);
+
+  const canSubmit = required ? value.trim().length > 0 : true;
+
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType='fade'
+      onRequestClose={isLoading ? undefined : handleCancel}
+    >
+      <TouchableWithoutFeedback onPress={isLoading ? undefined : handleCancel}>
+        <View className='flex-1 justify-center px-4 bg-black/50'>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          >
+            <TouchableWithoutFeedback>
+              <View className='bg-white dark:bg-gray-900 rounded-lg shadow-xl'>
+                {/* Content */}
+                <View className='p-4'>
+                  <Text className='text-lg font-semibold text-gray-900 dark:text-white'>
+                    {title}
+                  </Text>
+                  <Text className='text-sm text-gray-600 dark:text-gray-400 mt-2 mb-4'>
+                    {description}
+                  </Text>
+
+                  <TextInput
+                    value={value}
+                    onChangeText={setValue}
+                    placeholder={placeholder}
+                    placeholderTextColor='#9ca3af'
+                    maxLength={maxLength}
+                    editable={!isLoading}
+                    autoFocus
+                    className={cn(
+                      'px-3 py-2 text-sm',
+                      'bg-gray-50 dark:bg-gray-800',
+                      'text-gray-900 dark:text-white',
+                      'border rounded-md',
+                      error
+                        ? 'border-red-500 dark:border-red-400'
+                        : 'border-gray-300 dark:border-gray-600'
+                    )}
+                    accessibilityLabel={placeholder || title}
+                  />
+
+                  {error && (
+                    <Text
+                      className='text-xs text-red-600 dark:text-red-400 mt-2'
+                      accessibilityRole='alert'
+                    >
+                      {error}
+                    </Text>
+                  )}
+                </View>
+
+                {/* Footer */}
+                <View className='flex-row gap-2 p-4 border-t border-gray-200 dark:border-gray-700'>
+                  <Pressable
+                    onPress={handleCancel}
+                    disabled={isLoading}
+                    className={cn(
+                      'flex-1 items-center py-2',
+                      'bg-gray-100 dark:bg-gray-800',
+                      'rounded-md',
+                      'active:bg-gray-200 dark:active:bg-gray-700',
+                      isLoading && 'opacity-50'
+                    )}
+                    accessibilityRole='button'
+                    accessibilityLabel={cancelText}
+                  >
+                    <Text className='text-sm text-gray-700 dark:text-gray-300'>
+                      {cancelText}
+                    </Text>
+                  </Pressable>
+
+                  <Pressable
+                    onPress={handleSubmit}
+                    disabled={!canSubmit || isLoading}
+                    className={cn(
+                      'flex-1 items-center py-2',
+                      'bg-blue-600 dark:bg-blue-500',
+                      'rounded-md',
+                      'active:bg-blue-700 dark:active:bg-blue-600',
+                      (!canSubmit || isLoading) && 'opacity-50'
+                    )}
+                    accessibilityRole='button'
+                    accessibilityLabel={confirmText}
+                  >
+                    <Text className='text-sm text-white font-medium'>
+                      {isLoading ? loadingText : confirmText}
+                    </Text>
+                  </Pressable>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </KeyboardAvoidingView>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};

package/src/ui/TextInputModal/index.ts

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

package/src/ui/TimePicker/TimePicker.tsx

@@ -0,0 +1,325 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  ScrollView,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TimePickerProps {
+  /** Time value in HH:mm format (24-hour) */
+  value: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Use 12-hour format */
+  use12Hour?: boolean;
+  /** Minute step interval */
+  minuteStep?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * TimePicker Component
+ *
+ * Time selection with scrollable columns.
+ * Supports 12-hour and 24-hour formats.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   value={time}
+ *   onChange={setTime}
+ *   use12Hour
+ *   minuteStep={15}
+ * />
+ * ```
+ */
+export const TimePicker: React.FC<TimePickerProps> = ({
+  value,
+  onChange,
+  use12Hour = false,
+  minuteStep = 1,
+  disabled = false,
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalHour, setInternalHour] = useState('12');
+  const [internalMinute, setInternalMinute] = useState('00');
+  const [period, setPeriod] = useState<'AM' | 'PM'>('AM');
+
+  // Parse value to hours and minutes
+  useEffect(() => {
+    if (value) {
+      const [hours, minutes] = value.split(':');
+      const hour = parseInt(hours, 10);
+
+      if (use12Hour) {
+        const isPM = hour >= 12;
+        const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+        setInternalHour(hour12.toString().padStart(2, '0'));
+        setPeriod(isPM ? 'PM' : 'AM');
+      } else {
+        setInternalHour(hours);
+      }
+
+      setInternalMinute(minutes);
+    }
+  }, [value, use12Hour]);
+
+  // Format display value
+  const formatDisplay = (): string => {
+    if (!value) return 'Select time';
+
+    const [hours, minutes] = value.split(':');
+    const hour = parseInt(hours, 10);
+
+    if (use12Hour) {
+      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+      const displayPeriod = hour >= 12 ? 'PM' : 'AM';
+      return `${hour12}:${minutes} ${displayPeriod}`;
+    }
+
+    return `${hours}:${minutes}`;
+  };
+
+  // Handle time selection
+  const handleTimeChange = (
+    newHour: string,
+    newMinute: string,
+    newPeriod?: 'AM' | 'PM'
+  ) => {
+    let hour = parseInt(newHour, 10);
+    const minute = parseInt(newMinute, 10);
+
+    if (use12Hour && newPeriod) {
+      if (newPeriod === 'PM' && hour !== 12) {
+        hour += 12;
+      } else if (newPeriod === 'AM' && hour === 12) {
+        hour = 0;
+      }
+    }
+
+    const formattedTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+    onChange(formattedTime);
+  };
+
+  // Generate hour options
+  const hourOptions = use12Hour
+    ? Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'))
+    : Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
+
+  // Generate minute options
+  const minuteOptions = Array.from(
+    { length: Math.ceil(60 / minuteStep) },
+    (_, i) => (i * minuteStep).toString().padStart(2, '0')
+  );
+
+  return (
+    <View className={cn('w-full', className)}>
+      {/* Input trigger */}
+      <Pressable
+        onPress={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        className={cn(
+          'flex-row items-center justify-between 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='Select time'
+      >
+        <Text
+          className={cn(
+            'text-sm',
+            value
+              ? 'text-gray-900 dark:text-white'
+              : 'text-gray-500 dark:text-gray-400'
+          )}
+        >
+          {formatDisplay()}
+        </Text>
+        <Text className='text-gray-600 dark:text-gray-400'>🕐</Text>
+      </Pressable>
+
+      {/* Time picker modal */}
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='slide'
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
+          <View className='flex-1 justify-end bg-black/50'>
+            <TouchableWithoutFeedback>
+              <View className='bg-white dark:bg-gray-900 rounded-t-xl'>
+                <View className='flex-row p-4 gap-2'>
+                  {/* Hours */}
+                  <View className='flex-1'>
+                    <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 text-center mb-2'>
+                      Hour
+                    </Text>
+                    <ScrollView className='h-48 border border-gray-200 dark:border-gray-700 rounded'>
+                      {hourOptions.map(hour => (
+                        <Pressable
+                          key={hour}
+                          onPress={() => {
+                            setInternalHour(hour);
+                            handleTimeChange(
+                              hour,
+                              internalMinute,
+                              use12Hour ? period : undefined
+                            );
+                          }}
+                          className={cn(
+                            'px-3 py-2',
+                            'active:bg-gray-100 dark:active:bg-gray-800',
+                            hour === internalHour &&
+                              'bg-blue-100 dark:bg-blue-900/30'
+                          )}
+                        >
+                          <Text
+                            className={cn(
+                              'text-sm text-center',
+                              hour === internalHour
+                                ? 'text-blue-700 dark:text-blue-300 font-medium'
+                                : 'text-gray-900 dark:text-white'
+                            )}
+                          >
+                            {hour}
+                          </Text>
+                        </Pressable>
+                      ))}
+                    </ScrollView>
+                  </View>
+
+                  {/* Minutes */}
+                  <View className='flex-1'>
+                    <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 text-center mb-2'>
+                      Min
+                    </Text>
+                    <ScrollView className='h-48 border border-gray-200 dark:border-gray-700 rounded'>
+                      {minuteOptions.map(minute => (
+                        <Pressable
+                          key={minute}
+                          onPress={() => {
+                            setInternalMinute(minute);
+                            handleTimeChange(
+                              internalHour,
+                              minute,
+                              use12Hour ? period : undefined
+                            );
+                          }}
+                          className={cn(
+                            'px-3 py-2',
+                            'active:bg-gray-100 dark:active:bg-gray-800',
+                            minute === internalMinute &&
+                              'bg-blue-100 dark:bg-blue-900/30'
+                          )}
+                        >
+                          <Text
+                            className={cn(
+                              'text-sm text-center',
+                              minute === internalMinute
+                                ? 'text-blue-700 dark:text-blue-300 font-medium'
+                                : 'text-gray-900 dark:text-white'
+                            )}
+                          >
+                            {minute}
+                          </Text>
+                        </Pressable>
+                      ))}
+                    </ScrollView>
+                  </View>
+
+                  {/* AM/PM */}
+                  {use12Hour && (
+                    <View className='w-16'>
+                      <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 text-center mb-2'>
+                        {' '}
+                      </Text>
+                      <View className='h-48 justify-center gap-2'>
+                        <Pressable
+                          onPress={() => {
+                            setPeriod('AM');
+                            handleTimeChange(
+                              internalHour,
+                              internalMinute,
+                              'AM'
+                            );
+                          }}
+                          className={cn(
+                            'px-3 py-2 rounded',
+                            'active:bg-gray-100 dark:active:bg-gray-800',
+                            period === 'AM' && 'bg-blue-100 dark:bg-blue-900/30'
+                          )}
+                        >
+                          <Text
+                            className={cn(
+                              'text-sm text-center',
+                              period === 'AM'
+                                ? 'text-blue-700 dark:text-blue-300 font-medium'
+                                : 'text-gray-900 dark:text-white'
+                            )}
+                          >
+                            AM
+                          </Text>
+                        </Pressable>
+                        <Pressable
+                          onPress={() => {
+                            setPeriod('PM');
+                            handleTimeChange(
+                              internalHour,
+                              internalMinute,
+                              'PM'
+                            );
+                          }}
+                          className={cn(
+                            'px-3 py-2 rounded',
+                            'active:bg-gray-100 dark:active:bg-gray-800',
+                            period === 'PM' && 'bg-blue-100 dark:bg-blue-900/30'
+                          )}
+                        >
+                          <Text
+                            className={cn(
+                              'text-sm text-center',
+                              period === 'PM'
+                                ? 'text-blue-700 dark:text-blue-300 font-medium'
+                                : 'text-gray-900 dark:text-white'
+                            )}
+                          >
+                            PM
+                          </Text>
+                        </Pressable>
+                      </View>
+                    </View>
+                  )}
+                </View>
+
+                {/* Done button */}
+                <View className='p-3 border-t border-gray-200 dark:border-gray-700'>
+                  <Pressable
+                    onPress={() => setIsOpen(false)}
+                    className='items-center py-3'
+                  >
+                    <Text className='text-sm font-medium text-blue-600 dark:text-blue-400'>
+                      Done
+                    </Text>
+                  </Pressable>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+};

package/src/ui/TimePicker/index.ts

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