chore: move styled-* code to styled-react

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -33,8 +33,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type BaseStylesProps",
   "type BetterCssProperties",
   "type BetterSystemStyleObject",
-  "Box",
-  "type BoxProps",
   "BranchName",
   "type BranchNameProps",
   "Breadcrumb",

packages/react/src/index.ts

@@ -8,8 +8,6 @@ export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProv
 export type {ThemeProviderProps} from './ThemeProvider'
 
 // Layout
-export {default as Box} from './Box'
-export type {BoxProps} from './Box'
 export * from './Button'
 export {PageLayout} from './PageLayout'
 export type {

packages/react/src/Box/Box.test.tsx → packages/styled-react/src/components/Box/Box.test.tsx

@@ -1,7 +1,7 @@
 import {render, screen} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 import Box from '../Box'
-import theme from '../theme'
+import React, {theme} from '@primer/react'
 
 const breakpoints = [
   null,
@@ -13,11 +13,11 @@
 describe('Box', () => {
   it('should support `className` on the outermost element', () => {
     const Element = () => <Box className={'test-class-name'} />
     expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should support margin', () => {
     render(<Box data-testid="box" m={1} theme={theme} />)
     const box = screen.getByTestId('box')
     expect(getCSSRuleForClass(getClassName(box.className)).style.margin).toBe(theme.space[1])
   })
@@ -25,7 +25,7 @@
   it('should support responsive margin', () => {
     const m = [0, 1, 2, 3]
 
     render(<Box data-testid="box" m={[0, 1, 2, 3]} theme={theme} />)
 
     const box = screen.getByTestId('box')
     const className = getClassName(box.className)
@@ -47,7 +47,7 @@
   })
 
   it('should support padding', () => {
     render(<Box data-testid="box" p={1} theme={theme} />)
     const box = screen.getByTestId('box')
     expect(getCSSRuleForClass(getClassName(box.className)).style.padding).toBe(theme.space[1])
   })
@@ -55,7 +55,7 @@
   it('should support responsive padding', () => {
     const p = [0, 1, 2, 3]
 
     render(<Box data-testid="box" p={[0, 1, 2, 3]} theme={theme} />)
 
     const box = screen.getByTestId('box')
     const className = getClassName(box.className)
@@ -77,14 +77,14 @@
   })
 
   it('should support display', () => {
     render(<Box data-testid="box" display="inline" theme={theme} />)
     const box = screen.getByTestId('box')
     expect(getCSSRuleForClass(getClassName(box.className)).style.display).toBe('inline')
   })
 
   it('should support responsive display', () => {
     const display = ['none', 'inline', 'inline-block', 'block']
     render(<Box data-testid="box" display={display} theme={theme} />)
     const box = screen.getByTestId('box')
     const className = getClassName(box.className)
     for (let i = 0; i < display.length; i++) {

packages/react/src/Box/Box.tsx → packages/styled-react/src/components/Box/Box.tsx

@@ -12,9 +12,8 @@ import type {
   TypographyProps,
 } from 'styled-system'
 import {background, border, color, flexbox, grid, layout, position, shadow, space, typography} from 'styled-system'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
+import {sx, type SxProp} from '../../sx'
+import type {ComponentProps} from '../../utils/ComponentProps'
 
 type StyledBoxProps = SxProp &
   SpaceProps &
@@ -53,4 +52,5 @@ const Box = styled.div<StyledBoxProps>(
  * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
  */
 export type BoxProps = ComponentProps<typeof Box>
+export {Box}
 export default Box

packages/react/src/Box/index.ts → packages/styled-react/src/components/Box/index.ts

@@ -1,2 +1,2 @@
-export {default} from './Box'
+export {default, Box} from './Box'
 export type {BoxProps} from './Box'

packages/styled-react/src/components/CheckboxGroup.tsx

@@ -1,10 +1,7 @@
-import {
-  Box,
-  CheckboxGroup as PrimerCheckboxGroup,
-  type CheckboxGroupProps as PrimerCheckboxGroupProps,
-} from '@primer/react'
+import {CheckboxGroup as PrimerCheckboxGroup, type CheckboxGroupProps as PrimerCheckboxGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
+import {Box} from '../components/Box'
 
 export type CheckboxGroupProps = PropsWithChildren<PrimerCheckboxGroupProps> & SxProp
 

packages/styled-react/src/components/NavList.tsx

@@ -1,4 +1,4 @@
-import {NavList as PrimerNavList, Box} from '@primer/react'
+import {NavList as PrimerNavList} from '@primer/react'
 import type {
   NavListProps as PrimerNavListProps,
   NavListItemProps as PrimerNavListItemProps,
@@ -8,6 +8,7 @@ import type {
 } from '@primer/react'
 import {forwardRef, type PropsWithChildren} from 'react'
 import {type SxProp} from '../sx'
+import Box from './Box'
 
 type RefComponent<E extends HTMLElement, P> = React.ForwardRefExoticComponent<P & React.RefAttributes<E>>
 

packages/styled-react/src/components/RadioGroup.tsx

@@ -1,6 +1,7 @@
-import {Box, RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
+import {RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
+import Box from './Box'
 
 export type RadioGroupProps = PropsWithChildren<PrimerRadioGroupProps> & SxProp
 

packages/styled-react/src/components/RelativeTime.tsx

@@ -1,6 +1,7 @@
-import {Box, RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
+import {RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
 import React from 'react'
 import type {SxProp} from '../sx'
+import Box from './Box'
 
 export type RelativeTimeProps = PrimerRelativeTimeProps & SxProp
 

packages/styled-react/src/utils/ComponentProps.ts

@@ -0,0 +1,9 @@
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export type ComponentProps<T> =
+  T extends React.ComponentType<React.PropsWithChildren<infer Props>> ? (Props extends object ? Props : never) : never