chore(comps): tsdoc update

packages/react/src/additional-components/Controls/ControlButton.tsx

@@ -2,6 +2,29 @@ import cc from 'classcat';
 
 import type { ControlButtonProps } from './types';
 
+/**
+ * You can add buttons to the control panel by using the `<ControlButton />` component
+ *and pass it as a child to the [`<Controls />`](/api-reference/components/controls) component.
+ *
+ * @public
+ * @example
+ *```jsx
+ *import { MagicWand } from '@radix-ui/react-icons'
+ *import { ReactFlow, Controls, ControlButton } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (
+ *    <ReactFlow nodes={[...]} edges={[...]}>
+ *      <Controls>
+ *        <ControlButton onClick={() => alert('Something magical just happened. ✨')}>
+ *          <MagicWand />
+ *        </ControlButton>
+ *      </Controls>
+ *    </ReactFlow>
+ *  )
+ *}
+ *```
+ */
 export function ControlButton({ children, className, ...rest }: ControlButtonProps) {
   return (
     <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>

packages/react/src/additional-components/Controls/Controls.tsx

@@ -125,4 +125,26 @@ function ControlsComponent({
 
 ControlsComponent.displayName = 'Controls';
 
+/**
+ * The `<Controls />` component renders a small panel that contains convenient
+ *buttons to zoom in, zoom out, fit the view, and lock the viewport.
+ *
+ * @public
+ * @example
+ *```tsx
+ *import { ReactFlow, Controls } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (
+ *    <ReactFlow nodes={[...]} edges={[...]}>
+ *      <Controls />
+ *    </ReactFlow>
+ *  )
+ *}
+ *```
+ *
+ * @remarks To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button)
+ *component
+ *
+ */
 export const Controls = memo(ControlsComponent);