Add as typing

.changeset/twelve-dryers-sing.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Support props and custom component in as

packages/react/src/components/Box.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Box<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Button.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Button<T extends React.ElementType = 'button'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Center.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Center<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Flex.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Flex<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Grid.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Grid<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Image.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Image<T extends React.ElementType = 'img'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Input.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Input<T extends React.ElementType = 'input'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Text.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Text<T extends React.ElementType = 'span'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/VStack.tsx

@@ -1,9 +1,12 @@
-import type { DevupComponentProps } from '../types/props'
+import type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+} from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function VStack<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
+  props: Merge<DevupComponentBaseProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/types/props/index.ts

@@ -44,3 +44,20 @@ export interface DevupComponentProps<T extends React.ElementType>
   as?: T
   styleVars?: Record<string, string | undefined>
 }
+export type DevupComponentBaseProps<T extends React.ElementType> =
+  DevupElementTypeProps<T> & DevupComponentAdditionalProps<T>
+
+export type DevupElementTypeProps<T extends React.ElementType> =
+  T extends string ? React.ComponentProps<T> : object
+
+export type DevupComponentAdditionalProps<
+  T extends React.ElementType,
+  P extends React.ComponentProps<T> = React.ComponentProps<T>,
+> =
+  Partial<P> extends P
+    ? {
+        props?: P
+      }
+    : {
+        props: P
+      }