web/src/components/ui/input.tsx

import * as React from 'react'

import {merge} from '@/lib/utils'

function Input({className, type, ...props}: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={merge(
        `transition-[color,box-shadow] duration-200 ease-in-out`,
        `h-10 min-w-0 w-full`,
        ' placeholder:text-muted-foreground',
        'selection:bg-primary selection:text-primary-foreground',
        'flex rounded-md border bg-transparent px-3 py-1 text-base shadow-xs',
        'outline-none focus-visible:ring-4 ring-ring/50',
        'disabled:cursor-not-allowed disabled:opacity-50',
        'aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 dark:bg-input/30',
        'file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:disabled:pointer-events-none',
        className,
      )}
      {...props}
    />
  )
}

export {Input}