@trackunit/react-components 1.1.25 → 1.1.28

package/index.cjs.js

@@ -3799,6 +3799,28 @@ const WidgetBody = ({ density = "auto", children, dataTestId, className, disable
     return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
+const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
+const cvaZStackItem = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
+
+/**
+ * ZStack is a component that stacks its children on the z-axis.
+ * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
+ *
+ * @param { ZStackProps} props - The props for the  ZStack component
+ * @returns {JSX.Element}  ZStack component
+ */
+const ZStack = ({ children, className, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: react.Children.map(children, (child, index) => {
+            if (!react.isValidElement(child)) {
+                return child;
+            }
+            return react.cloneElement(child, {
+                className: cvaZStackItem({ className: child.props.className }),
+                key: index,
+            });
+        }) }));
+};
+
 const cvaClickable = cssClassVarianceUtilities.cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -3883,12 +3905,15 @@ exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.VirtualizedList = VirtualizedList;
 exports.WidgetBody = WidgetBody;
+exports.ZStack = ZStack;
 exports.cvaButton = cvaButton;
 exports.cvaButtonPrefixSuffix = cvaButtonPrefixSuffix;
 exports.cvaButtonSpinner = cvaButtonSpinner;
 exports.cvaButtonSpinnerContainer = cvaButtonSpinnerContainer;
 exports.cvaClickable = cvaClickable;
+exports.cvaContainerStyles = cvaContainerStyles;
 exports.cvaIconButton = cvaIconButton;
+exports.cvaImgStyles = cvaImgStyles;
 exports.cvaIndicator = cvaIndicator;
 exports.cvaIndicatorIcon = cvaIndicatorIcon;
 exports.cvaIndicatorIconBackground = cvaIndicatorIconBackground;
@@ -3903,6 +3928,14 @@ exports.cvaMenuItemSuffix = cvaMenuItemSuffix;
 exports.cvaPageHeader = cvaPageHeader;
 exports.cvaPageHeaderContainer = cvaPageHeaderContainer;
 exports.cvaPageHeaderHeading = cvaPageHeaderHeading;
+exports.cvaToggleGroup = cvaToggleGroup;
+exports.cvaToggleItem = cvaToggleItem;
+exports.cvaToggleItemText = cvaToggleItemText;
+exports.cvaVirtualizedList = cvaVirtualizedList;
+exports.cvaVirtualizedListContainer = cvaVirtualizedListContainer;
+exports.cvaVirtualizedListItem = cvaVirtualizedListItem;
+exports.cvaZStackContainer = cvaZStackContainer;
+exports.cvaZStackItem = cvaZStackItem;
 exports.docs = docs;
 exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getValueBarColorByValue = getValueBarColorByValue;

package/index.esm.js

@@ -3797,6 +3797,28 @@ const WidgetBody = ({ density = "auto", children, dataTestId, className, disable
     return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
+const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
+const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
+
+/**
+ * ZStack is a component that stacks its children on the z-axis.
+ * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
+ *
+ * @param { ZStackProps} props - The props for the  ZStack component
+ * @returns {JSX.Element}  ZStack component
+ */
+const ZStack = ({ children, className, dataTestId }) => {
+    return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: Children.map(children, (child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                className: cvaZStackItem({ className: child.props.className }),
+                key: index,
+            });
+        }) }));
+};
+
 const cvaClickable = cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -3821,4 +3843,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleItem, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.1.25",
+  "version": "1.1.28",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -19,11 +19,11 @@
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.0.21",
-    "@trackunit/css-class-variance-utilities": "1.0.20",
-    "@trackunit/shared-utils": "1.2.17",
-    "@trackunit/ui-icons": "1.0.23",
-    "@trackunit/react-table-pagination": "1.0.21"
+    "@trackunit/ui-design-tokens": "1.0.23",
+    "@trackunit/css-class-variance-utilities": "1.0.22",
+    "@trackunit/shared-utils": "1.2.19",
+    "@trackunit/ui-icons": "1.0.25",
+    "@trackunit/react-table-pagination": "1.0.23"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/ZStack/ZStack.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+export type ZStackProps = CommonProps & {
+    children: ReactNode;
+};
+/**
+ * ZStack is a component that stacks its children on the z-axis.
+ * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
+ *
+ * @param { ZStackProps} props - The props for the  ZStack component
+ * @returns {JSX.Element}  ZStack component
+ */
+export declare const ZStack: ({ children, className, dataTestId }: ZStackProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export declare const cvaZStackContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaZStackItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/index.d.ts

@@ -7,6 +7,7 @@ export * from "./Collapse";
 export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./CopyableText";
 export * from "./EmptyState/EmptyState";
+export * from "./EmptyState/EmptyState.variants";
 export * from "./EmptyValue/EmptyValue";
 export * from "./ExternalLink/ExternalLink";
 export * from "./Heading";
@@ -36,7 +37,11 @@ export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";
 export * from "./ToggleGroup/ToggleGroup";
+export * from "./ToggleGroup/ToggleGroup.variants";
 export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./VirtualizedList/VirtualizedList";
+export * from "./VirtualizedList/VirtualizedList.variants";
 export * from "./Widget";
+export * from "./ZStack/ZStack";
+export * from "./ZStack/ZStack.variants";