From 849e1bee8803d6740e8e55668d1470a5ddf79c6f Mon Sep 17 00:00:00 2001
From: Shobhit Singhal <shobhitsinghal624@gmail.com>
Date: Wed, 23 Mar 2022 23:54:01 +0530
Subject: [PATCH 01/22] fix: fixed same key for multiple children error due to
 stack flattening

---
 src/utils/getSpacedChildren.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/utils/getSpacedChildren.tsx b/src/utils/getSpacedChildren.tsx
index 6bfc37d40..aaa53a4b2 100644
--- a/src/utils/getSpacedChildren.tsx
+++ b/src/utils/getSpacedChildren.tsx
@@ -17,15 +17,29 @@ type SpaceType =
 // Thanks @gregberge for code and @nandorojo for suggestion.
 // Original source: https://github.com/gregberge/react-flatten-children
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
-function flattenChildren(children: React.ReactNode): ReactChildArray {
+function flattenChildren(
+  children: React.ReactNode,
+  keys: (string | number)[] = []
+): ReactChildArray {
   const childrenArray = React.Children.toArray(children);
-  return childrenArray.reduce((flatChildren: ReactChildArray, child) => {
+  return childrenArray.reduce((flatChildren: ReactChildArray, child, index: number) => {
     if ((child as React.ReactElement<any>).type === React.Fragment) {
       return flatChildren.concat(
-        flattenChildren((child as React.ReactElement<any>).props.children)
+        flattenChildren(
+          (child as React.ReactElement<any>).props.children,
+          keys.concat(child.key || index)
+        )
       );
     }
-    flatChildren.push(child);
+    if (React.isValidElement(child)) {
+      flatChildren.push(
+        React.cloneElement(child, {
+          key: keys.concat(String(child.key || index)).join('.')
+        })
+      );
+    } else {
+      flatChildren.push(child);
+    }
     return flatChildren;
   }, []);
 }

From d8e783b1c8af5d61cb60270a8d87f8f154055849 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 21 Jun 2022 17:23:08 +0530
Subject: [PATCH 02/22] fix: adding position fixed in web for toast

---
 src/theme/components/toast.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/theme/components/toast.ts b/src/theme/components/toast.ts
index d2130ca1b..d3325ee80 100644
--- a/src/theme/components/toast.ts
+++ b/src/theme/components/toast.ts
@@ -16,6 +16,7 @@ const baseStyle = (props: Record<string, any>) => {
       alignItems: 'center',
       justifyContent: 'center',
       pointerEvents: 'box-none',
+      _web: { position: 'fixed' },
     },
     _overlay: {},
     _presenceTransition: {

From 13218c711515acf7f4c7be97d52c38b8ed923273 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Wed, 22 Jun 2022 20:35:03 +0530
Subject: [PATCH 03/22] fix: toast keyboardavoiding view using bottom inset

---
 src/components/composites/Toast/Toast.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/composites/Toast/Toast.tsx b/src/components/composites/Toast/Toast.tsx
index 5e03102ec..e380de53f 100644
--- a/src/components/composites/Toast/Toast.tsx
+++ b/src/components/composites/Toast/Toast.tsx
@@ -11,7 +11,7 @@ import { AccessibilityInfo, Platform, SafeAreaView } from 'react-native';
 import Box from '../../primitives/Box';
 import { usePropsResolution } from '../../../hooks';
 import type { IToastContext, IToastInfo, IToast, IToastProps } from './types';
-
+import { useKeyboardBottomInset } from '../../../utils';
 const INSET = 50;
 
 const POSITIONS = {
@@ -71,6 +71,7 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
     ToastContext
   );
 
+  const bottomInset = useKeyboardBottomInset() * 2;
   const getPositions = () => {
     return Object.keys(toastInfo);
   };
@@ -110,7 +111,19 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
                       translateY: transitionConfig[position],
                     }}
                   >
-                    <SafeAreaView>{toast.component}</SafeAreaView>
+                    <SafeAreaView>
+                      <Box
+                        bottom={
+                          ['bottom', 'bottom-left', 'bottom-right'].includes(
+                            position
+                          )
+                            ? bottomInset + 'px'
+                            : undefined
+                        }
+                      >
+                        {toast.component}
+                      </Box>
+                    </SafeAreaView>
                   </PresenceTransition>
                 ))
               }

From b48769673524a386c47439e3dd5bc55484493c21 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Thu, 23 Jun 2022 19:38:11 +0530
Subject: [PATCH 04/22] fix: animation api fade scalefade

---
 .../composites/Transitions/Fade.tsx           | 20 ++++++++++++++-----
 .../composites/Transitions/ScaleFade.tsx      | 18 +++++++++++++----
 .../composites/Transitions/types.tsx          | 12 ++++++++++-
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/composites/Transitions/Fade.tsx b/src/components/composites/Transitions/Fade.tsx
index 8953869be..a3406fd79 100644
--- a/src/components/composites/Transitions/Fade.tsx
+++ b/src/components/composites/Transitions/Fade.tsx
@@ -5,16 +5,26 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/';
 
 const Fade = ({ children, ...props }: IFadeProps, ref?: any) => {
-  const { in: animationState, ...resolvedProps } = usePropsResolution(
-    'Fade',
-    props
-  );
+  const {
+    in: animationState,
+    entryDuration,
+    exitDuration,
+    ...resolvedProps
+  } = usePropsResolution('Fade', props);
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
+
+  if (entryDuration) {
+    resolvedProps.animate.transition.duration = entryDuration;
+  }
+  if (exitDuration) {
+    resolvedProps.exit.transition.duration = exitDuration;
+  }
+
   return (
-    <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>
+    <PresenceTransition visible={animationState} ref={ref} {...resolvedProps}>
       {children}
     </PresenceTransition>
   );
diff --git a/src/components/composites/Transitions/ScaleFade.tsx b/src/components/composites/Transitions/ScaleFade.tsx
index 47c9acfa3..b8cf03206 100644
--- a/src/components/composites/Transitions/ScaleFade.tsx
+++ b/src/components/composites/Transitions/ScaleFade.tsx
@@ -5,14 +5,24 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/';
 
 const ScaleFade = ({ children, ...props }: IScaleFadeProps, ref?: any) => {
-  const { in: animationState, ...resolvedProps } = usePropsResolution(
-    'ScaleFade',
-    props
-  );
+  const {
+    in: animationState,
+    duration,
+    initialScale,
+    ...resolvedProps
+  } = usePropsResolution('ScaleFade', props);
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
+  if (duration) {
+    resolvedProps.animate.transition.duration = duration;
+    resolvedProps.exit.transition.duration = duration;
+  }
+  if (initialScale) {
+    resolvedProps.animate.initial.scale = initialScale;
+    resolvedProps.exit.initial.scale = initialScale;
+  }
 
   return (
     <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>
diff --git a/src/components/composites/Transitions/types.tsx b/src/components/composites/Transitions/types.tsx
index cd108415c..d55f995ab 100644
--- a/src/components/composites/Transitions/types.tsx
+++ b/src/components/composites/Transitions/types.tsx
@@ -1,18 +1,24 @@
 import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
 import type { InterfaceBoxProps } from '../../primitives/Box';
-
+import type { IOverlayProps } from '../../primitives/Overlay';
 export type IFadeProps = InterfaceBoxProps<IFadeProps> & {
   in?: boolean;
   entryDuration?: number;
   exitDuration?: number;
   delay?: number;
+  initial?: ISupportedTransitions;
+  animate?: ITransitionStyleProps;
+  exit?: ITransitionStyleProps;
 };
 export type IScaleFadeProps = InterfaceBoxProps<IScaleFadeProps> & {
   in?: boolean;
   duration?: number;
   delay?: number;
   initialScale?: number;
+  initial?: ISupportedTransitions;
+  animate?: ITransitionStyleProps;
+  exit?: ITransitionStyleProps;
 };
 export type ISlideProps = InterfaceBoxProps<ISlideProps> & {
   in?: boolean;
@@ -20,6 +26,10 @@ export type ISlideProps = InterfaceBoxProps<ISlideProps> & {
   delay?: number;
   placement?: 'top' | 'bottom' | 'right' | 'left';
   overlay?: boolean;
+  /**
+   * Props to be passed to the Overlay used inside of Slide when overlay is true.
+   */
+  _overlay?: IOverlayProps;
 };
 export type ISlideFadeProps = InterfaceBoxProps<ISlideFadeProps> & {
   in?: boolean;

From 0b0431a64d38cfb4de94cc09ffe59e786a0c78cb Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 24 Jun 2022 15:59:18 +0530
Subject: [PATCH 05/22] fix: actionsheet scrollview for web

---
 src/components/composites/Actionsheet/Actionsheet.tsx | 5 +++++
 src/components/composites/Modal/Modal.tsx             | 2 ++
 src/components/composites/Modal/types.ts              | 5 +++++
 3 files changed, 12 insertions(+)

diff --git a/src/components/composites/Actionsheet/Actionsheet.tsx b/src/components/composites/Actionsheet/Actionsheet.tsx
index f8aca915a..edc06715a 100644
--- a/src/components/composites/Actionsheet/Actionsheet.tsx
+++ b/src/components/composites/Actionsheet/Actionsheet.tsx
@@ -4,6 +4,7 @@ import type { IActionsheetProps } from './types';
 import { usePropsResolution } from '../../../hooks';
 import { ActionSheetContext } from './ActionSheetContext';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { Platform } from 'react-native';
 
 const Actionsheet = (
   { children, hideDragIndicator = false, ...props }: IActionsheetProps,
@@ -20,6 +21,9 @@ const Actionsheet = (
   if (useHasResponsiveProps(props)) {
     return null;
   }
+  //Fixing overlay position for Web due to scrollView issue
+  let overlayStyle = Platform.OS === 'web' ? { position: 'fixed' } : {};
+
   return (
     <Modal
       isOpen={isOpen}
@@ -28,6 +32,7 @@ const Actionsheet = (
       overlayVisible={disableOverlay ? false : true}
       closeOnOverlayClick={disableOverlay ? false : true}
       ref={ref}
+      _overlay={{ style: overlayStyle }}
     >
       <ActionSheetContext.Provider value={{ hideDragIndicator }}>
         {children}
diff --git a/src/components/composites/Modal/Modal.tsx b/src/components/composites/Modal/Modal.tsx
index c75731069..d818dc846 100644
--- a/src/components/composites/Modal/Modal.tsx
+++ b/src/components/composites/Modal/Modal.tsx
@@ -37,6 +37,7 @@ const Modal = (
     _backdropFade,
     _fade,
     _slide,
+    _overlay,
     ...resolvedProps
   } = usePropsResolution('Modal', rest);
 
@@ -83,6 +84,7 @@ const Modal = (
       isKeyboardDismissable={isKeyboardDismissable}
       animationPreset={animationPreset}
       useRNModalOnAndroid
+      {..._overlay}
     >
       <ModalContext.Provider value={contextValue}>
         <Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>
diff --git a/src/components/composites/Modal/types.ts b/src/components/composites/Modal/types.ts
index 7ed1d52f1..9e1411748 100644
--- a/src/components/composites/Modal/types.ts
+++ b/src/components/composites/Modal/types.ts
@@ -5,6 +5,7 @@ import type { CustomProps } from '../../../components/types';
 import type { IScrollViewProps } from '../../basic/ScrollView';
 import type { IFadeProps, ISlideProps } from '../Transitions';
 import type { ThemeComponentSizeType } from '../../../components/types/utils';
+import type { IOverlayProps } from '../../primitives/Overlay';
 export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
   /**
    * If true, the modal will open. Useful for controllable state behaviour
@@ -76,6 +77,10 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
    * Props applied on Child Slide Animation.
    */
   _slide?: Partial<ISlideProps>;
+  /**
+   * Props to be passed to the Overlay used inside of Modal.
+   */
+  _overlay?: IOverlayProps;
 }
 
 export type IModalComponentType = ((

From 7dcb4bcfe8432cda0876a253dfbf7575e9258483 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 27 Jun 2022 13:47:14 +0530
Subject: [PATCH 06/22] fix: revert transfromer of font

---
 src/theme/styled-system.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/theme/styled-system.ts b/src/theme/styled-system.ts
index fcb02181e..954b83087 100644
--- a/src/theme/styled-system.ts
+++ b/src/theme/styled-system.ts
@@ -531,10 +531,10 @@ export const typography = {
   fontFamily: {
     property: 'fontFamily',
     scale: 'fonts',
-    transformer: (val: any, scale: any) => {
-      const value = get(scale, val);
-      return value ? value.toString() : undefined;
-    },
+    // transformer: (val: any, scale: any) => {
+    //   const value = get(scale, val);
+    //   return value ? value.toString() : undefined;
+    // },
   },
   fontSize: {
     property: 'fontSize',

From 05388a5740943047ad95aa56dec252bfa67bf4e3 Mon Sep 17 00:00:00 2001
From: ankit-tailor <tailorankit3345@gmail.com>
Date: Tue, 28 Jun 2022 13:45:44 +0530
Subject: [PATCH 07/22] fix: status condition

---
 .../stories/components/composites/Toast/StatusRecipies.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/example/storybook/stories/components/composites/Toast/StatusRecipies.tsx b/example/storybook/stories/components/composites/Toast/StatusRecipies.tsx
index e26f9ef5c..ee3d661f0 100644
--- a/example/storybook/stories/components/composites/Toast/StatusRecipies.tsx
+++ b/example/storybook/stories/components/composites/Toast/StatusRecipies.tsx
@@ -52,7 +52,7 @@ export const Example = () => {
       maxWidth="100%"
       alignSelf="center"
       flexDirection="row"
-      status={status ?? 'info'}
+      status={status ? status : 'info'}
       variant={variant as any}
       {...rest}
     >
@@ -91,8 +91,9 @@ export const Example = () => {
   return (
     <Center>
       <VStack space={2}>
-        {ToastDetails.map((item) => (
+        {ToastDetails.map((item, index) => (
           <Button
+            key={index}
             colorScheme={item.status}
             onPress={() =>
               toast.show({

From fdd4b52739fbe8b53690d888e509ec5da8c8f4c8 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Wed, 29 Jun 2022 13:02:23 +0530
Subject: [PATCH 08/22] fix: type fix for flatternchild

---
 src/utils/getSpacedChildren.tsx | 45 ++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/utils/getSpacedChildren.tsx b/src/utils/getSpacedChildren.tsx
index aaa53a4b2..d7eee167a 100644
--- a/src/utils/getSpacedChildren.tsx
+++ b/src/utils/getSpacedChildren.tsx
@@ -18,30 +18,33 @@ type SpaceType =
 // Original source: https://github.com/gregberge/react-flatten-children
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
 function flattenChildren(
-  children: React.ReactNode,
+  children: JSX.Element[] | JSX.Element,
   keys: (string | number)[] = []
 ): ReactChildArray {
   const childrenArray = React.Children.toArray(children);
-  return childrenArray.reduce((flatChildren: ReactChildArray, child, index: number) => {
-    if ((child as React.ReactElement<any>).type === React.Fragment) {
-      return flatChildren.concat(
-        flattenChildren(
-          (child as React.ReactElement<any>).props.children,
-          keys.concat(child.key || index)
-        )
-      );
-    }
-    if (React.isValidElement(child)) {
-      flatChildren.push(
-        React.cloneElement(child, {
-          key: keys.concat(String(child.key || index)).join('.')
-        })
-      );
-    } else {
-      flatChildren.push(child);
-    }
-    return flatChildren;
-  }, []);
+  return childrenArray.reduce(
+    (flatChildren: ReactChildArray, child: any, index: number) => {
+      if ((child as React.ReactElement<any>).type === React.Fragment) {
+        return flatChildren.concat(
+          flattenChildren(
+            (child as React.ReactElement<any>).props.children,
+            keys.concat(child.key || index)
+          )
+        );
+      }
+      if (React.isValidElement(child)) {
+        flatChildren.push(
+          React.cloneElement(child, {
+            key: keys.concat(String(child.key || index)).join('.'),
+          })
+        );
+      } else {
+        flatChildren.push(child);
+      }
+      return flatChildren;
+    },
+    []
+  );
 }
 
 const getSpacedChildren = (

From 0293d71d3b0e7be6cc1036e8cddb385aabc6c5b1 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Thu, 30 Jun 2022 14:57:36 +0530
Subject: [PATCH 09/22] v3.4.8-rc.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 372e7a4f3..b405188cf 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.7",
+  "version": "3.4.8-rc.0",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

From d5a4db25eea578d5461c84cce9adebdee9992961 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Thu, 30 Jun 2022 18:50:09 +0530
Subject: [PATCH 10/22] fix: warning of styledprops theme index

---
 src/theme/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/index.ts b/src/theme/index.ts
index 6c24221f5..2fc59825c 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -31,5 +31,5 @@ export interface ITheme extends ICustomTheme, Omit<Theme, keyof ICustomTheme> {}
 export { theme, tools as themeTools };
 
 export { getColor } from './styled-system';
-export { StyledProps } from './types';
+export type { StyledProps } from './types';
 export * from './v33x-theme';

From 89770d6c31171c3cba1cf41b3f0e25d1ea1605ac Mon Sep 17 00:00:00 2001
From: Suraj Ahmed <suraj@geekyants.com>
Date: Thu, 30 Jun 2022 19:42:12 +0530
Subject: [PATCH 11/22] fix: typing error fixes for button

---
 .../storybook/stories/components/Wrapper.tsx  | 10 ++++----
 src/theme/components/button.ts                | 25 ++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/example/storybook/stories/components/Wrapper.tsx b/example/storybook/stories/components/Wrapper.tsx
index bc318cefe..0d0bbde48 100644
--- a/example/storybook/stories/components/Wrapper.tsx
+++ b/example/storybook/stories/components/Wrapper.tsx
@@ -45,11 +45,11 @@ const myTheme = extendTheme({
           };
         },
 
-        myNewButton1: (props: any) => {
-          return {
-            padding: props.padding,
-          };
-        },
+        // myNewButton1: (props: any) => {
+        //   return {
+        //     padding: props.padding,
+        //   };
+        // },
       },
       sizes: {
         newsize: ({ mySize }: { mySize: number }) => {
diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts
index b76edb60b..b3999537e 100644
--- a/src/theme/components/button.ts
+++ b/src/theme/components/button.ts
@@ -1,6 +1,7 @@
+import type { InterfaceButtonProps } from '../../components/primitives/Button/types';
 import { mode } from './../tools';
 
-const baseStyle = (props: Record<string, any>) => {
+const baseStyle = (props: InterfaceButtonProps & { theme: any }) => {
   const { primary } = props.theme.colors;
   const focusRing = mode(
     {
@@ -50,7 +51,7 @@ const baseStyle = (props: Record<string, any>) => {
   };
 };
 
-function variantGhost({ colorScheme }: Record<string, any>) {
+function variantGhost({ colorScheme, ..._props }: InterfaceButtonProps) {
   return {
     _light: {
       _text: {
@@ -89,7 +90,7 @@ function variantGhost({ colorScheme }: Record<string, any>) {
   };
 }
 
-function variantOutline({ colorScheme }: Record<string, any>) {
+function variantOutline({ colorScheme, ..._props }: InterfaceButtonProps) {
   return {
     borderWidth: '1px',
 
@@ -132,7 +133,7 @@ function variantOutline({ colorScheme }: Record<string, any>) {
   };
 }
 
-function variantSolid({ colorScheme }: Record<string, any>) {
+function variantSolid({ colorScheme, ..._props }: InterfaceButtonProps) {
   return {
     _text: {
       color: 'text.50',
@@ -165,7 +166,7 @@ function variantSolid({ colorScheme }: Record<string, any>) {
   };
 }
 
-function variantSubtle({ colorScheme }: Record<string, any>) {
+function variantSubtle({ colorScheme, ..._props }: InterfaceButtonProps) {
   return {
     _text: {
       color: `${colorScheme}.900`,
@@ -198,7 +199,7 @@ function variantSubtle({ colorScheme }: Record<string, any>) {
   };
 }
 
-function variantLink({ colorScheme }: Record<string, any>) {
+function variantLink({ colorScheme, ..._props }: InterfaceButtonProps) {
   return {
     _icon: {
       color: `${colorScheme}.600`,
@@ -241,12 +242,12 @@ function variantLink({ colorScheme }: Record<string, any>) {
 }
 
 const variants = {
-  ghost: variantGhost,
-  outline: variantOutline,
-  solid: variantSolid,
-  subtle: variantSubtle,
-  link: variantLink,
-  unstyled: {},
+  ghost: variantGhost as any,
+  outline: variantOutline as any,
+  solid: variantSolid as any,
+  subtle: variantSubtle as any,
+  link: variantLink as any,
+  unstyled: {} as any,
 };
 
 const sizes = {

From b097b8b72f666b485f7816b9021c2b4c8d78a8a7 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Thu, 30 Jun 2022 19:45:25 +0530
Subject: [PATCH 12/22] fix: input type fixes

---
 src/theme/components/input.ts | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts
index 91360afaf..9f5075ee7 100644
--- a/src/theme/components/input.ts
+++ b/src/theme/components/input.ts
@@ -1,5 +1,6 @@
 import { transparentize } from '../tools';
-const baseStyle = (props: any) => {
+import type { InterfaceInputProps } from '../../components/primitives/Input/types';
+const baseStyle = (props: InterfaceInputProps & { theme: any }) => {
   const { primary, error } = props.theme.colors;
 
   return {
@@ -128,7 +129,7 @@ const baseStyle = (props: any) => {
   };
 };
 
-function roundedStyle(props: Record<string, any>) {
+function roundedStyle(props: InterfaceInputProps & { theme: any }) {
   const { theme } = props;
   return {
     borderRadius: 'full',
@@ -138,7 +139,7 @@ function roundedStyle(props: Record<string, any>) {
     },
   };
 }
-function outlineStyle(props: Record<string, any>) {
+function outlineStyle(props: InterfaceInputProps & { theme: any }) {
   const { theme } = props;
   return {
     borderWidth: '1',
@@ -147,7 +148,7 @@ function outlineStyle(props: Record<string, any>) {
     },
   };
 }
-function filledStyle(props: Record<string, any>) {
+function filledStyle(props: InterfaceInputProps & { theme: any }) {
   const { theme } = props;
   return {
     borderWidth: '1',
@@ -192,7 +193,7 @@ function unstyledStyle() {
     },
   };
 }
-function underlinedStyle(props: Record<string, any>) {
+function underlinedStyle(props: InterfaceInputProps & { theme: any }) {
   const { primary, error } = props.theme.colors;
 
   return {
@@ -240,11 +241,11 @@ function underlinedStyle(props: Record<string, any>) {
 }
 
 const variants = {
-  outline: outlineStyle,
-  underlined: underlinedStyle,
-  rounded: roundedStyle,
-  filled: filledStyle,
-  unstyled: unstyledStyle,
+  outline: outlineStyle as any,
+  underlined: underlinedStyle as any,
+  rounded: roundedStyle as any,
+  filled: filledStyle as any,
+  unstyled: unstyledStyle as any,
 };
 
 const sizes = {

From dcfb38dc8fb0669168ffdd19a7ee3f59b790770f Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 1 Jul 2022 12:34:05 +0530
Subject: [PATCH 13/22] fix: alert typing

---
 src/theme/components/alert.ts | 40 +++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts
index 444888bf1..bff3274ab 100644
--- a/src/theme/components/alert.ts
+++ b/src/theme/components/alert.ts
@@ -1,6 +1,8 @@
 import { getColor, getColorScheme, transparentize } from '../tools';
-
-function getBg(props: Record<string, any>) {
+import type { InterfaceAlertProps } from '../../components/composites/Alert/types';
+function getBg(
+  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) {
   let { theme, colorScheme, status, variant } = props;
 
   colorScheme = getColorScheme(props, !status ? colorScheme : status);
@@ -18,7 +20,9 @@ function getBg(props: Record<string, any>) {
   return { lightBg, darkBg };
 }
 
-const variantSubtle = (props: Record<string, any>) => {
+const variantSubtle = (
+  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
   let { colorScheme, status } = props;
   const { lightBg, darkBg } = getBg(props);
 
@@ -36,7 +40,7 @@ const variantSubtle = (props: Record<string, any>) => {
   };
 };
 
-const variantOutline = (props: Record<string, any>) => {
+const variantOutline = (props: InterfaceAlertProps & { colorScheme: any }) => {
   let { colorScheme, status } = props;
 
   colorScheme = getColorScheme(props, !status ? colorScheme : status);
@@ -54,7 +58,9 @@ const variantOutline = (props: Record<string, any>) => {
   };
 };
 
-const variantOutlineLight = (props: Record<string, any>) => {
+const variantOutlineLight = (
+  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
   let { colorScheme, status, theme } = props;
 
   colorScheme = getColorScheme(props, !status ? colorScheme : status);
@@ -72,7 +78,9 @@ const variantOutlineLight = (props: Record<string, any>) => {
   };
 };
 
-const variantSolid = (props: Record<string, any>) => {
+const variantSolid = (
+  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
   const { lightBg, darkBg } = getBg(props);
   return {
     _light: {
@@ -85,7 +93,9 @@ const variantSolid = (props: Record<string, any>) => {
   };
 };
 
-const variantLeftAccent = (props: Record<string, any>) => {
+const variantLeftAccent = (
+  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
   let { colorScheme, status } = props;
   const { lightBg, darkBg } = getBg(props);
 
@@ -106,7 +116,9 @@ const variantLeftAccent = (props: Record<string, any>) => {
   };
 };
 
-const variantTopAccent = (props: Record<string, any>) => {
+const variantTopAccent = (
+  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
   let { colorScheme, status } = props;
   const { lightBg, darkBg } = getBg(props);
 
@@ -128,12 +140,12 @@ const variantTopAccent = (props: Record<string, any>) => {
 };
 
 const variants = {
-  'subtle': variantSubtle,
-  'solid': variantSolid,
-  'left-accent': variantLeftAccent,
-  'top-accent': variantTopAccent,
-  'outline': variantOutline,
-  'outline-light': variantOutlineLight,
+  'subtle': variantSubtle as any,
+  'solid': variantSolid as any,
+  'left-accent': variantLeftAccent as any,
+  'top-accent': variantTopAccent as any,
+  'outline': variantOutline as any,
+  'outline-light': variantOutlineLight as any,
 };
 
 export const Alert = {

From d4a0867637fde4ab961ebbdc5299d4ec177c6f2f Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 1 Jul 2022 13:05:49 +0530
Subject: [PATCH 14/22] fix: avatar group

---
 src/theme/components/avatar-group.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/theme/components/avatar-group.ts b/src/theme/components/avatar-group.ts
index 1baf31401..ce36e527c 100644
--- a/src/theme/components/avatar-group.ts
+++ b/src/theme/components/avatar-group.ts
@@ -1,4 +1,5 @@
-function baseStyle({ isVertical }: Record<string, any>) {
+import type { IAvatarGroupProps } from '../../components/composites/Avatar/types';
+function baseStyle({ isVertical }: IAvatarGroupProps) {
   return {
     flexDirection: isVertical ? 'column-reverse' : 'row-reverse',
     space: -4,

From 361ed543d8f085de362a92f4a0da0781520a4ec4 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 1 Jul 2022 15:49:10 +0530
Subject: [PATCH 15/22] fix: avatar typing

---
 src/theme/components/avatar.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/components/avatar.ts b/src/theme/components/avatar.ts
index 781d74445..a1eeb3a29 100644
--- a/src/theme/components/avatar.ts
+++ b/src/theme/components/avatar.ts
@@ -1,6 +1,6 @@
 import { randomColor, getRandomString } from './../tools';
-
-const baseStyle = (props: Record<string, any>) => {
+import type { InterfaceAvatarProps } from '../../components/composites/Avatar/types';
+const baseStyle = (props: InterfaceAvatarProps & { name: string }) => {
   const { name } = props;
   const bg = name
     ? randomColor({ string: getRandomString(5) + name })

From eeb86c6f516d55f48d322e644187bdeabddf2d5b Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 5 Jul 2022 15:02:46 +0530
Subject: [PATCH 16/22] fix: badge and button typing

---
 src/theme/components/badge.ts  | 14 +++++++-------
 src/theme/components/button.ts | 10 +++++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/theme/components/badge.ts b/src/theme/components/badge.ts
index 0431b1dc3..3788064de 100644
--- a/src/theme/components/badge.ts
+++ b/src/theme/components/badge.ts
@@ -1,5 +1,5 @@
 import { getColorScheme } from '../tools';
-
+import type { InterfaceBadgeProps } from '../../components/composites/Badge/types';
 const baseStyle = {
   flexDirection: 'row',
   justifyContent: 'center',
@@ -10,7 +10,7 @@ const baseStyle = {
   _text: { fontSize: 'xs', fontWeight: 'medium' },
 };
 
-function variantSolid(props: Record<string, any>) {
+function variantSolid(props: InterfaceBadgeProps & { colorScheme: any }) {
   const colorScheme = getColorScheme(props);
   return {
     _text: {
@@ -26,7 +26,7 @@ function variantSolid(props: Record<string, any>) {
   };
 }
 
-function variantSubtle(props: Record<string, any>) {
+function variantSubtle(props: InterfaceBadgeProps & { colorScheme: any }) {
   const colorScheme = getColorScheme(props);
   return {
     _text: { color: `${colorScheme}.900` },
@@ -39,7 +39,7 @@ function variantSubtle(props: Record<string, any>) {
   };
 }
 
-function variantOutline(props: Record<string, any>) {
+function variantOutline(props: InterfaceBadgeProps & { colorScheme: any }) {
   const colorScheme = getColorScheme(props);
   return {
     _light: {
@@ -62,9 +62,9 @@ function variantOutline(props: Record<string, any>) {
 }
 
 const variants = {
-  solid: variantSolid,
-  subtle: variantSubtle,
-  outline: variantOutline,
+  solid: variantSolid as any,
+  subtle: variantSubtle as any,
+  outline: variantOutline as any,
 };
 
 const defaultProps = {
diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts
index b3999537e..475526ec7 100644
--- a/src/theme/components/button.ts
+++ b/src/theme/components/button.ts
@@ -51,7 +51,7 @@ const baseStyle = (props: InterfaceButtonProps & { theme: any }) => {
   };
 };
 
-function variantGhost({ colorScheme, ..._props }: InterfaceButtonProps) {
+function variantGhost({ colorScheme }: InterfaceButtonProps) {
   return {
     _light: {
       _text: {
@@ -90,7 +90,7 @@ function variantGhost({ colorScheme, ..._props }: InterfaceButtonProps) {
   };
 }
 
-function variantOutline({ colorScheme, ..._props }: InterfaceButtonProps) {
+function variantOutline({ colorScheme }: InterfaceButtonProps) {
   return {
     borderWidth: '1px',
 
@@ -133,7 +133,7 @@ function variantOutline({ colorScheme, ..._props }: InterfaceButtonProps) {
   };
 }
 
-function variantSolid({ colorScheme, ..._props }: InterfaceButtonProps) {
+function variantSolid({ colorScheme }: InterfaceButtonProps) {
   return {
     _text: {
       color: 'text.50',
@@ -166,7 +166,7 @@ function variantSolid({ colorScheme, ..._props }: InterfaceButtonProps) {
   };
 }
 
-function variantSubtle({ colorScheme, ..._props }: InterfaceButtonProps) {
+function variantSubtle({ colorScheme }: InterfaceButtonProps) {
   return {
     _text: {
       color: `${colorScheme}.900`,
@@ -199,7 +199,7 @@ function variantSubtle({ colorScheme, ..._props }: InterfaceButtonProps) {
   };
 }
 
-function variantLink({ colorScheme, ..._props }: InterfaceButtonProps) {
+function variantLink({ colorScheme }: InterfaceButtonProps) {
   return {
     _icon: {
       color: `${colorScheme}.600`,

From 5e70ed5b3cffd403f8798e6c7a082d5f01b68d6d Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 5 Jul 2022 17:45:31 +0530
Subject: [PATCH 17/22] fix: avatar badgesize

---
 src/components/composites/Avatar/Avatar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/composites/Avatar/Avatar.tsx b/src/components/composites/Avatar/Avatar.tsx
index 036de88c9..f0e635740 100644
--- a/src/components/composites/Avatar/Avatar.tsx
+++ b/src/components/composites/Avatar/Avatar.tsx
@@ -21,7 +21,9 @@ const Avatar = ({ children, ...props }: IAvatarProps, ref: any) => {
       typeof child?.type === 'object' &&
       child?.type.displayName === 'AvatarBadge'
     ) {
-      Badge = React.cloneElement(child, { size: _badgeSize[0] });
+      Badge = React.cloneElement(child, {
+        size: _badgeSize ? _badgeSize[0] : undefined,
+      });
     } else {
       remainingChildren.push(child);
     }

From 1b9f585a1e6ccbce1ba3ecd72d3d0aa53c58ec0e Mon Sep 17 00:00:00 2001
From: ankit-tailor <tailorankit3345@gmail.com>
Date: Tue, 5 Jul 2022 18:38:52 +0530
Subject: [PATCH 18/22] fix: docs link

---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index fb7ef7c93..08be6d71f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -24,7 +24,7 @@ If you are eager to start contributing code right away, you can go through [Nati
 There are other ways you can contribute without writing a single line of code. Here are a few things you can do to help out:
 
 1. **Replying and handling open issues.** We get a lot of issues every day, and some of them may lack necessary information. You can help out by guiding people through the process of filling out the issue template, asking for clarifying information, or pointing them to existing issues that match their description of the problem.
-2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/nativebase/website/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the bottom left of most docs pages to get started with your own contribution.
+2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/GeekyAnts/nativebase-docs/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the bottom left of most docs pages to get started with your own contribution.
 3. **Help people write test plans.** Some pull requests sent to the main repository may lack a proper test plan. These help reviewers understand how the change was tested, and can speed up the time it takes for a contribution to be accepted.
 
 Each of these tasks is highly impactful, and maintainers will greatly appreciate your help.

From 9e85eabb766341b9c90ebcab49fe1af8011862e6 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 5 Jul 2022 22:02:55 +0530
Subject: [PATCH 19/22] feat: adding new file to checktypes in sb

---
 .../stories/components/Allcomponents.tsx      | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 example/storybook/stories/components/Allcomponents.tsx

diff --git a/example/storybook/stories/components/Allcomponents.tsx b/example/storybook/stories/components/Allcomponents.tsx
new file mode 100644
index 000000000..eb2c6b6bf
--- /dev/null
+++ b/example/storybook/stories/components/Allcomponents.tsx
@@ -0,0 +1,139 @@
+//@ts-nocheck
+//uncomment above line to test typing of components
+import {
+  Badge,
+  IconButton,
+  Alert,
+  AspectRatio,
+  Avatar,
+  Breadcrumb,
+  Card,
+  Container,
+  Divider,
+  Kbd,
+  Progress,
+  Accordion,
+  FormControl,
+  Center,
+  Square,
+  Circle,
+  Fade,
+  ScaleFade,
+  PresenceTransition,
+  Slide,
+  SlideFade,
+  Popover,
+  AlertDialog,
+  Menu,
+  SimpleGrid,
+  Actionsheet,
+  Fab,
+  Modal,
+  Backdrop,
+  Tooltip,
+} from 'native-base';
+
+import {
+  Text,
+  Checkbox,
+  Radio,
+  Hidden,
+  Button,
+  Column,
+  Row,
+  Box,
+  Stack,
+  VStack,
+  HStack,
+  ZStack,
+  Slider,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  InputRightAddon,
+  Image,
+  Spinner,
+  Heading,
+  Flex,
+  Switch,
+  TextArea,
+  Link,
+  Select,
+  Pressable,
+  Overlay,
+  Skeleton,
+} from 'native-base';
+
+export const Example = () => {
+  return (
+    <>
+      <Input aaa></Input>
+      <Badge sss="1"></Badge>
+      <IconButton sss="1"></IconButton>
+      <Alert sss="1"></Alert>
+      <AspectRatio sss="1"></AspectRatio>
+      <Avatar sss="1"></Avatar>
+      <Breadcrumb sss="1"></Breadcrumb>
+      <Card sss="1"></Card>
+      <Container sss="1"></Container>
+      <Divider sss="1"></Divider>
+      <Kbd sss="1"></Kbd>
+      <Progress sss="1"></Progress>
+      <Accordion sss="1"></Accordion>
+      <Skeleton sss="1"></Skeleton>
+      <FormControl sss="1"></FormControl>
+      <Center sss="1"></Center>
+      <Square sss="1"></Square>
+      <Circle sss="1"></Circle>
+      <Fade sss="1"></Fade>
+      <ScaleFade sss="1"></ScaleFade>
+      <PresenceTransition sss="1"></PresenceTransition>
+      <Slide sss="1"></Slide>
+      <SlideFade sss="1"></SlideFade>
+      <Popover sss="1" trigger={() => <Box sss="1"></Box>}>
+        <Box sss="1"></Box>
+      </Popover>
+      <AlertDialog sss="1"></AlertDialog>
+      <Menu sss="1" trigger={() => <Box></Box>}></Menu>
+      <SimpleGrid sss="1"></SimpleGrid>
+      <Actionsheet sss="1"></Actionsheet>
+      <Fab sss="1"></Fab>
+      <Modal sss="1"></Modal>
+      <Backdrop sss="1"></Backdrop>
+      <Tooltip label="hell" sss="1">
+        Hello
+      </Tooltip>
+      <Text sss="1"></Text>
+      <Checkbox sss="1" value="1"></Checkbox>
+      <Radio sss="1" value="1"></Radio>
+      <Hidden sss="1">
+        <Box sss="1"></Box>
+      </Hidden>
+      <Button sss="1"></Button>
+      <Column sss="1"></Column>
+      <Row sss="1"></Row>
+      <Box sss="1"></Box>
+      <Stack sss="1"></Stack>
+      <VStack sss="1"></VStack>
+      <HStack sss="1"></HStack>
+      <ZStack sss="1"></ZStack>
+      <Slider sss="1"></Slider>
+      <Icon sss="1"></Icon>
+      <Input sss="1"></Input>
+      <InputGroup sss="1"></InputGroup>
+      <InputLeftAddon sss="1"></InputLeftAddon>
+      <InputRightAddon sss="1"></InputRightAddon>
+      <Image sss="1"></Image>
+      <Spinner sss="1"></Spinner>
+      <Heading sss="1"></Heading>
+      <Flex sss="1"></Flex>
+      <Switch sss="1"></Switch>
+      <TextArea sss="1"></TextArea>
+      <Link sss="1"></Link>
+      <Select sss="1"></Select>
+      <Pressable sss="1"></Pressable>
+      <Overlay sss="1"></Overlay>
+    </>
+  );
+};

From 0c0a563f92669f238701400578c1654c15197019 Mon Sep 17 00:00:00 2001
From: Suraj Ahmed <suraj@geekyants.com>
Date: Wed, 6 Jul 2022 16:25:22 +0530
Subject: [PATCH 20/22] fix: avatar badge size prop

---
 src/components/composites/Avatar/Avatar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/composites/Avatar/Avatar.tsx b/src/components/composites/Avatar/Avatar.tsx
index f0e635740..adb54ccc6 100644
--- a/src/components/composites/Avatar/Avatar.tsx
+++ b/src/components/composites/Avatar/Avatar.tsx
@@ -22,7 +22,11 @@ const Avatar = ({ children, ...props }: IAvatarProps, ref: any) => {
       child?.type.displayName === 'AvatarBadge'
     ) {
       Badge = React.cloneElement(child, {
-        size: _badgeSize ? _badgeSize[0] : undefined,
+        size: child?.props?.size
+          ? child?.props?.size
+          : _badgeSize
+          ? _badgeSize[0]
+          : undefined,
       });
     } else {
       remainingChildren.push(child);

From d6997feaaec047aa4369f6eb956205028b1a175e Mon Sep 17 00:00:00 2001
From: Suraj Ahmed <suraj@geekyants.com>
Date: Wed, 6 Jul 2022 16:36:00 +0530
Subject: [PATCH 21/22] v3.4.8-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b405188cf..e19165ee6 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.8-rc.0",
+  "version": "3.4.8-rc.1",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

From 6f3f1603c630eb4d4396c3865669e72b8241272f Mon Sep 17 00:00:00 2001
From: Suraj Ahmed <suraj@geekyants.com>
Date: Wed, 6 Jul 2022 17:25:37 +0530
Subject: [PATCH 22/22] v3.4.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e19165ee6..dcd9e2be8 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.8-rc.1",
+  "version": "3.4.8",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",