@yamada-ui/react 2.1.4-dev-20260323182837 → 2.1.4-dev-20260324195723

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

@@ -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);

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

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

package/dist/cjs/components/pagination/pagination.cjs

@@ -169,7 +169,7 @@ const PaginationText = withContext("span", "text")(void 0, ({ children, format =
 	};
 });
 const PaginationStartTrigger = withContext("button", {
-	name: "startTrigger",
+	name: "StartTrigger",
 	slot: ["trigger", "start"]
 })(void 0, (props) => {
 	const { getStartTriggerProps } = require_use_pagination.usePaginationContext();
@@ -179,7 +179,7 @@ const PaginationStartTrigger = withContext("button", {
 	};
 });
 const PaginationEndTrigger = withContext("button", {
-	name: "endTrigger",
+	name: "EndTrigger",
 	slot: ["trigger", "end"]
 })(void 0, (props) => {
 	const { getEndTriggerProps } = require_use_pagination.usePaginationContext();
@@ -189,7 +189,7 @@ const PaginationEndTrigger = withContext("button", {
 	};
 });
 const PaginationPrevTrigger = withContext("button", {
-	name: "prevTrigger",
+	name: "PrevTrigger",
 	slot: ["trigger", "prev"]
 })(void 0, (props) => {
 	const { getPrevTriggerProps } = require_use_pagination.usePaginationContext();
@@ -199,7 +199,7 @@ const PaginationPrevTrigger = withContext("button", {
 	};
 });
 const PaginationNextTrigger = withContext("button", {
-	name: "nextTrigger",
+	name: "NextTrigger",
 	slot: ["trigger", "next"]
 })(void 0, (props) => {
 	const { getNextTriggerProps } = require_use_pagination.usePaginationContext();

package/dist/cjs/components/pagination/pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","names":["createSlotComponent","paginationStyle","usePagination","children: ReactNode[]","ChevronsLeftIcon","ChevronLeftIcon","styled","EllipsisIcon","ChevronRightIcon","ChevronsRightIcon","children","PaginationContext","PaginationItems: FC<PaginationItemsProps>","usePaginationContext","useI18n"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n  PaginationContext,\n  usePagination,\n  usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n  extends\n    WithoutThemeProps<\n      Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n      PaginationStyle\n    >,\n    ThemeProps<PaginationStyle>,\n    Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * If `true`, display the control buttons.\n   *\n   * @default true\n   */\n  withControls?: boolean\n  /**\n   * If `true`, display the edge buttons.\n   *\n   * @default false\n   */\n  withEdges?: boolean\n  /**\n   * Props for next of the control button element.\n   */\n  controlNextProps?: PaginationItemProps\n  /**\n   * Props for previous of the control button element.\n   */\n  controlPrevProps?: PaginationItemProps\n  /**\n   * Props for control button element.\n   */\n  controlProps?: PaginationItemProps\n  /**\n   * Props for end of the edge button element.\n   */\n  edgeEndProps?: PaginationItemProps\n  /**\n   * Props for edge button element.\n   */\n  edgeProps?: PaginationItemProps\n  /**\n   * Props for start of the edge button element.\n   */\n  edgeStartProps?: PaginationItemProps\n  /**\n   * Props for ellipsis of the element.\n   */\n  ellipsisProps?: PaginationItemProps\n  /**\n   * Props for item of the button element.\n   */\n  itemProps?: PaginationItemProps\n}\n\nconst {\n  PropsContext: PaginationPropsContext,\n  usePropsContext: usePaginationPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n  \"pagination\",\n  paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n  \"nav\",\n  PaginationRootProps,\n  \"size\" | \"variant\"\n>(\n  ({\n    size,\n    variant,\n    children,\n    withControls = true,\n    withEdges = false,\n    controlNextProps,\n    controlPrevProps,\n    controlProps,\n    edgeEndProps,\n    edgeProps,\n    edgeStartProps,\n    ellipsisProps,\n    itemProps,\n    ...rest\n  }) => {\n    const {\n      currentPage,\n      disabled,\n      range,\n      total,\n      getEndTriggerProps,\n      getItemProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      getStartTriggerProps,\n      onChange,\n      onChangeEnd,\n      onChangeNext,\n      onChangePrev,\n      onChangeStart,\n    } = usePagination(rest)\n    const context = useMemo(\n      () => ({\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      }),\n      [\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      ],\n    )\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        const children: ReactNode[] = []\n\n        if (withEdges)\n          children.push(\n            <PaginationStartTrigger>\n              <PaginationItem\n                icon={<ChevronsLeftIcon />}\n                {...edgeProps}\n                {...edgeStartProps}\n              />\n            </PaginationStartTrigger>,\n          )\n        if (withControls)\n          children.push(\n            <PaginationPrevTrigger>\n              <PaginationItem\n                icon={<ChevronLeftIcon />}\n                {...controlProps}\n                {...controlPrevProps}\n              />\n            </PaginationPrevTrigger>,\n          )\n\n        children.push(\n          <PaginationItems\n            render={(page) =>\n              isNumber(page) ? (\n                <PaginationItem {...itemProps}>\n                  <styled.span role=\"presentation\">{page}</styled.span>\n                </PaginationItem>\n              ) : (\n                <PaginationItem\n                  as=\"span\"\n                  icon={<EllipsisIcon />}\n                  {...ellipsisProps}\n                />\n              )\n            }\n          />,\n        )\n\n        if (withControls)\n          children.push(\n            <PaginationNextTrigger>\n              <PaginationItem\n                icon={<ChevronRightIcon />}\n                {...controlProps}\n                {...controlNextProps}\n              />\n            </PaginationNextTrigger>,\n          )\n        if (withEdges)\n          children.push(\n            <PaginationEndTrigger>\n              <PaginationItem\n                icon={<ChevronsRightIcon />}\n                {...edgeProps}\n                {...edgeEndProps}\n              />\n            </PaginationEndTrigger>,\n          )\n\n        return children\n      }\n    }, [\n      children,\n      withEdges,\n      withControls,\n      itemProps,\n      ellipsisProps,\n      edgeProps,\n      edgeStartProps,\n      edgeEndProps,\n      controlProps,\n      controlPrevProps,\n      controlNextProps,\n    ])\n\n    return (\n      <PaginationContext value={context}>\n        <ButtonGroup.Root\n          as=\"nav\"\n          size={size}\n          variant={variant}\n          {...getRootProps()}\n        >\n          {computedChildren}\n        </ButtonGroup.Root>\n      </PaginationContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  children?: (page: Page) => ReactNode\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n  children,\n  render,\n}) => {\n  const { range, getItemProps } = usePaginationContext()\n\n  return useMemo(\n    () =>\n      range.map((page, index) => {\n        const component = children?.(page) ?? render?.(page)\n\n        if (isValidElement<HTMLProps<\"button\">>(component)) {\n          return cloneElement(component, {\n            ...getItemProps({ key: index, page, ...component.props }),\n          })\n        } else {\n          return component\n        }\n      }),\n    [children, getItemProps, range, render],\n  )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n  ButtonGroup.IconItem,\n  \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n  HTMLStyledProps<\"span\">,\n  \"children\"\n> {\n  /**\n   * The children of the text.\n   * if function, it will be called with `{ page: number; total: number }`.\n   */\n  children?: ReactNodeOrFunction<{ page: number; total: number }>\n  /**\n   * The format of the text.\n   *\n   * @default 'compact'\n   */\n  format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n  \"span\",\n  \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n  const { currentPage, total } = usePaginationContext()\n  const { t } = useI18n(\"pagination\")\n  const computedChildren = useMemo(() => {\n    if (children) {\n      return runIfFn(children, { page: currentPage, total })\n    } else if (format === \"short\") {\n      return t(\"{value} / {total}\", {\n        total,\n        value: currentPage,\n      })\n    } else {\n      return t(\"{value} of {total}\", {\n        total,\n        value: currentPage,\n      })\n    }\n  }, [children, currentPage, format, total, t])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n  \"button\",\n  PaginationStartTriggerProps\n>(\"button\", { name: \"startTrigger\", slot: [\"trigger\", \"start\"] })(\n  undefined,\n  (props) => {\n    const { getStartTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getStartTriggerProps(props) }\n  },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n  \"button\",\n  PaginationEndTriggerProps\n>(\"button\", { name: \"endTrigger\", slot: [\"trigger\", \"end\"] })(\n  undefined,\n  (props) => {\n    const { getEndTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getEndTriggerProps(props) }\n  },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n  \"button\",\n  PaginationPrevTriggerProps\n>(\"button\", { name: \"prevTrigger\", slot: [\"trigger\", \"prev\"] })(\n  undefined,\n  (props) => {\n    const { getPrevTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getPrevTriggerProps(props) }\n  },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n  \"button\",\n  PaginationNextTriggerProps\n>(\"button\", { name: \"nextTrigger\", slot: [\"trigger\", \"next\"] })(\n  undefined,\n  (props) => {\n    const { getNextTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getNextTriggerProps(props) }\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,6CACF,cACAC,yCACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACEC,qCAAc,KAAK;CACvB,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,4CAAiC;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMC,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,2CAAC,oCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,8CAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,2CAAC,mBACC,SAAS,yDACE,KAAK,GACZ,2CAAC;IAAe,GAAI;cAClB,2CAACC,uBAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,2CAAC;IACC,IAAG;IACH,MAAM,2CAACC,uCAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,2CAAC,kCACC,2CAAC;IACC,MAAM,2CAACC,kDAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,2CAACC;EAAkB,OAAO;YACxB;GACE,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiBC,6CAAsB;AAEtD,iCAEI,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,gCAAwC,UAAU,CAChD,gCAAoB,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,4CAE5B,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAUA,6CAAsB;CACrD,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CACnC,MAAM,4CAAiC;AACrC,MAAI,SACF,uDAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyBD,6CAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuBA,6CAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
+{"version":3,"file":"pagination.cjs","names":["createSlotComponent","paginationStyle","usePagination","children: ReactNode[]","ChevronsLeftIcon","ChevronLeftIcon","styled","EllipsisIcon","ChevronRightIcon","ChevronsRightIcon","children","PaginationContext","PaginationItems: FC<PaginationItemsProps>","usePaginationContext","useI18n"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n  PaginationContext,\n  usePagination,\n  usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n  extends\n    WithoutThemeProps<\n      Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n      PaginationStyle\n    >,\n    ThemeProps<PaginationStyle>,\n    Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * If `true`, display the control buttons.\n   *\n   * @default true\n   */\n  withControls?: boolean\n  /**\n   * If `true`, display the edge buttons.\n   *\n   * @default false\n   */\n  withEdges?: boolean\n  /**\n   * Props for next of the control button element.\n   */\n  controlNextProps?: PaginationItemProps\n  /**\n   * Props for previous of the control button element.\n   */\n  controlPrevProps?: PaginationItemProps\n  /**\n   * Props for control button element.\n   */\n  controlProps?: PaginationItemProps\n  /**\n   * Props for end of the edge button element.\n   */\n  edgeEndProps?: PaginationItemProps\n  /**\n   * Props for edge button element.\n   */\n  edgeProps?: PaginationItemProps\n  /**\n   * Props for start of the edge button element.\n   */\n  edgeStartProps?: PaginationItemProps\n  /**\n   * Props for ellipsis of the element.\n   */\n  ellipsisProps?: PaginationItemProps\n  /**\n   * Props for item of the button element.\n   */\n  itemProps?: PaginationItemProps\n}\n\nconst {\n  PropsContext: PaginationPropsContext,\n  usePropsContext: usePaginationPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n  \"pagination\",\n  paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n  \"nav\",\n  PaginationRootProps,\n  \"size\" | \"variant\"\n>(\n  ({\n    size,\n    variant,\n    children,\n    withControls = true,\n    withEdges = false,\n    controlNextProps,\n    controlPrevProps,\n    controlProps,\n    edgeEndProps,\n    edgeProps,\n    edgeStartProps,\n    ellipsisProps,\n    itemProps,\n    ...rest\n  }) => {\n    const {\n      currentPage,\n      disabled,\n      range,\n      total,\n      getEndTriggerProps,\n      getItemProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      getStartTriggerProps,\n      onChange,\n      onChangeEnd,\n      onChangeNext,\n      onChangePrev,\n      onChangeStart,\n    } = usePagination(rest)\n    const context = useMemo(\n      () => ({\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      }),\n      [\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      ],\n    )\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        const children: ReactNode[] = []\n\n        if (withEdges)\n          children.push(\n            <PaginationStartTrigger>\n              <PaginationItem\n                icon={<ChevronsLeftIcon />}\n                {...edgeProps}\n                {...edgeStartProps}\n              />\n            </PaginationStartTrigger>,\n          )\n        if (withControls)\n          children.push(\n            <PaginationPrevTrigger>\n              <PaginationItem\n                icon={<ChevronLeftIcon />}\n                {...controlProps}\n                {...controlPrevProps}\n              />\n            </PaginationPrevTrigger>,\n          )\n\n        children.push(\n          <PaginationItems\n            render={(page) =>\n              isNumber(page) ? (\n                <PaginationItem {...itemProps}>\n                  <styled.span role=\"presentation\">{page}</styled.span>\n                </PaginationItem>\n              ) : (\n                <PaginationItem\n                  as=\"span\"\n                  icon={<EllipsisIcon />}\n                  {...ellipsisProps}\n                />\n              )\n            }\n          />,\n        )\n\n        if (withControls)\n          children.push(\n            <PaginationNextTrigger>\n              <PaginationItem\n                icon={<ChevronRightIcon />}\n                {...controlProps}\n                {...controlNextProps}\n              />\n            </PaginationNextTrigger>,\n          )\n        if (withEdges)\n          children.push(\n            <PaginationEndTrigger>\n              <PaginationItem\n                icon={<ChevronsRightIcon />}\n                {...edgeProps}\n                {...edgeEndProps}\n              />\n            </PaginationEndTrigger>,\n          )\n\n        return children\n      }\n    }, [\n      children,\n      withEdges,\n      withControls,\n      itemProps,\n      ellipsisProps,\n      edgeProps,\n      edgeStartProps,\n      edgeEndProps,\n      controlProps,\n      controlPrevProps,\n      controlNextProps,\n    ])\n\n    return (\n      <PaginationContext value={context}>\n        <ButtonGroup.Root\n          as=\"nav\"\n          size={size}\n          variant={variant}\n          {...getRootProps()}\n        >\n          {computedChildren}\n        </ButtonGroup.Root>\n      </PaginationContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  children?: (page: Page) => ReactNode\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n  children,\n  render,\n}) => {\n  const { range, getItemProps } = usePaginationContext()\n\n  return useMemo(\n    () =>\n      range.map((page, index) => {\n        const component = children?.(page) ?? render?.(page)\n\n        if (isValidElement<HTMLProps<\"button\">>(component)) {\n          return cloneElement(component, {\n            ...getItemProps({ key: index, page, ...component.props }),\n          })\n        } else {\n          return component\n        }\n      }),\n    [children, getItemProps, range, render],\n  )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n  ButtonGroup.IconItem,\n  \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n  HTMLStyledProps<\"span\">,\n  \"children\"\n> {\n  /**\n   * The children of the text.\n   * if function, it will be called with `{ page: number; total: number }`.\n   */\n  children?: ReactNodeOrFunction<{ page: number; total: number }>\n  /**\n   * The format of the text.\n   *\n   * @default 'compact'\n   */\n  format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n  \"span\",\n  \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n  const { currentPage, total } = usePaginationContext()\n  const { t } = useI18n(\"pagination\")\n  const computedChildren = useMemo(() => {\n    if (children) {\n      return runIfFn(children, { page: currentPage, total })\n    } else if (format === \"short\") {\n      return t(\"{value} / {total}\", {\n        total,\n        value: currentPage,\n      })\n    } else {\n      return t(\"{value} of {total}\", {\n        total,\n        value: currentPage,\n      })\n    }\n  }, [children, currentPage, format, total, t])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n  \"button\",\n  PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n  undefined,\n  (props) => {\n    const { getStartTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getStartTriggerProps(props) }\n  },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n  \"button\",\n  PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n  undefined,\n  (props) => {\n    const { getEndTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getEndTriggerProps(props) }\n  },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n  \"button\",\n  PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n  undefined,\n  (props) => {\n    const { getPrevTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getPrevTriggerProps(props) }\n  },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n  \"button\",\n  PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n  undefined,\n  (props) => {\n    const { getNextTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getNextTriggerProps(props) }\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,6CACF,cACAC,yCACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACEC,qCAAc,KAAK;CACvB,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,4CAAiC;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMC,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,2CAAC,oCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,8CAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,2CAAC,mBACC,SAAS,yDACE,KAAK,GACZ,2CAAC;IAAe,GAAI;cAClB,2CAACC,uBAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,2CAAC;IACC,IAAG;IACH,MAAM,2CAACC,uCAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,2CAAC,kCACC,2CAAC;IACC,MAAM,2CAACC,kDAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,2CAACC;EAAkB,OAAO;YACxB;GACE,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiBC,6CAAsB;AAEtD,iCAEI,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,gCAAwC,UAAU,CAChD,gCAAoB,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,4CAE5B,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAUA,6CAAsB;CACrD,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CACnC,MAAM,4CAAiC;AACrC,MAAI,SACF,uDAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyBD,6CAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuBA,6CAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}

package/dist/esm/components/menu/menu.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":["MenuRoot: FC<MenuRootProps>","Popover.Root","Popover.Trigger","Popover.Anchor","Popover.Content","rest","items","index"],"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,0BACE,oBACF,QACA,UACD;;;;;;AASD,MAAaA,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,GAAG,UACvB,gBAAgB,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,aACE,QAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,qBAAqB,eAClB;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,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAuB,OAAO;aAC7B,oBAAC;IAAY,OAhDC,eACX;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cA8BO,oBAAC;KAAgB,OA7BD,eACf;MACL;MACA;MACA;MACA;MACA;MACD,GACD;MAAC;MAAe;MAAa;MAAoB;MAAY;MAAS,CACvE;eAqBS,oBAAC;MAAiB,OApBH,eAChB;OACL;OACA;OACA;OACA;OACD,GACD;OACE;OACA;OACA;OACA;OACD,CACF;gBAQW,oBAACC;OAAa,GAAI;OAAqB;QAAwB;OAC9C;MACH;KACN;IACS;GACZ;;AAMnB,MAAa,cAAc,YACzBC,gBACA,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB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"}
+{"version":3,"file":"menu.js","names":["MenuRoot: FC<MenuRootProps>","Popover.Root","Popover.Trigger","Popover.Anchor","Popover.Content","rest","items","index"],"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,0BACE,oBACF,QACA,UACD;;;;;;AASD,MAAaA,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,GAAG,UACvB,gBAAgB,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,aACE,QAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,qBAAqB,eAClB;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,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAuB,OAAO;aAC7B,oBAAC;IAAY,OAhDC,eACX;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cA8BO,oBAAC;KAAgB,OA7BD,eACf;MACL;MACA;MACA;MACA;MACA;MACD,GACD;MAAC;MAAe;MAAa;MAAoB;MAAY;MAAS,CACvE;eAqBS,oBAAC;MAAiB,OApBH,eAChB;OACL;OACA;OACA;OACA;OACD,GACD;OACE;OACA;OACA;OACA;OACD,CACF;gBAQW,oBAACC;OAAa,GAAI;OAAqB;QAAwB;OAC9C;MACH;KACN;IACS;GACZ;;AAMnB,MAAa,cAAc,YACzBC,gBACA,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB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"}

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

@@ -31,7 +31,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] = useSplitChildren(children, ModalOpenTrigger, ModalOverlay);

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

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

package/dist/esm/components/pagination/pagination.js

@@ -168,7 +168,7 @@ const PaginationText = withContext("span", "text")(void 0, ({ children, format =
 	};
 });
 const PaginationStartTrigger = withContext("button", {
-	name: "startTrigger",
+	name: "StartTrigger",
 	slot: ["trigger", "start"]
 })(void 0, (props) => {
 	const { getStartTriggerProps } = usePaginationContext();
@@ -178,7 +178,7 @@ const PaginationStartTrigger = withContext("button", {
 	};
 });
 const PaginationEndTrigger = withContext("button", {
-	name: "endTrigger",
+	name: "EndTrigger",
 	slot: ["trigger", "end"]
 })(void 0, (props) => {
 	const { getEndTriggerProps } = usePaginationContext();
@@ -188,7 +188,7 @@ const PaginationEndTrigger = withContext("button", {
 	};
 });
 const PaginationPrevTrigger = withContext("button", {
-	name: "prevTrigger",
+	name: "PrevTrigger",
 	slot: ["trigger", "prev"]
 })(void 0, (props) => {
 	const { getPrevTriggerProps } = usePaginationContext();
@@ -198,7 +198,7 @@ const PaginationPrevTrigger = withContext("button", {
 	};
 });
 const PaginationNextTrigger = withContext("button", {
-	name: "nextTrigger",
+	name: "NextTrigger",
 	slot: ["trigger", "next"]
 })(void 0, (props) => {
 	const { getNextTriggerProps } = usePaginationContext();