wmx-modal 0.2.5

package/dist/Drawer/Drawer.css

@@ -0,0 +1,142 @@
+.wmx-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  z-index: 1000;
+  animation: wmx-drawer-fade 0.15s ease;
+}
+
+.wmx-drawer {
+  position: fixed;
+  background-color: #ffffff;
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+.wmx-drawer--left,
+.wmx-drawer--right {
+  top: 0;
+  bottom: 0;
+  width: min(380px, 90vw);
+  animation-duration: 0.22s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.wmx-drawer--left {
+  left: 0;
+  animation-name: wmx-drawer-in-left;
+}
+.wmx-drawer--right {
+  right: 0;
+  animation-name: wmx-drawer-in-right;
+}
+
+.wmx-drawer--top,
+.wmx-drawer--bottom {
+  left: 0;
+  right: 0;
+  height: min(380px, 90vh);
+  animation-duration: 0.22s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.wmx-drawer--top {
+  top: 0;
+  animation-name: wmx-drawer-in-top;
+}
+.wmx-drawer--bottom {
+  bottom: 0;
+  animation-name: wmx-drawer-in-bottom;
+}
+
+.wmx-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.wmx-drawer__title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.wmx-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 0;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.wmx-drawer__close:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.wmx-drawer__body {
+  padding: 20px;
+  overflow: auto;
+  flex: 1;
+}
+
+@keyframes wmx-drawer-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes wmx-drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes wmx-drawer-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes wmx-drawer-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes wmx-drawer-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-drawer-overlay,
+  .wmx-drawer {
+    animation: none;
+  }
+}

package/dist/Drawer/Drawer.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Drawer.css";
+export type DrawerPlacement = "left" | "right" | "top" | "bottom";
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    placement?: DrawerPlacement;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    children: ReactNode;
+}
+export declare function Drawer({ isOpen, onClose, title, placement, closeOnOverlayClick, closeOnEsc, className, children, ...rest }: DrawerProps): import("react").ReactPortal | null;

package/dist/Drawer/Drawer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+import { useModalBehavior } from "../useModalBehavior.js";
+import { useFocusTrap } from "../useFocusTrap.js";
+import "./Drawer.css";
+export function Drawer({ isOpen, onClose, title, placement = "right", closeOnOverlayClick = true, closeOnEsc = true, className, children, ...rest }) {
+    const containerRef = useRef(null);
+    useModalBehavior({ isOpen, onClose, closeOnEsc });
+    useFocusTrap(containerRef, isOpen);
+    if (!isOpen)
+        return null;
+    const classes = ["wmx-drawer", `wmx-drawer--${placement}`, className].filter(Boolean).join(" ");
+    return createPortal(_jsx("div", { className: "wmx-drawer-overlay", onClick: closeOnOverlayClick ? onClose : undefined, children: _jsxs("div", { ref: containerRef, className: classes, role: "dialog", "aria-modal": "true", tabIndex: -1, onClick: (e) => e.stopPropagation(), ...rest, children: [_jsxs("div", { className: "wmx-drawer__header", children: [title && _jsx("span", { className: "wmx-drawer__title", children: title }), _jsx("button", { type: "button", className: "wmx-drawer__close", "aria-label": "Close", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "wmx-drawer__body", children: children })] }) }), document.body);
+}

package/dist/Modal/Modal.css

@@ -0,0 +1,117 @@
+.wmx-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+  animation: wmx-dialog-fade 0.15s ease;
+}
+
+.wmx-dialog {
+  background-color: #ffffff;
+  border-radius: 14px;
+  width: 100%;
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+  animation: wmx-dialog-scale 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
+}
+
+.wmx-dialog--sm {
+  max-width: 360px;
+}
+
+.wmx-dialog--md {
+  max-width: 480px;
+}
+
+.wmx-dialog--lg {
+  max-width: 640px;
+}
+
+.wmx-dialog--xl {
+  max-width: 880px;
+}
+
+.wmx-dialog--full {
+  max-width: none;
+  width: calc(100vw - 48px);
+  height: calc(100vh - 48px);
+}
+
+.wmx-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.wmx-dialog__title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.wmx-dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 0;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.wmx-dialog__close:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.wmx-dialog__close:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.wmx-dialog__body {
+  padding: 20px;
+}
+
+@keyframes wmx-dialog-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes wmx-dialog-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-dialog-overlay,
+  .wmx-dialog {
+    animation: none;
+  }
+}

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Modal.css";
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    size?: ModalSize;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    children: ReactNode;
+}
+export declare function Modal({ isOpen, onClose, title, size, closeOnOverlayClick, closeOnEsc, className, children, ...rest }: ModalProps): import("react").ReactPortal | null;

package/dist/Modal/Modal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+import { useModalBehavior } from "../useModalBehavior.js";
+import { useFocusTrap } from "../useFocusTrap.js";
+import "./Modal.css";
+export function Modal({ isOpen, onClose, title, size = "md", closeOnOverlayClick = true, closeOnEsc = true, className, children, ...rest }) {
+    const containerRef = useRef(null);
+    useModalBehavior({ isOpen, onClose, closeOnEsc });
+    useFocusTrap(containerRef, isOpen);
+    if (!isOpen)
+        return null;
+    const classes = ["wmx-dialog", `wmx-dialog--${size}`, className].filter(Boolean).join(" ");
+    return createPortal(_jsx("div", { className: "wmx-dialog-overlay", onClick: closeOnOverlayClick ? onClose : undefined, children: _jsxs("div", { ref: containerRef, className: classes, role: "dialog", "aria-modal": "true", tabIndex: -1, onClick: (e) => e.stopPropagation(), ...rest, children: [_jsxs("div", { className: "wmx-dialog__header", children: [title && _jsx("span", { className: "wmx-dialog__title", children: title }), _jsx("button", { type: "button", className: "wmx-dialog__close", "aria-label": "Close", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "wmx-dialog__body", children: children })] }) }), document.body);
+}

package/dist/confirm/Confirm.css

@@ -0,0 +1,104 @@
+.wmx-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+  padding: 24px;
+  animation: wmx-confirm-fade 0.15s ease;
+}
+
+.wmx-confirm {
+  background-color: #ffffff;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 400px;
+  padding: 22px;
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+  animation: wmx-confirm-scale 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.wmx-confirm__title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #111827;
+  margin-bottom: 8px;
+}
+
+.wmx-confirm__description {
+  font-size: 14px;
+  color: #4b5563;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.wmx-confirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.wmx-confirm__btn {
+  padding: 8px 18px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.wmx-confirm__btn--cancel {
+  background-color: #f3f4f6;
+  color: #1f2937;
+  border-color: #e5e7eb;
+}
+.wmx-confirm__btn--cancel:hover {
+  background-color: #e5e7eb;
+}
+
+.wmx-confirm__btn--confirm {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+.wmx-confirm__btn--confirm:hover {
+  background-color: #1d4ed8;
+}
+
+.wmx-confirm__btn--danger {
+  background-color: #dc2626;
+  color: #ffffff;
+}
+.wmx-confirm__btn--danger:hover {
+  background-color: #b91c1c;
+}
+
+@keyframes wmx-confirm-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes wmx-confirm-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-confirm-overlay,
+  .wmx-confirm {
+    animation: none;
+  }
+}

package/dist/confirm/confirm.d.ts

@@ -0,0 +1,9 @@
+import "./Confirm.css";
+export interface ConfirmOptions {
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: "default" | "danger";
+}
+export declare function confirm(options?: ConfirmOptions): Promise<boolean>;

package/dist/confirm/confirm.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
+import "./Confirm.css";
+function ConfirmDialog({ title = "Are you sure?", description, confirmText = "Confirm", cancelText = "Cancel", variant = "default", onResolve, }) {
+    return createPortal(_jsx("div", { className: "wmx-confirm-overlay", onClick: () => onResolve(false), children: _jsxs("div", { className: "wmx-confirm", role: "alertdialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "wmx-confirm__title", children: title }), description && _jsx("div", { className: "wmx-confirm__description", children: description }), _jsxs("div", { className: "wmx-confirm__actions", children: [_jsx("button", { type: "button", className: "wmx-confirm__btn wmx-confirm__btn--cancel", onClick: () => onResolve(false), children: cancelText }), _jsx("button", { type: "button", className: `wmx-confirm__btn wmx-confirm__btn--${variant === "danger" ? "danger" : "confirm"}`, onClick: () => onResolve(true), children: confirmText })] })] }) }), document.body);
+}
+export function confirm(options = {}) {
+    return new Promise((resolve) => {
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        const handleResolve = (result) => {
+            root.unmount();
+            container.remove();
+            resolve(result);
+        };
+        root.render(_jsx(ConfirmDialog, { ...options, onResolve: handleResolve }));
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Modal } from "./Modal/Modal.js";
+export type { ModalProps, ModalSize } from "./Modal/Modal.js";
+export { Drawer } from "./Drawer/Drawer.js";
+export type { DrawerProps, DrawerPlacement } from "./Drawer/Drawer.js";
+export { confirm } from "./confirm/confirm.js";
+export type { ConfirmOptions } from "./confirm/confirm.js";
+export { useFocusTrap } from "./useFocusTrap.js";
+export { useModalBehavior } from "./useModalBehavior.js";
+export type { UseModalBehaviorOptions } from "./useModalBehavior.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { Modal } from "./Modal/Modal.js";
+export { Drawer } from "./Drawer/Drawer.js";
+export { confirm } from "./confirm/confirm.js";
+export { useFocusTrap } from "./useFocusTrap.js";
+export { useModalBehavior } from "./useModalBehavior.js";

package/dist/useFocusTrap.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from "react";
+export declare function useFocusTrap(containerRef: RefObject<HTMLElement>, active: boolean): void;

package/dist/useFocusTrap.js

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+export function useFocusTrap(containerRef, active) {
+    const previouslyFocused = useRef(null);
+    useEffect(() => {
+        if (!active)
+            return;
+        previouslyFocused.current = document.activeElement;
+        const container = containerRef.current;
+        const firstFocusable = container?.querySelector(FOCUSABLE_SELECTOR);
+        (firstFocusable ?? container)?.focus();
+        const handleKeyDown = (e) => {
+            if (e.key !== "Tab" || !container)
+                return;
+            const nodes = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null);
+            if (nodes.length === 0)
+                return;
+            const first = nodes[0];
+            const last = nodes[nodes.length - 1];
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            previouslyFocused.current?.focus();
+        };
+    }, [active, containerRef]);
+}

package/dist/useModalBehavior.d.ts

@@ -0,0 +1,7 @@
+export interface UseModalBehaviorOptions {
+    isOpen: boolean;
+    onClose: () => void;
+    closeOnEsc?: boolean;
+    lockScroll?: boolean;
+}
+export declare function useModalBehavior({ isOpen, onClose, closeOnEsc, lockScroll, }: UseModalBehaviorOptions): void;

package/dist/useModalBehavior.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+export function useModalBehavior({ isOpen, onClose, closeOnEsc = true, lockScroll = true, }) {
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const originalOverflow = document.body.style.overflow;
+        if (lockScroll)
+            document.body.style.overflow = "hidden";
+        const handleKeyDown = (e) => {
+            if (closeOnEsc && e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            if (lockScroll)
+                document.body.style.overflow = originalOverflow;
+        };
+    }, [isOpen, onClose, closeOnEsc, lockScroll]);
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "wmx-modal",
+  "version": "0.2.5",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc --project tsconfig.json && node scripts/copy-css.mjs",
+    "dev": "tsc --project tsconfig.json --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.4.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ]
+}

package/src/Drawer/Drawer.css

@@ -0,0 +1,142 @@
+.wmx-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  z-index: 1000;
+  animation: wmx-drawer-fade 0.15s ease;
+}
+
+.wmx-drawer {
+  position: fixed;
+  background-color: #ffffff;
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+.wmx-drawer--left,
+.wmx-drawer--right {
+  top: 0;
+  bottom: 0;
+  width: min(380px, 90vw);
+  animation-duration: 0.22s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.wmx-drawer--left {
+  left: 0;
+  animation-name: wmx-drawer-in-left;
+}
+.wmx-drawer--right {
+  right: 0;
+  animation-name: wmx-drawer-in-right;
+}
+
+.wmx-drawer--top,
+.wmx-drawer--bottom {
+  left: 0;
+  right: 0;
+  height: min(380px, 90vh);
+  animation-duration: 0.22s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.wmx-drawer--top {
+  top: 0;
+  animation-name: wmx-drawer-in-top;
+}
+.wmx-drawer--bottom {
+  bottom: 0;
+  animation-name: wmx-drawer-in-bottom;
+}
+
+.wmx-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.wmx-drawer__title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.wmx-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 0;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.wmx-drawer__close:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.wmx-drawer__body {
+  padding: 20px;
+  overflow: auto;
+  flex: 1;
+}
+
+@keyframes wmx-drawer-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes wmx-drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes wmx-drawer-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes wmx-drawer-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes wmx-drawer-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-drawer-overlay,
+  .wmx-drawer {
+    animation: none;
+  }
+}

package/src/Drawer/Drawer.tsx

@@ -0,0 +1,62 @@
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+import type { HTMLAttributes, ReactNode } from "react";
+import { useModalBehavior } from "../useModalBehavior.js";
+import { useFocusTrap } from "../useFocusTrap.js";
+import "./Drawer.css";
+
+export type DrawerPlacement = "left" | "right" | "top" | "bottom";
+
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  placement?: DrawerPlacement;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+  children: ReactNode;
+}
+
+export function Drawer({
+  isOpen,
+  onClose,
+  title,
+  placement = "right",
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  className,
+  children,
+  ...rest
+}: DrawerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useModalBehavior({ isOpen, onClose, closeOnEsc });
+  useFocusTrap(containerRef, isOpen);
+
+  if (!isOpen) return null;
+
+  const classes = ["wmx-drawer", `wmx-drawer--${placement}`, className].filter(Boolean).join(" ");
+
+  return createPortal(
+    <div className="wmx-drawer-overlay" onClick={closeOnOverlayClick ? onClose : undefined}>
+      <div
+        ref={containerRef}
+        className={classes}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        onClick={(e) => e.stopPropagation()}
+        {...rest}
+      >
+        <div className="wmx-drawer__header">
+          {title && <span className="wmx-drawer__title">{title}</span>}
+          <button type="button" className="wmx-drawer__close" aria-label="Close" onClick={onClose}>
+            &times;
+          </button>
+        </div>
+        <div className="wmx-drawer__body">{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/Modal/Modal.css

@@ -0,0 +1,117 @@
+.wmx-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+  animation: wmx-dialog-fade 0.15s ease;
+}
+
+.wmx-dialog {
+  background-color: #ffffff;
+  border-radius: 14px;
+  width: 100%;
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+  animation: wmx-dialog-scale 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
+}
+
+.wmx-dialog--sm {
+  max-width: 360px;
+}
+
+.wmx-dialog--md {
+  max-width: 480px;
+}
+
+.wmx-dialog--lg {
+  max-width: 640px;
+}
+
+.wmx-dialog--xl {
+  max-width: 880px;
+}
+
+.wmx-dialog--full {
+  max-width: none;
+  width: calc(100vw - 48px);
+  height: calc(100vh - 48px);
+}
+
+.wmx-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.wmx-dialog__title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.wmx-dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 0;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.wmx-dialog__close:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.wmx-dialog__close:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.wmx-dialog__body {
+  padding: 20px;
+}
+
+@keyframes wmx-dialog-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes wmx-dialog-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-dialog-overlay,
+  .wmx-dialog {
+    animation: none;
+  }
+}

package/src/Modal/Modal.tsx

@@ -0,0 +1,62 @@
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+import type { HTMLAttributes, ReactNode } from "react";
+import { useModalBehavior } from "../useModalBehavior.js";
+import { useFocusTrap } from "../useFocusTrap.js";
+import "./Modal.css";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  size?: ModalSize;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+  children: ReactNode;
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  size = "md",
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  className,
+  children,
+  ...rest
+}: ModalProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useModalBehavior({ isOpen, onClose, closeOnEsc });
+  useFocusTrap(containerRef, isOpen);
+
+  if (!isOpen) return null;
+
+  const classes = ["wmx-dialog", `wmx-dialog--${size}`, className].filter(Boolean).join(" ");
+
+  return createPortal(
+    <div className="wmx-dialog-overlay" onClick={closeOnOverlayClick ? onClose : undefined}>
+      <div
+        ref={containerRef}
+        className={classes}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        onClick={(e) => e.stopPropagation()}
+        {...rest}
+      >
+        <div className="wmx-dialog__header">
+          {title && <span className="wmx-dialog__title">{title}</span>}
+          <button type="button" className="wmx-dialog__close" aria-label="Close" onClick={onClose}>
+            &times;
+          </button>
+        </div>
+        <div className="wmx-dialog__body">{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/confirm/Confirm.css

@@ -0,0 +1,104 @@
+.wmx-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+  padding: 24px;
+  animation: wmx-confirm-fade 0.15s ease;
+}
+
+.wmx-confirm {
+  background-color: #ffffff;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 400px;
+  padding: 22px;
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+  animation: wmx-confirm-scale 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.wmx-confirm__title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #111827;
+  margin-bottom: 8px;
+}
+
+.wmx-confirm__description {
+  font-size: 14px;
+  color: #4b5563;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.wmx-confirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.wmx-confirm__btn {
+  padding: 8px 18px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.wmx-confirm__btn--cancel {
+  background-color: #f3f4f6;
+  color: #1f2937;
+  border-color: #e5e7eb;
+}
+.wmx-confirm__btn--cancel:hover {
+  background-color: #e5e7eb;
+}
+
+.wmx-confirm__btn--confirm {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+.wmx-confirm__btn--confirm:hover {
+  background-color: #1d4ed8;
+}
+
+.wmx-confirm__btn--danger {
+  background-color: #dc2626;
+  color: #ffffff;
+}
+.wmx-confirm__btn--danger:hover {
+  background-color: #b91c1c;
+}
+
+@keyframes wmx-confirm-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes wmx-confirm-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wmx-confirm-overlay,
+  .wmx-confirm {
+    animation: none;
+  }
+}

package/src/confirm/confirm.tsx

@@ -0,0 +1,71 @@
+import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
+import "./Confirm.css";
+
+export interface ConfirmOptions {
+  title?: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "default" | "danger";
+}
+
+interface ConfirmDialogProps extends ConfirmOptions {
+  onResolve: (result: boolean) => void;
+}
+
+function ConfirmDialog({
+  title = "Are you sure?",
+  description,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  variant = "default",
+  onResolve,
+}: ConfirmDialogProps) {
+  return createPortal(
+    <div className="wmx-confirm-overlay" onClick={() => onResolve(false)}>
+      <div
+        className="wmx-confirm"
+        role="alertdialog"
+        aria-modal="true"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="wmx-confirm__title">{title}</div>
+        {description && <div className="wmx-confirm__description">{description}</div>}
+        <div className="wmx-confirm__actions">
+          <button
+            type="button"
+            className="wmx-confirm__btn wmx-confirm__btn--cancel"
+            onClick={() => onResolve(false)}
+          >
+            {cancelText}
+          </button>
+          <button
+            type="button"
+            className={`wmx-confirm__btn wmx-confirm__btn--${variant === "danger" ? "danger" : "confirm"}`}
+            onClick={() => onResolve(true)}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export function confirm(options: ConfirmOptions = {}): Promise<boolean> {
+  return new Promise((resolve) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    const handleResolve = (result: boolean) => {
+      root.unmount();
+      container.remove();
+      resolve(result);
+    };
+
+    root.render(<ConfirmDialog {...options} onResolve={handleResolve} />);
+  });
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { Modal } from "./Modal/Modal.js";
+export type { ModalProps, ModalSize } from "./Modal/Modal.js";
+
+export { Drawer } from "./Drawer/Drawer.js";
+export type { DrawerProps, DrawerPlacement } from "./Drawer/Drawer.js";
+
+export { confirm } from "./confirm/confirm.js";
+export type { ConfirmOptions } from "./confirm/confirm.js";
+
+export { useFocusTrap } from "./useFocusTrap.js";
+export { useModalBehavior } from "./useModalBehavior.js";
+export type { UseModalBehaviorOptions } from "./useModalBehavior.js";

package/src/useFocusTrap.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+import type { RefObject } from "react";
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export function useFocusTrap(containerRef: RefObject<HTMLElement>, active: boolean) {
+  const previouslyFocused = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!active) return;
+
+    previouslyFocused.current = document.activeElement as HTMLElement | null;
+    const container = containerRef.current;
+    const firstFocusable = container?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+    (firstFocusable ?? container)?.focus();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Tab" || !container) return;
+
+      const nodes = Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null
+      );
+      if (nodes.length === 0) return;
+
+      const first = nodes[0];
+      const last = nodes[nodes.length - 1];
+
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused.current?.focus();
+    };
+  }, [active, containerRef]);
+}

package/src/useModalBehavior.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+
+export interface UseModalBehaviorOptions {
+  isOpen: boolean;
+  onClose: () => void;
+  closeOnEsc?: boolean;
+  lockScroll?: boolean;
+}
+
+export function useModalBehavior({
+  isOpen,
+  onClose,
+  closeOnEsc = true,
+  lockScroll = true,
+}: UseModalBehaviorOptions) {
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const originalOverflow = document.body.style.overflow;
+    if (lockScroll) document.body.style.overflow = "hidden";
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (closeOnEsc && e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (lockScroll) document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen, onClose, closeOnEsc, lockScroll]);
+}