design-zystem 1.0.297 → 1.0.299

package/dist/index.d.mts

@@ -390,6 +390,17 @@ interface AvatarBadge {
     backgroundColor?: string;
     iconColor?: string;
 }
+interface AvatarPhotoBadge {
+    name: string;
+    src?: string | null;
+    backgroundColor?: string;
+    textColor?: string;
+}
+interface AvatarIcon {
+    name: string;
+    family?: 'solid' | 'regular' | 'light' | 'brands';
+    color?: string;
+}
 interface AvatarProps {
     name: string;
     src?: string | null;
@@ -397,9 +408,14 @@ interface AvatarProps {
     textColor?: string;
     size?: number;
     shape?: 'circle' | 'square';
+    /** `contain` fits a wide picture — a vehicle, a logo — instead of cropping it to the square. */
+    objectFit?: string;
+    /** Stands in for a subject that has no portrait — an invoice, a document. `src` wins over it, it wins over the initials. */
+    icon?: AvatarIcon | null;
     badge?: AvatarBadge | null;
+    avatarBadge?: AvatarPhotoBadge | null;
 }
-declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, badge, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, objectFit, icon, badge, avatarBadge, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     label?: string;

package/dist/index.d.ts

@@ -390,6 +390,17 @@ interface AvatarBadge {
     backgroundColor?: string;
     iconColor?: string;
 }
+interface AvatarPhotoBadge {
+    name: string;
+    src?: string | null;
+    backgroundColor?: string;
+    textColor?: string;
+}
+interface AvatarIcon {
+    name: string;
+    family?: 'solid' | 'regular' | 'light' | 'brands';
+    color?: string;
+}
 interface AvatarProps {
     name: string;
     src?: string | null;
@@ -397,9 +408,14 @@ interface AvatarProps {
     textColor?: string;
     size?: number;
     shape?: 'circle' | 'square';
+    /** `contain` fits a wide picture — a vehicle, a logo — instead of cropping it to the square. */
+    objectFit?: string;
+    /** Stands in for a subject that has no portrait — an invoice, a document. `src` wins over it, it wins over the initials. */
+    icon?: AvatarIcon | null;
     badge?: AvatarBadge | null;
+    avatarBadge?: AvatarPhotoBadge | null;
 }
-declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, badge, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, objectFit, icon, badge, avatarBadge, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     label?: string;

package/dist/index.js

@@ -2254,6 +2254,21 @@ var BadgeIcon = import_styled_components18.default.i`
   font-size: ${(props) => Math.round(props.$size * 0.2)}px;
   line-height: 2;
 `;
+var AvatarBadgeSlot = import_styled_components18.default.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: ${(props) => Math.max(1, Math.round(props.$size * 0.05))}px;
+  background-color: ${colors.white};
+  border-radius: 50%;
+  box-shadow: 0 2px 6px ${colors.blue_950}66;
+  line-height: 0;
+`;
+var MainIcon = import_styled_components18.default.i`
+  color: ${(props) => props.$color};
+  font-size: ${(props) => Math.round(props.$size * 0.45)}px;
+  line-height: 1;
+`;
 var Initials = import_styled_components18.default.span`
   color: ${(props) => props.$textColor};
   font-weight: 600;
@@ -2273,9 +2288,12 @@ var Avatar = ({
   textColor,
   size = 56,
   shape = "circle",
-  badge
+  objectFit,
+  icon,
+  badge,
+  avatarBadge
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const [hasImageError, setHasImageError] = (0, import_react10.useState)(false);
   const resolvedBackground = resolveColor3(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor3(textColor, colors.dark);
@@ -2297,17 +2315,36 @@ var Avatar = ({
             width: sizePx,
             height: sizePx,
             borderRadius,
+            objectFit,
             onError: () => setHasImageError(true)
           }
+        ) : icon ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          MainIcon,
+          {
+            $size: size,
+            $color: resolveColor3(icon.color, resolvedText),
+            className: `fa-${(_a = icon.family) != null ? _a : "regular"} fa-${icon.name}`,
+            role: "img",
+            "aria-label": name
+          }
         ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Initials, { $textColor: resolvedText, $size: size, children: initials })
       }
     ),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BadgeSlot, { $size: size, $bg: (_a = badge.backgroundColor) != null ? _a : colors.white, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    avatarBadge ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AvatarBadgeSlot, { $size: size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Avatar,
+      {
+        name: avatarBadge.name,
+        src: avatarBadge.src,
+        backgroundColor: avatarBadge.backgroundColor,
+        textColor: avatarBadge.textColor,
+        size: Math.round(size * 0.4)
+      }
+    ) }) : badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BadgeSlot, { $size: size, $bg: (_b = badge.backgroundColor) != null ? _b : colors.white, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       BadgeIcon,
       {
         $size: size,
-        $color: (_b = badge.iconColor) != null ? _b : colors.blue_950,
-        className: `fa-${(_c = badge.family) != null ? _c : "regular"} fa-${badge.name}`
+        $color: (_c = badge.iconColor) != null ? _c : colors.blue_950,
+        className: `fa-${(_d = badge.family) != null ? _d : "regular"} fa-${badge.name}`
       }
     ) })
   ] });
@@ -5335,6 +5372,7 @@ var MetricCard = ({
       padding: "16px",
       borderRadius: "6px",
       alignSelf,
+      alignItems: "center",
       style: {
         flex: 1,
         border: checked ? `1px solid ${colors.blue_950}` : void 0,

package/dist/index.mjs

@@ -2113,6 +2113,21 @@ var BadgeIcon = styled18.i`
   font-size: ${(props) => Math.round(props.$size * 0.2)}px;
   line-height: 2;
 `;
+var AvatarBadgeSlot = styled18.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: ${(props) => Math.max(1, Math.round(props.$size * 0.05))}px;
+  background-color: ${colors.white};
+  border-radius: 50%;
+  box-shadow: 0 2px 6px ${colors.blue_950}66;
+  line-height: 0;
+`;
+var MainIcon = styled18.i`
+  color: ${(props) => props.$color};
+  font-size: ${(props) => Math.round(props.$size * 0.45)}px;
+  line-height: 1;
+`;
 var Initials = styled18.span`
   color: ${(props) => props.$textColor};
   font-weight: 600;
@@ -2132,9 +2147,12 @@ var Avatar = ({
   textColor,
   size = 56,
   shape = "circle",
-  badge
+  objectFit,
+  icon,
+  badge,
+  avatarBadge
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const [hasImageError, setHasImageError] = useState5(false);
   const resolvedBackground = resolveColor3(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor3(textColor, colors.dark);
@@ -2156,17 +2174,36 @@ var Avatar = ({
             width: sizePx,
             height: sizePx,
             borderRadius,
+            objectFit,
             onError: () => setHasImageError(true)
           }
+        ) : icon ? /* @__PURE__ */ jsx22(
+          MainIcon,
+          {
+            $size: size,
+            $color: resolveColor3(icon.color, resolvedText),
+            className: `fa-${(_a = icon.family) != null ? _a : "regular"} fa-${icon.name}`,
+            role: "img",
+            "aria-label": name
+          }
         ) : /* @__PURE__ */ jsx22(Initials, { $textColor: resolvedText, $size: size, children: initials })
       }
     ),
-    badge && /* @__PURE__ */ jsx22(BadgeSlot, { $size: size, $bg: (_a = badge.backgroundColor) != null ? _a : colors.white, children: /* @__PURE__ */ jsx22(
+    avatarBadge ? /* @__PURE__ */ jsx22(AvatarBadgeSlot, { $size: size, children: /* @__PURE__ */ jsx22(
+      Avatar,
+      {
+        name: avatarBadge.name,
+        src: avatarBadge.src,
+        backgroundColor: avatarBadge.backgroundColor,
+        textColor: avatarBadge.textColor,
+        size: Math.round(size * 0.4)
+      }
+    ) }) : badge && /* @__PURE__ */ jsx22(BadgeSlot, { $size: size, $bg: (_b = badge.backgroundColor) != null ? _b : colors.white, children: /* @__PURE__ */ jsx22(
       BadgeIcon,
       {
         $size: size,
-        $color: (_b = badge.iconColor) != null ? _b : colors.blue_950,
-        className: `fa-${(_c = badge.family) != null ? _c : "regular"} fa-${badge.name}`
+        $color: (_c = badge.iconColor) != null ? _c : colors.blue_950,
+        className: `fa-${(_d = badge.family) != null ? _d : "regular"} fa-${badge.name}`
       }
     ) })
   ] });
@@ -5214,6 +5251,7 @@ var MetricCard = ({
       padding: "16px",
       borderRadius: "6px",
       alignSelf,
+      alignItems: "center",
       style: {
         flex: 1,
         border: checked ? `1px solid ${colors.blue_950}` : void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.297",
+  "version": "1.0.299",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",