{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-card-carousel",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://reusables.vercel.app/r/utils.json",
    "https://reusables.vercel.app/r/use-screen-size"
  ],
  "files": [
    {
      "path": "registry/reusables/animated-card-carousel.tsx",
      "content": "\"use client\"\n\nimport { FC, useEffect, useRef } from \"react\"\nimport Link from \"next/link\"\nimport { motion, useAnimation } from \"framer-motion\"\nimport { ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport useScreenSize from \"@/hooks/use-screen-size\"\n\nexport type AnimationEaseType =\n  | \"easeInOut\"\n  | \"easeIn\"\n  | \"easeOut\"\n  | \"linear\"\n  | \"circIn\"\n  | \"circOut\"\n  | \"circInOut\"\n  | \"backIn\"\n  | \"backOut\"\n  | \"backInOut\"\n\nexport type CardSizeType = \"standard\" | \"featured\"\n\ninterface AnimatedCardProps {\n  title: string\n  description: string\n  imgSrc: string\n  color: string\n  href: string\n  linkText?: string\n  isActive: boolean\n  onMouseEnter: () => void\n  onMouseLeave: () => void\n  className?: string\n  imageClassName?: string\n  titleClassName?: string\n  descriptionClassName?: string\n  linkClassName?: string\n  animationDuration?: number\n  animationEase?: AnimationEaseType\n  size?: CardSizeType\n}\n\nconst AnimatedCard: FC<AnimatedCardProps> = ({\n  title,\n  description,\n  imgSrc,\n  color,\n  isActive,\n  href,\n  linkText,\n  onMouseEnter,\n  onMouseLeave,\n  className,\n  imageClassName,\n  titleClassName,\n  descriptionClassName,\n  linkClassName,\n  animationDuration = 0.5,\n  animationEase = \"easeInOut\",\n  size = \"featured\",\n}) => {\n  const container = useRef<HTMLDivElement>(null)\n  const controls = useAnimation()\n  const { isMobile } = useScreenSize()\n\n  useEffect(() => {\n    if (isActive) {\n      controls.start(\"visible\")\n    } else {\n      controls.start(\"hidden\")\n    }\n  }, [isActive, controls])\n\n  return (\n    <div\n      ref={container}\n      onMouseEnter={() => {\n        controls.start(\"visible\")\n        onMouseEnter()\n      }}\n      onMouseLeave={() => {\n        if (!isActive) {\n          controls.start(\"hidden\")\n        }\n        onMouseLeave()\n      }}\n      className={className}\n      role=\"group\"\n      aria-selected={isActive}\n    >\n      <div\n        className={cn(\n          \"shadow-small 2xsm:px-5 relative cursor-pointer items-start gap-3 overflow-hidden rounded-3xl px-3 py-5 transition-all duration-500 ease-in-out sm:px-5 sm:py-10 md:px-5 md:py-10 md:pt-5 lg:px-5 lg:pb-10\",\n          size === \"featured\" ?\n            \"h-[380px] lg:h-[450px]\"\n          : \"h-[340px] lg:h-[350px]\",\n          isActive ? \"text-white\" : \"bg-white\"\n        )}\n        style={{\n          backgroundColor: isActive ? color : \"white\",\n          borderWidth: \"2px\",\n          borderColor: isActive ? \"transparent\" : color,\n          borderStyle: \"solid\",\n        }}\n        tabIndex={0}\n      >\n        <div className={cn(\"space-y-3\", isMobile ? \"w-full\" : \"w-[60%]\")}>\n          <h3\n            style={{\n              color: isActive ? \"white\" : color,\n            }}\n            className={cn(\n              \"not-prose text-start text-xl font-semibold md:text-start md:text-2xl\",\n              titleClassName\n            )}\n          >\n            {title}\n          </h3>\n          <p\n            className={cn(\n              \"not-prose w-10/12 pr-1 text-start text-base text-pretty md:w-full md:text-lg\",\n              isActive ? \"text-white\" : \"text-black\",\n              descriptionClassName\n            )}\n          >\n            {description}\n          </p>\n        </div>\n        <motion.div\n          className={cn(\n            \"not-prose absolute right-2 -bottom-5 block\",\n            imageClassName\n          )}\n          animate={controls}\n          initial={{ x: \"70%\", y: \"70%\", visibility: \"hidden\" }}\n          variants={{\n            visible: {\n              x: 20,\n              y: 0,\n              right: isMobile ? 0 : 5,\n              visibility: \"visible\",\n            },\n            hidden: { x: \"70%\", y: \"70%\", visibility: \"hidden\" },\n          }}\n          transition={{ duration: animationDuration, ease: animationEase }}\n          aria-hidden={!isActive}\n        >\n          <img\n            src={imgSrc}\n            alt={`${title} illustration`}\n            width={1000}\n            height={1000}\n            className={cn(\n              \"transition-all duration-500 ease-in-out\",\n              size === \"featured\" ?\n                \"h-[320px] w-[320px]\"\n              : \"h-[260px] w-[270px]\",\n              \"lg:right-0\",\n              isMobile &&\n                (size === \"featured\" ?\n                  \"h-[225px] w-[225px]\"\n                : \"h-[190px] w-[200px]\")\n            )}\n          />\n        </motion.div>\n\n        <Link\n          href={href}\n          scroll={false}\n          style={{\n            color: isActive ? \"white\" : color,\n          }}\n          className={cn(\n            \"2xsm:left-5 absolute bottom-5 left-3 flex items-center gap-3 text-[13px] font-medium sm:text-base\",\n            !isMobile && (isActive ? \"animate-pulse\" : \"\"),\n            linkClassName\n          )}\n          aria-label={`View ${title} project`}\n        >\n          {linkText || \"View Project\"}\n          <ArrowRight\n            size={18}\n            className=\"hidden sm:block\"\n            aria-hidden=\"true\"\n          />\n        </Link>\n      </div>\n    </div>\n  )\n}\n\nexport default AnimatedCard\n",
      "type": "registry:component",
      "target": "components/animated-card-carousel.tsx"
    }
  ],
  "type": "registry:component"
}