@trackunit/react-widgets 2.0.0

package/index.esm.js

@@ -0,0 +1,343 @@
+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, VirtualizedList, cvaInteractableItem } from '@trackunit/react-components';
+import { Children, Fragment, useState } from 'react';
+import { WidgetConfigRuntime } from '@trackunit/iris-app-runtime-core';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+
+var defaultTranslations = {
+	"widget.edit.cancel": "Cancel",
+	"widget.edit.save": "Save",
+	"widget.edit.title": "Configure",
+	"widget.emptystate.configure": "Configure",
+	"widget.emptystate.error": "Something went wrong. Try refreshing the page. If the error persists, contact our support team.",
+	"widget.emptystate.missingdata": "This widget needs a quick setup before it can show your data."
+};
+
+/** The translation namespace for this library */
+const namespace = "react.widgets";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => import('./translation.esm.js'),
+        da: () => import('./translation.esm2.js'),
+        cs: () => import('./translation.esm3.js'),
+        nl: () => import('./translation.esm4.js'),
+        fr: () => import('./translation.esm5.js'),
+        fi: () => import('./translation.esm6.js'),
+        hu: () => import('./translation.esm7.js'),
+        it: () => import('./translation.esm8.js'),
+        nb: () => import('./translation.esm9.js'),
+        pl: () => import('./translation.esm10.js'),
+        pt: () => import('./translation.esm11.js'),
+        ru: () => import('./translation.esm12.js'),
+        ro: () => import('./translation.esm13.js'),
+        es: () => import('./translation.esm14.js'),
+        sv: () => import('./translation.esm15.js'),
+        ja: () => import('./translation.esm16.js'),
+        th: () => import('./translation.esm17.js'),
+    },
+};
+/**
+ *  Local useTranslation for this specific library
+ */
+const useTranslation = () => useNamespaceTranslation(namespace);
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    registerTranslations(translations);
+};
+
+var widgetError = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M111.778%20125.45C111.063%20125.451%20110.354%20125.31%20109.693%20125.036C109.032%20124.761%20108.432%20124.358%20107.928%20123.85L100.272%20116.2L92.6062%20123.854C92.1005%20124.359%2091.5002%20124.76%2090.8395%20125.034C90.1789%20125.307%2089.4708%20125.448%2088.7558%20125.448C87.3118%20125.447%2085.927%20124.873%2084.9062%20123.852C83.8854%20122.831%2083.3121%20121.446%2083.3125%20120.002C83.3129%20118.558%2083.8869%20117.173%2084.9082%20116.152L92.5642%20108.498L84.9082%20100.842C83.8869%2099.8211%2083.3129%2098.4364%2083.3125%2096.9924C83.3121%2095.5483%2083.8854%2094.1633%2084.9062%2093.1419C85.927%2092.1206%2087.3118%2091.5466%2088.7558%2091.5462C90.1998%2091.5459%2091.5849%2092.1191%2092.6062%2093.1399L100.272%20100.8L107.928%2093.1419C108.431%2092.6243%20109.032%2092.2118%20109.696%2091.9284C110.36%2091.645%20111.073%2091.4965%20111.795%2091.4913C112.517%2091.4862%20113.233%2091.6246%20113.9%2091.8985C114.568%2092.1724%20115.175%2092.5763%20115.685%2093.0868C116.196%2093.5973%20116.599%2094.2041%20116.873%2094.872C117.147%2095.5399%20117.285%2096.2555%20117.28%2096.9773C117.275%2097.6991%20117.126%2098.4127%20116.842%2099.0765C116.559%2099.7402%20116.146%20100.341%20115.628%20100.844L107.972%20108.5L115.628%20116.154C116.389%20116.916%20116.907%20117.886%20117.117%20118.942C117.327%20119.999%20117.219%20121.093%20116.807%20122.088C116.395%20123.083%20115.698%20123.934%20114.803%20124.532C113.907%20125.131%20112.855%20125.449%20111.778%20125.45Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
+/**
+ * Use when you want to show an error state in a widget.
+ *
+ * @param {WidgetErrorProps} props - The props for the WidgetErrorProps component
+ * @returns {ReactNode} WidgetMissingConfiguration component
+ */
+const WidgetError = ({ description }) => {
+    const [t] = useTranslation();
+    return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsx(EmptyState, { customImageSrc: widgetError, description: description || t("widget.emptystate.error") }) }));
+};
+
+var widgetMissingConfiguration = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M123.038%20107.578H119.01C118.523%20105.078%20117.538%20102.701%20116.113%20100.59L118.964%2097.7352C119.239%2097.4593%20119.394%2097.0853%20119.394%2096.6954C119.394%2096.3054%20119.239%2095.9314%20118.964%2095.6556L115.844%2092.5414C115.708%2092.4045%20115.546%2092.2958%20115.368%2092.2217C115.189%2092.1475%20114.998%2092.1093%20114.805%2092.1093C114.612%2092.1093%20114.421%2092.1475%20114.242%2092.2217C114.064%2092.2958%20113.902%2092.4045%20113.766%2092.5414L110.916%2095.3906C108.804%2093.9684%20106.428%2092.9852%20103.928%2092.4995V88.466C103.928%2088.0772%20103.773%2087.7043%20103.499%2087.4294C103.224%2087.1545%20102.851%2087%20102.462%2087H98.0473C97.6585%2087%2097.2856%2087.1545%2097.0107%2087.4294C96.7357%2087.7043%2096.5813%2088.0772%2096.5813%2088.466V92.4995C94.0812%2092.9863%2091.7046%2093.9709%2089.5928%2095.3948L86.7383%2092.5414C86.6021%2092.4045%2086.4401%2092.2958%2086.2618%2092.2217C86.0834%2092.1475%2085.8922%2092.1093%2085.699%2092.1093C85.5059%2092.1093%2085.3146%2092.1475%2085.1363%2092.2217C84.9579%2092.2958%2084.796%2092.4045%2084.6597%2092.5414L81.5414%2095.6597C81.4043%2095.796%2081.2955%2095.958%2081.2213%2096.1364C81.147%2096.3149%2081.1088%2096.5063%2081.1088%2096.6995C81.1088%2096.8928%2081.147%2097.0842%2081.2213%2097.2626C81.2955%2097.4411%2081.4043%2097.6031%2081.5414%2097.7393L84.3906%20100.589C82.9669%20102.701%2081.982%20105.078%2081.4943%20107.578H77.466C77.0772%20107.578%2076.7043%20107.733%2076.4294%20108.008C76.1545%20108.282%2076%20108.655%2076%20109.044V113.455C76%20113.843%2076.1545%20114.216%2076.4294%20114.491C76.7043%20114.766%2077.0772%20114.921%2077.466%20114.921H81.4943C81.9821%20117.421%2082.967%20119.797%2084.3906%20121.909L81.5414%20124.758C81.4045%20124.895%2081.2958%20125.057%2081.2217%20125.235C81.1475%20125.413%2081.1093%20125.604%2081.1093%20125.798C81.1093%20125.991%2081.1475%20126.182%2081.2217%20126.36C81.2958%20126.539%2081.4045%20126.701%2081.5414%20126.837L84.6597%20129.956C84.796%20130.093%2084.9579%20130.202%2085.1363%20130.276C85.3146%20130.35%2085.5059%20130.388%2085.699%20130.388C85.8922%20130.388%2086.0834%20130.35%2086.2618%20130.276C86.4401%20130.202%2086.6021%20130.093%2086.7383%20129.956L89.5886%20127.106C91.7004%20128.53%2094.077%20129.515%2096.5771%20130.002V134.031C96.5771%20134.223%2096.615%20134.414%2096.6887%20134.592C96.7624%20134.77%2096.8703%20134.931%2097.0065%20135.067C97.1426%20135.203%2097.3042%20135.311%2097.4821%20135.385C97.6599%20135.459%2097.8506%20135.497%2098.0431%20135.497H102.458C102.65%20135.497%20102.841%20135.459%20103.019%20135.385C103.197%20135.311%20103.358%20135.203%20103.494%20135.067C103.631%20134.931%20103.738%20134.77%20103.812%20134.592C103.886%20134.414%20103.924%20134.223%20103.924%20134.031V130.01C106.424%20129.522%20108.8%20128.537%20110.912%20127.113L113.762%20129.964C113.898%20130.101%20114.06%20130.209%20114.238%20130.283C114.416%20130.358%20114.608%20130.396%20114.801%20130.396C114.994%20130.396%20115.185%20130.358%20115.364%20130.283C115.542%20130.209%20115.704%20130.101%20115.84%20129.964L118.964%20126.845C119.101%20126.709%20119.209%20126.547%20119.283%20126.369C119.358%20126.19%20119.396%20125.999%20119.396%20125.806C119.396%20125.613%20119.358%20125.422%20119.283%20125.243C119.209%20125.065%20119.101%20124.903%20118.964%20124.767L116.113%20121.918C117.538%20119.806%20118.523%20117.429%20119.01%20114.929H123.038C123.427%20114.929%20123.8%20114.775%20124.075%20114.5C124.35%20114.225%20124.504%20113.852%20124.504%20113.463V109.044C124.504%20108.655%20124.35%20108.282%20124.075%20108.008C123.8%20107.733%20123.427%20107.578%20123.038%20107.578ZM100.253%20122.278C98.0718%20122.278%2095.9399%20121.632%2094.1264%20120.421C92.3129%20119.21%2090.8993%20117.488%2090.0643%20115.474C89.2294%20113.459%2089.0106%20111.242%2089.4356%20109.104C89.8607%20106.965%2090.9105%20105%2092.4523%20103.458C93.994%20101.915%2095.9585%20100.865%2098.0973%20100.439C100.236%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.416%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.274%20114.176%20110.113%20116.98%20108.046%20119.047C105.979%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M100.253%20122.278C98.0722%20122.279%2095.9403%20121.632%2094.1268%20120.421C92.3133%20119.21%2090.8997%20117.489%2090.0648%20115.474C89.2298%20113.46%2089.011%20111.243%2089.4361%20109.104C89.8611%20106.965%2090.9109%20105%2092.4527%20103.458C93.9945%20101.916%2095.959%20100.865%2098.0978%20100.44C100.237%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.417%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.275%20114.176%20110.114%20116.98%20108.047%20119.047C105.98%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222.236%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M123.038%20107.578H119.01C118.523%20105.078%20117.538%20102.701%20116.113%20100.59L118.964%2097.7352C119.239%2097.4593%20119.394%2097.0853%20119.394%2096.6954C119.394%2096.3054%20119.239%2095.9314%20118.964%2095.6556L115.844%2092.5414C115.708%2092.4045%20115.546%2092.2958%20115.368%2092.2217C115.189%2092.1475%20114.998%2092.1093%20114.805%2092.1093C114.612%2092.1093%20114.421%2092.1475%20114.242%2092.2217C114.064%2092.2958%20113.902%2092.4045%20113.766%2092.5414L110.916%2095.3906C108.804%2093.9684%20106.428%2092.9852%20103.928%2092.4995V88.466C103.928%2088.0772%20103.773%2087.7043%20103.499%2087.4294C103.224%2087.1545%20102.851%2087%20102.462%2087H98.0473C97.6585%2087%2097.2856%2087.1545%2097.0107%2087.4294C96.7357%2087.7043%2096.5813%2088.0772%2096.5813%2088.466V92.4995C94.0812%2092.9863%2091.7046%2093.9709%2089.5928%2095.3948L86.7383%2092.5414C86.6021%2092.4045%2086.4401%2092.2958%2086.2618%2092.2217C86.0834%2092.1475%2085.8922%2092.1093%2085.699%2092.1093C85.5059%2092.1093%2085.3146%2092.1475%2085.1363%2092.2217C84.9579%2092.2958%2084.796%2092.4045%2084.6597%2092.5414L81.5414%2095.6597C81.4043%2095.796%2081.2955%2095.958%2081.2213%2096.1364C81.147%2096.3149%2081.1088%2096.5063%2081.1088%2096.6995C81.1088%2096.8928%2081.147%2097.0842%2081.2213%2097.2626C81.2955%2097.4411%2081.4043%2097.6031%2081.5414%2097.7393L84.3906%20100.589C82.9669%20102.701%2081.982%20105.078%2081.4943%20107.578H77.466C77.0772%20107.578%2076.7043%20107.733%2076.4294%20108.008C76.1545%20108.282%2076%20108.655%2076%20109.044V113.455C76%20113.843%2076.1545%20114.216%2076.4294%20114.491C76.7043%20114.766%2077.0772%20114.921%2077.466%20114.921H81.4943C81.9821%20117.421%2082.967%20119.797%2084.3906%20121.909L81.5414%20124.758C81.4045%20124.895%2081.2958%20125.057%2081.2217%20125.235C81.1475%20125.413%2081.1093%20125.604%2081.1093%20125.798C81.1093%20125.991%2081.1475%20126.182%2081.2217%20126.36C81.2958%20126.539%2081.4045%20126.701%2081.5414%20126.837L84.6597%20129.956C84.796%20130.093%2084.9579%20130.202%2085.1363%20130.276C85.3146%20130.35%2085.5059%20130.388%2085.699%20130.388C85.8922%20130.388%2086.0834%20130.35%2086.2618%20130.276C86.4401%20130.202%2086.6021%20130.093%2086.7383%20129.956L89.5886%20127.106C91.7004%20128.53%2094.077%20129.515%2096.5771%20130.002V134.031C96.5771%20134.223%2096.615%20134.414%2096.6887%20134.592C96.7624%20134.77%2096.8704%20134.931%2097.0065%20135.067C97.1426%20135.203%2097.3042%20135.311%2097.4821%20135.385C97.6599%20135.459%2097.8506%20135.497%2098.0431%20135.497H102.458C102.65%20135.497%20102.841%20135.459%20103.019%20135.385C103.197%20135.311%20103.358%20135.203%20103.494%20135.067C103.631%20134.931%20103.738%20134.77%20103.812%20134.592C103.886%20134.414%20103.924%20134.223%20103.924%20134.031V130.01C106.424%20129.522%20108.8%20128.537%20110.912%20127.113L113.762%20129.964C113.898%20130.101%20114.06%20130.209%20114.238%20130.283C114.416%20130.358%20114.608%20130.396%20114.801%20130.396C114.994%20130.396%20115.185%20130.358%20115.364%20130.283C115.542%20130.209%20115.704%20130.101%20115.84%20129.964L118.964%20126.845C119.101%20126.709%20119.209%20126.547%20119.283%20126.369C119.358%20126.19%20119.396%20125.999%20119.396%20125.806C119.396%20125.613%20119.358%20125.422%20119.283%20125.243C119.209%20125.065%20119.101%20124.903%20118.964%20124.767L116.113%20121.918C117.538%20119.806%20118.523%20117.429%20119.01%20114.929H123.038C123.427%20114.929%20123.8%20114.775%20124.075%20114.5C124.35%20114.225%20124.504%20113.852%20124.504%20113.463V109.044C124.504%20108.655%20124.35%20108.282%20124.075%20108.008C123.8%20107.733%20123.427%20107.578%20123.038%20107.578ZM100.253%20122.278C98.0718%20122.278%2095.9399%20121.632%2094.1264%20120.421C92.3129%20119.21%2090.8993%20117.488%2090.0643%20115.474C89.2294%20113.459%2089.0106%20111.242%2089.4356%20109.104C89.8607%20106.965%2090.9105%20105%2092.4523%20103.458C93.9941%20101.915%2095.9585%20100.865%2098.0973%20100.439C100.236%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.416%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.274%20114.176%20110.113%20116.98%20108.046%20119.047C105.979%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222.236%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
+/**
+ * Use when you want to show a missing configuration state of a widget.
+ *
+ * This will open the configuration modal when the user clicks the "Configure" button.
+ *
+ * @returns {ReactNode} WidgetMissingConfiguration component
+ */
+const WidgetMissingConfiguration = () => {
+    const [t] = useTranslation();
+    return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsx(EmptyState, { customImageSrc: widgetMissingConfiguration, description: t("widget.emptystate.missingdata"), secondaryAction: { title: t("widget.emptystate.configure"), onClick: () => WidgetConfigRuntime.openEditMode() } }) }));
+};
+
+var widgetNoDataGood = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M95.4118%20126C94.7838%20126.001%2094.1618%20125.879%2093.5817%20125.641C93.0015%20125.404%2092.4745%20125.055%2092.031%20124.615L82.4616%20115.156C82.0044%20114.72%2081.6398%20114.198%2081.3888%20113.621C81.1379%20113.044%2081.0058%20112.423%2081.0002%20111.795C80.9946%20111.167%2081.1155%20110.544%2081.3561%20109.962C81.5966%20109.381%2081.9518%20108.853%2082.4011%20108.409C82.8503%20107.964%2083.3845%20107.613%2083.9726%20107.375C84.5606%20107.138%2085.1907%20107.018%2085.826%20107.024C86.4613%20107.029%2087.0891%20107.16%2087.6727%20107.408C88.2564%20107.656%2088.7843%20108.016%2089.2255%20108.468L95.4141%20114.587L114.897%2095.3243C115.8%2094.4639%20117.008%2093.9884%20118.262%2094.0002C119.516%2094.012%20120.715%2094.5102%20121.601%2095.3875C122.487%2096.2649%20122.99%2097.4511%20123%2098.6909C123.01%2099.9308%20122.528%20101.125%20121.656%20102.017L98.7995%20124.615C98.3548%20125.055%2097.8267%20125.404%2097.2453%20125.642C96.664%20125.879%2096.0409%20126.001%2095.4118%20126Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
+var widgetNoDataNeutral = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M99.3281%20119.8C101.856%20119.8%20103.885%20121.871%20103.885%20124.4C103.885%20126.929%20101.856%20129%2099.3281%20129C96.8001%20129%2094.7707%20126.929%2094.7705%20124.4C94.7705%20121.871%2096.8%20119.8%2099.3281%20119.8ZM91.0703%2094.46C95.6295%2089.8464%20103.027%2089.8463%20107.586%2094.46C112.139%2099.0671%20112.138%20106.532%20107.586%20111.14C106.256%20112.485%20104.677%20113.441%20102.996%20114.003V114.5C102.996%20116.532%20101.365%20118.2%2099.3281%20118.2C97.2912%20118.2%2095.6602%20116.532%2095.6602%20114.5V112.7C95.6602%20109.511%2098.1501%20107.579%20100.284%20107.093C101.052%20106.918%20101.783%20106.529%20102.39%20105.915C104.088%20104.196%20104.089%20101.404%20102.39%2099.6846C100.697%2097.9719%2097.958%2097.9719%2096.2656%2099.6846C94.8322%20101.135%2092.5037%20101.135%2091.0703%2099.6846C89.6434%2098.2406%2089.6434%2095.9039%2091.0703%2094.46Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E";
+
+/**
+ * Use when you want to show a no data state in a widget.
+ *
+ * @param {WidgetNoDataProps} props - The props for the WidgetMissingConfiguration component
+ * @returns {ReactNode} WidgetMissingConfiguration component
+ */
+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"], {
+    variants: {
+        isScrolled: {
+            true: ["border-t"],
+        },
+    },
+});
+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 {JSX.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 {JSX.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",
+        },
+        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-4 pt-2",
+        },
+    },
+    defaultVariants: {
+        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 {ReactNode} WidgetBody component
+ */
+const WidgetBody = ({ density = "auto", children, dataTestId, className, direction = "column", }) => {
+    return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, className, direction }), "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"], {
+    variants: {
+        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-4",
+        },
+    },
+    defaultVariants: {
+        direction: "column",
+        density: "auto",
+    },
+});
+
+/**
+ * The WidgetEditBody component should be used to edit a Widget. This will create a centered dialog with a header, body and footer.
+ * The footer will have a cancel and save button.
+ *
+ * @summary For editing a Widget.
+ * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
+ * @returns {ReactNode} WidgetBody component
+ */
+const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, 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: async () => {
+                            setSaving(true);
+                            await onSave();
+                        }, children: t("widget.edit.save") })] })] }));
+};
+
+const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col", "flex-1", "place-content-start"], {
+    variants: {
+        variant: {
+            small: ["px-3"],
+            condensed: ["px-2", "py-0"],
+            default: [""],
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const cvaWidgetKPIHeader = cvaMerge(["flex", "flex-row", "", "place-items-end", "gap-2", "h-10"]);
+const cvaWidgetKPITitleText = cvaMerge([
+    "leading-tight",
+    "break-words",
+    "flex",
+    "items-start",
+    "text-sm",
+    "font-medium",
+    "text-neutral-500",
+]);
+const cvaWidgetKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap", "text-3xl", "font-medium"]);
+const cvaWidgetKPITrendValueText = cvaMerge([
+    "text-xs",
+    "font-semibold",
+    "whitespace-nowrap",
+    "truncate",
+    "overflow-hidden",
+]);
+const cvaWidgetKPITrendPercentage = cvaMerge(["text-xs", "font-semibold"], {
+    variants: {
+        color: {
+            success: ["text-success-600"],
+            danger: ["text-danger-600"],
+            neutral: ["text-neutral-500"],
+        },
+    },
+    defaultVariants: {
+        color: "success",
+    },
+});
+const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
+    variants: {
+        isDefaultAndHasTrendValue: {
+            true: [],
+            false: ["flex", "flex-row", "gap-1"],
+        },
+    },
+    defaultVariants: {
+        isDefaultAndHasTrendValue: true,
+    },
+});
+
+/**
+ * The WidgetKPI component is used to display WidgetKPIs.
+ *
+ * @param {WidgetKPIProps} props - The props for the WidgetKPI component
+ * @returns {ReactElement} WidgetKPI component
+ */
+const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", ...rest }) => {
+    return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsx(SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsx(SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsx("div", { className: cvaWidgetKPIHeader(), children: jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsx(Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx(Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsx("div", { className: "flex items-end", children: jsx(Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsx("div", { className: cvaWidgetKPIValueContainer({
+                                        isDefaultAndHasTrendValue: Boolean(trend?.value),
+                                        className,
+                                    }), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsx("div", { className: "flex items-center gap-1", children: jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : null] })) }));
+};
+const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
+    if (!trend) {
+        return null;
+    }
+    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 cvaWidgetListVirtualizedList = cvaMerge(["w-full"]);
+
+/**
+ *  WidgetList used for rendering a list of in a widget
+ *
+ * @param { WidgetListProps} props - The props for the  WidgetList component
+ * @returns {JSX.Element}  WidgetList component
+ */
+const WidgetList = ({ dataTestId, pagination, count, children, className, rowHeight = 56, scrollRef, }) => {
+    return (jsx("div", { className: cvaWidgetList({ className }), children: jsx(VirtualizedList, { className: cvaWidgetListVirtualizedList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
+                return children(index);
+            } }) }));
+};
+
+const cvaWidgetListItem = cvaMerge(["py-2", "px-4", "h-14", "w-full"]);
+
+/**
+ *  Widget ListItem component for the WidgetList component this is 1 row in the list
+ *
+ * @param { WidgetListItemProps} props - The props for the  WidgetListItem component
+ * @returns {JSX.Element}  WidgetListItem component
+ */
+const WidgetListItem = ({ className, dataTestId, onClick, details, tableCellComponent, }) => {
+    const interactableItemClass = onClick
+        ? cvaInteractableItem({ cursor: "pointer", className: cvaWidgetListItem({ className }) })
+        : cvaWidgetListItem({ className });
+    return (jsx("div", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, children: jsxs("div", { className: "flex items-center justify-between", children: [jsx("div", { className: "flex items-center gap-2 overflow-hidden text-ellipsis", children: tableCellComponent }), jsxs("div", { className: "flex items-center gap-2 pl-2", children: [details, onClick ? jsx(Icon, { name: "ChevronRight", size: "medium" }) : null] })] }) }));
+};
+
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+export { HorizontalWidgetLayout, VerticalSplitWidgetLayout, WidgetBody, WidgetEditBody, WidgetError, WidgetKPI, WidgetList, WidgetListItem, WidgetMissingConfiguration, WidgetNoData };

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@trackunit/react-widgets",
+  "version": "2.0.0",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "engines": {
+    "node": ">=22.x"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "@trackunit/react-components": "1.6.9",
+    "@trackunit/iris-app-runtime-core": "1.6.9",
+    "@trackunit/css-class-variance-utilities": "1.5.8",
+    "@trackunit/ui-design-tokens": "1.5.8",
+    "@trackunit/ui-icons": "1.5.8",
+    "@trackunit/react-table-pagination": "1.5.8",
+    "@trackunit/shared-utils": "1.7.8",
+    "@trackunit/i18n-library-translation": "1.5.9",
+    "@trackunit/react-test-setup": "1.2.8"
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
+  "types": "./index.d.ts"
+}

package/src/EmptyStates/Error/WidgetError.d.ts

@@ -0,0 +1,10 @@
+export interface WidgetErrorProps {
+    description?: string;
+}
+/**
+ * Use when you want to show an error state in a widget.
+ *
+ * @param {WidgetErrorProps} props - The props for the WidgetErrorProps component
+ * @returns {ReactNode} WidgetMissingConfiguration component
+ */
+export declare const WidgetError: ({ description }: WidgetErrorProps) => import("react/jsx-runtime").JSX.Element;

package/src/EmptyStates/MissingConfiguration/WidgetMissingConfiguration.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Use when you want to show a missing configuration state of a widget.
+ *
+ * This will open the configuration modal when the user clicks the "Configure" button.
+ *
+ * @returns {ReactNode} WidgetMissingConfiguration component
+ */
+export declare const WidgetMissingConfiguration: () => import("react/jsx-runtime").JSX.Element;

package/src/EmptyStates/NoData/WidgetNoData.d.ts

@@ -0,0 +1,12 @@
+export type NoDataType = "Good" | "Neutral";
+export interface WidgetNoDataProps {
+    type?: NoDataType;
+    description: string;
+}
+/**
+ * Use when you want to show a no data state in a widget.
+ *
+ * @param {WidgetNoDataProps} props - The props for the WidgetMissingConfiguration component
+ * @returns {ReactNode} WidgetMissingConfiguration component
+ */
+export declare const WidgetNoData: ({ type, description }: WidgetNoDataProps) => import("react/jsx-runtime").JSX.Element;

package/src/HorizontalWidgetLayout/HorizontalWidgetLayout.d.ts

@@ -0,0 +1,13 @@
+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 {JSX.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

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

@@ -0,0 +1,12 @@
+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 {JSX.Element} VerticalSplitWidgetLayout component
+ */
+export declare const VerticalSplitWidgetLayout: ({ className, dataTestId, children }: VerticalSplitWidgetLayoutProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,4 @@
+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/Widget/WidgetEditBody.d.ts

@@ -0,0 +1,33 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface WidgetEditBodyProps extends CommonProps {
+    /**
+     * Child elements to render in the body
+     */
+    children: ReactNode | null;
+    /**
+     * Function to cancel and close the edit mode
+     */
+    onCancel: () => void;
+    /**
+     * Function to save and close the edit mode
+     */
+    onSave: () => void;
+    /**
+     * Whether the save button should be disabled
+     */
+    saveEditModeDisabled?: boolean;
+    /**
+     * Title of the dialog, if not provided, the default title: "Configure" will be used
+     */
+    title?: string;
+}
+/**
+ * The WidgetEditBody component should be used to edit a Widget. This will create a centered dialog with a header, body and footer.
+ * The footer will have a cancel and save button.
+ *
+ * @summary For editing a Widget.
+ * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
+ * @returns {ReactNode} WidgetBody component
+ */
+export declare const WidgetEditBody: ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }: WidgetEditBodyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const cvaWidgetEditBodyDensityContainer: (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/WidgetKPI/WidgetKPI.d.ts

@@ -0,0 +1,67 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ActivityColors, CriticalityColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { IconName } from "@trackunit/ui-icons";
+import { ReactElement } from "react";
+export interface WidgetKPIProps extends CommonProps {
+    /**
+     * The title of the WidgetKPI Card
+     */
+    title: string;
+    /**
+     * The value of the WidgetKPI Card
+     */
+    value: string | number;
+    /**
+     * The unit of the WidgetKPI Card
+     */
+    unit?: string;
+    /**
+     * Whether or not to show the loading state
+     */
+    loading?: boolean;
+    /**
+     * Label for the tooltip
+     */
+    tooltipLabel?: string;
+    /**
+     * The icon name to be displayed
+     */
+    iconName?: IconName;
+    /**
+     * The color of the icon
+     */
+    iconColor?: "primary" | "warning" | "black" | "secondary" | "danger" | "success" | "neutral" | "info" | IntentColors | ActivityColors | CriticalityColors;
+    /**
+     * The trend of the WidgetKPI Card
+     */
+    trend?: {
+        /**
+         * The value of the trend
+         */
+        value?: number | string;
+        /**
+         * The percentage of the trend
+         */
+        percentage?: number | string;
+        /**
+         * The variant of the trend
+         */
+        variant?: {
+            /**
+             * The icon of the trend
+             */
+            icon?: "ArrowUp" | "ArrowDown" | "ArrowTrendingUp" | "ArrowTrendingDown";
+            /**
+             * The color of the trend
+             */
+            color?: "success" | "danger" | "neutral";
+        };
+    };
+}
+/**
+ * The WidgetKPI component is used to display WidgetKPIs.
+ *
+ * @param {WidgetKPIProps} props - The props for the WidgetKPI component
+ * @returns {ReactElement} WidgetKPI component
+ */
+export declare const WidgetKPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor, ...rest }: WidgetKPIProps) => ReactElement;

package/src/WidgetKPI/WidgetKPI.variants.d.ts

@@ -0,0 +1,13 @@
+export declare const cvaWidgetKPI: (props?: ({
+    variant?: "default" | "small" | "condensed" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaWidgetKPIHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaWidgetKPITitleText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaWidgetKPIvalueText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaWidgetKPITrendValueText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaWidgetKPITrendPercentage: (props?: ({
+    color?: "success" | "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaWidgetKPIValueContainer: (props?: ({
+    isDefaultAndHasTrendValue?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;