cpk-ui 0.7.0 → 0.8.0-beta.1

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"}

package/components/uis/Calendar/CalendarDay.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
+import { css } from 'kstyled';
+import { isSameMarker } from './utils';
+const CELL = css `
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+  border-radius: 10px;
+`;
+const PILL = css `
+  align-items: center;
+  justify-content: center;
+`;
+const DAY_TEXT = css `
+  text-align: center;
+  font-weight: 500;
+`;
+const DECORATIONS = css `
+  position: absolute;
+  bottom: 0;
+  start: 0;
+  end: 0;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const DOT_ROW = css `
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+`;
+const BADGE_TEXT = css `
+  text-align: center;
+`;
+function resolveTextColor(args) {
+    const { palette, isSelected, isDisabled, isToday, isOutside, weekday, markerTextColor, } = args;
+    if (isSelected) {
+        return palette.selectedText;
+    }
+    if (isDisabled) {
+        return palette.disabledText;
+    }
+    if (isOutside) {
+        return palette.outsideText;
+    }
+    if (markerTextColor) {
+        return markerTextColor;
+    }
+    if (isToday) {
+        return palette.todayText;
+    }
+    if (weekday === 0) {
+        return palette.sundayText;
+    }
+    if (weekday === 6) {
+        return palette.saturdayText;
+    }
+    return palette.dayText;
+}
+function CalendarDayContainer(props) {
+    const { day, dayLabel, accessibilityLabel, isSelected, isToday, isDisabled, isTabbable, isHidden, marker, chrome, } = props;
+    const { palette, metrics, geometry, styles } = chrome;
+    const pillStyle = useMemo(() => {
+        if (isSelected) {
+            return {
+                backgroundColor: marker?.selectedColor ?? palette.selectedBackground,
+            };
+        }
+        if (isToday) {
+            return { borderWidth: 1.5, borderColor: palette.todayRing };
+        }
+        return null;
+    }, [isSelected, isToday, marker?.selectedColor, palette]);
+    const textStyle = useMemo(() => ({
+        color: resolveTextColor({
+            palette,
+            isSelected,
+            isDisabled,
+            isToday,
+            isOutside: day.isOutside,
+            weekday: day.weekday,
+            markerTextColor: marker?.textColor,
+        }),
+        opacity: isDisabled ? 0.55 : 1,
+    }), [
+        day.isOutside,
+        day.weekday,
+        isDisabled,
+        isSelected,
+        isToday,
+        marker?.textColor,
+        palette,
+    ]);
+    const handlePress = useCallback(() => {
+        if (isDisabled) {
+            chrome.onDisabledPress?.(day.key);
+            return;
+        }
+        chrome.onPress(day.key);
+    }, [chrome, day.key, isDisabled]);
+    const handleLongPress = useCallback(() => {
+        if (isDisabled) {
+            return;
+        }
+        chrome.onLongPress?.(day.key);
+    }, [chrome, day.key, isDisabled]);
+    const cellStyle = useCallback(({ pressed }) => pressed && !isDisabled
+        ? [
+            CELL,
+            geometry.cell,
+            { backgroundColor: palette.underlay },
+            styles.dayCell,
+            isSelected ? styles.selectedDayCell : null,
+            isToday ? styles.todayDayCell : null,
+        ]
+        : [
+            CELL,
+            geometry.cell,
+            styles.dayCell,
+            isSelected ? styles.selectedDayCell : null,
+            isToday ? styles.todayDayCell : null,
+        ], [geometry.cell, isDisabled, isSelected, isToday, palette.underlay, styles]);
+    if (isHidden) {
+        return (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [CELL, geometry.cell], testID: `calendar-day-${day.key}-spacer` }));
+    }
+    const dots = chrome.showDots && marker?.dots?.length
+        ? marker.dots.slice(0, chrome.maxDots)
+        : null;
+    const badgeText = chrome.showBadges && marker?.badgeText ? marker.badgeText : null;
+    return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", accessibilityState: { disabled: isDisabled, selected: isSelected }, "aria-disabled": isDisabled, "aria-selected": isSelected, onLongPress: chrome.onLongPress ? handleLongPress : undefined, onPress: handlePress, style: cellStyle, tabIndex: isTabbable ? 0 : -1, testID: `calendar-day-${day.key}`, children: chrome.renderDay ? (chrome.renderDay({
+            day,
+            isSelected,
+            isToday,
+            isDisabled,
+            marker,
+            palette,
+            cellSize: metrics.cellSize,
+        })) : (_jsxs(_Fragment, { children: [_jsx(View, { style: [PILL, geometry.pill, pillStyle], children: _jsx(Text, { adjustsFontSizeToFit: Platform.OS === 'ios', maxFontSizeMultiplier: chrome.maxFontSizeMultiplier, minimumFontScale: 0.8, numberOfLines: 1, style: [
+                            DAY_TEXT,
+                            geometry.dayText,
+                            textStyle,
+                            styles.dayText,
+                            day.isOutside ? styles.outsideDayText : null,
+                            isDisabled ? styles.disabledDayText : null,
+                            isSelected ? styles.selectedDayText : null,
+                            isToday ? styles.todayDayText : null,
+                        ], children: dayLabel }) }), dots || badgeText ? (_jsxs(View, { importantForAccessibility: "no", pointerEvents: "none", style: DECORATIONS, children: [dots ? (_jsx(View, { style: [DOT_ROW, geometry.dotRow, styles.dotRow], children: dots.map((dot) => (_jsx(View, { style: [
+                                    geometry.dot,
+                                    { backgroundColor: dot.color ?? palette.dot },
+                                    styles.dot,
+                                ] }, dot.key))) })) : null, badgeText ? (_jsx(Text, { maxFontSizeMultiplier: chrome.maxFontSizeMultiplier, numberOfLines: 1, style: [
+                                BADGE_TEXT,
+                                geometry.badgeText,
+                                { color: marker?.badgeColor ?? palette.badgeText },
+                                styles.badgeText,
+                            ], children: badgeText })) : null] })) : null] })) }));
+}
+const areDaysEqual = (a, b) => a.day === b.day &&
+    a.dayLabel === b.dayLabel &&
+    a.isSelected === b.isSelected &&
+    a.isToday === b.isToday &&
+    a.isDisabled === b.isDisabled &&
+    a.isTabbable === b.isTabbable &&
+    a.isHidden === b.isHidden &&
+    a.chrome === b.chrome &&
+    a.accessibilityLabel === b.accessibilityLabel &&
+    isSameMarker(a.marker, b.marker);
+export const CalendarDay = React.memo(CalendarDayContainer, areDaysEqual);
+export default CalendarDay;