@ixo/ui 0.0.7 → 0.0.8

package/dist/{components-BpZDHiID.js → components-BAyyDDDY.js}

@@ -1,19 +1,19 @@
 import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { isString, toggle, get, isFunction, assign } from "radash";
 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, U as User, d as SettingsBarSolid, e as AngleRightSolid, f as ArrowLeftSolid, G as Globe, h as PanelLeftSolid, D as Dashboard, i as Groups, j as UserCircleSolid, k as Assets$1, l as Claims, m as Accounts, H as HistorySolid, 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, M as MicrophoneSolid, v as Command, w as ArrowCircleRightSolid, x as Protocols, y as Investments, O as Oracles, z as Projects, B as Daos, F as Star, J as AngleLeftSolid, K as Expand, N as LeafSolid, Q as ArrowDownSolid, R as ArrowRightSolid, T as Play, V as CheckCircle, W as Events, X as ThumbsUpSolid, Y as CommentsSolid, Z as CopySolid, _ as Hourglass, $ as Act, a0 as Info$1, a1 as ClaimsW, a2 as TachometerAltSolid, a3 as UserCogSolid, a4 as UsersSolid, a5 as EllipsisHSolid } from "./UsersSolid-CCU2B_Nz.js";
+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, U as User, d as SettingsBarSolid, e as AngleRightSolid, f as ArrowLeftSolid, G as Globe, h as PanelLeftSolid, i as AngleLeftSolid, D as Dashboard, j as Groups, k as UserCircleSolid, l as Assets$1, m as Claims, n as Accounts, H as HistorySolid, o as LinkedResources, p as Proposals, I as ImpactCredits, q as GoTo, r as Share, s as PiePiece, t as ImpactCertificates, u as CommentDotsSolid, v as CommentAltSolid, M 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 Expand, N as LeafSolid, Q as ArrowDownSolid, R as ArrowRightSolid, T as Play, V as CheckCircle, W as Events, X as ThumbsUpSolid, Y as CommentsSolid, Z as CopySolid, _ as Hourglass, $ as Act, a0 as Info$1, a1 as ClaimsW, a2 as TachometerAltSolid, a3 as UserCogSolid, a4 as UsersSolid, a5 as EllipsisHSolid } from "./UsersSolid-DNy80FwB.js";
 import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useId, useMemo, 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, AppShell, Stack as Stack$1, Center, Divider, Paper, Text as Text$1, Badge as Badge$1 } from "@mantine/core";
+import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, AppShell, Stack as Stack$1, Center, Divider, Paper, Badge as Badge$1 } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
-import { Popover } from "react-tiny-popover";
-import { useDisclosure, useHover } from "@mantine/hooks";
 import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
+import { useDisclosure, useHover } from "@mantine/hooks";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useCombobox, useSelect } from "downshift";
+import { Popover as Popover$1 } from "react-tiny-popover";
 import dayjs from "dayjs";
 import { B as Blank } from "./Blank-CElsicB7.js";
 import { E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-16wxaghO.js";
@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-bDjw-Rwj.js"));
-const Footer = lazy(() => import("./index-CShQJ1Tu.js"));
+const Header$3 = lazy(() => import("./index-A8uoDM6y.js"));
+const Footer = lazy(() => import("./index-hNGq5T2S.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-B99v2MeE.js"));
+const Header$2 = lazy(() => import("./index-BB2FOFog.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-BjIDCEma.js"));
+const Badge = lazy(() => import("./index-CggCDtn-.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -1873,90 +1873,154 @@ function HtmlRender({ content, className }) {
   const safeHTML = DOMPurify.sanitize(content, { FORBID_ATTR: ["style"] });
   return /* @__PURE__ */ jsx(StyleDOMApplier, { children: /* @__PURE__ */ jsx("div", { className, dangerouslySetInnerHTML: { __html: safeHTML } }) });
 }
-function Item({ label, disabled, active, onClick }) {
-  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+const Flex = forwardRef(
+  ({
+    direction = "row",
+    align = "stretch",
+    justify = "flex-start",
+    gap = 0,
+    m = 0,
+    mt = 0,
+    mb = 0,
+    ml = 0,
+    mr = 0,
+    mx = 0,
+    my = 0,
+    p = 0,
+    pt = 0,
+    pb = 0,
+    pl = 0,
+    pr = 0,
+    px = 0,
+    py = 0,
+    bg,
+    radius = 0,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        style: {
+          display: "flex",
+          flexDirection: direction,
+          alignItems: align,
+          justifyContent: justify,
+          gap,
+          margin: m,
+          marginTop: mt || my,
+          marginBottom: mb || my,
+          marginLeft: ml || mx,
+          marginRight: mr || mx,
+          padding: p,
+          paddingTop: pt || py,
+          paddingBottom: pb || py,
+          paddingLeft: pl || px,
+          paddingRight: pr || px,
+          backgroundColor: bg,
+          borderRadius: radius,
+          ...props.style
+        },
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+function Item({ icon, label, disabled, active, onClick }) {
+  const IconComponent = icon;
+  return /* @__PURE__ */ jsx(
     "button",
     {
-      css: ({ spacing, bg }) => ({
+      css: ({ bg, colors }) => ({
         width: "100%",
-        background: active ? bg.actionPanel : "none",
+        borderRadius: 4,
+        padding: "4px 12px",
+        background: bg.navIconsBg,
         border: "none",
-        padding: spacing,
         cursor: disabled ? "not-allowed" : "pointer",
         textAlign: "left",
         "&:hover": {
-          backgroundColor: disabled ? void 0 : bg.cardHighlight
+          backgroundColor: disabled ? void 0 : colors.whiteTransparent10
         }
       }),
       disabled,
       onClick,
-      children: /* @__PURE__ */ jsx(
-        Typography.Text,
-        {
-          css: ({ fontSize, text, colors }) => ({
-            fontSize: fontSize.s,
-            color: disabled ? text.secondary : active ? colors.focus : text.main
-          }),
-          children: label
-        }
-      )
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
+        IconComponent && /* @__PURE__ */ jsx(IconComponent, { size: 16 }),
+        /* @__PURE__ */ jsx(
+          Typography.Text,
+          {
+            css: ({ fontSize, text, colors }) => ({
+              fontSize: fontSize.xs,
+              color: disabled ? text.secondary : active ? colors.focus : text.overPicture
+            }),
+            children: label
+          }
+        )
+      ] })
     }
-  ) });
+  );
 }
-function MoreMenu({ items, controlColor = "primary", positions = ["bottom", "right", "left", "top"] }) {
-  const { value: isVisible, toggle: toggleMenu, off: hideMenu } = useToggle(false);
-  return /* @__PURE__ */ jsx(
+function MoreMenu({ items, controlColor = "primary" }) {
+  const theme = useUITheme();
+  const [opened, setOpened] = useState(false);
+  return /* @__PURE__ */ jsxs(
     Popover,
     {
-      isOpen: isVisible,
-      positions,
-      align: "start",
-      onClickOutside: hideMenu,
-      content: /* @__PURE__ */ jsx(
-        "ul",
-        {
-          css: ({ bg, neutral }) => ({
-            padding: 0,
-            margin: 0,
-            listStyle: "none",
-            whiteSpace: "nowrap",
-            borderWidth: 1,
-            borderStyle: "solid",
-            borderColor: bg.actionPanel,
-            backgroundColor: neutral.whiteFull
-          }),
-          children: items.map((item) => /* @__PURE__ */ jsx(
+      opened,
+      onChange: setOpened,
+      closeOnClickOutside: true,
+      styles: {
+        dropdown: {
+          background: theme.bg.navIconsBg,
+          border: "none",
+          padding: "12px 4px",
+          marginLeft: 10
+        }
+      },
+      trapFocus: true,
+      width: 200,
+      position: "right-start",
+      shadow: "md",
+      children: [
+        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            css: {
+              background: "none",
+              border: "none",
+              padding: 0,
+              cursor: "pointer",
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            onClick: () => setOpened((o) => !o),
+            children: /* @__PURE__ */ jsx(EllipsisVSolid, { size: 20, color: controlColor })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [
+          /* @__PURE__ */ jsx(Text$1, { ml: 12, mb: 10, fz: 12, c: theme.text.secondary, children: "Page" }),
+          items.map((item) => /* @__PURE__ */ jsx(
             Item,
             {
+              icon: item.icon,
               label: item.label,
               disabled: item.disabled,
               active: item.active,
               onClick: () => {
                 item.onClick();
-                hideMenu();
+                setOpened(false);
               }
             },
             item.label
           ))
-        }
-      ),
-      children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          css: {
-            background: "none",
-            border: "none",
-            padding: 0,
-            cursor: "pointer",
-            position: "relative",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          onClick: toggleMenu,
-          children: /* @__PURE__ */ jsx(EllipsisVSolid, { color: controlColor })
-        }
-      )
+        ] })
+      ]
     }
   );
 }
@@ -2072,62 +2136,6 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsx(User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
-const Flex = forwardRef(
-  ({
-    direction = "row",
-    align = "stretch",
-    justify = "flex-start",
-    gap = 0,
-    m = 0,
-    mt = 0,
-    mb = 0,
-    ml = 0,
-    mr = 0,
-    mx = 0,
-    my = 0,
-    p = 0,
-    pt = 0,
-    pb = 0,
-    pl = 0,
-    pr = 0,
-    px = 0,
-    py = 0,
-    bg,
-    radius = 0,
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...props,
-        style: {
-          display: "flex",
-          flexDirection: direction,
-          alignItems: align,
-          justifyContent: justify,
-          gap,
-          margin: m,
-          marginTop: mt || my,
-          marginBottom: mb || my,
-          marginLeft: ml || mx,
-          marginRight: mr || mx,
-          padding: p,
-          paddingTop: pt || py,
-          paddingBottom: pb || py,
-          paddingLeft: pl || px,
-          paddingRight: pr || px,
-          backgroundColor: bg,
-          borderRadius: radius,
-          ...props.style
-        },
-        children
-      }
-    );
-  }
-);
-Flex.displayName = "Flex";
 function SpaceItem({ icon, id, onClick }) {
   const { hovered, ref } = useHover();
   const theme = useUITheme();
@@ -2150,7 +2158,82 @@ function SpaceItem({ icon, id, onClick }) {
     }
   );
 }
-function MenuItem({ item, onMenuItemClick }) {
+function MenuItem({ item, onMenuItemClick, depth = 0 }) {
+  const { hovered, ref } = useHover();
+  const theme = useUITheme();
+  const { value: isExpanded, toggle: toggle2 } = useToggle(false);
+  const hasChildren = item.children && item.children.length > 0;
+  const handleItemClick = () => {
+    onMenuItemClick(item);
+  };
+  const handleToggleClick = (e) => {
+    e.stopPropagation();
+    toggle2();
+  };
+  return /* @__PURE__ */ jsxs(Stack$1, { gap: 1, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        align: "center",
+        gap: 8,
+        justify: "space-between",
+        pl: 12 + depth * 16,
+        pr: 12,
+        py: 6,
+        style: {
+          cursor: "pointer",
+          borderRadius: 8,
+          backgroundColor: item.isActive ? theme.bg.navIconsBg : hovered ? theme.bg.navIconsBg : "transparent",
+          transform: hovered ? "translateX(4px)" : "translateX(0px)",
+          transition: "all 0.2s ease"
+        },
+        onClick: handleItemClick,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+            /* @__PURE__ */ jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
+            /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { children: [
+            hasChildren && /* @__PURE__ */ jsx(
+              Center,
+              {
+                onClick: handleToggleClick,
+                p: 4,
+                sx: {
+                  cursor: "pointer",
+                  borderRadius: 4,
+                  transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s ease",
+                  "&:hover": {
+                    backgroundColor: theme.neutral.transparent10
+                  }
+                },
+                children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
+              }
+            ),
+            item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsx(
+              Center,
+              {
+                sx: {
+                  cursor: "pointer",
+                  borderRadius: 4,
+                  transition: "transform 0.2s ease",
+                  "&:hover": {
+                    backgroundColor: theme.neutral.transparent10
+                  }
+                },
+                children: /* @__PURE__ */ jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    hasChildren && isExpanded && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: item.children?.map((childItem) => /* @__PURE__ */ jsx(MenuItem, { item: childItem, onMenuItemClick, depth: depth + 1 }, childItem.id)) })
+  ] });
+}
+function RoomItem({ room }) {
   const { hovered, ref } = useHover();
   const theme = useUITheme();
   return /* @__PURE__ */ jsxs(
@@ -2160,22 +2243,61 @@ function MenuItem({ item, onMenuItemClick }) {
       align: "center",
       gap: 8,
       px: 12,
-      py: 6,
+      py: 4,
+      ml: 16,
       style: {
         cursor: "pointer",
-        borderRadius: 8,
-        backgroundColor: item.isActive ? theme.bg.navIconsBg : hovered ? theme.bg.navIconsBg : "transparent",
-        transform: hovered ? "translateX(4px)" : "translateX(0px)",
-        transition: "all 0.2s ease"
+        borderRadius: 6,
+        backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "transparent",
+        transform: hovered ? "translateX(2px)" : "translateX(0px)",
+        transition: "all 0.15s ease"
       },
-      onClick: () => onMenuItemClick(item),
+      onClick: () => room.onClick(room.id),
       children: [
-        /* @__PURE__ */ jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
-        /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, children: item.name })
+        /* @__PURE__ */ jsx(room.icon, { size: 16, color: "secondary" }),
+        /* @__PURE__ */ jsx(Text$1, { fz: 13, c: theme.text.secondary, children: room.name })
       ]
     }
   );
 }
+function RoomCategory({ category }) {
+  const { hovered, ref } = useHover();
+  const theme = useUITheme();
+  const { value, toggle: toggle2 } = useToggle(false);
+  return /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        align: "center",
+        justify: "space-between",
+        px: 12,
+        py: 4,
+        style: {
+          cursor: "pointer",
+          borderRadius: 6,
+          backgroundColor: hovered ? theme.neutral.transparent50 : "transparent",
+          transition: "all 0.15s ease"
+        },
+        onClick: toggle2,
+        children: [
+          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
+          /* @__PURE__ */ jsx(
+            Center,
+            {
+              sx: {
+                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
+                transition: "transform 0.2s ease"
+              },
+              children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
+            }
+          )
+        ]
+      }
+    ),
+    !value && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsx(RoomItem, { room }, room.id)) })
+  ] });
+}
 function AppShellNavigation({
   spaces,
   pageItem,
@@ -2189,6 +2311,7 @@ function AppShellNavigation({
   onBackClick,
   isBackButtonVisible,
   footerMenuItems,
+  roomCategories,
   children
 }) {
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -2254,7 +2377,8 @@ function AppShellNavigation({
                 ] }),
                 /* @__PURE__ */ jsx(Flex, { gap: 12, align: "center", children: /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(PanelLeftSolid, { size: 22, color: "secondary" }) }) })
               ] }),
-              menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id))
+              menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+              roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsx(Stack$1, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsx(RoomCategory, { category }, category.id)) })
             ] }),
             /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: footerMenuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)) })
           ] })
@@ -3395,7 +3519,7 @@ function DomainToolbar({ items, active, onClick }) {
               backgroundColor: colors.focusTransparent10,
               borderRadius: WRAPPER_SIZE$2 / 2
             }),
-            children: /* @__PURE__ */ jsx(Popover, { isOpen: visibleTooltip === item.id, padding: 21, reposition: false, containerStyle: { zIndex: "3" }, content: /* @__PURE__ */ jsx(Tooltip$3, { tooltip: item.tooltip }), children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx(Popover$1, { isOpen: visibleTooltip === item.id, padding: 21, reposition: false, containerStyle: { zIndex: "3" }, content: /* @__PURE__ */ jsx(Tooltip$3, { tooltip: item.tooltip }), children: /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -3813,7 +3937,7 @@ function DomainToolbarTypes({ domainType, active, onClick, ConnectActive }) {
                     borderRadius: WRAPPER_SIZE$1 / 2
                   }),
                   children: /* @__PURE__ */ jsx(
-                    Popover,
+                    Popover$1,
                     {
                       isOpen: visibleTooltip === item.id && !isInChatMode,
                       padding: 21,
@@ -5191,13 +5315,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-DjAL33eG.js"));
-const Header$1 = lazy(() => import("./index-w6bUS_-b.js"));
-const Content = lazy(() => import("./index-COR4dGTK.js"));
+const MainAction = lazy(() => import("./index-C6EdX2d9.js"));
+const Header$1 = lazy(() => import("./index-DHZY_QlO.js"));
+const Content = lazy(() => import("./index-DuOYVQF3.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-DCp6OZLU.js"));
-const Actions = lazy(() => import("./index-BgZ9Odny.js"));
+const Assets = lazy(() => import("./index-D5e7qnjY.js"));
+const Actions = lazy(() => import("./index-Bfl1m3Ui.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);
@@ -5452,7 +5576,7 @@ function Tooltip$1({ children, content, className, classNameWrapper, positions }
     return children;
   }
   return /* @__PURE__ */ jsx(
-    Popover,
+    Popover$1,
     {
       isOpen,
       reposition: true,
@@ -10511,4 +10635,4 @@ export {
   CardSelector as y,
   CardOutput as z
 };
-//# sourceMappingURL=components-BpZDHiID.js.map
+//# sourceMappingURL=components-BAyyDDDY.js.map