"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface GlowInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  glowColor?: string;
}

export const GlowInput = React.forwardRef<HTMLInputElement, GlowInputProps>(
  ({ className, glowColor = "hsl(var(--primary) / 0.25)", ...props }, ref) => {
    const [focused, setFocused] = React.useState(false);

    return (
      <motion.div
        className="relative"
        animate={{
          boxShadow: focused
            ? `0 0 0 3px hsl(var(--primary) / 0.15), 0 12px 32px ${glowColor}`
            : "0 0 0 0px transparent",
        }}
        transition={{ duration: 0.25, ease: "easeOut" }}
      >
        <input
          ref={ref}
          className={cn(
            "w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm text-foreground",
            "placeholder:text-muted-foreground",
            "transition-all duration-200",
            "focus:border-primary focus:outline-none",
            "disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
          onFocus={(event) => {
            setFocused(true);
            props.onFocus?.(event);
          }}
          onBlur={(event) => {
            setFocused(false);
            props.onBlur?.(event);
          }}
          {...props}
        />
      </motion.div>
    );
  }
);

GlowInput.displayName = "GlowInput";
Glow Input

Dependencies

Files

Installation
