@codeleap/web 5.8.21 → 6.1.2

package/src/components/List/index.tsx

@@ -1,103 +1,91 @@
-import React from 'react'
-import { View, ViewProps } from '../View'
+import React, { useCallback, useMemo } from 'react'
+import { View } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { ListItem, ListProps } from './types'
-import { ItemMasonryProps, ListMasonry, useInfiniteScroll, useMasonryReload } from '../../lib'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { ListLayout } from './ListLayout'
+import { RenderComponentProps, useInfiniteLoader } from 'masonic'
+import { TypeGuards } from '@codeleap/types'
+import dynamic from 'next/dynamic'
 
 export * from './styles'
 export * from './types'
-export * from './ListLayout'
 
-const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
-  return <View style={props?.separatorStyles} />
-}
-
-export function List(props: ListProps) {
-  const allProps = {
-    ...List.defaultProps,
-    ...props,
-  } as ListProps
+const Masonry = dynamic(
+  () => import('masonic').then(mod => mod.Masonry),
+  { ssr: false }
+)
 
+export function List<T extends ListItem>(props: ListProps<T>) {
   const {
-    renderItem: RenderItem,
-    rowItemsSpacing,
-    ListSeparatorComponent,
+    renderItem: providedRenderItem,
+    ItemSeparatorComponent,
     data,
-    overscan,
-    separators,
-    masonryProps,
-    reloadTimeout,
-    showFooter,
+    fetchNextPage,
     style,
-    layoutWrapperProps,
-  } = allProps
+    hasNextPage,
+    infiniteLoaderProps,
+    separators,
+    ListFooterComponent,
+    placeholder,
+    ...masonryProps
+  } = {
+    ...List.defaultProps,
+    ...props,
+  }
 
   const styles = useStylesFor(List.styleRegistryName, style)
 
-  const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
-
-  const { reloadingLayout, previousLength } = useMasonryReload({
-    data,
-    reloadTimeout,
-  })
+  const maybeLoadMore = useInfiniteLoader(
+    async (args) => {
+      if (hasNextPage) fetchNextPage?.()
+    },
+    {
+      isItemLoaded: (index, items) => !!items?.[index],
+      ...infiniteLoaderProps,
+    },
+  )
 
-  const separator = React.useMemo(() => {
-    return separators ? <ListSeparatorComponent separatorStyles={styles.separator} /> : null
+  const separator = useMemo(() => {
+    if (!separators) return null
+    return ItemSeparatorComponent
   }, [])
 
-  const renderItem = React.useCallback((_item: ItemMasonryProps<any>) => {
-    if (!RenderItem) return null
-
-    const listLength = data?.length || 0
-
-    const isFirst = _item?.index === 0
-    const isLast = _item?.index === listLength - 1
-    const isOnly = isFirst && isLast
+  const renderItem = useCallback((itemMasonry: RenderComponentProps<T>) => {
+    if (!providedRenderItem) return null
 
-    const _itemProps = {
-      ..._item,
-      isOnly,
-      isLast,
-      isFirst,
-      item: _item?.data,
-    }
+    const isFirst = itemMasonry?.index === 0
 
     return <>
       {isFirst ? null : separator}
-      <RenderItem {..._itemProps} />
+      {providedRenderItem({ ...itemMasonry, item: itemMasonry?.data })}
     </>
-  }, [RenderItem])
+  }, [providedRenderItem])
+
+  const isEmpty = useMemo(() => data?.length <= 0 || !data?.length, [data?.length])
 
   return (
-    <ListLayout
-      {...allProps}
-      {...layoutProps}
-      wrapperProps={layoutWrapperProps}
-      styles={styles}
-      showFooter={reloadingLayout ? false : showFooter}
-    >
-      <ListMasonry
-        items={data}
-        render={renderItem}
-        itemKey={(item, _index) => (item?.id ?? _index)}
-        rowGutter={rowItemsSpacing}
-        onRender={onLoadMore}
-        overscanBy={overscan}
+    <View style={styles.wrapper}>
+      {isEmpty ? <EmptyPlaceholder {...placeholder} /> : null}
+
+      <Masonry
         columnCount={1}
-        previousItemsLength={previousLength}
-        reloadingLayout={reloadingLayout}
+        overscanBy={7}
         {...masonryProps}
+        items={data}
+        css={styles.list as any}
+        render={renderItem}
+        onRender={maybeLoadMore}
       />
-    </ListLayout>
+
+      {TypeGuards.isFunction(ListFooterComponent) ? <ListFooterComponent /> : ListFooterComponent}
+    </View>
   )
 }
 
 List.styleRegistryName = 'List'
-List.elements = ['wrapper', 'innerWrapper', 'separator', 'refreshControl', 'refreshControlIndicator']
+List.elements = ['wrapper', 'separator']
 List.rootElement = 'wrapper'
 
 List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
@@ -105,17 +93,7 @@ List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
 }
 
 List.defaultProps = {
-  ListEmptyComponent: EmptyPlaceholder,
-  ListSeparatorComponent: RenderSeparator,
-  refreshDebounce: 1500,
-  refreshSize: 40,
-  refreshThreshold: 0.1,
-  refreshPosition: 16,
-  refresh: true,
-  rowItemsSpacing: 8,
-  overscan: 2,
-  reloadTimeout: 350,
-  showFooter: true,
+  separators: true,
 } as Partial<ListProps>
 
 WebStyleRegistry.registerComponent(List)

package/src/components/List/styles.ts

@@ -1,11 +1,3 @@
+export type ListParts = 'wrapper' | 'list'
 
-type ListStates = 'empty' | 'loading'
-
-export type ListParts =
-  'wrapper' |
-  'innerWrapper' |
-  'separator' |
-  'refreshControl' |
-  'refreshControlIndicator'
-
-export type ListComposition = `${ListParts}:${ListStates}` | ListParts
+export type ListComposition = ListParts

package/src/components/List/types.ts

@@ -1,29 +1,10 @@
-import { StylesOf } from '@codeleap/types'
 import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { ViewProps } from '../View'
-import { MotionProps } from 'framer-motion'
-import { ActivityIndicatorProps } from '../ActivityIndicator'
-import { ComponentCommonProps } from '../../types'
-import { ItemMasonryProps, ListMasonryProps, UseInfiniteScrollArgs, UseInfiniteScrollReturn } from '../../lib'
 import { ListComposition } from './styles'
 import { StyledProp } from '@codeleap/styles'
+import { MasonryProps, RenderComponentProps, UseInfiniteLoaderOptions } from 'masonic'
 
-export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
-  styles: StylesOf<ListComposition>
-  children?: React.ReactNode
-  showFooter?: boolean
-  wrapperProps?: Partial<ViewProps>
-}
-
-export type ListRefreshControlComponent = Partial<ListLayoutProps> & {
-  styles: StylesOf<ListComposition>
-}
-
-export type AugmentedRenderItemInfo<T> = ItemMasonryProps<T> & {
+export type AugmentedRenderItemInfo<T> = RenderComponentProps<T> & {
   item: T
-  isFirst: boolean
-  isLast: boolean
-  isOnly: boolean
 }
 
 export type ListItem = {
@@ -31,39 +12,16 @@ export type ListItem = {
 }
 
 export type ListProps<T extends ListItem = ListItem> =
-  ComponentCommonProps &
-  UseInfiniteScrollArgs &
+  Omit<MasonryProps<T>, 'items' | 'render' | 'onRender'> &
   {
     data: T[]
-    isFetching?: boolean
-    hasNextPage?: boolean
-    separators?: boolean
-    onRefresh?: () => void
+    style?: StyledProp<ListComposition>
     placeholder?: Omit<EmptyPlaceholderProps, 'debugName'>
-    keyExtractor?: (item: T, index: number) => string
-    renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
-    ListFooterComponent?: (props: ListLayoutProps) => React.ReactElement
-    ListLoadingIndicatorComponent?: () => React.ReactElement
-    ListRefreshControlComponent?: () => React.ReactElement
-    ListEmptyComponent?: React.FC | ((props: EmptyPlaceholderProps) => React.ReactElement)
-    ListSeparatorComponent?: React.FC | ((props: { separatorStyles: ViewProps['style'] }) => React.ReactElement)
-    isLoading?: boolean
-    isFetchingNextPage?: boolean
+    ItemSeparatorComponent?: React.ReactElement
     fetchNextPage?: () => void
-    ListHeaderComponent?: () => React.ReactElement
-    refreshDebounce?: number
-    refreshSize?: number
-    refreshThreshold?: number
-    refreshPosition?: number
-    refresh?: boolean
-    refreshControlProps?: Partial<MotionProps>
-    refreshControlIndicatorProps?: Partial<ActivityIndicatorProps>
-    style?: StyledProp<ListComposition>
-    ref?: React.MutableRefObject<undefined>
-    rowItemsSpacing?: number
-    overscan?: number
-    masonryProps?: Partial<ListMasonryProps<T>>
-    reloadTimeout?: number
-    showFooter?: boolean
-    layoutWrapperProps?: Partial<ViewProps>
+    renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
+    ListFooterComponent?: React.ReactElement | (() => React.ReactElement)
+    infiniteLoaderProps?: UseInfiniteLoaderOptions<unknown>
+    hasNextPage?: boolean
+    separators?: boolean
   }

package/src/components/MaskedTextInput/index.tsx

@@ -0,0 +1,58 @@
+import { useIMask } from 'react-imask'
+import { MaskedTextInputProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { TextInput } from '../TextInput'
+import { maskPresets } from './mask'
+import { useMemo, useCallback } from 'react'
+import { TypeGuards } from '@codeleap/types'
+
+export * from './types'
+
+export const MaskedTextInput = (props: MaskedTextInputProps) => {
+  const {
+    maskType,
+    maskOptions: customMaskOptions,
+    onAccept,
+    onComplete,
+    unmask = false,
+    onValueChange,
+    value,
+    ...textInputProps
+  } = props
+
+  const maskOptions = useMemo(() => {
+    const preset = maskType ? maskPresets[maskType] : {}
+    
+    return {
+      ...preset,
+      ...customMaskOptions,
+      unmask,
+    }
+  }, [maskType, customMaskOptions, unmask])
+
+  const handleAccept = useCallback((value: string, maskRef: any, e?: InputEvent) => {
+    onAccept?.(value, maskRef, e)
+    onValueChange?.(value)
+  }, [onAccept, onValueChange])
+
+  const { ref: maskRef } = useIMask(maskOptions as any, {
+    onAccept: handleAccept,
+    onComplete,
+  })
+
+  const placeholder = textInputProps?.placeholder ?? (TypeGuards.isString(maskOptions?.mask) ? maskOptions?.mask : undefined)
+
+  return (
+    <TextInput
+      {...textInputProps}
+      placeholder={placeholder}
+      ref={maskRef as any}
+      value={value}
+      onValueChange={onValueChange}
+    />
+  )
+}
+
+MaskedTextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return MaskedTextInput as (props: StyledComponentProps<MaskedTextInputProps, typeof styles>) => IJSX
+}

package/src/components/MaskedTextInput/mask.ts

@@ -0,0 +1,41 @@
+import { MaskedTextInputMaskType } from './types'
+
+type MaskPreset = {
+  mask?: string
+  lazy?: boolean
+  placeholderChar?: string
+}
+
+export const maskPresets: Record<MaskedTextInputMaskType | 'cel-phone-brl', MaskPreset> = {
+  'credit-card': {
+    mask: '0000 0000 0000 0000',
+    lazy: false,
+    placeholderChar: '0',
+  },
+  'cpf': {
+    mask: '000.000.000-00',
+    lazy: false,
+    placeholderChar: '0',
+  },
+  'cnpj': {
+    mask: '00.000.000/0000-00',
+    lazy: false,
+    placeholderChar: '0',
+  },
+  'zip-code': {
+    mask: '00000-000',
+    lazy: false,
+    placeholderChar: '0',
+  },
+  'cel-phone': {
+    mask: '+000 000 000 000',
+    lazy: false,
+    placeholderChar: '0',
+  },
+  'cel-phone-brl': {
+    mask: '(00) 00000-0000',
+    lazy: false,
+    placeholderChar: '0',
+  },
+  'custom': {},
+}

package/src/components/MaskedTextInput/types.ts

@@ -0,0 +1,18 @@
+import { TextInputProps } from '../TextInput'
+import { ReactMaskOpts } from 'react-imask'
+
+export type MaskedTextInputMaskType =
+  | 'credit-card'
+  | 'cpf'
+  | 'cnpj'
+  | 'zip-code'
+  | 'cel-phone'
+  | 'custom'
+
+export type MaskedTextInputProps = Omit<TextInputProps, 'multiline'> & {
+  maskType?: MaskedTextInputMaskType
+  maskOptions?: ReactMaskOpts
+  onAccept?: (value: string, maskRef?: any, e?: InputEvent) => void
+  onComplete?: (value: string, maskRef?: any, e?: InputEvent) => void
+  unmask?: boolean | 'typed'
+}

package/src/components/NumberIncrement/index.tsx

@@ -69,7 +69,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     ? PatternFormat
     : NumericFormat
 
-  const Input = TypeGuards.isFunction(formatter)
+  const Input: any = TypeGuards.isFunction(formatter)
     ? NumberFormatBase
     : InputFormat
 
@@ -111,9 +111,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
         <Input
           displayType='input'
           css={[
-            // @ts-ignore
             partialStyles?.input,
-            // @ts-ignore
             {
               '&::placeholder': partialStyles?.placeholder,
             },

package/src/components/PaginationButtons/types.ts

@@ -9,7 +9,7 @@ export type PaginationButtonsProps =
   {
     onFetchNextPage?: AnyFunction
     onFetchPreviousPage?: AnyFunction
-    renderItem?: (item: string | number, index: number) => JSX.Element
+    renderItem?: (item: string | number, index: number) => React.ReactElement
     onPressItem?: (item: string | number) => void
     shouldAbbreviate?: boolean
     abbreviationSymbol?: string

package/src/components/PaginationIndicator/types.ts

@@ -9,9 +9,9 @@ export type PaginationIndicatorProps =
   ComponentCommonProps & 
   {
     isFetching?: boolean
-    noMoreItemsText: JSX.Element | string | number
+    noMoreItemsText: React.ReactElement | string | number
     hasMore?: boolean
-    activityIndicator?: JSX.Element
+    activityIndicator?: React.ReactElement
     style?: StyledProp<PaginationIndicatorComposition>
     indicatorProps?: Partial<ActivityIndicatorProps>
     textProps?: Partial<TextProps<'p'>>

package/src/components/Progress/Bar/types.ts

@@ -19,8 +19,8 @@ export type ProgressBarProps =
     rightIconProps?: Partial<IconProps>
     text?: string
     textProps?: Partial<TextProps>
-    leftText?: TextProps['text'] | JSX.Element
+    leftText?: TextProps['text'] | React.ReactElement
     leftTextProps?: Partial<TextProps>
-    rightText?: TextProps['text'] | JSX.Element
+    rightText?: TextProps['text'] | React.ReactElement
     rightTextProps?: Partial<TextProps>
   }

package/src/components/Progress/Circle/types.ts

@@ -13,7 +13,7 @@ export type ProgressCircleProps =
     circleStyles?: Parameters<typeof buildStyles>[0]
     children?: React.ReactNode
     size?: number
-    text?: string | JSX.Element
+    text?: string | React.ReactElement
     textProps?: Partial<TextProps>
     icon?: AppIcon
     iconProps?: Partial<IconProps>

package/src/components/SectionFilters/types.ts

@@ -52,7 +52,7 @@ export type SectionFiltersProps = {
   onSelectItem?: (item: onSelectItemProps) => void
   onClearItems?: ClearFunction
   onApplyItems?: ApplyFunction
-  renderFooterComponent?: (props: SectionFilterFooterProps) => JSX.Element
+  renderFooterComponent?: (props: SectionFilterFooterProps) => React.ReactElement
   applyFilterButtonProps?: Omit<ButtonProps, 'debugName'>
   clearFilterButtonProps?: Omit<ButtonProps, 'debugName'>
   filterOnOptionPress?: boolean

package/src/components/SegmentedControl/index.tsx

@@ -4,7 +4,7 @@ import { TypeGuards } from '@codeleap/types'
 import { useRef } from '@codeleap/hooks'
 
 import { Text } from '../Text'
-import { motion, AnimationProps } from 'framer-motion'
+import { motion, TargetAndTransition } from 'motion/react'
 import { useAnimatedVariantStyles } from '../../lib'
 import { SegmentedControlOptionProps, SegmentedControlProps } from './types'
 import { Touchable } from '../Touchable'
@@ -16,7 +16,7 @@ import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/st
 export * from './styles'
 export * from './types'
 
-const Option = forwardRef<HTMLButtonElement, SegmentedControlOptionProps>((props, ref) => {
+const Option = (props: SegmentedControlOptionProps) => {
   const {
     selected,
     onPress,
@@ -27,6 +27,7 @@ const Option = forwardRef<HTMLButtonElement, SegmentedControlOptionProps>((props
     largestWidth,
     textProps,
     disabled,
+    ref,
     ...touchableProps
   } = props
 
@@ -38,7 +39,7 @@ const Option = forwardRef<HTMLButtonElement, SegmentedControlOptionProps>((props
 
   return (
     <Touchable
-      key={touchableProps.key}
+      key={touchableProps.key as any}
       ref={ref as unknown as React.Ref<HTMLButtonElement>}
       onPress={onPress}
       disabled={disabled}
@@ -70,7 +71,7 @@ const Option = forwardRef<HTMLButtonElement, SegmentedControlOptionProps>((props
       />
     </Touchable>
   )
-})
+}
 
 export const SegmentedControl = (props: SegmentedControlProps) => {
   const {
@@ -122,7 +123,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
           duration: transitionDuration,
         },
         ...animationProps,
-      } as AnimationProps
+      } as TargetAndTransition
     },
     dependencies: [currentOptionIdx, largestWidth.width],
   })

package/src/components/SegmentedControl/types.ts

@@ -3,7 +3,7 @@ import { StylesOf } from '@codeleap/types'
 import { TextProps } from '../Text'
 import { TouchableProps } from '../Touchable'
 import { SegmentedControlComposition } from './styles'
-import { MotionProps, AnimationProps, ForwardRefComponent } from 'framer-motion'
+import { MotionProps, TargetAndTransition, ForwardRefComponent } from 'motion/react'
 import { IconProps } from '../Icon'
 import { AppIcon, StyledProp } from '@codeleap/styles'
 
@@ -17,7 +17,7 @@ export type SegmentedControlProps<T = string> = {
   touchableProps?: Partial<TouchableProps>
   debugName?: string
   disabled?: boolean
-  animationProps?: AnimationProps
+  animationProps?: TargetAndTransition
   transitionDuration?: number
   RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
   textProps?: TextProps

package/src/components/Select/index.tsx

@@ -18,7 +18,7 @@ import { useValidate } from '@codeleap/form'
 export * from './styles'
 export * from './types'
 
-const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => JSX.Element }) => {
+const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => React.ReactElement }) => {
   const {
     isSelected,
     optionsStyles,
@@ -59,7 +59,7 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
   )
 }
 
-const CustomMenu = (props: MenuProps & { Footer: () => JSX.Element }) => {
+const CustomMenu = (props: MenuProps & { Footer: () => React.ReactElement }) => {
   const { Footer, children } = props
   return <React.Fragment>
     <components.Menu {...props}>
@@ -89,7 +89,7 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
     if (TypeGuards.isString(TextPlaceholder)) {
       return <Text debugName={debugName} text={TextPlaceholder} style={defaultStyles.text} />
     } else if (React.isValidElement(TextPlaceholder)) {
-      return TextPlaceholder as JSX.Element
+      return TextPlaceholder as React.ReactElement
     } else if (TypeGuards.isFunction(TextPlaceholder)) {
       return <TextPlaceholder {...props} />
     }

package/src/components/Select/types.ts

@@ -49,7 +49,7 @@ export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonPr
   styles?: OptionState['baseStyles']
 }
 
-type SelectPlaceholderElement = string | ((props: PlaceholderProps) => JSX.Element) | JSX.Element
+type SelectPlaceholderElement = string | ((props: PlaceholderProps) => React.ReactElement) | React.ReactElement
 
 export type PlaceholderProps = NoticeProps & ComponentPartProps & {
   text: SelectPlaceholderElement
@@ -74,11 +74,11 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     closeOnSelect?: boolean
     focused?: boolean
     _error?: string
-    renderItem?: (props: TCustomOption) => JSX.Element
-    FooterComponent?: () => JSX.Element
-    PlaceholderComponent?: (props: PlaceholderProps) => JSX.Element
-    PlaceholderNoItemsComponent?: (props: PlaceholderProps) => JSX.Element
-    LoadingIndicatorComponent?: (props: LoadingIndicatorProps) => JSX.Element
+    renderItem?: (props: TCustomOption) => React.ReactElement
+    FooterComponent?: () => React.ReactElement
+    PlaceholderComponent?: (props: PlaceholderProps) => React.ReactElement
+    PlaceholderNoItemsComponent?: (props: PlaceholderProps) => React.ReactElement
+    LoadingIndicatorComponent?: (props: LoadingIndicatorProps) => React.ReactElement
     noItemsText?: SelectPlaceholderElement
     noItemsIcon?: SelectPlaceholderElement
     noItemsImage?: PlaceholderProps['image']

package/src/components/Switch/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
 import { useAnimatedVariantStyles } from '../../lib'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { SwitchProps } from './types'

package/src/components/Text/index.tsx

@@ -1,5 +1,5 @@
 import { TypeGuards } from '@codeleap/types'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import React, { ElementType, forwardRef } from 'react'
 import { TextProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
@@ -9,7 +9,7 @@ import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from
 export * from './styles'
 export * from './types'
 
-export const Text = forwardRef<HTMLParagraphElement, TextProps>((textProps, ref) => {
+export const Text = (textProps: TextProps) => {
   const {
     style,
     text,
@@ -22,6 +22,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>((textProps, ref)
     onClick,
     animated,
     animatedProps,
+    ref,
     ...props
   } = {
     ...Text.defaultProps,
@@ -76,7 +77,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>((textProps, ref)
       {text || children}
     </Component>
   )
-}) as StyledComponentWithProps<TextProps>
+}
 
 Text.styleRegistryName = 'Text'
 Text.elements = ['text']

package/src/components/Text/types.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, ElementType } from 'react'
+import { ComponentPropsWithoutRef, ElementType, RefObject } from 'react'
 import { TextComposition } from './styles'
 import { AnyRecord, StyledProp } from '@codeleap/styles'
-import { MotionProps } from 'framer-motion'
+import { MotionProps } from 'motion/react'
 
 export type TextProps<T extends ElementType = 'p'> =
   Omit<ComponentPropsWithoutRef<T>, 'style'> &
@@ -15,4 +15,5 @@ export type TextProps<T extends ElementType = 'p'> =
     onPress?: (event: React.MouseEventHandler<T>) => void
     animated?: boolean
     animatedProps?: Partial<MotionProps>
+    ref?: RefObject<HTMLParagraphElement | null>
   }