myoperator-mcp 0.2.328 → 0.2.330

package/dist/index.js

@@ -2520,17 +2520,10 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, Clock2, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
 
 const DEFAULT_START_TIME = "10:30:00";
 const DEFAULT_END_TIME = "12:30:00";
-const DEFAULT_PLACEHOLDER = "--/--/-- -- : --";
+const DEFAULT_PLACEHOLDER = "--/--/---- --:-- --";
 const POPOVER_WIDTH = 336;
 const POPOVER_MARGIN = 8;
 const POPOVER_GAP = 4;
@@ -2540,23 +2533,8 @@ const POPOVER_WIDTH_VAR = "--date-time-picker-popover-width";
 const CALENDAR_PLACEMENT: Placement = "bottom-start";
 const YEAR_RANGE_BEFORE = 100;
 const YEAR_RANGE_AFTER = 10;
-const CALENDAR_SELECT_CONTENT_SELECTOR =
-  "[data-date-time-picker-calendar-select]";
-const CALENDAR_SELECT_TRIGGER_SELECTOR =
-  "[data-date-time-picker-calendar-select-trigger]";
-const CALENDAR_SELECT_TRIGGER_CLASS = "!w-[90px] !min-w-[90px] !gap-[6px] !px-3";
-const CALENDAR_SELECT_CONTENT_CLASS =
-  "z-[10060] w-[var(--radix-select-trigger-width)] min-w-[var(--radix-select-trigger-width)] max-h-[min(16rem,var(--radix-select-content-available-height))]";
-type CalendarSelect = "month" | "year";
-const DATE_TIME_INPUT_SEGMENT_RANGES = {
-  day: [0, 2],
-  month: [3, 5],
-  year: [6, 10],
-  hour: [11, 13],
-  minute: [14, 16],
-  meridiem: [17, 19],
-} as const;
-
+const CALENDAR_DROPDOWN_TRIGGER_CLASS =
+  "h-9 min-w-[90px] rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary px-3 text-sm text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]";
 const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 const monthNames = Array.from({ length: 12 }, (_, monthIndex) =>
   new Intl.DateTimeFormat("en-US", { month: "short" }).format(
@@ -2570,6 +2548,11 @@ const monthFormatter = new Intl.DateTimeFormat("en-US", {
 
 const dateTimePickerVariants = cva("relative inline-block w-full max-w-full", {
   variants: {
+    variant: {
+      "date-time": "",
+      "date-only": "",
+      "time-only": "",
+    },
     size: {
       sm: "sm:w-[280px]",
       default: "sm:w-[336px]",
@@ -2577,6 +2560,7 @@ const dateTimePickerVariants = cva("relative inline-block w-full max-w-full", {
     },
   },
   defaultVariants: {
+    variant: "date-time",
     size: "default",
   },
 });
@@ -2622,6 +2606,7 @@ export interface DateTimePickerProps
   readOnly?: boolean;
   name?: string;
   showEndTime?: boolean;
+  showSeconds?: boolean;
   showClear?: boolean;
   closeOnSelect?: boolean;
   startTimeLabel?: string;
@@ -2635,6 +2620,17 @@ export interface DateTimePickerProps
   portalContainer?: HTMLElement | null;
 }
 
+type DateTimePickerVariant = NonNullable<
+  VariantProps<typeof dateTimePickerVariants>["variant"]
+>;
+type CalendarDropdownKind = "month" | "year";
+
+interface CalendarDropdownOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
 function normalizeValue(
   value?: Partial<DateTimePickerValue>
 ): DateTimePickerValue {
@@ -2694,6 +2690,13 @@ function clampMonth(date: Date, minDate?: Date, maxDate?: Date) {
   return startOfMonth(date);
 }
 
+function isSelectableDay(date: Date, minDate?: Date, maxDate?: Date) {
+  return (
+    !(minDate && isBeforeDay(date, minDate)) &&
+    !(maxDate && isAfterDay(date, maxDate))
+  );
+}
+
 function getYearOptions(visibleMonth: Date, minDate?: Date, maxDate?: Date) {
   const currentYear = new Date().getFullYear();
   const selectedYear = visibleMonth.getFullYear();
@@ -2742,32 +2745,84 @@ function isPointerInsideElement(
   return false;
 }
 
-function isPointerInsideSelector(event: MouseEvent, selector: string) {
-  const target = event.target;
-
-  return target instanceof Element && target.closest(selector) !== null;
+function timeHasVisibleSeconds(time?: string) {
+  const [, , second = "00"] = (time ?? "").split(":");
+  return /^\\d{1,2}$/.test(second) && Number(second) !== 0;
 }
 
-function formatTimeForDisplay(time: string) {
-  const [hour = "0", minute = "0"] = time.split(":");
+function formatTimeForDisplay(time: string, showSeconds = false) {
+  const [hour = "0", minute = "0", second = "00"] = time.split(":");
   const hourNumber = Number(hour);
   const suffix = hourNumber >= 12 ? "PM" : "AM";
   const hour12 = hourNumber % 12 || 12;
+  const normalizedSecond = second.padStart(2, "0");
+  const formattedTime = showSeconds
+    ? \`\${hour12.toString().padStart(2, "0")}:\${minute.padStart(2, "0")}:\${normalizedSecond}\`
+    : \`\${hour12.toString().padStart(2, "0")}:\${minute.padStart(2, "0")}\`;
 
-  return \`\${hour12.toString().padStart(2, "0")}:\${minute.padStart(2, "0")} \${suffix}\`;
+  return \`\${formattedTime} \${suffix}\`;
 }
 
-function formatDateForDisplay(date?: Date, time?: string) {
+function formatDateForDisplay(date?: Date, time?: string, showSeconds = false) {
   if (!date) return "";
 
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
   const day = date.getDate().toString().padStart(2, "0");
   const year = date.getFullYear();
-  const formattedTime = formatTimeForDisplay(time ?? DEFAULT_START_TIME);
+  const formattedTime = formatTimeForDisplay(
+    time ?? DEFAULT_START_TIME,
+    showSeconds
+  );
 
   return \`\${day}/\${month}/\${year} \${formattedTime}\`;
 }
 
+function formatDateOnlyForDisplay(date?: Date) {
+  if (!date) return "";
+
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  const year = date.getFullYear();
+
+  return \`\${day}/\${month}/\${year}\`;
+}
+
+function formatValueForDisplay(
+  value: DateTimePickerValue,
+  variant: DateTimePickerVariant,
+  showEndTime: boolean,
+  hasTimeValue: boolean,
+  showSeconds: boolean
+) {
+  if (variant === "date-only") {
+    return formatDateOnlyForDisplay(value.date);
+  }
+
+  if (variant === "time-only") {
+    if (!hasTimeValue) return "";
+
+    return showEndTime
+      ? \`\${formatTimeForDisplay(value.startTime, showSeconds)} - \${formatTimeForDisplay(value.endTime, showSeconds)}\`
+      : formatTimeForDisplay(value.startTime, showSeconds);
+  }
+
+  return formatDateForDisplay(value.date, value.startTime, showSeconds);
+}
+
+function getDefaultPlaceholder(
+  variant: DateTimePickerVariant,
+  showSeconds: boolean
+) {
+  if (variant === "date-only") return "--/--/----";
+  if (variant === "time-only") {
+    return showSeconds ? "--:--:-- --" : "--:-- --";
+  }
+
+  if (showSeconds) return "--/--/---- --:--:-- --";
+
+  return DEFAULT_PLACEHOLDER;
+}
+
 function parseDatePart(datePart: string) {
   const isoMatch = datePart.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);
   const dayFirstMatch = datePart.match(/^(\\d{1,2})[/-](\\d{1,2})[/-](\\d{4})$/);
@@ -2979,16 +3034,20 @@ function splitTypedDateInput(value: string) {
   };
 }
 
-function isPotentiallyValidTimeDigits(timeDigits: string) {
+function isPotentiallyValidTimeDigits(timeDigits: string, showSeconds: boolean) {
   const hourValue = timeDigits.slice(0, 2);
   const minuteValue = timeDigits.slice(2, 4);
+  const secondValue = showSeconds ? timeDigits.slice(4, 6) : "";
   const hour = Number(hourValue);
   const minute = Number(minuteValue);
+  const second = Number(secondValue);
 
   if (hourValue.length === 1 && hour > 1) return false;
   if (hourValue.length === 2 && (hour < 1 || hour > 12)) return false;
   if (minuteValue.length === 1 && minute > 5) return false;
   if (minuteValue.length === 2 && minute > 59) return false;
+  if (showSeconds && secondValue.length === 1 && second > 5) return false;
+  if (showSeconds && secondValue.length === 2 && second > 59) return false;
 
   return true;
 }
@@ -3001,26 +3060,65 @@ function formatMeridiemInput(letters: string) {
   return null;
 }
 
-function formatTimeInput(restValue: string) {
+function formatTimeInput(restValue: string, showSeconds: boolean) {
   const normalizedValue = restValue.toUpperCase();
-  const timeDigits = normalizedValue.replace(/\\D/g, "").slice(0, 4);
+  const maxTimeDigits = showSeconds ? 6 : 4;
+  const timeDigits = normalizedValue.replace(/\\D/g, "").slice(0, maxTimeDigits);
   const meridiemLetters = normalizedValue.replace(/[^A-Z]/g, "");
   const meridiem = formatMeridiemInput(meridiemLetters.slice(0, 2));
 
   if (!timeDigits && !meridiem) return "";
-  if (!isPotentiallyValidTimeDigits(timeDigits) || meridiem === null) {
+  if (!isPotentiallyValidTimeDigits(timeDigits, showSeconds) || meridiem === null) {
     return null;
   }
 
-  const timeValue =
-    timeDigits.length <= 2
-      ? timeDigits
-      : \`\${timeDigits.slice(0, 2)}:\${timeDigits.slice(2, 4)}\`;
+  let timeValue = timeDigits.slice(0, 2);
+  if (timeDigits.length > 2) {
+    timeValue = \`\${timeValue}:\${timeDigits.slice(2, 4)}\`;
+  }
+  if (showSeconds && timeDigits.length > 4) {
+    timeValue = \`\${timeValue}:\${timeDigits.slice(4, 6)}\`;
+  }
 
   return [timeValue, meridiem].filter(Boolean).join(" ");
 }
 
-function sanitizeTypedDateTimeInput(value: string, previousValue: string) {
+function sanitizeTypedDateInput(value: string, previousValue: string) {
+  const trimmedValue = value.trimStart();
+  if (/^[A-Za-z]/.test(trimmedValue)) return previousValue;
+
+  const normalizedValue = value.toUpperCase().replace(/[^0-9\\s/-]/g, "");
+  const { dateDigits, dateValue, isValid } = splitTypedDateInput(normalizedValue);
+  const limitedDateDigits = dateDigits.slice(0, 8);
+
+  if (!limitedDateDigits) return "";
+  if (!isValid) return previousValue;
+
+  return dateValue;
+}
+
+function sanitizeTypedTimeInput(
+  value: string,
+  previousValue: string,
+  showSeconds: boolean
+) {
+  const trimmedValue = value.trimStart();
+  if (/^[A-Za-z]/.test(trimmedValue) && !/^[AP]/i.test(trimmedValue)) {
+    return previousValue;
+  }
+
+  const normalizedValue = value.toUpperCase().replace(/[^0-9\\s:APM]/g, "");
+  const formattedTime = formatTimeInput(normalizedValue, showSeconds);
+  if (formattedTime === null) return previousValue;
+
+  return formattedTime;
+}
+
+function sanitizeTypedDateTimeInput(
+  value: string,
+  previousValue: string,
+  showSeconds: boolean
+) {
   const trimmedValue = value.trimStart();
   if (/^[A-Za-z]/.test(trimmedValue)) return previousValue;
 
@@ -3034,22 +3132,59 @@ function sanitizeTypedDateTimeInput(value: string, previousValue: string) {
   if (!limitedDateDigits) return "";
   if (!isValid) return previousValue;
 
-  const formattedTime = isComplete ? formatTimeInput(restValue) : "";
+  const formattedTime = isComplete ? formatTimeInput(restValue, showSeconds) : "";
   if (formattedTime === null) return previousValue;
 
   return [dateValue, formattedTime].filter(Boolean).join(" ");
 }
 
-type DateTimeInputSegment = keyof typeof DATE_TIME_INPUT_SEGMENT_RANGES;
-
-function getDateTimeInputSegment(cursorPosition: number): DateTimeInputSegment {
-  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.day[1]) return "day";
-  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.month[1]) return "month";
-  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.year[1]) return "year";
-  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.hour[1]) return "hour";
-  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.minute[1]) {
+type DateTimeInputSegment =
+  | "day"
+  | "month"
+  | "year"
+  | "hour"
+  | "minute"
+  | "second"
+  | "meridiem";
+
+function getDateTimeInputSegmentRanges(showSeconds: boolean) {
+  return showSeconds
+    ? ({
+        day: [0, 2],
+        month: [3, 5],
+        year: [6, 10],
+        hour: [11, 13],
+        minute: [14, 16],
+        second: [17, 19],
+        meridiem: [20, 22],
+      } satisfies Record<DateTimeInputSegment, readonly [number, number]>)
+    : ({
+        day: [0, 2],
+        month: [3, 5],
+        year: [6, 10],
+        hour: [11, 13],
+        minute: [14, 16],
+        second: [17, 19],
+        meridiem: [17, 19],
+      } satisfies Record<DateTimeInputSegment, readonly [number, number]>);
+}
+
+function getDateTimeInputSegment(
+  cursorPosition: number,
+  showSeconds: boolean
+): DateTimeInputSegment {
+  const ranges = getDateTimeInputSegmentRanges(showSeconds);
+
+  if (cursorPosition <= ranges.day[1]) return "day";
+  if (cursorPosition <= ranges.month[1]) return "month";
+  if (cursorPosition <= ranges.year[1]) return "year";
+  if (cursorPosition <= ranges.hour[1]) return "hour";
+  if (cursorPosition <= ranges.minute[1]) {
     return "minute";
   }
+  if (showSeconds && cursorPosition <= ranges.second[1]) {
+    return "second";
+  }
 
   return "meridiem";
 }
@@ -3062,12 +3197,13 @@ function stepDateTimeInputValue(
   value: string,
   cursorPosition: number,
   direction: 1 | -1,
-  fallbackTime: string
+  fallbackTime: string,
+  showSeconds: boolean
 ) {
   const typedDateTime = parseTypedDateTime(value);
   if (!typedDateTime) return null;
 
-  const segment = getDateTimeInputSegment(cursorPosition);
+  const segment = getDateTimeInputSegment(cursorPosition, showSeconds);
   const nextDate = new Date(typedDateTime.date);
   const [hourValue = "0", minuteValue = "0", secondValue = "00"] = (
     typedDateTime.startTime ?? fallbackTime
@@ -3104,6 +3240,8 @@ function stepDateTimeInputValue(
     nextDate.setHours(nextDate.getHours() + direction);
   } else if (segment === "minute") {
     nextDate.setMinutes(nextDate.getMinutes() + direction);
+  } else if (segment === "second") {
+    nextDate.setSeconds(nextDate.getSeconds() + direction);
   } else {
     nextDate.setHours(nextDate.getHours() + 12 * direction);
   }
@@ -3126,6 +3264,34 @@ function stepDateTimeInputValue(
   };
 }
 
+function formatTimeForTimeInput(time: string, showSeconds: boolean) {
+  const normalizedTime = parseTimePart(time) ?? DEFAULT_START_TIME;
+  const [hour = "00", minute = "00", second = "00"] = normalizedTime.split(":");
+
+  return showSeconds ? \`\${hour}:\${minute}:\${second}\` : \`\${hour}:\${minute}\`;
+}
+
+function normalizeTimeInputValue(time: string, fallbackTime: string) {
+  return parseTimePart(time) ?? parseTimePart(fallbackTime) ?? DEFAULT_START_TIME;
+}
+
+function openNativeTimePicker(input: HTMLInputElement | null) {
+  if (!input) return;
+
+  input.focus();
+
+  const showPicker = (
+    input as HTMLInputElement & { showPicker?: () => void }
+  ).showPicker;
+  if (!showPicker) return;
+
+  try {
+    showPicker.call(input);
+  } catch {
+    input.focus();
+  }
+}
+
 function parseTypedDateTime(value: string) {
   const typedValue = value.trim();
   if (!typedValue) return undefined;
@@ -3144,9 +3310,40 @@ function parseTypedDateTime(value: string) {
   return { date, startTime };
 }
 
-function formatHiddenValue(value: DateTimePickerValue) {
+function parseTypedDate(value: string) {
+  const typedValue = value.trim();
+  if (!typedValue) return undefined;
+
+  const typedMatch = typedValue.match(
+    /^(\\d{4}-\\d{1,2}-\\d{1,2}|\\d{1,2}[/-]\\d{1,2}[/-]\\d{4})$/
+  );
+  if (!typedMatch) return null;
+
+  return parseDatePart(typedValue);
+}
+
+function formatHiddenValue(
+  value: DateTimePickerValue,
+  variant: DateTimePickerVariant,
+  showEndTime: boolean,
+  hasTimeValue: boolean
+) {
+  if (variant === "time-only") {
+    if (!hasTimeValue) return "";
+
+    return showEndTime ? \`\${value.startTime}/\${value.endTime}\` : value.startTime;
+  }
+
   if (!value.date) return "";
 
+  if (variant === "date-only") {
+    const month = (value.date.getMonth() + 1).toString().padStart(2, "0");
+    const day = value.date.getDate().toString().padStart(2, "0");
+    const year = value.date.getFullYear();
+
+    return \`\${year}-\${month}-\${day}\`;
+  }
+
   const month = (value.date.getMonth() + 1).toString().padStart(2, "0");
   const day = value.date.getDate().toString().padStart(2, "0");
   const year = value.date.getFullYear();
@@ -3174,20 +3371,101 @@ function FigmaCalendarIcon({ className }: { className?: string }) {
   );
 }
 
+function CalendarDropdown({
+  id,
+  label,
+  value,
+  options,
+  open,
+  onOpenChange,
+  onValueChange,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  options: CalendarDropdownOption[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onValueChange: (value: string) => void;
+}) {
+  const selectedOption = options.find((option) => option.value === value);
+
+  return (
+    <div className="relative">
+      <label className="sr-only" htmlFor={id}>
+        {label}
+      </label>
+      <button
+        id={id}
+        type="button"
+        role="combobox"
+        aria-label={label}
+        aria-expanded={open}
+        aria-controls={\`\${id}-options\`}
+        data-value={value}
+        className={cn(
+          CALENDAR_DROPDOWN_TRIGGER_CLASS,
+          "inline-flex items-center justify-between gap-2"
+        )}
+        onClick={() => onOpenChange(!open)}
+      >
+        <span>{selectedOption?.label ?? value}</span>
+        <ChevronRight
+          className={cn("size-3 transition-transform", open && "-rotate-90")}
+          aria-hidden="true"
+        />
+      </button>
+      {open && (
+        <div
+          id={\`\${id}-options\`}
+          role="listbox"
+          aria-label={\`\${label} options\`}
+          className="absolute left-0 top-full z-10 mt-1 max-h-52 min-w-full overflow-y-auto rounded-md border border-solid border-semantic-border-layout bg-semantic-bg-primary p-1 shadow-lg"
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              role="option"
+              aria-label={option.label}
+              aria-selected={option.value === value}
+              disabled={option.disabled}
+              className={cn(
+                "flex w-full items-center rounded px-2 py-1.5 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover disabled:cursor-not-allowed disabled:opacity-40",
+                option.value === value && "bg-semantic-primary text-semantic-text-inverted"
+              )}
+              onClick={() => {
+                if (option.disabled) return;
+
+                onValueChange(option.value);
+                onOpenChange(false);
+              }}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
   (
     {
       className,
+      variant,
       size,
       state,
       value,
       defaultValue,
       onValueChange,
-      placeholder = DEFAULT_PLACEHOLDER,
+      placeholder: placeholderProp,
       disabled = false,
       readOnly = false,
       name,
       showEndTime = true,
+      showSeconds,
       showClear = true,
       closeOnSelect = false,
       startTimeLabel = "Start Time",
@@ -3206,28 +3484,52 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
   ) => {
     const generatedId = React.useId();
     const triggerId = id ?? generatedId;
+    const pickerVariant = variant ?? "date-time";
+    const showCalendar = pickerVariant !== "time-only";
+    const showTimeFields = pickerVariant !== "date-only";
+    const resolvedShowEndTime = showTimeFields && showEndTime;
     const isValueControlled = value !== undefined;
     const isOpenControlled = controlledOpen !== undefined;
     const [internalValue, setInternalValue] = React.useState(() =>
       normalizeValue(defaultValue)
     );
+    const [internalHasTimeValue, setInternalHasTimeValue] = React.useState(() =>
+      Boolean(defaultValue?.date || defaultValue?.startTime || defaultValue?.endTime)
+    );
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
     const currentValue = normalizeValue(
       isValueControlled ? value : internalValue
     );
+    const hasTimeValue = isValueControlled
+      ? Boolean(value?.date || value?.startTime || value?.endTime)
+      : internalHasTimeValue;
+    const resolvedShowSeconds =
+      showSeconds ??
+      (timeHasVisibleSeconds(currentValue.startTime) ||
+        (resolvedShowEndTime && timeHasVisibleSeconds(currentValue.endTime)));
+    const placeholder =
+      placeholderProp ?? getDefaultPlaceholder(pickerVariant, resolvedShowSeconds);
     const open = isOpenControlled ? controlledOpen : internalOpen;
     const [visibleMonth, setVisibleMonth] = React.useState(() =>
       startOfMonth(currentValue.date ?? new Date())
     );
     const [dateInputValue, setDateInputValue] = React.useState(() =>
-      formatDateForDisplay(currentValue.date, currentValue.startTime)
+      formatValueForDisplay(
+        currentValue,
+        pickerVariant,
+        resolvedShowEndTime,
+        hasTimeValue,
+        resolvedShowSeconds
+      )
     );
     const [isDateInputFocused, setIsDateInputFocused] = React.useState(false);
-    const [openCalendarSelect, setOpenCalendarSelect] =
-      React.useState<CalendarSelect | null>(null);
     const rootRef = React.useRef<HTMLDivElement | null>(null);
     const triggerRef = React.useRef<HTMLDivElement | null>(null);
     const popoverRef = React.useRef<HTMLDivElement | null>(null);
+    const startTimeInputRef = React.useRef<HTMLInputElement | null>(null);
+    const endTimeInputRef = React.useRef<HTMLInputElement | null>(null);
+    const [openCalendarDropdown, setOpenCalendarDropdown] =
+      React.useState<CalendarDropdownKind | null>(null);
     const usesContainerPortal = portalContainer !== undefined;
     const floatingStrategy: Strategy = usesContainerPortal
       ? "absolute"
@@ -3270,9 +3572,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       () => getCalendarDays(visibleMonth),
       [visibleMonth]
     );
-    const displayValue = formatDateForDisplay(
-      currentValue.date,
-      currentValue.startTime
+    const displayValue = formatValueForDisplay(
+      currentValue,
+      pickerVariant,
+      resolvedShowEndTime,
+      hasTimeValue,
+      resolvedShowSeconds
     );
     const effectiveMinDate = React.useMemo(() => {
       if (!disablePastDates) return minDate;
@@ -3291,12 +3596,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
 
     const setOpen = React.useCallback(
       (nextOpen: boolean) => {
-        if (!isOpenControlled) {
-          setInternalOpen(nextOpen);
+        if (!nextOpen) {
+          setOpenCalendarDropdown(null);
         }
 
-        if (!nextOpen) {
-          setOpenCalendarSelect(null);
+        if (!isOpenControlled) {
+          setInternalOpen(nextOpen);
         }
 
         onOpenChange?.(nextOpen);
@@ -3304,30 +3609,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       [isOpenControlled, onOpenChange]
     );
 
-    const handleCalendarSelectOpenChange = React.useCallback(
-      (select: CalendarSelect, nextOpen: boolean) => {
-        setOpenCalendarSelect((currentSelect) => {
-          if (nextOpen) return select;
-
-          return currentSelect === select ? null : currentSelect;
-        });
-      },
-      []
-    );
-
-    const handleCalendarSelectTriggerPointerDown = React.useCallback(
-      (
-        select: CalendarSelect,
-        event: React.PointerEvent<HTMLButtonElement>
-      ) => {
-        if (openCalendarSelect !== select) return;
-
-        event.preventDefault();
-        setOpenCalendarSelect(null);
-      },
-      [openCalendarSelect]
-    );
-
     const setTriggerRef = React.useCallback(
       (node: HTMLDivElement | null) => {
         triggerRef.current = node;
@@ -3356,29 +3637,20 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       }
     }, [displayValue, isDateInputFocused]);
 
-    React.useEffect(() => {
-      if (!open) {
-        setOpenCalendarSelect(null);
-      }
-    }, [open]);
-
     React.useEffect(() => {
       if (!open) return;
 
       const handlePointerDown = (event: MouseEvent) => {
         if (
           !isPointerInsideElement(event, rootRef.current) &&
-          !isPointerInsideElement(event, popoverRef.current) &&
-          !isPointerInsideSelector(event, CALENDAR_SELECT_CONTENT_SELECTOR)
+          !isPointerInsideElement(event, popoverRef.current)
         ) {
-          setOpenCalendarSelect(null);
           setOpen(false);
         }
       };
 
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === "Escape") {
-          setOpenCalendarSelect(null);
           setOpen(false);
         }
       };
@@ -3393,9 +3665,15 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     }, [open, setOpen]);
 
     const updateValue = React.useCallback(
-      (nextValue: DateTimePickerValue) => {
+      (
+        nextValue: DateTimePickerValue,
+        options?: { hasTimeValue?: boolean }
+      ) => {
         if (!isValueControlled) {
           setInternalValue(nextValue);
+          if (options?.hasTimeValue !== undefined) {
+            setInternalHasTimeValue(options.hasTimeValue);
+          }
         }
 
         onValueChange?.(nextValue);
@@ -3412,7 +3690,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         date: undefined,
         startTime: currentValue.startTime,
         endTime: currentValue.endTime,
-      });
+      }, { hasTimeValue: false });
     };
 
     const yearOptions = React.useMemo(
@@ -3427,12 +3705,134 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       [effectiveMinDate, maxDate]
     );
 
+    const syncCalendarMonthAndValue = React.useCallback(
+      (nextMonth: Date) => {
+        const clampedMonth = clampMonth(nextMonth, effectiveMinDate, maxDate);
+        setVisibleMonth(clampedMonth);
+
+        if (pickerVariant === "time-only" || !currentValue.date) return;
+
+        const selectedDay = currentValue.date.getDate();
+        const daysInTargetMonth = getDaysInMonth(
+          clampedMonth.getFullYear(),
+          clampedMonth.getMonth() + 1
+        );
+
+        if (selectedDay > daysInTargetMonth) {
+          const fallbackDate = new Date(
+            clampedMonth.getFullYear(),
+            clampedMonth.getMonth(),
+            1
+          );
+
+          if (!isSelectableDay(fallbackDate, effectiveMinDate, maxDate)) {
+            updateValue({ ...currentValue, date: undefined });
+            return;
+          }
+
+          updateValue({ ...currentValue, date: fallbackDate });
+          return;
+        }
+
+        const nextSelectedDate = new Date(
+          clampedMonth.getFullYear(),
+          clampedMonth.getMonth(),
+          selectedDay
+        );
+
+        if (!isSelectableDay(nextSelectedDate, effectiveMinDate, maxDate)) {
+          updateValue({ ...currentValue, date: undefined });
+          return;
+        }
+
+        if (!isSameDay(currentValue.date, nextSelectedDate)) {
+          updateValue({ ...currentValue, date: nextSelectedDate });
+        }
+      },
+      [
+        currentValue,
+        effectiveMinDate,
+        maxDate,
+        pickerVariant,
+        updateValue,
+      ]
+    );
+
     const handleTypedDateChange = (
       event: React.ChangeEvent<HTMLInputElement>
     ) => {
+      if (pickerVariant === "time-only") {
+        const nextInputValue = sanitizeTypedTimeInput(
+          event.target.value,
+          dateInputValue,
+          resolvedShowSeconds
+        );
+        setDateInputValue(nextInputValue);
+
+        if (
+          nextInputValue === dateInputValue &&
+          event.target.value !== dateInputValue
+        ) {
+          event.currentTarget.value = nextInputValue;
+          return;
+        }
+
+        const typedTime = parseTimePart(nextInputValue);
+        if (typedTime === undefined) {
+          updateValue({ ...currentValue, date: undefined }, { hasTimeValue: false });
+          return;
+        }
+
+        if (typedTime) {
+          updateValue(
+            {
+              ...currentValue,
+              startTime: typedTime,
+            },
+            { hasTimeValue: true }
+          );
+        }
+
+        return;
+      }
+
+      if (pickerVariant === "date-only") {
+        const nextInputValue = sanitizeTypedDateInput(
+          event.target.value,
+          dateInputValue
+        );
+        setDateInputValue(nextInputValue);
+
+        if (
+          nextInputValue === dateInputValue &&
+          event.target.value !== dateInputValue
+        ) {
+          event.currentTarget.value = nextInputValue;
+          return;
+        }
+
+        const typedDate = parseTypedDate(nextInputValue);
+        if (typedDate === undefined) {
+          updateValue({ ...currentValue, date: undefined });
+          return;
+        }
+
+        if (
+          typedDate &&
+          !(effectiveMinDate && isBeforeDay(typedDate, effectiveMinDate)) &&
+          !(maxDate && isAfterDay(typedDate, maxDate))
+        ) {
+          updateValue({ ...currentValue, date: typedDate });
+          updateVisibleMonth(typedDate);
+        }
+
+        return;
+      }
+
       const nextInputValue = sanitizeTypedDateTimeInput(
         event.target.value,
-        dateInputValue
+        dateInputValue,
+        resolvedShowSeconds
       );
       setDateInputValue(nextInputValue);
 
@@ -3469,6 +3869,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const handleTypedDateKeyDown = (
       event: React.KeyboardEvent<HTMLInputElement>
     ) => {
+      if (pickerVariant === "time-only") return;
       if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
 
       const direction = event.key === "ArrowUp" ? 1 : -1;
@@ -3479,7 +3880,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         dateInputValue,
         cursorPosition,
         direction,
-        currentValue.startTime
+        currentValue.startTime,
+        resolvedShowSeconds
       );
 
       if (!steppedDateTime) return;
@@ -3495,16 +3897,26 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
 
       const nextInputValue = formatDateForDisplay(
         steppedDateTime.date,
-        steppedDateTime.startTime
+        steppedDateTime.startTime,
+        resolvedShowSeconds
       );
+      const dateTimeInputSegmentRanges =
+        getDateTimeInputSegmentRanges(resolvedShowSeconds);
       const [selectionStart, selectionEnd] =
-        DATE_TIME_INPUT_SEGMENT_RANGES[steppedDateTime.segment];
+        dateTimeInputSegmentRanges[steppedDateTime.segment];
+      const resolvedInputValue =
+        pickerVariant === "date-only"
+          ? formatDateOnlyForDisplay(steppedDateTime.date)
+          : nextInputValue;
 
-      setDateInputValue(nextInputValue);
+      setDateInputValue(resolvedInputValue);
       updateValue({
         ...currentValue,
         date: steppedDateTime.date,
-        startTime: steppedDateTime.startTime,
+        startTime:
+          pickerVariant === "date-only"
+            ? currentValue.startTime
+            : steppedDateTime.startTime,
       });
       updateVisibleMonth(steppedDateTime.date);
 
@@ -3516,7 +3928,13 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const handleTypedDateBlur = () => {
       setIsDateInputFocused(false);
       setDateInputValue(
-        formatDateForDisplay(currentValue.date, currentValue.startTime)
+        formatValueForDisplay(
+          currentValue,
+          pickerVariant,
+          resolvedShowEndTime,
+          hasTimeValue,
+          resolvedShowSeconds
+        )
       );
     };
 
@@ -3530,7 +3948,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           ref={setPopoverRef}
           role="dialog"
           aria-modal="false"
-          aria-labelledby={\`\${triggerId}-calendar-heading\`}
+          aria-labelledby={showCalendar ? \`\${triggerId}-calendar-heading\` : undefined}
+          aria-label={showCalendar ? undefined : "Time picker"}
           className={cn(
             "rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-lg flex flex-col min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain pointer-events-auto",
             "[scrollbar-gutter:stable] [scrollbar-width:thin] [scrollbar-color:var(--semantic-border-secondary)_transparent]",
@@ -3545,66 +3964,34 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             zIndex: 10050,
             visibility: isPositioned ? undefined : "hidden",
           }}
-          onPointerDown={(event) => {
-            if (
-              event.target instanceof Element &&
-              !event.target.closest(CALENDAR_SELECT_TRIGGER_SELECTOR)
-            ) {
-              setOpenCalendarSelect(null);
-            }
-
-            event.stopPropagation();
-          }}
+          onPointerDown={(event) => event.stopPropagation()}
           onMouseDown={(event) => event.stopPropagation()}
           onWheel={(event) => event.stopPropagation()}
           onTouchMove={(event) => event.stopPropagation()}
         >
-          <div className="p-3 touch-pan-y">
-            <div className="mb-3 flex items-center justify-between gap-2">
-              <button
-                type="button"
-                aria-label="Previous month"
-                className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
-                onClick={() => updateVisibleMonth(addMonths(visibleMonth, -1))}
-              >
-                <ChevronLeft className="size-4" aria-hidden="true" />
-              </button>
-              <div className="flex min-w-0 items-center gap-1.5">
-                <label className="sr-only" htmlFor={\`\${triggerId}-month\`}>
-                  Month
-                </label>
-                <Select
-                  open={openCalendarSelect === "month"}
-                  onOpenChange={(nextOpen) =>
-                    handleCalendarSelectOpenChange("month", nextOpen)
-                  }
-                  value={visibleMonth.getMonth().toString()}
-                  onValueChange={(nextMonth) =>
-                    updateVisibleMonth(
-                      new Date(
-                        visibleMonth.getFullYear(),
-                        Number(nextMonth),
-                        1
-                      )
-                    )
+          {showCalendar && (
+            <div className="p-3 touch-pan-y">
+              <div className="mb-3 flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  aria-label="Previous month"
+                  className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+                  onClick={() =>
+                    syncCalendarMonthAndValue(addMonths(visibleMonth, -1))
                   }
                 >
-                  <SelectTrigger
+                  <ChevronLeft className="size-4" aria-hidden="true" />
+                </button>
+                <div className="flex min-w-0 items-center gap-1.5">
+                  <CalendarDropdown
                     id={\`\${triggerId}-month\`}
-                    data-date-time-picker-calendar-select-trigger=""
-                    aria-label="Month"
-                    className={CALENDAR_SELECT_TRIGGER_CLASS}
-                  onPointerDown={(event) =>
-                    handleCalendarSelectTriggerPointerDown("month", event)
-                  }
-                  >
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent
-                    data-date-time-picker-calendar-select=""
-                    className={CALENDAR_SELECT_CONTENT_CLASS}
-                  >
-                    {monthNames.map((monthName, monthIndex) => {
+                    label="Month"
+                    value={visibleMonth.getMonth().toString()}
+                    open={openCalendarDropdown === "month"}
+                    onOpenChange={(nextOpen) =>
+                      setOpenCalendarDropdown(nextOpen ? "month" : null)
+                    }
+                    options={monthNames.map((monthName, monthIndex) => {
                       const optionMonth = new Date(
                         visibleMonth.getFullYear(),
                         monthIndex,
@@ -3615,134 +4002,129 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                           isMonthBefore(optionMonth, effectiveMinDate)) ||
                         (maxDate && isMonthAfter(optionMonth, maxDate));
 
-                      return (
-                        <SelectItem
-                          key={monthName}
-                          value={monthIndex.toString()}
-                          disabled={!!isDisabled}
-                        >
-                          {monthName}
-                        </SelectItem>
-                      );
+                      return {
+                        value: monthIndex.toString(),
+                        label: monthName,
+                        disabled: !!isDisabled,
+                      };
                     })}
-                  </SelectContent>
-                </Select>
-                <label className="sr-only" htmlFor={\`\${triggerId}-year\`}>
-                  Year
-                </label>
-                <Select
-                  open={openCalendarSelect === "year"}
-                  onOpenChange={(nextOpen) =>
-                    handleCalendarSelectOpenChange("year", nextOpen)
-                  }
-                  value={visibleMonth.getFullYear().toString()}
-                  onValueChange={(nextYear) =>
-                    updateVisibleMonth(
-                      new Date(
-                        Number(nextYear),
-                        visibleMonth.getMonth(),
-                        1
-                      )
-                    )
-                  }
-                >
-                  <SelectTrigger
+                    onValueChange={(nextMonth) => {
+                      syncCalendarMonthAndValue(
+                        new Date(
+                          visibleMonth.getFullYear(),
+                          Number(nextMonth),
+                          1
+                        )
+                      );
+                    }}
+                  />
+                  <CalendarDropdown
                     id={\`\${triggerId}-year\`}
-                    data-date-time-picker-calendar-select-trigger=""
-                    aria-label="Year"
-                    className={CALENDAR_SELECT_TRIGGER_CLASS}
-                  onPointerDown={(event) =>
-                    handleCalendarSelectTriggerPointerDown("year", event)
-                  }
-                  >
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent
-                    data-date-time-picker-calendar-select=""
-                    className={CALENDAR_SELECT_CONTENT_CLASS}
-                  >
-                    {yearOptions.map((year) => (
-                      <SelectItem key={year} value={year.toString()}>
-                        {year}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <div id={\`\${triggerId}-calendar-heading\`} className="sr-only">
-                  {monthFormatter.format(visibleMonth)}
+                    label="Year"
+                    value={visibleMonth.getFullYear().toString()}
+                    open={openCalendarDropdown === "year"}
+                    onOpenChange={(nextOpen) =>
+                      setOpenCalendarDropdown(nextOpen ? "year" : null)
+                    }
+                    options={yearOptions.map((year) => ({
+                      value: year.toString(),
+                      label: year.toString(),
+                    }))}
+                    onValueChange={(nextYear) => {
+                      syncCalendarMonthAndValue(
+                        new Date(
+                          Number(nextYear),
+                          visibleMonth.getMonth(),
+                          1
+                        )
+                      );
+                    }}
+                  />
+                  <div id={\`\${triggerId}-calendar-heading\`} className="sr-only">
+                    {monthFormatter.format(visibleMonth)}
+                  </div>
                 </div>
-              </div>
-              <button
-                type="button"
-                aria-label="Next month"
-                className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
-                onClick={() => updateVisibleMonth(addMonths(visibleMonth, 1))}
-              >
-                <ChevronRight className="size-4" aria-hidden="true" />
-              </button>
-            </div>
-
-            <div className="grid grid-cols-7">
-              {weekDays.map((day) => (
-                <div
-                  key={day}
-                  className="flex size-8 items-center justify-center text-xs font-medium text-semantic-text-muted"
+                <button
+                  type="button"
+                  aria-label="Next month"
+                  className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+                  onClick={() =>
+                    syncCalendarMonthAndValue(addMonths(visibleMonth, 1))
+                  }
                 >
-                  {day}
-                </div>
-              ))}
-              {calendarDays.map((day) => {
-                const isCurrentMonth =
-                  day.getMonth() === visibleMonth.getMonth();
-                const isSelected = isSameDay(day, currentValue.date);
-                const isToday = isSameDay(day, new Date());
-                const isDisabled =
-                  (effectiveMinDate && isBeforeDay(day, effectiveMinDate)) ||
-                  (maxDate && isAfterDay(day, maxDate));
-                const dayLabel = day.toLocaleDateString("en-US", {
-                  month: "long",
-                  day: "numeric",
-                  year: "numeric",
-                });
-
-                return (
-                  <button
-                    key={day.toISOString()}
-                    type="button"
-                    aria-label={dayLabel}
-                    aria-pressed={isSelected}
-                    aria-current={isToday ? "date" : undefined}
-                    disabled={!!isDisabled}
-                    className={cn(
-                      "relative flex items-center justify-center size-8 mx-auto rounded-full text-xs transition-colors",
-                      isSelected
-                        ? "bg-semantic-primary text-semantic-text-inverted font-semibold"
-                        : isCurrentMonth
-                          ? "text-semantic-text-primary hover:bg-semantic-bg-hover"
-                          : "text-semantic-text-muted hover:bg-semantic-bg-hover",
-                      isDisabled &&
-                        "opacity-40 cursor-not-allowed pointer-events-none"
-                    )}
-                    onClick={() => {
-                      if (isDisabled) return;
+                  <ChevronRight className="size-4" aria-hidden="true" />
+                </button>
+              </div>
 
-                      updateValue({ ...currentValue, date: day });
-                      if (closeOnSelect) {
-                        setOpen(false);
-                      }
-                    }}
+              <div className="grid grid-cols-7">
+                {weekDays.map((day) => (
+                  <div
+                    key={day}
+                    className="flex size-8 items-center justify-center text-xs font-medium text-semantic-text-muted"
                   >
-                    {day.getDate()}
-                    {isToday && !isSelected && (
-                      <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-semantic-primary" />
-                    )}
-                  </button>
-                );
-              })}
+                    {day}
+                  </div>
+                ))}
+                {calendarDays.map((day) => {
+                  const isCurrentMonth =
+                    day.getMonth() === visibleMonth.getMonth();
+                  const isSelected = isSameDay(day, currentValue.date);
+                  const isToday = isSameDay(day, new Date());
+                  const isDisabled =
+                    (effectiveMinDate && isBeforeDay(day, effectiveMinDate)) ||
+                    (maxDate && isAfterDay(day, maxDate));
+                  const dayLabel = day.toLocaleDateString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  });
+
+                  return (
+                    <button
+                      key={day.toISOString()}
+                      type="button"
+                      aria-label={dayLabel}
+                      aria-pressed={isSelected}
+                      aria-current={isToday ? "date" : undefined}
+                      disabled={!!isDisabled}
+                      className={cn(
+                        "relative flex items-center justify-center size-8 mx-auto rounded-full text-xs transition-colors",
+                        isSelected
+                          ? "bg-semantic-primary text-semantic-text-inverted font-semibold"
+                          : isCurrentMonth
+                            ? "text-semantic-text-primary hover:bg-semantic-bg-hover"
+                            : "text-semantic-text-muted hover:bg-semantic-bg-hover",
+                        isDisabled &&
+                          "opacity-40 cursor-not-allowed pointer-events-none"
+                      )}
+                      onClick={() => {
+                        if (isDisabled) return;
+
+                        updateValue({ ...currentValue, date: day });
+                        if (closeOnSelect) {
+                          setOpen(false);
+                        }
+                      }}
+                    >
+                      {day.getDate()}
+                      {isToday && !isSelected && (
+                        <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-semantic-primary" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
             </div>
-          </div>
+          )}
 
-          <div className="space-y-3 border-t border-solid border-semantic-border-layout bg-semantic-bg-primary p-3">
+          {showTimeFields && (
+            <div
+              className={cn(
+                "space-y-3 bg-semantic-bg-primary p-3",
+                showCalendar &&
+                  "border-t border-solid border-semantic-border-layout"
+              )}
+            >
             <div className="flex flex-col gap-1.5">
               <label
                 htmlFor={\`\${triggerId}-start-time\`}
@@ -3750,28 +4132,41 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
               >
                 {startTimeLabel}
               </label>
-              <div className="relative">
+              <div
+                className="relative cursor-pointer"
+                onClick={() => openNativeTimePicker(startTimeInputRef.current)}
+              >
                 <Clock2
                   className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-semantic-text-muted"
                   aria-hidden="true"
                 />
                 <input
+                  ref={startTimeInputRef}
                   id={\`\${triggerId}-start-time\`}
                   type="time"
-                  step="1"
-                  value={currentValue.startTime}
+                  step={resolvedShowSeconds ? "1" : "60"}
+                  value={formatTimeForTimeInput(
+                    currentValue.startTime,
+                    resolvedShowSeconds
+                  )}
                   className="h-8 w-full rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary pl-9 pr-3 text-sm text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
                   onChange={(event) =>
-                    updateValue({
-                      ...currentValue,
-                      startTime: event.target.value,
-                    })
+                    updateValue(
+                      {
+                        ...currentValue,
+                        startTime: normalizeTimeInputValue(
+                          event.target.value,
+                          currentValue.startTime
+                        ),
+                      },
+                      { hasTimeValue: true }
+                    )
                   }
                 />
               </div>
             </div>
 
-            {showEndTime && (
+            {resolvedShowEndTime && (
               <div className="flex flex-col gap-1.5">
                 <label
                   htmlFor={\`\${triggerId}-end-time\`}
@@ -3779,28 +4174,42 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 >
                   {endTimeLabel}
                 </label>
-                <div className="relative">
+                <div
+                  className="relative cursor-pointer"
+                  onClick={() => openNativeTimePicker(endTimeInputRef.current)}
+                >
                   <Clock2
                     className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-semantic-text-muted"
                     aria-hidden="true"
                   />
                   <input
+                    ref={endTimeInputRef}
                     id={\`\${triggerId}-end-time\`}
                     type="time"
-                    step="1"
-                    value={currentValue.endTime}
+                    step={resolvedShowSeconds ? "1" : "60"}
+                    value={formatTimeForTimeInput(
+                      currentValue.endTime,
+                      resolvedShowSeconds
+                    )}
                     className="h-8 w-full rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary pl-9 pr-3 text-sm text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
                     onChange={(event) =>
-                      updateValue({
-                        ...currentValue,
-                        endTime: event.target.value,
-                      })
+                      updateValue(
+                        {
+                          ...currentValue,
+                          endTime: normalizeTimeInputValue(
+                            event.target.value,
+                            currentValue.endTime
+                          ),
+                        },
+                        { hasTimeValue: true }
+                      )
                     }
                   />
                 </div>
               </div>
             )}
-          </div>
+            </div>
+          )}
         </div>,
         portalMount
       );
@@ -3824,7 +4233,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           <input
             type="hidden"
             name={name}
-            value={formatHiddenValue(currentValue)}
+            value={formatHiddenValue(
+              currentValue,
+              pickerVariant,
+              resolvedShowEndTime,
+              hasTimeValue
+            )}
           />
         )}
         <div
@@ -3846,7 +4260,13 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             placeholder={placeholder}
             aria-haspopup="dialog"
             aria-expanded={open}
-            aria-label="Date and time"
+            aria-label={
+              pickerVariant === "date-only"
+                ? "Date"
+                : pickerVariant === "time-only"
+                  ? "Time"
+                  : "Date and time"
+            }
             className="min-w-0 flex-1 bg-transparent text-sm text-semantic-text-primary outline-none placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed read-only:cursor-not-allowed"
             onFocus={() => {
               setIsDateInputFocused(true);
@@ -3870,7 +4290,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           <button
             type="button"
             disabled={disabled || readOnly}
-            aria-label="Open calendar"
+            aria-label={showCalendar ? "Open calendar" : "Open time picker"}
             className="inline-flex shrink-0 items-center justify-center rounded text-semantic-text-muted hover:bg-semantic-bg-hover hover:text-semantic-text-primary disabled:cursor-not-allowed"
             onClick={() => setOpen(!open)}
           >