@idealyst/datepicker 1.1.3 → 1.1.5

package/src/DateTimePicker/primitives/ClockFace.native.tsx

@@ -1,195 +0,0 @@
-import React from 'react';
-import { View, Text } from '@idealyst/components';
-import { TouchableOpacity } from 'react-native';
-import Svg, { Circle, Line } from 'react-native-svg';
-import { timePickerStyles } from '../TimePicker.styles';
-
-interface ClockFaceProps {
-  activeSelection: 'hour' | 'minute';
-  hours: number;
-  minutes: number;
-  displayHours: number;
-  mode: '12h' | '24h';
-  disabled: boolean;
-  onHourClick: (hour: number) => void;
-  onMinuteClick: (minute: number) => void;
-}
-
-export const ClockFace: React.FC<ClockFaceProps> = ({
-  activeSelection,
-  hours,
-  minutes,
-  displayHours,
-  mode,
-  disabled,
-  onHourClick,
-  onMinuteClick,
-}) => {
-  // Clock configuration
-  const CLOCK_SIZE = 180;
-  const CENTER = CLOCK_SIZE / 2;
-  const CLOCK_RADIUS = CENTER - 5;
-  const NUMBER_RADIUS = CENTER - 24;
-  const HOUR_HAND_LENGTH = CENTER - 44;
-  const MINUTE_HAND_LENGTH = CENTER - 36;
-  const CIRCLE_RADIUS = 15;
-
-  if (activeSelection === 'hour') {
-    return (
-      <View style={[timePickerStyles.clockContainer, { position: 'relative' }]}>
-        <Svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
-          {/* Clock face */}
-          <Circle 
-            cx={CENTER} 
-            cy={CENTER} 
-            r={CLOCK_RADIUS} 
-            fill="#f9fafb" 
-            stroke="#e5e7eb" 
-            strokeWidth="2"
-          />
-          
-          {/* Hour hand pointing to selected hour */}
-          {(() => {
-            const selectedHour = mode === '12h' ? displayHours : hours;
-            const hourFor12Clock = selectedHour === 12 ? 0 : selectedHour;
-            const hourAngle = (hourFor12Clock * 30) - 90;
-            const handX = CENTER + HOUR_HAND_LENGTH * Math.cos(hourAngle * Math.PI / 180);
-            const handY = CENTER + HOUR_HAND_LENGTH * Math.sin(hourAngle * Math.PI / 180);
-            
-            return (
-              <Line
-                x1={CENTER}
-                y1={CENTER}
-                x2={handX}
-                y2={handY}
-                stroke="#3b82f6"
-                strokeWidth="3"
-                strokeLinecap="round"
-              />
-            );
-          })()}
-          
-          {/* Center dot */}
-          <Circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
-        </Svg>
-        
-        {/* TouchableOpacity buttons for hour numbers */}
-        {[...Array(12)].map((_, i) => {
-          const hour = i === 0 ? 12 : i;
-          const angle = (i * 30) - 90;
-          const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
-          const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
-          const isSelected = (mode === '12h' ? displayHours : hours) === (hour === 12 ? (mode === '12h' ? 12 : 0) : hour);
-          
-          return (
-            <TouchableOpacity
-              key={`touch-${i}`}
-              onPressIn={() => !disabled && onHourClick(hour)}
-              disabled={disabled}
-              style={{
-                position: 'absolute',
-                left: x - CIRCLE_RADIUS,
-                top: y - CIRCLE_RADIUS,
-                width: CIRCLE_RADIUS * 2,
-                height: CIRCLE_RADIUS * 2,
-                borderRadius: CIRCLE_RADIUS,
-                backgroundColor: isSelected ? '#3b82f6' : 'transparent',
-                borderWidth: 1,
-                borderColor: isSelected ? '#3b82f6' : '#e5e7eb',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Text style={{
-                fontSize: 14,
-                fontWeight: '500',
-                color: isSelected ? '#ffffff' : '#374151',
-                textAlign: 'center',
-              }}>
-                {hour}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    );
-  } else {
-    // Minute selection clock
-    return (
-      <View style={[timePickerStyles.clockContainer, { position: 'relative' }]}>
-        <Svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
-          {/* Clock face */}
-          <Circle 
-            cx={CENTER} 
-            cy={CENTER} 
-            r={CLOCK_RADIUS} 
-            fill="#f9fafb" 
-            stroke="#e5e7eb" 
-            strokeWidth="2"
-          />
-          
-          {/* Minute hand */}
-          {(() => {
-            const minuteAngle = (minutes * 6) - 90;
-            const handX = CENTER + MINUTE_HAND_LENGTH * Math.cos(minuteAngle * Math.PI / 180);
-            const handY = CENTER + MINUTE_HAND_LENGTH * Math.sin(minuteAngle * Math.PI / 180);
-            
-            return (
-              <Line
-                x1={CENTER}
-                y1={CENTER}
-                x2={handX}
-                y2={handY}
-                stroke="#3b82f6"
-                strokeWidth="3"
-                strokeLinecap="round"
-              />
-            );
-          })()}
-          
-          {/* Center dot */}
-          <Circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
-        </Svg>
-        
-        {/* TouchableOpacity buttons for minute numbers */}
-        {[...Array(12)].map((_, i) => {
-          const minute = i * 5;
-          const angle = (i * 30) - 90;
-          const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
-          const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
-          const isSelected = Math.floor(minutes / 5) * 5 === minute;
-          
-          return (
-            <TouchableOpacity
-              key={`touch-${i}`}
-              onPressIn={() => !disabled && onMinuteClick(minute)}
-              disabled={disabled}
-              style={{
-                position: 'absolute',
-                left: x - CIRCLE_RADIUS,
-                top: y - CIRCLE_RADIUS,
-                width: CIRCLE_RADIUS * 2,
-                height: CIRCLE_RADIUS * 2,
-                borderRadius: CIRCLE_RADIUS,
-                backgroundColor: isSelected ? '#3b82f6' : 'transparent',
-                borderWidth: 1,
-                borderColor: isSelected ? '#3b82f6' : '#e5e7eb',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Text style={{
-                fontSize: 14,
-                fontWeight: '500',
-                color: isSelected ? '#ffffff' : '#374151',
-                textAlign: 'center',
-              }}>
-                {String(minute).padStart(2, '0')}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    );
-  }
-};

package/src/DateTimePicker/primitives/ClockFace.web.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import { View } from '@idealyst/components';
-import { timePickerStyles } from '../TimePicker.styles';
-
-interface ClockFaceProps {
-  activeSelection: 'hour' | 'minute';
-  hours: number;
-  minutes: number;
-  displayHours: number;
-  mode: '12h' | '24h';
-  disabled: boolean;
-  onHourClick: (hour: number) => void;
-  onMinuteClick: (minute: number) => void;
-}
-
-export const ClockFace: React.FC<ClockFaceProps> = ({
-  activeSelection,
-  hours,
-  minutes,
-  displayHours,
-  mode,
-  disabled,
-  onHourClick,
-  onMinuteClick,
-}) => {
-  // Clock configuration
-  const CLOCK_SIZE = 180;
-  const CENTER = CLOCK_SIZE / 2;
-  const CLOCK_RADIUS = CENTER - 5;
-  const NUMBER_RADIUS = CENTER - 24;
-  const HOUR_HAND_LENGTH = CENTER - 44;
-  const MINUTE_HAND_LENGTH = CENTER - 36;
-  const CIRCLE_RADIUS = 15;
-
-  if (activeSelection === 'hour') {
-    return (
-      <View style={timePickerStyles.clockContainer}>
-        <svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
-          {/* Clock face */}
-          <circle cx={CENTER} cy={CENTER} r={CLOCK_RADIUS} fill="#f9fafb" stroke="#e5e7eb" strokeWidth="2"/>
-          
-          {/* Hour numbers - clickable */}
-          {[...Array(12)].map((_, i) => {
-            const hour = i === 0 ? 12 : i;
-            const angle = (i * 30) - 90;
-            const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
-            const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
-            const isSelected = (mode === '12h' ? displayHours : hours) === (hour === 12 ? (mode === '12h' ? 12 : 0) : hour);
-            
-            return (
-              <g key={i} onClick={() => !disabled && onHourClick(hour)}>
-                <circle
-                  cx={x}
-                  cy={y}
-                  r={CIRCLE_RADIUS}
-                  fill={isSelected ? '#3b82f6' : 'transparent'}
-                  stroke={isSelected ? '#3b82f6' : '#e5e7eb'}
-                  strokeWidth="1"
-                  style={{ cursor: disabled ? 'default' : 'pointer' }}
-                />
-                <text
-                  x={x}
-                  y={y + 4}
-                  textAnchor="middle"
-                  fontSize="14"
-                  fill={isSelected ? '#ffffff' : '#374151'}
-                  fontWeight="500"
-                  style={{ cursor: disabled ? 'default' : 'pointer', userSelect: 'none', pointerEvents: 'none' }}
-                >
-                  {hour}
-                </text>
-              </g>
-            );
-          })}
-          
-          {/* Hour hand pointing to selected hour */}
-          {(() => {
-            const selectedHour = mode === '12h' ? displayHours : hours;
-            const hourFor12Clock = selectedHour === 12 ? 0 : selectedHour;
-            const hourAngle = (hourFor12Clock * 30) - 90;
-            const handX = CENTER + HOUR_HAND_LENGTH * Math.cos(hourAngle * Math.PI / 180);
-            const handY = CENTER + HOUR_HAND_LENGTH * Math.sin(hourAngle * Math.PI / 180);
-            
-            return (
-              <line
-                x1={CENTER}
-                y1={CENTER}
-                x2={handX}
-                y2={handY}
-                stroke="#3b82f6"
-                strokeWidth="3"
-                strokeLinecap="round"
-              />
-            );
-          })()}
-          
-          {/* Center dot */}
-          <circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
-        </svg>
-      </View>
-    );
-  } else {
-    return (
-      <View style={timePickerStyles.clockContainer}>
-        <svg width={CLOCK_SIZE} height={CLOCK_SIZE} style={timePickerStyles.clockSvg}>
-          {/* Clock face */}
-          <circle cx={CENTER} cy={CENTER} r={CLOCK_RADIUS} fill="#f9fafb" stroke="#e5e7eb" strokeWidth="2"/>
-          
-          {/* Minute markers - every 5 minutes */}
-          {[...Array(12)].map((_, i) => {
-            const minute = i * 5;
-            const angle = (i * 30) - 90;
-            const x = CENTER + NUMBER_RADIUS * Math.cos(angle * Math.PI / 180);
-            const y = CENTER + NUMBER_RADIUS * Math.sin(angle * Math.PI / 180);
-            const isSelected = Math.floor(minutes / 5) * 5 === minute;
-            
-            return (
-              <g key={i} onClick={() => !disabled && onMinuteClick(minute)}>
-                <circle
-                  cx={x}
-                  cy={y}
-                  r={CIRCLE_RADIUS}
-                  fill={isSelected ? '#3b82f6' : 'transparent'}
-                  stroke={isSelected ? '#3b82f6' : '#e5e7eb'}
-                  strokeWidth="1"
-                  style={{ cursor: disabled ? 'default' : 'pointer' }}
-                />
-                <text
-                  x={x}
-                  y={y + 4}
-                  textAnchor="middle"
-                  fontSize="12"
-                  fill={isSelected ? '#ffffff' : '#374151'}
-                  fontWeight="500"
-                  style={{ cursor: disabled ? 'default' : 'pointer', userSelect: 'none', pointerEvents: 'none' }}
-                >
-                  {minute.toString().padStart(2, '0')}
-                </text>
-              </g>
-            );
-          })}
-          
-          {/* Minute hand pointing to selected minute */}
-          {(() => {
-            const minuteAngle = (minutes * 6) - 90;
-            const handX = CENTER + MINUTE_HAND_LENGTH * Math.cos(minuteAngle * Math.PI / 180);
-            const handY = CENTER + MINUTE_HAND_LENGTH * Math.sin(minuteAngle * Math.PI / 180);
-            
-            return (
-              <line
-                x1={CENTER}
-                y1={CENTER}
-                x2={handX}
-                y2={handY}
-                stroke="#3b82f6"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            );
-          })()}
-          
-          {/* Center dot */}
-          <circle cx={CENTER} cy={CENTER} r="4" fill="#3b82f6"/>
-        </svg>
-      </View>
-    );
-  }
-};

package/src/DateTimePicker/primitives/TimeInput.native.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { TextInput } from 'react-native';
-import { timePickerStyles } from '../TimePicker.styles';
-
-interface TimeInputProps {
-  type: 'hour' | 'minute';
-  value: string;
-  onChangeText: (value: string) => void;
-  onFocus: () => void;
-  onBlur: () => void;
-  isActive: boolean;
-  disabled: boolean;
-  inputRef: React.RefObject<TextInput>;
-}
-
-export const TimeInput: React.FC<TimeInputProps> = ({
-  type,
-  value,
-  onChangeText,
-  onFocus,
-  onBlur,
-  isActive,
-  disabled,
-  inputRef,
-}) => {
-  const maxLength = type === 'hour' ? 2 : 2;
-
-  return (
-    <TextInput
-      ref={inputRef}
-      value={value}
-      onChangeText={onChangeText}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      keyboardType="numeric"
-      maxLength={maxLength}
-      selectTextOnFocus
-      editable={!disabled}
-      style={[
-        timePickerStyles.timeInput,
-        isActive && timePickerStyles.activeInput,
-        {
-          fontSize: 16,
-          fontWeight: '600',
-          color: isActive ? '#3b82f6' : '#111827',
-          textAlign: 'center',
-          paddingHorizontal: 2,
-          paddingVertical: 2,
-        }
-      ]}
-    />
-  );
-};

package/src/DateTimePicker/primitives/TimeInput.web.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { Input } from '@idealyst/components';
-import { timePickerStyles } from '../TimePicker.styles';
-
-interface TimeInputProps {
-  type: 'hour' | 'minute';
-  value: string;
-  onChangeText: (value: string) => void;
-  onFocus: () => void;
-  onBlur: () => void;
-  isActive: boolean;
-  disabled: boolean;
-  inputRef: React.RefObject<HTMLInputElement>;
-}
-
-export const TimeInput: React.FC<TimeInputProps> = ({
-  type,
-  value,
-  onChangeText,
-  onFocus,
-  onBlur,
-  isActive,
-  disabled,
-  inputRef,
-}) => {
-  const handleChange = (inputValue: string) => {
-    onChangeText(inputValue);
-    
-    // Smart focus switching for web
-    if (type === 'hour') {
-      const num = parseInt(inputValue);
-      if (!isNaN(num) && num >= 2) {
-        // Wait a moment then focus minutes
-        setTimeout(() => {
-          const minuteInput = document.querySelector('input[data-time-input="minute"]') as HTMLInputElement;
-          minuteInput?.focus();
-        }, 100);
-      }
-    }
-  };
-
-  const handleFocus = () => {
-    onFocus();
-    // For web, sync the displayed value on focus
-    if (type === 'minute' && value.length === 1) {
-      onChangeText(value.padStart(2, '0'));
-    }
-  };
-
-  return (
-    <Input
-      ref={inputRef}
-      variant="bare"
-      value={value}
-      onChangeText={handleChange}
-      onFocus={handleFocus}
-      onBlur={onBlur}
-      style={[
-        timePickerStyles.timeInput,
-        isActive ? timePickerStyles.activeInput : {}
-      ]}
-      disabled={disabled}
-      data-time-input={type}
-    />
-  );
-};

package/src/DateTimePicker/primitives/index.native.ts

@@ -1,2 +0,0 @@
-export { ClockFace } from './ClockFace';
-export { TimeInput } from './TimeInput';

package/src/DateTimePicker/primitives/index.ts

@@ -1,2 +0,0 @@
-export { ClockFace } from './ClockFace';
-export { TimeInput } from './TimeInput';

package/src/DateTimePicker/primitives/index.web.ts

@@ -1,2 +0,0 @@
-export { ClockFace } from './ClockFace';
-export { TimeInput } from './TimeInput';

package/src/DateTimePicker/types.ts

@@ -1,80 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-
-export interface DateTimePickerProps {
-  /** Current selected date and time */
-  value?: Date;
-  
-  /** Called when date/time 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 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;
-  
-  /** Custom styles */
-  style?: ViewStyle;
-  
-  /** Test ID for testing */
-  testID?: string;
-}
-
-export interface TimePickerProps {
-  /** Current selected time */
-  value?: Date;
-  
-  /** Called when time is selected */
-  onChange: (time: Date) => void;
-  
-  /** Disabled state */
-  disabled?: boolean;
-  
-  /** Time picker mode */
-  mode?: '12h' | '24h';
-  
-  
-  /** Time step in minutes */
-  step?: number;
-  
-  /** Custom styles */
-  style?: ViewStyle;
-  
-  /** Test ID for testing */
-  testID?: string;
-}

package/src/DateTimePicker/utils/dimensions.native.ts

@@ -1,9 +0,0 @@
-import { Dimensions } from 'react-native';
-
-export const getDimensions = () => Dimensions.get('window');
-
-export const addEventListener = (callback: (data: { window: { width: number; height: number } }) => void) => {
-  return Dimensions.addEventListener('change', ({ window }) => {
-    callback({ window });
-  });
-};

package/src/DateTimePicker/utils/dimensions.ts

@@ -1,9 +0,0 @@
-import { Dimensions } from 'react-native';
-
-export const getDimensions = () => Dimensions.get('window');
-
-export const addEventListener = (callback: (data: { window: { width: number; height: number } }) => void) => {
-  return Dimensions.addEventListener('change', ({ window }) => {
-    callback({ window });
-  });
-};

package/src/DateTimePicker/utils/dimensions.web.ts

@@ -1,33 +0,0 @@
-export const getDimensions = () => {
-  if (typeof window !== 'undefined') {
-    return {
-      width: window.innerWidth,
-      height: window.innerHeight,
-    };
-  }
-  
-  return { width: 1024, height: 768 }; // Default desktop size
-};
-
-export const addEventListener = (callback: (data: { window: { width: number; height: number } }) => void) => {
-  if (typeof window !== 'undefined') {
-    const handleResize = () => {
-      callback({
-        window: {
-          width: window.innerWidth,
-          height: window.innerHeight,
-        },
-      });
-    };
-    
-    window.addEventListener('resize', handleResize);
-    
-    return {
-      remove: () => window.removeEventListener('resize', handleResize),
-    };
-  }
-  
-  return {
-    remove: () => {},
-  };
-};

package/src/DateTimeRangePicker/DateTimeRangePicker.native.tsx

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