@gfazioli/mantine-text-animate/dist/cjs/RotatingText/RotatingText.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 useRotatingText = require('./use-rotating-text.cjs');
var RotatingText_module = require('./RotatingText.module.css.cjs');

const defaultProps = {
  animate: true,
  interval: 3e3,
  speed: 1,
  animation: "slideUp"
};
const varsResolver = core.createVarsResolver((_, { speed }) => ({
  root: {
    "--text-animate-rotating-speed": `${0.5 / (speed || 1)}s`
  }
}));
const RotatingText = core.polymorphicFactory((_props) => {
  const props = core.useProps("RotatingText", defaultProps, _props);
  const {
    values,
    animate,
    interval,
    speed,
    onCycle,
    animation,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const { currentText, nextText, isTransitioning, onTransitionEnd } = useRotatingText.useRotatingText({
    values,
    animate,
    interval,
    speed,
    onCycle
  });
  const getStyles = core.useStyles({
    name: "RotatingText",
    props,
    classes: RotatingText_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  return /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("root"), component: "span", "aria-live": "polite", ...others }, isTransitioning ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Box, { component: "span", ...getStyles("exiting"), "data-rotating-text-animation": animation }, currentText), /* @__PURE__ */ React.createElement(
    core.Box,
    {
      component: "span",
      ...getStyles("entering"),
      "data-rotating-text-animation": animation,
      onAnimationEnd: onTransitionEnd
    },
    nextText
  )) : /* @__PURE__ */ React.createElement(core.Box, { component: "span", ...getStyles("text") }, currentText));
});
RotatingText.classes = RotatingText_module;
RotatingText.displayName = "RotatingText";

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