Optimize typing

.changeset/tough-swans-see.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Optimize typing

packages/react/src/components/Box.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Button.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Center.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Flex.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Grid.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Image.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Input.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/Text.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/components/ThemeScript.tsx

@@ -1,6 +1,5 @@
-import type { Conditional } from 'src/types/utils'
-
 import type { DevupTheme } from '../types/theme'
+import type { Conditional } from '../types/utils'
 
 interface ThemeScriptProps {
   auto?: boolean

packages/react/src/components/VStack.tsx

@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { 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>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }

packages/react/src/types/props/__tests__/index.test-d.ts

@@ -1,5 +1,4 @@
-import type { DevupCommonProps, DevupProps } from '..'
-import type { DevupSelectorProps } from '../selector'
+import type { DevupCommonProps, DevupComponentProps } from '..'
 
 describe('index', () => {
   it('DevupCommonProps', () => {
@@ -10,7 +9,7 @@ describe('index', () => {
   })
 
   it('DevupCommonProps _selector', () => {
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: {
         bg: 'red',
         _active: {
@@ -19,32 +18,34 @@ describe('index', () => {
       },
     })
 
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: `
       background-color: red;
       `,
     })
 
-    expectTypeOf<DevupProps<'div'>>().toExtend<DevupProps<'div'>['_hover']>()
+    expectTypeOf<DevupComponentProps<'div'>>().toExtend<
+      DevupComponentProps<'div'>['_hover']
+    >()
   })
 
   it('DevupCommonProps selectors', () => {
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': {
           bg: 'red',
         },
       },
     })
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': `
         background-color: red;
         `,
       },
     })
 
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': [
           `
@@ -58,7 +59,7 @@ describe('index', () => {
     })
   })
   it('DevupSelectorProps', () => {
-    assertType<DevupSelectorProps>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: {
         bg: 'red',
       },
@@ -68,7 +69,7 @@ describe('index', () => {
         },
       },
     })
-    assertType<DevupSelectorProps>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': `
         background-color: red;
@@ -79,7 +80,7 @@ describe('index', () => {
       },
     })
 
-    assertType<DevupSelectorProps>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: `
       background-color: red;
       `,

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

@@ -23,17 +23,22 @@ export interface DevupShortcutsProps
     DevupUiMotionPathProps,
     DevupUiPositionProps,
     DevupUiTextProps {}
+
 export type DevupCommonProps = Merge<
   {
     [K in keyof Properties]?: ResponsiveValue<Properties[K]>
   },
   DevupShortcutsProps
 >
 
-export interface DevupProps<T extends React.ElementType>
-  extends DevupCommonProps,
-    DevupSelectorProps,
-    DevupThemeSelectorProps {
+export interface DevupProps extends DevupCommonProps, DevupSelectorProps {}
+
+export interface DevupPropsWithTheme
+  extends DevupProps,
+    DevupThemeSelectorProps {}
+
+export interface DevupComponentProps<T extends React.ElementType>
+  extends DevupPropsWithTheme {
   as?: T
   styleVars?: Record<string, string | undefined>
 }

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

@@ -2,7 +2,7 @@ import type { Pseudos } from 'csstype'
 
 import type { ResponsiveValue } from '../../responsive-value'
 import type { DevupTheme } from '../../theme'
-import type { DevupCommonProps } from '../index'
+import type { DevupProps } from '../index'
 
 type CamelCase<S extends string> =
   S extends Lowercase<S>
@@ -13,18 +13,13 @@ type CamelCase<S extends string> =
 
 type PascalCase<S extends string> = Capitalize<CamelCase<S>>
 
+type SelectorProps = ResponsiveValue<DevupProps | string | false>
 export type DevupThemeSelectorProps = keyof DevupTheme extends undefined
-  ? Record<`_theme${string}`, DevupCommonProps & DevupSelectorProps>
+  ? Record<`_theme${string}`, SelectorProps>
   : {
-      [K in keyof DevupTheme as `_theme${PascalCase<K>}`]?: DevupCommonProps &
-        DevupSelectorProps
+      [K in keyof DevupTheme as `_theme${PascalCase<K>}`]?: SelectorProps
     }
 
-type SelectorProps = ResponsiveValue<
-  | (DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps)
-  | string
-  | false
->
 type NormalSelector = Exclude<
   Pseudos,
   `:-${string}` | `::-${string}` | `${string}()`

packages/react/src/utils/css.ts

@@ -1,20 +1,12 @@
-import type { DevupCommonProps } from '../types/props'
-import type { DevupSelectorProps } from '../types/props/selector'
-import type { DevupThemeSelectorProps } from '../types/props/selector'
+import type { DevupPropsWithTheme } from '../types/props'
 
-export function css(
-  props: DevupCommonProps | DevupSelectorProps | DevupThemeSelectorProps,
-): string
+export function css(props: DevupPropsWithTheme): string
 export function css(strings: TemplateStringsArray): string
 export function css(): string
 
 export function css(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  strings?:
-    | TemplateStringsArray
-    | DevupCommonProps
-    | DevupSelectorProps
-    | DevupThemeSelectorProps,
+  strings?: TemplateStringsArray | DevupPropsWithTheme,
 ): string {
   throw new Error('Cannot run on the runtime')
 }