lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
72 lines • 4.24 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Lens = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
function cn(...inputs) {
return inputs.filter(Boolean).join(" ");
}
const Lens = ({ children, zoomFactor = 1.5, lensSize = 170, isStatic = false, position = { x: 200, y: 150 }, hovering, setHovering, className, borderRadius = "lg", borderWidth = 0, borderColor = "border-gray-300", shadowIntensity = 'medium', animationDuration = 0.3, animationEasing = "easeOut", maskShape = 'circle', opacity = 1, blurEdge = false, smoothFollow = true, disabled = false, }) => {
const containerRef = (0, react_1.useRef)(null);
const [localIsHovering, setLocalIsHovering] = (0, react_1.useState)(false);
const [mousePosition, setMousePosition] = (0, react_1.useState)({ x: 100, y: 100 });
const isHovering = hovering !== undefined ? hovering : localIsHovering;
const setIsHovering = setHovering || setLocalIsHovering;
const handleMouseMove = (e) => {
if (disabled || isStatic)
return;
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (smoothFollow) {
setMousePosition({ x, y });
}
else {
// Snap to grid for less smooth following
const gridSize = 20;
setMousePosition({
x: Math.round(x / gridSize) * gridSize,
y: Math.round(y / gridSize) * gridSize,
});
}
};
const shadowClasses = {
none: '',
light: 'shadow-sm',
medium: 'shadow-md',
heavy: 'shadow-xl',
};
const getMaskImage = (x, y) => {
const radius = lensSize / 2;
// Using string concatenation for shape and gradient
const shape = maskShape === 'circle'
? "circle " + radius + "px at " + x + "px " + y + "px"
: "ellipse " + radius + "px " + radius + "px at " + x + "px " + y + "px";
const gradient = blurEdge
? "radial-gradient(" + shape + ", black 60%, transparent 100%)"
: "radial-gradient(" + shape + ", black 100%, transparent 100%)";
return gradient;
};
const currentX = isStatic ? position.x : mousePosition.x;
const currentY = isStatic ? position.y : mousePosition.y;
const lensContent = ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.58 }, animate: { opacity: opacity, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: animationDuration, ease: animationEasing }, className: cn("absolute inset-0 overflow-hidden", borderWidth > 0 && "border-" + borderWidth + " " + borderColor, // String concatenation
shadowClasses[shadowIntensity]), style: {
maskImage: getMaskImage(currentX, currentY),
WebkitMaskImage: getMaskImage(currentX, currentY),
transformOrigin: currentX + "px " + currentY + "px", // String concatenation
zIndex: 50,
}, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", style: {
transform: "scale(" + zoomFactor + ")", // String concatenation
transformOrigin: currentX + "px " + currentY + "px", // String concatenation
}, children: children }) }));
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: cn("relative overflow-hidden z-20 h-full w-full", "rounded-" + borderRadius, // String concatenation
disabled && "cursor-not-allowed opacity-50", className), onMouseEnter: function () {
return !disabled && setIsHovering(true);
}, onMouseLeave: function () {
return !disabled && setIsHovering(false);
}, onMouseMove: handleMouseMove, children: [children, isStatic ? ((0, jsx_runtime_1.jsx)("div", { children: lensContent })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isHovering && !disabled && ((0, jsx_runtime_1.jsx)("div", { children: lensContent })) }))] }));
};
exports.Lens = Lens;
//# sourceMappingURL=lens.js.map