Add props format

Author: owjs3901

src/codegen/__tests__/codegen.test.ts

@@ -3173,7 +3173,7 @@ describe('Codegen', () => {
   state: 'default' | 'hover'
 }
 
-export function Button(props: ButtonProps) {
+export function Button({ state }: ButtonProps) {
   return <Box h="100%" />
 }`,
         ],
@@ -3424,7 +3424,7 @@ export function Button(props: ButtonProps) {
   state: 'default' | 'hover'
 }
 
-export function Button(props: ButtonProps) {
+export function Button({ state }: ButtonProps) {
   return <Box h="100%" />
 }`,
         ],

src/codegen/__tests__/render.test.ts

@@ -59,7 +59,7 @@ describe('renderComponent', () => {
   size: "sm" | "lg"
 }
 
-export function Banner(props: BannerProps) {
+export function Banner({ size }: BannerProps) {
   return (
 <Box>
   <Text />

src/codegen/render/index.ts

@@ -50,7 +50,9 @@ ${Object.entries(variants)
   .join('\n')}
 }\n\n`
     : ''
-  const propsParam = hasVariants ? `props: ${component}Props` : ''
+  const propsParam = hasVariants
+    ? `{ ${Object.keys(variants).join(', ')} }: ${component}Props`
+    : ''
   return `${interfaceCode}export function ${component}(${propsParam}) {
   return ${
     code.includes('\n')