fix: merge conflicts

Author: Viraj Ajay Joshi

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@gluestack/ui-storybook"]
+  "ignore": ["@gluestack/ui-storybook", "@gluestack/storybook-nativewind"]
 }

example/storybook-nativewind/package.json

@@ -40,7 +40,7 @@
     "@react-aria/separator": "^3.3.0",
     "@react-aria/utils": "^3.15.0",
     "@react-native-aria/button": "^0.2.5",
-    "@react-native-aria/overlays": "0.3.10",
+    "@react-native-aria/overlays": "^0.3.10",
     "@react-native-aria/separator": "^0.2.6",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

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

@@ -1,19 +1,22 @@
 import React from 'react';
 import { createButton } from '@gluestack-ui/button';
+
 import {
   tva,
   withStyleContextAndStates,
   useStyleContext,
   withStyleContext,
+  cssInterop,
+  VariantProps,
 } from '@gluestack-ui/nativewind-utils';
+
 import {
   ActivityIndicator,
   Pressable,
   Text,
   View,
   Platform,
 } from 'react-native';
-import { cssInterop } from 'nativewind';
 
 const UIButton = createButton({
   // @ts-ignore
@@ -34,23 +37,24 @@ 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]:outline-none data-[focus-visible=true]: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 ',
   variants: {
     action: {
       primary:
-        'bg-primary-500 hover:bg-primary-600 active:bg-primary-700  border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:ring-primary-500',
+        'bg-primary-500 hover:bg-primary-600 active:bg-primary-700  border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-primary-500',
       secondary:
-        'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:ring-secondary-500',
+        'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-secondary-500',
       positive:
-        'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:ring-success-500',
+        'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-success-500',
       negative:
-        'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:ring-error-500',
+        'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-error-500',
       default: 'bg-transparent hover:bg-background-50 active:bg-transparent',
     },
     variant: {
       link: 'px-0',
       outline:
         'bg-transparent border hover:bg-background-50 active:bg-transparent',
+      solid: '',
     },
 
     size: {
@@ -156,6 +160,11 @@ const buttonTextStyle = tva({
   ],
 });
 
+type IButtonProps = React.ComponentProps<typeof UIButton> &
+  VariantProps<typeof buttonStyle>;
+
+type IButtonTextProps = React.ComponentProps<typeof UIButton.Text> &
+  VariantProps<typeof buttonTextStyle>;
 const Button = React.forwardRef(
   (
     {
@@ -164,11 +173,12 @@ const Button = React.forwardRef(
       size = 'md',
       action = 'primary',
       ...props
-    }: any,
+    }: { className?: string } & IButtonProps,
     ref
   ) => {
     return (
       <UIButton
+        // @ts-ignore
         ref={ref}
         {...props}
         className={buttonStyle({ variant, size, action, class: className })}
@@ -178,8 +188,20 @@ const Button = React.forwardRef(
   }
 );
 
+type IButtonIcon = React.ComponentProps<typeof UIButton.Icon> & {
+  as?: any;
+};
 const ButtonText = React.forwardRef(
-  ({ className, variant, size, action, ...props }: any, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      action,
+      ...props
+    }: { className?: string } & IButtonTextProps,
+    ref?: any
+  ) => {
     const {
       variant: parentVariant,
       size: parentSize,
@@ -188,6 +210,7 @@ const ButtonText = React.forwardRef(
 
     return (
       <UIButton.Text
+        // @ts-ignore
         ref={ref}
         {...props}
         className={buttonTextStyle({
@@ -208,13 +231,19 @@ const ButtonText = React.forwardRef(
 
 const ButtonSpinner = UIButton.Spinner;
 
-const ButtonIcon = ({ className, as: AsComp, ...props }: any) => {
+const ButtonIcon = ({
+  className,
+  as: AsComp,
+  ...props
+}: IButtonIcon & { className?: any }) => {
   if (AsComp) {
     return <AsComp className={className} {...props} />;
   }
   return <UIButton.Icon className={className} {...props} />;
 };
 Button.displayName = 'Button';
 ButtonText.displayName = 'ButtonText';
+ButtonSpinner.displayName = 'ButtonSpinner';
+ButtonIcon.displayName = 'ButtonIcon';
 
 export { Button, ButtonText, ButtonSpinner, ButtonIcon };

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

@@ -8,11 +8,11 @@ import {
   useStyleContext,
   tva,
   withStyleContext,
+  cssInterop,
 } from '@gluestack-ui/nativewind-utils';
 import { Platform } from 'react-native';
 
 import { Check } from 'lucide-react-native';
-import { cssInterop } from 'nativewind';
 
 const UICheckbox = createCheckbox({
   // @ts-ignore