@dxos/shell 0.4.4-main.fb26545 → 0.4.4-next.e0df51e

package/dist/lib/browser/react.mjs

@@ -50,8 +50,7 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
   }, /* @__PURE__ */ React2.createElement("span", {
     className: "pli-1"
   }, t("copy invitation code label")), /* @__PURE__ */ React2.createElement(Copy, {
-    className: getSize(4),
-    weight: "bold",
+    className: getSize(5),
     ...iconProps
   })), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
@@ -59,8 +58,7 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
   }, /* @__PURE__ */ React2.createElement("span", {
     className: "pli-1"
   }, t("copy invitation code success label")), /* @__PURE__ */ React2.createElement(Check, {
-    className: getSize(4),
-    weight: "bold",
+    className: getSize(5),
     ...iconProps
   })));
 };
@@ -92,7 +90,6 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
     ]
   }, /* @__PURE__ */ React2.createElement(Copy, {
     className: getSize(5),
-    weight: "bold",
     ...iconProps
   }))));
 };
@@ -154,13 +151,14 @@ import { generateName } from "@dxos/display-name";
 import { SpaceMember } from "@dxos/react-client/echo";
 import { ListItem, Avatar, useJdenticonHref, useId as useId2 } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick }, forwardedRef) => {
+var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
   const fallbackValue = identity.identityKey.toHex();
   const labelId = useId2("identityListItem__label");
   const jdenticon = useJdenticonHref(fallbackValue ?? "", 12);
   const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
   return /* @__PURE__ */ React4.createElement(ListItem.Root, {
-    classNames: mx3("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer"),
+    ...props,
+    classNames: mx3("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
     onClick: () => onClick?.(),
     "data-testid": "identity-list-item",
     labelId,
@@ -168,7 +166,9 @@ var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick
   }, /* @__PURE__ */ React4.createElement(Avatar.Root, {
     status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
     labelId
-  }, /* @__PURE__ */ React4.createElement(Avatar.Frame, null, /* @__PURE__ */ React4.createElement(Avatar.Fallback, {
+  }, /* @__PURE__ */ React4.createElement(Avatar.Frame, {
+    classNames: "place-self-center"
+  }, /* @__PURE__ */ React4.createElement(Avatar.Fallback, {
     href: jdenticon
   })), /* @__PURE__ */ React4.createElement(Avatar.Label, {
     classNames: "text-sm truncate pli-2"
@@ -335,11 +335,11 @@ var avatarProps = {
   size: 10,
   variant: "circle"
 };
-var AvatarStackEffect = ({ animation, status }) => {
+var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   const { tx } = useThemeContext2();
   return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-start-1 inline-end-auto opacity-20", getSize2(avatarProps.size))
+    className: mx7("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize2(avatarProps.size))
   }, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
@@ -352,7 +352,7 @@ var AvatarStackEffect = ({ animation, status }) => {
     }
   })), /* @__PURE__ */ React8.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-start-2 inline-end-auto opacity-50", getSize2(avatarProps.size))
+    className: mx7("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize2(avatarProps.size))
   }, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
@@ -365,7 +365,7 @@ var AvatarStackEffect = ({ animation, status }) => {
     }
   })));
 };
-var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl }) => {
+var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
   const { t } = useTranslation4("os");
   const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
   const isCancellable = !([
@@ -406,12 +406,17 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
   const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
   return /* @__PURE__ */ React8.createElement(ListItem2.Root, {
     id: invitationCode,
-    classNames: "flex gap-2 pis-3 pie-1 items-center relative"
+    ...props,
+    classNames: [
+      "flex gap-2 pis-3 pie-1 items-center relative",
+      props.classNames
+    ]
   }, /* @__PURE__ */ React8.createElement(ListItem2.Heading, {
     classNames: "sr-only"
   }, t(type === Invitation2.Type.MULTIUSE ? "invite many list item label" : "invite one list item label")), type === Invitation2.Type.MULTIUSE && /* @__PURE__ */ React8.createElement(AvatarStackEffect, {
     status: avatarStatus,
-    animation: avatarAnimation
+    animation: avatarAnimation,
+    reverseEffects
   }), /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Avatar2.Root, {
     ...avatarProps,
     animation: avatarAnimation,
@@ -422,7 +427,7 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     tabIndex: 0,
     classNames: [
       focusRing,
-      "relative rounded-full"
+      "relative rounded-full place-self-center"
     ]
   }, /* @__PURE__ */ React8.createElement(Avatar2.Fallback, {
     text: toEmoji(invitationId)
@@ -457,24 +462,22 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     className: "grow"
   }, " "), isCancellable ? /* @__PURE__ */ React8.createElement(Button2, {
     variant: "ghost",
-    classNames: "flex gap-1",
+    classNames: "flex gap-1 pli-0",
     onClick: cancel,
     "data-testid": "cancel-invitation"
   }, /* @__PURE__ */ React8.createElement("span", {
     className: "sr-only"
   }, t("cancel invitation label")), /* @__PURE__ */ React8.createElement(X, {
-    className: getSize2(5),
-    weight: "bold"
+    className: getSize2(4)
   })) : /* @__PURE__ */ React8.createElement(Button2, {
     variant: "ghost",
-    classNames: "flex gap-1",
+    classNames: "flex gap-1 pli-0",
     onClick: handleClickRemove,
     "data-testid": "remove-invitation"
   }, /* @__PURE__ */ React8.createElement("span", {
     className: "sr-only"
   }, t("remove invitation label")), /* @__PURE__ */ React8.createElement(X, {
-    className: getSize2(5),
-    weight: "bold"
+    className: getSize2(4)
   })));
 };
 
@@ -554,7 +557,9 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
     ref: forwardedRef,
     variant,
     onClick: activeAction.onClick
-  }, activeAction.icon && /* @__PURE__ */ React11.createElement(activeAction.icon, null), /* @__PURE__ */ React11.createElement("span", null, activeAction.label)), /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
+  }, activeAction.icon && /* @__PURE__ */ React11.createElement(activeAction.icon, {
+    className: getSize3(5)
+  }), /* @__PURE__ */ React11.createElement("span", null, activeAction.label)), /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React11.createElement(Button3, {
     classNames: [
@@ -563,7 +568,9 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
     ]
   }, /* @__PURE__ */ React11.createElement("span", {
     className: "sr-only"
-  }, t("invite options label")), /* @__PURE__ */ React11.createElement(CaretDown, null))), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, Object.entries(actions).map(([id, action]) => {
+  }, t("invite options label")), /* @__PURE__ */ React11.createElement(CaretDown, {
+    className: getSize3(4)
+  }))), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, Object.entries(actions).map(([id, action]) => {
     return /* @__PURE__ */ React11.createElement(DropdownMenu.CheckboxItem, {
       key: id,
       "aria-labelledby": `${id}__label`,
@@ -583,7 +590,10 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
       className: descriptionText4
     }, action.description)), /* @__PURE__ */ React11.createElement(DropdownMenu.ItemIndicator, {
       asChild: true
-    }, /* @__PURE__ */ React11.createElement(Check2, null)));
+    }, /* @__PURE__ */ React11.createElement(Check2, {
+      weight: "bold",
+      className: getSize3(4)
+    })));
   })), /* @__PURE__ */ React11.createElement(DropdownMenu.Arrow, null))));
 });
 var Action = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
@@ -3292,7 +3302,8 @@ var SpacePanelHeading = ({ titleId, space, onDone }) => {
     role: "none",
     className: "flex gap-4 items-center justify-center mlb-4"
   }, /* @__PURE__ */ React39.createElement(Planet, {
-    size: 32
+    size: 32,
+    weight: "light"
   }), /* @__PURE__ */ React39.createElement("div", {
     className: "block text-start font-light text-xl"
   }, name ?? space.key.truncate())));
@@ -3897,6 +3908,7 @@ export {
   InvitationListContainer,
   InvitationListItem,
   InvitationListItemImpl,
+  InvitationManager,
   JoinDialog,
   JoinPanel,
   JoinPanelImpl,