{
  "name": "cropper-controlled-demo",
  "type": "registry:example",
  "registryDependencies": [
    "cropper",
    "button",
    "label",
    "slider"
  ],
  "files": [
    {
      "path": "examples/cropper-controlled-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Cropper,\n  CropperArea,\n  CropperImage,\n  type CropperPoint,\n} from \"@/registry/bases/radix/ui/cropper\";\nimport { Label } from \"@/registry/bases/radix/ui/label\";\nimport { Slider } from \"@/registry/bases/radix/ui/slider\";\n\nexport default function CropperControlledDemo() {\n  const id = React.useId();\n  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });\n  const [zoom, setZoom] = React.useState(1);\n  const [rotation, setRotation] = React.useState(0);\n\n  const onCropReset = React.useCallback(() => {\n    setCrop({ x: 0, y: 0 });\n    setZoom(1);\n    setRotation(0);\n  }, []);\n\n  return (\n    <div className=\"relative flex size-full max-w-lg flex-col gap-4\">\n      <Cropper\n        aspectRatio={1}\n        crop={crop}\n        zoom={zoom}\n        rotation={rotation}\n        onCropChange={setCrop}\n        onZoomChange={setZoom}\n        onRotationChange={setRotation}\n        className=\"min-h-[260px]\"\n      >\n        <CropperImage\n          src=\"https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80\"\n          alt=\"Landscape\"\n          crossOrigin=\"anonymous\"\n        />\n        <CropperArea />\n      </Cropper>\n      <div className=\"flex flex-col items-center gap-4 sm:flex-row\">\n        <div className=\"flex w-full flex-col gap-2.5\">\n          <Label htmlFor={`${id}-zoom`}>Zoom: {zoom.toFixed(2)}</Label>\n          <Slider\n            id={`${id}-zoom`}\n            value={[zoom]}\n            onValueChange={(value) => setZoom(value[0] ?? 1)}\n            min={1}\n            max={3}\n            step={0.1}\n          />\n        </div>\n        <div className=\"flex w-full flex-col gap-2.5\">\n          <Label htmlFor={`${id}-rotation`}>\n            Rotation: {rotation.toFixed(0)}°\n          </Label>\n          <Slider\n            id={`${id}-rotation`}\n            value={[rotation]}\n            onValueChange={(value) => setRotation(value[0] ?? 0)}\n            min={-180}\n            max={180}\n            step={1}\n          />\n        </div>\n      </div>\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        className=\"absolute top-3 right-2 size-8\"\n        onClick={onCropReset}\n      >\n        <RotateCcwIcon />\n      </Button>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}