@dust-tt/sparkle 0.2.46-teta → 0.2.47

package/dist/cjs/components/Hover3D.d.ts

@@ -12,9 +12,11 @@ interface Hover3DProps {
     perspective?: number;
     className?: string;
     depth?: number;
+    range?: number;
     fullscreenSensible?: boolean;
+    reference?: "screen" | "object";
 }
-declare function Hover3D({ children, xOffset, yOffset, attack, release, perspective, depth, className, fullscreenSensible, }: Hover3DProps): React.JSX.Element;
+declare function Hover3D({ children, xOffset, yOffset, attack, release, perspective, depth, className, range, fullscreenSensible, reference, }: Hover3DProps): React.JSX.Element;
 interface divProps {
     depth: number;
     children: React.ReactNode;

package/dist/cjs/index.js

@@ -132,11 +132,11 @@ var Hover3DContext = React.createContext({ isHovered: false });
 // Custom hook to use the context
 var useHover3D = function () { return React.useContext(Hover3DContext); };
 function Hover3D(_a) {
-    var children = _a.children, _b = _a.xOffset, xOffset = _b === void 0 ? 10 : _b, _c = _a.yOffset, yOffset = _c === void 0 ? 10 : _c, _d = _a.attack, attack = _d === void 0 ? 0.1 : _d, _e = _a.release, release = _e === void 0 ? 0.5 : _e, _f = _a.perspective, perspective = _f === void 0 ? 500 : _f, _g = _a.depth, depth = _g === void 0 ? -10 : _g, _h = _a.className, className = _h === void 0 ? "" : _h, _j = _a.fullscreenSensible, fullscreenSensible = _j === void 0 ? false : _j;
+    var children = _a.children, _b = _a.xOffset, xOffset = _b === void 0 ? 10 : _b, _c = _a.yOffset, yOffset = _c === void 0 ? 10 : _c, _d = _a.attack, attack = _d === void 0 ? 0.1 : _d, _e = _a.release, release = _e === void 0 ? 0.5 : _e, _f = _a.perspective, perspective = _f === void 0 ? 500 : _f, _g = _a.depth, depth = _g === void 0 ? -10 : _g, _h = _a.className, className = _h === void 0 ? "" : _h, _j = _a.range, range = _j === void 0 ? 3 : _j, _k = _a.fullscreenSensible, fullscreenSensible = _k === void 0 ? false : _k, _l = _a.reference, reference = _l === void 0 ? "object" : _l;
     var elementRef = React.useRef(null);
-    var _k = __read(React.useState(fullscreenSensible), 2), isHovered = _k[0], setHovered = _k[1];
-    var _l = __read(React.useState("perspective(".concat(perspective, "px) translateZ(").concat(fullscreenSensible ? depth : 0, "px)")), 2), transform = _l[0], setTransform = _l[1];
-    var _m = __read(React.useState(""), 2), transition = _m[0], setTransition = _m[1];
+    var _m = __read(React.useState(fullscreenSensible), 2), isHovered = _m[0], setHovered = _m[1];
+    var _o = __read(React.useState("perspective(".concat(perspective, "px) translateZ(").concat(fullscreenSensible ? depth : 0, "px)")), 2), transform = _o[0], setTransform = _o[1];
+    var _p = __read(React.useState(""), 2), transition = _p[0], setTransition = _p[1];
     var clamp = function (value, min, max) {
         return Math.min(Math.max(value, min), max);
     };
@@ -151,11 +151,13 @@ function Hover3D(_a) {
         };
         var handleMouseMove = function (e) {
             if (element) {
-                var rect = element.getBoundingClientRect();
+                var rect = reference === "object"
+                    ? element.getBoundingClientRect()
+                    : document.body.getBoundingClientRect();
                 var dx = e.clientX - rect.left;
                 var dy = e.clientY - rect.top;
                 var xRot = clamp(map(dx, 0, rect.width, -xOffset, xOffset), -xOffset, xOffset);
-                var yRot = clamp(map(dy, 0, rect.height, yOffset, -yOffset), -4 * yOffset, 4 * yOffset);
+                var yRot = clamp(map(dy, 0, rect.height, yOffset, -yOffset), -range * yOffset, range * yOffset);
                 setTransform("perspective(".concat(perspective, "px) rotateX(").concat(yRot, "deg) rotateY(").concat(xRot, "deg) translateZ(").concat(depth, "px)"));
             }
         };