@saas-ui/modals 2.1.41 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @saas-ui/modals
 
+## 2.2.1
+
+### Patch Changes
+
+- f0ee3db: Updated to Chakra 2.10
+- Updated dependencies [f0ee3db]
+  - @saas-ui/react-utils@2.1.1
+  - @saas-ui/forms@2.7.1
+
+## 2.2.0
+
+### Minor Changes
+
+- 2ac496a: Upgraded to Chakra UI v2.9.3
+
+### Patch Changes
+
+- Updated dependencies [2ac496a]
+  - @saas-ui/react-utils@2.1.0
+  - @saas-ui/forms@2.7.0
+  - @saas-ui/hooks@2.1.0
+
 ## 2.1.41
 
 ### Patch Changes

package/dist/chunk-I63K4ILP.mjs

@@ -0,0 +1,154 @@
+'use client'
+
+// src/modal.tsx
+import {
+  Modal as ChakraModal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton
+} from "@chakra-ui/react";
+import { runIfFn } from "@chakra-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BaseModal = (props) => {
+  const {
+    title,
+    footer,
+    children,
+    isOpen,
+    onClose,
+    hideCloseButton,
+    hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(ChakraModal, { isOpen, onClose, ...rest, children: [
+    !hideOverlay && /* @__PURE__ */ jsx(ModalOverlay, {}),
+    /* @__PURE__ */ jsxs(ModalContent, { ...contentProps, children: [
+      title && /* @__PURE__ */ jsx(ModalHeader, { ...headerProps, children: title }),
+      !hideCloseButton && /* @__PURE__ */ jsx(ModalCloseButton, {}),
+      runIfFn(children, {
+        isOpen,
+        onClose
+      }),
+      footer && /* @__PURE__ */ jsx(ModalFooter, { ...footerProps, children: footer })
+    ] })
+  ] });
+};
+var Modal = (props) => {
+  const { children, isOpen, onClose, ...rest } = props;
+  return /* @__PURE__ */ jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsx(ModalBody, { children: runIfFn(children, {
+    isOpen,
+    onClose
+  }) }) });
+};
+
+// src/form.tsx
+import {
+  ModalBody as ModalBody2,
+  ModalFooter as ModalFooter2,
+  Button,
+  forwardRef
+} from "@chakra-ui/react";
+import { runIfFn as runIfFn2 } from "@saas-ui/react-utils";
+import {
+  Form,
+  AutoFields,
+  SubmitButton
+} from "@saas-ui/forms";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var useFormProps = (props) => {
+  const {
+    schema,
+    resolver,
+    fieldResolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError = true,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError = 100,
+    fields,
+    formRef,
+    ...modalProps
+  } = props;
+  const formProps = {
+    schema,
+    resolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError,
+    fields,
+    formRef
+  };
+  return { modalProps, formProps, fields };
+};
+function createFormDialog(Form2) {
+  const Dialog = forwardRef((props, ref) => {
+    const { isOpen, onClose, footer, children, ...rest } = props;
+    const { modalProps, formProps, fields } = useFormProps(rest);
+    return /* @__PURE__ */ jsx2(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ jsx2(
+      Form2,
+      {
+        ref,
+        ...formProps,
+        flex: "1",
+        minHeight: "0px",
+        display: "flex",
+        flexDirection: "column",
+        children: (form) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(ModalBody2, { height: "100%", children: runIfFn2(children, form) || /* @__PURE__ */ jsx2(AutoFields, {}) }),
+            footer || /* @__PURE__ */ jsxs2(ModalFooter2, { children: [
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  variant: "ghost",
+                  mr: 3,
+                  onClick: onClose,
+                  ...fields == null ? void 0 : fields.cancel,
+                  children: (_b = (_a = fields == null ? void 0 : fields.cancel) == null ? void 0 : _a.children) != null ? _b : "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx2(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+            ] })
+          ] });
+        }
+      }
+    ) });
+  });
+  Dialog.displayName = `${Form2.displayName || Form2.name}Dialog`;
+  Dialog.id = Form2.id;
+  return Dialog;
+}
+var FormDialog = createFormDialog(Form);
+
+export {
+  BaseModal,
+  Modal,
+  createFormDialog,
+  FormDialog
+};
+//# sourceMappingURL=chunk-I63K4ILP.mjs.map

package/dist/chunk-I63K4ILP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal.tsx","../src/form.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  Modal as ChakraModal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalFooter,\n  ModalBody,\n  ModalCloseButton,\n  ModalProps as ChakraModalProps,\n  ModalContentProps,\n  ModalHeaderProps,\n  ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {\n  /**\n   * The modal title\n   */\n  title?: React.ReactNode\n  /**\n   * The modal children\n   */\n  children: MaybeRenderProp<{\n    isOpen: boolean\n    onClose: () => 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  hideOverlay?: boolean\n  /**\n   * Props for the modal header\n   */\n  headerProps?: ModalHeaderProps\n  /**\n   * Props for the modal content\n   */\n  contentProps?: ModalContentProps\n  /**\n   * Props for the modal footer\n   */\n  footerProps?: ModalFooterProps\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n  const {\n    title,\n    footer,\n    children,\n    isOpen,\n    onClose,\n    hideCloseButton,\n    hideOverlay,\n    headerProps,\n    contentProps,\n    footerProps,\n    ...rest\n  } = props\n  return (\n    <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n      {!hideOverlay && <ModalOverlay />}\n      <ModalContent {...contentProps}>\n        {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}\n        {!hideCloseButton && <ModalCloseButton />}\n        {runIfFn(children, {\n          isOpen,\n          onClose,\n        })}\n        {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}\n      </ModalContent>\n    </ChakraModal>\n  )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n  const { children, isOpen, onClose, ...rest } = props\n  return (\n    <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>\n      <ModalBody>\n        {runIfFn(children, {\n          isOpen,\n          onClose,\n        })}\n      </ModalBody>\n    </BaseModal>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  ModalBody,\n  ModalFooter,\n  Button,\n  forwardRef,\n  ButtonProps,\n} from '@chakra-ui/react'\nimport { runIfFn } from '@saas-ui/react-utils'\n\nimport {\n  Form,\n  AutoFields,\n  SubmitButton,\n  FormProps,\n  FieldValues,\n  FieldResolver,\n  FieldProps,\n  FormType,\n  DefaultFieldOverrides,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport type FormDialogFieldOverrides = DefaultFieldOverrides & {\n  cancel?: ButtonProps\n}\n\nexport interface FormDialogProps<\n  TSchema = any,\n  TFieldValues extends FieldValues = FieldValues,\n  TContext extends object = object,\n  TExtraFieldProps extends object = object,\n  TFieldTypes = FieldProps<TFieldValues>,\n> extends Omit<BaseModalProps, 'children'>,\n    Pick<\n      FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>,\n      | 'schema'\n      | 'defaultValues'\n      | 'values'\n      | 'context'\n      | 'onChange'\n      | 'onSubmit'\n      | 'onError'\n      | 'resolver'\n      | 'mode'\n      | 'reValidateMode'\n      | 'shouldFocusError'\n      | 'shouldUnregister'\n      | 'shouldUseNativeValidation'\n      | 'criteriaMode'\n      | 'delayError'\n      | 'resetOptions'\n      | 'formRef'\n      | 'children'\n    > {\n  /**\n   * The modal footer, will be wrapped with `ModalFooter`.\n   * Defaults to a cancel and submit button.\n   */\n  footer?: React.ReactNode\n  /**\n   * A schema field resolver used to auto generate form fields.\n   */\n  fieldResolver?: FieldResolver\n  /**\n   * Field overrides\n   */\n  fields?: FormDialogFieldOverrides\n}\n\nconst useFormProps = (props: FormDialogProps) => {\n  const {\n    schema,\n    resolver,\n    fieldResolver,\n    defaultValues,\n    values,\n    context,\n    onChange,\n    onSubmit,\n    onError,\n    mode,\n    reValidateMode,\n    shouldFocusError = true,\n    shouldUnregister,\n    shouldUseNativeValidation,\n    criteriaMode,\n    delayError = 100,\n    fields,\n    formRef,\n    ...modalProps\n  } = props\n\n  const formProps = {\n    schema,\n    resolver,\n    defaultValues,\n    values,\n    context,\n    onChange,\n    onSubmit,\n    onError,\n    mode,\n    reValidateMode,\n    shouldFocusError,\n    shouldUnregister,\n    shouldUseNativeValidation,\n    criteriaMode,\n    delayError,\n    fields,\n    formRef,\n  }\n\n  return { modalProps, formProps, fields }\n}\n\n/**\n * @todo make this dynamic to support other schema types\n */\ntype MergeDialogProps<T> =\n  T extends FormType<\n    infer FieldDefs,\n    infer ExtraProps,\n    infer ExtraFieldProps,\n    infer ExtraOverrides\n  >\n    ? FormType<\n        FieldDefs,\n        ExtraProps & Omit<BaseModalProps, 'children'>,\n        ExtraFieldProps,\n        ExtraOverrides & FormDialogFieldOverrides\n      >\n    : never\n\ntype IsSchemaType<T, Schema, FieldDefs> =\n  T extends DefaultFormType<FieldDefs>\n    ? T extends (\n        props: FormProps<infer TSchema, infer TFieldValues, infer TContext>\n      ) => any\n      ? Schema extends TSchema\n        ? true\n        : false\n      : false\n    : false\n\nexport type DefaultFormType<\n  FieldDefs = any,\n  ExtraProps = object,\n  ExtraFieldProps extends object = object,\n  ExtraOverrides = FormDialogFieldOverrides,\n> = (<\n  TSchema = unknown,\n  TFieldValues extends Record<string, any> = any,\n  TContext extends object = object,\n>(\n  props: any\n) => React.ReactElement) & {\n  displayName?: string\n  id?: string\n}\n\nexport function createFormDialog<\n  FieldDefs = any,\n  ExtraProps = object,\n  ExtraFieldProps extends object = object,\n  ExtraOverrides = FormDialogFieldOverrides,\n  TFormType extends DefaultFormType<\n    FieldDefs,\n    ExtraProps,\n    ExtraFieldProps,\n    ExtraOverrides\n  > = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>,\n>(Form: TFormType) {\n  const Dialog = forwardRef<any, 'div'>((props, ref) => {\n    const { isOpen, onClose, footer, children, ...rest } = props\n    const { modalProps, formProps, fields } = useFormProps(rest)\n    return (\n      <BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>\n        <Form\n          ref={ref}\n          {...(formProps as any)}\n          flex=\"1\"\n          minHeight=\"0px\"\n          display=\"flex\"\n          flexDirection=\"column\"\n        >\n          {(form: any) => (\n            <>\n              <ModalBody height=\"100%\">\n                {runIfFn(children, form) || <AutoFields />}\n              </ModalBody>\n\n              {footer || (\n                <ModalFooter>\n                  <Button\n                    variant=\"ghost\"\n                    mr={3}\n                    onClick={onClose}\n                    {...fields?.cancel}\n                  >\n                    {fields?.cancel?.children ?? 'Cancel'}\n                  </Button>\n                  <SubmitButton {...fields?.submit} />\n                </ModalFooter>\n              )}\n            </>\n          )}\n        </Form>\n      </BaseModal>\n    )\n  }) as MergeDialogProps<TFormType>\n\n  Dialog.displayName = `${Form.displayName || Form.name}Dialog`\n  Dialog.id = Form.id\n\n  return Dialog\n}\n\n/**\n * Can be used to quickly request information from people without leaving the current page.\n *\n * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n */\nexport const FormDialog = createFormDialog(Form)\n"],"mappings":"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","names":["ModalBody","ModalFooter","runIfFn","jsx","jsxs","Form","ModalBody","runIfFn","ModalFooter"]}

package/dist/form-Cdu466OH.d.mts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, ButtonProps } from '@chakra-ui/react';
+import { DefaultFieldOverrides, FieldValues, FieldProps, FormProps, FieldResolver, FormType } from '@saas-ui/forms';
+import { MaybeRenderProp } from '@chakra-ui/react-utils';
+
+interface BaseModalProps extends Omit<ModalProps, 'children'> {
+    /**
+     * The modal title
+     */
+    title?: React.ReactNode;
+    /**
+     * The modal children
+     */
+    children: MaybeRenderProp<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
+    /**
+     * The modal footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * Hide the close button
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Hide the overlay
+     */
+    hideOverlay?: boolean;
+    /**
+     * Props for the modal header
+     */
+    headerProps?: ModalHeaderProps;
+    /**
+     * Props for the modal content
+     */
+    contentProps?: ModalContentProps;
+    /**
+     * Props for the modal footer
+     */
+    footerProps?: ModalFooterProps;
+}
+declare const BaseModal: React.FC<BaseModalProps>;
+declare const Modal: React.FC<BaseModalProps>;
+
+type FormDialogFieldOverrides = DefaultFieldOverrides & {
+    cancel?: ButtonProps;
+};
+interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
+    /**
+     * The modal footer, will be wrapped with `ModalFooter`.
+     * Defaults to a cancel and submit button.
+     */
+    footer?: React.ReactNode;
+    /**
+     * A schema field resolver used to auto generate form fields.
+     */
+    fieldResolver?: FieldResolver;
+    /**
+     * Field overrides
+     */
+    fields?: FormDialogFieldOverrides;
+}
+/**
+ * @todo make this dynamic to support other schema types
+ */
+type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
+type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React.ReactElement) & {
+    displayName?: string;
+    id?: string;
+};
+declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
+/**
+ * Can be used to quickly request information from people without leaving the current page.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
+ */
+declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
+    cancel?: ButtonProps;
+}>;
+
+export { type BaseModalProps as B, type DefaultFormType as D, type FormDialogFieldOverrides as F, Modal as M, type FormDialogProps as a, BaseModal as b, FormDialog as c, createFormDialog as d };

package/dist/form-Cdu466OH.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, ButtonProps } from '@chakra-ui/react';
+import { DefaultFieldOverrides, FieldValues, FieldProps, FormProps, FieldResolver, FormType } from '@saas-ui/forms';
+import { MaybeRenderProp } from '@chakra-ui/react-utils';
+
+interface BaseModalProps extends Omit<ModalProps, 'children'> {
+    /**
+     * The modal title
+     */
+    title?: React.ReactNode;
+    /**
+     * The modal children
+     */
+    children: MaybeRenderProp<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
+    /**
+     * The modal footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * Hide the close button
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Hide the overlay
+     */
+    hideOverlay?: boolean;
+    /**
+     * Props for the modal header
+     */
+    headerProps?: ModalHeaderProps;
+    /**
+     * Props for the modal content
+     */
+    contentProps?: ModalContentProps;
+    /**
+     * Props for the modal footer
+     */
+    footerProps?: ModalFooterProps;
+}
+declare const BaseModal: React.FC<BaseModalProps>;
+declare const Modal: React.FC<BaseModalProps>;
+
+type FormDialogFieldOverrides = DefaultFieldOverrides & {
+    cancel?: ButtonProps;
+};
+interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
+    /**
+     * The modal footer, will be wrapped with `ModalFooter`.
+     * Defaults to a cancel and submit button.
+     */
+    footer?: React.ReactNode;
+    /**
+     * A schema field resolver used to auto generate form fields.
+     */
+    fieldResolver?: FieldResolver;
+    /**
+     * Field overrides
+     */
+    fields?: FormDialogFieldOverrides;
+}
+/**
+ * @todo make this dynamic to support other schema types
+ */
+type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
+type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React.ReactElement) & {
+    displayName?: string;
+    id?: string;
+};
+declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
+/**
+ * Can be used to quickly request information from people without leaving the current page.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
+ */
+declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
+    cancel?: ButtonProps;
+}>;
+
+export { type BaseModalProps as B, type DefaultFormType as D, type FormDialogFieldOverrides as F, Modal as M, type FormDialogProps as a, BaseModal as b, FormDialog as c, createFormDialog as d };

package/dist/index.d.mts

@@ -1,11 +1,12 @@
 import * as React$1 from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps, ModalProps, MenuListProps } from '@chakra-ui/react';
+import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps, MenuListProps } from '@chakra-ui/react';
 import { MaybeRenderProp } from '@chakra-ui/react-utils';
-import * as _saas_ui_forms from '@saas-ui/forms';
-import { DefaultFieldOverrides, FieldValues, FieldProps, FormProps, FieldResolver, FormType, WithFields } from '@saas-ui/forms';
+import { B as BaseModalProps, F as FormDialogFieldOverrides, a as FormDialogProps } from './form-Cdu466OH.mjs';
+export { b as BaseModal, D as DefaultFormType, c as FormDialog, M as Modal, d as createFormDialog } from './form-Cdu466OH.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _chakra_ui_button from '@chakra-ui/button';
+import * as _saas_ui_forms from '@saas-ui/forms';
+import { FormType, WithFields, FormProps, FieldValues } from '@saas-ui/forms';
 import { YupFormType, AnyObjectSchema } from '@saas-ui/forms/yup';
 import { z } from 'zod';
 import { InferType } from 'yup';
@@ -108,46 +109,6 @@ interface DrawerProps extends BaseDrawerProps {
 }
 declare const Drawer: React$1.FC<DrawerProps>;
 
-interface BaseModalProps extends Omit<ModalProps, 'children'> {
-    /**
-     * The modal title
-     */
-    title?: React$1.ReactNode;
-    /**
-     * The modal children
-     */
-    children: MaybeRenderProp<{
-        isOpen: boolean;
-        onClose: () => void;
-    }>;
-    /**
-     * The modal footer
-     */
-    footer?: React$1.ReactNode;
-    /**
-     * Hide the close button
-     */
-    hideCloseButton?: boolean;
-    /**
-     * Hide the overlay
-     */
-    hideOverlay?: boolean;
-    /**
-     * Props for the modal header
-     */
-    headerProps?: ModalHeaderProps;
-    /**
-     * Props for the modal content
-     */
-    contentProps?: ModalContentProps;
-    /**
-     * Props for the modal footer
-     */
-    footerProps?: ModalFooterProps;
-}
-declare const BaseModal: React$1.FC<BaseModalProps>;
-declare const Modal: React$1.FC<BaseModalProps>;
-
 interface MenuDialogProps extends BaseModalProps {
     /**
      * The modal footer, wrapped with `ModalFooter`
@@ -159,42 +120,6 @@ interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose'
 }
 declare const MenuDialogList: _chakra_ui_react.ComponentWithAs<"div", MenuDialogListProps>;
 
-type FormDialogFieldOverrides = DefaultFieldOverrides & {
-    cancel?: ButtonProps;
-};
-interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
-    /**
-     * The modal footer, will be wrapped with `ModalFooter`.
-     * Defaults to a cancel and submit button.
-     */
-    footer?: React$1.ReactNode;
-    /**
-     * A schema field resolver used to auto generate form fields.
-     */
-    fieldResolver?: FieldResolver;
-    /**
-     * Field overrides
-     */
-    fields?: FormDialogFieldOverrides;
-}
-/**
- * @todo make this dynamic to support other schema types
- */
-type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
-type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React$1.ReactElement) & {
-    displayName?: string;
-    id?: string;
-};
-declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
-/**
- * Can be used to quickly request information from people without leaving the current page.
- *
- * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
- */
-declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
-    cancel?: ButtonProps;
-}>;
-
 type FormDialogHandler<T> = T extends YupFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'yup'> ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends ZodFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'zod'> ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides> ? FormHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : never;
 type ZodHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'zod' = 'zod'> = <TSchema extends z.AnyZodObject = z.AnyZodObject, TFieldValues extends z.infer<TSchema> = z.infer<TSchema>, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
     ref?: React.ForwardedRef<HTMLFormElement>;
@@ -228,7 +153,7 @@ declare const ModalsContext: React$1.Context<ModalsContextValue<{
     modal: React$1.FC<BaseModalProps>;
     menu: React$1.FC<MenuDialogProps>;
     form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-        cancel?: _chakra_ui_button.ButtonProps;
+        cancel?: _chakra_ui_react.ButtonProps;
     }>;
 }, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
 interface ModalsProviderProps<TModals extends Record<string, React$1.FC<any>> = Record<string, React$1.FC<any>>> {
@@ -298,7 +223,7 @@ declare const useModalsContext: () => ModalsContextValue<{
     modal: React$1.FC<BaseModalProps>;
     menu: React$1.FC<MenuDialogProps>;
     form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-        cancel?: _chakra_ui_button.ButtonProps;
+        cancel?: _chakra_ui_react.ButtonProps;
     }>;
 }, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null;
 declare const useModals: () => ModalsContextValue<{
@@ -308,7 +233,7 @@ declare const useModals: () => ModalsContextValue<{
     modal: React$1.FC<BaseModalProps>;
     menu: React$1.FC<MenuDialogProps>;
     form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-        cancel?: _chakra_ui_button.ButtonProps;
+        cancel?: _chakra_ui_react.ButtonProps;
     }>;
 }, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer">;
 
@@ -324,9 +249,9 @@ declare const createModals: <TModalDefs extends Record<string, React.FC<any>>>(o
         modal: React$1.FC<BaseModalProps>;
         menu: React$1.FC<MenuDialogProps>;
         form: _saas_ui_forms.FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-            cancel?: _chakra_ui_button.ButtonProps;
+            cancel?: _chakra_ui_react.ButtonProps;
         }>;
     } & TModalDefs>;
 };
 
-export { BaseDrawer, type BaseDrawerProps, BaseModal, type BaseModalProps, ConfirmDialog, type ConfirmDialogOptions, type ConfirmDialogProps, type CreateModalsOptions, type DefaultFormType, Drawer, type DrawerOptions, type DrawerProps, FormDialog, type FormDialogFieldOverrides, type FormDialogOptions, type FormDialogProps, MenuDialog, MenuDialogList, type MenuDialogListProps, type MenuDialogOptions, type MenuDialogProps, Modal, type ModalConfig, type ModalId, type ModalScopes, ModalsContext, type ModalsContextValue, ModalsProvider, type ModalsProviderProps, type OpenOptions, createFormDialog, createModals, useModals, useModalsContext };
+export { BaseDrawer, type BaseDrawerProps, BaseModalProps, ConfirmDialog, type ConfirmDialogOptions, type ConfirmDialogProps, type CreateModalsOptions, Drawer, type DrawerOptions, type DrawerProps, FormDialogFieldOverrides, type FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, type MenuDialogListProps, type MenuDialogOptions, type MenuDialogProps, type ModalConfig, type ModalId, type ModalScopes, ModalsContext, type ModalsContextValue, ModalsProvider, type ModalsProviderProps, type OpenOptions, createModals, useModals, useModalsContext };