myoperator-mcp 0.2.388 → 0.2.390

package/dist/index.js

@@ -2576,7 +2576,7 @@ import {
   type Strategy,
 } from "@floating-ui/react-dom";
 import { cva, type VariantProps } from "class-variance-authority";
-import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import {
@@ -2682,6 +2682,12 @@ export interface DateRangePickerProps
   triggerClassName?: string;
   /** Additional className merged onto the trigger's label span \u2014 e.g. \`"hidden sm:inline"\` to collapse to an icon-only button below a breakpoint */
   triggerLabelClassName?: string;
+  /** Show a clear (x) button in the trigger once a range is selected. */
+  clearable?: boolean;
+  /** Called after the range is cleared. Fires alongside \`onValueChange({})\`. */
+  onClear?: () => void;
+  /** Accessible label for the clear button. Defaults to "Clear date range". */
+  clearLabel?: string;
 }
 
 function normalizeValue(value?: DateRangeValue): DateRangeValue {
@@ -2895,6 +2901,9 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       formatRange,
       triggerClassName,
       triggerLabelClassName,
+      clearable = false,
+      onClear,
+      clearLabel = "Clear date range",
       id,
       ...props
     },
@@ -2974,6 +2983,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       [visibleMonth]
     );
     const displayValue = (formatRange ?? defaultFormatRange)(currentValue);
+    const showClear = clearable && !disabled && Boolean(displayValue);
     const effectiveMinDate = React.useMemo(() => {
       if (!disablePastDates) return minDate;
 
@@ -3109,6 +3119,20 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       triggerRef.current?.focus();
     };
 
+    const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
+      // The clear button sits on top of the trigger; without this the click
+      // bubbles to the wrapper and the calendar pops open on clear.
+      event.stopPropagation();
+
+      const cleared: DateRangeValue = { start: undefined, end: undefined };
+      setDraftValue(cleared);
+      setPendingEnd(false);
+      commitValue(cleared);
+      onClear?.();
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+
     const handleDayClick = (day: Date) => {
       if (!pendingEnd) {
         setDraftValue({ start: day, end: day });
@@ -3435,6 +3459,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
               state !== "error" &&
               "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
             !displayValue && "text-semantic-text-placeholder",
+            showClear && "pr-9",
             triggerClassName
           )}
           onClick={() => setOpen(!open)}
@@ -3451,6 +3476,17 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
           </span>
         </button>
 
+        {showClear && (
+          <button
+            type="button"
+            aria-label={clearLabel}
+            className="absolute right-3 top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-sm text-semantic-text-secondary outline-none transition-colors hover:text-semantic-text-primary focus-visible:ring-2 focus-visible:ring-semantic-border-focus"
+            onClick={handleClear}
+          >
+            <X className="size-4" />
+          </button>
+        )}
+
         {popover}
       </div>
     );
@@ -10356,6 +10392,14 @@ export interface SelectFieldProps {
    * presentation only.
    */
   truncateOptionText?: boolean;
+  /**
+   * Content shown inside the open dropdown when \`options\` is empty (and no
+   * search query is active \u2014 that case shows "No results found"). Use it to
+   * tell the user why the list is empty and what to do next, e.g.
+   * "No AI Agents yet. Build one in AI Agents first."
+   * Default: "No options available".
+   */
+  emptyMessage?: React.ReactNode;
 }
 
 /**
@@ -10434,6 +10478,7 @@ const SelectField = React.forwardRef(
       loadingMore,
       hasMore,
       truncateOptionText,
+      emptyMessage = "No options available",
     }: SelectFieldProps,
     ref: React.Ref<HTMLButtonElement>
   ) => {
@@ -10716,6 +10761,16 @@ const SelectField = React.forwardRef(
               </div>
             )}
 
+            {/* Empty state \u2014 no options at all and nothing being searched/loaded. */}
+            {options.length === 0 && !effectiveSearchQuery && !loadingMore && (
+              <div
+                role="status"
+                className="px-3 py-6 text-center text-sm text-semantic-text-muted"
+              >
+                {emptyMessage}
+              </div>
+            )}
+
             {/* Loading-more row (lazy-load) */}
             {loadingMore && (
               <div

package/package.json

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