@idealyst/datepicker 1.0.83 → 1.0.85

package/src/DateTimePicker/DateTimePickerBase.tsx

@@ -95,17 +95,7 @@ export const DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({
     return (
       <View style={[dateTimePickerStyles.container, style]} testID={testID} data-testid={testID}>
         {/* Side by side layout */}
-        <View style={{ 
-          flexDirection: 'row', 
-          gap: 16, 
-          alignItems: 'flex-start',
-          _web: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 16,
-            alignItems: 'flex-start',
-          }
-        }}>
+        <View style={dateTimePickerStyles.sideBySideLayout}>
           {renderCalendar({
             value,
             onChange: handleDateChange,
@@ -113,7 +103,7 @@ export const DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({
             maxDate,
             disabled,
           })}
-          
+
           {renderTimePicker({
             value: value || new Date(),
             onChange: handleTimeChange,
@@ -133,31 +123,22 @@ export const DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({
   return (
     <View style={[dateTimePickerStyles.container, style]} testID={testID} data-testid={testID}>
       {/* Step Navigation */}
-      <View style={{
-        flexDirection: 'row',
-        gap: 8,
-        marginBottom: 8,
-        _web: {
-          display: 'flex',
-          flexDirection: 'row',
-          gap: 8,
-        }
-      }}>
+      <View style={dateTimePickerStyles.stepNavigation}>
         <Button
           variant={isDateStep ? 'primary' : 'outlined'}
-          size="small"
+          size="sm"
           onPress={() => setViewMode('date')}
           disabled={disabled}
-          style={{ flex: 1 }}
+          style={dateTimePickerStyles.stepButton}
         >
           1. Date
         </Button>
         <Button
           variant={isTimeStep ? 'primary' : 'outlined'}
-          size="small"
+          size="sm"
           onPress={() => setViewMode('time')}
           disabled={disabled || !value}
-          style={{ flex: 1 }}
+          style={dateTimePickerStyles.stepButton}
         >
           2. Time
         </Button>
@@ -185,12 +166,12 @@ export const DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({
             mode: timeMode,
             step: timeStep,
           })}
-          
+
           {/* Back to Date button */}
-          <View style={{ marginTop: 12, alignItems: 'flex-start' }}>
+          <View style={dateTimePickerStyles.backButtonContainer}>
             <Button
               variant="text"
-              size="small"
+              size="sm"
               onPress={() => setViewMode('date')}
               disabled={disabled}
             >

package/src/DateTimePicker/TimePicker.styles.tsx

@@ -19,8 +19,6 @@ export const timePickerStyles = StyleSheet.create((theme) => ({
     }
   },
   clockSvg: {
-    cursor: 'pointer',
-    
     _web: {
       cursor: 'pointer',
     }
@@ -48,7 +46,7 @@ export const timePickerStyles = StyleSheet.create((theme) => ({
     backgroundColor: 'transparent',
     paddingHorizontal: 0,
     paddingVertical: 0,
-    
+
     _web: {
       border: 'none',
       borderBottom: 'none',
@@ -95,8 +93,7 @@ export const timePickerStyles = StyleSheet.create((theme) => ({
     fontWeight: '500',
     borderRadius: 4,
     borderWidth: 0,
-    cursor: 'pointer',
-    
+
     _web: {
       border: 'none',
       cursor: 'pointer',

package/src/DateTimePicker/TimePickerBase.tsx

@@ -218,7 +218,7 @@ export const TimePickerBase: React.FC<TimePickerBaseProps> = ({
         {mode === '12h' && ampm && (
           <Button
             variant="outlined"
-            size="small"
+            size="sm"
             onPress={toggleAmPm}
             disabled={disabled}
             style={timePickerStyles.ampmButton}

package/src/DateTimePicker/types.ts

@@ -36,7 +36,7 @@ export interface DateTimePickerProps {
   locale?: string;
   
   /** Size variant */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg';
   
   /** Visual variant */
   variant?: 'outlined' | 'filled';

package/src/DateTimeRangePicker/DateTimeRangePicker.styles.tsx

@@ -6,7 +6,7 @@ export const dateTimeRangePickerStyles = StyleSheet.create((theme) => ({
   },
 
   label: {
-    fontSize: theme.typography?.sizes?.small || 14,
+    fontSize: theme.typography?.fontSize?.sm || 14,
     fontWeight: '600',
     color: theme.colors?.text?.primary || '#111827',
     marginBottom: theme.spacing?.xs || 4,
@@ -33,13 +33,13 @@ export const dateTimeRangePickerStyles = StyleSheet.create((theme) => ({
   },
 
   selectedRangeLabel: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     fontWeight: '500',
     color: theme.colors?.text?.secondary || '#6b7280',
   },
 
   selectedRangeValue: {
-    fontSize: theme.typography?.sizes?.medium || 16,
+    fontSize: theme.typography?.fontSize?.md || 16,
     fontWeight: '600',
     color: theme.colors?.text?.primary || '#111827',
   },
@@ -49,7 +49,7 @@ export const dateTimeRangePickerStyles = StyleSheet.create((theme) => ({
   },
 
   sectionLabel: {
-    fontSize: theme.typography?.sizes?.small || 14,
+    fontSize: theme.typography?.fontSize?.sm || 14,
     fontWeight: '600',
     color: theme.colors?.text?.primary || '#111827',
   },
@@ -79,20 +79,40 @@ export const dateTimeRangePickerStyles = StyleSheet.create((theme) => ({
   },
 
   timeGroupLabel: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     fontWeight: '500',
     color: theme.colors?.text?.secondary || '#6b7280',
   },
 
   errorText: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     color: theme.colors?.semantic?.error || '#dc2626',
     marginTop: theme.spacing?.xs || 4,
   },
 
   helperText: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    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/DateTimeRangePickerBase.tsx

@@ -130,17 +130,7 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
     return (
       <View style={[dateTimeRangePickerStyles.container, style]} testID={testID} data-testid={testID}>
         {/* Side by side layout */}
-        <View style={{ 
-          flexDirection: 'row', 
-          gap: 24, 
-          alignItems: 'flex-start',
-          _web: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 24,
-            alignItems: 'flex-start',
-          }
-        }}>
+        <View style={dateTimeRangePickerStyles.sideBySideLayout}>
           {renderRangeCalendar({
             value: value || {},
             onChange: handleDateRangeChange,
@@ -153,10 +143,10 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
             showTimes: true,
             timeMode,
           })}
-          
+
           {/* Time Selection Panel */}
           {(value?.startDate || value?.endDate) && (
-            <View style={{ minWidth: 220, flexShrink: 0 }}>
+            <View style={dateTimeRangePickerStyles.timeSelectionPanel}>
               {/* Time Selection Tabs */}
               <View style={timePickerStyles.tabBar}>
                 <Button
@@ -276,12 +266,12 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
             mode: timeMode,
             step: timeStep,
           })}
-          
+
           {/* Navigation */}
-          <View style={{ marginTop: 12, flexDirection: 'row', justifyContent: 'space-between' }}>
+          <View style={dateTimeRangePickerStyles.navigationContainer}>
             <Button
               variant="text"
-              size="small"
+              size="sm"
               onPress={() => setViewMode('date')}
               disabled={disabled}
             >
@@ -290,7 +280,7 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
             {value.endDate && (
               <Button
                 variant="text"
-                size="small"
+                size="sm"
                 onPress={() => setViewMode('end-time')}
                 disabled={disabled}
               >
@@ -310,12 +300,12 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
             mode: timeMode,
             step: timeStep,
           })}
-          
+
           {/* Navigation */}
-          <View style={{ marginTop: 12, flexDirection: 'row', justifyContent: 'space-between' }}>
+          <View style={dateTimeRangePickerStyles.navigationContainer}>
             <Button
               variant="text"
-              size="small"
+              size="sm"
               onPress={() => setViewMode('start-time')}
               disabled={disabled}
             >
@@ -323,7 +313,7 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
             </Button>
             <Button
               variant="text"
-              size="small"
+              size="sm"
               onPress={() => setViewMode('date')}
               disabled={disabled}
             >

package/src/DateTimeRangePicker/types.ts

@@ -44,7 +44,7 @@ export interface DateTimeRangePickerProps {
   locale?: string;
   
   /** Size variant */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg';
   
   /** Visual variant */
   variant?: 'outlined' | 'filled';

package/src/examples/DatePickerExamples.tsx

@@ -21,17 +21,17 @@ export const DatePickerExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-        <Text size="large" weight="bold" align="center">
+        <Text size="lg" weight="bold" align="center">
           DatePicker & DateTimePicker Examples
         </Text>
         
         {/* DateTime Picker Examples */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">DateTimePicker Examples</Text>
+          <Text size="md" weight="semibold">DateTimePicker Examples</Text>
           
           {/* Basic DateTime */}
           <View spacing="sm">
-            <Text size="small" weight="medium">Basic DateTimePicker (12-hour)</Text>
+            <Text size="sm" weight="medium">Basic DateTimePicker (12-hour)</Text>
             <DateTimePicker
               value={dateTime}
               onChange={setDateTime}
@@ -40,7 +40,7 @@ export const DatePickerExamples = () => {
               helperText="Responsive layout - side-by-side on large screens, step-by-step on mobile"
             />
             {dateTime && (
-              <Text size="small" color="secondary">
+              <Text size="sm" color="secondary">
                 Selected: {dateTime.toLocaleString()}
               </Text>
             )}
@@ -48,7 +48,7 @@ export const DatePickerExamples = () => {
 
           {/* 24-hour format */}
           <View spacing="sm">
-            <Text size="small" weight="medium">24-hour format with seconds</Text>
+            <Text size="sm" weight="medium">24-hour format with seconds</Text>
             <DateTimePicker
               value={dateTime24h}
               onChange={setDateTime24h}
@@ -59,7 +59,7 @@ export const DatePickerExamples = () => {
               helperText="24-hour format with seconds, 5-minute steps"
             />
             {dateTime24h && (
-              <Text size="small" color="secondary">
+              <Text size="sm" color="secondary">
                 Selected: {dateTime24h.toLocaleString()}
               </Text>
             )}
@@ -68,7 +68,7 @@ export const DatePickerExamples = () => {
 
         {/* Basic DatePicker */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Basic DatePicker</Text>
+          <Text size="md" weight="semibold">Basic DatePicker</Text>
           <DatePicker
             value={basicDate}
             onChange={setBasicDate}
@@ -77,7 +77,7 @@ export const DatePickerExamples = () => {
             helperText="Pick any date"
           />
           {basicDate && (
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Selected: {basicDate.toDateString()}
             </Text>
           )}
@@ -85,7 +85,7 @@ export const DatePickerExamples = () => {
 
         {/* Date Range Restricted */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Date Range Restricted</Text>
+          <Text size="md" weight="semibold">Date Range Restricted</Text>
           <DatePicker
             value={rangeDate}
             onChange={setRangeDate}
@@ -96,7 +96,7 @@ export const DatePickerExamples = () => {
             helperText="Only dates between tomorrow and next month"
           />
           {rangeDate && (
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Selected: {rangeDate.toDateString()}
             </Text>
           )}
@@ -104,7 +104,7 @@ export const DatePickerExamples = () => {
 
         {/* Disabled DatePicker */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Disabled DatePicker</Text>
+          <Text size="md" weight="semibold">Disabled DatePicker</Text>
           <DatePicker
             value={disabledDate}
             onChange={setDisabledDate}
@@ -118,16 +118,16 @@ export const DatePickerExamples = () => {
 
         {/* Actions */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Actions</Text>
-          <View style={{ flexDirection: 'row', gap: 8 }}>
-            <Button 
-              variant="outlined" 
+          <Text size="md" weight="semibold">Actions</Text>
+          <View>
+            <Button
+              type='outlined'
               onPress={() => setBasicDate(new Date())}
             >
               Set Today
             </Button>
-            <Button 
-              variant="outlined" 
+            <Button
+              type="outlined"
               onPress={() => {
                 setBasicDate(null);
                 setRangeDate(null);
@@ -142,11 +142,11 @@ export const DatePickerExamples = () => {
 
         {/* Date Time Range Picker Examples */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">DateTimeRangePicker Examples</Text>
+          <Text size="md" weight="semibold">DateTimeRangePicker Examples</Text>
           
           {/* Basic DateTime Range */}
           <View spacing="sm">
-            <Text size="small" weight="medium">Date and time range selection</Text>
+            <Text size="sm" weight="medium">Date and time range selection</Text>
             <DateTimeRangePicker
               value={dateTimeRange}
               onChange={setDateTimeRange}
@@ -155,7 +155,7 @@ export const DatePickerExamples = () => {
               helperText="Select date range first, then adjust times"
             />
             {dateTimeRange?.startDate && dateTimeRange?.endDate && (
-              <Text size="small" color="secondary">
+              <Text size="sm" color="secondary">
                 Range: {dateTimeRange.startDate.toLocaleString()} to {dateTimeRange.endDate.toLocaleString()}
               </Text>
             )}
@@ -164,30 +164,30 @@ export const DatePickerExamples = () => {
 
         {/* Features Description */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Features</Text>
+          <Text size="md" weight="semibold">Features</Text>
           <View spacing="sm">
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Cross-platform calendar picker
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Date and time selection
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Date/time range selection
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • 12/24 hour time formats
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Min/max date restrictions
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Accessible and keyboard navigable
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Theme-aware styling
             </Text>
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               • Customizable date/time formats
             </Text>
           </View>

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

@@ -1,42 +1,28 @@
+import { Theme } from '@/theme';
 import { StyleSheet } from 'react-native-unistyles';
 
-export const calendarGridStyles = StyleSheet.create((theme) => ({
+type CalendarGridVariants = {
+  isCurrentMonth: boolean;
+  isSelected: boolean;
+};
+
+export const calendarGridStyles = StyleSheet.create((theme: 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',
+    color: theme.colors.text.secondary,
   },
   calendarGrid: {
-    gap: 2,
     marginBottom: 8,
     height: 192,
-    
-    _web: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(7, 1fr)',
-    }
   },
   dayCell: {
     alignItems: 'center',
@@ -49,7 +35,7 @@ export const calendarGridStyles = StyleSheet.create((theme) => ({
       justifyContent: 'center',
     }
   },
-  dayButton: {
+  dayButton: ({ isCurrentMonth, isSelected }: CalendarGridVariants) => ({
     width: '100%',
     height: '100%',
     maxWidth: 36,
@@ -58,5 +44,8 @@ export const calendarGridStyles = StyleSheet.create((theme) => ({
     padding: 0,
     borderRadius: 4,
     fontSize: 13,
-  },
+    opacity: isCurrentMonth ? 1 : 0.4,
+    backgroundColor: isSelected ? undefined : 'transparent',
+    color: isSelected ? undefined : theme.colors.text.primary,
+  }),
 }));

package/src/primitives/CalendarGrid/CalendarGrid.tsx

@@ -96,7 +96,10 @@ export const CalendarGrid: React.FC<CalendarGridProps> = ({
   return (
     <>
       {/* Weekday headers */}
-      <View style={calendarGridStyles.weekdayHeader}>
+      <View style={[
+        calendarGridStyles.weekdayHeader,
+        { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }
+      ]}>
         {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (
           <View key={day} style={calendarGridStyles.weekdayCell}>
             <Text style={calendarGridStyles.weekdayText}>
@@ -107,25 +110,30 @@ export const CalendarGrid: React.FC<CalendarGridProps> = ({
       </View>
 
       {/* Calendar grid */}
-      <View 
-        style={[calendarGridStyles.calendarGrid, { gridTemplateRows: `repeat(${weekCount}, 1fr)` }]}
+      <View
+        style={[
+          calendarGridStyles.calendarGrid,
+          {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(7, 1fr)',
+            gridTemplateRows: `repeat(${weekCount}, 1fr)`,
+            gap: 2
+          }
+        ]}
       >
         {calendarDays.map((dayData, index) => {
           const { date, isCurrentMonth } = dayData;
-          const buttonStyle = [
-            calendarGridStyles.dayButton,
-            { opacity: isCurrentMonth ? 1 : 0.4 }
-          ];
+          const isSelected = isDateSelected(date);
 
           return (
             <View key={index} style={calendarGridStyles.dayCell}>
               <Button
-                variant={isDateSelected(date) ? 'contained' : 'text'}
-                intent={isDateSelected(date) ? 'primary' : 'neutral'}
+                type={isSelected ? 'contained' : 'text'}
+                intent={isSelected ? 'primary' : undefined}
                 disabled={isDateDisabled(date)}
                 onPress={() => handleDateSelect(date)}
-                size="small"
-                style={buttonStyle}
+                size="sm"
+                style={calendarGridStyles.dayButton({ isCurrentMonth, isSelected })}
               >
                 {date.getDate()}
               </Button>

package/src/primitives/CalendarHeader/CalendarHeader.tsx

@@ -25,28 +25,28 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
 
   return (
     <View style={calendarHeaderStyles.container}>
-      <Button 
-        variant="text" 
-        size="small" 
-        onPress={onPreviousMonth} 
+      <Button
+        type="text"
+        size="sm"
+        onPress={onPreviousMonth}
         disabled={disabled}
         style={calendarHeaderStyles.navButton}
       >
         ←
       </Button>
-      
+
       <View style={calendarHeaderStyles.centerSection}>
-        <Button 
-          variant="text" 
+        <Button
+          type="text"
           onPress={onMonthClick}
           disabled={disabled}
           style={calendarHeaderStyles.titleButton}
         >
           <Text weight="semibold">{monthName}</Text>
         </Button>
-        
-        <Button 
-          variant="text" 
+
+        <Button
+          type="text"
           onPress={onYearClick}
           disabled={disabled}
           style={calendarHeaderStyles.titleButton}
@@ -54,11 +54,11 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
           <Text weight="semibold">{year}</Text>
         </Button>
       </View>
-      
-      <Button 
-        variant="text" 
-        size="small" 
-        onPress={onNextMonth} 
+
+      <Button
+        type="text"
+        size="sm"
+        onPress={onNextMonth}
         disabled={disabled}
         style={calendarHeaderStyles.navButton}
       >