myoperator-mcp 0.2.382 → 0.2.383

package/dist/index.js

@@ -3473,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;
@@ -3553,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
@@ -3608,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,
   };
 }
 
@@ -3886,7 +3899,6 @@ function formatValueForDisplay(
   value: DateTimePickerValue,
   variant: DateTimePickerVariant,
   showEndTime: boolean,
-  hasTimeValue: boolean,
   showSeconds: boolean
 ) {
   if (variant === "date-only") {
@@ -3894,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(
@@ -4088,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;
@@ -4129,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) : "";
@@ -4163,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;
   }
 
@@ -4183,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 "";
@@ -4217,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);
@@ -4227,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(" ");
@@ -4303,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);
@@ -4347,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),
@@ -4433,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 "";
@@ -4456,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}\`;
 }
 
@@ -4479,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,
@@ -4775,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
@@ -4783,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 && (
@@ -4861,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())
@@ -4886,7 +4935,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         currentValue,
         pickerVariant,
         resolvedShowEndTime,
-        hasTimeValue,
         resolvedShowSeconds
       )
     );
@@ -4918,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,
@@ -4950,7 +5001,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       currentValue,
       pickerVariant,
       resolvedShowEndTime,
-      hasTimeValue,
       resolvedShowSeconds
     );
     const effectiveMinDate = React.useMemo(() => {
@@ -5041,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);
@@ -5062,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(
@@ -5125,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 = (
@@ -5155,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;
@@ -5256,7 +5291,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         dateInputValue,
         cursorPosition,
         direction,
-        currentValue.startTime,
+        resolvedStartTime,
         resolvedShowSeconds
       );
 
@@ -5308,7 +5343,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           currentValue,
           pickerVariant,
           resolvedShowEndTime,
-          hasTimeValue,
           resolvedShowSeconds
         )
       );
@@ -5324,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",
@@ -5414,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)
                       );
                     }}
                   />
@@ -5510,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}
@@ -5521,10 +5553,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                   setOpenTimeField(nextOpen ? "start" : null)
                 }
                 onChange={(startTime) =>
-                  updateValue(
-                    { ...currentValue, startTime },
-                    { hasTimeValue: true }
-                  )
+                  updateValue({ ...currentValue, startTime })
                 }
               />
 
@@ -5532,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}
@@ -5543,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
       );
@@ -5578,8 +5605,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             value={formatHiddenValue(
               currentValue,
               pickerVariant,
-              resolvedShowEndTime,
-              hasTimeValue
+              resolvedShowEndTime
             )}
           />
         )}
@@ -5635,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}
@@ -5652,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.382",
+  "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",