@underverse-ui/underverse 0.2.53 → 0.2.54

package/dist/index.d.cts

@@ -1179,6 +1179,8 @@ interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
     emptyText?: string;
     /** Make items more compact */
     dense?: boolean;
+    /** Class name customization for all list items */
+    itemClassName?: string;
 }
 interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     as?: "li" | "div" | "a" | "button";
@@ -1209,6 +1211,8 @@ interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     onExpandChange?: (expanded: boolean) => void;
     /** Content to show when expanded */
     expandContent?: React$1.ReactNode;
+    /** Custom class for inner content container (use for padding) */
+    contentClassName?: string;
 }
 declare const ListItem: React$1.ForwardRefExoticComponent<ListItemProps & React$1.RefAttributes<HTMLLIElement>>;
 declare const List: React$1.ForwardRefExoticComponent<ListProps & React$1.RefAttributes<HTMLUListElement>> & {

package/dist/index.d.ts

@@ -1179,6 +1179,8 @@ interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
     emptyText?: string;
     /** Make items more compact */
     dense?: boolean;
+    /** Class name customization for all list items */
+    itemClassName?: string;
 }
 interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     as?: "li" | "div" | "a" | "button";
@@ -1209,6 +1211,8 @@ interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     onExpandChange?: (expanded: boolean) => void;
     /** Content to show when expanded */
     expandContent?: React$1.ReactNode;
+    /** Custom class for inner content container (use for padding) */
+    contentClassName?: string;
 }
 declare const ListItem: React$1.ForwardRefExoticComponent<ListItemProps & React$1.RefAttributes<HTMLLIElement>>;
 declare const List: React$1.ForwardRefExoticComponent<ListProps & React$1.RefAttributes<HTMLUListElement>> & {

package/dist/index.js

@@ -9029,10 +9029,10 @@ import * as React33 from "react";
 import { ChevronRight as ChevronRight7 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx40, jsxs as jsxs35 } from "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",
@@ -9043,7 +9043,7 @@ var BADGE_VARIANTS = {
 };
 var ListItemSkeleton = ({ size }) => {
   const sz = SIZE_STYLES2[size];
-  return /* @__PURE__ */ jsxs35("div", { className: cn("flex items-center gap-3 animate-pulse", sz.itemPad), children: [
+  return /* @__PURE__ */ jsxs35("div", { className: cn("flex items-center gap-3 animate-pulse p-2"), children: [
     /* @__PURE__ */ jsx40("div", { className: cn("rounded-full bg-muted shrink-0", sz.avatar) }),
     /* @__PURE__ */ jsxs35("div", { className: "flex-1 space-y-2", children: [
       /* @__PURE__ */ jsx40("div", { className: "h-4 bg-muted rounded w-3/4" }),
@@ -9065,6 +9065,8 @@ var ListRoot = React33.forwardRef(
     emptyText,
     dense = false,
     className,
+    itemClassName,
+    // New prop
     children,
     ...rest
   }, ref) => {
@@ -9081,7 +9083,15 @@ var ListRoot = React33.forwardRef(
       striped: "rounded-lg border border-border overflow-hidden"
     };
     if (loading2) {
-      return /* @__PURE__ */ jsx40(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__ */ jsx40(ListItemSkeleton, { size }, i)) });
+      return /* @__PURE__ */ jsx40(
+        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__ */ jsx40(ListItemSkeleton, { size }, i))
+        }
+      );
     }
     if (!hasChildren && emptyText) {
       return /* @__PURE__ */ jsx40(Comp, { ref, className: cn("group/list", variantClasses2[variant], inset && "p-1.5 md:p-2", className), ...rest, children: /* @__PURE__ */ jsx40("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
@@ -9108,6 +9118,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,
@@ -9138,17 +9150,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) {
@@ -9170,71 +9180,38 @@ var ListItem = React33.forwardRef(
       }
     } : {};
     const inner = /* @__PURE__ */ jsxs35(Fragment13, { children: [
-      /* @__PURE__ */ jsxs35(
-        "div",
-        {
-          className: cn("flex items-center gap-3", padding, "group/item relative"),
-          ...headerProps,
-          children: [
-            avatar && /* @__PURE__ */ jsx40("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx40("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
-            Left && !avatar && /* @__PURE__ */ jsx40("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx40(Left, { className: cn(sz.icon) }) }),
-            /* @__PURE__ */ jsxs35("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-                label && /* @__PURE__ */ jsx40("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
-                badge && /* @__PURE__ */ jsx40("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
-              ] }),
-              description && /* @__PURE__ */ jsx40("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
-              children && /* @__PURE__ */ jsx40("div", { className: "mt-1", children })
-            ] }),
-            action && /* @__PURE__ */ jsx40("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
-            collapsible ? /* @__PURE__ */ jsx40(
-              "span",
-              {
-                className: cn(
-                  "text-muted-foreground shrink-0 transition-transform cursor-pointer select-none",
-                  sz.icon,
-                  isExpanded && "rotate-90"
-                ),
-                children: /* @__PURE__ */ jsx40(ChevronRight7, { className: cn(sz.icon) })
-              }
-            ) : Right && /* @__PURE__ */ jsx40("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx40(Right, { className: cn(sz.icon) }) })
-          ]
-        }
-      ),
-      collapsible && isExpanded && expandContent && /* @__PURE__ */ jsx40("div", { className: cn("border-t border-border/50 bg-muted/20", padding, "pt-3"), children: expandContent })
+      /* @__PURE__ */ jsxs35("div", { className: cn("flex items-center gap-3", contentClassName, "group/item relative"), ...headerProps, children: [
+        avatar && /* @__PURE__ */ jsx40("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx40("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
+        Left && !avatar && /* @__PURE__ */ jsx40("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx40(Left, { className: cn(sz.icon) }) }),
+        /* @__PURE__ */ jsxs35("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
+            label && /* @__PURE__ */ jsx40("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
+            badge && /* @__PURE__ */ jsx40("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
+          ] }),
+          description && /* @__PURE__ */ jsx40("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
+          children && /* @__PURE__ */ jsx40("div", { className: "mt-1", children })
+        ] }),
+        action && /* @__PURE__ */ jsx40("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
+        collapsible ? /* @__PURE__ */ jsx40(
+          "span",
+          {
+            className: cn("text-muted-foreground shrink-0 transition-transform cursor-pointer select-none", sz.icon, isExpanded && "rotate-90"),
+            children: /* @__PURE__ */ jsx40(ChevronRight7, { className: cn(sz.icon) })
+          }
+        ) : Right && /* @__PURE__ */ jsx40("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx40(Right, { className: cn(sz.icon) }) })
+      ] }),
+      collapsible && isExpanded && expandContent && /* @__PURE__ */ jsx40("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__ */ jsx40(A, { ref, href, className: cn(baseCls, "block"), ...rest, children: inner });
     }
     if (as === "button" && !collapsible) {
-      return /* @__PURE__ */ jsx40(
-        "button",
-        {
-          ref,
-          type: "button",
-          className: cn(baseCls, "text-left block w-full"),
-          ...rest,
-          children: inner
-        }
-      );
+      return /* @__PURE__ */ jsx40("button", { ref, type: "button", className: cn(baseCls, "text-left block w-full"), ...rest, children: inner });
     }
     if (collapsible) {
-      return /* @__PURE__ */ jsx40(
-        "div",
-        {
-          ref,
-          className: cn(baseCls, "text-left block w-full"),
-          ...rest,
-          children: inner
-        }
-      );
+      return /* @__PURE__ */ jsx40("div", { ref, className: cn(baseCls, "text-left block w-full"), ...rest, children: inner });
     }
     const Comp = as;
     return /* @__PURE__ */ jsx40(Comp, { ref, className: baseCls, ...rest, children: inner });