@underverse-ui/underverse 0.2.50 → 0.2.52

package/dist/index.cjs

@@ -1898,7 +1898,7 @@ var Textarea2 = (0, import_react5.forwardRef)(
       md: "px-4 py-3 text-sm min-h-[100px]",
       lg: "px-5 py-4 text-base min-h-[120px]"
     };
-    const variantClasses = {
+    const variantClasses2 = {
       default: cn(
         "border border-input bg-background",
         "hover:border-accent-foreground/20",
@@ -1942,7 +1942,7 @@ var Textarea2 = (0, import_react5.forwardRef)(
               "focus:outline-none shadow-sm focus:shadow-md",
               "backdrop-blur-sm",
               sizeClasses2[size],
-              error ? "border-destructive focus:ring-destructive/20 focus:border-destructive" : variantClasses[variant],
+              error ? "border-destructive focus:ring-destructive/20 focus:border-destructive" : variantClasses2[variant],
               "disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
@@ -1997,7 +1997,7 @@ var Switch = ({
       translate: "translate-x-6"
     }
   };
-  const variantClasses = {
+  const variantClasses2 = {
     default: {
       active: "bg-primary border-primary",
       inactive: "bg-input border-input"
@@ -2051,7 +2051,7 @@ var Switch = ({
                 {
                   className: cn(
                     "block w-full h-full rounded-full transition-colors duration-200 ease-out border",
-                    checked ? variantClasses[variant].active : variantClasses[variant].inactive
+                    checked ? variantClasses2[variant].active : variantClasses2[variant].inactive
                   )
                 }
               ),
@@ -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" })
+        )
       ]
     }
   );
@@ -2280,7 +2316,7 @@ var Skeleton = ({
   animation = "pulse",
   lines = 1
 }) => {
-  const variantClasses = {
+  const variantClasses2 = {
     rectangular: "rounded-md",
     circular: "rounded-full",
     rounded: "rounded-lg",
@@ -2297,7 +2333,7 @@ var Skeleton = ({
       {
         className: cn(
           "h-4 bg-muted",
-          variantClasses[variant],
+          variantClasses2[variant],
           animationClasses[animation],
           index === lines - 1 && "w-3/4"
           // Last line is shorter
@@ -2315,7 +2351,7 @@ var Skeleton = ({
     {
       className: cn(
         "bg-muted",
-        variantClasses[variant],
+        variantClasses2[variant],
         animationClasses[animation],
         className
       ),
@@ -5475,7 +5511,7 @@ var Section = import_react13.default.forwardRef(
     gradientDirection = "to-br",
     ...props
   }, ref) => {
-    const variantClasses = {
+    const variantClasses2 = {
       default: "bg-background",
       muted: "bg-muted/30",
       primary: "bg-primary/5",
@@ -5491,7 +5527,7 @@ var Section = import_react13.default.forwardRef(
       {
         ref,
         className: cn(
-          variant === "gradient" ? getGradientClasses() : variantClasses[variant],
+          variant === "gradient" ? getGradientClasses() : variantClasses2[variant],
           spacingClasses[spacing],
           paddingXClasses[paddingX],
           outlined && "rounded-lg border border-border/60",
@@ -5510,9 +5546,43 @@ var Section_default = Section;
 // ../../components/ui/ScrollArea.tsx
 var import_react14 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var ScrollArea = (0, import_react14.forwardRef)(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: cn("relative overflow-hidden bg-background", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport"), children }) });
-});
+var variantClasses = {
+  default: "bg-background",
+  muted: "bg-muted/30",
+  primary: "bg-primary/5",
+  accent: "bg-accent/10"
+};
+var spacingClasses2 = {
+  none: "",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+};
+var ScrollArea = (0, import_react14.forwardRef)(
+  ({ className, contentClassName, children, variant = "default", spacing = "none", fullWidth = true, outlined = false, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("relative overflow-hidden", variantClasses[variant], outlined && "rounded-lg border border-border/60", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "div",
+          {
+            className: cn(
+              "h-full w-full overflow-y-auto scroll-area-viewport",
+              spacingClasses2[spacing],
+              !fullWidth && "container mx-auto px-4 md:px-6",
+              contentClassName
+            ),
+            children
+          }
+        )
+      }
+    );
+  }
+);
 ScrollArea.displayName = "ScrollArea";
 
 // ../../components/ui/DatePicker.tsx
@@ -9191,7 +9261,7 @@ var ListRoot = React33.forwardRef(
     const Comp = ordered ? "ol" : as;
     const childCount = React33.Children.count(children);
     const hasChildren = childCount > 0;
-    const variantClasses = {
+    const variantClasses2 = {
       plain: "",
       outlined: "rounded-lg md:rounded-xl bg-card text-card-foreground border border-border shadow-sm",
       soft: "rounded-lg bg-muted/40 border border-border/60",
@@ -9201,10 +9271,10 @@ var ListRoot = React33.forwardRef(
       striped: "rounded-lg border border-border overflow-hidden"
     };
     if (loading2) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", divided && "divide-y divide-border/60", className), ...rest, children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ListItemSkeleton, { size }, i)) });
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { ref, className: cn("group/list", variantClasses2[variant], inset && "p-1.5 md:p-2", divided && "divide-y divide-border/60", className), ...rest, children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ListItemSkeleton, { size }, i)) });
     }
     if (!hasChildren && emptyText) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { ref, className: cn("group/list", variantClasses2[variant], inset && "p-1.5 md:p-2", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Comp,
@@ -9212,7 +9282,7 @@ var ListRoot = React33.forwardRef(
         ref,
         className: cn(
           "group/list",
-          variantClasses[variant],
+          variantClasses2[variant],
           inset && "p-1.5 md:p-2",
           divided && "divide-y divide-border/60",
           variant === "striped" && "[&>*:nth-child(even)]:bg-muted/30",
@@ -9779,7 +9849,7 @@ var TimelineItem = React35.forwardRef(
       }
     };
     const padding = ctx.dense ? sz.densePadY : sz.padY;
-    const variantClasses = {
+    const variantClasses2 = {
       default: "",
       outlined: "rounded-lg border border-border bg-card shadow-sm px-4 py-3",
       card: "rounded-xl border border-border bg-card shadow-md px-5 py-4",
@@ -9787,7 +9857,7 @@ var TimelineItem = React35.forwardRef(
       modern: "rounded-lg bg-linear-to-r from-card to-muted/20 border border-border/50 px-5 py-4 backdrop-blur-sm",
       gradient: "rounded-xl bg-linear-to-br from-primary/10 via-card to-accent/10 border border-primary/20 px-5 py-4 shadow-lg"
     };
-    const contentBox = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("min-w-0 flex-1", variantClasses[ctx.variant]), children: [
+    const contentBox = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("min-w-0 flex-1", variantClasses2[ctx.variant]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex-1 min-w-0", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [