{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slide-text-button",
  "type": "registry:component",
  "title": "Slide Text Button",
  "description": "Link button with a vertical text-slide hover (KokonutUI, MIT), bridged to contract tokens.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://design.subconscious.ai/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/slide-text-button.tsx",
      "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 * Bridged to the Subconscious design contract: colors bind to `var(--color)`\n * and `var(--backgroundColor)` directly so the button works in both shadcn\n * and non-shadcn (kit / vanilla contract.css) consumers. KokonutUI shape\n * and motion preserved.\n */\n\nimport { motion } from \"framer-motion\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/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 = \"#\",\n  className,\n  style,\n  variant = \"default\",\n  ...props\n}: SlideTextButtonProps) {\n  const slideText = hoverText ?? text;\n  const [hover, setHover] = useState(false);\n\n  const baseStyle: React.CSSProperties =\n    variant === \"ghost\"\n      ? {\n          border:\n            \"1px solid color-mix(in srgb, var(--color) 15%, transparent)\",\n          color: \"var(--color)\",\n          background: hover\n            ? \"color-mix(in srgb, var(--color) 8%, transparent)\"\n            : \"transparent\",\n        }\n      : {\n          background: hover\n            ? \"color-mix(in srgb, var(--color) 90%, transparent)\"\n            : \"var(--color)\",\n          color: \"var(--backgroundColor)\",\n        };\n\n  return (\n    <motion.a\n      animate={{ x: 0, opacity: 1, transition: { duration: 0.2 } }}\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-colors duration-300\",\n        className\n      )}\n      href={href}\n      initial={{ x: 200, opacity: 0 }}\n      onMouseEnter={() => setHover(true)}\n      onMouseLeave={() => setHover(false)}\n      style={{ ...baseStyle, ...style }}\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    </motion.a>\n  );\n}\n"
    }
  ]
}