New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-next-tilt
Advanced tools
react-next-tilt - npm Package Compare versions
Comparing version 0.1.1 to 0.2.1
@@ -243,2 +243,14 @@ import { HTMLAttributes, CSSProperties, PropsWithChildren, MouseEventHandler, TouchEventHandler, FocusEventHandler, FC, RefObject } from 'react'; | ||
| /** | ||
| * Size of the spot glare effect in relation to the component between `0` to `Infinity` | ||
| * | ||
| * @note If `spotGlarePosition` is set to anything other than `'all'`, only half of the spot glare effect is visible at any time. | ||
| * | ||
| * That's why the default value is 200 to cover the whole element. | ||
| * | ||
| * @default 200 | ||
| * | ||
| * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--spot-glare Storybook} | ||
| */ | ||
| spotGlareSizePercent?: number; | ||
| /** | ||
| * Maximum opacity of the spot glare effect | ||
@@ -245,0 +257,0 @@ * |
@@ -1,3 +0,3 @@ | ||
| import dr, { forwardRef as pr, useRef as $e, useCallback as b, useMemo as fr, useImperativeHandle as mr, useEffect as ur, memo as hr } from "react"; | ||
| var or = { exports: {} }, We = {}; | ||
| import vr, { forwardRef as pr, useRef as $e, useCallback as w, useMemo as ur, useImperativeHandle as mr, useEffect as sr, memo as hr } from "react"; | ||
| var ir = { exports: {} }, Ie = {}; | ||
| /** | ||
@@ -12,21 +12,21 @@ * @license React | ||
| */ | ||
| var sr; | ||
| var cr; | ||
| function yr() { | ||
| if (sr) | ||
| return We; | ||
| sr = 1; | ||
| var a = dr, o = Symbol.for("react.element"), v = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, m = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 }; | ||
| function Z(W, y, ae) { | ||
| var j, V = {}, S = null, we = null; | ||
| ae !== void 0 && (S = "" + ae), y.key !== void 0 && (S = "" + y.key), y.ref !== void 0 && (we = y.ref); | ||
| for (j in y) | ||
| i.call(y, j) && !h.hasOwnProperty(j) && (V[j] = y[j]); | ||
| if (cr) | ||
| return Ie; | ||
| cr = 1; | ||
| var a = vr, o = Symbol.for("react.element"), v = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, m = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 }; | ||
| function Z(W, y, te) { | ||
| var C, V = {}, x = null, _e = null; | ||
| te !== void 0 && (x = "" + te), y.key !== void 0 && (x = "" + y.key), y.ref !== void 0 && (_e = y.ref); | ||
| for (C in y) | ||
| i.call(y, C) && !h.hasOwnProperty(C) && (V[C] = y[C]); | ||
| if (W && W.defaultProps) | ||
| for (j in y = W.defaultProps, y) | ||
| V[j] === void 0 && (V[j] = y[j]); | ||
| return { $$typeof: o, type: W, key: S, ref: we, props: V, _owner: m.current }; | ||
| for (C in y = W.defaultProps, y) | ||
| V[C] === void 0 && (V[C] = y[C]); | ||
| return { $$typeof: o, type: W, key: x, ref: _e, props: V, _owner: m.current }; | ||
| } | ||
| return We.Fragment = v, We.jsx = Z, We.jsxs = Z, We; | ||
| return Ie.Fragment = v, Ie.jsx = Z, Ie.jsxs = Z, Ie; | ||
| } | ||
| var Ve = {}; | ||
| var We = {}; | ||
| /** | ||
@@ -41,21 +41,21 @@ * @license React | ||
| */ | ||
| var cr; | ||
| var lr; | ||
| function gr() { | ||
| return cr || (cr = 1, process.env.NODE_ENV !== "production" && function() { | ||
| var a = dr, o = Symbol.for("react.element"), v = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), Z = Symbol.for("react.provider"), W = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), ae = Symbol.for("react.suspense"), j = Symbol.for("react.suspense_list"), V = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), we = Symbol.for("react.offscreen"), Fe = Symbol.iterator, me = "@@iterator"; | ||
| function Ze(e) { | ||
| return lr || (lr = 1, process.env.NODE_ENV !== "production" && function() { | ||
| var a = vr, o = Symbol.for("react.element"), v = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), Z = Symbol.for("react.provider"), W = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), te = Symbol.for("react.suspense"), C = Symbol.for("react.suspense_list"), V = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), _e = Symbol.for("react.offscreen"), Fe = Symbol.iterator, ve = "@@iterator"; | ||
| function Qe(e) { | ||
| if (e === null || typeof e != "object") | ||
| return null; | ||
| var r = Fe && e[Fe] || e[me]; | ||
| var r = Fe && e[Fe] || e[ve]; | ||
| return typeof r == "function" ? r : null; | ||
| } | ||
| var Q = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; | ||
| function R(e) { | ||
| function b(e) { | ||
| { | ||
| for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), u = 1; u < r; u++) | ||
| t[u - 1] = arguments[u]; | ||
| Ne("error", e, t); | ||
| be("error", e, t); | ||
| } | ||
| } | ||
| function Ne(e, r, t) { | ||
| function be(e, r, t) { | ||
| { | ||
@@ -70,6 +70,6 @@ var u = Q.ReactDebugCurrentFrame, d = u.getStackAddendum(); | ||
| } | ||
| var Qe = !1, he = !1, Me = !1, Be = !1, H = !1, N; | ||
| var Ve = !1, Me = !1, pe = !1, Ge = !1, Ne = !1, N; | ||
| N = Symbol.for("react.module.reference"); | ||
| function Ue(e) { | ||
| return !!(typeof e == "string" || typeof e == "function" || e === i || e === h || H || e === m || e === ae || e === j || Be || e === we || Qe || he || Me || typeof e == "object" && e !== null && (e.$$typeof === S || e.$$typeof === V || e.$$typeof === Z || e.$$typeof === W || e.$$typeof === y || // This needs to include all possible module reference object | ||
| function A(e) { | ||
| return !!(typeof e == "string" || typeof e == "function" || e === i || e === h || Ne || e === m || e === te || e === C || Ge || e === _e || Ve || Me || pe || typeof e == "object" && e !== null && (e.$$typeof === x || e.$$typeof === V || e.$$typeof === Z || e.$$typeof === W || e.$$typeof === y || // This needs to include all possible module reference object | ||
| // types supported by any Flight configuration anywhere since | ||
@@ -80,3 +80,3 @@ // we don't know which Flight build this will end up being used | ||
| } | ||
| function Oe(e, r, t) { | ||
| function Be(e, r, t) { | ||
| var u = e.displayName; | ||
@@ -88,3 +88,3 @@ if (u) | ||
| } | ||
| function F(e) { | ||
| function me(e) { | ||
| return e.displayName || "Context"; | ||
@@ -95,3 +95,3 @@ } | ||
| return null; | ||
| if (typeof e.tag == "number" && R("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function") | ||
| if (typeof e.tag == "number" && b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function") | ||
| return e.displayName || e.name || null; | ||
@@ -109,5 +109,5 @@ if (typeof e == "string") | ||
| return "StrictMode"; | ||
| case ae: | ||
| case te: | ||
| return "Suspense"; | ||
| case j: | ||
| case C: | ||
| return "SuspenseList"; | ||
@@ -119,12 +119,12 @@ } | ||
| var r = e; | ||
| return F(r) + ".Consumer"; | ||
| return me(r) + ".Consumer"; | ||
| case Z: | ||
| var t = e; | ||
| return F(t._context) + ".Provider"; | ||
| return me(t._context) + ".Provider"; | ||
| case y: | ||
| return Oe(e, e.render, "ForwardRef"); | ||
| return Be(e, e.render, "ForwardRef"); | ||
| case V: | ||
| var u = e.displayName || null; | ||
| return u !== null ? u : _(e.type) || "Memo"; | ||
| case S: { | ||
| case x: { | ||
| var d = e, p = d._payload, c = d._init; | ||
@@ -140,14 +140,14 @@ try { | ||
| } | ||
| var O = Object.assign, ye = 0, Xe, qe, B, U, De, w, ze; | ||
| function ge() { | ||
| var O = Object.assign, $ = 0, Ue, Xe, qe, B, U, De, T; | ||
| function ze() { | ||
| } | ||
| ge.__reactDisabledLog = !0; | ||
| function Ge() { | ||
| ze.__reactDisabledLog = !0; | ||
| function Re() { | ||
| { | ||
| if (ye === 0) { | ||
| Xe = console.log, qe = console.info, B = console.warn, U = console.error, De = console.group, w = console.groupCollapsed, ze = console.groupEnd; | ||
| if ($ === 0) { | ||
| Ue = console.log, Xe = console.info, qe = console.warn, B = console.error, U = console.group, De = console.groupCollapsed, T = console.groupEnd; | ||
| var e = { | ||
| configurable: !0, | ||
| enumerable: !0, | ||
| value: ge, | ||
| value: ze, | ||
| writable: !0 | ||
@@ -165,8 +165,8 @@ }; | ||
| } | ||
| ye++; | ||
| $++; | ||
| } | ||
| } | ||
| function D() { | ||
| function er() { | ||
| { | ||
| if (ye--, ye === 0) { | ||
| if ($--, $ === 0) { | ||
| var e = { | ||
@@ -179,31 +179,31 @@ configurable: !0, | ||
| log: O({}, e, { | ||
| value: Xe | ||
| value: Ue | ||
| }), | ||
| info: O({}, e, { | ||
| value: qe | ||
| value: Xe | ||
| }), | ||
| warn: O({}, e, { | ||
| value: B | ||
| value: qe | ||
| }), | ||
| error: O({}, e, { | ||
| value: U | ||
| value: B | ||
| }), | ||
| group: O({}, e, { | ||
| value: De | ||
| value: U | ||
| }), | ||
| groupCollapsed: O({}, e, { | ||
| value: w | ||
| value: De | ||
| }), | ||
| groupEnd: O({}, e, { | ||
| value: ze | ||
| value: T | ||
| }) | ||
| }); | ||
| } | ||
| ye < 0 && R("disabledDepth fell below zero. This is a bug in React. Please file an issue."); | ||
| $ < 0 && b("disabledDepth fell below zero. This is a bug in React. Please file an issue."); | ||
| } | ||
| } | ||
| var P = Q.ReactCurrentDispatcher, Pe; | ||
| function Ee(e, r, t) { | ||
| var F = Q.ReactCurrentDispatcher, Y; | ||
| function we(e, r, t) { | ||
| { | ||
| if (Pe === void 0) | ||
| if (Y === void 0) | ||
| try { | ||
@@ -213,18 +213,18 @@ throw Error(); | ||
| var u = d.stack.trim().match(/\n( *(at )?)/); | ||
| Pe = u && u[1] || ""; | ||
| Y = u && u[1] || ""; | ||
| } | ||
| return ` | ||
| ` + Pe + e; | ||
| ` + Y + e; | ||
| } | ||
| } | ||
| var J = !1, oe; | ||
| var Oe = !1, X; | ||
| { | ||
| var Ye = typeof WeakMap == "function" ? WeakMap : Map; | ||
| oe = new Ye(); | ||
| X = new Ye(); | ||
| } | ||
| function Te(e, r) { | ||
| if (!e || J) | ||
| if (!e || Oe) | ||
| return ""; | ||
| { | ||
| var t = oe.get(e); | ||
| var t = X.get(e); | ||
| if (t !== void 0) | ||
@@ -234,7 +234,7 @@ return t; | ||
| var u; | ||
| J = !0; | ||
| Oe = !0; | ||
| var d = Error.prepareStackTrace; | ||
| Error.prepareStackTrace = void 0; | ||
| var p; | ||
| p = P.current, P.current = null, Ge(); | ||
| p = F.current, F.current = null, Re(); | ||
| try { | ||
@@ -252,4 +252,4 @@ if (r) { | ||
| Reflect.construct(c, []); | ||
| } catch (te) { | ||
| u = te; | ||
| } catch (ee) { | ||
| u = ee; | ||
| } | ||
@@ -260,4 +260,4 @@ Reflect.construct(e, [], c); | ||
| c.call(); | ||
| } catch (te) { | ||
| u = te; | ||
| } catch (ee) { | ||
| u = ee; | ||
| } | ||
@@ -269,21 +269,21 @@ e.call(c.prototype); | ||
| throw Error(); | ||
| } catch (te) { | ||
| u = te; | ||
| } catch (ee) { | ||
| u = ee; | ||
| } | ||
| e(); | ||
| } | ||
| } catch (te) { | ||
| if (te && u && typeof te.stack == "string") { | ||
| for (var s = te.stack.split(` | ||
| `), C = u.stack.split(` | ||
| `), g = s.length - 1, E = C.length - 1; g >= 1 && E >= 0 && s[g] !== C[E]; ) | ||
| } catch (ee) { | ||
| if (ee && u && typeof ee.stack == "string") { | ||
| for (var s = ee.stack.split(` | ||
| `), k = u.stack.split(` | ||
| `), g = s.length - 1, E = k.length - 1; g >= 1 && E >= 0 && s[g] !== k[E]; ) | ||
| E--; | ||
| for (; g >= 1 && E >= 0; g--, E--) | ||
| if (s[g] !== C[E]) { | ||
| if (s[g] !== k[E]) { | ||
| if (g !== 1 || E !== 1) | ||
| do | ||
| if (g--, E--, E < 0 || s[g] !== C[E]) { | ||
| if (g--, E--, E < 0 || s[g] !== k[E]) { | ||
| var I = ` | ||
| ` + s[g].replace(" at new ", " at "); | ||
| return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && oe.set(e, I), I; | ||
| return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && X.set(e, I), I; | ||
| } | ||
@@ -295,26 +295,26 @@ while (g >= 1 && E >= 0); | ||
| } finally { | ||
| J = !1, P.current = p, D(), Error.prepareStackTrace = d; | ||
| Oe = !1, F.current = p, er(), Error.prepareStackTrace = d; | ||
| } | ||
| var xe = e ? e.displayName || e.name : "", ir = xe ? Ee(xe) : ""; | ||
| return typeof e == "function" && oe.set(e, ir), ir; | ||
| var xe = e ? e.displayName || e.name : "", fr = xe ? we(xe) : ""; | ||
| return typeof e == "function" && X.set(e, fr), fr; | ||
| } | ||
| function Le(e, r, t) { | ||
| function Pe(e, r, t) { | ||
| return Te(e, !1); | ||
| } | ||
| function Ie(e) { | ||
| function Le(e) { | ||
| var r = e.prototype; | ||
| return !!(r && r.isReactComponent); | ||
| } | ||
| function ie(e, r, t) { | ||
| function ne(e, r, t) { | ||
| if (e == null) | ||
| return ""; | ||
| if (typeof e == "function") | ||
| return Te(e, Ie(e)); | ||
| return Te(e, Le(e)); | ||
| if (typeof e == "string") | ||
| return Ee(e); | ||
| return we(e); | ||
| switch (e) { | ||
| case ae: | ||
| return Ee("Suspense"); | ||
| case j: | ||
| return Ee("SuspenseList"); | ||
| case te: | ||
| return we("Suspense"); | ||
| case C: | ||
| return we("SuspenseList"); | ||
| } | ||
@@ -324,9 +324,9 @@ if (typeof e == "object") | ||
| case y: | ||
| return Le(e.render); | ||
| return Pe(e.render); | ||
| case V: | ||
| return ie(e.type, r, t); | ||
| case S: { | ||
| return ne(e.type, r, t); | ||
| case x: { | ||
| var u = e, d = u._payload, p = u._init; | ||
| try { | ||
| return ie(p(d), r, t); | ||
| return ne(p(d), r, t); | ||
| } catch { | ||
@@ -338,13 +338,13 @@ } | ||
| } | ||
| var fe = Object.prototype.hasOwnProperty, je = {}, Ae = Q.ReactDebugCurrentFrame; | ||
| function Ce(e) { | ||
| var ae = Object.prototype.hasOwnProperty, je = {}, Ce = Q.ReactDebugCurrentFrame; | ||
| function Se(e) { | ||
| if (e) { | ||
| var r = e._owner, t = ie(e.type, e._source, r ? r.type : null); | ||
| Ae.setExtraStackFrame(t); | ||
| var r = e._owner, t = ne(e.type, e._source, r ? r.type : null); | ||
| Ce.setExtraStackFrame(t); | ||
| } else | ||
| Ae.setExtraStackFrame(null); | ||
| Ce.setExtraStackFrame(null); | ||
| } | ||
| function er(e, r, t, u, d) { | ||
| function rr(e, r, t, u, d) { | ||
| { | ||
| var p = Function.call.bind(fe); | ||
| var p = Function.call.bind(ae); | ||
| for (var c in e) | ||
@@ -355,4 +355,4 @@ if (p(e, c)) { | ||
| if (typeof e[c] != "function") { | ||
| var C = Error((u || "React class") + ": " + t + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."); | ||
| throw C.name = "Invariant Violation", C; | ||
| var k = Error((u || "React class") + ": " + t + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."); | ||
| throw k.name = "Invariant Violation", k; | ||
| } | ||
@@ -363,11 +363,11 @@ s = e[c](r, c, u, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"); | ||
| } | ||
| s && !(s instanceof Error) && (Ce(d), R("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", u || "React class", t, c, typeof s), Ce(null)), s instanceof Error && !(s.message in je) && (je[s.message] = !0, Ce(d), R("Failed %s type: %s", t, s.message), Ce(null)); | ||
| s && !(s instanceof Error) && (Se(d), b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", u || "React class", t, c, typeof s), Se(null)), s instanceof Error && !(s.message in je) && (je[s.message] = !0, Se(d), b("Failed %s type: %s", t, s.message), Se(null)); | ||
| } | ||
| } | ||
| } | ||
| var T = Array.isArray; | ||
| function M(e) { | ||
| return T(e); | ||
| var tr = Array.isArray; | ||
| function R(e) { | ||
| return tr(e); | ||
| } | ||
| function ue(e) { | ||
| function he(e) { | ||
| { | ||
@@ -378,5 +378,5 @@ var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object"; | ||
| } | ||
| function K(e) { | ||
| function oe(e) { | ||
| try { | ||
| return Y(e), !1; | ||
| return q(e), !1; | ||
| } catch { | ||
@@ -386,10 +386,10 @@ return !0; | ||
| } | ||
| function Y(e) { | ||
| function q(e) { | ||
| return "" + e; | ||
| } | ||
| function x(e) { | ||
| if (K(e)) | ||
| return R("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ue(e)), Y(e); | ||
| function P(e) { | ||
| if (oe(e)) | ||
| return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", he(e)), q(e); | ||
| } | ||
| var k = Q.ReactCurrentOwner, rr = { | ||
| var j = Q.ReactCurrentOwner, H = { | ||
| key: !0, | ||
@@ -399,6 +399,6 @@ ref: !0, | ||
| __source: !0 | ||
| }, He, _e, Se; | ||
| Se = {}; | ||
| function $(e) { | ||
| if (fe.call(e, "ref")) { | ||
| }, Ae, He, ie; | ||
| ie = {}; | ||
| function Je(e) { | ||
| if (ae.call(e, "ref")) { | ||
| var r = Object.getOwnPropertyDescriptor(e, "ref").get; | ||
@@ -410,4 +410,4 @@ if (r && r.isReactWarning) | ||
| } | ||
| function L(e) { | ||
| if (fe.call(e, "key")) { | ||
| function D(e) { | ||
| if (ae.call(e, "key")) { | ||
| var r = Object.getOwnPropertyDescriptor(e, "key").get; | ||
@@ -419,12 +419,12 @@ if (r && r.isReactWarning) | ||
| } | ||
| function se(e, r) { | ||
| if (typeof e.ref == "string" && k.current && r && k.current.stateNode !== r) { | ||
| var t = _(k.current.type); | ||
| Se[t] || (R('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', _(k.current.type), e.ref), Se[t] = !0); | ||
| function L(e, r) { | ||
| if (typeof e.ref == "string" && j.current && r && j.current.stateNode !== r) { | ||
| var t = _(j.current.type); | ||
| ie[t] || (b('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', _(j.current.type), e.ref), ie[t] = !0); | ||
| } | ||
| } | ||
| function ce(e, r) { | ||
| function fe(e, r) { | ||
| { | ||
| var t = function() { | ||
| He || (He = !0, R("%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://reactjs.org/link/special-props)", r)); | ||
| Ae || (Ae = !0, b("%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://reactjs.org/link/special-props)", r)); | ||
| }; | ||
@@ -437,6 +437,6 @@ t.isReactWarning = !0, Object.defineProperty(e, "key", { | ||
| } | ||
| function G(e, r) { | ||
| function ue(e, r) { | ||
| { | ||
| var t = function() { | ||
| _e || (_e = !0, R("%s: `ref` 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://reactjs.org/link/special-props)", r)); | ||
| He || (He = !0, b("%s: `ref` 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://reactjs.org/link/special-props)", r)); | ||
| }; | ||
@@ -449,3 +449,3 @@ t.isReactWarning = !0, Object.defineProperty(e, "ref", { | ||
| } | ||
| var Je = function(e, r, t, u, d, p, c) { | ||
| var M = function(e, r, t, u, d, p, c) { | ||
| var s = { | ||
@@ -479,8 +479,8 @@ // This tag allows us to uniquely identify this as a React Element | ||
| }; | ||
| function le(e, r, t, u, d) { | ||
| function Ke(e, r, t, u, d) { | ||
| { | ||
| var p, c = {}, s = null, C = null; | ||
| t !== void 0 && (x(t), s = "" + t), L(r) && (x(r.key), s = "" + r.key), $(r) && (C = r.ref, se(r, d)); | ||
| var p, c = {}, s = null, k = null; | ||
| t !== void 0 && (P(t), s = "" + t), D(r) && (P(r.key), s = "" + r.key), Je(r) && (k = r.ref, L(r, d)); | ||
| for (p in r) | ||
| fe.call(r, p) && !rr.hasOwnProperty(p) && (c[p] = r[p]); | ||
| ae.call(r, p) && !H.hasOwnProperty(p) && (c[p] = r[p]); | ||
| if (e && e.defaultProps) { | ||
@@ -491,26 +491,26 @@ var g = e.defaultProps; | ||
| } | ||
| if (s || C) { | ||
| if (s || k) { | ||
| var E = typeof e == "function" ? e.displayName || e.name || "Unknown" : e; | ||
| s && ce(c, E), C && G(c, E); | ||
| s && fe(c, E), k && ue(c, E); | ||
| } | ||
| return Je(e, s, C, d, u, k.current, c); | ||
| return M(e, s, k, d, u, j.current, c); | ||
| } | ||
| } | ||
| var X = Q.ReactCurrentOwner, q = Q.ReactDebugCurrentFrame; | ||
| function z(e) { | ||
| var J = Q.ReactCurrentOwner, K = Q.ReactDebugCurrentFrame; | ||
| function S(e) { | ||
| if (e) { | ||
| var r = e._owner, t = ie(e.type, e._source, r ? r.type : null); | ||
| q.setExtraStackFrame(t); | ||
| var r = e._owner, t = ne(e.type, e._source, r ? r.type : null); | ||
| K.setExtraStackFrame(t); | ||
| } else | ||
| q.setExtraStackFrame(null); | ||
| K.setExtraStackFrame(null); | ||
| } | ||
| var ee; | ||
| ee = !1; | ||
| function re(e) { | ||
| var se; | ||
| se = !1; | ||
| function G(e) { | ||
| return typeof e == "object" && e !== null && e.$$typeof === o; | ||
| } | ||
| function de() { | ||
| function ce() { | ||
| { | ||
| if (X.current) { | ||
| var e = _(X.current.type); | ||
| if (J.current) { | ||
| var e = _(J.current.type); | ||
| if (e) | ||
@@ -524,3 +524,3 @@ return ` | ||
| } | ||
| function be(e) { | ||
| function ye(e) { | ||
| { | ||
@@ -536,6 +536,6 @@ if (e !== void 0) { | ||
| } | ||
| var ve = {}; | ||
| function Re(e) { | ||
| var le = {}; | ||
| function ge(e) { | ||
| { | ||
| var r = de(); | ||
| var r = ce(); | ||
| if (!r) { | ||
@@ -550,3 +550,3 @@ var t = typeof e == "string" ? e : e.displayName || e.name; | ||
| } | ||
| function ke(e, r) { | ||
| function de(e, r) { | ||
| { | ||
@@ -556,30 +556,30 @@ if (!e._store || e._store.validated || e.key != null) | ||
| e._store.validated = !0; | ||
| var t = Re(r); | ||
| if (ve[t]) | ||
| var t = ge(r); | ||
| if (le[t]) | ||
| return; | ||
| ve[t] = !0; | ||
| le[t] = !0; | ||
| var u = ""; | ||
| e && e._owner && e._owner !== X.current && (u = " It was passed a child from " + _(e._owner.type) + "."), z(e), R('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, u), z(null); | ||
| e && e._owner && e._owner !== J.current && (u = " It was passed a child from " + _(e._owner.type) + "."), S(e), b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, u), S(null); | ||
| } | ||
| } | ||
| function n(e, r) { | ||
| function ke(e, r) { | ||
| { | ||
| if (typeof e != "object") | ||
| return; | ||
| if (M(e)) | ||
| if (R(e)) | ||
| for (var t = 0; t < e.length; t++) { | ||
| var u = e[t]; | ||
| re(u) && ke(u, r); | ||
| G(u) && de(u, r); | ||
| } | ||
| else if (re(e)) | ||
| else if (G(e)) | ||
| e._store && (e._store.validated = !0); | ||
| else if (e) { | ||
| var d = Ze(e); | ||
| var d = Qe(e); | ||
| if (typeof d == "function" && d !== e.entries) | ||
| for (var p = d.call(e), c; !(c = p.next()).done; ) | ||
| re(c.value) && ke(c.value, r); | ||
| G(c.value) && de(c.value, r); | ||
| } | ||
| } | ||
| } | ||
| function f(e) { | ||
| function n(e) { | ||
| { | ||
@@ -600,12 +600,12 @@ var r = e.type; | ||
| var u = _(r); | ||
| er(t, e.props, "prop", u, e); | ||
| } else if (r.PropTypes !== void 0 && !ee) { | ||
| ee = !0; | ||
| rr(t, e.props, "prop", u, e); | ||
| } else if (r.PropTypes !== void 0 && !se) { | ||
| se = !0; | ||
| var d = _(r); | ||
| R("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown"); | ||
| b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown"); | ||
| } | ||
| typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && R("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."); | ||
| typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."); | ||
| } | ||
| } | ||
| function l(e) { | ||
| function f(e) { | ||
| { | ||
@@ -615,21 +615,21 @@ for (var r = Object.keys(e.props), t = 0; t < r.length; t++) { | ||
| if (u !== "children" && u !== "key") { | ||
| z(e), R("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", u), z(null); | ||
| S(e), b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", u), S(null); | ||
| break; | ||
| } | ||
| } | ||
| e.ref !== null && (z(e), R("Invalid attribute `ref` supplied to `React.Fragment`."), z(null)); | ||
| e.ref !== null && (S(e), b("Invalid attribute `ref` supplied to `React.Fragment`."), S(null)); | ||
| } | ||
| } | ||
| function pe(e, r, t, u, d, p) { | ||
| function l(e, r, t, u, d, p) { | ||
| { | ||
| var c = Ue(e); | ||
| var c = A(e); | ||
| if (!c) { | ||
| var s = ""; | ||
| (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (s += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."); | ||
| var C = be(d); | ||
| C ? s += C : s += de(); | ||
| var k = ye(d); | ||
| k ? s += k : s += ce(); | ||
| var g; | ||
| e === null ? g = "null" : M(e) ? g = "array" : e !== void 0 && e.$$typeof === o ? (g = "<" + (_(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, R("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, s); | ||
| e === null ? g = "null" : R(e) ? g = "array" : e !== void 0 && e.$$typeof === o ? (g = "<" + (_(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, s); | ||
| } | ||
| var E = le(e, r, t, d, p); | ||
| var E = Ke(e, r, t, d, p); | ||
| if (E == null) | ||
@@ -641,27 +641,27 @@ return E; | ||
| if (u) | ||
| if (M(I)) { | ||
| if (R(I)) { | ||
| for (var xe = 0; xe < I.length; xe++) | ||
| n(I[xe], e); | ||
| ke(I[xe], e); | ||
| Object.freeze && Object.freeze(I); | ||
| } else | ||
| R("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."); | ||
| b("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 | ||
| n(I, e); | ||
| ke(I, e); | ||
| } | ||
| return e === i ? l(E) : f(E), E; | ||
| return e === i ? f(E) : n(E), E; | ||
| } | ||
| } | ||
| function tr(e, r, t) { | ||
| return pe(e, r, t, !0); | ||
| function Ee(e, r, t) { | ||
| return l(e, r, t, !0); | ||
| } | ||
| function nr(e, r, t) { | ||
| return pe(e, r, t, !1); | ||
| return l(e, r, t, !1); | ||
| } | ||
| var ar = nr, vr = tr; | ||
| Ve.Fragment = i, Ve.jsx = ar, Ve.jsxs = vr; | ||
| }()), Ve; | ||
| var ar = nr, or = Ee; | ||
| We.Fragment = i, We.jsx = ar, We.jsxs = or; | ||
| }()), We; | ||
| } | ||
| process.env.NODE_ENV === "production" ? or.exports = yr() : or.exports = gr(); | ||
| var ne = or.exports; | ||
| const A = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => { | ||
| process.env.NODE_ENV === "production" ? ir.exports = yr() : ir.exports = gr(); | ||
| var re = ir.exports; | ||
| const z = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => { | ||
| let i = 0; | ||
@@ -682,3 +682,3 @@ return o === "top" ? i = (a.offsetY * 2 - 1) * -1 : o === "bottom" ? i = (a.offsetY - 0.5) * 2 : o === "left" ? i = (a.offsetX * 2 - 1) * -1 : o === "right" ? i = (a.offsetX - 0.5) * 2 : o === "all" && (i = Math.max( | ||
| return v ? h = ((i + m) * (3 / 2) - 1) * 100 : h = ((i + m) * (-3 / 2) + 0.5) * 100, `translateX(${h}%)`; | ||
| }, lr = (a) => { | ||
| }, dr = (a) => { | ||
| if (a instanceof HTMLElement) | ||
@@ -692,3 +692,3 @@ return a; | ||
| return a.current; | ||
| }, Ke = (a, o) => { | ||
| }, Ze = (a, o) => { | ||
| if (a === o) | ||
@@ -704,3 +704,3 @@ return !0; | ||
| for (i = v; i-- !== 0; ) | ||
| if (!Ke(a[i], o[i])) | ||
| if (!Ze(a[i], o[i])) | ||
| return !1; | ||
@@ -716,3 +716,3 @@ return !0; | ||
| for (i of a.entries()) | ||
| if (!Ke(i[1], o.get(i[0]))) | ||
| if (!Ze(i[1], o.get(i[0]))) | ||
| return !1; | ||
@@ -751,3 +751,3 @@ return !0; | ||
| const h = m[i]; | ||
| if (!(h === "_owner" && a.$$typeof) && !Ke(a[h], o[h])) | ||
| if (!(h === "_owner" && a.$$typeof) && !Ze(a[h], o[h])) | ||
| return !1; | ||
@@ -769,25 +769,26 @@ } | ||
| lineGlareEnable: y = !0, | ||
| lineGlareBlurEnable: ae = !0, | ||
| lineGlareBlurAmount: j = "4px", | ||
| lineGlareBlurEnable: te = !0, | ||
| lineGlareBlurAmount: C = "4px", | ||
| lineGlareMaxOpacity: V = 0.1, | ||
| lineGlareWidthPercent: S = 10, | ||
| lineGlareMixBlendMode: we = "normal", | ||
| lineGlareWidthPercent: x = 10, | ||
| lineGlareMixBlendMode: _e = "normal", | ||
| lineGlareColor: Fe = "white", | ||
| lineGlareReverse: me = !1, | ||
| lineGlareDirection: Ze = "to-bottom-right", | ||
| lineGlareReverse: ve = !1, | ||
| lineGlareDirection: Qe = "to-bottom-right", | ||
| lineGlareHoverPosition: Q = "top-left", | ||
| spotGlareEnable: R = !0, | ||
| spotGlareMaxOpacity: Ne = 0.5, | ||
| spotGlareMixBlendMode: Qe = "normal", | ||
| spotGlarePosition: he = "top", | ||
| spotGlareColor: Me = "white", | ||
| spotGlareReverse: Be = !1, | ||
| tiltMaxAngleX: H = 20, | ||
| tiltMaxAngleY: N = 20, | ||
| tiltReverse: Ue = !1, | ||
| tiltReset: Oe = !0, | ||
| initialAngleX: F = 0, | ||
| initialAngleY: _ = 0, | ||
| disableScrollOnTouch: O = !0, | ||
| style: ye, | ||
| spotGlareEnable: b = !0, | ||
| spotGlareSizePercent: be = 200, | ||
| spotGlareMaxOpacity: Ve = 0.5, | ||
| spotGlareMixBlendMode: Me = "normal", | ||
| spotGlarePosition: pe = "top", | ||
| spotGlareColor: Ge = "white", | ||
| spotGlareReverse: Ne = !1, | ||
| tiltMaxAngleX: N = 20, | ||
| tiltMaxAngleY: A = 20, | ||
| tiltReverse: Be = !1, | ||
| tiltReset: me = !0, | ||
| initialAngleX: _ = 0, | ||
| initialAngleY: O = 0, | ||
| disableScrollOnTouch: $ = !0, | ||
| style: Ue, | ||
| tiltStyle: Xe, | ||
@@ -798,50 +799,50 @@ tiltProps: qe, | ||
| gyroReverse: De = !1, | ||
| disabled: w = !1, | ||
| disabled: T = !1, | ||
| disabledFilter: ze = "grayscale(1) brightness(125%)", | ||
| CSSTransition: ge = "all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)", | ||
| TiltWrapper: Ge, | ||
| fullPageListening: D = !1, | ||
| controlElement: P, | ||
| controlElementOnly: Pe = !1, | ||
| preserve3dEnable: Ee = !0, | ||
| testIdEnable: J = !1, | ||
| onTilt: oe, | ||
| onReset: Ye, | ||
| onMouseEnter: Te, | ||
| CSSTransition: Re = "all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)", | ||
| TiltWrapper: er, | ||
| fullPageListening: F = !1, | ||
| controlElement: Y, | ||
| controlElementOnly: we = !1, | ||
| preserve3dEnable: Oe = !0, | ||
| testIdEnable: X = !1, | ||
| onTilt: Ye, | ||
| onReset: Te, | ||
| onMouseEnter: Pe, | ||
| onMouseMove: Le, | ||
| onMouseLeave: Ie, | ||
| onTouchStart: ie, | ||
| onTouchMove: fe, | ||
| onTouchEnd: je, | ||
| children: Ae, | ||
| ...Ce | ||
| }, er) => { | ||
| const T = $e(), M = $e(!1), ue = !D && (!P || P && !Pe), K = $e(null), Y = $e(null), x = $e(null), k = $e(null), rr = b( | ||
| ({ children: n }) => /* @__PURE__ */ ne.jsx(ne.Fragment, { children: n }), | ||
| onMouseLeave: ne, | ||
| onTouchStart: ae, | ||
| onTouchMove: je, | ||
| onTouchEnd: Ce, | ||
| children: Se, | ||
| ...rr | ||
| }, tr) => { | ||
| const R = $e(), he = $e(!1), oe = !F && (!Y || Y && !we), q = $e(null), P = $e(null), j = $e(null), H = $e(null), Ae = w( | ||
| ({ children: n }) => /* @__PURE__ */ re.jsx(re.Fragment, { children: n }), | ||
| [] | ||
| ), He = Ge || rr; | ||
| y && (S = A(S, 0, 50) / 2), H = A(H, 0, 90), N = A(N, 0, 90), B = A(B, 0, 90), U = A(U, 0, 90), F && (F = A( | ||
| F, | ||
| -H, | ||
| H | ||
| )), _ && (_ = A( | ||
| ), He = er || Ae; | ||
| y && (x = z(x, 0, 50) / 2), b && (be = be < 0 ? 0 : be / 2), N = z(N, 0, 90), A = z(A, 0, 90), B = z(B, 0, 90), U = z(U, 0, 90), _ && (_ = z( | ||
| _, | ||
| -N, | ||
| N | ||
| )), O && (O = z( | ||
| O, | ||
| -A, | ||
| A | ||
| )); | ||
| const _e = fr(() => y ? (100 - S) / 2 : 0, [y, S]), Se = fr(() => y ? _e + S : 0, [y, S, _e]), $ = b((n = !0) => { | ||
| const ie = ur(() => y ? (100 - x) / 2 : 0, [y, x]), Je = ur(() => y ? ie + x : 0, [y, x, ie]), D = w((n = !0) => { | ||
| requestAnimationFrame(() => { | ||
| Y.current && (Y.current.style.willChange = n ? "transform" : ""), x.current && (x.current.style.willChange = n ? "transform, opacity" : ""), k.current && (k.current.style.willChange = n ? "transform" : ""); | ||
| P.current && (P.current.style.willChange = n ? "transform" : ""), j.current && (j.current.style.willChange = n ? "transform, opacity" : ""), H.current && (H.current.style.willChange = n ? "transform" : ""); | ||
| }); | ||
| }, []), L = b( | ||
| }, []), L = w( | ||
| (n = !0) => { | ||
| requestAnimationFrame(() => { | ||
| if (W === "box") | ||
| Y.current && h && (Y.current.style.boxShadow = n ? Z : ""); | ||
| else if (K.current && h) { | ||
| const f = K.current.style.filter.replace( | ||
| P.current && h && (P.current.style.boxShadow = n ? Z : ""); | ||
| else if (q.current && h) { | ||
| const f = q.current.style.filter.replace( | ||
| /(drop-shadow?\(.*?\))(?=\s[a-z].*?\(.*?\)|\s*$)/g, | ||
| "" | ||
| ); | ||
| K.current.style.filter = n ? f + ` drop-shadow(${Z})` : f; | ||
| q.current.style.filter = n ? f + ` drop-shadow(${Z})` : f; | ||
| } | ||
@@ -851,48 +852,48 @@ }); | ||
| [Z, h, W] | ||
| ), se = b(() => { | ||
| if (!K.current || !x.current || !T.current) | ||
| ), fe = w(() => { | ||
| if (!q.current || !j.current || !R.current) | ||
| return; | ||
| const n = Er( | ||
| T.current, | ||
| he, | ||
| R.current, | ||
| pe, | ||
| Ve | ||
| ), f = _r( | ||
| R.current, | ||
| pe, | ||
| Ne | ||
| ), f = _r( | ||
| T.current, | ||
| he, | ||
| Be | ||
| ); | ||
| requestAnimationFrame(() => { | ||
| x.current && (x.current.style.opacity = n, x.current.style.transform = f); | ||
| j.current && (j.current.style.opacity = n, j.current.style.transform = f); | ||
| }); | ||
| }, [he, Ne, Be]), ce = b(() => { | ||
| if (!K.current || !k.current || !T.current) | ||
| }, [pe, Ve, Ne]), ue = w(() => { | ||
| if (!q.current || !H.current || !R.current) | ||
| return; | ||
| const n = br( | ||
| T.current, | ||
| R.current, | ||
| Q, | ||
| me | ||
| ve | ||
| ); | ||
| requestAnimationFrame(() => { | ||
| k.current && (k.current.style.transform = n); | ||
| H.current && (H.current.style.transform = n); | ||
| }); | ||
| }, [Q, me]), G = b( | ||
| }, [Q, ve]), M = w( | ||
| (n = !0) => { | ||
| if (!K.current || !T.current) | ||
| if (!q.current || !R.current) | ||
| return { angleX: 0, angleY: 0 }; | ||
| let f = -(T.current.offsetY - 0.5) * 2 * H, l = (T.current.offsetX - 0.5) * 2 * N; | ||
| return Ue && n && (f = -f, l = -l), { angleX: f, angleY: l }; | ||
| let f = -(R.current.offsetY - 0.5) * 2 * N, l = (R.current.offsetX - 0.5) * 2 * A; | ||
| return Be && n && (f = -f, l = -l), { angleX: f, angleY: l }; | ||
| }, | ||
| [H, N, Ue] | ||
| ), Je = b( | ||
| [N, A, Be] | ||
| ), Ke = w( | ||
| (n) => { | ||
| const f = (n.angleY / N + 1) / 2, l = (-n.angleX / H + 1) / 2; | ||
| T.current = { offsetX: f, offsetY: l }; | ||
| const f = (n.angleY / A + 1) / 2, l = (-n.angleX / N + 1) / 2; | ||
| R.current = { offsetX: f, offsetY: l }; | ||
| }, | ||
| [H, N] | ||
| ), le = b( | ||
| [N, A] | ||
| ), J = w( | ||
| (n, f = !0, l = !1) => { | ||
| const pe = f ? m : 1; | ||
| const Ee = f ? m : 1; | ||
| requestAnimationFrame(() => { | ||
| Y.current && (Y.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${pe},${pe},${pe})`); | ||
| }), oe && oe( | ||
| P.current && (P.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${Ee},${Ee},${Ee})`); | ||
| }), Ye && Ye( | ||
| { | ||
@@ -905,27 +906,27 @@ angleX: n.angleX, | ||
| }, | ||
| [oe, m] | ||
| ), X = b( | ||
| [Ye, m] | ||
| ), K = w( | ||
| (n, f = !1, l = !1) => { | ||
| Je(n), le(n, f, l), L(f), ce(), se(); | ||
| Ke(n), J(n, f, l), L(f), ue(), fe(); | ||
| }, | ||
| [ | ||
| Je, | ||
| le, | ||
| Ke, | ||
| J, | ||
| L, | ||
| ce, | ||
| se | ||
| ue, | ||
| fe | ||
| ] | ||
| ), q = b(() => { | ||
| Ye && Ye(), F || _ ? X({ | ||
| angleX: F || 0, | ||
| angleY: _ || 0 | ||
| }) : (T.current = void 0, requestAnimationFrame(() => { | ||
| k.current && (k.current.style.transform = `translateX(${me ? "50%" : "-100%"})`), x.current && (x.current.style.transform = "translateX(0%) translateY(0%)", x.current.style.opacity = "0"), Y.current && (Y.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"); | ||
| ), S = w(() => { | ||
| Te && Te(), _ || O ? K({ | ||
| angleX: _ || 0, | ||
| angleY: O || 0 | ||
| }) : (R.current = void 0, requestAnimationFrame(() => { | ||
| H.current && (H.current.style.transform = `translateX(${ve ? "50%" : "-100%"})`), j.current && (j.current.style.transform = "translateX(0%) translateY(0%)", j.current.style.opacity = "0"), P.current && (P.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"); | ||
| })); | ||
| }, [F, _, me, Ye, X]), z = b( | ||
| }, [_, O, ve, Te, K]), se = w( | ||
| (n, f) => { | ||
| if (!f) | ||
| return; | ||
| if (D && f instanceof Document) { | ||
| T.current = { | ||
| if (F && f instanceof Document) { | ||
| R.current = { | ||
| offsetX: n.x / window.innerWidth, | ||
@@ -939,57 +940,57 @@ offsetY: n.y / window.innerHeight | ||
| return; | ||
| const pe = A( | ||
| const Ee = z( | ||
| n.x, | ||
| l.left, | ||
| l.right | ||
| ), tr = A( | ||
| ), nr = z( | ||
| n.y, | ||
| l.top, | ||
| l.bottom | ||
| ), nr = (pe - l.left) / l.width, ar = (tr - l.top) / l.height; | ||
| T.current = { offsetX: nr, offsetY: ar }; | ||
| ), ar = (Ee - l.left) / l.width, or = (nr - l.top) / l.height; | ||
| R.current = { offsetX: ar, offsetY: or }; | ||
| }, | ||
| [D] | ||
| [F] | ||
| ); | ||
| mr( | ||
| er, | ||
| tr, | ||
| () => ({ | ||
| tilt: X, | ||
| reset: q, | ||
| angle: () => G(!1), | ||
| updateWillChange: $, | ||
| element: K.current | ||
| tilt: K, | ||
| reset: S, | ||
| angle: () => M(!1), | ||
| updateWillChange: D, | ||
| element: q.current | ||
| }), | ||
| [X, q, $, G] | ||
| [K, S, D, M] | ||
| ); | ||
| const ee = b(() => { | ||
| w || (M.current = !0, $(), L()); | ||
| }, [w, L, $]), re = b(() => { | ||
| w || (O && !D && (typeof O == "boolean" ? document.body.style.overflow = "hidden" : O.style.overflow = "hidden"), M.current = !0, $(), L()); | ||
| const G = w(() => { | ||
| T || (he.current = !0, D(), L()); | ||
| }, [T, L, D]), ce = w(() => { | ||
| T || ($ && !F && (typeof $ == "boolean" ? document.body.style.overflow = "hidden" : $.style.overflow = "hidden"), he.current = !0, D(), L()); | ||
| }, [ | ||
| O, | ||
| w, | ||
| D, | ||
| $, | ||
| T, | ||
| F, | ||
| L, | ||
| $ | ||
| ]), de = b( | ||
| D | ||
| ]), ye = w( | ||
| (n) => { | ||
| w || (z( | ||
| T || (se( | ||
| { x: n.clientX, y: n.clientY }, | ||
| n.currentTarget | ||
| ), le(G()), ce(), se()); | ||
| ), J(M()), ue(), fe()); | ||
| }, | ||
| [ | ||
| w, | ||
| G, | ||
| z, | ||
| le, | ||
| ce, | ||
| se | ||
| T, | ||
| M, | ||
| se, | ||
| J, | ||
| ue, | ||
| fe | ||
| ] | ||
| ), be = b( | ||
| ), le = w( | ||
| (n) => { | ||
| if (w) | ||
| if (T) | ||
| return; | ||
| const f = n.changedTouches[0]; | ||
| f && (z( | ||
| f && (se( | ||
| { | ||
@@ -1000,56 +1001,56 @@ x: f.clientX, | ||
| n.currentTarget | ||
| ), le(G()), ce(), se()); | ||
| ), J(M()), ue(), fe()); | ||
| }, | ||
| [ | ||
| w, | ||
| G, | ||
| z, | ||
| le, | ||
| ce, | ||
| se | ||
| T, | ||
| M, | ||
| se, | ||
| J, | ||
| ue, | ||
| fe | ||
| ] | ||
| ), ve = b(() => { | ||
| w || (M.current = !1, $(!1), L(!1), Oe && q()); | ||
| }, [w, q, Oe, L, $]), Re = b(() => { | ||
| w || (O && !D && (typeof O == "boolean" ? document.body.style.overflow = "" : O.style.overflow = ""), M.current = !1, $(!1), L(!1), Oe && q()); | ||
| ), ge = w(() => { | ||
| T || (he.current = !1, D(!1), L(!1), me && S()); | ||
| }, [T, S, me, L, D]), de = w(() => { | ||
| T || ($ && !F && (typeof $ == "boolean" ? document.body.style.overflow = "" : $.style.overflow = ""), he.current = !1, D(!1), L(!1), me && S()); | ||
| }, [ | ||
| O, | ||
| w, | ||
| D, | ||
| q, | ||
| Oe, | ||
| $, | ||
| T, | ||
| F, | ||
| S, | ||
| me, | ||
| L, | ||
| $ | ||
| D | ||
| ]); | ||
| ur(() => { | ||
| if (!P && !D) | ||
| sr(() => { | ||
| if (!Y && !F) | ||
| return; | ||
| let n; | ||
| D || !P ? n = [document] : n = Array.isArray(P) ? P : [P]; | ||
| F || !Y ? n = [document] : n = Array.isArray(Y) ? Y : [Y]; | ||
| for (let f of n) { | ||
| const l = lr(f); | ||
| l && (f = l, f.addEventListener("mouseenter", ee), f.addEventListener("mousemove", de), f.addEventListener("mouseleave", ve), f.addEventListener("touchstart", re, { passive: !0 }), f.addEventListener("touchmove", be, { passive: !0 }), f.addEventListener("touchend", Re, { passive: !0 })); | ||
| const l = dr(f); | ||
| l && (f = l, f.addEventListener("mouseenter", G), f.addEventListener("mousemove", ye), f.addEventListener("mouseleave", ge), f.addEventListener("touchstart", ce, { passive: !0 }), f.addEventListener("touchmove", le, { passive: !0 }), f.addEventListener("touchend", de, { passive: !0 })); | ||
| } | ||
| return () => { | ||
| for (let f of n) { | ||
| const l = lr(f); | ||
| l && (f = l, f.removeEventListener("mouseenter", ee), f.removeEventListener("mousemove", de), f.removeEventListener("mouseleave", ve), f.removeEventListener("touchstart", re), f.removeEventListener("touchmove", be), f.removeEventListener("touchend", Re)); | ||
| const l = dr(f); | ||
| l && (f = l, f.removeEventListener("mouseenter", G), f.removeEventListener("mousemove", ye), f.removeEventListener("mouseleave", ge), f.removeEventListener("touchstart", ce), f.removeEventListener("touchmove", le), f.removeEventListener("touchend", de)); | ||
| } | ||
| }; | ||
| }, [ | ||
| P, | ||
| ee, | ||
| Y, | ||
| G, | ||
| ye, | ||
| ge, | ||
| ce, | ||
| le, | ||
| de, | ||
| ve, | ||
| re, | ||
| be, | ||
| Re, | ||
| D | ||
| F | ||
| ]); | ||
| const ke = b( | ||
| const ke = w( | ||
| (n) => { | ||
| if (M.current || n.beta === null && n.gamma === null) | ||
| if (he.current || n.beta === null && n.gamma === null) | ||
| return; | ||
| let f = B && n.beta ? A(-n.beta, -B, B) : F || 0, l = U && n.gamma ? A(n.gamma, -U, U) : _ || 0; | ||
| De && (f = -f, l = -l), X({ angleX: f, angleY: l }, !1, !0); | ||
| let f = B && n.beta ? z(-n.beta, -B, B) : _ || 0, l = U && n.gamma ? z(n.gamma, -U, U) : O || 0; | ||
| De && (f = -f, l = -l), K({ angleX: f, angleY: l }, !1, !0); | ||
| }, | ||
@@ -1059,18 +1060,18 @@ [ | ||
| U, | ||
| F, | ||
| _, | ||
| O, | ||
| De, | ||
| X | ||
| K | ||
| ] | ||
| ); | ||
| return ur(() => { | ||
| return sr(() => { | ||
| if (!(!B && !U)) | ||
| return window.addEventListener("deviceorientation", ke), () => window.removeEventListener("deviceorientation", ke); | ||
| }, [B, U, ke, $]), /* @__PURE__ */ ne.jsx( | ||
| }, [B, U, ke, D]), /* @__PURE__ */ re.jsx( | ||
| "div", | ||
| { | ||
| ref: (n) => { | ||
| n && (K.current = n, T.current && (w ? q() : X(G())), (F || _) && !T.current && q()); | ||
| n && (q.current = n, R.current && (T ? S() : K(M())), (_ || O) && !R.current && S()); | ||
| }, | ||
| "data-testid": J ? "container" : void 0, | ||
| "data-testid": X ? "container" : void 0, | ||
| style: Object.assign( | ||
@@ -1084,33 +1085,33 @@ { | ||
| perspective: i, | ||
| transformStyle: Ee ? "preserve-3d" : void 0, | ||
| transformStyle: Oe ? "preserve-3d" : void 0, | ||
| backfaceVisibility: "hidden", | ||
| filter: w ? ze : void 0, | ||
| transition: W === "drop" ? ge : void 0 | ||
| filter: T ? ze : void 0, | ||
| transition: W === "drop" ? Re : void 0 | ||
| }, | ||
| ye | ||
| Ue | ||
| ), | ||
| onMouseEnter: ue ? Te ? (n) => { | ||
| ee(), Te(n); | ||
| } : ee : Te, | ||
| onTouchStart: ue ? ie ? (n) => { | ||
| re(), ie(n); | ||
| } : re : ie, | ||
| onMouseMove: ue ? Le ? (n) => { | ||
| de(n), Le(n); | ||
| } : de : Le, | ||
| onTouchMove: ue ? fe ? (n) => { | ||
| be(n), fe(n); | ||
| } : be : fe, | ||
| onMouseLeave: ue ? Ie ? (n) => { | ||
| ve(), Ie(n); | ||
| } : ve : Ie, | ||
| onTouchEnd: ue ? je ? (n) => { | ||
| Re(), je(n); | ||
| } : Re : je, | ||
| ...Ce, | ||
| children: /* @__PURE__ */ ne.jsx(He, { children: /* @__PURE__ */ ne.jsxs( | ||
| onMouseEnter: oe ? Pe ? (n) => { | ||
| G(), Pe(n); | ||
| } : G : Pe, | ||
| onTouchStart: oe ? ae ? (n) => { | ||
| ce(), ae(n); | ||
| } : ce : ae, | ||
| onMouseMove: oe ? Le ? (n) => { | ||
| ye(n), Le(n); | ||
| } : ye : Le, | ||
| onTouchMove: oe ? je ? (n) => { | ||
| le(n), je(n); | ||
| } : le : je, | ||
| onMouseLeave: oe ? ne ? (n) => { | ||
| ge(), ne(n); | ||
| } : ge : ne, | ||
| onTouchEnd: oe ? Ce ? (n) => { | ||
| de(), Ce(n); | ||
| } : de : Ce, | ||
| ...rr, | ||
| children: /* @__PURE__ */ re.jsx(He, { children: /* @__PURE__ */ re.jsxs( | ||
| "div", | ||
| { | ||
| ref: Y, | ||
| "data-testid": J ? "tilt" : void 0, | ||
| ref: P, | ||
| "data-testid": X ? "tilt" : void 0, | ||
| style: Object.assign( | ||
@@ -1123,5 +1124,5 @@ { | ||
| borderRadius: v, | ||
| transformStyle: Ee ? "preserve-3d" : void 0, | ||
| transformStyle: Oe ? "preserve-3d" : void 0, | ||
| backfaceVisibility: "hidden", | ||
| transition: ge, | ||
| transition: Re, | ||
| transform: "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)" | ||
@@ -1133,7 +1134,7 @@ }, | ||
| children: [ | ||
| Ae, | ||
| R && /* @__PURE__ */ ne.jsx( | ||
| Se, | ||
| b && /* @__PURE__ */ re.jsx( | ||
| "div", | ||
| { | ||
| "data-testid": J ? "spot-glare-container" : void 0, | ||
| "data-testid": X ? "spot-glare-container" : void 0, | ||
| style: { | ||
@@ -1146,17 +1147,17 @@ pointerEvents: "none", | ||
| backfaceVisibility: "hidden", | ||
| mixBlendMode: Qe | ||
| mixBlendMode: Me | ||
| }, | ||
| children: /* @__PURE__ */ ne.jsx( | ||
| children: /* @__PURE__ */ re.jsx( | ||
| "div", | ||
| { | ||
| ref: x, | ||
| "data-testid": J ? "spot-glare" : void 0, | ||
| ref: j, | ||
| "data-testid": X ? "spot-glare" : void 0, | ||
| style: { | ||
| position: "absolute", | ||
| left: he === "all" ? "-50%" : "-100%", | ||
| top: he === "all" ? "-50%" : "-100%", | ||
| left: pe === "all" ? "-50%" : "-100%", | ||
| top: pe === "all" ? "-50%" : "-100%", | ||
| width: "200%", | ||
| height: "200%", | ||
| transition: ge, | ||
| backgroundImage: `radial-gradient(${Me}, transparent)`, | ||
| transition: Re, | ||
| backgroundImage: `radial-gradient(${Ge}, transparent ${be}%)`, | ||
| transform: "translateX(0%) translateY(0%)", | ||
@@ -1169,6 +1170,6 @@ opacity: "0" | ||
| ), | ||
| y && /* @__PURE__ */ ne.jsx( | ||
| y && /* @__PURE__ */ re.jsx( | ||
| "div", | ||
| { | ||
| "data-testid": J ? "line-glare-container" : void 0, | ||
| "data-testid": X ? "line-glare-container" : void 0, | ||
| style: { | ||
@@ -1181,9 +1182,9 @@ pointerEvents: "none", | ||
| backfaceVisibility: "hidden", | ||
| mixBlendMode: we | ||
| mixBlendMode: _e | ||
| }, | ||
| children: /* @__PURE__ */ ne.jsx( | ||
| children: /* @__PURE__ */ re.jsx( | ||
| "div", | ||
| { | ||
| "data-testid": J ? "line-glare" : void 0, | ||
| ref: k, | ||
| "data-testid": X ? "line-glare" : void 0, | ||
| ref: H, | ||
| style: { | ||
@@ -1195,7 +1196,7 @@ position: "absolute", | ||
| height: "200%", | ||
| filter: ae ? `blur(${j})` : "", | ||
| transition: ge, | ||
| filter: te ? `blur(${C})` : "", | ||
| transition: Re, | ||
| opacity: String(V), | ||
| transform: `translateX(${me ? "50%" : "-100%"})`, | ||
| backgroundImage: `linear-gradient(${Ze === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${_e}%, ${Fe} calc(${_e}% + 1px), ${Fe} ${Se}%, transparent calc(${Se}% + 1px), transparent 0%)` | ||
| transform: `translateX(${ve ? "50%" : "-100%"})`, | ||
| backgroundImage: `linear-gradient(${Qe === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${ie}%, ${Fe} calc(${ie}% + 1px), ${Fe} ${Je}%, transparent calc(${Je}% + 1px), transparent 0%)` | ||
| } | ||
@@ -1214,3 +1215,3 @@ } | ||
| Rr, | ||
| (a, o) => Ke(a, o) | ||
| (a, o) => Ze(a, o) | ||
| ); | ||
@@ -1217,0 +1218,0 @@ wr.displayName = "Tilt"; |
| { | ||
| "name": "react-next-tilt", | ||
| "private": false, | ||
| "version": "0.1.1", | ||
| "version": "0.2.1", | ||
| "description": "A Performant Customizable Tilt Component for React", | ||
@@ -6,0 +6,0 @@ "main": "./dist/react-next-tilt.umd.cjs", |
@@ -103,3 +103,3 @@ <h1 align="center"> | ||
| <table aria-hidden="false" ><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody><tr><td><span>width</span></td><td><div><span>Width of the component</span></div><div><span>note: You can also set the width using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>height</span></td><td><div><span>Height of the component</span></div><div><span>note: You can also set the height using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>borderRadius</span></td><td><div><span>Border radius of the component (applied to glare elements as well)</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>perspective</span></td><td><div><span>Determines how far the elements are from the user</span></div><div>example: '1000px', '60em', '50rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"1000px"</span></div></td></tr><tr><td><span>scale</span></td><td><div><span>Amount of scale applied to the component on hover/touch</span></div><div><div><code><span>number</span></div></code></div></td><td><div><span>1</span></div></td></tr><tr><td><span>shadowEnable</span></td><td><div><span>Enables/Disables the shadow applied to the container or tilt element on hover/touch</span></div><div><div><code><span>boolean</span></div></code></div></td><td><div><span>false</span></div></td></tr><tr><td><span>shadow</span></td><td><div><span>The shadow applied to the container or tilt element on hover/touch</span></div><div><div><code><span>string</span></div></code></div></td><td><div><span>"0 0 1rem rgba(0,0,0,0.5)"</span></div></td></tr><tr><td><span>shadowType</span></td><td><div><span>Type of the shadow applied on hover/touch</span></div><div><span>If set to <code>'box'</code>, shadow is applied as <code>box-shadow</code> to the tilt element</span></div><div><span>If set to <code>'drop'</code>, shadow is applied as <code>filter: drop-shadow()</code> to the container element</span></div><div><span>note: Set to <code>'drop'</code> if you have a setup where elements go outside the tilt element and want to apply the shadow to them as well,</span></div><div><span>Or if you have multiple elements inside the tilt element and want the shadow to apply to them individually and not the whole tilt element</span></div><div><div><code><span>"box"</span> | <span>"drop"</span></div></code></div></td><td><div><span>"box"</span></div></td></tr><tr><td><span>lineGlareEnable</span></td><td><div><span>Enables/Disables the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurEnable</span></td><td><div><span>Enables/Disables the blur applied to the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurAmount</span></td><td><div><span>Amount of blur applied to the line glare effect</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"4px"</span></div></td></tr><tr><td><span>lineGlareWidthPercent</span></td><td><div><span>Width of the line glare in relation to the component</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>10</span></div></td></tr><tr><td><span>lineGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the line glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.1</span></div></td></tr><tr><td><span>lineGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the line glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>lineGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>lineGlareReverse</span></td><td><div><span>Reverses the movement of the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>lineGlareDirection</span></td><td><div><span>Changes the direction/angle of the line glare effect</span></div><div><div><code><span>"to-bottom-right"</span> | <span>"to-bottom-left"</span></div></div></td><td><div><span>"to-bottom-right"</span></code></div></td></tr><tr><td><span>lineGlareHoverPosition</span></td><td><div><span>Determines the areas of the component that show the line glare effect when hovered/touched</span></div><div><div><code><span>"top-left"</span> | <span>"top-right"</span> | <span>"bottom-left"</span> | <span>"bottom-right"</span></code></div></div></td><td><div><span>"top-left"</span></div></td></tr><tr><td><span>spotGlareEnable</span></td><td><div><span>Enables/Disables the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>spotGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the spot glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.5</span></div></td></tr><tr><td><span>spotGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the spot glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>spotGlarePosition</span></td><td><div><span>Determines the position of the spot glare effect inside the component</span></div><div><div><code><span>"top"</span> | <span>"right"</span> | <span>"bottom"</span> | <span>"left"</span> | <span>"all"</span></code></div></div></td><td><div><span>"top"</span></div></td></tr><tr><td><span>spotGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>spotGlareReverse</span></td><td><div><span>Reverses the movement of the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltReverse</span></td><td><div><span>Reverses the tilt direction/movement</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltReset</span></td><td><div><span>Enables/Disables resetting the tilt effect on mouseLeave/touchEnd</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>initialAngleX</span></td><td><div><span>Initial tilt/rotation angle around the X axis</span></div><div>note: Is limited to [-tiltMaxAngleX - tiltMaxAngleX] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>initialAngleY</span></td><td><div><span>Initial tilt/rotation angle around the Y axis</span></div><div>note: Is limited to [-tiltMaxAngleY - tiltMaxAngleY] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>disableScrollOnTouch</span></td><td><div><span>Disables scrolling (<code>overflow: hidden</code>) during touch inetraction to prevent unwanted movement</span></div><div>note: Disables scrolling on "body" if set to "boolean". You can also pass an "HTMLElement" which scrolling will be disabled for, instead of "body"</div><div><div><code><span>boolean</span> | <span>HTMLElement</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>style</span></td><td><div><span>Style passed to the component's container element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltStyle</span></td><td><div><span>Style passed to the component's tilt element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltProps</span></td><td><div><span>Properties passed to the tilt element</span></div><div><code><span>HTMLAttributes<HTMLDivElement> & { [data: `data-${string}`]: string; }</span></code></div></td><td><span>-</span></td></tr><tr><td><span>gyroMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroReverse</span></td><td><div><span>Reverses the tilt direction for gyroscope</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabled</span></td><td><div><span>Disables the tilt effect and applies the disabledFilter to the container</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabledFilter</span></td><td><div><span>CSS filter applied to the container when <code>disabled = true</code></span></div><div><div><code><span>string</span></code></div></div></td><td><span>"grayscale(1) brightness(125%)"</span></td></tr><tr><td><span>CSSTransition</span></td><td><div><span>CSS transition applied to the tilt, line glare, and spot glare elements</span></div><div><code><span>string</span></code></div></td><td><span>"all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)"</span></td></tr><tr><td><span>TiltWrapper</span></td><td><div><span>Component wrapping the tilt element</span></div><div>note: Is useful when integrating this component into another component</div><div><code><span>FC<{ children?: ReactNode; }></span></code></div></td><td><span>({ children }: PropsWithChildren) => <>{children}</></span></td></tr><tr><td><span>fullPageListening</span></td><td><div><span>Enables/Disables full-page listening. This component's event handlers will be added to the "document"</span></div><div>note: If set to "true", "controlElement", "controlElementOnly", and "disableScrollOnTouch" properties will have no effect</div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>controlElement</span></td><td><div><span> | ||
| <table aria-hidden="false" ><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody><tr><td><span>width</span></td><td><div><span>Width of the component</span></div><div><span>note: You can also set the width using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>height</span></td><td><div><span>Height of the component</span></div><div><span>note: You can also set the height using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>borderRadius</span></td><td><div><span>Border radius of the component (applied to glare elements as well)</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>perspective</span></td><td><div><span>Determines how far the elements are from the user</span></div><div>example: '1000px', '60em', '50rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"1000px"</span></div></td></tr><tr><td><span>scale</span></td><td><div><span>Amount of scale applied to the component on hover/touch</span></div><div><div><code><span>number</span></div></code></div></td><td><div><span>1</span></div></td></tr><tr><td><span>shadowEnable</span></td><td><div><span>Enables/Disables the shadow applied to the container or tilt element on hover/touch</span></div><div><div><code><span>boolean</span></div></code></div></td><td><div><span>false</span></div></td></tr><tr><td><span>shadow</span></td><td><div><span>The shadow applied to the container or tilt element on hover/touch</span></div><div><div><code><span>string</span></div></code></div></td><td><div><span>"0 0 1rem rgba(0,0,0,0.5)"</span></div></td></tr><tr><td><span>shadowType</span></td><td><div><span>Type of the shadow applied on hover/touch</span></div><div><span>If set to <code>'box'</code>, shadow is applied as <code>box-shadow</code> to the tilt element</span></div><div><span>If set to <code>'drop'</code>, shadow is applied as <code>filter: drop-shadow()</code> to the container element</span></div><div><span>note: Set to <code>'drop'</code> if you have a setup where elements go outside the tilt element and want to apply the shadow to them as well,</span></div><div><span>Or if you have multiple elements inside the tilt element and want the shadow to apply to them individually and not the whole tilt element</span></div><div><div><code><span>"box"</span> | <span>"drop"</span></div></code></div></td><td><div><span>"box"</span></div></td></tr><tr><td><span>lineGlareEnable</span></td><td><div><span>Enables/Disables the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurEnable</span></td><td><div><span>Enables/Disables the blur applied to the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurAmount</span></td><td><div><span>Amount of blur applied to the line glare effect</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"4px"</span></div></td></tr><tr><td><span>lineGlareWidthPercent</span></td><td><div><span>Width of the line glare in relation to the component</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>10</span></div></td></tr><tr><td><span>lineGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the line glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.1</span></div></td></tr><tr><td><span>lineGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the line glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>lineGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>lineGlareReverse</span></td><td><div><span>Reverses the movement of the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>lineGlareDirection</span></td><td><div><span>Changes the direction/angle of the line glare effect</span></div><div><div><code><span>"to-bottom-right"</span> | <span>"to-bottom-left"</span></div></div></td><td><div><span>"to-bottom-right"</span></code></div></td></tr><tr><td><span>lineGlareHoverPosition</span></td><td><div><span>Determines the areas of the component that show the line glare effect when hovered/touched</span></div><div><div><code><span>"top-left"</span> | <span>"top-right"</span> | <span>"bottom-left"</span> | <span>"bottom-right"</span></code></div></div></td><td><div><span>"top-left"</span></div></td></tr><tr><td><span>spotGlareEnable</span></td><td><div><span>Enables/Disables the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>spotGlareSizePercent</span></td><td><div><span>Size of the spot glare effect in relation to the component between <code>0</code> to <code>Infinity</code></span></div><div><span>note: If <code>spotGlarePosition</code> is set to anything other than <code>'all'</code>, only half of the spot glare effect is visible at any time.</span></div><div><span>That's why the default value is 200 to cover the whole element.</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>200</span></div></td></tr><tr><td><span>spotGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the spot glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.5</span></div></td></tr><tr><td><span>spotGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the spot glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>spotGlarePosition</span></td><td><div><span>Determines the position of the spot glare effect inside the component</span></div><div><div><code><span>"top"</span> | <span>"right"</span> | <span>"bottom"</span> | <span>"left"</span> | <span>"all"</span></code></div></div></td><td><div><span>"top"</span></div></td></tr><tr><td><span>spotGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>spotGlareReverse</span></td><td><div><span>Reverses the movement of the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltReverse</span></td><td><div><span>Reverses the tilt direction/movement</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltReset</span></td><td><div><span>Enables/Disables resetting the tilt effect on mouseLeave/touchEnd</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>initialAngleX</span></td><td><div><span>Initial tilt/rotation angle around the X axis</span></div><div>note: Is limited to [-tiltMaxAngleX - tiltMaxAngleX] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>initialAngleY</span></td><td><div><span>Initial tilt/rotation angle around the Y axis</span></div><div>note: Is limited to [-tiltMaxAngleY - tiltMaxAngleY] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>disableScrollOnTouch</span></td><td><div><span>Disables scrolling (<code>overflow: hidden</code>) during touch inetraction to prevent unwanted movement</span></div><div>note: Disables scrolling on "body" if set to "boolean". You can also pass an "HTMLElement" which scrolling will be disabled for, instead of "body"</div><div><div><code><span>boolean</span> | <span>HTMLElement</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>style</span></td><td><div><span>Style passed to the component's container element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltStyle</span></td><td><div><span>Style passed to the component's tilt element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltProps</span></td><td><div><span>Properties passed to the tilt element</span></div><div><code><span>HTMLAttributes<HTMLDivElement> & { [data: `data-${string}`]: string; }</span></code></div></td><td><span>-</span></td></tr><tr><td><span>gyroMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroReverse</span></td><td><div><span>Reverses the tilt direction for gyroscope</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabled</span></td><td><div><span>Disables the tilt effect and applies the disabledFilter to the container</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabledFilter</span></td><td><div><span>CSS filter applied to the container when <code>disabled = true</code></span></div><div><div><code><span>string</span></code></div></div></td><td><span>"grayscale(1) brightness(125%)"</span></td></tr><tr><td><span>CSSTransition</span></td><td><div><span>CSS transition applied to the tilt, line glare, and spot glare elements</span></div><div><code><span>string</span></code></div></td><td><span>"all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)"</span></td></tr><tr><td><span>TiltWrapper</span></td><td><div><span>Component wrapping the tilt element</span></div><div>note: Is useful when integrating this component into another component</div><div><code><span>FC<{ children?: ReactNode; }></span></code></div></td><td><span>({ children }: PropsWithChildren) => <>{children}</></span></td></tr><tr><td><span>fullPageListening</span></td><td><div><span>Enables/Disables full-page listening. This component's event handlers will be added to the "document"</span></div><div>ote: If set to "true", "controlElement", "controlElementOnly", and "disableScrollOnTouch" properties will have no effect</div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>controlElement</span></td><td><div><span> | ||
| Element(s) that control(s) this component. This component's event handlers will be added to them</span></div><div>note: You can pass an HTMLElement, a ref, or an array of them</div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div>example: element, ref, [element, ref], [ref1, ref2]</div><div><code><span>HTMLElement | RefObject<unknown> | (HTMLElement | RefObject<unknown>)[]</span></code></div></td><td><span>-</span></td></tr><tr><td><span>controlElementOnly</span></td><td><div><span>If set to "true", events will be disabled for the component and it will be controlled by the controlElement(s) only</span></div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>preserve3dEnable</span></td><td><div><span>If set to true, adds <code>transform-style: preserve-3d;</code> to the container and tilt elements</span></div><div>note: Enable if you want to set up a parallax effect and translate elements along the <code>Z</code> axis</div><div><span>Disable if you are having problems with blur</span></div><div><span>warning: Can cause blur on scale (prevents re-rastering at higher scales by Chrome's compositor and the element is always rasterized at scale 1)</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>testIdEnable</span></td><td><div><span>Adds the <code>data-testid=...</code> property to all elements for testing purposes</span></div><div>note: Can also be used to select/grab and modify each element if you want to do heavy customization</div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr></tbody></table> | ||
@@ -106,0 +106,0 @@ |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.09%
108563
- Lines of code
- increased by0.72%
1815
No dependency changes