@dust-tt/sparkle 0.2.46-beta → 0.2.46-ed

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

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

package/dist/cjs/index.js

@@ -132,11 +132,14 @@ 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;
+    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 elementRef = React.useRef(null);
-    var _j = __read(React.useState(false), 2), isHovered = _j[0], setHovered = _j[1];
-    var _k = __read(React.useState("perspective(500px) translateZ(0px)"), 2), transform = _k[0], setTransform = _k[1];
-    var _l = __read(React.useState(""), 2), transition = _l[0], setTransition = _l[1];
+    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 clamp = function (value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    };
     var map = function (value, istart, istop, ostart, ostop) {
         return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
     };
@@ -151,24 +154,29 @@ function Hover3D(_a) {
                 var rect = element.getBoundingClientRect();
                 var dx = e.clientX - rect.left;
                 var dy = e.clientY - rect.top;
-                var xRot = map(dx, 0, rect.width, -xOffset, xOffset);
-                var yRot = map(dy, 0, rect.height, yOffset, -yOffset);
+                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);
                 setTransform("perspective(".concat(perspective, "px) rotateX(").concat(yRot, "deg) rotateY(").concat(xRot, "deg) translateZ(").concat(depth, "px)"));
             }
         };
-        var handleMouseLeave = function () {
-            setTransition("transform ".concat(release, "s"));
-            setTransform("perspective(".concat(perspective, "px) rotateX(0deg) rotateY(0deg)"));
-            setHovered(false);
-        };
-        element === null || element === void 0 ? void 0 : element.addEventListener("mouseenter", handleMouseEnter);
-        element === null || element === void 0 ? void 0 : element.addEventListener("mousemove", handleMouseMove);
-        element === null || element === void 0 ? void 0 : element.addEventListener("mouseleave", handleMouseLeave);
-        return function () {
-            element === null || element === void 0 ? void 0 : element.removeEventListener("mouseenter", handleMouseEnter);
-            element === null || element === void 0 ? void 0 : element.removeEventListener("mousemove", handleMouseMove);
-            element === null || element === void 0 ? void 0 : element.removeEventListener("mouseleave", handleMouseLeave);
-        };
+        if (fullscreenSensible) {
+            window.addEventListener("mousemove", handleMouseMove);
+        }
+        else {
+            var handleMouseLeave_1 = function () {
+                setTransition("transform ".concat(release, "s"));
+                setTransform("perspective(".concat(perspective, "px) rotateX(0deg) rotateY(0deg)"));
+                setHovered(false);
+            };
+            element === null || element === void 0 ? void 0 : element.addEventListener("mouseenter", handleMouseEnter);
+            element === null || element === void 0 ? void 0 : element.addEventListener("mousemove", handleMouseMove);
+            element === null || element === void 0 ? void 0 : element.addEventListener("mouseleave", handleMouseLeave_1);
+            return function () {
+                element === null || element === void 0 ? void 0 : element.removeEventListener("mouseenter", handleMouseEnter);
+                element === null || element === void 0 ? void 0 : element.removeEventListener("mousemove", handleMouseMove);
+                element === null || element === void 0 ? void 0 : element.removeEventListener("mouseleave", handleMouseLeave_1);
+            };
+        }
     }, [attack, release, perspective, xOffset, yOffset]);
     return (React.createElement(Hover3DContext.Provider, { value: { isHovered: isHovered, setHovered: setHovered } },
         React.createElement("div", { ref: elementRef, style: {