Fix FormError component to make name prop truly optional with default '_form'

Co-authored-by: jaruesink <4207065+jaruesink@users.noreply.github.com>

Author: Copilot

apps/docs/src/remix-hook-form/password-field.stories.tsx

@@ -123,7 +123,7 @@ const testDefaultValues = ({ canvas }: StoryContext) => {
 
 const testPasswordVisibilityToggle = async ({ canvas }: StoryContext) => {
   const passwordInput = canvas.getByLabelText('Password');
-  
+
   // Find the toggle button within the same form item as the password input
   const formItem =
     passwordInput.closest('[class*="FormItem"], .form-item, [data-testid="form-item"]') ||
@@ -136,15 +136,15 @@ const testPasswordVisibilityToggle = async ({ canvas }: StoryContext) => {
   // Click toggle to show password
   await userEvent.click(toggleButton);
   expect(passwordInput).toHaveAttribute('type', 'text');
-  
+
   // Find the hide button for the same field
   const hideButton = formItem?.querySelector('button[aria-label="Hide password"]') as HTMLElement;
   expect(hideButton).toBeInTheDocument();
 
   // Click toggle to hide password again
   await userEvent.click(hideButton);
   expect(passwordInput).toHaveAttribute('type', 'password');
-  
+
   // Verify show button is back
   const showButtonAgain = formItem?.querySelector('button[aria-label="Show password"]') as HTMLElement;
   expect(showButtonAgain).toBeInTheDocument();

package.json

@@ -2,10 +2,7 @@
   "name": "forms",
   "version": "0.2.0",
   "private": true,
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
+  "workspaces": ["apps/*", "packages/*"],
   "scripts": {
     "start": "yarn dev",
     "dev": "turbo run dev",

packages/components/package.json

@@ -18,9 +18,7 @@
       "import": "./dist/ui/index.js"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "prepublishOnly": "yarn run build",
     "build": "vite build",

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

@@ -1,9 +1,11 @@
 import { useRemixFormContext } from 'remix-hook-form';
+import type { FieldComponents } from '../ui/form';
 import { FormErrorField } from '../ui/form-error-field';
-import type { FormErrorFieldProps } from '../ui/form-error-field';
 
-export type FormErrorProps = Omit<FormErrorFieldProps, 'control'> & {
+export type FormErrorProps = {
   name?: string;
+  className?: string;
+  components?: Partial<FieldComponents>;
 };
 
 export function FormError({ name = '_form', ...props }: FormErrorProps) {

packages/components/src/ui/calendar.tsx

@@ -17,7 +17,6 @@ function Calendar({
 }: React.ComponentProps<typeof DayPicker> & {
   buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }) {
-
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -47,7 +46,8 @@ function Calendar({
         ),
         month_caption: 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
         dropdowns: 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
-        dropdown_root: 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+        dropdown_root:
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
         dropdown: 'absolute inset-0 opacity-0',
         caption_label: cn(
           'select-none font-medium',