cpk-ui 0.7.0 → 0.8.0-beta.1

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

@@ -0,0 +1,22 @@
+import React, { type ReactElement, type ReactNode } from 'react';
+import type { CalendarHeaderContext, CalendarLabels, CalendarMetrics, CalendarPalette, CalendarStyles, CalendarViewMode } from './types';
+export type CalendarHeaderProps = {
+    title: string;
+    mode: CalendarViewMode;
+    palette: CalendarPalette;
+    metrics: CalendarMetrics;
+    labels: Required<CalendarLabels>;
+    styles: CalendarStyles;
+    maxFontSizeMultiplier: number;
+    showNavigationButtons: boolean;
+    canGoPrevious: boolean;
+    canGoNext: boolean;
+    onPrevious: () => void;
+    onNext: () => void;
+    renderHeader?: (ctx: CalendarHeaderContext) => ReactNode;
+    headerContext: CalendarHeaderContext;
+};
+declare function CalendarHeaderContainer({ title, mode, palette, metrics, labels, styles, maxFontSizeMultiplier, showNavigationButtons, canGoPrevious, canGoNext, onPrevious, onNext, renderHeader, headerContext, }: CalendarHeaderProps): ReactElement;
+export declare const CalendarHeader: React.MemoExoticComponent<typeof CalendarHeaderContainer>;
+export default CalendarHeader;
+//# sourceMappingURL=CalendarHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM/D,OAAO,KAAK,EACV,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAyBjB,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,eAAe,CAAC;IACzB,OAAO,EAAE,eAAe,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IACjC,MAAM,EAAE,cAAc,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,qBAAqB,KAAK,SAAS,CAAC;IACzD,aAAa,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAEF,iBAAS,uBAAuB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,MAAM,EACN,YAAY,EACZ,aAAa,GACd,EAAE,mBAAmB,GAAG,YAAY,CAiEpC;AAED,eAAO,MAAM,cAAc,2DAAsC,CAAC;AAElE,eAAe,cAAc,CAAC"}

package/components/uis/Calendar/CalendarHeader.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Text, View } from 'react-native';
+import { css } from 'kstyled';
+import { Icon } from '../Icon/Icon';
+import { IconButton } from '../IconButton/IconButton';
+const HEADER = css `
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+`;
+const TITLE = css `
+  flex: 1;
+  text-align: center;
+  font-weight: 600;
+`;
+const NAV_BUTTON = css `
+  background-color: transparent;
+  border-color: transparent;
+  padding: 4px;
+`;
+const SPACER = css `
+  width: 40px;
+`;
+function CalendarHeaderContainer({ title, mode, palette, metrics, labels, styles, maxFontSizeMultiplier, showNavigationButtons, canGoPrevious, canGoNext, onPrevious, onNext, renderHeader, headerContext, }) {
+    if (renderHeader) {
+        return _jsx(View, { testID: "calendar-header", children: renderHeader(headerContext) });
+    }
+    const iconSize = Math.round(metrics.headerFontSize * 1.1);
+    const previousLabel = mode === 'week' ? labels.previousWeek : labels.previousMonth;
+    const nextLabel = mode === 'week' ? labels.nextWeek : labels.nextMonth;
+    return (_jsxs(View, { style: [HEADER, { height: metrics.headerHeight }, styles.header], testID: "calendar-header", children: [showNavigationButtons ? (_jsx(IconButton, { accessibilityLabel: previousLabel, disabled: !canGoPrevious, iconElement: _jsx(Icon, { color: palette.navIcon, name: "CaretLeft", size: iconSize }), onPress: onPrevious, size: iconSize, styles: { container: NAV_BUTTON, disabled: NAV_BUTTON }, testID: "calendar-prev", type: "text" })) : (_jsx(View, { style: SPACER })), _jsx(Text, { accessibilityLiveRegion: "polite", accessibilityRole: "header", maxFontSizeMultiplier: maxFontSizeMultiplier, numberOfLines: 1, style: [
+                    TITLE,
+                    { color: palette.headerText, fontSize: metrics.headerFontSize },
+                    styles.headerTitle,
+                ], testID: "calendar-header-title", children: title }), showNavigationButtons ? (_jsx(IconButton, { accessibilityLabel: nextLabel, disabled: !canGoNext, iconElement: _jsx(Icon, { color: palette.navIcon, name: "CaretRight", size: iconSize }), onPress: onNext, size: iconSize, styles: { container: NAV_BUTTON, disabled: NAV_BUTTON }, testID: "calendar-next", type: "text" })) : (_jsx(View, { style: SPACER }))] }));
+}
+export const CalendarHeader = React.memo(CalendarHeaderContainer);
+export default CalendarHeader;

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

@@ -0,0 +1,46 @@
+import React, { type ReactElement, type ReactNode } from 'react';
+import type { CalendarChrome, CalendarCollapseProgress, CalendarDateKey, CalendarDisabledResolver, CalendarMarkerMap } from './types';
+import type { CalendarGrid } from './utils';
+export type CalendarPageProps = {
+    grid: CalendarGrid;
+    markers: CalendarMarkerMap;
+    chrome: CalendarChrome;
+    selectedKey: CalendarDateKey | null;
+    todayKey: CalendarDateKey;
+    tabbableKey: CalendarDateKey | null;
+    isDisabled: CalendarDisabledResolver;
+    disabledVersion: number;
+    showOutsideDays: boolean;
+    showWeekNumbers: boolean;
+    collapse: CalendarCollapseProgress;
+    activeRow: CalendarCollapseProgress;
+    /** Disables the collapse wrappers entirely when the page can never collapse. */
+    collapsible: boolean;
+    testID?: string;
+};
+declare function CalendarPageContainer({ grid, markers, chrome, selectedKey, todayKey, tabbableKey, isDisabled, disabledVersion, showOutsideDays, showWeekNumbers, collapse, activeRow, collapsible, testID, }: CalendarPageProps): ReactElement;
+export declare const CalendarPage: React.MemoExoticComponent<typeof CalendarPageContainer>;
+/** One mounted pager slot. `offset` is -1 (previous), 0 (current) or 1 (next). */
+export type CalendarPagerSlot = {
+    key: string;
+    offset: number;
+    node: ReactNode;
+};
+/**
+ * Shared by `CalendarPager.tsx` (gesture driven) and `CalendarPager.web.tsx`
+ * (scroll snap). Declared here so neither implementation has to import the other.
+ */
+export type CalendarPagerProps = {
+    slots: readonly CalendarPagerSlot[];
+    rowCount: number;
+    rowHeight: number;
+    collapse: CalendarCollapseProgress;
+    activeRow: CalendarCollapseProgress;
+    swipeEnabled: boolean;
+    reduceMotion: boolean;
+    /** `delta` is +1 for the next page, -1 for the previous one. */
+    onCommit: (delta: number) => void;
+    testID?: string;
+};
+export default CalendarPage;
+//# sourceMappingURL=CalendarPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPage.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/CalendarPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM/D,OAAO,KAAK,EACV,cAAc,EACd,wBAAwB,EACxB,eAAe,EACf,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAyC1C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,UAAU,EAAE,wBAAwB,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,SAAS,EAAE,wBAAwB,CAAC;IACpC,gFAAgF;IAChF,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,MAAM,EACN,WAAW,EACX,QAAQ,EACR,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,EACf,eAAe,EACf,QAAQ,EACR,SAAS,EACT,WAAW,EACX,MAAM,GACP,EAAE,iBAAiB,GAAG,YAAY,CAkClC;AAED,eAAO,MAAM,YAAY,yDAAoC,CAAC;AAE9D,kFAAkF;AAClF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,SAAS,EAAE,wBAAwB,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/uis/Calendar/CalendarPage.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { css } from 'kstyled';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { CalendarWeekRow } from './CalendarWeekRow';
+const GRID = css `
+  align-self: stretch;
+`;
+const COLLAPSE_FADE_END = 0.6;
+/**
+ * The week view is the month grid, clipped. Only this opacity and the frame
+ * transform move while the calendar collapses, so the transition costs zero
+ * React renders and zero remounts.
+ */
+function CollapsingRow({ weekIndex, collapse, activeRow, children, }) {
+    const animatedStyle = useAnimatedStyle(() => {
+        const progress = collapse.value;
+        if (progress <= 0 || weekIndex === activeRow.value) {
+            return { opacity: 1 };
+        }
+        const faded = progress / COLLAPSE_FADE_END;
+        return { opacity: 1 - (faded > 1 ? 1 : faded) };
+    });
+    return _jsx(Animated.View, { style: animatedStyle, children: children });
+}
+function CalendarPageContainer({ grid, markers, chrome, selectedKey, todayKey, tabbableKey, isDisabled, disabledVersion, showOutsideDays, showWeekNumbers, collapse, activeRow, collapsible, testID, }) {
+    return (_jsx(View, { style: GRID, testID: testID, children: grid.rows.map((row) => {
+            const weekRow = (_jsx(CalendarWeekRow, { chrome: chrome, disabledVersion: disabledVersion, isDisabled: isDisabled, markers: markers, row: row, selectedKey: selectedKey, showOutsideDays: showOutsideDays, showWeekNumbers: showWeekNumbers, tabbableKey: tabbableKey, todayKey: todayKey }));
+            return collapsible ? (_jsx(CollapsingRow, { activeRow: activeRow, collapse: collapse, weekIndex: row.weekIndex, children: weekRow }, row.days[0].key)) : (_jsx(View, { children: weekRow }, row.days[0].key));
+        }) }));
+}
+export const CalendarPage = React.memo(CalendarPageContainer);
+export default CalendarPage;

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

@@ -0,0 +1,11 @@
+import React, { type ReactElement } from 'react';
+import type { CalendarPagerProps } from './CalendarPage';
+/**
+ * Three pages are mounted and moved by one shared value. There is no `scrollTo`
+ * and no re-centering pass: the spring resets `pagerX` to 0 in the same frame the
+ * page model shifts, so a swipe never causes a visible jump.
+ */
+declare function CalendarPagerContainer({ slots, rowCount, rowHeight, collapse, activeRow, swipeEnabled, reduceMotion, onCommit, testID, }: CalendarPagerProps): ReactElement;
+export declare const CalendarPager: React.MemoExoticComponent<typeof CalendarPagerContainer>;
+export default CalendarPager;
+//# sourceMappingURL=CalendarPager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPager.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/CalendarPager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAarE,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,gBAAgB,CAAC;AAqE1E;;;;GAIG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,MAAM,GACP,EAAE,kBAAkB,GAAG,YAAY,CAkInC;AAED,eAAO,MAAM,aAAa,0DAAqC,CAAC;AAEhE,eAAe,aAAa,CAAC"}

package/components/uis/Calendar/CalendarPager.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { I18nManager, useWindowDimensions } from 'react-native';
+import { css } from 'kstyled';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+const CONTAINER = css `
+  align-self: stretch;
+  overflow: hidden;
+`;
+const PAGE = css `
+  position: absolute;
+  top: 0;
+  start: 0;
+  end: 0;
+`;
+const SPRING = {
+    damping: 22,
+    stiffness: 220,
+    mass: 0.7,
+    overshootClamping: true,
+};
+const INSTANT = { duration: 0 };
+/** Fraction of the page width, plus projected velocity, that commits a page turn. */
+const COMMIT_RATIO = 0.28;
+const VELOCITY_PROJECTION = 0.15;
+function PagerPage({ slot, direction, pageWidth, pagerX, collapse, activeRow, rowHeight, height, }) {
+    const { offset } = slot;
+    const animatedStyle = useAnimatedStyle(() => {
+        const transform = [
+            { translateX: offset * pageWidth.value * direction + pagerX.value },
+            { translateY: -activeRow.value * rowHeight * collapse.value },
+        ];
+        return { transform };
+    });
+    return (_jsx(Animated.View, { pointerEvents: offset === 0 ? 'auto' : 'none', style: [PAGE, { height }, animatedStyle], children: slot.node }));
+}
+/**
+ * Three pages are mounted and moved by one shared value. There is no `scrollTo`
+ * and no re-centering pass: the spring resets `pagerX` to 0 in the same frame the
+ * page model shifts, so a swipe never causes a visible jump.
+ */
+function CalendarPagerContainer({ slots, rowCount, rowHeight, collapse, activeRow, swipeEnabled, reduceMotion, onCommit, testID, }) {
+    const { width: windowWidth } = useWindowDimensions();
+    const direction = I18nManager.isRTL ? -1 : 1;
+    const pageWidth = useSharedValue(windowWidth);
+    const pagerX = useSharedValue(0);
+    const handleLayout = useCallback((event) => {
+        const nextWidth = event.nativeEvent.layout.width;
+        if (nextWidth > 0 && Math.abs(nextWidth - pageWidth.value) >= 0.5) {
+            // Shared value write only. A rotation or split view resize re-renders no cell.
+            pageWidth.value = nextWidth;
+        }
+    }, [pageWidth]);
+    const containerStyle = useAnimatedStyle(() => ({
+        height: rowHeight * (rowCount - (rowCount - 1) * collapse.value),
+    }));
+    const panGesture = useMemo(() => Gesture.Pan()
+        .enabled(swipeEnabled)
+        .activeOffsetX([-12, 12])
+        .failOffsetY([-8, 8])
+        .onUpdate((event) => {
+        'worklet';
+        if (collapse.value > 0.02 && collapse.value < 0.98) {
+            return;
+        }
+        pagerX.value = event.translationX;
+    })
+        .onEnd((event) => {
+        'worklet';
+        const width = pageWidth.value;
+        if (width <= 0 || (collapse.value > 0.02 && collapse.value < 0.98)) {
+            pagerX.value = 0;
+            return;
+        }
+        const projected = direction *
+            (event.translationX + event.velocityX * VELOCITY_PROJECTION);
+        const threshold = width * COMMIT_RATIO;
+        const delta = projected < -threshold ? 1 : projected > threshold ? -1 : 0;
+        if (delta === 0) {
+            pagerX.value = reduceMotion
+                ? withTiming(0, INSTANT)
+                : withSpring(0, SPRING);
+            return;
+        }
+        const target = -delta * width * direction;
+        const settle = (finished) => {
+            'worklet';
+            if (!finished) {
+                return;
+            }
+            pagerX.value = 0;
+            runOnJS(onCommit)(delta);
+        };
+        pagerX.value = reduceMotion
+            ? withTiming(target, INSTANT, settle)
+            : withSpring(target, SPRING, settle);
+    }), [
+        collapse,
+        direction,
+        onCommit,
+        pageWidth,
+        pagerX,
+        reduceMotion,
+        swipeEnabled,
+    ]);
+    const height = rowCount * rowHeight;
+    const pages = slots.map((slot) => (_jsx(PagerPage, { activeRow: activeRow, collapse: collapse, direction: direction, height: height, pageWidth: pageWidth, pagerX: pagerX, rowHeight: rowHeight, slot: slot }, slot.key)));
+    if (!swipeEnabled) {
+        return (_jsx(Animated.View, { onLayout: handleLayout, style: [CONTAINER, containerStyle], testID: testID, children: pages }));
+    }
+    return (_jsx(GestureDetector, { gesture: panGesture, children: _jsx(Animated.View, { onLayout: handleLayout, style: [CONTAINER, containerStyle], testID: testID, children: pages }) }));
+}
+export const CalendarPager = React.memo(CalendarPagerContainer);
+export default CalendarPager;

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

@@ -0,0 +1,11 @@
+import React, { type ReactElement } from 'react';
+import type { CalendarPagerProps } from './CalendarPage';
+/**
+ * Web build. Gesture handler needs a `GestureHandlerRootView` that a plain web
+ * consumer may not have mounted, so paging here is a scroll snap container that
+ * commits on settle. The collapse still runs through the same shared values.
+ */
+declare function CalendarPagerWebContainer({ slots, rowCount, rowHeight, collapse, activeRow, swipeEnabled, onCommit, testID, }: CalendarPagerProps): ReactElement;
+export declare const CalendarPager: React.MemoExoticComponent<typeof CalendarPagerWebContainer>;
+export default CalendarPager;
+//# sourceMappingURL=CalendarPager.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPager.web.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/CalendarPager.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAevD;;;;GAIG;AACH,iBAAS,yBAAyB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,GACP,EAAE,kBAAkB,GAAG,YAAY,CA6FnC;AAED,eAAO,MAAM,aAAa,6DAAwC,CAAC;AAEnE,eAAe,aAAa,CAAC"}

package/components/uis/Calendar/CalendarPager.web.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import { ScrollView, useWindowDimensions, View } from 'react-native';
+import { css } from 'kstyled';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+const CONTAINER = css `
+  align-self: stretch;
+  overflow: hidden;
+`;
+const CONTENT = css `
+  flex-direction: row;
+  align-items: flex-start;
+`;
+/** Time after the last scroll event at which the page is considered settled. */
+const SETTLE_DELAY = 140;
+/**
+ * Web build. Gesture handler needs a `GestureHandlerRootView` that a plain web
+ * consumer may not have mounted, so paging here is a scroll snap container that
+ * commits on settle. The collapse still runs through the same shared values.
+ */
+function CalendarPagerWebContainer({ slots, rowCount, rowHeight, collapse, activeRow, swipeEnabled, onCommit, testID, }) {
+    const { width: windowWidth } = useWindowDimensions();
+    const [pageWidth, setPageWidth] = useState(windowWidth);
+    const scrollRef = useRef(null);
+    const settleTimer = useRef(null);
+    const centerIndex = slots.findIndex((slot) => slot.offset === 0);
+    const restingOffset = Math.max(centerIndex, 0) * pageWidth;
+    const handleLayout = useCallback((event) => {
+        const nextWidth = event.nativeEvent.layout.width;
+        setPageWidth((current) => nextWidth > 0 && Math.abs(nextWidth - current) >= 0.5
+            ? nextWidth
+            : current);
+    }, []);
+    const recenter = useCallback(() => {
+        scrollRef.current?.scrollTo({ x: restingOffset, y: 0, animated: false });
+    }, [restingOffset]);
+    useEffect(() => {
+        recenter();
+    }, [recenter, slots]);
+    useEffect(() => () => {
+        if (settleTimer.current) {
+            clearTimeout(settleTimer.current);
+        }
+    }, []);
+    const handleScroll = useCallback((event) => {
+        const offsetX = event.nativeEvent.contentOffset.x;
+        if (settleTimer.current) {
+            clearTimeout(settleTimer.current);
+        }
+        settleTimer.current = setTimeout(() => {
+            if (pageWidth <= 0) {
+                return;
+            }
+            const index = Math.round(offsetX / pageWidth);
+            const delta = index - Math.max(centerIndex, 0);
+            recenter();
+            if (delta !== 0) {
+                onCommit(delta);
+            }
+        }, SETTLE_DELAY);
+    }, [centerIndex, onCommit, pageWidth, recenter]);
+    const containerStyle = useAnimatedStyle(() => ({
+        height: rowHeight * (rowCount - (rowCount - 1) * collapse.value),
+    }));
+    const pageStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: -activeRow.value * rowHeight * collapse.value }],
+    }));
+    const height = rowCount * rowHeight;
+    return (_jsx(Animated.View, { style: [CONTAINER, containerStyle], testID: testID, children: _jsx(ScrollView, { contentContainerStyle: CONTENT, horizontal: true, onLayout: handleLayout, onScroll: handleScroll, pagingEnabled: true, ref: scrollRef, scrollEnabled: swipeEnabled, scrollEventThrottle: 16, showsHorizontalScrollIndicator: false, children: slots.map((slot) => (_jsx(View, { style: { width: pageWidth, height }, children: _jsx(Animated.View, { style: pageStyle, children: slot.node }) }, slot.key))) }) }));
+}
+export const CalendarPager = React.memo(CalendarPagerWebContainer);
+export default CalendarPager;

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

@@ -0,0 +1,20 @@
+import React, { type ReactElement } from 'react';
+import type { CalendarChrome, CalendarDateKey, CalendarDisabledResolver, CalendarMarkerMap } from './types';
+import type { CalendarGridRow } from './utils';
+export type CalendarWeekRowProps = {
+    row: CalendarGridRow;
+    markers: CalendarMarkerMap;
+    chrome: CalendarChrome;
+    selectedKey: CalendarDateKey | null;
+    todayKey: CalendarDateKey;
+    tabbableKey: CalendarDateKey | null;
+    isDisabled: CalendarDisabledResolver;
+    /** Bumped whenever min/max/disabledDates/predicate identity changes. */
+    disabledVersion: number;
+    showOutsideDays: boolean;
+    showWeekNumbers: boolean;
+};
+declare function CalendarWeekRowContainer({ row, markers, chrome, selectedKey, todayKey, tabbableKey, isDisabled, showOutsideDays, showWeekNumbers, }: CalendarWeekRowProps): ReactElement;
+export declare const CalendarWeekRow: React.MemoExoticComponent<typeof CalendarWeekRowContainer>;
+export default CalendarWeekRow;
+//# sourceMappingURL=CalendarWeekRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekRow.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/CalendarWeekRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAiB7C,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,UAAU,EAAE,wBAAwB,CAAC;IACrC,wEAAwE;IACxE,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,iBAAS,wBAAwB,CAAC,EAChC,GAAG,EACH,OAAO,EACP,MAAM,EACN,WAAW,EACX,QAAQ,EACR,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,GAChB,EAAE,oBAAoB,GAAG,YAAY,CAiErC;AAmCD,eAAO,MAAM,eAAe,4DAG3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/uis/Calendar/CalendarWeekRow.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Text, View } from 'react-native';
+import { css } from 'kstyled';
+import { CalendarDay } from './CalendarDay';
+import { rowHasKey } from './utils';
+const ROW = css `
+  flex-direction: row;
+  align-items: stretch;
+`;
+const WEEK_NUMBER = css `
+  align-items: center;
+  justify-content: center;
+`;
+const WEEK_NUMBER_TEXT = css `
+  text-align: center;
+`;
+function CalendarWeekRowContainer({ row, markers, chrome, selectedKey, todayKey, tabbableKey, isDisabled, showOutsideDays, showWeekNumbers, }) {
+    const { labels, geometry, palette } = chrome;
+    const cells = [];
+    for (let index = 0; index < row.days.length; index++) {
+        const day = row.days[index];
+        const marker = markers[day.key];
+        const isToday = day.key === todayKey;
+        const isSelected = day.key === selectedKey;
+        const disabled = isDisabled(day, marker);
+        let accessibilityLabel = row.a11yLabels[index];
+        if (isToday) {
+            accessibilityLabel = `${accessibilityLabel}, ${labels.today}`;
+        }
+        if (marker?.accessibilityHint) {
+            accessibilityLabel = `${accessibilityLabel}, ${marker.accessibilityHint}`;
+        }
+        cells.push(_jsx(CalendarDay, { accessibilityLabel: accessibilityLabel, chrome: chrome, day: day, dayLabel: row.dayLabels[index], isDisabled: disabled, isHidden: day.isOutside && !showOutsideDays, isSelected: isSelected, isTabbable: day.key === tabbableKey, isToday: isToday, marker: marker }, day.key));
+    }
+    return (_jsxs(View, { accessibilityRole: "none", style: [ROW, geometry.row, chrome.styles.weekRow], testID: `calendar-week-${row.days[0].key}`, children: [showWeekNumbers ? (_jsx(View, { accessibilityLabel: `${labels.weekNumber} ${row.weekNumber}`, style: [WEEK_NUMBER, geometry.weekNumber], children: _jsx(Text, { maxFontSizeMultiplier: chrome.maxFontSizeMultiplier, numberOfLines: 1, style: [
+                        WEEK_NUMBER_TEXT,
+                        geometry.weekNumberText,
+                        { color: palette.weekNumberLabel },
+                    ], children: row.weekNumber }) })) : null, cells] }));
+}
+/**
+ * `prev`/`next` are compared for presence in this row first. A selection moving
+ * inside one row re-renders that row only, moving across a boundary re-renders two.
+ */
+const hasSameKeyPresence = (row, prev, next) => {
+    const inPrev = rowHasKey(row.days, prev);
+    const inNext = rowHasKey(row.days, next);
+    if (inPrev !== inNext) {
+        return false;
+    }
+    return !inNext || prev === next;
+};
+const areRowsEqual = (a, b) => a.row === b.row &&
+    a.chrome === b.chrome &&
+    a.markers === b.markers &&
+    a.disabledVersion === b.disabledVersion &&
+    a.showOutsideDays === b.showOutsideDays &&
+    a.showWeekNumbers === b.showWeekNumbers &&
+    hasSameKeyPresence(a.row, a.selectedKey, b.selectedKey) &&
+    hasSameKeyPresence(a.row, a.todayKey, b.todayKey) &&
+    hasSameKeyPresence(a.row, a.tabbableKey, b.tabbableKey);
+export const CalendarWeekRow = React.memo(CalendarWeekRowContainer, areRowsEqual);
+export default CalendarWeekRow;

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

@@ -0,0 +1,24 @@
+import React, { type ReactElement, type ReactNode } from 'react';
+import type { CalendarMetrics, CalendarPalette, CalendarStyles, CalendarWeekday, WeekStart } from './types';
+export type CalendarWeekdayRowProps = {
+    /** Seven precomputed labels, already rotated to start at `weekStart`. */
+    weekdayLabels: readonly string[];
+    weekStart: WeekStart;
+    palette: CalendarPalette;
+    metrics: CalendarMetrics;
+    styles: CalendarStyles;
+    maxFontSizeMultiplier: number;
+    showWeekNumbers: boolean;
+    renderWeekdayLabel?: (ctx: {
+        weekday: CalendarWeekday;
+        label: string;
+    }) => ReactNode;
+};
+/**
+ * Hidden from assistive tech: every day cell already announces its weekday, so
+ * reading "S M T W T F S" before the grid is pure noise. Web keeps the semantics.
+ */
+declare function CalendarWeekdayRowContainer({ weekdayLabels, weekStart, palette, metrics, styles, maxFontSizeMultiplier, showWeekNumbers, renderWeekdayLabel, }: CalendarWeekdayRowProps): ReactElement;
+export declare const CalendarWeekdayRow: React.MemoExoticComponent<typeof CalendarWeekdayRowContainer>;
+export default CalendarWeekdayRow;
+//# sourceMappingURL=CalendarWeekdayRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekdayRow.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/CalendarWeekdayRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,EACf,SAAS,EACV,MAAM,SAAS,CAAC;AAuBjB,MAAM,MAAM,uBAAuB,GAAG;IACpC,yEAAyE;IACzE,aAAa,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,OAAO,EAAE,eAAe,CAAC;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE;QACzB,OAAO,EAAE,eAAe,CAAC;QACzB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,SAAS,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,iBAAS,2BAA2B,CAAC,EACnC,aAAa,EACb,SAAS,EACT,OAAO,EACP,OAAO,EACP,MAAM,EACN,qBAAqB,EACrB,eAAe,EACf,kBAAkB,GACnB,EAAE,uBAAuB,GAAG,YAAY,CAqDxC;AAED,eAAO,MAAM,kBAAkB,+DAA0C,CAAC;AAE1E,eAAe,kBAAkB,CAAC"}

package/components/uis/Calendar/CalendarWeekdayRow.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Platform, Text, View } from 'react-native';
+import { css } from 'kstyled';
+const ROW = css `
+  flex-direction: row;
+  align-items: center;
+`;
+const LABEL_CELL = css `
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`;
+const LABEL_TEXT = css `
+  text-align: center;
+  font-weight: 500;
+`;
+const WEEK_NUMBER_SPACER = css `
+  align-items: center;
+  justify-content: center;
+`;
+/**
+ * Hidden from assistive tech: every day cell already announces its weekday, so
+ * reading "S M T W T F S" before the grid is pure noise. Web keeps the semantics.
+ */
+function CalendarWeekdayRowContainer({ weekdayLabels, weekStart, palette, metrics, styles, maxFontSizeMultiplier, showWeekNumbers, renderWeekdayLabel, }) {
+    const isWeb = Platform.OS === 'web';
+    return (_jsxs(View, { accessibilityElementsHidden: !isWeb, importantForAccessibility: isWeb ? 'auto' : 'no-hide-descendants', role: isWeb ? 'row' : undefined, style: [ROW, { height: metrics.weekdayRowHeight }, styles.weekdayRow], testID: "calendar-weekday-row", children: [showWeekNumbers ? (_jsx(View, { style: [WEEK_NUMBER_SPACER, { width: metrics.weekNumberWidth }] })) : null, weekdayLabels.map((label, index) => {
+                const weekday = (((weekStart + index) % 7) + 7) % 7;
+                return (_jsx(View, { role: isWeb ? 'columnheader' : undefined, style: LABEL_CELL, testID: `calendar-weekday-${index}`, children: renderWeekdayLabel ? (renderWeekdayLabel({ weekday: weekday, label })) : (_jsx(Text, { maxFontSizeMultiplier: maxFontSizeMultiplier, numberOfLines: 1, style: [
+                            LABEL_TEXT,
+                            {
+                                color: weekday === 0
+                                    ? palette.sundayText
+                                    : weekday === 6
+                                        ? palette.saturdayText
+                                        : palette.weekdayLabel,
+                                fontSize: metrics.weekdayFontSize,
+                            },
+                            styles.weekdayLabel,
+                        ], children: label })) }, `calendar-weekday-${index}`));
+            })] }));
+}
+export const CalendarWeekdayRow = React.memo(CalendarWeekdayRowContainer);
+export default CalendarWeekdayRow;

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

@@ -0,0 +1,18 @@
+import type { CalendarFormatters } from './types';
+/**
+ * All localized text comes from `Intl.DateTimeFormat`, which Hermes ships on both
+ * platforms. Constructing a formatter is the expensive part (~100us), formatting on a
+ * cached instance is ~1us, so every instance is created once per (locale, shape).
+ */
+type Shape = 'monthTitle' | 'weekdayNarrow' | 'dayNumber' | 'dayFull' | 'rangeDay';
+export declare function getFormat(locale: string, shape: Shape): Intl.DateTimeFormat | null;
+/** The device locale, or `en-US` when the runtime has no `Intl`. */
+export declare function resolveLocale(): string;
+export declare const DEFAULT_FORMATTERS: CalendarFormatters;
+/**
+ * A stable id per formatters object, so the grid LRU key changes when a caller
+ * swaps in different formatters but not when it re-renders with the same ones.
+ */
+export declare function getFormattersId(formatters: CalendarFormatters): string;
+export {};
+//# sourceMappingURL=intl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"intl.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/intl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAEhD;;;;GAIG;AACH,KAAK,KAAK,GACN,YAAY,GACZ,eAAe,GACf,WAAW,GACX,SAAS,GACT,UAAU,CAAC;AAef,wBAAgB,SAAS,CACvB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,GACX,IAAI,CAAC,cAAc,GAAG,IAAI,CA2B5B;AAED,oEAAoE;AACpE,wBAAgB,aAAa,IAAI,MAAM,CAUtC;AAkGD,eAAO,MAAM,kBAAkB,EAAE,kBAM/B,CAAC;AAKH;;;GAGG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,kBAAkB,GAAG,MAAM,CActE"}