@ixo/ui 0.0.12 → 0.0.14

package/dist/{components-r_WFYNH9.cjs → components-vw6J_dpp.cjs}

@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-TKO6YSL9.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-DRR_W_MQ.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-djRt821o.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-4sKOMBmk.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-BMITyp0z.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BG-QfJbv.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-BEeE6_qe.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-BuxCAg_1.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2159,6 +2159,76 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
+const MIN_WIDTH = 200;
+const MAX_WIDTH = 600;
+function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 300, onWidthChange }) {
+  const [isResizing, setIsResizing] = react$1.useState(false);
+  const [ref] = hooks.useResizeObserver();
+  const isShowingRef = react$1.useRef(false);
+  const theme = useUITheme.useUITheme();
+  react$1.useEffect(() => {
+    if (!asideCollapsed && width <= MIN_WIDTH) {
+      isShowingRef.current = true;
+      onWidthChange?.(300);
+      setTimeout(() => {
+        isShowingRef.current = false;
+      }, 200);
+    }
+  }, [asideCollapsed]);
+  function clearListeners() {
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+  react$1.useEffect(() => {
+    if (isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      clearListeners();
+    }
+    return () => clearListeners();
+  }, [isResizing]);
+  const handleMouseMove = (e) => {
+    if (!isResizing) return;
+    const newWidth = window.innerWidth - e.clientX;
+    onWidthChange?.(Math.min(Math.max(newWidth, MIN_WIDTH), MAX_WIDTH));
+  };
+  react$1.useEffect(() => {
+    if (width === MIN_WIDTH && !asideCollapsed && onAsideToggle && !isShowingRef.current) {
+      clearListeners();
+      onAsideToggle();
+    }
+  }, [width, asideCollapsed, onAsideToggle]);
+  const handleMouseUp = () => setIsResizing(false);
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setIsResizing(true);
+  };
+  if (asideCollapsed) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.AppShell.Aside, { w: width, miw: 200, maw: 600, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.Box,
+      {
+        w: 4,
+        top: 0,
+        left: 0,
+        h: "100%",
+        pos: "absolute",
+        bg: isResizing ? theme.colors.focus : "transparent",
+        sx: {
+          cursor: "col-resize",
+          transition: "background-color 0.2s ease"
+        },
+        onMouseDown: handleMouseDown
+      }
+    ),
+    children
+  ] });
+}
 function SelectedIndicator() {
   const theme = useUITheme.useUITheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2356,9 +2426,13 @@ function AppShellNavigation({
   isBackButtonVisible,
   footerMenuItems,
   roomCategories,
+  right,
+  asideCollapsed = true,
+  onAsideToggle,
   children
 }) {
-  const [desktopOpened, { toggle: toggleDesktop }] = hooks.useDisclosure(true);
+  const [navbarCollapsed, { toggle: toggleNavbar }] = hooks.useDisclosure(true);
+  const [asideWidth, setAsideWidth] = react$1.useState(300);
   const theme = useUITheme.useUITheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.AppShell,
@@ -2367,11 +2441,18 @@ function AppShellNavigation({
       styles: {
         navbar: {
           background: theme.bg.navScaled
+        },
+        aside: {
+          background: theme.bg.navScaled
         }
       },
       bg: theme.bg.navIconsBg,
       navbar: {
-        width: desktopOpened ? 300 : 56,
+        width: navbarCollapsed ? 300 : 56,
+        breakpoint: "sm"
+      },
+      aside: {
+        width: asideCollapsed ? 0 : asideWidth,
         breakpoint: "sm"
       },
       children: [
@@ -2427,17 +2508,17 @@ function AppShellNavigation({
             /* @__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" }) })
+              !navbarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: toggleNavbar, 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: [
+          navbarCollapsed && /* @__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" }) }) })
+                /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: 12, align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer" }, onClick: toggleNavbar, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PanelLeftSolid, { size: 22, color: "secondary" }) }) })
               ] }),
               menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)),
               roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.id)) })
@@ -2445,7 +2526,8 @@ function AppShellNavigation({
             /* @__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 })
+        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Main, { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(AsideResizable, { asideCollapsed, onAsideToggle, width: asideWidth, onWidthChange: setAsideWidth, children: right })
       ]
     }
   );
@@ -4433,29 +4515,41 @@ function FloatingInput({
     }
   );
 }
-const EcosystemCard = ({ title = "Ecosystem Name", subtitle = "Short Ecosystem Subtitle", domains, missions, oracles, assets, background }) => {
+const EcosystemCard = ({
+  title = "Ecosystem Name",
+  subtitle = "Short Ecosystem Subtitle",
+  domains,
+  missions,
+  oracles,
+  assets,
+  background,
+  isLoading = false,
+  unsplashCreds
+}) => {
   const stats = [
     { label: "Domains", value: domains.toLocaleString() },
     { label: "Missions", value: missions.toLocaleString() },
     { label: "Oracles", value: oracles.toLocaleString() },
     { label: "Assets", value: assets }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       style: {
         borderRadius: 16,
         padding: 32,
-        background: `linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(${(background || DEFAULT_IMAGE.src) ?? DEFAULT_IMAGE}) center/cover no-repeat`,
+        background: isLoading ? "rgba(0,0,0,0.1)" : `linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(${(background || DEFAULT_IMAGE.src) ?? DEFAULT_IMAGE}) center/cover no-repeat`,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
+        justifyContent: "center",
         gap: 40,
         position: "relative",
         overflow: "hidden",
-        minWidth: 420
+        minWidth: 420,
+        minHeight: 265
       },
-      children: [
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Loader, { size: 40, color: "primary" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @media (max-width: 500px) {
           .eco-stats-grid {
@@ -4509,8 +4603,42 @@ const EcosystemCard = ({ title = "Ecosystem Name", subtitle = "Short Ecosystem S
               stat.label
             ))
           }
+        ),
+        unsplashCreds && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              fontSize: 10,
+              color: "rgba(255, 255, 255, 0.7)",
+              background: "rgba(0, 0, 0, 0.3)",
+              padding: "4px 8px",
+              borderRadius: 4,
+              backdropFilter: "blur(10px)",
+              WebkitBackdropFilter: "blur(10px)",
+              zIndex: 10
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Photo by",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: unsplashCreds.html || unsplashCreds.portfolio_url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  style: { color: "rgba(255, 255, 255, 0.9)", textDecoration: "underline" },
+                  children: unsplashCreds.first_name
+                }
+              ),
+              " ",
+              "on Unsplash"
+            ] })
+          }
         )
-      ]
+      ] })
     }
   );
 };
@@ -5377,13 +5505,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-CsJHqKvT.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-_9ZTSjHP.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-EEicrjKl.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DNqtJQVl.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-yjx-PRyb.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-BHcOFwds.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-COpxSSXv.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-C0irLFkc.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-CyysTrZP.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-nhqvNIAj.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);
@@ -10695,4 +10823,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-r_WFYNH9.cjs.map
+//# sourceMappingURL=components-vw6J_dpp.cjs.map