@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/DateInput/Wheel.tsx

@@ -0,0 +1,473 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Wheel.tsx
+ * @input Option list, selected value, change callback
+ * @output Exports Wheel — a snap-scrolling picker column
+ * @position Internal component; consumed by MonthYearWheels.tsx
+ *
+ * A wheel is a scroll container, not a custom gesture surface. Momentum,
+ * rubber-banding, and the settle animation are the platform's; all this adds
+ * is `scroll-snap-align: center` on each option, half a viewport of padding at
+ * each end so the first and last option can reach the middle, and a commit
+ * when the scrolling stops.
+ *
+ * The falloff (rows fading and tipping away from the centre) is a CSS
+ * scroll-driven animation on a `view()` timeline — the browser interpolates it
+ * against each row's own position in the scrollport, so it stays glued to the
+ * finger with no JS in the frame loop. It is guarded by `@supports`, because a
+ * browser that does not understand `animation-timeline` would otherwise run
+ * the same keyframes on the document timeline and simply play them once.
+ *
+ * Accessibility: this is a listbox, not a novel widget. It is one tab stop
+ * with arrow/Home/End/PageUp/PageDown keys, `aria-activedescendant` tracking
+ * the active row, and every row reachable by tap — none of which depends on
+ * the scroll-driven decoration.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/DateInput/TouchDateField.tsx
+ * - /packages/core/src/DateInput/DateInput.doc.mjs
+ * - /packages/core/src/DateInput/DateInputTouch.test.tsx
+ */
+
+import {useCallback, useEffect, useId, useRef, useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {
+  colorVars,
+  radiusVars,
+  fontWeightVars,
+  typeScaleVars,
+  spacingVars,
+  durationVars,
+} from '../theme/tokens.stylex';
+import {focusOutlineStyles} from '../utils';
+import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
+import {useOwnScrollGesture} from './useOwnScrollGesture';
+import {usePointerDragScroll} from './usePointerDragScroll';
+import {useScrollSettle} from './useScrollSettle';
+
+const ITEM_BLOCK_SIZE = dateInputTouchSizes.wheelItemSize;
+
+/**
+ * Rows tip away from the centre of the wheel. 0% is a row just entering at the
+ * bottom of the scrollport, 50% is a row centred in it, 100% is a row leaving
+ * at the top — which is what a `view()` timeline over the `cover` range means,
+ * and why this reads as a cylinder rotating under the finger.
+ */
+const falloff = stylex.keyframes({
+  '0%': {
+    opacity: 0.3,
+    transform: 'rotateX(52deg) scale(0.86)',
+  },
+  '50%': {
+    opacity: 1,
+    transform: 'rotateX(0deg) scale(1)',
+  },
+  '100%': {
+    opacity: 0.3,
+    transform: 'rotateX(-52deg) scale(0.86)',
+  },
+});
+
+/** Motion-free equivalent: the depth cue survives as opacity alone. */
+const fadeOnly = stylex.keyframes({
+  '0%': {opacity: 0.3},
+  '50%': {opacity: 1},
+  '100%': {opacity: 0.3},
+});
+
+const styles = stylex.create({
+  column: {
+    position: 'relative',
+    flex: '1 1 0',
+    minWidth: 0,
+  },
+  scroller: {
+    blockSize: dateInputTouchGeometry.paneBlockSize,
+    // Load-bearing, and stated rather than inherited from the reset (whose
+    // rule is zero-specificity `:where`): with content-box the end padding
+    // below would be added to the scrollport instead of sitting inside it,
+    // and every snap position would be wrong.
+    boxSizing: 'border-box',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    // Snap every row to the middle of the scrollport, where the selection band
+    // sits. `mandatory` (not `proximity`) because a wheel has no valid resting
+    // position between two options.
+    scrollSnapType: 'y mandatory',
+    overscrollBehavior: 'contain',
+    // Room for row 0 and row n-1 to reach the centre.
+    paddingBlock: dateInputTouchGeometry.wheelEdgePadding,
+    // Gives the rotateX falloff somewhere to recede to.
+    perspective: '520px',
+    transformStyle: 'preserve-3d',
+    scrollbarWidth: 'none',
+    outline: 'none',
+    touchAction: 'pan-y',
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    blockSize: ITEM_BLOCK_SIZE,
+    paddingInline: spacingVars['--spacing-2'],
+    scrollSnapAlign: 'center',
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    // Larger than body text, and larger than the calendar's day numbers: on
+    // a wheel the value under the band is the whole interface, and the rows
+    // above and below are read at a glance while moving.
+    fontSize: typeScaleVars['--text-large-size'],
+    fontWeight: fontWeightVars['--font-weight-normal'],
+    color: colorVars['--color-text-primary'],
+    whiteSpace: 'nowrap',
+    // NO `overflow: hidden` here. It would make the row itself a scroll
+    // container, and `view()` binds to the subject's nearest ancestor scroll
+    // container — the falloff would measure the row against itself and sit
+    // frozen at 50% forever. Clipping belongs on the inner element.
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+    userSelect: 'none',
+    transitionProperty: 'color, font-weight',
+    transitionDuration: durationVars['--duration-fast'],
+  },
+  /**
+   * The falloff rides an inner element, never the row itself.
+   *
+   * A snap area is the element's TRANSFORMED border box, so animating the row
+   * would move the very positions the scroller is snapping to — the wheel
+   * settles a few pixels off, and the offset feeds back into the animation.
+   * Transforming a child leaves the row's box, and every snap offset, exact.
+   */
+  itemInner: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    inlineSize: '100%',
+    blockSize: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    // The wheel look. Held behind @supports so browsers without scroll-driven
+    // animations get a plain, fully legible list instead of these keyframes
+    // playing themselves out once on the document timeline. Under reduced
+    // motion the same timeline drives opacity only — the depth cue survives,
+    // the tipping does not.
+    animationName: {
+      default: null,
+      '@supports (animation-timeline: view())': {
+        default: falloff,
+        '@media (prefers-reduced-motion: reduce)': fadeOnly,
+      },
+    },
+    animationTimeline: 'view(y)',
+    animationRange: 'cover 0% cover 100%',
+    animationFillMode: 'both',
+    animationDuration: 'auto',
+    animationTimingFunction: 'linear',
+    backfaceVisibility: 'hidden',
+  },
+  itemActive: {
+    color: colorVars['--color-text-accent'],
+    fontWeight: fontWeightVars['--font-weight-semibold'],
+  },
+  itemDisabled: {
+    color: colorVars['--color-text-disabled'],
+    cursor: 'default',
+  },
+  /**
+   * The selection band: a single centred row-height plate behind the options.
+   * Purely decorative — the committed value is announced by `aria-selected`.
+   */
+  band: {
+    position: 'absolute',
+    insetInline: 0,
+    insetBlockStart: `calc(50% - (${ITEM_BLOCK_SIZE} / 2))`,
+    blockSize: ITEM_BLOCK_SIZE,
+    borderRadius: radiusVars['--radius-element'],
+    // `--color-neutral`, not `--color-background-muted`. Muted is 4.7% alpha,
+    // which puts the whole plate 17 units of colour away from the sheet
+    // behind it — so when the wheels fade in, the band's animation has 17
+    // units to happen in while the text beside it travels 412. It did not
+    // read as fading, it read as appearing. Neutral is 10%, which doubles the
+    // range to 36 and is still quiet enough to sit under text.
+    backgroundColor: colorVars['--color-neutral'],
+    pointerEvents: 'none',
+  },
+});
+
+export interface WheelOption {
+  /** Stable numeric identity of the row (a month 1-12, or a year). */
+  value: number;
+  /** Row text. */
+  label: string;
+  /** Rows outside min/max stay visible but cannot be committed. */
+  isDisabled?: boolean;
+}
+
+export interface WheelProps {
+  /** Accessible name for the column, e.g. "Month". */
+  label: string;
+  /** Rows, top to bottom. */
+  options: ReadonlyArray<WheelOption>;
+  /** Committed value; must match one option's `value`. */
+  value: number;
+  /** Fired when the wheel comes to rest on a different, enabled row. */
+  onChange: (value: number) => void;
+  /**
+   * False while the wheel is hidden — scroll offsets of a display:none
+   * scroller are meaningless, so listeners and the initial scroll wait.
+   */
+  isActive?: boolean;
+}
+
+/**
+ * One snap-scrolling picker column.
+ *
+ * @example
+ * ```
+ * <Wheel
+ *   label="Month"
+ *   options={monthOptions}
+ *   value={month}
+ *   onChange={setMonth}
+ * />
+ * ```
+ */
+export function Wheel({
+  label,
+  options,
+  value,
+  onChange,
+  isActive = true,
+}: WheelProps) {
+  const id = useId();
+  const scrollerRef = useRef<HTMLDivElement | null>(null);
+  const selectedIndex = Math.max(
+    0,
+    options.findIndex(option => option.value === value),
+  );
+  // Which row is under the band right now. Tracks the finger during a scroll;
+  // `selectedIndex` only catches up when the wheel settles.
+  const [activeIndex, setActiveIndex] = useState(selectedIndex);
+
+  // Row height in px, read from layout rather than assumed, so a theme that
+  // retunes --date-input-touch-wheel-item-size still lands on the right row.
+  const itemBlockSize = useCallback((): number => {
+    const first = scrollerRef.current?.firstElementChild;
+    return first instanceof HTMLElement && first.offsetHeight > 0
+      ? first.offsetHeight
+      : 0;
+  }, []);
+
+  const scrollToIndex = useCallback(
+    (index: number, behavior: ScrollBehavior) => {
+      const scroller = scrollerRef.current;
+      const size = itemBlockSize();
+      if (scroller == null || size === 0) {
+        return;
+      }
+      scroller.scrollTo({top: index * size, behavior});
+    },
+    [itemBlockSize],
+  );
+
+  // Commit on rest. A disabled row is bounced back to the committed one
+  // rather than silently keeping a value the wheel is not showing.
+  //
+  // Declared here, above the park effect, because that effect consults the
+  // `isAtRestRef` this returns before it repositions anything.
+  const {isAtRestRef} = useScrollSettle(
+    scrollerRef,
+    scroller => {
+      const size = itemBlockSize();
+      if (size === 0) {
+        return;
+      }
+      const index = Math.min(
+        options.length - 1,
+        Math.max(0, Math.round(scroller.scrollTop / size)),
+      );
+      const option = options[index];
+      if (option == null || option.isDisabled) {
+        scrollToIndex(selectedIndex, 'smooth');
+        return;
+      }
+      if (option.value !== value) {
+        onChange(option.value);
+      }
+    },
+    isActive,
+  );
+
+  // Park the committed row under the band whenever the wheel is shown, or the
+  // value is changed from outside (the calendar scrolled to another month).
+  //
+  // NEVER while the wheel is still moving. A scroller that is mid-gesture or
+  // still carrying momentum is the user's, and repositioning it does not stop
+  // the momentum — on iOS it feeds a cycle where the scroll this causes reads
+  // as a new settle, commits the next row along, and parks again. See
+  // useScrollSettle. The settle handler re-checks the position afterwards, so
+  // a correction that is genuinely needed still happens, just at rest.
+  useEffect(() => {
+    if (!isActive || !isAtRestRef.current) {
+      return;
+    }
+    const size = itemBlockSize();
+    const scroller = scrollerRef.current;
+    if (scroller == null || size === 0) {
+      return;
+    }
+    if (Math.round(scroller.scrollTop / size) !== selectedIndex) {
+      scroller.scrollTo({top: selectedIndex * size, behavior: 'auto'});
+    }
+    // eslint-disable-next-line @eslint-react/set-state-in-effect -- the highlight follows a scroll position, which only exists after layout
+    setActiveIndex(selectedIndex);
+  }, [isActive, selectedIndex, itemBlockSize, isAtRestRef]);
+
+  // Highlight follows the finger. rAF-throttled: a scroll can fire far more
+  // often than the display refreshes, and this only feeds a repaint.
+  const frameRef = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (scroller == null || !isActive) {
+      return;
+    }
+    const onScroll = () => {
+      if (frameRef.current != null) {
+        return;
+      }
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = undefined;
+        const size = itemBlockSize();
+        if (size === 0) {
+          return;
+        }
+        const index = Math.min(
+          options.length - 1,
+          Math.max(0, Math.round(scroller.scrollTop / size)),
+        );
+        setActiveIndex(index);
+      });
+    };
+    scroller.addEventListener('scroll', onScroll, {passive: true});
+    return () => {
+      scroller.removeEventListener('scroll', onScroll);
+      if (frameRef.current != null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = undefined;
+      }
+    };
+  }, [isActive, options.length, itemBlockSize]);
+
+  // Keep the finger. Inside a BottomSheet the sheet would otherwise read a
+  // downward drag here as swipe-to-dismiss; see useOwnScrollGesture. Gated on
+  // isActive because the hidden panel keeps its layout box.
+  // 'all': a wheel scrolls vertically, the same axis the sheet wants, so
+  // there is no way to share — it takes every touch that lands on it.
+  useOwnScrollGesture(scrollerRef, 'all', {isEnabled: isActive});
+
+  // A mouse cannot drag a scroll container, so without this the wheel ignores
+  // the one gesture its shape invites. Touch is untouched — it pans natively,
+  // with momentum this could not match. See usePointerDragScroll.
+  usePointerDragScroll(scrollerRef, isActive);
+
+  const moveBy = useCallback(
+    (delta: number) => {
+      const next = Math.min(
+        options.length - 1,
+        Math.max(0, activeIndex + delta),
+      );
+      const option = options[next];
+      if (option == null || option.isDisabled) {
+        return;
+      }
+      setActiveIndex(next);
+      scrollToIndex(next, 'smooth');
+      if (option.value !== value) {
+        onChange(option.value);
+      }
+    },
+    [activeIndex, options, scrollToIndex, value, onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          moveBy(1);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          moveBy(-1);
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          moveBy(10);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          moveBy(-10);
+          break;
+        case 'Home':
+          event.preventDefault();
+          moveBy(-activeIndex);
+          break;
+        case 'End':
+          event.preventDefault();
+          moveBy(options.length - 1 - activeIndex);
+          break;
+        default:
+          break;
+      }
+    },
+    [moveBy, activeIndex, options.length],
+  );
+
+  return (
+    <div {...stylex.props(styles.column)}>
+      <div aria-hidden="true" {...stylex.props(styles.band)} />
+      <div
+        ref={scrollerRef}
+        role="listbox"
+        aria-label={label}
+        aria-activedescendant={`${id}-${options[activeIndex]?.value}`}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        {...stylex.props(styles.scroller, focusOutlineStyles.focusVisible)}>
+        {options.map((option, index) => (
+          <div
+            key={option.value}
+            id={`${id}-${option.value}`}
+            role="option"
+            aria-selected={option.value === value}
+            aria-disabled={option.isDisabled || undefined}
+            onClick={() => {
+              if (option.isDisabled) {
+                return;
+              }
+              setActiveIndex(index);
+              scrollToIndex(index, 'smooth');
+              if (option.value !== value) {
+                onChange(option.value);
+              }
+            }}
+            {...stylex.props(
+              styles.item,
+              index === activeIndex && styles.itemActive,
+              option.isDisabled && styles.itemDisabled,
+            )}>
+            <span {...stylex.props(styles.itemInner)}>{option.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+Wheel.displayName = 'Wheel';

package/src/DateInput/monthGeometry.ts

@@ -0,0 +1,118 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file monthGeometry.ts
+ * @input PlainDate values, scroll offsets, pane heights
+ * @output Pure month-index arithmetic and the virtualized pane window
+ * @position Internal helper; consumed by MonthScroller.tsx and DateInput.tsx
+ *
+ * A "month index" is a single integer that totally orders calendar months:
+ * `year * 12 + (month - 1)`. The scroller is a list of equal-width panes, so
+ * one integer converts freely between a month, a row in that list, and a
+ * scroll offset — which is the whole trick behind continuous scrolling.
+ *
+ * These are pure functions on purpose: the scroll math is the part most likely
+ * to be wrong, and it is testable without a layout engine.
+ *
+ * SYNC: When modified, update DateInputTouch.test.tsx.
+ */
+
+import type {PlainDate} from '../utils';
+
+/** How many months are reachable in either direction when unbounded. */
+export const DEFAULT_MONTH_REACH = 600;
+
+/** `year * 12 + (month - 1)`, for a 1-based month. */
+export function toMonthIndex(year: number, month: number): number {
+  return year * 12 + (month - 1);
+}
+
+/** The month index of a PlainDate. */
+export function monthIndexOf(date: PlainDate): number {
+  return toMonthIndex(date.year, date.month);
+}
+
+/** Inverse of {@link toMonthIndex}; month comes back 1-based. */
+export function fromMonthIndex(index: number): {year: number; month: number} {
+  return {
+    year: Math.floor(index / 12),
+    month: (((index % 12) + 12) % 12) + 1,
+  };
+}
+
+/** `value` limited to `[min, max]`. */
+export function clampIndex(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * The month a scrollport is resting on (or nearest to, mid-scroll).
+ *
+ * Returns a row offset from the start of the list, not a month index — add
+ * `minMonthIndex` for that.
+ *
+ * `scrollOffset` is `scrollLeft` for the horizontal scroller. Under RTL that
+ * is NEGATIVE — the spec has the inline start at 0 and scrolling run down
+ * from there — so the sign is normalized away here rather than at each call
+ * site, where forgetting it would silently pin the calendar to month zero.
+ */
+export function rowAtScrollOffset(
+  scrollOffset: number,
+  paneSize: number,
+  rowCount: number,
+  isRTL: boolean = false,
+): number {
+  if (paneSize <= 0) {
+    return 0;
+  }
+  const distance = isRTL ? -scrollOffset : scrollOffset;
+  return clampIndex(Math.round(distance / paneSize), 0, rowCount - 1);
+}
+
+/**
+ * The scroll offset that brings `row` to rest, ready for `scrollTo`. The
+ * inverse of {@link rowAtScrollOffset}, including its RTL sign.
+ */
+export function scrollOffsetForRow(
+  row: number,
+  paneSize: number,
+  isRTL: boolean = false,
+): number {
+  const distance = row * paneSize;
+  return isRTL ? -distance : distance;
+}
+
+export interface PaneWindow {
+  /** First rendered row, inclusive. */
+  start: number;
+  /** Last rendered row, inclusive. */
+  end: number;
+}
+
+/**
+ * The slice of rows to actually mount around `centerRow`.
+ *
+ * Only a handful of panes exist in the DOM at a time; the rest of the list is
+ * a spacer. `overscan` is how many extra panes ride along on each side so a
+ * fast fling never lands on an unmounted one — which under `scroll-snap-type:
+ * mandatory` would be visible as a jump.
+ */
+export function paneWindow(
+  centerRow: number,
+  rowCount: number,
+  overscan: number,
+): PaneWindow {
+  return {
+    start: Math.max(0, centerRow - overscan),
+    end: Math.min(rowCount - 1, centerRow + overscan),
+  };
+}
+
+/** `[start, end]` inclusive, as an array of rows. */
+export function rowsIn({start, end}: PaneWindow): number[] {
+  const rows: number[] = [];
+  for (let row = start; row <= end; row++) {
+    rows.push(row);
+  }
+  return rows;
+}

package/src/DateInput/tokens.stylex.ts

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tokens.stylex.ts
+ * @input StyleX variable and constant definitions
+ * @output Exports DateInput layout constants and derived geometry
+ * @position Lab component tokens consumed by DateInput.tsx, MonthScroller.tsx, Wheel.tsx, MonthYearWheels.tsx
+ *
+ * The picker's whole geometry derives from two numbers, which is what makes
+ * the fixed height and the scroll snapping exact:
+ *
+ *   pane height = weeks x day size            (one month, always 6 rows)
+ *   body height = pane height                 (calendar body AND wheel body)
+ *   wheel pad   = (body height - item) / 2    (so row 0 can rest centered)
+ *
+ * Every month pane is the same height as the scrollport, so `scroll-snap-align:
+ * start` produces a paged scroller with no partial rest positions, and the
+ * wheel overlay swaps in without the component changing size.
+ *
+ * The derived values are `defineConsts`, not plain exported strings: StyleX
+ * inlines a constant at build time only through `defineVars`/`defineConsts`
+ * from a `.stylex.ts` file. A plain `export const` fails the build with
+ * "a style value can only contain an array, string or number".
+ *
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Week rows per month pane. Fixed at 6 — the most any month needs — so every
+ * pane is identical in height and no snap offset ever shifts. Not a themeable
+ * variable: it is a fact about the Gregorian calendar, and `repeat()` cannot
+ * take a custom property as its count.
+ */
+export const WEEKS_PER_PANE = 6;
+
+/**
+ * The picker's two size inputs.
+ *
+ * `defineConsts`, not `defineVars`: these are inlined at build time and emit
+ * no CSS custom property, so they are internal geometry rather than public
+ * theming API. That is deliberate for both of them.
+ *
+ * The day size is an accessibility floor — 44px is the comfortable minimum
+ * tap target on iOS and Android, and every other target in the sheet is held
+ * to it. Exposing it as a variable would let a theme quietly lower the floor,
+ * which is not a knob a design system should hand out.
+ *
+ * The wheel row height is only meaningful against the day size (see below),
+ * so tuning one without the other produces a picker whose panes no longer
+ * agree — a variable that is only safe to change in lockstep with another is
+ * not really a variable.
+ *
+ * If a real need to theme either appears, promoting a const to a var is an
+ * additive change; removing a var that consumers have started setting is not.
+ */
+export const dateInputTouchSizes = stylex.defineConsts({
+  /**
+   * Height of one day row, and the minimum touch target of a day. 44px is the
+   * comfortable minimum tap target on both iOS and Android.
+   */
+  daySize: '44px',
+  /**
+   * Height of one wheel option row, and so the spacing between options and
+   * the height of the selection band.
+   *
+   * 28px against a day's 44px: a wheel row is scroll-first — a value is
+   * chosen by bringing it under the band, and tapping one is a shortcut
+   * rather than the mechanism — so it does not carry a day cell's tap-target
+   * duty, and a mis-tap costs nothing, because the neighbouring rows are the
+   * same control and the result is visible immediately.
+   *
+   * The row is deliberately close to the text it holds (17px), the way a
+   * platform picker packs them: the list should read as one continuous
+   * column of values, not as a stack of buttons with air between them. At
+   * this height ~9 options are on screen.
+   */
+  wheelItemSize: '28px',
+});
+
+// Local aliases for the derived values below. StyleX resolves a `defineConsts`
+// member through an import, so consumers read `dateInputTouchSizes.*` directly
+// rather than a re-exported plain const, which its static analysis cannot
+// follow across files.
+const DAY_SIZE = dateInputTouchSizes.daySize;
+const WHEEL_ITEM_SIZE = dateInputTouchSizes.wheelItemSize;
+
+/** Geometry derived from the sizes above, shared across the component. */
+export const dateInputTouchGeometry = stylex.defineConsts({
+  /** One month pane — and therefore the scrollport, and the wheel body. */
+  paneBlockSize: `calc(${WEEKS_PER_PANE} * ${DAY_SIZE})`,
+  /** The six equal week rows inside a pane. */
+  paneRows: `repeat(${WEEKS_PER_PANE}, 1fr)`,
+  /**
+   * Padding above the first and below the last wheel option, so either end
+   * can come to rest under the centered selection band.
+   */
+  wheelEdgePadding: `calc((${WEEKS_PER_PANE} * ${DAY_SIZE} - ${WHEEL_ITEM_SIZE}) / 2)`,
+});