@trackunit/react-components 1.4.113 → 1.4.115

package/index.cjs.js

@@ -3893,7 +3893,7 @@ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
             spacious: "gap-4 p-6",
-            auto: "p-2",
+            auto: "gap-2 p-2",
         },
     },
     defaultVariants: {
@@ -3911,8 +3911,48 @@ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
  * @param {WidgetBodyProps} props - The props for the WidgetBody component
  * @returns {ReactElement} WidgetBody component
  */
-const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
+const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap, direction = "column", }) => {
+    return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, children: children }));
+};
+
+const cvaWidgetEditBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["min-w-96", "w-96"], {
+    variants: {
+        disableGap: {
+            true: "gap-0",
+            false: "",
+        },
+        direction: {
+            row: "flex-row",
+            "row-reverse": "flex-row-reverse",
+            column: "flex-col",
+            "column-reverse": "flex-col-reverse",
+        },
+        density: {
+            none: "",
+            dense: "gap-1 p-2",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: "gap-2 p-2",
+        },
+    },
+    defaultVariants: {
+        disableGap: false,
+        direction: "column",
+        density: "auto",
+    },
+});
+
+/**
+ * The WidgetBody component should be used to inform the user of important information.
+ *
+ * @summary For applying padding and gap to a Widget.
+ * @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
+ * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
+ * @returns {ReactElement} WidgetBody component
+ */
+const WidgetEditBody = ({ density = "auto", children, dataTestId, className, disableGap, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaWidgetEditBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
@@ -4022,6 +4062,7 @@ exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.VirtualizedList = VirtualizedList;
 exports.WidgetBody = WidgetBody;
+exports.WidgetEditBody = WidgetEditBody;
 exports.ZStack = ZStack;
 exports.cvaButton = cvaButton;
 exports.cvaButtonPrefixSuffix = cvaButtonPrefixSuffix;

package/index.esm.js

@@ -3891,7 +3891,7 @@ const cvaWidgetBodyDensityContainer = cvaMerge([
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
             spacious: "gap-4 p-6",
-            auto: "p-2",
+            auto: "gap-2 p-2",
         },
     },
     defaultVariants: {
@@ -3909,8 +3909,48 @@ const cvaWidgetBodyDensityContainer = cvaMerge([
  * @param {WidgetBodyProps} props - The props for the WidgetBody component
  * @returns {ReactElement} WidgetBody component
  */
-const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
+const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap, direction = "column", }) => {
+    return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, children: children }));
+};
+
+const cvaWidgetEditBodyDensityContainer = cvaMerge(["min-w-96", "w-96"], {
+    variants: {
+        disableGap: {
+            true: "gap-0",
+            false: "",
+        },
+        direction: {
+            row: "flex-row",
+            "row-reverse": "flex-row-reverse",
+            column: "flex-col",
+            "column-reverse": "flex-col-reverse",
+        },
+        density: {
+            none: "",
+            dense: "gap-1 p-2",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: "gap-2 p-2",
+        },
+    },
+    defaultVariants: {
+        disableGap: false,
+        direction: "column",
+        density: "auto",
+    },
+});
+
+/**
+ * The WidgetBody component should be used to inform the user of important information.
+ *
+ * @summary For applying padding and gap to a Widget.
+ * @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
+ * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
+ * @returns {ReactElement} WidgetBody component
+ */
+const WidgetEditBody = ({ density = "auto", children, dataTestId, className, disableGap, }) => {
+    return (jsx("div", { className: cvaWidgetEditBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
@@ -3959,4 +3999,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, KPI, 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, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPI, 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, WidgetEditBody, 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, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.113",
+  "version": "1.4.115",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,11 @@
     "@tanstack/react-router": "1.114.29",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.96",
-    "@trackunit/css-class-variance-utilities": "1.3.96",
-    "@trackunit/shared-utils": "1.5.96",
-    "@trackunit/ui-icons": "1.3.96",
-    "@trackunit/react-table-pagination": "1.3.97"
+    "@trackunit/ui-design-tokens": "1.3.97",
+    "@trackunit/css-class-variance-utilities": "1.3.97",
+    "@trackunit/shared-utils": "1.5.97",
+    "@trackunit/ui-icons": "1.3.97",
+    "@trackunit/react-table-pagination": "1.3.98"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Widget/WidgetBody.d.ts

@@ -13,6 +13,10 @@ export interface WidgetBodyProps extends CommonProps {
      * Child elements to render in the body
      */
     children: ReactNode | null;
+    /**
+     * Direction of the body
+     */
+    direction?: "row" | "column";
 }
 /**
  * The WidgetBody component should be used to inform the user of important information.
@@ -22,4 +26,4 @@ export interface WidgetBodyProps extends CommonProps {
  * @param {WidgetBodyProps} props - The props for the WidgetBody component
  * @returns {ReactElement} WidgetBody component
  */
-export declare const WidgetBody: ({ density, children, dataTestId, className, disableGap }: WidgetBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WidgetBody: ({ density, children, dataTestId, className, disableGap, direction, }: WidgetBodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Widget/WidgetEditBody.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { CommonProps, Density } from "../../common";
+export interface WidgetEditBodyProps extends CommonProps {
+    /**
+     * Sets gap, padding and margin.
+     */
+    density?: Density;
+    /**
+     * Set gap to be 0px (not preferable)
+     */
+    disableGap?: boolean;
+    /**
+     * Child elements to render in the body
+     */
+    children: ReactNode | null;
+}
+/**
+ * The WidgetBody component should be used to inform the user of important information.
+ *
+ * @summary For applying padding and gap to a Widget.
+ * @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
+ * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
+ * @returns {ReactElement} WidgetBody component
+ */
+export declare const WidgetEditBody: ({ density, children, dataTestId, className, disableGap, }: WidgetEditBodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Widget/WidgetEditBody.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const cvaWidgetEditBodyDensityContainer: (props?: ({
+    disableGap?: boolean | null | undefined;
+    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
+    density?: "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Widget/index.d.ts

@@ -1 +1,2 @@
 export * from "./WidgetBody";
+export * from "./WidgetEditBody";