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

Author: Viraj Ajay Joshi

example/storybook-nativewind/src/components-example/nativewind/Button/index.tsx

@@ -37,7 +37,7 @@ cssInterop(UIButton.Spinner, { className: 'style' });
 cssInterop(UIButton.Icon, { className: 'style' });
 
 const buttonStyle = tva({
-  base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 ',
+  base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40',
   variants: {
     action: {
       primary:
@@ -160,6 +160,62 @@ const buttonTextStyle = tva({
   ],
 });
 
+const buttonIconStyle = tva({
+  base: 'text-typography-0',
+  parentVariants: {
+    action: {
+      primary:
+        'text-primary-600 group-hover/button:text-primary-600 group-active/button:text-primary-700',
+      secondary:
+        'text-secondary-600 group-hover/button:text-secondary-600 group-active/button:text-secondary-700',
+      positive:
+        'text-success-600 group-hover/button:text-success-600 group-active/button:text-success-700',
+      negative:
+        'text-error-600 group-hover/button:text-error-600 group-active/button:text-error-700',
+    },
+    variant: {
+      link: 'group-hover/button:underline group-active/button:underline',
+      outline: '',
+      solid:
+        'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0',
+    },
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      variant: 'solid',
+      action: 'primary',
+      class:
+        'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'secondary',
+      class:
+        'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'positive',
+      class:
+        'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'negative',
+      class:
+        'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0',
+    },
+  ],
+});
+
 type IButtonProps = React.ComponentProps<typeof UIButton> &
   VariantProps<typeof buttonStyle>;
 
@@ -234,12 +290,43 @@ const ButtonSpinner = UIButton.Spinner;
 const ButtonIcon = ({
   className,
   as: AsComp,
+  size,
   ...props
 }: IButtonIcon & { className?: any }) => {
+  const {
+    variant: parentVariant,
+    size: parentSize,
+    action: parentAction,
+  } = useStyleContext();
+
   if (AsComp) {
-    return <AsComp className={className} {...props} />;
+    return (
+      <AsComp
+        {...props}
+        className={buttonIconStyle({
+          parentVariants: {
+            size: parentSize,
+            variant: parentVariant,
+            action: parentAction,
+          },
+          size,
+          class: className,
+        })}
+      />
+    );
   }
-  return <UIButton.Icon className={className} {...props} />;
+  return (
+    <UIButton.Icon
+      {...props}
+      className={buttonIconStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
 };
 Button.displayName = 'Button';
 ButtonText.displayName = 'ButtonText';

example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx

@@ -8,7 +8,7 @@ export const UIIcon = createIcon({
 });
 
 const iconStyle = tva({
-  base: 'color-background-800 fill-none',
+  base: 'text-background-800 fill-none',
   variants: {
     size: {
       '2xs': 'h-3 w-3',

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

@@ -1,13 +1,31 @@
 import React from 'react';
-import { Button, ButtonText } from '@/components/ui/Button';
+import {
+  Button,
+  ButtonText,
+  ButtonIcon,
+  ButtonSpinner,
+} from '@/components/ui/Button';
+import { EditIcon, ArrowLeftIcon } from 'lucide-react-native';
+import {
+  Icon,
+  ArrowUpIcon,
+  AddIcon,
+  InfoIcon,
+  ThreeDotsIcon,
+} from '@/components/ui/Icon';
+import { Input, InputField } from '@/components/ui/Input';
+import { HStack } from '@/components/ui/HStack';
+import { VStack } from '@/components/ui/VStack';
+import { Text } from '@/components/ui/Text';
+import { Heading } from '@/components/ui/Heading';
+import { Box } from '@/components/ui/Box';
+import { Center } from '@/components/ui/Center';
 
 export const ButtonBasic = (props: any) => {
   return (
-    <>
-      <Button {...props}>
-        <ButtonText>Hello World 22</ButtonText>
-      </Button>
-    </>
+    <Button {...props}>
+      <ButtonText>Hello World 22</ButtonText>
+    </Button>
   );
 };
 
@@ -16,4 +34,24 @@ ButtonBasic.description =
 
 export default ButtonBasic;
 
-export { Button, ButtonText };
+export {
+  Button,
+  ButtonText,
+  ButtonIcon,
+  ButtonSpinner,
+  EditIcon,
+  ArrowLeftIcon,
+  Icon,
+  ArrowUpIcon,
+  AddIcon,
+  InfoIcon,
+  ThreeDotsIcon,
+  Input,
+  InputField,
+  HStack,
+  VStack,
+  Text,
+  Heading,
+  Box,
+  Center,
+};