@underverse-ui/underverse 1.0.104 → 1.0.105

package/api-reference.json

@@ -1,8 +1,8 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.104",
+  "version": "1.0.105",
   "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 }),