@gfazioli/mantine-text-animate/dist/cjs/Spinner/Spinner.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 Spinner_module = require('./Spinner.module.css.cjs');

const defaultProps = {
  radius: "md",
  speed: 10,
  direction: "clockwise",
  animate: true,
  charOffset: 0,
  reverseText: false,
  repeatText: false,
  repeatCount: 1
};
const varsResolver = core.createVarsResolver((_, { radius, speed, charOffset }) => ({
  root: {
    "--text-animate-spinner-radius": radius !== void 0 ? core.getSize(radius, "text-animate-spinner-radius") : "md",
    "--text-animate-spinner-speed": `${speed}s`,
    "--text-animate-spinner-char-offset": `${charOffset}deg`
  }
}));
const Spinner = core.polymorphicFactory((_props, ref) => {
  const props = core.useProps("Spinner", defaultProps, _props);
  const {
    children,
    radius,
    speed,
    direction,
    animate,
    charOffset,
    reverseText,
    repeatText,
    repeatCount,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const [displayText, setDisplayText] = React.useState("");
  React.useEffect(() => {
    if (repeatText && repeatCount && repeatCount > 1) {
      setDisplayText(children.repeat(repeatCount));
    } else {
      setDisplayText(children);
    }
  }, [children, repeatText, repeatCount]);
  const processedText = reverseText ? displayText.split("").reverse().join("") : displayText;
  const characters = processedText.split("");
  const getStyles = core.useStyles({
    name: "Spinner",
    props,
    classes: Spinner_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  return /* @__PURE__ */ React.createElement(core.Box, { ref, ...getStyles("root"), ...others }, /* @__PURE__ */ React.createElement(
    core.Box,
    {
      className: Spinner_module.container,
      "data-text-animate-spinner-animate": animate,
      "data-text-animate-spinner-direction": direction
    },
    characters.map((char, index) => {
      const angle = 360 / characters.length * index + (charOffset || 0);
      return /* @__PURE__ */ React.createElement(
        core.Box,
        {
          key: `${char}-${direction}-${speed}-${radius}-${index}`,
          className: Spinner_module.char,
          style: {
            transform: `rotate(${angle}deg)`
          }
        },
        char
      );
    })
  ));
});
Spinner.displayName = "Spinner";

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