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

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

'use client';
'use strict';

var React = require('react');
var core = require('@mantine/core');
var NumberTicker = require('./NumberTicker/NumberTicker.cjs');
var Spinner = require('./Spinner/Spinner.cjs');
var TextTicker = require('./TextTicker/TextTicker.cjs');
var Typewriter = require('./Typewriter/Typewriter.cjs');
var TextAnimate_module = require('./TextAnimate.module.css.cjs');

const defaultProps = {
  delay: 0,
  duration: 0.3,
  segmentDelay: 0.05,
  by: "word",
  animation: "fade",
  animateProps: {
    translateDistance: "20",
    scaleAmount: 2,
    blurAmount: "10"
  }
};
const defaultStaggerTimings = {
  text: 0.06,
  word: 0.05,
  character: 0.03,
  line: 0.06
};
const varsResolver = core.createVarsResolver(
  (_, { animateProps: { translateDistance, blurAmount, scaleAmount } }) => ({
    root: {
      "--text-animate-translation-distance": translateDistance ? core.getSize(translateDistance, "translate-distance") : "20px",
      "--text-animate-blur-amount": blurAmount ? core.getSize(blurAmount, "blur-amount") : "10px",
      "--text-animate-scale-amount": scaleAmount ? scaleAmount.toString() : "0.8"
    }
  })
);
const TextAnimate = core.polymorphicFactory((_props, ref) => {
  const props = core.useProps("TextAnimate", defaultProps, _props);
  const {
    delay,
    duration,
    segmentClassName,
    animate,
    by,
    animation,
    segmentDelay,
    animateProps,
    onAnimationStart,
    onAnimationEnd,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    children,
    className,
    ...others
  } = props;
  const staggerTiming = segmentDelay !== void 0 ? segmentDelay : defaultStaggerTimings[by];
  const [isInitialRender, setIsInitialRender] = React.useState(true);
  React.useEffect(() => {
    if (animate === "in") {
      setIsInitialRender(false);
    }
  }, [animate]);
  const containerStyles = {
    whiteSpace: "pre-wrap",
    position: "relative",
    display: "block",
    minHeight: "1em"
  };
  const getStyles = core.useStyles({
    name: "TextAnimate",
    props,
    classes: TextAnimate_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  if (animate === "none" || animate === false || animate === void 0) {
    if (!isInitialRender) {
      setIsInitialRender(true);
    }
    return /* @__PURE__ */ React.createElement(core.Box, { ref, ...getStyles("root"), style: containerStyles }, /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...others, style: { visibility: "hidden" } }, children));
  }
  if (animate === "static") {
    return /* @__PURE__ */ React.createElement(core.Box, { ref, ...getStyles("root"), style: containerStyles }, /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...others }, children));
  }
  function handleOnAnimationStart() {
    onAnimationStart?.(animate);
  }
  function handleOnAnimationEnd() {
    onAnimationEnd?.(animate);
  }
  let segments = [];
  switch (by) {
    case "word":
      segments = children.split(/(\s+)/);
      break;
    case "character":
      segments = children.split("");
      break;
    case "line":
      segments = children.split("\n");
      break;
    case "text":
    default:
      segments = [children];
      break;
  }
  return /* @__PURE__ */ React.createElement(core.Box, { ref, ...getStyles("root", { style: containerStyles }) }, segments.map((segment, i) => /* @__PURE__ */ React.createElement(
    core.Text,
    {
      "data-text-animate": animate,
      "data-text-animate-animation": animation,
      key: `${by}-${segment}-${delay}-${animate}-${duration}-${JSON.stringify(animateProps)}-${i}`,
      ...getStyles("segment", {
        style: {
          ...by === "line" ? { display: "block", whiteSpace: "normal" } : {},
          animationDelay: `${delay + i * staggerTiming}s`,
          animationDuration: `${duration}s`,
          animationFillMode: "forwards",
          animationDirection: animate === "in" ? "normal" : "reverse"
        }
      }),
      component: "span",
      onAnimationStart: handleOnAnimationStart,
      onAnimationEnd: handleOnAnimationEnd,
      ...others
    },
    segment
  )));
});
TextAnimate.classes = TextAnimate_module;
TextAnimate.displayName = "TextAnimate";
TextAnimate.Typewriter = Typewriter.Typewriter;
TextAnimate.Spinner = Spinner.Spinner;
TextAnimate.NumberTicker = NumberTicker.NumberTicker;
TextAnimate.TextTicker = TextTicker.TextTicker;

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