diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx index 811e6fa9c8..c52d8b390e 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx @@ -12,7 +12,6 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils'; import React from 'react'; export const UILink = createLink({ - // @ts-ignore Root: Platform.OS === 'web' ? withStyleContext(Pressable) @@ -47,6 +46,7 @@ const Link = React.forwardRef( type ILinkTextProps = React.ComponentProps<typeof UILink.Text> & VariantProps<typeof linkTextStyle>; + const LinkText = React.forwardRef( ( { className, ...props }: { className?: string } & ILinkTextProps, diff --git a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx index a9e2ad71ae..80fdd7dd9f 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx @@ -14,7 +14,6 @@ import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; const SCOPE = 'SLIDER'; export const UISlider = createSlider({ - // @ts-ignore Root: Platform.OS === 'web' ? withStyleContext(View, SCOPE) @@ -25,7 +24,6 @@ export const UISlider = createSlider({ ThumbInteraction: View, }); -//@ts-ignore cssInterop(UISlider, { className: 'style' }); cssInterop(UISlider.Thumb, { className: 'style' }); cssInterop(UISlider.Track, { className: 'style' }); @@ -163,7 +161,7 @@ export const Slider = React.forwardRef( isReversed = false, ...props }: any, - ref + ref?: any ) => { return ( <UISlider @@ -183,7 +181,7 @@ export const Slider = React.forwardRef( ); export const SliderThumb = React.forwardRef( - ({ className, size, ...props }: any, ref) => { + ({ className, size, ...props }: any, ref?: any) => { const { size: parentSize } = useStyleContext(SCOPE); return ( @@ -203,7 +201,7 @@ export const SliderThumb = React.forwardRef( ); export const SliderTrack = React.forwardRef( - ({ className, ...props }: any, ref) => { + ({ className, ...props }: any, ref?: any) => { const { orientation: parentOrientation, size: parentSize, @@ -228,7 +226,7 @@ export const SliderTrack = React.forwardRef( ); export const SliderFilledTrack = React.forwardRef( - ({ className, ...props }: any, ref) => { + ({ className, ...props }: any, ref?: any) => { const { orientation: parentOrientation } = useStyleContext(SCOPE); return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx index 86c2024fa5..59aa185df9 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx @@ -34,7 +34,7 @@ type ISwitchProps = React.ComponentProps<typeof UISwitch> & const Switch = React.forwardRef( ( { className, size = 'md', ...props }: { className?: string } & ISwitchProps, - ref + ref?: any ) => { return ( <UISwitch diff --git a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx index 24c8839eec..811dbf2d0d 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx @@ -13,7 +13,6 @@ import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; const SCOPE = 'TEXTAREA'; const UITextarea = createTextarea({ - // @ts-ignore Root: Platform.OS === 'web' ? withStyleContext(View, SCOPE) @@ -32,6 +31,12 @@ const textareaStyle = tva({ 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 ', }, + size: { + sm: '', + md: '', + lg: '', + xl: '', + }, }, }); @@ -58,7 +63,7 @@ const Textarea = React.forwardRef( size = 'md', ...props }: { className?: string } & ITextareaProps, - ref + ref?: any ) => { return ( <UITextarea @@ -77,7 +82,7 @@ type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> & const TextareaInput = React.forwardRef( ( { className, ...props }: { className?: string } & ITextareaInputProps, - ref + ref?: any ) => { const { size: parentSize } = useStyleContext(SCOPE); diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index f0806f39bf..b4d887d14f 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -13,6 +13,8 @@ "../../packages/unstyled/alert-dialog/src" ], "@gluestack-ui/menu": ["../../packages/unstyled/menu/src"], + "@gluestack-ui/textarea": ["../../packages/unstyled/textarea/src"], + "@gluestack-ui/link": ["../../packages/unstyled/link/src"], "@gluestack-ui/nativewind-utils/tva": [ "../../packages/nativewind/utils/src/tva" ], diff --git a/packages/unstyled/link/src/types.ts b/packages/unstyled/link/src/types.ts index b158069468..b91144442e 100644 --- a/packages/unstyled/link/src/types.ts +++ b/packages/unstyled/link/src/types.ts @@ -1,4 +1,5 @@ import type { MutableRefObject } from 'react'; +import React from 'react'; import type { GestureResponderEvent, ViewProps } from 'react-native'; export interface InterfaceLinkProps extends ViewProps { @@ -29,5 +30,7 @@ export type IUseLinkProp = { export type ILinkComponentType<Root, TextProps> = React.ForwardRefExoticComponent<Root & InterfaceLinkProps> & { - Text: React.ForwardRefExoticComponent<TextProps>; + Text: React.ForwardRefExoticComponent< + TextProps & React.RefAttributes<TextProps> + >; }; diff --git a/packages/unstyled/textarea/src/types.ts b/packages/unstyled/textarea/src/types.ts index 035f75049e..7a0408336d 100644 --- a/packages/unstyled/textarea/src/types.ts +++ b/packages/unstyled/textarea/src/types.ts @@ -43,5 +43,7 @@ export interface IInputProps { export type ITextareaComponentType<Root, Input> = React.ForwardRefExoticComponent<Root & ITextareaProps> & { - Input: React.ForwardRefExoticComponent<Input & IInputProps>; + Input: React.ForwardRefExoticComponent< + Input & React.RefAttributes<Input> & IInputProps + >; };