{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-zoom",
  "title": "Image Zoom",
  "description": "Image zoom is a component that allows you to zoom in on an image.",
  "dependencies": ["react-medium-image-zoom"],
  "files": [
    {
      "path": "components/shadcncraft/pro-ecommerce/image-zoom.tsx",
      "content": "\"use client\";\n\nimport Zoom, {\n  Controlled,\n  type ControlledProps,\n  type UncontrolledProps,\n} from \"react-medium-image-zoom\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst classDialog = cn(\n  \"[&::backdrop]:hidden\",\n  \"[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0\",\n  \"[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all\",\n  '[&_[data-rmiz-modal-overlay=\"hidden\"]]:bg-transparent',\n  '[&_[data-rmiz-modal-overlay=\"visible\"]]:bg-background/80 [&_[data-rmiz-modal-overlay=\"visible\"]]:backdrop-blur-md',\n  \"[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full\",\n  \"[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform\",\n  \"motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none\"\n);\n\nexport type ImageZoomProps = UncontrolledProps & {\n  className?: string;\n  backdropClassName?: string;\n};\n\nexport const ImageZoom = ({ className, backdropClassName, ...props }: ImageZoomProps) => (\n  <Wrapper className={className}>\n    <Zoom classDialog={cn(classDialog, backdropClassName)} {...props} />\n  </Wrapper>\n);\n\nexport type ImageZoomControlledProps = ControlledProps & {\n  className?: string;\n  backdropClassName?: string;\n};\n\nexport const ImageZoomControlled = ({\n  className,\n  backdropClassName,\n  ...props\n}: ImageZoomControlledProps) => (\n  <Wrapper className={className}>\n    <Controlled classDialog={cn(classDialog, backdropClassName)} {...props} />\n  </Wrapper>\n);\n\nconst wrapperClasses = cn(\n  \"relative\",\n  // Ghost placeholder\n  \"[&_[data-rmiz-ghost]]:pointer-events-none [&_[data-rmiz-ghost]]:absolute\",\n  // Button base styles\n  \"[&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-[50%] [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:outline-offset-2\",\n  \"[&_[data-rmiz-btn-unzoom]]:m-0 [&_[data-rmiz-btn-unzoom]]:size-10 [&_[data-rmiz-btn-unzoom]]:touch-manipulation [&_[data-rmiz-btn-unzoom]]:appearance-none [&_[data-rmiz-btn-unzoom]]:rounded-[50%] [&_[data-rmiz-btn-unzoom]]:border-none [&_[data-rmiz-btn-unzoom]]:bg-foreground/70 [&_[data-rmiz-btn-unzoom]]:p-2 [&_[data-rmiz-btn-unzoom]]:text-background [&_[data-rmiz-btn-unzoom]]:outline-offset-2\",\n  // Zoom button: visually hidden until focused/active (SR-accessible)\n  \"[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]\",\n  // Button positions\n  \"[&_[data-rmiz-btn-zoom]]:absolute [&_[data-rmiz-btn-zoom]]:top-2.5 [&_[data-rmiz-btn-zoom]]:right-2.5 [&_[data-rmiz-btn-zoom]]:bottom-auto [&_[data-rmiz-btn-zoom]]:left-auto [&_[data-rmiz-btn-zoom]]:cursor-zoom-in\",\n  \"[&_[data-rmiz-btn-unzoom]]:absolute [&_[data-rmiz-btn-unzoom]]:top-5 [&_[data-rmiz-btn-unzoom]]:right-5 [&_[data-rmiz-btn-unzoom]]:bottom-auto [&_[data-rmiz-btn-unzoom]]:left-auto [&_[data-rmiz-btn-unzoom]]:z-[1] [&_[data-rmiz-btn-unzoom]]:cursor-zoom-out\",\n  // Cursor for zoomable content\n  '[&_[data-rmiz-content=\"found\"]_img]:cursor-zoom-in',\n  '[&_[data-rmiz-content=\"found\"]_svg]:cursor-zoom-in',\n  '[&_[data-rmiz-content=\"found\"]_[role=\"img\"]]:cursor-zoom-in',\n  '[&_[data-rmiz-content=\"found\"]_[data-zoom]]:cursor-zoom-in'\n);\n\nfunction Wrapper({\n  className,\n  children,\n}: React.PropsWithChildren<{ className?: string }>) {\n  return <div className={cn(wrapperClasses, className)}>{children}</div>;\n}\n",
      "type": "registry:ui",
      "target": "@components/shadcncraft/pro-ecommerce/image-zoom.tsx"
    }
  ],
  "meta": {
    "tier": "free",
    "bundle": "pro-ecommerce"
  },
  "type": "registry:ui"
}