@refraktor/core 0.0.1

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

@@ -0,0 +1,102 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { autoUpdate, flip, inline, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { useCallback, useMemo } from "react";
+export function useMenu(options = {}) {
+    const { opened, defaultOpened, onOpenedChange, positioning = {
+        placement: "bottom-start",
+        offset: 4
+    }, middlewares = { flip: true, shift: true }, disabled = false, trigger = "click", closeOnClickOutside = true, closeOnEscape = true, openDelay = 0, closeDelay = 100 } = options;
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const middleware = useMemo(() => {
+        const middlewareList = [];
+        middlewareList.push(offset(positioning.offset ?? 4));
+        if (middlewares.flip) {
+            middlewareList.push(flip(typeof middlewares.flip === "boolean"
+                ? undefined
+                : middlewares.flip));
+        }
+        if (middlewares.shift) {
+            middlewareList.push(shift(typeof middlewares.shift === "boolean"
+                ? undefined
+                : middlewares.shift));
+        }
+        if (middlewares.inline) {
+            middlewareList.push(inline(typeof middlewares.inline === "boolean"
+                ? undefined
+                : middlewares.inline));
+        }
+        return middlewareList;
+    }, [positioning.offset, middlewares]);
+    const floating = useFloating({
+        placement: positioning.placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+    const click = useClick(floating.context, {
+        enabled: trigger === "click" && !disabled
+    });
+    const hover = useHover(floating.context, {
+        enabled: trigger === "hover" && !disabled,
+        handleClose: safePolygon(),
+        delay: {
+            open: openDelay,
+            close: closeDelay
+        }
+    });
+    const focus = useFocus(floating.context, {
+        enabled: trigger === "focus" && !disabled
+    });
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+    const role = useRole(floating.context, {
+        role: "menu"
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        hover,
+        focus,
+        dismiss,
+        role
+    ]);
+    const open = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [setIsOpen, disabled]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    }, [setIsOpen, isOpen, disabled]);
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            reference: floating.refs
+                .reference,
+            floating: floating.refs
+                .floating
+        },
+        floatingStyles: floating.floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        placement: floating.placement
+    };
+}

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

@@ -0,0 +1,8 @@
+export { default as Modal } from "./modal";
+export { ModalRoot } from "./modal-root";
+export { ModalOverlay } from "./modal-overlay";
+export { ModalContent } from "./modal-content";
+export { ModalHeader } from "./modal-header";
+export { ModalClose } from "./modal-close";
+export type { ModalProps, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalHeaderProps, ModalCloseProps, ModalClassNames } from "./modal.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACR,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,eAAe,EAClB,MAAM,eAAe,CAAC"}

package/build/components/modal/index.js

@@ -0,0 +1,6 @@
+export { default as Modal } from "./modal";
+export { ModalRoot } from "./modal-root";
+export { ModalOverlay } from "./modal-overlay";
+export { ModalContent } from "./modal-content";
+export { ModalHeader } from "./modal-header";
+export { ModalClose } from "./modal-close";

package/build/components/modal/modal-close/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalClose } from "./modal-close";
+//# sourceMappingURL=index.d.ts.map

package/build/components/modal/modal-close/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-close/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/build/components/modal/modal-close/index.js

@@ -0,0 +1 @@
+export { default as ModalClose } from "./modal-close";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal-close.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-close/modal-close.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,QAAA,MAAM,UAAU,iEAoCf,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XIcon } from "../../../icons";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useModalContext } from "../modal.context";
+const ModalClose = factory(({ children, className, onClick, type = "button", ...props }, ref) => {
+    const { cx } = useTheme();
+    const { modal, getStyles } = useModalContext();
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        modal.close();
+    };
+    return (_jsx("button", { ref: ref, type: type, "aria-label": "Close", className: cx("absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-full cursor-pointer border border-transparent", "text-base text-[var(--refraktor-text-secondary)] transition-all", "hover:border-[var(--refraktor-border)] hover:bg-[var(--refraktor-bg-subtle)] hover:text-[var(--refraktor-text)]", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "active:scale-95", getStyles("close"), className), onClick: handleClick, ...props, children: children ?? _jsx(XIcon, {}) }));
+});
+ModalClose.displayName = "@refraktor/core/Modal.Close";
+export default ModalClose;

package/build/components/modal/modal-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalContent } from "./modal-content";
+//# sourceMappingURL=index.d.ts.map

package/build/components/modal/modal-content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1 @@
+export { default as ModalContent } from "./modal-content";

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Portal } from "../../portal";
+import { Transition } from "../../transition";
+import { useModalContext } from "../modal.context";
+const ModalContent = factory(({ children, className, style, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { modal, withinPortal, radius, transitionProps, headerId, contentRef, getStyles } = useModalContext();
+    const setRefs = (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
+    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 p-3 sm:p-6 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-[36rem]", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg-elevated)] px-5 pb-5 pt-4 text-[var(--refraktor-text)] shadow-[0_30px_80px_-40px_rgba(0,0,0,0.75)] sm:px-6 sm:pb-6 sm:pt-5", "max-h-[calc(100vh-1.5rem)] max-h-[calc(100dvh-1.5rem)] overflow-y-auto refraktor-scrollbar", getRadius(radius), getStyles("content"), className), ...props, children: children }) }));
+    return withinPortal ? _jsx(Portal, { children: content }) : content;
+});
+ModalContent.displayName = "@refraktor/core/Modal.Content";
+export default ModalContent;

package/build/components/modal/modal-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalHeader } from "./modal-header";
+//# sourceMappingURL=index.d.ts.map

package/build/components/modal/modal-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1 @@
+export { default as ModalHeader } from "./modal-header";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-header/modal-header.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,QAAA,MAAM,WAAW,kEA2BhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { cx } = useTheme();
+    const { headerId, getStyles } = useModalContext();
+    const resolvedId = id ?? headerId;
+    return (_jsxs("div", { ref: ref, className: cx("mb-3 flex items-center justify-between gap-2.5", 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" })] }));
+});
+ModalHeader.displayName = "@refraktor/core/Modal.Header";
+export default ModalHeader;

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

@@ -0,0 +1,2 @@
+export { default as ModalOverlay } from "./modal-overlay";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1 @@
+export { default as ModalOverlay } from "./modal-overlay";

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

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

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

@@ -0,0 +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,mEAoDjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, className, onMouseDown, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { modal, closeOnClickOutside, withinPortal, transitionProps, getStyles } = useModalContext();
+    const handleMouseDown = (event) => {
+        onMouseDown?.(event);
+        if (event.defaultPrevented ||
+            !closeOnClick ||
+            !closeOnClickOutside) {
+            return;
+        }
+        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 bg-gradient-to-b from-black/60 via-black/45 to-black/65 backdrop-blur-[2px]", getStyles("overlay"), className), onMouseDown: handleMouseDown, ...props }) }));
+    return withinPortal ? (_jsx(Portal, { children: overlayContent })) : (overlayContent);
+});
+ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";
+export default ModalOverlay;

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

@@ -0,0 +1,2 @@
+export { default as ModalRoot } from "./modal-root";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-root/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1 @@
+export { default as ModalRoot } from "./modal-root";

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,46 @@
+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"
+};
+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 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
+    });
+    const getStyles = (part) => classes[part];
+    return (_jsx(ModalProvider, { value: {
+            modal,
+            closeOnClickOutside,
+            lockScroll,
+            withinPortal,
+            radius,
+            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 }) }) }));
+});
+ModalRoot.displayName = "@refraktor/core/Modal.Root";
+export default ModalRoot;

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

@@ -0,0 +1,21 @@
+import { RefraktorRadius } from "../../theme";
+import { TransitionProps } from "../transition";
+import { ModalClassNames } from "./modal.types";
+import { UseModalReturn } from "./use-modal";
+export interface ModalContextValue {
+    modal: UseModalReturn;
+    closeOnClickOutside: boolean;
+    lockScroll: boolean;
+    withinPortal: boolean;
+    radius: RefraktorRadius;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    headerId: string;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    classNames?: ModalClassNames;
+    getStyles: (part: keyof ModalClassNames) => string | undefined;
+}
+export declare const ModalProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: ModalContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useModalContext: () => ModalContextValue;
+//# sourceMappingURL=modal.context.d.ts.map

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

@@ -0,0 +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"}

package/build/components/modal/modal.context.js

@@ -0,0 +1,2 @@
+import { createSafeContext } from "@refraktor/utils";
+export const [ModalProvider, useModalContext] = createSafeContext("Modal context was not found in tree. Make sure Modal subcomponents are wrapped with Modal or ModalRoot.");

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

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

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

@@ -0,0 +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"}

package/build/components/modal/modal.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory } from "../../utils";
+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 });
+});
+Modal.displayName = "@refraktor/core/Modal";
+Modal.configure = createComponentConfig();
+Modal.classNames = createClassNamesConfig();
+Modal.Root = ModalRoot;
+Modal.Overlay = ModalOverlay;
+Modal.Content = ModalContent;
+Modal.Header = ModalHeader;
+Modal.Close = ModalClose;
+export default Modal;

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=modal.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.test.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,53 @@
+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 { ModalContent } from "./modal-content";
+import { ModalOverlay } from "./modal-overlay";
+import { ModalRoot } from "./modal-root";
+describe("@refraktor/core/Modal", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    };
+    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?" })] })] }));
+        expect(await screen.findByRole("dialog", { name: "Delete item" })).toBeInTheDocument();
+        await user.click(screen.getByRole("button", { name: "Close" }));
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+    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 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 screen.findByRole("dialog");
+        await user.keyboard("{Escape}");
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+    it("supports standalone subcomponents with ModalRoot", async () => {
+        await render(_jsxs(ModalRoot, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(ModalOverlay, {}), _jsx(ModalContent, { children: "Standalone composition" })] }));
+        expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    });
+    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");
+        });
+        await user.click(screen.getByRole("button", { name: "Close" }));
+        await waitFor(() => {
+            expect(document.body).not.toHaveAttribute("data-scroll-locked");
+        });
+    });
+});

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

@@ -0,0 +1,107 @@
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { RefraktorRadius } from "../../theme";
+import { TransitionProps } from "../transition";
+import { ModalRoot } from "./modal-root";
+import { ModalOverlay } from "./modal-overlay";
+import { ModalContent } from "./modal-content";
+import { ModalHeader } from "./modal-header";
+import { ModalClose } from "./modal-close";
+export type ModalClassNames = {
+    root?: string;
+    overlay?: string;
+    content?: string;
+    header?: string;
+    close?: string;
+};
+export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing modal subcomponents */
+    children: ReactNode;
+    /** State of the modal (controlled) */
+    opened?: boolean;
+    /** Initial state of the modal (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Callback called when modal state changes */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Whether to close modal on overlay/outside click @default `true` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close modal on Escape key @default `true` */
+    closeOnEscape?: boolean;
+    /** Whether to lock body scroll while opened @default `true` */
+    lockScroll?: boolean;
+    /** Whether to render overlay/content inside portal @default `true` */
+    withinPortal?: boolean;
+    /** Radius for modal content @default `md` */
+    radius?: RefraktorRadius;
+    /** Transition props for overlay/content, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: ModalClassNames;
+}
+export type ModalRootProps = ModalProps;
+export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
+    /** Whether clicking the overlay closes modal @default `true` */
+    closeOnClick?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface ModalContentProps extends ComponentPropsWithoutRef<"div"> {
+    /** Modal body content */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+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 ModalCloseProps extends Omit<ComponentPropsWithoutRef<"button">, "onClick"> {
+    /** Optional close content (defaults to `x`) */
+    children?: ReactNode;
+    /** Click callback fired before closing */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface ModalFactoryPayload extends FactoryPayload {
+    props: ModalProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ModalProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ModalClassNames>>;
+        Root: typeof ModalRoot;
+        Overlay: typeof ModalOverlay;
+        Content: typeof ModalContent;
+        Header: typeof ModalHeader;
+        Close: typeof ModalClose;
+    };
+}
+export interface ModalRootFactoryPayload extends FactoryPayload {
+    props: ModalRootProps;
+    ref: HTMLDivElement;
+}
+export interface ModalOverlayFactoryPayload extends FactoryPayload {
+    props: ModalOverlayProps;
+    ref: HTMLDivElement;
+}
+export interface ModalContentFactoryPayload extends FactoryPayload {
+    props: ModalContentProps;
+    ref: HTMLDivElement;
+}
+export interface ModalHeaderFactoryPayload extends FactoryPayload {
+    props: ModalHeaderProps;
+    ref: HTMLDivElement;
+}
+export interface ModalCloseFactoryPayload extends FactoryPayload {
+    props: ModalCloseProps;
+    ref: HTMLButtonElement;
+}
+//# sourceMappingURL=modal.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC/D,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;IAEpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAE3C,sEAAsE;IACtE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,uEAAuE;IACvE,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAEhE,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,eAAe,CAAC;CAChC;AAED,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IAEpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC3D,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACvD,KAAK,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;QAChE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC;QACvE,IAAI,EAAE,OAAO,SAAS,CAAC;QACvB,OAAO,EAAE,OAAO,YAAY,CAAC;QAC7B,OAAO,EAAE,OAAO,YAAY,CAAC;QAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;QAC3B,KAAK,EAAE,OAAO,UAAU,CAAC;KAC5B,CAAC;CACL;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC3D,KAAK,EAAE,cAAc,CAAC;IACtB,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IAC9D,KAAK,EAAE,iBAAiB,CAAC;IACzB,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IAC9D,KAAK,EAAE,iBAAiB,CAAC;IACzB,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC5D,KAAK,EAAE,eAAe,CAAC;IACvB,GAAG,EAAE,iBAAiB,CAAC;CAC1B"}

package/build/components/modal/modal.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+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;
+}
+export declare function useModal(options: UseModalProps): UseModalReturn;
+export {};
+//# sourceMappingURL=use-modal.d.ts.map

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

@@ -0,0 +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"}