@compsych/mobile-ui 1.0.29 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/DateTimePicker/index.tsx

@@ -18,6 +18,7 @@ export interface DateTimePickerProps {
   onSelectTime: (time: string) => void;
   availableTimes: string[];
   availableTimeLabel: string;
+  availableDates?: string[];
   maxMonthsAhead?: number;
 }
 
@@ -42,6 +43,7 @@ export function DateTimePicker({
   onSelectTime,
   availableTimes,
   availableTimeLabel,
+  availableDates,
   maxMonthsAhead = 1,
 }: DateTimePickerProps) {
   const { colorRoles: cr } = useTheme();
@@ -110,21 +112,23 @@ export function DateTimePicker({
     return cells;
   }, [viewYear, viewMonth]);
 
-  const isDisabled = useCallback(
-    (day: number) => {
-      const d = new Date(viewYear, viewMonth, day);
-      d.setHours(0, 0, 0, 0);
-      return d < today || d > maxDate;
-    },
-    [viewYear, viewMonth, today, maxDate],
+  const availableDatesSet = useMemo(
+    () => (availableDates ? new Set(availableDates) : null),
+    [availableDates],
   );
 
-  const isToday = useCallback(
+  const isDisabled = useCallback(
     (day: number) => {
       const d = new Date(viewYear, viewMonth, day);
-      return toLocalDateString(d) === toLocalDateString(today);
+      d.setHours(0, 0, 0, 0);
+      if (d < today || d > maxDate) return true;
+      if (availableDatesSet) {
+        const dateStr = toLocalDateString(d);
+        return !availableDatesSet.has(dateStr);
+      }
+      return false;
     },
-    [viewYear, viewMonth, today],
+    [viewYear, viewMonth, today, maxDate, availableDatesSet],
   );
 
   const isSelected = useCallback(
@@ -148,7 +152,8 @@ export function DateTimePicker({
   const sysOutline = cr.outline.sysOutline;
   const sysOnSurface = cr.surface.surface.sysOnSurface;
   const sysOnSurfaceVariant = cr.surface.surface.sysOnSurfaceVariant;
-  const sysSurface = cr.surface.surface.sysSurface;
+  const sysSurfaceContainerHighest =
+    cr.surface.surfaceContainer.sysSurfaceContainerHighest;
 
   const prevChevron = I18nManager.isRTL ? '>' : '<';
   const nextChevron = I18nManager.isRTL ? '<' : '>';
@@ -163,7 +168,7 @@ export function DateTimePicker({
       testID="calendar-picker"
       style={[
         styles.card,
-        { borderColor: sysOutline, backgroundColor: sysSurface },
+        { borderColor: sysOutline, backgroundColor: '#FFFFFF' },
       ]}
     >
       {/* Calendar section */}
@@ -237,24 +242,16 @@ export function DateTimePicker({
               }
               const disabled = isDisabled(day);
               const selected = isSelected(day);
-              const todayDay = isToday(day);
 
               const cellStyle = [
                 styles.dayCellInner,
+                !disabled &&
+                  !selected && { backgroundColor: sysSurfaceContainerHighest },
                 selected && {
+                  backgroundColor: '#FFFFFF',
                   borderColor: sysPrimary,
                   borderWidth: 2,
-                  shadowColor: sysPrimary,
-                  shadowOffset: { width: 1, height: 2 },
-                  shadowOpacity: 1,
-                  shadowRadius: 0,
-                  elevation: 2,
                 },
-                !selected &&
-                  todayDay && {
-                    borderColor: sysPrimary,
-                    borderWidth: 1.5,
-                  },
                 disabled && styles.dayCellDisabled,
               ];
 
@@ -316,7 +313,7 @@ export function DateTimePicker({
                       {
                         borderColor: slotSelected ? sysPrimary : sysOutline,
                         borderWidth: slotSelected ? 2 : 1.5,
-                        backgroundColor: sysSurface,
+                        backgroundColor: '#FFFFFF',
                       },
                       slotSelected && {
                         shadowColor: sysPrimary,