@idealyst/datepicker 1.0.0

package/src/DateRangePicker/RangeCalendar.styles.tsx

@@ -0,0 +1,170 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const rangeCalendarStyles = StyleSheet.create((theme) => ({
+  container: {
+    width: 256,
+  },
+
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing?.md || 16,
+  },
+
+  headerButton: {
+    minWidth: 32,
+    minHeight: 32,
+    paddingHorizontal: theme.spacing?.xs || 8,
+    paddingVertical: theme.spacing?.xs || 4,
+  },
+
+  headerTitle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing?.xs || 8,
+  },
+
+  monthYearButton: {
+    paddingHorizontal: theme.spacing?.sm || 8,
+    paddingVertical: theme.spacing?.xs || 4,
+  },
+
+  weekdayHeader: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7, 1fr)',
+    gap: 2,
+    marginBottom: theme.spacing?.xs || 8,
+    
+    // Native fallback
+    _native: {
+      flexDirection: 'row',
+    },
+  },
+
+  weekdayCell: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: theme.spacing?.xs || 4,
+    
+    // Native fallback
+    _native: {
+      flex: 1,
+      alignItems: 'center',
+      paddingVertical: theme.spacing?.xs || 4,
+    },
+  },
+
+  weekdayText: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    fontWeight: '500',
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+
+  calendarGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7, 1fr)',
+    gap: 2,
+    marginBottom: theme.spacing?.xs || 8,
+    
+    // Native fallback
+    _native: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+  },
+
+  dayCell: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    aspectRatio: '1',
+    minHeight: 32,
+    
+    // Native specific sizing
+    _native: {
+      width: '14.28%', // 100% / 7 days
+      aspectRatio: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  },
+
+  dayButton: {
+    width: '100%',
+    height: '100%',
+    maxWidth: 36,
+    maxHeight: 36,
+    minWidth: 28,
+    minHeight: 28,
+    padding: 0,
+    borderRadius: theme.borderRadius?.sm || 6,
+    fontSize: theme.typography?.sizes?.small || 13,
+    
+    variants: {
+      inRange: {
+        true: {
+          backgroundColor: theme.colors?.accent?.primary + '20' || '#3b82f620',
+          borderRadius: 0,
+        },
+        false: {},
+      },
+      isStart: {
+        true: {
+          backgroundColor: theme.colors?.accent?.primary || '#3b82f6',
+          borderTopLeftRadius: theme.borderRadius?.sm || 6,
+          borderBottomLeftRadius: theme.borderRadius?.sm || 6,
+        },
+        false: {},
+      },
+      isEnd: {
+        true: {
+          backgroundColor: theme.colors?.accent?.primary || '#3b82f6',
+          borderTopRightRadius: theme.borderRadius?.sm || 6,
+          borderBottomRightRadius: theme.borderRadius?.sm || 6,
+        },
+        false: {},
+      },
+      isSelected: {
+        true: {
+          backgroundColor: theme.colors?.accent?.primary || '#3b82f6',
+          fontWeight: '600',
+        },
+        false: {
+          fontWeight: '400',
+        },
+      },
+    },
+    
+    // Native specific styling
+    _native: {
+      width: 28,
+      height: 28,
+      minWidth: 28,
+      minHeight: 28,
+      borderRadius: theme.borderRadius?.sm || 6,
+    },
+  },
+
+  rangePresets: {
+    paddingTop: theme.spacing?.sm || 12,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors?.border?.secondary || '#f3f4f6',
+    gap: theme.spacing?.xs || 8,
+    
+    // Web specific border
+    _web: {
+      borderTop: `1px solid ${theme.colors?.border?.secondary || '#f3f4f6'}`,
+    },
+  },
+
+  presetButton: {
+    width: '100%',
+    justifyContent: 'flex-start',
+  },
+
+  clearButton: {
+    width: '100%',
+  },
+}));

package/src/DateRangePicker/RangeCalendar.web.tsx

@@ -0,0 +1,275 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, Button } from '@idealyst/components';
+import { getWebProps } from 'react-native-unistyles/web';
+import { RangeCalendarProps, DateRange } from './types';
+import { rangeCalendarStyles } from './RangeCalendar.styles';
+
+export const RangeCalendar: React.FC<RangeCalendarProps> = ({
+  value = {},
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  currentMonth: controlledCurrentMonth,
+  onMonthChange,
+  allowSameDay = true,
+  maxDays,
+  style,
+  testID,
+}) => {
+  const [internalCurrentMonth, setInternalCurrentMonth] = useState(
+    controlledCurrentMonth || value?.startDate || new Date()
+  );
+  const [selectingEnd, setSelectingEnd] = useState(false);
+
+  const currentMonth = controlledCurrentMonth || internalCurrentMonth;
+
+  const handleMonthChange = (newMonth: Date) => {
+    if (onMonthChange) {
+      onMonthChange(newMonth);
+    } else {
+      setInternalCurrentMonth(newMonth);
+    }
+  };
+
+  const { monthStart, monthEnd, daysInMonth, startingDayOfWeek } = useMemo(() => {
+    const monthStart = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
+    const monthEnd = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
+    const daysInMonth = monthEnd.getDate();
+    const startingDayOfWeek = monthStart.getDay();
+    
+    return { monthStart, monthEnd, daysInMonth, startingDayOfWeek };
+  }, [currentMonth]);
+
+  const isDateDisabled = (date: Date): boolean => {
+    if (disabled) return true;
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+
+  const isDateInRange = (date: Date): boolean => {
+    const { startDate, endDate } = value || {};
+    if (!startDate || !endDate) return false;
+    return date > startDate && date < endDate;
+  };
+
+  const isDateRangeStart = (date: Date): boolean => {
+    const { startDate } = value || {};
+    if (!startDate) return false;
+    return (
+      date.getDate() === startDate.getDate() &&
+      date.getMonth() === startDate.getMonth() &&
+      date.getFullYear() === startDate.getFullYear()
+    );
+  };
+
+  const isDateRangeEnd = (date: Date): boolean => {
+    const { endDate } = value || {};
+    if (!endDate) return false;
+    return (
+      date.getDate() === endDate.getDate() &&
+      date.getMonth() === endDate.getMonth() &&
+      date.getFullYear() === endDate.getFullYear()
+    );
+  };
+
+  const isDateSelected = (date: Date): boolean => {
+    return isDateRangeStart(date) || isDateRangeEnd(date);
+  };
+
+  const handleDateClick = (date: Date) => {
+    if (isDateDisabled(date)) return;
+
+    const { startDate, endDate } = value || {};
+
+    // If no range is selected or we're starting fresh
+    if (!startDate || (startDate && endDate)) {
+      onChange({ startDate: date, endDate: undefined });
+      setSelectingEnd(true);
+      return;
+    }
+
+    // If we have a start date but no end date
+    if (startDate && !endDate) {
+      let newStartDate = startDate;
+      let newEndDate = date;
+
+      // Swap if end date is before start date
+      if (date < startDate) {
+        newStartDate = date;
+        newEndDate = startDate;
+      }
+
+      // Check if same day selection is allowed
+      if (!allowSameDay && newStartDate.getTime() === newEndDate.getTime()) {
+        return;
+      }
+
+      // Check max days constraint
+      if (maxDays) {
+        const daysDiff = Math.ceil((newEndDate.getTime() - newStartDate.getTime()) / (1000 * 60 * 60 * 24));
+        if (daysDiff > maxDays) {
+          return;
+        }
+      }
+
+      onChange({ startDate: newStartDate, endDate: newEndDate });
+      setSelectingEnd(false);
+    }
+  };
+
+  const goToPreviousMonth = () => {
+    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
+    handleMonthChange(newMonth);
+  };
+
+  const goToNextMonth = () => {
+    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
+    handleMonthChange(newMonth);
+  };
+
+  const handlePresetRange = (days: number) => {
+    const startDate = new Date();
+    const endDate = new Date();
+    endDate.setDate(endDate.getDate() + days - 1);
+    
+    onChange({ startDate, endDate });
+    setSelectingEnd(false);
+  };
+
+  const clearRange = () => {
+    onChange({});
+    setSelectingEnd(false);
+  };
+
+  const monthName = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+  // Create calendar grid
+  const calendarDays = [];
+  
+  // Add empty cells for days before month starts
+  for (let i = 0; i < startingDayOfWeek; i++) {
+    calendarDays.push(null);
+  }
+  
+  // Add days of the month
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+    calendarDays.push(date);
+  }
+
+  rangeCalendarStyles.useVariants({});
+  
+  const containerProps = getWebProps([rangeCalendarStyles.container, style]);
+  const headerProps = getWebProps([rangeCalendarStyles.header]);
+  const headerTitleProps = getWebProps([rangeCalendarStyles.headerTitle]);
+  
+  return (
+    <div {...containerProps} data-testid={testID}>
+      {/* Header */}
+      <div {...headerProps}>
+        <Button 
+          variant="text" 
+          size="small" 
+          onPress={goToPreviousMonth} 
+          disabled={disabled}
+          style={getWebProps([rangeCalendarStyles.headerButton]).style}
+        >
+          ←
+        </Button>
+        
+        <div {...headerTitleProps}>
+          <Text weight="semibold">{monthName}</Text>
+        </div>
+        
+        <Button 
+          variant="text" 
+          size="small" 
+          onPress={goToNextMonth} 
+          disabled={disabled}
+          style={getWebProps([rangeCalendarStyles.headerButton]).style}
+        >
+          →
+        </Button>
+      </div>
+
+      {/* Weekday headers */}
+      <div {...getWebProps([rangeCalendarStyles.weekdayHeader])}>
+        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (
+          <div key={day} {...getWebProps([rangeCalendarStyles.weekdayCell])}>
+            <div {...getWebProps([rangeCalendarStyles.weekdayText])}>
+              {day}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      <div {...getWebProps([rangeCalendarStyles.calendarGrid])}>
+        {calendarDays.map((date, index) => (
+          <div key={index} {...getWebProps([rangeCalendarStyles.dayCell])}>
+            {date && (
+              <Button
+                variant="text"
+                disabled={isDateDisabled(date)}
+                onPress={() => handleDateClick(date)}
+                size="small"
+                style={{
+                  ...getWebProps([rangeCalendarStyles.dayButton]).style,
+                  backgroundColor: isDateSelected(date) 
+                    ? '#3b82f6'
+                    : isDateInRange(date)
+                    ? '#3b82f620'
+                    : 'transparent',
+                  color: isDateSelected(date) ? 'white' : 'black',
+                  fontWeight: isDateSelected(date) ? '600' : '400',
+                  borderRadius: isDateRangeStart(date)
+                    ? '6px 0 0 6px'
+                    : isDateRangeEnd(date)
+                    ? '0 6px 6px 0'
+                    : isDateInRange(date)
+                    ? '0'
+                    : '6px',
+                }}
+              >
+                {date.getDate()}
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Range presets */}
+      <div {...getWebProps([rangeCalendarStyles.rangePresets])}>
+        <Button
+          variant="text"
+          size="small"
+          onPress={() => handlePresetRange(7)}
+          disabled={disabled}
+          style={getWebProps([rangeCalendarStyles.presetButton]).style}
+        >
+          Next 7 days
+        </Button>
+        <Button
+          variant="text"
+          size="small"
+          onPress={() => handlePresetRange(30)}
+          disabled={disabled}
+          style={getWebProps([rangeCalendarStyles.presetButton]).style}
+        >
+          Next 30 days
+        </Button>
+        <Button
+          variant="outlined"
+          size="small"
+          onPress={clearRange}
+          disabled={disabled}
+          style={getWebProps([rangeCalendarStyles.clearButton]).style}
+        >
+          Clear Range
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/DateRangePicker/index.native.ts

@@ -0,0 +1,3 @@
+export { default as DateRangePicker } from './DateRangePicker.native';
+export { RangeCalendar } from './RangeCalendar.native';
+export * from './types';

package/src/DateRangePicker/index.ts

@@ -0,0 +1,3 @@
+export { default as DateRangePicker } from './DateRangePicker.web';
+export { RangeCalendar } from './RangeCalendar.web';
+export * from './types';

package/src/DateRangePicker/types.ts

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+export interface DateRange {
+  /** Start date of the range */
+  startDate?: Date;
+  
+  /** End date of the range */
+  endDate?: Date;
+}
+
+export interface DateRangePickerProps {
+  /** Current selected date range */
+  value?: DateRange;
+  
+  /** Called when date range changes */
+  onChange: (range: DateRange | 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') */
+  format?: string;
+  
+  /** Locale for date formatting */
+  locale?: string;
+  
+  /** Size variant */
+  size?: 'small' | 'medium' | 'large';
+  
+  /** Visual variant */
+  variant?: 'outlined' | 'filled';
+  
+  /** 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;
+}
+
+export interface RangeCalendarProps {
+  /** Current selected date range */
+  value?: DateRange;
+  
+  /** Called when range is selected */
+  onChange: (range: DateRange) => void;
+  
+  /** Minimum selectable date */
+  minDate?: Date;
+  
+  /** Maximum selectable date */
+  maxDate?: Date;
+  
+  /** Disabled state */
+  disabled?: boolean;
+  
+  /** Current month being viewed */
+  currentMonth?: Date;
+  
+  /** Called when month changes */
+  onMonthChange?: (month: Date) => void;
+  
+  /** Allow same day selection */
+  allowSameDay?: boolean;
+  
+  /** Maximum number of days in range */
+  maxDays?: number;
+  
+  /** Custom styles */
+  style?: ViewStyle;
+  
+  /** Test ID for testing */
+  testID?: string;
+}

package/src/DateTimePicker/DateTimePicker.native.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+import { DateTimePickerProps } from './types';
+import { Calendar } from '../DatePicker/Calendar.native';
+import { TimePicker } from './TimePicker.native';
+import { dateTimePickerStyles } from './DateTimePicker.styles';
+
+const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  timeMode = '12h',
+  showSeconds = false,
+  timeStep = 1,
+  style,
+  testID,
+}) => {
+
+  const handleDateChange = (newDate: Date) => {
+    if (value) {
+      // Preserve the time from current value
+      const updatedDate = new Date(newDate);
+      updatedDate.setHours(value.getHours(), value.getMinutes(), value.getSeconds());
+      onChange(updatedDate);
+    } else {
+      onChange(newDate);
+    }
+  };
+
+  const handleTimeChange = (newTime: Date) => {
+    if (value) {
+      // Update time while preserving the date
+      const updatedDate = new Date(value);
+      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange(updatedDate);
+    } else {
+      // If no date is selected, use today's date with the new time
+      const today = new Date();
+      today.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
+      onChange(today);
+    }
+  };
+
+  dateTimePickerStyles.useVariants({});
+
+  return (
+    <View style={[dateTimePickerStyles.container, style]} testID={testID}>
+      {/* Date Section */}
+      <View style={dateTimePickerStyles.section}>
+        <Text style={dateTimePickerStyles.sectionLabel}>Date</Text>
+        <View style={dateTimePickerStyles.sectionContent}>
+          <Calendar
+            value={value}
+            onChange={handleDateChange}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabled={disabled}
+          />
+        </View>
+      </View>
+      
+      {/* Time Section */}
+      <View style={dateTimePickerStyles.section}>
+        <Text style={dateTimePickerStyles.sectionLabel}>Time</Text>
+        <View style={dateTimePickerStyles.sectionContent}>
+          <TimePicker
+            value={value || new Date()}
+            onChange={handleTimeChange}
+            disabled={disabled}
+            mode={timeMode}
+            showSeconds={showSeconds}
+            step={timeStep}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default DateTimePicker;

package/src/DateTimePicker/DateTimePicker.styles.tsx

@@ -0,0 +1,77 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const dateTimePickerStyles = 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,
+  },
+
+  selectedDateTimeHeader: {
+    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'}`,
+    },
+  },
+
+  selectedDateTimeLabel: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    fontWeight: '500',
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+
+  selectedDateTimeValue: {
+    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'}`,
+    },
+  },
+
+  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,
+  },
+}));