@react-fabric/core 1.0.0-beta.8 → 1.0.1

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

@@ -3,27 +3,32 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useFloatingParentNodeId, FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingOverlay, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
-import { mergeRefs } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useState, useRef, useEffect, useCallback, Children, cloneElement, Fragment } from 'react';
-import { CoreIcons } from '../../types/icons.js';
+import { useFloatingParentNodeId, useFloatingTree, FloatingTree, useFloatingNodeId, useFloating, autoUpdate, offset, flip, shift, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import { mergeRefs, cn } from '@react-fabric/utilities';
+import { useState, useRef, useEffect, Fragment, isValidElement, cloneElement } from 'react';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "ref"];
+var _excluded = ["children", "minimal", "className", "forDropdown", "onClick", "trigger", "ref", "onMouseUp", "onMouseDown", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
 
-var MenuComponent = function MenuComponent(_ref) {
-  var _refs$domReference$cu, _refs$domReference$cu2;
+function MenuComponent(_ref) {
+  var _refs$domReference$cu, _refs$domReference$cu2, _cloneChildren;
   var children = _ref.children,
     minimal = _ref.minimal,
-    menuClassName = _ref.menuClassName,
+    className = _ref.className,
+    forDropdown = _ref.forDropdown,
     onClick = _ref.onClick,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
+    onMouseUp = _ref.onMouseUp,
+    onMouseDown = _ref.onMouseDown,
+    style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -38,12 +43,13 @@ var MenuComponent = function MenuComponent(_ref) {
   var tree = useFloatingTree();
   var nodeId = useFloatingNodeId();
   var parentId = useFloatingParentNodeId();
-  var isNested = parentId !== null;
+  var isNested = parentId !== null && !forDropdown;
   var _useFloating = useFloating({
-      nodeId: nodeId,
+      nodeId: "menu-".concat(nodeId),
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
-        isNested && setIsOpen(open);
+        if (isNested) setIsOpen(open);
+        if (reason === "outside-press" && trigger === "click") tree === null || tree === void 0 || tree.events.emit("close");
       },
       placement: isNested ? "right-start" : "bottom-start",
       middleware: [offset({
@@ -56,6 +62,7 @@ var MenuComponent = function MenuComponent(_ref) {
     refs = _useFloating.refs,
     context = _useFloating.context;
   var hover = useHover(context, {
+    enabled: trigger === "hover",
     delay: {
       open: 75
     },
@@ -64,8 +71,9 @@ var MenuComponent = function MenuComponent(_ref) {
     })
   });
   var click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true
+    event: "mousedown",
+    toggle: trigger === "click" || !isNested,
+    ignoreMouse: trigger === "hover" && !isNested
   });
   var role = useRole(context, {
     role: "menu"
@@ -119,66 +127,91 @@ var MenuComponent = function MenuComponent(_ref) {
       });
     }
   }, [tree, isOpen, nodeId, parentId]);
-  var handleClick = useCallback(function (e) {
+  var handleClick = function handleClick(e) {
     var el = e.target;
     if (el.dataset.id) {
       onClick === null || onClick === void 0 || onClick(el.dataset.id);
     }
-  }, [onClick]);
+  };
   var Wrapper = isNested ? FloatingPortal : Fragment;
   var wrapperProps = isNested ? {
     root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined
   } : {};
   useEffect(function () {
-    setTimeout(function () {
-      var _refs$floating$curren;
-      return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[data-active=\"true\"]")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.scrollIntoView({
+    var tmr = setTimeout(function () {
+      var _elementsRef$current$, _refs$floating$curren;
+      (_elementsRef$current$ = elementsRef.current[0]) === null || _elementsRef$current$ === void 0 || _elementsRef$current$.focus();
+      (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[data-active=\"true\"]")) === null || _refs$floating$curren === void 0 || _refs$floating$curren.scrollIntoView({
         block: "nearest"
       });
     }, 100);
-  }, [isOpen]);
+    return function () {
+      clearTimeout(tmr);
+    };
+  }, [isOpen, refs.floating]);
+  useEffect(function () {
+    if ((!isNested || isOpen) && activeIndex) {
+      var tmr = setTimeout(function () {
+        var _elementsRef$current$2;
+        (_elementsRef$current$2 = elementsRef.current[activeIndex]) === null || _elementsRef$current$2 === void 0 || _elementsRef$current$2.scrollIntoView({
+          block: "nearest"
+        });
+      }, 100);
+      return function () {
+        clearTimeout(tmr);
+      };
+    }
+  }, [isOpen, activeIndex, isNested]);
   return /*#__PURE__*/jsxs(FloatingNode, {
     id: nodeId,
     children: [isNested && /*#__PURE__*/jsx(MenuItem, _objectSpread(_objectSpread({}, getReferenceProps(_objectSpread(_objectSpread({}, rest), {}, {
       id: undefined,
+      // @ts-expect-error ignore
       "data-dropdown-dismiss": false,
       onClick: function onClick(e) {
         e.stopPropagation();
         return false;
       }
     }))), {}, {
-      "data-open": isOpen,
+      "data-open": isOpen
+      // @ts-expect-error ignore
+      ,
       minimal: minimal,
-      altIcon: CoreIcons.chevronRight,
-      ref: mergeRefs(refs.setReference, ref)
+      altIcon: "icon-[mdi--menu-right]",
+      ref: mergeRefs(refs.reference, ref)
     })), /*#__PURE__*/jsx(FloatingList, {
       elementsRef: elementsRef,
       labelsRef: labelsRef,
       children: (!isNested || isOpen) && /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
         children: [isNested && /*#__PURE__*/jsx(FloatingOverlay, {}), /*#__PURE__*/jsx(FloatingFocusManager, {
           context: context,
-          modal: !isNested,
+          closeOnFocusOut: true,
           initialFocus: isNested ? -1 : 0,
           returnFocus: !isNested,
           children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-            className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
-            autoFocus: true,
-            ref: mergeRefs(isNested ? refs.setFloating : ref)
+            className: cn(className, "flex flex-col p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-[60vh] overflow-auto scroll-thin z-(--z-popover)"),
+            ref: mergeRefs(isNested ? refs.floating : ref)
           }, getFloatingProps({
-            onClick: isNested ? undefined : handleClick
+            onClick: isNested ? undefined : handleClick,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            onMouseDown: onMouseDown,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            onMouseUp: onMouseUp
           })), {}, {
-            style: !isNested ? rest.style : floatingStyles,
-            children: Children.map(children, function (child, index) {
-              if (child) {
-                labelsRef.current[index] = child.props.label;
-                return /*#__PURE__*/cloneElement(child, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
+            style: !isNested ? style : floatingStyles,
+            children: (_cloneChildren = cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child, index) {
+              if (/*#__PURE__*/isValidElement(child)) {
+                var childEl = child;
+                labelsRef.current[index] = childEl.props.label;
+                return /*#__PURE__*/cloneElement(childEl, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
+                  // @ts-expect-error ignore
                   minimal: !isNested && minimal,
                   "data-focus": activeIndex === index,
                   ref: function ref(el) {
                     return elementsRef.current[index] = el;
                   }
                 }, getItemProps({
-                  onClick: child.props.onClick,
+                  onClick: childEl.props.onClick,
                   tabIndex: activeIndex === index ? 0 : -1
                 })) : {});
               }
@@ -188,17 +221,44 @@ var MenuComponent = function MenuComponent(_ref) {
       }))
     })]
   });
-};
-var Menu = function Menu(props) {
+}
+
+/**
+ * A component that displays a menu with items, supports nested menus and various interactions.
+ * It can be triggered by hover or click events, and allows for custom styling and behavior.
+ * This component is designed to be used within a Floating UI context, allowing for dynamic positioning and interaction handling.
+ * It can be nested within other menus to create complex menu structures.
+ *
+ * @example
+ * ```jsx
+ * <Menu
+ *   className="my-menu"
+ *   trigger="click"
+ *   onClick={(id) => console.log(`Clicked item with id: ${id}`)}
+ * >
+ *   <MenuItem id="item1" label="Item 1" />
+ *   <MenuItem id="item2" label="Item 2" />
+ *   <MenuItem id="item3" label="Item 3">
+ *     <Menu>
+ *       <MenuItem id="subitem1" label="Sub Item 1" />
+ *       <MenuItem id="subitem2" label="Sub Item 2" />
+ *     </Menu>
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ */
+function Menu(props) {
   var parentId = useFloatingParentNodeId();
+  var tree = useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsx(MenuComponent, _objectSpread({}, props));
+  }
   if (parentId === null) {
     return /*#__PURE__*/jsx(FloatingTree, {
-      children: /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
-        menuClassName: props.className
-      }))
+      children: /*#__PURE__*/jsx(MenuComponent, _objectSpread({}, props))
     });
   }
   return /*#__PURE__*/jsx(MenuComponent, _objectSpread({}, props));
-};
+}
 
 export { Menu };

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

@@ -3,117 +3,145 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloatingTree } from '@floating-ui/react';
-import { iconToken } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useMemo, useCallback, Fragment } from 'react';
-import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-i18next';
-import '../../hooks/useEffectDebugger.js';
+import { iconToken, cn, EMPTY_ARRAY, mergeRefs } from '@react-fabric/utilities';
+import { useHotkeySequence } from '@tanstack/react-hotkeys';
+import { useRef, useMemo, useEffect, Fragment } from 'react';
+import { Kbd } from '../../typography/Kbd.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '../../hotkeys/HotKeyWrapper.js';
-import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
-import { getBadgeProps, Badge } from '../badge/Badge.js';
+import { getBadgeProps } from '../../utils/getBadgeProps.js';
+import { getIconProps } from '../../utils/getIconProps.js';
+import { Badge } from '../badge/Badge.js';
 import { Icon } from '../icon/Icon.js';
-import '../../types/icons.js';
-import classes from './Menu.module.css';
+import { Tooltip } from '../tooltip/Tooltip.js';
 
-var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
-  _excluded2 = ["children"];
+var _excluded = ["children", "minimal", "label", "childOpen"],
+  _excluded2 = ["as", "label", "color", "className", "icon", "labelRender", "appendLabel", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "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; }
-var MenuItem = function MenuItem(_ref) {
-  var as = _ref.as,
-    label = _ref.label,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
-    className = _ref.className,
-    icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    appendLabel = _ref.appendLabel,
-    rtlFlip = _ref.rtlFlip,
-    altIcon = _ref.altIcon,
-    id = _ref.id,
-    active = _ref.active,
-    disabled = _ref.disabled,
-    _onClick = _ref.onClick,
-    badge = _ref.badge,
-    hotKey = _ref.hotKey,
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Wrapper(_ref) {
+  var children = _ref.children,
     minimal = _ref.minimal,
-    childOpen = _ref["data-open"],
-    ref = _ref.ref,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    label = _ref.label,
+    childOpen = _ref.childOpen,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return minimal ? /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({
+    content: label,
+    placement: "right",
+    disabled: childOpen
+  }, rest), {}, {
+    children: children
+  })) : /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+}
+
+/**
+ * A menu item component that can be used in a dropdown or menu.
+ * It supports various features such as icons, badges, hotkeys, and more.
+ * It can be customized with different colors, icons, and behaviors.
+ *
+ * @example
+ * ```jsx
+ * <MenuItem
+ *   label="Settings"
+ *   icon="settings"
+ *   onClick={() => console.log("Settings clicked")}
+ *   hotKey="Ctrl+S"
+ *   badge={{ count: 3, color: "red" }}
+ * />
+ * ```
+ */
+function MenuItem(_ref2) {
+  var as = _ref2.as,
+    label = _ref2.label,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? "primary" : _ref2$color,
+    className = _ref2.className,
+    icon = _ref2.icon,
+    labelRender = _ref2.labelRender,
+    appendLabel = _ref2.appendLabel,
+    altIcon = _ref2.altIcon,
+    id = _ref2.id,
+    active = _ref2.active,
+    disabled = _ref2.disabled,
+    _onClick = _ref2.onClick,
+    badge = _ref2.badge,
+    hotKey = _ref2.hotKey,
+    _ref2$tabIndex = _ref2.tabIndex,
+    tabIndex = _ref2$tabIndex === void 0 ? -1 : _ref2$tabIndex,
+    _ref2$minimal = _ref2.minimal,
+    minimal = _ref2$minimal === void 0 ? false : _ref2$minimal,
+    childOpen = _ref2["data-open"],
+    ref = _ref2.ref,
+    aria = _objectWithoutProperties(_ref2, _excluded2);
+  var elRef = useRef(null);
   var tree = useFloatingTree();
   var badgeProps = useMemo(function () {
     return getBadgeProps(badge);
   }, [badge]);
+  useEffect(function () {
+    var _elRef$current;
+    if (tabIndex === 0) (_elRef$current = elRef.current) === null || _elRef$current === void 0 || _elRef$current.focus();
+  }, [tabIndex]);
   var iconEl = useMemo(function () {
-    var _path;
     var path = icon;
     if (minimal && !path) {
       path = iconToken(label);
     }
-    return /*#__PURE__*/jsx(Icon, {
-      className: classNames(classes.menuIcon, minimal && classes.minimal),
-      icon: (_path = path) !== null && _path !== void 0 ? _path : "",
-      bg: iconBg,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    });
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
-  var Wrapper = useCallback(function (_ref2) {
-    var children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-    return minimal ? /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({
-      content: label,
-      placement: "right",
-      disabled: childOpen
-    }, rest), {}, {
-      children: children
-    })) : /*#__PURE__*/jsx(Fragment, {
-      children: children
-    });
-  }, [minimal, label, childOpen]);
+    return /*#__PURE__*/jsx(Icon, _objectSpread({
+      className: cn("fabric-menuIcon", !!minimal && "minimal")
+    }, getIconProps(path !== null && path !== void 0 ? path : "")));
+  }, [icon, minimal, label]);
   var menuLabel = useMemo(function () {
     return /*#__PURE__*/jsxs("div", {
       className: "flex flex-nowrap text-start items-center",
       children: [iconEl, !minimal && /*#__PURE__*/jsx("label", {
         className: "flex-1 pe-4 py-[0.375em] truncate",
-        children: label
+        children: labelRender !== null && labelRender !== void 0 ? labelRender : label
       }), appendLabel && /*#__PURE__*/jsx("span", {
-        className: classNames("font-bold whitespace-nowrap text-center leading-none mx-1", minimal && "absolute inset-x-0 bottom-0 overflow-clip", minimal ? "text-[0.5rem]" : "text-[0.625rem]", active ? "text-white/50" : "text-tint-600/50"),
+        className: cn("font-bold whitespace-nowrap text-center leading-none mx-1", !!minimal && "absolute inset-x-0 bottom-0 overflow-clip", minimal ? "text-[0.5rem]" : "text-[0.625rem]", active ? "text-white/50" : "text-tint-600/50"),
         children: appendLabel
       }), badge && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
-        placement: minimal ? "end" : "",
-        className: classNames("me-1", badgeProps.className)
-      })), hotKey && /*#__PURE__*/jsx(HotKeyLabel, {
-        keyCombo: hotKey
+        inline: !minimal,
+        placement: minimal ? "end" : undefined,
+        className: "mx-1"
+      })), hotKey && /*#__PURE__*/jsx(Kbd, {
+        keys: hotKey
       }), !minimal && altIcon && /*#__PURE__*/jsx(Icon, {
         className: "text-muted px-1",
         icon: altIcon,
         rtlFlip: true
       })]
     });
-  }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
+  }, [iconEl, minimal, labelRender, label, appendLabel, active, badge, badgeProps, hotKey, altIcon]);
+  useHotkeySequence(hotKey ? [hotKey].flat() : EMPTY_ARRAY, function () {
+    var _elRef$current2, _elRef$current2$click;
+    void ((_elRef$current2 = elRef.current) === null || _elRef$current2 === void 0 || (_elRef$current2$click = _elRef$current2.click) === null || _elRef$current2$click === void 0 ? void 0 : _elRef$current2$click.call(_elRef$current2));
+  }, {
+    enabled: !disabled
+  });
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
+    childOpen: !!childOpen,
+    label: label,
+    minimal: !!minimal,
     children: /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-      ref: ref,
+      ref: mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
-      className: classNames(classes.menuItem, className, active && classes.active, minimal && classes.minimal, disabled && classes.disabled, "rounded-capped relative max-w-[50vw] my-0.5"),
+      className: cn("fabric-menuItem cursor-pointer outline-none", className, active && "active", !!minimal && "minimal", disabled && "disabled", "rounded relative max-w-[50vw]"),
       "data-active": active,
-      "data-open": childOpen,
+      "data-open": !!childOpen,
       disabled: disabled,
       "data-id": id,
+      tabIndex: tabIndex,
       onClick: function onClick(e) {
-        (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
+        if ((_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false) tree === null || tree === void 0 || tree.events.emit("click");
       }
     }, minimal ? {} : aria), {}, {
       children: menuLabel
     }))
   }));
-};
+}
 
 export { MenuItem };

package/dist/esm/components/meter/Meter.js

@@ -2,40 +2,63 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Format } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { cn, Format } from '@react-fabric/utilities';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import classes from './Meter.module.css';
+import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["value", "hideLabel", "className"];
+var _excluded = ["value", "hideLabel", "color", "className"];
 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 Meter = function Meter(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * A component that displays a visual representation of a value as a series of dots.
+ * It is useful for showing progress or completion status in a compact form.
+ * The meter consists of 6 dots, each representing approximately 16.67% of the total value.
+ * The active dots are filled based on the value provided, and the remaining dots are empty.
+ * The component can also display a label showing the percentage value.
+ *
+ * @example
+ * ```jsx
+ * <Meter value={75} />
+ * // Renders a meter with 4 active dots and a label showing "75%"
+ *
+ * <Meter value={50} hideLabel />
+ * // Renders a meter with 3 active dots and no label
+ *
+ * <Meter value={100} className="custom-meter" />
+ * // Renders a meter with all 6 active dots and a custom class name
+ * ```
+ */
+function Meter(_ref) {
   var value = _ref.value,
     hideLabel = _ref.hideLabel,
+    color = _ref.color,
     className = _ref.className,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   /** ***************** calculate active meter dots *******************/
   var activeCount = useMemoDebugger(function () {
     return value / 16.67;
   }, [value], "Meter activeCount");
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(classes.meter, className, "flex flex-nowrap items-center gap-[2px]")
-  }, aria), {}, {
+    className: cn("fabric-meter", className, color && "gradient", "flex flex-nowrap items-center gap-0.5"),
+    style: {
+      color: getColor(color)
+    }
+  }, props), {}, {
     children: [[0, 1, 2, 3, 4, 5].map(function (step) {
       return /*#__PURE__*/jsx("div", {
-        className: classNames(classes.meterBar, "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0"),
+        className: cn("fabric-meterBar", "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0"),
         "data-active": activeCount >= step,
         style: {
           "--width": "".concat(Math.min((activeCount - step) * 100, 100), "%")
         }
       }, step);
-    }), !hideLabel && /*#__PURE__*/jsx("label", {
-      className: "text-muted",
+    }), !hideLabel && /*#__PURE__*/jsx("span", {
+      className: "fabric-meterLabel inline-block text-muted w-[4em] px-1",
       children: Format.percent(value / 100)
     })]
   }));
-};
+}
 
 export { Meter };