spb/polyllm

1import * as React from "react";2import { cn } from "@/lib/utils";34export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(function Input({ className, type, ...props }, ref) {5  return (6    <input7      ref={ref}8      type={type}9      className={cn(10        "flex h-9 w-full rounded-md border border-border bg-bg-elevated px-3 text-[15px] sm:text-sm text-fg shadow-xs transition-colors placeholder:text-fg-subtle",11        "hover:border-border-strong focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25 disabled:opacity-50",12        "file:border-0 file:bg-transparent file:text-sm file:font-medium",13        className,14      )}15      {...props}16    />17  );18});1920export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(function Textarea({ className, ...props }, ref) {21  return (22    <textarea23      ref={ref}24      className={cn(25        "flex min-h-[80px] w-full rounded-md border border-border bg-bg-elevated px-3 py-2 text-[15px] sm:text-sm text-fg shadow-xs transition-colors placeholder:text-fg-subtle",26        "hover:border-border-strong focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25 disabled:opacity-50 scrollbar-thin",27        className,28      )}29      {...props}30    />31  );32});3334export function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {35  return <label className={cn("text-[13px] font-medium text-fg-muted leading-none", className)} {...props} />;36}3738export function Field({ label, hint, error, children, htmlFor, className }: { label?: string; hint?: string; error?: string | null; children: React.ReactNode; htmlFor?: string; className?: string }) {39  return (40    <div className={cn("space-y-1.5", className)}>41      {label ? <Label htmlFor={htmlFor}>{label}</Label> : null}42      {children}43      {error ? <p className="text-xs text-danger">{error}</p> : hint ? <p className="text-xs text-fg-subtle">{hint}</p> : null}44    </div>45  );46}47