@yamada-ui/react 2.2.1 → 2.2.2-dev-20260514122820

package/dist/types/components/checkbox-card/checkbox-card.d.ts

@@ -63,7 +63,7 @@ interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLSty
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -213,7 +213,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -363,7 +363,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/checkbox-card/checkbox-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/checkbox-card/checkbox-card.style.d.ts
-declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const checkboxCardStyle: ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/color-picker/color-picker.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/color-picker/color-picker.style.d.ts
-declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper">>, {
+declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "colorSwatch" | "root" | "field" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "colorSwatch" | "root" | "field" | "eyeDropper">>, {
   xs: {
     field: {
       fontSize: "1em";

package/dist/types/components/color-selector/color-selector.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/color-selector/color-selector.style.d.ts
-declare const colorSelectorStyle: ComponentSlotStyle<"root" | "hueSlider" | "saturationSlider" | "eyeDropper" | "colorSwatchGroupLabel" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchItem", {
+declare const colorSelectorStyle: ComponentSlotStyle<"hueSlider" | "saturationSlider" | "root" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem", {
   /**
    * The shape of the thumb and color swatch.
    *
@@ -22,7 +22,7 @@ declare const colorSelectorStyle: ComponentSlotStyle<"root" | "hueSlider" | "sat
   md: {};
   lg: {};
   xl: {};
-}, CSSModifierObject<CSSSlotObject<"root" | "hueSlider" | "saturationSlider" | "eyeDropper" | "colorSwatchGroupLabel" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchItem">>>;
+}, CSSModifierObject<CSSSlotObject<"hueSlider" | "saturationSlider" | "root" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem">>>;
 type ColorSelectorStyle = typeof colorSelectorStyle;
 //#endregion
 export { ColorSelectorStyle, colorSelectorStyle };

package/dist/types/components/drawer/drawer.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/drawer/drawer.style.d.ts
-declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton" | "dragBar", {
+declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root" | "dragBar", {
   /**
    * The placement of the drawer.
    *
@@ -117,7 +117,7 @@ declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "ti
       rounded: "0";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton" | "dragBar">>>;
+}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root" | "dragBar">>>;
 type DrawerStyle = typeof drawerStyle;
 //#endregion
 export { DrawerStyle, drawerStyle };

package/dist/types/components/empty-state/empty-state.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/empty-state/empty-state.style.d.ts
-declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>, {
+declare const emptyState: ComponentSlotStyle<"title" | "content" | "indicator" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "indicator" | "root" | "description">>, {
   sm: {
     content: {
       gap: "xs";
@@ -47,7 +47,7 @@ declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "ind
       fontSize: "xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "indicator" | "root" | "description">>>;
 type EmptyState = typeof emptyState;
 //#endregion
 export { EmptyState, emptyState };

package/dist/types/components/file-input/file-input.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/file-input/file-input.style.d.ts
-declare const fileInputStyle: ComponentSlotStyle<"root" | "tag", CSSPropObject<CSSSlotObject<"root" | "tag">>, {
+declare const fileInputStyle: ComponentSlotStyle<"tag" | "root", CSSPropObject<CSSSlotObject<"tag" | "root">>, {
   xs: {
     root: {
       "&:has(~ [data-input-element])"?: {

package/dist/types/components/icon/icon.d.ts

@@ -8,11 +8,11 @@ import * as _$_yamada_ui_utils0 from "@yamada-ui/utils";
 
 //#region src/components/icon/icon.d.ts
 interface IconProps extends HTMLStyledProps<"svg">, ThemeProps<IconStyle> {}
-declare const component: <D extends "fragment" | As = "div", H extends _$_yamada_ui_utils0.Dict = IconProps>(el: D | _$react.FC<H>, {
+declare const component: <D extends As | "fragment" = "div", H extends _$_yamada_ui_utils0.Dict = IconProps>(el: D | _$react.FC<H>, {
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => D extends "fragment" ? _$react.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>, IconPropsContext: _$react.Context<Partial<IconProps> | undefined>, useIconPropsContext: () => Partial<IconProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends IconProps = IconProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
+  }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => D extends "fragment" ? _$react.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>, IconPropsContext: _$react.Context<Partial<IconProps> | undefined>, useIconPropsContext: () => Partial<IconProps> | undefined, withContext: <D extends As | "fragment" = "div", H extends IconProps = IconProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
     name,
     className,
     withContext,

package/dist/types/components/loading/audio.d.ts

@@ -5,7 +5,7 @@ interface AudioProps extends LoadingProps {}
 /**
  * `Loading` is a component displayed during waiting times, such as when data is being loaded.
  *
- * @see https://yamada-ui.com/docs/components/feedback/loading
+ * @see https://yamada-ui.com/docs/components/loading
  */
 declare const Audio: Component<"svg", AudioProps>;
 //#endregion

package/dist/types/components/loading/circles.d.ts

@@ -5,7 +5,7 @@ interface CirclesProps extends LoadingProps {}
 /**
  * `Loading` is a component displayed during waiting times, such as when data is being loaded.
  *
- * @see https://yamada-ui.com/docs/components/feedback/loading
+ * @see https://yamada-ui.com/docs/components/loading
  */
 declare const Circles: Component<"svg", CirclesProps>;
 //#endregion

package/dist/types/components/loading/dots.d.ts

@@ -5,7 +5,7 @@ interface DotsProps extends LoadingProps {}
 /**
  * `Loading` is a component displayed during waiting times, such as when data is being loaded.
  *
- * @see https://yamada-ui.com/docs/components/feedback/loading
+ * @see https://yamada-ui.com/docs/components/loading
  */
 declare const Dots: Component<"svg", DotsProps>;
 //#endregion

package/dist/types/components/loading/grid.d.ts

@@ -5,7 +5,7 @@ interface GridProps extends LoadingProps {}
 /**
  * `Loading` is a component displayed during waiting times, such as when data is being loaded.
  *
- * @see https://yamada-ui.com/docs/components/feedback/loading
+ * @see https://yamada-ui.com/docs/components/loading
  */
 declare const Grid: Component<"svg", GridProps>;
 //#endregion

package/dist/types/components/loading/loading.d.ts

@@ -17,7 +17,7 @@ interface LoadingProps extends WithoutThemeProps<IconProps>, ThemeProps<LoadingS
    */
   secondaryColor?: CSSProps["color"];
 }
-declare const LoadingPropsContext: _$react.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
+declare const LoadingPropsContext: _$react.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends As | "fragment" = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
     name,
     className,
     withContext,

package/dist/types/components/loading/oval.d.ts

@@ -5,7 +5,7 @@ interface OvalProps extends LoadingProps {}
 /**
  * `Loading` is a component displayed during waiting times, such as when data is being loaded.
  *
- * @see https://yamada-ui.com/docs/components/feedback/loading
+ * @see https://yamada-ui.com/docs/components/loading
  */
 declare const Oval: Component<"svg", OvalProps>;
 //#endregion

package/dist/types/components/loading/puff.d.ts

@@ -5,7 +5,7 @@ interface PuffProps extends LoadingProps {}
 /**
  * `Loading` is a component displayed during waiting times, such as when data is being loaded.
  *
- * @see https://yamada-ui.com/docs/components/feedback/loading
+ * @see https://yamada-ui.com/docs/components/loading
  */
 declare const Puff: Component<"svg", PuffProps>;
 //#endregion

package/dist/types/components/loading/rings.d.ts

@@ -5,7 +5,7 @@ interface RingsProps extends LoadingProps {}
 /**
  * `Loading` is a component displayed during waiting times, such as when data is being loaded.
  *
- * @see https://yamada-ui.com/docs/components/feedback/loading
+ * @see https://yamada-ui.com/docs/components/loading
  */
 declare const Rings: Component<"svg", RingsProps>;
 //#endregion

package/dist/types/components/menu/menu.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/menu/menu.style.d.ts
-declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
+declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>, {
   sm: {
     command: {
       fontSize: "2xs";
@@ -86,7 +86,7 @@ declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "con
       px: "2";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>>;
 type MenuStyle = typeof menuStyle;
 //#endregion
 export { MenuStyle, menuStyle };

package/dist/types/components/modal/modal.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/modal/modal.style.d.ts
-declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton", {
+declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root", {
   /**
    * The placement of the modal.
    *
@@ -155,7 +155,7 @@ declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "tit
       p: "0";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton">>>;
+}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root">>>;
 type ModalStyle = typeof modalStyle;
 //#endregion
 export { ModalStyle, modalStyle };

package/dist/types/components/notice/notice.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/notice/notice.style.d.ts
-declare const noticeStyle: ComponentSlotStyle<"content" | "item" | "root" | "closeButton", CSSPropObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>>;
+declare const noticeStyle: ComponentSlotStyle<"content" | "closeButton" | "item" | "root", CSSPropObject<CSSSlotObject<"content" | "closeButton" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "item" | "root">>>;
 type NoticeStyle = typeof noticeStyle;
 //#endregion
 export { NoticeStyle };

package/dist/types/components/number-input/number-input.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/number-input/number-input.style.d.ts
-declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "decrement" | "increment" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "decrement" | "increment" | "control">>, {
+declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "control" | "decrement" | "increment", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "control" | "decrement" | "increment">>, {
   xs: {
     control: {
       boxSize: "calc({--height} - {spaces.2})";

package/dist/types/components/password-input/strength-meter.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/password-input/strength-meter.style.d.ts
-declare const strengthMeterStyle: ComponentSlotStyle<"label" | "root" | "indicator" | "indicators", CSSPropObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>>;
+declare const strengthMeterStyle: ComponentSlotStyle<"label" | "indicator" | "root" | "indicators", CSSPropObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>>;
 type StrengthMeterStyle = typeof strengthMeterStyle;
 //#endregion
 export { StrengthMeterStyle, strengthMeterStyle };

package/dist/types/components/progress/use-progress.d.ts

@@ -31,6 +31,7 @@ declare const useProgress: <Y extends "div" | "svg" = "div">({
   getRangeProps: (props?: HTMLProps<Y extends "svg" ? "circle" : "div">) => {
     slot?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["slot"] | undefined;
     style?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["style"] | undefined;
+    key?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["key"] | undefined;
     ref?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["ref"] | undefined;
     suppressHydrationWarning?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["suppressHydrationWarning"] | undefined;
     className?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["className"] | undefined;
@@ -263,12 +264,12 @@ declare const useProgress: <Y extends "div" | "svg" = "div">({
     onTransitionRunCapture?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["onTransitionRunCapture"] | undefined;
     onTransitionStart?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["onTransitionStart"] | undefined;
     onTransitionStartCapture?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["onTransitionStartCapture"] | undefined;
-    key?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["key"] | undefined;
     "data-indeterminate": string | undefined;
   };
   getRootProps: (props?: HTMLProps<Y>) => {
     slot?: _$react.JSX.IntrinsicElements[Y]["slot"] | undefined;
     style?: _$react.JSX.IntrinsicElements[Y]["style"] | undefined;
+    key?: _$react.JSX.IntrinsicElements[Y]["key"] | undefined;
     ref?: _$react.JSX.IntrinsicElements[Y]["ref"] | undefined;
     suppressHydrationWarning?: _$react.JSX.IntrinsicElements[Y]["suppressHydrationWarning"] | undefined;
     className?: _$react.JSX.IntrinsicElements[Y]["className"] | undefined;
@@ -501,12 +502,12 @@ declare const useProgress: <Y extends "div" | "svg" = "div">({
     onTransitionRunCapture?: _$react.JSX.IntrinsicElements[Y]["onTransitionRunCapture"] | undefined;
     onTransitionStart?: _$react.JSX.IntrinsicElements[Y]["onTransitionStart"] | undefined;
     onTransitionStartCapture?: _$react.JSX.IntrinsicElements[Y]["onTransitionStartCapture"] | undefined;
-    key?: _$react.JSX.IntrinsicElements[Y]["key"] | undefined;
     "data-indeterminate": string | undefined;
   };
   getTrackProps: (props?: HTMLProps<Y extends "svg" ? "circle" : "div">) => {
     slot?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["slot"] | undefined;
     style?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["style"] | undefined;
+    key?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["key"] | undefined;
     ref?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["ref"] | undefined;
     suppressHydrationWarning?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["suppressHydrationWarning"] | undefined;
     className?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["className"] | undefined;
@@ -739,7 +740,6 @@ declare const useProgress: <Y extends "div" | "svg" = "div">({
     onTransitionRunCapture?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["onTransitionRunCapture"] | undefined;
     onTransitionStart?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["onTransitionStart"] | undefined;
     onTransitionStartCapture?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["onTransitionStartCapture"] | undefined;
-    key?: _$react.JSX.IntrinsicElements[Y extends "svg" ? "circle" : "div"]["key"] | undefined;
     "data-indeterminate": string | undefined;
   };
 };

package/dist/types/components/radio/radio.d.ts

@@ -29,7 +29,7 @@ interface RadioProps<Y extends string = string> extends Merge<HTMLStyledProps<"l
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
     shape: {
       circle: {
         indicator: {
@@ -135,7 +135,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: _$react.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: _$react.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
     shape: {
       circle: {
         indicator: {
@@ -241,7 +241,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
     shape: {
       circle: {
         indicator: {

package/dist/types/components/radio/radio.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio/radio.style.d.ts
-declare const radioStyle: ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+declare const radioStyle: ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
   /**
    * The shape of the component
    *

package/dist/types/components/radio-card/radio-card.d.ts

@@ -55,7 +55,7 @@ interface RadioCardRootProps<Y extends string = string> extends Merge<HTMLStyled
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -232,7 +232,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -409,7 +409,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/radio-card/radio-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio-card/radio-card.style.d.ts
-declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const radioCardStyle: ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/segmented-control/segmented-control.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/segmented-control/segmented-control.style.d.ts
-declare const segmentedControlStyle: ComponentSlotStyle<"item" | "root" | "indicator", {
+declare const segmentedControlStyle: ComponentSlotStyle<"indicator" | "item" | "root", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -113,7 +113,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"item" | "root" | "indic
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"item" | "root" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"indicator" | "item" | "root">>>;
 type SegmentedControlStyle = typeof segmentedControlStyle;
 //#endregion
 export { SegmentedControlStyle, segmentedControlStyle };

package/dist/types/components/select/select.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/select/select.style.d.ts
-declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText", {
+declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText", {
   /**
    * If `true`, wrap the value text.
    *

package/dist/types/components/status/status.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/status/status.style.d.ts
-declare const statusStyle: ComponentSlotStyle<"label" | "root" | "indicator", CSSPropObject<CSSSlotObject<"label" | "root" | "indicator">>, {
+declare const statusStyle: ComponentSlotStyle<"label" | "indicator" | "root", CSSPropObject<CSSSlotObject<"label" | "indicator" | "root">>, {
   sm: {
     indicator: {
       boxSize: "2";
@@ -26,7 +26,7 @@ declare const statusStyle: ComponentSlotStyle<"label" | "root" | "indicator", CS
       fontSize: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root">>>;
 type StatusStyle = typeof statusStyle;
 //#endregion
 export { StatusStyle, statusStyle };

package/dist/types/components/steps/steps.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/steps/steps.style.d.ts
-declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "item" | "root" | "indicator" | "description", {
+declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "indicator" | "item" | "root" | "description", {
   /**
    * The orientation of the steps.
    *

package/dist/types/components/tag/tag.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tag/tag.style.d.ts
-declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "root" | "closeButton" | "endIcon" | "startIcon", {
+declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "closeButton" | "root" | "endIcon" | "startIcon", {
   /**
    * If `true`, the tag is full rounded. Else, it'll be slightly round.
    *

package/dist/types/components/timeline/timeline.d.ts

@@ -69,7 +69,7 @@ declare const TimelineRoot: Component<({
   index,
   items,
   ...rest
-}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "item" | "root" | "indicator" | "description" | "connector", {
+}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "indicator" | "item" | "root" | "description" | "connector", {
   align: {
     center: {
       content: {

package/dist/types/components/timeline/timeline.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/timeline/timeline.style.d.ts
-declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "item" | "root" | "indicator" | "description" | "connector", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "indicator" | "item" | "root" | "description" | "connector", {
   /**
    * The alignment of the timeline.
    *

package/dist/types/components/toggle/toggle.d.ts

@@ -12,7 +12,7 @@ import * as _$_yamada_ui_utils0 from "@yamada-ui/utils";
 
 //#region src/components/toggle/toggle.d.ts
 interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {

package/dist/types/components/tree/tree.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tree/tree.style.d.ts
-declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "item" | "root" | "indicator", {
+declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "indicator" | "item" | "root", {
   /**
    * The shape of the component
    *

package/dist/types/components/tree/use-tree.d.ts

@@ -244,6 +244,7 @@ declare const useTreeItem: ({
     title?: string | undefined | undefined;
     translate?: "yes" | "no" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
+    key?: _$react.Key | null | undefined;
     ref?: _$react.Ref<HTMLDivElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -517,7 +518,6 @@ declare const useTreeItem: ({
     onTransitionRunCapture?: _$react.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStart?: _$react.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStartCapture?: _$react.TransitionEventHandler<HTMLDivElement> | undefined;
-    key?: _$react.Key | null | undefined;
   };
   selected: boolean;
   value: string;

package/dist/types/providers/i18n-provider/i18n-provider.d.ts

@@ -134,7 +134,7 @@ declare const I18nContext: _$react.Context<I18nContext<{
   readonly toggle: {
     readonly "Toggle button": "Toggle button";
   };
-}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "closeButton.Close" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%" | "stat.Decreased by" | "stat.Increased by" | "tag.Close tag">>;
+}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "closeButton.Close" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "stat.Decreased by" | "stat.Increased by" | "tag.Close tag">>;
 interface I18nProviderProps {
   children?: ReactNode;
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.2.1",
+  "version": "2.2.2-dev-20260514122820",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",
@@ -205,6 +205,7 @@
     "test:dev:webkit": "vitest --watch --ui --project=browser:webkit",
     "test:dev:firefox": "vitest --watch --ui --project=browser:firefox",
     "test:coverage": "vitest run --coverage",
+    "test:coverage:dev": "vitest --watch --ui --coverage --coverage.provider=istanbul",
     "test:coverage:jsdom": "vitest run --project=jsdom --coverage --coverage.reportsDirectory=coverage/jsdom",
     "test:coverage:chromium": "vitest run --project=browser:chromium --coverage --coverage.provider=istanbul --coverage.reportsDirectory=coverage/chromium",
     "test:coverage:webkit": "vitest run --project=browser:webkit --coverage --coverage.provider=istanbul --coverage.reportsDirectory=coverage/webkit",