myoperator-mcp 0.2.13 → 0.2.14

package/dist/index.js

@@ -1398,6 +1398,160 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
 MultiSelect.displayName = "MultiSelect"
 
 export { MultiSelect, multiSelectTriggerVariants }
+`,
+  "page-header": `import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { ArrowLeft } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * PageHeader variants for layout styles.
+ */
+const pageHeaderVariants = cva(
+  "flex items-center w-full bg-white",
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+)
+
+/**
+ * Page header component for displaying page titles with optional icons and actions.
+ *
+ * @example
+ * \`\`\`tsx
+ * // Simple header with icon
+ * <PageHeader
+ *   icon={<WebhookIcon />}
+ *   title="Webhooks"
+ *   description="Manage your webhook integrations"
+ * />
+ *
+ * // Header with actions
+ * <PageHeader
+ *   icon={<WebhookIcon />}
+ *   title="Webhooks"
+ *   description="Manage your webhook integrations"
+ *   actions={<Button>Add Webhook</Button>}
+ * />
+ *
+ * // Header with back button
+ * <PageHeader
+ *   showBackButton
+ *   onBackClick={() => navigate(-1)}
+ *   title="Edit Webhook"
+ *   description="Modify webhook settings"
+ *   actions={<><Button variant="outline">Cancel</Button><Button>Save</Button></>}
+ * />
+ * \`\`\`
+ */
+export interface PageHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof pageHeaderVariants> {
+  /** Page title (required) */
+  title: string
+  /** Optional description/subtitle displayed below the title */
+  description?: string
+  /** Icon displayed on the left side (hidden when showBackButton is true) */
+  icon?: React.ReactNode
+  /** Shows back arrow button instead of icon */
+  showBackButton?: boolean
+  /** Callback when back button is clicked */
+  onBackClick?: () => void
+  /** Optional info icon displayed next to the title (e.g., tooltip trigger) */
+  infoIcon?: React.ReactNode
+  /** Action buttons/elements rendered on the right side */
+  actions?: React.ReactNode
+}
+
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({
+    className,
+    title,
+    description,
+    icon,
+    showBackButton = false,
+    onBackClick,
+    infoIcon,
+    actions,
+    ...props
+  }, ref) => {
+    // Determine what to show on the left: back button, icon, or nothing
+    const renderLeftElement = () => {
+      if (showBackButton) {
+        return (
+          <button
+            type="button"
+            onClick={onBackClick}
+            className="flex items-center justify-center w-10 h-10 rounded hover:bg-[#F3F4F6] transition-colors text-[#333333]"
+            aria-label="Go back"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+        )
+      }
+      if (icon) {
+        return (
+          <div className="flex items-center justify-center w-10 h-10 [&_svg]:w-6 [&_svg]:h-6 text-[#6B7280]">
+            {icon}
+          </div>
+        )
+      }
+      return null
+    }
+
+    const leftElement = renderLeftElement()
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          pageHeaderVariants(),
+          "h-[76px] px-4 pt-4",
+          className
+        )}
+        {...props}
+      >
+        {/* Left Section: Icon or Back Button */}
+        {leftElement && (
+          <div className="flex-shrink-0 mr-4">
+            {leftElement}
+          </div>
+        )}
+
+        {/* Content Section: Title + Description */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-base font-semibold text-[#333333] truncate">
+              {title}
+            </h1>
+            {infoIcon && (
+              <span className="flex-shrink-0 [&_svg]:w-4 [&_svg]:h-4 text-[#6B7280]">
+                {infoIcon}
+              </span>
+            )}
+          </div>
+          {description && (
+            <p className="text-sm text-[#333333] font-normal mt-1 truncate">
+              {description}
+            </p>
+          )}
+        </div>
+
+        {/* Actions Section */}
+        {actions && (
+          <div className="flex-shrink-0 flex items-center gap-2 ml-4">
+            {actions}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+PageHeader.displayName = "PageHeader"
+
+export { PageHeader, pageHeaderVariants }
 `,
   "select-field": `import * as React from "react"
 import { Loader2 } from "lucide-react"
@@ -2675,6 +2829,55 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
 TextField.displayName = "TextField"
 
 export { TextField, textFieldContainerVariants, textFieldInputVariants }
+`,
+  "tooltip": `import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-[#343E55] px-3 py-1.5 text-xs text-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <TooltipPrimitive.Arrow
+    ref={ref}
+    className={cn("fill-[#343E55]", className)}
+    {...props}
+  />
+))
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipArrow,
+  TooltipProvider,
+}
 `
 };
 var utilsSourceCode = `import { type ClassValue, clsx } from "clsx"
@@ -3170,6 +3373,25 @@ var componentMetadata = {
       }
     ]
   },
+  "page-header": {
+    "name": "PageHeader",
+    "description": "A page header component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic PageHeader",
+        "code": "<PageHeader>Content</PageHeader>",
+        "description": "Simple page header usage"
+      }
+    ]
+  },
   "select-field": {
     "name": "SelectField",
     "description": "A form-ready select component with label, helper text, error handling, and grouped options support.",
@@ -3552,6 +3774,25 @@ var componentMetadata = {
         "description": "Text field showing error state"
       }
     ]
+  },
+  "tooltip": {
+    "name": "Tooltip",
+    "description": "A tooltip component.",
+    "dependencies": [
+      "@radix-ui/react-tooltip",
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic Tooltip",
+        "code": "<Tooltip>Content</Tooltip>",
+        "description": "Simple tooltip usage"
+      }
+    ]
   }
 };
 function getComponentNames() {

package/package.json

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