myoperator-mcp 0.2.381 → 0.2.383

package/dist/index.js

@@ -2736,8 +2736,44 @@ function getCalendarDays(month: Date) {
   });
 }
 
+function isMonthSelectable(
+  year: number,
+  monthIndex: number,
+  minDate?: Date,
+  maxDate?: Date
+) {
+  const firstDay = new Date(year, monthIndex, 1);
+  const lastDay = new Date(year, monthIndex + 1, 0);
+
+  if (minDate && isBeforeDay(lastDay, minDate)) return false;
+  if (maxDate && isAfterDay(firstDay, maxDate)) return false;
+
+  return true;
+}
+
+function clampRange(
+  range: DateRangeValue,
+  minDate?: Date,
+  maxDate?: Date
+): DateRangeValue | null {
+  let { start, end } = range;
+
+  // The window and the preset don't overlap at all \u2014 clamping would collapse
+  // the range onto the boundary day, which is not what the preset means.
+  if (end && minDate && isBeforeDay(end, minDate)) return null;
+  if (start && maxDate && isAfterDay(start, maxDate)) return null;
+
+  if (start && minDate && isBeforeDay(start, minDate)) start = minDate;
+  if (end && maxDate && isAfterDay(end, maxDate)) end = maxDate;
+
+  // The whole preset sits outside the allowed window \u2014 nothing to select.
+  if (start && end && isAfterDay(start, end)) return null;
+
+  return { start, end };
+}
+
 function isPointerInsideElement(
-  event: MouseEvent,
+  event: MouseEvent | PointerEvent,
   element: HTMLElement | null
 ) {
   if (!element) return false;
@@ -2886,6 +2922,11 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
     // start a new one (false). Drives the "click 1 = start, click 2 = end,
     // click 3 = restart" cycle.
     const [pendingEnd, setPendingEnd] = React.useState(false);
+    // Month and year share one slot so opening either closes the other \u2014
+    // two independent uncontrolled menus can otherwise sit open at once.
+    const [openMenu, setOpenMenu] = React.useState<"month" | "year" | null>(
+      null
+    );
     const [visibleMonth, setVisibleMonth] = React.useState(() =>
       startOfMonth(currentValue.start ?? currentValue.end ?? new Date())
     );
@@ -2941,6 +2982,21 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
 
       return isBeforeDay(minDate, today) ? today : minDate;
     }, [disablePastDates, minDate]);
+    // Year list is centred on the visible year but never offers a year that
+    // has no selectable day in it.
+    const yearOptions = React.useMemo(() => {
+      const centre = visibleMonth.getFullYear();
+      const all = Array.from(
+        { length: YEAR_OPTIONS_SPAN * 2 + 1 },
+        (_, index) => centre - YEAR_OPTIONS_SPAN + index
+      );
+
+      return all.filter(
+        (year) =>
+          !(effectiveMinDate && year < effectiveMinDate.getFullYear()) &&
+          !(maxDate && year > maxDate.getFullYear())
+      );
+    }, [visibleMonth, effectiveMinDate, maxDate]);
     const portalMount =
       typeof document !== "undefined"
         ? usesContainerPortal
@@ -2989,6 +3045,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       const latestValue = currentValueRef.current;
       setDraftValue(latestValue);
       setPendingEnd(false);
+      setOpenMenu(null);
       setVisibleMonth(
         startOfMonth(latestValue.start ?? latestValue.end ?? new Date())
       );
@@ -2997,7 +3054,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
     React.useEffect(() => {
       if (!open) return;
 
-      const handlePointerDown = (event: MouseEvent) => {
+      const handlePointerDown = (event: PointerEvent) => {
         if (
           !isPointerInsideElement(event, rootRef.current) &&
           !isPointerInsideElement(event, popoverRef.current)
@@ -3009,14 +3066,17 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === "Escape") {
           setOpen(false);
+          // Escape must hand focus back to the trigger, otherwise focus is
+          // stranded on a node that is about to unmount.
+          triggerRef.current?.focus();
         }
       };
 
-      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("pointerdown", handlePointerDown);
       document.addEventListener("keydown", handleKeyDown);
 
       return () => {
-        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("pointerdown", handlePointerDown);
         document.removeEventListener("keydown", handleKeyDown);
       };
     }, [open, setOpen]);
@@ -3032,10 +3092,21 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       [isValueControlled, onValueChange]
     );
 
+    // Radix dismisses the open menu on the same pointerdown that would toggle
+    // the sibling trigger, so its own toggle is swallowed and switching menus
+    // takes two clicks. Drive the slot from the trigger directly and
+    // preventDefault so Radix's toggle stays out of it.
+    const toggleCalendarMenu = (menu: "month" | "year") => {
+      setOpenMenu((current) => (current === menu ? null : menu));
+    };
+
     const handlePresetClick = (preset: DateRangePreset) => {
-      const range = preset.getRange();
+      const range = clampRange(preset.getRange(), effectiveMinDate, maxDate);
+      if (!range) return;
+
       commitValue(range);
       setOpen(false);
+      triggerRef.current?.focus();
     };
 
     const handleDayClick = (day: Date) => {
@@ -3056,6 +3127,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       setPendingEnd(false);
       commitValue(nextValue);
       setOpen(false);
+      triggerRef.current?.focus();
     };
 
     const popover =
@@ -3087,23 +3159,34 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
           onWheel={(event) => event.stopPropagation()}
           onTouchMove={(event) => event.stopPropagation()}
         >
-          <div className="flex flex-row">
+          <div className="flex flex-col sm:flex-row">
             {presets.length > 0 && (
-              <div className="flex w-36 shrink-0 flex-col gap-0.5 border-r border-solid border-semantic-border-layout p-3">
-                {presets.map((preset) => (
-                  <button
-                    key={preset.label}
-                    type="button"
-                    className="w-full rounded px-2 py-1.5 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
-                    onClick={() => handlePresetClick(preset)}
-                  >
-                    {preset.label}
-                  </button>
-                ))}
+              <div className="flex shrink-0 gap-0.5 border-solid border-semantic-border-layout p-3 max-sm:w-full max-sm:flex-row max-sm:overflow-x-auto max-sm:border-b sm:w-36 sm:flex-col sm:border-r">
+                {presets.map((preset) => {
+                  const presetDisabled =
+                    clampRange(preset.getRange(), effectiveMinDate, maxDate) ===
+                    null;
+
+                  return (
+                    <button
+                      key={preset.label}
+                      type="button"
+                      disabled={presetDisabled}
+                      className={cn(
+                        "shrink-0 whitespace-nowrap rounded px-2 py-2 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover max-sm:border max-sm:border-solid max-sm:border-semantic-border-layout sm:w-full sm:py-1.5",
+                        presetDisabled &&
+                          "cursor-not-allowed opacity-40 hover:bg-transparent"
+                      )}
+                      onClick={() => handlePresetClick(preset)}
+                    >
+                      {preset.label}
+                    </button>
+                  );
+                })}
               </div>
             )}
 
-            <div className="min-w-[272px] flex-1 p-3 touch-pan-y">
+            <div className="min-w-0 flex-1 p-3 touch-pan-y sm:min-w-[272px]">
               <div className="mb-3 flex items-center justify-between gap-2">
                 <button
                   type="button"
@@ -3120,10 +3203,25 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                   id={\`\${triggerId}-calendar-heading\`}
                   className="flex items-center gap-2"
                 >
-                  <DropdownMenu>
+                  <DropdownMenu
+                    modal={false}
+                    open={openMenu === "month"}
+                    onOpenChange={(nextOpen) =>
+                      setOpenMenu((current) => {
+                        if (nextOpen) return "month";
+                        // Clicking the other trigger dismisses this menu
+                        // *after* the other one has opened \u2014 only clear the
+                        // slot if it is still ours.
+                        return current === "month" ? null : current;
+                      })
+                    }
+                  >
                     <DropdownMenuTrigger asChild>
                       <button
                         type="button"
+                        data-calendar-menu="month"
+                        onPointerDown={(event) => event.preventDefault()}
+                        onClick={() => toggleCalendarMenu("month")}
                         className="rounded border border-solid border-semantic-border-layout px-3 py-1.5 text-sm font-semibold text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
                       >
                         {MONTH_LONG_NAMES[visibleMonth.getMonth()]}
@@ -3131,11 +3229,23 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="start"
+                      // Closing must not pull focus back to the trigger: the
+                      // sibling menu opening in the same click would then see
+                      // focus land outside itself and dismiss immediately.
+                      onCloseAutoFocus={(event) => event.preventDefault()}
                       className={cn(CALENDAR_DROPDOWN_Z_INDEX, "max-h-[240px] overflow-y-auto")}
                     >
                       {MONTH_LONG_NAMES.map((label, monthIndex) => (
                         <DropdownMenuItem
                           key={label}
+                          disabled={
+                            !isMonthSelectable(
+                              visibleMonth.getFullYear(),
+                              monthIndex,
+                              effectiveMinDate,
+                              maxDate
+                            )
+                          }
                           onSelect={() =>
                             setVisibleMonth(
                               startOfMonth(
@@ -3150,10 +3260,25 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     </DropdownMenuContent>
                   </DropdownMenu>
 
-                  <DropdownMenu>
+                  <DropdownMenu
+                    modal={false}
+                    open={openMenu === "year"}
+                    onOpenChange={(nextOpen) =>
+                      setOpenMenu((current) => {
+                        if (nextOpen) return "year";
+                        // Clicking the other trigger dismisses this menu
+                        // *after* the other one has opened \u2014 only clear the
+                        // slot if it is still ours.
+                        return current === "year" ? null : current;
+                      })
+                    }
+                  >
                     <DropdownMenuTrigger asChild>
                       <button
                         type="button"
+                        data-calendar-menu="year"
+                        onPointerDown={(event) => event.preventDefault()}
+                        onClick={() => toggleCalendarMenu("year")}
                         className="flex items-center gap-1 rounded border border-solid border-semantic-border-layout px-3 py-1.5 text-sm font-semibold text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
                       >
                         {visibleMonth.getFullYear()}
@@ -3165,12 +3290,13 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="start"
+                      // Closing must not pull focus back to the trigger: the
+                      // sibling menu opening in the same click would then see
+                      // focus land outside itself and dismiss immediately.
+                      onCloseAutoFocus={(event) => event.preventDefault()}
                       className={cn(CALENDAR_DROPDOWN_Z_INDEX, "max-h-[240px] overflow-y-auto")}
                     >
-                      {Array.from(
-                        { length: YEAR_OPTIONS_SPAN * 2 + 1 },
-                        (_, index) => visibleMonth.getFullYear() - YEAR_OPTIONS_SPAN + index
-                      ).map((year) => (
+                      {yearOptions.map((year) => (
                         <DropdownMenuItem
                           key={year}
                           onSelect={() =>
@@ -3198,11 +3324,11 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                 </button>
               </div>
 
-              <div className="grid grid-cols-7">
+              <div className="grid w-full grid-cols-7">
                 {weekDays.map((day) => (
                   <div
                     key={day}
-                    className="flex h-8 items-center justify-center text-xs font-medium text-semantic-text-muted"
+                    className="flex h-9 items-center justify-center text-xs font-medium text-semantic-text-muted sm:h-8"
                   >
                     {day}
                   </div>
@@ -3238,7 +3364,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     <div
                       key={day.toISOString()}
                       className={cn(
-                        "relative flex h-8 items-center justify-center",
+                        "relative flex h-9 items-center justify-center sm:h-8",
                         isInBand && "bg-semantic-info-surface",
                         isRangeStart && hasRange && "rounded-l-full",
                         isRangeEnd && hasRange && "rounded-r-full"
@@ -3251,7 +3377,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                         aria-current={isToday ? "date" : undefined}
                         disabled={!!isDisabled}
                         className={cn(
-                          "relative flex size-8 items-center justify-center rounded-full text-xs transition-colors",
+                          "relative flex h-9 w-full max-w-9 items-center justify-center rounded-full text-xs transition-colors sm:h-8 sm:max-w-8",
                           isSelectedEdge
                             ? "bg-semantic-primary text-semantic-text-inverted font-semibold"
                             : isCurrentMonth
@@ -3347,12 +3473,23 @@ import {
   type Strategy,
 } from "@floating-ui/react-dom";
 import { cva, type VariantProps } from "class-variance-authority";
-import { ChevronDown, ChevronLeft, ChevronRight, Clock2, X } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Clock2,
+  X,
+} from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
 const DEFAULT_START_TIME = "10:30:00";
-const DEFAULT_END_TIME = "12:30:00";
+/**
+ * What the time columns show while no time is selected. Clearing the value
+ * returns the picker to this state, so an unset time always reads 12:00 AM
+ * rather than re-proposing the sample default.
+ */
+const UNSET_TIME = "00:00:00";
 const DEFAULT_MINUTE_STEP = 5;
 const DEFAULT_SECOND_STEP = 5;
 const TIME_COLUMN_MAX_HEIGHT = 168;
@@ -3427,8 +3564,10 @@ const dateTimePickerTriggerVariants = cva(
 
 export interface DateTimePickerValue {
   date?: Date;
-  startTime: string;
-  endTime: string;
+  /** Undefined until a time is explicitly selected */
+  startTime?: string;
+  /** Undefined until a time is explicitly selected */
+  endTime?: string;
 }
 
 export interface DateTimePickerProps
@@ -3482,8 +3621,8 @@ function normalizeValue(
 ): DateTimePickerValue {
   return {
     date: value?.date,
-    startTime: value?.startTime ?? DEFAULT_START_TIME,
-    endTime: value?.endTime ?? DEFAULT_END_TIME,
+    startTime: value?.startTime,
+    endTime: value?.endTime,
   };
 }
 
@@ -3760,7 +3899,6 @@ function formatValueForDisplay(
   value: DateTimePickerValue,
   variant: DateTimePickerVariant,
   showEndTime: boolean,
-  hasTimeValue: boolean,
   showSeconds: boolean
 ) {
   if (variant === "date-only") {
@@ -3768,14 +3906,21 @@ function formatValueForDisplay(
   }
 
   if (variant === "time-only") {
-    if (!hasTimeValue) return "";
+    if (!value.startTime && !value.endTime) return "";
 
     return showEndTime
-      ? \`\${formatTimeForDisplay(value.startTime, showSeconds)} - \${formatTimeForDisplay(value.endTime, showSeconds)}\`
-      : formatTimeForDisplay(value.startTime, showSeconds);
+      ? \`\${formatTimeForDisplay(value.startTime ?? UNSET_TIME, showSeconds)} - \${formatTimeForDisplay(value.endTime ?? UNSET_TIME, showSeconds)}\`
+      : formatTimeForDisplay(value.startTime ?? UNSET_TIME, showSeconds);
   }
 
-  return formatDateForDisplay(value.date, value.startTime, showSeconds);
+  const datePart = formatDateOnlyForDisplay(value.date);
+  const timePart = value.startTime
+    ? formatTimeForDisplay(value.startTime, showSeconds)
+    : "";
+
+  if (!datePart && !timePart) return "";
+
+  return [datePart, timePart].filter(Boolean).join(" ");
 }
 
 function getDefaultPlaceholder(
@@ -3962,10 +4107,7 @@ function splitTypedDateInput(value: string) {
       dateSource.split(/[/-]/);
     const dayResult = consumeDigits(dayPart, 2);
     const monthResult = consumeDigits(\`\${dayResult.rest}\${monthPart}\`, 2);
-    const yearResult = consumeDigits(
-      \`\${monthResult.rest}\${yearPart}\`,
-      4
-    );
+    const yearResult = consumeDigits(\`\${monthResult.rest}\${yearPart}\`, 4);
     const day = dayResult.digits;
     const month = monthResult.digits;
     const year = yearResult.digits;
@@ -4003,7 +4145,10 @@ function splitTypedDateInput(value: string) {
   };
 }
 
-function isPotentiallyValidTimeDigits(timeDigits: string, showSeconds: boolean) {
+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) : "";
@@ -4037,7 +4182,10 @@ function formatTimeInput(restValue: string, showSeconds: boolean) {
   const meridiem = formatMeridiemInput(meridiemLetters.slice(0, 2));
 
   if (!timeDigits && !meridiem) return "";
-  if (!isPotentiallyValidTimeDigits(timeDigits, showSeconds) || meridiem === null) {
+  if (
+    !isPotentiallyValidTimeDigits(timeDigits, showSeconds) ||
+    meridiem === null
+  ) {
     return null;
   }
 
@@ -4057,7 +4205,8 @@ function sanitizeTypedDateInput(value: string, previousValue: string) {
   if (/^[A-Za-z]/.test(trimmedValue)) return previousValue;
 
   const normalizedValue = value.toUpperCase().replace(/[^0-9\\s/-]/g, "");
-  const { dateDigits, dateValue, isValid } = splitTypedDateInput(normalizedValue);
+  const { dateDigits, dateValue, isValid } =
+    splitTypedDateInput(normalizedValue);
   const limitedDateDigits = dateDigits.slice(0, 8);
 
   if (!limitedDateDigits) return "";
@@ -4091,9 +4240,7 @@ function sanitizeTypedDateTimeInput(
   const trimmedValue = value.trimStart();
   if (/^[A-Za-z]/.test(trimmedValue)) return previousValue;
 
-  const normalizedValue = value
-    .toUpperCase()
-    .replace(/[^0-9\\s/:APM-]/g, "");
+  const normalizedValue = value.toUpperCase().replace(/[^0-9\\s/:APM-]/g, "");
   const { dateDigits, dateValue, isComplete, isValid, restValue } =
     splitTypedDateInput(normalizedValue);
   const limitedDateDigits = dateDigits.slice(0, 8);
@@ -4101,7 +4248,9 @@ function sanitizeTypedDateTimeInput(
   if (!limitedDateDigits) return "";
   if (!isValid) return previousValue;
 
-  const formattedTime = isComplete ? formatTimeInput(restValue, showSeconds) : "";
+  const formattedTime = isComplete
+    ? formatTimeInput(restValue, showSeconds)
+    : "";
   if (formattedTime === null) return previousValue;
 
   return [dateValue, formattedTime].filter(Boolean).join(" ");
@@ -4177,7 +4326,11 @@ function stepDateTimeInputValue(
   const [hourValue = "0", minuteValue = "0", secondValue = "00"] = (
     typedDateTime.startTime ?? fallbackTime
   ).split(":");
-  nextDate.setHours(Number(hourValue), Number(minuteValue), Number(secondValue));
+  nextDate.setHours(
+    Number(hourValue),
+    Number(minuteValue),
+    Number(secondValue)
+  );
 
   if (segment === "day") {
     nextDate.setDate(nextDate.getDate() + direction);
@@ -4221,10 +4374,7 @@ function stepDateTimeInputValue(
     .padStart(2, "0")}:\${nextDate
     .getMinutes()
     .toString()
-    .padStart(2, "0")}:\${nextDate
-    .getSeconds()
-    .toString()
-    .padStart(2, "0")}\`;
+    .padStart(2, "0")}:\${nextDate.getSeconds().toString().padStart(2, "0")}\`;
 
   return {
     date: startOfDay(nextDate),
@@ -4307,13 +4457,15 @@ function parseTypedDate(value: string) {
 function formatHiddenValue(
   value: DateTimePickerValue,
   variant: DateTimePickerVariant,
-  showEndTime: boolean,
-  hasTimeValue: boolean
+  showEndTime: boolean
 ) {
+  const startTime = value.startTime ?? UNSET_TIME;
+  const endTime = value.endTime ?? UNSET_TIME;
+
   if (variant === "time-only") {
-    if (!hasTimeValue) return "";
+    if (!value.startTime && !value.endTime) return "";
 
-    return showEndTime ? \`\${value.startTime}/\${value.endTime}\` : value.startTime;
+    return showEndTime ? \`\${startTime}/\${endTime}\` : startTime;
   }
 
   if (!value.date) return "";
@@ -4330,6 +4482,8 @@ function formatHiddenValue(
   const day = value.date.getDate().toString().padStart(2, "0");
   const year = value.date.getFullYear();
 
+  if (!value.startTime) return \`\${year}-\${month}-\${day}\`;
+
   return \`\${year}-\${month}-\${day}T\${value.startTime}\`;
 }
 
@@ -4353,6 +4507,26 @@ function FigmaCalendarIcon({ className }: { className?: string }) {
   );
 }
 
+function FigmaClockIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
+      <path
+        d="M9 4.5V9L11.25 11.25M15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.27208 15.75 2.25 12.7279 2.25 9C2.25 5.27208 5.27208 2.25 9 2.25C12.7279 2.25 15.75 5.27208 15.75 9Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 function CalendarDropdown({
   id,
   label,
@@ -4649,7 +4823,9 @@ function TimeField({
               ariaLabel={\`\${label} hours\`}
               options={hourOptions}
               onSelect={(key) =>
-                onChange(composeTime(Number(key), minute, effectiveSecond, meridiem))
+                onChange(
+                  composeTime(Number(key), minute, effectiveSecond, meridiem)
+                )
               }
             />
             <TimeColumn
@@ -4657,7 +4833,9 @@ function TimeField({
               ariaLabel={\`\${label} minutes\`}
               options={minuteOptions}
               onSelect={(key) =>
-                onChange(composeTime(hour12, Number(key), effectiveSecond, meridiem))
+                onChange(
+                  composeTime(hour12, Number(key), effectiveSecond, meridiem)
+                )
               }
             />
             {showSeconds && (
@@ -4735,22 +4913,19 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     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 resolvedStartTime = currentValue.startTime ?? UNSET_TIME;
+    const resolvedEndTime = currentValue.endTime ?? UNSET_TIME;
     const resolvedShowSeconds =
       showSeconds ??
       (timeHasVisibleSeconds(currentValue.startTime) ||
         (resolvedShowEndTime && timeHasVisibleSeconds(currentValue.endTime)));
     const placeholder =
-      placeholderProp ?? getDefaultPlaceholder(pickerVariant, resolvedShowSeconds);
+      placeholderProp ??
+      getDefaultPlaceholder(pickerVariant, resolvedShowSeconds);
     const open = isOpenControlled ? controlledOpen : internalOpen;
     const [visibleMonth, setVisibleMonth] = React.useState(() =>
       startOfMonth(currentValue.date ?? new Date())
@@ -4760,7 +4935,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         currentValue,
         pickerVariant,
         resolvedShowEndTime,
-        hasTimeValue,
         resolvedShowSeconds
       )
     );
@@ -4792,7 +4966,10 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             const maxWidth = Math.min(MAX_POPOVER_WIDTH, availableWidth);
             const width = Math.max(
               1,
-              Math.min(Math.max(rects.reference.width, MIN_POPOVER_WIDTH), maxWidth)
+              Math.min(
+                Math.max(rects.reference.width, MIN_POPOVER_WIDTH),
+                maxWidth
+              )
             );
             elements.floating.style.setProperty(
               POPOVER_SCROLL_HEIGHT_VAR,
@@ -4824,7 +5001,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       currentValue,
       pickerVariant,
       resolvedShowEndTime,
-      hasTimeValue,
       resolvedShowSeconds
     );
     const effectiveMinDate = React.useMemo(() => {
@@ -4915,15 +5091,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     }, [open, setOpen]);
 
     const updateValue = React.useCallback(
-      (
-        nextValue: DateTimePickerValue,
-        options?: { hasTimeValue?: boolean }
-      ) => {
+      (nextValue: DateTimePickerValue) => {
         if (!isValueControlled) {
           setInternalValue(nextValue);
-          if (options?.hasTimeValue !== undefined) {
-            setInternalHasTimeValue(options.hasTimeValue);
-          }
         }
 
         onValueChange?.(nextValue);
@@ -4936,11 +5106,14 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       if (readOnly) return;
 
       setDateInputValue("");
+      setOpenTimeField(null);
+      setOpenCalendarDropdown(null);
+      setVisibleMonth(startOfMonth(new Date()));
       updateValue({
         date: undefined,
-        startTime: currentValue.startTime,
-        endTime: currentValue.endTime,
-      }, { hasTimeValue: false });
+        startTime: undefined,
+        endTime: undefined,
+      });
     };
 
     const yearOptions = React.useMemo(
@@ -4999,13 +5172,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           updateValue({ ...currentValue, date: nextSelectedDate });
         }
       },
-      [
-        currentValue,
-        effectiveMinDate,
-        maxDate,
-        pickerVariant,
-        updateValue,
-      ]
+      [currentValue, effectiveMinDate, maxDate, pickerVariant, updateValue]
     );
 
     const handleTypedDateChange = (
@@ -5029,18 +5196,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
 
         const typedTime = parseTimePart(nextInputValue);
         if (typedTime === undefined) {
-          updateValue({ ...currentValue, date: undefined }, { hasTimeValue: false });
+          updateValue({ ...currentValue, startTime: undefined });
           return;
         }
 
         if (typedTime) {
-          updateValue(
-            {
-              ...currentValue,
-              startTime: typedTime,
-            },
-            { hasTimeValue: true }
-          );
+          updateValue({ ...currentValue, startTime: typedTime });
         }
 
         return;
@@ -5130,7 +5291,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         dateInputValue,
         cursorPosition,
         direction,
-        currentValue.startTime,
+        resolvedStartTime,
         resolvedShowSeconds
       );
 
@@ -5182,7 +5343,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           currentValue,
           pickerVariant,
           resolvedShowEndTime,
-          hasTimeValue,
           resolvedShowSeconds
         )
       );
@@ -5198,7 +5358,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           ref={setPopoverRef}
           role="dialog"
           aria-modal="false"
-          aria-labelledby={showCalendar ? \`\${triggerId}-calendar-heading\` : undefined}
+          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",
@@ -5288,11 +5450,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                     }))}
                     onValueChange={(nextYear) => {
                       syncCalendarMonthAndValue(
-                        new Date(
-                          Number(nextYear),
-                          visibleMonth.getMonth(),
-                          1
-                        )
+                        new Date(Number(nextYear), visibleMonth.getMonth(), 1)
                       );
                     }}
                   />
@@ -5384,7 +5542,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
               <TimeField
                 id={\`\${triggerId}-start-time\`}
                 label={startTimeLabel}
-                value={currentValue.startTime}
+                value={resolvedStartTime}
                 showSeconds={resolvedShowSeconds}
                 minuteStep={minuteStep}
                 secondStep={secondStep}
@@ -5395,10 +5553,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                   setOpenTimeField(nextOpen ? "start" : null)
                 }
                 onChange={(startTime) =>
-                  updateValue(
-                    { ...currentValue, startTime },
-                    { hasTimeValue: true }
-                  )
+                  updateValue({ ...currentValue, startTime })
                 }
               />
 
@@ -5406,7 +5561,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 <TimeField
                   id={\`\${triggerId}-end-time\`}
                   label={endTimeLabel}
-                  value={currentValue.endTime}
+                  value={resolvedEndTime}
                   showSeconds={resolvedShowSeconds}
                   minuteStep={minuteStep}
                   secondStep={secondStep}
@@ -5417,15 +5572,13 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                     setOpenTimeField(nextOpen ? "end" : null)
                   }
                   onChange={(endTime) =>
-                    updateValue(
-                      { ...currentValue, endTime },
-                      { hasTimeValue: true }
-                    )
+                    updateValue({ ...currentValue, endTime })
                   }
                 />
               )}
             </div>
           )}
+
         </div>,
         portalMount
       );
@@ -5452,8 +5605,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             value={formatHiddenValue(
               currentValue,
               pickerVariant,
-              resolvedShowEndTime,
-              hasTimeValue
+              resolvedShowEndTime
             )}
           />
         )}
@@ -5509,16 +5661,19 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             onKeyDown={handleTypedDateKeyDown}
             onBlur={handleTypedDateBlur}
           />
-          {showClear && displayValue && !disabled && !readOnly && (
-            <button
-              type="button"
-              aria-label="Clear date"
-              className="inline-flex size-5 items-center justify-center rounded text-semantic-text-muted hover:bg-semantic-bg-hover hover:text-semantic-text-primary"
-              onClick={clearValue}
-            >
-              <X className="size-4" aria-hidden="true" />
-            </button>
-          )}
+          {showClear &&
+            (displayValue || dateInputValue) &&
+            !disabled &&
+            !readOnly && (
+              <button
+                type="button"
+                aria-label="Clear date"
+                className="inline-flex size-5 items-center justify-center rounded text-semantic-text-muted hover:bg-semantic-bg-hover hover:text-semantic-text-primary"
+                onClick={clearValue}
+              >
+                <X className="size-4" aria-hidden="true" />
+              </button>
+            )}
           <button
             type="button"
             disabled={disabled || readOnly}
@@ -5526,9 +5681,15 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             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)}
           >
-            <FigmaCalendarIcon
-              className={cn(size === "sm" ? "size-4" : "size-[18px]")}
-            />
+            {showCalendar ? (
+              <FigmaCalendarIcon
+                className={cn(size === "sm" ? "size-4" : "size-[18px]")}
+              />
+            ) : (
+              <FigmaClockIcon
+                className={cn(size === "sm" ? "size-4" : "size-[18px]")}
+              />
+            )}
           </button>
         </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.381",
+  "version": "0.2.383",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",