@refraktor/core 0.0.3 → 0.0.5

package/build/components/modal/modal-content/modal-content.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
+const sizeClasses = {
+    xs: "max-w-xs",
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    full: "max-w-full"
+};
 const ModalContent = factory(({ children, className, style, ...props }, ref) => {
     const { cx, getRadius } = useTheme();
-    const { modal, withinPortal, radius, transitionProps, headerId, contentRef, getStyles } = useModalContext();
+    const { modal, withinPortal, radius, size, centered, trapFocus, returnFocus, transitionProps, headerId, getStyles } = useModalContext();
     const setRefs = (node) => {
-        contentRef.current = node;
+        modal.refs.setFloating(node);
         if (typeof ref === "function") {
             ref(node);
         }
@@ -17,8 +25,8 @@ const ModalContent = factory(({ children, className, style, ...props }, ref) =>
         }
     };
     const { className: transitionClassName, ...resolvedTransitionProps } = transitionProps ?? {};
-    const content = (_jsx(Transition, { transition: "scale", duration: 150, mounted: modal.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 grid place-items-center pointer-events-none", transitionClassName), children: _jsx("div", { ref: setRefs, role: "dialog", "aria-modal": "true", "aria-labelledby": headerId, "data-opened": modal.opened, style: style, className: cx("pointer-events-auto relative z-50 w-full max-w-md", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md", getRadius(radius), getStyles("content"), className), ...props, children: children }) }));
-    return withinPortal ? _jsx(Portal, { children: content }) : content;
+    const content = (_jsx(Transition, { transition: "scale", duration: 150, mounted: modal.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 grid pointer-events-none", centered ? "place-items-center" : "items-start justify-center pt-12", transitionClassName), children: modal.opened ? (_jsx(FloatingFocusManager, { context: modal.context, modal: trapFocus, returnFocus: returnFocus, outsideElementsInert: false, children: _jsx("div", { ref: setRefs, "aria-labelledby": headerId, "data-opened": modal.opened, style: style, className: cx("pointer-events-auto relative z-50 w-full", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md", sizeClasses[size], getRadius(radius), getStyles("content"), className), ...modal.getFloatingProps(), ...props, children: children }) })) : (_jsx("div", { ref: setRefs, "aria-labelledby": headerId, "data-opened": modal.opened, style: style, className: cx("pointer-events-auto relative z-50 w-full", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md", sizeClasses[size], getRadius(radius), getStyles("content"), className), ...props, children: children })) }));
+    return withinPortal ? (_jsx(FloatingPortal, { children: content })) : (content);
 });
 ModalContent.displayName = "@refraktor/core/Modal.Content";
 export default ModalContent;

package/build/components/modal/modal-header/modal-header.js

@@ -3,11 +3,11 @@ import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
 import { ModalClose } from "../modal-close";
 import { useModalContext } from "../modal.context";
-const ModalHeader = factory(({ children, className, id, text, withClose = true, ...props }, ref) => {
+const ModalHeader = factory(({ children, className, id, withClose = true, ...props }, ref) => {
     const { cx } = useTheme();
     const { headerId, getStyles } = useModalContext();
     const resolvedId = id ?? headerId;
-    return (_jsxs("div", { ref: ref, className: cx("mb-4 flex items-center justify-between", getStyles("header"), className), ...props, children: [_jsx("div", { id: resolvedId, className: "min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]", children: text ?? children }), withClose && (_jsx(ModalClose, { className: "static shrink-0 self-center" }))] }));
+    return (_jsxs("div", { ref: ref, className: cx("mb-4 flex items-center justify-between", getStyles("header"), className), ...props, children: [_jsx("div", { id: resolvedId, className: "min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]", children: children }), withClose && (_jsx(ModalClose, { className: "static shrink-0 self-center" }))] }));
 });
 ModalHeader.displayName = "@refraktor/core/Modal.Header";
 export default ModalHeader;

package/build/components/modal/modal-overlay/modal-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-overlay/modal-overlay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEA0EjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"modal-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-overlay/modal-overlay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEA2EjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/build/components/modal/modal-overlay/modal-overlay.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
 const ModalOverlay = factory(({ closeOnClick = true, backgroundOpacity = 0.5, blur = 0, className, onMouseDown, style, ...props }, ref) => {
     const { cx } = useTheme();
-    const { modal, closeOnClickOutside, withinPortal, transitionProps, getStyles } = useModalContext();
+    const { modal, closeOnClickOutside, lockScroll, withinPortal, transitionProps, getStyles } = useModalContext();
     const blurValue = typeof blur === "number" ? `${blur}px` : blur;
     const backdropFilterValue = blurValue !== "0" && blurValue !== "0px"
         ? `blur(${blurValue})`
@@ -20,12 +20,12 @@ const ModalOverlay = factory(({ closeOnClick = true, backgroundOpacity = 0.5, bl
         }
         modal.close();
     };
-    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: modal.opened, ...transitionProps, children: _jsx("div", { ref: ref, "aria-hidden": "true", className: cx("fixed inset-0 z-40", getStyles("overlay"), className), style: {
+    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: modal.opened, ...transitionProps, children: _jsx(FloatingOverlay, { lockScroll: lockScroll, ref: ref, className: cx("z-40", getStyles("overlay"), className), style: {
                 backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
                 backdropFilter: backdropFilterValue,
                 ...style
             }, onMouseDown: handleMouseDown, ...props }) }));
-    return withinPortal ? (_jsx(Portal, { children: overlayContent })) : (overlayContent);
+    return withinPortal ? (_jsx(FloatingPortal, { children: overlayContent })) : (overlayContent);
 });
 ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";
 export default ModalOverlay;

package/build/components/modal/modal-root/modal-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-root.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-root/modal-root.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,gBAAgB,CAAC;AAWxB,QAAA,MAAM,SAAS,gEA8Db,CAAC;AAIH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"modal-root.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-root/modal-root.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,gBAAgB,CAAC;AAcxB,QAAA,MAAM,SAAS,gEAiEb,CAAC;AAIH,eAAe,SAAS,CAAC"}

package/build/components/modal/modal-root/modal-root.js

@@ -1,32 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "@refraktor/utils";
-import { useRef } from "react";
 import { useTheme } from "../../../theme";
 import { factory, useClassNames, useProps } from "../../../utils";
 import { ModalProvider } from "../modal.context";
 import { useModal } from "../use-modal";
-import { RemoveScroll } from "react-remove-scroll";
 const defaultProps = {
     closeOnClickOutside: true,
     closeOnEscape: true,
     lockScroll: true,
     withinPortal: true,
-    radius: "md"
+    radius: "md",
+    size: "md",
+    centered: true,
+    trapFocus: true,
+    returnFocus: true
 };
 const ModalRoot = factory((_props, ref) => {
     const { cx } = useTheme();
-    const { id, children, opened, defaultOpened, onOpenedChange, closeOnClickOutside, closeOnEscape, lockScroll, withinPortal, radius, transitionProps, className, classNames, ...props } = useProps("Modal", defaultProps, _props);
+    const { id, children, opened, defaultOpened, onOpenedChange, closeOnClickOutside, closeOnEscape, lockScroll, withinPortal, radius, size, centered, trapFocus, returnFocus, transitionProps, className, classNames, ...props } = useProps("Modal", defaultProps, _props);
     const classes = useClassNames("Modal", classNames);
     const _id = useId(id);
     const headerId = `${_id}-header`;
-    const contentRef = useRef(null);
     const modal = useModal({
         opened,
         defaultOpened,
         onOpenedChange,
         closeOnClickOutside,
-        closeOnEscape,
-        contentRef
+        closeOnEscape
     });
     const getStyles = (part) => classes[part];
     return (_jsx(ModalProvider, { value: {
@@ -35,12 +35,15 @@ const ModalRoot = factory((_props, ref) => {
             lockScroll,
             withinPortal,
             radius,
+            size,
+            centered,
+            trapFocus,
+            returnFocus,
             transitionProps,
             headerId,
-            contentRef,
             classNames,
             getStyles
-        }, children: _jsx(RemoveScroll, { enabled: modal.opened && lockScroll, children: _jsx("div", { ref: ref, id: _id, className: cx(classes.root, className), ...props, children: children }) }) }));
+        }, children: _jsx("div", { ref: ref, id: _id, className: cx(classes.root, className), ...props, children: children }) }));
 });
 ModalRoot.displayName = "@refraktor/core/Modal.Root";
 export default ModalRoot;

package/build/components/modal/modal.context.d.ts

@@ -1,6 +1,6 @@
 import { RefraktorRadius } from "../../theme";
 import { TransitionProps } from "../transition";
-import { ModalClassNames } from "./modal.types";
+import { ModalClassNames, ModalSize } from "./modal.types";
 import { UseModalReturn } from "./use-modal";
 export interface ModalContextValue {
     modal: UseModalReturn;
@@ -8,9 +8,12 @@ export interface ModalContextValue {
     lockScroll: boolean;
     withinPortal: boolean;
     radius: RefraktorRadius;
+    size: ModalSize;
+    centered: boolean;
+    trapFocus: boolean;
+    returnFocus: boolean;
     transitionProps?: Omit<TransitionProps, "children" | "mounted">;
     headerId: string;
-    contentRef: React.MutableRefObject<HTMLDivElement | null>;
     classNames?: ModalClassNames;
     getStyles: (part: keyof ModalClassNames) => string | undefined;
 }

package/build/components/modal/modal.context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.context.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;IACxB,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAClE;AAED,eAAO,MAAO,aAAa;;;+CAAE,eAAe,yBAGvC,CAAC"}
+{"version":3,"file":"modal.context.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAClE;AAED,eAAO,MAAO,aAAa;;;+CAAE,eAAe,yBAGvC,CAAC"}

package/build/components/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAmB,mBAAmB,EAAc,MAAM,eAAe,CAAC;AAEjF,QAAA,MAAM,KAAK,yDAET,CAAC;AAWH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEH,mBAAmB,EAEtB,MAAM,eAAe,CAAC;AAEvB,QAAA,MAAM,KAAK,yDA4BV,CAAC;AAYF,eAAe,KAAK,CAAC"}

package/build/components/modal/modal.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createClassNamesConfig, createComponentConfig, factory } from "../../utils";
+import { ModalBody } from "./modal-body";
 import { ModalClose } from "./modal-close";
 import { ModalContent } from "./modal-content";
 import { ModalHeader } from "./modal-header";
 import { ModalOverlay } from "./modal-overlay";
 import { ModalRoot } from "./modal-root";
-const Modal = factory((props, ref) => {
-    return _jsx(ModalRoot, { ...props, ref: ref });
+const Modal = factory(({ title, withOverlay = true, withCloseButton = true, overlayProps, children, ...rootProps }, ref) => {
+    return (_jsxs(ModalRoot, { ...rootProps, ref: ref, children: [withOverlay && _jsx(ModalOverlay, { ...overlayProps }), _jsxs(ModalContent, { children: [(title || withCloseButton) && (_jsx(ModalHeader, { withClose: withCloseButton, children: title })), _jsx(ModalBody, { children: children })] })] }));
 });
 Modal.displayName = "@refraktor/core/Modal";
 Modal.configure = createComponentConfig();
@@ -15,5 +16,6 @@ Modal.Root = ModalRoot;
 Modal.Overlay = ModalOverlay;
 Modal.Content = ModalContent;
 Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
 Modal.Close = ModalClose;
 export default Modal;

package/build/components/modal/modal.test.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, userEvent, waitFor } from "../../vitest";
 import Modal from "./modal";
+import { ModalBody } from "./modal-body";
 import { ModalContent } from "./modal-content";
 import { ModalOverlay } from "./modal-overlay";
 import { ModalRoot } from "./modal-root";
@@ -12,7 +13,7 @@ describe("@refraktor/core/Modal", () => {
     };
     it("renders with compound subcomponents and closes with header close button", async () => {
         const user = userEvent.setup();
-        await render(_jsxs(Modal, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, {}), _jsxs(Modal.Content, { children: [_jsx(Modal.Header, { text: "Delete item" }), _jsx("p", { children: "Are you sure?" })] })] }));
+        await render(_jsxs(Modal.Root, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, {}), _jsxs(Modal.Content, { children: [_jsx(Modal.Header, { children: "Delete item" }), _jsx(Modal.Body, { children: _jsx("p", { children: "Are you sure?" }) })] })] }));
         expect(await screen.findByRole("dialog", { name: "Delete item" })).toBeInTheDocument();
         await user.click(screen.getByRole("button", { name: "Close" }));
         await waitFor(() => {
@@ -22,13 +23,13 @@ describe("@refraktor/core/Modal", () => {
     it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
         const user = userEvent.setup();
         const onOpenedChange = vi.fn();
-        await render(_jsxs(Modal, { opened: true, onOpenedChange: onOpenedChange, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay" }), _jsx(Modal.Content, { children: "Controlled modal" })] }));
+        await render(_jsxs(Modal.Root, { opened: true, onOpenedChange: onOpenedChange, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay" }), _jsx(Modal.Content, { children: "Controlled modal" })] }));
         await user.click(await screen.findByTestId("overlay"));
         expect(onOpenedChange).toHaveBeenCalledWith(false);
     });
     it("closes on Escape key", async () => {
         const user = userEvent.setup();
-        await render(_jsx(Modal, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(Modal.Content, { children: "Keyboard close" }) }));
+        await render(_jsx(Modal.Root, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(Modal.Content, { children: "Keyboard close" }) }));
         await screen.findByRole("dialog");
         await user.keyboard("{Escape}");
         await waitFor(() => {
@@ -40,7 +41,7 @@ describe("@refraktor/core/Modal", () => {
         expect(await screen.findByRole("dialog")).toBeInTheDocument();
     });
     it("applies custom overlay background opacity and blur", async () => {
-        await render(_jsxs(Modal, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay", backgroundOpacity: 0.4, blur: 6 }), _jsx(Modal.Content, { children: "Styled overlay" })] }));
+        await render(_jsxs(Modal.Root, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay", backgroundOpacity: 0.4, blur: 6 }), _jsx(Modal.Content, { children: "Styled overlay" })] }));
         const overlay = await screen.findByTestId("overlay");
         expect(overlay).toHaveStyle({
             backgroundColor: "rgba(0, 0, 0, 0.4)",
@@ -48,22 +49,86 @@ describe("@refraktor/core/Modal", () => {
         });
     });
     it("does not set backdrop blur for zero blur", async () => {
-        await render(_jsxs(Modal, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay", blur: 0 }), _jsx(Modal.Content, { children: "No blur" })] }));
+        await render(_jsxs(Modal.Root, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Modal.Overlay, { "data-testid": "overlay", blur: 0 }), _jsx(Modal.Content, { children: "No blur" })] }));
         const overlay = await screen.findByTestId("overlay");
         expect(overlay).toHaveStyle({
             backgroundColor: "rgba(0, 0, 0, 0.5)"
         });
         expect(overlay.style.backdropFilter).toBe("");
     });
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
-        await render(_jsx(Modal, { defaultOpened: true, lockScroll: true, transitionProps: transitionProps, children: _jsxs(Modal.Content, { children: ["Scroll locked", _jsx(Modal.Close, {})] }) }));
-        await waitFor(() => {
-            expect(document.body).toHaveAttribute("data-scroll-locked");
+    it("renders Modal.Body subcomponent", async () => {
+        await render(_jsx(Modal.Root, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(Modal.Content, { children: _jsx(Modal.Body, { "data-testid": "body", children: "Body content" }) }) }));
+        const body = await screen.findByTestId("body");
+        expect(body).toBeInTheDocument();
+        expect(body).toHaveTextContent("Body content");
+    });
+    it("renders standalone ModalBody component", async () => {
+        await render(_jsx(ModalRoot, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(ModalContent, { children: _jsx(ModalBody, { "data-testid": "body", children: "Standalone body" }) }) }));
+        expect(await screen.findByTestId("body")).toHaveTextContent("Standalone body");
+    });
+    describe("single-component shorthand API", () => {
+        it("renders with title, overlay, close button, and body", async () => {
+            await render(_jsx(Modal, { defaultOpened: true, title: "Confirm action", transitionProps: transitionProps, children: _jsx("p", { children: "Are you sure?" }) }));
+            expect(await screen.findByRole("dialog", { name: "Confirm action" })).toBeInTheDocument();
+            expect(screen.getByText("Are you sure?")).toBeInTheDocument();
+            expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
         });
-        await user.click(screen.getByRole("button", { name: "Close" }));
-        await waitFor(() => {
-            expect(document.body).not.toHaveAttribute("data-scroll-locked");
+        it("hides overlay when withOverlay is false", async () => {
+            const { container } = await render(_jsx(Modal, { defaultOpened: true, title: "No overlay", withOverlay: false, transitionProps: transitionProps }));
+            expect(await screen.findByRole("dialog")).toBeInTheDocument();
+            expect(container.ownerDocument.querySelector("[aria-hidden='true']")).toBeNull();
+        });
+        it("hides close button when withCloseButton is false", async () => {
+            await render(_jsx(Modal, { defaultOpened: true, title: "No close", withCloseButton: false, transitionProps: transitionProps }));
+            await screen.findByRole("dialog");
+            expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+        });
+        it("closes via shorthand close button", async () => {
+            const user = userEvent.setup();
+            await render(_jsx(Modal, { defaultOpened: true, title: "Closeable", transitionProps: transitionProps, children: "Content" }));
+            await screen.findByRole("dialog");
+            await user.click(screen.getByRole("button", { name: "Close" }));
+            await waitFor(() => {
+                expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+            });
+        });
+        it("passes overlayProps to the overlay", async () => {
+            await render(_jsx(Modal, { defaultOpened: true, title: "Custom overlay", overlayProps: {
+                    backgroundOpacity: 0.8,
+                    blur: 10,
+                    "data-testid": "shorthand-overlay"
+                }, transitionProps: transitionProps, children: "Content" }));
+            const overlay = await screen.findByTestId("shorthand-overlay");
+            expect(overlay).toHaveStyle({
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                backdropFilter: "blur(10px)"
+            });
+        });
+    });
+    describe("size prop", () => {
+        it("applies md size by default", async () => {
+            await render(_jsx(Modal.Root, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(Modal.Content, { "data-testid": "content", children: "Default size" }) }));
+            const dialog = await screen.findByRole("dialog");
+            expect(dialog.className).toContain("max-w-md");
+        });
+        it("applies custom size", async () => {
+            await render(_jsx(Modal.Root, { defaultOpened: true, size: "lg", transitionProps: transitionProps, children: _jsx(Modal.Content, { children: "Large modal" }) }));
+            const dialog = await screen.findByRole("dialog");
+            expect(dialog.className).toContain("max-w-lg");
+        });
+    });
+    describe("centered prop", () => {
+        it("centers vertically by default", async () => {
+            await render(_jsx(Modal.Root, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(Modal.Content, { children: "Centered" }) }));
+            await screen.findByRole("dialog");
+            const wrapper = screen.getByRole("dialog").parentElement?.parentElement;
+            expect(wrapper?.className).toContain("place-items-center");
+        });
+        it("positions at top when centered is false", async () => {
+            await render(_jsx(Modal.Root, { defaultOpened: true, centered: false, transitionProps: transitionProps, children: _jsx(Modal.Content, { children: "Top aligned" }) }));
+            await screen.findByRole("dialog");
+            const wrapper = screen.getByRole("dialog").parentElement?.parentElement;
+            expect(wrapper?.className).toContain("items-start");
         });
     });
 });

package/build/components/modal/modal.types.d.ts

@@ -6,17 +6,20 @@ import { ModalRoot } from "./modal-root";
 import { ModalOverlay } from "./modal-overlay";
 import { ModalContent } from "./modal-content";
 import { ModalHeader } from "./modal-header";
+import { ModalBody } from "./modal-body";
 import { ModalClose } from "./modal-close";
+export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
 export type ModalClassNames = {
     root?: string;
     overlay?: string;
     content?: string;
     header?: string;
+    body?: string;
     close?: string;
 };
-export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
+export interface ModalRootProps extends ComponentPropsWithoutRef<"div"> {
     /** Children containing modal subcomponents */
-    children: ReactNode;
+    children?: ReactNode;
     /** State of the modal (controlled) */
     opened?: boolean;
     /** Initial state of the modal (uncontrolled) */
@@ -33,6 +36,14 @@ export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
     withinPortal?: boolean;
     /** Radius for modal content @default `md` */
     radius?: RefraktorRadius;
+    /** Modal content width @default `md` */
+    size?: ModalSize;
+    /** Whether to center modal vertically @default `true` */
+    centered?: boolean;
+    /** Whether to trap focus within the modal @default `true` */
+    trapFocus?: boolean;
+    /** Whether to return focus to trigger after close @default `true` */
+    returnFocus?: boolean;
     /** Transition props for overlay/content, uses Transition internally */
     transitionProps?: Omit<TransitionProps, "children" | "mounted">;
     /** Used for editing root class name */
@@ -40,7 +51,16 @@ export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
     /** Used for styling different parts of the component */
     classNames?: ModalClassNames;
 }
-export type ModalRootProps = ModalProps;
+export interface ModalProps extends Omit<ModalRootProps, "title"> {
+    /** Title text rendered in the header */
+    title?: ReactNode;
+    /** Whether to render the overlay @default `true` */
+    withOverlay?: boolean;
+    /** Whether to show the close button in the header @default `true` */
+    withCloseButton?: boolean;
+    /** Props passed to the Overlay subcomponent */
+    overlayProps?: ModalOverlayProps;
+}
 export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
     /** Whether clicking the overlay closes modal @default `true` */
     closeOnClick?: boolean;
@@ -60,13 +80,17 @@ export interface ModalContentProps extends ComponentPropsWithoutRef<"div"> {
 export interface ModalHeaderProps extends ComponentPropsWithoutRef<"div"> {
     /** Header content */
     children?: ReactNode;
-    /** Shorthand header text */
-    text?: ReactNode;
     /** Whether to show close button inside header @default `true` */
     withClose?: boolean;
     /** Used for editing root class name */
     className?: string;
 }
+export interface ModalBodyProps extends ComponentPropsWithoutRef<"div"> {
+    /** Body content */
+    children?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
 export interface ModalCloseProps extends Omit<ComponentPropsWithoutRef<"button">, "onClick"> {
     /** Optional close content (defaults to `x`) */
     children?: ReactNode;
@@ -85,6 +109,7 @@ export interface ModalFactoryPayload extends FactoryPayload {
         Overlay: typeof ModalOverlay;
         Content: typeof ModalContent;
         Header: typeof ModalHeader;
+        Body: typeof ModalBody;
         Close: typeof ModalClose;
     };
 }
@@ -104,6 +129,10 @@ export interface ModalHeaderFactoryPayload extends FactoryPayload {
     props: ModalHeaderProps;
     ref: HTMLDivElement;
 }
+export interface ModalBodyFactoryPayload extends FactoryPayload {
+    props: ModalBodyProps;
+    ref: HTMLDivElement;
+}
 export interface ModalCloseFactoryPayload extends FactoryPayload {
     props: ModalCloseProps;
     ref: HTMLButtonElement;

package/build/components/modal/modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.types.ts"],"names":[],"mappings":"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"}

package/build/components/modal/use-modal.d.ts

@@ -1,16 +1,23 @@
+import { FloatingContext } from "@floating-ui/react";
 interface UseModalProps {
     opened?: boolean;
     defaultOpened?: boolean;
     onOpenedChange?: (opened: boolean) => void;
     closeOnClickOutside?: boolean;
     closeOnEscape?: boolean;
-    contentRef: React.MutableRefObject<HTMLElement | null>;
 }
 export interface UseModalReturn {
     opened: boolean;
     open: () => void;
     close: () => void;
     toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    getFloatingProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
 }
 export declare function useModal(options: UseModalProps): UseModalReturn;
 export {};

package/build/components/modal/use-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/use-modal.ts"],"names":[],"mappings":"AAGA,UAAU,aAAa;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,cAAc,CAiF/D"}
+{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/use-modal.ts"],"names":[],"mappings":"AACA,OAAO,EACH,eAAe,EAKlB,MAAM,oBAAoB,CAAC;AAG5B,UAAU,aAAa;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,cAAc,CA2D/D"}

package/build/components/modal/use-modal.js

@@ -1,13 +1,27 @@
 import { useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
+import { useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { useCallback } from "react";
 export function useModal(options) {
-    const { opened, defaultOpened, onOpenedChange, closeOnClickOutside = true, closeOnEscape = true, contentRef } = options;
+    const { opened, defaultOpened, onOpenedChange, closeOnClickOutside = true, closeOnEscape = true } = options;
     const [isOpen, setIsOpen] = useUncontrolled({
         value: opened,
         defaultValue: defaultOpened,
         finalValue: false,
         onChange: onOpenedChange
     });
+    const floating = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen
+    });
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        outsidePressEvent: "mousedown",
+        escapeKey: closeOnEscape
+    });
+    const role = useRole(floating.context, {
+        role: "dialog"
+    });
+    const { getFloatingProps } = useInteractions([dismiss, role]);
     const open = useCallback(() => {
         setIsOpen(true);
     }, [setIsOpen]);
@@ -17,45 +31,18 @@ export function useModal(options) {
     const toggle = useCallback(() => {
         setIsOpen(!isOpen);
     }, [isOpen, setIsOpen]);
-    useEffect(() => {
-        if (!isOpen || !closeOnEscape) {
-            return;
-        }
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [closeOnEscape, isOpen, setIsOpen]);
-    useEffect(() => {
-        if (!isOpen || !closeOnClickOutside) {
-            return;
-        }
-        const handlePointerDown = (event) => {
-            const target = event.target;
-            if (!(target instanceof Node)) {
-                return;
-            }
-            if (contentRef.current?.contains(target)) {
-                return;
-            }
-            setIsOpen(false);
-        };
-        document.addEventListener("mousedown", handlePointerDown);
-        document.addEventListener("touchstart", handlePointerDown);
-        return () => {
-            document.removeEventListener("mousedown", handlePointerDown);
-            document.removeEventListener("touchstart", handlePointerDown);
-        };
-    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
     return {
         opened: isOpen,
         open,
         close,
-        toggle
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            floating: floating.refs
+                .floating
+        },
+        getFloatingProps
     };
 }

package/build/components/password-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PasswordInput } from "./password-input";
+export * from "./password-input.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/password-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,cAAc,wBAAwB,CAAC"}

package/build/components/password-input/index.js

@@ -0,0 +1,2 @@
+export { default as PasswordInput } from "./password-input";
+export * from "./password-input.types";

package/build/components/password-input/password-input.d.ts

@@ -0,0 +1,4 @@
+import { PasswordInputFactoryPayload } from "./password-input.types";
+declare const PasswordInput: import("../..").RefraktorComponent<PasswordInputFactoryPayload>;
+export default PasswordInput;
+//# sourceMappingURL=password-input.d.ts.map

package/build/components/password-input/password-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/password-input.tsx"],"names":[],"mappings":"AAKA,OAAO,EACH,2BAA2B,EAE9B,MAAM,wBAAwB,CAAC;AAQhC,QAAA,MAAM,aAAa,iEA+DjB,CAAC;AAKH,eAAe,aAAa,CAAC"}