cpk-ui 0.7.0 → 0.8.0-beta.0

package/components/uis/Calendar/utils.js

@@ -0,0 +1,429 @@
+const MS_PER_DAY = 86_400_000;
+export const clamp = (value, min, max) => value < min ? min : value > max ? max : value;
+/**
+ * Every calendar `Date` in this component is anchored at LOCAL NOON.
+ * Local midnight does not exist in zones whose DST transition happens at 00:00
+ * (America/Santiago, America/Havana, …) and noon is more than 11 hours away from
+ * every real world transition, so no shift can move a date to another calendar day.
+ */
+export const localNoon = (year, month0, day) => new Date(year, month0, day, 12, 0, 0, 0);
+const pad2 = (n) => (n < 10 ? `0${n}` : `${n}`);
+export const toDayKey = (date) => `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+export const toMonthKey = (date) => `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;
+export const isMonthKey = (key) => key.length === 7;
+/** Field wise construction. Never `new Date('2026-08-24')`, which ECMA-262 parses as UTC. */
+export const fromDayKey = (key) => localNoon(+key.slice(0, 4), +key.slice(5, 7) - 1, +key.slice(8, 10));
+export const fromMonthKey = (key) => localNoon(+key.slice(0, 4), +key.slice(5, 7) - 1, 1);
+/** Field arithmetic, so month, year and DST boundaries normalize correctly. */
+export const addDays = (date, amount) => localNoon(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+export const daysInMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+export const startOfMonth = (date) => localNoon(date.getFullYear(), date.getMonth(), 1);
+export const addMonths = (date, amount) => {
+    const target = localNoon(date.getFullYear(), date.getMonth() + amount, 1);
+    return localNoon(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), daysInMonth(target)));
+};
+export const startOfWeek = (date, weekStart) => addDays(date, -((((date.getDay() - weekStart) % 7) + 7) % 7));
+/** The year is compared. Comparing only month and date highlights the same day of any year. */
+export const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+/**
+ * Safe because both dates are local noon: a DST shift of one hour is 0.042 days,
+ * which `Math.round` can never turn into a different day count.
+ */
+export const diffInCalendarDays = (a, b) => Math.round((a.getTime() - b.getTime()) / MS_PER_DAY);
+export const weeksInMonth = (date, weekStart) => {
+    const first = startOfMonth(date);
+    const offset = diffInCalendarDays(first, startOfWeek(first, weekStart));
+    return Math.ceil((offset + daysInMonth(date)) / 7);
+};
+const getWeekYear = (date, weekStart, firstWeekContainsDate) => {
+    const year = date.getFullYear();
+    const startOfNextYear = startOfWeek(localNoon(year + 1, 0, firstWeekContainsDate), weekStart);
+    const startOfThisYear = startOfWeek(localNoon(year, 0, firstWeekContainsDate), weekStart);
+    const time = date.getTime();
+    if (time >= startOfNextYear.getTime()) {
+        return year + 1;
+    }
+    if (time >= startOfThisYear.getTime()) {
+        return year;
+    }
+    return year - 1;
+};
+/**
+ * ISO 8601 numbering when `weekStart` is Monday, otherwise the
+ * "the week containing Jan 1 is week 1" convention that US/KR/JP calendars show.
+ */
+export const getWeekNumber = (date, weekStart) => {
+    const firstWeekContainsDate = weekStart === 1 ? 4 : 1;
+    const weekYear = getWeekYear(date, weekStart, firstWeekContainsDate);
+    const startOfWeekYear = startOfWeek(localNoon(weekYear, 0, firstWeekContainsDate), weekStart);
+    return (Math.round(diffInCalendarDays(startOfWeek(date, weekStart), startOfWeekYear) / 7) + 1);
+};
+/** CLDR `weekData/firstDay`, reduced to the regions that do not start on Monday. */
+const SUNDAY_FIRST = new Set([
+    'AR',
+    'BO',
+    'BR',
+    'CA',
+    'CL',
+    'CN',
+    'CO',
+    'DO',
+    'EC',
+    'GT',
+    'HK',
+    'HN',
+    'ID',
+    'IL',
+    'IN',
+    'JM',
+    'JP',
+    'KE',
+    'KR',
+    'MO',
+    'MX',
+    'NI',
+    'PA',
+    'PE',
+    'PH',
+    'PR',
+    'PY',
+    'SG',
+    'TH',
+    'TW',
+    'US',
+    'UY',
+    'VE',
+    'ZA',
+    'ZW',
+]);
+const SATURDAY_FIRST = new Set([
+    'AE',
+    'AF',
+    'BH',
+    'DJ',
+    'DZ',
+    'EG',
+    'IQ',
+    'IR',
+    'JO',
+    'KW',
+    'LY',
+    'OM',
+    'QA',
+    'SA',
+    'SD',
+    'SY',
+    'YE',
+]);
+/** Fallback for runtimes without `Intl.Locale`, covering the languages cpk-ui ships stories for. */
+const LANGUAGE_REGION = {
+    ar: 'SA',
+    de: 'DE',
+    en: 'US',
+    es: 'ES',
+    fr: 'FR',
+    he: 'IL',
+    id: 'ID',
+    ja: 'JP',
+    ko: 'KR',
+    pt: 'BR',
+    th: 'TH',
+    vi: 'VN',
+    zh: 'CN',
+};
+export const regionOf = (locale) => {
+    const normalized = locale.replace(/_/g, '-');
+    const parts = normalized.split('-');
+    for (let i = 1; i < parts.length; i++) {
+        if (/^[A-Za-z]{2}$/.test(parts[i])) {
+            return parts[i].toUpperCase();
+        }
+    }
+    const intl = Intl;
+    if (typeof intl.Locale === 'function') {
+        try {
+            const region = new intl.Locale(normalized).maximize().region;
+            if (region) {
+                return region.toUpperCase();
+            }
+        }
+        catch {
+            // Exotic or malformed tag, fall through to the language table.
+        }
+    }
+    return LANGUAGE_REGION[parts[0].toLowerCase()] ?? '';
+};
+export const resolveWeekStart = (locale) => {
+    const region = regionOf(locale);
+    if (SATURDAY_FIRST.has(region)) {
+        return 6;
+    }
+    if (SUNDAY_FIRST.has(region)) {
+        return 0;
+    }
+    return 1;
+};
+/** Accepts a `Date` or an already canonical key and always answers with a day key. */
+export const toDateKeyInput = (value) => (typeof value === 'string' ? value : toDayKey(value));
+/**
+ * Resolves a page anchor to the first rendered day of that page.
+ * Month pages anchor on the first of the month, week pages on the week start.
+ */
+export const pageFirstDate = (pageKey, mode, weekStart) => {
+    if (mode === 'week') {
+        const date = isMonthKey(pageKey)
+            ? fromMonthKey(pageKey)
+            : fromDayKey(pageKey);
+        return startOfWeek(date, weekStart);
+    }
+    return isMonthKey(pageKey)
+        ? fromMonthKey(pageKey)
+        : startOfMonth(fromDayKey(pageKey));
+};
+/** The last day that logically belongs to a page, ignoring the out of month padding. */
+export const pageLastDate = (pageKey, mode, weekStart, monthsToShow) => {
+    const first = pageFirstDate(pageKey, mode, weekStart);
+    return mode === 'week'
+        ? addDays(first, 6)
+        : addDays(addMonths(first, monthsToShow), -1);
+};
+export const toPageKey = (date, mode, weekStart) => mode === 'week' ? toDayKey(startOfWeek(date, weekStart)) : toMonthKey(date);
+export const normalizePageKey = (value, mode, weekStart, monthsToShow) => {
+    const date = typeof value === 'string'
+        ? isMonthKey(value)
+            ? fromMonthKey(value)
+            : fromDayKey(value)
+        : value;
+    if (mode === 'week') {
+        return toDayKey(startOfWeek(date, weekStart));
+    }
+    if (monthsToShow > 1) {
+        const anchor = localNoon(date.getFullYear(), Math.floor(date.getMonth() / monthsToShow) * monthsToShow, 1);
+        return toMonthKey(anchor);
+    }
+    return toMonthKey(date);
+};
+/** Steps a page anchor by `delta` pages: months in month mode, weeks in week mode. */
+export const addPages = (pageKey, delta, mode, weekStart, monthsToShow) => {
+    const first = pageFirstDate(pageKey, mode, weekStart);
+    return mode === 'week'
+        ? toDayKey(addDays(first, delta * 7))
+        : toMonthKey(addMonths(first, delta * monthsToShow));
+};
+export function buildMonthGrid(month, weekStart, fixedWeeks, showWeekNumbers) {
+    const gridStart = startOfWeek(startOfMonth(month), weekStart);
+    const rowCount = fixedWeeks ? 6 : weeksInMonth(month, weekStart);
+    const cellCount = rowCount * 7;
+    const targetMonth = month.getMonth();
+    const cells = new Array(cellCount);
+    for (let i = 0; i < cellCount; i++) {
+        const date = addDays(gridStart, i);
+        cells[i] = {
+            key: toDayKey(date),
+            date,
+            dayOfMonth: date.getDate(),
+            weekday: date.getDay(),
+            isOutside: date.getMonth() !== targetMonth,
+            weekIndex: (i / 7) | 0,
+            weekNumber: showWeekNumbers ? getWeekNumber(date, weekStart) : 0,
+        };
+    }
+    return Object.freeze(cells);
+}
+export function buildWeekGrid(anchor, weekStart, showWeekNumbers) {
+    const gridStart = startOfWeek(anchor, weekStart);
+    const cells = new Array(7);
+    for (let i = 0; i < 7; i++) {
+        const date = addDays(gridStart, i);
+        cells[i] = {
+            key: toDayKey(date),
+            date,
+            dayOfMonth: date.getDate(),
+            weekday: date.getDay(),
+            isOutside: false,
+            weekIndex: 0,
+            weekNumber: showWeekNumbers ? getWeekNumber(date, weekStart) : 0,
+        };
+    }
+    return Object.freeze(cells);
+}
+const GRID_CACHE_LIMIT = 24;
+const gridCache = new Map();
+/**
+ * Module level LRU. Re-visiting a page (swiping back and forth) is a `Map.get`,
+ * so `Intl.DateTimeFormat#format` runs at most once per (page, locale) pair.
+ */
+export function getCalendarGrid(request) {
+    const { pageKey, mode, weekStart, fixedWeeks, showWeekNumbers, locale, formatters, formattersId, } = request;
+    const cacheKey = `${pageKey}|${mode}|${weekStart}|${fixedWeeks ? 1 : 0}|${showWeekNumbers ? 1 : 0}|${locale}|${formattersId}`;
+    const cached = gridCache.get(cacheKey);
+    if (cached) {
+        gridCache.delete(cacheKey);
+        gridCache.set(cacheKey, cached);
+        return cached;
+    }
+    const first = pageFirstDate(pageKey, mode, weekStart);
+    const days = mode === 'week'
+        ? buildWeekGrid(first, weekStart, showWeekNumbers)
+        : buildMonthGrid(first, weekStart, fixedWeeks, showWeekNumbers);
+    const dayLabels = new Array(days.length);
+    const a11yLabels = new Array(days.length);
+    for (let i = 0; i < days.length; i++) {
+        dayLabels[i] = formatters.dayNumber(days[i].date, locale);
+        a11yLabels[i] = formatters.dayAccessibilityLabel(days[i].date, locale);
+    }
+    const rowCount = days.length / 7;
+    const rows = new Array(rowCount);
+    for (let row = 0; row < rowCount; row++) {
+        const from = row * 7;
+        rows[row] = Object.freeze({
+            weekIndex: row,
+            weekNumber: days[from].weekNumber,
+            days: Object.freeze(days.slice(from, from + 7)),
+            dayLabels: Object.freeze(dayLabels.slice(from, from + 7)),
+            a11yLabels: Object.freeze(a11yLabels.slice(from, from + 7)),
+        });
+    }
+    const grid = Object.freeze({
+        days,
+        rows: Object.freeze(rows),
+        rowCount,
+        firstKey: days[0].key,
+        lastKey: days[days.length - 1].key,
+    });
+    gridCache.set(cacheKey, grid);
+    if (gridCache.size > GRID_CACHE_LIMIT) {
+        const oldest = gridCache.keys().next().value;
+        if (oldest !== undefined) {
+            gridCache.delete(oldest);
+        }
+    }
+    return grid;
+}
+/** Test seam. Keeps the LRU from leaking state between test files. */
+export const clearCalendarGridCache = () => {
+    gridCache.clear();
+};
+/**
+ * True when the row's 7 keys contain `key`.
+ * Keys are sorted and consecutive, so this is two string compares, never a scan.
+ */
+export const rowHasKey = (days, key) => key !== null &&
+    days.length > 0 &&
+    key >= days[0].key &&
+    key <= days[days.length - 1].key;
+/** Identity first, then a shallow value compare so a rebuilt but equal marker still bails. */
+export function isSameMarker(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (!a || !b) {
+        return false;
+    }
+    return (a.dots === b.dots &&
+        a.badgeText === b.badgeText &&
+        a.badgeColor === b.badgeColor &&
+        a.selectedColor === b.selectedColor &&
+        a.textColor === b.textColor &&
+        a.disabled === b.disabled &&
+        a.accessibilityHint === b.accessibilityHint);
+}
+const HEX_SHORT = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/i;
+const HEX_LONG = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i;
+const RGB_FN = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i;
+export function parseColor(color) {
+    const value = color.trim();
+    const short = HEX_SHORT.exec(value);
+    if (short) {
+        return {
+            r: parseInt(short[1] + short[1], 16),
+            g: parseInt(short[2] + short[2], 16),
+            b: parseInt(short[3] + short[3], 16),
+        };
+    }
+    const long = HEX_LONG.exec(value);
+    if (long) {
+        return {
+            r: parseInt(long[1], 16),
+            g: parseInt(long[2], 16),
+            b: parseInt(long[3], 16),
+        };
+    }
+    const fn = RGB_FN.exec(value);
+    if (fn) {
+        return { r: +fn[1], g: +fn[2], b: +fn[3] };
+    }
+    return null;
+}
+const srgbToLinear = (channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+/** WCAG relative luminance, or `null` when the colour cannot be parsed. */
+export function relativeLuminance(color) {
+    const rgb = parseColor(color);
+    if (!rgb) {
+        return null;
+    }
+    return (0.2126 * srgbToLinear(rgb.r / 255) +
+        0.7152 * srgbToLinear(rgb.g / 255) +
+        0.0722 * srgbToLinear(rgb.b / 255));
+}
+/**
+ * Picks the readable label colour for a background.
+ * The 0.45 threshold makes a saturated yellow resolve to the dark label.
+ */
+export function readableTextOn(background, light, dark) {
+    const luminance = relativeLuminance(background);
+    if (luminance === null) {
+        return light;
+    }
+    return luminance > 0.45 ? dark : light;
+}
+const SIZE_PRESETS = {
+    compact: { cellSize: 36, rowGap: 4, weekdayRowHeight: 24, headerHeight: 44 },
+    regular: { cellSize: 44, rowGap: 6, weekdayRowHeight: 28, headerHeight: 48 },
+    expanded: { cellSize: 56, rowGap: 8, weekdayRowHeight: 32, headerHeight: 56 },
+};
+/**
+ * There is no measure pass in the vertical axis: every value below is a pure
+ * function of `size` and the device font scale, so the grid height is identical
+ * for every month and a swipe causes zero layout thrash.
+ */
+export function resolveMetrics(size, fontScale, maxFontSizeMultiplier) {
+    const base = typeof size === 'number'
+        ? {
+            cellSize: size,
+            rowGap: clamp(Math.round(size * 0.14), 4, 10),
+            weekdayRowHeight: Math.round(size * 0.62),
+            headerHeight: Math.round(size * 1.1),
+        }
+        : (SIZE_PRESETS[size] ?? SIZE_PRESETS.regular);
+    // Guards a non finite font scale from an exotic runtime, and keeps a device
+    // reporting a scale below 1 from shrinking the touch targets.
+    const requested = Number.isFinite(fontScale) ? fontScale : 1;
+    const cap = Number.isFinite(maxFontSizeMultiplier)
+        ? maxFontSizeMultiplier
+        : 1;
+    const scale = clamp(Math.min(requested, cap), 1, 4);
+    const cellSize = clamp(Math.round(base.cellSize * scale), 32, 96);
+    const rowHeight = cellSize + base.rowGap;
+    const numberSize = clamp(Math.round(cellSize * 0.68), 22, 72);
+    const dotSize = clamp(Math.round(cellSize * 0.11), 4, 8);
+    const dotRowHeight = dotSize + 1;
+    return Object.freeze({
+        cellSize,
+        rowGap: base.rowGap,
+        rowHeight,
+        weekdayRowHeight: Math.round(base.weekdayRowHeight * scale),
+        headerHeight: Math.round(base.headerHeight * scale),
+        numberSize,
+        dayFontSize: clamp(Math.round(cellSize * 0.34), 11, 24),
+        weekdayFontSize: clamp(Math.round(cellSize * 0.26), 10, 18),
+        headerFontSize: clamp(Math.round(cellSize * 0.4), 14, 26),
+        badgeFontSize: clamp(Math.round(cellSize * 0.19), 8, 11),
+        dotSize,
+        dotRowHeight,
+        pillOffset: Math.max(1, Math.round((rowHeight - numberSize - dotRowHeight) / 2)),
+        weekNumberWidth: clamp(Math.round(cellSize * 0.62), 20, 48),
+    });
+}

package/components/uis/ParallaxHeader/ParallaxHeader.d.ts

@@ -0,0 +1,44 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ScrollHandlerProcessed, type SharedValue } from 'react-native-reanimated';
+export type ParallaxHeaderStyles = {
+    container?: StyleProp<ViewStyle>;
+    surface?: StyleProp<ViewStyle>;
+    expandedContent?: StyleProp<ViewStyle>;
+    collapsedContent?: StyleProp<ViewStyle>;
+    navigation?: StyleProp<ViewStyle>;
+};
+export type ParallaxHeaderProps = {
+    /** Scroll offset from an Animated ScrollView, FlatList, or FlashList. */
+    scrollOffset: SharedValue<number>;
+    /** Full header height at scroll position zero. */
+    expandedHeight: number;
+    /** Sticky header height after the collapse distance is consumed. */
+    collapsedHeight: number;
+    /** Defaults to the active cpk-ui basic surface token. */
+    backgroundColor?: string;
+    /** Presentation shown below the persistent navigation while expanded. */
+    expandedContent?: ReactNode;
+    /** Presentation cross-faded into the compact header. */
+    collapsedContent?: ReactNode;
+    /** Interactive controls that stay mounted and fixed at the top. */
+    children?: ReactNode;
+    styles?: ParallaxHeaderStyles;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+export type ParallaxHeaderController = {
+    scrollOffset: SharedValue<number>;
+    onScroll: ScrollHandlerProcessed;
+};
+/**
+ * Creates one UI-thread scroll source shared by the header and any animated
+ * ScrollView-compatible list. The handler never schedules a React render.
+ */
+export declare function useParallaxHeader(): ParallaxHeaderController;
+/**
+ * A list-agnostic collapsing header. Its layout height is fixed; scroll only
+ * drives compositor-friendly transforms and opacity on the UI thread.
+ */
+export declare function ParallaxHeader({ scrollOffset, expandedHeight, collapsedHeight, backgroundColor, expandedContent, collapsedContent, children, styles, style, testID, }: ParallaxHeaderProps): ReactElement;
+//# sourceMappingURL=ParallaxHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParallaxHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/ParallaxHeader/ParallaxHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAOf,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,yEAAyE;IACzE,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,kDAAkD;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,EAAE,sBAAsB,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,wBAAwB,CAO5D;AA4BD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAA0B,GAC3B,EAAE,mBAAmB,GAAG,YAAY,CA8GpC"}

package/components/uis/ParallaxHeader/ParallaxHeader.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, } from 'react';
+import { AccessibilityInfo, StyleSheet, View, } from 'react-native';
+import Animated, { Extrapolation, interpolate, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
+import { useTheme } from '../../../providers/ThemeProvider';
+/**
+ * Creates one UI-thread scroll source shared by the header and any animated
+ * ScrollView-compatible list. The handler never schedules a React render.
+ */
+export function useParallaxHeader() {
+    const scrollOffset = useSharedValue(0);
+    const onScroll = useAnimatedScrollHandler((event) => {
+        scrollOffset.set(Math.max(event.contentOffset.y, 0));
+    });
+    return { onScroll, scrollOffset };
+}
+function useReducedMotionPreference() {
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        let mounted = true;
+        const update = (next) => {
+            if (mounted)
+                setReduced(next);
+        };
+        AccessibilityInfo.isReduceMotionEnabled()
+            .then(update)
+            .catch(() => undefined);
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', update);
+        return () => {
+            mounted = false;
+            subscription.remove();
+        };
+    }, []);
+    return reduced;
+}
+/**
+ * A list-agnostic collapsing header. Its layout height is fixed; scroll only
+ * drives compositor-friendly transforms and opacity on the UI thread.
+ */
+export function ParallaxHeader({ scrollOffset, expandedHeight, collapsedHeight, backgroundColor, expandedContent, collapsedContent, children, styles, style, testID = 'parallax-header', }) {
+    const { theme } = useTheme();
+    const reduceMotion = useReducedMotionPreference();
+    const compactHeight = Math.max(collapsedHeight, 0);
+    const fullHeight = Math.max(expandedHeight, compactHeight);
+    const collapseDistance = fullHeight - compactHeight;
+    const progress = useDerivedValue(() => {
+        if (collapseDistance === 0)
+            return 1;
+        return Math.min(Math.max(scrollOffset.get() / collapseDistance, 0), 1);
+    });
+    const surfaceStyle = useAnimatedStyle(() => ({
+        transform: [
+            {
+                translateY: -Math.min(Math.max(scrollOffset.get(), 0), collapseDistance),
+            },
+        ],
+    }));
+    const expandedStyle = useAnimatedStyle(() => {
+        const value = progress.get();
+        return {
+            opacity: reduceMotion
+                ? value < 1
+                    ? 1
+                    : 0
+                : interpolate(value, [0, 0.72, 1], [1, 0, 0], Extrapolation.CLAMP),
+            transform: [
+                {
+                    translateY: reduceMotion
+                        ? 0
+                        : interpolate(value, [0, 1], [0, -12], Extrapolation.CLAMP),
+                },
+            ],
+        };
+    });
+    const collapsedStyle = useAnimatedStyle(() => {
+        const value = progress.get();
+        return {
+            opacity: reduceMotion
+                ? value >= 1
+                    ? 1
+                    : 0
+                : interpolate(value, [0, 0.68, 1], [0, 0, 1], Extrapolation.CLAMP),
+        };
+    });
+    return (_jsxs(View, { pointerEvents: "box-none", style: [
+            componentStyles.container,
+            { height: fullHeight },
+            styles?.container,
+            style,
+        ], testID: testID, children: [_jsx(Animated.View, { pointerEvents: "none", style: [
+                    componentStyles.surface,
+                    {
+                        backgroundColor: backgroundColor ?? theme.bg.basic,
+                        height: fullHeight,
+                    },
+                    styles?.surface,
+                    surfaceStyle,
+                ], testID: `${testID}-surface`, children: _jsx(Animated.View, { style: [
+                        componentStyles.expandedContent,
+                        { paddingTop: compactHeight },
+                        styles?.expandedContent,
+                        expandedStyle,
+                    ], testID: `${testID}-expanded`, children: expandedContent }) }), _jsx(Animated.View, { pointerEvents: "none", style: [
+                    componentStyles.collapsedContent,
+                    { height: compactHeight },
+                    styles?.collapsedContent,
+                    collapsedStyle,
+                ], testID: `${testID}-collapsed`, children: collapsedContent }), _jsx(View, { pointerEvents: "box-none", style: [
+                    componentStyles.navigation,
+                    { height: compactHeight },
+                    styles?.navigation,
+                ], testID: `${testID}-navigation`, children: children })] }));
+}
+const componentStyles = StyleSheet.create({
+    collapsedContent: {
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    container: {
+        left: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        zIndex: 1,
+    },
+    expandedContent: { flex: 1 },
+    navigation: {
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    surface: {
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+});

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/common/ErrorBoundary/ErrorBoundary';
 export * from './providers';
 export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
+export * from './components/uis/Calendar/Calendar';
 export * from './components/uis/Card/Card';
 export * from './components/uis/Checkbox/Checkbox';
 export * from './components/uis/CustomPressable/CustomPressable';
@@ -14,6 +15,7 @@ export * from './components/uis/Icon/Icon';
 export * from './components/uis/IconButton/IconButton';
 export * from './components/uis/LoadingIndicator/LoadingIndicator';
 export * from './components/uis/PinchZoom/PinchZoom';
+export * from './components/uis/ParallaxHeader/ParallaxHeader';
 export * from './components/uis/Rating/Rating';
 export * from './components/uis/RadioGroup/RadioGroup';
 export * from './components/uis/SegmentedControl/SegmentedControl';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AAGtD,cAAc,iDAAiD,CAAC;AAGhE,cAAc,aAAa,CAAC;AAG5B,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,0DAA0D,CAAC;AACzE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AAGvD,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AAGtD,cAAc,iDAAiD,CAAC;AAGhE,cAAc,aAAa,CAAC;AAG5B,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,0DAA0D,CAAC;AACzE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AAGvD,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/index.js

@@ -8,6 +8,7 @@ export * from './providers';
 // UIs
 export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
+export * from './components/uis/Calendar/Calendar';
 export * from './components/uis/Card/Card';
 export * from './components/uis/Checkbox/Checkbox';
 export * from './components/uis/CustomPressable/CustomPressable';
@@ -18,6 +19,7 @@ export * from './components/uis/Icon/Icon';
 export * from './components/uis/IconButton/IconButton';
 export * from './components/uis/LoadingIndicator/LoadingIndicator';
 export * from './components/uis/PinchZoom/PinchZoom';
+export * from './components/uis/ParallaxHeader/ParallaxHeader';
 export * from './components/uis/Rating/Rating';
 export * from './components/uis/RadioGroup/RadioGroup';
 export * from './components/uis/SegmentedControl/SegmentedControl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.7.0",
+  "version": "0.8.0-beta.0",
   "main": "index",
   "react-native": "index",
   "module": "index",
@@ -38,6 +38,7 @@
     "react": ">=16.9",
     "react-native": ">=0.58",
     "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*",
     "@expo/vector-icons": "*",
     "expo-haptics": "*"
   },