@levo-so/studio 0.1.5 → 0.1.6
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/{Beams-DtdSaSPQ.js → Beams-sX-ed8H5.js} +40 -39
- package/dist/{Dots-BEdSVbPq.js → Dots-CIprNvGi.js} +30 -29
- package/dist/{Gradient-aW1lywfs.js → Gradient-DIn_uQLE.js} +12 -11
- package/dist/{Grid-B1ahCqzO.js → Grid-DXjfqDT3.js} +50 -49
- package/dist/Waves-CCDZf3yc.js +127 -0
- package/dist/{index-BvyenzyF.js → index-DXb2tXBX.js} +2243 -2523
- package/dist/index.js +11 -11
- package/package.json +1 -1
- package/dist/Waves-D0fyu0lc.js +0 -126
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import { cn as
|
|
5
|
-
|
|
2
|
+
import { jsx as C, jsxs as e } from "react/jsx-runtime";
|
|
3
|
+
import i from "react";
|
|
4
|
+
import { cn as f } from "@levo-so/react";
|
|
5
|
+
import { m as c } from "./index-DXb2tXBX.js";
|
|
6
|
+
const h = i.memo(
|
|
6
7
|
({
|
|
7
|
-
className:
|
|
8
|
+
className: a,
|
|
8
9
|
primaryColor: t = "#00ff00",
|
|
9
|
-
secondaryColor:
|
|
10
|
-
lineColor:
|
|
10
|
+
secondaryColor: n = "#ff0000",
|
|
11
|
+
lineColor: l = "#121212"
|
|
11
12
|
}) => {
|
|
12
|
-
const
|
|
13
|
+
const o = i.useMemo(
|
|
13
14
|
() => [
|
|
14
15
|
"M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875",
|
|
15
16
|
"M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867",
|
|
@@ -63,23 +64,23 @@ const f = r.memo(
|
|
|
63
64
|
"M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483"
|
|
64
65
|
],
|
|
65
66
|
[]
|
|
66
|
-
),
|
|
67
|
-
() =>
|
|
67
|
+
), s = i.useMemo(
|
|
68
|
+
() => o.map((r, M) => ({
|
|
68
69
|
duration: Math.random() * 10 + 10,
|
|
69
70
|
delay: Math.random() * 10,
|
|
70
71
|
endY: `${93 + Math.random() * 8}%`
|
|
71
72
|
})),
|
|
72
|
-
[
|
|
73
|
+
[o]
|
|
73
74
|
);
|
|
74
|
-
return /* @__PURE__ */ C
|
|
75
|
+
return /* @__PURE__ */ C(
|
|
75
76
|
"div",
|
|
76
77
|
{
|
|
77
|
-
className:
|
|
78
|
+
className: f(
|
|
78
79
|
"absolute inset-0 flex h-full w-full items-center justify-center [mask-repeat:no-repeat] [mask-size:40px]",
|
|
79
80
|
"z-[-1]",
|
|
80
|
-
|
|
81
|
+
a
|
|
81
82
|
),
|
|
82
|
-
children: /* @__PURE__ */
|
|
83
|
+
children: /* @__PURE__ */ e(
|
|
83
84
|
"svg",
|
|
84
85
|
{
|
|
85
86
|
className: "pointer-events-none absolute z-0 h-full w-full",
|
|
@@ -89,7 +90,7 @@ const f = r.memo(
|
|
|
89
90
|
fill: "none",
|
|
90
91
|
xmlns: "http://www.w3.org/2000/svg",
|
|
91
92
|
children: [
|
|
92
|
-
/* @__PURE__ */ C
|
|
93
|
+
/* @__PURE__ */ C(
|
|
93
94
|
"path",
|
|
94
95
|
{
|
|
95
96
|
d: "M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483M-30 -589C-30 -589 38 -184 502 -57C966 70 1034 475 1034 475M-23 -597C-23 -597 45 -192 509 -65C973 62 1041 467 1041 467M-16 -605C-16 -605 52 -200 516 -73C980 54 1048 459 1048 459M-9 -613C-9 -613 59 -208 523 -81C987 46 1055 451 1055 451M-2 -621C-2 -621 66 -216 530 -89C994 38 1062 443 1062 443M5 -629C5 -629 73 -224 537 -97C1001 30 1069 435 1069 435M12 -637C12 -637 80 -232 544 -105C1008 22 1076 427 1076 427M19 -645C19 -645 87 -240 551 -113C1015 14 1083 419 1083 419",
|
|
@@ -98,21 +99,21 @@ const f = r.memo(
|
|
|
98
99
|
strokeWidth: "0.5"
|
|
99
100
|
}
|
|
100
101
|
),
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
o.map((r, M) => /* @__PURE__ */ C(
|
|
103
|
+
c.path,
|
|
103
104
|
{
|
|
104
|
-
d:
|
|
105
|
+
d: r,
|
|
105
106
|
stroke: `url(#linearGradient-${M})`,
|
|
106
107
|
strokeOpacity: "0.4",
|
|
107
108
|
strokeWidth: "0.5"
|
|
108
109
|
},
|
|
109
110
|
"path-" + M
|
|
110
111
|
)),
|
|
111
|
-
/* @__PURE__ */
|
|
112
|
-
|
|
113
|
-
var
|
|
114
|
-
return /* @__PURE__ */
|
|
115
|
-
|
|
112
|
+
/* @__PURE__ */ e("defs", { children: [
|
|
113
|
+
o.map((r, M) => {
|
|
114
|
+
var p, d, m;
|
|
115
|
+
return /* @__PURE__ */ e(
|
|
116
|
+
c.linearGradient,
|
|
116
117
|
{
|
|
117
118
|
id: `linearGradient-${M}`,
|
|
118
119
|
initial: {
|
|
@@ -125,23 +126,23 @@ const f = r.memo(
|
|
|
125
126
|
x1: ["0%", "100%"],
|
|
126
127
|
x2: ["0%", "95%"],
|
|
127
128
|
y1: ["0%", "100%"],
|
|
128
|
-
y2: ["0%", ((
|
|
129
|
+
y2: ["0%", ((p = s[M]) == null ? void 0 : p.endY) || "100%"]
|
|
129
130
|
},
|
|
130
131
|
transition: {
|
|
131
|
-
duration: ((
|
|
132
|
+
duration: ((d = s[M]) == null ? void 0 : d.duration) || 15,
|
|
132
133
|
ease: "easeInOut",
|
|
133
134
|
repeat: 1 / 0,
|
|
134
|
-
delay: ((
|
|
135
|
+
delay: ((m = s[M]) == null ? void 0 : m.delay) || 0
|
|
135
136
|
},
|
|
136
137
|
children: [
|
|
137
|
-
/* @__PURE__ */ C
|
|
138
|
-
/* @__PURE__ */ C
|
|
139
|
-
/* @__PURE__ */ C
|
|
140
|
-
/* @__PURE__ */ C
|
|
138
|
+
/* @__PURE__ */ C("stop", { stopColor: t, stopOpacity: "0" }),
|
|
139
|
+
/* @__PURE__ */ C("stop", { stopColor: t }),
|
|
140
|
+
/* @__PURE__ */ C("stop", { offset: "32.5%", stopColor: n }),
|
|
141
|
+
/* @__PURE__ */ C(
|
|
141
142
|
"stop",
|
|
142
143
|
{
|
|
143
144
|
offset: "100%",
|
|
144
|
-
stopColor:
|
|
145
|
+
stopColor: n,
|
|
145
146
|
stopOpacity: "0"
|
|
146
147
|
}
|
|
147
148
|
)
|
|
@@ -150,7 +151,7 @@ const f = r.memo(
|
|
|
150
151
|
`gradient-${M}`
|
|
151
152
|
);
|
|
152
153
|
}),
|
|
153
|
-
/* @__PURE__ */
|
|
154
|
+
/* @__PURE__ */ e(
|
|
154
155
|
"radialGradient",
|
|
155
156
|
{
|
|
156
157
|
id: "paint0_radial_242_278",
|
|
@@ -160,9 +161,9 @@ const f = r.memo(
|
|
|
160
161
|
gradientUnits: "userSpaceOnUse",
|
|
161
162
|
gradientTransform: "translate(352 34) rotate(90) scale(555 1560.62)",
|
|
162
163
|
children: [
|
|
163
|
-
/* @__PURE__ */ C
|
|
164
|
-
/* @__PURE__ */ C
|
|
165
|
-
/* @__PURE__ */ C
|
|
164
|
+
/* @__PURE__ */ C("stop", { offset: "0.0666667", stopColor: l }),
|
|
165
|
+
/* @__PURE__ */ C("stop", { offset: "0.243243", stopColor: l }),
|
|
166
|
+
/* @__PURE__ */ C("stop", { offset: "0.43594", stopColor: "white", stopOpacity: "0" })
|
|
166
167
|
]
|
|
167
168
|
}
|
|
168
169
|
)
|
|
@@ -174,9 +175,9 @@ const f = r.memo(
|
|
|
174
175
|
);
|
|
175
176
|
},
|
|
176
177
|
// Custom comparison function for better memoization
|
|
177
|
-
(
|
|
178
|
+
(a, t) => a.className === t.className && a.primaryColor === t.primaryColor && a.secondaryColor === t.secondaryColor && a.lineColor === t.lineColor
|
|
178
179
|
);
|
|
179
|
-
|
|
180
|
+
h.displayName = "BackgroundBeams";
|
|
180
181
|
export {
|
|
181
|
-
|
|
182
|
+
h as BackgroundBeams
|
|
182
183
|
};
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx as a, jsxs as x } from "react/jsx-runtime";
|
|
3
3
|
import c from "react";
|
|
4
4
|
import { cn as o } from "@levo-so/react";
|
|
5
|
-
|
|
5
|
+
import { m as $ } from "./index-DXb2tXBX.js";
|
|
6
|
+
const M = c.memo(
|
|
6
7
|
({
|
|
7
8
|
className: l,
|
|
8
9
|
dotColor: i = "#00ff00",
|
|
9
10
|
dotSize: h = 2,
|
|
10
11
|
spacing: t = 30,
|
|
11
|
-
isAnimated:
|
|
12
|
+
isAnimated: m = !1,
|
|
12
13
|
speed: d = 1
|
|
13
14
|
}) => {
|
|
14
|
-
const
|
|
15
|
+
const r = c.useMemo(
|
|
15
16
|
() => ({
|
|
16
17
|
cx: t / 2,
|
|
17
18
|
cy: t / 2,
|
|
@@ -20,24 +21,24 @@ const j = c.memo(
|
|
|
20
21
|
height: t
|
|
21
22
|
}),
|
|
22
23
|
[t, h]
|
|
23
|
-
),
|
|
24
|
+
), u = c.useMemo(
|
|
24
25
|
() => `dots-pattern-${Math.random().toString(36).substr(2, 9)}`,
|
|
25
26
|
[]
|
|
26
27
|
), f = c.useMemo(() => {
|
|
27
|
-
if (!
|
|
28
|
-
const e = [],
|
|
29
|
-
for (let n = 0; n <
|
|
30
|
-
for (let
|
|
28
|
+
if (!m) return [];
|
|
29
|
+
const e = [], y = Math.ceil(100 / (t / 10)), w = Math.ceil(100 / (t / 10));
|
|
30
|
+
for (let n = 0; n < y; n++)
|
|
31
|
+
for (let s = 0; s < w; s++)
|
|
31
32
|
e.push({
|
|
32
|
-
id: `${n}-${
|
|
33
|
-
x:
|
|
33
|
+
id: `${n}-${s}`,
|
|
34
|
+
x: s * t / 10 + Math.random() * 5,
|
|
34
35
|
y: n * t / 10 + Math.random() * 5,
|
|
35
36
|
delay: Math.random() * 3,
|
|
36
37
|
amplitude: 2 + Math.random() * 3
|
|
37
38
|
});
|
|
38
39
|
return e;
|
|
39
|
-
}, [
|
|
40
|
-
return
|
|
40
|
+
}, [m, t]);
|
|
41
|
+
return m ? /* @__PURE__ */ a(
|
|
41
42
|
"div",
|
|
42
43
|
{
|
|
43
44
|
className: o(
|
|
@@ -45,15 +46,15 @@ const j = c.memo(
|
|
|
45
46
|
"z-[-1]",
|
|
46
47
|
l
|
|
47
48
|
),
|
|
48
|
-
children: /* @__PURE__ */
|
|
49
|
+
children: /* @__PURE__ */ a(
|
|
49
50
|
"svg",
|
|
50
51
|
{
|
|
51
52
|
className: "pointer-events-none absolute z-0 h-full w-full",
|
|
52
53
|
width: "100%",
|
|
53
54
|
height: "100%",
|
|
54
55
|
xmlns: "http://www.w3.org/2000/svg",
|
|
55
|
-
children: f.map((e) => /* @__PURE__ */
|
|
56
|
-
|
|
56
|
+
children: f.map((e) => /* @__PURE__ */ a(
|
|
57
|
+
$.circle,
|
|
57
58
|
{
|
|
58
59
|
cx: `${e.x}%`,
|
|
59
60
|
cy: `${e.y}%`,
|
|
@@ -87,7 +88,7 @@ const j = c.memo(
|
|
|
87
88
|
}
|
|
88
89
|
)
|
|
89
90
|
}
|
|
90
|
-
) : /* @__PURE__ */
|
|
91
|
+
) : /* @__PURE__ */ a(
|
|
91
92
|
"div",
|
|
92
93
|
{
|
|
93
94
|
className: o(
|
|
@@ -95,7 +96,7 @@ const j = c.memo(
|
|
|
95
96
|
"z-[-1]",
|
|
96
97
|
l
|
|
97
98
|
),
|
|
98
|
-
children: /* @__PURE__ */
|
|
99
|
+
children: /* @__PURE__ */ x(
|
|
99
100
|
"svg",
|
|
100
101
|
{
|
|
101
102
|
className: "pointer-events-none absolute z-0 h-full w-full",
|
|
@@ -103,27 +104,27 @@ const j = c.memo(
|
|
|
103
104
|
height: "100%",
|
|
104
105
|
xmlns: "http://www.w3.org/2000/svg",
|
|
105
106
|
children: [
|
|
106
|
-
/* @__PURE__ */
|
|
107
|
+
/* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a(
|
|
107
108
|
"pattern",
|
|
108
109
|
{
|
|
109
|
-
id:
|
|
110
|
+
id: u,
|
|
110
111
|
x: "0",
|
|
111
112
|
y: "0",
|
|
112
|
-
width:
|
|
113
|
-
height:
|
|
113
|
+
width: r.width,
|
|
114
|
+
height: r.height,
|
|
114
115
|
patternUnits: "userSpaceOnUse",
|
|
115
|
-
children: /* @__PURE__ */
|
|
116
|
+
children: /* @__PURE__ */ a(
|
|
116
117
|
"circle",
|
|
117
118
|
{
|
|
118
|
-
cx:
|
|
119
|
-
cy:
|
|
120
|
-
r:
|
|
119
|
+
cx: r.cx,
|
|
120
|
+
cy: r.cy,
|
|
121
|
+
r: r.r,
|
|
121
122
|
fill: i
|
|
122
123
|
}
|
|
123
124
|
)
|
|
124
125
|
}
|
|
125
126
|
) }),
|
|
126
|
-
/* @__PURE__ */
|
|
127
|
+
/* @__PURE__ */ a("rect", { width: "100%", height: "100%", fill: `url(#${u})` })
|
|
127
128
|
]
|
|
128
129
|
}
|
|
129
130
|
)
|
|
@@ -133,7 +134,7 @@ const j = c.memo(
|
|
|
133
134
|
// Custom comparison function for better memoization
|
|
134
135
|
(l, i) => l.className === i.className && l.dotColor === i.dotColor && l.dotSize === i.dotSize && l.spacing === i.spacing && l.isAnimated === i.isAnimated && l.speed === i.speed
|
|
135
136
|
);
|
|
136
|
-
|
|
137
|
+
M.displayName = "BackgroundDots";
|
|
137
138
|
export {
|
|
138
|
-
|
|
139
|
+
M as BackgroundDots
|
|
139
140
|
};
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import r from "react";
|
|
4
4
|
import { cn as o } from "@levo-so/react";
|
|
5
|
-
|
|
5
|
+
import { m as l } from "./index-DXb2tXBX.js";
|
|
6
|
+
const s = r.memo(
|
|
6
7
|
({
|
|
7
8
|
className: t,
|
|
8
|
-
fromColor:
|
|
9
|
-
toColor:
|
|
9
|
+
fromColor: i = "#ff0000",
|
|
10
|
+
toColor: a = "#00ff00",
|
|
10
11
|
direction: n = "45deg"
|
|
11
|
-
}) => /* @__PURE__ */ e
|
|
12
|
+
}) => /* @__PURE__ */ e(
|
|
12
13
|
"div",
|
|
13
14
|
{
|
|
14
15
|
className: o(
|
|
@@ -16,12 +17,12 @@ const l = s.memo(
|
|
|
16
17
|
"z-[-1]",
|
|
17
18
|
t
|
|
18
19
|
),
|
|
19
|
-
children: /* @__PURE__ */ e
|
|
20
|
-
|
|
20
|
+
children: /* @__PURE__ */ e(
|
|
21
|
+
l.div,
|
|
21
22
|
{
|
|
22
23
|
className: "absolute inset-0 h-full w-full",
|
|
23
24
|
style: {
|
|
24
|
-
background: `linear-gradient(${n}, ${
|
|
25
|
+
background: `linear-gradient(${n}, ${i}, ${a})`
|
|
25
26
|
},
|
|
26
27
|
initial: { opacity: 0.8 },
|
|
27
28
|
animate: { opacity: [0.8, 0.9, 0.8] },
|
|
@@ -35,7 +36,7 @@ const l = s.memo(
|
|
|
35
36
|
}
|
|
36
37
|
)
|
|
37
38
|
);
|
|
38
|
-
|
|
39
|
+
s.displayName = "BackgroundGradient";
|
|
39
40
|
export {
|
|
40
|
-
|
|
41
|
+
s as BackgroundGradient
|
|
41
42
|
};
|
|
@@ -1,79 +1,80 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
2
|
+
import { jsx as r, jsxs as v } from "react/jsx-runtime";
|
|
3
|
+
import a from "react";
|
|
4
4
|
import { cn as f } from "@levo-so/react";
|
|
5
|
-
|
|
5
|
+
import { m as n } from "./index-DXb2tXBX.js";
|
|
6
|
+
const x = a.memo(
|
|
6
7
|
({
|
|
7
|
-
className:
|
|
8
|
+
className: t,
|
|
8
9
|
lineColor: e = "#333333",
|
|
9
|
-
lineWidth:
|
|
10
|
-
spacing:
|
|
10
|
+
lineWidth: i = 1,
|
|
11
|
+
spacing: l = 50,
|
|
11
12
|
// Interactive mode props
|
|
12
13
|
isInteractive: w = !1,
|
|
13
|
-
hoverColor:
|
|
14
|
+
hoverColor: s = "#93c5fd",
|
|
14
15
|
rows: d = 150,
|
|
15
16
|
cols: c = 100
|
|
16
17
|
}) => {
|
|
17
|
-
const
|
|
18
|
+
const y = a.useMemo(() => new Array(d).fill(1), [d]), $ = a.useMemo(() => new Array(c).fill(1), [c]), o = a.useMemo(
|
|
18
19
|
() => ({
|
|
19
20
|
rowStyle: {
|
|
20
|
-
height: `${
|
|
21
|
-
width: `${
|
|
22
|
-
borderLeft: `${
|
|
21
|
+
height: `${l}px`,
|
|
22
|
+
width: `${l * 2}px`,
|
|
23
|
+
borderLeft: `${i}px solid ${e}`
|
|
23
24
|
},
|
|
24
25
|
colStyle: {
|
|
25
|
-
height: `${
|
|
26
|
-
width: `${
|
|
27
|
-
borderTop: `${
|
|
28
|
-
borderRight: `${
|
|
26
|
+
height: `${l}px`,
|
|
27
|
+
width: `${l * 2}px`,
|
|
28
|
+
borderTop: `${i}px solid ${e}`,
|
|
29
|
+
borderRight: `${i}px solid ${e}`
|
|
29
30
|
},
|
|
30
31
|
iconStyle: {
|
|
31
|
-
top: `${-
|
|
32
|
-
left: `${-
|
|
32
|
+
top: `${-l / 3.8}px`,
|
|
33
|
+
left: `${-l / 2.4}px`,
|
|
33
34
|
color: e
|
|
34
35
|
}
|
|
35
36
|
}),
|
|
36
|
-
[
|
|
37
|
-
), h =
|
|
37
|
+
[l, i, e]
|
|
38
|
+
), h = a.useMemo(
|
|
38
39
|
() => ({
|
|
39
40
|
hover: {
|
|
40
|
-
backgroundColor:
|
|
41
|
+
backgroundColor: s,
|
|
41
42
|
transition: { duration: 0 }
|
|
42
43
|
},
|
|
43
44
|
animate: {
|
|
44
45
|
transition: { duration: 2 }
|
|
45
46
|
}
|
|
46
47
|
}),
|
|
47
|
-
[
|
|
48
|
+
[s]
|
|
48
49
|
);
|
|
49
|
-
return w ? /* @__PURE__ */
|
|
50
|
+
return w ? /* @__PURE__ */ r(
|
|
50
51
|
"div",
|
|
51
52
|
{
|
|
52
53
|
className: f(
|
|
53
54
|
"absolute inset-0 flex h-full w-full items-center justify-center overflow-hidden",
|
|
54
55
|
"z-[-1]",
|
|
55
|
-
|
|
56
|
+
t
|
|
56
57
|
),
|
|
57
|
-
children: /* @__PURE__ */
|
|
58
|
+
children: /* @__PURE__ */ r(
|
|
58
59
|
"div",
|
|
59
60
|
{
|
|
60
61
|
style: {
|
|
61
62
|
transform: "translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)"
|
|
62
63
|
},
|
|
63
64
|
className: "absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
|
|
64
|
-
children:
|
|
65
|
-
|
|
65
|
+
children: y.map((g, m) => /* @__PURE__ */ r(
|
|
66
|
+
n.div,
|
|
66
67
|
{
|
|
67
68
|
className: "relative",
|
|
68
|
-
style:
|
|
69
|
-
children:
|
|
70
|
-
|
|
69
|
+
style: o.rowStyle,
|
|
70
|
+
children: $.map((k, u) => /* @__PURE__ */ r(
|
|
71
|
+
n.div,
|
|
71
72
|
{
|
|
72
73
|
whileHover: h.hover,
|
|
73
74
|
animate: h.animate,
|
|
74
75
|
className: "relative",
|
|
75
|
-
style:
|
|
76
|
-
children:
|
|
76
|
+
style: o.colStyle,
|
|
77
|
+
children: u % 2 === 0 && m % 2 === 0 ? /* @__PURE__ */ r(
|
|
77
78
|
"svg",
|
|
78
79
|
{
|
|
79
80
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -82,8 +83,8 @@ const j = i.memo(
|
|
|
82
83
|
strokeWidth: "1.5",
|
|
83
84
|
stroke: "currentColor",
|
|
84
85
|
className: "pointer-events-none absolute h-6 w-10 stroke-[1px]",
|
|
85
|
-
style:
|
|
86
|
-
children: /* @__PURE__ */
|
|
86
|
+
style: o.iconStyle,
|
|
87
|
+
children: /* @__PURE__ */ r(
|
|
87
88
|
"path",
|
|
88
89
|
{
|
|
89
90
|
strokeLinecap: "round",
|
|
@@ -94,23 +95,23 @@ const j = i.memo(
|
|
|
94
95
|
}
|
|
95
96
|
) : null
|
|
96
97
|
},
|
|
97
|
-
`col-${
|
|
98
|
+
`col-${u}`
|
|
98
99
|
))
|
|
99
100
|
},
|
|
100
|
-
`row-${
|
|
101
|
+
`row-${m}`
|
|
101
102
|
))
|
|
102
103
|
}
|
|
103
104
|
)
|
|
104
105
|
}
|
|
105
|
-
) : /* @__PURE__ */
|
|
106
|
+
) : /* @__PURE__ */ r(
|
|
106
107
|
"div",
|
|
107
108
|
{
|
|
108
109
|
className: f(
|
|
109
110
|
"absolute inset-0 flex h-full w-full items-center justify-center",
|
|
110
111
|
"z-[-1]",
|
|
111
|
-
|
|
112
|
+
t
|
|
112
113
|
),
|
|
113
|
-
children: /* @__PURE__ */
|
|
114
|
+
children: /* @__PURE__ */ v(
|
|
114
115
|
"svg",
|
|
115
116
|
{
|
|
116
117
|
className: "pointer-events-none absolute z-0 h-full w-full",
|
|
@@ -118,22 +119,22 @@ const j = i.memo(
|
|
|
118
119
|
height: "100%",
|
|
119
120
|
xmlns: "http://www.w3.org/2000/svg",
|
|
120
121
|
children: [
|
|
121
|
-
/* @__PURE__ */
|
|
122
|
+
/* @__PURE__ */ r("defs", { children: /* @__PURE__ */ r(
|
|
122
123
|
"pattern",
|
|
123
124
|
{
|
|
124
125
|
id: "grid-pattern",
|
|
125
126
|
x: "0",
|
|
126
127
|
y: "0",
|
|
127
|
-
width:
|
|
128
|
-
height:
|
|
128
|
+
width: l,
|
|
129
|
+
height: l,
|
|
129
130
|
patternUnits: "userSpaceOnUse",
|
|
130
|
-
children: /* @__PURE__ */
|
|
131
|
-
|
|
131
|
+
children: /* @__PURE__ */ r(
|
|
132
|
+
n.path,
|
|
132
133
|
{
|
|
133
|
-
d: `M ${
|
|
134
|
+
d: `M ${l} 0 L 0 0 0 ${l}`,
|
|
134
135
|
fill: "none",
|
|
135
136
|
stroke: e,
|
|
136
|
-
strokeWidth:
|
|
137
|
+
strokeWidth: i,
|
|
137
138
|
initial: { opacity: 0.2 },
|
|
138
139
|
animate: { opacity: [0.2, 0.5, 0.2] },
|
|
139
140
|
transition: {
|
|
@@ -145,7 +146,7 @@ const j = i.memo(
|
|
|
145
146
|
)
|
|
146
147
|
}
|
|
147
148
|
) }),
|
|
148
|
-
/* @__PURE__ */
|
|
149
|
+
/* @__PURE__ */ r("rect", { width: "100%", height: "100%", fill: "url(#grid-pattern)" })
|
|
149
150
|
]
|
|
150
151
|
}
|
|
151
152
|
)
|
|
@@ -153,9 +154,9 @@ const j = i.memo(
|
|
|
153
154
|
);
|
|
154
155
|
},
|
|
155
156
|
// Custom comparison function for better memoization
|
|
156
|
-
(
|
|
157
|
+
(t, e) => t.className === e.className && t.lineColor === e.lineColor && t.lineWidth === e.lineWidth && t.spacing === e.spacing && t.isInteractive === e.isInteractive && t.hoverColor === e.hoverColor && t.rows === e.rows && t.cols === e.cols
|
|
157
158
|
);
|
|
158
|
-
|
|
159
|
+
x.displayName = "BackgroundGrid";
|
|
159
160
|
export {
|
|
160
|
-
|
|
161
|
+
x as BackgroundGrid
|
|
161
162
|
};
|