@underverse-ui/underverse 1.0.83 → 1.0.84

package/AGENTS.md

@@ -51,7 +51,7 @@ import { OverlayScrollbarProvider, ScrollArea, DataTable } from "@underverse-ui/
 export function App() {
   return (
     <OverlayScrollbarProvider theme="os-theme-underverse" autoHide="leave">
-      <ScrollArea className="h-56" useOverlayScrollbar />
+      <ScrollArea className="h-56 rounded-xl border border-border" useOverlayScrollbar />
       <DataTable columns={columns} data={rows} useOverlayScrollbar />
     </OverlayScrollbarProvider>
   );

package/README.md

@@ -147,7 +147,7 @@ import { OverlayScrollbarProvider, ScrollArea, DataTable } from "@underverse-ui/
 function App() {
   return (
     <OverlayScrollbarProvider theme="os-theme-underverse" autoHide="leave">
-      <ScrollArea className="h-56" useOverlayScrollbar>
+      <ScrollArea className="h-56 rounded-xl border border-border" useOverlayScrollbar>
         {/* long content */}
       </ScrollArea>
 
@@ -183,6 +183,9 @@ Provider props:
 Component-level enable flags:
 
 - `ScrollArea`: `useOverlayScrollbar?: boolean` (default `false`)
+  - `className` styles the outer wrapper
+  - `contentClassName` styles the scroll viewport
+  - set border/radius explicitly; the primitive no longer hardcodes rounded corners
 - `Table`: `useOverlayScrollbar?: boolean` (default `false`)
 - `DataTable`: `useOverlayScrollbar?: boolean` (default `false`)
 - `Combobox`: `useOverlayScrollbar?: boolean` (default `false`)

package/agent-recipes.json

@@ -26,7 +26,7 @@
     {
       "id": "overlay-scrollbar-provider",
       "title": "Enable overlay scrollbars (opt-in)",
-      "code": "import \"overlayscrollbars/overlayscrollbars.css\";\nimport { OverlayScrollbarProvider, ScrollArea } from \"@underverse-ui/underverse\";\n\nexport function App(){\n  return (\n    <OverlayScrollbarProvider theme=\"os-theme-underverse\" autoHide=\"leave\">\n      <ScrollArea className=\"h-56\" useOverlayScrollbar>{/* content */}</ScrollArea>\n    </OverlayScrollbarProvider>\n  );\n}\n"
+      "code": "import \"overlayscrollbars/overlayscrollbars.css\";\nimport { OverlayScrollbarProvider, ScrollArea } from \"@underverse-ui/underverse\";\n\nexport function App(){\n  return (\n    <OverlayScrollbarProvider theme=\"os-theme-underverse\" autoHide=\"leave\">\n      <ScrollArea className=\"h-56 rounded-xl border border-border\" useOverlayScrollbar>{/* content */}</ScrollArea>\n    </OverlayScrollbarProvider>\n  );\n}\n"
     },
     {
       "id": "overlay-scrollbar-custom-component",

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -7934,19 +7934,23 @@ var variantClasses2 = {
   accent: "bg-accent/10"
 };
 var ScrollArea = (0, import_react17.forwardRef)(
-  ({ className, contentClassName, children, variant = "default", outlined = false, useOverlayScrollbar = false, ...props }, ref) => {
+  ({
+    className,
+    contentClassName,
+    children,
+    variant = "default",
+    outlined = false,
+    overflowHidden = true,
+    useOverlayScrollbar = false,
+    ...props
+  }, ref) => {
     const viewportRef = (0, import_react17.useRef)(null);
     useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         ref,
-        className: cn(
-          "relative overflow-hidden rounded-2xl md:rounded-3xl",
-          variantClasses2[variant],
-          outlined && "border border-border/60",
-          className
-        ),
+        className: cn("relative", variantClasses2[variant], outlined && "border border-border/60", overflowHidden && "overflow-hidden", className),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: viewportRef, className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -7959,13 +7963,13 @@ ScrollArea.displayName = "ScrollArea";
 var import_react18 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var OverlayScrollArea = (0, import_react18.forwardRef)(
-  ({ className, viewportClassName, viewportProps, enabled = true, overlayScrollbarOptions, children, ...props }, ref) => {
+  ({ className, viewportClassName, viewportProps, enabled = true, overflowHidden = true, overlayScrollbarOptions, children, ...props }, ref) => {
     const viewportRef = (0, import_react18.useRef)(null);
     useOverlayScrollbarTarget(viewportRef, {
       enabled,
       ...overlayScrollbarOptions
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: cn("relative overflow-hidden", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: cn("relative", overflowHidden && "overflow-hidden", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         ref: viewportRef,
@@ -18962,6 +18966,7 @@ var ListRoot = React46.forwardRef(
     className,
     itemClassName,
     // New prop
+    overflowHidden = true,
     children,
     ...rest
   }, ref) => {
@@ -18975,21 +18980,36 @@ var ListRoot = React46.forwardRef(
       bordered: "border border-border/50 rounded-2xl md:rounded-3xl max-md:rounded-xl",
       card: "rounded-2xl md:rounded-3xl bg-card shadow-md border border-border/50 max-md:rounded-xl max-md:shadow-sm",
       flush: "",
-      striped: "rounded-2xl md:rounded-3xl border border-border/50 overflow-hidden max-md:rounded-xl"
+      striped: "rounded-2xl md:rounded-3xl border border-border/50 max-md:rounded-xl"
     };
     if (loading2) {
       return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Comp,
         {
           ref,
-          className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", divided && "divide-y divide-border/60", className),
+          className: cn(
+            "group/list",
+            variantClasses3[variant],
+            variant === "striped" && overflowHidden && "overflow-hidden",
+            inset && "p-1.5 md:p-2 max-md:p-1",
+            divided && "divide-y divide-border/60",
+            className
+          ),
           ...rest,
           children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ListItemSkeleton, { size }, i))
         }
       );
     }
     if (!hasChildren && emptyText) {
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Comp, { ref, className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        Comp,
+        {
+          ref,
+          className: cn("group/list", variantClasses3[variant], variant === "striped" && overflowHidden && "overflow-hidden", inset && "p-1.5 md:p-2 max-md:p-1", className),
+          ...rest,
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText })
+        }
+      );
     }
     return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Comp,
@@ -18998,6 +19018,7 @@ var ListRoot = React46.forwardRef(
         className: cn(
           "group/list",
           variantClasses3[variant],
+          variant === "striped" && overflowHidden && "overflow-hidden",
           inset && "p-1.5 md:p-2 max-md:p-1",
           divided && "divide-y divide-border/60",
           variant === "striped" && "[&>*:nth-child(even)]:bg-muted/30",
@@ -22092,6 +22113,7 @@ function DataTable({
   storageKey,
   stickyHeader = true,
   maxHeight = 500,
+  overflowHidden = true,
   useOverlayScrollbar = false,
   enableHeaderAutoFit = true,
   labels
@@ -22225,7 +22247,8 @@ function DataTable({
       "div",
       {
         className: cn(
-          "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card overflow-hidden",
+          "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card",
+          overflowHidden && "overflow-hidden",
           loading2 && "opacity-60 pointer-events-none"
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(