{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-cropper",
  "title": "Image Cropper",
  "description": "A shadcn-style image cropper component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/image-cropper.tsx",
      "content": "\"use client\";\n\nimport { ImageCropper as ImageCropperPrimitive } from \"@ark-ui/react/image-cropper\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const imageCropperHandles = ImageCropperPrimitive.handles;\n\nconst imageCropperRootLayoutClass =\n  \"relative flex w-full max-w-lg flex-col gap-4 text-foreground [--cropper-accent:theme(colors.primary)] [--cropper-handler-size:6px] [--cropper-handler-width:3px] [--cropper-line-width:2px] [--cropper-overlay-color:rgb(0_0_0/0.5)]\";\n\nexport const ImageCropper = ({\n  className,\n  ...props\n}: ImageCropperPrimitive.RootProps) => (\n  <ImageCropperPrimitive.Root\n    data-slot=\"image-cropper\"\n    className={cn(imageCropperRootLayoutClass, className)}\n    {...props}\n  />\n);\n\nexport const ImageCropperRootProvider = ({\n  className,\n  ...props\n}: ImageCropperPrimitive.RootProviderProps) => (\n  <ImageCropperPrimitive.RootProvider\n    data-slot=\"image-cropper\"\n    className={cn(imageCropperRootLayoutClass, className)}\n    {...props}\n  />\n);\n\nexport const ImageCropperViewport = ({\n  className,\n  ...props\n}: ImageCropperPrimitive.ViewportProps) => (\n  <ImageCropperPrimitive.Viewport\n    data-slot=\"image-cropper-viewport\"\n    className={cn(\n      \"relative aspect-video w-full overflow-hidden rounded-lg bg-muted\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const ImageCropperImage = ({\n  className,\n  ...props\n}: ImageCropperPrimitive.ImageProps) => (\n  <ImageCropperPrimitive.Image\n    data-slot=\"image-cropper-image\"\n    className={cn(\n      \"pointer-events-none absolute inset-0 size-full select-none object-contain backface-hidden origin-center\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const ImageCropperSelection = ({\n  className,\n  ...props\n}: ImageCropperPrimitive.SelectionProps) => (\n  <ImageCropperPrimitive.Selection\n    data-slot=\"image-cropper-selection\"\n    className={cn(\n      \"box-border cursor-move outline-none backface-hidden\",\n      \"[box-shadow:0_0_0_9999px_var(--cropper-overlay-color)]\",\n      \"border-(length:--cropper-line-width) border-white/50\",\n      \"data-[shape=circle]:rounded-full\",\n      \"focus-visible:border-primary\",\n      \"data-disabled:cursor-default\",\n      \"data-dragging:cursor-grabbing data-dragging:border-white/80\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const ImageCropperHandle = ({\n  className,\n  children,\n  ...props\n}: ImageCropperPrimitive.HandleProps) => (\n  <ImageCropperPrimitive.Handle\n    data-slot=\"image-cropper-handle\"\n    className={cn(\n      \"absolute flex size-[calc(var(--cropper-handler-size)+8px)] touch-none items-center justify-center\",\n      \"data-disabled:hidden\",\n      \"data-[position=bottom]:cursor-ns-resize data-[position=top]:cursor-ns-resize\",\n      \"data-[position=left]:cursor-ew-resize data-[position=right]:cursor-ew-resize\",\n      \"data-[position=bottom-left]:cursor-nesw-resize data-[position=bottom-right]:cursor-nwse-resize\",\n      \"data-[position=top-left]:cursor-nwse-resize data-[position=top-right]:cursor-nesw-resize\",\n      \"[&>div]:size-(--cropper-handler-size) [&>div]:rounded-full [&>div]:border-2 [&>div]:border-primary [&>div]:bg-background [&>div]:shadow-sm\",\n      className,\n    )}\n    {...props}\n  >\n    {children ?? <div />}\n  </ImageCropperPrimitive.Handle>\n);\n\nexport const ImageCropperGrid = ({\n  className,\n  ...props\n}: ImageCropperPrimitive.GridProps) => (\n  <ImageCropperPrimitive.Grid\n    data-slot=\"image-cropper-grid\"\n    className={cn(\n      \"pointer-events-none absolute opacity-0 transition-opacity\",\n      \"data-[axis=horizontal]:inset-[33.33%_0] data-[axis=horizontal]:border-y data-[axis=horizontal]:border-white/40\",\n      \"data-[axis=vertical]:inset-[0_33.33%] data-[axis=vertical]:border-x data-[axis=vertical]:border-white/40\",\n      \"data-dragging:opacity-100 data-panning:opacity-100\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type {\n  ImageCropperContextProps,\n  ImageCropperCropChangeDetails,\n  ImageCropperFlipChangeDetails,\n  ImageCropperFlipState,\n  ImageCropperHandlePosition,\n  ImageCropperRotationChangeDetails,\n  ImageCropperZoomChangeDetails,\n  UseImageCropperContext,\n  UseImageCropperProps,\n  UseImageCropperReturn,\n} from \"@ark-ui/react/image-cropper\";\nexport {\n  ImageCropperContext,\n  imageCropperAnatomy,\n  useImageCropper,\n  useImageCropperContext,\n} from \"@ark-ui/react/image-cropper\";\n",
      "type": "registry:ui",
      "target": "src/components/ui/image-cropper.tsx"
    }
  ],
  "type": "registry:ui"
}