@underverse-ui/underverse 1.0.83 → 1.0.85

package/dist/index.d.cts

@@ -448,6 +448,7 @@ interface Toast {
         onClick: () => void;
     };
     dismissible?: boolean;
+    overflowHidden?: boolean;
 }
 interface ToastContextType {
     addToast: (toast: Omit<Toast, "id">) => void;
@@ -542,8 +543,9 @@ interface AlertProps {
     onClose?: () => void;
     actions?: ReactNode;
     closeAriaLabel?: string;
+    overflowHidden?: boolean;
 }
-declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel }: AlertProps) => react_jsx_runtime.JSX.Element | null;
+declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel, overflowHidden, }: AlertProps) => react_jsx_runtime.JSX.Element | null;
 
 interface GlobalLoadingProps {
     className?: string;
@@ -765,6 +767,7 @@ interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     contentClassName?: string;
     variant?: "default" | "muted" | "primary" | "accent";
     outlined?: boolean;
+    overflowHidden?: boolean;
     useOverlayScrollbar?: boolean;
 }
 declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -794,6 +797,7 @@ interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivEl
     viewportClassName?: string;
     viewportProps?: React__default.HTMLAttributes<HTMLDivElement>;
     enabled?: boolean;
+    overflowHidden?: boolean;
     overlayScrollbarOptions?: Omit<UseOverlayScrollbarTargetOptions, "enabled">;
 }
 declare const OverlayScrollArea: React__default.ForwardRefExoticComponent<OverlayScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -1376,6 +1380,8 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     monthEventStyle?: "span" | "compact";
     /** Month view only (when `monthEventStyle="compact"`): max visual width (px). */
     monthEventMaxWidth?: number;
+    /** Clip overflow at the outer surface. Disable when child hover shadows or focus rings should escape the timeline card. Default: true. */
+    overflowHidden?: boolean;
     dayTimeStepMinutes?: number;
     /** Render tooltips on events (can be expensive for large datasets). Default: true. */
     enableEventTooltips?: boolean;
@@ -1466,7 +1472,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, overflowHidden, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;
@@ -1918,6 +1924,8 @@ interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
     dense?: boolean;
     /** Class name customization for all list items */
     itemClassName?: string;
+    /** Clip overflow on the outer list wrapper. Mainly relevant for striped/card-like variants. */
+    overflowHidden?: boolean;
 }
 interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     as?: "li" | "div" | "a" | "button";
@@ -2101,6 +2109,7 @@ interface MusicPlayerProps {
     autoPlay?: boolean;
     showPlaylist?: boolean;
     className?: string;
+    overflowHidden?: boolean;
 }
 declare const MusicPlayer: React__default.FC<MusicPlayerProps>;
 
@@ -2314,6 +2323,8 @@ interface DataTableProps<T> {
     stickyHeader?: boolean;
     /** Chiều cao tối đa của bảng khi bật stickyHeader (mặc định: 500px) */
     maxHeight?: number | string;
+    /** Clip overflow của outer wrapper. Tắt khi cần cho phép shadow/focus ring tràn ra ngoài. */
+    overflowHidden?: boolean;
     /** Enable OverlayScrollbars on table viewport. Default: false */
     useOverlayScrollbar?: boolean;
     /** Double-click leaf headers to auto-fit column width based on visible content. Default: true */
@@ -2321,7 +2332,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.d.ts

@@ -448,6 +448,7 @@ interface Toast {
         onClick: () => void;
     };
     dismissible?: boolean;
+    overflowHidden?: boolean;
 }
 interface ToastContextType {
     addToast: (toast: Omit<Toast, "id">) => void;
@@ -542,8 +543,9 @@ interface AlertProps {
     onClose?: () => void;
     actions?: ReactNode;
     closeAriaLabel?: string;
+    overflowHidden?: boolean;
 }
-declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel }: AlertProps) => react_jsx_runtime.JSX.Element | null;
+declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel, overflowHidden, }: AlertProps) => react_jsx_runtime.JSX.Element | null;
 
 interface GlobalLoadingProps {
     className?: string;
@@ -765,6 +767,7 @@ interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     contentClassName?: string;
     variant?: "default" | "muted" | "primary" | "accent";
     outlined?: boolean;
+    overflowHidden?: boolean;
     useOverlayScrollbar?: boolean;
 }
 declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -794,6 +797,7 @@ interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivEl
     viewportClassName?: string;
     viewportProps?: React__default.HTMLAttributes<HTMLDivElement>;
     enabled?: boolean;
+    overflowHidden?: boolean;
     overlayScrollbarOptions?: Omit<UseOverlayScrollbarTargetOptions, "enabled">;
 }
 declare const OverlayScrollArea: React__default.ForwardRefExoticComponent<OverlayScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -1376,6 +1380,8 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     monthEventStyle?: "span" | "compact";
     /** Month view only (when `monthEventStyle="compact"`): max visual width (px). */
     monthEventMaxWidth?: number;
+    /** Clip overflow at the outer surface. Disable when child hover shadows or focus rings should escape the timeline card. Default: true. */
+    overflowHidden?: boolean;
     dayTimeStepMinutes?: number;
     /** Render tooltips on events (can be expensive for large datasets). Default: true. */
     enableEventTooltips?: boolean;
@@ -1466,7 +1472,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, overflowHidden, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;
@@ -1918,6 +1924,8 @@ interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
     dense?: boolean;
     /** Class name customization for all list items */
     itemClassName?: string;
+    /** Clip overflow on the outer list wrapper. Mainly relevant for striped/card-like variants. */
+    overflowHidden?: boolean;
 }
 interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     as?: "li" | "div" | "a" | "button";
@@ -2101,6 +2109,7 @@ interface MusicPlayerProps {
     autoPlay?: boolean;
     showPlaylist?: boolean;
     className?: string;
+    overflowHidden?: boolean;
 }
 declare const MusicPlayer: React__default.FC<MusicPlayerProps>;
 
@@ -2314,6 +2323,8 @@ interface DataTableProps<T> {
     stickyHeader?: boolean;
     /** Chiều cao tối đa của bảng khi bật stickyHeader (mặc định: 500px) */
     maxHeight?: number | string;
+    /** Clip overflow của outer wrapper. Tắt khi cần cho phép shadow/focus ring tràn ra ngoài. */
+    overflowHidden?: boolean;
     /** Enable OverlayScrollbars on table viewport. Default: false */
     useOverlayScrollbar?: boolean;
     /** Double-click leaf headers to auto-fit column width based on visible content. Default: true */
@@ -2321,7 +2332,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.js

@@ -5308,9 +5308,10 @@ var ToastComponent = ({ toast, onRemove }) => {
     "div",
     {
       className: cn(
-        "relative w-80 rounded-xl border backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
+        "relative w-80 rounded-xl border backdrop-blur-md transition-all duration-300 pointer-events-auto",
         "bg-card shadow-xl",
         "animate-in slide-in-from-right-full",
+        toast.overflowHidden !== false && "overflow-hidden",
         config.containerClassName,
         isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
       ),
@@ -6156,7 +6157,18 @@ var variantConfig = {
     accentBarClassName: "bg-destructive"
   }
 };
-var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions, closeAriaLabel }) => {
+var Alert = ({
+  title,
+  description,
+  variant = "default",
+  className,
+  icon,
+  dismissible = false,
+  onClose,
+  actions,
+  closeAriaLabel,
+  overflowHidden = true
+}) => {
   const [open, setOpen] = useState12(true);
   const t = useSmartTranslations("Common");
   if (!open) return null;
@@ -6170,9 +6182,10 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
     "div",
     {
       className: cn(
-        "relative w-full rounded-r-xl border border-l-0 overflow-hidden",
+        "relative w-full rounded-r-xl border border-l-0",
         "flex items-start gap-3 p-4 pl-5",
         "backdrop-blur-md",
+        overflowHidden && "overflow-hidden",
         config.containerClassName,
         className
       ),
@@ -7749,19 +7762,23 @@ var variantClasses2 = {
   accent: "bg-accent/10"
 };
 var ScrollArea = forwardRef6(
-  ({ 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 = useRef11(null);
     useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
     return /* @__PURE__ */ jsx32(
       "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__ */ jsx32("div", { ref: viewportRef, className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -7774,13 +7791,13 @@ ScrollArea.displayName = "ScrollArea";
 import { forwardRef as forwardRef7, useRef as useRef12 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var OverlayScrollArea = forwardRef7(
-  ({ className, viewportClassName, viewportProps, enabled = true, overlayScrollbarOptions, children, ...props }, ref) => {
+  ({ className, viewportClassName, viewportProps, enabled = true, overflowHidden = true, overlayScrollbarOptions, children, ...props }, ref) => {
     const viewportRef = useRef12(null);
     useOverlayScrollbarTarget(viewportRef, {
       enabled,
       ...overlayScrollbarOptions
     });
-    return /* @__PURE__ */ jsx33("div", { ref, className: cn("relative overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx33("div", { ref, className: cn("relative", overflowHidden && "overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx33(
       "div",
       {
         ref: viewportRef,
@@ -13548,6 +13565,7 @@ function CalendarTimeline({
   dayEventMaxWidth,
   monthEventStyle = "span",
   monthEventMaxWidth,
+  overflowHidden = true,
   dayTimeStepMinutes = 60,
   enableEventTooltips = true,
   dayHeaderMode = "full",
@@ -14610,9 +14628,10 @@ function CalendarTimeline({
     "div",
     {
       className: cn(
-        "rounded-2xl md:rounded-3xl overflow-hidden bg-card text-card-foreground backdrop-blur-sm",
+        "rounded-2xl md:rounded-3xl bg-card text-card-foreground backdrop-blur-sm",
         "border border-border/50 shadow-sm md:hover:shadow-md",
         "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
+        overflowHidden && "overflow-hidden",
         densityClass,
         className
       ),
@@ -18793,6 +18812,7 @@ var ListRoot = React46.forwardRef(
     className,
     itemClassName,
     // New prop
+    overflowHidden = true,
     children,
     ...rest
   }, ref) => {
@@ -18806,21 +18826,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__ */ jsx54(
         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__ */ jsx54(ListItemSkeleton, { size }, i))
         }
       );
     }
     if (!hasChildren && emptyText) {
-      return /* @__PURE__ */ jsx54(Comp, { ref, className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", className), ...rest, children: /* @__PURE__ */ jsx54("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+      return /* @__PURE__ */ jsx54(
+        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__ */ jsx54("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText })
+        }
+      );
     }
     return /* @__PURE__ */ jsx54(
       Comp,
@@ -18829,6 +18864,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",
@@ -20159,7 +20195,8 @@ var MusicPlayer = ({
   playlist = DEFAULT_PLAYLIST,
   autoPlay = false,
   showPlaylist: initialShowPlaylist = true,
-  className = ""
+  className = "",
+  overflowHidden = true
 }) => {
   const [currentSongIndex, setCurrentSongIndex] = useState38(0);
   const [isPlaying, setIsPlaying] = useState38(false);
@@ -20261,108 +20298,116 @@ var MusicPlayer = ({
       }
     }
   }, [currentSongIndex, currentSong.startTime, isPlaying]);
-  return /* @__PURE__ */ jsxs48("div", { className: `underverse-music-player bg-card dark:bg-card border border-border/50 rounded-2xl shadow-2xl overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsx58("audio", { ref: audioRef, src: currentSong.audioUrl, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: playNext }),
-    /* @__PURE__ */ jsxs48("div", { className: "p-6", children: [
-      /* @__PURE__ */ jsxs48("div", { className: "text-center mb-6", children: [
-        /* @__PURE__ */ jsx58("div", { className: "w-48 h-48 mx-auto mb-4 bg-primary/10 dark:bg-primary/20 border border-primary/30 rounded-2xl shadow-lg flex items-center justify-center", children: /* @__PURE__ */ jsx58("div", { className: "text-6xl", children: "\u{1F3B5}" }) }),
-        /* @__PURE__ */ jsx58("h2", { className: "text-2xl font-bold text-foreground mb-1", children: currentSong.title }),
-        currentSong.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground", children: currentSong.artist })
-      ] }),
-      /* @__PURE__ */ jsxs48("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsx58(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: duration || 0,
-            value: currentTime,
-            onChange: handleSeek,
-            className: "w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider"
-          }
-        ),
-        /* @__PURE__ */ jsxs48("div", { className: "flex justify-between text-sm text-muted-foreground mt-1", children: [
-          /* @__PURE__ */ jsx58("span", { children: formatTime3(currentTime) }),
-          /* @__PURE__ */ jsx58("span", { children: formatTime3(duration) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-center gap-4 mb-6", children: [
-        /* @__PURE__ */ jsx58(
-          "button",
-          {
-            onClick: playPrevious,
-            className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
-            children: /* @__PURE__ */ jsx58(SkipBack, { size: 24 })
-          }
-        ),
-        /* @__PURE__ */ jsx58(
-          "button",
-          {
-            onClick: togglePlay,
-            className: "w-16 h-16 flex items-center justify-center rounded-full bg-primary hover:bg-primary/90 transition-colors text-primary-foreground shadow-lg",
-            children: isPlaying ? /* @__PURE__ */ jsx58(Pause2, { size: 32 }) : /* @__PURE__ */ jsx58(Play2, { size: 32, className: "ml-1" })
-          }
-        ),
-        /* @__PURE__ */ jsx58(
-          "button",
-          {
-            onClick: playNext,
-            className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
-            children: /* @__PURE__ */ jsx58(SkipForward, { size: 24 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-3 mb-4", children: [
-        /* @__PURE__ */ jsx58("button", { onClick: toggleMute, className: "text-foreground hover:text-primary transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ jsx58(VolumeX2, { size: 20 }) : /* @__PURE__ */ jsx58(Volume22, { size: 20 }) }),
-        /* @__PURE__ */ jsx58(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: "1",
-            step: "0.01",
-            value: volume,
-            onChange: handleVolumeChange,
-            className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx58("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs48(
-        "button",
-        {
-          onClick: () => setShowPlaylist(!showPlaylist),
-          className: "flex items-center gap-2 px-4 py-2 bg-secondary hover:bg-secondary/80 rounded-lg text-secondary-foreground transition-colors",
-          children: [
-            showPlaylist ? /* @__PURE__ */ jsx58(X17, { size: 20 }) : /* @__PURE__ */ jsx58(List2, { size: 20 }),
-            /* @__PURE__ */ jsx58("span", { children: showPlaylist ? "Hide Playlist" : "Show Playlist" })
-          ]
-        }
-      ) })
-    ] }),
-    showPlaylist && /* @__PURE__ */ jsx58("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border/50", children: /* @__PURE__ */ jsxs48("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsxs48("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
-        "Playlist (",
-        playlist.length,
-        " songs)"
-      ] }),
-      /* @__PURE__ */ jsx58("div", { className: "space-y-2", children: playlist.map((song, index) => /* @__PURE__ */ jsxs48(
-        "div",
-        {
-          onClick: () => playSong(index),
-          className: `flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${index === currentSongIndex ? "bg-primary/20 border border-primary shadow-lg" : "bg-secondary/30 hover:bg-secondary/50"}`,
-          children: [
-            /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-semibold", children: index === currentSongIndex && isPlaying ? "\u25B6" : index + 1 }),
-            /* @__PURE__ */ jsxs48("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx58("p", { className: "text-foreground font-medium truncate", children: song.title }),
-              song.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground text-sm truncate", children: song.artist })
-            ] }),
-            /* @__PURE__ */ jsx58("div", { className: "text-muted-foreground text-sm shrink-0", children: song.duration })
-          ]
-        },
-        song.id
-      )) })
-    ] }) }),
-    /* @__PURE__ */ jsx58("style", { children: `
+  return /* @__PURE__ */ jsxs48(
+    "div",
+    {
+      className: [
+        "underverse-music-player bg-card dark:bg-card border border-border/50 rounded-2xl shadow-2xl",
+        overflowHidden ? "overflow-hidden" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx58("audio", { ref: audioRef, src: currentSong.audioUrl, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: playNext }),
+        /* @__PURE__ */ jsxs48("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsxs48("div", { className: "text-center mb-6", children: [
+            /* @__PURE__ */ jsx58("div", { className: "w-48 h-48 mx-auto mb-4 bg-primary/10 dark:bg-primary/20 border border-primary/30 rounded-2xl shadow-lg flex items-center justify-center", children: /* @__PURE__ */ jsx58("div", { className: "text-6xl", children: "\u{1F3B5}" }) }),
+            /* @__PURE__ */ jsx58("h2", { className: "text-2xl font-bold text-foreground mb-1", children: currentSong.title }),
+            currentSong.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground", children: currentSong.artist })
+          ] }),
+          /* @__PURE__ */ jsxs48("div", { className: "mb-4", children: [
+            /* @__PURE__ */ jsx58(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: duration || 0,
+                value: currentTime,
+                onChange: handleSeek,
+                className: "w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider"
+              }
+            ),
+            /* @__PURE__ */ jsxs48("div", { className: "flex justify-between text-sm text-muted-foreground mt-1", children: [
+              /* @__PURE__ */ jsx58("span", { children: formatTime3(currentTime) }),
+              /* @__PURE__ */ jsx58("span", { children: formatTime3(duration) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-center gap-4 mb-6", children: [
+            /* @__PURE__ */ jsx58(
+              "button",
+              {
+                onClick: playPrevious,
+                className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
+                children: /* @__PURE__ */ jsx58(SkipBack, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ jsx58(
+              "button",
+              {
+                onClick: togglePlay,
+                className: "w-16 h-16 flex items-center justify-center rounded-full bg-primary hover:bg-primary/90 transition-colors text-primary-foreground shadow-lg",
+                children: isPlaying ? /* @__PURE__ */ jsx58(Pause2, { size: 32 }) : /* @__PURE__ */ jsx58(Play2, { size: 32, className: "ml-1" })
+              }
+            ),
+            /* @__PURE__ */ jsx58(
+              "button",
+              {
+                onClick: playNext,
+                className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
+                children: /* @__PURE__ */ jsx58(SkipForward, { size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-3 mb-4", children: [
+            /* @__PURE__ */ jsx58("button", { onClick: toggleMute, className: "text-foreground hover:text-primary transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ jsx58(VolumeX2, { size: 20 }) : /* @__PURE__ */ jsx58(Volume22, { size: 20 }) }),
+            /* @__PURE__ */ jsx58(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: "1",
+                step: "0.01",
+                value: volume,
+                onChange: handleVolumeChange,
+                className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx58("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs48(
+            "button",
+            {
+              onClick: () => setShowPlaylist(!showPlaylist),
+              className: "flex items-center gap-2 px-4 py-2 bg-secondary hover:bg-secondary/80 rounded-lg text-secondary-foreground transition-colors",
+              children: [
+                showPlaylist ? /* @__PURE__ */ jsx58(X17, { size: 20 }) : /* @__PURE__ */ jsx58(List2, { size: 20 }),
+                /* @__PURE__ */ jsx58("span", { children: showPlaylist ? "Hide Playlist" : "Show Playlist" })
+              ]
+            }
+          ) })
+        ] }),
+        showPlaylist && /* @__PURE__ */ jsx58("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border/50", children: /* @__PURE__ */ jsxs48("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxs48("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
+            "Playlist (",
+            playlist.length,
+            " songs)"
+          ] }),
+          /* @__PURE__ */ jsx58("div", { className: "space-y-2", children: playlist.map((song, index) => /* @__PURE__ */ jsxs48(
+            "div",
+            {
+              onClick: () => playSong(index),
+              className: `flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${index === currentSongIndex ? "bg-primary/20 border border-primary shadow-lg" : "bg-secondary/30 hover:bg-secondary/50"}`,
+              children: [
+                /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-semibold", children: index === currentSongIndex && isPlaying ? "\u25B6" : index + 1 }),
+                /* @__PURE__ */ jsxs48("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx58("p", { className: "text-foreground font-medium truncate", children: song.title }),
+                  song.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground text-sm truncate", children: song.artist })
+                ] }),
+                /* @__PURE__ */ jsx58("div", { className: "text-muted-foreground text-sm shrink-0", children: song.duration })
+              ]
+            },
+            song.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx58("style", { children: `
         .underverse-music-player input[type="range"]::-webkit-slider-thumb {
           -webkit-appearance: none;
           appearance: none;
@@ -20388,7 +20433,9 @@ var MusicPlayer = ({
           background: linear-gradient(to right, hsl(var(--primary)) var(--progress, 0%), hsl(var(--muted)) var(--progress, 0%));
         }
       ` })
-  ] });
+      ]
+    }
+  );
 };
 var MusicPlayer_default = MusicPlayer;
 
@@ -21923,6 +21970,7 @@ function DataTable({
   storageKey,
   stickyHeader = true,
   maxHeight = 500,
+  overflowHidden = true,
   useOverlayScrollbar = false,
   enableHeaderAutoFit = true,
   labels
@@ -22056,7 +22104,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__ */ jsx67(