@volt-ui/react 0.1.0 → 0.1.2
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/README.md +240 -19
- package/dist/index.js +61 -31
- package/dist/index.mjs +61 -31
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -1,36 +1,257 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# ⚡ Volt UI
|
|
4
|
+
|
|
5
|
+
**100+ stunning React animation components for modern web experiences**
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@volt-ui/react)
|
|
8
|
+
[](https://www.npmjs.com/package/@volt-ui/react)
|
|
9
|
+
[](https://opensource.org/licenses/MIT)
|
|
10
|
+
|
|
11
|
+
[Documentation](https://volt-ui-two.vercel.app/components?docs=true) • [Components](https://volt-ui-two.vercel.app/components) • [npm](https://www.npmjs.com/package/@volt-ui/react)
|
|
12
|
+
</div>
|
|
2
13
|
|
|
3
|
-
|
|
14
|
+
---
|
|
4
15
|
|
|
5
|
-
|
|
16
|
+
## 🚀 What is Volt UI?
|
|
6
17
|
|
|
18
|
+
Volt UI is a modern React component library built for developers who want stunning animations without the hassle. Born from countless hours of experimentation, Volt UI brings together the best of Framer Motion, GSAP, and Three.js into one cohesive package.
|
|
19
|
+
|
|
20
|
+
**100+ production-ready components** including:
|
|
21
|
+
- 🎨 **16 Text Animations** - Wave, Glitch, Typewriter, Matrix, and more
|
|
22
|
+
- 🔘 **10 Button Animations** - Magnetic, Ripple, Liquid Fill, Shimmer
|
|
23
|
+
- 🃏 **15 Card Effects** - Tilt, Glass, Holographic, Flip, Portal
|
|
24
|
+
- 🖱️ **10 Cursor Effects** - Trail, Magnetic, Ripple, Spotlight, Gravity
|
|
25
|
+
- ⏳ **17 Loaders** - Pulse, Orbit, DNA, Morph, Infinity
|
|
26
|
+
- 🌌 **16 Background Effects** - Aurora, Mesh Gradient, Neural Fabric, Vortex
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## ✨ Quick Start
|
|
31
|
+
|
|
32
|
+
### Installation
|
|
7
33
|
```bash
|
|
8
|
-
npm
|
|
9
|
-
# or
|
|
10
|
-
yarn dev
|
|
34
|
+
npm install @volt-ui/react
|
|
11
35
|
# or
|
|
12
|
-
|
|
36
|
+
yarn add @volt-ui/react
|
|
13
37
|
# or
|
|
14
|
-
|
|
38
|
+
pnpm add @volt-ui/react
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Peer Dependencies
|
|
42
|
+
```bash
|
|
43
|
+
npm install react react-dom framer-motion gsap three @react-three/fiber @react-three/drei
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Basic Usage
|
|
47
|
+
```tsx
|
|
48
|
+
import { WaveText, MagneticButton, SpotlightCard } from '@volt-ui/react';
|
|
49
|
+
|
|
50
|
+
export default function App() {
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
<WaveText text="Hello Volt UI" />
|
|
54
|
+
|
|
55
|
+
<MagneticButton onClick={() => alert('Clicked!')}>
|
|
56
|
+
Click Me
|
|
57
|
+
</MagneticButton>
|
|
58
|
+
|
|
59
|
+
<SpotlightCard>
|
|
60
|
+
<h2>Amazing Card</h2>
|
|
61
|
+
<p>With spotlight effect!</p>
|
|
62
|
+
</SpotlightCard>
|
|
63
|
+
</div>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 📚 Documentation
|
|
71
|
+
|
|
72
|
+
Visit our [interactive documentation](https://volt-ui-two.vercel.app/components?docs=true) to:
|
|
73
|
+
- 👀 Preview all 100+ components live
|
|
74
|
+
- 🎛️ Customize props in real-time
|
|
75
|
+
- 📋 Copy ready-to-use code snippets
|
|
76
|
+
- 📖 View full source code
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 🎯 Features
|
|
81
|
+
|
|
82
|
+
- ⚡ **100+ Components** - Text, buttons, cards, cursors, loaders, backgrounds
|
|
83
|
+
- 🎨 **Fully Customizable** - Every component comes with extensive props
|
|
84
|
+
- 📱 **Responsive** - Works seamlessly on all screen sizes
|
|
85
|
+
- 🎭 **Smooth Animations** - Built with Framer Motion, GSAP, and Three.js
|
|
86
|
+
- 🔧 **TypeScript Ready** - Full type definitions included
|
|
87
|
+
- 🪶 **Tree-shakable** - Import only what you need
|
|
88
|
+
- 🎁 **Free Forever** - MIT licensed, no paywalls, no limits
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## 📦 Component Categories
|
|
93
|
+
|
|
94
|
+
### Text Animations
|
|
95
|
+
```tsx
|
|
96
|
+
import {
|
|
97
|
+
WaveText, GlitchText, TypewriterText, ShatterText,
|
|
98
|
+
NeonText, SplitText, MatrixText, BounceText,
|
|
99
|
+
FlipText, GradientText, ScrambleText, PulseText,
|
|
100
|
+
ScatterAssemble, SpotlightText, LiquidText, MagneticText
|
|
101
|
+
} from '@volt-ui/react';
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Button Animations
|
|
105
|
+
```tsx
|
|
106
|
+
import {
|
|
107
|
+
RippleButton, MagneticButton, LiquidFillButton,
|
|
108
|
+
ShimmerButton, GlowPulseButton, PressButton,
|
|
109
|
+
SplitRevealButton, ParticleButton, BorderGlowButton,
|
|
110
|
+
ExpandButton
|
|
111
|
+
} from '@volt-ui/react';
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Card Effects
|
|
115
|
+
```tsx
|
|
116
|
+
import {
|
|
117
|
+
TiltCard, GlassCard, HolographicCard, FlipCard,
|
|
118
|
+
ParticleCard, SpotlightCard, MorphCard, ExpandCard,
|
|
119
|
+
NeonCard, StackCard, LiquidCard, ShatterCard,
|
|
120
|
+
PortalCard, MagneticCard, RippleCard
|
|
121
|
+
} from '@volt-ui/react';
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Cursor Effects
|
|
125
|
+
```tsx
|
|
126
|
+
import {
|
|
127
|
+
TrailCursor, MagneticCursor, RippleCursor,
|
|
128
|
+
SpotlightCursor, EmojiCursor, StringCursor,
|
|
129
|
+
WebCursor, GravityCursor, InkCursor, BlackHoleCursor
|
|
130
|
+
} from '@volt-ui/react';
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Loaders
|
|
134
|
+
```tsx
|
|
135
|
+
import {
|
|
136
|
+
PulseLoader, OrbitLoader, MorphLoader, DNALoader,
|
|
137
|
+
ProgressLoader, RingLoader, SkeletonLoader, WaveLoader,
|
|
138
|
+
GridLoader, ChasingDotsLoader, InfinityLoader,
|
|
139
|
+
TypewriterLoader, ParticleRingLoader, BouncingBarLoader,
|
|
140
|
+
GlitchLoader, SpiralLoader, FlipCardLoader
|
|
141
|
+
} from '@volt-ui/react';
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Background Effects
|
|
145
|
+
```tsx
|
|
146
|
+
import {
|
|
147
|
+
GradientWaves, DotMatrix, AuroraBeam,
|
|
148
|
+
ParticleConstellationBackground, MeshGradientBackground,
|
|
149
|
+
MatrixRainBackground, VortexBackground, NeuralFabric,
|
|
150
|
+
DepthField, AcidBath, Silk, Halo, Arc, Dune,
|
|
151
|
+
Monsoon, WormHoleVortex
|
|
152
|
+
} from '@volt-ui/react';
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## 🌟 Example Projects
|
|
158
|
+
```tsx
|
|
159
|
+
// Landing Page Hero
|
|
160
|
+
import { WaveText, ParticleConstellationBackground } from '@volt-ui/react';
|
|
161
|
+
|
|
162
|
+
export default function Hero() {
|
|
163
|
+
return (
|
|
164
|
+
<div className="relative h-screen">
|
|
165
|
+
<ParticleConstellationBackground />
|
|
166
|
+
<div className="absolute inset-0 flex items-center justify-center">
|
|
167
|
+
<WaveText
|
|
168
|
+
text="Welcome to the Future"
|
|
169
|
+
fontSize={72}
|
|
170
|
+
waveSpeed={2}
|
|
171
|
+
/>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
```tsx
|
|
178
|
+
// Animated Dashboard Card
|
|
179
|
+
import { SpotlightCard, TypewriterText } from '@volt-ui/react';
|
|
180
|
+
|
|
181
|
+
export default function DashboardCard() {
|
|
182
|
+
return (
|
|
183
|
+
<SpotlightCard className="p-8">
|
|
184
|
+
<TypewriterText
|
|
185
|
+
text="Your stats are looking good!"
|
|
186
|
+
speed={50}
|
|
187
|
+
/>
|
|
188
|
+
<p className="mt-4">Revenue: $12,345</p>
|
|
189
|
+
</SpotlightCard>
|
|
190
|
+
);
|
|
191
|
+
}
|
|
15
192
|
```
|
|
16
193
|
|
|
17
|
-
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## 🛠️ Requirements
|
|
197
|
+
|
|
198
|
+
- React 18.0.0 or higher
|
|
199
|
+
- React DOM 18.0.0 or higher
|
|
200
|
+
- Framer Motion 12.0.0 or higher
|
|
201
|
+
- GSAP 3.0.0 or higher
|
|
202
|
+
- Three.js (for 3D components)
|
|
203
|
+
- Tailwind CSS (optional, for some components)
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## 💚 Free & Open Source
|
|
208
|
+
|
|
209
|
+
Volt UI is **completely free**. No paywalls, no "pro" tiers, no credit card required. Use it in your side projects, your startup, or your Fortune 500 company - we don't care. It's yours.
|
|
210
|
+
|
|
211
|
+
**Why?** Because we've been there. We've paid $300 for component libraries we used twice. We've dealt with licensing headaches. We've rage-quit after hitting feature limits.
|
|
212
|
+
|
|
213
|
+
**Our promise:** Volt UI will always be free, MIT licensed, and available to everyone. No strings attached. No rug pulls. Just good components.
|
|
214
|
+
|
|
215
|
+
If Volt UI helps you ship faster, consider:
|
|
216
|
+
- ⭐ [Starring us on GitHub](https://github.com/Mahmoud-ctrl/volt-ui)
|
|
217
|
+
- 🐦 Sharing on Twitter (coming soon!)
|
|
218
|
+
- 📝 Writing about your experience
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 🤝 Contributing
|
|
223
|
+
|
|
224
|
+
We welcome contributions! Whether it's:
|
|
225
|
+
- 🐛 Bug reports
|
|
226
|
+
- 💡 Feature requests
|
|
227
|
+
- 📝 Documentation improvements
|
|
228
|
+
- 🎨 New components
|
|
18
229
|
|
|
19
|
-
|
|
230
|
+
See our [Contributing Guide](CONTRIBUTING.md) to get started.
|
|
20
231
|
|
|
21
|
-
|
|
232
|
+
---
|
|
22
233
|
|
|
23
|
-
##
|
|
234
|
+
## 📄 License
|
|
24
235
|
|
|
25
|
-
|
|
236
|
+
MIT © [Mahmoud](https://github.com/Mahmoud-ctrl)
|
|
26
237
|
|
|
27
|
-
|
|
28
|
-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
238
|
+
---
|
|
29
239
|
|
|
30
|
-
|
|
240
|
+
## 🔗 Links
|
|
31
241
|
|
|
32
|
-
|
|
242
|
+
- [Documentation](https://volt-ui-two.vercel.app/components?docs=true)
|
|
243
|
+
- [Component Gallery](https://volt-ui-two.vercel.app/components)
|
|
244
|
+
- [npm Package](https://www.npmjs.com/package/@volt-ui/react)
|
|
245
|
+
- [GitHub Repository](https://github.com/Mahmoud-ctrl/volt-ui)
|
|
246
|
+
- [Report Issues](https://github.com/Mahmoud-ctrl/volt-ui/issues)
|
|
33
247
|
|
|
34
|
-
|
|
248
|
+
---
|
|
35
249
|
|
|
36
|
-
|
|
250
|
+
<div align="center">
|
|
251
|
+
<p>Made with ⚡ by <a href="https://github.com/Mahmoud-ctrl">Mahmoud</a></p>
|
|
252
|
+
<p>
|
|
253
|
+
<a href="https://volt-ui-two.vercel.app">Website</a> •
|
|
254
|
+
<a href="https://www.npmjs.com/package/@volt-ui/react">npm</a> •
|
|
255
|
+
<a href="https://github.com/Mahmoud-ctrl/volt-ui">GitHub</a>
|
|
256
|
+
</p>
|
|
257
|
+
</div>
|
package/dist/index.js
CHANGED
|
@@ -953,18 +953,21 @@ var RippleButton = ({
|
|
|
953
953
|
y,
|
|
954
954
|
id: Date.now()
|
|
955
955
|
};
|
|
956
|
-
setRipples([...
|
|
956
|
+
setRipples((prev) => [...prev, newRipple]);
|
|
957
957
|
setTimeout(() => {
|
|
958
958
|
setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
|
|
959
959
|
}, 600);
|
|
960
|
-
|
|
961
|
-
|
|
960
|
+
if (onClick) {
|
|
961
|
+
onClick();
|
|
962
|
+
} else {
|
|
963
|
+
notify(getRandomPhrase(), "info");
|
|
964
|
+
}
|
|
962
965
|
};
|
|
963
966
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
964
967
|
"button",
|
|
965
968
|
{
|
|
966
969
|
onClick: handleClick,
|
|
967
|
-
className: `relative overflow-hidden px-8 py-4 rounded-lg font-bold text-white text-lg ${className}`,
|
|
970
|
+
className: `relative overflow-hidden px-8 py-4 rounded-lg font-bold text-white text-lg ${className} cursor-pointer`,
|
|
968
971
|
style: { backgroundColor: color },
|
|
969
972
|
children: [
|
|
970
973
|
children,
|
|
@@ -1027,11 +1030,14 @@ var MagneticButton = ({
|
|
|
1027
1030
|
onMouseEnter: () => setIsHovered(true),
|
|
1028
1031
|
onMouseLeave: handleMouseLeave,
|
|
1029
1032
|
onClick: () => {
|
|
1030
|
-
|
|
1031
|
-
|
|
1033
|
+
if (onClick) {
|
|
1034
|
+
onClick();
|
|
1035
|
+
} else {
|
|
1036
|
+
notify(getRandomPhrase(), "info");
|
|
1037
|
+
}
|
|
1032
1038
|
},
|
|
1033
1039
|
style: { x, y, backgroundColor: color },
|
|
1034
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative overflow-hidden ${className}`,
|
|
1040
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative overflow-hidden ${className} cursor-pointer`,
|
|
1035
1041
|
whileHover: { scale: 1.05 },
|
|
1036
1042
|
whileTap: { scale: 0.95 },
|
|
1037
1043
|
children: [
|
|
@@ -1071,10 +1077,13 @@ var LiquidFillButton = ({
|
|
|
1071
1077
|
onMouseEnter: () => setIsHovered(true),
|
|
1072
1078
|
onMouseLeave: () => setIsHovered(false),
|
|
1073
1079
|
onClick: () => {
|
|
1074
|
-
|
|
1075
|
-
|
|
1080
|
+
if (onClick) {
|
|
1081
|
+
onClick();
|
|
1082
|
+
} else {
|
|
1083
|
+
notify(getRandomPhrase(), "info");
|
|
1084
|
+
}
|
|
1076
1085
|
},
|
|
1077
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-lg overflow-hidden ${className}`,
|
|
1086
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-lg overflow-hidden ${className} cursor-pointer`,
|
|
1078
1087
|
style: {
|
|
1079
1088
|
border: `2px solid ${borderColor}`,
|
|
1080
1089
|
color: isHovered ? textColor : borderColor
|
|
@@ -1112,10 +1121,13 @@ var ShimmerButton = ({
|
|
|
1112
1121
|
"button",
|
|
1113
1122
|
{
|
|
1114
1123
|
onClick: () => {
|
|
1115
|
-
|
|
1116
|
-
|
|
1124
|
+
if (onClick) {
|
|
1125
|
+
onClick();
|
|
1126
|
+
} else {
|
|
1127
|
+
notify(getRandomPhrase(), "info");
|
|
1128
|
+
}
|
|
1117
1129
|
},
|
|
1118
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className}`,
|
|
1130
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className} cursor-pointer`,
|
|
1119
1131
|
style: { backgroundColor: color },
|
|
1120
1132
|
children: [
|
|
1121
1133
|
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
@@ -1158,10 +1170,13 @@ var GlowPulseButton = ({
|
|
|
1158
1170
|
import_framer_motion22.motion.button,
|
|
1159
1171
|
{
|
|
1160
1172
|
onClick: () => {
|
|
1161
|
-
|
|
1162
|
-
|
|
1173
|
+
if (onClick) {
|
|
1174
|
+
onClick();
|
|
1175
|
+
} else {
|
|
1176
|
+
notify(getRandomPhrase(), "info");
|
|
1177
|
+
}
|
|
1163
1178
|
},
|
|
1164
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg ${className}`,
|
|
1179
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg ${className} cursor-pointer`,
|
|
1165
1180
|
style: {
|
|
1166
1181
|
backgroundColor: color
|
|
1167
1182
|
},
|
|
@@ -1205,10 +1220,13 @@ var PressButton = ({
|
|
|
1205
1220
|
onMouseUp: () => setIsPressed(false),
|
|
1206
1221
|
onMouseLeave: () => setIsPressed(false),
|
|
1207
1222
|
onClick: () => {
|
|
1208
|
-
|
|
1209
|
-
|
|
1223
|
+
if (onClick) {
|
|
1224
|
+
onClick();
|
|
1225
|
+
} else {
|
|
1226
|
+
notify(getRandomPhrase(), "info");
|
|
1227
|
+
}
|
|
1210
1228
|
},
|
|
1211
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative ${className}`,
|
|
1229
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative ${className} cursor-pointer`,
|
|
1212
1230
|
style: {
|
|
1213
1231
|
backgroundColor: color,
|
|
1214
1232
|
boxShadow: isPressed ? `0 2px 0 ${shadowColor}` : `0 ${depth}px 0 ${shadowColor}`,
|
|
@@ -1243,10 +1261,13 @@ var SplitRevealButton = ({
|
|
|
1243
1261
|
onMouseEnter: () => setIsHovered(true),
|
|
1244
1262
|
onMouseLeave: () => setIsHovered(false),
|
|
1245
1263
|
onClick: () => {
|
|
1246
|
-
|
|
1247
|
-
|
|
1264
|
+
if (onClick) {
|
|
1265
|
+
onClick();
|
|
1266
|
+
} else {
|
|
1267
|
+
notify(getRandomPhrase(), "info");
|
|
1268
|
+
}
|
|
1248
1269
|
},
|
|
1249
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className}`,
|
|
1270
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className} cursor-pointer`,
|
|
1250
1271
|
style: { backgroundColor: isHovered ? hoverColor : color },
|
|
1251
1272
|
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative h-6 w-8 flex items-center justify-center", children: [
|
|
1252
1273
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
@@ -1309,14 +1330,17 @@ var ParticleButton = ({
|
|
|
1309
1330
|
setTimeout(() => {
|
|
1310
1331
|
setParticles([]);
|
|
1311
1332
|
}, 1e3);
|
|
1312
|
-
|
|
1313
|
-
|
|
1333
|
+
if (onClick) {
|
|
1334
|
+
onClick();
|
|
1335
|
+
} else {
|
|
1336
|
+
notify(getRandomPhrase(), "info");
|
|
1337
|
+
}
|
|
1314
1338
|
};
|
|
1315
1339
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1316
1340
|
"button",
|
|
1317
1341
|
{
|
|
1318
1342
|
onClick: handleClick,
|
|
1319
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-visible ${className}`,
|
|
1343
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-visible ${className} cursor-pointer`,
|
|
1320
1344
|
style: { backgroundColor: color },
|
|
1321
1345
|
children: [
|
|
1322
1346
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
@@ -1376,10 +1400,13 @@ var BorderGlowButton = ({
|
|
|
1376
1400
|
"button",
|
|
1377
1401
|
{
|
|
1378
1402
|
onClick: () => {
|
|
1379
|
-
|
|
1380
|
-
|
|
1403
|
+
if (onClick) {
|
|
1404
|
+
onClick();
|
|
1405
|
+
} else {
|
|
1406
|
+
notify(getRandomPhrase(), "info");
|
|
1407
|
+
}
|
|
1381
1408
|
},
|
|
1382
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg ${className}`,
|
|
1409
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg ${className} cursor-pointer`,
|
|
1383
1410
|
style: { backgroundColor: color },
|
|
1384
1411
|
children: [
|
|
1385
1412
|
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
@@ -1434,10 +1461,13 @@ var ExpandButton = ({
|
|
|
1434
1461
|
onMouseEnter: () => setIsExpanded(true),
|
|
1435
1462
|
onMouseLeave: () => setIsExpanded(false),
|
|
1436
1463
|
onClick: () => {
|
|
1437
|
-
|
|
1438
|
-
|
|
1464
|
+
if (onClick) {
|
|
1465
|
+
onClick();
|
|
1466
|
+
} else {
|
|
1467
|
+
notify(getRandomPhrase(), "info");
|
|
1468
|
+
}
|
|
1439
1469
|
},
|
|
1440
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className}`,
|
|
1470
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className} cursor-pointer`,
|
|
1441
1471
|
style: { backgroundColor: color },
|
|
1442
1472
|
animate: {
|
|
1443
1473
|
width: isExpanded ? "auto" : "auto"
|
package/dist/index.mjs
CHANGED
|
@@ -837,18 +837,21 @@ var RippleButton = ({
|
|
|
837
837
|
y,
|
|
838
838
|
id: Date.now()
|
|
839
839
|
};
|
|
840
|
-
setRipples([...
|
|
840
|
+
setRipples((prev) => [...prev, newRipple]);
|
|
841
841
|
setTimeout(() => {
|
|
842
842
|
setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
|
|
843
843
|
}, 600);
|
|
844
|
-
|
|
845
|
-
|
|
844
|
+
if (onClick) {
|
|
845
|
+
onClick();
|
|
846
|
+
} else {
|
|
847
|
+
notify(getRandomPhrase(), "info");
|
|
848
|
+
}
|
|
846
849
|
};
|
|
847
850
|
return /* @__PURE__ */ jsxs8(
|
|
848
851
|
"button",
|
|
849
852
|
{
|
|
850
853
|
onClick: handleClick,
|
|
851
|
-
className: `relative overflow-hidden px-8 py-4 rounded-lg font-bold text-white text-lg ${className}`,
|
|
854
|
+
className: `relative overflow-hidden px-8 py-4 rounded-lg font-bold text-white text-lg ${className} cursor-pointer`,
|
|
852
855
|
style: { backgroundColor: color },
|
|
853
856
|
children: [
|
|
854
857
|
children,
|
|
@@ -911,11 +914,14 @@ var MagneticButton = ({
|
|
|
911
914
|
onMouseEnter: () => setIsHovered(true),
|
|
912
915
|
onMouseLeave: handleMouseLeave,
|
|
913
916
|
onClick: () => {
|
|
914
|
-
|
|
915
|
-
|
|
917
|
+
if (onClick) {
|
|
918
|
+
onClick();
|
|
919
|
+
} else {
|
|
920
|
+
notify(getRandomPhrase(), "info");
|
|
921
|
+
}
|
|
916
922
|
},
|
|
917
923
|
style: { x, y, backgroundColor: color },
|
|
918
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative overflow-hidden ${className}`,
|
|
924
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative overflow-hidden ${className} cursor-pointer`,
|
|
919
925
|
whileHover: { scale: 1.05 },
|
|
920
926
|
whileTap: { scale: 0.95 },
|
|
921
927
|
children: [
|
|
@@ -955,10 +961,13 @@ var LiquidFillButton = ({
|
|
|
955
961
|
onMouseEnter: () => setIsHovered(true),
|
|
956
962
|
onMouseLeave: () => setIsHovered(false),
|
|
957
963
|
onClick: () => {
|
|
958
|
-
|
|
959
|
-
|
|
964
|
+
if (onClick) {
|
|
965
|
+
onClick();
|
|
966
|
+
} else {
|
|
967
|
+
notify(getRandomPhrase(), "info");
|
|
968
|
+
}
|
|
960
969
|
},
|
|
961
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-lg overflow-hidden ${className}`,
|
|
970
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-lg overflow-hidden ${className} cursor-pointer`,
|
|
962
971
|
style: {
|
|
963
972
|
border: `2px solid ${borderColor}`,
|
|
964
973
|
color: isHovered ? textColor : borderColor
|
|
@@ -996,10 +1005,13 @@ var ShimmerButton = ({
|
|
|
996
1005
|
"button",
|
|
997
1006
|
{
|
|
998
1007
|
onClick: () => {
|
|
999
|
-
|
|
1000
|
-
|
|
1008
|
+
if (onClick) {
|
|
1009
|
+
onClick();
|
|
1010
|
+
} else {
|
|
1011
|
+
notify(getRandomPhrase(), "info");
|
|
1012
|
+
}
|
|
1001
1013
|
},
|
|
1002
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className}`,
|
|
1014
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className} cursor-pointer`,
|
|
1003
1015
|
style: { backgroundColor: color },
|
|
1004
1016
|
children: [
|
|
1005
1017
|
/* @__PURE__ */ jsx21(
|
|
@@ -1042,10 +1054,13 @@ var GlowPulseButton = ({
|
|
|
1042
1054
|
motion22.button,
|
|
1043
1055
|
{
|
|
1044
1056
|
onClick: () => {
|
|
1045
|
-
|
|
1046
|
-
|
|
1057
|
+
if (onClick) {
|
|
1058
|
+
onClick();
|
|
1059
|
+
} else {
|
|
1060
|
+
notify(getRandomPhrase(), "info");
|
|
1061
|
+
}
|
|
1047
1062
|
},
|
|
1048
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg ${className}`,
|
|
1063
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg ${className} cursor-pointer`,
|
|
1049
1064
|
style: {
|
|
1050
1065
|
backgroundColor: color
|
|
1051
1066
|
},
|
|
@@ -1089,10 +1104,13 @@ var PressButton = ({
|
|
|
1089
1104
|
onMouseUp: () => setIsPressed(false),
|
|
1090
1105
|
onMouseLeave: () => setIsPressed(false),
|
|
1091
1106
|
onClick: () => {
|
|
1092
|
-
|
|
1093
|
-
|
|
1107
|
+
if (onClick) {
|
|
1108
|
+
onClick();
|
|
1109
|
+
} else {
|
|
1110
|
+
notify(getRandomPhrase(), "info");
|
|
1111
|
+
}
|
|
1094
1112
|
},
|
|
1095
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative ${className}`,
|
|
1113
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg relative ${className} cursor-pointer`,
|
|
1096
1114
|
style: {
|
|
1097
1115
|
backgroundColor: color,
|
|
1098
1116
|
boxShadow: isPressed ? `0 2px 0 ${shadowColor}` : `0 ${depth}px 0 ${shadowColor}`,
|
|
@@ -1127,10 +1145,13 @@ var SplitRevealButton = ({
|
|
|
1127
1145
|
onMouseEnter: () => setIsHovered(true),
|
|
1128
1146
|
onMouseLeave: () => setIsHovered(false),
|
|
1129
1147
|
onClick: () => {
|
|
1130
|
-
|
|
1131
|
-
|
|
1148
|
+
if (onClick) {
|
|
1149
|
+
onClick();
|
|
1150
|
+
} else {
|
|
1151
|
+
notify(getRandomPhrase(), "info");
|
|
1152
|
+
}
|
|
1132
1153
|
},
|
|
1133
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className}`,
|
|
1154
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className} cursor-pointer`,
|
|
1134
1155
|
style: { backgroundColor: isHovered ? hoverColor : color },
|
|
1135
1156
|
children: /* @__PURE__ */ jsxs12("div", { className: "relative h-6 w-8 flex items-center justify-center", children: [
|
|
1136
1157
|
/* @__PURE__ */ jsx24(
|
|
@@ -1193,14 +1214,17 @@ var ParticleButton = ({
|
|
|
1193
1214
|
setTimeout(() => {
|
|
1194
1215
|
setParticles([]);
|
|
1195
1216
|
}, 1e3);
|
|
1196
|
-
|
|
1197
|
-
|
|
1217
|
+
if (onClick) {
|
|
1218
|
+
onClick();
|
|
1219
|
+
} else {
|
|
1220
|
+
notify(getRandomPhrase(), "info");
|
|
1221
|
+
}
|
|
1198
1222
|
};
|
|
1199
1223
|
return /* @__PURE__ */ jsxs13(
|
|
1200
1224
|
"button",
|
|
1201
1225
|
{
|
|
1202
1226
|
onClick: handleClick,
|
|
1203
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-visible ${className}`,
|
|
1227
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg overflow-visible ${className} cursor-pointer`,
|
|
1204
1228
|
style: { backgroundColor: color },
|
|
1205
1229
|
children: [
|
|
1206
1230
|
/* @__PURE__ */ jsx25(
|
|
@@ -1260,10 +1284,13 @@ var BorderGlowButton = ({
|
|
|
1260
1284
|
"button",
|
|
1261
1285
|
{
|
|
1262
1286
|
onClick: () => {
|
|
1263
|
-
|
|
1264
|
-
|
|
1287
|
+
if (onClick) {
|
|
1288
|
+
onClick();
|
|
1289
|
+
} else {
|
|
1290
|
+
notify(getRandomPhrase(), "info");
|
|
1291
|
+
}
|
|
1265
1292
|
},
|
|
1266
|
-
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg ${className}`,
|
|
1293
|
+
className: `relative px-8 py-4 rounded-lg font-bold text-white text-lg ${className} cursor-pointer`,
|
|
1267
1294
|
style: { backgroundColor: color },
|
|
1268
1295
|
children: [
|
|
1269
1296
|
/* @__PURE__ */ jsx26(
|
|
@@ -1318,10 +1345,13 @@ var ExpandButton = ({
|
|
|
1318
1345
|
onMouseEnter: () => setIsExpanded(true),
|
|
1319
1346
|
onMouseLeave: () => setIsExpanded(false),
|
|
1320
1347
|
onClick: () => {
|
|
1321
|
-
|
|
1322
|
-
|
|
1348
|
+
if (onClick) {
|
|
1349
|
+
onClick();
|
|
1350
|
+
} else {
|
|
1351
|
+
notify(getRandomPhrase(), "info");
|
|
1352
|
+
}
|
|
1323
1353
|
},
|
|
1324
|
-
className: `px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className}`,
|
|
1354
|
+
className: `px-8 py-4 rounded-lg font-bold text-white text-lg overflow-hidden ${className} cursor-pointer`,
|
|
1325
1355
|
style: { backgroundColor: color },
|
|
1326
1356
|
animate: {
|
|
1327
1357
|
width: isExpanded ? "auto" : "auto"
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@volt-ui/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
7
|
-
"files": [
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
8
10
|
"private": false,
|
|
9
11
|
"scripts": {
|
|
10
12
|
"dev": "next dev --turbopack",
|