@idealyst/datepicker 11.2.120 → 11.2.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "11.2.120",
+  "version": "11.2.121",
   "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,7 +36,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^11.2.120",
+    "@idealyst/theme": "^11.2.121",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.6.0",
     "react": ">=16.8.0",
@@ -69,7 +69,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^11.2.120",
+    "@idealyst/theme": "^11.2.121",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/DateInput.native.tsx

@@ -101,15 +101,21 @@ export const DateInput: React.FC<DateInputProps> = ({
       )}
       {pressable ? (
         <TouchableOpacity
-          style={inputContainerStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
           activeOpacity={0.7}
         >
-          <Text style={[textInputStyle, !value && { color: (styles.pressableText as any)({ disabled, size }).placeholderColor }]}>
-            {value ? formatDate(value) : placeholder}
-          </Text>
-          <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
+          <View style={inputContainerStyle} pointerEvents="none">
+            <TextInput
+              value={formatDate(value ?? undefined)}
+              placeholder={placeholder}
+              editable={false}
+              style={textInputStyle}
+            />
+            <View style={iconButtonStyle}>
+              <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
+            </View>
+          </View>
         </TouchableOpacity>
       ) : (
         <View style={inputContainerStyle}>

package/src/DateInput.web.tsx

@@ -109,29 +109,31 @@ export const DateInput: React.FC<DateInputProps> = ({
   const errorProps = getWebProps([errorTextStyle]);
   const popoverProps = getWebProps([popoverContentStyle]);
 
-  // Pressable text style (reuses input style but renders as a button)
-  const pressableTextStyle = (styles.pressableText as any)({ disabled, size });
-  const pressableTextProps = getWebProps([pressableTextStyle]);
-
   return (
     <div style={flattenStyle(style)}>
       {label && (
         <span {...labelProps}>{label}</span>
       )}
       {pressable ? (
-        <button
-          type="button"
-          {...containerProps}
-          ref={triggerRef as any}
-          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
+        <div
+          ref={triggerRef}
           onClick={() => !disabled && setOpen(!open)}
-          disabled={disabled}
+          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
         >
-          <span {...pressableTextProps} style={!value ? { color: pressableTextStyle.placeholderColor } : undefined}>
-            {value ? formatDate(value) : placeholder}
-          </span>
-          <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
-        </button>
+          <div {...containerProps} style={{ pointerEvents: 'none' }}>
+            <input
+              type="text"
+              value={formatDate(value ?? undefined)}
+              placeholder={placeholder}
+              readOnly
+              tabIndex={-1}
+              {...inputProps}
+            />
+            <div {...iconButtonProps}>
+              <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
+            </div>
+          </div>
+        </div>
       ) : (
         <div {...containerProps} ref={triggerRef}>
           <input

package/src/DatePicker.native.tsx

@@ -81,11 +81,13 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       days.push({ date: new Date(year, month, day, 12, 0, 0, 0), isCurrentMonth: true });
     }
 
-    // Next month padding (always fill to 42 days = 6 rows for consistent height)
+    // Next month padding (fill to complete last week)
     // Use noon (12:00) to avoid timezone issues when date crosses day boundaries
-    const totalCells = 42;
-    for (let day = 1; days.length < totalCells; day++) {
-      days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
+    const remaining = 7 - (days.length % 7);
+    if (remaining < 7) {
+      for (let day = 1; day <= remaining; day++) {
+        days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
+      }
     }
 
     return { days, monthShort: MONTHS[month], year };

package/src/DatePicker.styles.ts

@@ -73,10 +73,12 @@ export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme
     },
   }),
 
-  // Calendar grid
+  // Calendar grid - fixed height so rows flex evenly regardless of 5 or 6 weeks
   calendarGrid: (_props: DatePickerDynamicProps) => ({
     flexDirection: 'row' as const,
     flexWrap: 'wrap' as const,
+    height: 252, // 6 rows × 42px
+    alignContent: 'space-evenly' as const,
     _web: {
       display: 'flex',
     },
@@ -263,15 +265,12 @@ export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme
     },
   }),
 
-  // Today styling - outlined circle (no fill)
+  // Today styling - subtle gray background
   todayDay: (_props: DatePickerDynamicProps) => ({
-    borderWidth: 1,
-    borderColor: theme.intents.primary.primary,
     borderRadius: 16,
-    backgroundColor: 'transparent',
+    backgroundColor: theme.colors.pallet.gray?.[200] ?? theme.colors.surface.secondary,
     _web: {
-      background: 'transparent',
-      boxSizing: 'border-box',
+      background: theme.colors.pallet.gray?.[200] ?? theme.colors.surface.secondary,
     },
   }),
 

package/src/DatePicker.web.tsx

@@ -62,11 +62,13 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       days.push({ date: new Date(year, month, day, 12, 0, 0, 0), isCurrentMonth: true });
     }
 
-    // Next month padding (always fill to 42 days = 6 rows for consistent height)
+    // Next month padding (fill to complete last week)
     // Use noon (12:00) to avoid timezone issues when date crosses day boundaries
-    const totalCells = 42;
-    for (let day = 1; days.length < totalCells; day++) {
-      days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
+    const remaining = 7 - (days.length % 7);
+    if (remaining < 7) {
+      for (let day = 1; day <= remaining; day++) {
+        days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
+      }
     }
 
     return { days, monthShort: MONTHS[month], year };

package/src/InputStyles.ts

@@ -195,35 +195,6 @@ export const dateTimeInputStyles = defineStyle('DateTimeInput', (theme: Theme) =
     color: theme.intents.primary.primary,
   }),
 
-  // Pressable text (used when pressable=true instead of a text input)
-  pressableText: (_props: InputDynamicProps) => ({
-    flex: 1,
-    minWidth: 0,
-    color: theme.colors.text.primary,
-    fontWeight: '400' as const,
-    textAlign: 'left' as const,
-    // Default font size for when size variant isn't specified
-    fontSize: theme.sizes.input.md.fontSize,
-    // Placeholder color for native when no value is set
-    placeholderColor: theme.colors.text.tertiary,
-    _web: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      pointerEvents: 'none',
-    },
-    variants: {
-      disabled: {
-        true: { color: theme.colors.text.tertiary },
-        false: { color: theme.colors.text.primary },
-      },
-      // $iterator expands for each input size
-      size: {
-        fontSize: theme.sizes.$input.fontSize,
-      },
-    },
-  }),
-
   // Icon color helper
   iconColor: (_props: InputDynamicProps) => ({
     color: theme.colors.text.secondary,

package/src/TimeInput.native.tsx

@@ -121,15 +121,21 @@ export const TimeInput: React.FC<TimeInputProps> = ({
       )}
       {pressable ? (
         <TouchableOpacity
-          style={inputContainerStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
           activeOpacity={0.7}
         >
-          <Text style={[textInputStyle, !value && { color: (styles.pressableText as any)({ disabled, size }).placeholderColor }]}>
-            {value ? formatTime(value) : placeholder}
-          </Text>
-          <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
+          <View style={inputContainerStyle} pointerEvents="none">
+            <TextInput
+              value={formatTime(value ?? undefined)}
+              placeholder={placeholder}
+              editable={false}
+              style={textInputStyle}
+            />
+            <View style={iconButtonStyle}>
+              <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
+            </View>
+          </View>
         </TouchableOpacity>
       ) : (
         <View style={inputContainerStyle}>

package/src/TimeInput.web.tsx

@@ -133,29 +133,31 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   const errorProps = getWebProps([errorTextStyle]);
   const popoverProps = getWebProps([popoverContentStyle]);
 
-  // Pressable text style (reuses input style but renders as a button)
-  const pressableTextStyle = (styles.pressableText as any)({ disabled, size });
-  const pressableTextProps = getWebProps([pressableTextStyle]);
-
   return (
     <div style={style as React.CSSProperties}>
       {label && (
         <span {...labelProps}>{label}</span>
       )}
       {pressable ? (
-        <button
-          type="button"
-          {...containerProps}
-          ref={triggerRef as any}
-          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
+        <div
+          ref={triggerRef}
           onClick={() => !disabled && setOpen(!open)}
-          disabled={disabled}
+          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
         >
-          <span {...pressableTextProps} style={!value ? { color: pressableTextStyle.placeholderColor } : undefined}>
-            {value ? formatTime(value) : placeholder}
-          </span>
-          <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
-        </button>
+          <div {...containerProps} style={{ pointerEvents: 'none' }}>
+            <input
+              type="text"
+              value={formatTime(value ?? undefined)}
+              placeholder={placeholder}
+              readOnly
+              tabIndex={-1}
+              {...inputProps}
+            />
+            <div {...iconButtonProps}>
+              <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
+            </div>
+          </div>
+        </div>
       ) : (
         <div {...containerProps} ref={triggerRef}>
           <input