@gfazioli/mantine-text-animate/dist/esm/Gradient/Gradient.mjs

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

'use client';
import { createVarsResolver, polymorphicFactory, useProps, useMantineTheme, useStyles, parseThemeColor, Box } from '@mantine/core';
import React from 'react';
import classes from './Gradient.module.css.mjs';

const defaultProps = {
  speed: 1,
  direction: 90,
  animate: true
};
const varsResolver = createVarsResolver((_, { speed, direction }) => {
  const d = direction ?? 90;
  const rad = d * Math.PI / 180;
  const endX = Math.round(Math.sin(rad) * 200);
  const endY = Math.round(-Math.cos(rad) * 200);
  return {
    root: {
      "--text-animate-gradient-speed": `${3 / (speed || 1)}s`,
      "--text-animate-gradient-direction": `${d}deg`,
      "--text-animate-gradient-end-x": `${endX}%`,
      "--text-animate-gradient-end-y": `${endY}%`
    }
  };
});
const Gradient = polymorphicFactory((_props) => {
  const props = useProps("Gradient", defaultProps, _props);
  const {
    colors,
    speed,
    direction,
    animate,
    children,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const theme = useMantineTheme();
  const getStyles = useStyles({
    name: "Gradient",
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const resolvedColors = colors.map((c) => parseThemeColor({ color: c, theme }).value);
  const gradientColors = resolvedColors.length > 0 ? resolvedColors.join(", ") : "#000, #fff";
  const backgroundImage = `linear-gradient(${direction ?? 90}deg, ${gradientColors}, ${resolvedColors[0] || "#000"})`;
  return /* @__PURE__ */ React.createElement(
    Box,
    {
      ...getStyles("root", {
        style: {
          backgroundImage
        }
      }),
      component: "span",
      "data-text-animate-gradient-animate": animate,
      "aria-live": "polite",
      ...others
    },
    children
  );
});
Gradient.classes = classes;
Gradient.displayName = "Gradient";

export { Gradient };
//# sourceMappingURL=Gradient.mjs.map