Input

import { Field, FieldLabel, Input } from '@otfdashkit/ui'
import { Mail, Lock, Search, Eye } from 'lucide-react'

const iconClass = 'pointer-events-none absolute top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground'

export function Example() {
  return (
    <div className="flex flex-col gap-4 w-80">
      <Field>
        <FieldLabel htmlFor="icon-email">Email</FieldLabel>
        <div className="relative">
          <Mail className={`${iconClass} left-3`} />
          <Input id="icon-email" className="pl-9" placeholder="you@example.com" />
        </div>
      </Field>
      <Field>
        <FieldLabel htmlFor="icon-password">Password</FieldLabel>
        <div className="relative">
          <Lock className={`${iconClass} left-3`} />
          <Input id="icon-password" className="px-9" type="password" placeholder="••••••••" />
          <Eye className={`${iconClass} right-3`} />
        </div>
      </Field>
      <div className="relative">
        <Search className={`${iconClass} left-3`} />
        <Input className="pl-9" placeholder="Search…" aria-label="Search" />
      </div>
    </div>
  )
}