38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
"use client";
|
|
import * as React from "react";
|
|
import { cn } from "@/lib/utils"; // Ahora sí existe
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
({ className, label, error, type, ...props }, ref) => {
|
|
return (
|
|
<div className="w-full flex flex-col gap-2">
|
|
{label && (
|
|
<label className="text-[13px] font-extrabold text-navy uppercase tracking-widest">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<input
|
|
type={type}
|
|
ref={ref}
|
|
className={cn(
|
|
// Clases base: Flat Premium
|
|
"w-full bg-ice/10 border rounded-[12px] px-4 py-3.5 text-[15px] font-medium text-navy transition-all duration-200",
|
|
"placeholder:text-navy/30 focus:bg-white focus:border-ocean",
|
|
// MATAMOS LA LÍNEA AZUL AQUÍ:
|
|
"outline-none ring-0 focus:ring-0 focus:ring-offset-0 ring-offset-transparent",
|
|
error ? "border-red-500" : "border-crisp",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
{error && <span className="text-red-500 text-xs font-bold">{error}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
Input.displayName = "Input"; |