border-beam 1.0.1

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.
Files changed (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +154 -0
  3. package/dist/index.cjs.js +663 -0
  4. package/dist/index.d.ts +169 -0
  5. package/dist/index.es.js +1365 -0
  6. package/package.json +64 -0
package/dist/index.es.js ADDED
@@ -0,0 +1,1365 @@
1
+ import { jsxs as Q, Fragment as oe, jsx as V } from "react/jsx-runtime";
2
+ import { forwardRef as te, useId as se, useRef as ie, useState as O, useEffect as L, useCallback as q, useMemo as ne } from "react";
3
+ const ce = {
4
+ sm: {
5
+ borderRadius: 18,
6
+ borderWidth: 1,
7
+ width: 70,
8
+ height: 36
9
+ },
10
+ md: {
11
+ borderRadius: 16,
12
+ borderWidth: 1
13
+ },
14
+ line: {
15
+ borderRadius: 16,
16
+ borderWidth: 1
17
+ }
18
+ }, I = {
19
+ sm: {
20
+ dark: {
21
+ strokeOpacity: 0.48,
22
+ innerOpacity: 0.7,
23
+ bloomOpacity: 0.8,
24
+ innerShadow: "rgba(255, 255, 255, 0.3)",
25
+ saturation: 1.2
26
+ },
27
+ light: {
28
+ strokeOpacity: 0.33,
29
+ innerOpacity: 0.46,
30
+ bloomOpacity: 0.54,
31
+ innerShadow: "rgba(0, 0, 0, 0.14)",
32
+ saturation: 0.96
33
+ }
34
+ },
35
+ md: {
36
+ dark: {
37
+ strokeOpacity: 0.48,
38
+ innerOpacity: 0.7,
39
+ bloomOpacity: 0.8,
40
+ innerShadow: "rgba(255, 255, 255, 0.27)",
41
+ saturation: 1.2
42
+ },
43
+ light: {
44
+ strokeOpacity: 0.33,
45
+ innerOpacity: 0.46,
46
+ bloomOpacity: 0.54,
47
+ innerShadow: "rgba(0, 0, 0, 0.14)",
48
+ saturation: 0.96
49
+ }
50
+ },
51
+ line: {
52
+ dark: {
53
+ strokeOpacity: 0.72,
54
+ innerOpacity: 0.7,
55
+ bloomOpacity: 0.8,
56
+ innerShadow: "rgba(255, 255, 255, 0.1)",
57
+ saturation: 1.2
58
+ },
59
+ light: {
60
+ strokeOpacity: 0.72,
61
+ innerOpacity: 0.7,
62
+ bloomOpacity: 0.8,
63
+ innerShadow: "rgba(0, 0, 0, 0.14)",
64
+ saturation: 1.2
65
+ }
66
+ }
67
+ }, Fe = {
68
+ dark: { ...I.md.dark },
69
+ light: { ...I.md.light }
70
+ }, B = {
71
+ colorful: {
72
+ border: [
73
+ { color: "rgb(255, 50, 100)", pos: "33% -7.4%", size: "70px 40px" },
74
+ { color: "rgb(40, 140, 255)", pos: "12% -5%", size: "60px 35px" },
75
+ { color: "rgb(50, 200, 80)", pos: "2.1% 68.3%", size: "40px 70px" },
76
+ { color: "rgb(30, 185, 170)", pos: "2.1% 68.3%", size: "20px 35px" },
77
+ { color: "rgb(100, 70, 255)", pos: "74.4% 100%", size: "180px 32px" },
78
+ { color: "rgb(40, 140, 255)", pos: "55% 100%", size: "85px 26px" },
79
+ { color: "rgb(255, 120, 40)", pos: "93.9% 0%", size: "74px 32px" },
80
+ { color: "rgb(240, 50, 180)", pos: "100% 27.1%", size: "26px 42px" },
81
+ { color: "rgb(180, 40, 240)", pos: "100% 27.1%", size: "52px 48px" }
82
+ ],
83
+ spike: { primary: "rgb(255, 60, 80)", secondary: "rgba(40, 190, 180, 0.98)" },
84
+ spikeLt: { primary: "rgb(200, 30, 60)", secondary: "rgb(20, 150, 140)" }
85
+ },
86
+ mono: {
87
+ border: [
88
+ { color: "rgb(180, 180, 180)", pos: "33% -7.4%", size: "70px 40px" },
89
+ { color: "rgb(140, 140, 140)", pos: "12% -5%", size: "60px 35px" },
90
+ { color: "rgb(160, 160, 160)", pos: "2.1% 68.3%", size: "40px 70px" },
91
+ { color: "rgb(130, 130, 130)", pos: "2.1% 68.3%", size: "20px 35px" },
92
+ { color: "rgb(170, 170, 170)", pos: "74.4% 100%", size: "180px 32px" },
93
+ { color: "rgb(150, 150, 150)", pos: "55% 100%", size: "85px 26px" },
94
+ { color: "rgb(190, 190, 190)", pos: "93.9% 0%", size: "74px 32px" },
95
+ { color: "rgb(145, 145, 145)", pos: "100% 27.1%", size: "26px 42px" },
96
+ { color: "rgb(165, 165, 165)", pos: "100% 27.1%", size: "52px 48px" }
97
+ ],
98
+ spike: { primary: "rgb(200, 200, 200)", secondary: "rgb(170, 170, 170)" },
99
+ spikeLt: { primary: "rgb(80, 80, 80)", secondary: "rgb(120, 120, 120)" }
100
+ },
101
+ ocean: {
102
+ border: [
103
+ { color: "rgb(100, 80, 220)", pos: "33% -7.4%", size: "70px 40px" },
104
+ { color: "rgb(60, 120, 255)", pos: "12% -5%", size: "60px 35px" },
105
+ { color: "rgb(80, 100, 200)", pos: "2.1% 68.3%", size: "40px 70px" },
106
+ { color: "rgb(50, 140, 220)", pos: "2.1% 68.3%", size: "20px 35px" },
107
+ { color: "rgb(120, 80, 255)", pos: "74.4% 100%", size: "180px 32px" },
108
+ { color: "rgb(70, 130, 255)", pos: "55% 100%", size: "85px 26px" },
109
+ { color: "rgb(140, 100, 240)", pos: "93.9% 0%", size: "74px 32px" },
110
+ { color: "rgb(90, 110, 230)", pos: "100% 27.1%", size: "26px 42px" },
111
+ { color: "rgb(130, 70, 255)", pos: "100% 27.1%", size: "52px 48px" }
112
+ ],
113
+ spike: { primary: "rgb(100, 120, 255)", secondary: "rgba(130, 100, 220, 0.98)" },
114
+ spikeLt: { primary: "rgb(60, 60, 180)", secondary: "rgb(80, 100, 200)" }
115
+ },
116
+ sunset: {
117
+ border: [
118
+ { color: "rgb(255, 80, 50)", pos: "33% -7.4%", size: "70px 40px" },
119
+ { color: "rgb(255, 160, 40)", pos: "12% -5%", size: "60px 35px" },
120
+ { color: "rgb(255, 120, 60)", pos: "2.1% 68.3%", size: "40px 70px" },
121
+ { color: "rgb(255, 200, 50)", pos: "2.1% 68.3%", size: "20px 35px" },
122
+ { color: "rgb(255, 100, 80)", pos: "74.4% 100%", size: "180px 32px" },
123
+ { color: "rgb(255, 180, 60)", pos: "55% 100%", size: "85px 26px" },
124
+ { color: "rgb(255, 60, 60)", pos: "93.9% 0%", size: "74px 32px" },
125
+ { color: "rgb(255, 140, 50)", pos: "100% 27.1%", size: "26px 42px" },
126
+ { color: "rgb(255, 90, 70)", pos: "100% 27.1%", size: "52px 48px" }
127
+ ],
128
+ spike: { primary: "rgb(255, 140, 80)", secondary: "rgba(255, 100, 60, 0.98)" },
129
+ spikeLt: { primary: "rgb(200, 80, 40)", secondary: "rgb(220, 120, 30)" }
130
+ }
131
+ }, A = {
132
+ colorful: {
133
+ border: [
134
+ { color: "rgb(50, 200, 80)", pos: "2% 68%", size: "9px 18px" },
135
+ { color: "rgb(30, 185, 170)", pos: "2% 68%", size: "4px 8px" },
136
+ { color: "rgb(255, 120, 40)", pos: "72% -3%", size: "59px 9px" },
137
+ { color: "rgb(100, 70, 255)", pos: "74% 100%", size: "42px 7px" },
138
+ { color: "rgb(240, 50, 180)", pos: "100% 27%", size: "10px 17px" },
139
+ { color: "rgb(180, 40, 240)", pos: "100% 27%", size: "10px 18px" },
140
+ { color: "rgb(40, 140, 255)", pos: "100% 27%", size: "5px 10px" },
141
+ { color: "rgb(255, 50, 100)", pos: "100% 27%", size: "11px 12px" }
142
+ ],
143
+ inner: [
144
+ { color: "rgba(50, 200, 80, 0.5)", pos: "2% 68%", size: "9px 18px" },
145
+ { color: "rgba(30, 185, 170, 0.45)", pos: "2% 68%", size: "4px 8px" },
146
+ { color: "rgba(255, 120, 40, 0.35)", pos: "72% -3%", size: "59px 9px" },
147
+ { color: "rgba(100, 70, 255, 0.35)", pos: "74% 100%", size: "42px 7px" },
148
+ { color: "rgba(240, 50, 180, 0.3)", pos: "100% 27%", size: "10px 17px" },
149
+ { color: "rgba(180, 40, 240, 0.4)", pos: "100% 27%", size: "10px 18px" },
150
+ { color: "rgba(40, 140, 255, 0.3)", pos: "100% 27%", size: "5px 10px" },
151
+ { color: "rgba(255, 50, 100, 0.3)", pos: "100% 27%", size: "11px 12px" }
152
+ ]
153
+ },
154
+ mono: {
155
+ border: [
156
+ { color: "rgb(160, 160, 160)", pos: "2% 68%", size: "9px 18px" },
157
+ { color: "rgb(140, 140, 140)", pos: "2% 68%", size: "4px 8px" },
158
+ { color: "rgb(180, 180, 180)", pos: "72% -3%", size: "59px 9px" },
159
+ { color: "rgb(150, 150, 150)", pos: "74% 100%", size: "42px 7px" },
160
+ { color: "rgb(170, 170, 170)", pos: "100% 27%", size: "10px 17px" },
161
+ { color: "rgb(155, 155, 155)", pos: "100% 27%", size: "10px 18px" },
162
+ { color: "rgb(145, 145, 145)", pos: "100% 27%", size: "5px 10px" },
163
+ { color: "rgb(165, 165, 165)", pos: "100% 27%", size: "11px 12px" }
164
+ ],
165
+ inner: [
166
+ { color: "rgba(160, 160, 160, 0.25)", pos: "2% 68%", size: "9px 18px" },
167
+ { color: "rgba(140, 140, 140, 0.22)", pos: "2% 68%", size: "4px 8px" },
168
+ { color: "rgba(180, 180, 180, 0.17)", pos: "72% -3%", size: "59px 9px" },
169
+ { color: "rgba(150, 150, 150, 0.17)", pos: "74% 100%", size: "42px 7px" },
170
+ { color: "rgba(170, 170, 170, 0.15)", pos: "100% 27%", size: "10px 17px" },
171
+ { color: "rgba(155, 155, 155, 0.20)", pos: "100% 27%", size: "10px 18px" },
172
+ { color: "rgba(145, 145, 145, 0.15)", pos: "100% 27%", size: "5px 10px" },
173
+ { color: "rgba(165, 165, 165, 0.15)", pos: "100% 27%", size: "11px 12px" }
174
+ ]
175
+ },
176
+ ocean: {
177
+ border: [
178
+ { color: "rgb(60, 140, 200)", pos: "2% 68%", size: "9px 18px" },
179
+ { color: "rgb(50, 120, 180)", pos: "2% 68%", size: "4px 8px" },
180
+ { color: "rgb(100, 80, 220)", pos: "72% -3%", size: "59px 9px" },
181
+ { color: "rgb(80, 100, 255)", pos: "74% 100%", size: "42px 7px" },
182
+ { color: "rgb(120, 70, 240)", pos: "100% 27%", size: "10px 17px" },
183
+ { color: "rgb(90, 80, 220)", pos: "100% 27%", size: "10px 18px" },
184
+ { color: "rgb(70, 110, 255)", pos: "100% 27%", size: "5px 10px" },
185
+ { color: "rgb(110, 90, 230)", pos: "100% 27%", size: "11px 12px" }
186
+ ],
187
+ inner: [
188
+ { color: "rgba(60, 140, 200, 0.5)", pos: "2% 68%", size: "9px 18px" },
189
+ { color: "rgba(50, 120, 180, 0.45)", pos: "2% 68%", size: "4px 8px" },
190
+ { color: "rgba(100, 80, 220, 0.35)", pos: "72% -3%", size: "59px 9px" },
191
+ { color: "rgba(80, 100, 255, 0.35)", pos: "74% 100%", size: "42px 7px" },
192
+ { color: "rgba(120, 70, 240, 0.3)", pos: "100% 27%", size: "10px 17px" },
193
+ { color: "rgba(90, 80, 220, 0.4)", pos: "100% 27%", size: "10px 18px" },
194
+ { color: "rgba(70, 110, 255, 0.3)", pos: "100% 27%", size: "5px 10px" },
195
+ { color: "rgba(110, 90, 230, 0.3)", pos: "100% 27%", size: "11px 12px" }
196
+ ]
197
+ },
198
+ sunset: {
199
+ border: [
200
+ { color: "rgb(255, 180, 50)", pos: "2% 68%", size: "9px 18px" },
201
+ { color: "rgb(255, 150, 40)", pos: "2% 68%", size: "4px 8px" },
202
+ { color: "rgb(255, 80, 60)", pos: "72% -3%", size: "59px 9px" },
203
+ { color: "rgb(255, 100, 80)", pos: "74% 100%", size: "42px 7px" },
204
+ { color: "rgb(255, 60, 80)", pos: "100% 27%", size: "10px 17px" },
205
+ { color: "rgb(255, 120, 60)", pos: "100% 27%", size: "10px 18px" },
206
+ { color: "rgb(255, 200, 50)", pos: "100% 27%", size: "5px 10px" },
207
+ { color: "rgb(255, 90, 70)", pos: "100% 27%", size: "11px 12px" }
208
+ ],
209
+ inner: [
210
+ { color: "rgba(255, 180, 50, 0.5)", pos: "2% 68%", size: "9px 18px" },
211
+ { color: "rgba(255, 150, 40, 0.45)", pos: "2% 68%", size: "4px 8px" },
212
+ { color: "rgba(255, 80, 60, 0.35)", pos: "72% -3%", size: "59px 9px" },
213
+ { color: "rgba(255, 100, 80, 0.35)", pos: "74% 100%", size: "42px 7px" },
214
+ { color: "rgba(255, 60, 80, 0.3)", pos: "100% 27%", size: "10px 17px" },
215
+ { color: "rgba(255, 120, 60, 0.4)", pos: "100% 27%", size: "10px 18px" },
216
+ { color: "rgba(255, 200, 50, 0.3)", pos: "100% 27%", size: "5px 10px" },
217
+ { color: "rgba(255, 90, 70, 0.3)", pos: "100% 27%", size: "11px 12px" }
218
+ ]
219
+ }
220
+ };
221
+ function pe(r) {
222
+ return A[r].border.map((a) => `radial-gradient(ellipse ${a.size} at ${a.pos}, ${a.color}, transparent)`).join(`,
223
+ `);
224
+ }
225
+ function le(r) {
226
+ return A[r].inner.map((a) => `radial-gradient(ellipse ${a.size} at ${a.pos}, ${a.color}, transparent)`).join(`,
227
+ `);
228
+ }
229
+ function be(r) {
230
+ return B[r].border.map((a) => `radial-gradient(ellipse ${a.size} at ${a.pos}, ${a.color}, transparent)`).join(`,
231
+ `);
232
+ }
233
+ function fe(r) {
234
+ const e = B[r], a = r === "mono" ? 0.225 : 0.45;
235
+ return e.border.map((t) => {
236
+ const o = t.color.replace("rgb(", "rgba(").replace(")", `, ${a})`);
237
+ return `radial-gradient(ellipse ${t.size.split(" ").map((m) => {
238
+ const s = parseInt(m);
239
+ return `${Math.round(s * 0.9)}px`;
240
+ }).join(" ")} at ${t.pos}, ${o}, transparent)`;
241
+ }).join(`,
242
+ `);
243
+ }
244
+ function ge(r, e) {
245
+ const a = B[r];
246
+ return e ? a.spike : a.spikeLt;
247
+ }
248
+ const me = {
249
+ colorful: {
250
+ dark: [
251
+ { color: "rgb(255, 50, 100)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
252
+ { color: "rgb(40, 180, 220)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
253
+ { color: "rgb(50, 200, 80)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
254
+ { color: "rgb(180, 40, 240)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
255
+ { color: "rgb(255, 160, 30)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
256
+ { color: "rgb(100, 70, 255)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
257
+ { color: "rgb(40, 140, 255)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
258
+ { color: "rgb(240, 50, 180)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
259
+ { color: "rgb(30, 185, 170)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
260
+ ],
261
+ light: [
262
+ { color: "rgb(255, 50, 100)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
263
+ { color: "rgb(40, 140, 255)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
264
+ { color: "rgb(50, 200, 80)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
265
+ { color: "rgb(180, 40, 240)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
266
+ { color: "rgb(30, 185, 170)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
267
+ { color: "rgb(100, 70, 255)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
268
+ { color: "rgb(40, 140, 255)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
269
+ { color: "rgb(255, 120, 40)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
270
+ { color: "rgb(240, 50, 180)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
271
+ ]
272
+ },
273
+ mono: {
274
+ dark: [
275
+ { color: "rgb(200, 200, 200)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
276
+ { color: "rgb(170, 170, 170)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
277
+ { color: "rgb(155, 155, 155)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
278
+ { color: "rgb(185, 185, 185)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
279
+ { color: "rgb(165, 165, 165)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
280
+ { color: "rgb(180, 180, 180)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
281
+ { color: "rgb(160, 160, 160)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
282
+ { color: "rgb(175, 175, 175)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
283
+ { color: "rgb(190, 190, 190)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
284
+ ],
285
+ light: [
286
+ { color: "rgb(100, 100, 100)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
287
+ { color: "rgb(80, 80, 80)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
288
+ { color: "rgb(90, 90, 90)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
289
+ { color: "rgb(70, 70, 70)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
290
+ { color: "rgb(85, 85, 85)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
291
+ { color: "rgb(95, 95, 95)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
292
+ { color: "rgb(75, 75, 75)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
293
+ { color: "rgb(105, 105, 105)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
294
+ { color: "rgb(65, 65, 65)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
295
+ ]
296
+ },
297
+ ocean: {
298
+ dark: [
299
+ { color: "rgb(100, 80, 220)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
300
+ { color: "rgb(60, 120, 255)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
301
+ { color: "rgb(80, 100, 200)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
302
+ { color: "rgb(130, 70, 255)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
303
+ { color: "rgb(70, 130, 255)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
304
+ { color: "rgb(120, 80, 255)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
305
+ { color: "rgb(90, 110, 230)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
306
+ { color: "rgb(110, 90, 240)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
307
+ { color: "rgb(140, 100, 255)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
308
+ ],
309
+ light: [
310
+ { color: "rgb(80, 60, 200)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
311
+ { color: "rgb(50, 100, 220)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
312
+ { color: "rgb(70, 90, 190)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
313
+ { color: "rgb(110, 60, 220)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
314
+ { color: "rgb(60, 110, 230)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
315
+ { color: "rgb(100, 70, 240)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
316
+ { color: "rgb(80, 100, 210)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
317
+ { color: "rgb(90, 80, 225)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
318
+ { color: "rgb(120, 90, 245)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
319
+ ]
320
+ },
321
+ sunset: {
322
+ dark: [
323
+ { color: "rgb(255, 100, 60)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
324
+ { color: "rgb(255, 180, 50)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
325
+ { color: "rgb(255, 140, 70)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
326
+ { color: "rgb(255, 80, 80)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
327
+ { color: "rgb(255, 200, 60)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
328
+ { color: "rgb(255, 120, 50)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
329
+ { color: "rgb(255, 160, 80)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
330
+ { color: "rgb(255, 90, 60)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
331
+ { color: "rgb(255, 70, 70)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
332
+ ],
333
+ light: [
334
+ { color: "rgb(220, 80, 40)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
335
+ { color: "rgb(230, 150, 30)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
336
+ { color: "rgb(210, 110, 50)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
337
+ { color: "rgb(200, 60, 60)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
338
+ { color: "rgb(220, 170, 40)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
339
+ { color: "rgb(210, 100, 30)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
340
+ { color: "rgb(230, 130, 60)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
341
+ { color: "rgb(190, 70, 50)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
342
+ { color: "rgb(180, 50, 50)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
343
+ ]
344
+ }
345
+ };
346
+ function de(r, e, a) {
347
+ return me[r][e ? "dark" : "light"].map((o) => {
348
+ const p = o.offsetX === 0 ? "" : o.offsetX > 0 ? ` + ${o.offsetX}px` : ` - ${Math.abs(o.offsetX)}px`, m = o.offsetY === 0 ? "" : o.offsetY > 0 ? ` + ${o.offsetY}px` : ` - ${Math.abs(o.offsetY)}px`;
349
+ return `radial-gradient(ellipse calc(${o.sizeW}px * var(--beam-w-${a})) calc(${o.sizeH}px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%${p}) calc(100%${m}), ${o.color}, transparent)`;
350
+ }).join(`,
351
+ `);
352
+ }
353
+ const xe = {
354
+ colorful: [
355
+ { color: "rgba(255, 50, 100, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
356
+ { color: "rgba(40, 180, 220, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
357
+ { color: "rgba(50, 200, 80, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
358
+ { color: "rgba(180, 40, 240, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
359
+ { color: "rgba(255, 160, 30, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
360
+ { color: "rgba(100, 70, 255, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
361
+ { color: "rgba(40, 140, 255, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
362
+ { color: "rgba(240, 50, 180, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
363
+ { color: "rgba(30, 185, 170, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
364
+ ],
365
+ mono: [
366
+ { color: "rgba(200, 200, 200, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
367
+ { color: "rgba(170, 170, 170, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
368
+ { color: "rgba(155, 155, 155, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
369
+ { color: "rgba(185, 185, 185, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
370
+ { color: "rgba(165, 165, 165, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
371
+ { color: "rgba(180, 180, 180, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
372
+ { color: "rgba(160, 160, 160, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
373
+ { color: "rgba(175, 175, 175, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
374
+ { color: "rgba(190, 190, 190, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
375
+ ],
376
+ ocean: [
377
+ { color: "rgba(100, 80, 220, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
378
+ { color: "rgba(60, 120, 255, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
379
+ { color: "rgba(80, 100, 200, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
380
+ { color: "rgba(130, 70, 255, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
381
+ { color: "rgba(70, 130, 255, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
382
+ { color: "rgba(120, 80, 255, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
383
+ { color: "rgba(90, 110, 230, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
384
+ { color: "rgba(110, 90, 240, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
385
+ { color: "rgba(140, 100, 255, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
386
+ ],
387
+ sunset: [
388
+ { color: "rgba(255, 100, 60, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
389
+ { color: "rgba(255, 180, 50, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
390
+ { color: "rgba(255, 140, 70, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
391
+ { color: "rgba(255, 80, 80, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
392
+ { color: "rgba(255, 200, 60, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
393
+ { color: "rgba(255, 120, 50, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
394
+ { color: "rgba(255, 160, 80, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
395
+ { color: "rgba(255, 90, 60, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
396
+ { color: "rgba(255, 70, 70, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
397
+ ]
398
+ };
399
+ function $e(r, e) {
400
+ return xe[r].map((t) => {
401
+ const o = t.offsetX === 0 ? "" : t.offsetX > 0 ? ` + ${t.offsetX}px` : ` - ${Math.abs(t.offsetX)}px`, p = t.offsetY === 0 ? "" : ` - ${Math.abs(t.offsetY)}px`;
402
+ return `radial-gradient(ellipse calc(${t.sizeW}px * var(--beam-w-${e})) calc(${t.sizeH}px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%${o}) calc(100%${p}), ${t.color}, transparent)`;
403
+ }).join(`,
404
+ `);
405
+ }
406
+ const ze = {
407
+ colorful: {
408
+ dark: {
409
+ spikes: [
410
+ { color1: "rgb(100, 70, 255)", color2: "rgba(100, 70, 255, 1)" },
411
+ // 36%
412
+ { color1: "rgba(255, 170, 40, 0.59)", color2: "rgba(255, 170, 40, 0.29)" },
413
+ // 50%
414
+ { color1: "rgb(50, 200, 100)", color2: "rgba(50, 200, 100, 1)" },
415
+ // 64%
416
+ { color1: "rgba(200, 50, 240, 0.91)", color2: "rgba(200, 50, 240, 0.45)" },
417
+ // 78%
418
+ { color1: "rgb(40, 140, 255)", color2: "rgba(40, 140, 255, 1)" }
419
+ // 92%
420
+ ]
421
+ },
422
+ light: {
423
+ spikes: [
424
+ { color1: "rgb(80, 50, 200)", color2: "rgba(80, 50, 200, 0.8)" },
425
+ // 36%
426
+ { color1: "rgba(210, 130, 0, 0.7)", color2: "rgba(210, 130, 0, 0.46)" },
427
+ // 50%
428
+ { color1: "rgb(30, 160, 70)", color2: "rgba(30, 160, 70, 0.82)" },
429
+ // 64%
430
+ { color1: "rgb(160, 30, 190)", color2: "rgba(160, 30, 190, 0.7)" },
431
+ // 78%
432
+ { color1: "rgb(30, 100, 200)", color2: "rgba(30, 100, 200, 0.78)" }
433
+ // 92%
434
+ ]
435
+ }
436
+ },
437
+ mono: {
438
+ dark: {
439
+ spikes: [
440
+ { color1: "rgb(200, 200, 200)", color2: "rgba(200, 200, 200, 1)" },
441
+ { color1: "rgba(180, 180, 180, 0.59)", color2: "rgba(180, 180, 180, 0.29)" },
442
+ { color1: "rgb(190, 190, 190)", color2: "rgba(190, 190, 190, 1)" },
443
+ { color1: "rgba(170, 170, 170, 0.91)", color2: "rgba(170, 170, 170, 0.45)" },
444
+ { color1: "rgb(185, 185, 185)", color2: "rgba(185, 185, 185, 1)" }
445
+ ]
446
+ },
447
+ light: {
448
+ spikes: [
449
+ { color1: "rgb(80, 80, 80)", color2: "rgba(80, 80, 80, 0.8)" },
450
+ { color1: "rgba(100, 100, 100, 0.7)", color2: "rgba(100, 100, 100, 0.46)" },
451
+ { color1: "rgb(70, 70, 70)", color2: "rgba(70, 70, 70, 0.82)" },
452
+ { color1: "rgb(90, 90, 90)", color2: "rgba(90, 90, 90, 0.7)" },
453
+ { color1: "rgb(85, 85, 85)", color2: "rgba(85, 85, 85, 0.78)" }
454
+ ]
455
+ }
456
+ },
457
+ ocean: {
458
+ dark: {
459
+ spikes: [
460
+ { color1: "rgb(100, 80, 255)", color2: "rgb(100, 80, 255)" },
461
+ { color1: "rgba(80, 130, 220, 0.59)", color2: "rgba(80, 130, 220, 0.29)" },
462
+ { color1: "rgb(60, 100, 255)", color2: "rgb(60, 100, 255)" },
463
+ { color1: "rgba(90, 120, 200, 0.91)", color2: "rgba(90, 120, 200, 0.45)" },
464
+ { color1: "rgb(120, 90, 255)", color2: "rgb(120, 90, 255)" }
465
+ ]
466
+ },
467
+ light: {
468
+ spikes: [
469
+ { color1: "rgb(50, 40, 180)", color2: "rgba(50, 40, 180, 0.8)" },
470
+ { color1: "rgba(40, 80, 200, 0.7)", color2: "rgba(40, 80, 200, 0.46)" },
471
+ { color1: "rgb(30, 50, 190)", color2: "rgba(30, 50, 190, 0.82)" },
472
+ { color1: "rgb(60, 90, 180)", color2: "rgba(60, 90, 180, 0.7)" },
473
+ { color1: "rgb(70, 60, 200)", color2: "rgba(70, 60, 200, 0.78)" }
474
+ ]
475
+ }
476
+ },
477
+ sunset: {
478
+ dark: {
479
+ spikes: [
480
+ { color1: "rgb(255, 100, 80)", color2: "rgb(255, 100, 80)" },
481
+ { color1: "rgba(255, 150, 80, 0.59)", color2: "rgba(255, 150, 80, 0.29)" },
482
+ { color1: "rgb(255, 80, 60)", color2: "rgb(255, 80, 60)" },
483
+ { color1: "rgba(255, 120, 50, 0.91)", color2: "rgba(255, 120, 50, 0.45)" },
484
+ { color1: "rgb(255, 140, 70)", color2: "rgb(255, 140, 70)" }
485
+ ]
486
+ },
487
+ light: {
488
+ spikes: [
489
+ { color1: "rgb(200, 60, 30)", color2: "rgba(200, 60, 30, 0.8)" },
490
+ { color1: "rgba(220, 100, 20, 0.7)", color2: "rgba(220, 100, 20, 0.46)" },
491
+ { color1: "rgb(180, 40, 20)", color2: "rgba(180, 40, 20, 0.82)" },
492
+ { color1: "rgb(210, 80, 10)", color2: "rgba(210, 80, 10, 0.7)" },
493
+ { color1: "rgb(190, 70, 30)", color2: "rgba(190, 70, 30, 0.78)" }
494
+ ]
495
+ }
496
+ }
497
+ };
498
+ function G(r, e) {
499
+ const a = r.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
500
+ if (a) return `rgba(${a[1]}, ${a[2]}, ${a[3]}, ${e})`;
501
+ const t = r.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
502
+ return t ? `rgba(${t[1]}, ${t[2]}, ${t[3]}, ${e})` : r;
503
+ }
504
+ function he(r, e, a) {
505
+ const t = ge(r, e), o = t.primary, p = t.secondary, s = ze[r][e ? "dark" : "light"].spikes;
506
+ if (r === "mono")
507
+ return ue(e, a);
508
+ if (e) {
509
+ const c = o, f = o, i = p, n = G(p, 0.49);
510
+ return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${a})) calc(92px * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
511
+ radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
512
+ radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${a}))) calc(72px * var(--beam-h-${a})) at 36% calc(100% - 3px), ${s[0].color1}, ${s[0].color2} 40%, transparent 90%),
513
+ radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${s[1].color1}, ${s[1].color2} 55%, transparent 96%),
514
+ radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-${a}))) calc(85px * var(--beam-h-${a})) at 64% calc(100% - 4px), ${s[2].color1}, ${s[2].color2} 35%, transparent 89%),
515
+ radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${s[3].color1}, ${s[3].color2} 48%, transparent 94%),
516
+ radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike-${a}))) calc(60px * var(--beam-h-${a})) at 92% calc(100% - 3px), ${s[4].color1}, ${s[4].color2} 42%, transparent 91%),
517
+ radial-gradient(ellipse calc(21px * var(--beam-spike-${a})) calc(15px * var(--beam-spike2-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
518
+ radial-gradient(ellipse calc(42px * var(--beam-w-${a})) calc(40px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%)`;
519
+ } else {
520
+ const c = o, f = G(o, 0.85), i = p, n = G(p, 0.7);
521
+ return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${a})) calc(92px * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
522
+ radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
523
+ radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${a}))) calc(72px * var(--beam-h-${a})) at 36% calc(100% - 3px), ${s[0].color1}, ${s[0].color2} 40%, transparent 90%),
524
+ radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${s[1].color1}, ${s[1].color2} 55%, transparent 96%),
525
+ radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-${a}))) calc(85px * var(--beam-h-${a})) at 64% calc(100% - 4px), ${s[2].color1}, ${s[2].color2} 35%, transparent 89%),
526
+ radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${s[3].color1}, ${s[3].color2} 48%, transparent 94%),
527
+ radial-gradient(ellipse calc(1px * (2 - var(--beam-spike-${a}))) calc(60px * var(--beam-h-${a})) at 92% calc(100% - 3px), ${s[4].color1}, ${s[4].color2} 42%, transparent 91%),
528
+ radial-gradient(ellipse calc(50px * var(--beam-w-${a})) calc(32px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
529
+ }
530
+ }
531
+ function ue(r, e) {
532
+ return r ? `radial-gradient(ellipse calc(18px * var(--beam-spike-${e})) calc(30px * var(--beam-h-${e})) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.35), rgba(200, 200, 200, 0.12) 50%, transparent 100%),
533
+ radial-gradient(ellipse calc(14px * var(--beam-spike2-${e})) calc(28px * var(--beam-h-${e})) at 22% calc(100% - 4px), rgba(170, 170, 170, 0.3), rgba(170, 170, 170, 0.1) 50%, transparent 100%),
534
+ radial-gradient(ellipse calc(16px * var(--beam-spike-${e})) calc(32px * var(--beam-h-${e})) at 36% calc(100% - 3px), rgba(190, 190, 190, 0.35), rgba(190, 190, 190, 0.12) 50%, transparent 100%),
535
+ radial-gradient(ellipse calc(20px * var(--beam-spike2-${e})) calc(25px * var(--beam-h-${e})) at 50% calc(100% - 2px), rgba(180, 180, 180, 0.25), rgba(180, 180, 180, 0.08) 55%, transparent 100%),
536
+ radial-gradient(ellipse calc(15px * var(--beam-spike2-${e})) calc(30px * var(--beam-h-${e})) at 64% calc(100% - 4px), rgba(185, 185, 185, 0.32), rgba(185, 185, 185, 0.1) 50%, transparent 100%),
537
+ radial-gradient(ellipse calc(12px * var(--beam-spike-${e})) calc(28px * var(--beam-h-${e})) at 78% calc(100% - 2px), rgba(175, 175, 175, 0.28), rgba(175, 175, 175, 0.09) 50%, transparent 100%),
538
+ radial-gradient(ellipse calc(17px * var(--beam-spike-${e})) calc(26px * var(--beam-h-${e})) at 92% calc(100% - 3px), rgba(195, 195, 195, 0.3), rgba(195, 195, 195, 0.1) 50%, transparent 100%),
539
+ radial-gradient(ellipse calc(21px * var(--beam-spike-${e})) calc(15px * var(--beam-spike2-${e})) at calc(var(--beam-x-${e}) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
540
+ radial-gradient(ellipse calc(42px * var(--beam-w-${e})) calc(40px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%)` : `radial-gradient(ellipse calc(18px * var(--beam-spike-${e})) calc(30px * var(--beam-h-${e})) at 8% calc(100% - 2px), rgba(80, 80, 80, 0.3), rgba(80, 80, 80, 0.1) 50%, transparent 100%),
541
+ radial-gradient(ellipse calc(14px * var(--beam-spike2-${e})) calc(28px * var(--beam-h-${e})) at 22% calc(100% - 4px), rgba(100, 100, 100, 0.25), rgba(100, 100, 100, 0.08) 50%, transparent 100%),
542
+ radial-gradient(ellipse calc(16px * var(--beam-spike-${e})) calc(32px * var(--beam-h-${e})) at 36% calc(100% - 3px), rgba(70, 70, 70, 0.3), rgba(70, 70, 70, 0.1) 50%, transparent 100%),
543
+ radial-gradient(ellipse calc(20px * var(--beam-spike2-${e})) calc(25px * var(--beam-h-${e})) at 50% calc(100% - 2px), rgba(90, 90, 90, 0.22), rgba(90, 90, 90, 0.07) 55%, transparent 100%),
544
+ radial-gradient(ellipse calc(15px * var(--beam-spike2-${e})) calc(30px * var(--beam-h-${e})) at 64% calc(100% - 4px), rgba(85, 85, 85, 0.28), rgba(85, 85, 85, 0.09) 50%, transparent 100%),
545
+ radial-gradient(ellipse calc(12px * var(--beam-spike-${e})) calc(28px * var(--beam-h-${e})) at 78% calc(100% - 2px), rgba(95, 95, 95, 0.24), rgba(95, 95, 95, 0.08) 50%, transparent 100%),
546
+ radial-gradient(ellipse calc(17px * var(--beam-spike-${e})) calc(26px * var(--beam-h-${e})) at 92% calc(100% - 3px), rgba(75, 75, 75, 0.26), rgba(75, 75, 75, 0.08) 50%, transparent 100%),
547
+ radial-gradient(ellipse calc(50px * var(--beam-w-${e})) calc(32px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
548
+ }
549
+ function ke(r) {
550
+ const { size: e } = r;
551
+ return e === "line" ? we(r) : e === "sm" ? ve(r) : ye(r);
552
+ }
553
+ function ve(r) {
554
+ const {
555
+ id: e,
556
+ borderRadius: a,
557
+ borderWidth: t,
558
+ duration: o,
559
+ strokeOpacity: p,
560
+ innerOpacity: m,
561
+ bloomOpacity: s,
562
+ innerShadow: $,
563
+ colorVariant: c,
564
+ staticColors: f,
565
+ brightness: i,
566
+ saturation: n,
567
+ hueRange: l,
568
+ theme: Y
569
+ } = r, g = Math.max(0, a - t), b = c === "mono" ? 0.5 : 1, z = p * b, H = m * b, d = s * b, k = f ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, v = f ? "" : `
570
+ @keyframes beam-hue-shift-${e} {
571
+ 0% { filter: hue-rotate(-${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
572
+ 50% { filter: hue-rotate(${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
573
+ 100% { filter: hue-rotate(-${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
574
+ }`, y = Y === "dark", W = y ? `conic-gradient(
575
+ from var(--beam-angle-${e}),
576
+ transparent 0%, transparent 54%,
577
+ rgba(255, 255, 255, 0.1) 57%,
578
+ rgba(255, 255, 255, 0.3) 60%,
579
+ rgba(255, 255, 255, 0.6) 63%,
580
+ rgba(255, 255, 255, 0.75) 66%,
581
+ rgba(255, 255, 255, 0.6) 69%,
582
+ rgba(255, 255, 255, 0.3) 72%,
583
+ rgba(255, 255, 255, 0.1) 75%,
584
+ transparent 78%, transparent 100%
585
+ )` : `conic-gradient(
586
+ from var(--beam-angle-${e}),
587
+ transparent 0%, transparent 54%,
588
+ rgba(0, 0, 0, 0.08) 57%,
589
+ rgba(0, 0, 0, 0.2) 60%,
590
+ rgba(0, 0, 0, 0.4) 63%,
591
+ rgba(0, 0, 0, 0.55) 66%,
592
+ rgba(0, 0, 0, 0.4) 69%,
593
+ rgba(0, 0, 0, 0.2) 72%,
594
+ rgba(0, 0, 0, 0.08) 75%,
595
+ transparent 78%, transparent 100%
596
+ )`, h = pe(c), X = le(c), x = y ? `conic-gradient(
597
+ from var(--beam-angle-${e}),
598
+ transparent 0%, transparent 58%,
599
+ rgba(255, 255, 255, 0.03) 62%,
600
+ rgba(255, 255, 255, 0.08) 65%,
601
+ rgba(255, 255, 255, 0.2) 67%,
602
+ rgba(255, 255, 255, 0.45) 69%,
603
+ rgba(255, 255, 255, 0.85) 70%,
604
+ rgba(255, 255, 255, 0.85) 70.5%,
605
+ rgba(255, 255, 255, 0.45) 71.5%,
606
+ rgba(255, 255, 255, 0.2) 73%,
607
+ rgba(255, 255, 255, 0.08) 75%,
608
+ rgba(255, 255, 255, 0.03) 78%,
609
+ transparent 82%
610
+ )` : `conic-gradient(
611
+ from var(--beam-angle-${e}),
612
+ transparent 0%, transparent 58%,
613
+ rgba(0, 0, 0, 0.02) 62%,
614
+ rgba(0, 0, 0, 0.08) 65%,
615
+ rgba(0, 0, 0, 0.2) 67%,
616
+ rgba(0, 0, 0, 0.4) 69%,
617
+ rgba(0, 0, 0, 0.6) 70%,
618
+ rgba(0, 0, 0, 0.6) 70.5%,
619
+ rgba(0, 0, 0, 0.4) 71.5%,
620
+ rgba(0, 0, 0, 0.2) 73%,
621
+ rgba(0, 0, 0, 0.08) 75%,
622
+ rgba(0, 0, 0, 0.02) 78%,
623
+ transparent 82%
624
+ )`, F = `conic-gradient(
625
+ from var(--beam-angle-${e}),
626
+ transparent 0%, transparent 22%,
627
+ rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
628
+ white 46%, white 82%,
629
+ rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
630
+ transparent 97%, transparent 100%
631
+ )`;
632
+ return `
633
+ @property --beam-angle-${e} {
634
+ syntax: "<angle>";
635
+ initial-value: 0deg;
636
+ inherits: true;
637
+ }
638
+
639
+ @property --beam-opacity-${e} {
640
+ syntax: "<number>";
641
+ initial-value: 0;
642
+ inherits: true;
643
+ }
644
+
645
+ [data-beam="${e}"] {
646
+ position: relative;
647
+ border-radius: ${a}px;
648
+ overflow: hidden;
649
+ }
650
+
651
+ [data-beam="${e}"][data-active] {
652
+ animation:
653
+ beam-spin-${e} ${o}s linear infinite,
654
+ beam-fade-in-${e} 0.6s ease forwards;
655
+ }
656
+
657
+ [data-beam="${e}"][data-fading] {
658
+ animation:
659
+ beam-spin-${e} ${o}s linear infinite,
660
+ beam-fade-out-${e} 0.5s ease forwards;
661
+ }
662
+
663
+ [data-beam="${e}"][data-active]::after,
664
+ [data-beam="${e}"][data-fading]::after {
665
+ content: "";
666
+ position: absolute;
667
+ inset: 0;
668
+ border-radius: ${g}px;
669
+ padding: ${t}px;
670
+ clip-path: inset(0 round ${a}px);
671
+ background: ${W},${h};
672
+ -webkit-mask:
673
+ conic-gradient(
674
+ from var(--beam-angle-${e}),
675
+ transparent 0%, transparent 30%,
676
+ rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
677
+ white 52%, white 80%,
678
+ rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
679
+ transparent 95%, transparent 100%
680
+ ),
681
+ linear-gradient(#fff 0 0) content-box,
682
+ linear-gradient(#fff 0 0);
683
+ -webkit-mask-composite: source-in, xor;
684
+ mask:
685
+ conic-gradient(
686
+ from var(--beam-angle-${e}),
687
+ transparent 0%, transparent 30%,
688
+ rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
689
+ white 52%, white 80%,
690
+ rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
691
+ transparent 95%, transparent 100%
692
+ ),
693
+ linear-gradient(#fff 0 0) content-box,
694
+ linear-gradient(#fff 0 0);
695
+ mask-composite: intersect, exclude;
696
+ pointer-events: none;
697
+ z-index: 2;
698
+ opacity: calc(var(--beam-opacity-${e}) * ${z.toFixed(2)} * var(--beam-strength, 1));
699
+ ${k}
700
+ }
701
+
702
+ [data-beam="${e}"][data-active]::before,
703
+ [data-beam="${e}"][data-fading]::before {
704
+ content: "";
705
+ position: absolute;
706
+ inset: 0;
707
+ border-radius: ${a}px;
708
+ clip-path: inset(0 round ${a}px);
709
+ background: ${X};
710
+ box-shadow: inset 0 0 5px 1px ${$};
711
+ -webkit-mask-image: ${F};
712
+ -webkit-mask-composite: source-over;
713
+ mask-image: ${F};
714
+ mask-composite: add;
715
+ pointer-events: none;
716
+ z-index: 1;
717
+ opacity: calc(var(--beam-opacity-${e}) * ${H.toFixed(2)} * var(--beam-strength, 1));
718
+ ${k}
719
+ }
720
+
721
+ [data-beam="${e}"] [data-beam-bloom] {
722
+ display: none;
723
+ position: absolute;
724
+ inset: 0;
725
+ border-radius: ${g}px;
726
+ clip-path: inset(0 round ${a}px);
727
+ background: ${x};
728
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
729
+ -webkit-mask-composite: xor;
730
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
731
+ mask-composite: exclude;
732
+ padding: ${t}px;
733
+ filter: blur(8px) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)});
734
+ pointer-events: none;
735
+ z-index: 3;
736
+ opacity: 0;
737
+ }
738
+
739
+ [data-beam="${e}"][data-active] [data-beam-bloom],
740
+ [data-beam="${e}"][data-fading] [data-beam-bloom] {
741
+ display: block;
742
+ opacity: calc(var(--beam-opacity-${e}) * ${d.toFixed(2)} * var(--beam-strength, 1));
743
+ }
744
+
745
+ @keyframes beam-spin-${e} {
746
+ to { --beam-angle-${e}: 360deg; }
747
+ }
748
+
749
+ @keyframes beam-fade-in-${e} {
750
+ to { --beam-opacity-${e}: 1; }
751
+ }
752
+
753
+ @keyframes beam-fade-out-${e} {
754
+ from { --beam-opacity-${e}: 1; }
755
+ to { --beam-opacity-${e}: 0; }
756
+ }
757
+ ${v}
758
+ `;
759
+ }
760
+ function ye(r) {
761
+ const {
762
+ id: e,
763
+ borderRadius: a,
764
+ borderWidth: t,
765
+ duration: o,
766
+ strokeOpacity: p,
767
+ innerOpacity: m,
768
+ bloomOpacity: s,
769
+ innerShadow: $,
770
+ colorVariant: c,
771
+ staticColors: f,
772
+ brightness: i,
773
+ saturation: n,
774
+ hueRange: l,
775
+ theme: Y
776
+ } = r, g = Math.max(0, a - t), b = c === "mono" ? 0.5 : 1, z = p * b, H = m * b, d = s * b, k = f ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, v = f ? "" : `
777
+ @keyframes beam-hue-shift-${e} {
778
+ 0% { filter: hue-rotate(-${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
779
+ 50% { filter: hue-rotate(${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
780
+ 100% { filter: hue-rotate(-${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
781
+ }`, y = Y === "dark", W = y ? `conic-gradient(
782
+ from var(--beam-angle-${e}),
783
+ transparent 0%, transparent 54%,
784
+ rgba(255, 255, 255, 0.1) 57%,
785
+ rgba(255, 255, 255, 0.3) 60%,
786
+ rgba(255, 255, 255, 0.6) 63%,
787
+ rgba(255, 255, 255, 0.75) 66%,
788
+ rgba(255, 255, 255, 0.6) 69%,
789
+ rgba(255, 255, 255, 0.3) 72%,
790
+ rgba(255, 255, 255, 0.1) 75%,
791
+ transparent 78%, transparent 100%
792
+ )` : `conic-gradient(
793
+ from var(--beam-angle-${e}),
794
+ transparent 0%, transparent 54%,
795
+ rgba(0, 0, 0, 0.08) 57%,
796
+ rgba(0, 0, 0, 0.2) 60%,
797
+ rgba(0, 0, 0, 0.4) 63%,
798
+ rgba(0, 0, 0, 0.55) 66%,
799
+ rgba(0, 0, 0, 0.4) 69%,
800
+ rgba(0, 0, 0, 0.2) 72%,
801
+ rgba(0, 0, 0, 0.08) 75%,
802
+ transparent 78%, transparent 100%
803
+ )`, h = be(c), X = fe(c), x = y ? `conic-gradient(
804
+ from var(--beam-angle-${e}),
805
+ transparent 0%, transparent 58%,
806
+ rgba(255, 255, 255, 0.03) 62%,
807
+ rgba(255, 255, 255, 0.08) 65%,
808
+ rgba(255, 255, 255, 0.2) 67%,
809
+ rgba(255, 255, 255, 0.45) 69%,
810
+ rgba(255, 255, 255, 0.85) 70%,
811
+ rgba(255, 255, 255, 0.85) 70.5%,
812
+ rgba(255, 255, 255, 0.45) 71.5%,
813
+ rgba(255, 255, 255, 0.2) 73%,
814
+ rgba(255, 255, 255, 0.08) 75%,
815
+ rgba(255, 255, 255, 0.03) 78%,
816
+ transparent 82%
817
+ )` : `conic-gradient(
818
+ from var(--beam-angle-${e}),
819
+ transparent 0%, transparent 58%,
820
+ rgba(0, 0, 0, 0.02) 62%,
821
+ rgba(0, 0, 0, 0.08) 65%,
822
+ rgba(0, 0, 0, 0.2) 67%,
823
+ rgba(0, 0, 0, 0.4) 69%,
824
+ rgba(0, 0, 0, 0.6) 70%,
825
+ rgba(0, 0, 0, 0.6) 70.5%,
826
+ rgba(0, 0, 0, 0.4) 71.5%,
827
+ rgba(0, 0, 0, 0.2) 73%,
828
+ rgba(0, 0, 0, 0.08) 75%,
829
+ rgba(0, 0, 0, 0.02) 78%,
830
+ transparent 82%
831
+ )`;
832
+ return `
833
+ @property --beam-angle-${e} {
834
+ syntax: "<angle>";
835
+ initial-value: 0deg;
836
+ inherits: true;
837
+ }
838
+
839
+ @property --beam-opacity-${e} {
840
+ syntax: "<number>";
841
+ initial-value: 0;
842
+ inherits: true;
843
+ }
844
+
845
+ [data-beam="${e}"] {
846
+ position: relative;
847
+ border-radius: ${a}px;
848
+ overflow: hidden;
849
+ }
850
+
851
+ [data-beam="${e}"][data-active] {
852
+ animation:
853
+ beam-spin-${e} ${o}s linear infinite,
854
+ beam-fade-in-${e} 0.6s ease forwards;
855
+ }
856
+
857
+ [data-beam="${e}"][data-fading] {
858
+ animation:
859
+ beam-spin-${e} ${o}s linear infinite,
860
+ beam-fade-out-${e} 0.5s ease forwards;
861
+ }
862
+
863
+ [data-beam="${e}"][data-active]::after,
864
+ [data-beam="${e}"][data-fading]::after {
865
+ content: "";
866
+ position: absolute;
867
+ inset: 0;
868
+ border-radius: ${g}px;
869
+ padding: ${t}px;
870
+ clip-path: inset(0 round ${a}px);
871
+ background: ${W},${h};
872
+ -webkit-mask:
873
+ conic-gradient(
874
+ from var(--beam-angle-${e}),
875
+ transparent 0%, transparent 30%,
876
+ rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
877
+ white 52%, white 80%,
878
+ rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
879
+ transparent 95%, transparent 100%
880
+ ),
881
+ linear-gradient(#fff 0 0) content-box,
882
+ linear-gradient(#fff 0 0);
883
+ -webkit-mask-composite: source-in, xor;
884
+ mask:
885
+ conic-gradient(
886
+ from var(--beam-angle-${e}),
887
+ transparent 0%, transparent 30%,
888
+ rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
889
+ white 52%, white 80%,
890
+ rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
891
+ transparent 95%, transparent 100%
892
+ ),
893
+ linear-gradient(#fff 0 0) content-box,
894
+ linear-gradient(#fff 0 0);
895
+ mask-composite: intersect, exclude;
896
+ pointer-events: none;
897
+ z-index: 2;
898
+ opacity: calc(var(--beam-opacity-${e}) * ${z.toFixed(2)} * var(--beam-strength, 1));
899
+ ${k}
900
+ }
901
+
902
+ [data-beam="${e}"][data-active]::before,
903
+ [data-beam="${e}"][data-fading]::before {
904
+ content: "";
905
+ position: absolute;
906
+ inset: 0;
907
+ border-radius: ${a}px;
908
+ background: ${X};
909
+ box-shadow: inset 0 0 9px 1px ${$};
910
+ -webkit-mask-image:
911
+ conic-gradient(
912
+ from var(--beam-angle-${e}),
913
+ transparent 0%, transparent 30%,
914
+ rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
915
+ white 52%, white 80%,
916
+ rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
917
+ transparent 95%, transparent 100%
918
+ ),
919
+ linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
920
+ linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
921
+ -webkit-mask-composite: source-in, source-over;
922
+ mask-image:
923
+ conic-gradient(
924
+ from var(--beam-angle-${e}),
925
+ transparent 0%, transparent 30%,
926
+ rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
927
+ white 52%, white 80%,
928
+ rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
929
+ transparent 95%, transparent 100%
930
+ ),
931
+ linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
932
+ linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
933
+ mask-composite: intersect, add;
934
+ pointer-events: none;
935
+ z-index: 1;
936
+ opacity: calc(var(--beam-opacity-${e}) * ${H.toFixed(2)} * var(--beam-strength, 1));
937
+ clip-path: inset(0 round ${a}px);
938
+ ${k}
939
+ }
940
+
941
+ [data-beam="${e}"] [data-beam-bloom] {
942
+ display: none;
943
+ position: absolute;
944
+ inset: 0;
945
+ border-radius: ${g}px;
946
+ clip-path: inset(0 round ${a}px);
947
+ background: ${x};
948
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
949
+ -webkit-mask-composite: xor;
950
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
951
+ mask-composite: exclude;
952
+ padding: ${t}px;
953
+ filter: blur(8px) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)});
954
+ pointer-events: none;
955
+ z-index: 3;
956
+ opacity: 0;
957
+ }
958
+
959
+ [data-beam="${e}"][data-active] [data-beam-bloom],
960
+ [data-beam="${e}"][data-fading] [data-beam-bloom] {
961
+ display: block;
962
+ opacity: calc(var(--beam-opacity-${e}) * ${d.toFixed(2)} * var(--beam-strength, 1));
963
+ }
964
+
965
+ @keyframes beam-spin-${e} {
966
+ to { --beam-angle-${e}: 360deg; }
967
+ }
968
+
969
+ @keyframes beam-fade-in-${e} {
970
+ to { --beam-opacity-${e}: 1; }
971
+ }
972
+
973
+ @keyframes beam-fade-out-${e} {
974
+ from { --beam-opacity-${e}: 1; }
975
+ to { --beam-opacity-${e}: 0; }
976
+ }
977
+ ${v}
978
+ `;
979
+ }
980
+ function we(r) {
981
+ const {
982
+ id: e,
983
+ borderRadius: a,
984
+ borderWidth: t,
985
+ duration: o,
986
+ strokeOpacity: p,
987
+ innerOpacity: m,
988
+ bloomOpacity: s,
989
+ innerShadow: $,
990
+ colorVariant: c,
991
+ staticColors: f,
992
+ brightness: i,
993
+ saturation: n,
994
+ hueRange: l,
995
+ theme: Y
996
+ } = r, g = Math.max(0, a - t), b = Y === "dark", z = p, H = m, d = s, k = f ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, v = f ? "" : `animation: beam-hue-shift-bloom-${e} 8s ease-in-out infinite;`, y = f ? "" : `
997
+ @keyframes beam-hue-shift-${e} {
998
+ 0% { filter: hue-rotate(-${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
999
+ 50% { filter: hue-rotate(${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
1000
+ 100% { filter: hue-rotate(-${l}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
1001
+ }
1002
+
1003
+ @keyframes beam-hue-shift-bloom-${e} {
1004
+ 0% { filter: blur(8px) hue-rotate(-${l + 10}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
1005
+ 50% { filter: blur(8px) hue-rotate(${l + 10}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
1006
+ 100% { filter: blur(8px) hue-rotate(-${l + 10}deg) brightness(${i.toFixed(2)}) saturate(${n.toFixed(2)}); }
1007
+ }`, W = b ? `radial-gradient(
1008
+ ellipse calc(24px * var(--beam-w-${e})) calc(28px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) calc(100% + 2px),
1009
+ rgba(255, 255, 255, 0.38) 0%,
1010
+ rgba(255, 255, 255, 0.12) 30%,
1011
+ transparent 65%
1012
+ )` : `radial-gradient(
1013
+ ellipse calc(35px * var(--beam-w-${e})) calc(28px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) calc(100% + 2px),
1014
+ rgba(0, 0, 0, 0.6) 0%,
1015
+ rgba(0, 0, 0, 0.25) 35%,
1016
+ transparent 70%
1017
+ )`, h = de(c, b, e), X = $e(c, e), x = he(c, b, e);
1018
+ return `
1019
+ @property --beam-x-${e} {
1020
+ syntax: "<number>";
1021
+ initial-value: 0;
1022
+ inherits: true;
1023
+ }
1024
+
1025
+ @property --beam-w-${e} {
1026
+ syntax: "<number>";
1027
+ initial-value: 1;
1028
+ inherits: true;
1029
+ }
1030
+
1031
+ @property --beam-h-${e} {
1032
+ syntax: "<number>";
1033
+ initial-value: 1;
1034
+ inherits: true;
1035
+ }
1036
+
1037
+ @property --beam-spike-${e} {
1038
+ syntax: "<number>";
1039
+ initial-value: 1;
1040
+ inherits: true;
1041
+ }
1042
+
1043
+ @property --beam-spike2-${e} {
1044
+ syntax: "<number>";
1045
+ initial-value: 1;
1046
+ inherits: true;
1047
+ }
1048
+
1049
+ @property --beam-edge-${e} {
1050
+ syntax: "<number>";
1051
+ initial-value: 1;
1052
+ inherits: true;
1053
+ }
1054
+
1055
+ @property --beam-opacity-${e} {
1056
+ syntax: "<number>";
1057
+ initial-value: 0;
1058
+ inherits: true;
1059
+ }
1060
+
1061
+ [data-beam="${e}"] {
1062
+ position: relative;
1063
+ border-radius: ${a}px;
1064
+ overflow: hidden;
1065
+ }
1066
+
1067
+ [data-beam="${e}"][data-active] {
1068
+ animation:
1069
+ beam-travel-${e} ${o}s linear infinite,
1070
+ beam-edge-fade-${e} ${o}s linear infinite,
1071
+ beam-breathe-${e} ${(o * 1.3).toFixed(1)}s ease-in-out infinite,
1072
+ beam-spike-${e} ${(o * 1.33).toFixed(1)}s ease-in-out infinite,
1073
+ beam-spike2-${e} ${(o * 1.7).toFixed(1)}s ease-in-out infinite,
1074
+ beam-fade-in-${e} 0.6s ease forwards;
1075
+ }
1076
+
1077
+ [data-beam="${e}"][data-fading] {
1078
+ animation:
1079
+ beam-travel-${e} ${o}s linear infinite,
1080
+ beam-edge-fade-${e} ${o}s linear infinite,
1081
+ beam-breathe-${e} ${(o * 1.3).toFixed(1)}s ease-in-out infinite,
1082
+ beam-spike-${e} ${(o * 1.33).toFixed(1)}s ease-in-out infinite,
1083
+ beam-spike2-${e} ${(o * 1.7).toFixed(1)}s ease-in-out infinite,
1084
+ beam-fade-out-${e} 0.5s ease forwards;
1085
+ }
1086
+
1087
+ [data-beam="${e}"][data-active]::after,
1088
+ [data-beam="${e}"][data-fading]::after {
1089
+ content: "";
1090
+ position: absolute;
1091
+ inset: 0;
1092
+ border-radius: ${g}px;
1093
+ padding: ${t}px;
1094
+ clip-path: inset(0 round ${a}px);
1095
+ background: ${W}, ${h};
1096
+ -webkit-mask:
1097
+ radial-gradient(
1098
+ ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
1099
+ white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
1100
+ ),
1101
+ linear-gradient(#fff 0 0) content-box,
1102
+ linear-gradient(#fff 0 0);
1103
+ -webkit-mask-composite: source-in, xor;
1104
+ mask:
1105
+ radial-gradient(
1106
+ ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
1107
+ white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
1108
+ ),
1109
+ linear-gradient(#fff 0 0) content-box,
1110
+ linear-gradient(#fff 0 0);
1111
+ mask-composite: intersect, exclude;
1112
+ pointer-events: none;
1113
+ z-index: 2;
1114
+ opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${z.toFixed(2)} * var(--beam-strength, 1));
1115
+ ${k}
1116
+ }
1117
+
1118
+ [data-beam="${e}"][data-active]::before,
1119
+ [data-beam="${e}"][data-fading]::before {
1120
+ content: "";
1121
+ position: absolute;
1122
+ inset: 0;
1123
+ border-radius: ${a}px;
1124
+ background: ${X};
1125
+ box-shadow: inset 0 0 9px 1px ${$};
1126
+ -webkit-mask-image:
1127
+ radial-gradient(
1128
+ ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
1129
+ white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
1130
+ ),
1131
+ linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
1132
+ linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
1133
+ -webkit-mask-composite: source-in, source-over;
1134
+ mask-image:
1135
+ radial-gradient(
1136
+ ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
1137
+ white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
1138
+ ),
1139
+ linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
1140
+ linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
1141
+ mask-composite: intersect, add;
1142
+ pointer-events: none;
1143
+ z-index: 1;
1144
+ opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${H.toFixed(2)} * var(--beam-strength, 1));
1145
+ clip-path: inset(0 round ${a}px);
1146
+ ${k}
1147
+ }
1148
+
1149
+ [data-beam="${e}"] [data-beam-bloom] {
1150
+ display: none;
1151
+ position: absolute;
1152
+ inset: 0;
1153
+ border-radius: ${g}px;
1154
+ clip-path: inset(0 round ${a}px);
1155
+ padding: 0;
1156
+ -webkit-mask: radial-gradient(
1157
+ ellipse calc(84px * var(--beam-w-${e})) calc(110px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
1158
+ white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
1159
+ );
1160
+ -webkit-mask-composite: source-over;
1161
+ mask: radial-gradient(
1162
+ ellipse calc(84px * var(--beam-w-${e})) calc(110px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
1163
+ white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
1164
+ );
1165
+ mask-composite: add;
1166
+ background: ${x};
1167
+ pointer-events: none;
1168
+ z-index: 3;
1169
+ opacity: 0;
1170
+ }
1171
+
1172
+ [data-beam="${e}"][data-active] [data-beam-bloom],
1173
+ [data-beam="${e}"][data-fading] [data-beam-bloom] {
1174
+ display: block;
1175
+ opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${d.toFixed(2)} * var(--beam-strength, 1));
1176
+ ${v}
1177
+ }
1178
+
1179
+ @keyframes beam-travel-${e} {
1180
+ 0% { --beam-x-${e}: 0.06; --beam-w-${e}: 0.5; }
1181
+ 10% { --beam-x-${e}: 0.15; --beam-w-${e}: 0.8; }
1182
+ 20% { --beam-x-${e}: 0.25; --beam-w-${e}: 1.1; }
1183
+ 30% { --beam-x-${e}: 0.35; --beam-w-${e}: 1.3; }
1184
+ 40% { --beam-x-${e}: 0.44; --beam-w-${e}: 1.45; }
1185
+ 50% { --beam-x-${e}: 0.5; --beam-w-${e}: 1.5; }
1186
+ 60% { --beam-x-${e}: 0.56; --beam-w-${e}: 1.45; }
1187
+ 70% { --beam-x-${e}: 0.65; --beam-w-${e}: 1.3; }
1188
+ 80% { --beam-x-${e}: 0.75; --beam-w-${e}: 1.1; }
1189
+ 90% { --beam-x-${e}: 0.85; --beam-w-${e}: 0.8; }
1190
+ 100% { --beam-x-${e}: 0.94; --beam-w-${e}: 0.5; }
1191
+ }
1192
+
1193
+ @keyframes beam-edge-fade-${e} {
1194
+ 0% { --beam-edge-${e}: 0; }
1195
+ 12.5% { --beam-edge-${e}: 0; }
1196
+ 32.5% { --beam-edge-${e}: 1; }
1197
+ 67.5% { --beam-edge-${e}: 1; }
1198
+ 87.5% { --beam-edge-${e}: 0; }
1199
+ 100% { --beam-edge-${e}: 0; }
1200
+ }
1201
+
1202
+ @keyframes beam-breathe-${e} {
1203
+ 0%, 100% { --beam-h-${e}: 0.8; }
1204
+ 25% { --beam-h-${e}: 1.25; }
1205
+ 55% { --beam-h-${e}: 0.85; }
1206
+ 80% { --beam-h-${e}: 1.3; }
1207
+ }
1208
+
1209
+ @keyframes beam-spike-${e} {
1210
+ 0% { --beam-spike-${e}: 0.8; }
1211
+ 25% { --beam-spike-${e}: 1.3; }
1212
+ 50% { --beam-spike-${e}: 0.9; }
1213
+ 75% { --beam-spike-${e}: 1.4; }
1214
+ 100% { --beam-spike-${e}: 0.8; }
1215
+ }
1216
+
1217
+ @keyframes beam-spike2-${e} {
1218
+ 0% { --beam-spike2-${e}: 1.2; }
1219
+ 25% { --beam-spike2-${e}: 0.7; }
1220
+ 50% { --beam-spike2-${e}: 1.4; }
1221
+ 75% { --beam-spike2-${e}: 0.8; }
1222
+ 100% { --beam-spike2-${e}: 1.2; }
1223
+ }
1224
+
1225
+ @keyframes beam-fade-in-${e} {
1226
+ to { --beam-opacity-${e}: 1; }
1227
+ }
1228
+
1229
+ @keyframes beam-fade-out-${e} {
1230
+ from { --beam-opacity-${e}: 1; }
1231
+ to { --beam-opacity-${e}: 0; }
1232
+ }
1233
+ ${y}
1234
+ `;
1235
+ }
1236
+ function We() {
1237
+ const [r, e] = O(() => typeof window > "u" || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
1238
+ return L(() => {
1239
+ if (typeof window > "u") return;
1240
+ const a = window.matchMedia("(prefers-color-scheme: dark)"), t = (o) => {
1241
+ e(o.matches ? "dark" : "light");
1242
+ };
1243
+ return a.addEventListener("change", t), () => a.removeEventListener("change", t);
1244
+ }, []), r;
1245
+ }
1246
+ function Xe(r, e) {
1247
+ return r === "auto" ? e : r;
1248
+ }
1249
+ const Se = te(
1250
+ function({
1251
+ children: e,
1252
+ size: a = "md",
1253
+ colorVariant: t = "colorful",
1254
+ theme: o = "dark",
1255
+ staticColors: p = !1,
1256
+ duration: m,
1257
+ active: s = !0,
1258
+ borderRadius: $,
1259
+ brightness: c = 1.3,
1260
+ saturation: f,
1261
+ hueRange: i = 30,
1262
+ strength: n = 1,
1263
+ className: l,
1264
+ style: Y,
1265
+ onActivate: g,
1266
+ onDeactivate: b,
1267
+ onAnimationEnd: z,
1268
+ ...H
1269
+ }, d) {
1270
+ const v = se().replace(/:/g, "-"), y = We(), W = ie(null), [h, X] = O(s), [x, F] = O(!1), [D, J] = O(null);
1271
+ L(() => {
1272
+ if ($ != null) return;
1273
+ const u = W.current;
1274
+ if (!u) return;
1275
+ const S = () => {
1276
+ const E = u.firstElementChild;
1277
+ if (!E) return;
1278
+ const re = getComputedStyle(E), R = parseFloat(re.borderTopLeftRadius);
1279
+ !isNaN(R) && R > 0 && J(R);
1280
+ };
1281
+ S();
1282
+ const K = new MutationObserver(S);
1283
+ return K.observe(u, { childList: !0, subtree: !1 }), () => K.disconnect();
1284
+ }, [$, e]), L(() => {
1285
+ s && !h && !x ? X(!0) : !s && h && !x && F(!0);
1286
+ }, [s, h, x]);
1287
+ const U = q(
1288
+ (u) => {
1289
+ const S = u.animationName;
1290
+ S.includes("fade-out") ? (X(!1), F(!1), b == null || b()) : S.includes("fade-in") && (g == null || g()), z == null || z(u);
1291
+ },
1292
+ [g, b, z]
1293
+ ), C = Xe(o, y), w = I[a][C], M = ce[a], j = $ ?? D ?? M.borderRadius, T = m ?? (a === "line" ? 2.4 : 1.96), P = f ?? w.saturation, N = a === "line" ? Math.min(i, 13) : i, _ = t === "mono" ? !0 : p, Z = ne(
1294
+ () => ke({
1295
+ id: v,
1296
+ borderRadius: j,
1297
+ borderWidth: M.borderWidth,
1298
+ duration: T,
1299
+ strokeOpacity: w.strokeOpacity,
1300
+ innerOpacity: w.innerOpacity,
1301
+ bloomOpacity: w.bloomOpacity,
1302
+ innerShadow: w.innerShadow,
1303
+ size: a,
1304
+ colorVariant: t,
1305
+ staticColors: _,
1306
+ brightness: c,
1307
+ saturation: P,
1308
+ hueRange: N,
1309
+ theme: C
1310
+ }),
1311
+ [
1312
+ v,
1313
+ j,
1314
+ M.borderWidth,
1315
+ T,
1316
+ w.strokeOpacity,
1317
+ w.innerOpacity,
1318
+ w.bloomOpacity,
1319
+ w.innerShadow,
1320
+ a,
1321
+ t,
1322
+ _,
1323
+ c,
1324
+ P,
1325
+ N,
1326
+ C
1327
+ ]
1328
+ ), ee = q(
1329
+ (u) => {
1330
+ W.current = u, typeof d == "function" ? d(u) : d && (d.current = u);
1331
+ },
1332
+ [d]
1333
+ ), ae = {
1334
+ ...Y ?? {},
1335
+ "--beam-strength": Math.max(0, Math.min(1, n))
1336
+ };
1337
+ return /* @__PURE__ */ Q(oe, { children: [
1338
+ /* @__PURE__ */ V("style", { children: Z }),
1339
+ /* @__PURE__ */ Q(
1340
+ "div",
1341
+ {
1342
+ ...H,
1343
+ ref: ee,
1344
+ "data-beam": v,
1345
+ "data-active": h && !x ? "" : void 0,
1346
+ "data-fading": x ? "" : void 0,
1347
+ className: l,
1348
+ style: ae,
1349
+ onAnimationEnd: U,
1350
+ children: [
1351
+ e,
1352
+ /* @__PURE__ */ V("div", { "data-beam-bloom": !0 })
1353
+ ]
1354
+ }
1355
+ )
1356
+ ] });
1357
+ }
1358
+ );
1359
+ export {
1360
+ Se as BorderBeam,
1361
+ Se as default,
1362
+ ce as sizePresets,
1363
+ I as sizeThemePresets,
1364
+ Fe as themeColors
1365
+ };