{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fullscreen-image",
  "type": "registry:block",
  "title": "Fullscreen image",
  "description": "Fullscreen image",
  "files": [
    {
      "path": "components/usages/fullscreenimageusage.tsx",
      "content": "\"use client\";\r\n\r\nimport Image from \"next/image\";\r\n\r\nimport { FullscreenImage } from \"@/registry/open-source/fullscreen-image\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<FullscreenImage>\r\n\t\t\t<Image\r\n\t\t\t\talt=\"Placeholder image\"\r\n\t\t\t\tclassName=\"h-auto w-96\"\r\n\t\t\t\theight={800}\r\n\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\tunoptimized\r\n\t\t\t\twidth={1200}\r\n\t\t\t/>\r\n\t\t</FullscreenImage>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/fullscreenimageusage.tsx",
      "content": "\"use client\";\r\n\r\nimport Image from \"next/image\";\r\n\r\nimport { FullscreenImage } from \"@/registry/open-source/fullscreen-image\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<FullscreenImage>\r\n\t\t\t<Image\r\n\t\t\t\talt=\"Placeholder image\"\r\n\t\t\t\tclassName=\"h-auto w-96\"\r\n\t\t\t\theight={800}\r\n\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\tunoptimized\r\n\t\t\t\twidth={1200}\r\n\t\t\t/>\r\n\t\t</FullscreenImage>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/fullscreen-image.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport Zoom, {\n\ttype ControlledProps,\n\ttype UncontrolledProps,\n} from \"react-medium-image-zoom\";\n\n// Credit:\n// https://www.kibo-ui.com/components/image-zoom\n\nexport type ImageZoomProps = UncontrolledProps & {\n\tisZoomed?: ControlledProps[\"isZoomed\"];\n\tonZoomChange?: ControlledProps[\"onZoomChange\"];\n\tclassName?: string;\n\tbackdropClassName?: string;\n};\nexport const FullscreenImage = ({\n\tclassName,\n\tbackdropClassName,\n\t...props\n}: ImageZoomProps) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"relative\",\n\t\t\t\"**:data-rmiz-ghost:pointer-events-none **:data-rmiz-ghost:absolute\",\n\t\t\t\"**: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-secondary **:data-rmiz-btn-zoom:outline-offset-2\",\n\t\t\t\"**: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-secondary **:data-rmiz-btn-unzoom:outline-offset-2\",\n\t\t\t\"[&_[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\t\t\t\"**: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\t\t\t\"**: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\t\t\t'[&_[data-rmiz-content=\"found\"]_img]:cursor-zoom-in',\n\t\t\t'[&_[data-rmiz-content=\"found\"]_svg]:cursor-zoom-in',\n\t\t\t'[&_[data-rmiz-content=\"found\"]_[role=\"img\"]]:cursor-zoom-in',\n\t\t\t'[&_[data-rmiz-content=\"found\"]_[data-zoom]]:cursor-zoom-in',\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t<Zoom\n\t\t\tclassDialog={cn(\n\t\t\t\t\"backdrop:hidden\",\n\t\t\t\t\"[[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\t\t\t\t\"**:data-rmiz-modal-overlay:absolute **:data-rmiz-modal-overlay:inset-0 **:data-rmiz-modal-overlay:transition-[top,bottom,left,right,background-color]\",\n\t\t\t\t'**:data-[rmiz-modal-overlay=\"hidden\"]:bg-transparent',\n\t\t\t\t'**:data-[rmiz-modal-overlay=\"visible\"]:bg-background/80 **:data-[rmiz-modal-overlay=\"visible\"]:backdrop-blur-md',\n\t\t\t\t\"**:data-rmiz-modal-content:relative **:data-rmiz-modal-content:size-full\",\n\t\t\t\t\"**: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\t\t\t\t\"motion-reduce:**:data-rmiz-modal-img:transition-none motion-reduce:**:data-rmiz-modal-overlay:transition-none\",\n\t\t\t\tbackdropClassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n);\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}