@liiift-studio/mac-os9-ui 0.2.25 → 0.3.1

package/dist/index.d.ts

@@ -963,6 +963,32 @@ interface WindowProps {
      * @default false
      */
     resizable?: boolean;
+    /**
+     * Minimum width when resizing
+     * @default 200
+     */
+    minWidth?: number;
+    /**
+     * Minimum height when resizing
+     * @default 100
+     */
+    minHeight?: number;
+    /**
+     * Maximum width when resizing
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height when resizing
+     */
+    maxHeight?: number;
+    /**
+     * Callback when window is resized
+     * Only called when resizable is true
+     */
+    onResize?: (size: {
+        width: number;
+        height: number;
+    }) => void;
     /**
      * Whether the window can be dragged by its title bar
      * Window starts in normal flow and becomes absolutely positioned when dragged

package/dist/index.js

@@ -816,14 +816,24 @@ var styles$6 = {"window":"Window-module_window","window--active":"Window-module_
  * </Window>
  * ```
  */
-const Window = forwardRef(({ children, title, titleBar, active = true, width = 'auto', height = 'auto', className = '', contentClassName = '', classes, showControls = true, onClose, onMinimize, onMaximize, onMouseEnter, resizable = false, draggable = false, defaultPosition, position: controlledPosition, onPositionChange, }, ref) => {
+const Window = forwardRef(({ children, title, titleBar, active = true, width = 'auto', height = 'auto', className = '', contentClassName = '', classes, showControls = true, onClose, onMinimize, onMaximize, onMouseEnter, resizable = false, minWidth = 200, minHeight = 100, maxWidth, maxHeight, onResize, draggable = false, defaultPosition, position: controlledPosition, onPositionChange, }, ref) => {
     // Drag state management
     const [internalPosition, setInternalPosition] = useState(defaultPosition || null);
     const [isDragging, setIsDragging] = useState(false);
     const [hasBeenDragged, setHasBeenDragged] = useState(!!(defaultPosition || controlledPosition));
     const dragStartRef = useRef(null);
+    // Resize state management
+    const [internalSize, setInternalSize] = useState({
+        width,
+        height,
+    });
+    const [isResizing, setIsResizing] = useState(false);
+    const resizeStartRef = useRef(null);
     // Use controlled position if provided, otherwise use internal state
     const currentPosition = controlledPosition || internalPosition;
+    // Use internal size state for resize tracking
+    const currentWidth = isResizing ? internalSize.width : width;
+    const currentHeight = isResizing ? internalSize.height : height;
     // Handle mouse down on title bar to start dragging
     const handleTitleBarMouseDown = useCallback((event) => {
         if (!draggable)
@@ -848,6 +858,69 @@ const Window = forwardRef(({ children, title, titleBar, active = true, width = '
         };
         setIsDragging(true);
     }, [draggable]);
+    // Handle mouse down on resize handle to start resizing
+    const handleResizeMouseDown = useCallback((event) => {
+        if (!resizable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const windowElement = event.currentTarget.closest(`.${styles$6.window}`);
+        if (!windowElement)
+            return;
+        const rect = windowElement.getBoundingClientRect();
+        // Store resize start info
+        resizeStartRef.current = {
+            width: rect.width,
+            height: rect.height,
+            mouseX: event.clientX,
+            mouseY: event.clientY,
+        };
+        setIsResizing(true);
+    }, [resizable]);
+    // Handle mouse move during resize
+    useEffect(() => {
+        if (!isResizing || !resizeStartRef.current)
+            return;
+        const handleMouseMove = (event) => {
+            event.preventDefault();
+            if (!resizeStartRef.current)
+                return;
+            // Calculate delta
+            const deltaX = event.clientX - resizeStartRef.current.mouseX;
+            const deltaY = event.clientY - resizeStartRef.current.mouseY;
+            // Calculate new size
+            let newWidth = resizeStartRef.current.width + deltaX;
+            let newHeight = resizeStartRef.current.height + deltaY;
+            // Apply constraints
+            if (newWidth < minWidth)
+                newWidth = minWidth;
+            if (newHeight < minHeight)
+                newHeight = minHeight;
+            if (maxWidth && newWidth > maxWidth)
+                newWidth = maxWidth;
+            if (maxHeight && newHeight > maxHeight)
+                newHeight = maxHeight;
+            // Update size
+            setInternalSize({
+                width: newWidth,
+                height: newHeight,
+            });
+            // Call callback if provided
+            if (onResize) {
+                onResize({ width: newWidth, height: newHeight });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+            resizeStartRef.current = null;
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing, minWidth, minHeight, maxWidth, maxHeight, onResize]);
     // Handle mouse move during drag
     useEffect(() => {
         if (!isDragging || !dragStartRef.current)
@@ -905,11 +978,13 @@ const Window = forwardRef(({ children, title, titleBar, active = true, width = '
     const titleBarClassNames = mergeClasses(styles$6.titleBar, draggable && styles$6['titleBar--draggable'], isDragging && styles$6['titleBar--dragging'], classes?.titleBar);
     // Window style
     const windowStyle = {};
-    if (width !== 'auto') {
-        windowStyle.width = typeof width === 'number' ? `${width}px` : width;
+    // Apply width - use currentWidth during resize, otherwise use prop
+    if (currentWidth !== 'auto') {
+        windowStyle.width = typeof currentWidth === 'number' ? `${currentWidth}px` : currentWidth;
     }
-    if (height !== 'auto') {
-        windowStyle.height = typeof height === 'number' ? `${height}px` : height;
+    // Apply height - use currentHeight during resize, otherwise use prop
+    if (currentHeight !== 'auto') {
+        windowStyle.height = typeof currentHeight === 'number' ? `${currentHeight}px` : currentHeight;
     }
     // Apply position if draggable and has been dragged
     if (draggable && hasBeenDragged && currentPosition) {
@@ -927,7 +1002,7 @@ const Window = forwardRef(({ children, title, titleBar, active = true, width = '
         }
         return null;
     };
-    return (jsxs("div", { ref: ref, className: windowClassNames, style: windowStyle, onMouseEnter: onMouseEnter, children: [renderTitleBar(), jsx("div", { className: contentClassNames, children: children }), resizable && jsx("div", { className: styles$6.resizeHandle, "aria-hidden": "true" })] }));
+    return (jsxs("div", { ref: ref, className: windowClassNames, style: windowStyle, onMouseEnter: onMouseEnter, children: [renderTitleBar(), jsx("div", { className: contentClassNames, children: children }), resizable && (jsx("div", { className: styles$6.resizeHandle, onMouseDown: handleResizeMouseDown, "aria-hidden": "true" }))] }));
 });
 Window.displayName = 'Window';