@idealyst/datepicker 1.1.8 → 1.2.0

package/src/DatePicker.styles.ts

@@ -0,0 +1,218 @@
+/**
+ * DatePicker (calendar) styles using defineStyle with dynamic props.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type DatePickerDynamicProps = {
+  disabled?: boolean;
+};
+
+/**
+ * DatePicker calendar styles with theme reactivity.
+ */
+export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme: Theme) => ({
+  // Calendar container - compact
+  calendar: ({ disabled = false }: DatePickerDynamicProps) => ({
+    padding: 8,
+    backgroundColor: theme.colors.surface.primary,
+    borderRadius: 6,
+    width: 220,
+    opacity: disabled ? 0.6 : 1,
+  }),
+
+  // Calendar header with month/year and navigation
+  calendarHeader: (_props: DatePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+    marginBottom: 4,
+    paddingHorizontal: 2,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  calendarTitle: (_props: DatePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    gap: 2,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Weekday header row
+  weekdayRow: (_props: DatePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    marginBottom: 2,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  weekdayCell: (_props: DatePickerDynamicProps) => ({
+    width: 28,
+    height: 20,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Calendar grid
+  calendarGrid: (_props: DatePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    flexWrap: 'wrap' as const,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Month selector grid (3x4)
+  monthGrid: (_props: DatePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    flexWrap: 'wrap' as const,
+    justifyContent: 'center' as const,
+    paddingVertical: 8,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Year selector grid
+  yearGrid: (_props: DatePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    flexWrap: 'wrap' as const,
+    justifyContent: 'center' as const,
+    paddingVertical: 8,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Individual day cell - compact
+  dayCell: (_props: DatePickerDynamicProps) => ({
+    width: 28,
+    height: 28,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Navigation button
+  navButton: ({ disabled = false }: DatePickerDynamicProps) => ({
+    width: 28,
+    height: 28,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    borderRadius: 4,
+    opacity: disabled ? 0.4 : 1,
+    _web: {
+      display: 'flex',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  // Title button (month/year selector)
+  titleButton: ({ disabled = false }: DatePickerDynamicProps) => ({
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    opacity: disabled ? 0.6 : 1,
+    _web: {
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  titleText: (_props: DatePickerDynamicProps) => ({
+    fontSize: 14,
+    fontWeight: '600' as const,
+    color: theme.colors.text.primary,
+  }),
+
+  // Day button
+  dayButton: ({ disabled = false }: DatePickerDynamicProps) => ({
+    width: 24,
+    height: 24,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    borderRadius: 12,
+    opacity: disabled ? 0.4 : 1,
+    _web: {
+      display: 'flex',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  dayText: (_props: DatePickerDynamicProps) => ({
+    fontSize: 12,
+    color: theme.colors.text.primary,
+  }),
+
+  weekdayText: (_props: DatePickerDynamicProps) => ({
+    fontSize: 11,
+    color: theme.colors.text.secondary,
+  }),
+
+  // Month/Year selector item
+  selectorItem: ({ disabled = false }: DatePickerDynamicProps) => ({
+    minWidth: 48,
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    margin: 2,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    borderRadius: 4,
+    opacity: disabled ? 0.4 : 1,
+    _web: {
+      display: 'flex',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  selectorItemSelected: (_props: DatePickerDynamicProps) => ({
+    backgroundColor: theme.intents.primary.primary,
+  }),
+
+  selectorItemText: (_props: DatePickerDynamicProps) => ({
+    fontSize: 12,
+    color: theme.colors.text.primary,
+  }),
+
+  selectorItemTextSelected: (_props: DatePickerDynamicProps) => ({
+    color: theme.intents.primary.contrast,
+  }),
+
+  // Selected day styling
+  selectedDay: (_props: DatePickerDynamicProps) => ({
+    backgroundColor: theme.intents.primary.primary,
+    borderRadius: 14,
+  }),
+
+  selectedDayText: (_props: DatePickerDynamicProps) => ({
+    color: theme.intents.primary.contrast,
+  }),
+
+  // Today styling
+  todayDay: (_props: DatePickerDynamicProps) => ({
+    borderWidth: 1,
+    borderColor: theme.intents.primary.primary,
+    borderRadius: 14,
+  }),
+
+  // Icon color helper
+  iconColor: (_props: DatePickerDynamicProps) => ({
+    color: theme.colors.text.primary,
+  }),
+}));

package/src/DatePicker.tsx

@@ -0,0 +1,2 @@
+// Platform-specific exports
+export { DatePicker } from './DatePicker.web';

package/src/DatePicker.web.tsx

@@ -1,7 +1,8 @@
 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 { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+import { IconSvg } from './IconSvg.web';
+import { datePickerCalendarStyles } from './DatePicker.styles';
 import type { DatePickerProps } from './types';
 
 const WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
@@ -20,7 +21,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
   const [viewMode, setViewMode] = useState<ViewMode>('calendar');
 
-  datePickerStyles.useVariants({ disabled });
+  const styles = datePickerCalendarStyles;
 
   const { days, monthShort, year } = useMemo(() => {
     const year = currentMonth.getFullYear();
@@ -121,44 +122,75 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     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]);
+  // Get dynamic styles
+  const calendarStyle = (styles.calendar as any)({ disabled });
+  const headerStyle = (styles.calendarHeader as any)({});
+  const weekdayRowStyle = (styles.weekdayRow as any)({});
+  const weekdayCellStyle = (styles.weekdayCell as any)({});
+  const gridStyle = (styles.calendarGrid as any)({});
+  const monthGridStyle = (styles.monthGrid as any)({});
+  const yearGridStyle = (styles.yearGrid as any)({});
+  const navButtonStyle = (styles.navButton as any)({ disabled });
+  const titleButtonStyle = (styles.titleButton as any)({ disabled });
+  const titleTextStyle = (styles.titleText 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 iconColorStyle = (styles.iconColor as any)({});
+
+  // Get web props
+  const calendarProps = getWebProps([calendarStyle, style as any]);
+  const headerProps = getWebProps([headerStyle]);
+  const weekdayRowProps = getWebProps([weekdayRowStyle]);
+  const gridProps = getWebProps([gridStyle]);
+  const monthGridProps = getWebProps([monthGridStyle]);
+  const yearGridProps = getWebProps([yearGridStyle]);
 
   // 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>
+          <button
+            style={navButtonStyle}
+            onClick={() => setViewMode('calendar')}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiChevronLeft} size={16} color={iconColorStyle.color} />
+          </button>
+          <button
+            style={titleButtonStyle}
+            onClick={() => setViewMode('years')}
+            disabled={disabled}
+          >
+            <span style={titleTextStyle}>{year}</span>
+          </button>
           <div style={{ width: 28 }} />
         </div>
         <div {...monthGridProps}>
           {MONTHS.map((month, index) => {
             const isCurrentMonth = index === currentMonth.getMonth();
             return (
-              <Button
+              <button
                 key={month}
-                type={isCurrentMonth ? 'contained' : 'text'}
-                size="sm"
-                onPress={() => handleMonthSelect(index)}
+                style={{
+                  ...selectorItemStyle,
+                  ...(isCurrentMonth ? selectorItemSelectedStyle : {}),
+                }}
+                onClick={() => handleMonthSelect(index)}
                 disabled={disabled}
-                style={{ minWidth: 48, margin: 2 }}
               >
-                <Text typography="caption" color={isCurrentMonth ? 'inverse' : 'primary'}>
+                <span
+                  style={{
+                    ...selectorItemTextStyle,
+                    ...(isCurrentMonth ? selectorItemTextSelectedStyle : {}),
+                  }}
+                >
                   {month}
-                </Text>
-              </Button>
+                </span>
+              </button>
             );
           })}
         </div>
@@ -171,32 +203,46 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     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">
+          <button
+            style={navButtonStyle}
+            onClick={goToPrevYearRange}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiChevronLeft} size={16} color={iconColorStyle.color} />
+          </button>
+          <span 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>
+          </span>
+          <button
+            style={navButtonStyle}
+            onClick={goToNextYearRange}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiChevronRight} size={16} color={iconColorStyle.color} />
+          </button>
         </div>
         <div {...yearGridProps}>
           {yearRange.map((yr) => {
             const isCurrentYear = yr === currentMonth.getFullYear();
             return (
-              <Button
+              <button
                 key={yr}
-                type={isCurrentYear ? 'contained' : 'text'}
-                size="sm"
-                onPress={() => handleYearSelect(yr)}
+                style={{
+                  ...selectorItemStyle,
+                  ...(isCurrentYear ? selectorItemSelectedStyle : {}),
+                }}
+                onClick={() => handleYearSelect(yr)}
                 disabled={disabled}
-                style={{ minWidth: 48, margin: 2 }}
               >
-                <Text typography="caption" color={isCurrentYear ? 'inverse' : 'primary'}>
+                <span
+                  style={{
+                    ...selectorItemTextStyle,
+                    ...(isCurrentYear ? selectorItemTextSelectedStyle : {}),
+                  }}
+                >
                   {yr}
-                </Text>
-              </Button>
+                </span>
+              </button>
             );
           })}
         </div>
@@ -209,26 +255,36 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     <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">
+        <button
+          style={navButtonStyle}
+          onClick={goToPrevMonth}
+          disabled={disabled}
+        >
+          <IconSvg path={mdiChevronLeft} size={16} color={iconColorStyle.color} />
+        </button>
+        <button
+          style={titleButtonStyle}
+          onClick={() => setViewMode('months')}
+          disabled={disabled}
+        >
+          <span style={titleTextStyle}>
             {monthShort} {year}
-          </Text>
-        </Button>
-        <Button type="text" size="sm" onPress={goToNextMonth} disabled={disabled}>
-          <Icon name="chevron-right" size={16} />
-        </Button>
+          </span>
+        </button>
+        <button
+          style={navButtonStyle}
+          onClick={goToNextMonth}
+          disabled={disabled}
+        >
+          <IconSvg path={mdiChevronRight} size={16} color={iconColorStyle.color} />
+        </button>
       </div>
 
       {/* Weekday headers */}
       <div {...weekdayRowProps}>
         {WEEKDAYS.map((day, i) => (
-          <div key={i} {...weekdayCellProps}>
-            <Text typography="caption" color="secondary">
-              {day}
-            </Text>
+          <div key={i} style={weekdayCellStyle}>
+            <span style={weekdayTextStyle}>{day}</span>
           </div>
         ))}
       </div>
@@ -240,36 +296,37 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           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,
-          };
+          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)({});
 
           return (
             <div
               key={index}
-              {...dayCellProps}
-              style={cellStyle}
+              style={{
+                ...dayCellStyle,
+                ...(selected ? selectedDayStyle : {}),
+                ...(today && !selected ? todayDayStyle : {}),
+                opacity: (!isCurrentMonth || dayDisabled) ? 0.3 : 1,
+              }}
             >
-              <Button
-                type="text"
-                size="sm"
-                onPress={() => handleDayPress(date)}
+              <button
+                style={dayButtonStyle}
+                onClick={() => handleDayPress(date)}
                 disabled={dayDisabled}
-                style={{ minWidth: 24, minHeight: 24, padding: 0 }}
               >
-                <Text
-                  typography="caption"
-                  color={selected ? 'inverse' : 'primary'}
+                <span
+                  style={{
+                    ...dayTextStyle,
+                    ...(selected ? selectedDayTextStyle : {}),
+                  }}
                 >
                   {date.getDate()}
-                </Text>
-              </Button>
+                </span>
+              </button>
             </div>
           );
         })}

package/src/DateTimePicker.native.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
-import { Text } from '@idealyst/components';
+import { View, Text } from 'react-native';
 import { DateInput } from './DateInput';
 import { TimeInput } from './TimeInput';
-import { datePickerStyles } from './styles';
+import { dateTimePickerStyles } from './DateTimePicker.styles';
 import type { DateTimePickerProps } from './types';
 
 export const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -18,6 +17,12 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   error,
   style,
 }) => {
+  // Get dynamic styles - call as functions for theme reactivity
+  const styles = dateTimePickerStyles;
+  const inputRowStyle = (styles.inputRow as any)({});
+  const labelTextStyle = (styles.labelText as any)({});
+  const inputColumnStyle = (styles.inputColumn as any)({});
+
   const handleDateChange = (date: Date | null) => {
     if (!date) {
       onChange(null);
@@ -58,12 +63,12 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   return (
     <View style={style}>
       {label && (
-        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+        <Text style={labelTextStyle}>
           {label}
         </Text>
       )}
-      <View style={datePickerStyles.inputRow}>
-        <View style={{ flex: 1 }}>
+      <View style={inputRowStyle}>
+        <View style={inputColumnStyle}>
           <DateInput
             value={value ?? undefined}
             onChange={handleDateChange}
@@ -74,7 +79,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             error={error}
           />
         </View>
-        <View style={{ flex: 1 }}>
+        <View style={inputColumnStyle}>
           <TimeInput
             value={value ?? undefined}
             onChange={handleTimeChange}

package/src/DateTimePicker.styles.ts

@@ -0,0 +1,43 @@
+/**
+ * DateTimePicker styles using defineStyle with dynamic props.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type DateTimePickerDynamicProps = {
+  disabled?: boolean;
+};
+
+/**
+ * DateTimePicker styles with theme reactivity.
+ */
+export const dateTimePickerStyles = defineStyle('DateTimePicker', (theme: Theme) => ({
+  // Input row for datetime picker (contains date and time inputs side by side)
+  inputRow: (_props: DateTimePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    gap: 8,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Label text
+  labelText: (_props: DateTimePickerDynamicProps) => ({
+    marginBottom: 4,
+    fontSize: 14,
+    fontWeight: '500' as const,
+    color: theme.colors.text.primary,
+  }),
+
+  // Input column wrapper
+  inputColumn: (_props: DateTimePickerDynamicProps) => ({
+    flex: 1,
+  }),
+}));

package/src/DateTimePicker.web.tsx

@@ -1,9 +1,8 @@
 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 { dateTimePickerStyles } from './DateTimePicker.styles';
 import type { DateTimePickerProps } from './types';
 
 export const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -18,6 +17,13 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   error,
   style,
 }) => {
+  const styles = dateTimePickerStyles;
+
+  // Get dynamic styles
+  const inputRowStyle = (styles.inputRow as any)({});
+  const labelTextStyle = (styles.labelText as any)({});
+  const inputColumnStyle = (styles.inputColumn as any)({});
+
   const handleDateChange = (date: Date | null) => {
     if (!date) {
       onChange(null);
@@ -55,18 +61,16 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
     onChange(updated);
   };
 
-  // Get web props for styled elements
-  const inputRowProps = getWebProps([datePickerStyles.inputRow]);
+  // Get web props
+  const inputRowProps = getWebProps([inputRowStyle]);
 
   return (
     <div style={style as React.CSSProperties}>
       {label && (
-        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
-          {label}
-        </Text>
+        <span style={labelTextStyle}>{label}</span>
       )}
       <div {...inputRowProps}>
-        <div style={{ flex: 1 }}>
+        <div style={inputColumnStyle}>
           <DateInput
             value={value ?? undefined}
             onChange={handleDateChange}
@@ -77,7 +81,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             error={error}
           />
         </div>
-        <div style={{ flex: 1 }}>
+        <div style={inputColumnStyle}>
           <TimeInput
             value={value ?? undefined}
             onChange={handleTimeChange}