Changed files over to jsx, hopefully it now works :p

Author: itznao

package.json

@@ -1,10 +1,18 @@
 {
   "name": "react-twinkle-text",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React twinkle text effect using Tailwind-compatible styles.",
   "main": "src/index.js",
-  "files": ["src"],
-  "keywords": ["react", "tailwind", "twinkle", "text", "component"],
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "tailwind",
+    "twinkle",
+    "text",
+    "component"
+  ],
   "author": "itznao",
   "license": "MIT",
   "peerDependencies": {
@@ -18,5 +26,9 @@
   "bugs": {
     "url": "https://github.com/itznao/react-twinkle-text/issues"
   },
-  "homepage": "https://github.com/itznao/react-twinkle-text#readme"
-}
+  "homepage": "https://github.com/itznao/react-twinkle-text#readme",
+  "devDependencies": {
+    "@types/node": "^22.15.30",
+    "typescript": "^5.8.3"
+  }
+}

src/TwinkleText.jsx renamed to src/TwinkleText.tsx

@@ -3,7 +3,14 @@ import { twinkleCSS } from "./twinkleStyles";
 
 let cssInjected = false;
 
-export const twinkleText = ({
+interface TwinkleTextProps {
+  children: React.ReactNode;
+  className?: string;
+  hover?: boolean;
+  groupHover?: boolean;
+}
+
+export const TwinkleText: React.FC<TwinkleTextProps> = ({
   children,
   className = "",
   hover = false,
@@ -25,7 +32,10 @@ export const twinkleText = ({
     : "text-twinkle";
 
   return (
-    <span text-twinkle-data={children} className={`${twinkleClass} ${className}`}>
+    <span
+      data-text-twinkle={typeof children === "string" ? children : undefined}
+      className={`${twinkleClass} ${className}`}
+    >
       {children}
     </span>
   );

src/index.js

@@ -0,0 +1 @@
+export { TwinkleText } from "./TwinkleText";

src/index.ts

@@ -0,0 +1,61 @@
+import plugin from "tailwindcss/plugin";
+import type { PluginAPI } from "tailwindcss/types/config";
+
+const shimmerBefore: Record<string, string> = {
+  content: "attr(text-shimmer-data)",
+  position: "absolute",
+  inset: "0",
+  "pointer-events": "none",
+  color: "transparent",
+  "background-clip": "text",
+  "background-image":
+    "linear-gradient(90deg, #0000, #0000, #0000, #fff, #0000, #0000, #0000)",
+  "background-size": "200% 100%",
+  "background-position": "150% 0",
+  filter:
+    "drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px rgba(255,255,255,0.5))",
+};
+
+export default plugin(function ({ addUtilities, addComponents }: PluginAPI) {
+  addUtilities({
+    "@keyframes text-shimmer": {
+      "0%": { "background-position": "150% 0" },
+      "100%": { "background-position": "-250% 0" },
+    },
+  });
+
+  addComponents({
+    ".text-shimmer": {
+      position: "relative",
+      display: "inline-block",
+    },
+    ".text-shimmer::before": {
+      ...shimmerBefore,
+      animation: "text-shimmer 5s linear infinite",
+    },
+    ".hover-text-shimmer": {
+      position: "relative",
+      display: "inline-block",
+    },
+    ".hover-text-shimmer::before": {
+      ...shimmerBefore,
+      opacity: "0",
+    },
+    ".hover-text-shimmer:hover::before": {
+      animation: "text-shimmer 5s linear infinite",
+      opacity: "1",
+    },
+    ".group-hover-text-shimmer": {
+      position: "relative",
+      display: "inline-block",
+    },
+    ".group-hover-text-shimmer::before": {
+      ...shimmerBefore,
+      opacity: "0",
+    },
+    ".group:hover .group-hover-text-shimmer::before": {
+      animation: "text-shimmer 5s linear infinite",
+      opacity: "1",
+    },
+  });
+});