@sixthshift/design-system 0.2.1 → 0.3.0

package/src/components/ColorDot/ColorDot.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@sixthshift/design-system/utils";
 import { cva, type VariantProps } from "class-variance-authority";
-import type { HTMLAttributes } from "react";
+import * as React from "react";
 
 const INTENT_CLASSES: Record<string, string> = {
   neutral: "bg-fg-subtle",
@@ -29,22 +29,24 @@ const colorDotVariants = cva("inline-block shrink-0 rounded-full", {
   },
 });
 
-export type ColorDotProps = HTMLAttributes<HTMLSpanElement> &
+export type ColorDotProps = React.HTMLAttributes<HTMLSpanElement> &
   VariantProps<typeof colorDotVariants> & {
     /** Intent name (neutral, brand, success, warning, danger) or arbitrary CSS color */
     color: string;
   };
 
-export const ColorDot = ({ color, size, pulse, className, style, ...props }: ColorDotProps) => {
+export const ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(({ color, size, pulse, className, style, ...props }, ref) => {
   const intentClass = INTENT_CLASSES[color];
 
   return (
     <span
+      ref={ref}
       className={cn(colorDotVariants({ size, pulse }), intentClass, className)}
       style={intentClass ? style : { ...style, backgroundColor: color }}
       {...props}
     />
   );
-};
+});
+ColorDot.displayName = "ColorDot";
 
 export { colorDotVariants };

package/src/components/DatePicker/DatePicker.tsx

@@ -2,16 +2,40 @@ import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss,
 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, useState } from "react";
-import { isPlainDate, type Temporal, today } from "../../date-time";
-import { Calendar } from "../Calendar";
+import * as React from "react";
+import { useCallback, useId, useMemo, useState } from "react";
+import {
+  adaptDisabledDates,
+  fromISODate,
+  fromISODateOrUndefined,
+  fromISODateRange,
+  type ISODate,
+  type ISODateRange,
+  isPlainDate,
+  type Temporal,
+  today,
+  toISODate,
+  toISODateOrUndefined,
+  toISODateRange,
+} from "../../date-time";
+import { CalendarView } from "../Calendar/CalendarView";
+import type { PresetOption } from "../Calendar/calendar.types";
 import { defaultFormatDisplay, getDisplayValue, temporalToISO } from "./datepicker.hooks";
 import type { DatePickerProps, DateRangeValue } from "./datepicker.types";
 
 export type { DatePickerProps };
 
-export const DatePicker = (props: DatePickerProps) => {
+/** The Temporal-shaped value the picker holds internally, across all modes. */
+type InternalValue = Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined;
+
+/** Widen a public, mode-appropriate ISO value to {@link InternalValue}. */
+function toTemporal(mode: DatePickerProps["mode"], value: ISODate | ISODateRange | ISODate[] | undefined): InternalValue {
+  if (mode === "multiple") return ((value as ISODate[] | undefined) ?? []).map(fromISODate);
+  if (mode === "range") return fromISODateRange(value as ISODateRange | undefined);
+  return fromISODateOrUndefined(value as ISODate | undefined);
+}
+
+export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
   const {
     mode = "single",
     weekStartsOn = 0,
@@ -37,11 +61,62 @@ export const DatePicker = (props: DatePickerProps) => {
   // Open state
   const [open, setOpen] = useState(false);
 
+  // ---------------------------------------------------------------------------
+  // The ISO boundary.
+  //
+  // Props arrive as canonical ISO strings and callbacks emit them; everything
+  // below this block — state, the calendar grid, display formatting — works in
+  // Temporal, exactly as before.
+  //
+  // Each conversion is memoised on the string it derives from. Temporal values
+  // have no value identity, so converting unmemoised would hand CalendarView a
+  // fresh object every render and invalidate its grid memos. Strings compare by
+  // value, which makes this strictly more stable than passing Temporal in.
+  // ---------------------------------------------------------------------------
+
+  const temporalMinDate = useMemo(() => fromISODateOrUndefined(minDate), [minDate]);
+  const temporalMaxDate = useMemo(() => fromISODateOrUndefined(maxDate), [maxDate]);
+  const temporalDisabled = useMemo(() => adaptDisabledDates(disabled), [disabled]);
+
+  const temporalPresets = useMemo(() => {
+    if (!presets) return undefined;
+    if (mode === "single") {
+      return (presets as PresetOption<ISODate>[]).map((preset) => ({ label: preset.label, value: fromISODate(preset.value) }));
+    }
+    if (mode === "multiple") {
+      return (presets as PresetOption<ISODate[]>[]).map((preset) => ({ label: preset.label, value: preset.value.map(fromISODate) }));
+    }
+    return (presets as PresetOption<ISODateRange>[]).map((preset) => ({
+      label: preset.label,
+      value: fromISODateRange(preset.value) ?? { from: undefined, to: undefined },
+    }));
+  }, [mode, presets]);
+
+  const temporalValue = useMemo(() => toTemporal(mode, value), [mode, value]);
+  // Read once, on mount, by useControllableState's useState initialiser.
+  const temporalDefaultValue = useMemo(() => toTemporal(mode, defaultValue), [mode, defaultValue]);
+
+  const handleChange = useCallback(
+    (next: InternalValue) => {
+      if (!onChange) return;
+      if (mode === "single") {
+        (onChange as (date: ISODate | undefined) => void)(toISODateOrUndefined(next as Temporal.PlainDate | undefined));
+        return;
+      }
+      if (mode === "multiple") {
+        (onChange as (dates: ISODate[]) => void)(((next as Temporal.PlainDate[] | undefined) ?? []).map(toISODate));
+        return;
+      }
+      (onChange as (range: ISODateRange | undefined) => void)(toISODateRange(next as DateRangeValue | undefined));
+    },
+    [mode, onChange]
+  );
+
   // Controllable value state (external/committed value)
-  const [committedValue, setCommittedValue] = useControllableState({
-    value: value as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined,
-    defaultValue: defaultValue as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined,
-    onChange: onChange as ((value: Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined) => void) | undefined,
+  const [committedValue, setCommittedValue] = useControllableState<InternalValue>({
+    value: temporalValue,
+    defaultValue: temporalDefaultValue,
+    onChange: handleChange,
   });
 
   // Draft value (internal state while popup is open)
@@ -147,7 +222,7 @@ export const DatePicker = (props: DatePickerProps) => {
   return (
     <>
       {/* Trigger Input */}
-      <div className={cn("relative flex items-center", mode === "range" && "min-w-91.25", mode !== "range" && "min-w-65")}>
+      <div ref={ref} className={cn("relative flex items-center", mode === "range" && "min-w-91.25", mode !== "range" && "min-w-65")}>
         <CalendarIcon className="pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" />
         <input
           ref={refs.setReference as React.Ref<HTMLInputElement>}
@@ -211,17 +286,17 @@ export const DatePicker = (props: DatePickerProps) => {
             {...getFloatingProps()}
           >
             {/* @ts-expect-error - TypeScript can't properly narrow discriminated union props across component boundaries */}
-            <Calendar
+            <CalendarView
               mode={mode}
               value={draftValue}
               onSelect={setDraftValue}
               month={month}
               onMonthChange={setMonth}
-              minDate={minDate}
-              maxDate={maxDate}
-              disabled={disabled}
+              minDate={temporalMinDate}
+              maxDate={temporalMaxDate}
+              disabled={temporalDisabled}
               weekStartsOn={weekStartsOn}
-              presets={presets}
+              presets={temporalPresets}
               showFooter
               showToday={mode !== "range"}
               onApply={handleApply}
@@ -233,4 +308,5 @@ export const DatePicker = (props: DatePickerProps) => {
       )}
     </>
   );
-};
+});
+DatePicker.displayName = "DatePicker";

package/src/components/DatePicker/datepicker.types.ts

@@ -1,44 +1,43 @@
 /**
- * DatePicker types
+ * DatePicker types.
  *
- * All date values use Temporal.PlainDate at the component boundary.
- * This provides type safety and semantic clarity about what kind of date is expected.
+ * All date values at the public boundary are canonical ISO 8601 strings
+ * (`"2026-08-26"`). Temporal is an implementation detail of the calendar grid;
+ * the `*Internal` types below describe that layer and are not exported from
+ * `./index.ts`.
  */
 
-import type { Temporal, WeekStartsOn } from "../../date-time";
+import type { DisabledDates, ISODate, ISODateRange, Temporal, TemporalDisabledMatcher, WeekStartsOn } from "../../date-time";
 import type { PresetOption as CalendarPresetOption } from "../Calendar/calendar.types";
 
 // =============================================================================
 // Value Types
 // =============================================================================
 
-/**
- * Date range value for range mode
- */
-export type DateRangeValue = {
-  from: Temporal.PlainDate | undefined;
-  to: Temporal.PlainDate | undefined;
-};
-
 /**
  * Selection mode for the DatePicker
  */
 export type DatePickerMode = "single" | "range" | "multiple";
 
 // =============================================================================
-// Disabled Date Matching
+// Internal (Temporal) types
 // =============================================================================
 
 /**
- * Matchers for disabling dates
+ * Date range value in Temporal terms, used by `datepicker.hooks`.
+ *
+ * The public equivalent is `ISODateRange`.
+ */
+export type DateRangeValue = {
+  from: Temporal.PlainDate | undefined;
+  to: Temporal.PlainDate | undefined;
+};
+
+/**
+ * Temporal-shaped disabled matchers, produced from the public
+ * {@link DisabledDates} by `adaptDisabledDates`.
  */
-export type DisabledDateMatcher =
-  | Temporal.PlainDate // Single date
-  | Temporal.PlainDate[] // Array of dates
-  | ((date: Temporal.PlainDate) => boolean) // Custom function
-  | { before: Temporal.PlainDate } // All dates before
-  | { after: Temporal.PlainDate } // All dates after
-  | { from: Temporal.PlainDate; to: Temporal.PlainDate }; // Date range
+export type DisabledDateMatcher = TemporalDisabledMatcher;
 
 // =============================================================================
 // Props (discriminated union by mode)
@@ -48,14 +47,14 @@ type DatePickerBaseProps = {
   /** First day of week (0 = Sunday, 1 = Monday) */
   weekStartsOn?: WeekStartsOn;
 
-  /** Minimum selectable date */
-  minDate?: Temporal.PlainDate;
+  /** Earliest selectable date, inclusive */
+  minDate?: ISODate;
 
-  /** Maximum selectable date */
-  maxDate?: Temporal.PlainDate;
+  /** Latest selectable date, inclusive */
+  maxDate?: ISODate;
 
-  /** Disabled dates */
-  disabled?: DisabledDateMatcher | DisabledDateMatcher[];
+  /** Which dates to refuse. See `DisabledDates`. */
+  disabled?: DisabledDates | DisabledDates[];
 
   /** Placeholder text */
   placeholder?: string;
@@ -82,39 +81,39 @@ type DatePickerBaseProps = {
 export type DatePickerSingleProps = DatePickerBaseProps & {
   mode?: "single";
   /** Controlled value */
-  value?: Temporal.PlainDate | undefined;
+  value?: ISODate | undefined;
   /** Default value for uncontrolled mode */
-  defaultValue?: Temporal.PlainDate | undefined;
+  defaultValue?: ISODate | undefined;
   /** Called when date changes */
-  onChange?: (date: Temporal.PlainDate | undefined) => void;
+  onChange?: (date: ISODate | undefined) => void;
   /** Preset options (shown in left sidebar) */
-  presets?: CalendarPresetOption<Temporal.PlainDate>[];
+  presets?: CalendarPresetOption<ISODate>[];
 };
 
 export type DatePickerRangeProps = DatePickerBaseProps & {
   mode: "range";
   /** Controlled value */
-  value?: DateRangeValue | undefined;
+  value?: ISODateRange | undefined;
   /** Default value for uncontrolled mode */
-  defaultValue?: DateRangeValue | undefined;
+  defaultValue?: ISODateRange | undefined;
   /** Called when range changes */
-  onChange?: (range: DateRangeValue | undefined) => void;
+  onChange?: (range: ISODateRange | undefined) => void;
   /** Preset options (shown in left sidebar) */
-  presets?: CalendarPresetOption<DateRangeValue>[];
+  presets?: CalendarPresetOption<ISODateRange>[];
 };
 
 export type DatePickerMultipleProps = DatePickerBaseProps & {
   mode: "multiple";
   /** Controlled value (array of dates) */
-  value?: Temporal.PlainDate[] | undefined;
+  value?: ISODate[] | undefined;
   /** Default value for uncontrolled mode */
-  defaultValue?: Temporal.PlainDate[] | undefined;
+  defaultValue?: ISODate[] | undefined;
   /** Called when selection changes */
-  onChange?: (dates: Temporal.PlainDate[]) => void;
+  onChange?: (dates: ISODate[]) => void;
   /** Maximum number of dates that can be selected */
   max?: number | undefined;
   /** Preset options (shown in left sidebar) */
-  presets?: CalendarPresetOption<Temporal.PlainDate[]>[];
+  presets?: CalendarPresetOption<ISODate[]>[];
 };
 
 /**

package/src/components/DatePicker/index.ts

@@ -1,12 +1,13 @@
-// Note: PresetOption is now exported from Calendar types
+/**
+ * Public surface of `@sixthshift/design-system/date-picker`.
+ *
+ * `DateRangeValue` and `DisabledDateMatcher` used to be exported from here as
+ * Temporal-shaped types. They are now internal; the public equivalents are
+ * `ISODateRange` and `DisabledDates`, re-exported below so a consumer typing
+ * their own range state does not need a second import.
+ */
+
+export type { DisabledDates, ISODate, ISODateRange } from "../../date-time";
 export type { PresetOption } from "../Calendar/calendar.types";
 export { DatePicker } from "./DatePicker";
-export type {
-  DatePickerMode,
-  DatePickerMultipleProps,
-  DatePickerProps,
-  DatePickerRangeProps,
-  DatePickerSingleProps,
-  DateRangeValue,
-  DisabledDateMatcher,
-} from "./datepicker.types";
+export type { DatePickerMode, DatePickerMultipleProps, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps } from "./datepicker.types";

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { useMemo } from "react";
-import { today } from "../../date-time";
+import { addDaysISO, startOfMonthISO, todayISO } from "../../date-time";
 
 import { DatePicker } from "../DatePicker";
 import type { DatePickerRangeProps } from "../DatePicker/datepicker.types";
@@ -14,49 +15,43 @@ function getDefaultPresets(): PresetOption[] {
     {
       label: "Today",
       value: () => {
-        const t = today();
+        const t = todayISO();
         return { from: t, to: t };
       },
     },
     {
       label: "Yesterday",
       value: () => {
-        const yesterday = today().subtract({ days: 1 });
+        const yesterday = addDaysISO(todayISO(), -1);
         return { from: yesterday, to: yesterday };
       },
     },
     {
       label: "Last 7 days",
       value: () => {
-        const t = today();
-        const weekAgo = t.subtract({ days: 6 });
-        return { from: weekAgo, to: t };
+        const t = todayISO();
+        return { from: addDaysISO(t, -6), to: t };
       },
     },
     {
       label: "Last 30 days",
       value: () => {
-        const t = today();
-        const monthAgo = t.subtract({ days: 29 });
-        return { from: monthAgo, to: t };
+        const t = todayISO();
+        return { from: addDaysISO(t, -29), to: t };
       },
     },
     {
       label: "This month",
       value: () => {
-        const t = today();
-        const firstDay = t.with({ day: 1 });
-        return { from: firstDay, to: t };
+        const t = todayISO();
+        return { from: startOfMonthISO(t), to: t };
       },
     },
     {
       label: "Last month",
       value: () => {
-        const t = today();
-        const firstDayThisMonth = t.with({ day: 1 });
-        const lastDayLastMonth = firstDayThisMonth.subtract({ days: 1 });
-        const firstDayLastMonth = lastDayLastMonth.with({ day: 1 });
-        return { from: firstDayLastMonth, to: lastDayLastMonth };
+        const lastDayLastMonth = addDaysISO(startOfMonthISO(todayISO()), -1);
+        return { from: startOfMonthISO(lastDayLastMonth), to: lastDayLastMonth };
       },
     },
   ];
@@ -66,9 +61,9 @@ function getDefaultPresets(): PresetOption[] {
  * DateRangePicker - A specialized date range picker component
  *
  * Wraps DatePicker with mode="range" and adds common range presets.
- * Uses Temporal.PlainDate for all date values.
+ * All date values are canonical ISO 8601 strings ("2026-08-26").
  */
-export const DateRangePicker = (props: DateRangePickerProps) => {
+export const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((props, ref) => {
   const {
     value,
     defaultValue,
@@ -123,5 +118,6 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     ...(clearable !== undefined && { clearable }),
   };
 
-  return <DatePicker {...(datePickerProps as DatePickerRangeProps)} />;
-};
+  return <DatePicker ref={ref} {...(datePickerProps as DatePickerRangeProps)} />;
+});
+DateRangePicker.displayName = "DateRangePicker";

package/src/components/DateRangePicker/daterangepicker.types.ts

@@ -1,33 +1,33 @@
-import type { Temporal, WeekStartsOn } from "../../date-time";
-
-export type DateRangeValue = {
-  from: Temporal.PlainDate | undefined;
-  to: Temporal.PlainDate | undefined;
-};
-
+/**
+ * DateRangePicker types.
+ *
+ * All values at the public boundary are canonical ISO 8601 date strings
+ * (`"2026-08-26"`).
+ */
+
+import type { DisabledDates, ISODate, ISODateRange, WeekStartsOn } from "../../date-time";
+
+/**
+ * A preset range.
+ *
+ * The value is a function so that relative ranges ("Last 7 days") are computed
+ * when the picker renders rather than when the preset list is defined.
+ */
 export type PresetOption = {
   label: string;
-  value: () => DateRangeValue;
+  value: () => ISODateRange;
 };
 
-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 DateRangePickerProps = {
   // Value (controlled/uncontrolled)
-  value?: DateRangeValue;
-  defaultValue?: DateRangeValue;
-  onChange?: (range: DateRangeValue | undefined) => void;
+  value?: ISODateRange;
+  defaultValue?: ISODateRange;
+  onChange?: (range: ISODateRange | undefined) => void;
 
   // Constraints
-  minDate?: Temporal.PlainDate;
-  maxDate?: Temporal.PlainDate;
-  disabled?: DisabledDateMatcher | DisabledDateMatcher[];
+  minDate?: ISODate;
+  maxDate?: ISODate;
+  disabled?: DisabledDates | DisabledDates[];
 
   // Presets
   presets?: PresetOption[];

package/src/components/DateRangePicker/index.ts

@@ -1,2 +1,10 @@
+/**
+ * Public surface of `@sixthshift/design-system/date-range-picker`.
+ *
+ * `DateRangeValue` and `DisabledDateMatcher` were Temporal-shaped and are gone;
+ * the ISO equivalents `ISODateRange` and `DisabledDates` are re-exported here.
+ */
+
+export type { DisabledDates, ISODate, ISODateRange } from "../../date-time";
 export { DateRangePicker } from "./DateRangePicker";
-export type { DateRangePickerProps, DateRangeValue, DisabledDateMatcher, PresetOption } from "./daterangepicker.types";
+export type { DateRangePickerProps, PresetOption } from "./daterangepicker.types";

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -2,12 +2,20 @@ import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss,
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import { Clock, X } from "lucide-react";
-import type * as React from "react";
-import { useCallback, useId, useState } from "react";
-import { Temporal, today } from "../../date-time";
+import * as React from "react";
+import { useCallback, useId, useMemo, useState } from "react";
+import {
+  adaptDisabledDates,
+  fromISODateOrUndefined,
+  fromISOInstantOrUndefined,
+  fromISOTimeOrUndefined,
+  Temporal,
+  today,
+  toISOInstantOrUndefined,
+} from "../../date-time";
 
 import { Button } from "../Button";
-import { Calendar } from "../Calendar";
+import { CalendarView } from "../Calendar/CalendarView";
 import { Separator } from "../Separator";
 import { PeriodSelector } from "../TimePicker/PeriodSelector";
 import { TimeColumn } from "../TimePicker/TimeColumn";
@@ -59,9 +67,9 @@ function formatInstantDisplay(instant: Temporal.Instant, clockFormat: "12h" | "2
  * DateTimePicker - A component for selecting both date and time
  *
  * Combines date and time selection in a single popup with side-by-side layout.
- * Uses Temporal.Instant for all values (timezone-aware).
+ * Values cross the boundary as canonical UTC instant strings.
  */
-export const DateTimePicker = (props: DateTimePickerProps) => {
+export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>((props, ref) => {
   const {
     value,
     defaultValue,
@@ -87,11 +95,30 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
   // Open state
   const [open, setOpen] = useState(false);
 
+  // ---------------------------------------------------------------------------
+  // The ISO boundary.
+  //
+  // The value crosses as a canonical UTC instant string; constraints cross as
+  // ISO dates and times. Below this block everything is Temporal, exactly as
+  // before. Each conversion is memoised on its source string so the Temporal
+  // values stay referentially stable across renders.
+  // ---------------------------------------------------------------------------
+
+  const temporalValue = useMemo(() => fromISOInstantOrUndefined(value), [value]);
+  const temporalDefaultValue = useMemo(() => fromISOInstantOrUndefined(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: Temporal.Instant | undefined) => onChange?.(toISOInstantOrUndefined(next)), [onChange]);
+
   // Controllable value state (external/committed value)
-  const [committedValue, setCommittedValue] = useControllableState({
-    value,
-    defaultValue,
-    onChange,
+  const [committedValue, setCommittedValue] = useControllableState<Temporal.Instant | undefined>({
+    value: temporalValue,
+    defaultValue: temporalDefaultValue,
+    onChange: handleChange,
   });
 
   // Draft state (date + time parts)
@@ -250,15 +277,15 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
   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 items-center">
+      <div ref={ref} className="relative flex items-center">
         <Clock className="pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" />
         <input
           ref={refs.setReference as React.Ref<HTMLInputElement>}
@@ -310,15 +337,15 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
           >
             <div className="flex gap-4">
               {/* Date Calendar (left side) */}
-              <Calendar
+              <CalendarView
                 mode="single"
                 value={draftDate}
                 onSelect={setDraftDate as (date: Temporal.PlainDate | undefined) => void}
                 month={month}
                 onMonthChange={setMonth}
-                minDate={minDate}
-                maxDate={maxDate}
-                disabled={disabledDates}
+                minDate={temporalMinDate}
+                maxDate={temporalMaxDate}
+                disabled={temporalDisabledDates}
                 weekStartsOn={weekStartsOn}
                 showFooter={false}
               />
@@ -396,4 +423,5 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
       )}
     </>
   );
-};
+});
+DateTimePicker.displayName = "DateTimePicker";