@solostylist/ui-kit 1.0.128 → 1.0.129
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.
|
@@ -15,22 +15,34 @@ export interface SGlowButtonProps extends ButtonProps {
|
|
|
15
15
|
/**
|
|
16
16
|
* SGlowButton - A visually striking button with animated glowing border effects.
|
|
17
17
|
* Combines Material-UI Button with SMovingBorder for premium visual appeal.
|
|
18
|
+
* Fully integrated with MUI theme system for consistent styling across light/dark modes.
|
|
18
19
|
*
|
|
19
20
|
* Key features:
|
|
20
21
|
* - Animated moving border with customizable duration
|
|
21
|
-
* -
|
|
22
|
+
* - Theme-aware gradient text effect using palette.gradient.primary
|
|
22
23
|
* - Fixed height (60px) for consistency
|
|
23
24
|
* - Customizable border radius
|
|
24
25
|
* - Full Material-UI Button API compatibility
|
|
25
26
|
* - Disabled ripple effect for cleaner animation
|
|
26
|
-
* -
|
|
27
|
-
* -
|
|
27
|
+
* - MUI theme integration with palette colors
|
|
28
|
+
* - Glassmorphism effect with backdrop blur
|
|
29
|
+
* - Theme-aware hover states and shadows
|
|
30
|
+
* - Accessibility-compliant focus styles
|
|
28
31
|
*
|
|
29
32
|
* Visual effects:
|
|
30
|
-
* - Moving gradient border animation
|
|
31
|
-
* - Gradient text coloring
|
|
33
|
+
* - Moving gradient border animation with theme-aware colors
|
|
34
|
+
* - Gradient text coloring from theme palette
|
|
32
35
|
* - Glow effects around the border
|
|
33
|
-
* - Smooth hover transitions
|
|
36
|
+
* - Smooth hover transitions with lift effect
|
|
37
|
+
* - Glassmorphism background with backdrop blur
|
|
38
|
+
* - Theme-responsive shadows and borders
|
|
39
|
+
*
|
|
40
|
+
* Theme integration:
|
|
41
|
+
* - Uses theme.palette.gradient.primary for text gradient
|
|
42
|
+
* - Uses theme.palette.primary.dark/light for glow colors
|
|
43
|
+
* - Uses theme.palette.background.paper for button background
|
|
44
|
+
* - Uses theme.palette.baseShadow for elevation
|
|
45
|
+
* - Automatically adapts to light/dark mode changes
|
|
34
46
|
*
|
|
35
47
|
* Best used for:
|
|
36
48
|
* - Primary call-to-action buttons
|
|
@@ -1,37 +1,205 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { Button as
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
borderRadius:
|
|
7
|
-
children:
|
|
1
|
+
import { j as p } from "../jsx-runtime-OVHDjVDe.js";
|
|
2
|
+
import { useRef as x } from "react";
|
|
3
|
+
import { useColorScheme as g, useTheme as d, Button as h, alpha as e, Box as n } from "@mui/material";
|
|
4
|
+
import b from "../s-moving-border/s-moving-border.js";
|
|
5
|
+
const y = ({
|
|
6
|
+
borderRadius: r = 12,
|
|
7
|
+
children: i,
|
|
8
8
|
duration: o = 6e3,
|
|
9
9
|
// 6 second animation cycle
|
|
10
|
-
...
|
|
10
|
+
...l
|
|
11
11
|
}) => {
|
|
12
|
-
const
|
|
13
|
-
return /* @__PURE__ */
|
|
14
|
-
|
|
12
|
+
const m = x(null), { mode: a } = g(), t = d(), c = a === "light" ? (t.vars || t).palette.primary.main : (t.vars || t).palette.primary.light, s = a === "light" ? 90 : 110;
|
|
13
|
+
return /* @__PURE__ */ p.jsx(
|
|
14
|
+
b,
|
|
15
15
|
{
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
duration: o,
|
|
17
|
+
borderRadius: r,
|
|
18
|
+
height: 60,
|
|
19
|
+
glowSize: s,
|
|
20
|
+
glowColor: c,
|
|
21
|
+
children: /* @__PURE__ */ p.jsx(
|
|
22
|
+
h,
|
|
23
|
+
{
|
|
24
|
+
variant: "text",
|
|
25
|
+
sx: {
|
|
26
|
+
height: "100%",
|
|
27
|
+
borderRadius: r,
|
|
28
|
+
position: "relative",
|
|
29
|
+
overflow: "hidden",
|
|
30
|
+
// Clear, high-contrast background base per theme, with subtle accent overlay
|
|
31
|
+
background: a === "light" ? `linear-gradient(0deg, ${(t.vars || t).palette.background.paper}, ${(t.vars || t).palette.background.paper}),
|
|
32
|
+
linear-gradient(45deg, ${e(t.palette.primary.main, 0.04)} 0%, transparent 60%)` : `linear-gradient(0deg, ${(t.vars || t).palette.background.default}, ${(t.vars || t).palette.background.default}),
|
|
33
|
+
linear-gradient(45deg, ${e(t.palette.primary.light, 0.06)} 0%, transparent 60%)`,
|
|
34
|
+
// Enhanced border with gradient and inner highlight
|
|
35
|
+
border: `1px solid ${a === "light" ? e(t.palette.divider, 0.25) : e(t.palette.divider, 0.4)}`,
|
|
36
|
+
// Inner highlight for premium glass effect
|
|
37
|
+
"&::before": {
|
|
38
|
+
content: '""',
|
|
39
|
+
position: "absolute",
|
|
40
|
+
top: 0,
|
|
41
|
+
left: 0,
|
|
42
|
+
right: 0,
|
|
43
|
+
height: "1px",
|
|
44
|
+
background: a === "light" ? `linear-gradient(90deg, transparent, ${e(t.palette.common.white, 0.6)}, transparent)` : `linear-gradient(90deg, transparent, ${e(t.palette.common.white, 0.2)}, transparent)`,
|
|
45
|
+
borderRadius: `${r}px ${r}px 0 0`
|
|
46
|
+
},
|
|
47
|
+
// Inner shadow for depth
|
|
48
|
+
"&::after": {
|
|
49
|
+
content: '""',
|
|
50
|
+
position: "absolute",
|
|
51
|
+
inset: "1px",
|
|
52
|
+
borderRadius: `${Number(r) - 1}px`,
|
|
53
|
+
background: a === "light" ? `linear-gradient(180deg, ${e(t.palette.common.white, 0.1)} 0%, transparent 50%)` : `linear-gradient(180deg, ${e(t.palette.common.white, 0.05)} 0%, transparent 50%)`,
|
|
54
|
+
pointerEvents: "none"
|
|
55
|
+
},
|
|
56
|
+
// Premium shadow system with multiple layers
|
|
57
|
+
boxShadow: a === "light" ? `0 1px 3px ${e(t.palette.common.black, 0.08)},
|
|
58
|
+
0 4px 12px ${e(t.palette.common.black, 0.05)},
|
|
59
|
+
0 16px 24px ${e(t.palette.common.black, 0.03)},
|
|
60
|
+
inset 0 1px 0 ${e(t.palette.common.white, 0.2)}` : `0 2px 8px ${e(t.palette.common.black, 0.3)},
|
|
61
|
+
0 8px 24px ${e(t.palette.common.black, 0.2)},
|
|
62
|
+
0 16px 32px ${e(t.palette.common.black, 0.1)},
|
|
63
|
+
inset 0 1px 0 ${e(t.palette.common.white, 0.1)}`,
|
|
64
|
+
// Enhanced backdrop blur
|
|
65
|
+
backdropFilter: "blur(20px) saturate(1.2)",
|
|
66
|
+
WebkitBackdropFilter: "blur(20px) saturate(1.2)",
|
|
67
|
+
// Smooth premium transitions
|
|
68
|
+
transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",
|
|
69
|
+
// Advanced hover effects with multiple animations
|
|
70
|
+
"&:hover": {
|
|
71
|
+
// Keep strong contrast on hover; only adjust subtleties
|
|
72
|
+
background: a === "light" ? `linear-gradient(0deg, ${(t.vars || t).palette.background.paper}, ${(t.vars || t).palette.background.paper}),
|
|
73
|
+
linear-gradient(45deg, ${e(t.palette.primary.main, 0.08)} 0%, transparent 60%)` : `linear-gradient(0deg, ${(t.vars || t).palette.background.default}, ${(t.vars || t).palette.background.default}),
|
|
74
|
+
linear-gradient(45deg, ${e(t.palette.primary.light, 0.1)} 0%, transparent 60%)`,
|
|
75
|
+
// Subtle elevation
|
|
76
|
+
boxShadow: a === "light" ? `0 6px 18px ${e(t.palette.common.black, 0.12)}` : `0 10px 24px ${e(t.palette.common.black, 0.4)}`,
|
|
77
|
+
// Gentle lift only
|
|
78
|
+
transform: "translateY(-1px)",
|
|
79
|
+
// Simple border tint for feedback
|
|
80
|
+
border: `1px solid ${a === "light" ? e(t.palette.primary.main, 0.2) : e(t.palette.primary.light, 0.25)}`
|
|
81
|
+
},
|
|
82
|
+
// Enhanced active state with micro-interactions
|
|
83
|
+
"&:active": {
|
|
84
|
+
transform: "translateY(-1px) scale(1.01)",
|
|
85
|
+
transition: "all 0.15s cubic-bezier(0.4, 0, 0.6, 1)",
|
|
86
|
+
boxShadow: a === "light" ? `0 2px 8px ${e(t.palette.common.black, 0.1)},
|
|
87
|
+
0 8px 24px ${e(t.palette.common.black, 0.06)},
|
|
88
|
+
inset 0 1px 0 ${e(t.palette.common.white, 0.2)}` : `0 4px 16px ${e(t.palette.common.black, 0.35)},
|
|
89
|
+
0 12px 32px ${e(t.palette.common.black, 0.25)},
|
|
90
|
+
inset 0 1px 0 ${e(t.palette.common.white, 0.1)}`
|
|
91
|
+
},
|
|
92
|
+
// Premium focus state with animated glow
|
|
93
|
+
"&:focus-visible": {
|
|
94
|
+
outline: "none",
|
|
95
|
+
boxShadow: a === "light" ? `0 4px 12px ${e(t.palette.common.black, 0.12)},
|
|
96
|
+
0 12px 32px ${e(t.palette.common.black, 0.08)},
|
|
97
|
+
0 0 0 3px ${e(t.palette.primary.main, 0.3)},
|
|
98
|
+
0 0 20px ${e(t.palette.primary.main, 0.2)},
|
|
99
|
+
inset 0 1px 0 ${e(t.palette.common.white, 0.3)}` : `0 8px 24px ${e(t.palette.common.black, 0.4)},
|
|
100
|
+
0 16px 48px ${e(t.palette.common.black, 0.3)},
|
|
101
|
+
0 0 0 3px ${e(t.palette.primary.light, 0.4)},
|
|
102
|
+
0 0 30px ${e(t.palette.primary.light, 0.3)},
|
|
103
|
+
inset 0 1px 0 ${e(t.palette.common.white, 0.15)}`,
|
|
104
|
+
transform: "translateY(-1px)"
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
ref: m,
|
|
108
|
+
disableRipple: !0,
|
|
109
|
+
...l,
|
|
110
|
+
fullWidth: !0,
|
|
111
|
+
children: /* @__PURE__ */ p.jsxs(
|
|
112
|
+
n,
|
|
113
|
+
{
|
|
114
|
+
sx: {
|
|
115
|
+
position: "relative",
|
|
116
|
+
zIndex: 2,
|
|
117
|
+
fontSize: 16,
|
|
118
|
+
fontWeight: a === "light" ? 700 : 600,
|
|
119
|
+
// Enhanced gradient with multiple layers
|
|
120
|
+
background: `
|
|
121
|
+
${(t.vars || t).palette.gradient.primary},
|
|
122
|
+
linear-gradient(135deg,
|
|
123
|
+
${a === "light" ? e(t.palette.primary.dark, 0.1) : e(t.palette.primary.light, 0.1)} 0%,
|
|
124
|
+
transparent 50%,
|
|
125
|
+
${a === "light" ? e(t.palette.primary.main, 0.1) : e(t.palette.primary.light, 0.1)} 100%)
|
|
126
|
+
`,
|
|
127
|
+
backgroundSize: "100% 100%, 200% 200%",
|
|
128
|
+
backgroundClip: "text",
|
|
129
|
+
WebkitBackgroundClip: "text",
|
|
130
|
+
color: "transparent",
|
|
131
|
+
WebkitTextFillColor: "transparent",
|
|
132
|
+
// Premium transitions with staggered timing
|
|
133
|
+
transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-position 0.6s ease",
|
|
134
|
+
// Advanced text effects
|
|
135
|
+
textShadow: a === "light" ? `0 1px 3px ${e(t.palette.common.black, 0.08)},
|
|
136
|
+
0 2px 6px ${e(t.palette.primary.main, 0.1)}` : `0 2px 4px ${e(t.palette.common.black, 0.4)},
|
|
137
|
+
0 4px 8px ${e(t.palette.primary.light, 0.2)}`,
|
|
138
|
+
// Enhanced typography
|
|
139
|
+
letterSpacing: "0.025em",
|
|
140
|
+
lineHeight: 1.2,
|
|
141
|
+
// Crisp text rendering
|
|
142
|
+
WebkitFontSmoothing: "antialiased",
|
|
143
|
+
MozOsxFontSmoothing: "grayscale",
|
|
144
|
+
textRendering: "optimizeLegibility",
|
|
145
|
+
// Hover effects for the text
|
|
146
|
+
"&:hover": {
|
|
147
|
+
backgroundPosition: "100% 0, 50% 50%",
|
|
148
|
+
transform: "scale(1.02)",
|
|
149
|
+
textShadow: a === "light" ? `0 2px 4px ${e(t.palette.common.black, 0.12)},
|
|
150
|
+
0 4px 12px ${e(t.palette.primary.main, 0.15)},
|
|
151
|
+
0 0 20px ${e(t.palette.primary.main, 0.1)}` : `0 3px 6px ${e(t.palette.common.black, 0.5)},
|
|
152
|
+
0 6px 16px ${e(t.palette.primary.light, 0.25)},
|
|
153
|
+
0 0 30px ${e(t.palette.primary.light, 0.15)}`
|
|
154
|
+
},
|
|
155
|
+
// Text glow animation on parent hover
|
|
156
|
+
"button:hover &": {
|
|
157
|
+
animation: "textGlow 2s ease-in-out infinite alternate"
|
|
158
|
+
},
|
|
159
|
+
// Keyframe animation for subtle text glow
|
|
160
|
+
"@keyframes textGlow": {
|
|
161
|
+
"0%": {
|
|
162
|
+
filter: "brightness(1) contrast(1)"
|
|
163
|
+
},
|
|
164
|
+
"100%": {
|
|
165
|
+
filter: "brightness(1.1) contrast(1.05)"
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
children: [
|
|
170
|
+
i,
|
|
171
|
+
/* @__PURE__ */ p.jsx(
|
|
172
|
+
n,
|
|
173
|
+
{
|
|
174
|
+
sx: {
|
|
175
|
+
position: "absolute",
|
|
176
|
+
top: 0,
|
|
177
|
+
left: 0,
|
|
178
|
+
right: 0,
|
|
179
|
+
bottom: 0,
|
|
180
|
+
background: a === "light" ? `linear-gradient(180deg, ${e(t.palette.common.white, 0.3)} 0%, transparent 50%)` : `linear-gradient(180deg, ${e(t.palette.common.white, 0.1)} 0%, transparent 50%)`,
|
|
181
|
+
backgroundClip: "text",
|
|
182
|
+
WebkitBackgroundClip: "text",
|
|
183
|
+
color: "transparent",
|
|
184
|
+
WebkitTextFillColor: "transparent",
|
|
185
|
+
pointerEvents: "none",
|
|
186
|
+
opacity: 0.6,
|
|
187
|
+
transition: "opacity 0.3s ease",
|
|
188
|
+
"button:hover &": {
|
|
189
|
+
opacity: 0.8
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
children: i
|
|
193
|
+
}
|
|
194
|
+
)
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
)
|
|
25
198
|
}
|
|
26
|
-
|
|
27
|
-
ref: n,
|
|
28
|
-
disableRipple: !0,
|
|
29
|
-
...i,
|
|
30
|
-
fullWidth: !0,
|
|
31
|
-
children: /* @__PURE__ */ t.jsx(s, { className: "gradient-text", fontSize: 16, children: r })
|
|
199
|
+
)
|
|
32
200
|
}
|
|
33
|
-
)
|
|
201
|
+
);
|
|
34
202
|
};
|
|
35
203
|
export {
|
|
36
|
-
|
|
204
|
+
y as default
|
|
37
205
|
};
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.gradient-text{background-image:var(--s-palette-gradient-primary);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
|