@idealyst/datepicker 1.0.0

package/src/DateTimeRangePicker/DateTimeRangePicker.native.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+import { DateTimeRangePickerProps, DateTimeRange } from './types';
+import { RangeCalendar } from '../DateRangePicker/RangeCalendar.native';
+import { TimePicker } from '../DateTimePicker/TimePicker.native';
+import { dateTimeRangePickerStyles } from './DateTimeRangePicker.styles';
+
+const DateTimeRangePicker: React.FC<DateTimeRangePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  placeholder = 'Select date/time range',
+  label,
+  error,
+  helperText,
+  format = 'MM/dd/yyyy HH:mm',
+  locale,
+  size = 'medium',
+  variant = 'outlined',
+  timeMode = '12h',
+  showSeconds = false,
+  timeStep = 1,
+  allowSameDay = true,
+  maxDays,
+  style,
+  testID,
+}) => {
+  const formatDateTime = (date: Date): string => {
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const year = date.getFullYear();
+    
+    let hours = date.getHours();
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    
+    let timeString = '';
+    if (timeMode === '12h') {
+      const ampm = hours >= 12 ? 'PM' : 'AM';
+      hours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+      timeString = showSeconds 
+        ? `${String(hours).padStart(2, '0')}:${minutes}:${seconds} ${ampm}`
+        : `${String(hours).padStart(2, '0')}:${minutes} ${ampm}`;
+    } else {
+      timeString = showSeconds 
+        ? `${String(hours).padStart(2, '0')}:${minutes}:${seconds}`
+        : `${String(hours).padStart(2, '0')}:${minutes}`;
+    }
+    
+    return `${month}/${day}/${year} ${timeString}`;
+  };
+
+  const formatRange = (range: DateTimeRange): string => {
+    if (!range.startDate) return '';
+    if (!range.endDate) return `${formatDateTime(range.startDate)} - ...`;
+    return `${formatDateTime(range.startDate)} - ${formatDateTime(range.endDate)}`;
+  };
+
+  const handleDateRangeChange = (newRange: { startDate?: Date; endDate?: Date }) => {
+    // Preserve existing times when date changes
+    const updatedRange: DateTimeRange = {};
+    
+    if (newRange.startDate) {
+      updatedRange.startDate = new Date(newRange.startDate);
+      if (value?.startDate) {
+        updatedRange.startDate.setHours(
+          value.startDate.getHours(),
+          value.startDate.getMinutes(),
+          value.startDate.getSeconds()
+        );
+      }
+    }
+    
+    if (newRange.endDate) {
+      updatedRange.endDate = new Date(newRange.endDate);
+      if (value?.endDate) {
+        updatedRange.endDate.setHours(
+          value.endDate.getHours(),
+          value.endDate.getMinutes(),
+          value.endDate.getSeconds()
+        );
+      }
+    }
+
+    onChange(updatedRange.startDate || updatedRange.endDate ? updatedRange : null);
+  };
+
+  const handleStartTimeChange = (newTime: Date) => {
+    if (value?.startDate) {
+      const updatedDate = new Date(value.startDate);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange({ ...value, startDate: updatedDate });
+    }
+  };
+
+  const handleEndTimeChange = (newTime: Date) => {
+    if (value?.endDate) {
+      const updatedDate = new Date(value.endDate);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange({ ...value, endDate: updatedDate });
+    }
+  };
+
+  const daysDifference = (range: DateTimeRange): number => {
+    if (!range.startDate || !range.endDate) return 0;
+    const diffTime = range.endDate.getTime() - range.startDate.getTime();
+    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  };
+
+  const hoursDifference = (range: DateTimeRange): number => {
+    if (!range.startDate || !range.endDate) return 0;
+    const diffTime = range.endDate.getTime() - range.startDate.getTime();
+    return Math.ceil(diffTime / (1000 * 60 * 60));
+  };
+
+  dateTimeRangePickerStyles.useVariants({});
+
+  return (
+    <View style={[dateTimeRangePickerStyles.container, style]} testID={testID}>
+      {label && (
+        <Text style={dateTimeRangePickerStyles.label}>
+          {label}
+        </Text>
+      )}
+      
+      <View style={dateTimeRangePickerStyles.picker}>
+        {/* Selected Range Summary */}
+        {value?.startDate && value?.endDate && (
+          <View style={dateTimeRangePickerStyles.selectedRangeHeader}>
+            <Text style={dateTimeRangePickerStyles.selectedRangeLabel}>
+              Selected Range ({daysDifference(value)} days, {hoursDifference(value)} hours):
+            </Text>
+            <Text style={dateTimeRangePickerStyles.selectedRangeValue}>
+              {formatRange(value)}
+            </Text>
+          </View>
+        )}
+        
+        {/* Date Section */}
+        <View style={dateTimeRangePickerStyles.section}>
+          <Text style={dateTimeRangePickerStyles.sectionLabel}>Date Range</Text>
+          <View style={dateTimeRangePickerStyles.sectionContent}>
+            <RangeCalendar
+              value={value || {}}
+              onChange={handleDateRangeChange}
+              minDate={minDate}
+              maxDate={maxDate}
+              disabled={disabled}
+              allowSameDay={allowSameDay}
+              maxDays={maxDays}
+            />
+          </View>
+        </View>
+        
+        {/* Time Section */}
+        {(value?.startDate || value?.endDate) && (
+          <View style={dateTimeRangePickerStyles.section}>
+            <Text style={dateTimeRangePickerStyles.sectionLabel}>Time Selection</Text>
+            <View style={dateTimeRangePickerStyles.sectionContent}>
+              <View style={dateTimeRangePickerStyles.timeSection}>
+                {/* Start Time */}
+                {value?.startDate && (
+                  <View style={dateTimeRangePickerStyles.timeGroup}>
+                    <Text style={dateTimeRangePickerStyles.timeGroupLabel}>Start Time</Text>
+                    <TimePicker
+                      value={value.startDate}
+                      onChange={handleStartTimeChange}
+                      disabled={disabled}
+                      mode={timeMode}
+                      showSeconds={showSeconds}
+                      step={timeStep}
+                    />
+                  </View>
+                )}
+                
+                {/* End Time */}
+                {value?.endDate && (
+                  <View style={dateTimeRangePickerStyles.timeGroup}>
+                    <Text style={dateTimeRangePickerStyles.timeGroupLabel}>End Time</Text>
+                    <TimePicker
+                      value={value.endDate}
+                      onChange={handleEndTimeChange}
+                      disabled={disabled}
+                      mode={timeMode}
+                      showSeconds={showSeconds}
+                      step={timeStep}
+                    />
+                  </View>
+                )}
+              </View>
+            </View>
+          </View>
+        )}
+      </View>
+
+      {error && (
+        <Text style={dateTimeRangePickerStyles.errorText}>
+          {error}
+        </Text>
+      )}
+      
+      {helperText && !error && (
+        <Text style={dateTimeRangePickerStyles.helperText}>
+          {helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default DateTimeRangePicker;

package/src/DateTimeRangePicker/DateTimeRangePicker.styles.tsx

@@ -0,0 +1,95 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const dateTimeRangePickerStyles = StyleSheet.create((theme) => ({
+  container: {
+    gap: theme.spacing?.md || 16,
+  },
+
+  label: {
+    fontSize: theme.typography?.sizes?.small || 14,
+    fontWeight: '600',
+    color: theme.colors?.text?.primary || '#111827',
+    marginBottom: theme.spacing?.xs || 4,
+  },
+
+  picker: {
+    gap: theme.spacing?.md || 16,
+  },
+
+  selectedRangeHeader: {
+    padding: theme.spacing?.sm || 12,
+    backgroundColor: theme.colors?.surface?.secondary || '#f9fafb',
+    borderRadius: theme.borderRadius?.md || 8,
+    borderWidth: 1,
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
+    gap: theme.spacing?.xs || 4,
+
+    _web: {
+      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+    },
+  },
+
+  selectedRangeLabel: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    fontWeight: '500',
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+
+  selectedRangeValue: {
+    fontSize: theme.typography?.sizes?.medium || 16,
+    fontWeight: '600',
+    color: theme.colors?.text?.primary || '#111827',
+  },
+
+  section: {
+    gap: theme.spacing?.xs || 8,
+  },
+
+  sectionLabel: {
+    fontSize: theme.typography?.sizes?.small || 14,
+    fontWeight: '600',
+    color: theme.colors?.text?.primary || '#111827',
+  },
+
+  sectionContent: {
+    padding: theme.spacing?.sm || 12,
+    borderWidth: 1,
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
+    borderRadius: theme.borderRadius?.md || 8,
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+
+    _web: {
+      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+    },
+  },
+
+  timeSection: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.spacing?.lg || 24,
+  },
+
+  timeGroup: {
+    flex: 1,
+    gap: theme.spacing?.xs || 8,
+    alignItems: 'center',
+  },
+
+  timeGroupLabel: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    fontWeight: '500',
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+
+  errorText: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.semantic?.error || '#dc2626',
+    marginTop: theme.spacing?.xs || 4,
+  },
+
+  helperText: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.secondary || '#6b7280',
+    marginTop: theme.spacing?.xs || 4,
+  },
+}));

package/src/DateTimeRangePicker/DateTimeRangePicker.web.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+import { getWebProps } from 'react-native-unistyles/web';
+import { DateTimeRangePickerProps, DateTimeRange } from './types';
+import { RangeCalendar } from '../DateRangePicker/RangeCalendar.web';
+import { TimePicker } from '../DateTimePicker/TimePicker';
+import { dateTimeRangePickerStyles } from './DateTimeRangePicker.styles';
+
+const DateTimeRangePicker: React.FC<DateTimeRangePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  timeMode = '12h',
+  showSeconds = false,
+  timeStep = 1,
+  allowSameDay = true,
+  maxDays,
+  style,
+  testID,
+}) => {
+
+  const handleDateRangeChange = (newRange: { startDate?: Date; endDate?: Date }) => {
+    // Preserve existing times when date changes
+    const updatedRange: DateTimeRange = {};
+    
+    if (newRange.startDate) {
+      updatedRange.startDate = new Date(newRange.startDate);
+      if (value?.startDate) {
+        updatedRange.startDate.setHours(
+          value.startDate.getHours(),
+          value.startDate.getMinutes(),
+          value.startDate.getSeconds()
+        );
+      }
+    }
+    
+    if (newRange.endDate) {
+      updatedRange.endDate = new Date(newRange.endDate);
+      if (value?.endDate) {
+        updatedRange.endDate.setHours(
+          value.endDate.getHours(),
+          value.endDate.getMinutes(),
+          value.endDate.getSeconds()
+        );
+      }
+    }
+
+    onChange(updatedRange.startDate || updatedRange.endDate ? updatedRange : null);
+  };
+
+  const handleStartTimeChange = (newTime: Date) => {
+    if (value?.startDate) {
+      const updatedDate = new Date(value.startDate);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange({ ...value, startDate: updatedDate });
+    }
+  };
+
+  const handleEndTimeChange = (newTime: Date) => {
+    if (value?.endDate) {
+      const updatedDate = new Date(value.endDate);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange({ ...value, endDate: updatedDate });
+    }
+  };
+
+
+  dateTimeRangePickerStyles.useVariants({});
+  
+  const containerProps = getWebProps([dateTimeRangePickerStyles.container, style]);
+  const sectionProps = getWebProps([dateTimeRangePickerStyles.section]);
+  const sectionLabelProps = getWebProps([dateTimeRangePickerStyles.sectionLabel]);
+  const sectionContentProps = getWebProps([dateTimeRangePickerStyles.sectionContent]);
+  const timeSectionProps = getWebProps([dateTimeRangePickerStyles.timeSection]);
+  const timeGroupProps = getWebProps([dateTimeRangePickerStyles.timeGroup]);
+  const timeGroupLabelProps = getWebProps([dateTimeRangePickerStyles.timeGroupLabel]);
+
+  return (
+    <div {...containerProps} data-testid={testID}>
+      {/* Date Section */}
+      <div {...sectionProps}>
+        <div {...sectionLabelProps}>Date Range</div>
+        <div {...sectionContentProps}>
+          <RangeCalendar
+            value={value || {}}
+            onChange={handleDateRangeChange}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabled={disabled}
+            allowSameDay={allowSameDay}
+            maxDays={maxDays}
+          />
+        </div>
+      </div>
+      
+      {/* Time Section */}
+      {(value?.startDate || value?.endDate) && (
+        <div {...sectionProps}>
+          <div {...sectionLabelProps}>Time Selection</div>
+          <div {...sectionContentProps}>
+            <div {...timeSectionProps}>
+              {/* Start Time */}
+              {value?.startDate && (
+                <div {...timeGroupProps}>
+                  <div {...timeGroupLabelProps}>Start Time</div>
+                  <TimePicker
+                    value={value.startDate}
+                    onChange={handleStartTimeChange}
+                    disabled={disabled}
+                    mode={timeMode}
+                    showSeconds={showSeconds}
+                    step={timeStep}
+                  />
+                </div>
+              )}
+              
+              {/* End Time */}
+              {value?.endDate && (
+                <div {...timeGroupProps}>
+                  <div {...timeGroupLabelProps}>End Time</div>
+                  <TimePicker
+                    value={value.endDate}
+                    onChange={handleEndTimeChange}
+                    disabled={disabled}
+                    mode={timeMode}
+                    showSeconds={showSeconds}
+                    step={timeStep}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DateTimeRangePicker;

package/src/DateTimeRangePicker/index.native.ts

@@ -0,0 +1,2 @@
+export { default as DateTimeRangePicker } from './DateTimeRangePicker.native';
+export * from './types';

package/src/DateTimeRangePicker/index.ts

@@ -0,0 +1,2 @@
+export { default as DateTimeRangePicker } from './DateTimeRangePicker.web';
+export * from './types';

package/src/DateTimeRangePicker/types.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+export interface DateTimeRange {
+  /** Start date and time of the range */
+  startDate?: Date;
+  
+  /** End date and time of the range */
+  endDate?: Date;
+}
+
+export interface DateTimeRangePickerProps {
+  /** Current selected date/time range */
+  value?: DateTimeRange;
+  
+  /** Called when date/time range changes */
+  onChange: (range: DateTimeRange | null) => void;
+  
+  /** Minimum selectable date */
+  minDate?: Date;
+  
+  /** Maximum selectable date */
+  maxDate?: Date;
+  
+  /** Disabled state */
+  disabled?: boolean;
+  
+  /** Placeholder text when no range is selected */
+  placeholder?: string;
+  
+  /** Label for the picker */
+  label?: string;
+  
+  /** Error message to display */
+  error?: string;
+  
+  /** Helper text */
+  helperText?: string;
+  
+  /** Date format for display (default: 'MM/dd/yyyy HH:mm') */
+  format?: string;
+  
+  /** Locale for date formatting */
+  locale?: string;
+  
+  /** Size variant */
+  size?: 'small' | 'medium' | 'large';
+  
+  /** Visual variant */
+  variant?: 'outlined' | 'filled';
+  
+  /** Time picker mode */
+  timeMode?: '12h' | '24h';
+  
+  /** Show seconds in time picker */
+  showSeconds?: boolean;
+  
+  /** Time step in minutes */
+  timeStep?: number;
+  
+  /** Allow same day selection for start and end */
+  allowSameDay?: boolean;
+  
+  /** Maximum number of days in range */
+  maxDays?: number;
+  
+  /** Custom styles */
+  style?: ViewStyle;
+  
+  /** Test ID for testing */
+  testID?: string;
+}