@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 core = require('@mantine/core');
var React = require('react');
var Spinner_module = require('./Spinner.module.css.cjs');

const defaultProps = {
  radius: "md",
  speed: 2,
  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 != null ? core.getSize(radius, "text-animate-spinner-radius") : "md",
    "--text-animate-spinner-speed": `${Math.max(0.1, 20 / (speed || 1))}s`,
    "--text-animate-spinner-char-offset": `${charOffset}deg`
  }
}));
const Spinner = core.polymorphicFactory((_props) => {
  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 isNodeArray = Array.isArray(children);
  const items = React.useMemo(() => {
    if (isNodeArray) {
      return children;
    }
    const text = children;
    const base = repeatText && repeatCount && repeatCount > 1 ? text.repeat(repeatCount) : text;
    const processed = reverseText ? base.split("").reverse().join("") : base;
    return processed.split("");
  }, [children, isNodeArray, repeatText, repeatCount, reverseText]);
  const getStyles = core.useStyles({
    name: "Spinner",
    props,
    classes: Spinner_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  return /* @__PURE__ */ React.createElement(
    core.Box,
    {
      ...getStyles("root"),
      role: isNodeArray && !others["aria-label"] ? void 0 : "img",
      "aria-label": isNodeArray ? others["aria-label"] : children,
      ...others
    },
    /* @__PURE__ */ React.createElement(
      core.Box,
      {
        className: Spinner_module.container,
        "data-text-animate-spinner-animate": animate,
        "data-text-animate-spinner-direction": direction
      },
      items.map((item, index) => {
        const angle = 360 / items.length * index + (charOffset || 0);
        return /* @__PURE__ */ React.createElement(
          core.Box,
          {
            key: index,
            className: Spinner_module.char,
            style: {
              transform: `rotate(${angle}deg)`
            }
          },
          item
        );
      })
    )
  );
});
Spinner.classes = Spinner_module;
Spinner.displayName = "Spinner";

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