@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/tooltip.js

@@ -0,0 +1,200 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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);
+
+// src/components/tooltip/index.ts
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(tooltip_exports);
+
+// src/components/tooltip/tooltip.tsx
+var React = __toESM(require("react"));
+var ReactDOM = __toESM(require("react-dom"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React.useState(placement);
+  const triggerRef = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+  const timeoutRef = React.useRef();
+  React.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (placement === "right" && spaceRight < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 1e4,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+      if (newStyle.left < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+      if (newStyle.top < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+      setTooltipStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isVisible, placement]);
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 150);
+  };
+  const handleClick = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const childElement = React.Children.only(children);
+  const childWithHandlers = React.cloneElement(childElement, {
+    ref: triggerRef,
+    onMouseEnter: (e) => {
+      childElement.props?.onMouseEnter?.(e);
+      handleMouseEnter();
+    },
+    onMouseLeave: (e) => {
+      childElement.props?.onMouseLeave?.(e);
+      handleMouseLeave();
+    },
+    onClick: (e) => {
+      childElement.props?.onClick?.(e);
+      handleClick();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    childWithHandlers,
+    isVisible && !disabled && ReactDOM.createPortal(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: tooltipRef,
+          className: `tooltip tooltip--${resolvedPlacement}`,
+          style: {
+            ...tooltipStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: tooltipStyle.top !== void 0 ? 1 : 0,
+            visibility: tooltipStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          onMouseEnter: () => {
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+          },
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip__content", children: content })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});

package/dist/components/tooltip.mjs

@@ -0,0 +1,163 @@
+// src/components/tooltip/tooltip.tsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React.useState(placement);
+  const triggerRef = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+  const timeoutRef = React.useRef();
+  React.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (placement === "right" && spaceRight < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 1e4,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+      if (newStyle.left < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+      if (newStyle.top < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+      setTooltipStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isVisible, placement]);
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 150);
+  };
+  const handleClick = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const childElement = React.Children.only(children);
+  const childWithHandlers = React.cloneElement(childElement, {
+    ref: triggerRef,
+    onMouseEnter: (e) => {
+      childElement.props?.onMouseEnter?.(e);
+      handleMouseEnter();
+    },
+    onMouseLeave: (e) => {
+      childElement.props?.onMouseLeave?.(e);
+      handleMouseLeave();
+    },
+    onClick: (e) => {
+      childElement.props?.onClick?.(e);
+      handleClick();
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    childWithHandlers,
+    isVisible && !disabled && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: tooltipRef,
+          className: `tooltip tooltip--${resolvedPlacement}`,
+          style: {
+            ...tooltipStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: tooltipStyle.top !== void 0 ? 1 : 0,
+            visibility: tooltipStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          onMouseEnter: () => {
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+          },
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ jsx("div", { className: "tooltip__content", children: content })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  Tooltip
+};

package/dist/icons-Czahnf-r.d.mts

@@ -0,0 +1,15 @@
+import React__default from 'react';
+
+type IconName = string;
+interface IconProps {
+    name: IconName;
+    size?: number;
+    className?: string;
+    /** Render a skeleton placeholder instead of the real icon (useful while downloading/loading) */
+    loading?: boolean;
+    /** aria-label for icon-only buttons etc. */
+    'aria-label'?: string;
+}
+declare const Icon: React__default.FC<IconProps>;
+
+export { Icon as I, type IconName as a, type IconProps as b };

package/dist/icons-Czahnf-r.d.ts

@@ -0,0 +1,15 @@
+import React__default from 'react';
+
+type IconName = string;
+interface IconProps {
+    name: IconName;
+    size?: number;
+    className?: string;
+    /** Render a skeleton placeholder instead of the real icon (useful while downloading/loading) */
+    loading?: boolean;
+    /** aria-label for icon-only buttons etc. */
+    'aria-label'?: string;
+}
+declare const Icon: React__default.FC<IconProps>;
+
+export { Icon as I, type IconName as a, type IconProps as b };