@blueshift-gg/ui-components 0.1.50 → 0.1.51

package/dist/Toast.d.mts

@@ -1,18 +1,28 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as IconName } from './Icon-CS8ZR20W.mjs';
+import { IconName } from "./icons/index.mjs";
+import "./Icon.mjs";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
 
+//#region src/Toast.d.ts
 type ToastProps = {
-    className?: string;
-    title: string;
-    description: string;
-    icon: IconName;
-    variant: "success" | "error" | "info";
-    clearable?: boolean;
+  className?: string;
+  title: string;
+  description: string;
+  icon: IconName;
+  variant: "success" | "error" | "info";
+  clearable?: boolean;
 };
-declare const Toast: ({ className, title, description, icon, variant, clearable, }: ToastProps) => react_jsx_runtime.JSX.Element;
+declare const Toast: ({
+  className,
+  title,
+  description,
+  icon,
+  variant,
+  clearable
+}: ToastProps) => react_jsx_runtime32.JSX.Element;
 declare const showToast: (props: Omit<ToastProps, "className">) => string | number;
 declare const showSuccessToast: (title: string, description: string) => string | number;
 declare const showErrorToast: (title: string, description: string) => string | number;
 declare const showInfoToast: (title: string, description: string) => string | number;
-
-export { Toast, type ToastProps, showErrorToast, showInfoToast, showSuccessToast, showToast };
+//#endregion
+export { Toast, ToastProps, showErrorToast, showInfoToast, showSuccessToast, showToast };
+//# sourceMappingURL=Toast.d.mts.map

package/dist/Toast.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.mts","names":[],"sources":["../src/Toast.tsx"],"sourcesContent":[],"mappings":";;;;;KAOY,UAAA;;;;EAAA,IAAA,EAIJ,QAJc;EAST,OAAA,EAmCZ,SAAA,GAAA,OAAA,GAAA,MAAA;EAnCqB,SAAA,CAAA,EAAA,OAAA;CAAA;AAAA,cAAT,KAAS,EAAA,CAAA;EAAA,SAAA;EAAA,KAAA;EAAA,WAAA;EAAA,IAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAOnB,UAPmB,EAAA,GAOT,mBAAA,CAAA,GAAA,CAAA,OAPS;AAAA,cAsCT,SAtCS,EAAA,CAAA,KAAA,EAsCW,IAtCX,CAsCgB,UAtChB,EAAA,WAAA,CAAA,EAAA,GAAA,MAAA,GAAA,MAAA;AAAA,cA6CT,gBA7CS,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,GAAA,MAAA,GAAA,MAAA;AAAA,cAsDT,cAtDS,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,GAAA,MAAA,GAAA,MAAA;AAOnB,cAwDU,aAxDV,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,GAAA,MAAA,GAAA,MAAA"}

package/dist/Toast.mjs

@@ -1,79 +1,76 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Icon } from './Icon';
-import classNames from 'classnames';
-import { CrosshairCorners } from './CrossHair';
-import { toast } from 'sonner';
+"use client";
 
-const Toast = ({
-  className,
-  title,
-  description,
-  icon,
-  variant,
-  clearable
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames(
-        "px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border",
-        variant === "success" && "text-state-success",
-        variant === "error" && "text-state-error",
-        variant === "info" && "text-shade-secondary",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent" }),
-        /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative", children: [
-          /* @__PURE__ */ jsx(
-            CrosshairCorners,
-            {
-              animationDelay: 0,
-              animationDuration: 0.5,
-              variant: "bordered",
-              size: 4,
-              spacingX: 1
-            }
-          ),
-          /* @__PURE__ */ jsx(Icon, { name: icon, className: "flex-shrink-0 text-current", size: 16 }),
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: title })
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm leading-[160%] font-medium text-shade-primary px-4", children: description })
-      ]
-    }
-  );
+import { Icon } from "./Icon.mjs";
+import { CrosshairCorners } from "./CrossHair.mjs";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+
+//#region src/Toast.tsx
+const Toast = ({ className, title, description, icon, variant, clearable }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border", variant === "success" && "text-state-success", variant === "error" && "text-state-error", variant === "info" && "text-shade-secondary", className),
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative",
+				children: [
+					/* @__PURE__ */ jsx(CrosshairCorners, {
+						animationDelay: 0,
+						animationDuration: .5,
+						variant: "bordered",
+						size: 4,
+						spacingX: 1
+					}),
+					/* @__PURE__ */ jsx(Icon, {
+						name: icon,
+						className: "flex-shrink-0 text-current",
+						size: 16
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-sm",
+						children: title
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm leading-[160%] font-medium text-shade-primary px-4",
+				children: description
+			})
+		]
+	});
 };
 const showToast = (props) => {
-  return toast.custom((t) => /* @__PURE__ */ jsx(Toast, { ...props }), {
-    duration: 4e3,
-    unstyled: true
-  });
+	return toast.custom((t) => /* @__PURE__ */ jsx(Toast, { ...props }), {
+		duration: 4e3,
+		unstyled: true
+	});
 };
 const showSuccessToast = (title, description) => {
-  return showToast({
-    title,
-    description,
-    icon: "SuccessCircle",
-    variant: "success"
-  });
+	return showToast({
+		title,
+		description,
+		icon: "SuccessCircle",
+		variant: "success"
+	});
 };
 const showErrorToast = (title, description) => {
-  return showToast({
-    title,
-    description,
-    icon: "Error",
-    variant: "error"
-  });
+	return showToast({
+		title,
+		description,
+		icon: "Error",
+		variant: "error"
+	});
 };
 const showInfoToast = (title, description) => {
-  return showToast({
-    title,
-    description,
-    icon: "Loading",
-    variant: "info"
-  });
+	return showToast({
+		title,
+		description,
+		icon: "Loading",
+		variant: "info"
+	});
 };
 
+//#endregion
 export { Toast, showErrorToast, showInfoToast, showSuccessToast, showToast };
-//# sourceMappingURL=Toast.mjs.map
 //# sourceMappingURL=Toast.mjs.map

package/dist/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Toast.tsx"],"names":[],"mappings":";;;;;;AAgBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,oIAAA;AAAA,QACA,YAAY,SAAA,IAAa,oBAAA;AAAA,QACzB,YAAY,OAAA,IAAW,kBAAA;AAAA,QACvB,YAAY,MAAA,IAAU,sBAAA;AAAA,QACtB;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iFAAA,EAAkF,CAAA;AAAA,wBACjG,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sFAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,cAAA,EAAgB,CAAA;AAAA,cAChB,iBAAA,EAAmB,GAAA;AAAA,cACnB,OAAA,EAAQ,UAAA;AAAA,cACR,IAAA,EAAM,CAAA;AAAA,cACN,QAAA,EAAU;AAAA;AAAA,WACZ;AAAA,8BACC,IAAA,EAAA,EAAK,IAAA,EAAM,MAAM,SAAA,EAAU,4BAAA,EAA6B,MAAM,EAAA,EAAI,CAAA;AAAA,0BACnE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC7C,CAAA;AAAA,wBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4DAAA,EACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;AAGO,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyC;AACjE,EAAA,OAAO,KAAA,CAAM,OAAO,CAAC,CAAA,yBAAO,KAAA,EAAA,EAAO,GAAG,OAAO,CAAA,EAAI;AAAA,IAC/C,QAAA,EAAU,GAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACX,CAAA;AACH;AAEO,MAAM,gBAAA,GAAmB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACtE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH;AAEO,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACpE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH;AAEO,MAAM,aAAA,GAAgB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACnE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,SAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH","file":"Toast.mjs","sourcesContent":["\"use client\";\n\nimport { Icon, IconName } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { toast } from \"sonner\";\n\nexport type ToastProps = {\n  className?: string;\n  title: string;\n  description: string;\n  icon: IconName;\n  variant: \"success\" | \"error\" | \"info\";\n  clearable?: boolean;\n};\n\nexport const Toast = ({\n  className,\n  title,\n  description,\n  icon,\n  variant,\n  clearable,\n}: ToastProps) => {\n  return (\n    <div\n      className={classNames(\n        \"px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border\",\n        variant === \"success\" && \"text-state-success\",\n        variant === \"error\" && \"text-state-error\",\n        variant === \"info\" && \"text-shade-secondary\",\n        className\n      )}\n    >\n      <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n      <div className=\"px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative\">\n        <CrosshairCorners\n          animationDelay={0}\n          animationDuration={0.5}\n          variant=\"bordered\"\n          size={4}\n          spacingX={1}\n        />\n        <Icon name={icon} className=\"flex-shrink-0 text-current\" size={16} />\n        <span className=\"font-mono text-sm\">{title}</span>\n      </div>\n      <p className=\"text-sm leading-[160%] font-medium text-shade-primary px-4\">\n        {description}\n      </p>\n    </div>\n  );\n};\n\n// Sonner integration helpers\nexport const showToast = (props: Omit<ToastProps, \"className\">) => {\n  return toast.custom((t) => <Toast {...props} />, {\n    duration: 4000,\n    unstyled: true,\n  });\n};\n\nexport const showSuccessToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"SuccessCircle\",\n    variant: \"success\",\n  });\n};\n\nexport const showErrorToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Error\",\n    variant: \"error\",\n  });\n};\n\nexport const showInfoToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Loading\",\n    variant: \"info\",\n  });\n};\n"]}
+{"version":3,"file":"Toast.mjs","names":[],"sources":["../src/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon, IconName } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { toast } from \"sonner\";\n\nexport type ToastProps = {\n  className?: string;\n  title: string;\n  description: string;\n  icon: IconName;\n  variant: \"success\" | \"error\" | \"info\";\n  clearable?: boolean;\n};\n\nexport const Toast = ({\n  className,\n  title,\n  description,\n  icon,\n  variant,\n  clearable,\n}: ToastProps) => {\n  return (\n    <div\n      className={classNames(\n        \"px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border\",\n        variant === \"success\" && \"text-state-success\",\n        variant === \"error\" && \"text-state-error\",\n        variant === \"info\" && \"text-shade-secondary\",\n        className\n      )}\n    >\n      <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n      <div className=\"px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative\">\n        <CrosshairCorners\n          animationDelay={0}\n          animationDuration={0.5}\n          variant=\"bordered\"\n          size={4}\n          spacingX={1}\n        />\n        <Icon name={icon} className=\"flex-shrink-0 text-current\" size={16} />\n        <span className=\"font-mono text-sm\">{title}</span>\n      </div>\n      <p className=\"text-sm leading-[160%] font-medium text-shade-primary px-4\">\n        {description}\n      </p>\n    </div>\n  );\n};\n\n// Sonner integration helpers\nexport const showToast = (props: Omit<ToastProps, \"className\">) => {\n  return toast.custom((t) => <Toast {...props} />, {\n    duration: 4000,\n    unstyled: true,\n  });\n};\n\nexport const showSuccessToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"SuccessCircle\",\n    variant: \"success\",\n  });\n};\n\nexport const showErrorToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Error\",\n    variant: \"error\",\n  });\n};\n\nexport const showInfoToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Loading\",\n    variant: \"info\",\n  });\n};\n"],"mappings":";;;;;;;;;AAgBA,MAAa,SAAS,EACpB,WACA,OACA,aACA,MACA,SACA,gBACgB;AAChB,QACE,qBAAC;EACC,WAAW,WACT,sIACA,YAAY,aAAa,sBACzB,YAAY,WAAW,oBACvB,YAAY,UAAU,wBACtB,UACD;;GAED,oBAAC,SAAI,WAAU,oFAAwF;GACvG,qBAAC;IAAI,WAAU;;KACb,oBAAC;MACC,gBAAgB;MAChB,mBAAmB;MACnB,SAAQ;MACR,MAAM;MACN,UAAU;OACV;KACF,oBAAC;MAAK,MAAM;MAAM,WAAU;MAA6B,MAAM;OAAM;KACrE,oBAAC;MAAK,WAAU;gBAAqB;OAAa;;KAC9C;GACN,oBAAC;IAAE,WAAU;cACV;KACC;;GACA;;AAKV,MAAa,aAAa,UAAyC;AACjE,QAAO,MAAM,QAAQ,MAAM,oBAAC,SAAM,GAAI,QAAS,EAAE;EAC/C,UAAU;EACV,UAAU;EACX,CAAC;;AAGJ,MAAa,oBAAoB,OAAe,gBAAwB;AACtE,QAAO,UAAU;EACf;EACA;EACA,MAAM;EACN,SAAS;EACV,CAAC;;AAGJ,MAAa,kBAAkB,OAAe,gBAAwB;AACpE,QAAO,UAAU;EACf;EACA;EACA,MAAM;EACN,SAAS;EACV,CAAC;;AAGJ,MAAa,iBAAiB,OAAe,gBAAwB;AACnE,QAAO,UAAU;EACf;EACA;EACA,MAAM;EACN,SAAS;EACV,CAAC"}

package/dist/Tooltip.cjs

@@ -0,0 +1,149 @@
+"use client";
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_CrossHair = require('./CrossHair.cjs');
+const require_utils_easings = require('./utils/easings.cjs');
+let motion_react = require("motion/react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/Tooltip.tsx
+const Tooltip = ({ description, position, isOpen }) => {
+	const getPositionBasedAnimation = (position$1) => {
+		const baseAnimation = {
+			animate: {
+				opacity: 1,
+				y: 0,
+				x: 0,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .9
+			},
+			transition: {
+				duration: .15,
+				ease: require_utils_easings.crisp,
+				delay: .15
+			}
+		};
+		if (position$1.startsWith("bottom")) return {
+			...baseAnimation,
+			initial: {
+				opacity: 0,
+				y: -10,
+				scale: .9
+			},
+			exit: {
+				...baseAnimation.exit,
+				y: -10
+			}
+		};
+		else if (position$1.startsWith("top")) return {
+			...baseAnimation,
+			initial: {
+				opacity: 0,
+				y: 10,
+				scale: .9
+			},
+			exit: {
+				...baseAnimation.exit,
+				y: 10
+			}
+		};
+		else if (position$1.startsWith("center-left")) return {
+			...baseAnimation,
+			initial: {
+				opacity: 0,
+				x: 10,
+				scale: .9
+			},
+			exit: {
+				...baseAnimation.exit,
+				x: 10
+			}
+		};
+		else if (position$1.startsWith("center-right")) return {
+			...baseAnimation,
+			initial: {
+				opacity: 0,
+				x: -10,
+				scale: .9
+			},
+			exit: {
+				...baseAnimation.exit,
+				x: -10
+			}
+		};
+		return {
+			...baseAnimation,
+			initial: {
+				opacity: 0,
+				y: -10,
+				scale: .9
+			},
+			exit: {
+				...baseAnimation.exit,
+				y: -10
+			}
+		};
+	};
+	const animations = getPositionBasedAnimation(position);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.motion.div, {
+		...animations,
+		className: (0, classnames.default)("z-50 absolute font-medium w-max max-w-[200px] px-2.5 pt-1.5 pb-2 bg-card-foreground gradient-border before:bg-border text-xs leading-[150%] text-shade-tertiary", "after:absolute after:bg-border", !position.startsWith("center") && "after:!w-[10px] after:!h-[5px]", position.startsWith("center") && "after:!h-[10px] after:!w-[5px]", getTooltipPosition(position), getArrowPosition(position)),
+		style: { transformOrigin: getTransformOrigin(position) },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute inset-0.5",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CrossHair.CrosshairCorners, {
+				size: 4,
+				variant: "corners",
+				className: "text-shade-mute",
+				animationDelay: .15,
+				animationDuration: .75,
+				corners: position === "top-left" || position === "bottom-right" ? ["bottom-left", "top-right"] : ["bottom-right", "top-left"]
+			})
+		}), description]
+	}, position) });
+};
+const getTooltipPosition = (position) => {
+	switch (position) {
+		case "top-right": return "bottom-[calc(100%+6px)] left-1/2 mb-1";
+		case "top-center": return "bottom-[calc(100%+6px)] left-1/2 -translate-x-1/2 mb-1";
+		case "top-left": return "bottom-[calc(100%+6px)] right-1/2 mb-1";
+		case "bottom-right": return "top-[calc(100%+6px)] left-1/2 mt-1";
+		case "bottom-center": return "top-[calc(100%+6px)] left-1/2 -translate-x-1/2 mt-1";
+		case "bottom-left": return "top-[calc(100%+6px)] right-1/2 mt-1";
+		case "center-left": return "right-[calc(100%+6px)] top-1/2 -translate-y-1/2 mr-1";
+		case "center-right": return "left-[calc(100%+6px)] top-1/2 -translate-y-1/2 ml-1";
+	}
+};
+const getTransformOrigin = (position) => {
+	switch (position) {
+		case "bottom-right": return "bottom left";
+		case "bottom-center": return "bottom center";
+		case "bottom-left": return "bottom right";
+		case "top-right": return "top left";
+		case "top-center": return "top center";
+		case "top-left": return "top right";
+		case "center-left": return "center right";
+		case "center-right": return "center left";
+	}
+};
+const getArrowPosition = (position) => {
+	switch (position) {
+		case "bottom-right": return "after:top-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_0%,100%_100%,0%_100%,0%_0%)]";
+		case "bottom-center": return "after:top-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_0%,0%_100%,100%_100%)]";
+		case "bottom-left": return "after:top-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_0%,0%_100%,100%_100%,100%_0%)]";
+		case "top-right": return "after:bottom-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_100%,100%_0%,0%_0%,0%_100%)]";
+		case "top-center": return "after:bottom-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_100%,0%_0%,100%_0%)]";
+		case "top-left": return "after:bottom-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_100%,0%_0%,100%_0%,100%_100%)]";
+		case "center-right": return "after:top-1/2 after:left-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(100%_0%,0%_50%,100%_100%)]";
+		case "center-left": return "after:top-1/2 after:right-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(0%_0%,100%_50%,0%_100%)]";
+	}
+};
+
+//#endregion
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs","names":["crisp","position","AnimatePresence","motion","CrosshairCorners"],"sources":["../src/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { crisp, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TooltipProps = {\n  description: string;\n  isOpen?: boolean;\n  position:\n    | \"top-left\"\n    | \"top-center\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-center\"\n    | \"bottom-right\"\n    | \"center-left\"\n    | \"center-right\";\n};\n\nexport const Tooltip = ({ description, position, isOpen }: TooltipProps) => {\n  const getPositionBasedAnimation = (position: TooltipProps[\"position\"]) => {\n    const baseAnimation = {\n      animate: { opacity: 1, y: 0, x: 0, scale: 1 },\n      exit: { opacity: 0, scale: 0.9 },\n      transition: { duration: 0.15, ease: crisp, delay: 0.15 },\n    };\n\n    if (position.startsWith(\"bottom\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, y: -10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, y: -10 },\n      };\n    } else if (position.startsWith(\"top\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, y: 10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, y: 10 },\n      };\n    } else if (position.startsWith(\"center-left\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, x: 10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, x: 10 },\n      };\n    } else if (position.startsWith(\"center-right\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, x: -10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, x: -10 },\n      };\n    }\n\n    // Fallback to default animation\n    return {\n      ...baseAnimation,\n      initial: { opacity: 0, y: -10, scale: 0.9 },\n      exit: { ...baseAnimation.exit, y: -10 },\n    };\n  };\n\n  const animations = getPositionBasedAnimation(position);\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          key={position}\n          {...animations}\n          className={classNames(\n            \"z-50 absolute font-medium w-max max-w-[200px] px-2.5 pt-1.5 pb-2 bg-card-foreground gradient-border before:bg-border text-xs leading-[150%] text-shade-tertiary\",\n            \"after:absolute after:bg-border\",\n            !position.startsWith(\"center\") && \"after:!w-[10px] after:!h-[5px]\",\n            position.startsWith(\"center\") && \"after:!h-[10px] after:!w-[5px]\",\n            getTooltipPosition(position),\n            getArrowPosition(position)\n          )}\n          style={{ transformOrigin: getTransformOrigin(position) }}\n        >\n          <div className=\"absolute inset-0.5\">\n            <CrosshairCorners\n              size={4}\n              variant=\"corners\"\n              className=\"text-shade-mute\"\n              animationDelay={0.15}\n              animationDuration={0.75}\n              corners={\n                position === \"top-left\" || position === \"bottom-right\"\n                  ? [\"bottom-left\", \"top-right\"]\n                  : [\"bottom-right\", \"top-left\"]\n              }\n            />\n          </div>\n          {description}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nconst getTooltipPosition = (position: TooltipProps[\"position\"]) => {\n  switch (position) {\n    case \"top-right\":\n      return \"bottom-[calc(100%+6px)] left-1/2 mb-1\";\n    case \"top-center\":\n      return \"bottom-[calc(100%+6px)] left-1/2 -translate-x-1/2 mb-1\";\n    case \"top-left\":\n      return \"bottom-[calc(100%+6px)] right-1/2 mb-1\";\n    case \"bottom-right\":\n      return \"top-[calc(100%+6px)] left-1/2 mt-1\";\n    case \"bottom-center\":\n      return \"top-[calc(100%+6px)] left-1/2 -translate-x-1/2 mt-1\";\n    case \"bottom-left\":\n      return \"top-[calc(100%+6px)] right-1/2 mt-1\";\n    case \"center-left\":\n      return \"right-[calc(100%+6px)] top-1/2 -translate-y-1/2 mr-1\";\n    case \"center-right\":\n      return \"left-[calc(100%+6px)] top-1/2 -translate-y-1/2 ml-1\";\n  }\n};\n\nconst getTransformOrigin = (position: TooltipProps[\"position\"]) => {\n  switch (position) {\n    case \"bottom-right\":\n      return \"bottom left\";\n    case \"bottom-center\":\n      return \"bottom center\";\n    case \"bottom-left\":\n      return \"bottom right\";\n    case \"top-right\":\n      return \"top left\";\n    case \"top-center\":\n      return \"top center\";\n    case \"top-left\":\n      return \"top right\";\n    case \"center-left\":\n      return \"center right\";\n    case \"center-right\":\n      return \"center left\";\n  }\n};\n\nconst getArrowPosition = (position: TooltipProps[\"position\"]) => {\n  switch (position) {\n    case \"bottom-right\":\n      return \"after:top-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_0%,100%_100%,0%_100%,0%_0%)]\";\n    case \"bottom-center\":\n      return \"after:top-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_0%,0%_100%,100%_100%)]\";\n    case \"bottom-left\":\n      return \"after:top-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_0%,0%_100%,100%_100%,100%_0%)]\";\n    case \"top-right\":\n      return \"after:bottom-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_100%,100%_0%,0%_0%,0%_100%)]\";\n    case \"top-center\":\n      return \"after:bottom-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_100%,0%_0%,100%_0%)]\";\n    case \"top-left\":\n      return \"after:bottom-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_100%,0%_0%,100%_0%,100%_100%)]\";\n    case \"center-right\":\n      return \"after:top-1/2 after:left-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(100%_0%,0%_50%,100%_100%)]\";\n    case \"center-left\":\n      return \"after:top-1/2 after:right-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(0%_0%,100%_50%,0%_100%)]\";\n  }\n};\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,WAAW,EAAE,aAAa,UAAU,aAA2B;CAC1E,MAAM,6BAA6B,eAAuC;EACxE,MAAM,gBAAgB;GACpB,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG,GAAG;IAAG,OAAO;IAAG;GAC7C,MAAM;IAAE,SAAS;IAAG,OAAO;IAAK;GAChC,YAAY;IAAE,UAAU;IAAM,MAAMA;IAAO,OAAO;IAAM;GACzD;AAED,MAAIC,WAAS,WAAW,SAAS,CAC/B,QAAO;GACL,GAAG;GACH,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK,OAAO;IAAK;GAC3C,MAAM;IAAE,GAAG,cAAc;IAAM,GAAG;IAAK;GACxC;WACQA,WAAS,WAAW,MAAM,CACnC,QAAO;GACL,GAAG;GACH,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,OAAO;IAAK;GAC1C,MAAM;IAAE,GAAG,cAAc;IAAM,GAAG;IAAI;GACvC;WACQA,WAAS,WAAW,cAAc,CAC3C,QAAO;GACL,GAAG;GACH,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,OAAO;IAAK;GAC1C,MAAM;IAAE,GAAG,cAAc;IAAM,GAAG;IAAI;GACvC;WACQA,WAAS,WAAW,eAAe,CAC5C,QAAO;GACL,GAAG;GACH,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK,OAAO;IAAK;GAC3C,MAAM;IAAE,GAAG,cAAc;IAAM,GAAG;IAAK;GACxC;AAIH,SAAO;GACL,GAAG;GACH,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK,OAAO;IAAK;GAC3C,MAAM;IAAE,GAAG,cAAc;IAAM,GAAG;IAAK;GACxC;;CAGH,MAAM,aAAa,0BAA0B,SAAS;AAEtD,QACE,2CAACC,0CACE,UACC,4CAACC,oBAAO;EAEN,GAAI;EACJ,mCACE,mKACA,kCACA,CAAC,SAAS,WAAW,SAAS,IAAI,kCAClC,SAAS,WAAW,SAAS,IAAI,kCACjC,mBAAmB,SAAS,EAC5B,iBAAiB,SAAS,CAC3B;EACD,OAAO,EAAE,iBAAiB,mBAAmB,SAAS,EAAE;aAExD,2CAAC;GAAI,WAAU;aACb,2CAACC;IACC,MAAM;IACN,SAAQ;IACR,WAAU;IACV,gBAAgB;IAChB,mBAAmB;IACnB,SACE,aAAa,cAAc,aAAa,iBACpC,CAAC,eAAe,YAAY,GAC5B,CAAC,gBAAgB,WAAW;KAElC;IACE,EACL;IA1BI,SA2BM,GAEC;;AAItB,MAAM,sBAAsB,aAAuC;AACjE,SAAQ,UAAR;EACE,KAAK,YACH,QAAO;EACT,KAAK,aACH,QAAO;EACT,KAAK,WACH,QAAO;EACT,KAAK,eACH,QAAO;EACT,KAAK,gBACH,QAAO;EACT,KAAK,cACH,QAAO;EACT,KAAK,cACH,QAAO;EACT,KAAK,eACH,QAAO;;;AAIb,MAAM,sBAAsB,aAAuC;AACjE,SAAQ,UAAR;EACE,KAAK,eACH,QAAO;EACT,KAAK,gBACH,QAAO;EACT,KAAK,cACH,QAAO;EACT,KAAK,YACH,QAAO;EACT,KAAK,aACH,QAAO;EACT,KAAK,WACH,QAAO;EACT,KAAK,cACH,QAAO;EACT,KAAK,eACH,QAAO;;;AAIb,MAAM,oBAAoB,aAAuC;AAC/D,SAAQ,UAAR;EACE,KAAK,eACH,QAAO;EACT,KAAK,gBACH,QAAO;EACT,KAAK,cACH,QAAO;EACT,KAAK,YACH,QAAO;EACT,KAAK,aACH,QAAO;EACT,KAAK,WACH,QAAO;EACT,KAAK,eACH,QAAO;EACT,KAAK,cACH,QAAO"}

package/dist/Tooltip.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+
+//#region src/Tooltip.d.ts
+type TooltipProps = {
+  description: string;
+  isOpen?: boolean;
+  position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-right";
+};
+declare const Tooltip: ({
+  description,
+  position,
+  isOpen
+}: TooltipProps) => react_jsx_runtime8.JSX.Element;
+//#endregion
+export { Tooltip, TooltipProps };
+//# sourceMappingURL=Tooltip.d.cts.map

package/dist/Tooltip.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.cts","names":[],"sources":["../src/Tooltip.tsx"],"sourcesContent":[],"mappings":";;;KAOY,YAAA;;;EAAA,QAAA,EAAA,UAAY,GAAA,YAAA,GAAA,WAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA;AAcxB,CAAA;AAAwB,cAAX,OAAW,EAAA,CAAA;EAAA,WAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAAmC,YAAnC,EAAA,GAA+C,kBAAA,CAAA,GAAA,CAAA,OAA/C"}

package/dist/Tooltip.d.mts

@@ -1,10 +1,16 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 
+//#region src/Tooltip.d.ts
 type TooltipProps = {
-    description: string;
-    isOpen?: boolean;
-    position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-right";
+  description: string;
+  isOpen?: boolean;
+  position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-right";
 };
-declare const Tooltip: ({ description, position, isOpen }: TooltipProps) => react_jsx_runtime.JSX.Element;
-
-export { Tooltip, type TooltipProps };
+declare const Tooltip: ({
+  description,
+  position,
+  isOpen
+}: TooltipProps) => react_jsx_runtime36.JSX.Element;
+//#endregion
+export { Tooltip, TooltipProps };
+//# sourceMappingURL=Tooltip.d.mts.map

package/dist/Tooltip.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.mts","names":[],"sources":["../src/Tooltip.tsx"],"sourcesContent":[],"mappings":";;;KAOY,YAAA;;;EAAA,QAAA,EAAA,UAAY,GAAA,YAAA,GAAA,WAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA;AAcxB,CAAA;AAAwB,cAAX,OAAW,EAAA,CAAA;EAAA,WAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAAmC,YAAnC,EAAA,GAA+C,mBAAA,CAAA,GAAA,CAAA,OAA/C"}