@ixo/ui 0.0.5 → 0.0.7

package/dist/{components-DmVrcjoe.cjs → components-BXmsMIj2.cjs}

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const radash = require("radash");
 const react = require("@emotion/react");
-const UsersSolid = require("./UsersSolid-Bj2vwEHq.cjs");
+const UsersSolid = require("./UsersSolid-B9DXA9NX.cjs");
 const react$1 = require("react");
 const constants = require("./constants-DFJRYpE2.cjs");
 const core = require("@mantine/core");
@@ -32,15 +32,15 @@ const css = require("@emotion/css");
 const reactDom = require("react-dom");
 const DOMPurify = require("dompurify");
 const reactTinyPopover = require("react-tiny-popover");
+const hooks = require("@mantine/hooks");
 const useUITheme = require("./useUITheme-DqgAb7n1.cjs");
 const Markdown = require("react-markdown");
 const remarkGfm = require("remark-gfm");
 const downshift = require("downshift");
-const hooks = require("@mantine/hooks");
 const dayjs = require("dayjs");
 const Blank = require("./Blank-DapEucFF.cjs");
 const useEventSubscribe = require("./useEventSubscribe-BTFTMdWH.cjs");
-const themes = require("./themes-ssj6M2ml.cjs");
+const themes = require("./themes-CAW1Y0Nk.cjs");
 function SlideUpArea({ children, isVisible }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DrypVliv.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-DJEwZuHm.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BT8oG8gb.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-BPWOdUVc.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -882,7 +882,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-Bc_MmoiM.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-ClHcM2hN.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(
@@ -1317,7 +1317,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-BnU1ktcj.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-BVBsdahb.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2095,6 +2095,198 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
+const Flex = react$1.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__ */ jsxRuntime.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 } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Center,
+    {
+      ref,
+      sx: {
+        cursor: "pointer",
+        borderRadius: 24,
+        transform: hovered ? "scale(1.1)" : "scale(1)",
+        transition: "transform 0.2s ease"
+      },
+      pos: "relative",
+      bg: hovered ? theme.neutral.transparent10 : theme.bg.navIconsBg,
+      mih: 40,
+      w: 40,
+      onClick: () => onClick(id),
+      children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon
+    }
+  );
+}
+function MenuItem({ item, onMenuItemClick }) {
+  const { hovered, ref } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Flex,
+    {
+      ref,
+      align: "center",
+      gap: 8,
+      px: 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: () => onMenuItemClick(item),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, children: item.name })
+      ]
+    }
+  );
+}
+function AppShellNavigation({
+  spaces,
+  pageItem,
+  selectedSpace,
+  menuItems,
+  companyIcon,
+  onAddSpaceClick,
+  avatarIcon,
+  onMenuItemClick,
+  onSettingsIconClick,
+  onBackClick,
+  isBackButtonVisible,
+  footerMenuItems,
+  children
+}) {
+  const [desktopOpened, { toggle: toggleDesktop }] = hooks.useDisclosure(true);
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.AppShell,
+    {
+      withBorder: false,
+      styles: {
+        navbar: {
+          background: theme.bg.navScaled
+        }
+      },
+      bg: theme.bg.navIconsBg,
+      navbar: {
+        width: desktopOpened ? 300 : 56,
+        breakpoint: "sm"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Navbar, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { style: { height: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { align: "center", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, gap: 8, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, 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 }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                core.Stack,
+                {
+                  align: "center",
+                  gap: 8,
+                  style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    maxHeight: "calc(100vh - 300px)",
+                    scrollbarWidth: "none",
+                    msOverflowStyle: "none"
+                  },
+                  sx: {
+                    "&::-webkit-scrollbar": {
+                      display: "none"
+                    }
+                  },
+                  children: spaces.map(({ icon, id, name, onClick }, i) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    selectedSpace === id && /* @__PURE__ */ jsxRuntime.jsx(core.Paper, { bg: theme.neutral.whiteFull, h: 30, w: 4, pos: "absolute", left: 0, top: 116 + i * 49.5 }),
+                    /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { icon, name, id, onClick }, id)
+                  ] }))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { color: "secondary" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { align: "center", gap: 8, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.SettingsBarSolid, { size: 22, color: "secondary" }) }),
+              !desktopOpened && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: toggleDesktop, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleRightSolid, { color: "secondary" }) })
+            ] })
+          ] }),
+          desktopOpened && /* @__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.jsxs(Flex, { align: "center", gap: "10px", children: [
+                  isBackButtonVisible ? /* @__PURE__ */ jsxRuntime.jsx(core.Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsxRuntime.jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Globe, { size: 18 }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: 12, align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PanelLeftSolid, { size: 22, color: "secondary" }) }) })
+              ] }),
+              menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: footerMenuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Main, { children })
+      ]
+    }
+  );
+}
 function AvatarInfo({ src, title, description, onClick }) {
   const content = /* @__PURE__ */ jsxRuntime.jsxs(Spacer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: 40, src }),
@@ -2219,8 +2411,6 @@ function ButtonBasic({
           width = "100%";
         }
         const baseStyles = {
-          fontFamily: '"DM Sans", "Roboto", Arial, sans-serif',
-          // DM Sans from Figma
           fontSize,
           fontWeight: 400,
           lineHeight,
@@ -2379,7 +2569,6 @@ function ButtonSubtle({ state = "default", type = "iconLeft", disabled = false,
           padding: isIconOnly ? "2px" : "2px 8px",
           width: isIconOnly ? "28px" : "auto",
           height: isIconOnly ? "28px" : "auto",
-          fontFamily: "DM Sans",
           fontSize: "16px",
           fontWeight: 400,
           lineHeight: "1.5em",
@@ -3737,62 +3926,6 @@ function DomainToolbarTypes({ domainType, active, onClick, ConnectActive }) {
     document.body
   );
 }
-const Flex = react$1.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__ */ jsxRuntime.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";
 const CommandItem = ({
   name,
   description,
@@ -4201,7 +4334,6 @@ const EcosystemCard = ({ title = "Ecosystem Name", subtitle = "Short Ecosystem S
                   backdropFilter: "blur(30px)",
                   WebkitBackdropFilter: "blur(30px)",
                   color: "#fff",
-                  fontFamily: "Roboto",
                   fontWeight: 700,
                   fontSize: 20,
                   boxShadow: "0 4px 24px 0 rgba(0,0,0,0.04)"
@@ -5082,13 +5214,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-BQ3DAXnq.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CEFoRpvx.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-CxWtsgMl.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-CzX54ash.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-D9LgjgB7.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-BW9S8i4L.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-wyaeB3FQ.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-CZf9DVqp.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-RzNv9QED.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-PWSVsc4o.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);
@@ -10318,6 +10450,7 @@ exports.ActionCard = ActionCard;
 exports.ActionSheet = ActionSheet;
 exports.ActionSheetCompanion = ActionSheetCompanion;
 exports.ActivityCard = ActivityCard;
+exports.AppShellNavigation = AppShellNavigation;
 exports.Avatar = Avatar;
 exports.AvatarInfo = AvatarInfo;
 exports.Button = Button;
@@ -10399,4 +10532,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-DmVrcjoe.cjs.map
+//# sourceMappingURL=components-BXmsMIj2.cjs.map