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

const defaultProps = {
  color: "#ffeb3b",
  animate: true,
  speed: 1,
  highlightHeight: "40%",
  highlightOffset: "60%"
};
const varsResolver = core.createVarsResolver(
  (theme, { speed, highlightHeight, highlightOffset, color }) => {
    const resolvedColor = color ? core.parseThemeColor({ color, theme }).value : "#ffeb3b";
    return {
      root: {
        "--text-animate-highlight-speed": `${1 / (speed || 1)}s`,
        "--text-animate-highlight-height": highlightHeight || "40%",
        "--text-animate-highlight-offset": highlightOffset || "60%",
        "--text-animate-highlight-color": resolvedColor
      }
    };
  }
);
const Highlight = core.polymorphicFactory((_props) => {
  const props = core.useProps("Highlight", defaultProps, _props);
  const {
    children,
    color,
    animate,
    speed,
    highlightHeight,
    highlightOffset,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const getStyles = core.useStyles({
    name: "Highlight",
    props,
    classes: Highlight_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  return /* @__PURE__ */ React.createElement(
    core.Box,
    {
      ...getStyles("root", {
        style: {
          backgroundImage: `linear-gradient(to right, var(--text-animate-highlight-color), var(--text-animate-highlight-color))`
        }
      }),
      component: "span",
      "data-text-animate-highlight-animate": animate,
      "aria-live": "polite",
      ...others
    },
    children
  );
});
Highlight.classes = Highlight_module;
Highlight.displayName = "Highlight";

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