@sytechui/modal 2.2.29

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Next UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @sytechui/modal
+
+Displays a dialog with a custom content that requires attention or provides additional information.
+
+Please refer to the [documentation](https://heroui.com/docs/components/modal) for more information.
+
+## Installation
+
+```sh
+yarn add @sytechui/modal
+# or
+npm i @sytechui/modal
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/chunk-6UNMARUO.mjs

@@ -0,0 +1,112 @@
+"use client";
+import {
+  scaleInOut
+} from "./chunk-S6FNYUYS.mjs";
+import {
+  useModalContext
+} from "./chunk-ULX4JIBE.mjs";
+
+// src/modal-content.tsx
+import { cloneElement, isValidElement, useMemo, useCallback } from "react";
+import { DismissButton } from "@react-aria/overlays";
+import { TRANSITION_VARIANTS } from "@sytechui/framer-utils";
+import { CloseIcon } from "@sytechui/shared-icons";
+import { LazyMotion, m } from "framer-motion";
+import { useDialog } from "@react-aria/dialog";
+import { chain, mergeProps } from "@sytechui/shared-utils";
+import { useViewportSize } from "@sytechui/use-viewport-size";
+import { jsx, jsxs } from "react/jsx-runtime";
+var domAnimation = () => import("@sytechui/dom-animation").then((res) => res.default);
+var ModalContent = (props) => {
+  const { as, children, role = "dialog", ...otherProps } = props;
+  const {
+    Component: DialogComponent,
+    domRef,
+    slots,
+    classNames,
+    motionProps,
+    backdrop,
+    closeButton,
+    hideCloseButton,
+    disableAnimation,
+    getDialogProps,
+    getBackdropProps,
+    getCloseButtonProps,
+    onClose
+  } = useModalContext();
+  const Component = as || DialogComponent || "div";
+  const viewport = useViewportSize();
+  const { dialogProps } = useDialog(
+    {
+      role
+    },
+    domRef
+  );
+  const closeButtonContent = isValidElement(closeButton) ? cloneElement(closeButton, getCloseButtonProps()) : /* @__PURE__ */ jsx("button", { ...getCloseButtonProps(), children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+  const onKeyDown = useCallback((e) => {
+    if (e.key === "Tab" && e.nativeEvent.isComposing) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, []);
+  const contentProps = getDialogProps(mergeProps(dialogProps, otherProps));
+  const content = /* @__PURE__ */ jsxs(Component, { ...contentProps, onKeyDown: chain(contentProps.onKeyDown, onKeyDown), children: [
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: onClose }),
+    !hideCloseButton && closeButtonContent,
+    typeof children === "function" ? children(onClose) : children,
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: onClose })
+  ] });
+  const backdropContent = useMemo(() => {
+    if (backdrop === "transparent") {
+      return null;
+    }
+    if (disableAnimation) {
+      return /* @__PURE__ */ jsx("div", { ...getBackdropProps() });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
+      m.div,
+      {
+        animate: "enter",
+        exit: "exit",
+        initial: "exit",
+        variants: TRANSITION_VARIANTS.fade,
+        ...getBackdropProps()
+      }
+    ) });
+  }, [backdrop, disableAnimation, getBackdropProps]);
+  const viewportStyle = {
+    "--visual-viewport-height": viewport.height + "px"
+  };
+  const contents = disableAnimation ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+      "data-slot": "wrapper",
+      style: viewportStyle,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
+    m.div,
+    {
+      animate: "enter",
+      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+      "data-slot": "wrapper",
+      exit: "exit",
+      initial: "exit",
+      variants: scaleInOut,
+      ...motionProps,
+      style: viewportStyle,
+      children: content
+    }
+  ) });
+  return /* @__PURE__ */ jsxs("div", { tabIndex: -1, children: [
+    backdropContent,
+    contents
+  ] });
+};
+ModalContent.displayName = "HeroUI.ModalContent";
+var modal_content_default = ModalContent;
+
+export {
+  modal_content_default
+};

package/dist/chunk-IYHOL6KG.mjs

@@ -0,0 +1,37 @@
+"use client";
+import {
+  useModalContext
+} from "./chunk-ULX4JIBE.mjs";
+
+// src/modal-body.tsx
+import { useEffect } from "react";
+import { forwardRef } from "@sytechui/system";
+import { useDOMRef } from "@sytechui/react-utils";
+import { cn } from "@sytechui/theme";
+import { jsx } from "react/jsx-runtime";
+var ModalBody = forwardRef((props, ref) => {
+  const { as, children, className, ...otherProps } = props;
+  const { slots, classNames, bodyId, setBodyMounted } = useModalContext();
+  const domRef = useDOMRef(ref);
+  const Component = as || "div";
+  useEffect(() => {
+    setBodyMounted(true);
+    return () => setBodyMounted(false);
+  }, [setBodyMounted]);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: domRef,
+      className: slots.body({ class: cn(classNames == null ? void 0 : classNames.body, className) }),
+      id: bodyId,
+      ...otherProps,
+      children
+    }
+  );
+});
+ModalBody.displayName = "HeroUI.ModalBody";
+var modal_body_default = ModalBody;
+
+export {
+  modal_body_default
+};

package/dist/chunk-MZ2TEFDD.mjs

@@ -0,0 +1,37 @@
+"use client";
+import {
+  useModalContext
+} from "./chunk-ULX4JIBE.mjs";
+
+// src/modal-header.tsx
+import { useEffect } from "react";
+import { forwardRef } from "@sytechui/system";
+import { useDOMRef } from "@sytechui/react-utils";
+import { cn } from "@sytechui/theme";
+import { jsx } from "react/jsx-runtime";
+var ModalHeader = forwardRef((props, ref) => {
+  const { as, children, className, ...otherProps } = props;
+  const { slots, classNames, headerId, setHeaderMounted } = useModalContext();
+  const domRef = useDOMRef(ref);
+  const Component = as || "header";
+  useEffect(() => {
+    setHeaderMounted(true);
+    return () => setHeaderMounted(false);
+  }, [setHeaderMounted]);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: domRef,
+      className: slots.header({ class: cn(classNames == null ? void 0 : classNames.header, className) }),
+      id: headerId,
+      ...otherProps,
+      children
+    }
+  );
+});
+ModalHeader.displayName = "HeroUI.ModalHeader";
+var modal_header_default = ModalHeader;
+
+export {
+  modal_header_default
+};

package/dist/chunk-NQ34YL6U.mjs

@@ -0,0 +1,31 @@
+"use client";
+import {
+  useModalContext
+} from "./chunk-ULX4JIBE.mjs";
+
+// src/modal-footer.tsx
+import { forwardRef } from "@sytechui/system";
+import { useDOMRef } from "@sytechui/react-utils";
+import { cn } from "@sytechui/theme";
+import { jsx } from "react/jsx-runtime";
+var ModalFooter = forwardRef((props, ref) => {
+  const { as, children, className, ...otherProps } = props;
+  const { slots, classNames } = useModalContext();
+  const domRef = useDOMRef(ref);
+  const Component = as || "footer";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: domRef,
+      className: slots.footer({ class: cn(classNames == null ? void 0 : classNames.footer, className) }),
+      ...otherProps,
+      children
+    }
+  );
+});
+ModalFooter.displayName = "HeroUI.ModalFooter";
+var modal_footer_default = ModalFooter;
+
+export {
+  modal_footer_default
+};

package/dist/chunk-NQV4LXOC.mjs

@@ -0,0 +1,25 @@
+"use client";
+import {
+  useModal
+} from "./chunk-PN5RGUFB.mjs";
+import {
+  ModalProvider
+} from "./chunk-ULX4JIBE.mjs";
+
+// src/modal.tsx
+import { AnimatePresence } from "framer-motion";
+import { Overlay } from "@react-aria/overlays";
+import { forwardRef } from "@sytechui/system";
+import { jsx } from "react/jsx-runtime";
+var Modal = forwardRef((props, ref) => {
+  const { children, ...otherProps } = props;
+  const context = useModal({ ...otherProps, ref });
+  const overlay = /* @__PURE__ */ jsx(Overlay, { portalContainer: context.portalContainer, children });
+  return /* @__PURE__ */ jsx(ModalProvider, { value: context, children: context.disableAnimation && context.isOpen ? overlay : /* @__PURE__ */ jsx(AnimatePresence, { children: context.isOpen ? overlay : null }) });
+});
+Modal.displayName = "HeroUI.Modal";
+var modal_default = Modal;
+
+export {
+  modal_default
+};

package/dist/chunk-PN5RGUFB.mjs

@@ -0,0 +1,133 @@
+"use client";
+
+// src/use-modal.ts
+import { useAriaModalOverlay } from "@sytechui/use-aria-modal-overlay";
+import { useCallback, useId, useRef, useState, useMemo } from "react";
+import { modal, cn } from "@sytechui/theme";
+import { mapPropsVariants, useProviderContext } from "@sytechui/system";
+import { useAriaButton } from "@sytechui/use-aria-button";
+import { useFocusRing } from "@react-aria/focus";
+import { dataAttr, objectToDeps, mergeRefs, mergeProps } from "@sytechui/shared-utils";
+import { useDOMRef } from "@sytechui/react-utils";
+import { useOverlayTriggerState } from "@react-stately/overlays";
+function useModal(originalProps) {
+  var _a, _b, _c;
+  const globalContext = useProviderContext();
+  const [props, variantProps] = mapPropsVariants(originalProps, 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 = useDOMRef(ref);
+  const closeButtonRef = useRef(null);
+  const [headerMounted, setHeaderMounted] = useState(false);
+  const [bodyMounted, setBodyMounted] = useState(false);
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const dialogId = useId();
+  const headerId = useId();
+  const bodyId = useId();
+  const state = useOverlayTriggerState({
+    isOpen,
+    defaultOpen,
+    onOpenChange: (isOpen2) => {
+      onOpenChange == null ? void 0 : onOpenChange(isOpen2);
+      if (!isOpen2) {
+        onClose == null ? void 0 : onClose();
+      }
+    }
+  });
+  const { modalProps, underlayProps } = useAriaModalOverlay(
+    {
+      isDismissable,
+      shouldBlockScroll,
+      isKeyboardDismissDisabled
+    },
+    state,
+    domRef
+  );
+  const { buttonProps: closeButtonProps } = useAriaButton({ onPress: state.close }, closeButtonRef);
+  const { isFocusVisible: isCloseButtonFocusVisible, focusProps: closeButtonFocusProps } = useFocusRing();
+  const baseStyles = cn(classNames == null ? void 0 : classNames.base, className);
+  const slots = useMemo(
+    () => modal({
+      ...variantProps,
+      disableAnimation
+    }),
+    [objectToDeps(variantProps), disableAnimation]
+  );
+  const getDialogProps = (props2 = {}, ref2 = null) => {
+    var _a2;
+    return {
+      ref: mergeRefs(ref2, domRef),
+      ...mergeProps(modalProps, otherProps, props2),
+      className: slots.base({ class: cn(baseStyles, props2.className) }),
+      id: dialogId,
+      "data-open": dataAttr(state.isOpen),
+      "data-dismissable": dataAttr(isDismissable),
+      "aria-modal": 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 = 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": dataAttr(isCloseButtonFocusVisible),
+      className: slots.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
+      ...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
+  };
+}
+
+export {
+  useModal
+};

package/dist/chunk-S6FNYUYS.mjs

@@ -0,0 +1,41 @@
+"use client";
+
+// src/modal-transition.ts
+import { TRANSITION_EASINGS } from "@sytechui/framer-utils";
+var scaleInOut = {
+  enter: {
+    scale: "var(--scale-enter)",
+    y: "var(--slide-enter)",
+    opacity: 1,
+    willChange: "auto",
+    transition: {
+      scale: {
+        duration: 0.4,
+        ease: TRANSITION_EASINGS.ease
+      },
+      opacity: {
+        duration: 0.4,
+        ease: 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: TRANSITION_EASINGS.ease
+    }
+  }
+};
+
+export {
+  scaleInOut
+};

package/dist/chunk-ULX4JIBE.mjs

@@ -0,0 +1,13 @@
+"use client";
+
+// src/modal-context.ts
+import { createContext } from "@sytechui/react-utils";
+var [ModalProvider, useModalContext] = createContext({
+  name: "ModalContext",
+  errorMessage: "useModalContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Modal />`"
+});
+
+export {
+  ModalProvider,
+  useModalContext
+};

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+export { default as Modal, ModalProps } from './modal.mjs';
+export { default as ModalContent, ModalContentProps } from './modal-content.mjs';
+export { default as ModalHeader, ModalHeaderProps } from './modal-header.mjs';
+export { default as ModalBody, ModalBodyProps } from './modal-body.mjs';
+export { default as ModalFooter, ModalFooterProps } from './modal-footer.mjs';
+export { UseDisclosureProps, useDisclosure } from '@sytechui/use-disclosure';
+export { useModal } from './use-modal.mjs';
+export { useDraggable } from '@sytechui/use-draggable';
+export { ModalProvider, useModalContext } from './modal-context.mjs';
+import '@sytechui/system';
+import 'react';
+import 'react/jsx-runtime';
+import '@react-aria/dialog';
+import '@sytechui/react-utils';
+import 'tailwind-variants';
+import '@sytechui/theme';
+import 'framer-motion';
+import '@react-aria/overlays';
+import '@react-stately/overlays';

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export { default as Modal, ModalProps } from './modal.js';
+export { default as ModalContent, ModalContentProps } from './modal-content.js';
+export { default as ModalHeader, ModalHeaderProps } from './modal-header.js';
+export { default as ModalBody, ModalBodyProps } from './modal-body.js';
+export { default as ModalFooter, ModalFooterProps } from './modal-footer.js';
+export { UseDisclosureProps, useDisclosure } from '@sytechui/use-disclosure';
+export { useModal } from './use-modal.js';
+export { useDraggable } from '@sytechui/use-draggable';
+export { ModalProvider, useModalContext } from './modal-context.js';
+import '@sytechui/system';
+import 'react';
+import 'react/jsx-runtime';
+import '@react-aria/dialog';
+import '@sytechui/react-utils';
+import 'tailwind-variants';
+import '@sytechui/theme';
+import 'framer-motion';
+import '@react-aria/overlays';
+import '@react-stately/overlays';