@saas-ui/modals 2.1.41 → 2.2.1

package/dist/yup/index.js

@@ -0,0 +1,165 @@
+'use client'
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/yup/index.ts
+var yup_exports = {};
+__export(yup_exports, {
+  FormDialog: () => FormDialog2,
+  createYupFormDialog: () => createYupFormDialog
+});
+module.exports = __toCommonJS(yup_exports);
+var import_yup = require("@saas-ui/forms/yup");
+
+// src/form.tsx
+var import_react2 = require("@chakra-ui/react");
+var import_react_utils = require("@saas-ui/react-utils");
+var import_forms = require("@saas-ui/forms");
+
+// src/modal.tsx
+var import_react = require("@chakra-ui/react");
+var import_utils = require("@chakra-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseModal = (props) => {
+  const {
+    title,
+    footer,
+    children,
+    isOpen,
+    onClose,
+    hideCloseButton,
+    hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Modal, { isOpen, onClose, ...rest, children: [
+    !hideOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.ModalContent, { ...contentProps, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalHeader, { ...headerProps, children: title }),
+      !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalCloseButton, {}),
+      (0, import_utils.runIfFn)(children, {
+        isOpen,
+        onClose
+      }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalFooter, { ...footerProps, children: footer })
+    ] })
+  ] });
+};
+
+// src/form.tsx
+var import_jsx_runtime2 = require("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(Form3) {
+  const Dialog = (0, import_react2.forwardRef)((props, ref) => {
+    const { isOpen, onClose, footer, children, ...rest } = props;
+    const { modalProps, formProps, fields } = useFormProps(rest);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Form3,
+      {
+        ref,
+        ...formProps,
+        flex: "1",
+        minHeight: "0px",
+        display: "flex",
+        flexDirection: "column",
+        children: (form) => {
+          var _a, _b;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.ModalBody, { height: "100%", children: (0, import_react_utils.runIfFn)(children, form) || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_forms.AutoFields, {}) }),
+            footer || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react2.ModalFooter, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_react2.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__ */ (0, import_jsx_runtime2.jsx)(import_forms.SubmitButton, { ...fields == null ? void 0 : fields.submit })
+            ] })
+          ] });
+        }
+      }
+    ) });
+  });
+  Dialog.displayName = `${Form3.displayName || Form3.name}Dialog`;
+  Dialog.id = Form3.id;
+  return Dialog;
+}
+var FormDialog = createFormDialog(import_forms.Form);
+
+// src/yup/create-yup-form-dialog.ts
+function createYupFormDialog(Form3) {
+  return createFormDialog(Form3);
+}
+
+// src/yup/index.ts
+var FormDialog2 = createYupFormDialog(import_yup.Form);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormDialog,
+  createYupFormDialog
+});
+//# sourceMappingURL=index.js.map

package/dist/yup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/yup/index.ts","../../src/form.tsx","../../src/modal.tsx","../../src/yup/create-yup-form-dialog.ts"],"sourcesContent":["import { Form } from '@saas-ui/forms/yup'\nimport { createYupFormDialog } from './create-yup-form-dialog'\n\nexport { createYupFormDialog }\n\nexport const FormDialog = createYupFormDialog(Form)\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","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 type { YupFormType } from '@saas-ui/forms/yup'\nimport { FormDialogFieldOverrides, createFormDialog } from '../form'\n\nimport type { BaseModalProps } from '../modal'\n\nexport function createYupFormDialog<\n  FieldDefs = any,\n  ExtraProps = object,\n  ExtraFieldProps extends object = object,\n  ExtraOverrides = object,\n>(Form: YupFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {\n  return createFormDialog(Form) as unknown as YupFormType<\n    FieldDefs,\n    ExtraProps & Omit<BaseModalProps, 'children'>,\n    ExtraFieldProps,\n    ExtraOverrides & FormDialogFieldOverrides\n  >\n}\n"],"mappings":"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","names":["FormDialog","import_react","ChakraModal","import_jsx_runtime","Form","Form","FormDialog"]}

package/dist/yup/index.mjs

@@ -0,0 +1,20 @@
+'use client'
+import {
+  createFormDialog
+} from "../chunk-I63K4ILP.mjs";
+
+// src/yup/index.ts
+import { Form } from "@saas-ui/forms/yup";
+
+// src/yup/create-yup-form-dialog.ts
+function createYupFormDialog(Form2) {
+  return createFormDialog(Form2);
+}
+
+// src/yup/index.ts
+var FormDialog = createYupFormDialog(Form);
+export {
+  FormDialog,
+  createYupFormDialog
+};
+//# sourceMappingURL=index.mjs.map

package/dist/yup/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/yup/index.ts","../../src/yup/create-yup-form-dialog.ts"],"sourcesContent":["import { Form } from '@saas-ui/forms/yup'\nimport { createYupFormDialog } from './create-yup-form-dialog'\n\nexport { createYupFormDialog }\n\nexport const FormDialog = createYupFormDialog(Form)\n","import type { YupFormType } from '@saas-ui/forms/yup'\nimport { FormDialogFieldOverrides, createFormDialog } from '../form'\n\nimport type { BaseModalProps } from '../modal'\n\nexport function createYupFormDialog<\n  FieldDefs = any,\n  ExtraProps = object,\n  ExtraFieldProps extends object = object,\n  ExtraOverrides = object,\n>(Form: YupFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {\n  return createFormDialog(Form) as unknown as YupFormType<\n    FieldDefs,\n    ExtraProps & Omit<BaseModalProps, 'children'>,\n    ExtraFieldProps,\n    ExtraOverrides & FormDialogFieldOverrides\n  >\n}\n"],"mappings":";;;;;;AAAA,SAAS,YAAY;;;ACKd,SAAS,oBAKdA,OAA2E;AAC3E,SAAO,iBAAiBA,KAAI;AAM9B;;;ADZO,IAAM,aAAa,oBAAoB,IAAI;","names":["Form"]}

package/dist/zod/index.d.mts

@@ -0,0 +1,15 @@
+import * as _saas_ui_forms_zod from '@saas-ui/forms/zod';
+import { ZodFormType } from '@saas-ui/forms/zod';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import * as _saas_ui_forms from '@saas-ui/forms';
+import { B as BaseModalProps, F as FormDialogFieldOverrides } from '../form-Cdu466OH.mjs';
+import 'react';
+import '@chakra-ui/react-utils';
+
+declare function createZodFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = object>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>): ZodFormType<FieldDefs, ExtraProps & Omit<BaseModalProps, "children">, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides>;
+
+declare const FormDialog: _saas_ui_forms_zod.ZodFormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
+    cancel?: _chakra_ui_react.ButtonProps;
+}>;
+
+export { FormDialog, createZodFormDialog };

package/dist/zod/index.d.ts

@@ -0,0 +1,15 @@
+import * as _saas_ui_forms_zod from '@saas-ui/forms/zod';
+import { ZodFormType } from '@saas-ui/forms/zod';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import * as _saas_ui_forms from '@saas-ui/forms';
+import { B as BaseModalProps, F as FormDialogFieldOverrides } from '../form-Cdu466OH.js';
+import 'react';
+import '@chakra-ui/react-utils';
+
+declare function createZodFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = object>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>): ZodFormType<FieldDefs, ExtraProps & Omit<BaseModalProps, "children">, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides>;
+
+declare const FormDialog: _saas_ui_forms_zod.ZodFormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
+    cancel?: _chakra_ui_react.ButtonProps;
+}>;
+
+export { FormDialog, createZodFormDialog };

package/dist/zod/index.js

@@ -0,0 +1,165 @@
+'use client'
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/zod/index.ts
+var zod_exports = {};
+__export(zod_exports, {
+  FormDialog: () => FormDialog2,
+  createZodFormDialog: () => createZodFormDialog
+});
+module.exports = __toCommonJS(zod_exports);
+var import_zod = require("@saas-ui/forms/zod");
+
+// src/form.tsx
+var import_react2 = require("@chakra-ui/react");
+var import_react_utils = require("@saas-ui/react-utils");
+var import_forms = require("@saas-ui/forms");
+
+// src/modal.tsx
+var import_react = require("@chakra-ui/react");
+var import_utils = require("@chakra-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseModal = (props) => {
+  const {
+    title,
+    footer,
+    children,
+    isOpen,
+    onClose,
+    hideCloseButton,
+    hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Modal, { isOpen, onClose, ...rest, children: [
+    !hideOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.ModalContent, { ...contentProps, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalHeader, { ...headerProps, children: title }),
+      !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalCloseButton, {}),
+      (0, import_utils.runIfFn)(children, {
+        isOpen,
+        onClose
+      }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ModalFooter, { ...footerProps, children: footer })
+    ] })
+  ] });
+};
+
+// src/form.tsx
+var import_jsx_runtime2 = require("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(Form3) {
+  const Dialog = (0, import_react2.forwardRef)((props, ref) => {
+    const { isOpen, onClose, footer, children, ...rest } = props;
+    const { modalProps, formProps, fields } = useFormProps(rest);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Form3,
+      {
+        ref,
+        ...formProps,
+        flex: "1",
+        minHeight: "0px",
+        display: "flex",
+        flexDirection: "column",
+        children: (form) => {
+          var _a, _b;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.ModalBody, { height: "100%", children: (0, import_react_utils.runIfFn)(children, form) || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_forms.AutoFields, {}) }),
+            footer || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react2.ModalFooter, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_react2.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__ */ (0, import_jsx_runtime2.jsx)(import_forms.SubmitButton, { ...fields == null ? void 0 : fields.submit })
+            ] })
+          ] });
+        }
+      }
+    ) });
+  });
+  Dialog.displayName = `${Form3.displayName || Form3.name}Dialog`;
+  Dialog.id = Form3.id;
+  return Dialog;
+}
+var FormDialog = createFormDialog(import_forms.Form);
+
+// src/zod/create-zod-form-dialog.ts
+function createZodFormDialog(Form3) {
+  return createFormDialog(Form3);
+}
+
+// src/zod/index.ts
+var FormDialog2 = createZodFormDialog(import_zod.Form);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormDialog,
+  createZodFormDialog
+});
+//# sourceMappingURL=index.js.map

package/dist/zod/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/zod/index.ts","../../src/form.tsx","../../src/modal.tsx","../../src/zod/create-zod-form-dialog.ts"],"sourcesContent":["import { Form } from '@saas-ui/forms/zod'\nimport { createZodFormDialog } from './create-zod-form-dialog'\n\nexport { createZodFormDialog }\n\nexport const FormDialog = createZodFormDialog(Form)\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","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 type { ZodFormType } from '@saas-ui/forms/zod'\nimport { createFormDialog, FormDialogFieldOverrides } from '../form'\nimport type { BaseModalProps } from '../modal'\n\nexport function createZodFormDialog<\n  FieldDefs = any,\n  ExtraProps = object,\n  ExtraFieldProps extends object = object,\n  ExtraOverrides = object,\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {\n  return createFormDialog(Form) as unknown as ZodFormType<\n    FieldDefs,\n    ExtraProps & Omit<BaseModalProps, 'children'>,\n    ExtraFieldProps,\n    ExtraOverrides & FormDialogFieldOverrides\n  >\n}\n"],"mappings":"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","names":["FormDialog","import_react","ChakraModal","import_jsx_runtime","Form","Form","FormDialog"]}

package/dist/zod/index.mjs

@@ -0,0 +1,20 @@
+'use client'
+import {
+  createFormDialog
+} from "../chunk-I63K4ILP.mjs";
+
+// src/zod/index.ts
+import { Form } from "@saas-ui/forms/zod";
+
+// src/zod/create-zod-form-dialog.ts
+function createZodFormDialog(Form2) {
+  return createFormDialog(Form2);
+}
+
+// src/zod/index.ts
+var FormDialog = createZodFormDialog(Form);
+export {
+  FormDialog,
+  createZodFormDialog
+};
+//# sourceMappingURL=index.mjs.map

package/dist/zod/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/zod/index.ts","../../src/zod/create-zod-form-dialog.ts"],"sourcesContent":["import { Form } from '@saas-ui/forms/zod'\nimport { createZodFormDialog } from './create-zod-form-dialog'\n\nexport { createZodFormDialog }\n\nexport const FormDialog = createZodFormDialog(Form)\n","import type { ZodFormType } from '@saas-ui/forms/zod'\nimport { createFormDialog, FormDialogFieldOverrides } from '../form'\nimport type { BaseModalProps } from '../modal'\n\nexport function createZodFormDialog<\n  FieldDefs = any,\n  ExtraProps = object,\n  ExtraFieldProps extends object = object,\n  ExtraOverrides = object,\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {\n  return createFormDialog(Form) as unknown as ZodFormType<\n    FieldDefs,\n    ExtraProps & Omit<BaseModalProps, 'children'>,\n    ExtraFieldProps,\n    ExtraOverrides & FormDialogFieldOverrides\n  >\n}\n"],"mappings":";;;;;;AAAA,SAAS,YAAY;;;ACId,SAAS,oBAKdA,OAA2E;AAC3E,SAAO,iBAAiBA,KAAI;AAM9B;;;ADXO,IAAM,aAAa,oBAAoB,IAAI;","names":["Form"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/modals",
-  "version": "2.1.41",
+  "version": "2.2.1",
   "description": "A modal manager for Chakra UI",
   "source": "src/index.ts",
   "exports": {
@@ -9,16 +9,49 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
+    "./zod": {
+      "require": "./dist/zod/index.js",
+      "types": "./dist/zod/index.d.ts",
+      "import": "./dist/zod/index.mjs"
+    },
+    "./zod/src": {
+      "default": "./src/zod/index.ts"
+    },
+    "./yup": {
+      "require": "./dist/yup/index.js",
+      "types": "./dist/yup/index.d.ts",
+      "import": "./dist/yup/index.mjs"
+    },
+    "./yup/src": {
+      "default": "./src/yup/index.ts"
+    },
     "./src": {
       "default": "./src/index.ts"
     }
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/*"
+      ]
+    },
+    "zod": {
+      "*": [
+        "dist/zod/*"
+      ]
+    },
+    "yup": {
+      "*": [
+        "dist/yup/*"
+      ]
+    }
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "build": "tsup src/index.ts --config tsup.config.ts",
+    "build": "tsup --config tsup.config.ts",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit"
@@ -58,10 +91,10 @@
   },
   "dependencies": {
     "@chakra-ui/react-utils": "^2.0.12",
-    "@chakra-ui/utils": "^2.0.15",
-    "@saas-ui/forms": "2.6.11",
-    "@saas-ui/hooks": "2.0.3",
-    "@saas-ui/react-utils": "2.0.1"
+    "@chakra-ui/utils": "^2.2.1",
+    "@saas-ui/forms": "2.7.1",
+    "@saas-ui/hooks": "2.1.0",
+    "@saas-ui/react-utils": "2.1.1"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.4.9",

package/src/yup/create-yup-form-dialog.ts

@@ -0,0 +1,18 @@
+import type { YupFormType } from '@saas-ui/forms/yup'
+import { FormDialogFieldOverrides, createFormDialog } from '../form'
+
+import type { BaseModalProps } from '../modal'
+
+export function createYupFormDialog<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraFieldProps extends object = object,
+  ExtraOverrides = object,
+>(Form: YupFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
+  return createFormDialog(Form) as unknown as YupFormType<
+    FieldDefs,
+    ExtraProps & Omit<BaseModalProps, 'children'>,
+    ExtraFieldProps,
+    ExtraOverrides & FormDialogFieldOverrides
+  >
+}

package/src/yup/index.ts

@@ -0,0 +1,6 @@
+import { Form } from '@saas-ui/forms/yup'
+import { createYupFormDialog } from './create-yup-form-dialog'
+
+export { createYupFormDialog }
+
+export const FormDialog = createYupFormDialog(Form)

package/src/zod/create-zod-form-dialog.ts

@@ -0,0 +1,17 @@
+import type { ZodFormType } from '@saas-ui/forms/zod'
+import { createFormDialog, FormDialogFieldOverrides } from '../form'
+import type { BaseModalProps } from '../modal'
+
+export function createZodFormDialog<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraFieldProps extends object = object,
+  ExtraOverrides = object,
+>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
+  return createFormDialog(Form) as unknown as ZodFormType<
+    FieldDefs,
+    ExtraProps & Omit<BaseModalProps, 'children'>,
+    ExtraFieldProps,
+    ExtraOverrides & FormDialogFieldOverrides
+  >
+}

package/src/zod/index.ts

@@ -0,0 +1,6 @@
+import { Form } from '@saas-ui/forms/zod'
+import { createZodFormDialog } from './create-zod-form-dialog'
+
+export { createZodFormDialog }
+
+export const FormDialog = createZodFormDialog(Form)