{
    "name": "flip-reveal",
    "title": "Flip Reveal",
    "description": "Animated container that reveals or hides items using GSAP Flip transitions and keys.",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/flip-reveal.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/flip-reveal.tsx",
            "content": "\"use client\";\n\nimport { ComponentProps, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport Flip from \"gsap/Flip\";\n\ngsap.registerPlugin(Flip);\n\ntype FlipRevealItemProps = {\n    flipKey: string;\n} & ComponentProps<\"div\">;\n\nexport const FlipRevealItem = ({ flipKey, ...props }: FlipRevealItemProps) => {\n    return <div data-flip={flipKey} {...props} />;\n};\n\ntype FlipRevealProps = {\n    keys: string[];\n    showClass?: string;\n    hideClass?: string;\n} & ComponentProps<\"div\">;\n\nexport const FlipReveal = ({ keys, hideClass = \"\", showClass = \"\", ...props }: FlipRevealProps) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n    const isShow = (key: string | null) => !!key && (keys.includes(\"all\") || keys.includes(key));\n\n    useGSAP(\n        () => {\n            if (!wrapperRef.current) return;\n\n            const items = gsap.utils.toArray<HTMLDivElement>([\"[data-flip]\"]);\n            const state = Flip.getState(items);\n\n            items.forEach((item) => {\n                const key = item.getAttribute(\"data-flip\");\n                if (isShow(key)) {\n                    item.classList.add(showClass);\n                    item.classList.remove(hideClass);\n                } else {\n                    item.classList.remove(showClass);\n                    item.classList.add(hideClass);\n                }\n            });\n\n            Flip.from(state, {\n                duration: 0.6,\n                scale: true,\n                ease: \"power1.inOut\",\n                stagger: 0.05,\n                absolute: true,\n                onEnter: (elements) =>\n                    gsap.fromTo(\n                        elements,\n                        { opacity: 0, scale: 0 },\n                        {\n                            opacity: 1,\n                            scale: 1,\n                            duration: 0.8,\n                        },\n                    ),\n                onLeave: (elements) => gsap.to(elements, { opacity: 0, scale: 0, duration: 0.8 }),\n            });\n        },\n\n        { scope: wrapperRef, dependencies: [keys] },\n    );\n\n    return <div {...props} ref={wrapperRef} />;\n};\n"
        }
    ]
}