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

package/css/components/_card.css

@@ -54,8 +54,10 @@
   }
 
   .fabric-card {
+    --tw-shadow-color: var(--border-color-muted);
+
     background-color: var(--fabric-bg);
-    box-shadow: 0 0 0 1px var(--border-color-muted);
+    box-shadow: 0 0 0 1px var(--tw-shadow-color);
 
     & > * {
       background-color: transparent;
@@ -82,8 +84,10 @@
     }
 
     &.clickable {
+      --tw-shadow-color: var(--border-color-dimmed);
+
       box-shadow:
-        0 0 0 1px var(--border-color-dimmed),
+        0 0 0 1px var(--tw-shadow-color),
         0 1px 2px 0 var(--fabric-shadow);
       transition: box-shadow 0ms;
 
@@ -91,7 +95,7 @@
           :has([data-inner-clickable="true"]:hover)
         ) {
         box-shadow:
-          0 0 0 1px var(--border-color-dimmed),
+          0 0 0 1px var(--tw-shadow-color),
           0 1px 4px 0 var(--fabric-shadow),
           0 8px 16px 0 color-mix(in lab, var(--fabric-shadow) 35%, #0000);
         transition-delay: 150ms;
@@ -101,7 +105,7 @@
           :has([data-inner-clickable="true"]:hover)
         ) {
         transform: translateY(1px);
-        box-shadow: 0 0 0 1px var(--border-color-dimmed);
+        box-shadow: 0 0 0 1px var(--tw-shadow-color);
         transition-delay: 0ms;
       }
 

package/css/components/_tabPanel.css

@@ -30,6 +30,10 @@
 
       .fabric-tabHeader {
         box-shadow: 0 -1px 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
       }
     }
 
@@ -39,6 +43,10 @@
       .fabric-tabHeader {
         margin-top: 1px;
         box-shadow: 0 1px 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
       }
     }
 
@@ -47,6 +55,22 @@
 
       .fabric-tabHeader {
         box-shadow: -1px 0 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-lr;
+          }
+        }
       }
     }
 
@@ -55,6 +79,22 @@
 
       .fabric-tabHeader {
         box-shadow: 1px 0 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-rl;
+          }
+        }
       }
     }
   }

package/css/core/_aside.css

@@ -202,9 +202,8 @@
     }
 
     & .fabric-asideTitle {
-      right: calc(2rem + 2px);
-      transform-origin: 100% 100%;
-      transform: rotate(-90deg) translateY(2rem);
+      transform: translateY(2rem);
+      writing-mode: sideways-lr;
     }
 
     & .fabric-asideCollapse {
@@ -227,9 +226,8 @@
     }
 
     & .fabric-asideTitle {
-      left: calc(2rem + 2px);
-      transform-origin: 0 100%;
-      transform: rotate(90deg) translateY(2rem);
+      transform: translateY(2rem);
+      writing-mode: sideways-rl;
     }
 
     & .fabric-asideCollapse {

package/css/reset/_reset.css

@@ -222,4 +222,18 @@
   .mixed-lang {
     unicode-bidi: plaintext;
   }
+
+  [dir="rtl"] {
+    p,
+    pre,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .mixed-lang {
+      text-align: right;
+    }
+  }
 }

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

@@ -10,7 +10,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../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 = react.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -159,9 +160,12 @@ var Avatar = function Avatar(_ref) {
   return /*#__PURE__*/jsxRuntime.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/cjs/components/button/Button.js

@@ -16,7 +16,7 @@ var Animations = require('../animations/Animations.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../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 = react.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 *******************/
   react.useEffect(function () {

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

@@ -11,7 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../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 = react.useMemo(function () {
       return react.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__*/jsxRuntime.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__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-        className: classNames("fabric-card", className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && "clickable"),
+      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+        ref: ref,
+        children: [header, /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("object", {
+            type: "none",
+            className: classNames("fabric-cardBody", bodyClassName, "flex-1"),
+            children: body
+          })
+        })), footer]
+      })
     })
   });
 };

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

@@ -10,7 +10,7 @@ var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Icon = require('../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 = react.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 = react.useCallback(function (e) {
     if (stopPropagation) e.stopPropagation();
     onRemove === null || onRemove === void 0 || onRemove(e);

package/dist/cjs/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/cjs/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 = react.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/cjs/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 rounded" : "min-w-18 rounded-capped", "flex items-center justify-center px-1 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/cjs/components/tabpanel/TabPanel.js

@@ -55,6 +55,7 @@ var TabPanel = function TabPanel(_ref) {
     tabFlex = _ref.tabFlex,
     append = _ref.append,
     prepend = _ref.prepend,
+    tabRotate = _ref.tabRotate,
     gap = _ref.gap,
     onBeforeChange = _ref.onBeforeChange,
     onChange = _ref.onChange;
@@ -93,7 +94,7 @@ var TabPanel = function TabPanel(_ref) {
     "data-orientation": orientation,
     "data-variant": variant !== null && variant !== void 0 ? variant : "default",
     children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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: {

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

@@ -13,7 +13,7 @@ var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
 var jsxRuntime = require('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__*/jsxRuntime.jsxs(react.FloatingPortal, {
+    root: root,
     children: [!hideMask && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
       lockScroll: true,
       style: {

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

@@ -13,7 +13,7 @@ var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
 var jsxRuntime = require('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__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({

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/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 rounded" : "min-w-18 rounded-capped", "flex items-center justify-center px-1 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

@@ -55,6 +55,7 @@ var TabPanel = function TabPanel(_ref) {
     tabFlex = _ref.tabFlex,
     append = _ref.append,
     prepend = _ref.prepend,
+    tabRotate = _ref.tabRotate,
     gap = _ref.gap,
     onBeforeChange = _ref.onBeforeChange,
     onChange = _ref.onChange;
@@ -93,7 +94,7 @@ 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: {

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/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

@@ -18,6 +18,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
      * tab button flex to fill tabs
      */
     tabFlex?: boolean;
+    /**
+     * rotate tab sideways for start/end orientation
+     */
+    tabRotate?: boolean;
     /**
      * tab button gap
      */
@@ -84,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, activeClassName, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.55",
+  "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": "c8454798fb7546174ee8c7ea10e491c5e903e789"
+  "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 *******************/

package/src/components/card/Card.tsx

@@ -24,10 +24,10 @@
 import classNames from "classnames";
 import {
   Children,
-  type DragEvent,
-  type MouseEventHandler,
   useCallback,
   useMemo,
+  type DragEvent,
+  type MouseEventHandler,
 } from "react";
 import { ErrorBoundary } from "../../core/boundary/ErrorBoundary";
 import { type ContentProps } from "../../core/content/Content";
@@ -37,6 +37,7 @@ import {
   type HeadFootProps,
 } from "../../core/headfoot/HeadFoot";
 import {
+  PolymorphicProps,
   type AriaProps,
   type ChildrenProp,
   type CssProp,
@@ -45,7 +46,7 @@ import {
 } from "../../types";
 import { nodeCheck } from "../../utils";
 
-export interface CardProps
+interface BaseProps
   extends CssProp,
     AriaProps,
     TestProps,
@@ -93,6 +94,9 @@ export interface CardProps
   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.
@@ -127,7 +131,7 @@ export interface CardProps
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-card--docs} for more details.
  */
-export const Card = ({
+export const Card = <Tag extends React.ElementType = "div">({
   children,
   className,
   bodyClassName,
@@ -140,8 +144,9 @@ export const Card = ({
   dragKey,
   dragData,
   ref,
+  as,
   ...aria
-}: CardProps) => {
+}: CardProps<Tag>) => {
   const [header, body, footer] = useMemo(() => {
     return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
       (ret, node) => {
@@ -164,6 +169,7 @@ export const Card = ({
     [onDragStart, dragKey, dragData],
   );
 
+  const E = as ?? "div";
   return (
     <div
       className={classNames(
@@ -171,7 +177,7 @@ export const Card = ({
         "rounded-capped relative grid",
         flex && "flex-1",
         selected && selectedRibbon && "selected",
-        selected && "outline-2 outline-accent-500 outline-offset-2",
+        selected && "outline-1 outline-accent-500 outline-offset-2",
       )}
     >
       <ErrorBoundary>
@@ -179,22 +185,30 @@ export const Card = ({
           className={classNames(
             "fabric-card",
             className,
-            "rounded-capped flex flex-col flex-nowrap overflow-hidden",
+            "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}
         >
           {header}
-          <div
-            role="none"
-            className={classNames("fabric-cardBody", bodyClassName, "flex-1")}
-            onClick={onClick}
-          >
-            {body}
-          </div>
+          <E role="none" onClick={onClick} {...aria} className="contents">
+            {body && (
+              <object
+                type="none"
+                className={classNames(
+                  "fabric-cardBody",
+                  bodyClassName,
+                  "flex-1",
+                )}
+              >
+                {body}
+              </object>
+            )}
+          </E>
           {footer}
         </div>
       </ErrorBoundary>

package/src/components/chip/Chip.tsx

@@ -66,6 +66,10 @@ export interface ChipProps
    * disabled state
    */
   disabled?: boolean;
+  /**
+   * prevent click default, useful when component is within a `a` link
+   */
+  preventDefault?: boolean;
   /**
    * prevent click propagation
    */
@@ -128,6 +132,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
   onIconClick,
   onRemove,
   rounded,
+  preventDefault,
   stopPropagation,
   as,
   ...aria
@@ -153,10 +158,11 @@ export const Chip = <Tag extends React.ElementType = "div">({
 
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
-      if (stopPropagation) e.stopPropagation();
+      preventDefault && e.preventDefault();
+      stopPropagation && e.stopPropagation();
       onClick?.(e);
     },
-    [onClick, stopPropagation],
+    [onClick, preventDefault, stopPropagation],
   );
 
   const removeHandler = useCallback(

package/src/components/dropdown/Dropdown.tsx

@@ -221,6 +221,7 @@ const DropdownElement = ({
           onClick: (e) => {
             anchor.props.onClick?.(e);
             e.stopPropagation();
+            e.preventDefault();
           },
         }),
         "data-inner-clickable": "true",

package/src/components/icon/Icon.tsx

@@ -193,7 +193,11 @@ export const Icon = ({
         !!onClick && disabled && "opacity-30 pointer-events-none",
         className,
       )}
-      onClick={onClick}
+      onClick={(e) => {
+        onClick && e.stopPropagation();
+        onClick && e.preventDefault();
+        onClick?.(e);
+      }}
       data-flip={rtlFlip}
       style={styles}
       data-clickable={!!onClick}

package/src/components/tabpanel/Tab.tsx

@@ -174,8 +174,8 @@ export const Tab = <Tag extends React.ElementType = "button">({
           active && activeClassName,
           disabled && "text-tint-500 pointer-events-none",
           tabFlex ? "flex-1" : "flex-initial max-w-36",
-          minimal ? "min-w-6 rounded" : "min-w-18 rounded-capped",
-          "flex items-center justify-center px-1 overflow-hidden cursor-pointer",
+          minimal ? "min-w-6 rounded" : "rounded-capped",
+          "flex items-center justify-center overflow-hidden cursor-pointer",
         )}
         onClick={() => !active && onClick?.(id)}
         ref={ref as AnyObject}

package/src/components/tabpanel/TabPanel.tsx

@@ -52,6 +52,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab button flex to fill tabs
    */
   tabFlex?: boolean;
+  /**
+   * rotate tab sideways for start/end orientation
+   */
+  tabRotate?: boolean;
   /**
    * tab button gap
    */
@@ -132,6 +136,7 @@ export const TabPanel = ({
   tabFlex,
   append,
   prepend,
+  tabRotate,
   gap,
   onBeforeChange,
   onChange,
@@ -182,6 +187,7 @@ export const TabPanel = ({
         className={classNames(
           "fabric-tabHeader",
           headerClassName,
+          tabRotate && "tab-rotate",
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
           "flex flex-nowrap overflow-hidden items-center",

package/src/overlays/flyout/Flyout.tsx

@@ -94,6 +94,10 @@ export interface FlyoutProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
   /**
    * hide backdrop mask
    */
@@ -129,6 +133,7 @@ export const Flyout = ({
   size,
   width,
   minWidth,
+  root,
   hideMask,
   align = "start",
   ...aria
@@ -193,7 +198,7 @@ export const Flyout = ({
   );
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={root}>
       {!hideMask && (
         <FloatingOverlay
           lockScroll

package/src/overlays/modal/Modal.tsx

@@ -105,7 +105,7 @@ export interface ModalProps
   /**
    * hide mask background
    */
-  noMask?: boolean;
+  hideMask?: boolean;
   /**
    * close handler
    */
@@ -131,7 +131,7 @@ export const Modal = ({
   loading,
   root,
   size,
-  noMask,
+  hideMask,
   width,
   height,
   minHeight,
@@ -193,7 +193,7 @@ export const Modal = ({
         }}
         className={classNames(
           "grid place-items-center p-16",
-          !noMask && "bg-tint-100/20 backdrop-blur-sm",
+          !hideMask && "bg-tint-100/20 backdrop-blur-sm",
         )}
       >
         <FloatingFocusManager context={context}>