react-native-system-ui 0.0.7 → 1.0.0

package/dist/es/components/calendar/Calendar.js

@@ -1,52 +1,51 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
-import { isText } from '../../utils/validate';
+import { renderTextOrNode } from '../../utils';
+import { isRenderable } from '../../utils/validate';
 import Popup from '../popup';
+import { useLocale } from '../config-provider/useLocale';
 import { useCalendarTokens } from './tokens';
 const DAY_MS = 24 * 60 * 60 * 1000;
 const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 const startOfDay = date => {
-  const next = new Date(date);
-  next.setHours(0, 0, 0, 0);
-  return next;
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
 };
 const daysBetween = (a, b) => Math.round(Math.abs(startOfDay(a).getTime() - startOfDay(b).getTime()) / DAY_MS);
-const toArrayValue = value => {
-  if (!value) return [];
-  return Array.isArray(value) ? value.filter(Boolean).map(date => new Date(date)) : [new Date(value)];
-};
+const toArrayValue = value => !value ? [] : Array.isArray(value) ? value.filter(Boolean).map(d => new Date(d)) : [new Date(value)];
 const DEFAULT_MIN = new Date(new Date().getFullYear() - 10, 0, 1);
 const DEFAULT_MAX = new Date(new Date().getFullYear() + 10, 11, 31);
-const Calendar = props => {
+const CalendarImpl = props => {
   const {
     tokensOverride,
     value: _value,
     defaultValue: _defaultValue,
     minDate = DEFAULT_MIN,
     maxDate = DEFAULT_MAX,
-    type: typeProp,
-    title: titleProp,
-    showSubtitle: showSubtitleProp,
-    showHeader: showHeaderProp,
-    showConfirm: showConfirmProp,
-    confirmText: confirmTextProp,
-    weekStartsOn: weekStartsOnProp,
+    type,
+    title,
+    showSubtitle,
+    showHeader,
+    showConfirm,
+    confirmText,
+    weekStartsOn,
     weekdays,
     formatMonthTitle,
-    allowSameDay: allowSameDayProp,
+    allowSameDay,
     maxRange,
     onOverRange,
-    poppable: poppableProp,
+    poppable,
     visible: _visible,
     defaultVisible: _defaultVisible,
     onVisibleChange: _onVisibleChange,
-    closeOnClickOverlay: closeOnClickOverlayProp,
-    closeOnConfirm: closeOnConfirmProp,
-    popupPlacement: popupPlacementProp,
-    popupRound: popupRoundProp,
-    popupProps: popupPropsOverrides,
+    closeOnClickOverlay,
+    closeOnConfirm,
+    popupPlacement,
+    popupRound,
+    popupProps,
     onOpen,
     onOpened,
     onClose,
@@ -57,20 +56,22 @@ const Calendar = props => {
     style,
     ...rest
   } = props;
+  const locale = useLocale();
+  const calendarLocale = locale?.vanCalendar;
   const tokens = useCalendarTokens(tokensOverride);
-  const title = titleProp ?? tokens.defaults.title;
-  const showSubtitle = showSubtitleProp ?? tokens.defaults.showSubtitle;
-  const showHeader = showHeaderProp ?? tokens.defaults.showHeader;
-  const confirmText = confirmTextProp ?? tokens.defaults.confirmText;
-  const weekStartsOn = weekStartsOnProp ?? tokens.defaults.weekStartsOn;
-  const allowSameDay = allowSameDayProp ?? tokens.defaults.allowSameDay;
-  const poppable = poppableProp ?? tokens.defaults.poppable;
-  const closeOnClickOverlay = closeOnClickOverlayProp ?? tokens.defaults.closeOnClickOverlay;
-  const closeOnConfirm = closeOnConfirmProp ?? tokens.defaults.closeOnConfirm;
-  const popupPlacement = popupPlacementProp ?? tokens.defaults.popupPlacement;
-  const popupRound = popupRoundProp ?? tokens.defaults.popupRound;
-  const type = typeProp ?? tokens.defaults.type;
-  const showConfirm = showConfirmProp ?? tokens.defaults.showConfirm[type];
+  const resolvedTitle = title ?? calendarLocale?.title ?? tokens.defaults.title;
+  const resolvedShowSubtitle = showSubtitle ?? tokens.defaults.showSubtitle;
+  const resolvedShowHeader = showHeader ?? tokens.defaults.showHeader;
+  const resolvedConfirmText = confirmText ?? calendarLocale?.confirm ?? tokens.defaults.confirmText;
+  const resolvedWeekStartsOn = weekStartsOn ?? tokens.defaults.weekStartsOn;
+  const resolvedAllowSameDay = allowSameDay ?? tokens.defaults.allowSameDay;
+  const resolvedPoppable = poppable ?? tokens.defaults.poppable;
+  const resolvedCloseOnClickOverlay = closeOnClickOverlay ?? tokens.defaults.closeOnClickOverlay;
+  const resolvedCloseOnConfirm = closeOnConfirm ?? tokens.defaults.closeOnConfirm;
+  const resolvedPopupPlacement = popupPlacement ?? tokens.defaults.popupPlacement;
+  const resolvedPopupRound = popupRound ?? tokens.defaults.popupRound;
+  const resolvedType = type ?? tokens.defaults.type;
+  const resolvedShowConfirm = showConfirm ?? tokens.defaults.showConfirm[resolvedType];
   const [popupVisible, setPopupVisible] = useControllableValue(props, {
     defaultValue: false,
     valuePropName: 'visible',
@@ -82,222 +83,230 @@ const Calendar = props => {
     onClosed: popupOnClosed,
     onOpen: popupOnOpen,
     onOpened: popupOnOpened,
-    closeOnOverlayPress: overrideCloseOnOverlayPress,
+    closeOnOverlayPress: overlayCloseOnPress,
     overlay: popupOverlay,
     ...popupRestProps
-  } = popupPropsOverrides ?? {};
+  } = popupProps ?? {};
+  const callbacksRef = useRef({
+    onConfirm,
+    onOverRange,
+    popupOnOpen,
+    onOpen,
+    popupOnOpened,
+    onOpened,
+    popupOnClose,
+    onClose,
+    popupOnClosed,
+    onClosed
+  });
+  callbacksRef.current.onConfirm = onConfirm;
+  callbacksRef.current.onOverRange = onOverRange;
+  callbacksRef.current.popupOnOpen = popupOnOpen;
+  callbacksRef.current.onOpen = onOpen;
+  callbacksRef.current.popupOnOpened = popupOnOpened;
+  callbacksRef.current.onOpened = onOpened;
+  callbacksRef.current.popupOnClose = popupOnClose;
+  callbacksRef.current.onClose = onClose;
+  callbacksRef.current.popupOnClosed = popupOnClosed;
+  callbacksRef.current.onClosed = onClosed;
   const closePopup = useCallback(() => {
-    if (!poppable) return;
+    if (!resolvedPoppable) return;
     setPopupVisible(false);
-  }, [poppable, setPopupVisible]);
+  }, [resolvedPoppable, setPopupVisible]);
   const handlePopupOpen = useCallback(() => {
-    popupOnOpen?.();
-    onOpen?.();
-  }, [popupOnOpen, onOpen]);
+    callbacksRef.current.popupOnOpen?.();
+    callbacksRef.current.onOpen?.();
+  }, []);
   const handlePopupOpened = useCallback(() => {
-    popupOnOpened?.();
-    onOpened?.();
-  }, [popupOnOpened, onOpened]);
+    callbacksRef.current.popupOnOpened?.();
+    callbacksRef.current.onOpened?.();
+  }, []);
   const handlePopupClose = useCallback(() => {
     closePopup();
-    popupOnClose?.();
-    onClose?.();
-  }, [closePopup, popupOnClose, onClose]);
+    callbacksRef.current.popupOnClose?.();
+    callbacksRef.current.onClose?.();
+  }, [closePopup]);
   const handlePopupClosed = useCallback(() => {
-    popupOnClosed?.();
-    onClosed?.();
-  }, [popupOnClosed, onClosed]);
-  const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
-  const resolvedOverlay = popupOverlay ?? true;
+    callbacksRef.current.popupOnClosed?.();
+    callbacksRef.current.onClosed?.();
+  }, []);
+  const overlayCloseOnPressResolved = overlayCloseOnPress ?? resolvedCloseOnClickOverlay;
+  const overlayResolved = popupOverlay ?? true;
   const [selectedValue, setSelectedValue] = useControllableValue(props, {
     defaultValue: null,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onSelect'
   });
-  const value = normalizeValue(toArrayValue(selectedValue), type);
-  const [currentMonth, setCurrentMonth] = useState(() => {
-    const initial = value.length ? value[0] : new Date();
-    return clampMonth(initial, minDate, maxDate);
-  });
+  const value = normalizeValue(toArrayValue(selectedValue), resolvedType);
+  const [currentMonth, setCurrentMonth] = useState(() => clampMonth(value.length ? value[0] : new Date(), minDate, maxDate));
   const firstValueTime = value.length ? value[0].getTime() : null;
   const minDateTime = minDate.getTime();
   const maxDateTime = maxDate.getTime();
   useEffect(() => {
-    if (!value.length) {
-      return;
-    }
+    if (!value.length) return;
     const first = clampMonth(value[0], minDate, maxDate);
     setCurrentMonth(prev => isSameMonth(first, prev) ? prev : first);
   }, [firstValueTime, minDateTime, maxDateTime]);
-  const monthDays = useMemo(() => buildMonth(currentMonth, weekStartsOn), [currentMonth, weekStartsOn]);
-  const monthDayMeta = useMemo(() => monthDays.map(day => day ? {
+  const monthDays = useMemo(() => buildMonth(currentMonth, resolvedWeekStartsOn), [currentMonth, resolvedWeekStartsOn]);
+  const monthDaysMapped = useMemo(() => monthDays.map(day => day ? {
     day,
     key: day.toISOString(),
     timeValue: startOfDay(day).getTime(),
     dateValue: day.getDate()
   } : null), [monthDays]);
-  const minDay = startOfDay(minDate).getTime();
-  const maxDay = startOfDay(maxDate).getTime();
-  const weekLabels = useMemo(() => reorderWeekdays(weekdays ?? tokens.defaults.weekdays, weekStartsOn, tokens.defaults.weekdays), [tokens.defaults.weekdays, weekStartsOn, weekdays]);
-  const monthLabel = useMemo(() => formatMonthTitle ? formatMonthTitle(currentMonth) : formatMonth(currentMonth), [currentMonth, formatMonthTitle]);
+  const minDayTime = startOfDay(minDate).getTime();
+  const maxDayTime = startOfDay(maxDate).getTime();
+  const resolvedWeekdays = weekdays ?? calendarLocale?.weekdays ?? tokens.defaults.weekdays;
+  const weekLabels = useMemo(() => reorderWeekdays(resolvedWeekdays, resolvedWeekStartsOn, tokens.defaults.weekdays), [resolvedWeekdays, tokens.defaults.weekdays, resolvedWeekStartsOn]);
+  const monthLabel = useMemo(() => formatMonthTitle ? formatMonthTitle(currentMonth) : calendarLocale?.monthTitle ? calendarLocale.monthTitle(currentMonth.getFullYear(), currentMonth.getMonth() + 1) : formatMonth(currentMonth), [currentMonth, formatMonthTitle, calendarLocale]);
   const minMonthStart = startOfMonth(minDate);
   const maxMonthStart = startOfMonth(maxDate);
   const canGoPrev = currentMonth.getTime() > minMonthStart.getTime();
   const canGoNext = currentMonth.getTime() < maxMonthStart.getTime();
-  const goToMonth = useCallback(delta => {
-    setCurrentMonth(prev => clampMonth(new Date(prev.getFullYear(), prev.getMonth() + delta, 1), minDate, maxDate));
-  }, [minDate, maxDate]);
-  const confirmDisabled = type === 'range' ? value.length < 2 : value.length === 0;
+  const goToMonth = useCallback(delta => setCurrentMonth(prev => clampMonth(new Date(prev.getFullYear(), prev.getMonth() + delta, 1), minDate, maxDate)), [minDate, maxDate]);
+  const goPrev = useCallback(() => goToMonth(-1), [goToMonth]);
+  const goNext = useCallback(() => goToMonth(1), [goToMonth]);
+  const confirmDisabled = resolvedType === 'range' ? value.length < 2 : value.length === 0;
   const columnPadding = tokens.spacing.column / 2;
   const maybeAutoConfirm = useCallback(next => {
-    if (showConfirm) return;
-    if (type === 'range' && next.length < 2) return;
-    if (type === 'multiple' && next.length === 0) return;
+    if (resolvedShowConfirm) return;
+    if (resolvedType === 'range' && next.length < 2) return;
+    if (resolvedType === 'multiple' && next.length === 0) return;
     if (!next.length) return;
-    onConfirm?.(mapValue(next, type));
-    if (poppable && closeOnConfirm) {
-      closePopup();
-    }
-  }, [showConfirm, type, onConfirm, poppable, closeOnConfirm, closePopup]);
+    callbacksRef.current.onConfirm?.(mapValue(next, resolvedType));
+    if (resolvedPoppable && resolvedCloseOnConfirm) closePopup();
+  }, [resolvedShowConfirm, resolvedType, resolvedPoppable, resolvedCloseOnConfirm, closePopup]);
   const handleConfirm = useCallback(() => {
-    if (showConfirm && confirmDisabled) {
-      return;
-    }
-    onConfirm?.(mapValue(value, type));
-    if (poppable && closeOnConfirm) {
-      closePopup();
-    }
-  }, [showConfirm, confirmDisabled, onConfirm, value, type, poppable, closeOnConfirm, closePopup]);
+    if (resolvedShowConfirm && confirmDisabled) return;
+    callbacksRef.current.onConfirm?.(mapValue(value, resolvedType));
+    if (resolvedPoppable && resolvedCloseOnConfirm) closePopup();
+  }, [resolvedShowConfirm, confirmDisabled, value, resolvedType, resolvedPoppable, resolvedCloseOnConfirm, closePopup]);
   const isSelectionAllowed = useCallback(next => {
-    if (type === 'range' && next.length === 2) {
+    if (resolvedType === 'range' && next.length === 2) {
       const [start, end] = next;
-      if (!allowSameDay && isSameDay(start, end)) {
-        return false;
-      }
+      if (!resolvedAllowSameDay && isSameDay(start, end)) return false;
       if (maxRange && daysBetween(start, end) + 1 > maxRange) {
-        onOverRange?.(maxRange);
+        callbacksRef.current.onOverRange?.(maxRange);
         return false;
       }
     }
-    if (type === 'multiple' && maxRange && next.length > maxRange) {
-      onOverRange?.(maxRange);
+    if (resolvedType === 'multiple' && maxRange && next.length > maxRange) {
+      callbacksRef.current.onOverRange?.(maxRange);
       return false;
     }
+    ;
     return true;
-  }, [type, allowSameDay, maxRange, onOverRange]);
-  const handleSelectDay = useCallback(day => {
-    const dayTime = startOfDay(day).getTime();
-    if (dayTime < minDay || dayTime > maxDay) {
-      return;
-    }
+  }, [resolvedType, resolvedAllowSameDay, maxRange]);
+  const handleSelectDayRef = useRef(undefined);
+  const handleSelectDay = useCallback(date => {
+    const dateTime = startOfDay(date).getTime();
+    if (dateTime < minDayTime || dateTime > maxDayTime) return;
     let next = [];
-    const normalized = value;
-    switch (type) {
+    const nextValue = value;
+    switch (resolvedType) {
       case 'single':
-        {
-          next = [day];
-          break;
-        }
+        next = [date];
+        break;
       case 'multiple':
         {
-          const exists = normalized.find(item => isSameDay(item, day));
-          next = exists ? normalized.filter(item => !isSameDay(item, day)) : [...normalized, day];
+          const existing = nextValue.find(item => isSameDay(item, date));
+          next = existing ? nextValue.filter(item => !isSameDay(item, date)) : [...nextValue, date];
           break;
         }
       case 'range':
         {
-          if (normalized.length < 1 || normalized.length > 1) {
-            next = [day];
+          if (nextValue.length < 1 || nextValue.length > 1) {
+            next = [date];
           } else {
-            const first = normalized[0];
-            if (isSameDay(first, day)) {
-              next = allowSameDay ? [first, day] : [day];
+            const first = nextValue[0];
+            if (isSameDay(first, date)) {
+              next = resolvedAllowSameDay ? [first, date] : [date];
             } else {
-              next = [first, day].sort((a, b) => a.getTime() - b.getTime());
+              next = [first, date].sort((a, b) => a.getTime() - b.getTime());
             }
           }
           break;
         }
       default:
-        next = [day];
-    }
-    const normalizedNext = normalizeValue(next, type);
-    if (!isSelectionAllowed(normalizedNext)) {
-      return;
+        next = [date];
     }
-    setSelectedValue(mapValue(normalizedNext, type));
-    if (!showConfirm) {
-      maybeAutoConfirm(normalizedNext);
-    }
-  }, [value, type, minDay, maxDay, allowSameDay, isSelectionAllowed, setSelectedValue, showConfirm, maybeAutoConfirm]);
+    ;
+    const normalizedNextValue = normalizeValue(next, resolvedType);
+    if (!isSelectionAllowed(normalizedNextValue)) return;
+    setSelectedValue(mapValue(normalizedNextValue, resolvedType));
+    if (!resolvedShowConfirm) maybeAutoConfirm(normalizedNextValue);
+  }, [value, resolvedType, minDayTime, maxDayTime, resolvedAllowSameDay, isSelectionAllowed, setSelectedValue, resolvedShowConfirm, maybeAutoConfirm]);
+  handleSelectDayRef.current = handleSelectDay;
+  const selectDayPress = useCallback(date => handleSelectDayRef.current?.(date), []);
   const valueTimes = useMemo(() => value.map(item => startOfDay(item).getTime()), [value]);
-  const selectedSet = useMemo(() => new Set(valueTimes), [valueTimes]);
-  const rangeBounds = useMemo(() => type === 'range' && valueTimes.length === 2 ? [valueTimes[0], valueTimes[1]] : null, [type, valueTimes]);
-  const renderDay = useCallback((meta, index) => {
-    if (!meta) {
-      return /*#__PURE__*/React.createElement(View, {
-        key: `placeholder-${index}`,
-        style: [tokens.layout.dayPlaceholder, {
-          paddingVertical: tokens.spacing.dayPaddingVertical,
-          paddingHorizontal: columnPadding
-        }]
-      });
-    }
+  const selected = useMemo(() => new Set(valueTimes), [valueTimes]);
+  const rangeBounds = resolvedType === 'range' && valueTimes.length === 2 ? [valueTimes[0], valueTimes[1]] : null;
+  const renderDay = useCallback((mapped, index) => {
+    if (!mapped) return /*#__PURE__*/React.createElement(View, {
+      key: `p-${index}`,
+      style: [tokens.layout.dayPlaceholder, {
+        paddingVertical: tokens.spacing.dayPaddingVertical,
+        paddingHorizontal: columnPadding
+      }]
+    });
     const {
       day,
       key,
       timeValue,
       dateValue
-    } = meta;
-    const isDisabled = timeValue < minDay || timeValue > maxDay;
-    const isSelected = selectedSet.has(timeValue);
-    const inRange = type === 'range' && rangeBounds && timeValue > rangeBounds[0] && timeValue < rangeBounds[1];
-    const dayStyle = [tokens.layout.dayText, {
+    } = mapped;
+    const isDisabled = timeValue < minDayTime || timeValue > maxDayTime;
+    const isSelected = selected.has(timeValue);
+    const inRange = resolvedType === 'range' && rangeBounds && timeValue > rangeBounds[0] && timeValue < rangeBounds[1];
+    const dayStyles = [tokens.layout.dayText, {
       borderRadius: tokens.radii.day,
       color: tokens.colors.text,
       minWidth: tokens.sizing.dayMinWidth
     }];
-    if (isDisabled) {
-      dayStyle.push({
-        color: tokens.colors.disabled
-      });
-    } else if (inRange) {
-      dayStyle.push({
-        backgroundColor: tokens.colors.rangeBackground
-      });
-    } else if (isSelected) {
-      dayStyle.push({
-        backgroundColor: color ?? tokens.colors.selectedBackground,
-        color: tokens.colors.selectedText
-      });
-    }
+    if (isDisabled) dayStyles.push({
+      color: tokens.colors.disabled
+    });else if (inRange) dayStyles.push({
+      backgroundColor: tokens.colors.rangeBackground
+    });else if (isSelected) dayStyles.push({
+      backgroundColor: color ?? tokens.colors.selectedBackground,
+      color: tokens.colors.selectedText
+    });
+    const accessibility = `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}${isSelected ? ', selected' : ''}${isDisabled ? ', disabled' : ''}`;
     return /*#__PURE__*/React.createElement(Pressable, {
       key: key,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibility,
+      accessibilityState: {
+        selected: isSelected,
+        disabled: isDisabled
+      },
       style: [tokens.layout.dayButton, {
         paddingVertical: tokens.spacing.dayPaddingVertical,
         paddingHorizontal: columnPadding
       }],
       disabled: isDisabled,
-      onPress: () => handleSelectDay(day),
+      onPress: () => selectDayPress(day),
       testID: getCalendarDayTestId(day)
     }, /*#__PURE__*/React.createElement(Text, {
-      style: dayStyle
+      style: dayStyles
     }, dateValue));
-  }, [selectedSet, type, rangeBounds, minDay, maxDay, tokens, color, handleSelectDay, columnPadding]);
+  }, [selected, resolvedType, rangeBounds, minDayTime, maxDayTime, tokens, color, selectDayPress, columnPadding]);
   const content = /*#__PURE__*/React.createElement(View, _extends({
     style: [{
       backgroundColor: tokens.colors.background,
       padding: tokens.spacing.containerPadding,
       borderRadius: tokens.radii.container
     }, style]
-  }, rest), showHeader ? /*#__PURE__*/React.createElement(View, {
+  }, rest), resolvedShowHeader ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.header, {
       marginBottom: tokens.spacing.headerMarginBottom
     }]
   }, /*#__PURE__*/React.createElement(Pressable, {
     testID: "calendar-nav-prev",
-    onPress: () => canGoPrev && goToMonth(-1),
+    accessibilityRole: "button",
+    accessibilityLabel: "previous month",
+    onPress: goPrev,
     disabled: !canGoPrev
   }, /*#__PURE__*/React.createElement(Text, {
     style: [tokens.layout.navText, {
@@ -308,20 +317,18 @@ const Calendar = props => {
     }]
   }, '<')), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.headerCenter
-  }, title !== undefined && title !== null && title !== false ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.headerTitle, {
-      color: tokens.colors.text,
-      fontSize: tokens.typography.headerTitleSize,
-      fontWeight: tokens.typography.headerTitleWeight
-    }]
-  }, title) : title : null, showSubtitle ? isText(monthLabel) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.headerSubtitle, {
-      color: tokens.colors.headerSubtitle,
-      fontSize: tokens.typography.headerSubtitleSize
-    }]
-  }, monthLabel) : monthLabel : null), /*#__PURE__*/React.createElement(Pressable, {
+  }, isRenderable(resolvedTitle) ? renderTextOrNode(resolvedTitle, [tokens.layout.headerTitle, {
+    color: tokens.colors.text,
+    fontSize: tokens.typography.headerTitleSize,
+    fontWeight: tokens.typography.headerTitleWeight
+  }]) : null, resolvedShowSubtitle ? renderTextOrNode(monthLabel, [tokens.layout.headerSubtitle, {
+    color: tokens.colors.headerSubtitle,
+    fontSize: tokens.typography.headerSubtitleSize
+  }]) : null), /*#__PURE__*/React.createElement(Pressable, {
     testID: "calendar-nav-next",
-    onPress: () => canGoNext && goToMonth(1),
+    accessibilityRole: "button",
+    accessibilityLabel: "next month",
+    onPress: goNext,
     disabled: !canGoNext
   }, /*#__PURE__*/React.createElement(Text, {
     style: [tokens.layout.navText, {
@@ -334,20 +341,18 @@ const Calendar = props => {
     style: [tokens.layout.weekRow, {
       marginBottom: tokens.spacing.weekRowMarginBottom
     }]
-  }, weekLabels.map((label, index) => /*#__PURE__*/React.createElement(View, {
-    key: `weekday-${index}`,
+  }, weekLabels.map((label, i) => /*#__PURE__*/React.createElement(View, {
+    key: `w-${i}`,
     style: [tokens.layout.weekLabelItem, {
       paddingHorizontal: columnPadding
     }]
-  }, isText(label) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.weekLabel, {
-      color: tokens.colors.text
-    }]
-  }, label) : label))), /*#__PURE__*/React.createElement(View, {
+  }, renderTextOrNode(label, [tokens.layout.weekLabel, {
+    color: tokens.colors.text
+  }])))), /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.days, {
       rowGap: tokens.spacing.row
     }]
-  }, monthDayMeta.map((meta, index) => renderDay(meta, index))), showConfirm ? /*#__PURE__*/React.createElement(Pressable, {
+  }, monthDaysMapped.map((mapped, i) => renderDay(mapped, i))), resolvedShowConfirm ? /*#__PURE__*/React.createElement(Pressable, {
     style: [tokens.layout.confirmButton, {
       backgroundColor: color ?? tokens.colors.selectedBackground,
       opacity: confirmDisabled ? 0.5 : 1,
@@ -357,23 +362,19 @@ const Calendar = props => {
     }],
     onPress: handleConfirm,
     disabled: confirmDisabled
-  }, isText(confirmText) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.confirmText, {
-      color: tokens.colors.confirmText,
-      fontWeight: tokens.typography.confirmTextWeight
-    }]
-  }, confirmText) : confirmText) : null);
-  if (!poppable) {
-    return content;
-  }
+  }, renderTextOrNode(resolvedConfirmText, [tokens.layout.confirmText, {
+    color: tokens.colors.confirmText,
+    fontWeight: tokens.typography.confirmTextWeight
+  }])) : null);
+  if (!resolvedPoppable) return content;
   return /*#__PURE__*/React.createElement(Popup, _extends({
     visible: popupVisible,
-    placement: popupPlacement,
-    round: popupRound,
-    closeOnOverlayPress: resolvedCloseOnOverlayPress,
-    overlay: resolvedOverlay,
-    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop !== undefined ? popupRestProps.safeAreaInsetTop : showHeader,
-    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom !== undefined ? popupRestProps.safeAreaInsetBottom : popupPlacement === 'bottom',
+    placement: resolvedPopupPlacement,
+    round: resolvedPopupRound,
+    closeOnOverlayPress: overlayCloseOnPressResolved,
+    overlay: overlayResolved,
+    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop != null ? popupRestProps.safeAreaInsetTop : resolvedShowHeader,
+    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom != null ? popupRestProps.safeAreaInsetBottom : resolvedPopupPlacement === 'bottom',
     onOpen: handlePopupOpen,
     onOpened: handlePopupOpened,
     onClose: handlePopupClose,
@@ -381,25 +382,17 @@ const Calendar = props => {
   }, popupRestProps), content);
 };
 function mapValue(value, type) {
-  if (type === 'single') {
-    return value[0] ?? new Date();
-  }
-  if (type === 'range' && value.length === 2) {
-    return value;
-  }
+  if (type === 'single') return value[0] ?? new Date();
+  if (type === 'range' && value.length === 2) return value;
   return value;
 }
 function normalizeValue(value, type) {
-  if (type === 'single') {
-    return value.slice(0, 1);
-  }
-  if (type === 'range') {
-    return value.slice(0, 2).sort((a, b) => a.getTime() - b.getTime());
-  }
+  if (type === 'single') return value.slice(0, 1);
+  if (type === 'range') return value.slice(0, 2).sort((a, b) => a.getTime() - b.getTime());
   return value;
 }
 function formatMonth(date) {
-  return `${date.getFullYear()}年${date.getMonth() + 1}月`;
+  return `${date.getFullYear()}/${date.getMonth() + 1}`;
 }
 function reorderWeekdays(labels, start, fallback) {
   const normalizedStart = (start % 7 + 7) % 7;
@@ -411,20 +404,14 @@ function buildMonth(month, weekStartsOn) {
   const firstDay = startOfMonth(month);
   const startOffset = (firstDay.getDay() - normalizedStart + 7) % 7;
   const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
-  const cells = [];
-  for (let i = 0; i < startOffset; i += 1) {
-    cells.push(null);
-  }
-  for (let day = 1; day <= daysInMonth; day += 1) {
-    cells.push(new Date(month.getFullYear(), month.getMonth(), day));
-  }
-  while (cells.length < 42) {
-    cells.push(null);
-  }
-  return cells;
+  const calendar = [];
+  for (let i = 0; i < startOffset; i += 1) calendar.push(null);
+  for (let day = 1; day <= daysInMonth; day += 1) calendar.push(new Date(month.getFullYear(), month.getMonth(), day));
+  while (calendar.length < 42) calendar.push(null);
+  return calendar;
 }
-function getCalendarDayTestId(day) {
-  return `calendar-day-${day.getFullYear()}-${`${day.getMonth() + 1}`.padStart(2, '0')}-${`${day.getDate()}`.padStart(2, '0')}`;
+function getCalendarDayTestId(date) {
+  return `calendar-day-${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${`${date.getDate()}`.padStart(2, '0')}`;
 }
 function startOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth(), 1);
@@ -434,10 +421,12 @@ function clampMonth(date, min, max) {
   const minMonth = startOfMonth(min);
   const maxMonth = startOfMonth(max);
   if (month.getTime() < minMonth.getTime()) return minMonth;
-  if (month.getTime() > maxMonth.getTime()) return maxMonth;
+  if (month.getTime() > maxMonth.getTime()) return max;
   return month;
 }
 function isSameMonth(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
 }
+const Calendar = /*#__PURE__*/React.memo(CalendarImpl);
+Calendar.displayName = 'Calendar';
 export default Calendar;

package/dist/es/components/calendar/tokens.js

@@ -11,7 +11,7 @@ export const createCalendarTokens = foundations => {
   return {
     defaults: {
       type: "single",
-      title: "选择日期",
+      title: "Select Date",
       showSubtitle: true,
       showHeader: true,
       showConfirm: {
@@ -19,9 +19,9 @@ export const createCalendarTokens = foundations => {
         range: true,
         multiple: true
       },
-      confirmText: "确定",
+      confirmText: "Confirm",
       weekStartsOn: 0,
-      weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+      weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
       allowSameDay: false,
       poppable: false,
       closeOnClickOverlay: true,