@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-PJWELBN2.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+var chunkS7VEND5Z_cjs = require('./chunk-S7VEND5Z.cjs');
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Image = react.forwardRef(function Image2({
+  src,
+  alt,
+  fallback,
+  loadingComponent,
+  showSkeleton = true,
+  aspectRatio,
+  objectFit = "cover",
+  className,
+  containerClassName,
+  onLoad,
+  onError,
+  style,
+  ...props
+}, ref) {
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [hasError, setHasError] = react.useState(false);
+  const [prevSrc, setPrevSrc] = react.useState(src);
+  if (src !== prevSrc) {
+    setPrevSrc(src);
+    setIsLoading(true);
+    setHasError(false);
+  }
+  const handleLoad = (event) => {
+    setIsLoading(false);
+    onLoad?.(event);
+  };
+  const handleError = (event) => {
+    setIsLoading(false);
+    setHasError(true);
+    onError?.(event);
+  };
+  const renderFallback = () => {
+    const imgStyleClasses = chunkL5VQZZVR_cjs.cn(
+      "h-full w-full",
+      objectFit === "cover" && "object-cover",
+      objectFit === "contain" && "object-contain",
+      objectFit === "fill" && "object-fill",
+      objectFit === "none" && "object-none",
+      objectFit === "scale-down" && "object-scale-down",
+      className
+    );
+    if (typeof fallback === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx("img", { src: fallback, alt, className: imgStyleClasses, ...props });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: imgStyleClasses, children: fallback ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center bg-surface-secondary text-text-tertiary", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "h-1/3 w-1/3 opacity-20",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5,
+            d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          }
+        )
+      }
+    ) }) });
+  };
+  const containerStyle = {
+    aspectRatio,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "relative overflow-hidden",
+        !aspectRatio && "h-full w-full",
+        containerClassName
+      ),
+      style: containerStyle,
+      children: [
+        isLoading && showSkeleton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10", children: loadingComponent ?? /* @__PURE__ */ jsxRuntime.jsx(chunkS7VEND5Z_cjs.Skeleton, { className: "h-full w-full", variant: "wave" }) }),
+        hasError ? renderFallback() : /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ref,
+            src,
+            alt,
+            onLoad: handleLoad,
+            onError: handleError,
+            className: chunkL5VQZZVR_cjs.cn(
+              "transition-opacity duration-500 ease-in-out",
+              isLoading ? "opacity-0" : "opacity-100",
+              objectFit === "cover" && "object-cover",
+              objectFit === "contain" && "object-contain",
+              objectFit === "fill" && "object-fill",
+              objectFit === "none" && "object-none",
+              objectFit === "scale-down" && "object-scale-down",
+              "h-full w-full",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+});
+Image.displayName = "Image";
+
+exports.Image = Image;

package/dist/chunk-Q3IFXFFD.cjs

@@ -0,0 +1,202 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Sidebar = ({
+  groups,
+  isCollapsed: controlledIsCollapsed,
+  onToggleCollapse,
+  logo,
+  footer,
+  className,
+  glass = false,
+  width = 288,
+  collapsedWidth = 80,
+  showToggleButton = false,
+  togglePosition = "center",
+  position = "left",
+  centerIcons = true,
+  classNames = {},
+  styles = {},
+  renderItem
+}) => {
+  const [internalIsCollapsed, setInternalIsCollapsed] = react.useState(false);
+  const [expandedItems, setExpandedItems] = react.useState({});
+  const isCollapsed = controlledIsCollapsed ?? internalIsCollapsed;
+  const handleToggle = () => {
+    const newState = !isCollapsed;
+    if (onToggleCollapse) {
+      onToggleCollapse(newState);
+    } else {
+      setInternalIsCollapsed(newState);
+    }
+  };
+  const toggleItemExpanded = (id) => {
+    setExpandedItems((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  };
+  const sidebarWidth = isCollapsed ? collapsedWidth : width;
+  const renderSidebarItem = (item, level = 0) => {
+    if (item.hidden) return null;
+    if (renderItem) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderItem(item, isCollapsed) }, item.id);
+    }
+    const hasChildren = item.items && item.items.length > 0;
+    const isExpanded = expandedItems[item.id] ?? !!item.isExpanded;
+    const Component = item.component ?? "button";
+    const itemContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: chunkL5VQZZVR_cjs.cn(
+            "shrink-0 transition-colors duration-normal",
+            item.isActive ? "text-text-inverse" : "text-text-muted group-hover:text-text",
+            isCollapsed && centerIcons && "mx-auto",
+            classNames.itemIcon
+          ),
+          style: styles.itemIcon,
+          children: item.icon
+        }
+      ),
+      !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkL5VQZZVR_cjs.cn("truncate", classNames.itemLabel), style: styles.itemLabel, children: item.label }),
+      !isCollapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+        item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: item.badge }),
+        hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+          outline.ChevronDownIcon,
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "w-4 h-4 transition-transform duration-normal",
+              isExpanded && "rotate-180"
+            )
+          }
+        )
+      ] }),
+      isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-full ml-2 px-2 py-1 bg-surface-secondary border border-border rounded shadow-lg text-xs opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity z-index-tooltip whitespace-nowrap text-text", children: item.label })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          type: Component === "button" ? "button" : void 0,
+          onClick: (e) => {
+            if (hasChildren && !isCollapsed) {
+              e.preventDefault();
+              toggleItemExpanded(item.id);
+            }
+            item.onClick?.();
+          },
+          className: chunkL5VQZZVR_cjs.cn(
+            "w-full flex items-center gap-4 transition-all duration-normal group relative text-base rounded-lg",
+            level === 0 ? "px-4 py-3" : "px-3 py-2 pl-10",
+            item.isActive ? "bg-black text-text-inverse shadow-md shadow-black/20 font-bold" : "text-text-secondary hover:bg-hover hover:text-text",
+            isCollapsed && "justify-center px-0",
+            item.isActive && classNames.itemActive,
+            isCollapsed && classNames.itemCollapsed,
+            classNames.item
+          ),
+          style: styles.item,
+          title: isCollapsed ? item.label : void 0,
+          ...item.componentProps ?? {},
+          children: itemContent
+        }
+      ),
+      hasChildren && isExpanded && !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 space-y-1", children: item.items?.map((child) => renderSidebarItem(child, level + 1)) })
+    ] }, item.id);
+  };
+  const toggleBtn = showToggleButton && /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: handleToggle,
+      className: chunkL5VQZZVR_cjs.cn(
+        "absolute z-index-popover flex items-center justify-center w-8 h-8 rounded-full bg-surface border border-border shadow-sm hover:shadow-md transition-all duration-normal hover:bg-hover text-text-muted hover:text-text",
+        position === "left" ? "-right-4" : "-left-4",
+        togglePosition === "top" && "top-12",
+        togglePosition === "center" && "top-1/2 -translate-y-1/2",
+        togglePosition === "bottom" && "bottom-12",
+        classNames.toggleButton
+      ),
+      style: styles.toggleButton,
+      "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+      children: isCollapsed ? position === "left" ? /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-4 h-4" }) : position === "left" ? /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-4 h-4" })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex flex-col h-full bg-surface transition-all duration-slow ease-in-out z-index-sticky shadow-premium relative",
+        position === "right" && "border-l border-border",
+        position === "left" && "border-r border-border",
+        glass && "glass",
+        classNames.root,
+        className
+      ),
+      style: {
+        width: sidebarWidth,
+        ...styles.root
+      },
+      children: [
+        toggleBtn,
+        logo && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "flex items-center px-6 pt-10 pb-6",
+              isCollapsed && "justify-center px-0",
+              classNames.header
+            ),
+            style: styles.header,
+            children: logo
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "flex-1 overflow-y-auto overflow-x-hidden px-4 py-6 space-y-10 custom-scrollbar",
+              classNames.content
+            ),
+            style: styles.content,
+            children: groups.map((group) => {
+              if (group.hidden) return null;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkL5VQZZVR_cjs.cn("space-y-4", classNames.group), style: styles.group, children: [
+                group.label && !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "px-2 text-xs font-bold text-text-muted uppercase tracking-wider",
+                      classNames.groupLabel
+                    ),
+                    style: styles.groupLabel,
+                    children: group.label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.items.map((item) => renderSidebarItem(item)) })
+              ] }, group.id);
+            })
+          }
+        ),
+        footer && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "p-6 mt-auto border-t border-border/50",
+              isCollapsed && "flex justify-center px-0",
+              classNames.footer
+            ),
+            style: styles.footer,
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+};
+Sidebar.displayName = "Sidebar";
+
+exports.Sidebar = Sidebar;

package/dist/chunk-R72GDCWE.cjs

@@ -0,0 +1,314 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+var EXIT_DURATION_MS = 150;
+var placementClasses = {
+  top: "-translate-x-1/2 -translate-y-full",
+  bottom: "-translate-x-1/2",
+  left: "-translate-x-full -translate-y-1/2",
+  right: "-translate-y-1/2"
+};
+var arrowPositionClasses = {
+  top: "top-full left-1/2 -translate-x-1/2",
+  bottom: "bottom-full left-1/2 -translate-x-1/2",
+  left: "left-full top-1/2 -translate-y-1/2",
+  right: "right-full top-1/2 -translate-y-1/2"
+};
+var arrowBorderClasses = {
+  top: "border-l-transparent border-r-transparent border-b-transparent",
+  bottom: "border-l-transparent border-r-transparent border-t-transparent",
+  left: "border-t-transparent border-b-transparent border-r-transparent",
+  right: "border-t-transparent border-b-transparent border-l-transparent"
+};
+var entryTranslateClass = {
+  top: "translate-y-1",
+  bottom: "-translate-y-1",
+  left: "translate-x-1",
+  right: "-translate-x-1"
+};
+var sizeClasses = {
+  sm: "px-2 py-1 text-xs rounded-md",
+  md: "px-3 py-1.5 text-sm rounded-lg",
+  lg: "px-4 py-2 text-sm rounded-xl"
+};
+var variantBubbleClasses = {
+  dark: [
+    "bg-gray-900 text-gray-50",
+    "shadow-[0_4px_16px_rgba(0,0,0,0.35)]",
+    "ring-1 ring-white/10"
+  ].join(" "),
+  primary: [
+    "bg-gradient-to-b from-blue-500 to-blue-600 text-white",
+    "shadow-[0_4px_16px_rgba(59,130,246,0.45)]",
+    "ring-1 ring-blue-400/30"
+  ].join(" "),
+  light: [
+    "bg-white text-gray-800",
+    "border border-gray-200/80",
+    "shadow-[0_4px_16px_rgba(0,0,0,0.10)]"
+  ].join(" ")
+};
+var arrowVariantColor = {
+  dark: {
+    top: "border-t-gray-900",
+    bottom: "border-b-gray-900",
+    left: "border-l-gray-900",
+    right: "border-r-gray-900"
+  },
+  primary: {
+    top: "border-t-blue-600",
+    bottom: "border-b-blue-500",
+    left: "border-l-blue-600",
+    right: "border-r-blue-500"
+  },
+  light: {
+    top: "border-t-gray-200",
+    bottom: "border-b-gray-200",
+    left: "border-l-gray-200",
+    right: "border-r-gray-200"
+  }
+};
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  trigger = "hover",
+  showDelay = 0,
+  hideDelay = 100,
+  size = "md",
+  variant = "dark",
+  open: controlledOpen,
+  disabled = false,
+  maxWidth = 240,
+  className,
+  wrapperClassName
+}) {
+  const [internalOpen, setInternalOpen] = react.useState(false);
+  const [mounted, setMounted] = react.useState(false);
+  const [visible, setVisible] = react.useState(false);
+  const [coords, setCoords] = react.useState({ top: 0, left: 0 });
+  const [actualPlacement, setActualPlacement] = react.useState(placement);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const triggerRef = react.useRef(null);
+  const tooltipRef = react.useRef(null);
+  const showTimer = react.useRef(null);
+  const hideTimer = react.useRef(null);
+  const exitTimer = react.useRef(null);
+  const tooltipId = react.useId();
+  const clearTimers = react.useCallback(() => {
+    if (showTimer.current) clearTimeout(showTimer.current);
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    if (exitTimer.current) clearTimeout(exitTimer.current);
+  }, []);
+  const show = react.useCallback(() => {
+    if (disabled || isControlled) return;
+    clearTimers();
+    const open = () => {
+      setInternalOpen(true);
+    };
+    if (showDelay > 0) {
+      showTimer.current = setTimeout(open, showDelay);
+    } else {
+      open();
+    }
+  }, [disabled, isControlled, clearTimers, showDelay]);
+  const hide = react.useCallback(() => {
+    if (isControlled) return;
+    clearTimers();
+    hideTimer.current = setTimeout(() => {
+      setInternalOpen(false);
+    }, hideDelay);
+  }, [isControlled, clearTimers, hideDelay]);
+  const toggle = react.useCallback(() => {
+    if (disabled || isControlled) return;
+    setInternalOpen((prev) => !prev);
+  }, [disabled, isControlled]);
+  react.useEffect(() => {
+    let rafId = null;
+    if (isOpen && !disabled) {
+      clearTimers();
+      rafId = requestAnimationFrame(() => {
+        setMounted(true);
+        rafId = requestAnimationFrame(() => {
+          setVisible(true);
+        });
+      });
+    } else {
+      rafId = requestAnimationFrame(() => {
+        setVisible(false);
+      });
+      exitTimer.current = setTimeout(() => {
+        setMounted(false);
+      }, EXIT_DURATION_MS);
+    }
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+    };
+  }, [isOpen, disabled, clearTimers]);
+  const updatePosition = react.useCallback(() => {
+    if (!triggerRef.current || !isOpen) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipElement = tooltipRef.current;
+    const gap = 8;
+    let nextPlacement = placement;
+    const calculateBaseCoords = (p) => {
+      switch (p) {
+        case "top":
+          return { t: triggerRect.top - gap, l: triggerRect.left + triggerRect.width / 2 };
+        case "bottom":
+          return { t: triggerRect.bottom + gap, l: triggerRect.left + triggerRect.width / 2 };
+        case "left":
+          return { t: triggerRect.top + triggerRect.height / 2, l: triggerRect.left - gap };
+        case "right":
+          return { t: triggerRect.top + triggerRect.height / 2, l: triggerRect.right + gap };
+      }
+    };
+    const base = calculateBaseCoords(placement);
+    let top = base.t;
+    let left = base.l;
+    if (tooltipElement) {
+      const tooltipRect = tooltipElement.getBoundingClientRect();
+      const padding = 12;
+      if (placement === "top" && triggerRect.top - tooltipRect.height - gap < padding) {
+        nextPlacement = "bottom";
+      } else if (placement === "bottom" && triggerRect.bottom + tooltipRect.height + gap > window.innerHeight - padding) {
+        nextPlacement = "top";
+      } else if (placement === "left" && triggerRect.left - tooltipRect.width - gap < padding) {
+        nextPlacement = "right";
+      } else if (placement === "right" && triggerRect.right + tooltipRect.width + gap > window.innerWidth - padding) {
+        nextPlacement = "left";
+      }
+      if (nextPlacement !== placement) {
+        const flippedBase = calculateBaseCoords(nextPlacement);
+        top = flippedBase.t;
+        left = flippedBase.l;
+      }
+      const halfWidth = tooltipRect.width / 2;
+      const halfHeight = tooltipRect.height / 2;
+      if (nextPlacement === "top" || nextPlacement === "bottom") {
+        left = Math.max(
+          padding + halfWidth,
+          Math.min(window.innerWidth - padding - halfWidth, left)
+        );
+      } else {
+        top = Math.max(
+          padding + halfHeight,
+          Math.min(window.innerHeight - padding - halfHeight, top)
+        );
+      }
+    }
+    setActualPlacement(nextPlacement);
+    setCoords({ top, left });
+  }, [isOpen, placement]);
+  react.useLayoutEffect(() => {
+    if (!isOpen) return;
+    let rafId = null;
+    const handleUpdate = () => {
+      rafId = requestAnimationFrame(updatePosition);
+    };
+    handleUpdate();
+    window.addEventListener("resize", handleUpdate);
+    window.addEventListener("scroll", handleUpdate, true);
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", handleUpdate);
+      window.removeEventListener("scroll", handleUpdate, true);
+    };
+  }, [isOpen, updatePosition]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        clearTimers();
+        setInternalOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isOpen, clearTimers]);
+  react.useEffect(() => clearTimers, [clearTimers]);
+  const triggerProps = {};
+  if (trigger === "hover" || trigger === "focus") {
+    triggerProps.onFocus = show;
+    triggerProps.onBlur = hide;
+  }
+  if (trigger === "hover") {
+    triggerProps.onMouseEnter = show;
+    triggerProps.onMouseLeave = hide;
+  } else if (trigger === "click") {
+    triggerProps.onClick = toggle;
+  }
+  triggerProps.onKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") toggle();
+  };
+  const child = children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: triggerRef,
+      className: chunkL5VQZZVR_cjs.cn("relative inline-flex isolate z-0", wrapperClassName),
+      "aria-describedby": isOpen && !disabled ? tooltipId : void 0,
+      ...triggerProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-0", children: child }),
+        mounted && !disabled && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: tooltipRef,
+              className: chunkL5VQZZVR_cjs.cn("pointer-events-none fixed z-[9999]", placementClasses[actualPlacement]),
+              style: { top: coords.top, left: coords.left },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  id: tooltipId,
+                  role: "tooltip",
+                  style: { maxWidth, transitionDuration: `${EXIT_DURATION_MS.toString()}ms` },
+                  className: chunkL5VQZZVR_cjs.cn(
+                    // Layout & typography
+                    "relative min-w-max whitespace-normal break-words",
+                    "font-sans font-medium tracking-tight text-center leading-snug",
+                    // Smooth enter/exit transition
+                    "transition-[opacity,transform] ease-out",
+                    visible ? "opacity-100 translate-x-0 translate-y-0" : ["opacity-0", entryTranslateClass[actualPlacement]].join(" "),
+                    // Visual styles
+                    variantBubbleClasses[variant],
+                    sizeClasses[size],
+                    className
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: chunkL5VQZZVR_cjs.cn(
+                          "absolute border-[6px]",
+                          "drop-shadow-sm",
+                          arrowPositionClasses[actualPlacement],
+                          arrowBorderClasses[actualPlacement],
+                          arrowVariantColor[variant][actualPlacement]
+                        )
+                      }
+                    ),
+                    content
+                  ]
+                }
+              )
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+
+exports.Tooltip = Tooltip;