Merge pull request #2616 from gluestack/release/@gluestack-ui/themed@…

…1.1.63

gluestack-ui V2 Stable Release.

README.md

@@ -2,7 +2,6 @@
 
 gluestack-ui is a library of copy-pasteable components & patterns crafted with Tailwind CSS (NativeWind).
 
-
 [![GitHub stars](https://img.shields.io/github/stars/gluestack/gluestack-ui)](https://github.com/gluestack/gluestack-ui)
 
 [![NPM downloads](https://img.shields.io/npm/dw/@gluestack-ui/button?logo=npm&label=NPM%20downloads&cacheSeconds=3600)](https://www.npmjs.com/package/@gluestack-ui/button) [![Commits per month](https://img.shields.io/github/commit-activity/m/gluestack/gluestack-ui?label=Commits&logo=git)](https://github.com/gluestack/gluestack-ui/commits)

example/storybook-nativewind/package.json

@@ -32,7 +32,7 @@
     "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.61",
+    "@gluestack-ui/themed": "^1.1.62",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",
@@ -59,7 +59,7 @@
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
     "lucide-react-native": "^0.236.0",
-    "nativewind": "^4.0.36",
+    "nativewind": "4.1.10",
     "next": "^13.5.3",
     "prism-react-renderer": "^1.3.5",
     "re-resizable": "^6.9.11",

example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx

@@ -539,11 +539,11 @@ We have outlined the various features that ensure the Actionsheet component is a
 - `Shift + Tab`: Moves focus to the previous focusable element.
 - `Esc`: Closes the actionsheet.
 
-## Examples
+### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
 
-### Keyboard handling
+#### Keyboard handling
 
 Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen.
 
@@ -759,7 +759,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
   />
 </Wrapper>
 
-### Icons
+#### Icons
 
 The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation.
 
@@ -835,7 +835,7 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
   />
 </Wrapper>
 
-### VirtualizedList
+#### VirtualizedList
 
 The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience.
 
@@ -849,7 +849,7 @@ The Actionsheet with Virtualized List includes a virtualized list for better per
     const handleClose = () => setShowActionsheet(false);
     const data = React.useMemo(() => Array(50).fill(0).map((_, index) => 'Item' + index),[]);
     const getItem = (_data, index) => ({
-      id: Math.random().toString(12).substring(0),
+      id: index,
       title: _data[index],
     });
     const getItemCount = (_data) => _data.length;
@@ -908,7 +908,7 @@ The Actionsheet with Virtualized List includes a virtualized list for better per
   />
 </Wrapper>
 
-### FlatList
+#### FlatList
 
 The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user.
 
@@ -985,7 +985,7 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that
   />
 </Wrapper>
 
-### SectionList
+#### SectionList
 
 The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.
 
@@ -1057,7 +1057,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
   />
 </Wrapper>
 
-### File Upload with Actionsheet
+#### File Upload with Actionsheet
 
 <Wrapper>
   <CodePreview

example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx

@@ -419,7 +419,7 @@ The Examples section provides visual representations of the different variants o
               </Alert>
             </VStack>
           );
-        };
+        }
       `,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');

example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx

@@ -227,7 +227,7 @@ Avatar component is created using View component from react-native. It extends a
   </TableContainer>
 </>
 
-## Examples
+### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
 
@@ -645,7 +645,7 @@ Fallback text is shown when the image fails to load, the image is not available
     showArgsController={false}
     metaData={{
       code: `
-     <HStack space="md" h="100%" justifyContent="center" alignItems="center">
+     <HStack space="md">
           <Avatar size="md">
             <AvatarFallbackText>John Doe</AvatarFallbackText>
             <AvatarImage

example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx

@@ -302,7 +302,7 @@ An example of the Badge component being used with the Avatar component to displa
   />
 </Wrapper>
 
-### Badge Composition
+#### Badge Composition
 
 An example of the Badge component being used with the Composition component, allowing for the display of badges within a composition of other UI elements.
 

example/storybook-nativewind/src/components/Button/index.nw.stories.mdx

@@ -607,10 +607,9 @@ A button with an icon integrates a visual symbol within the button component, en
     metaData={{
       code: `
         <Button
-      size="lg"
-      className="rounded-full p-3.5"
+      size='lg'
+      className='rounded-full p-3.5'
     >
-    {\/* EditIcon is imported from 'lucide-react-native' *\/}
       <ButtonIcon as={EditIcon} />
     </Button>
       `,
@@ -665,7 +664,7 @@ The icon component incorporates a button component, combining visual representat
           <ButtonIcon as={InfoIcon} className='mr-2'/>
             <ButtonText>Left Icon</ButtonText>
           </Button>
-          <Button variant="solid" className='mt-2'>
+          <Button variant='solid' className='mt-2'>
           <ButtonText>Right Icon</ButtonText>
             <ButtonIcon as={AddIcon} className='ml-2'/>
           </Button>
@@ -705,13 +704,13 @@ The button with full width component utilizes a button component, expanding its
               <Input>
                 <InputField
                   className='py-2'
-                  placeholder="New password"
+                  placeholder='New password'
                 />
               </Input>
               <Input>
                 <InputField
                   className='py-2'
-                  placeholder="Confirm new password"
+                  placeholder='Confirm new password'
                 />
               </Input>
             </VStack>
@@ -725,7 +724,6 @@ The button with full width component utilizes a button component, expanding its
               </Button>
               <Box className='flex flex-row'>
                 <Button variant='link' size='sm' className='p-0'>
-                  {\/* ArrowLeftIcon is imported from 'lucide-react-native' *\/}
                   <ButtonIcon
                     className='mr-1'
                     size='md'

example/storybook-nativewind/src/components/Card/index.nw.stories.mdx

@@ -254,11 +254,11 @@ Renders a `<div />` on web and a `View` on native.
   </TableContainer>
 </>
 
-## Examples
+### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
 
-### Card with Image
+#### Card with Image
 
 This is an example of a Card component with an image.
 
@@ -276,6 +276,7 @@ function App(){
           uri: 'https://images.unsplash.com/photo-1529693662653-9d480530a697?q=80&w=2831&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         }}
         className="mb-6 h-[240px] w-full rounded-md"
+        alt="image"
       />
       <Text
         className="text-sm font-normal mb-2 text-typography-700"
@@ -324,7 +325,7 @@ Wrapper,
 
 </Wrapper>
 
-### Advanced Composition
+#### Advanced Composition
 
 This is an example of a Card component with other components like Avatar, Image and Button.
 
@@ -399,12 +400,14 @@ function App(){
             uri: 'https://images.unsplash.com/photo-1592089416462-2b0cb7da8379?q=80&w=2865&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
           }}
           className="mb-3 rounded-md w-full h-[140px] sm:mb-0 sm:mr-3 sm:w-[150px] sm:h-[154px]"
+          alt="image"
         />
         <Image
           source={{
             uri: 'https://images.unsplash.com/photo-1484406566174-9da000fda645?q=80&w=2425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
           }}
           className="rounded-md w-full h-[140px] sm:w-[150px] sm:h-[154px]"
+          alt="image"
         />
       </Box>
       <Button className="py-2 px-4">
@@ -437,7 +440,7 @@ Wrapper,
 
 </Wrapper>
 
-### Product Card
+#### Product Card
 
 This example illustrates a card showcasing a product.
 
@@ -455,6 +458,7 @@ function App(){
           uri: 'https://images.unsplash.com/photo-1595231712325-9fedecef7575?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D',
         }}
         className="mb-6 h-[240px] w-full rounded-md"
+        alt="image"
       />
       <Text
         className="text-sm font-normal mb-2 text-typography-700"
@@ -513,7 +517,7 @@ Wrapper,
 
 </Wrapper>
 
-### Blog Card
+#### Blog Card
 
 This is an example of a Card component with a blog post.
 
@@ -549,6 +553,7 @@ function App(){
             source={{
               uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
             }}
+            alt="image"
           />
         </Avatar>
         <VStack>

example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx

@@ -1086,7 +1086,6 @@ An uncontrolled component utilizes a checkbox component, providing a simpler imp
 function App() {
        const radioRef = React.useRef(null);
         const handleCheckboxChange = (e) => {
-            e.preventDefault();
             const checkboxValue = radioRef.current.checked;
           };
         return (
@@ -1170,7 +1169,7 @@ function CheckboxExample(){
         </CheckboxGroup>
       </Center>
   );
-};
+}
 `,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'CheckboxExample');

example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx

@@ -237,7 +237,7 @@ A Divider component with different layouts offers versatile options for visually
     showArgsController={false}
     metaData={{
       code: `
-    <VStack {...props}>
+    <VStack>
       <Heading>gluestack-ui</Heading>
       <Text>Universal component library</Text>
       <Divider className="my-2  bg-indigo-500" />
@@ -373,7 +373,7 @@ A Divider component used with or without inset adds visual hierarchy and distinc
     showArgsController={false}
     metaData={{
       code: `
-    <VStack space="2xl" {...props}>
+    <VStack space="2xl">
       <HStack className="px-3 h-8 rounded border border-solid border-outline-300">
         <Button variant="link" size="xs">
           <ButtonText>Github</ButtonText>

example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx

@@ -709,7 +709,6 @@ The Examples section provides visual representations of the different variants o
                       <Text className="font-semibold">Colour</Text>
                       <Divider className="my-1" />
                       <CheckboxGroup
-                        //@ts-ignore
                         value={colors}
                         onChange={(keys) => {
                           setColors(keys);

example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx

@@ -464,7 +464,7 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
             {
               uri: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
               name: 'Kevin James',
-              msg: 'Hi Rachel, What\\'s up',
+              msg: "Hi Rachel, What's up",
             },
             {
               uri: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80',
@@ -482,9 +482,9 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
             className='border rounded-lg border-outline-200 p-6 bg-background-100 min-w-[240px] sm:min-w-[360px] md:min-w-[476px]'
             >
               <VStack space='md'>
-                {data.map((chatData)=>{
+                {data.map((chatData, index)=>{
                   return (
-                    <HStack space='sm' className='items-center'>
+                    <HStack space='sm' className='items-center' key={index}>
                       <Avatar size='sm'>
                         <AvatarImage
                           source={{
@@ -732,6 +732,7 @@ A Fab component with custom placement allows for flexible positioning of the but
               fallbackSource={{
                 uri: 'https://drive.google.com/uc?export=view&id=1h1e89BtQCp6JdGiKo92dlf5bjHC8hLjt',
               }}
+              alt="image"
             />
           </Box>
           <VStack className='px-6 pt-4 pb-6'>

example/storybook-nativewind/src/components/FormControl/FormControl.tsx

@@ -41,7 +41,7 @@ const FormControlBasic = ({ isInvalid: propsIsInvalid, ...props }: any) => {
             type="password"
             placeholder="password"
             value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
+            onChangeText={(text) => setInputValue(text)}
           />
         </Input>
 

example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx

@@ -120,7 +120,7 @@ This is an illustration of **FormControl** component.
                   type="password"
                   placeholder="password"
                   value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
+                  onChangeText={(text) => setInputValue(text)}
                 />
               </Input>
               <FormControlHelper>

example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx

@@ -350,11 +350,11 @@ This section provides a comprehensive reference list for the component props, de
 </>
 
 
-## Examples
+### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
 
-### Setting the gap between grid items
+#### Setting the gap between grid items
 
 Use the gap-* utilities to change the gap between both rows and columns in grid
 
@@ -410,7 +410,7 @@ Use the gap-* utilities to change the gap between both rows and columns in grid
   />
 </Wrapper>
 
-### Changing row and column gaps independently
+#### Changing row and column gaps independently
 
 Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows independently.
 
@@ -492,7 +492,7 @@ Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows
   />
 </Wrapper>
 
-### Nested Grids
+#### Nested Grids
 
 The following example depicts how easily you can nest grids to create complex layouts with multiple levels of nesting.
 
@@ -582,7 +582,7 @@ The following example depicts how easily you can nest grids to create complex la
   />
 </Wrapper>
 
-### Responsive Grids
+#### Responsive Grids
 
 You can pass different grid-cols-* and col-span-* values at different breakpoints to create a more responsive layout.
 
@@ -664,6 +664,6 @@ You can pass different grid-cols-* and col-span-* values at different breakpoint
   />
 </Wrapper>
 
-### Why we introduced \_extra prop?
+#### Why we introduced \_extra prop?
 
 Grid Layout is not supported in native. In order to make our component universal, we introduced the `_extra` prop to pass the grid classnames to the grid component. We use the `_extra` prop to pass the grid classnames to the grid component & extract the neccessary styles from the provided classname. This approach provides a SSR friendly solution for responsiveness.