{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-563",
  "type": "registry:component",
  "title": "Comp 563",
  "description": "Comp 563",
  "files": [
    {
      "path": "registry/ui-basic/comp-563.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport {\n\tCropper,\n\tCropperCropArea,\n\tCropperDescription,\n\tCropperImage,\n} from \"@/components/ui/cropper\";\n\ntype Area = { x: number; y: number; width: number; height: number };\n\nexport default function Component() {\n\tconst [cropData, setCropData] = React.useState<Area | null>(null);\n\n\treturn (\n\t\t<div className=\"flex flex-col items-center gap-2\">\n\t\t\t<div className=\"flex w-full flex-col gap-4\">\n\t\t\t\t<Cropper\n\t\t\t\t\tclassName=\"h-80\"\n\t\t\t\t\tcropPadding={20}\n\t\t\t\t\timage=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-09_qskkln.jpg\"\n\t\t\t\t\tonCropChange={setCropData}\n\t\t\t\t>\n\t\t\t\t\t<CropperDescription />\n\t\t\t\t\t<CropperImage />\n\t\t\t\t\t<CropperCropArea />\n\t\t\t\t</Cropper>\n\n\t\t\t\t{cropData && (\n\t\t\t\t\t<pre className=\"bg-muted text-foreground/80 overflow-auto rounded-md border px-4 py-3 font-mono text-xs\">\n\t\t\t\t\t\t<code>{JSON.stringify(cropData, null, 2)}</code>\n\t\t\t\t\t</pre>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<p\n\t\t\t\taria-live=\"polite\"\n\t\t\t\trole=\"region\"\n\t\t\t\tclassName=\"text-muted-foreground mt-2 text-xs\"\n\t\t\t>\n\t\t\t\tCropper with crop data output ∙{\" \"}\n\t\t\t\t<a\n\t\t\t\t\thref=\"https://github.com/origin-space/image-cropper\"\n\t\t\t\t\tclassName=\"hover:text-foreground underline\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t>\n\t\t\t\t\tAPI\n\t\t\t\t</a>\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}