Merge pull request #2001 from gluestack/fix/added-use-client

Fix/added use client

example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Box, Center, useColorMode } from '@gluestack-ui/themed';
 import { GluestackUIProvider } from './gluestack-ui-provider';

example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createAccordion } from '@gluestack-ui/accordion';
 import { View, Pressable, Text, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { H4 } from '@expo/html-elements';
 import { createActionsheet } from '@gluestack-ui/actionsheet';
 import {

example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createAlertDialog } from '@gluestack-ui/alert-dialog';
 

example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createAlert } from '@gluestack-ui/alert';
 import { View, Text } from 'react-native';
 

example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createAvatar } from '@gluestack-ui/avatar';
 

example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Text, View, Platform } from 'react-native';
 

example/storybook-nativewind/src/core-components/nativewind/box/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { View } from 'react-native';
 

example/storybook-nativewind/src/core-components/nativewind/button/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createButton } from '@gluestack-ui/button';
 

example/storybook-nativewind/src/core-components/nativewind/card/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { View } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/center/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';

example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createCheckbox } from '@gluestack-ui/checkbox';
 import { View, Pressable, Text } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/divider/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createDivider } from '@gluestack-ui/divider';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { View } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createFab } from '@gluestack-ui/fab';
 import { Platform, Text, View } from 'react-native';
 import { Pressable } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/flat-list/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { FlatList } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Text, View } from 'react-native';
 import React from 'react';
 import { createFormControl } from '@gluestack-ui/form-control';

example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts

@@ -1,3 +1,4 @@
+'use client';
 import { vars } from 'nativewind';
 
 export const config = {

example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { config } from './config';
 
 export function GluestackUIProvider({

example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useCallback } from 'react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';

example/storybook-nativewind/src/core-components/nativewind/hstack/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { View } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createIcon } from '@gluestack-ui/icon';
 import { Path, Svg } from 'react-native-svg';

example/storybook-nativewind/src/core-components/nativewind/image-background/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { ImageBackground as RNImageBackground } from 'react-native';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';

example/storybook-nativewind/src/core-components/nativewind/image/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createImage } from '@gluestack-ui/image';
 import { Image as RNImage } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/input-accessory-view/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { InputAccessoryView } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/input/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createInput } from '@gluestack-ui/input';
 import { View, Pressable, TextInput, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/keyboard-avoiding-view/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { KeyboardAvoidingView } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/linear-gradient/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';

example/storybook-nativewind/src/core-components/nativewind/link/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createLink } from '@gluestack-ui/link';
 import { Pressable, Platform } from 'react-native';
 import { Text } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx

@@ -1,10 +1,11 @@
+'use client';
 import React from 'react';
 import { createMenu } from '@gluestack-ui/menu';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
 import { Pressable, Text } from 'react-native';
 import { Motion, AnimatePresence } from '@legendapp/motion';
-import { VariantProps } from '@gluestack-ui/nativewind-utils';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const menuStyle = tva({
   base: 'min-w-[200px] py-2 rounded-sm bg-background-0',
@@ -101,6 +102,9 @@ export const UIMenu = createMenu({
   AnimatePresence: AnimatePresence,
 });
 
+cssInterop(UIMenu, { className: 'style' });
+cssInterop(UIMenu.ItemLabel, { className: 'style' });
+
 type IMenuProps = React.ComponentProps<typeof UIMenu> &
   VariantProps<typeof menuStyle>;
 type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &
@@ -138,10 +142,6 @@ const Menu = React.forwardRef(
   }
 );
 
-cssInterop(UIMenu, { className: 'style' });
-cssInterop(UIMenu.Item, { className: 'style' });
-cssInterop(UIMenu.ItemLabel, { className: 'style' });
-
 const MenuItem = UIMenu.Item;
 
 const MenuItemLabel = React.forwardRef(

example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createModal } from '@gluestack-ui/modal';
 import { Pressable, View, ScrollView, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { createPopover } from '@gluestack-ui/popover';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';

example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable as RNPressable, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createProgress } from '@gluestack-ui/progress';
 import { View } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createRadio } from '@gluestack-ui/radio';
 import { Pressable, View, Platform, Text } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/refresh-control/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { RefreshControl } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/safe-area-view/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { SafeAreaView } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/scroll-view/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { ScrollView } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/section-list/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { SectionList } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createSlider } from '@gluestack-ui/slider';
 import { Pressable } from 'react-native';
 import { View, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/spinner/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { ActivityIndicator } from 'react-native';
 import React from 'react';
 import { createSpinner } from '@gluestack-ui/spinner';

example/storybook-nativewind/src/core-components/nativewind/status-bar/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { StatusBar } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Switch as RNSwitch, Platform } from 'react-native';
 import { createSwitch } from '@gluestack-ui/switch';

example/storybook-nativewind/src/core-components/nativewind/text/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 

example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createTextarea } from '@gluestack-ui/textarea';
 import { View, TextInput, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createToast, createToastHook } from '@gluestack-ui/toast';
 import { Text, View } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createTooltip } from '@gluestack-ui/tooltip';
 import { View, Text, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/view/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { View } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/virtualized-list/index.tsx

@@ -1 +1,2 @@
+'use client';
 export { VirtualizedList } from 'react-native';

example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';

example/storybook-nativewind/src/core-components/themed/Wrapper.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Box, Center } from '@gluestack-ui/themed';
 import { StyledProvider, useColorMode } from '@gluestack-style/react';

example/storybook-nativewind/src/core-components/themed/accordion/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createAccordion } from '@gluestack-ui/accordion';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { View, Pressable, Text, Platform } from 'react-native';

example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 import {
   AnimatePresence,

example/storybook-nativewind/src/core-components/themed/alert-dialog/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import {
   AnimatePresence,
   AnimatedView,

example/storybook-nativewind/src/core-components/themed/alert/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { createAlert } from '@gluestack-ui/alert';
 import { View, Text } from 'react-native';

example/storybook-nativewind/src/core-components/themed/avatar/index.tsx

@@ -1,5 +1,5 @@
+'use client';
 import { createAvatar } from '@gluestack-ui/avatar';
-
 import { styled } from '@gluestack-style/react';
 import { View, Text, Image } from 'react-native';
 const StyledRoot = styled(

example/storybook-nativewind/src/core-components/themed/badge/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { Text, View } from 'react-native';
 

example/storybook-nativewind/src/core-components/themed/box/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 
 import { styled } from '@gluestack-style/react';

example/storybook-nativewind/src/core-components/themed/button/index.tsx

@@ -1,5 +1,5 @@
+'use client';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-
 import { createButton } from '@gluestack-ui/button';
 import { AsForwarder, styled } from '@gluestack-style/react';
 

example/storybook-nativewind/src/core-components/themed/card/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 

example/storybook-nativewind/src/core-components/themed/center/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 const StyledRoot = styled(

example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createCheckbox } from '@gluestack-ui/checkbox';
 import { View, Pressable, Text } from 'react-native';
 

example/storybook-nativewind/src/core-components/themed/divider/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createDivider } from '@gluestack-ui/divider';
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';

example/storybook-nativewind/src/core-components/themed/fab/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { createFab } from '@gluestack-ui/fab';
 import { Text } from 'react-native';

example/storybook-nativewind/src/core-components/themed/flat-list/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { FlatList as RNFlatList } from 'react-native';
 import { styled, useStyled, propertyTokenMap } from '@gluestack-style/react';
 

example/storybook-nativewind/src/core-components/themed/form-control/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Text, View } from 'react-native';
 
 import { styled } from '@gluestack-style/react';

example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts

@@ -1,3 +1,4 @@
+'use client';
 import { AnimationResolver } from '@gluestack-style/animation-resolver';
 import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
 import { createConfig } from '@gluestack-style/react';

example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createProvider } from '@gluestack-ui/provider';
 import { StyledProvider } from '@gluestack-style/react';

example/storybook-nativewind/src/core-components/themed/heading/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 

example/storybook-nativewind/src/core-components/themed/hstack/index.tsx

@@ -1,5 +1,5 @@
+'use client';
 import { View } from 'react-native';
-
 import { styled } from '@gluestack-style/react';
 
 const StyledRoot = styled(View, {

example/storybook-nativewind/src/core-components/themed/icon/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createIcon } from '@gluestack-ui/icon';
 import { styled, AsForwarder } from '@gluestack-style/react';

example/storybook-nativewind/src/core-components/themed/image-background/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { ImageBackground as RNImageBackground } from 'react-native';
 

example/storybook-nativewind/src/core-components/themed/image/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createImage } from '@gluestack-ui/image';
 import { Image as RNImage } from 'react-native';
 import { styled } from '@gluestack-style/react';

example/storybook-nativewind/src/core-components/themed/input-accessory-view/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { InputAccessoryView as RNInputAccessoryView } from 'react-native';
 

example/storybook-nativewind/src/core-components/themed/input/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createInput } from '@gluestack-ui/input';
 import { styled, AsForwarder } from '@gluestack-style/react';
 import { View, Pressable, TextInput } from 'react-native';

example/storybook-nativewind/src/core-components/themed/keyboard-avoiding-view/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { styled, useStyled } from '@gluestack-style/react';
 import { KeyboardAvoidingView as RNKeyboardAvoidingView } from 'react-native';
 

example/storybook-nativewind/src/core-components/themed/linear-gradient/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';