Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch

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

@@ -288,7 +288,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
             <HStack space="md">
               <Avatar className='bg-indigo-600'>
                 {/* User is imported from 'lucide-react-native' */}
-                <Icon as={User} color="white" size="lg"/>
+                <Icon as={User} size="lg"/>
               </Avatar>
               <VStack >
                 <Heading size="sm" >Ronald Richards</Heading>
@@ -298,7 +298,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
             <HStack space="md">
                 <Avatar className='bg-pink-600'>
                  {/* User is imported from 'lucide-react-native' */}
-                <Icon as={User} color="white" size="lg"/>
+                <Icon as={User} size="lg"/>
                 </Avatar>
                 <VStack >
                   <Heading size="sm" >Kevin James</Heading>
@@ -361,7 +361,7 @@ An Avatar component with an image incorporates a user or entity representation u
                     uri: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
                   }}
               />
-              <AvatarBadge $dark-borderColor="$black" />
+              <AvatarBadge />
             </Avatar>
             <VStack>
               <Heading size="sm" >Arlene McCoy</Heading>

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

@@ -490,8 +490,8 @@ A Fab component with an icon and text combines a visual icon with accompanying t
           className='max-w-96 border rounded-lg border-outline-200 py-[56px] px-6 mx-5 bg-background-100'
         >
           <Fab className='top-4 h-9 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-900'>
-            <FabIcon as={SearchIcon} className='mr-1.5' color="white"/>
-            <FabLabel className="text-white">Search</FabLabel>
+            <FabIcon as={SearchIcon} className='stroke-white' />
+            <FabLabel className='text-white'>Search</FabLabel>
           </Fab>
           <VStack space='lg'>
             <Box>

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

@@ -591,7 +591,7 @@ A tooltip component with an icon is a user interface element that provides conte
                   trigger={(triggerProps) => {
                     return (
                     <Avatar size="md" {...triggerProps} className="bg-indigo-600">
-                      <Icon as={EditIcon} size="sm" className="text-white"/>
+                      <Icon as={EditIcon} size="sm" className="text-typography-0"/>
                     </Avatar>
                     )
                   }}

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

@@ -61,7 +61,7 @@ const avatarGroupStyle = tva({
 });
 
 const avatarBadgeStyle = tva({
-  base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-white border-2',
+  base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-background-0 border-2',
   parentVariants: {
     size: {
       'xs': 'w-2 h-2',

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

@@ -73,10 +73,12 @@ cssInterop(UIIcon, {
   className: {
     target: 'style',
     nativeStyleToProp: {
-      height: 'height',
-      width: 'width',
-      fill: 'fill',
-      color: 'color',
+      height: true,
+      width: true,
+      // @ts-ignore
+      fill: true,
+      color: true,
+      stroke: true,
     },
   },
 });

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

@@ -1,6 +1,11 @@
 'use client';
-
 import React from 'react';
+import { View, Pressable, Platform, ScrollView } from 'react-native';
+import {
+  Motion,
+  createMotionAnimatedComponent,
+  AnimatePresence,
+} from '@legendapp/motion';
 import { createPopover } from '@gluestack-ui/popover';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
@@ -11,14 +16,6 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
 import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
-import { View, Pressable, Platform, ScrollView } from 'react-native';
-
-import {
-  Motion,
-  createMotionAnimatedComponent,
-  AnimatePresence,
-} from '@legendapp/motion';
-
 const AnimatedPressable = createMotionAnimatedComponent(Pressable);
 const SCOPE = 'POPOVER';
 const UIPopover = createPopover({
@@ -58,8 +55,9 @@ const popoverStyle = tva({
     },
   },
 });
+
 const popoverArrowStyle = tva({
-  base: 'bg-background-50 z-1 absolute overflow-hidden h-3.5 w-3.5',
+  base: 'bg-background-50 z-[1] absolute overflow-hidden h-3.5 w-3.5',
 });
 
 const popoverBackdropStyle = tva({
@@ -71,18 +69,18 @@ const popoverBodyStyle = tva({
 });
 
 const popoverCloseButtonStyle = tva({
-  base: 'group/popover-close-button z-10 p-2 rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',
+  base: 'group/popover-close-button z-[1] rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 web:cursor-pointer',
 });
 
 const popoverContentStyle = tva({
   base: 'bg-background-50 rounded-lg overflow-hidden',
   parentVariants: {
     size: {
-      xs: 'w-[60%] max-w-[360px] min-w-[240px]',
+      xs: 'w-[60%] max-w-[360px]',
       sm: 'w-[70%] max-w-[420px]',
       md: 'w-[80%] max-w-[510px]',
       lg: 'w-[90%] max-w-[640px]',
-      full: 'w-[100%]',
+      full: 'w-full',
     },
   },
 });

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

@@ -24,12 +24,12 @@ cssInterop(UITextarea, { className: 'style' });
 cssInterop(UITextarea.Input, { className: 'style' });
 
 const textareaStyle = tva({
-  base: 'w-full h-[100px] border border-background-300 rounded hover:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:hover:border-background-300',
+  base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300',
 
   variants: {
     variant: {
       default:
-        'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-primary-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-primary-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700 ',
+        'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-primary-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-error-700 ',
     },
     size: {
       sm: '',

example/storybook-nativewind/src/tailwind.config.js

@@ -10,23 +10,7 @@ module.exports = {
   safelist: [
     {
       pattern:
-        /border-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /bg-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /text-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /stroke-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /fill-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
+        /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
     },
   ],
   theme: {

example/storybook-v7/tailwind.config.js

@@ -10,23 +10,7 @@ module.exports = {
   safelist: [
     {
       pattern:
-        /border-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /bg-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /text-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /stroke-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-    {
-      pattern:
-        /fill-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
+        /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
     },
   ],
   theme: {