{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:component",
  "title": "Card",
  "description": "A component for displaying Card.",
  "files": [
    {
      "path": "registry/v3cn/card/card.tsx",
      "content": "\"use client\";\n\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst MouseEnterContext = createContext<\n  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined\n>(undefined);\n\nexport const CardContainer = ({\n  children,\n  className,\n  containerClassName,\n}: {\n  children?: React.ReactNode;\n  className?: string;\n  containerClassName?: string;\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isMouseEntered, setIsMouseEntered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const { left, top, width, height } =\n      containerRef.current.getBoundingClientRect();\n    const x = (e.clientX - left - width / 2) / 25;\n    const y = (e.clientY - top - height / 2) / 25;\n    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n  };\n\n  const handleMouseEnter = () => {\n    setIsMouseEntered(true);\n    if (!containerRef.current) return;\n  };\n\n  const handleMouseLeave = () => {\n    if (!containerRef.current) return;\n    setIsMouseEntered(false);\n    containerRef.current.style.transform = \"rotateY(0deg) rotateX(0deg)\";\n  };\n  return (\n    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>\n      <div\n        className={cn(\"flex items-center justify-center\", containerClassName)}\n        style={{\n          perspective: \"1000px\",\n        }}\n      >\n        <div\n          ref={containerRef}\n          onMouseEnter={handleMouseEnter}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          className={cn(\n            \"flex items-center justify-center relative transition-all duration-200 ease-linear\",\n            className\n          )}\n          style={{\n            transformStyle: \"preserve-3d\",\n          }}\n        >\n          {children}\n        </div>\n      </div>\n    </MouseEnterContext.Provider>\n  );\n};\n\nexport const CardItem = ({\n  children,\n  className,\n  translateX = 0,\n  translateY = 0,\n  translateZ = 0,\n  rotateX = 0,\n  rotateY = 0,\n  rotateZ = 0,\n  ...rest\n}: {\n  as?: React.ElementType;\n  children: React.ReactNode;\n  className?: string;\n  translateX?: number | string;\n  translateY?: number | string;\n  translateZ?: number | string;\n  rotateX?: number | string;\n  rotateY?: number | string;\n  rotateZ?: number | string;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isMouseEntered] = useMouseEnter();\n\n  useEffect(() => {\n    handleAnimations();\n  }, [isMouseEntered]);\n\n  const handleAnimations = () => {\n    if (!ref.current) return;\n    if (isMouseEntered) {\n      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;\n    } else {\n      ref.current.style.transform =\n        \"translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)\";\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"w-fit transition duration-200 ease-linear\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\n// Create a hook to use the context\nexport const useMouseEnter = () => {\n  const context = useContext(MouseEnterContext);\n  if (context === undefined) {\n    throw new Error(\"useMouseEnter must be used within a MouseEnterProvider\");\n  }\n  return context;\n};",
      "type": "registry:component",
      "target": "components/card.tsx"
    }
  ]
}