UNPKG

@gfazioli/mantine-text-animate

Version:

The TextAnimate component allows you to animate text with various effects.

1 lines 12 kB
{"version":3,"file":"Gradient.cjs","sources":["../../../src/Gradient/Gradient.tsx"],"sourcesContent":["import {\n Box,\n createVarsResolver,\n parseThemeColor,\n polymorphicFactory,\n useMantineTheme,\n useProps,\n useStyles,\n type BoxProps,\n type MantineColor,\n type PolymorphicFactory,\n type StylesApiProps,\n} from '@mantine/core';\nimport React from 'react';\nimport classes from './Gradient.module.css';\n\nexport type GradientStylesNames = 'root';\n\nexport type GradientCssVariables = {\n root:\n | '--text-animate-gradient-speed'\n | '--text-animate-gradient-direction'\n | '--text-animate-gradient-end-x'\n | '--text-animate-gradient-end-y';\n};\n\nexport interface GradientBaseProps {\n /**\n * Array of color values for the gradient — accepts Mantine color names or CSS values\n * @example ['red', '#00ff00', 'blue']\n */\n colors: MantineColor[];\n\n /**\n * Animation speed multiplier (higher = faster)\n * @default 1\n */\n speed?: number;\n\n /**\n * Gradient direction in degrees\n * @default 90\n */\n direction?: number;\n\n /**\n * Whether the gradient animation is active\n * @default true\n */\n animate?: boolean;\n\n /**\n * The text content to display with gradient\n */\n children: React.ReactNode;\n}\n\nexport interface GradientProps\n extends BoxProps, GradientBaseProps, StylesApiProps<GradientFactory> {}\n\nexport type GradientFactory = PolymorphicFactory<{\n props: GradientProps;\n defaultComponent: 'span';\n defaultRef: HTMLSpanElement;\n stylesNames: GradientStylesNames;\n vars: GradientCssVariables;\n}>;\n\nconst defaultProps: Partial<GradientProps> = {\n speed: 1,\n direction: 90,\n animate: true,\n};\n\nconst varsResolver = createVarsResolver<GradientFactory>((_, { speed, direction }) => {\n const d = direction ?? 90;\n const rad = (d * Math.PI) / 180;\n // CSS gradient angles: 0deg=up, 90deg=right → sin for x, -cos for y\n const endX = Math.round(Math.sin(rad) * 200);\n const endY = Math.round(-Math.cos(rad) * 200);\n\n return {\n root: {\n '--text-animate-gradient-speed': `${3 / (speed || 1)}s`,\n '--text-animate-gradient-direction': `${d}deg`,\n '--text-animate-gradient-end-x': `${endX}%`,\n '--text-animate-gradient-end-y': `${endY}%`,\n },\n };\n});\n\n/**\n * Gradient Component\n *\n * A component that displays text with an animated gradient background.\n */\nexport const Gradient = polymorphicFactory<GradientFactory>((_props) => {\n const props = useProps('Gradient', defaultProps, _props);\n\n const {\n colors,\n speed,\n direction,\n animate,\n children,\n\n classNames,\n style,\n styles,\n unstyled,\n vars,\n className,\n\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const getStyles = useStyles<GradientFactory>({\n name: 'Gradient',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n // Resolve Mantine color names (e.g. \"grape\") to CSS color values\n const resolvedColors = colors.map((c) => parseThemeColor({ color: c, theme }).value);\n\n // Build the gradient string from resolved colors\n const gradientColors = resolvedColors.length > 0 ? resolvedColors.join(', ') : '#000, #fff';\n const backgroundImage = `linear-gradient(${direction ?? 90}deg, ${gradientColors}, ${resolvedColors[0] || '#000'})`;\n\n return (\n <Box\n {...getStyles('root', {\n style: {\n backgroundImage,\n },\n })}\n component=\"span\"\n data-text-animate-gradient-animate={animate}\n aria-live=\"polite\"\n {...others}\n >\n {children}\n </Box>\n );\n});\n\nGradient.classes = classes;\nGradient.displayName = 'Gradient';\n"],"names":["createVarsResolver","polymorphicFactory","useProps","useMantineTheme","useStyles","classes","parseThemeColor","Box"],"mappings":"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"}