@gfazioli/mantine-window 0.5.1

package/dist/types/Window.d.ts

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Factory, StylesApiProps, type BoxProps, type MantineColor, type MantineRadius, type MantineShadow } from '@mantine/core';
+export type WindowStylesNames = 'root' | 'container' | 'content' | 'header' | 'title' | 'closeButton' | 'collapseButton' | 'windowToolsButton' | 'resizeHandleTopLeft' | 'resizeHandleTop' | 'resizeHandleTopRight' | 'resizeHandleRight' | 'resizeHandleBottomRight' | 'resizeHandleBottom' | 'resizeHandleBottomLeft' | 'resizeHandleLeft';
+export type WindowCssVariables = {
+    root: '--window-background' | '--window-radius';
+    container: never;
+    content: never;
+    header: never;
+    title: never;
+    closeButton: never;
+    collapseButton: never;
+    windowToolsButton: never;
+    resizeHandleTopLeft: never;
+    resizeHandleTop: never;
+    resizeHandleTopRight: never;
+    resizeHandleRight: never;
+    resizeHandleBottomRight: never;
+    resizeHandleBottom: never;
+    resizeHandleBottomLeft: never;
+    resizeHandleLeft: never;
+};
+export type ResizableMode = 'none' | 'vertical' | 'horizontal' | 'both';
+export type DraggableMode = 'none' | 'window' | 'header' | 'both';
+export interface WindowBounds {
+    /** Minimum x coordinate (left boundary) */
+    minX?: number;
+    /** Maximum x coordinate (right boundary) */
+    maxX?: number;
+    /** Minimum y coordinate (top boundary) */
+    minY?: number;
+    /** Maximum y coordinate (bottom boundary) */
+    maxY?: number;
+}
+export interface WindowSize {
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+}
+export interface WindowPosition {
+    /** X coordinate in pixels */
+    x: number;
+    /** Y coordinate in pixels */
+    y: number;
+}
+export interface WindowBaseProps {
+    /** Whether the window is opened for controlled usage */
+    opened?: boolean;
+    /** Color of the window */
+    color?: MantineColor;
+    /** Unique id of the window. Used to store window position and size. If not provided, the title is used */
+    id?: string;
+    /** Title of the window. Used as a fallback id if no id is provided */
+    title?: string;
+    /** Radius of the window */
+    radius?: MantineRadius | number;
+    /** Whether the window has a border */
+    withBorder?: boolean;
+    /** Shadow of the window */
+    shadow?: MantineShadow;
+    /** Resizable mode of the window */
+    resizable?: ResizableMode;
+    /** Draggable mode of the window */
+    draggable?: DraggableMode;
+    /** Whether the window is initially collapsed */
+    collapsed?: boolean;
+    /** Whether the window has a collapse button */
+    withCollapseButton?: boolean;
+    /** Whether the window is collapsable */
+    collapsable?: boolean;
+    /** Whether the window has a close button */
+    withCloseButton?: boolean;
+    /** Called when the window is closed */
+    onClose?: () => void;
+    /** Initial position of the window. If not provided, defaults to { x: 20, y: 100 } */
+    defaultPosition?: WindowPosition;
+    /** Initial size of the window. If not provided, defaults to { width: 400, height: 400 } */
+    defaultSize?: WindowSize;
+    /** Minimum width in pixels during resize. Default: 250 */
+    minWidth?: number;
+    /** Minimum height in pixels during resize. Default: 100 */
+    minHeight?: number;
+    /** Maximum width in pixels during resize. If not provided, no maximum limit */
+    maxWidth?: number;
+    /** Maximum height in pixels during resize. If not provided, no maximum limit */
+    maxHeight?: number;
+    /** Boundaries for dragging the window. If not provided, window can be dragged anywhere within viewport */
+    dragBounds?: WindowBounds;
+    /** Whether to persist position and size in localStorage. You have to set the `id` or `title` prop for persistence to work. Default: false */
+    persistState?: boolean;
+    /** If true, window is positioned relative to the viewport. If false, positioned relative to parent container. Default: true */
+    withinPortal?: boolean;
+    /** Called when the window is moved */
+    onPositionChange?: (position: WindowPosition) => void;
+    /** Called when the window is resized */
+    onSizeChange?: (size: WindowSize) => void;
+    /** Window content */
+    children?: React.ReactNode;
+}
+export interface WindowProps extends BoxProps, WindowBaseProps, StylesApiProps<WindowFactory> {
+}
+export type WindowFactory = Factory<{
+    props: WindowProps;
+    ref: HTMLDivElement;
+    stylesNames: WindowStylesNames;
+    vars: WindowCssVariables;
+}>;
+export declare const defaultProps: Partial<WindowProps>;
+export declare const Window: import("@mantine/core").MantineComponent<{
+    props: WindowProps;
+    ref: HTMLDivElement;
+    stylesNames: WindowStylesNames;
+    vars: WindowCssVariables;
+}>;

package/dist/types/hooks/use-mantine-window.d.ts

@@ -0,0 +1,22 @@
+import type { WindowBaseProps, WindowPosition, WindowSize } from '../Window';
+export declare function useMantineWindow(props: WindowBaseProps): {
+    readonly isCollapsed: boolean;
+    readonly setIsCollapsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    readonly isVisible: boolean;
+    readonly setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    readonly zIndex: number;
+    readonly position: WindowPosition;
+    readonly size: WindowSize;
+    readonly windowRef: import("react").RefObject<HTMLDivElement>;
+    readonly handleMouseDownDrag: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeTopLeft: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeTop: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeTopRight: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeRight: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeBottomRight: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeBottom: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeBottomLeft: (e: React.MouseEvent) => void;
+    readonly handleMouseDownResizeLeft: (e: React.MouseEvent) => void;
+    readonly handleClose: () => void;
+    readonly bringToFront: () => void;
+};

package/dist/types/index.d.mts

@@ -0,0 +1,2 @@
+export { Window } from './Window';
+export type { DraggableMode, ResizableMode, WindowBaseProps, WindowBounds, WindowCssVariables, WindowFactory, WindowPosition, WindowProps, WindowSize, WindowStylesNames, } from './Window';

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { Window } from './Window';
+export type { DraggableMode, ResizableMode, WindowBaseProps, WindowBounds, WindowCssVariables, WindowFactory, WindowPosition, WindowProps, WindowSize, WindowStylesNames, } from './Window';

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@gfazioli/mantine-window",
+  "version": "0.5.1",
+  "description": "A Mantine extension component that renders draggable, resizable floating windows with persistent state, customizable boundaries, collapsible content, and flexible control over position, size, and interaction modes.",
+  "homepage": "https://gfazioli.github.io/mantine-window/",
+  "packageManager": "yarn@4.0.1",
+  "license": "MIT",
+  "author": "Giovambattista Fazioli <giovambattista.fazioli@gmail.com>",
+  "keywords": [
+    "extension",
+    "window",
+    "mantine",
+    "react",
+    "react-component",
+    "typescript"
+  ],
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./styles.layer.css": "./dist/styles.layer.css"
+  },
+  "repository": "https://github.com/gfazioli/mantine-window.git",
+  "peerDependencies": {
+    "@mantine/core": ">=7.0.0",
+    "@mantine/hooks": ">=7.0.0",
+    "@tabler/icons-react": "^3.34.0",
+    "react": "^18.x || ^19.x",
+    "react-dom": "^18.x || ^19.x"
+  },
+  "bugs": "https://github.com/gfazioli/mantine-window/issues"
+}