react-better-html 1.1.115 → 1.1.116

package/dist/index.js

@@ -52,6 +52,7 @@ __export(index_exports, {
   Tabs: () => Tabs_default,
   Text: () => Text_default,
   ToggleInput: () => ToggleInput_default,
+  Tooltip: () => Tooltip_default,
   colorThemeControls: () => colorThemeControls,
   countries: () => countries,
   darkenColor: () => darkenColor,
@@ -6943,6 +6944,14 @@ var TableStyledComponent = import_styled_components11.default.table.withConfig({
          cursor: pointer;
       }
 
+      &.isExpandRow {
+         height: 0px;
+
+         td {
+            border-top: none;
+         }
+      }
+
       ${(props) => props.isStriped ? import_styled_components11.css`
                  &:nth-child(even) {
                     background-color: ${props.theme.colors.backgroundSecondary};
@@ -7020,6 +7029,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
   const { colorTheme } = useBetterHtmlContextInternal();
   const filterModalRef = (0, import_react23.useRef)(null);
   const [checkedItems, setCheckedItems] = (0, import_react23.useState)([]);
+  const [expandedRows, setExpandedRows] = (0, import_react23.useState)([]);
   const [currentPage, setCurrentPage] = (0, import_react23.useState)(1);
   const [filterData, setFilterData] = (0, import_react23.useState)({});
   const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react23.useState)();
@@ -7052,30 +7062,35 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
       filterModalRef.current?.close();
     }
   });
+  const expandRow = (0, import_react23.useMemo)(() => columns.find((column) => column.type === "expand"), [columns]);
   const renderCellContent = (0, import_react23.useCallback)(
-    (column, item, index) => {
+    (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
           const value = column.keyName ? item[column.keyName] : void 0;
-          return column.format?.(item, index) ?? String(value ?? "");
+          const textProps = (typeof column.getTextProps === "function" ? column.getTextProps?.(item, itemIndex) : column.getTextProps) ?? {};
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, index) ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
         }
         case "image": {
-          const src = column.getImageSrc?.(item, index) ?? (column.keyName ? item[column.keyName] : void 0);
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Image_default, { src, width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...column.imageProps });
+          const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
         }
         case "checkbox": {
-          const { onChange, ...toggleInputProps } = column.toggleInputProps ?? {};
-          const checkedValue = checkedItems[index];
+          const { onChange, ...toggleInputProps } = (typeof column.getToggleInputProps === "function" ? column.getToggleInputProps?.(item, itemIndex) : column.getToggleInputProps) ?? {};
+          const checkedValue = checkedItems[itemIndex];
           return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
+              value: item,
               onChange: (checked, value) => {
                 setCheckedItems(
-                  (oldValue) => oldValue.map((isChecked, internalIndex) => internalIndex === index ? checked : isChecked)
+                  (oldValue) => oldValue.map(
+                    (isChecked, internalIndex) => internalIndex === itemIndex ? checked : isChecked
+                  )
                 );
                 onChange?.(checked, value);
               },
@@ -7083,18 +7098,37 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
             }
           );
         }
+        case "expand": {
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            Icon_default,
+            {
+              name: "chevronDown",
+              transform: `rotate(${expandedRows[itemIndex] ? 180 : 0}deg)`,
+              transition: theme2.styles.transition
+            }
+          );
+        }
         default: {
           return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
         }
       }
     },
-    [theme2, checkedItems]
+    [theme2, checkedItems, expandedRows]
   );
   const onClickRowElement = (0, import_react23.useCallback)(
     (item, index) => {
-      onClickRow?.(item, index);
+      if (expandRow) {
+        setExpandedRows((oldValue) => {
+          if (oldValue[index] === void 0) {
+            const newValue = expandRow.onlyOneExpanded ? [] : [...oldValue];
+            newValue[index] = true;
+            return newValue;
+          }
+          return oldValue.map((isExpanded, internalIndex) => internalIndex === index ? !isExpanded : isExpanded);
+        });
+      } else onClickRow?.(item, index);
     },
-    [onClickRow]
+    [onClickRow, expandRow]
   );
   const onClickAllCheckboxesElement = (0, import_react23.useCallback)(
     (checked) => {
@@ -7219,6 +7253,14 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
     },
     [openedFilterColumn]
   );
+  const renderExpandedRow = (0, import_react23.useCallback)(
+    (...props2) => {
+      const expandColumn = columns.find((column) => column.type === "expand");
+      if (!expandColumn) return;
+      return expandColumn.render?.(...props2);
+    },
+    [columns]
+  );
   const dataAfterFilter = (0, import_react23.useMemo)(
     () => data.filter(
       (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
@@ -7336,7 +7378,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
           TableStyledComponent,
           {
             isStriped,
-            withHover: onClickRow !== void 0,
+            withHover: onClickRow !== void 0 || expandRow !== void 0,
             withStickyHeader,
             colorTheme,
             theme: theme2,
@@ -7344,7 +7386,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 ThStyledComponent,
                 {
-                  width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : void 0),
+                  width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
@@ -7378,15 +7420,24 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                "tr",
-                {
-                  className: onClickRow ? "isClickable" : void 0,
-                  onClick: () => onClickRowElement(item, rowIndex),
-                  children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
-                },
-                JSON.stringify(item) + rowIndex
-              )) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react23.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  "tr",
+                  {
+                    className: onClickRow || expandRow ? "isClickable" : void 0,
+                    onClick: () => onClickRowElement(item, rowIndex),
+                    children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      TdStyledComponent,
+                      {
+                        textAlign: column.align,
+                        children: renderCellContent(column, item, rowIndex)
+                      },
+                      column.type + column.label + colIndex
+                    ))
+                  }
+                ),
+                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, children: renderExpandedRow(item, rowIndex) }) })
+              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
               pageSize !== void 0 && pageCountInternal > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                 Div_default.column,
                 {
@@ -7598,20 +7649,367 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
 var Table2 = (0, import_react23.memo)(TableComponent);
 var Table_default = Table2;
 
-// src/components/Tabs.tsx
+// src/components/Tooltip.tsx
 var import_react24 = require("react");
+var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var tooltipContainerStyle = (props) => ({
+  top: import_styled_components12.css`
+      bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
+   `,
+  bottom: import_styled_components12.css`
+      top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
+   `,
+  left: import_styled_components12.css`
+      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
+      right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+   `,
+  right: import_styled_components12.css`
+      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
+      left: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+   `
+});
+var tooltipPositionStyle = (props) => ({
+  top: {
+    opened: import_styled_components12.css`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: import_styled_components12.css`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
+      `
+  },
+  bottom: {
+    opened: import_styled_components12.css`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: import_styled_components12.css`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
+      `
+  },
+  left: {
+    opened: import_styled_components12.css`
+         transform: translateY(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: import_styled_components12.css`
+         transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
+      `
+  },
+  right: {
+    opened: import_styled_components12.css`
+         transform: translateY(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: import_styled_components12.css`
+         transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
+      `
+  }
+});
+var TooltipContainer = import_styled_components12.default.div.withConfig({
+  shouldForwardProp: (prop) => !["theme", "position", "align", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
+})`
+   position: absolute;
+   opacity: ${(props) => props.isOpen ? 1 : 0};
+   pointer-events: ${(props) => props.isOpen ? "auto" : "none"};
+   transition: ${(props) => props.theme.styles.transition};
+   z-index: 1000;
+
+   ${(props) => tooltipContainerStyle(props)[props.position]}
+
+   ${(props) => props.isOpen ? tooltipPositionStyle(props)[props.position].opened : tooltipPositionStyle(props)[props.position].closed}
+`;
+var arrowStyle = (props, borderWidth) => ({
+  top: {
+    borderTopColor: props.color,
+    borderBottom: 0,
+    top: borderWidth ? -props.size : void 0,
+    left: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "left" ? props.sideSpace : void 0,
+    right: !borderWidth && props.align === "right" ? props.sideSpace : void 0,
+    bottom: -props.size + 1,
+    transform: !borderWidth && props.align === "center" ? "translateX(-50%)" : void 0
+  },
+  bottom: {
+    borderBottomColor: props.color,
+    borderTop: 0,
+    top: borderWidth ? borderWidth * 2 : -props.size + 1,
+    left: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "left" ? props.sideSpace : void 0,
+    right: !borderWidth && props.align === "right" ? props.sideSpace : void 0,
+    transform: !borderWidth && props.align === "center" ? "translateX(-50%);" : void 0
+  },
+  left: {
+    borderLeftColor: props.color,
+    borderRight: 0,
+    top: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "top" ? props.sideSpace : void 0,
+    bottom: !borderWidth && props.align === "bottom" ? props.sideSpace : void 0,
+    left: borderWidth ? -props.size : void 0,
+    right: -props.size + 1,
+    transform: !borderWidth && props.align === "center" ? "translateY(-50%)" : void 0
+  },
+  right: {
+    borderRightColor: props.color,
+    borderLeft: 0,
+    top: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "top" ? props.sideSpace : void 0,
+    bottom: !borderWidth && props.align === "bottom" ? props.sideSpace : void 0,
+    left: borderWidth ? borderWidth * 2 : -props.size + 1,
+    transform: !borderWidth && props.align === "center" ? "translateY(-50%);" : void 0
+  }
+});
+var Arrow = (0, import_react24.memo)(function Arrow2(props) {
+  const theme2 = useTheme();
+  const { position, size } = props;
+  const outerProps = (0, import_react24.useMemo)(
+    () => ({
+      ...props,
+      color: theme2.colors.border
+    }),
+    [props, theme2]
+  );
+  const borderWidth = 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Div_default,
+    {
+      position: "absolute",
+      width: 0,
+      height: 0,
+      border: `${size}px solid transparent`,
+      ...arrowStyle(outerProps)[position],
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Div_default,
+        {
+          position: "absolute",
+          width: 0,
+          height: 0,
+          border: `${size - borderWidth * 2}px solid transparent`,
+          ...arrowStyle(props, borderWidth)[position]
+        }
+      )
+    }
+  );
+});
+var TooltipComponent = (0, import_react24.forwardRef)(function Tooltip({
+  position = "bottom",
+  trigger = "hover",
+  align = "center",
+  content,
+  contentWidth,
+  contentMinWidth,
+  withArrow,
+  isSmall,
+  backgroundColor,
+  asContextMenu,
+  onOpen,
+  onClose,
+  children,
+  ...props
+}, ref) {
+  const theme2 = useTheme();
+  const triggerHolderRef = (0, import_react24.useRef)(null);
+  const contentRef = (0, import_react24.useRef)(null);
+  const tooltipContainerRef = (0, import_react24.useRef)(null);
+  const closeTimerRef = (0, import_react24.useRef)(void 0);
+  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
+  const [isOpenLate, setIsOpenLate] = (0, import_react24.useState)(false);
+  const arrowSize = withArrow ? theme2.styles.gap : 0;
+  const gap = theme2.styles.gap / 2;
+  const outsideScreenGap = theme2.styles.gap / 2;
+  const totalGap = arrowSize + gap;
+  const openTooltip = (0, import_react24.useCallback)(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    setIsOpen(true);
+    setIsOpenLate(true);
+    setTimeout(() => {
+      if (!tooltipContainerRef.current) return;
+      if (!contentRef.current) return;
+      const clientRects = tooltipContainerRef.current.getBoundingClientRect();
+      if (clientRects) {
+        const { width, height, x, y } = clientRects;
+        const topOutside = y < 0;
+        const bottomOutside = y + height > window.innerHeight;
+        const leftOutside = x < 0;
+        const rightOutside = x + width > window.innerWidth;
+        if (topOutside) contentRef.current.style.transform = `translateY(${y * -1 + outsideScreenGap}px)`;
+        if (bottomOutside)
+          contentRef.current.style.transform = `translateY(${window.innerHeight - (y + height) - totalGap}px)`;
+        if (leftOutside) contentRef.current.style.transform = `translateX(${x * -1 + outsideScreenGap}px)`;
+        if (rightOutside)
+          contentRef.current.style.transform = `translateX(${window.innerWidth - (x + width) - totalGap}px)`;
+      }
+    }, 1);
+    onOpen?.();
+  }, [onOpen, outsideScreenGap, totalGap]);
+  const closeTooltip = (0, import_react24.useCallback)(() => {
+    setIsOpen(false);
+    closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
+    onClose?.();
+  }, [onClose]);
+  const onMouseEnter = (0, import_react24.useCallback)(() => {
+    if (trigger === "hover") openTooltip();
+  }, [trigger, openTooltip]);
+  const onMouseLeave = (0, import_react24.useCallback)(() => {
+    if (trigger === "hover") closeTooltip();
+  }, [trigger, closeTooltip]);
+  const onClickHolder = (0, import_react24.useCallback)(
+    (event) => {
+      if (trigger === "click") {
+        if (!isOpen) openTooltip();
+        else if (triggerHolderRef.current?.contains(event.target)) closeTooltip();
+      }
+    },
+    [trigger, openTooltip, isOpen, closeTooltip]
+  );
+  const onClickOutside = (0, import_react24.useCallback)(
+    (event) => {
+      if (!isOpen) return;
+      if (trigger !== "click") return;
+      if (!contentRef.current?.contains(event.target) && !triggerHolderRef.current?.contains(event.target)) {
+        closeTooltip();
+      }
+    },
+    [trigger, isOpen, closeTooltip]
+  );
+  (0, import_react24.useEffect)(() => {
+    if (trigger === "click") {
+      document.addEventListener("mousedown", onClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", onClickOutside);
+      };
+    }
+  }, [trigger, onClickOutside]);
+  (0, import_react24.useImperativeHandle)(
+    ref,
+    () => {
+      return {
+        isOpen,
+        open: openTooltip,
+        close: closeTooltip
+      };
+    },
+    [isOpen, openTooltip, closeTooltip]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", onClick: onClickHolder, onMouseEnter, onMouseLeave, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", ref: triggerHolderRef, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      TooltipContainer,
+      {
+        theme: theme2,
+        position,
+        align,
+        withArrow,
+        arrowSize,
+        gap,
+        isOpen,
+        role: "tooltip",
+        ref: tooltipContainerRef,
+        children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Div_default.box,
+            {
+              position: "relative",
+              width: contentWidth,
+              minWidth: contentMinWidth,
+              backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
+              boxShadow: "0px 10px 20px #00000020",
+              paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
+              paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
+              overflow: asContextMenu ? "hidden" : void 0,
+              ...props,
+              children: content
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Div_default,
+            {
+              position: "absolute",
+              width: position === "left" || position === "right" ? totalGap : "100%",
+              height: position === "top" || position === "bottom" ? totalGap : "100%",
+              top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
+              bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
+              left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
+              right: position === "right" ? "100%" : position === "left" ? void 0 : 0
+            }
+          ),
+          withArrow && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Arrow,
+            {
+              position,
+              align,
+              sideSpace: theme2.styles.borderRadius,
+              size: arrowSize,
+              color: backgroundColor ?? theme2.colors.backgroundContent,
+              isOpen
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+});
+TooltipComponent.item = (0, import_react24.forwardRef)(function Item({ icon, text, description, isActive, onClick, onClickWithValue, value }, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: theme2.styles.space,
+      backgroundColor: theme2.colors.backgroundContent,
+      filterHover: "brightness(0.9)",
+      paddingBlock: theme2.styles.gap,
+      paddingInline: theme2.styles.space,
+      cursor: "pointer",
+      value,
+      onClick,
+      onClickWithValue,
+      ref,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name: icon, color: !isActive ? theme2.colors.textSecondary : void 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, children: text }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
+        ] })
+      ]
+    }
+  );
+});
+TooltipComponent.divider = (0, import_react24.forwardRef)(function DividerComponent(props, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
+});
+TooltipComponent.sectionTitle = (0, import_react24.forwardRef)(function SectionTitle({ text, ...props }, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Text_default,
+    {
+      fontSize: 12,
+      fontWeight: 700,
+      textTransform: "uppercase",
+      marginBlock: theme2.styles.gap / 2,
+      marginInline: theme2.styles.space,
+      ...props,
+      ref,
+      children: text
+    }
+  );
+});
+var Tooltip2 = (0, import_react24.memo)(TooltipComponent);
+Tooltip2.item = TooltipComponent.item;
+Tooltip2.divider = TooltipComponent.divider;
+Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
+var Tooltip_default = Tooltip2;
+
+// src/components/Tabs.tsx
+var import_react25 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = (0, import_react25.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { colorTheme, componentsState } = useBetterHtmlContextInternal();
-  const firstRenderPassedRef = (0, import_react24.useRef)(false);
-  const tabsRef = (0, import_react24.useRef)({});
-  const [selectedTab, setSelectedTab] = (0, import_react24.useState)(() => {
+  const firstRenderPassedRef = (0, import_react25.useRef)(false);
+  const tabsRef = (0, import_react25.useRef)({});
+  const [selectedTab, setSelectedTab] = (0, import_react25.useState)(() => {
     const selectedTabValue = tabs[0] ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
@@ -7620,9 +8018,9 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
     }
     return selectedTabValue;
   });
-  const [rerenderState, setRerenderState] = (0, import_react24.useState)(0);
+  const [rerenderState, setRerenderState] = (0, import_react25.useState)(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
-  const onClickTab = (0, import_react24.useCallback)(
+  const onClickTab = (0, import_react25.useCallback)(
     (tab) => {
       setSelectedTab(tab);
       onChange?.(tab);
@@ -7634,11 +8032,11 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
     },
     [onChange, name, urlQuery]
   );
-  const width = (0, import_react24.useMemo)(
+  const width = (0, import_react25.useMemo)(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
-  const leftSpacing = (0, import_react24.useMemo)(() => {
+  const leftSpacing = (0, import_react25.useMemo)(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
@@ -7646,7 +8044,7 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -7655,7 +8053,7 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
       clearTimeout(timeout);
     };
   }, []);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -7676,20 +8074,20 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
       }
     });
   }, [selectedTab, name]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
       );
     };
   }, []);
-  (0, import_react24.useImperativeHandle)(
+  (0, import_react25.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -7699,11 +8097,11 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           Div_default,
           {
             position: "relative",
@@ -7724,7 +8122,7 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
               tabsRef.current[tab] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -7737,7 +8135,7 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 Text_default,
                 {
                   fontWeight: 700,
@@ -7752,7 +8150,7 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
           tab
         );
       }) }),
-      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -7765,16 +8163,16 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
         }
       )
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
-  const thisTabGroupData = (0, import_react24.useMemo)(
+  const thisTabGroupData = (0, import_react25.useMemo)(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -7783,18 +8181,18 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { width: "100%", children }) : void 0;
 };
-var Tabs2 = (0, import_react24.memo)(TabsComponent);
+var Tabs2 = (0, import_react25.memo)(TabsComponent);
 Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-var import_react25 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
+var FoldableComponent = (0, import_react26.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
@@ -7809,27 +8207,27 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const bodyRef = (0, import_react25.useRef)(null);
+  const bodyRef = (0, import_react26.useRef)(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react25.useState)(500);
+  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react26.useState)(500);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = (0, import_react25.useCallback)(() => {
+  const open = (0, import_react26.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = (0, import_react25.useCallback)(() => {
+  const close = (0, import_react26.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = (0, import_react25.useCallback)(() => {
+  const toggleOpen = (0, import_react26.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!bodyRef.current) return;
     setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
   }, [isOpen]);
-  (0, import_react25.useImperativeHandle)(
+  (0, import_react26.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -7841,8 +8239,8 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       Div_default.row,
       {
         width: "100%",
@@ -7854,15 +8252,15 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
-            image && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+            image && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Icon_default,
             {
               name: "chevronDown",
@@ -7873,8 +8271,8 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Divider_default.horizontal, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
@@ -7883,14 +8281,14 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
-FoldableComponent.box = (0, import_react25.forwardRef)(function Box3({ ...props }, ref) {
+FoldableComponent.box = (0, import_react26.forwardRef)(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
@@ -7903,7 +8301,7 @@ FoldableComponent.box = (0, import_react25.forwardRef)(function Box3({ ...props
     }
   );
 });
-var Foldable2 = (0, import_react25.memo)(FoldableComponent);
+var Foldable2 = (0, import_react26.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
@@ -7943,6 +8341,7 @@ var reactRouterDomPlugin = {
   Tabs,
   Text,
   ToggleInput,
+  Tooltip,
   colorThemeControls,
   countries,
   darkenColor,