Skip to content

Commit 5b5d74b

Browse files
itznaoitznao
committed
changed over to tsup. maybe it works, never made a package before
1 parent 3766e34 commit 5b5d74b

File tree

6 files changed

+227
-3
lines changed

6 files changed

+227
-3
lines changed

‎dist/index.d.mts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as react_jsx_runtime from 'react/jsx-runtime';
2+
import React from 'react';
3+
4+
interface TwinkleTextProps {
5+
children: React.ReactNode;
6+
className?: string;
7+
hover?: boolean;
8+
groupHover?: boolean;
9+
}
10+
declare const TwinkleText: ({ children, className, hover, groupHover, }: TwinkleTextProps) => react_jsx_runtime.JSX.Element;
11+
12+
export { TwinkleText };

‎dist/index.d.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as react_jsx_runtime from 'react/jsx-runtime';
2+
import React from 'react';
3+
4+
interface TwinkleTextProps {
5+
children: React.ReactNode;
6+
className?: string;
7+
hover?: boolean;
8+
groupHover?: boolean;
9+
}
10+
declare const TwinkleText: ({ children, className, hover, groupHover, }: TwinkleTextProps) => react_jsx_runtime.JSX.Element;
11+
12+
export { TwinkleText };

‎dist/index.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
"use strict";
2+
var __defProp = Object.defineProperty;
3+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4+
var __getOwnPropNames = Object.getOwnPropertyNames;
5+
var __hasOwnProp = Object.prototype.hasOwnProperty;
6+
var __export = (target, all) => {
7+
for (var name in all)
8+
__defProp(target, name, { get: all[name], enumerable: true });
9+
};
10+
var __copyProps = (to, from, except, desc) => {
11+
if (from && typeof from === "object" || typeof from === "function") {
12+
for (let key of __getOwnPropNames(from))
13+
if (!__hasOwnProp.call(to, key) && key !== except)
14+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15+
}
16+
return to;
17+
};
18+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19+
20+
// src/index.tsx
21+
var index_exports = {};
22+
__export(index_exports, {
23+
TwinkleText: () => TwinkleText
24+
});
25+
module.exports = __toCommonJS(index_exports);
26+
27+
// src/TwinkleText.tsx
28+
var import_react = require("react");
29+
30+
// src/twinkleStyles.ts
31+
var twinkleCSS = `
32+
@keyframes text-twinkle {
33+
0% { background-position: 150% 0; }
34+
100% { background-position: -250% 0; }
35+
}
36+
37+
.text-twinkle,
38+
.hover-text-twinkle,
39+
.group-hover-text-twinkle {
40+
position: relative;
41+
display: inline-block;
42+
}
43+
44+
.text-twinkle::before,
45+
.hover-text-twinkle::before,
46+
.group-hover-text-twinkle::before {
47+
content: attr(text-twinkle-data);
48+
position: absolute;
49+
inset: 0;
50+
pointer-events: none;
51+
color: transparent;
52+
background-clip: text;
53+
background-image: linear-gradient(
54+
90deg,
55+
transparent,
56+
transparent,
57+
white,
58+
transparent,
59+
transparent
60+
);
61+
background-size: 200% 100%;
62+
background-position: 150% 0;
63+
filter: drop-shadow(0 0 1px #ffffff)
64+
drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
65+
}
66+
67+
.text-twinkle::before {
68+
animation: text-twinkle 5s linear infinite;
69+
}
70+
71+
.hover-text-twinkle::before,
72+
.group-hover-text-twinkle::before {
73+
opacity: 0;
74+
}
75+
76+
.hover-text-twinkle:hover::before,
77+
.group:hover .group-hover-text-twinkle::before {
78+
opacity: 1;
79+
animation: text-twinkle 5s linear infinite;
80+
}
81+
`;
82+
83+
// src/TwinkleText.tsx
84+
var import_jsx_runtime = require("react/jsx-runtime");
85+
var cssInjected = false;
86+
var TwinkleText = ({
87+
children,
88+
className = "",
89+
hover = false,
90+
groupHover = false
91+
}) => {
92+
(0, import_react.useEffect)(() => {
93+
if (!cssInjected) {
94+
const style = document.createElement("style");
95+
style.textContent = twinkleCSS;
96+
document.head.appendChild(style);
97+
cssInjected = true;
98+
}
99+
}, []);
100+
const twinkleClass = groupHover ? "group-hover-text-twinkle" : hover ? "hover-text-twinkle" : "text-twinkle";
101+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102+
"span",
103+
{
104+
"data-text-twinkle": typeof children === "string" ? children : void 0,
105+
className: `${twinkleClass} ${className}`,
106+
children
107+
}
108+
);
109+
};
110+
// Annotate the CommonJS export names for ESM import in node:
111+
0 && (module.exports = {
112+
TwinkleText
113+
});

‎dist/index.mjs

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// src/TwinkleText.tsx
2+
import { useEffect } from "react";
3+
4+
// src/twinkleStyles.ts
5+
var twinkleCSS = `
6+
@keyframes text-twinkle {
7+
0% { background-position: 150% 0; }
8+
100% { background-position: -250% 0; }
9+
}
10+
11+
.text-twinkle,
12+
.hover-text-twinkle,
13+
.group-hover-text-twinkle {
14+
position: relative;
15+
display: inline-block;
16+
}
17+
18+
.text-twinkle::before,
19+
.hover-text-twinkle::before,
20+
.group-hover-text-twinkle::before {
21+
content: attr(text-twinkle-data);
22+
position: absolute;
23+
inset: 0;
24+
pointer-events: none;
25+
color: transparent;
26+
background-clip: text;
27+
background-image: linear-gradient(
28+
90deg,
29+
transparent,
30+
transparent,
31+
white,
32+
transparent,
33+
transparent
34+
);
35+
background-size: 200% 100%;
36+
background-position: 150% 0;
37+
filter: drop-shadow(0 0 1px #ffffff)
38+
drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
39+
}
40+
41+
.text-twinkle::before {
42+
animation: text-twinkle 5s linear infinite;
43+
}
44+
45+
.hover-text-twinkle::before,
46+
.group-hover-text-twinkle::before {
47+
opacity: 0;
48+
}
49+
50+
.hover-text-twinkle:hover::before,
51+
.group:hover .group-hover-text-twinkle::before {
52+
opacity: 1;
53+
animation: text-twinkle 5s linear infinite;
54+
}
55+
`;
56+
57+
// src/TwinkleText.tsx
58+
import { jsx } from "react/jsx-runtime";
59+
var cssInjected = false;
60+
var TwinkleText = ({
61+
children,
62+
className = "",
63+
hover = false,
64+
groupHover = false
65+
}) => {
66+
useEffect(() => {
67+
if (!cssInjected) {
68+
const style = document.createElement("style");
69+
style.textContent = twinkleCSS;
70+
document.head.appendChild(style);
71+
cssInjected = true;
72+
}
73+
}, []);
74+
const twinkleClass = groupHover ? "group-hover-text-twinkle" : hover ? "hover-text-twinkle" : "text-twinkle";
75+
return /* @__PURE__ */ jsx(
76+
"span",
77+
{
78+
"data-text-twinkle": typeof children === "string" ? children : void 0,
79+
className: `${twinkleClass} ${className}`,
80+
children
81+
}
82+
);
83+
};
84+
export {
85+
TwinkleText
86+
};

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "react-twinkle-text",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"description": "React twinkle text effect using Tailwind-compatible styles.",
55
"main": "dist/index.js",
6-
"types": "dist/index.d.ts",
6+
"types": "types/src/index.d.ts",
77
"files": [
88
"dist",
99
"tailwind-plugin.ts"
@@ -34,9 +34,10 @@
3434
"@types/react": "^19.1.6",
3535
"@types/react-dom": "^19.1.6",
3636
"tailwindcss": "^4.1.8",
37+
"tsup": "^8.5.0",
3738
"typescript": "^5.8.3"
3839
},
3940
"scripts": {
40-
"build": "tsc"
41+
"build": "tsup src/index.tsx --format esm,cjs --dts --out-dir dist"
4142
}
4243
}

‎src/index.ts renamed to ‎src/index.tsx

File renamed without changes.

0 commit comments

Comments
 (0)