# ImageCropper Documentation

## Installation

```bash
jsrepo add ui/image-cropper
```

## Components

### Root

The root component for the image cropper. Handles image upload, cropping, and state management.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| src | string | - | false | true | The image source URL. Bind this to get the cropped image. |
| onCropped | (url: string) => void | - | false | false | Callback fired when cropping is complete. Receives the cropped image URL. |
| onUnsupportedFile | (file: File) => void | - | false | false | Callback fired when an unsupported file is uploaded. Receives the File object. |
| children | Snippet | - | false | false | The content of the image cropper. |

### Dialog

Dialog wrapper for the image cropper. Forwards all props and behavior to the shadcn-svelte Dialog component.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|


### Cropper

The cropper area for selecting the crop region. Forwards all props and behavior to svelte-easy-crop.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|


### Controls

Container for cropper controls.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLDivElement | null | false | true | A reference to the controls container. |
| children | Snippet | - | false | false | The content of the controls. |

### Preview

Displays a preview of the cropped image.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| child | Snippet<[{ src: string }]> | - | false | false | A render function for custom preview content. |

### UploadTrigger

The trigger for uploading an image.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLLabelElement | null | false | true | A reference to the upload trigger label. |
| children | Snippet | - | false | false | The content of the upload trigger. |