rsuite 5.76.2 → 6.0.0-canary-20250103

package/cjs/AvatarGroup/AvatarGroup.js

@@ -5,50 +5,47 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = exports.AvatarGroupContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _propTypes2 = require("../internals/propTypes");
+var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
-var _excluded = ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var AvatarGroupContext = exports.AvatarGroupContext = /*#__PURE__*/_react.default.createContext({});
+const AvatarGroupContext = exports.AvatarGroupContext = /*#__PURE__*/_react.default.createContext({});
 
 /**
  * The AvatarGroup component is used to represent a collection of avatars.
  * @see https://rsuitejs.com/components/avatar
  */
-var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('AvatarGroup', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'avatar-group' : _propsWithDefaults$cl,
-    spacing = propsWithDefaults.spacing,
-    className = propsWithDefaults.className,
-    children = propsWithDefaults.children,
-    stack = propsWithDefaults.stack,
-    size = propsWithDefaults.size,
-    style = propsWithDefaults.style,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix({
-    stack: stack
+const AvatarGroup = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('AvatarGroup', props);
+  const {
+    as: Component = 'div',
+    classPrefix = 'avatar-group',
+    spacing,
+    className,
+    children,
+    stack,
+    size,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    merge
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    stack
   }));
-  var contextValue = (0, _react.useMemo)(function () {
-    return {
-      size: size
-    };
-  }, [size]);
-  var styles = (0, _utils.isIE)() ? style : (0, _extends2.default)({}, style, {
-    gap: spacing
-  });
+  const contextValue = (0, _react.useMemo)(() => ({
+    size
+  }), [size]);
+  const styles = {
+    '--rs-avatar-group-gap': (0, _utils.getCssValue)(spacing),
+    ...style
+  };
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "group"
   }, rest, {
@@ -60,13 +57,4 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, children));
 });
 AvatarGroup.displayName = 'AvatarGroup';
-AvatarGroup.propTypes = {
-  as: _propTypes.default.elementType,
-  classPrefix: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  stack: _propTypes.default.bool,
-  spacing: _propTypes.default.number,
-  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs'])
-};
 var _default = exports.default = AvatarGroup;

package/cjs/Badge/Badge.d.ts

@@ -1,12 +1,47 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
+import { Color, WithAsProps, PlacementCorners, RsRefForwardingComponent } from '../internals/types';
 export interface BadgeProps extends WithAsProps {
-    /** Main content */
+    /**
+     * The content of the badge
+     */
     content?: React.ReactNode;
-    /** Max count */
+    /**
+     * The maximum value of the badge
+     */
     maxCount?: number;
-    /** A badge can have different colors */
-    color?: TypeAttributes.Color;
+    /**
+     * A badge can have different colors
+     */
+    color?: Color | React.CSSProperties['color'];
+    /**
+     * The badge will have an outline
+     * @version 6.0.0
+     */
+    outline?: boolean;
+    /**
+     * The placement of the badge
+     * @version 6.0.0
+     */
+    placement?: PlacementCorners;
+    /**
+     * If true, the Badge will have no padding, making it appear more compact and rounded.
+     */
+    compact?: boolean;
+    /**
+     * The shape of the wrapped element
+     * @version 6.0.0
+     */
+    shape?: 'rectangle' | 'circle';
+    /**
+     * Define the horizontal and vertical offset of the badge relative to its wrapped element
+     * @version 6.0.0
+     */
+    offset?: [number | string, number | string];
+    /**
+     * The badge will be hidden
+     * @version 6.0.0
+     */
+    invisible?: boolean;
 }
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.

package/cjs/Badge/Badge.js

@@ -5,68 +5,67 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _hooks = require("../internals/hooks");
-var _propTypes2 = require("../internals/propTypes");
+var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
-var _excluded = ["as", "content", "color", "className", "classPrefix", "children", "maxCount"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.
  * @see https://rsuitejs.com/components/badge
  */
-var Badge = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('Badge', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    contentText = propsWithDefaults.content,
-    color = propsWithDefaults.color,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'badge' : _propsWithDefaults$cl,
-    children = propsWithDefaults.children,
-    _propsWithDefaults$ma = propsWithDefaults.maxCount,
-    maxCount = _propsWithDefaults$ma === void 0 ? 99 : _propsWithDefaults$ma,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var dot = contentText === undefined || contentText === null;
-  var classes = merge(className, withClassPrefix(color, {
-    independent: !children,
+const Badge = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Badge', props);
+  const {
+    as: Component = 'div',
+    content,
+    color,
+    className,
+    classPrefix = 'badge',
+    children,
+    compact,
+    maxCount = 99,
+    offset,
+    outline = true,
+    placement = 'topEnd',
+    shape,
+    style,
+    invisible,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    prefix,
+    merge
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const text = typeof content === 'number' && content > maxCount ? `${maxCount}+` : content;
+  const classes = merge(className, withClassPrefix((0, _utils.isPresetColor)(color) && color, shape, {
+    compact,
+    outline,
+    hidden: invisible,
     wrapper: children,
-    dot: dot
+    independent: !children,
+    [(0, _kebabCase.default)(placement)]: children
   }));
-  if (contentText === false) {
-    return /*#__PURE__*/_react.default.cloneElement(children, {
-      ref: ref
-    });
-  }
-  var content = typeof contentText === 'number' && contentText > maxCount ? maxCount + "+" : contentText;
+  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createOffsetStyles)(offset, '--rs-badge-offset'), (0, _utils.createColorVariables)(color, '--rs-badge-bg')), [style, offset, color]);
   if (!children) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref,
-      className: classes
-    }), content);
+      className: classes,
+      style: styles
+    }, rest), text);
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
-    className: classes
-  }), children, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
+    style: styles
+  }, rest), children, /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('content')
-  }, content));
+  }, text));
 });
 Badge.displayName = 'Badge';
-Badge.propTypes = {
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  children: _propTypes.default.node,
-  as: _propTypes.default.elementType,
-  content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.bool]),
-  maxCount: _propTypes.default.number,
-  color: (0, _propTypes2.oneOf)(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'])
-};
 var _default = exports.default = Badge;

package/cjs/Breadcrumb/Breadcrumb.js

@@ -5,17 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
 var _CustomProvider = require("../CustomProvider");
-var _excluded = ["as", "className", "classPrefix", "children", "ellipsis", "maxItems", "separator", "locale", "onExpand"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var Separator = (0, _utils.createComponent)({
+const Separator = (0, _utils.createComponent)({
   name: 'BreadcrumbSeparator',
   componentAs: 'span',
   'aria-hidden': true
@@ -25,44 +22,42 @@ var Separator = (0, _utils.createComponent)({
  * The Breadcrumb component is used to indicate the current page location and navigate.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('Breadcrumb', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'nav' : _propsWithDefaults$as,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'breadcrumb' : _propsWithDefaults$cl,
-    children = propsWithDefaults.children,
-    _propsWithDefaults$el = propsWithDefaults.ellipsis,
-    ellipsis = _propsWithDefaults$el === void 0 ? '...' : _propsWithDefaults$el,
-    _propsWithDefaults$ma = propsWithDefaults.maxItems,
-    maxItems = _propsWithDefaults$ma === void 0 ? 5 : _propsWithDefaults$ma,
-    _propsWithDefaults$se = propsWithDefaults.separator,
-    separator = _propsWithDefaults$se === void 0 ? '/' : _propsWithDefaults$se,
-    locale = propsWithDefaults.locale,
-    onExpand = propsWithDefaults.onExpand,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var _useState = (0, _react.useState)(true),
-    showEllipsis = _useState[0],
-    setShowEllipsis = _useState[1];
-  var handleClickEllipsis = (0, _hooks.useEventCallback)(function (event) {
+const Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function Breadcrumb(props, ref) {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Breadcrumb', props);
+  const {
+    as: Component = 'nav',
+    className,
+    classPrefix = 'breadcrumb',
+    children,
+    ellipsis = '...',
+    maxItems = 5,
+    separator = '/',
+    locale,
+    onExpand,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    withClassPrefix
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const [showEllipsis, setShowEllipsis] = (0, _react.useState)(true);
+  const handleClickEllipsis = (0, _hooks.useEventCallback)(event => {
     setShowEllipsis(false);
     onExpand === null || onExpand === void 0 || onExpand(event);
   });
-  var content = (0, _react.useMemo)(function () {
-    var count = _utils.ReactChildren.count(children);
-    var items = _utils.ReactChildren.mapCloneElement(children, function (item, index) {
-      var isLast = index === count - 1;
-      return (0, _extends2.default)({}, item.props, {
+  const content = (0, _react.useMemo)(() => {
+    const count = _utils.ReactChildren.count(children);
+    const items = _utils.ReactChildren.mapCloneElement(children, (item, index) => {
+      const isLast = index === count - 1;
+      return {
+        ...item.props,
         separator: isLast ? null : /*#__PURE__*/_react.default.createElement(Separator, null, separator)
-      });
+      };
     });
     if (count > maxItems && count > 2 && showEllipsis) {
-      return [].concat(items.slice(0, 1), [[/*#__PURE__*/_react.default.createElement(_BreadcrumbItem.default, {
+      return [...items.slice(0, 1), [/*#__PURE__*/_react.default.createElement(_BreadcrumbItem.default, {
         role: "button",
         key: "ellipsis",
         title: locale === null || locale === void 0 ? void 0 : locale.expandText,
@@ -71,11 +66,11 @@ var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         onClick: handleClickEllipsis
       }, /*#__PURE__*/_react.default.createElement("span", {
         "aria-hidden": true
-      }, ellipsis))]], items.slice(items.length - 1, items.length));
+      }, ellipsis))], ...items.slice(items.length - 1, items.length)];
     }
     return items;
   }, [children, ellipsis, handleClickEllipsis, locale === null || locale === void 0 ? void 0 : locale.expandText, maxItems, separator, showEllipsis]);
-  var classes = merge(className, withClassPrefix());
+  const classes = merge(className, withClassPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
@@ -83,14 +78,4 @@ var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 Breadcrumb.Item = _BreadcrumbItem.default;
 Breadcrumb.displayName = 'Breadcrumb';
-Breadcrumb.propTypes = {
-  as: _propTypes.default.elementType,
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  ellipsis: _propTypes.default.node,
-  separator: _propTypes.default.node,
-  maxItems: _propTypes.default.number,
-  onExpand: _propTypes.default.func
-};
 var _default = exports.default = Breadcrumb;

package/cjs/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export interface BreadcrumbItemProps extends WithAsProps<React.ElementType | string> {
+export interface BreadcrumbItemProps extends WithAsProps {
     /**
      * The wrapper element of the BreadcrumbItem.
      */

package/cjs/Breadcrumb/BreadcrumbItem.js

@@ -5,37 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 var _hooks = require("../internals/hooks");
-var _excluded = ["wrapperAs", "href", "as", "classPrefix", "title", "target", "className", "style", "active", "children", "separator"];
 /**
  * The `<Breadcrumb.Item>` component is used to specify each section of the Breadcrumb.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-var BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$wrapperAs = props.wrapperAs,
-    WrapperComponent = _props$wrapperAs === void 0 ? 'li' : _props$wrapperAs,
-    href = props.href,
-    _props$as = props.as,
-    Component = _props$as === void 0 ? href ? _SafeAnchor.default : 'span' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'breadcrumb-item' : _props$classPrefix,
-    title = props.title,
-    target = props.target,
-    className = props.className,
-    style = props.style,
-    active = props.active,
-    children = props.children,
-    separator = props.separator,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var classes = merge(className, withClassPrefix({
-    active: active
+const BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    wrapperAs: WrapperComponent = 'li',
+    href,
+    as: Component = href ? _SafeAnchor.default : 'span',
+    classPrefix = 'breadcrumb-item',
+    title,
+    target,
+    className,
+    style,
+    active,
+    children,
+    separator,
+    ...rest
+  } = props;
+  const {
+    merge,
+    withClassPrefix
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    active
   }));
   return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({
     style: style,
@@ -48,14 +45,4 @@ var BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }, children), separator);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
-BreadcrumbItem.propTypes = {
-  active: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  href: _propTypes.default.string,
-  title: _propTypes.default.string,
-  target: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  as: _propTypes.default.elementType
-};
 var _default = exports.default = BreadcrumbItem;

package/cjs/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export interface ButtonProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+export interface ButtonProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
     /** A button can have different appearances. */
     appearance?: TypeAttributes.Appearance;
     /** A button can show it is currently the active user selection */
@@ -27,6 +27,10 @@ export interface ButtonProps extends WithAsProps, React.HTMLAttributes<HTMLEleme
     endIcon?: React.ReactNode;
     /** Defines HTML button type attribute */
     type?: 'button' | 'reset' | 'submit';
+    /** A button can toggle its state between active and inactive. */
+    toggleable?: boolean;
+    /** Called when the button is clicked */
+    onToggle?: (active: boolean, event: React.MouseEvent) => void;
 }
 /**
  * The Button component is used to trigger a custom action.