@react-fabric/core 1.0.0-beta.54 → 1.0.0-beta.57

package/dist/esm/components/avatar/Avatar.js

@@ -10,7 +10,7 @@ import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "onClick"];
+var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "preventDefault", "onClick"];
 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 SizeMap = {
@@ -64,7 +64,8 @@ var Avatar = function Avatar(_ref) {
     className = _ref.className,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
-    onClick = _ref.onClick,
+    preventDefault = _ref.preventDefault,
+    _onClick = _ref.onClick,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -159,9 +160,12 @@ var Avatar = function Avatar(_ref) {
   return /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
     role: "presentation",
     className: classNames("fabric-avatar", className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full"),
-    onClick: onClick,
+    onClick: function onClick(e) {
+      preventDefault && e.preventDefault();
+      _onClick === null || _onClick === void 0 || _onClick(e);
+    },
     style: styles,
-    "data-clickable": !!onClick,
+    "data-clickable": !!_onClick,
     ref: ref
   }, aria), {}, {
     children: [!fallback && avatarImage, fallback && fallbackAvatar]

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

@@ -16,7 +16,7 @@ import { AnimationIndicator } from '../animations/Animations.js';
 import { getBadgeProps, Badge } from '../badge/Badge.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 = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "preventDefault", "stopPropagation", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
 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; }
 /**
@@ -68,6 +68,7 @@ var Button = function Button(_ref) {
     spinOnHover = _ref.spinOnHover,
     onClick = _ref.onClick,
     actionMessage = _ref.actionMessage,
+    preventDefault = _ref.preventDefault,
     stopPropagation = _ref.stopPropagation,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
@@ -92,6 +93,7 @@ var Button = function Button(_ref) {
   // Handle click events
   var clickHandler = useCallback(function (e) {
     setBusy(true);
+    preventDefault && e.preventDefault();
     stopPropagation && e.stopPropagation();
     var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
     void Promise.resolve(ret).then(function (b) {
@@ -100,7 +102,7 @@ var Button = function Button(_ref) {
         setActionDone(true);
       }
     });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
+  }, [onClick, disabled, preventDefault, actionMessage, showActionDoneEvent, stopPropagation]);
 
   /** ***************** reset done state on timeout *******************/
   useEffect(function () {

package/dist/esm/components/card/Card.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 
-var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "onDragStart", "flex", "draggable", "dragKey", "dragData", "ref"];
+var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "onDragStart", "flex", "draggable", "dragKey", "dragData", "ref", "as"];
 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; }
 /**
@@ -61,6 +61,7 @@ var Card = function Card(_ref) {
     dragKey = _ref.dragKey,
     dragData = _ref.dragData,
     ref = _ref.ref,
+    as = _ref.as,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useMemo = useMemo(function () {
       return Children.toArray(children).reduce(function (ret, node) {
@@ -77,22 +78,27 @@ var Card = function Card(_ref) {
     dragKey && ((_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
     dragKey && (onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, dragKey, dragData));
   }, [onDragStart, dragKey, dragData]);
+  var E = as !== null && as !== void 0 ? as : "div";
   return /*#__PURE__*/jsx("div", {
-    className: classNames("fabric-cardWrapper", "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && "selected", selected && "outline-2 outline-accent-500 outline-offset-2"),
+    className: classNames("fabric-cardWrapper", "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && "selected", selected && "outline-1 outline-accent-500 outline-offset-2"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
-      children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-        className: classNames("fabric-card", className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && "clickable"),
+      children: /*#__PURE__*/jsxs("div", {
+        className: classNames("fabric-card", className, "rounded-capped relative flex flex-col flex-nowrap overflow-hidden", "href" in aria && "clickable", "to" in aria && "clickable", onClick && "clickable"),
         draggable: draggable,
         onDragStart: !draggable ? undefined : handleDragStart,
-        ref: ref
-      }, aria), {}, {
-        children: [header, /*#__PURE__*/jsx("div", {
+        ref: ref,
+        children: [header, /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
           role: "none",
-          className: classNames("fabric-cardBody", bodyClassName, "flex-1"),
-          onClick: onClick,
-          children: body
-        }), footer]
-      }))
+          onClick: onClick
+        }, aria), {}, {
+          className: "contents",
+          children: body && /*#__PURE__*/jsx("object", {
+            type: "none",
+            className: classNames("fabric-cardBody", bodyClassName, "flex-1"),
+            children: body
+          })
+        })), footer]
+      })
     })
   });
 };

package/dist/esm/components/chip/Chip.js

@@ -10,7 +10,7 @@ import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
 
-var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
+var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "preventDefault", "stopPropagation", "as"];
 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 SizeMap = {
@@ -57,6 +57,7 @@ var Chip = function Chip(_ref) {
     onIconClick = _ref.onIconClick,
     onRemove = _ref.onRemove,
     rounded = _ref.rounded,
+    preventDefault = _ref.preventDefault,
     stopPropagation = _ref.stopPropagation,
     as = _ref.as,
     aria = _objectWithoutProperties(_ref, _excluded);
@@ -75,9 +76,10 @@ var Chip = function Chip(_ref) {
     return s;
   }, [color, size], "Chip styles");
   var clickHandler = useCallback(function (e) {
-    if (stopPropagation) e.stopPropagation();
+    preventDefault && e.preventDefault();
+    stopPropagation && e.stopPropagation();
     onClick === null || onClick === void 0 || onClick(e);
-  }, [onClick, stopPropagation]);
+  }, [onClick, preventDefault, stopPropagation]);
   var removeHandler = useCallback(function (e) {
     if (stopPropagation) e.stopPropagation();
     onRemove === null || onRemove === void 0 || onRemove(e);

package/dist/esm/components/dropdown/Dropdown.js

@@ -112,6 +112,7 @@ var DropdownElement = function DropdownElement(_ref) {
         var _anchor$props$onClick, _anchor$props;
         (_anchor$props$onClick = (_anchor$props = anchor.props).onClick) === null || _anchor$props$onClick === void 0 || _anchor$props$onClick.call(_anchor$props, e);
         e.stopPropagation();
+        e.preventDefault();
       }
     })), {}, {
       "data-inner-clickable": "true",

package/dist/esm/components/icon/Icon.js

@@ -63,7 +63,7 @@ var Icon = function Icon(_ref) {
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
-    onClick = _ref.onClick,
+    _onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   /** ***************** style map *******************/
   var styles = useMemo(function () {
@@ -121,12 +121,16 @@ var Icon = function Icon(_ref) {
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
-    onClick: onClick,
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!_onClick && disabled && "opacity-30 pointer-events-none", className),
+    onClick: function onClick(e) {
+      _onClick && e.stopPropagation();
+      _onClick && e.preventDefault();
+      _onClick === null || _onClick === void 0 || _onClick(e);
+    },
     "data-flip": rtlFlip,
     style: styles,
-    "data-clickable": !!onClick,
-    "data-inner-clickable": !!onClick,
+    "data-clickable": !!_onClick,
+    "data-inner-clickable": !!_onClick,
     children: iconEl
   }));
 };

package/dist/esm/components/menu/Menu.js

@@ -241,12 +241,14 @@ var Menu = function Menu(props) {
   var tree = useFloatingTree();
   if (tree) {
     return /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      className: "",
       menuClassName: props.className
     }));
   }
   if (parentId === null) {
     return /*#__PURE__*/jsx(FloatingTree, {
       children: /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+        className: "",
         menuClassName: props.className
       }))
     });

package/dist/esm/components/tabpanel/Tab.js

@@ -92,7 +92,7 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6 rounded" : "rounded-capped", "flex items-center justify-center overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },

package/dist/esm/components/tabpanel/TabPanel.js

@@ -49,11 +49,13 @@ var TabPanel = function TabPanel(_ref) {
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? "top" : _ref$orientation,
     activeTab = _ref.activeTab,
+    activeClassName = _ref.activeClassName,
     justify = _ref.justify,
     variant = _ref.variant,
     tabFlex = _ref.tabFlex,
     append = _ref.append,
     prepend = _ref.prepend,
+    tabRotate = _ref.tabRotate,
     gap = _ref.gap,
     onBeforeChange = _ref.onBeforeChange,
     onChange = _ref.onChange;
@@ -92,16 +94,17 @@ var TabPanel = function TabPanel(_ref) {
     "data-orientation": orientation,
     "data-variant": variant !== null && variant !== void 0 ? variant : "default",
     children: [/*#__PURE__*/jsxs("div", {
-      className: classNames("fabric-tabHeader", headerClassName, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
+      className: classNames("fabric-tabHeader", headerClassName, tabRotate && "tab-rotate", justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
       children: [prepend, /*#__PURE__*/jsx("div", {
         className: classNames("fabric-tabList", justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", ["bottom", "end"].includes(orientation) ? "self-start" : "self-end", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
         style: {
           gap: gap
         },
         children: tabs.map(function (node) {
-          var _node$props$tabFlex;
+          var _node$props$tabFlex, _node$props$activeCla;
           return /*#__PURE__*/cloneElement(node, {
             tabFlex: (_node$props$tabFlex = node.props.tabFlex) !== null && _node$props$tabFlex !== void 0 ? _node$props$tabFlex : tabFlex,
+            activeClassName: (_node$props$activeCla = node.props.activeClassName) !== null && _node$props$activeCla !== void 0 ? _node$props$activeCla : activeClassName,
             onClick: handleClick,
             active: node.props.id === active
           });

package/dist/esm/overlays/flyout/Flyout.js

@@ -13,7 +13,7 @@ import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
+var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
 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 Flyout = function Flyout(_ref) {
@@ -33,6 +33,7 @@ var Flyout = function Flyout(_ref) {
     size = _ref.size,
     width = _ref.width,
     minWidth = _ref.minWidth,
+    root = _ref.root,
     hideMask = _ref.hideMask,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
@@ -85,6 +86,7 @@ var Flyout = function Flyout(_ref) {
     }
   }, [closeOnClick, handleClose]);
   return /*#__PURE__*/jsxs(FloatingPortal, {
+    root: root,
     children: [!hideMask && /*#__PURE__*/jsx(FloatingOverlay, {
       lockScroll: true,
       style: {

package/dist/esm/overlays/modal/Modal.js

@@ -13,7 +13,7 @@ import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "noMask", "width", "height", "minHeight", "minWidth"];
+var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
 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 Modal = function Modal(_ref) {
@@ -31,7 +31,7 @@ var Modal = function Modal(_ref) {
     loading = _ref.loading,
     root = _ref.root,
     size = _ref.size,
-    noMask = _ref.noMask,
+    hideMask = _ref.hideMask,
     width = _ref.width,
     height = _ref.height,
     minHeight = _ref.minHeight,
@@ -85,7 +85,7 @@ var Modal = function Modal(_ref) {
         position: "absolute",
         overflow: "hidden"
       },
-      className: classNames("grid place-items-center p-16", !noMask && "bg-tint-100/20 backdrop-blur-sm"),
+      className: classNames("grid place-items-center p-16", !hideMask && "bg-tint-100/20 backdrop-blur-sm"),
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({

package/dist/esm/types/icons.js

@@ -194,7 +194,7 @@ var CoreIcons;
   _CoreIcons.mediaSplitter = "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z";
   _CoreIcons.mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
   _CoreIcons.mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
-  _CoreIcons.mediaContrast = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+  _CoreIcons.mediaContrast = "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
   _CoreIcons.mediaEqs = "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
   _CoreIcons.mediaCaptionOff = "M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z";
   _CoreIcons.mediaCaptionOn = "M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z";
@@ -205,6 +205,10 @@ var CoreIcons;
   _CoreIcons.mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
   _CoreIcons.mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   _CoreIcons.mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+  _CoreIcons.mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+  _CoreIcons.mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+  _CoreIcons.mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+  _CoreIcons.mediaSaturate = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 })(CoreIcons || (CoreIcons = {}));
 
 export { CoreIcons };

package/dist/types/components/avatar/Avatar.d.ts

@@ -36,6 +36,10 @@ export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
      * rounded icon
      */
     rounded?: boolean;
+    /**
+     * prevent click default, useful when component is within a `a` link
+     */
+    preventDefault?: boolean;
     /**
      * click handler
      */
@@ -69,4 +73,4 @@ export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-avatar--docs} for more details.
  * @see {@link https://boringavatars.com/} for more information on Boring Avatars.
  */
-export declare const Avatar: ({ ref, name, avatar, fallbackIcon, bg, color, size, rounded, variant, className, viewBox, onClick, ...aria }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ ref, name, avatar, fallbackIcon, bg, color, size, rounded, variant, className, viewBox, preventDefault, onClick, ...aria }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/button/Button.d.ts

@@ -74,6 +74,10 @@ export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestP
      * keyboard shortcut
      */
     hotKey?: string;
+    /**
+     * prevent click default, useful when button is within a `a` link
+     */
+    preventDefault?: boolean;
     stopPropagation?: boolean;
     onMouseOut?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
@@ -114,5 +118,5 @@ export type ButtonProps<Tag extends React.ElementType = "button"> = BaseProps &
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-button--docs} for more details.
  */
-export declare const Button: <Tag extends React.ElementType = "button">({ 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": dataRef, ...aria }: ButtonProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: <Tag extends React.ElementType = "button">({ as, ref, children, className, active, color, icon, iconBg, iconColor, iconAlign, altIcon, rtlFlip, rounded, size, disabled, loading, variant, badge, fullWidth, spinOnHover, onClick, actionMessage, preventDefault, stopPropagation, type, hotKey, showActionDone, showActionDoneEvent, tabIndex, "data-ref": dataRef, ...aria }: ButtonProps<Tag>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/card/Card.d.ts

@@ -1,8 +1,8 @@
 import { type DragEvent, type MouseEventHandler } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
-import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
-export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
+import { PolymorphicProps, type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
+interface BaseProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
     /**
      * apply flex fill styling
      */
@@ -40,6 +40,7 @@ export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDi
      */
     dragData?: KeyValue;
 }
+export type CardProps<Tag extends React.ElementType = "div"> = BaseProps & PolymorphicProps<Tag>;
 /**
  * A component that displays a card with a header, body, and footer. It can be used to display content in a structured format.
  * It supports various features such as click handling, drag-and-drop functionality, and customizable styles.
@@ -74,4 +75,5 @@ export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDi
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-card--docs} for more details.
  */
-export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, onDragStart, flex, draggable, dragKey, dragData, ref, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: <Tag extends React.ElementType = "div">({ children, className, bodyClassName, selected, selectedRibbon, onClick, onDragStart, flex, draggable, dragKey, dragData, ref, as, ...aria }: CardProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/chip/Chip.d.ts

@@ -21,6 +21,10 @@ export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, Chi
      * disabled state
      */
     disabled?: boolean;
+    /**
+     * prevent click default, useful when component is within a `a` link
+     */
+    preventDefault?: boolean;
     /**
      * prevent click propagation
      */
@@ -58,4 +62,4 @@ export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, Chi
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-chip--docs} for more details.
  */
-export declare const Chip: <Tag extends React.ElementType = "div">({ ref, children, className, size, color, variant, icon, iconBg, iconColor, rtlFlip, disabled, onClick, onIconClick, onRemove, rounded, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Chip: <Tag extends React.ElementType = "div">({ ref, children, className, size, color, variant, icon, iconBg, iconColor, rtlFlip, disabled, onClick, onIconClick, onRemove, rounded, preventDefault, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/tabpanel/TabPanel.d.ts

@@ -13,11 +13,15 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
     /**
      * tab variations
      */
-    variant?: "soft" | "solid" | "outline";
+    variant?: "soft" | "solid" | "outline" | "pills";
     /**
      * tab button flex to fill tabs
      */
     tabFlex?: boolean;
+    /**
+     * rotate tab sideways for start/end orientation
+     */
+    tabRotate?: boolean;
     /**
      * tab button gap
      */
@@ -30,6 +34,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
      * tab list className
      */
     headerClassName?: string;
+    /**
+     * active tab className
+     */
+    activeClassName?: string;
     /**
      * append element
      */
@@ -80,4 +88,4 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-tabpanel--docs} for more details.
  */
-export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, justify, variant, tabFlex, append, prepend, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, activeClassName, justify, variant, tabFlex, append, prepend, tabRotate, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/flyout/Flyout.d.ts

@@ -38,6 +38,10 @@ export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon
      * minimum width
      */
     minWidth?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
     /**
      * hide backdrop mask
      */
@@ -55,4 +59,4 @@ export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Flyout: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flyout: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, root, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/modal/Modal.d.ts

@@ -49,7 +49,7 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
     /**
      * hide mask background
      */
-    noMask?: boolean;
+    hideMask?: boolean;
     /**
      * close handler
      */
@@ -59,4 +59,4 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, noMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, hideMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/icons.d.ts

@@ -191,7 +191,7 @@ export declare namespace CoreIcons {
     const mediaSplitter = "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z";
     const mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
     const mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
-    const mediaContrast = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+    const mediaContrast = "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
     const mediaEqs = "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
     const mediaCaptionOff = "M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z";
     const mediaCaptionOn = "M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z";
@@ -202,4 +202,8 @@ export declare namespace CoreIcons {
     const mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
     const mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
     const mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+    const mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+    const mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+    const mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+    const mediaSaturate = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.54",
+  "version": "1.0.0-beta.57",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "242f15e3de29d365cce6f41f4ef99ab36bb6b995"
+  "gitHead": "9b596a0a8d6cecaa8479f80c495b64fb42ce739f"
 }

package/src/components/avatar/Avatar.tsx

@@ -73,6 +73,10 @@ export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
    * rounded icon
    */
   rounded?: boolean;
+  /**
+   * prevent click default, useful when component is within a `a` link
+   */
+  preventDefault?: boolean;
   /**
    * click handler
    */
@@ -127,6 +131,7 @@ export const Avatar = ({
   variant = "beam",
   className,
   viewBox = "0 0 24 24",
+  preventDefault,
   onClick,
   ...aria
 }: AvatarProps) => {
@@ -220,7 +225,10 @@ export const Avatar = ({
         !rounded && "rounded",
         rounded && "rounded-full",
       )}
-      onClick={onClick}
+      onClick={(e) => {
+        preventDefault && e.preventDefault();
+        onClick?.(e);
+      }}
       style={styles}
       data-clickable={!!onClick}
       ref={ref}

package/src/components/button/Button.tsx

@@ -136,6 +136,10 @@ export interface BaseProps
    */
   hotKey?: string;
 
+  /**
+   * prevent click default, useful when button is within a `a` link
+   */
+  preventDefault?: boolean;
   stopPropagation?: boolean;
 
   onMouseOut?: MouseEventHandler;
@@ -202,6 +206,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   spinOnHover,
   onClick,
   actionMessage,
+  preventDefault,
   stopPropagation,
   type = "button",
   hotKey,
@@ -220,6 +225,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
       setBusy(true);
+      preventDefault && e.preventDefault();
       stopPropagation && e.stopPropagation();
       const ret = onClick?.(e);
       void Promise.resolve(ret).then((b) => {
@@ -229,7 +235,14 @@ export const Button = <Tag extends React.ElementType = "button">({
         }
       });
     },
-    [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation],
+    [
+      onClick,
+      disabled,
+      preventDefault,
+      actionMessage,
+      showActionDoneEvent,
+      stopPropagation,
+    ],
   );
 
   /** ***************** reset done state on timeout *******************/