{
  "name": "slide-text-button",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @kokonut-labs\n * @description: Slide Text Button with animated vertical text transition\n * @version: 1.0.0\n * @date: 2025-11-02\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { motion } from \"motion/react\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SlideTextButtonProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  text?: string;\n  hoverText?: string;\n  href?: string;\n  className?: string;\n  variant?: \"default\" | \"ghost\";\n}\n\nexport default function SlideTextButton({\n  text = \"Browse Components\",\n  hoverText,\n  href = \"/docs\",\n  className,\n  variant = \"default\",\n  ...props\n}: SlideTextButtonProps) {\n  const slideText = hoverText ?? text;\n  const variantStyles =\n    variant === \"ghost\"\n      ? \"border border-black/10 text-black hover:bg-black/5 dark:border-white/10 dark:text-white dark:hover:bg-white/5\"\n      : \"bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90\";\n\n  return (\n    <motion.div\n      animate={{ x: 0, opacity: 1, transition: { duration: 0.2 } }}\n      className=\"relative\"\n      initial={{ x: 200, opacity: 0 }}\n    >\n      <Link\n        className={cn(\n          \"group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-lg px-8 font-medium text-md tracking-tighter transition-all duration-300 md:min-w-56\",\n          variantStyles,\n          className\n        )}\n        href={href}\n        {...props}\n      >\n        <span className=\"relative inline-block transition-transform duration-300 ease-in-out group-hover:-translate-y-full\">\n          <span className=\"flex items-center gap-2 opacity-100 transition-opacity duration-300 group-hover:opacity-0\">\n            <span className=\"font-medium\">{text}</span>\n          </span>\n          <span className=\"absolute top-full left-0 flex items-center gap-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100\">\n            <span className=\"font-medium\">{slideText}</span>\n          </span>\n        </span>\n      </Link>\n    </motion.div>\n  );\n}\n",
      "path": "/components/kokonutui/slide-text-button.tsx",
      "target": "components/kokonutui/slide-text-button.tsx"
    }
  ]
}