@deepnoid/ui 0.0.112 → 0.1.0

package/dist/components/tooltip/index.js

@@ -1,9 +1,14 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,8 +21,84 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/util/createPlugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// ../../node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/public/create-plugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    var _createPlugin = /* @__PURE__ */ _interop_require_default(require_createPlugin());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// ../../node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "../../node_modules/tailwindcss/plugin.js"(exports2, module2) {
+    "use strict";
+    var createPlugin = require_create_plugin();
+    module2.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+
 // src/components/tooltip/index.ts
 var tooltip_exports = {};
 __export(tooltip_exports, {
@@ -31,19 +112,226 @@ var import_react_dom = require("react-dom");
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
-var COMMON_SIZE = ["sm", "md", "lg"];
-var COMMON_RADIUS = ["xlg", "xxlg", "none", "full"];
-var COMMON_FONTSIZE = ["h1", "h2", "h3", "h4", "h5"];
-var COMMON_SHADOW = ["inner", "drop"];
+
+// ../tailwind-config/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// ../tailwind-config/src/typography/font.ts
+var fontSize = {
+  h1: [
+    "40px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ]
+};
+
+// ../tailwind-config/src/animation/slide.ts
+var sliceAnimation = {
+  slideInFromTop: "slideInFromTop 0.5s ease-out",
+  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
+  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
+  slideInFromRight: "slideInFromRight 0.5s ease-out",
+  slideOutToTop: "slideOutToTop 0.5s ease-in",
+  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
+  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
+  slideOutToRight: "slideOutToRight 0.5s ease-in"
+};
+var sliceKeyframe = {
+  slideInFromTop: {
+    "0%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromBottom: {
+    "0%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromLeft: {
+    "0%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromRight: {
+    "0%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideOutToTop: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToBottom: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToLeft: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToRight: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    }
+  }
+};
+
+// ../tailwind-config/src/animation/index.ts
+var animation = { ...sliceAnimation };
+var keyframes = { ...sliceKeyframe };
+
+// ../tailwind-config/src/shadow/index.ts
+var boxShadow = {
+  "border-1": "inner 0 0 0 1px inset",
+  "border-2": "inner 0 0 0 2px inset",
+  "border-3": "inner 0 0 0 3px inset",
+  "border-4": "inner 0 0 0 4px inset",
+  "border-5": "inner 0 0 0 5px inset",
+  "border-6": "inner 0 0 0 6px inset",
+  "border-7": "inner 0 0 0 7px inset",
+  "border-8": "inner 0 0 0 8px inset",
+  "border-9": "inner 0 0 0 9px inset",
+  "border-10": "inner 0 0 0 10px inset",
+  inner: "inset 0 4px 8px 0 rgba(36, 39, 44, 0.2)",
+  drop: "0 20px 40px 0 rgba(36, 39, 44, 0.2)"
+};
+
+// ../tailwind-config/src/border/radius.ts
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px",
+  none: "0",
+  full: "9999px"
+};
+
+// ../tailwind-config/src/space/gap.ts
+var gap = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px"
+};
+
+// src/utils/tailwind-variants.ts
+function typedKeys(obj) {
+  return Object.keys(obj);
+}
+var COMMON_SIZE = ["sm", "md", "lg", "xl"];
 var tv = (0, import_tailwind_variants.createTV)({
-  // twMerge: false,
   twMergeConfig: {
     classGroups: {
-      fontSize: [{ text: [...COMMON_SIZE, ...COMMON_FONTSIZE] }],
-      borderRadius: [{ rounded: [...COMMON_RADIUS, ...COMMON_SIZE] }],
-      boxShadow: [{ shadow: [...COMMON_SHADOW] }],
+      fontSize: [{ text: [...typedKeys(fontSize)] }],
+      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
+      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
       padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...COMMON_SIZE] }]
+      gap: [{ gap: [...typedKeys(gap)] }]
     }
   }
 });
@@ -68,9 +356,6 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
-// src/components/tooltip/useTooltip.ts
-var import_react = require("react");
-
 // src/components/tooltip/tooltip-utils.ts
 var getTooltipPosition = (placement, targetRect, width, height, offset) => {
   let tooltipX = 0, tooltipY = 0;
@@ -126,8 +411,72 @@ var getTooltipPosition = (placement, targetRect, width, height, offset) => {
   }
   return { tooltipX, tooltipY };
 };
+var OFFSET = -4;
+var EDGE_GAP = 12;
+var getTailClassName = (placement) => {
+  switch (placement) {
+    case "top":
+      return `bottom-[${OFFSET}px] left-1/2 -translate-x-1/2`;
+    case "bottom":
+      return `top-[${OFFSET}px] left-1/2 -translate-x-1/2`;
+    case "left":
+      return `right-[${OFFSET}px] top-1/2 -translate-y-1/2`;
+    case "right":
+      return `left-[${OFFSET}px] top-1/2 -translate-y-1/2`;
+    case "top-start":
+      return `bottom-[${OFFSET}px] left-[${EDGE_GAP}px]`;
+    case "top-end":
+      return `bottom-[${OFFSET}px] right-[${EDGE_GAP}px]`;
+    case "bottom-start":
+      return `top-[${OFFSET}px] left-[${EDGE_GAP}px]`;
+    case "bottom-end":
+      return `top-[${OFFSET}px] right-[${EDGE_GAP}px]`;
+    case "left-start":
+      return `right-[${OFFSET}px] top-[${EDGE_GAP}px]`;
+    case "left-end":
+      return `right-[${OFFSET}px] bottom-[${EDGE_GAP}px]`;
+    case "right-start":
+      return `left-[${OFFSET}px] top-[${EDGE_GAP}px]`;
+    case "right-end":
+      return `left-[${OFFSET}px] bottom-[${EDGE_GAP}px]`;
+    default:
+      return "";
+  }
+};
+var getTailStyles = (placement) => {
+  switch (placement) {
+    case "top":
+      return { bottom: OFFSET };
+    case "bottom":
+      return { top: OFFSET };
+    case "left":
+      return { right: OFFSET };
+    case "right":
+      return { left: OFFSET };
+    case "top-start":
+      return { bottom: OFFSET, left: EDGE_GAP };
+    case "top-end":
+      return { bottom: OFFSET, right: EDGE_GAP };
+    case "bottom-start":
+      return { top: OFFSET, left: EDGE_GAP };
+    case "bottom-end":
+      return { top: OFFSET, right: EDGE_GAP };
+    case "left-start":
+      return { right: OFFSET, top: EDGE_GAP };
+    case "left-end":
+      return { right: OFFSET, bottom: EDGE_GAP };
+    case "right-start":
+      return { left: OFFSET, top: EDGE_GAP };
+    case "right-end":
+      return { left: OFFSET, bottom: EDGE_GAP };
+    default:
+      console.warn(`Invalid placement: ${placement}. Returning empty style.`);
+      return {};
+  }
+};
 
 // src/components/tooltip/useTooltip.ts
+var import_react = require("react");
 var useTooltip = ({ placement, offset, targetRect }) => {
   const [tooltipPosition, setTooltipPosition] = (0, import_react.useState)({ x: 0, y: 0 });
   const tooltipRef = (0, import_react.useRef)(null);
@@ -163,27 +512,27 @@ var useTooltip = ({ placement, offset, targetRect }) => {
 // src/components/tooltip/tooltip.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
-  const { placement = "bottom", offset = 5, delay = 100, classNames, ...tooltipProps } = props;
-  const slots = (0, import_react2.useMemo)(() => tooltip({ ...variantProps }), [variantProps]);
+  const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
+  const { placement = "top", offset = 5, delay = 100, persistent = false, classNames } = props;
+  const slots = (0, import_react2.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
   const [targetRect, setTargetRect] = (0, import_react2.useState)(null);
-  const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, delay, targetRect });
+  const { tooltipPosition, tooltipRef } = useTooltip({
+    placement,
+    offset,
+    delay,
+    targetRect
+  });
   const childrenRef = (0, import_react2.useRef)(null);
-  const delayTimeout = (0, import_react2.useRef)(null);
-  const getBaseProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames == null ? void 0 : classNames.base]
-  );
-  const getContentProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content })
+  const delayTimeoutRef = (0, import_react2.useRef)(null);
+  const getProps = (0, import_react2.useCallback)(
+    (slotKey, classNameKey) => ({
+      className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
     }),
-    [slots, classNames == null ? void 0 : classNames.content]
+    [slots, classNames]
   );
-  const handleMouseEnter = (0, import_react2.useCallback)(() => {
-    if (delayTimeout.current) clearTimeout(delayTimeout.current);
+  const getBaseProps = (0, import_react2.useCallback)(() => getProps("base", "base"), [getProps]);
+  const getContentProps = (0, import_react2.useCallback)(() => getProps("content", "content"), [getProps]);
+  const showTooltip = (0, import_react2.useCallback)(() => {
     if (childrenRef.current) {
       const rect = childrenRef.current.getBoundingClientRect();
       setTargetRect({
@@ -196,35 +545,53 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
       });
     }
   }, []);
-  const handleMouseLeave = (0, import_react2.useCallback)(() => {
-    delayTimeout.current = window.setTimeout(() => setTargetRect(null), delay);
-  }, [delay]);
+  const hideTooltip = (0, import_react2.useCallback)(() => {
+    if (!persistent) {
+      delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
+    }
+  }, [persistent, delay]);
+  (0, import_react2.useEffect)(() => {
+    if (persistent) showTooltip();
+  }, [persistent, showTooltip]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
-        ref: ref || childrenRef,
+        ref: (node) => {
+          if (ref) {
+            if (typeof ref === "function") ref(node);
+            else ref.current = node;
+          }
+          childrenRef.current = node;
+        },
         ...getBaseProps(),
-        onPointerLeave: handleMouseLeave,
-        onPointerEnter: handleMouseEnter,
+        onPointerEnter: !persistent ? showTooltip : void 0,
+        onPointerLeave: !persistent ? hideTooltip : void 0,
         children: props.children
       }
     ),
     targetRect && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           ref: tooltipRef,
           ...getContentProps(),
-          onPointerEnter: () => {
-            if (delayTimeout.current) clearTimeout(delayTimeout.current);
-          },
-          onPointerLeave: handleMouseLeave,
+          onPointerEnter: !persistent ? () => delayTimeoutRef.current && clearTimeout(delayTimeoutRef.current) : void 0,
+          onPointerLeave: !persistent ? hideTooltip : void 0,
           style: {
-            visibility: tooltipPosition.x !== 0 ? "visible" : "hidden",
+            visibility: "visible",
             transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
           },
-          children: props.content
+          children: [
+            props.content,
+            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
+                style: getTailStyles(placement)
+              }
+            )
+          ]
         }
       ),
       document.body
@@ -233,7 +600,7 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
 });
 Tooltip.displayName = "Tooltip";
 var tooltip_default = Tooltip;
-var tooltip = tv({
+var tooltipStyle = tv({
   slots: {
     base: ["z-0", "relative", "bg-transparent"],
     content: [
@@ -244,26 +611,26 @@ var tooltip = tv({
       "items-center",
       "justify-center",
       "font-[500]",
-      "text-white",
-      "bg-trans-strong"
+      "text-common-white",
+      "bg-common-black"
     ]
   },
   variants: {
     size: {
-      sm: { content: "text-sm rounded-sm px-[6px] py-[4.5px]" },
-      md: { content: "text-md rounded-md px-[8px] py-[6.5px]" },
-      lg: { content: "text-lg rounded-lg px-[10px] py-[8px]" }
+      sm: { content: ["text-sm", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      md: { content: ["text-md", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      lg: { content: ["text-lg", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      xl: { content: ["text-xl", "rounded-[5px]", "px-[10px]", "py-[6px]"] }
     },
-    disableAnimation: {
-      true: {
-        base: "animate-none"
-      }
+    tail: {
+      true: { content: [] },
+      false: {}
     }
   },
   defaultVariants: {
-    color: "default",
     size: "md",
-    disableAnimation: false
+    placement: "top",
+    tail: false
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/tooltip/index.mjs

@@ -2,12 +2,12 @@
 import "../../chunk-HIE2YRGA.mjs";
 import {
   tooltip_default
-} from "../../chunk-U74WK5VI.mjs";
-import "../../chunk-KCBBBRSF.mjs";
-import "../../chunk-ODMRJXLJ.mjs";
+} from "../../chunk-RRL6KBU4.mjs";
+import "../../chunk-ZMOAFSYE.mjs";
+import "../../chunk-WSIADHVC.mjs";
+import "../../chunk-IE2BRM7Z.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-J725QONZ.mjs";
-import "../../chunk-IZ6II3QA.mjs";
+import "../../chunk-AC6TWLRT.mjs";
 export {
   tooltip_default as Tooltip
 };

package/dist/components/tooltip/tooltip-utils.d.mts

@@ -1,2 +1,2 @@
-export { T as TooltipPlacement, g as getTooltipPosition } from '../../tooltip-utils-DR0UEfBN.mjs';
 import 'react';
+export { T as TooltipPlacement, b as getTailClassName, c as getTailStyles, g as getTooltipPosition } from '../../tooltip-utils-DO3LQaVM.mjs';

package/dist/components/tooltip/tooltip-utils.d.ts

@@ -1,2 +1,2 @@
-export { T as TooltipPlacement, g as getTooltipPosition } from '../../tooltip-utils-DR0UEfBN.js';
 import 'react';
+export { T as TooltipPlacement, b as getTailClassName, c as getTailStyles, g as getTooltipPosition } from '../../tooltip-utils-DO3LQaVM.js';

package/dist/components/tooltip/tooltip-utils.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/tooltip/tooltip-utils.ts
 var tooltip_utils_exports = {};
 __export(tooltip_utils_exports, {
+  getTailClassName: () => getTailClassName,
+  getTailStyles: () => getTailStyles,
   getTooltipPosition: () => getTooltipPosition
 });
 module.exports = __toCommonJS(tooltip_utils_exports);
@@ -78,7 +80,72 @@ var getTooltipPosition = (placement, targetRect, width, height, offset) => {
   }
   return { tooltipX, tooltipY };
 };
+var OFFSET = -4;
+var EDGE_GAP = 12;
+var getTailClassName = (placement) => {
+  switch (placement) {
+    case "top":
+      return `bottom-[${OFFSET}px] left-1/2 -translate-x-1/2`;
+    case "bottom":
+      return `top-[${OFFSET}px] left-1/2 -translate-x-1/2`;
+    case "left":
+      return `right-[${OFFSET}px] top-1/2 -translate-y-1/2`;
+    case "right":
+      return `left-[${OFFSET}px] top-1/2 -translate-y-1/2`;
+    case "top-start":
+      return `bottom-[${OFFSET}px] left-[${EDGE_GAP}px]`;
+    case "top-end":
+      return `bottom-[${OFFSET}px] right-[${EDGE_GAP}px]`;
+    case "bottom-start":
+      return `top-[${OFFSET}px] left-[${EDGE_GAP}px]`;
+    case "bottom-end":
+      return `top-[${OFFSET}px] right-[${EDGE_GAP}px]`;
+    case "left-start":
+      return `right-[${OFFSET}px] top-[${EDGE_GAP}px]`;
+    case "left-end":
+      return `right-[${OFFSET}px] bottom-[${EDGE_GAP}px]`;
+    case "right-start":
+      return `left-[${OFFSET}px] top-[${EDGE_GAP}px]`;
+    case "right-end":
+      return `left-[${OFFSET}px] bottom-[${EDGE_GAP}px]`;
+    default:
+      return "";
+  }
+};
+var getTailStyles = (placement) => {
+  switch (placement) {
+    case "top":
+      return { bottom: OFFSET };
+    case "bottom":
+      return { top: OFFSET };
+    case "left":
+      return { right: OFFSET };
+    case "right":
+      return { left: OFFSET };
+    case "top-start":
+      return { bottom: OFFSET, left: EDGE_GAP };
+    case "top-end":
+      return { bottom: OFFSET, right: EDGE_GAP };
+    case "bottom-start":
+      return { top: OFFSET, left: EDGE_GAP };
+    case "bottom-end":
+      return { top: OFFSET, right: EDGE_GAP };
+    case "left-start":
+      return { right: OFFSET, top: EDGE_GAP };
+    case "left-end":
+      return { right: OFFSET, bottom: EDGE_GAP };
+    case "right-start":
+      return { left: OFFSET, top: EDGE_GAP };
+    case "right-end":
+      return { left: OFFSET, bottom: EDGE_GAP };
+    default:
+      console.warn(`Invalid placement: ${placement}. Returning empty style.`);
+      return {};
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getTailClassName,
+  getTailStyles,
   getTooltipPosition
 });