Backmerge: main

example/storybook/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
-    "@gluestack-style/react": "1.0.6",
+    "@gluestack-style/react": "1.0.7",
     "@gluestack-ui/actionsheet": "^0.2.16",
     "@gluestack-ui/alert-dialog": "^0.1.14",
     "@gluestack-ui/button": "^0.1.23",

packages/animation-moti-driver/package.json

@@ -24,13 +24,13 @@
     "clean": "rm -rf lib"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=0.2",
+    "@gluestack-style/react": ">=1.0.7",
     "moti": ">=0.26",
     "react-native-gesture-handler": ">=2.12",
     "react-native-reanimated": ">=3.5"
   },
   "devDependencies": {
-    "@gluestack-style/react": "^0.2.49",
+    "@gluestack-style/react": "^1.0.7",
     "@types/react": "^18.0.22",
     "@types/react-native": "^0.69.15",
     "babel-plugin-transform-remove-console": "^6.9.4",

packages/animation-resolver/package.json

@@ -22,10 +22,10 @@
     "clean": "rm -rf lib"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=0.2"
+    "@gluestack-style/react": ">=1.0.7"
   },
   "devDependencies": {
-    "@gluestack-style/react": "^0.2.49",
+    "@gluestack-style/react": "^1.0.7",
     "@types/react": "^18.0.22",
     "@types/react-native": "^0.69.15",
     "babel-plugin-transform-remove-console": "^6.9.4",

packages/benchmark-next/package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@gluestack-style/babel-plugin-styled-resolver": "1.0.0",
-    "@gluestack-style/react": "1.0.6",
+    "@gluestack-style/react": "1.0.7",
     "@emotion/styled": "^11.3.0",
     "@expo/next-adapter": "^4.0.13",
     "@types/react": "17.0.1",

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.7
+
+### Patch Changes
+
+- fix: component typings
+
 ## 0.2.9
 
 ### Patch Changes

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/styled.tsx

@@ -10,6 +10,7 @@ import type {
   ExtendedConfigType,
   IComponentStyleConfig,
   StyledConfig,
+  UtilityProps,
 } from './types';
 import {
   deepMerge,
@@ -995,7 +996,12 @@ export function verboseStyled<P, Variants, ComCon>(
       // sxHash: BUILD_TIME_sxHash = '',
       ...componentProps
     }: Omit<
-      ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>,
+      Omit<P, keyof Variants> &
+        Partial<ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>> &
+        Partial<UtilityProps<ITypeReactNativeStyles, P>> & {
+          as?: any;
+          children?: any;
+        },
       'animationComponentGluestack'
     >,
     ref: React.ForwardedRef<P>

packages/react/src/types.ts

@@ -735,69 +735,63 @@ interface GenericComponents {
 /********************* COMPONENT PROPS TYPE *****************************************/
 
 export type ComponentProps<GenericComponentStyles, Variants, P, ComCon> =
-  Partial<
-    Omit<P, keyof Variants> &
-      SxStyleProps<
-        GenericComponentStyles,
-        Variants,
-        P,
-        'animationComponentGluestack' extends keyof P
-          ? P['animationComponentGluestack'] extends true
-            ? Plugins
-            : []
-          : []
-      > & {
-        as?: any;
-        children?: any;
-      } & UtilityProps<GenericComponentStyles, P> & {
-        states?: {
-          [K in IState]?: boolean;
-        };
-      } & (GSConfig['globalStyle'] extends object
-        ? {
-            [Key in keyof MergeNestedThree<
-              GlobalVariants,
-              Variants,
-              // @ts-ignore
-              Components[`${ComCon}`]['theme']['variants']
-            >]?: keyof MergeNestedThree<
-              GlobalVariants,
-              Variants,
-              // @ts-ignore
-              Components[`${ComCon}`]['theme']['variants']
-            >[Key] extends 'true' | 'false'
-              ? boolean
-              : keyof MergeNestedThree<
-                  GlobalVariants,
-                  Variants,
-                  // @ts-ignore
-                  Components[`${ComCon}`]['theme']['variants']
-                >[Key];
-          } & Omit<P, keyof Variants>
-        : {
-            [Key in keyof MergeNested<
-              Variants,
-              // @ts-ignore
-              Components[`${ComCon}`]['theme']['variants']
-            >]?: keyof MergeNested<
-              Variants, // @ts-ignore
-              Components[`${ComCon}`]['theme']['variants']
-            >[Key] extends 'true' | 'false'
-              ? boolean
-              : keyof MergeNested<
-                  Variants,
-                  // @ts-ignore
-                  Components[`${ComCon}`]['theme']['variants']
-                >[Key];
-          })
-  >;
+  SxStyleProps<
+    GenericComponentStyles,
+    Variants,
+    P,
+    'animationComponentGluestack' extends keyof P
+      ? P['animationComponentGluestack'] extends true
+        ? Plugins
+        : []
+      : []
+  > & {
+    states?: {
+      [K in IState]?: boolean;
+    };
+  } & (GSConfig['globalStyle'] extends object
+      ? {
+          [Key in keyof MergeNestedThree<
+            GlobalVariants,
+            Variants,
+            // @ts-ignore
+            Components[`${ComCon}`]['theme']['variants']
+          >]?: keyof MergeNestedThree<
+            GlobalVariants,
+            Variants,
+            // @ts-ignore
+            Components[`${ComCon}`]['theme']['variants']
+          >[Key] extends 'true' | 'false'
+            ? boolean
+            : keyof MergeNestedThree<
+                GlobalVariants,
+                Variants,
+                // @ts-ignore
+                Components[`${ComCon}`]['theme']['variants']
+              >[Key];
+        } & Omit<P, keyof Variants>
+      : {
+          [Key in keyof MergeNested<
+            Variants,
+            // @ts-ignore
+            Components[`${ComCon}`]['theme']['variants']
+          >]?: keyof MergeNested<
+            Variants, // @ts-ignore
+            Components[`${ComCon}`]['theme']['variants']
+          >[Key] extends 'true' | 'false'
+            ? boolean
+            : keyof MergeNested<
+                Variants,
+                // @ts-ignore
+                Components[`${ComCon}`]['theme']['variants']
+              >[Key];
+        });
 
 export type UtilityProps<GenericComponentStyles, GenericComponentProps> = Omit<
   TokenizedRNStyleProps<GetRNStyles<GenericComponentStyles>>,
   keyof GenericComponentProps
 > &
   Omit<
-    AliasesProps<RNStyles<GenericComponentStyles>>,
+    AliasesProps<GetRNStyles<GenericComponentStyles>>,
     keyof GenericComponentProps
   >;