Allow variant prop to be set for pseudo-props component

Author: maurobender

src/components/main/IconButton/types.ts

@@ -4,7 +4,7 @@ import type { IPressableProps } from '../Pressable/types';
 import type { IIconProps } from '../Icon/types';
 
 export interface IIconButtonProps extends Omit<IPressableProps, 'children' | 'size'>,
-	Omit<IIconProps, 'hitSlop' | 'style'>,
+	Omit<IIconProps, 'hitSlop' | 'style' | 'variant'>,
 	IHoverableComponent
 {
 	__icon?: ComponentBaseStyledProps<'Box'>

src/core/components/Components.ts

@@ -21,15 +21,18 @@ export default class Components {
 		{ variant, ...props }: PropsWithVariant,
 		state: ComponentState = {}
 	): ComponentStyledProps<C> {
-		const defaultProps: ComponentStyledProps<C> = this
+		const defaultProps = this
 			.defaultPropsFor( componentName ) || {};
 
-		const variantProps: ComponentStyledProps<C> = (
+		const variantProps = (
 			variant ? this.variantPropsFor( componentName, variant ) : undefined
 		) || {};
 
 		const resolvedProps: ComponentStyledProps<C> = merge(
-			{}, defaultProps, variantProps, props
+			{} as ComponentStyledProps<C>,
+			defaultProps,
+			variantProps,
+			props
 		);
 
 		return this.applyStateProps( resolvedProps, state );
@@ -44,7 +47,7 @@ export default class Components {
 	variantPropsFor<C extends ComponentName>(
 		componentName: C,
 		variantName: VariantName
-	): ComponentStyledProps<C> | undefined {
+	): Omit<ComponentStyledProps<C>, 'variant'> | undefined {
 		return this.configFor( componentName )?.variants?.[ variantName ];
 	}
 

src/core/components/types/config.ts

@@ -24,7 +24,7 @@ import type { ComponentName, VariantName } from './common';
 
 export type ComponentConfig<C extends ComponentName> = Partial<{
 	defaultProps: ComponentStyledProps<C>,
-	variants: Record<VariantName, ComponentStyledProps<C>>
+	variants: Record<VariantName, Omit<ComponentStyledProps<C>, 'variant'>>
 	sizes?: Record<string, string | number>
 }>;
 

src/core/components/types/styledProps.ts

@@ -31,12 +31,17 @@ export type ComponentBaseStyledProps<C extends ComponentName> = {
 	[K in (
 		keyof StyledProps
 		| keyof ComponentCustomProps<C>
+		| 'variant'
 		| 'size'
 	)]?:
 		K extends keyof StyledProps
 			? StyledProps[K]
 			: K extends keyof ComponentCustomProps<C>
 			? ComponentCustomProps<C>[K]
+			: K extends 'variant'
+			? C extends keyof IThemeConfig['components']
+				? VariantType<C>
+				: any
 			: K extends 'size'
 			? C extends keyof IThemeConfig['components']
 				? ComponentSizeType<C>

src/core/theme/Theme.ts

@@ -11,7 +11,7 @@ import type {
 } from '../typography/types';
 import type Components from '../components/Components';
 import type {
-	ComponentName, ComponentState, PropsWithVariant, VariantName
+	ComponentName, ComponentState, ComponentStyledProps, VariantName
 } from '../components/types';
 import type Layout from '../layout/Layout';
 import type {
@@ -128,7 +128,7 @@ export default class Theme {
 
 	resolvePropsFor(
 		componentName: ComponentName,
-		props: PropsWithVariant,
+		props: ComponentStyledProps<ComponentName>,
 		state?: ComponentState
 	) {
 		return this._components.resolvePropsFor( componentName, props, state );

src/hooks/useComponentPropsResolver.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import type {
-	ComponentName, ComponentState, PropsWithVariant, ComponentStyledProps
+	ComponentName, ComponentState, ComponentBaseStyledProps, ComponentStyledProps
 } from '../core/components/types';
 import { useTheme } from '../core/theme/hooks';
 
 const useComponentPropsResolver = <C extends ComponentName>(
 	componentName: C,
-	props: PropsWithVariant,
+	props: ComponentBaseStyledProps<C>,
 	state: ComponentState = {}
 ): ComponentStyledProps<C> => {
 	const theme = useTheme();