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

package/dist/cjs/components/portal/portal.cjs

@@ -2,6 +2,7 @@
 const require_ssr = require("../../utils/ssr.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_environment_provider = require("../../core/system/environment-provider.cjs");
+const require_focus_lock = require("../focus-lock/focus-lock.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
@@ -17,14 +18,29 @@ const getPortalNode = (node) => {
 * @see https://yamada-ui.com/docs/components/portal
 */
 const Portal = ({ children, containerRef: ref, disabled }) => {
+	const shardRef = (0, react.useRef)(null);
 	const [target, setTarget] = (0, react.useState)(ref?.current);
 	const ssr = require_ssr.useSsr();
 	const { getRootNode } = require_environment_provider.useEnvironment();
+	const registerShard = require_focus_lock.useFocusLockShard();
 	(0, react.useEffect)(() => {
 		setTarget(() => ref?.current);
 	}, [ref]);
+	(0, react.useEffect)(() => {
+		const shard = shardRef.current;
+		if (disabled || ssr || !shard) return;
+		return registerShard?.(shard);
+	}, [
+		disabled,
+		registerShard,
+		ssr
+	]);
 	if (ssr || disabled) return children;
 	const container = target ?? getPortalNode(getRootNode());
+	if (registerShard) return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: shardRef,
+		children
+	}), container);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: react.Children.map(children, (child) => (0, react_dom.createPortal)(child, container)) });
 };
 //#endregion

package/dist/cjs/components/portal/portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"portal.cjs","names":["useSsr","useEnvironment","Children"],"sources":["../../../../src/components/portal/portal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport type { RootNode } from \"../../core\"\nimport { Children, useEffect, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { useEnvironment } from \"../../core\"\nimport { getDocument, isShadowRoot, useSsr } from \"../../utils\"\n\nconst getPortalNode = (node?: RootNode) => {\n  const rootNode = node?.getRootNode()\n\n  if (isShadowRoot(rootNode)) return rootNode\n\n  return getDocument(node).body\n}\n\nexport interface PortalProps extends PropsWithChildren {\n  /**\n   * The `ref` to the component where the portal will be attached to.\n   */\n  containerRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the forwarding will be disabled.\n   */\n  disabled?: boolean\n}\n\n/**\n * `Portal` is a component that renders elements outside of the current `DOM` hierarchy.\n *\n * @see https://yamada-ui.com/docs/components/portal\n */\nexport const Portal: FC<PortalProps> = ({\n  children,\n  containerRef: ref,\n  disabled,\n}) => {\n  const [target, setTarget] = useState(ref?.current)\n  const ssr = useSsr()\n  const { getRootNode } = useEnvironment()\n\n  useEffect(() => {\n    setTarget(() => ref?.current)\n  }, [ref])\n\n  if (ssr || disabled) return children\n\n  const container = target ?? getPortalNode(getRootNode())\n\n  return (\n    <>{Children.map(children, (child) => createPortal(child, container))}</>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAM,iBAAiB,SAAoB;CACzC,MAAM,WAAW,MAAM,YAAY;CAEnC,KAAA,GAAA,oBAAA,cAAA,aAAA,CAAiB,QAAQ,GAAG,OAAO;CAEnC,QAAA,GAAA,oBAAA,cAAA,YAAA,CAAmB,IAAI,CAAC,CAAC;AAC3B;;;;;;AAkBA,MAAa,UAA2B,EACtC,UACA,cAAc,KACd,eACI;CACJ,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAsB,KAAK,OAAO;CACjD,MAAM,MAAMA,YAAAA,OAAO;CACnB,MAAM,EAAE,gBAAgBC,6BAAAA,eAAe;CAEvC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,gBAAgB,KAAK,OAAO;CAC9B,GAAG,CAAC,GAAG,CAAC;CAER,IAAI,OAAO,UAAU,OAAO;CAE5B,MAAM,YAAY,UAAU,cAAc,YAAY,CAAC;CAEvD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UAAGC,MAAAA,SAAS,IAAI,WAAW,WAAA,GAAA,UAAA,aAAA,CAAuB,OAAO,SAAS,CAAC,EAAI,CAAA;AAE3E"}
+{"version":3,"file":"portal.cjs","names":["useSsr","useEnvironment","useFocusLockShard","Children"],"sources":["../../../../src/components/portal/portal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport type { RootNode } from \"../../core\"\nimport { Children, useEffect, useRef, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { useEnvironment } from \"../../core\"\nimport { getDocument, isShadowRoot, useSsr } from \"../../utils\"\nimport { useFocusLockShard } from \"../focus-lock\"\n\nconst getPortalNode = (node?: RootNode) => {\n  const rootNode = node?.getRootNode()\n\n  if (isShadowRoot(rootNode)) return rootNode\n\n  return getDocument(node).body\n}\n\nexport interface PortalProps extends PropsWithChildren {\n  /**\n   * The `ref` to the component where the portal will be attached to.\n   */\n  containerRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the forwarding will be disabled.\n   */\n  disabled?: boolean\n}\n\n/**\n * `Portal` is a component that renders elements outside of the current `DOM` hierarchy.\n *\n * @see https://yamada-ui.com/docs/components/portal\n */\nexport const Portal: FC<PortalProps> = ({\n  children,\n  containerRef: ref,\n  disabled,\n}) => {\n  const shardRef = useRef<HTMLDivElement>(null)\n  const [target, setTarget] = useState(ref?.current)\n  const ssr = useSsr()\n  const { getRootNode } = useEnvironment()\n  const registerShard = useFocusLockShard()\n\n  useEffect(() => {\n    setTarget(() => ref?.current)\n  }, [ref])\n\n  useEffect(() => {\n    const shard = shardRef.current\n\n    if (disabled || ssr || !shard) return\n\n    return registerShard?.(shard)\n  }, [disabled, registerShard, ssr])\n\n  if (ssr || disabled) return children\n\n  const container = target ?? getPortalNode(getRootNode())\n\n  if (registerShard)\n    return createPortal(<div ref={shardRef}>{children}</div>, container)\n\n  return (\n    <>{Children.map(children, (child) => createPortal(child, container))}</>\n  )\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,iBAAiB,SAAoB;CACzC,MAAM,WAAW,MAAM,YAAY;CAEnC,KAAA,GAAA,oBAAA,cAAA,aAAA,CAAiB,QAAQ,GAAG,OAAO;CAEnC,QAAA,GAAA,oBAAA,cAAA,YAAA,CAAmB,IAAI,CAAC,CAAC;AAC3B;;;;;;AAkBA,MAAa,UAA2B,EACtC,UACA,cAAc,KACd,eACI;CACJ,MAAM,YAAA,GAAA,MAAA,OAAA,CAAkC,IAAI;CAC5C,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAsB,KAAK,OAAO;CACjD,MAAM,MAAMA,YAAAA,OAAO;CACnB,MAAM,EAAE,gBAAgBC,6BAAAA,eAAe;CACvC,MAAM,gBAAgBC,mBAAAA,kBAAkB;CAExC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,gBAAgB,KAAK,OAAO;CAC9B,GAAG,CAAC,GAAG,CAAC;CAER,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,QAAQ,SAAS;EAEvB,IAAI,YAAY,OAAO,CAAC,OAAO;EAE/B,OAAO,gBAAgB,KAAK;CAC9B,GAAG;EAAC;EAAU;EAAe;CAAG,CAAC;CAEjC,IAAI,OAAO,UAAU,OAAO;CAE5B,MAAM,YAAY,UAAU,cAAc,YAAY,CAAC;CAEvD,IAAI,eACF,QAAA,GAAA,UAAA,aAAA,CAAoB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,KAAK;EAAW;CAAc,CAAA,GAAG,SAAS;CAErE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UAAGC,MAAAA,SAAS,IAAI,WAAW,WAAA,GAAA,UAAA,aAAA,CAAuB,OAAO,SAAS,CAAC,EAAI,CAAA;AAE3E"}

package/dist/cjs/index.cjs

@@ -1826,6 +1826,7 @@ const require_namespace$2 = require("./components/native-popover/namespace.cjs")
 const require_popover_style = require("./components/popover/popover.style.cjs");
 const require_fade_scale_style = require("./components/fade-scale/fade-scale.style.cjs");
 const require_fade_scale = require("./components/fade-scale/fade-scale.cjs");
+const require_focus_lock = require("./components/focus-lock/focus-lock.cjs");
 const require_portal = require("./components/portal/portal.cjs");
 const require_slide_fade_style = require("./components/slide-fade/slide-fade.style.cjs");
 const require_slide_fade = require("./components/slide-fade/slide-fade.cjs");
@@ -2043,7 +2044,6 @@ const require_namespace$31 = require("./components/data-list/namespace.cjs");
 const require_modal_style = require("./components/modal/modal.style.cjs");
 const require_fade_style = require("./components/fade/fade.style.cjs");
 const require_fade = require("./components/fade/fade.cjs");
-const require_focus_lock = require("./components/focus-lock/focus-lock.cjs");
 const require_use_modal = require("./components/modal/use-modal.cjs");
 const require_modal = require("./components/modal/modal.cjs");
 const require_namespace$32 = require("./components/modal/namespace.cjs");
@@ -5086,6 +5086,7 @@ var src_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	useFlexPropsContext: () => require_flex.useFlexPropsContext,
 	useFlipPropsContext: () => require_flip.useFlipPropsContext,
 	useFloatPropsContext: () => require_float.useFloatPropsContext,
+	useFocusLockShard: () => require_focus_lock.useFocusLockShard,
 	useFocusOnPointerDown: () => require_hooks_use_focus_index.useFocusOnPointerDown,
 	useFocusOnShow: () => require_hooks_use_focus_index.useFocusOnShow,
 	useFormContext: () => require_form.useFormContext,
@@ -8502,6 +8503,7 @@ exports.useFindChildren = require_children.useFindChildren;
 exports.useFlexPropsContext = require_flex.useFlexPropsContext;
 exports.useFlipPropsContext = require_flip.useFlipPropsContext;
 exports.useFloatPropsContext = require_float.useFloatPropsContext;
+exports.useFocusLockShard = require_focus_lock.useFocusLockShard;
 exports.useFocusOnPointerDown = require_hooks_use_focus_index.useFocusOnPointerDown;
 exports.useFocusOnShow = require_hooks_use_focus_index.useFocusOnShow;
 exports.useFormContext = require_form.useFormContext;

package/dist/esm/components/drawer/drawer.js

@@ -5,11 +5,11 @@ import { styled } from "../../core/system/factory.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";
+import { FocusLock } from "../focus-lock/focus-lock.js";
 import { Portal } from "../portal/portal.js";
 import { Button } from "../button/button.js";
 import { CloseButton } from "../close-button/close-button.js";
 import { fadeVariants } from "../fade/fade.js";
-import { FocusLock } from "../focus-lock/focus-lock.js";
 import { drawerStyle } from "./drawer.style.js";
 import { Slide } from "../slide/slide.js";
 import { useDrawer } from "./use-drawer.js";

package/dist/esm/components/focus-lock/focus-lock.js

@@ -1,9 +1,14 @@
 "use client";
+import { createContext as createContext$1 } from "../../utils/context.js";
 import { utils_exports } from "../../utils/index.js";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import ReactFocusLock from "react-focus-lock";
 //#region src/components/focus-lock/focus-lock.tsx
+const [FocusLockShardContext, useFocusLockShard] = createContext$1({
+	name: "FocusLockShardContext",
+	strict: false
+});
 const InternalFocusLock = (0, utils_exports.interopDefault)(ReactFocusLock);
 /**
 * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.
@@ -11,7 +16,14 @@ const InternalFocusLock = (0, utils_exports.interopDefault)(ReactFocusLock);
 * @see https://yamada-ui.com/docs/components/focus-lock
 */
 const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, initialFocusRef, lockFocusAcrossFrames, persistentFocus, restoreFocus }) => {
+	const [shards, setShards] = useState([]);
 	const returnFocus = restoreFocus && !finalFocusRef;
+	const registerShard = useCallback((shard) => {
+		setShards((prev) => prev.includes(shard) ? prev : [...prev, shard]);
+		return () => {
+			setShards((prev) => prev.filter((item) => item !== shard));
+		};
+	}, []);
 	const onActivation = useCallback(() => {
 		if (initialFocusRef?.current) initialFocusRef.current.focus();
 		else if (contentRef?.current) {
@@ -23,18 +35,22 @@ const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, i
 	const onDeactivation = useCallback(() => {
 		finalFocusRef?.current?.focus();
 	}, [finalFocusRef]);
-	return /* @__PURE__ */ jsx(InternalFocusLock, {
-		autoFocus,
-		crossFrame: lockFocusAcrossFrames,
-		disabled,
-		persistentFocus,
-		returnFocus,
-		onActivation,
-		onDeactivation,
-		children
+	return /* @__PURE__ */ jsx(FocusLockShardContext, {
+		value: registerShard,
+		children: /* @__PURE__ */ jsx(InternalFocusLock, {
+			autoFocus,
+			crossFrame: lockFocusAcrossFrames,
+			disabled,
+			persistentFocus,
+			returnFocus,
+			shards,
+			onActivation,
+			onDeactivation,
+			children
+		})
 	});
 };
 //#endregion
-export { FocusLock };
+export { FocusLock, useFocusLockShard };
 
 //# sourceMappingURL=focus-lock.js.map

package/dist/esm/components/focus-lock/focus-lock.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-lock.js","names":[],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport { getFocusableElements, interopDefault } from \"../../utils\"\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <InternalFocusLock\n      autoFocus={autoFocus}\n      crossFrame={lockFocusAcrossFrames}\n      disabled={disabled}\n      persistentFocus={persistentFocus}\n      returnFocus={returnFocus}\n      onActivation={onActivation}\n      onDeactivation={onDeactivation}\n    >\n      {children}\n    </InternalFocusLock>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAM,qBAAA,GAAA,cAAA,eAAA,CAAmC,cAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,eAAe,kBAAkB;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,mBAAD;EACa;EACX,YAAY;EACF;EACO;EACJ;EACC;EACE;EAEf;CACgB,CAAA;AAEvB"}
+{"version":3,"file":"focus-lock.js","names":["createContext"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport {\n  createContext,\n  getFocusableElements,\n  interopDefault,\n} from \"../../utils\"\n\nconst [FocusLockShardContext, useFocusLockShard] = createContext<\n  ((shard: HTMLElement) => () => void) | undefined\n>({ name: \"FocusLockShardContext\", strict: false })\n\nexport { useFocusLockShard }\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const [shards, setShards] = useState<HTMLElement[]>([])\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const registerShard = useCallback((shard: HTMLElement) => {\n    setShards((prev) => (prev.includes(shard) ? prev : [...prev, shard]))\n\n    return () => {\n      setShards((prev) => prev.filter((item) => item !== shard))\n    }\n  }, [])\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <FocusLockShardContext value={registerShard}>\n      <InternalFocusLock\n        autoFocus={autoFocus}\n        crossFrame={lockFocusAcrossFrames}\n        disabled={disabled}\n        persistentFocus={persistentFocus}\n        returnFocus={returnFocus}\n        shards={shards}\n        onActivation={onActivation}\n        onDeactivation={onDeactivation}\n      >\n        {children}\n      </InternalFocusLock>\n    </FocusLockShardContext>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAM,CAAC,uBAAuB,qBAAqBA,gBAEjD;CAAE,MAAM;CAAyB,QAAQ;AAAM,CAAC;AAIlD,MAAM,qBAAA,GAAA,cAAA,eAAA,CAAmC,cAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAwB,CAAC,CAAC;CACtD,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,gBAAgB,aAAa,UAAuB;EACxD,WAAW,SAAU,KAAK,SAAS,KAAK,IAAI,OAAO,CAAC,GAAG,MAAM,KAAK,CAAE;EAEpE,aAAa;GACX,WAAW,SAAS,KAAK,QAAQ,SAAS,SAAS,KAAK,CAAC;EAC3D;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,kBAAkB;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,mBAAD;GACa;GACX,YAAY;GACF;GACO;GACJ;GACL;GACM;GACE;GAEf;EACgB,CAAA;CACE,CAAA;AAE3B"}

package/dist/esm/components/focus-lock/index.js

@@ -1,2 +1,2 @@
-import { FocusLock } from "./focus-lock.js";
-export { FocusLock };
+import { FocusLock, useFocusLockShard } from "./focus-lock.js";
+export { FocusLock, useFocusLockShard };

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

@@ -2,16 +2,17 @@
 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";
+import { FocusLock } from "../focus-lock/focus-lock.js";
 import { Portal } from "../portal/portal.js";
 import { usePopupAnimationProps } from "../popover/popover.js";
 import { Button } from "../button/button.js";
 import { CloseButton } from "../close-button/close-button.js";
 import { modalStyle } from "./modal.style.js";
 import { fadeVariants } from "../fade/fade.js";
-import { FocusLock } from "../focus-lock/focus-lock.js";
 import { useModal } from "./use-modal.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -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,C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"}

package/dist/esm/components/popover/popover.js

@@ -1,5 +1,7 @@
 "use client";
+import { useSplitChildren, wrapOrPassProps } from "../../utils/children.js";
 import { utils_exports } from "../../utils/index.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";
@@ -9,7 +11,7 @@ import { Portal } from "../portal/portal.js";
 import { slideFadeVariants } from "../slide-fade/slide-fade.js";
 import { usePopover } from "./use-popover.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence } from "motion/react";
 //#region src/components/popover/popover.tsx
 const usePopupAnimationProps = (props = {}) => {
@@ -97,15 +99,21 @@ const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useCo
 */
 const PopoverRoot = (props) => {
 	const styleProps = usePopoverStyleProps(props);
-	const [styleContext, { animationScheme, children, duration, ...rest }] = useRootComponentProps({
+	const [styleContext, { anchor: anchorProp, animationScheme, body, children, duration, footer, header, trigger: triggerProp, anchorProps, bodyProps, closeTriggerProps, contentProps, footerProps, headerProps, triggerProps, ...rest }] = useRootComponentProps({
 		...props,
 		...styleProps
 	});
+	const [omittedChildren, trigger, anchor, customContent] = useSplitChildren((0, utils_exports.isFunction)(children) ? void 0 : children, PopoverTrigger, PopoverAnchor, PopoverContent);
 	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = usePopover(rest);
 	const componentContext = useMemo(() => ({
 		animationScheme,
 		duration,
 		open,
+		anchorProps,
+		bodyProps,
+		closeTriggerProps,
+		contentProps,
+		footerProps,
 		getAnchorProps,
 		getBodyProps,
 		getCloseTriggerProps,
@@ -113,11 +121,19 @@ const PopoverRoot = (props) => {
 		getFooterProps,
 		getHeaderProps,
 		getPositionerProps,
-		getTriggerProps
+		getTriggerProps,
+		headerProps,
+		triggerProps
 	}), [
 		open,
 		animationScheme,
+		anchorProps,
+		bodyProps,
+		closeTriggerProps,
+		contentProps,
 		duration,
+		footerProps,
+		headerProps,
 		getAnchorProps,
 		getBodyProps,
 		getCloseTriggerProps,
@@ -125,66 +141,89 @@ const PopoverRoot = (props) => {
 		getFooterProps,
 		getHeaderProps,
 		getPositionerProps,
-		getTriggerProps
+		getTriggerProps,
+		triggerProps
 	]);
+	const customAnchor = anchorProp ? /* @__PURE__ */ jsx(PopoverAnchor, { children: anchorProp }) : null;
+	const customTrigger = triggerProp ? /* @__PURE__ */ jsx(PopoverTrigger, { children: triggerProp }) : null;
+	const customContentProp = header !== void 0 || body !== void 0 || footer !== void 0 ? /* @__PURE__ */ jsx(ShorthandPopoverContent, {
+		body,
+		footer,
+		header
+	}) : null;
 	return /* @__PURE__ */ jsx(StyleContext, {
 		value: styleContext,
 		children: /* @__PURE__ */ jsx(ComponentContext, {
 			value: componentContext,
-			children: (0, utils_exports.runIfFn)(children, {
+			children: (0, utils_exports.isFunction)(children) ? (0, utils_exports.runIfFn)(children, {
 				open,
 				onClose
-			})
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				anchor ?? customAnchor,
+				trigger ?? customTrigger,
+				omittedChildren,
+				customContent ?? customContentProp
+			] })
 		})
 	});
 };
 const PopoverTrigger = withContext("button", "trigger")({ asChild: true }, (props) => {
-	const { getTriggerProps } = useComponentContext();
-	return getTriggerProps(props);
+	const { getTriggerProps, triggerProps } = useComponentContext();
+	return getTriggerProps(mergeProps(triggerProps, props)());
 });
 const PopoverCloseTrigger = withContext("button", {
 	name: "CloseTrigger",
 	slot: ["trigger", "close"]
 })({ asChild: true }, (props) => {
-	const { getCloseTriggerProps } = useComponentContext();
-	return getCloseTriggerProps(props);
+	const { closeTriggerProps, getCloseTriggerProps } = useComponentContext();
+	return getCloseTriggerProps(mergeProps(closeTriggerProps, props)());
 });
 const PopoverAnchor = withContext("div", "anchor")({ asChild: true }, (props) => {
-	const { getAnchorProps } = useComponentContext();
-	return getAnchorProps(props);
+	const { anchorProps, getAnchorProps } = useComponentContext();
+	return getAnchorProps(mergeProps(anchorProps, props)());
 });
 const PopoverPositioner = withContext("div", "positioner")(void 0, (props) => {
 	const { getPositionerProps } = useComponentContext();
 	return getPositionerProps(props);
 });
-const PopoverContent = withContext(({ portalProps, positionerProps, ...rest }) => {
-	const { animationScheme, duration, open, getContentProps } = useComponentContext();
+const PopoverContent = withContext(({ portalProps: portalPropsProp, positionerProps: positionerPropsProp, ...rest }) => {
+	const { animationScheme, duration, open, contentProps: { portalProps, positionerProps, ...contentProps } = {}, getContentProps } = useComponentContext();
 	const popupAnimationProps = usePopupAnimationProps({
 		animationScheme,
 		duration
 	});
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(Portal, {
-		...portalProps,
+		...mergeProps(portalProps, portalPropsProp)(),
 		children: /* @__PURE__ */ jsx(PopoverPositioner, {
-			...positionerProps,
+			...mergeProps(positionerProps, positionerPropsProp)(),
 			children: /* @__PURE__ */ jsx(motion$1.div, {
 				...popupAnimationProps,
-				...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(rest)))
+				...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(mergeProps(contentProps, rest)())))
 			})
 		})
 	}) : null });
 }, "content")();
+const ShorthandPopoverContent = ({ body, footer, header }) => {
+	const customHeader = wrapOrPassProps(PopoverHeader, header);
+	const customBody = wrapOrPassProps(PopoverBody, body);
+	const customFooter = wrapOrPassProps(PopoverFooter, footer);
+	return /* @__PURE__ */ jsxs(PopoverContent, { children: [
+		customHeader,
+		customBody,
+		customFooter
+	] });
+};
 const PopoverHeader = withContext("div", "header")(void 0, (props) => {
-	const { getHeaderProps } = useComponentContext();
-	return getHeaderProps(props);
+	const { getHeaderProps, headerProps } = useComponentContext();
+	return getHeaderProps(mergeProps(headerProps, props)());
 });
 const PopoverBody = withContext("div", "body")(void 0, (props) => {
-	const { getBodyProps } = useComponentContext();
-	return getBodyProps(props);
+	const { bodyProps, getBodyProps } = useComponentContext();
+	return getBodyProps(mergeProps(bodyProps, props)());
 });
 const PopoverFooter = withContext("div", "footer")(void 0, (props) => {
-	const { getFooterProps } = useComponentContext();
-	return getFooterProps(props);
+	const { footerProps, getFooterProps } = useComponentContext();
+	return getFooterProps(mergeProps(footerProps, props)());
 });
 //#endregion
 export { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, usePopoverPropsContext, usePopoverStyleProps, usePopupAnimationProps };