@ixo/ui 0.0.5 → 0.0.6

package/dist/{components-DmVrcjoe.cjs → components-2IYis_pS.cjs}

@@ -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-DxTEP-Kl.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-DBvgEa5H.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-BViyRAH_.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-D_Sg8YF7.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-B6xg69Dq.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,281 @@ 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.navScaled,
+      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.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
+        transform: hovered ? "translateX(4px)" : "translateX(0px)",
+        transition: "all 0.2s ease"
+      },
+      onClick: () => onMenuItemClick(item),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 20, color: "secondary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, c: theme.neutral.lightGray, children: item.name })
+      ]
+    }
+  );
+}
+function RoomItem({ room }) {
+  const { hovered, ref } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Flex,
+    {
+      ref,
+      align: "center",
+      gap: 8,
+      px: 12,
+      py: 4,
+      ml: 16,
+      style: {
+        cursor: "pointer",
+        borderRadius: 6,
+        backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "transparent",
+        transform: hovered ? "translateX(2px)" : "translateX(0px)",
+        transition: "all 0.15s ease"
+      },
+      onClick: () => room.onClick(room.id),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(room.icon, { size: 16, color: "secondary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 13, c: theme.text.secondary, children: room.name })
+      ]
+    }
+  );
+}
+function RoomCategory({ category }) {
+  const { hovered, ref } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  const { value, toggle } = useToggle(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.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: toggle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Center,
+            {
+              sx: {
+                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
+                transition: "transform 0.2s ease"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
+            }
+          )
+        ]
+      }
+    ),
+    !value && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsxRuntime.jsx(RoomItem, { room }, room.id)) })
+  ] });
+}
+function AppShellNavigation({
+  spaces,
+  selectedSpace,
+  menuItems,
+  roomCategories,
+  companyIcon,
+  onAddSpaceClick,
+  avatarIcon,
+  onMenuItemClick,
+  onPersonalSpaceClick,
+  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.navScaled,
+      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 }, bg: theme.bg.navScaled, 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.navScaled, h: 40, w: 40, onClick: onPersonalSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { color: "secondary" }) }),
+              /* @__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.navScaled, 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.navScaled, 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 }),
+              !desktopOpened && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: toggleDesktop, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleRightSolid, { color: "secondary" }) })
+            ] })
+          ] }),
+          desktopOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { w: "100%", gap: 5, py: 16, px: 12, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: spaces.find(({ id }) => id === selectedSpace)?.name || "Unknown" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 12, align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.EllipsisHSolid, { color: "secondary" }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { color: "secondary" }) })
+              ] })
+            ] }),
+            menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Flex,
+              {
+                align: "center",
+                gap: 8,
+                px: 12,
+                py: 6,
+                style: {
+                  cursor: "pointer",
+                  borderRadius: 8,
+                  backgroundColor: "transparent"
+                },
+                onClick: () => {
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.EllipsisHSolid, { size: 20, color: "secondary" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, c: theme.neutral.lightGray, children: "More" })
+                ]
+              }
+            ),
+            roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { pl: 11, mt: 16, fz: 14, c: theme.neutral.lightGray, children: "Rooms" }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.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 }),
@@ -3737,62 +4012,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,
@@ -5082,13 +5301,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-7ENn--8R.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-D9Jjiwns.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-DoeAXBYv.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-Dit9UCpC.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-Jt88FVTH.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 +10537,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 +10619,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-DmVrcjoe.cjs.map
+//# sourceMappingURL=components-2IYis_pS.cjs.map