@ixo/ui 0.1.8 → 0.1.9

package/dist/{components-BTh3OZP_.js → components-EXB_BUs5.js}

@@ -4,7 +4,7 @@ import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react
 import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, b as getTransparentColor, L as Loading, P as PlusSolid, S as SearchSolid, c as Assistant, d as ArrowUpSolid, E as EllipsisVSolid, e as ArrowLeftSolid, f as Canvas, H as HistorySolid, U as User, h as AngleLeftSolid, M as MinusCircleSolid, i as SettingsBarSolid, G as Globe, D as Dashboard, j as Groups, k as UserCircleSolid, l as Assets$1, m as Claims, n as Accounts, 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 AngleRightSolid, Q as Expand, R as LeafSolid, T as ArrowDownSolid, V as ArrowRightSolid, W as Play, X as CheckCircle, Y as Events, Z as ThumbsUpSolid, _ as CommentsSolid, $ as CopySolid, a0 as Hourglass, a1 as Act, a2 as Info$1, a3 as ClaimsW, a4 as TachometerAltSolid, a5 as UserCogSolid, a6 as UsersSolid, a7 as EllipsisHSolid } from "./UsersSolid-BAHkDzh8.js";
 import { useState, useCallback, useRef, forwardRef, useEffect, Suspense, lazy, useMemo, useId, 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, Text as Text$1, Popover, Stack as Stack$1, Badge as Badge$1, Center, AppShell, Skeleton, Tooltip as Tooltip$4, CloseButton, Group, Burger, Divider, ScrollArea, Space, Overlay } from "@mantine/core";
+import { Accordion as Accordion$1, Box, Image, Text as Text$1, Popover, Center, FocusTrap, Stack as Stack$1, Badge as Badge$1, AppShell, Skeleton, Tooltip as Tooltip$4, CloseButton, Group, Burger, Divider, ScrollArea, Space, Overlay } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
@@ -823,8 +823,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-CDydqopl.js"));
-const Footer = lazy(() => import("./index-DywPfyqK.js"));
+const Header$3 = lazy(() => import("./index-2Qg0wBFO.js"));
+const Footer = lazy(() => import("./index-BKru_TQX.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -908,7 +908,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-DPUnEcWL.js"));
+const Header$2 = lazy(() => import("./index-Be7UORTt.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1343,7 +1343,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-C7OE98In.js"));
+const Badge = lazy(() => import("./index-Dv_e6z8D.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -1461,7 +1461,8 @@ function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide
     }
   ) });
 }
-const icon = (Icon, size, color) => /* @__PURE__ */ jsx(Icon, { size: 18, color });
+const ICON_COLOR = "var(--mantine-color-neutralColor-8)";
+const icon = (Icon, size, color) => /* @__PURE__ */ jsx(Icon, { size: 18, color: color || ICON_COLOR });
 function IconButton({
   icon: Icon,
   onClick,
@@ -1949,7 +1950,7 @@ function Item({ icon: icon2, label, disabled, onClick }) {
     }
   );
 }
-function MoreMenu({ items, controlColor = "primary" }) {
+function MoreMenu({ items, controlColor = "primary", Icon }) {
   const [opened, setOpened] = useState(false);
   return /* @__PURE__ */ jsxs(
     Popover,
@@ -1971,25 +1972,10 @@ function MoreMenu({ items, controlColor = "primary" }) {
       position: "right-start",
       shadow: "md",
       children: [
-        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            css: {
-              background: "none",
-              border: "none",
-              padding: 0,
-              cursor: "pointer",
-              position: "relative",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            onClick: () => setOpened((o) => !o),
-            children: /* @__PURE__ */ jsx(EllipsisVSolid, { size: 20, color: controlColor })
-          }
-        ) }),
+        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Center, { onClick: () => setOpened((o) => !o), children: Icon || /* @__PURE__ */ jsx(EllipsisVSolid, { size: 20, color: controlColor }) }) }),
         /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [
-          /* @__PURE__ */ jsx(Text$1, { ml: 12, mb: 10, fz: 14, c: "neutralColor.7", children: "Page" }),
+          /* @__PURE__ */ jsx(FocusTrap.InitialFocus, {}),
+          /* @__PURE__ */ jsx(Text$1, { ml: 12, mb: 10, fz: 14, c: "neutralColor.7", children: "Actions" }),
           /* @__PURE__ */ jsx(Stack$1, { gap: "4px", children: items.map((item) => /* @__PURE__ */ jsx(
             Item,
             {
@@ -2422,7 +2408,7 @@ function RoomItem({ room }) {
   );
   return shouldShowTooltip ? /* @__PURE__ */ jsx(Tooltip$4, { label: room.name, children: /* @__PURE__ */ jsx("span", { children: content }) }) : content;
 }
-function RoomCategory({ name, rooms, actions, onAddClick }) {
+function RoomCategory({ name, rooms, actions, primaryActions }) {
   const { hovered, ref } = useHover();
   const { value, toggle: toggle2 } = useToggle(false);
   return /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
@@ -2444,15 +2430,19 @@ function RoomCategory({ name, rooms, actions, onAddClick }) {
         children: [
           /* @__PURE__ */ jsx(Text$1, { fz: 12, tt: "capitalize", children: name }),
           /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
-            onAddClick && /* @__PURE__ */ jsx(
+            primaryActions && primaryActions.length > 0 && /* @__PURE__ */ jsx(
               Center,
               {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onAddClick();
+                onClick: (e) => e.stopPropagation(),
+                sx: {
+                  cursor: "pointer",
+                  borderRadius: 4,
+                  transition: "transform 0.2s ease",
+                  "&:hover": {
+                    background: "var(--mantine-color-neutralColor-5)"
+                  }
                 },
-                sx: { cursor: "pointer", borderRadius: 4, transition: "transform 0.2s ease", "&:hover": { background: "var(--mantine-color-neutralColor-5)" } },
-                children: icon(IconPlus, void 0, "var(--mantine-color-neutralColor-7)")
+                children: /* @__PURE__ */ jsx(MoreMenu, { Icon: icon(IconPlus), items: primaryActions })
               }
             ),
             actions && actions.length > 0 && /* @__PURE__ */ jsx(
@@ -2923,7 +2913,7 @@ function AppShellNavigation({
                   }
                   return /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id);
                 }),
-                roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsx(Stack$1, { gap: 8, mt: 16, children: roomCategories.map(({ id, name, actions, rooms, onAddClick }) => /* @__PURE__ */ jsx(RoomCategory, { id, name, actions, rooms, onAddClick }, id)) })
+                roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsx(Stack$1, { gap: 8, mt: 16, children: roomCategories.map(({ id, name, actions, rooms, primaryActions: onAddClick }) => /* @__PURE__ */ jsx(RoomCategory, { id, name, actions, rooms, primaryActions: onAddClick }, id)) })
               ] }) }),
               footerContent && /* @__PURE__ */ jsx(AppShell.Section, { px: 12, py: 10, children: /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: footerContent }) })
             ] })
@@ -6059,13 +6049,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-DSJ4ojXM.js"));
-const Header$1 = lazy(() => import("./index-DTtlPPm6.js"));
-const Content = lazy(() => import("./index-QUkZftBS.js"));
+const MainAction = lazy(() => import("./index-DccAmgX1.js"));
+const Header$1 = lazy(() => import("./index-CEb94eQ3.js"));
+const Content = lazy(() => import("./index-Dm6B7Yv-.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-BVV0ucIw.js"));
-const Actions = lazy(() => import("./index-Dl7hhKbt.js"));
+const Assets = lazy(() => import("./index-BHuoPnj7.js"));
+const Actions = lazy(() => import("./index-Lu5gXTPs.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);
@@ -11342,4 +11332,4 @@ export {
   CardHero as y,
   CardSelector as z
 };
-//# sourceMappingURL=components-BTh3OZP_.js.map
+//# sourceMappingURL=components-EXB_BUs5.js.map