@react-fabric/core 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/esm/components/callout/Callout.js

@@ -4,10 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { CoreIcons } from '../../types/icons.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getBgClass, getColorClass, getBorderClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "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; }

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

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import { useMemo, Children } from 'react';
 import { ErrorBoundary } from '../../core/boundary/ErrorBoundary.js';
 import { Header, Footer } from '../../core/headfoot/HeadFoot.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import classes from './Card.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData", "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; }

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

@@ -5,11 +5,11 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemo, Children } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { Image, Video } from '../media/Media.js';
 import classes from './Card.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "children", "height", "justify", "colorScheme"];
 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; }

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

@@ -5,11 +5,11 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
 import classes from './Chip.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "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; }

package/dist/esm/components/divider/Divider.js

@@ -2,10 +2,10 @@
 
 import classNames from 'classnames';
 import { useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getBorderClass, getBgClass, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Divider.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 /*
  * React Fabric

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

@@ -5,9 +5,9 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { isSvgPath, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
 import classes from './Icon.module.css';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "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; }

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

@@ -4,10 +4,12 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloatingParentNodeId, useFloatingTree, FloatingTree, 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, cloneChildren } from '@react-fabric/utilities';
+import { mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useState, useRef, useEffect, useCallback, cloneElement, Fragment } from 'react';
+import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -165,33 +167,35 @@ var MenuComponent = function MenuComponent(_ref) {
       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,
-          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)
-          }, getFloatingProps({
-            onClick: isNested ? undefined : handleClick
-          })), {}, {
-            style: !isNested ? rest.style : floatingStyles,
-            children: cloneChildren(children, function (child, index) {
-              labelsRef.current[index] = child.props.label;
-              return /*#__PURE__*/cloneElement(child, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
-                minimal: !isNested && minimal,
-                "data-focus": activeIndex === index,
-                ref: function ref(el) {
-                  return elementsRef.current[index] = el;
-                }
-              }, getItemProps({
-                onClick: child.props.onClick,
-                tabIndex: activeIndex === index ? 0 : -1
-              })) : {});
-            })
-          }))
+        children: [isNested && /*#__PURE__*/jsx(FloatingOverlay, {}), /*#__PURE__*/jsx(HotKeyWrapper, {
+          children: /*#__PURE__*/jsx(FloatingFocusManager, {
+            context: context,
+            modal: !isNested,
+            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)
+            }, getFloatingProps({
+              onClick: isNested ? undefined : handleClick
+            })), {}, {
+              style: !isNested ? rest.style : floatingStyles,
+              children: cloneChildren(children, function (child, index) {
+                labelsRef.current[index] = child.props.label;
+                return /*#__PURE__*/cloneElement(child, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
+                  minimal: !isNested && minimal,
+                  "data-focus": activeIndex === index,
+                  ref: function ref(el) {
+                    return elementsRef.current[index] = el;
+                  }
+                }, getItemProps({
+                  onClick: child.props.onClick,
+                  tabIndex: activeIndex === index ? 0 : -1
+                })) : {});
+              })
+            }))
+          })
         })]
       }))
     })]

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

@@ -3,19 +3,20 @@
 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 { iconToken, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, useCallback, Fragment } from 'react';
+import { useRef, useMemo, useCallback, Fragment } from 'react';
+import { HotKey } from '../../hotkeys/HotKey.js';
 import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-i18next';
 import '../../hooks/useEffectDebugger.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 { Icon } from '../icon/Icon.js';
 import '../../types/icons.js';
+import '../../hotkeys/HotKeyWrapper.js';
 import classes from './Menu.module.css';
 
 var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
@@ -44,6 +45,7 @@ var MenuItem = function MenuItem(_ref) {
     childOpen = _ref["data-open"],
     ref = _ref.ref,
     aria = _objectWithoutProperties(_ref, _excluded);
+  var elRef = useRef(null);
   var tree = useFloatingTree();
   var badgeProps = useMemo(function () {
     return getBadgeProps(badge);
@@ -98,8 +100,8 @@ var MenuItem = function MenuItem(_ref) {
   }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
-    children: /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-      ref: ref,
+    children: /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
+      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"),
@@ -111,7 +113,13 @@ var MenuItem = function MenuItem(_ref) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
     }, minimal ? {} : aria), {}, {
-      children: menuLabel
+      children: [hotKey && /*#__PURE__*/jsx(HotKey, {
+        keyCombo: hotKey,
+        handler: function handler() {
+          var _elRef$current, _elRef$current$click;
+          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+        }
+      }), menuLabel]
     }))
   }));
 };

package/dist/esm/components/progress/ProgressBar.js

@@ -4,9 +4,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColorClass } from '../../utils/getColor.js';
 import classes from './Progress.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 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; }

package/dist/esm/components/progress/ProgressCircle.js

@@ -3,8 +3,9 @@
 import { Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColorClass } from '../../utils/getColor.js';
+import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColorClass } from '../../utils/getColor.js';
 
 /*
  * React Fabric

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

@@ -3,11 +3,11 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import { useState, useMemo, Children, useEffect, useCallback, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { Tab } from './Tab.js';
 import classes from './TabPanel.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 // TODO: implement append/prepend tab-bar items
 

package/dist/esm/core/headfoot/HeadFoot.js

@@ -4,10 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './HeadFoot.module.css';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["as", "children", "className", "bg", "color", "flex", "area", "dir", "align", "justify"];
 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; }

package/dist/esm/index.js

@@ -51,6 +51,7 @@ import 'react';
 import 'react-i18next';
 export { CoreIcons } from './types/icons.js';
 export { Title } from './typography/Title.js';
+export { cloneChildren } from './utils/cloneElement.js';
 import '@react-fabric/utilities';
 import 'react/jsx-runtime';
 export { Flyout } from './overlays/flyout/Flyout.js';
@@ -73,4 +74,5 @@ export { useResizeObserver } from './hooks/useResizeObserver.js';
 export { useLocalStorage, useSessionStorage } from './hooks/useStorage.js';
 export { HotKey } from './hotkeys/HotKey.js';
 export { HotKeyLabel } from './hotkeys/HotKeyLabel.js';
+export { HotKeyWrapper } from './hotkeys/HotKeyWrapper.js';
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService } from './context/Global.js';

package/dist/esm/overlays/alert/Alert.js

@@ -11,10 +11,10 @@ import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { CoreIcons } from '../../types/icons.js';
 import { Title } from '../../typography/Title.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColorClass, getBorderClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Alert.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 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; }

package/dist/esm/overlays/message/Message.js

@@ -3,10 +3,10 @@
 import classNames from 'classnames';
 import { useRef, useCallback, useLayoutEffect } from 'react';
 import { Icon } from '../../components/icon/Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getBgClass, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Message.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
  * React Fabric

package/dist/esm/overlays/toast/Toast.js

@@ -7,10 +7,10 @@ import { AnimationIndicator } from '../../components/animations/Animations.js';
 import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { CoreIcons } from '../../types/icons.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColorClass, getBorderClass, getBgClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Toast.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 /*
  * React Fabric

package/dist/esm/overlays/tooltip/Tooltip.js

@@ -118,7 +118,7 @@ var Tooltip = function Tooltip(_ref) {
         style: floatingStyles
       }, getFloatingProps()), {}, {
         children: [/*#__PURE__*/jsx("span", {
-          className: classNames("font-medium text-dimmed flex-1", isString(content) && "whitespace-pre-wrap mixed-lang"),
+          className: classNames("font-medium text-dimmed flex-1 break-all", isString(content) && "whitespace-pre-wrap mixed-lang"),
           children: content
         }), copyEl, /*#__PURE__*/jsx(FloatingArrow, {
           ref: arrowRef,

package/dist/esm/typography/Abbr.js

@@ -7,9 +7,9 @@ import classNames from 'classnames';
 import { useCallback, Fragment, useMemo } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { Tooltip, getTooltipProps } from '../overlays/tooltip/Tooltip.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColorClass, getColor } from '../utils/getColor.js';
 import classes from './Typography.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 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; }

package/dist/esm/typography/Anchor.js

@@ -4,10 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TextSizeMap } from './types.js';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "as", "children", "className", "bg", "color", "family", "size"];
 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; }

package/dist/esm/typography/Mark.js

@@ -6,9 +6,9 @@ import { isString, isEmpty, tokenize } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, Fragment } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getBgClass, getColor } from '../utils/getColor.js';
 import classes from './Typography.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 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; }

package/dist/esm/typography/Text.js

@@ -10,10 +10,10 @@ import { useTranslation } from 'react-i18next';
 import { useLayoutEffectDebugger, useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../hooks/usePropToggle.js';
 import { calculateTextHeight } from '../utils/calculateDimensions.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
 import classes from './Typography.module.css';
 import { TextSizeMap } from './types.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "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; }

package/dist/esm/typography/Title.js

@@ -4,11 +4,12 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TitleSizeMap } from './types.js';
 import classes from './Typography.module.css';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
 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; }

package/dist/esm/utils/cloneElement.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { Children, isValidElement } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var cloneChildren = function cloneChildren(children, callback) {
+  var _Children$map;
+  return (_Children$map = Children.map(children, function (c) {
+    if ( /*#__PURE__*/isValidElement(c)) {
+      if (c.type === Fragment) {
+        var _c$props;
+        // just compare to `Fragment`
+        return cloneChildren((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
+};
+
+export { cloneChildren };

package/dist/types/index.d.ts

@@ -15,6 +15,8 @@ export * from "./hooks/useResizeObserver";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
+export { cloneChildren } from "./utils";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/dist/types/utils/cloneElement.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from "react";
+export declare const cloneChildren: (children: ReactNode, callback: (child: ReactNode, index: number) => ReactNode) => ReactNode;

package/dist/types/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.24",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.22",
+    "@react-fabric/utilities": "^1.0.0-beta.24",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "71904746bcfbbb6b4ee39c5fc7a00c8f4a18a052"
+  "gitHead": "ccdec75c17dcc549e7a0cad3fd1fda2001c5f990"
 }

package/src/components/button/ButtonGroup.tsx

@@ -21,7 +21,6 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { cloneChildren } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement } from "react";
 import {
@@ -33,6 +32,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
+import { cloneChildren } from "../../utils";
 import { type Button } from "./Button";
 import classes from "./Button.module.css";
 

package/src/components/button/ToggleButtonGroup.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { cloneChildren, EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
+import { EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement, useCallback, useMemo } from "react";
 import { useControlledValue } from "../../hooks/useControlledValue";
@@ -32,6 +32,7 @@ import {
   type CssProp,
   type SizeType,
 } from "../../types";
+import { cloneChildren } from "../../utils";
 import { type ButtonProps } from "./Button";
 import classes from "./Button.module.css";