@underverse-ui/underverse 0.2.51 → 0.2.52

package/dist/index.cjs

@@ -2225,13 +2225,36 @@ var sizeClasses = {
   md: "h-10 w-10 text-base",
   lg: "h-14 w-14 text-lg"
 };
-var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onClick, ...props }) => {
+var statusColors = {
+  online: "bg-success",
+  offline: "bg-muted-foreground",
+  busy: "bg-destructive",
+  away: "bg-warning",
+  none: "bg-transparent"
+};
+var statusDotSizes = {
+  sm: "w-2 h-2 border",
+  md: "w-3 h-3 border-2",
+  lg: "w-4 h-4 border-2"
+};
+var Avatar = ({
+  src,
+  alt = "avatar",
+  fallback = "?",
+  size = "md",
+  showStatus = true,
+  status = "online",
+  hideStatusOnHover = true,
+  className,
+  onClick,
+  ...props
+}) => {
   const hasValidSrc = !!(src && src.trim().length > 0);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: cn(
-        "relative inline-flex items-center justify-center overflow-hidden rounded-full bg-muted text-foreground select-none transition-all duration-200 ease-soft",
+        "group relative inline-flex items-center justify-center overflow-visible rounded-full bg-muted text-foreground select-none transition-all duration-200 ease-soft",
         onClick && "cursor-pointer hover:ring-2 hover:ring-primary/50 hover:ring-offset-2 hover:shadow-lg active:scale-95",
         sizeClasses[size],
         className
@@ -2239,31 +2262,44 @@ var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onC
       onClick,
       ...props,
       children: [
-        hasValidSrc && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          SmartImage,
-          {
-            src,
-            alt,
-            fill: true,
-            ratioClass: void 0,
-            className: "h-full w-full",
-            roundedClass: "rounded-full",
-            fit: "cover",
-            objectPosition: "center",
-            quality: 80
-          }
-        ) }),
-        !hasValidSrc && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "span",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute inset-0 overflow-hidden rounded-full", children: [
+          hasValidSrc && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            SmartImage,
+            {
+              src,
+              alt,
+              fill: true,
+              ratioClass: void 0,
+              className: "h-full w-full",
+              roundedClass: "rounded-full",
+              fit: "cover",
+              objectPosition: "center",
+              quality: 80
+            }
+          ),
+          !hasValidSrc && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              className: cn(
+                "font-bold uppercase bg-linear-to-br from-primary to-primary/80 bg-clip-text text-transparent",
+                "transition-all duration-200 animate-fade-in"
+              ),
+              children: fallback
+            }
+          ) })
+        ] }),
+        showStatus && status !== "none" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
           {
             className: cn(
-              "font-bold uppercase bg-linear-to-br from-primary to-primary/80 bg-clip-text text-transparent",
-              "transition-all duration-200 animate-fade-in"
-            ),
-            children: fallback
+              "absolute bottom-0 right-0 rounded-full border-background z-10",
+              statusColors[status],
+              statusDotSizes[size],
+              "transition-opacity duration-200",
+              hideStatusOnHover ? "opacity-100 group-hover:opacity-50" : "opacity-100"
+            )
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute bottom-0 right-0 w-3 h-3 bg-success border-2 border-background rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200" })
+        )
       ]
     }
   );