fix type errors

packages/ui-patterns/form/Input/FormInput.stories.tsx

@@ -63,7 +63,7 @@ export const Primary: Story = {
     return (
       <Form_Shadcn_ {...form}>
         <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-          <FormFieldInput {...args} name="username" control={form.control} />
+          <FormFieldInput name="username" control={form.control} />
           <Button size="small" type="primary" htmlType="submit">
             Submit
           </Button>

packages/ui-patterns/form/Input/FormInput.tsx

@@ -1,5 +1,4 @@
 import React, { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
-import { FieldPath, FieldValues } from 'react-hook-form'
 import { FormField_Shadcn_ } from 'ui'
 import { FormItemProps, FormItemWrapper } from '../utils'
 import { InputWithLayout } from './InputWithLayout'
@@ -15,18 +14,15 @@ const FormItemInput = forwardRef<
 
 FormItemInput.displayName = 'FormItemInput'
 
-export interface FormFieldInputProps<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
-> {
-  name: TName
+export interface FormFieldInputProps {
+  name: (typeof FormItemInput)['name']
   control: any // { key: string }
   formField?: Omit<React.ComponentProps<typeof FormField_Shadcn_>, 'ref'>
 }
 
 const FormFieldInput = forwardRef<
   ElementRef<typeof FormItemInput>,
-  ComponentPropsWithoutRef<typeof FormItemInput> & FormFieldInputProps<any, any>
+  ComponentPropsWithoutRef<typeof FormItemInput> & FormFieldInputProps
 >(({ formField, name, control, ...props }, ref) => {
   return (
     <FormField_Shadcn_
@@ -38,4 +34,4 @@ const FormFieldInput = forwardRef<
   )
 })
 
-export { FormFieldInput, FormItemInput }
+export { FormItemInput, FormFieldInput }

packages/ui-patterns/form/Page.tsx

@@ -20,7 +20,7 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { FormInput } from './Input/FormInput'
+import { FormFieldInput } from './Input/FormInput'
 import { Box, User, User2 } from 'lucide-react'
 import { FormSelect, FormSelectTrigger } from './Select/FormSelect'
 
@@ -60,18 +60,18 @@ export const Page = () => {
           <p className="text-foreground-light">Please fill in the following</p>
         </div>
         <div role="separator" className="h-px bg-border w-full" />
-        <FormInput
-          layout="horizontal"
-          name="username"
+        <FormFieldInput
           control={form.control}
+          name="username"
           label="Username"
+          layout="horizontal"
           description="What we call you"
           labelOptional="Optional"
           icon={<User2 strokeWidth={1.5} size={16} className="text-foreground-muted" />}
         />
         <FormSelect
-          name="email"
           control={form.control}
+          name="email"
           layout="horizontal"
           label="Email"
           description="This is your email"

packages/ui-patterns/form/Select/FormSelect.tsx

@@ -9,8 +9,8 @@ const FormItemSelect = forwardRef<
 >(({ field, ...props }, ref) => (
   <FormItemWrapper>
     <SelectWithLayout
-      onValueChange={field.onChange}
-      defaultValue={field.value}
+      onValueChange={field && field.onChange}
+      defaultValue={field && field.value}
       {...field}
       {...props}
       isReactForm={true}
@@ -24,7 +24,7 @@ FormItemSelect.displayName = 'FormItemSelect'
 export interface FormFieldSelectProps extends Omit<ComponentProps<typeof SelectWithLayout>, 'ref'> {
   name: React.ComponentProps<typeof FormField_Shadcn_>['name']
   control: any // { key: string }
-  formField: Omit<React.ComponentProps<typeof FormField_Shadcn_>, 'ref'>
+  formField?: Omit<React.ComponentProps<typeof FormField_Shadcn_>, 'ref'>
 }
 
 const FormSelect = forwardRef<

packages/ui-patterns/form/utils.tsx

@@ -9,7 +9,7 @@ export interface FormItemProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
 > {
-  field: ControllerRenderProps<TFieldValues, TName>
+  field?: ControllerRenderProps<TFieldValues, TName>
 }
 
 /**