Field

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7// Field — a labeled input with an optional leading icon and a mono hint, lit by the
8// indigo focus halo on focus-within. Ports the design-system form field; wraps a
9// native <input> so it stays a drop-in.
10type FieldProps = React.ComponentProps<"input"> & {
11  label?: string
12  hint?: string
13  icon?: React.ReactNode
14  trailing?: React.ReactNode
15  containerClassName?: string
16}
17 
18function Field({
19  label,
20  hint,
21  icon,
22  trailing,
23  className,
24  containerClassName,
25  id,
26  ...props
27}: FieldProps) {
28  const reactId = React.useId()
29  const inputId = id ?? reactId
30  return (
31    <div className={cn("flex flex-1 flex-col gap-[7px]", containerClassName)}>
32      {label && (
33        <label htmlFor={inputId} className="text-[12.5px] font-medium text-foreground/80">
34          {label}
35        </label>
36      )}
37      <div className="flex items-center gap-[9px] rounded-[--radius] border border-border bg-popover px-[13px] py-[11px] transition-all duration-200 focus-within:border-[var(--delego-indigo)] focus-within:ring-[3px] focus-within:ring-ring/45 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground">
38        {icon}
39        <input
40          id={inputId}
41          className={cn(
42            "w-full bg-transparent font-sans text-sm text-foreground outline-none placeholder:text-muted-foreground/70",
43            className
44          )}
45          {...props}
46        />
47        {trailing}
48      </div>
49      {hint && <span className="font-mono text-[10.5px] text-muted-foreground">{hint}</span>}
50    </div>
51  )
52}
53 
54export { Field, type FieldProps }