update types, support composition

packages/core/tests/types.test.ts

@@ -1,6 +1,6 @@
 // core types.tests.ts
 // import { createCss, Arg, StitchesVariants } from '../types/index.d'
-import { createCss, Arg } from '../types/index.d'
+import { createCss } from '../types/index'
 
 const { css, global, keyframes, theme } = createCss({
 	utils: {
@@ -62,14 +62,14 @@ global({
 	},
 })
 
-const externalStyles: Arg<typeof css> = {
-	'@bp1': {
-		backgroundColor: '$gray100',
-	},
-	'backgroundColor': '$gray300',
-}
+// const externalStyles: Arg<typeof css> = {
+// 	'@bp1': {
+// 		backgroundColor: '$gray100',
+// 	},
+// 	'backgroundColor': '$gray300',
+// }
 
-void externalStyles
+// void externalStyles
 
 const PotatoButton = css({
 	variants: {
@@ -92,7 +92,7 @@ const PotatoButton = css({
 	],
 })
 
-const two = css(PotatoButton, {
+const two = css({
 	$$max: '2px',
 	width: '$$max',
 	variants: {
@@ -121,7 +121,7 @@ const two = css(PotatoButton, {
 
 two({ variant: 'green' })
 two({ variant: 'red' })
-two({ variant: 'blue' })
+// two({ variant: 'blue' })
 
 // type test = StitchesVariants<typeof PotatoButton>
 

packages/core/types/core.d.ts

@@ -5,7 +5,6 @@ import * as Theme from './theme'
 /* ========================================================================== */
 
 export * from './css'
-export { Parameter0 as Arg } from './type'
 
 /* ========================================================================== */
 
@@ -205,7 +204,11 @@ export interface CreatedCss<
 			Args extends Variant[]
 		>(
 			...composers: {
-				[K in keyof Args]: (
+				[K in keyof Args]:
+				| {
+					[IS_COMPONENT]: true
+				}
+				| (
 					& OmitKey<Style<C>, 'variants'>
 					& {
 						/**
@@ -251,13 +254,15 @@ export interface CreatedCss<
 					}
 				)
 			) => {
-				className: string,
-				selector: string,
+				className: string
+				selector: string
 				props: T
 			}
 		) & {
 			className: string
 			selector: string
+
+			[IS_COMPONENT]: true
 		}
 	}
 
@@ -266,6 +271,10 @@ export interface CreatedCss<
 	}
 }
 
+declare const IS_COMPONENT: unique symbol
+
+type IS_COMPONENT = typeof PrivatePropertyValue
+
 /* ========================================================================== */
 
 export type CreateCss = <

packages/react/types/styled.d.ts

@@ -5,7 +5,6 @@ import * as Theme from './theme'
 /* ========================================================================== */
 
 export * from './css'
-export { Parameter0 as Arg } from './type'
 
 /* ========================================================================== */
 
@@ -274,8 +273,7 @@ export interface CreatedCss<
 			...composers: {
 				[K in keyof Args]:
 				| {
-					(props: any): any;
-					readonly $$typeof: symbol;
+					[IS_COMPONENT]: true
 				}
 				| (
 					& OmitKey<Style<C>, 'variants'>
@@ -323,13 +321,15 @@ export interface CreatedCss<
 					}
 				)
 			) => {
-				className: string,
-				selector: string,
+				className: string
+				selector: string
 				props: T
 			}
 		) & {
 			className: string
 			selector: string
+
+			[IS_COMPONENT]: true
 		}
 	}
 
@@ -338,6 +338,10 @@ export interface CreatedCss<
 	}
 }
 
+declare const IS_COMPONENT: unique symbol
+
+type IS_COMPONENT = typeof PrivatePropertyValue
+
 /* ========================================================================== */
 
 export type CreateCss = <

packages/react/types/theme.d.ts

@@ -0,0 +1,56 @@
+export declare class Token<
+	/** Token name. */
+	NameType extends number | string = string,
+
+	/** Token value. */
+	ValueType extends number | string = string,
+
+	/** Token scale. */
+	ScaleType extends string | void = void,
+
+	/** Token prefix. */
+	PrefixType extends string | void = void,
+> {
+	new (name: NameType, value: ValueType, scale?: ScaleType, prefix?: PrefixType): this
+
+	/** Name of the token. */
+	token: NameType
+
+	/** Value of the token. */
+	value: ValueType
+
+	/** Category of interface the token applies to. */
+	scale: ScaleType extends string ? ScaleType : ''
+
+	/** Prefix added before the serialized custom property. */
+	prefix: PrefixType extends string ? PrefixType : ''
+
+	/** Serialized custom property representing the token. */
+	variable: `--${this['prefix'] extends '' ? '' : `${this['prefix']}-`}${this['scale'] extends '' ? '' : `${this['scale']}-`}${this['token']}`
+
+	/** Serialized CSS var() representing the token. */
+	computedValue: `var(${this['variable']})`
+
+	/** Returns a serialized CSS var() representing the token. */
+	toString(): this['computedValue']
+} // prettier-ignore
+
+export type Tokens<Type extends object = {}, PrefixType extends string = ''> = __TokensLiteral<__TokensCreated<Type, PrefixType>>
+
+type __TokensCreated<Type extends object, PrefixType extends string> = {
+	[KScaleType in keyof Type]: (
+		Type[KScaleType] extends object
+			? {
+				[KTokenType in keyof Type[KScaleType]]: (
+					Type[KScaleType][KTokenType] extends string
+						? Token<string & KTokenType, string & Type[KScaleType][KTokenType], string & KScaleType, PrefixType>
+					: never
+				)
+			}
+		: {}
+	)
+} // prettier-ignore
+
+type __TokensLiteral<T> = T extends {} ? {
+	[K in keyof T]: T[K]
+} : never // prettier-ignore