@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/dist/esm/components/badge/Badge.js

@@ -2,82 +2,105 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isObject, isNil, isNumber, mergeRefs } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useMemo, cloneElement } from 'react';
+import { cn } from '@react-fabric/utilities';
+import { useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 import { Icon } from '../icon/Icon.js';
-import classes from './Badge.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "className", "value", "max", "ping", "block", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
+var _excluded = ["className", "bg", "color", "icon", "inline", "ping", "value", "children", "placement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var getBadgeProps = function getBadgeProps(badge) {
-  if (isObject(badge)) {
-    return Object.assign({
-      forButton: true,
-      placement: ""
-    }, badge);
-  } else {
-    return {
-      value: badge,
-      forButton: true,
-      placement: ""
-    };
-  }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Tailwind class names for each badge placement position.
+ * Each value uses absolute positioning relative to the parent container,
+ * with RTL-aware horizontal flipping via Tailwind's `rtl:` variant.
+ */
+var PLACEMENT_STYLES = {
+  top: "absolute z-1 top-0 inset-x-1/2 -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  start: "absolute z-1 inset-s-0 top-1/2 -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  end: "absolute z-1 inset-e-0 top-1/2 -translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2",
+  "top-start": "absolute z-1 top-0 start-0 -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  "top-end": "absolute z-1 top-0 end-0 -translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2",
+  bottom: "absolute z-1 bottom-0 inset-x-1/2 translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  "bottom-start": "absolute z-1 bottom-0 start-0 translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  "bottom-end": "absolute z-1 bottom-0 end-0 translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2"
 };
-var Badge = function Badge(_ref) {
-  var ref = _ref.ref,
-    className = _ref.className,
-    value = _ref.value,
-    max = _ref.max,
+
+/**
+ * A small overlay component used to display a numeric value, icon, or pulsing
+ * indicator positioned relative to a child element.
+ *
+ * Commonly used for notification counts, unread indicators, or status badges
+ * on avatars, buttons, or list items.
+ *
+ * @example
+ * ```tsx
+ * import { Badge } from "@react-fabric/core";
+ *
+ * // Numeric badge
+ * <Badge value="42">
+ *    <Avatar name="John" />
+ * </Badge>
+ *
+ * // Icon badge
+ * <Badge icon="icon-[mdi--bell]" />
+ *
+ * // Pulsing indicator
+ * <Badge ping>
+ *    <Icon icon="icon-[mdi--email]" />
+ * </Badge>
+ * ```
+ */
+function Badge(_ref) {
+  var className = _ref.className,
+    _ref$bg = _ref.bg,
+    bg = _ref$bg === void 0 ? "tint-200" : _ref$bg,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-900" : _ref$color,
+    icon = _ref.icon,
+    inline = _ref.inline,
     ping = _ref.ping,
-    block = _ref.block,
+    value = _ref.value,
+    children = _ref.children,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "top-end" : _ref$placement,
-    children = _ref.children,
-    _ref$forButton = _ref.forButton,
-    forButton = _ref$forButton === void 0 ? false : _ref$forButton,
-    icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var label = useMemo(function () {
-    if (!isNil(value)) {
-      if (isNumber(value) && max && value > max) {
-        return "".concat(max, "+");
-      }
-      return "".concat(value);
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Render the appropriate badge shape based on which mode is active
+  var el = useMemo(function () {
+    if (icon) {
+      return /*#__PURE__*/jsx("div", {
+        className: cn("fabric-badgeIcon", "px-[0.325em] py-[0.25em] bg-(--bg) text-(--color) rounded-full leading-0"),
+        children: /*#__PURE__*/jsx(Icon, {
+          icon: icon
+        })
+      });
     }
-  }, [value, max]);
-  var innerRef = useMemo(function () {
-    return mergeRefs(ref, children === null || children === void 0 ? void 0 : children.props.ref);
-  }, [ref, children === null || children === void 0 ? void 0 : children.props.ref]);
-
-  /**
-   * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
-   */
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
-    children: [children && /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
-      ref: innerRef
-    })), (!!ping || label) && /*#__PURE__*/jsxs("div", {
-      "data-ref": "badge",
-      "data-ping": ping,
-      "data-placement": placement,
-      className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none", forButton && !placement ? "relative" : "absolute"),
-      children: [label && /*#__PURE__*/jsx("span", {
-        className: "p-1",
-        children: label
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip
-      })]
-    })]
-  });
-};
+    if (value) {
+      return /*#__PURE__*/jsx("div", {
+        className: cn("fabric-badgeValue", "px-[0.5em] py-[0.25em] leading-none bg-(--bg) text-(--color) rounded-full"),
+        children: value
+      });
+    }
+    return /*#__PURE__*/jsx("div", {
+      className: cn("fabric-badgePing", "size-2 bg-(--bg) rounded-full", ping && "animate-ping")
+    });
+  }, [icon, value, ping]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    "data-ref": "badge",
+    role: "presentation",
+    className: cn("fabric-badge", "size-fit relative", className),
+    children: [/*#__PURE__*/jsx("div", {
+      className: cn("fabric-badgeContainer", "rounded-full text-[0.625em] select-none pointer-events-none bg-(--bg) size-fit", !inline && PLACEMENT_STYLES[placement])
+      // Set CSS custom properties so child elements can reference badge colors
+      ,
+      style: {
+        "--color": getColor(color),
+        "--bg": getColor(bg)
+      },
+      children: el
+    }), children]
+  }));
+}
 
-export { Badge, getBadgeProps };
+export { Badge };

package/dist/esm/components/button/Button.js

@@ -1,171 +1,233 @@
 'use client';
 
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { mergeRefs, isString, isNil } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useRef, useState, useCallback, useEffect, useMemo, Fragment, isValidElement } from 'react';
-import { useEffectDebugger } from '../../hooks/useEffectDebugger.js';
-import { HotKey } from '../../hotkeys/HotKey.js';
-import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
-import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
-import { AnimationIndicator } from '../animations/Animations.js';
-import { getBadgeProps, Badge } from '../badge/Badge.js';
-import { Icon } from '../icon/Icon.js';
-import classes from './Button.module.css';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { EMPTY_ARRAY, cn } from '@react-fabric/utilities';
+import { useHotkeySequence } from '@tanstack/react-hotkeys';
+import { useReducer, useEffect } from 'react';
+import { Kbd } from '../../typography/Kbd.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getIconProps } from '../../utils/getIconProps.js';
+import { AnimationIndicator } from '../animations/Indicator.js';
+import { StyleEffect } from '../effect/StyleEffect.js';
+import { Icon } from '../icon/Icon.js';
 
-var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "stopPropagation", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
+var _excluded = ["active", "altIcon", "as", "children", "className", "classNames", "color", "disabled", "icon", "loading", "onBlur", "onClick", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "activeClickable", "showActionDone", "showActionDoneEvent", "type", "ref", "rounded", "size", "variant", "width", "hotKey", "hideHotKeyLabel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Clickable action button
+ * A versatile button component that supports multiple variants, colors, sizes, and states.
+ * It can display icons, handle loading/action states, show keyboard shortcuts, and be
+ * polymorphic to render as different HTML elements or custom components.
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button variant="solid" color="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ *
+ * // Icon button with loading state
+ * <Button icon="icon-[mdi--floppy]" loading={saving}>
+ *   Save
+ * </Button>
+ *
+ * // Polymorphic: renders as a link
+ * <Button as="a" href="/dashboard" variant="soft">
+ *   Dashboard
+ * </Button>
+ *
+ * // Button with keyboard shortcut
+ * <Button hotKey="Ctrl+S" variant="dashed">
+ *   Save (Ctrl+S)
+ * </Button>
+ * ```
  */
-var Button = function Button(_ref) {
-  var as = _ref.as,
-    ref = _ref.ref,
+function Button(_ref) {
+  var active = _ref.active,
+    altIcon = _ref.altIcon,
+    as = _ref.as,
     children = _ref.children,
     className = _ref.className,
-    active = _ref.active,
+    classNames = _ref.classNames,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
-    icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    _ref$iconAlign = _ref.iconAlign,
-    iconAlign = _ref$iconAlign === void 0 ? "start" : _ref$iconAlign,
-    altIcon = _ref.altIcon,
-    rtlFlip = _ref.rtlFlip,
-    rounded = _ref.rounded,
-    size = _ref.size,
+    color = _ref$color === void 0 ? "default" : _ref$color,
     disabled = _ref.disabled,
+    icon = _ref.icon,
     loading = _ref.loading,
-    variant = _ref.variant,
-    badge = _ref.badge,
-    fullWidth = _ref.fullWidth,
-    spinOnHover = _ref.spinOnHover,
+    onBlur = _ref.onBlur,
     onClick = _ref.onClick,
-    actionMessage = _ref.actionMessage,
-    stopPropagation = _ref.stopPropagation,
+    onFocus = _ref.onFocus,
+    onMouseDown = _ref.onMouseDown,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    onMouseMove = _ref.onMouseMove,
+    onMouseOver = _ref.onMouseOver,
+    onMouseUp = _ref.onMouseUp,
+    activeClickable = _ref.activeClickable,
+    showActionDone = _ref.showActionDone,
+    showActionDoneEvent = _ref.showActionDoneEvent,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
+    ref = _ref.ref,
+    rounded = _ref.rounded,
+    size = _ref.size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    width = _ref.width,
     hotKey = _ref.hotKey,
-    showActionDone = _ref.showActionDone,
-    _ref$showActionDoneEv = _ref.showActionDoneEvent,
-    showActionDoneEvent = _ref$showActionDoneEv === void 0 ? "click" : _ref$showActionDoneEv,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-    dataRef = _ref["data-ref"],
-    aria = _objectWithoutProperties(_ref, _excluded);
-  var refEl = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    busy = _useState2[0],
-    setBusy = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    actionDone = _useState4[0],
-    setActionDone = _useState4[1];
-  var clickHandler = useCallback(function (e) {
-    setBusy(true);
-    stopPropagation && e.stopPropagation();
-    var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    void Promise.resolve(ret).then(function (b) {
-      setBusy(false);
-      if (b !== false && actionMessage && showActionDoneEvent === "click") {
-        setActionDone(true);
+    hideHotKeyLabel = _ref.hideHotKeyLabel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Action state: tracks whether an action is running and whether to show the done overlay
+  var _useReducer = useReducer(function (state, action) {
+      // Start action: show spinner, hide done overlay
+      if (action.type === "actionStart") {
+        return {
+          isActionRunning: true,
+          showActionDone: false
+        };
+      }
+      // Action finished: hide spinner
+      if (action.type === "actionFinished") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isActionRunning: false
+        });
+      }
+      // Action done: show checkmark overlay
+      if (action.type === "actionDone") {
+        return {
+          isActionRunning: false,
+          showActionDone: true
+        };
       }
-    });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
+      // Reset: hide everything
+      return {
+        isActionRunning: false,
+        showActionDone: false
+      };
+    }, {
+      isActionRunning: false,
+      showActionDone: false
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  // Handle button click: dispatch action start, run onClick, then dispatch finished
+  var handleAction = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            dispatch({
+              type: "actionStart"
+            });
+            _context.prev = 1;
+            _context.next = 2;
+            return Promise.resolve(onClick === null || onClick === void 0 ? void 0 : onClick(e));
+          case 2:
+            if (showActionDoneEvent === "click") {
+              dispatch({
+                type: "actionDone"
+              });
+              setTimeout(function () {
+                return dispatch({
+                  type: "actionReset"
+                });
+              }, 2000);
+            }
+          case 3:
+            _context.prev = 3;
+            dispatch({
+              type: "actionFinished"
+            });
+            return _context.finish(3);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1,, 3, 4]]);
+    }));
+    return function handleAction(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useHotkeySequence(hotKey ? [hotKey].flat() : EMPTY_ARRAY, function () {
+    void handleAction();
+  }, {
+    enabled: !disabled
+  });
 
-  /** ***************** reset done state on timeout *******************/
+  // Manual mode: show/hide the done overlay based on showActionDone prop
   useEffect(function () {
-    actionMessage && showActionDone && setActionDone(true);
-  }, [showActionDone, actionMessage]);
-  useEffectDebugger(function () {
-    if (actionDone) {
-      var timer = setTimeout(function () {
-        return setActionDone(false);
-      }, 2000);
+    if (showActionDoneEvent === "manual") {
+      if (showActionDone) dispatch({
+        type: "actionDone"
+      });
       return function () {
-        return clearTimeout(timer);
+        dispatch({
+          type: "actionFinished"
+        });
       };
     }
-  }, [actionDone], "ActionButton done handler");
-  var TooltipWrapper = useMemo(function () {
-    return actionMessage ? Tooltip : Fragment;
-  }, [actionMessage, actionDone]);
-  var tooltipProps = useMemo(function () {
-    if (actionDone && actionMessage) {
-      return {
-        content: actionMessage,
-        placement: "top",
-        color: color,
-        open: true
-      };
-    }
-  }, [actionDone, actionMessage, color]);
-  var badgeProps = useMemo(function () {
-    return getBadgeProps(badge);
-  }, [badge]);
+  }, [showActionDone, showActionDoneEvent]);
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.buttonWrapper, className, "relative align-text-top select-none focus-within:z-1", fullWidth ? "block w-full" : "inline-block"),
-    "data-ref": dataRef !== null && dataRef !== void 0 ? dataRef : "button",
-    "data-size": size,
-    "data-loading": busy || loading,
+    className: cn("fabric-buttonWrapper", "inline-flex relative is-disabled:cursor-not-allowed is-loading:cursor-wait", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-loading": loading || state.isActionRunning,
     "data-disabled": disabled,
-    children: [hotKey && /*#__PURE__*/jsx(HotKey, {
-      keyCombo: hotKey,
-      handler: function handler() {
-        var _refEl$current;
-        return !disabled && ((_refEl$current = refEl.current) === null || _refEl$current === void 0 ? void 0 : _refEl$current.click());
-      }
-    }), /*#__PURE__*/jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
-      children: /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
-        ref: mergeRefs(ref, refEl),
-        role: "button",
-        className: classNames(classes.button, "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none", "focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner", fullWidth && "max-w-full w-full", rounded && "rounded-full", spinOnHover && classes.spinOnHover),
-        type: type,
-        disabled: disabled,
-        tabIndex: tabIndex,
-        "data-inner-clickable": true,
-        onClick: clickHandler,
-        "data-color": color,
-        "data-active": active,
-        "data-variant": variant
-      }, aria), {}, {
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: classes.buttonIcon,
-          icon: icon,
-          bg: iconBg,
-          color: iconColor,
-          rtlFlip: rtlFlip,
-          "data-align": iconAlign
-        }), /*#__PURE__*/isValidElement(children) && /*#__PURE__*/jsx("div", {
-          className: classes.buttonChild,
-          children: children
-        }), isString(children) && /*#__PURE__*/jsx("label", {
-          className: classNames(classes.buttonLabel, "truncate"),
-          "data-colored-icon": !!iconBg,
-          children: children
-        }), !isNil(badge) && /*#__PURE__*/jsx(Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsx(HotKeyLabel, {
-          keyCombo: hotKey
-        }), altIcon && /*#__PURE__*/jsx(Icon, {
-          className: classes.altIcon,
-          icon: altIcon,
-          rtlFlip: true
-        })]
-      }))
-    })), actionDone && /*#__PURE__*/jsx("div", {
-      className: classNames("absolute inset-0 overflow-hidden flex justify-center items-center", "bg-".concat(color, "-300"), rounded ? "rounded-full" : "rounded"),
+    "data-rounded": rounded,
+    "data-variant": variant,
+    "data-active": active,
+    "data-color": color,
+    "data-size": size,
+    style: {
+      width: width
+    },
+    children: [/*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
+      ref: ref
+    }, props), {}, {
+      type: type,
+      className: cn("fabric-button", classNames === null || classNames === void 0 ? void 0 : classNames.button, "relative w-full appearance-none outline cursor-pointer overflow-hidden flex items-center justify-center has-[.fabric-buttonLabel]:px-[0.5em]", "rounded is-rounded:rounded-full", "is-loading:pointer-events-none is-loading:after:animate-progress is-disabled:pointer-events-none", "not-is-active:is-disabled:opacity-50 not-is-active:is-disabled:after:bg-tint-500/10", !activeClickable && "is-active:pointer-events-none"),
+      "data-clickable": true,
+      "data-ref": "button",
+      "data-testid": props["data-testid"],
+      "data-test-value": props["data-test-value"],
+      role: "button",
+      disabled: disabled,
+      "aria-label": props["aria-label"],
+      "aria-disabled": disabled,
+      onFocus: onFocus,
+      onBlur: onBlur
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      ,
+      onClick: handleAction,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onMouseOver: onMouseOver,
+      onMouseMove: onMouseMove,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      children: [variant !== "link" && /*#__PURE__*/jsx(StyleEffect, {}), icon && /*#__PURE__*/jsx(Icon, _objectSpread({
+        className: cn("fabric-buttonIcon", classNames === null || classNames === void 0 ? void 0 : classNames.icon, "m-[0.375em] has-[~_.fabric-buttonLabel]:mx-0 inline-block size-fit flex-content pointer-events-none")
+      }, getIconProps(icon))), children && /*#__PURE__*/jsx("div", {
+        className: cn("fabric-buttonLabel", classNames === null || classNames === void 0 ? void 0 : classNames.label, "m-[0.25em] truncate flex-[0_1_auto] leading-tight pointer-events-none"),
+        children: children
+      }), !hideHotKeyLabel && hotKey && /*#__PURE__*/jsx(Kbd, {
+        keys: hotKey
+      }), altIcon && /*#__PURE__*/jsx(Icon, _objectSpread({
+        className: cn("fabric-buttonAltIcon", "my-[0.25em] size-fit inline-block flex-content pointer-events-none")
+      }, getIconProps(altIcon)))]
+    })), state.showActionDone && /*#__PURE__*/jsx("div", {
+      "data-testid": "doneOverlay",
+      className: "fabric-buttonDoneOverlay absolute inset-0 flex items-center justify-center z-1 border rounded is-rounded:rounded-full",
       children: /*#__PURE__*/jsx(AnimationIndicator, {
-        type: "check",
-        color: color
+        type: "check"
       })
     })]
   });
-};
+}
 
 export { Button };