@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

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 react48 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: react48.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.d.ts

@@ -2,16 +2,16 @@ 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 react95 from "react";
+import * as react45 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils0 from "@yamada-ui/utils";
+import * as _yamada_ui_utils3 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 +32,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 | react95.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils3.Dict = _yamada_ui_utils3.Dict<any>>(el: H | react45.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {
@@ -138,7 +138,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react95.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: react95.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<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<"label" | "group" | "root" | "indicator", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react45.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: react45.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", {
     shape: {
       circle: {
         indicator: {

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

@@ -2,12 +2,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 react98 from "react";
+import * as react44 from "react";
 import { ChangeEvent } from "react";
 
 //#region src/components/radio/use-radio-group.d.ts
 interface RadioGroupContext extends Omit<UseRadioGroupReturn, "getRootProps"> {}
-declare const RadioGroupContext: react98.Context<RadioGroupContext | undefined>, useRadioGroupContext: () => RadioGroupContext | undefined;
+declare const RadioGroupContext: react44.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-card/radio-card.d.ts

@@ -2,7 +2,7 @@ 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";
@@ -10,9 +10,9 @@ import { UseRadioProps } from "../radio/use-radio.js";
 import "../radio/index.js";
 import { RadioCardStyle } from "./radio-card.style.js";
 import "../../index.js";
-import * as react99 from "react";
+import * as react41 from "react";
 import { ReactElement, ReactNode } from "react";
-import * as _yamada_ui_utils3 from "@yamada-ui/utils";
+import * as _yamada_ui_utils0 from "@yamada-ui/utils";
 
 //#region src/components/radio-card/radio-card.d.ts
 interface RadioCardRootProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseRadioProps<Y>>, ThemeProps<RadioCardStyle>, UseInputBorderProps {
@@ -59,7 +59,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_utils3.Dict = _yamada_ui_utils3.Dict<any>>(el: H | react99.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>>(el: H | react41.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -186,6 +186,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 +236,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react99.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: react99.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<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<"group" | "root" | "description" | "indicator" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react41.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: react41.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" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -355,6 +363,14 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
           };
         };
       } | undefined;
+      root: {
+        _container: {
+          css: {
+            bg: "bg";
+          };
+          style: string;
+        }[];
+      };
     };
     outline: {
       root: {
@@ -524,6 +540,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

@@ -139,6 +139,14 @@ declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "description
         };
       };
     } | 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<"icon" | "group" | "root" | "item", CSSPropObject<CSSSlotObject<"icon" | "group" | "root" | "item">>, {
   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<"icon" | "group" | "root" | "item">>>;
 type RatingStyle = typeof ratingStyle;
 //#endregion
 export { RatingStyle, ratingStyle };

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

@@ -2,11 +2,11 @@ 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 react86 from "react";
+import * as react49 from "react";
 
 //#region src/components/rating/use-rating.d.ts
 interface RatingContext extends Omit<UseRatingReturn, "getRootProps"> {}
-declare const RatingContext: react86.Context<RatingContext>, useRatingContext: () => RatingContext;
+declare const RatingContext: react49.Context<RatingContext>, useRatingContext: () => RatingContext;
 interface UseRatingProps extends FieldProps, Omit<HTMLProps, "color" | "defaultValue" | "onChange"> {
   /**
    * Number of controls that should be rendered.
@@ -65,12 +65,12 @@ declare const useRating: (props?: UseRatingProps) => {
   highlightSelectedOnly: boolean;
   hoveredValue: number;
   interactive: boolean;
-  outsideRef: react86.RefObject<boolean>;
+  outsideRef: react49.RefObject<boolean>;
   readOnly: boolean | undefined;
   required: boolean | undefined;
   roundedValue: number;
-  setHoveredValue: react86.Dispatch<react86.SetStateAction<number>>;
-  setValue: react86.Dispatch<react86.SetStateAction<number>>;
+  setHoveredValue: react49.Dispatch<react49.SetStateAction<number>>;
+  setValue: react49.Dispatch<react49.SetStateAction<number>>;
   value: number;
   ariaProps: {
     "aria-describedby": any;
@@ -86,8 +86,8 @@ declare const useRating: (props?: UseRatingProps) => {
     "data-required": string | undefined;
   };
   eventProps: {
-    onBlur: (ev: react86.FocusEvent<HTMLDivElement, Element>) => void;
-    onFocus: (ev: react86.FocusEvent<HTMLDivElement, Element>) => void;
+    onBlur: (ev: react49.FocusEvent<HTMLDivElement, Element>) => void;
+    onFocus: (ev: react49.FocusEvent<HTMLDivElement, Element>) => void;
   };
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -7,7 +7,7 @@ import "../motion/index.js";
 import { ReorderStyle } from "./reorder.style.js";
 import { UseReorderItemProps, UseReorderProps } from "./use-reorder.js";
 import "../../index.js";
-import * as react85 from "react";
+import * as react40 from "react";
 import { PropsWithChildren, ReactElement } from "react";
 
 //#region src/components/reorder/reorder.d.ts
@@ -19,7 +19,7 @@ interface ReorderRootProps<Y = string> extends Merge<HTMLMotionProps<"ul">, Omit
    */
   items?: ReorderItem<Y>[];
 }
-declare const ReorderPropsContext: react85.Context<Partial<ReorderRootProps<string>> | undefined>, useReorderPropsContext: () => Partial<ReorderRootProps<string>> | undefined;
+declare const ReorderPropsContext: react40.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/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 react83 from "react";
+import * as react38 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: react83.Context<ReorderContext>, useReorderContext: () => ReorderContext;
+declare const ReorderContext: react38.Context<ReorderContext>, useReorderContext: () => ReorderContext;
 interface ReorderItemContext {
   getTriggerProps: PropGetter;
 }
-declare const ReorderItemContext: react83.Context<ReorderItemContext>, useReorderItemContext: () => ReorderItemContext;
+declare const ReorderItemContext: react38.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 react82 from "react";
-import { ForwardedRef, ReactElement } from "react";
+import * as react37 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: react82.Context<Partial<ResizableRootProps> | undefined>, useResizablePropsContext: () => Partial<ResizableRootProps> | undefined;
+interface ResizableRootProps extends HTMLStyledProps, ThemeProps<ResizableStyle>, Omit<UseResizableProps, "orientation"> {}
+declare const ResizablePropsContext: react37.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

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