@yamada-ui/react 2.2.0 → 2.3.0-next-20260411030430

package/dist/esm/components/avatar/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","names":[],"sources":["../../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { AvatarStyle } from \"./avatar.style\"\nimport type { UseAvatarGroupProps } from \"./use-avatar-group\"\nimport { useMemo } from \"react\"\nimport { styled } from \"../../core\"\nimport {\n  Avatar,\n  AvatarPropsContext,\n  component,\n  useRootComponentProps,\n} from \"./avatar\"\nimport { useAvatarGroup } from \"./use-avatar-group\"\n\nexport interface AvatarGroupRootProps\n  extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarGroupProps {}\n\n/**\n * `Avatar` is a component that displays a profile picture or an icon with initials representing a user.\n *\n * @see https://yamada-ui.com/docs/components/avatar\n */\nexport const AvatarGroupRoot = component<\"div\", AvatarGroupRootProps>(\n  (props) => {\n    const [, { colorScheme, size, variant, shape, ...rest }] =\n      useRootComponentProps(props, \"group\", {\n        transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n      })\n    const { children, excess, getRootProps } = useAvatarGroup(rest)\n    const context = useMemo(\n      () => ({ colorScheme, size, variant, shape }),\n      [variant, size, colorScheme, shape],\n    )\n\n    return (\n      <AvatarPropsContext value={context}>\n        <styled.div {...getRootProps()}>\n          {excess > 0 ? <Avatar fallback={`+${excess}`} /> : null}\n          {children}\n        </styled.div>\n      </AvatarPropsContext>\n    )\n  },\n  \"group\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,kBAAkB,WAC5B,UAAU;CACT,MAAM,GAAG,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG,UAC/C,sBAAsB,OAAO,SAAS,EACpC,eAAe;EAAC;EAAW;EAAe;EAAQ;EAAQ,EAC3D,CAAC;CACJ,MAAM,EAAE,UAAU,QAAQ,iBAAiB,eAAe,KAAK;AAM/D,QACE,oBAAC;EAAmB,OANN,eACP;GAAE;GAAa;GAAM;GAAS;GAAO,GAC5C;GAAC;GAAS;GAAM;GAAa;GAAM,CACpC;YAIG,qBAAC,OAAO;GAAI,GAAI,cAAc;cAC3B,SAAS,IAAI,oBAAC,UAAO,UAAU,IAAI,WAAY,GAAG,MAClD;IACU;GACM;GAGzB,QACD,EAAE"}
+{"version":3,"file":"avatar-group.js","names":[],"sources":["../../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { AvatarStyle } from \"./avatar.style\"\nimport type { UseAvatarGroupProps } from \"./use-avatar-group\"\nimport { useMemo } from \"react\"\nimport { styled } from \"../../core\"\nimport {\n  Avatar,\n  AvatarPropsContext,\n  component,\n  useRootComponentProps,\n} from \"./avatar\"\nimport { useAvatarGroup } from \"./use-avatar-group\"\n\nexport interface AvatarGroupRootProps\n  extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarGroupProps {}\n\n/**\n * `Avatar` is a component that displays a profile picture or an icon with initials representing a user.\n *\n * @see https://yamada-ui.com/docs/components/avatar\n */\nexport const AvatarGroupRoot = component<\"div\", AvatarGroupRootProps>(\n  (props) => {\n    const [\n      ,\n      { colorScheme, size, variant, shape, suppressHydrationWarning, ...rest },\n    ] = useRootComponentProps(props, \"group\", {\n      transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n    })\n    const { children, excess, getRootProps } = useAvatarGroup(rest)\n    const context = useMemo(\n      () => ({\n        colorScheme,\n        size,\n        variant,\n        shape,\n        suppressHydrationWarning,\n      }),\n      [variant, size, colorScheme, shape, suppressHydrationWarning],\n    )\n\n    return (\n      <AvatarPropsContext value={context}>\n        <styled.div\n          suppressHydrationWarning={suppressHydrationWarning}\n          {...getRootProps()}\n        >\n          {excess > 0 ? <Avatar fallback={`+${excess}`} /> : null}\n          {children}\n        </styled.div>\n      </AvatarPropsContext>\n    )\n  },\n  \"group\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,kBAAkB,WAC5B,UAAU;CACT,MAAM,GAEJ,EAAE,aAAa,MAAM,SAAS,OAAO,0BAA0B,GAAG,UAChE,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;EAAQ,EAC3D,CAAC;CACF,MAAM,EAAE,UAAU,QAAQ,iBAAiB,eAAe,KAAK;AAY/D,QACE,oBAAC;EAAmB,OAZN,eACP;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GAAC;GAAS;GAAM;GAAa;GAAO;GAAyB,CAC9D;YAIG,qBAAC,OAAO;GACoB;GAC1B,GAAI,cAAc;cAEjB,SAAS,IAAI,oBAAC,UAAO,UAAU,IAAI,WAAY,GAAG,MAClD;IACU;GACM;GAGzB,QACD,EAAE"}

package/dist/esm/components/checkbox/checkbox-group.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 * @see https://yamada-ui.com/docs/components/checkbox
 */
 const CheckboxGroupRoot = component((props) => {
-	const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], readOnly, shape, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
+	const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], readOnly, shape, suppressHydrationWarning, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
 		"variant",
 		"colorScheme",
 		"size",
@@ -40,7 +40,8 @@ const CheckboxGroupRoot = component((props) => {
 			focusBorderColor,
 			invalid,
 			readOnly,
-			shape
+			shape,
+			suppressHydrationWarning
 		}), [
 			variant,
 			size,
@@ -51,7 +52,8 @@ const CheckboxGroupRoot = component((props) => {
 			readOnly,
 			errorBorderColor,
 			focusBorderColor,
-			checkedIcon
+			checkedIcon,
+			suppressHydrationWarning
 		]),
 		children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
 			value: useMemo(() => ({
@@ -69,7 +71,7 @@ const CheckboxGroupRoot = component((props) => {
 			]),
 			children: /* @__PURE__ */ jsx(Group, {
 				orientation: "vertical",
-				...getRootProps(),
+				...getRootProps({ suppressHydrationWarning }),
 				children: computedChildren
 			})
 		})

package/dist/esm/components/checkbox/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxGroupProps } from \"./use-checkbox-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n  Checkbox,\n  CheckboxPropsContext,\n  component,\n  useRootComponentProps,\n} from \"./checkbox\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"./use-checkbox-group\"\n\nexport interface CheckboxGroupItem<\n  Y extends string = string,\n> extends CheckboxProps<Y> {\n  label: ReactNode\n}\n\nexport interface CheckboxGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxProps, \"checkedIcon\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxGroupItem<Y>[]\n}\n\n/**\n * `CheckboxGroup` is a component that groups `Checkbox` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const CheckboxGroupRoot = component<\"div\", CheckboxGroupRootProps>(\n  (props) => {\n    const [\n      ,\n      {\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        children,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        items = [],\n        readOnly,\n        shape,\n        ...rest\n      },\n    ] = useRootComponentProps(props, \"group\", {\n      transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n    })\n    const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n      useCheckboxGroup(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(({ label, value, ...rest }, index) => (\n        <Checkbox key={value ?? index} value={value} {...rest}>\n          {label}\n        </Checkbox>\n      ))\n    }, [items, children])\n    const context = useMemo(\n      () => ({\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        readOnly,\n        shape,\n      }),\n      [\n        variant,\n        size,\n        colorScheme,\n        shape,\n        disabled,\n        invalid,\n        readOnly,\n        errorBorderColor,\n        focusBorderColor,\n        checkedIcon,\n      ],\n    )\n    const groupContext = useMemo(\n      () => ({ max, value, getInputProps, getLabelProps, onChange }),\n      [max, value, getInputProps, getLabelProps, onChange],\n    )\n\n    return (\n      <CheckboxPropsContext value={context}>\n        <CheckboxGroupContext value={groupContext}>\n          <Group orientation=\"vertical\" {...getRootProps()}>\n            {computedChildren}\n          </Group>\n        </CheckboxGroupContext>\n      </CheckboxPropsContext>\n    )\n  },\n  \"group\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxGroupRootProps<Y>): ReactElement\n}>\n\nexport { Checkbox as CheckboxGroupItem }\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAa,oBAAoB,WAC9B,UAAU;CACT,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,EAAE,EACV,UACA,OACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;EAAQ,EAC3D,CAAC;CACF,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,KAAK;CACxB,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAAK,EAAE,OAAO,gBAAO,GAAGA,UAAQ,UAC3C,oBAAC;GAA8B,OAAOC;GAAO,GAAID;aAC9C;KADYC,WAAS,MAEb,CACX;IACD,CAAC,OAAO,SAAS,CAAC;AAgCrB,QACE,oBAAC;EAAqB,OAhCR,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAQG,oBAAC;GAAqB,OAPL,eACZ;IAAE;IAAK;IAAO;IAAe;IAAe;IAAU,GAC7D;IAAC;IAAK;IAAO;IAAe;IAAe;IAAS,CACrD;aAKK,oBAAC;IAAM,aAAY;IAAW,GAAI,cAAc;cAC7C;KACK;IACa;GACF;GAG3B,QACD,EAAE"}
+{"version":3,"file":"checkbox-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxGroupProps } from \"./use-checkbox-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n  Checkbox,\n  CheckboxPropsContext,\n  component,\n  useRootComponentProps,\n} from \"./checkbox\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"./use-checkbox-group\"\n\nexport interface CheckboxGroupItem<\n  Y extends string = string,\n> extends CheckboxProps<Y> {\n  label: ReactNode\n}\n\nexport interface CheckboxGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxProps, \"checkedIcon\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxGroupItem<Y>[]\n}\n\n/**\n * `CheckboxGroup` is a component that groups `Checkbox` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const CheckboxGroupRoot = component<\"div\", CheckboxGroupRootProps>(\n  (props) => {\n    const [\n      ,\n      {\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        children,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        items = [],\n        readOnly,\n        shape,\n        suppressHydrationWarning,\n        ...rest\n      },\n    ] = useRootComponentProps(props, \"group\", {\n      transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n    })\n    const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n      useCheckboxGroup(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(({ label, value, ...rest }, index) => (\n        <Checkbox key={value ?? index} value={value} {...rest}>\n          {label}\n        </Checkbox>\n      ))\n    }, [items, children])\n    const context = useMemo(\n      () => ({\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        readOnly,\n        shape,\n        suppressHydrationWarning,\n      }),\n      [\n        variant,\n        size,\n        colorScheme,\n        shape,\n        disabled,\n        invalid,\n        readOnly,\n        errorBorderColor,\n        focusBorderColor,\n        checkedIcon,\n        suppressHydrationWarning,\n      ],\n    )\n    const groupContext = useMemo(\n      () => ({ max, value, getInputProps, getLabelProps, onChange }),\n      [max, value, getInputProps, getLabelProps, onChange],\n    )\n\n    return (\n      <CheckboxPropsContext value={context}>\n        <CheckboxGroupContext value={groupContext}>\n          <Group\n            orientation=\"vertical\"\n            {...getRootProps({ suppressHydrationWarning })}\n          >\n            {computedChildren}\n          </Group>\n        </CheckboxGroupContext>\n      </CheckboxPropsContext>\n    )\n  },\n  \"group\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxGroupRootProps<Y>): ReactElement\n}>\n\nexport { Checkbox as CheckboxGroupItem }\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAa,oBAAoB,WAC9B,UAAU;CACT,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,EAAE,EACV,UACA,OACA,0BACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;EAAQ,EAC3D,CAAC;CACF,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,KAAK;CACxB,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAAK,EAAE,OAAO,gBAAO,GAAGA,UAAQ,UAC3C,oBAAC;GAA8B,OAAOC;GAAO,GAAID;aAC9C;KADYC,WAAS,MAEb,CACX;IACD,CAAC,OAAO,SAAS,CAAC;AAkCrB,QACE,oBAAC;EAAqB,OAlCR,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAQG,oBAAC;GAAqB,OAPL,eACZ;IAAE;IAAK;IAAO;IAAe;IAAe;IAAU,GAC7D;IAAC;IAAK;IAAO;IAAe;IAAe;IAAS,CACrD;aAKK,oBAAC;IACC,aAAY;IACZ,GAAI,aAAa,EAAE,0BAA0B,CAAC;cAE7C;KACK;IACa;GACF;GAG3B,QACD,EAAE"}

package/dist/esm/components/checkbox-card/checkbox-card-group.js

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 * @see https://yamada-ui.com/docs/components/checkbox-card
 */
 const CheckboxCardGroupRoot = component((props) => {
-	const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], justify, readOnly, shape, withIndicator, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
+	const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], justify, readOnly, shape, suppressHydrationWarning, withIndicator, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
 		"variant",
 		"colorScheme",
 		"size",
@@ -44,6 +44,7 @@ const CheckboxCardGroupRoot = component((props) => {
 			justify,
 			readOnly,
 			shape,
+			suppressHydrationWarning,
 			withIndicator
 		}), [
 			colorScheme,
@@ -57,7 +58,8 @@ const CheckboxCardGroupRoot = component((props) => {
 			focusBorderColor,
 			invalid,
 			readOnly,
-			shape
+			shape,
+			suppressHydrationWarning
 		]),
 		children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
 			value: useMemo(() => ({
@@ -74,7 +76,7 @@ const CheckboxCardGroupRoot = component((props) => {
 				onChange
 			]),
 			children: /* @__PURE__ */ jsx(Group, {
-				...getRootProps(),
+				...getRootProps({ suppressHydrationWarning }),
 				children: computedChildren
 			})
 		})

package/dist/esm/components/checkbox-card/checkbox-card-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-card-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox-card/checkbox-card-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { UseCheckboxGroupProps } from \"../checkbox\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardRootProps } from \"./checkbox-card\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"../checkbox\"\nimport { Group } from \"../group\"\nimport {\n  CheckboxCardPropsContext,\n  CheckboxCardRoot,\n  component,\n  useRootComponentProps,\n} from \"./checkbox-card\"\n\nexport interface CheckboxCardGroupItem<\n  Y extends string = string,\n> extends CheckboxCardRootProps<Y> {}\n\nexport interface CheckboxCardGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxCardStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxCardStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxCardRootProps, \"checkedIcon\" | \"withIndicator\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxCardGroupItem<Y>[]\n}\n\n/**\n * `CheckboxCardGroup` is a component that groups `CheckboxCard` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardGroupRoot = component<\n  \"div\",\n  CheckboxCardGroupRootProps\n>((props) => {\n  const [\n    ,\n    {\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      children,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      items = [],\n      justify,\n      readOnly,\n      shape,\n      withIndicator,\n      ...rest\n    },\n  ] = useRootComponentProps(props, \"group\", {\n    transferProps: [\n      \"variant\",\n      \"colorScheme\",\n      \"size\",\n      \"shape\",\n      \"justify\",\n      \"withIndicator\",\n    ],\n  })\n  const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n    useCheckboxGroup(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items.map(({ value, ...rest }, index) => (\n      <CheckboxCardRoot key={value ?? index} value={value} {...rest} />\n    ))\n  }, [items, children])\n  const context = useMemo(\n    () => ({\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      justify,\n      readOnly,\n      shape,\n      withIndicator,\n    }),\n    [\n      colorScheme,\n      size,\n      checkedIcon,\n      variant,\n      disabled,\n      justify,\n      withIndicator,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      readOnly,\n      shape,\n    ],\n  )\n  const groupContext = useMemo(\n    () => ({ max, value, getInputProps, getLabelProps, onChange }),\n    [max, value, getInputProps, getLabelProps, onChange],\n  )\n\n  return (\n    <CheckboxCardPropsContext value={context}>\n      <CheckboxGroupContext value={groupContext}>\n        <Group {...getRootProps()}>{computedChildren}</Group>\n      </CheckboxGroupContext>\n    </CheckboxCardPropsContext>\n  )\n}, \"group\")() as GenericsComponent<{\n  <Y extends string = string>(\n    props: CheckboxCardGroupRootProps<Y>,\n  ): ReactElement\n}>\n\nexport { CheckboxCardRoot as CheckboxCardGroupItem }\n"],"mappings":";;;;;;;;;;;;;;;;AAkDA,MAAa,wBAAwB,WAGlC,UAAU;CACX,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,EAAE,EACV,SACA,UACA,OACA,eACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACD,EACF,CAAC;CACF,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,KAAK;CACxB,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAAK,EAAE,gBAAO,GAAGA,UAAQ,UACpC,oBAAC;GAAsC,OAAOC;GAAO,GAAID;KAAlCC,WAAS,MAAiC,CACjE;IACD,CAAC,OAAO,SAAS,CAAC;AAoCrB,QACE,oBAAC;EAAyB,OApCZ,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAQG,oBAAC;GAAqB,OAPL,eACZ;IAAE;IAAK;IAAO;IAAe;IAAe;IAAU,GAC7D;IAAC;IAAK;IAAO;IAAe;IAAe;IAAS,CACrD;aAKK,oBAAC;IAAM,GAAI,cAAc;cAAG;KAAyB;IAChC;GACE;GAE5B,QAAQ,EAAE"}
+{"version":3,"file":"checkbox-card-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox-card/checkbox-card-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { UseCheckboxGroupProps } from \"../checkbox\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardRootProps } from \"./checkbox-card\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"../checkbox\"\nimport { Group } from \"../group\"\nimport {\n  CheckboxCardPropsContext,\n  CheckboxCardRoot,\n  component,\n  useRootComponentProps,\n} from \"./checkbox-card\"\n\nexport interface CheckboxCardGroupItem<\n  Y extends string = string,\n> extends CheckboxCardRootProps<Y> {}\n\nexport interface CheckboxCardGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxCardStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxCardStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxCardRootProps, \"checkedIcon\" | \"withIndicator\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxCardGroupItem<Y>[]\n}\n\n/**\n * `CheckboxCardGroup` is a component that groups `CheckboxCard` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardGroupRoot = component<\n  \"div\",\n  CheckboxCardGroupRootProps\n>((props) => {\n  const [\n    ,\n    {\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      children,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      items = [],\n      justify,\n      readOnly,\n      shape,\n      suppressHydrationWarning,\n      withIndicator,\n      ...rest\n    },\n  ] = useRootComponentProps(props, \"group\", {\n    transferProps: [\n      \"variant\",\n      \"colorScheme\",\n      \"size\",\n      \"shape\",\n      \"justify\",\n      \"withIndicator\",\n    ],\n  })\n  const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n    useCheckboxGroup(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items.map(({ value, ...rest }, index) => (\n      <CheckboxCardRoot key={value ?? index} value={value} {...rest} />\n    ))\n  }, [items, children])\n  const context = useMemo(\n    () => ({\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      justify,\n      readOnly,\n      shape,\n      suppressHydrationWarning,\n      withIndicator,\n    }),\n    [\n      colorScheme,\n      size,\n      checkedIcon,\n      variant,\n      disabled,\n      justify,\n      withIndicator,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      readOnly,\n      shape,\n      suppressHydrationWarning,\n    ],\n  )\n  const groupContext = useMemo(\n    () => ({ max, value, getInputProps, getLabelProps, onChange }),\n    [max, value, getInputProps, getLabelProps, onChange],\n  )\n\n  return (\n    <CheckboxCardPropsContext value={context}>\n      <CheckboxGroupContext value={groupContext}>\n        <Group {...getRootProps({ suppressHydrationWarning })}>\n          {computedChildren}\n        </Group>\n      </CheckboxGroupContext>\n    </CheckboxCardPropsContext>\n  )\n}, \"group\")() as GenericsComponent<{\n  <Y extends string = string>(\n    props: CheckboxCardGroupRootProps<Y>,\n  ): ReactElement\n}>\n\nexport { CheckboxCardRoot as CheckboxCardGroupItem }\n"],"mappings":";;;;;;;;;;;;;;;;AAkDA,MAAa,wBAAwB,WAGlC,UAAU;CACX,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,EAAE,EACV,SACA,UACA,OACA,0BACA,eACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACD,EACF,CAAC;CACF,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,KAAK;CACxB,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAAK,EAAE,gBAAO,GAAGA,UAAQ,UACpC,oBAAC;GAAsC,OAAOC;GAAO,GAAID;KAAlCC,WAAS,MAAiC,CACjE;IACD,CAAC,OAAO,SAAS,CAAC;AAsCrB,QACE,oBAAC;EAAyB,OAtCZ,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAQG,oBAAC;GAAqB,OAPL,eACZ;IAAE;IAAK;IAAO;IAAe;IAAe;IAAU,GAC7D;IAAC;IAAK;IAAO;IAAe;IAAe;IAAS,CACrD;aAKK,oBAAC;IAAM,GAAI,aAAa,EAAE,0BAA0B,CAAC;cAClD;KACK;IACa;GACE;GAE5B,QAAQ,EAAE"}

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

@@ -17,7 +17,7 @@ import { Fragment, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/menu/menu.tsx
-const { ComponentContext, PropsContext: MenuPropsContext, StyleContext, useComponentContext, usePropsContext: useMenuPropsContext, withContext, useRootComponentProps } = createSlotComponent("menu", menuStyle);
+const { ComponentContext, HydrationContext, PropsContext: MenuPropsContext, StyleContext, useComponentContext, usePropsContext: useMenuPropsContext, withContext, useRootComponentProps } = createSlotComponent("menu", menuStyle);
 /**
 * `Menu` is a component that displays a common dropdown menu.
 *
@@ -25,7 +25,7 @@ const { ComponentContext, PropsContext: MenuPropsContext, StyleContext, useCompo
 */
 const MenuRoot = (props) => {
 	const [styleContext, mergedProps] = useRootComponentProps(props);
-	const [{ animationScheme, initialFocusRef, offset, placement, ...popoverProps }, { children, disabled, ...rest }] = usePopoverProps(mergedProps, [
+	const [{ animationScheme, initialFocusRef, offset, placement, ...popoverProps }, { children, disabled, suppressHydrationWarning, ...rest }] = usePopoverProps(mergedProps, [
 		"disabled",
 		"open",
 		"defaultOpen",
@@ -64,55 +64,58 @@ const MenuRoot = (props) => {
 	]);
 	return /* @__PURE__ */ jsx(StyleContext, {
 		value: styleContext,
-		children: /* @__PURE__ */ jsx(MenuDescendantsContext, {
-			value: descendants,
-			children: /* @__PURE__ */ jsx(MenuContext, {
-				value: useMemo(() => ({
-					subMenu,
-					subMenuDirection,
-					onActiveDescendant,
-					onClose,
-					onCloseSubMenu,
-					onOpen,
-					onSelect
-				}), [
-					onClose,
-					onOpen,
-					onSelect,
-					onActiveDescendant,
-					subMenu,
-					subMenuDirection,
-					onCloseSubMenu
-				]),
-				children: /* @__PURE__ */ jsx(MainMenuContext, {
+		children: /* @__PURE__ */ jsx(HydrationContext, {
+			value: useMemo(() => suppressHydrationWarning ? { suppressHydrationWarning } : {}, [suppressHydrationWarning]),
+			children: /* @__PURE__ */ jsx(MenuDescendantsContext, {
+				value: descendants,
+				children: /* @__PURE__ */ jsx(MenuContext, {
 					value: useMemo(() => ({
-						closeOnSelect,
-						descendants,
+						subMenu,
+						subMenuDirection,
 						onActiveDescendant,
-						onCloseRef,
+						onClose,
+						onCloseSubMenu,
+						onOpen,
 						onSelect
 					}), [
-						closeOnSelect,
-						descendants,
+						onClose,
+						onOpen,
+						onSelect,
 						onActiveDescendant,
-						onCloseRef,
-						onSelect
+						subMenu,
+						subMenuDirection,
+						onCloseSubMenu
 					]),
-					children: /* @__PURE__ */ jsx(ComponentContext, {
+					children: /* @__PURE__ */ jsx(MainMenuContext, {
 						value: useMemo(() => ({
-							getContentProps,
-							getContextTriggerProps,
-							getSeparatorProps,
-							getTriggerProps
+							closeOnSelect,
+							descendants,
+							onActiveDescendant,
+							onCloseRef,
+							onSelect
 						}), [
-							getContentProps,
-							getContextTriggerProps,
-							getSeparatorProps,
-							getTriggerProps
+							closeOnSelect,
+							descendants,
+							onActiveDescendant,
+							onCloseRef,
+							onSelect
 						]),
-						children: /* @__PURE__ */ jsx(PopoverRoot, {
-							...mergedPopoverProps,
-							children
+						children: /* @__PURE__ */ jsx(ComponentContext, {
+							value: useMemo(() => ({
+								getContentProps,
+								getContextTriggerProps,
+								getSeparatorProps,
+								getTriggerProps
+							}), [
+								getContentProps,
+								getContextTriggerProps,
+								getSeparatorProps,
+								getTriggerProps
+							]),
+							children: /* @__PURE__ */ jsx(PopoverRoot, {
+								...mergedPopoverProps,
+								children
+							})
 						})
 					})
 				})

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  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?: Popover.RootProps[\"placement\"]\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":";;;;;;;;;;;;;;;;;;;AA6GA,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  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?: Popover.RootProps[\"placement\"]\n}\n\nconst {\n  ComponentContext,\n  HydrationContext,\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, suppressHydrationWarning, ...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 hydrationContext = useMemo(\n    () => (suppressHydrationWarning ? { suppressHydrationWarning } : {}),\n    [suppressHydrationWarning],\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      <HydrationContext value={hydrationContext}>\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      </HydrationContext>\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":";;;;;;;;;;;;;;;;;;;AA6GA,MAAM,EACJ,kBACA,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,0BAA0B,GAAG,UACjD,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;AAkDD,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAiB,OAnDG,cAChB,2BAA2B,EAAE,0BAA0B,GAAG,EAAE,EACnE,CAAC,yBAAyB,CAC3B;aAiDK,oBAAC;IAAuB,OAAO;cAC7B,oBAAC;KAAY,OAjDD,eACX;MACL;MACA;MACA;MACA;MACA;MACA;MACA;MACD,GACD;MACE;MACA;MACA;MACA;MACA;MACA;MACA;MACD,CACF;eA+BS,oBAAC;MAAgB,OA9BH,eACf;OACL;OACA;OACA;OACA;OACA;OACD,GACD;OAAC;OAAe;OAAa;OAAoB;OAAY;OAAS,CACvE;gBAsBW,oBAAC;OAAiB,OArBL,eAChB;QACL;QACA;QACA;QACA;QACD,GACD;QACE;QACA;QACA;QACA;QACD,CACF;iBASa,oBAACC;QAAa,GAAI;QAAqB;SAAwB;QAC9C;OA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"}

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

@@ -10,38 +10,41 @@ import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/native-popover/native-popover.tsx
-const { ComponentContext, PropsContext: NativePopoverPropsContext, StyleContext, useComponentContext, usePropsContext: useNativePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("native-popover", nativePopoverStyle);
+const { ComponentContext, HydrationContext, PropsContext: NativePopoverPropsContext, StyleContext, useComponentContext, usePropsContext: useNativePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("native-popover", nativePopoverStyle);
 /**
 * `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.
 *
 * @see https://yamada-ui.com/docs/components/native-popover
 */
 const NativePopoverRoot = (props) => {
-	const [styleContext, { children, ...rest }] = useRootComponentProps(props);
+	const [styleContext, { children, suppressHydrationWarning, ...rest }] = useRootComponentProps(props);
 	const { getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps } = useNativePopover(rest);
 	return /* @__PURE__ */ jsx(StyleContext, {
 		value: styleContext,
-		children: /* @__PURE__ */ jsx(ComponentContext, {
-			value: useMemo(() => ({
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			}), [
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			]),
-			children
+		children: /* @__PURE__ */ jsx(HydrationContext, {
+			value: useMemo(() => suppressHydrationWarning ? { suppressHydrationWarning } : {}, [suppressHydrationWarning]),
+			children: /* @__PURE__ */ jsx(ComponentContext, {
+				value: useMemo(() => ({
+					getAnchorProps,
+					getBodyProps,
+					getCloseTriggerProps,
+					getContentProps,
+					getFooterProps,
+					getHeaderProps,
+					getPositionerProps,
+					getTriggerProps
+				}), [
+					getAnchorProps,
+					getBodyProps,
+					getCloseTriggerProps,
+					getContentProps,
+					getFooterProps,
+					getHeaderProps,
+					getPositionerProps,
+					getTriggerProps
+				]),
+				children
+			})
 		})
 	});
 };

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

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

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

@@ -89,7 +89,7 @@ const usePopoverStyleProps = (props = {}) => {
 		strategy
 	};
 };
-const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useComponentContext, usePropsContext: usePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("popover", popoverStyle);
+const { ComponentContext, HydrationContext, PropsContext: PopoverPropsContext, StyleContext, useComponentContext, usePropsContext: usePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("popover", popoverStyle);
 /**
 * `Popover` is a component that floats around an element to display information.
 *
@@ -97,42 +97,45 @@ const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useCo
 */
 const PopoverRoot = (props) => {
 	const styleProps = usePopoverStyleProps(props);
-	const [styleContext, { animationScheme, children, duration, ...rest }] = useRootComponentProps({
+	const [styleContext, { animationScheme, children, duration, suppressHydrationWarning, ...rest }] = useRootComponentProps({
 		...props,
 		...styleProps
 	});
 	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = usePopover(rest);
 	return /* @__PURE__ */ jsx(StyleContext, {
 		value: styleContext,
-		children: /* @__PURE__ */ jsx(ComponentContext, {
-			value: useMemo(() => ({
-				animationScheme,
-				duration,
-				open,
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			}), [
-				open,
-				animationScheme,
-				duration,
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			]),
-			children: (0, utils_exports.runIfFn)(children, {
-				open,
-				onClose
+		children: /* @__PURE__ */ jsx(HydrationContext, {
+			value: useMemo(() => suppressHydrationWarning ? { suppressHydrationWarning } : {}, [suppressHydrationWarning]),
+			children: /* @__PURE__ */ jsx(ComponentContext, {
+				value: useMemo(() => ({
+					animationScheme,
+					duration,
+					open,
+					getAnchorProps,
+					getBodyProps,
+					getCloseTriggerProps,
+					getContentProps,
+					getFooterProps,
+					getHeaderProps,
+					getPositionerProps,
+					getTriggerProps
+				}), [
+					open,
+					animationScheme,
+					duration,
+					getAnchorProps,
+					getBodyProps,
+					getCloseTriggerProps,
+					getContentProps,
+					getFooterProps,
+					getHeaderProps,
+					getPositionerProps,
+					getTriggerProps
+				]),
+				children: (0, utils_exports.runIfFn)(children, {
+					open,
+					onClose
+				})
 			})
 		})
 	});