@idealyst/datepicker 1.1.6 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "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.1.6",
-    "@idealyst/theme": "^1.1.6",
+    "@idealyst/components": "^1.1.7",
+    "@idealyst/theme": "^1.1.7",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=13.0.0",
@@ -61,8 +61,8 @@
     }
   },
   "devDependencies": {
-    "@idealyst/components": "^1.1.6",
-    "@idealyst/theme": "^1.1.6",
+    "@idealyst/components": "^1.1.7",
+    "@idealyst/theme": "^1.1.7",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "react-native": "^0.80.1",

package/src/DateInput.native.tsx

@@ -69,38 +69,27 @@ export const DateInput: React.FC<DateInputProps> = ({
     setOpen(false);
   };
 
+  // Apply variants for input container
+  datePickerStyles.useVariants({
+    disabled,
+    error: !!error,
+  });
+
   return (
     <View style={style}>
       {label && (
-        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+        <Text typography="body2" weight="medium" style={datePickerStyles.labelText}>
           {label}
         </Text>
       )}
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          borderWidth: 1,
-          borderColor: error ? '#ef4444' : '#d1d5db',
-          borderRadius: 6,
-          backgroundColor: disabled ? '#f3f4f6' : 'white',
-          overflow: 'hidden',
-        }}
-      >
+      <View style={datePickerStyles.inputContainer}>
         <RNTextInput
           value={inputValue}
           onChangeText={handleInputChange}
           onBlur={handleInputBlur}
           placeholder={placeholder}
           editable={!disabled}
-          style={{
-            flex: 1,
-            padding: 8,
-            paddingHorizontal: 12,
-            fontSize: 14,
-            backgroundColor: 'transparent',
-            color: disabled ? '#9ca3af' : '#111827',
-          }}
+          style={datePickerStyles.textInput}
         />
         <Button
           type="text"
@@ -113,7 +102,7 @@ export const DateInput: React.FC<DateInputProps> = ({
         </Button>
       </View>
       {error && (
-        <Text typography="caption" style={{ marginTop: 4, color: '#ef4444' }}>
+        <Text typography="caption" style={datePickerStyles.errorText}>
           {error}
         </Text>
       )}
@@ -124,14 +113,7 @@ export const DateInput: React.FC<DateInputProps> = ({
         animationType="fade"
         onRequestClose={() => setOpen(false)}
       >
-        <View
-          style={{
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'rgba(0,0,0,0.5)',
-          }}
-        >
+        <View style={datePickerStyles.modalBackdrop}>
           <View style={datePickerStyles.popoverContent}>
             <DatePicker
               value={value ?? undefined}

package/src/DateInput.web.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
 import { View, Text, Button, Icon } from '@idealyst/components';
 import { PositionedPortal } from '@idealyst/components/internal';
 import { DatePicker } from './DatePicker';
@@ -71,24 +72,24 @@ export const DateInput: React.FC<DateInputProps> = ({
     setOpen(false);
   };
 
+  // Apply variants for input container
+  datePickerStyles.useVariants({
+    disabled,
+    error: !!error,
+  });
+
+  // Get web props for styled elements
+  const containerProps = getWebProps([datePickerStyles.inputContainer]);
+  const inputProps = getWebProps([datePickerStyles.textInput]);
+
   return (
     <View style={style}>
       {label && (
-        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+        <Text typography="body2" weight="medium" style={datePickerStyles.labelText}>
           {label}
         </Text>
       )}
-      <div
-        ref={triggerRef}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          border: `1px solid ${error ? '#ef4444' : '#d1d5db'}`,
-          borderRadius: 6,
-          backgroundColor: disabled ? '#f3f4f6' : 'white',
-          overflow: 'hidden',
-        }}
-      >
+      <div ref={triggerRef} {...containerProps}>
         <input
           type="text"
           value={inputValue}
@@ -96,15 +97,7 @@ export const DateInput: React.FC<DateInputProps> = ({
           onBlur={handleInputBlur}
           placeholder={placeholder}
           disabled={disabled}
-          style={{
-            flex: 1,
-            padding: '8px 12px',
-            fontSize: 14,
-            border: 'none',
-            outline: 'none',
-            backgroundColor: 'transparent',
-            color: disabled ? '#9ca3af' : '#111827',
-          }}
+          {...inputProps}
         />
         <Button
           type="text"
@@ -117,7 +110,7 @@ export const DateInput: React.FC<DateInputProps> = ({
         </Button>
       </div>
       {error && (
-        <Text typography="caption" style={{ marginTop: 4, color: '#ef4444' }}>
+        <Text typography="caption" style={datePickerStyles.errorText}>
           {error}
         </Text>
       )}

package/src/{DatePicker.tsx → DatePicker.native.tsx}

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
-import { View, Text, Button, Icon } from '@idealyst/components';
+import { View } from 'react-native';
+import { Text, Button, Icon } from '@idealyst/components';
 import { datePickerStyles } from './styles';
 import type { DatePickerProps } from './types';
 
@@ -21,7 +22,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
 
   datePickerStyles.useVariants({ disabled });
 
-  const { days, monthLabel, monthShort, year } = useMemo(() => {
+  const { days, monthShort, year } = useMemo(() => {
     const year = currentMonth.getFullYear();
     const month = currentMonth.getMonth();
     const firstDay = new Date(year, month, 1);
@@ -53,12 +54,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       }
     }
 
-    const monthLabel = firstDay.toLocaleDateString('en-US', {
-      month: 'short',
-      year: 'numeric',
-    });
-
-    return { days, monthLabel, monthShort: MONTHS[month], year };
+    return { days, monthShort: MONTHS[month], year };
   }, [currentMonth]);
 
   const isSelected = (date: Date): boolean => {
@@ -240,16 +236,9 @@ export const DatePicker: React.FC<DatePickerProps> = ({
               key={index}
               style={[
                 datePickerStyles.dayCell,
-                selected && {
-                  backgroundColor: '#3b82f6',
-                  borderRadius: 4,
-                },
+                selected && datePickerStyles.selectedDay,
                 !isCurrentMonth && { opacity: 0.3 },
-                today && !selected && {
-                  borderWidth: 1,
-                  borderColor: '#3b82f6',
-                  borderRadius: 4,
-                },
+                today && !selected && datePickerStyles.todayDay,
                 dayDisabled && { opacity: 0.3 },
               ]}
             >

package/src/DatePicker.web.tsx

@@ -0,0 +1,279 @@
+import React, { useMemo, useState } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { Text, Button, Icon } from '@idealyst/components';
+import { datePickerStyles } from './styles';
+import type { DatePickerProps } from './types';
+
+const WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+type ViewMode = 'calendar' | 'months' | 'years';
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  style,
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
+  const [viewMode, setViewMode] = useState<ViewMode>('calendar');
+
+  datePickerStyles.useVariants({ disabled });
+
+  const { days, monthShort, year } = useMemo(() => {
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const startPadding = firstDay.getDay();
+    const daysInMonth = lastDay.getDate();
+
+    const days: Array<{ date: Date; isCurrentMonth: boolean }> = [];
+
+    // Previous month padding
+    const prevMonthEnd = new Date(year, month, 0);
+    for (let i = startPadding - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthEnd.getDate() - i),
+        isCurrentMonth: false,
+      });
+    }
+
+    // Current month
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push({ date: new Date(year, month, day), isCurrentMonth: true });
+    }
+
+    // Next month padding (fill to complete last week)
+    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), isCurrentMonth: false });
+      }
+    }
+
+    return { days, monthShort: MONTHS[month], year };
+  }, [currentMonth]);
+
+  const isSelected = (date: Date): boolean => {
+    if (!value) return false;
+    return (
+      date.getDate() === value.getDate() &&
+      date.getMonth() === value.getMonth() &&
+      date.getFullYear() === value.getFullYear()
+    );
+  };
+
+  const isToday = (date: Date): boolean => {
+    const today = new Date();
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  };
+
+  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;
+    return false;
+  };
+
+  const goToPrevMonth = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
+  };
+
+  const goToNextMonth = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
+  };
+
+  const handleDayPress = (date: Date) => {
+    if (!isDisabled(date)) {
+      onChange(date);
+    }
+  };
+
+  const handleMonthSelect = (monthIndex: number) => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));
+    setViewMode('calendar');
+  };
+
+  const handleYearSelect = (selectedYear: number) => {
+    setCurrentMonth(new Date(selectedYear, currentMonth.getMonth(), 1));
+    setViewMode('months');
+  };
+
+  // Generate year range (10 years before and after current)
+  const yearRange = useMemo(() => {
+    const currentYear = currentMonth.getFullYear();
+    const startYear = Math.floor(currentYear / 10) * 10 - 10;
+    return Array.from({ length: 21 }, (_, i) => startYear + i);
+  }, [currentMonth]);
+
+  const goToPrevYearRange = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear() - 10, currentMonth.getMonth(), 1));
+  };
+
+  const goToNextYearRange = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear() + 10, currentMonth.getMonth(), 1));
+  };
+
+  // Get web props for styled elements
+  const calendarProps = getWebProps([datePickerStyles.calendar, style as any]);
+  const headerProps = getWebProps([datePickerStyles.calendarHeader]);
+  const weekdayRowProps = getWebProps([datePickerStyles.weekdayRow]);
+  const weekdayCellProps = getWebProps([datePickerStyles.weekdayCell]);
+  const gridProps = getWebProps([datePickerStyles.calendarGrid]);
+  const monthGridProps = getWebProps([datePickerStyles.monthGrid]);
+  const yearGridProps = getWebProps([datePickerStyles.yearGrid]);
+
+  // Render month selector
+  if (viewMode === 'months') {
+    return (
+      <div {...calendarProps}>
+        <div {...headerProps}>
+          <Button type="text" size="sm" onPress={() => setViewMode('calendar')} disabled={disabled}>
+            <Icon name="chevron-left" size={16} />
+          </Button>
+          <Button type="text" size="sm" onPress={() => setViewMode('years')} disabled={disabled}>
+            <Text typography="body2" weight="semibold">{year}</Text>
+          </Button>
+          <div style={{ width: 28 }} />
+        </div>
+        <div {...monthGridProps}>
+          {MONTHS.map((month, index) => {
+            const isCurrentMonth = index === currentMonth.getMonth();
+            return (
+              <Button
+                key={month}
+                type={isCurrentMonth ? 'contained' : 'text'}
+                size="sm"
+                onPress={() => handleMonthSelect(index)}
+                disabled={disabled}
+                style={{ minWidth: 48, margin: 2 }}
+              >
+                <Text typography="caption" color={isCurrentMonth ? 'inverse' : 'primary'}>
+                  {month}
+                </Text>
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // Render year selector
+  if (viewMode === 'years') {
+    return (
+      <div {...calendarProps}>
+        <div {...headerProps}>
+          <Button type="text" size="sm" onPress={goToPrevYearRange} disabled={disabled}>
+            <Icon name="chevron-left" size={16} />
+          </Button>
+          <Text typography="body2" weight="semibold">
+            {yearRange[0]} - {yearRange[yearRange.length - 1]}
+          </Text>
+          <Button type="text" size="sm" onPress={goToNextYearRange} disabled={disabled}>
+            <Icon name="chevron-right" size={16} />
+          </Button>
+        </div>
+        <div {...yearGridProps}>
+          {yearRange.map((yr) => {
+            const isCurrentYear = yr === currentMonth.getFullYear();
+            return (
+              <Button
+                key={yr}
+                type={isCurrentYear ? 'contained' : 'text'}
+                size="sm"
+                onPress={() => handleYearSelect(yr)}
+                disabled={disabled}
+                style={{ minWidth: 48, margin: 2 }}
+              >
+                <Text typography="caption" color={isCurrentYear ? 'inverse' : 'primary'}>
+                  {yr}
+                </Text>
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // Render calendar (default)
+  return (
+    <div {...calendarProps}>
+      {/* Header */}
+      <div {...headerProps}>
+        <Button type="text" size="sm" onPress={goToPrevMonth} disabled={disabled}>
+          <Icon name="chevron-left" size={16} />
+        </Button>
+        <Button type="text" size="sm" onPress={() => setViewMode('months')} disabled={disabled}>
+          <Text typography="body2" weight="semibold">
+            {monthShort} {year}
+          </Text>
+        </Button>
+        <Button type="text" size="sm" onPress={goToNextMonth} disabled={disabled}>
+          <Icon name="chevron-right" size={16} />
+        </Button>
+      </div>
+
+      {/* Weekday headers */}
+      <div {...weekdayRowProps}>
+        {WEEKDAYS.map((day, i) => (
+          <div key={i} {...weekdayCellProps}>
+            <Text typography="caption" color="secondary">
+              {day}
+            </Text>
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      <div {...gridProps}>
+        {days.map(({ date, isCurrentMonth }, index) => {
+          const selected = isSelected(date);
+          const today = isToday(date);
+          const dayDisabled = isDisabled(date);
+
+          const dayCellProps = getWebProps([
+            datePickerStyles.dayCell,
+            selected && datePickerStyles.selectedDay,
+            today && !selected && datePickerStyles.todayDay,
+          ].filter(Boolean));
+
+          const cellStyle: React.CSSProperties = {
+            opacity: (!isCurrentMonth || dayDisabled) ? 0.3 : 1,
+          };
+
+          return (
+            <div
+              key={index}
+              {...dayCellProps}
+              style={cellStyle}
+            >
+              <Button
+                type="text"
+                size="sm"
+                onPress={() => handleDayPress(date)}
+                disabled={dayDisabled}
+                style={{ minWidth: 24, minHeight: 24, padding: 0 }}
+              >
+                <Text
+                  typography="caption"
+                  color={selected ? 'inverse' : 'primary'}
+                >
+                  {date.getDate()}
+                </Text>
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/{DateTimePicker.tsx → DateTimePicker.native.tsx}

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text } from '@idealyst/components';
+import { View } from 'react-native';
+import { Text } from '@idealyst/components';
 import { DateInput } from './DateInput';
 import { TimeInput } from './TimeInput';
 import { datePickerStyles } from './styles';

package/src/DateTimePicker.web.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { Text } from '@idealyst/components';
+import { DateInput } from './DateInput';
+import { TimeInput } from './TimeInput';
+import { datePickerStyles } from './styles';
+import type { DateTimePickerProps } from './types';
+
+export const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  value,
+  onChange,
+  label,
+  minDate,
+  maxDate,
+  timeMode = '12h',
+  minuteStep = 1,
+  disabled = false,
+  error,
+  style,
+}) => {
+  const handleDateChange = (date: Date | null) => {
+    if (!date) {
+      onChange(null);
+      return;
+    }
+    // Preserve time from current value, or use noon as default
+    const hours = value?.getHours() ?? 12;
+    const minutes = value?.getMinutes() ?? 0;
+    const updated = new Date(date);
+    updated.setHours(hours, minutes, 0, 0);
+    onChange(updated);
+  };
+
+  const handleTimeChange = (time: Date | null) => {
+    if (!time) {
+      // Only clear time component, keep date if it exists
+      if (value) {
+        const updated = new Date(value);
+        updated.setHours(12, 0, 0, 0);
+        onChange(updated);
+      }
+      return;
+    }
+    // Preserve date from current value, or use today
+    const baseDate = value || new Date();
+    const updated = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate(),
+      time.getHours(),
+      time.getMinutes(),
+      0,
+      0
+    );
+    onChange(updated);
+  };
+
+  // Get web props for styled elements
+  const inputRowProps = getWebProps([datePickerStyles.inputRow]);
+
+  return (
+    <div style={style as React.CSSProperties}>
+      {label && (
+        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+          {label}
+        </Text>
+      )}
+      <div {...inputRowProps}>
+        <div style={{ flex: 1 }}>
+          <DateInput
+            value={value ?? undefined}
+            onChange={handleDateChange}
+            placeholder="MM/DD/YYYY"
+            minDate={minDate}
+            maxDate={maxDate}
+            disabled={disabled}
+            error={error}
+          />
+        </div>
+        <div style={{ flex: 1 }}>
+          <TimeInput
+            value={value ?? undefined}
+            onChange={handleTimeChange}
+            placeholder={timeMode === '24h' ? '14:30' : '2:30 PM'}
+            mode={timeMode}
+            minuteStep={minuteStep}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/TimeInput.native.tsx

@@ -89,38 +89,27 @@ export const TimeInput: React.FC<TimeInputProps> = ({
     onChange(date);
   };
 
+  // Apply variants for input container
+  datePickerStyles.useVariants({
+    disabled,
+    error: !!error,
+  });
+
   return (
     <View style={style}>
       {label && (
-        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+        <Text typography="body2" weight="medium" style={datePickerStyles.labelText}>
           {label}
         </Text>
       )}
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          borderWidth: 1,
-          borderColor: error ? '#ef4444' : '#d1d5db',
-          borderRadius: 6,
-          backgroundColor: disabled ? '#f3f4f6' : 'white',
-          overflow: 'hidden',
-        }}
-      >
+      <View style={datePickerStyles.inputContainer}>
         <RNTextInput
           value={inputValue}
           onChangeText={handleInputChange}
           onBlur={handleInputBlur}
           placeholder={placeholder}
           editable={!disabled}
-          style={{
-            flex: 1,
-            padding: 8,
-            paddingHorizontal: 12,
-            fontSize: 14,
-            backgroundColor: 'transparent',
-            color: disabled ? '#9ca3af' : '#111827',
-          }}
+          style={datePickerStyles.textInput}
         />
         <Button
           type="text"
@@ -133,7 +122,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
         </Button>
       </View>
       {error && (
-        <Text typography="caption" style={{ marginTop: 4, color: '#ef4444' }}>
+        <Text typography="caption" style={datePickerStyles.errorText}>
           {error}
         </Text>
       )}
@@ -144,14 +133,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
         animationType="fade"
         onRequestClose={() => setOpen(false)}
       >
-        <View
-          style={{
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'rgba(0,0,0,0.5)',
-          }}
-        >
+        <View style={datePickerStyles.modalBackdrop}>
           <View style={datePickerStyles.popoverContent}>
             <TimePicker
               value={value ?? undefined}

package/src/TimeInput.web.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
 import { View, Text, Button, Icon } from '@idealyst/components';
 import { PositionedPortal } from '@idealyst/components/internal';
 import { TimePicker } from './TimePicker';
@@ -96,24 +97,24 @@ export const TimeInput: React.FC<TimeInputProps> = ({
     onChange(date);
   };
 
+  // Apply variants for input container
+  datePickerStyles.useVariants({
+    disabled,
+    error: !!error,
+  });
+
+  // Get web props for styled elements
+  const containerProps = getWebProps([datePickerStyles.inputContainer]);
+  const inputProps = getWebProps([datePickerStyles.textInput]);
+
   return (
     <View style={style}>
       {label && (
-        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+        <Text typography="body2" weight="medium" style={datePickerStyles.labelText}>
           {label}
         </Text>
       )}
-      <div
-        ref={triggerRef}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          border: `1px solid ${error ? '#ef4444' : '#d1d5db'}`,
-          borderRadius: 6,
-          backgroundColor: disabled ? '#f3f4f6' : 'white',
-          overflow: 'hidden',
-        }}
-      >
+      <div ref={triggerRef} {...containerProps}>
         <input
           type="text"
           value={inputValue}
@@ -121,15 +122,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
           onBlur={handleInputBlur}
           placeholder={placeholder}
           disabled={disabled}
-          style={{
-            flex: 1,
-            padding: '8px 12px',
-            fontSize: 14,
-            border: 'none',
-            outline: 'none',
-            backgroundColor: 'transparent',
-            color: disabled ? '#9ca3af' : '#111827',
-          }}
+          {...inputProps}
         />
         <Button
           type="text"
@@ -142,7 +135,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
         </Button>
       </div>
       {error && (
-        <Text typography="caption" style={{ marginTop: 4, color: '#ef4444' }}>
+        <Text typography="caption" style={datePickerStyles.errorText}>
           {error}
         </Text>
       )}

package/src/{TimePicker.tsx → TimePicker.native.tsx}

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text, Button, Icon } from '@idealyst/components';
+import { View } from 'react-native';
+import { Text, Button, Icon } from '@idealyst/components';
 import { datePickerStyles } from './styles';
 import type { TimePickerProps } from './types';
 

package/src/TimePicker.web.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { Text, Button, Icon } from '@idealyst/components';
+import { datePickerStyles } from './styles';
+import type { TimePickerProps } from './types';
+
+export const TimePicker: React.FC<TimePickerProps> = ({
+  value,
+  onChange,
+  mode = '12h',
+  minuteStep = 1,
+  disabled = false,
+  style,
+}) => {
+  datePickerStyles.useVariants({ disabled });
+
+  const currentDate = value || new Date();
+  const hours = currentDate.getHours();
+  const minutes = currentDate.getMinutes();
+  const is12Hour = mode === '12h';
+  const isPM = hours >= 12;
+  const displayHours = is12Hour ? (hours % 12 || 12) : hours;
+
+  const updateTime = (newHours: number, newMinutes: number) => {
+    const updated = new Date(currentDate);
+    updated.setHours(newHours, newMinutes, 0, 0);
+    onChange(updated);
+  };
+
+  const incrementHours = () => {
+    const newHours = (hours + 1) % 24;
+    updateTime(newHours, minutes);
+  };
+
+  const decrementHours = () => {
+    const newHours = (hours - 1 + 24) % 24;
+    updateTime(newHours, minutes);
+  };
+
+  const incrementMinutes = () => {
+    const newMinutes = (minutes + minuteStep) % 60;
+    const hourChange = minutes + minuteStep >= 60 ? 1 : 0;
+    updateTime((hours + hourChange) % 24, newMinutes);
+  };
+
+  const decrementMinutes = () => {
+    const newMinutes = (minutes - minuteStep + 60) % 60;
+    const hourChange = minutes - minuteStep < 0 ? -1 : 0;
+    updateTime((hours + hourChange + 24) % 24, newMinutes);
+  };
+
+  const togglePeriod = () => {
+    const newHours = isPM ? hours - 12 : hours + 12;
+    updateTime(newHours, minutes);
+  };
+
+  // Get web props for styled elements
+  const timePickerProps = getWebProps([datePickerStyles.timePicker, style as any]);
+  const timeColumnsProps = getWebProps([datePickerStyles.timeColumns]);
+  const timeColumnProps = getWebProps([datePickerStyles.timeColumn]);
+  const timeSeparatorProps = getWebProps([datePickerStyles.timeSeparator]);
+
+  return (
+    <div {...timePickerProps}>
+      <div {...timeColumnsProps}>
+        {/* Hours column */}
+        <div {...timeColumnProps}>
+          <Button type="text" size="sm" onPress={incrementHours} disabled={disabled}>
+            <Icon name="chevron-up" size={20} />
+          </Button>
+          <Text typography="h3" weight="semibold">
+            {String(displayHours).padStart(2, '0')}
+          </Text>
+          <Button type="text" size="sm" onPress={decrementHours} disabled={disabled}>
+            <Icon name="chevron-down" size={20} />
+          </Button>
+        </div>
+
+        {/* Separator */}
+        <div {...timeSeparatorProps}>
+          <Text typography="h3" weight="semibold">:</Text>
+        </div>
+
+        {/* Minutes column */}
+        <div {...timeColumnProps}>
+          <Button type="text" size="sm" onPress={incrementMinutes} disabled={disabled}>
+            <Icon name="chevron-up" size={20} />
+          </Button>
+          <Text typography="h3" weight="semibold">
+            {String(minutes).padStart(2, '0')}
+          </Text>
+          <Button type="text" size="sm" onPress={decrementMinutes} disabled={disabled}>
+            <Icon name="chevron-down" size={20} />
+          </Button>
+        </div>
+
+        {/* AM/PM toggle for 12-hour mode */}
+        {is12Hour && (
+          <div {...timeColumnProps}>
+            <Button
+              type="outlined"
+              size="sm"
+              onPress={togglePeriod}
+              disabled={disabled}
+            >
+              {isPM ? 'PM' : 'AM'}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/index.native.ts

@@ -1,9 +1,9 @@
 // Components - native platform
-export { DatePicker } from './DatePicker';
-export { TimePicker } from './TimePicker';
+export { DatePicker } from './DatePicker.native';
+export { TimePicker } from './TimePicker.native';
 export { DateInput } from './DateInput.native';
 export { TimeInput } from './TimeInput.native';
-export { DateTimePicker } from './DateTimePicker';
+export { DateTimePicker } from './DateTimePicker.native';
 
 // Types
 export type {

package/src/index.ts

@@ -1,9 +1,9 @@
-// Components
-export { DatePicker } from './DatePicker';
-export { TimePicker } from './TimePicker';
-export { DateInput } from './DateInput';
-export { TimeInput } from './TimeInput';
-export { DateTimePicker } from './DateTimePicker';
+// Components - web platform
+export { DatePicker } from './DatePicker.web';
+export { TimePicker } from './TimePicker.web';
+export { DateInput } from './DateInput.web';
+export { TimeInput } from './TimeInput.web';
+export { DateTimePicker } from './DateTimePicker.web';
 
 // Types
 export type {

package/src/styles.ts

@@ -5,6 +5,11 @@ export type DatePickerVariants = {
   disabled: boolean;
 };
 
+export type InputContainerVariants = {
+  disabled: boolean;
+  error: boolean;
+};
+
 export const datePickerStyles = StyleSheet.create((theme: Theme) => {
   return {
     // Calendar container - compact
@@ -28,18 +33,27 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
       justifyContent: 'space-between',
       marginBottom: 4,
       paddingHorizontal: 2,
+      _web: {
+        display: 'flex',
+      },
     },
 
     calendarTitle: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 2,
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Weekday header row
     weekdayRow: {
       flexDirection: 'row',
       marginBottom: 2,
+      _web: {
+        display: 'flex',
+      },
     },
 
     weekdayCell: {
@@ -47,12 +61,18 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
       height: 20,
       alignItems: 'center',
       justifyContent: 'center',
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Calendar grid
     calendarGrid: {
       flexDirection: 'row',
       flexWrap: 'wrap',
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Month selector grid (3x4)
@@ -61,6 +81,9 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
       flexWrap: 'wrap',
       justifyContent: 'center',
       paddingVertical: 8,
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Year selector grid
@@ -69,6 +92,9 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
       flexWrap: 'wrap',
       justifyContent: 'center',
       paddingVertical: 8,
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Individual day cell - compact
@@ -77,6 +103,9 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
       height: 28,
       alignItems: 'center',
       justifyContent: 'center',
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Time picker container
@@ -97,12 +126,18 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
       flexDirection: 'row',
       gap: 8,
       alignItems: 'center',
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Individual time column (hours, minutes, period)
     timeColumn: {
       alignItems: 'center',
       gap: 2,
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Time separator (colon)
@@ -114,6 +149,9 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
     inputRow: {
       flexDirection: 'row',
       gap: 8,
+      _web: {
+        display: 'flex',
+      },
     },
 
     // Popover content wrapper
@@ -123,5 +161,94 @@ export const datePickerStyles = StyleSheet.create((theme: Theme) => {
       ...theme.shadows.lg,
       overflow: 'hidden',
     },
+
+    // Input container for DateInput/TimeInput
+    inputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderRadius: 6,
+      overflow: 'hidden',
+      borderColor: theme.colors.border.primary,
+      backgroundColor: theme.colors.surface.primary,
+      variants: {
+        disabled: {
+          true: {
+            backgroundColor: theme.colors.surface.secondary,
+          },
+          false: {},
+        },
+        error: {
+          true: {
+            borderColor: theme.intents.error.primary,
+          },
+          false: {},
+        },
+      },
+      _web: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        border: `1px solid ${theme.colors.border.primary}`,
+      },
+    },
+
+    // Text input inside the input container
+    textInput: {
+      flex: 1,
+      padding: 8,
+      paddingHorizontal: 12,
+      fontSize: 14,
+      backgroundColor: 'transparent',
+      color: theme.colors.text.primary,
+      variants: {
+        disabled: {
+          true: {
+            color: theme.colors.text.tertiary,
+          },
+          false: {},
+        },
+      },
+      _web: {
+        outline: 'none',
+        border: 'none',
+      },
+    },
+
+    // Error text below input
+    errorText: {
+      marginTop: 4,
+      color: theme.intents.error.primary,
+    },
+
+    // Label text above input
+    labelText: {
+      marginBottom: 4,
+    },
+
+    // Modal backdrop
+    modalBackdrop: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+
+    // Selected day styling
+    selectedDay: {
+      backgroundColor: theme.intents.primary.primary,
+      borderRadius: 14,
+    },
+
+    selectedDayText: {
+      color: theme.intents.primary.contrast,
+    },
+
+    // Today styling
+    todayDay: {
+      borderWidth: 1,
+      borderColor: theme.intents.primary.primary,
+      borderRadius: 14,
+    },
   } as const;
 });