@idealyst/datepicker 1.1.3 → 1.1.5

package/src/examples/DatePickerExamples.tsx

@@ -1,16 +1,13 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Screen, View, Text, Button } from '@idealyst/components';
-import { DatePicker } from '../DatePicker';
-import { DateTimePicker } from '../DateTimePicker';
-import { DateTimeRangePicker, DateTimeRange } from '../DateTimeRangePicker';
+import { DatePicker, TimePicker, DateInput, TimeInput, DateTimePicker } from '../index';
 
 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 [date, setDate] = useState<Date | null>(null);
+  const [time, setTime] = useState<Date | null>(null);
   const [dateTime, setDateTime] = useState<Date | null>(null);
-  const [dateTime24h, setDateTime24h] = useState<Date | null>(null);
-  const [dateTimeRange, setDateTimeRange] = useState<DateTimeRange | null>(null);
+  const [inlineDate, setInlineDate] = useState(new Date());
+  const [inlineTime, setInlineTime] = useState(new Date());
 
   const tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
@@ -20,179 +17,146 @@ export const DatePickerExamples = () => {
 
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-        <Text size="lg" weight="bold" align="center">
-          DatePicker & DateTimePicker Examples
+      <View gap="lg">
+        <Text typography="h2" weight="bold" align="center">
+          DatePicker Examples
         </Text>
-        
-        {/* DateTime Picker Examples */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">DateTimePicker Examples</Text>
-          
-          {/* Basic DateTime */}
-          <View spacing="sm">
-            <Text size="sm" weight="medium">Basic DateTimePicker (12-hour)</Text>
-            <DateTimePicker
-              value={dateTime}
-              onChange={setDateTime}
-              label="Select Date & Time"
-              placeholder="Choose date and time"
-              helperText="Responsive layout - side-by-side on large screens, step-by-step on mobile"
-            />
-            {dateTime && (
-              <Text size="sm" color="secondary">
-                Selected: {dateTime.toLocaleString()}
-              </Text>
-            )}
-          </View>
 
-          {/* 24-hour format */}
-          <View spacing="sm">
-            <Text size="sm" 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"
-              timeStep={5}
-              helperText="24-hour format with seconds, 5-minute steps"
-            />
-            {dateTime24h && (
-              <Text size="sm" color="secondary">
-                Selected: {dateTime24h.toLocaleString()}
-              </Text>
-            )}
-          </View>
+        {/* DateInput */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">DateInput</Text>
+          <Text typography="caption" color="secondary">
+            Type a date (MM/DD/YYYY) or click the calendar button
+          </Text>
+          <DateInput
+            value={date ?? undefined}
+            onChange={setDate}
+            label="Select Date"
+            placeholder="MM/DD/YYYY"
+          />
+          {date && (
+            <Text typography="caption" color="secondary">
+              Selected: {date.toDateString()}
+            </Text>
+          )}
         </View>
 
-        {/* Basic DatePicker */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Basic DatePicker</Text>
-          <DatePicker
-            value={basicDate}
-            onChange={setBasicDate}
-            label="Select Date"
-            placeholder="Choose a date"
-            helperText="Pick any date"
+        {/* TimeInput */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">TimeInput</Text>
+          <Text typography="caption" color="secondary">
+            Type a time (e.g., 2:30 PM) or click the clock button
+          </Text>
+          <TimeInput
+            value={time ?? undefined}
+            onChange={setTime}
+            label="Select Time"
+            placeholder="12:00 PM"
           />
-          {basicDate && (
-            <Text size="sm" color="secondary">
-              Selected: {basicDate.toDateString()}
+          {time && (
+            <Text typography="caption" color="secondary">
+              Selected: {time.toLocaleTimeString()}
             </Text>
           )}
         </View>
 
-        {/* Date Range Restricted */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Date Range Restricted</Text>
-          <DatePicker
-            value={rangeDate}
-            onChange={setRangeDate}
+        {/* DateTimePicker */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">DateTimePicker</Text>
+          <DateTimePicker
+            value={dateTime ?? undefined}
+            onChange={setDateTime}
+            label="Select Date & Time"
+          />
+          {dateTime && (
+            <Text typography="caption" color="secondary">
+              Selected: {dateTime.toLocaleString()}
+            </Text>
+          )}
+        </View>
+
+        {/* Date Range Restriction */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">With Min/Max Date</Text>
+          <DateInput
+            value={undefined}
+            onChange={() => {}}
             label="Future Dates Only"
-            placeholder="Select future date"
+            placeholder="MM/DD/YYYY"
             minDate={tomorrow}
             maxDate={nextMonth}
-            helperText="Only dates between tomorrow and next month"
           />
-          {rangeDate && (
-            <Text size="sm" color="secondary">
-              Selected: {rangeDate.toDateString()}
-            </Text>
-          )}
+          <Text typography="caption" color="secondary">
+            Only dates between tomorrow and next month
+          </Text>
         </View>
 
-        {/* Disabled DatePicker */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Disabled DatePicker</Text>
+        {/* Inline DatePicker */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">Inline DatePicker</Text>
           <DatePicker
-            value={disabledDate}
-            onChange={setDisabledDate}
-            label="Disabled"
-            placeholder="Cannot select"
-            disabled
-            helperText="This picker is disabled"
+            value={inlineDate}
+            onChange={setInlineDate}
           />
+          <Text typography="caption" color="secondary">
+            Selected: {inlineDate.toDateString()}
+          </Text>
         </View>
 
+        {/* Inline TimePicker */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">Inline TimePicker</Text>
+          <TimePicker
+            value={inlineTime}
+            onChange={setInlineTime}
+            mode="12h"
+          />
+          <Text typography="caption" color="secondary">
+            Selected: {inlineTime.toLocaleTimeString()}
+          </Text>
+        </View>
+
+        {/* 24-hour Time */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">24-hour Format</Text>
+          <TimeInput
+            value={undefined}
+            onChange={() => {}}
+            label="24-hour Time"
+            placeholder="14:30"
+            mode="24h"
+            minuteStep={5}
+          />
+        </View>
 
         {/* Actions */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Actions</Text>
-          <View>
+        <View gap="md">
+          <Text typography="h4" weight="semibold">Actions</Text>
+          <View gap="sm">
             <Button
-              type='outlined'
-              onPress={() => setBasicDate(new Date())}
+              type="outlined"
+              onPress={() => {
+                const now = new Date();
+                setDate(now);
+                setTime(now);
+                setDateTime(now);
+              }}
             >
-              Set Today
+              Set All to Now
             </Button>
             <Button
               type="outlined"
               onPress={() => {
-                setBasicDate(null);
-                setRangeDate(null);
+                setDate(null);
+                setTime(null);
+                setDateTime(null);
               }}
             >
               Clear All
             </Button>
           </View>
         </View>
-
-
-
-        {/* Date Time Range Picker Examples */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">DateTimeRangePicker Examples</Text>
-          
-          {/* Basic DateTime Range */}
-          <View spacing="sm">
-            <Text size="sm" 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="sm" color="secondary">
-                Range: {dateTimeRange.startDate.toLocaleString()} to {dateTimeRange.endDate.toLocaleString()}
-              </Text>
-            )}
-          </View>
-        </View>
-
-        {/* Features Description */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Features</Text>
-          <View spacing="sm">
-            <Text size="sm" color="secondary">
-              • Cross-platform calendar picker
-            </Text>
-            <Text size="sm" color="secondary">
-              • Date and time selection
-            </Text>
-            <Text size="sm" color="secondary">
-              • Date/time range selection
-            </Text>
-            <Text size="sm" color="secondary">
-              • 12/24 hour time formats
-            </Text>
-            <Text size="sm" color="secondary">
-              • Min/max date restrictions
-            </Text>
-            <Text size="sm" color="secondary">
-              • Accessible and keyboard navigable
-            </Text>
-            <Text size="sm" color="secondary">
-              • Theme-aware styling
-            </Text>
-            <Text size="sm" color="secondary">
-              • Customizable date/time formats
-            </Text>
-          </View>
-        </View>
       </View>
     </Screen>
   );
-};
+};

package/src/examples/index.ts

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

package/src/index.native.ts

@@ -1,20 +1,15 @@
-// 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';
-
-// Date Input Component
-export { DateInput } from './DateInput/index.native';
-export type { DateInputProps } from './DateInput';
-
+// Components - native platform
+export { DatePicker } from './DatePicker';
+export { TimePicker } from './TimePicker';
+export { DateInput } from './DateInput.native';
+export { TimeInput } from './TimeInput.native';
+export { DateTimePicker } from './DateTimePicker';
+
+// Types
+export type {
+  DatePickerProps,
+  TimePickerProps,
+  DateInputProps,
+  TimeInputProps,
+  DateTimePickerProps,
+} from './types';

package/src/index.ts

@@ -1,20 +1,15 @@
-// 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';
-
-// Date Input Component
+// Components
+export { DatePicker } from './DatePicker';
+export { TimePicker } from './TimePicker';
 export { DateInput } from './DateInput';
-export type { DateInputProps } from './DateInput';
-
+export { TimeInput } from './TimeInput';
+export { DateTimePicker } from './DateTimePicker';
+
+// Types
+export type {
+  DatePickerProps,
+  TimePickerProps,
+  DateInputProps,
+  TimeInputProps,
+  DateTimePickerProps,
+} from './types';

package/src/styles.ts

@@ -0,0 +1,127 @@
+import { StyleSheet } from 'react-native-unistyles';
+import type { Theme } from '@idealyst/theme';
+
+export type DatePickerVariants = {
+  disabled: boolean;
+};
+
+export const datePickerStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    // Calendar container - compact
+    calendar: {
+      padding: 8,
+      backgroundColor: theme.colors.surface.primary,
+      borderRadius: 6,
+      width: 220,
+      variants: {
+        disabled: {
+          true: { opacity: 0.6 },
+          false: { opacity: 1 },
+        },
+      },
+    },
+
+    // Calendar header with month/year and navigation
+    calendarHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 4,
+      paddingHorizontal: 2,
+    },
+
+    calendarTitle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 2,
+    },
+
+    // Weekday header row
+    weekdayRow: {
+      flexDirection: 'row',
+      marginBottom: 2,
+    },
+
+    weekdayCell: {
+      width: 28,
+      height: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+
+    // Calendar grid
+    calendarGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+
+    // Month selector grid (3x4)
+    monthGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      paddingVertical: 8,
+    },
+
+    // Year selector grid
+    yearGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      paddingVertical: 8,
+    },
+
+    // Individual day cell - compact
+    dayCell: {
+      width: 28,
+      height: 28,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+
+    // Time picker container
+    timePicker: {
+      padding: 12,
+      backgroundColor: theme.colors.surface.primary,
+      borderRadius: 6,
+      variants: {
+        disabled: {
+          true: { opacity: 0.6 },
+          false: { opacity: 1 },
+        },
+      },
+    },
+
+    // Time columns container
+    timeColumns: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+
+    // Individual time column (hours, minutes, period)
+    timeColumn: {
+      alignItems: 'center',
+      gap: 2,
+    },
+
+    // Time separator (colon)
+    timeSeparator: {
+      paddingHorizontal: 2,
+    },
+
+    // Input row for datetime picker
+    inputRow: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+
+    // Popover content wrapper
+    popoverContent: {
+      backgroundColor: theme.colors.surface.primary,
+      borderRadius: 6,
+      ...theme.shadows.lg,
+      overflow: 'hidden',
+    },
+  } as const;
+});

package/src/types.ts

@@ -0,0 +1,56 @@
+import type { ViewStyle } from 'react-native';
+
+export interface DatePickerProps {
+  value?: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export interface TimePickerProps {
+  value?: Date;
+  onChange: (date: Date) => void;
+  mode?: '12h' | '24h';
+  minuteStep?: number;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export interface DateInputProps {
+  value?: Date;
+  onChange: (date: Date | null) => void;
+  label?: string;
+  placeholder?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+  error?: string;
+  style?: ViewStyle;
+}
+
+export interface TimeInputProps {
+  value?: Date;
+  onChange: (date: Date | null) => void;
+  label?: string;
+  placeholder?: string;
+  mode?: '12h' | '24h';
+  minuteStep?: number;
+  disabled?: boolean;
+  error?: string;
+  style?: ViewStyle;
+}
+
+export interface DateTimePickerProps {
+  value?: Date;
+  onChange: (date: Date | null) => void;
+  label?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  timeMode?: '12h' | '24h';
+  minuteStep?: number;
+  disabled?: boolean;
+  error?: string;
+  style?: ViewStyle;
+}

package/src/DateInput/DateInput.native.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { View, Input, Text } from '@idealyst/components';
-import { DateInputBase } from './DateInputBase';
-import { DateInputProps } from './types';
-import { dateInputStyles } from './DateInput.styles';
-
-export const DateInput: React.FC<DateInputProps> = (props) => {
-  const {
-    label,
-    error,
-    helperText,
-    size = 'md',
-    variant = 'outlined',
-    disabled = false,
-    style,
-    inputStyle,
-    testID,
-    ...baseProps
-  } = props;
-
-
-  return (
-    <View style={style} testID={testID}>
-      {label && (
-        <Text style={dateInputStyles.label} testID={testID ? `${testID}-label` : undefined}>
-          {label}
-        </Text>
-      )}
-      
-      <DateInputBase {...baseProps} disabled={disabled} testID={testID}>
-        {({ value, onChangeText, onFocus, onBlur, placeholder, disabled: inputDisabled, testID: inputTestID }) => (
-          <Input
-            value={value}
-            onChangeText={onChangeText}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            placeholder={placeholder}
-            disabled={inputDisabled}
-            size={size}
-            variant={variant}
-            hasError={error ? true : false}
-            style={inputStyle}
-            testID={inputTestID}
-          />
-        )}
-      </DateInputBase>
-      
-      {error && (
-        <Text style={dateInputStyles.errorText} testID={testID ? `${testID}-error` : undefined}>
-          {error}
-        </Text>
-      )}
-      
-      {!error && helperText && (
-        <Text style={dateInputStyles.helperText} testID={testID ? `${testID}-helper` : undefined}>
-          {helperText}
-        </Text>
-      )}
-    </View>
-  );
-};

package/src/DateInput/DateInput.styles.tsx

@@ -1,26 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-export const dateInputStyles = StyleSheet.create((theme) => ({
-  container: {
-    width: '100%',
-  },
-  
-  label: {
-    fontSize: theme.typography?.fontSize?.sm || 14,
-    color: theme.colors?.text?.primary || '#1f2937',
-    marginBottom: theme.spacing?.xs || 4,
-    fontWeight: '500',
-  },
-  
-  helperText: {
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    color: theme.colors?.text?.secondary || '#6b7280',
-    marginTop: theme.spacing?.xs || 4,
-  },
-  
-  errorText: {
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    color: theme.colors?.text?.error || '#dc2626',
-    marginTop: theme.spacing?.xs || 4,
-  },
-}));