{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "node-header",
	"type": "registry:ui",
	"registryDependencies": ["button", "dropdown-menu"],
	"files": [
		{
			"path": "./src/registry/ui/flow/node-header.tsx",
			"content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { EllipsisVertical } from \"lucide-react\";\nimport React, { type ComponentProps } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\n/* NODE HEADER -------------------------------------------------------------- */\n\nexport type NodeHeaderProps = React.HTMLAttributes<HTMLElement>;\n\n/**\n * A container for a consistent header layout intended to be used inside the\n * `<BaseNode />` component.\n */\nexport const NodeHeader = React.forwardRef<HTMLElement, NodeHeaderProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<header\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"mb-4 flex items-center justify-between gap-2 px-3 py-2\",\n\t\t\t\t\t// Remove or modify these classes if you modify the padding in the\n\t\t\t\t\t// `<BaseNode />` component.\n\t\t\t\t\t\"-mx-5 -mt-5\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nNodeHeader.displayName = \"NodeHeader\";\n\n/* NODE HEADER TITLE -------------------------------------------------------- */\n\nexport interface NodeHeaderTitleProps\n\textends React.HTMLAttributes<HTMLHeadingElement> {\n\tasChild?: boolean;\n}\n\n/**\n * The title text for the node. To maintain a native application feel, the title\n * text is not selectable.\n */\nexport const NodeHeaderTitle = React.forwardRef<\n\tHTMLHeadingElement,\n\tNodeHeaderTitleProps\n>(({ className, asChild, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Comp\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tclassName={cn(className, \"user-select-none flex-1 font-semibold\")}\n\t\t/>\n\t);\n});\n\nNodeHeaderTitle.displayName = \"NodeHeaderTitle\";\n\n/* NODE HEADER ICON --------------------------------------------------------- */\n\nexport type NodeHeaderIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const NodeHeaderIcon = React.forwardRef<\n\tHTMLSpanElement,\n\tNodeHeaderIconProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<span ref={ref} {...props} className={cn(className, \"[&>*]:size-5\")} />\n\t);\n});\n\nNodeHeaderIcon.displayName = \"NodeHeaderIcon\";\n\n/* NODE HEADER ACTIONS ------------------------------------------------------ */\n\nexport type NodeHeaderActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * A container for right-aligned action buttons in the node header.\n */\nexport const NodeHeaderActions = React.forwardRef<\n\tHTMLDivElement,\n\tNodeHeaderActionsProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto flex items-center gap-1 justify-self-end\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t/>\n\t);\n});\n\nNodeHeaderActions.displayName = \"NodeHeaderActions\";\n\n/* NODE HEADER ACTION ------------------------------------------------------- */\n\nexport interface NodeHeaderActionProps extends ComponentProps<typeof Button> {\n\tlabel: string;\n}\n\n/**\n * A thin wrapper around the `<Button />` component with a fixed sized suitable\n * for icons.\n *\n * Beacuse the `<NodeHeaderAction />` component is intended to render icons, it's\n * important to provide a meaningful and accessible `label` prop that describes\n * the action.\n */\nexport const NodeHeaderAction = React.forwardRef<\n\tHTMLButtonElement,\n\tNodeHeaderActionProps\n>(({ className, label, title, ...props }, ref) => {\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tvariant=\"ghost\"\n\t\t\taria-label={label}\n\t\t\ttitle={title ?? label}\n\t\t\tclassName={cn(className, \"nodrag size-6 p-1\")}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nNodeHeaderAction.displayName = \"NodeHeaderAction\";\n\nexport type NodeHeaderMenuActionProps = Omit<\n\tNodeHeaderActionProps,\n\t\"onClick\"\n> & {\n\ttrigger?: React.ReactNode;\n};\n\n/**\n * Renders a header action that opens a dropdown menu when clicked. The dropdown\n * trigger is a button with an ellipsis icon. The trigger's content can be changed\n * by using the `trigger` prop.\n *\n * Any children passed to the `<NodeHeaderMenuAction />` component will be rendered\n * inside the dropdown menu. You can read the docs for the shadcn dropdown menu\n * here: https://ui.shadcn.com/docs/components/dropdown-menu\n *\n */\nexport const NodeHeaderMenuAction = React.forwardRef<\n\tHTMLButtonElement,\n\tNodeHeaderMenuActionProps\n>(({ trigger, children, ...props }, ref) => {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<NodeHeaderAction ref={ref} {...props}>\n\t\t\t\t\t{trigger ?? <EllipsisVertical />}\n\t\t\t\t</NodeHeaderAction>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>{children}</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n});\n\nNodeHeaderMenuAction.displayName = \"NodeHeaderMenuAction\";\n",
			"type": "registry:ui",
			"target": "components/flow/node-header.tsx"
		}
	]
}