` representing the visual crop area. You style this component to show the bounds.\n* **`Cropper.Description`**: Renders a `
` intended for accessibility instructions. Its `id` is automatically linked via `aria-describedby` on the `Root` element. **This component is required for accessibility.**\n\n## `Cropper.Root` Props\n\n| Prop | Type | Default | Description |\n|------------------|--------------------------------|-------------|--------------------------------------------------------------------------------------------------------------|\n| `image` | `string` | **Required**| URL of the image to crop. |\n| `children` | `React.ReactNode` | **Required**| Should include `Cropper.Image`, `Cropper.CropArea`, and `Cropper.Description`. |\n| `aspectRatio` | `number` | `1` | The desired width/height aspect ratio (e.g., `1`, `1.5`, `4 / 3`, `16 / 9`). |\n| `cropPadding` | `number` | `25` | Minimum padding (in pixels) between the crop area edges and the container edges. |\n| `minZoom` | `number` | `1` | Minimum zoom level (1 = 100% original size relative to crop area). |\n| `maxZoom` | `number` | `3` | Maximum zoom level. |\n| `zoomSensitivity`| `number` | `0.005` | Multiplier for mouse wheel delta to control zoom speed. |\n| `keyboardStep` | `number` | `10` | Number of pixels to pan the image when using arrow keys. |\n| `zoom` | `number` | `undefined` | Controlled zoom level. If provided, component zoom state is controlled externally. |\n| `onCropChange` | `(pixels: Area \\| null) => void` | `undefined` | Callback function triggered whenever the crop area changes. Receives pixel data or `null` if invalid. |\n| `onZoomChange` | `(zoom: number) => void` | `undefined` | Callback function triggered when the zoom level changes interactively. Essential for controlled `zoom` prop. |\n| `className` | `string` | `undefined` | CSS class for the root container element. |\n| `style` | `React.CSSProperties` | `undefined` | Inline styles for the root container element. |\n| *...restProps* | | | Any other standard `HTMLDivElement` props are passed to the root container. |\n\n### `onCropChange` Data (`Area`)\n\nThe `Area` object received by `onCropChange` contains the following properties relative to the *original* image dimensions:\n\n* `x`: The x-coordinate of the top-left corner of the cropped area.\n* `y`: The y-coordinate of the top-left corner of the cropped area.\n* `width`: The width of the cropped area in pixels.\n* `height`: The height of the cropped area in pixels.\n\n## Accessibility\n\nIt is crucial to include a `Cropper.Description` component within `Cropper.Root`. This provides necessary context for screen reader users about how to interact with the cropper. If you don't provide one, a warning will appear in the console. You can visually hide the description using standard CSS techniques (e.g., an `sr-only` class).\n\n## Styling\n\nThe component is headless, meaning it doesn't come with built-in styles beyond basic positioning for the image. You are expected to style the `Cropper.Root`, `Cropper.Image`, and especially the `Cropper.CropArea` using CSS classes (`className`) or inline styles (`style`) to match your application's design. The `Cropper.CropArea` typically needs styling to appear as an overlay (e.g., border, semi-transparent background outside the area).\n\n## License\n\nMIT\n","readmeFilename":"README.md"}