@idealyst/datepicker 1.1.3 → 1.1.5

package/src/DateTimeRangePicker/DateTimeRangePicker.styles.tsx

@@ -1,118 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-export const dateTimeRangePickerStyles = StyleSheet.create((theme) => ({
-  container: {
-    gap: theme.spacing?.md || 16,
-  },
-
-  label: {
-    fontSize: theme.typography?.fontSize?.sm || 14,
-    fontWeight: '600',
-    color: theme.colors?.text?.primary || '#111827',
-    marginBottom: theme.spacing?.xs || 4,
-  },
-
-  picker: {
-    gap: theme.spacing?.md || 16,
-  },
-
-  selectedRangeHeader: {
-    flexDirection: 'column',
-    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: {
-      display: 'flex',
-      flexDirection: 'column',
-      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
-    },
-  },
-
-  selectedRangeLabel: {
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    fontWeight: '500',
-    color: theme.colors?.text?.secondary || '#6b7280',
-  },
-
-  selectedRangeValue: {
-    fontSize: theme.typography?.fontSize?.md || 16,
-    fontWeight: '600',
-    color: theme.colors?.text?.primary || '#111827',
-  },
-
-  section: {
-    gap: theme.spacing?.xs || 8,
-  },
-
-  sectionLabel: {
-    fontSize: theme.typography?.fontSize?.sm || 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?.fontSize?.sm || 12,
-    fontWeight: '500',
-    color: theme.colors?.text?.secondary || '#6b7280',
-  },
-
-  errorText: {
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    color: theme.colors?.semantic?.error || '#dc2626',
-    marginTop: theme.spacing?.xs || 4,
-  },
-
-  helperText: {
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    color: theme.colors?.text?.secondary || '#6b7280',
-    marginTop: theme.spacing?.xs || 4,
-  },
-
-  sideBySideLayout: {
-    flexDirection: 'row',
-    gap: theme.spacing?.lg || 24,
-    alignItems: 'flex-start',
-    _web: {
-      display: 'flex',
-    },
-  },
-
-  timeSelectionPanel: {
-    minWidth: 220,
-    flexShrink: 0,
-  },
-
-  navigationContainer: {
-    marginTop: theme.spacing?.sm || 12,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-}));

package/src/DateTimeRangePicker/DateTimeRangePicker.web.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { DateTimeRangePickerProps } from './types';
-import { DateTimeRangePickerBase } from './DateTimeRangePickerBase';
-import { RangeCalendar } from '../DateRangePicker/RangeCalendar.web';
-import { TimePicker } from '../DateTimePicker/TimePicker';
-
-const DateTimeRangePicker: React.FC<DateTimeRangePickerProps> = (props) => {
-  return (
-    <DateTimeRangePickerBase
-      {...props}
-      renderRangeCalendar={(rangeCalendarProps) => (
-        <RangeCalendar {...rangeCalendarProps} />
-      )}
-      renderTimePicker={(timePickerProps) => (
-        <TimePicker {...timePickerProps} />
-      )}
-    />
-  );
-};
-
-export default DateTimeRangePicker;

package/src/DateTimeRangePicker/DateTimeRangePickerBase.tsx

@@ -1,327 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { View, Button } from '@idealyst/components';
-import { DateTimeRangePickerProps, DateTimeRange } from './types';
-import { dateTimeRangePickerStyles } from './DateTimeRangePicker.styles';
-import { timePickerStyles } from '../DateTimePicker/TimePicker.styles';
-import { getDimensions, addEventListener } from '../DateTimePicker/utils/dimensions';
-
-interface DateTimeRangePickerBaseProps extends DateTimeRangePickerProps {
-  renderRangeCalendar: (props: {
-    value: DateTimeRange;
-    onChange: (range: DateTimeRange) => void;
-    minDate?: Date;
-    maxDate?: Date;
-    disabled: boolean;
-    allowSameDay: boolean;
-    maxDays?: number;
-    onDateSelected?: (type: 'start' | 'end') => void;
-    showTimes?: boolean;
-    timeMode?: '12h' | '24h';
-  }) => React.ReactNode;
-  renderTimePicker: (props: {
-    value: Date;
-    onChange: (date: Date) => void;
-    disabled: boolean;
-    mode: '12h' | '24h';
-    step: number;
-  }) => React.ReactNode;
-}
-
-type ViewMode = 'responsive' | 'date' | 'start-time' | 'end-time';
-type TimeSelection = 'start' | 'end';
-
-export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = ({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  disabled = false,
-  timeMode = '12h',
-  timeStep = 1,
-  allowSameDay = true,
-  maxDays,
-  style,
-  testID,
-  renderRangeCalendar,
-  renderTimePicker,
-}) => {
-  const [screenData, setScreenData] = useState(() => getDimensions());
-  const [viewMode, setViewMode] = useState<ViewMode>('responsive');
-  const [activeTimeSelection, setActiveTimeSelection] = useState<TimeSelection>('start');
-
-  // Listen for screen dimension changes
-  useEffect(() => {
-    const subscription = addEventListener(({ window }) => {
-      setScreenData(window);
-    });
-    return () => subscription?.remove();
-  }, []);
-
-  // Determine if we should use side-by-side layout
-  const shouldUseSideBySide = screenData.width >= 700; // Wider threshold for range picker
-  const canFitSideBySide = screenData.width >= 580; // Minimum for side-by-side
-
-  // Auto-adjust view mode based on screen size
-  useEffect(() => {
-    if (shouldUseSideBySide) {
-      setViewMode('responsive');
-    } else if (viewMode === 'responsive' && !canFitSideBySide) {
-      setViewMode('date');
-    }
-  }, [shouldUseSideBySide, canFitSideBySide, viewMode]);
-
-  const handleDateRangeChange = useCallback((newRange: DateTimeRange) => {
-    // Preserve existing times when date changes
-    const updatedRange: DateTimeRange = { ...newRange };
-    
-    if (newRange.startDate && value?.startDate) {
-      updatedRange.startDate = new Date(newRange.startDate);
-      updatedRange.startDate.setHours(
-        value.startDate.getHours(),
-        value.startDate.getMinutes(),
-        value.startDate.getSeconds()
-      );
-    }
-    
-    if (newRange.endDate && value?.endDate) {
-      updatedRange.endDate = new Date(newRange.endDate);
-      updatedRange.endDate.setHours(
-        value.endDate.getHours(),
-        value.endDate.getMinutes(),
-        value.endDate.getSeconds()
-      );
-    }
-
-    onChange(updatedRange.startDate || updatedRange.endDate ? updatedRange : null);
-  }, [value, onChange]);
-
-  const handleDateSelected = useCallback((type: 'start' | 'end') => {
-    // Auto-focus time selection when date is selected on mobile
-    if (!canFitSideBySide) {
-      setActiveTimeSelection(type);
-      setViewMode(type === 'start' ? 'start-time' : 'end-time');
-    } else {
-      // On desktop, just switch the active time tab
-      setActiveTimeSelection(type);
-    }
-  }, [canFitSideBySide]);
-
-  const handleStartTimeChange = useCallback((newTime: Date) => {
-    if (value?.startDate) {
-      const updatedDate = new Date(value.startDate);
-      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
-      onChange({ ...value, startDate: updatedDate });
-    }
-  }, [value, onChange]);
-
-  const handleEndTimeChange = useCallback((newTime: Date) => {
-    if (value?.endDate) {
-      const updatedDate = new Date(value.endDate);
-      updatedDate.setHours(newTime.getHours(), newTime.getMinutes(), newTime.getSeconds());
-      onChange({ ...value, endDate: updatedDate });
-    }
-  }, [value, onChange]);
-
-  // Initialize styles
-  timePickerStyles.useVariants({});
-
-  // Side-by-side layout for larger screens
-  if (viewMode === 'responsive' && shouldUseSideBySide) {
-    return (
-      <View style={[dateTimeRangePickerStyles.container, style]} testID={testID} data-testid={testID}>
-        {/* Side by side layout */}
-        <View style={dateTimeRangePickerStyles.sideBySideLayout}>
-          {renderRangeCalendar({
-            value: value || {},
-            onChange: handleDateRangeChange,
-            minDate,
-            maxDate,
-            disabled,
-            allowSameDay,
-            maxDays,
-            onDateSelected: handleDateSelected,
-            showTimes: true,
-            timeMode,
-          })}
-
-          {/* Time Selection Panel */}
-          {(value?.startDate || value?.endDate) && (
-            <View style={dateTimeRangePickerStyles.timeSelectionPanel}>
-              {/* Time Selection Tabs */}
-              <View style={timePickerStyles.tabBar}>
-                <Button
-                  onPress={() => setActiveTimeSelection('start')}
-                  disabled={disabled || !value?.startDate}
-                  style={[
-                    timePickerStyles.tabButton,
-                    activeTimeSelection === 'start' ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
-                  ]}
-                >
-                  Start Time
-                </Button>
-                <Button
-                  onPress={() => setActiveTimeSelection('end')}
-                  disabled={disabled || !value?.endDate}
-                  style={[
-                    timePickerStyles.tabButton,
-                    activeTimeSelection === 'end' ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
-                  ]}
-                >
-                  End Time
-                </Button>
-              </View>
-
-              {/* Active Time Picker */}
-              {activeTimeSelection === 'start' && value?.startDate && (
-                renderTimePicker({
-                  value: value.startDate,
-                  onChange: handleStartTimeChange,
-                  disabled,
-                  mode: timeMode,
-                  step: timeStep,
-                })
-              )}
-
-              {activeTimeSelection === 'end' && value?.endDate && (
-                renderTimePicker({
-                  value: value.endDate,
-                  onChange: handleEndTimeChange,
-                  disabled,
-                  mode: timeMode,
-                  step: timeStep,
-                })
-              )}
-            </View>
-          )}
-        </View>
-      </View>
-    );
-  }
-
-  // Step-by-step layout for smaller screens
-  const isDateStep = viewMode === 'date';
-  const isStartTimeStep = viewMode === 'start-time';
-  const isEndTimeStep = viewMode === 'end-time';
-
-  return (
-    <View style={[dateTimeRangePickerStyles.container, style]} testID={testID} data-testid={testID}>
-      {/* Step Navigation */}
-      <View style={timePickerStyles.tabBar}>
-        <Button
-          onPress={() => setViewMode('date')}
-          disabled={disabled}
-          style={[
-            timePickerStyles.tabButton,
-            isDateStep ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
-          ]}
-        >
-          1. Dates
-        </Button>
-        <Button
-          onPress={() => setViewMode('start-time')}
-          disabled={disabled || !value?.startDate}
-          style={[
-            timePickerStyles.tabButton,
-            isStartTimeStep ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
-          ]}
-        >
-          2. Start Time
-        </Button>
-        <Button
-          onPress={() => setViewMode('end-time')}
-          disabled={disabled || !value?.endDate}
-          style={[
-            timePickerStyles.tabButton,
-            isEndTimeStep ? timePickerStyles.activeTab : timePickerStyles.inactiveTab
-          ]}
-        >
-          3. End Time
-        </Button>
-      </View>
-
-      {/* Step Content */}
-      {isDateStep && (
-        <View>
-          {renderRangeCalendar({
-            value: value || {},
-            onChange: handleDateRangeChange,
-            minDate,
-            maxDate,
-            disabled,
-            allowSameDay,
-            maxDays,
-            onDateSelected: handleDateSelected,
-            showTimes: true,
-            timeMode,
-          })}
-        </View>
-      )}
-
-      {isStartTimeStep && value?.startDate && (
-        <View>
-          {renderTimePicker({
-            value: value.startDate,
-            onChange: handleStartTimeChange,
-            disabled,
-            mode: timeMode,
-            step: timeStep,
-          })}
-
-          {/* Navigation */}
-          <View style={dateTimeRangePickerStyles.navigationContainer}>
-            <Button
-              variant="text"
-              size="sm"
-              onPress={() => setViewMode('date')}
-              disabled={disabled}
-            >
-              ← Back to Dates
-            </Button>
-            {value.endDate && (
-              <Button
-                variant="text"
-                size="sm"
-                onPress={() => setViewMode('end-time')}
-                disabled={disabled}
-              >
-                End Time →
-              </Button>
-            )}
-          </View>
-        </View>
-      )}
-
-      {isEndTimeStep && value?.endDate && (
-        <View>
-          {renderTimePicker({
-            value: value.endDate,
-            onChange: handleEndTimeChange,
-            disabled,
-            mode: timeMode,
-            step: timeStep,
-          })}
-
-          {/* Navigation */}
-          <View style={dateTimeRangePickerStyles.navigationContainer}>
-            <Button
-              variant="text"
-              size="sm"
-              onPress={() => setViewMode('start-time')}
-              disabled={disabled}
-            >
-              ← Start Time
-            </Button>
-            <Button
-              variant="text"
-              size="sm"
-              onPress={() => setViewMode('date')}
-              disabled={disabled}
-            >
-              Back to Dates
-            </Button>
-          </View>
-        </View>
-      )}
-    </View>
-  );
-};

package/src/DateTimeRangePicker/index.native.ts

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

package/src/DateTimeRangePicker/index.ts

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

package/src/DateTimeRangePicker/types.ts

@@ -1,70 +0,0 @@
-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?: 'sm' | 'md' | 'lg';
-  
-  /** Visual variant */
-  variant?: 'outlined' | 'filled';
-  
-  /** Time picker mode */
-  timeMode?: '12h' | '24h';
-  
-  
-  /** 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;
-}

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

@@ -1,51 +0,0 @@
-import { Theme } from '@/theme';
-import { StyleSheet } from 'react-native-unistyles';
-
-type CalendarGridVariants = {
-  isCurrentMonth: boolean;
-  isSelected: boolean;
-};
-
-export const calendarGridStyles = StyleSheet.create((theme: Theme) => ({
-  weekdayHeader: {
-    marginBottom: 8,
-  },
-  weekdayCell: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 4,
-  },
-  weekdayText: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: theme.colors.text.secondary,
-  },
-  calendarGrid: {
-    marginBottom: 8,
-    height: 192,
-  },
-  dayCell: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 0,
-    
-    _web: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }
-  },
-  dayButton: ({ isCurrentMonth, isSelected }: CalendarGridVariants) => ({
-    width: '100%',
-    height: '100%',
-    maxWidth: 36,
-    minWidth: 24,
-    minHeight: 24,
-    padding: 0,
-    borderRadius: 4,
-    fontSize: 13,
-    opacity: isCurrentMonth ? 1 : 0.4,
-    backgroundColor: isSelected ? undefined : 'transparent',
-    color: isSelected ? undefined : theme.colors.text.primary,
-  }),
-}));