@saas-ui/modals 2.4.2 → 3.0.0-alpha.0

package/CHANGELOG.md

@@ -1,13 +1,19 @@
 # @saas-ui/modals
 
-## 2.4.2
+## 3.0.0-alpha.0
+
+### Major Changes
+
+- v3 alpha release
 
 ### Patch Changes
 
-- 862937a: Bump chakra version
-- Updated dependencies [862937a]
-  - @saas-ui/react-utils@2.2.1
-  - @saas-ui/forms@2.9.1
+- Updated dependencies
+  - @saas-ui/modals-provider@1.0.0-alpha.0
+  - @saas-ui/forms@3.0.0-alpha.0
+  - @saas-ui/hooks@3.0.0-alpha.0
+  - @saas-ui/react@3.0.0-alpha.0
+  - @saas-ui/core@3.0.0-alpha.0
 
 ## 2.4.1
 

package/dist/index.cjs

@@ -0,0 +1,206 @@
+'use client'
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AlertDialog: () => AlertDialog,
+  Drawer: () => Drawer,
+  Modal: () => Modal,
+  ModalsProvider: () => ModalsProvider,
+  useModals: () => useModals
+});
+module.exports = __toCommonJS(src_exports);
+var import_modals_provider = require("@saas-ui/modals-provider");
+
+// src/alert-dialog.tsx
+var React = __toESM(require("react"), 1);
+var import_react = require("@chakra-ui/react");
+var import_utils = require("@saas-ui/core/utils");
+var import_dialog = require("@saas-ui/react/dialog");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AlertDialog = (props) => {
+  var _a, _b, _c, _d;
+  const {
+    title,
+    translations,
+    slotProps,
+    open,
+    closeOnCancel = true,
+    closeOnConfirm = true,
+    leastDestructiveFocus = "cancel",
+    onOpenChange,
+    onCancel,
+    onConfirm,
+    children,
+    ...rest
+  } = props;
+  const cancelRef = React.useRef(null);
+  const confirmRef = React.useRef(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const handleConfirm = async () => {
+    try {
+      const result = onConfirm == null ? void 0 : onConfirm();
+      if (typeof (result == null ? void 0 : result.then) === "function") {
+        setIsLoading(true);
+        await result;
+      }
+      closeOnConfirm && onOpenChange({ open: false });
+    } catch (e) {
+      throw e;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const titleId = React.useId();
+  const contentId = React.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Root,
+    {
+      open,
+      onOpenChange,
+      size: "sm",
+      "aria-labelledby": titleId,
+      "aria-describedby": contentId,
+      ...rest,
+      initialFocusEl: () => leastDestructiveFocus === "cancel" ? cancelRef.current : confirmRef.current,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Title, { id: titleId, children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Body, { id: contentId, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Footer, { ...slotProps == null ? void 0 : slotProps.footer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react.Button,
+            {
+              ref: cancelRef,
+              variant: "ghost",
+              colorPalette: "gray",
+              ...slotProps == null ? void 0 : slotProps.cancel,
+              onClick: (0, import_utils.callAll)((_a = slotProps == null ? void 0 : slotProps.cancel) == null ? void 0 : _a.onClick, () => {
+                onCancel == null ? void 0 : onCancel();
+                closeOnCancel && onOpenChange({ open: false });
+              }),
+              children: ((_b = slotProps == null ? void 0 : slotProps.cancel) == null ? void 0 : _b.children) || (translations == null ? void 0 : translations.cancel) || "Cancel"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react.Button,
+            {
+              ref: confirmRef,
+              variant: "solid",
+              disabled: isLoading,
+              ...slotProps == null ? void 0 : slotProps.confirm,
+              onClick: (0, import_utils.callAll)(handleConfirm, (_c = slotProps == null ? void 0 : slotProps.confirm) == null ? void 0 : _c.onClick),
+              children: ((_d = slotProps == null ? void 0 : slotProps.confirm) == null ? void 0 : _d.children) || (translations == null ? void 0 : translations.confirm) || "OK"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/drawer.tsx
+var import_utils2 = require("@saas-ui/core/utils");
+var import_drawer = require("@saas-ui/react/drawer");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Drawer = (props) => {
+  const {
+    title,
+    children,
+    footer,
+    open,
+    onOpenChange,
+    hideCloseButton,
+    hideBackdrop,
+    headerProps,
+    contentProps,
+    bodyProps,
+    footerProps,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_drawer.Drawer.Root, { open, onOpenChange, ...rest, children: [
+    !hideBackdrop && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Backdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_drawer.Drawer.Content, { ...contentProps, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Header, { ...headerProps, children: title }),
+      !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.CloseTrigger, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Body, { ...bodyProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Context, { children: ({ open: open2, setOpen }) => (0, import_utils2.runIfFn)(children, { open: open2, setOpen }) }) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Footer, { ...footerProps, children: footer })
+    ] })
+  ] });
+};
+
+// src/modal.tsx
+var import_utils3 = require("@saas-ui/core/utils");
+var import_dialog2 = require("@saas-ui/react/dialog");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Modal = (props) => {
+  const {
+    title,
+    footer,
+    children,
+    open,
+    onOpenChange,
+    hideCloseButton,
+    hideBackdrop,
+    headerProps,
+    contentProps,
+    bodyProps,
+    footerProps,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Root, { open, onOpenChange, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog2.Dialog.Content, { ...contentProps, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Header, { ...headerProps, children: title }),
+    !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.CloseTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Context, { children: ({ open: open2, setOpen }) => (0, import_utils3.runIfFn)(children, { open: open2, setOpen }) }) }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Footer, { ...footerProps, children: footer })
+  ] }) });
+};
+
+// src/default-modals.ts
+var defaultModals = {
+  alert: AlertDialog,
+  confirm: AlertDialog,
+  drawer: Drawer,
+  modal: Modal
+};
+
+// src/index.ts
+var { useModals, ModalsProvider } = (0, import_modals_provider.createModals)({
+  modals: defaultModals
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertDialog,
+  Drawer,
+  Modal,
+  ModalsProvider,
+  useModals
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/alert-dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/default-modals.ts"],"sourcesContent":["import { createModals } from '@saas-ui/modals-provider'\n\nimport { defaultModals } from './default-modals.ts'\n\n// Exporting from './dialog'\nexport { AlertDialog } from './alert-dialog.tsx'\nexport type { AlertDialogProps } from './alert-dialog.tsx'\n\n// Exporting from './drawer'\nexport { Drawer } from './drawer'\nexport type { DrawerProps } from './drawer'\n\n// Exporting from './modal'\nexport { Modal } from './modal'\nexport type { ModalProps } from './modal'\n\n// Exporting from './form'\n// export { FormDialog, createFormDialog } from './form'\n// export type {\n//   DefaultFormType,\n//   FormDialogFieldOverrides,\n//   FormDialogProps,\n// } from './form'\n\n// Exporting from './provider'\n\nconst { useModals, ModalsProvider } = createModals({\n  modals: defaultModals,\n})\n\nexport { ModalsProvider, useModals }\n","import * as React from 'react'\n\nimport { Button, ButtonProps, type HTMLChakraProps } from '@chakra-ui/react'\nimport { callAll } from '@saas-ui/core/utils'\nimport { Dialog } from '@saas-ui/react/dialog'\n\nexport interface AlertDialogProps\n  extends Omit<\n    Dialog.RootProps,\n    'leastDestructiveRef' | 'onOpenChange' | 'open'\n  > {\n  /**\n   * Whether the dialog is open\n   */\n  open: boolean\n  /**\n   * Callback when the dialog is opened or closed\n   */\n  onOpenChange: (details: { open: boolean }) => void\n  /**\n   * The dialog title\n   */\n  title?: React.ReactNode\n  translations?: {\n    cancel?: React.ReactNode\n    confirm?: React.ReactNode\n    close?: React.ReactNode\n  }\n  slotProps?: {\n    cancel?: ButtonProps\n    confirm?: ButtonProps\n    footer?: HTMLChakraProps<'div'>\n  }\n  /**\n   * Close the dialog on cancel\n   * @default true\n   */\n  closeOnCancel?: boolean\n  /**\n   * Close the dialog on confirm\n   * @default true\n   */\n  closeOnConfirm?: boolean\n  /**\n   * Hide the backdrop\n   */\n  backdrop?: boolean\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Defines which button gets initial focus\n   * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n   */\n  leastDestructiveFocus?: 'cancel' | 'confirm'\n  /**\n   * Function that's called when cancel is clicked\n   */\n  onCancel?: () => void\n  /**\n   * Function that's called when confirm is clicked.\n   */\n  onConfirm?: () => Promise<void> | void\n}\n\nexport const AlertDialog: React.FC<AlertDialogProps> = (props) => {\n  const {\n    title,\n    translations,\n    slotProps,\n    open,\n    closeOnCancel = true,\n    closeOnConfirm = true,\n    leastDestructiveFocus = 'cancel',\n    onOpenChange,\n    onCancel,\n    onConfirm,\n    children,\n    ...rest\n  } = props\n\n  const cancelRef = React.useRef(null)\n  const confirmRef = React.useRef(null)\n  const [isLoading, setIsLoading] = React.useState(false)\n\n  const handleConfirm = async () => {\n    try {\n      const result = onConfirm?.()\n      if (typeof result?.then === 'function') {\n        setIsLoading(true)\n        await result\n      }\n\n      closeOnConfirm && onOpenChange({ open: false })\n      /* eslint-disable no-useless-catch */\n    } catch (e: any) {\n      throw e\n    } finally {\n      setIsLoading(false)\n    }\n    /* eslint-enable */\n  }\n\n  const titleId = React.useId()\n  const contentId = React.useId()\n\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      size=\"sm\"\n      aria-labelledby={titleId}\n      aria-describedby={contentId}\n      {...rest}\n      initialFocusEl={() =>\n        leastDestructiveFocus === 'cancel'\n          ? cancelRef.current\n          : confirmRef.current\n      }\n    >\n      <Dialog.Content>\n        <Dialog.Header>\n          <Dialog.Title id={titleId}>{title}</Dialog.Title>\n        </Dialog.Header>\n\n        <Dialog.Body id={contentId}>{children}</Dialog.Body>\n\n        <Dialog.Footer {...slotProps?.footer}>\n          <Button\n            ref={cancelRef}\n            variant=\"ghost\"\n            colorPalette=\"gray\"\n            {...slotProps?.cancel}\n            onClick={callAll(slotProps?.cancel?.onClick, () => {\n              onCancel?.()\n\n              closeOnCancel && onOpenChange({ open: false })\n            })}\n          >\n            {slotProps?.cancel?.children || translations?.cancel || 'Cancel'}\n          </Button>\n          <Button\n            ref={confirmRef}\n            variant=\"solid\"\n            disabled={isLoading}\n            {...slotProps?.confirm}\n            onClick={callAll(handleConfirm, slotProps?.confirm?.onClick)}\n          >\n            {slotProps?.confirm?.children || translations?.confirm || 'OK'}\n          </Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  )\n}\n","import * as React from 'react'\n\nimport { type HTMLChakraProps } from '@chakra-ui/react'\nimport { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'\nimport { Drawer as BaseDrawer } from '@saas-ui/react/drawer'\n\nexport interface DrawerProps extends Omit<BaseDrawer.RootProps, 'children'> {\n  /**\n   * The drawer title\n   */\n  title: React.ReactNode\n  /**\n   * Whether the modal is open\n   */\n  open: boolean\n  /**\n   * Callback when the drawer is opened or closed\n   */\n  onOpenChange: (details: { open: boolean }) => void\n  /**\n   * The drawer children\n   */\n  children: MaybeRenderProp<{\n    open: boolean\n    setOpen: (open: boolean) => void\n  }>\n  /**\n   * The modal footer\n   */\n  footer?: React.ReactNode\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Hide the backdrop\n   */\n  hideBackdrop?: boolean\n  /**\n   * Props for the modal header\n   */\n  headerProps?: HTMLChakraProps<'div'>\n  /**\n   * Props for the modal content\n   */\n  contentProps?: BaseDrawer.ContentProps\n  /**\n   * Props for the modal footer\n   */\n  footerProps?: HTMLChakraProps<'div'>\n  /**\n   * Props for the modal body\n   */\n  bodyProps?: HTMLChakraProps<'div'>\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n  const {\n    title,\n    children,\n    footer,\n    open,\n    onOpenChange,\n    hideCloseButton,\n    hideBackdrop,\n    headerProps,\n    contentProps,\n    bodyProps,\n    footerProps,\n    ...rest\n  } = props\n  return (\n    <BaseDrawer.Root open={open} onOpenChange={onOpenChange} {...rest}>\n      {!hideBackdrop && <BaseDrawer.Backdrop />}\n      <BaseDrawer.Content {...contentProps}>\n        {title && (\n          <BaseDrawer.Header {...headerProps}>{title}</BaseDrawer.Header>\n        )}\n        {!hideCloseButton && <BaseDrawer.CloseTrigger />}\n        <BaseDrawer.Body {...bodyProps}>\n          <BaseDrawer.Context>\n            {({ open, setOpen }) => runIfFn(children, { open, setOpen })}\n          </BaseDrawer.Context>\n        </BaseDrawer.Body>\n        {footer && (\n          <BaseDrawer.Footer {...footerProps}>{footer}</BaseDrawer.Footer>\n        )}\n      </BaseDrawer.Content>\n    </BaseDrawer.Root>\n  )\n}\n","import * as React from 'react'\n\nimport type { HTMLChakraProps } from '@chakra-ui/react'\nimport { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'\nimport { Dialog as BaseDialog } from '@saas-ui/react/dialog'\n\nexport interface ModalProps extends Omit<BaseDialog.RootProps, 'children'> {\n  /**\n   * The modal title\n   */\n  title?: React.ReactNode\n  /**\n   * Whether the modal is open\n   */\n  open: boolean\n  /**\n   * Callback when the modal is opened or closed\n   */\n  onOpenChange: (details: { open: boolean }) => void\n  /**\n   * The modal children\n   */\n  children: MaybeRenderProp<{\n    open: boolean\n    setOpen: (open: boolean) => void\n  }>\n  /**\n   * The modal footer\n   */\n  footer?: React.ReactNode\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Hide the overlay\n   */\n  hideBackdrop?: boolean\n  /**\n   * Props for the modal header\n   */\n  headerProps?: HTMLChakraProps<'div'>\n  /**\n   * Props for the modal content\n   */\n  contentProps?: HTMLChakraProps<'div'>\n  /**\n   * Props for the modal body\n   */\n  bodyProps?: HTMLChakraProps<'div'>\n  /**\n   * Props for the modal footer\n   */\n  footerProps?: HTMLChakraProps<'div'>\n}\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const {\n    title,\n    footer,\n    children,\n    open,\n    onOpenChange,\n    hideCloseButton,\n    hideBackdrop,\n    headerProps,\n    contentProps,\n    bodyProps,\n    footerProps,\n    ...rest\n  } = props\n  return (\n    <BaseDialog.Root open={open} onOpenChange={onOpenChange} {...rest}>\n      <BaseDialog.Content {...contentProps}>\n        {title && (\n          <BaseDialog.Header {...headerProps}>{title}</BaseDialog.Header>\n        )}\n        {!hideCloseButton && <BaseDialog.CloseTrigger />}\n        <BaseDialog.Body>\n          <BaseDialog.Context>\n            {({ open, setOpen }) => runIfFn(children, { open, setOpen })}\n          </BaseDialog.Context>\n        </BaseDialog.Body>\n        {footer && (\n          <BaseDialog.Footer {...footerProps}>{footer}</BaseDialog.Footer>\n        )}\n      </BaseDialog.Content>\n    </BaseDialog.Root>\n  )\n}\n","import { AlertDialog } from './alert-dialog'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n  alert: AlertDialog,\n  confirm: AlertDialog,\n  drawer: Drawer,\n  modal: Modal,\n}\n"],"mappings":"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","names":["import_utils","import_jsx_runtime","BaseDrawer","open","import_utils","import_dialog","import_jsx_runtime","BaseDialog","open"]}

package/dist/index.d.cts

@@ -0,0 +1,182 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _saas_ui_modals_provider from '@saas-ui/modals-provider';
+import * as React from 'react';
+import { HTMLChakraProps, ButtonProps } from '@chakra-ui/react';
+import { MaybeRenderProp } from '@saas-ui/core/utils';
+import { Dialog } from '@saas-ui/react/dialog';
+import { Drawer as Drawer$1 } from '@saas-ui/react/drawer';
+
+interface ModalProps extends Omit<Dialog.RootProps, 'children'> {
+    /**
+     * The modal title
+     */
+    title?: React.ReactNode;
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when the modal is opened or closed
+     */
+    onOpenChange: (details: {
+        open: boolean;
+    }) => void;
+    /**
+     * The modal children
+     */
+    children: MaybeRenderProp<{
+        open: boolean;
+        setOpen: (open: boolean) => void;
+    }>;
+    /**
+     * The modal footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * Hide the close button
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Hide the overlay
+     */
+    hideBackdrop?: boolean;
+    /**
+     * Props for the modal header
+     */
+    headerProps?: HTMLChakraProps<'div'>;
+    /**
+     * Props for the modal content
+     */
+    contentProps?: HTMLChakraProps<'div'>;
+    /**
+     * Props for the modal body
+     */
+    bodyProps?: HTMLChakraProps<'div'>;
+    /**
+     * Props for the modal footer
+     */
+    footerProps?: HTMLChakraProps<'div'>;
+}
+declare const Modal: React.FC<ModalProps>;
+
+interface DrawerProps extends Omit<Drawer$1.RootProps, 'children'> {
+    /**
+     * The drawer title
+     */
+    title: React.ReactNode;
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when the drawer is opened or closed
+     */
+    onOpenChange: (details: {
+        open: boolean;
+    }) => void;
+    /**
+     * The drawer children
+     */
+    children: MaybeRenderProp<{
+        open: boolean;
+        setOpen: (open: boolean) => void;
+    }>;
+    /**
+     * The modal footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * Hide the close button
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Hide the backdrop
+     */
+    hideBackdrop?: boolean;
+    /**
+     * Props for the modal header
+     */
+    headerProps?: HTMLChakraProps<'div'>;
+    /**
+     * Props for the modal content
+     */
+    contentProps?: Drawer$1.ContentProps;
+    /**
+     * Props for the modal footer
+     */
+    footerProps?: HTMLChakraProps<'div'>;
+    /**
+     * Props for the modal body
+     */
+    bodyProps?: HTMLChakraProps<'div'>;
+}
+declare const Drawer: React.FC<DrawerProps>;
+
+interface AlertDialogProps extends Omit<Dialog.RootProps, 'leastDestructiveRef' | 'onOpenChange' | 'open'> {
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * Callback when the dialog is opened or closed
+     */
+    onOpenChange: (details: {
+        open: boolean;
+    }) => void;
+    /**
+     * The dialog title
+     */
+    title?: React.ReactNode;
+    translations?: {
+        cancel?: React.ReactNode;
+        confirm?: React.ReactNode;
+        close?: React.ReactNode;
+    };
+    slotProps?: {
+        cancel?: ButtonProps;
+        confirm?: ButtonProps;
+        footer?: HTMLChakraProps<'div'>;
+    };
+    /**
+     * Close the dialog on cancel
+     * @default true
+     */
+    closeOnCancel?: boolean;
+    /**
+     * Close the dialog on confirm
+     * @default true
+     */
+    closeOnConfirm?: boolean;
+    /**
+     * Hide the backdrop
+     */
+    backdrop?: boolean;
+    /**
+     * Hide the close button
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Defines which button gets initial focus
+     * https://www.w3.org/TR/wai-aria-practices/#alertdialog
+     */
+    leastDestructiveFocus?: 'cancel' | 'confirm';
+    /**
+     * Function that's called when cancel is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * Function that's called when confirm is clicked.
+     */
+    onConfirm?: () => Promise<void> | void;
+}
+declare const AlertDialog: React.FC<AlertDialogProps>;
+
+declare const useModals: () => _saas_ui_modals_provider.ModalsContextValue<{
+    alert: React.FC<AlertDialogProps>;
+    confirm: React.FC<AlertDialogProps>;
+    drawer: React.FC<DrawerProps>;
+    modal: React.FC<ModalProps>;
+}, "alert" | "drawer" | "modal" | "confirm">;
+declare const ModalsProvider: (props: Omit<_saas_ui_modals_provider.ModalsProviderProps, "modals">) => react_jsx_runtime.JSX.Element;
+
+export { AlertDialog, type AlertDialogProps, Drawer, type DrawerProps, Modal, type ModalProps, ModalsProvider, useModals };