azeriand-library 1.15.1 → 1.16.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.
- package/dist/components/gradient-glow/gradient-glow.d.ts +38 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +469 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +468 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
export interface GradientGlowProps {
|
|
3
|
+
/** Type of animation: 'breath', 'rotate', 'spin', 'pulse', or 'none' */
|
|
4
|
+
animation?: 'breath' | 'rotate' | 'spin' | 'pulse' | 'none';
|
|
5
|
+
/** Animation behavior: 'once', 'continuous', 'hover' */
|
|
6
|
+
animationType?: 'once' | 'continuous' | 'hover';
|
|
7
|
+
/** Animation duration in seconds */
|
|
8
|
+
duration?: number;
|
|
9
|
+
/** Animation easing function */
|
|
10
|
+
easing?: string;
|
|
11
|
+
/** Custom gradient background */
|
|
12
|
+
gradient?: string;
|
|
13
|
+
/** Predefined gradient theme */
|
|
14
|
+
gradientTheme?: 'purple-blue' | 'rainbow' | 'sunset' | 'ocean' | 'forest';
|
|
15
|
+
/** Blur intensity */
|
|
16
|
+
blurIntensity?: number;
|
|
17
|
+
/** Glow spread distance */
|
|
18
|
+
glowSpread?: number;
|
|
19
|
+
/** Border radius for the glow effect */
|
|
20
|
+
borderRadius?: string;
|
|
21
|
+
/** Initial opacity */
|
|
22
|
+
opacity?: number;
|
|
23
|
+
/** Whether to start animation immediately on mount */
|
|
24
|
+
autoStart?: boolean;
|
|
25
|
+
/** Delay before starting animation (in seconds) */
|
|
26
|
+
delay?: number;
|
|
27
|
+
/** Disable the glow effect completely */
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
/** Children elements */
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
}
|
|
32
|
+
export interface GradientGlowRef {
|
|
33
|
+
startAnimation: () => void;
|
|
34
|
+
stopAnimation: () => void;
|
|
35
|
+
toggleAnimation: () => void;
|
|
36
|
+
}
|
|
37
|
+
export declare const GradientGlow: React.ForwardRefExoticComponent<GradientGlowProps & React.RefAttributes<GradientGlowRef>>;
|
|
38
|
+
export default GradientGlow;
|
package/dist/index.d.ts
CHANGED
|
@@ -12,3 +12,4 @@ export { NewSlider } from './components/slider/slider';
|
|
|
12
12
|
export { Tab } from './components/tab/tab';
|
|
13
13
|
export { Timeline } from './components/timeline/timeline';
|
|
14
14
|
export { TlListItem } from './components/timeline/timeline-list-item';
|
|
15
|
+
export { GradientGlow } from './components/gradient-glow/gradient-glow';
|
package/dist/index.esm.js
CHANGED
|
@@ -3,7 +3,320 @@
|
|
|
3
3
|
try {
|
|
4
4
|
if (typeof document != "undefined") {
|
|
5
5
|
var elementStyle = document.createElement("style");
|
|
6
|
-
elementStyle.appendChild(document.createTextNode(
|
|
6
|
+
elementStyle.appendChild(document.createTextNode(`.card{
|
|
7
|
+
/* border-radius: 20px; */
|
|
8
|
+
color: var(--card-text-color, white);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.card.glass{
|
|
12
|
+
background-color: color-mix(in oklch, var(--glass-color), transparent 80%);
|
|
13
|
+
-webkit-backface-visibility: hidden;
|
|
14
|
+
-webkit-perspective: 1000;
|
|
15
|
+
-webkit-transform: translate3d(0,0,0);
|
|
16
|
+
-webkit-transform: translateZ(0);
|
|
17
|
+
backface-visibility: hidden;
|
|
18
|
+
perspective: 1000;
|
|
19
|
+
transform: translate3d(0,0,0);
|
|
20
|
+
transform: translateZ(0);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.card.mate{
|
|
24
|
+
background-color: var(--glass-color);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.card.outlined{
|
|
28
|
+
border: 2px solid color-mix(in oklch, var(--glass-color), transparent 40%);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
button .card.ghost:hover, button .card.outlined:hover{
|
|
32
|
+
background: color-mix(in oklch, var(--glass-color), transparent 80%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
button .card.glass:hover{
|
|
36
|
+
box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
button .card.mate:hover{
|
|
40
|
+
background-color: color-mix(in oklch, var(--glass-color), white 10%)
|
|
41
|
+
}
|
|
42
|
+
button{
|
|
43
|
+
background: none;
|
|
44
|
+
color: inherit;
|
|
45
|
+
border: none;
|
|
46
|
+
padding: 0;
|
|
47
|
+
font: inherit;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
outline: inherit;
|
|
50
|
+
font-weight: bold;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
button:focus {
|
|
54
|
+
outline: revert;
|
|
55
|
+
}
|
|
56
|
+
.section-name{
|
|
57
|
+
color: hsla(0, 0%, 100%, 0.7);
|
|
58
|
+
}input:disabled{
|
|
59
|
+
color: hsla(0, 0%, 100%, 0.5);
|
|
60
|
+
font-weight: bold;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
input::-moz-placeholder{
|
|
64
|
+
color: hsla(0, 0%, 100%, 0.5);
|
|
65
|
+
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
input::placeholder{
|
|
69
|
+
color: hsla(0, 0%, 100%, 0.5);
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
input::-webkit-outer-spin-button,
|
|
74
|
+
input::-webkit-inner-spin-button {
|
|
75
|
+
-webkit-appearance: none;
|
|
76
|
+
margin: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
input:focus{
|
|
80
|
+
outline: none;
|
|
81
|
+
}.MuiDateCalendar-root{
|
|
82
|
+
color: white;
|
|
83
|
+
}.dropdown-content{
|
|
84
|
+
box-shadow: rgba(149, 157, 165, 0.2)
|
|
85
|
+
0px 8px 24px;
|
|
86
|
+
max-height: 40%vh;
|
|
87
|
+
scrollbar-width: none;
|
|
88
|
+
-ms-overflow-style: none;
|
|
89
|
+
z-index: 10;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.dropdown-content::-webkit-scrollbar{
|
|
93
|
+
width: 0;
|
|
94
|
+
height: 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.dropdown-item:hover{
|
|
98
|
+
background-color: rgb(240, 249, 255);
|
|
99
|
+
}.button-open{
|
|
100
|
+
border: rgb(147, 197, 253) 2px solid;
|
|
101
|
+
border-radius: 7px;
|
|
102
|
+
}.vertical-line::before {
|
|
103
|
+
content: "";
|
|
104
|
+
position: absolute;
|
|
105
|
+
width: 1.5px;
|
|
106
|
+
height: 100%;
|
|
107
|
+
background-color: white;
|
|
108
|
+
left: 0;
|
|
109
|
+
top: 0;
|
|
110
|
+
transform: translateX(5.1px);
|
|
111
|
+
}.gradient-glow-wrapper {
|
|
112
|
+
position: relative;
|
|
113
|
+
display: inline-block;
|
|
114
|
+
transform-style: preserve-3d;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.gradient-glow-wrapper .glow-background {
|
|
118
|
+
content: '';
|
|
119
|
+
position: absolute;
|
|
120
|
+
inset: 0;
|
|
121
|
+
filter: blur(0px);
|
|
122
|
+
transform: translate3d(0px, 0px, -1px);
|
|
123
|
+
border-radius: var(--glow-border-radius);
|
|
124
|
+
pointer-events: none;
|
|
125
|
+
opacity: 0;
|
|
126
|
+
transition: all 0.3s ease;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.gradient-glow-wrapper .content-wrapper {
|
|
130
|
+
position: relative;
|
|
131
|
+
z-index: 1;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* Animation States */
|
|
135
|
+
.gradient-glow-wrapper.glow-active .glow-background {
|
|
136
|
+
opacity: var(--glow-opacity);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Breath Animation */
|
|
140
|
+
.gradient-glow-wrapper.animation-breath.glow-active .glow-background {
|
|
141
|
+
animation: breathGlow var(--glow-duration) var(--glow-easing) var(--glow-delay);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.gradient-glow-wrapper.animation-breath.animation-continuous.glow-active .glow-background {
|
|
145
|
+
animation: breathGlow var(--glow-duration) var(--glow-easing) var(--glow-delay) infinite;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* Rotate Animation */
|
|
149
|
+
.gradient-glow-wrapper.animation-rotate.glow-active .glow-background {
|
|
150
|
+
animation: rotateGlow var(--glow-duration) linear var(--glow-delay);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.gradient-glow-wrapper.animation-rotate.animation-continuous.glow-active .glow-background {
|
|
154
|
+
animation: rotateGlow var(--glow-duration) linear var(--glow-delay) infinite;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Spin Animation - Create a rotating pseudo-element for the gradient */
|
|
158
|
+
.gradient-glow-wrapper.animation-spin.glow-active .glow-background {
|
|
159
|
+
inset: calc(-1 * var(--glow-spread));
|
|
160
|
+
filter: blur(var(--glow-blur));
|
|
161
|
+
opacity: var(--glow-opacity);
|
|
162
|
+
overflow: hidden;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.gradient-glow-wrapper.animation-spin.glow-active .glow-background::before {
|
|
166
|
+
content: '';
|
|
167
|
+
position: absolute;
|
|
168
|
+
inset: -50%;
|
|
169
|
+
background: var(
|
|
170
|
+
--spinning-gradient,
|
|
171
|
+
conic-gradient(
|
|
172
|
+
from 0deg at 50% 50%,
|
|
173
|
+
#ff0000,
|
|
174
|
+
#ff8000,
|
|
175
|
+
#ffff00,
|
|
176
|
+
#80ff00,
|
|
177
|
+
#00ff00,
|
|
178
|
+
#00ff80,
|
|
179
|
+
#00ffff,
|
|
180
|
+
#0080ff,
|
|
181
|
+
#0000ff,
|
|
182
|
+
#8000ff,
|
|
183
|
+
#ff0080,
|
|
184
|
+
#ff0000
|
|
185
|
+
)
|
|
186
|
+
);
|
|
187
|
+
animation: spinGlow var(--glow-duration) linear var(--glow-delay);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.gradient-glow-wrapper.animation-spin.animation-continuous.glow-active .glow-background::before {
|
|
191
|
+
content: '';
|
|
192
|
+
position: absolute;
|
|
193
|
+
inset: -50%;
|
|
194
|
+
background: var(
|
|
195
|
+
--spinning-gradient,
|
|
196
|
+
conic-gradient(
|
|
197
|
+
from 0deg at 50% 50%,
|
|
198
|
+
#ff0000,
|
|
199
|
+
#ff8000,
|
|
200
|
+
#ffff00,
|
|
201
|
+
#80ff00,
|
|
202
|
+
#00ff00,
|
|
203
|
+
#00ff80,
|
|
204
|
+
#00ffff,
|
|
205
|
+
#0080ff,
|
|
206
|
+
#0000ff,
|
|
207
|
+
#8000ff,
|
|
208
|
+
#ff0080,
|
|
209
|
+
#ff0000
|
|
210
|
+
)
|
|
211
|
+
);
|
|
212
|
+
animation: spinGlow var(--glow-duration) linear var(--glow-delay) infinite;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* Pulse Animation */
|
|
216
|
+
.gradient-glow-wrapper.animation-pulse.glow-active .glow-background {
|
|
217
|
+
animation: pulseGlow var(--glow-duration) var(--glow-easing) var(--glow-delay);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.gradient-glow-wrapper.animation-pulse.animation-continuous.glow-active .glow-background {
|
|
221
|
+
animation: pulseGlow var(--glow-duration) var(--glow-easing) var(--glow-delay) infinite;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* No Animation - Static Glow */
|
|
225
|
+
.gradient-glow-wrapper.animation-none.glow-active .glow-background {
|
|
226
|
+
inset: calc(-1 * var(--glow-spread));
|
|
227
|
+
filter: blur(var(--glow-blur));
|
|
228
|
+
opacity: var(--glow-opacity);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* Hover-specific styles */
|
|
232
|
+
.gradient-glow-wrapper.animation-hover:hover .glow-background {
|
|
233
|
+
inset: calc(-1 * var(--glow-spread));
|
|
234
|
+
filter: blur(var(--glow-blur));
|
|
235
|
+
opacity: var(--glow-opacity);
|
|
236
|
+
transition: all 0.3s var(--glow-easing);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* Disabled state - no glow effects */
|
|
240
|
+
.gradient-glow-wrapper.glow-disabled .glow-background {
|
|
241
|
+
opacity: 0 !important;
|
|
242
|
+
animation: none !important;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* Breathing out animation when being disabled */
|
|
246
|
+
.gradient-glow-wrapper.glow-breathing-out .glow-background {
|
|
247
|
+
opacity: var(--glow-opacity);
|
|
248
|
+
inset: calc(-1 * var(--glow-spread));
|
|
249
|
+
filter: blur(var(--glow-blur));
|
|
250
|
+
animation: breatheOut 0.6s ease-out forwards !important;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* Keyframe Animations */
|
|
254
|
+
@keyframes breathGlow {
|
|
255
|
+
0% {
|
|
256
|
+
inset: 0;
|
|
257
|
+
filter: blur(0px);
|
|
258
|
+
opacity: 0;
|
|
259
|
+
}
|
|
260
|
+
50% {
|
|
261
|
+
inset: calc(-1 * var(--glow-spread));
|
|
262
|
+
filter: blur(var(--glow-blur));
|
|
263
|
+
opacity: var(--glow-opacity);
|
|
264
|
+
}
|
|
265
|
+
100% {
|
|
266
|
+
inset: 0;
|
|
267
|
+
filter: blur(0px);
|
|
268
|
+
opacity: 0;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
@keyframes rotateGlow {
|
|
273
|
+
0% {
|
|
274
|
+
inset: calc(-1 * var(--glow-spread));
|
|
275
|
+
filter: blur(var(--glow-blur)) hue-rotate(0deg);
|
|
276
|
+
opacity: var(--glow-opacity);
|
|
277
|
+
}
|
|
278
|
+
100% {
|
|
279
|
+
inset: calc(-1 * var(--glow-spread));
|
|
280
|
+
filter: blur(var(--glow-blur)) hue-rotate(360deg);
|
|
281
|
+
opacity: var(--glow-opacity);
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
@keyframes spinGlow {
|
|
286
|
+
0% {
|
|
287
|
+
transform: rotate(0deg);
|
|
288
|
+
}
|
|
289
|
+
100% {
|
|
290
|
+
transform: rotate(360deg);
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
@keyframes pulseGlow {
|
|
295
|
+
0%,
|
|
296
|
+
100% {
|
|
297
|
+
inset: 0;
|
|
298
|
+
filter: blur(5px);
|
|
299
|
+
opacity: 0.3;
|
|
300
|
+
}
|
|
301
|
+
50% {
|
|
302
|
+
inset: calc(-1 * var(--glow-spread));
|
|
303
|
+
filter: blur(var(--glow-blur));
|
|
304
|
+
opacity: var(--glow-opacity);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
@keyframes breatheOut {
|
|
309
|
+
0% {
|
|
310
|
+
inset: calc(-1 * var(--glow-spread));
|
|
311
|
+
filter: blur(var(--glow-blur));
|
|
312
|
+
opacity: var(--glow-opacity);
|
|
313
|
+
}
|
|
314
|
+
100% {
|
|
315
|
+
inset: 0;
|
|
316
|
+
filter: blur(0px);
|
|
317
|
+
opacity: 0;
|
|
318
|
+
}
|
|
319
|
+
}`));
|
|
7
320
|
document.head.appendChild(elementStyle);
|
|
8
321
|
}
|
|
9
322
|
} catch (e) {
|
|
@@ -15,7 +328,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
|
|
|
15
328
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
16
329
|
import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
|
|
17
330
|
import * as React from "react";
|
|
18
|
-
import React__default, { forwardRef, useContext, isValidElement, cloneElement, Children, createContext, useState, useEffect } from "react";
|
|
331
|
+
import React__default, { forwardRef, useContext, isValidElement, cloneElement, Children, createContext, useState, useEffect, useRef, useImperativeHandle } from "react";
|
|
19
332
|
import ReactDOM from "react-dom";
|
|
20
333
|
function Avatar({ src, className = "", style: style2 }) {
|
|
21
334
|
return /* @__PURE__ */ jsx$1(
|
|
@@ -17871,6 +18184,159 @@ function TlListItem({ label, badge, ...cardProps }) {
|
|
|
17871
18184
|
badge
|
|
17872
18185
|
] }) }) });
|
|
17873
18186
|
}
|
|
18187
|
+
const predefinedGradients = {
|
|
18188
|
+
"purple-blue": "conic-gradient(from 90deg at 50% 50%, #8b5cf6, #60a5fa, #a855f7, #8b5cf6)",
|
|
18189
|
+
rainbow: "conic-gradient(from 0deg at 50% 50%, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff0080, #ff0000)",
|
|
18190
|
+
sunset: "conic-gradient(from 0deg at 50% 50%, #ff6b6b, #ffa726, #ffcc02, #ff8a65, #ff6b6b)",
|
|
18191
|
+
ocean: "conic-gradient(from 0deg at 50% 50%, #667eea, #764ba2, #f093fb, #667eea)",
|
|
18192
|
+
forest: "conic-gradient(from 0deg at 50% 50%, #134e5e, #71b280, #a8e6cf, #134e5e)"
|
|
18193
|
+
};
|
|
18194
|
+
const GradientGlow = forwardRef(
|
|
18195
|
+
({
|
|
18196
|
+
animation = "breath",
|
|
18197
|
+
animationType = "continuous",
|
|
18198
|
+
duration: duration2 = 2,
|
|
18199
|
+
easing: easing2 = "ease-in-out",
|
|
18200
|
+
gradient,
|
|
18201
|
+
gradientTheme = "purple-blue",
|
|
18202
|
+
blurIntensity = 20,
|
|
18203
|
+
glowSpread = 10,
|
|
18204
|
+
borderRadius: borderRadius2 = "8px",
|
|
18205
|
+
opacity = 0.8,
|
|
18206
|
+
autoStart = true,
|
|
18207
|
+
delay = 0,
|
|
18208
|
+
disabled = false,
|
|
18209
|
+
children
|
|
18210
|
+
}, ref) => {
|
|
18211
|
+
const [isGlowActive, setIsGlowActive] = useState(false);
|
|
18212
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
18213
|
+
const [isBreathingOut, setIsBreathingOut] = useState(false);
|
|
18214
|
+
const timeoutRef = useRef(null);
|
|
18215
|
+
const gradientBackground = gradient || predefinedGradients[gradientTheme];
|
|
18216
|
+
const dynamicStyles = {
|
|
18217
|
+
"--glow-duration": `${duration2}s`,
|
|
18218
|
+
"--glow-easing": easing2,
|
|
18219
|
+
"--glow-delay": `${delay}s`,
|
|
18220
|
+
"--glow-blur": `${blurIntensity}px`,
|
|
18221
|
+
"--glow-spread": `${glowSpread}px`,
|
|
18222
|
+
"--glow-opacity": opacity.toString(),
|
|
18223
|
+
"--glow-border-radius": borderRadius2,
|
|
18224
|
+
...animation === "spin" && { "--spinning-gradient": gradientBackground }
|
|
18225
|
+
};
|
|
18226
|
+
const glowBackgroundStyles = {
|
|
18227
|
+
background: gradientBackground
|
|
18228
|
+
};
|
|
18229
|
+
const handleMouseEnter = () => {
|
|
18230
|
+
setIsHovered(true);
|
|
18231
|
+
if (animationType === "hover" && !disabled) {
|
|
18232
|
+
setIsGlowActive(true);
|
|
18233
|
+
}
|
|
18234
|
+
};
|
|
18235
|
+
const handleMouseLeave = () => {
|
|
18236
|
+
setIsHovered(false);
|
|
18237
|
+
if (animationType === "hover" && !disabled) {
|
|
18238
|
+
setIsGlowActive(false);
|
|
18239
|
+
}
|
|
18240
|
+
};
|
|
18241
|
+
useEffect(() => {
|
|
18242
|
+
if (autoStart && animationType !== "hover" && !disabled) {
|
|
18243
|
+
if (delay > 0) {
|
|
18244
|
+
timeoutRef.current = setTimeout(() => {
|
|
18245
|
+
setIsGlowActive(true);
|
|
18246
|
+
}, delay * 1e3);
|
|
18247
|
+
} else {
|
|
18248
|
+
setIsGlowActive(true);
|
|
18249
|
+
}
|
|
18250
|
+
}
|
|
18251
|
+
return () => {
|
|
18252
|
+
if (timeoutRef.current) {
|
|
18253
|
+
clearTimeout(timeoutRef.current);
|
|
18254
|
+
}
|
|
18255
|
+
};
|
|
18256
|
+
}, [autoStart, animationType, delay, disabled]);
|
|
18257
|
+
useEffect(() => {
|
|
18258
|
+
if (disabled && isGlowActive) {
|
|
18259
|
+
setIsBreathingOut(true);
|
|
18260
|
+
timeoutRef.current = setTimeout(() => {
|
|
18261
|
+
setIsGlowActive(false);
|
|
18262
|
+
setIsBreathingOut(false);
|
|
18263
|
+
}, 600);
|
|
18264
|
+
} else if (disabled) {
|
|
18265
|
+
setIsGlowActive(false);
|
|
18266
|
+
setIsBreathingOut(false);
|
|
18267
|
+
} else {
|
|
18268
|
+
setIsBreathingOut(false);
|
|
18269
|
+
if (autoStart && animationType !== "hover") {
|
|
18270
|
+
setIsGlowActive(true);
|
|
18271
|
+
}
|
|
18272
|
+
}
|
|
18273
|
+
return () => {
|
|
18274
|
+
if (timeoutRef.current) {
|
|
18275
|
+
clearTimeout(timeoutRef.current);
|
|
18276
|
+
}
|
|
18277
|
+
};
|
|
18278
|
+
}, [disabled]);
|
|
18279
|
+
useImperativeHandle(ref, () => ({
|
|
18280
|
+
startAnimation: () => {
|
|
18281
|
+
if (!disabled) {
|
|
18282
|
+
setIsBreathingOut(false);
|
|
18283
|
+
setIsGlowActive(true);
|
|
18284
|
+
}
|
|
18285
|
+
},
|
|
18286
|
+
stopAnimation: () => {
|
|
18287
|
+
if (isGlowActive) {
|
|
18288
|
+
setIsBreathingOut(true);
|
|
18289
|
+
setIsGlowActive(false);
|
|
18290
|
+
timeoutRef.current = setTimeout(() => {
|
|
18291
|
+
setIsBreathingOut(false);
|
|
18292
|
+
}, 600);
|
|
18293
|
+
}
|
|
18294
|
+
},
|
|
18295
|
+
toggleAnimation: () => {
|
|
18296
|
+
if (!disabled) {
|
|
18297
|
+
if (isGlowActive) {
|
|
18298
|
+
setIsBreathingOut(true);
|
|
18299
|
+
setIsGlowActive(false);
|
|
18300
|
+
timeoutRef.current = setTimeout(() => {
|
|
18301
|
+
setIsBreathingOut(false);
|
|
18302
|
+
}, 600);
|
|
18303
|
+
} else {
|
|
18304
|
+
setIsBreathingOut(false);
|
|
18305
|
+
setIsGlowActive(true);
|
|
18306
|
+
}
|
|
18307
|
+
}
|
|
18308
|
+
}
|
|
18309
|
+
}));
|
|
18310
|
+
const wrapperClasses = [
|
|
18311
|
+
"gradient-glow-wrapper",
|
|
18312
|
+
isGlowActive && !disabled && !isBreathingOut && "glow-active",
|
|
18313
|
+
disabled && !isBreathingOut && "glow-disabled",
|
|
18314
|
+
isBreathingOut && "glow-breathing-out",
|
|
18315
|
+
animation === "breath" && "animation-breath",
|
|
18316
|
+
animation === "rotate" && "animation-rotate",
|
|
18317
|
+
animation === "spin" && "animation-spin",
|
|
18318
|
+
animation === "pulse" && "animation-pulse",
|
|
18319
|
+
animation === "none" && "animation-none",
|
|
18320
|
+
animationType === "once" && "animation-once",
|
|
18321
|
+
animationType === "continuous" && "animation-continuous",
|
|
18322
|
+
animationType === "hover" && "animation-hover"
|
|
18323
|
+
].filter(Boolean).join(" ");
|
|
18324
|
+
return /* @__PURE__ */ jsxs(
|
|
18325
|
+
"div",
|
|
18326
|
+
{
|
|
18327
|
+
className: wrapperClasses,
|
|
18328
|
+
style: dynamicStyles,
|
|
18329
|
+
onMouseEnter: handleMouseEnter,
|
|
18330
|
+
onMouseLeave: handleMouseLeave,
|
|
18331
|
+
children: [
|
|
18332
|
+
/* @__PURE__ */ jsx$1("div", { className: "glow-background", style: glowBackgroundStyles }),
|
|
18333
|
+
/* @__PURE__ */ jsx$1("div", { className: "content-wrapper", children })
|
|
18334
|
+
]
|
|
18335
|
+
}
|
|
18336
|
+
);
|
|
18337
|
+
}
|
|
18338
|
+
);
|
|
18339
|
+
GradientGlow.displayName = "GradientGlow";
|
|
17874
18340
|
export {
|
|
17875
18341
|
Avatar,
|
|
17876
18342
|
Badge,
|
|
@@ -17879,6 +18345,7 @@ export {
|
|
|
17879
18345
|
Card,
|
|
17880
18346
|
Checkbox,
|
|
17881
18347
|
Dropdown,
|
|
18348
|
+
GradientGlow,
|
|
17882
18349
|
Input,
|
|
17883
18350
|
NewSlider,
|
|
17884
18351
|
SectionName,
|