@arolariu/components/dist/components/ui/highlight-text.js

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx } from "react/jsx-runtime";
import { motion, useInView } from "motion/react";
import { cn } from "../../lib/utilities.js";
import highlight_text_module from "./highlight-text.module.js";
import * as __rspack_external_react from "react";
const animation = {
    backgroundSize: "100% 100%"
};
const HighlightText = /*#__PURE__*/ __rspack_external_react.forwardRef(({ text, className, inView = false, inViewMargin = "0px", inViewOnce = true, transition = {
    duration: 2,
    ease: "easeInOut"
}, ...props }, ref)=>{
    const { key: _ignoredKey, ...restProps } = props;
    const localRef = __rspack_external_react.useRef(null);
    __rspack_external_react.useImperativeHandle(ref, ()=>localRef.current, []);
    const inViewResult = useInView(localRef, {
        once: inViewOnce,
        margin: inViewMargin
    });
    const isInView = !inView || inViewResult;
    return /*#__PURE__*/ jsx(motion.span, {
        ref: localRef,
        initial: {
            backgroundSize: "0% 100%"
        },
        animate: isInView ? animation : void 0,
        transition: transition,
        className: cn(highlight_text_module.highlight, className),
        ...restProps,
        children: text
    });
});
HighlightText.displayName = "HighlightText";
export { HighlightText };

//# sourceMappingURL=highlight-text.js.map