@temp-spotwork/ui 1.9.0 → 1.9.1

package/dist/components/atoms/avatar/avatar.d.ts

@@ -35,5 +35,10 @@ export type AvatarProps = {
      * Size of the avatar container in rem. Default is 5.5rem for square and 5rem for circular.
      */
     size?: number;
+    /**
+     * Loads the image only when the avatar is near the viewport, and decodes it off the main thread.
+     * For long lists. Default is false, which loads the image immediately.
+     */
+    lazyLoad?: boolean;
 };
-export declare function Avatar({ id, hasBorder, variant, image, textView, isActive, isOnline, onClick, size, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ id, hasBorder, variant, image, textView, isActive, isOnline, onClick, size, lazyLoad, }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/avatar/avatar.js

@@ -1,79 +1,82 @@
-import { jsx as r, Fragment as b, jsxs as _ } from "react/jsx-runtime";
+import { jsx as r, Fragment as b, jsxs as y } from "react/jsx-runtime";
 import { Typography as I } from "../../styles/typography/typography.js";
-import { classesMap as y } from "./styles.js";
-import D from "./statusIndicatorIcon.js";
+import { classesMap as D } from "./styles.js";
+import F from "./statusIndicatorIcon.js";
 import { t as c } from "../../../bundle-mjs-BjFsLjkg.js";
-function j({
-  id: g,
+function B({
+  id: v,
   hasBorder: i = !1,
   variant: d,
   image: m,
   textView: E = "NN",
   isActive: n,
-  isOnline: v = !1,
+  isOnline: C = !1,
   onClick: s,
-  size: t
+  size: t,
+  lazyLoad: u = !1
 }) {
-  const C = (() => {
+  const S = (() => {
     const e = (E ?? "").trim().split(/\s+/).filter(Boolean);
     return e.length === 0 ? "NN" : e.length === 1 ? e[0][0].toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
-  })(), a = d === "circular", o = a ? 5 : 5.5, l = t ? t / o : 1, u = y[d](i), p = !a && i && n ? "border-bcolor-active" : "border-bcolor-divider", S = t && o > t ? 1 : 7, U = () => {
-    s && s(g);
-  }, x = m ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+  })(), a = d === "circular", o = a ? 5 : 5.5, l = t ? t / o : 1, p = D[d](i), f = !a && i && n ? "border-bcolor-active" : "border-bcolor-divider", U = t && o > t ? 1 : 7, x = () => {
+    s && s(v);
+  }, A = m ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
     "img",
     {
-      className: c(u.image, p),
+      className: c(p.image, f),
       src: m,
-      alt: "avatar-image"
+      alt: "avatar-image",
+      loading: u ? "lazy" : void 0,
+      decoding: u ? "async" : void 0
     }
   ) }) : /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
     "div",
     {
       "data-testid": "avatar-text-box",
-      className: c(u.textBox, p),
+      className: c(p.textBox, f),
       children: /* @__PURE__ */ r(
         I,
         {
-          swStyle: S,
-          children: C,
+          swStyle: U,
+          children: S,
           color: "visualPlaceholderDefault"
         }
       )
     }
-  ) }), f = 0.25, A = a && v && !n && /* @__PURE__ */ r(
+  ) }), h = 0.25, N = a && C && !n && /* @__PURE__ */ r(
     "div",
     {
       className: "absolute",
       style: {
-        bottom: `${l * f}rem`,
-        right: `${l * f}rem`
+        bottom: `${l * h}rem`,
+        right: `${l * h}rem`
       },
       "data-testid": "avatar-online-status",
-      children: /* @__PURE__ */ r(D, { scalingFactor: l })
+      children: /* @__PURE__ */ r(F, { scalingFactor: l })
     }
-  ), h = s ? "button" : "div", N = () => a && n ? "border-bcolor-active" : "border-[transparent]";
-  return /* @__PURE__ */ _(
-    h,
+  ), g = s ? "button" : "div", _ = () => a && n ? "border-bcolor-active" : "border-[transparent]";
+  return /* @__PURE__ */ y(
+    g,
     {
       "data-testid": "avatar-container",
-      onClick: U,
+      onClick: x,
       style: {
         width: `${t || o}rem`,
         height: `${t || o}rem`
       },
       className: c(
         "flex items-center justify-center flex-shrink-0 flex-grow-0 relative",
-        N(),
+        _(),
         "aspect-square"
       ),
-      ...h === "button" ? { type: "button" } : {},
+      ...g === "button" ? { type: "button" } : {},
       children: [
-        x,
-        A
+        A,
+        N
       ]
     }
   );
 }
 export {
-  j as Avatar
+  B as Avatar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.9.0",
+  "version": "1.9.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",