@elik56a/react-native-pickers 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eliyahu Kriel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,277 @@
-# Temporary Holding Version
+# react-native-pickers
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Beautiful, fully customizable pickers for React Native — **100% JavaScript, zero native code.**
+Works with Expo Go, bare React Native, and React Native Web out of the box.
+
+| | |
+|---|---|
+| 🎡 **WheelPicker** | iOS-style 3D wheel, infinite loop, disabled items, multi-column |
+| ⏰ **TimePicker** | 12h / 24h (auto from locale), minute & second intervals, min/max time |
+| 📅 **DatePicker** | Calendar (single · range · multiple) or wheel, min/max, disabled days, marked dates, i18n |
+| 📋 **SelectPicker** | Field + bottom sheet, search, groups, multi-select with chips, icons |
+| 😀 **EmojiPicker** | 1,900+ emojis, categories, search, skin tones, recents, version filtering |
+
+Every picker also ships as a **bottom sheet** (`DatePickerSheet`, `TimePickerSheet`, `WheelPickerSheet`, `EmojiPickerSheet`), with drag-to-dismiss and Cancel / Done.
+
+```sh
+npm install @elik56a/react-native-pickers
+```
+
+No other dependencies. Requires `react >= 18` and `react-native >= 0.72`.
+
+---
+
+## Quick start
+
+```tsx
+import { DatePicker, TimePicker, SelectPicker, EmojiPicker, WheelPicker } from '@elik56a/react-native-pickers';
+
+<WheelPicker items={['S', 'M', 'L', 'XL']} value={size} onChange={setSize} />
+
+<TimePicker value={time} onChange={setTime} minuteInterval={5} />
+
+<DatePicker value={date} onChange={setDate} minDate={new Date()} />
+<DatePicker mode="range" value={range} onChange={setRange} />
+<DatePicker display="wheel" value={birthday} onChange={setBirthday} />
+
+<SelectPicker label="Country" options={countries} value={country} onChange={setCountry} />
+
+<EmojiPicker onSelect={(emoji) => setText((t) => t + emoji)} />
+```
+
+Bottom sheets keep a draft and only commit on **Done**:
+
+```tsx
+<DatePickerSheet
+  visible={open}
+  onClose={() => setOpen(false)}
+  title="Check-in / Check-out"
+  mode="range"
+  value={range}
+  onConfirm={setRange}
+/>
+```
+
+Every picker works **controlled** (`value` + `onChange`) or **uncontrolled** (`defaultValue`).
+
+---
+
+## Theming
+
+Wrap your app (optional — sensible light & dark defaults apply without it):
+
+```tsx
+import { PickersProvider } from '@elik56a/react-native-pickers';
+
+<PickersProvider
+  colorScheme="auto" // 'auto' | 'light' | 'dark'
+  theme={{ colors: { primary: '#FF5A5F' }, radius: { md: 8 }, typography: { fontFamily: 'Inter' } }}
+  darkTheme={{ colors: { primary: '#FF8A8E', background: '#000' } }}
+>
+  <App />
+</PickersProvider>
+```
+
+Any component also accepts `theme` for a local override. Available tokens:
+
+- `colors`: background, surface, sheet, text, textSecondary, textDisabled, primary, onPrimary, primaryMuted, border, backdrop, indicator, handle
+- `radius`: sm, md, lg, full, sheet
+- `spacing`: xs, sm, md, lg, xl
+- `typography`: fontFamily, fontFamilyMedium, sizes, weights
+- `animation`: duration
+
+### Slot styles
+
+Every visual part is reachable through `styles`, so you never have to fork:
+
+```tsx
+<DatePicker
+  styles={{
+    selectedDay: { borderRadius: 8 },
+    dayText: { fontFamily: 'Inter' },
+    rangeBand: { backgroundColor: '#FFE4E6' },
+    headerTitle: { fontSize: 20 },
+  }}
+/>
+```
+
+### Render props
+
+For full control: `renderItem` / `renderIndicator` (wheel), `renderDay` / `renderArrow` (calendar), `renderOption` / `renderTrigger` / `renderGroupHeader` (select), `renderEmoji` (emoji).
+
+---
+
+## API
+
+### WheelPicker
+
+| Prop | Type | Default | |
+|---|---|---|---|
+| `items` | `(T \| { label, value, disabled? })[]` | — | Primitives or objects |
+| `value` / `defaultValue` | `T` | — | |
+| `onChange` | `(value, index) => void` | — | Fires when the wheel settles |
+| `onValueChanging` | `(value, index) => void` | — | Fires on every tick — hook haptics here |
+| `itemHeight` | `number` | `40` | |
+| `visibleItems` | `number` (odd) | `5` | |
+| `loop` | `boolean` | `false` | Infinite wheel |
+| `keyboardInput` | `boolean` | `true` | Tap the selected row to type a value; the wheel jumps to the first matching label |
+| `variant` | `'3d' \| 'flat'` | `'3d'` | |
+| `rotation` | `number` | `20` | Degrees between rows (3d) |
+| `fadeTo` | `number` | `0.3` | Opacity of the farthest rows |
+| `isEqual` | `(a, b) => boolean` | `Object.is` | For object values |
+| `styles` | slots: `container item itemText selectedItemText disabledItemText indicator` | | |
+
+`MultiWheelPicker` renders several wheels sharing one selection band: `columns={[{ key, items, value, onChange, flex, loop }]}` and an optional `separator`.
+
+Haptics example (no dependency imposed — bring your own):
+
+```tsx
+import * as Haptics from 'expo-haptics';
+<WheelPicker onValueChanging={() => Haptics.selectionAsync()} ... />
+```
+
+### TimePicker
+
+| Prop | Type | Default |
+|---|---|---|
+| `value` / `defaultValue` | `Date` | now |
+| `onChange` / `onValueChanging` | `(date) => void` | |
+| `format` | `'12h' \| '24h' \| 'auto'` | `'auto'` (from `locale`) |
+| `locale` | `string` | device |
+| `minuteInterval` | `number` | `1` |
+| `showSeconds` / `secondInterval` | `boolean` / `number` | `false` / `1` |
+| `minTime` / `maxTime` | `Date` (time of day) | |
+| `loop` | `boolean` | `true` |
+| `dayPeriodLabels` | `[am, pm]` | from locale |
+| `dayPeriodFirst` | `boolean` | `false` |
+
+### DatePicker
+
+`display="calendar"` (default) or `display="wheel"`.
+
+Selection modes:
+
+```ts
+mode?: 'single'   value: Date | null      onChange(date)
+mode: 'range'     value: { start, end }   onChange(range)   minRangeDays, maxRangeDays, allowSingleDayRange
+mode: 'multiple'  value: Date[]           onChange(dates)   maxSelections
+```
+
+| Prop | Type | Default | |
+|---|---|---|---|
+| `minDate` / `maxDate` | `Date` | | |
+| `isDateDisabled` | `(date) => boolean` | | e.g. weekends |
+| `markedDates` | `{ 'YYYY-MM-DD': { dots?, label?, disabled?, textColor? } }` | | Dots, prices, events |
+| `locale` | `string` | device | Month & weekday names via `Intl` |
+| `firstDayOfWeek` | `0–6` | from locale | |
+| `showOutsideDays` / `fixedWeeks` | `boolean` | `true` | |
+| `enableSwipe` | `boolean` | `true` | Swipe between months |
+| `enableQuickJump` | `boolean` | `true` | Tap title → month grid → year grid |
+| `weekdayFormat` | `'short' \| 'narrow'` | `'short'` | |
+| `dayHeight` | `number` | `44` | |
+| `onMonthChange` | `(month) => void` | | |
+
+Ranges never cross disabled days — tapping past one starts a new range.
+
+Wheel mode: `order` (`['day','month','year']`, defaults from locale), `monthFormat` (`'long' | 'short' | 'numeric'`), `yearRange`.
+
+### SelectPicker / SelectList
+
+`SelectPicker` is a field that opens a sheet; `SelectList` is the inline list.
+
+```ts
+options: { label, value, description?, icon?, group?, disabled?, keywords? }[]
+multiple?: false   value: T | null   onChange(value, option)
+multiple: true     value: T[]        onChange(values, options)   maxSelected
+```
+
+| Prop | Default | |
+|---|---|---|
+| `searchable` | `> 8 options` | Accent- and niqqud-insensitive |
+| `filterOption` | | Custom search |
+| `placeholder` / `label` / `sheetTitle` | | |
+| `clearable` | `false` | |
+| `chips` | `true` | Removable chips in multi mode |
+| `closeOnSelect` | `true` | Single mode |
+| `disabled` | `false` | |
+
+### EmojiPicker
+
+| Prop | Default | |
+|---|---|---|
+| `onSelect` | — | `(emoji: string, data: Emoji) => void` |
+| `columns` / `emojiSize` / `height` | `8` / auto / `380` | |
+| `categories` | all | Filter & reorder |
+| `exclude` | | Characters to hide |
+| `maxEmojiVersion` | | Hide emojis older devices can't render |
+| `skinTone` / `defaultSkinTone` / `onSkinToneChange` | `0` | 0 = default, 1–5 light → dark |
+| `recent` / `defaultRecent` / `onRecentChange` / `maxRecent` | `[]` / `24` | Persist with your own storage |
+| `categoryBarPosition` | `'top'` | or `'bottom'` |
+| `categoryLabels` / `categoryIcons` | | i18n and custom icons |
+| `searchPlaceholder` / `emptyText` | | |
+
+Persisting recents with AsyncStorage:
+
+```tsx
+const [recent, setRecent] = useState<string[]>([]);
+useEffect(() => { AsyncStorage.getItem('recent').then((v) => v && setRecent(JSON.parse(v))); }, []);
+
+<EmojiPicker
+  recent={recent}
+  onRecentChange={(r) => { setRecent(r); AsyncStorage.setItem('recent', JSON.stringify(r)); }}
+  onSelect={...}
+/>
+```
+
+Utilities: `getAllEmojis()`, `searchEmojis(query)`, `findEmoji(char)`, `withSkinTone(emoji, tone)`.
+
+### BottomSheet
+
+Use the same sheet for your own content:
+
+```tsx
+<BottomSheet visible={open} onClose={close} title="Filters" footer={<ApplyButton />}>
+  ...
+</BottomSheet>
+```
+
+Props: `title`, `headerLeft`, `headerRight`, `footer`, `enableSwipeToClose`, `closeOnBackdropPress`, `height`, `maxHeightRatio`, `bottomInset`, `styles`.
+
+---
+
+## RTL & i18n
+
+Layouts use logical `start` / `end`, so they flip automatically with `I18nManager.isRTL`; calendar arrows and swipe direction follow. All month, weekday, and AM/PM names come from `Intl` (Hermes supports it), with English fallbacks. Every user-facing string (Done, Cancel, Search, empty states, category labels) is a prop.
+
+## Accessibility
+
+Wheels are `adjustable` with increment / decrement actions for VoiceOver and TalkBack. Days announce their full date, and selected / disabled states are exposed everywhere.
+
+## Performance
+
+Animations run on the native driver. Wheels and the emoji grid are virtualized `FlatList`s with fixed row layouts, and rows are memoized so scrolling re-renders only the two rows that change.
+
+## Development
+
+```sh
+npm test            # unit tests
+npm run typecheck
+npm run build       # lib/ (ESM + .d.ts)
+npm run example:web # bundles example/App.tsx for React Native Web → example/web/dist
+npm run gen:emoji   # regenerate emoji data from emojibase-data
+```
+
+### Running the example on iOS / Android
+
+[`example/native`](example/native) is an Expo app that renders [`example/App.tsx`](example/App.tsx) against the library source, so edits in `src/` hot-reload.
+
+```sh
+pnpm install        # from the repo root (pnpm workspace)
+pnpm example        # press i for the iOS Simulator, a for the Android emulator
+```
+
+Emoji data comes from [emojibase](https://emojibase.dev) (MIT).
+
+## License
+
+MIT

package/lib/date/Calendar.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { PickerTheme } from '../theme';
+import type { SlotStyles, ThemableProps } from '../types';
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export interface MarkedDate {
+    /** Dot colors under the day number */
+    dots?: string[];
+    disabled?: boolean;
+    /** Small text under the day (e.g. a price) */
+    label?: string;
+    textColor?: string;
+}
+export type CalendarSlot = 'container' | 'header' | 'headerTitle' | 'arrow' | 'arrowText' | 'weekdays' | 'weekdayText' | 'week' | 'day' | 'dayInner' | 'dayText' | 'selectedDay' | 'selectedDayText' | 'todayDay' | 'todayDayText' | 'disabledDayText' | 'outsideDayText' | 'rangeBand' | 'dot' | 'dayLabel' | 'gridCell' | 'gridCellText';
+export interface DayState {
+    date: Date;
+    selected: boolean;
+    rangeStart: boolean;
+    rangeEnd: boolean;
+    inRange: boolean;
+    today: boolean;
+    disabled: boolean;
+    outside: boolean;
+    marking?: MarkedDate;
+}
+export interface CalendarBaseProps extends ThemableProps {
+    locale?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    /** Return true to disable a day */
+    isDateDisabled?: (date: Date) => boolean;
+    /** 0 = Sunday ... 6 = Saturday. Default: from locale, else 0 */
+    firstDayOfWeek?: number;
+    /** Keyed by `YYYY-MM-DD` */
+    markedDates?: Record<string, MarkedDate>;
+    /** Month shown initially. Default: the selected date or today */
+    initialMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    showOutsideDays?: boolean;
+    /** Always render 6 weeks to keep the height stable. Default: true */
+    fixedWeeks?: boolean;
+    /** Swipe left/right to change months. Default: true */
+    enableSwipe?: boolean;
+    /** Tap the title to jump by month / year. Default: true */
+    enableQuickJump?: boolean;
+    weekdayFormat?: 'short' | 'narrow';
+    showWeekdays?: boolean;
+    /** Override the title text */
+    formatTitle?: (month: Date, locale?: string) => string;
+    /** Fully custom day cell */
+    renderDay?: (state: DayState, theme: PickerTheme) => React.ReactNode;
+    /** Custom arrows */
+    renderArrow?: (direction: 'prev' | 'next', disabled: boolean) => React.ReactNode;
+    /** Range of years in the year grid. Default: minDate/maxDate or ±100 years */
+    yearRange?: [number, number];
+    /** Day cell height. Default: 44 */
+    dayHeight?: number;
+    style?: StyleProp<ViewStyle>;
+    styles?: SlotStyles<CalendarSlot>;
+    testID?: string;
+}
+export type CalendarSelectionProps = {
+    mode?: 'single';
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date) => void;
+} | {
+    mode: 'range';
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    /** Minimum nights in a range (end - start, in days) */
+    minRangeDays?: number;
+    maxRangeDays?: number;
+    /** Allow start === end. Default: true */
+    allowSingleDayRange?: boolean;
+} | {
+    mode: 'multiple';
+    value?: Date[];
+    defaultValue?: Date[];
+    onChange?: (dates: Date[]) => void;
+    maxSelections?: number;
+};
+export type CalendarProps = CalendarBaseProps & CalendarSelectionProps;
+export declare function Calendar(props: CalendarProps): React.JSX.Element;
+//# sourceMappingURL=Calendar.d.ts.map

package/lib/date/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/date/Calendar.tsx"],"names":[],"mappings":"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"}

package/lib/date/Calendar.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, I18nManager, PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { textStyle, usePickerTheme } from '../theme';
+import { addMonths, buildMonthGrid, compareDay, formatDate, formatMonthYear, getFirstDayOfWeek, getMonthNames, getWeekdayNames, isBetweenDays, isOutOfRange, isSameDay, startOfMonth, toDateKey, } from '../utils/date';
+const DAY_MS = 86400000;
+export function Calendar(props) {
+    const { locale, minDate, maxDate, isDateDisabled, markedDates, initialMonth, onMonthChange, showOutsideDays = true, fixedWeeks = true, enableSwipe = true, enableQuickJump = true, weekdayFormat = 'short', showWeekdays = true, formatTitle, renderDay, renderArrow, yearRange, dayHeight = 44, style, styles: slots, theme: themeOverride, testID, } = props;
+    const theme = usePickerTheme(themeOverride);
+    const mode = props.mode ?? 'single';
+    const firstDay = props.firstDayOfWeek ?? getFirstDayOfWeek(locale);
+    const rtl = !!I18nManager.isRTL;
+    // ----- selection state (controlled or uncontrolled) -----
+    const [innerSingle, setInnerSingle] = useState(mode === 'single' ? (props.defaultValue ?? null) : null);
+    const [innerRange, setInnerRange] = useState(mode === 'range' ? (props.defaultValue ?? { start: null, end: null }) : { start: null, end: null });
+    const [innerMulti, setInnerMulti] = useState(mode === 'multiple' ? (props.defaultValue ?? []) : []);
+    const single = mode === 'single' ? (props.value !== undefined ? props.value : innerSingle) : null;
+    const range = mode === 'range' ? (props.value ?? innerRange) : { start: null, end: null };
+    const multi = mode === 'multiple' ? (props.value ?? innerMulti) : [];
+    const anchor = initialMonth ?? single ?? range.start ?? multi[0] ?? new Date();
+    const [month, setMonth] = useState(() => startOfMonth(anchor));
+    const [view, setView] = useState('days');
+    const today = useMemo(() => new Date(), []);
+    // Follow external value changes in single mode
+    const singleKey = single ? toDateKey(single) : '';
+    useEffect(() => {
+        if (single && view === 'days' && (single.getMonth() !== month.getMonth() || single.getFullYear() !== month.getFullYear())) {
+            setMonth(startOfMonth(single));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [singleKey]);
+    const isDisabled = useCallback((d) => isOutOfRange(d, minDate, maxDate) || !!isDateDisabled?.(d) || !!markedDates?.[toDateKey(d)]?.disabled, [isDateDisabled, markedDates, maxDate, minDate]);
+    // ----- month navigation with slide animation -----
+    const slide = useRef(new Animated.Value(0)).current;
+    const native = Platform.OS !== 'web';
+    const canPrev = !minDate || compareDay(addMonths(month, -1), startOfMonth(minDate)) >= 0;
+    const canNext = !maxDate || compareDay(addMonths(month, 1), startOfMonth(maxDate)) <= 0;
+    const goMonth = useCallback((delta) => {
+        if ((delta < 0 && !canPrev) || (delta > 0 && !canNext))
+            return;
+        const next = addMonths(month, delta);
+        setMonth(next);
+        onMonthChange?.(next);
+        slide.setValue(delta * (rtl ? -1 : 1));
+        Animated.timing(slide, { toValue: 0, duration: theme.animation.duration, useNativeDriver: native }).start();
+    }, [canNext, canPrev, month, native, onMonthChange, rtl, slide, theme.animation.duration]);
+    const goRef = useRef(goMonth);
+    goRef.current = goMonth;
+    const pan = useRef(PanResponder.create({
+        onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 14 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+        onPanResponderRelease: (_, g) => {
+            if (Math.abs(g.dx) > 50 || Math.abs(g.vx) > 0.5) {
+                const dir = g.dx < 0 ? 1 : -1;
+                goRef.current(I18nManager.isRTL === true ? -dir : dir);
+            }
+        },
+    })).current;
+    // ----- selection logic -----
+    const select = useCallback((d) => {
+        if (mode === 'single') {
+            if (props.value === undefined)
+                setInnerSingle(d);
+            props.onChange?.(d);
+        }
+        else if (mode === 'range') {
+            const p = props;
+            let next;
+            if (!range.start || range.end || compareDay(d, range.start) < 0) {
+                next = { start: d, end: null };
+            }
+            else {
+                const days = Math.round((d.getTime() - range.start.getTime()) / DAY_MS);
+                if (days === 0 && p.allowSingleDayRange === false)
+                    return;
+                if (p.minRangeDays !== undefined && days < p.minRangeDays)
+                    return;
+                if (p.maxRangeDays !== undefined && days > p.maxRangeDays)
+                    next = { start: d, end: null };
+                else {
+                    // Reject ranges that cross disabled days
+                    let crosses = false;
+                    for (let t = new Date(range.start); compareDay(t, d) < 0; t = new Date(t.getFullYear(), t.getMonth(), t.getDate() + 1)) {
+                        if (isDisabled(t)) {
+                            crosses = true;
+                            break;
+                        }
+                    }
+                    next = crosses ? { start: d, end: null } : { start: range.start, end: d };
+                }
+            }
+            if (p.value === undefined)
+                setInnerRange(next);
+            p.onChange?.(next);
+        }
+        else {
+            const p = props;
+            const exists = multi.some((x) => isSameDay(x, d));
+            if (!exists && p.maxSelections !== undefined && multi.length >= p.maxSelections)
+                return;
+            const next = exists ? multi.filter((x) => !isSameDay(x, d)) : [...multi, d].sort((a, b) => a.getTime() - b.getTime());
+            if (p.value === undefined)
+                setInnerMulti(next);
+            p.onChange?.(next);
+        }
+    }, [isDisabled, mode, multi, props, range.end, range.start]);
+    const grid = useMemo(() => buildMonthGrid(month.getFullYear(), month.getMonth(), firstDay, fixedWeeks), [firstDay, fixedWeeks, month]);
+    const weekdayNames = useMemo(() => {
+        const names = getWeekdayNames(locale, weekdayFormat);
+        return Array.from({ length: 7 }, (_, i) => names[(firstDay + i) % 7]);
+    }, [firstDay, locale, weekdayFormat]);
+    const title = formatTitle ? formatTitle(month, locale) : formatMonthYear(month, locale);
+    const accent = theme.colors.primary;
+    const header = (_jsxs(View, { style: [s.header, { paddingHorizontal: theme.spacing.sm, marginBottom: theme.spacing.sm }, slots?.header], children: [_jsxs(Pressable, { onPress: enableQuickJump ? () => setView(view === 'days' ? 'months' : 'days') : undefined, style: ({ pressed }) => [s.titleBtn, { borderRadius: theme.radius.sm, opacity: pressed ? 0.6 : 1 }], accessibilityRole: enableQuickJump ? 'button' : 'header', accessibilityLabel: title, children: [_jsx(Text, { style: [textStyle(theme, 'md', 'bold'), slots?.headerTitle], children: view === 'years' ? yearPageLabel(month.getFullYear()) : view === 'months' ? String(month.getFullYear()) : title }), enableQuickJump && (_jsx(Text, { style: [textStyle(theme, 'sm', 'bold'), { color: accent, marginStart: 6 }], children: view === 'days' ? '▾' : '▴' }))] }), _jsx(View, { style: s.arrows, children: ['prev', 'next'].map((dir) => {
+                    const disabled = view === 'days' ? (dir === 'prev' ? !canPrev : !canNext) : false;
+                    const onPress = () => {
+                        const delta = dir === 'prev' ? -1 : 1;
+                        if (view === 'days')
+                            goMonth(delta);
+                        else if (view === 'months')
+                            setMonth(new Date(month.getFullYear() + delta, month.getMonth(), 1));
+                        else
+                            setMonth(new Date(month.getFullYear() + delta * 12, month.getMonth(), 1));
+                    };
+                    return (_jsx(Pressable, { onPress: disabled ? undefined : onPress, hitSlop: 8, style: ({ pressed }) => [
+                            s.arrow,
+                            { borderRadius: theme.radius.full, backgroundColor: pressed ? theme.colors.surface : 'transparent' },
+                            slots?.arrow,
+                        ], accessibilityRole: "button", accessibilityLabel: dir === 'prev' ? 'Previous' : 'Next', accessibilityState: { disabled }, children: renderArrow ? (renderArrow(dir, disabled)) : (_jsx(Text, { style: [
+                                textStyle(theme, 'lg', 'bold'),
+                                { color: disabled ? theme.colors.textDisabled : accent, lineHeight: 22 },
+                                slots?.arrowText,
+                            ], children: (dir === 'prev') !== rtl ? '‹' : '›' })) }, dir));
+                }) })] }));
+    const translateX = slide.interpolate({ inputRange: [-1, 0, 1], outputRange: [-40, 0, 40] });
+    const opacity = slide.interpolate({ inputRange: [-1, 0, 1], outputRange: [0, 1, 0] });
+    let body;
+    if (view === 'months') {
+        const names = getMonthNames(locale, 'short');
+        body = (_jsx(QuickGrid, { theme: theme, slots: slots, cells: names.map((label, m) => {
+                const d = new Date(month.getFullYear(), m, 1);
+                const disabled = (!!minDate && compareDay(new Date(month.getFullYear(), m + 1, 0), minDate) < 0) || (!!maxDate && compareDay(d, maxDate) > 0);
+                return { key: String(m), label, selected: m === month.getMonth(), disabled, onPress: () => {
+                        setMonth(d);
+                        onMonthChange?.(d);
+                        setView('days');
+                    } };
+            }), onTitle: () => setView('years'), height: dayHeight * (fixedWeeks ? 6 : 5) + (showWeekdays ? 28 : 0) }));
+    }
+    else if (view === 'years') {
+        const y0 = Math.floor(month.getFullYear() / 12) * 12;
+        const [minY, maxY] = yearRange ?? [minDate?.getFullYear() ?? today.getFullYear() - 100, maxDate?.getFullYear() ?? today.getFullYear() + 100];
+        body = (_jsx(QuickGrid, { theme: theme, slots: slots, cells: Array.from({ length: 12 }, (_, i) => {
+                const y = y0 + i;
+                return { key: String(y), label: String(y), selected: y === month.getFullYear(), disabled: y < minY || y > maxY, onPress: () => {
+                        setMonth(new Date(y, month.getMonth(), 1));
+                        setView('months');
+                    } };
+            }), height: dayHeight * (fixedWeeks ? 6 : 5) + (showWeekdays ? 28 : 0) }));
+    }
+    else {
+        body = (_jsxs(Animated.View, { style: { transform: [{ translateX }], opacity }, ...(enableSwipe ? pan.panHandlers : {}), children: [showWeekdays && (_jsx(View, { style: [s.week, { marginBottom: 4 }, slots?.weekdays], children: weekdayNames.map((w, i) => (_jsx(View, { style: s.cell, children: _jsx(Text, { style: [textStyle(theme, 'xs', 'medium'), { color: theme.colors.textSecondary, textAlign: 'center' }, slots?.weekdayText], children: w }) }, i))) })), grid.map((week, wi) => (_jsx(View, { style: [s.week, slots?.week], children: week.map((d) => {
+                        const outside = d.getMonth() !== month.getMonth();
+                        const rangeStart = mode === 'range' && isSameDay(d, range.start);
+                        const rangeEnd = mode === 'range' && isSameDay(d, range.end);
+                        const state = {
+                            date: d,
+                            outside,
+                            today: isSameDay(d, today),
+                            disabled: isDisabled(d),
+                            rangeStart,
+                            rangeEnd,
+                            inRange: mode === 'range' && isBetweenDays(d, range.start, range.end),
+                            selected: mode === 'single' ? isSameDay(d, single) : mode === 'range' ? rangeStart || rangeEnd : multi.some((x) => isSameDay(x, d)),
+                            marking: markedDates?.[toDateKey(d)],
+                        };
+                        return (_jsx(DayCell, { state: state, hidden: outside && !showOutsideDays, hasRangeEnd: !!range.end, theme: theme, slots: slots, height: dayHeight, locale: locale, renderDay: renderDay, onPress: select }, d.getTime()));
+                    }) }, wi)))] }));
+    }
+    return (_jsxs(View, { style: [{ backgroundColor: theme.colors.background, paddingVertical: theme.spacing.sm }, style, slots?.container], testID: testID, children: [header, body] }));
+}
+function yearPageLabel(year) {
+    const y0 = Math.floor(year / 12) * 12;
+    return `${y0} – ${y0 + 11}`;
+}
+const DayCell = memo(function DayCell({ state, hidden, hasRangeEnd, theme, slots, height, locale, renderDay, onPress }) {
+    const { date, selected, disabled, outside, today, inRange, rangeStart, rangeEnd, marking } = state;
+    if (hidden)
+        return _jsx(View, { style: [s.cell, { height }] });
+    const c = theme.colors;
+    const size = Math.min(height - 4, 40);
+    const band = inRange || (hasRangeEnd && (rangeStart || rangeEnd) && !(rangeStart && rangeEnd));
+    const textColor = selected
+        ? c.onPrimary
+        : disabled
+            ? c.textDisabled
+            : marking?.textColor ?? (outside ? c.textDisabled : today ? c.primary : c.text);
+    return (_jsx(Pressable, { onPress: disabled ? undefined : () => onPress(date), style: [s.cell, { height }, slots?.day], accessibilityRole: "button", accessibilityLabel: formatDate(date, locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }), accessibilityState: { selected, disabled }, children: ({ pressed }) => (_jsxs(_Fragment, { children: [band && (_jsx(View, { style: [
+                        s.band,
+                        { top: (height - size) / 2, height: size, backgroundColor: c.primaryMuted },
+                        rangeStart ? { start: '50%' } : rangeEnd ? { end: '50%' } : null,
+                        slots?.rangeBand,
+                    ] })), renderDay ? (renderDay(state, theme)) : (_jsxs(View, { style: [
+                        s.dayInner,
+                        { width: size, height: size, borderRadius: size / 2 },
+                        selected && { backgroundColor: c.primary },
+                        !selected && pressed && !disabled && { backgroundColor: c.surface },
+                        !selected && today && { borderWidth: 1.5, borderColor: c.primary },
+                        slots?.dayInner,
+                        today && slots?.todayDay,
+                        selected && slots?.selectedDay,
+                    ], children: [_jsx(Text, { style: [
+                                textStyle(theme, 'md', selected || today ? 'bold' : 'regular'),
+                                { color: textColor, textDecorationLine: disabled && !outside ? 'line-through' : 'none' },
+                                slots?.dayText,
+                                outside && slots?.outsideDayText,
+                                disabled && slots?.disabledDayText,
+                                today && slots?.todayDayText,
+                                selected && slots?.selectedDayText,
+                            ], children: date.getDate() }), marking?.label ? (_jsx(Text, { style: [{ fontSize: 9, color: selected ? c.onPrimary : c.textSecondary, marginTop: -2 }, slots?.dayLabel], numberOfLines: 1, children: marking.label })) : null, marking?.dots?.length ? (_jsx(View, { style: s.dots, children: marking.dots.slice(0, 3).map((color, i) => (_jsx(View, { style: [s.dot, { backgroundColor: selected ? c.onPrimary : color }, slots?.dot] }, i))) })) : null] }))] })) }));
+});
+function QuickGrid({ cells, theme, slots, height }) {
+    const rows = [cells.slice(0, 3), cells.slice(3, 6), cells.slice(6, 9), cells.slice(9, 12)];
+    return (_jsx(View, { style: { height, justifyContent: 'space-evenly', paddingHorizontal: theme.spacing.sm }, children: rows.map((row, i) => (_jsx(View, { style: s.week, children: row.map((c) => (_jsx(Pressable, { onPress: c.disabled ? undefined : c.onPress, style: ({ pressed }) => [
+                    s.quick,
+                    {
+                        borderRadius: theme.radius.full,
+                        backgroundColor: c.selected ? theme.colors.primary : pressed ? theme.colors.surface : 'transparent',
+                    },
+                    slots?.gridCell,
+                ], accessibilityRole: "button", accessibilityState: { selected: c.selected, disabled: c.disabled }, children: _jsx(Text, { style: [
+                        textStyle(theme, 'md', c.selected ? 'bold' : 'regular'),
+                        { color: c.selected ? theme.colors.onPrimary : c.disabled ? theme.colors.textDisabled : theme.colors.text },
+                        slots?.gridCellText,
+                    ], children: c.label }) }, c.key))) }, i))) }));
+}
+const s = StyleSheet.create({
+    header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    titleBtn: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6, paddingHorizontal: 8 },
+    arrows: { flexDirection: 'row', gap: 4 },
+    arrow: { width: 36, height: 36, alignItems: 'center', justifyContent: 'center' },
+    week: { flexDirection: 'row' },
+    cell: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    dayInner: { alignItems: 'center', justifyContent: 'center' },
+    band: { position: 'absolute', start: 0, end: 0 },
+    dots: { flexDirection: 'row', gap: 2, position: 'absolute', bottom: 4 },
+    dot: { width: 4, height: 4, borderRadius: 2 },
+    quick: { flex: 1, marginHorizontal: 6, height: 44, alignItems: 'center', justifyContent: 'center' },
+});
+//# sourceMappingURL=Calendar.js.map