@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/dist/DateInput/Wheel.d.ts

@@ -0,0 +1,41 @@
+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 declare function Wheel({ label, options, value, onChange, isActive, }: WheelProps): import("react").JSX.Element;
+export declare namespace Wheel {
+    var displayName: string;
+}
+//# sourceMappingURL=Wheel.d.ts.map

package/dist/DateInput/Wheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA0MA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAgOZ;yBAtOe,KAAK"}

package/dist/DateInput/Wheel.js

@@ -0,0 +1,315 @@
+// 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 "../theme/tokens.stylex.js";
+import { colorVars, radiusVars, fontWeightVars, typeScaleVars, spacingVars, durationVars } from "../theme/tokens.stylex.js";
+import { focusOutlineStyles } from "../utils/index.js";
+import "./tokens.stylex.js";
+import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
+import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
+import { usePointerDragScroll } from "./usePointerDragScroll.js";
+import { useScrollSettle } from "./useScrollSettle.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = "x1tut0r7-B";
+
+/** Motion-free equivalent: the depth cue survives as opacity alone. */
+const fadeOnly = "xuvekqa-B";
+const styles = {
+  scroller: {
+    kZKoxP: "xm8gem",
+    kB7OPa: "x9f619",
+    kORKVm: "x1odjw0f",
+    kXHlph: "x6ikm8r",
+    kc424l: "x168l2et",
+    kZeWKH: "xish69e",
+    k8WAf4: "x1uameg1",
+    kwFjlL: "x201tam",
+    kmaZ5I: "x1oyok0e",
+    k5wCbM: "x1rohswg",
+    kI3sdo: "x1a2a7pz",
+    kFalU9: "xx69xxh",
+    $$css: true
+  }
+};
+/**
+ * One snap-scrolling picker column.
+ *
+ * @example
+ * ```
+ * <Wheel
+ *   label="Month"
+ *   options={monthOptions}
+ *   value={month}
+ *   onChange={setMonth}
+ * />
+ * ```
+ */
+export function Wheel({
+  label,
+  options,
+  value,
+  onChange,
+  isActive = true
+}) {
+  const id = useId();
+  const scrollerRef = useRef(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(() => {
+    const first = scrollerRef.current?.firstElementChild;
+    return first instanceof HTMLElement && first.offsetHeight > 0 ? first.offsetHeight : 0;
+  }, []);
+  const scrollToIndex = useCallback((index, behavior) => {
+    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(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 => {
+    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 => {
+    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 /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "x1n2onr6 x1cqoux5 xeuugli"
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      "aria-hidden": "true",
+      ...{
+        className: "x10l6tqk x17y0mx6 x7rbydg x6hpsvf xh6dtrn x17x4s8c x47corl"
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      ref: scrollerRef,
+      role: "listbox",
+      "aria-label": label,
+      "aria-activedescendant": `${id}-${options[activeIndex]?.value}`,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      ...stylex.props(styles.scroller, focusOutlineStyles.focusVisible),
+      children: options.map((option, index) => /*#__PURE__*/_jsx("div", {
+        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);
+          }
+        },
+        ...{
+          0: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla x1tgivj0 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6"
+          },
+          2: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6 xjse4m1 x2mo6ok"
+          },
+          1: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla xuxw1ft x87ps6o x1jbe559 xuedmi6 xnbbluu xt0e3qv"
+          },
+          3: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x87ps6o x1jbe559 xuedmi6 x2mo6ok xnbbluu xt0e3qv"
+          }
+        }[!!(index === activeIndex) << 1 | !!option.isDisabled << 0],
+        children: /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr xlyipyv x1iu2jvn xk3h8ob x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xlp1x4z"
+          },
+          children: option.label
+        })
+      }, option.value))
+    })]
+  });
+}
+Wheel.displayName = 'Wheel';

package/dist/DateInput/monthGeometry.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @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 declare const DEFAULT_MONTH_REACH = 600;
+/** `year * 12 + (month - 1)`, for a 1-based month. */
+export declare function toMonthIndex(year: number, month: number): number;
+/** The month index of a PlainDate. */
+export declare function monthIndexOf(date: PlainDate): number;
+/** Inverse of {@link toMonthIndex}; month comes back 1-based. */
+export declare function fromMonthIndex(index: number): {
+    year: number;
+    month: number;
+};
+/** `value` limited to `[min, max]`. */
+export declare function clampIndex(value: number, min: number, max: number): number;
+/**
+ * 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 declare function rowAtScrollOffset(scrollOffset: number, paneSize: number, rowCount: number, isRTL?: boolean): number;
+/**
+ * The scroll offset that brings `row` to rest, ready for `scrollTo`. The
+ * inverse of {@link rowAtScrollOffset}, including its RTL sign.
+ */
+export declare function scrollOffsetForRow(row: number, paneSize: number, isRTL?: boolean): number;
+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 declare function paneWindow(centerRow: number, rowCount: number, overscan: number): PaneWindow;
+/** `[start, end]` inclusive, as an array of rows. */
+export declare function rowsIn({ start, end }: PaneWindow): number[];
+//# sourceMappingURL=monthGeometry.d.ts.map

package/dist/DateInput/monthGeometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"monthGeometry.d.ts","sourceRoot":"","sources":["../../src/DateInput/monthGeometry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAExC,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,sDAAsD;AACtD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED,sCAAsC;AACtC,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEpD;AAED,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAK3E;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,OAAe,GACrB,MAAM,CAMR;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,OAAe,GACrB,MAAM,CAGR;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,UAAU,CAKZ;AAED,qDAAqD;AACrD,wBAAgB,MAAM,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAE,UAAU,GAAG,MAAM,EAAE,CAMzD"}

package/dist/DateInput/monthGeometry.js

@@ -0,0 +1,98 @@
+// 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.
+ */
+
+/** 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, month) {
+  return year * 12 + (month - 1);
+}
+
+/** The month index of a PlainDate. */
+export function monthIndexOf(date) {
+  return toMonthIndex(date.year, date.month);
+}
+
+/** Inverse of {@link toMonthIndex}; month comes back 1-based. */
+export function fromMonthIndex(index) {
+  return {
+    year: Math.floor(index / 12),
+    month: (index % 12 + 12) % 12 + 1
+  };
+}
+
+/** `value` limited to `[min, max]`. */
+export function clampIndex(value, min, max) {
+  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, paneSize, rowCount, isRTL = false) {
+  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, paneSize, isRTL = false) {
+  const distance = row * paneSize;
+  return isRTL ? -distance : distance;
+}
+/**
+ * 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, rowCount, overscan) {
+  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
+}) {
+  const rows = [];
+  for (let row = start; row <= end; row++) {
+    rows.push(row);
+  }
+  return rows;
+}

package/dist/DateInput/tokens.stylex.d.ts

@@ -0,0 +1,63 @@
+/**
+ * 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 declare 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 declare const dateInputTouchSizes: {
+    /**
+     * 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: string;
+    /**
+     * 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: string;
+};
+/** Geometry derived from the sizes above, shared across the component. */
+export declare const dateInputTouchGeometry: {
+    /** One month pane — and therefore the scrollport, and the wheel body. */
+    paneBlockSize: string;
+    /** The six equal week rows inside a pane. */
+    paneRows: string;
+    /**
+     * Padding above the first and below the last wheel option, so either end
+     * can come to rest under the centered selection band.
+     */
+    wheelEdgePadding: string;
+};
+//# sourceMappingURL=tokens.stylex.d.ts.map

package/dist/DateInput/tokens.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/DateInput/tokens.stylex.ts"],"names":[],"mappings":"AA4BA;;;;;GAKG;AACH,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,mBAAmB;IAC9B;;;OAGG;;IAEH;;;;;;;;;;;;;;OAcG;;CAEH,CAAC;AASH,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB;IACjC,yEAAyE;;IAEzE,6CAA6C;;IAE7C;;;OAGG;;CAEH,CAAC"}

package/dist/DateInput/tokens.stylex.js

@@ -0,0 +1,74 @@
+// 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 = {
+  daySize: "44px",
+  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 = {
+  paneBlockSize: "calc(6 * 44px)",
+  paneRows: "repeat(6, 1fr)",
+  wheelEdgePadding: "calc((6 * 44px - 28px) / 2)"
+};