{"name":"glowing-button","type":"registry:component","registryDependencies":["button"],"files":[{"path":"components/bilalUi/button/glowing-button.tsx","content":"// File: components/bilalUi/button/glowing-button.tsx\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nfunction hexToRgba(hex: string, alpha: number = 1): string {\n  let hexValue = hex.replace(\"#\", \"\");\n\n  if (hexValue.length === 3) {\n    hexValue = hexValue\n      .split(\"\")\n      .map((char) => char + char)\n      .join(\"\");\n  }\n\n  const r = parseInt(hexValue.substring(0, 2), 16);\n  const g = parseInt(hexValue.substring(2, 4), 16);\n  const b = parseInt(hexValue.substring(4, 6), 16);\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) {\n    console.error(\"Invalid hex color:\", hex);\n    return \"rgba(0, 0, 0, 1)\";\n  }\n\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\n// Helper to check if string is hex\nconst isHex = (str: string) => /^#([0-9A-F]{3}){1,2}$/i.test(str);\n\nexport function GlowingButton({\n  children,\n  className,\n  glowColor = \"#a3e635\",\n  glowPosition = \"right\",\n  variant = \"solid\",\n}: {\n  children: React.ReactNode;\n  className?: string;\n  glowColor?: string;\n  glowPosition?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"solid\" | \"dot\" | \"gradient\" | \"dashed\";\n}) {\n  const isGradient = !isHex(glowColor);\n\n  // If it's a gradient, we use it directly. If hex, we convert.\n  const glowColorValue = isGradient ? glowColor : hexToRgba(glowColor);\n  const glowColorVia = isGradient ? \"transparent\" : hexToRgba(glowColor, 0.075);\n  const glowColorTo = isGradient ? \"transparent\" : hexToRgba(glowColor, 0.2);\n\n  const positionClasses = {\n    right:\n      \"before:right-0 before:top-1/2 before:-translate-y-1/2 before:rounded-l hover:before:translate-x-full\",\n    left: \"before:left-0 before:top-1/2 before:-translate-y-1/2 before:rounded-r hover:before:-translate-x-full\",\n    top: \"before:top-0 before:left-1/2 before:-translate-x-1/2 before:rounded-b hover:before:-translate-y-full\",\n    bottom:\n      \"before:bottom-0 before:left-1/2 before:-translate-x-1/2 before:rounded-t hover:before:translate-y-full\",\n  };\n\n  const variantClasses = {\n    solid:\n      glowPosition === \"top\" || glowPosition === \"bottom\"\n        ? \"before:w-[60%] before:h-1.25\"\n        : \"before:h-[60%] before:w-1.25\",\n    gradient:\n      glowPosition === \"top\" || glowPosition === \"bottom\"\n        ? \"before:w-[60%] before:h-1.25\" // Reuse solid dimensions for gradient\n        : \"before:h-[60%] before:w-1.25\",\n    dot: \"before:h-2 before:w-2 before:rounded-full!\", // Small dot\n    dashed:\n      glowPosition === \"top\" || glowPosition === \"bottom\"\n        ? \"before:w-[80%] before:h-1 before:bg-transparent before:border-2 before:border-dashed before:border-(--glow-color)\" // Dashed line\n        : \"before:h-[80%] before:w-1 before:bg-transparent before:border-2 before:border-dashed before:border-(--glow-color)\",\n  };\n\n  return (\n    <Button\n      style={\n        {\n          \"--glow-color\": glowColorValue,\n          \"--glow-color-via\": glowColorVia,\n          \"--glow-color-to\": glowColorTo,\n        } as React.CSSProperties\n      }\n      className={cn(\n        \"relative flex h-10 w-min items-center justify-center overflow-hidden rounded-md border border-r-0 bg-linear-to-t px-5! text-sm transition-colors duration-200\",\n        \"border-zinc-100 from-white to-neutral-100 text-black hover:text-black/80 dark:border-zinc-800 dark:from-zinc-900 dark:to-neutral-800 dark:text-white dark:hover:text-white/80\",\n        // Only show gradient background (after) if it's NOT a complex gradient color, to avoid clashes\n        !isGradient &&\n          \"z-20 after:absolute after:inset-0 after:rounded-[inherit] after:bg-linear-to-r after:from-transparent after:from-40% after:via-(--glow-color-via) after:via-70% after:to-(--glow-color-to) after:shadow-[rgba(255,255,255,0.15)_0px_1px_0px_inset]\",\n        \"z-10 before:absolute before:transition-all before:duration-200\",\n        // Only apply standard shadow if NOT dashed and NOT gradient\n        variant !== \"dashed\" &&\n          !isGradient &&\n          \"before:bg-(--glow-color) before:shadow-[-2px_0_10px_var(--glow-color)]\",\n        // For gradient, use background but with a backup shadow or filter\n        variant !== \"dashed\" &&\n          isGradient &&\n          \"before:bg-(--glow-color) before:shadow-[0_0_10px_rgba(236,72,153,0.5)]\",\n        positionClasses[glowPosition],\n        variantClasses[variant],\n        className,\n      )}\n    >\n      {children}\n    </Button>\n  );\n}\n","type":"registry:component"}]}