Add DateRangeInput component

packages/circuit-ui/components/DateInput/DateInput.module.css

@@ -84,7 +84,14 @@
   line-height: var(--cui-body-m-line-height);
 }
 
-.readonly .literal {
+.divider {
+  padding: var(--cui-spacings-bit);
+  font-size: var(--cui-body-m-font-size);
+  line-height: var(--cui-body-m-line-height);
+}
+
+.readonly .literal,
+.readonly .divider {
   color: var(--cui-fg-subtle);
 }
 
@@ -167,10 +174,6 @@
 }
 
 @media (min-width: 480px) {
-  .apply {
-    display: none;
-  }
-
   .presets {
     position: sticky;
     bottom: 0;

packages/circuit-ui/components/DateInput/DateInput.stories.tsx

@@ -18,6 +18,7 @@ import { useState } from 'react';
 import { Stack } from '../../../../.storybook/components/index.js';
 
 import { DateInput, type DateInputProps } from './DateInput.js';
+import { DateRangeInput, type DateRangeInputProps } from './DateRangeInput.js';
 
 export default {
   title: 'Forms/DateInput',
@@ -174,3 +175,12 @@ export const Locales = (args: DateInputProps) => (
 );
 
 Locales.args = baseArgs;
+
+export const Range = (args: DateRangeInputProps) => (
+  <DateRangeInput {...args} />
+);
+
+Range.args = {
+  ...baseArgs,
+  label: 'Trip dates',
+};

packages/circuit-ui/components/DateInput/DateInput.tsx

@@ -53,10 +53,10 @@ import { applyMultipleRefs } from '../../util/refs.js';
 import { changeInputValue } from '../../util/input-value.js';
 
 import { Dialog } from './components/Dialog.js';
-import { DateSegment } from './components/DateSegment.js';
+import { PlainDateSegments } from './components/PlainDateSegments.js';
 import { usePlainDateState } from './hooks/usePlainDateState.js';
 import { useSegmentFocus } from './hooks/useSegmentFocus.js';
-import { getCalendarButtonLabel, getDateSegments } from './DateInputService.js';
+import { getCalendarButtonLabel, getDateParts } from './DateInputService.js';
 import classes from './DateInput.module.css';
 
 export interface DateInputProps
@@ -292,7 +292,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
 
     const dialogStyles = isMobile ? mobileStyles : floatingStyles;
 
-    const segments = getDateSegments(locale);
+    const parts = getDateParts(locale);
     const calendarButtonLabel = getCalendarButtonLabel(
       openCalendarButtonLabel,
       state.date,
@@ -389,68 +389,20 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
                 readOnly && classes.readonly,
               )}
             >
-              {segments.map((segment, index) => {
-                const segmentProps = {
-                  required,
-                  invalid,
-                  disabled,
-                  readOnly,
-                  focus,
-                  // Only the first segment should be associated with the validation hint to reduce verbosity.
-                  'aria-describedby': index === 0 ? descriptionIds : undefined,
-                };
-                switch (segment.type) {
-                  case 'year':
-                    return (
-                      <DateSegment
-                        key={segment.type}
-                        aria-label={yearInputLabel}
-                        autoComplete={
-                          autoComplete === 'bday' ? 'bday-year' : undefined
-                        }
-                        {...segmentProps}
-                        {...state.props.year}
-                      />
-                    );
-                  case 'month':
-                    return (
-                      <DateSegment
-                        key={segment.type}
-                        aria-label={monthInputLabel}
-                        autoComplete={
-                          autoComplete === 'bday' ? 'bday-month' : undefined
-                        }
-                        {...segmentProps}
-                        {...state.props.month}
-                      />
-                    );
-                  case 'day':
-                    return (
-                      <DateSegment
-                        key={segment.type}
-                        aria-label={dayInputLabel}
-                        autoComplete={
-                          autoComplete === 'bday' ? 'bday-day' : undefined
-                        }
-                        {...segmentProps}
-                        {...state.props.day}
-                      />
-                    );
-                  case 'literal':
-                    return (
-                      <div
-                        // biome-ignore lint/suspicious/noArrayIndexKey: The order of the literals is static
-                        key={segment.type + index}
-                        className={classes.literal}
-                        aria-hidden="true"
-                      >
-                        {segment.value}
-                      </div>
-                    );
-                  default:
-                    return null;
-                }
-              })}
+              <PlainDateSegments
+                parts={parts}
+                state={state}
+                focus={focus}
+                yearInputLabel={yearInputLabel}
+                monthInputLabel={monthInputLabel}
+                dayInputLabel={dayInputLabel}
+                aria-describedby={descriptionIds}
+                required={required}
+                invalid={invalid}
+                disabled={disabled}
+                readOnly={readOnly}
+                autoComplete={autoComplete}
+              />
             </div>
             <IconButton
               icon={CalendarIcon}
@@ -519,13 +471,15 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
                       {clearDateButtonLabel}
                     </Button>
                   )}
-                  <Button
-                    variant="primary"
-                    onClick={handleApply}
-                    className={classes.apply}
-                  >
-                    {applyDateButtonLabel}
-                  </Button>
+                  {isMobile && (
+                    <Button
+                      variant="primary"
+                      onClick={handleApply}
+                      className={classes.apply}
+                    >
+                      {applyDateButtonLabel}
+                    </Button>
+                  )}
                 </div>
               )}
             </div>

packages/circuit-ui/components/DateInput/DateInputService.spec.ts

@@ -16,17 +16,17 @@
 import { describe, expect, it } from 'vitest';
 import { Temporal } from 'temporal-polyfill';
 
-import { getCalendarButtonLabel, getDateSegments } from './DateInputService.js';
+import { getCalendarButtonLabel, getDateParts } from './DateInputService.js';
 
 describe('DateInputService', () => {
-  describe('getDateSegments', () => {
+  describe('getDateParts', () => {
     it.each([
       // locale, year, month, day
       ['en-US', [4, 0, 2]],
       ['de-DE', [4, 2, 0]],
       ['pt-BR', [4, 2, 0]],
     ])('should order the segments for the %s locale', (locale, indices) => {
-      const actual = getDateSegments(locale);
+      const actual = getDateParts(locale);
       const year = actual.findIndex(({ type }) => type === 'year');
       const month = actual.findIndex(({ type }) => type === 'month');
       const day = actual.findIndex(({ type }) => type === 'day');
@@ -39,7 +39,7 @@ describe('DateInputService', () => {
       ['de-DE', '.'],
       ['pt-BR', '/'],
     ])('should return the literal for the %s locale', (locale, literal) => {
-      const actual = getDateSegments(locale);
+      const actual = getDateParts(locale);
       const literalSegment = actual.find(({ type }) => type === 'literal');
       expect(literalSegment?.value).toBe(literal);
     });

packages/circuit-ui/components/DateInput/DateInputService.ts

@@ -20,7 +20,26 @@ import type { Locale } from '../../util/i18n.js';
 
 const TEST_VALUE = new Temporal.PlainDate(2024, 3, 8);
 
-export function getDateSegments(locale?: Locale) {
+export type DatePart =
+  | { type: 'literal'; value: string }
+  | {
+      type:
+        | 'day'
+        | 'dayPeriod'
+        | 'era'
+        | 'hour'
+        | 'minute'
+        | 'month'
+        | 'second'
+        | 'timeZoneName'
+        | 'weekday'
+        | 'year'
+        | 'unknown'
+        | 'date';
+      value?: never;
+    };
+
+export function getDateParts(locale?: Locale): DatePart[] {
   const parts = formatDateTimeToParts(TEST_VALUE, locale);
   return parts.map(({ type, value }) =>
     type === 'literal' ? { type, value } : { type },