myoperator-mcp 0.2.387 → 0.2.389

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>
     );

package/package.json

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