rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

package/esm/index.d.ts

@@ -2,7 +2,6 @@ export * from './Text';
 export * from './Heading';
 export * from './HeadingGroup';
 export * from './Highlight';
-export * from './SafeAnchor';
 export * from './Kbd';
 export * from './Button';
 export * from './IconButton';
@@ -32,6 +31,7 @@ export * from './Sidenav';
 export * from './Breadcrumb';
 export * from './Pagination';
 export * from './Steps';
+export * from './Link';
 export * from './Form';
 export * from './FormStack';
 export * from './FormGroup';
@@ -41,9 +41,12 @@ export * from './FormHelpText';
 export * from './FormControl';
 export * from './Toggle';
 export * from './Input';
+export * from './Textarea';
 export * from './MaskedInput';
 export * from './InputNumber';
 export * from './InputGroup';
+export * from './PasswordInput';
+export * from './PasswordStrengthMeter';
 export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './Radio';

package/esm/index.js

@@ -5,7 +5,6 @@ export * from "./Text/index.js";
 export * from "./Heading/index.js";
 export * from "./HeadingGroup/index.js";
 export * from "./Highlight/index.js";
-export * from "./SafeAnchor/index.js";
 export * from "./Kbd/index.js";
 
 // Buttons
@@ -50,6 +49,7 @@ export * from "./Sidenav/index.js";
 export * from "./Breadcrumb/index.js";
 export * from "./Pagination/index.js";
 export * from "./Steps/index.js";
+export * from "./Link/index.js";
 
 // Form
 // --------------------------------------------------------
@@ -65,9 +65,12 @@ export * from "./FormControl/index.js";
 // --------------------------------------------------------
 export * from "./Toggle/index.js";
 export * from "./Input/index.js";
+export * from "./Textarea/index.js";
 export * from "./MaskedInput/index.js";
 export * from "./InputNumber/index.js";
 export * from "./InputGroup/index.js";
+export * from "./PasswordInput/index.js";
+export * from "./PasswordStrengthMeter/index.js";
 export * from "./Checkbox/index.js";
 export * from "./CheckboxGroup/index.js";
 export * from "./Radio/index.js";

package/esm/internals/Box/Box.d.ts

@@ -26,6 +26,10 @@ export interface BoxProps extends WithAsProps {
     /** Box size */
     w?: CSS['width'];
     h?: CSS['height'];
+    minw?: CSS['minWidth'];
+    maxw?: CSS['maxWidth'];
+    minh?: CSS['minHeight'];
+    maxh?: CSS['maxHeight'];
     /** Box Color */
     c?: ColorScheme | CSS['color'];
     /** Box Border */

package/esm/internals/Box/Box.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { mergeStyles } from "../utils/index.js";
-import { forwardRef } from "../utils/forwardRef.js";
+import { forwardRef } from "../utils/react/forwardRef.js";
 import { getBoxCSSVariables, extractBoxProps, omitBoxProps } from "./utils.js";
 /**
  * Box component is the base component for all components,

package/esm/internals/Box/utils.js

@@ -26,7 +26,11 @@ const marginStyleMap = {
 // Mapping for size properties to their CSS style equivalents
 const sizeStyleMap = {
   w: 'width',
-  h: 'height'
+  h: 'height',
+  minw: 'minWidth',
+  maxw: 'maxWidth',
+  minh: 'minHeight',
+  maxh: 'maxHeight'
 };
 
 // Derive box property keys from style mappings

package/esm/internals/InputBase/InputBase.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+import { PrependParameters } from '../types/utils';
+import type { PropsWithoutChange, FormControlBaseProps, Size } from '../types';
+export interface InputBaseLocaleType {
+    unfilled: string;
+}
+export interface InputBaseCommonProps extends BoxProps, PropsWithoutChange<FormControlBaseProps> {
+    /** A component can have different sizes */
+    size?: Size;
+    /** The HTML input id */
+    id?: string;
+    /** Ref of input element */
+    inputRef?: React.Ref<any>;
+    /** Is plaintext display mode */
+    plaintext?: boolean;
+    /** Input placeholder text */
+    placeholder?: string;
+}
+export interface InputBaseProps extends InputBaseCommonProps {
+    /** Component element type */
+    as?: React.ElementType;
+    /** Class prefix for component */
+    classPrefix?: string;
+    /** HTML input props */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Event handler for focus event */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Event handler for blur event */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Event handler for keydown event */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Input specific props like handling enter key for Input */
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** The callback function in which value is changed. */
+    onChange?: PrependParameters<React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>, [
+        value: string
+    ]>;
+}
+/**
+ * The `InputBase` component serves as the base for both Input and Textarea components.
+ * It provides common functionality for both components.
+ */
+declare const InputBase: import("../types").InternalRefForwardingComponent<"input" | "textarea", InputBaseProps, never> & Record<string, never>;
+export default InputBase;

package/esm/internals/InputBase/InputBase.js

@@ -0,0 +1,89 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import Plaintext from "../Plaintext/index.js";
+import Box from "../Box/index.js";
+import { forwardRef, mergeRefs, createChainedFunction } from "../utils/index.js";
+import { useFormGroup } from "../../FormGroup/index.js";
+import { InputGroupContext } from "../../InputGroup/InputGroup.js";
+import { KEY_VALUES } from "../constants/index.js";
+import { useStyles } from "../hooks/index.js";
+/**
+ * The `InputBase` component serves as the base for both Input and Textarea components.
+ * It provides common functionality for both components.
+ */
+const InputBase = forwardRef((props, ref) => {
+  const {
+    as,
+    className,
+    classPrefix,
+    disabled,
+    value,
+    defaultValue,
+    inputRef,
+    id,
+    size,
+    plaintext,
+    placeholder,
+    readOnly,
+    inputProps,
+    onPressEnter,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
+  const inputGroup = useContext(InputGroupContext);
+  const {
+    controlId
+  } = useFormGroup();
+  const handleKeyDown = event => {
+    if (event.key === KEY_VALUES.ENTER) {
+      onPressEnter === null || onPressEnter === void 0 || onPressEnter(event);
+    }
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+  };
+  const handleChange = event => {
+    var _event$target;
+    onChange === null || onChange === void 0 || onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
+  };
+  const {
+    withPrefix,
+    merge
+  } = useStyles(classPrefix || 'input');
+  const classes = merge(className, withPrefix(size, {
+    plaintext
+  }));
+
+  // Make the component display in plain text,
+  // and display default characters when there is no value.
+  if (plaintext) {
+    return /*#__PURE__*/React.createElement(Plaintext, {
+      ref: ref,
+      localeKey: "unfilled",
+      placeholder: placeholder
+    }, typeof value === 'undefined' ? defaultValue : value);
+  }
+  const inputable = !disabled && !readOnly;
+  const eventProps = {};
+  if (inputable) {
+    eventProps.onChange = handleChange;
+    eventProps.onKeyDown = handleKeyDown;
+    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(Box, _extends({
+    as: as,
+    ref: mergeRefs(ref, inputRef),
+    className: classes,
+    id: id || controlId,
+    value: value,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    readOnly: readOnly,
+    placeholder: placeholder
+  }, inputProps, eventProps, rest));
+});
+InputBase.displayName = 'InputBase';
+export default InputBase;

package/esm/internals/InputBase/index.d.ts

@@ -0,0 +1,3 @@
+import InputBase from './InputBase';
+export type { InputBaseProps, InputBaseCommonProps, InputBaseLocaleType } from './InputBase';
+export default InputBase;

package/esm/internals/InputBase/index.js

@@ -0,0 +1,3 @@
+'use client';
+import InputBase from "./InputBase.js";
+export default InputBase;

package/esm/internals/Overlay/Modal.d.ts

@@ -36,7 +36,7 @@ export interface BaseModalProps extends Omit<BoxProps, 'children'>, AnimationEve
     /** Called when Modal is displayed */
     onOpen?: () => void;
     /** Called when Modal is closed */
-    onClose?: (event: React.SyntheticEvent) => void;
+    onClose?: (event?: React.SyntheticEvent) => void;
     container?: HTMLElement | (() => HTMLElement);
     containerClassName?: string;
     backdropTransitionTimeout?: number;

package/esm/internals/Overlay/OverlayTrigger.d.ts

@@ -20,7 +20,7 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     containerPadding?: number;
     /** display element */
     speaker: React.ReactElement | ((props: PositionChildProps & Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'onMouseEnter' | 'onMouseLeave'> & {
-        onClose: (delay?: number) => NodeJS.Timeout | void;
+        onClose?: (delay?: number) => NodeJS.Timeout | void;
     }, ref: React.RefCallback<HTMLElement>) => React.ReactElement);
     /** Prevent floating element overflow */
     preventOverflow?: boolean;
@@ -42,6 +42,9 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     readOnly?: boolean;
     /**  Set the `id` on `<Overlay>` and `aria-describedby` on `<OverlayTrigger>` */
     controlId?: string;
+    /** Whether speaker to follow the cursor */
+    followCursor?: boolean;
+    overlayAs?: React.ElementType;
     /** Lose Focus callback function */
     onBlur?: React.FocusEventHandler;
     /** Click on the callback function */
@@ -60,8 +63,6 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     onOpen?: () => void;
     /** Callback fired when close component */
     onClose?: (cause?: OverlayCloseCause) => void;
-    /** Whether speaker to follow the cursor */
-    followCursor?: boolean;
 }
 /**
  * The reason that triggers closing of an overlay

package/esm/internals/Overlay/OverlayTrigger.js

@@ -9,7 +9,7 @@ import Overlay from "./Overlay.js";
 import { useOverlay } from "./OverlayProvider.js";
 import { usePortal, useControlled } from "../hooks/index.js";
 import { createChainedFunction, isOneOf } from "../utils/index.js";
-import { isFragment } from "../utils/ReactChildren.js";
+import { isFragment } from "../utils/index.js";
 function mergeEvents(events, props) {
   if (events === void 0) {
     events = {};
@@ -79,6 +79,7 @@ const OverlayTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     placement = 'bottomStart',
     speaker,
     rootClose = true,
+    overlayAs: OverlayComponent,
     onClick,
     onMouseOver,
     onMouseMove,
@@ -364,7 +365,12 @@ const OverlayTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
       ...mergeEvents(triggerEvents, childElement.props)
     });
   }, [children, controlId, triggerEvents]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement, /*#__PURE__*/React.createElement(Portal, null, renderOverlay()));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement, OverlayComponent ? /*#__PURE__*/React.createElement(OverlayComponent, {
+    open: open,
+    onClose: handleClose,
+    placement: "bottom",
+    speaker: speaker
+  }) : /*#__PURE__*/React.createElement(Portal, null, renderOverlay()));
 });
 OverlayTrigger.displayName = 'OverlayTrigger';
 export default OverlayTrigger;

package/esm/internals/Picker/Listbox.js

@@ -17,7 +17,7 @@ import Highlight from "../../Highlight/index.js";
 import { List, AutoSizer, VariableSizeList } from "../Windowing/index.js";
 import { RSUITE_PICKER_GROUP_KEY } from "../symbols.js";
 import { useStyles, useMount, useEventCallback } from "../hooks/index.js";
-import { shallowEqual, mergeRefs } from "../utils/index.js";
+import { shallowEqual, mergeRefs, mergeStyles, getCssValue } from "../utils/index.js";
 import { KEY_GROUP_TITLE } from "../utils/getDataGroupBy.js";
 
 /**
@@ -57,13 +57,12 @@ const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withPrefix,
     prefix,
     merge,
     rootPrefix
   } = useStyles(classPrefix);
   const groupable = typeof groupBy !== 'undefined';
-  const classes = merge(className, withPrefix('items', {
+  const classes = merge(className, rootPrefix('picker-listbox'), prefix('items', {
     grouped: groupable
   }));
   const {
@@ -185,19 +184,18 @@ const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     const itemIndex = findIndex(filteredItems, item => item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]));
     (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 || _listRef$current$scro.call(_listRef$current, itemIndex);
   });
+  const styles = mergeStyles(style, {
+    '--rs-picker-listbox-max-height': getCssValue(maxHeight)
+  });
   return /*#__PURE__*/React.createElement("div", _extends({
     role: "listbox",
     id: `${id}-${popupType}`,
     "aria-labelledby": labelId,
-    "aria-multiselectable": multiple
-  }, rest, {
+    "aria-multiselectable": multiple,
     className: classes,
     ref: mergeRefs(menuBodyContainerRef, ref),
-    style: {
-      ...style,
-      maxHeight
-    }
-  }), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
+    style: styles
+  }, rest), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
     defaultHeight: maxHeight,
     style: {
       width: 'auto',

package/esm/internals/Picker/PickerDrawer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DrawerProps } from '../../Drawer';
+import type { OverlayTriggerProps } from '../Overlay/OverlayTrigger';
+export interface PickerDrawerProps extends DrawerProps {
+    speaker: OverlayTriggerProps['speaker'];
+}
+export declare const PickerDrawer: React.ForwardRefExoticComponent<PickerDrawerProps & React.RefAttributes<any>>;
+export default PickerDrawer;

package/esm/internals/Picker/PickerDrawer.js

@@ -0,0 +1,26 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Drawer from "../../Drawer/index.js";
+const speakerRef = () => {
+  // This is just a no-op callback to satisfy the type requirements
+};
+export const PickerDrawer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    placement = 'bottom',
+    speaker,
+    onClose,
+    open,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Drawer, _extends({
+    placement: placement,
+    onClose: onClose,
+    open: open,
+    ref: ref
+  }, rest), typeof speaker === 'function' ? speaker({
+    placement
+  }, speakerRef) : speaker);
+});
+PickerDrawer.displayName = 'PickerDrawer';
+export default PickerDrawer;

package/esm/internals/Picker/PickerPopup.js

@@ -11,7 +11,8 @@ import { useCombobox } from "./index.js";
 const resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];
 const PickerPopup = forwardRef((props, ref) => {
   const {
-    placement
+    placement,
+    breakpoint
   } = useCombobox();
   const {
     as: Component = 'div',
@@ -38,7 +39,7 @@ const PickerPopup = forwardRef((props, ref) => {
       // Get the width of the button and set it to the menu to make them consistent
       const width = getWidth(getDOMNode(toggle.root));
       if (overlayRef.current) {
-        addStyle(overlayRef.current, 'min-width', `${width}px`);
+        addStyle(overlayRef.current, '--rs-picker-min-width', `${width}px`);
       }
     }
   }, [autoWidth, target, overlayRef]);
@@ -50,7 +51,8 @@ const PickerPopup = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Component, _extends({
     "data-testid": "picker-popup",
     ref: mergeRefs(overlayRef, ref),
-    className: classes
+    className: classes,
+    "data-breakpoint": breakpoint
   }, rest));
 });
 PickerPopup.displayName = 'PickerPopup';

package/esm/internals/Picker/PickerToggle.d.ts

@@ -6,6 +6,7 @@ export interface PickerToggleProps<T = OptionValue> extends ToggleButtonProps {
     active?: boolean;
     hasValue?: boolean;
     cleanable?: boolean;
+    countable?: boolean;
     caret?: boolean;
     /**
      * Custom caret component

package/esm/internals/Picker/PickerToggle.js

@@ -1,5 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _omit from "lodash/omit";
 import React, { useRef, useMemo } from 'react';
 import ToggleButton from "./ToggleButton.js";
 import PickerIndicator from "./PickerIndicator.js";
@@ -9,6 +10,7 @@ import Stack from "../../Stack/index.js";
 import useCombobox from "./hooks/useCombobox.js";
 import { useStyles, useEventCallback, useToggleCaret } from "../hooks/index.js";
 import { forwardRef, mergeRefs } from "../utils/index.js";
+import { triggerPropKeys } from "./PickerToggleTrigger.js";
 const PickerToggle = forwardRef((props, ref) => {
   const {
     active,
@@ -23,6 +25,7 @@ const PickerToggle = forwardRef((props, ref) => {
     hasValue,
     loading = false,
     cleanable,
+    countable,
     tabIndex = 0,
     inputValue: inputValueProp,
     focusItemValue,
@@ -82,13 +85,17 @@ const PickerToggle = forwardRef((props, ref) => {
     "aria-controls": id ? `${id}-${popupType}` : undefined,
     "aria-labelledby": labelId,
     "aria-describedby": id ? `${id}-describe` : undefined,
-    "aria-activedescendant": active && focusItemValue ? `${id}-opt-${focusItemValue}` : undefined
-  }, rest, {
+    "aria-activedescendant": active && focusItemValue ? `${id}-opt-${focusItemValue}` : undefined,
+    "data-has-value": hasValue,
+    "data-cleanable": cleanable,
+    "data-countable": countable,
+    "data-size": size,
+    "data-readonly": readOnly,
     ref: mergeRefs(combobox, ref),
     disabled: disabled,
     tabIndex: disabled ? undefined : tabIndex,
     className: classes
-  }), /*#__PURE__*/React.createElement(Stack, {
+  }, _omit(rest, triggerPropKeys)), /*#__PURE__*/React.createElement(Stack, {
     className: prefix('stack')
   }, label && /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(PickerLabel, {
     as: "span",

package/esm/internals/Picker/PickerToggleTrigger.d.ts

@@ -1,30 +1,70 @@
 import React from 'react';
 import { OverlayTriggerProps, OverlayTriggerType } from '../Overlay/OverlayTrigger';
-import type { Placement, AnimationEventProps } from '../types';
-export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker' | 'onOpen' | 'onClose'> {
+import type { Placement, Size, AnimationEventProps } from '../types';
+export interface PickerToggleTriggerProps
+/**
+ * Interface representing the properties for the PickerToggleTrigger component.
+ * Extends AnimationEventProps and OverlayTriggerProps with specific pick/omit logic.
+ */
+ extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'onClose' | 'onOpen' | 'speaker'> {
+    /** Appearance style for the component, default or subtle */
+    appearance?: 'default' | 'subtle';
+    /** Element type to render as */
+    as?: React.ElementType;
+    /** If true, the component will occupy the full width of its container */
+    block?: boolean;
+    /** The child element to be rendered */
+    children: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom class prefix */
+    classPrefix?: string;
+    /** Disable the component */
+    disabled?: boolean;
+    /** Unique identifier */
     id?: string;
+    /** If true, multiple selection is allowed */
+    multiple?: boolean;
+    /** Name attribute for the component */
+    name?: string;
+    /** Controls the open state of the picker */
+    open?: boolean;
+    /** Additional properties for the picker */
+    triggerProps: any;
+    /** Placement of the component */
+    placement?: Placement;
     /**
-     * Identifies the combobox has having a popout, and indicates the type.
+     * Identifies the combobox as having a popout, and indicates the type.
      *
      * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
      */
     popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
-    multiple?: boolean;
-    placement?: Placement;
-    pickerProps: any;
-    open?: boolean;
+    /** Reference to the root element */
+    rootRef?: React.Ref<any>;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Trigger type for the overlay */
     trigger?: OverlayTriggerType | OverlayTriggerType[];
-    children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
+    /** Size of the component */
+    size?: Size;
+    /** Whether the component should be responsive */
+    responsive?: boolean;
+    /** Handler for keydown events */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    /** Handler for click events */
+    onClick?: (event: React.MouseEvent) => void;
 }
-export declare const omitTriggerPropKeys: string[];
-export declare const pickTriggerPropKeys: string[];
+export declare const overlayPropKeys: string[];
+export declare const pickerCommonPropKeys: string[];
+export declare const triggerPropKeys: string[];
 export interface ComboboxContextProps {
     id?: string;
     multiple?: boolean;
     hasLabel?: boolean;
     placement?: Placement;
+    breakpoint?: string;
     popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
 }
 export declare const ComboboxContext: React.Context<ComboboxContextProps>;
-declare const PickerToggleTrigger: React.ForwardRefExoticComponent<PickerToggleTriggerProps & React.RefAttributes<any>>;
+export declare const PickerToggleTrigger: React.ForwardRefExoticComponent<PickerToggleTriggerProps & React.RefAttributes<any>>;
 export default PickerToggleTrigger;

package/esm/internals/Picker/PickerToggleTrigger.js

@@ -2,42 +2,89 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
+import omit from 'lodash/omit';
+import Box from "../Box/index.js";
+import PickerDrawer from "./PickerDrawer.js";
 import OverlayTrigger from "../Overlay/OverlayTrigger.js";
 import { useUniqueId } from "../hooks/index.js";
-export const omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
-export const pickTriggerPropKeys = [...omitTriggerPropKeys, 'disabled', 'plaintext', 'readOnly', 'loading', 'label'];
+import { useStyles } from "../hooks/index.js";
+import { useBreakpointValue } from "../../useBreakpointValue/index.js";
+export const overlayPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
+export const pickerCommonPropKeys = ['disabled', 'plaintext', 'readOnly', 'loading', 'label'];
+export const triggerPropKeys = [...overlayPropKeys, ...pickerCommonPropKeys];
 export const ComboboxContext = /*#__PURE__*/React.createContext({
   popupType: 'listbox'
 });
-const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    pickerProps,
-    speaker,
-    placement,
-    trigger = 'click',
+    appearance,
+    as,
+    block,
+    children,
+    className,
+    classPrefix = 'picker',
+    disabled,
     id,
     multiple,
+    name,
+    triggerProps,
+    placement,
     popupType = 'listbox',
+    rootRef,
+    speaker,
+    style,
+    size,
+    trigger = 'click',
+    responsive = true,
+    onKeyDown,
+    onClick,
     ...rest
   } = props;
-  const pickerTriggerProps = pick(pickerProps, pickTriggerPropKeys);
+  const pickerTriggerProps = pick(triggerProps, triggerPropKeys);
   const pickerId = useUniqueId('rs-', id);
+  const breakpoint = useBreakpointValue({
+    xsOnly: 'xs'
+  }, {
+    enabled: responsive
+  });
+  // Only use the breakpoint value if not disabled
+  const effectiveBreakpoint = disabled ? undefined : breakpoint;
   const comboboxContext = useMemo(() => ({
     id: pickerId,
     hasLabel: typeof pickerTriggerProps.label !== 'undefined',
     multiple,
     placement,
+    breakpoint: effectiveBreakpoint,
     popupType
-  }), [pickerId, multiple, placement, popupType]);
+  }), [pickerId, multiple, placement, effectiveBreakpoint, popupType]);
+  const {
+    withPrefix,
+    merge
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
     value: comboboxContext
-  }, /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, rest, {
+  }, /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
     placement: placement,
-    speaker: speaker
-  })));
+    speaker: speaker,
+    overlayAs: effectiveBreakpoint === 'xs' ? PickerDrawer : undefined
+  }), /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    className: classes,
+    style: style,
+    ref: rootRef,
+    "data-picker": name,
+    "data-variant": appearance,
+    "data-size": size,
+    "data-disabled": disabled || undefined,
+    "data-block": block || undefined,
+    "data-testid": "picker",
+    onKeyDown: onKeyDown,
+    onClick: onClick
+  }, omit(rest, [...triggerPropKeys])), children)));
 });
 PickerToggleTrigger.displayName = 'PickerToggleTrigger';
 export default PickerToggleTrigger;