update remaining tokens and setup error message

Author: snowystinger

packages/@react-spectrum/s2/src/Calendar.tsx

@@ -135,7 +135,10 @@ const cellStyles = style({
     default: 2,
     isFirstWeek: 0
   },
-  paddingBottom: 2,
+  paddingBottom: {
+    default: 2,
+    isLastWeek: 0
+  },
   position: 'relative',
   width: 32,
   height: 32,
@@ -579,20 +582,22 @@ const CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWe
   let {locale} = useLocale();
   let firstDayOfWeek = props.firstDayOfWeek;
   // Calculate the day and week index based on the date.
-  let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);
+  let {dayIndex, weekIndex, lastWeekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);
 
   let calendarStateContext = useContext(CalendarStateContext);
   let rangeCalendarStateContext = useContext(RangeCalendarStateContext);
   let state = (calendarStateContext ?? rangeCalendarStateContext)!;
 
+
   let isFirstWeek = weekIndex === 0;
+  let isLastWeek = weekIndex === lastWeekIndex;
   let isFirstChild = dayIndex === 0;
   let isLastChild = dayIndex === 6;
 
   return (
     <AriaCalendarCell
       date={props.date}
-      className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>
+      className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek, isLastWeek})}>
       {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}
     </AriaCalendarCell>
   );
@@ -677,7 +682,7 @@ function useWeekAndDayIndices(
   locale: string,
   firstDayOfWeek?: DayOfWeek
 ) {
-  let {dayIndex, weekIndex} = useMemo(() => {
+  let result = useMemo(() => {
     // Get the day index within the week (0-6)
     const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);
 
@@ -689,12 +694,15 @@ function useWeekAndDayIndices(
     const dayOfMonth = date.day;
 
     const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);
+    const lastDayOfMonth = startOfMonth(date).add({months: 1}).subtract({days: 1});
+    const lastWeekIndex = Math.floor((lastDayOfMonth.day + monthStartDayOfWeek - 1) / 7);
 
     return {
       weekIndex,
+      lastWeekIndex,
       dayIndex
     };
   }, [date, locale, firstDayOfWeek]);
 
-  return {dayIndex, weekIndex};
+  return result;
 }

packages/@react-spectrum/s2/src/DatePicker.tsx

@@ -57,7 +57,11 @@ export interface DatePickerProps<T extends DateValue> extends
      * The maximum number of months to display at once in the calendar popover, if screen space permits.
      * @default 1
      */
-    maxVisibleMonths?: number
+    maxVisibleMonths?: number,
+    /**
+     * The error message to display when the calendar is invalid.
+     */
+    errorMessage?: ReactNode
 }
 
 export const DatePickerContext = createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);
@@ -208,7 +212,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
             <CalendarPopover shouldFlip={props.shouldFlip}>
               <Calendar
                 visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar} />
+                createCalendar={createCalendar}
+                errorMessage={errorMessage} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
                   <TimeField
@@ -248,7 +253,8 @@ export function CalendarPopover(props: Omit<PopoverProps, 'children'> & {childre
       padding="none">
       <div
         className={style({
-          padding: 16,
+          paddingX: 16,
+          paddingY: 24,
           overflow: 'auto',
           display: 'flex',
           flexDirection: 'column',

packages/@react-spectrum/s2/src/DateRangePicker.tsx

@@ -19,7 +19,7 @@ import {
   PopoverProps
 } from 'react-aria-components';
 import {CalendarButton, CalendarPopover, timeField} from './DatePicker';
-import {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';
+import {createContext, forwardRef, ReactElement, ReactNode, Ref, useContext, useState} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
 import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText} from './Field';
@@ -49,7 +49,11 @@ export interface DateRangePickerProps<T extends DateValue> extends
      * The maximum number of months to display at once in the calendar popover, if screen space permits.
      * @default 1
      */
-    maxVisibleMonths?: number
+    maxVisibleMonths?: number,
+    /**
+     * The error message to display when the calendar is invalid.
+     */
+    errorMessage?: ReactNode
 }
 
 export const DateRangePickerContext = createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
@@ -83,6 +87,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
   } = props;
   let formContext = useContext(FormContext);
   let [buttonHasFocus, setButtonHasFocus] = useState(false);
+  console.log('errorMessage', errorMessage);
 
   return (
     <AriaDateRangePicker
@@ -148,7 +153,8 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
             <CalendarPopover shouldFlip={props.shouldFlip}>
               <RangeCalendar
                 visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar} />
+                createCalendar={createCalendar}
+                errorMessage={errorMessage} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>
                   <TimeField