@yamada-ui/react 2.0.10-dev-20260301102815 → 2.1.0-dev-20260302130356

package/dist/types/components/qr-code/index.d.ts

@@ -0,0 +1,5 @@
+import { QrCodeStyle, qrCodeStyle } from "./qr-code.style.js";
+import { UseQrCodeProps, UseQrCodeReturn, useQrCode } from "./use-qr-code.js";
+import { QrCodeFrame, QrCodeFrameProps, QrCodeOverlay, QrCodeOverlayProps, QrCodePattern, QrCodePatternProps, QrCodePropsContext, QrCodeRoot, QrCodeRootProps, useQrCodePropsContext } from "./qr-code.js";
+import { namespace_d_exports } from "./namespace.js";
+export { namespace_d_exports as QrCode, QrCodeFrame, type QrCodeFrameProps, QrCodeOverlay, type QrCodeOverlayProps, QrCodePattern, type QrCodePatternProps, QrCodePropsContext, QrCodeRoot, type QrCodeRootProps, QrCodeStyle, UseQrCodeProps, UseQrCodeReturn, qrCodeStyle, useQrCode, useQrCodePropsContext };

package/dist/types/components/qr-code/namespace.d.ts

@@ -0,0 +1,9 @@
+import { QrCodeFrame, QrCodeFrameProps, QrCodeOverlay, QrCodeOverlayProps, QrCodePattern, QrCodePatternProps, QrCodePropsContext, QrCodeRoot, QrCodeRootProps, useQrCodePropsContext } from "./qr-code.js";
+
+//#region src/components/qr-code/namespace.d.ts
+declare namespace namespace_d_exports {
+  export { QrCodeFrame as Frame, QrCodeFrameProps as FrameProps, QrCodeOverlay as Overlay, QrCodeOverlayProps as OverlayProps, QrCodePattern as Pattern, QrCodePatternProps as PatternProps, QrCodePropsContext as PropsContext, QrCodeRoot as Root, QrCodeRootProps as RootProps, useQrCodePropsContext as usePropsContext };
+}
+//#endregion
+export { namespace_d_exports };
+//# sourceMappingURL=namespace.d.ts.map

package/dist/types/components/qr-code/qr-code.d.ts

@@ -0,0 +1,35 @@
+import { ThemeProps } from "../../core/system/index.types.js";
+import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { QrCodeStyle } from "./qr-code.style.js";
+import { UseQrCodeProps } from "./use-qr-code.js";
+import "../../index.js";
+import * as react86 from "react";
+
+//#region src/components/qr-code/qr-code.d.ts
+interface QrCodeRootProps extends Omit<HTMLStyledProps, "border" | "invert">, ThemeProps<QrCodeStyle>, UseQrCodeProps {
+  /**
+   * Props for the frame component.
+   */
+  frameProps?: QrCodeFrameProps;
+  /**
+   * Props for the pattern component.
+   */
+  patternProps?: QrCodePatternProps;
+}
+declare const QrCodePropsContext: react86.Context<Partial<QrCodeRootProps> | undefined>, useQrCodePropsContext: () => Partial<QrCodeRootProps> | undefined;
+/**
+ * `QrCode` is a component that displays a QR code.
+ *
+ * @see https://yamada-ui.com/docs/components/qr-code
+ */
+declare const QrCodeRoot: Component<"div", QrCodeRootProps>;
+interface QrCodeFrameProps extends HTMLStyledProps<"svg"> {}
+declare const QrCodeFrame: Component<"svg", QrCodeFrameProps>;
+interface QrCodePatternProps extends HTMLStyledProps<"path"> {}
+declare const QrCodePattern: Component<"path", QrCodePatternProps>;
+interface QrCodeOverlayProps extends HTMLStyledProps {}
+declare const QrCodeOverlay: Component<"div", QrCodeOverlayProps>;
+//#endregion
+export { QrCodeFrame, QrCodeFrameProps, QrCodeOverlay, QrCodeOverlayProps, QrCodePattern, QrCodePatternProps, QrCodePropsContext, QrCodeRoot, QrCodeRootProps, useQrCodePropsContext };
+//# sourceMappingURL=qr-code.d.ts.map

package/dist/types/components/qr-code/qr-code.style.d.ts

@@ -0,0 +1,56 @@
+import { ComponentSlotStyle } from "../../core/system/index.types.js";
+import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
+import "../../index.js";
+
+//#region src/components/qr-code/qr-code.style.d.ts
+declare const qrCodeStyle: ComponentSlotStyle<"pattern" | "overlay" | "frame" | "root", CSSPropObject<CSSSlotObject<"pattern" | "overlay" | "frame" | "root">>, {
+  "2xs": {
+    frame: {
+      "--size": "sizes.12";
+    };
+  };
+  xs: {
+    frame: {
+      "--size": "sizes.16";
+    };
+  };
+  sm: {
+    frame: {
+      "--size": "sizes.20";
+    };
+  };
+  md: {
+    frame: {
+      "--size": "sizes.24";
+    };
+  };
+  lg: {
+    frame: {
+      "--size": "sizes.32";
+    };
+  };
+  xl: {
+    frame: {
+      "--size": "sizes.40";
+    };
+  };
+  "2xl": {
+    frame: {
+      "--size": "sizes.48";
+    };
+  };
+  "3xl": {
+    frame: {
+      "--size": "sizes.56";
+    };
+  };
+  "4xl": {
+    frame: {
+      "--size": "sizes.64";
+    };
+  };
+}, CSSModifierObject<CSSSlotObject<"pattern" | "overlay" | "frame" | "root">>>;
+type QrCodeStyle = typeof qrCodeStyle;
+//#endregion
+export { QrCodeStyle, qrCodeStyle };
+//# sourceMappingURL=qr-code.style.d.ts.map

package/dist/types/components/qr-code/use-qr-code.d.ts

@@ -0,0 +1,94 @@
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { QrCodeGenerateResult } from "uqr";
+
+//#region src/components/qr-code/use-qr-code.d.ts
+interface UseQrCodeProps extends HTMLProps {
+  /**
+   * The value to encode as a QR code.
+   */
+  value: string;
+  /**
+   * The error correction level to boost the error correction level to the maximum allowed by the version and size.
+   *
+   * @default false
+   */
+  boostEcc?: boolean;
+  /**
+   * The border width around the QR code.
+   *
+   * @default 1
+   */
+  border?: number;
+  /**
+   * The error correction level.
+   *
+   * - `L` allows for up to 7% error correction,
+   * - `M` allows for up to 15% error correction,
+   * - `Q` allows for up to 25% error correction,
+   * - `H` allows for up to 30% error correction.
+   *
+   * @default 'L'
+   */
+  ecc?: "H" | "L" | "M" | "Q";
+  /**
+   * Inverts the black and white of the QR code.
+   *
+   * @default false
+   */
+  invert?: boolean;
+  /**
+   * The mask pattern to use.
+   *
+   * @default -1
+   */
+  maskPattern?: number;
+  /**
+   * The maximum version of the QR code (1-40).
+   *
+   * @default 40
+   */
+  maxVersion?: number;
+  /**
+   * The minimum version of the QR code (1-40).
+   *
+   * @default 1
+   */
+  minVersion?: number;
+  /**
+   * The pixel size of the QR code.
+   *
+   * @default 10
+   */
+  pixelSize?: number;
+  /**
+   * Callback function to receive the generated QR Code.
+   */
+  onEncoded?: (qr: QrCodeGenerateResult) => void;
+}
+declare const useQrCode: ({
+  boostEcc,
+  border,
+  ecc,
+  invert,
+  maskPattern,
+  maxVersion,
+  minVersion,
+  pixelSize,
+  value,
+  onEncoded,
+  ...rest
+}: UseQrCodeProps) => {
+  height: number;
+  paths: string[];
+  viewBox: string;
+  width: number;
+  getFrameProps: PropGetter<"svg", undefined, undefined>;
+  getOverlayProps: PropGetter<"div", undefined, undefined>;
+  getPatternProps: PropGetter<"path", undefined, undefined>;
+  getRootProps: PropGetter<"div", undefined, undefined>;
+};
+type UseQrCodeReturn = ReturnType<typeof useQrCode>;
+//#endregion
+export { UseQrCodeProps, UseQrCodeReturn, useQrCode };
+//# sourceMappingURL=use-qr-code.d.ts.map

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

@@ -3,8 +3,6 @@ import { GenericsComponent } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
 import { GroupProps } from "../group/group.js";
-import "../group/index.js";
-import "../input/index.js";
 import { RadioStyle } from "./radio.style.js";
 import { Radio, RadioProps } from "./radio.js";
 import { UseRadioGroupProps } from "./use-radio-group.js";

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

@@ -2,16 +2,15 @@ import { Merge } from "../../utils/index.js";
 import { ComponentSlotStyle, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
 import { CSSObject, CSSSlotObject } from "../../core/css/index.types.js";
 import { As, Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
-import { ComponentOptions, ComponentSlot, ComponentSlotName, SuperProps, UseComponentPropsOptions } from "../../core/components/create-component.js";
+import { ComponentOptions, ComponentSlot, ComponentSlotName, InitialProps, SuperProps, UseComponentPropsOptions } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
-import "../input/index.js";
 import { RadioStyle } from "./radio.style.js";
 import { UseRadioProps } from "./use-radio.js";
 import "../../index.js";
-import * as react81 from "react";
+import * as react80 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils3 from "@yamada-ui/utils";
+import * as _yamada_ui_utils4 from "@yamada-ui/utils";
 
 //#region src/components/radio/radio.d.ts
 interface RadioProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseRadioProps<Y>>, ThemeProps<RadioStyle>, UseInputBorderProps {
@@ -32,7 +31,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_utils3.Dict = _yamada_ui_utils3.Dict<any>>(el: H | react81.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils4.Dict = _yamada_ui_utils4.Dict<any>>(el: H | react80.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
     shape: {
       circle: {
         indicator: {
@@ -138,7 +137,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react81.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: react81.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils3.Dict = _yamada_ui_utils3.Dict<any>, 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" ? react80.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: react80.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils4.Dict = _yamada_ui_utils4.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
     shape: {
       circle: {
         indicator: {
@@ -244,7 +243,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     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

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.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/use-radio-group.d.ts

@@ -1,13 +1,12 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
-import "../field/index.js";
-import * as react80 from "react";
+import * as react79 from "react";
 import { ChangeEvent } from "react";
 
 //#region src/components/radio/use-radio-group.d.ts
 interface RadioGroupContext extends Omit<UseRadioGroupReturn, "getRootProps"> {}
-declare const RadioGroupContext: react80.Context<RadioGroupContext | undefined>, useRadioGroupContext: () => RadioGroupContext | undefined;
+declare const RadioGroupContext: react79.Context<RadioGroupContext | undefined>, useRadioGroupContext: () => RadioGroupContext | undefined;
 interface UseRadioGroupProps<Y extends string = string> extends Omit<HTMLProps, "defaultValue" | "onChange" | "value">, FieldProps {
   /**
    * The initial value of the radio group.

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

@@ -1,7 +1,6 @@
 import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
-import "../field/index.js";
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler } from "react";
 
 //#region src/components/radio/use-radio.d.ts

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

@@ -3,10 +3,7 @@ import { GenericsComponent } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
 import { GroupProps } from "../group/group.js";
-import "../group/index.js";
-import "../input/index.js";
 import { UseRadioGroupProps } from "../radio/use-radio-group.js";
-import "../radio/index.js";
 import { RadioCardStyle } from "./radio-card.style.js";
 import { RadioCardRoot, RadioCardRootProps } from "./radio-card.js";
 import { ReactElement } from "react";

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

@@ -2,15 +2,13 @@ import { Merge } from "../../utils/index.js";
 import { ComponentSlotStyle, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
 import { CSSObject, CSSSlotObject } from "../../core/css/index.types.js";
 import { As, Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
-import { ComponentOptions, ComponentSlot, ComponentSlotName, SuperProps, UseComponentPropsOptions } from "../../core/components/create-component.js";
+import { ComponentOptions, ComponentSlot, ComponentSlotName, InitialProps, SuperProps, UseComponentPropsOptions } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
-import "../input/index.js";
 import { UseRadioProps } from "../radio/use-radio.js";
-import "../radio/index.js";
 import { RadioCardStyle } from "./radio-card.style.js";
 import "../../index.js";
-import * as react77 from "react";
+import * as react64 from "react";
 import { ReactElement, ReactNode } from "react";
 import * as _yamada_ui_utils0 from "@yamada-ui/utils";
 
@@ -59,7 +57,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 | react77.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>>(el: H | react64.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
     justify: {
       end: {
         addon: {
@@ -186,6 +184,14 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
           };
         };
       } | undefined;
+      root: {
+        _container: {
+          css: {
+            bg: "bg";
+          };
+          style: string;
+        }[];
+      };
     };
     outline: {
       root: {
@@ -228,7 +234,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react77.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: react77.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>, 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" ? react64.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: react64.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
     justify: {
       end: {
         addon: {
@@ -355,6 +361,14 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
           };
         };
       } | undefined;
+      root: {
+        _container: {
+          css: {
+            bg: "bg";
+          };
+          style: string;
+        }[];
+      };
     };
     outline: {
       root: {
@@ -397,7 +411,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
     justify: {
       end: {
         addon: {
@@ -524,6 +538,14 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
           };
         };
       } | undefined;
+      root: {
+        _container: {
+          css: {
+            bg: "bg";
+          };
+          style: string;
+        }[];
+      };
     };
     outline: {
       root: {

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

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.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" | "description" | "indicator" | "root" | "addon", {
   /**
    * The justify indicator of the component
    *
@@ -139,6 +139,14 @@ declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "indicator"
         };
       };
     } | undefined;
+    root: {
+      _container: {
+        css: {
+          bg: "bg";
+        };
+        style: string;
+      }[];
+    };
   };
   outline: {
     root: {

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

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 
 //#region src/components/rating/rating.style.d.ts
-declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"group" | "icon" | "root" | "item">>, {
+declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"group" | "icon" | "item" | "root">>, {
   xs: {
     icon: {
       fontSize: "md";
@@ -29,7 +29,7 @@ declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "root" | "item"
       fontSize: "3xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "root" | "item">>>;
+}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "item" | "root">>>;
 type RatingStyle = typeof ratingStyle;
 //#endregion
 export { RatingStyle, ratingStyle };

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

@@ -1,7 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
-import "../field/index.js";
 import * as react68 from "react";
 
 //#region src/components/rating/use-rating.d.ts

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

@@ -3,11 +3,10 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { ReorderStyle } from "./reorder.style.js";
 import { UseReorderItemProps, UseReorderProps } from "./use-reorder.js";
 import "../../index.js";
-import * as react67 from "react";
+import * as react63 from "react";
 import { PropsWithChildren, ReactElement } from "react";
 
 //#region src/components/reorder/reorder.d.ts
@@ -19,7 +18,7 @@ interface ReorderRootProps<Y = string> extends Merge<HTMLMotionProps<"ul">, Omit
    */
   items?: ReorderItem<Y>[];
 }
-declare const ReorderPropsContext: react67.Context<Partial<ReorderRootProps<string>> | undefined>, useReorderPropsContext: () => Partial<ReorderRootProps<string>> | undefined;
+declare const ReorderPropsContext: react63.Context<Partial<ReorderRootProps<string>> | undefined>, useReorderPropsContext: () => Partial<ReorderRootProps<string>> | undefined;
 /**
  * `Reorder` is a component that allows you to change the order of items using drag and drop.
  *

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

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.js";
 
 //#region src/components/reorder/reorder.style.d.ts
-declare const reorderStyle: ComponentSlotStyle<"root" | "item" | "trigger", {
+declare const reorderStyle: ComponentSlotStyle<"item" | "root" | "trigger", {
   /**
    * The orientation of the reorder.
    *

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

@@ -2,7 +2,7 @@ import { Merge } from "../../utils/index.js";
 import { Orientation } from "../../core/system/index.types.js";
 import { PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react65 from "react";
+import * as react61 from "react";
 import { PropsWithChildren, ReactElement, ReactNode } from "react";
 import { HTMLMotionProps, Reorder } from "motion/react";
 
@@ -10,11 +10,11 @@ import { HTMLMotionProps, Reorder } from "motion/react";
 type ReorderGroupProps<Y = string> = Merge<HTMLMotionProps<"ul">, Pick<Parameters<typeof Reorder.Group<Y>>[0], "axis" | "onReorder" | "values">>;
 type ReorderItemProps<Y = string> = Merge<HTMLMotionProps<"li">, Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], "layout" | "value">>>;
 interface ReorderContext extends Pick<UseReorderProps, "orientation"> {}
-declare const ReorderContext: react65.Context<ReorderContext>, useReorderContext: () => ReorderContext;
+declare const ReorderContext: react61.Context<ReorderContext>, useReorderContext: () => ReorderContext;
 interface ReorderItemContext {
   getTriggerProps: PropGetter;
 }
-declare const ReorderItemContext: react65.Context<ReorderItemContext>, useReorderItemContext: () => ReorderItemContext;
+declare const ReorderItemContext: react61.Context<ReorderItemContext>, useReorderItemContext: () => ReorderItemContext;
 interface UseReorderProps<Y = string> extends Partial<Omit<ReorderGroupProps<Y>, "children" | "onChange" | "values">>, PropsWithChildren {
   /**
    * The component to be used for the item.

package/dist/types/components/resizable/index.d.ts

@@ -1,5 +1,5 @@
 import { ResizableStyle, resizableStyle } from "./resizable.style.js";
-import { ResizableContext, ResizableGroupControl, ResizableItemControl, ResizableStorage, UseResizableItemProps, UseResizableItemReturn, UseResizableProps, UseResizableReturn, UseResizableTriggerProps, UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableTrigger } from "./use-resizable.js";
+import { ResizableContext, ResizableItemControl, ResizableRootControl, ResizableStorage, UseResizableItemProps, UseResizableItemReturn, UseResizableProps, UseResizableReturn, UseResizableTriggerProps, UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizableTrigger } from "./use-resizable.js";
 import { ResizableItem, ResizableItemProps, ResizablePropsContext, ResizableRoot, ResizableRootProps, ResizableTrigger, ResizableTriggerProps, useResizablePropsContext } from "./resizable.js";
 import { namespace_d_exports } from "./namespace.js";
-export { namespace_d_exports as Resizable, ResizableContext, ResizableGroupControl, ResizableItem, ResizableItemControl, type ResizableItemProps, ResizablePropsContext, ResizableRoot, type ResizableRootProps, ResizableStorage, ResizableStyle, ResizableTrigger, type ResizableTriggerProps, UseResizableItemProps, UseResizableItemReturn, UseResizableProps, UseResizableReturn, UseResizableTriggerProps, UseResizableTriggerReturn, resizableStyle, useResizable, useResizableContext, useResizableItem, useResizablePropsContext, useResizableTrigger };
+export { namespace_d_exports as Resizable, ResizableContext, ResizableItem, ResizableItemControl, type ResizableItemProps, ResizablePropsContext, ResizableRoot, ResizableRootControl, type ResizableRootProps, ResizableStorage, ResizableStyle, ResizableTrigger, type ResizableTriggerProps, UseResizableItemProps, UseResizableItemReturn, UseResizableProps, UseResizableReturn, UseResizableTriggerProps, UseResizableTriggerReturn, resizableStyle, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizablePropsContext, useResizableTrigger };

package/dist/types/components/resizable/namespace.d.ts

@@ -1,9 +1,9 @@
-import { ResizableContext, ResizableGroupControl, ResizableItemControl, ResizableStorage, useResizableContext } from "./use-resizable.js";
+import { ResizableContext, ResizableItemControl, ResizableRootControl, ResizableStorage, useResizableContext, useResizableLayout } from "./use-resizable.js";
 import { ResizableItem, ResizableItemProps, ResizablePropsContext, ResizableRoot, ResizableRootProps, ResizableTrigger, ResizableTriggerProps, useResizablePropsContext } from "./resizable.js";
 
 //#region src/components/resizable/namespace.d.ts
 declare namespace namespace_d_exports {
-  export { ResizableContext as Context, ResizableGroupControl as GroupControl, ResizableItem as Item, ResizableItemControl as ItemControl, ResizableItemProps as ItemProps, ResizablePropsContext as PropsContext, ResizableRoot as Root, ResizableRootProps as RootProps, ResizableStorage as Storage, ResizableTrigger as Trigger, ResizableTriggerProps as TriggerProps, useResizableContext as useContext, useResizablePropsContext as usePropsContext };
+  export { ResizableContext as Context, ResizableItem as Item, ResizableItemControl as ItemControl, ResizableItemProps as ItemProps, ResizablePropsContext as PropsContext, ResizableRoot as Root, ResizableRootControl as RootControl, ResizableRootProps as RootProps, ResizableStorage as Storage, ResizableTrigger as Trigger, ResizableTriggerProps as TriggerProps, useResizableContext as useContext, useResizableLayout as useLayout, useResizablePropsContext as usePropsContext };
 }
 //#endregion
 export { namespace_d_exports };

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

@@ -4,8 +4,8 @@ import "../../core/index.js";
 import { ResizableStyle } from "./resizable.style.js";
 import { UseResizableItemProps, UseResizableProps, UseResizableTriggerProps } from "./use-resizable.js";
 import "../../index.js";
-import * as react63 from "react";
-import { ForwardedRef, ReactElement } from "react";
+import * as react60 from "react";
+import { ReactElement } from "react";
 
 //#region src/components/resizable/resizable.d.ts
 /**
@@ -13,15 +13,10 @@ import { ForwardedRef, ReactElement } from "react";
  *
  * @see https://yamada-ui.com/docs/components/resizable
  */
-interface ResizableRootProps extends HTMLStyledProps, ThemeProps<ResizableStyle>, Omit<UseResizableProps, "orientation"> {
-  /**
-   * Ref for resizable root element.
-   */
-  rootRef?: ForwardedRef<HTMLDivElement>;
-}
-declare const ResizablePropsContext: react63.Context<Partial<ResizableRootProps> | undefined>, useResizablePropsContext: () => Partial<ResizableRootProps> | undefined;
+interface ResizableRootProps extends HTMLStyledProps, ThemeProps<ResizableStyle>, Omit<UseResizableProps, "orientation"> {}
+declare const ResizablePropsContext: react60.Context<Partial<ResizableRootProps> | undefined>, useResizablePropsContext: () => Partial<ResizableRootProps> | undefined;
 declare const ResizableRoot: Component<"div", ResizableRootProps>;
-interface ResizableItemProps extends Omit<HTMLStyledPropsWithoutAs, "order">, UseResizableItemProps {}
+interface ResizableItemProps extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}
 declare const ResizableItem: Component<"div", ResizableItemProps>;
 interface ResizableTriggerProps extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {
   /**

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

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js"
 import "../../index.js";
 
 //#region src/components/resizable/resizable.style.d.ts
-declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "item" | "trigger", {
+declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "trigger", {
   /**
    * The orientation of the resizable.
    *
@@ -21,7 +21,7 @@ declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "item" | "tri
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item" | "trigger">>, {
+}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root" | "trigger">>, {
   border: {
     icon: {
       bg: "colorScheme.muted";
@@ -56,9 +56,6 @@ declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "item" | "tri
       color: "colorScheme.fg";
       transitionDuration: "moderate";
       transitionProperty: "common";
-      _active: {
-        color: "transparent";
-      };
     };
     trigger: {
       focusVisibleRing: "none";