import type { ComponentProps, CSSProperties } from "react" import { useMemo } from "react" import { cn } from "@/lib/utils" export interface GlareHoverProps extends ComponentProps<"div"> { /** * Optional CSS width on the root element (e.g. `"100%"`, `"320px"`). * @example * ```tsx * ... * ``` */ width?: string /** * Optional CSS height on the root element (e.g. `"auto"`, `"200px"`). * @example * ```tsx * ... * ``` */ height?: string /** * Background color of the wrapper (CSS color string). * @example * ```tsx * ... * ``` */ background?: string /** * Glare highlight as `#rrggbb` or `#rgb`; parsed to `rgba` for the gradient. * @example * ```tsx * ... * ``` */ color?: Color /** * Opacity applied to the glare color when converting hex to `rgba` (0–1). * @example * ```tsx * ... * ``` */ opacity?: number /** * Gradient angle in degrees (`--gh-angle`). * @example * ```tsx * ... * ``` */ angle?: number /** * Glare tile size as a percentage of the element (`--gh-size`, `background-size`). * @example * ```tsx * ... * ``` */ size?: number /** * Transition duration for the glare sweep in milliseconds (`--gh-duration`). * @example * ```tsx * ... * ``` */ duration?: number /** * When `true`, the glare transition only runs on hover (no animation until pointer enters). * @example * ```tsx * ... * ``` */ playOnce?: boolean } type Color = `#${string}` type RGBA = `rgba(${number},${number},${number},${number})` function parseHEX(color: Color, opacity: number): RGBA | Color { const hex = color.replace("#", "") const parse = (h: string) => Number.parseInt(h, 16) if (/^[0-9A-Fa-f]{6}$/.test(hex)) { return `rgba(${parse(hex.slice(0, 2))},${parse(hex.slice(2, 4))},${parse(hex.slice(4, 6))},${opacity})` } if (/^[0-9A-Fa-f]{3}$/.test(hex)) { return `rgba(${parse(hex[0] + hex[0])},${parse(hex[1] + hex[1])},${parse(hex[2] + hex[2])},${opacity})` } return color } function GlareHover({ background = "#000", children, color = "#ffffff", opacity = 0.5, angle = -45, size = 250, duration = 650, playOnce = false, className, style, width, height, ...props }: GlareHoverProps) { const rgba = useMemo(() => parseHEX(color, opacity), [color, opacity]) const cssVars = { "--gh-angle": `${angle}deg`, "--gh-duration": `${duration}ms`, "--gh-size": `${size}%`, "--gh-rgba": rgba, background, ...style, ...(width !== undefined ? { width } : {}), ...(height !== undefined ? { height } : {}), } as CSSProperties return (

{children}

) } export { GlareHover }

Glare Hover

Instalação