@yamada-ui/react 2.1.4-dev-20260323182837 → 2.2.0-next-20260324183323

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

@@ -0,0 +1,253 @@
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
+import { UseDisclosureProps } from "../../hooks/use-disclosure/use-disclosure.js";
+import { UseCheckboxProps } from "../checkbox/use-checkbox.js";
+import "../checkbox/index.js";
+import "../../index.js";
+import * as react270 from "react";
+import { ReactNode, RefObject, SetStateAction } from "react";
+
+//#region src/components/tree/use-tree.d.ts
+interface TreeControl {
+  collapse: () => void;
+  expand: () => void;
+}
+interface TreeDescendantProps {
+  expanded: boolean;
+  group: boolean;
+  id: string;
+  value: string;
+}
+declare const TreeDescendantsContext: react270.Context<{
+    active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react270.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+  }>, useTreeDescendant: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => {
+    descendants: {
+      active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+      count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+      destroy: () => void;
+      enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+      enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+      enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+      firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+      lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react270.RefCallback<HTMLElement>;
+      unregister: (node?: HTMLElement | null | undefined) => void;
+      value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    };
+    register: react270.RefCallback<HTMLElement>;
+  }, useTreeDescendants: () => {
+    active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react270.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+  };
+interface TreeContext extends Omit<UseTreeReturn, "descendants" | "getRootProps"> {}
+declare const TreeContext: react270.Context<TreeContext>, useTreeContext: () => TreeContext;
+interface TreeItemContext extends Pick<UseTreeItemReturn, "branchOpen" | "groupOpen" | "level" | "onGroupClose" | "onGroupOpen" | "onGroupToggle" | "value"> {}
+declare const TreeItemContext: react270.Context<TreeItemContext | undefined>, useTreeItemContext: () => TreeItemContext | undefined;
+interface UseTreeProps<Multiple extends boolean = false> extends HTMLProps<"ul"> {
+  /**
+   * If `true`, the tree will allow checkable items.
+   *
+   * @default false
+   */
+  checkable?: boolean;
+  /**
+   * The checked value of the tree.
+   */
+  checkedValue?: string[];
+  /**
+   * Ref of the tree callbacks.
+   */
+  controlRef?: RefObject<null | TreeControl>;
+  /**
+   * The initial checked value of the tree.
+   */
+  defaultCheckedValue?: string[];
+  /**
+   * The initial expanded value of the tree.
+   */
+  defaultExpandedValue?: string[];
+  /**
+   * The initial selected value of the tree.
+   */
+  defaultSelectedValue?: Multiple extends true ? string[] : string;
+  /**
+   * The expanded value of the tree.
+   */
+  expandedValue?: string[];
+  /**
+   * If `true`, the tree will allow multiple selection.
+   *
+   * @default false
+   */
+  multiple?: Multiple;
+  /**
+   * The selected value of the tree.
+   */
+  selectedValue?: Multiple extends true ? string[] : string;
+  /**
+   * The callback invoked when checked value changes.
+   */
+  onCheckedChange?: (value: string[]) => void;
+  /**
+   * The callback invoked when expanded value changes.
+   */
+  onExpandedChange?: (value: string[]) => void;
+  /**
+   * The callback invoked when selected value changes.
+   */
+  onSelectedChange?: (value: Multiple extends true ? string[] : string) => void;
+}
+declare const useTree: <Multiple extends boolean = false>({
+  checkable,
+  checkedValue: checkedValueProp,
+  children,
+  controlRef,
+  defaultCheckedValue,
+  defaultExpandedValue,
+  defaultSelectedValue,
+  expandedValue: expandedValueProp,
+  multiple,
+  selectedValue: selectedValueProp,
+  onCheckedChange: onCheckedChangeProp,
+  onExpandedChange: onExpandedChangeProp,
+  onSelectedChange: onSelectedChangeProp,
+  ...rest
+}?: UseTreeProps<Multiple>) => {
+  activeDescendant: RefObject<Descendant<HTMLElement, TreeDescendantProps> | null>;
+  checkable: boolean;
+  checkedValue: string[];
+  descendants: {
+    active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react270.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+  };
+  expandedValue: string[];
+  multiple: Multiple | undefined;
+  selectedValue: Multiple extends true ? string[] : string;
+  getRootProps: PropGetter<"ul", undefined, undefined>;
+  onActiveDescendant: (descendant?: Descendant<HTMLElement, TreeDescendantProps>, shouldFocus?: boolean) => void;
+  onCheckedChange: react270.Dispatch<SetStateAction<string[]>>;
+  onCollapseAll: () => void;
+  onExpandAll: () => void;
+  onExpandedChange: (value: string) => void;
+  onSearch: (value: string, omitValue: string) => void;
+  onSelectedChange: (value: SetStateAction<string | string[]>) => void;
+};
+type UseTreeReturn = ReturnType<typeof useTree>;
+interface UseTreeItemProps extends HTMLProps<"li">, Omit<UseDisclosureProps, "timing"> {
+  /**
+   * If `true`, the tree item will be disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The value of the item.
+   */
+  value?: string;
+  /**
+   * If provided, the tree item will be rendered as an async tree item.
+   */
+  asyncChildren?: () => Promise<ReactNode>;
+}
+declare const useTreeItem: ({
+  asyncChildren,
+  children: childrenProp,
+  defaultOpen,
+  disabled,
+  open: openProp,
+  value: valueProp,
+  onClose: onCloseProp,
+  onOpen: onOpenProp,
+  ...rest
+}?: UseTreeItemProps) => {
+  branchOpen: boolean[];
+  checked: boolean;
+  children: ReactNode;
+  disabled: boolean;
+  group: boolean;
+  groupLoading: boolean;
+  groupOpen: boolean;
+  indeterminate: boolean;
+  level: number;
+  selected: boolean;
+  value: string;
+  getCheckboxProps: PropGetter<UseCheckboxProps<string>, undefined, undefined>;
+  getGroupItemProps: PropGetter<"li", undefined, undefined>;
+  getGroupProps: PropGetter<"ul", undefined, undefined>;
+  getIndicatorProps: PropGetter<"svg", undefined, undefined>;
+  getItemProps: PropGetter<"li", undefined, undefined>;
+  getLabelProps: PropGetter<"span", undefined, undefined>;
+  getTriggerProps: PropGetter<"div", undefined, undefined>;
+  onGroupClose: () => void;
+  onGroupOpen: () => void;
+  onGroupToggle: () => void;
+};
+type UseTreeItemReturn = ReturnType<typeof useTreeItem>;
+//#endregion
+export { TreeContext, TreeControl, TreeDescendantsContext, TreeItemContext, UseTreeItemProps, UseTreeItemReturn, UseTreeProps, UseTreeReturn, useTree, useTreeContext, useTreeDescendant, useTreeDescendants, useTreeItem, useTreeItemContext };
+//# sourceMappingURL=use-tree.d.ts.map

package/dist/types/components/visually-hidden/visually-hidden.d.ts

@@ -1,11 +1,11 @@
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react995 from "react";
+import * as react285 from "react";
 
 //#region src/components/visually-hidden/visually-hidden.d.ts
 interface VisuallyHiddenProps extends HTMLStyledProps<"span"> {}
-declare const VisuallyHiddenPropsContext: react995.Context<Partial<VisuallyHiddenProps> | undefined>, useVisuallyHiddenPropsContext: () => Partial<VisuallyHiddenProps> | undefined;
+declare const VisuallyHiddenPropsContext: react285.Context<Partial<VisuallyHiddenProps> | undefined>, useVisuallyHiddenPropsContext: () => Partial<VisuallyHiddenProps> | undefined;
 /**
  * `VisuallyHidden` is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.
  *

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

@@ -5,11 +5,11 @@ import { FlexProps } from "../flex/flex.js";
 import "../flex/index.js";
 import { WrapStyle } from "./wrap.style.js";
 import "../../index.js";
-import * as react993 from "react";
+import * as react249 from "react";
 
 //#region src/components/wrap/wrap.d.ts
 interface WrapProps extends WithoutThemeProps<FlexProps, WrapStyle>, ThemeProps<WrapStyle> {}
-declare const WrapPropsContext: react993.Context<Partial<WrapProps> | undefined>, useWrapPropsContext: () => Partial<WrapProps> | undefined;
+declare const WrapPropsContext: react249.Context<Partial<WrapProps> | undefined>, useWrapPropsContext: () => Partial<WrapProps> | undefined;
 /**
  * `Wrap` is a component that has `wrap` set on `Flex`. It inherits convenient style shorthand from `Flex`.
  *

package/dist/types/core/components/create-component.d.ts

@@ -3,7 +3,7 @@ import { ComponentSlotStyle, ComponentStyle, System, WithoutThemeProps } from ".
 import { StyledOptions } from "../system/styled.js";
 import { CSSObject, CSSSlotObject } from "../css/index.types.js";
 import { As, Component as Component$1, HTMLStyledProps } from "./index.types.js";
-import * as react987 from "react";
+import * as react279 from "react";
 import { FC, FunctionComponent } from "react";
 
 //#region src/core/components/create-component.d.ts
@@ -34,8 +34,8 @@ declare function createComponent<Y extends object = {}, M extends ComponentStyle
     className,
     ...options
   }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => Component<D_1, H>;
-  ComponentContext: react987.Context<D>;
-  PropsContext: react987.Context<Partial<Y> | undefined>;
+  ComponentContext: react279.Context<D>;
+  PropsContext: react279.Context<Partial<Y> | undefined>;
   useComponentContext: () => D;
   usePropsContext: () => Partial<Y> | undefined;
   withContext: <D_1 extends AsWithFragment = "div", H extends Y = Y, R extends keyof H = keyof H>(el: D_1 | FC<WithoutThemeProps<H, M, R>>, {
@@ -57,16 +57,16 @@ declare function createSlotComponent<Y extends object = {}, M extends ComponentS
     className,
     ...options
   }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => Component<H, R>;
-  ComponentContext: react987.Context<D>;
-  PropsContext: react987.Context<Partial<Y> | undefined>;
-  StyleContext: react987.Context<CSSSlotObject<ComponentSlotName<M>>>;
+  ComponentContext: react279.Context<D>;
+  PropsContext: react279.Context<Partial<Y> | undefined>;
+  StyleContext: react279.Context<CSSSlotObject<ComponentSlotName<M>>>;
   useClassNames: () => {
     [key: string]: string;
   };
   useComponentContext: () => D;
   usePropsContext: () => Partial<Y> | undefined;
   useStyleContext: () => CSSSlotObject<ComponentSlotName<M>>;
-  withContext: <H extends AsWithFragment = "div", R extends Dict = (H extends keyof react987.JSX.IntrinsicElements ? HTMLStyledProps<H> : Dict<any>)>(el: FC<R> | H, slot?: ComponentSlot<ComponentSlotName<M>>, {
+  withContext: <H extends AsWithFragment = "div", R extends Dict = (H extends keyof react279.JSX.IntrinsicElements ? HTMLStyledProps<H> : Dict<any>)>(el: FC<R> | H, slot?: ComponentSlot<ComponentSlotName<M>>, {
     name,
     className,
     withContext,

package/dist/types/core/system/color-mode-provider.d.ts

@@ -1,6 +1,6 @@
 import { ColorMode, ColorModeWithSystem, ThemeConfig } from "./index.types.js";
 import { Storage } from "./storage-manager.js";
-import * as react986 from "react";
+import * as react266 from "react";
 import { FC, PropsWithChildren } from "react";
 
 //#region src/core/system/color-mode-provider.d.ts
@@ -11,7 +11,7 @@ interface ColorModeContext {
   toggleColorMode: () => void;
   forced?: boolean;
 }
-declare const ColorModeContext: react986.Context<ColorModeContext>;
+declare const ColorModeContext: react266.Context<ColorModeContext>;
 interface ColorModeProviderProps extends PropsWithChildren {
   /**
    * The forced color mode.

package/dist/types/core/system/styled.d.ts

@@ -3,10 +3,10 @@ import { CSSModifierObject, CSSPropObject } from "../css/index.types.js";
 import { As, StyledComponent } from "../components/index.types.js";
 import { ShouldForwardProp } from "../components/props.js";
 import "../components/index.js";
-import * as react984 from "react";
+import * as react268 from "react";
 
 //#region src/core/system/styled.d.ts
-declare const ColorSchemeContext: react984.Context<ColorScheme | undefined>, useColorSchemeContext: () => ColorScheme | undefined;
+declare const ColorSchemeContext: react268.Context<ColorScheme | undefined>, useColorSchemeContext: () => ColorScheme | undefined;
 interface StyledOptions<Y extends CSSPropObject = CSSPropObject, M extends CSSModifierObject = CSSModifierObject, D extends CSSModifierObject = CSSModifierObject, H extends number | string | symbol = string> extends Omit<ComponentStyle<Y, M, D>, "className"> {
   className?: ((system: System) => string) | string;
   displayName?: string;

package/dist/types/core/system/system-provider.d.ts

@@ -1,10 +1,10 @@
 import { System, ThemeConfig, UsageTheme } from "./index.types.js";
-import * as react985 from "react";
+import * as react267 from "react";
 import { FC, PropsWithChildren } from "react";
 
 //#region src/core/system/system-provider.d.ts
 interface SystemContext extends System {}
-declare const SystemContext: react985.Context<SystemContext>;
+declare const SystemContext: react267.Context<SystemContext>;
 interface SystemProviderProps extends PropsWithChildren {
   /**
    * The config of the yamada ui.

package/dist/types/hooks/use-breakpoint/use-breakpoint-state.d.ts

@@ -1,6 +1,6 @@
 import { ResponsiveObject } from "../../core/css/index.types.js";
 import "../../core/index.js";
-import * as react982 from "react";
+import * as react46 from "react";
 
 //#region src/hooks/use-breakpoint/use-breakpoint-state.d.ts
 
@@ -9,7 +9,7 @@ import * as react982 from "react";
  *
  * @see https://yamada-ui.com/docs/hooks/use-breakpoint-state
  */
-declare const useBreakpointState: <Y>(initialState: ResponsiveObject<Y, false>) => [Y, react982.Dispatch<react982.SetStateAction<Y>>];
+declare const useBreakpointState: <Y>(initialState: ResponsiveObject<Y, false>) => [Y, react46.Dispatch<react46.SetStateAction<Y>>];
 //#endregion
 export { useBreakpointState };
 //# sourceMappingURL=use-breakpoint-state.d.ts.map

package/dist/types/hooks/use-clickable/index.d.ts

@@ -1,6 +1,6 @@
 import { StyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react0 from "react";
+import * as react10 from "react";
 import { HTMLAttributes, KeyboardEvent, MouseEvent, Ref } from "react";
 
 //#region src/hooks/use-clickable/index.d.ts
@@ -71,12 +71,12 @@ declare const useClickable: <Y extends HTMLElement = HTMLElement, M extends Prop
   "aria-disabled": boolean | undefined;
   disabled: boolean | undefined;
   onClick: (ev: MouseEvent<Y>) => void;
-  onKeyDown: react0.KeyboardEventHandler<Y> | undefined;
-  onKeyUp: react0.KeyboardEventHandler<Y> | undefined;
-  onMouseDown: react0.MouseEventHandler<Y> | undefined;
-  onMouseLeave: react0.MouseEventHandler<Y> | undefined;
-  onMouseOver: react0.MouseEventHandler<Y> | undefined;
-  onMouseUp: react0.MouseEventHandler<Y> | undefined;
+  onKeyDown: react10.KeyboardEventHandler<Y> | undefined;
+  onKeyUp: react10.KeyboardEventHandler<Y> | undefined;
+  onMouseDown: react10.MouseEventHandler<Y> | undefined;
+  onMouseLeave: react10.MouseEventHandler<Y> | undefined;
+  onMouseOver: react10.MouseEventHandler<Y> | undefined;
+  onMouseUp: react10.MouseEventHandler<Y> | undefined;
 }) | (Omit<UseClickableProps<Y, M>, "disabled" | "ref" | "tabIndex" | "onKeyDown" | "onKeyUp" | "onClick" | "onMouseDown" | "onMouseLeave" | "onMouseOver" | "onMouseUp" | "clickOnEnter" | "clickOnSpace" | "disableTouchBehavior" | "focusable" | "focusOnClick"> & {
   ref: (node: any) => void;
   "aria-disabled": "true" | undefined;

package/dist/types/hooks/use-combobox/index.d.ts

@@ -6,7 +6,7 @@ import { UseDisclosureProps } from "../use-disclosure/use-disclosure.js";
 import { UsePopoverProps } from "../../components/popover/use-popover.js";
 import "../../components/popover/index.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as react5 from "react";
+import * as react0 from "react";
 import { JSXElementConstructor, ReactNode, RefObject } from "react";
 
 //#region src/hooks/use-combobox/index.d.ts
@@ -47,7 +47,7 @@ interface ComboboxDescendantProps {
   value?: string;
 }
 type ComboboxDescendant = Descendant<HTMLDivElement, ComboboxDescendantProps>;
-declare const ComboboxDescendantsContext: react5.Context<{
+declare const ComboboxDescendantsContext: react0.Context<{
     active: (target?: HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<ComboboxDescendantProps> | undefined) => number;
     destroy: () => void;
@@ -64,7 +64,7 @@ declare const ComboboxDescendantsContext: react5.Context<{
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react5.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react0.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -86,12 +86,12 @@ declare const ComboboxDescendantsContext: react5.Context<{
       lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
       nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
       prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-      register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react5.RefCallback<HTMLDivElement>;
+      register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react0.RefCallback<HTMLDivElement>;
       unregister: (node?: HTMLDivElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
       values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
     };
-    register: react5.RefCallback<HTMLDivElement>;
+    register: react0.RefCallback<HTMLDivElement>;
   }, useComboboxDescendantRegister: (descendants?: {
     active: (target?: HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<ComboboxDescendantProps> | undefined) => number;
@@ -109,11 +109,11 @@ declare const ComboboxDescendantsContext: react5.Context<{
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react5.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react0.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
-  } | undefined) => (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps>) => react5.RefCallback<HTMLDivElement>, useComboboxDescendants: () => {
+  } | undefined) => (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps>) => react0.RefCallback<HTMLDivElement>, useComboboxDescendants: () => {
     active: (target?: HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<ComboboxDescendantProps> | undefined) => number;
     destroy: () => void;
@@ -130,15 +130,15 @@ declare const ComboboxDescendantsContext: react5.Context<{
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react5.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react0.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
   };
 interface ComboboxContext extends Pick<UseComboboxReturn, "onActiveDescendant" | "onClose" | "onSelect"> {}
-declare const ComboboxContext: react5.Context<ComboboxContext>, useComboboxContext: () => ComboboxContext;
+declare const ComboboxContext: react0.Context<ComboboxContext>, useComboboxContext: () => ComboboxContext;
 interface ComboboxGroupContext extends Pick<UseComboboxGroupReturn, "getLabelProps"> {}
-declare const ComboboxGroupContext: react5.Context<ComboboxGroupContext>, useComboboxGroupContext: () => ComboboxGroupContext;
+declare const ComboboxGroupContext: react0.Context<ComboboxGroupContext>, useComboboxGroupContext: () => ComboboxGroupContext;
 interface UseComboboxProps extends Omit<HTMLProps, "onChange">, Omit<UseDisclosureProps, "timing">, Omit<UsePopoverProps, "autoFocus" | "initialFocusRef" | "modal" | "transform" | "updateRef"> {
   /**
    * If `true`, the list element will be closed when value is selected.
@@ -214,7 +214,7 @@ declare const useCombobox: (props?: UseComboboxProps) => {
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react5.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react0.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -289,7 +289,7 @@ declare const useComboboxItem: ({
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react5.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react0.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];

package/dist/types/hooks/use-field-sizing/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as react21 from "react";
+import * as react22 from "react";
 
 //#region src/hooks/use-field-sizing/index.d.ts
 interface UseFieldSizingProps {
@@ -8,7 +8,7 @@ interface UseFieldSizingProps {
 declare const useFieldSizing: <Y extends HTMLElement>({
   value
 }: UseFieldSizingProps) => {
-  ref: react21.RefObject<Y | null>;
+  ref: react22.RefObject<Y | null>;
   text: react_jsx_runtime0.JSX.Element;
 };
 type UseFieldSizingReturn = ReturnType<typeof useFieldSizing>;

package/dist/types/hooks/use-hover/index.d.ts

@@ -1,4 +1,4 @@
-import * as react22 from "react";
+import * as react21 from "react";
 
 //#region src/hooks/use-hover/index.d.ts
 
@@ -8,7 +8,7 @@ import * as react22 from "react";
  * @see https://yamada-ui.com/docs/hooks/use-hover
  */
 declare const useHover: <Y extends HTMLElement = HTMLDivElement>() => {
-  ref: react22.RefObject<Y | null>;
+  ref: react21.RefObject<Y | null>;
   hovered: boolean;
 };
 //#endregion