pixelize-native-library 1.0.6 → 1.2.0

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

@@ -0,0 +1,87 @@
+"use strict";
+
+/**
+ * DateRangePicker — the same field+modal shell as `DatePicker` (`PickerField`/`PickerShell`),
+ * driving `Calendar` in `mode="range"` instead of `"single"`. No `mode`/`use24Hour` — a date RANGE
+ * has no time-of-day dimension in this module's spec, matching `Calendar`'s own
+ * `rangeValue`/`onRangeChange` pair (`Calendar`'s single-date `value`/`onChange` are simply unused
+ * here, exactly as its own doc comment anticipates for a "range-only Calendar").
+ */
+
+import { memo, useCallback, useState } from "react";
+import { View } from "react-native";
+import { Calendar } from "./Calendar.js";
+import { PickerField } from "./PickerField.js";
+import { PickerShell } from "./PickerShell.js";
+import { DEFAULT_FIRST_DAY_OF_WEEK, DEFAULT_LOCALE, EMPTY_RANGE, clampToRange, formatDate, formatRangeValue } from "./DatePicker.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_RANGE_PLACEHOLDER = "Select date range";
+export const DateRangePicker = /*#__PURE__*/memo(function DateRangePicker({
+  value = EMPTY_RANGE,
+  onChange,
+  label,
+  placeholder = DEFAULT_RANGE_PLACEHOLDER,
+  minDate,
+  maxDate,
+  disabled = false,
+  error,
+  clearable = true,
+  format,
+  firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK,
+  locale = DEFAULT_LOCALE,
+  containerStyle,
+  testID
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const formatOne = format ?? (date => formatDate(date, locale));
+  const displayText = formatRangeValue(value, formatOne);
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    setDraft(value);
+    setOpen(true);
+  }, [disabled, value]);
+  const closePicker = useCallback(() => setOpen(false), []);
+  const confirm = useCallback(() => {
+    onChange({
+      start: draft.start === null ? null : clampToRange(draft.start, minDate, maxDate),
+      end: draft.end === null ? null : clampToRange(draft.end, minDate, maxDate)
+    });
+    setOpen(false);
+  }, [draft, onChange, minDate, maxDate]);
+  const clearValue = useCallback(() => onChange(EMPTY_RANGE), [onChange]);
+  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 dates",
+      trailingIcon: "calendar",
+      onPress: openPicker,
+      onClear: clearValue,
+      testID: testID
+    }), /*#__PURE__*/_jsx(PickerShell, {
+      open: open,
+      accessibilityLabel: "Date range picker",
+      onCancel: closePicker,
+      onConfirm: confirm,
+      testID: testID,
+      children: /*#__PURE__*/_jsx(Calendar, {
+        mode: "range",
+        rangeValue: draft,
+        onRangeChange: setDraft,
+        minDate: minDate,
+        maxDate: maxDate,
+        firstDayOfWeek: firstDayOfWeek,
+        locale: locale,
+        testID: testID ? `${testID}-calendar` : undefined
+      })
+    })]
+  });
+});
+//# sourceMappingURL=DateRangePicker.js.map

package/lib/module/modules/date-picker/MODULE.md

@@ -0,0 +1,169 @@
+# date-picker/ — calendar, time, and field+modal date/time pickers
+
+Self-contained date/time picking, no new dependency: the calendar maths (grid building, range/min/max
+logic, formatting) is hand-written and unit-tested rather than pulled in from a package.
+
+`Calendar` is the primitive; `TimePicker` is a second, independent primitive; `DatePicker` and
+`DateRangePicker` are field+modal wrappers that compose them with two internal, non-exported helpers.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Calendar.tsx` | Inline month grid. Header doubles as a month/year quick-jump toggle. Composes the library's own `Button` for ‹ › nav. |
+| `TimePicker.tsx` | Hour / minute (/ AM-PM) as scrollable `FlatList` columns — never an analog clock face. |
+| `DatePicker.tsx` | Field (`PickerField`) + modal (`PickerShell`) wrapping `Calendar`/`TimePicker`; a `Tabs` strip in `"datetime"` mode. |
+| `DateRangePicker.tsx` | Same field+modal shell, driving `Calendar` in `mode="range"`. |
+| `PickerField.tsx` | Internal: the pressable field box, byte-for-byte `Input`'s `md` box. Not exported. |
+| `PickerShell.tsx` | Internal: the modal chrome (backdrop, sheet, Cancel/Confirm footer) in RN's own `Modal`. Not exported. |
+| `DatePicker.variants.ts` | ALL pure date maths (grid, comparison, clamping, formatting, time arithmetic, `resolveCalendarFocusMove`) + colour/structure/a11y resolvers. No React, no lucide. |
+| `Calendar.keys.ts` / `Calendar.keys.web.ts` | Internal, platform-split: the DOM half of the day grid's keyboard navigation. Native file is no-ops. Not exported. |
+| `index.ts` | Public surface: `Calendar`, `TimePicker`, `DatePicker`, `DateRangePicker` + their prop/value types. |
+| `__tests__/DatePicker.test.ts` | Pure: date maths (leap years, month rollover, DST, firstDayOfWeek, min/max) + WCAG contrast (all brands × modes) + a11y contract. |
+| `__tests__/DatePicker.render.test.tsx` | Render: all four components, open/close, selection, disabled, clear, tabs, backdrop dismiss, web-portal opt-in, **and the rendered 44dp targets**. |
+| `__tests__/DatePicker.motion.test.tsx` | Reduce-motion: the sheet's reveal and a time option's press must be at their end value on the next frame. |
+| `__tests__/PickerShell.keyboard.web.test.tsx` | Escape / Tab trap / focus restore on the web-portal branch, and their deliberate absence on the RNModal branch. |
+| `__tests__/Calendar.keys.web.test.ts` | The web key→move mapping and the roving-focus effect, against a hand-built DOM. |
+
+## Props
+
+**Calendar** — `value?`, `onChange?(date)` (single mode), `mode?: "single" | "range"` (`single`),
+`rangeValue?`, `onRangeChange?(range)`, `minDate?`, `maxDate?`, `disabledDates?: Date[]`,
+`firstDayOfWeek?: 0 | 1` (`1` = Monday), `locale?` (`en-US`, drives month/weekday NAMES only via
+`Intl`), `style?`, `testID?`. `onChange` is optional — a range-only `Calendar` isn't forced to pass a
+no-op; the reverse holds for `onRangeChange`.
+
+**TimePicker** — `value?`, `onChange(date)`, `use24Hour?` (`false`), `minuteStep?` (`1`), `style?`,
+`testID?`.
+
+**DatePicker** — `value?`, `onChange(date | null)`, `mode?: "date" | "datetime" | "time"` (`date`),
+`label?`, `placeholder?` (`"Select date"`), `minDate?`, `maxDate?`, `disabled?`, `error?`,
+`clearable?` (`true`), `format?(date)` (replaces the whole field string), `use24Hour?`,
+`firstDayOfWeek?`, `locale?`, `containerStyle?: LayoutStyle`, `testID?`.
+
+**DateRangePicker** — `value?: { start, end }`, `onChange(range)`, `label?`, `placeholder?`
+(`"Select date range"`), `minDate?`, `maxDate?`, `disabled?`, `error?`, `clearable?`, `format?(date)`
+(one endpoint; the field joins with `" – "`), `firstDayOfWeek?`, `locale?`, `containerStyle?`, `testID?`.
+No `mode`/`use24Hour` — a range has no time-of-day dimension in this module.
+
+## Accessibility contract (WCAG)
+
+- **State/hidden props are FLAT `aria-*`, never the object forms.** `react-native-web` forwards only a
+  flat `aria-*` vocabulary to the DOM and silently discards `accessibilityState={{…}}`,
+  `accessibilityElementsHidden` and `importantForAccessibility`, so those would leave the web build
+  with a role and no state. RN's own `View`/`Text`/`Pressable` merge the flat props back into
+  `accessibilityState` (`View.js`), so native loses nothing — which is why the render tests can still
+  read `props.accessibilityState.*` truthfully. The resolvers therefore return literal quoted keys
+  (`"aria-selected"`, `"aria-expanded"`, `"aria-disabled"`) and the JSX spells each one out.
+- **1.3.1 / 4.1.2** — every day cell's `accessibilityLabel` is the FULL readable date
+  (`formatFullDate`, e.g. "Friday, March 15, 2024"), never the bare number; `aria-selected` /
+  `aria-disabled` carry its state. The field is `accessibilityRole="button"` with `aria-expanded`
+  tracking the sheet, matching Select's trigger contract.
+- **1.4.1 — colour is never the only channel.** "today" and range membership are colour in the grid,
+  so `resolveCalendarDayAccessibility` folds them into the label too (`", today"`,
+  `", in selected range"`). `aria-selected` marks only the two range ENDPOINTS, so without the
+  suffix the days between them read as unselected.
+- **4.1.2 — the sheet is a real modal**: `accessibilityViewIsModal` **and** `aria-modal` (a genuine
+  both-props case — RN's `View` reads only the first, `react-native-web` only the second), plus
+  `onAccessibilityEscape`, on the sheet node, mirroring `modal/`/`bottom-sheet/`. Both matter — the
+  web-portal path renders no RN `<Modal>` to take the page out of the a11y tree, and the backdrop is
+  `accessible={false}`, so two-finger-Z has nothing else to hit. It also carries an
+  `accessibilityLabel` ("Date picker" / "Time picker" / "Date and time picker" / "Date range
+  picker"): there is no visible title to borrow, so focus would land on an anonymous descendant.
+  Required internal `PickerShell` prop, not public API.
+- **Decorative nodes use `aria-hidden`** (the weekday header row, the field's visual label `Text`) —
+  one prop that hides on native AND on web, where the two RN-only props it replaces were no-ops.
+- **2.1.1 keyboard (web only)** — the sheet gets Escape, a Tab trap and focus restore from
+  `PickerShell`, and the 42-cell day grid is **one tab stop, not 42**: exactly one cell carries
+  `tabIndex={0}` and Arrow/Home/End/PageUp/PageDown move which (`Calendar.keys.web.ts` →
+  `resolveCalendarFocusMove`). Enter/Space are left to `react-native-web`'s own `role="button"`
+  press handling — handling them here would select the day twice. Moving past the displayed month
+  pages the cursor; every move is `clampToRange`d to `minDate`/`maxDate`. A disabled day can be
+  focused but not selected, which is what lets a run of blocked dates be crossed at all.
+- **1.3.1** — `TimePicker`'s columns are labelled `"Hour"` / `"Minute"` / `"AM or PM"`, so the options
+  aren't one flat run. They are `role="button"` option lists, not steppers — no `accessibilityValue`.
+- **2.5.5 / 2.5.8 target size** — day cells, quick-jump cells and time options are 44dp `minHeight`
+  directly; the field's trigger and the clear button reach 44dp via `hitSlop`. Day-cell WIDTH is
+  `flex: 1` (see Known gaps).
+- **A constant assertion is not enough for a target size.** Every number in `DatePicker.test.ts`'s
+  target-size describe is PAIRED with a flattened-style assertion on the real node in
+  `DatePicker.render.test.tsx`. A constants-only suite stayed green through a refactor that shrank
+  the rendered trigger to ~24dp.
+- **The field's trigger owns the box's gutters and stretches to its height.** `dateFieldStructure`'s
+  `paddingHorizontal` is zeroed on the box and re-applied to the `Pressable` (the clear button
+  carries the right gutter as a margin), and `fieldPressable` sets `alignSelf: "stretch"` — same
+  reason `Input` stretches its `TextInput`. In a `row` parent with `alignItems: "center"` a child is
+  sized to its CONTENT, so without both the target is ~20dp tall inside a 16dp dead strip each side.
+  `DATE_FIELD_HIT_SLOP` is sized against `DATE_FIELD_INNER_HEIGHT` (box height minus its own border,
+  which Yoga lays outside its children), never `DATE_FIELD_HEIGHT`.
+- **1.4.3** — selected-day label on `accent.solid`, muted adjacent-day label on `bg.surface`,
+  field/message text on the canvas — all measured ≥ 4.5:1, every brand × mode. Disabled cells are
+  exempt, like every other disabled control in this library.
+- **1.4.11** — the today ring (`fg.muted`, a border never a fill — fill is reserved for selection)
+  and the field border are measured ≥ 3:1 against their surface.
+- **2.3.3** — the sheet's RN `<Modal>` is `animationType="none"` unconditionally; the fade/slide is
+  `core/motion`'s `useReveal`, which `setValue`s opacity/translateY straight to their end state under
+  `useReducedMotion()` (`usePressMotion` likewise for a time option's press). `DatePicker.motion.test.tsx`
+  covers it — the old `animationType={reducedMotion ? "none" : "fade"}` prop it replaced is gone.
+
+## Patterns copied from the reference modules
+
+1. **Structure vs colour split** (Button) — sizing/spacing via `createThemedVariants`; every colour a
+   role lookup, never a hex, applied inline.
+2. **Field/label/error shape** (`input/`) — `PickerField` reuses `Input`'s exact `md` box height,
+   padding, radius, and label/error placement (the padding lives on the trigger, not the box — see
+   the a11y contract; the visible inset is identical), so a `DatePicker` sits beside a real `Input`
+   with no visual seam.
+3. **Modal overlay + backdrop dismiss** (`select/`) — `PickerShell` is RN's own `Modal`, the same
+   web-portal opt-in (`ModalPortalContext`/`renderWebPortal`) and backdrop-press-closes convention.
+4. **Tab strip** (`tabs/`) — `"datetime"` mode composes the library's own `Tabs`, not a custom toggle.
+
+## Design decisions specific to this module
+
+- **The sheet edits a local draft, never `value` directly.** `Calendar`/`TimePicker` report into
+  `draft`; only Confirm commits it via `onChange`. Cancel and the backdrop are the same dismissal and
+  simply discard the draft — "Cancel restores the prior value" holds by construction, since the prior
+  value was never touched.
+- **Every internal `Date` is anchored at local noon** (`atNoon`/`makeDate`). Constructing at midnight
+  lands on the wrong calendar day in any zone whose DST transition happens at 00:00 (e.g.
+  America/Santiago) — noon is never ambiguous or skipped by any real-world DST rule.
+- **Day-level comparisons (`isSameDay`, `dayOrdinal`, `isWithinRange`) compare calendar fields, never
+  timestamps** — immune to time-of-day and DST offsets by construction (`DatePicker.test.ts` asserts
+  this directly).
+- **`PickerField`/`PickerShell` are intentionally not exported.** The two pickers differ only in what
+  they render as sheet content; the field markup and modal chrome are otherwise identical, so
+  splitting them out is a plain "compose, don't reimplement" internal helper, not public API.
+
+## Known gaps
+
+- Day-cell touch target is `flex: 1` for width (to fit 7 columns on the narrowest phone) — height
+  always meets 44dp, width only above **364dp**: 7 × 44 plus 56dp of horizontal chrome (overlay
+  2 × 12 + sheet 2 × 8 + calendar 2 × 8). That is wider than most phones in use — a cell is ~43.4dp
+  at Android's very common 360dp and ~37.7dp on an iPhone SE (320dp), so WCAG 2.5.5 is missed on
+  those devices, not merely on an unusually narrow one.
+- The field's `error` string is not folded into the field's accessible name. Unlike `Input`, which at
+  least surfaces its error through `accessibilityHint` (`resolveInputAccessibility`), the picker
+  field surfaces it nowhere — a screen reader announces the invalid border colour as nothing at all.
+  Pre-existing; fixing it belongs with the library-wide field a11y pass, not this module alone. Note
+  `accessibilityHint` has **no** `react-native-web` equivalent at all, so whatever that pass lands
+  must reach web through `aria-describedby` on the rendered error `Text`, not through a hint.
+- No swipe-to-navigate months — v1 is touch-only there.
+- **The quick-jump grid (12 month cells) is still 12 tab stops.** Only the DAY grid rovs; the
+  month grid was left alone because it is transient and reachable in 12 keys, not 30.
+- **Arrow keys are not RTL-mirrored.** ArrowLeft is always the previous day. Correct for every
+  locale this library ships copy for; a genuine RTL pass belongs library-wide, not here.
+- `DateRangePicker` has no "hover preview" of the in-progress range before the second tap.
+
+## Performance
+
+All four exported components wrapped in `React.memo`. `TimePicker`'s hour/minute columns are
+virtualized `FlatList`s (a minute column can hold 60 rows); the two-item AM/PM column and the 42-cell
+month grid are plain views, matching `Tabs`'/`Menu`'s choice not to virtualize small, fixed lists.
+Formatters (`Intl.DateTimeFormat`) are cached per `(locale, shape)` — a month render formats 42
+accessible day labels, and constructing a fresh formatter per cell measurably dominated that work.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

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

@@ -0,0 +1,142 @@
+"use strict";
+
+/**
+ * PickerField — the pressable field box shared by `DatePicker` and `DateRangePicker`, styled
+ * byte-for-byte like `Input`'s `md` box (see `dateFieldStructure`'s doc comment) so either sits
+ * beside a real `Input` in a form with no visual seam. NOT part of this module's public surface —
+ * both pickers differ only in what value they format and how "clear" resets it; the field's markup,
+ * a11y wiring and focus/error treatment are otherwise identical.
+ */
+
+import { memo, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { CLEAR_BUTTON_HIT_SLOP, DATE_FIELD_FONT_SIZE, DATE_FIELD_HIT_SLOP, DATE_FIELD_ICON_SIZE, clearButtonStructure, dateFieldStructure, resolveDateFieldAccessibility, resolveDateFieldColors } from "./DatePicker.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+export const PickerField = /*#__PURE__*/memo(function PickerField({
+  label,
+  placeholder,
+  displayText,
+  error,
+  disabled,
+  open,
+  clearable,
+  clearAccessibilityLabel,
+  trailingIcon,
+  onPress,
+  onClear,
+  testID
+}) {
+  const theme = useTheme();
+  const [focused, setFocused] = useState(false);
+  const fieldColors = resolveDateFieldColors(theme.colors, {
+    focused: focused || open,
+    invalid: error !== undefined
+  });
+  const a11y = resolveDateFieldAccessibility({
+    label,
+    displayValue: displayText,
+    placeholder,
+    disabled,
+    open
+  });
+  const showClear = clearable && !disabled && displayText !== "";
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [label !== undefined &&
+    /*#__PURE__*/
+    // Decorative — the real accessible name lives on the field Pressable below (Input's pattern).
+    _jsx(Text, {
+      "aria-hidden": true,
+      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+        fontSize: theme.fontSizes.sm,
+        color: theme.colors.fg.default,
+        marginBottom: theme.space[1]
+      }],
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      testID: testID ? `${testID}-box` : undefined,
+      style: [dateFieldStructure(theme),
+      // The box's gutters move onto the trigger below, so the whole visible field opens the
+      // picker — the padding stayed here and killed 16dp of target on each side (WCAG 2.5.5).
+      {
+        borderColor: fieldColors.border,
+        paddingHorizontal: 0
+      }, disabled && styles.dimmed],
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        testID: testID,
+        accessibilityRole: a11y.accessibilityRole,
+        accessibilityLabel: a11y.accessibilityLabel,
+        "aria-disabled": a11y["aria-disabled"],
+        "aria-expanded": a11y["aria-expanded"],
+        disabled: a11y.disabled,
+        onPress: onPress,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        hitSlop: DATE_FIELD_HIT_SLOP,
+        style: [styles.fieldPressable, {
+          paddingLeft: theme.space[4],
+          paddingRight: showClear ? 0 : theme.space[4]
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+            flex: 1,
+            fontSize: DATE_FIELD_FONT_SIZE,
+            color: displayText ? fieldColors.text : fieldColors.placeholder
+          }],
+          children: displayText || placeholder
+        }), /*#__PURE__*/_jsx(Icon, {
+          name: trailingIcon,
+          size: DATE_FIELD_ICON_SIZE,
+          color: fieldColors.icon,
+          strokeWidth: ICON_STROKE
+        })]
+      }), showClear && /*#__PURE__*/_jsx(Pressable, {
+        testID: testID ? `${testID}-clear` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: clearAccessibilityLabel,
+        hitSlop: CLEAR_BUTTON_HIT_SLOP,
+        onPress: onClear,
+        style: [clearButtonStructure(theme), {
+          marginRight: theme.space[4]
+        }],
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "x",
+          size: DATE_FIELD_ICON_SIZE,
+          color: fieldColors.icon,
+          strokeWidth: ICON_STROKE
+        })
+      })]
+    }), error !== undefined && /*#__PURE__*/_jsx(Text, {
+      accessibilityLiveRegion: "polite",
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: fieldColors.message,
+        marginTop: theme.space[1]
+      }],
+      children: error
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  },
+  // `alignSelf: "stretch"` is load-bearing: the row parent would otherwise size the trigger to its
+  // ~20dp content height, not the field's 40dp box. Same reason `Input` stretches its TextInput.
+  fieldPressable: {
+    flex: 1,
+    alignSelf: "stretch",
+    flexDirection: "row",
+    alignItems: "center",
+    minWidth: 0
+  },
+  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
+  dimmed: {
+    opacity: 0.5
+  }
+});
+//# sourceMappingURL=PickerField.js.map

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

@@ -0,0 +1,132 @@
+"use strict";
+
+/**
+ * PickerShell — the modal chrome (backdrop, overlay, sheet, Cancel/Confirm footer) shared by
+ * `DatePicker` and `DateRangePicker`. NOT part of this module's public surface (not re-exported
+ * from `index.ts`): the two pickers differ only in what they render as `children` (Calendar /
+ * TimePicker / a `Tabs` strip) — the sheet's presentation, dismissal and confirm/cancel wiring are
+ * otherwise identical, so this is a plain internal composition helper, the same "compose, don't
+ * reimplement" choice `alert-dialog` makes for its Modal + Button pairing.
+ *
+ * Renders in React Native's OWN `Modal`, imported directly from `"react-native"` — same reasoning
+ * as `Select`/`Menu`: this module owns its sheet's markup outright, never the library's own `Modal`
+ * COMPONENT (a persistent app dialog with a title/children contract is a different shape than a
+ * confirm/cancel picker sheet). The one deliberate exception is the web portal mechanism
+ * (`ModalPortalContext`/`renderWebPortal`), read for the same reason `Select.tsx`/`Menu.tsx` read
+ * it — see `../modal/ModalPortalContext.ts`.
+ */
+
+import { memo, useContext, useMemo, useRef } from "react";
+import { Animated, Modal, Platform, Pressable, StyleSheet, View } from "react-native";
+import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
+import { useReveal } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Button } from "../button/index.js";
+import { ModalPortalContext } from "../modal/ModalPortalContext.js";
+import { renderWebPortal } from "../modal/renderWebPortal";
+import { pickerFooterStructure, pickerOverlayStructure, pickerSheetStructure } from "./DatePicker.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Decorative dismiss scrim behind the sheet — a design constant, not a role token: it is neither
+// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same constant
+// Select/Menu use for their identical backdrop.
+const BACKDROP_SCRIM = "#00000099";
+export const PickerShell = /*#__PURE__*/memo(function PickerShell({
+  open,
+  accessibilityLabel,
+  onCancel,
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  children,
+  testID
+}) {
+  const theme = useTheme();
+  const portalContainer = useContext(ModalPortalContext);
+  const sheetRef = useRef(null);
+  // Only on the portal branch: the RN <Modal> path below already gets Escape/trap/restore from
+  // react-native-web's own <Modal>, and two of each would fight. See ../modal/Modal.tsx.
+  const portalled = Platform.OS === "web" && portalContainer != null;
+  useDismissOnEscape(portalled && open, onCancel);
+  useFocusTrap(sheetRef, portalled && open);
+
+  // `mounted` is deliberately unused: the Modal below already unmounts the sheet on `open === false`,
+  // so gating on it too would keep the panel in the tree for the exit duration.
+  const {
+    style: revealStyle
+  } = useReveal(open);
+  const overlayStructure = useMemo(() => pickerOverlayStructure(theme), [theme]);
+  const footerStructure = useMemo(() => pickerFooterStructure(theme), [theme]);
+  const sheetStyle = useMemo(() => [pickerSheetStructure(theme), {
+    backgroundColor: theme.colors.bg.surface
+  }, revealStyle], [theme, revealStyle]);
+
+  // Built only while `open`: a closed picker has no reason to mount Calendar/TimePicker/Tabs just
+  // because the field is on screen.
+  const sheet = open ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-backdrop` : undefined,
+      accessible: false,
+      tabIndex: -1,
+      style: styles.backdrop,
+      onPress: onCancel
+    }), /*#__PURE__*/_jsx(View, {
+      style: overlayStructure,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        ref: sheetRef,
+        testID: testID ? `${testID}-sheet` : undefined
+        // Mirrors Modal/BottomSheet: on the web-portal path there is no RN <Modal> to take the
+        // page out of the a11y tree, and the backdrop is `accessible={false}` so two-finger-Z
+        // has nothing else to hit.
+        // Both: RN's View reads only `accessibilityViewIsModal`, react-native-web only `aria-modal`.
+        ,
+        accessibilityViewIsModal: true,
+        "aria-modal": true,
+        accessibilityLabel: accessibilityLabel,
+        onAccessibilityEscape: onCancel,
+        style: sheetStyle,
+        children: [children, /*#__PURE__*/_jsxs(View, {
+          style: footerStructure,
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "outline",
+            tone: "neutral",
+            label: cancelLabel,
+            onPress: onCancel,
+            testID: testID ? `${testID}-cancel` : undefined
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "solid",
+            tone: "accent",
+            label: confirmLabel,
+            onPress: onConfirm,
+            testID: testID ? `${testID}-confirm` : undefined
+          })]
+        })]
+      })
+    })]
+  }) : null;
+
+  // Web portal opt-in — see Select.tsx's identical branch + ModalPortalContext.ts. Every other case
+  // (native, or web with no ModalPortalProvider) renders through RN's own <Modal> below, unchanged.
+  if (portalled) {
+    if (!open) return null;
+    return renderWebPortal(/*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
+      pointerEvents: "box-none",
+      children: sheet
+    }), portalContainer);
+  }
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: open,
+    transparent: true,
+    animationType: "none",
+    onRequestClose: onCancel,
+    children: sheet
+  });
+});
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: BACKDROP_SCRIM
+  }
+});
+//# sourceMappingURL=PickerShell.js.map