@sytechui/modal 2.2.29

package/dist/use-modal.d.ts

@@ -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 };

package/dist/use-modal.js

@@ -0,0 +1,156 @@
+"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/use-modal.ts
+var use_modal_exports = {};
+__export(use_modal_exports, {
+  useModal: () => useModal
+});
+module.exports = __toCommonJS(use_modal_exports);
+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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useModal
+});

package/dist/use-modal.mjs

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

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@sytechui/modal",
+  "version": "2.2.29",
+  "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
+  "keywords": [
+    "modal"
+  ],
+  "author": "HeroUI <support@heroui.com>",
+  "homepage": "https://heroui.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heroui-inc/heroui.git",
+    "directory": "packages/components/modal"
+  },
+  "bugs": {
+    "url": "https://github.com/heroui-inc/heroui/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@sytechui/theme": ">=2.4.24",
+    "@sytechui/system": ">=2.4.18"
+  },
+  "dependencies": {
+    "@react-aria/dialog": "3.5.34",
+    "@react-aria/focus": "3.21.5",
+    "@react-aria/overlays": "3.31.2",
+    "@react-stately/overlays": "3.6.23",
+    "@sytechui/use-disclosure": "2.2.19",
+    "@sytechui/use-draggable": "2.1.20",
+    "@sytechui/use-aria-button": "2.2.22",
+    "@sytechui/use-viewport-size": "2.0.1",
+    "@sytechui/framer-utils": "2.1.28",
+    "@sytechui/shared-utils": "2.1.12",
+    "@sytechui/react-utils": "2.1.14",
+    "@sytechui/shared-icons": "2.1.10",
+    "@sytechui/use-aria-modal-overlay": "2.2.21",
+    "@sytechui/dom-animation": "2.1.10"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}