myoperator-ui 0.0.74 → 0.0.76

package/dist/index.js

@@ -2564,6 +2564,69 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
 }
+`, prefix)
+        }
+      ]
+    },
+    "tooltip": {
+      name: "tooltip",
+      description: "A popup that displays information related to an element when hovered or focused",
+      dependencies: [
+        "@radix-ui/react-tooltip",
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "tooltip.tsx",
+          content: prefixTailwindClasses(`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,
+}
 `, prefix)
         }
       ]
@@ -3059,6 +3122,176 @@ export {
   accordionTriggerVariants,
   accordionContentVariants,
 }
+`, prefix)
+        }
+      ]
+    },
+    "page-header": {
+      name: "page-header",
+      description: "A page header component with icon, title, description, and action buttons",
+      dependencies: [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      files: [
+        {
+          name: "page-header.tsx",
+          content: prefixTailwindClasses(`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,
+    variant,
+    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({ variant }),
+          "h-[76px] px-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 }
 `, prefix)
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",