rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/AvatarGroup/AvatarGroup.js

@@ -1,47 +1,44 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"];
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { getCssValue } from "../internals/utils/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
-import { isIE } from "../internals/utils/index.js";
-import { oneOf } from "../internals/propTypes/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-export var AvatarGroupContext = /*#__PURE__*/React.createContext({});
+export const AvatarGroupContext = /*#__PURE__*/React.createContext({});
 
 /**
  * The AvatarGroup component is used to represent a collection of avatars.
  * @see https://rsuitejs.com/components/avatar
  */
-var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = 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 = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix({
-    stack: stack
+const AvatarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('AvatarGroup', props);
+  const {
+    as: Component = 'div',
+    classPrefix = 'avatar-group',
+    spacing,
+    className,
+    children,
+    stack,
+    size,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    merge
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    stack
   }));
-  var contextValue = useMemo(function () {
-    return {
-      size: size
-    };
-  }, [size]);
-  var styles = isIE() ? style : _extends({}, style, {
-    gap: spacing
-  });
+  const contextValue = useMemo(() => ({
+    size
+  }), [size]);
+  const styles = {
+    '--rs-avatar-group-gap': getCssValue(spacing),
+    ...style
+  };
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "group"
   }, rest, {
@@ -53,13 +50,4 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, children));
 });
 AvatarGroup.displayName = 'AvatarGroup';
-AvatarGroup.propTypes = {
-  as: PropTypes.elementType,
-  classPrefix: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  stack: PropTypes.bool,
-  spacing: PropTypes.number,
-  size: oneOf(['lg', 'md', 'sm', 'xs'])
-};
 export default AvatarGroup;

package/esm/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/esm/Badge/Badge.js

@@ -1,67 +1,64 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "content", "color", "className", "classPrefix", "children", "maxCount"];
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import kebabCase from 'lodash/kebabCase';
 import { useClassNames } from "../internals/hooks/index.js";
-import { oneOf } from "../internals/propTypes/index.js";
+import { mergeStyles, createOffsetStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * 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.forwardRef(function (props, ref) {
-  var _useCustom = 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 = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useClassNames = 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.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = 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
+  } = useClassNames(classPrefix);
+  const text = typeof content === 'number' && content > maxCount ? `${maxCount}+` : content;
+  const classes = merge(className, withClassPrefix(isPresetColor(color) && color, shape, {
+    compact,
+    outline,
+    hidden: invisible,
     wrapper: children,
-    dot: dot
+    independent: !children,
+    [kebabCase(placement)]: children
   }));
-  if (contentText === false) {
-    return /*#__PURE__*/React.cloneElement(children, {
-      ref: ref
-    });
-  }
-  var content = typeof contentText === 'number' && contentText > maxCount ? maxCount + "+" : contentText;
+  const styles = useMemo(() => mergeStyles(style, createOffsetStyles(offset, '--rs-badge-offset'), createColorVariables(color, '--rs-badge-bg')), [style, offset, color]);
   if (!children) {
-    return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(Component, _extends({
       ref: ref,
-      className: classes
-    }), content);
+      className: classes,
+      style: styles
+    }, rest), text);
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
-    className: classes
-  }), children, /*#__PURE__*/React.createElement("div", {
+    className: classes,
+    style: styles
+  }, rest), children, /*#__PURE__*/React.createElement("div", {
     className: prefix('content')
-  }, content));
+  }, text));
 });
 Badge.displayName = 'Badge';
-Badge.propTypes = {
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  children: PropTypes.node,
-  as: PropTypes.elementType,
-  content: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
-  maxCount: PropTypes.number,
-  color: oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'])
-};
 export default Badge;

package/esm/Breadcrumb/Breadcrumb.js

@@ -1,14 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "classPrefix", "children", "ellipsis", "maxItems", "separator", "locale", "onExpand"];
 import React, { useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
 import { ReactChildren, createComponent } from "../internals/utils/index.js";
 import BreadcrumbItem from "./BreadcrumbItem.js";
 import { useCustom } from "../CustomProvider/index.js";
-var Separator = createComponent({
+const Separator = createComponent({
   name: 'BreadcrumbSeparator',
   componentAs: 'span',
   'aria-hidden': true
@@ -18,44 +15,42 @@ var Separator = createComponent({
  * The Breadcrumb component is used to indicate the current page location and navigate.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = 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 = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var _useState = useState(true),
-    showEllipsis = _useState[0],
-    setShowEllipsis = _useState[1];
-  var handleClickEllipsis = useEventCallback(function (event) {
+const Breadcrumb = /*#__PURE__*/React.forwardRef(function Breadcrumb(props, ref) {
+  const {
+    propsWithDefaults
+  } = useCustom('Breadcrumb', props);
+  const {
+    as: Component = 'nav',
+    className,
+    classPrefix = 'breadcrumb',
+    children,
+    ellipsis = '...',
+    maxItems = 5,
+    separator = '/',
+    locale,
+    onExpand,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    withClassPrefix
+  } = useClassNames(classPrefix);
+  const [showEllipsis, setShowEllipsis] = useState(true);
+  const handleClickEllipsis = useEventCallback(event => {
     setShowEllipsis(false);
     onExpand === null || onExpand === void 0 || onExpand(event);
   });
-  var content = useMemo(function () {
-    var count = ReactChildren.count(children);
-    var items = ReactChildren.mapCloneElement(children, function (item, index) {
-      var isLast = index === count - 1;
-      return _extends({}, item.props, {
+  const content = useMemo(() => {
+    const count = ReactChildren.count(children);
+    const items = ReactChildren.mapCloneElement(children, (item, index) => {
+      const isLast = index === count - 1;
+      return {
+        ...item.props,
         separator: isLast ? null : /*#__PURE__*/React.createElement(Separator, null, separator)
-      });
+      };
     });
     if (count > maxItems && count > 2 && showEllipsis) {
-      return [].concat(items.slice(0, 1), [[/*#__PURE__*/React.createElement(BreadcrumbItem, {
+      return [...items.slice(0, 1), [/*#__PURE__*/React.createElement(BreadcrumbItem, {
         role: "button",
         key: "ellipsis",
         title: locale === null || locale === void 0 ? void 0 : locale.expandText,
@@ -64,11 +59,11 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onClick: handleClickEllipsis
       }, /*#__PURE__*/React.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.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
@@ -76,14 +71,4 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Breadcrumb.Item = BreadcrumbItem;
 Breadcrumb.displayName = 'Breadcrumb';
-Breadcrumb.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  ellipsis: PropTypes.node,
-  separator: PropTypes.node,
-  maxItems: PropTypes.number,
-  onExpand: PropTypes.func
-};
 export default Breadcrumb;

package/esm/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/esm/Breadcrumb/BreadcrumbItem.js

@@ -1,36 +1,33 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["wrapperAs", "href", "as", "classPrefix", "title", "target", "className", "style", "active", "children", "separator"];
 import React from 'react';
-import PropTypes from 'prop-types';
 import SafeAnchor from "../SafeAnchor/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 /**
  * The `<Breadcrumb.Item>` component is used to specify each section of the Breadcrumb.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-var BreadcrumbItem = /*#__PURE__*/React.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 : '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 = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var classes = merge(className, withClassPrefix({
-    active: active
+const BreadcrumbItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    wrapperAs: WrapperComponent = 'li',
+    href,
+    as: Component = href ? SafeAnchor : 'span',
+    classPrefix = 'breadcrumb-item',
+    title,
+    target,
+    className,
+    style,
+    active,
+    children,
+    separator,
+    ...rest
+  } = props;
+  const {
+    merge,
+    withClassPrefix
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    active
   }));
   return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
     style: style,
@@ -43,14 +40,4 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, children), separator);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
-BreadcrumbItem.propTypes = {
-  active: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  href: PropTypes.string,
-  title: PropTypes.string,
-  target: PropTypes.string,
-  classPrefix: PropTypes.string,
-  as: PropTypes.elementType
-};
 export default BreadcrumbItem;

package/esm/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.

package/esm/Button/Button.js

@@ -1,101 +1,96 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["as", "active", "appearance", "block", "className", "children", "classPrefix", "color", "disabled", "loading", "ripple", "size", "startIcon", "endIcon", "type"];
 import React, { useContext, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
-import { oneOf } from "../internals/propTypes/index.js";
 import { ButtonGroupContext } from "../ButtonGroup/index.js";
 import { isOneOf } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Button component is used to trigger a custom action.
  * @see https://rsuitejs.com/components/button
  */
-var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('Button', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var as = propsWithDefaults.as,
-    active = propsWithDefaults.active,
-    _propsWithDefaults$ap = propsWithDefaults.appearance,
-    appearance = _propsWithDefaults$ap === void 0 ? 'default' : _propsWithDefaults$ap,
-    block = propsWithDefaults.block,
-    className = propsWithDefaults.className,
-    children = propsWithDefaults.children,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'btn' : _propsWithDefaults$cl,
-    color = propsWithDefaults.color,
-    disabled = propsWithDefaults.disabled,
-    loading = propsWithDefaults.loading,
-    _propsWithDefaults$ri = propsWithDefaults.ripple,
-    ripple = _propsWithDefaults$ri === void 0 ? true : _propsWithDefaults$ri,
-    sizeProp = propsWithDefaults.size,
-    startIcon = propsWithDefaults.startIcon,
-    endIcon = propsWithDefaults.endIcon,
-    typeProp = propsWithDefaults.type,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var buttonGroup = useContext(ButtonGroupContext);
-  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix(appearance, color, size, {
-    active: active,
-    disabled: disabled,
-    loading: loading,
-    block: block
+const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Button', props);
+  const {
+    as,
+    active: activeProp,
+    appearance = 'default',
+    block,
+    className,
+    children,
+    classPrefix = 'btn',
+    color,
+    disabled,
+    loading,
+    ripple = true,
+    size: sizeProp,
+    startIcon,
+    endIcon,
+    type: typeProp,
+    toggleable,
+    onToggle,
+    onClick,
+    ...rest
+  } = propsWithDefaults;
+  const [active, setActive] = useControlled(activeProp, false);
+  const buttonGroup = useContext(ButtonGroupContext);
+  const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;
+  const {
+    withClassPrefix,
+    prefix,
+    merge
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix(appearance, color, size, {
+    active,
+    disabled,
+    loading,
+    block
   }));
-  var buttonContent = useMemo(function () {
-    var spin = /*#__PURE__*/React.createElement("span", {
-      className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["spin"])))
+  const buttonContent = useMemo(() => {
+    const spin = /*#__PURE__*/React.createElement("span", {
+      className: prefix`spin`
     });
-    var rippleElement = ripple && !isOneOf(appearance, ['link', 'ghost']) ? /*#__PURE__*/React.createElement(Ripple, null) : null;
+    const rippleElement = ripple && !isOneOf(appearance, ['link', 'ghost']) ? /*#__PURE__*/React.createElement(Ripple, null) : null;
     return /*#__PURE__*/React.createElement(React.Fragment, null, loading && spin, startIcon ? /*#__PURE__*/React.createElement("span", {
-      className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["start-icon"])))
+      className: prefix`start-icon`
     }, startIcon) : null, children, endIcon ? /*#__PURE__*/React.createElement("span", {
-      className: prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["end-icon"])))
+      className: prefix`end-icon`
     }, endIcon) : null, rippleElement);
   }, [appearance, children, endIcon, loading, prefix, ripple, startIcon]);
+  const handleClick = useEventCallback(event => {
+    if (toggleable) {
+      const nextActive = !active;
+      setActive(nextActive);
+      onToggle === null || onToggle === void 0 || onToggle(nextActive, event);
+    }
+    onClick === null || onClick === void 0 || onClick(event);
+  });
   if (rest.href) {
     return /*#__PURE__*/React.createElement(SafeAnchor, _extends({}, rest, {
       as: as,
       ref: ref,
       "aria-disabled": disabled,
       disabled: disabled,
-      className: classes
+      className: classes,
+      onClick: handleClick
     }), buttonContent);
   }
-  var Component = as || 'button';
-  var type = typeProp || (Component === 'button' ? 'button' : undefined);
-  var role = rest.role || (Component !== 'button' ? 'button' : undefined);
+  const Component = as || 'button';
+  const type = typeProp || (Component === 'button' ? 'button' : undefined);
+  const role = rest.role || (Component !== 'button' ? 'button' : undefined);
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     role: role,
     type: type,
     ref: ref,
     disabled: disabled,
     "aria-disabled": disabled,
-    className: classes
+    className: classes,
+    onClick: handleClick
   }), buttonContent);
 });
 Button.displayName = 'Button';
-Button.propTypes = {
-  as: PropTypes.elementType,
-  active: PropTypes.bool,
-  appearance: oneOf(['default', 'primary', 'link', 'subtle', 'ghost']),
-  block: PropTypes.bool,
-  children: PropTypes.node,
-  color: oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']),
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  loading: PropTypes.bool,
-  ripple: PropTypes.bool,
-  size: oneOf(['lg', 'md', 'sm', 'xs']),
-  type: oneOf(['button', 'reset', 'submit'])
-};
 export default Button;