@blueshift-gg/ui-components 0.1.0

package/dist/Codeblock.mjs

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion, AnimatePresence } from 'motion/react';
+import classNames from 'classnames';
+import { CrosshairCorners } from './CrossHair';
+import { Icon } from './Icon';
+import { useCopyToClipboard } from 'usehooks-ts';
+import { useState } from 'react';
+import { silk } from './utils/easings';
+
+const Codeblock = ({ code, language, animation }) => {
+  const [_, copyToClipboard] = useCopyToClipboard();
+  const [isCopied, setIsCopied] = useState(false);
+  const handleCopy = () => {
+    copyToClipboard(code);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: classNames(
+        "relative bg-card-foreground w-full flex flex-col gap-y-6 gradient-border before:bg-card-border pt-3 pb-6",
+        language === "Rust" && "text-brand-rust",
+        language === "Typescript" && "text-brand-typescript",
+        language === "Assembly" && "text-brand-assembly"
+      ),
+      ...animation,
+      children: [
+        /* @__PURE__ */ jsxs(motion.div, { className: "px-3.5 py-2 bg-current/5 border border-current/15 flex items-center justify-between relative", children: [
+          /* @__PURE__ */ jsx(
+            CrosshairCorners,
+            {
+              animationDelay: 0,
+              animationDuration: 0.5,
+              variant: "bordered",
+              size: 6,
+              spacingX: 1
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: language,
+                className: "flex-shrink-0 text-current",
+                size: 16
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: language })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: () => handleCopy(),
+              className: "w-[16px] h-[16px] text-shade-secondary hover:text-shade-primary relative z-10",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0, filter: "blur(4px)", scale: 0.4 },
+                  animate: { opacity: 1, filter: "blur(0px)", scale: 1 },
+                  exit: { opacity: 0, filter: "blur(4px)", scale: 0.4 },
+                  transition: { duration: 0.2, ease: silk },
+                  children: isCopied ? /* @__PURE__ */ jsx(Icon, { name: "Success", size: 16 }) : /* @__PURE__ */ jsx(Icon, { name: "Copy", size: 16 })
+                },
+                isCopied ? "copied" : "copy"
+              ) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent" }),
+        /* @__PURE__ */ jsx("pre", { className: "px-6 font-mono-code", children: code })
+      ]
+    }
+  );
+};
+
+export { Codeblock };
+//# sourceMappingURL=Codeblock.mjs.map
+//# sourceMappingURL=Codeblock.mjs.map

package/dist/Codeblock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Codeblock.tsx"],"names":[],"mappings":"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","file":"Codeblock.mjs","sourcesContent":["import { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Icon } from \"./Icon\";\nimport { useCopyToClipboard } from \"usehooks-ts\";\nimport { useState } from \"react\";\nimport { silk } from \"./utils/easings\";\nimport { GridLines } from \"./GridLines\";\n\nexport type CodeblockProps = {\n  code: string;\n  language: \"Rust\" | \"Typescript\" | \"Assembly\";\n  animation?: MotionProps;\n};\n\nexport const Codeblock = ({ code, language, animation }: CodeblockProps) => {\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n  const handleCopy = () => {\n    copyToClipboard(code);\n    setIsCopied(true);\n    setTimeout(() => {\n      setIsCopied(false);\n    }, 2000);\n  };\n  return (\n    <motion.div\n      className={classNames(\n        \"relative bg-card-foreground w-full flex flex-col gap-y-6 gradient-border before:bg-card-border pt-3 pb-6\",\n        language === \"Rust\" && \"text-brand-rust\",\n        language === \"Typescript\" && \"text-brand-typescript\",\n        language === \"Assembly\" && \"text-brand-assembly\"\n      )}\n      {...animation}\n    >\n      <motion.div className=\"px-3.5 py-2 bg-current/5 border border-current/15 flex items-center justify-between relative\">\n        <CrosshairCorners\n          animationDelay={0}\n          animationDuration={0.5}\n          variant=\"bordered\"\n          size={6}\n          spacingX={1}\n        />\n        <div className=\"flex items-center gap-x-2\">\n          <Icon\n            name={language}\n            className=\"flex-shrink-0 text-current\"\n            size={16}\n          />\n          <span className=\"font-mono text-sm\">{language}</span>\n        </div>\n\n        <div\n          onClick={() => handleCopy()}\n          className=\"w-[16px] h-[16px] text-shade-secondary hover:text-shade-primary relative z-10\"\n        >\n          <AnimatePresence mode=\"popLayout\">\n            <motion.div\n              initial={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n              animate={{ opacity: 1, filter: \"blur(0px)\", scale: 1 }}\n              exit={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n              transition={{ duration: 0.2, ease: silk }}\n              key={isCopied ? \"copied\" : \"copy\"}\n            >\n              {isCopied ? (\n                <Icon name=\"Success\" size={16} />\n              ) : (\n                <Icon name=\"Copy\" size={16} />\n              )}\n            </motion.div>\n          </AnimatePresence>\n        </div>\n      </motion.div>\n      <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n      <pre className=\"px-6 font-mono-code\">{code}</pre>\n    </motion.div>\n  );\n};\n"]}

package/dist/CrossHair.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+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;
+    key?: string;
+};
+declare const CrosshairCorners: ({ size, spacingX, animationDelay, spacingY, className, moveDistance, thickness, animationDuration, key, variant, corners, borders, }: CrosshairCornersProps) => react_jsx_runtime.JSX.Element;
+
+export { CrosshairCorners, type CrosshairCornersProps };

package/dist/CrossHair.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+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;
+    key?: string;
+};
+declare const CrosshairCorners: ({ size, spacingX, animationDelay, spacingY, className, moveDistance, thickness, animationDuration, key, variant, corners, borders, }: CrosshairCornersProps) => react_jsx_runtime.JSX.Element;
+
+export { CrosshairCorners, type CrosshairCornersProps };

package/dist/CrossHair.js

@@ -0,0 +1,269 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var react = require('motion/react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const CrosshairCorners = ({
+  size = 10,
+  spacingX = 0,
+  animationDelay = 2.5,
+  spacingY = 0,
+  className = "",
+  moveDistance = 5,
+  thickness,
+  animationDuration = 2.15,
+  key,
+  variant = "corners",
+  corners = ["top-left", "top-right", "bottom-left", "bottom-right"],
+  borders = ["left", "right"]
+}) => {
+  const actualThickness = thickness ?? size / 4;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.motion.div,
+    {
+      className: classNames__default.default(
+        "absolute w-full h-full inset-0 will-change-opacity",
+        className
+      ),
+      initial: { opacity: 0, scale: 0.99 },
+      animate: {
+        opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1],
+        scale: [0.99, 1, 0.99, 1, 1, 1]
+      },
+      transition: {
+        duration: animationDuration,
+        ease: 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" ? (
+        /* Cross/Plus Pattern in Corners */
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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" ? (
+        /* Corner Pattern with Left and Right Borders */
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.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__ */ jsxRuntime.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))`
+              }
+            }
+          )
+        ] })
+      ) : (
+        /* Corner Pattern (existing) */
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames__default.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)`
+              }
+            }
+          )
+        ] })
+      )
+    },
+    key || null
+  );
+};
+
+exports.CrosshairCorners = CrosshairCorners;
+//# sourceMappingURL=CrossHair.js.map
+//# sourceMappingURL=CrossHair.js.map

package/dist/CrossHair.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CrossHair.tsx"],"names":["jsx","motion","classNames","anticipate","jsxs","Fragment"],"mappings":"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","file":"CrossHair.js","sourcesContent":["import 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  key?: string;\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  key,\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      key={key || null}\n      className={classNames(\n        \"absolute w-full h-full inset-0 will-change-opacity\",\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"]}