@trackunit/react-modal 1.10.1 → 1.10.2

package/index.cjs.js

@@ -56,26 +56,73 @@ const cvaModalContainer = cssClassVarianceUtilities.cvaMerge([
     "w-full",
     "flex",
     "fixed",
-    "top-0",
-    "left-0",
+    "inset-0",
     "min-h-[100dvh]",
     "min-w-[100dvw]",
     "overflow-auto",
     "items-center",
 ]);
+const modalSizeConfigs = {
+    small: {
+        // Small modal — confirmations / short messages
+        minWidth: "320px",
+        viewportWidthPercent: "40dvw",
+        paddingOffset: "1rem",
+        breakpoint: "480px",
+        transitionRate: 0.15,
+        maxWidth: "520px",
+        maxHeight: "48dvh",
+    },
+    medium: {
+        // Medium modal — simple forms and single-step flows
+        minWidth: "320px",
+        viewportWidthPercent: "64dvw",
+        paddingOffset: "1rem",
+        breakpoint: "480px",
+        transitionRate: 0.15,
+        maxWidth: "700px",
+        maxHeight: "60dvh",
+    },
+    large: {
+        // Large modal — tables, complex layouts, multi-column flows
+        minWidth: "320px",
+        viewportWidthPercent: "90dvw",
+        paddingOffset: "1rem",
+        breakpoint: "480px",
+        transitionRate: 0.15,
+        maxWidth: "1400px",
+        maxHeight: "min(80dvh, 1000px)",
+    },
+};
+/**
+ * Returns the CSS properties for the modal card based on the size.
+ */
+const getModalCardCSSVariables = (size) => {
+    const config = modalSizeConfigs[size];
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    return {
+        "--modal-min-width": config.minWidth,
+        "--modal-viewport-width-percent": config.viewportWidthPercent,
+        "--modal-padding-offset": config.paddingOffset,
+        "--modal-breakpoint": config.breakpoint,
+        "--modal-transition-rate": config.transitionRate,
+        "--modal-max-width": config.maxWidth,
+        "--modal-max-height": config.maxHeight,
+    };
+};
 const cvaModalCard = cssClassVarianceUtilities.cvaMerge([
     "m-auto",
     "shadow-2xl",
-    "w-[calc(100%-1rem)]",
-    "max-h-[min(100%-1rem,30%+600px)]",
-    "max-w-[min(100%-1rem,30%+600px)]",
+    "overflow-y-auto",
+    "w-[clamp(var(--modal-min-width),calc(var(--modal-viewport-width-percent)-var(--modal-padding-offset)-((100dvw-var(--modal-breakpoint))*var(--modal-transition-rate))),var(--modal-max-width))]",
+    "max-h-[var(--modal-max-height)]",
+    "@container", // This is used to target the container size for all children
 ]);
 const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
     "justify-center",
     "items-center",
     "fixed",
-    "top-0",
-    "left-0",
+    "inset-0",
     "min-h-[100dvh]",
     "min-w-[100dvw]",
     "w-full",
@@ -236,11 +283,14 @@ const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = tru
  * };
  * ```
  */
-const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
-    const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
+const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, size, onBackdropClick, floatingUi, ref, }) => {
+    // For dialogs/modals, Floating UI recommends not using floatingStyles since the modal
+    // is viewport-centered via CSS, not positioned relative to a reference element.
+    // See: https://floating-ui.com/docs/dialog
+    const { rootElement, refs, context, getFloatingProps } = floatingUi;
     const cardRef = react.useRef(null);
     useModalFooterBorder(cardRef, { enabled: isOpen, footerClass: "border-t pt-4" });
-    return (jsxRuntime.jsx(reactComponents.Portal, { root: rootElement, children: isOpen ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, children: jsxRuntime.jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: uiDesignTokens.zIndex.overlay }, ...getFloatingProps(), children: jsxRuntime.jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsxRuntime.jsx("div", { "aria-modal": true, className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), "data-testid": dataTestId, ref: cardRef, children: children }) }) }) }) })) : null }));
+    return (jsxRuntime.jsx(reactComponents.Portal, { root: rootElement, children: isOpen ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, children: jsxRuntime.jsx("div", { ref: refs.setFloating, style: { zIndex: uiDesignTokens.zIndex.overlay }, ...getFloatingProps(), children: jsxRuntime.jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsxRuntime.jsx("div", { "aria-modal": true, className: cvaModalContainer(), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), "data-testid": dataTestId, ref: cardRef, style: getModalCardCSSVariables(size), children: children }) }) }) }) })) : null }));
 };
 Modal.displayName = "Modal";
 
@@ -338,30 +388,32 @@ const ModalHeader = react.forwardRef(({ heading, subHeading, onClose, "data-test
  *
  * - `useModal` should be used with the `Modal` component.
  * - const modal = useModal();
- * - <Modal {...modal} />
+ * - <Modal {...modal} size="medium" />
  */
-const useModal = (props = {}) => {
-    const [isOpen, setIsOpen] = react.useState(Boolean(props.isOpen));
-    return useModalInner({
-        ...props,
-        setIsOpen,
-        isOpen: typeof props.isOpen === "boolean" ? props.isOpen : isOpen,
-    });
-};
-const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOutsideClick = true, closeOnEsc = true, onClose, onOpen, ref: customRef, }) => {
+const useModal = (props) => {
+    const { isOpen: controlledIsOpen, onOpenChange, rootElement, closeOnOutsideClick = true, closeOnEsc = true, onClose, onOpen, ref: customRef, role, } = props ?? {};
+    const [internalIsOpen, setIsOpen] = react.useState(Boolean(controlledIsOpen));
+    const isOpen = typeof controlledIsOpen === "boolean" ? controlledIsOpen : internalIsOpen;
+    const { blockScroll, restoreScroll } = reactComponents.useScrollBlock();
     const ref = react.useRef(null);
     const modalDialogContext = react.useContext(reactCoreContextsApi.ModalDialogContext);
     if (!modalDialogContext) {
         throw new Error("useModal must be used within the ModalDialogContextProvider");
     }
     const { openModal, closeModal } = modalDialogContext;
-    const { refs, floatingStyles, context } = react$1.useFloating({
+    const { refs, context } = react$1.useFloating({
         open: isOpen,
-        onOpenChange: (bool, event, openChangeReason) => {
+        onOpenChange: (newIsOpen, event, openChangeReason) => {
+            if (newIsOpen) {
+                blockScroll();
+            }
+            else {
+                restoreScroll();
+            }
             if (onOpenChange) {
-                return onOpenChange(bool, event, openChangeReason);
+                return onOpenChange(newIsOpen, event, openChangeReason);
             }
-            setIsOpen(bool);
+            setIsOpen(newIsOpen);
         },
         whileElementsMounted: react$1.autoUpdate,
         middleware: [react$1.shift()],
@@ -386,8 +438,9 @@ const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOu
     }, [isOpen, openModal, closeModal]);
     const open = react.useCallback((...args) => {
         onOpen?.(...args);
+        blockScroll();
         setIsOpen(true);
-    }, [onOpen, setIsOpen]);
+    }, [onOpen, blockScroll]);
     const close = react.useCallback((...args) => {
         for (const arg of args) {
             if (!arg || typeof arg !== "object") {
@@ -403,8 +456,9 @@ const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOu
             }
         }
         onClose?.(...args);
+        restoreScroll();
         setIsOpen(false);
-    }, [onClose, setIsOpen]);
+    }, [onClose, restoreScroll]);
     const toggle = react.useCallback((...args) => {
         if (isOpen) {
             return close(...args);
@@ -423,23 +477,11 @@ const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOu
         floatingUi: {
             refs,
             rootElement,
-            floatingStyles,
             context,
             getFloatingProps,
         },
-    }), [
-        close,
-        closeOnOutsideClick,
-        context,
-        customRef,
-        floatingStyles,
-        getFloatingProps,
-        isOpen,
-        open,
-        refs,
-        rootElement,
-        toggle,
-    ]);
+        role,
+    }), [isOpen, closeOnOutsideClick, toggle, open, close, customRef, refs, rootElement, context, getFloatingProps, role]);
 };
 
 /*

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { FloatingFocusManager, useFloating, autoUpdate, shift, useDismiss, useInteractions } from '@floating-ui/react';
-import { Portal, Card, Button, Heading, Text, IconButton, Icon } from '@trackunit/react-components';
+import { Portal, Card, Button, Heading, Text, IconButton, Icon, useScrollBlock } from '@trackunit/react-components';
 import { zIndex } from '@trackunit/ui-design-tokens';
 import { useRef, useLayoutEffect, forwardRef, useState, useContext, useEffect, useCallback, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -54,26 +54,73 @@ const cvaModalContainer = cvaMerge([
     "w-full",
     "flex",
     "fixed",
-    "top-0",
-    "left-0",
+    "inset-0",
     "min-h-[100dvh]",
     "min-w-[100dvw]",
     "overflow-auto",
     "items-center",
 ]);
+const modalSizeConfigs = {
+    small: {
+        // Small modal — confirmations / short messages
+        minWidth: "320px",
+        viewportWidthPercent: "40dvw",
+        paddingOffset: "1rem",
+        breakpoint: "480px",
+        transitionRate: 0.15,
+        maxWidth: "520px",
+        maxHeight: "48dvh",
+    },
+    medium: {
+        // Medium modal — simple forms and single-step flows
+        minWidth: "320px",
+        viewportWidthPercent: "64dvw",
+        paddingOffset: "1rem",
+        breakpoint: "480px",
+        transitionRate: 0.15,
+        maxWidth: "700px",
+        maxHeight: "60dvh",
+    },
+    large: {
+        // Large modal — tables, complex layouts, multi-column flows
+        minWidth: "320px",
+        viewportWidthPercent: "90dvw",
+        paddingOffset: "1rem",
+        breakpoint: "480px",
+        transitionRate: 0.15,
+        maxWidth: "1400px",
+        maxHeight: "min(80dvh, 1000px)",
+    },
+};
+/**
+ * Returns the CSS properties for the modal card based on the size.
+ */
+const getModalCardCSSVariables = (size) => {
+    const config = modalSizeConfigs[size];
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    return {
+        "--modal-min-width": config.minWidth,
+        "--modal-viewport-width-percent": config.viewportWidthPercent,
+        "--modal-padding-offset": config.paddingOffset,
+        "--modal-breakpoint": config.breakpoint,
+        "--modal-transition-rate": config.transitionRate,
+        "--modal-max-width": config.maxWidth,
+        "--modal-max-height": config.maxHeight,
+    };
+};
 const cvaModalCard = cvaMerge([
     "m-auto",
     "shadow-2xl",
-    "w-[calc(100%-1rem)]",
-    "max-h-[min(100%-1rem,30%+600px)]",
-    "max-w-[min(100%-1rem,30%+600px)]",
+    "overflow-y-auto",
+    "w-[clamp(var(--modal-min-width),calc(var(--modal-viewport-width-percent)-var(--modal-padding-offset)-((100dvw-var(--modal-breakpoint))*var(--modal-transition-rate))),var(--modal-max-width))]",
+    "max-h-[var(--modal-max-height)]",
+    "@container", // This is used to target the container size for all children
 ]);
 const cvaModalBackdrop = cvaMerge([
     "justify-center",
     "items-center",
     "fixed",
-    "top-0",
-    "left-0",
+    "inset-0",
     "min-h-[100dvh]",
     "min-w-[100dvw]",
     "w-full",
@@ -234,11 +281,14 @@ const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = tru
  * };
  * ```
  */
-const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
-    const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
+const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, size, onBackdropClick, floatingUi, ref, }) => {
+    // For dialogs/modals, Floating UI recommends not using floatingStyles since the modal
+    // is viewport-centered via CSS, not positioned relative to a reference element.
+    // See: https://floating-ui.com/docs/dialog
+    const { rootElement, refs, context, getFloatingProps } = floatingUi;
     const cardRef = useRef(null);
     useModalFooterBorder(cardRef, { enabled: isOpen, footerClass: "border-t pt-4" });
-    return (jsx(Portal, { root: rootElement, children: isOpen ? (jsx(FloatingFocusManager, { context: context, children: jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: zIndex.overlay }, ...getFloatingProps(), children: jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsx("div", { "aria-modal": true, className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), "data-testid": dataTestId, ref: cardRef, children: children }) }) }) }) })) : null }));
+    return (jsx(Portal, { root: rootElement, children: isOpen ? (jsx(FloatingFocusManager, { context: context, children: jsx("div", { ref: refs.setFloating, style: { zIndex: zIndex.overlay }, ...getFloatingProps(), children: jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsx("div", { "aria-modal": true, className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), "data-testid": dataTestId, ref: cardRef, style: getModalCardCSSVariables(size), children: children }) }) }) }) })) : null }));
 };
 Modal.displayName = "Modal";
 
@@ -336,30 +386,32 @@ const ModalHeader = forwardRef(({ heading, subHeading, onClose, "data-testid": d
  *
  * - `useModal` should be used with the `Modal` component.
  * - const modal = useModal();
- * - <Modal {...modal} />
+ * - <Modal {...modal} size="medium" />
  */
-const useModal = (props = {}) => {
-    const [isOpen, setIsOpen] = useState(Boolean(props.isOpen));
-    return useModalInner({
-        ...props,
-        setIsOpen,
-        isOpen: typeof props.isOpen === "boolean" ? props.isOpen : isOpen,
-    });
-};
-const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOutsideClick = true, closeOnEsc = true, onClose, onOpen, ref: customRef, }) => {
+const useModal = (props) => {
+    const { isOpen: controlledIsOpen, onOpenChange, rootElement, closeOnOutsideClick = true, closeOnEsc = true, onClose, onOpen, ref: customRef, role, } = props ?? {};
+    const [internalIsOpen, setIsOpen] = useState(Boolean(controlledIsOpen));
+    const isOpen = typeof controlledIsOpen === "boolean" ? controlledIsOpen : internalIsOpen;
+    const { blockScroll, restoreScroll } = useScrollBlock();
     const ref = useRef(null);
     const modalDialogContext = useContext(ModalDialogContext);
     if (!modalDialogContext) {
         throw new Error("useModal must be used within the ModalDialogContextProvider");
     }
     const { openModal, closeModal } = modalDialogContext;
-    const { refs, floatingStyles, context } = useFloating({
+    const { refs, context } = useFloating({
         open: isOpen,
-        onOpenChange: (bool, event, openChangeReason) => {
+        onOpenChange: (newIsOpen, event, openChangeReason) => {
+            if (newIsOpen) {
+                blockScroll();
+            }
+            else {
+                restoreScroll();
+            }
             if (onOpenChange) {
-                return onOpenChange(bool, event, openChangeReason);
+                return onOpenChange(newIsOpen, event, openChangeReason);
             }
-            setIsOpen(bool);
+            setIsOpen(newIsOpen);
         },
         whileElementsMounted: autoUpdate,
         middleware: [shift()],
@@ -384,8 +436,9 @@ const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOu
     }, [isOpen, openModal, closeModal]);
     const open = useCallback((...args) => {
         onOpen?.(...args);
+        blockScroll();
         setIsOpen(true);
-    }, [onOpen, setIsOpen]);
+    }, [onOpen, blockScroll]);
     const close = useCallback((...args) => {
         for (const arg of args) {
             if (!arg || typeof arg !== "object") {
@@ -401,8 +454,9 @@ const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOu
             }
         }
         onClose?.(...args);
+        restoreScroll();
         setIsOpen(false);
-    }, [onClose, setIsOpen]);
+    }, [onClose, restoreScroll]);
     const toggle = useCallback((...args) => {
         if (isOpen) {
             return close(...args);
@@ -421,23 +475,11 @@ const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOu
         floatingUi: {
             refs,
             rootElement,
-            floatingStyles,
             context,
             getFloatingProps,
         },
-    }), [
-        close,
-        closeOnOutsideClick,
-        context,
-        customRef,
-        floatingStyles,
-        getFloatingProps,
-        isOpen,
-        open,
-        refs,
-        rootElement,
-        toggle,
-    ]);
+        role,
+    }), [isOpen, closeOnOutsideClick, toggle, open, close, customRef, refs, rootElement, context, getFloatingProps, role]);
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,13 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.12.1",
-    "@trackunit/css-class-variance-utilities": "1.9.1",
-    "@trackunit/i18n-library-translation": "1.9.1",
+    "@trackunit/react-components": "1.12.2",
+    "@trackunit/css-class-variance-utilities": "1.9.2",
+    "@trackunit/i18n-library-translation": "1.9.2",
     "@floating-ui/react": "^0.26.25",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/ui-design-tokens": "1.9.1",
-    "@trackunit/react-core-contexts-api": "1.10.1"
+    "@trackunit/ui-design-tokens": "1.9.2",
+    "@trackunit/react-core-contexts-api": "1.10.2",
+    "@trackunit/shared-utils": "1.11.2"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/Modal.d.ts

@@ -1,23 +1,23 @@
-import { AriaRole, PropsWithChildren } from "react";
+import { Size } from "@trackunit/react-components";
+import { PropsWithChildren, ReactElement } from "react";
 import { BaseUseModalActionArgs, UseModalReturnValue } from "./useModal";
-export type ModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []> = {
+/**
+ * Modal props extend the return type of useModal and add presentational-only props.
+ */
+export type ModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []> = PropsWithChildren<UseModalReturnValue<TOnCloseFnArgs, TOnOpenFnArgs> & {
     /**
-     * The aria role for the modal.
+     * The size of the modal card.
      */
-    role?: AriaRole;
+    size: Size;
     /**
      * The classes for the modal.
      */
     className?: string;
-    /**
-     * The classes for the container of the modal.
-     */
-    containerClassName?: string;
     /**
      * The test ID applied to the modal.
      */
     "data-testid"?: string;
-} & PropsWithChildren<UseModalReturnValue<TOnCloseFnArgs, TOnOpenFnArgs>>;
+}>;
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
  * - Modals interrupt a user's workflow by design.
@@ -46,6 +46,6 @@ export type ModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOp
  * ```
  */
 export declare const Modal: {
-    <TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []>({ children, isOpen, role, "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }: ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): import("react/jsx-runtime").JSX.Element;
+    <TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []>({ children, isOpen, role, "data-testid": dataTestId, className, size, onBackdropClick, floatingUi, ref, }: ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): ReactElement;
     displayName: string;
 };

package/src/modal/Modal.stories.d.ts

@@ -1,13 +1,18 @@
+import { StoryObjWithOptionalArgs } from "@trackunit/shared-utils";
 import { ReactElement } from "react";
+type Story = StoryObjWithOptionalArgs<typeof meta, "ref" | "isOpen" | "close" | "open" | "toggle" | "onBackdropClick" | "floatingUi" | "children" | "closeOnOutsideClick">;
 declare const meta: {
     title: string;
     component: {
-        <TOnCloseFnArgs extends import("./useModal").BaseUseModalActionArgs = [], TOnOpenFnArgs extends import("./useModal").BaseUseModalActionArgs = []>({ children, isOpen, role, "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }: import("./Modal").ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): import("react/jsx-runtime").JSX.Element;
+        <TOnCloseFnArgs extends import("./useModal").BaseUseModalActionArgs = [], TOnOpenFnArgs extends import("./useModal").BaseUseModalActionArgs = []>({ children, isOpen, role, "data-testid": dataTestId, className, size, onBackdropClick, floatingUi, ref, }: import("./Modal").ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): ReactElement;
         displayName: string;
     };
     tags: string[];
     parameters: {
         docs: {
+            description: {
+                component: string;
+            };
             source: {
                 type: string;
                 excludeDecorators: boolean;
@@ -16,44 +21,56 @@ declare const meta: {
     };
     argTypes: {
         floatingUi: {
-            table: {
-                disable: true;
-            };
-        };
-        closeOnOutsideClick: {
+            control: false;
+            description: string;
             table: {
                 category: string;
-                defaultValue: {
-                    summary: string;
-                };
             };
         };
         ref: {
+            control: false;
+            description: string;
             table: {
                 category: string;
             };
         };
         onBackdropClick: {
+            control: false;
+            description: string;
             table: {
                 category: string;
             };
         };
         open: {
+            control: false;
+            description: string;
             table: {
                 category: string;
             };
         };
         close: {
+            control: false;
+            description: string;
             table: {
                 category: string;
             };
         };
         toggle: {
+            control: false;
+            description: string;
             table: {
                 category: string;
             };
         };
         isOpen: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        closeOnOutsideClick: {
+            control: false;
             description: string;
             table: {
                 category: string;
@@ -62,35 +79,22 @@ declare const meta: {
                 };
             };
         };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;
 export declare const PackageName: () => ReactElement;
-export declare const Default: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {};
-};
-export declare const IncorrectUsageErrorModal: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {};
-};
-export declare const CorrectUsagePrimaryAction: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {};
-};
-export declare const IncorrectUsageLongText: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {};
-};
-export declare const CorrectUsageImportantAction: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {};
-};
-export declare const CorrectAccessibility: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {};
-};
-export declare const CorrectStateManagement: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {};
-};
+export declare const Default: Story;
+export declare const WithScrollableContent: Story;
+export declare const MultiColumnLayout: Story;

package/src/modal/Modal.variants.d.ts

@@ -1,3 +1,9 @@
+import { Size } from "@trackunit/react-components";
+import { CSSProperties } from "react";
 export declare const cvaModalContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+/**
+ * Returns the CSS properties for the modal card based on the size.
+ */
+export declare const getModalCardCSSVariables: (size: Size) => CSSProperties;
 export declare const cvaModalCard: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaModalBackdrop: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/modal/modalSizeUsage.d.ts

@@ -0,0 +1,11 @@
+interface SizeSection {
+    label: string;
+    items: Array<string>;
+}
+interface SizeInfo {
+    description: string;
+    specs: Array<string>;
+    sections: Array<SizeSection>;
+}
+export declare const MODAL_SIZE_INFO: Record<"small" | "medium" | "large", SizeInfo>;
+export {};

package/src/modal/useModal.d.ts

@@ -1,7 +1,7 @@
 import { UseFloatingOptions, UseFloatingReturn } from "@floating-ui/react";
 import { UseFloatingReturn as UseFloatingReturn_Dom } from "@floating-ui/react-dom";
 import { UseInteractionsReturn } from "@floating-ui/react/dist/floating-ui.react";
-import { MouseEvent, Ref } from "react";
+import { AriaRole, MouseEvent, Ref } from "react";
 type BaseUseModalActionArg = string | number | boolean | null | undefined | [] | object | MouseEvent;
 export type BaseUseModalActionArgs = {} & Array<BaseUseModalActionArg>;
 type OnCloseFn<TOnCloseFnArgs extends BaseUseModalActionArgs> = (...args: TOnCloseFnArgs) => void;
@@ -15,10 +15,13 @@ export type UseModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TO
     closeOnEsc?: boolean;
     closeOnOutsideClick?: boolean;
     ref?: Ref<HTMLDivElement>;
+    /**
+     * The aria role for the modal.
+     */
+    role?: AriaRole;
 };
 type FloatingUiProps = {
     refs: UseFloatingReturn_Dom["refs"];
-    floatingStyles: UseFloatingReturn_Dom["floatingStyles"];
     rootElement?: HTMLElement;
     context: UseFloatingReturn["context"];
     getFloatingProps: UseInteractionsReturn["getFloatingProps"];
@@ -56,13 +59,17 @@ export type UseModalReturnValue<TOnCloseFnArgs extends BaseUseModalActionArgs =
      * The floating UI properties for the modal.
      */
     floatingUi: FloatingUiProps;
+    /**
+     * The aria role for the modal.
+     */
+    role?: AriaRole;
 };
 /**
  * A hook to handle the state and configuration of Modal components.
  *
  * - `useModal` should be used with the `Modal` component.
  * - const modal = useModal();
- * - <Modal {...modal} />
+ * - <Modal {...modal} size="medium" />
  */
 export declare const useModal: <TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []>(props?: UseModalProps<TOnCloseFnArgs, TOnOpenFnArgs>) => UseModalReturnValue<TOnCloseFnArgs, TOnOpenFnArgs>;
 export {};