@underverse-ui/underverse 0.2.51 → 0.2.52

package/dist/index.d.cts

@@ -248,14 +248,21 @@ declare const Switch: React$1.FC<SwitchProps>;
 
 declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
+type StatusType = "online" | "offline" | "busy" | "away" | "none";
 interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
     fallback?: string;
     size?: "sm" | "md" | "lg";
+    /** Show status indicator dot */
+    showStatus?: boolean;
+    /** Status type: online, offline, busy, away, none */
+    status?: StatusType;
+    /** Hide status dot on hover */
+    hideStatusOnHover?: boolean;
     onClick?: () => void;
 }
-declare const Avatar: ({ src, alt, fallback, size, className, onClick, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, alt, fallback, size, showStatus, status, hideStatusOnHover, className, onClick, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;

package/dist/index.d.ts

@@ -248,14 +248,21 @@ declare const Switch: React$1.FC<SwitchProps>;
 
 declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
+type StatusType = "online" | "offline" | "busy" | "away" | "none";
 interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
     fallback?: string;
     size?: "sm" | "md" | "lg";
+    /** Show status indicator dot */
+    showStatus?: boolean;
+    /** Status type: online, offline, busy, away, none */
+    status?: StatusType;
+    /** Hide status dot on hover */
+    hideStatusOnHover?: boolean;
     onClick?: () => void;
 }
-declare const Avatar: ({ src, alt, fallback, size, className, onClick, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, alt, fallback, size, showStatus, status, hideStatusOnHover, className, onClick, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;

package/dist/index.js

@@ -2053,13 +2053,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__ */ jsxs9(
     "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
@@ -2067,31 +2090,44 @@ var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onC
       onClick,
       ...props,
       children: [
-        hasValidSrc && /* @__PURE__ */ jsx12("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx12(
-          SmartImage,
-          {
-            src,
-            alt,
-            fill: true,
-            ratioClass: void 0,
-            className: "h-full w-full",
-            roundedClass: "rounded-full",
-            fit: "cover",
-            objectPosition: "center",
-            quality: 80
-          }
-        ) }),
-        !hasValidSrc && /* @__PURE__ */ jsx12(
-          "span",
+        /* @__PURE__ */ jsxs9("div", { className: "absolute inset-0 overflow-hidden rounded-full", children: [
+          hasValidSrc && /* @__PURE__ */ jsx12(
+            SmartImage,
+            {
+              src,
+              alt,
+              fill: true,
+              ratioClass: void 0,
+              className: "h-full w-full",
+              roundedClass: "rounded-full",
+              fit: "cover",
+              objectPosition: "center",
+              quality: 80
+            }
+          ),
+          !hasValidSrc && /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx12(
+            "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__ */ jsx12(
+          "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__ */ jsx12("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" })
+        )
       ]
     }
   );