@trackunit/react-components 0.1.205 → 0.1.209

package/index.cjs.js

@@ -16,6 +16,7 @@ var react = require('@floating-ui/react');
 var usePortal = require('react-useportal');
 var reactRouterDom = require('react-router-dom');
 var reactHelmetAsync = require('react-helmet-async');
+var reactTabs = require('@radix-ui/react-tabs');
 var dateFns = require('date-fns');
 var lodash = require('lodash');
 
@@ -1870,10 +1871,17 @@ const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom",
     return (jsxRuntime.jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxRuntime.jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsxRuntime.jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsxRuntime.jsx("div", { children: typeof children === "string" ? jsxRuntime.jsx("p", { children: children }) : children }), link ? (jsxRuntime.jsx("a", { href: link, children: jsxRuntime.jsx(Icon, { name: "ArrowRightCircle" }) })) : null] }) })] }) }));
 };
 
+const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white"], {
+    variants: {
+        withBorder: {
+            true: ["border-b", "border-b-secondary-200"],
+            false: "",
+        },
+    },
+});
 const cvaPageHeader = cssClassVarianceUtilities.cvaMerge([
     "min-h-[72px]",
     "box-border",
-    "bg-white",
     "px-6",
     "py-5",
     "flex",
@@ -1882,8 +1890,6 @@ const cvaPageHeader = cssClassVarianceUtilities.cvaMerge([
     "gap-x-4",
     "gap-y-1",
     "justify-between",
-    "border-b",
-    "border-b-secondary-200",
 ]);
 const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
 const cvaPageHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-x-4", "items-center"]);
@@ -1904,8 +1910,11 @@ const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex",
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
+const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
+            className: `${className} tu-page-header`,
+            withBorder: !Boolean(tabsList),
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -2167,116 +2176,87 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     }) }))) }))) : null] }));
 };
 
+const cvaTabsRoot = cssClassVarianceUtilities.cvaMerge([]);
+const cvaTabList = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-row",
+    "border-b",
+    "border-b-slate-200",
+    "overflow-auto",
+    "no-scrollbar",
+]);
+const cvaTabContent = cssClassVarianceUtilities.cvaMerge([]);
 const cvaTab = cssClassVarianceUtilities.cvaMerge([
-    "mb-px",
-    "box-content",
     "flex",
-    "h-12",
-    "min-w-0",
-    "cursor-pointer items-center",
-    "justify-center ",
+    "items-center",
+    "justify-center",
     "gap-2",
-    "border-b-4",
-    "px-1",
-    "font-medium",
+    "text-sm",
+    "md:text-base",
+    "px-4",
+    "md:px-6",
+    "py-2.5",
+    "cursor-pointer",
     "transition",
     "duration-200",
     "ease-in-out",
+    "whitespace-nowrap",
+    "data-[state=active]:border-b-2",
+    "data-[state=active]:border-b-blue-600",
+    "data-[state=active]:font-semibold",
+    "data-[state=active]:text-slate-900",
+    "data-[state=inactive]:font-medium",
+    "data-[state=inactive]:text-slate-700",
+    "data-[state=inactive]:hover:border-b-slate-400",
+    "data-[state=inactive]:hover:text-slate-900",
+    "disabled:cursor-not-allowed",
+    "data-[state=active]disabled:text-slate-400",
+    "data-[state=inactive]:disabled:text-slate-400",
 ], {
     variants: {
-        isSelected: {
-            true: "border-b-blue-600 hover:text-neutral-500",
-            false: "border-neutral-200 text-neutral-500 hover:border-b-neutral-500",
-        },
         isFullWidth: {
             true: "w-full",
             false: "",
         },
     },
     defaultVariants: {
-        isSelected: false,
         isFullWidth: false,
     },
 });
-cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "mr-4", "overflow-hidden"]);
-const cvaTabs = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
-const cvaTabsPanels = cssClassVarianceUtilities.cvaMerge(["mt-4", "flex", "h-full"]);
-const cvaTabsPanel = cssClassVarianceUtilities.cvaMerge([], {
-    variants: {
-        isSelected: {
-            true: "flex-1",
-            false: "grow-0",
-        },
-    },
-    defaultVariants: {
-        isSelected: false,
-    },
-});
-const cvaTabPanel = cssClassVarianceUtilities.cvaMerge(["flex-1"]);
-const cvaTabsContainer = cssClassVarianceUtilities.cvaMerge([
-    "m-0",
-    "flex",
-    "list-none",
-    "items-center",
-    "gap-x-4",
-    "border-b",
-    "border-solid",
-    "border-neutral-100",
-    "p-0",
-]);
 
 /**
- *
+ * Wrapper for radix tab component.
+ * We add a custom implementation of the asChild prop to make it easy to make the child element look like other tabs.
  */
-const Tab = ({ onTabClick, isFullWidth = false, iconName, isSelected = false, label, dataTestId, suffix, }) => {
-    return (jsxRuntime.jsxs("li", { onClick: onTabClick, "data-testid": dataTestId, role: "tab", className: cvaTab({ isSelected, isFullWidth }), children: [iconName && jsxRuntime.jsx(Icon, { name: iconName, size: "small" }), label, suffix] }));
+const Tab = (_a) => {
+    var { value, isFullWidth = false, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true } = _a, rest = __rest(_a, ["value", "isFullWidth", "iconName", "dataTestId", "className", "children", "suffix", "asChild", "appendTabStylesToChildIfAsChild"]);
+    const renderContent = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName && jsxRuntime.jsx(Icon, { name: iconName, size: "small" }), React__default["default"].isValidElement(children) ? children.props.children : children, suffix] }));
+    const commonProps = Object.assign({ className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className }, rest);
+    return (jsxRuntime.jsx(reactTabs.Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React__default["default"].cloneElement(children, Object.assign(Object.assign({}, commonProps), { children: renderContent() }))) : (jsxRuntime.jsx("button", Object.assign({}, commonProps, { "data-testid": dataTestId, children: renderContent() }))) }));
 };
 
 /**
- *
+ * Wrapper for radix tab content component.
  */
-const TabPanel = ({ id, label, iconName, suffix, className, dataTestId, children }) => {
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId && `${dataTestId}-panel`, className: cvaTabPanel({ className }), children: children }));
+const TabContent = (_a) => {
+    var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
+    return (jsxRuntime.jsx(reactTabs.Content, Object.assign({ "data-testid": `${dataTestId}-content`, className: cvaTabContent({ className }) }, rest, { children: children })));
 };
 
 /**
- * Represents a set of tabs used for navigating content.
+ * Wrapper for radix tab list component.
  */
-const Tabs = ({ defaultSelectedTabId, children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, }) => {
-    const getDefaultedSelectedTabId = () => {
-        if (defaultSelectedTabId) {
-            return defaultSelectedTabId;
-        }
-        const firstChild = React.Children.toArray(children)[0];
-        return firstChild.props.id;
-    };
-    const [selectedTabId, setSelectedTabId] = React.useState(getDefaultedSelectedTabId());
-    React.useEffect(() => {
-        if (defaultSelectedTabId) {
-            setSelectedTabId(defaultSelectedTabId);
-        }
-    }, [defaultSelectedTabId]);
-    const isTabSelected = (panel) => {
-        return panel.id === selectedTabId;
-    };
-    const handleTabClick = (panel) => {
-        if (selectedTabId !== panel.id) {
-            if (onSelectedTabChanged) {
-                onSelectedTabChanged(panel.id);
-            }
-            setSelectedTabId(panel.id);
-        }
-    };
-    return (jsxRuntime.jsxs("div", { className: cvaTabs({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("ol", { role: "tablist", className: cvaTabsContainer(), children: React.Children.map(children, child => {
-                    const panel = child.props;
-                    return panel ? (jsxRuntime.jsx(Tab, { onTabClick: () => handleTabClick(panel), isSelected: panel.id === selectedTabId, isFullWidth: fullWidth, label: panel.label, iconName: panel.iconName, suffix: panel.suffix, dataTestId: panel.dataTestId })) : null;
-                }) }), jsxRuntime.jsx("div", { className: cvaTabsPanels(), children: React.Children.map(children, child => {
-                    const panel = child === null || child === void 0 ? void 0 : child.props;
-                    if (!panel || (panel.id !== selectedTabId && !forceRender)) {
-                        return null;
-                    }
-                    return (jsxRuntime.jsx("div", { className: cvaTabsPanel({ isSelected: isTabSelected(panel) }), children: jsxRuntime.jsx(TabPanel, Object.assign({}, panel)) }));
-                }) })] }));
+const TabList = (_a) => {
+    var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
+    return (jsxRuntime.jsx(reactTabs.List, Object.assign({ "data-testid": dataTestId, className: cvaTabList({ className }) }, rest, { children: children })));
+};
+
+/**
+ * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
+ */
+const Tabs = (_a) => {
+    var { children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged } = _a, rest = __rest(_a, ["children", "forceRender", "className", "dataTestId", "fullWidth", "onSelectedTabChanged"]);
+    return (jsxRuntime.jsx(reactTabs.Root, Object.assign({ className: cvaTabsRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
 
 const cvaTimeline = cssClassVarianceUtilities.cvaMerge("ml-4");
@@ -3055,7 +3035,8 @@ exports.Spacer = Spacer;
 exports.Spinner = Spinner;
 exports.StarButton = StarButton;
 exports.Tab = Tab;
-exports.TabPanel = TabPanel;
+exports.TabContent = TabContent;
+exports.TabList = TabList;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;

package/index.esm.js

@@ -13,6 +13,7 @@ import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismis
 import usePortal from 'react-useportal';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
+import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
 import { format, formatDistance } from 'date-fns';
 import { isEqual } from 'lodash';
 
@@ -1841,10 +1842,17 @@ const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom",
     return (jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsx(PopoverContent, { children: jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsx("div", { children: typeof children === "string" ? jsx("p", { children: children }) : children }), link ? (jsx("a", { href: link, children: jsx(Icon, { name: "ArrowRightCircle" }) })) : null] }) })] }) }));
 };
 
+const cvaPageHeaderContainer = cvaMerge(["bg-white"], {
+    variants: {
+        withBorder: {
+            true: ["border-b", "border-b-secondary-200"],
+            false: "",
+        },
+    },
+});
 const cvaPageHeader = cvaMerge([
     "min-h-[72px]",
     "box-border",
-    "bg-white",
     "px-6",
     "py-5",
     "flex",
@@ -1853,8 +1861,6 @@ const cvaPageHeader = cvaMerge([
     "gap-x-4",
     "gap-y-1",
     "justify-between",
-    "border-b",
-    "border-b-secondary-200",
 ]);
 const cvaPageHeaderHeading = cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
 const cvaPageHeaderHeadingContainer = cvaMerge(["flex", "gap-x-4", "items-center"]);
@@ -1875,8 +1881,11 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
-    return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
+const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, }) => {
+    return (jsxs("div", { className: cvaPageHeaderContainer({
+            className: `${className} tu-page-header`,
+            withBorder: !Boolean(tabsList),
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -2138,116 +2147,87 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     }) }))) }))) : null] }));
 };
 
+const cvaTabsRoot = cvaMerge([]);
+const cvaTabList = cvaMerge([
+    "flex",
+    "flex-row",
+    "border-b",
+    "border-b-slate-200",
+    "overflow-auto",
+    "no-scrollbar",
+]);
+const cvaTabContent = cvaMerge([]);
 const cvaTab = cvaMerge([
-    "mb-px",
-    "box-content",
     "flex",
-    "h-12",
-    "min-w-0",
-    "cursor-pointer items-center",
-    "justify-center ",
+    "items-center",
+    "justify-center",
     "gap-2",
-    "border-b-4",
-    "px-1",
-    "font-medium",
+    "text-sm",
+    "md:text-base",
+    "px-4",
+    "md:px-6",
+    "py-2.5",
+    "cursor-pointer",
     "transition",
     "duration-200",
     "ease-in-out",
+    "whitespace-nowrap",
+    "data-[state=active]:border-b-2",
+    "data-[state=active]:border-b-blue-600",
+    "data-[state=active]:font-semibold",
+    "data-[state=active]:text-slate-900",
+    "data-[state=inactive]:font-medium",
+    "data-[state=inactive]:text-slate-700",
+    "data-[state=inactive]:hover:border-b-slate-400",
+    "data-[state=inactive]:hover:text-slate-900",
+    "disabled:cursor-not-allowed",
+    "data-[state=active]disabled:text-slate-400",
+    "data-[state=inactive]:disabled:text-slate-400",
 ], {
     variants: {
-        isSelected: {
-            true: "border-b-blue-600 hover:text-neutral-500",
-            false: "border-neutral-200 text-neutral-500 hover:border-b-neutral-500",
-        },
         isFullWidth: {
             true: "w-full",
             false: "",
         },
     },
     defaultVariants: {
-        isSelected: false,
         isFullWidth: false,
     },
 });
-cvaMerge(["whitespace-no-wrap", "mr-4", "overflow-hidden"]);
-const cvaTabs = cvaMerge(["flex", "flex-col"]);
-const cvaTabsPanels = cvaMerge(["mt-4", "flex", "h-full"]);
-const cvaTabsPanel = cvaMerge([], {
-    variants: {
-        isSelected: {
-            true: "flex-1",
-            false: "grow-0",
-        },
-    },
-    defaultVariants: {
-        isSelected: false,
-    },
-});
-const cvaTabPanel = cvaMerge(["flex-1"]);
-const cvaTabsContainer = cvaMerge([
-    "m-0",
-    "flex",
-    "list-none",
-    "items-center",
-    "gap-x-4",
-    "border-b",
-    "border-solid",
-    "border-neutral-100",
-    "p-0",
-]);
 
 /**
- *
+ * Wrapper for radix tab component.
+ * We add a custom implementation of the asChild prop to make it easy to make the child element look like other tabs.
  */
-const Tab = ({ onTabClick, isFullWidth = false, iconName, isSelected = false, label, dataTestId, suffix, }) => {
-    return (jsxs("li", { onClick: onTabClick, "data-testid": dataTestId, role: "tab", className: cvaTab({ isSelected, isFullWidth }), children: [iconName && jsx(Icon, { name: iconName, size: "small" }), label, suffix] }));
+const Tab = (_a) => {
+    var { value, isFullWidth = false, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true } = _a, rest = __rest(_a, ["value", "isFullWidth", "iconName", "dataTestId", "className", "children", "suffix", "asChild", "appendTabStylesToChildIfAsChild"]);
+    const renderContent = () => (jsxs(Fragment, { children: [iconName && jsx(Icon, { name: iconName, size: "small" }), React__default.isValidElement(children) ? children.props.children : children, suffix] }));
+    const commonProps = Object.assign({ className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className }, rest);
+    return (jsx(Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React__default.cloneElement(children, Object.assign(Object.assign({}, commonProps), { children: renderContent() }))) : (jsx("button", Object.assign({}, commonProps, { "data-testid": dataTestId, children: renderContent() }))) }));
 };
 
 /**
- *
+ * Wrapper for radix tab content component.
  */
-const TabPanel = ({ id, label, iconName, suffix, className, dataTestId, children }) => {
-    return (jsx("div", { "data-testid": dataTestId && `${dataTestId}-panel`, className: cvaTabPanel({ className }), children: children }));
+const TabContent = (_a) => {
+    var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
+    return (jsx(Content, Object.assign({ "data-testid": `${dataTestId}-content`, className: cvaTabContent({ className }) }, rest, { children: children })));
 };
 
 /**
- * Represents a set of tabs used for navigating content.
+ * Wrapper for radix tab list component.
  */
-const Tabs = ({ defaultSelectedTabId, children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, }) => {
-    const getDefaultedSelectedTabId = () => {
-        if (defaultSelectedTabId) {
-            return defaultSelectedTabId;
-        }
-        const firstChild = Children.toArray(children)[0];
-        return firstChild.props.id;
-    };
-    const [selectedTabId, setSelectedTabId] = useState(getDefaultedSelectedTabId());
-    useEffect(() => {
-        if (defaultSelectedTabId) {
-            setSelectedTabId(defaultSelectedTabId);
-        }
-    }, [defaultSelectedTabId]);
-    const isTabSelected = (panel) => {
-        return panel.id === selectedTabId;
-    };
-    const handleTabClick = (panel) => {
-        if (selectedTabId !== panel.id) {
-            if (onSelectedTabChanged) {
-                onSelectedTabChanged(panel.id);
-            }
-            setSelectedTabId(panel.id);
-        }
-    };
-    return (jsxs("div", { className: cvaTabs({ className }), "data-testid": dataTestId, children: [jsx("ol", { role: "tablist", className: cvaTabsContainer(), children: Children.map(children, child => {
-                    const panel = child.props;
-                    return panel ? (jsx(Tab, { onTabClick: () => handleTabClick(panel), isSelected: panel.id === selectedTabId, isFullWidth: fullWidth, label: panel.label, iconName: panel.iconName, suffix: panel.suffix, dataTestId: panel.dataTestId })) : null;
-                }) }), jsx("div", { className: cvaTabsPanels(), children: Children.map(children, child => {
-                    const panel = child === null || child === void 0 ? void 0 : child.props;
-                    if (!panel || (panel.id !== selectedTabId && !forceRender)) {
-                        return null;
-                    }
-                    return (jsx("div", { className: cvaTabsPanel({ isSelected: isTabSelected(panel) }), children: jsx(TabPanel, Object.assign({}, panel)) }));
-                }) })] }));
+const TabList = (_a) => {
+    var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
+    return (jsx(List, Object.assign({ "data-testid": dataTestId, className: cvaTabList({ className }) }, rest, { children: children })));
+};
+
+/**
+ * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
+ */
+const Tabs = (_a) => {
+    var { children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged } = _a, rest = __rest(_a, ["children", "forceRender", "className", "dataTestId", "fullWidth", "onSelectedTabChanged"]);
+    return (jsx(Root, Object.assign({ className: cvaTabsRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
 
 const cvaTimeline = cvaMerge("ml-4");
@@ -2986,4 +2966,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabPanel, Tabs, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.205",
+  "version": "0.1.209",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,6 +14,7 @@
     "react-day-picker": "^8.9.1",
     "date-fns": "^2.30.0",
     "@floating-ui/react": "^0.26.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",
     "react-useportal": "1.0.18",

package/src/components/PageHeader/PageHeader.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { TabListProps } from "../Tabs/TabList";
 import { TagColors } from "../Tag";
 export interface PageHeaderProps extends CommonProps {
     /**
@@ -40,6 +41,7 @@ export interface PageHeaderProps extends CommonProps {
      * The link to the previous page which will be rendered inside an IconButton component to the left of the heading.
      */
     backTo?: string;
+    tabsList?: ReactElement<TabListProps>;
 }
 /**
  * Pageheader component is used to display a page header.
@@ -49,4 +51,4 @@ export interface PageHeaderProps extends CommonProps {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }: PageHeaderProps) => JSX.Element;
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, }: PageHeaderProps) => JSX.Element;

package/src/components/PageHeader/PageHeader.variants.d.ts

@@ -1,3 +1,6 @@
+export declare const cvaPageHeaderContainer: (props?: ({
+    withBorder?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaPageHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderHeading: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Tabs/Tab.d.ts

@@ -1,15 +1,46 @@
+import { TabsTriggerProps } from "@radix-ui/react-tabs";
 import { IconName } from "@trackunit/ui-icons";
-import * as React from "react";
-export interface TabProps {
-    onTabClick?: () => void;
-    isSelected: boolean;
+import { ReactElement, ReactNode } from "react";
+export interface TabChildProps {
+    children?: ReactNode;
+    className?: string;
+}
+export interface TabProps extends TabsTriggerProps {
+    /**
+     * Specifies whether the tab should occupy the full width of its container.
+     */
     isFullWidth?: boolean;
+    /**
+     * A data-testid attribute for testing purposes.
+     */
     dataTestId?: string;
+    /**
+     * The text content of the tab.
+     */
+    text?: string;
+    /**
+     * A JSX element to be rendered as a suffix to the tab content.
+     */
     suffix?: JSX.Element;
+    /**
+     * The name of the icon associated with the tab.
+     */
     iconName?: IconName;
-    label: string | React.ReactNode;
+    /**
+     * Child component to render in the tab.
+     */
+    children: ReactElement<TabChildProps> | string;
+    /**
+     * Only applicable if asChild is true.
+     * If true the tab classNames will be added to the child element.
+     * If false only the child elements classNames will be used.
+     *
+     * @default true
+     */
+    appendTabStylesToChildIfAsChild?: boolean;
 }
 /**
- *
+ * Wrapper for radix tab component.
+ * We add a custom implementation of the asChild prop to make it easy to make the child element look like other tabs.
  */
-export declare const Tab: ({ onTabClick, isFullWidth, iconName, isSelected, label, dataTestId, suffix, }: TabProps) => JSX.Element;
+export declare const Tab: ({ value, isFullWidth, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild, ...rest }: TabProps) => JSX.Element;

package/src/components/Tabs/TabContent.d.ts

@@ -0,0 +1,14 @@
+import { TabsContentProps } from "@radix-ui/react-tabs";
+import { IconName } from "@trackunit/ui-icons";
+import { ReactNode } from "react";
+export interface TabContentProps extends TabsContentProps {
+    className?: string;
+    dataTestId?: string;
+    children?: ReactNode;
+    suffix?: JSX.Element;
+    iconName?: IconName;
+}
+/**
+ * Wrapper for radix tab content component.
+ */
+export declare const TabContent: ({ className, dataTestId, children, ...rest }: TabContentProps) => JSX.Element;

package/src/components/Tabs/TabList.d.ts

@@ -0,0 +1,21 @@
+import { TabsListProps } from "@radix-ui/react-tabs";
+import { ReactElement } from "react";
+import { TabContentProps } from "./TabContent";
+export interface TabListProps extends TabsListProps {
+    /**
+     * The child elements to be displayed within the Tabs component.
+     */
+    children: ReactElement<TabContentProps>[];
+    /**
+     * A custom class name to be attached to root element
+     */
+    className?: string;
+    /**
+     * An ID that can be used in tests to locate the component.
+     */
+    dataTestId?: string;
+}
+/**
+ * Wrapper for radix tab list component.
+ */
+export declare const TabList: ({ className, dataTestId, children, ...rest }: TabListProps) => JSX.Element;

package/src/components/Tabs/Tabs.d.ts

@@ -1,9 +1,6 @@
+import { TabsProps as TabsRootProps } from "@radix-ui/react-tabs";
 import { ReactNode } from "react";
-export interface TabsProps {
-    /**
-     * The ID of the tab that should be selected by default.
-     */
-    defaultSelectedTabId?: string | number;
+export interface TabsProps extends TabsRootProps {
     /**
      * If set to true, forces the content of all tabs to render even if not selected.
      */
@@ -15,7 +12,7 @@ export interface TabsProps {
     /**
      * The child elements to be displayed within the Tabs component.
      */
-    children?: ReactNode;
+    children: ReactNode;
     /**
      * A custom class name to be attached to root element
      */
@@ -32,6 +29,6 @@ export interface TabsProps {
     onSelectedTabChanged?: (id: string | number) => void;
 }
 /**
- * Represents a set of tabs used for navigating content.
+ * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
  */
-export declare const Tabs: ({ defaultSelectedTabId, children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, ...rest }: TabsProps) => JSX.Element;

package/src/components/Tabs/Tabs.variants.d.ts

@@ -1,12 +1,6 @@
+export declare const cvaTabsRoot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTabList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTabContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTab: (props?: ({
-    isSelected?: boolean | null | undefined;
     isFullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaTabNoWrapContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTabs: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTabsPanels: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTabsPanel: (props?: ({
-    isSelected?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaTabPanel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTabsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/index.d.ts

@@ -24,7 +24,8 @@ export * from "./SkeletonLines";
 export * from "./Spacer";
 export * from "./Spinner";
 export * from "./Tabs/Tab";
-export * from "./Tabs/TabPanel";
+export * from "./Tabs/TabContent";
+export * from "./Tabs/TabList";
 export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";

package/src/components/Tabs/TabPanel.d.ts

@@ -1,15 +0,0 @@
-import { IconName } from "@trackunit/ui-icons";
-import { ReactNode } from "react";
-export interface TabPanelProps {
-    id: string | number;
-    label: string | ReactNode;
-    iconName?: IconName;
-    suffix?: JSX.Element;
-    className?: string;
-    dataTestId?: string;
-    children?: ReactNode;
-}
-/**
- *
- */
-export declare const TabPanel: ({ id, label, iconName, suffix, className, dataTestId, children }: TabPanelProps) => JSX.Element;