Implement typing

Author: owjs3901

apps/next/src/app/page.tsx

@@ -1,14 +1,21 @@
 'use client'
 
-import { Box, css, Text } from '@devup-ui/react'
+import { Box, css, styled, Text } from '@devup-ui/react'
 import { useState } from 'react'
+const color = 'yellow'
+
+const StyledFooter = styled.footer<{ type: '1' | '2' }>`
+  background-color: ${color};
+  color: ${(props) => (props.type === '1' ? 'red' : 'white')};
+`
 
 export default function HomePage() {
   const [color, setColor] = useState('yellow')
   const [enabled, setEnabled] = useState(false)
 
   return (
     <div>
+      <StyledFooter type="2">IMPLEMENTATION~</StyledFooter>
       <p
         style={{
           backgroundColor: 'blue',

packages/react/src/utils/styled.ts

@@ -5,13 +5,29 @@ interface StyledCreator {
     tag: T,
   ): (
     strings: TemplateStringsArray | DevupPropsWithTheme,
+    ...values: (
+      | ((props: React.ComponentProps<T>) => unknown)
+      | string
+      | number
+      | boolean
+      | null
+      | undefined
+    )[][]
   ) => (props: React.ComponentProps<T>) => React.ReactElement
 }
 
 type Styled = StyledCreator & {
-  [T in keyof React.JSX.IntrinsicElements]: <P extends React.ComponentProps<T>>(
+  [T in keyof React.JSX.IntrinsicElements]: <P>(
     strings: TemplateStringsArray | DevupPropsWithTheme,
-  ) => (props: P) => React.ReactElement
+    ...values: (
+      | ((props: P & React.ComponentProps<T>) => unknown)
+      | string
+      | number
+      | boolean
+      | null
+      | undefined
+    )[]
+  ) => (props: P & React.ComponentProps<T>) => React.ReactElement
 }
 
 export const styled: Styled = new Proxy(Function.prototype, {