feat: Add js Doc comment and readme for duotone control.

packages/block-editor/src/components/duotone-control/README.md

@@ -0,0 +1,87 @@
+# DuotoneControl
+
+A control for applying duotone filters to media elements. It provides a dropdown menu with predefined filters and options for custom duotone settings.
+
+## Usage
+
+Render the component passing in the required props:
+
+```jsx
+import { useState } from '@wordpress/element';
+import { DuotoneControl } from '@wordpress/block-editor';
+
+function Example() {
+    const [value, setValue] = useState('unset');
+
+    return (
+        <DuotoneControl
+            id="example-duotone-control"
+            colorPalette={[
+                { color: '#000000', name: 'Black' },
+                { color: '#FFFFFF', name: 'White' },
+                { color: '#FF0000', name: 'Red' },
+            ]}
+            duotonePalette={[
+                { colors: ['#000000', '#FFFFFF'], name: 'Grayscale' },
+                { colors: ['#FF0000', '#00FF00'], name: 'Sunset' },
+            ]}
+            disableCustomColors={false}
+            disableCustomDuotone={false}
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+        />
+    );
+}
+```
+
+## Props
+
+### `id`
+
+-   **Type:** `string`
+-   **Default:** `undefined`
+
+An optional ID for the component instance. If not provided, an ID will be generated automatically.
+
+### `colorPalette`
+
+-   **Type:** `Array`
+-   **Default:** `undefined`
+
+An array of colors to display in the color palette.
+
+### `duotonePalette`
+
+-   **Type:** `Array`
+-   **Default:** `undefined`
+
+An array of duotone filters to display in the dropdown menu. Each filter should be an object containing `colors`.
+
+### `disableCustomColors`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Whether to disable custom color selection in the palette.
+
+### `disableCustomDuotone`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Whether to disable the ability to create custom duotone filters.
+
+### `value`
+
+-   **Type:** `Array|String`
+-   **Default:** `undefined`
+
+The currently selected duotone filter. Can be `null` or `'unset'` for no filter, or an array of two colors for custom filters.
+
+### `onChange`
+
+-   **Type:** `function`
+-   **Default:** `undefined`
+
+Callback function called when the selected duotone filter changes. Receives the new value as a parameter.
+

packages/block-editor/src/components/duotone-control/index.js

@@ -14,6 +14,50 @@ import { DOWN } from '@wordpress/keycodes';
 import { Icon, filter } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
 
+/**
+ * A control for applying duotone filters to media elements. It provides a dropdown menu
+ * with predefined filters and options for custom duotone settings.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/duotone-control/README.md
+ *
+ * @example
+ * ```jsx
+ * import DuotoneControl from './DuotoneControl';
+ *
+ * function Example() {
+ *   const [value, setValue] = useState('unset');
+ *
+ *   return (
+ *     <DuotoneControl
+ *       id="example-duotone-control"
+ *       colorPalette={[
+ *         { color: '#000000', name: 'Black' },
+ *         { color: '#FFFFFF', name: 'White' },
+ *         { color: '#FF0000', name: 'Red' },
+ *       ]}
+ *       duotonePalette={[
+ *         { colors: ['#000000', '#FFFFFF'], name: 'Grayscale' },
+ *         { colors: ['#FF0000', '#00FF00'], name: 'Sunset' },
+ *       ]}
+ *       disableCustomColors={false}
+ *       disableCustomDuotone={false}
+ *       value={value}
+ *       onChange={(newValue) => setValue(newValue)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props                      Component props.
+ * @param {string}   props.id                   Optional ID for the control.
+ * @param {Array}    props.colorPalette         Array of color options available for custom duotone.
+ * @param {Array}    props.duotonePalette       Array of predefined duotone filter options.
+ * @param {boolean}  props.disableCustomColors  Disable custom color options in duotone.
+ * @param {boolean}  props.disableCustomDuotone Disable custom duotone filter options.
+ * @param {Object}   props.value                The currently selected duotone filter, or 'unset'.
+ * @param {Function} props.onChange             Callback triggered when the duotone value changes.
+ * @return {Element}  Duotone control dropdown.
+ */
 function DuotoneControl( {
 	id: idProp,
 	colorPalette,