myoperator-mcp 0.2.383 → 0.2.384

package/dist/index.js

@@ -3564,10 +3564,10 @@ const dateTimePickerTriggerVariants = cva(
 
 export interface DateTimePickerValue {
   date?: Date;
-  /** Undefined until a time is explicitly selected */
-  startTime?: string;
-  /** Undefined until a time is explicitly selected */
-  endTime?: string;
+  /** Empty string until a time is explicitly selected */
+  startTime: string;
+  /** Empty string until a time is explicitly selected */
+  endTime: string;
 }
 
 export interface DateTimePickerProps
@@ -3575,8 +3575,8 @@ export interface DateTimePickerProps
     Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange">,
     VariantProps<typeof dateTimePickerVariants>,
     Pick<VariantProps<typeof dateTimePickerTriggerVariants>, "state"> {
-  value?: DateTimePickerValue;
-  defaultValue?: DateTimePickerValue;
+  value?: Partial<DateTimePickerValue>;
+  defaultValue?: Partial<DateTimePickerValue>;
   onValueChange?: (value: DateTimePickerValue) => void;
   /** Label text displayed above the trigger */
   label?: string;
@@ -3584,6 +3584,10 @@ export interface DateTimePickerProps
   required?: boolean;
   /** Additional class for the label */
   labelClassName?: string;
+  /** Helper text displayed below the picker */
+  helperText?: string;
+  /** Error message \u2014 shows red text below and drives state="error" */
+  error?: string;
   placeholder?: string;
   disabled?: boolean;
   readOnly?: boolean;
@@ -3621,8 +3625,8 @@ function normalizeValue(
 ): DateTimePickerValue {
   return {
     date: value?.date,
-    startTime: value?.startTime,
-    endTime: value?.endTime,
+    startTime: value?.startTime ?? "",
+    endTime: value?.endTime ?? "",
   };
 }
 
@@ -3909,8 +3913,8 @@ function formatValueForDisplay(
     if (!value.startTime && !value.endTime) return "";
 
     return showEndTime
-      ? \`\${formatTimeForDisplay(value.startTime ?? UNSET_TIME, showSeconds)} - \${formatTimeForDisplay(value.endTime ?? UNSET_TIME, showSeconds)}\`
-      : formatTimeForDisplay(value.startTime ?? UNSET_TIME, showSeconds);
+      ? \`\${formatTimeForDisplay(value.startTime || UNSET_TIME, showSeconds)} - \${formatTimeForDisplay(value.endTime || UNSET_TIME, showSeconds)}\`
+      : formatTimeForDisplay(value.startTime || UNSET_TIME, showSeconds);
   }
 
   const datePart = formatDateOnlyForDisplay(value.date);
@@ -4459,8 +4463,8 @@ function formatHiddenValue(
   variant: DateTimePickerVariant,
   showEndTime: boolean
 ) {
-  const startTime = value.startTime ?? UNSET_TIME;
-  const endTime = value.endTime ?? UNSET_TIME;
+  const startTime = value.startTime || UNSET_TIME;
+  const endTime = value.endTime || UNSET_TIME;
 
   if (variant === "time-only") {
     if (!value.startTime && !value.endTime) return "";
@@ -4878,6 +4882,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       label,
       required,
       labelClassName,
+      helperText,
+      error,
       placeholder: placeholderProp,
       disabled = false,
       readOnly = false,
@@ -4905,6 +4911,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const generatedId = React.useId();
     const triggerId = id ?? generatedId;
     const pickerVariant = variant ?? "date-time";
+    const resolvedState = error ? "error" : state;
     const showCalendar = pickerVariant !== "time-only";
     const showTimeFields = pickerVariant !== "date-only";
     const resolvedShowEndTime = showTimeFields && showEndTime;
@@ -4917,8 +4924,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const currentValue = normalizeValue(
       isValueControlled ? value : internalValue
     );
-    const resolvedStartTime = currentValue.startTime ?? UNSET_TIME;
-    const resolvedEndTime = currentValue.endTime ?? UNSET_TIME;
+    const resolvedStartTime = currentValue.startTime || UNSET_TIME;
+    const resolvedEndTime = currentValue.endTime || UNSET_TIME;
     const resolvedShowSeconds =
       showSeconds ??
       (timeHasVisibleSeconds(currentValue.startTime) ||
@@ -4997,6 +5004,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       () => getCalendarDays(visibleMonth),
       [visibleMonth]
     );
+    const errorId = \`\${triggerId}-error\`;
+    const helperId = \`\${triggerId}-helper\`;
+    const describedBy = error ? errorId : helperText ? helperId : undefined;
     const displayValue = formatValueForDisplay(
       currentValue,
       pickerVariant,
@@ -5111,8 +5121,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       setVisibleMonth(startOfMonth(new Date()));
       updateValue({
         date: undefined,
-        startTime: undefined,
-        endTime: undefined,
+        startTime: "",
+        endTime: "",
       });
     };
 
@@ -5196,7 +5206,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
 
         const typedTime = parseTimePart(nextInputValue);
         if (typedTime === undefined) {
-          updateValue({ ...currentValue, startTime: undefined });
+          updateValue({ ...currentValue, startTime: "" });
           return;
         }
 
@@ -5271,7 +5281,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         updateValue({
           ...currentValue,
           date: typedDateTime.date,
-          startTime: typedDateTime.startTime ?? currentValue.startTime,
+          startTime: typedDateTime.startTime || currentValue.startTime,
         });
         updateVisibleMonth(typedDateTime.date);
       }
@@ -5626,9 +5636,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         <div
           ref={setTriggerRef}
           className={cn(
-            dateTimePickerTriggerVariants({ size, state }),
+            dateTimePickerTriggerVariants({ size, state: resolvedState }),
             open &&
-              state !== "error" &&
+              resolvedState !== "error" &&
               "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
             !displayValue && "text-semantic-text-placeholder",
             disabled &&
@@ -5644,6 +5654,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             placeholder={placeholder}
             aria-haspopup="dialog"
             aria-expanded={open}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={describedBy}
             aria-label={
               pickerVariant === "date-only"
                 ? "Date"
@@ -5693,6 +5705,27 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           </button>
         </div>
 
+        {(error || helperText) && (
+          <div className="mt-1">
+            {error ? (
+              <span
+                id={errorId}
+                role="alert"
+                className="text-sm text-semantic-error-primary"
+              >
+                {error}
+              </span>
+            ) : (
+              <span
+                id={helperId}
+                className="text-sm text-semantic-text-muted"
+              >
+                {helperText}
+              </span>
+            )}
+          </div>
+        )}
+
         {popover}
       </div>
     );

package/package.json

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