@sentio/ui-core 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -7,9 +7,8 @@ function _BarLoading({
   hint = "Loading Sentio",
   loading = true,
   className,
-  iconClassName,
   width = 150,
-  gray
+  logo
 }) {
   if (loading) {
     return /* @__PURE__ */ jsxs(
@@ -20,6 +19,7 @@ function _BarLoading({
           className
         ),
         children: [
+          logo,
           hint && /* @__PURE__ */ jsx("div", { className: "loading-text text-icontent text-gray my-2 text-center font-medium", children: hint }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ jsx(
             BarLoader,
@@ -42,42 +42,45 @@ function _BarLoading({
 var BarLoading = memo(_BarLoading);
 
 // src/common/SpinLoading.tsx
+import React from "react";
 import { ClipLoader } from "react-spinners";
 import { cx as classNames2 } from "class-variance-authority";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SpinLoading = function Spinner(args) {
-  const {
-    loading = false,
-    children,
-    className,
-    size = 48,
-    showMask,
-    maskOpacity = 80
-  } = args;
-  return /* @__PURE__ */ jsxs2("div", { className: classNames2("relative", className), children: [
-    showMask && loading && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: classNames2(
-          "absolute bottom-0 left-0 right-0 top-0 z-[1]",
-          maskOpacity ? `bg-white dark:bg-sentio-gray-100/${maskOpacity}` : "dark:bg-sentio-gray-100 bg-white"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx2("div", { className: "absolute left-[50%] top-[50%] z-[1] -translate-y-6", children: /* @__PURE__ */ jsx2(
-      ClipLoader,
-      {
-        loading,
-        color: "#3B82F6",
-        size,
-        cssOverride: {
-          borderWidth: 3
+var SpinLoading = React.forwardRef(
+  function Spinner(args, ref) {
+    const {
+      loading = false,
+      children,
+      className,
+      size = 48,
+      showMask,
+      maskOpacity = 80
+    } = args;
+    return /* @__PURE__ */ jsxs2("div", { ref, className: classNames2("relative", className), children: [
+      showMask && loading && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: classNames2(
+            "absolute bottom-0 left-0 right-0 top-0 z-[1]",
+            maskOpacity ? `bg-white dark:bg-sentio-gray-100/${maskOpacity}` : "dark:bg-sentio-gray-100 bg-white"
+          )
         }
-      }
-    ) }),
-    children
-  ] });
-};
+      ),
+      /* @__PURE__ */ jsx2("div", { className: "absolute left-[50%] top-[50%] z-[1] -translate-y-6", children: /* @__PURE__ */ jsx2(
+        ClipLoader,
+        {
+          loading,
+          color: "#3B82F6",
+          size,
+          cssOverride: {
+            borderWidth: 3
+          }
+        }
+      ) }),
+      children
+    ] });
+  }
+);
 
 // src/common/CopyButton.tsx
 import {
@@ -272,7 +275,7 @@ var CopyButton = ({
 import { cloneElement, forwardRef, useMemo } from "react";
 
 // src/common/DivTooltip.tsx
-import React, { useRef as useRef2, useState as useState2, useEffect as useEffect2 } from "react";
+import React2, { useRef as useRef2, useState as useState2, useEffect as useEffect2 } from "react";
 import {
   useFloating,
   useHover,
@@ -372,7 +375,7 @@ var PopoverTooltip = ({
       icon,
       children
     ] });
-  const Portal = usePortal ? FloatingPortal : React.Fragment;
+  const Portal = usePortal ? FloatingPortal : React2.Fragment;
   return /* @__PURE__ */ jsxs4("div", { className: classNames4("relative flex items-center", className), children: [
     /* @__PURE__ */ jsxs4(
       "div",
@@ -405,7 +408,7 @@ var PopoverTooltip = ({
           !hideArrow && placement === "bottom" && /* @__PURE__ */ jsx4(
             "div",
             {
-              className: "arrow dark:before:bg-sentio-gray-200 -translate-y-[5px] before:absolute before:h-2 before:w-2 before:rotate-45 before:border-l before:border-t before:border-black/5 before:bg-white dark:before:border-gray-100",
+              className: "arrow dark:bg-sentio-gray-100 before:border-border-color -translate-y-[7px] bg-white before:visible before:border before:border-b-0 before:border-r-0",
               ref: arrowRef,
               style: {
                 left: arrowX ?? 0,
@@ -544,18 +547,22 @@ function Proccessing({ className, light }) {
     /* @__PURE__ */ jsx5(
       "circle",
       {
-        className: light ? "opacity-5" : "opacity-10",
         cx: "12",
         cy: "12",
         r: "10",
         stroke: "currentColor",
-        strokeWidth: "4"
+        strokeWidth: "4",
+        style: {
+          opacity: light ? 0.05 : 0.1
+        }
       }
     ),
     /* @__PURE__ */ jsx5(
       "path",
       {
-        className: light ? "opacity-50" : "opacity-75",
+        style: {
+          opacity: light ? 0.5 : 0.75
+        },
         fill: "currentColor",
         d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       }
@@ -2045,7 +2052,7 @@ if (DOMPurify?.addHook) {
   });
 }
 var renderTextWithColoredNumbers = (text) => {
-  const numberRegex = /\b(\d+(?:\.\d+)?)\b/g;
+  const numberRegex = /\b(\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)\b/g;
   return text.replace(numberRegex, (match, number, offset2) => {
     const before = text.charAt(offset2 - 1);
     const after = text.charAt(offset2 + match.length);
@@ -2474,7 +2481,7 @@ function PopupMenuButton({
   }, [menuOpen]);
   let menuItems = null;
   if (menuOpen && items.length > 0) {
-    menuItems = /* @__PURE__ */ jsx20(MenuContext.Provider, { value: { selectedKey }, children: /* @__PURE__ */ jsx20("div", { ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ jsx20(
+    menuItems = /* @__PURE__ */ jsx20(MenuContext.Provider, { value: { selectedKey }, children: /* @__PURE__ */ jsx20("div", { ref: refs.setFloating, style: floatingStyles, className: small ? "z-10" : "z-[100]", children: /* @__PURE__ */ jsx20(
       Transition2,
       {
         as: Fragment5,