feat: Implement comprehensive FormError component for form-level error handling

packages/components/src/remix-hook-form/form-error.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useRemixFormContext } from 'remix-hook-form';
+import { FormErrorField } from '../ui/form-error-field';
+import type { FormErrorFieldProps } from '../ui/form-error-field';
+
+export type FormErrorProps = Omit<FormErrorFieldProps, 'control'> & {
+  name?: string;
+};
+
+export function FormError({ name = '_form', ...props }: FormErrorProps) {
+  const { control } = useRemixFormContext();
+
+  return <FormErrorField control={control} name={name} {...props} />;
+}
+
+FormError.displayName = 'FormError';

packages/components/src/remix-hook-form/index.ts

@@ -1,5 +1,6 @@
 export * from './checkbox';
 export * from './form';
+export * from './form-error';
 export * from './date-picker';
 export * from './dropdown-menu-select';
 export * from './text-field';

packages/components/src/ui/form-error-field.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { FieldPath, FieldValues, Control } from 'react-hook-form';
+import { FormField, FormItem, FormMessage } from './form';
+import type { FieldComponents } from './form';
+
+export interface FormErrorFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  control?: Control<TFieldValues>;
+  name: TName;
+  className?: string;
+  components?: Partial<FieldComponents>;
+}
+
+export const FormErrorField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  className,
+  components,
+}: FormErrorFieldProps<TFieldValues, TName>) => {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ fieldState }) => (
+        <FormItem className={className}>
+          {fieldState.error && (
+            <FormMessage Component={components?.FormMessage}>
+              {fieldState.error.message}
+            </FormMessage>
+          )}
+        </FormItem>
+      )}
+    />
+  );
+};
+
+FormErrorField.displayName = 'FormErrorField';

packages/components/src/ui/index.ts

@@ -6,6 +6,7 @@ export * from './date-picker-field';
 export * from './dropdown-menu';
 export * from './dropdown-menu-select-field';
 export * from './form';
+export * from './form-error-field';
 export * from './label';
 export * from './otp-input';
 export * from './otp-input-field';