myoperator-mcp 0.2.166 → 0.2.168

package/dist/index.js

@@ -2910,10 +2910,29 @@ export interface InputProps
     VariantProps<typeof inputVariants> {
   /** Shows a check icon on the right side when the input is focused */
   showCheckIcon?: boolean;
+  /**
+   * When \`type="number"\`, hide native stepper arrows (WebKit/Firefox).
+   * Default \`true\` \u2014 matches existing app-wide number styling.
+   * Set \`false\` to show native increment/decrement controls (e.g. delay fields).
+   */
+  hideNumberSpinners?: boolean;
 }
 
 const Input = React.forwardRef(
-  ({ className, state, type, showCheckIcon, onFocus, onBlur, onWheel, ...props }: InputProps, ref: React.Ref<HTMLInputElement>) => {
+  (
+    {
+      className,
+      state,
+      type,
+      showCheckIcon,
+      hideNumberSpinners = true,
+      onFocus,
+      onBlur,
+      onWheel,
+      ...props
+    }: InputProps,
+    ref: React.Ref<HTMLInputElement>
+  ) => {
     const [isFocused, setIsFocused] = React.useState(false);
 
     const inputEl = (
@@ -2923,6 +2942,7 @@ const Input = React.forwardRef(
           inputVariants({ state, className }),
           showCheckIcon && "pr-9",
           type === "number" &&
+            hideNumberSpinners &&
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
         )}
         ref={ref}
@@ -3402,6 +3422,149 @@ const MultiSelect = React.forwardRef(
 MultiSelect.displayName = "MultiSelect";
 
 export { MultiSelect, multiSelectTriggerVariants };
+`,
+  "number-step-field": `import * as React from "react";
+import { cva } from "class-variance-authority";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Input } from "./input";
+
+const numberStepFieldVariants = cva(
+  "flex min-w-0 w-full flex-1",
+  {
+    variants: {
+      layout: {
+        default: "",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+);
+
+function clampInt(n: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, Math.floor(n)));
+}
+
+function parseOptionalInt(raw: string): number | null {
+  if (raw === "") return 0;
+  const n = Number.parseInt(raw, 10);
+  return Number.isNaN(n) ? null : n;
+}
+
+export interface NumberStepFieldProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "onChange" | "children" | "onBlur"
+  > {
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Trailing label inside the field (e.g. \`hour\`, \`minutes\`). */
+  suffix: string;
+  disabled?: boolean;
+  "aria-label"?: string;
+  incrementAriaLabel?: string;
+  decrementAriaLabel?: string;
+  /** Called when the number input loses focus (e.g. validation). */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+
+const NumberStepField = React.forwardRef<HTMLDivElement, NumberStepFieldProps>(
+  (
+    {
+      className,
+      value,
+      onValueChange,
+      min = 0,
+      max = Number.MAX_SAFE_INTEGER,
+      step = 1,
+      suffix,
+      disabled,
+      "aria-label": ariaLabel,
+      incrementAriaLabel,
+      decrementAriaLabel,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const handleChange = (raw: string) => {
+      const parsed = parseOptionalInt(raw);
+      if (parsed === null) return;
+      onValueChange(clampInt(parsed, min, max));
+    };
+
+    const stepUp = () => {
+      onValueChange(clampInt(value + step, min, max));
+    };
+
+    const stepDown = () => {
+      onValueChange(clampInt(value - step, min, max));
+    };
+
+    const atMax = value >= max;
+    const atMin = value <= min;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(numberStepFieldVariants({ layout: "default" }), className)}
+        {...props}
+      >
+        <div className="flex min-w-0 flex-1 items-stretch rounded-md border border-solid border-semantic-border-input overflow-hidden focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]">
+          <Input
+            type="number"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            onBlur={onBlur}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            hideNumberSpinners
+            className="rounded-none border-0 h-10 min-w-0 flex-1 bg-semantic-bg-primary px-3 py-2 focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none"
+          />
+          {/* Inline steppers on the right inside the white field (before unit suffix) */}
+          <div className="flex h-10 w-7 shrink-0 flex-col bg-semantic-bg-primary pr-0.5">
+            <button
+              type="button"
+              disabled={disabled || atMax}
+              onClick={stepUp}
+              aria-label={incrementAriaLabel ?? "Increase value"}
+              className="flex min-h-0 flex-1 items-center justify-center text-semantic-text-muted hover:bg-semantic-bg-hover hover:text-semantic-text-primary disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-semantic-primary"
+            >
+              <ChevronUp className="size-3.5" strokeWidth={2} />
+            </button>
+            <button
+              type="button"
+              disabled={disabled || atMin}
+              onClick={stepDown}
+              aria-label={decrementAriaLabel ?? "Decrease value"}
+              className="flex min-h-0 flex-1 items-center justify-center text-semantic-text-muted hover:bg-semantic-bg-hover hover:text-semantic-text-primary disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-semantic-primary"
+            >
+              <ChevronDown className="size-3.5" strokeWidth={2} />
+            </button>
+          </div>
+          <span
+            className="inline-flex items-center px-2.5 shrink-0 bg-semantic-bg-ui text-sm text-semantic-text-secondary"
+            aria-hidden
+          >
+            {suffix}
+          </span>
+        </div>
+      </div>
+    );
+  }
+);
+NumberStepField.displayName = "NumberStepField";
+
+export { NumberStepField, numberStepFieldVariants };
 `,
   "page-header": `import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -8016,6 +8179,25 @@ var componentMetadata = {
       }
     ]
   },
+  "number-step-field": {
+    "name": "NumberStepField",
+    "description": "A number step field component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic NumberStepField",
+        "code": "<NumberStepField>Content</NumberStepField>",
+        "description": "Simple number step field usage"
+      }
+    ]
+  },
   "page-header": {
     "name": "PageHeader",
     "description": "A page header component.",

package/package.json

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