@sudobility/components-rn 1.0.1

package/src/ui/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,267 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  Modal,
+  ScrollView,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface Country {
+  /** Country code (ISO 3166-1 alpha-2) */
+  code: string;
+  /** Country name */
+  name: string;
+  /** Dial code */
+  dialCode: string;
+  /** Flag emoji */
+  flag: string;
+}
+
+export interface PhoneInputProps {
+  /** Phone value */
+  value: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Selected country code */
+  country?: string;
+  /** Country change handler */
+  onCountryChange?: (country: string) => void;
+  /** Available countries (defaults to common countries) */
+  countries?: Country[];
+  /** Placeholder text */
+  placeholder?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+// Common countries
+const DEFAULT_COUNTRIES: Country[] = [
+  { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸' },
+  { code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: '🇬🇧' },
+  { code: 'CA', name: 'Canada', dialCode: '+1', flag: '🇨🇦' },
+  { code: 'AU', name: 'Australia', dialCode: '+61', flag: '🇦🇺' },
+  { code: 'DE', name: 'Germany', dialCode: '+49', flag: '🇩🇪' },
+  { code: 'FR', name: 'France', dialCode: '+33', flag: '🇫🇷' },
+  { code: 'IT', name: 'Italy', dialCode: '+39', flag: '🇮🇹' },
+  { code: 'ES', name: 'Spain', dialCode: '+34', flag: '🇪🇸' },
+  { code: 'MX', name: 'Mexico', dialCode: '+52', flag: '🇲🇽' },
+  { code: 'BR', name: 'Brazil', dialCode: '+55', flag: '🇧🇷' },
+  { code: 'IN', name: 'India', dialCode: '+91', flag: '🇮🇳' },
+  { code: 'CN', name: 'China', dialCode: '+86', flag: '🇨🇳' },
+  { code: 'JP', name: 'Japan', dialCode: '+81', flag: '🇯🇵' },
+  { code: 'KR', name: 'South Korea', dialCode: '+82', flag: '🇰🇷' },
+  { code: 'SG', name: 'Singapore', dialCode: '+65', flag: '🇸🇬' },
+];
+
+/**
+ * PhoneInput Component
+ *
+ * Phone number input with country code selector.
+ * Formats phone numbers and shows country flags.
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput
+ *   value={phoneNumber}
+ *   onChange={setPhoneNumber}
+ *   country={selectedCountry}
+ *   onCountryChange={setSelectedCountry}
+ * />
+ * ```
+ */
+export const PhoneInput: React.FC<PhoneInputProps> = ({
+  value,
+  onChange,
+  country: controlledCountry,
+  onCountryChange,
+  countries = DEFAULT_COUNTRIES,
+  placeholder = 'Phone number',
+  disabled = false,
+  className,
+}) => {
+  const [internalCountry, setInternalCountry] = useState(
+    countries[0]?.code || 'US'
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const selectedCountryCode =
+    controlledCountry !== undefined ? controlledCountry : internalCountry;
+
+  const selectedCountry = countries.find(c => c.code === selectedCountryCode);
+
+  // Handle country selection
+  const handleCountrySelect = useCallback(
+    (countryCode: string) => {
+      if (controlledCountry !== undefined && onCountryChange) {
+        onCountryChange(countryCode);
+      } else {
+        setInternalCountry(countryCode);
+      }
+      setIsOpen(false);
+      setSearchQuery('');
+    },
+    [controlledCountry, onCountryChange]
+  );
+
+  // Format phone number (basic formatting)
+  const formatPhoneNumber = (input: string): string => {
+    // Remove all non-numeric characters
+    const cleaned = input.replace(/\D/g, '');
+
+    // Basic US/CA formatting
+    if (selectedCountry?.dialCode === '+1') {
+      if (cleaned.length <= 3) return cleaned;
+      if (cleaned.length <= 6)
+        return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
+    }
+
+    return cleaned;
+  };
+
+  // Handle input change
+  const handleInputChange = (text: string) => {
+    const formatted = formatPhoneNumber(text);
+    onChange(formatted);
+  };
+
+  // Filter countries based on search
+  const filteredCountries = countries.filter(
+    country =>
+      country.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      country.dialCode.includes(searchQuery) ||
+      country.code.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <View className={cn('w-full', className)}>
+      <View className='flex-row gap-2'>
+        {/* Country selector */}
+        <Pressable
+          onPress={() => !disabled && setIsOpen(true)}
+          disabled={disabled}
+          className={cn(
+            'flex-row items-center gap-2 px-3 py-2 min-w-[120px]',
+            'bg-white dark:bg-gray-900',
+            'border border-gray-300 dark:border-gray-700',
+            'rounded-md',
+            disabled && 'opacity-50'
+          )}
+          accessibilityRole='button'
+          accessibilityLabel='Select country'
+        >
+          <Text className='text-xl'>{selectedCountry?.flag}</Text>
+          <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+            {selectedCountry?.dialCode}
+          </Text>
+          <Text className='text-gray-600 dark:text-gray-400'>▼</Text>
+        </Pressable>
+
+        {/* Phone number input */}
+        <TextInput
+          value={value}
+          onChangeText={handleInputChange}
+          placeholder={placeholder}
+          placeholderTextColor='#9ca3af'
+          keyboardType='phone-pad'
+          editable={!disabled}
+          className={cn(
+            'flex-1 px-3 py-2 text-sm',
+            'bg-white dark:bg-gray-900 text-gray-900 dark:text-white',
+            'border border-gray-300 dark:border-gray-700',
+            'rounded-md',
+            disabled && 'opacity-50'
+          )}
+        />
+      </View>
+
+      {/* Full number display */}
+      {value && selectedCountry && (
+        <Text className='mt-1.5 text-xs text-gray-600 dark:text-gray-400'>
+          Full number: {selectedCountry.dialCode} {value}
+        </Text>
+      )}
+
+      {/* Country 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 max-h-[70%]'>
+                {/* Search */}
+                <View className='p-3 border-b border-gray-200 dark:border-gray-700'>
+                  <TextInput
+                    value={searchQuery}
+                    onChangeText={setSearchQuery}
+                    placeholder='Search countries...'
+                    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>
+
+                {/* Countries list */}
+                <ScrollView className='max-h-80'>
+                  {filteredCountries.length === 0 ? (
+                    <View className='px-3 py-4 items-center'>
+                      <Text className='text-sm text-gray-500 dark:text-gray-400'>
+                        No countries found
+                      </Text>
+                    </View>
+                  ) : (
+                    filteredCountries.map(country => (
+                      <Pressable
+                        key={country.code}
+                        onPress={() => handleCountrySelect(country.code)}
+                        className={cn(
+                          'flex-row items-center gap-3 px-4 py-3',
+                          'active:bg-gray-100 dark:active:bg-gray-800',
+                          country.code === selectedCountryCode &&
+                            'bg-blue-50 dark:bg-blue-900/30'
+                        )}
+                        accessibilityRole='button'
+                      >
+                        <Text className='text-xl'>{country.flag}</Text>
+                        <Text className='flex-1 text-sm text-gray-900 dark:text-white'>
+                          {country.name}
+                        </Text>
+                        <Text className='text-sm text-gray-600 dark:text-gray-400'>
+                          {country.dialCode}
+                        </Text>
+                      </Pressable>
+                    ))
+                  )}
+                </ScrollView>
+
+                {/* Done button */}
+                <View className='p-3 border-t border-gray-200 dark:border-gray-700'>
+                  <Pressable
+                    onPress={() => setIsOpen(false)}
+                    className='items-center py-3'
+                    accessibilityRole='button'
+                  >
+                    <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/PhoneInput/index.ts

@@ -0,0 +1,2 @@
+export { PhoneInput } from './PhoneInput';
+export type { PhoneInputProps, Country } from './PhoneInput';

package/src/ui/Popover/Popover.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { View, Modal, Pressable, Animated } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface PopoverProps {
+  /** Trigger element */
+  trigger: React.ReactNode;
+  /** Popover content */
+  children: React.ReactNode;
+  /** Placement relative to trigger */
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Open state (controlled) */
+  isOpen?: boolean;
+  /** Open state change handler (controlled) */
+  onOpenChange?: (open: boolean) => void;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Popover Component
+ *
+ * Floating content container anchored to a trigger element.
+ * Useful for contextual information, menus, and form helpers.
+ *
+ * @example
+ * ```tsx
+ * <Popover trigger={<Button>Open</Button>}>
+ *   <View className="p-4">
+ *     <Text>Popover content</Text>
+ *   </View>
+ * </Popover>
+ * ```
+ */
+export const Popover: React.FC<PopoverProps> = ({
+  trigger,
+  children,
+  placement = 'bottom',
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  className,
+}) => {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const triggerRef = useRef<View>(null);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const isOpen =
+    controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+
+  const setIsOpen = useCallback(
+    (open: boolean) => {
+      if (controlledIsOpen === undefined) {
+        setInternalIsOpen(open);
+      }
+      onOpenChange?.(open);
+    },
+    [controlledIsOpen, onOpenChange]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      fadeAnim.setValue(0);
+    }
+  }, [isOpen, fadeAnim]);
+
+  const handleTriggerPress = () => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setPosition({ x, y, width, height });
+      setIsOpen(!isOpen);
+    });
+  };
+
+  // Calculate popover position
+  const getPopoverPosition = () => {
+    const OFFSET = 8;
+
+    switch (placement) {
+      case 'top':
+        return {
+          bottom: position.y > 0 ? undefined : 0,
+          top: position.y - OFFSET,
+          left: position.x,
+          width: position.width,
+          transform: [{ translateY: -100 }] as const,
+        };
+      case 'bottom':
+        return {
+          top: position.y + position.height + OFFSET,
+          left: position.x,
+          width: position.width,
+        };
+      case 'left':
+        return {
+          top: position.y,
+          right: position.x > 0 ? undefined : 0,
+          transform: [{ translateX: -8 }] as const,
+        };
+      case 'right':
+        return {
+          top: position.y,
+          left: position.x + position.width + OFFSET,
+        };
+      default:
+        return {};
+    }
+  };
+
+  return (
+    <>
+      <Pressable ref={triggerRef} onPress={handleTriggerPress}>
+        {trigger}
+      </Pressable>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='none'
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <Pressable className='flex-1' onPress={() => setIsOpen(false)}>
+          <Animated.View
+            style={[
+              {
+                position: 'absolute',
+                ...getPopoverPosition(),
+                opacity: fadeAnim,
+              },
+            ]}
+          >
+            <Pressable onPress={e => e.stopPropagation()}>
+              <View
+                className={cn(
+                  'bg-white dark:bg-gray-800',
+                  'border border-gray-200 dark:border-gray-700',
+                  'rounded-lg shadow-lg',
+                  className
+                )}
+              >
+                {children}
+              </View>
+            </Pressable>
+          </Animated.View>
+        </Pressable>
+      </Modal>
+    </>
+  );
+};

package/src/ui/Popover/index.ts

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

package/src/ui/Progress/Progress.tsx

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { View, Text, Animated } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ProgressProps {
+  /** Progress value (0-100) */
+  value?: number;
+  /** Maximum value */
+  max?: number;
+  /** Color variant */
+  variant?: 'default' | 'success' | 'warning' | 'danger';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show label */
+  showLabel?: boolean;
+  /** Custom label */
+  label?: string;
+  /** Indeterminate state (loading) */
+  indeterminate?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Progress Component
+ *
+ * Linear progress indicator with support for determinate and indeterminate states.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={75} showLabel />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Progress indeterminate />
+ * ```
+ */
+export const Progress: React.FC<ProgressProps> = ({
+  value = 0,
+  max = 100,
+  variant = 'default',
+  size = 'md',
+  showLabel = false,
+  label,
+  indeterminate = false,
+  className,
+}) => {
+  // Animation for indeterminate state
+  const animatedValue = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (indeterminate) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(animatedValue, {
+            toValue: 1,
+            duration: 1000,
+            useNativeDriver: false,
+          }),
+          Animated.timing(animatedValue, {
+            toValue: 0,
+            duration: 1000,
+            useNativeDriver: false,
+          }),
+        ])
+      ).start();
+    }
+  }, [indeterminate, animatedValue]);
+
+  // Clamp value between 0 and 100
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  // Color configurations
+  const colorClasses = {
+    default: 'bg-blue-600 dark:bg-blue-500',
+    success: 'bg-green-600 dark:bg-green-500',
+    warning: 'bg-yellow-600 dark:bg-yellow-500',
+    danger: 'bg-red-600 dark:bg-red-500',
+  };
+
+  // Size configurations
+  const sizeClasses = {
+    sm: 'h-1',
+    md: 'h-2',
+    lg: 'h-4',
+  };
+
+  const interpolatedWidth = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View className={cn('w-full', className)}>
+      <View
+        className={cn(
+          'w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden',
+          sizeClasses[size]
+        )}
+        accessibilityRole='progressbar'
+        accessibilityValue={{
+          now: indeterminate ? undefined : percentage,
+          min: 0,
+          max: 100,
+        }}
+      >
+        {indeterminate ? (
+          <Animated.View
+            className={cn('h-full rounded-full', colorClasses[variant])}
+            style={{ width: interpolatedWidth, opacity: 0.7 }}
+          />
+        ) : (
+          <View
+            className={cn('h-full rounded-full', colorClasses[variant])}
+            style={{ width: `${percentage}%` }}
+          />
+        )}
+      </View>
+      {(showLabel || label) && (
+        <View className='mt-1'>
+          <Text className='text-xs text-gray-600 dark:text-gray-400 text-right'>
+            {label || `${Math.round(percentage)}%`}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export interface ProgressBarProps {
+  /** Progress value (0-100) */
+  value: number;
+  /** Maximum value (default: 100) */
+  max?: number;
+  /** Color variant */
+  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'purple' | 'gray';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show percentage label */
+  showLabel?: boolean;
+  /** Label position */
+  labelPosition?: 'inside' | 'outside' | 'none';
+  /** Custom label text */
+  label?: string;
+  /** Additional className */
+  className?: string;
+  /** Animated transition */
+  animated?: boolean;
+}
+
+/**
+ * ProgressBar Component
+ *
+ * A visual progress indicator showing completion percentage.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={65} variant="primary" showLabel />
+ * ```
+ */
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  value,
+  max = 100,
+  variant = 'primary',
+  size = 'md',
+  showLabel = false,
+  labelPosition = 'outside',
+  label,
+  className,
+  animated: _animated = true,
+}) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+  const displayLabel = label || `${Math.round(percentage)}%`;
+
+  // Color variant configurations
+  const variantClasses = {
+    primary: 'bg-blue-600 dark:bg-blue-500',
+    success: 'bg-green-600 dark:bg-green-500',
+    warning: 'bg-yellow-600 dark:bg-yellow-500',
+    danger: 'bg-red-600 dark:bg-red-500',
+    purple: 'bg-purple-600 dark:bg-purple-500',
+    gray: 'bg-gray-600 dark:bg-gray-500',
+  };
+
+  // Size configurations
+  const sizeClasses = {
+    sm: 'h-1',
+    md: 'h-2',
+    lg: 'h-3',
+  };
+
+  return (
+    <View className={cn('w-full', className)}>
+      <View className='flex flex-row items-center gap-3'>
+        <View
+          className={cn(
+            'flex-1 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden',
+            sizeClasses[size]
+          )}
+        >
+          <View
+            className={cn(
+              'rounded-full',
+              sizeClasses[size],
+              variantClasses[variant]
+            )}
+            style={{ width: `${percentage}%` }}
+            accessibilityRole='progressbar'
+            accessibilityValue={{ now: value, min: 0, max }}
+          />
+        </View>
+        {showLabel && labelPosition === 'outside' && (
+          <Text className='text-sm font-medium text-gray-600 dark:text-gray-400'>
+            {displayLabel}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/ui/Progress/index.ts

@@ -0,0 +1,2 @@
+export { Progress, ProgressBar } from './Progress';
+export type { ProgressProps, ProgressBarProps } from './Progress';