@doscientos/ui 0.1.9 → 0.1.10

package/dist/index.cjs

@@ -439,15 +439,31 @@ function AppShellContent({
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var sizes = { xs: "size-5 text-[10px]", sm: "size-6 text-xs", default: "size-8 text-sm", lg: "size-10 text-base" };
-function Avatar({ className, size = "default", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex shrink-0 overflow-hidden rounded-full bg-muted text-muted-foreground", sizes[size], className), ...props });
+var AvatarContext = (0, import_react4.createContext)(null);
+function Avatar({ className, size = "default", children, ...props }) {
+  const [status, setStatus] = (0, import_react4.useState)("idle");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarContext.Provider, { value: { status, setStatus }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex shrink-0 overflow-hidden rounded-full bg-muted text-muted-foreground", sizes[size], className), ...props, children }) });
 }
-function AvatarImage({ className, ...props }) {
+function AvatarImage({ className, src, onError, onLoad, ...props }) {
+  const avatar = (0, import_react4.useContext)(AvatarContext);
   const [failed, setFailed] = (0, import_react4.useState)(false);
-  if (failed) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { "data-slot": "avatar-image", className: cn("aspect-square size-full object-cover", className), onError: () => setFailed(true), ...props });
+  (0, import_react4.useEffect)(() => {
+    setFailed(false);
+    avatar?.setStatus(src ? "loading" : "idle");
+  }, [avatar?.setStatus, src]);
+  if (failed || avatar?.status === "error") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { "data-slot": "avatar-image", src, className: cn("aspect-square size-full object-cover", className), onLoad: (event) => {
+    avatar?.setStatus("loaded");
+    onLoad?.(event);
+  }, onError: (event) => {
+    setFailed(true);
+    avatar?.setStatus("error");
+    onError?.(event);
+  }, ...props });
 }
 function AvatarFallback({ className, ...props }) {
+  const avatar = (0, import_react4.useContext)(AvatarContext);
+  if (avatar?.status === "loaded") return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center font-medium", className), ...props });
 }
 function AvatarBadge({ className, ...props }) {