@ixo/ui 0.1.0 → 0.1.2

package/dist/{components-Dd5AcCq0.js → components-DU5waziW.js}

@@ -4,11 +4,11 @@ import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react
 import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, e as Canvas, H as HistorySolid, U as User, f as AngleLeftSolid, M as MinusCircleSolid, h as SettingsBarSolid, G as Globe, D as Dashboard, i as Groups, j as UserCircleSolid, k as Assets$1, l as Claims, m as Accounts, n as LinkedResources, o as Proposals, I as ImpactCredits, p as GoTo, q as Share, r as PiePiece, s as ImpactCertificates, t as CommentDotsSolid, u as CommentAltSolid, v as MicrophoneSolid, w as Command, x as ArrowCircleRightSolid, y as Protocols, z as Investments, O as Oracles, B as Projects, F as Daos, J as Star, K as AngleRightSolid, N as Expand, Q as LeafSolid, R as ArrowDownSolid, T as ArrowRightSolid, V as Play, W as CheckCircle, X as Events, Y as ThumbsUpSolid, Z as CommentsSolid, _ as CopySolid, $ as Hourglass, a0 as Act, a1 as Info$1, a2 as ClaimsW, a3 as TachometerAltSolid, a4 as UserCogSolid, a5 as UsersSolid, a6 as EllipsisHSolid } from "./UsersSolid-CU7U_J3x.js";
 import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useMemo, useId, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
-import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Tooltip as Tooltip$4, Divider, ScrollArea, Space } from "@mantine/core";
+import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Tooltip as Tooltip$4, CloseButton, Group, Burger, Divider, ScrollArea, Space, Overlay } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
-import { useResizeObserver, useHover, useDisclosure } from "@mantine/hooks";
+import { useMediaQuery, useResizeObserver, useHover, useDisclosure } from "@mantine/hooks";
 import { a as useLocalStorage, E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-BuXZL79s.js";
 import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
 import Markdown from "react-markdown";
@@ -775,8 +775,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-CHxc81t7.js"));
-const Footer = lazy(() => import("./index-BQ756FwG.js"));
+const Header$3 = lazy(() => import("./index-By1i1uLU.js"));
+const Footer = lazy(() => import("./index-IuTPQRsY.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -860,7 +860,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-JPCFjEIL.js"));
+const Header$2 = lazy(() => import("./index-RGurwgcA.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1295,7 +1295,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-znGVxTmK.js"));
+const Badge = lazy(() => import("./index-EYDtd-NN.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -2103,6 +2103,7 @@ function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInp
   );
 }
 function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, onCanvasCycle, isHistoryOpened, canvasMode = "hidden", oracleModel, sessionTitle }) {
+  const isMobile = useMediaQuery("(max-width: 48em)");
   const canvasActive = canvasMode !== "hidden";
   return /* @__PURE__ */ jsxs(Flex, { bg: "neutralColor.4", py: 16, justify: "space-between", align: "center", children: [
     /* @__PURE__ */ jsxs(Flex, { gap: 6, align: "center", children: [
@@ -2139,7 +2140,7 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, o
         }
       ),
       /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsx(HistorySolid, { size: 18, color: "secondary" }) }),
-      /* @__PURE__ */ jsx(
+      !isMobile && /* @__PURE__ */ jsx(
         Center,
         {
           sx: {
@@ -2196,7 +2197,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] = useState(false);
   const [ref] = useResizeObserver();
   const isShowingRef = useRef(false);
@@ -2273,9 +2274,9 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   return /* @__PURE__ */ jsxs(
     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",
@@ -2287,7 +2288,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
         }
       },
       children: [
-        /* @__PURE__ */ jsx(
+        !asideMaximized && /* @__PURE__ */ jsx(
           Box,
           {
             w: 4,
@@ -2583,6 +2584,15 @@ function carbonToUSD(carbon) {
     maximumFractionDigits: 6
   });
 }
+function MobileBurger({ avatarIcon, isOpened, onClick }) {
+  if (isOpened) {
+    return /* @__PURE__ */ jsx(CloseButton, { hiddenFrom: "sm", pos: "absolute", w: 28, sx: { borderRadius: 8, zIndex: 100 }, h: 28, onClick, right: 12, top: 12, bg: "neutralColor.4" });
+  }
+  return /* @__PURE__ */ jsxs(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__ */ jsx(Image, { radius: 18, src: avatarIcon.icon, w: 18, h: 18 }) : avatarIcon.icon),
+    /* @__PURE__ */ jsx(Burger, { lineSize: 2, pr: 0, size: "xs" })
+  ] });
+}
 const CANVAS_MIN_WIDTH = 350;
 const CONTENT_MIN_WIDTH = 350;
 function AppShellNavigation({
@@ -2601,6 +2611,7 @@ function AppShellNavigation({
   roomCategories,
   right,
   asideCollapsed = true,
+  asideMaximized = false,
   onAsideToggle,
   onMaxExpand,
   onAiOpen,
@@ -2615,8 +2626,10 @@ function AppShellNavigation({
   splitRatio = 0.4,
   onSplitRatioChange
 }) {
-  const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = useDisclosure(true);
   const [asideWidth, setAsideWidth] = useState(450);
+  const isMobile = useMediaQuery("(max-width: 48em)");
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
   const [isSplitResizing, setIsSplitResizing] = useState(false);
   const isSplitResizingRef = useRef(false);
   const mainContainerRef = useRef(null);
@@ -2746,13 +2759,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,
@@ -2778,7 +2793,7 @@ function AppShellNavigation({
             }
           ),
           /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, children: [
-            /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: "neutralColor.2", children: [
+            /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, visibleFrom: "sm", justify: "space-between", h: "100%", bg: "neutralColor.2", children: [
               /* @__PURE__ */ jsxs(Stack$1, { align: "center", style: { flex: 1 }, gap: 8, children: [
                 /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", h: 40, w: 40, onClick: companyIcon.onClick, children: [
                   typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon,
@@ -2828,12 +2843,12 @@ function AppShellNavigation({
                 /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) })
               ] })
             ] }),
-            isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
-            isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxs(Stack$1, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
+            isAiOpened && !isMobile && aiNavbarContent,
+            !isAiOpened && /* @__PURE__ */ jsxs(Stack$1, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
               /* @__PURE__ */ jsxs(Stack$1, { gap: 5, children: [
                 /* @__PURE__ */ jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
                   /* @__PURE__ */ jsx(Flex, { align: "center", gap: "10px", children: /* @__PURE__ */ jsx(Tooltip$4, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsx(Text$1, { lh: 1, c: "neutralColor.8", children: cutText(pageItem.pageTitle, 19) || "Unknown" }) }) }),
-                  isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsx(
+                  isAiBtnVisible && !isAiOpened && !isMobile && /* @__PURE__ */ jsx(
                     Center,
                     {
                       sx: {
@@ -2866,80 +2881,117 @@ function AppShellNavigation({
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           AppShell.Main,
           {
             style: {
               display: "flex",
               flexDirection: "column",
               height: "100vh",
-              overflow: "hidden"
+              overflow: "hidden",
+              position: "relative"
             },
-            children: /* @__PURE__ */ jsxs(
-              Flex,
-              {
-                ref: mainContainerRef,
-                style: {
-                  flex: 1,
-                  height: "100%",
-                  overflow: "hidden",
-                  position: "relative"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    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__ */ jsx(
-                    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__ */ jsx(
-                    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__ */ jsx(Overlay, { hiddenFrom: "sm", color: "var(--mantine-color-neutralColor-0)", backgroundOpacity: 0.6, blur: 2, onClick: toggleMobile, zIndex: 99 }),
+              /* @__PURE__ */ 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__ */ jsx(
+                      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__ */ jsx(
+                      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__ */ jsxs(
+                      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__ */ jsx(MobileBurger, { isOpened: mobileOpened, onClick: toggleMobile, avatarIcon }),
+                          children
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              isMobile && isAiBtnVisible && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  bg: "neutralColor.3",
+                  pos: "relative",
+                  h: isAiOpened ? "100%" : 60,
+                  sx: {
+                    transition: "height 0.5s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Box, { onClick: onAiOpen, pos: "absolute", left: "50%", top: 18, sx: { zIndex: 3, transform: "translateX(-50%)" }, children: /* @__PURE__ */ jsx(Assistant, {}) }),
+                    isAiOpened && aiNavbarContent
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsx(AsideResizable, { asideCollapsed, onAsideToggle, onMaxExpand, width: asideWidth, onWidthChange: setAsideWidth, children: right })
+        /* @__PURE__ */ jsx(
+          AsideResizable,
+          {
+            navbarWidth,
+            asideCollapsed,
+            asideMaximized,
+            onAsideToggle,
+            onMaxExpand,
+            width: asideWidth,
+            onWidthChange: setAsideWidth,
+            children: right
+          }
+        )
       ]
     }
   );
@@ -5959,13 +6011,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-DCeJ-EjR.js"));
-const Header$1 = lazy(() => import("./index-CNVan44C.js"));
-const Content = lazy(() => import("./index-CJf3kiYw.js"));
+const MainAction = lazy(() => import("./index-D0yj6C11.js"));
+const Header$1 = lazy(() => import("./index-DWyqNmtm.js"));
+const Content = lazy(() => import("./index-BgZLJbJW.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-DcOglj4H.js"));
-const Actions = lazy(() => import("./index-LMTN501y.js"));
+const Assets = lazy(() => import("./index-D7heNqqK.js"));
+const Actions = lazy(() => import("./index-WlnEQMCk.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -11258,4 +11310,4 @@ export {
   CardHero as y,
   CardSelector as z
 };
-//# sourceMappingURL=components-Dd5AcCq0.js.map
+//# sourceMappingURL=components-DU5waziW.js.map