@ertekinno/human-like/dist/index.es.js

A sophisticated React typewriter effect library with realistic human typing behavior, mobile/desktop keyboards, and comprehensive theming support

import { jsxs, jsx } from "react/jsx-runtime";
import { u as useHumanLike } from "./useHumanLike-B7saIOJv.js";
import { B, a, T } from "./useHumanLike-B7saIOJv.js";
const HumanLike = ({
  text,
  speed = 80,
  mistakeFrequency = 0.03,
  showCursor = true,
  cursorChar = "|",
  cursorBlinkSpeed = 530,
  autoStart = true,
  config = {},
  id,
  onStart,
  onComplete,
  onChar,
  onMistake,
  onBackspace,
  onPause,
  onResume,
  keyboardMode,
  onKey,
  className,
  style,
  ...props
}) => {
  const mergedConfig = {
    speed,
    mistakeFrequency,
    ...config
  };
  const {
    displayText,
    showCursor: shouldShowCursor,
    cursorChar: activeCursorChar,
    isTyping,
    isCompleted,
    currentState
  } = useHumanLike({
    text,
    config: mergedConfig,
    autoStart,
    showCursor,
    cursorChar,
    cursorBlinkSpeed,
    id,
    onStart,
    onComplete,
    onChar,
    onMistake,
    onBackspace,
    onPause,
    onResume,
    keyboardMode,
    onKey
  });
  const componentStyle = style;
  const cursorStyle = {
    opacity: 1
    // Always visible when rendered, hook controls visibility via render condition
  };
  return /* @__PURE__ */ jsxs(
    "span",
    {
      className: `human-like-typewriter ${className || ""}`,
      style: componentStyle,
      "data-typing": isTyping,
      "data-completed": isCompleted,
      "data-state": currentState,
      "data-id": id,
      ...props,
      children: [
        displayText,
        shouldShowCursor && /* @__PURE__ */ jsx(
          "span",
          {
            className: "human-like-cursor",
            style: cursorStyle,
            "aria-hidden": "true",
            children: activeCursorChar
          }
        )
      ]
    }
  );
};
HumanLike.displayName = "HumanLike";
export {
  B as BEHAVIOR_RATES,
  HumanLike,
  a as TIMING_CONSTANTS,
  T as TypingEngine,
  useHumanLike
};
//# sourceMappingURL=index.es.js.map