@idealyst/datepicker 1.0.83 → 1.0.84

package/README.md

@@ -72,7 +72,7 @@ function MyComponent() {
 | `error` | `string` | - | Error message |
 | `helperText` | `string` | - | Helper text |
 | `format` | `string` | `'MM/dd/yyyy'` | Date display format |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size variant |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
 | `variant` | `'outlined' \| 'filled'` | `'outlined'` | Visual variant |
 
 ## Examples

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "description": "Cross-platform date and time picker components for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/datepicker#readme",
   "readme": "README.md",
@@ -36,8 +36,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.83",
-    "@idealyst/theme": "^1.0.83",
+    "@idealyst/components": "^1.0.84",
+    "@idealyst/theme": "^1.0.84",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=13.0.0",
@@ -61,7 +61,12 @@
     }
   },
   "devDependencies": {
+    "@idealyst/components": "^1.0.84",
+    "@idealyst/theme": "^1.0.84",
     "@types/react": "^19.1.0",
+    "react": "^19.1.0",
+    "react-native": "^0.80.1",
+    "react-native-unistyles": "^3.0.10",
     "typescript": "^5.0.0"
   },
   "files": [

package/src/DateInput/DateInput.native.tsx

@@ -9,7 +9,7 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     label,
     error,
     helperText,
-    size = 'medium',
+    size = 'md',
     variant = 'outlined',
     disabled = false,
     style,

package/src/DateInput/DateInput.styles.tsx

@@ -6,20 +6,20 @@ export const dateInputStyles = StyleSheet.create((theme) => ({
   },
   
   label: {
-    fontSize: theme.typography?.sizes?.small || 14,
+    fontSize: theme.typography?.fontSize?.sm || 14,
     color: theme.colors?.text?.primary || '#1f2937',
     marginBottom: theme.spacing?.xs || 4,
     fontWeight: '500',
   },
   
   helperText: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     color: theme.colors?.text?.secondary || '#6b7280',
     marginTop: theme.spacing?.xs || 4,
   },
   
   errorText: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     color: theme.colors?.text?.error || '#dc2626',
     marginTop: theme.spacing?.xs || 4,
   },

package/src/DateInput/DateInput.web.tsx

@@ -9,7 +9,7 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     label,
     error,
     helperText,
-    size = 'medium',
+    size = 'md',
     variant = 'outlined',
     disabled = false,
     style,

package/src/DateInput/types.ts

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

package/src/DatePicker/Calendar.native.tsx

@@ -180,7 +180,7 @@ export const Calendar: React.FC<CalendarProps> = memo(({
       <View style={calendarStyles.header}>
         <Button 
           variant="text" 
-          size="small" 
+          size="sm" 
           onPress={goToPreviousMonth} 
           disabled={disabled}
           style={calendarStyles.headerButton}
@@ -190,7 +190,7 @@ export const Calendar: React.FC<CalendarProps> = memo(({
         <Text weight="semibold">{monthName}</Text>
         <Button 
           variant="text" 
-          size="small" 
+          size="sm" 
           onPress={goToNextMonth} 
           disabled={disabled}
           style={calendarStyles.headerButton}

package/src/DatePicker/Calendar.styles.tsx

@@ -1,9 +1,12 @@
+import { AppTheme } from '@idealyst/theme';
 import { StyleSheet } from 'react-native-unistyles';
 
-export const calendarStyles = StyleSheet.create((theme) => ({
+export const calendarStyles = StyleSheet.create((theme: AppTheme) => ({
   container: {
     width: 256,
-    position: 'relative',
+    _web: {
+      position: 'relative',
+    }
   },
 
   header: {
@@ -11,33 +14,33 @@ export const calendarStyles = StyleSheet.create((theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: theme.spacing?.md || 16,
+    marginBottom: 16,
   },
 
   headerButton: {
     minWidth: 32,
     minHeight: 32,
-    paddingHorizontal: theme.spacing?.xs || 8,
-    paddingVertical: theme.spacing?.xs || 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
   },
 
   headerTitle: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    gap: theme.spacing?.xs || 8,
+    gap: 8,
   },
 
   monthYearButton: {
-    paddingHorizontal: theme.spacing?.sm || 8,
-    paddingVertical: theme.spacing?.xs || 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
   },
 
   pickerContainer: {
-    marginBottom: theme.spacing?.md || 16,
-    padding: theme.spacing?.sm || 12,
+    marginBottom: 16,
+    padding: 12,
     backgroundColor: theme.colors?.surface?.secondary || '#f9fafb',
-    borderRadius: theme.borderRadius?.md || 8,
+    borderRadius: 8,
     borderWidth: 1,
     borderColor: theme.colors?.border?.primary || '#e5e7eb',
     
@@ -78,9 +81,9 @@ export const calendarStyles = StyleSheet.create((theme) => ({
   },
 
   pickerButton: {
-    fontSize: theme.typography?.sizes?.small || 12,
-    paddingHorizontal: theme.spacing?.xs || 6,
-    paddingVertical: theme.spacing?.xs || 4,
+    fontSize: 12,
+    paddingHorizontal: 6,
+    paddingVertical: 4,
     minHeight: 32,
     justifyContent: 'center',
     alignItems: 'center',
@@ -119,7 +122,7 @@ export const calendarStyles = StyleSheet.create((theme) => ({
 
   weekdayHeader: {
     flexDirection: 'row',
-    marginBottom: theme.spacing?.xs || 8,
+    marginBottom: 8,
     
     // Web specific styles
     _web: {
@@ -134,7 +137,7 @@ export const calendarStyles = StyleSheet.create((theme) => ({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: theme.spacing?.xs || 4,
+    paddingVertical: 4,
     
     // Web specific styles
     _web: {
@@ -144,7 +147,7 @@ export const calendarStyles = StyleSheet.create((theme) => ({
   },
 
   weekdayText: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: 12,
     fontWeight: '500',
     color: theme.colors?.text?.secondary || '#6b7280',
   },
@@ -152,7 +155,7 @@ export const calendarStyles = StyleSheet.create((theme) => ({
   calendarGrid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    marginBottom: theme.spacing?.xs || 8,
+    marginBottom: 8,
     
     // Web specific styles
     _web: {
@@ -184,8 +187,8 @@ export const calendarStyles = StyleSheet.create((theme) => ({
     minWidth: 28,
     minHeight: 28,
     padding: 0,
-    borderRadius: theme.borderRadius?.sm || 6,
-    fontSize: theme.typography?.sizes?.small || 13,
+    borderRadius: 6,
+    fontSize: 13,
     alignItems: 'center',
     justifyContent: 'center',
     
@@ -211,7 +214,7 @@ export const calendarStyles = StyleSheet.create((theme) => ({
   },
 
   todaySection: {
-    paddingTop: theme.spacing?.sm || 12,
+    paddingTop: 12,
     borderTopWidth: 1,
     borderTopColor: theme.colors?.border?.secondary || '#f3f4f6',
     

package/src/DatePicker/Calendar.web.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { View } from '@idealyst/components';
+import { View, useMergeRefs } from '@idealyst/components';
 import { CalendarProps } from './types';
 import { CalendarHeader } from '../primitives/CalendarHeader';
 import { CalendarGrid } from '../primitives/CalendarGrid';
 import { CalendarOverlay } from '../primitives/CalendarOverlay';
 import { calendarStyles } from './Calendar.styles';
+import { getWebProps } from 'react-native-unistyles/web';
 
 
 export const Calendar: React.FC<CalendarProps> = ({
@@ -22,7 +23,7 @@ export const Calendar: React.FC<CalendarProps> = ({
     controlledCurrentMonth || value || new Date()
   );
   const [overlayMode, setOverlayMode] = useState<'month' | 'year' | null>(null);
-  const containerRef = useRef<View>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const currentMonth = controlledCurrentMonth || internalCurrentMonth;
 
@@ -116,8 +117,12 @@ export const Calendar: React.FC<CalendarProps> = ({
     }
   };
 
+  const { ref: styleRef, ...containerProps } = getWebProps(calendarStyles.container);
+
+  const mergedRef = useMergeRefs(containerRef, styleRef);
+
   return (
-    <View ref={containerRef} style={[calendarStyles.container, style]} data-testid={testID}>
+    <div ref={mergedRef as any} {...containerProps} data-testid={testID}>
       <CalendarHeader
         currentMonth={currentMonth}
         onPreviousMonth={goToPreviousMonth}
@@ -149,6 +154,6 @@ export const Calendar: React.FC<CalendarProps> = ({
           disabled={disabled}
         />
       )}
-    </View>
+    </div>
   );
 };

package/src/DatePicker/DatePicker.styles.tsx

@@ -7,7 +7,7 @@ export const datePickerStyles = StyleSheet.create((theme) => ({
   
   label: {
     marginBottom: theme.spacing?.sm || 8,
-    fontSize: theme.typography?.sizes?.small || 14,
+    fontSize: theme.typography?.fontSize?.sm || 14,
     fontWeight: '500',
     color: theme.colors?.text?.primary || '#1f2937',
   },
@@ -51,26 +51,26 @@ export const datePickerStyles = StyleSheet.create((theme) => ({
   },
 
   selectedDateLabel: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     color: theme.colors?.text?.secondary || '#6b7280',
     marginBottom: 4,
   },
 
   selectedDateValue: {
-    fontSize: theme.typography?.sizes?.medium || 16,
+    fontSize: theme.typography?.fontSize?.md || 16,
     fontWeight: '600',
     color: theme.colors?.text?.primary || '#1f2937',
   },
 
   errorText: {
     marginTop: 4,
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     color: theme.colors?.text?.error || '#dc2626',
   },
 
   helperText: {
     marginTop: 4,
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     color: theme.colors?.text?.secondary || '#6b7280',
   },
 }));

package/src/DatePicker/types.ts

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

package/src/DateRangePicker/DateRangePicker.styles.tsx

@@ -6,7 +6,7 @@ export const dateRangePickerStyles = 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,
@@ -30,13 +30,13 @@ export const dateRangePickerStyles = 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',
   },
@@ -54,7 +54,7 @@ export const dateRangePickerStyles = StyleSheet.create((theme) => ({
     borderColor: theme.colors?.border?.primary || '#e5e7eb',
     borderRadius: theme.borderRadius?.md || 8,
     backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    fontSize: theme.typography?.sizes?.medium || 16,
+    fontSize: theme.typography?.fontSize?.md || 16,
     textAlign: 'center',
 
     _web: {
@@ -64,19 +64,19 @@ export const dateRangePickerStyles = StyleSheet.create((theme) => ({
   },
 
   rangeSeparator: {
-    fontSize: theme.typography?.sizes?.medium || 16,
+    fontSize: theme.typography?.fontSize?.md || 16,
     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,
   },

package/src/DateRangePicker/RangeCalendar.native.tsx

@@ -222,39 +222,39 @@ export const RangeCalendar: React.FC<RangeCalendarProps> = ({
     <View style={[rangeCalendarStyles.container, style]} testID={testID}>
       {/* Header */}
       <View style={rangeCalendarStyles.header}>
-        <Button 
-          variant="text" 
-          size="small" 
-          onPress={goToPreviousMonth} 
+        <Button
+          type="text"
+          size="sm"
+          onPress={goToPreviousMonth}
           disabled={disabled}
           style={rangeCalendarStyles.headerButton}
         >
           ←
         </Button>
-        <View style={{ flexDirection: 'row', gap: 8 }}>
+        <View style={rangeCalendarStyles.headerTitle}>
           <Button
-            variant="text"
-            size="small"
+            type="text"
+            size="sm"
             onPress={() => setOverlayMode('month')}
             disabled={disabled}
-            style={{ padding: 4 }}
+            style={rangeCalendarStyles.compactButton}
           >
             <Text weight="semibold">{currentMonth.toLocaleDateString('en-US', { month: 'long' })}</Text>
           </Button>
           <Button
-            variant="text"
-            size="small"
+            type="text"
+            size="sm"
             onPress={() => setOverlayMode('year')}
             disabled={disabled}
-            style={{ padding: 4 }}
+            style={rangeCalendarStyles.compactButton}
           >
             <Text weight="semibold">{currentMonth.getFullYear()}</Text>
           </Button>
         </View>
-        <Button 
-          variant="text" 
-          size="small" 
-          onPress={goToNextMonth} 
+        <Button
+          type="text"
+          size="sm"
+          onPress={goToNextMonth}
           disabled={disabled}
           style={rangeCalendarStyles.headerButton}
         >

package/src/DateRangePicker/RangeCalendar.styles.tsx

@@ -68,7 +68,7 @@ export const rangeCalendarStyles = StyleSheet.create((theme) => ({
   },
 
   weekdayText: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     fontWeight: '500',
     color: theme.colors?.text?.secondary || '#6b7280',
   },
@@ -120,7 +120,7 @@ export const rangeCalendarStyles = StyleSheet.create((theme) => ({
     padding: 0,
     margin: 0,
     borderRadius: theme.borderRadius?.sm || 6,
-    fontSize: theme.typography?.sizes?.small || 13,
+    fontSize: theme.typography?.fontSize?.sm || 13,
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
@@ -193,4 +193,8 @@ export const rangeCalendarStyles = StyleSheet.create((theme) => ({
   clearButton: {
     width: '100%',
   },
+
+  compactButton: {
+    padding: 4,
+  },
 }));

package/src/DateRangePicker/RangeCalendar.web.tsx

@@ -244,20 +244,20 @@ export const RangeCalendar: React.FC<RangeCalendarProps> = ({
     <div {...containerProps} data-testid={testID} ref={containerRef}>
       {/* Header */}
       <div {...headerProps}>
-        <Button 
-          variant="text" 
-          size="small" 
-          onPress={goToPreviousMonth} 
+        <Button
+          type="text"
+          size="sm"
+          onPress={goToPreviousMonth}
           disabled={disabled}
           style={getWebProps([rangeCalendarStyles.headerButton]).style}
         >
           ←
         </Button>
-        
+
         <div {...headerTitleProps} style={{ display: 'flex', gap: '8px' }}>
           <Button
-            variant="text"
-            size="small"
+            type="text"
+            size="sm"
             onPress={() => setOverlayMode('month')}
             disabled={disabled}
             style={{ padding: '4px 8px' }}
@@ -265,8 +265,8 @@ export const RangeCalendar: React.FC<RangeCalendarProps> = ({
             <Text weight="semibold">{currentMonth.toLocaleDateString('en-US', { month: 'long' })}</Text>
           </Button>
           <Button
-            variant="text"
-            size="small"
+            type="text"
+            size="sm"
             onPress={() => setOverlayMode('year')}
             disabled={disabled}
             style={{ padding: '4px 8px' }}
@@ -274,11 +274,11 @@ export const RangeCalendar: React.FC<RangeCalendarProps> = ({
             <Text weight="semibold">{currentMonth.getFullYear()}</Text>
           </Button>
         </div>
-        
-        <Button 
-          variant="text" 
-          size="small" 
-          onPress={goToNextMonth} 
+
+        <Button
+          type="text"
+          size="sm"
+          onPress={goToNextMonth}
           disabled={disabled}
           style={getWebProps([rangeCalendarStyles.headerButton]).style}
         >
@@ -303,10 +303,10 @@ export const RangeCalendar: React.FC<RangeCalendarProps> = ({
           <div key={index} {...getWebProps([rangeCalendarStyles.dayCell])}>
             {dayInfo && (
               <Button
-                variant="text"
+                type="text"
                 disabled={isDateDisabled(dayInfo.date)}
                 onPress={() => handleDateClick(dayInfo.date)}
-                size="small"
+                size="sm"
                 style={{
                   ...getWebProps([rangeCalendarStyles.dayButton]).style,
                   backgroundColor: isDateSelected(dayInfo.date) 

package/src/DateRangePicker/types.ts

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

package/src/DateTimePicker/DateTimePicker.styles.tsx

@@ -6,7 +6,7 @@ export const dateTimePickerStyles = 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,
@@ -30,13 +30,13 @@ export const dateTimePickerStyles = StyleSheet.create((theme) => ({
   },
 
   selectedDateTimeLabel: {
-    fontSize: theme.typography?.sizes?.small || 12,
+    fontSize: theme.typography?.fontSize?.sm || 12,
     fontWeight: '500',
     color: theme.colors?.text?.secondary || '#6b7280',
   },
 
   selectedDateTimeValue: {
-    fontSize: theme.typography?.sizes?.medium || 16,
+    fontSize: theme.typography?.fontSize?.md || 16,
     fontWeight: '600',
     color: theme.colors?.text?.primary || '#111827',
   },
@@ -46,7 +46,7 @@ export const dateTimePickerStyles = StyleSheet.create((theme) => ({
   },
 
   sectionLabel: {
-    fontSize: theme.typography?.sizes?.small || 14,
+    fontSize: theme.typography?.fontSize?.sm || 14,
     fontWeight: '600',
     color: theme.colors?.text?.primary || '#111827',
   },
@@ -64,14 +64,41 @@ export const dateTimePickerStyles = StyleSheet.create((theme) => ({
   },
 
   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?.md || 16,
+    alignItems: 'flex-start',
+    _web: {
+      display: 'flex',
+    },
+  },
+
+  stepNavigation: {
+    flexDirection: 'row',
+    gap: theme.spacing?.xs || 8,
+    marginBottom: theme.spacing?.xs || 8,
+    _web: {
+      display: 'flex',
+    },
+  },
+
+  stepButton: {
+    flex: 1,
+  },
+
+  backButtonContainer: {
+    marginTop: theme.spacing?.sm || 12,
+    alignItems: 'flex-start',
+  },
 }));