@soyfri/shared-library 1.5.0 → 2.0.0-beta.0

package/dist/components/Avatar/Avatar.cjs

@@ -20,107 +20,144 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const material = require("@mui/material");
 const AccountCircleIcon = require("@mui/icons-material/AccountCircle");
-const React = require("react");
-const sizes = {
-  sm: {
-    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem" },
-    icon: { width: 42, height: 42, marginTop: ".5rem", fontSize: 42 },
-    badge: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem", fontSize: 16 }
-  },
-  xl: {
-    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: "0" },
-    icon: { width: 126, height: 126, marginTop: "0", fontSize: 126 },
-    badge: { width: 105, height: 105, borderWidth: 10, marginTop: "0", fontSize: 64 }
+const sizeMap = {
+  sm: { px: 32, border: 2, font: 14, overlap: 8 },
+  md: { px: 40, border: 2, font: 16, overlap: 10 },
+  lg: { px: 56, border: 3, font: 22, overlap: 14 },
+  xl: { px: 96, border: 4, font: 36, overlap: 20 }
+};
+const resolveSize = (size) => {
+  if (typeof size === "number") {
+    return {
+      px: size,
+      border: Math.max(2, Math.round(size * 0.05)),
+      font: Math.round(size * 0.4),
+      overlap: Math.round(size * 0.25)
+    };
   }
+  return sizeMap[size];
+};
+const mergeSx = (base, extra) => {
+  if (!extra) return base;
+  const baseArr = Array.isArray(base) ? base : [base];
+  const extraArr = Array.isArray(extra) ? extra : [extra];
+  return [...baseArr, ...extraArr];
 };
 const Avatar = ({
   items,
   type,
   displayedAvatars = 4,
   size = "sm",
-  trustUrls = false,
   showText = true,
-  showTooltip = false
+  showTooltip = false,
+  sx,
+  avatarSx,
+  className,
+  overlap
 }) => {
+  var _a;
   const [errorIndex, setErrorIndex] = React.useState(/* @__PURE__ */ new Set());
   const handleImageError = (index) => {
-    setErrorIndex((prev) => new Set(prev).add(index));
+    setErrorIndex((prev) => {
+      const next = new Set(prev);
+      next.add(index);
+      return next;
+    });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "avatar-container", className: "flex items-center leading-2 h-full w-full", children: [
-    items.slice(0, displayedAvatars).map((item, i) => {
-      const commonStyle = {
-        zIndex: displayedAvatars - i,
-        marginLeft: i > 0 ? -22 : 0
-      };
-      const style = sizes[size];
-      const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;
-      const showFallbackIcon = !item.imageUrl && !item.badge || errorIndex.has(i) && !item.badge;
-      const showBadge = item.badge && !item.imageUrl || item.badge && errorIndex.has(i);
-      const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "avatar", style: commonStyle, children: [
-        item.imageUrl && !errorIndex.has(i) ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            "data-testid": "image",
-            alt: item.text || "User avatar",
-            src: imgSrc,
-            onError: () => handleImageError(i),
-            style: __spreadProps(__spreadValues({}, style.avatar), {
-              color: item.color || "#667688",
-              border: `${style.avatar.borderWidth}px solid white`,
-              borderRadius: "9999px",
-              marginTop: style.avatar.marginTop
-            })
-          }
-        ) : showFallbackIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+  if (!items || items.length === 0) {
+    return null;
+  }
+  const s = resolveSize(size);
+  const effectiveOverlap = overlap != null ? overlap : s.overlap;
+  const visibleItems = items.slice(0, displayedAvatars);
+  const baseAvatarSx = {
+    width: s.px,
+    height: s.px,
+    fontSize: s.font,
+    fontWeight: 700,
+    border: (theme) => `${s.border}px solid ${theme.palette.background.paper}`,
+    boxSizing: "content-box"
+  };
+  const renderSingleAvatar = (item, i) => {
+    var _a2, _b;
+    const hasImage = !!item.imageUrl && !errorIndex.has(i);
+    const showBadgeFallback = !!item.badge;
+    const itemSx = __spreadProps(__spreadValues({
+      bgcolor: (_a2 = item.backgroundColor) != null ? _a2 : "action.selected",
+      color: (_b = item.color) != null ? _b : "text.secondary"
+    }, i > 0 && { marginLeft: `-${effectiveOverlap}px` }), {
+      zIndex: visibleItems.length - i
+    });
+    const finalSx = mergeSx(mergeSx(baseAvatarSx, itemSx), avatarSx);
+    const avatarEl = /* @__PURE__ */ jsxRuntime.jsx(
+      material.Avatar,
+      {
+        "data-testid": "avatar",
+        alt: item.text || "User avatar",
+        src: hasImage ? item.imageUrl : void 0,
+        imgProps: {
+          "data-testid": "image",
+          onError: () => handleImageError(i)
+        },
+        sx: finalSx,
+        children: !hasImage && showBadgeFallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "badge", "aria-label": item.text, children: item.badge }) : !hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
           AccountCircleIcon,
           {
             "data-testid": "icon",
             "aria-label": item.text,
-            sx: __spreadProps(__spreadValues({}, style.icon), {
-              fontSize: style.icon.fontSize,
-              marginTop: style.icon.marginTop,
-              borderRadius: "9999px",
-              backgroundColor: "#fff",
-              color: item.color || "#667688"
-            })
+            sx: { width: "100%", height: "100%" }
           }
-        ) : null,
-        showBadge && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        ) : null
+      }
+    );
+    if (showTooltip && item.text) {
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: item.text, children: avatarEl }, i);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: avatarEl }, i);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "avatar-container",
+      className,
+      sx: mergeSx(
+        {
+          display: "flex",
+          alignItems: "center",
+          lineHeight: 1,
+          width: "fit-content"
+        },
+        sx
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center" }, children: visibleItems.map((item, i) => renderSingleAvatar(item, i)) }),
+        showText && ((_a = items[0]) == null ? void 0 : _a.text) && /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Typography,
           {
-            "data-testid": "badge",
-            "aria-label": item.text,
-            style: __spreadProps(__spreadValues({}, style.badge), {
-              display: "inline-block",
-              backgroundColor: item.backgroundColor || "#c8d5e9",
-              color: item.color || "#667688",
-              fontWeight: 700,
-              textAlign: "center",
-              borderRadius: "9999px",
-              border: `${style.badge.borderWidth}px solid white`,
-              lineHeight: style.badge.height,
-              fontSize: style.badge.fontSize,
-              marginTop: style.badge.marginTop,
-              marginBottom: style.badge.marginTop
-            }),
-            children: item.badge
+            "data-testid": "text",
+            variant: "caption",
+            sx: {
+              ml: 1,
+              fontSize: "0.75rem",
+              fontWeight: 400,
+              color: "text.primary"
+            },
+            children: [
+              type && items.length === 1 && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "span", "data-testid": "type", sx: { mr: 0.5 }, children: [
+                type,
+                ":"
+              ] }),
+              items[0].text,
+              items.length > 1 && ` +${items.length - 1}`
+            ]
           }
         )
-      ] }, i);
-      return showTooltip && item.text ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: item.text, children: content }, i) : content;
-    }),
-    showText && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "text", className: "ml-2 text-xs font-normal", children: [
-      type && items.length === 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "type", children: [
-        type,
-        ": "
-      ] }),
-      items[0].text,
-      " ",
-      items.length > 2 && `+${items.length - 1}`
-    ] })
-  ] });
+      ]
+    }
+  );
 };
 exports.Avatar = Avatar;
 //# sourceMappingURL=Avatar.cjs.map

package/dist/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { Avatar as MuiAvatar, Tooltip } from '@mui/material';\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\nimport React, { useState } from 'react';\n\nexport interface AvatarItem {\n  text?: string;\n  imageUrl?: string;\n  badge?: string;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport interface AvatarProps {\n  type?: string;\n  items: AvatarItem[];\n  displayedAvatars?: number;\n  size?: 'sm' | 'xl';\n  trustUrls?: boolean;\n  showText?: boolean;\n  showTooltip?: boolean;\n}\n\nconst sizes = {\n  sm: {\n    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem' },\n    icon: { width: 42, height: 42, marginTop: '.5rem', fontSize: 42 },\n    badge: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem', fontSize: 16 },\n  },\n  xl: {\n    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: '0' },\n    icon: { width: 126, height: 126, marginTop: '0', fontSize: 126 },\n    badge: { width: 105, height: 105, borderWidth: 10, marginTop: '0', fontSize: 64 },\n  },\n};\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  items,\n  type,\n  displayedAvatars = 4,\n  size = 'sm',\n  trustUrls = false,\n  showText = true,\n  showTooltip = false,\n}) => {\n  const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());\n\n  const handleImageError = (index: number) => {\n    setErrorIndex((prev) => new Set(prev).add(index));\n  };\n\n  return (\n    <div data-testid=\"avatar-container\" className=\"flex items-center leading-2 h-full w-full\">\n      {items.slice(0, displayedAvatars).map((item, i) => {\n        const commonStyle = {\n          zIndex: displayedAvatars - i,\n          marginLeft: i > 0 ? -22 : 0,\n        };\n\n        const style = sizes[size];\n\n        const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;\n\n        const showFallbackIcon = (!item.imageUrl && !item.badge) || (errorIndex.has(i) && !item.badge);\n        const showBadge = (item.badge && !item.imageUrl) || (item.badge && errorIndex.has(i));\n\n        const content = (\n          <span key={i} data-testid=\"avatar\" style={commonStyle}>\n            {item.imageUrl && !errorIndex.has(i) ? (\n              <img\n                data-testid=\"image\"\n                alt={item.text || 'User avatar'}\n                src={imgSrc}\n                onError={() => handleImageError(i)}\n                style={{\n                  ...style.avatar,\n                  color: item.color || '#667688',\n                  border: `${style.avatar.borderWidth}px solid white`,\n                  borderRadius: '9999px',\n                  marginTop: style.avatar.marginTop,\n                }}\n              />\n            ) : showFallbackIcon ? (\n              <AccountCircleIcon\n                data-testid=\"icon\"\n                aria-label={item.text}\n                sx={{\n                  ...style.icon,\n                  fontSize: style.icon.fontSize,\n                  marginTop: style.icon.marginTop,\n                  borderRadius: '9999px',\n                  backgroundColor: '#fff',\n                  color: item.color || '#667688',\n                }}\n              />\n            ) : null}\n\n            {showBadge && (\n              <span\n                data-testid=\"badge\"\n                aria-label={item.text}\n                style={{\n                  ...style.badge,\n                  display: 'inline-block',\n                  backgroundColor: item.backgroundColor || '#c8d5e9',\n                  color: item.color || '#667688',\n                  fontWeight: 700,\n                  textAlign: 'center',\n                  borderRadius: '9999px',\n                  border: `${style.badge.borderWidth}px solid white`,\n                  lineHeight: style.badge.height,\n                  fontSize: style.badge.fontSize,\n                  marginTop: style.badge.marginTop,\n                  marginBottom: style.badge.marginTop,\n                }}\n              >\n                {item.badge}\n              </span>\n            )}\n          </span>\n        );\n\n        return showTooltip && item.text ? (\n          <Tooltip key={i} title={item.text}>\n            {content}\n          </Tooltip>\n        ) : (\n          content\n        );\n      })}\n\n      {showText && (\n        <span data-testid=\"text\" className=\"ml-2 text-xs font-normal\">\n          {type && items.length === 1 && (\n            <span data-testid=\"type\">{type}: </span>\n          )}\n          {items[0].text} {items.length > 2 && `+${items.length - 1}`}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Avatar;"],"names":["useState","jsxs","jsx","Tooltip"],"mappings":"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"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Avatar as MuiAvatar,\n  Box,\n  Tooltip,\n  Typography,\n  type SxProps,\n  type Theme,\n} from '@mui/material';\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\n\nexport interface AvatarItem {\n  text?: string;\n  imageUrl?: string;\n  badge?: string;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport interface AvatarProps {\n  type?: string;\n  items: AvatarItem[];\n  displayedAvatars?: number;\n  size?: AvatarSize;\n  showText?: boolean;\n  showTooltip?: boolean;\n  /**\n   * sx aplicado al contenedor raíz.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada MuiAvatar individual (se mergea sobre los defaults).\n   */\n  avatarSx?: SxProps<Theme>;\n  className?: string;\n  /**\n   * Overlap (px) entre avatares cuando hay varios. Default depende del tamaño.\n   */\n  overlap?: number;\n}\n\n// Escala alineada con la escala de MUI (sm=32, md=40, lg=56, xl=96) con borde\n// proporcional para el efecto stacked.\nconst sizeMap: Record<\n  Exclude<AvatarSize, number>,\n  { px: number; border: number; font: number; overlap: number }\n> = {\n  sm: { px: 32, border: 2, font: 14, overlap: 8 },\n  md: { px: 40, border: 2, font: 16, overlap: 10 },\n  lg: { px: 56, border: 3, font: 22, overlap: 14 },\n  xl: { px: 96, border: 4, font: 36, overlap: 20 },\n};\n\nconst resolveSize = (size: AvatarSize) => {\n  if (typeof size === 'number') {\n    return {\n      px: size,\n      border: Math.max(2, Math.round(size * 0.05)),\n      font: Math.round(size * 0.4),\n      overlap: Math.round(size * 0.25),\n    };\n  }\n  return sizeMap[size];\n};\n\nconst mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {\n  if (!extra) return base;\n  const baseArr = Array.isArray(base) ? base : [base];\n  const extraArr = Array.isArray(extra) ? extra : [extra];\n  return [...baseArr, ...extraArr] as SxProps<Theme>;\n};\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  items,\n  type,\n  displayedAvatars = 4,\n  size = 'sm',\n  showText = true,\n  showTooltip = false,\n  sx,\n  avatarSx,\n  className,\n  overlap,\n}) => {\n  const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());\n\n  const handleImageError = (index: number) => {\n    setErrorIndex((prev) => {\n      const next = new Set(prev);\n      next.add(index);\n      return next;\n    });\n  };\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  const s = resolveSize(size);\n  const effectiveOverlap = overlap ?? s.overlap;\n  const visibleItems = items.slice(0, displayedAvatars);\n\n  const baseAvatarSx: SxProps<Theme> = {\n    width: s.px,\n    height: s.px,\n    fontSize: s.font,\n    fontWeight: 700,\n    border: (theme) => `${s.border}px solid ${theme.palette.background.paper}`,\n    boxSizing: 'content-box',\n  };\n\n  const renderSingleAvatar = (item: AvatarItem, i: number) => {\n    const hasImage = !!item.imageUrl && !errorIndex.has(i);\n    const showBadgeFallback = !!item.badge;\n\n    // Defaults tirando al theme; item.color / item.backgroundColor tienen prioridad.\n    const itemSx: SxProps<Theme> = {\n      bgcolor: item.backgroundColor ?? 'action.selected',\n      color: item.color ?? 'text.secondary',\n      // Stacking manual: margen negativo al segundo avatar en adelante.\n      ...(i > 0 && { marginLeft: `-${effectiveOverlap}px` }),\n      zIndex: visibleItems.length - i,\n    };\n\n    const finalSx = mergeSx(mergeSx(baseAvatarSx, itemSx), avatarSx);\n\n    const avatarEl = (\n      <MuiAvatar\n        data-testid=\"avatar\"\n        alt={item.text || 'User avatar'}\n        src={hasImage ? item.imageUrl : undefined}\n        imgProps={{\n          'data-testid': 'image',\n          onError: () => handleImageError(i),\n        } as React.ImgHTMLAttributes<HTMLImageElement>}\n        sx={finalSx}\n      >\n        {!hasImage && showBadgeFallback ? (\n          <span data-testid=\"badge\" aria-label={item.text}>\n            {item.badge}\n          </span>\n        ) : !hasImage ? (\n          <AccountCircleIcon\n            data-testid=\"icon\"\n            aria-label={item.text}\n            sx={{ width: '100%', height: '100%' }}\n          />\n        ) : null}\n      </MuiAvatar>\n    );\n\n    if (showTooltip && item.text) {\n      return (\n        <Tooltip key={i} title={item.text}>\n          {avatarEl}\n        </Tooltip>\n      );\n    }\n    return <React.Fragment key={i}>{avatarEl}</React.Fragment>;\n  };\n\n  return (\n    <Box\n      data-testid=\"avatar-container\"\n      className={className}\n      sx={mergeSx(\n        {\n          display: 'flex',\n          alignItems: 'center',\n          lineHeight: 1,\n          width: 'fit-content',\n        },\n        sx,\n      )}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        {visibleItems.map((item, i) => renderSingleAvatar(item, i))}\n      </Box>\n\n      {showText && items[0]?.text && (\n        <Typography\n          data-testid=\"text\"\n          variant=\"caption\"\n          sx={{\n            ml: 1,\n            fontSize: '0.75rem',\n            fontWeight: 400,\n            color: 'text.primary',\n          }}\n        >\n          {type && items.length === 1 && (\n            <Box component=\"span\" data-testid=\"type\" sx={{ mr: 0.5 }}>\n              {type}:\n            </Box>\n          )}\n          {items[0].text}\n          {items.length > 1 && ` +${items.length - 1}`}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n\nexport default Avatar;\n"],"names":["useState","_a","jsx","MuiAvatar","Tooltip","jsxs","Box","Typography"],"mappings":"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"}

package/dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
 export interface AvatarItem {
     text?: string;
     imageUrl?: string;
@@ -6,14 +7,27 @@ export interface AvatarItem {
     color?: string;
     backgroundColor?: string;
 }
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | number;
 export interface AvatarProps {
     type?: string;
     items: AvatarItem[];
     displayedAvatars?: number;
-    size?: 'sm' | 'xl';
-    trustUrls?: boolean;
+    size?: AvatarSize;
     showText?: boolean;
     showTooltip?: boolean;
+    /**
+     * sx aplicado al contenedor raíz.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * sx aplicado a cada MuiAvatar individual (se mergea sobre los defaults).
+     */
+    avatarSx?: SxProps<Theme>;
+    className?: string;
+    /**
+     * Overlap (px) entre avatares cuando hay varios. Default depende del tamaño.
+     */
+    overlap?: number;
 }
 export declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/dist/components/Avatar/Avatar.definitions.d.ts

@@ -0,0 +1,11 @@
+export declare const DefaultAvatarDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const DefaultAvatarExample = () => (\n    <Avatar\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=1' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=2' },\n        ]}\n    />\n);\n";
+export declare const WithTypeAndTextDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const WithTypeAndTextExample = () => (\n    <Avatar\n        type=\"Owner\"\n        items={[{ text: 'Maria', imageUrl: 'https://i.pravatar.cc/150?img=5' }]}\n        showText\n    />\n);\n";
+export declare const WithBadgesAndTooltipDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const WithBadgesAndTooltipExample = () => (\n    <Avatar\n        showTooltip\n        items={[\n            { text: 'John D.', badge: 'JD', backgroundColor: '#EF5350', color: '#fff' },\n            { text: 'Alice B.', badge: 'AB', backgroundColor: '#AB47BC', color: '#fff' },\n        ]}\n    />\n);\n";
+export declare const SizeSmallDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeSmallExample = () => (\n    <Avatar\n        size=\"sm\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=11' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=12' },\n            { text: 'User Three', imageUrl: 'https://i.pravatar.cc/150?img=13' },\n        ]}\n    />\n);\n";
+export declare const SizeMediumDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeMediumExample = () => (\n    <Avatar\n        size=\"md\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=21' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=22' },\n            { text: 'User Three', imageUrl: 'https://i.pravatar.cc/150?img=23' },\n        ]}\n    />\n);\n";
+export declare const SizeLargeDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeLargeExample = () => (\n    <Avatar\n        size=\"lg\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=31' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=32' },\n        ]}\n    />\n);\n";
+export declare const SizeExtraLargeDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const SizeExtraLargeExample = () => (\n    <Avatar\n        size=\"xl\"\n        items={[{ text: 'Maria', imageUrl: 'https://i.pravatar.cc/150?img=5' }]}\n        showText={false}\n    />\n);\n";
+export declare const NumericSizeDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const NumericSizeExample = () => (\n    <Avatar\n        size={72}\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=41' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=42' },\n        ]}\n        showText={false}\n    />\n);\n";
+export declare const FallbackIconDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const FallbackIconExample = () => (\n    <Avatar\n        items={[\n            { text: 'Without image' },\n            { text: 'Broken image', imageUrl: 'https://example.invalid/broken.png' },\n        ]}\n        showTooltip\n    />\n);\n";
+export declare const DisplayedAvatarsLimitDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const DisplayedAvatarsLimitExample = () => (\n    <Avatar\n        displayedAvatars={3}\n        items={[\n            { text: 'User 1', imageUrl: 'https://i.pravatar.cc/150?img=51' },\n            { text: 'User 2', imageUrl: 'https://i.pravatar.cc/150?img=52' },\n            { text: 'User 3', imageUrl: 'https://i.pravatar.cc/150?img=53' },\n            { text: 'User 4', imageUrl: 'https://i.pravatar.cc/150?img=54' },\n            { text: 'User 5', imageUrl: 'https://i.pravatar.cc/150?img=55' },\n        ]}\n    />\n);\n";
+export declare const CustomStylingDefinition = "\nimport { Avatar } from './Avatar';\n\nexport const CustomStylingExample = () => (\n    <Avatar\n        size=\"md\"\n        items={[\n            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=61' },\n            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=62' },\n        ]}\n        sx={{\n            p: 1,\n            borderRadius: 2,\n            bgcolor: 'action.hover',\n        }}\n        avatarSx={{\n            border: (theme) => '3px solid ' + theme.palette.primary.main,\n        }}\n    />\n);\n";

package/dist/components/Avatar/Avatar.js

@@ -18,107 +18,144 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Tooltip } from "@mui/material";
+import React__default, { useState } from "react";
+import { Box, Typography, Avatar as Avatar$1, Tooltip } from "@mui/material";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import { useState } from "react";
-const sizes = {
-  sm: {
-    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem" },
-    icon: { width: 42, height: 42, marginTop: ".5rem", fontSize: 42 },
-    badge: { width: 35, height: 35, borderWidth: 3, marginTop: ".5rem", fontSize: 16 }
-  },
-  xl: {
-    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: "0" },
-    icon: { width: 126, height: 126, marginTop: "0", fontSize: 126 },
-    badge: { width: 105, height: 105, borderWidth: 10, marginTop: "0", fontSize: 64 }
+const sizeMap = {
+  sm: { px: 32, border: 2, font: 14, overlap: 8 },
+  md: { px: 40, border: 2, font: 16, overlap: 10 },
+  lg: { px: 56, border: 3, font: 22, overlap: 14 },
+  xl: { px: 96, border: 4, font: 36, overlap: 20 }
+};
+const resolveSize = (size) => {
+  if (typeof size === "number") {
+    return {
+      px: size,
+      border: Math.max(2, Math.round(size * 0.05)),
+      font: Math.round(size * 0.4),
+      overlap: Math.round(size * 0.25)
+    };
   }
+  return sizeMap[size];
+};
+const mergeSx = (base, extra) => {
+  if (!extra) return base;
+  const baseArr = Array.isArray(base) ? base : [base];
+  const extraArr = Array.isArray(extra) ? extra : [extra];
+  return [...baseArr, ...extraArr];
 };
 const Avatar = ({
   items,
   type,
   displayedAvatars = 4,
   size = "sm",
-  trustUrls = false,
   showText = true,
-  showTooltip = false
+  showTooltip = false,
+  sx,
+  avatarSx,
+  className,
+  overlap
 }) => {
+  var _a;
   const [errorIndex, setErrorIndex] = useState(/* @__PURE__ */ new Set());
   const handleImageError = (index) => {
-    setErrorIndex((prev) => new Set(prev).add(index));
+    setErrorIndex((prev) => {
+      const next = new Set(prev);
+      next.add(index);
+      return next;
+    });
   };
-  return /* @__PURE__ */ jsxs("div", { "data-testid": "avatar-container", className: "flex items-center leading-2 h-full w-full", children: [
-    items.slice(0, displayedAvatars).map((item, i) => {
-      const commonStyle = {
-        zIndex: displayedAvatars - i,
-        marginLeft: i > 0 ? -22 : 0
-      };
-      const style = sizes[size];
-      const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;
-      const showFallbackIcon = !item.imageUrl && !item.badge || errorIndex.has(i) && !item.badge;
-      const showBadge = item.badge && !item.imageUrl || item.badge && errorIndex.has(i);
-      const content = /* @__PURE__ */ jsxs("span", { "data-testid": "avatar", style: commonStyle, children: [
-        item.imageUrl && !errorIndex.has(i) ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            "data-testid": "image",
-            alt: item.text || "User avatar",
-            src: imgSrc,
-            onError: () => handleImageError(i),
-            style: __spreadProps(__spreadValues({}, style.avatar), {
-              color: item.color || "#667688",
-              border: `${style.avatar.borderWidth}px solid white`,
-              borderRadius: "9999px",
-              marginTop: style.avatar.marginTop
-            })
-          }
-        ) : showFallbackIcon ? /* @__PURE__ */ jsx(
+  if (!items || items.length === 0) {
+    return null;
+  }
+  const s = resolveSize(size);
+  const effectiveOverlap = overlap != null ? overlap : s.overlap;
+  const visibleItems = items.slice(0, displayedAvatars);
+  const baseAvatarSx = {
+    width: s.px,
+    height: s.px,
+    fontSize: s.font,
+    fontWeight: 700,
+    border: (theme) => `${s.border}px solid ${theme.palette.background.paper}`,
+    boxSizing: "content-box"
+  };
+  const renderSingleAvatar = (item, i) => {
+    var _a2, _b;
+    const hasImage = !!item.imageUrl && !errorIndex.has(i);
+    const showBadgeFallback = !!item.badge;
+    const itemSx = __spreadProps(__spreadValues({
+      bgcolor: (_a2 = item.backgroundColor) != null ? _a2 : "action.selected",
+      color: (_b = item.color) != null ? _b : "text.secondary"
+    }, i > 0 && { marginLeft: `-${effectiveOverlap}px` }), {
+      zIndex: visibleItems.length - i
+    });
+    const finalSx = mergeSx(mergeSx(baseAvatarSx, itemSx), avatarSx);
+    const avatarEl = /* @__PURE__ */ jsx(
+      Avatar$1,
+      {
+        "data-testid": "avatar",
+        alt: item.text || "User avatar",
+        src: hasImage ? item.imageUrl : void 0,
+        imgProps: {
+          "data-testid": "image",
+          onError: () => handleImageError(i)
+        },
+        sx: finalSx,
+        children: !hasImage && showBadgeFallback ? /* @__PURE__ */ jsx("span", { "data-testid": "badge", "aria-label": item.text, children: item.badge }) : !hasImage ? /* @__PURE__ */ jsx(
           AccountCircleIcon,
           {
             "data-testid": "icon",
             "aria-label": item.text,
-            sx: __spreadProps(__spreadValues({}, style.icon), {
-              fontSize: style.icon.fontSize,
-              marginTop: style.icon.marginTop,
-              borderRadius: "9999px",
-              backgroundColor: "#fff",
-              color: item.color || "#667688"
-            })
+            sx: { width: "100%", height: "100%" }
           }
-        ) : null,
-        showBadge && /* @__PURE__ */ jsx(
-          "span",
+        ) : null
+      }
+    );
+    if (showTooltip && item.text) {
+      return /* @__PURE__ */ jsx(Tooltip, { title: item.text, children: avatarEl }, i);
+    }
+    return /* @__PURE__ */ jsx(React__default.Fragment, { children: avatarEl }, i);
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": "avatar-container",
+      className,
+      sx: mergeSx(
+        {
+          display: "flex",
+          alignItems: "center",
+          lineHeight: 1,
+          width: "fit-content"
+        },
+        sx
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: visibleItems.map((item, i) => renderSingleAvatar(item, i)) }),
+        showText && ((_a = items[0]) == null ? void 0 : _a.text) && /* @__PURE__ */ jsxs(
+          Typography,
           {
-            "data-testid": "badge",
-            "aria-label": item.text,
-            style: __spreadProps(__spreadValues({}, style.badge), {
-              display: "inline-block",
-              backgroundColor: item.backgroundColor || "#c8d5e9",
-              color: item.color || "#667688",
-              fontWeight: 700,
-              textAlign: "center",
-              borderRadius: "9999px",
-              border: `${style.badge.borderWidth}px solid white`,
-              lineHeight: style.badge.height,
-              fontSize: style.badge.fontSize,
-              marginTop: style.badge.marginTop,
-              marginBottom: style.badge.marginTop
-            }),
-            children: item.badge
+            "data-testid": "text",
+            variant: "caption",
+            sx: {
+              ml: 1,
+              fontSize: "0.75rem",
+              fontWeight: 400,
+              color: "text.primary"
+            },
+            children: [
+              type && items.length === 1 && /* @__PURE__ */ jsxs(Box, { component: "span", "data-testid": "type", sx: { mr: 0.5 }, children: [
+                type,
+                ":"
+              ] }),
+              items[0].text,
+              items.length > 1 && ` +${items.length - 1}`
+            ]
           }
         )
-      ] }, i);
-      return showTooltip && item.text ? /* @__PURE__ */ jsx(Tooltip, { title: item.text, children: content }, i) : content;
-    }),
-    showText && /* @__PURE__ */ jsxs("span", { "data-testid": "text", className: "ml-2 text-xs font-normal", children: [
-      type && items.length === 1 && /* @__PURE__ */ jsxs("span", { "data-testid": "type", children: [
-        type,
-        ": "
-      ] }),
-      items[0].text,
-      " ",
-      items.length > 2 && `+${items.length - 1}`
-    ] })
-  ] });
+      ]
+    }
+  );
 };
 export {
   Avatar