@sytechui/modal 2.2.29

package/dist/modal-transition.js

@@ -0,0 +1,64 @@
+"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/modal-transition.ts
+var modal_transition_exports = {};
+__export(modal_transition_exports, {
+  scaleInOut: () => scaleInOut
+});
+module.exports = __toCommonJS(modal_transition_exports);
+var import_framer_utils = require("@sytechui/framer-utils");
+var scaleInOut = {
+  enter: {
+    scale: "var(--scale-enter)",
+    y: "var(--slide-enter)",
+    opacity: 1,
+    willChange: "auto",
+    transition: {
+      scale: {
+        duration: 0.4,
+        ease: import_framer_utils.TRANSITION_EASINGS.ease
+      },
+      opacity: {
+        duration: 0.4,
+        ease: import_framer_utils.TRANSITION_EASINGS.ease
+      },
+      y: {
+        type: "spring",
+        bounce: 0,
+        duration: 0.6
+      }
+    }
+  },
+  exit: {
+    scale: "var(--scale-exit)",
+    y: "var(--slide-exit)",
+    opacity: 0,
+    willChange: "transform",
+    transition: {
+      duration: 0.3,
+      ease: import_framer_utils.TRANSITION_EASINGS.ease
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  scaleInOut
+});

package/dist/modal-transition.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  scaleInOut
+} from "./chunk-S6FNYUYS.mjs";
+export {
+  scaleInOut
+};

package/dist/modal.d.mts

@@ -0,0 +1,19 @@
+import * as _sytechui_system from '@sytechui/system';
+import { ReactNode } from 'react';
+import { UseModalProps } from './use-modal.mjs';
+import 'tailwind-variants';
+import '@sytechui/theme';
+import 'framer-motion';
+import '@react-aria/overlays';
+import '@sytechui/react-utils';
+import '@react-stately/overlays';
+
+interface ModalProps extends UseModalProps {
+    /**
+     * The content of the modal. Usually the ModalContent
+     */
+    children: ReactNode;
+}
+declare const Modal: _sytechui_system.InternalForwardRefRenderFunction<"div", ModalProps, never>;
+
+export { type ModalProps, Modal as default };

package/dist/modal.d.ts

@@ -0,0 +1,19 @@
+import * as _sytechui_system from '@sytechui/system';
+import { ReactNode } from 'react';
+import { UseModalProps } from './use-modal.js';
+import 'tailwind-variants';
+import '@sytechui/theme';
+import 'framer-motion';
+import '@react-aria/overlays';
+import '@sytechui/react-utils';
+import '@react-stately/overlays';
+
+interface ModalProps extends UseModalProps {
+    /**
+     * The content of the modal. Usually the ModalContent
+     */
+    children: ReactNode;
+}
+declare const Modal: _sytechui_system.InternalForwardRefRenderFunction<"div", ModalProps, never>;
+
+export { type ModalProps, Modal as default };

package/dist/modal.js

@@ -0,0 +1,175 @@
+"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/modal.tsx
+var modal_exports = {};
+__export(modal_exports, {
+  default: () => modal_default
+});
+module.exports = __toCommonJS(modal_exports);
+var import_framer_motion = require("framer-motion");
+var import_overlays2 = require("@react-aria/overlays");
+var import_system2 = require("@sytechui/system");
+
+// src/use-modal.ts
+var import_use_aria_modal_overlay = require("@sytechui/use-aria-modal-overlay");
+var import_react = require("react");
+var import_theme = require("@sytechui/theme");
+var import_system = require("@sytechui/system");
+var import_use_aria_button = require("@sytechui/use-aria-button");
+var import_focus = require("@react-aria/focus");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react_utils = require("@sytechui/react-utils");
+var import_overlays = require("@react-stately/overlays");
+function useModal(originalProps) {
+  var _a, _b, _c;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.modal.variantKeys);
+  const {
+    ref,
+    as,
+    className,
+    classNames,
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    motionProps,
+    closeButton,
+    isDismissable = true,
+    hideCloseButton = false,
+    shouldBlockScroll = true,
+    portalContainer,
+    isKeyboardDismissDisabled = false,
+    onClose,
+    ...otherProps
+  } = props;
+  const Component = as || "section";
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const closeButtonRef = (0, import_react.useRef)(null);
+  const [headerMounted, setHeaderMounted] = (0, import_react.useState)(false);
+  const [bodyMounted, setBodyMounted] = (0, import_react.useState)(false);
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const dialogId = (0, import_react.useId)();
+  const headerId = (0, import_react.useId)();
+  const bodyId = (0, import_react.useId)();
+  const state = (0, import_overlays.useOverlayTriggerState)({
+    isOpen,
+    defaultOpen,
+    onOpenChange: (isOpen2) => {
+      onOpenChange == null ? void 0 : onOpenChange(isOpen2);
+      if (!isOpen2) {
+        onClose == null ? void 0 : onClose();
+      }
+    }
+  });
+  const { modalProps, underlayProps } = (0, import_use_aria_modal_overlay.useAriaModalOverlay)(
+    {
+      isDismissable,
+      shouldBlockScroll,
+      isKeyboardDismissDisabled
+    },
+    state,
+    domRef
+  );
+  const { buttonProps: closeButtonProps } = (0, import_use_aria_button.useAriaButton)({ onPress: state.close }, closeButtonRef);
+  const { isFocusVisible: isCloseButtonFocusVisible, focusProps: closeButtonFocusProps } = (0, import_focus.useFocusRing)();
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.modal)({
+      ...variantProps,
+      disableAnimation
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation]
+  );
+  const getDialogProps = (props2 = {}, ref2 = null) => {
+    var _a2;
+    return {
+      ref: (0, import_shared_utils.mergeRefs)(ref2, domRef),
+      ...(0, import_shared_utils.mergeProps)(modalProps, otherProps, props2),
+      className: slots.base({ class: (0, import_theme.cn)(baseStyles, props2.className) }),
+      id: dialogId,
+      "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
+      "data-dismissable": (0, import_shared_utils.dataAttr)(isDismissable),
+      "aria-modal": (0, import_shared_utils.dataAttr)(true),
+      "data-placement": (_a2 = originalProps == null ? void 0 : originalProps.placement) != null ? _a2 : "right",
+      "aria-labelledby": headerMounted ? headerId : void 0,
+      "aria-describedby": bodyMounted ? bodyId : void 0
+    };
+  };
+  const getBackdropProps = (0, import_react.useCallback)(
+    (props2 = {}) => ({
+      className: slots.backdrop({ class: classNames == null ? void 0 : classNames.backdrop }),
+      ...underlayProps,
+      ...props2
+    }),
+    [slots, classNames, underlayProps]
+  );
+  const getCloseButtonProps = () => {
+    return {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Close",
+      "data-focus-visible": (0, import_shared_utils.dataAttr)(isCloseButtonFocusVisible),
+      className: slots.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
+      ...(0, import_shared_utils.mergeProps)(closeButtonProps, closeButtonFocusProps)
+    };
+  };
+  return {
+    Component,
+    slots,
+    domRef,
+    headerId,
+    bodyId,
+    motionProps,
+    classNames,
+    isDismissable,
+    closeButton,
+    hideCloseButton,
+    portalContainer,
+    shouldBlockScroll,
+    backdrop: (_c = originalProps.backdrop) != null ? _c : "opaque",
+    isOpen: state.isOpen,
+    onClose: state.close,
+    disableAnimation,
+    setBodyMounted,
+    setHeaderMounted,
+    getDialogProps,
+    getBackdropProps,
+    getCloseButtonProps
+  };
+}
+
+// src/modal-context.ts
+var import_react_utils2 = require("@sytechui/react-utils");
+var [ModalProvider, useModalContext] = (0, import_react_utils2.createContext)({
+  name: "ModalContext",
+  errorMessage: "useModalContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Modal />`"
+});
+
+// src/modal.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Modal = (0, import_system2.forwardRef)((props, ref) => {
+  const { children, ...otherProps } = props;
+  const context = useModal({ ...otherProps, ref });
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlays2.Overlay, { portalContainer: context.portalContainer, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalProvider, { value: context, children: context.disableAnimation && context.isOpen ? overlay : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: context.isOpen ? overlay : null }) });
+});
+Modal.displayName = "HeroUI.Modal";
+var modal_default = Modal;

package/dist/modal.mjs

@@ -0,0 +1,9 @@
+"use client";
+import {
+  modal_default
+} from "./chunk-NQV4LXOC.mjs";
+import "./chunk-PN5RGUFB.mjs";
+import "./chunk-ULX4JIBE.mjs";
+export {
+  modal_default as default
+};

package/dist/use-modal.d.mts

@@ -0,0 +1,227 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as tailwind_variants from 'tailwind-variants';
+import * as _sytechui_system from '@sytechui/system';
+import { HTMLHeroUIProps, PropGetter } from '@sytechui/system';
+import { SlotsToClasses, ModalSlots, ModalVariantProps } from '@sytechui/theme';
+import { HTMLMotionProps } from 'framer-motion';
+import { AriaModalOverlayProps } from '@react-aria/overlays';
+import { ReactRef } from '@sytechui/react-utils';
+import { OverlayTriggerProps } from '@react-stately/overlays';
+
+interface Props extends HTMLHeroUIProps<"section"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    /**
+     * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
+     */
+    motionProps?: Omit<HTMLMotionProps<"section">, "ref">;
+    /**
+     * Determines whether to hide the modal close button.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Custom modal close button element.
+     */
+    closeButton?: ReactNode;
+    /**
+     * Whether the animation should be disabled.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * The container element in which the overlay portal will be placed.
+     * @default document.body
+     */
+    portalContainer?: Element;
+    /**
+     * Whether the scroll should be blocked when the modal is open.
+     * @default true
+     */
+    shouldBlockScroll?: boolean;
+    /**
+     *  Callback fired when the modal is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Modal classNames={{
+     *    wrapper: "wrapper-classes", // main modal wrapper
+     *    backdrop: "backdrop-classes",
+     *    base:"base-classes", // modal content wrapper
+     *    header: "header-classes", // modal header
+     *    body: "body-classes", // modal body
+     *    footer: "footer-classes", // modal footer
+     *    closeButton: "close-button-classes", // modal close button
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<ModalSlots>;
+    /**
+     * Whether to close the overlay when the user interacts outside it.
+     * @default true
+     */
+    isDismissable?: boolean;
+}
+type UseModalProps = Props & OverlayTriggerProps & Omit<AriaModalOverlayProps, "isDismissable"> & ModalVariantProps;
+declare function useModal(originalProps: UseModalProps): {
+    Component: _sytechui_system.As<any>;
+    slots: {
+        wrapper: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        base: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        backdrop: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        header: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        body: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        footer: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        closeButton: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        wrapper: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        base: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        backdrop: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        header: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        body: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        footer: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        closeButton: (slotProps?: ({
+            size?: "md" | "lg" | "sm" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | undefined;
+            backdrop?: "opaque" | "blur" | "transparent" | undefined;
+            radius?: "md" | "lg" | "sm" | "none" | undefined;
+            shadow?: "md" | "lg" | "sm" | "none" | undefined;
+            placement?: "center" | "auto" | "top" | "top-center" | "bottom" | "bottom-center" | undefined;
+            scrollBehavior?: "normal" | "inside" | "outside" | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    domRef: react.RefObject<HTMLElement>;
+    headerId: string;
+    bodyId: string;
+    motionProps: Omit<HTMLMotionProps<"section">, "ref"> | undefined;
+    classNames: SlotsToClasses<"base" | "body" | "footer" | "header" | "backdrop" | "wrapper" | "closeButton"> | undefined;
+    isDismissable: boolean;
+    closeButton: ReactNode;
+    hideCloseButton: boolean;
+    portalContainer: Element | undefined;
+    shouldBlockScroll: boolean;
+    backdrop: "opaque" | "blur" | "transparent";
+    isOpen: boolean;
+    onClose: () => void;
+    disableAnimation: boolean;
+    setBodyMounted: react.Dispatch<react.SetStateAction<boolean>>;
+    setHeaderMounted: react.Dispatch<react.SetStateAction<boolean>>;
+    getDialogProps: PropGetter;
+    getBackdropProps: PropGetter;
+    getCloseButtonProps: PropGetter;
+};
+type UseModalReturn = ReturnType<typeof useModal>;
+
+export { type UseModalProps, type UseModalReturn, useModal };