From b20ed55aa790a7742ab87bbc13c5cf6d93bfcced Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 23 Sep 2025 19:55:32 +0900
Subject: [PATCH 1/3] divide children prop in props prop

---
 apps/landing/src/app/OtherCard.tsx            | 67 +++++++++++++++++++
 .../src/types/props/__tests__/index.test-d.ts | 38 ++++++++++-
 packages/react/src/types/props/index.ts       | 22 ++++--
 3 files changed, 120 insertions(+), 7 deletions(-)
 create mode 100644 apps/landing/src/app/OtherCard.tsx

diff --git a/apps/landing/src/app/OtherCard.tsx b/apps/landing/src/app/OtherCard.tsx
new file mode 100644
index 00000000..21af7416
--- /dev/null
+++ b/apps/landing/src/app/OtherCard.tsx
@@ -0,0 +1,67 @@
+import { Box, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
+
+interface OtherCardProps {
+  title: string
+  version: string
+  buildTime: string
+  buildSize: string
+  url: string
+}
+export function OtherCard({
+  title,
+  version,
+  buildTime,
+  buildSize,
+  url,
+}: OtherCardProps) {
+  return (
+    <VStack
+      aspectRatio="1"
+      bg="$cardBg"
+      borderRadius="20px"
+      gap="40px"
+      justifyContent="center"
+      minW="300px"
+      p="30px"
+      w="300px"
+    >
+      <VStack gap="8px">
+        <Box
+          as={Link}
+          props={{
+            href: url,
+            target: '_blank',
+            children: (
+              <Text color="$captionBold" typography="h6">
+                {title}
+              </Text>
+            ),
+          }}
+          textDecoration="none"
+        />
+        <Text color="$captionBold" typography="textL">
+          {version}
+        </Text>
+      </VStack>
+      <VStack alignItems="flex-end" gap="20px">
+        <VStack alignItems="flex-end" gap="6px" justifyContent="center">
+          <Text color="$captionBold" typography="textSbold">
+            Bulid Time
+          </Text>
+          <Text color="$caption" typography="h5">
+            {buildTime}
+          </Text>
+        </VStack>
+        <VStack alignItems="flex-end" gap="6px" justifyContent="center">
+          <Text color="$captionBold" typography="textSbold">
+            Bulid Size
+          </Text>
+          <Text color="$caption" typography="h5">
+            {buildSize}
+          </Text>
+        </VStack>
+      </VStack>
+    </VStack>
+  )
+}
diff --git a/packages/react/src/types/props/__tests__/index.test-d.ts b/packages/react/src/types/props/__tests__/index.test-d.ts
index 89c049e1..c29f29ce 100644
--- a/packages/react/src/types/props/__tests__/index.test-d.ts
+++ b/packages/react/src/types/props/__tests__/index.test-d.ts
@@ -1,7 +1,12 @@
 import { Property } from 'csstype'
 
 import type { ResponsiveValue } from '../../responsive-value'
-import type { DevupCommonProps, DevupComponentProps, DevupProps } from '..'
+import type {
+  DevupCommonProps,
+  DevupComponentAdditionalProps,
+  DevupComponentProps,
+  DevupProps,
+} from '..'
 import type { Selectors } from '../selector'
 
 describe('index', () => {
@@ -103,4 +108,35 @@ describe('index', () => {
       `,
     })
   })
+  it('DevupComponentAdditionalProps', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function Foo({ children: _ }: { children?: string; c: string }) {
+      return null
+    }
+    assertType<DevupComponentAdditionalProps<typeof Foo>>({
+      props: { c: 'a' },
+    })
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function Bar({ children: _ }: { children: string; c: string }) {
+      return null
+    }
+    assertType<DevupComponentAdditionalProps<typeof Bar>>({
+      props: { c: 'a' },
+      children: 'b',
+    })
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function Baz({ children: _ }: { children?: string; c?: string }) {
+      return null
+    }
+    assertType<DevupComponentAdditionalProps<typeof Baz>>({
+      props: { c: 'a' },
+      children: 'b',
+    })
+    assertType<DevupComponentAdditionalProps<typeof Baz>>({})
+    assertType<DevupComponentAdditionalProps<typeof Baz>>({
+      children: 'b',
+    })
+  })
 })
diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts
index 9d1c13bb..9c6e486f 100644
--- a/packages/react/src/types/props/index.ts
+++ b/packages/react/src/types/props/index.ts
@@ -53,11 +53,21 @@ export type DevupElementTypeProps<T extends React.ElementType> =
 export type DevupComponentAdditionalProps<
   T extends React.ElementType,
   P extends React.ComponentProps<T> = React.ComponentProps<T>,
-> =
-  Partial<P> extends P
+> = (Partial<P> extends P
+  ? {
+      props?: FilterChildren<P>
+    }
+  : {
+      props: FilterChildren<P>
+    }) &
+  (P extends { children: infer U }
     ? {
-        props?: P
-      }
-    : {
-        props: P
+        children: U
       }
+    : P extends { children?: infer U }
+      ? {
+          children?: U
+        }
+      : object)
+
+type FilterChildren<T> = Omit<T, 'children'>

From 84d0c1f562ba10e6be64be4ba5abaa737a357dfc Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 23 Sep 2025 19:55:57 +0900
Subject: [PATCH 2/3] divide children prop in props prop

---
 .changeset/early-llamas-cross.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/early-llamas-cross.md

diff --git a/.changeset/early-llamas-cross.md b/.changeset/early-llamas-cross.md
new file mode 100644
index 00000000..36f0f526
--- /dev/null
+++ b/.changeset/early-llamas-cross.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+divide children prop in props prop

From 13d40e38451afe738dcbd106f97a1748277e8eaa Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 23 Sep 2025 20:08:03 +0900
Subject: [PATCH 3/3] Rm card

---
 apps/landing/src/app/OtherCard.tsx | 67 ------------------------------
 1 file changed, 67 deletions(-)
 delete mode 100644 apps/landing/src/app/OtherCard.tsx

diff --git a/apps/landing/src/app/OtherCard.tsx b/apps/landing/src/app/OtherCard.tsx
deleted file mode 100644
index 21af7416..00000000
--- a/apps/landing/src/app/OtherCard.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Box, Text, VStack } from '@devup-ui/react'
-import Link from 'next/link'
-
-interface OtherCardProps {
-  title: string
-  version: string
-  buildTime: string
-  buildSize: string
-  url: string
-}
-export function OtherCard({
-  title,
-  version,
-  buildTime,
-  buildSize,
-  url,
-}: OtherCardProps) {
-  return (
-    <VStack
-      aspectRatio="1"
-      bg="$cardBg"
-      borderRadius="20px"
-      gap="40px"
-      justifyContent="center"
-      minW="300px"
-      p="30px"
-      w="300px"
-    >
-      <VStack gap="8px">
-        <Box
-          as={Link}
-          props={{
-            href: url,
-            target: '_blank',
-            children: (
-              <Text color="$captionBold" typography="h6">
-                {title}
-              </Text>
-            ),
-          }}
-          textDecoration="none"
-        />
-        <Text color="$captionBold" typography="textL">
-          {version}
-        </Text>
-      </VStack>
-      <VStack alignItems="flex-end" gap="20px">
-        <VStack alignItems="flex-end" gap="6px" justifyContent="center">
-          <Text color="$captionBold" typography="textSbold">
-            Bulid Time
-          </Text>
-          <Text color="$caption" typography="h5">
-            {buildTime}
-          </Text>
-        </VStack>
-        <VStack alignItems="flex-end" gap="6px" justifyContent="center">
-          <Text color="$captionBold" typography="textSbold">
-            Bulid Size
-          </Text>
-          <Text color="$caption" typography="h5">
-            {buildSize}
-          </Text>
-        </VStack>
-      </VStack>
-    </VStack>
-  )
-}