cpk-ui 0.7.0 → 0.8.0-beta.0

package/README.md

@@ -10,7 +10,7 @@ maintained by Cross Platform Korea and uses
 [kstyled](https://crossplatformkorea.github.io/kstyled) for typed,
 compile-time-aware styling.
 
-`cpk-ui@0.7.0` pairs with `kstyled@0.4.1`. Keep the runtime and Babel plugin on
+`cpk-ui@0.8.0-beta.0` pairs with `kstyled@0.4.1`. Keep the runtime and Babel plugin on
 the same kstyled version.
 
 ## Install
@@ -18,9 +18,9 @@ the same kstyled version.
 ### Expo
 
 ```bash
-npx expo install cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
+npx expo install cpk-ui@0.8.0-beta.0 kstyled@0.4.1 @expo/vector-icons \
   react-native-gesture-handler react-native-svg expo-screen-orientation \
-  @expo/match-media expo-haptics
+  react-native-reanimated @expo/match-media expo-haptics
 bun add --dev babel-plugin-kstyled@0.4.1
 ```
 
@@ -30,9 +30,9 @@ Install Expo modules first, then add the same runtime dependencies:
 
 ```bash
 npx install-expo-modules@latest
-bun add cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
+bun add cpk-ui@0.8.0-beta.0 kstyled@0.4.1 @expo/vector-icons \
   react-native-gesture-handler react-native-svg expo-screen-orientation \
-  @expo/match-media expo-haptics
+  react-native-reanimated @expo/match-media expo-haptics
 bun add --dev babel-plugin-kstyled@0.4.1
 ```
 
@@ -77,13 +77,13 @@ dark theme tokens. Applications that provide product-specific tokens can pass
 
 ## Component Surface
 
-| Area             | Components                                                             |
-| ---------------- | ---------------------------------------------------------------------- |
-| Actions          | Button, CustomPressable, Fab, IconButton                               |
-| Inputs           | Checkbox, EditText, RadioGroup, Rating, SegmentedControl, SwitchToggle |
-| Feedback         | AlertDialog, ErrorBoundary, LoadingIndicator, Snackbar                 |
-| Display          | Accordion, Card, Hr, Icon, Typography                                  |
-| Media and system | PinchZoom, StatusBarBrightness                                         |
+| Area             | Components                                                                       |
+| ---------------- | -------------------------------------------------------------------------------- |
+| Actions          | Button, CustomPressable, Fab, IconButton                                         |
+| Inputs           | Calendar, Checkbox, EditText, RadioGroup, Rating, SegmentedControl, SwitchToggle |
+| Feedback         | AlertDialog, ErrorBoundary, LoadingIndicator, Snackbar                           |
+| Display          | Accordion, Card, Hr, Icon, ParallaxHeader, Typography                            |
+| Media and system | PinchZoom, StatusBarBrightness                                                   |
 
 Each public component has automated tests and Storybook coverage for its main
 states. Use the [live Storybook](https://ui.crossplatformkorea.com) to inspect
@@ -91,7 +91,7 @@ controls, responsive behavior, accessibility results, and source examples.
 
 ## Release Matrix
 
-The 0.7.0 release is verified with Expo 54, React Native 0.81, React 19,
+The 0.8.0 beta is verified with Expo 54, React Native 0.81, React 19,
 kstyled 0.4, and React Native Web 0.21. This is the release validation matrix,
 not a claim that every consumer must use those exact React or React Native
 versions.
@@ -112,7 +112,7 @@ main-branch GitHub Actions publish workflow with provenance.
 ## Documentation
 
 - [Storybook](https://ui.crossplatformkorea.com)
-- [0.7.0 release notes](./docs/releases/0.7.0.md)
+- [0.8.0 beta release notes](./docs/releases/0.8.0-beta.0.md)
 - [0.7 engineering notes](./docs/blog/2026-07-11-cpk-ui-0.7.0.md)
 - [Performance guide](./docs/PERFORMANCE.md)
 - [Changelog](./CHANGELOG.md)

package/components/uis/Calendar/Calendar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CalendarProps, CalendarRef } from './types';
+export declare const Calendar: React.NamedExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
+export default Calendar;
+export * from './types';
+//# sourceMappingURL=Calendar.d.ts.map

package/components/uis/Calendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAWN,MAAM,OAAO,CAAC;AAuBf,OAAO,KAAK,EASV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AAw3BjB,eAAO,MAAM,QAAQ,8EAA4C,CAAC;AAElE,eAAe,QAAQ,CAAC;AAExB,cAAc,SAAS,CAAC"}

package/components/uis/Calendar/Calendar.js

@@ -0,0 +1,482 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { AccessibilityInfo, I18nManager, useWindowDimensions, View, } from 'react-native';
+import { css } from 'kstyled';
+import { useAnimatedReaction, useSharedValue, withTiming, runOnJS, } from 'react-native-reanimated';
+import { useTheme } from '../../../providers/ThemeProvider';
+import { CalendarHeader } from './CalendarHeader';
+import { CalendarPage } from './CalendarPage';
+import { CalendarPager } from './CalendarPager';
+import { CalendarWeekdayRow } from './CalendarWeekdayRow';
+import { DEFAULT_FORMATTERS, getFormattersId, resolveLocale } from './intl';
+import { isSamePalette, resolveCalendarPalette } from './palette';
+import { resolveKeyboardAction, useControllable, useDisabledState, useReduceMotion, useShallowStable, useToday, } from './useCalendarState';
+import { addDays, addPages, getCalendarGrid, localNoon, normalizePageKey, pageFirstDate, pageLastDate, resolveMetrics, resolveWeekStart, startOfWeek, toDateKeyInput, toDayKey, } from './utils';
+const CONTAINER = css `
+  align-self: center;
+  width: 100%;
+`;
+const TWO_UP_ROW = css `
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 24px;
+`;
+const COLUMN = css `
+  flex: 1;
+`;
+const EMPTY_MARKERS = Object.freeze({});
+const EMPTY_STYLES = Object.freeze({});
+const DEFAULT_LABELS = Object.freeze({
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    previousWeek: 'Previous week',
+    nextWeek: 'Next week',
+    today: 'Today',
+    selected: 'Selected',
+    weekNumber: 'Week',
+    pageAnnouncement: (pageTitle) => pageTitle,
+});
+/** A Sunday, used only to derive weekday header labels. Never rendered. */
+const WEEKDAY_LABEL_ANCHOR = localNoon(2024, 0, 7);
+const COLLAPSE_DURATION = 220;
+const BADGE_FONT_SCALE_LIMIT = 1.3;
+const SINGLE_DOT_FONT_SCALE_LIMIT = 1.5;
+/**
+ * `onKeyDown` is forwarded by react-native-web and simply never fires on native,
+ * so one handler covers both platforms without a `.web.tsx` split.
+ */
+const KeyboardView = View;
+function buildGeometry(metrics) {
+    return Object.freeze({
+        row: { height: metrics.rowHeight },
+        cell: { height: metrics.rowHeight, paddingTop: metrics.pillOffset },
+        pill: {
+            width: metrics.numberSize,
+            height: metrics.numberSize,
+            borderRadius: metrics.numberSize / 2,
+        },
+        dayText: { fontSize: metrics.dayFontSize },
+        badgeText: { fontSize: metrics.badgeFontSize },
+        dot: {
+            width: metrics.dotSize,
+            height: metrics.dotSize,
+            borderRadius: metrics.dotSize / 2,
+        },
+        dotRow: { height: metrics.dotRowHeight },
+        weekNumber: { width: metrics.weekNumberWidth },
+        weekNumberText: { fontSize: metrics.weekdayFontSize },
+    });
+}
+function CalendarContainer(props, ref) {
+    const { value, defaultValue, onChange, month, defaultMonth, onMonthChange, mode: modeProp, defaultMode, onModeChange, collapseProgress, locale: localeProp, weekStart: weekStartProp, today: todayProp, fixedWeeks = true, markers = EMPTY_MARKERS, showDots = true, maxDotsPerDay = 3, showWeekNumbers = false, showOutsideDays = true, minDate, maxDate, disabledDates, isDateDisabled, showHeader = true, showNavigationButtons = true, showWeekdayRow = true, paging = 'swipe', monthsToShow = 1, size, maxFontSizeMultiplier = 1.6, colors, styles: stylesProp = EMPTY_STYLES, style, formatters: formattersProp, renderHeader, renderWeekdayLabel, renderDay, onDayLongPress, onDisabledDayPress, labels: labelsPropInput, accessibilityLabel, testID = 'calendar', } = props;
+    const { theme, media } = useTheme();
+    const { fontScale } = useWindowDimensions();
+    const reduceMotion = useReduceMotion();
+    const locale = useMemo(() => localeProp ?? resolveLocale(), [localeProp]);
+    const weekStart = useMemo(() => weekStartProp ?? resolveWeekStart(locale), [locale, weekStartProp]);
+    const todayNoon = useToday(todayProp);
+    const todayKey = useMemo(() => toDayKey(todayNoon), [todayNoon]);
+    // Value comparison, not identity, for the three props callers almost always
+    // write as inline object literals. Without it `chrome` is rebuilt on every
+    // parent render and all 42 day cells re-render — the exact regression the
+    // memo test suite pins for `colors` but never checked for these.
+    const labelsProp = useShallowStable(labelsPropInput);
+    const styles = useShallowStable(stylesProp);
+    const formattersInput = useShallowStable(formattersProp);
+    const formatters = useMemo(() => formattersInput
+        ? Object.freeze({ ...DEFAULT_FORMATTERS, ...formattersInput })
+        : DEFAULT_FORMATTERS, [formattersInput]);
+    const formattersId = getFormattersId(formatters);
+    const [mode, setModeState] = useControllable(modeProp, defaultMode ?? 'month');
+    // ── selection ───────────────────────────────────────────────────────────────
+    const isValueControlled = value !== undefined;
+    const [selectedKeyState, setSelectedKeyState] = useState(() => defaultValue == null ? null : toDateKeyInput(defaultValue));
+    const selectedKey = isValueControlled
+        ? value === null
+            ? null
+            : toDateKeyInput(value)
+        : selectedKeyState;
+    // ── paging ──────────────────────────────────────────────────────────────────
+    const isMonthControlled = month !== undefined;
+    const [pageKeyState, setPageKeyState] = useState(() => normalizePageKey(defaultMonth ?? selectedKeyState ?? todayNoon, defaultMode ?? 'month', weekStartProp ?? resolveWeekStart(localeProp ?? resolveLocale()), monthsToShow));
+    const pageInput = month === undefined
+        ? pageKeyState
+        : typeof month === 'string'
+            ? month
+            : toDayKey(month);
+    const pageKey = useMemo(() => normalizePageKey(pageInput, mode, weekStart, monthsToShow), [mode, monthsToShow, pageInput, weekStart]);
+    const [focusedKey, setFocusedKey] = useState(null);
+    // ── grids ───────────────────────────────────────────────────────────────────
+    const gridFor = useCallback((key) => getCalendarGrid({
+        pageKey: key,
+        mode,
+        weekStart,
+        fixedWeeks,
+        showWeekNumbers,
+        locale,
+        formatters,
+        formattersId,
+    }), [
+        fixedWeeks,
+        formatters,
+        formattersId,
+        locale,
+        mode,
+        showWeekNumbers,
+        weekStart,
+    ]);
+    const previousPageKey = useMemo(() => addPages(pageKey, -1, mode, weekStart, monthsToShow), [mode, monthsToShow, pageKey, weekStart]);
+    const nextPageKey = useMemo(() => addPages(pageKey, 1, mode, weekStart, monthsToShow), [mode, monthsToShow, pageKey, weekStart]);
+    const currentGrid = useMemo(() => gridFor(pageKey), [gridFor, pageKey]);
+    // ── theming and geometry ────────────────────────────────────────────────────
+    // Value comparison, not identity: `theme` and an inline `colors` object are both
+    // rebuilt on every parent render, and a new palette would re-render every cell.
+    const paletteRef = useRef(null);
+    const palette = useMemo(() => {
+        const next = resolveCalendarPalette(theme, colors);
+        const previous = paletteRef.current;
+        if (previous && isSamePalette(previous, next)) {
+            return previous;
+        }
+        paletteRef.current = next;
+        return next;
+    }, [colors, theme]);
+    const resolvedSize = size ?? (media.isDesktop || media.isTablet ? 'expanded' : 'regular');
+    const metrics = useMemo(() => resolveMetrics(resolvedSize, fontScale, maxFontSizeMultiplier), [fontScale, maxFontSizeMultiplier, resolvedSize]);
+    const geometry = useMemo(() => buildGeometry(metrics), [metrics]);
+    const labels = useMemo(() => labelsProp
+        ? Object.freeze({ ...DEFAULT_LABELS, ...labelsProp })
+        : DEFAULT_LABELS, [labelsProp]);
+    // ── constraints ─────────────────────────────────────────────────────────────
+    const { resolver: isDisabled, version: disabledVersion, minKey, maxKey, } = useDisabledState({ minDate, maxDate, disabledDates, isDateDisabled });
+    // ── latest-value refs, so no handler identity depends on a changing callback ─
+    const callbacksRef = useRef({
+        onChange,
+        onMonthChange,
+        onModeChange,
+        onDayLongPress,
+        onDisabledDayPress,
+    });
+    const stateRef = useRef({
+        pageKey,
+        mode,
+        weekStart,
+        monthsToShow,
+        isMonthControlled,
+        isValueControlled,
+        isModeControlled: modeProp !== undefined,
+    });
+    useEffect(() => {
+        callbacksRef.current = {
+            onChange,
+            onMonthChange,
+            onModeChange,
+            onDayLongPress,
+            onDisabledDayPress,
+        };
+    }, [
+        onChange,
+        onDayLongPress,
+        onDisabledDayPress,
+        onModeChange,
+        onMonthChange,
+    ]);
+    useEffect(() => {
+        stateRef.current = {
+            pageKey,
+            mode,
+            weekStart,
+            monthsToShow,
+            isMonthControlled,
+            isValueControlled,
+            isModeControlled: modeProp !== undefined,
+        };
+    }, [
+        isMonthControlled,
+        isValueControlled,
+        mode,
+        modeProp,
+        monthsToShow,
+        pageKey,
+        weekStart,
+    ]);
+    const goToPage = useCallback((nextKey, source) => {
+        const current = stateRef.current;
+        if (!current.isMonthControlled) {
+            setPageKeyState(nextKey);
+        }
+        const first = pageFirstDate(nextKey, current.mode, current.weekStart);
+        callbacksRef.current.onMonthChange?.(new Date(first.getFullYear(), first.getMonth(), first.getDate()), nextKey, source);
+    }, []);
+    const stepPage = useCallback((delta, source) => {
+        const current = stateRef.current;
+        goToPage(addPages(current.pageKey, delta, current.mode, current.weekStart, current.monthsToShow), source);
+    }, [goToPage]);
+    const handleSwipeCommit = useCallback((delta) => stepPage(delta, 'swipe'), [stepPage]);
+    const focusKey = useCallback((key, source) => {
+        setFocusedKey(key);
+        const current = stateRef.current;
+        const targetPage = normalizePageKey(key, current.mode, current.weekStart, current.monthsToShow);
+        if (targetPage !== current.pageKey) {
+            goToPage(targetPage, source);
+        }
+    }, [goToPage]);
+    const selectKey = useCallback((key, source) => {
+        const current = stateRef.current;
+        if (!current.isValueControlled) {
+            setSelectedKeyState(key);
+        }
+        setFocusedKey(key);
+        const date = new Date(+key.slice(0, 4), +key.slice(5, 7) - 1, +key.slice(8, 10));
+        callbacksRef.current.onChange?.(date, key, source);
+    }, []);
+    // ── stable cell callbacks. No inline arrow ever reaches a day cell ───────────
+    const handleDayPress = useCallback((key) => selectKey(key, 'press'), [selectKey]);
+    const handleDayLongPress = useCallback((key) => {
+        callbacksRef.current.onDayLongPress?.(new Date(+key.slice(0, 4), +key.slice(5, 7) - 1, +key.slice(8, 10)), key);
+    }, []);
+    const handleDisabledDayPress = useCallback((key) => {
+        callbacksRef.current.onDisabledDayPress?.(new Date(+key.slice(0, 4), +key.slice(5, 7) - 1, +key.slice(8, 10)), key);
+    }, []);
+    const chrome = useMemo(() => Object.freeze({
+        palette,
+        metrics,
+        geometry,
+        showDots,
+        maxDots: fontScale > SINGLE_DOT_FONT_SCALE_LIMIT
+            ? 1
+            : Math.max(maxDotsPerDay, 0),
+        showBadges: fontScale <= BADGE_FONT_SCALE_LIMIT,
+        maxFontSizeMultiplier,
+        fontScale,
+        labels,
+        styles,
+        renderDay,
+        onPress: handleDayPress,
+        onLongPress: onDayLongPress ? handleDayLongPress : undefined,
+        onDisabledPress: onDisabledDayPress
+            ? handleDisabledDayPress
+            : undefined,
+    }), [
+        fontScale,
+        geometry,
+        handleDayLongPress,
+        handleDayPress,
+        handleDisabledDayPress,
+        labels,
+        maxDotsPerDay,
+        maxFontSizeMultiplier,
+        metrics,
+        onDayLongPress,
+        onDisabledDayPress,
+        palette,
+        renderDay,
+        showDots,
+        styles,
+    ]);
+    // ── collapse ────────────────────────────────────────────────────────────────
+    const internalCollapse = useSharedValue(mode === 'week' ? 1 : 0);
+    const collapse = collapseProgress ?? internalCollapse;
+    const activeRow = useSharedValue(0);
+    const anchorKey = selectedKey &&
+        selectedKey >= currentGrid.firstKey &&
+        selectedKey <= currentGrid.lastKey
+        ? selectedKey
+        : todayKey >= currentGrid.firstKey && todayKey <= currentGrid.lastKey
+            ? todayKey
+            : currentGrid.firstKey;
+    const activeRowIndex = useMemo(() => {
+        for (let i = 0; i < currentGrid.days.length; i++) {
+            if (currentGrid.days[i].key === anchorKey) {
+                return (i / 7) | 0;
+            }
+        }
+        return 0;
+    }, [anchorKey, currentGrid]);
+    useEffect(() => {
+        activeRow.value = mode === 'week' ? 0 : activeRowIndex;
+    }, [activeRow, activeRowIndex, mode]);
+    useEffect(() => {
+        if (collapseProgress) {
+            return;
+        }
+        internalCollapse.value = withTiming(mode === 'week' ? 1 : 0, {
+            duration: reduceMotion ? 0 : COLLAPSE_DURATION,
+        });
+    }, [collapseProgress, internalCollapse, mode, reduceMotion]);
+    const commitMode = useCallback((nextMode) => {
+        if (stateRef.current.mode === nextMode) {
+            return;
+        }
+        setModeState(nextMode);
+        callbacksRef.current.onModeChange?.(nextMode);
+    }, [setModeState]);
+    useAnimatedReaction(() => collapse.value, (progress, previous) => {
+        if (previous === null) {
+            return;
+        }
+        if (progress >= 0.999 && previous < 0.999) {
+            runOnJS(commitMode)('week');
+        }
+        else if (progress <= 0.001 && previous > 0.001) {
+            runOnJS(commitMode)('month');
+        }
+    }, [collapse, commitMode]);
+    // ── derived chrome values ───────────────────────────────────────────────────
+    const weekdayLabels = useMemo(() => {
+        const anchor = startOfWeek(WEEKDAY_LABEL_ANCHOR, weekStart);
+        return Object.freeze(Array.from({ length: 7 }, (_, index) => formatters.weekdayLabel(addDays(anchor, index), locale)));
+    }, [formatters, locale, weekStart]);
+    const headerDate = useMemo(() => pageFirstDate(pageKey, mode, weekStart), [mode, pageKey, weekStart]);
+    const title = useMemo(() => {
+        if (mode === 'week') {
+            return formatters.weekTitle(headerDate, addDays(headerDate, 6), locale);
+        }
+        if (monthsToShow > 1) {
+            const secondMonth = pageFirstDate(nextPageKey, mode, weekStart);
+            return `${formatters.monthTitle(headerDate, locale)} – ${formatters.monthTitle(addDays(secondMonth, -1), locale)}`;
+        }
+        return formatters.monthTitle(headerDate, locale);
+    }, [
+        formatters,
+        headerDate,
+        locale,
+        mode,
+        monthsToShow,
+        nextPageKey,
+        weekStart,
+    ]);
+    // Compared against each neighbouring page's own month/week range, not against the
+    // padded grid, so a min date on the 1st really does disable the previous button.
+    const canGoPrevious = minKey === null ||
+        toDayKey(pageLastDate(previousPageKey, mode, weekStart, monthsToShow)) >=
+            minKey;
+    const canGoNext = maxKey === null ||
+        toDayKey(pageFirstDate(nextPageKey, mode, weekStart)) <= maxKey;
+    const goPrevious = useCallback(() => stepPage(-1, 'button'), [stepPage]);
+    const goNext = useCallback(() => stepPage(1, 'button'), [stepPage]);
+    const headerContext = useMemo(() => ({
+        title,
+        date: headerDate,
+        mode,
+        canGoPrevious,
+        canGoNext,
+        goPrevious,
+        goNext,
+    }), [canGoNext, canGoPrevious, goNext, goPrevious, headerDate, mode, title]);
+    const announcedTitle = useRef(null);
+    useEffect(() => {
+        if (announcedTitle.current === null) {
+            announcedTitle.current = title;
+            return;
+        }
+        if (announcedTitle.current === title) {
+            return;
+        }
+        announcedTitle.current = title;
+        AccessibilityInfo.announceForAccessibility(labels.pageAnnouncement(title));
+    }, [labels, title]);
+    // ── roving focus target ─────────────────────────────────────────────────────
+    const tabbableKey = useMemo(() => {
+        const inPage = (key) => key >= currentGrid.firstKey && key <= currentGrid.lastKey;
+        if (focusedKey !== null && inPage(focusedKey)) {
+            return focusedKey;
+        }
+        if (selectedKey !== null && inPage(selectedKey)) {
+            return selectedKey;
+        }
+        if (inPage(todayKey)) {
+            return todayKey;
+        }
+        for (const day of currentGrid.days) {
+            if (!day.isOutside) {
+                return day.key;
+            }
+        }
+        return currentGrid.firstKey;
+    }, [currentGrid, focusedKey, selectedKey, todayKey]);
+    const handleKeyDown = useCallback((event) => {
+        const action = resolveKeyboardAction({
+            key: event.key,
+            shiftKey: event.shiftKey === true,
+            focusedKey: tabbableKey,
+            weekStart: stateRef.current.weekStart,
+            isRTL: I18nManager.isRTL,
+            mode: stateRef.current.mode,
+        });
+        if (!action) {
+            return;
+        }
+        event.preventDefault?.();
+        if (action.type === 'select') {
+            selectKey(tabbableKey, 'keyboard');
+            return;
+        }
+        focusKey(action.key, 'keyboard');
+    }, [focusKey, selectKey, tabbableKey]);
+    // ── imperative API ──────────────────────────────────────────────────────────
+    useImperativeHandle(ref, () => ({
+        goToMonth: (target) => {
+            const current = stateRef.current;
+            goToPage(normalizePageKey(target, current.mode, current.weekStart, current.monthsToShow), 'imperative');
+        },
+        goToToday: () => {
+            const current = stateRef.current;
+            goToPage(normalizePageKey(todayKey, current.mode, current.weekStart, current.monthsToShow), 'imperative');
+        },
+        next: () => stepPage(1, 'imperative'),
+        previous: () => stepPage(-1, 'imperative'),
+        setMode: (nextMode) => commitMode(nextMode),
+        focusDay: (key) => focusKey(key, 'imperative'),
+    }), [commitMode, focusKey, goToPage, stepPage, todayKey]);
+    // ── page rendering ──────────────────────────────────────────────────────────
+    const rowCount = mode === 'week' ? 1 : currentGrid.rowCount;
+    const collapsible = mode === 'week' || (monthsToShow === 1 && rowCount > 1);
+    const renderGrid = useCallback((gridPageKey, gridTestID) => {
+        const grid = gridFor(gridPageKey);
+        return (_jsx(CalendarPage, { activeRow: activeRow, chrome: chrome, collapse: collapse, collapsible: collapsible, disabledVersion: disabledVersion, grid: grid, isDisabled: isDisabled, markers: markers, selectedKey: selectedKey, showOutsideDays: showOutsideDays, showWeekNumbers: showWeekNumbers, tabbableKey: tabbableKey, testID: gridTestID, todayKey: todayKey }));
+    }, [
+        activeRow,
+        chrome,
+        collapse,
+        collapsible,
+        disabledVersion,
+        gridFor,
+        isDisabled,
+        markers,
+        selectedKey,
+        showOutsideDays,
+        showWeekNumbers,
+        tabbableKey,
+        todayKey,
+    ]);
+    const renderSlot = useCallback((slotPageKey) => {
+        if (monthsToShow === 1) {
+            return renderGrid(slotPageKey, `calendar-page-${slotPageKey}`);
+        }
+        const monthKeys = [slotPageKey];
+        for (let index = 1; index < monthsToShow; index++) {
+            monthKeys.push(addPages(slotPageKey, index, mode, weekStart, 1));
+        }
+        return (_jsx(View, { style: TWO_UP_ROW, children: monthKeys.map((monthKey) => (_jsx(View, { style: COLUMN, children: renderGrid(monthKey, `calendar-page-${monthKey}`) }, monthKey))) }));
+    }, [mode, monthsToShow, renderGrid, weekStart]);
+    const slots = useMemo(() => {
+        if (paging === 'none') {
+            return [{ key: pageKey, offset: 0, node: renderSlot(pageKey) }];
+        }
+        return [
+            { key: previousPageKey, offset: -1, node: renderSlot(previousPageKey) },
+            { key: pageKey, offset: 0, node: renderSlot(pageKey) },
+            { key: nextPageKey, offset: 1, node: renderSlot(nextPageKey) },
+        ];
+    }, [nextPageKey, pageKey, paging, previousPageKey, renderSlot]);
+    const containerStyle = useMemo(() => ({
+        backgroundColor: palette.background,
+        maxWidth: metrics.cellSize * 7 * 1.6 * monthsToShow,
+    }), [metrics.cellSize, monthsToShow, palette.background]);
+    const weekdayRow = showWeekdayRow ? (_jsx(View, { style: monthsToShow > 1 ? TWO_UP_ROW : undefined, children: Array.from({ length: monthsToShow }, (_, index) => (_jsx(View, { style: COLUMN, children: _jsx(CalendarWeekdayRow, { maxFontSizeMultiplier: maxFontSizeMultiplier, metrics: metrics, palette: palette, renderWeekdayLabel: renderWeekdayLabel, showWeekNumbers: showWeekNumbers, styles: styles, weekStart: weekStart, weekdayLabels: weekdayLabels }) }, `weekday-row-${index}`))) })) : null;
+    return (_jsxs(KeyboardView, { accessibilityLabel: accessibilityLabel ?? title, onKeyDown: handleKeyDown, style: [CONTAINER, containerStyle, styles.container, style], testID: testID, children: [showHeader ? (_jsx(CalendarHeader, { canGoNext: canGoNext, canGoPrevious: canGoPrevious, headerContext: headerContext, labels: labels, maxFontSizeMultiplier: maxFontSizeMultiplier, metrics: metrics, mode: mode, onNext: goNext, onPrevious: goPrevious, palette: palette, renderHeader: renderHeader, showNavigationButtons: showNavigationButtons, styles: styles, title: title })) : null, weekdayRow, _jsx(CalendarPager, { activeRow: activeRow, collapse: collapse, onCommit: handleSwipeCommit, reduceMotion: reduceMotion, rowCount: rowCount, rowHeight: metrics.rowHeight, slots: slots, swipeEnabled: paging === 'swipe', testID: "calendar-pager" })] }));
+}
+export const Calendar = React.memo(forwardRef(CalendarContainer));
+export default Calendar;
+export * from './types';

package/components/uis/Calendar/CalendarDay.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactElement } from 'react';
+import type { CalendarChrome, CalendarDayModel, CalendarMarker } from './types';
+export type CalendarDayProps = {
+    day: CalendarDayModel;
+    /** Precomputed by the grid builder. A cell never formats a date itself. */
+    dayLabel: string;
+    accessibilityLabel: string;
+    isSelected: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+    /** Roving tab index: exactly one cell per page is tabbable. */
+    isTabbable: boolean;
+    /** Inert spacer for an out of month day when `showOutsideDays` is false. */
+    isHidden: boolean;
+    marker?: CalendarMarker;
+    chrome: CalendarChrome;
+};
+declare function CalendarDayContainer(props: CalendarDayProps): ReactElement;
+export declare const CalendarDay: React.MemoExoticComponent<typeof CalendarDayContainer>;
+export default CalendarDay;
+//# sourceMappingURL=CalendarDay.d.ts.map

package/components/uis/Calendar/CalendarDay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/CalendarDay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAKrE,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,cAAc,EAEf,MAAM,SAAS,CAAC;AAyCjB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,gBAAgB,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,UAAU,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAoDF,iBAAS,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAsMnE;AAcD,eAAO,MAAM,WAAW,wDAAiD,CAAC;AAE1E,eAAe,WAAW,CAAC"}