@blueshift-gg/ui-components 0.1.74 → 0.1.76

package/dist/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { crisp } from \"./utils/easings\";\n\nexport type CheckboxProps = {\n  checked: boolean;\n  className?: string;\n  disabled?: boolean;\n  handleChange?: (checked: boolean) => void;\n  theme?: \"primary\" | \"secondary\";\n};\n\nexport const Checkbox = ({\n  checked,\n  className,\n  disabled,\n  handleChange,\n  theme = \"primary\",\n}: CheckboxProps) => {\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (handleChange) {\n      handleChange(event.target.checked);\n    }\n  };\n\n  return (\n    <div className=\"flex h-[14px] w-[14px] flex-shrink-0 items-center\">\n      <div className=\"group grid size-[14px] grid-cols-1\">\n        <input\n          type=\"checkbox\"\n          checked={checked}\n          disabled={disabled}\n          onChange={handleInputChange}\n          className={classNames(\n            className,\n            \"border-shade-mute col-start-1 row-start-1 appearance-none border-[1.5px] bg-transparent transition duration-100 ease-in-out checked:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-[1.5px] disabled:bg-card-solid disabled:opacity-40 forced-colors:appearance-auto\",\n            {\n              \"checked:border-brand-secondary indeterminate:border-brand-secondary focus-visible:outline-brand-secondary\":\n                theme === \"primary\",\n              \"checked:border-secondary indeterminate:border-secondary focus-visible:outline-secondary\":\n                theme === \"secondary\",\n            }\n          )}\n        />\n        {checked && (\n          <AnimatePresence mode=\"popLayout\">\n            <motion.div\n              initial={{ opacity: 0, scale: 0 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ duration: 0.1, ease: crisp }}\n              exit={{ opacity: 0, scale: 0 }}\n              className={classNames(\n                \"pointer-events-none col-start-1 row-start-1 size-1 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100\",\n                {\n                  \"bg-brand-primary\": theme === \"primary\",\n                  \"bg-shade-secondary\": theme === \"secondary\",\n                }\n              )}\n            ></motion.div>\n          </AnimatePresence>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAcA,MAAa,YAAY,EACvB,SACA,WACA,UACA,cACA,QAAQ,gBACW;CACnB,MAAM,qBAAqB,UAA+C;AACxE,MAAI,aACF,cAAa,MAAM,OAAO,QAAQ;;AAItC,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;cACb,oBAAC;IACC,MAAK;IACI;IACC;IACV,UAAU;IACV,WAAW,WACT,WACA,8SACA;KACE,6GACE,UAAU;KACZ,2FACE,UAAU;KACb,CACF;KACD,EACD,WACC,oBAAC;IAAgB,MAAK;cACpB,oBAAC,OAAO;KACN,SAAS;MAAE,SAAS;MAAG,OAAO;MAAG;KACjC,SAAS;MAAE,SAAS;MAAG,OAAO;MAAG;KACjC,YAAY;MAAE,UAAU;MAAK,MAAM;MAAO;KAC1C,MAAM;MAAE,SAAS;MAAG,OAAO;MAAG;KAC9B,WAAW,WACT,iIACA;MACE,oBAAoB,UAAU;MAC9B,sBAAsB,UAAU;MACjC,CACF;MACW;KACE;IAEhB;GACF"}

package/dist/Codeblock.d.ts

@@ -0,0 +1,28 @@
+import { IconProps } from "./Icon.js";
+import { MotionProps } from "motion/react";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
+
+//#region src/Codeblock.d.ts
+type CodeblockProps = {
+  children: React.ReactNode;
+  clipboardText: string;
+  showCopyButton?: boolean;
+  icon?: IconProps;
+  language: "rust" | "typescript" | "assembly" | "other" | string;
+  animation?: MotionProps;
+  className?: string;
+  maxLines?: number;
+};
+declare const Codeblock: ({
+  children,
+  clipboardText,
+  language,
+  animation,
+  className,
+  icon,
+  showCopyButton,
+  maxLines
+}: CodeblockProps) => react_jsx_runtime7.JSX.Element;
+//#endregion
+export { Codeblock, CodeblockProps };
+//# sourceMappingURL=Codeblock.d.ts.map

package/dist/Codeblock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Codeblock.d.ts","names":[],"sources":["../src/Codeblock.tsx"],"sourcesContent":[],"mappings":";;;;;KAUY,cAAA;YACA,KAAA,CAAM;;EADN,cAAA,CAAA,EAAc,OAAA;EACd,IAAM,CAAA,EAGT,SAHS;EAGT,QAAA,EAAA,MAAA,GAAA,YAAA,GAAA,UAAA,GAAA,OAAA,GAAA,MAAA;EAEK,SAAA,CAAA,EAAA,WAAA;EAAW,SAAA,CAAA,EAAA,MAAA;EAKZ,QAAA,CAAA,EAAA,MAqKZ;CArKyB;AAAA,cAAb,SAAa,EAAA,CAAA;EAAA,QAAA;EAAA,aAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,cAAA;EAAA;AAAA,CAAA,EASvB,cATuB,EAAA,GAST,kBAAA,CAAA,GAAA,CAAA,OATS"}

package/dist/Codeblock.js

@@ -0,0 +1,164 @@
+"use client";
+
+import { Icon } from "./Icon.js";
+import { CrosshairCorners } from "./CrossHair.js";
+import { silk } from "./utils/easings.js";
+import { AnimatePresence, motion } from "motion/react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useCopyToClipboard } from "usehooks-ts";
+
+//#region src/Codeblock.tsx
+const Codeblock = ({ children, clipboardText, language, animation, className, icon, showCopyButton = true, maxLines = 15 }) => {
+	const [_, copyToClipboard] = useCopyToClipboard();
+	const [isCopied, setIsCopied] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [lineCount, setLineCount] = useState(() => clipboardText.split("\n").length);
+	const [hasCalculated, setHasCalculated] = useState(false);
+	const codeblockRef = useRef(null);
+	useEffect(() => {
+		if (codeblockRef.current) {
+			const codeElement = codeblockRef.current.querySelector("pre code");
+			const preElement = codeblockRef.current.querySelector("pre");
+			const containerElement = codeElement || preElement;
+			if (containerElement) {
+				const lineSpans = Array.from(containerElement.children).filter((child) => child.tagName === "SPAN");
+				if (lineSpans.length > 0) {
+					setLineCount(lineSpans.length);
+					setHasCalculated(true);
+				} else {
+					setLineCount((containerElement.textContent || "").split("\n").length || 1);
+					setHasCalculated(true);
+				}
+			} else {
+				setLineCount(clipboardText.split("\n").length);
+				setHasCalculated(true);
+			}
+		}
+	}, [children, clipboardText]);
+	const isOverflowing = lineCount > maxLines;
+	const handleCopy = () => {
+		copyToClipboard(clipboardText);
+		setIsCopied(true);
+		setTimeout(() => {
+			setIsCopied(false);
+		}, 2e3);
+	};
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: classNames("relative bg-card-foreground w-full flex flex-col gap-y-4 gradient-border before:bg-card-border pt-3 pb-4", language === "rust" && "text-brand-rust", language === "typescript" && "text-brand-typescript", language === "assembly" && "text-brand-assembly", language === "other" && "text-shade-tertiary", language && language !== "rust" && language !== "typescript" && language !== "assembly" && language !== "other" && "text-brand-primary", className, isOverflowing && isExpanded && "pb-12!"),
+		...animation,
+		children: [
+			/* @__PURE__ */ jsxs(motion.div, {
+				className: classNames("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: .5,
+						variant: "bordered",
+						size: 6,
+						spacingX: 1
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-x-2",
+						children: [icon && /* @__PURE__ */ jsx(Icon, {
+							name: icon.name,
+							className: classNames("flex-shrink-0 text-current", icon.className),
+							size: icon.size || 16
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono text-sm",
+							children: language
+						})]
+					}),
+					showCopyButton && /* @__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: .4
+								},
+								animate: {
+									opacity: 1,
+									filter: "blur(0px)",
+									scale: 1
+								},
+								exit: {
+									opacity: 0,
+									filter: "blur(4px)",
+									scale: .4
+								},
+								transition: {
+									duration: .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 pointer-events-none h-[300px]" }),
+			/* @__PURE__ */ jsx(motion.div, {
+				ref: codeblockRef,
+				className: classNames("relative text-base! overflow-hidden will-change-transform", isOverflowing && !isExpanded && "[mask-image:linear-gradient(to_bottom,black_70%,transparent_97.5%)]"),
+				initial: false,
+				animate: { height: isExpanded || !isOverflowing && hasCalculated ? "auto" : maxLines * 24 },
+				transition: {
+					duration: hasCalculated ? .4 : 0,
+					ease: silk
+				},
+				children
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, { children: isOverflowing && /* @__PURE__ */ jsx(motion.div, {
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: { duration: .2 },
+				onClick: () => setIsExpanded(!isExpanded),
+				className: "font-mono text-xs text-shade-tertiary cursor-pointer bg-card-solid/50 hover:bg-card-solid/100 bottom-1 left-1 absolute w-[calc(100%-8px)] transition py-1.5 flex items-center justify-center",
+				children: isExpanded ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-x-0.5",
+					children: ["Collapse ", /* @__PURE__ */ jsx(Icon, {
+						name: "Chevron",
+						size: 12,
+						className: "rotate-180"
+					})]
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-x-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-x-0.5",
+						children: [
+							"Expand ",
+							/* @__PURE__ */ jsx(Icon, {
+								name: "Chevron",
+								size: 10
+							}),
+							" "
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "absolute right-2 text-shade-mute text-xs",
+						children: [
+							"[",
+							lineCount - maxLines,
+							" more lines]"
+						]
+					})]
+				})
+			}) })
+		]
+	});
+};
+
+//#endregion
+export { Codeblock };
+//# sourceMappingURL=Codeblock.js.map

package/dist/Codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Codeblock.js","names":[],"sources":["../src/Codeblock.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Icon, IconName, IconProps } from \"./Icon\";\nimport { useCopyToClipboard } from \"usehooks-ts\";\nimport { useRef, useState, useEffect } from \"react\";\nimport { silk } from \"./utils/easings\";\n\nexport type CodeblockProps = {\n  children: React.ReactNode;\n  clipboardText: string;\n  showCopyButton?: boolean;\n  icon?: IconProps;\n  language: \"rust\" | \"typescript\" | \"assembly\" | \"other\" | string;\n  animation?: MotionProps;\n  className?: string;\n  maxLines?: number;\n};\n\nexport const Codeblock = ({\n  children,\n  clipboardText,\n  language,\n  animation,\n  className,\n  icon,\n  showCopyButton = true,\n  maxLines = 15,\n}: CodeblockProps) => {\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n  const [isExpanded, setIsExpanded] = useState(false);\n  // Initialize with clipboardText to avoid initial expansion flash\n  const [lineCount, setLineCount] = useState(() => clipboardText.split(\"\\n\").length);\n  const [hasCalculated, setHasCalculated] = useState(false);\n  const codeblockRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (codeblockRef.current) {\n      // Find the pre > code structure - each span child represents a line\n      const codeElement = codeblockRef.current.querySelector(\"pre code\");\n      const preElement = codeblockRef.current.querySelector(\"pre\");\n\n      // Try to find line-level spans (direct children of code or pre)\n      const containerElement = codeElement || preElement;\n\n      if (containerElement) {\n        // Count direct child span elements - each span is a line\n        const lineSpans = Array.from(containerElement.children).filter(\n          (child) => child.tagName === \"SPAN\"\n        );\n\n        if (lineSpans.length > 0) {\n          // Each span represents one line\n          setLineCount(lineSpans.length);\n          setHasCalculated(true);\n        } else {\n          // Fallback: count line breaks in the text content\n          const text = containerElement.textContent || \"\";\n          const lines = text.split(\"\\n\");\n          setLineCount(lines.length || 1);\n          setHasCalculated(true);\n        }\n      } else {\n        // Last resort: use clipboardText\n        setLineCount(clipboardText.split(\"\\n\").length);\n        setHasCalculated(true);\n      }\n    }\n  }, [children, clipboardText]);\n\n  const isOverflowing = lineCount > maxLines;\n  const handleCopy = () => {\n    copyToClipboard(clipboardText);\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-4 gradient-border before:bg-card-border pt-3 pb-4\",\n        language === \"rust\" && \"text-brand-rust\",\n        language === \"typescript\" && \"text-brand-typescript\",\n        language === \"assembly\" && \"text-brand-assembly\",\n        language === \"other\" && \"text-shade-tertiary\",\n        language &&\n        language !== \"rust\" &&\n        language !== \"typescript\" &&\n        language !== \"assembly\" &&\n        language !== \"other\" &&\n        \"text-brand-primary\",\n        className,\n        isOverflowing && isExpanded && \"pb-12!\"\n      )}\n      {...animation}\n    >\n      <motion.div className={classNames(\"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            <Icon\n              name={icon.name as IconName}\n              className={classNames(\n                \"flex-shrink-0 text-current\",\n                icon.className,\n              )}\n              size={icon.size || 16}\n            />\n          )}\n          <span className=\"font-mono text-sm\">{language}</span>\n        </div>\n\n        {showCopyButton && (\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        )}\n      </motion.div>\n      <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent pointer-events-none h-[300px]\"></div>\n\n      <motion.div\n        ref={codeblockRef}\n        className={classNames(\"relative text-base! overflow-hidden will-change-transform\", isOverflowing && !isExpanded && \"[mask-image:linear-gradient(to_bottom,black_70%,transparent_97.5%)]\")}\n        initial={false}\n        animate={{\n          height: isExpanded || (!isOverflowing && hasCalculated)\n            ? \"auto\"\n            : maxLines * 24\n        }}\n        transition={{ duration: hasCalculated ? 0.4 : 0, ease: silk }}\n      >\n        {children}\n      </motion.div>\n\n      <AnimatePresence>\n        {isOverflowing && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            onClick={() => setIsExpanded(!isExpanded)}\n            className=\"font-mono text-xs text-shade-tertiary cursor-pointer bg-card-solid/50 hover:bg-card-solid/100 bottom-1 left-1 absolute w-[calc(100%-8px)] transition py-1.5 flex items-center justify-center\"\n          >\n            {isExpanded ? (\n              <div className=\"flex items-center gap-x-0.5\">\n                Collapse <Icon name=\"Chevron\" size={12} className=\"rotate-180\" />\n              </div>\n            ) : (\n              <div className=\"flex items-center gap-x-2\">\n                <div className=\"flex items-center gap-x-0.5\">Expand <Icon name=\"Chevron\" size={10} /> </div>\n                <div className=\"absolute right-2 text-shade-mute text-xs\">[{lineCount - maxLines} more lines]</div>\n              </div>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </motion.div>\n  );\n};\n"],"mappings":"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"}

package/dist/CrossHair.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime10 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_runtime10.JSX.Element;
+//#endregion
+export { CrosshairCorners, CrosshairCornersProps };
+//# sourceMappingURL=CrossHair.d.ts.map

package/dist/CrossHair.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossHair.d.ts","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.js

@@ -0,0 +1,173 @@
+"use client";
+
+import { anticipate, motion } from "motion/react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "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__ */ jsx(motion.div, {
+		className: classNames("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: 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__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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__ */ jsx("div", {
+				className: classNames("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
+export { CrosshairCorners };
+//# sourceMappingURL=CrossHair.js.map

package/dist/CrossHair.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossHair.js","names":[],"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":"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"}

package/dist/DecryptText.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime73 from "react/jsx-runtime";
+
+//#region src/DecryptText.d.ts
+interface DecryptedTextProps {
+  text: string;
+  speed?: number;
+  className?: string;
+  encryptedClassName?: string;
+  parentClassName?: string;
+  isHovering?: boolean;
+}
+declare function DecryptedText({
+  text,
+  speed,
+  className,
+  parentClassName,
+  encryptedClassName,
+  isHovering
+}: DecryptedTextProps): react_jsx_runtime73.JSX.Element;
+//#endregion
+export { DecryptedText as default };
+//# sourceMappingURL=DecryptText.d.ts.map

package/dist/DecryptText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecryptText.d.ts","names":[],"sources":["../src/DecryptText.tsx"],"sourcesContent":[],"mappings":";;;UAMU,kBAAA;;;EAAA,SAAA,CAAA,EAAA,MAAA;EASc,kBAAa,CAAA,EAAA,MAAA;EACnC,eAAA,CAAA,EAAA,MAAA;EACA,UAAA,CAAA,EAAA,OAAA;;AAEA,iBAJsB,aAAA,CAItB;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,eAAA;EAAA,kBAAA;EAAA;AAAA,CAAA,EAGC,kBAHD,CAAA,EAGmB,mBAAA,CAAA,GAAA,CAAA,OAHnB"}

package/dist/DecryptText.js

@@ -0,0 +1,87 @@
+"use client";
+
+import { motion } from "motion/react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+
+//#region src/DecryptText.tsx
+function DecryptedText({ text, speed = 20, className = "", parentClassName = "", encryptedClassName = "", isHovering = false }) {
+	const [displayText, setDisplayText] = useState(text);
+	const [isScrambling, setIsScrambling] = useState(false);
+	const [revealedIndices, setRevealedIndices] = useState(/* @__PURE__ */ new Set());
+	const [isExiting, setIsExiting] = useState(false);
+	useEffect(() => {
+		let interval;
+		const shuffleText = (currentRevealed, isExiting$1 = false) => {
+			const positions = text.split("").map((char, i) => ({
+				char,
+				isSpace: char === " ",
+				index: i,
+				isRevealed: isExiting$1 ? !currentRevealed.has(i) : currentRevealed.has(i)
+			}));
+			const nonSpaceChars = positions.filter((p) => !p.isSpace && !p.isRevealed).map((p) => p.char);
+			for (let i = nonSpaceChars.length - 1; i > 0; i--) {
+				const j = Math.floor(Math.random() * (i + 1));
+				[nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]];
+			}
+			let charIndex = 0;
+			return positions.map((p) => {
+				if (p.isSpace) return " ";
+				if (p.isRevealed) return text[p.index];
+				return nonSpaceChars[charIndex++];
+			}).join("");
+		};
+		if (isHovering) {
+			setIsExiting(false);
+			setIsScrambling(true);
+			interval = setInterval(() => {
+				setRevealedIndices((prevRevealed) => {
+					if (prevRevealed.size < text.length) {
+						const nextIndex = prevRevealed.size;
+						const newRevealed = new Set(prevRevealed);
+						newRevealed.add(nextIndex);
+						setDisplayText(shuffleText(newRevealed));
+						return newRevealed;
+					} else {
+						clearInterval(interval);
+						setIsScrambling(false);
+						return prevRevealed;
+					}
+				});
+			}, speed);
+		} else {
+			setDisplayText(text);
+			setRevealedIndices(/* @__PURE__ */ new Set());
+			setIsScrambling(false);
+			setIsExiting(false);
+		}
+		return () => {
+			if (interval) clearInterval(interval);
+		};
+	}, [
+		isHovering,
+		text,
+		speed
+	]);
+	return /* @__PURE__ */ jsxs(motion.span, {
+		className: classNames("inline-block whitespace-pre-wrap", parentClassName),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: displayText
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "inline-flex tracking-tight",
+			children: displayText.split("").map((char, index) => {
+				return /* @__PURE__ */ jsx("span", {
+					className: (isExiting ? !revealedIndices.has(index) : revealedIndices.has(index)) || !isScrambling || !isHovering && !isExiting ? className : encryptedClassName,
+					children: char
+				}, index);
+			})
+		})]
+	});
+}
+
+//#endregion
+export { DecryptedText as default };
+//# sourceMappingURL=DecryptText.js.map

package/dist/DecryptText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecryptText.js","names":["interval: NodeJS.Timeout","isExiting"],"sources":["../src/DecryptText.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport classNames from \"classnames\";\n\ninterface DecryptedTextProps {\n  text: string;\n  speed?: number;\n  className?: string;\n  encryptedClassName?: string;\n  parentClassName?: string;\n  isHovering?: boolean;\n}\n\nexport default function DecryptedText({\n  text,\n  speed = 20,\n  className = \"\",\n  parentClassName = \"\",\n  encryptedClassName = \"\",\n  isHovering = false,\n}: DecryptedTextProps) {\n  const [displayText, setDisplayText] = useState<string>(text);\n  const [isScrambling, setIsScrambling] = useState<boolean>(false);\n  const [revealedIndices, setRevealedIndices] = useState<Set<number>>(\n    new Set()\n  );\n  const [isExiting, setIsExiting] = useState<boolean>(false);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    const shuffleText = (\n      currentRevealed: Set<number>,\n      isExiting: boolean = false\n    ): string => {\n      const positions = text.split(\"\").map((char, i) => ({\n        char,\n        isSpace: char === \" \",\n        index: i,\n        isRevealed: isExiting\n          ? !currentRevealed.has(i)\n          : currentRevealed.has(i),\n      }));\n\n      const nonSpaceChars = positions\n        .filter((p) => !p.isSpace && !p.isRevealed)\n        .map((p) => p.char);\n\n      for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [nonSpaceChars[i], nonSpaceChars[j]] = [\n          nonSpaceChars[j],\n          nonSpaceChars[i],\n        ];\n      }\n\n      let charIndex = 0;\n      return positions\n        .map((p) => {\n          if (p.isSpace) return \" \";\n          if (p.isRevealed) return text[p.index];\n          return nonSpaceChars[charIndex++];\n        })\n        .join(\"\");\n    };\n\n    if (isHovering) {\n      setIsExiting(false);\n      setIsScrambling(true);\n      interval = setInterval(() => {\n        setRevealedIndices((prevRevealed) => {\n          if (prevRevealed.size < text.length) {\n            const nextIndex = prevRevealed.size;\n            const newRevealed = new Set(prevRevealed);\n            newRevealed.add(nextIndex);\n            setDisplayText(shuffleText(newRevealed));\n            return newRevealed;\n          } else {\n            clearInterval(interval);\n            setIsScrambling(false);\n            return prevRevealed;\n          }\n        });\n      }, speed);\n    } else {\n      // When not hovering, immediately show the original text without animation\n      setDisplayText(text);\n      setRevealedIndices(new Set());\n      setIsScrambling(false);\n      setIsExiting(false);\n    }\n\n    return () => {\n      if (interval) clearInterval(interval);\n    };\n  }, [isHovering, text, speed]);\n\n  return (\n    <motion.span\n      className={classNames(\n        \"inline-block whitespace-pre-wrap\",\n        parentClassName\n      )}\n    >\n      <span className=\"sr-only\">{displayText}</span>\n\n      <span aria-hidden=\"true\" className=\"inline-flex tracking-tight\">\n        {displayText.split(\"\").map((char, index) => {\n          const isRevealedOrDone =\n            (isExiting\n              ? !revealedIndices.has(index)\n              : revealedIndices.has(index)) ||\n            !isScrambling ||\n            (!isHovering && !isExiting);\n\n          return (\n            <span\n              key={index}\n              className={isRevealedOrDone ? className : encryptedClassName}\n            >\n              {char}\n            </span>\n          );\n        })}\n      </span>\n    </motion.span>\n  );\n}\n"],"mappings":";;;;;;;;AAeA,SAAwB,cAAc,EACpC,MACA,QAAQ,IACR,YAAY,IACZ,kBAAkB,IAClB,qBAAqB,IACrB,aAAa,SACQ;CACrB,MAAM,CAAC,aAAa,kBAAkB,SAAiB,KAAK;CAC5D,MAAM,CAAC,cAAc,mBAAmB,SAAkB,MAAM;CAChE,MAAM,CAAC,iBAAiB,sBAAsB,yBAC5C,IAAI,KAAK,CACV;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;AAE1D,iBAAgB;EACd,IAAIA;EAEJ,MAAM,eACJ,iBACA,cAAqB,UACV;GACX,MAAM,YAAY,KAAK,MAAM,GAAG,CAAC,KAAK,MAAM,OAAO;IACjD;IACA,SAAS,SAAS;IAClB,OAAO;IACP,YAAYC,cACR,CAAC,gBAAgB,IAAI,EAAE,GACvB,gBAAgB,IAAI,EAAE;IAC3B,EAAE;GAEH,MAAM,gBAAgB,UACnB,QAAQ,MAAM,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,CAC1C,KAAK,MAAM,EAAE,KAAK;AAErB,QAAK,IAAI,IAAI,cAAc,SAAS,GAAG,IAAI,GAAG,KAAK;IACjD,MAAM,IAAI,KAAK,MAAM,KAAK,QAAQ,IAAI,IAAI,GAAG;AAC7C,KAAC,cAAc,IAAI,cAAc,MAAM,CACrC,cAAc,IACd,cAAc,GACf;;GAGH,IAAI,YAAY;AAChB,UAAO,UACJ,KAAK,MAAM;AACV,QAAI,EAAE,QAAS,QAAO;AACtB,QAAI,EAAE,WAAY,QAAO,KAAK,EAAE;AAChC,WAAO,cAAc;KACrB,CACD,KAAK,GAAG;;AAGb,MAAI,YAAY;AACd,gBAAa,MAAM;AACnB,mBAAgB,KAAK;AACrB,cAAW,kBAAkB;AAC3B,wBAAoB,iBAAiB;AACnC,SAAI,aAAa,OAAO,KAAK,QAAQ;MACnC,MAAM,YAAY,aAAa;MAC/B,MAAM,cAAc,IAAI,IAAI,aAAa;AACzC,kBAAY,IAAI,UAAU;AAC1B,qBAAe,YAAY,YAAY,CAAC;AACxC,aAAO;YACF;AACL,oBAAc,SAAS;AACvB,sBAAgB,MAAM;AACtB,aAAO;;MAET;MACD,MAAM;SACJ;AAEL,kBAAe,KAAK;AACpB,sCAAmB,IAAI,KAAK,CAAC;AAC7B,mBAAgB,MAAM;AACtB,gBAAa,MAAM;;AAGrB,eAAa;AACX,OAAI,SAAU,eAAc,SAAS;;IAEtC;EAAC;EAAY;EAAM;EAAM,CAAC;AAE7B,QACE,qBAAC,OAAO;EACN,WAAW,WACT,oCACA,gBACD;aAED,oBAAC;GAAK,WAAU;aAAW;IAAmB,EAE9C,oBAAC;GAAK,eAAY;GAAO,WAAU;aAChC,YAAY,MAAM,GAAG,CAAC,KAAK,MAAM,UAAU;AAQ1C,WACE,oBAAC;KAEC,YATD,YACG,CAAC,gBAAgB,IAAI,MAAM,GAC3B,gBAAgB,IAAI,MAAM,KAC9B,CAAC,gBACA,CAAC,cAAc,CAAC,YAKe,YAAY;eAEzC;OAHI,MAIA;KAET;IACG;GACK"}

package/dist/Difficulty.d.ts

@@ -0,0 +1,16 @@
+import { courseDifficulty } from "./utils/colours.js";
+import { IconProps } from "./Icon.js";
+import * as react_jsx_runtime75 from "react/jsx-runtime";
+
+//#region src/Difficulty.d.ts
+interface DifficultyProps extends Omit<IconProps, "name"> {
+  difficulties?: Array<keyof typeof courseDifficulty>;
+}
+declare const Difficulty: ({
+  className,
+  size,
+  difficulties
+}: DifficultyProps) => react_jsx_runtime75.JSX.Element;
+//#endregion
+export { Difficulty, DifficultyProps };
+//# sourceMappingURL=Difficulty.d.ts.map

package/dist/Difficulty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Difficulty.d.ts","names":[],"sources":["../src/Difficulty.tsx"],"sourcesContent":[],"mappings":";;;;;UAMiB,eAAA,SAAwB,KAAK;iBAC7B,mBAAmB;;AADnB,cAYJ,UAZoB,EAAA,CAAA;EAAA,SAAA;EAAA,IAAA;EAAA;AAAA,CAAA,EAgB9B,eAhB8B,EAAA,GAgBf,mBAAA,CAAA,GAAA,CAAA,OAhBe"}