@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

package/dist/esm/components/native-popover/native-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-popover.js","names":["NativePopoverRoot: FC<NativePopoverRootProps>"],"sources":["../../../../src/components/native-popover/native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativePopoverStyle } from \"./native-popover.style\"\nimport type {\n  UseNativePopoverProps,\n  UseNativePopoverReturn,\n} from \"./use-native-popover\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { nativePopoverStyle } from \"./native-popover.style\"\nimport { useNativePopover } from \"./use-native-popover\"\n\ninterface ComponentContext extends Pick<\n  UseNativePopoverReturn,\n  | \"getAnchorProps\"\n  | \"getBodyProps\"\n  | \"getCloseTriggerProps\"\n  | \"getContentProps\"\n  | \"getFooterProps\"\n  | \"getHeaderProps\"\n  | \"getPositionerProps\"\n  | \"getTriggerProps\"\n> {}\n\nexport interface NativePopoverRootProps\n  extends\n    UseNativePopoverProps,\n    ThemeProps<NativePopoverStyle>,\n    PropsWithChildren {}\n\nconst {\n  ComponentContext,\n  PropsContext: NativePopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: useNativePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<\n  NativePopoverRootProps,\n  NativePopoverStyle,\n  ComponentContext\n>(\"native-popover\", nativePopoverStyle)\n\nexport { NativePopoverPropsContext, useNativePopoverPropsContext }\n\n/**\n * `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.\n *\n * @see https://yamada-ui.com/docs/components/native-popover\n */\nexport const NativePopoverRoot: FC<NativePopoverRootProps> = (props) => {\n  const [styleContext, { children, ...rest }] = useRootComponentProps(props)\n  const {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  } = useNativePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>{children}</ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface NativePopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverTrigger = withContext<\n  \"button\",\n  NativePopoverTriggerProps\n>(\"button\", \"trigger\")({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface NativePopoverAnchorProps extends HTMLStyledProps {}\n\nexport const NativePopoverAnchor = withContext<\"div\", NativePopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface NativePopoverPositionerProps extends HTMLStyledProps {}\n\nconst NativePopoverPositioner = withContext<\n  \"div\",\n  NativePopoverPositionerProps\n>(\"div\", \"positioner\")({ asChild: true }, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface NativePopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverCloseTrigger = withContext<\n  \"button\",\n  NativePopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface NativePopoverContentProps\n  extends HTMLStyledProps, PropsWithChildren {}\n\nexport const NativePopoverContent = withContext<\n  \"div\",\n  NativePopoverContentProps\n>(({ children, ...rest }) => {\n  const { getContentProps } = useComponentContext()\n\n  return (\n    <NativePopoverPositioner>\n      <styled.div {...getContentProps(cast<HTMLStyledProps>(rest))}>\n        {children}\n      </styled.div>\n    </NativePopoverPositioner>\n  )\n}, \"content\")({\n  suppressHydrationWarning: true,\n})\n\nexport interface NativePopoverHeaderProps extends HTMLStyledProps {}\n\nexport const NativePopoverHeader = withContext<\"div\", NativePopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface NativePopoverBodyProps extends HTMLStyledProps {}\n\nexport const NativePopoverBody = withContext<\"div\", NativePopoverBodyProps>(\n  \"div\",\n  \"body\",\n)(undefined, (props) => {\n  const { getBodyProps } = useComponentContext()\n\n  return getBodyProps(props)\n})\n\nexport interface NativePopoverFooterProps extends HTMLStyledProps {}\n\nexport const NativePopoverFooter = withContext<\"div\", NativePopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,EACJ,kBACA,cAAc,2BACd,cACA,qBACA,iBAAiB,8BACjB,aACA,0BACE,oBAIF,kBAAkB,mBAAmB;;;;;;AASvC,MAAaA,qBAAiD,UAAU;CACtE,MAAM,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,sBAAsB,MAAM;CAC1E,MAAM,EACJ,gBACA,cACA,sBACA,iBACA,gBACA,gBACA,oBACA,oBACE,iBAAiB,KAAK;AAwB1B,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAiB,OAzBG,eAChB;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;GAI+C;IAA4B;GAC3D;;AAMnB,MAAa,uBAAuB,YAGlC,UAAU,UAAU,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CACnD,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QAAO,gBAAgB,MAAM;EAC7B;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CAC9B,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAM,0BAA0B,YAG9B,OAAO,aAAa,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CACnD,MAAM,EAAE,uBAAuB,qBAAqB;AAEpD,QAAO,mBAAmB,MAAM;EAChC;AAIF,MAAa,4BAA4B,YAGvC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,EAAE,SAAS,MAAM,GAChB,UAAU;CACT,MAAM,EAAE,yBAAyB,qBAAqB;AAEtD,QAAO,qBAAqB,MAAM;EAErC;AAKD,MAAa,uBAAuB,aAGjC,EAAE,UAAU,GAAG,WAAW;CAC3B,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QACE,oBAAC,qCACC,oBAAC,OAAO;EAAI,GAAI,wCAAsC,KAAK,CAAC;EACzD;GACU,GACW;GAE3B,UAAU,CAAC,EACZ,0BAA0B,MAC3B,CAAC;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAa,oBAAoB,YAC/B,OACA,OACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QAAO,aAAa,MAAM;EAC1B;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B"}

package/dist/esm/components/native-popover/native-popover.style.js

@@ -0,0 +1,67 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+
+//#region src/components/native-popover/native-popover.style.ts
+const nativePopoverStyle = defineComponentSlotStyle({
+	base: {
+		body: {
+			alignItems: "flex-start",
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			gap: "{gap}"
+		},
+		content: {
+			bg: "bg.float",
+			borderColor: "border.muted",
+			borderWidth: "1px",
+			boxShadow: "sm",
+			display: "flex",
+			flexDirection: "column",
+			focusVisibleRing: "none",
+			gap: "{gap}",
+			p: "{padding}",
+			rounded: "l2"
+		},
+		footer: {
+			alignItems: "center",
+			display: "flex",
+			gap: "{gap}",
+			justifyContent: "flex-start"
+		},
+		header: {
+			alignItems: "center",
+			display: "flex",
+			fontWeight: "semibold",
+			gap: "{gap}",
+			justifyContent: "flex-start"
+		}
+	},
+	sizes: {
+		xs: { content: {
+			"--gap": "spaces.1",
+			"--padding": "spaces.2",
+			fontSize: "xs"
+		} },
+		sm: { content: {
+			"--gap": "spaces.2",
+			"--padding": "spaces.3",
+			fontSize: "sm"
+		} },
+		md: { content: {
+			"--gap": "spaces.3",
+			"--padding": "spaces.4",
+			fontSize: "md"
+		} },
+		lg: { content: {
+			"--gap": "spaces.4",
+			"--padding": "spaces.5",
+			fontSize: "md"
+		} }
+	},
+	defaultProps: { size: "md" }
+});
+
+//#endregion
+export { nativePopoverStyle };
+//# sourceMappingURL=native-popover.style.js.map

package/dist/esm/components/native-popover/native-popover.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-popover.style.js","names":[],"sources":["../../../../src/components/native-popover/native-popover.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const nativePopoverStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flex: \"1\",\n      flexDirection: \"column\",\n      gap: \"{gap}\",\n    },\n    content: {\n      bg: \"bg.float\",\n      borderColor: \"border.muted\",\n      borderWidth: \"1px\",\n      boxShadow: \"sm\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      focusVisibleRing: \"none\",\n      gap: \"{gap}\",\n      p: \"{padding}\",\n      rounded: \"l2\",\n    },\n    footer: {\n      alignItems: \"center\",\n      display: \"flex\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n    header: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"semibold\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n  },\n\n  sizes: {\n    xs: {\n      content: {\n        \"--gap\": \"spaces.1\",\n        \"--padding\": \"spaces.2\",\n        fontSize: \"xs\",\n      },\n    },\n    sm: {\n      content: {\n        \"--gap\": \"spaces.2\",\n        \"--padding\": \"spaces.3\",\n        fontSize: \"sm\",\n      },\n    },\n    md: {\n      content: {\n        \"--gap\": \"spaces.3\",\n        \"--padding\": \"spaces.4\",\n        fontSize: \"md\",\n      },\n    },\n    lg: {\n      content: {\n        \"--gap\": \"spaces.4\",\n        \"--padding\": \"spaces.5\",\n        fontSize: \"md\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type NativePopoverStyle = typeof nativePopoverStyle\n"],"mappings":";;;;AAEA,MAAa,qBAAqB,yBAAyB;CACzD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACN;EACD,SAAS;GACP,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,eAAe;GACf,kBAAkB;GAClB,KAAK;GACL,GAAG;GACH,SAAS;GACV;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GACjB;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,gBAAgB;GACjB;EACF;CAED,OAAO;EACL,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACF;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

package/dist/esm/components/native-popover/use-native-popover.js

@@ -0,0 +1,118 @@
+"use client";
+
+import { assignRef, mergeRefs } from "../../utils/ref.js";
+import { utils_exports } from "../../utils/index.js";
+import { useEnvironment } from "../../core/system/environment-provider.js";
+import "../../core/index.js";
+import { usePopper } from "../../hooks/use-popper/index.js";
+import { useCallback, useId, useRef } from "react";
+
+//#region src/components/native-popover/use-native-popover.tsx
+const useNativePopover = ({ autoUpdate, disabled = false, elements, flip, gutter, matchWidth, middleware, offset, placement = "end", platform, popover = "auto", popoverTarget, popoverTargetAction = "toggle", preventOverflow, strategy, transform, updateRef, whileElementsMounted } = {}) => {
+	const { getDocument } = useEnvironment();
+	const headerId = useId();
+	const bodyId = useId();
+	const generatedContentId = useId();
+	const contentId = popoverTarget ?? generatedContentId;
+	const anchorRef = useRef(null);
+	const triggerRef = useRef(null);
+	const contentRef = useRef(null);
+	const { refs, update, getPopperProps } = usePopper({
+		autoUpdate,
+		elements,
+		flip,
+		gutter,
+		matchWidth,
+		middleware,
+		offset,
+		placement,
+		platform,
+		preventOverflow,
+		strategy,
+		transform,
+		whileElementsMounted
+	});
+	assignRef(updateRef, update);
+	const onClick = useCallback((ev) => {
+		if (!disabled) return;
+		ev.preventDefault();
+		ev.stopPropagation();
+	}, [disabled]);
+	const getTriggerProps = useCallback(({ ref, ...props } = {}) => {
+		return {
+			type: "button",
+			"aria-controls": contentId,
+			"aria-disabled": (0, utils_exports.ariaAttr)(disabled),
+			"aria-haspopup": "dialog",
+			popoverTarget: contentId,
+			popoverTargetAction,
+			role: "button",
+			...props,
+			ref: mergeRefs(ref, triggerRef, (node) => {
+				if (anchorRef.current == null) refs.setReference(node);
+			}),
+			onClick: (0, utils_exports.handlerAll)(props.onClick, onClick)
+		};
+	}, [
+		contentId,
+		disabled,
+		onClick,
+		popoverTargetAction,
+		refs
+	]);
+	const getAnchorProps = useCallback(({ ref, ...props } = {}) => ({
+		...props,
+		ref: mergeRefs(ref, anchorRef, refs.setReference)
+	}), [refs.setReference]);
+	const getPositionerProps = useCallback(getPopperProps, [getPopperProps]);
+	const getContentProps = useCallback(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
+		const hasHeader = !!getDocument()?.getElementById(headerId);
+		const hasBody = !!getDocument()?.getElementById(bodyId);
+		return {
+			id: contentId,
+			"aria-describedby": (0, utils_exports.cx)(ariaDescribedby, hasBody ? bodyId : void 0),
+			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledby, hasHeader ? headerId : void 0),
+			"data-popup": (0, utils_exports.dataAttr)(true),
+			popover: popover === true ? "" : popover,
+			role: "dialog",
+			tabIndex: -1,
+			...props,
+			ref: mergeRefs(ref, contentRef)
+		};
+	}, [
+		getDocument,
+		headerId,
+		bodyId,
+		contentId,
+		popover
+	]);
+	const getHeaderProps = useCallback((props) => ({
+		id: headerId,
+		...props
+	}), [headerId]);
+	const getBodyProps = useCallback((props) => ({
+		id: bodyId,
+		...props
+	}), [bodyId]);
+	const getFooterProps = useCallback((props) => ({ ...props }), []);
+	return {
+		getAnchorProps,
+		getBodyProps,
+		getCloseTriggerProps: useCallback((props = {}) => {
+			return {
+				popoverTarget: contentId,
+				popoverTargetAction: "hide",
+				...props
+			};
+		}, [contentId]),
+		getContentProps,
+		getFooterProps,
+		getHeaderProps,
+		getPositionerProps,
+		getTriggerProps
+	};
+};
+
+//#endregion
+export { useNativePopover };
+//# sourceMappingURL=use-native-popover.js.map

package/dist/esm/components/native-popover/use-native-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-native-popover.js","names":["getTriggerProps: PropGetter<\"button\">","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n  ariaAttr,\n  assignRef,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n  /**\n   * If `true`, the popover will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: Direction\n  /**\n   * The mode of the popover.\n   *\n   * @default 'auto'\n   */\n  popover?: \"\" | \"auto\" | \"hint\" | \"manual\" | true\n  /**\n   * The target element ID for the popover trigger.\n   * If not provided, a generated ID will be used.\n   */\n  popoverTarget?: string\n  /**\n   * The action for the popover target.\n   *\n   * @default 'toggle'\n   */\n  popoverTargetAction?: \"hide\" | \"show\" | \"toggle\"\n  /**\n   * Update the position of the floating element, re-rendering the component if required.\n   */\n  updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n  autoUpdate,\n  disabled = false,\n  elements,\n  flip,\n  gutter,\n  matchWidth,\n  middleware,\n  offset,\n  placement = \"end\",\n  platform,\n  popover = \"auto\",\n  popoverTarget,\n  popoverTargetAction = \"toggle\",\n  preventOverflow,\n  strategy,\n  transform,\n  updateRef,\n  whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const headerId = useId()\n  const bodyId = useId()\n  const generatedContentId = useId()\n  const contentId = popoverTarget ?? generatedContentId\n  const anchorRef = useRef<HTMLElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const { refs, update, getPopperProps } = usePopper<\"button\">({\n    autoUpdate,\n    elements,\n    flip,\n    gutter,\n    matchWidth,\n    middleware,\n    offset,\n    placement,\n    platform,\n    preventOverflow,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  assignRef(updateRef, update)\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLButtonElement>) => {\n      if (!disabled) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [disabled],\n  )\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => {\n      return {\n        type: \"button\",\n        \"aria-controls\": contentId,\n        \"aria-disabled\": ariaAttr(disabled),\n        \"aria-haspopup\": \"dialog\",\n        popoverTarget: contentId,\n        popoverTargetAction,\n        role: \"button\",\n        ...props,\n        ref: mergeRefs(ref, triggerRef, (node) => {\n          if (anchorRef.current == null) refs.setReference(node)\n        }),\n        onClick: handlerAll(props.onClick, onClick),\n      }\n    },\n    [contentId, disabled, onClick, popoverTargetAction, refs],\n  )\n\n  const getAnchorProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ref: mergeRefs(ref, anchorRef, refs.setReference),\n    }),\n    [refs.setReference],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(getPopperProps, [\n    getPopperProps,\n  ])\n\n  const getContentProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const hasHeader = !!getDocument()?.getElementById(headerId)\n      const hasBody = !!getDocument()?.getElementById(bodyId)\n\n      return {\n        id: contentId,\n        \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n        \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n        \"data-popup\": dataAttr(true),\n        popover: popover === true ? \"\" : popover,\n        role: \"dialog\",\n        tabIndex: -1,\n        ...props,\n        ref: mergeRefs(ref, contentRef),\n      }\n    },\n    [getDocument, headerId, bodyId, contentId, popover],\n  )\n\n  const getHeaderProps: PropGetter = useCallback(\n    (props) => ({ id: headerId, ...props }),\n    [headerId],\n  )\n\n  const getBodyProps: PropGetter = useCallback(\n    (props) => ({ id: bodyId, ...props }),\n    [bodyId],\n  )\n\n  const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        popoverTarget: contentId,\n        popoverTargetAction: \"hide\",\n        ...props,\n      }\n    },\n    [contentId],\n  )\n\n  return {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":";;;;;;;;;;AAqDA,MAAa,oBAAoB,EAC/B,YACA,WAAW,OACX,UACA,MACA,QACA,YACA,YACA,QACA,YAAY,OACZ,UACA,UAAU,QACV,eACA,sBAAsB,UACtB,iBACA,UACA,WACA,WACA,yBACyB,EAAE,KAAK;CAChC,MAAM,EAAE,gBAAgB,gBAAgB;CACxC,MAAM,WAAW,OAAO;CACxB,MAAM,SAAS,OAAO;CACtB,MAAM,qBAAqB,OAAO;CAClC,MAAM,YAAY,iBAAiB;CACnC,MAAM,YAAY,OAAoB,KAAK;CAC3C,MAAM,aAAa,OAA0B,KAAK;CAClD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,MAAM,QAAQ,mBAAmB,UAAoB;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,WAAU,WAAW,OAAO;CAE5B,MAAM,UAAU,aACb,OAAsC;AACrC,MAAI,CAAC,SAAU;AAEf,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,SAAS,CACX;CAED,MAAMA,kBAAwC,aAC3C,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;AAC1B,SAAO;GACL,MAAM;GACN,iBAAiB;GACjB,6CAA0B,SAAS;GACnC,iBAAiB;GACjB,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,KAAK,UAAU,KAAK,aAAa,SAAS;AACxC,QAAI,UAAU,WAAW,KAAM,MAAK,aAAa,KAAK;KACtD;GACF,uCAAoB,MAAM,SAAS,QAAQ;GAC5C;IAEH;EAAC;EAAW;EAAU;EAAS;EAAqB;EAAK,CAC1D;CAED,MAAMC,iBAA6B,aAChC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC3B,GAAG;EACH,KAAK,UAAU,KAAK,WAAW,KAAK,aAAa;EAClD,GACD,CAAC,KAAK,aAAa,CACpB;CAED,MAAMC,qBAAiC,YAAY,gBAAgB,CACjE,eACD,CAAC;CAEF,MAAMC,kBAA8B,aACjC,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,YAAY,CAAC,CAAC,aAAa,EAAE,eAAe,SAAS;EAC3D,MAAM,UAAU,CAAC,CAAC,aAAa,EAAE,eAAe,OAAO;AAEvD,SAAO;GACL,IAAI;GACJ,0CAAuB,iBAAiB,UAAU,SAAS,OAAU;GACrE,yCAAsB,gBAAgB,YAAY,WAAW,OAAU;GACvE,0CAAuB,KAAK;GAC5B,SAAS,YAAY,OAAO,KAAK;GACjC,MAAM;GACN,UAAU;GACV,GAAG;GACH,KAAK,UAAU,KAAK,WAAW;GAChC;IAEH;EAAC;EAAa;EAAU;EAAQ;EAAW;EAAQ,CACpD;CAED,MAAMC,iBAA6B,aAChC,WAAW;EAAE,IAAI;EAAU,GAAG;EAAO,GACtC,CAAC,SAAS,CACX;CAED,MAAMC,eAA2B,aAC9B,WAAW;EAAE,IAAI;EAAQ,GAAG;EAAO,GACpC,CAAC,OAAO,CACT;CAED,MAAMC,iBAA6B,aAAa,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;AAa7E,QAAO;EACL;EACA;EACA,sBAdiD,aAChD,QAAQ,EAAE,KAAK;AACd,UAAO;IACL,eAAe;IACf,qBAAqB;IACrB,GAAG;IACJ;KAEH,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACA;EACD"}

package/dist/esm/components/native-select/native-select.js

@@ -4,11 +4,11 @@ import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
 import "../icon/index.js";
+import { useGroupItemProps } from "../group/use-group.js";
+import "../group/index.js";
 import { useInputBorder } from "../input/use-input-border.js";
 import { useInputPropsContext } from "../input/input.js";
 import { InputElement } from "../input/input-element.js";
-import { useGroupItemProps } from "../group/use-group.js";
-import "../group/index.js";
 import { InputGroupRoot } from "../input/input-group.js";
 import "../input/index.js";
 import { nativeSelectStyle } from "./native-select.style.js";

package/dist/esm/components/number-input/number-input.js

@@ -5,10 +5,10 @@ import "../../core/index.js";
 import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
 import { ChevronUpIcon } from "../icon/icons/chevron-up-icon.js";
 import "../icon/index.js";
-import { Input, useInputPropsContext } from "../input/input.js";
-import { InputElement } from "../input/input-element.js";
 import { useGroupItemProps } from "../group/use-group.js";
 import "../group/index.js";
+import { Input, useInputPropsContext } from "../input/input.js";
+import { InputElement } from "../input/input-element.js";
 import { InputGroupRoot } from "../input/input-group.js";
 import "../input/index.js";
 import { numberInputStyle } from "./number-input.style.js";

package/dist/esm/components/number-input/number-input.style.js

@@ -1,9 +1,9 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
 import "../../core/index.js";
-import { getInputHeightStyle, getInputPaddingStartResetStyle, inputStyle } from "../input/input.style.js";
-import "../input/index.js";
 import { buttonStyle } from "../button/button.style.js";
 import "../button/index.js";
+import { getInputHeightStyle, getInputPaddingStartResetStyle, inputStyle } from "../input/input.style.js";
+import "../input/index.js";
 
 //#region src/components/number-input/number-input.style.ts
 const numberInputStyle = defineComponentSlotStyle({

package/dist/esm/components/password-input/password-input.js

@@ -5,10 +5,10 @@ import "../../core/index.js";
 import { EyeIcon } from "../icon/icons/eye-icon.js";
 import { EyeOffIcon } from "../icon/icons/eye-off-icon.js";
 import "../icon/index.js";
-import { Input, useInputPropsContext } from "../input/input.js";
-import { InputElement } from "../input/input-element.js";
 import { useGroupItemProps } from "../group/use-group.js";
 import "../group/index.js";
+import { Input, useInputPropsContext } from "../input/input.js";
+import { InputElement } from "../input/input-element.js";
 import { InputGroupRoot } from "../input/input-group.js";
 import "../input/index.js";
 import { passwordInputStyle } from "./password-input.style.js";

package/dist/esm/components/password-input/password-input.style.js

@@ -1,9 +1,9 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
 import "../../core/index.js";
-import { getInputHeightStyle, getInputPaddingStartResetStyle, inputStyle } from "../input/input.style.js";
-import "../input/index.js";
 import { buttonStyle } from "../button/button.style.js";
 import "../button/index.js";
+import { getInputHeightStyle, getInputPaddingStartResetStyle, inputStyle } from "../input/input.style.js";
+import "../input/index.js";
 
 //#region src/components/password-input/password-input.style.ts
 const passwordInputStyle = defineComponentSlotStyle({

package/dist/esm/components/pin-input/pin-input.js

@@ -5,11 +5,11 @@ import { mergeRefs } from "../../utils/ref.js";
 import "../../utils/index.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
+import { Group } from "../group/group.js";
+import "../group/index.js";
 import { useFieldProps } from "../field/use-field-props.js";
 import "../field/index.js";
 import { Input } from "../input/input.js";
-import { Group } from "../group/group.js";
-import "../group/index.js";
 import "../input/index.js";
 import { pinInputStyle } from "./pin-input.style.js";
 import { PinInputDescendantsContext, usePinInput, usePinInputDescendant } from "./use-pin-input.js";

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

@@ -1,6 +1,6 @@
 import { popoverStyle } from "./popover.style.js";
 import { popoverProps, usePopover, usePopoverProps } from "./use-popover.js";
-import { PopoverAnchor, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, usePopoverPropsContext } from "./popover.js";
+import { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, usePopoverPropsContext } from "./popover.js";
 import { namespace_exports } from "./namespace.js";
 
-export { namespace_exports as Popover, PopoverAnchor, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, popoverProps, popoverStyle, usePopover, usePopoverProps, usePopoverPropsContext };
+export { namespace_exports as Popover, PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, popoverProps, popoverStyle, usePopover, usePopoverProps, usePopoverPropsContext };

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

@@ -1,10 +1,11 @@
 import { __exportAll } from "../../_virtual/rolldown_runtime.js";
-import { PopoverAnchor, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, usePopoverPropsContext } from "./popover.js";
+import { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, usePopoverPropsContext } from "./popover.js";
 
 //#region src/components/popover/namespace.ts
 var namespace_exports = /* @__PURE__ */ __exportAll({
 	Anchor: () => PopoverAnchor,
 	Body: () => PopoverBody,
+	CloseTrigger: () => PopoverCloseTrigger,
 	Content: () => PopoverContent,
 	Footer: () => PopoverFooter,
 	Header: () => PopoverHeader,

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

@@ -1 +1 @@
-{"version":3,"file":"namespace.js","names":[],"sources":["../../../../src/components/popover/namespace.ts"],"sourcesContent":["export {\n  PopoverAnchor as Anchor,\n  PopoverBody as Body,\n  PopoverContent as Content,\n  PopoverFooter as Footer,\n  PopoverHeader as Header,\n  PopoverPropsContext as PropsContext,\n  PopoverRoot as Root,\n  PopoverTrigger as Trigger,\n  usePopoverPropsContext as usePropsContext,\n} from \"./popover\"\nexport type {\n  PopoverAnchorProps as AnchorProps,\n  PopoverBodyProps as BodyProps,\n  PopoverContentProps as ContentProps,\n  PopoverFooterProps as FooterProps,\n  PopoverHeaderProps as HeaderProps,\n  PopoverRootProps as RootProps,\n  PopoverTriggerProps as TriggerProps,\n} from \"./popover\"\n"],"mappings":""}
+{"version":3,"file":"namespace.js","names":[],"sources":["../../../../src/components/popover/namespace.ts"],"sourcesContent":["export {\n  PopoverAnchor as Anchor,\n  PopoverBody as Body,\n  PopoverCloseTrigger as CloseTrigger,\n  PopoverContent as Content,\n  PopoverFooter as Footer,\n  PopoverHeader as Header,\n  PopoverPropsContext as PropsContext,\n  PopoverRoot as Root,\n  PopoverTrigger as Trigger,\n  usePopoverPropsContext as usePropsContext,\n} from \"./popover\"\nexport type {\n  PopoverAnchorProps as AnchorProps,\n  PopoverBodyProps as BodyProps,\n  PopoverCloseTriggerProps as CloseTriggerProps,\n  PopoverContentProps as ContentProps,\n  PopoverFooterProps as FooterProps,\n  PopoverHeaderProps as HeaderProps,\n  PopoverRootProps as RootProps,\n  PopoverTriggerProps as TriggerProps,\n} from \"./popover\"\n"],"mappings":""}

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

@@ -80,8 +80,8 @@ const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useCo
 * @see https://yamada-ui.com/docs/components/popover
 */
 const PopoverRoot = (props) => {
-	const [styleContext, { animationScheme = "scale", children, duration = .1, withCloseButton = true, ...rest }] = useRootComponentProps(props);
-	const { open, getAnchorProps, getBodyProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = usePopover(rest);
+	const [styleContext, { animationScheme = "scale", children, duration = .1, ...rest }] = useRootComponentProps(props);
+	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = usePopover(rest);
 	return /* @__PURE__ */ jsx(StyleContext, {
 		value: styleContext,
 		children: /* @__PURE__ */ jsx(ComponentContext, {
@@ -89,21 +89,21 @@ const PopoverRoot = (props) => {
 				animationScheme,
 				duration,
 				open,
-				withCloseButton,
 				getAnchorProps,
 				getBodyProps,
+				getCloseTriggerProps,
 				getContentProps,
 				getFooterProps,
 				getHeaderProps,
 				getPositionerProps,
 				getTriggerProps
 			}), [
-				withCloseButton,
 				open,
 				animationScheme,
 				duration,
 				getAnchorProps,
 				getBodyProps,
+				getCloseTriggerProps,
 				getContentProps,
 				getFooterProps,
 				getHeaderProps,
@@ -121,6 +121,13 @@ const PopoverTrigger = withContext("button", "trigger")({ asChild: true }, (prop
 	const { getTriggerProps } = useComponentContext();
 	return getTriggerProps(props);
 });
+const PopoverCloseTrigger = withContext("button", {
+	name: "CloseTrigger",
+	slot: ["trigger", "close"]
+})({ asChild: true }, (props) => {
+	const { getCloseTriggerProps } = useComponentContext();
+	return getCloseTriggerProps(props);
+});
 const PopoverAnchor = withContext("div", "anchor")({ asChild: true }, (props) => {
 	const { getAnchorProps } = useComponentContext();
 	return getAnchorProps(props);
@@ -153,5 +160,5 @@ const PopoverFooter = withContext("div", "footer")(void 0, (props) => {
 });
 
 //#endregion
-export { PopoverAnchor, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, usePopoverPropsContext };
+export { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, usePopoverPropsContext };
 //# sourceMappingURL=popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["PopoverRoot: FC<PopoverRootProps>","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  ThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface PopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: \"none\" | \"scale\" | SimplePlacement\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport const getPopupAnimationProps = (\n  animationScheme: PopupAnimationProps[\"animationScheme\"] = \"scale\",\n  duration?: PopupAnimationProps[\"duration\"],\n) => {\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    PopupAnimationProps,\n    Pick<PopoverRootProps, \"withCloseButton\"> {}\n\nexport interface PopoverRootProps\n  extends UsePopoverProps, PopupAnimationProps, ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: PopupAnimationProps[\"duration\"]\n  /**\n   * If `true`, display the popover close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const [\n    styleContext,\n    {\n      animationScheme = \"scale\",\n      children,\n      duration = 0.1,\n      withCloseButton = true,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      withCloseButton,\n      getAnchorProps,\n      getBodyProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      withCloseButton,\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...getPopupAnimationProps(animationScheme, duration)}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}
+{"version":3,"file":"popover.js","names":["PopoverRoot: FC<PopoverRootProps>","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  ThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface PopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: \"none\" | \"scale\" | SimplePlacement\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport const getPopupAnimationProps = (\n  animationScheme: PopupAnimationProps[\"animationScheme\"] = \"scale\",\n  duration?: PopupAnimationProps[\"duration\"],\n) => {\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    PopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends UsePopoverProps, PopupAnimationProps, ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: PopupAnimationProps[\"duration\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const [\n    styleContext,\n    { animationScheme = \"scale\", children, duration = 0.1, ...rest },\n  ] = useRootComponentProps(props)\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...getPopupAnimationProps(animationScheme, duration)}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}

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

@@ -1,65 +1,15 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
 import "../../core/index.js";
+import { nativePopoverStyle } from "../native-popover/native-popover.style.js";
+import "../native-popover/index.js";
 
 //#region src/components/popover/popover.style.ts
 const popoverStyle = defineComponentSlotStyle({
 	base: {
-		body: {
-			alignItems: "flex-start",
-			display: "flex",
-			flex: "1",
-			flexDirection: "column",
-			gap: "{gap}"
-		},
-		content: {
-			bg: "bg.float",
-			borderColor: "border.muted",
-			borderWidth: "1px",
-			boxShadow: "sm",
-			display: "flex",
-			flexDirection: "column",
-			focusVisibleRing: "none",
-			gap: "{gap}",
-			p: "{padding}",
-			rounded: "l2"
-		},
-		footer: {
-			alignItems: "center",
-			display: "flex",
-			gap: "{gap}",
-			justifyContent: "flex-start"
-		},
-		header: {
-			alignItems: "center",
-			display: "flex",
-			fontWeight: "semibold",
-			gap: "{gap}",
-			justifyContent: "flex-start"
-		},
+		...nativePopoverStyle.base,
 		positioner: { zIndex: "recoome" }
 	},
-	sizes: {
-		xs: { content: {
-			"--gap": "spaces.1",
-			"--padding": "spaces.2",
-			fontSize: "xs"
-		} },
-		sm: { content: {
-			"--gap": "spaces.2",
-			"--padding": "spaces.3",
-			fontSize: "sm"
-		} },
-		md: { content: {
-			"--gap": "spaces.3",
-			"--padding": "spaces.4",
-			fontSize: "md"
-		} },
-		lg: { content: {
-			"--gap": "spaces.4",
-			"--padding": "spaces.5",
-			fontSize: "md"
-		} }
-	},
+	sizes: nativePopoverStyle.sizes,
 	defaultProps: { size: "md" }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"popover.style.js","names":[],"sources":["../../../../src/components/popover/popover.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const popoverStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flex: \"1\",\n      flexDirection: \"column\",\n      gap: \"{gap}\",\n    },\n    content: {\n      bg: \"bg.float\",\n      borderColor: \"border.muted\",\n      borderWidth: \"1px\",\n      boxShadow: \"sm\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      focusVisibleRing: \"none\",\n      gap: \"{gap}\",\n      p: \"{padding}\",\n      rounded: \"l2\",\n    },\n    footer: {\n      alignItems: \"center\",\n      display: \"flex\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n    header: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"semibold\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n    positioner: {\n      zIndex: \"recoome\",\n    },\n  },\n\n  sizes: {\n    xs: {\n      content: {\n        \"--gap\": \"spaces.1\",\n        \"--padding\": \"spaces.2\",\n        fontSize: \"xs\",\n      },\n    },\n    sm: {\n      content: {\n        \"--gap\": \"spaces.2\",\n        \"--padding\": \"spaces.3\",\n        fontSize: \"sm\",\n      },\n    },\n    md: {\n      content: {\n        \"--gap\": \"spaces.3\",\n        \"--padding\": \"spaces.4\",\n        fontSize: \"md\",\n      },\n    },\n    lg: {\n      content: {\n        \"--gap\": \"spaces.4\",\n        \"--padding\": \"spaces.5\",\n        fontSize: \"md\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type PopoverStyle = typeof popoverStyle\n"],"mappings":";;;;AAEA,MAAa,eAAe,yBAAyB;CACnD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACN;EACD,SAAS;GACP,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,eAAe;GACf,kBAAkB;GAClB,KAAK;GACL,GAAG;GACH,SAAS;GACV;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GACjB;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,gBAAgB;GACjB;EACD,YAAY,EACV,QAAQ,WACT;EACF;CAED,OAAO;EACL,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACF;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}
+{"version":3,"file":"popover.style.js","names":[],"sources":["../../../../src/components/popover/popover.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { nativePopoverStyle } from \"../native-popover\"\n\nexport const popoverStyle = defineComponentSlotStyle({\n  base: {\n    ...nativePopoverStyle.base,\n    positioner: { zIndex: \"recoome\" },\n  },\n\n  sizes: nativePopoverStyle.sizes,\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type PopoverStyle = typeof popoverStyle\n"],"mappings":";;;;;;AAGA,MAAa,eAAe,yBAAyB;CACnD,MAAM;EACJ,GAAG,mBAAmB;EACtB,YAAY,EAAE,QAAQ,WAAW;EAClC;CAED,OAAO,mBAAmB;CAE1B,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

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

@@ -7,12 +7,12 @@ import { utils_exports } from "../../utils/index.js";
 import { useEnvironment } from "../../core/system/environment-provider.js";
 import { useSplitProps } from "../../core/components/props.js";
 import "../../core/index.js";
+import { popperProps, usePopper } from "../../hooks/use-popper/index.js";
 import { useDisclosure } from "../../hooks/use-disclosure/use-disclosure.js";
 import "../../hooks/use-disclosure/index.js";
 import { useEventListener } from "../../hooks/use-event-listener/index.js";
 import { useFocusOnShow } from "../../hooks/use-focus/index.js";
 import { useOutsideClick } from "../../hooks/use-outside-click/index.js";
-import { popperProps, usePopper } from "../../hooks/use-popper/index.js";
 import { useCallback, useEffect, useId, useRef } from "react";
 
 //#region src/components/popover/use-popover.tsx
@@ -140,9 +140,7 @@ const usePopover = ({ autoFocus = true, autoUpdate, modal = false, blockScrollOn
 		...props,
 		ref: mergeRefs(ref, anchorRef, refs.setReference)
 	}), [refs.setReference]);
-	const getPositionerProps = useCallback((props) => {
-		return getPopperProps(props);
-	}, [getPopperProps]);
+	const getPositionerProps = useCallback(getPopperProps, [getPopperProps]);
 	const getContentProps = useCallback(({ ref, ...props } = {}) => ({
 		id: contentId,
 		"aria-hidden": !open,
@@ -167,15 +165,24 @@ const usePopover = ({ autoFocus = true, autoUpdate, modal = false, blockScrollOn
 		id: headerId,
 		...props
 	}), [headerId]);
+	const getBodyProps = useCallback((props) => ({
+		id: bodyId,
+		...props
+	}), [bodyId]);
+	const getFooterProps = useCallback((props) => ({ ...props }), []);
 	return {
 		open,
 		getAnchorProps,
-		getBodyProps: useCallback((props) => ({
-			id: bodyId,
-			...props
-		}), [bodyId]),
+		getBodyProps,
+		getCloseTriggerProps: useCallback((props = {}) => ({
+			...props,
+			onClick: (0, utils_exports.handlerAll)(props.onClick, () => {
+				onClose();
+				triggerRef.current?.focus();
+			})
+		}), [onClose]),
 		getContentProps,
-		getFooterProps: useCallback((props) => ({ ...props }), []),
+		getFooterProps,
 		getHeaderProps,
 		getPositionerProps,
 		getTriggerProps,