rsuite 6.0.0-canary-20250416 → 6.0.0-canary-20250424

package/esm/IconButton/IconButton.js

@@ -3,8 +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 { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  * The `IconButton` component is used to specify a button with icon.
  * @see https://rsuitejs.com/components/button

package/esm/Image/Image.js

@@ -2,11 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
+import { forwardRef } from "../internals/utils/index.js";
 import { ImageWrapper } from "./ImageWrapper.js";
 import { useImage } from "./hooks/useImage.js";
-import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef } from "../internals/utils/index.js";
 const Image = forwardRef((props, ref) => {
   const {
     propsWithDefaults

package/esm/InlineEdit/InlineEdit.js

@@ -5,10 +5,9 @@ import EditableControls from "./EditableControls.js";
 import useFocusEvent from "./useFocusEvent.js";
 import useEditState from "./useEditState.js";
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } 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";
 const InlineEdit = forwardRef((props, ref) => {
   const {
     propsWithDefaults

package/esm/Input/Input.js

@@ -1,10 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import { forwardRef } from "../internals/utils/index.js";
 import InputBase from "../internals/InputBase/index.js";
+import { forwardRef } from "../internals/utils/index.js";
 import { InputGroupContext } from "../InputGroup/InputGroup.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useCustom } from "../internals/hooks/index.js";
 /**
  * The `<Input>` component is used to get user input in a text field.
  *

package/esm/InputGroup/InputGroup.js

@@ -5,8 +5,7 @@ import Box from "../internals/Box/index.js";
 import InputGroupAddon from "./InputGroupAddon.js";
 import InputGroupButton from "./InputGroupButton.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 export const InputGroupContext = /*#__PURE__*/React.createContext(null);
 const Subcomponents = {
   Addon: InputGroupAddon,

package/esm/InputNumber/index.d.ts

@@ -1,4 +1,14 @@
-import InputNumber from './InputNumber';
-export type { InputNumberProps } from './InputNumber';
+/// <reference types="react" />
+import { NumberInputProps as InputNumberProps } from '../NumberInput';
+/**
+ * The `InputNumber` component is used to enter a numerical value.
+ * @see https://rsuitejs.com/components/number-input
+ * @deprecated Use `NumberInput` instead.
+ */
+declare const InputNumber: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("..").InputGroupProps, never> & {
+    Addon: import("../internals/types").InternalRefForwardingComponent<"span", import("..").InputGroupAddonProps, never> & Record<string, never>;
+    Button: import("react").ForwardRefExoticComponent<import("..").ButtonProps & import("react").RefAttributes<any>>;
+}, InputNumberProps<string | number | null>, never> & Record<string, never>;
+export type { InputNumberProps };
 export { InputNumber };
 export default InputNumber;

package/esm/InputNumber/index.js

@@ -1,5 +1,12 @@
 'use client';
-import InputNumber from "./InputNumber.js";
+import NumberInput from "../NumberInput/index.js";
+
+/**
+ * The `InputNumber` component is used to enter a numerical value.
+ * @see https://rsuitejs.com/components/number-input
+ * @deprecated Use `NumberInput` instead.
+ */
+const InputNumber = NumberInput;
 
 // export types
 

package/esm/InputPicker/InputPicker.js

@@ -14,11 +14,10 @@ import useInput from "./hooks/useInput.js";
 import useData from "./hooks/useData.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { useTagContext } from "./InputPickerContext.js";
 import { convertSize } from "./utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, shallowEqual, getDataGroupBy, createChainedFunction, tplTransform, mergeRefs, isOneOf, mergeStyles } from "../internals/utils/index.js";
 import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, useSearch, usePickerRef, useToggleKeyDownEvent, triggerPropKeys } from "../internals/Picker/index.js";
 import { getPositionStyle } from "../internals/Overlay/Position.js";

package/esm/InputPicker/utils.d.ts

@@ -1 +1 @@
-export declare const convertSize: (size?: string) => "sm" | "md" | "lg";
+export declare const convertSize: (size?: string) => "lg" | "md" | "sm";

package/esm/Kbd/Kbd.js

@@ -3,8 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  *
  * The `Kbd` component is used to display a Kbd.

package/esm/Link/Link.js

@@ -2,8 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import SafeAnchor from "../internals/SafeAnchor/index.js";
 import ExternalLinkIcon from "./ExternalLinkIcon.js";
 const Link = forwardRef((props, ref) => {

package/esm/List/List.js

@@ -5,9 +5,8 @@ import useSortHelper from "./helper/useSortHelper.js";
 import ListContext from "./ListContext.js";
 import ListItem from "./ListItem.js";
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
   Item: ListItem
 };

package/esm/Loader/Loader.js

@@ -3,8 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles, useUniqueId } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useUniqueId } from "../internals/hooks/index.js";
 /**
  * The `Loader` component is used to indicate the loading state of a page or a section.
  * @see https://rsuitejs.com/components/loader

package/esm/MaskedInput/MaskedInput.js

@@ -4,7 +4,7 @@ import React from 'react';
 import TextMask from "./TextMask.js";
 import Input from "../Input/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useCustom } from "../internals/hooks/index.js";
 const MaskedInput = forwardRef((props, ref) => {
   const {
     propsWithDefaults

package/esm/Message/Message.js

@@ -6,8 +6,7 @@ import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 import Box from "../internals/Box/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
-import { useStyles, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 /**
  * The `Message` component is used to display important messages to users.
  * @see https://rsuitejs.com/components/message

package/esm/Modal/Modal.js

@@ -11,11 +11,10 @@ import ModalBody from "./ModalBody.js";
 import ModalHeader from "./ModalHeader.js";
 import ModalTitle from "./ModalTitle.js";
 import ModalFooter from "./ModalFooter.js";
-import { useStyles, useWillUnmount, useUniqueId } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useWillUnmount, useUniqueId } from "../internals/hooks/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { ModalContext } from "./ModalContext.js";
 import { useBodyStyles } from "./utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 const modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 const Subcomponents = {
   Body: ModalBody,

package/esm/Modal/ModalHeader.js

@@ -25,7 +25,6 @@ const ModalHeader = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix());
   const context = useContext(ModalContext);
   const {
-    isDrawer,
     onModalClose
   } = context || {};
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -34,7 +33,7 @@ const ModalHeader = forwardRef((props, ref) => {
     ref: ref,
     className: classes
   }), closeButton && /*#__PURE__*/React.createElement(CloseButton, {
-    as: isDrawer ? IconButton : 'button',
+    as: IconButton,
     className: prefix('close'),
     onClick: createChainedFunction(onClose, onModalClose)
   }), children);

package/esm/MultiCascadeTree/MultiCascadeTree.js

@@ -6,8 +6,7 @@ import SearchView from "./SearchView.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useCascadeValue, useSelect, useSearch } from "./hooks/index.js";
-import { useStyles, useControlled } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useControlled } from "../internals/hooks/index.js";
 const emptyArray = [];
 
 /**

package/esm/MultiCascadeTree/SearchView.js

@@ -4,8 +4,7 @@ import React from 'react';
 import SearchBox from "../internals/SearchBox/index.js";
 import Checkbox from "../Checkbox/index.js";
 import Highlight from "../Highlight/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { isSomeChildChecked, getNodeParents } from "./utils.js";
 function SearchView(props) {
   const {

package/esm/MultiCascadeTree/TreeView.js

@@ -4,11 +4,10 @@ import React from 'react';
 import SpinnerIcon from '@rsuite/icons/Spinner';
 import ArrowLeftLineIcon from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLineIcon from '@rsuite/icons/ArrowRightLine';
-import { useStyles, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqual, mergeStyles } from "../internals/utils/index.js";
 import { ListCheckItem, useCombobox } from "../internals/Picker/index.js";
 import { isSomeParentChecked, isSomeChildChecked } from "./utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 const emptyArray = [];
 const TreeView = forwardRef((props, ref) => {
   const {

package/esm/MultiCascader/MultiCascader.js

@@ -8,11 +8,10 @@ import TreeView from "../MultiCascadeTree/TreeView.js";
 import SearchView from "../MultiCascadeTree/SearchView.js";
 import useActive from "../Cascader/useActive.js";
 import { findNodeOfTree } from "../internals/Tree/utils/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { getColumnsAndPaths } from "../CascadeTree/utils.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { useCascadeValue, useSearch, useSelect } from "../MultiCascadeTree/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 import { PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, triggerPropKeys } from "../internals/Picker/index.js";
 const emptyArray = [];
 

package/esm/Nav/Nav.js

@@ -11,10 +11,9 @@ import NavDropdownMenu from "./NavDropdownMenu.js";
 import AdaptiveNavItem from "./AdaptiveNavItem.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef, deprecateComponent } from "../internals/utils/index.js";
-import { useStyles, useEnsuredRef, useControlled } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useEnsuredRef, useControlled } from "../internals/hooks/index.js";
 import { NavbarContext } from "../Navbar/NavbarContext.js";
 import { SidenavContext } from "../Sidenav/Sidenav.js";
-import { useCustom } from "../CustomProvider/index.js";
 const DeprecatedNavDropdown = deprecateComponent(NavDropdown, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');
 DeprecatedNavDropdown.Menu = deprecateComponent(NavDropdownMenu, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');
 DeprecatedNavDropdown.Item = deprecateComponent(NavDropdownItem, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');

package/esm/Nav/NavDropdownMenu.js

@@ -7,9 +7,8 @@ import MenuItem from "../internals/Menu/MenuItem.js";
 import PagePreviousIcon from '@rsuite/icons/PagePrevious';
 import PageNextIcon from '@rsuite/icons/PageNext';
 import NavContext from "./NavContext.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * @private
  */

package/esm/Navbar/Navbar.d.ts

@@ -17,7 +17,7 @@ export interface NavbarProps extends BoxProps {
 declare const Navbar: import("../internals/types").InternalRefForwardingComponent<"div", NavbarProps, never> & {
     Brand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
     Content: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>, Partial<import("./NavbarContent").NavbarContentProps>, never> & Record<string, never>;
-    Toggle: React.ForwardRefExoticComponent<import("..").IconButtonProps & React.RefAttributes<any>>;
+    Toggle: React.ForwardRefExoticComponent<import("./NavbarToggle").NavbarToggleProps & React.RefAttributes<any>>;
     Drawer: React.ForwardRefExoticComponent<import("..").DrawerProps & React.RefAttributes<any>>;
 };
 export default Navbar;

package/esm/Navbar/Navbar.js

@@ -7,8 +7,7 @@ import NavbarToggle from "./NavbarToggle.js";
 import NavbarDrawer from "./NavbarDrawer.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { NavbarContext } from "./NavbarContext.js";
 const Subcomponents = {
   Brand: NavbarBrand,

package/esm/Navbar/NavbarDropdownMenu.js

@@ -8,9 +8,8 @@ import PageNextIcon from '@rsuite/icons/PageNext';
 import Disclosure from "../internals/Disclosure/index.js";
 import NavContext from "../Nav/NavContext.js";
 import { mergeRefs } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { NavbarContext } from "./NavbarContext.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> within a <Navbar>

package/esm/Navbar/NavbarToggle.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
-import { IconButtonProps } from '../IconButton';
-export type NavbarToggleProps = IconButtonProps;
-declare const NavbarToggle: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<any>>;
+import { BurgerProps } from '../internals/Burger';
+export interface NavbarToggleProps extends Omit<BurgerProps, 'onToggle'> {
+    /**
+     * Callback function that is called when the toggle is clicked.
+     */
+    onToggle?: (open: boolean) => void;
+}
+declare const NavbarToggle: React.ForwardRefExoticComponent<NavbarToggleProps & React.RefAttributes<any>>;
 export default NavbarToggle;

package/esm/Navbar/NavbarToggle.js

@@ -1,36 +1,31 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import IconButton from "../IconButton/index.js";
-import MenuIcon from '@rsuite/icons/Menu';
+import { Burger } from "../internals/Burger/index.js";
 import { useEventCallback } from "../internals/hooks/index.js";
-import { createComponent, createChainedFunction } from "../internals/utils/index.js";
+import { createChainedFunction } from "../internals/utils/index.js";
 import { NavbarContext } from "./NavbarContext.js";
-const Toggle = createComponent({
-  name: 'NavbarToggle',
-  componentAs: IconButton,
-  componentClassPrefix: 'navbar-toggle',
-  icon: /*#__PURE__*/React.createElement(MenuIcon, null)
-});
 const NavbarToggle = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    appearance: navbarAppearance,
     navbarId,
-    onToggle
+    open: contextOpen,
+    onToggle: onToggleContext
   } = useContext(NavbarContext) || {};
   const {
-    appearance = navbarAppearance === 'inverse' ? 'primary' : 'subtle',
+    open,
     onClick,
+    onToggle,
     ...rest
   } = props;
   const handleClick = useEventCallback(() => {
     onToggle === null || onToggle === void 0 || onToggle(true);
+    onToggleContext === null || onToggleContext === void 0 || onToggleContext(true);
   });
-  return /*#__PURE__*/React.createElement(Toggle, _extends({
+  return /*#__PURE__*/React.createElement(Burger, _extends({
     ref: ref,
-    appearance: appearance,
     onClick: createChainedFunction(handleClick, onClick),
-    "aria-controls": `${navbarId}-drawer`
+    "aria-controls": `${navbarId}-drawer`,
+    open: typeof open === 'boolean' ? open : contextOpen
   }, rest));
 });
 NavbarToggle.displayName = 'NavbarToggle';

package/esm/Notification/Notification.js

@@ -5,9 +5,8 @@ import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 import CloseButton from "../internals/CloseButton/index.js";
 import Box from "../internals/Box/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
-import { useStyles, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `Notification` component is used to display global messages and notifications.
  *

package/esm/{InputNumber/InputNumber.d.ts → NumberInput/NumberInput.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, Size } from '../internals/types';
-export interface InputNumberProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, BoxProps, FormControlBaseProps<T> {
+import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, BasicSize } from '../internals/types';
+export interface NumberInputProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, BoxProps, FormControlBaseProps<T> {
     /**
      * Button can have different appearances
      */
@@ -41,27 +41,39 @@ export interface InputNumberProps<T = number | string | null> extends Omit<Sanit
     prefix?: React.ReactNode;
     /**
      * Sets the element displayed on the right side of the component
+     * @deprecated Use `suffix` instead.
      */
     postfix?: React.ReactNode;
+    /**
+     * Sets the element displayed on the right side of the component
+     */
+    suffix?: React.ReactNode;
     /**
      * An Input can have different sizes
      */
-    size?: Size;
+    size?: BasicSize;
     /**
      * Whether the value can be changed through the wheel event
      */
     scrollable?: boolean;
+    /**
+     * Show or hide control icons:
+     * - `true` (default): show default up/down buttons.
+     * - `false`: hide controls.
+     * - `(trigger) => ReactNode`: fully custom control per trigger ('up' | 'down').
+     */
+    controls?: boolean | ((trigger: 'up' | 'down') => React.ReactNode);
     /**
      * Callback function when wheel event is triggered
      */
     onWheel?: (event: React.WheelEvent) => void;
 }
 /**
- * The `InputNumber` component is used to enter a numerical value.
- * @see https://rsuitejs.com/components/input-number
+ * The `NumberInput` component is used to enter a numerical value.
+ * @see https://rsuitejs.com/components/number-input
  */
-declare const InputNumber: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("../InputGroup/InputGroup").InputGroupProps, never> & {
+declare const NumberInput: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("../InputGroup/InputGroup").InputGroupProps, never> & {
     Addon: import("../internals/types").InternalRefForwardingComponent<"span", import("../InputGroup/InputGroupAddon").InputGroupAddonProps, never> & Record<string, never>;
     Button: React.ForwardRefExoticComponent<import("../Button").ButtonProps & React.RefAttributes<any>>;
-}, InputNumberProps<string | number | null>, never> & Record<string, never>;
-export default InputNumber;
+}, NumberInputProps<string | number | null>, never> & Record<string, never>;
+export default NumberInput;

package/esm/NumberInput/NumberInput.js

@@ -0,0 +1,157 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import ArrowUpLineIcon from '@rsuite/icons/ArrowUpLine';
+import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
+import InputGroup from "../InputGroup/InputGroup.js";
+import InputGroupAddon from "../InputGroup/InputGroupAddon.js";
+import Input from "../Input/index.js";
+import Button from "../Button/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { forwardRef, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
+import { useNumberInputValue } from "./hooks/useNumberInputValue.js";
+import { useEvents } from "./hooks/useEvents.js";
+import { valueReachesMax, valueReachesMin } from "./utils/number.js";
+/**
+ * The `NumberInput` component is used to enter a numerical value.
+ * @see https://rsuitejs.com/components/number-input
+ */
+const NumberInput = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('NumberInput', props);
+  const {
+    as,
+    className,
+    classPrefix = 'number-input',
+    controls = true,
+    disabled,
+    decimalSeparator,
+    formatter,
+    readOnly,
+    plaintext,
+    value: valueProp,
+    defaultValue,
+    size,
+    prefix: prefixElement,
+    postfix,
+    suffix = postfix,
+    step = 1,
+    buttonAppearance = 'subtle',
+    min: minProp,
+    max: maxProp,
+    scrollable = true,
+    onChange,
+    onWheel,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    ...rest
+  } = propsWithDefaults;
+  const min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;
+  const max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const {
+    withPrefix,
+    merge,
+    prefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const [htmlInputProps, restProps] = partitionHTMLProps(rest);
+  const onChangeValue = (currentValue, event) => {
+    if (currentValue !== value) {
+      setValue(currentValue);
+      onChange === null || onChange === void 0 || onChange(currentValue, event);
+    }
+  };
+  const {
+    inputRef,
+    isFocused,
+    onStepUp,
+    onStepDown,
+    onKeyDown,
+    onFocus,
+    onBlur
+  } = useEvents({
+    min: minProp,
+    max: maxProp,
+    step,
+    value,
+    scrollable,
+    disabled,
+    readOnly,
+    decimalSeparator,
+    onWheel,
+    onChangeValue
+  });
+  const handleChange = useEventCallback((value, event) => {
+    const separator = decimalSeparator || '.';
+    const escapedSeparator = separator.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+
+    // Support both custom decimalSeparator and standard decimal point '.'
+    let regex;
+    if (separator !== '.') {
+      // Allow both the custom separator and the standard decimal point
+      regex = new RegExp(`^-?(?:\\d+)?([.${escapedSeparator}])?\\d*$`);
+    } else {
+      regex = new RegExp(`^-?(?:\\d+)?(${escapedSeparator})?\\d*$`);
+    }
+    if (!regex.test(value) && value !== '') {
+      return;
+    }
+    onChangeValue(value, event);
+  });
+  const inputValue = useNumberInputValue({
+    value,
+    isFocused,
+    formatter,
+    decimalSeparator
+  });
+  const input = /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
+    ref: plaintext ? ref : undefined,
+    inputRef: inputRef,
+    autoComplete: "off",
+    inputMode: "numeric",
+    step: step,
+    value: inputValue,
+    disabled: disabled,
+    readOnly: readOnly,
+    plaintext: plaintext,
+    onKeyDown: onKeyDown,
+    onChange: handleChange,
+    onBlur: createChainedFunction(onBlur, onBlurProp),
+    onFocus: createChainedFunction(onFocus, onFocusProp)
+  }));
+  if (plaintext) {
+    return input;
+  }
+  const stepUpDisabled = disabled || readOnly || valueReachesMax(value, max);
+  const stepDownDisabled = disabled || readOnly || valueReachesMin(value, min);
+  return /*#__PURE__*/React.createElement(InputGroup, _extends({
+    as: as,
+    ref: ref,
+    className: classes,
+    disabled: disabled,
+    size: size,
+    inside: true
+  }, restProps), prefixElement && /*#__PURE__*/React.createElement(InputGroupAddon, null, prefixElement), input, suffix && /*#__PURE__*/React.createElement(InputGroupAddon, null, suffix), controls && /*#__PURE__*/React.createElement("span", {
+    className: prefix('btn-group-vertical')
+  }, /*#__PURE__*/React.createElement(Button, {
+    tabIndex: -1,
+    appearance: buttonAppearance,
+    className: prefix('touchspin-up'),
+    onClick: onStepUp,
+    disabled: stepUpDisabled,
+    "aria-label": "Increment",
+    size: size
+  }, typeof controls === 'function' ? controls('up') : /*#__PURE__*/React.createElement(ArrowUpLineIcon, null)), /*#__PURE__*/React.createElement(Button, {
+    tabIndex: -1,
+    appearance: buttonAppearance,
+    className: prefix('touchspin-down'),
+    onClick: onStepDown,
+    disabled: stepDownDisabled,
+    "aria-label": "Decrement",
+    size: size
+  }, typeof controls === 'function' ? controls('down') : /*#__PURE__*/React.createElement(ArrowDownLineIcon, null))));
+});
+NumberInput.displayName = 'NumberInput';
+export default NumberInput;