@elevasis/ui 1.26.1 → 1.27.0

package/dist/charts/index.js

@@ -2,11 +2,11 @@ export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, Cyb
 import '../chunk-MCA6LOGM.js';
 import '../chunk-3KMDHCAR.js';
 import '../chunk-NNKKBSJN.js';
-import '../chunk-QJ2S46NI.js';
 import '../chunk-LXHZYSMQ.js';
-import '../chunk-MHW43EOH.js';
 import '../chunk-ELJIFLCB.js';
 import '../chunk-SZHARWKU.js';
+import '../chunk-MHW43EOH.js';
+import '../chunk-QJ2S46NI.js';
 import '../chunk-IOKL7BKE.js';
 import '../chunk-RWQIFKMJ.js';
 import '../chunk-ALA56RGZ.js';

package/dist/{chunk-AWT255UH.js → chunk-2IJCM3VQ.js}

@@ -1,9 +1,44 @@
-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 { sidebarGroupChevronSize, sidebarIconInnerSize, sidebarListItemIconSize } from './chunk-QJ2S46NI.js';
+import { Box, Group, Text, Center, Container, Stack, UnstyledButton, Collapse } from '@mantine/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
 
+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 });
+}
 var PageContainer = ({ children }) => {
   return (
     // Add padding to the top of the container to adjust for the topbar height
@@ -216,40 +251,5 @@ var SidebarListItem = ({
     }
   );
 };
-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-5COLSYBE.js

@@ -0,0 +1,199 @@
+import { topbarHeight, sidebarTransitionDuration, sidebarBottomSectionHeight } from './chunk-QJ2S46NI.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+var SubshellContainer = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        height: "100%",
+        width: "100%",
+        position: "relative"
+      },
+      children
+    }
+  );
+};
+var SubshellRightSideContainer = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
+var mdSpacing = 16;
+var SubshellContentContainer = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        overflowX: "clip",
+        overflowY: "auto",
+        minWidth: 0,
+        minHeight: 0,
+        padding: "var(--mantine-spacing-md)",
+        paddingTop: `${topbarHeight + mdSpacing}px`
+      },
+      children
+    }
+  );
+};
+var SubshellSidebar = ({
+  children,
+  className,
+  width,
+  collapsible = true,
+  defaultOpen = true
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const effectiveWidth = collapsible && !isOpen ? 0 : width;
+  if (!collapsible) {
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        className,
+        style: {
+          width: `${width}px`,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "color-mix(in srgb, var(--glass-background) 80%, transparent)",
+          backdropFilter: "var(--glass-blur)",
+          WebkitBackdropFilter: "var(--glass-blur)",
+          borderRight: "1px solid var(--color-border)",
+          boxShadow: "var(--card-shadow)",
+          clipPath: "inset(-100px -100px -100px 0)",
+          minHeight: `calc(100vh - ${topbarHeight}px)`,
+          marginTop: `${topbarHeight}px`,
+          fontFamily: "var(--elevasis-font-family-subtitle)"
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        flexShrink: 0,
+        marginTop: `${topbarHeight}px`,
+        minHeight: `calc(100vh - ${topbarHeight}px)`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className,
+            style: {
+              width: `${effectiveWidth}px`,
+              flexShrink: 0,
+              display: "flex",
+              flexDirection: "column",
+              backgroundColor: "color-mix(in srgb, var(--glass-background) 80%, transparent)",
+              backdropFilter: "var(--glass-blur)",
+              WebkitBackdropFilter: "var(--glass-blur)",
+              borderRight: isOpen ? "1px solid var(--color-border)" : "none",
+              boxShadow: isOpen ? "var(--card-shadow)" : "none",
+              clipPath: isOpen ? "inset(-100px -100px -100px 0)" : "none",
+              height: "100%",
+              fontFamily: "var(--elevasis-font-family-subtitle)",
+              overflow: "hidden",
+              transition: `width ${sidebarTransitionDuration}ms var(--easing)`
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: `${width}px`,
+                  flexShrink: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  opacity: isOpen ? 1 : 0,
+                  transition: `opacity var(--duration-fast) var(--easing)`
+                },
+                children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsOpen((prev) => !prev),
+            style: {
+              position: "absolute",
+              right: 0,
+              bottom: 0,
+              transform: "translateX(100%)",
+              width: "20px",
+              // Match the live height of the outer Sidebar's bottom profile section.
+              // SidebarBottomSection publishes --elevasis-sidebar-bottom-section-height
+              // via ResizeObserver so this follows its actual height through
+              // collapse/expand transitions. Falls back to the expanded-state
+              // constant when rendered outside a Sidebar layout.
+              height: `var(--elevasis-sidebar-bottom-section-height, ${sidebarBottomSectionHeight}px)`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "color-mix(in srgb, var(--glass-background) 80%, transparent)",
+              backdropFilter: "var(--glass-blur)",
+              WebkitBackdropFilter: "var(--glass-blur)",
+              border: "1px solid var(--color-border)",
+              borderLeft: "none",
+              borderBottom: "none",
+              borderRadius: "0 4px 0 0",
+              cursor: "pointer",
+              color: "var(--color-text-subtle)",
+              padding: 0,
+              zIndex: 10,
+              transition: `color var(--duration-fast) var(--easing)`
+            },
+            "aria-label": isOpen ? "Collapse sidebar" : "Expand sidebar",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "6",
+                height: "10",
+                viewBox: "0 0 8 12",
+                fill: "none",
+                style: {
+                  transform: isOpen ? void 0 : "rotate(180deg)",
+                  transition: `transform var(--duration-fast) var(--easing)`
+                },
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M6 1L1 6L6 11",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { SubshellContainer, SubshellContentContainer, SubshellRightSideContainer, SubshellSidebar };

package/dist/{chunk-RMPXGBNI.js → chunk-5JSR6TL5.js}

@@ -1,7 +1,7 @@
 import { ElevasisLoader } from './chunk-SZHARWKU.js';
-import { PRESETS, getPreset, generateShades, mantineThemeOverride, createCssVariablesResolver, PresetsProvider } from './chunk-FEZZ3IDU.js';
+import { PRESETS, getPreset, generateShades, mantineThemeOverride, createCssVariablesResolver, PresetsProvider } from './chunk-TXPUIHX2.js';
 import { AppBackground } from './chunk-CYXZHBP4.js';
-import { ElevasisCoreProvider } from './chunk-R7WLWGPO.js';
+import { ElevasisCoreProvider } from './chunk-ITCEULI5.js';
 import { AppearanceProvider } from './chunk-QJ2KCHKX.js';
 import { getErrorInfo, formatErrorMessage, getErrorTitle } from './chunk-IOKL7BKE.js';
 import { useMemo, useEffect } from 'react';