mini-starter/mini/src/components/ui/input.tsx

import { Input as TaroInput, InputProps as TaroInputProps } from '@tarojs/components'
import { cn } from '@/utils/cn'
import { cva, type VariantProps } from 'class-variance-authority'
import { forwardRef } from 'react'

const inputVariants = cva(
  'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        filled: 'border-none bg-gray-50 hover:bg-gray-100',
      },
      size: {
        default: 'h-10 px-3 py-2',
        sm: 'h-9 px-2 text-sm',
        lg: 'h-11 px-4 text-lg',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)

export interface InputProps extends Omit<TaroInputProps, 'className'>, VariantProps<typeof inputVariants> {
  className?: string
  leftIcon?: string
  rightIcon?: string
  error?: boolean
  errorMessage?: string
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, variant, size, leftIcon, rightIcon, error, errorMessage, ...props }, ref) => {
    return (
      <div className="w-full">
        <div className="relative">
          {leftIcon && (
            <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
              <div className={cn('w-5 h-5 text-gray-400', leftIcon)} />
            </div>
          )}
          
          <TaroInput
            ref={ref}
            className={cn(
              inputVariants({ variant, size, className }),
              error && 'border-red-500 focus:border-red-500 focus:ring-red-500',
              leftIcon && 'pl-10',
              rightIcon && 'pr-10',
            )}
            {...props}
          />
          
          {rightIcon && (
            <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
              <div className={cn('w-5 h-5 text-gray-400', rightIcon)} />
            </div>
          )}
        </div>
        
        {error && errorMessage && (
          <p className="mt-1 text-sm text-red-600">{errorMessage}</p>
        )}
      </div>
    )
  }
)

Input.displayName = 'Input'

export { Input, inputVariants }