@t7blocks/ui 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +11 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.js +121 -2
- package/dist/index.mjs +119 -1
- package/package.json +5 -1
package/dist/index.d.mts
CHANGED
|
@@ -8,4 +8,14 @@ interface Button1Props {
|
|
|
8
8
|
}
|
|
9
9
|
declare function Button1({ label, variant, size, onClick, }: Button1Props): react_jsx_runtime.JSX.Element;
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
interface DotlaunchbuttonProps {
|
|
12
|
+
label?: string;
|
|
13
|
+
onClick?: () => void;
|
|
14
|
+
className?: string;
|
|
15
|
+
accentColor?: string;
|
|
16
|
+
btnColor?: string;
|
|
17
|
+
animationSpeed?: number;
|
|
18
|
+
}
|
|
19
|
+
declare function Dotlaunchbutton({ label, onClick, className, accentColor, btnColor, animationSpeed, }: DotlaunchbuttonProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
export { Button1, Dotlaunchbutton };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,4 +8,14 @@ interface Button1Props {
|
|
|
8
8
|
}
|
|
9
9
|
declare function Button1({ label, variant, size, onClick, }: Button1Props): react_jsx_runtime.JSX.Element;
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
interface DotlaunchbuttonProps {
|
|
12
|
+
label?: string;
|
|
13
|
+
onClick?: () => void;
|
|
14
|
+
className?: string;
|
|
15
|
+
accentColor?: string;
|
|
16
|
+
btnColor?: string;
|
|
17
|
+
animationSpeed?: number;
|
|
18
|
+
}
|
|
19
|
+
declare function Dotlaunchbutton({ label, onClick, className, accentColor, btnColor, animationSpeed, }: DotlaunchbuttonProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
export { Button1, Dotlaunchbutton };
|
package/dist/index.js
CHANGED
|
@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
Button1: () => Button1
|
|
23
|
+
Button1: () => Button1,
|
|
24
|
+
Dotlaunchbutton: () => Dotlaunchbutton
|
|
24
25
|
});
|
|
25
26
|
module.exports = __toCommonJS(index_exports);
|
|
26
27
|
|
|
@@ -63,8 +64,126 @@ function Button1({
|
|
|
63
64
|
}
|
|
64
65
|
);
|
|
65
66
|
}
|
|
67
|
+
|
|
68
|
+
// src/components/button/DotLaunch/Dotlaunchbutton.tsx
|
|
69
|
+
var import_react2 = require("react");
|
|
70
|
+
var import_framer_motion2 = require("framer-motion");
|
|
71
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
72
|
+
function arrowAt(tipCol) {
|
|
73
|
+
const cells = /* @__PURE__ */ new Set();
|
|
74
|
+
if (tipCol >= 0 && tipCol <= 4) cells.add(2 * 5 + tipCol);
|
|
75
|
+
if (tipCol - 1 >= 0 && tipCol - 1 <= 4) cells.add(1 * 5 + (tipCol - 1));
|
|
76
|
+
if (tipCol - 2 >= 0 && tipCol - 2 <= 4) cells.add(0 * 5 + (tipCol - 2));
|
|
77
|
+
if (tipCol - 1 >= 0 && tipCol - 1 <= 4) cells.add(3 * 5 + (tipCol - 1));
|
|
78
|
+
if (tipCol - 2 >= 0 && tipCol - 2 <= 4) cells.add(4 * 5 + (tipCol - 2));
|
|
79
|
+
for (let c = Math.max(0, tipCol - 4); c < tipCol && c <= 4; c++) cells.add(2 * 5 + c);
|
|
80
|
+
return cells;
|
|
81
|
+
}
|
|
82
|
+
function lightTint(hex, amount) {
|
|
83
|
+
if (!hex.startsWith("#")) return hex;
|
|
84
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
85
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
86
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
87
|
+
const tr = Math.round(r + (255 - r) * (1 - amount));
|
|
88
|
+
const tg = Math.round(g + (255 - g) * (1 - amount));
|
|
89
|
+
const tb = Math.round(b + (255 - b) * (1 - amount));
|
|
90
|
+
return `rgb(${tr},${tg},${tb})`;
|
|
91
|
+
}
|
|
92
|
+
var TIP_SEQUENCE = [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7];
|
|
93
|
+
var DOT_COUNT = 25;
|
|
94
|
+
var GRID_SIZE = 41;
|
|
95
|
+
var GAP = 3;
|
|
96
|
+
var DOT_SIZE = (GRID_SIZE - GAP * 4) / 5;
|
|
97
|
+
function Dotlaunchbutton({
|
|
98
|
+
label = "Get started",
|
|
99
|
+
onClick,
|
|
100
|
+
className = "",
|
|
101
|
+
accentColor = "#18db38",
|
|
102
|
+
btnColor = "#111111",
|
|
103
|
+
animationSpeed = 155
|
|
104
|
+
}) {
|
|
105
|
+
const [seqIndex, setSeqIndex] = (0, import_react2.useState)(0);
|
|
106
|
+
const timerRef = (0, import_react2.useRef)(null);
|
|
107
|
+
const buttonRef = (0, import_react2.useRef)(null);
|
|
108
|
+
(0, import_react2.useEffect)(() => {
|
|
109
|
+
timerRef.current = setInterval(() => {
|
|
110
|
+
setSeqIndex((prev) => (prev + 1) % TIP_SEQUENCE.length);
|
|
111
|
+
}, animationSpeed);
|
|
112
|
+
return () => {
|
|
113
|
+
if (timerRef.current) clearInterval(timerRef.current);
|
|
114
|
+
};
|
|
115
|
+
}, [animationSpeed]);
|
|
116
|
+
const activeSet = arrowAt(TIP_SEQUENCE[seqIndex]);
|
|
117
|
+
const inactiveDotColor = lightTint(accentColor, 0.65);
|
|
118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
119
|
+
import_framer_motion2.motion.button,
|
|
120
|
+
{
|
|
121
|
+
ref: buttonRef,
|
|
122
|
+
onClick,
|
|
123
|
+
whileHover: { scale: 1.03 },
|
|
124
|
+
whileTap: { scale: 0.97 },
|
|
125
|
+
className: `group relative inline-flex items-center rounded-[14px] border border-white/[0.06] shadow-[0_4px_24px_rgba(0,0,0,0.65)] cursor-pointer select-none ${className}`,
|
|
126
|
+
style: {
|
|
127
|
+
padding: "8px 28px 8px 8px",
|
|
128
|
+
backgroundColor: btnColor
|
|
129
|
+
},
|
|
130
|
+
children: [
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
132
|
+
"div",
|
|
133
|
+
{
|
|
134
|
+
className: "relative flex items-center justify-center flex-shrink-0 overflow-hidden",
|
|
135
|
+
style: {
|
|
136
|
+
width: 58,
|
|
137
|
+
height: 58,
|
|
138
|
+
borderRadius: 10,
|
|
139
|
+
backgroundColor: accentColor,
|
|
140
|
+
marginRight: 18,
|
|
141
|
+
boxShadow: "inset 0 -2px 5px rgba(0,0,0,0.18)"
|
|
142
|
+
},
|
|
143
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "relative", width: GRID_SIZE, height: GRID_SIZE }, children: Array.from({ length: DOT_COUNT }).map((_, i) => {
|
|
144
|
+
const row = Math.floor(i / 5);
|
|
145
|
+
const col = i % 5;
|
|
146
|
+
const isActive = activeSet.has(i);
|
|
147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
148
|
+
import_framer_motion2.motion.div,
|
|
149
|
+
{
|
|
150
|
+
initial: false,
|
|
151
|
+
animate: {
|
|
152
|
+
backgroundColor: isActive ? "#ffffff" : inactiveDotColor,
|
|
153
|
+
opacity: isActive ? 1 : 0.72
|
|
154
|
+
},
|
|
155
|
+
transition: { duration: 0.08 },
|
|
156
|
+
style: {
|
|
157
|
+
position: "absolute",
|
|
158
|
+
width: DOT_SIZE,
|
|
159
|
+
height: DOT_SIZE,
|
|
160
|
+
left: col * (DOT_SIZE + GAP),
|
|
161
|
+
top: row * (DOT_SIZE + GAP),
|
|
162
|
+
borderRadius: 0
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
i
|
|
166
|
+
);
|
|
167
|
+
}) })
|
|
168
|
+
}
|
|
169
|
+
),
|
|
170
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
171
|
+
"span",
|
|
172
|
+
{
|
|
173
|
+
className: "text-white whitespace-nowrap",
|
|
174
|
+
style: { fontSize: 17, fontWeight: 400, letterSpacing: "-0.2px" },
|
|
175
|
+
children: label
|
|
176
|
+
}
|
|
177
|
+
),
|
|
178
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-none absolute inset-0 rounded-[14px] bg-gradient-to-tr from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
|
|
179
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute inset-[0.5px] rounded-[14px] border-t border-white/5 pointer-events-none" })
|
|
180
|
+
]
|
|
181
|
+
}
|
|
182
|
+
);
|
|
183
|
+
}
|
|
66
184
|
// Annotate the CommonJS export names for ESM import in node:
|
|
67
185
|
0 && (module.exports = {
|
|
68
|
-
Button1
|
|
186
|
+
Button1,
|
|
187
|
+
Dotlaunchbutton
|
|
69
188
|
});
|
|
70
189
|
//# sourceMappingURL=index.js.map
|
package/dist/index.mjs
CHANGED
|
@@ -37,7 +37,125 @@ function Button1({
|
|
|
37
37
|
}
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
|
+
|
|
41
|
+
// src/components/button/DotLaunch/Dotlaunchbutton.tsx
|
|
42
|
+
import { useState, useEffect, useRef as useRef2 } from "react";
|
|
43
|
+
import { motion as motion2 } from "framer-motion";
|
|
44
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
45
|
+
function arrowAt(tipCol) {
|
|
46
|
+
const cells = /* @__PURE__ */ new Set();
|
|
47
|
+
if (tipCol >= 0 && tipCol <= 4) cells.add(2 * 5 + tipCol);
|
|
48
|
+
if (tipCol - 1 >= 0 && tipCol - 1 <= 4) cells.add(1 * 5 + (tipCol - 1));
|
|
49
|
+
if (tipCol - 2 >= 0 && tipCol - 2 <= 4) cells.add(0 * 5 + (tipCol - 2));
|
|
50
|
+
if (tipCol - 1 >= 0 && tipCol - 1 <= 4) cells.add(3 * 5 + (tipCol - 1));
|
|
51
|
+
if (tipCol - 2 >= 0 && tipCol - 2 <= 4) cells.add(4 * 5 + (tipCol - 2));
|
|
52
|
+
for (let c = Math.max(0, tipCol - 4); c < tipCol && c <= 4; c++) cells.add(2 * 5 + c);
|
|
53
|
+
return cells;
|
|
54
|
+
}
|
|
55
|
+
function lightTint(hex, amount) {
|
|
56
|
+
if (!hex.startsWith("#")) return hex;
|
|
57
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
58
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
59
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
60
|
+
const tr = Math.round(r + (255 - r) * (1 - amount));
|
|
61
|
+
const tg = Math.round(g + (255 - g) * (1 - amount));
|
|
62
|
+
const tb = Math.round(b + (255 - b) * (1 - amount));
|
|
63
|
+
return `rgb(${tr},${tg},${tb})`;
|
|
64
|
+
}
|
|
65
|
+
var TIP_SEQUENCE = [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7];
|
|
66
|
+
var DOT_COUNT = 25;
|
|
67
|
+
var GRID_SIZE = 41;
|
|
68
|
+
var GAP = 3;
|
|
69
|
+
var DOT_SIZE = (GRID_SIZE - GAP * 4) / 5;
|
|
70
|
+
function Dotlaunchbutton({
|
|
71
|
+
label = "Get started",
|
|
72
|
+
onClick,
|
|
73
|
+
className = "",
|
|
74
|
+
accentColor = "#18db38",
|
|
75
|
+
btnColor = "#111111",
|
|
76
|
+
animationSpeed = 155
|
|
77
|
+
}) {
|
|
78
|
+
const [seqIndex, setSeqIndex] = useState(0);
|
|
79
|
+
const timerRef = useRef2(null);
|
|
80
|
+
const buttonRef = useRef2(null);
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
timerRef.current = setInterval(() => {
|
|
83
|
+
setSeqIndex((prev) => (prev + 1) % TIP_SEQUENCE.length);
|
|
84
|
+
}, animationSpeed);
|
|
85
|
+
return () => {
|
|
86
|
+
if (timerRef.current) clearInterval(timerRef.current);
|
|
87
|
+
};
|
|
88
|
+
}, [animationSpeed]);
|
|
89
|
+
const activeSet = arrowAt(TIP_SEQUENCE[seqIndex]);
|
|
90
|
+
const inactiveDotColor = lightTint(accentColor, 0.65);
|
|
91
|
+
return /* @__PURE__ */ jsxs(
|
|
92
|
+
motion2.button,
|
|
93
|
+
{
|
|
94
|
+
ref: buttonRef,
|
|
95
|
+
onClick,
|
|
96
|
+
whileHover: { scale: 1.03 },
|
|
97
|
+
whileTap: { scale: 0.97 },
|
|
98
|
+
className: `group relative inline-flex items-center rounded-[14px] border border-white/[0.06] shadow-[0_4px_24px_rgba(0,0,0,0.65)] cursor-pointer select-none ${className}`,
|
|
99
|
+
style: {
|
|
100
|
+
padding: "8px 28px 8px 8px",
|
|
101
|
+
backgroundColor: btnColor
|
|
102
|
+
},
|
|
103
|
+
children: [
|
|
104
|
+
/* @__PURE__ */ jsx2(
|
|
105
|
+
"div",
|
|
106
|
+
{
|
|
107
|
+
className: "relative flex items-center justify-center flex-shrink-0 overflow-hidden",
|
|
108
|
+
style: {
|
|
109
|
+
width: 58,
|
|
110
|
+
height: 58,
|
|
111
|
+
borderRadius: 10,
|
|
112
|
+
backgroundColor: accentColor,
|
|
113
|
+
marginRight: 18,
|
|
114
|
+
boxShadow: "inset 0 -2px 5px rgba(0,0,0,0.18)"
|
|
115
|
+
},
|
|
116
|
+
children: /* @__PURE__ */ jsx2("div", { style: { position: "relative", width: GRID_SIZE, height: GRID_SIZE }, children: Array.from({ length: DOT_COUNT }).map((_, i) => {
|
|
117
|
+
const row = Math.floor(i / 5);
|
|
118
|
+
const col = i % 5;
|
|
119
|
+
const isActive = activeSet.has(i);
|
|
120
|
+
return /* @__PURE__ */ jsx2(
|
|
121
|
+
motion2.div,
|
|
122
|
+
{
|
|
123
|
+
initial: false,
|
|
124
|
+
animate: {
|
|
125
|
+
backgroundColor: isActive ? "#ffffff" : inactiveDotColor,
|
|
126
|
+
opacity: isActive ? 1 : 0.72
|
|
127
|
+
},
|
|
128
|
+
transition: { duration: 0.08 },
|
|
129
|
+
style: {
|
|
130
|
+
position: "absolute",
|
|
131
|
+
width: DOT_SIZE,
|
|
132
|
+
height: DOT_SIZE,
|
|
133
|
+
left: col * (DOT_SIZE + GAP),
|
|
134
|
+
top: row * (DOT_SIZE + GAP),
|
|
135
|
+
borderRadius: 0
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
i
|
|
139
|
+
);
|
|
140
|
+
}) })
|
|
141
|
+
}
|
|
142
|
+
),
|
|
143
|
+
/* @__PURE__ */ jsx2(
|
|
144
|
+
"span",
|
|
145
|
+
{
|
|
146
|
+
className: "text-white whitespace-nowrap",
|
|
147
|
+
style: { fontSize: 17, fontWeight: 400, letterSpacing: "-0.2px" },
|
|
148
|
+
children: label
|
|
149
|
+
}
|
|
150
|
+
),
|
|
151
|
+
/* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute inset-0 rounded-[14px] bg-gradient-to-tr from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
|
|
152
|
+
/* @__PURE__ */ jsx2("div", { className: "absolute inset-[0.5px] rounded-[14px] border-t border-white/5 pointer-events-none" })
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
);
|
|
156
|
+
}
|
|
40
157
|
export {
|
|
41
|
-
Button1
|
|
158
|
+
Button1,
|
|
159
|
+
Dotlaunchbutton
|
|
42
160
|
};
|
|
43
161
|
//# sourceMappingURL=index.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@t7blocks/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -16,8 +16,12 @@
|
|
|
16
16
|
"react": "^18.0.0"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
+
"@tailwindcss/postcss": "^4.2.2",
|
|
19
20
|
"@types/react": "^18.0.0",
|
|
21
|
+
"@types/react-dom": "^19.2.3",
|
|
20
22
|
"framer-motion": "^12.38.0",
|
|
23
|
+
"postcss": "^8.5.9",
|
|
24
|
+
"tailwindcss": "^4.2.2",
|
|
21
25
|
"tsup": "^8.0.0",
|
|
22
26
|
"typescript": "^5.0.0",
|
|
23
27
|
"@t7blocks/typescript-config": "0.0.1"
|