{
  "name": "gradient-button",
  "type": "registry:component",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "/**\n * @author: @dorianbaffier\n * @description: Gradient Button\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype ColorVariant = \"emerald\" | \"purple\" | \"orange\";\n\ninterface GradientColors {\n  dark: {\n    border: string;\n    overlay: string;\n    accent: string;\n    text: string;\n    glow: string;\n    textGlow: string;\n    hover: string;\n  };\n  light: {\n    border: string;\n    base: string;\n    overlay: string;\n    accent: string;\n    text: string;\n    glow: string;\n    hover: string;\n  };\n}\n\ninterface GradientButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: string;\n  label?: string;\n  className?: string;\n  variant?: ColorVariant;\n}\n\nconst gradientColors: Record<ColorVariant, GradientColors> = {\n  emerald: {\n    dark: {\n      border: \"from-[#336C4F] via-[#0C1F21] to-[#0D6437]\",\n      overlay: \"from-[#347B52]/40 via-[#0C1F21] to-[#0D6437]/30\",\n      accent: \"from-[#87F6B7]/10 via-[#0C1F21] to-[#17362A]/50\",\n      text: \"from-[#8AEECA] to-[#73F8A8]\",\n      glow: \"rgba(135,246,183,0.1)\",\n      textGlow: \"rgba(135,246,183,0.4)\",\n      hover: \"from-[#17362A]/20 via-[#87F6B7]/10 to-[#17362A]/20\",\n    },\n    light: {\n      border: \"from-emerald-400 via-emerald-300 to-emerald-200\",\n      base: \"from-emerald-50 via-emerald-50/80 to-emerald-50/90\",\n      overlay: \"from-emerald-300/30 via-emerald-200/20 to-emerald-400/20\",\n      accent: \"from-emerald-400/20 via-emerald-300/10 to-emerald-200/30\",\n      text: \"from-emerald-700 to-emerald-600\",\n      glow: \"rgba(52,211,153,0.2)\",\n      hover: \"from-emerald-300/30 via-emerald-200/20 to-emerald-300/30\",\n    },\n  },\n  purple: {\n    dark: {\n      border: \"from-[#6B46C1] via-[#0C1F21] to-[#553C9A]\",\n      overlay: \"from-[#7E22CE]/40 via-[#0C1F21] to-[#6B46C1]/30\",\n      accent: \"from-[#E9D8FD]/10 via-[#0C1F21] to-[#44337A]/50\",\n      text: \"from-[#E9D8FD] to-[#D6BCFA]\",\n      glow: \"rgba(159,122,234,0.1)\",\n      textGlow: \"rgba(159,122,234,0.4)\",\n      hover: \"from-[#44337A]/20 via-[#B794F4]/10 to-[#44337A]/20\",\n    },\n    light: {\n      border: \"from-purple-400 via-purple-300 to-purple-200\",\n      base: \"from-purple-50 via-purple-50/80 to-purple-50/90\",\n      overlay: \"from-purple-300/30 via-purple-200/20 to-purple-400/20\",\n      accent: \"from-purple-400/20 via-purple-300/10 to-purple-200/30\",\n      text: \"from-purple-700 to-purple-600\",\n      glow: \"rgba(159,122,234,0.2)\",\n      hover: \"from-purple-300/30 via-purple-200/20 to-purple-300/30\",\n    },\n  },\n  orange: {\n    dark: {\n      border: \"from-[#C05621] via-[#0C1F21] to-[#9C4221]\",\n      overlay: \"from-[#DD6B20]/40 via-[#0C1F21] to-[#C05621]/30\",\n      accent: \"from-[#FED7AA]/10 via-[#0C1F21] to-[#7B341E]/50\",\n      text: \"from-[#FED7AA] to-[#FBD38D]\",\n      glow: \"rgba(237,137,54,0.1)\",\n      textGlow: \"rgba(237,137,54,0.4)\",\n      hover: \"from-[#7B341E]/20 via-[#ED8936]/10 to-[#7B341E]/20\",\n    },\n    light: {\n      border: \"from-orange-400 via-orange-300 to-orange-200\",\n      base: \"from-orange-50 via-orange-50/80 to-orange-50/90\",\n      overlay: \"from-orange-300/30 via-orange-200/20 to-orange-400/20\",\n      accent: \"from-orange-400/20 via-orange-300/10 to-orange-200/30\",\n      text: \"from-orange-700 to-orange-600\",\n      glow: \"rgba(237,137,54,0.2)\",\n      hover: \"from-orange-300/30 via-orange-200/20 to-orange-300/30\",\n    },\n  },\n};\n\nexport default function GradientButton({\n  label = \"Welcome\",\n  className,\n  variant = \"emerald\",\n  ...props\n}: GradientButtonProps) {\n  const colors = gradientColors[variant];\n\n  return (\n    <Button\n      className={cn(\n        \"group relative h-12 overflow-hidden rounded-lg px-4 transition-all duration-500\",\n        className\n      )}\n      variant=\"ghost\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"absolute inset-0 rounded-lg bg-linear-to-b p-[2px]\",\n          \"dark:bg-none\",\n          colors.light.border,\n          colors.dark.border\n        )}\n      >\n        <div\n          className={cn(\n            \"absolute inset-0 rounded-lg opacity-90\",\n            \"bg-white/80\",\n            \"dark:bg-[#0C1F21]\"\n          )}\n        />\n      </div>\n\n      <div\n        className={cn(\n          \"absolute inset-[2px] rounded-lg opacity-95\",\n          \"bg-white/80\",\n          \"dark:bg-[#0C1F21]\"\n        )}\n      />\n\n      <div\n        className={cn(\n          \"absolute inset-[2px] rounded-lg bg-linear-to-r opacity-90\",\n          colors.light.base,\n          \"dark:from-[#0C1F21] dark:via-[#0C1F21] dark:to-[#0C1F21]\"\n        )}\n      />\n      <div\n        className={cn(\n          \"absolute inset-[2px] rounded-lg bg-linear-to-b opacity-80\",\n          colors.light.overlay,\n          colors.dark.overlay\n        )}\n      />\n      <div\n        className={cn(\n          \"absolute inset-[2px] rounded-lg bg-linear-to-br\",\n          colors.light.accent,\n          colors.dark.accent\n        )}\n      />\n\n      <div\n        className={cn(\n          \"absolute inset-[2px] rounded-lg\",\n          `shadow-[inset_0_0_10px_${colors.light.glow}]`,\n          `dark:shadow-[inset_0_0_10px_${colors.dark.glow}]`\n        )}\n      />\n\n      <div className=\"relative flex items-center justify-center gap-2\">\n        <span\n          className={cn(\n            \"bg-linear-to-b bg-clip-text font-light text-lg text-transparent tracking-tighter\",\n            colors.light.text,\n            colors.dark.text,\n            `dark:drop-shadow-[0_0_12px_${colors.dark.textGlow}]`\n          )}\n        >\n          {label}\n        </span>\n      </div>\n\n      <div\n        className={cn(\n          \"absolute inset-[2px] rounded-lg bg-linear-to-r opacity-0 transition-opacity duration-300 group-hover:opacity-100\",\n          colors.light.hover,\n          colors.dark.hover\n        )}\n      />\n    </Button>\n  );\n}\n",
      "path": "/components/kokonutui/gradient-button.tsx",
      "target": "components/kokonutui/gradient-button.tsx"
    }
  ]
}