Merge pull request #2002 from gluestack/release/@gluestack-ui/input@0…

….1.27

Release/@gluestack UI/[email protected]

example/storybook-nativewind/package.json

@@ -29,7 +29,7 @@
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
     "@gluestack-style/react": "^1.0.52",
     "@gluestack-ui/config": "^1.1.17",
-    "@gluestack-ui/themed": "^1.1.16",
+    "@gluestack-ui/themed": "^1.1.17",
     "@gluestack/design-system": "^0.5.36",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",

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';
@@ -6,8 +7,8 @@ import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-
 import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 export const UIProgress = createProgress({
   Root: withStyleContext(View),
@@ -44,8 +45,13 @@ const progressFilledTrackStyle = tva({
   },
 });
 
+type IProgressProps = VariantProps<typeof progressStyle> &
+  React.ComponentProps<typeof UIProgress>;
+type IProgressFilledTrackProps = VariantProps<typeof progressFilledTrackStyle> &
+  React.ComponentProps<typeof UIProgress.FilledTrack>;
+
 export const Progress = React.forwardRef(
-  ({ className, size = 'md', ...props }: any, ref) => {
+  ({ className, size = 'md', ...props }: IProgressProps, ref?: any) => {
     return (
       <UIProgress
         ref={ref}
@@ -58,20 +64,20 @@ export const Progress = React.forwardRef(
 );
 
 export const ProgressFilledTrack = React.forwardRef(
-  ({ className, size, ...props }: any, ref) => {
+  ({ className, ...props }: IProgressFilledTrackProps, ref?: any) => {
     const { size: parentSize } = useStyleContext();
 
     return (
       <UIProgress.FilledTrack
+        // @ts-ignore
         ref={ref}
-        {...props}
         className={progressFilledTrackStyle({
           parentVariants: {
             size: parentSize,
           },
-          size,
           class: className,
         })}
+        {...props}
       />
     );
   }

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,7 +1,8 @@
+'use client';
 import React from 'react';
 import { createTooltip } from '@gluestack-ui/tooltip';
 import { View, Text, Platform } from 'react-native';
-import { VariantProps } from '@gluestack-ui/nativewind-utils';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
 import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';

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';