{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-swap-hover",
  "type": "registry:ui",
  "title": "Image Swap Hover",
  "description": "Crossfades between a primary and alternate image on hover. Product and team-photo flourish.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/image-swap-hover.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Image that swaps to an alternate source on hover.\n * @author Saasflare™\n * Crossfades between a primary and alternate image on mouse hover.\n * @module packages/ui/components/ui/image-swap-hover\n * @package ui\n *\n * @component\n * @example\n * import { ImageSwapHover } from '@saasflare/ui';\n * <ImageSwapHover\n *   src=\"/product-front.jpg\"\n *   hoverSrc=\"/product-back.jpg\"\n *   alt=\"Product view\"\n * />\n */\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Props for the ImageSwapHover component. */\nexport interface ImageSwapHoverProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Default image source. */\n  src: string\n  /** Image source to show on hover. */\n  hoverSrc: string\n  /** Alt text for both images. */\n  alt: string\n  /** CSS aspect-ratio. Default: `\"1/1\"` */\n  aspectRatio?: string\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * Image that crossfades to an alternate source on hover.\n *\n * @component\n * @package ui\n */\nexport function ImageSwapHover({\n  src,\n  hoverSrc,\n  alt,\n  aspectRatio = \"1/1\",\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  style,\n  ...props\n}: ImageSwapHoverProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      className={cn(\"group relative overflow-hidden rounded-xl\", className)}\n      style={{ aspectRatio, ...style }}\n      {...props}\n      data-slot=\"image-swap-hover\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    >\n      <img\n        src={src}\n        alt={alt}\n        className=\"absolute inset-0 size-full object-cover transition-opacity duration-300 group-hover:opacity-0\"\n      />\n      <img\n        src={hoverSrc}\n        alt={alt}\n        className=\"absolute inset-0 size-full object-cover opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
      "target": "components/ui/image-swap-hover.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/image-swap-hover.json"
  }
}