rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/esm/Grid/Col.js

@@ -0,0 +1,107 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useMemo } from 'react';
+import omit from 'lodash/omit';
+import { forwardRef } from "../internals/utils/index.js";
+import { BREAKPOINTS } from "../internals/constants/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+/**
+ * The `Col` component is used for layout and grids.
+ * @see https://rsuitejs.com/en/components/grid
+ */
+const Col = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Col', props);
+  const {
+    as: Component = 'div',
+    classPrefix = 'col',
+    className,
+    span,
+    offset,
+    push,
+    pull,
+    order,
+    hidden,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    prefix,
+    merge,
+    rootPrefix,
+    withPrefix
+  } = useStyles(classPrefix);
+  const {
+    colClasses,
+    omitKeys
+  } = useMemo(() => {
+    const colClasses = {};
+    const omitKeys = {};
+    const addResponsiveClasses = (size, value, type) => {
+      if (value === undefined) return;
+      if (type === 'span' && value === 'auto') {
+        colClasses[prefix(`auto-${size}`)] = true;
+        return;
+      }
+      const classKey = type === 'hidden' ? rootPrefix(`hidden-${size}`) : prefix(`${size}-${type === 'span' ? '' : type + '-'}${value}`);
+      colClasses[classKey] = type === 'hidden' ? Boolean(value) : Number(value) >= 0;
+    };
+
+    // Handle new responsive props format
+    const resolve = (propValue, type) => {
+      if (propValue === undefined) return;
+      if (typeof propValue === 'object') {
+        // Handle responsive object format
+        BREAKPOINTS.forEach(size => {
+          const value = propValue[size];
+          if (value !== undefined) {
+            addResponsiveClasses(size, value, type);
+          }
+        });
+      } else {
+        // Handle single value format (applies to xs)
+        addResponsiveClasses('xs', propValue, type);
+      }
+    };
+
+    // Process new format props
+    resolve(span, 'span');
+    resolve(offset, 'offset');
+    resolve(push, 'push');
+    resolve(pull, 'pull');
+    resolve(order, 'order');
+    resolve(hidden, 'hidden');
+
+    // Handle legacy format props
+    BREAKPOINTS.forEach(size => {
+      const value = rest[size];
+      omitKeys[size] = null;
+      if (typeof value === 'number') {
+        addResponsiveClasses(size, value, 'span');
+      }
+
+      // Handle legacy props
+      ['Offset', 'Push', 'Pull', 'Hidden'].forEach(type => {
+        const legacyKey = `${size}${type}`;
+        const legacyValue = rest[legacyKey];
+        omitKeys[legacyKey] = null;
+        if (legacyValue !== undefined) {
+          addResponsiveClasses(size, legacyValue, type.toLowerCase());
+        }
+      });
+    });
+    return {
+      colClasses,
+      omitKeys
+    };
+  }, [prefix, rootPrefix, span, offset, push, pull, order, hidden, ...BREAKPOINTS.map(size => rest[size])]);
+  const classes = merge(className, withPrefix(), colClasses);
+  const unhandledProps = omit(rest, Object.keys(omitKeys));
+  return /*#__PURE__*/React.createElement(Component, _extends({}, unhandledProps, {
+    ref: ref,
+    className: classes
+  }));
+});
+Col.displayName = 'Col';
+export default Col;

package/esm/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import type { WithAsProps } from '../internals/types';
 export interface GridProps extends WithAsProps {
-    /** Fluid layout */
+    /** Whether the grid container should have a fluid width */
     fluid?: boolean;
 }
 /**

package/esm/Grid/Grid.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Grid component is used to specify the layout of child elements in rows and columns.
@@ -20,16 +20,14 @@ const Grid = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const classes = merge(className, fluid ? prefix({
     fluid
-  }) : withClassPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "grid"
-  }, rest, {
+  }) : withPrefix());
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
   }));

package/esm/Grid/Row.d.ts

@@ -0,0 +1,16 @@
+import type { WithAsProps, ResponsiveValue } from '../internals/types';
+import type { RowAlignment, RowJustify } from './types';
+export interface RowProps extends WithAsProps {
+    /** Spacing between columns. Support responsive values */
+    gutter?: number | string | ResponsiveValue<number | string>;
+    /** Vertical alignment of columns. Support responsive values */
+    align?: RowAlignment | ResponsiveValue<RowAlignment>;
+    /** Horizontal distribution of columns. Support responsive values */
+    justify?: RowJustify | ResponsiveValue<RowJustify>;
+}
+/**
+ * The Row component is used to create a row container that can contain Col components.
+ * @see https://rsuitejs.com/components/grid
+ */
+declare const Row: import("../internals/types").InternalRefForwardingComponent<"div", RowProps, never> & Record<string, never>;
+export default Row;

package/esm/Grid/Row.js

@@ -0,0 +1,57 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
+import { BREAKPOINTS } from "../internals/constants/index.js";
+const getResponsiveGutterStyles = gutter => {
+  if (!gutter) {
+    return {};
+  }
+  if (typeof gutter !== 'object') {
+    return {
+      '--rs-grid-gutter': getCssValue(gutter)
+    };
+  }
+  return BREAKPOINTS.reduce((styles, breakpoint) => {
+    const breakpointValue = gutter[breakpoint];
+    if (!breakpointValue) return styles;
+    return mergeStyles(styles, {
+      [`--rs-grid-gutter${breakpoint === 'xs' ? '' : `-${breakpoint}`}`]: getCssValue(breakpointValue)
+    });
+  }, {});
+};
+/**
+ * The Row component is used to create a row container that can contain Col components.
+ * @see https://rsuitejs.com/components/grid
+ */
+const Row = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Row', props);
+  const {
+    as: Component = 'div',
+    className,
+    classPrefix = 'row',
+    style,
+    align,
+    justify,
+    gutter,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    responsive
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(), ...responsive(align), ...responsive(justify));
+  const rowStyles = mergeStyles(style, getResponsiveGutterStyles(gutter));
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes,
+    style: rowStyles
+  }));
+});
+Row.displayName = 'Row';
+export default Row;

package/esm/Grid/index.d.ts

@@ -1,4 +1,9 @@
 import Grid from './Grid';
+import Row from './Row';
+import Col from './Col';
 export type { GridProps } from './Grid';
-export { Grid };
+export type { RowProps } from './Row';
+export type { ColProps } from './Col';
+export type { RowAlignment, RowJustify } from './types';
+export { Grid, Row, Col };
 export default Grid;

package/esm/Grid/index.js

@@ -1,8 +1,10 @@
 'use client';
 import Grid from "./Grid.js";
+import Row from "./Row.js";
+import Col from "./Col.js";
 
 // export types
 
 // export components
-export { Grid };
+export { Grid, Row, Col };
 export default Grid;

package/esm/Grid/types.d.ts

@@ -0,0 +1,65 @@
+export type RowAlignment = 'top' | 'middle' | 'bottom';
+export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+/** @deprecated Use new responsive props format instead */
+export interface DeprecatedColProps {
+    /** @deprecated Use span={{ xs: number }} instead */
+    xs?: number;
+    /** @deprecated Use span={{ sm: number }} instead */
+    sm?: number;
+    /** @deprecated Use span={{ md: number }} instead */
+    md?: number;
+    /** @deprecated Use span={{ lg: number }} instead */
+    lg?: number;
+    /** @deprecated Use span={{ xl: number }} instead */
+    xl?: number;
+    /** @deprecated Use span={{ xxl: number }} instead */
+    xxl?: number;
+    /** @deprecated Use offset={{ xs: number }} instead */
+    xsOffset?: number;
+    /** @deprecated Use offset={{ sm: number }} instead */
+    smOffset?: number;
+    /** @deprecated Use offset={{ md: number }} instead */
+    mdOffset?: number;
+    /** @deprecated Use offset={{ lg: number }} instead */
+    lgOffset?: number;
+    /** @deprecated Use offset={{ xl: number }} instead */
+    xlOffset?: number;
+    /** @deprecated Use offset={{ xxl: number }} instead */
+    xxlOffset?: number;
+    /** @deprecated Use push={{ xs: number }} instead */
+    xsPush?: number;
+    /** @deprecated Use push={{ sm: number }} instead */
+    smPush?: number;
+    /** @deprecated Use push={{ md: number }} instead */
+    mdPush?: number;
+    /** @deprecated Use push={{ lg: number }} instead */
+    lgPush?: number;
+    /** @deprecated Use push={{ xl: number }} instead */
+    xlPush?: number;
+    /** @deprecated Use push={{ xxl: number }} instead */
+    xxlPush?: number;
+    /** @deprecated Use pull={{ xs: number }} instead */
+    xsPull?: number;
+    /** @deprecated Use pull={{ sm: number }} instead */
+    smPull?: number;
+    /** @deprecated Use pull={{ md: number }} instead */
+    mdPull?: number;
+    /** @deprecated Use pull={{ lg: number }} instead */
+    lgPull?: number;
+    /** @deprecated Use pull={{ xl: number }} instead */
+    xlPull?: number;
+    /** @deprecated Use pull={{ xxl: number }} instead */
+    xxlPull?: number;
+    /** @deprecated Use hidden={{ xs: true }} instead */
+    xsHidden?: boolean;
+    /** @deprecated Use hidden={{ sm: true }} instead */
+    smHidden?: boolean;
+    /** @deprecated Use hidden={{ md: true }} instead */
+    mdHidden?: boolean;
+    /** @deprecated Use hidden={{ lg: true }} instead */
+    lgHidden?: boolean;
+    /** @deprecated Use hidden={{ xl: true }} instead */
+    xlHidden?: boolean;
+    /** @deprecated Use hidden={{ xxl: true }} instead */
+    xxlHidden?: boolean;
+}

package/esm/Grid/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/Heading/Heading.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  *
@@ -22,10 +22,10 @@ const Heading = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const Component = as || `h${level}`;
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,

package/esm/Highlight/Highlight.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { highlightText } from "./utils/highlightText.js";
 import { forwardRef, stringifyReactNode } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -32,10 +32,10 @@ const Highlight = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const text = stringifyReactNode(children);
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,

package/esm/IconButton/IconButton.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Button from "../Button/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `IconButton` component is used to specify a button with icon.
@@ -24,9 +24,9 @@ const IconButton = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(`placement-${placement}`, {
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(`placement-${placement}`, {
     circle,
     'with-text': typeof children !== 'undefined'
   }));

package/esm/Image/Image.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { ImageWrapper } from "./ImageWrapper.js";
 import { useImage } from "./hooks/useImage.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -35,9 +35,9 @@ const Image = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     circle,
     bordered,
     rounded,

package/esm/InlineEdit/EditableControls.js

@@ -12,8 +12,7 @@ const EditableControls = /*#__PURE__*/React.forwardRef(function EditableControls
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(Stack, _extends({
-    ref: ref,
-    spacing: 6
+    ref: ref
   }, rest), /*#__PURE__*/React.createElement(IconButton, {
     size: "sm",
     icon: /*#__PURE__*/React.createElement(CheckIcon, null),

package/esm/InlineEdit/InlineEdit.js

@@ -4,7 +4,7 @@ import React from 'react';
 import EditableControls from "./EditableControls.js";
 import useFocusEvent from "./useFocusEvent.js";
 import useEditState from "./useEditState.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
 import { renderChildren, defaultRenderInput } from "./renderChildren.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -18,17 +18,17 @@ const InlineEdit = forwardRef((props, ref) => {
     classPrefix = 'inline-edit',
     className,
     disabled,
-    size,
+    size = 'md',
     showControls = true,
     stateOnBlur = 'save',
     placeholder,
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     value,
     isEditing,
@@ -64,7 +64,7 @@ const InlineEdit = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: mergeRefs(root, ref),
     tabIndex: 0,
-    className: merge(className, withClassPrefix(size, {
+    className: merge(className, withPrefix(size, {
       disabled
     })),
     onClick: onClick,

package/esm/InlineEdit/renderChildren.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactElement } from '../internals/types';
 export interface ChildrenProps {
     size?: 'lg' | 'md' | 'sm' | 'xs';
     disabled?: boolean;
@@ -9,4 +10,4 @@ export interface ChildrenProps {
     onBlur?: (event?: React.FocusEvent) => void;
 }
 export declare function defaultRenderInput(props: ChildrenProps, ref: React.Ref<any>): React.JSX.Element;
-export declare function renderChildren(children: ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement) | React.ReactElement, props: ChildrenProps, ref: React.Ref<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare function renderChildren(children: ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement) | React.ReactElement, props: ChildrenProps, ref: React.Ref<any>): ReactElement;

package/esm/InlineEdit/renderChildren.js

@@ -25,11 +25,12 @@ export function renderChildren(children, props, ref) {
       onBlur,
       ...rest
     } = props;
+    const childElement = children;
     const {
       onExit,
       onClean
-    } = children.props;
-    return /*#__PURE__*/React.cloneElement(children, {
+    } = childElement.props;
+    return /*#__PURE__*/React.cloneElement(childElement, {
       ...rest,
       // Pass onBlur to the child component to automatically save or cancel after the focus event is processed.
       // Special handling in the Picker component, call onBlur when onExit and onClean

package/esm/InlineEdit/useFocusEvent.d.ts

@@ -7,8 +7,8 @@ interface FocusEventProps {
     onCancel?: (event?: React.FocusEvent | null) => void;
 }
 declare const useFocusEvent: ({ isEditing, stateOnBlur, onSave, onCancel }: FocusEventProps) => {
-    target: import("react").RefObject<HTMLInputElement | PickerHandle>;
-    root: import("react").RefObject<HTMLDivElement>;
+    target: import("react").RefObject<HTMLInputElement | PickerHandle | null>;
+    root: import("react").RefObject<HTMLDivElement | null>;
     onBlur: (...args: any[]) => any;
 };
 export default useFocusEvent;

package/esm/Input/Input.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { PrependParameters } from '../internals/types/utils';
-import type { WithAsProps, FormControlBaseProps, SizeType } from '../internals/types';
+import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, WithAsProps, Size } from '../internals/types';
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, Omit<FormControlBaseProps, 'onChange'> {
+export interface InputProps extends WithAsProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */
     id?: string;
     /** A component can have different sizes */
-    size?: SizeType;
+    size?: Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
     /**

package/esm/Input/Input.js

@@ -6,7 +6,7 @@ import { forwardRef } from "../internals/utils/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
 import { InputGroupContext } from "../InputGroup/InputGroup.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -18,6 +18,7 @@ const Input = forwardRef((props, ref) => {
   const {
     propsWithDefaults
   } = useCustom('Input', props);
+  const inputGroup = useContext(InputGroupContext);
   const {
     className,
     classPrefix = 'input',
@@ -28,7 +29,7 @@ const Input = forwardRef((props, ref) => {
     defaultValue,
     inputRef,
     id,
-    size,
+    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
     htmlSize,
     plaintext,
     placeholder,
@@ -51,13 +52,12 @@ const Input = forwardRef((props, ref) => {
     onChange === null || onChange === void 0 || onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
   };
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(size, {
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(size, {
     plaintext
   }));
-  const inputGroupContext = useContext(InputGroupContext);
   const {
     controlId
   } = useFormGroup();
@@ -76,8 +76,8 @@ const Input = forwardRef((props, ref) => {
   if (inputable) {
     eventProps.onChange = handleChange;
     eventProps.onKeyDown = handleKeyDown;
-    eventProps.onFocus = createChainedFunction(onFocus, inputGroupContext === null || inputGroupContext === void 0 ? void 0 : inputGroupContext.onFocus);
-    eventProps.onBlur = createChainedFunction(onBlur, inputGroupContext === null || inputGroupContext === void 0 ? void 0 : inputGroupContext.onBlur);
+    eventProps.onFocus = createChainedFunction(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
+    eventProps.onBlur = createChainedFunction(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
   }
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, eventProps, {
     ref: mergeRefs(ref, inputRef),

package/esm/InputGroup/InputGroup.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { WithAsProps, SizeType } from '../internals/types';
+import { WithAsProps, Size } from '../internals/types';
 export declare const InputGroupContext: React.Context<{
     onFocus: () => void;
     onBlur: () => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } | null>;
 export interface InputGroupProps extends WithAsProps {
     /** Sets the composition content internally */
@@ -12,7 +13,7 @@ export interface InputGroupProps extends WithAsProps {
     /** Primary content */
     children?: React.ReactNode;
     /** A component can have different sizes */
-    size?: SizeType;
+    size?: Size;
 }
 /**
  * The `InputGroup` component is used to specify an input field with an add-on.

package/esm/InputGroup/InputGroup.js

@@ -4,7 +4,7 @@ import React, { useState, useCallback, useMemo } from 'react';
 import InputGroupAddon from "./InputGroupAddon.js";
 import InputGroupButton from "./InputGroupButton.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 export const InputGroupContext = /*#__PURE__*/React.createContext(null);
 const Subcomponents = {
@@ -26,7 +26,7 @@ const InputGroup = forwardRef((props, ref) => {
     className,
     disabled,
     inside,
-    size,
+    size = 'md',
     children,
     ...rest
   } = propsWithDefaults;
@@ -38,10 +38,10 @@ const InputGroup = forwardRef((props, ref) => {
     setFocus(false);
   }, []);
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(size, {
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(size, {
     inside,
     focus,
     disabled
@@ -60,9 +60,10 @@ const InputGroup = forwardRef((props, ref) => {
     });
   }, [children, disabled]);
   const contextValue = useMemo(() => ({
+    size,
     onFocus: handleFocus,
     onBlur: handleBlur
-  }), [handleFocus, handleBlur]);
+  }), [size, handleFocus, handleBlur]);
   return /*#__PURE__*/React.createElement(InputGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {

package/esm/InputGroup/InputGroupAddon.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 /**
  * The `InputGroup.Addon` component is used to specify an input field with an add-on.
@@ -16,10 +16,10 @@ const InputGroupAddon = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     disabled
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {