GlowField

/*!
 * GlowField — a DesignPass.dev component by Ernest Liu
 * Docs & live playground: https://designpass.dev/components/glow-field
 * MIT licensed — keep this notice in copies and adaptations.
 */
"use client";

import React, { useId, type InputHTMLAttributes } from "react";

export interface GlowFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  /** Optional label rendered above the input. */
  label?: string;
  /** Focus accent — border, ring, and glow all derive from this. */
  accentColor?: string;
  /** Classes for the outer wrapper (layout/sizing). */
  wrapperClassName?: string;
}

/**
 * A glass text field with a soft accent glow that blooms on focus.
 * The glow is driven by a CSS custom property so the accent can be any
 * color without utility-class gymnastics; selection color matches it.
 */
export default function GlowField({
  label,
  accentColor = "#a05cff",
  wrapperClassName = "",
  className = "",
  id,
  ...inputProps
}: GlowFieldProps) {
  const autoId = useId();
  const inputId = id ?? autoId;

  return (
    <span
      className={`inline-flex flex-col gap-1.5 ${wrapperClassName}`}
      style={{ "--gf-accent": accentColor } as React.CSSProperties}
    >
      {label ? (
        <label
          htmlFor={inputId}
          className="font-mono text-[11px] uppercase tracking-widest text-white/50"
        >
          {label}
        </label>
      ) : null}
      <input
        id={inputId}
        {...inputProps}
        className={`w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white outline-none backdrop-blur transition-all duration-200 placeholder:text-white/35 selection:bg-[var(--gf-accent)] selection:text-white hover:border-white/20 focus:border-[color-mix(in_srgb,var(--gf-accent)_70%,transparent)] focus:bg-white/[0.07] focus:shadow-[0_0_0_1px_color-mix(in_srgb,var(--gf-accent)_45%,transparent),0_0_18px_-2px_color-mix(in_srgb,var(--gf-accent)_55%,transparent)] disabled:cursor-not-allowed disabled:opacity-40 ${className}`}
      />
    </span>
  );
}