@ixo/ui 0.0.8 → 0.0.10

package/dist/{components-BAyyDDDY.js → components-C9l4Wr-7.js}

@@ -1,10 +1,10 @@
 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, 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 { 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, M as MinusCircleSolid, 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, w as MicrophoneSolid, x as Command, y as ArrowCircleRightSolid, z as Protocols, B as Investments, O as Oracles, F as Projects, J as Daos, K as Star, 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-CyNyz_eF.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, Popover, Text as Text$1, AppShell, Stack as Stack$1, Center, Divider, Paper, 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, Badge as Badge$1 } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-A8uoDM6y.js"));
-const Footer = lazy(() => import("./index-hNGq5T2S.js"));
+const Header$3 = lazy(() => import("./index-BdOr8L1R.js"));
+const Footer = lazy(() => import("./index-DEmmiaWG.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-BB2FOFog.js"));
+const Header$2 = lazy(() => import("./index-BAdhUXvd.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-CggCDtn-.js"));
+const Badge = lazy(() => import("./index-C7NdTITy.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -2136,25 +2136,43 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsx(User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
-function SpaceItem({ icon, id, onClick }) {
-  const { hovered, ref } = useHover();
+function SelectedIndicator() {
   const theme = useUITheme();
   return /* @__PURE__ */ 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 } = useHover();
+  const theme = useUITheme();
+  const isSelected = selectedSpace === id;
+  return /* @__PURE__ */ jsxs(
     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__ */ jsx(Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon,
+        isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
+      ]
     }
   );
 }
@@ -2302,9 +2320,11 @@ function AppShellNavigation({
   spaces,
   pageItem,
   selectedSpace,
+  temporarySpace,
   menuItems,
   companyIcon,
   onAddSpaceClick,
+  onMinusSpaceClick,
   avatarIcon,
   onMenuItemClick,
   onSettingsIconClick,
@@ -2333,10 +2353,30 @@ function AppShellNavigation({
       children: [
         /* @__PURE__ */ jsx(AppShell.Navbar, { children: /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, children: [
           /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
-            /* @__PURE__ */ jsxs(Stack$1, { align: "center", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, gap: 8, children: [
-              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, 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 }),
-              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
+            /* @__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,
+                companyIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
+              ] }),
+              avatarIcon && /* @__PURE__ */ jsxs(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__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon,
+                avatarIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
+              ] }),
               /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              temporarySpace && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  SpaceItem,
+                  {
+                    selectedSpace,
+                    icon: temporarySpace.icon,
+                    name: temporarySpace.name,
+                    id: temporarySpace.id,
+                    onClick: temporarySpace.onClick
+                  },
+                  temporarySpace.id
+                ),
+                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
+              ] }),
               /* @__PURE__ */ jsx(
                 Stack$1,
                 {
@@ -2354,14 +2394,12 @@ function AppShellNavigation({
                       display: "none"
                     }
                   },
-                  children: spaces.map(({ icon, id, name, onClick }, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                    selectedSpace === id && /* @__PURE__ */ jsx(Paper, { bg: theme.neutral.whiteFull, h: 30, w: 4, pos: "absolute", left: 0, top: 116 + i * 49.5 }),
-                    /* @__PURE__ */ jsx(SpaceItem, { icon, name, id, onClick }, id)
-                  ] }))
+                  children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
+            onAddSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
+            onMinusSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsx(MinusCircleSolid, { color: "secondary" }) }),
             /* @__PURE__ */ jsxs(Stack$1, { align: "center", gap: 8, children: [
               /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
               /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) }),
@@ -5315,13 +5353,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-C6EdX2d9.js"));
-const Header$1 = lazy(() => import("./index-DHZY_QlO.js"));
-const Content = lazy(() => import("./index-DuOYVQF3.js"));
+const MainAction = lazy(() => import("./index-CefIazVm.js"));
+const Header$1 = lazy(() => import("./index-Bu6ceg5V.js"));
+const Content = lazy(() => import("./index-BeQ6VdsQ.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-D5e7qnjY.js"));
-const Actions = lazy(() => import("./index-Bfl1m3Ui.js"));
+const Assets = lazy(() => import("./index-DufBe3H7.js"));
+const Actions = lazy(() => import("./index-DlhDUbCZ.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);
@@ -10635,4 +10673,4 @@ export {
   CardSelector as y,
   CardOutput as z
 };
-//# sourceMappingURL=components-BAyyDDDY.js.map
+//# sourceMappingURL=components-C9l4Wr-7.js.map