Single line, states, file and a growing textarea

// apps/docs/examples/ui/input.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldError,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Input} from '@workspace/active-ui/components/primitives/input';import {Textarea} from '@workspace/active-ui/components/primitives/textarea';
const LIMIT = 280;
/** * Text input in its common forms, each inside a `Field` that labels it: a * single line, a disabled one, one in the error state, a file picker, and a * textarea that grows with its content up to the height you allow it. */export default function InputExample() {  const [note, setNote] = useState('');  return (    <div className="grid w-full max-w-md gap-6">      <Field>        <FieldLabel htmlFor="input-name">Scheme name</FieldLabel>        <Input id="input-name" placeholder="Pension scheme 2026" />      </Field>      <Field data-disabled>        <FieldLabel htmlFor="input-code">Scheme code</FieldLabel>        <Input id="input-code" defaultValue="PS-2026" disabled />        <FieldDescription>          Assigned when the scheme is created.        </FieldDescription>      </Field>      <Field data-invalid>        <FieldLabel htmlFor="input-email">Contact email</FieldLabel>        <Input          id="input-email"          type="email"          defaultValue="contact@"          aria-invalid          aria-describedby="input-email-error"        />        <FieldError id="input-email-error">          Enter a complete email address.        </FieldError>      </Field>      <Field>        <FieldLabel htmlFor="input-file">Attachment</FieldLabel>        <Input id="input-file" type="file" />      </Field>      <Field>        <FieldLabel htmlFor="input-note">Note</FieldLabel>        <Textarea          id="input-note"          value={note}          maxLength={LIMIT}          className="max-h-40"          onChange={(event) => setNote(event.target.value)}          aria-describedby="input-note-count"        />        <FieldDescription id="input-note-count">          {note.length} of {LIMIT} characters        </FieldDescription>      </Field>    </div>  );}