@underverse-ui/underverse 0.2.52 → 0.2.54

package/dist/index.cjs

@@ -5552,33 +5552,15 @@ var variantClasses = {
   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) => {
+  ({ className, contentClassName, children, variant = "default", 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
-          }
-        )
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
     );
   }
@@ -9219,10 +9201,10 @@ var React33 = __toESM(require("react"), 1);
 var import_lucide_react22 = require("lucide-react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var SIZE_STYLES2 = {
-  xs: { itemPad: "px-2 py-1.5", densePad: "px-2 py-1", label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
-  sm: { itemPad: "px-3 py-2", densePad: "px-3 py-1.5", label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
-  md: { itemPad: "px-4 py-2.5", densePad: "px-4 py-2", label: "text-sm", desc: "text-xs", icon: "h-5 w-5", avatar: "h-10 w-10" },
-  lg: { itemPad: "px-5 py-3", densePad: "px-5 py-2.5", label: "text-base", desc: "text-sm", icon: "h-5 w-5", avatar: "h-12 w-12" }
+  xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
+  sm: { label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
+  md: { label: "text-sm", desc: "text-xs", icon: "h-5 w-5", avatar: "h-10 w-10" },
+  lg: { label: "text-base", desc: "text-sm", icon: "h-5 w-5", avatar: "h-12 w-12" }
 };
 var BADGE_VARIANTS = {
   default: "bg-muted text-muted-foreground",
@@ -9233,7 +9215,7 @@ var BADGE_VARIANTS = {
 };
 var ListItemSkeleton = ({ size }) => {
   const sz = SIZE_STYLES2[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex items-center gap-3 animate-pulse", sz.itemPad), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex items-center gap-3 animate-pulse p-2"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("rounded-full bg-muted shrink-0", sz.avatar) }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex-1 space-y-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-4 bg-muted rounded w-3/4" }),
@@ -9255,6 +9237,8 @@ var ListRoot = React33.forwardRef(
     emptyText,
     dense = false,
     className,
+    itemClassName,
+    // New prop
     children,
     ...rest
   }, ref) => {
@@ -9271,7 +9255,15 @@ 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", 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)) });
+      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", 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 }) });
@@ -9298,6 +9290,8 @@ var ListRoot = React33.forwardRef(
           );
           return React33.cloneElement(child, {
             className: childClass,
+            // Pass global item class to contentClassName of ListItem
+            contentClassName: cn(itemClassName, child.props?.contentClassName),
             "data-first": idx === 0 ? "true" : void 0,
             "data-last": idx === childCount - 1 ? "true" : void 0,
             "data-size": size,
@@ -9328,17 +9322,15 @@ var ListItem = React33.forwardRef(
     onExpandChange,
     expandContent,
     className,
+    contentClassName,
     children,
     ...rest
   }, ref) => {
     const [internalExpanded, setInternalExpanded] = React33.useState(false);
     const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
     const sizeAttr = rest["data-size"];
-    const denseAttr = rest["data-dense"];
-    const isDense = denseAttr === "true";
-    const resolvedSize = sizeAttr && (sizeAttr === "xs" || sizeAttr === "sm" || sizeAttr === "md" || sizeAttr === "lg") ? sizeAttr : "md";
+    const resolvedSize = sizeAttr && ["xs", "sm", "md", "lg"].includes(sizeAttr) ? sizeAttr : "md";
     const sz = SIZE_STYLES2[resolvedSize];
-    const padding = isDense ? sz.densePad : sz.itemPad;
     const toggleExpanded = () => {
       const newExpanded = !isExpanded;
       if (onExpandChange) {
@@ -9360,71 +9352,38 @@ var ListItem = React33.forwardRef(
       }
     } : {};
     const inner = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        "div",
-        {
-          className: cn("flex items-center gap-3", padding, "group/item relative"),
-          ...headerProps,
-          children: [
-            avatar && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
-            Left && !avatar && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Left, { className: cn(sz.icon) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
-                label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
-                badge && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
-              ] }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
-              children && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mt-1", children })
-            ] }),
-            action && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
-            collapsible ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              "span",
-              {
-                className: cn(
-                  "text-muted-foreground shrink-0 transition-transform cursor-pointer select-none",
-                  sz.icon,
-                  isExpanded && "rotate-90"
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react22.ChevronRight, { className: cn(sz.icon) })
-              }
-            ) : Right && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Right, { className: cn(sz.icon) }) })
-          ]
-        }
-      ),
-      collapsible && isExpanded && expandContent && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("border-t border-border/50 bg-muted/20", padding, "pt-3"), children: expandContent })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex items-center gap-3", contentClassName, "group/item relative"), ...headerProps, children: [
+        avatar && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
+        Left && !avatar && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Left, { className: cn(sz.icon) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
+          ] }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mt-1", children })
+        ] }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
+        collapsible ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "span",
+          {
+            className: cn("text-muted-foreground shrink-0 transition-transform cursor-pointer select-none", sz.icon, isExpanded && "rotate-90"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react22.ChevronRight, { className: cn(sz.icon) })
+          }
+        ) : Right && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Right, { className: cn(sz.icon) }) })
+      ] }),
+      collapsible && isExpanded && expandContent && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("border-t border-border/50 bg-muted/20", contentClassName, "pt-3"), children: expandContent })
     ] });
-    const baseCls = cn(
-      "relative w-full",
-      selected && "bg-primary/10 ring-1 ring-primary/30",
-      disabled && "opacity-60 cursor-not-allowed",
-      className
-    );
+    const baseCls = cn("relative w-full", selected && "bg-primary/10 ring-1 ring-primary/30", disabled && "opacity-60 cursor-not-allowed", className);
     if (href) {
       const A = as === "a" ? "a" : "a";
       return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(A, { ref, href, className: cn(baseCls, "block"), ...rest, children: inner });
     }
     if (as === "button" && !collapsible) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        "button",
-        {
-          ref,
-          type: "button",
-          className: cn(baseCls, "text-left block w-full"),
-          ...rest,
-          children: inner
-        }
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { ref, type: "button", className: cn(baseCls, "text-left block w-full"), ...rest, children: inner });
     }
     if (collapsible) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        "div",
-        {
-          ref,
-          className: cn(baseCls, "text-left block w-full"),
-          ...rest,
-          children: inner
-        }
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn(baseCls, "text-left block w-full"), ...rest, children: inner });
     }
     const Comp = as;
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { ref, className: baseCls, ...rest, children: inner });