@idealyst/datepicker 1.2.36 → 1.2.37

package/package.json

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

package/src/DateInput.web.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
 import { mdiCalendar } from '@mdi/js';
 import { PositionedPortal } from '@idealyst/components/internal';
 import { IconSvg } from './IconSvg.web';
@@ -16,6 +17,7 @@ export const DateInput: React.FC<DateInputProps> = ({
   maxDate,
   disabled = false,
   error,
+  size = 'md',
   style,
 }) => {
   const [open, setOpen] = useState(false);
@@ -24,14 +26,26 @@ export const DateInput: React.FC<DateInputProps> = ({
 
   const styles = dateTimeInputStyles;
 
-  // Get dynamic styles
+  // Apply variants for disabled, error, and size states
+  styles.useVariants({
+    disabled,
+    error: !!error,
+    size,
+  });
+
+  // Get theme for icon size and color
+  const { theme } = useUnistyles();
+  const iconSize = theme.sizes.input[size].iconSize;
+  const iconColor = theme.colors.text.secondary;
+
+  // Get dynamic styles with size variant
   const labelTextStyle = (styles.labelText as any)({});
-  const inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error });
-  const textInputStyle = (styles.textInput as any)({ disabled });
-  const iconButtonStyle = (styles.iconButton as any)({ disabled });
+  const inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error, size });
+  const textInputStyle = (styles.textInput as any)({ disabled, size });
+  const iconButtonStyle = (styles.iconButton as any)({ disabled, size });
+  const iconStyle = (styles.icon as any)({ size });
   const errorTextStyle = (styles.errorText as any)({});
   const popoverContentStyle = (styles.popoverContent as any)({});
-  const iconColorStyle = (styles.iconColor as any)({ disabled });
 
   // Format date to string
   const formatDate = (date: Date | undefined): string => {
@@ -80,17 +94,24 @@ export const DateInput: React.FC<DateInputProps> = ({
   };
 
   const handleDateSelect = (date: Date) => {
+    console.log('[DateInput] handleDateSelect received:', date.toISOString());
+    console.log('[DateInput] Calling onChange with:', date.toISOString());
     onChange(date);
     setOpen(false);
   };
 
-  // Get web props
+  // Get web props for all elements
   const containerProps = getWebProps([inputContainerStyle]);
+  const labelProps = getWebProps([labelTextStyle]);
+  const inputProps = getWebProps([textInputStyle]);
+  const iconButtonProps = getWebProps([iconButtonStyle]);
+  const errorProps = getWebProps([errorTextStyle]);
+  const popoverProps = getWebProps([popoverContentStyle]);
 
   return (
     <div style={style as React.CSSProperties}>
       {label && (
-        <span style={labelTextStyle}>{label}</span>
+        <span {...labelProps}>{label}</span>
       )}
       <div {...containerProps} ref={triggerRef}>
         <input
@@ -100,18 +121,19 @@ export const DateInput: React.FC<DateInputProps> = ({
           onBlur={handleInputBlur}
           placeholder={placeholder}
           disabled={disabled}
-          style={textInputStyle}
+          {...inputProps}
         />
         <button
-          style={iconButtonStyle}
+          type="button"
+          {...iconButtonProps}
           onClick={() => !disabled && setOpen(!open)}
           disabled={disabled}
         >
-          <IconSvg path={mdiCalendar} size={18} color={iconColorStyle.color} />
+          <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
         </button>
       </div>
       {error && (
-        <span style={errorTextStyle}>{error}</span>
+        <span {...errorProps}>{error}</span>
       )}
 
       <PositionedPortal
@@ -123,7 +145,7 @@ export const DateInput: React.FC<DateInputProps> = ({
         onEscapeKey={() => setOpen(false)}
         zIndex={9999}
       >
-        <div style={popoverContentStyle}>
+        <div {...popoverProps}>
           <DatePicker
             value={value ?? undefined}
             onChange={handleDateSelect}

package/src/DatePicker.styles.ts

@@ -20,12 +20,17 @@ export type DatePickerDynamicProps = {
  */
 export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme: Theme) => ({
   // Calendar container - compact
-  calendar: ({ disabled = false }: DatePickerDynamicProps) => ({
+  calendar: (_props: DatePickerDynamicProps) => ({
     padding: 8,
     backgroundColor: theme.colors.surface.primary,
     borderRadius: 6,
     width: 220,
-    opacity: disabled ? 0.6 : 1,
+    variants: {
+      disabled: {
+        true: { opacity: 0.6 },
+        false: { opacity: 1 },
+      },
+    },
   }),
 
   // Calendar header with month/year and navigation
@@ -111,27 +116,44 @@ export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme
   }),
 
   // Navigation button
-  navButton: ({ disabled = false }: DatePickerDynamicProps) => ({
+  navButton: (_props: DatePickerDynamicProps) => ({
     width: 28,
     height: 28,
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
     borderRadius: 4,
-    opacity: disabled ? 0.4 : 1,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
     _web: {
       display: 'flex',
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      background: 'none',
+      border: 'none',
+      padding: 0,
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.4, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
     },
   }),
 
   // Title button (month/year selector)
-  titleButton: ({ disabled = false }: DatePickerDynamicProps) => ({
+  titleButton: (_props: DatePickerDynamicProps) => ({
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4,
-    opacity: disabled ? 0.6 : 1,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
     _web: {
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      background: 'none',
+      border: 'none',
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.6, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
     },
   }),
 
@@ -141,23 +163,36 @@ export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme
     color: theme.colors.text.primary,
   }),
 
-  // Day button
-  dayButton: ({ disabled = false }: DatePickerDynamicProps) => ({
-    width: 24,
-    height: 24,
+  // Day button - fills entire cell for better click handling
+  dayButton: (_props: DatePickerDynamicProps) => ({
+    width: 28,
+    height: 28,
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
-    borderRadius: 12,
-    opacity: disabled ? 0.4 : 1,
+    borderRadius: 14,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
     _web: {
       display: 'flex',
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: 'pointer',
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.4, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
     },
   }),
 
   dayText: (_props: DatePickerDynamicProps) => ({
     fontSize: 12,
     color: theme.colors.text.primary,
+    _web: {
+      pointerEvents: 'none',
+    },
   }),
 
   weekdayText: (_props: DatePickerDynamicProps) => ({
@@ -166,7 +201,7 @@ export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme
   }),
 
   // Month/Year selector item
-  selectorItem: ({ disabled = false }: DatePickerDynamicProps) => ({
+  selectorItem: (_props: DatePickerDynamicProps) => ({
     minWidth: 48,
     paddingVertical: 6,
     paddingHorizontal: 8,
@@ -174,41 +209,66 @@ export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
     borderRadius: 4,
-    opacity: disabled ? 0.4 : 1,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
     _web: {
       display: 'flex',
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      background: 'none',
+      border: 'none',
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.4, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
     },
   }),
 
   selectorItemSelected: (_props: DatePickerDynamicProps) => ({
     backgroundColor: theme.intents.primary.primary,
+    _web: {
+      background: theme.intents.primary.primary,
+    },
   }),
 
   selectorItemText: (_props: DatePickerDynamicProps) => ({
     fontSize: 12,
     color: theme.colors.text.primary,
+    _web: {
+      pointerEvents: 'none',
+    },
   }),
 
   selectorItemTextSelected: (_props: DatePickerDynamicProps) => ({
     color: theme.intents.primary.contrast,
+    _web: {
+      pointerEvents: 'none',
+    },
   }),
 
   // Selected day styling
   selectedDay: (_props: DatePickerDynamicProps) => ({
     backgroundColor: theme.intents.primary.primary,
-    borderRadius: 14,
+    borderRadius: 6,
+    _web: {
+      background: theme.intents.primary.primary,
+    },
   }),
 
   selectedDayText: (_props: DatePickerDynamicProps) => ({
     color: theme.intents.primary.contrast,
+    _web: {
+      pointerEvents: 'none',
+    },
   }),
 
-  // Today styling
+  // Today styling - subtle background highlight
   todayDay: (_props: DatePickerDynamicProps) => ({
-    borderWidth: 1,
-    borderColor: theme.intents.primary.primary,
-    borderRadius: 14,
+    backgroundColor: theme.intents.primary.muted,
+    borderRadius: 6,
+    _web: {
+      background: theme.intents.primary.muted,
+    },
   }),
 
   // Icon color helper

package/src/DatePicker.web.tsx

@@ -23,6 +23,11 @@ export const DatePicker: React.FC<DatePickerProps> = ({
 
   const styles = datePickerCalendarStyles;
 
+  // Apply variants for disabled state
+  styles.useVariants({
+    disabled,
+  });
+
   const { days, monthShort, year } = useMemo(() => {
     const year = currentMonth.getFullYear();
     const month = currentMonth.getMonth();
@@ -78,8 +83,16 @@ export const DatePicker: React.FC<DatePickerProps> = ({
 
   const isDisabled = (date: Date): boolean => {
     if (disabled) return true;
-    if (minDate && date < new Date(minDate.setHours(0, 0, 0, 0))) return true;
-    if (maxDate && date > new Date(maxDate.setHours(23, 59, 59, 999))) return true;
+    // Normalize the date to start of day for comparison
+    const normalizedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    if (minDate) {
+      const min = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+      if (normalizedDate < min) return true;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
+      if (normalizedDate > max) return true;
+    }
     return false;
   };
 
@@ -92,8 +105,13 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   };
 
   const handleDayPress = (date: Date) => {
+    console.log('[DatePicker] handleDayPress called with:', date.toISOString());
+    console.log('[DatePicker] isDisabled:', isDisabled(date));
     if (!isDisabled(date)) {
-      onChange(date);
+      // Create a new date to avoid mutating the calendar's date objects
+      const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+      console.log('[DatePicker] Calling onChange with:', newDate.toISOString());
+      onChange(newDate);
     }
   };
 
@@ -140,13 +158,22 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const selectorItemTextSelectedStyle = (styles.selectorItemTextSelected as any)({});
   const iconColorStyle = (styles.iconColor as any)({});
 
-  // Get web props
+  // Get web props for all elements
   const calendarProps = getWebProps([calendarStyle, style as any]);
   const headerProps = getWebProps([headerStyle]);
   const weekdayRowProps = getWebProps([weekdayRowStyle]);
+  const weekdayCellProps = getWebProps([weekdayCellStyle]);
   const gridProps = getWebProps([gridStyle]);
   const monthGridProps = getWebProps([monthGridStyle]);
   const yearGridProps = getWebProps([yearGridStyle]);
+  const navButtonProps = getWebProps([navButtonStyle]);
+  const titleButtonProps = getWebProps([titleButtonStyle]);
+  const titleTextProps = getWebProps([titleTextStyle]);
+  const weekdayTextProps = getWebProps([weekdayTextStyle]);
+  const selectorItemProps = getWebProps([selectorItemStyle]);
+  const selectorItemSelectedProps = getWebProps([selectorItemStyle, selectorItemSelectedStyle]);
+  const selectorItemTextProps = getWebProps([selectorItemTextStyle]);
+  const selectorItemTextSelectedProps = getWebProps([selectorItemTextStyle, selectorItemTextSelectedStyle]);
 
   // Render month selector
   if (viewMode === 'months') {
@@ -154,18 +181,20 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       <div {...calendarProps}>
         <div {...headerProps}>
           <button
-            style={navButtonStyle}
+            type="button"
+            {...navButtonProps}
             onClick={() => setViewMode('calendar')}
             disabled={disabled}
           >
             <IconSvg path={mdiChevronLeft} size={16} color={iconColorStyle.color} />
           </button>
           <button
-            style={titleButtonStyle}
+            type="button"
+            {...titleButtonProps}
             onClick={() => setViewMode('years')}
             disabled={disabled}
           >
-            <span style={titleTextStyle}>{year}</span>
+            <span {...titleTextProps}>{year}</span>
           </button>
           <div style={{ width: 28 }} />
         </div>
@@ -174,20 +203,13 @@ export const DatePicker: React.FC<DatePickerProps> = ({
             const isCurrentMonth = index === currentMonth.getMonth();
             return (
               <button
+                type="button"
                 key={month}
-                style={{
-                  ...selectorItemStyle,
-                  ...(isCurrentMonth ? selectorItemSelectedStyle : {}),
-                }}
+                {...(isCurrentMonth ? selectorItemSelectedProps : selectorItemProps)}
                 onClick={() => handleMonthSelect(index)}
                 disabled={disabled}
               >
-                <span
-                  style={{
-                    ...selectorItemTextStyle,
-                    ...(isCurrentMonth ? selectorItemTextSelectedStyle : {}),
-                  }}
-                >
+                <span {...(isCurrentMonth ? selectorItemTextSelectedProps : selectorItemTextProps)}>
                   {month}
                 </span>
               </button>
@@ -204,17 +226,19 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       <div {...calendarProps}>
         <div {...headerProps}>
           <button
-            style={navButtonStyle}
+            type="button"
+            {...navButtonProps}
             onClick={goToPrevYearRange}
             disabled={disabled}
           >
             <IconSvg path={mdiChevronLeft} size={16} color={iconColorStyle.color} />
           </button>
-          <span style={titleTextStyle}>
+          <span {...titleTextProps}>
             {yearRange[0]} - {yearRange[yearRange.length - 1]}
           </span>
           <button
-            style={navButtonStyle}
+            type="button"
+            {...navButtonProps}
             onClick={goToNextYearRange}
             disabled={disabled}
           >
@@ -226,20 +250,13 @@ export const DatePicker: React.FC<DatePickerProps> = ({
             const isCurrentYear = yr === currentMonth.getFullYear();
             return (
               <button
+                type="button"
                 key={yr}
-                style={{
-                  ...selectorItemStyle,
-                  ...(isCurrentYear ? selectorItemSelectedStyle : {}),
-                }}
+                {...(isCurrentYear ? selectorItemSelectedProps : selectorItemProps)}
                 onClick={() => handleYearSelect(yr)}
                 disabled={disabled}
               >
-                <span
-                  style={{
-                    ...selectorItemTextStyle,
-                    ...(isCurrentYear ? selectorItemTextSelectedStyle : {}),
-                  }}
-                >
+                <span {...(isCurrentYear ? selectorItemTextSelectedProps : selectorItemTextProps)}>
                   {yr}
                 </span>
               </button>
@@ -250,29 +267,49 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     );
   }
 
+  // Get day cell props
+  const dayCellStyle = (styles.dayCell as any)({});
+  const selectedDayStyle = (styles.selectedDay as any)({});
+  const todayDayStyle = (styles.todayDay as any)({});
+  const dayButtonStyle = (styles.dayButton as any)({ disabled: false });
+  const dayButtonDisabledStyle = (styles.dayButton as any)({ disabled: true });
+  const dayTextStyle = (styles.dayText as any)({});
+  const selectedDayTextStyle = (styles.selectedDayText as any)({});
+
+  const dayCellProps = getWebProps([dayCellStyle]);
+  const dayButtonProps = getWebProps([dayButtonStyle]);
+  const dayButtonSelectedProps = getWebProps([dayButtonStyle, selectedDayStyle]);
+  const dayButtonTodayProps = getWebProps([dayButtonStyle, todayDayStyle]);
+  const dayButtonDisabledProps = getWebProps([dayButtonDisabledStyle]);
+  const dayTextProps = getWebProps([dayTextStyle]);
+  const selectedDayTextProps = getWebProps([dayTextStyle, selectedDayTextStyle]);
+
   // Render calendar (default)
   return (
     <div {...calendarProps}>
       {/* Header */}
       <div {...headerProps}>
         <button
-          style={navButtonStyle}
+          type="button"
+          {...navButtonProps}
           onClick={goToPrevMonth}
           disabled={disabled}
         >
           <IconSvg path={mdiChevronLeft} size={16} color={iconColorStyle.color} />
         </button>
         <button
-          style={titleButtonStyle}
+          type="button"
+          {...titleButtonProps}
           onClick={() => setViewMode('months')}
           disabled={disabled}
         >
-          <span style={titleTextStyle}>
+          <span {...titleTextProps}>
             {monthShort} {year}
           </span>
         </button>
         <button
-          style={navButtonStyle}
+          type="button"
+          {...navButtonProps}
           onClick={goToNextMonth}
           disabled={disabled}
         >
@@ -283,51 +320,41 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       {/* Weekday headers */}
       <div {...weekdayRowProps}>
         {WEEKDAYS.map((day, i) => (
-          <div key={i} style={weekdayCellStyle}>
-            <span style={weekdayTextStyle}>{day}</span>
+          <div key={i} {...weekdayCellProps}>
+            <span {...weekdayTextProps}>{day}</span>
           </div>
         ))}
       </div>
 
       {/* Calendar grid */}
       <div {...gridProps}>
-        {days.map(({ date, isCurrentMonth }, index) => {
+        {days.map(({ date, isCurrentMonth: isCurrentMonthDay }, index) => {
           const selected = isSelected(date);
           const today = isToday(date);
           const dayDisabled = isDisabled(date);
 
-          const dayCellStyle = (styles.dayCell as any)({});
-          const selectedDayStyle = (styles.selectedDay as any)({});
-          const todayDayStyle = (styles.todayDay as any)({});
-          const dayButtonStyle = (styles.dayButton as any)({ disabled: dayDisabled });
-          const dayTextStyle = (styles.dayText as any)({});
-          const selectedDayTextStyle = (styles.selectedDayText as any)({});
+          // Get appropriate button props (className and ref only)
+          const buttonProps = dayDisabled
+            ? dayButtonDisabledProps
+            : selected
+              ? dayButtonSelectedProps
+              : today
+                ? dayButtonTodayProps
+                : dayButtonProps;
 
           return (
-            <div
+            <button
               key={index}
-              style={{
-                ...dayCellStyle,
-                ...(selected ? selectedDayStyle : {}),
-                ...(today && !selected ? todayDayStyle : {}),
-                opacity: (!isCurrentMonth || dayDisabled) ? 0.3 : 1,
-              }}
+              type="button"
+              className={buttonProps.className}
+              style={{ opacity: (!isCurrentMonthDay || dayDisabled) ? 0.3 : 1 }}
+              onClick={() => handleDayPress(date)}
+              disabled={dayDisabled}
             >
-              <button
-                style={dayButtonStyle}
-                onClick={() => handleDayPress(date)}
-                disabled={dayDisabled}
-              >
-                <span
-                  style={{
-                    ...dayTextStyle,
-                    ...(selected ? selectedDayTextStyle : {}),
-                  }}
-                >
-                  {date.getDate()}
-                </span>
-              </button>
-            </div>
+              <span {...(selected ? selectedDayTextProps : dayTextProps)}>
+                {date.getDate()}
+              </span>
+            </button>
           );
         })}
       </div>

package/src/DateTimePicker.web.tsx

@@ -15,6 +15,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   minuteStep = 1,
   disabled = false,
   error,
+  size = 'md',
   style,
 }) => {
   const styles = dateTimePickerStyles;
@@ -25,6 +26,8 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   const inputColumnStyle = (styles.inputColumn as any)({});
 
   const handleDateChange = (date: Date | null) => {
+    console.log('[DateTimePicker] handleDateChange received:', date?.toISOString());
+    console.log('[DateTimePicker] Current value:', value?.toISOString());
     if (!date) {
       onChange(null);
       return;
@@ -32,12 +35,18 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
     // Preserve time from current value, or use noon as default
     const hours = value?.getHours() ?? 12;
     const minutes = value?.getMinutes() ?? 0;
+    console.log('[DateTimePicker] Preserving hours:', hours, 'minutes:', minutes);
     const updated = new Date(date);
+    console.log('[DateTimePicker] After new Date(date):', updated.toISOString());
     updated.setHours(hours, minutes, 0, 0);
+    console.log('[DateTimePicker] After setHours:', updated.toISOString());
+    console.log('[DateTimePicker] Calling onChange with:', updated.toISOString());
     onChange(updated);
   };
 
   const handleTimeChange = (time: Date | null) => {
+    console.log('[DateTimePicker] handleTimeChange received:', time?.toISOString());
+    console.log('[DateTimePicker] Current value:', value?.toISOString());
     if (!time) {
       // Only clear time component, keep date if it exists
       if (value) {
@@ -58,19 +67,22 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
       0,
       0
     );
+    console.log('[DateTimePicker] Time change - calling onChange with:', updated.toISOString());
     onChange(updated);
   };
 
-  // Get web props
+  // Get web props for all elements
   const inputRowProps = getWebProps([inputRowStyle]);
+  const labelProps = getWebProps([labelTextStyle]);
+  const inputColumnProps = getWebProps([inputColumnStyle]);
 
   return (
     <div style={style as React.CSSProperties}>
       {label && (
-        <span style={labelTextStyle}>{label}</span>
+        <span {...labelProps}>{label}</span>
       )}
       <div {...inputRowProps}>
-        <div style={inputColumnStyle}>
+        <div {...inputColumnProps}>
           <DateInput
             value={value ?? undefined}
             onChange={handleDateChange}
@@ -79,9 +91,10 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             maxDate={maxDate}
             disabled={disabled}
             error={error}
+            size={size}
           />
         </div>
-        <div style={inputColumnStyle}>
+        <div {...inputColumnProps}>
           <TimeInput
             value={value ?? undefined}
             onChange={handleTimeChange}
@@ -89,6 +102,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             mode={timeMode}
             minuteStep={minuteStep}
             disabled={disabled}
+            size={size}
           />
         </div>
       </div>

package/src/IconSvg.web.tsx

@@ -22,11 +22,14 @@ export const IconSvg: React.FC<IconSvgProps> = ({
 }) => {
   if (!path) return null;
 
+  // Convert numeric sizes to pixel strings - @mdi/react interprets bare numbers as rem
+  const sizeValue = typeof size === 'number' ? `${size}px` : size;
+
   return (
     <MdiIcon
       style={style}
       path={path}
-      size={size}
+      size={sizeValue}
       color={color}
       aria-label={ariaLabel}
     />

package/src/InputStyles.ts

@@ -18,51 +18,103 @@ export type InputDynamicProps = {
 
 /**
  * Shared input styles with theme reactivity.
+ * Uses $iterator pattern to support size variants (xs, sm, md, lg, xl).
  */
 export const dateTimeInputStyles = defineStyle('DateTimeInput', (theme: Theme) => ({
   // Input container for DateInput/TimeInput
-  inputContainer: ({ disabled = false, error = false }: InputDynamicProps) => ({
+  inputContainer: (_props: InputDynamicProps) => ({
     flexDirection: 'row' as const,
     alignItems: 'center' as const,
     borderWidth: 1,
-    borderRadius: 6,
+    borderStyle: 'solid' as const,
+    borderRadius: theme.radii.md,
     overflow: 'hidden' as const,
-    borderColor: error ? theme.intents.danger.primary : theme.colors.border.primary,
-    backgroundColor: disabled ? theme.colors.surface.secondary : theme.colors.surface.primary,
+    borderColor: theme.colors.border.primary,
+    backgroundColor: theme.colors.surface.primary,
     _web: {
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
-      border: `1px solid ${error ? theme.intents.danger.primary : theme.colors.border.primary}`,
+      boxSizing: 'border-box',
+    },
+    variants: {
+      disabled: {
+        true: { backgroundColor: theme.colors.surface.secondary },
+        false: { backgroundColor: theme.colors.surface.primary },
+      },
+      error: {
+        true: { borderColor: theme.intents.danger.primary },
+        false: { borderColor: theme.colors.border.primary },
+      },
+      // $iterator expands for each input size (xs, sm, md, lg, xl)
+      size: {
+        height: theme.sizes.$input.height,
+        paddingHorizontal: theme.sizes.$input.paddingHorizontal,
+      },
     },
   }),
 
   // Text input inside the input container
-  textInput: ({ disabled = false }: InputDynamicProps) => ({
+  textInput: (_props: InputDynamicProps) => ({
     flex: 1,
-    padding: 8,
-    paddingHorizontal: 12,
-    fontSize: 14,
+    minWidth: 0,
     backgroundColor: 'transparent',
-    color: disabled ? theme.colors.text.tertiary : theme.colors.text.primary,
+    color: theme.colors.text.primary,
+    fontWeight: '400' as const,
     _web: {
       outline: 'none',
       border: 'none',
+      fontFamily: 'inherit',
+    },
+    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 button inside input
-  iconButton: ({ disabled = false }: InputDynamicProps) => ({
-    width: 32,
-    height: 32,
+  iconButton: (_props: InputDynamicProps) => ({
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
-    marginRight: 4,
     borderRadius: 4,
-    opacity: disabled ? 0.4 : 1,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    flexShrink: 0,
     _web: {
       display: 'flex',
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      background: 'none',
+      border: 'none',
+      padding: 0,
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.4, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
+      // $iterator expands for each input size
+      size: {
+        width: theme.sizes.$input.iconSize,
+        height: theme.sizes.$input.iconSize,
+        marginLeft: theme.sizes.$input.iconMargin,
+      },
+    },
+  }),
+
+  // Icon inside button - sized based on input size
+  icon: (_props: InputDynamicProps) => ({
+    color: theme.colors.text.secondary,
+    variants: {
+      // $iterator expands for each input size
+      size: {
+        width: theme.sizes.$input.iconSize,
+        height: theme.sizes.$input.iconSize,
+      },
     },
   }),
 
@@ -101,17 +153,21 @@ export const dateTimeInputStyles = defineStyle('DateTimeInput', (theme: Theme) =
   }),
 
   // Close button
-  closeButton: ({ disabled = false }: InputDynamicProps) => ({
+  closeButton: (_props: InputDynamicProps) => ({
     marginTop: 8,
     paddingVertical: 8,
     paddingHorizontal: 16,
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
     borderRadius: 4,
-    opacity: disabled ? 0.4 : 1,
     _web: {
       display: 'flex',
-      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.4, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
     },
   }),
 
@@ -121,7 +177,7 @@ export const dateTimeInputStyles = defineStyle('DateTimeInput', (theme: Theme) =
   }),
 
   // Icon color helper
-  iconColor: ({ disabled = false }: InputDynamicProps) => ({
-    color: theme.colors.text.primary,
+  iconColor: (_props: InputDynamicProps) => ({
+    color: theme.colors.text.secondary,
   }),
 }));

package/src/TimeInput.web.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
 import { mdiClockOutline } from '@mdi/js';
 import { PositionedPortal } from '@idealyst/components/internal';
 import { IconSvg } from './IconSvg.web';
@@ -16,6 +17,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   minuteStep = 1,
   disabled = false,
   error,
+  size = 'md',
   style,
 }) => {
   const [open, setOpen] = useState(false);
@@ -24,14 +26,26 @@ export const TimeInput: React.FC<TimeInputProps> = ({
 
   const styles = dateTimeInputStyles;
 
-  // Get dynamic styles
+  // Apply variants for disabled, error, and size states
+  styles.useVariants({
+    disabled,
+    error: !!error,
+    size,
+  });
+
+  // Get theme for icon size and color
+  const { theme } = useUnistyles();
+  const iconSize = theme.sizes.input[size].iconSize;
+  const iconColor = theme.colors.text.secondary;
+
+  // Get dynamic styles with size variant
   const labelTextStyle = (styles.labelText as any)({});
-  const inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error });
-  const textInputStyle = (styles.textInput as any)({ disabled });
-  const iconButtonStyle = (styles.iconButton as any)({ disabled });
+  const inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error, size });
+  const textInputStyle = (styles.textInput as any)({ disabled, size });
+  const iconButtonStyle = (styles.iconButton as any)({ disabled, size });
+  const iconStyle = (styles.icon as any)({ size });
   const errorTextStyle = (styles.errorText as any)({});
   const popoverContentStyle = (styles.popoverContent as any)({});
-  const iconColorStyle = (styles.iconColor as any)({ disabled });
 
   // Format time to string
   const formatTime = (date: Date | undefined): string => {
@@ -109,13 +123,18 @@ export const TimeInput: React.FC<TimeInputProps> = ({
     onChange(date);
   };
 
-  // Get web props
+  // Get web props for all elements
   const containerProps = getWebProps([inputContainerStyle]);
+  const labelProps = getWebProps([labelTextStyle]);
+  const inputProps = getWebProps([textInputStyle]);
+  const iconButtonProps = getWebProps([iconButtonStyle]);
+  const errorProps = getWebProps([errorTextStyle]);
+  const popoverProps = getWebProps([popoverContentStyle]);
 
   return (
     <div style={style as React.CSSProperties}>
       {label && (
-        <span style={labelTextStyle}>{label}</span>
+        <span {...labelProps}>{label}</span>
       )}
       <div {...containerProps} ref={triggerRef}>
         <input
@@ -125,18 +144,19 @@ export const TimeInput: React.FC<TimeInputProps> = ({
           onBlur={handleInputBlur}
           placeholder={placeholder}
           disabled={disabled}
-          style={textInputStyle}
+          {...inputProps}
         />
         <button
-          style={iconButtonStyle}
+          type="button"
+          {...iconButtonProps}
           onClick={() => !disabled && setOpen(!open)}
           disabled={disabled}
         >
-          <IconSvg path={mdiClockOutline} size={18} color={iconColorStyle.color} />
+          <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
         </button>
       </div>
       {error && (
-        <span style={errorTextStyle}>{error}</span>
+        <span {...errorProps}>{error}</span>
       )}
 
       <PositionedPortal
@@ -148,7 +168,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
         onEscapeKey={() => setOpen(false)}
         zIndex={9999}
       >
-        <div style={popoverContentStyle}>
+        <div {...popoverProps}>
           <TimePicker
             value={value ?? undefined}
             onChange={handleTimeChange}

package/src/TimePicker.styles.ts

@@ -20,11 +20,16 @@ export type TimePickerDynamicProps = {
  */
 export const timePickerStyles = defineStyle('TimePicker', (theme: Theme) => ({
   // Time picker container
-  timePicker: ({ disabled = false }: TimePickerDynamicProps) => ({
+  timePicker: (_props: TimePickerDynamicProps) => ({
     padding: 12,
     backgroundColor: theme.colors.surface.primary,
     borderRadius: 6,
-    opacity: disabled ? 0.6 : 1,
+    variants: {
+      disabled: {
+        true: { opacity: 0.6 },
+        false: { opacity: 1 },
+      },
+    },
   }),
 
   // Time columns container
@@ -62,32 +67,51 @@ export const timePickerStyles = defineStyle('TimePicker', (theme: Theme) => ({
     fontSize: 24,
     fontWeight: '600' as const,
     color: theme.colors.text.primary,
+    _web: {
+      pointerEvents: 'none',
+    },
   }),
 
   // Arrow button (up/down)
-  arrowButton: ({ disabled = false }: TimePickerDynamicProps) => ({
+  arrowButton: (_props: TimePickerDynamicProps) => ({
     width: 32,
     height: 32,
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
     borderRadius: 4,
-    opacity: disabled ? 0.4 : 1,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
     _web: {
       display: 'flex',
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      background: 'none',
+      border: 'none',
+      padding: 0,
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.4, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
     },
   }),
 
   // Period toggle button (AM/PM)
-  periodButton: ({ disabled = false }: TimePickerDynamicProps) => ({
+  periodButton: (_props: TimePickerDynamicProps) => ({
     paddingVertical: 6,
     paddingHorizontal: 12,
     borderWidth: 1,
+    borderStyle: 'solid' as const,
     borderColor: theme.colors.border.primary,
     borderRadius: 4,
-    opacity: disabled ? 0.4 : 1,
+    backgroundColor: 'transparent',
     _web: {
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      background: 'none',
+    },
+    variants: {
+      disabled: {
+        true: { opacity: 0.4, _web: { cursor: 'not-allowed' } },
+        false: { opacity: 1, _web: { cursor: 'pointer' } },
+      },
     },
   }),
 
@@ -95,6 +119,9 @@ export const timePickerStyles = defineStyle('TimePicker', (theme: Theme) => ({
     fontSize: 14,
     fontWeight: '500' as const,
     color: theme.colors.text.primary,
+    _web: {
+      pointerEvents: 'none',
+    },
   }),
 
   // Icon color helper

package/src/TimePicker.web.tsx

@@ -15,6 +15,11 @@ export const TimePicker: React.FC<TimePickerProps> = ({
 }) => {
   const styles = timePickerStyles;
 
+  // Apply variants for disabled state
+  styles.useVariants({
+    disabled,
+  });
+
   const currentDate = value || new Date();
   const hours = currentDate.getHours();
   const minutes = currentDate.getMinutes();
@@ -67,10 +72,16 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   const periodButtonTextStyle = (styles.periodButtonText as any)({});
   const iconColorStyle = (styles.iconColor as any)({});
 
-  // Get web props
+  // Get web props for all elements
   const timePickerProps = getWebProps([timePickerStyle, style as any]);
   const timeColumnsProps = getWebProps([timeColumnsStyle]);
   const timeColumnProps = getWebProps([timeColumnStyle]);
+  const timeSeparatorProps = getWebProps([timeSeparatorStyle]);
+  const separatorTextProps = getWebProps([separatorTextStyle]);
+  const timeValueProps = getWebProps([timeValueStyle]);
+  const arrowButtonProps = getWebProps([arrowButtonStyle]);
+  const periodButtonProps = getWebProps([periodButtonStyle]);
+  const periodButtonTextProps = getWebProps([periodButtonTextStyle]);
 
   return (
     <div {...timePickerProps}>
@@ -78,17 +89,19 @@ export const TimePicker: React.FC<TimePickerProps> = ({
         {/* Hours column */}
         <div {...timeColumnProps}>
           <button
-            style={arrowButtonStyle}
+            type="button"
+            {...arrowButtonProps}
             onClick={incrementHours}
             disabled={disabled}
           >
             <IconSvg path={mdiChevronUp} size={20} color={iconColorStyle.color} />
           </button>
-          <span style={timeValueStyle}>
+          <span {...timeValueProps}>
             {String(displayHours).padStart(2, '0')}
           </span>
           <button
-            style={arrowButtonStyle}
+            type="button"
+            {...arrowButtonProps}
             onClick={decrementHours}
             disabled={disabled}
           >
@@ -97,24 +110,26 @@ export const TimePicker: React.FC<TimePickerProps> = ({
         </div>
 
         {/* Separator */}
-        <div style={timeSeparatorStyle}>
-          <span style={separatorTextStyle}>:</span>
+        <div {...timeSeparatorProps}>
+          <span {...separatorTextProps}>:</span>
         </div>
 
         {/* Minutes column */}
         <div {...timeColumnProps}>
           <button
-            style={arrowButtonStyle}
+            type="button"
+            {...arrowButtonProps}
             onClick={incrementMinutes}
             disabled={disabled}
           >
             <IconSvg path={mdiChevronUp} size={20} color={iconColorStyle.color} />
           </button>
-          <span style={timeValueStyle}>
+          <span {...timeValueProps}>
             {String(minutes).padStart(2, '0')}
           </span>
           <button
-            style={arrowButtonStyle}
+            type="button"
+            {...arrowButtonProps}
             onClick={decrementMinutes}
             disabled={disabled}
           >
@@ -126,11 +141,12 @@ export const TimePicker: React.FC<TimePickerProps> = ({
         {is12Hour && (
           <div {...timeColumnProps}>
             <button
-              style={periodButtonStyle}
+              type="button"
+              {...periodButtonProps}
               onClick={togglePeriod}
               disabled={disabled}
             >
-              <span style={periodButtonTextStyle}>
+              <span {...periodButtonTextProps}>
                 {isPM ? 'PM' : 'AM'}
               </span>
             </button>

package/src/examples/DatePickerExamples.tsx

@@ -79,8 +79,8 @@ export const DatePickerExamples = () => {
         <View gap="md">
           <Text typography="h4" weight="semibold">With Min/Max Date</Text>
           <DateInput
-            value={undefined}
-            onChange={() => {}}
+            value={date ?? undefined}
+            onChange={setDate}
             label="Future Dates Only"
             placeholder="MM/DD/YYYY"
             minDate={tomorrow}
@@ -91,6 +91,129 @@ export const DatePickerExamples = () => {
           </Text>
         </View>
 
+        {/* Size Variants */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">Size Variants</Text>
+          <Text typography="caption" color="secondary">
+            DateInput, TimeInput, and DateTimePicker support different sizes
+          </Text>
+
+          <View gap="sm">
+            <Text typography="body2" weight="medium">Extra Small (xs)</Text>
+            <View gap="xs">
+              <DateInput
+                value={date ?? undefined}
+                onChange={setDate}
+                placeholder="MM/DD/YYYY"
+                size="xs"
+              />
+              <TimeInput
+                value={time ?? undefined}
+                onChange={setTime}
+                placeholder="12:00 PM"
+                size="xs"
+              />
+            </View>
+          </View>
+
+          <View gap="sm">
+            <Text typography="body2" weight="medium">Small (sm)</Text>
+            <View gap="xs">
+              <DateInput
+                value={date ?? undefined}
+                onChange={setDate}
+                placeholder="MM/DD/YYYY"
+                size="sm"
+              />
+              <TimeInput
+                value={time ?? undefined}
+                onChange={setTime}
+                placeholder="12:00 PM"
+                size="sm"
+              />
+            </View>
+          </View>
+
+          <View gap="sm">
+            <Text typography="body2" weight="medium">Medium (md) - Default</Text>
+            <View gap="xs">
+              <DateInput
+                value={date ?? undefined}
+                onChange={setDate}
+                placeholder="MM/DD/YYYY"
+                size="md"
+              />
+              <TimeInput
+                value={time ?? undefined}
+                onChange={setTime}
+                placeholder="12:00 PM"
+                size="md"
+              />
+            </View>
+          </View>
+
+          <View gap="sm">
+            <Text typography="body2" weight="medium">Large (lg)</Text>
+            <View gap="xs">
+              <DateInput
+                value={date ?? undefined}
+                onChange={setDate}
+                placeholder="MM/DD/YYYY"
+                size="lg"
+              />
+              <TimeInput
+                value={time ?? undefined}
+                onChange={setTime}
+                placeholder="12:00 PM"
+                size="lg"
+              />
+            </View>
+          </View>
+
+          <View gap="sm">
+            <Text typography="body2" weight="medium">Extra Large (xl)</Text>
+            <View gap="xs">
+              <DateInput
+                value={date ?? undefined}
+                onChange={setDate}
+                placeholder="MM/DD/YYYY"
+                size="xl"
+              />
+              <TimeInput
+                value={time ?? undefined}
+                onChange={setTime}
+                placeholder="12:00 PM"
+                size="xl"
+              />
+            </View>
+          </View>
+        </View>
+
+        {/* DateTimePicker Sizes */}
+        <View gap="md">
+          <Text typography="h4" weight="semibold">DateTimePicker Sizes</Text>
+          <View gap="sm">
+            <DateTimePicker
+              value={dateTime ?? undefined}
+              onChange={setDateTime}
+              label="Small"
+              size="sm"
+            />
+            <DateTimePicker
+              value={dateTime ?? undefined}
+              onChange={setDateTime}
+              label="Medium (Default)"
+              size="md"
+            />
+            <DateTimePicker
+              value={dateTime ?? undefined}
+              onChange={setDateTime}
+              label="Large"
+              size="lg"
+            />
+          </View>
+        </View>
+
         {/* Inline DatePicker */}
         <View gap="md">
           <Text typography="h4" weight="semibold">Inline DatePicker</Text>
@@ -120,8 +243,8 @@ export const DatePickerExamples = () => {
         <View gap="md">
           <Text typography="h4" weight="semibold">24-hour Format</Text>
           <TimeInput
-            value={undefined}
-            onChange={() => {}}
+            value={time ?? undefined}
+            onChange={setTime}
             label="24-hour Time"
             placeholder="14:30"
             mode="24h"

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { ViewStyle } from 'react-native';
+import type { Size } from '@idealyst/theme';
 
 export interface DatePickerProps {
   value?: Date;
@@ -27,6 +28,7 @@ export interface DateInputProps {
   maxDate?: Date;
   disabled?: boolean;
   error?: string;
+  size?: Size;
   style?: ViewStyle;
 }
 
@@ -39,6 +41,7 @@ export interface TimeInputProps {
   minuteStep?: number;
   disabled?: boolean;
   error?: string;
+  size?: Size;
   style?: ViewStyle;
 }
 
@@ -52,5 +55,6 @@ export interface DateTimePickerProps {
   minuteStep?: number;
   disabled?: boolean;
   error?: string;
+  size?: Size;
   style?: ViewStyle;
 }