@yamada-ui/react 2.2.0-next-20260324195321 → 2.2.0-next-20260324222629

package/dist/cjs/components/action-bar/action-bar.cjs

@@ -0,0 +1,99 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_children = require('../../utils/children.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_factory$1 = require('../motion/factory.cjs');
+require('../motion/index.cjs');
+const require_action_bar_style = require('./action-bar.style.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_portal = require('../portal/portal.cjs');
+require('../portal/index.cjs');
+const require_popover = require('../popover/popover.cjs');
+require('../popover/index.cjs');
+const require_use_action_bar = require('./use-action-bar.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/action-bar/action-bar.tsx
+const { ComponentContext, PropsContext: ActionBarPropsContext, useComponentContext, usePropsContext: useActionBarPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("action-bar", require_action_bar_style.actionBarStyle);
+/**
+* `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
+*
+* @see https://yamada-ui.com/docs/components/action-bar
+*/
+const ActionBarRoot = withProvider(({ animationScheme, children, content: contentProp, duration, placement: placementProp, trigger, portalProps, onCloseComplete, ...rest }) => {
+	const placement = require_hooks_use_value_index.useValue(placementProp);
+	animationScheme ??= placement?.startsWith("start") ? "block-start" : "block-end";
+	const [omittedChildren, openTrigger, content] = require_children.useSplitChildren(children, ActionBarOpenTrigger, ActionBarContent);
+	const { open, getCloseTriggerProps, getContentProps, getOpenTriggerProps, getRootProps } = require_use_action_bar.useActionBar(rest);
+	const customOpenTrigger = trigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarOpenTrigger, { children: trigger }) : null;
+	const customContent = contentProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarContent, { children: contentProp }) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			animationScheme,
+			duration,
+			getCloseTriggerProps,
+			getContentProps,
+			getOpenTriggerProps
+		}), [
+			animationScheme,
+			duration,
+			getCloseTriggerProps,
+			getContentProps,
+			getOpenTriggerProps
+		]),
+		children: [openTrigger ?? customOpenTrigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+			onExitComplete: onCloseComplete,
+			children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
+				...portalProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+					...getRootProps(),
+					children: content ?? customContent ?? omittedChildren
+				})
+			}) : null
+		})]
+	});
+}, "root", { transferProps: ["placement"] })();
+const ActionBarOpenTrigger = withContext("button", {
+	name: "OpenTrigger",
+	slot: ["trigger", "open"]
+})(void 0, (props) => {
+	const { getOpenTriggerProps } = useComponentContext();
+	return {
+		asChild: true,
+		...getOpenTriggerProps(props)
+	};
+});
+const ActionBarCloseTrigger = withContext("button", {
+	name: "CloseTrigger",
+	slot: ["trigger", "close"]
+})(void 0, (props) => {
+	const { getCloseTriggerProps } = useComponentContext();
+	return {
+		asChild: true,
+		...getCloseTriggerProps(props)
+	};
+});
+const ActionBarContent = withContext((props) => {
+	const { animationScheme, duration, getContentProps } = useComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory$1.motion.section, {
+		...require_popover.getPopupAnimationProps(animationScheme, duration),
+		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(props)))
+	});
+}, "content")();
+const ActionBarSeparator = withContext("div", "separator")();
+
+//#endregion
+exports.ActionBarCloseTrigger = ActionBarCloseTrigger;
+exports.ActionBarContent = ActionBarContent;
+exports.ActionBarOpenTrigger = ActionBarOpenTrigger;
+exports.ActionBarPropsContext = ActionBarPropsContext;
+exports.ActionBarRoot = ActionBarRoot;
+exports.ActionBarSeparator = ActionBarSeparator;
+exports.useActionBarPropsContext = useActionBarPropsContext;
+//# sourceMappingURL=action-bar.cjs.map

package/dist/cjs/components/action-bar/action-bar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar.cjs","names":["createSlotComponent","actionBarStyle","useValue","useSplitChildren","useActionBar","AnimatePresence","Portal","styled","motion","getPopupAnimationProps"],"sources":["../../../../src/components/action-bar/action-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport type { PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { ActionBarStyle } from \"./action-bar.style\"\nimport type { UseActionBarProps, UseActionBarReturn } from \"./use-action-bar\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, useSplitChildren } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { getPopupAnimationProps, type PopupAnimationProps } from \"../popover\"\nimport { Portal, type PortalProps } from \"../portal\"\nimport { actionBarStyle } from \"./action-bar.style\"\nimport { useActionBar } from \"./use-action-bar\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      UseActionBarReturn,\n      \"getCloseTriggerProps\" | \"getContentProps\" | \"getOpenTriggerProps\"\n    >,\n    Pick<ActionBarRootProps, \"animationScheme\" | \"duration\"> {}\n\nexport interface ActionBarRootProps\n  extends\n    Omit<HTMLStyledProps, \"content\">,\n    ThemeProps<ActionBarStyle>,\n    UseActionBarProps,\n    PopupAnimationProps {\n  /**\n   * The action bar content to use.\n   */\n  content?: ReactNode\n  /**\n   * The action bar trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the action bar has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ActionBarPropsContext,\n  useComponentContext,\n  usePropsContext: useActionBarPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ActionBarRootProps, ActionBarStyle, ComponentContext>(\n  \"action-bar\",\n  actionBarStyle,\n)\n\nexport { ActionBarPropsContext, useActionBarPropsContext }\n\n/**\n * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.\n *\n * @see https://yamada-ui.com/docs/components/action-bar\n */\nexport const ActionBarRoot = withProvider<\n  \"div\",\n  ActionBarRootProps,\n  \"placement\"\n>(\n  ({\n    animationScheme,\n    children,\n    content: contentProp,\n    duration,\n    placement: placementProp,\n    trigger,\n    portalProps,\n    onCloseComplete,\n    ...rest\n  }) => {\n    const placement = useValue(placementProp)\n\n    animationScheme ??= placement?.startsWith(\"start\")\n      ? \"block-start\"\n      : \"block-end\"\n\n    const [omittedChildren, openTrigger, content] = useSplitChildren(\n      children,\n      ActionBarOpenTrigger,\n      ActionBarContent,\n    )\n    const {\n      open,\n      getCloseTriggerProps,\n      getContentProps,\n      getOpenTriggerProps,\n      getRootProps,\n    } = useActionBar(rest)\n    const customOpenTrigger = trigger ? (\n      <ActionBarOpenTrigger>{trigger}</ActionBarOpenTrigger>\n    ) : null\n    const customContent = contentProp ? (\n      <ActionBarContent>{contentProp}</ActionBarContent>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        getCloseTriggerProps,\n        getContentProps,\n        getOpenTriggerProps,\n      }),\n      [\n        animationScheme,\n        duration,\n        getCloseTriggerProps,\n        getContentProps,\n        getOpenTriggerProps,\n      ],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <styled.div {...getRootProps()}>\n                {content ?? customContent ?? omittedChildren}\n              </styled.div>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"placement\"] },\n)()\n\nexport interface ActionBarOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ActionBarOpenTrigger = withContext<\n  \"button\",\n  ActionBarOpenTriggerProps\n>(\"button\", { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] })(\n  undefined,\n  (props) => {\n    const { getOpenTriggerProps } = useComponentContext()\n\n    return { asChild: true, ...getOpenTriggerProps(props) }\n  },\n)\n\nexport interface ActionBarCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ActionBarCloseTrigger = withContext<\n  \"button\",\n  ActionBarCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  undefined,\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return { asChild: true, ...getCloseTriggerProps(props) }\n  },\n)\n\nexport interface ActionBarContentProps\n  extends Omit<HTMLStyledProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ActionBarContent = withContext<\"section\", ActionBarContentProps>(\n  (props) => {\n    const { animationScheme, duration, getContentProps } = useComponentContext()\n\n    return (\n      <motion.section\n        {...getPopupAnimationProps(animationScheme, duration)}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(props)),\n        )}\n      />\n    )\n  },\n  \"content\",\n)()\n\nexport interface ActionBarSeparatorProps extends HTMLStyledProps {}\n\nexport const ActionBarSeparator = withContext<\"div\", ActionBarSeparatorProps>(\n  \"div\",\n  \"separator\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAM,EACJ,kBACA,cAAc,uBACd,qBACA,iBAAiB,0BACjB,aACA,iBACEA,6CACF,cACAC,wCACD;;;;;;AASD,MAAa,gBAAgB,cAK1B,EACC,iBACA,UACA,SAAS,aACT,UACA,WAAW,eACX,SACA,aACA,iBACA,GAAG,WACC;CACJ,MAAM,YAAYC,uCAAS,cAAc;AAEzC,qBAAoB,WAAW,WAAW,QAAQ,GAC9C,gBACA;CAEJ,MAAM,CAAC,iBAAiB,aAAa,WAAWC,kCAC9C,UACA,sBACA,iBACD;CACD,MAAM,EACJ,MACA,sBACA,iBACA,qBACA,iBACEC,oCAAa,KAAK;CACtB,MAAM,oBAAoB,UACxB,2CAAC,kCAAsB,UAA+B,GACpD;CACJ,MAAM,gBAAgB,cACpB,2CAAC,8BAAkB,cAA+B,GAChD;AAkBJ,QACE,4CAAC;EAAiB,iCAjBX;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACD,CACF;aAII,eAAe,mBAEhB,2CAACC;GAAgB,gBAAgB;aAC9B,OACC,2CAACC;IAAO,GAAI;cACV,2CAACC,uBAAO;KAAI,GAAI,cAAc;eAC3B,WAAW,iBAAiB;MAClB;KACN,GACP;IACY;GACD;GAGvB,QACA,EAAE,eAAe,CAAC,YAAY,EAAE,CACjC,EAAE;AAIH,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,qBAAqB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,qBAAqB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAKD,MAAa,mBAAmB,aAC7B,UAAU;CACT,MAAM,EAAE,iBAAiB,UAAU,oBAAoB,qBAAqB;AAE5E,QACE,2CAACC,yBAAO;EACN,GAAIC,uCAAuB,iBAAiB,SAAS;EACrD,+CACE,4DAA2C,MAAM,CAAC,CACnD;GACD;GAGN,UACD,EAAE;AAIH,MAAa,qBAAqB,YAChC,OACA,YACD,EAAE"}

package/dist/cjs/components/action-bar/action-bar.style.cjs

@@ -0,0 +1,62 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/action-bar/action-bar.style.ts
+const actionBarStyle = require_config.defineComponentSlotStyle({
+	base: {
+		content: {
+			alignItems: "center",
+			bg: "bg.float",
+			borderColor: "border",
+			borderWidth: "1px",
+			boxShadow: "lg",
+			display: "flex",
+			gap: "2",
+			px: "2",
+			py: "2",
+			rounded: "l4"
+		},
+		root: {
+			position: "fixed",
+			zIndex: "burter"
+		},
+		separator: {
+			bg: "border.emphasized",
+			h: "8",
+			w: "px"
+		}
+	},
+	props: { placement: {
+		"end-center": { root: {
+			bottom: "lg",
+			left: "50%",
+			transform: "translateX(-50%)"
+		} },
+		"end-end": { root: {
+			bottom: "lg",
+			right: "lg"
+		} },
+		"end-start": { root: {
+			bottom: "lg",
+			left: "lg"
+		} },
+		"start-center": { root: {
+			left: "50%",
+			top: "lg",
+			transform: "translateX(-50%)"
+		} },
+		"start-end": { root: {
+			right: "lg",
+			top: "lg"
+		} },
+		"start-start": { root: {
+			left: "lg",
+			top: "lg"
+		} }
+	} },
+	defaultProps: { placement: "end-center" }
+});
+
+//#endregion
+exports.actionBarStyle = actionBarStyle;
+//# sourceMappingURL=action-bar.style.cjs.map

package/dist/cjs/components/action-bar/action-bar.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/action-bar/action-bar.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const actionBarStyle = defineComponentSlotStyle({\n  base: {\n    content: {\n      alignItems: \"center\",\n      bg: \"bg.float\",\n      borderColor: \"border\",\n      borderWidth: \"1px\",\n      boxShadow: \"lg\",\n      display: \"flex\",\n      gap: \"2\",\n      px: \"2\",\n      py: \"2\",\n      rounded: \"l4\",\n    },\n    root: {\n      position: \"fixed\",\n      zIndex: \"burter\",\n    },\n    separator: { bg: \"border.emphasized\", h: \"8\", w: \"px\" },\n  },\n\n  props: {\n    /**\n     * The placement of the action bar.\n     *\n     * @default 'end-center'\n     */\n    placement: {\n      \"end-center\": {\n        root: { bottom: \"lg\", left: \"50%\", transform: \"translateX(-50%)\" },\n      },\n      \"end-end\": {\n        root: { bottom: \"lg\", right: \"lg\" },\n      },\n      \"end-start\": {\n        root: { bottom: \"lg\", left: \"lg\" },\n      },\n      \"start-center\": {\n        root: { left: \"50%\", top: \"lg\", transform: \"translateX(-50%)\" },\n      },\n      \"start-end\": {\n        root: { right: \"lg\", top: \"lg\" },\n      },\n      \"start-start\": {\n        root: { left: \"lg\", top: \"lg\" },\n      },\n    },\n  },\n\n  defaultProps: {\n    placement: \"end-center\",\n  },\n})\n\nexport type ActionBarStyle = typeof actionBarStyle\n"],"mappings":";;;;AAEA,MAAa,iBAAiBA,wCAAyB;CACrD,MAAM;EACJ,SAAS;GACP,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,SAAS;GACV;EACD,MAAM;GACJ,UAAU;GACV,QAAQ;GACT;EACD,WAAW;GAAE,IAAI;GAAqB,GAAG;GAAK,GAAG;GAAM;EACxD;CAED,OAAO,EAML,WAAW;EACT,cAAc,EACZ,MAAM;GAAE,QAAQ;GAAM,MAAM;GAAO,WAAW;GAAoB,EACnE;EACD,WAAW,EACT,MAAM;GAAE,QAAQ;GAAM,OAAO;GAAM,EACpC;EACD,aAAa,EACX,MAAM;GAAE,QAAQ;GAAM,MAAM;GAAM,EACnC;EACD,gBAAgB,EACd,MAAM;GAAE,MAAM;GAAO,KAAK;GAAM,WAAW;GAAoB,EAChE;EACD,aAAa,EACX,MAAM;GAAE,OAAO;GAAM,KAAK;GAAM,EACjC;EACD,eAAe,EACb,MAAM;GAAE,MAAM;GAAM,KAAK;GAAM,EAChC;EACF,EACF;CAED,cAAc,EACZ,WAAW,cACZ;CACF,CAAC"}

package/dist/cjs/components/action-bar/index.cjs

@@ -0,0 +1,20 @@
+const require_action_bar_style = require('./action-bar.style.cjs');
+const require_use_action_bar = require('./use-action-bar.cjs');
+const require_action_bar = require('./action-bar.cjs');
+const require_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'ActionBar', {
+  enumerable: true,
+  get: function () {
+    return require_namespace.namespace_exports;
+  }
+});
+exports.ActionBarCloseTrigger = require_action_bar.ActionBarCloseTrigger;
+exports.ActionBarContent = require_action_bar.ActionBarContent;
+exports.ActionBarOpenTrigger = require_action_bar.ActionBarOpenTrigger;
+exports.ActionBarPropsContext = require_action_bar.ActionBarPropsContext;
+exports.ActionBarRoot = require_action_bar.ActionBarRoot;
+exports.ActionBarSeparator = require_action_bar.ActionBarSeparator;
+exports.actionBarStyle = require_action_bar_style.actionBarStyle;
+exports.useActionBar = require_use_action_bar.useActionBar;
+exports.useActionBarPropsContext = require_action_bar.useActionBarPropsContext;

package/dist/cjs/components/action-bar/namespace.cjs

@@ -0,0 +1,22 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_action_bar = require('./action-bar.cjs');
+
+//#region src/components/action-bar/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	CloseTrigger: () => require_action_bar.ActionBarCloseTrigger,
+	Content: () => require_action_bar.ActionBarContent,
+	OpenTrigger: () => require_action_bar.ActionBarOpenTrigger,
+	PropsContext: () => require_action_bar.ActionBarPropsContext,
+	Root: () => require_action_bar.ActionBarRoot,
+	Separator: () => require_action_bar.ActionBarSeparator,
+	usePropsContext: () => require_action_bar.useActionBarPropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/action-bar/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/action-bar/namespace.ts"],"sourcesContent":["export {\n  ActionBarCloseTrigger as CloseTrigger,\n  ActionBarContent as Content,\n  ActionBarOpenTrigger as OpenTrigger,\n  ActionBarPropsContext as PropsContext,\n  ActionBarRoot as Root,\n  ActionBarSeparator as Separator,\n  useActionBarPropsContext as usePropsContext,\n} from \"./action-bar\"\nexport type {\n  ActionBarCloseTriggerProps as CloseTriggerProps,\n  ActionBarContentProps as ContentProps,\n  ActionBarOpenTriggerProps as OpenTriggerProps,\n  ActionBarRootProps as RootProps,\n  ActionBarSeparatorProps as SeparatorProps,\n} from \"./action-bar\"\n"],"mappings":""}

package/dist/cjs/components/action-bar/use-action-bar.cjs

@@ -0,0 +1,70 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_dom = require('../../utils/dom.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_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_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+require('../../providers/i18n-provider/index.cjs');
+let react = require("react");
+
+//#region src/components/action-bar/use-action-bar.ts
+const useActionBar = ({ closeOnEsc = true, defaultOpen, open: openProp, onClose: onCloseProp, onOpen: onOpenProp, ...rest } = {}) => {
+	const { getDocument } = require_environment_provider.useEnvironment();
+	const { open, onClose, onOpen } = require_use_disclosure.useDisclosure({
+		defaultOpen,
+		open: openProp,
+		onClose: onCloseProp,
+		onOpen: onOpenProp
+	});
+	const [contentId] = require_dom.useIds();
+	const { t } = require_i18n_provider.useI18n("actionBar");
+	const onKeyDown = (0, react.useCallback)((ev) => {
+		if (ev.key !== "Escape") return;
+		ev.stopPropagation();
+		if (closeOnEsc) onClose();
+	}, [closeOnEsc, onClose]);
+	require_hooks_use_event_listener_index.useEventListener(getDocument(), "keydown", onKeyDown);
+	const getRootProps = (0, react.useCallback)((props = {}) => ({
+		...rest,
+		...props
+	}), [rest]);
+	const getOpenTriggerProps = (0, react.useCallback)((props = {}) => ({
+		"aria-controls": open ? contentId : void 0,
+		"aria-expanded": open,
+		"aria-haspopup": "dialog",
+		"aria-label": t("Open action bar"),
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onOpen)
+	}), [
+		contentId,
+		onOpen,
+		open,
+		t
+	]);
+	return {
+		open,
+		getCloseTriggerProps: (0, react.useCallback)((props = {}) => ({
+			"aria-label": t("Close action bar"),
+			...props,
+			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onClose)
+		}), [onClose, t]),
+		getContentProps: (0, react.useCallback)((props = {}) => ({
+			id: contentId,
+			role: "dialog",
+			...props
+		}), [contentId]),
+		getOpenTriggerProps,
+		getRootProps,
+		onClose,
+		onOpen
+	};
+};
+
+//#endregion
+exports.useActionBar = useActionBar;
+//# sourceMappingURL=use-action-bar.cjs.map

package/dist/cjs/components/action-bar/use-action-bar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-action-bar.cjs","names":["useEnvironment","useDisclosure","useIds","useI18n","getRootProps: PropGetter","getOpenTriggerProps: PropGetter<\"button\">"],"sources":["../../../../src/components/action-bar/use-action-bar.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport {\n  useDisclosure,\n  type UseDisclosureProps,\n} from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll, useIds } from \"../../utils\"\n\nexport interface UseActionBarProps\n  extends HTMLProps, Omit<UseDisclosureProps, \"timing\"> {\n  /**\n   * If `true`, the action bar will close when the `Esc` key is pressed.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n}\n\nexport const useActionBar = ({\n  closeOnEsc = true,\n  defaultOpen,\n  open: openProp,\n  onClose: onCloseProp,\n  onOpen: onOpenProp,\n  ...rest\n}: UseActionBarProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const [contentId] = useIds()\n  const { t } = useI18n(\"actionBar\")\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.stopPropagation()\n\n      if (closeOnEsc) onClose()\n    },\n    [closeOnEsc, onClose],\n  )\n\n  useEventListener(getDocument(), \"keydown\", onKeyDown)\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getOpenTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-controls\": open ? contentId : undefined,\n      \"aria-expanded\": open,\n      \"aria-haspopup\": \"dialog\",\n      \"aria-label\": t(\"Open action bar\"),\n      ...props,\n      onClick: handlerAll(props.onClick, onOpen),\n    }),\n    [contentId, onOpen, open, t],\n  )\n\n  const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-label\": t(\"Close action bar\"),\n      ...props,\n      onClick: handlerAll(props.onClick, onClose),\n    }),\n    [onClose, t],\n  )\n\n  const getContentProps: PropGetter<\"section\"> = useCallback(\n    (props = {}) => ({\n      id: contentId,\n      role: \"dialog\",\n      ...props,\n    }),\n    [contentId],\n  )\n\n  return {\n    open,\n    getCloseTriggerProps,\n    getContentProps,\n    getOpenTriggerProps,\n    getRootProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseActionBarReturn = ReturnType<typeof useActionBar>\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,gBAAgB,EAC3B,aAAa,MACb,aACA,MAAM,UACN,SAAS,aACT,QAAQ,YACR,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,EAAE,gBAAgBA,6CAAgB;CACxC,MAAM,EAAE,MAAM,SAAS,WAAWC,qCAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;EACT,CAAC;CACF,MAAM,CAAC,aAAaC,oBAAQ;CAC5B,MAAM,EAAE,MAAMC,8BAAQ,YAAY;CAElC,MAAM,oCACH,OAAsB;AACrB,MAAI,GAAG,QAAQ,SAAU;AAEzB,KAAG,iBAAiB;AAEpB,MAAI,WAAY,UAAS;IAE3B,CAAC,YAAY,QAAQ,CACtB;AAED,yDAAiB,aAAa,EAAE,WAAW,UAAU;CAErD,MAAMC,uCACH,QAAQ,EAAE,MAAM;EAAE,GAAG;EAAM,GAAG;EAAO,GACtC,CAAC,KAAK,CACP;CAED,MAAMC,8CACH,QAAQ,EAAE,MAAM;EACf,iBAAiB,OAAO,YAAY;EACpC,iBAAiB;EACjB,iBAAiB;EACjB,cAAc,EAAE,kBAAkB;EAClC,GAAG;EACH,2DAAoB,MAAM,SAAS,OAAO;EAC3C,GACD;EAAC;EAAW;EAAQ;EAAM;EAAE,CAC7B;AAoBD,QAAO;EACL;EACA,8CAnBC,QAAQ,EAAE,MAAM;GACf,cAAc,EAAE,mBAAmB;GACnC,GAAG;GACH,2DAAoB,MAAM,SAAS,QAAQ;GAC5C,GACD,CAAC,SAAS,EAAE,CACb;EAcC,yCAXC,QAAQ,EAAE,MAAM;GACf,IAAI;GACJ,MAAM;GACN,GAAG;GACJ,GACD,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACD"}

package/dist/cjs/components/alpha-slider/alpha-slider.cjs

@@ -4,8 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
-const require_alpha_slider_style = require('./alpha-slider.style.cjs');
 const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_alpha_slider_style = require('./alpha-slider.style.cjs');
 const require_color_swatch = require('../color-swatch/color-swatch.cjs');
 require('../color-swatch/index.cjs');
 const require_hue_slider = require('../hue-slider/hue-slider.cjs');

package/dist/cjs/components/autocomplete/autocomplete.cjs

@@ -10,10 +10,10 @@ const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs')
 const require_minus_icon = require('../icon/icons/minus-icon.cjs');
 const require_x_icon = require('../icon/icons/x-icon.cjs');
 require('../icon/index.cjs');
-const require_use_group = require('../group/use-group.cjs');
-require('../group/index.cjs');
 const require_popover = require('../popover/popover.cjs');
 require('../popover/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');

package/dist/cjs/components/color-picker/color-picker.cjs

@@ -6,12 +6,12 @@ const require_create_component = require('../../core/components/create-component
 require('../../core/index.cjs');
 const require_pipette_icon = require('../icon/icons/pipette-icon.cjs');
 require('../icon/index.cjs');
+const require_popover = require('../popover/popover.cjs');
+require('../popover/index.cjs');
 const require_color_swatch = require('../color-swatch/color-swatch.cjs');
 require('../color-swatch/index.cjs');
 const require_use_group = require('../group/use-group.cjs');
 require('../group/index.cjs');
-const require_popover = require('../popover/popover.cjs');
-require('../popover/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');

package/dist/cjs/components/color-swatch/color-swatch-group.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_color_swatch = require('./color-swatch.cjs');
 const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
 require('../../providers/i18n-provider/index.cjs');
+const require_color_swatch = require('./color-swatch.cjs');
 const require_grid = require('../grid/grid.cjs');
 require('../grid/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/cjs/components/date-picker/date-picker.cjs

@@ -9,10 +9,10 @@ require('../../core/index.cjs');
 const require_calendar_icon = require('../icon/icons/calendar-icon.cjs');
 const require_x_icon = require('../icon/icons/x-icon.cjs');
 require('../icon/index.cjs');
-const require_use_group = require('../group/use-group.cjs');
-require('../group/index.cjs');
 const require_popover = require('../popover/popover.cjs');
 require('../popover/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');

package/dist/cjs/components/drawer/drawer.cjs

@@ -8,9 +8,9 @@ const require_create_component = require('../../core/components/create-component
 require('../../core/index.cjs');
 const require_factory$1 = require('../motion/factory.cjs');
 require('../motion/index.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
 const require_portal = require('../portal/portal.cjs');
 require('../portal/index.cjs');
-const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
 const require_button = require('../button/button.cjs');
 require('../button/index.cjs');
 const require_close_button = require('../close-button/close-button.cjs');

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

@@ -6,9 +6,9 @@ const require_effect = require('../../utils/effect.cjs');
 const require_ref = require('../../utils/ref.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
+const require_hooks_use_focus_index = require('../../hooks/use-focus/index.cjs');
 const require_use_field_props = require('../field/use-field-props.cjs');
 require('../field/index.cjs');
-const require_hooks_use_focus_index = require('../../hooks/use-focus/index.cjs');
 let react = require("react");
 
 //#region src/components/editable/use-editable.ts

package/dist/cjs/components/menu/menu.cjs

@@ -273,7 +273,7 @@ const MenuOptionGroup = withContext(({ type: typeProp, defaultValue, value: valu
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuGroup, { ...rest })
 	});
 }, {
-	name: "optionGroup",
+	name: "OptionGroup",
 	slot: ["group", "option"]
 })();
 const MenuItem = withContext(({ children, ...rest }) => {
@@ -296,7 +296,7 @@ const MenuOptionItem = withContext(({ children, icon, ...rest }) => {
 		}), children]
 	});
 }, {
-	name: "optionItem",
+	name: "OptionItem",
 	slot: ["item", "option"]
 })();
 const MenuIndicator = withContext("div", "indicator")();

package/dist/cjs/components/menu/menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.cjs","names":["createSlotComponent","menuStyle","MenuRoot: FC<MenuRootProps>","usePopoverProps","useMenu","MenuDescendantsContext","MenuContext","MainMenuContext","styled","useMenuContext","rest","Fragment","items","index","useMenuGroupContext","useMenuGroup","MenuGroupContext","useMenuOptionGroup","MenuOptionGroupContext","useMenuItem","ChevronRightIcon","useMenuOptionItem","CircleSmallIcon","CheckIcon"],"sources":["../../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n  Direction,\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { MenuStyle } from \"./menu.style\"\nimport type {\n  MenuOptionGroupType,\n  MenuOptionGroupValue,\n  UseMenuGroupProps,\n  UseMenuItemProps,\n  UseMenuOptionGroupProps,\n  UseMenuOptionItemProps,\n  UseMenuProps,\n  UseMenuReturn,\n} from \"./use-menu\"\nimport { Fragment, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { CheckIcon, ChevronRightIcon, CircleSmallIcon } from \"../icon\"\nimport { Popover, usePopoverProps } from \"../popover\"\nimport { menuStyle } from \"./menu.style\"\nimport {\n  MainMenuContext,\n  MenuContext,\n  MenuDescendantsContext,\n  MenuGroupContext,\n  MenuOptionGroupContext,\n  useMenu,\n  useMenuContext,\n  useMenuGroup,\n  useMenuGroupContext,\n  useMenuItem,\n  useMenuOptionGroup,\n  useMenuOptionItem,\n} from \"./use-menu\"\n\ninterface MenuSharedItem {\n  label?: ReactNode\n}\n\ninterface MenuItemWithValue extends MenuSharedItem, MenuItemProps {}\n\ninterface MenuOptionItem extends MenuSharedItem, MenuOptionItemProps {}\n\ninterface MenuItemWithSeparator extends MenuSeparatorProps {\n  type: \"separator\"\n}\n\ninterface MenuItemWithRadioGroup<Y extends string = string>\n  extends\n    Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n    MenuOptionGroupProps<\"radio\", Y> {\n  type: \"radio\"\n  items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithCheckboxGroup<Y extends string[] = string[]>\n  extends\n    Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n    MenuOptionGroupProps<\"checkbox\", Y> {\n  type: \"checkbox\"\n  items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithItems extends MenuSharedItem, MenuGroupProps {\n  hasEndSeparator?: boolean\n  hasSeparator?: boolean\n  hasStartSeparator?: boolean\n  items?: MenuItemWithValue[]\n  labelProps?: MenuLabelProps\n}\n\nexport type MenuItem =\n  | MenuItemWithCheckboxGroup\n  | MenuItemWithItems\n  | MenuItemWithRadioGroup\n  | MenuItemWithSeparator\n  | MenuItemWithValue\n\ninterface ComponentContext extends Pick<\n  UseMenuReturn,\n  | \"getContentProps\"\n  | \"getContextTriggerProps\"\n  | \"getSeparatorProps\"\n  | \"getTriggerProps\"\n> {}\n\nexport interface MenuRootProps\n  extends\n    UseMenuProps,\n    Omit<\n      WithoutThemeProps<Popover.RootProps, MenuStyle>,\n      \"autoFocus\" | \"modal\" | \"updateRef\" | \"withCloseButton\"\n    >,\n    ThemeProps<MenuStyle> {\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Direction\n}\n\nconst {\n  ComponentContext,\n  PropsContext: MenuPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: useMenuPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<MenuRootProps, MenuStyle, ComponentContext>(\n  \"menu\",\n  menuStyle,\n)\n\nexport { MenuPropsContext, useMenuPropsContext }\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see https://yamada-ui.com/docs/components/menu\n */\nexport const MenuRoot: FC<MenuRootProps> = (props) => {\n  const [styleContext, mergedProps] = useRootComponentProps(props)\n  const [\n    { animationScheme, initialFocusRef, offset, placement, ...popoverProps },\n    { children, disabled, ...rest },\n  ] = usePopoverProps(mergedProps, [\n    \"disabled\",\n    \"open\",\n    \"defaultOpen\",\n    \"onOpen\",\n    \"onClose\",\n  ])\n  const {\n    closeOnSelect,\n    descendants,\n    open,\n    subMenu,\n    subMenuDirection,\n    updateRef,\n    getContentProps,\n    getContextTriggerProps,\n    getSeparatorProps,\n    getTriggerProps,\n    onActiveDescendant,\n    onClose,\n    onCloseRef,\n    onCloseSubMenu,\n    onOpen,\n    onSelect,\n  } = useMenu({ disabled, ...rest })\n  const mergedPopoverProps = useMemo<Popover.RootProps>(\n    () => ({\n      ...popoverProps,\n      animationScheme:\n        animationScheme ?? (subMenu ? \"inline-start\" : \"block-start\"),\n      autoFocus: !!initialFocusRef,\n      disabled,\n      initialFocusRef,\n      offset: offset ?? (subMenu ? [0, 0] : undefined),\n      open,\n      placement:\n        placement ?? (subMenu ? `center-${subMenuDirection}` : \"end-start\"),\n      updateRef,\n      onClose,\n      onOpen,\n    }),\n    [\n      animationScheme,\n      disabled,\n      initialFocusRef,\n      offset,\n      onClose,\n      onOpen,\n      open,\n      placement,\n      popoverProps,\n      subMenu,\n      subMenuDirection,\n      updateRef,\n    ],\n  )\n  const menuContext = useMemo(\n    () => ({\n      subMenu,\n      subMenuDirection,\n      onActiveDescendant,\n      onClose,\n      onCloseSubMenu,\n      onOpen,\n      onSelect,\n    }),\n    [\n      onClose,\n      onOpen,\n      onSelect,\n      onActiveDescendant,\n      subMenu,\n      subMenuDirection,\n      onCloseSubMenu,\n    ],\n  )\n  const mainMenuContext = useMemo(\n    () => ({\n      closeOnSelect,\n      descendants,\n      onActiveDescendant,\n      onCloseRef,\n      onSelect,\n    }),\n    [closeOnSelect, descendants, onActiveDescendant, onCloseRef, onSelect],\n  )\n  const componentContext = useMemo(\n    () => ({\n      getContentProps,\n      getContextTriggerProps,\n      getSeparatorProps,\n      getTriggerProps,\n    }),\n    [\n      getContentProps,\n      getContextTriggerProps,\n      getSeparatorProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <MenuDescendantsContext value={descendants}>\n        <MenuContext value={menuContext}>\n          <MainMenuContext value={mainMenuContext}>\n            <ComponentContext value={componentContext}>\n              <Popover.Root {...mergedPopoverProps}>{children}</Popover.Root>\n            </ComponentContext>\n          </MainMenuContext>\n        </MenuContext>\n      </MenuDescendantsContext>\n    </StyleContext>\n  )\n}\n\nexport interface MenuTriggerProps extends Popover.TriggerProps {}\n\nexport const MenuTrigger = withContext<\"button\", MenuTriggerProps>(\n  Popover.Trigger,\n  \"trigger\",\n)(undefined, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return cast<HTMLProps<\"button\">>(getTriggerProps(cast<HTMLProps>(props)))\n})\n\ninterface Rect {\n  left: number\n  top: number\n}\n\nexport interface MenuContextTriggerProps extends HTMLProps {}\n\nexport const MenuContextTrigger = withContext<\"div\", MenuContextTriggerProps>(\n  ({ children, onContextMenu, ...rest }) => {\n    const [rect, setRect] = useState<Rect>({\n      left: 0,\n      top: 0,\n    })\n    const { getContextTriggerProps } = useComponentContext()\n\n    return (\n      <>\n        <MenuAnchor>\n          <styled.div style={{ position: \"fixed\", ...rect }} />\n        </MenuAnchor>\n\n        <styled.div\n          asChild\n          {...getContextTriggerProps({\n            onContextMenu: handlerAll(onContextMenu, (ev) => {\n              setRect({ left: ev.clientX, top: ev.clientY })\n            }),\n            ...rest,\n          })}\n        >\n          {children}\n        </styled.div>\n      </>\n    )\n  },\n  \"contextTrigger\",\n)()\n\nexport interface MenuAnchorProps extends Popover.AnchorProps {}\n\nexport const MenuAnchor = withContext<\"div\", MenuAnchorProps>(\n  Popover.Anchor,\n  \"anchor\",\n)()\n\nexport interface MenuContentProps extends Popover.ContentProps {\n  /**\n   * The footer of the menu.\n   */\n  footer?: ReactNode\n  /**\n   * The header of the menu.\n   */\n  header?: ReactNode\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: MenuItem[]\n  /**\n   * Props for the footer component.\n   */\n  footerProps?: MenuFooterProps\n  /**\n   * Props for the header component.\n   */\n  headerProps?: MenuHeaderProps\n}\n\nexport const MenuContent = withContext<\"div\", MenuContentProps>(\n  Popover.Content,\n  \"content\",\n)(\n  undefined,\n  ({\n    children,\n    footer,\n    header,\n    items = [],\n    footerProps,\n    headerProps,\n    portalProps,\n    ...rest\n  }) => {\n    const { subMenu } = useMenuContext()\n    const { getContentProps } = useComponentContext()\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          {header ? <MenuHeader {...headerProps}>{header}</MenuHeader> : null}\n\n          {items.map((props, index) => {\n            if (\"type\" in props) {\n              if (props.type === \"radio\") {\n                const {\n                  type,\n                  hasSeparator = true,\n                  hasEndSeparator = hasSeparator,\n                  hasStartSeparator = hasSeparator,\n                  items = [],\n                  ...rest\n                } = props\n\n                return (\n                  <Fragment key={index}>\n                    {hasStartSeparator ? <MenuSeparator /> : null}\n\n                    <MenuOptionGroup type={type} {...rest}>\n                      {items.map(({ label, ...rest }, index) => (\n                        <MenuOptionItem key={index} {...rest}>\n                          {label}\n                        </MenuOptionItem>\n                      ))}\n                    </MenuOptionGroup>\n\n                    {hasEndSeparator ? <MenuSeparator /> : null}\n                  </Fragment>\n                )\n              } else if (props.type === \"checkbox\") {\n                const {\n                  type,\n                  hasSeparator = true,\n                  hasEndSeparator = hasSeparator,\n                  hasStartSeparator = hasSeparator,\n                  items = [],\n                  ...rest\n                } = props\n\n                return (\n                  <Fragment key={index}>\n                    {hasStartSeparator ? <MenuSeparator /> : null}\n\n                    <MenuOptionGroup type={type} {...rest}>\n                      {items.map(({ label, ...rest }, index) => (\n                        <MenuOptionItem key={index} {...rest}>\n                          {label}\n                        </MenuOptionItem>\n                      ))}\n                    </MenuOptionGroup>\n\n                    {hasEndSeparator ? <MenuSeparator /> : null}\n                  </Fragment>\n                )\n              } else {\n                return <MenuSeparator key={index} />\n              }\n            } else if (\"items\" in props) {\n              const {\n                hasSeparator = true,\n                hasEndSeparator = hasSeparator,\n                hasStartSeparator = hasSeparator,\n                items = [],\n                ...rest\n              } = props\n\n              return (\n                <Fragment key={index}>\n                  {hasStartSeparator ? <MenuSeparator /> : null}\n\n                  <MenuGroup {...rest}>\n                    {items.map(({ label, ...rest }, index) => (\n                      <MenuItem key={index} {...rest}>\n                        {label}\n                      </MenuItem>\n                    ))}\n                  </MenuGroup>\n\n                  {hasEndSeparator ? <MenuSeparator /> : null}\n                </Fragment>\n              )\n            } else if (\"value\" in props) {\n              const { label, ...rest } = props\n\n              return (\n                <MenuItem key={index} {...rest}>\n                  {label}\n                </MenuItem>\n              )\n            }\n          })}\n\n          {footer ? <MenuFooter {...footerProps}>{footer}</MenuFooter> : null}\n        </>\n      )\n    }, [children, footer, footerProps, header, headerProps, items])\n\n    return {\n      ...getContentProps(\n        cast<HTMLProps>({ ...rest, children: computedChildren }),\n      ),\n      portalProps: subMenu ? { ...portalProps, disabled: true } : portalProps,\n    }\n  },\n)\n\nexport interface MenuHeaderProps extends HTMLStyledProps {}\n\nexport const MenuHeader = withContext<\"div\", MenuHeaderProps>(\n  \"div\",\n  \"header\",\n)({ \"data-header\": \"\" })\n\nexport interface MenuFooterProps extends HTMLStyledProps {}\n\nexport const MenuFooter = withContext<\"div\", MenuFooterProps>(\n  \"div\",\n  \"footer\",\n)({ \"data-footer\": \"\" })\n\nexport interface MenuLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const MenuLabel = withContext<\"span\", MenuLabelProps>(\"span\", \"label\")(\n  undefined,\n  (props) => {\n    const { getLabelProps } = useMenuGroupContext()\n\n    return getLabelProps(props)\n  },\n)\n\nexport interface MenuGroupProps extends UseMenuGroupProps, HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: MenuLabelProps\n}\n\nexport const MenuGroup = withContext<\"div\", MenuGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { getGroupProps, getLabelProps } = useMenuGroup(rest)\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <MenuGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? <MenuLabel {...labelProps}>{label}</MenuLabel> : null}\n          {children}\n        </styled.div>\n      </MenuGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface MenuOptionGroupProps<\n  Y extends MenuOptionGroupType = \"checkbox\",\n  M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n>\n  extends\n    UseMenuOptionGroupProps<Y, M>,\n    Omit<MenuGroupProps, \"defaultValue\" | \"onChange\"> {}\n\nexport const MenuOptionGroup = withContext<\"div\", MenuOptionGroupProps>(\n  ({\n    type: typeProp,\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n    ...rest\n  }) => {\n    const { type, value, onChange } = useMenuOptionGroup({\n      type: typeProp,\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeProp,\n    })\n    const context = useMemo(\n      () => ({ type, value, onChange }),\n      [type, value, onChange],\n    )\n\n    return (\n      <MenuOptionGroupContext value={context}>\n        <MenuGroup {...rest} />\n      </MenuOptionGroupContext>\n    )\n  },\n  { name: \"optionGroup\", slot: [\"group\", \"option\"] },\n)() as GenericsComponent<{\n  <\n    Y extends MenuOptionGroupType = \"checkbox\",\n    M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n  >(\n    props: MenuOptionGroupProps<Y, M>,\n  ): ReactElement\n}>\n\nexport interface MenuItemProps extends HTMLStyledProps, UseMenuItemProps {}\n\nexport const MenuItem = withContext<\"div\", MenuItemProps>(\n  ({ children, ...rest }) => {\n    const { subMenuTrigger, getItemProps } = useMenuItem(rest)\n\n    return (\n      <styled.div {...getItemProps()}>\n        {children}\n\n        {subMenuTrigger ? (\n          <MenuIndicator as={ChevronRightIcon} ms=\"auto\" />\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface MenuOptionItemProps\n  extends HTMLStyledProps, UseMenuOptionItemProps {\n  /**\n   * The icon to be used in the menu option item.\n   */\n  icon?: ReactNode\n}\n\nexport const MenuOptionItem = withContext<\"div\", MenuOptionItemProps>(\n  ({ children, icon, ...rest }) => {\n    const { type, getIndicatorProps, getOptionItemProps } =\n      useMenuOptionItem(rest)\n\n    return (\n      <styled.div {...getOptionItemProps()}>\n        <MenuIndicator {...getIndicatorProps()}>\n          {icon ||\n            (type === \"radio\" ? (\n              <CircleSmallIcon fill=\"currentColor\" />\n            ) : (\n              <CheckIcon />\n            ))}\n        </MenuIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  { name: \"optionItem\", slot: [\"item\", \"option\"] },\n)()\n\nexport interface MenuIndicatorProps extends HTMLStyledProps {}\n\nexport const MenuIndicator = withContext<\"div\", MenuIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\nexport interface MenuCommandProps extends HTMLStyledProps<\"kbd\"> {}\n\nexport const MenuCommand = withContext<\"kbd\", MenuCommandProps>(\n  \"kbd\",\n  \"command\",\n)()\n\nexport interface MenuSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const MenuSeparator = withContext<\"hr\", MenuSeparatorProps>(\n  \"hr\",\n  \"separator\",\n)(undefined, (props) => {\n  const { getSeparatorProps } = useComponentContext()\n\n  return getSeparatorProps(props)\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8GA,MAAM,EACJ,kBACA,cAAc,kBACd,cACA,qBACA,iBAAiB,qBACjB,aACA,0BACEA,6CACF,QACAC,6BACD;;;;;;AASD,MAAaC,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,GAAG,UACvBC,oCAAgB,aAAa;EAC/B;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,EACJ,eACA,aACA,MACA,SACA,kBACA,WACA,iBACA,wBACA,mBACA,iBACA,oBACA,SACA,YACA,gBACA,QACA,aACEC,yBAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,+CACG;EACL,GAAG;EACH,iBACE,oBAAoB,UAAU,iBAAiB;EACjD,WAAW,CAAC,CAAC;EACb;EACA;EACA,QAAQ,WAAW,UAAU,CAAC,GAAG,EAAE,GAAG;EACtC;EACA,WACE,cAAc,UAAU,UAAU,qBAAqB;EACzD;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AA8CD,QACE,2CAAC;EAAa,OAAO;YACnB,2CAACC;GAAuB,OAAO;aAC7B,2CAACC;IAAY,iCA/CV;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cA8BO,2CAACC;KAAgB,iCA5BhB;MACL;MACA;MACA;MACA;MACA;MACD,GACD;MAAC;MAAe;MAAa;MAAoB;MAAY;MAAS,CACvE;eAqBS,2CAAC;MAAiB,iCAnBnB;OACL;OACA;OACA;OACA;OACD,GACD;OACE;OACA;OACA;OACA;OACD,CACF;gBAQW;OAAc,GAAI;OAAqB;QAAwB;OAC9C;MACH;KACN;IACS;GACZ;;AAMnB,MAAa,cAAc,4CAEzB,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,oDAAiC,4DAAgC,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"}
+{"version":3,"file":"menu.cjs","names":["createSlotComponent","menuStyle","MenuRoot: FC<MenuRootProps>","usePopoverProps","useMenu","MenuDescendantsContext","MenuContext","MainMenuContext","styled","useMenuContext","rest","Fragment","items","index","useMenuGroupContext","useMenuGroup","MenuGroupContext","useMenuOptionGroup","MenuOptionGroupContext","useMenuItem","ChevronRightIcon","useMenuOptionItem","CircleSmallIcon","CheckIcon"],"sources":["../../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n  Direction,\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { MenuStyle } from \"./menu.style\"\nimport type {\n  MenuOptionGroupType,\n  MenuOptionGroupValue,\n  UseMenuGroupProps,\n  UseMenuItemProps,\n  UseMenuOptionGroupProps,\n  UseMenuOptionItemProps,\n  UseMenuProps,\n  UseMenuReturn,\n} from \"./use-menu\"\nimport { Fragment, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { CheckIcon, ChevronRightIcon, CircleSmallIcon } from \"../icon\"\nimport { Popover, usePopoverProps } from \"../popover\"\nimport { menuStyle } from \"./menu.style\"\nimport {\n  MainMenuContext,\n  MenuContext,\n  MenuDescendantsContext,\n  MenuGroupContext,\n  MenuOptionGroupContext,\n  useMenu,\n  useMenuContext,\n  useMenuGroup,\n  useMenuGroupContext,\n  useMenuItem,\n  useMenuOptionGroup,\n  useMenuOptionItem,\n} from \"./use-menu\"\n\ninterface MenuSharedItem {\n  label?: ReactNode\n}\n\ninterface MenuItemWithValue extends MenuSharedItem, MenuItemProps {}\n\ninterface MenuOptionItem extends MenuSharedItem, MenuOptionItemProps {}\n\ninterface MenuItemWithSeparator extends MenuSeparatorProps {\n  type: \"separator\"\n}\n\ninterface MenuItemWithRadioGroup<Y extends string = string>\n  extends\n    Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n    MenuOptionGroupProps<\"radio\", Y> {\n  type: \"radio\"\n  items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithCheckboxGroup<Y extends string[] = string[]>\n  extends\n    Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n    MenuOptionGroupProps<\"checkbox\", Y> {\n  type: \"checkbox\"\n  items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithItems extends MenuSharedItem, MenuGroupProps {\n  hasEndSeparator?: boolean\n  hasSeparator?: boolean\n  hasStartSeparator?: boolean\n  items?: MenuItemWithValue[]\n  labelProps?: MenuLabelProps\n}\n\nexport type MenuItem =\n  | MenuItemWithCheckboxGroup\n  | MenuItemWithItems\n  | MenuItemWithRadioGroup\n  | MenuItemWithSeparator\n  | MenuItemWithValue\n\ninterface ComponentContext extends Pick<\n  UseMenuReturn,\n  | \"getContentProps\"\n  | \"getContextTriggerProps\"\n  | \"getSeparatorProps\"\n  | \"getTriggerProps\"\n> {}\n\nexport interface MenuRootProps\n  extends\n    UseMenuProps,\n    Omit<\n      WithoutThemeProps<Popover.RootProps, MenuStyle>,\n      \"autoFocus\" | \"modal\" | \"updateRef\" | \"withCloseButton\"\n    >,\n    ThemeProps<MenuStyle> {\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Direction\n}\n\nconst {\n  ComponentContext,\n  PropsContext: MenuPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: useMenuPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<MenuRootProps, MenuStyle, ComponentContext>(\n  \"menu\",\n  menuStyle,\n)\n\nexport { MenuPropsContext, useMenuPropsContext }\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see https://yamada-ui.com/docs/components/menu\n */\nexport const MenuRoot: FC<MenuRootProps> = (props) => {\n  const [styleContext, mergedProps] = useRootComponentProps(props)\n  const [\n    { animationScheme, initialFocusRef, offset, placement, ...popoverProps },\n    { children, disabled, ...rest },\n  ] = usePopoverProps(mergedProps, [\n    \"disabled\",\n    \"open\",\n    \"defaultOpen\",\n    \"onOpen\",\n    \"onClose\",\n  ])\n  const {\n    closeOnSelect,\n    descendants,\n    open,\n    subMenu,\n    subMenuDirection,\n    updateRef,\n    getContentProps,\n    getContextTriggerProps,\n    getSeparatorProps,\n    getTriggerProps,\n    onActiveDescendant,\n    onClose,\n    onCloseRef,\n    onCloseSubMenu,\n    onOpen,\n    onSelect,\n  } = useMenu({ disabled, ...rest })\n  const mergedPopoverProps = useMemo<Popover.RootProps>(\n    () => ({\n      ...popoverProps,\n      animationScheme:\n        animationScheme ?? (subMenu ? \"inline-start\" : \"block-start\"),\n      autoFocus: !!initialFocusRef,\n      disabled,\n      initialFocusRef,\n      offset: offset ?? (subMenu ? [0, 0] : undefined),\n      open,\n      placement:\n        placement ?? (subMenu ? `center-${subMenuDirection}` : \"end-start\"),\n      updateRef,\n      onClose,\n      onOpen,\n    }),\n    [\n      animationScheme,\n      disabled,\n      initialFocusRef,\n      offset,\n      onClose,\n      onOpen,\n      open,\n      placement,\n      popoverProps,\n      subMenu,\n      subMenuDirection,\n      updateRef,\n    ],\n  )\n  const menuContext = useMemo(\n    () => ({\n      subMenu,\n      subMenuDirection,\n      onActiveDescendant,\n      onClose,\n      onCloseSubMenu,\n      onOpen,\n      onSelect,\n    }),\n    [\n      onClose,\n      onOpen,\n      onSelect,\n      onActiveDescendant,\n      subMenu,\n      subMenuDirection,\n      onCloseSubMenu,\n    ],\n  )\n  const mainMenuContext = useMemo(\n    () => ({\n      closeOnSelect,\n      descendants,\n      onActiveDescendant,\n      onCloseRef,\n      onSelect,\n    }),\n    [closeOnSelect, descendants, onActiveDescendant, onCloseRef, onSelect],\n  )\n  const componentContext = useMemo(\n    () => ({\n      getContentProps,\n      getContextTriggerProps,\n      getSeparatorProps,\n      getTriggerProps,\n    }),\n    [\n      getContentProps,\n      getContextTriggerProps,\n      getSeparatorProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <MenuDescendantsContext value={descendants}>\n        <MenuContext value={menuContext}>\n          <MainMenuContext value={mainMenuContext}>\n            <ComponentContext value={componentContext}>\n              <Popover.Root {...mergedPopoverProps}>{children}</Popover.Root>\n            </ComponentContext>\n          </MainMenuContext>\n        </MenuContext>\n      </MenuDescendantsContext>\n    </StyleContext>\n  )\n}\n\nexport interface MenuTriggerProps extends Popover.TriggerProps {}\n\nexport const MenuTrigger = withContext<\"button\", MenuTriggerProps>(\n  Popover.Trigger,\n  \"trigger\",\n)(undefined, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return cast<HTMLProps<\"button\">>(getTriggerProps(cast<HTMLProps>(props)))\n})\n\ninterface Rect {\n  left: number\n  top: number\n}\n\nexport interface MenuContextTriggerProps extends HTMLProps {}\n\nexport const MenuContextTrigger = withContext<\"div\", MenuContextTriggerProps>(\n  ({ children, onContextMenu, ...rest }) => {\n    const [rect, setRect] = useState<Rect>({\n      left: 0,\n      top: 0,\n    })\n    const { getContextTriggerProps } = useComponentContext()\n\n    return (\n      <>\n        <MenuAnchor>\n          <styled.div style={{ position: \"fixed\", ...rect }} />\n        </MenuAnchor>\n\n        <styled.div\n          asChild\n          {...getContextTriggerProps({\n            onContextMenu: handlerAll(onContextMenu, (ev) => {\n              setRect({ left: ev.clientX, top: ev.clientY })\n            }),\n            ...rest,\n          })}\n        >\n          {children}\n        </styled.div>\n      </>\n    )\n  },\n  \"contextTrigger\",\n)()\n\nexport interface MenuAnchorProps extends Popover.AnchorProps {}\n\nexport const MenuAnchor = withContext<\"div\", MenuAnchorProps>(\n  Popover.Anchor,\n  \"anchor\",\n)()\n\nexport interface MenuContentProps extends Popover.ContentProps {\n  /**\n   * The footer of the menu.\n   */\n  footer?: ReactNode\n  /**\n   * The header of the menu.\n   */\n  header?: ReactNode\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: MenuItem[]\n  /**\n   * Props for the footer component.\n   */\n  footerProps?: MenuFooterProps\n  /**\n   * Props for the header component.\n   */\n  headerProps?: MenuHeaderProps\n}\n\nexport const MenuContent = withContext<\"div\", MenuContentProps>(\n  Popover.Content,\n  \"content\",\n)(\n  undefined,\n  ({\n    children,\n    footer,\n    header,\n    items = [],\n    footerProps,\n    headerProps,\n    portalProps,\n    ...rest\n  }) => {\n    const { subMenu } = useMenuContext()\n    const { getContentProps } = useComponentContext()\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          {header ? <MenuHeader {...headerProps}>{header}</MenuHeader> : null}\n\n          {items.map((props, index) => {\n            if (\"type\" in props) {\n              if (props.type === \"radio\") {\n                const {\n                  type,\n                  hasSeparator = true,\n                  hasEndSeparator = hasSeparator,\n                  hasStartSeparator = hasSeparator,\n                  items = [],\n                  ...rest\n                } = props\n\n                return (\n                  <Fragment key={index}>\n                    {hasStartSeparator ? <MenuSeparator /> : null}\n\n                    <MenuOptionGroup type={type} {...rest}>\n                      {items.map(({ label, ...rest }, index) => (\n                        <MenuOptionItem key={index} {...rest}>\n                          {label}\n                        </MenuOptionItem>\n                      ))}\n                    </MenuOptionGroup>\n\n                    {hasEndSeparator ? <MenuSeparator /> : null}\n                  </Fragment>\n                )\n              } else if (props.type === \"checkbox\") {\n                const {\n                  type,\n                  hasSeparator = true,\n                  hasEndSeparator = hasSeparator,\n                  hasStartSeparator = hasSeparator,\n                  items = [],\n                  ...rest\n                } = props\n\n                return (\n                  <Fragment key={index}>\n                    {hasStartSeparator ? <MenuSeparator /> : null}\n\n                    <MenuOptionGroup type={type} {...rest}>\n                      {items.map(({ label, ...rest }, index) => (\n                        <MenuOptionItem key={index} {...rest}>\n                          {label}\n                        </MenuOptionItem>\n                      ))}\n                    </MenuOptionGroup>\n\n                    {hasEndSeparator ? <MenuSeparator /> : null}\n                  </Fragment>\n                )\n              } else {\n                return <MenuSeparator key={index} />\n              }\n            } else if (\"items\" in props) {\n              const {\n                hasSeparator = true,\n                hasEndSeparator = hasSeparator,\n                hasStartSeparator = hasSeparator,\n                items = [],\n                ...rest\n              } = props\n\n              return (\n                <Fragment key={index}>\n                  {hasStartSeparator ? <MenuSeparator /> : null}\n\n                  <MenuGroup {...rest}>\n                    {items.map(({ label, ...rest }, index) => (\n                      <MenuItem key={index} {...rest}>\n                        {label}\n                      </MenuItem>\n                    ))}\n                  </MenuGroup>\n\n                  {hasEndSeparator ? <MenuSeparator /> : null}\n                </Fragment>\n              )\n            } else if (\"value\" in props) {\n              const { label, ...rest } = props\n\n              return (\n                <MenuItem key={index} {...rest}>\n                  {label}\n                </MenuItem>\n              )\n            }\n          })}\n\n          {footer ? <MenuFooter {...footerProps}>{footer}</MenuFooter> : null}\n        </>\n      )\n    }, [children, footer, footerProps, header, headerProps, items])\n\n    return {\n      ...getContentProps(\n        cast<HTMLProps>({ ...rest, children: computedChildren }),\n      ),\n      portalProps: subMenu ? { ...portalProps, disabled: true } : portalProps,\n    }\n  },\n)\n\nexport interface MenuHeaderProps extends HTMLStyledProps {}\n\nexport const MenuHeader = withContext<\"div\", MenuHeaderProps>(\n  \"div\",\n  \"header\",\n)({ \"data-header\": \"\" })\n\nexport interface MenuFooterProps extends HTMLStyledProps {}\n\nexport const MenuFooter = withContext<\"div\", MenuFooterProps>(\n  \"div\",\n  \"footer\",\n)({ \"data-footer\": \"\" })\n\nexport interface MenuLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const MenuLabel = withContext<\"span\", MenuLabelProps>(\"span\", \"label\")(\n  undefined,\n  (props) => {\n    const { getLabelProps } = useMenuGroupContext()\n\n    return getLabelProps(props)\n  },\n)\n\nexport interface MenuGroupProps extends UseMenuGroupProps, HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: MenuLabelProps\n}\n\nexport const MenuGroup = withContext<\"div\", MenuGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { getGroupProps, getLabelProps } = useMenuGroup(rest)\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <MenuGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? <MenuLabel {...labelProps}>{label}</MenuLabel> : null}\n          {children}\n        </styled.div>\n      </MenuGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface MenuOptionGroupProps<\n  Y extends MenuOptionGroupType = \"checkbox\",\n  M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n>\n  extends\n    UseMenuOptionGroupProps<Y, M>,\n    Omit<MenuGroupProps, \"defaultValue\" | \"onChange\"> {}\n\nexport const MenuOptionGroup = withContext<\"div\", MenuOptionGroupProps>(\n  ({\n    type: typeProp,\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n    ...rest\n  }) => {\n    const { type, value, onChange } = useMenuOptionGroup({\n      type: typeProp,\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeProp,\n    })\n    const context = useMemo(\n      () => ({ type, value, onChange }),\n      [type, value, onChange],\n    )\n\n    return (\n      <MenuOptionGroupContext value={context}>\n        <MenuGroup {...rest} />\n      </MenuOptionGroupContext>\n    )\n  },\n  { name: \"OptionGroup\", slot: [\"group\", \"option\"] },\n)() as GenericsComponent<{\n  <\n    Y extends MenuOptionGroupType = \"checkbox\",\n    M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n  >(\n    props: MenuOptionGroupProps<Y, M>,\n  ): ReactElement\n}>\n\nexport interface MenuItemProps extends HTMLStyledProps, UseMenuItemProps {}\n\nexport const MenuItem = withContext<\"div\", MenuItemProps>(\n  ({ children, ...rest }) => {\n    const { subMenuTrigger, getItemProps } = useMenuItem(rest)\n\n    return (\n      <styled.div {...getItemProps()}>\n        {children}\n\n        {subMenuTrigger ? (\n          <MenuIndicator as={ChevronRightIcon} ms=\"auto\" />\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface MenuOptionItemProps\n  extends HTMLStyledProps, UseMenuOptionItemProps {\n  /**\n   * The icon to be used in the menu option item.\n   */\n  icon?: ReactNode\n}\n\nexport const MenuOptionItem = withContext<\"div\", MenuOptionItemProps>(\n  ({ children, icon, ...rest }) => {\n    const { type, getIndicatorProps, getOptionItemProps } =\n      useMenuOptionItem(rest)\n\n    return (\n      <styled.div {...getOptionItemProps()}>\n        <MenuIndicator {...getIndicatorProps()}>\n          {icon ||\n            (type === \"radio\" ? (\n              <CircleSmallIcon fill=\"currentColor\" />\n            ) : (\n              <CheckIcon />\n            ))}\n        </MenuIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  { name: \"OptionItem\", slot: [\"item\", \"option\"] },\n)()\n\nexport interface MenuIndicatorProps extends HTMLStyledProps {}\n\nexport const MenuIndicator = withContext<\"div\", MenuIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\nexport interface MenuCommandProps extends HTMLStyledProps<\"kbd\"> {}\n\nexport const MenuCommand = withContext<\"kbd\", MenuCommandProps>(\n  \"kbd\",\n  \"command\",\n)()\n\nexport interface MenuSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const MenuSeparator = withContext<\"hr\", MenuSeparatorProps>(\n  \"hr\",\n  \"separator\",\n)(undefined, (props) => {\n  const { getSeparatorProps } = useComponentContext()\n\n  return getSeparatorProps(props)\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8GA,MAAM,EACJ,kBACA,cAAc,kBACd,cACA,qBACA,iBAAiB,qBACjB,aACA,0BACEA,6CACF,QACAC,6BACD;;;;;;AASD,MAAaC,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,GAAG,UACvBC,oCAAgB,aAAa;EAC/B;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,EACJ,eACA,aACA,MACA,SACA,kBACA,WACA,iBACA,wBACA,mBACA,iBACA,oBACA,SACA,YACA,gBACA,QACA,aACEC,yBAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,+CACG;EACL,GAAG;EACH,iBACE,oBAAoB,UAAU,iBAAiB;EACjD,WAAW,CAAC,CAAC;EACb;EACA;EACA,QAAQ,WAAW,UAAU,CAAC,GAAG,EAAE,GAAG;EACtC;EACA,WACE,cAAc,UAAU,UAAU,qBAAqB;EACzD;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AA8CD,QACE,2CAAC;EAAa,OAAO;YACnB,2CAACC;GAAuB,OAAO;aAC7B,2CAACC;IAAY,iCA/CV;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cA8BO,2CAACC;KAAgB,iCA5BhB;MACL;MACA;MACA;MACA;MACA;MACD,GACD;MAAC;MAAe;MAAa;MAAoB;MAAY;MAAS,CACvE;eAqBS,2CAAC;MAAiB,iCAnBnB;OACL;OACA;OACA;OACA;OACD,GACD;OACE;OACA;OACA;OACA;OACD,CACF;gBAQW;OAAc,GAAI;OAAqB;QAAwB;OAC9C;MACH;KACN;IACS;GACZ;;AAMnB,MAAa,cAAc,4CAEzB,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,oDAAiC,4DAAgC,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"}

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

@@ -10,10 +10,10 @@ const require_factory$1 = require('../motion/factory.cjs');
 require('../motion/index.cjs');
 const require_portal = require('../portal/portal.cjs');
 require('../portal/index.cjs');
-const require_button = require('../button/button.cjs');
-require('../button/index.cjs');
 const require_popover = require('../popover/popover.cjs');
 require('../popover/index.cjs');
+const require_button = require('../button/button.cjs');
+require('../button/index.cjs');
 const require_close_button = require('../close-button/close-button.cjs');
 require('../close-button/index.cjs');
 const require_modal_style = require('./modal.style.cjs');
@@ -32,7 +32,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
 /**
 * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
 *
-* @see https://yamada-ui.com/docs/components/overlay/modal
+* @see https://yamada-ui.com/docs/components/modal
 */
 const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
 	const [omittedChildren, openTrigger, customOverlay] = require_children.useSplitChildren(children, ModalOpenTrigger, ModalOverlay);