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

package/dist/types/components/chart/use-polar-chart.d.ts

@@ -0,0 +1,330 @@
+import { Dict, Merge } from "../../utils/index.js";
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { CurveProps, PieLabelRenderProps, PieProps, PieSectorDataItem, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarProps, RadialBarProps, RenderableText, SectorProps, TextProps } from "recharts";
+
+//#region src/components/chart/use-polar-chart.d.ts
+interface UseChartPieProps extends Merge<HTMLProps<"svg">, Pick<PieProps, "activeShape" | "animationBegin" | "animationDuration" | "animationEasing" | "cornerRadius" | "cx" | "cy" | "data" | "dataKey" | "endAngle" | "hide" | "inactiveShape" | "innerRadius" | "isAnimationActive" | "label" | "labelLine" | "legendType" | "maxRadius" | "minAngle" | "nameKey" | "onAnimationEnd" | "onAnimationStart" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "outerRadius" | "paddingAngle" | "rootTabIndex" | "shape" | "startAngle" | "tooltipType" | "zIndex">> {}
+declare const useChartPie: ({
+  activeShape,
+  animationBegin,
+  animationDuration,
+  animationEasing,
+  cornerRadius,
+  cx,
+  cy,
+  data,
+  dataKey: dataKeyProp,
+  endAngle,
+  hide,
+  inactiveShape,
+  innerRadius,
+  isAnimationActive,
+  label,
+  labelLine,
+  legendType,
+  maxRadius,
+  minAngle,
+  nameKey,
+  outerRadius,
+  paddingAngle,
+  rootTabIndex,
+  shape,
+  startAngle,
+  tooltipType,
+  zIndex,
+  onAnimationEnd,
+  onAnimationStart,
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseOut,
+  onMouseOver,
+  onMouseUp,
+  ...rest
+}?: UseChartPieProps) => {
+  getPieProps: PropGetter<PieProps, undefined, undefined>;
+  getRootProps: PropGetter<"svg", undefined, undefined>;
+};
+type UseChartPieReturn = ReturnType<typeof useChartPie>;
+interface UseChartSectorProps extends Merge<HTMLProps<"path">, Pick<SectorProps, "cornerIsExternal" | "cornerRadius" | "cx" | "cy" | "endAngle" | "forceCornerRadius" | "innerRadius" | "outerRadius" | "startAngle">> {}
+declare const useChartSector: ({
+  name: nameProp,
+  cornerIsExternal,
+  cornerRadius,
+  cx,
+  cy,
+  endAngle,
+  forceCornerRadius,
+  innerRadius,
+  outerRadius,
+  startAngle,
+  ...rest
+}?: UseChartSectorProps) => {
+  getRootProps: PropGetter<"path", undefined, undefined>;
+  getSectorProps: PropGetter<SectorProps, undefined, undefined>;
+};
+type UseChartSectorReturn = ReturnType<typeof useChartSector>;
+interface UseChartPieLabelProps extends Merge<HTMLProps<"text">, Pick<PieLabelRenderProps, "cornerRadius" | "cx" | "cy" | "dataKey" | "endAngle" | "index" | "innerRadius" | "maxRadius" | "midAngle" | "middleRadius" | "name" | "outerRadius" | "paddingAngle" | "payload" | "percent" | "startAngle" | "textAnchor" | "tooltipPayload" | "tooltipPosition" | "value" | "x" | "y">> {
+  /**
+   * Offset for the label.
+   *
+   * @default 24
+   */
+  offset?: number;
+  /**
+   * Formatter for the label.
+   */
+  formatter?: (value: number, percent: number) => RenderableText;
+}
+declare const useChartPieLabel: ({
+  name: nameProp,
+  cornerRadius,
+  cx,
+  cy,
+  dataKey,
+  endAngle,
+  formatter,
+  index,
+  innerRadius,
+  maxRadius,
+  midAngle,
+  middleRadius,
+  offset: offsetProp,
+  outerRadius,
+  paddingAngle,
+  payload,
+  percent,
+  startAngle,
+  textAnchor: _textAnchor,
+  tooltipPayload,
+  tooltipPosition,
+  value,
+  x: _x,
+  y: _y,
+  ...rest
+}: UseChartPieLabelProps) => {
+  getRootProps: PropGetter<"text", undefined, undefined>;
+  getTextProps: PropGetter<TextProps, undefined, undefined>;
+};
+type UseChartPieLabelReturn = ReturnType<typeof useChartPieLabel>;
+interface UseChartPieLabelLineProps extends Merge<Omit<HTMLProps<"path">, "points">, Pick<PieSectorDataItem, "cornerRadius" | "dataKey" | "endAngle" | "innerRadius" | "maxRadius" | "midAngle" | "middleRadius" | "name" | "outerRadius" | "paddingAngle" | "payload" | "percent" | "startAngle" | "tooltipPayload" | "tooltipPosition" | "value">>, Pick<CurveProps, "points"> {
+  index?: number;
+}
+declare const useChartPieLabelLine: ({
+  name: nameProp,
+  cornerRadius,
+  dataKey,
+  endAngle,
+  index,
+  innerRadius,
+  maxRadius,
+  midAngle,
+  middleRadius,
+  outerRadius,
+  paddingAngle,
+  payload,
+  percent,
+  points,
+  startAngle,
+  tooltipPayload,
+  tooltipPosition,
+  value,
+  ...rest
+}: UseChartPieLabelLineProps) => {
+  getCurveProps: PropGetter<CurveProps, undefined, undefined>;
+  getRootProps: PropGetter<"path", undefined, undefined>;
+};
+type UseChartPieLabelLineReturn = ReturnType<typeof useChartPieLabelLine>;
+interface UseChartRadarProps extends Merge<HTMLProps<"path">, Pick<RadarProps, "activeDot" | "angleAxisId" | "animationBegin" | "animationDuration" | "animationEasing" | "baseLinePoints" | "connectNulls" | "dataKey" | "dot" | "hide" | "isAnimationActive" | "isRange" | "label" | "legendType" | "onAnimationEnd" | "onAnimationStart" | "onMouseEnter" | "onMouseLeave" | "points" | "radiusAxisId" | "shape" | "tooltipType" | "zIndex">> {}
+declare const useChartRadar: ({
+  activeDot: activeDotProp,
+  angleAxisId,
+  animationBegin,
+  animationDuration,
+  animationEasing,
+  baseLinePoints,
+  connectNulls,
+  dataKey: dataKeyProp,
+  dot: dotProp,
+  hide,
+  isAnimationActive,
+  isRange,
+  label: labelProp,
+  legendType,
+  points,
+  radiusAxisId,
+  shape,
+  tooltipType,
+  zIndex,
+  onAnimationEnd,
+  onAnimationStart,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: UseChartRadarProps) => {
+  getRadarProps: PropGetter<RadarProps, undefined, undefined>;
+  getRootProps: PropGetter<"path", undefined, undefined>;
+};
+type UseChartRadarReturn = ReturnType<typeof useChartRadar>;
+interface UseAngleAxisProps extends Merge<HTMLProps<"text">, Pick<PolarAngleAxisProps, "allowDataOverflow" | "allowDecimals" | "allowDuplicatedCategory" | "angle" | "angleAxisId" | "axisLine" | "axisLineType" | "cx" | "cy" | "dataKey" | "domain" | "hide" | "includeHidden" | "label" | "name" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "orientation" | "radius" | "range" | "reversed" | "scale" | "tick" | "tickCount" | "tickFormatter" | "tickLine" | "ticks" | "tickSize" | "type" | "unit" | "zIndex">> {}
+declare const useAngleAxis: ({
+  type,
+  name,
+  allowDataOverflow,
+  allowDecimals,
+  allowDuplicatedCategory,
+  angle,
+  angleAxisId,
+  axisLine: axisLineProp,
+  axisLineType,
+  cx,
+  cy,
+  dataKey,
+  domain,
+  hide,
+  includeHidden,
+  label: labelProp,
+  orientation,
+  radius,
+  range,
+  reversed,
+  scale,
+  tick: tickProp,
+  tickCount,
+  tickFormatter,
+  tickLine: tickLineProp,
+  ticks,
+  tickSize,
+  unit,
+  zIndex,
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseOut,
+  onMouseOver,
+  onMouseUp,
+  ...rest
+}: UseAngleAxisProps) => {
+  getAngleAxisProps: PropGetter<PolarAngleAxisProps, undefined, undefined>;
+  getRootProps: PropGetter<"text", undefined, undefined>;
+};
+type UseAngleAxisReturn = ReturnType<typeof useAngleAxis>;
+interface UseRadiusAxisProps extends Merge<HTMLProps<"text">, Pick<PolarRadiusAxisProps, "allowDataOverflow" | "allowDecimals" | "allowDuplicatedCategory" | "angle" | "axisLine" | "dataKey" | "domain" | "hide" | "includeHidden" | "label" | "name" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "orientation" | "radius" | "radiusAxisId" | "range" | "reversed" | "scale" | "tick" | "tickCount" | "tickFormatter" | "tickLine" | "type" | "unit" | "zIndex">> {
+  /**
+   * The ticks to use for the axis.
+   */
+  ticks?: number[];
+}
+declare const useRadiusAxis: ({
+  type,
+  name,
+  allowDataOverflow,
+  allowDecimals,
+  allowDuplicatedCategory,
+  angle,
+  axisLine: axisLineProp,
+  dataKey,
+  domain,
+  hide,
+  includeHidden,
+  label: labelProp,
+  orientation,
+  radius,
+  radiusAxisId,
+  range,
+  reversed,
+  scale,
+  tick: tickProp,
+  tickCount,
+  tickFormatter,
+  tickLine: tickLineProp,
+  ticks,
+  unit,
+  zIndex,
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseOut,
+  onMouseOver,
+  onMouseUp,
+  ...rest
+}: UseRadiusAxisProps) => {
+  getRadiusAxisProps: PropGetter<PolarRadiusAxisProps, undefined, undefined>;
+  getRootProps: PropGetter<"text", undefined, undefined>;
+};
+type UseRadiusAxisReturn = ReturnType<typeof useRadiusAxis>;
+interface UsePolarGridProps extends Merge<HTMLProps<"line">, Pick<PolarGridProps, "angleAxisId" | "cx" | "cy" | "gridType" | "innerRadius" | "outerRadius" | "polarAngles" | "polarRadius" | "radialLines" | "radiusAxisId" | "zIndex">> {}
+declare const usePolarGrid: ({
+  angleAxisId,
+  cx,
+  cy,
+  gridType,
+  innerRadius,
+  outerRadius,
+  polarAngles,
+  polarRadius,
+  radialLines,
+  radiusAxisId,
+  zIndex,
+  ...rest
+}: UsePolarGridProps) => {
+  getPolarGridProps: PropGetter<PolarGridProps, undefined, undefined>;
+  getRootProps: PropGetter<"line", undefined, undefined>;
+};
+type UsePolarGridReturn = ReturnType<typeof usePolarGrid>;
+interface UseChartRadialProps<Y extends Dict = Dict> extends Merge<HTMLProps<"svg">, Pick<RadialBarProps, "activeShape" | "angleAxisId" | "animationBegin" | "animationDuration" | "animationEasing" | "background" | "barSize" | "cornerIsExternal" | "cornerRadius" | "dataKey" | "forceCornerRadius" | "hide" | "isAnimationActive" | "label" | "legendType" | "maxBarSize" | "onAnimationEnd" | "onAnimationStart" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "radius" | "radiusAxisId" | "shape" | "stackId" | "tooltipType" | "zIndex">> {
+  /**
+   * The key to use for the name.
+   */
+  nameKey: keyof Y;
+}
+declare const useChartRadial: <Y extends Dict>({
+  activeShape,
+  angleAxisId,
+  animationBegin,
+  animationDuration,
+  animationEasing,
+  background: backgroundProp,
+  barSize,
+  cornerIsExternal,
+  stackId,
+  cornerRadius,
+  dataKey,
+  forceCornerRadius,
+  hide,
+  isAnimationActive,
+  label,
+  legendType,
+  maxBarSize,
+  nameKey,
+  radius,
+  radiusAxisId,
+  shape: shapeProp,
+  tooltipType,
+  zIndex,
+  onAnimationEnd,
+  onAnimationStart,
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseOut,
+  onMouseOver,
+  onMouseUp,
+  ...rest
+}: UseChartRadialProps<Y>) => {
+  getRadialProps: PropGetter<Partial<RadialBarProps>, undefined, RadialBarProps>;
+  getRootProps: PropGetter<"svg", undefined, undefined>;
+};
+type UseChartRadialReturn = ReturnType<typeof useChartRadial>;
+//#endregion
+export { UseAngleAxisProps, UseAngleAxisReturn, UseChartPieLabelLineProps, UseChartPieLabelLineReturn, UseChartPieLabelProps, UseChartPieLabelReturn, UseChartPieProps, UseChartPieReturn, UseChartRadarProps, UseChartRadarReturn, UseChartRadialProps, UseChartRadialReturn, UseChartSectorProps, UseChartSectorReturn, UsePolarGridProps, UsePolarGridReturn, UseRadiusAxisProps, UseRadiusAxisReturn, useAngleAxis, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartRadar, useChartRadial, useChartSector, usePolarGrid, useRadiusAxis };
+//# sourceMappingURL=use-polar-chart.d.ts.map

package/dist/types/components/chart/use-radar-chart.d.ts

@@ -0,0 +1,31 @@
+import { Dict } from "../../utils/index.js";
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { PolarChartProps } from "recharts/types/util/types";
+
+//#region src/components/chart/use-radar-chart.d.ts
+interface UseRadarChartProps<Y extends Dict> extends HTMLProps, Pick<PolarChartProps, "accessibilityLayer" | "cx" | "cy" | "innerRadius" | "outerRadius" | "responsive" | "syncId" | "syncMethod"> {
+  /**
+   * Chart data.
+   */
+  data?: Y[];
+}
+declare const useRadarChart: <Y extends Dict>({
+  accessibilityLayer,
+  cx,
+  cy,
+  data,
+  innerRadius,
+  outerRadius,
+  responsive,
+  syncId,
+  syncMethod,
+  ...rest
+}: UseRadarChartProps<Y>) => {
+  getChartProps: PropGetter<PolarChartProps, undefined, undefined>;
+  getRootProps: PropGetter<"div", undefined, undefined>;
+};
+type UseRadarChartReturn<Y extends Dict> = ReturnType<typeof useRadarChart<Y>>;
+//#endregion
+export { UseRadarChartProps, UseRadarChartReturn, useRadarChart };
+//# sourceMappingURL=use-radar-chart.d.ts.map

package/dist/types/components/chart/use-radial-chart.d.ts

@@ -0,0 +1,40 @@
+import { Dict } from "../../utils/index.js";
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { PolarChartProps } from "recharts/types/util/types";
+
+//#region src/components/chart/use-radial-chart.d.ts
+interface UseRadialChartProps<Y extends Dict> extends HTMLProps, Pick<PolarChartProps, "accessibilityLayer" | "barCategoryGap" | "barGap" | "barSize" | "cx" | "cy" | "endAngle" | "innerRadius" | "layout" | "maxBarSize" | "outerRadius" | "responsive" | "reverseStackOrder" | "stackOffset" | "startAngle" | "syncId" | "syncMethod"> {
+  /**
+   * Chart data.
+   */
+  data?: Y[];
+}
+declare const useRadialChart: <Y extends Dict>({
+  accessibilityLayer,
+  barCategoryGap,
+  barGap,
+  barSize,
+  cx,
+  cy,
+  data,
+  endAngle,
+  innerRadius,
+  layout,
+  maxBarSize,
+  outerRadius,
+  responsive,
+  reverseStackOrder,
+  stackOffset,
+  startAngle,
+  syncId,
+  syncMethod,
+  ...rest
+}: UseRadialChartProps<Y>) => {
+  getChartProps: PropGetter<PolarChartProps, undefined, undefined>;
+  getRootProps: PropGetter<"div", undefined, undefined>;
+};
+type UseRadialChartReturn<Y extends Dict> = ReturnType<typeof useRadialChart<Y>>;
+//#endregion
+export { UseRadialChartProps, UseRadialChartReturn, useRadialChart };
+//# sourceMappingURL=use-radial-chart.d.ts.map

package/dist/types/components/checkbox/checkbox.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 { CheckboxStyle } from "./checkbox.style.js";
 import { UseCheckboxProps } from "./use-checkbox.js";
 import "../../index.js";
-import * as react939 from "react";
+import * as react987 from "react";
 import { ReactElement, ReactNode } from "react";
-import * as _yamada_ui_utils14 from "@yamada-ui/utils";
+import * as _yamada_ui_utils20 from "@yamada-ui/utils";
 
 //#region src/components/checkbox/checkbox.d.ts
 interface CheckboxProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseCheckboxProps<Y>>, ThemeProps<CheckboxStyle>, UseInputBorderProps {
@@ -40,7 +40,7 @@ interface CheckboxProps<Y extends string = string> extends Merge<HTMLStyledProps
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils14.Dict = _yamada_ui_utils14.Dict<any>>(el: H | react939.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils20.Dict = _yamada_ui_utils20.Dict<any>>(el: H | react987.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {
@@ -136,7 +136,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react939.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxPropsContext: react939.Context<Partial<CheckboxProps<string>> | undefined>, useCheckboxPropsContext: () => Partial<CheckboxProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils14.Dict = _yamada_ui_utils14.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" ? react987.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxPropsContext: react987.Context<Partial<CheckboxProps<string>> | undefined>, useCheckboxPropsContext: () => Partial<CheckboxProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils20.Dict = _yamada_ui_utils20.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {

package/dist/types/components/checkbox/use-checkbox-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 react942 from "react";
+import * as react986 from "react";
 import { ChangeEvent } from "react";
 
 //#region src/components/checkbox/use-checkbox-group.d.ts
 interface CheckboxGroupContext extends Omit<UseCheckboxGroupReturn, "getRootProps"> {}
-declare const CheckboxGroupContext: react942.Context<CheckboxGroupContext | undefined>, useCheckboxGroupContext: () => CheckboxGroupContext | undefined;
+declare const CheckboxGroupContext: react986.Context<CheckboxGroupContext | undefined>, useCheckboxGroupContext: () => CheckboxGroupContext | undefined;
 interface UseCheckboxGroupProps<Y extends string = string> extends Omit<HTMLProps, "defaultValue" | "onChange" | "value">, FieldProps {
   /**
    * The initial value of the checkbox group.

package/dist/types/components/checkbox-card/checkbox-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 { UseCheckboxProps } from "../checkbox/use-checkbox.js";
 import "../checkbox/index.js";
 import { CheckboxCardStyle } from "./checkbox-card.style.js";
 import "../../index.js";
-import * as react936 from "react";
+import * as react983 from "react";
 import { ReactElement, ReactNode } from "react";
-import * as _yamada_ui_utils10 from "@yamada-ui/utils";
+import * as _yamada_ui_utils16 from "@yamada-ui/utils";
 
 //#region src/components/checkbox-card/checkbox-card.d.ts
 interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseCheckboxProps<Y>>, ThemeProps<CheckboxCardStyle>, UseInputBorderProps {
@@ -67,7 +67,7 @@ interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLSty
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils10.Dict = _yamada_ui_utils10.Dict<any>>(el: H | react936.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils16.Dict = _yamada_ui_utils16.Dict<any>>(el: H | react983.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -178,6 +178,12 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
         _checked: {
           "--indicator-border-color": "colorScheme.solid";
         };
+        _container: {
+          css: {
+            bg: "bg";
+          };
+          style: string;
+        }[];
         _indeterminate: {
           "--indicator-border-color": "colorScheme.solid";
         };
@@ -211,7 +217,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react936.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: react936.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils10.Dict = _yamada_ui_utils10.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" ? react983.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: react983.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils16.Dict = _yamada_ui_utils16.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -322,6 +328,12 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
         _checked: {
           "--indicator-border-color": "colorScheme.solid";
         };
+        _container: {
+          css: {
+            bg: "bg";
+          };
+          style: string;
+        }[];
         _indeterminate: {
           "--indicator-border-color": "colorScheme.solid";
         };
@@ -466,6 +478,12 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
         _checked: {
           "--indicator-border-color": "colorScheme.solid";
         };
+        _container: {
+          css: {
+            bg: "bg";
+          };
+          style: string;
+        }[];
         _indeterminate: {
           "--indicator-border-color": "colorScheme.solid";
         };

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

@@ -123,6 +123,12 @@ declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "descript
       _checked: {
         "--indicator-border-color": "colorScheme.solid";
       };
+      _container: {
+        css: {
+          bg: "bg";
+        };
+        style: string;
+      }[];
       _indeterminate: {
         "--indicator-border-color": "colorScheme.solid";
       };

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

@@ -6,7 +6,7 @@ import { CircleProgressStyle } from "./circle-progress.style.js";
 import { UseProgressProps } from "../progress/use-progress.js";
 import "../progress/index.js";
 import "../../index.js";
-import * as react935 from "react";
+import * as react982 from "react";
 
 //#region src/components/circle-progress/circle-progress.d.ts
 interface CircleProgressRootProps extends HTMLStyledProps, UseProgressProps, ThemeProps<CircleProgressStyle> {
@@ -39,7 +39,7 @@ interface CircleProgressRootProps extends HTMLStyledProps, UseProgressProps, The
    */
   trackProps?: CircleProgressTrackProps;
 }
-declare const CircleProgressPropsContext: react935.Context<Partial<CircleProgressRootProps> | undefined>, useCircleProgressPropsContext: () => Partial<CircleProgressRootProps> | undefined;
+declare const CircleProgressPropsContext: react982.Context<Partial<CircleProgressRootProps> | undefined>, useCircleProgressPropsContext: () => Partial<CircleProgressRootProps> | undefined;
 /**
  * `CircleProgress` is a component that displays progress in a circular progress bar.
  *

package/dist/types/components/close-button/close-button.d.ts

@@ -5,11 +5,11 @@ import { IconButtonProps } from "../button/icon-button.js";
 import "../button/index.js";
 import { CloseButtonStyle } from "./close-button.style.js";
 import "../../index.js";
-import * as react934 from "react";
+import * as react981 from "react";
 
 //#region src/components/close-button/close-button.d.ts
 interface CloseButtonProps extends Omit<WithoutThemeProps<IconButtonProps, CloseButtonStyle>, "aria-label">, Pick<HTMLProps<"button">, "aria-label"> {}
-declare const CloseButtonPropsContext: react934.Context<Partial<CloseButtonProps> | undefined>, useCloseButtonPropsContext: () => Partial<CloseButtonProps> | undefined;
+declare const CloseButtonPropsContext: react981.Context<Partial<CloseButtonProps> | undefined>, useCloseButtonPropsContext: () => Partial<CloseButtonProps> | undefined;
 /**
  * `CloseButton` is a component used primarily to trigger the close functionality of a component.
  *

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

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { CodeStyle } from "./code.style.js";
 import "../../index.js";
-import * as react933 from "react";
+import * as react980 from "react";
 
 //#region src/components/code/code.d.ts
 interface CodeProps extends HTMLStyledProps<"code">, ThemeProps<CodeStyle> {}
-declare const CodePropsContext: react933.Context<Partial<CodeProps> | undefined>, useCodePropsContext: () => Partial<CodeProps> | undefined;
+declare const CodePropsContext: react980.Context<Partial<CodeProps> | undefined>, useCodePropsContext: () => Partial<CodeProps> | undefined;
 /**
  * `Code` is a component that represents a code block. By default, it renders a `code` element.
  *

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

@@ -5,7 +5,7 @@ import { HTMLMotionProps, WithTransitionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import { CollapseStyle } from "./collapse.style.js";
 import "../../index.js";
-import * as react929 from "react";
+import * as react976 from "react";
 
 //#region src/components/collapse/collapse.d.ts
 interface CollapseProps extends WithTransitionProps<HTMLMotionProps>, ThemeProps<CollapseStyle> {
@@ -28,7 +28,7 @@ interface CollapseProps extends WithTransitionProps<HTMLMotionProps>, ThemeProps
    */
   startingHeight?: number | string;
 }
-declare const CollapsePropsContext: react929.Context<Partial<CollapseProps> | undefined>, useCollapsePropsContext: () => Partial<CollapseProps> | undefined;
+declare const CollapsePropsContext: react976.Context<Partial<CollapseProps> | undefined>, useCollapsePropsContext: () => Partial<CollapseProps> | undefined;
 /**
  * `Collapse` is a component that allows you to expand or collapse an element for display.
  *

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

@@ -14,7 +14,7 @@ import { ColorSelectorRootProps } from "../color-selector/color-selector.js";
 import "../color-selector/index.js";
 import { UseColorPickerProps } from "./use-color-picker.js";
 import "../../index.js";
-import * as react932 from "react";
+import * as react979 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/color-picker/color-picker.d.ts
@@ -78,7 +78,7 @@ interface ColorPickerProps extends Omit<HTMLStyledProps, "defaultValue" | "offse
    */
   startElementProps?: InputElementProps;
 }
-declare const ColorPickerPropsContext: react932.Context<Partial<ColorPickerProps> | undefined>, useColorPickerPropsContext: () => Partial<ColorPickerProps> | undefined;
+declare const ColorPickerPropsContext: react979.Context<Partial<ColorPickerProps> | undefined>, useColorPickerPropsContext: () => Partial<ColorPickerProps> | undefined;
 /**
  * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.
  *

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

@@ -286,6 +286,12 @@ declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon"
       border?: "1px solid transparent" | undefined;
       focusRingColor?: "{focus-border-color}" | undefined;
       focusVisibleRing?: "inside" | undefined;
+      _container?: {
+        css: {
+          bg: "bg";
+        };
+        style: string;
+      }[] | undefined;
       _invalid?: {
         borderColor: "{error-border-color}";
         focusRingColor: "{error-border-color}";
@@ -365,6 +371,12 @@ declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon"
       border?: "1px solid {colors.border}" | undefined;
       focusRingColor?: "{focus-border-color}" | undefined;
       focusVisibleRing?: "inside" | undefined;
+      _container?: {
+        css: {
+          bg: "bg";
+        };
+        style: string;
+      }[] | undefined;
       _invalid?: {
         borderColor: "{error-border-color}";
         focusRingColor: "{error-border-color}";