react-tilt-button 0.0.8 → 0.1.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.soft-btn{--button-raise-level: 14px;--press-inset: 5px;--button-hover-pressure: 2;--transform-speed: .16s;--radius: 14px;--surface-color: #f3f4f6;--side-color: #d1d5db;--text-color: #111827;--border-color: rgba(0, 0, 0, .35);--border-width: 2px;--glare-rgb: 255, 255, 255;--glare-alpha: 0;--glare-width: 0;--edge-aa: 0px;position:relative;border:none;background:transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}.soft-btn__wrapper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}.soft-btn__wrapper:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--button-raise-level));background:var(--side-color);border-radius:var(--radius);z-index:1}.soft-btn__content{position:relative;width:100%;height:calc(100% - var(--button-raise-level));background:var(--surface-color);color:var(--text-color);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transform:translateY(0);transition:transform var(--transform-speed) ease-out;will-change:transform;backface-visibility:hidden;transform-origin:center;z-index:2;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),0 0 var(--edge-aa) #00000073}.soft-btn__inner{display:inline-flex;align-items:center;gap:10px;z-index:4}.soft-btn--middle .soft-btn__content{transform:translateY(calc(1px * var(--button-hover-pressure)))}.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure)))}.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure)))}.soft-btn--left,.soft-btn--right{--edge-aa: 1px}.soft-btn__content:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(var(--glare-rgb),0) calc(50% - var(--glare-width) * 1%),rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% - var(--glare-width) * .5%),rgba(var(--glare-rgb),var(--glare-alpha)) 50%,rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% + var(--glare-width) * .5%),rgba(var(--glare-rgb),0) calc(50% + var(--glare-width) * 1%));background-size:200% 100%;background-position:50% 50%;opacity:0;transition:opacity .16s ease,background-position var(--transform-speed) ease;z-index:3}.soft-btn--right .soft-btn__content:after{opacity:1;background-position:0% 50%}.soft-btn--middle .soft-btn__content:after{opacity:1;background-position:50% 50%}.soft-btn--left .soft-btn__content:after{opacity:1;background-position:100% 50%}.soft-btn--active .soft-btn__content
|
|
1
|
+
.soft-btn{--button-raise-level: 14px;--press-inset: 5px;--button-hover-pressure: 2;--transform-speed: .16s;--radius: 14px;--surface-color: #f3f4f6;--side-color: #d1d5db;--text-color: #111827;--border-color: rgba(0, 0, 0, .35);--border-width: 2px;--glare-rgb: 255, 255, 255;--glare-alpha: 0;--glare-width: 0;--edge-aa: 0px;position:relative;border:none;background:transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}.soft-btn__wrapper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}.soft-btn__wrapper:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--button-raise-level));background:var(--side-color);border-radius:var(--radius);z-index:1}.soft-btn--active .soft-btn__wrapper:before{border-radius:var(--radius)}.soft-btn__content{position:relative;width:100%;height:calc(100% - var(--button-raise-level));background:var(--surface-color);color:var(--text-color);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transform:translateY(0);transition:transform var(--transform-speed) ease-out;will-change:transform;backface-visibility:hidden;transform-origin:center;z-index:2;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),0 0 var(--edge-aa) #00000073}.soft-btn__inner{display:inline-flex;align-items:center;gap:10px;z-index:4;width:100%;height:100%}.soft-btn--middle .soft-btn__content{transform:translateY(calc(1px * var(--button-hover-pressure)))}.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure)))}.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure)))}.soft-btn--left,.soft-btn--right{--edge-aa: 1px}.soft-btn--active .soft-btn__content{transform:translateY(var(--press-inset));transition:transform calc(var(--transform-speed) * .8) ease-out}.soft-btn--disabled{opacity:.6;pointer-events:none}.soft-btn--disabled .soft-btn__content:after{opacity:0}.soft-btn__content:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(var(--glare-rgb),0) calc(50% - var(--glare-width) * 1%),rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% - var(--glare-width) * .5%),rgba(var(--glare-rgb),var(--glare-alpha)) 50%,rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% + var(--glare-width) * .5%),rgba(var(--glare-rgb),0) calc(50% + var(--glare-width) * 1%));background-size:200% 100%;background-position:50% 50%;opacity:0;transition:opacity .16s ease,background-position var(--transform-speed) ease;z-index:3}.soft-btn--right .soft-btn__content:after{opacity:1;background-position:0% 50%}.soft-btn--middle .soft-btn__content:after{opacity:1;background-position:50% 50%}.soft-btn--left .soft-btn__content:after{opacity:1;background-position:100% 50%}.soft-btn--active .soft-btn__content:after{opacity:1;background:rgba(var(--glare-rgb),var(--glare-alpha));background-position:50% 50%}@supports (-moz-appearance: none){.soft-btn--left,.soft-btn--right{--edge-aa: 1.25px}}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import ve, { useRef as Re, useState as ne } from "react";
|
|
2
|
-
var
|
|
2
|
+
var X = { exports: {} }, I = {};
|
|
3
3
|
var ae;
|
|
4
4
|
function Ce() {
|
|
5
|
-
if (ae) return
|
|
5
|
+
if (ae) return I;
|
|
6
6
|
ae = 1;
|
|
7
7
|
var c = /* @__PURE__ */ Symbol.for("react.transitional.element"), s = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
8
8
|
function l(d, i, u) {
|
|
@@ -20,47 +20,47 @@ function Ce() {
|
|
|
20
20
|
props: u
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
return
|
|
23
|
+
return I.Fragment = s, I.jsx = l, I.jsxs = l, I;
|
|
24
24
|
}
|
|
25
|
-
var
|
|
25
|
+
var $ = {};
|
|
26
26
|
var se;
|
|
27
27
|
function xe() {
|
|
28
28
|
return se || (se = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
29
|
function c(e) {
|
|
30
30
|
if (e == null) return null;
|
|
31
31
|
if (typeof e == "function")
|
|
32
|
-
return e.$$typeof ===
|
|
32
|
+
return e.$$typeof === L ? null : e.displayName || e.name || null;
|
|
33
33
|
if (typeof e == "string") return e;
|
|
34
34
|
switch (e) {
|
|
35
|
-
case
|
|
35
|
+
case k:
|
|
36
36
|
return "Fragment";
|
|
37
37
|
case Z:
|
|
38
38
|
return "Profiler";
|
|
39
39
|
case H:
|
|
40
40
|
return "StrictMode";
|
|
41
|
-
case
|
|
41
|
+
case h:
|
|
42
42
|
return "Suspense";
|
|
43
|
-
case
|
|
43
|
+
case D:
|
|
44
44
|
return "SuspenseList";
|
|
45
|
-
case
|
|
45
|
+
case S:
|
|
46
46
|
return "Activity";
|
|
47
47
|
}
|
|
48
48
|
if (typeof e == "object")
|
|
49
49
|
switch (typeof e.tag == "number" && console.error(
|
|
50
50
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
51
51
|
), e.$$typeof) {
|
|
52
|
-
case G:
|
|
53
|
-
return "Portal";
|
|
54
52
|
case w:
|
|
53
|
+
return "Portal";
|
|
54
|
+
case O:
|
|
55
55
|
return e.displayName || "Context";
|
|
56
56
|
case Q:
|
|
57
57
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
58
58
|
case K:
|
|
59
59
|
var r = e.render;
|
|
60
60
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
61
|
-
case
|
|
61
|
+
case F:
|
|
62
62
|
return r = e.displayName || null, r !== null ? r : c(e.type) || "Memo";
|
|
63
|
-
case
|
|
63
|
+
case P:
|
|
64
64
|
r = e._payload, e = e._init;
|
|
65
65
|
try {
|
|
66
66
|
return c(e(r));
|
|
@@ -90,8 +90,8 @@ function xe() {
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
function d(e) {
|
|
93
|
-
if (e ===
|
|
94
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
93
|
+
if (e === k) return "<>";
|
|
94
|
+
if (typeof e == "object" && e !== null && e.$$typeof === P)
|
|
95
95
|
return "<...>";
|
|
96
96
|
try {
|
|
97
97
|
var r = c(e);
|
|
@@ -101,7 +101,7 @@ function xe() {
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
function i() {
|
|
104
|
-
var e =
|
|
104
|
+
var e = N.A;
|
|
105
105
|
return e === null ? null : e.getOwner();
|
|
106
106
|
}
|
|
107
107
|
function u() {
|
|
@@ -116,7 +116,7 @@ function xe() {
|
|
|
116
116
|
}
|
|
117
117
|
function R(e, r) {
|
|
118
118
|
function t() {
|
|
119
|
-
|
|
119
|
+
U || (U = !0, console.error(
|
|
120
120
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
121
121
|
r
|
|
122
122
|
));
|
|
@@ -128,14 +128,14 @@ function xe() {
|
|
|
128
128
|
}
|
|
129
129
|
function A() {
|
|
130
130
|
var e = c(this.type);
|
|
131
|
-
return
|
|
131
|
+
return V[e] || (V[e] = !0, console.error(
|
|
132
132
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
133
133
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
134
134
|
}
|
|
135
|
-
function C(e, r, t, o,
|
|
135
|
+
function C(e, r, t, o, g, y) {
|
|
136
136
|
var n = t.ref;
|
|
137
137
|
return e = {
|
|
138
|
-
$$typeof:
|
|
138
|
+
$$typeof: T,
|
|
139
139
|
type: e,
|
|
140
140
|
key: r,
|
|
141
141
|
props: t,
|
|
@@ -157,33 +157,33 @@ function xe() {
|
|
|
157
157
|
configurable: !1,
|
|
158
158
|
enumerable: !1,
|
|
159
159
|
writable: !0,
|
|
160
|
-
value:
|
|
160
|
+
value: g
|
|
161
161
|
}), Object.defineProperty(e, "_debugTask", {
|
|
162
162
|
configurable: !1,
|
|
163
163
|
enumerable: !1,
|
|
164
164
|
writable: !0,
|
|
165
|
-
value:
|
|
165
|
+
value: y
|
|
166
166
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
167
167
|
}
|
|
168
|
-
function
|
|
168
|
+
function M(e, r, t, o, g, y) {
|
|
169
169
|
var n = r.children;
|
|
170
170
|
if (n !== void 0)
|
|
171
171
|
if (o)
|
|
172
172
|
if (re(n)) {
|
|
173
173
|
for (o = 0; o < n.length; o++)
|
|
174
|
-
|
|
174
|
+
W(n[o]);
|
|
175
175
|
Object.freeze && Object.freeze(n);
|
|
176
176
|
} else
|
|
177
177
|
console.error(
|
|
178
178
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
179
179
|
);
|
|
180
|
-
else
|
|
180
|
+
else W(n);
|
|
181
181
|
if (ee.call(r, "key")) {
|
|
182
182
|
n = c(e);
|
|
183
183
|
var m = Object.keys(r).filter(function(te) {
|
|
184
184
|
return te !== "key";
|
|
185
185
|
});
|
|
186
|
-
o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}",
|
|
186
|
+
o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", J[n + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
187
187
|
`A props object containing a "key" prop is being spread into JSX:
|
|
188
188
|
let props = %s;
|
|
189
189
|
<%s {...props} />
|
|
@@ -194,7 +194,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
194
194
|
n,
|
|
195
195
|
m,
|
|
196
196
|
n
|
|
197
|
-
),
|
|
197
|
+
), J[n + o] = !0);
|
|
198
198
|
}
|
|
199
199
|
if (n = null, t !== void 0 && (l(t), n = "" + t), v(r) && (l(r.key), n = "" + r.key), "key" in r) {
|
|
200
200
|
t = {};
|
|
@@ -209,17 +209,17 @@ React keys must be passed directly to JSX without using spread:
|
|
|
209
209
|
n,
|
|
210
210
|
t,
|
|
211
211
|
i(),
|
|
212
|
-
|
|
213
|
-
|
|
212
|
+
g,
|
|
213
|
+
y
|
|
214
214
|
);
|
|
215
215
|
}
|
|
216
|
-
function
|
|
217
|
-
|
|
216
|
+
function W(e) {
|
|
217
|
+
Y(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? Y(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
218
218
|
}
|
|
219
|
-
function
|
|
220
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
219
|
+
function Y(e) {
|
|
220
|
+
return typeof e == "object" && e !== null && e.$$typeof === T;
|
|
221
221
|
}
|
|
222
|
-
var x = ve,
|
|
222
|
+
var x = ve, T = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), H = /* @__PURE__ */ Symbol.for("react.strict_mode"), Z = /* @__PURE__ */ Symbol.for("react.profiler"), Q = /* @__PURE__ */ Symbol.for("react.consumer"), O = /* @__PURE__ */ Symbol.for("react.context"), K = /* @__PURE__ */ Symbol.for("react.forward_ref"), h = /* @__PURE__ */ Symbol.for("react.suspense"), D = /* @__PURE__ */ Symbol.for("react.suspense_list"), F = /* @__PURE__ */ Symbol.for("react.memo"), P = /* @__PURE__ */ Symbol.for("react.lazy"), S = /* @__PURE__ */ Symbol.for("react.activity"), L = /* @__PURE__ */ Symbol.for("react.client.reference"), N = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, re = Array.isArray, b = console.createTask ? console.createTask : function() {
|
|
223
223
|
return null;
|
|
224
224
|
};
|
|
225
225
|
x = {
|
|
@@ -227,38 +227,38 @@ React keys must be passed directly to JSX without using spread:
|
|
|
227
227
|
return e();
|
|
228
228
|
}
|
|
229
229
|
};
|
|
230
|
-
var
|
|
230
|
+
var U, V = {}, q = x.react_stack_bottom_frame.bind(
|
|
231
231
|
x,
|
|
232
232
|
u
|
|
233
|
-
)(),
|
|
234
|
-
|
|
235
|
-
var o = 1e4 >
|
|
236
|
-
return
|
|
233
|
+
)(), B = b(d(u)), J = {};
|
|
234
|
+
$.Fragment = k, $.jsx = function(e, r, t) {
|
|
235
|
+
var o = 1e4 > N.recentlyCreatedOwnerStacks++;
|
|
236
|
+
return M(
|
|
237
237
|
e,
|
|
238
238
|
r,
|
|
239
239
|
t,
|
|
240
240
|
!1,
|
|
241
|
-
o ? Error("react-stack-top-frame") :
|
|
242
|
-
o ? b(d(e)) :
|
|
241
|
+
o ? Error("react-stack-top-frame") : q,
|
|
242
|
+
o ? b(d(e)) : B
|
|
243
243
|
);
|
|
244
|
-
},
|
|
245
|
-
var o = 1e4 >
|
|
246
|
-
return
|
|
244
|
+
}, $.jsxs = function(e, r, t) {
|
|
245
|
+
var o = 1e4 > N.recentlyCreatedOwnerStacks++;
|
|
246
|
+
return M(
|
|
247
247
|
e,
|
|
248
248
|
r,
|
|
249
249
|
t,
|
|
250
250
|
!0,
|
|
251
|
-
o ? Error("react-stack-top-frame") :
|
|
252
|
-
o ? b(d(e)) :
|
|
251
|
+
o ? Error("react-stack-top-frame") : q,
|
|
252
|
+
o ? b(d(e)) : B
|
|
253
253
|
);
|
|
254
254
|
};
|
|
255
|
-
})()),
|
|
255
|
+
})()), $;
|
|
256
256
|
}
|
|
257
257
|
var le;
|
|
258
258
|
function Te() {
|
|
259
|
-
return le || (le = 1, process.env.NODE_ENV === "production" ?
|
|
259
|
+
return le || (le = 1, process.env.NODE_ENV === "production" ? X.exports = Ce() : X.exports = xe()), X.exports;
|
|
260
260
|
}
|
|
261
|
-
var
|
|
261
|
+
var z = Te();
|
|
262
262
|
const ce = {
|
|
263
263
|
solid: {
|
|
264
264
|
surfaceColor: "#3b82f6",
|
|
@@ -331,10 +331,10 @@ const ce = {
|
|
|
331
331
|
borderWidth: 4
|
|
332
332
|
}
|
|
333
333
|
};
|
|
334
|
-
function
|
|
334
|
+
function G(c, s, l) {
|
|
335
335
|
return Math.max(s, Math.min(l, c));
|
|
336
336
|
}
|
|
337
|
-
function
|
|
337
|
+
function Ae({
|
|
338
338
|
children: c,
|
|
339
339
|
onClick: s,
|
|
340
340
|
disabled: l = !1,
|
|
@@ -345,75 +345,75 @@ function ye({
|
|
|
345
345
|
motion: R = 160,
|
|
346
346
|
width: A = 260,
|
|
347
347
|
height: C = 64,
|
|
348
|
-
radius:
|
|
349
|
-
surfaceColor:
|
|
350
|
-
sideColor:
|
|
348
|
+
radius: M = 14,
|
|
349
|
+
surfaceColor: W,
|
|
350
|
+
sideColor: Y,
|
|
351
351
|
textColor: x,
|
|
352
|
-
borderColor:
|
|
353
|
-
borderWidth:
|
|
354
|
-
glareColor:
|
|
352
|
+
borderColor: T,
|
|
353
|
+
borderWidth: w,
|
|
354
|
+
glareColor: k = "#ffffff",
|
|
355
355
|
glareOpacity: H = 0,
|
|
356
356
|
glareWidth: Z = 0,
|
|
357
357
|
className: Q = "",
|
|
358
|
-
style:
|
|
358
|
+
style: O,
|
|
359
359
|
...K
|
|
360
360
|
}) {
|
|
361
|
-
const
|
|
362
|
-
function
|
|
361
|
+
const h = Re(null), [D, F] = ne(!1), [P, S] = ne(null), L = Math.max(0, Number(C) || 0), N = Math.max(0, Number(i) || 0), re = L * 0.3, b = G(N, 0, re), U = Math.max(0, Number(u) || 0), V = G(U, 0, b), q = Math.max(0, Number(v) || 0), B = Number((b / 9).toFixed(2)), J = G(q, 0, B), e = L - b, r = Math.max(0, Math.floor(e / 4)), t = Math.max(0, Number(M) || 0), o = G(t, 0, r), g = Math.max(0, Number(R) || 0);
|
|
362
|
+
function y(a, f) {
|
|
363
363
|
const _ = f.getBoundingClientRect(), E = a.clientX - _.left, oe = _.width || 1;
|
|
364
364
|
return E < oe * 0.33 ? "left" : E > oe * 0.66 ? "right" : "middle";
|
|
365
365
|
}
|
|
366
366
|
const n = (a) => {
|
|
367
367
|
if (l || a.button !== 0 && a.pointerType === "mouse") return;
|
|
368
|
-
const f =
|
|
368
|
+
const f = h.current;
|
|
369
369
|
if (!f) return;
|
|
370
370
|
f.setPointerCapture(a.pointerId);
|
|
371
|
-
const _ =
|
|
372
|
-
|
|
371
|
+
const _ = y(a, f);
|
|
372
|
+
S((E) => E === _ ? E : _), F(!0);
|
|
373
373
|
}, m = (a) => {
|
|
374
374
|
if (l || a.pointerType !== "mouse") return;
|
|
375
|
-
const f =
|
|
375
|
+
const f = h.current;
|
|
376
376
|
if (!f) return;
|
|
377
|
-
const _ =
|
|
378
|
-
|
|
377
|
+
const _ = y(a, f);
|
|
378
|
+
S((E) => E === _ ? E : _);
|
|
379
379
|
}, p = (a) => {
|
|
380
|
-
const f =
|
|
380
|
+
const f = h.current;
|
|
381
381
|
try {
|
|
382
382
|
f?.hasPointerCapture(a.pointerId) && f.releasePointerCapture(a.pointerId);
|
|
383
383
|
} catch {
|
|
384
384
|
}
|
|
385
|
-
|
|
385
|
+
F(!1), S(null), l && D && p(a);
|
|
386
386
|
}, te = (a) => {
|
|
387
387
|
l || (p(a), s && s(a));
|
|
388
388
|
}, ie = (a) => {
|
|
389
389
|
l || p(a);
|
|
390
390
|
}, ue = (a) => {
|
|
391
391
|
p(a);
|
|
392
|
-
},
|
|
392
|
+
}, j = ce[d] || ce.solid, fe = W ?? j.surfaceColor, de = Y ?? j.sideColor, be = x ?? j.textColor, me = typeof T == "string" && T.trim() !== "" ? T : j.borderColor || "transparent", pe = typeof w == "number" && w >= 0 ? w : j.borderWidth ?? 0, _e = {
|
|
393
393
|
...{
|
|
394
394
|
"--button-raise-level": `${b}px`,
|
|
395
|
-
"--press-inset": `${
|
|
396
|
-
"--button-hover-pressure":
|
|
397
|
-
"--transform-speed": `${
|
|
395
|
+
"--press-inset": `${V}px`,
|
|
396
|
+
"--button-hover-pressure": J,
|
|
397
|
+
"--transform-speed": `${g}ms`,
|
|
398
398
|
"--radius": `${o}px`,
|
|
399
399
|
"--surface-color": fe,
|
|
400
400
|
"--side-color": de,
|
|
401
401
|
"--text-color": be,
|
|
402
402
|
"--border-color": me,
|
|
403
403
|
"--border-width": `${pe}px`,
|
|
404
|
-
"--glare-rgb": he(
|
|
404
|
+
"--glare-rgb": he(k),
|
|
405
405
|
"--glare-alpha": H,
|
|
406
406
|
"--glare-width": Z,
|
|
407
407
|
width: typeof A == "number" ? `${A}px` : A,
|
|
408
408
|
height: typeof C == "number" ? `${C}px` : C
|
|
409
409
|
},
|
|
410
|
-
...
|
|
411
|
-
}, Ee = ["soft-btn",
|
|
412
|
-
return /* @__PURE__ */
|
|
410
|
+
...O && typeof O == "object" ? O : {}
|
|
411
|
+
}, Ee = ["soft-btn", D && "soft-btn--active", P && `soft-btn--${P}`, l && "soft-btn--disabled", Q].filter(Boolean).join(" ");
|
|
412
|
+
return /* @__PURE__ */ z.jsx(
|
|
413
413
|
"button",
|
|
414
414
|
{
|
|
415
415
|
...K,
|
|
416
|
-
ref:
|
|
416
|
+
ref: h,
|
|
417
417
|
className: Ee,
|
|
418
418
|
style: _e,
|
|
419
419
|
onPointerDown: n,
|
|
@@ -422,7 +422,7 @@ function ye({
|
|
|
422
422
|
onPointerLeave: ie,
|
|
423
423
|
onPointerCancel: ue,
|
|
424
424
|
disabled: l,
|
|
425
|
-
children: /* @__PURE__ */
|
|
425
|
+
children: /* @__PURE__ */ z.jsx("span", { className: "soft-btn__wrapper", children: /* @__PURE__ */ z.jsx("span", { className: "soft-btn__content", children: /* @__PURE__ */ z.jsx("span", { className: "soft-btn__inner", children: c }) }) })
|
|
426
426
|
}
|
|
427
427
|
);
|
|
428
428
|
}
|
|
@@ -436,6 +436,6 @@ function he(c) {
|
|
|
436
436
|
return `${l},${d},${i}`;
|
|
437
437
|
}
|
|
438
438
|
export {
|
|
439
|
-
|
|
439
|
+
Ae as TiltButton,
|
|
440
440
|
ce as TiltButtonVariants
|
|
441
441
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(b,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(b=typeof globalThis<"u"?globalThis:b||self,m(b["react-tilt-button"]={},b.React))})(this,(function(b,m){"use strict";var
|
|
1
|
+
(function(b,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(b=typeof globalThis<"u"?globalThis:b||self,m(b["react-tilt-button"]={},b.React))})(this,(function(b,m){"use strict";var $={exports:{}},w={};var se;function fe(){if(se)return w;se=1;var c=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function l(d,i,f){var T=null;if(f!==void 0&&(T=""+f),i.key!==void 0&&(T=""+i.key),"key"in i){f={};for(var C in i)C!=="key"&&(f[C]=i[C])}else f=i;return i=f.ref,{$$typeof:c,type:d,key:T,ref:i!==void 0?i:null,props:f}}return w.Fragment=s,w.jsx=l,w.jsxs=l,w}var O={};var le;function ue(){return le||(le=1,process.env.NODE_ENV!=="production"&&(function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===X?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case N:return"Fragment";case ee:return"Profiler";case K:return"StrictMode";case y:return"Suspense";case B:return"SuspenseList";case M:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case j:return"Portal";case I:return e.displayName||"Context";case re:return(e._context.displayName||"Context")+".Consumer";case te:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case J:return r=e.displayName||null,r!==null?r:c(e.type)||"Memo";case g:r=e._payload,e=e._init;try{return c(e(r))}catch{}}return null}function s(e){return""+e}function l(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),s(e)}}function d(e){if(e===N)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===g)return"<...>";try{var r=c(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=W.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function T(e){if(oe.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function C(e,r){function t(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function k(){var e=c(this.type);return G[e]||(G[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function x(e,r,t,o,A,S){var n=t.ref;return e={$$typeof:P,type:e,key:r,props:t,_owner:o},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function L(e,r,t,o,A,S){var n=r.children;if(n!==void 0)if(o)if(ne(n)){for(o=0;o<n.length;o++)U(n[o]);Object.freeze&&Object.freeze(n)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else U(n);if(oe.call(r,"key")){n=c(e);var _=Object.keys(r).filter(function(ae){return ae!=="key"});o=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",Z[n+o]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,o,n,_,n),
|
|
6
|
+
<%s key={someKey} {...props} />`,o,n,_,n),Z[n+o]=!0)}if(n=null,t!==void 0&&(l(t),n=""+t),T(r)&&(l(r.key),n=""+r.key),"key"in r){t={};for(var v in r)v!=="key"&&(t[v]=r[v])}else t=r;return n&&C(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,n,t,i(),A,S)}function U(e){V(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===g&&(e._payload.status==="fulfilled"?V(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function V(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}var h=m,P=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),K=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),I=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),y=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),J=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),M=Symbol.for("react.activity"),X=Symbol.for("react.client.reference"),W=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,oe=Object.prototype.hasOwnProperty,ne=Array.isArray,p=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var z,G={},q=h.react_stack_bottom_frame.bind(h,f)(),H=p(d(f)),Z={};O.Fragment=N,O.jsx=function(e,r,t){var o=1e4>W.recentlyCreatedOwnerStacks++;return L(e,r,t,!1,o?Error("react-stack-top-frame"):q,o?p(d(e)):H)},O.jsxs=function(e,r,t){var o=1e4>W.recentlyCreatedOwnerStacks++;return L(e,r,t,!0,o?Error("react-stack-top-frame"):q,o?p(d(e)):H)}})()),O}var ce;function de(){return ce||(ce=1,process.env.NODE_ENV==="production"?$.exports=fe():$.exports=ue()),$.exports}var D=de();const Q={solid:{surfaceColor:"#3b82f6",sideColor:"#1d4ed8",textColor:"#ffffff",borderColor:"transparent",borderWidth:0},outline:{surfaceColor:"#ffffff",sideColor:"#2563eb",textColor:"#2563eb",borderColor:"#2563eb",borderWidth:3},dark:{surfaceColor:"#181818",sideColor:"#494949",textColor:"#e5e7eb",borderColor:"#5e5e5e",borderWidth:3},arcade:{surfaceColor:"#22b8c7",sideColor:"#e5dd4a",textColor:"#fef08a",borderColor:"#fef08a",borderWidth:3},gum:{surfaceColor:"#f472b6",sideColor:"#db2777",textColor:"#ffffff",borderColor:"transparent",borderWidth:0},carbon:{surfaceColor:"#2a2a37",sideColor:"#8b5e3c",textColor:"#c4a484",borderColor:"#8b5f39",borderWidth:4},warning:{surfaceColor:"#2c2c39",sideColor:"#b22b3b",textColor:"#fff7ed",borderColor:"#d9445b",borderWidth:4},steel:{surfaceColor:"#cbd5e1",sideColor:"#64748b",textColor:"#020617",borderColor:"#475569",borderWidth:2},gold:{surfaceColor:"#ffcf10",sideColor:"#d29000",textColor:"#422006",borderColor:"#fff0a8",borderWidth:2},lavender:{surfaceColor:"#cec3fd",sideColor:"#b489ff",textColor:"#2e1065",borderColor:"#a36eff",borderWidth:4}};function F(c,s,l){return Math.max(s,Math.min(l,c))}function be({children:c,onClick:s,disabled:l=!1,variant:d="solid",elevation:i=14,pressInset:f=5,tilt:T=2,motion:C=160,width:k=260,height:x=64,radius:L=14,surfaceColor:U,sideColor:V,textColor:h,borderColor:P,borderWidth:j,glareColor:N="#ffffff",glareOpacity:K=0,glareWidth:ee=0,className:re="",style:I,...te}){const y=m.useRef(null),[B,J]=m.useState(!1),[g,M]=m.useState(null),X=Math.max(0,Number(x)||0),W=Math.max(0,Number(i)||0),ne=X*.3,p=F(W,0,ne),z=Math.max(0,Number(f)||0),G=F(z,0,p),q=Math.max(0,Number(T)||0),H=Number((p/9).toFixed(2)),Z=F(q,0,H),e=X-p,r=Math.max(0,Math.floor(e/4)),t=Math.max(0,Number(L)||0),o=F(t,0,r),A=Math.max(0,Number(C)||0);function S(a,u){const E=u.getBoundingClientRect(),R=a.clientX-E.left,ie=E.width||1;return R<ie*.33?"left":R>ie*.66?"right":"middle"}const n=a=>{if(l||a.button!==0&&a.pointerType==="mouse")return;const u=y.current;if(!u)return;u.setPointerCapture(a.pointerId);const E=S(a,u);M(R=>R===E?R:E),J(!0)},_=a=>{if(l||a.pointerType!=="mouse")return;const u=y.current;if(!u)return;const E=S(a,u);M(R=>R===E?R:E)},v=a=>{const u=y.current;try{u?.hasPointerCapture(a.pointerId)&&u.releasePointerCapture(a.pointerId)}catch{}J(!1),M(null),l&&B&&v(a)},ae=a=>{l||(v(a),s&&s(a))},pe=a=>{l||v(a)},_e=a=>{v(a)},Y=Q[d]||Q.solid,ve=U??Y.surfaceColor,Ee=V??Y.sideColor,Re=h??Y.textColor,Te=typeof P=="string"&&P.trim()!==""?P:Y.borderColor||"transparent",Ce=typeof j=="number"&&j>=0?j:Y.borderWidth??0,xe={...{"--button-raise-level":`${p}px`,"--press-inset":`${G}px`,"--button-hover-pressure":Z,"--transform-speed":`${A}ms`,"--radius":`${o}px`,"--surface-color":ve,"--side-color":Ee,"--text-color":Re,"--border-color":Te,"--border-width":`${Ce}px`,"--glare-rgb":me(N),"--glare-alpha":K,"--glare-width":ee,width:typeof k=="number"?`${k}px`:k,height:typeof x=="number"?`${x}px`:x},...I&&typeof I=="object"?I:{}},he=["soft-btn",B&&"soft-btn--active",g&&`soft-btn--${g}`,l&&"soft-btn--disabled",re].filter(Boolean).join(" ");return D.jsx("button",{...te,ref:y,className:he,style:xe,onPointerDown:n,onPointerMove:_,onPointerUp:ae,onPointerLeave:pe,onPointerCancel:_e,disabled:l,children:D.jsx("span",{className:"soft-btn__wrapper",children:D.jsx("span",{className:"soft-btn__content",children:D.jsx("span",{className:"soft-btn__inner",children:c})})})})}function me(c){if(!c||typeof c!="string")return"255,255,255";let s=c.replace("#","");if(s.length===3&&(s=s.split("").map(f=>f+f).join("")),s.length!==6)return"255,255,255";const l=parseInt(s.slice(0,2),16),d=parseInt(s.slice(2,4),16),i=parseInt(s.slice(4,6),16);return`${l},${d},${i}`}b.TiltButton=be,b.TiltButtonVariants=Q,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
|