cambio-image

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { Cambio } from "cambio"
5import { Maximize2, X } from "lucide-react"
6import { createPortal } from "react-dom"
7 
8import { cn } from "@/lib/utils"
9 
10function CloseIcon() {
11  return (
12    <svg
13      viewBox="0 0 24 24"
14      fill="none"
15      stroke="currentColor"
16      strokeWidth="2"
17      strokeLinecap="round"
18      strokeLinejoin="round"
19      className="size-4"
20      aria-hidden="true"
21    >
22      <path d="M18 6 6 18" />
23      <path d="m6 6 12 12" />
24    </svg>
25  )
26}
27 
28const closeButtonClasses = cn(
29  "inline-flex size-9 items-center justify-center rounded-full",
30  "bg-secondary text-secondary-foreground shadow-xs transition-colors",
31  "hover:bg-secondary/80 active:bg-secondary/70",
32  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
33  "disabled:pointer-events-none disabled:opacity-50",
34  "cursor-pointer"
35)
36 
37type MotionPreset = "snappy" | "smooth" | "bouncy" | "reduced"
38 
39interface CambioImageProps {
40  src: string
41  alt: string
42  width: number
43  height: number
44  loading?: "lazy" | "eager"
45  index?: number
46  motion?:
47    | MotionPreset
48    | {
49        trigger?: MotionPreset
50        popup?: MotionPreset
51        backdrop?: MotionPreset
52      }
53  dismissible?: boolean
54  className?: string
55  draggable?: boolean
56  enableInitialAnimation?: boolean
57  dismissOnImageClick?: boolean
58  dismissOnScroll?: boolean
59  showExpandIcon?: boolean
60  iconsOnlyMode?: boolean
61  /**
62   * Renders a close button when the image is focused. On desktop the button
63   * sits in the top-right of the image; on mobile it floats at the viewport's
64   * top-right (outside the image).
65   *
66   * When enabled, `draggable` is coerced to `false` so mobile users can pinch
67   * to zoom the focused image.
68   */
69  controls?: boolean
70}
71 
72export function CambioImage({
73  src,
74  alt,
75  width,
76  height,
77  loading = "lazy",
78  index = 0,
79  motion = "snappy",
80  dismissible = true,
81  className,
82  draggable = false,
83  enableInitialAnimation = true,
84  dismissOnImageClick = false,
85  dismissOnScroll = false,
86  showExpandIcon = false,
87  iconsOnlyMode = false,
88  controls = false,
89}: CambioImageProps) {
90  const effectiveDraggable = controls ? false : draggable
91  const [isVisible, setIsVisible] = useState(false)
92  const [open, setOpen] = useState(false)
93  const [isHovered, setIsHovered] = useState(false)
94  const [mounted, setMounted] = useState(false)
95  const ref = useRef<HTMLDivElement>(null)
96 
97// … truncated