@uxf/ui 11.48.4 → 11.49.0

package/components.d.ts

@@ -30,7 +30,7 @@ import * as formComponentStories from "./form-component/form-component.stories";
 import * as iconStories from "./icon/icon.stories";
 import * as iconButtonStories from "./icon-button/icon-button.stories";
 import * as imageGalleryStories from "./image-gallery/image-gallery.stories";
-import * as infoboxStories from "./info-box/info-box.stories";
+import * as infoBoxStories from "./info-box/info-box.stories";
 import * as inputStories from "./input/input.stories";
 import * as labelStories from "./label/label.stories";
 import * as layoutStories from "./layout/layout.stories";
@@ -187,9 +187,9 @@ export declare const components: {
         readonly title: "ImageGallery";
         readonly stories: typeof imageGalleryStories;
     };
-    readonly infobox: {
-        readonly title: "Infobox";
-        readonly stories: typeof infoboxStories;
+    readonly "info-box": {
+        readonly title: "InfoBox";
+        readonly stories: typeof infoBoxStories;
     };
     readonly input: {
         readonly title: "Input";

package/components.js

@@ -57,7 +57,7 @@ const formComponentStories = __importStar(require("./form-component/form-compone
 const iconStories = __importStar(require("./icon/icon.stories"));
 const iconButtonStories = __importStar(require("./icon-button/icon-button.stories"));
 const imageGalleryStories = __importStar(require("./image-gallery/image-gallery.stories"));
-const infoboxStories = __importStar(require("./info-box/info-box.stories"));
+const infoBoxStories = __importStar(require("./info-box/info-box.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
 const labelStories = __importStar(require("./label/label.stories"));
 const layoutStories = __importStar(require("./layout/layout.stories"));
@@ -214,9 +214,9 @@ exports.components = {
         title: "ImageGallery",
         stories: imageGalleryStories
     },
-    "infobox": {
-        title: "Infobox",
-        stories: infoboxStories
+    "info-box": {
+        title: "InfoBox",
+        stories: infoBoxStories
     },
     "input": {
         title: "Input",

package/css/dialog.css

@@ -1,5 +1,4 @@
 .uxf-dialog {
-    --panel-max-w: unset;
     --panel-border-radius: theme("borderRadius.2xl");
 
     position: relative;
@@ -30,6 +29,10 @@
         }
     }
 
+    &__panel-wrapper {
+        display: contents;
+    }
+
     &__panel {
         background-color: theme("colors.white");
         border-top-left-radius: var(--panel-border-radius);
@@ -48,6 +51,26 @@
         @screen sm {
             border-radius: var(--panel-border-radius);
         }
+
+        &--width-xs {
+            --panel-max-w: theme("maxWidth.xs");
+        }
+
+        &--width-sm {
+            --panel-max-w: theme("maxWidth.sm");
+        }
+
+        &--width-default {
+            --panel-max-w: theme("maxWidth.lg");
+        }
+
+        &--width-lg {
+            --panel-max-w: theme("maxWidth.3xl");
+        }
+
+        &--width-xl {
+            --panel-max-w: theme("maxWidth.5xl");
+        }
     }
 
     &--variant-drawer-right {

package/dialog/dialog-panel.d.ts

@@ -0,0 +1,12 @@
+import { DialogPanelWidths } from "@uxf/ui/dialog/theme";
+import React, { ReactNode } from "react";
+export type DialogPanelWidth = keyof DialogPanelWidths;
+export interface DialogPanelProps {
+    children?: ReactNode;
+    className?: string;
+    width?: DialogPanelWidth;
+}
+export declare function DialogPanel(props: DialogPanelProps): React.JSX.Element;
+export declare namespace DialogPanel {
+    var displayName: string;
+}

package/dialog/dialog-panel.js

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogPanel = DialogPanel;
+const react_1 = __importDefault(require("react"));
+function DialogPanel(props) {
+    var _a, _b;
+    return (react_1.default.createElement("div", { className: `uxf-dialog__panel uxf-dialog__panel--width-${(_a = props.width) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
+}
+DialogPanel.displayName = "UxfUiDialogPanel";

package/dialog/dialog.d.ts

@@ -1,7 +1,8 @@
 import { UseFloatingReturn } from "@floating-ui/react";
-import { DialogVariant, DialogWidth } from "@uxf/ui/dialog/theme";
+import { DialogVariants } from "@uxf/ui/dialog/theme";
 import React, { FC, HTMLProps, ReactNode, Ref } from "react";
 type GetFloatingElementProps = (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+export type DialogVariant = keyof DialogVariants;
 export interface DialogProps {
     children?: ReactNode;
     className?: string;
@@ -11,9 +12,8 @@ export interface DialogProps {
     getFloatingProps: GetFloatingElementProps;
     isOpen: boolean;
     variant?: DialogVariant;
-    width?: DialogWidth;
 }
-type DialogProviderProps = Pick<DialogProps, "variant" | "width" | "className" | "children">;
+type DialogProviderProps = Pick<DialogProps, "variant" | "className" | "children">;
 export declare const Dialog: React.NamedExoticComponent<DialogProps>;
 type DialogCloseHandler = () => void;
 export declare function useDialog(dialogConfig?: {

package/dialog/dialog.js

@@ -32,14 +32,14 @@ const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_2 = __importStar(require("react"));
 exports.Dialog = (0, react_2.memo)((props) => {
-    var _a, _b, _c;
+    var _a, _b;
     return (react_2.default.createElement(react_1.FloatingPortal, null,
         react_2.default.createElement(show_1.Show, { when: props.isOpen },
-            react_2.default.createElement(react_1.FloatingOverlay, { className: `uxf-dialog uxf-dialog__backdrop uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""} uxf-dialog--width-${(_c = props.width) !== null && _c !== void 0 ? _c : "default"}`, lockScroll: true },
+            react_2.default.createElement(react_1.FloatingOverlay, { className: `uxf-dialog uxf-dialog__backdrop uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, lockScroll: true },
                 react_2.default.createElement(react_1.FloatingFocusManager, { context: props.context, guards: true, initialFocus: 0, modal: true },
                     react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
                         react_2.default.createElement("div", { className: "uxf-dialog__body" },
-                            react_2.default.createElement("div", { className: "uxf-dialog__panel", ref: props.forwardedRef, ...props.getFloatingProps() }, props.children))))))));
+                            react_2.default.createElement("div", { className: "uxf-dialog__panel-wrapper", ref: props.forwardedRef, ...props.getFloatingProps() }, props.children))))))));
 });
 exports.Dialog.displayName = "UxfUiDialog";
 function useDialog(dialogConfig) {
@@ -64,7 +64,7 @@ function useDialog(dialogConfig) {
     const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
     const latestContext = (0, use_latest_1.useLatest)(context);
     const DialogProvider = (0, react_2.useCallback)((config) => {
-        return (react_2.default.createElement(exports.Dialog, { className: config === null || config === void 0 ? void 0 : config.className, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: Boolean(content), variant: config === null || config === void 0 ? void 0 : config.variant, width: config === null || config === void 0 ? void 0 : config.width }, content));
+        return (react_2.default.createElement(exports.Dialog, { className: config === null || config === void 0 ? void 0 : config.className, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: Boolean(content), variant: config === null || config === void 0 ? void 0 : config.variant }, content));
     }, [latestContext, refs.setFloating, getFloatingProps, content]);
     return {
         openDialog: setContent,

package/dialog/index.d.ts

@@ -1,2 +1,4 @@
 export { Dialog } from "./dialog";
-export type { DialogProps } from "./dialog";
+export type { DialogProps, DialogVariant } from "./dialog";
+export { DialogPanel } from "./dialog-panel";
+export type { DialogPanelProps, DialogPanelWidth } from "./dialog-panel";

package/dialog/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
+exports.DialogPanel = exports.Dialog = void 0;
 var dialog_1 = require("./dialog");
 Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return dialog_1.Dialog; } });
+var dialog_panel_1 = require("./dialog-panel");
+Object.defineProperty(exports, "DialogPanel", { enumerable: true, get: function () { return dialog_panel_1.DialogPanel; } });

package/dialog/theme.d.ts

@@ -2,12 +2,10 @@ export interface DialogVariants {
     default: true;
     "drawer-right": true;
 }
-export type DialogVariant = keyof DialogVariants;
-export interface DialogWidths {
+export interface DialogPanelWidths {
     xs: true;
     sm: true;
     default: true;
     lg: true;
     xl: true;
 }
-export type DialogWidth = keyof DialogWidths;

package/modal/README.md

@@ -4,21 +4,59 @@
 
 ```css
 @import url("@uxf/ui/dialog/dialog.css");
-@import url("@uxf/ui/modal/modal.css");
 ```
 
-## Implementation
+## Implementation ModalProvider
 
 ```tsx
 import {AppProps} from "next/app";
-import {getModalRef, Modal} from "@uxf/ui/modal";
+import {getModalRef, ModalProvider} from "@uxf/ui/modal";
 
 function App(props: AppProps) {
     return (
         <UiContextProvider value={...}>
             {props.children}
-            <Modal ref={getModalRef()}/>
+            <ModalProvider ref={getModalRef()}/>
         </UiContextProvider>
     );
 }
+
+function Component(props: AppProps) {
+    return (
+        <div>
+            <Button
+                onClick={() =>
+                    openModal({
+                        children: (
+                            <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
+                        ),
+                        onClose: () => console.log("modal closed"),
+                    })
+                }
+            >
+                Click to open modal - default
+            </Button>
+        </div>
+    );
+}
+
+
+
+```
+
+## Implementation Modal
+
+```tsx
+function Component(props: AppProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    
+    return (
+        <div>
+            <Button onClick={() => setIsOpen(true)}>Click to open modal</Button>
+            <Modal close={() => setIsOpen(false)} isOpen={isOpen}>
+                <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
+            </Modal>
+        </div>
+    );
+}
 ```

package/modal/index.d.ts

@@ -1,4 +1,4 @@
 export { Modal } from "./modal";
-export type { ModalProps, ModalRef } from "./modal";
+export { ModalProvider } from "./modal-provider";
 export { closeModal, getModalRef, openModal } from "./modal-service";
-export type { ModalWidth } from "./theme";
+export type { ModalProps, ModalProviderProps, ModalRef, ModalVariant } from "./types";

package/modal/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openModal = exports.getModalRef = exports.closeModal = exports.Modal = void 0;
+exports.openModal = exports.getModalRef = exports.closeModal = exports.ModalProvider = exports.Modal = void 0;
 var modal_1 = require("./modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
+var modal_provider_1 = require("./modal-provider");
+Object.defineProperty(exports, "ModalProvider", { enumerable: true, get: function () { return modal_provider_1.ModalProvider; } });
 var modal_service_1 = require("./modal-service");
 Object.defineProperty(exports, "closeModal", { enumerable: true, get: function () { return modal_service_1.closeModal; } });
 Object.defineProperty(exports, "getModalRef", { enumerable: true, get: function () { return modal_service_1.getModalRef; } });

package/modal/modal-provider.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ModalRef } from "./types";
+export declare const ModalProvider: React.ForwardRefExoticComponent<React.RefAttributes<ModalRef>>;

package/modal/modal-provider.js

@@ -0,0 +1,57 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalProvider = void 0;
+const react_1 = __importStar(require("react"));
+const dialog_1 = require("../dialog/dialog");
+exports.ModalProvider = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const [content, setContent] = (0, react_1.useState)();
+    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)({
+        onDialogClose: content === null || content === void 0 ? void 0 : content.onClose,
+        isBackdropCloseDisabled: content === null || content === void 0 ? void 0 : content.isBackdropCloseDisabled,
+    });
+    const openModalHandler = (modal) => {
+        openDialog(modal.children);
+        setContent(modal);
+    };
+    const closeModalHandler = () => {
+        if (content === null || content === void 0 ? void 0 : content.onClose) {
+            content.onClose();
+        }
+        closeDialog();
+    };
+    const innerRef = (0, react_1.useRef)({
+        close: closeModalHandler,
+        open: openModalHandler,
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        close: innerRef.current.close,
+        open: innerRef.current.open,
+    }), []);
+    return (react_1.default.createElement(DialogProvider, { className: `uxf-modal uxf-modal--variant-${(_a = content === null || content === void 0 ? void 0 : content.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = content === null || content === void 0 ? void 0 : content.className) !== null && _b !== void 0 ? _b : ""}`, variant: content === null || content === void 0 ? void 0 : content.variant }));
+});
+exports.ModalProvider.displayName = "UxfUiModalProvider";

package/modal/modal-service.d.ts

@@ -1,4 +1,4 @@
-import { ModalProps, ModalRef } from "./modal";
+import { ModalProviderProps, ModalRef } from "./types";
 export declare function getModalRef(): import("react").RefObject<ModalRef>;
-export declare function openModal(modal: ModalProps): void;
+export declare function openModal(modal: ModalProviderProps): void;
 export declare function closeModal(): void;

package/modal/modal.d.ts

@@ -1,16 +1,3 @@
-import { ModalVariant, ModalWidth } from "@uxf/ui/modal/theme";
-import React, { ReactNode } from "react";
-import type { DialogProps } from "../dialog";
-export interface ModalProps {
-    children: ReactNode;
-    className?: DialogProps["className"];
-    isBackdropCloseDisabled?: DialogProps["isBackdropCloseDisabled"];
-    onClose?: () => void;
-    variant?: ModalVariant;
-    width?: ModalWidth;
-}
-export interface ModalRef {
-    close: () => void;
-    open: (modal: ModalProps) => void;
-}
-export declare const Modal: React.ForwardRefExoticComponent<React.RefAttributes<ModalRef>>;
+import React from "react";
+import { ModalProps } from "./types";
+export declare function Modal(props: ModalProps): React.JSX.Element;

package/modal/modal.js

@@ -1,57 +1,27 @@
 "use strict";
-"use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-const react_1 = __importStar(require("react"));
-const dialog_1 = require("../dialog/dialog");
-exports.Modal = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b, _c;
-    const [content, setContent] = (0, react_1.useState)();
-    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)({
-        onDialogClose: content === null || content === void 0 ? void 0 : content.onClose,
-        isBackdropCloseDisabled: content === null || content === void 0 ? void 0 : content.isBackdropCloseDisabled,
+exports.Modal = Modal;
+const react_1 = require("@floating-ui/react");
+const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
+const dialog_1 = require("@uxf/ui/dialog");
+const react_2 = __importDefault(require("react"));
+function Modal(props) {
+    var _a, _b;
+    const { refs, context } = (0, react_1.useFloating)({
+        open: props.isOpen,
+        onOpenChange(nextOpen, event, reason) {
+            if (!props.isBackdropCloseDisabled && (reason === "escape-key" || reason === "outside-press")) {
+                props.close();
+            }
+        },
     });
-    const openModalHandler = (modal) => {
-        openDialog(modal.children);
-        setContent(modal);
-    };
-    const closeModalHandler = () => {
-        if (content === null || content === void 0 ? void 0 : content.onClose) {
-            content.onClose();
-        }
-        closeDialog();
-    };
-    const innerRef = (0, react_1.useRef)({
-        close: closeModalHandler,
-        open: openModalHandler,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        close: innerRef.current.close,
-        open: innerRef.current.open,
-    }), []);
-    return (react_1.default.createElement(DialogProvider, { className: `uxf-modal uxf-modal--variant-${(_a = content === null || content === void 0 ? void 0 : content.variant) !== null && _a !== void 0 ? _a : "default"} uxf-modal--width-${(_b = content === null || content === void 0 ? void 0 : content.width) !== null && _b !== void 0 ? _b : "default"} ${(_c = content === null || content === void 0 ? void 0 : content.className) !== null && _c !== void 0 ? _c : ""}`, variant: content === null || content === void 0 ? void 0 : content.variant, width: content === null || content === void 0 ? void 0 : content.width }));
-});
-exports.Modal.displayName = "UxfUiModal";
+    const click = (0, react_1.useClick)(context);
+    const role = (0, react_1.useRole)(context);
+    const dismiss = (0, react_1.useDismiss)(context, { outsidePressEvent: "mousedown", escapeKey: true });
+    const { getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
+    const latestContext = (0, use_latest_1.useLatest)(context);
+    return (react_2.default.createElement(dialog_1.Dialog, { className: `uxf-modal uxf-modal--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: props.isOpen, variant: props.variant }, props.children));
+}

package/modal/modal.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function ModalProvider(): React.JSX.Element;

package/modal/modal.stories.js

@@ -1,62 +1,109 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.ModalProvider = ModalProvider;
 const button_1 = require("@uxf/ui/button");
-const react_1 = __importDefault(require("react"));
+const dialog_1 = require("@uxf/ui/dialog");
+const react_1 = __importStar(require("react"));
+const modal_1 = require("./modal");
 const modal_service_1 = require("./modal-service");
 function Default() {
-    const storyModals = (react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - default size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                onClose: () => console.log("modal closed"),
-            }) }, "Click to open modal - default"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xs size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "xs",
-            }) }, "Click to open modal - xs"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - sm size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "sm",
-            }) }, "Click to open modal - sm"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - lg size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "lg",
-            }) }, "Click to open modal - lg"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xl size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "xl",
-            }) }, "Click to open modal - xl"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - dark"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                className: "dark",
-            }) }, "Click to open modal - dark"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - disable backdrop close"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                isBackdropCloseDisabled: true,
-            }) }, "Click to open modal - disable backdrop close"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - variant right drawer"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                variant: "drawer-right",
-            }) }, "Click to open modal - variant right drawer")));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyModals)));
+    const [isOpenXs, setIsOpenXs] = (0, react_1.useState)(false);
+    const [isOpenRightDrawer, setIsOpenRightDrawer] = (0, react_1.useState)(false);
+    const [isOpenDisableBackdrop, setIsOpenDisableBackdrop] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenXs(true) }, "Click to open modal xs"),
+            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenXs(false), isOpen: isOpenXs },
+                react_1.default.createElement(dialog_1.DialogPanel, { width: "xs" }, "Whatever content inside Modal xs"))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenRightDrawer(true) }, "Click to open modal drawer-right"),
+            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenRightDrawer(false), isOpen: isOpenRightDrawer, variant: "drawer-right" },
+                react_1.default.createElement(dialog_1.DialogPanel, null, "Whatever content inside Modal drawer-right"))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenDisableBackdrop(true) }, "Click to open modal DisableBackdrop"),
+            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenDisableBackdrop(false), isBackdropCloseDisabled: true, isOpen: isOpenDisableBackdrop },
+                react_1.default.createElement(dialog_1.DialogPanel, null,
+                    react_1.default.createElement("div", { className: "p-4" },
+                        react_1.default.createElement("p", null, "Whatever content inside DisableBackdrop:"),
+                        react_1.default.createElement(button_1.Button, { className: "mt-2", onClick: () => setIsOpenDisableBackdrop(false) }, "Close")))))));
+}
+function ModalProvider() {
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
+        react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - default size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    onClose: () => console.log("modal closed"),
+                }) }, "Click to open modal - default"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "xs" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xs size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - xs"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "sm" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - sm size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - sm"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "lg" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - lg size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - lg"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "xl" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xl size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - xl"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - dark"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    className: "dark",
+                }) }, "Click to open modal - dark"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - disable backdrop close"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    isBackdropCloseDisabled: true,
+                }) }, "Click to open modal - disable backdrop close"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - variant right drawer"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    variant: "drawer-right",
+                }) }, "Click to open modal - variant right drawer"))));
 }

package/modal/theme.d.ts

@@ -1,13 +1,4 @@
-export interface ModalWidths {
-    xs: true;
-    sm: true;
-    default: true;
-    lg: true;
-    xl: true;
-}
-export type ModalWidth = keyof ModalWidths;
 export interface ModalVariants {
     default: true;
     "drawer-right": true;
 }
-export type ModalVariant = keyof ModalVariants;

package/modal/types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import type { DialogProps } from "../dialog";
+import { ModalVariants } from "./theme";
+export type ModalVariant = keyof ModalVariants;
+export interface ModalProviderProps {
+    children: ReactNode;
+    className?: DialogProps["className"];
+    isBackdropCloseDisabled?: DialogProps["isBackdropCloseDisabled"];
+    onClose?: () => void;
+    variant?: ModalVariant;
+}
+export interface ModalRef {
+    close: () => void;
+    open: (modal: ModalProviderProps) => void;
+}
+export interface ModalProps {
+    children: ReactNode;
+    className?: DialogProps["className"];
+    close: () => void;
+    isBackdropCloseDisabled?: boolean;
+    isOpen: boolean;
+    variant?: ModalVariant;
+}

package/modal/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.48.4",
+    "version": "11.49.0",
     "description": "",
     "publishConfig": {
         "access": "public"

package/readmes.d.ts

@@ -32,7 +32,7 @@ export declare const readmes: {
     readonly icon: typeof alertBubbleReadme;
     readonly "icon-button": typeof alertBubbleReadme;
     readonly "image-gallery": typeof alertBubbleReadme;
-    readonly infobox: typeof alertBubbleReadme;
+    readonly "info-box": typeof alertBubbleReadme;
     readonly input: typeof alertBubbleReadme;
     readonly label: typeof alertBubbleReadme;
     readonly layout: typeof alertBubbleReadme;

package/readmes.js

@@ -98,7 +98,7 @@ exports.readmes = {
     "icon": README_md_30.default,
     "icon-button": README_md_31.default,
     "image-gallery": README_md_32.default,
-    "infobox": README_md_33.default,
+    "info-box": README_md_33.default,
     "input": README_md_34.default,
     "label": README_md_35.default,
     "layout": README_md_36.default,

package/css/modal.css

@@ -1,21 +0,0 @@
-.uxf-modal {
-    &--width-xs {
-        --panel-max-w: theme("maxWidth.xs");
-    }
-
-    &--width-sm {
-        --panel-max-w: theme("maxWidth.sm");
-    }
-
-    &--width-default {
-        --panel-max-w: theme("maxWidth.lg");
-    }
-
-    &--width-lg {
-        --panel-max-w: theme("maxWidth.3xl");
-    }
-
-    &--width-xl {
-        --panel-max-w: theme("maxWidth.5xl");
-    }
-}