@idealyst/datepicker 1.2.119 → 1.2.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.2.119",
+  "version": "1.2.121",
   "description": "Cross-platform date and time picker components for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/datepicker#readme",
   "readme": "README.md",
@@ -36,7 +36,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.119",
+    "@idealyst/theme": "^1.2.121",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.6.0",
     "react": ">=16.8.0",
@@ -69,7 +69,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.119",
+    "@idealyst/theme": "^1.2.121",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/DateInput.native.tsx

@@ -13,6 +13,7 @@ export const DateInput: React.FC<DateInputProps> = ({
   minDate,
   maxDate,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -98,23 +99,43 @@ export const DateInput: React.FC<DateInputProps> = ({
           {label}
         </Text>
       )}
-      <View style={inputContainerStyle}>
-        <TextInput
-          value={inputValue}
-          onChangeText={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          editable={!disabled}
-          style={textInputStyle}
-        />
+      {pressable ? (
         <TouchableOpacity
-          style={iconButtonStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
+          activeOpacity={0.7}
         >
-          <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
+          <View style={inputContainerStyle} pointerEvents="none">
+            <TextInput
+              value={formatDate(value ?? undefined)}
+              placeholder={placeholder}
+              editable={false}
+              style={textInputStyle}
+            />
+            <View style={iconButtonStyle}>
+              <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
+            </View>
+          </View>
         </TouchableOpacity>
-      </View>
+      ) : (
+        <View style={inputContainerStyle}>
+          <TextInput
+            value={inputValue}
+            onChangeText={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            editable={!disabled}
+            style={textInputStyle}
+          />
+          <TouchableOpacity
+            style={iconButtonStyle}
+            onPress={() => !disabled && setOpen(true)}
+            disabled={disabled}
+          >
+            <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
+          </TouchableOpacity>
+        </View>
+      )}
       {error && (
         <Text style={errorTextStyle}>
           {error}

package/src/DateInput.web.tsx

@@ -18,6 +18,7 @@ export const DateInput: React.FC<DateInputProps> = ({
   minDate,
   maxDate,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -113,25 +114,47 @@ export const DateInput: React.FC<DateInputProps> = ({
       {label && (
         <span {...labelProps}>{label}</span>
       )}
-      <div {...containerProps} ref={triggerRef}>
-        <input
-          type="text"
-          value={inputValue}
-          onChange={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          disabled={disabled}
-          {...inputProps}
-        />
-        <button
-          type="button"
-          {...iconButtonProps}
+      {pressable ? (
+        <div
+          ref={triggerRef}
           onClick={() => !disabled && setOpen(!open)}
-          disabled={disabled}
+          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
         >
-          <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
-        </button>
-      </div>
+          <div {...containerProps} style={{ pointerEvents: 'none' }}>
+            <input
+              type="text"
+              value={formatDate(value ?? undefined)}
+              placeholder={placeholder}
+              readOnly
+              tabIndex={-1}
+              {...inputProps}
+            />
+            <div {...iconButtonProps}>
+              <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div {...containerProps} ref={triggerRef}>
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...inputProps}
+          />
+          <button
+            type="button"
+            {...iconButtonProps}
+            onClick={() => !disabled && setOpen(!open)}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
+          </button>
+        </div>
+      )}
       {error && (
         <span {...errorProps}>{error}</span>
       )}

package/src/DatePicker.native.tsx

@@ -2,19 +2,27 @@ import React, { useMemo, useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { datePickerCalendarStyles } from './DatePicker.styles';
-import type { DatePickerProps } from './types';
+import type { DatePickerProps, DayIndicator } 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';
 
+function formatDateKey(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
 export const DatePicker: React.FC<DatePickerProps> = ({
   value,
   onChange,
   minDate,
   maxDate,
   disabled = false,
+  indicators,
   style,
 }) => {
   const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
@@ -44,6 +52,8 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const selectorItemTextStyle = (styles.selectorItemText as any)({});
   const selectorItemTextSelectedStyle = (styles.selectorItemTextSelected as any)({});
   const iconStyle = (styles.iconColor as any)({});
+  const indicatorRowStyle = (styles.indicatorRow as any)({});
+  const indicatorStyle = (styles.indicator as any)({});
 
   const { days, monthShort, year } = useMemo(() => {
     const year = currentMonth.getFullYear();
@@ -157,6 +167,13 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     setCurrentMonth(new Date(currentMonth.getFullYear() + 10, currentMonth.getMonth(), 1));
   };
 
+  // Helper to get indicators for a date
+  const getIndicators = (date: Date): DayIndicator[] => {
+    if (!indicators) return [];
+    const key = formatDateKey(date);
+    return indicators[key] || [];
+  };
+
   // Render month selector
   if (viewMode === 'months') {
     return (
@@ -176,7 +193,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           >
             <Text style={titleTextStyle}>{year}</Text>
           </TouchableOpacity>
-          <View style={{ width: 28 }} />
+          <View style={{ width: 32 }} />
         </View>
         <View style={monthGridStyle}>
           {MONTHS.map((month, index) => {
@@ -305,20 +322,24 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           const today = isToday(date);
           const dayDisabled = isDisabled(date);
           const disabledDayButtonStyle = (styles.dayButton as any)({ disabled: dayDisabled });
+          const dayIndicators = getIndicators(date);
 
           return (
             <View
               key={index}
               style={[
                 dayCellStyle,
-                selected && selectedDayStyle,
                 !isCurrentMonth && { opacity: 0.3 },
-                today && !selected && todayDayStyle,
                 dayDisabled && { opacity: 0.3 },
               ]}
             >
               <TouchableOpacity
-                style={[dayButtonStyle, dayDisabled && disabledDayButtonStyle]}
+                style={[
+                  dayButtonStyle,
+                  dayDisabled && disabledDayButtonStyle,
+                  selected && selectedDayStyle,
+                  today && !selected && todayDayStyle,
+                ]}
                 onPress={() => handleDayPress(date)}
                 disabled={dayDisabled}
               >
@@ -331,6 +352,14 @@ export const DatePicker: React.FC<DatePickerProps> = ({
                   {date.getDate()}
                 </Text>
               </TouchableOpacity>
+              <View style={indicatorRowStyle}>
+                {dayIndicators.slice(0, 3).map((ind, i) => (
+                  <View
+                    key={ind.key ?? i}
+                    style={[indicatorStyle, { backgroundColor: ind.color }]}
+                  />
+                ))}
+              </View>
             </View>
           );
         })}

package/src/DatePicker.styles.ts

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

package/src/DatePicker.web.tsx

@@ -3,19 +3,27 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
 import { IconSvg } from './IconSvg.web';
 import { datePickerCalendarStyles } from './DatePicker.styles';
-import type { DatePickerProps } from './types';
+import type { DatePickerProps, DayIndicator } 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';
 
+function formatDateKey(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
 export const DatePicker: React.FC<DatePickerProps> = ({
   value,
   onChange,
   minDate,
   maxDate,
   disabled = false,
+  indicators,
   style,
 }) => {
   const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
@@ -157,6 +165,8 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const selectorItemTextStyle = (styles.selectorItemText as any)({});
   const selectorItemTextSelectedStyle = (styles.selectorItemTextSelected as any)({});
   const iconColorStyle = (styles.iconColor as any)({});
+  const indicatorRowStyle = (styles.indicatorRow as any)({});
+  const indicatorStyle = (styles.indicator as any)({});
 
   // Get web props for all elements
   const calendarProps = getWebProps([calendarStyle, style as any]);
@@ -174,6 +184,14 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const selectorItemSelectedProps = getWebProps([selectorItemStyle, selectorItemSelectedStyle]);
   const selectorItemTextProps = getWebProps([selectorItemTextStyle]);
   const selectorItemTextSelectedProps = getWebProps([selectorItemTextStyle, selectorItemTextSelectedStyle]);
+  const indicatorRowProps = getWebProps([indicatorRowStyle]);
+
+  // Helper to get indicators for a date
+  const getIndicators = (date: Date): DayIndicator[] => {
+    if (!indicators) return [];
+    const key = formatDateKey(date);
+    return indicators[key] || [];
+  };
 
   // Render month selector
   if (viewMode === 'months') {
@@ -196,7 +214,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           >
             <span {...titleTextProps}>{year}</span>
           </button>
-          <div style={{ width: 28 }} />
+          <div style={{ width: 32 }} />
         </div>
         <div {...monthGridProps}>
           {MONTHS.map((month, index) => {
@@ -332,6 +350,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           const selected = isSelected(date);
           const today = isToday(date);
           const dayDisabled = isDisabled(date);
+          const dayIndicators = getIndicators(date);
 
           // Get appropriate button props (className and ref only)
           const buttonProps = dayDisabled
@@ -343,18 +362,28 @@ export const DatePicker: React.FC<DatePickerProps> = ({
                 : dayButtonProps;
 
           return (
-            <button
-              key={index}
-              type="button"
-              className={buttonProps.className}
-              style={{ opacity: (!isCurrentMonthDay || dayDisabled) ? 0.3 : 1 }}
-              onClick={() => handleDayPress(date)}
-              disabled={dayDisabled}
-            >
-              <span {...(selected ? selectedDayTextProps : dayTextProps)}>
-                {date.getDate()}
-              </span>
-            </button>
+            <div key={index} {...dayCellProps}>
+              <button
+                type="button"
+                className={buttonProps.className}
+                style={{ opacity: (!isCurrentMonthDay || dayDisabled) ? 0.3 : 1 }}
+                onClick={() => handleDayPress(date)}
+                disabled={dayDisabled}
+              >
+                <span {...(selected ? selectedDayTextProps : dayTextProps)}>
+                  {date.getDate()}
+                </span>
+              </button>
+              <div {...indicatorRowProps}>
+                {dayIndicators.slice(0, 3).map((ind, i) => (
+                  <div
+                    key={ind.key ?? i}
+                    className={getWebProps([indicatorStyle]).className}
+                    style={{ backgroundColor: ind.color }}
+                  />
+                ))}
+              </div>
+            </div>
           );
         })}
       </div>

package/src/DateTimePicker.native.tsx

@@ -14,6 +14,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   timeMode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -91,6 +92,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             minDate={minDate}
             maxDate={maxDate}
             disabled={disabled}
+            pressable={pressable}
             error={error}
             size={size}
           />
@@ -103,6 +105,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             mode={timeMode}
             minuteStep={minuteStep}
             disabled={disabled}
+            pressable={pressable}
             size={size}
           />
         </View>

package/src/DateTimePicker.web.tsx

@@ -14,6 +14,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   timeMode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -95,6 +96,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             minDate={minDate}
             maxDate={maxDate}
             disabled={disabled}
+            pressable={pressable}
             error={error}
             size={size}
           />
@@ -107,6 +109,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             mode={timeMode}
             minuteStep={minuteStep}
             disabled={disabled}
+            pressable={pressable}
             size={size}
           />
         </div>

package/src/TimeInput.native.tsx

@@ -13,6 +13,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   mode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -118,23 +119,43 @@ export const TimeInput: React.FC<TimeInputProps> = ({
           {label}
         </Text>
       )}
-      <View style={inputContainerStyle}>
-        <TextInput
-          value={inputValue}
-          onChangeText={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          editable={!disabled}
-          style={textInputStyle}
-        />
+      {pressable ? (
         <TouchableOpacity
-          style={iconButtonStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
+          activeOpacity={0.7}
         >
-          <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
+          <View style={inputContainerStyle} pointerEvents="none">
+            <TextInput
+              value={formatTime(value ?? undefined)}
+              placeholder={placeholder}
+              editable={false}
+              style={textInputStyle}
+            />
+            <View style={iconButtonStyle}>
+              <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
+            </View>
+          </View>
         </TouchableOpacity>
-      </View>
+      ) : (
+        <View style={inputContainerStyle}>
+          <TextInput
+            value={inputValue}
+            onChangeText={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            editable={!disabled}
+            style={textInputStyle}
+          />
+          <TouchableOpacity
+            style={iconButtonStyle}
+            onPress={() => !disabled && setOpen(true)}
+            disabled={disabled}
+          >
+            <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
+          </TouchableOpacity>
+        </View>
+      )}
       {error && (
         <Text style={errorTextStyle}>
           {error}

package/src/TimeInput.web.tsx

@@ -17,6 +17,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   mode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -137,25 +138,47 @@ export const TimeInput: React.FC<TimeInputProps> = ({
       {label && (
         <span {...labelProps}>{label}</span>
       )}
-      <div {...containerProps} ref={triggerRef}>
-        <input
-          type="text"
-          value={inputValue}
-          onChange={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          disabled={disabled}
-          {...inputProps}
-        />
-        <button
-          type="button"
-          {...iconButtonProps}
+      {pressable ? (
+        <div
+          ref={triggerRef}
           onClick={() => !disabled && setOpen(!open)}
-          disabled={disabled}
+          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
         >
-          <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
-        </button>
-      </div>
+          <div {...containerProps} style={{ pointerEvents: 'none' }}>
+            <input
+              type="text"
+              value={formatTime(value ?? undefined)}
+              placeholder={placeholder}
+              readOnly
+              tabIndex={-1}
+              {...inputProps}
+            />
+            <div {...iconButtonProps}>
+              <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div {...containerProps} ref={triggerRef}>
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...inputProps}
+          />
+          <button
+            type="button"
+            {...iconButtonProps}
+            onClick={() => !disabled && setOpen(!open)}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
+          </button>
+        </div>
+      )}
       {error && (
         <span {...errorProps}>{error}</span>
       )}

package/src/index.native.ts

@@ -12,4 +12,5 @@ export type {
   DateInputProps,
   TimeInputProps,
   DateTimePickerProps,
+  DayIndicator,
 } from './types';

package/src/index.ts

@@ -12,4 +12,5 @@ export type {
   DateInputProps,
   TimeInputProps,
   DateTimePickerProps,
+  DayIndicator,
 } from './types';

package/src/types.ts

@@ -34,6 +34,8 @@ export interface DateInputProps {
   minDate?: Date;
   maxDate?: Date;
   disabled?: boolean;
+  /** When true, the entire input area is pressable to open the calendar instead of being a text input. */
+  pressable?: boolean;
   error?: string;
   size?: Size;
   style?: ViewStyle;
@@ -47,6 +49,8 @@ export interface TimeInputProps {
   mode?: '12h' | '24h';
   minuteStep?: number;
   disabled?: boolean;
+  /** When true, the entire input area is pressable to open the time picker instead of being a text input. */
+  pressable?: boolean;
   error?: string;
   size?: Size;
   style?: ViewStyle;
@@ -61,6 +65,8 @@ export interface DateTimePickerProps {
   timeMode?: '12h' | '24h';
   minuteStep?: number;
   disabled?: boolean;
+  /** When true, both input areas are pressable to open their pickers instead of being text inputs. */
+  pressable?: boolean;
   error?: string;
   size?: Size;
   style?: ViewStyle;