phase 16 implementation

src/components/forms/FormField.tsx

@@ -6,11 +6,11 @@ interface FormFieldProps {
   id: string;
   label: string;
   required?: boolean;
-  optionalLabel?: string;
-  supportingText?: string;
-  error?: string;
+  optionalLabel?: string | undefined;
+  supportingText?: string | undefined;
+  error?: string | undefined;
   children: ReactNode;
-  className?: string;
+  className?: string | undefined;
 }
 
 export function FormField({
@@ -58,7 +58,7 @@ export function Fieldset({
 }: {
   legend: string;
   children: ReactNode;
-  className?: string;
+  className?: string | undefined;
 }) {
   return (
     <fieldset className={classNames(styles.fieldset, className)}>

src/components/forms/TextInput.tsx

@@ -1,6 +1,11 @@
 import { BidiText } from '@/components/foundation/BidiText';
 import { classNames } from '@/lib/components/classNames';
-import type { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type SelectHTMLAttributes,
+  type TextareaHTMLAttributes,
+} from 'react';
 import styles from './TextInput.module.css';
 
 export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search';
@@ -8,21 +13,18 @@ export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search';
 interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   type?: TextInputType;
   invalid?: boolean;
-  describedBy?: string;
+  describedBy?: string | undefined;
   bidiValue?: boolean;
 }
 
-export function TextInput({
-  type = 'text',
-  invalid = false,
-  describedBy,
-  bidiValue = false,
-  className,
-  ...props
-}: TextInputProps) {
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+  { type = 'text', invalid = false, describedBy, bidiValue = false, className, ...props },
+  ref,
+) {
   const dir = bidiValue || type === 'email' || type === 'tel' || type === 'url' ? 'ltr' : undefined;
   return (
     <input
+      ref={ref}
       type={type}
       dir={dir}
       className={classNames(styles.control, className)}
@@ -31,11 +33,11 @@ export function TextInput({
       {...props}
     />
   );
-}
+});
 
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   invalid?: boolean;
-  describedBy?: string;
+  describedBy?: string | undefined;
   characterCount?: { current: number; max: number; label: string };
 }
 
@@ -68,7 +70,7 @@ export function TextArea({
 
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   invalid?: boolean;
-  describedBy?: string;
+  describedBy?: string | undefined;
 }
 
 export function Select({