@gfazioli/mantine-text-animate/dist/cjs/SplitFlap/SplitFlap.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 useSplitFlap = require('./use-split-flap.cjs');
var SplitFlap_module = require('./SplitFlap.module.css.cjs');

const defaultProps = {
  animate: true,
  speed: 1,
  characterSet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ",
  flipDuration: 300,
  staggerDelay: 80,
  delay: 0,
  bg: "#1a1a2e",
  textColor: "#e0e0e0",
  gap: 4,
  charWidth: "1.2em",
  charHeight: "1.8em",
  radius: "4px",
  dividerColor: "rgba(0,0,0,0.3)"
};
const varsResolver = core.createVarsResolver(
  (theme, { bg, textColor, gap, flipDuration, speed, charWidth, charHeight, radius, dividerColor }) => ({
    root: {
      "--text-animate-split-flap-bg": bg ? core.parseThemeColor({ color: bg, theme }).value : void 0,
      "--text-animate-split-flap-color": textColor ? core.parseThemeColor({ color: textColor, theme }).value : void 0,
      "--text-animate-split-flap-gap": gap !== void 0 ? `${gap}px` : void 0,
      "--text-animate-split-flap-flip-duration": flipDuration !== void 0 && speed !== void 0 ? `${flipDuration / speed}ms` : flipDuration !== void 0 ? `${flipDuration}ms` : void 0,
      "--text-animate-split-flap-char-width": charWidth,
      "--text-animate-split-flap-char-height": charHeight,
      "--text-animate-split-flap-radius": radius !== void 0 ? core.getRadius(radius) : void 0,
      "--text-animate-split-flap-divider-color": dividerColor ? dividerColor === "transparent" ? "transparent" : core.parseThemeColor({ color: dividerColor, theme }).value : void 0
    }
  })
);
const SplitFlap = core.polymorphicFactory((_props) => {
  const props = core.useProps("SplitFlap", defaultProps, _props);
  const {
    value,
    animate,
    speed,
    characterSet,
    flipDuration,
    staggerDelay,
    delay,
    onCompleted,
    bg,
    textColor,
    gap,
    charWidth,
    charHeight,
    radius,
    dividerColor,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const { characters } = useSplitFlap.useSplitFlap({
    value,
    animate,
    speed,
    characterSet,
    flipDuration,
    staggerDelay,
    delay,
    onCompleted
  });
  const getStyles = core.useStyles({
    name: "SplitFlap",
    props,
    classes: SplitFlap_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  return /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("root"), component: "div", "aria-live": "polite", ...others }, characters.map((char, i) => /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("character"), key: i }, /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("charTop") }, /* @__PURE__ */ React.createElement("span", { className: SplitFlap_module.charInner }, char.isFlipping ? char.next : char.current)), /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("charBottom") }, /* @__PURE__ */ React.createElement("span", { className: SplitFlap_module.charInner }, char.current)), char.isFlipping && /* @__PURE__ */ React.createElement(React.Fragment, { key: char.flipKey }, /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("flapTop") }, /* @__PURE__ */ React.createElement("span", { className: SplitFlap_module.charInner }, char.current)), /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("flapBottom") }, /* @__PURE__ */ React.createElement("span", { className: SplitFlap_module.charInner }, char.next))))));
});
SplitFlap.classes = SplitFlap_module;
SplitFlap.displayName = "SplitFlap";

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