import React, { forwardRef } from "react"; import { cn } from "@/lib/utils"; export type CyberpunkInputVariant = | "default" | "secondary" | "radioactive" | "locked" | "error" | "search" | "info"; export type CyberpunkInputSize = "sm" | "md" | "lg"; export interface CyberpunkInputProps extends Omit, "size"> { variant?: CyberpunkInputVariant; size?: CyberpunkInputSize; icon?: React.ReactNode; label?: string; iconPosition?: "left" | "right"; } const variantClasses: Record< CyberpunkInputVariant, { border: string; bg: string; focusBg: string; text: string; placeholder: string; glow: string; icon: string; wrapperTransform: string; iconAnimation: string; } > = { default: { border: "border-cyan-400", bg: "bg-gray-800", focusBg: "focus:bg-cyan-900", text: "text-cyan-400", placeholder: "placeholder-cyan-600", glow: "glow-cyan", icon: "text-cyan-400", wrapperTransform: "group-hover:-translate-y-1 group-hover:scale-105 group-focus-within:-translate-y-1 group-focus-within:scale-105", iconAnimation: "transition-all duration-300 group-hover:rotate-12 group-hover:opacity-100 opacity-50", }, secondary: { border: "border-pink-500", bg: "bg-gray-800", focusBg: "focus:bg-pink-900", text: "text-pink-500", placeholder: "placeholder-pink-600", glow: "glow-pink", icon: "text-pink-500", wrapperTransform: "group-hover:translate-y-1 group-hover:scale-105 group-focus-within:translate-y-1 group-focus-within:scale-105", iconAnimation: "transition-all duration-300 group-hover:rotate-12 group-hover:opacity-100 opacity-50", }, radioactive: { border: "border-yellow-400", bg: "bg-gray-800", focusBg: "focus:bg-yellow-900", text: "text-yellow-400", placeholder: "placeholder-yellow-600", glow: "glow-yellow", icon: "text-yellow-400", wrapperTransform: "group-hover:-rotate-1 group-hover:scale-105 group-focus-within:-rotate-1 group-focus-within:scale-105", iconAnimation: "transition-all duration-300 group-hover:rotate-180 group-hover:opacity-100 opacity-50", }, locked: { border: "border-gray-600", bg: "bg-gray-700", focusBg: "", text: "text-gray-400", placeholder: "placeholder-gray-500", glow: "", icon: "text-gray-500", wrapperTransform: "group-hover:translate-x-1 group-hover:scale-105", iconAnimation: "transition-all duration-300 group-hover:scale-110", }, error: { border: "border-red-500", bg: "bg-gray-800", focusBg: "focus:bg-red-900", text: "text-red-500", placeholder: "placeholder-red-600", glow: "glow-red", icon: "text-red-500", wrapperTransform: "group-hover:skew-x-1 group-hover:scale-105 group-focus-within:skew-x-1 group-focus-within:scale-105", iconAnimation: "transition-all duration-300 group-hover:scale-110", }, search: { border: "border-blue-400", bg: "bg-gray-800", focusBg: "focus:bg-blue-900", text: "text-blue-400", placeholder: "placeholder-blue-600", glow: "glow-blue", icon: "text-blue-400", wrapperTransform: "group-hover:-skew-x-1 group-hover:scale-105 group-focus-within:-skew-x-1 group-focus-within:scale-105", iconAnimation: "transition-all duration-300 group-hover:scale-110", }, info: { border: "border-blue-500", bg: "bg-gray-800", focusBg: "focus:bg-blue-900", text: "text-blue-500", placeholder: "placeholder-blue-600", glow: "glow-blue", icon: "text-blue-500", wrapperTransform: "group-hover:scale-105 group-focus-within:scale-105", iconAnimation: "transition-all duration-300 group-hover:rotate-12 group-hover:opacity-100 opacity-50", }, }; const sizeClasses: Record = { sm: "px-3 py-1.5 text-sm", md: "px-4 py-2 text-base", lg: "px-5 py-3 text-lg", }; const baseInputClasses = "w-full border-2 font-bold focus:text-white focus:outline-none"; const iconPositionClasses = { left: "pl-10", right: "pr-10", }; export const CyberpunkInput = forwardRef( ( { className, variant = "default", size = "md", icon, label, iconPosition = "right", disabled, ...props }, ref ) => { const styles = variantClasses[variant]; const isLocked = variant === "locked" || disabled; const computedAriaLabel = (props as { [key: string]: unknown })["aria-label"] as string | undefined ?? label; return (

{label && ( {label} )}

{icon && (

{icon}

)}

); } ); CyberpunkInput.displayName = "Cyberpunk.Input"; export default CyberpunkInput;

Forms Components

Cyberpunk Inputs