@arolariu/components
Version:
🎨 60+ 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! ⚡
1 lines • 4.27 kB
Source Map (JSON)
{"version":3,"file":"components\\ui\\highlight-text.cjs","sources":["webpack://@arolariu/components/webpack/runtime/define_property_getters","webpack://@arolariu/components/webpack/runtime/has_own_property","webpack://@arolariu/components/webpack/runtime/make_namespace_object","webpack://@arolariu/components/./src/components/ui/highlight-text.tsx"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n }\n }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\n\nimport * as React from \"react\";\nimport {\n motion,\n useInView,\n type HTMLMotionProps,\n type Transition,\n type UseInViewOptions,\n} from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface HighlightTextProps extends HTMLMotionProps<\"span\"> {\n text: string;\n inView?: boolean;\n inViewMargin?: UseInViewOptions[\"margin\"];\n inViewOnce?: boolean;\n transition?: Transition;\n}\n\nconst animation = { backgroundSize: \"100% 100%\" };\n\nconst HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(\n (\n {\n text,\n className,\n inView = false,\n inViewMargin = \"0px\",\n transition = { duration: 2, ease: \"easeInOut\" },\n ...props\n },\n ref,\n ) => {\n const localRef = React.useRef<HTMLSpanElement>(null);\n React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\n\n const inViewResult = useInView(localRef, {\n once: true,\n margin: inViewMargin,\n });\n const isInView = !inView || inViewResult;\n\n return (\n <motion.span\n ref={localRef}\n initial={{\n backgroundSize: \"0% 100%\",\n }}\n animate={isInView ? animation : undefined}\n transition={transition}\n style={{\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"left center\",\n display: \"inline\",\n }}\n className={cn(\n `relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500`,\n className,\n )}\n {...props}\n >\n {text}\n </motion.span>\n );\n },\n);\nHighlightText.displayName = \"HighlightText\";\n\nexport { HighlightText, type HighlightTextProps };\n"],"names":["__webpack_require__","definition","key","Object","obj","prop","Symbol","animation","HighlightText","React","text","className","inView","inViewMargin","transition","props","ref","localRef","inViewResult","useInView","isInView","motion","undefined","cn"],"mappings":";;;;IAAAA,oBAAoB,CAAC,GAAG,CAAC,UAASC;QACjC,IAAI,IAAIC,OAAOD,WACR,IAAGD,oBAAoB,CAAC,CAACC,YAAYC,QAAQ,CAACF,oBAAoB,CAAC,CAAC,UAASE,MACzEC,OAAO,cAAc,CAAC,UAASD,KAAK;YAAE,YAAY;YAAM,KAAKD,UAAU,CAACC,IAAI;QAAC;IAGzF;;;ICNAF,oBAAoB,CAAC,GAAG,CAACI,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFL,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,sBAAOM,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D;;;;;;;;;;;ACeA,MAAMI,YAAY;IAAE,gBAAgB;AAAY;AAEhD,MAAMC,gBAAgB,WAAhBA,GAAgBC,+BAAAA,UAAgB,CACpC,CACE,EACEC,IAAI,EACJC,SAAS,EACTC,SAAS,KAAK,EACdC,eAAe,KAAK,EACpBC,aAAa;IAAE,UAAU;IAAG,MAAM;AAAY,CAAC,EAC/C,GAAGC,OACJ,EACDC;IAEA,MAAMC,WAAWR,+BAAAA,MAAY,CAAkB;IAC/CA,+BAAAA,mBAAyB,CAACO,KAAK,IAAMC,SAAS,OAAO;IAErD,MAAMC,eAAeC,IAAAA,sBAAAA,SAAAA,EAAUF,UAAU;QACvC,MAAM;QACN,QAAQJ;IACV;IACA,MAAMO,WAAW,CAACR,UAAUM;IAE5B,OACE,WADF,GACE,qCAACG,sBAAAA,MAAAA,CAAAA,IAAW;QACV,KAAKJ;QACL,SAAS;YACP,gBAAgB;QAClB;QACA,SAASG,WAAWb,YAAYe;QAChC,YAAYR;QACZ,OAAO;YACL,kBAAkB;YAClB,oBAAoB;YACpB,SAAS;QACX;QACA,WAAWS,IAAAA,0BAAAA,EAAAA,EACT,iIACAZ;QAED,GAAGI,KAAK;kBAERL;;AAGP;AAEFF,cAAc,WAAW,GAAG"}