@idealyst/datepicker 1.0.0

package/src/examples/DatePickerExamples.tsx

@@ -0,0 +1,274 @@
+import { useState } from 'react';
+import { Screen, View, Text, Button } from '@idealyst/components';
+import { DatePicker } from '../DatePicker';
+import { DateTimePicker } from '../DateTimePicker';
+import { DateRangePicker, DateRange } from '../DateRangePicker';
+import { DateTimeRangePicker, DateTimeRange } from '../DateTimeRangePicker';
+
+export const DatePickerExamples = () => {
+  const [basicDate, setBasicDate] = useState<Date | null>(null);
+  const [rangeDate, setRangeDate] = useState<Date | null>(null);
+  const [disabledDate, setDisabledDate] = useState<Date | null>(new Date());
+  const [dateTime, setDateTime] = useState<Date | null>(null);
+  const [dateTime24h, setDateTime24h] = useState<Date | null>(null);
+  const [dateRange, setDateRange] = useState<DateRange | null>(null);
+  const [restrictedRange, setRestrictedRange] = useState<DateRange | null>(null);
+  const [dateTimeRange, setDateTimeRange] = useState<DateTimeRange | null>(null);
+
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+
+  const nextMonth = new Date();
+  nextMonth.setMonth(nextMonth.getMonth() + 1);
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+        <Text size="large" weight="bold" align="center">
+          DatePicker Examples
+        </Text>
+        
+        {/* Basic DatePicker */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Basic DatePicker</Text>
+          <DatePicker
+            value={basicDate}
+            onChange={setBasicDate}
+            label="Select Date"
+            placeholder="Choose a date"
+            helperText="Pick any date"
+          />
+          {basicDate && (
+            <Text size="small" color="secondary">
+              Selected: {basicDate.toDateString()}
+            </Text>
+          )}
+        </View>
+
+        {/* Date Range Restricted */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Date Range Restricted</Text>
+          <DatePicker
+            value={rangeDate}
+            onChange={setRangeDate}
+            label="Future Dates Only"
+            placeholder="Select future date"
+            minDate={tomorrow}
+            maxDate={nextMonth}
+            helperText="Only dates between tomorrow and next month"
+          />
+          {rangeDate && (
+            <Text size="small" color="secondary">
+              Selected: {rangeDate.toDateString()}
+            </Text>
+          )}
+        </View>
+
+        {/* Disabled DatePicker */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Disabled DatePicker</Text>
+          <DatePicker
+            value={disabledDate}
+            onChange={setDisabledDate}
+            label="Disabled"
+            placeholder="Cannot select"
+            disabled
+            helperText="This picker is disabled"
+          />
+        </View>
+
+        {/* Size Variants */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Size Variants</Text>
+          <View spacing="sm">
+            <DatePicker
+              value={null}
+              onChange={() => {}}
+              label="Small"
+              placeholder="Small size"
+              size="small"
+            />
+            <DatePicker
+              value={null}
+              onChange={() => {}}
+              label="Medium"
+              placeholder="Medium size"
+              size="medium"
+            />
+            <DatePicker
+              value={null}
+              onChange={() => {}}
+              label="Large"
+              placeholder="Large size"
+              size="large"
+            />
+          </View>
+        </View>
+
+        {/* Actions */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Actions</Text>
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <Button 
+              variant="outlined" 
+              onPress={() => setBasicDate(new Date())}
+            >
+              Set Today
+            </Button>
+            <Button 
+              variant="outlined" 
+              onPress={() => {
+                setBasicDate(null);
+                setRangeDate(null);
+              }}
+            >
+              Clear All
+            </Button>
+          </View>
+        </View>
+
+        {/* DateTime Picker Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">DateTimePicker Examples</Text>
+          
+          {/* Basic DateTime */}
+          <View spacing="sm">
+            <Text size="small" weight="medium">12-hour format</Text>
+            <DateTimePicker
+              value={dateTime}
+              onChange={setDateTime}
+              label="Select Date & Time"
+              placeholder="Choose date and time"
+              helperText="12-hour format with AM/PM"
+            />
+            {dateTime && (
+              <Text size="small" color="secondary">
+                Selected: {dateTime.toLocaleString()}
+              </Text>
+            )}
+          </View>
+
+          {/* 24-hour format */}
+          <View spacing="sm">
+            <Text size="small" weight="medium">24-hour format with seconds</Text>
+            <DateTimePicker
+              value={dateTime24h}
+              onChange={setDateTime24h}
+              label="24-hour with seconds"
+              placeholder="Choose date and time"
+              timeMode="24h"
+              showSeconds={true}
+              timeStep={5}
+              helperText="24-hour format with seconds, 5-minute steps"
+            />
+            {dateTime24h && (
+              <Text size="small" color="secondary">
+                Selected: {dateTime24h.toLocaleString()}
+              </Text>
+            )}
+          </View>
+        </View>
+
+        {/* Date Range Picker Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">DateRangePicker Examples</Text>
+          
+          {/* Basic Range */}
+          <View spacing="sm">
+            <Text size="small" weight="medium">Basic range selection</Text>
+            <DateRangePicker
+              value={dateRange}
+              onChange={setDateRange}
+              label="Select Date Range"
+              placeholder="Choose start and end dates"
+              helperText="Click dates to select a range"
+            />
+            {dateRange?.startDate && dateRange?.endDate && (
+              <Text size="small" color="secondary">
+                Range: {dateRange.startDate.toDateString()} to {dateRange.endDate.toDateString()}
+              </Text>
+            )}
+          </View>
+
+          {/* Restricted Range */}
+          <View spacing="sm">
+            <Text size="small" weight="medium">Max 14 days, future dates only</Text>
+            <DateRangePicker
+              value={restrictedRange}
+              onChange={setRestrictedRange}
+              label="Restricted Range"
+              placeholder="Maximum 14 days"
+              minDate={tomorrow}
+              maxDays={14}
+              helperText="Future dates only, max 14 days"
+            />
+            {restrictedRange?.startDate && restrictedRange?.endDate && (
+              <Text size="small" color="secondary">
+                Range: {restrictedRange.startDate.toDateString()} to {restrictedRange.endDate.toDateString()}
+              </Text>
+            )}
+          </View>
+        </View>
+
+        {/* Date Time Range Picker Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">DateTimeRangePicker Examples</Text>
+          
+          {/* Basic DateTime Range */}
+          <View spacing="sm">
+            <Text size="small" weight="medium">Date and time range selection</Text>
+            <DateTimeRangePicker
+              value={dateTimeRange}
+              onChange={setDateTimeRange}
+              label="Select Date & Time Range"
+              placeholder="Choose date/time range"
+              helperText="Select date range first, then adjust times"
+            />
+            {dateTimeRange?.startDate && dateTimeRange?.endDate && (
+              <Text size="small" color="secondary">
+                Range: {dateTimeRange.startDate.toLocaleString()} to {dateTimeRange.endDate.toLocaleString()}
+              </Text>
+            )}
+          </View>
+        </View>
+
+        {/* Features Description */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Features</Text>
+          <View spacing="sm">
+            <Text size="small" color="secondary">
+              • Cross-platform calendar picker
+            </Text>
+            <Text size="small" color="secondary">
+              • Date and time selection
+            </Text>
+            <Text size="small" color="secondary">
+              • Date range selection
+            </Text>
+            <Text size="small" color="secondary">
+              • Date/time range selection
+            </Text>
+            <Text size="small" color="secondary">
+              • 12/24 hour time formats
+            </Text>
+            <Text size="small" color="secondary">
+              • Min/max date restrictions
+            </Text>
+            <Text size="small" color="secondary">
+              • Multiple size variants
+            </Text>
+            <Text size="small" color="secondary">
+              • Accessible and keyboard navigable
+            </Text>
+            <Text size="small" color="secondary">
+              • Theme-aware styling
+            </Text>
+            <Text size="small" color="secondary">
+              • Customizable date/time formats
+            </Text>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/index.ts

@@ -0,0 +1 @@
+export { DatePickerExamples } from './DatePickerExamples';

package/src/index.native.ts

@@ -0,0 +1,16 @@
+// Date Picker Components
+export { DatePicker, Calendar } from './DatePicker/index.native';
+export type { DatePickerProps, CalendarProps } from './DatePicker';
+
+// Date Time Picker Components
+export { DateTimePicker, TimePicker } from './DateTimePicker/index.native';
+export type { DateTimePickerProps, TimePickerProps } from './DateTimePicker';
+
+// Date Range Picker Components
+export { DateRangePicker, RangeCalendar } from './DateRangePicker/index.native';
+export type { DateRangePickerProps, RangeCalendarProps, DateRange } from './DateRangePicker';
+
+// Date Time Range Picker Components
+export { DateTimeRangePicker } from './DateTimeRangePicker/index.native';
+export type { DateTimeRangePickerProps, DateTimeRange } from './DateTimeRangePicker';
+

package/src/index.ts

@@ -0,0 +1,16 @@
+// Date Picker Components
+export { DatePicker, Calendar } from './DatePicker';
+export type { DatePickerProps, CalendarProps } from './DatePicker';
+
+// Date Time Picker Components
+export { DateTimePicker, TimePicker } from './DateTimePicker';
+export type { DateTimePickerProps, TimePickerProps } from './DateTimePicker';
+
+// Date Range Picker Components
+export { DateRangePicker, RangeCalendar } from './DateRangePicker';
+export type { DateRangePickerProps, RangeCalendarProps, DateRange } from './DateRangePicker';
+
+// Date Time Range Picker Components
+export { DateTimeRangePicker } from './DateTimeRangePicker';
+export type { DateTimeRangePickerProps, DateTimeRange } from './DateTimeRangePicker';
+

package/src/primitives/CalendarGrid/CalendarGrid.styles.tsx

@@ -0,0 +1,62 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const calendarGridStyles = StyleSheet.create((theme) => ({
+  weekdayHeader: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7, 1fr)',
+    gap: 2,
+    marginBottom: 8,
+    
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+    }
+  },
+  weekdayCell: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 4,
+    
+    _web: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }
+  },
+  weekdayText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+  calendarGrid: {
+    gap: 2,
+    marginBottom: 8,
+    height: 192,
+    
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+    }
+  },
+  dayCell: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 0,
+    
+    _web: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }
+  },
+  dayButton: {
+    width: '100%',
+    height: '100%',
+    maxWidth: 36,
+    minWidth: 24,
+    minHeight: 24,
+    padding: 0,
+    borderRadius: 4,
+    fontSize: 13,
+  },
+}));

package/src/primitives/CalendarGrid/CalendarGrid.tsx

@@ -0,0 +1,138 @@
+import React, { useMemo } from 'react';
+import { Text, Button, View } from '@idealyst/components';
+import { calendarGridStyles } from './CalendarGrid.styles';
+
+interface CalendarGridProps {
+  currentMonth: Date;
+  selectedDate?: Date;
+  onDateSelect: (date: Date) => void;
+  onMonthChange?: (month: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+}
+
+
+export const CalendarGrid: React.FC<CalendarGridProps> = ({
+  currentMonth,
+  selectedDate,
+  onDateSelect,
+  onMonthChange,
+  minDate,
+  maxDate,
+  disabled = false,
+}) => {
+  const { calendarDays, startingDayOfWeek, daysInMonth, weekCount } = 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();
+    
+    const calendarDays = [];
+    
+    // Add previous month days to fill start of week
+    const prevMonthEnd = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 0);
+    const prevMonthDaysToShow = startingDayOfWeek;
+    for (let i = prevMonthDaysToShow - 1; i >= 0; i--) {
+      const day = prevMonthEnd.getDate() - i;
+      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, day);
+      calendarDays.push({ date, isCurrentMonth: false });
+    }
+    
+    // Add days of the current month
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+      calendarDays.push({ date, isCurrentMonth: true });
+    }
+    
+    // Add next month days only to complete partial weeks, never add full weeks of next month
+    const currentLength = calendarDays.length;
+    const weeksNeeded = Math.ceil(currentLength / 7);
+    const maxDays = weeksNeeded * 7;
+    
+    // Only add next month days to fill partial week
+    const remainingDays = maxDays - currentLength;
+    for (let day = 1; day <= remainingDays; day++) {
+      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, day);
+      calendarDays.push({ date, isCurrentMonth: false });
+    }
+    
+    const weekCount = Math.ceil(calendarDays.length / 7);
+    return { calendarDays, startingDayOfWeek, daysInMonth, weekCount };
+  }, [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 isDateSelected = (date: Date): boolean => {
+    if (!selectedDate) return false;
+    return (
+      date.getDate() === selectedDate.getDate() &&
+      date.getMonth() === selectedDate.getMonth() &&
+      date.getFullYear() === selectedDate.getFullYear()
+    );
+  };
+
+  const isCurrentMonth = (date: Date): boolean => {
+    return (
+      date.getMonth() === currentMonth.getMonth() &&
+      date.getFullYear() === currentMonth.getFullYear()
+    );
+  };
+
+  const handleDateSelect = (date: Date) => {
+    // If selecting a date from previous/next month, change the current month first
+    if (!isCurrentMonth(date) && onMonthChange) {
+      const newMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+      onMonthChange(newMonth);
+    }
+    onDateSelect(date);
+  };
+
+  return (
+    <>
+      {/* Weekday headers */}
+      <View style={calendarGridStyles.weekdayHeader}>
+        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (
+          <View key={day} style={calendarGridStyles.weekdayCell}>
+            <Text style={calendarGridStyles.weekdayText}>
+              {day}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Calendar grid */}
+      <View 
+        style={[calendarGridStyles.calendarGrid, { gridTemplateRows: `repeat(${weekCount}, 1fr)` }]}
+      >
+        {calendarDays.map((dayData, index) => {
+          const { date, isCurrentMonth } = dayData;
+          const buttonStyle = [
+            calendarGridStyles.dayButton,
+            { opacity: isCurrentMonth ? 1 : 0.4 }
+          ];
+
+          return (
+            <View key={index} style={calendarGridStyles.dayCell}>
+              <Button
+                variant={isDateSelected(date) ? 'contained' : 'text'}
+                intent={isDateSelected(date) ? 'primary' : 'neutral'}
+                disabled={isDateDisabled(date)}
+                onPress={() => handleDateSelect(date)}
+                size="small"
+                style={buttonStyle}
+              >
+                {date.getDate()}
+              </Button>
+            </View>
+          );
+        })}
+      </View>
+    </>
+  );
+};

package/src/primitives/CalendarGrid/index.ts

@@ -0,0 +1 @@
+export { CalendarGrid } from './CalendarGrid';

package/src/primitives/CalendarHeader/CalendarHeader.styles.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const calendarHeaderStyles = StyleSheet.create((theme) => ({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  centerSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  navButton: {
+    minWidth: 32,
+    minHeight: 32,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  titleButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+}));

package/src/primitives/CalendarHeader/CalendarHeader.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Text, Button, View } from '@idealyst/components';
+import { calendarHeaderStyles } from './CalendarHeader.styles';
+
+interface CalendarHeaderProps {
+  currentMonth: Date;
+  onPreviousMonth: () => void;
+  onNextMonth: () => void;
+  onMonthClick: () => void;
+  onYearClick: () => void;
+  disabled?: boolean;
+}
+
+
+export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
+  currentMonth,
+  onPreviousMonth,
+  onNextMonth,
+  onMonthClick,
+  onYearClick,
+  disabled = false,
+}) => {
+  const monthName = currentMonth.toLocaleDateString('en-US', { month: 'long' });
+  const year = currentMonth.getFullYear();
+
+  return (
+    <View style={calendarHeaderStyles.container}>
+      <Button 
+        variant="text" 
+        size="small" 
+        onPress={onPreviousMonth} 
+        disabled={disabled}
+        style={calendarHeaderStyles.navButton}
+      >
+        ←
+      </Button>
+      
+      <View style={calendarHeaderStyles.centerSection}>
+        <Button 
+          variant="text" 
+          onPress={onMonthClick}
+          disabled={disabled}
+          style={calendarHeaderStyles.titleButton}
+        >
+          <Text weight="semibold">{monthName}</Text>
+        </Button>
+        
+        <Button 
+          variant="text" 
+          onPress={onYearClick}
+          disabled={disabled}
+          style={calendarHeaderStyles.titleButton}
+        >
+          <Text weight="semibold">{year}</Text>
+        </Button>
+      </View>
+      
+      <Button 
+        variant="text" 
+        size="small" 
+        onPress={onNextMonth} 
+        disabled={disabled}
+        style={calendarHeaderStyles.navButton}
+      >
+        →
+      </Button>
+    </View>
+  );
+};

package/src/primitives/CalendarHeader/index.ts

@@ -0,0 +1 @@
+export { CalendarHeader } from './CalendarHeader';

package/src/primitives/CalendarOverlay/CalendarOverlay.styles.tsx

@@ -0,0 +1,81 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const calendarOverlayStyles = StyleSheet.create((theme) => ({
+  container: {
+    position: 'absolute',
+    top: 40,
+    left: 0,
+    right: 0,
+    backgroundColor: theme.colors?.surface?.primary || 'white',
+    borderRadius: 8,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
+    zIndex: 10,
+    
+    _web: {
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    }
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+    margin: 0,
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+  closeButton: {
+    minWidth: 24,
+    minHeight: 24,
+    padding: 2,
+    fontSize: 12,
+  },
+  monthGrid: {
+    gap: 6,
+    
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+    }
+  },
+  yearContainer: {
+    flexDirection: 'column',
+    gap: 8,
+  },
+  yearNavigation: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  yearGrid: {
+    gap: 6,
+    
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, 1fr)',
+    }
+  },
+  yearNavButton: {
+    minWidth: 32,
+    minHeight: 24,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 12,
+  },
+  yearRangeText: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: theme.colors?.text?.primary || '#374151',
+  },
+  gridButton: {
+    minHeight: 28,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 12,
+  },
+}));