pixelize-native-library 1.0.7 → 1.2.1

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

@@ -0,0 +1,701 @@
+"use strict";
+
+/**
+ * date-picker's date maths + style/behaviour resolution. Same split every reference module uses:
+ *  - PURE DATE MATHS (grid building, comparison, clamping, formatting) lives here so the bug-prone
+ *    part — leap years, month boundaries, DST — is unit-tested without a renderer.
+ *  - STRUCTURE (heights, padding, radius, border WIDTH) lives in the `createThemedVariants`
+ *    resolvers, registered once per theme identity.
+ *  - COLOUR is resolved from the theme's ROLE colours by `resolveCalendarDayColors` /
+ *    `resolveTimeOptionColors` / `resolveDateFieldColors`, never a hardcoded hex.
+ *  - ACCESSIBILITY prop derivation is pure too, so the day-cell / field contracts are testable.
+ *
+ * Free of React and of `lucide`, so the WCAG + maths tests import it directly (mocking only
+ * `react-native`'s `StyleSheet`, as `core/style` does).
+ *
+ * EVERY `Date` this module constructs is anchored at local NOON. A date built at midnight lands on
+ * the previous day in any zone whose DST transition happens at 00:00 (America/Santiago,
+ * Asia/Beirut) — the single most common calendar bug class there is.
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+
+/** `1` = Monday (the library default — the team and its consumer apps are India-based, where the
+ *  week starts on Monday), `0` = Sunday. */
+
+/** Same floor as Button/Select — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules stay
+ *  isolated. */
+export const MIN_TOUCH_TARGET = 44;
+export const DAY_CELL_MIN_HEIGHT = MIN_TOUCH_TARGET;
+export const QUICK_JUMP_CELL_MIN_HEIGHT = MIN_TOUCH_TARGET;
+export const TIME_OPTION_HEIGHT = MIN_TOUCH_TARGET;
+
+/** The field matches `Input`'s `md` box exactly (height, font, icon, slop) so a DatePicker and an
+ *  Input sitting side by side in a form line up with no seam. */
+export const DATE_FIELD_HEIGHT = 40;
+export const DATE_FIELD_FONT_SIZE = 16;
+export const DATE_FIELD_ICON_SIZE = 18;
+/** `dateFieldStructure`'s own hairline: Yoga lays a border outside its children, so the trigger
+ *  stretched inside the box is this much shorter than `DATE_FIELD_HEIGHT`. */
+const DATE_FIELD_BORDER = 1;
+export const DATE_FIELD_INNER_HEIGHT = DATE_FIELD_HEIGHT - 2 * DATE_FIELD_BORDER;
+/** Sized against `DATE_FIELD_INNER_HEIGHT` — the height the trigger actually renders at — so the
+ *  real target clears 44dp (`DatePicker.render.test.tsx` asserts the rendered node, not the sum). */
+export const DATE_FIELD_HIT_SLOP = 3;
+/** The clear affordance is narrower than the field is tall, so it reaches 44×44 through `hitSlop`
+ *  — 6dp, which is smaller than the field's `space[2]` column gap, so its target can never overlap
+ *  the trailing calendar glyph's. */
+export const CLEAR_BUTTON_WIDTH = 32;
+export const CLEAR_BUTTON_HIT_SLOP = 6;
+export const GRID_COLUMNS = 7;
+/** Always six rows, so the sheet's height never jumps between a 4-row February and a 6-row March. */
+export const GRID_ROWS = 6;
+export const GRID_CELL_COUNT = GRID_COLUMNS * GRID_ROWS;
+export const QUICK_JUMP_COLUMNS = 3;
+export const MONTHS_IN_YEAR = 12;
+export const HOURS_IN_DAY = 24;
+export const MINUTES_IN_HOUR = 60;
+export const DEFAULT_LOCALE = "en-US";
+export const DEFAULT_FIRST_DAY_OF_WEEK = 1;
+export const DEFAULT_PLACEHOLDER = "Select date";
+/** En dash, spaced — the typographic range separator, not a hyphen. */
+export const RANGE_SEPARATOR = " – ";
+const NOON_HOUR = 12;
+/** Hour a fresh `datetime`/`time` selection starts from when the caller passed no value. Noon, for
+ *  the same DST reason every date here is built at noon. */
+export const DEFAULT_TIME_HOUR = NOON_HOUR;
+const pad2 = value => String(value).padStart(2, "0");
+
+/** The same calendar day, at local noon. */
+export function atNoon(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), NOON_HOUR, 0, 0, 0);
+}
+
+/** Local noon on `year`/`month`/`day`. Out-of-range `month`/`day` roll over exactly as `Date` does,
+ *  which is what makes grid building and month arithmetic a single expression below. */
+export function makeDate(year, month, day) {
+  return new Date(year, month, day, NOON_HOUR, 0, 0, 0);
+}
+
+/** Sortable YYYYMMDD integer. Comparing these instead of timestamps makes every day-level predicate
+ *  immune to time-of-day and to DST offsets. */
+export function dayOrdinal(date) {
+  return date.getFullYear() * 10000 + date.getMonth() * 100 + date.getDate();
+}
+
+/** `2024-03-15`. The stable per-day key for React lists and `testID`s. */
+export function toDayKey(date) {
+  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+}
+export function isSameDay(a, b) {
+  if (a == null || b == null) return false;
+  return dayOrdinal(a) === dayOrdinal(b);
+}
+
+/** Inclusive of both endpoints. A reversed pair (`end` before `start`) is normalised, so a caller
+ *  mid-drag never gets `false` for every day. */
+export function isWithinRange(date, start, end) {
+  if (start == null || end == null) return false;
+  const a = dayOrdinal(start);
+  const b = dayOrdinal(end);
+  const ordinal = dayOrdinal(date);
+  return ordinal >= Math.min(a, b) && ordinal <= Math.max(a, b);
+}
+
+/** Day-level clamp — the result is always at noon, so it is safe to hand straight to `onChange`. */
+export function clampToRange(date, minDate, maxDate) {
+  if (minDate != null && dayOrdinal(date) < dayOrdinal(minDate)) return atNoon(minDate);
+  if (maxDate != null && dayOrdinal(date) > dayOrdinal(maxDate)) return atNoon(maxDate);
+  return atNoon(date);
+}
+export function isDateDisabled(date, options = {}) {
+  const ordinal = dayOrdinal(date);
+  if (options.minDate != null && ordinal < dayOrdinal(options.minDate)) return true;
+  if (options.maxDate != null && ordinal > dayOrdinal(options.maxDate)) return true;
+  const blocked = options.disabledDates;
+  return blocked !== undefined && blocked.some(day => dayOrdinal(day) === ordinal);
+}
+/**
+ * The 6×7 cell grid for one month, in display order. `month` is 0-indexed (`Date#getMonth`), and
+ * out-of-range values roll over — `buildMonthGrid(2024, 12, 1)` is January 2025.
+ */
+export function buildMonthGrid(year, month, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK) {
+  const firstOfMonth = makeDate(year, month, 1);
+  const leading = (firstOfMonth.getDay() - firstDayOfWeek + GRID_COLUMNS) % GRID_COLUMNS;
+  const cells = [];
+  for (let index = 0; index < GRID_CELL_COUNT; index += 1) {
+    const date = makeDate(year, month, 1 - leading + index);
+    cells.push({
+      date,
+      dayOfMonth: date.getDate(),
+      inCurrentMonth: date.getMonth() === firstOfMonth.getMonth() && date.getFullYear() === firstOfMonth.getFullYear()
+    });
+  }
+  return cells;
+}
+export function chunkIntoWeeks(days) {
+  const weeks = [];
+  for (let index = 0; index < days.length; index += GRID_COLUMNS) {
+    weeks.push(days.slice(index, index + GRID_COLUMNS));
+  }
+  return weeks;
+}
+export function monthCursorOf(date) {
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth()
+  };
+}
+export function addMonths(cursor, delta) {
+  const shifted = makeDate(cursor.year, cursor.month + delta, 1);
+  return {
+    year: shifted.getFullYear(),
+    month: shifted.getMonth()
+  };
+}
+
+/** True when at least one day of the month is inside `[minDate, maxDate]` — the enablement rule for
+ *  the ‹ › month navigation. */
+export function canShowMonth(cursor, minDate, maxDate) {
+  const first = makeDate(cursor.year, cursor.month, 1);
+  const last = makeDate(cursor.year, cursor.month + 1, 0);
+  if (minDate != null && dayOrdinal(last) < dayOrdinal(minDate)) return false;
+  if (maxDate != null && dayOrdinal(first) > dayOrdinal(maxDate)) return false;
+  return true;
+}
+
+/** The same rule one level up — the ‹ › navigation pages years while the quick-jump grid is open. */
+export function canShowYear(year, minDate, maxDate) {
+  if (minDate != null && dayOrdinal(makeDate(year, 11, 31)) < dayOrdinal(minDate)) return false;
+  if (maxDate != null && dayOrdinal(makeDate(year, 0, 1)) > dayOrdinal(maxDate)) return false;
+  return true;
+}
+
+/**
+ * One arrow/Home/End/PageUp/PageDown press's effect on the day-grid's roving focus. Pure and
+ * platform-agnostic: `Calendar.keys.web.ts` only maps DOM key names onto these, so the whole 2-D
+ * traversal — week wrapping, month boundaries — is unit-testable without a DOM.
+ *
+ * Deliberately NOT `core/a11y`'s `useRovingKeys`: that helper's model is one flat list with one
+ * axis, and a month grid needs both axes over a Date, not an index.
+ */
+
+/** How far into its own week `date` sits, given where the week starts. */
+function weekdayOffset(date, firstDayOfWeek) {
+  return (date.getDay() - firstDayOfWeek + GRID_COLUMNS) % GRID_COLUMNS;
+}
+
+/** Jan 31 + 1 month is Feb 28/29, never Mar 3 — `makeDate`'s rollover is wrong for a focus move. */
+function shiftMonthKeepingDay(from, delta) {
+  const target = addMonths(monthCursorOf(from), delta);
+  const lastOfTarget = makeDate(target.year, target.month + 1, 0).getDate();
+  return makeDate(target.year, target.month, Math.min(from.getDate(), lastOfTarget));
+}
+export function resolveCalendarFocusMove(move, from, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK) {
+  const year = from.getFullYear();
+  const month = from.getMonth();
+  const day = from.getDate();
+  switch (move) {
+    case "prevDay":
+      return makeDate(year, month, day - 1);
+    case "nextDay":
+      return makeDate(year, month, day + 1);
+    case "prevWeek":
+      return makeDate(year, month, day - GRID_COLUMNS);
+    case "nextWeek":
+      return makeDate(year, month, day + GRID_COLUMNS);
+    case "weekStart":
+      return makeDate(year, month, day - weekdayOffset(from, firstDayOfWeek));
+    case "weekEnd":
+      return makeDate(year, month, day + (GRID_COLUMNS - 1 - weekdayOffset(from, firstDayOfWeek)));
+    case "prevMonth":
+      return shiftMonthKeepingDay(from, -1);
+    case "nextMonth":
+      return shiftMonthKeepingDay(from, 1);
+  }
+}
+export const EMPTY_RANGE = {
+  start: null,
+  end: null
+};
+
+/**
+ * One tap's effect on a range. A tap starts a fresh range whenever there is nothing to extend
+ * (no start, or a complete range) or when it lands before the current start; otherwise it closes
+ * the range.
+ */
+export function nextRangeSelection(current, date) {
+  const {
+    start,
+    end
+  } = current;
+  if (start === null || end !== null) return {
+    start: atNoon(date),
+    end: null
+  };
+  if (dayOrdinal(date) < dayOrdinal(start)) return {
+    start: atNoon(date),
+    end: null
+  };
+  return {
+    start,
+    end: atNoon(date)
+  };
+}
+const DATE_FORMAT = {
+  year: "numeric",
+  month: "short",
+  day: "numeric"
+};
+const FULL_DATE_FORMAT = {
+  weekday: "long",
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+};
+const MONTH_YEAR_FORMAT = {
+  month: "long",
+  year: "numeric"
+};
+const MONTH_SHORT_FORMAT = {
+  month: "short"
+};
+const WEEKDAY_FORMAT = {
+  weekday: "short"
+};
+const YEAR_FORMAT = {
+  year: "numeric"
+};
+
+// A month change formats 42 accessible day labels; constructing an `Intl.DateTimeFormat` per cell
+// dominated that work, so formatters are cached by (locale, shape).
+const formatters = new Map();
+function formatterFor(locale, shape, options) {
+  const key = `${locale}|${shape}`;
+  const cached = formatters.get(key);
+  if (cached !== undefined) return cached;
+  const created = new Intl.DateTimeFormat(locale, options);
+  formatters.set(key, created);
+  return created;
+}
+
+/** The default field text — a medium date (`Mar 15, 2024` in `en-US`). */
+export function formatDate(date, locale = DEFAULT_LOCALE) {
+  return formatterFor(locale, "date", DATE_FORMAT).format(date);
+}
+
+/** The FULL readable date a day cell announces (WCAG 1.3.1) — never the bare day number. */
+export function formatFullDate(date, locale = DEFAULT_LOCALE) {
+  return formatterFor(locale, "fullDate", FULL_DATE_FORMAT).format(date);
+}
+export function formatMonthYear(cursor, locale = DEFAULT_LOCALE) {
+  return formatterFor(locale, "monthYear", MONTH_YEAR_FORMAT).format(makeDate(cursor.year, cursor.month, 1));
+}
+export function formatYear(year, locale = DEFAULT_LOCALE) {
+  return formatterFor(locale, "year", YEAR_FORMAT).format(makeDate(year, 0, 1));
+}
+export function monthShortNames(locale = DEFAULT_LOCALE) {
+  const formatter = formatterFor(locale, "monthShort", MONTH_SHORT_FORMAT);
+  return Array.from({
+    length: MONTHS_IN_YEAR
+  }, (_unused, month) => formatter.format(makeDate(2024, month, 1)));
+}
+
+/** Seven weekday abbreviations in display order. 2023-01-01 was a Sunday, so `+ dayIndex` walks
+ *  `getDay()` 0..6 without any lookup table. */
+export function weekdayLabels(firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, locale = DEFAULT_LOCALE) {
+  const formatter = formatterFor(locale, "weekday", WEEKDAY_FORMAT);
+  return Array.from({
+    length: GRID_COLUMNS
+  }, (_unused, index) => formatter.format(makeDate(2023, 0, 1 + (firstDayOfWeek + index) % GRID_COLUMNS)));
+}
+export function toDisplayHour(hour24, use24Hour) {
+  if (use24Hour) return hour24;
+  const remainder = hour24 % 12;
+  return remainder === 0 ? 12 : remainder;
+}
+export function toMeridiem(hour24) {
+  return hour24 < 12 ? "AM" : "PM";
+}
+export function fromDisplayHour(displayHour, meridiem, use24Hour) {
+  if (use24Hour) return (displayHour % HOURS_IN_DAY + HOURS_IN_DAY) % HOURS_IN_DAY;
+  const base = displayHour % 12;
+  return meridiem === "PM" ? base + 12 : base;
+}
+
+/** Moves an hour across the AM/PM boundary without touching which hour of the half-day it is. */
+export function applyMeridiem(hour24, meridiem) {
+  const isAfternoon = hour24 >= 12;
+  if (meridiem === "PM" && !isAfternoon) return hour24 + 12;
+  if (meridiem === "AM" && isAfternoon) return hour24 - 12;
+  return hour24;
+}
+export function buildHourOptions(use24Hour) {
+  return use24Hour ? Array.from({
+    length: HOURS_IN_DAY
+  }, (_unused, hour) => hour) : Array.from({
+    length: 12
+  }, (_unused, index) => index + 1);
+}
+
+/** `step` is clamped to 1..60; a non-finite step falls back to 1 rather than looping forever. */
+export function buildMinuteOptions(step = 1) {
+  const safeStep = Number.isFinite(step) ? Math.min(Math.max(Math.floor(step), 1), MINUTES_IN_HOUR) : 1;
+  const options = [];
+  for (let minute = 0; minute < MINUTES_IN_HOUR; minute += safeStep) options.push(minute);
+  return options;
+}
+
+/** `base`'s calendar day at `hour24`:`minute`. No base → today. */
+export function withTime(base, hour24, minute) {
+  const day = base ?? new Date();
+  return new Date(day.getFullYear(), day.getMonth(), day.getDate(), hour24, minute, 0, 0);
+}
+
+/** `day`'s calendar day at `base`'s time of day. No base → noon, so a fresh selection is DST-safe. */
+export function withDay(base, day) {
+  return new Date(day.getFullYear(), day.getMonth(), day.getDate(), base == null ? DEFAULT_TIME_HOUR : base.getHours(), base == null ? 0 : base.getMinutes(), 0, 0);
+}
+
+/**
+ * Deliberately NOT `Intl`-formatted. `locale` on this module is documented as driving month and
+ * weekday NAMES only; a hand-built clock string is identical on every engine, which matters because
+ * Hermes' `Intl` support varies by platform and RN version.
+ */
+export function formatTime(date, use24Hour = false) {
+  const hours = date.getHours();
+  const minutes = pad2(date.getMinutes());
+  if (use24Hour) return `${pad2(hours)}:${minutes}`;
+  return `${toDisplayHour(hours, false)}:${minutes} ${toMeridiem(hours)}`;
+}
+export function formatFieldValue(value, mode, options = {}) {
+  if (value == null) return "";
+  if (options.format !== undefined) return options.format(value);
+  const use24Hour = options.use24Hour ?? false;
+  if (mode === "time") return formatTime(value, use24Hour);
+  const datePart = formatDate(value, options.locale ?? DEFAULT_LOCALE);
+  return mode === "datetime" ? `${datePart}, ${formatTime(value, use24Hour)}` : datePart;
+}
+
+/** A half-open range shows only the end it has — never a dangling separator. */
+export function formatRangeValue(range, format) {
+  if (range == null) return "";
+  const {
+    start,
+    end
+  } = range;
+  if (start != null && end != null) return `${format(start)}${RANGE_SEPARATOR}${format(end)}`;
+  if (start != null) return format(start);
+  if (end != null) return format(end);
+  return "";
+}
+/**
+ * Maps one cell's state onto role colours. The press fill is `bg.raised`, NOT `bg.sunken`: the
+ * range-middle label is `accent.text`, which measures 4.40:1 on `bg.sunken` (slate light) — just
+ * under AA — and 4.63:1 on `bg.raised`. Same class of fix `Tabs` documents for its pressed tab.
+ *
+ * A SELECTED cell keeps its accent fill while pressed: its label is `accent.onSolid`, which is only
+ * derived to be readable on `accent.solid`.
+ *
+ * The today ring reads `fg.muted`, not an accent token: `fg.muted` is proven ≥ 4.5:1 against
+ * `bg.surface` specifically (`readableOn(gray, [background[50], backgroundColor.muted])` in
+ * `roles/index.ts`) — comfortably clearing the ring's 3:1 floor on every brand × mode. `accent.solid`
+ * is only proven readable AGAINST its own derived `onSolid` label, never against a neutral surface,
+ * so it is not a safe ring colour here.
+ */
+export function resolveCalendarDayColors(colors, state) {
+  const ring = state.today && !state.selected ? colors.fg.muted : undefined;
+  if (state.selected) {
+    return {
+      background: colors.accent.solid,
+      label: colors.accent.onSolid,
+      ring: undefined
+    };
+  }
+  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3) and cannot be pressed.
+  if (state.disabled) {
+    return {
+      background: colors.bg.surface,
+      label: colors.fg.disabled,
+      ring
+    };
+  }
+  if (state.inRange) {
+    return {
+      background: state.pressed ? colors.bg.raised : colors.accent.subtle,
+      label: colors.accent.text,
+      ring
+    };
+  }
+  return {
+    background: state.pressed ? colors.bg.raised : colors.bg.surface,
+    label: state.adjacent ? colors.fg.muted : colors.fg.default,
+    ring
+  };
+}
+/**
+ * `headerLabel`/`headerIcon` on `surface` reuse the exact pairing `Select`'s trigger text/icon
+ * already prove against `bg.surface` (`Select.test.ts`); `headerPressed` reuses `bg.sunken`, the
+ * same press fill `Select`'s option rows prove `fg.default` stays ≥ 4.5:1 on. The month +/- nav
+ * itself is the library's own `Button` (icon-only, ghost/neutral) — already contrast-proven in
+ * `Button.test.ts` — so this table only covers the custom month/year quick-jump toggle, which
+ * needs `aria-expanded` (WCAG 4.1.2) that `Button`'s closed a11y contract can't
+ * express, the same reason `Select`'s own trigger is a custom `Pressable` and not `Button`.
+ */
+export function resolveCalendarChromeColors(colors) {
+  return {
+    surface: colors.bg.surface,
+    weekdayLabel: colors.fg.muted,
+    headerLabel: colors.fg.default,
+    headerIcon: colors.fg.muted,
+    headerPressed: colors.bg.sunken
+  };
+}
+export function resolveTimeOptionColors(colors, state) {
+  if (state.selected) {
+    return {
+      background: colors.accent.solid,
+      label: colors.accent.onSolid
+    };
+  }
+  return {
+    background: state.pressed ? colors.bg.raised : colors.bg.surface,
+    label: colors.fg.default
+  };
+}
+/**
+ * The field's colours, token-for-token identical to `Input`'s: the error border reads
+ * `status.danger.solid` (the decorative `status.danger.border` measures below 3:1 on every brand),
+ * and the box paints no background of its own so it reads on whatever canvas the form sits on.
+ */
+export function resolveDateFieldColors(colors, state) {
+  return {
+    border: state.invalid ? colors.status.danger.solid : state.focused ? colors.border.focus : colors.border.interactive,
+    text: colors.fg.default,
+    placeholder: colors.fg.muted,
+    icon: colors.fg.muted,
+    message: state.invalid ? colors.status.danger.text : colors.fg.muted,
+    label: colors.fg.default
+  };
+}
+/**
+ * RN has no `htmlFor`-equivalent link from a field to its sibling label `Text`, so the label's text
+ * is folded into the field's own accessible name — the same fallback `Input`/`Select` make.
+ */
+export function resolveDateFieldAccessibility(input) {
+  const disabled = input.disabled === true;
+  const spoken = input.displayValue !== "" ? input.displayValue : input.placeholder;
+  const label = input.label !== undefined && input.label !== "" ? `${input.label}, ${spoken}` : spoken;
+  return {
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    "aria-disabled": disabled,
+    "aria-expanded": input.open,
+    disabled
+  };
+}
+export function resolvePressedAccessibilityState(selected) {
+  return {
+    "aria-pressed": selected,
+    accessibilityState: {
+      selected
+    }
+  };
+}
+/** Appended to a day's label when the grid conveys the state with colour only (WCAG 1.4.1). */
+export const TODAY_SUFFIX = "today";
+export const IN_RANGE_SUFFIX = "in selected range";
+export function resolveCalendarDayAccessibility(input) {
+  const parts = [formatFullDate(input.date, input.locale ?? DEFAULT_LOCALE)];
+  if (input.today === true) parts.push(TODAY_SUFFIX);
+  // Endpoints already announce `selected`; only the days BETWEEN them have no other signal.
+  if (input.inRange === true && !input.selected) parts.push(IN_RANGE_SUFFIX);
+  return {
+    accessibilityRole: "button",
+    accessibilityLabel: parts.join(", "),
+    "aria-disabled": input.disabled,
+    ...resolvePressedAccessibilityState(input.selected)
+  };
+}
+export const calendarStructure = createThemedVariants(theme => ({
+  base: {
+    alignSelf: "stretch",
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
+    paddingHorizontal: theme.space[2],
+    paddingVertical: theme.space[2],
+    rowGap: theme.space[1]
+  }
+}));
+export const calendarHeaderStructure = createThemedVariants(_theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    minHeight: MIN_TOUCH_TARGET
+  }
+}));
+
+/** The month/year quick-jump toggle — the one custom header control (see `resolveCalendarChromeColors`
+ *  for why it isn't `Button`). The ‹ › month/year nav either side of it IS `Button` (icon-only). */
+export const calendarHeaderButtonStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    columnGap: theme.space[1],
+    flexShrink: 1,
+    minHeight: MIN_TOUCH_TARGET,
+    paddingHorizontal: theme.space[2],
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }
+}));
+
+/** Wraps the six week rows so the keyboard grid has one node to listen on and to scope its cell
+ *  lookup to. Repeats `calendarStructure`'s own `rowGap` so nesting changes no spacing. */
+export const calendarGridStructure = createThemedVariants(theme => ({
+  base: {
+    rowGap: theme.space[1]
+  }
+}));
+
+/** No column gap: a range fill has to be continuous across the days it spans. */
+export const calendarWeekRowStructure = createThemedVariants(_theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "stretch"
+  }
+}));
+export const calendarWeekdayCellStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.space[1]
+  }
+}));
+
+/**
+ * `flex: 1` (not a fixed 44dp width) because seven columns must fit the narrowest phone: the cell's
+ * HEIGHT always meets the 44dp floor, its width only above 364dp — 7 × 44 plus 56dp of horizontal
+ * chrome (overlay 2 × 12 + sheet 2 × 8 + calendar 2 × 8). Cells are ~43.4dp at Android's common
+ * 360dp and ~37.7dp on an iPhone SE. See MODULE.md's "Known gaps".
+ */
+export const calendarDayCellStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: DAY_CELL_MIN_HEIGHT,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
+    // Every cell reserves the today-ring's width so a month's rows don't shift when today scrolls
+    // into view; only today's cell paints a colour over it.
+    borderWidth: theme.borderWidths.thick,
+    borderColor: "transparent"
+  }
+}));
+export const quickJumpGridStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    rowGap: theme.space[1]
+  }
+}));
+
+/** `QUICK_JUMP_COLUMNS` columns of equal width. Written as a literal because RN's `DimensionValue`
+ *  only admits a `${number}%` template type, which a computed expression cannot satisfy. */
+const QUICK_JUMP_CELL_WIDTH = "33.3333%";
+export const quickJumpCellStructure = createThemedVariants(theme => ({
+  base: {
+    width: QUICK_JUMP_CELL_WIDTH,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: QUICK_JUMP_CELL_MIN_HEIGHT,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }
+}));
+
+/** Visible rows before a column scrolls. */
+export const TIME_VISIBLE_ROWS = 5;
+
+// A firm `height` (not `maxHeight`): a `FlatList` needs a determinate cross-axis size to know its
+// scrollable viewport — `maxHeight` alone leaves Yoga nothing to resolve the row's actual height
+// from, since neither this row nor an empty `FlatList` has any other intrinsic height.
+export const timeColumnsStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignSelf: "stretch",
+    columnGap: theme.space[2],
+    height: TIME_OPTION_HEIGHT * TIME_VISIBLE_ROWS
+  }
+}));
+export const timeColumnStructure = createThemedVariants(_theme => ({
+  base: {
+    flex: 1
+  }
+}));
+export const timeOptionStructure = createThemedVariants(theme => ({
+  base: {
+    height: TIME_OPTION_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }
+}));
+
+/** Byte-for-byte `Input`'s `md` box — same height, padding, radius and hairline. */
+export const dateFieldStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: DATE_FIELD_HEIGHT,
+    paddingHorizontal: theme.space[4],
+    borderWidth: theme.borderWidths.thin,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
+    columnGap: theme.space[2]
+  }
+}));
+export const clearButtonStructure = createThemedVariants(theme => ({
+  base: {
+    width: CLEAR_BUTTON_WIDTH,
+    height: DATE_FIELD_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.sm
+  }
+}));
+
+/** Tighter horizontal padding than Select's sheet: seven 44dp columns need the width. */
+export const pickerOverlayStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: theme.space[3]
+  }
+}));
+export const pickerSheetStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
+    padding: theme.space[2],
+    rowGap: theme.space[2],
+    ...theme.elevation.lg
+  }
+}));
+
+/** Houses the two `Button`s (Cancel/Confirm) — colour, touch target and press feedback are entirely
+ *  `Button`'s own already-proven surface (`Button.test.ts`), same "compose, don't reimplement"
+ *  choice `alert-dialog` makes for its identical action row. */
+export const pickerFooterStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    columnGap: theme.space[2]
+  }
+}));
+//# sourceMappingURL=DatePicker.variants.js.map