@elevasis/ui 1.20.1 → 1.22.0

package/dist/chunk-AWT255UH.js

@@ -0,0 +1,255 @@
+import { sidebarGroupChevronSize, sidebarIconInnerSize, sidebarListItemIconSize } from './chunk-QJ2S46NI.js';
+import { useAppearance } from './chunk-QJ2KCHKX.js';
+import { Container, Stack, Box, UnstyledButton, Group, Text, Collapse, Center } from '@mantine/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
+
+var PageContainer = ({ children }) => {
+  return (
+    // Add padding to the top of the container to adjust for the topbar height
+    /* @__PURE__ */ jsx(Container, { size: "xl", p: 0, w: "100%", children: /* @__PURE__ */ jsx(Stack, { gap: "lg", children }) })
+  );
+};
+var activeColor = "var(--color-primary)";
+var defaultTextColor = "var(--color-text)";
+var subtleColor = "var(--color-text-subtle)";
+var activeBg = `color-mix(in srgb, ${activeColor} 10%, transparent)`;
+var CollapsibleSidebarGroup = ({
+  icon: Icon,
+  label,
+  isExpanded,
+  onToggle,
+  isActive = false,
+  badge,
+  children,
+  onLabelClick,
+  emptyMessage = "No items",
+  isEmpty = false,
+  isLoading = false,
+  loadingComponent
+}) => {
+  const showActiveStyle = !isExpanded && isActive;
+  const iconColor = showActiveStyle ? activeColor : subtleColor;
+  const textColor = showActiveStyle ? activeColor : defaultTextColor;
+  const fontWeight = showActiveStyle ? 600 : 500;
+  const handleLabelClick = (e) => {
+    if (onLabelClick) {
+      e.stopPropagation();
+      onLabelClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        onClick: onToggle,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          padding: "var(--mantine-spacing-xs)",
+          color: textColor,
+          backgroundColor: showActiveStyle ? activeBg : "transparent",
+          transition: `all var(--duration-fast) var(--easing)`,
+          cursor: "pointer",
+          overflow: "hidden"
+        },
+        onMouseEnter: (e) => {
+          if (!showActiveStyle) {
+            e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!showActiveStyle) {
+            e.currentTarget.style.backgroundColor = "transparent";
+          }
+        },
+        children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0, color: iconColor }, children: isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: sidebarGroupChevronSize }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sidebarGroupChevronSize }) }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: { flexShrink: 0, color: iconColor, cursor: onLabelClick ? "pointer" : "inherit" },
+              onClick: onLabelClick ? handleLabelClick : void 0,
+              children: /* @__PURE__ */ jsx(Icon, { size: sidebarIconInnerSize, color: activeColor })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              fw: fontWeight,
+              style: {
+                fontFamily: "var(--elevasis-font-family-subtitle)",
+                color: textColor,
+                transition: `color var(--duration-fast) var(--easing)`,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1,
+                cursor: onLabelClick ? "pointer" : "inherit"
+              },
+              onClick: onLabelClick ? handleLabelClick : void 0,
+              children: label
+            }
+          ),
+          badge && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: badge })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsx(
+      Stack,
+      {
+        gap: 0,
+        mt: "xs",
+        ml: "xs",
+        style: {
+          borderLeft: `1px solid color-mix(in srgb, var(--color-primary) 40%, transparent)`,
+          marginLeft: "calc(var(--mantine-spacing-xs) + 6px)",
+          paddingLeft: "calc(var(--mantine-spacing-xs) - 2px)"
+        },
+        children: isLoading ? loadingComponent : isEmpty ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { padding: "6px 8px" }, children: emptyMessage }) : children
+      }
+    ) })
+  ] });
+};
+var activeColor2 = "var(--color-primary)";
+var defaultColor = "var(--color-text-subtle)";
+var hoverColor = "var(--color-text)";
+var activeBg2 = `color-mix(in srgb, ${activeColor2} 10%, transparent)`;
+var SidebarListItem = ({
+  icon: Icon,
+  label,
+  isActive = false,
+  onClick,
+  description,
+  badge,
+  disabled = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      style: {
+        width: "100%",
+        padding: "var(--mantine-spacing-xs)",
+        backgroundColor: isActive ? activeBg2 : "transparent",
+        borderRadius: "var(--mantine-radius-default)",
+        transition: `all var(--duration-fast) var(--easing)`,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1
+      },
+      onMouseEnter: (e) => {
+        if (!isActive && !disabled) {
+          e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
+          const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
+          textElements.forEach((el) => {
+            el.style.color = hoverColor;
+          });
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isActive && !disabled) {
+          e.currentTarget.style.backgroundColor = "transparent";
+          const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
+          textElements.forEach((el) => {
+            el.style.color = defaultColor;
+          });
+        }
+      },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              size: sidebarListItemIconSize,
+              style: {
+                flexShrink: 0,
+                opacity: isActive ? 1 : 0.6,
+                color: isActive ? activeColor2 : defaultColor
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              fw: isActive ? 600 : 400,
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1,
+                fontFamily: "var(--elevasis-font-family-subtitle)",
+                color: isActive ? activeColor2 : defaultColor,
+                transition: `color var(--duration-fast) var(--easing)`
+              },
+              "data-text-element": true,
+              children: label
+            }
+          ),
+          badge && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: badge })
+        ] }),
+        description && /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            c: "dimmed",
+            style: {
+              paddingLeft: "22px",
+              lineHeight: 1.2,
+              color: isActive ? activeColor2 : defaultColor,
+              opacity: isActive ? 0.8 : 0.6,
+              transition: `all var(--duration-fast) var(--easing)`,
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            "data-text-element": true,
+            children: description
+          }
+        )
+      ] })
+    }
+  );
+};
+var SubshellSidebarSection = ({
+  icon: Icon,
+  label,
+  rightSection,
+  withTopBorder = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      p: "sm",
+      style: {
+        borderTop: withTopBorder ? "1px solid var(--color-border)" : void 0,
+        borderBottom: "1px solid var(--color-border)"
+      },
+      children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Icon, { size: 16, color: "var(--color-text-subtle)" }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "sm",
+            fw: 600,
+            c: "var(--color-text-subtle)",
+            style: { fontFamily: "var(--mantine-font-family-headings)", flex: 1 },
+            children: label
+          }
+        ),
+        rightSection
+      ] })
+    }
+  );
+};
+function SubshellLoader() {
+  const { loader } = useAppearance();
+  return /* @__PURE__ */ jsx(Center, { mih: "calc(100vh - 70px)", children: loader });
+}
+
+export { CollapsibleSidebarGroup, PageContainer, SidebarListItem, SubshellLoader, SubshellSidebarSection };

package/dist/{chunk-EMN755L5.js → chunk-CTF6FS2M.js}

@@ -1,11 +1,11 @@
 import { NavigationButton } from './chunk-NNKKBSJN.js';
-import { sidebarItemGap, sidebarSubLinkPaddingY, sidebarSubLinkPaddingX, sidebarSubLinkIndent, sidebarHoverDelay, sidebarTransitionDuration, sidebarCollapsedWidth, sidebarWidth, topbarHeight, sidebarToggleIconSize, sidebarSectionPadding, sidebarGroupChevronSize, sidebarIconInnerSize, sidebarListItemIconSize, sidebarBottomSectionHeight } from './chunk-QJ2S46NI.js';
+import { sidebarItemGap, sidebarSubLinkPaddingY, sidebarSubLinkPaddingX, sidebarSubLinkIndent, sidebarHoverDelay, sidebarTransitionDuration, sidebarCollapsedWidth, sidebarWidth, topbarHeight, sidebarToggleIconSize, sidebarSectionPadding, sidebarBottomSectionHeight } from './chunk-QJ2S46NI.js';
 import { useAppearance } from './chunk-QJ2KCHKX.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, memo, useEffect, createElement, useContext, useRef, useLayoutEffect, useState } from 'react';
-import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, Box, useMantineColorScheme, Switch, Code } from '@mantine/core';
-import { IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconUser, IconLogout, IconChevronDown, IconChevronRight, IconMoonStars, IconSun } from '@tabler/icons-react';
+import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, useMantineColorScheme, Switch, Code } from '@mantine/core';
+import { IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconUser, IconLogout, IconMoonStars, IconSun } from '@tabler/icons-react';
 
 function Vignette({ strength = 0.35, className }) {
   return /* @__PURE__ */ jsx(
@@ -174,10 +174,10 @@ var isOverviewLink = (label, link) => {
 var SubLinkItem = ({ linkItem, currentPath }) => {
   const { Link } = useRouterContext();
   const isActive = isOverviewLink(linkItem.label, linkItem.link) ? currentPath === linkItem.link : isPathActive(linkItem.link, currentPath);
-  const activeColor3 = "var(--color-primary)";
+  const activeColor = "var(--color-primary)";
   const activeColorBg = "color-mix(in srgb, var(--color-primary) 10%, transparent)";
-  const defaultColor2 = "var(--color-text-subtle)";
-  const hoverColor2 = "var(--color-text)";
+  const defaultColor = "var(--color-text-subtle)";
+  const hoverColor = "var(--color-text)";
   return /* @__PURE__ */ jsx(
     Link,
     {
@@ -188,7 +188,7 @@ var SubLinkItem = ({ linkItem, currentPath }) => {
         textDecoration: "none",
         fontFamily: "var(--elevasis-font-family-subtitle)",
         fontSize: "var(--mantine-font-size-sm)",
-        color: isActive ? activeColor3 : defaultColor2,
+        color: isActive ? activeColor : defaultColor,
         backgroundColor: isActive ? activeColorBg : "transparent",
         padding: `${sidebarSubLinkPaddingY}px ${sidebarSubLinkPaddingX}px ${sidebarSubLinkPaddingY}px ${sidebarSubLinkIndent}px`,
         borderRadius: "var(--mantine-radius-default)",
@@ -198,13 +198,13 @@ var SubLinkItem = ({ linkItem, currentPath }) => {
       onMouseEnter: (e) => {
         if (!isActive) {
           e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          e.currentTarget.style.color = hoverColor2;
+          e.currentTarget.style.color = hoverColor;
         }
       },
       onMouseLeave: (e) => {
         if (!isActive) {
           e.currentTarget.style.backgroundColor = "transparent";
-          e.currentTarget.style.color = defaultColor2;
+          e.currentTarget.style.color = defaultColor;
         }
       },
       children: linkItem.label
@@ -749,212 +749,6 @@ var Sidebar = memo(function Sidebar2({
     /* @__PURE__ */ jsx(SidebarBottomSection, { user, onLogout, onAccountClick })
   ] });
 });
-var activeColor = "var(--color-primary)";
-var defaultTextColor = "var(--color-text)";
-var subtleColor = "var(--color-text-subtle)";
-var activeBg = `color-mix(in srgb, ${activeColor} 10%, transparent)`;
-var CollapsibleSidebarGroup = ({
-  icon: Icon,
-  label,
-  isExpanded,
-  onToggle,
-  isActive = false,
-  badge,
-  children,
-  onLabelClick,
-  emptyMessage = "No items",
-  isEmpty = false,
-  isLoading = false,
-  loadingComponent
-}) => {
-  const showActiveStyle = !isExpanded && isActive;
-  const iconColor = showActiveStyle ? activeColor : subtleColor;
-  const textColor = showActiveStyle ? activeColor : defaultTextColor;
-  const fontWeight = showActiveStyle ? 600 : 500;
-  const handleLabelClick = (e) => {
-    if (onLabelClick) {
-      e.stopPropagation();
-      onLabelClick();
-    }
-  };
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(
-      UnstyledButton,
-      {
-        onClick: onToggle,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          width: "100%",
-          padding: "var(--mantine-spacing-xs)",
-          color: textColor,
-          backgroundColor: showActiveStyle ? activeBg : "transparent",
-          transition: `all var(--duration-fast) var(--easing)`,
-          cursor: "pointer",
-          overflow: "hidden"
-        },
-        onMouseEnter: (e) => {
-          if (!showActiveStyle) {
-            e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          }
-        },
-        onMouseLeave: (e) => {
-          if (!showActiveStyle) {
-            e.currentTarget.style.backgroundColor = "transparent";
-          }
-        },
-        children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0, color: iconColor }, children: isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: sidebarGroupChevronSize }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sidebarGroupChevronSize }) }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              style: { flexShrink: 0, color: iconColor, cursor: onLabelClick ? "pointer" : "inherit" },
-              onClick: onLabelClick ? handleLabelClick : void 0,
-              children: /* @__PURE__ */ jsx(Icon, { size: sidebarIconInnerSize, color: activeColor })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "sm",
-              fw: fontWeight,
-              style: {
-                fontFamily: "var(--elevasis-font-family-subtitle)",
-                color: textColor,
-                transition: `color var(--duration-fast) var(--easing)`,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                flex: 1,
-                cursor: onLabelClick ? "pointer" : "inherit"
-              },
-              onClick: onLabelClick ? handleLabelClick : void 0,
-              children: label
-            }
-          ),
-          badge && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: badge })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsx(
-      Stack,
-      {
-        gap: 0,
-        mt: "xs",
-        ml: "xs",
-        style: {
-          borderLeft: `1px solid color-mix(in srgb, var(--color-primary) 40%, transparent)`,
-          marginLeft: "calc(var(--mantine-spacing-xs) + 6px)",
-          paddingLeft: "calc(var(--mantine-spacing-xs) - 2px)"
-        },
-        children: isLoading ? loadingComponent : isEmpty ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { padding: "6px 8px" }, children: emptyMessage }) : children
-      }
-    ) })
-  ] });
-};
-var activeColor2 = "var(--color-primary)";
-var defaultColor = "var(--color-text-subtle)";
-var hoverColor = "var(--color-text)";
-var activeBg2 = `color-mix(in srgb, ${activeColor2} 10%, transparent)`;
-var SidebarListItem = ({
-  icon: Icon,
-  label,
-  isActive = false,
-  onClick,
-  description,
-  badge,
-  disabled = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      onClick: disabled ? void 0 : onClick,
-      disabled,
-      style: {
-        width: "100%",
-        padding: "var(--mantine-spacing-xs)",
-        backgroundColor: isActive ? activeBg2 : "transparent",
-        borderRadius: "var(--mantine-radius-default)",
-        transition: `all var(--duration-fast) var(--easing)`,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1
-      },
-      onMouseEnter: (e) => {
-        if (!isActive && !disabled) {
-          e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
-          textElements.forEach((el) => {
-            el.style.color = hoverColor;
-          });
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!isActive && !disabled) {
-          e.currentTarget.style.backgroundColor = "transparent";
-          const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
-          textElements.forEach((el) => {
-            el.style.color = defaultColor;
-          });
-        }
-      },
-      children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              size: sidebarListItemIconSize,
-              style: {
-                flexShrink: 0,
-                opacity: isActive ? 1 : 0.6,
-                color: isActive ? activeColor2 : defaultColor
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "sm",
-              fw: isActive ? 600 : 400,
-              style: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                flex: 1,
-                fontFamily: "var(--elevasis-font-family-subtitle)",
-                color: isActive ? activeColor2 : defaultColor,
-                transition: `color var(--duration-fast) var(--easing)`
-              },
-              "data-text-element": true,
-              children: label
-            }
-          ),
-          badge && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: badge })
-        ] }),
-        description && /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "xs",
-            c: "dimmed",
-            style: {
-              paddingLeft: "22px",
-              lineHeight: 1.2,
-              color: isActive ? activeColor2 : defaultColor,
-              opacity: isActive ? 0.8 : 0.6,
-              transition: `all var(--duration-fast) var(--easing)`,
-              display: "-webkit-box",
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            "data-text-element": true,
-            children: description
-          }
-        )
-      ] })
-    }
-  );
-};
 var SubshellContainer = ({ children, className }) => {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1238,4 +1032,4 @@ var Topbar = ({ version, leftContent, children }) => {
   ] });
 };
 
-export { AppShellContainer, AppShellContentContainer, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, LinksGroup, Sidebar, SidebarContext, SidebarListItem, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellRightSideContainer, SubshellSidebar, Topbar, TopbarContainer, Vignette, subsidebarWidth, useSidebar, useSidebarCollapse };
+export { AppShellContainer, AppShellContentContainer, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, LinksGroup, Sidebar, SidebarContext, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellRightSideContainer, SubshellSidebar, Topbar, TopbarContainer, Vignette, subsidebarWidth, useSidebar, useSidebarCollapse };