{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-text-slide",
  "type": "registry:block",
  "title": "Button text slide",
  "description": "Button text slide",
  "files": [
    {
      "path": "components/usages/buttontextslideusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport SlideTextButton from \"@/registry/open-source/button-text-slide\";\r\n\r\nexport default function Usage() {\r\n    return (\r\n        <div className=\"relative w-full flex items-center justify-center\">\r\n            <SlideTextButton />\r\n        </div>\r\n    );\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/buttontextslideusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport SlideTextButton from \"@/registry/open-source/button-text-slide\";\r\n\r\nexport default function Usage() {\r\n    return (\r\n        <div className=\"relative w-full flex items-center justify-center\">\r\n            <SlideTextButton />\r\n        </div>\r\n    );\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/button-text-slide.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * @author: @kokonut-labs\r\n * @description: Slide Text Button with animated vertical text transition\r\n * @version: 1.0.0\r\n * @date: 2025-11-02\r\n * @license: MIT\r\n * @website: https://kokonutui.com\r\n * @github: https://github.com/kokonut-labs/kokonutui\r\n * https://kokonutui.com/docs/components/slide-text-button\r\n */\r\n\r\n\r\nimport { motion } from \"motion/react\";\r\nimport Link from \"next/link\";\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\ninterface SlideTextButtonProps\r\n    extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n    text?: string;\r\n    hoverText?: string;\r\n    href?: string;\r\n    className?: string;\r\n    variant?: \"default\" | \"ghost\";\r\n}\r\n\r\nexport default function SlideTextButton({\r\n    text = \"Browse Components\",\r\n    hoverText,\r\n    href = \"/docs/components/liquid-glass-card\",\r\n    className,\r\n    variant = \"default\",\r\n    ...props\r\n}: SlideTextButtonProps) {\r\n    const slideText = hoverText ?? text;\r\n    const variantStyles =\r\n        variant === \"ghost\"\r\n            ? \"border border-black/10 text-black hover:bg-black/5 dark:border-white/10 dark:text-white dark:hover:bg-white/5\"\r\n            : \"bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90\";\r\n\r\n    return (\r\n        <motion.div\r\n            animate={{ x: 0, opacity: 1, transition: { duration: 0.2 } }}\r\n            className=\"relative\"\r\n            initial={{ x: 200, opacity: 0 }}\r\n        >\r\n            <Link\r\n                className={cn(\r\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\",\r\n                    variantStyles,\r\n                    className\r\n                )}\r\n                href={href}\r\n                {...props}\r\n            >\r\n                <span className=\"group-hover:-translate-y-full relative inline-block transition-transform duration-300 ease-in-out\">\r\n                    <span className=\"flex items-center gap-2 opacity-100 transition-opacity duration-300 group-hover:opacity-0\">\r\n                        <span className=\"font-medium\">{text}</span>\r\n                    </span>\r\n                    <span className=\"absolute top-full left-0 flex items-center gap-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100\">\r\n                        <span className=\"font-medium\">{slideText}</span>\r\n                    </span>\r\n                </span>\r\n            </Link>\r\n        </motion.div>\r\n    );\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}