import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps { /** Leading icon inside the field (left side). */ icon?: React.ReactNode /** Label rendered above the field. Linked to the input via `htmlFor` / `id`. */ label?: string /** Minimum text length. */ minLength?: number /** Maximum text length. */ maxLength?: number /** Controlled value. */ value?: string /** Placeholder text shown when the field is empty. */ placeholder?: string /** Disables the field and skips hover border styles. */ disabled?: boolean /** Field name for form submission. */ name?: string /** Extra classes for the container. */ className?: string /** Extra classes on the ``. */ classNameInput?: string /** Extra classes on the ``. */ classNameLabel?: string /** Called when the value changes. Required when using controlled `value`. */ onChange?: React.ChangeEventHandler } const Input = React.forwardRef( ( { icon, label, minLength, maxLength, value, placeholder, disabled, name, className, classNameInput, classNameLabel, onChange, }, ref ) => { const inputId = React.useId() return (

{label ? ( {label} ) : null}

{icon ? ( {icon} ) : null}

) } ) Input.displayName = "Input" export { Input }