@dxos/react-ui 0.3.5-next.5910692 → 0.3.5-next.b7dc283

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,9 +150,9 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
       "aria-describedby": descriptionId
     }
   }, /* @__PURE__ */ React2.createElement("svg", {
-    viewBox: `0 0 ${imageSizeNumber} ${imageSizeNumber}`,
-    width: imageSizeNumber,
-    height: imageSizeNumber,
+    viewBox: `0 0 ${sizePx} ${sizePx}`,
+    width: sizePx,
+    height: sizePx,
     className: tx("avatar.frame", "avatar__frame", {
       variant
     })
@@ -167,63 +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) => {
@@ -259,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) => {
@@ -278,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,
@@ -288,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, {
@@ -336,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,
@@ -345,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) => {
@@ -1556,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"