erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/gradual-blur-Bl3dOMEz.mjs

@@ -0,0 +1,59 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+//#region src/components/effects/gradual-blur/GradualBlur.tsx
+var GradualBlur = ({ children, duration = .5, delay = 0, blur = 8, triggerOnView = true, triggerOnce = true, threshold = .05, visible = false, direction = "none", distance = 20, className, as = "div" }) => {
+	const ref = useRef(null);
+	const getInitialPosition = () => {
+		switch (direction) {
+			case "top": return { y: -distance };
+			case "bottom": return { y: distance };
+			case "left": return { x: -distance };
+			case "right": return { x: distance };
+			default: return {
+				x: 0,
+				y: 0
+			};
+		}
+	};
+	const initialPosition = getInitialPosition();
+	const variants = {
+		hidden: {
+			opacity: 0,
+			filter: `blur(${blur}px)`,
+			...initialPosition
+		},
+		visible: {
+			opacity: 1,
+			filter: "blur(0px)",
+			x: 0,
+			y: 0
+		}
+	};
+	return /* @__PURE__ */ jsx(motion.create(as), {
+		ref,
+		variants,
+		initial: "hidden",
+		animate: !triggerOnView ? visible ? "visible" : "hidden" : void 0,
+		whileInView: triggerOnView ? "visible" : void 0,
+		viewport: {
+			once: triggerOnce,
+			amount: threshold,
+			margin: "0px 0px -50px 0px"
+		},
+		transition: {
+			duration,
+			delay,
+			ease: "easeOut",
+			filter: { duration },
+			opacity: { duration }
+		},
+		className: mergeClassNames("relative", className),
+		children
+	});
+};
+//#endregion
+export { GradualBlur as t };
+
+//# sourceMappingURL=gradual-blur-Bl3dOMEz.mjs.map

package/dist/chunks/gradual-blur-Bl3dOMEz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradual-blur-Bl3dOMEz.mjs","names":[],"sources":["../../src/components/effects/gradual-blur/GradualBlur.tsx"],"sourcesContent":["import { useRef, type ComponentType } from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { GradualBlurProps } from \"./types\";\n\nexport const GradualBlur = ({\n  children,\n  duration = 0.5,\n  delay = 0,\n  blur = 8,\n  triggerOnView = true,\n  triggerOnce = true,\n  threshold = 0.05,\n  visible = false,\n  direction = \"none\",\n  distance = 20,\n  className,\n  as = \"div\",\n}: GradualBlurProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const getInitialPosition = () => {\n    switch (direction) {\n      case \"top\":\n        return { y: -distance };\n      case \"bottom\":\n        return { y: distance };\n      case \"left\":\n        return { x: -distance };\n      case \"right\":\n        return { x: distance };\n      default:\n        return { x: 0, y: 0 };\n    }\n  };\n\n  const initialPosition = getInitialPosition();\n\n  const variants = {\n    hidden: {\n      opacity: 0,\n      filter: `blur(${blur}px)`,\n      ...initialPosition,\n    },\n    visible: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      x: 0,\n      y: 0,\n    },\n  };\n\n  const MotionComponent = motion.create(as as string) as ComponentType<\n    HTMLMotionProps<\"div\">\n  >;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      variants={variants}\n      initial=\"hidden\"\n      animate={!triggerOnView ? (visible ? \"visible\" : \"hidden\") : undefined}\n      whileInView={triggerOnView ? \"visible\" : undefined}\n      viewport={{\n        once: triggerOnce,\n        amount: threshold,\n        margin: \"0px 0px -50px 0px\", // Slight bottom margin to trigger earlier\n      }}\n      transition={{\n        duration,\n        delay,\n        ease: \"easeOut\",\n        filter: { duration: duration },\n        opacity: { duration: duration },\n      }}\n      className={mergeClassNames(\"relative\", className)}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,eAAe,EAC1B,UACA,WAAW,IACX,QAAQ,GACR,OAAO,GACP,gBAAgB,MAChB,cAAc,MACd,YAAY,KACZ,UAAU,OACV,YAAY,QACZ,WAAW,IACX,WACA,KAAK,YACiB;CACtB,MAAM,MAAM,OAAuB,KAAK;CAExC,MAAM,2BAA2B;AAC/B,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,SACH,QAAO,EAAE,GAAG,UAAU;GACxB,KAAK,OACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,QACH,QAAO,EAAE,GAAG,UAAU;GACxB,QACE,QAAO;IAAE,GAAG;IAAG,GAAG;IAAG;;;CAI3B,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,WAAW;EACf,QAAQ;GACN,SAAS;GACT,QAAQ,QAAQ,KAAK;GACrB,GAAG;GACJ;EACD,SAAS;GACP,SAAS;GACT,QAAQ;GACR,GAAG;GACH,GAAG;GACJ;EACF;AAMD,QACE,oBALsB,OAAO,OAAO,GAAa,EAKjD;EACO;EACK;EACV,SAAQ;EACR,SAAS,CAAC,gBAAiB,UAAU,YAAY,WAAY,KAAA;EAC7D,aAAa,gBAAgB,YAAY,KAAA;EACzC,UAAU;GACR,MAAM;GACN,QAAQ;GACR,QAAQ;GACT;EACD,YAAY;GACV;GACA;GACA,MAAM;GACN,QAAQ,EAAY,UAAU;GAC9B,SAAS,EAAY,UAAU;GAChC;EACD,WAAW,gBAAgB,YAAY,UAAU;EAEhD;EACe,CAAA"}

package/dist/chunks/hover-card-v0QwmVBU.cjs

@@ -0,0 +1,191 @@
+require("./chunk-B_GkZjkl.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/overlays/hover-card/HoverCard.tsx
+var positionStyles = {
+	top: {
+		start: "bottom-full left-0 mb-2",
+		center: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+		end: "bottom-full right-0 mb-2"
+	},
+	bottom: {
+		start: "top-full left-0 mt-2",
+		center: "top-full left-1/2 -translate-x-1/2 mt-2",
+		end: "top-full right-0 mt-2"
+	},
+	left: {
+		start: "right-full top-0 mr-2",
+		center: "right-full top-1/2 -translate-y-1/2 mr-2",
+		end: "right-full bottom-0 mr-2"
+	},
+	right: {
+		start: "left-full top-0 ml-2",
+		center: "left-full top-1/2 -translate-y-1/2 ml-2",
+		end: "left-full bottom-0 ml-2"
+	}
+};
+var arrowStyles = {
+	top: "bottom-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-white/70 dark:border-t-neutral-900/70",
+	bottom: "top-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-white/70 dark:border-b-neutral-900/70",
+	left: "right-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-white/70 dark:border-l-neutral-900/70",
+	right: "left-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-white/70 dark:border-r-neutral-900/70"
+};
+var motionVariants = {
+	top: {
+		initial: {
+			opacity: 0,
+			y: 5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			y: 5,
+			scale: .98
+		}
+	},
+	bottom: {
+		initial: {
+			opacity: 0,
+			y: -5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			y: -5,
+			scale: .98
+		}
+	},
+	left: {
+		initial: {
+			opacity: 0,
+			x: 5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			x: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			x: 5,
+			scale: .98
+		}
+	},
+	right: {
+		initial: {
+			opacity: 0,
+			x: -5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			x: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			x: -5,
+			scale: .98
+		}
+	}
+};
+var HoverCard = (0, react.forwardRef)(({ children, content, position = "bottom", align = "center", openDelay = 200, closeDelay = 150, disabled = false, className = "", triggerClassName = "", arrow = true, width, maxWidth = 320 }, ref) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const openTimeoutRef = (0, react.useRef)(null);
+	const closeTimeoutRef = (0, react.useRef)(null);
+	const clearTimeouts = (0, react.useCallback)(() => {
+		if (openTimeoutRef.current) {
+			clearTimeout(openTimeoutRef.current);
+			openTimeoutRef.current = null;
+		}
+		if (closeTimeoutRef.current) {
+			clearTimeout(closeTimeoutRef.current);
+			closeTimeoutRef.current = null;
+		}
+	}, []);
+	const handleMouseEnter = (0, react.useCallback)(() => {
+		if (disabled) return;
+		clearTimeouts();
+		openTimeoutRef.current = setTimeout(() => {
+			setIsOpen(true);
+		}, openDelay);
+	}, [
+		disabled,
+		openDelay,
+		clearTimeouts
+	]);
+	const handleMouseLeave = (0, react.useCallback)(() => {
+		clearTimeouts();
+		closeTimeoutRef.current = setTimeout(() => {
+			setIsOpen(false);
+		}, closeDelay);
+	}, [closeDelay, clearTimeouts]);
+	(0, react.useEffect)(() => {
+		return () => clearTimeouts();
+	}, [clearTimeouts]);
+	const resolvedWidth = width ? typeof width === "number" ? `${width}px` : width : "max-content";
+	const resolvedMaxWidth = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+	const cardContainerStyle = {
+		width: resolvedWidth,
+		maxWidth: resolvedMaxWidth ? `min(calc(100vw - 2rem), ${resolvedMaxWidth})` : "calc(100vw - 2rem)"
+	};
+	const cardStyle = { width: width ? typeof width === "number" ? `${width}px` : width : "100%" };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: `relative inline-block ${triggerClassName}`,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+			className: `
+                absolute z-50
+                ${positionStyles[position][align]}
+              `,
+			style: cardContainerStyle,
+			initial: motionVariants[position].initial,
+			animate: motionVariants[position].animate,
+			exit: motionVariants[position].exit,
+			transition: {
+				duration: .15,
+				ease: "easeOut"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `
+                  w-full
+                  bg-white/70 dark:bg-neutral-900/70
+                  backdrop-blur-xl
+                  rounded-xl shadow-2xl dark:shadow-neutral-950/50
+                  border border-white/40 dark:border-white/10
+                  p-4
+                  ${className}
+                `,
+				style: cardStyle,
+				children: content
+			}), arrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `
+                    absolute w-0 h-0 border-[6px]
+                    ${arrowStyles[position]}
+                  ` })]
+		}) })]
+	});
+});
+HoverCard.displayName = "HoverCard";
+//#endregion
+Object.defineProperty(exports, "HoverCard", {
+	enumerable: true,
+	get: function() {
+		return HoverCard;
+	}
+});
+
+//# sourceMappingURL=hover-card-v0QwmVBU.cjs.map

package/dist/chunks/hover-card-v0QwmVBU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card-v0QwmVBU.cjs","names":[],"sources":["../../src/components/overlays/hover-card/HoverCard.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback, useRef, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type HoverCardPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type HoverCardAlign = \"start\" | \"center\" | \"end\";\n\nexport interface HoverCardProps {\n  /** The trigger element */\n  children: React.ReactNode;\n  /** The content to display in the hover card */\n  content: React.ReactNode;\n  /** Position of the hover card relative to trigger */\n  position?: HoverCardPosition;\n  /** Alignment of the hover card */\n  align?: HoverCardAlign;\n  /** Delay before showing the card (ms) */\n  openDelay?: number;\n  /** Delay before hiding the card (ms) */\n  closeDelay?: number;\n  /** Whether the hover card is disabled */\n  disabled?: boolean;\n  /** Custom className for the card */\n  className?: string;\n  /** Custom className for the trigger wrapper */\n  triggerClassName?: string;\n  /** Whether to show an arrow */\n  arrow?: boolean;\n  /** Custom width for the card */\n  width?: number | string;\n  /** Max width for the card */\n  maxWidth?: number | string;\n}\n\nconst positionStyles: Record<\n  HoverCardPosition,\n  Record<HoverCardAlign, string>\n> = {\n  top: {\n    start: \"bottom-full left-0 mb-2\",\n    center: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n    end: \"bottom-full right-0 mb-2\",\n  },\n  bottom: {\n    start: \"top-full left-0 mt-2\",\n    center: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n    end: \"top-full right-0 mt-2\",\n  },\n  left: {\n    start: \"right-full top-0 mr-2\",\n    center: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n    end: \"right-full bottom-0 mr-2\",\n  },\n  right: {\n    start: \"left-full top-0 ml-2\",\n    center: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n    end: \"left-full bottom-0 ml-2\",\n  },\n};\n\nconst arrowStyles: Record<HoverCardPosition, string> = {\n  top: \"bottom-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-white/70 dark:border-t-neutral-900/70\",\n  bottom:\n    \"top-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-white/70 dark:border-b-neutral-900/70\",\n  left: \"right-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-white/70 dark:border-l-neutral-900/70\",\n  right:\n    \"left-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-white/70 dark:border-r-neutral-900/70\",\n};\n\nconst motionVariants = {\n  top: {\n    initial: { opacity: 0, y: 5, scale: 0.98 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: 5, scale: 0.98 },\n  },\n  bottom: {\n    initial: { opacity: 0, y: -5, scale: 0.98 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: -5, scale: 0.98 },\n  },\n  left: {\n    initial: { opacity: 0, x: 5, scale: 0.98 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: 5, scale: 0.98 },\n  },\n  right: {\n    initial: { opacity: 0, x: -5, scale: 0.98 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: -5, scale: 0.98 },\n  },\n} as const;\n\nconst HoverCard = forwardRef<HTMLDivElement, HoverCardProps>(\n  (\n    {\n      children,\n      content,\n      position = \"bottom\",\n      align = \"center\",\n      openDelay = 200,\n      closeDelay = 150,\n      disabled = false,\n      className = \"\",\n      triggerClassName = \"\",\n      arrow = true,\n      width,\n      maxWidth = 320,\n    },\n    ref,\n  ) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const openTimeoutRef = useRef<any>(null);\n    const closeTimeoutRef = useRef<any>(null);\n\n    const clearTimeouts = useCallback(() => {\n      if (openTimeoutRef.current) {\n        clearTimeout(openTimeoutRef.current);\n        openTimeoutRef.current = null;\n      }\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current);\n        closeTimeoutRef.current = null;\n      }\n    }, []);\n\n    const handleMouseEnter = useCallback(() => {\n      if (disabled) return;\n      clearTimeouts();\n      openTimeoutRef.current = setTimeout(() => {\n        setIsOpen(true);\n      }, openDelay);\n    }, [disabled, openDelay, clearTimeouts]);\n\n    const handleMouseLeave = useCallback(() => {\n      clearTimeouts();\n      closeTimeoutRef.current = setTimeout(() => {\n        setIsOpen(false);\n      }, closeDelay);\n    }, [closeDelay, clearTimeouts]);\n\n    useEffect(() => {\n      return () => clearTimeouts();\n    }, [clearTimeouts]);\n\n    const resolvedWidth = width\n      ? typeof width === \"number\"\n        ? `${width}px`\n        : width\n      : \"max-content\";\n\n    const resolvedMaxWidth =\n      typeof maxWidth === \"number\" ? `${maxWidth}px` : maxWidth;\n\n    const cardContainerStyle: React.CSSProperties = {\n      width: resolvedWidth,\n      maxWidth: resolvedMaxWidth\n        ? `min(calc(100vw - 2rem), ${resolvedMaxWidth})`\n        : \"calc(100vw - 2rem)\",\n    };\n\n    const cardStyle: React.CSSProperties = {\n      width: width\n        ? typeof width === \"number\"\n          ? `${width}px`\n          : width\n        : \"100%\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`relative inline-block ${triggerClassName}`}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {children}\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              className={`\n                absolute z-50\n                ${positionStyles[position][align]}\n              `}\n              style={cardContainerStyle}\n              initial={motionVariants[position].initial}\n              animate={motionVariants[position].animate}\n              exit={motionVariants[position].exit}\n              transition={{ duration: 0.15, ease: \"easeOut\" }}\n            >\n              <div\n                className={`\n                  w-full\n                  bg-white/70 dark:bg-neutral-900/70\n                  backdrop-blur-xl\n                  rounded-xl shadow-2xl dark:shadow-neutral-950/50\n                  border border-white/40 dark:border-white/10\n                  p-4\n                  ${className}\n                `}\n                style={cardStyle}\n              >\n                {content}\n              </div>\n              {arrow && (\n                <span\n                  className={`\n                    absolute w-0 h-0 border-[6px]\n                    ${arrowStyles[position]}\n                  `}\n                />\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  },\n);\n\nHoverCard.displayName = \"HoverCard\";\n\nexport default HoverCard;\nexport { HoverCard };\n"],"mappings":"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"}

package/dist/chunks/hover-card-xqwpmZNm.mjs

@@ -0,0 +1,185 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/overlays/hover-card/HoverCard.tsx
+var positionStyles = {
+	top: {
+		start: "bottom-full left-0 mb-2",
+		center: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+		end: "bottom-full right-0 mb-2"
+	},
+	bottom: {
+		start: "top-full left-0 mt-2",
+		center: "top-full left-1/2 -translate-x-1/2 mt-2",
+		end: "top-full right-0 mt-2"
+	},
+	left: {
+		start: "right-full top-0 mr-2",
+		center: "right-full top-1/2 -translate-y-1/2 mr-2",
+		end: "right-full bottom-0 mr-2"
+	},
+	right: {
+		start: "left-full top-0 ml-2",
+		center: "left-full top-1/2 -translate-y-1/2 ml-2",
+		end: "left-full bottom-0 ml-2"
+	}
+};
+var arrowStyles = {
+	top: "bottom-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-white/70 dark:border-t-neutral-900/70",
+	bottom: "top-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-white/70 dark:border-b-neutral-900/70",
+	left: "right-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-white/70 dark:border-l-neutral-900/70",
+	right: "left-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-white/70 dark:border-r-neutral-900/70"
+};
+var motionVariants = {
+	top: {
+		initial: {
+			opacity: 0,
+			y: 5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			y: 5,
+			scale: .98
+		}
+	},
+	bottom: {
+		initial: {
+			opacity: 0,
+			y: -5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			y: -5,
+			scale: .98
+		}
+	},
+	left: {
+		initial: {
+			opacity: 0,
+			x: 5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			x: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			x: 5,
+			scale: .98
+		}
+	},
+	right: {
+		initial: {
+			opacity: 0,
+			x: -5,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			x: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			x: -5,
+			scale: .98
+		}
+	}
+};
+var HoverCard = forwardRef(({ children, content, position = "bottom", align = "center", openDelay = 200, closeDelay = 150, disabled = false, className = "", triggerClassName = "", arrow = true, width, maxWidth = 320 }, ref) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const openTimeoutRef = useRef(null);
+	const closeTimeoutRef = useRef(null);
+	const clearTimeouts = useCallback(() => {
+		if (openTimeoutRef.current) {
+			clearTimeout(openTimeoutRef.current);
+			openTimeoutRef.current = null;
+		}
+		if (closeTimeoutRef.current) {
+			clearTimeout(closeTimeoutRef.current);
+			closeTimeoutRef.current = null;
+		}
+	}, []);
+	const handleMouseEnter = useCallback(() => {
+		if (disabled) return;
+		clearTimeouts();
+		openTimeoutRef.current = setTimeout(() => {
+			setIsOpen(true);
+		}, openDelay);
+	}, [
+		disabled,
+		openDelay,
+		clearTimeouts
+	]);
+	const handleMouseLeave = useCallback(() => {
+		clearTimeouts();
+		closeTimeoutRef.current = setTimeout(() => {
+			setIsOpen(false);
+		}, closeDelay);
+	}, [closeDelay, clearTimeouts]);
+	useEffect(() => {
+		return () => clearTimeouts();
+	}, [clearTimeouts]);
+	const resolvedWidth = width ? typeof width === "number" ? `${width}px` : width : "max-content";
+	const resolvedMaxWidth = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+	const cardContainerStyle = {
+		width: resolvedWidth,
+		maxWidth: resolvedMaxWidth ? `min(calc(100vw - 2rem), ${resolvedMaxWidth})` : "calc(100vw - 2rem)"
+	};
+	const cardStyle = { width: width ? typeof width === "number" ? `${width}px` : width : "100%" };
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: `relative inline-block ${triggerClassName}`,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [children, /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(motion.div, {
+			className: `
+                absolute z-50
+                ${positionStyles[position][align]}
+              `,
+			style: cardContainerStyle,
+			initial: motionVariants[position].initial,
+			animate: motionVariants[position].animate,
+			exit: motionVariants[position].exit,
+			transition: {
+				duration: .15,
+				ease: "easeOut"
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				className: `
+                  w-full
+                  bg-white/70 dark:bg-neutral-900/70
+                  backdrop-blur-xl
+                  rounded-xl shadow-2xl dark:shadow-neutral-950/50
+                  border border-white/40 dark:border-white/10
+                  p-4
+                  ${className}
+                `,
+				style: cardStyle,
+				children: content
+			}), arrow && /* @__PURE__ */ jsx("span", { className: `
+                    absolute w-0 h-0 border-[6px]
+                    ${arrowStyles[position]}
+                  ` })]
+		}) })]
+	});
+});
+HoverCard.displayName = "HoverCard";
+//#endregion
+export { HoverCard as t };
+
+//# sourceMappingURL=hover-card-xqwpmZNm.mjs.map

package/dist/chunks/hover-card-xqwpmZNm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card-xqwpmZNm.mjs","names":[],"sources":["../../src/components/overlays/hover-card/HoverCard.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback, useRef, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type HoverCardPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type HoverCardAlign = \"start\" | \"center\" | \"end\";\n\nexport interface HoverCardProps {\n  /** The trigger element */\n  children: React.ReactNode;\n  /** The content to display in the hover card */\n  content: React.ReactNode;\n  /** Position of the hover card relative to trigger */\n  position?: HoverCardPosition;\n  /** Alignment of the hover card */\n  align?: HoverCardAlign;\n  /** Delay before showing the card (ms) */\n  openDelay?: number;\n  /** Delay before hiding the card (ms) */\n  closeDelay?: number;\n  /** Whether the hover card is disabled */\n  disabled?: boolean;\n  /** Custom className for the card */\n  className?: string;\n  /** Custom className for the trigger wrapper */\n  triggerClassName?: string;\n  /** Whether to show an arrow */\n  arrow?: boolean;\n  /** Custom width for the card */\n  width?: number | string;\n  /** Max width for the card */\n  maxWidth?: number | string;\n}\n\nconst positionStyles: Record<\n  HoverCardPosition,\n  Record<HoverCardAlign, string>\n> = {\n  top: {\n    start: \"bottom-full left-0 mb-2\",\n    center: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n    end: \"bottom-full right-0 mb-2\",\n  },\n  bottom: {\n    start: \"top-full left-0 mt-2\",\n    center: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n    end: \"top-full right-0 mt-2\",\n  },\n  left: {\n    start: \"right-full top-0 mr-2\",\n    center: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n    end: \"right-full bottom-0 mr-2\",\n  },\n  right: {\n    start: \"left-full top-0 ml-2\",\n    center: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n    end: \"left-full bottom-0 ml-2\",\n  },\n};\n\nconst arrowStyles: Record<HoverCardPosition, string> = {\n  top: \"bottom-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-white/70 dark:border-t-neutral-900/70\",\n  bottom:\n    \"top-[-6px] left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-white/70 dark:border-b-neutral-900/70\",\n  left: \"right-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-white/70 dark:border-l-neutral-900/70\",\n  right:\n    \"left-[-6px] top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-white/70 dark:border-r-neutral-900/70\",\n};\n\nconst motionVariants = {\n  top: {\n    initial: { opacity: 0, y: 5, scale: 0.98 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: 5, scale: 0.98 },\n  },\n  bottom: {\n    initial: { opacity: 0, y: -5, scale: 0.98 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: -5, scale: 0.98 },\n  },\n  left: {\n    initial: { opacity: 0, x: 5, scale: 0.98 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: 5, scale: 0.98 },\n  },\n  right: {\n    initial: { opacity: 0, x: -5, scale: 0.98 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: -5, scale: 0.98 },\n  },\n} as const;\n\nconst HoverCard = forwardRef<HTMLDivElement, HoverCardProps>(\n  (\n    {\n      children,\n      content,\n      position = \"bottom\",\n      align = \"center\",\n      openDelay = 200,\n      closeDelay = 150,\n      disabled = false,\n      className = \"\",\n      triggerClassName = \"\",\n      arrow = true,\n      width,\n      maxWidth = 320,\n    },\n    ref,\n  ) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const openTimeoutRef = useRef<any>(null);\n    const closeTimeoutRef = useRef<any>(null);\n\n    const clearTimeouts = useCallback(() => {\n      if (openTimeoutRef.current) {\n        clearTimeout(openTimeoutRef.current);\n        openTimeoutRef.current = null;\n      }\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current);\n        closeTimeoutRef.current = null;\n      }\n    }, []);\n\n    const handleMouseEnter = useCallback(() => {\n      if (disabled) return;\n      clearTimeouts();\n      openTimeoutRef.current = setTimeout(() => {\n        setIsOpen(true);\n      }, openDelay);\n    }, [disabled, openDelay, clearTimeouts]);\n\n    const handleMouseLeave = useCallback(() => {\n      clearTimeouts();\n      closeTimeoutRef.current = setTimeout(() => {\n        setIsOpen(false);\n      }, closeDelay);\n    }, [closeDelay, clearTimeouts]);\n\n    useEffect(() => {\n      return () => clearTimeouts();\n    }, [clearTimeouts]);\n\n    const resolvedWidth = width\n      ? typeof width === \"number\"\n        ? `${width}px`\n        : width\n      : \"max-content\";\n\n    const resolvedMaxWidth =\n      typeof maxWidth === \"number\" ? `${maxWidth}px` : maxWidth;\n\n    const cardContainerStyle: React.CSSProperties = {\n      width: resolvedWidth,\n      maxWidth: resolvedMaxWidth\n        ? `min(calc(100vw - 2rem), ${resolvedMaxWidth})`\n        : \"calc(100vw - 2rem)\",\n    };\n\n    const cardStyle: React.CSSProperties = {\n      width: width\n        ? typeof width === \"number\"\n          ? `${width}px`\n          : width\n        : \"100%\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`relative inline-block ${triggerClassName}`}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {children}\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              className={`\n                absolute z-50\n                ${positionStyles[position][align]}\n              `}\n              style={cardContainerStyle}\n              initial={motionVariants[position].initial}\n              animate={motionVariants[position].animate}\n              exit={motionVariants[position].exit}\n              transition={{ duration: 0.15, ease: \"easeOut\" }}\n            >\n              <div\n                className={`\n                  w-full\n                  bg-white/70 dark:bg-neutral-900/70\n                  backdrop-blur-xl\n                  rounded-xl shadow-2xl dark:shadow-neutral-950/50\n                  border border-white/40 dark:border-white/10\n                  p-4\n                  ${className}\n                `}\n                style={cardStyle}\n              >\n                {content}\n              </div>\n              {arrow && (\n                <span\n                  className={`\n                    absolute w-0 h-0 border-[6px]\n                    ${arrowStyles[position]}\n                  `}\n                />\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  },\n);\n\nHoverCard.displayName = \"HoverCard\";\n\nexport default HoverCard;\nexport { HoverCard };\n"],"mappings":"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"}