myoperator-mcp 0.2.319 → 0.2.321

package/dist/index.js

@@ -2517,12 +2517,7 @@ import {
   type Strategy,
 } from "@floating-ui/react-dom";
 import { cva, type VariantProps } from "class-variance-authority";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Clock2,
-  X,
-} from "lucide-react";
+import { ChevronLeft, ChevronRight, Clock2, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -2536,8 +2531,15 @@ const MAX_POPOVER_HEIGHT = 420;
 const POPOVER_SCROLL_HEIGHT_VAR = "--date-time-picker-scroll-height";
 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 weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const monthNames = Array.from({ length: 12 }, (_, monthIndex) =>
+  new Intl.DateTimeFormat("en-US", { month: "short" }).format(
+    new Date(2026, monthIndex, 1)
+  )
+);
 const monthFormatter = new Intl.DateTimeFormat("en-US", {
   month: "long",
   year: "numeric",
@@ -2650,6 +2652,43 @@ function addMonths(date: Date, months: number) {
   return new Date(date.getFullYear(), date.getMonth() + months, 1);
 }
 
+function getMonthKey(date: Date) {
+  return date.getFullYear() * 12 + date.getMonth();
+}
+
+function isMonthBefore(date: Date, minDate: Date) {
+  return getMonthKey(date) < getMonthKey(minDate);
+}
+
+function isMonthAfter(date: Date, maxDate: Date) {
+  return getMonthKey(date) > getMonthKey(maxDate);
+}
+
+function clampMonth(date: Date, minDate?: Date, maxDate?: Date) {
+  if (minDate && isMonthBefore(date, minDate)) return startOfMonth(minDate);
+  if (maxDate && isMonthAfter(date, maxDate)) return startOfMonth(maxDate);
+
+  return startOfMonth(date);
+}
+
+function getYearOptions(visibleMonth: Date, minDate?: Date, maxDate?: Date) {
+  const currentYear = new Date().getFullYear();
+  const selectedYear = visibleMonth.getFullYear();
+  const startYear = Math.min(
+    minDate?.getFullYear() ?? currentYear - YEAR_RANGE_BEFORE,
+    selectedYear
+  );
+  const endYear = Math.max(
+    maxDate?.getFullYear() ?? currentYear + YEAR_RANGE_AFTER,
+    selectedYear
+  );
+
+  return Array.from(
+    { length: endYear - startYear + 1 },
+    (_, index) => startYear + index
+  );
+}
+
 function getCalendarDays(month: Date) {
   const firstDay = startOfMonth(month);
   const gridStart = new Date(firstDay);
@@ -2697,7 +2736,82 @@ function formatDateForDisplay(date?: Date, time?: string) {
   const year = date.getFullYear();
   const formattedTime = formatTimeForDisplay(time ?? DEFAULT_START_TIME);
 
-  return \`\${month}/\${day}/\${year} \${formattedTime}\`;
+  return \`\${day}/\${month}/\${year} \${formattedTime}\`;
+}
+
+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})$/);
+  const [, yearValue, isoMonthValue, isoDayValue] = isoMatch ?? [];
+  const [, dayValue, monthValue, dayFirstYearValue] = dayFirstMatch ?? [];
+
+  const year = Number(yearValue ?? dayFirstYearValue);
+  const month = Number(isoMonthValue ?? monthValue);
+  const day = Number(isoDayValue ?? dayValue);
+
+  if (!year || !month || !day) return null;
+
+  const parsedDate = new Date(year, month - 1, day);
+  if (
+    parsedDate.getFullYear() !== year ||
+    parsedDate.getMonth() !== month - 1 ||
+    parsedDate.getDate() !== day
+  ) {
+    return null;
+  }
+
+  return parsedDate;
+}
+
+function parseTimePart(timePart?: string) {
+  if (!timePart) return undefined;
+
+  const timeMatch = timePart
+    .trim()
+    .match(/^(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM)?$/i);
+  if (!timeMatch) return null;
+
+  const [, hourValue, minuteValue, secondValue = "00", meridiem] = timeMatch;
+  let hour = Number(hourValue);
+  const minute = Number(minuteValue);
+  const second = Number(secondValue);
+
+  if (
+    minute > 59 ||
+    second > 59 ||
+    (meridiem ? hour < 1 || hour > 12 : hour > 23)
+  ) {
+    return null;
+  }
+
+  if (meridiem) {
+    const normalizedMeridiem = meridiem.toUpperCase();
+    if (normalizedMeridiem === "AM") {
+      hour = hour === 12 ? 0 : hour;
+    } else {
+      hour = hour === 12 ? 12 : hour + 12;
+    }
+  }
+
+  return \`\${hour.toString().padStart(2, "0")}:\${minuteValue}:\${secondValue}\`;
+}
+
+function parseTypedDateTime(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})(?:\\s+(.+))?$/
+  );
+  if (!typedMatch) return null;
+
+  const [, datePart, timePart] = typedMatch;
+  const date = parseDatePart(datePart);
+  const startTime = parseTimePart(timePart);
+
+  if (!date || startTime === null) return null;
+
+  return { date, startTime };
 }
 
 function formatHiddenValue(value: DateTimePickerValue) {
@@ -2775,8 +2889,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const [visibleMonth, setVisibleMonth] = React.useState(() =>
       startOfMonth(currentValue.date ?? new Date())
     );
+    const [dateInputValue, setDateInputValue] = React.useState(() =>
+      formatDateForDisplay(currentValue.date, currentValue.startTime)
+    );
+    const [isDateInputFocused, setIsDateInputFocused] = React.useState(false);
     const rootRef = React.useRef<HTMLDivElement | null>(null);
-    const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+    const triggerRef = React.useRef<HTMLDivElement | null>(null);
     const popoverRef = React.useRef<HTMLDivElement | null>(null);
     const usesContainerPortal = portalContainer !== undefined;
     const floatingStrategy: Strategy = usesContainerPortal
@@ -2807,16 +2925,15 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       ],
       []
     );
-    const { refs, floatingStyles, isPositioned } =
-      useFloating<HTMLButtonElement>({
-        open,
-        placement: CALENDAR_PLACEMENT,
-        strategy: floatingStrategy,
-        transform: false,
-        middleware: floatingMiddleware,
-        whileElementsMounted: (reference, floating, update) =>
-          autoUpdate(reference, floating, update, { animationFrame: true }),
-      });
+    const { refs, floatingStyles, isPositioned } = useFloating<HTMLDivElement>({
+      open,
+      placement: CALENDAR_PLACEMENT,
+      strategy: floatingStrategy,
+      transform: false,
+      middleware: floatingMiddleware,
+      whileElementsMounted: (reference, floating, update) =>
+        autoUpdate(reference, floating, update, { animationFrame: true }),
+    });
     const calendarDays = React.useMemo(
       () => getCalendarDays(visibleMonth),
       [visibleMonth]
@@ -2852,7 +2969,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     );
 
     const setTriggerRef = React.useCallback(
-      (node: HTMLButtonElement | null) => {
+      (node: HTMLDivElement | null) => {
         triggerRef.current = node;
         refs.setReference(node);
       },
@@ -2873,6 +2990,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       }
     }, [currentValue.date]);
 
+    React.useEffect(() => {
+      if (!isDateInputFocused) {
+        setDateInputValue(displayValue);
+      }
+    }, [displayValue, isDateInputFocused]);
+
     React.useEffect(() => {
       if (!open) return;
 
@@ -2915,6 +3038,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       event.stopPropagation();
       if (readOnly) return;
 
+      setDateInputValue("");
       updateValue({
         date: undefined,
         startTime: currentValue.startTime,
@@ -2922,6 +3046,53 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       });
     };
 
+    const yearOptions = React.useMemo(
+      () => getYearOptions(visibleMonth, effectiveMinDate, maxDate),
+      [effectiveMinDate, maxDate, visibleMonth]
+    );
+
+    const updateVisibleMonth = React.useCallback(
+      (nextMonth: Date) => {
+        setVisibleMonth(clampMonth(nextMonth, effectiveMinDate, maxDate));
+      },
+      [effectiveMinDate, maxDate]
+    );
+
+    const handleTypedDateChange = (
+      event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+      const nextInputValue = event.target.value;
+      setDateInputValue(nextInputValue);
+
+      const typedDateTime = parseTypedDateTime(nextInputValue);
+      if (typedDateTime === undefined) {
+        updateValue({ ...currentValue, date: undefined });
+        return;
+      }
+
+      if (
+        typedDateTime &&
+        !(
+          effectiveMinDate && isBeforeDay(typedDateTime.date, effectiveMinDate)
+        ) &&
+        !(maxDate && isAfterDay(typedDateTime.date, maxDate))
+      ) {
+        updateValue({
+          ...currentValue,
+          date: typedDateTime.date,
+          startTime: typedDateTime.startTime ?? currentValue.startTime,
+        });
+        updateVisibleMonth(typedDateTime.date);
+      }
+    };
+
+    const handleTypedDateBlur = () => {
+      setIsDateInputFocused(false);
+      setDateInputValue(
+        formatDateForDisplay(currentValue.date, currentValue.startTime)
+      );
+    };
+
     const popover =
       open &&
       !disabled &&
@@ -2953,26 +3124,89 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           onTouchMove={(event) => event.stopPropagation()}
         >
           <div className="p-3 touch-pan-y">
-            <div className="mb-3 flex items-center justify-between">
+            <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={() => setVisibleMonth((month) => addMonths(month, -1))}
+                onClick={() => updateVisibleMonth(addMonths(visibleMonth, -1))}
               >
                 <ChevronLeft className="size-4" aria-hidden="true" />
               </button>
-              <div
-                id={\`\${triggerId}-calendar-heading\`}
-                className="text-sm font-semibold text-semantic-text-primary"
-              >
-                {monthFormatter.format(visibleMonth)}
+              <div className="flex min-w-0 items-center gap-2">
+                <label className="sr-only" htmlFor={\`\${triggerId}-month\`}>
+                  Month
+                </label>
+                <select
+                  id={\`\${triggerId}-month\`}
+                  aria-label="Month"
+                  value={visibleMonth.getMonth()}
+                  className="h-8 rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary px-2 text-sm font-medium text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50"
+                  onChange={(event) =>
+                    updateVisibleMonth(
+                      new Date(
+                        visibleMonth.getFullYear(),
+                        Number(event.target.value),
+                        1
+                      )
+                    )
+                  }
+                >
+                  {monthNames.map((monthName, monthIndex) => {
+                    const optionMonth = new Date(
+                      visibleMonth.getFullYear(),
+                      monthIndex,
+                      1
+                    );
+                    const isDisabled =
+                      (effectiveMinDate &&
+                        isMonthBefore(optionMonth, effectiveMinDate)) ||
+                      (maxDate && isMonthAfter(optionMonth, maxDate));
+
+                    return (
+                      <option
+                        key={monthName}
+                        value={monthIndex}
+                        disabled={!!isDisabled}
+                      >
+                        {monthName}
+                      </option>
+                    );
+                  })}
+                </select>
+                <label className="sr-only" htmlFor={\`\${triggerId}-year\`}>
+                  Year
+                </label>
+                <select
+                  id={\`\${triggerId}-year\`}
+                  aria-label="Year"
+                  value={visibleMonth.getFullYear()}
+                  className="h-8 rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary px-2 text-sm font-medium text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50"
+                  onChange={(event) =>
+                    updateVisibleMonth(
+                      new Date(
+                        Number(event.target.value),
+                        visibleMonth.getMonth(),
+                        1
+                      )
+                    )
+                  }
+                >
+                  {yearOptions.map((year) => (
+                    <option key={year} value={year}>
+                      {year}
+                    </option>
+                  ))}
+                </select>
+                <div id={\`\${triggerId}-calendar-heading\`} className="sr-only">
+                  {monthFormatter.format(visibleMonth)}
+                </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={() => setVisibleMonth((month) => addMonths(month, 1))}
+                onClick={() => updateVisibleMonth(addMonths(visibleMonth, 1))}
               >
                 <ChevronRight className="size-4" aria-hidden="true" />
               </button>
@@ -3123,13 +3357,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             value={formatHiddenValue(currentValue)}
           />
         )}
-        <button
+        <div
           ref={setTriggerRef}
-          id={triggerId}
-          type="button"
-          disabled={disabled || readOnly}
-          aria-haspopup="dialog"
-          aria-expanded={open}
           className={cn(
             dateTimePickerTriggerVariants({ size, state }),
             open &&
@@ -3137,32 +3366,48 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
               "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
             !displayValue && "text-semantic-text-placeholder"
           )}
-          onClick={() => setOpen(!open)}
         >
-          <span
-            className={cn(
-              "min-w-0 flex-1 truncate",
-              !displayValue && "font-normal"
-            )}
-          >
-            {displayValue || placeholder}
-          </span>
+          <input
+            id={triggerId}
+            type="text"
+            disabled={disabled}
+            readOnly={readOnly}
+            value={dateInputValue}
+            placeholder={placeholder}
+            aria-haspopup="dialog"
+            aria-expanded={open}
+            aria-label="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);
+              setOpen(true);
+            }}
+            onClick={() => setOpen(true)}
+            onChange={handleTypedDateChange}
+            onBlur={handleTypedDateBlur}
+          />
           {showClear && displayValue && !disabled && !readOnly && (
-            <span
-              aria-hidden="true"
+            <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" />
-            </span>
+            </button>
           )}
-          <FigmaCalendarIcon
-            className={cn(
-              "shrink-0 text-semantic-text-muted",
-              size === "sm" ? "size-4" : "size-[18px]"
-            )}
-          />
-        </button>
+          <button
+            type="button"
+            disabled={disabled || readOnly}
+            aria-label="Open calendar"
+            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]")}
+            />
+          </button>
+        </div>
 
         {popover}
       </div>

package/package.json

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