update typing, add styled

package.json

@@ -31,6 +31,8 @@
   ],
   "dependencies": {
     "@skypack/package-check": "0.2.2",
+    "@radix-ui/react-polymorphic": "0.0.12",
+    "@radix-ui/react-separator": "0.0.14",
     "@types/react": "17.0.14",
     "@types/react-dom": "17.0.9",
     "@types/react-test-renderer": "17.0.1",
@@ -40,7 +42,7 @@
     "esbuild": "0.12.15",
     "eslint": "7.30.0",
     "lerna": "4.0.0",
-    "nodemon": "2.0.9",
+    "nodemon": "2.0.10",
     "react": "17.0.2",
     "react-test-renderer": "17.0.2",
     "terser": "5.7.1",

packages/react/tests/types.test.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react'
-import createStyled, { StitchesCss, StitchesVariants, StitchesComponentWithAutoCompleteForReactComponents, StitchesComponentWithAutoCompleteForJSXElements } from '../types/styled'
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { createCss } from '../types/index'
+
+// import { createCss, StitchesVariants, StitchesComponentWithAutoCompleteForReactComponents, StitchesComponentWithAutoCompleteForJSXElements } from '../types/index'
+
 import type * as Polymorphic from '@radix-ui/react-polymorphic'
+import { Stitches } from '../types/styled'
 
-const factory = createStyled({
+const library1 = createCss({
 	theme: {
 		colors: {
 			hiContrast: 'hsl(200, 12%, 5%)',
@@ -41,25 +45,44 @@ const factory = createStyled({
 		bp1: '(min-width: 620px)',
 	},
 	utils: {
-		marginX: (config) => (value: number | `wefwef`) => ({
+		marginX: (value: Stitches.PropertyValue<'marginLeft'>) => ({
 			marginLeft: value,
 			marginRight: value,
 		}),
 	},
 })
 
 const utils = {
-	mt: () => (value: string) => ({ marginTop: value }),
+	mt: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value }),
 }
 
-const stitchesConfig = createStyled({
+const library2 = createCss({
 	utils,
 })
-export const { config: Config } = stitchesConfig
 
-type CSS = StitchesCss<typeof factory>
+const { config: Config } = library2
+
+// type CSS = StitchesCss<typeof library>
+
+const { config, css, keyframes, global, styled, theme, toString } = library1
+
+void config
+void config.media
+void config.media.all
+void config.media.bp1
+void config.prefix
+void config.theme
+void config.theme.colors
+void config.theme.colors.gray100
+void config.themeMap
+void config.themeMap.color
+void config.utils
+void config.utils.marginX
 
-export const { styled, toString, theme, css, keyframes, global, config } = factory
+void css
+void keyframes
+void styled
+void theme
 
 const StyledSeparator = styled(SeparatorPrimitive.Root, {
 	border: 'none',
@@ -97,7 +120,7 @@ type SeparatorVariants = StitchesVariants<typeof StyledSeparator>
 type SeparatorOwnProps = Polymorphic.OwnProps<typeof SeparatorPrimitive.Root> & { css?: CSS } & SeparatorVariants
 type SeparatorComponent = Polymorphic.ForwardRefComponent<Polymorphic.IntrinsicElement<typeof SeparatorPrimitive.Root>, SeparatorOwnProps>
 
-export const Separator = React.forwardRef((props, forwardedRef) => {
+const Separator = React.forwardRef((props, forwardedRef) => {
 	return <StyledSeparator {...props} ref={forwardedRef} />
 }) as SeparatorComponent
 
@@ -219,7 +242,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
 })
 
 /* -----------------------------------------------------------------------------------------------*/
-export function Test() {
+function Test() {
 	return (
 		<>
 			{/* Link accepts onToggle prop */}