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

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/_tabPanel.css

@@ -120,13 +120,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 +135,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 +143,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 +151,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 +159,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/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" : "min-w-18 rounded-capped", "flex items-center justify-center px-1 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,6 +49,7 @@ 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,
@@ -99,9 +100,10 @@ var TabPanel = function TabPanel(_ref) {
           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/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 = {}));

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

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

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

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

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

@@ -49,6 +49,7 @@ 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,
@@ -99,9 +100,10 @@ var TabPanel = function TabPanel(_ref) {
           gap: gap
         },
         children: tabs.map(function (node) {
-          var _node$props$tabFlex;
+          var _node$props$tabFlex, _node$props$activeCla;
           return /*#__PURE__*/cloneElement(node, {
             tabFlex: (_node$props$tabFlex = node.props.tabFlex) !== null && _node$props$tabFlex !== void 0 ? _node$props$tabFlex : tabFlex,
+            activeClassName: (_node$props$activeCla = node.props.activeClassName) !== null && _node$props$activeCla !== void 0 ? _node$props$activeCla : activeClassName,
             onClick: handleClick,
             active: node.props.id === active
           });

package/dist/esm/types/icons.js

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

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

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

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

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

package/package.json

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

package/src/components/menu/Menu.tsx

@@ -313,6 +313,7 @@ export const Menu = (props: MenuProps) => {
     return (
       <MenuComponent
         {...(props as AnyObject)}
+        className=""
         menuClassName={props.className}
       />
     );
@@ -323,6 +324,7 @@ export const Menu = (props: MenuProps) => {
       <FloatingTree>
         <MenuComponent
           {...(props as AnyObject)}
+          className=""
           menuClassName={props.className}
         />
       </FloatingTree>

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" : "min-w-18",
-          "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer",
+          minimal ? "min-w-6 rounded" : "min-w-18 rounded-capped",
+          "flex items-center justify-center px-1 overflow-hidden cursor-pointer",
         )}
         onClick={() => !active && onClick?.(id)}
         ref={ref as AnyObject}

package/src/components/tabpanel/TabPanel.tsx

@@ -47,7 +47,7 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
    * tab variations
    */
-  variant?: "soft" | "solid" | "outline";
+  variant?: "soft" | "solid" | "outline" | "pills";
   /**
    * tab button flex to fill tabs
    */
@@ -64,6 +64,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab list className
    */
   headerClassName?: string;
+  /**
+   * active tab className
+   */
+  activeClassName?: string;
   /**
    * append element
    */
@@ -122,6 +126,7 @@ export const TabPanel = ({
   headerClassName,
   orientation = "top",
   activeTab,
+  activeClassName,
   justify,
   variant,
   tabFlex,
@@ -196,6 +201,7 @@ export const TabPanel = ({
           {tabs.map((node: AnyObject) =>
             cloneElement(node, {
               tabFlex: node.props.tabFlex ?? tabFlex,
+              activeClassName: node.props.activeClassName ?? activeClassName,
               onClick: handleClick,
               active: node.props.id === active,
             }),

package/src/types/icons.ts

@@ -417,7 +417,7 @@ export namespace CoreIcons {
   export const mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
   export const mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
   export const mediaContrast =
-    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+    "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";
   export const mediaEqs =
     "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
   export const mediaCaptionOff =
@@ -437,4 +437,13 @@ export namespace CoreIcons {
     "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";
   export const mediaCommentAdd =
     "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+
+  export const mediaLightness =
+    "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+  export const mediaColor =
+    "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+  export const mediaInvert =
+    "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+  export const mediaSaturate =
+    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 }