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

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

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

const defaultProps = {
  radius: "md",
  speed: 2,
  direction: "clockwise",
  animate: true,
  charOffset: 0,
  reverseText: false,
  repeatText: false,
  repeatCount: 1
};
const varsResolver = createVarsResolver((_, { radius, speed, charOffset }) => ({
  root: {
    "--text-animate-spinner-radius": radius != null ? 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 = polymorphicFactory((_props) => {
  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 isNodeArray = Array.isArray(children);
  const items = 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 = useStyles({
    name: "Spinner",
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  return /* @__PURE__ */ React.createElement(
    Box,
    {
      ...getStyles("root"),
      role: isNodeArray && !others["aria-label"] ? void 0 : "img",
      "aria-label": isNodeArray ? others["aria-label"] : children,
      ...others
    },
    /* @__PURE__ */ React.createElement(
      Box,
      {
        className: classes.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(
          Box,
          {
            key: index,
            className: classes.char,
            style: {
              transform: `rotate(${angle}deg)`
            }
          },
          item
        );
      })
    )
  );
});
Spinner.classes = classes;
Spinner.displayName = "Spinner";

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