@arolariu/components 0.1.2 → 0.2.0

package/src/components/ui/gradient-text.tsx

@@ -1,65 +1,62 @@
-"use client";
-
-import * as React from "react";
-import { motion, type Transition } from "motion/react";
-
-import { cn } from "@/lib/utils";
-
-interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {
-  text: string;
-  gradient?: string;
-  neon?: boolean;
-  transition?: Transition;
-}
-
-const GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(
-  (
-    {
-      text,
-      className,
-      gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)",
-      neon = false,
-      transition = { duration: 50, repeat: Infinity, ease: "linear" },
-      ...props
-    },
-    ref,
-  ) => {
-    const baseStyle: React.CSSProperties = {
-      backgroundImage: gradient,
-    };
-
-    return (
-      <span
-        ref={ref}
-        className={cn("relative inline-block", className)}
-        {...props}
-      >
-        <motion.span
-          className="m-0 text-transparent bg-clip-text bg-[length:700%_100%] bg-[position:0%_0%]"
-          style={baseStyle}
-          initial={{ backgroundPosition: "0% 0%" }}
-          animate={{ backgroundPosition: "500% 100%" }}
-          transition={transition}
-        >
-          {text}
-        </motion.span>
-
-        {neon && (
-          <motion.span
-            className="m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:700%_100%] bg-[position:0%_0%]"
-            style={baseStyle}
-            initial={{ backgroundPosition: "0% 0%" }}
-            animate={{ backgroundPosition: "500% 100%" }}
-            transition={transition}
-          >
-            {text}
-          </motion.span>
-        )}
-      </span>
-    );
-  },
-);
-
-GradientText.displayName = "GradientText";
-
-export { GradientText, type GradientTextProps };
+"use client";
+
+import {motion, type Transition} from "motion/react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+  text: string;
+  gradient?: string;
+  neon?: boolean;
+  transition?: Transition;
+}
+
+const GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(
+  (
+    {
+      text,
+      className,
+      gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)",
+      neon = false,
+      transition = {duration: 50, repeat: Infinity, ease: "linear"},
+      ...props
+    },
+    ref,
+  ) => {
+    const baseStyle: React.CSSProperties = {
+      backgroundImage: gradient,
+    };
+
+    return (
+      <span
+        ref={ref}
+        className={cn("relative inline-block", className)}
+        {...props}>
+        <motion.span
+          className='m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent'
+          style={baseStyle}
+          initial={{backgroundPosition: "0% 0%"}}
+          animate={{backgroundPosition: "500% 100%"}}
+          transition={transition}>
+          {text}
+        </motion.span>
+
+        {Boolean(neon) && (
+          <motion.span
+            className='absolute top-0 left-0 m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent mix-blend-plus-lighter blur-[8px]'
+            style={baseStyle}
+            initial={{backgroundPosition: "0% 0%"}}
+            animate={{backgroundPosition: "500% 100%"}}
+            transition={transition}>
+            {text}
+          </motion.span>
+        )}
+      </span>
+    );
+  },
+);
+
+GradientText.displayName = "GradientText";
+
+export {GradientText, type GradientTextProps};

package/src/components/ui/highlight-text.tsx

@@ -1,71 +1,54 @@
-"use client";
-
-import * as React from "react";
-import {
-  motion,
-  useInView,
-  type HTMLMotionProps,
-  type Transition,
-  type UseInViewOptions,
-} from "motion/react";
-
-import { cn } from "@/lib/utils";
-
-interface HighlightTextProps extends HTMLMotionProps<"span"> {
-  text: string;
-  inView?: boolean;
-  inViewMargin?: UseInViewOptions["margin"];
-  inViewOnce?: boolean;
-  transition?: Transition;
-}
-
-const animation = { backgroundSize: "100% 100%" };
-
-const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
-  (
-    {
-      text,
-      className,
-      inView = false,
-      inViewMargin = "0px",
-      transition = { duration: 2, ease: "easeInOut" },
-      ...props
-    },
-    ref,
-  ) => {
-    const localRef = React.useRef<HTMLSpanElement>(null);
-    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
-
-    const inViewResult = useInView(localRef, {
-      once: true,
-      margin: inViewMargin,
-    });
-    const isInView = !inView || inViewResult;
-
-    return (
-      <motion.span
-        ref={localRef}
-        initial={{
-          backgroundSize: "0% 100%",
-        }}
-        animate={isInView ? animation : undefined}
-        transition={transition}
-        style={{
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "left center",
-          display: "inline",
-        }}
-        className={cn(
-          `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`,
-          className,
-        )}
-        {...props}
-      >
-        {text}
-      </motion.span>
-    );
-  },
-);
-HighlightText.displayName = "HighlightText";
-
-export { HighlightText, type HighlightTextProps };
+"use client";
+
+import {motion, useInView, type HTMLMotionProps, type Transition, type UseInViewOptions} from "motion/react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+interface HighlightTextProps extends HTMLMotionProps<"span"> {
+  text: string;
+  inView?: boolean;
+  inViewMargin?: UseInViewOptions["margin"];
+  inViewOnce?: boolean;
+  transition?: Transition;
+}
+
+const animation = {backgroundSize: "100% 100%"};
+
+const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
+  ({text, className, inView = false, inViewMargin = "0px", transition = {duration: 2, ease: "easeInOut"}, ...props}, ref) => {
+    const localRef = React.useRef<HTMLSpanElement>(null);
+    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
+
+    const inViewResult = useInView(localRef, {
+      once: true,
+      margin: inViewMargin,
+    });
+    const isInView = !inView || inViewResult;
+
+    return (
+      <motion.span
+        ref={localRef}
+        initial={{
+          backgroundSize: "0% 100%",
+        }}
+        animate={isInView ? animation : undefined}
+        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}>
+        {text}
+      </motion.span>
+    );
+  },
+);
+HighlightText.displayName = "HighlightText";
+
+export {HighlightText, type HighlightTextProps};