@gfazioli/mantine-text-animate/dist/cjs/Typewriter/Typewriter.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 useTypewriter = require('./use-typewriter.cjs');
var Typewriter_module = require('./Typewriter.module.css.cjs');

const defaultProps = {
  speed: 1,
  delay: 2e3,
  loop: true,
  withCursor: true,
  multiline: false,
  cursorChar: "|",
  withBlink: true,
  leftSection: null,
  animate: true
};
const Typewriter = core.polymorphicFactory((_props) => {
  const props = core.useProps("Typewriter", defaultProps, _props);
  const {
    animate,
    value,
    speed,
    delay,
    loop,
    withCursor,
    multiline,
    cursorChar,
    withBlink,
    onTypeEnd,
    onTypeLoop,
    onCharType,
    pauseAt,
    withSound,
    soundVolume,
    leftSection,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const { text: displayText } = useTypewriter.useTypewriter({
    value,
    animate,
    multiline,
    speed,
    delay,
    loop,
    onTypeEnd,
    onTypeLoop,
    onCharType,
    pauseAt,
    withSound,
    soundVolume
  });
  const getStyles = core.useStyles({
    name: "Typewriter",
    props,
    classes: Typewriter_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars
  });
  return /* @__PURE__ */ React.createElement(
    core.Box,
    {
      ...getStyles("root"),
      "data-text-animate-typewriter-multiline": multiline,
      "aria-live": "polite"
    },
    multiline ? /* @__PURE__ */ React.createElement(core.Stack, { gap: 0 }, Array.isArray(displayText) && displayText.slice(0, -1).map((line, index) => /* @__PURE__ */ React.createElement(core.Flex, { key: `line-${index}`, align: "center" }, leftSection, /* @__PURE__ */ React.createElement(core.Text, { ...others }, line))), /* @__PURE__ */ React.createElement(core.Flex, { align: "center" }, leftSection, /* @__PURE__ */ React.createElement(core.Text, { span: true, ...others }, Array.isArray(displayText) ? displayText[displayText.length - 1] : ""), withCursor && /* @__PURE__ */ React.createElement(
      core.Text,
      {
        span: true,
        "aria-hidden": "true",
        "data-text-animate-typewriter-with-blink": withBlink,
        ...getStyles("cursor"),
        ...others
      },
      cursorChar
    ))) : /* @__PURE__ */ React.createElement(React.Fragment, null, leftSection, /* @__PURE__ */ React.createElement(core.Text, { ...others }, displayText), withCursor && /* @__PURE__ */ React.createElement(
      core.Text,
      {
        span: true,
        "aria-hidden": "true",
        "data-text-animate-typewriter-with-blink": withBlink,
        ...getStyles("cursor"),
        ...others
      },
      cursorChar
    ))
  );
});
Typewriter.classes = Typewriter_module;
Typewriter.displayName = "Typewriter";

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