@blueshift-gg/ui-components 0.1.50 → 0.1.51

package/dist/CrossHair.cjs

@@ -0,0 +1,175 @@
+"use client";
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let motion_react = require("motion/react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/CrossHair.tsx
+const CrosshairCorners = ({ size = 10, spacingX = 0, animationDelay = 2.5, spacingY = 0, className = "", moveDistance = 5, thickness, animationDuration = 2.15, variant = "corners", corners = [
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
+], borders = ["left", "right"] }) => {
+	const actualThickness = thickness ?? size / 4;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
+		className: (0, classnames.default)("absolute w-full h-full inset-0 will-change-opacity pointer-events-none", className),
+		initial: {
+			opacity: 0,
+			scale: .99
+		},
+		animate: {
+			opacity: [
+				0,
+				1,
+				.2,
+				1,
+				.4,
+				1,
+				.6,
+				1,
+				.8,
+				1
+			],
+			scale: [
+				.99,
+				1,
+				.99,
+				1,
+				1,
+				1
+			]
+		},
+		transition: {
+			duration: animationDuration,
+			ease: motion_react.anticipate,
+			delay: animationDelay
+		},
+		style: {
+			"--size": size + "px",
+			"--spacing-x": spacingX + "px",
+			"--spacing-y": spacingY + "px",
+			"--move": moveDistance + "px",
+			"--thickness": actualThickness + "px",
+			"--half-size": size / 2 + "px"
+		},
+		children: variant === "cross" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute", "before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]", "after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]", "transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]", !corners.includes("top-left") && "hidden"),
+				style: {
+					left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,
+					top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,
+					width: `var(--size)`,
+					height: `var(--size)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute", "before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]", "after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]", "transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]", !corners.includes("top-right") && "hidden"),
+				style: {
+					right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,
+					top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,
+					width: `var(--size)`,
+					height: `var(--size)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute", "before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]", "after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]", "transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]", !corners.includes("bottom-left") && "hidden"),
+				style: {
+					left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,
+					bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,
+					width: `var(--size)`,
+					height: `var(--size)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute", "before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]", "after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]", "transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]", !corners.includes("bottom-right") && "hidden"),
+				style: {
+					right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,
+					bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,
+					width: `var(--size)`,
+					height: `var(--size)`
+				}
+			})
+		] }) : variant === "bordered" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]", (!corners.includes("top-left") || !borders.includes("left")) && "hidden"),
+				style: {
+					left: `calc(var(--spacing-x) * -1)`,
+					top: `calc(var(--spacing-y) * -1)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]", (!corners.includes("top-right") || !borders.includes("right")) && "hidden"),
+				style: {
+					right: `calc(var(--spacing-x) * -1)`,
+					top: `calc(var(--spacing-y) * -1)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]", (!corners.includes("bottom-left") || !borders.includes("left")) && "hidden"),
+				style: {
+					left: `calc(var(--spacing-x) * -1)`,
+					bottom: `calc(var(--spacing-y) * -1)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]", (!corners.includes("bottom-right") || !borders.includes("right")) && "hidden"),
+				style: {
+					right: `calc(var(--spacing-x) * -1)`,
+					bottom: `calc(var(--spacing-y) * -1)`
+				}
+			}),
+			borders.includes("left") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute left-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)]",
+				style: {
+					left: `calc(var(--spacing-x) * -1)`,
+					top: `calc(var(--spacing-y) * -1)`,
+					height: `calc(100% + (var(--spacing-y) * 2))`
+				}
+			}),
+			borders.includes("right") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute right-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)]",
+				style: {
+					right: `calc(var(--spacing-x) * -1)`,
+					top: `calc(var(--spacing-y) * -1)`,
+					height: `calc(100% + (var(--spacing-y) * 2))`
+				}
+			})
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]", !corners.includes("top-left") && "hidden"),
+				style: {
+					left: `calc(var(--spacing-x) * -1)`,
+					top: `calc(var(--spacing-y) * -1)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]", !corners.includes("top-right") && "hidden"),
+				style: {
+					right: `calc(var(--spacing-x) * -1)`,
+					top: `calc(var(--spacing-y) * -1)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]", !corners.includes("bottom-left") && "hidden"),
+				style: {
+					left: `calc(var(--spacing-x) * -1)`,
+					bottom: `calc(var(--spacing-y) * -1)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)("absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]", !corners.includes("bottom-right") && "hidden"),
+				style: {
+					right: `calc(var(--spacing-x) * -1)`,
+					bottom: `calc(var(--spacing-y) * -1)`
+				}
+			})
+		] })
+	});
+};
+
+//#endregion
+exports.CrosshairCorners = CrosshairCorners;
+//# sourceMappingURL=CrossHair.cjs.map

package/dist/CrossHair.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossHair.cjs","names":["motion","anticipate"],"sources":["../src/CrossHair.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { anticipate, motion } from \"motion/react\";\n\nexport type CrosshairCornersProps = {\n  size?: number;\n  spacingX?: number;\n  spacingY?: number;\n  animationDelay?: number;\n  thickness?: number;\n  animationDuration?: number;\n  variant?: \"corners\" | \"cross\" | \"bordered\";\n  corners?: (\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\")[];\n  borders?: (\"left\" | \"right\")[];\n  className?: string;\n  moveDistance?: number;\n};\n\nexport const CrosshairCorners = ({\n  size = 10,\n  spacingX = 0,\n  animationDelay = 2.5,\n  spacingY = 0,\n  className = \"\",\n  moveDistance = 5,\n  thickness,\n  animationDuration = 2.15,\n  variant = \"corners\",\n  corners = [\"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\"],\n  borders = [\"left\", \"right\"],\n}: CrosshairCornersProps) => {\n  // Default thickness to 1/4th of the size if not provided\n  const actualThickness = thickness ?? size / 4;\n\n  return (\n    <motion.div\n      className={classNames(\n        \"absolute w-full h-full inset-0 will-change-opacity pointer-events-none\",\n        className,\n      )}\n      initial={{ opacity: 0, scale: 0.99 }}\n      animate={{\n        opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1],\n        scale: [0.99, 1, 0.99, 1, 1, 1],\n      }}\n      transition={{\n        duration: animationDuration,\n        ease: anticipate,\n        delay: animationDelay,\n      }}\n      style={\n        {\n          \"--size\": size + \"px\",\n          \"--spacing-x\": spacingX + \"px\",\n          \"--spacing-y\": spacingY + \"px\",\n          \"--move\": moveDistance + \"px\",\n          \"--thickness\": actualThickness + \"px\",\n          \"--half-size\": size / 2 + \"px\",\n        } as any\n      }\n    >\n      {variant === \"cross\" ? (\n        /* Cross/Plus Pattern in Corners */\n        <>\n          {/* Top Left Cross */}\n          <div\n            className={classNames(\n              \"absolute\",\n              \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n              \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n              \"transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n              !corners.includes(\"top-left\") && \"hidden\",\n            )}\n            style={{\n              left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,\n              top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n              width: `var(--size)`,\n              height: `var(--size)`,\n            }}\n          ></div>\n\n          {/* Top Right Cross */}\n          <div\n            className={classNames(\n              \"absolute\",\n              \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n              \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n              \"transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n              !corners.includes(\"top-right\") && \"hidden\",\n            )}\n            style={{\n              right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,\n              top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n              width: `var(--size)`,\n              height: `var(--size)`,\n            }}\n          ></div>\n\n          {/* Bottom Left Cross */}\n          <div\n            className={classNames(\n              \"absolute\",\n              \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n              \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n              \"transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n              !corners.includes(\"bottom-left\") && \"hidden\",\n            )}\n            style={{\n              left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,\n              bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n              width: `var(--size)`,\n              height: `var(--size)`,\n            }}\n          ></div>\n\n          {/* Bottom Right Cross */}\n          <div\n            className={classNames(\n              \"absolute\",\n              \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n              \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n              \"transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n              !corners.includes(\"bottom-right\") && \"hidden\",\n            )}\n            style={{\n              right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,\n              bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n              width: `var(--size)`,\n              height: `var(--size)`,\n            }}\n          ></div>\n        </>\n      ) : variant === \"bordered\" ? (\n        /* Corner Pattern with Left and Right Borders */\n        <>\n          {/* Top Left */}\n          <div\n            className={classNames(\n              \"absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n              (!corners.includes(\"top-left\") || !borders.includes(\"left\")) &&\n                \"hidden\",\n            )}\n            style={{\n              left: `calc(var(--spacing-x) * -1)`,\n              top: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n\n          {/* Top Right */}\n          <div\n            className={classNames(\n              \"absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n              (!corners.includes(\"top-right\") || !borders.includes(\"right\")) &&\n                \"hidden\",\n            )}\n            style={{\n              right: `calc(var(--spacing-x) * -1)`,\n              top: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n\n          {/* Bottom Left */}\n          <div\n            className={classNames(\n              \"absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n              (!corners.includes(\"bottom-left\") || !borders.includes(\"left\")) &&\n                \"hidden\",\n            )}\n            style={{\n              left: `calc(var(--spacing-x) * -1)`,\n              bottom: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n\n          {/* Bottom Right */}\n          <div\n            className={classNames(\n              \"absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n              (!corners.includes(\"bottom-right\") ||\n                !borders.includes(\"right\")) &&\n                \"hidden\",\n            )}\n            style={{\n              right: `calc(var(--spacing-x) * -1)`,\n              bottom: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n\n          {/* Left Border */}\n          {borders.includes(\"left\") && (\n            <div\n              className=\"absolute left-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)]\"\n              style={{\n                left: `calc(var(--spacing-x) * -1)`,\n                top: `calc(var(--spacing-y) * -1)`,\n                height: `calc(100% + (var(--spacing-y) * 2))`,\n              }}\n            ></div>\n          )}\n\n          {/* Right Border */}\n          {borders.includes(\"right\") && (\n            <div\n              className=\"absolute right-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)]\"\n              style={{\n                right: `calc(var(--spacing-x) * -1)`,\n                top: `calc(var(--spacing-y) * -1)`,\n                height: `calc(100% + (var(--spacing-y) * 2))`,\n              }}\n            ></div>\n          )}\n        </>\n      ) : (\n        /* Corner Pattern (existing) */\n        <>\n          {/* Top Left */}\n          <div\n            className={classNames(\n              \"absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n              !corners.includes(\"top-left\") && \"hidden\",\n            )}\n            style={{\n              left: `calc(var(--spacing-x) * -1)`,\n              top: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n\n          {/* Top Right */}\n          <div\n            className={classNames(\n              \"absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n              !corners.includes(\"top-right\") && \"hidden\",\n            )}\n            style={{\n              right: `calc(var(--spacing-x) * -1)`,\n              top: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n\n          {/* Bottom Left */}\n          <div\n            className={classNames(\n              \"absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n              !corners.includes(\"bottom-left\") && \"hidden\",\n            )}\n            style={{\n              left: `calc(var(--spacing-x) * -1)`,\n              bottom: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n\n          {/* Bottom Right */}\n          <div\n            className={classNames(\n              \"absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n              !corners.includes(\"bottom-right\") && \"hidden\",\n            )}\n            style={{\n              right: `calc(var(--spacing-x) * -1)`,\n              bottom: `calc(var(--spacing-y) * -1)`,\n            }}\n          ></div>\n        </>\n      )}\n    </motion.div>\n  );\n};\n"],"mappings":";;;;;;;;;AAmBA,MAAa,oBAAoB,EAC/B,OAAO,IACP,WAAW,GACX,iBAAiB,KACjB,WAAW,GACX,YAAY,IACZ,eAAe,GACf,WACA,oBAAoB,MACpB,UAAU,WACV,UAAU;CAAC;CAAY;CAAa;CAAe;CAAe,EAClE,UAAU,CAAC,QAAQ,QAAQ,OACA;CAE3B,MAAM,kBAAkB,aAAa,OAAO;AAE5C,QACE,2CAACA,oBAAO;EACN,mCACE,0EACA,UACD;EACD,SAAS;GAAE,SAAS;GAAG,OAAO;GAAM;EACpC,SAAS;GACP,SAAS;IAAC;IAAG;IAAG;IAAK;IAAG;IAAK;IAAG;IAAK;IAAG;IAAK;IAAE;GAC/C,OAAO;IAAC;IAAM;IAAG;IAAM;IAAG;IAAG;IAAE;GAChC;EACD,YAAY;GACV,UAAU;GACV,MAAMC;GACN,OAAO;GACR;EACD,OACE;GACE,UAAU,OAAO;GACjB,eAAe,WAAW;GAC1B,eAAe,WAAW;GAC1B,UAAU,eAAe;GACzB,eAAe,kBAAkB;GACjC,eAAe,OAAO,IAAI;GAC3B;YAGF,YAAY,UAEX;GAEE,2CAAC;IACC,mCACE,YACA,+LACA,sLACA,qJACA,CAAC,QAAQ,SAAS,WAAW,IAAI,SAClC;IACD,OAAO;KACL,MAAM;KACN,KAAK;KACL,OAAO;KACP,QAAQ;KACT;KACI;GAGP,2CAAC;IACC,mCACE,YACA,+LACA,sLACA,4IACA,CAAC,QAAQ,SAAS,YAAY,IAAI,SACnC;IACD,OAAO;KACL,OAAO;KACP,KAAK;KACL,OAAO;KACP,QAAQ;KACT;KACI;GAGP,2CAAC;IACC,mCACE,YACA,+LACA,sLACA,4IACA,CAAC,QAAQ,SAAS,cAAc,IAAI,SACrC;IACD,OAAO;KACL,MAAM;KACN,QAAQ;KACR,OAAO;KACP,QAAQ;KACT;KACI;GAGP,2CAAC;IACC,mCACE,YACA,+LACA,sLACA,mIACA,CAAC,QAAQ,SAAS,eAAe,IAAI,SACtC;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,OAAO;KACP,QAAQ;KACT;KACI;MACN,GACD,YAAY,aAEd;GAEE,2CAAC;IACC,mCACE,yXACC,CAAC,QAAQ,SAAS,WAAW,IAAI,CAAC,QAAQ,SAAS,OAAO,KACzD,SACH;IACD,OAAO;KACL,MAAM;KACN,KAAK;KACN;KACI;GAGP,2CAAC;IACC,mCACE,8YACC,CAAC,QAAQ,SAAS,YAAY,IAAI,CAAC,QAAQ,SAAS,QAAQ,KAC3D,SACH;IACD,OAAO;KACL,OAAO;KACP,KAAK;KACN;KACI;GAGP,2CAAC;IACC,mCACE,kZACC,CAAC,QAAQ,SAAS,cAAc,IAAI,CAAC,QAAQ,SAAS,OAAO,KAC5D,SACH;IACD,OAAO;KACL,MAAM;KACN,QAAQ;KACT;KACI;GAGP,2CAAC;IACC,mCACE,uaACC,CAAC,QAAQ,SAAS,eAAe,IAChC,CAAC,QAAQ,SAAS,QAAQ,KAC1B,SACH;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACT;KACI;GAGN,QAAQ,SAAS,OAAO,IACvB,2CAAC;IACC,WAAU;IACV,OAAO;KACL,MAAM;KACN,KAAK;KACL,QAAQ;KACT;KACI;GAIR,QAAQ,SAAS,QAAQ,IACxB,2CAAC;IACC,WAAU;IACV,OAAO;KACL,OAAO;KACP,KAAK;KACL,QAAQ;KACT;KACI;MAER,GAGH;GAEE,2CAAC;IACC,mCACE,wXACA,CAAC,QAAQ,SAAS,WAAW,IAAI,SAClC;IACD,OAAO;KACL,MAAM;KACN,KAAK;KACN;KACI;GAGP,2CAAC;IACC,mCACE,6YACA,CAAC,QAAQ,SAAS,YAAY,IAAI,SACnC;IACD,OAAO;KACL,OAAO;KACP,KAAK;KACN;KACI;GAGP,2CAAC;IACC,mCACE,iZACA,CAAC,QAAQ,SAAS,cAAc,IAAI,SACrC;IACD,OAAO;KACL,MAAM;KACN,QAAQ;KACT;KACI;GAGP,2CAAC;IACC,mCACE,saACA,CAAC,QAAQ,SAAS,eAAe,IAAI,SACtC;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACT;KACI;MACN;GAEM"}

package/dist/CrossHair.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime37 from "react/jsx-runtime";
+
+//#region src/CrossHair.d.ts
+type CrosshairCornersProps = {
+  size?: number;
+  spacingX?: number;
+  spacingY?: number;
+  animationDelay?: number;
+  thickness?: number;
+  animationDuration?: number;
+  variant?: "corners" | "cross" | "bordered";
+  corners?: ("top-left" | "top-right" | "bottom-left" | "bottom-right")[];
+  borders?: ("left" | "right")[];
+  className?: string;
+  moveDistance?: number;
+};
+declare const CrosshairCorners: ({
+  size,
+  spacingX,
+  animationDelay,
+  spacingY,
+  className,
+  moveDistance,
+  thickness,
+  animationDuration,
+  variant,
+  corners,
+  borders
+}: CrosshairCornersProps) => react_jsx_runtime37.JSX.Element;
+//#endregion
+export { CrosshairCorners, CrosshairCornersProps };
+//# sourceMappingURL=CrossHair.d.cts.map

package/dist/CrossHair.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossHair.d.cts","names":[],"sources":["../src/CrossHair.tsx"],"sourcesContent":[],"mappings":";;;KAKY,qBAAA;;;EAAA,QAAA,CAAA,EAAA,MAAA;EAcC,cAAA,CAAA,EAAA,MAwPZ;EAxPgC,SAAA,CAAA,EAAA,MAAA;EAAA,iBAAA,CAAA,EAAA,MAAA;EAAA,OAAA,CAAA,EAAA,SAAA,GAAA,OAAA,GAAA,UAAA;EAAA,OAAA,CAAA,EAAA,CAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,CAAA,EAAA;EAAA,OAAA,CAAA,EAAA,CAAA,MAAA,GAAA,OAAA,CAAA,EAAA;EAAA,SAAA,CAAA,EAAA,MAAA;EAAA,YAAA,CAAA,EAAA,MAAA;CAAA;AAAA,cAApB,gBAAoB,EAAA,CAAA;EAAA,IAAA;EAAA,QAAA;EAAA,cAAA;EAAA,QAAA;EAAA,SAAA;EAAA,YAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAY9B,qBAZ8B,EAAA,GAYT,mBAAA,CAAA,GAAA,CAAA,OAZS"}

package/dist/CrossHair.d.mts

@@ -1,18 +1,32 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
+//#region src/CrossHair.d.ts
 type CrosshairCornersProps = {
-    size?: number;
-    spacingX?: number;
-    spacingY?: number;
-    animationDelay?: number;
-    thickness?: number;
-    animationDuration?: number;
-    variant?: "corners" | "cross" | "bordered";
-    corners?: ("top-left" | "top-right" | "bottom-left" | "bottom-right")[];
-    borders?: ("left" | "right")[];
-    className?: string;
-    moveDistance?: number;
+  size?: number;
+  spacingX?: number;
+  spacingY?: number;
+  animationDelay?: number;
+  thickness?: number;
+  animationDuration?: number;
+  variant?: "corners" | "cross" | "bordered";
+  corners?: ("top-left" | "top-right" | "bottom-left" | "bottom-right")[];
+  borders?: ("left" | "right")[];
+  className?: string;
+  moveDistance?: number;
 };
-declare const CrosshairCorners: ({ size, spacingX, animationDelay, spacingY, className, moveDistance, thickness, animationDuration, variant, corners, borders, }: CrosshairCornersProps) => react_jsx_runtime.JSX.Element;
-
-export { CrosshairCorners, type CrosshairCornersProps };
+declare const CrosshairCorners: ({
+  size,
+  spacingX,
+  animationDelay,
+  spacingY,
+  className,
+  moveDistance,
+  thickness,
+  animationDuration,
+  variant,
+  corners,
+  borders
+}: CrosshairCornersProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { CrosshairCorners, CrosshairCornersProps };
+//# sourceMappingURL=CrossHair.d.mts.map

package/dist/CrossHair.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossHair.d.mts","names":[],"sources":["../src/CrossHair.tsx"],"sourcesContent":[],"mappings":";;;KAKY,qBAAA;;;EAAA,QAAA,CAAA,EAAA,MAAA;EAcC,cAAA,CAAA,EAAA,MAwPZ;EAxPgC,SAAA,CAAA,EAAA,MAAA;EAAA,iBAAA,CAAA,EAAA,MAAA;EAAA,OAAA,CAAA,EAAA,SAAA,GAAA,OAAA,GAAA,UAAA;EAAA,OAAA,CAAA,EAAA,CAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,CAAA,EAAA;EAAA,OAAA,CAAA,EAAA,CAAA,MAAA,GAAA,OAAA,CAAA,EAAA;EAAA,SAAA,CAAA,EAAA,MAAA;EAAA,YAAA,CAAA,EAAA,MAAA;CAAA;AAAA,cAApB,gBAAoB,EAAA,CAAA;EAAA,IAAA;EAAA,QAAA;EAAA,cAAA;EAAA,QAAA;EAAA,SAAA;EAAA,YAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAY9B,qBAZ8B,EAAA,GAYT,kBAAA,CAAA,GAAA,CAAA,OAZS"}