@trackunit/react-components 0.1.200 → 0.1.201

package/index.cjs.js

@@ -2159,6 +2159,118 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     }) }))) }))) : null] }));
 };
 
+const cvaTab = cssClassVarianceUtilities.cvaMerge([
+    "mb-px",
+    "box-content",
+    "flex",
+    "h-12",
+    "min-w-0",
+    "cursor-pointer items-center",
+    "justify-center ",
+    "gap-2",
+    "border-b-4",
+    "px-1",
+    "font-medium",
+    "transition",
+    "duration-200",
+    "ease-in-out",
+], {
+    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",
+]);
+
+/**
+ *
+ */
+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 TabPanel = ({ id, label, iconName, suffix, className, dataTestId, children }) => {
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId && `${dataTestId}-panel`, className: cvaTabPanel({ className }), children: children }));
+};
+
+/**
+ * Represents a set of tabs used for navigating content.
+ */
+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 cvaTimeline = cssClassVarianceUtilities.cvaMerge("ml-4");
 const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge([
     "grid",
@@ -2934,6 +3046,9 @@ exports.SkeletonLines = SkeletonLines;
 exports.Spacer = Spacer;
 exports.Spinner = Spinner;
 exports.StarButton = StarButton;
+exports.Tab = Tab;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.Timeline = Timeline;

package/index.esm.js

@@ -2130,6 +2130,118 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     }) }))) }))) : null] }));
 };
 
+const cvaTab = cvaMerge([
+    "mb-px",
+    "box-content",
+    "flex",
+    "h-12",
+    "min-w-0",
+    "cursor-pointer items-center",
+    "justify-center ",
+    "gap-2",
+    "border-b-4",
+    "px-1",
+    "font-medium",
+    "transition",
+    "duration-200",
+    "ease-in-out",
+], {
+    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",
+]);
+
+/**
+ *
+ */
+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 TabPanel = ({ id, label, iconName, suffix, className, dataTestId, children }) => {
+    return (jsx("div", { "data-testid": dataTestId && `${dataTestId}-panel`, className: cvaTabPanel({ className }), children: children }));
+};
+
+/**
+ * Represents a set of tabs used for navigating content.
+ */
+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 cvaTimeline = cvaMerge("ml-4");
 const cvaTimelineElement = cvaMerge([
     "grid",
@@ -2866,4 +2978,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, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.200",
+  "version": "0.1.201",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -0,0 +1,15 @@
+import { IconName } from "@trackunit/ui-icons";
+import * as React from "react";
+export interface TabProps {
+    onTabClick?: () => void;
+    isSelected: boolean;
+    isFullWidth?: boolean;
+    dataTestId?: string;
+    suffix?: JSX.Element;
+    iconName?: IconName;
+    label: string | React.ReactNode;
+}
+/**
+ *
+ */
+export declare const Tab: ({ onTabClick, isFullWidth, iconName, isSelected, label, dataTestId, suffix, }: TabProps) => JSX.Element;

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

@@ -0,0 +1,15 @@
+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;

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

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+export interface TabsProps {
+    /**
+     * The ID of the tab that should be selected by default.
+     */
+    defaultSelectedTabId?: string | number;
+    /**
+     * If set to true, forces the content of all tabs to render even if not selected.
+     */
+    forceRender?: boolean;
+    /**
+     * If set to true, the tabs will expand to fill the width of their container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The child elements to be displayed within the Tabs component.
+     */
+    children?: ReactNode;
+    /**
+     * 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;
+    /**
+     * A callback function invoked when the selected tab changes.
+     *
+     * @param id - ID of the selected tab.
+     */
+    onSelectedTabChanged?: (id: string | number) => void;
+}
+/**
+ * Represents a set of tabs used for navigating content.
+ */
+export declare const Tabs: ({ defaultSelectedTabId, children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, }: TabsProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+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

@@ -23,6 +23,9 @@ export * from "./Sidebar/useOverflowItems";
 export * from "./SkeletonLines";
 export * from "./Spacer";
 export * from "./Spinner";
+export * from "./Tabs/Tab";
+export * from "./Tabs/TabPanel";
+export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";
 export * from "./Timeline/Timeline";