@ixo/ui 0.1.0 → 0.1.2

package/dist/{components-DH1wUH8v.cjs → components-DmNQnT1T.cjs}

@@ -798,8 +798,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-B3UsRV_8.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-DX1KrNFO.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-XY4B3I-N.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-DCwo8wx3.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -883,7 +883,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CEnAOLa3.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BrKy3nSz.cjs")));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleOnClick = react$1.useCallback(
@@ -1318,7 +1318,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-C9TPn4gB.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-C7R4oqBT.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2126,6 +2126,7 @@ function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInp
   );
 }
 function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, onCanvasCycle, isHistoryOpened, canvasMode = "hidden", oracleModel, sessionTitle }) {
+  const isMobile = hooks.useMediaQuery("(max-width: 48em)");
   const canvasActive = canvasMode !== "hidden";
   return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { bg: "neutralColor.4", py: 16, justify: "space-between", align: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 6, align: "center", children: [
@@ -2162,7 +2163,7 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, o
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.HistorySolid, { size: 18, color: "secondary" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
         core.Center,
         {
           sx: {
@@ -2219,7 +2220,7 @@ function Avatar({ src, rounded = true, size = 62, did }) {
 }
 const MIN_WIDTH = 200;
 const MAX_WIDTH = 700;
-function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
+function AsideResizable({ children, navbarWidth, asideMaximized, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
   const [isResizing, setIsResizing] = react$1.useState(false);
   const [ref] = hooks.useResizeObserver();
   const isShowingRef = react$1.useRef(false);
@@ -2296,9 +2297,9 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.AppShell.Aside,
     {
-      w: width,
+      w: asideMaximized ? "100%" : width,
       miw: 200,
-      maw: MAX_WIDTH,
+      maw: asideMaximized ? `calc(100% - ${navbarWidth}px)` : MAX_WIDTH,
       ref,
       sx: {
         overflowY: "auto",
@@ -2310,7 +2311,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !asideMaximized && /* @__PURE__ */ jsxRuntime.jsx(
           core.Box,
           {
             w: 4,
@@ -2606,6 +2607,15 @@ function carbonToUSD(carbon) {
     maximumFractionDigits: 6
   });
 }
+function MobileBurger({ avatarIcon, isOpened, onClick }) {
+  if (isOpened) {
+    return /* @__PURE__ */ jsxRuntime.jsx(core.CloseButton, { hiddenFrom: "sm", pos: "absolute", w: 28, sx: { borderRadius: 8, zIndex: 100 }, h: 28, onClick, right: 12, top: 12, bg: "neutralColor.4" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { hiddenFrom: "sm", pos: "absolute", left: 12, top: 12, onClick, p: 8, py: 4, wrap: "nowrap", w: "fit-content", gap: 6, sx: { borderRadius: 8, zIndex: 100 }, bg: "neutralColor.4", children: [
+    avatarIcon && (typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 18, src: avatarIcon.icon, w: 18, h: 18 }) : avatarIcon.icon),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Burger, { lineSize: 2, pr: 0, size: "xs" })
+  ] });
+}
 const CANVAS_MIN_WIDTH = 350;
 const CONTENT_MIN_WIDTH = 350;
 function AppShellNavigation({
@@ -2624,6 +2634,7 @@ function AppShellNavigation({
   roomCategories,
   right,
   asideCollapsed = true,
+  asideMaximized = false,
   onAsideToggle,
   onMaxExpand,
   onAiOpen,
@@ -2638,8 +2649,10 @@ function AppShellNavigation({
   splitRatio = 0.4,
   onSplitRatioChange
 }) {
-  const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = hooks.useDisclosure(true);
   const [asideWidth, setAsideWidth] = react$1.useState(450);
+  const isMobile = hooks.useMediaQuery("(max-width: 48em)");
+  const [mobileOpened, { toggle: toggleMobile }] = hooks.useDisclosure();
+  const [desktopOpened, { toggle: toggleDesktop }] = hooks.useDisclosure(true);
   const [isSplitResizing, setIsSplitResizing] = react$1.useState(false);
   const isSplitResizingRef = react$1.useRef(false);
   const mainContainerRef = react$1.useRef(null);
@@ -2769,13 +2782,15 @@ function AppShellNavigation({
           transition: isNavbarResizing ? "none" : "width 0.3s ease"
         },
         aside: {
-          background: "var(--mantine-color-neutralColor-4)"
+          background: "var(--mantine-color-neutralColor-2)",
+          borderLeft: "1px solid var(--mantine-color-neutralColor-6)"
         }
       },
       bg: "neutralColor.2",
       navbar: {
-        width: isNavbarNotCollapsed ? navbarWidth : 56,
-        breakpoint: "sm"
+        width: navbarWidth,
+        breakpoint: "sm",
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }
       },
       aside: {
         width: asideCollapsed ? 0 : asideWidth,
@@ -2801,7 +2816,7 @@ function AppShellNavigation({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { style: { height: "100%" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { p: 8, w: 56, justify: "space-between", h: "100%", bg: "neutralColor.2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { p: 8, w: 56, visibleFrom: "sm", justify: "space-between", h: "100%", bg: "neutralColor.2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { align: "center", style: { flex: 1 }, gap: 8, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", h: 40, w: 40, onClick: companyIcon.onClick, children: [
                   typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon,
@@ -2851,12 +2866,12 @@ function AppShellNavigation({
                 /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.SettingsBarSolid, { size: 22, color: "secondary" }) })
               ] })
             ] }),
-            isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
-            isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
+            isAiOpened && !isMobile && aiNavbarContent,
+            !isAiOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 5, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", gap: "10px", children: /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: "neutralColor.8", children: cutText(pageItem.pageTitle, 19) || "Unknown" }) }) }),
-                  isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsx(
+                  isAiBtnVisible && !isAiOpened && !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
                     core.Center,
                     {
                       sx: {
@@ -2889,80 +2904,117 @@ function AppShellNavigation({
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           core.AppShell.Main,
           {
             style: {
               display: "flex",
               flexDirection: "column",
               height: "100vh",
-              overflow: "hidden"
+              overflow: "hidden",
+              position: "relative"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              Flex,
-              {
-                ref: mainContainerRef,
-                style: {
-                  flex: 1,
-                  height: "100%",
-                  overflow: "hidden",
-                  position: "relative"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    core.Box,
-                    {
-                      bg: "neutralColor.5",
-                      style: {
-                        width: getCanvasWidth(),
-                        minWidth: shouldShowCanvas && canvasMode === "split" ? CANVAS_MIN_WIDTH : void 0,
-                        display: shouldShowCanvas ? "flex" : "none",
-                        flexDirection: "column",
-                        overflow: "hidden",
-                        height: "100%",
-                        transition: isSplitResizing ? "none" : "width 0.3s ease, opacity 0.2s ease",
-                        opacity: shouldShowCanvas ? 1 : 0,
-                        borderLeft: "1px solid var(--mantine-color-neutralColor-6)"
-                      },
-                      children: canvasContent
-                    }
-                  ),
-                  canvasMode === "split" && !isRightPanelOpen && /* @__PURE__ */ jsxRuntime.jsx(
-                    core.Box,
-                    {
-                      w: 4,
-                      h: "100%",
-                      bg: isSplitResizing ? "accent.5" : "transparent",
-                      sx: {
-                        cursor: "col-resize",
-                        flexShrink: 0,
-                        transition: "background-color 0.2s ease"
-                      },
-                      onMouseDown: handleSplitMouseDown
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    core.Box,
-                    {
-                      style: {
-                        width: getContentWidth(),
-                        minWidth: shouldShowContent && canvasMode === "split" ? CONTENT_MIN_WIDTH : void 0,
-                        display: shouldShowContent ? "flex" : "none",
-                        flexDirection: "column",
-                        overflow: "auto",
-                        height: "100%",
-                        transition: isSplitResizing ? "none" : "width 0.3s ease, opacity 0.2s ease",
-                        opacity: shouldShowContent ? 1 : 0
-                      },
-                      children
-                    }
-                  )
-                ]
-              }
-            )
+            children: [
+              mobileOpened && /* @__PURE__ */ jsxRuntime.jsx(core.Overlay, { hiddenFrom: "sm", color: "var(--mantine-color-neutralColor-0)", backgroundOpacity: 0.6, blur: 2, onClick: toggleMobile, zIndex: 99 }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Flex,
+                {
+                  ref: mainContainerRef,
+                  style: {
+                    flex: 1,
+                    height: isMobile ? "calc(100% - 60px)" : "100%",
+                    overflow: "hidden",
+                    position: "relative",
+                    minHeight: 0,
+                    marginTop: isMobile && isAiOpened ? "calc(-100vh + 60px)" : 0,
+                    transition: isMobile ? "margin-top 0.5s ease" : "none"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      core.Box,
+                      {
+                        bg: "neutralColor.5",
+                        style: {
+                          width: getCanvasWidth(),
+                          minWidth: shouldShowCanvas && canvasMode === "split" ? CANVAS_MIN_WIDTH : void 0,
+                          display: shouldShowCanvas ? "flex" : "none",
+                          flexDirection: "column",
+                          overflow: "hidden",
+                          height: "100%",
+                          transition: isSplitResizing ? "none" : "width 0.3s ease, opacity 0.2s ease",
+                          opacity: shouldShowCanvas ? 1 : 0,
+                          borderLeft: "1px solid var(--mantine-color-neutralColor-6)"
+                        },
+                        children: canvasContent
+                      }
+                    ),
+                    canvasMode === "split" && !isRightPanelOpen && /* @__PURE__ */ jsxRuntime.jsx(
+                      core.Box,
+                      {
+                        w: 4,
+                        h: "100%",
+                        bg: isSplitResizing ? "accent.5" : "transparent",
+                        sx: {
+                          cursor: "col-resize",
+                          flexShrink: 0,
+                          transition: "background-color 0.2s ease"
+                        },
+                        onMouseDown: handleSplitMouseDown
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      core.Box,
+                      {
+                        style: {
+                          width: getContentWidth(),
+                          minWidth: shouldShowContent && canvasMode === "split" ? CONTENT_MIN_WIDTH : void 0,
+                          display: shouldShowContent ? "flex" : "none",
+                          flexDirection: "column",
+                          overflow: "auto",
+                          height: "100%",
+                          transition: isSplitResizing ? "none" : "width 0.3s ease, opacity 0.2s ease",
+                          opacity: shouldShowContent ? 1 : 0
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(MobileBurger, { isOpened: mobileOpened, onClick: toggleMobile, avatarIcon }),
+                          children
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              isMobile && isAiBtnVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+                core.Box,
+                {
+                  bg: "neutralColor.3",
+                  pos: "relative",
+                  h: isAiOpened ? "100%" : 60,
+                  sx: {
+                    transition: "height 0.5s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(core.Box, { onClick: onAiOpen, pos: "absolute", left: "50%", top: 18, sx: { zIndex: 3, transform: "translateX(-50%)" }, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Assistant, {}) }),
+                    isAiOpened && aiNavbarContent
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(AsideResizable, { asideCollapsed, onAsideToggle, onMaxExpand, width: asideWidth, onWidthChange: setAsideWidth, children: right })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AsideResizable,
+          {
+            navbarWidth,
+            asideCollapsed,
+            asideMaximized,
+            onAsideToggle,
+            onMaxExpand,
+            width: asideWidth,
+            onWidthChange: setAsideWidth,
+            children: right
+          }
+        )
       ]
     }
   );
@@ -5982,13 +6034,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-BwFcOXoo.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-8mrl_91C.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-CWtfpAdi.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-CxphVeLF.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-1Tkzfew0.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-DVUI2LeU.cjs")));
 const Map = react$1.lazy(() => Promise.resolve().then(() => require("./index-D4PsPquZ.cjs")));
 const CustomContent = react$1.lazy(() => Promise.resolve().then(() => require("./index-ByrCNpS2.cjs")));
-const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-CnUrZJ6d.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-DPdnPYOK.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-BZeVHJgv.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-BmvOflos.cjs")));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = react$1.useRef(null);
@@ -11279,4 +11331,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-DH1wUH8v.cjs.map
+//# sourceMappingURL=components-DmNQnT1T.cjs.map