Xing Input

<XingInput placeholder="Enter some text..." />
<XingInput type="number" placeholder="Enter some number..." />
<XingInput type="tel" placeholder="Enter some tel..." />
<XingInput type="email" placeholder="Enter your email..." />
<XingInput type="password" placeholder="Enter your password..."/>
<XingInput placeholder="This field is disabled" disabled />
<XingInput placeholder="This field is readonly" readonly />

<XingInput placeholder="With left icon" left-icon="lucide:search" />
<XingInput placeholder="With right icon" right-icon="lucide:search" />  
<XingInput placeholder="With both icons" left-icon="lucide:search" right-icon="lucide:x" />
<XingInput placeholder="With left icon & kbd" left-icon="lucide:search" kbd="Ctrl K" />
<div class="relative w-full items-center">
  <XingInput
    v-model="searchQuery"
    ref="searchBar"
    placeholder="With left icon and 2 or more KBDs"
    left-icon="lucide:search"
  />
  <span
    class="absolute inset-y-0 end-0 flex items-center justify-center gap-[2px] px-2"
  >
    <XingKbd shortcut="Ctrl"></XingKbd>
    <XingKbd shortcut="K"></XingKbd>
  </span>
</div>