Merge pull request #481 from gluestack/release/@gluestack-style/react…

…@1.0.6 Release/@gluestack style/[email protected]
gluestack · Oct 16, 2023 · 68a1888 · 68a1888
2 parents 618ae8f + 159f79e
commit 68a1888
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 67 deletions.
diff --git a/packages/react/package.json b/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.5",
+  "version": "1.0.6",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx
@@ -43,7 +43,7 @@ export const StyledProvider: React.FC<{
   colorMode?: COLORMODES;
   children?: React.ReactNode;
   globalStyles?: any;
-  _experimentalNestedProvider: boolean;
+  _experimentalNestedProvider?: boolean;
 }> = ({
   config,
   colorMode,

diff --git a/packages/react/src/core/styled-system.ts b/packages/react/src/core/styled-system.ts
@@ -9,6 +9,10 @@ export const CSSPropertiesMap = {
   borderTopWidth: '0',
   borderEndWidth: '0',
   borderStartWidth: '0',
+  borderEndEndRadius: '0',
+  borderStartStartRadius: '0',
+  borderStartEndRadius: '0',
+  borderEndStartRadius: '0',
   borderWidth: '0',
   bottom: 'auto',
   direction: 'ltr',
@@ -65,6 +69,9 @@ export const CSSPropertiesMap = {
   borderBottomLeftRadius: '0',
   borderBottomRightRadius: '0',
   borderColor: 'initial',
+  borderBlockColor: 'initial',
+  borderBlockEndColor: 'initial',
+  borderBlockStartColor: 'initial',
   borderRadius: '0',
   borderTopLeftRadius: '0',
   borderTopRightRadius: '0',
@@ -92,6 +99,7 @@ export const CSSPropertiesMap = {
   textShadowOffset: '0px 0px',
   textShadowRadius: '0',
   textAlignVertical: 'auto',
+  verticalAlign: 'auto',
   letterSpacing: 'normal',
   textDecorationColor: 'initial',
   textDecorationStyle: 'solid',
@@ -101,6 +109,7 @@ export const CSSPropertiesMap = {
   borderStartColor: 'initial',
   borderTopEndRadius: '0',
   borderTopStartRadius: '0',
+  userSelect: 'auto',
 };
 
 export const reservedKeys = {

diff --git a/packages/react/src/propertyTokenMap.ts b/packages/react/src/propertyTokenMap.ts
@@ -127,7 +127,17 @@ export const propertyTokenMap = {
   textDecorationColor: colors,
   shadowColor: colors,
 
+  borderBlockColor: colors,
+  borderBlockEndColor: colors,
+  borderBlockStartColor: colors,
+
+  borderEndEndRadius: radii,
+  borderStartStartRadius: radii,
+  borderStartEndRadius: radii,
+  borderEndStartRadius: radii,
+
   shadowOpacity: opacity,
+  opacity: opacity,
 
   shadow: shadows,
   // Media Query

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -5,7 +5,6 @@ import type {
   OrderedSXResolved,
   StyleIds,
   ComponentProps,
-  UtilityProps,
   IVerbosedTheme,
   ITheme,
   ExtendedConfigType,
@@ -996,12 +995,7 @@ export function verboseStyled<P, Variants, ComCon>(
       // sxHash: BUILD_TIME_sxHash = '',
       ...componentProps
     }: Omit<
-      Omit<P, keyof Variants> &
-        Partial<ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>> &
-        Partial<UtilityProps<ITypeReactNativeStyles>> & {
-          as?: any;
-          children?: any;
-        },
+      ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>,
       'animationComponentGluestack'
     >,
     ref: React.ForwardedRef<P>

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -65,6 +65,7 @@ export interface Tokens {
   breakpoints?: { [key: GenericKey]: Record<string, any> & {} };
   mediaQueries?: { [key: GenericKey]: Record<string, any> & {} };
   letterSpacings?: { [key: GenericKey]: Record<string, any> & {} };
+  opacity?: { [key: GenericKey]: Record<string, any> & {} };
   lineHeights?: { [key: GenericKey]: any };
   fontWeights?: { [key: GenericKey]: any };
   fonts?: { [key: GenericKey]: any };
@@ -734,61 +735,71 @@ interface GenericComponents {
 /********************* COMPONENT PROPS TYPE *****************************************/
 
 export type ComponentProps<GenericComponentStyles, Variants, P, ComCon> =
-  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];
-        });
+  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];
+          })
+  >;
 
-export type UtilityProps<GenericComponentStyles> = TokenizedRNStyleProps<
-  GetRNStyles<GenericComponentStyles>
+export type UtilityProps<GenericComponentStyles, GenericComponentProps> = Omit<
+  TokenizedRNStyleProps<GetRNStyles<GenericComponentStyles>>,
+  keyof GenericComponentProps
 > &
-  AliasesProps<RNStyles<GenericComponentStyles>>;
+  Omit<
+    AliasesProps<RNStyles<GenericComponentStyles>>,
+    keyof GenericComponentProps
+  >;
 
 /********************* UTILITY TYPE *****************************************/
 
@@ -887,14 +898,12 @@ export type ExtendRNStyle<GenericComponentStyles, key> =
       GenericComponentStyles[key];
 
 type WithSizeNegativeValue<Tokens> = keyof Tokens extends 'sizes'
-  ? WithNegativeValue<
-      //@ts-expect-error
-      | StringifyToken<keyof Tokens['sizes']>
+  ? //@ts-expect-error
+    | StringifyToken<keyof Tokens['sizes']>
       //@ts-expect-error
       | StringifyToken<keyof Tokens['space']>
-    >
   : //@ts-expect-error
-    WithNegativeValue<StringifyToken<keyof Tokens['space']>>;
+    StringifyToken<keyof Tokens['space']>;
 
 export type TokenizedRNStyleProps<
   GenericComponentStyles,