@trackunit/react-components 0.1.173 → 0.1.175

package/index.cjs.js

@@ -743,7 +743,7 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
@@ -762,9 +762,9 @@ const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["borde
         density: "auto",
     },
 });
-const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between"]);
+const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-b-2", "border-neutral-200"], {
+const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex border-b-2", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
@@ -21555,6 +21555,45 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })), showValue && size === "small" && (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS"), children: [Number(value.toFixed(1)), unit || ""] }))] }) }));
 };
 
+const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
+    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: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
+    },
+    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 {WidgetBodyProps} props - The props for the WidgetBody component
+ * @returns {JSX.Element} WidgetBody component
+ */
+const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), children: children }));
+};
+
 const cvaClickable = cssClassVarianceUtilities.cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -39271,6 +39310,7 @@ exports.TimelineElement = TimelineElement;
 exports.Tip = Tip;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
+exports.WidgetBody = WidgetBody;
 exports.cvaButton = cvaButton;
 exports.cvaButtonSpinner = cvaButtonSpinner;
 exports.cvaClickable = cvaClickable;

package/index.esm.js

@@ -714,7 +714,7 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterDensityContainer = cvaMerge(["flex border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
@@ -733,9 +733,9 @@ const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-20
         density: "auto",
     },
 });
-const cvaCardHeader = cvaMerge(["flex", "justify-between"]);
+const cvaCardHeader = cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cvaMerge(["border-b-2", "border-neutral-200"], {
+const cvaCardHeaderDensityContainer = cvaMerge(["flex border-b-2", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
@@ -21526,6 +21526,45 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })), showValue && size === "small" && (jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), children: [Number(value.toFixed(1)), unit || ""] }))] }) }));
 };
 
+const cvaWidgetBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
+    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: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
+    },
+    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 {WidgetBodyProps} props - The props for the WidgetBody component
+ * @returns {JSX.Element} WidgetBody component
+ */
+const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
+    return (jsx("div", { "data-testid": dataTestId, className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), children: children }));
+};
+
 const cvaClickable = cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -39197,4 +39236,4 @@ const useVisibilityChange = ({ onChange, targetState }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, 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, useHover, useIsFirstRender, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.173",
+  "version": "0.1.175",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@trackunit/css-class-variance-utilities": "0.0.14",
-    "@trackunit/css-core": "0.0.96",
+    "@trackunit/css-core": "0.0.97",
     "@trackunit/shared-utils": "0.0.11",
     "@trackunit/ui-design-tokens": "0.0.78",
     "@trackunit/ui-icons": "0.0.78",

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

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

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+export interface WidgetBodyProps 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: React.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 {WidgetBodyProps} props - The props for the WidgetBody component
+ * @returns {JSX.Element} WidgetBody component
+ */
+export declare const WidgetBody: ({ density, children, dataTestId, className, disableGap }: WidgetBodyProps) => JSX.Element;

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

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

package/src/components/index.d.ts

@@ -28,4 +28,5 @@ export * from "./Timeline/Timeline";
 export * from "./Tip";
 export * from "./Tooltip";
 export * from "./ValueBar";
+export * from "./Widget";
 export * from "./buttons";