1
import { Children, type LabelHTMLAttributes, type ReactNode } from "react";
2
 
3
type Props = LabelHTMLAttributes<HTMLLabelElement> & { children: ReactNode; hint?: string };
4
 
5
export function Label({ children, hint, className = "", ...rest }: Props) {
6
  const [label, ...fields] = Children.toArray(children);
7
 
8
  return (
9
    <label className={`flex flex-col gap-2.5 text-sm text-zinc-300 ${className}`} {...rest}>
10
      <span className="flex flex-col gap-1">
11
        <span className="font-medium">{label}</span>
12
        {hint ? <span className="text-xs text-zinc-500">{hint}</span> : null}
13
      </span>
14
      {fields}
15
    </label>
16
  );
17
}