@sixthshift/design-system 0.2.1 → 0.4.0

package/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx

@@ -1,14 +1,28 @@
 import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
-import { Calendar as CalendarIcon, X } from "lucide-react";
-import type * as React from "react";
-import { useCallback, useId, useMemo, useState } from "react";
-import { now, Temporal, today } from "../../date-time";
-
+import { Calendar as CalendarIcon } from "lucide-react";
+import * as React from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import {
+  adaptDisabledDates,
+  fromISODateOrUndefined,
+  fromISOInstantRange,
+  fromISOTimeOrUndefined,
+  now,
+  Temporal,
+  type TemporalInstantRange,
+  today,
+  toISOInstant,
+  toISOInstantRange,
+} from "../../date-time";
+
+import { PickerField } from "../../internal";
 import { Button } from "../Button";
-import { Calendar } from "../Calendar";
+import { CalendarView } from "../Calendar/CalendarView";
+import { isDateDisabled } from "../Calendar/calendar.hooks";
 import type { DateRangeValue } from "../Calendar/calendar.types";
+import { DateTimeSegments } from "../DateTimePicker/DateTimeSegments";
 import { Separator } from "../Separator";
 import { PeriodSelector } from "../TimePicker/PeriodSelector";
 import { TimeColumn } from "../TimePicker/TimeColumn";
@@ -25,60 +39,10 @@ import {
 import type { ParsedTime, TimePeriod } from "../TimePicker/timepicker.types";
 import type { DateTimeRangePickerProps, DateTimeRangePresetOption, DateTimeRangeValue } from "./datetimerangepicker.types";
 
-/**
- * Format an Instant for display
- */
-function formatInstantDisplay(instant: Temporal.Instant, clockFormat: "12h" | "24h", showSeconds: boolean, timeZone?: string): string {
-  const tz = timeZone ?? Temporal.Now.timeZoneId();
-  const zoned = instant.toZonedDateTimeISO(tz);
-  const plainDateTime = zoned.toPlainDateTime();
-
-  // Format date part
-  const datePart = plainDateTime.toLocaleString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
-
-  // Format time part based on props
-  const timeOptions: Intl.DateTimeFormatOptions = {
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: clockFormat === "12h",
-  };
-
-  if (showSeconds) {
-    timeOptions.second = "2-digit";
-  }
-
-  const timePart = plainDateTime.toLocaleString("en-US", timeOptions);
-
-  return `${datePart}, ${timePart}`;
-}
-
-/**
- * Format an Instant range for display
- */
-function formatRangeDisplay(range: DateTimeRangeValue | undefined, clockFormat: "12h" | "24h", showSeconds: boolean): string {
-  if (!range?.from && !range?.to) {
-    return "";
-  }
-
-  if (range.from && !range.to) {
-    return `${formatInstantDisplay(range.from, clockFormat, showSeconds)} – ...`;
-  }
-
-  if (!range.from && range.to) {
-    return `... – ${formatInstantDisplay(range.to, clockFormat, showSeconds)}`;
-  }
-
-  return `${formatInstantDisplay(range.from!, clockFormat, showSeconds)} – ${formatInstantDisplay(range.to!, clockFormat, showSeconds)}`;
-}
-
 /**
  * Default preset ranges for DateTimeRangePicker
  *
- * Uses clean hour boundaries and returns Instant values
+ * Uses clean hour boundaries and returns canonical UTC instant strings
  */
 function getDefaultPresets(): DateTimeRangePresetOption[] {
   return [
@@ -87,7 +51,7 @@ function getDefaultPresets(): DateTimeRangePresetOption[] {
       value: () => {
         const end = now().round({ smallestUnit: "hour", roundingMode: "ceil" });
         const start = end.subtract({ hours: 1 });
-        return { from: start, to: end };
+        return { from: toISOInstant(start), to: toISOInstant(end) };
       },
     },
     {
@@ -95,7 +59,7 @@ function getDefaultPresets(): DateTimeRangePresetOption[] {
       value: () => {
         const end = now().round({ smallestUnit: "hour", roundingMode: "ceil" });
         const start = end.subtract({ hours: 24 });
-        return { from: start, to: end };
+        return { from: toISOInstant(start), to: toISOInstant(end) };
       },
     },
     {
@@ -103,7 +67,7 @@ function getDefaultPresets(): DateTimeRangePresetOption[] {
       value: () => {
         const end = now().round({ smallestUnit: "hour", roundingMode: "ceil" });
         const start = end.subtract({ hours: 7 * 24 });
-        return { from: start, to: end };
+        return { from: toISOInstant(start), to: toISOInstant(end) };
       },
     },
     {
@@ -111,7 +75,7 @@ function getDefaultPresets(): DateTimeRangePresetOption[] {
       value: () => {
         const end = now().round({ smallestUnit: "hour", roundingMode: "ceil" });
         const start = end.subtract({ hours: 30 * 24 });
-        return { from: start, to: end };
+        return { from: toISOInstant(start), to: toISOInstant(end) };
       },
     },
     {
@@ -121,7 +85,7 @@ function getDefaultPresets(): DateTimeRangePresetOption[] {
         const tz = Temporal.Now.timeZoneId();
         const zonedNow = end.toZonedDateTimeISO(tz);
         const startOfMonth = zonedNow.toPlainDate().with({ day: 1 }).toPlainDateTime(Temporal.PlainTime.from("00:00:00")).toZonedDateTime(tz).toInstant();
-        return { from: startOfMonth, to: end };
+        return { from: toISOInstant(startOfMonth), to: toISOInstant(end) };
       },
     },
   ];
@@ -130,10 +94,36 @@ function getDefaultPresets(): DateTimeRangePresetOption[] {
 /**
  * DateTimeRangePicker - A component for selecting a datetime range
  *
- * Combines date range selection with separate time pickers for start and end times.
- * Uses Temporal.PlainDateTime for all values.
+ * Combines a single range calendar with two sets of time columns — Start Time
+ * and End Time — shown side by side below it. Like `DateTimePicker`, it is
+ * not a composition of other picker components: it builds directly on the
+ * same internal calendar grid and time-column primitives `TimePicker` and
+ * `DateTimePicker` use.
+ *
+ * The trigger is two typeable fields, one per end — each a full date-and-time
+ * (`1520260900a` is January 5th 2026 at 9am), each with its own clear button,
+ * sharing one popover that anchors to whichever half is being edited. A typed
+ * end that falls outside `minDate`/`maxDate`/`minTime`/`maxTime` is flagged
+ * rather than clamped. See `SegmentedField` for the keyboard model.
+ *
+ * The value is an `ISOInstantRange` (`{ from?: ISOInstant, to?: ISOInstant }`,
+ * exported as `DateTimeRangeValue` for historical reasons) — both ends
+ * absolute instants, always UTC and ending in `Z`. Each end is edited in the
+ * viewer's local timezone and converted to/from UTC at the boundary. Supports
+ * controlled (`value`/`onChange`) and uncontrolled (`defaultValue`) use.
+ *
+ * Opening the popover seeds date-range and time drafts from the committed
+ * value; the footer's Apply combines them into an instant range and commits,
+ * Cancel discards the draft. `minDate`/`maxDate` and `disabledDates` bound the
+ * date grid. `minTime`/`maxTime` are wall-clock bounds that apply to **both**
+ * the start and end time columns identically — they do not mean "start no
+ * earlier than X, end no later than Y" relative to each other, and they say
+ * nothing about the resulting instants (a `maxTime` of `17:00` still allows an
+ * end date after the start date). `presets` (a zero-arg-function value, like
+ * `DateRangePicker`) replaces the built-in preset list; `showPresets={false}`
+ * hides the sidebar.
  */
-export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
+export const DateTimeRangePicker = React.forwardRef<HTMLDivElement, DateTimeRangePickerProps>((props, ref) => {
   const {
     value,
     defaultValue,
@@ -147,8 +137,8 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
     maxTime,
     minuteStep = 1,
     clockFormat = "12h",
+    segmentOrder = "mdy",
     showSeconds = false,
-    placeholder = "Select datetime range...",
     weekStartsOn = 0,
     name,
     isDisabled = false,
@@ -160,12 +150,33 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
 
   // Open state
   const [open, setOpen] = useState(false);
+  // The day grid takes focus only when the popover was opened from the keyboard.
+  const [autoFocusDay, setAutoFocusDay] = useState(false);
+
+  // ---------------------------------------------------------------------------
+  // The ISO boundary.
+  //
+  // Both ends of the range cross as canonical UTC instant strings; constraints
+  // cross as ISO dates and times. Below this block everything is Temporal, as
+  // before. Each conversion is memoised on its source value so the Temporal
+  // objects handed downstream stay referentially stable.
+  // ---------------------------------------------------------------------------
+
+  const temporalValue = useMemo(() => fromISOInstantRange(value), [value]);
+  const temporalDefaultValue = useMemo(() => fromISOInstantRange(defaultValue), [defaultValue]);
+  const temporalMinDate = useMemo(() => fromISODateOrUndefined(minDate), [minDate]);
+  const temporalMaxDate = useMemo(() => fromISODateOrUndefined(maxDate), [maxDate]);
+  const temporalMinTime = useMemo(() => fromISOTimeOrUndefined(minTime), [minTime]);
+  const temporalMaxTime = useMemo(() => fromISOTimeOrUndefined(maxTime), [maxTime]);
+  const temporalDisabledDates = useMemo(() => adaptDisabledDates(disabledDates), [disabledDates]);
+
+  const handleChange = useCallback((next: TemporalInstantRange | undefined) => onChange?.(toISOInstantRange(next)), [onChange]);
 
   // Controllable value state (external/committed value)
-  const [committedValue, setCommittedValue] = useControllableState({
-    value,
-    defaultValue,
-    onChange,
+  const [committedValue, setCommittedValue] = useControllableState<TemporalInstantRange | undefined>({
+    value: temporalValue,
+    defaultValue: temporalDefaultValue,
+    onChange: handleChange,
   });
 
   // Draft state (date range + time parts for both start and end)
@@ -303,8 +314,8 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
     };
   }, [clockFormat, draftEndHour, draftEndMinute, draftEndSecond, draftEndPeriod]);
 
-  // Combine draft dates and times into DateTimeRangeValue
-  const getDraftRange = useCallback((): DateTimeRangeValue => {
+  // Combine draft dates and times into the internal Temporal range
+  const getDraftRange = useCallback((): TemporalInstantRange => {
     const tz = Temporal.Now.timeZoneId();
 
     const from = draftDateRange?.from
@@ -380,19 +391,11 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
   }, [committedValue, clockFormat]);
 
   // Clear value
-  const handleClear = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      setCommittedValue(undefined);
-    },
-    [setCommittedValue]
-  );
 
   // Apply preset
   const _handlePresetClick = useCallback(
     (preset: { label: string; value: DateTimeRangeValue }) => {
-      setCommittedValue(preset.value);
+      setCommittedValue(fromISOInstantRange(preset.value));
       setOpen(false);
     },
     [setCommittedValue]
@@ -414,11 +417,149 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
   // IDs for accessibility
   const id = useId();
   const contentId = `datetimerangepicker-content-${id}`;
-  const inputId = `datetimerangepicker-input-${id}`;
 
   // Display value (from committed value)
-  const displayValue = committedValue ? formatRangeDisplay(committedValue, clockFormat, showSeconds) : "";
-  const hasValue = Boolean(committedValue?.from || committedValue?.to);
+
+  // ---------------------------------------------------------------------------
+  // Two typeable fields, one per end.
+  //
+  // A range is two instants, and typing one should not require knowing where the
+  // other ends. Each half is its own segmented field with its own clear button;
+  // they share the one popover, which anchors to whichever half is being edited.
+  // While it is open the fields show the draft, so picking in the grid or the
+  // columns shows up in the segments and vice versa.
+  // ---------------------------------------------------------------------------
+
+  const draftRange = getDraftRange();
+  const shownFor = (end: "from" | "to") => (open ? draftRange[end] : committedValue?.[end]);
+
+  /**
+   * A typed end can fall outside what the grid and columns allow. The field
+   * flags it rather than clamping; see `DatePicker` for why.
+   */
+  const outOfBounds = (instant: Temporal.Instant | undefined) => {
+    if (!instant) return false;
+    const zoned = instant.toZonedDateTimeISO(userTimeZone);
+    return (
+      isDateDisabled(zoned.toPlainDate(), temporalDisabledDates, temporalMinDate, temporalMaxDate) ||
+      isTimeDisabled(zoned.toPlainTime(), temporalMinTime, temporalMaxTime)
+    );
+  };
+
+  const setRangeEnd = useCallback(
+    (end: "from" | "to", instant: Temporal.Instant | undefined) => {
+      if (!open) {
+        const next = { from: end === "from" ? instant : committedValue?.from, to: end === "to" ? instant : committedValue?.to };
+        setCommittedValue(next.from || next.to ? next : undefined);
+        return;
+      }
+
+      if (!instant) {
+        setDraftDateRange((current) => ({ from: end === "from" ? undefined : current?.from, to: end === "to" ? undefined : current?.to }));
+        return;
+      }
+
+      const zoned = instant.toZonedDateTimeISO(userTimeZone);
+      const parsed = temporalToParsed(zoned.toPlainTime());
+      setDraftDateRange((current) => ({
+        from: end === "from" ? zoned.toPlainDate() : current?.from,
+        to: end === "to" ? zoned.toPlainDate() : current?.to,
+      }));
+      if (end === "from") {
+        setDraftStartHour(clockFormat === "12h" ? to12Hour(parsed.hour).hour12 : parsed.hour);
+        setDraftStartMinute(parsed.minute);
+        setDraftStartSecond(parsed.second);
+        setDraftStartPeriod(to12Hour(parsed.hour).period);
+      } else {
+        setDraftEndHour(clockFormat === "12h" ? to12Hour(parsed.hour).hour12 : parsed.hour);
+        setDraftEndMinute(parsed.minute);
+        setDraftEndSecond(parsed.second);
+        setDraftEndPeriod(to12Hour(parsed.hour).period);
+      }
+    },
+    [clockFormat, committedValue, open, setCommittedValue, userTimeZone]
+  );
+
+  const clearRangeEnd = useCallback(
+    (end: "from" | "to") => (event: React.MouseEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const next = { from: end === "from" ? undefined : committedValue?.from, to: end === "to" ? undefined : committedValue?.to };
+      // Clearing the last remaining end clears the range itself.
+      setCommittedValue(next.from || next.to ? next : undefined);
+    },
+    [committedValue, setCommittedValue]
+  );
+
+  const rangeHalves = useRef<Record<"from" | "to", HTMLDivElement | null>>({ from: null, to: null });
+  const anchorToHalf = useCallback(
+    (end: "from" | "to") => {
+      const node = rangeHalves.current[end];
+      if (node) refs.setPositionReference(node);
+    },
+    [refs]
+  );
+
+  /** `Alt+ArrowDown` from a segment: open the popover *and* go to the grid. */
+  const openWithGridFocus = useCallback(
+    (end: "from" | "to") => () => {
+      anchorToHalf(end);
+      setAutoFocusDay(true);
+      handleOpenChange(true);
+    },
+    [anchorToHalf, handleOpenChange]
+  );
+
+  /** `Enter` in a segment commits the draft, matching the popover's Apply. */
+  const handleFieldSubmit = useCallback(() => {
+    if (open) handleApply();
+  }, [handleApply, open]);
+
+  /**
+   * One end of the range. A render function rather than a component so the
+   * fields are not remounted — and focus is not dropped — on every keystroke.
+   */
+  const renderRangeHalf = (end: "from" | "to", label: string) => {
+    const settled = committedValue?.[end];
+
+    return (
+      <PickerField
+        ref={(node) => {
+          rangeHalves.current[end] = node;
+        }}
+        onFocusCapture={() => anchorToHalf(end)}
+        className="min-w-70 flex-1"
+        icon={<CalendarIcon className="h-4 w-4" />}
+        toggleLabel={`Open picker for ${label.toLowerCase()}`}
+        // Both handlers have to run: Floating UI's opens the popover, and ours
+        // points it at this half. Spreading after `onClick` would drop ours on
+        // the floor, which is how the popover ended up anchored to the whole
+        // trigger.
+        toggleProps={getReferenceProps({ onClick: () => anchorToHalf(end) })}
+        isOpen={open}
+        contentId={contentId}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid || outOfBounds(shownFor(end))}
+        onClear={clearable && settled && !isDisabled ? clearRangeEnd(end) : undefined}
+        clearLabel={`Clear ${label.toLowerCase()}`}
+      >
+        <DateTimeSegments
+          className="h-full flex-1"
+          label={label}
+          value={shownFor(end)}
+          onChange={(instant) => setRangeEnd(end, instant)}
+          timeZone={userTimeZone}
+          order={segmentOrder}
+          clockFormat={clockFormat}
+          showSeconds={showSeconds}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid || outOfBounds(shownFor(end))}
+          onOpenRequest={openWithGridFocus(end)}
+          onSubmit={handleFieldSubmit}
+        />
+      </PickerField>
+    );
+  };
 
   // Time selection handlers - Start time
   const handleStartHourChange = (hour: number) => setDraftStartHour(hour);
@@ -445,47 +586,29 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
   const checkTimeDisabled = useCallback(
     (hour: number, minute: number, second: number): boolean => {
       const temporal = Temporal.PlainTime.from({ hour, minute, second });
-      return isTimeDisabled(temporal, minTime, maxTime);
+      return isTimeDisabled(temporal, temporalMinTime, temporalMaxTime);
     },
-    [minTime, maxTime]
+    [temporalMinTime, temporalMaxTime]
   );
 
   return (
     <>
       {/* Trigger Input */}
-      <div className="relative flex min-w-125 items-center">
-        <CalendarIcon className="pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" />
-        <input
-          ref={refs.setReference as React.Ref<HTMLInputElement>}
-          id={inputId}
-          type="text"
-          readOnly
-          value={displayValue}
-          placeholder={placeholder}
-          disabled={isDisabled}
-          role="combobox"
-          aria-invalid={isInvalid}
-          aria-haspopup="dialog"
-          aria-expanded={open}
-          aria-controls={open ? contentId : undefined}
-          className={cn(
-            `flex h-9 w-full min-w-125 cursor-pointer rounded-md border border-border-normal bg-transparent py-1 pl-9 text-sm shadow-xs transition-colors placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`,
-            clearable && hasValue ? "pr-9" : "pr-3",
-            isInvalid && "border-border-danger",
-            className
-          )}
-          {...getReferenceProps()}
-        />
-        {clearable && hasValue && !isDisabled && (
-          <button
-            type="button"
-            onClick={handleClear}
-            className="absolute right-3 rounded-sm p-0.5 text-fg-subtle hover:bg-bg-subtle hover:text-fg-normal focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
-            aria-label="Clear datetime range"
-          >
-            <X className="h-3.5 w-3.5" />
-          </button>
-        )}
+      <div
+        ref={(node) => {
+          // The container is the interaction reference, so a click in either half
+          // counts as inside; the *position* reference follows the active half.
+          refs.setReference(node);
+          if (typeof ref === "function") ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }}
+        className={cn("relative flex min-w-125 items-center gap-2", className)}
+      >
+        {renderRangeHalf("from", "Start date and time")}
+        <span aria-hidden="true" className="text-fg-subtle">
+          –
+        </span>
+        {renderRangeHalf("to", "End date and time")}
 
         {/* Hidden inputs for form submission */}
         {name && committedValue?.from && <input type="hidden" name={`${name}.from`} value={committedValue.from.toString()} />}
@@ -499,7 +622,7 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
             ref={refs.setFloating}
             id={contentId}
             role="dialog"
-            aria-modal="true"
+            aria-label="Choose date and time range"
             style={floatingStyles}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
@@ -531,17 +654,18 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
               )}
 
               {/* Date Calendar */}
-              <Calendar
+              <CalendarView
                 mode="range"
                 value={draftDateRange}
                 onSelect={setDraftDateRange as (range: DateRangeValue | undefined) => void}
                 month={month}
                 onMonthChange={setMonth}
-                minDate={minDate}
-                maxDate={maxDate}
-                disabled={disabledDates}
+                minDate={temporalMinDate}
+                maxDate={temporalMaxDate}
+                disabled={temporalDisabledDates}
                 weekStartsOn={weekStartsOn}
                 showFooter={false}
+                autoFocusDay={autoFocusDay}
               />
             </div>
 
@@ -667,7 +791,7 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
               <Button type="button" variant="ghost" size="sm" onClick={handleCancel}>
                 Cancel
               </Button>
-              <Button type="button" variant="solid" size="sm" onClick={handleApply}>
+              <Button type="button" variant="solid" intent="brand" size="sm" onClick={handleApply}>
                 Apply
               </Button>
             </div>
@@ -676,4 +800,5 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
       )}
     </>
   );
-};
+});
+DateTimeRangePicker.displayName = "DateTimeRangePicker";

package/src/components/DateTimeRangePicker/datetimerangepicker.types.ts

@@ -1,20 +1,26 @@
-import type { Temporal, WeekStartsOn } from "../../date-time";
-
-export type DisabledDateMatcher =
-  | Temporal.PlainDate
-  | Temporal.PlainDate[]
-  | ((date: Temporal.PlainDate) => boolean)
-  | { before: Temporal.PlainDate }
-  | { after: Temporal.PlainDate }
-  | { from: Temporal.PlainDate; to: Temporal.PlainDate };
-
-export type DateTimeRangeValue = {
-  from: Temporal.Instant | undefined;
-  to: Temporal.Instant | undefined;
-};
+/**
+ * DateTimeRangePicker types.
+ *
+ * Both ends of the range are absolute instants, exchanged as canonical UTC ISO
+ * strings (`"2026-08-26T00:30:00Z"`). Date and time constraints are plain dates
+ * and wall-clock times, since they describe the picker's grid rather than an
+ * absolute moment.
+ */
+
+import type { DisabledDates, ISODate, ISOInstantRange, ISOTime, WeekStartsOn } from "../../date-time";
+import type { DateSegmentOrder } from "../DatePicker/datepicker.types";
+
+/**
+ * A datetime range.
+ *
+ * Alias of `ISOInstantRange`, kept under this name because it is the historical
+ * public type for this component.
+ */
+export type DateTimeRangeValue = ISOInstantRange;
 
 export type DateTimeRangePresetOption = {
   label: string;
+  /** Called when the picker renders, so relative ranges stay current. */
   value: () => DateTimeRangeValue;
 };
 
@@ -29,21 +35,26 @@ export type DateTimeRangePickerProps = {
   showPresets?: boolean; // Default: true
 
   // Date constraints
-  minDate?: Temporal.PlainDate;
-  maxDate?: Temporal.PlainDate;
-  disabledDates?: DisabledDateMatcher | DisabledDateMatcher[];
+  minDate?: ISODate;
+  maxDate?: ISODate;
+  disabledDates?: DisabledDates | DisabledDates[];
 
   // Time constraints (apply to both start and end times)
-  minTime?: Temporal.PlainTime;
-  maxTime?: Temporal.PlainTime;
+  minTime?: ISOTime;
+  maxTime?: ISOTime;
   minuteStep?: 1 | 5 | 10 | 15 | 30;
 
   // Time format
   clockFormat?: "12h" | "24h"; // Default: "12h"
+
+  /**
+   * Segment order for the date half of each typeable field (default `mdy`).
+   * Never inferred from the locale — `08/09` is a different date under each.
+   */
+  segmentOrder?: DateSegmentOrder;
   showSeconds?: boolean; // Default: false
 
   // Display
-  placeholder?: string;
   weekStartsOn?: WeekStartsOn;
 
   // Form

package/src/components/DateTimeRangePicker/index.ts

@@ -1,2 +1,11 @@
+/**
+ * Public surface of `@sixthshift/design-system/datetime-range-picker`.
+ *
+ * `DisabledDateMatcher` was a Temporal-shaped type and is gone; the ISO
+ * equivalent `DisabledDates` is re-exported here. `DateTimeRangeValue` survives
+ * as an alias of `ISOInstantRange`.
+ */
+
+export type { DisabledDates, ISODate, ISOInstant, ISOInstantRange, ISOTime } from "../../date-time";
 export { DateTimeRangePicker } from "./DateTimeRangePicker";
 export type { DateTimeRangePickerProps, DateTimeRangePresetOption, DateTimeRangeValue } from "./datetimerangepicker.types";