@dxos/react-ui 0.3.5-next.63b0922 → 0.3.5-next.d8a95f3

package/dist/lib/browser/index.mjs

@@ -4,7 +4,7 @@ export * from "@dxos/react-ui-types";
 export * from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Avatars/Avatar.tsx
-import { Root as AvatarRootPrimitive, Image as AvatarImagePrimitive, Fallback as AvatarFallbackPrimitive } from "@radix-ui/react-avatar";
+import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from "@radix-ui/react-avatar";
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import { Primitive } from "@radix-ui/react-primitive";
 import { Slot } from "@radix-ui/react-slot";
@@ -111,7 +111,7 @@ var useVisualViewport = (deps) => {
 // packages/ui/react-ui/src/components/Avatars/Avatar.tsx
 var AVATAR_NAME = "Avatar";
 var [AvatarProvider, useAvatarContext] = createContext2(AVATAR_NAME);
-var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup }) => {
+var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup, color }) => {
   const labelId = useId("avatar__label", propsLabelId);
   const descriptionId = useId("avatar__description", propsDescriptionId);
   const maskId = useId("avatar__mask", propsMaskId);
@@ -123,18 +123,19 @@ var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children,
     variant,
     status,
     animation,
-    inGroup
+    inGroup,
+    color
   }, children);
 };
-var strokeWidth = 2;
-var rx = 8;
+var rx = "0.25rem";
 var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }, forwardedRef) => {
-  const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation } = useAvatarContext("AvatarFrame");
+  const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, color } = useAvatarContext("AvatarFrame");
   const { tx } = useThemeContext();
-  const imageSizeNumber = size === "px" ? 1 : size * 4;
-  const ringGap = 3;
-  const ringWidth = 2;
-  const r = imageSizeNumber / 2 - ringGap - ringWidth;
+  const numericSize = size === "px" ? 1 : Number(size);
+  const sizePx = numericSize * 4;
+  const ringWidth = numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1;
+  const ringGap = numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0;
+  const r = sizePx / 2 - ringGap - ringWidth;
   return /* @__PURE__ */ React2.createElement(AvatarRootPrimitive, {
     role: "img",
     ...props,
@@ -149,10 +150,12 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
       "aria-describedby": descriptionId
     }
   }, /* @__PURE__ */ React2.createElement("svg", {
-    viewBox: `0 0 ${imageSizeNumber} ${imageSizeNumber}`,
-    width: imageSizeNumber,
-    height: imageSizeNumber,
-    className: tx("avatar.frame", "avatar__frame", {})
+    viewBox: `0 0 ${sizePx} ${sizePx}`,
+    width: sizePx,
+    height: sizePx,
+    className: tx("avatar.frame", "avatar__frame", {
+      variant
+    })
   }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("mask", {
     id: maskId
   }, variant === "circle" ? /* @__PURE__ */ React2.createElement("circle", {
@@ -165,62 +168,34 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
     width: 2 * r,
     height: 2 * r,
     x: ringGap + ringWidth,
-    y: ringGap + ringWidth
-  }))), variant === "circle" ? /* @__PURE__ */ React2.createElement("g", null, /* @__PURE__ */ React2.createElement("circle", {
-    fill: "#999",
-    stroke: "none",
-    opacity: 0.1,
-    cx: "50%",
-    cy: "50%",
-    r
-  }), /* @__PURE__ */ React2.createElement("circle", {
-    stroke: "#888",
-    fill: "none",
-    opacity: 0.3,
+    y: ringGap + ringWidth,
+    rx
+  }))), variant === "circle" ? /* @__PURE__ */ React2.createElement("circle", {
+    className: `avatarFrameFill${color ? "" : " fill-[var(--surface-bg)]"}`,
     cx: "50%",
     cy: "50%",
-    r
-  })) : /* @__PURE__ */ React2.createElement("g", null, /* @__PURE__ */ React2.createElement("rect", {
-    fill: "#999",
-    stroke: "none",
-    opacity: 0.1,
-    width: 2 * r,
-    height: 2 * r,
+    r,
+    ...color ? {
+      fill: color
+    } : {}
+  }) : /* @__PURE__ */ React2.createElement("rect", {
+    className: "avatarFrameFill fill-[var(--surface-bg)]",
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
-    rx: 2
-  }), /* @__PURE__ */ React2.createElement("rect", {
-    fill: "none",
-    stroke: "#333",
-    opacity: 0.15,
     width: 2 * r,
     height: 2 * r,
-    x: ringGap + ringWidth,
-    y: ringGap + ringWidth,
-    rx: 2
-  })), children, variant === "circle" ? /* @__PURE__ */ React2.createElement("circle", {
-    className: "avatarFrameStroke fill-transparent stroke-[var(--surface-bg)]",
-    strokeWidth,
-    fill: "none",
-    cx: imageSizeNumber / 2,
-    cy: imageSizeNumber / 2,
-    r: imageSizeNumber / 2 - strokeWidth / 4
-  }) : /* @__PURE__ */ React2.createElement("rect", {
-    className: "avatarFrameStroke fill-transparent stroke-[var(--surface-bg)]",
-    strokeWidth,
-    x: strokeWidth / 4,
-    y: strokeWidth / 4,
-    fill: "none",
-    rx,
-    width: imageSizeNumber - strokeWidth / 4,
-    height: imageSizeNumber - strokeWidth / 4
-  })), /* @__PURE__ */ React2.createElement("span", {
+    rx
+  }), children), /* @__PURE__ */ React2.createElement("span", {
+    role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       size,
       variant,
       status,
       animation
-    })
+    }),
+    style: {
+      borderWidth: ringWidth + "px"
+    }
   }));
 });
 var AvatarLabel = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
@@ -256,7 +231,8 @@ var AvatarMaskedImage = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     height: "100%",
     ...props,
     mask: `url(#${maskId})`,
-    ref: forwardedRef
+    ref: forwardedRef,
+    preserveAspectRatio: "xMidYMid slice"
   });
 });
 var AvatarMaskedText = (props) => {
@@ -275,8 +251,12 @@ var AvatarMaskedText = (props) => {
   }, props.children);
 };
 var AvatarImage = /* @__PURE__ */ forwardRef(({ onLoadingStatusChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React2.createElement(AvatarImagePrimitive, {
-    onLoadingStatusChange,
+  const { size } = useAvatarContext("AvatarImage");
+  const pxSize = size === "px" ? 1 : size * 4;
+  if (pxSize <= 20) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(AvatarFallbackPrimitive, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(AvatarMaskedImage, {
     ...props,
@@ -285,10 +265,12 @@ var AvatarImage = /* @__PURE__ */ forwardRef(({ onLoadingStatusChange, ...props
 });
 var AvatarFallback = /* @__PURE__ */ forwardRef(({ delayMs, text, ...props }, forwardedRef) => {
   const isTextOnly = Boolean(text && /[0-9a-zA-Z]+/.test(text));
+  const { size } = useAvatarContext("AvatarFallback");
+  const numericSize = size === "px" ? 1 : Number(size);
   return /* @__PURE__ */ React2.createElement(AvatarFallbackPrimitive, {
     delayMs,
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(AvatarMaskedImage, {
+  }, /* @__PURE__ */ React2.createElement(React2.Fragment, null, numericSize >= 6 && /* @__PURE__ */ React2.createElement(AvatarMaskedImage, {
     ...props,
     ref: forwardedRef
   }), text && /* @__PURE__ */ React2.createElement(AvatarMaskedText, {
@@ -333,7 +315,7 @@ var AvatarGroupRoot = /* @__PURE__ */ forwardRef2(({ labelId: propsLabelId, desc
     ref: forwardedRef
   }, children));
 });
-var AvatarGroupItemRoot = ({ maskId, size, variant, status, children }) => {
+var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest }) => {
   const { labelId, descriptionId, size: contextSize, variant: contextVariant } = useAvatarContext("AvatarGroupItemRoot");
   return /* @__PURE__ */ React3.createElement(Avatar.Root, {
     labelId,
@@ -342,7 +324,8 @@ var AvatarGroupItemRoot = ({ maskId, size, variant, status, children }) => {
     status,
     size: size ?? contextSize,
     variant: variant ?? contextVariant,
-    inGroup: true
+    inGroup: true,
+    ...rest
   }, children);
 };
 var AvatarGroupLabel = /* @__PURE__ */ forwardRef2(({ srOnly, classNames, children, ...props }, forwardedRef) => {
@@ -559,7 +542,7 @@ import { DotsSixVertical, DotsThreeVertical } from "@phosphor-icons/react";
 import React11, { forwardRef as forwardRef9 } from "react";
 
 // packages/ui/react-ui/src/components/DropdownMenu/DropdownMenu.tsx
-import { Root as DropdownMenuRootPrimitive, DropdownMenuTrigger as DropdownMenuTriggerPrimitive, DropdownMenuPortal as DropdownMenuPortalPrimitive, DropdownMenuContent as DropdownMenuContentPrimitive, DropdownMenuArrow as DropdownMenuArrowPrimitive, DropdownMenuGroup as DropdownMenuGroupPrimitive, DropdownMenuItem as DropdownMenuItemPrimitive, DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, DropdownMenuLabel as DropdownMenuLabelPrimitive } from "@radix-ui/react-dropdown-menu";
+import { Root as DropdownMenuRootPrimitive, DropdownMenuTrigger as DropdownMenuTriggerPrimitive, DropdownMenuPortal as DropdownMenuPortalPrimitive, DropdownMenuContent as DropdownMenuContentPrimitive, DropdownMenuArrow as DropdownMenuArrowPrimitive, DropdownMenuGroup as DropdownMenuGroupPrimitive, DropdownMenuItem as DropdownMenuItemPrimitive, DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive, DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive, DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, DropdownMenuLabel as DropdownMenuLabelPrimitive } from "@radix-ui/react-dropdown-menu";
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import React10, { forwardRef as forwardRef8 } from "react";
@@ -609,6 +592,7 @@ var DropdownMenuArrow = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, f
   });
 });
 var DropdownMenuGroup = DropdownMenuGroupPrimitive;
+var DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
 var DropdownMenuItem = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React10.createElement(DropdownMenuItemPrimitive, {
@@ -617,6 +601,14 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, fo
     ref: forwardedRef
   });
 });
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React10.createElement(DropdownMenuCheckboxItemPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.item", "dropdown-menu__item--checkbox", {}, classNames),
+    ref: forwardedRef
+  });
+});
 var DropdownMenuSeparator = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React10.createElement(DropdownMenuSeparatorPrimitive, {
@@ -642,6 +634,8 @@ var DropdownMenu = {
   Arrow: DropdownMenuArrow,
   Group: DropdownMenuGroup,
   Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
   Separator: DropdownMenuSeparator,
   GroupLabel: DropdownMenuGroupLabel
 };
@@ -1542,6 +1536,9 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
       [side === "inline-end" ? "inlineEndSidebarOpen" : "inlineStartSidebarOpen"]: open,
       side
     }, classNames),
+    ...!open && {
+      inert: "true"
+    },
     ref
   }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
     elevation: "group"