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

🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, 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 { forwardRef, useImperativeHandle, useRef } from "react";
import { cn } from "../../lib/utilities.js";
const animation = {
    backgroundSize: "100% 100%"
};
const HighlightText = /*#__PURE__*/ forwardRef(({ text, className, inView = false, inViewMargin = "0px", transition = {
    duration: 2,
    ease: "easeInOut"
}, ...props }, ref)=>{
    const localRef = useRef(null);
    useImperativeHandle(ref, ()=>localRef.current);
    const inViewResult = useInView(localRef, {
        once: true,
        margin: inViewMargin
    });
    const isInView = !inView || inViewResult;
    return /*#__PURE__*/ jsx(motion.span, {
        ref: localRef,
        initial: {
            backgroundSize: "0% 100%"
        },
        animate: isInView ? animation : void 0,
        transition: transition,
        style: {
            backgroundRepeat: "no-repeat",
            backgroundPosition: "left center",
            display: "inline"
        },
        className: cn("relative inline-block rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 px-2 py-1 dark:from-blue-500 dark:to-purple-500", className),
        ...props,
        children: text
    });
});
HighlightText.displayName = "HighlightText";
export { HighlightText };

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