@ixo/ui 0.0.9 → 0.0.11

package/dist/{components-DZWScQb-.cjs → components-UcpUEMTl.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-B9DXA9NX.cjs");
+const UsersSolid = require("./UsersSolid-peS-I-xF.cjs");
 const react$1 = require("react");
 const constants = require("./constants-DFJRYpE2.cjs");
 const core = require("@mantine/core");
@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BRK_Dgig.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-Cug-jyVN.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CS0eGbp8.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-Ch7CzT1U.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-CXEK4K6T.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BgYOMwQU.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-H6le64x9.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-DKCtJiPM.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2159,25 +2159,43 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
-function SpaceItem({ icon, id, onClick }) {
-  const { hovered, ref } = hooks.useHover();
+function SelectedIndicator() {
   const theme = useUITheme.useUITheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: -8,
+        width: 4,
+        height: 30,
+        backgroundColor: theme.neutral.whiteFull,
+        borderRadius: 4
+      }
+    }
+  );
+}
+function SpaceItem({ icon, id, selectedSpace, onClick }) {
+  const { hovered, ref } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  const isSelected = selectedSpace === id;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Center,
     {
       ref,
       sx: {
         cursor: "pointer",
-        borderRadius: 24,
-        transform: hovered ? "scale(1.1)" : "scale(1)",
-        transition: "transform 0.2s ease"
+        borderRadius: 24
       },
       pos: "relative",
-      bg: hovered ? theme.neutral.transparent10 : theme.bg.navIconsBg,
+      bg: hovered ? theme.neutral.transparent30 : 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
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon,
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
+      ]
     }
   );
 }
@@ -2215,7 +2233,8 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 4, 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, style: { flex: 1 }, children: item.name })
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
+            item.badgeCount && /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { size: "xs", variant: "filled", ml: 4, style: { minWidth: "16px", height: "15px", padding: "0 4px", fontSize: "8px" }, children: item.badgeCount })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
             hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2325,9 +2344,11 @@ function AppShellNavigation({
   spaces,
   pageItem,
   selectedSpace,
+  temporarySpace,
   menuItems,
   companyIcon,
   onAddSpaceClick,
+  onMinusSpaceClick,
   avatarIcon,
   onMenuItemClick,
   onSettingsIconClick,
@@ -2356,10 +2377,30 @@ function AppShellNavigation({
       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 }),
-              avatarIcon && /* @__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.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,
+                companyIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
+              ] }),
+              avatarIcon && /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", 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,
+                avatarIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              temporarySpace && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SpaceItem,
+                  {
+                    selectedSpace,
+                    icon: temporarySpace.icon,
+                    name: temporarySpace.name,
+                    id: temporarySpace.id,
+                    onClick: temporarySpace.onClick
+                  },
+                  temporarySpace.id
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 core.Stack,
                 {
@@ -2377,14 +2418,12 @@ function AppShellNavigation({
                       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)
-                  ] }))
+                  children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, 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" }) }),
+            onAddSpaceClick && /* @__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" }) }),
+            onMinusSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.MinusCircleSolid, { 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" }) }),
@@ -5338,13 +5377,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-BmWX35JS.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CGhflycE.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-JnZlYiYC.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-CURZjE2o.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-B0a_fgrY.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-CkHXNKpn.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-ssANWiHO.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-BC_7C1s0.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-BSttBO__.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-DoM75JXa.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);
@@ -10656,4 +10695,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-DZWScQb-.cjs.map
+//# sourceMappingURL=components-UcpUEMTl.cjs.map