master-components-react-ts 2.1.2 → 2.1.4

package/dist/components/Toggle/Toggle.module.scss.js

@@ -0,0 +1,29 @@
+const toggleWrapper = "Toggle-module__toggleWrapper";
+const checked = "Toggle-module__checked";
+const error = "Toggle-module__error";
+const disabled = "Toggle-module__disabled";
+const sm = "Toggle-module__sm";
+const toggleState = "Toggle-module__toggleState";
+const md = "Toggle-module__md";
+const lg = "Toggle-module__lg";
+const style = {
+  toggleWrapper,
+  checked,
+  error,
+  disabled,
+  sm,
+  toggleState,
+  md,
+  lg
+};
+export {
+  checked,
+  style as default,
+  disabled,
+  error,
+  lg,
+  md,
+  sm,
+  toggleState,
+  toggleWrapper
+};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,153 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import style from "./Tooltip.module.scss.js";
+const Tooltip = ({
+  children,
+  tooltipSlot,
+  delay = 400,
+  placement = "top",
+  trigger = "hover",
+  title,
+  text,
+  customText,
+  tooltipContentStyle,
+  tooltipTitlestyle,
+  tooltipTextStyle,
+  tooltipContainerStyle,
+  pointerPosition = "10%",
+  withPointer = false,
+  theme,
+  topCustomOffset = 0,
+  bottomCustomOffset = 0,
+  leftCustomOffset = 0,
+  rightCustomOffset = 0,
+  forceClose = false,
+  onClick
+}) => {
+  const ComponentRef = useRef(null);
+  const TooltipRef = useRef(null);
+  let timeout;
+  const [Active, setActive] = useState(false);
+  const hasContent = tooltipSlot || title || text || customText;
+  const ShowTip = () => {
+    if (trigger === "hover" && hasContent) {
+      timeout = setTimeout(() => {
+        setActive(true);
+      }, delay);
+    }
+  };
+  const HideTip = () => {
+    if (trigger === "hover") {
+      clearTimeout(timeout);
+      setTimeout(() => {
+        setActive(false);
+      }, delay);
+    }
+  };
+  const HandleActive = () => {
+    if (trigger === "click") {
+      onClick?.();
+      setActive((state) => !state);
+    }
+  };
+  const CalculatePos = () => {
+    const componentEl = ComponentRef.current;
+    const tooltipEl = TooltipRef.current;
+    if (!tooltipEl || !componentEl) return;
+    const componentRect = componentEl.getBoundingClientRect();
+    tooltipEl.style.position = "fixed";
+    switch (placement) {
+      case "top":
+        tooltipEl.style.top = `${componentRect.top - tooltipEl.offsetHeight - 8}px`;
+        tooltipEl.style.left = `${componentRect.left + topCustomOffset}px`;
+        break;
+      case "bottom":
+        tooltipEl.style.top = `${componentRect.bottom + 8}px`;
+        tooltipEl.style.left = `${componentRect.left + bottomCustomOffset}px`;
+        break;
+      case "left":
+        tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
+        tooltipEl.style.left = `${componentRect.left - tooltipEl.offsetWidth - 8 + leftCustomOffset}px`;
+        break;
+      case "right":
+        tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
+        tooltipEl.style.left = `${componentRect.right + 8 + rightCustomOffset}px`;
+        break;
+    }
+  };
+  useEffect(() => {
+    CalculatePos();
+  }, [ComponentRef, Active, children, placement, tooltipSlot, customText, title, text]);
+  useEffect(() => {
+    const handleScroll = (e) => {
+      const isInsideTooltip = ComponentRef.current?.contains(e.target);
+      if (!isInsideTooltip) {
+        setActive(false);
+      }
+    };
+    const ClickHandler = (event) => {
+      if (event.composedPath().includes(ComponentRef.current)) return;
+      setActive(false);
+    };
+    document.addEventListener("click", ClickHandler);
+    document.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("scroll", handleScroll, true);
+      document.removeEventListener("click", ClickHandler);
+    };
+  }, []);
+  useEffect(() => {
+    if (forceClose) {
+      setActive(false);
+    }
+  }, [forceClose]);
+  useEffect(() => {
+    const element = TooltipRef.current;
+    if (element) {
+      element.style.setProperty("--pointer-position", `${pointerPosition}`);
+      if (!withPointer) {
+        element.classList.add(style.withoutPointer);
+      }
+    }
+  }, [Active]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: ComponentRef,
+      className: `${theme === "dark" ? style.dark : ""} ${style.tooltipContainer}`,
+      onClick: HandleActive,
+      onMouseEnter: ShowTip,
+      onMouseLeave: HideTip,
+      style: tooltipContainerStyle ?? {},
+      children: [
+        children,
+        Active && tooltipSlot ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: tooltipContentStyle ?? {},
+            onClick: (e) => e.stopPropagation(),
+            ref: TooltipRef,
+            className: `${style.tooltipContent} ${placement ? style[placement] : style.bottom}`,
+            children: tooltipSlot
+          }
+        ) : Active && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: tooltipContentStyle ?? {},
+            onClick: (e) => e.stopPropagation(),
+            ref: TooltipRef,
+            className: `${style.tooltipContent} ${placement ? style[placement] : style.bottom}`,
+            children: [
+              customText && typeof customText === "string" && customText,
+              title && title.length > 0 && typeof title === "string" && /* @__PURE__ */ jsx("h2", { className: style.tooltipTitle, style: tooltipTitlestyle ?? {}, children: title }),
+              text && text.length > 0 && typeof text === "string" && /* @__PURE__ */ jsx("p", { className: style.tooltipText, style: tooltipTextStyle ?? {}, children: text })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tooltip as default
+};

package/dist/components/Tooltip/Tooltip.module.scss.js

@@ -0,0 +1,35 @@
+const tooltipContainer = "Tooltip-module__tooltipContainer";
+const tooltipContent = "Tooltip-module__tooltipContent";
+const withoutPointer = "Tooltip-module__withoutPointer";
+const top = "Tooltip-module__top";
+const right = "Tooltip-module__right";
+const bottom = "Tooltip-module__bottom";
+const left = "Tooltip-module__left";
+const tooltipTitle = "Tooltip-module__tooltipTitle";
+const tooltipText = "Tooltip-module__tooltipText";
+const dark = "Tooltip-module__dark";
+const style = {
+  tooltipContainer,
+  tooltipContent,
+  withoutPointer,
+  top,
+  right,
+  bottom,
+  left,
+  tooltipTitle,
+  tooltipText,
+  dark
+};
+export {
+  bottom,
+  dark,
+  style as default,
+  left,
+  right,
+  tooltipContainer,
+  tooltipContent,
+  tooltipText,
+  tooltipTitle,
+  top,
+  withoutPointer
+};

package/dist/context/NamespaceContext.js

@@ -0,0 +1,7 @@
+import { useContext, createContext } from "react";
+const NamespaceContext = createContext("namespaceNebi");
+const useNamespace = () => useContext(NamespaceContext);
+export {
+  NamespaceContext as default,
+  useNamespace
+};