{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-flip",
  "type": "registry:ui",
  "title": "Card Flip",
  "description": "Renders a card component with flip animation, supporting front/back content.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "lucide-react", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/card-flip.tsx",
      "content": "'use client';\nimport React, { useState } from 'react';\nimport { motion } from 'motion/react';\nimport { Info, X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nfunction CardFlip({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children: [React.ReactNode, React.ReactNode];\n}) {\n  const [isFlipped, setIsFlipped] = useState(false);\n  const [front, back] = React.Children.toArray(children);\n\n  return (\n    <div\n      className={cn('relative w-full', className)}\n      style={{ perspective: '1000px' }}\n      {...props}\n    >\n      <motion.div\n        className='relative w-full'\n        initial={false}\n        animate={{ rotateY: isFlipped ? -180 : 0 }}\n        transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}\n        style={{ transformStyle: 'preserve-3d' }}\n      >\n        <div\n          className='w-full'\n          style={{\n            backfaceVisibility: 'hidden',\n            WebkitBackfaceVisibility: 'hidden',\n            transformStyle: 'preserve-3d',\n          }}\n        >\n          <div className='relative w-full'>\n            <button\n              onClick={() => setIsFlipped(true)}\n              className='absolute top-4 right-4 p-2 rounded-full hover:bg-muted transition-colors z-10'\n              aria-label='Show info'\n              style={{\n                opacity: isFlipped ? 0 : 1,\n                pointerEvents: isFlipped ? 'none' : 'auto',\n                transition: 'opacity 0.3s',\n              }}\n            >\n              <Info className='w-5 h-5 text-muted-foreground' />\n            </button>\n            {front}\n          </div>\n        </div>\n\n        <div\n          className='absolute inset-0 w-full'\n          style={{\n            backfaceVisibility: 'hidden',\n            WebkitBackfaceVisibility: 'hidden',\n            transform: 'rotateY(-180deg)',\n            transformStyle: 'preserve-3d',\n          }}\n        >\n          <div className='relative w-full h-full'>\n            <button\n              onClick={() => setIsFlipped(false)}\n              className='absolute top-4 right-4 p-2 rounded-full hover:bg-muted transition-colors z-10'\n              aria-label='Close'\n              style={{\n                opacity: isFlipped ? 1 : 0,\n                pointerEvents: isFlipped ? 'auto' : 'none',\n                transition: 'opacity 0.3s',\n              }}\n            >\n              <X className='w-5 h-5 text-muted-foreground' />\n            </button>\n            {back}\n          </div>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n\nfunction CardFlipFront({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card'\n      className={cn(\n        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardFlipBack({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card'\n      className={cn(\n        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardFlipHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card-header'\n      className={cn(\n        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardFlipTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card-title'\n      className={cn('leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFlipDescription({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card-description'\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFlipAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card-action'\n      className={cn(\n        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardFlipContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card-content'\n      className={cn('px-6', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFlipFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='card-footer'\n      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  CardFlip,\n  CardFlipFront,\n  CardFlipBack,\n  CardFlipHeader,\n  CardFlipFooter,\n  CardFlipTitle,\n  CardFlipAction,\n  CardFlipDescription,\n  CardFlipContent,\n};\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}