@gfazioli/mantine-text-animate/dist/cjs/Gradient/Gradient.cjs

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

'use client';
'use strict';

var core = require('@mantine/core');
var React = require('react');
var Gradient_module = require('./Gradient.module.css.cjs');

const defaultProps = {
  speed: 1,
  direction: 90,
  animate: true
};
const varsResolver = core.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 = core.polymorphicFactory((_props) => {
  const props = core.useProps("Gradient", defaultProps, _props);
  const {
    colors,
    speed,
    direction,
    animate,
    children,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const theme = core.useMantineTheme();
  const getStyles = core.useStyles({
    name: "Gradient",
    props,
    classes: Gradient_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const resolvedColors = colors.map((c) => core.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(
    core.Box,
    {
      ...getStyles("root", {
        style: {
          backgroundImage
        }
      }),
      component: "span",
      "data-text-animate-gradient-animate": animate,
      "aria-live": "polite",
      ...others
    },
    children
  );
});
Gradient.classes = Gradient_module;
Gradient.displayName = "Gradient";

exports.Gradient = Gradient;
//# sourceMappingURL=Gradient.cjs.map