@yamada-ui/react 2.2.6-dev-20260730065117 → 2.2.6-dev-20260730073118

package/dist/cjs/components/modal/modal.cjs

@@ -2,6 +2,7 @@
 const require_children = require("../../utils/children.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_factory = require("../../core/system/factory.cjs");
+const require_props = require("../../core/components/props.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_factory$1 = require("../motion/factory.cjs");
 const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
@@ -24,7 +25,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
 *
 * @see https://yamada-ui.com/docs/components/modal
 */
-const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
+const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, bodyProps, closeButtonProps, closeTriggerProps, contentProps, footerProps, headerProps, openTriggerProps, overlayProps, portalProps, titleProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
 	const [omittedChildren, openTrigger, customOverlay] = require_children.useSplitChildren(children, ModalOpenTrigger, ModalOverlay);
 	const hasChildren = (0, require_utils_index.utils_exports.isArray)(omittedChildren) && !!omittedChildren.length;
 	const { open, getRootProps, ...rest } = require_use_modal.useModal(props);
@@ -34,12 +35,30 @@ const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "sca
 		duration,
 		open,
 		withCloseButton,
+		bodyProps,
+		closeButtonProps,
+		closeTriggerProps,
+		contentProps,
+		footerProps,
+		headerProps,
+		openTriggerProps,
+		overlayProps,
+		titleProps,
 		...rest
 	}), [
 		animationScheme,
 		duration,
 		open,
 		withCloseButton,
+		contentProps,
+		bodyProps,
+		footerProps,
+		headerProps,
+		titleProps,
+		openTriggerProps,
+		closeTriggerProps,
+		closeButtonProps,
+		overlayProps,
 		rest
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
@@ -83,28 +102,28 @@ const ModalOpenTrigger = withContext("button", {
 	name: "OpenTrigger",
 	slot: ["trigger", "open"]
 })(void 0, (props) => {
-	const { getOpenTriggerProps } = useComponentContext();
+	const { getOpenTriggerProps, openTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getOpenTriggerProps(props)
+		...getOpenTriggerProps(require_props.mergeProps(openTriggerProps, props)())
 	};
 });
 const ModalCloseTrigger = withContext("button", {
 	name: "CloseTrigger",
 	slot: ["trigger", "close"]
 })(void 0, (props) => {
-	const { getCloseTriggerProps } = useComponentContext();
+	const { closeTriggerProps, getCloseTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getCloseTriggerProps(props)
+		...getCloseTriggerProps(require_props.mergeProps(closeTriggerProps, props)())
 	};
 });
 const ModalCloseButton = withContext(require_close_button.CloseButton, "closeButton")(void 0, (props) => {
-	const { getCloseButtonProps } = useComponentContext();
-	return { ...getCloseButtonProps(props) };
+	const { closeButtonProps, getCloseButtonProps } = useComponentContext();
+	return { ...getCloseButtonProps(require_props.mergeProps(closeButtonProps, props)()) };
 });
 const ModalOverlay = withContext((props) => {
-	const { animationScheme, duration: durationProp, getOverlayProps } = useComponentContext();
+	const { animationScheme, duration: durationProp, getOverlayProps, overlayProps } = useComponentContext();
 	const duration = require_hooks_use_value_index.useValue(durationProp);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory$1.motion.div, {
 		custom: { duration },
@@ -114,11 +133,11 @@ const ModalOverlay = withContext((props) => {
 			initial: "exit",
 			variants: require_fade.fadeVariants
 		} : {},
-		...(0, require_utils_index.utils_exports.cast)(getOverlayProps((0, require_utils_index.utils_exports.cast)(props)))
+		...(0, require_utils_index.utils_exports.cast)(getOverlayProps((0, require_utils_index.utils_exports.cast)(require_props.mergeProps(overlayProps, props)())))
 	});
 }, "overlay")();
 const ModalContent = withContext(({ children, ...rest }) => {
-	const { animationScheme, duration, withCloseButton, getContentProps } = useComponentContext();
+	const { animationScheme, duration, withCloseButton, contentProps, getContentProps } = useComponentContext();
 	const [omittedChildren, customCloseButton] = require_children.useSplitChildren(children, ModalCloseButton);
 	const popupAnimationProps = require_popover.usePopupAnimationProps({
 		animationScheme,
@@ -126,7 +145,7 @@ const ModalContent = withContext(({ children, ...rest }) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory$1.motion.section, {
 		...popupAnimationProps,
-		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(rest))),
+		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(require_props.mergeProps(contentProps, rest)()))),
 		children: [customCloseButton ?? (withCloseButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCloseButton, {}) : null), omittedChildren]
 	});
 }, "content")();
@@ -160,20 +179,20 @@ const ShorthandModalContent = ({ body, cancel, footer, header, middle, success,
 	] });
 };
 const ModalHeader = withContext("header", "header")(void 0, (props) => {
-	const { getHeaderProps } = useComponentContext();
-	return { ...getHeaderProps(props) };
+	const { getHeaderProps, headerProps } = useComponentContext();
+	return { ...getHeaderProps(require_props.mergeProps(headerProps, props)()) };
 });
 const ModalTitle = withContext("h2", "title")(void 0, (props) => {
-	const { getTitleProps } = useComponentContext();
-	return { ...getTitleProps(props) };
+	const { getTitleProps, titleProps } = useComponentContext();
+	return { ...getTitleProps(require_props.mergeProps(titleProps, props)()) };
 });
 const ModalBody = withContext("div", "body")(void 0, (props) => {
-	const { getBodyProps } = useComponentContext();
-	return { ...getBodyProps(props) };
+	const { bodyProps, getBodyProps } = useComponentContext();
+	return { ...getBodyProps(require_props.mergeProps(bodyProps, props)()) };
 });
 const ModalFooter = withContext("footer", "footer")(void 0, (props) => {
-	const { getFooterProps } = useComponentContext();
-	return { ...getFooterProps(props) };
+	const { footerProps, getFooterProps } = useComponentContext();
+	return { ...getFooterProps(require_props.mergeProps(footerProps, props)()) };
 });
 //#endregion
 exports.ModalBody = ModalBody;
@@ -187,7 +206,6 @@ exports.ModalOverlay = ModalOverlay;
 exports.ModalPropsContext = ModalPropsContext;
 exports.ModalRoot = ModalRoot;
 exports.ModalTitle = ModalTitle;
-exports.ShorthandModalContent = ShorthandModalContent;
 exports.useModalPropsContext = useModalPropsContext;
 
 //# sourceMappingURL=modal.cjs.map

package/dist/cjs/components/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","mergeProps","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<\n      ModalRootProps,\n      | \"bodyProps\"\n      | \"closeButtonProps\"\n      | \"closeTriggerProps\"\n      | \"contentProps\"\n      | \"footerProps\"\n      | \"headerProps\"\n      | \"openTriggerProps\"\n      | \"overlayProps\"\n      | \"titleProps\"\n      | \"withCloseButton\"\n    > {}\n\nexport interface ModalRootProps\n  extends\n    Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props for body element.\n   */\n  bodyProps?: Omit<ModalBodyProps, \"children\">\n  /**\n   * Props for close button element.\n   */\n  closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n  /**\n   * Props for close trigger element.\n   */\n  closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" | \"children\">\n  /**\n   * Props for content element.\n   */\n  contentProps?: Omit<ModalContentProps, \"children\">\n  /**\n   * Props for footer element.\n   */\n  footerProps?: Omit<ModalFooterProps, \"children\">\n  /**\n   * Props for header element.\n   */\n  headerProps?: Omit<ModalHeaderProps, \"children\">\n  /**\n   * Props for open trigger element.\n   */\n  openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" | \"children\">\n  /**\n   * Props for overlay element.\n   */\n  overlayProps?: Omit<ModalOverlayProps, \"children\">\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for title element.\n   */\n  titleProps?: Omit<ModalTitleProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    bodyProps,\n    closeButtonProps,\n    closeTriggerProps,\n    contentProps,\n    footerProps,\n    headerProps,\n    openTriggerProps,\n    overlayProps,\n    portalProps,\n    titleProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        bodyProps,\n        closeButtonProps,\n        closeTriggerProps,\n        contentProps,\n        footerProps,\n        headerProps,\n        openTriggerProps,\n        overlayProps,\n        titleProps,\n        ...rest,\n      }),\n      [\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        contentProps,\n        bodyProps,\n        footerProps,\n        headerProps,\n        titleProps,\n        openTriggerProps,\n        closeTriggerProps,\n        closeButtonProps,\n        overlayProps,\n        rest,\n      ],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n  return {\n    asChild: true,\n    ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n  }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n  return {\n    asChild: true,\n    ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n  }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { closeButtonProps, getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n    overlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(\n        getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n      )}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const {\n      animationScheme,\n      duration,\n      withCloseButton,\n      contentProps,\n      getContentProps,\n    } = useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(\n            cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n          ),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps, headerProps } = useComponentContext()\n\n  return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps, titleProps } = useComponentContext()\n\n    return { ...getTitleProps(mergeProps(titleProps, props)()) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { bodyProps, getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { footerProps, getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":"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"}

package/dist/esm/components/modal/modal.js

@@ -2,6 +2,7 @@
 import { useSplitChildren, wrapOrPassProps } from "../../utils/children.js";
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { motion as motion$1 } from "../motion/factory.js";
 import { useValue } from "../../hooks/use-value/index.js";
@@ -24,7 +25,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
 *
 * @see https://yamada-ui.com/docs/components/modal
 */
-const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
+const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, bodyProps, closeButtonProps, closeTriggerProps, contentProps, footerProps, headerProps, openTriggerProps, overlayProps, portalProps, titleProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
 	const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(children, ModalOpenTrigger, ModalOverlay);
 	const hasChildren = (0, utils_exports.isArray)(omittedChildren) && !!omittedChildren.length;
 	const { open, getRootProps, ...rest } = useModal(props);
@@ -34,12 +35,30 @@ const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "sca
 		duration,
 		open,
 		withCloseButton,
+		bodyProps,
+		closeButtonProps,
+		closeTriggerProps,
+		contentProps,
+		footerProps,
+		headerProps,
+		openTriggerProps,
+		overlayProps,
+		titleProps,
 		...rest
 	}), [
 		animationScheme,
 		duration,
 		open,
 		withCloseButton,
+		contentProps,
+		bodyProps,
+		footerProps,
+		headerProps,
+		titleProps,
+		openTriggerProps,
+		closeTriggerProps,
+		closeButtonProps,
+		overlayProps,
 		rest
 	]);
 	return /* @__PURE__ */ jsxs(ComponentContext, {
@@ -83,28 +102,28 @@ const ModalOpenTrigger = withContext("button", {
 	name: "OpenTrigger",
 	slot: ["trigger", "open"]
 })(void 0, (props) => {
-	const { getOpenTriggerProps } = useComponentContext();
+	const { getOpenTriggerProps, openTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getOpenTriggerProps(props)
+		...getOpenTriggerProps(mergeProps(openTriggerProps, props)())
 	};
 });
 const ModalCloseTrigger = withContext("button", {
 	name: "CloseTrigger",
 	slot: ["trigger", "close"]
 })(void 0, (props) => {
-	const { getCloseTriggerProps } = useComponentContext();
+	const { closeTriggerProps, getCloseTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getCloseTriggerProps(props)
+		...getCloseTriggerProps(mergeProps(closeTriggerProps, props)())
 	};
 });
 const ModalCloseButton = withContext(CloseButton, "closeButton")(void 0, (props) => {
-	const { getCloseButtonProps } = useComponentContext();
-	return { ...getCloseButtonProps(props) };
+	const { closeButtonProps, getCloseButtonProps } = useComponentContext();
+	return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) };
 });
 const ModalOverlay = withContext((props) => {
-	const { animationScheme, duration: durationProp, getOverlayProps } = useComponentContext();
+	const { animationScheme, duration: durationProp, getOverlayProps, overlayProps } = useComponentContext();
 	const duration = useValue(durationProp);
 	return /* @__PURE__ */ jsx(motion$1.div, {
 		custom: { duration },
@@ -114,11 +133,11 @@ const ModalOverlay = withContext((props) => {
 			initial: "exit",
 			variants: fadeVariants
 		} : {},
-		...(0, utils_exports.cast)(getOverlayProps((0, utils_exports.cast)(props)))
+		...(0, utils_exports.cast)(getOverlayProps((0, utils_exports.cast)(mergeProps(overlayProps, props)())))
 	});
 }, "overlay")();
 const ModalContent = withContext(({ children, ...rest }) => {
-	const { animationScheme, duration, withCloseButton, getContentProps } = useComponentContext();
+	const { animationScheme, duration, withCloseButton, contentProps, getContentProps } = useComponentContext();
 	const [omittedChildren, customCloseButton] = useSplitChildren(children, ModalCloseButton);
 	const popupAnimationProps = usePopupAnimationProps({
 		animationScheme,
@@ -126,7 +145,7 @@ const ModalContent = withContext(({ children, ...rest }) => {
 	});
 	return /* @__PURE__ */ jsxs(motion$1.section, {
 		...popupAnimationProps,
-		...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(rest))),
+		...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(mergeProps(contentProps, rest)()))),
 		children: [customCloseButton ?? (withCloseButton ? /* @__PURE__ */ jsx(ModalCloseButton, {}) : null), omittedChildren]
 	});
 }, "content")();
@@ -160,22 +179,22 @@ const ShorthandModalContent = ({ body, cancel, footer, header, middle, success,
 	] });
 };
 const ModalHeader = withContext("header", "header")(void 0, (props) => {
-	const { getHeaderProps } = useComponentContext();
-	return { ...getHeaderProps(props) };
+	const { getHeaderProps, headerProps } = useComponentContext();
+	return { ...getHeaderProps(mergeProps(headerProps, props)()) };
 });
 const ModalTitle = withContext("h2", "title")(void 0, (props) => {
-	const { getTitleProps } = useComponentContext();
-	return { ...getTitleProps(props) };
+	const { getTitleProps, titleProps } = useComponentContext();
+	return { ...getTitleProps(mergeProps(titleProps, props)()) };
 });
 const ModalBody = withContext("div", "body")(void 0, (props) => {
-	const { getBodyProps } = useComponentContext();
-	return { ...getBodyProps(props) };
+	const { bodyProps, getBodyProps } = useComponentContext();
+	return { ...getBodyProps(mergeProps(bodyProps, props)()) };
 });
 const ModalFooter = withContext("footer", "footer")(void 0, (props) => {
-	const { getFooterProps } = useComponentContext();
-	return { ...getFooterProps(props) };
+	const { footerProps, getFooterProps } = useComponentContext();
+	return { ...getFooterProps(mergeProps(footerProps, props)()) };
 });
 //#endregion
-export { ModalBody, ModalCloseButton, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalOpenTrigger, ModalOverlay, ModalPropsContext, ModalRoot, ModalTitle, ShorthandModalContent, useModalPropsContext };
+export { ModalBody, ModalCloseButton, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalOpenTrigger, ModalOverlay, ModalPropsContext, ModalRoot, ModalTitle, useModalPropsContext };
 
 //# sourceMappingURL=modal.js.map

package/dist/esm/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<\n      ModalRootProps,\n      | \"bodyProps\"\n      | \"closeButtonProps\"\n      | \"closeTriggerProps\"\n      | \"contentProps\"\n      | \"footerProps\"\n      | \"headerProps\"\n      | \"openTriggerProps\"\n      | \"overlayProps\"\n      | \"titleProps\"\n      | \"withCloseButton\"\n    > {}\n\nexport interface ModalRootProps\n  extends\n    Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props for body element.\n   */\n  bodyProps?: Omit<ModalBodyProps, \"children\">\n  /**\n   * Props for close button element.\n   */\n  closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n  /**\n   * Props for close trigger element.\n   */\n  closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" | \"children\">\n  /**\n   * Props for content element.\n   */\n  contentProps?: Omit<ModalContentProps, \"children\">\n  /**\n   * Props for footer element.\n   */\n  footerProps?: Omit<ModalFooterProps, \"children\">\n  /**\n   * Props for header element.\n   */\n  headerProps?: Omit<ModalHeaderProps, \"children\">\n  /**\n   * Props for open trigger element.\n   */\n  openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" | \"children\">\n  /**\n   * Props for overlay element.\n   */\n  overlayProps?: Omit<ModalOverlayProps, \"children\">\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for title element.\n   */\n  titleProps?: Omit<ModalTitleProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    bodyProps,\n    closeButtonProps,\n    closeTriggerProps,\n    contentProps,\n    footerProps,\n    headerProps,\n    openTriggerProps,\n    overlayProps,\n    portalProps,\n    titleProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        bodyProps,\n        closeButtonProps,\n        closeTriggerProps,\n        contentProps,\n        footerProps,\n        headerProps,\n        openTriggerProps,\n        overlayProps,\n        titleProps,\n        ...rest,\n      }),\n      [\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        contentProps,\n        bodyProps,\n        footerProps,\n        headerProps,\n        titleProps,\n        openTriggerProps,\n        closeTriggerProps,\n        closeButtonProps,\n        overlayProps,\n        rest,\n      ],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n  return {\n    asChild: true,\n    ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n  }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n  return {\n    asChild: true,\n    ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n  }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { closeButtonProps, getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n    overlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(\n        getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n      )}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const {\n      animationScheme,\n      duration,\n      withCloseButton,\n      contentProps,\n      getContentProps,\n    } = useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(\n            cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n          ),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps, headerProps } = useComponentContext()\n\n  return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps, titleProps } = useComponentContext()\n\n    return { ...getTitleProps(mergeProps(titleProps, props)()) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { bodyProps, getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { footerProps, getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuIA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACE,oBACF,SACA,UACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,iBAAiB,OACjB,kBAAkB,SAClB,WACA,qBAAqB,MACrB,MACA,QACA,UACA,UACA,eACA,QACA,QACA,iBACA,wBAAwB,MACxB,QACA,cACA,SACA,OACA,SACA,kBAAkB,MAClB,cAAc,MACd,WACA,kBACA,mBACA,cACA,aACA,aACA,kBACA,cACA,aACA,YACA,UACA,iBACA,UACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,iBAAiB,aAAa,iBAAiB,iBACpD,UACA,kBACA,YACF;CACA,MAAM,eAAA,GAAA,cAAA,QAAA,CAAsB,eAAe,KAAK,CAAC,CAAC,gBAAgB;CAClE,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,SAAS,KAAK;CACtD,MAAM,oBAAoB,UACxB,oBAAC,kBAAD,EAAA,UAAmB,QAA0B,CAAA,IAC3C;CACJ,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,kBAAD;EAAkB,OAAO;EAAzB,UAAA,CACG,eAAe,mBAEhB,oBAAC,iBAAD;GAAiB,gBAAgB;GAC9B,UAAA,OACC,oBAAC,QAAD;IAAQ,GAAI;IACV,UAAA,oBAAC,WAAD;KACa;KACI;KACE;KACM;KACT;KAEd,UAAA,oBAAC,cAAD;MACkB;MAChB,SAAS;MACT,cAAA;MAEA,UAAA,qBAAC,OAAO,KAAR;OAAY,GAAI,aAAa;OAA7B,UAAA,CACG,kBAAkB,cAAc,oBAAC,cAAD,CAAe,CAAA,IAAI,OAEnD,cACC,kBAEA,oBAAC,uBAAD;QACQ;QACE;QACA;QACA;QACA;QACC;QACF;QACG;QACA;QACC;OACZ,CAAA,CAEO;;KACA,CAAA;IACL,CAAA;GACL,CAAA,IACN;EACW,CAAA,CACD;;AAEtB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,mBAAmB,YAC9B,UACA;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,MAAM;AAAE,CACnD,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,qBAAqB,qBAAqB,oBAAoB;CAEtE,OAAO;EACL,SAAS;EACT,GAAG,oBAAoB,WAAW,kBAAkB,KAAK,CAAC,CAAC,CAAC;CAC9D;AACF,CAAC;AAID,MAAa,oBAAoB,YAC/B,UACA;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,OAAO;AAAE,CACrD,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,yBAAyB,oBAAoB;CAExE,OAAO;EACL,SAAS;EACT,GAAG,qBAAqB,WAAW,mBAAmB,KAAK,CAAC,CAAC,CAAC;CAChE;AACF,CAAC;AAID,MAAa,mBAAmB,YAC9B,aACA,aACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,kBAAkB,wBAAwB,oBAAoB;CAEtE,OAAO,EAAE,GAAG,oBAAoB,WAAW,kBAAkB,KAAK,CAAC,CAAC,CAAC,EAAE;AACzE,CAAC;AAID,MAAa,eAAe,aAAuC,UAAU;CAC3E,MAAM,EACJ,iBACA,UAAU,cACV,iBACA,iBACE,oBAAoB;CACxB,MAAM,WAAW,SAAS,YAAY;CAEtC,OACE,oBAACA,SAAO,KAAR;EACE,QAAQ,EAAE,SAAS;EACnB,GAAK,oBAAoB,SACrB;GACE,SAAS;GACT,MAAM;GACN,SAAS;GACT,UAAU;EACZ,IACA,CAAC;EACL,IAAA,GAAA,cAAA,KAAA,CACE,iBAAA,GAAA,cAAA,KAAA,CAAgC,WAAW,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,CACpE;CACD,CAAA;AAEL,GAAG,SAAS,CAAC,CAAC;AAKd,MAAa,eAAe,aACzB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EACJ,iBACA,UACA,iBACA,cACA,oBACE,oBAAoB;CACxB,MAAM,CAAC,iBAAiB,qBAAqB,iBAC3C,UACA,gBACF;CACA,MAAM,sBAAsB,uBAAuB;EACjD;EACA;CACF,CAAC;CAED,OACE,qBAACA,SAAO,SAAR;EACE,GAAI;EACJ,IAAA,GAAA,cAAA,KAAA,CACE,iBAAA,GAAA,cAAA,KAAA,CAC6B,WAAW,cAAc,IAAI,CAAC,CAAC,CAAC,CAC7D,CACF;EANF,UAAA,CAQG,sBAAsB,kBAAkB,oBAAC,kBAAD,CAAmB,CAAA,IAAI,OAE/D,eACa;;AAEpB,GACA,SACF,CAAC,CAAC;AA6CF,MAAM,yBAAyD,EAC7D,MACA,QACA,QACA,QACA,QACA,SACA,OACA,UACA,UACA,gBACI;CACJ,MAAM,EAAE,YAAY,oBAAoB;CACxC,MAAM,eAAe,gBAAgB,aAAa,MAAM;CACxD,MAAM,cAAc,gBAAgB,YAAY,KAAK;CACrD,MAAM,aAAa,gBAAgB,WAAW,IAAI;CAClD,MAAM,eAAe,gBAAgB,aAAa,MAAM;CACxD,MAAM,eAAe,gBAAgB,QAAQ,QAAQ;EACnD,aAAa;EACb,SAAS;EACT,eAAgB,WAAW,SAAS,OAAO,IAAI,QAAQ;CACzD,CAAC;CACD,MAAM,eAAe,gBAAgB,QAAQ,QAAQ;EACnD,aAAa;EACb,eAAgB,WAAW,SAAS,OAAO,IAAI,QAAQ;CACzD,CAAC;CACD,MAAM,gBAAgB,gBAAgB,QAAQ,SAAS;EACrD,aAAa;EACb,eAAgB,YAAY,UAAU,OAAO,IAAI,QAAQ;CAC3D,CAAC;CAED,OACE,qBAAC,cAAD,EAAA,UAAA;EACG,iBACE,cAAc,oBAAC,aAAD,EAAA,UAAc,YAAyB,CAAA,IAAI;EAC3D;EACA,iBACE,gBAAgB,gBAAgB,gBAC/B,qBAAC,aAAD,EAAA,UAAA;GACG;GACA;GACA;EACU,EAAA,CAAA,IACX;CACM,EAAA,CAAA;AAElB;AAIA,MAAa,cAAc,YACzB,UACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,gBAAgB,gBAAgB,oBAAoB;CAE5D,OAAO,EAAE,GAAG,eAAe,WAAW,aAAa,KAAK,CAAC,CAAC,CAAC,EAAE;AAC/D,CAAC;AAID,MAAa,aAAa,YAAmC,MAAM,OAAO,CAAC,CACzE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,eAAe,eAAe,oBAAoB;CAE1D,OAAO,EAAE,GAAG,cAAc,WAAW,YAAY,KAAK,CAAC,CAAC,CAAC,EAAE;AAC7D,CACF;AAIA,MAAa,YAAY,YAAmC,OAAO,MAAM,CAAC,CACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,WAAW,iBAAiB,oBAAoB;CAExD,OAAO,EAAE,GAAG,aAAa,WAAW,WAAW,KAAK,CAAC,CAAC,CAAC,EAAE;AAC3D,CACF;AAIA,MAAa,cAAc,YACzB,UACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,aAAa,mBAAmB,oBAAoB;CAE5D,OAAO,EAAE,GAAG,eAAe,WAAW,aAAa,KAAK,CAAC,CAAC,CAAC,EAAE;AAC/D,CAAC"}

package/dist/types/components/chart/cartesian-chart.style.d.ts

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/chart/cartesian-chart.style.d.ts
-declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
+declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
 type CartesianChartStyle = typeof cartesianChartStyle;
 //#endregion
 export { CartesianChartStyle, cartesianChartStyle };

package/dist/types/components/chart/polar-chart.style.d.ts

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

package/dist/types/components/modal/modal.d.ts

@@ -16,7 +16,7 @@ import "../focus-lock/index.js";
 import { ModalStyle } from "./modal.style.js";
 import { UseModalProps } from "./use-modal.js";
 import "../../index.js";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 //#region src/components/modal/modal.d.ts
 interface ModalRootProps extends Omit<HTMLStyledProps<"div">, "scrollBehavior" | "title">, ThemeProps<ModalStyle>, Omit<UseModalProps, "title">, Pick<FocusLockProps, "autoFocus" | "finalFocusRef" | "initialFocusRef" | "lockFocusAcrossFrames" | "restoreFocus">, UsePopupAnimationProps, ShorthandModalContentProps {
   /**
@@ -47,10 +47,46 @@ interface ModalRootProps extends Omit<HTMLStyledProps<"div">, "scrollBehavior" |
    * @default true
    */
   withOverlay?: boolean;
+  /**
+   * Props for body element.
+   */
+  bodyProps?: Omit<ModalBodyProps, "children">;
+  /**
+   * Props for close button element.
+   */
+  closeButtonProps?: Omit<ModalCloseButtonProps, "children">;
+  /**
+   * Props for close trigger element.
+   */
+  closeTriggerProps?: Omit<ModalCloseTriggerProps, "asChild" | "children">;
+  /**
+   * Props for content element.
+   */
+  contentProps?: Omit<ModalContentProps, "children">;
+  /**
+   * Props for footer element.
+   */
+  footerProps?: Omit<ModalFooterProps, "children">;
+  /**
+   * Props for header element.
+   */
+  headerProps?: Omit<ModalHeaderProps, "children">;
+  /**
+   * Props for open trigger element.
+   */
+  openTriggerProps?: Omit<ModalOpenTriggerProps, "asChild" | "children">;
+  /**
+   * Props for overlay element.
+   */
+  overlayProps?: Omit<ModalOverlayProps, "children">;
   /**
    * Props to be forwarded to the portal component.
    */
   portalProps?: Omit<PortalProps, "children">;
+  /**
+   * Props for title element.
+   */
+  titleProps?: Omit<ModalTitleProps, "children">;
   /**
    * Callback function to run side effects after the modal has closed.
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.2.6-dev-20260730065117",
+  "version": "2.2.6-dev-20260730073118",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",
@@ -147,7 +147,7 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "sonner": "^2.0.7",
     "uqr": "^0.1.3",
-    "@yamada-ui/utils": "2.1.6-dev-20260730065117"
+    "@yamada-ui/utils": "2.1.6-dev-20260730073118"
   },
   "devDependencies": {
     "@babel/parser": "^7.29.7",