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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx","../src/default-modals.ts","../src/create-modals.tsx"],"sourcesContent":["// Exporting from './dialog'\nexport { ConfirmDialog } from './dialog'\nexport type { ConfirmDialogProps } from './dialog'\n\n// Exporting from './drawer'\nexport { BaseDrawer, Drawer } from './drawer'\nexport type { BaseDrawerProps, DrawerProps } from './drawer'\n\n// Exporting from './modal'\nexport { BaseModal, Modal } from './modal'\nexport type { BaseModalProps } from './modal'\n\n// Exporting from './menu'\nexport { MenuDialog, MenuDialogList } from './menu'\nexport type { MenuDialogListProps, MenuDialogProps } from './menu'\n\n// Exporting from './form'\nexport { FormDialog, createFormDialog } from './form'\nexport type {\n  DefaultFormType,\n  FormDialogFieldOverrides,\n  FormDialogProps,\n} from './form'\n\n// Exporting from './provider'\nexport {\n  ModalsContext,\n  ModalsProvider,\n  useModals,\n  useModalsContext,\n} from './provider'\nexport type {\n  ConfirmDialogOptions,\n  DrawerOptions,\n  FormDialogOptions,\n  MenuDialogOptions,\n  ModalConfig,\n  ModalId,\n  ModalScopes,\n  ModalsContextValue,\n  ModalsProviderProps,\n  OpenOptions,\n} from './provider'\n\n// Exporting from './create-modals'\nexport { createModals } from './create-modals'\nexport type { CreateModalsOptions } from './create-modals'\n","import * as React from 'react'\n\nimport {\n  AlertDialog,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogContent,\n  AlertDialogOverlay,\n  AlertDialogProps,\n  ButtonGroup,\n  ButtonGroupProps,\n  Button,\n  ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n  extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n  /**\n   * The dialog title\n   */\n  title?: React.ReactNode\n  /**\n   * The cancel button label\n   */\n  cancelLabel?: React.ReactNode\n  /**\n   * The confirm button label\n   */\n  confirmLabel?: React.ReactNode\n  /**\n   * The cancel button props\n   */\n  cancelProps?: ButtonProps\n  /**\n   * The confirm button props\n   */\n  confirmProps?: ButtonProps\n  /**\n   * The button group props\n   */\n  buttonGroupProps?: ButtonGroupProps\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   * 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 ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n  const {\n    title,\n    cancelLabel = 'Cancel',\n    confirmLabel = 'Confirm',\n    cancelProps,\n    confirmProps,\n    buttonGroupProps,\n    isOpen,\n    closeOnCancel = true,\n    closeOnConfirm = true,\n    leastDestructiveFocus = 'cancel',\n    onClose,\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 && onClose()\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  return (\n    <AlertDialog\n      isOpen={isOpen}\n      onClose={onClose}\n      {...rest}\n      leastDestructiveRef={\n        leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n      }\n    >\n      <AlertDialogOverlay>\n        <AlertDialogContent>\n          <AlertDialogHeader>{title}</AlertDialogHeader>\n\n          <AlertDialogBody>{children}</AlertDialogBody>\n\n          <AlertDialogFooter>\n            <ButtonGroup {...buttonGroupProps}>\n              <Button\n                ref={cancelRef}\n                {...cancelProps}\n                onClick={() => {\n                  onCancel?.()\n\n                  closeOnCancel && onClose()\n                }}\n              >\n                {cancelProps?.children || cancelLabel}\n              </Button>\n              <Button\n                ref={confirmRef}\n                isLoading={isLoading}\n                {...confirmProps}\n                onClick={handleConfirm}\n              >\n                {confirmProps?.children || confirmLabel}\n              </Button>\n            </ButtonGroup>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialogOverlay>\n    </AlertDialog>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  Drawer as ChakraDrawer,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerBody,\n  DrawerCloseButton,\n  DrawerProps as ChakraDrawerProps,\n  ModalHeaderProps,\n  ModalContentProps,\n  ModalFooterProps,\n} from '@chakra-ui/react'\nimport { runIfFn, MaybeRenderProp } from '@chakra-ui/utils'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n  /**\n   * The drawer 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 overflow\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 BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n  const {\n    title,\n    children,\n    footer,\n    isOpen,\n    onClose,\n    hideCloseButton,\n    hideOverlay,\n    headerProps,\n    contentProps,\n    footerProps,\n    ...rest\n  } = props\n  return (\n    <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n      {!hideOverlay && <DrawerOverlay />}\n      <DrawerContent {...contentProps}>\n        {title && <DrawerHeader {...headerProps}>{title}</DrawerHeader>}\n        {!hideCloseButton && <DrawerCloseButton />}\n        {runIfFn(children, {\n          isOpen,\n          onClose,\n        })}\n        {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}\n      </DrawerContent>\n    </ChakraDrawer>\n  )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n  /**\n   * Drawer footer content, wrapped with `DrawerFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n  const { children, isOpen, onClose, ...rest } = props\n  return (\n    <BaseDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n      <DrawerBody>\n        {runIfFn(children, {\n          isOpen,\n          onClose,\n        })}\n      </DrawerBody>\n    </BaseDrawer>\n  )\n}\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'\n\nimport { runIfFn, MaybeRenderProp } 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  ModalFooter,\n  chakra,\n  forwardRef,\n  useMenuContext,\n  useMenuList,\n  createStylesContext,\n  useMultiStyleConfig,\n  Menu,\n  MenuListProps,\n  useBreakpointValue,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n  /**\n   * The modal footer, wrapped with `ModalFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n  const { onClose, onCloseComplete, ...rest } = props\n\n  return (\n    <Menu\n      variant=\"dialog\"\n      onClose={() => {\n        onClose?.()\n        // Not supported in Menu, so we call it here instead\n        // @todo Refactor this in v2?\n        onCloseComplete?.()\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport interface MenuDialogListProps\n  extends Omit<\n      BaseModalProps,\n      'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n    >,\n    Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n  (props, forwardedRef) => {\n    const {\n      rootProps,\n      title,\n      footer,\n      initialFocusRef,\n      hideCloseButton,\n      motionPreset = 'slideInBottom',\n      isCentered: isCenteredProp,\n      ...rest\n    } = props\n\n    const { isOpen, onClose, menuRef } = useMenuContext()\n\n    const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n    const styles = useMultiStyleConfig('Menu', props)\n\n    const isCentered = useBreakpointValue({ base: true, md: false })\n\n    return (\n      <BaseModal\n        isOpen={isOpen}\n        onClose={onClose}\n        initialFocusRef={initialFocusRef || menuRef}\n        title={title}\n        hideCloseButton={hideCloseButton}\n        motionPreset={motionPreset}\n        isCentered={isCenteredProp ?? isCentered}\n        contentProps={{ mx: 4 }}\n      >\n        {/* We forward the styles again, otherwise the modal styles will be picked up */}\n        <StylesProvider value={styles}>\n          <chakra.div\n            {...ownProps}\n            ref={ref as React.Ref<HTMLDivElement>}\n            __css={{\n              outline: 0,\n              maxHeight: '80vh', // can override this in theme\n              overflowY: 'auto', // can override this in theme\n              ...styles.list,\n              boxShadow: 'none',\n              border: 0,\n              _dark: {\n                /* @ts-expect-error */\n                ...(styles.list._dark || {}),\n                boxShadow: 'none',\n              },\n            }}\n          />\n        </StylesProvider>\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </BaseModal>\n    )\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","import * as React from 'react'\n\nimport { BaseModalProps } from './modal'\nimport { DrawerProps } from './drawer'\nimport { ConfirmDialogProps } from './dialog'\nimport { MenuDialogProps } from './menu'\nimport { FormDialogProps } from './form'\nimport { defaultModals } from './default-modals'\nimport { FieldValues, FormType } from '@saas-ui/forms'\nimport { FormDialogHandler, FormHandler } from './types'\n\nexport interface ModalsContextValue<\n  TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,\n  TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>\n> {\n  open: <T extends OpenOptions<TTypes>>(\n    componentOrOptions: T extends {\n      component: infer TComponent extends React.FC<any>\n    }\n      ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>\n      : T extends {\n          type: infer TType extends keyof TModals\n        }\n      ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>\n      : T,\n    options?: T extends React.FC<any>\n      ? WithModalOptions<React.ComponentPropsWithRef<T>>\n      : never\n  ) => ModalId\n  drawer: (options: DrawerOptions) => ModalId\n  alert: (options: ConfirmDialogOptions) => ModalId\n  confirm: (options: ConfirmDialogOptions) => ModalId\n  menu: (options: MenuDialogOptions) => ModalId\n  form: FormDialogHandler<TModals['form']>\n  close: (id: ModalId) => void\n  closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue<\n  typeof defaultModals\n> | null>(null)\n\nexport interface ModalsProviderProps<\n  TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>\n> {\n  children: React.ReactNode\n  modals?: TModals\n}\n\nexport type ModalId = string | number\n\ntype WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions\n\ninterface ModalOptions\n  extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {\n  onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n  [key: string]: any\n}\n\nexport interface DrawerOptions\n  extends ModalOptions,\n    Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n  extends ModalOptions,\n    Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n  extends ModalOptions,\n    Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n  extends ModalOptions,\n    Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions<TModalTypes extends string> extends ModalOptions {\n  type?: TModalTypes\n  scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport interface ModalConfig<\n  TModalOptions extends ModalOptions = ModalOptions,\n  TModalTypes extends string = string\n> {\n  /**\n   * The modal id, autogenerated when not set.\n   * Can be used to close modals.\n   */\n  id?: ModalId | null\n  /**\n   * The modal props\n   */\n  props?: TModalOptions | null\n  /**\n   * The modal scope\n   * Modals can only have one level per scope.\n   * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n   */\n  scope?: ModalScopes | string\n  /**\n   * The modal type to open.\n   * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n   *\n   * Custom types can be configured using the `modals` prop of `ModalProvider`\n   */\n  type?: TModalTypes\n  /**\n   * Render a custom modal component.\n   * This will ignore the `type` param.\n   */\n  component?: React.FC<BaseModalProps>\n  /**\n   * Whether the modal is open or not.\n   * This is used internally to keep track of the modal state.\n   */\n  isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n  id: null,\n  props: null,\n  type: 'modal',\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n  // Note that updating the Set doesn't trigger a re-render,\n  // use in conjuction with setActiveModals\n  const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n  const [activeModals, setActiveModals] = React.useState<\n    Record<string, ModalConfig>\n  >({\n    modal: initialModalState,\n  })\n\n  const getModalComponent = React.useMemo(() => {\n    const _modals: Record<string, React.FC<any>> = {\n      ...defaultModals,\n      ...modals,\n    }\n\n    return (type = 'modal') => {\n      const component = _modals[type] || _modals.modal\n\n      return component\n    }\n  }, [modals])\n\n  const setActiveModal = (modal: ModalConfig, scope?: string) => {\n    if (!scope) {\n      return setActiveModals({\n        modal,\n      })\n    }\n    setActiveModals((prevState) => ({\n      ...prevState,\n      [scope]: modal,\n    }))\n  }\n\n  const open = <T extends OpenOptions<any>>(\n    componentOrOptions: any,\n    options?: T extends React.FC<any>\n      ? WithModalOptions<React.ComponentPropsWithRef<T>>\n      : never\n  ): ModalId => {\n    let _options: ModalOptions\n    if (typeof componentOrOptions === 'function') {\n      _options = {\n        component: componentOrOptions,\n        ...options,\n      } as unknown as T\n    } else {\n      _options = componentOrOptions\n    }\n\n    const {\n      id = _instances.size + 1,\n      type = 'modal',\n      scope = 'modal',\n      component,\n      ...props\n    } = _options\n\n    const modal: ModalConfig<T> = {\n      id,\n      props: props as T,\n      type,\n      scope,\n      component,\n      isOpen: true,\n    }\n\n    _instances.add(modal)\n    setActiveModal(modal, scope)\n\n    return id\n  }\n\n  const drawer = (options: DrawerOptions) => {\n    return open<DrawerOptions>({\n      ...options,\n      type: 'drawer',\n    })\n  }\n\n  const alert = (options: ConfirmDialogOptions) => {\n    return open({\n      ...options,\n      scope: 'alert',\n      type: 'alert',\n      cancelProps: {\n        display: 'none',\n      },\n      confirmProps: {\n        label: 'OK',\n      },\n      leastDestructiveFocus: 'confirm',\n    })\n  }\n\n  const confirm = (options: ConfirmDialogOptions) => {\n    return open<ConfirmDialogOptions>({\n      ...options,\n      scope: 'alert',\n      type: 'confirm',\n    })\n  }\n\n  const menu = (options: MenuDialogOptions) => {\n    return open<MenuDialogOptions>({\n      ...options,\n      type: 'menu',\n    })\n  }\n\n  const form = (options: any) => {\n    return open({\n      ...options,\n      type: 'form',\n    })\n  }\n\n  const close = async (id?: ModalId | null, force?: boolean) => {\n    const modals = [...Array.from(_instances)]\n    const modal = modals.filter((modal) => modal.id === id)[0]\n\n    if (!modal) {\n      return\n    }\n\n    const shouldClose = await modal.props?.onClose?.({ force })\n    if (shouldClose === false) {\n      return\n    }\n\n    const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n    if (scoped.length === 1) {\n      setActiveModal(\n        {\n          ...modal,\n          isOpen: false,\n        },\n        modal.scope\n      )\n    } else if (scoped.length > 1) {\n      setActiveModal(scoped[scoped.length - 2], modal.scope)\n    } else {\n      setActiveModal(\n        {\n          id: null,\n          props: null,\n          type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n        },\n        modal.scope\n      )\n    }\n\n    // @todo this is not ideal, but not all modals support onCloseComplete\n    setTimeout(() => closeComplete(id), 200)\n  }\n\n  const closeComplete = (id?: ModalId | null) => {\n    const modals = [...Array.from(_instances)]\n    const modal = modals.filter((modal) => modal.id === id)[0]\n\n    _instances.delete(modal)\n\n    const scoped = modal && modals.filter(({ scope }) => scope === modal.scope)\n\n    if (scoped?.length === 1) {\n      setActiveModal(initialModalState, modal.scope)\n    }\n  }\n\n  const closeAll = () => {\n    _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n    _instances.clear()\n\n    setActiveModal(initialModalState)\n  }\n\n  const context = {\n    open,\n    drawer,\n    alert,\n    confirm,\n    menu,\n    form,\n    close,\n    closeAll,\n  }\n\n  const content = React.useMemo(\n    () =>\n      Object.entries(activeModals).map(([scope, config]) => {\n        const Component = config.component || getModalComponent(config.type)\n\n        const { title, body, children, ...props } = config.props || {}\n\n        return (\n          <Component\n            key={scope}\n            title={title}\n            children={body || children}\n            {...props}\n            isOpen={!!config.isOpen}\n            onClose={() => close(config.id)}\n            onCloseComplete={() => closeComplete(config.id)}\n          />\n        )\n      }),\n    [activeModals]\n  )\n\n  return (\n    <ModalsContext.Provider value={context}>\n      {content}\n      {children}\n    </ModalsContext.Provider>\n  )\n}\n\nexport const useModalsContext = () => React.useContext(ModalsContext)\n\nexport const useModals = () => {\n  const modals = useModalsContext()\n\n  if (!modals) {\n    throw new Error('useModals must be used within a ModalsProvider')\n  }\n\n  return modals\n}\n","import { ConfirmDialog } from './dialog'\nimport { MenuDialog } from './menu'\nimport { FormDialog } from './form'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n  alert: ConfirmDialog,\n  confirm: ConfirmDialog,\n  drawer: Drawer,\n  modal: Modal,\n  menu: MenuDialog,\n  form: FormDialog,\n}\n","import { defaultModals } from './default-modals'\nimport {\n  ModalsContextValue,\n  ModalsProvider,\n  ModalsProviderProps,\n  useModals,\n} from './provider'\n\nexport interface CreateModalsOptions<\n  TModalDefs extends Record<string, React.FC<any>>\n> {\n  modals: TModalDefs\n}\n\nexport const createModals = <TModalDefs extends Record<string, React.FC<any>>>(\n  options: CreateModalsOptions<TModalDefs>\n) => {\n  const modals = {\n    ...defaultModals,\n    ...options.modals,\n  }\n  const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {\n    return <ModalsProvider children={props.children} modals={modals} />\n  }\n\n  return {\n    ModalsProvider: Provider,\n    useModals: useModals as () => ModalsContextValue<typeof modals>,\n  }\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime","ChakraDrawer","import_react","import_utils","import_jsx_runtime","ChakraModal","import_react","import_jsx_runtime","import_react","import_jsx_runtime","Form","React","import_jsx_runtime","modals","modal","children","import_jsx_runtime"]}
+{"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":["jsx","jsxs","open","runIfFn","jsx","jsxs","open"]}

package/package.json

@@ -1,32 +1,15 @@
 {
   "name": "@saas-ui/modals",
-  "version": "2.4.2",
+  "version": "3.0.0-alpha.0",
   "description": "A modal manager for Chakra UI",
   "source": "src/index.ts",
+  "type": "module",
   "exports": {
     ".": {
+      "sui": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    },
-    "./zod": {
-      "types": "./dist/zod/index.d.ts",
-      "require": "./dist/zod/index.js",
-      "import": "./dist/zod/index.mjs"
-    },
-    "./zod/src": {
-      "default": "./src/zod/index.ts"
-    },
-    "./yup": {
-      "types": "./dist/yup/index.d.ts",
-      "require": "./dist/yup/index.js",
-      "import": "./dist/yup/index.mjs"
-    },
-    "./yup/src": {
-      "default": "./src/yup/index.ts"
-    },
-    "./src": {
-      "default": "./src/index.ts"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     }
   },
   "typesVersions": {
@@ -41,8 +24,8 @@
       ]
     }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist",
@@ -59,12 +42,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "author": "Eelco Wiersma <eelco@appulse.nl>",
+  "author": "Eelco Wiersma <eelco@saas-ui.dev>",
   "license": "MIT",
   "homepage": "https://saas-ui.dev/",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/saas-js/saas-ui",
+    "url": "git+https://github.com/saas-js/saas-ui.git",
     "directory": "packages/saas-ui-modals"
   },
   "keywords": [
@@ -85,16 +68,15 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@chakra-ui/utils": "^2.2.3",
-    "@saas-ui/forms": "2.9.1",
-    "@saas-ui/hooks": "2.3.0",
-    "@saas-ui/react-utils": "2.2.1"
+    "@saas-ui/core": "3.0.0-alpha.0",
+    "@saas-ui/forms": "3.0.0-alpha.0",
+    "@saas-ui/hooks": "3.0.0-alpha.0",
+    "@saas-ui/modals-provider": "1.0.0-alpha.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=2.9.0 <3",
+    "@chakra-ui/react": "^3.0.0",
     "@emotion/react": ">=11.0.0",
-    "@emotion/styled": ">=11.0.0",
-    "framer-motion": ">=6.0.0",
+    "@saas-ui/react": "3.0.0-alpha.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/alert-dialog.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react'
+
+import { Button, ButtonProps, type HTMLChakraProps } from '@chakra-ui/react'
+import { callAll } from '@saas-ui/core/utils'
+import { Dialog } from '@saas-ui/react/dialog'
+
+export 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
+}
+
+export const AlertDialog: React.FC<AlertDialogProps> = (props) => {
+  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?.()
+      if (typeof result?.then === 'function') {
+        setIsLoading(true)
+        await result
+      }
+
+      closeOnConfirm && onOpenChange({ open: false })
+      /* eslint-disable no-useless-catch */
+    } catch (e: any) {
+      throw e
+    } finally {
+      setIsLoading(false)
+    }
+    /* eslint-enable */
+  }
+
+  const titleId = React.useId()
+  const contentId = React.useId()
+
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={onOpenChange}
+      size="sm"
+      aria-labelledby={titleId}
+      aria-describedby={contentId}
+      {...rest}
+      initialFocusEl={() =>
+        leastDestructiveFocus === 'cancel'
+          ? cancelRef.current
+          : confirmRef.current
+      }
+    >
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title id={titleId}>{title}</Dialog.Title>
+        </Dialog.Header>
+
+        <Dialog.Body id={contentId}>{children}</Dialog.Body>
+
+        <Dialog.Footer {...slotProps?.footer}>
+          <Button
+            ref={cancelRef}
+            variant="ghost"
+            colorPalette="gray"
+            {...slotProps?.cancel}
+            onClick={callAll(slotProps?.cancel?.onClick, () => {
+              onCancel?.()
+
+              closeOnCancel && onOpenChange({ open: false })
+            })}
+          >
+            {slotProps?.cancel?.children || translations?.cancel || 'Cancel'}
+          </Button>
+          <Button
+            ref={confirmRef}
+            variant="solid"
+            disabled={isLoading}
+            {...slotProps?.confirm}
+            onClick={callAll(handleConfirm, slotProps?.confirm?.onClick)}
+          >
+            {slotProps?.confirm?.children || translations?.confirm || 'OK'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}

package/src/default-modals.ts

@@ -1,14 +1,10 @@
-import { ConfirmDialog } from './dialog'
-import { MenuDialog } from './menu'
-import { FormDialog } from './form'
+import { AlertDialog } from './alert-dialog'
 import { Drawer } from './drawer'
 import { Modal } from './modal'
 
 export const defaultModals = {
-  alert: ConfirmDialog,
-  confirm: ConfirmDialog,
+  alert: AlertDialog,
+  confirm: AlertDialog,
   drawer: Drawer,
   modal: Modal,
-  menu: MenuDialog,
-  form: FormDialog,
 }

package/src/drawer.tsx

@@ -1,31 +1,28 @@
 import * as React from 'react'
 
-import {
-  Drawer as ChakraDrawer,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerProps as ChakraDrawerProps,
-  ModalHeaderProps,
-  ModalContentProps,
-  ModalFooterProps,
-} from '@chakra-ui/react'
-import { runIfFn, MaybeRenderProp } from '@chakra-ui/utils'
+import { type HTMLChakraProps } from '@chakra-ui/react'
+import { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'
+import { Drawer as BaseDrawer } from '@saas-ui/react/drawer'
 
-export interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {
+export interface DrawerProps extends Omit<BaseDrawer.RootProps, 'children'> {
   /**
    * The drawer title
    */
   title: React.ReactNode
   /**
-   * The modal children
+   * 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<{
-    isOpen: boolean
-    onClose: () => void
+    open: boolean
+    setOpen: (open: boolean) => void
   }>
   /**
    * The modal footer
@@ -36,70 +33,59 @@ export interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {
    */
   hideCloseButton?: boolean
   /**
-   * Hide the overflow
+   * Hide the backdrop
    */
-  hideOverlay?: boolean
+  hideBackdrop?: boolean
   /**
    * Props for the modal header
    */
-  headerProps?: ModalHeaderProps
+  headerProps?: HTMLChakraProps<'div'>
   /**
    * Props for the modal content
    */
-  contentProps?: ModalContentProps
+  contentProps?: BaseDrawer.ContentProps
   /**
    * Props for the modal footer
    */
-  footerProps?: ModalFooterProps
+  footerProps?: HTMLChakraProps<'div'>
+  /**
+   * Props for the modal body
+   */
+  bodyProps?: HTMLChakraProps<'div'>
 }
 
-export const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {
+export const Drawer: React.FC<DrawerProps> = (props) => {
   const {
     title,
     children,
     footer,
-    isOpen,
-    onClose,
+    open,
+    onOpenChange,
     hideCloseButton,
-    hideOverlay,
+    hideBackdrop,
     headerProps,
     contentProps,
+    bodyProps,
     footerProps,
     ...rest
   } = props
   return (
-    <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>
-      {!hideOverlay && <DrawerOverlay />}
-      <DrawerContent {...contentProps}>
-        {title && <DrawerHeader {...headerProps}>{title}</DrawerHeader>}
-        {!hideCloseButton && <DrawerCloseButton />}
-        {runIfFn(children, {
-          isOpen,
-          onClose,
-        })}
-        {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}
-      </DrawerContent>
-    </ChakraDrawer>
-  )
-}
-
-export interface DrawerProps extends BaseDrawerProps {
-  /**
-   * Drawer footer content, wrapped with `DrawerFooter`
-   */
-  footer?: React.ReactNode
-}
-
-export const Drawer: React.FC<DrawerProps> = (props) => {
-  const { children, isOpen, onClose, ...rest } = props
-  return (
-    <BaseDrawer isOpen={isOpen} onClose={onClose} {...rest}>
-      <DrawerBody>
-        {runIfFn(children, {
-          isOpen,
-          onClose,
-        })}
-      </DrawerBody>
-    </BaseDrawer>
+    <BaseDrawer.Root open={open} onOpenChange={onOpenChange} {...rest}>
+      {!hideBackdrop && <BaseDrawer.Backdrop />}
+      <BaseDrawer.Content {...contentProps}>
+        {title && (
+          <BaseDrawer.Header {...headerProps}>{title}</BaseDrawer.Header>
+        )}
+        {!hideCloseButton && <BaseDrawer.CloseTrigger />}
+        <BaseDrawer.Body {...bodyProps}>
+          <BaseDrawer.Context>
+            {({ open, setOpen }) => runIfFn(children, { open, setOpen })}
+          </BaseDrawer.Context>
+        </BaseDrawer.Body>
+        {footer && (
+          <BaseDrawer.Footer {...footerProps}>{footer}</BaseDrawer.Footer>
+        )}
+      </BaseDrawer.Content>
+    </BaseDrawer.Root>
   )
 }

package/src/form.tsx

@@ -1,24 +1,17 @@
 import * as React from 'react'
 
+import { Button, ButtonProps, Dialog } from '@chakra-ui/react'
+import { runIfFn } from '@saas-ui/core/utils'
 import {
-  ModalBody,
-  ModalFooter,
-  Button,
-  forwardRef,
-  ButtonProps,
-} from '@chakra-ui/react'
-import { runIfFn } from '@saas-ui/react-utils'
-
-import {
-  Form,
   AutoFields,
-  SubmitButton,
-  FormProps,
-  FieldValues,
-  FieldResolver,
+  DefaultFieldOverrides,
   FieldProps,
+  FieldResolver,
+  FieldValues,
+  Form,
+  FormProps,
   FormType,
-  DefaultFieldOverrides,
+  SubmitButton,
 } from '@saas-ui/forms'
 
 import { BaseModal, BaseModalProps } from './modal'
@@ -137,7 +130,7 @@ type MergeDialogProps<T> =
 type IsSchemaType<T, Schema, FieldDefs> =
   T extends DefaultFormType<FieldDefs>
     ? T extends (
-        props: FormProps<infer TSchema, infer TFieldValues, infer TContext>
+        props: FormProps<infer TSchema, infer TFieldValues, infer TContext>,
       ) => any
       ? Schema extends TSchema
         ? true
@@ -155,7 +148,7 @@ export type DefaultFormType<
   TFieldValues extends Record<string, any> = any,
   TContext extends object = object,
 >(
-  props: any
+  props: any,
 ) => React.ReactElement) & {
   displayName?: string
   id?: string
@@ -173,7 +166,7 @@ export function createFormDialog<
     ExtraOverrides
   > = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>,
 >(Form: TFormType) {
-  const Dialog = forwardRef<any, 'div'>((props, ref) => {
+  const Dialog = React.forwardRef<HTMLDivElement, any>((props, ref) => {
     const { isOpen, onClose, footer, children, ...rest } = props
     const { modalProps, formProps, fields } = useFormProps(rest)
     return (
@@ -188,12 +181,12 @@ export function createFormDialog<
         >
           {(form: any) => (
             <>
-              <ModalBody height="100%">
+              <Dialog.Body height="100%">
                 {runIfFn(children, form) || <AutoFields />}
-              </ModalBody>
+              </Dialog.Body>
 
               {footer || (
-                <ModalFooter>
+                <Dialog.Footer>
                   <Button
                     variant="ghost"
                     mr={3}
@@ -203,7 +196,7 @@ export function createFormDialog<
                     {fields?.cancel?.children ?? 'Cancel'}
                   </Button>
                   <SubmitButton {...fields?.submit} />
-                </ModalFooter>
+                </Dialog.Footer>
               )}
             </>
           )}