{
  "name": "cropper-shapes-demo",
  "type": "registry:example",
  "registryDependencies": [
    "cropper",
    "label",
    "select",
    "switch"
  ],
  "files": [
    {
      "path": "examples/cropper-shapes-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Cropper,\n  CropperArea,\n  CropperImage,\n  type CropperObjectFit,\n  type CropperPoint,\n  type CropperProps,\n  type CropperShape,\n} from \"@/registry/bases/base/ui/cropper\";\nimport { Label } from \"@/registry/bases/base/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\";\nimport { Switch } from \"@/registry/bases/base/ui/switch\";\n\nconst shapes: { label: string; value: CropperShape }[] = [\n  { label: \"Rectangle\", value: \"rectangle\" },\n  { label: \"Circle\", value: \"circle\" },\n] as const;\n\nconst objectFits: { label: string; value: CropperObjectFit }[] = [\n  { label: \"Contain\", value: \"contain\" },\n  { label: \"Cover\", value: \"cover\" },\n  { label: \"Horizontal Cover\", value: \"horizontal-cover\" },\n  { label: \"Vertical Cover\", value: \"vertical-cover\" },\n] as const;\n\nexport default function CropperShapesDemo() {\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 [shape, setShape] =\n    React.useState<NonNullable<CropperShape>>(\"rectangle\");\n  const [objectFit, setObjectFit] =\n    React.useState<NonNullable<CropperObjectFit>>(\"contain\");\n  const [withGrid, setWithGrid] = React.useState(false);\n  const [allowOverflow, setAllowOverflow] = React.useState(false);\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"grid grid-cols-2 gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Label htmlFor={`${id}-shape`}>Shape:</Label>\n          <Select\n            value={shape}\n            onValueChange={(value: CropperShape | null) => {\n              if (value) setShape(value);\n            }}\n          >\n            <SelectTrigger id={`${id}-shape`} size=\"sm\" className=\"w-32\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {shapes.map((s) => (\n                <SelectItem key={s.value} value={s.value}>\n                  {s.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Label htmlFor={`${id}-object-fit`}>Object Fit:</Label>\n          <Select\n            value={objectFit}\n            onValueChange={(value: CropperObjectFit | null) => {\n              if (value) setObjectFit(value);\n            }}\n          >\n            <SelectTrigger id={`${id}-object-fit`} size=\"sm\" className=\"w-36\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {objectFits.map((fit) => (\n                <SelectItem key={fit.value} value={fit.value}>\n                  {fit.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch\n            id={`${id}-grid`}\n            checked={withGrid}\n            onCheckedChange={setWithGrid}\n          />\n          <Label htmlFor={`${id}-grid`}>Show Grid</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch\n            id={`${id}-overflow`}\n            checked={allowOverflow}\n            onCheckedChange={setAllowOverflow}\n          />\n          <Label htmlFor={`${id}-overflow`}>Allow Overflow</Label>\n        </div>\n      </div>\n      <Cropper\n        aspectRatio={1}\n        crop={crop}\n        zoom={zoom}\n        shape={shape}\n        objectFit={objectFit}\n        withGrid={withGrid}\n        allowOverflow={allowOverflow}\n        onCropChange={setCrop}\n        onZoomChange={setZoom}\n        className=\"min-h-72\"\n      >\n        <CropperImage\n          src=\"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80\"\n          alt=\"Forest landscape\"\n          crossOrigin=\"anonymous\"\n        />\n        <CropperArea />\n      </Cropper>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}