{
  "name": "cropper-demo",
  "type": "registry:example",
  "registryDependencies": [
    "cropper"
  ],
  "files": [
    {
      "path": "examples/cropper-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Cropper,\n  CropperArea,\n  CropperImage,\n  type CropperPoint,\n} from \"@/registry/bases/radix/ui/cropper\";\n\nexport default function CropperDemo() {\n  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });\n  const [zoom, setZoom] = React.useState(1);\n\n  return (\n    <Cropper\n      aspectRatio={1}\n      crop={crop}\n      zoom={zoom}\n      onCropChange={setCrop}\n      onZoomChange={setZoom}\n      className=\"min-h-72\"\n    >\n      <CropperImage\n        src=\"https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80\"\n        alt=\"Profile picture\"\n        crossOrigin=\"anonymous\"\n      />\n      <CropperArea />\n    </Cropper>\n  );\n}\n",
      "target": ""
    }
  ]
}