@dust-tt/sparkle 0.2.46-teta → 0.2.47-pr

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)"));
             }
         };
@@ -33287,13 +33289,13 @@ function Modal(_a) {
             onClose: onClose,
         };
     var _d = getModalClasses(type), containerClasses = _d.containerClasses, transitionEnterFrom = _d.transitionEnterFrom, transitionLeaveFrom = _d.transitionLeaveFrom, transitionEnterTo = _d.transitionEnterTo, transitionLeaveTo = _d.transitionLeaveTo, panelClasses = _d.panelClasses, innerContainerClasses = _d.innerContainerClasses;
-    return (React.createElement(tt.Root, { show: isOpen, as: React.Fragment },
+    return (React.createElement(tt.Root, { show: isOpen, as: React.Fragment, appear: true },
         React.createElement(_t, { as: "div", className: "s-relative s-z-50", onClose: onClose },
-            React.createElement(tt.Child, { as: React.Fragment, enter: "s-ease-out s-duration-150", enterFrom: "s-opacity-0", enterTo: "s-opacity-100", leave: "s-ease-in s-duration-150", leaveFrom: "s-opacity-100", leaveTo: "s-opacity-0" },
+            React.createElement(tt.Child, { as: React.Fragment, enter: "s-ease-out s-duration-150", enterFrom: "s-opacity-0", enterTo: "s-opacity-100", leave: "s-ease-in s-duration-150", leaveFrom: "s-opacity-100", leaveTo: "s-opacity-0", appear: true },
                 React.createElement("div", { className: "s-fixed s-inset-0 s-bg-white/80 s-backdrop-blur-sm s-transition-opacity" })),
             React.createElement("div", { className: "s-fixed s-inset-0 s-z-50 s-overflow-y-auto" },
                 React.createElement("div", { className: containerClasses },
-                    React.createElement(tt.Child, { as: React.Fragment, enter: "s-ease-out s-duration-300", enterFrom: transitionEnterFrom, enterTo: transitionEnterTo, leave: "s-ease-in s-duration-200", leaveFrom: transitionLeaveFrom, leaveTo: transitionLeaveTo },
+                    React.createElement(tt.Child, { as: React.Fragment, enter: "s-ease-out s-duration-300", enterFrom: transitionEnterFrom, enterTo: transitionEnterTo, leave: "s-ease-in s-duration-200", leaveFrom: transitionLeaveFrom, leaveTo: transitionLeaveTo, appear: true },
                         React.createElement(_t.Panel, { className: classNames("s-relative s-transform s-overflow-hidden s-bg-structure-0 s-px-3 s-transition-all sm:s-px-4", panelClasses, variantSize[variant]) },
                             React.createElement(BarHeader, { title: title || "", leftActions: action ? React.createElement(Button, __assign({}, action)) : undefined, rightActions: React.createElement(BarHeader.ButtonBar, __assign({}, buttonBarProps)) }),
                             React.createElement("div", { className: classNames("s-pb-6 s-pt-14", innerContainerClasses) }, children))))))));