@trackunit/react-widgets 2.2.8 → 2.2.11

package/index.cjs.js

@@ -99,95 +99,41 @@ const WidgetNoData = ({ type = "Neutral", description }) => {
     return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: type === "Good" ? widgetNoDataGood : widgetNoDataNeutral, description: description }) }));
 };
 
-const cvaHorizontalWidgetLayoutContainer = cssClassVarianceUtilities.cvaMerge(["flex", "h-dvh", "flex-col", "overflow-auto"], {
+const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
     variants: {
-        isScrolled: {
-            true: ["border-t"],
+        layout: {
+            none: "",
+            centered: "place-items-center",
+            "top-fill": ["grid-rows-min-fr"],
+            "fill-bottom": ["grid-rows-fr-min"],
+            "top-fill-bottom": ["grid-rows-min-fr-min"],
         },
-    },
-});
-const cvaHorizontalChildFragment = cssClassVarianceUtilities.cvaMerge(["h-px", "w-full", "min-w-px", "bg-slate-200"]);
-
-/**
- * Widget layout with a horizontal orientation with a border in the top when scrolling.
- *
- * @param { HorizontalWidgetLayoutProps} props - The props for the component
- * @returns {Element}  HorizontalWidgetLayout component
- */
-const HorizontalWidgetLayout = ({ className, dataTestId, children, ref }) => {
-    const childrenArray = React.Children.toArray(children);
-    const { isAtTop } = reactComponents.useScrollDetection(ref);
-    return (jsxRuntime.jsx("div", { className: cvaHorizontalWidgetLayoutContainer({ className, isScrolled: !isAtTop }), "data-testid": dataTestId, ref: ref, children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [child, index < childrenArray.length - 1 && jsxRuntime.jsx("div", { className: cvaHorizontalChildFragment() })] }, index))) }));
-};
-
-const cvaVerticalSplitWidgetLayoutContainer = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "w-full",
-    "flex-row",
-    "overflow-hidden",
-    "no-scrollbar",
-    "h-20",
-    "gap-2",
-    "overflow-x-scroll",
-    "px-2",
-    "py-4"
-]);
-cssClassVarianceUtilities.cvaMerge(["h-full", "w-px", "min-h-px", "bg-slate-200"]);
-
-/**
- * Widget layout with a vertical split
- *
- * @param { VerticalSplitWidgetLayoutProps} props - The props for the component
- * @returns {Element} VerticalSplitWidgetLayout component
- */
-const VerticalSplitWidgetLayout = ({ className, dataTestId, children }) => {
-    const childrenArray = React.Children.toArray(children);
-    return (jsxRuntime.jsx("div", { className: cvaVerticalSplitWidgetLayoutContainer({ className }), "data-testid": dataTestId, children: childrenArray.map((child, index) => (jsxRuntime.jsx(React.Fragment, { children: child }, index))) }));
-};
-
-const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
-    "@container",
-    "flex",
-    "flex-grow",
-    "overflow-auto",
-    "w-full",
-    "h-dvh",
-    "place-items-center",
-    "bg-white",
-    "overflow-hidden",
-], {
-    variants: {
-        direction: {
-            row: "flex-row",
-            "row-reverse": "flex-row-reverse",
-            column: "flex-col",
-            "column-reverse": "flex-col-reverse",
+        gap: {
+            responsive: "gap-responsive-space",
+            none: "",
         },
-        density: {
+        padding: {
+            responsive: "p-responsive-space",
             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-4 pt-2",
         },
     },
     defaultVariants: {
-        direction: "column",
-        density: "auto",
+        layout: "none",
+        gap: "none",
+        padding: "none",
     },
 });
 
 /**
- * The WidgetBody component should be used to inform the user of important information.
+ * The WidgetContent 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 {ReactNode} WidgetBody component
+ * @param {WidgetContentProps} props - The props for the WidgetContent component
+ * @returns {ReactNode} WidgetContent component
  */
-const WidgetBody = ({ density = "auto", children, dataTestId, className, direction = "column", }) => {
-    return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, className, direction }), "data-testid": dataTestId, children: children }));
+const WidgetContent = ({ children, dataTestId, layout = "none", padding = "none", gap = "none", className, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaWidgetEditBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
@@ -219,9 +165,9 @@ const cvaWidgetEditBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["a
  *
  * @summary For editing a Widget.
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
- * @returns {ReactNode} WidgetBody component
+ * @returns {ReactNode} WidgetEditBody component
  */
-const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }) => {
+const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
     const [t] = useTranslation();
     const [saving, setSaving] = React.useState(false);
     return (jsxRuntime.jsxs(reactComponents.Card, { className: cvaWidgetEditBodyDensityContainer({ density: "none", className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.CardHeader, { density: "comfortable", heading: title || t("widget.edit.title"), onClose: onCancel }), jsxRuntime.jsx(reactComponents.CardBody, { density: "comfortable", children: children }), jsxRuntime.jsxs(reactComponents.CardFooter, { density: "comfortable", children: [jsxRuntime.jsx(reactComponents.Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsxRuntime.jsx(reactComponents.Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: () => {
@@ -315,21 +261,6 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendValueText(), dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(reactComponents.Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
 };
 
-const cvaWidgetList = cssClassVarianceUtilities.cvaMerge(["min-h-0"]);
-const cvaWidgetListList = cssClassVarianceUtilities.cvaMerge(["w-full"]);
-
-/**
- *  WidgetList used for rendering a list of in a widget. It is a wrapper component for the ListItem components.
- *
- * @param { WidgetListProps} props - The props for the  WidgetList component
- * @returns {Element}  WidgetList component
- */
-const WidgetList = ({ dataTestId, pagination, count, children, className, rowHeight = 56, scrollRef, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaWidgetList({ className }), children: jsxRuntime.jsx(reactComponents.List, { className: cvaWidgetListList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
-                return children(index);
-            } }) }));
-};
-
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -339,12 +270,9 @@ const WidgetList = ({ dataTestId, pagination, count, children, className, rowHei
  */
 setupLibraryTranslations();
 
-exports.HorizontalWidgetLayout = HorizontalWidgetLayout;
-exports.VerticalSplitWidgetLayout = VerticalSplitWidgetLayout;
-exports.WidgetBody = WidgetBody;
+exports.WidgetContent = WidgetContent;
 exports.WidgetEditBody = WidgetEditBody;
 exports.WidgetError = WidgetError;
 exports.WidgetKPI = WidgetKPI;
-exports.WidgetList = WidgetList;
 exports.WidgetMissingConfiguration = WidgetMissingConfiguration;
 exports.WidgetNoData = WidgetNoData;

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { EmptyState, useScrollDetection, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text, List } from '@trackunit/react-components';
-import { Children, Fragment, useState } from 'react';
+import { EmptyState, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text } from '@trackunit/react-components';
+import { useState } from 'react';
 import { WidgetConfigRuntime } from '@trackunit/iris-app-runtime-core';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 
@@ -97,95 +97,41 @@ const WidgetNoData = ({ type = "Neutral", description }) => {
     return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsx(EmptyState, { customImageSrc: type === "Good" ? widgetNoDataGood : widgetNoDataNeutral, description: description }) }));
 };
 
-const cvaHorizontalWidgetLayoutContainer = cvaMerge(["flex", "h-dvh", "flex-col", "overflow-auto"], {
+const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
     variants: {
-        isScrolled: {
-            true: ["border-t"],
+        layout: {
+            none: "",
+            centered: "place-items-center",
+            "top-fill": ["grid-rows-min-fr"],
+            "fill-bottom": ["grid-rows-fr-min"],
+            "top-fill-bottom": ["grid-rows-min-fr-min"],
         },
-    },
-});
-const cvaHorizontalChildFragment = cvaMerge(["h-px", "w-full", "min-w-px", "bg-slate-200"]);
-
-/**
- * Widget layout with a horizontal orientation with a border in the top when scrolling.
- *
- * @param { HorizontalWidgetLayoutProps} props - The props for the component
- * @returns {Element}  HorizontalWidgetLayout component
- */
-const HorizontalWidgetLayout = ({ className, dataTestId, children, ref }) => {
-    const childrenArray = Children.toArray(children);
-    const { isAtTop } = useScrollDetection(ref);
-    return (jsx("div", { className: cvaHorizontalWidgetLayoutContainer({ className, isScrolled: !isAtTop }), "data-testid": dataTestId, ref: ref, children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [child, index < childrenArray.length - 1 && jsx("div", { className: cvaHorizontalChildFragment() })] }, index))) }));
-};
-
-const cvaVerticalSplitWidgetLayoutContainer = cvaMerge([
-    "flex",
-    "w-full",
-    "flex-row",
-    "overflow-hidden",
-    "no-scrollbar",
-    "h-20",
-    "gap-2",
-    "overflow-x-scroll",
-    "px-2",
-    "py-4"
-]);
-cvaMerge(["h-full", "w-px", "min-h-px", "bg-slate-200"]);
-
-/**
- * Widget layout with a vertical split
- *
- * @param { VerticalSplitWidgetLayoutProps} props - The props for the component
- * @returns {Element} VerticalSplitWidgetLayout component
- */
-const VerticalSplitWidgetLayout = ({ className, dataTestId, children }) => {
-    const childrenArray = Children.toArray(children);
-    return (jsx("div", { className: cvaVerticalSplitWidgetLayoutContainer({ className }), "data-testid": dataTestId, children: childrenArray.map((child, index) => (jsx(Fragment, { children: child }, index))) }));
-};
-
-const cvaWidgetBodyDensityContainer = cvaMerge([
-    "@container",
-    "flex",
-    "flex-grow",
-    "overflow-auto",
-    "w-full",
-    "h-dvh",
-    "place-items-center",
-    "bg-white",
-    "overflow-hidden",
-], {
-    variants: {
-        direction: {
-            row: "flex-row",
-            "row-reverse": "flex-row-reverse",
-            column: "flex-col",
-            "column-reverse": "flex-col-reverse",
+        gap: {
+            responsive: "gap-responsive-space",
+            none: "",
         },
-        density: {
+        padding: {
+            responsive: "p-responsive-space",
             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-4 pt-2",
         },
     },
     defaultVariants: {
-        direction: "column",
-        density: "auto",
+        layout: "none",
+        gap: "none",
+        padding: "none",
     },
 });
 
 /**
- * The WidgetBody component should be used to inform the user of important information.
+ * The WidgetContent 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 {ReactNode} WidgetBody component
+ * @param {WidgetContentProps} props - The props for the WidgetContent component
+ * @returns {ReactNode} WidgetContent component
  */
-const WidgetBody = ({ density = "auto", children, dataTestId, className, direction = "column", }) => {
-    return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, className, direction }), "data-testid": dataTestId, children: children }));
+const WidgetContent = ({ children, dataTestId, layout = "none", padding = "none", gap = "none", className, }) => {
+    return (jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaWidgetEditBodyDensityContainer = cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
@@ -217,9 +163,9 @@ const cvaWidgetEditBodyDensityContainer = cvaMerge(["absolute", "left-1/2", "top
  *
  * @summary For editing a Widget.
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
- * @returns {ReactNode} WidgetBody component
+ * @returns {ReactNode} WidgetEditBody component
  */
-const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }) => {
+const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
     const [t] = useTranslation();
     const [saving, setSaving] = useState(false);
     return (jsxs(Card, { className: cvaWidgetEditBodyDensityContainer({ density: "none", className }), "data-testid": dataTestId, children: [jsx(CardHeader, { density: "comfortable", heading: title || t("widget.edit.title"), onClose: onCancel }), jsx(CardBody, { density: "comfortable", children: children }), jsxs(CardFooter, { density: "comfortable", children: [jsx(Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsx(Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: () => {
@@ -313,21 +259,6 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     return (jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { className: cvaWidgetKPITrendValueText(), dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
 };
 
-const cvaWidgetList = cvaMerge(["min-h-0"]);
-const cvaWidgetListList = cvaMerge(["w-full"]);
-
-/**
- *  WidgetList used for rendering a list of in a widget. It is a wrapper component for the ListItem components.
- *
- * @param { WidgetListProps} props - The props for the  WidgetList component
- * @returns {Element}  WidgetList component
- */
-const WidgetList = ({ dataTestId, pagination, count, children, className, rowHeight = 56, scrollRef, }) => {
-    return (jsx("div", { className: cvaWidgetList({ className }), children: jsx(List, { className: cvaWidgetListList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
-                return children(index);
-            } }) }));
-};
-
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -337,4 +268,4 @@ const WidgetList = ({ dataTestId, pagination, count, children, className, rowHei
  */
 setupLibraryTranslations();
 
-export { HorizontalWidgetLayout, VerticalSplitWidgetLayout, WidgetBody, WidgetEditBody, WidgetError, WidgetKPI, WidgetList, WidgetMissingConfiguration, WidgetNoData };
+export { WidgetContent, WidgetEditBody, WidgetError, WidgetKPI, WidgetMissingConfiguration, WidgetNoData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.2.8",
+  "version": "2.2.11",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,15 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.9.8",
-    "@trackunit/iris-app-runtime-core": "1.8.6",
-    "@trackunit/css-class-variance-utilities": "1.7.5",
-    "@trackunit/ui-design-tokens": "1.7.5",
-    "@trackunit/ui-icons": "1.7.7",
-    "@trackunit/react-table-pagination": "1.7.5",
-    "@trackunit/shared-utils": "1.9.5",
-    "@trackunit/i18n-library-translation": "1.7.7",
-    "@trackunit/react-test-setup": "1.4.5"
+    "@trackunit/react-components": "1.9.10",
+    "@trackunit/iris-app-runtime-core": "1.8.8",
+    "@trackunit/css-class-variance-utilities": "1.7.7",
+    "@trackunit/ui-design-tokens": "1.7.7",
+    "@trackunit/ui-icons": "1.7.9",
+    "@trackunit/shared-utils": "1.9.7",
+    "@trackunit/i18n-library-translation": "1.7.9",
+    "@trackunit/react-test-setup": "1.4.7"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Widget/WidgetContent.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
+import { ReactElement, ReactNode } from "react";
+import { cvaWidgetContent } from "./WidgetContent.variants";
+export interface WidgetContentProps extends CommonProps, MappedOmit<NonNullable<VariantProps<typeof cvaWidgetContent>>, "className"> {
+    /**
+     * Child elements to render in the body
+     */
+    children: ReactNode | null;
+}
+/**
+ * The WidgetContent 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 {WidgetContentProps} props - The props for the WidgetContent component
+ * @returns {ReactNode} WidgetContent component
+ */
+export declare const WidgetContent: ({ children, dataTestId, layout, padding, gap, className, }: WidgetContentProps) => ReactElement;

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

@@ -0,0 +1,5 @@
+export declare const cvaWidgetContent: (props?: ({
+    layout?: "none" | "centered" | "top-fill" | "fill-bottom" | "top-fill-bottom" | null | undefined;
+    gap?: "none" | "responsive" | null | undefined;
+    padding?: "none" | "responsive" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/Widget/WidgetEditBody.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 export interface WidgetEditBodyProps extends CommonProps {
     /**
      * Child elements to render in the body
@@ -28,6 +28,6 @@ export interface WidgetEditBodyProps extends CommonProps {
  *
  * @summary For editing a Widget.
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
- * @returns {ReactNode} WidgetBody component
+ * @returns {ReactNode} WidgetEditBody component
  */
-export declare const WidgetEditBody: ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }: WidgetEditBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WidgetEditBody: ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }: WidgetEditBodyProps) => ReactElement;

package/src/index.d.ts

@@ -1,9 +1,6 @@
 export * from "./EmptyStates/Error/WidgetError";
 export * from "./EmptyStates/MissingConfiguration/WidgetMissingConfiguration";
 export * from "./EmptyStates/NoData/WidgetNoData";
-export * from "./HorizontalWidgetLayout/HorizontalWidgetLayout";
-export * from "./VerticalSplitWidgetLayout/VerticalSplitWidgetLayout";
-export * from "./Widget/WidgetBody";
+export * from "./Widget/WidgetContent";
 export * from "./Widget/WidgetEditBody";
 export * from "./WidgetKPI/WidgetKPI";
-export * from "./WidgetList/WidgetList";

package/src/HorizontalWidgetLayout/HorizontalWidgetLayout.d.ts

@@ -1,13 +0,0 @@
-import { CommonProps } from "@trackunit/react-components";
-import { ReactNode, RefObject } from "react";
-export interface HorizontalWidgetLayoutProps extends CommonProps {
-    children: ReactNode;
-    ref?: RefObject<HTMLDivElement | null>;
-}
-/**
- * Widget layout with a horizontal orientation with a border in the top when scrolling.
- *
- * @param { HorizontalWidgetLayoutProps} props - The props for the component
- * @returns {Element}  HorizontalWidgetLayout component
- */
-export declare const HorizontalWidgetLayout: ({ className, dataTestId, children, ref }: HorizontalWidgetLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/src/HorizontalWidgetLayout/HorizontalWidgetLayout.variants.d.ts

@@ -1,4 +0,0 @@
-export declare const cvaHorizontalWidgetLayoutContainer: (props?: ({
-    isScrolled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaHorizontalChildFragment: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/VerticalSplitWidgetLayout/VerticalSplitWidgetLayout.d.ts

@@ -1,12 +0,0 @@
-import { CommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
-export interface VerticalSplitWidgetLayoutProps extends CommonProps {
-    children: ReactNode;
-}
-/**
- * Widget layout with a vertical split
- *
- * @param { VerticalSplitWidgetLayoutProps} props - The props for the component
- * @returns {Element} VerticalSplitWidgetLayout component
- */
-export declare const VerticalSplitWidgetLayout: ({ className, dataTestId, children }: VerticalSplitWidgetLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/src/VerticalSplitWidgetLayout/VerticalSplitWidgetLayout.variants.d.ts

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

package/src/Widget/WidgetBody.d.ts

@@ -1,25 +0,0 @@
-import { CommonProps, Density } from "@trackunit/react-components";
-import { ReactNode } from "react";
-export interface WidgetBodyProps extends CommonProps {
-    /**
-     * Sets gap, padding and margin.
-     */
-    density?: Density;
-    /**
-     * 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.
- *
- * @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 {ReactNode} WidgetBody component
- */
-export declare const WidgetBody: ({ density, children, dataTestId, className, direction, }: WidgetBodyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +0,0 @@
-export declare const cvaWidgetBodyDensityContainer: (props?: ({
-    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/WidgetList/WidgetList.d.ts

@@ -1,35 +0,0 @@
-import { VariantProps } from "@trackunit/css-class-variance-utilities";
-import { CommonProps } from "@trackunit/react-components";
-import { RelayPagination } from "@trackunit/react-table-pagination";
-import { MappedOmit } from "@trackunit/shared-utils";
-import { ReactElement, RefObject } from "react";
-import { cvaWidgetList } from "./WidgetList.variants";
-export interface WidgetListProps extends CommonProps, MappedOmit<VariantProps<typeof cvaWidgetList>, "className"> {
-    /**
-     * The number of items in the list.
-     */
-    count: number;
-    /**
-     * The pagination configuration for the list.
-     */
-    pagination: RelayPagination;
-    /**
-     * The height of each row in the list, default is 56px.
-     */
-    rowHeight?: number;
-    /**
-     * The children are used to render the ListItem component for each item in the list.
-     */
-    children: (index: number) => ReactElement | null;
-    /**
-     * The ref for the scroll container.
-     */
-    scrollRef?: RefObject<HTMLDivElement | null>;
-}
-/**
- *  WidgetList used for rendering a list of in a widget. It is a wrapper component for the ListItem components.
- *
- * @param { WidgetListProps} props - The props for the  WidgetList component
- * @returns {Element}  WidgetList component
- */
-export declare const WidgetList: ({ dataTestId, pagination, count, children, className, rowHeight, scrollRef, }: WidgetListProps) => import("react/jsx-runtime").JSX.Element;

package/src/WidgetList/WidgetList.variants.d.ts

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