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

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

'use client';
import React, { useState, useEffect } from 'react';
import { createVarsResolver, getSize, polymorphicFactory, useProps, useStyles, Box } from '@mantine/core';
import classes from './Spinner.module.css.mjs';

const defaultProps = {
  radius: "md",
  speed: 10,
  direction: "clockwise",
  animate: true,
  charOffset: 0,
  reverseText: false,
  repeatText: false,
  repeatCount: 1
};
const varsResolver = createVarsResolver((_, { radius, speed, charOffset }) => ({
  root: {
    "--text-animate-spinner-radius": radius !== void 0 ? getSize(radius, "text-animate-spinner-radius") : "md",
    "--text-animate-spinner-speed": `${speed}s`,
    "--text-animate-spinner-char-offset": `${charOffset}deg`
  }
}));
const Spinner = polymorphicFactory((_props, ref) => {
  const props = 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] = useState("");
  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 = useStyles({
    name: "Spinner",
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  return /* @__PURE__ */ React.createElement(Box, { ref, ...getStyles("root"), ...others }, /* @__PURE__ */ React.createElement(
    Box,
    {
      className: classes.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(
        Box,
        {
          key: `${char}-${direction}-${speed}-${radius}-${index}`,
          className: classes.char,
          style: {
            transform: `rotate(${angle}deg)`
          }
        },
        char
      );
    })
  ));
});
Spinner.displayName = "Spinner";

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