Fix typo information for props

src/createVariant.ts

@@ -82,7 +82,10 @@ export type VariantProps<
   K extends keyof Theme,
   Property extends keyof any = 'variant'
 > = {
-  [key in Property]?: ResponsiveValue<keyof Omit<Theme[K], 'defaults'>, Theme>;
+  [key in Property]?: ResponsiveValue<
+    keyof Omit<Theme[K], 'defaults'>,
+    Theme['breakpoints']
+  >;
 };
 
 export default createVariant;

src/hooks/useResponsiveProp.ts

@@ -8,7 +8,7 @@ import useDimensions from './useDimensions';
 import useTheme from './useTheme';
 
 const useResponsiveProp = <Theme extends BaseTheme, TVal extends PropValue>(
-  propValue: ResponsiveValue<TVal, Theme>,
+  propValue: ResponsiveValue<TVal, Theme['breakpoints']>,
 ) => {
   const theme = useTheme<Theme>();
   const dimensions = useDimensions();

src/responsiveHelpers.ts

@@ -32,7 +32,7 @@ export const getValueForScreenSize = <Theme extends BaseTheme, TVal>({
   breakpoints,
   dimensions,
 }: {
-  responsiveValue: AtLeastOneResponsiveValue<TVal, Theme>;
+  responsiveValue: AtLeastOneResponsiveValue<TVal, Theme['breakpoints']>;
   breakpoints: Theme['breakpoints'];
   dimensions: Dimensions;
 }): TVal | undefined => {
@@ -62,9 +62,9 @@ export const getValueForScreenSize = <Theme extends BaseTheme, TVal>({
 };
 
 export const isResponsiveObjectValue = <Theme extends BaseTheme, TVal>(
-  val: ResponsiveValue<TVal, Theme>,
+  val: ResponsiveValue<TVal, Theme['breakpoints']>,
   theme: Theme,
-): val is AtLeastOneResponsiveValue<TVal, Theme> => {
+): val is AtLeastOneResponsiveValue<TVal, Theme['breakpoints']> => {
   if (!val) return false;
   if (typeof val !== 'object') return false;
   return getKeys(val).reduce((acc: boolean, key) => {
@@ -77,7 +77,7 @@ export const getResponsiveValue = <
   Theme extends BaseTheme,
   K extends keyof Theme | undefined
 >(
-  propValue: ResponsiveValue<TVal, Theme>,
+  propValue: ResponsiveValue<TVal, Theme['breakpoints']>,
   {
     theme,
     transform,

src/restyleFunctions.ts

@@ -266,99 +266,105 @@ export const all = [
 ];
 
 export interface ColorProps<Theme extends BaseTheme> {
-  color?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  color?: ResponsiveValue<keyof Theme['colors'], Theme['breakpoints']>;
 }
 export interface OpacityProps<Theme extends BaseTheme> {
-  opacity?: ResponsiveValue<number, Theme>;
+  opacity?: ResponsiveValue<number, Theme['breakpoints']>;
 }
 
 export interface VisibleProps<Theme extends BaseTheme> {
-  visible?: ResponsiveValue<boolean, Theme>;
+  visible?: ResponsiveValue<boolean, Theme['breakpoints']>;
 }
 
 export interface BackgroundColorProps<Theme extends BaseTheme> {
-  backgroundColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  backgroundColor?: ResponsiveValue<
+    keyof Theme['colors'],
+    Theme['breakpoints']
+  >;
 }
 
 export interface BackgroundColorShorthandProps<Theme extends BaseTheme> {
-  bg?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  bg?: ResponsiveValue<keyof Theme['colors'], Theme['breakpoints']>;
 }
 
 export type SpacingProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingProperties]?: ResponsiveValue<
     keyof Theme['spacing'],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type SpacingShorthandProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingPropertiesShorthand]?: ResponsiveValue<
     keyof Theme['spacing'],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type TypographyProps<Theme extends BaseTheme> = {
   [Key in keyof typeof typographyProperties]?: ResponsiveValue<
     TextStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type LayoutProps<Theme extends BaseTheme> = {
   [Key in keyof typeof layoutProperties]?: ResponsiveValue<
     FlexStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type PositionProps<Theme extends BaseTheme> = {
   [Key in keyof typeof positionProperties]?: ResponsiveValue<
     FlexStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
   zIndex?: ResponsiveValue<
     Theme['zIndices'] extends {} ? keyof Theme['zIndices'] : number,
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type BorderProps<Theme extends BaseTheme> = {
   [Key in keyof typeof borderProperties]?: ResponsiveValue<
     ViewStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } &
   {
     [Key in keyof typeof borderColorProperties]?: ResponsiveValue<
       keyof Theme['colors'],
-      Theme
+      Theme['breakpoints']
     >;
   } &
   {
     [Key in keyof typeof borderRadiusProperties]?: ResponsiveValue<
       Theme['borderRadii'] extends {} ? keyof Theme['borderRadii'] : number,
-      Theme
+      Theme['breakpoints']
     >;
   };
 
 export type ShadowProps<Theme extends BaseTheme> = {
   [Key in keyof typeof shadowProperties]?: ResponsiveValue<
     ViewStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
-  shadowColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  shadowColor?: ResponsiveValue<keyof Theme['colors'], Theme['breakpoints']>;
 };
 
 export type TextShadowProps<Theme extends BaseTheme> = {
   [Key in keyof typeof textShadowProperties]?: ResponsiveValue<
     TextStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
-  textShadowColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  textShadowColor?: ResponsiveValue<
+    keyof Theme['colors'],
+    Theme['breakpoints']
+  >;
 };
 
 export type AllProps<Theme extends BaseTheme> = BackgroundColorProps<Theme> &

src/types.ts

@@ -2,8 +2,7 @@ import {ImageStyle, TextStyle, ViewStyle, StyleProp} from 'react-native';
 
 export type AtLeastOneResponsiveValue<
   Value,
-  Theme extends BaseTheme,
-  B = Theme['breakpoints'],
+  B extends BaseTheme['breakpoints'],
   R = {[Key in keyof B]: Record<Key, Value>}
 > = Partial<
   {
@@ -12,9 +11,9 @@ export type AtLeastOneResponsiveValue<
 > &
   R[keyof R];
 
-export type ResponsiveValue<Value, Theme extends BaseTheme> =
+export type ResponsiveValue<Value, B extends BaseTheme['breakpoints']> =
   | Value
-  | AtLeastOneResponsiveValue<Value, Theme>;
+  | AtLeastOneResponsiveValue<Value, B>;
 
 export type SafeVariants<T> = Omit<T, keyof KnownBaseTheme>;