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

package/css/components/_button.css

@@ -98,10 +98,6 @@
     & > .fabric-buttonWrapper {
       flex: 0 1 1em;
     }
-
-    &:not(.flex) + &:not(.flex) {
-      margin-inline-start: 0.5rem;
-    }
   }
 }
 
@@ -328,6 +324,10 @@
         border-start-start-radius: 0;
         border-end-start-radius: 0;
       }
+
+      &:not(.flex) + &:not(.flex) {
+        margin-inline-start: 0.5rem;
+      }
     }
 
     &.vertical {
@@ -360,6 +360,10 @@
         border-start-start-radius: 0;
         border-start-end-radius: 0;
       }
+
+      &:not(.flex) + &:not(.flex) {
+        margin-top: 0.5rem;
+      }
     }
   }
 }

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;
+          }
+        }
       }
     }
   }
@@ -120,13 +160,14 @@
       }
     }
 
-    &[data-variant="soft"] {
+    &[data-variant="soft"],
+    &[data-variant="pills"] {
       & .fabric-tabList > .fabric-tabButton.active {
         background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
       }
     }
 
-    &[data-orientation="top"] .fabric-tabList {
+    &[data-orientation="top"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           0 -2px 0 var(--active-color) inset,
@@ -134,7 +175,7 @@
       }
     }
 
-    &[data-orientation="bottom"] .fabric-tabList {
+    &[data-orientation="bottom"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           0 2px 0 var(--active-color) inset,
@@ -142,7 +183,7 @@
       }
     }
 
-    &[data-orientation="start"] .fabric-tabList {
+    &[data-orientation="start"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           -2px 0 0 var(--active-color) inset,
@@ -150,7 +191,7 @@
       }
     }
 
-    &[data-orientation="end"] .fabric-tabList {
+    &[data-orientation="end"]:not([data-variant="pills"]) .fabric-tabList {
       & > .fabric-tabButton.active {
         box-shadow:
           2px 0 0 var(--active-color) inset,
@@ -158,32 +199,47 @@
       }
     }
 
-    &[data-orientation="top"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="top"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-top: 2px;
       margin-inline: 1px;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="bottom"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="bottom"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-bottom: 2px;
       margin-inline: 1px;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    &[data-orientation="start"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="start"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-start: 2px;
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="end"] .fabric-tabList > .fabric-tabButton {
+    &[data-orientation="end"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-end: 2px;
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
+
+    &[data-variant="pills"] {
+      .fabric-tabList > .fabric-tabButton {
+        margin: 2px;
+        box-shadow: 0 0 2px var(--active-color) inset;
+      }
+    }
   }
 }

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/menu/Menu.js

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

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" : "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/cjs/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__*/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: {
           gap: gap
         },
         children: tabs.map(function (node) {
-          var _node$props$tabFlex;
+          var _node$props$tabFlex, _node$props$activeCla;
           return /*#__PURE__*/react.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/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/cjs/types/icons.js

@@ -194,7 +194,7 @@ exports.CoreIcons = void 0;
   _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,4 +205,8 @@ exports.CoreIcons = void 0;
   _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";
 })(exports.CoreIcons || (exports.CoreIcons = {}));