@idealyst/datepicker 1.0.0

package/src/DatePicker/DatePicker.native.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { View, Text } from '@idealyst/components';
+import { DatePickerProps } from './types';
+import { Calendar } from './Calendar.native';
+import { datePickerStyles } from './DatePicker.styles';
+
+const DatePicker: React.FC<DatePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  style,
+  testID,
+}) => {
+  const handleDateSelect = (date: Date) => {
+    onChange(date);
+  };
+
+  return (
+    <Calendar
+      value={value}
+      onChange={handleDateSelect}
+      minDate={minDate}
+      maxDate={maxDate}
+      disabled={disabled}
+      style={style}
+      testID={testID}
+    />
+  );
+};
+
+export default DatePicker;

package/src/DatePicker/DatePicker.styles.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const datePickerStyles = StyleSheet.create((theme) => ({
+  container: {
+    // Base container styles
+  },
+  
+  label: {
+    marginBottom: theme.spacing?.sm || 8,
+    fontSize: theme.typography?.sizes?.small || 14,
+    fontWeight: '500',
+    color: theme.colors?.text?.primary || '#1f2937',
+  },
+
+  picker: {
+    borderRadius: theme.borderRadius?.md || 8,
+    border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+    padding: theme.spacing?.md || 16,
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    
+    // Native specific styles
+    _native: {
+      borderWidth: 1,
+      borderColor: theme.colors?.border?.primary || '#e5e7eb',
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 3,
+      elevation: 2,
+    },
+  },
+
+  selectedDateHeader: {
+    marginBottom: theme.spacing?.sm || 12,
+    paddingBottom: theme.spacing?.sm || 12,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors?.border?.secondary || '#f3f4f6',
+    
+    // Web specific border
+    _web: {
+      borderBottom: `1px solid ${theme.colors?.border?.secondary || '#f3f4f6'}`,
+    },
+  },
+
+  selectedDateLabel: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.secondary || '#6b7280',
+    marginBottom: 4,
+  },
+
+  selectedDateValue: {
+    fontSize: theme.typography?.sizes?.medium || 16,
+    fontWeight: '600',
+    color: theme.colors?.text?.primary || '#1f2937',
+  },
+
+  errorText: {
+    marginTop: 4,
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.error || '#dc2626',
+  },
+
+  helperText: {
+    marginTop: 4,
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+}));

package/src/DatePicker/DatePicker.web.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DatePickerProps } from './types';
+import { Calendar } from './Calendar';
+
+const DatePicker: React.FC<DatePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  style,
+  testID,
+}) => {
+  const handleDateSelect = (date: Date) => {
+    onChange(date);
+  };
+
+  return (
+    <Calendar
+      value={value}
+      onChange={handleDateSelect}
+      minDate={minDate}
+      maxDate={maxDate}
+      disabled={disabled}
+      style={style}
+      testID={testID}
+    />
+  );
+};
+
+export default DatePicker;

package/src/DatePicker/index.native.ts

@@ -0,0 +1,3 @@
+export { default as DatePicker } from './DatePicker.native';
+export { Calendar } from './Calendar.native';
+export type { DatePickerProps, CalendarProps } from './types';

package/src/DatePicker/index.ts

@@ -0,0 +1,3 @@
+export { default as DatePicker } from './DatePicker.web';
+export { Calendar } from './Calendar';
+export type { DatePickerProps, CalendarProps } from './types';

package/src/DatePicker/types.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+export interface DatePickerProps {
+  /** Current selected date */
+  value?: Date;
+  
+  /** Called when date changes */
+  onChange: (date: Date | null) => void;
+  
+  /** Minimum selectable date */
+  minDate?: Date;
+  
+  /** Maximum selectable date */
+  maxDate?: Date;
+  
+  /** Disabled state */
+  disabled?: boolean;
+  
+  /** Placeholder text when no date 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';
+  
+  /** Custom styles */
+  style?: ViewStyle;
+  
+  /** Test ID for testing */
+  testID?: string;
+}
+
+export interface CalendarProps {
+  /** Current selected date */
+  value?: Date;
+  
+  /** Called when date is selected */
+  onChange: (date: Date) => 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;
+  
+  /** Custom styles */
+  style?: ViewStyle;
+  
+  /** Test ID for testing */
+  testID?: string;
+}

package/src/DateRangePicker/DateRangePicker.native.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+import { DateRangePickerProps, DateRange } from './types';
+import { RangeCalendar } from './RangeCalendar.native';
+import { dateRangePickerStyles } from './DateRangePicker.styles';
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  allowSameDay = true,
+  maxDays,
+  style,
+  testID,
+}) => {
+
+  const handleRangeChange = (newRange: DateRange) => {
+    onChange(newRange.startDate || newRange.endDate ? newRange : null);
+  };
+
+
+  return (
+    <RangeCalendar
+      value={value || {}}
+      onChange={handleRangeChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      disabled={disabled}
+      allowSameDay={allowSameDay}
+      maxDays={maxDays}
+      style={style}
+      testID={testID}
+    />
+  );
+};
+
+export default DateRangePicker;

package/src/DateRangePicker/DateRangePicker.styles.tsx

@@ -0,0 +1,83 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const dateRangePickerStyles = 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',
+  },
+
+  rangeInputs: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing?.sm || 12,
+  },
+
+  rangeInput: {
+    flex: 1,
+    padding: theme.spacing?.sm || 12,
+    borderWidth: 1,
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
+    borderRadius: theme.borderRadius?.md || 8,
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+    fontSize: theme.typography?.sizes?.medium || 16,
+    textAlign: 'center',
+
+    _web: {
+      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+      outline: 'none',
+    },
+  },
+
+  rangeSeparator: {
+    fontSize: theme.typography?.sizes?.medium || 16,
+    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/DateRangePicker/DateRangePicker.web.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+import { getWebProps } from 'react-native-unistyles/web';
+import { DateRangePickerProps, DateRange } from './types';
+import { RangeCalendar } from './RangeCalendar.web';
+import { dateRangePickerStyles } from './DateRangePicker.styles';
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  allowSameDay = true,
+  maxDays,
+  style,
+  testID,
+}) => {
+
+  const handleRangeChange = (newRange: DateRange) => {
+    onChange(newRange.startDate || newRange.endDate ? newRange : null);
+  };
+
+
+  return (
+    <RangeCalendar
+      value={value || {}}
+      onChange={handleRangeChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      disabled={disabled}
+      allowSameDay={allowSameDay}
+      maxDays={maxDays}
+      style={style}
+      testID={testID}
+    />
+  );
+};
+
+export default DateRangePicker;

package/src/DateRangePicker/RangeCalendar.native.tsx

@@ -0,0 +1,267 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, Button } from '@idealyst/components';
+import { TouchableOpacity } from 'react-native';
+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({});
+
+  return (
+    <View style={[rangeCalendarStyles.container, style]} testID={testID}>
+      {/* Header */}
+      <View style={rangeCalendarStyles.header}>
+        <Button 
+          variant="text" 
+          size="small" 
+          onPress={goToPreviousMonth} 
+          disabled={disabled}
+          style={rangeCalendarStyles.headerButton}
+        >
+          ←
+        </Button>
+        <Text weight="semibold">{monthName}</Text>
+        <Button 
+          variant="text" 
+          size="small" 
+          onPress={goToNextMonth} 
+          disabled={disabled}
+          style={rangeCalendarStyles.headerButton}
+        >
+          →
+        </Button>
+      </View>
+
+      {/* Weekday headers */}
+      <View style={rangeCalendarStyles.weekdayHeader}>
+        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (
+          <View key={day} style={rangeCalendarStyles.weekdayCell}>
+            <Text style={rangeCalendarStyles.weekdayText}>
+              {day}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Calendar grid */}
+      <View style={rangeCalendarStyles.calendarGrid}>
+        {calendarDays.map((date, index) => (
+          <View key={index} style={rangeCalendarStyles.dayCell}>
+            {date && (
+              <TouchableOpacity
+                onPress={() => handleDateClick(date)}
+                disabled={isDateDisabled(date)}
+                style={[
+                  rangeCalendarStyles.dayButton,
+                  {
+                    backgroundColor: isDateSelected(date) 
+                      ? '#3b82f6'
+                      : isDateInRange(date)
+                      ? '#3b82f620'
+                      : 'transparent',
+                    opacity: isDateDisabled(date) ? 0.5 : 1,
+                  }
+                ]}
+              >
+                <Text 
+                  style={{ 
+                    color: isDateSelected(date) ? 'white' : 'black',
+                    fontSize: 13,
+                    fontWeight: isDateSelected(date) ? '600' : '400',
+                  }}
+                >
+                  {date.getDate()}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        ))}
+      </View>
+
+      {/* Range presets */}
+      <View style={rangeCalendarStyles.rangePresets}>
+        <Button
+          variant="text"
+          size="small"
+          onPress={() => handlePresetRange(7)}
+          disabled={disabled}
+          style={rangeCalendarStyles.presetButton}
+        >
+          Next 7 days
+        </Button>
+        <Button
+          variant="text"
+          size="small"
+          onPress={() => handlePresetRange(30)}
+          disabled={disabled}
+          style={rangeCalendarStyles.presetButton}
+        >
+          Next 30 days
+        </Button>
+        <Button
+          variant="outlined"
+          size="small"
+          onPress={clearRange}
+          disabled={disabled}
+          style={rangeCalendarStyles.clearButton}
+        >
+          Clear Range
+        </Button>
+      </View>
+    </View>
+  );
+};