@underverse-ui/underverse 1.0.104 → 1.0.106

package/api-reference.json

@@ -1,8 +1,8 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.104",
+  "version": "1.0.106",
   "sourceEntry": "src/index.ts",
-  "totalExports": 225,
+  "totalExports": 230,
   "exports": [
     {
       "name": "*",
@@ -100,6 +100,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "BottomSheetProps",
+      "kind": "type",
+      "source": "./components/Sheet",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "Breadcrumb",
       "kind": "value",
@@ -536,6 +543,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "DrawerProps",
+      "kind": "type",
+      "source": "./components/Sheet",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "DropdownMenu",
       "kind": "value",
@@ -1101,6 +1115,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "SheetProps",
+      "kind": "type",
+      "source": "./components/Sheet",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "SidebarSheet",
       "kind": "value",
@@ -1108,6 +1129,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "SidebarSheetProps",
+      "kind": "type",
+      "source": "./components/Sheet",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "SimplePagination",
       "kind": "value",
@@ -1151,6 +1179,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "SlideOverProps",
+      "kind": "type",
+      "source": "./components/Sheet",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "Slider",
       "kind": "value",

package/dist/index.cjs

@@ -6267,11 +6267,21 @@ var Sheet = ({
   closeOnEscape = true,
   header,
   footer,
-  overlayOpacity
+  overlayOpacity,
+  resizable = false,
+  minSize = 280,
+  maxSize,
+  onResize
 }) => {
   const [mounted, setMounted] = React19.useState(false);
   const [isAnimating, setIsAnimating] = React19.useState(true);
   const [isVisible, setIsVisible] = React19.useState(false);
+  const [isResizing, setIsResizing] = React19.useState(false);
+  const [sheetSize, setSheetSize] = React19.useState(null);
+  const sheetRef = React19.useRef(null);
+  const resizeStateRef = React19.useRef(null);
+  const isHorizontalSheet = side === "left" || side === "right";
+  const canResize = resizable && size !== "full";
   React19.useEffect(() => {
     setMounted(true);
   }, []);
@@ -6318,6 +6328,68 @@ var Sheet = ({
   const handleClose = () => {
     onOpenChange(false);
   };
+  const clampResizeSize = React19.useCallback((nextSize) => {
+    const viewportSize = isHorizontalSheet ? window.innerWidth : window.innerHeight;
+    const resolvedMaxSize = maxSize ?? Math.round(viewportSize * 0.9);
+    return Math.min(Math.max(nextSize, minSize), resolvedMaxSize);
+  }, [isHorizontalSheet, maxSize, minSize]);
+  const endResize = React19.useCallback(() => {
+    if (!resizeStateRef.current) return;
+    resizeStateRef.current = null;
+    setIsResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const handleResizePointerMove = React19.useCallback((event) => {
+    const resizeState = resizeStateRef.current;
+    if (!resizeState || event.pointerId !== resizeState.pointerId) return;
+    const delta = isHorizontalSheet ? side === "right" ? resizeState.startClientX - event.clientX : event.clientX - resizeState.startClientX : side === "bottom" ? resizeState.startClientY - event.clientY : event.clientY - resizeState.startClientY;
+    const nextSize = clampResizeSize(Math.round(resizeState.startSize + delta));
+    setSheetSize(nextSize);
+    onResize?.(nextSize);
+  }, [clampResizeSize, isHorizontalSheet, onResize, side]);
+  const handleResizePointerUp = React19.useCallback((event) => {
+    const resizeState = resizeStateRef.current;
+    if (!resizeState || event.pointerId !== resizeState.pointerId) return;
+    endResize();
+  }, [endResize]);
+  React19.useEffect(() => {
+    if (!isResizing) return void 0;
+    window.addEventListener("pointermove", handleResizePointerMove);
+    window.addEventListener("pointerup", handleResizePointerUp);
+    window.addEventListener("pointercancel", handleResizePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handleResizePointerMove);
+      window.removeEventListener("pointerup", handleResizePointerUp);
+      window.removeEventListener("pointercancel", handleResizePointerUp);
+    };
+  }, [handleResizePointerMove, handleResizePointerUp, isResizing]);
+  React19.useEffect(() => {
+    if (!open) endResize();
+  }, [endResize, open]);
+  React19.useEffect(() => endResize, [endResize]);
+  const handleResizePointerDown = (event) => {
+    if (!canResize || !sheetRef.current) return;
+    const rect = sheetRef.current.getBoundingClientRect();
+    const startSize = isHorizontalSheet ? rect.width : rect.height;
+    resizeStateRef.current = {
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startSize
+    };
+    setIsResizing(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    document.body.style.cursor = isHorizontalSheet ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const sheetInlineStyle = {
+    transform: open && !isAnimating ? "translate(0, 0)" : side === "right" ? "translateX(100%)" : side === "left" ? "translateX(-100%)" : side === "top" ? "translateY(-100%)" : "translateY(100%)",
+    transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    ...sheetSize !== null ? isHorizontalSheet ? { width: `${sheetSize}px` } : { height: `${sheetSize}px` } : {}
+  };
   if (!mounted || !open && !isVisible) return null;
   const sheetContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fixed inset-0 z-50", children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -6335,6 +6407,7 @@ var Sheet = ({
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
+        ref: sheetRef,
         className: cn(
           "fixed flex flex-col bg-background text-foreground shadow-2xl",
           "border-border/50 transition-all duration-300 ease-out",
@@ -6349,11 +6422,28 @@ var Sheet = ({
           open && !isAnimating ? animationStyles[side].animate : animationStyles[side].initial,
           className
         ),
-        style: {
-          transform: open && !isAnimating ? "translate(0, 0)" : side === "right" ? "translateX(100%)" : side === "left" ? "translateX(-100%)" : side === "top" ? "translateY(-100%)" : "translateY(100%)",
-          transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
-        },
+        style: sheetInlineStyle,
         children: [
+          canResize && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Resize sheet",
+              className: cn(
+                "absolute z-10 bg-transparent outline-none transition-colors",
+                "after:absolute after:rounded-full after:bg-border after:opacity-0 after:transition-opacity hover:after:opacity-100 focus-visible:after:opacity-100",
+                isHorizontalSheet ? "top-0 h-full w-3 cursor-col-resize after:top-1/2 after:h-12 after:w-1 after:-translate-y-1/2" : "left-0 h-3 w-full cursor-row-resize after:left-1/2 after:h-1 after:w-12 after:-translate-x-1/2",
+                side === "right" && "-left-1.5 after:left-1/2",
+                side === "left" && "-right-1.5 after:right-1/2",
+                side === "bottom" && "-top-1.5 after:top-1/2",
+                side === "top" && "-bottom-1.5 after:bottom-1/2"
+              ),
+              onPointerDown: handleResizePointerDown,
+              onPointerMove: (event) => handleResizePointerMove(event.nativeEvent),
+              onPointerUp: (event) => handleResizePointerUp(event.nativeEvent),
+              onPointerCancel: (event) => handleResizePointerUp(event.nativeEvent)
+            }
+          ),
           (title || description || header || showClose) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "shrink-0 border-b border-border/50", children: header || /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between p-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1", children: [
               title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "text-lg font-semibold text-foreground", children: title }),
@@ -21540,6 +21630,7 @@ function DataTableHeader({
   enableHeaderAutoFit,
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
+  sortByLabel,
   t
 }) {
   const renderFilterControl = import_react30.default.useCallback(
@@ -21616,18 +21707,20 @@ function DataTableHeader({
       const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
       const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
       const columnLabel = getColumnLabel(col.title) || col.key;
+      const sortByText = sortByLabel ?? "Sort by";
+      const sortLabel = `${sortByText} ${columnLabel}`;
       const titleContent = /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
         col.sortable && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           Tooltip,
           {
             placement: "top",
-            content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-xs font-medium", children: `Sort by ${columnLabel}` }),
+            content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
             children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               "button",
               {
                 type: "button",
-                title: `Sort by ${columnLabel}`,
+                title: sortLabel,
                 className: cn(
                   "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
                   sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
@@ -21640,7 +21733,7 @@ function DataTableHeader({
                     return null;
                   });
                 },
-                "aria-label": `Sort by ${columnLabel}`,
+                "aria-label": sortLabel,
                 children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
                   /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     "path",
@@ -22747,6 +22840,7 @@ function DataTable({
                       enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
+                      sortByLabel: labels?.sortBy,
                       t
                     }
                   ) }),