Button

1"use client"
2 
3import * as React from "react"
4import { Button as BaseButton } from "@/components/ui/button"
5import { cn } from "@/lib/utils"
6import type { GlassCustomization } from "@/lib/glass-utils"
7import { hoverEffects, type HoverEffect } from "@/lib/hover-effects"
8 
9export interface ButtonProps
10  extends Omit<React.ComponentProps<typeof BaseButton>, "glass"> {
11  effect?: HoverEffect
12  glass?: GlassCustomization
13}
14 
15/**
16 * Glass UI Button - A beautifully designed button component with glassy effects
17 * Built on top of the base Button component with enhanced visual effects
18 * 
19 * @example
20 * ```tsx
21 * <Button 
22 *   glass={{
23 *     color: "rgba(59, 130, 246, 0.2)",
24 *     blur: 25,
25 *     outline: "rgba(59, 130, 246, 0.4)"
26 *   }}
27 * >
28 *   Click me
29 * </Button>
30 * ```
31 */
32export const Button = React.forwardRef<
33  HTMLButtonElement,
34  ButtonProps
35>(({ className, effect = "glow", variant = "glass", glass, ...props }, ref) => {
36  return (
37    <BaseButton
38      ref={ref}
39      variant={variant}
40      glass={glass}
41      className={cn(
42        "relative overflow-hidden",
43        hoverEffects({ hover: effect }),
44        className
45      )}
46      {...props}
47    />
48  )
49})
50Button.displayName = "Button"
51