@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateTimeInput',
   displayName: 'Date Time Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'datetimepicker',
     'datetime',
@@ -120,14 +120,14 @@ export const docs = {
       name: 'timeIncrement',
       type: '1 | 5 | 10 | 15 | 30',
       description:
-        'Minutes to add or subtract when using arrow keys in the time input.',
+        'Minutes to add or subtract when using arrow keys in the desktop time input. Ignored on the mobile touch sheet, where time is changed with wheels.',
       default: '1',
     },
     {
       name: 'timeOptionInterval',
       type: '5 | 10 | 15 | 30 | 60',
       description:
-        'Minute cadence for a dropdown of preset times on the time portion. Set it to turn the time field into a combobox listing every valid time at that cadence (60 gives a 12 AM to 11 PM list). Omitted, the time field stays a plain text input and gains no combobox semantics. Typed entry keeps working either way, so a time between two options is still reachable. Independent of timeIncrement, which governs arrow-key stepping.',
+        'Minute cadence for a dropdown of preset times on the desktop time portion. Set it to turn the desktop time field into a combobox listing every valid time at that cadence (60 gives a 12 AM to 11 PM list). Omitted, the desktop time field stays a plain text input and gains no combobox semantics. Typed entry keeps working either way, so a time between two options is still reachable. Ignored on the mobile touch sheet, where the wheels expose every hour/minute/second.',
     },
     {
       name: 'hasClear',
@@ -146,7 +146,7 @@ export const docs = {
       name: 'timePlaceholder',
       type: 'string',
       description:
-        'Placeholder text shown in the time portion when no time is selected.',
+        'Placeholder text shown in the time portion when no time is selected. On touch, this appears in the closed time segment before a time is chosen.',
       default: "'Select a time'",
     },
     {
@@ -176,7 +176,8 @@ export const docs = {
     {
       name: 'numberOfMonths',
       type: '1 | 2',
-      description: 'Number of months displayed simultaneously in the calendar.',
+      description:
+        'Number of months displayed simultaneously in the desktop calendar popover. Ignored on the mobile touch sheet, whose Date panel always shows one swipe-paged month at a time.',
       default: '1',
     },
     {
@@ -201,7 +202,11 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-date-time-input', visualProps: ['size', 'status'], states: ['disabled']},
+      {
+        className: 'astryx-date-time-input',
+        visualProps: ['size', 'status'],
+        states: ['disabled'],
+      },
       {
         className: 'astryx-date-time-input-date-segment',
         visualProps: ['size', 'status'],
@@ -218,7 +223,7 @@ export const docs = {
   },
   usage: {
     description:
-      'DateTimeInput combines a calendar popover with a time input for selecting both a date and time in a single interaction flow. Use it for scheduling, event creation, deadline setting, or any form field that needs a specific datetime.',
+      'DateTimeInput combines date and time selection in one field. On mouse/trackpad devices it uses a calendar popover plus text time input; on coarse-pointer devices the closed control still has separate Date and Time segments, and either segment opens a bottom sheet with Date and Time sections, a swipable month calendar, and accessible time wheels. The closed date and time segments stay side by side when at least 400px is available and wrap into full-width rows below 400px, independent of viewport width. Use it for scheduling, event creation, deadline setting, or any form field that needs a specific datetime.',
     bestPractices: [
       {
         guidance: true,
@@ -283,19 +288,19 @@ export const docs = {
         name: 'Calendar popover',
         required: false,
         description:
-          'A month grid that appears when the icon is clicked or the date input is focused.',
+          'A month grid that appears in a popover on desktop, or in the mobile bottom sheet on coarse-pointer devices.',
       },
       {
         name: 'Time input',
         required: true,
         description:
-          'A text input for entering the time, displayed beside the date input.',
+          "A text input for entering the time on desktop; a read-only time segment opening accessible hour/minute/second wheels on touch. The touch Date panel's Save date action advances to Time; the Time panel's Save closes the sheet.",
       },
       {
         name: 'Time options popover',
         required: false,
         description:
-          'A list of preset times at the timeOptionInterval cadence, shown when that prop is set and the time input is clicked or opened with Alt+ArrowDown.',
+          'A desktop-only list of preset times at the timeOptionInterval cadence, shown when that prop is set and the time input is clicked or opened with Alt+ArrowDown.',
       },
       {
         name: 'Clear button',
@@ -317,7 +322,7 @@ export const docsZh = {
   displayName: 'Date Time Input',
   usage: {
     description:
-      'DateTimeInput combines a calendar popover with a time input for selecting both a date and time in a single interaction flow. Use it for scheduling, event creation, deadline setting, or any form field that needs a specific datetime.',
+      'DateTimeInput combines date and time selection in one field. On mouse/trackpad devices it uses a calendar popover plus text time input; on coarse-pointer devices the closed control still has separate Date and Time segments, and either segment opens a bottom sheet with Date and Time sections, a swipable month calendar, and accessible time wheels. The closed date and time segments stay side by side when at least 400px is available and wrap into full-width rows below 400px, independent of viewport width. Use it for scheduling, event creation, deadline setting, or any form field that needs a specific datetime.',
     bestPractices: [
       {
         guidance: true,
@@ -451,7 +456,8 @@ export const docsZh = {
     {
       name: 'timeIncrement',
       type: '1 | 5 | 10 | 15 | 30',
-      description: '在时间输入中按箭头键时增减的分钟数。',
+      description:
+        '在桌面时间输入中按箭头键时增减的分钟数。在移动触摸面板中会被忽略，时间通过滚轮更改。',
       default: '1',
     },
     {
@@ -469,7 +475,8 @@ export const docsZh = {
     {
       name: 'timePlaceholder',
       type: 'string',
-      description: '时间部分未选择时间时显示的占位符文本。',
+      description:
+        '时间部分未选择时间时显示的占位符文本。在触摸设备上，这会显示在未选择时间的闭合时间段中。',
       default: "'Select a time'",
     },
     {
@@ -497,13 +504,15 @@ export const docsZh = {
     {
       name: 'numberOfMonths',
       type: '1 | 2',
-      description: '日历中同时显示的月份数量。',
+      description:
+        '桌面日历弹出层中同时显示的月份数量。在移动触摸面板中会被忽略，日期面板一次显示一个可滑动月份。',
       default: '1',
     },
     {
       name: 'weekStartsOn',
       type: "0 | 1 | 2 | 3 | 4 | 5 | 6 | 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'",
-      description: '日历中每周的起始日。可为数字（0=周日……6=周六）或三字母星期缩写。',
+      description:
+        '日历中每周的起始日。可为数字（0=周日……6=周六）或三字母星期缩写。',
       default: '0',
     },
     {
@@ -515,7 +524,11 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-date-time-input', visualProps: ['size', 'status'], states: ['disabled']},
+      {
+        className: 'astryx-date-time-input',
+        visualProps: ['size', 'status'],
+        states: ['disabled'],
+      },
       {
         className: 'astryx-date-time-input-date-segment',
         visualProps: ['size', 'status'],
@@ -538,7 +551,7 @@ export const docsDense = {
     'combined date + time picker with calendar popover and time input',
   usage: {
     description:
-      'DateTimeInput combines a calendar popover with a time input for selecting both a date and time. Use for scheduling, events, deadlines, or any form field needing a datetime.',
+      'DateTimeInput combines date and time selection. Desktop uses a calendar popover plus time input; coarse pointers show separate Date/Time closed segments that open a bottom sheet with matching sections, a Save date step, and final time-wheel Save. Closed segments stay side by side when at least 400px is available and wrap into full-width rows below 400px, independent of the viewport. Use for scheduling, events, deadlines, or any form field needing a datetime.',
     bestPractices: [
       {
         guidance: true,
@@ -600,19 +613,23 @@ export const docsDense = {
     dateConstraints: 'custom constraint fns to disable specific dates',
     hasSeconds: 'include seconds in time portion',
     hourFormat: "display format. '12h' shows AM/PM; '24h' uses 24-hour",
-    timeIncrement: 'minutes to add/subtract on arrow keys in time input',
+    timeIncrement:
+      'desktop only: minutes to add/subtract on arrow keys in time input; mobile uses wheels',
     timeOptionInterval:
-      'minute cadence for a preset-time dropdown on the time input; omitted = plain text input, no combobox. typed entry still works',
+      'desktop only: minute cadence for a preset-time dropdown on the time input; omitted = plain text input, no combobox. mobile uses wheels',
     hasClear: 'Shows clear button when datetime is set',
     placeholder: 'date-portion placeholder when empty',
-    timePlaceholder: 'time-portion placeholder when empty',
+    timePlaceholder:
+      'time-portion placeholder when empty; shown on touch closed time segment',
     timeLabel:
       'accessible label for the time input; defaults to "{label} time"',
     size: 'input control size',
     status: 'error/warning/success status w/ message',
     labelTooltip: 'tooltip text via info icon at label end',
-    numberOfMonths: 'months shown simultaneously in calendar',
-    weekStartsOn: 'first day of week in calendar (0=Sunday, or name e.g. "mon")',
+    numberOfMonths:
+      'desktop calendar months shown simultaneously; ignored on mobile touch sheet',
+    weekStartsOn:
+      'first day of week in calendar (0=Sunday, or name e.g. "mon")',
     xstyle: 'StyleX styles for layout; must be stylex.create() value',
   },
 };

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -12,6 +12,7 @@
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import * as stylex from '@stylexjs/stylex';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
@@ -33,12 +34,56 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
   return [prose, component].filter(Boolean).join('\n\n');
 }
+
+// jsdom does not perform flex layout, so these probe classes verify the
+// declarations that switch between horizontal and stacked intrinsic layouts.
+const responsiveLayoutProbe = stylex.create({
+  responsiveRow: {
+    flexWrap: 'wrap',
+  },
+  responsiveSegment: {
+    flexBasis: 196,
+    minWidth: 0,
+  },
+});
+
+function expectResponsiveProbeClasses(
+  element: HTMLElement,
+  style: (typeof responsiveLayoutProbe)[keyof typeof responsiveLayoutProbe],
+): void {
+  const classes = (stylex.props(style).className ?? '')
+    .split(' ')
+    .filter(className => className !== '' && !className.includes('__'));
+  expect(classes.length).toBeGreaterThan(0);
+  for (const className of classes) {
+    expect(element).toHaveClass(className);
+  }
+}
+
 describe('DateTimeInput', () => {
   it('renders with label', () => {
     render(<DateTimeInput label="Meeting time" onChange={() => {}} />);
     expect(screen.getByLabelText('Meeting time')).toBeInTheDocument();
   });
 
+  it('updates the committed date display when provider locale changes', () => {
+    const renderDateTimeInput = (locale: 'en-US' | 'es-ES') => (
+      <InternationalizationProvider locale={locale}>
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-01-25T14:30' as ISODateTimeString}
+          onChange={() => {}}
+        />
+      </InternationalizationProvider>
+    );
+    const {rerender} = render(renderDateTimeInput('en-US'));
+
+    expect(screen.getByRole('combobox')).toHaveValue('January 25, 2026');
+
+    rerender(renderDateTimeInput('es-ES'));
+    expect(screen.getByRole('combobox')).toHaveValue('25 de enero de 2026');
+  });
+
   it('derives the time input label from the field label (forms-15)', () => {
     render(<DateTimeInput label="Meeting time" onChange={() => {}} />);
     // Not a hardcoded "Time" — tied to the field label so it is localizable
@@ -97,6 +142,37 @@ describe('DateTimeInput', () => {
     expect(screen.getByLabelText('Meeting time')).toBeInTheDocument();
   });
 
+  it('allows the date and time segments to wrap when they no longer fit', () => {
+    const {container} = render(
+      <DateTimeInput label="Meeting" onChange={() => {}} />,
+    );
+    const row = container.querySelector(
+      '.astryx-date-time-input',
+    ) as HTMLElement;
+    expect(row).not.toBeNull();
+    expectResponsiveProbeClasses(row, responsiveLayoutProbe.responsiveRow);
+  });
+
+  it('gives both segments the intrinsic wrap threshold and allows them to shrink', () => {
+    const {container} = render(
+      <DateTimeInput label="Meeting" onChange={() => {}} />,
+    );
+    const dateSegment = container.querySelector(
+      '.astryx-date-time-input-date-segment',
+    ) as HTMLElement;
+    const timeSegment = container.querySelector(
+      '.astryx-date-time-input-time-segment',
+    ) as HTMLElement;
+    expectResponsiveProbeClasses(
+      dateSegment,
+      responsiveLayoutProbe.responsiveSegment,
+    );
+    expectResponsiveProbeClasses(
+      timeSegment,
+      responsiveLayoutProbe.responsiveSegment,
+    );
+  });
+
   it('does not commit the date on a composing Enter (IME)', () => {
     const onChange = vi.fn();
     render(<DateTimeInput label="Meeting" onChange={onChange} />);

package/src/DateTimeInput/DateTimeInput.tsx

@@ -4,20 +4,20 @@
 
 /**
  * @file DateTimeInput.tsx
- * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
+ * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities, TouchDateTimeField, StyleX intrinsic flex layout
  * @output Exports DateTimeInput component, DateTimeInputProps
  * @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DateTimeInput/DateTimeInput.doc.mjs (props table, features, implementation notes)
- * - /packages/core/src/DateTimeInput/DateTimeInput.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/DateTimeInput/DateTimeInput.test.tsx (desktop tests for new/changed behavior)
+ * - /packages/core/src/DateTimeInput/DateTimeInputTouch.test.tsx (touch-surface tests)
  * - /packages/core/src/DateTimeInput/index.ts (exports if types change)
  * - /apps/storybook/stories/DateTimeInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateTimeInput/ (showcase blocks)
  */
 
 import {
-  use,
   useId,
   useState,
   useCallback,
@@ -38,7 +38,6 @@ import {
   typographyVars,
   typeScaleVars,
   fontWeightVars,
-  borderVars,
 } from '../theme/tokens.stylex';
 import {
   Field,
@@ -88,13 +87,15 @@ import {
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useAnnounce} from '../hooks/useAnnounce';
+import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
-import {useTranslator, InternationalizationContext} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {TouchDateTimeField} from './TouchDateTimeField';
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
 };
@@ -117,9 +118,14 @@ export type {
   InputStatusType as DateTimeInputStatusType,
 } from '../Field';
 
+// Two 196px segments plus the 8px gap fit at exactly 400px. Below that,
+// flex wrapping moves each growing segment onto its own full-width row.
+const HORIZONTAL_SEGMENT_BASIS = 196;
+
 const styles = stylex.create({
   row: {
     display: 'flex',
+    flexWrap: 'wrap',
     gap: spacingVars['--spacing-2'],
   },
   iconButton: {
@@ -174,11 +180,13 @@ const styles = stylex.create({
   },
   dateWrapper: {
     flex: 1,
-    flexBasis: 0,
+    flexBasis: HORIZONTAL_SEGMENT_BASIS,
+    minWidth: 0,
   },
   timeWrapper: {
     flex: 1,
-    flexBasis: 0,
+    flexBasis: HORIZONTAL_SEGMENT_BASIS,
+    minWidth: 0,
   },
   // Preset-time list. Paddings and states mirror BaseTypeahead's dropdown and
   // Selector's options so every list in the system reads the same.
@@ -362,25 +370,28 @@ export interface DateTimeInputProps extends Omit<
   hourFormat?: DateTimeInputHourFormat;
 
   /**
-   * Minutes added or subtracted when stepping the time field with the arrow
-   * keys. Constrained to a set of sensible increments.
+   * Minutes added or subtracted when stepping the desktop time field with the
+   * arrow keys. Ignored on the mobile touch sheet, where time is changed with
+   * wheels. Constrained to a set of sensible increments.
    * @default 1
    */
   timeIncrement?: DateTimeInputTimeIncrement;
 
   /**
-   * Minute cadence for a dropdown of preset times on the time field. Set it to
-   * turn the time field into a combobox listing every valid time at that
+   * Minute cadence for a dropdown of preset times on the desktop time field. Set
+   * it to turn the time field into a combobox listing every valid time at that
    * cadence (`60` gives the 12 AM - 11 PM list, `15` a quarter-hour list).
    *
-   * Omitted, the time field stays a plain text input: typed entry and
+   * Omitted, the desktop time field stays a plain text input: typed entry and
    * arrow-key stepping only, with no combobox semantics added to the
-   * accessibility tree. Typed entry keeps working when the dropdown is on —
-   * the list is a shortcut, not a restriction, so a time between two options
-   * can still be typed.
+   * accessibility tree. Typed entry keeps working when the dropdown is on — the
+   * list is a shortcut, not a restriction, so a time between two options can
+   * still be typed.
    *
-   * Independent of `timeIncrement`, which governs arrow-key stepping. Setting
-   * both to the same value is the usual choice for scheduling flows.
+   * Ignored on the mobile touch sheet, where the wheels expose every
+   * hour/minute/second. Independent of `timeIncrement`, which governs desktop
+   * arrow-key stepping. Setting both to the same value is the usual choice for
+   * scheduling flows on desktop.
    */
   timeOptionInterval?: DateTimeInputTimeOptionInterval;
 
@@ -398,6 +409,7 @@ export interface DateTimeInputProps extends Omit<
 
   /**
    * Placeholder text shown in the time portion when no time is selected.
+   * On touch, this appears in the closed time segment before a time is chosen.
    * @default "Select a time"
    */
   timePlaceholder?: string;
@@ -432,7 +444,9 @@ export interface DateTimeInputProps extends Omit<
   labelTooltip?: string;
 
   /**
-   * Number of months to display in the calendar.
+   * Number of months to display in the desktop calendar popover. Ignored on the
+   * mobile touch sheet, whose Date panel always shows one swipe-paged month at a
+   * time.
    * @default 1
    */
   numberOfMonths?: 1 | 2;
@@ -497,7 +511,7 @@ function getDefaultTime(hasSeconds: boolean): ISOTimeString {
  * />
  * ```
  */
-export function DateTimeInput({
+function PointerDateTimeField({
   label,
   isLabelHidden = false,
   description,
@@ -533,8 +547,8 @@ export function DateTimeInput({
   ...rest
 }: DateTimeInputProps) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
-  const {locale} = use(InternationalizationContext);
   // Speaks arrow-key stepping results through the persistent live regions:
   // stepping programmatically rewrites a plain textbox's value, which screen
   // readers do not announce on their own (WCAG 4.1.2).
@@ -1690,4 +1704,24 @@ export function DateTimeInput({
   );
 }
 
+PointerDateTimeField.displayName = 'PointerDateTimeField';
+
+const TOUCH_POINTER_QUERY = '(pointer: coarse)';
+
+/**
+ * A combined date and time picker that keeps the desktop text-entry surface on
+ * mouse/trackpad devices and uses Astryx's custom bottom-sheet picker on coarse
+ * pointers. Unlike DateInput, this never hands touch picking to the browser/OS:
+ * the mobile flow has to coordinate date and time together, preserve drafted
+ * time before a date exists, and enforce datetime min/max across both panels.
+ */
+export function DateTimeInput(props: DateTimeInputProps) {
+  const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  return isTouch ? (
+    <TouchDateTimeField {...props} />
+  ) : (
+    <PointerDateTimeField {...props} />
+  );
+}
+
 DateTimeInput.displayName = 'DateTimeInput';