@sudobility/components-rn 1.0.1

package/src/ui/DateInput/DateInput.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+import { Calendar } from '../Calendar';
+
+export interface DateInputProps {
+  /** Current value (ISO date string YYYY-MM-DD or Date object) */
+  value: string | Date;
+  /** Callback when value changes */
+  onChange: (value: string) => void;
+  /** Minimum date */
+  minDate?: Date;
+  /** Maximum date */
+  maxDate?: Date;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * DateInput Component
+ *
+ * Date input field that opens a calendar picker.
+ * Displays selected date in a readable format.
+ *
+ * @example
+ * ```tsx
+ * <DateInput
+ *   value={startDate}
+ *   onChange={setStartDate}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <DateInput
+ *   value={appointmentDate}
+ *   onChange={setAppointmentDate}
+ *   minDate={new Date()}
+ *   placeholder="Select date"
+ * />
+ * ```
+ */
+export const DateInput: React.FC<DateInputProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  placeholder = 'Select date',
+  size = 'md',
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Size configurations
+  const sizeClasses = {
+    sm: 'py-1.5 px-3 text-sm',
+    md: 'py-2 px-4 text-base',
+    lg: 'py-3 px-4 text-lg',
+  };
+
+  // Convert value to Date
+  const dateValue =
+    value instanceof Date ? value : value ? new Date(value) : null;
+
+  // Format date for display
+  const formatDisplay = (date: Date | null): string => {
+    if (!date) return '';
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  // Handle date selection
+  const handleDateChange = useCallback(
+    (date: Date) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      onChange(`${year}-${month}-${day}`);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <View className={cn('w-full', className)}>
+      {/* Trigger Button */}
+      <Pressable
+        onPress={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        className={cn(
+          'flex-row items-center justify-between',
+          'bg-white dark:bg-gray-800',
+          'border border-gray-300 dark:border-gray-600',
+          'rounded-lg',
+          sizeClasses[size],
+          disabled && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={placeholder}
+        accessibilityState={{ disabled }}
+      >
+        <Text
+          className={cn(
+            'flex-1',
+            dateValue
+              ? 'text-gray-900 dark:text-gray-100'
+              : 'text-gray-400 dark:text-gray-500'
+          )}
+        >
+          {dateValue ? formatDisplay(dateValue) : placeholder}
+        </Text>
+        <Text className='text-gray-400 dark:text-gray-500 ml-2'>📅</Text>
+      </Pressable>
+
+      {/* Calendar Modal */}
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='fade'
+        onRequestClose={handleClose}
+      >
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View className='flex-1 justify-center px-4 bg-black/50'>
+            <TouchableWithoutFeedback>
+              <View className='bg-white dark:bg-gray-900 rounded-lg p-4 shadow-xl'>
+                <Calendar
+                  value={dateValue || new Date()}
+                  onChange={handleDateChange}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                />
+
+                {/* Close button */}
+                <View className='mt-4 pt-4 border-t border-gray-200 dark:border-gray-700'>
+                  <Pressable
+                    onPress={handleClose}
+                    className='items-center py-2'
+                    accessibilityRole='button'
+                    accessibilityLabel='Cancel'
+                  >
+                    <Text className='text-sm font-medium text-gray-600 dark:text-gray-400'>
+                      Cancel
+                    </Text>
+                  </Pressable>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+};

package/src/ui/DateInput/index.ts

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

package/src/ui/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+import { Calendar } from '../Calendar';
+import { TimePicker } from '../TimePicker';
+
+export interface DateTimePickerProps {
+  /** Date time value */
+  value: Date;
+  /** Change handler */
+  onChange: (value: Date) => void;
+  /** Use 12-hour format for time */
+  use12Hour?: boolean;
+  /** Minute step interval */
+  minuteStep?: number;
+  /** Minimum date */
+  minDate?: Date;
+  /** Maximum date */
+  maxDate?: Date;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * DateTimePicker Component
+ *
+ * Combined date and time picker with calendar and time selection.
+ * Supports min/max dates and 12/24 hour formats.
+ *
+ * @example
+ * ```tsx
+ * <DateTimePicker
+ *   value={appointment}
+ *   onChange={setAppointment}
+ *   use12Hour
+ *   minDate={new Date()}
+ * />
+ * ```
+ */
+export const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  value,
+  onChange,
+  use12Hour = false,
+  minuteStep = 1,
+  minDate,
+  maxDate,
+  disabled = false,
+  placeholder = 'Select date and time',
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date>(value);
+
+  // Format date time for display
+  const formatDisplay = (date: Date): string => {
+    const dateStr = date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+
+    if (use12Hour) {
+      const hour12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+      const period = hours >= 12 ? 'PM' : 'AM';
+      return `${dateStr}, ${hour12}:${minutes.toString().padStart(2, '0')} ${period}`;
+    }
+
+    return `${dateStr}, ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  };
+
+  // Handle date change
+  const handleDateChange = useCallback(
+    (date: Date) => {
+      const newDateTime = new Date(date);
+      newDateTime.setHours(selectedDate.getHours());
+      newDateTime.setMinutes(selectedDate.getMinutes());
+      setSelectedDate(newDateTime);
+    },
+    [selectedDate]
+  );
+
+  // Handle time change
+  const handleTimeChange = useCallback(
+    (timeStr: string) => {
+      const [hours, minutes] = timeStr.split(':').map(Number);
+      const newDateTime = new Date(selectedDate);
+      newDateTime.setHours(hours);
+      newDateTime.setMinutes(minutes);
+      setSelectedDate(newDateTime);
+    },
+    [selectedDate]
+  );
+
+  // Get time string from date
+  const getTimeString = (date: Date): string => {
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  };
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setSelectedDate(value);
+  }, [value]);
+
+  const handleConfirm = useCallback(() => {
+    onChange(selectedDate);
+    setIsOpen(false);
+  }, [selectedDate, onChange]);
+
+  const handleOpen = useCallback(() => {
+    setSelectedDate(value);
+    setIsOpen(true);
+  }, [value]);
+
+  return (
+    <View className={cn('w-full', className)}>
+      {/* Trigger Button */}
+      <Pressable
+        onPress={() => !disabled && handleOpen()}
+        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={placeholder}
+        accessibilityState={{ disabled }}
+      >
+        <Text className='text-sm text-gray-900 dark:text-white'>
+          {formatDisplay(value)}
+        </Text>
+        <Text className='text-gray-600 dark:text-gray-400'>📅</Text>
+      </Pressable>
+
+      {/* Picker Modal */}
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='fade'
+        onRequestClose={handleClose}
+      >
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View className='flex-1 justify-center px-4 bg-black/50'>
+            <TouchableWithoutFeedback>
+              <View className='bg-white dark:bg-gray-900 rounded-lg p-4 shadow-xl'>
+                {/* Calendar */}
+                <View className='mb-4'>
+                  <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 mb-2'>
+                    Select Date
+                  </Text>
+                  <Calendar
+                    value={selectedDate}
+                    onChange={handleDateChange}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                  />
+                </View>
+
+                {/* Divider */}
+                <View className='h-px bg-gray-200 dark:bg-gray-700 my-3' />
+
+                {/* Time picker */}
+                <View>
+                  <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 mb-2'>
+                    Select Time
+                  </Text>
+                  <TimePicker
+                    value={getTimeString(selectedDate)}
+                    onChange={handleTimeChange}
+                    use12Hour={use12Hour}
+                    minuteStep={minuteStep}
+                  />
+                </View>
+
+                {/* Actions */}
+                <View className='flex-row gap-2 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700'>
+                  <Pressable
+                    onPress={handleClose}
+                    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'
+                    )}
+                    accessibilityRole='button'
+                    accessibilityLabel='Cancel'
+                  >
+                    <Text className='text-sm text-gray-700 dark:text-gray-300'>
+                      Cancel
+                    </Text>
+                  </Pressable>
+                  <Pressable
+                    onPress={handleConfirm}
+                    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'
+                    )}
+                    accessibilityRole='button'
+                    accessibilityLabel='Confirm'
+                  >
+                    <Text className='text-sm text-white font-medium'>OK</Text>
+                  </Pressable>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+};

package/src/ui/DateTimePicker/index.ts

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

package/src/ui/Dialog/Dialog.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  ScrollView,
+  Animated,
+  Dimensions,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface DialogProps {
+  /** Whether dialog is open */
+  isOpen: boolean;
+  /** Close handler */
+  onClose?: () => void;
+  /** Dialog content */
+  children: React.ReactNode;
+  /** Dialog size */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Show close button */
+  showCloseButton?: boolean;
+  /** Close on outside click */
+  closeOnOutsideClick?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Dialog Component
+ *
+ * Simple, flexible dialog/modal container for React Native.
+ * More flexible than AlertDialog, suitable for any content.
+ *
+ * @example
+ * ```tsx
+ * <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <View className="p-6">
+ *     <Text>Dialog Title</Text>
+ *     <Text>Dialog content...</Text>
+ *   </View>
+ * </Dialog>
+ * ```
+ */
+export const Dialog: React.FC<DialogProps> = ({
+  isOpen,
+  onClose,
+  children,
+  size = 'md',
+  showCloseButton = true,
+  closeOnOutsideClick = true,
+  className,
+}) => {
+  const scaleAnim = useRef(new Animated.Value(0.9)).current;
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (isOpen) {
+      Animated.parallel([
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          friction: 8,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      scaleAnim.setValue(0.9);
+      opacityAnim.setValue(0);
+    }
+  }, [isOpen, scaleAnim, opacityAnim]);
+
+  // Size configurations (percentage of screen width)
+  const sizeWidths = {
+    sm: SCREEN_WIDTH * 0.7,
+    md: SCREEN_WIDTH * 0.8,
+    lg: SCREEN_WIDTH * 0.9,
+    xl: SCREEN_WIDTH * 0.95,
+    full: SCREEN_WIDTH - 32,
+  };
+
+  const handleOverlayPress = () => {
+    if (closeOnOutsideClick && onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      visible={isOpen}
+      animationType='none'
+      transparent
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      {/* Backdrop */}
+      <Pressable
+        onPress={handleOverlayPress}
+        className='flex-1 justify-center items-center bg-black/60'
+      >
+        {/* Dialog Container */}
+        <Animated.View
+          style={{
+            opacity: opacityAnim,
+            transform: [{ scale: scaleAnim }],
+            width: sizeWidths[size],
+            maxHeight: '80%',
+          }}
+        >
+          <Pressable onPress={e => e.stopPropagation()}>
+            <View
+              className={cn(
+                'bg-white dark:bg-gray-900 rounded-xl shadow-xl overflow-hidden',
+                className
+              )}
+            >
+              {/* Close button */}
+              {showCloseButton && onClose && (
+                <Pressable
+                  onPress={onClose}
+                  className='absolute top-4 right-4 z-10 p-1'
+                  accessibilityRole='button'
+                  accessibilityLabel='Close dialog'
+                >
+                  <Text className='text-xl text-gray-400'>✕</Text>
+                </Pressable>
+              )}
+
+              {/* Content */}
+              <ScrollView bounces={false}>{children}</ScrollView>
+            </View>
+          </Pressable>
+        </Animated.View>
+      </Pressable>
+    </Modal>
+  );
+};

package/src/ui/Dialog/index.ts

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