{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-flip",
  "title": "Card Flip",
  "description": "Card that flips in 3D between a front and back face.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/card-flip/card-flip.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link CardFlip}. */\nexport type CardFlipProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Content shown on the back face. */\n  back: React.ReactNode;\n  /** Whether hovering flips the card. Click toggles when disabled. Defaults to `true`. */\n  flipOnHover?: boolean;\n  /** Content shown on the front face. */\n  front: React.ReactNode;\n};\n\nfunction Inner({\n  back,\n  flipOnHover,\n  flipped,\n  front,\n}: {\n  back: React.ReactNode;\n  flipOnHover: boolean;\n  flipped: boolean;\n  front: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative h-full min-h-40 transition-transform duration-500 [transform-style:preserve-3d] motion-reduce:transition-none\",\n        flipOnHover && \"group-hover:[transform:rotateY(180deg)]\",\n        !flipOnHover && flipped && \"[transform:rotateY(180deg)]\",\n      )}\n    >\n      <div className=\"absolute inset-0 [backface-visibility:hidden]\">\n        {front}\n      </div>\n      <div className=\"absolute inset-0 [backface-visibility:hidden] [transform:rotateY(180deg)]\">\n        {back}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Card that flips in 3D between a front and a back face on hover or click.\n *\n * Respects `prefers-reduced-motion`: the flip happens without a transition.\n *\n * @example\n * ```tsx\n * <CardFlip front={<p>Front</p>} back={<p>Back</p>} />\n * ```\n */\nexport const CardFlip = ({\n  back,\n  className,\n  flipOnHover = true,\n  front,\n  ref,\n  ...props\n}: CardFlipProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const [flipped, setFlipped] = React.useState(false);\n  const base = cn(\n    \"relative min-h-40 [perspective:1000px]\",\n    flipOnHover && \"group\",\n    className,\n  );\n\n  if (flipOnHover) {\n    return (\n      <div className={base} ref={ref} {...props}>\n        <Inner back={back} flipOnHover={true} flipped={flipped} front={front} />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={base}\n      onClick={() => {\n        setFlipped((current) => !current);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          setFlipped((current) => !current);\n        }\n      }}\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      {...props}\n    >\n      <Inner back={back} flipOnHover={false} flipped={flipped} front={front} />\n    </div>\n  );\n};\nCardFlip.displayName = \"CardFlip\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}