@idealyst/datepicker 1.1.8 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "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,20 +36,25 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.1.8",
-    "@idealyst/theme": "^1.1.8",
+    "@idealyst/theme": "^1.2.0",
+    "@mdi/js": ">=7.0.0",
+    "@mdi/react": ">=1.6.0",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=13.0.0",
-    "react-native-unistyles": "^3.0.4"
+    "react-native-unistyles": "^3.0.4",
+    "react-native-vector-icons": ">=10.0.0"
   },
   "peerDependenciesMeta": {
-    "@idealyst/components": {
-      "optional": false
-    },
     "@idealyst/theme": {
       "optional": false
     },
+    "@mdi/js": {
+      "optional": true
+    },
+    "@mdi/react": {
+      "optional": true
+    },
     "react-native": {
       "optional": true
     },
@@ -58,16 +63,21 @@
     },
     "react-native-unistyles": {
       "optional": true
+    },
+    "react-native-vector-icons": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@idealyst/components": "^1.1.8",
-    "@idealyst/theme": "^1.1.8",
+    "@idealyst/theme": "^1.2.0",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "react-native": "^0.80.1",
     "react-native-svg": "^15.15.1",
     "react-native-unistyles": "^3.0.10",
+    "react-native-vector-icons": "^10.2.0",
     "typescript": "^5.0.0"
   },
   "files": [

package/src/DateInput.native.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, TextInput as RNTextInput } from 'react-native';
-import { View, Text, Button, Icon } from '@idealyst/components';
+import { View, Text, TextInput, TouchableOpacity, Modal } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { DatePicker } from './DatePicker';
-import { datePickerStyles } from './styles';
+import { dateTimeInputStyles } from './InputStyles';
 import type { DateInputProps } from './types';
 
 export const DateInput: React.FC<DateInputProps> = ({
@@ -19,6 +19,19 @@ export const DateInput: React.FC<DateInputProps> = ({
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState('');
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const styles = dateTimeInputStyles;
+  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 errorTextStyle = (styles.errorText as any)({});
+  const modalBackdropStyle = (styles.modalBackdrop as any)({});
+  const popoverContentStyle = (styles.popoverContent as any)({});
+  const closeButtonStyle = (styles.closeButton as any)({ disabled: false });
+  const closeButtonTextStyle = (styles.closeButtonText as any)({});
+  const iconStyle = (styles.iconColor as any)({ disabled });
+
   // Format date to string
   const formatDate = (date: Date | undefined): string => {
     if (!date) return '';
@@ -69,40 +82,32 @@ 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={datePickerStyles.labelText}>
+        <Text style={labelTextStyle}>
           {label}
         </Text>
       )}
-      <View style={datePickerStyles.inputContainer}>
-        <RNTextInput
+      <View style={inputContainerStyle}>
+        <TextInput
           value={inputValue}
           onChangeText={handleInputChange}
           onBlur={handleInputBlur}
           placeholder={placeholder}
           editable={!disabled}
-          style={datePickerStyles.textInput}
+          style={textInputStyle}
         />
-        <Button
-          type="text"
-          size="sm"
+        <TouchableOpacity
+          style={iconButtonStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
-          style={{ marginRight: 4 }}
         >
-          <Icon name="calendar" size={18} />
-        </Button>
+          <MaterialCommunityIcons name="calendar" size={18} style={iconStyle} />
+        </TouchableOpacity>
       </View>
       {error && (
-        <Text typography="caption" style={datePickerStyles.errorText}>
+        <Text style={errorTextStyle}>
           {error}
         </Text>
       )}
@@ -113,8 +118,8 @@ export const DateInput: React.FC<DateInputProps> = ({
         animationType="fade"
         onRequestClose={() => setOpen(false)}
       >
-        <View style={datePickerStyles.modalBackdrop}>
-          <View style={datePickerStyles.popoverContent}>
+        <View style={modalBackdropStyle}>
+          <View style={popoverContentStyle}>
             <DatePicker
               value={value ?? undefined}
               onChange={handleDateSelect}
@@ -122,13 +127,12 @@ export const DateInput: React.FC<DateInputProps> = ({
               maxDate={maxDate}
               disabled={disabled}
             />
-            <Button
-              type="text"
+            <TouchableOpacity
+              style={closeButtonStyle}
               onPress={() => setOpen(false)}
-              style={{ marginTop: 8 }}
             >
-              Close
-            </Button>
+              <Text style={closeButtonTextStyle}>Close</Text>
+            </TouchableOpacity>
           </View>
         </View>
       </Modal>

package/src/DateInput.web.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
-import { View, Text, Button, Icon } from '@idealyst/components';
+import { mdiCalendar } from '@mdi/js';
 import { PositionedPortal } from '@idealyst/components/internal';
+import { IconSvg } from './IconSvg.web';
 import { DatePicker } from './DatePicker';
-import { datePickerStyles } from './styles';
+import { dateTimeInputStyles } from './InputStyles';
 import type { DateInputProps } from './types';
 
 export const DateInput: React.FC<DateInputProps> = ({
@@ -21,6 +22,17 @@ export const DateInput: React.FC<DateInputProps> = ({
   const [inputValue, setInputValue] = useState('');
   const triggerRef = useRef<HTMLDivElement>(null);
 
+  const styles = dateTimeInputStyles;
+
+  // Get dynamic styles
+  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 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 => {
     if (!date) return '';
@@ -72,22 +84,13 @@ 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]);
+  // Get web props
+  const containerProps = getWebProps([inputContainerStyle]);
 
   return (
-    <View style={style}>
+    <div style={style as React.CSSProperties}>
       {label && (
-        <Text typography="body2" weight="medium" style={datePickerStyles.labelText}>
-          {label}
-        </Text>
+        <span style={labelTextStyle}>{label}</span>
       )}
       <div ref={triggerRef} {...containerProps}>
         <input
@@ -97,22 +100,18 @@ export const DateInput: React.FC<DateInputProps> = ({
           onBlur={handleInputBlur}
           placeholder={placeholder}
           disabled={disabled}
-          {...inputProps}
+          style={textInputStyle}
         />
-        <Button
-          type="text"
-          size="sm"
-          onPress={() => !disabled && setOpen(!open)}
+        <button
+          style={iconButtonStyle}
+          onClick={() => !disabled && setOpen(!open)}
           disabled={disabled}
-          style={{ marginRight: 4 }}
         >
-          <Icon name="calendar" size={18} />
-        </Button>
+          <IconSvg path={mdiCalendar} size={18} color={iconColorStyle.color} />
+        </button>
       </div>
       {error && (
-        <Text typography="caption" style={datePickerStyles.errorText}>
-          {error}
-        </Text>
+        <span style={errorTextStyle}>{error}</span>
       )}
 
       <PositionedPortal
@@ -124,7 +123,7 @@ export const DateInput: React.FC<DateInputProps> = ({
         onEscapeKey={() => setOpen(false)}
         zIndex={9999}
       >
-        <View style={datePickerStyles.popoverContent}>
+        <div style={popoverContentStyle}>
           <DatePicker
             value={value ?? undefined}
             onChange={handleDateSelect}
@@ -132,8 +131,8 @@ export const DateInput: React.FC<DateInputProps> = ({
             maxDate={maxDate}
             disabled={disabled}
           />
-        </View>
+        </div>
       </PositionedPortal>
-    </View>
+    </div>
   );
 };

package/src/DatePicker.native.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
-import { View } from 'react-native';
-import { Text, Button, Icon } from '@idealyst/components';
-import { datePickerStyles } from './styles';
+import { View, Text, TouchableOpacity } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { datePickerCalendarStyles } from './DatePicker.styles';
 import type { DatePickerProps } from './types';
 
 const WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
@@ -20,7 +20,30 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
   const [viewMode, setViewMode] = useState<ViewMode>('calendar');
 
-  datePickerStyles.useVariants({ disabled });
+  // Get dynamic styles - call as functions for theme reactivity
+  const styles = datePickerCalendarStyles;
+  const calendarStyle = (styles.calendar as any)({ disabled });
+  const calendarHeaderStyle = (styles.calendarHeader as any)({});
+  const weekdayRowStyle = (styles.weekdayRow as any)({});
+  const weekdayCellStyle = (styles.weekdayCell as any)({});
+  const calendarGridStyle = (styles.calendarGrid as any)({});
+  const monthGridStyle = (styles.monthGrid as any)({});
+  const yearGridStyle = (styles.yearGrid as any)({});
+  const dayCellStyle = (styles.dayCell as any)({});
+  const selectedDayStyle = (styles.selectedDay as any)({});
+  const selectedDayTextStyle = (styles.selectedDayText as any)({});
+  const todayDayStyle = (styles.todayDay as any)({});
+  const navButtonStyle = (styles.navButton as any)({ disabled });
+  const titleButtonStyle = (styles.titleButton as any)({ disabled });
+  const titleTextStyle = (styles.titleText as any)({});
+  const dayButtonStyle = (styles.dayButton as any)({ disabled: false });
+  const dayTextStyle = (styles.dayText as any)({});
+  const weekdayTextStyle = (styles.weekdayText as any)({});
+  const selectorItemStyle = (styles.selectorItem as any)({ disabled });
+  const selectorItemSelectedStyle = (styles.selectorItemSelected as any)({});
+  const selectorItemTextStyle = (styles.selectorItemText as any)({});
+  const selectorItemTextSelectedStyle = (styles.selectorItemTextSelected as any)({});
+  const iconStyle = (styles.iconColor as any)({});
 
   const { days, monthShort, year } = useMemo(() => {
     const year = currentMonth.getFullYear();
@@ -124,32 +147,46 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   // Render month selector
   if (viewMode === 'months') {
     return (
-      <View style={[datePickerStyles.calendar, style]}>
-        <View style={datePickerStyles.calendarHeader}>
-          <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>
+      <View style={[calendarStyle, style]}>
+        <View style={calendarHeaderStyle}>
+          <TouchableOpacity
+            style={navButtonStyle}
+            onPress={() => setViewMode('calendar')}
+            disabled={disabled}
+          >
+            <MaterialCommunityIcons name="chevron-left" size={16} style={iconStyle} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={titleButtonStyle}
+            onPress={() => setViewMode('years')}
+            disabled={disabled}
+          >
+            <Text style={titleTextStyle}>{year}</Text>
+          </TouchableOpacity>
           <View style={{ width: 28 }} />
         </View>
-        <View style={datePickerStyles.monthGrid}>
+        <View style={monthGridStyle}>
           {MONTHS.map((month, index) => {
             const isCurrentMonth = index === currentMonth.getMonth();
             return (
-              <Button
+              <TouchableOpacity
                 key={month}
-                type={isCurrentMonth ? 'contained' : 'text'}
-                size="sm"
+                style={[
+                  selectorItemStyle,
+                  isCurrentMonth && selectorItemSelectedStyle,
+                ]}
                 onPress={() => handleMonthSelect(index)}
                 disabled={disabled}
-                style={{ minWidth: 48, margin: 2 }}
               >
-                <Text typography="caption" color={isCurrentMonth ? 'inverse' : 'primary'}>
+                <Text
+                  style={[
+                    selectorItemTextStyle,
+                    isCurrentMonth && selectorItemTextSelectedStyle,
+                  ]}
+                >
                   {month}
                 </Text>
-              </Button>
+              </TouchableOpacity>
             );
           })}
         </View>
@@ -160,34 +197,48 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   // Render year selector
   if (viewMode === 'years') {
     return (
-      <View style={[datePickerStyles.calendar, style]}>
-        <View style={datePickerStyles.calendarHeader}>
-          <Button type="text" size="sm" onPress={goToPrevYearRange} disabled={disabled}>
-            <Icon name="chevron-left" size={16} />
-          </Button>
-          <Text typography="body2" weight="semibold">
+      <View style={[calendarStyle, style]}>
+        <View style={calendarHeaderStyle}>
+          <TouchableOpacity
+            style={navButtonStyle}
+            onPress={goToPrevYearRange}
+            disabled={disabled}
+          >
+            <MaterialCommunityIcons name="chevron-left" size={16} style={iconStyle} />
+          </TouchableOpacity>
+          <Text style={titleTextStyle}>
             {yearRange[0]} - {yearRange[yearRange.length - 1]}
           </Text>
-          <Button type="text" size="sm" onPress={goToNextYearRange} disabled={disabled}>
-            <Icon name="chevron-right" size={16} />
-          </Button>
+          <TouchableOpacity
+            style={navButtonStyle}
+            onPress={goToNextYearRange}
+            disabled={disabled}
+          >
+            <MaterialCommunityIcons name="chevron-right" size={16} style={iconStyle} />
+          </TouchableOpacity>
         </View>
-        <View style={datePickerStyles.yearGrid}>
+        <View style={yearGridStyle}>
           {yearRange.map((yr) => {
             const isCurrentYear = yr === currentMonth.getFullYear();
             return (
-              <Button
+              <TouchableOpacity
                 key={yr}
-                type={isCurrentYear ? 'contained' : 'text'}
-                size="sm"
+                style={[
+                  selectorItemStyle,
+                  isCurrentYear && selectorItemSelectedStyle,
+                ]}
                 onPress={() => handleYearSelect(yr)}
                 disabled={disabled}
-                style={{ minWidth: 48, margin: 2 }}
               >
-                <Text typography="caption" color={isCurrentYear ? 'inverse' : 'primary'}>
+                <Text
+                  style={[
+                    selectorItemTextStyle,
+                    isCurrentYear && selectorItemTextSelectedStyle,
+                  ]}
+                >
                   {yr}
                 </Text>
-              </Button>
+              </TouchableOpacity>
             );
           })}
         </View>
@@ -197,65 +248,76 @@ export const DatePicker: React.FC<DatePickerProps> = ({
 
   // Render calendar (default)
   return (
-    <View style={[datePickerStyles.calendar, style]}>
+    <View style={[calendarStyle, style]}>
       {/* Header */}
-      <View style={datePickerStyles.calendarHeader}>
-        <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">
+      <View style={calendarHeaderStyle}>
+        <TouchableOpacity
+          style={navButtonStyle}
+          onPress={goToPrevMonth}
+          disabled={disabled}
+        >
+          <MaterialCommunityIcons name="chevron-left" size={16} style={iconStyle} />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={titleButtonStyle}
+          onPress={() => setViewMode('months')}
+          disabled={disabled}
+        >
+          <Text style={titleTextStyle}>
             {monthShort} {year}
           </Text>
-        </Button>
-        <Button type="text" size="sm" onPress={goToNextMonth} disabled={disabled}>
-          <Icon name="chevron-right" size={16} />
-        </Button>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={navButtonStyle}
+          onPress={goToNextMonth}
+          disabled={disabled}
+        >
+          <MaterialCommunityIcons name="chevron-right" size={16} style={iconStyle} />
+        </TouchableOpacity>
       </View>
 
       {/* Weekday headers */}
-      <View style={datePickerStyles.weekdayRow}>
+      <View style={weekdayRowStyle}>
         {WEEKDAYS.map((day, i) => (
-          <View key={i} style={datePickerStyles.weekdayCell}>
-            <Text typography="caption" color="secondary">
-              {day}
-            </Text>
+          <View key={i} style={weekdayCellStyle}>
+            <Text style={weekdayTextStyle}>{day}</Text>
           </View>
         ))}
       </View>
 
       {/* Calendar grid */}
-      <View style={datePickerStyles.calendarGrid}>
+      <View style={calendarGridStyle}>
         {days.map(({ date, isCurrentMonth }, index) => {
           const selected = isSelected(date);
           const today = isToday(date);
           const dayDisabled = isDisabled(date);
+          const disabledDayButtonStyle = (styles.dayButton as any)({ disabled: dayDisabled });
 
           return (
             <View
               key={index}
               style={[
-                datePickerStyles.dayCell,
-                selected && datePickerStyles.selectedDay,
+                dayCellStyle,
+                selected && selectedDayStyle,
                 !isCurrentMonth && { opacity: 0.3 },
-                today && !selected && datePickerStyles.todayDay,
+                today && !selected && todayDayStyle,
                 dayDisabled && { opacity: 0.3 },
               ]}
             >
-              <Button
-                type="text"
-                size="sm"
+              <TouchableOpacity
+                style={[dayButtonStyle, dayDisabled && disabledDayButtonStyle]}
                 onPress={() => handleDayPress(date)}
                 disabled={dayDisabled}
-                style={{ minWidth: 24, minHeight: 24, padding: 0 }}
               >
                 <Text
-                  typography="caption"
-                  color={selected ? 'inverse' : 'primary'}
+                  style={[
+                    dayTextStyle,
+                    selected && selectedDayTextStyle,
+                  ]}
                 >
                   {date.getDate()}
                 </Text>
-              </Button>
+              </TouchableOpacity>
             </View>
           );
         })}