myoperator-mcp 0.2.307 → 0.2.309

package/dist/index.js

@@ -3999,7 +3999,7 @@ const inputVariants = cva(
         default:
           "border border-solid border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-solid border-semantic-error-primary focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
+          "border border-solid border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
       },
     },
     defaultVariants: {
@@ -4079,7 +4079,10 @@ const Input = React.forwardRef(
       <input
         type={type}
         className={cn(
-          inputVariants({ state, className }),
+          inputVariants({ state }),
+          className,
+          state === "error" &&
+            "border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
           showCheckIcon && "pr-9",
           type === "number" &&
             hideNumberSpinners &&
@@ -5838,10 +5841,30 @@ Panel.displayName = "Panel";
 export { Panel, panelVariants };
 `,
   "phone-input": `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+const phoneInputContainerVariants = cva(
+  "flex items-center border border-solid rounded transition-all",
+  {
+    variants: {
+      state: {
+        default:
+          "border-semantic-border-input focus-within:outline-none focus-within:border-semantic-border-input-focus focus-within:ring-1 focus-within:ring-semantic-border-input-focus/15",
+        empty:
+          "border-semantic-border-input focus-within:outline-none focus-within:border-semantic-border-input-focus focus-within:ring-1 focus-within:ring-semantic-border-input-focus/15",
+        error:
+          "border-semantic-error-primary focus-within:outline-none focus-within:border-semantic-error-primary focus-within:ring-1 focus-within:ring-semantic-error-primary/15",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+);
+
 /**
  * A phone number input with a country code prefix area.
  *
@@ -5850,11 +5873,18 @@ import { cn } from "@/lib/utils";
  * <PhoneInput placeholder="Enter phone number" />
  * <PhoneInput countryFlag="\u{1F1FA}\u{1F1F8}" countryCode="+1" />
  * <PhoneInput phoneMaxNumber={10} />
+ * <PhoneInput state="empty" />
+ * <PhoneInput validation="Enter a valid phone number" />
  * <PhoneInput onCountryClick={() => openCountryPicker()} />
  * \`\`\`
  */
 export interface PhoneInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">,
+    VariantProps<typeof phoneInputContainerVariants> {
+  /** Visual validation state of the phone input */
+  state?: "default" | "empty" | "error";
+  /** Validation message displayed below the input. Also applies error styling. */
+  validation?: string;
   /** Country flag emoji (e.g., "\u{1F1EE}\u{1F1F3}", "\u{1F1FA}\u{1F1F8}"). Defaults to "\u{1F1EE}\u{1F1F3}" */
   countryFlag?: string;
   /** Country dial code (e.g., "+91", "+1"). Defaults to "+91" */
@@ -5873,6 +5903,8 @@ const PhoneInput = React.forwardRef(
   (
     {
       className,
+      state,
+      validation,
       countryFlag = "\u{1F1EE}\u{1F1F3}",
       countryCode = "+91",
       showChevron = true,
@@ -5886,11 +5918,21 @@ const PhoneInput = React.forwardRef(
       onKeyDown,
       maxLength,
       phoneMaxNumber,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
       ...props
     }: PhoneInputProps,
     ref: React.Ref<HTMLInputElement>
   ) => {
     const effectiveMaxLength = phoneMaxNumber ?? maxLength;
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const validationId = \`\${inputId}-validation\`;
+    const derivedState = validation ? "error" : (state ?? "default");
+    const describedBy = [ariaDescribedBy, validation ? validationId : undefined]
+      .filter(Boolean)
+      .join(" ");
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       onKeyDown?.(event);
@@ -5935,10 +5977,12 @@ const PhoneInput = React.forwardRef(
       onChange?.(event);
     };
 
-    return (
+    const phoneInput = (
       <div
         className={cn(
-          "flex items-center border border-solid border-semantic-border-input rounded focus-within:outline-none focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)] transition-all",
+          phoneInputContainerVariants({
+            state: derivedState,
+          }),
           disabled && "opacity-60 bg-semantic-bg-ui cursor-not-allowed",
           wrapperClassName
         )}
@@ -5962,11 +6006,14 @@ const PhoneInput = React.forwardRef(
         <div className="w-px h-5 bg-semantic-border-layout shrink-0" />
         <input
           type="tel"
+          id={inputId}
           ref={ref}
           disabled={disabled}
           inputMode={inputMode}
           pattern={pattern}
           maxLength={effectiveMaxLength}
+          aria-invalid={ariaInvalid ?? derivedState === "error"}
+          aria-describedby={describedBy || undefined}
           className={cn(
             "flex-1 h-10 px-3 text-sm text-semantic-text-primary placeholder:text-semantic-text-muted outline-none bg-transparent disabled:cursor-not-allowed",
             className
@@ -5978,11 +6025,24 @@ const PhoneInput = React.forwardRef(
         />
       </div>
     );
+
+    if (!validation) {
+      return phoneInput;
+    }
+
+    return (
+      <div className="flex flex-col gap-1.5">
+        {phoneInput}
+        <p id={validationId} className="m-0 text-sm text-semantic-error-primary">
+          {validation}
+        </p>
+      </div>
+    );
   }
 );
 PhoneInput.displayName = "PhoneInput";
 
-export { PhoneInput };
+export { PhoneInput, phoneInputContainerVariants };
 `,
   "readable-field": `import * as React from "react";
 import { Copy, Check, Eye, EyeOff } from "lucide-react";
@@ -7992,7 +8052,7 @@ const textFieldContainerVariants = cva(
         empty:
           "border border-solid border-semantic-border-input focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-solid border-semantic-error-primary focus-within:border-semantic-error-primary focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
+          "border border-solid border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus-within:border-semantic-error-primary focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
       },
       disabled: {
         true: "cursor-not-allowed opacity-50 bg-[var(--color-neutral-50)]",
@@ -8019,7 +8079,7 @@ const textFieldInputVariants = cva(
         empty:
           "border border-solid border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-solid border-semantic-error-primary focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
+          "border border-solid border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
       },
       size: {
         default: "h-[42px] px-4 py-2 text-base file:text-base",
@@ -8187,7 +8247,12 @@ const TextField = React.forwardRef(
                 "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed",
                 size === "sm" ? "text-sm" : "text-base"
               )
-            : textFieldInputVariants({ state: derivedState, size, className }),
+            : cn(
+                textFieldInputVariants({ state: derivedState, size }),
+                className,
+                derivedState === "error" &&
+                  "border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]"
+              ),
           type === "number" &&
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
         )}
@@ -8237,7 +8302,9 @@ const TextField = React.forwardRef(
                 disabled: disabled || loading,
               }),
               size === "sm" ? "h-9 px-3" : "h-[42px] px-4",
-              inputContainerClassName
+              inputContainerClassName,
+              derivedState === "error" &&
+                "border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus-within:border-semantic-error-primary focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]"
             )}
           >
             {prefix && (
@@ -8346,7 +8413,7 @@ const textareaVariants = cva(
         default:
           "border border-solid border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-solid border-semantic-error-primary focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
+          "border border-solid border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
       },
       size: {
         default: "px-4 py-2.5 text-base",
@@ -8519,7 +8586,10 @@ const Textarea = React.forwardRef(
           id={textareaId}
           rows={rows}
           className={cn(
-            textareaVariants({ state: derivedState, size, className }),
+            textareaVariants({ state: derivedState, size }),
+            className,
+            derivedState === "error" &&
+              "border-semantic-error-primary shadow-[0_0_0_1px_rgba(240,68,56,0.12)] focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
             resizeClasses[resize]
           )}
           disabled={disabled}

package/package.json

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