pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/date-picker/Calendar.js

@@ -0,0 +1,414 @@
+"use strict";
+
+/**
+ * Calendar — the inline month grid every other export in this module composes. All of its date
+ * arithmetic lives in `DatePicker.variants.ts` (pure, unit-tested); this file is layout, state and
+ * accessibility only.
+ *
+ * The header doubles as a quick-jump toggle: while it is open the grid shows the twelve months of
+ * the cursor's year and the ‹ › controls page YEARS instead of months — one panel covering both
+ * dimensions, instead of a separate year grid and month grid to navigate between. The ‹ › controls
+ * themselves are the library's own `Button` (icon-only, ghost/neutral) — composed, not
+ * reimplemented; only the toggle needs a custom `Pressable`, for the `aria-expanded` (WCAG 4.1.2)
+ * `Button`'s closed a11y contract can't express (see `resolveCalendarChromeColors`).
+ *
+ * Keyboard (web only, WCAG 2.1.1): the 42 day cells are ONE tab stop, not 42 — exactly one carries
+ * `tabIndex={0}` and the arrows/Home/End/PageUp/PageDown move which. The DOM half lives in
+ * `Calendar.keys.web.ts`, the date arithmetic in `resolveCalendarFocusMove`; Enter/Space are left
+ * to `react-native-web`'s own `role="button"` press handling.
+ */
+
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { concentric } from "../../core/style/index.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Button } from "../button/index.js";
+import { useCalendarGridFocus, useCalendarGridKeys } from "./Calendar.keys";
+import { addMonths, atNoon, buildMonthGrid, calendarDayCellStructure, calendarGridStructure, calendarHeaderButtonStructure, calendarHeaderStructure, calendarStructure, calendarWeekRowStructure, calendarWeekdayCellStructure, canShowMonth, canShowYear, chunkIntoWeeks, clampToRange, DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, EMPTY_RANGE, dayOrdinal, formatMonthYear, formatYear, isDateDisabled, isSameDay, isWithinRange, monthCursorOf, monthShortNames, nextRangeSelection, quickJumpCellStructure, quickJumpGridStructure, resolveCalendarChromeColors, resolveCalendarDayAccessibility, resolveCalendarDayColors, resolveCalendarFocusMove, resolvePressedAccessibilityState, toDayKey, weekdayLabels } from "./DatePicker.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const HEADER_ICON_SIZE = 18;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
+  date,
+  dayOfMonth,
+  adjacent,
+  selected,
+  inRange,
+  disabled,
+  today,
+  tabIndex,
+  locale,
+  theme,
+  onPress,
+  testID
+}) {
+  const press = usePressState(disabled);
+  const a11y = useMemo(() => resolveCalendarDayAccessibility({
+    date,
+    selected,
+    disabled,
+    inRange,
+    today,
+    locale
+  }), [date, selected, disabled, inRange, today, locale]);
+  const resting = useMemo(() => resolveCalendarDayColors(theme.colors, {
+    selected,
+    inRange,
+    adjacent,
+    disabled,
+    today,
+    pressed: false
+  }), [theme.colors, selected, inRange, adjacent, disabled, today]);
+  const pressedBackground = useMemo(() => resolveCalendarDayColors(theme.colors, {
+    selected,
+    inRange,
+    adjacent,
+    disabled,
+    today,
+    pressed: true
+  }).background, [theme.colors, selected, inRange, adjacent, disabled, today]);
+  const cellStructure = useMemo(() => calendarDayCellStructure(theme), [theme]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: resting.label
+  }], [theme, resting.label]);
+  const handlePress = useCallback(() => {
+    if (!disabled) onPress(date);
+  }, [disabled, onPress, date]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.md, theme.space[1]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const cellStyle = useMemo(() => [cellStructure, {
+    backgroundColor: resting.background,
+    borderColor: resting.ring,
+    overflow: "hidden"
+  }, press.pressed && !disabled && {
+    backgroundColor: pressedBackground
+  }, press.animatedStyle], [cellStructure, resting, pressedBackground, press.pressed, press.animatedStyle, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: a11y.accessibilityLabel,
+    "aria-pressed": a11y["aria-pressed"],
+    accessibilityState: a11y.accessibilityState,
+    "aria-disabled": a11y["aria-disabled"],
+    disabled: disabled,
+    tabIndex: tabIndex,
+    onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    style: cellStyle,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: labelStyle,
+      children: dayOfMonth
+    })]
+  });
+});
+const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
+  month,
+  name,
+  selected,
+  disabled,
+  theme,
+  onPress,
+  testID
+}) {
+  const press = usePressState(disabled);
+  const resting = useMemo(() => resolveCalendarDayColors(theme.colors, {
+    selected,
+    inRange: false,
+    adjacent: false,
+    disabled,
+    today: false,
+    pressed: false
+  }), [theme.colors, selected, disabled]);
+  const pressedBackground = useMemo(() => resolveCalendarDayColors(theme.colors, {
+    selected,
+    inRange: false,
+    adjacent: false,
+    disabled,
+    today: false,
+    pressed: true
+  }).background, [theme.colors, selected, disabled]);
+  const cellStructure = useMemo(() => quickJumpCellStructure(theme), [theme]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: resting.label
+  }], [theme, resting.label]);
+  const handlePress = useCallback(() => {
+    if (!disabled) onPress(month);
+  }, [disabled, onPress, month]);
+  const pressedState = useMemo(() => resolvePressedAccessibilityState(selected), [selected]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.md, theme.space[1]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const cellStyle = useMemo(() => [cellStructure, {
+    backgroundColor: resting.background,
+    overflow: "hidden"
+  }, press.pressed && !disabled && {
+    backgroundColor: pressedBackground
+  }, press.animatedStyle], [cellStructure, resting.background, pressedBackground, press.pressed, press.animatedStyle, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: name,
+    "aria-pressed": pressedState["aria-pressed"],
+    accessibilityState: pressedState.accessibilityState,
+    "aria-disabled": disabled,
+    disabled: disabled,
+    onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    style: cellStyle,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: labelStyle,
+      children: name
+    })]
+  });
+});
+export const Calendar = /*#__PURE__*/memo(function Calendar({
+  value,
+  onChange,
+  onSelect,
+  mode = "single",
+  rangeValue,
+  onRangeChange,
+  minDate,
+  maxDate,
+  disabledDates,
+  firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK,
+  locale = DEFAULT_LOCALE,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const headerPress = usePressState(false);
+  const chrome = useMemo(() => resolveCalendarChromeColors(theme.colors), [theme.colors]);
+  const range = rangeValue ?? EMPTY_RANGE;
+  const anchor = mode === "range" ? range.start : value ?? null;
+  const [cursor, setCursor] = useState(() => monthCursorOf(clampToRange(anchor ?? new Date(), minDate, maxDate)));
+  const [lastAnchorOrdinal, setLastAnchorOrdinal] = useState(anchor === null ? null : dayOrdinal(anchor));
+  const [quickJumpOpen, setQuickJumpOpen] = useState(false);
+  const [focusedDate, setFocusedDate] = useState(() => clampToRange(anchor ?? new Date(), minDate, maxDate));
+  const gridRef = useRef(null);
+
+  // React's "adjust state while rendering" pattern — a new selection from the caller pulls the grid
+  // to its month without an effect (and without the extra committed frame one would cost).
+  if (anchor !== null && dayOrdinal(anchor) !== lastAnchorOrdinal) {
+    setLastAnchorOrdinal(dayOrdinal(anchor));
+    setCursor(monthCursorOf(anchor));
+  }
+  const today = useMemo(() => atNoon(new Date()), []);
+  const weeks = useMemo(() => chunkIntoWeeks(buildMonthGrid(cursor.year, cursor.month, firstDayOfWeek)), [cursor.year, cursor.month, firstDayOfWeek]);
+  const weekdays = useMemo(() => weekdayLabels(firstDayOfWeek, locale), [firstDayOfWeek, locale]);
+  const months = useMemo(() => monthShortNames(locale), [locale]);
+  const selectDay = onSelect ?? onChange;
+  const handleDayPress = useCallback(date => {
+    setFocusedDate(atNoon(date));
+    if (mode === "range") {
+      onRangeChange?.(nextRangeSelection(range, date));
+      return;
+    }
+    selectDay?.(atNoon(date));
+  }, [mode, selectDay, onRangeChange, range]);
+  const step = quickJumpOpen ? 12 : 1;
+  const previousCursor = addMonths(cursor, -step);
+  const nextCursor = addMonths(cursor, step);
+  const canGoBack = quickJumpOpen ? canShowYear(previousCursor.year, minDate, maxDate) : canShowMonth(previousCursor, minDate, maxDate);
+  const canGoForward = quickJumpOpen ? canShowYear(nextCursor.year, minDate, maxDate) : canShowMonth(nextCursor, minDate, maxDate);
+  const goBack = useCallback(() => setCursor(current => addMonths(current, -step)), [step]);
+  const goForward = useCallback(() => setCursor(current => addMonths(current, step)), [step]);
+  const toggleQuickJump = useCallback(() => setQuickJumpOpen(open => !open), []);
+  const selectMonth = useCallback(month => {
+    setCursor(current => ({
+      year: current.year,
+      month
+    }));
+    setQuickJumpOpen(false);
+  }, []);
+  const rootStyle = useMemo(() => [calendarStructure(theme), {
+    backgroundColor: chrome.surface
+  }, style], [theme, chrome.surface, style]);
+  const headerStructure = useMemo(() => calendarHeaderStructure(theme), [theme]);
+  const quickJumpGrid = useMemo(() => quickJumpGridStructure(theme), [theme]);
+  const gridStructure = useMemo(() => calendarGridStructure(theme), [theme]);
+  const weekRowStructure = useMemo(() => calendarWeekRowStructure(theme), [theme]);
+  const weekdayCellStructure = useMemo(() => calendarWeekdayCellStructure(theme), [theme]);
+  const weekdayLabelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.xs,
+    color: chrome.weekdayLabel
+  }], [theme, chrome.weekdayLabel]);
+  const headerLabelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.md,
+    color: chrome.headerLabel
+  }], [theme, chrome.headerLabel]);
+  const headerButtonBase = useMemo(() => calendarHeaderButtonStructure(theme), [theme]);
+  const headerButtonStyle = useMemo(() => [headerButtonBase, {
+    overflow: "hidden"
+  }, headerPress.animatedStyle], [headerButtonBase, headerPress.animatedStyle]);
+  const headerOverlayStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const weekDescriptors = useMemo(() => weeks.map(week => week.map(day => {
+    const disabled = isDateDisabled(day.date, {
+      minDate,
+      maxDate,
+      disabledDates
+    });
+    const selected = mode === "range" ? isSameDay(day.date, range.start) || isSameDay(day.date, range.end) : isSameDay(day.date, value);
+    return {
+      key: toDayKey(day.date),
+      date: day.date,
+      dayOfMonth: day.dayOfMonth,
+      adjacent: !day.inCurrentMonth,
+      selected,
+      inRange: mode === "range" && isWithinRange(day.date, range.start, range.end),
+      disabled,
+      today: isSameDay(day.date, today)
+    };
+  })), [weeks, minDate, maxDate, disabledDates, mode, range.start, range.end, value, today]);
+
+  // The roving tab stop. Falling back to the first day of the displayed month matters: paging with
+  // ‹ › can leave `focusedDate` outside the six weeks on screen, and a grid with no `tabIndex={0}`
+  // cell would have no tab stop at all — strictly worse than the 42 it replaces.
+  const focusedKey = toDayKey(focusedDate);
+  const activeDay = useMemo(() => {
+    const flat = weekDescriptors.flat();
+    return flat.find(day => day.key === focusedKey) ?? flat.find(day => !day.adjacent) ?? flat[0];
+  }, [weekDescriptors, focusedKey]);
+  const activeKey = activeDay?.key;
+  const handleGridMove = useCallback(move => {
+    const from = activeDay?.date;
+    if (from === undefined) return;
+    const next = clampToRange(resolveCalendarFocusMove(move, from, firstDayOfWeek), minDate, maxDate);
+    setFocusedDate(next);
+    setCursor(current => current.year === next.getFullYear() && current.month === next.getMonth() ? current : monthCursorOf(next));
+  }, [activeDay, firstDayOfWeek, minDate, maxDate]);
+  useCalendarGridKeys(gridRef, !quickJumpOpen, handleGridMove);
+  useCalendarGridFocus(gridRef, activeKey ?? "", !quickJumpOpen);
+  const quickJumpDescriptors = useMemo(() => months.map((name, month) => ({
+    name,
+    month,
+    selected: month === cursor.month,
+    disabled: !canShowMonth({
+      year: cursor.year,
+      month
+    }, minDate, maxDate)
+  })), [months, cursor.month, cursor.year, minDate, maxDate]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: rootStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: headerStructure,
+      children: [/*#__PURE__*/_jsx(Button, {
+        icon: "chevron-left",
+        accessibilityLabel: `Previous ${quickJumpOpen ? "year" : "month"}`,
+        variant: "ghost",
+        tone: "neutral",
+        size: "sm",
+        disabled: !canGoBack,
+        onPress: goBack,
+        testID: testID ? `${testID}-previous` : undefined
+      }), /*#__PURE__*/_jsxs(AnimatedPressable, {
+        testID: testID ? `${testID}-header` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: quickJumpOpen ? formatYear(cursor.year, locale) : formatMonthYear(cursor, locale),
+        "aria-expanded": quickJumpOpen,
+        onPress: toggleQuickJump,
+        onPressIn: headerPress.handlers.onPressIn,
+        onPressOut: headerPress.handlers.onPressOut,
+        onLayout: headerPress.onLayout,
+        style: [headerButtonStyle, headerPress.pressed && {
+          backgroundColor: chrome.headerPressed
+        }],
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, headerOverlayStyle, headerPress.overlayStyle]
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: headerLabelStyle,
+          children: quickJumpOpen ? formatYear(cursor.year, locale) : formatMonthYear(cursor, locale)
+        }), /*#__PURE__*/_jsx(Icon, {
+          name: quickJumpOpen ? "chevron-up" : "chevron-down",
+          size: HEADER_ICON_SIZE,
+          color: chrome.headerIcon,
+          strokeWidth: ICON_STROKE
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        icon: "chevron-right",
+        accessibilityLabel: `Next ${quickJumpOpen ? "year" : "month"}`,
+        variant: "ghost",
+        tone: "neutral",
+        size: "sm",
+        disabled: !canGoForward,
+        onPress: goForward,
+        testID: testID ? `${testID}-next` : undefined
+      })]
+    }), quickJumpOpen ? /*#__PURE__*/_jsx(View, {
+      style: quickJumpGrid,
+      children: quickJumpDescriptors.map(month => /*#__PURE__*/_jsx(QuickJumpCell, {
+        month: month.month,
+        name: month.name,
+        selected: month.selected,
+        disabled: month.disabled,
+        theme: theme,
+        onPress: selectMonth,
+        testID: testID ? `${testID}-month-${month.month}` : undefined
+      }, month.name))
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: weekRowStructure,
+        children: weekdays.map((weekday, index) => /*#__PURE__*/_jsx(View
+        // Two weekdays can share an abbreviation in some locales, so the slot index is the key.
+        , {
+          "aria-hidden": true,
+          style: weekdayCellStructure,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: weekdayLabelStyle,
+            children: weekday
+          })
+        }, `weekday-${index}`))
+      }), /*#__PURE__*/_jsx(View, {
+        ref: gridRef,
+        style: gridStructure,
+        children: weekDescriptors.map(week => /*#__PURE__*/_jsx(View, {
+          style: weekRowStructure,
+          children: week.map(day => /*#__PURE__*/_jsx(CalendarDayCell, {
+            date: day.date,
+            dayOfMonth: day.dayOfMonth,
+            adjacent: day.adjacent,
+            selected: day.selected,
+            inRange: day.inRange,
+            disabled: day.disabled,
+            today: day.today,
+            tabIndex: day.key === activeKey ? 0 : -1,
+            locale: locale,
+            theme: theme,
+            onPress: handleDayPress,
+            testID: testID ? `${testID}-day-${day.key}` : undefined
+          }, day.key))
+        }, week[0]?.key ?? "week"))
+      })]
+    })]
+  });
+});
+//# sourceMappingURL=Calendar.js.map

package/lib/module/modules/date-picker/Calendar.keys.js

@@ -0,0 +1,23 @@
+"use strict";
+
+/**
+ * Native/default counterpart of `Calendar.keys.web.ts`. A physical keyboard driving a month grid is
+ * a web concern, so both hooks are no-ops here with identical signatures.
+ *
+ * Same `.ts` / `.web.ts` pair `core/a11y/keyboard.ts` and `../modal/renderWebPortal.ts` use: Metro
+ * resolves the `.web.ts` only for a web bundle, so no DOM code enters the native graph, and Jest
+ * (whose `react-native` preset has no `web` platform) always resolves THIS file — the web half is
+ * tested by importing it explicitly.
+ *
+ * These live in the module rather than in `core/a11y` on purpose: `useRovingKeys` models one flat
+ * list on one axis, and a month grid is 2-D over Dates (week wrapping, month paging). Forcing it
+ * into that helper would distort both.
+ */
+
+export function useCalendarGridKeys(_ref, _active, _onMove) {
+  return;
+}
+export function useCalendarGridFocus(_ref, _focusedKey, _active) {
+  return;
+}
+//# sourceMappingURL=Calendar.keys.js.map

package/lib/module/modules/date-picker/Calendar.keys.web.js

@@ -0,0 +1,83 @@
+"use strict";
+
+/**
+ * Web implementation of the Calendar day-grid's keyboard navigation. Metro only resolves this file
+ * for a web bundle (see `Calendar.keys.ts`), so it is the one place here that may assume a DOM.
+ *
+ * The DOM types are hand-written for the same reason `core/a11y/keyboard.web.ts` writes its own:
+ * `tsconfig.json` sets `"lib": ["ESNext"]`, `any` is lint-banned, and augmenting `react-native`'s
+ * types would ship through `lib/typescript/**`. A module-local structural surface plus
+ * `declare const document` erases entirely at emit.
+ *
+ * This file owns ONLY the DOM half — which key means which move, and moving real focus. Every date
+ * calculation lives in `resolveCalendarFocusMove` (`DatePicker.variants.ts`), pure and unit-tested.
+ *
+ * Enter and Space are deliberately unhandled: the day cells are `role="button"`, which
+ * `react-native-web`'s `PressResponder.isValidKeyPress` already presses on both keys. Handling them
+ * here too would select the day twice.
+ */
+
+import { useEffect, useRef } from "react";
+/** `typeof` rather than a null check: a bare `document` reference throws outside a browser. */
+function getDocument() {
+  return typeof document === "undefined" ? undefined : document;
+}
+
+/** `react-native-web` forwards a component's ref to the host element it renders — the same
+ *  "assume a DOM in the `.web` file only" cast `renderWebPortal.web.ts` established. */
+function domNode(ref) {
+  return ref.current ?? null;
+}
+const MOVE_BY_KEY = {
+  ArrowLeft: "prevDay",
+  ArrowRight: "nextDay",
+  ArrowUp: "prevWeek",
+  ArrowDown: "nextWeek",
+  Home: "weekStart",
+  End: "weekEnd",
+  PageUp: "prevMonth",
+  PageDown: "nextMonth"
+};
+
+/**
+ * Arrow/Home/End/PageUp/PageDown on the grid container. Listens on the CONTAINER (capture phase),
+ * never on `document`, so two calendars on one page never fight over the same arrow key, and so an
+ * arrow pressed on the ‹ › header buttons is left alone.
+ */
+export function useCalendarGridKeys(ref, active, onMove) {
+  const onMoveRef = useRef(onMove);
+  onMoveRef.current = onMove;
+  useEffect(() => {
+    if (!active) return;
+    const node = domNode(ref);
+    if (node === null) return;
+    const handleKeyDown = event => {
+      const move = MOVE_BY_KEY[event.key];
+      if (move === undefined) return;
+      event.preventDefault();
+      onMoveRef.current(move);
+    };
+    node.addEventListener("keydown", handleKeyDown, true);
+    return () => node.removeEventListener("keydown", handleKeyDown, true);
+  }, [ref, active]);
+}
+
+/**
+ * Moves real DOM focus onto whichever day cell currently owns `tabIndex={0}`, after `focusedKey`
+ * changed the roving index.
+ *
+ * The `contains` guard is the whole safety of this hook: it only ever moves focus that is ALREADY
+ * inside the grid. Without it, a caller's own selection (or the first mount) would rip focus out of
+ * the field that opened the picker.
+ */
+export function useCalendarGridFocus(ref, focusedKey, active) {
+  useEffect(() => {
+    if (!active) return;
+    const doc = getDocument();
+    const node = domNode(ref);
+    if (doc === undefined || node === null) return;
+    if (!node.contains(doc.activeElement)) return;
+    node.querySelector('[tabindex="0"]')?.focus();
+  }, [ref, focusedKey, active]);
+}
+//# sourceMappingURL=Calendar.keys.web.js.map

package/lib/module/modules/date-picker/DatePicker.js

@@ -0,0 +1,162 @@
+"use strict";
+
+/**
+ * DatePicker — a field styled like `Input`'s box (`PickerField`) that opens `Calendar` and/or
+ * `TimePicker` in `PickerShell` (React Native's OWN `Modal` — see `PickerShell.tsx`). In
+ * `"datetime"` mode the sheet shows a Date | Time `Tabs` strip above the active panel — the
+ * library's own `Tabs` component, composed rather than reimplemented.
+ *
+ * The sheet edits a local DRAFT, never `value` directly: `Calendar`/`TimePicker` inside the modal
+ * report into `draft`, and only Confirm commits it via `onChange`. Cancel — and the backdrop, which
+ * is the same dismissal — discards the draft, so "Cancel restores the prior value" holds by
+ * construction (the prior value was never touched).
+ */
+
+import { memo, useCallback, useState } from "react";
+import { View } from "react-native";
+import { Tabs } from "../tabs/index.js";
+import { Calendar } from "./Calendar.js";
+import { PickerField } from "./PickerField.js";
+import { PickerShell } from "./PickerShell.js";
+import { TimePicker } from "./TimePicker.js";
+import { useTheme } from "../../theme/hooks.js";
+import { DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, DEFAULT_PLACEHOLDER, clampToRange, formatFieldValue, withDay } from "./DatePicker.variants.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SHEET_LABELS = {
+  date: "Date picker",
+  datetime: "Date and time picker",
+  time: "Time picker"
+};
+const DATE_TIME_TABS = [{
+  label: "Date",
+  value: "date"
+}, {
+  label: "Time",
+  value: "time"
+}];
+export const DatePicker = /*#__PURE__*/memo(function DatePicker({
+  value = null,
+  onChange,
+  mode = "date",
+  confirmOnSelect = false,
+  label,
+  placeholder = DEFAULT_PLACEHOLDER,
+  minDate,
+  maxDate,
+  disabled = false,
+  error,
+  clearable = true,
+  format,
+  use24Hour = false,
+  firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK,
+  locale = DEFAULT_LOCALE,
+  containerStyle,
+  testID
+}) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [activeTab, setActiveTab] = useState("date");
+  const displayText = formatFieldValue(value, mode, {
+    locale,
+    use24Hour,
+    format
+  });
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    setDraft(value);
+    setActiveTab("date");
+    setOpen(true);
+  }, [disabled, value]);
+  const closePicker = useCallback(() => setOpen(false), []);
+  const confirm = useCallback(() => {
+    onChange(draft === null ? null : clampToRange(draft, minDate, maxDate));
+    setOpen(false);
+  }, [draft, onChange, minDate, maxDate]);
+  const clearValue = useCallback(() => onChange(null), [onChange]);
+
+  // Preserves any time already chosen on the Time tab: Calendar's own `onChange` only ever reports
+  // a day (at noon — it has no concept of time-of-day), so switching the day must re-apply the
+  // draft's existing time-of-day rather than resetting it to noon.
+  const handleDateChange = useCallback(date => {
+    setDraft(prev => withDay(prev, date));
+  }, []);
+  const handleDateSelect = useCallback(date => {
+    const next = withDay(draft, date);
+    if (confirmOnSelect && mode === "date") {
+      onChange(clampToRange(next, minDate, maxDate));
+      setOpen(false);
+      return;
+    }
+    handleDateChange(date);
+  }, [draft, confirmOnSelect, mode, onChange, minDate, maxDate, handleDateChange]);
+
+  // TimePicker's `onChange` already merges against the draft it was given as `value`, so its output
+  // is the new committed draft directly.
+  const handleTimeChange = useCallback(date => setDraft(date), []);
+  const handleTabChange = useCallback(tab => setActiveTab(tab), []);
+  const trailingIcon = mode === "time" ? "clock" : "calendar";
+  const body = mode === "time" ? /*#__PURE__*/_jsx(TimePicker, {
+    value: draft,
+    onChange: handleTimeChange,
+    use24Hour: use24Hour,
+    testID: testID ? `${testID}-time` : undefined
+  }) : mode === "datetime" ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      items: DATE_TIME_TABS,
+      value: activeTab,
+      onValueChange: handleTabChange,
+      size: "sm",
+      style: {
+        marginBottom: theme.space[1]
+      },
+      testID: testID ? `${testID}-tabs` : undefined
+    }), activeTab === "date" ? /*#__PURE__*/_jsx(Calendar, {
+      value: draft,
+      onSelect: handleDateSelect,
+      minDate: minDate,
+      maxDate: maxDate,
+      firstDayOfWeek: firstDayOfWeek,
+      locale: locale,
+      testID: testID ? `${testID}-calendar` : undefined
+    }) : /*#__PURE__*/_jsx(TimePicker, {
+      value: draft,
+      onChange: handleTimeChange,
+      use24Hour: use24Hour,
+      testID: testID ? `${testID}-time` : undefined
+    })]
+  }) : /*#__PURE__*/_jsx(Calendar, {
+    value: draft,
+    onSelect: handleDateSelect,
+    minDate: minDate,
+    maxDate: maxDate,
+    firstDayOfWeek: firstDayOfWeek,
+    locale: locale,
+    testID: testID ? `${testID}-calendar` : undefined
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/_jsx(PickerField, {
+      label: label,
+      placeholder: placeholder,
+      displayText: displayText,
+      error: error,
+      disabled: disabled,
+      open: open,
+      clearable: clearable,
+      clearAccessibilityLabel: "Clear date",
+      trailingIcon: trailingIcon,
+      onPress: openPicker,
+      onClear: clearValue,
+      testID: testID
+    }), /*#__PURE__*/_jsx(PickerShell, {
+      open: open,
+      accessibilityLabel: SHEET_LABELS[mode],
+      onCancel: closePicker,
+      onConfirm: confirm,
+      testID: testID,
+      children: body
+    })]
+  });
+});
+//# sourceMappingURL=DatePicker.js.map