labeled-handle

1"use client";
2 
3import type { HandleProps } from "@xyflow/react";
4import React from "react";
5import { cn } from "@/lib/utils";
6 
7import { BaseHandle } from "@/registry/ui/flow/base-handle";
8 
9const flexDirections = {
10	top: "flex-col",
11	right: "flex-row-reverse justify-end",
12	bottom: "flex-col-reverse justify-end",
13	left: "flex-row",
14};
15 
16const LabeledHandle = React.forwardRef<
17	HTMLDivElement,
18	HandleProps &
19		React.HTMLAttributes<HTMLDivElement> & {
20			title: string;
21			handleClassName?: string;
22			labelClassName?: string;
23		}
24>(
25	(
26		{
27			className,
28			labelClassName,
29			handleClassName,
30			title,
31			position,
32			...props
33		},
34		ref,
35	) => (
36		<div
37			ref={ref}
38			title={title}
39			className={cn(
40				"relative flex items-center",
41				flexDirections[position],
42				className,
43			)}
44		>
45			<BaseHandle
46				position={position}
47				className={handleClassName}
48				{...props}
49			/>
50			{/* biome-ignore lint/a11y/noLabelWithoutControl: Needed */}
51			<label className={cn("px-3 text-foreground", labelClassName)}>
52				{title}
53			</label>
54		</div>
55	),
56);
57 
58LabeledHandle.displayName = "LabeledHandle";
59 
60export { LabeledHandle };