@astryxdesign/core 0.7.8-canary.b35fe83 → 0.7.8-canary.b87922f

package/dist/DateInput/PickerWheel.d.ts

@@ -12,7 +12,7 @@ import { type WheelProps } from './wheelOptions.js';
  * <PickerWheel label="Month" options={monthOptions} value={month} onChange={setMonth} />
  * ```
  */
-export declare function PickerWheel({ label, options, value, onChange, isActive, }: WheelProps): import("react").JSX.Element;
+export declare function PickerWheel({ label, options, value, onChange, isActive, ref, }: WheelProps): import("react").JSX.Element;
 export declare namespace PickerWheel {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AAmDA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AA2HxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BA8gBZ;yBAphBe,WAAW"}
+{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AA2HxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAuiBZ;yBA9iBe,WAAW"}

package/dist/DateInput/PickerWheel.js

@@ -4,7 +4,8 @@
 
 /**
  * @file PickerWheel.tsx
- * @input Wheel's props (wheelOptions.ts): options, value and change callback
+ * @input Wheel's props (wheelOptions.ts): options, value and change callback;
+ *   optionally a ref for programmatic turns
  * @output PickerWheel: one picker column that moves like UIPickerView
  * @position Internal component; the Wheel under a finger (Wheel.tsx picks it)
  *
@@ -14,7 +15,7 @@
  * SYNC: When modified, update PickerWheel.test.tsx, Wheel.tsx,
  * DateInputTouch.test.tsx, DateInput.doc.mjs and TimeInput.doc.mjs.
  */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { scrollTypeOf } from "../gestures/GestureHost.js";
 import { PanGestureRecognizer } from "../gestures/PanGestureRecognizer.js";
@@ -36,7 +37,7 @@ import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
 import { useWheelListbox } from "./useWheelListbox.js";
 import { createWheelStrip } from "./wheelStrip.js";
 import { dragOffset, nearestIndex, offsetBounds, planRelease, spinCurve } from "./wheelPhysics.js";
-import { endIndex, nearestEnabledIndex, steppedIndex, WHEEL_ROW_HEIGHT } from "./wheelOptions.js";
+import { canSpinTo, endIndex, nearestEnabledIndex, steppedIndex, WHEEL_ROW_HEIGHT } from "./wheelOptions.js";
 
 /** Row pitch, px: the touch column keeps the scrolling column's pitch. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -130,7 +131,8 @@ export function PickerWheel({
   options,
   value,
   onChange,
-  isActive = true
+  isActive = true,
+  ref
 }) {
   const columnRef = useRef(null);
   const rowsRef = useRef(null);
@@ -468,6 +470,28 @@ export function PickerWheel({
     isEnabled: isActive,
     isPointerKept: true
   });
+
+  // A spin turns only onto an enabled row (canSpinTo). So its arrival commits
+  // that row, and nothing turns on past it. It reports the row it was asked
+  // for, as the scrolling column does.
+  const spinTo = useCallback(async index => new Promise(resolve => {
+    if (!canSpinTo(latestRef.current.options, index)) {
+      resolve(false);
+      return;
+    }
+    const offset = motion.offset();
+    move(turnCurve(columnRef.current, offset, index * ROW_HEIGHT), {
+      onEnd: (outcome, end) => {
+        if (outcome === 'arrived') {
+          arrive(end);
+        }
+        resolve(outcome === 'arrived');
+      }
+    });
+  }), [motion, move, arrive]);
+  useImperativeHandle(ref, () => ({
+    spinTo
+  }), [spinTo]);
   const turnToPosition = useCallback((position, offset) => {
     const current = latestRef.current;
     const option = current.options[position];

package/dist/DateInput/Wheel.d.ts

@@ -1,5 +1,5 @@
 import { type WheelProps } from './wheelOptions.js';
-export { nearestEnabledIndex, type WheelOption, type WheelProps, } from './wheelOptions.js';
+export { nearestEnabledIndex, type WheelHandle, type WheelOption, type WheelProps, } from './wheelOptions.js';
 /**
  * One picker column: UIPickerView's motion with flat rows under a finger, the
  * snap-scrolling column under a fine pointer.
@@ -31,7 +31,7 @@ export declare namespace Wheel {
  * />
  * ```
  */
-export declare function ScrollWheel({ label, options, value, onChange, isActive, }: WheelProps): import("react").JSX.Element;
+export declare function ScrollWheel({ label, options, value, onChange, isActive, ref, }: WheelProps): import("react").JSX.Element;
 export declare namespace ScrollWheel {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AAoDA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AAoMxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAKtC;yBALe,KAAK;;;AASrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAmUZ;yBAzUe,WAAW"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AAoMxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAKtC;yBALe,KAAK;;;AASrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAqVZ;yBA5Ve,WAAW"}

package/dist/DateInput/Wheel.js

@@ -4,7 +4,8 @@
 
 /**
  * @file Wheel.tsx
- * @input Option list, selected value and change callback
+ * @input Option list, selected value and change callback; a ref for
+ *   programmatic turns
  * @output Exports Wheel (one picker column), ScrollWheel (the scrolling
  *   column) and the shared types of wheelOptions.ts
  * @position Internal component; consumed by MonthYearWheels.tsx,
@@ -26,7 +27,7 @@
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useImperativeHandle, 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";
@@ -40,7 +41,7 @@ import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
 import { usePointerDragScroll } from "./usePointerDragScroll.js";
 import { useScrollSettle } from "./useScrollSettle.js";
 import { useWheelListbox } from "./useWheelListbox.js";
-import { endIndex, nearestEnabledIndex, steppedIndex } from "./wheelOptions.js";
+import { canSpinTo, endIndex, nearestEnabledIndex, steppedIndex } from "./wheelOptions.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { nearestEnabledIndex } from "./wheelOptions.js";
 const ITEM_BLOCK_SIZE = dateInputTouchSizes.wheelItemSize;
@@ -130,8 +131,23 @@ export function ScrollWheel({
   options,
   value,
   onChange,
-  isActive = true
+  isActive = true,
+  ref
 }) {
+  // A spin commits the row at once. The new value then scrolls the column
+  // there, as any new value does.
+  useImperativeHandle(ref, () => ({
+    spinTo: async index => {
+      if (!canSpinTo(options, index)) {
+        return false;
+      }
+      const option = options[index];
+      if (option.value !== value) {
+        onChange(option.value);
+      }
+      return true;
+    }
+  }), [options, value, onChange]);
   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;

package/dist/DateInput/datePickerTouch.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file datePickerTouch.ts
+ * @input The date and time pickers' touch-only pieces
+ * @output Re-exports what the date and time sheets use only under a finger:
+ *   TimeWheels
+ * @position The pickers' touch layer. The sheets import touch behaviour from
+ *   here only, so a desktop build can replace this one module.
+ *
+ * SYNC: When modified, update TouchTimeField.tsx and TouchDateTimeField.tsx.
+ */
+export { TimeWheels } from '../TimeInput/TimeWheels.js';
+export type { TimeWheelsProps } from '../TimeInput/TimeWheels.js';
+//# sourceMappingURL=datePickerTouch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datePickerTouch.d.ts","sourceRoot":"","sources":["../../src/DateInput/datePickerTouch.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,yBAAyB,CAAC;AACnD,YAAY,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC"}

package/dist/DateInput/datePickerTouch.js

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file datePickerTouch.ts
+ * @input The date and time pickers' touch-only pieces
+ * @output Re-exports what the date and time sheets use only under a finger:
+ *   TimeWheels
+ * @position The pickers' touch layer. The sheets import touch behaviour from
+ *   here only, so a desktop build can replace this one module.
+ *
+ * SYNC: When modified, update TouchTimeField.tsx and TouchDateTimeField.tsx.
+ */
+
+export { TimeWheels } from "../TimeInput/TimeWheels.js";

package/dist/DateInput/wheelOptions.d.ts

@@ -1,8 +1,8 @@
 /**
  * @file wheelOptions.ts
  * @input Nothing; types, the row height and pure functions
- * @output WheelOption, WheelProps, WHEEL_ROW_HEIGHT, nearestEnabledIndex,
- *   steppedIndex and endIndex: what both wheels share
+ * @output WheelOption, WheelProps, WheelHandle, WHEEL_ROW_HEIGHT, canSpinTo,
+ *   nearestEnabledIndex, steppedIndex and endIndex: what both wheels share
  * @position Internal; read by Wheel.tsx (which re-exports all of it) and
  *   PickerWheel.tsx
  *
@@ -10,6 +10,7 @@
  * - /packages/core/src/DateInput/Wheel.tsx
  * - /packages/core/src/DateInput/PickerWheel.tsx
  */
+import type { Ref } from 'react';
 /**
  * The row height, px (`dateInputTouchSizes.wheelItemSize`): the pitch of both
  * columns' rows, and the unit of the touch wheel's offset.
@@ -32,6 +33,18 @@ export interface WheelOption {
      */
     order?: number;
 }
+/** What a Wheel's `ref` exposes. */
+export interface WheelHandle {
+    /**
+     * Turn the wheel onto `index` (an index into `options`) on the tap spin, then
+     * commit it as a rest would. Resolves true once that row is the committed
+     * one, false if a finger or another turn interrupted it or the wheel went
+     * away first. An index outside `options` or a disabled row resolves false at
+     * once, and nothing turns. Under a fine pointer the row commits at once. The
+     * column then scrolls to it as for any new value, on the same rule.
+     */
+    spinTo(index: number): Promise<boolean>;
+}
 export interface WheelProps {
     /** Accessible name for the column, e.g. "Month". */
     label: string;
@@ -48,7 +61,14 @@ export interface WheelProps {
      * motion.
      */
     isActive?: boolean;
+    /** Programmatic turns: `spinTo(index)`. */
+    ref?: Ref<WheelHandle>;
 }
+/**
+ * Whether `spinTo(index)` may turn onto `index`: an enabled row of `options`.
+ * The touch wheel and the scrolling column answer a spin by the same rule.
+ */
+export declare function canSpinTo(options: ReadonlyArray<WheelOption>, index: number): boolean;
 /**
  * The enabled row nearest `index`: `index` itself when it is enabled,
  * otherwise the closest enabled row on either side. A tie goes to the side of

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

@@ -1 +1 @@
-{"version":3,"file":"wheelOptions.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelOptions.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;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;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,GAClB,MAAM,CAsBR;AAaD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GACZ,MAAM,GAAG,IAAI,CAyBf;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CACtB,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,GAAG,EAAE,OAAO,GAAG,MAAM,GACpB,MAAM,GAAG,IAAI,CAKf"}
+{"version":3,"file":"wheelOptions.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelOptions.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACzC;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;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,GACZ,OAAO,CAGT;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,GAClB,MAAM,CAsBR;AAaD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GACZ,MAAM,GAAG,IAAI,CAyBf;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CACtB,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,GAAG,EAAE,OAAO,GAAG,MAAM,GACpB,MAAM,GAAG,IAAI,CAKf"}

package/dist/DateInput/wheelOptions.js

@@ -3,8 +3,8 @@
 /**
  * @file wheelOptions.ts
  * @input Nothing; types, the row height and pure functions
- * @output WheelOption, WheelProps, WHEEL_ROW_HEIGHT, nearestEnabledIndex,
- *   steppedIndex and endIndex: what both wheels share
+ * @output WheelOption, WheelProps, WheelHandle, WHEEL_ROW_HEIGHT, canSpinTo,
+ *   nearestEnabledIndex, steppedIndex and endIndex: what both wheels share
  * @position Internal; read by Wheel.tsx (which re-exports all of it) and
  *   PickerWheel.tsx
  *
@@ -18,6 +18,18 @@
  * columns' rows, and the unit of the touch wheel's offset.
  */
 export const WHEEL_ROW_HEIGHT = 28;
+
+/** What a Wheel's `ref` exposes. */
+
+/**
+ * Whether `spinTo(index)` may turn onto `index`: an enabled row of `options`.
+ * The touch wheel and the scrolling column answer a spin by the same rule.
+ */
+export function canSpinTo(options, index) {
+  const option = options[index];
+  return option != null && !option.isDisabled;
+}
+
 /**
  * The enabled row nearest `index`: `index` itself when it is enabled,
  * otherwise the closest enabled row on either side. A tie goes to the side of

package/dist/DateTimeInput/TouchDateTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AAoV3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAy/BpB;yBAhiCe,kBAAkB"}
+{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AA6S3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAk8BpB;yBAz+Be,kBAAkB"}

package/dist/DateTimeInput/TouchDateTimeField.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TouchDateTimeField.tsx
- * @input Uses React, Field, BottomSheet, SegmentedControl, DateInput month picker primitives, Wheel, StyleX intrinsic flex layout
+ * @input Uses React, Field, BottomSheet, SegmentedControl, DateInput month picker primitives, Wheel and the pickers' touch layer (TimeWheels), the touch presentation, StyleX intrinsic flex layout
  * @output Exports TouchDateTimeField — the coarse-pointer surface behind DateTimeInput
  * @position Internal component; consumed by DateTimeInput.tsx
  *
@@ -46,7 +46,7 @@ import { themeProps } from "../utils/themeProps.js";
 import { normalizeDayOfWeek } from "../utils/dateTypes.js";
 import { formatLocaleTime } from "../utils/timeFormat.js";
 import { getWeekdayHeaders } from "../Calendar/getWeekdayHeaderNames.js";
-import { formatISOTime, isImeKeyEvent, isRenderable, isTimeInRange, clampTime, mergeProps, parseISOTime } from "../utils/index.js";
+import { formatISOTime, isImeKeyEvent, isRenderable, clampTime, mergeProps, parseISOTime } from "../utils/index.js";
 import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { joinAriaIDs } from "../utils/inputAria.js";
 import { DATE_FORMAT_LONG, plainDateFormat, plainDateFromISO, plainDateToday } from "../utils/plainDate.js";
@@ -54,13 +54,16 @@ import { plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
 import { MonthScroller } from "../DateInput/MonthScroller.js";
 import { MonthYearWheels } from "../DateInput/MonthYearWheels.js";
 import { Wheel } from "../DateInput/Wheel.js";
+import { TimeWheels } from "../DateInput/datePickerTouch.js";
+import { hour12From24, hour24From12, hourRowsInHalf, meridiemRows, minuteRows, secondRows, wheelBounds } from "../TimeInput/timeWheelRules.js";
+import { useTouchPresentation } from "../utils/touchPresentation.js";
 import "../DateInput/tokens.stylex.js";
 import { dateInputTouchGeometry, dateInputTouchSizes } from "../DateInput/tokens.stylex.js";
 import { DEFAULT_MONTH_REACH, clampIndex, fromMonthIndex, monthIndexOf } from "../DateInput/monthGeometry.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import { InternationalizationContext } from "../i18n/InternationalizationContext.js";
 import english from "../i18n/generated-english/DateTimeInput/TouchDateTimeField.generated.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 registerEnglishFallback(english);
 function splitDateTime(dt) {
   if (!dt) {
@@ -201,30 +204,6 @@ function normalizeISOTime(time, hasSeconds) {
   const parsed = parseISOTime(time);
   return parsed ? formatISOTime(parsed, hasSeconds) : undefined;
 }
-function timeToSeconds(time) {
-  if (time === undefined) {
-    return null;
-  }
-  const parsed = parseISOTime(time);
-  return parsed == null ? null : parsed.hour * 3600 + parsed.minute * 60 + parsed.second;
-}
-function twoDigits(value) {
-  return String(value).padStart(2, '0');
-}
-function hour12From24(hour) {
-  return hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-}
-function hour24From12(hour, meridiem) {
-  if (meridiem === 0) {
-    return hour === 12 ? 0 : hour;
-  }
-  return hour === 12 ? 12 : hour + 12;
-}
-function rangeOverlaps(startSecond, endSecond, min, max) {
-  const minSecond = timeToSeconds(min);
-  const maxSecond = timeToSeconds(max);
-  return (minSecond == null || endSecond >= minSecond) && (maxSecond == null || startSecond <= maxSecond);
-}
 export function TouchDateTimeField({
   label,
   isLabelHidden = false,
@@ -348,6 +327,9 @@ export function TouchDateTimeField({
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), isSheetOpen ? sheetBodyRef : dateInputRef);
   const [activePanel, setActivePanel] = useState('date');
   const [isWheelOpen, setIsWheelOpen] = useState(false);
+  const {
+    isTouch
+  } = useTouchPresentation();
   const [draftTime, setDraftTime] = useState(() => normalizeISOTime(splitDateTime(value).time, hasSeconds));
   const today = useMemo(() => plainDateToday(), []);
   const selectedDate = useMemo(() => parseValidISODate(valueParts.date), [valueParts.date]);
@@ -519,63 +501,14 @@ export function TouchDateTimeField({
     }, hasSeconds);
   }, [hasSeconds, hourFormat, parsedWheelTime]);
   const timeBounds = timeBoundsForDate(valueParts.date);
-  const hourOptions = useMemo(() => {
-    if (hourFormat === '24h') {
-      return Array.from({
-        length: 24
-      }, (_, hour) => ({
-        value: hour,
-        label: twoDigits(hour),
-        isDisabled: !rangeOverlaps(hour * 3600, hour * 3600 + 3599, timeBounds.min, timeBounds.max)
-      }));
-    }
-    const meridiem = parsedWheelTime.hour < 12 ? 0 : 1;
-    // In 12-hour mode the hour column is interpreted inside the active AM/PM
-    // half, so disabled rows describe reachability within that half only.
-    return Array.from({
-      length: 12
-    }, (_, index) => {
-      const hour = index + 1;
-      const hour24 = hour24From12(hour, meridiem);
-      return {
-        value: hour,
-        label: String(hour),
-        // Keys step in time order: 12 PM comes before 1 PM.
-        order: hour24,
-        isDisabled: !rangeOverlaps(hour24 * 3600, hour24 * 3600 + 3599, timeBounds.min, timeBounds.max)
-      };
-    });
-  }, [hourFormat, parsedWheelTime.hour, timeBounds.min, timeBounds.max]);
-  const minuteOptions = useMemo(() => Array.from({
-    length: 60
-  }, (_, minute) => {
-    const start = parsedWheelTime.hour * 3600 + minute * 60;
-    return {
-      value: minute,
-      label: twoDigits(minute),
-      isDisabled: !rangeOverlaps(start, start + (hasSeconds ? 59 : 0), timeBounds.min, timeBounds.max)
-    };
-  }), [hasSeconds, parsedWheelTime.hour, timeBounds.min, timeBounds.max]);
-  const secondOptions = useMemo(() => Array.from({
-    length: 60
-  }, (_, second) => ({
-    value: second,
-    label: twoDigits(second),
-    isDisabled: !isTimeInRange(formatISOTime({
-      hour: parsedWheelTime.hour,
-      minute: parsedWheelTime.minute,
-      second
-    }, true), timeBounds.min, timeBounds.max)
-  })), [parsedWheelTime.hour, parsedWheelTime.minute, timeBounds.min, timeBounds.max]);
-  const meridiemOptions = useMemo(() => [{
-    value: 0,
-    label: t('@astryx.dateTimeInput.meridiemAM'),
-    isDisabled: !rangeOverlaps(0, 11 * 3600 + 3599, timeBounds.min, timeBounds.max)
-  }, {
-    value: 1,
-    label: t('@astryx.dateTimeInput.meridiemPM'),
-    isDisabled: !rangeOverlaps(12 * 3600, 23 * 3600 + 3599, timeBounds.min, timeBounds.max)
-  }], [t, timeBounds.min, timeBounds.max]);
+  const bounds = useMemo(() => wheelBounds(timeBounds.min, timeBounds.max), [timeBounds.min, timeBounds.max]);
+  const hourOptions = useMemo(() => hourRowsInHalf(parsedWheelTime.hour, hourFormat, bounds), [bounds, hourFormat, parsedWheelTime.hour]);
+  const minuteOptions = useMemo(() => minuteRows(parsedWheelTime.hour, hasSeconds, bounds), [bounds, hasSeconds, parsedWheelTime.hour]);
+  const secondOptions = useMemo(() => secondRows(parsedWheelTime.hour, parsedWheelTime.minute, bounds), [bounds, parsedWheelTime.hour, parsedWheelTime.minute]);
+  const meridiemOptions = useMemo(() => meridiemRows({
+    am: t('@astryx.dateTimeInput.meridiemAM'),
+    pm: t('@astryx.dateTimeInput.meridiemPM')
+  }, bounds), [bounds, t]);
   const handleVisibleMonthChange = useCallback(next => {
     if (activePanel === 'date' && !isWheelOpen) {
       setMonthIndex(next);
@@ -853,45 +786,55 @@ export function TouchDateTimeField({
             className: "x15r89dc x78zum5 xh8yej3 xeuugli xdt5ytf x1txdalj xlshs6z xg01cxk x47corl"
           }
         }[!!(activePanel !== 'time') << 0],
-        children: [/*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 xh8yej3 xeuugli xm8gem x1txdalj"
           },
-          children: [/*#__PURE__*/_jsx(Wheel, {
-            label: t('@astryx.dateTimeInput.hourWheel'),
-            options: hourOptions,
-            value: hourFormat === '24h' ? parsedWheelTime.hour : hour12From24(parsedWheelTime.hour),
-            isActive: activePanel === 'time',
-            onChange: hour => commitWheelTime(hourFormat === '24h' ? composeWheelTime({
-              hour24: hour
-            }) : composeWheelTime({
-              hour12: hour
-            }))
-          }), /*#__PURE__*/_jsx(Wheel, {
-            label: t('@astryx.dateTimeInput.minuteWheel'),
-            options: minuteOptions,
-            value: parsedWheelTime.minute,
+          children: isTouch ? /*#__PURE__*/_jsx(TimeWheels, {
+            time: parsedWheelTime,
+            hourFormat: hourFormat,
+            hasSeconds: hasSeconds,
+            min: timeBounds.min,
+            max: timeBounds.max,
             isActive: activePanel === 'time',
-            onChange: minute => commitWheelTime(composeWheelTime({
-              minute
-            }))
-          }), hasSeconds && /*#__PURE__*/_jsx(Wheel, {
-            label: t('@astryx.dateTimeInput.secondWheel'),
-            options: secondOptions,
-            value: parsedWheelTime.second,
-            isActive: activePanel === 'time',
-            onChange: second => commitWheelTime(composeWheelTime({
-              second
-            }))
-          }), hourFormat === '12h' && /*#__PURE__*/_jsx(Wheel, {
-            label: t('@astryx.dateTimeInput.meridiemWheel'),
-            options: meridiemOptions,
-            value: parsedWheelTime.hour < 12 ? 0 : 1,
-            isActive: activePanel === 'time',
-            onChange: meridiem => commitWheelTime(composeWheelTime({
-              meridiem
-            }))
-          })]
+            onCommit: time => commitWheelTime(formatISOTime(time, hasSeconds))
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Wheel, {
+              label: t('@astryx.dateTimeInput.hourWheel'),
+              options: hourOptions,
+              value: hourFormat === '24h' ? parsedWheelTime.hour : hour12From24(parsedWheelTime.hour),
+              isActive: activePanel === 'time',
+              onChange: hour => commitWheelTime(hourFormat === '24h' ? composeWheelTime({
+                hour24: hour
+              }) : composeWheelTime({
+                hour12: hour
+              }))
+            }), /*#__PURE__*/_jsx(Wheel, {
+              label: t('@astryx.dateTimeInput.minuteWheel'),
+              options: minuteOptions,
+              value: parsedWheelTime.minute,
+              isActive: activePanel === 'time',
+              onChange: minute => commitWheelTime(composeWheelTime({
+                minute
+              }))
+            }), hasSeconds && /*#__PURE__*/_jsx(Wheel, {
+              label: t('@astryx.dateTimeInput.secondWheel'),
+              options: secondOptions,
+              value: parsedWheelTime.second,
+              isActive: activePanel === 'time',
+              onChange: second => commitWheelTime(composeWheelTime({
+                second
+              }))
+            }), hourFormat === '12h' && /*#__PURE__*/_jsx(Wheel, {
+              label: t('@astryx.dateTimeInput.meridiemWheel'),
+              options: meridiemOptions,
+              value: parsedWheelTime.hour < 12 ? 0 : 1,
+              isActive: activePanel === 'time',
+              onChange: meridiem => commitWheelTime(composeWheelTime({
+                meridiem
+              }))
+            })]
+          })
         }), /*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 xr1yuqi xfsso4q"

package/dist/TimeInput/TimeWheels.d.ts

@@ -0,0 +1,32 @@
+import type { ISOTimeString } from '../utils/timeParser.js';
+import { type TimeParts } from './timeWheelRules.js';
+export interface TimeWheelsProps {
+    /** The time the wheels show. */
+    time: TimeParts;
+    /** 12-hour (with an AM/PM column) or 24-hour time. */
+    hourFormat: '12h' | '24h';
+    /** Whether a seconds column shows. */
+    hasSeconds: boolean;
+    /** Earliest time that may commit. */
+    min?: ISOTimeString;
+    /** Latest time that may commit. */
+    max?: ISOTimeString;
+    /** False while the wheels are hidden. */
+    isActive: boolean;
+    /** Called with the committed time, already inside the bounds. */
+    onCommit: (time: TimeParts) => void;
+}
+/**
+ * UIDatePicker's time wheels.
+ *
+ * @example
+ * ```
+ * <TimeWheels time={{hour: 11, minute: 58, second: 0}} hourFormat="12h"
+ *   hasSeconds={false} isActive onCommit={setTime} />
+ * ```
+ */
+export declare function TimeWheels({ time, hourFormat, hasSeconds, min, max, isActive, onCommit, }: TimeWheelsProps): import("react").JSX.Element;
+export declare namespace TimeWheels {
+    var displayName: string;
+}
+//# sourceMappingURL=TimeWheels.d.ts.map

package/dist/TimeInput/TimeWheels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeWheels.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeWheels.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAaL,KAAK,SAAS,EAEf,MAAM,kBAAkB,CAAC;AAS1B,MAAM,WAAW,eAAe;IAC9B,gCAAgC;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,sDAAsD;IACtD,UAAU,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,sCAAsC;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,mCAAmC;IACnC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC;AAMD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,+BAoIjB;yBA5Ie,UAAU"}