nntc-ui 0.0.25 → 0.0.27

package/index.css

@@ -1323,6 +1323,87 @@ button[disabled] {
   padding: 66px 8px 8px 8px;
 }
 
+/* src/components/view/Tooltip/tooltip.module.css */
+.tooltip_trigger {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+.tooltip_content {
+  z-index: 999;
+  max-width: 280px;
+  padding: 6px 8px;
+  font-size: var(--text-caption-size);
+  font-weight: var(--text-caption-weight);
+  line-height: var(--text-caption-height);
+  color: var(--theme-alert-default-color);
+  text-align: center;
+  letter-spacing: var(--text-caption-letter);
+  background-color: var(--theme-alert-default-background);
+  border-radius: 4px;
+  box-shadow:
+    0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+    0px 2px 1px 0px rgba(0, 0, 0, 0.12),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14);
+}
+.tooltip_content.tooltip_success {
+  color: var(--theme-alert-success-color);
+  background-color: var(--theme-alert-success-background);
+}
+.tooltip_content.tooltip_warning {
+  color: var(--theme-alert-warning-color);
+  background-color: var(--theme-alert-warning-background);
+}
+.tooltip_content.tooltip_error {
+  color: var(--theme-alert-error-color);
+  background-color: var(--theme-alert-error-background);
+}
+.tooltip_content.tooltip_info {
+  color: var(--theme-alert-info-color);
+  background-color: var(--theme-alert-info-background);
+}
+.tooltip_content > .tooltip_arrow {
+  width: 6px;
+  height: 6px;
+  --arrow-color: var(--theme-alert-default-background);
+}
+.tooltip_content.tooltip_success > .tooltip_arrow {
+  --arrow-color: var(--theme-alert-success-background);
+}
+.tooltip_content.tooltip_warning > .tooltip_arrow {
+  --arrow-color: var(--theme-alert-warning-background);
+}
+.tooltip_content.tooltip_error > .tooltip_arrow {
+  --arrow-color: var(--theme-alert-error-background);
+}
+.tooltip_content.tooltip_info > .tooltip_arrow {
+  --arrow-color: var(--theme-alert-info-background);
+}
+.tooltip_content > .tooltip_arrow.tooltip_topArrow {
+  border-top: 6px solid var(--arrow-color);
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  transform: translate(0, 6px);
+}
+.tooltip_content > .tooltip_arrow.tooltip_bottomArrow {
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid var(--arrow-color);
+  border-left: 6px solid transparent;
+  transform: translate(0, -6px);
+}
+.tooltip_content > .tooltip_arrow.tooltip_leftArrow {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid var(--arrow-color);
+  transform: translate(6px, 0);
+}
+.tooltip_content > .tooltip_arrow.tooltip_rightArrow {
+  border-top: 6px solid transparent;
+  border-right: 6px solid var(--arrow-color);
+  border-bottom: 6px solid transparent;
+  transform: translate(-6px, 0);
+}
+
 /* src/components/navigation/Tabs/tabs.module.css */
 .tabs_root {
   display: flex;
@@ -1394,12 +1475,22 @@ button[disabled] {
   align-items: center;
   padding: 0 16px;
 }
+.tabs_tabTitle.tabs_iconOnly {
+  gap: 0;
+  padding: 0 8px;
+}
 .tabs_vertical.tabs_medium .tabs_tabTitle {
   padding: 0 8px;
 }
 .tabs_vertical.tabs_small .tabs_tabTitle {
   padding: 0;
 }
+.tabs_vertical.tabs_medium .tabs_tabTitle.tabs_iconOnly {
+  padding: 0 4px;
+}
+.tabs_vertical.tabs_small .tabs_tabTitle.tabs_iconOnly {
+  padding: 0;
+}
 .tabs_tabTitle > span {
   font-size: var(--text-subtitle2-size);
   font-weight: var(--text-subtitle2-weight);
@@ -1444,87 +1535,6 @@ button[disabled] {
   width: 600px;
 }
 
-/* src/components/view/Tooltip/tooltip.module.css */
-.tooltip_trigger {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-}
-.tooltip_content {
-  z-index: 999;
-  max-width: 280px;
-  padding: 6px 8px;
-  font-size: var(--text-caption-size);
-  font-weight: var(--text-caption-weight);
-  line-height: var(--text-caption-height);
-  color: var(--theme-alert-default-color);
-  text-align: center;
-  letter-spacing: var(--text-caption-letter);
-  background-color: var(--theme-alert-default-background);
-  border-radius: 4px;
-  box-shadow:
-    0px 1px 3px 0px rgba(0, 0, 0, 0.2),
-    0px 2px 1px 0px rgba(0, 0, 0, 0.12),
-    0px 1px 1px 0px rgba(0, 0, 0, 0.14);
-}
-.tooltip_content.tooltip_success {
-  color: var(--theme-alert-success-color);
-  background-color: var(--theme-alert-success-background);
-}
-.tooltip_content.tooltip_warning {
-  color: var(--theme-alert-warning-color);
-  background-color: var(--theme-alert-warning-background);
-}
-.tooltip_content.tooltip_error {
-  color: var(--theme-alert-error-color);
-  background-color: var(--theme-alert-error-background);
-}
-.tooltip_content.tooltip_info {
-  color: var(--theme-alert-info-color);
-  background-color: var(--theme-alert-info-background);
-}
-.tooltip_content > .tooltip_arrow {
-  width: 6px;
-  height: 6px;
-  --arrow-color: var(--theme-alert-default-background);
-}
-.tooltip_content.tooltip_success > .tooltip_arrow {
-  --arrow-color: var(--theme-alert-success-background);
-}
-.tooltip_content.tooltip_warning > .tooltip_arrow {
-  --arrow-color: var(--theme-alert-warning-background);
-}
-.tooltip_content.tooltip_error > .tooltip_arrow {
-  --arrow-color: var(--theme-alert-error-background);
-}
-.tooltip_content.tooltip_info > .tooltip_arrow {
-  --arrow-color: var(--theme-alert-info-background);
-}
-.tooltip_content > .tooltip_arrow.tooltip_topArrow {
-  border-top: 6px solid var(--arrow-color);
-  border-right: 6px solid transparent;
-  border-left: 6px solid transparent;
-  transform: translate(0, 6px);
-}
-.tooltip_content > .tooltip_arrow.tooltip_bottomArrow {
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--arrow-color);
-  border-left: 6px solid transparent;
-  transform: translate(0, -6px);
-}
-.tooltip_content > .tooltip_arrow.tooltip_leftArrow {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid var(--arrow-color);
-  transform: translate(6px, 0);
-}
-.tooltip_content > .tooltip_arrow.tooltip_rightArrow {
-  border-top: 6px solid transparent;
-  border-right: 6px solid var(--arrow-color);
-  border-bottom: 6px solid transparent;
-  transform: translate(-6px, 0);
-}
-
 /* src/components/view/Modal/modal.module.css */
 .modal_root {
   position: absolute;

package/index.d.ts

@@ -210,6 +210,7 @@ interface Item$1<T> {
     name?: string;
     value: T;
     icon?: ReactNode | string;
+    onClick?: () => void;
 }
 
 type Size$1 = 'medium' | 'small';
@@ -222,6 +223,7 @@ interface Props$8<T> {
     isVertical?: boolean;
     disableBorder?: boolean;
     allowDeselect?: boolean;
+    showTooltips?: boolean;
 }
 declare function Tabs<T>(props: UiProps<Props$8<T>>): react_jsx_runtime.JSX.Element;
 

package/index.js

@@ -1950,166 +1950,12 @@ function Layout(props) {
 }
 
 // src/components/navigation/Tabs/Tabs.tsx
-import classnames15 from "classnames";
-import { useEffect as useEffect5, useState as useState8 } from "react";
-
-// src/components/navigation/Tabs/tabs.module.css
-var tabs_exports = {};
-__export(tabs_exports, {
-  default: () => tabs_default,
-  disableBorder: () => disableBorder,
-  filled: () => filled6,
-  medium: () => medium10,
-  root: () => root16,
-  selected: () => selected2,
-  selectedFilled: () => selectedFilled,
-  small: () => small10,
-  tab: () => tab,
-  tabBorder: () => tabBorder,
-  tabBorderVertical: () => tabBorderVertical,
-  tabFilled: () => tabFilled,
-  tabIcon: () => tabIcon,
-  tabTitle: () => tabTitle,
-  tabVertical: () => tabVertical,
-  "tabs-story-wrapper": () => tabs_story_wrapper,
-  vertical: () => vertical
-});
-var root16 = "tabs_root";
-var vertical = "tabs_vertical";
-var disableBorder = "tabs_disableBorder";
-var medium10 = "tabs_medium";
-var small10 = "tabs_small";
-var filled6 = "tabs_filled";
-var tab = "tabs_tab";
-var tabVertical = "tabs_tabVertical";
-var tabFilled = "tabs_tabFilled";
-var selectedFilled = "tabs_selectedFilled";
-var tabTitle = "tabs_tabTitle";
-var tabBorder = "tabs_tabBorder";
-var selected2 = "tabs_selected";
-var tabBorderVertical = "tabs_tabBorderVertical";
-var tabIcon = "tabs_tabIcon";
-var tabs_story_wrapper = "tabs_tabs-story-wrapper";
-var tabs_default = {
-  root: root16,
-  vertical,
-  disableBorder,
-  medium: medium10,
-  small: small10,
-  filled: filled6,
-  tab,
-  tabVertical,
-  tabFilled,
-  selectedFilled,
-  tabTitle,
-  tabBorder,
-  selected: selected2,
-  tabBorderVertical,
-  tabIcon,
-  "tabs-story-wrapper": tabs_story_wrapper
-};
-
-// src/components/navigation/Tabs/Tabs.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
-function Tabs(props) {
-  const {
-    items: items2,
-    defaultSelected,
-    onChange,
-    size = "medium",
-    filled: filled7 = false,
-    isVertical = false,
-    disableBorder: disableBorder2 = false,
-    allowDeselect = false,
-    classes
-  } = props;
-  const [isMounted, setIsMounted] = useState8(false);
-  const [selectedTab, setSelectedTab] = useState8(defaultSelected);
-  const handleClick = (newValue) => () => {
-    if (allowDeselect && selectedTab === newValue) {
-      setSelectedTab(void 0);
-    } else {
-      setSelectedTab(newValue);
-    }
-  };
-  useEffect5(() => {
-    if (isMounted) {
-      onChange?.(selectedTab);
-    }
-    if (!isMounted) {
-      setIsMounted(true);
-    }
-  }, [selectedTab]);
-  return /* @__PURE__ */ jsx24(
-    "div",
-    {
-      className: classnames15(
-        root16,
-        filled7 && filled6,
-        isVertical && vertical,
-        disableBorder2 && disableBorder,
-        tabs_exports[size],
-        classes?.root
-      ),
-      children: items2.map((item3) => /* @__PURE__ */ jsxs13(
-        "div",
-        {
-          className: classnames15(
-            tab,
-            filled7 && tabFilled,
-            isVertical && tabVertical,
-            disableBorder2 && disableBorder,
-            selectedTab === item3.value ? selected2 : void 0,
-            selectedTab === item3.value && filled7 ? selectedFilled : void 0,
-            classes?.tab,
-            selectedTab === item3.value ? classes?.tabSelected : void 0
-          ),
-          onClick: handleClick(item3.value),
-          children: [
-            /* @__PURE__ */ jsxs13(
-              "div",
-              {
-                className: classnames15(
-                  tabTitle,
-                  classes?.tabTitle,
-                  selectedTab === item3.value ? classes?.tabSelectedTitle : void 0
-                ),
-                children: [
-                  item3.icon && /* @__PURE__ */ jsx24("span", { className: tabIcon, children: typeof item3.icon === "string" ? /* @__PURE__ */ jsx24("span", { className: tabIcon, dangerouslySetInnerHTML: { __html: item3.icon } }) : item3.icon }),
-                  item3.name && /* @__PURE__ */ jsx24("span", { title: item3.name, children: item3.name })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx24(
-              "div",
-              {
-                className: classnames15(
-                  tabBorder,
-                  isVertical && tabBorderVertical,
-                  disableBorder2 && disableBorder,
-                  classes?.tabBorder,
-                  selectedTab === item3.value ? classes?.tabSelectedBorder : void 0
-                )
-              }
-            )
-          ]
-        },
-        `tab-${item3.value}`
-      ))
-    }
-  );
-}
-
-// src/components/view/VirtualTable/VirtualTable.tsx
-import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
-import classnames23 from "classnames";
-import dayjs4 from "dayjs";
-import { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef10, useState as useState14 } from "react";
+import classnames17 from "classnames";
+import { useEffect as useEffect5, useState as useState10 } from "react";
 
 // src/components/view/Tooltip/Tooltip.tsx
-import classnames17 from "classnames";
-import { useRef as useRef8, useState as useState10 } from "react";
+import classnames16 from "classnames";
+import { useRef as useRef8, useState as useState9 } from "react";
 
 // src/components/view/Tooltip/tooltip.module.css
 var tooltip_exports = {};
@@ -2154,7 +2000,7 @@ var tooltip_default = {
 
 // src/components/view/Tooltip/ui/TooltipContent/TooltipContent.tsx
 import { FloatingPortal as FloatingPortal2, useMergeRefs as useMergeRefs3 } from "@floating-ui/react";
-import classnames16 from "classnames";
+import classnames15 from "classnames";
 import { forwardRef as forwardRef5, useContext as useContext5 } from "react";
 
 // src/components/view/Tooltip/ui/TooltipProvider/constants/TooltipContext.ts
@@ -2162,7 +2008,7 @@ import { createContext as createContext2 } from "react";
 var TooltipContext = createContext2(null);
 
 // src/components/view/Tooltip/ui/TooltipContent/TooltipContent.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var TooltipContent = forwardRef5(function TooltipContent2({ styles, style, children: children2, ...props }, propRef) {
   const context = useContext5(TooltipContext);
   if (!context) {
@@ -2203,7 +2049,7 @@ var TooltipContent = forwardRef5(function TooltipContent2({ styles, style, child
     default:
       break;
   }
-  return /* @__PURE__ */ jsx25(FloatingPortal2, { root: otherContext.root, children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx24(FloatingPortal2, { root: otherContext.root, children: /* @__PURE__ */ jsxs13(
     "div",
     {
       ref,
@@ -2214,10 +2060,10 @@ var TooltipContent = forwardRef5(function TooltipContent2({ styles, style, child
       ...otherContext.getFloatingProps(props),
       children: [
         children2,
-        !otherContext.withoutArrow && /* @__PURE__ */ jsx25(
+        !otherContext.withoutArrow && /* @__PURE__ */ jsx24(
           "div",
           {
-            className: styles && classnames16(styles.arrow, styles[arrowClassName]),
+            className: styles && classnames15(styles.arrow, styles[arrowClassName]),
             ref: otherContext.arrowRef,
             style: {
               position: "absolute",
@@ -2247,7 +2093,7 @@ import {
   useInteractions as useInteractions2,
   useRole as useRole2
 } from "@floating-ui/react";
-import { useMemo as useMemo4, useState as useState9 } from "react";
+import { useMemo as useMemo4, useState as useState8 } from "react";
 function useTooltip(props = {}) {
   const {
     initialOpen = false,
@@ -2258,7 +2104,7 @@ function useTooltip(props = {}) {
     arrowRef,
     root: root23
   } = props;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState9(initialOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState8(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
   const data = useFloating2({
@@ -2303,17 +2149,17 @@ function useTooltip(props = {}) {
 }
 
 // src/components/view/Tooltip/ui/TooltipProvider/TooltipProvider.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var TooltipProvider = (props) => {
   const { children: children2, ...options } = props;
   const tooltip = useTooltip(options);
-  return /* @__PURE__ */ jsx26(TooltipContext.Provider, { value: tooltip, children: children2 });
+  return /* @__PURE__ */ jsx25(TooltipContext.Provider, { value: tooltip, children: children2 });
 };
 
 // src/components/view/Tooltip/ui/TooltipTrigger/TooltipTrigger.tsx
 import { useMergeRefs as useMergeRefs4 } from "@floating-ui/react";
 import { cloneElement as cloneElement2, forwardRef as forwardRef6, isValidElement as isValidElement2, useContext as useContext6 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var TooltipTrigger = forwardRef6(
   function TooltipTrigger2({ children: children2, wrapTrigger = false, ...props }, propRef) {
     const context = useContext6(TooltipContext);
@@ -2333,12 +2179,12 @@ var TooltipTrigger = forwardRef6(
         })
       );
     }
-    return /* @__PURE__ */ jsx27("div", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children: children2 });
+    return /* @__PURE__ */ jsx26("div", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children: children2 });
   }
 );
 
 // src/components/view/Tooltip/Tooltip.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function Tooltip(props) {
   const {
     label: label7,
@@ -2352,7 +2198,7 @@ function Tooltip(props) {
     children: children2,
     classes
   } = props;
-  const [showTooltip, setShowTooltip] = useState10(false);
+  const [showTooltip, setShowTooltip] = useState9(false);
   const arrowRef = useRef8(null);
   if (!label7) {
     return children2;
@@ -2360,7 +2206,7 @@ function Tooltip(props) {
   if (!children2) {
     return null;
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     TooltipProvider,
     {
       placement,
@@ -2371,19 +2217,19 @@ function Tooltip(props) {
       arrowRef,
       root: root23,
       children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           TooltipTrigger,
           {
             wrapTrigger,
             onClick: clickable ? () => setShowTooltip((prev) => !prev) : void 0,
-            className: wrapTrigger ? classnames17(trigger2, classes?.trigger) : void 0,
+            className: wrapTrigger ? classnames16(trigger2, classes?.trigger) : void 0,
             children: children2
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           TooltipContent,
           {
-            className: classnames17(content2, tooltip_exports[alertType], classes?.content),
+            className: classnames16(content2, tooltip_exports[alertType], classes?.content),
             styles: tooltip_exports,
             children: label7
           }
@@ -2393,6 +2239,177 @@ function Tooltip(props) {
   );
 }
 
+// src/components/navigation/Tabs/tabs.module.css
+var tabs_exports = {};
+__export(tabs_exports, {
+  default: () => tabs_default,
+  disableBorder: () => disableBorder,
+  filled: () => filled6,
+  iconOnly: () => iconOnly,
+  medium: () => medium10,
+  root: () => root16,
+  selected: () => selected2,
+  selectedFilled: () => selectedFilled,
+  small: () => small10,
+  tab: () => tab,
+  tabBorder: () => tabBorder,
+  tabBorderVertical: () => tabBorderVertical,
+  tabFilled: () => tabFilled,
+  tabIcon: () => tabIcon,
+  tabTitle: () => tabTitle,
+  tabVertical: () => tabVertical,
+  "tabs-story-wrapper": () => tabs_story_wrapper,
+  vertical: () => vertical
+});
+var root16 = "tabs_root";
+var vertical = "tabs_vertical";
+var disableBorder = "tabs_disableBorder";
+var medium10 = "tabs_medium";
+var small10 = "tabs_small";
+var filled6 = "tabs_filled";
+var tab = "tabs_tab";
+var tabVertical = "tabs_tabVertical";
+var tabFilled = "tabs_tabFilled";
+var selectedFilled = "tabs_selectedFilled";
+var tabTitle = "tabs_tabTitle";
+var iconOnly = "tabs_iconOnly";
+var tabBorder = "tabs_tabBorder";
+var selected2 = "tabs_selected";
+var tabBorderVertical = "tabs_tabBorderVertical";
+var tabIcon = "tabs_tabIcon";
+var tabs_story_wrapper = "tabs_tabs-story-wrapper";
+var tabs_default = {
+  root: root16,
+  vertical,
+  disableBorder,
+  medium: medium10,
+  small: small10,
+  filled: filled6,
+  tab,
+  tabVertical,
+  tabFilled,
+  selectedFilled,
+  tabTitle,
+  iconOnly,
+  tabBorder,
+  selected: selected2,
+  tabBorderVertical,
+  tabIcon,
+  "tabs-story-wrapper": tabs_story_wrapper
+};
+
+// src/components/navigation/Tabs/Tabs.tsx
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+function Tabs(props) {
+  const {
+    items: items2,
+    defaultSelected,
+    onChange,
+    size = "medium",
+    filled: filled7 = false,
+    isVertical = false,
+    disableBorder: disableBorder2 = false,
+    allowDeselect = false,
+    showTooltips = false,
+    classes
+  } = props;
+  const [isMounted, setIsMounted] = useState10(false);
+  const [selectedTab, setSelectedTab] = useState10(defaultSelected);
+  const handleClick = (item3) => () => {
+    if (item3.onClick) {
+      item3.onClick();
+      return;
+    }
+    if (allowDeselect && selectedTab === item3.value) {
+      setSelectedTab(void 0);
+    } else {
+      setSelectedTab(item3.value);
+    }
+  };
+  useEffect5(() => {
+    if (isMounted) {
+      onChange?.(selectedTab);
+    }
+    if (!isMounted) {
+      setIsMounted(true);
+    }
+  }, [selectedTab]);
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      className: classnames17(
+        root16,
+        filled7 && filled6,
+        isVertical && vertical,
+        disableBorder2 && disableBorder,
+        tabs_exports[size],
+        classes?.root
+      ),
+      children: items2.map((item3) => {
+        const isButton = !!item3.onClick;
+        const isSelected = !isButton && selectedTab === item3.value;
+        const tabContent = /* @__PURE__ */ jsxs15(
+          "div",
+          {
+            className: classnames17(
+              tab,
+              filled7 && tabFilled,
+              isVertical && tabVertical,
+              disableBorder2 && disableBorder,
+              isSelected ? selected2 : void 0,
+              isSelected && filled7 ? selectedFilled : void 0,
+              classes?.tab,
+              isSelected ? classes?.tabSelected : void 0
+            ),
+            onClick: handleClick(item3),
+            children: [
+              /* @__PURE__ */ jsxs15(
+                "div",
+                {
+                  className: classnames17(
+                    tabTitle,
+                    showTooltips && item3.icon && iconOnly,
+                    classes?.tabTitle,
+                    isSelected ? classes?.tabSelectedTitle : void 0
+                  ),
+                  children: [
+                    item3.icon && /* @__PURE__ */ jsx28("span", { className: tabIcon, children: typeof item3.icon === "string" ? /* @__PURE__ */ jsx28("span", { className: tabIcon, dangerouslySetInnerHTML: { __html: item3.icon } }) : item3.icon }),
+                    !showTooltips && item3.name && /* @__PURE__ */ jsx28("span", { title: item3.name, children: item3.name })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx28(
+                "div",
+                {
+                  className: classnames17(
+                    tabBorder,
+                    isVertical && tabBorderVertical,
+                    disableBorder2 && disableBorder,
+                    classes?.tabBorder,
+                    isSelected ? classes?.tabSelectedBorder : void 0
+                  )
+                }
+              )
+            ]
+          },
+          `tab-${item3.value}`
+        );
+        if (showTooltips && item3.name) {
+          return /* @__PURE__ */ jsx28(Tooltip, { label: item3.name, placement: isVertical ? "right" : "top", children: tabContent }, `tab-${item3.value}`);
+        }
+        return tabContent;
+      })
+    }
+  );
+}
+
+// src/components/view/VirtualTable/VirtualTable.tsx
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import classnames23 from "classnames";
+import dayjs4 from "dayjs";
+import { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef10, useState as useState14 } from "react";
+
 // src/utils/toFirstLetterUpperCase.ts
 var toFirstLetterUpperCase = (name) => {
   return name[0].toUpperCase() + name.substring(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",