refactor(TextAnimate): align component with Mantine Text API and update demos

- Extend TextAnimateProps with TextProps (excluding styling props) for better type safety
- Change default component from <div> to <p> and update defaultRef accordingly
- Add TextVariant support and include TextStylesNames in stylesNames
- Update demos to use new `c` and `gradient` props and adjust animation settings
- Ensure gradient variant works consistently across examples

Author: gfazioli

docs/demos/TextAnimate.demo.events.tsx

@@ -19,7 +19,7 @@ function Demo() {
       <TextAnimate
         fz={48}
         fw={600}
-        color="violet"
+        c="violet"
         animate={animated ? 'in' : 'out'}
         by="character"
         animation="slideRight"
@@ -56,7 +56,7 @@ function Demo() {
       <TextAnimate
         fz={48}
         fw={600}
-        color="violet"
+        c="violet"
         animate={started ? 'in' : 'out'}
         by="character"
         animation="slideRight"

docs/demos/TextAnimate.demo.styles.tsx

@@ -12,9 +12,10 @@ function Demo() {
       <TextAnimate
         fz={48}
         fw={600}
-        color="violet"
+        gradient={{ from: 'violet', to: 'yellow' }}
+        variant="gradient"
         animate={animated ? 'in' : 'none'}
-        by="character"
+        by="word"
         animation="blur"
         duration={0.5}
         animateProps={{
@@ -41,9 +42,10 @@ function Demo() {
       <TextAnimate
         fz={48}
         fw={600}
-        color="violet"
+        gradient={{ from: 'violet', to: 'yellow' }}
+        variant="gradient"
         animate={animated ? 'in' : 'none'}
-        by="character"
+        by="word"
         animation="blur"
         duration={0.5}
         animateProps={{

package/src/TextAnimate.tsx

@@ -11,6 +11,9 @@ import {
   type MantineSize,
   type PolymorphicFactory,
   type StylesApiProps,
+  type TextProps,
+  type TextStylesNames,
+  type TextVariant,
 } from '@mantine/core';
 import { NumberTicker } from './NumberTicker/NumberTicker';
 import { Spinner } from './Spinner/Spinner';
@@ -73,7 +76,7 @@ interface TextAnimateAnimateProps {
   blurAmount?: MantineSize;
 }
 
-export type TextAnimateStylesNames = 'root' | 'segment';
+export type TextAnimateStylesNames = 'root' | 'segment' | TextStylesNames;
 
 export type TextAnimateCssVariables = {
   root:
@@ -160,14 +163,19 @@ export interface TextAnimateBaseProps {
 }
 
 export interface TextAnimateProps
-  extends BoxProps, TextAnimateBaseProps, StylesApiProps<TextAnimateFactory> {}
+  extends
+    BoxProps,
+    Omit<TextProps, 'classNames' | 'styles' | 'unstyled' | 'vars' | 'attributes'>,
+    TextAnimateBaseProps,
+    StylesApiProps<TextAnimateFactory> {}
 
 export type TextAnimateFactory = PolymorphicFactory<{
   props: TextAnimateProps;
-  defaultComponent: 'div';
-  defaultRef: HTMLDivElement;
+  defaultComponent: 'p';
+  defaultRef: HTMLParagraphElement;
   stylesNames: TextAnimateStylesNames;
   vars: TextAnimateCssVariables;
+  variant: TextVariant;
   staticComponents: {
     Typewriter: typeof Typewriter;
     Spinner: typeof Spinner;