@idealyst/datepicker 1.0.0

package/src/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View } from '@idealyst/components';
+import { DateTimePickerProps } from './types';
+import { Calendar } from '../DatePicker/Calendar';
+import { TimePicker } from './TimePicker';
+
+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);
+    }
+  };
+
+  const containerStyle = {
+    flexDirection: 'row' as const,
+    gap: 16,
+    alignItems: 'flex-start',
+    
+    _web: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+    }
+  };
+
+  return (
+    <View style={[containerStyle, style]} data-testid={testID}>
+      <Calendar
+        value={value}
+        onChange={handleDateChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabled={disabled}
+      />
+      
+      <TimePicker
+        value={value || new Date()}
+        onChange={handleTimeChange}
+        disabled={disabled}
+        mode={timeMode}
+        showSeconds={showSeconds}
+        step={timeStep}
+      />
+    </View>
+  );
+};
+
+export default DateTimePicker;

package/src/DateTimePicker/TimePicker.native.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { View, Text, Button } from '@idealyst/components';
+import { TimePickerProps } from './types';
+import { timePickerStyles } from './TimePicker.styles';
+
+export const TimePicker: React.FC<TimePickerProps> = ({
+  value = new Date(),
+  onChange,
+  disabled = false,
+  mode = '12h',
+  showSeconds = false,
+  step = 1,
+  style,
+  testID,
+}) => {
+  const hours = value.getHours();
+  const minutes = value.getMinutes();
+  const seconds = value.getSeconds();
+
+  const displayHours = mode === '12h' ? (hours === 0 ? 12 : hours > 12 ? hours - 12 : hours) : hours;
+  const ampm = mode === '12h' ? (hours >= 12 ? 'PM' : 'AM') : null;
+
+  const updateTime = (newHours: number, newMinutes: number, newSeconds?: number) => {
+    const newDate = new Date(value);
+    newDate.setHours(newHours, newMinutes, newSeconds || 0);
+    onChange(newDate);
+  };
+
+  const handleHourChange = (delta: number) => {
+    let newHours = hours + delta;
+    if (mode === '12h') {
+      if (newHours < 0) newHours = 23;
+      if (newHours > 23) newHours = 0;
+    } else {
+      if (newHours < 0) newHours = 23;
+      if (newHours > 23) newHours = 0;
+    }
+    updateTime(newHours, minutes, seconds);
+  };
+
+  const handleMinuteChange = (delta: number) => {
+    let newMinutes = minutes + (delta * step);
+    let newHours = hours;
+    
+    if (newMinutes < 0) {
+      newMinutes = 60 + newMinutes;
+      newHours = hours - 1;
+      if (newHours < 0) newHours = 23;
+    } else if (newMinutes >= 60) {
+      newMinutes = newMinutes - 60;
+      newHours = hours + 1;
+      if (newHours > 23) newHours = 0;
+    }
+    
+    updateTime(newHours, newMinutes, seconds);
+  };
+
+  const handleSecondChange = (delta: number) => {
+    let newSeconds = seconds + delta;
+    let newMinutes = minutes;
+    let newHours = hours;
+    
+    if (newSeconds < 0) {
+      newSeconds = 59;
+      newMinutes = minutes - 1;
+      if (newMinutes < 0) {
+        newMinutes = 59;
+        newHours = hours - 1;
+        if (newHours < 0) newHours = 23;
+      }
+    } else if (newSeconds >= 60) {
+      newSeconds = 0;
+      newMinutes = minutes + 1;
+      if (newMinutes >= 60) {
+        newMinutes = 0;
+        newHours = hours + 1;
+        if (newHours > 23) newHours = 0;
+      }
+    }
+    
+    updateTime(newHours, newMinutes, newSeconds);
+  };
+
+  const toggleAmPm = () => {
+    if (mode === '12h') {
+      const newHours = hours >= 12 ? hours - 12 : hours + 12;
+      updateTime(newHours, minutes, seconds);
+    }
+  };
+
+  timePickerStyles.useVariants({});
+
+  return (
+    <View style={[timePickerStyles.container, style]} testID={testID}>
+      {/* Hours */}
+      <View style={timePickerStyles.timeSection}>
+        <View style={timePickerStyles.stepperContainer}>
+          <Button
+            variant="text"
+            size="small"
+            onPress={() => handleHourChange(1)}
+            disabled={disabled}
+            style={timePickerStyles.stepperButton}
+          >
+            <Text style={timePickerStyles.stepperText}>▲</Text>
+          </Button>
+          <View style={timePickerStyles.timeInput}>
+            <Text style={{ textAlign: 'center', fontSize: 16, fontWeight: '600' }}>
+              {String(displayHours).padStart(2, '0')}
+            </Text>
+          </View>
+          <Button
+            variant="text"
+            size="small"
+            onPress={() => handleHourChange(-1)}
+            disabled={disabled}
+            style={timePickerStyles.stepperButton}
+          >
+            <Text style={timePickerStyles.stepperText}>▼</Text>
+          </Button>
+        </View>
+      </View>
+
+      {/* Separator */}
+      <Text style={timePickerStyles.timeSeparator}>:</Text>
+
+      {/* Minutes */}
+      <View style={timePickerStyles.timeSection}>
+        <View style={timePickerStyles.stepperContainer}>
+          <Button
+            variant="text"
+            size="small"
+            onPress={() => handleMinuteChange(1)}
+            disabled={disabled}
+            style={timePickerStyles.stepperButton}
+          >
+            <Text style={timePickerStyles.stepperText}>▲</Text>
+          </Button>
+          <View style={timePickerStyles.timeInput}>
+            <Text style={{ textAlign: 'center', fontSize: 16, fontWeight: '600' }}>
+              {String(minutes).padStart(2, '0')}
+            </Text>
+          </View>
+          <Button
+            variant="text"
+            size="small"
+            onPress={() => handleMinuteChange(-1)}
+            disabled={disabled}
+            style={timePickerStyles.stepperButton}
+          >
+            <Text style={timePickerStyles.stepperText}>▼</Text>
+          </Button>
+        </View>
+      </View>
+
+      {/* Seconds */}
+      {showSeconds && (
+        <>
+          <Text style={timePickerStyles.timeSeparator}>:</Text>
+          <View style={timePickerStyles.timeSection}>
+            <View style={timePickerStyles.stepperContainer}>
+              <Button
+                variant="text"
+                size="small"
+                onPress={() => handleSecondChange(1)}
+                disabled={disabled}
+                style={timePickerStyles.stepperButton}
+              >
+                <Text style={timePickerStyles.stepperText}>▲</Text>
+              </Button>
+              <View style={timePickerStyles.timeInput}>
+                <Text style={{ textAlign: 'center', fontSize: 16, fontWeight: '600' }}>
+                  {String(seconds).padStart(2, '0')}
+                </Text>
+              </View>
+              <Button
+                variant="text"
+                size="small"
+                onPress={() => handleSecondChange(-1)}
+                disabled={disabled}
+                style={timePickerStyles.stepperButton}
+              >
+                <Text style={timePickerStyles.stepperText}>▼</Text>
+              </Button>
+            </View>
+          </View>
+        </>
+      )}
+
+      {/* AM/PM */}
+      {mode === '12h' && ampm && (
+        <Button
+          variant="outlined"
+          size="small"
+          onPress={toggleAmPm}
+          disabled={disabled}
+          style={timePickerStyles.ampmButton}
+        >
+          {ampm}
+        </Button>
+      )}
+    </View>
+  );
+};

package/src/DateTimePicker/TimePicker.styles.tsx

@@ -0,0 +1,116 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const timePickerStyles = StyleSheet.create((theme) => ({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 4,
+    width: 170,
+  },
+  clockContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 4,
+    
+    _web: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }
+  },
+  clockSvg: {
+    cursor: 'pointer',
+    
+    _web: {
+      cursor: 'pointer',
+    }
+  },
+  timeInputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    
+    _web: {
+      display: 'flex',
+      alignItems: 'center',
+    }
+  },
+  timeInput: {
+    width: 32,
+    height: 32,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.colors?.text?.primary || '#111827',
+    borderWidth: 0,
+    borderBottomWidth: 0,
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+    
+    _web: {
+      border: 'none',
+      borderBottom: 'none',
+      outline: 'none',
+      cursor: 'pointer',
+    }
+  },
+  activeInput: {
+    color: theme.colors?.accent?.primary || '#3b82f6',
+    borderBottomWidth: 2,
+    borderBottomColor: theme.colors?.accent?.primary || '#3b82f6',
+    borderRadius: 0,
+  },
+  timeSeparator: {
+    fontSize: 16,
+    fontWeight: '300',
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+  ampmButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    minWidth: 36,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  tabBar: {
+    flexDirection: 'row',
+    gap: 4,
+    marginBottom: 4,
+    padding: 2,
+    backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
+    borderRadius: 6,
+    
+    _web: {
+      display: 'flex',
+    }
+  },
+  tabButton: {
+    flex: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    fontSize: 13,
+    fontWeight: '500',
+    borderRadius: 4,
+    borderWidth: 0,
+    cursor: 'pointer',
+    
+    _web: {
+      border: 'none',
+      cursor: 'pointer',
+      transition: 'all 0.2s',
+    }
+  },
+  activeTab: {
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+    color: theme.colors?.accent?.primary || '#3b82f6',
+    
+    _web: {
+      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+    }
+  },
+  inactiveTab: {
+    backgroundColor: 'transparent',
+    color: theme.colors?.text?.secondary || '#6b7280',
+  },
+}));