chore(ts-docs): add annotations for edges

packages/react/src/components/EdgeLabelRenderer/index.tsx

@@ -10,7 +10,8 @@ const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__e
  * Edges are SVG-based. If you want to render more complex labels you can use the
  * `<EdgeLabelRenderer />` component to access a div based renderer. This component
  * is a portal that renders the label in a `<div />` that is positioned on top of
- * the edges. You can see an example usage of the component in the [edge label renderer](/examples/edges/edge-label-renderer) example.
+ * the edges. You can see an example usage of the component in the
+ * [edge label renderer example](/examples/edges/edge-label-renderer).
  * @public
  *
  * @example

packages/react/src/components/Edges/BezierEdge.tsx

@@ -61,7 +61,34 @@ function createBezierEdge(params: { isInternal: boolean }) {
   );
 }
 
+/**
+ * Component that can be used inside a custom edge to render a bezier curve.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { BezierEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <BezierEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const BezierEdge = createBezierEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const BezierEdgeInternal = createBezierEdge({ isInternal: true });
 
 BezierEdge.displayName = 'BezierEdge';

packages/react/src/components/Edges/EdgeAnchor.tsx

@@ -27,6 +27,9 @@ export interface EdgeAnchorProps extends SVGAttributes<SVGGElement> {
 
 const EdgeUpdaterClassName = 'react-flow__edgeupdater';
 
+/**
+ * @internal
+ */
 export function EdgeAnchor({
   position,
   centerX,

packages/react/src/components/Edges/SmoothStepEdge.tsx

@@ -62,7 +62,34 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
   );
 }
 
+/**
+ * Component that can be used inside a custom edge to render a smooth step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { SmoothStepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <SmoothStepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const SmoothStepEdge = createSmoothStepEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: true });
 
 SmoothStepEdge.displayName = 'SmoothStepEdge';

packages/react/src/components/Edges/StepEdge.tsx

@@ -21,7 +21,34 @@ function createStepEdge(params: { isInternal: boolean }) {
   });
 }
 
+/**
+ * Component that can be used inside a custom edge to render a step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <StepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StepEdge = createStepEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const StepEdgeInternal = createStepEdge({ isInternal: true });
 
 StepEdge.displayName = 'StepEdge';

packages/react/src/components/Edges/StraightEdge.tsx

@@ -50,7 +50,32 @@ function createStraightEdge(params: { isInternal: boolean }) {
   );
 }
 
+/**
+ * Component that can be used inside a custom edge to render a straight line.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StraightEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
+ *   return (
+ *     <StraightEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StraightEdge = createStraightEdge({ isInternal: false });
+
+/**
+ * @internal
+ */
 const StraightEdgeInternal = createStraightEdge({ isInternal: true });
 
 StraightEdge.displayName = 'StraightEdge';