@yamada-ui/react 2.0.10-dev-20260301102815 → 2.1.0-dev-20260302130356

package/dist/cjs/components/native-popover/native-popover.style.cjs

@@ -0,0 +1,67 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/native-popover/native-popover.style.ts
+const nativePopoverStyle = require_config.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
+exports.nativePopoverStyle = nativePopoverStyle;
+//# sourceMappingURL=native-popover.style.cjs.map

package/dist/cjs/components/native-popover/native-popover.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-popover.style.cjs","names":["defineComponentSlotStyle"],"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,qBAAqBA,wCAAyB;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/cjs/components/native-popover/use-native-popover.cjs

@@ -0,0 +1,119 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_environment_provider = require('../../core/system/environment-provider.cjs');
+require('../../core/index.cjs');
+const require_hooks_use_popper_index = require('../../hooks/use-popper/index.cjs');
+let react = require("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 } = require_environment_provider.useEnvironment();
+	const headerId = (0, react.useId)();
+	const bodyId = (0, react.useId)();
+	const generatedContentId = (0, react.useId)();
+	const contentId = popoverTarget ?? generatedContentId;
+	const anchorRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
+	const { refs, update, getPopperProps } = require_hooks_use_popper_index.usePopper({
+		autoUpdate,
+		elements,
+		flip,
+		gutter,
+		matchWidth,
+		middleware,
+		offset,
+		placement,
+		platform,
+		preventOverflow,
+		strategy,
+		transform,
+		whileElementsMounted
+	});
+	require_ref.assignRef(updateRef, update);
+	const onClick = (0, react.useCallback)((ev) => {
+		if (!disabled) return;
+		ev.preventDefault();
+		ev.stopPropagation();
+	}, [disabled]);
+	const getTriggerProps = (0, react.useCallback)(({ ref, ...props } = {}) => {
+		return {
+			type: "button",
+			"aria-controls": contentId,
+			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+			"aria-haspopup": "dialog",
+			popoverTarget: contentId,
+			popoverTargetAction,
+			role: "button",
+			...props,
+			ref: require_ref.mergeRefs(ref, triggerRef, (node) => {
+				if (anchorRef.current == null) refs.setReference(node);
+			}),
+			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onClick)
+		};
+	}, [
+		contentId,
+		disabled,
+		onClick,
+		popoverTargetAction,
+		refs
+	]);
+	const getAnchorProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
+		...props,
+		ref: require_ref.mergeRefs(ref, anchorRef, refs.setReference)
+	}), [refs.setReference]);
+	const getPositionerProps = (0, react.useCallback)(getPopperProps, [getPopperProps]);
+	const getContentProps = (0, react.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, require_utils_index.utils_exports.cx)(ariaDescribedby, hasBody ? bodyId : void 0),
+			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, hasHeader ? headerId : void 0),
+			"data-popup": (0, require_utils_index.utils_exports.dataAttr)(true),
+			popover: popover === true ? "" : popover,
+			role: "dialog",
+			tabIndex: -1,
+			...props,
+			ref: require_ref.mergeRefs(ref, contentRef)
+		};
+	}, [
+		getDocument,
+		headerId,
+		bodyId,
+		contentId,
+		popover
+	]);
+	const getHeaderProps = (0, react.useCallback)((props) => ({
+		id: headerId,
+		...props
+	}), [headerId]);
+	const getBodyProps = (0, react.useCallback)((props) => ({
+		id: bodyId,
+		...props
+	}), [bodyId]);
+	const getFooterProps = (0, react.useCallback)((props) => ({ ...props }), []);
+	return {
+		getAnchorProps,
+		getBodyProps,
+		getCloseTriggerProps: (0, react.useCallback)((props = {}) => {
+			return {
+				popoverTarget: contentId,
+				popoverTargetAction: "hide",
+				...props
+			};
+		}, [contentId]),
+		getContentProps,
+		getFooterProps,
+		getHeaderProps,
+		getPositionerProps,
+		getTriggerProps
+	};
+};
+
+//#endregion
+exports.useNativePopover = useNativePopover;
+//# sourceMappingURL=use-native-popover.cjs.map

package/dist/cjs/components/native-popover/use-native-popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-native-popover.cjs","names":["useEnvironment","usePopper","getTriggerProps: PropGetter<\"button\">","mergeRefs","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,gBAAgBA,6CAAgB;CACxC,MAAM,6BAAkB;CACxB,MAAM,2BAAgB;CACtB,MAAM,uCAA4B;CAClC,MAAM,YAAY,iBAAiB;CACnC,MAAM,8BAAgC,KAAK;CAC3C,MAAM,+BAAuC,KAAK;CAClD,MAAM,+BAAoC,KAAK;CAC/C,MAAM,EAAE,MAAM,QAAQ,mBAAmBC,yCAAoB;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,uBAAU,WAAW,OAAO;CAE5B,MAAM,kCACH,OAAsC;AACrC,MAAI,CAAC,SAAU;AAEf,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,SAAS,CACX;CAED,MAAMC,0CACH,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;AAC1B,SAAO;GACL,MAAM;GACN,iBAAiB;GACjB,iEAA0B,SAAS;GACnC,iBAAiB;GACjB,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,KAAKC,sBAAU,KAAK,aAAa,SAAS;AACxC,QAAI,UAAU,WAAW,KAAM,MAAK,aAAa,KAAK;KACtD;GACF,2DAAoB,MAAM,SAAS,QAAQ;GAC5C;IAEH;EAAC;EAAW;EAAU;EAAS;EAAqB;EAAK,CAC1D;CAED,MAAMC,yCACH,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC3B,GAAG;EACH,KAAKD,sBAAU,KAAK,WAAW,KAAK,aAAa;EAClD,GACD,CAAC,KAAK,aAAa,CACpB;CAED,MAAME,4CAA6C,gBAAgB,CACjE,eACD,CAAC;CAEF,MAAMC,0CACH,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,8DAAuB,iBAAiB,UAAU,SAAS,OAAU;GACrE,6DAAsB,gBAAgB,YAAY,WAAW,OAAU;GACvE,8DAAuB,KAAK;GAC5B,SAAS,YAAY,OAAO,KAAK;GACjC,MAAM;GACN,UAAU;GACV,GAAG;GACH,KAAKH,sBAAU,KAAK,WAAW;GAChC;IAEH;EAAC;EAAa;EAAU;EAAQ;EAAW;EAAQ,CACpD;CAED,MAAMI,yCACH,WAAW;EAAE,IAAI;EAAU,GAAG;EAAO,GACtC,CAAC,SAAS,CACX;CAED,MAAMC,uCACH,WAAW;EAAE,IAAI;EAAQ,GAAG;EAAO,GACpC,CAAC,OAAO,CACT;CAED,MAAMC,yCAA0C,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;AAa7E,QAAO;EACL;EACA;EACA,8CAbC,QAAQ,EAAE,KAAK;AACd,UAAO;IACL,eAAe;IACf,qBAAqB;IACrB,GAAG;IACJ;KAEH,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACA;EACD"}

package/dist/cjs/components/native-select/native-select.cjs

@@ -5,11 +5,11 @@ const require_create_component = require('../../core/components/create-component
 require('../../core/index.cjs');
 const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
 require('../icon/index.cjs');
+const require_use_group = require('../group/use-group.cjs');
+require('../group/index.cjs');
 const require_use_input_border = require('../input/use-input-border.cjs');
 const require_input = require('../input/input.cjs');
 const require_input_element = require('../input/input-element.cjs');
-const require_use_group = require('../group/use-group.cjs');
-require('../group/index.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_native_select_style = require('./native-select.style.cjs');

package/dist/cjs/components/number-input/number-input.cjs

@@ -6,10 +6,10 @@ require('../../core/index.cjs');
 const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
 const require_chevron_up_icon = require('../icon/icons/chevron-up-icon.cjs');
 require('../icon/index.cjs');
-const require_input = require('../input/input.cjs');
-const require_input_element = require('../input/input-element.cjs');
 const require_use_group = require('../group/use-group.cjs');
 require('../group/index.cjs');
+const require_input = require('../input/input.cjs');
+const require_input_element = require('../input/input-element.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_number_input_style = require('./number-input.style.cjs');

package/dist/cjs/components/number-input/number-input.style.cjs

@@ -1,9 +1,9 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
-const require_input_style = require('../input/input.style.cjs');
-require('../input/index.cjs');
 const require_button_style = require('../button/button.style.cjs');
 require('../button/index.cjs');
+const require_input_style = require('../input/input.style.cjs');
+require('../input/index.cjs');
 
 //#region src/components/number-input/number-input.style.ts
 const numberInputStyle = require_config.defineComponentSlotStyle({

package/dist/cjs/components/password-input/password-input.cjs

@@ -6,10 +6,10 @@ require('../../core/index.cjs');
 const require_eye_icon = require('../icon/icons/eye-icon.cjs');
 const require_eye_off_icon = require('../icon/icons/eye-off-icon.cjs');
 require('../icon/index.cjs');
-const require_input = require('../input/input.cjs');
-const require_input_element = require('../input/input-element.cjs');
 const require_use_group = require('../group/use-group.cjs');
 require('../group/index.cjs');
+const require_input = require('../input/input.cjs');
+const require_input_element = require('../input/input-element.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_password_input_style = require('./password-input.style.cjs');

package/dist/cjs/components/password-input/password-input.style.cjs

@@ -1,9 +1,9 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
-const require_input_style = require('../input/input.style.cjs');
-require('../input/index.cjs');
 const require_button_style = require('../button/button.style.cjs');
 require('../button/index.cjs');
+const require_input_style = require('../input/input.style.cjs');
+require('../input/index.cjs');
 
 //#region src/components/password-input/password-input.style.ts
 const passwordInputStyle = require_config.defineComponentSlotStyle({

package/dist/cjs/components/pin-input/pin-input.cjs

@@ -6,11 +6,11 @@ const require_ref = require('../../utils/ref.cjs');
 require('../../utils/index.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
+const require_group = require('../group/group.cjs');
+require('../group/index.cjs');
 const require_use_field_props = require('../field/use-field-props.cjs');
 require('../field/index.cjs');
 const require_input = require('../input/input.cjs');
-const require_group = require('../group/group.cjs');
-require('../group/index.cjs');
 require('../input/index.cjs');
 const require_pin_input_style = require('./pin-input.style.cjs');
 const require_use_pin_input = require('./use-pin-input.cjs');

package/dist/cjs/components/popover/index.cjs

@@ -11,6 +11,7 @@ Object.defineProperty(exports, 'Popover', {
 });
 exports.PopoverAnchor = require_popover.PopoverAnchor;
 exports.PopoverBody = require_popover.PopoverBody;
+exports.PopoverCloseTrigger = require_popover.PopoverCloseTrigger;
 exports.PopoverContent = require_popover.PopoverContent;
 exports.PopoverFooter = require_popover.PopoverFooter;
 exports.PopoverHeader = require_popover.PopoverHeader;

package/dist/cjs/components/popover/namespace.cjs

@@ -5,6 +5,7 @@ const require_popover = require('./popover.cjs');
 var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	Anchor: () => require_popover.PopoverAnchor,
 	Body: () => require_popover.PopoverBody,
+	CloseTrigger: () => require_popover.PopoverCloseTrigger,
 	Content: () => require_popover.PopoverContent,
 	Footer: () => require_popover.PopoverFooter,
 	Header: () => require_popover.PopoverHeader,

package/dist/cjs/components/popover/namespace.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"namespace.cjs","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.cjs","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/cjs/components/popover/popover.cjs

@@ -81,8 +81,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 } = require_use_popover.usePopover(rest);
+	const [styleContext, { animationScheme = "scale", children, duration = .1, ...rest }] = useRootComponentProps(props);
+	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = require_use_popover.usePopover(rest);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
 		value: styleContext,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
@@ -90,21 +90,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,
@@ -122,6 +122,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);
@@ -156,6 +163,7 @@ const PopoverFooter = withContext("div", "footer")(void 0, (props) => {
 //#endregion
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverBody = PopoverBody;
+exports.PopoverCloseTrigger = PopoverCloseTrigger;
 exports.PopoverContent = PopoverContent;
 exports.PopoverFooter = PopoverFooter;
 exports.PopoverHeader = PopoverHeader;

package/dist/cjs/components/popover/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","PopoverRoot: FC<PopoverRootProps>","usePopover","AnimatePresence","Portal","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.cjs","names":["fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","PopoverRoot: FC<PopoverRootProps>","usePopover","AnimatePresence","Portal","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":";;;;;;;;;;;;;;;;;;;;;AAwCA,MAAa,0BACX,kBAA0D,SAC1D,aACG;CACH,MAAM,cAAc;EAAE,SAAS;EAAS,MAAM;EAAQ,SAAS;EAAQ;AAEvE,SAAQ,iBAAR;EACE,KAAK,QACH,QAAO;GACL,GAAG;GACH,QAAQ;IAAE;IAAU,SAAS;IAAM,OAAO;IAAM;GAChD,UAAUA;GACX;EACH,KAAK,cACH,QAAO;GACL,GAAG;GACH,QAAQ;IAAE;IAAU,SAAS;IAAK,SAAS;IAAM;GACjD,UAAUC;GACX;EACH,KAAK,aACH,QAAO;GACL,GAAG;GACH,QAAQ;IAAE;IAAU,SAAS;IAAI,SAAS;IAAM;GAChD,UAAUA;GACX;EACH,KAAK,eACH,QAAO;GACL,GAAG;GACH,QAAQ;IAAE;IAAU,SAAS;IAAK,SAAS;IAAM;GACjD,UAAUA;GACX;EACH,KAAK,YACH,QAAO;GACL,GAAG;GACH,QAAQ;IAAE;IAAU,SAAS;IAAI,SAAS;IAAM;GAChD,UAAUA;GACX;EACH,QACE,QAAO,EAAE;;;AAqCf,MAAM,EACJ,kBACA,cAAc,qBACd,cACA,qBACA,iBAAiB,wBACjB,aACA,0BACEC,6CACF,WACAC,mCACD;;;;;;AASD,MAAaC,eAAqC,UAAU;CAC1D,MAAM,CACJ,cACA,EAAE,kBAAkB,SAAS,UAAU,WAAW,IAAK,GAAG,UACxD,sBAAsB,MAAM;CAChC,MAAM,EACJ,MACA,gBACA,cACA,sBACA,iBACA,gBACA,gBACA,oBACA,iBACA,YACEC,+BAAW,KAAK;AA8BpB,QACE,2CAAC;EAAa,OAAO;YACnB,2CAAC;GAAiB,iCA9Bb;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;4DAKc,UAAU;IAAE;IAAM;IAAS,CAAC;IACpB;GACN;;AAMnB,MAAa,iBAAiB,YAC5B,UACA,UACD,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CAC9B,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QAAO,gBAAgB,MAAM;EAC7B;AAIF,MAAa,sBAAsB,YAGjC,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;AAID,MAAa,gBAAgB,YAC3B,OACA,SACD,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CAC9B,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAM,oBAAoB,YACxB,OACA,aACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,uBAAuB,qBAAqB;AAEpD,QAAO,mBAAmB,MAAM;EAChC;AAUF,MAAa,iBAAiB,aAC3B,EAAE,aAAa,GAAG,WAAW;CAC5B,MAAM,EAAE,iBAAiB,UAAU,MAAM,oBACvC,qBAAqB;AAEvB,QACE,2CAACC,0CACE,OACC,2CAACC;EAAO,GAAI;YACV,2CAAC,+BACC,2CAACC,uBAAO;GACN,GAAI,uBAAuB,iBAAiB,SAAS;GACrD,+CACE,4DAAgC,KAAK,CAAC,CACvC;IACD,GACgB;GACb,GACP,OACY;GAGtB,UACD,EAAE;AAIH,MAAa,gBAAgB,YAC3B,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAa,cAAc,YAAqC,OAAO,OAAO,CAC5E,SACC,UAAU;CACT,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QAAO,aAAa,MAAM;EAE7B;AAID,MAAa,gBAAgB,YAC3B,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B"}

package/dist/cjs/components/popover/popover.style.cjs

@@ -1,65 +1,15 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
+const require_native_popover_style = require('../native-popover/native-popover.style.cjs');
+require('../native-popover/index.cjs');
 
 //#region src/components/popover/popover.style.ts
 const popoverStyle = require_config.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"
-		},
+		...require_native_popover_style.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: require_native_popover_style.nativePopoverStyle.sizes,
 	defaultProps: { size: "md" }
 });
 

package/dist/cjs/components/popover/popover.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.style.cjs","names":["defineComponentSlotStyle"],"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,eAAeA,wCAAyB;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.cjs","names":["defineComponentSlotStyle","nativePopoverStyle"],"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,eAAeA,wCAAyB;CACnD,MAAM;EACJ,GAAGC,gDAAmB;EACtB,YAAY,EAAE,QAAQ,WAAW;EAClC;CAED,OAAOA,gDAAmB;CAE1B,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

package/dist/cjs/components/popover/use-popover.cjs

@@ -8,12 +8,12 @@ const require_utils_index = require('../../utils/index.cjs');
 const require_environment_provider = require('../../core/system/environment-provider.cjs');
 const require_props = require('../../core/components/props.cjs');
 require('../../core/index.cjs');
+const require_hooks_use_popper_index = require('../../hooks/use-popper/index.cjs');
 const require_use_disclosure = require('../../hooks/use-disclosure/use-disclosure.cjs');
 require('../../hooks/use-disclosure/index.cjs');
 const require_hooks_use_event_listener_index = require('../../hooks/use-event-listener/index.cjs');
 const require_hooks_use_focus_index = require('../../hooks/use-focus/index.cjs');
 const require_hooks_use_outside_click_index = require('../../hooks/use-outside-click/index.cjs');
-const require_hooks_use_popper_index = require('../../hooks/use-popper/index.cjs');
 let react = require("react");
 
 //#region src/components/popover/use-popover.tsx
@@ -141,9 +141,7 @@ const usePopover = ({ autoFocus = true, autoUpdate, modal = false, blockScrollOn
 		...props,
 		ref: require_ref.mergeRefs(ref, anchorRef, refs.setReference)
 	}), [refs.setReference]);
-	const getPositionerProps = (0, react.useCallback)((props) => {
-		return getPopperProps(props);
-	}, [getPopperProps]);
+	const getPositionerProps = (0, react.useCallback)(getPopperProps, [getPopperProps]);
 	const getContentProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
 		id: contentId,
 		"aria-hidden": !open,
@@ -168,15 +166,24 @@ const usePopover = ({ autoFocus = true, autoUpdate, modal = false, blockScrollOn
 		id: headerId,
 		...props
 	}), [headerId]);
+	const getBodyProps = (0, react.useCallback)((props) => ({
+		id: bodyId,
+		...props
+	}), [bodyId]);
+	const getFooterProps = (0, react.useCallback)((props) => ({ ...props }), []);
 	return {
 		open,
 		getAnchorProps,
-		getBodyProps: (0, react.useCallback)((props) => ({
-			id: bodyId,
-			...props
-		}), [bodyId]),
+		getBodyProps,
+		getCloseTriggerProps: (0, react.useCallback)((props = {}) => ({
+			...props,
+			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, () => {
+				onClose();
+				triggerRef.current?.focus();
+			})
+		}), [onClose]),
 		getContentProps,
-		getFooterProps: (0, react.useCallback)((props) => ({ ...props }), []),
+		getFooterProps,
 		getHeaderProps,
 		getPositionerProps,
 		getTriggerProps,