ShadCN-Inspired Tailwind Input Component

import * as React from 'react'
import { cn } from '@/lib/utils'

const Input = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement> & {
    label?: string
    hint?: string
    error?: string
    startAdornment?: React.ReactNode
    endAdornment?: React.ReactNode
  }
>(({ label, hint, error, startAdornment, endAdornment, className, ...props }, ref) => {
  return (
    <div className="space-y-1.5">
      {label && (
        <label className="text-sm font-medium leading-none text-red-500"
        >
          {label}
        </label>
      )}

      <div className="relative">
        {startAdornment && (
          <div className="absolute left-3 top-1/2 -translate-y-1/2">
            {startAdornment}
          </div>
        )}

        <input
          ref={ref}
          aria-invalid={!!error}
          className={cn(
            // Base styles
            "flex w-full px-3 py-2 rounded-md text-sm border border-neutral-300 bg-white text-neutral-900 placeholder:text-neutral-500",
            
            // States
            "transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-300/40 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
          {...props}
        />

        {endAdornment && (
          <div className="absolute right-3 top-1/2 -translate-y-1/2">
            {endAdornment}
          </div>
        )}
      </div>

      {(hint || error) && (
        <p className={cn(
          "text-sm",
          error ? "text-red-500" : "text-neutral-500"
        )}
        >
          {error || hint}
        </p>
      )}
    </div>
  )
})

Input.displayName = 'Input'

export { Input }