@react-fabric/core 1.0.0-beta.9 → 1.0.2

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

@@ -2,118 +2,146 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('@floating-ui/react');
+var react$1 = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
-var react$1 = require('react');
-var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('react-i18next');
-require('../../hooks/useEffectDebugger.js');
+var reactHotkeys = require('@tanstack/react-hotkeys');
+var react = require('react');
+var Kbd = require('../../typography/Kbd.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('../../hotkeys/HotKeyWrapper.js');
-var Tooltip = require('../../overlays/tooltip/Tooltip.js');
+var getBadgeProps = require('../../utils/getBadgeProps.js');
+var getIconProps = require('../../utils/getIconProps.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../icon/Icon.js');
-require('../../types/icons.js');
-var Menu_module = require('./Menu.module.css');
+var Tooltip = require('../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);
-  var tree = react.useFloatingTree();
-  var badgeProps = react$1.useMemo(function () {
-    return Badge.getBadgeProps(badge);
+    label = _ref.label,
+    childOpen = _ref.childOpen,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return minimal ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, _objectSpread(_objectSpread({
+    content: label,
+    placement: "right",
+    disabled: childOpen
+  }, rest), {}, {
+    children: children
+  })) : /*#__PURE__*/jsxRuntime.jsx(react.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 = react.useRef(null);
+  var tree = react$1.useFloatingTree();
+  var badgeProps = react.useMemo(function () {
+    return getBadgeProps.getBadgeProps(badge);
   }, [badge]);
-  var iconEl = react$1.useMemo(function () {
-    var _path;
+  react.useEffect(function () {
+    var _elRef$current;
+    if (tabIndex === 0) (_elRef$current = elRef.current) === null || _elRef$current === void 0 || _elRef$current.focus();
+  }, [tabIndex]);
+  var iconEl = react.useMemo(function () {
     var path = icon;
     if (minimal && !path) {
       path = utilities.iconToken(label);
     }
-    return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      className: classNames(Menu_module.menuIcon, minimal && Menu_module.minimal),
-      icon: (_path = path) !== null && _path !== void 0 ? _path : "",
-      bg: iconBg,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    });
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
-  var Wrapper = react$1.useCallback(function (_ref2) {
-    var children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-    return minimal ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, _objectSpread(_objectSpread({
-      content: label,
-      placement: "right",
-      disabled: childOpen
-    }, rest), {}, {
-      children: children
-    })) : /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
-      children: children
-    });
-  }, [minimal, label, childOpen]);
-  var menuLabel = react$1.useMemo(function () {
+    return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+      className: utilities.cn("fabric-menuIcon", !!minimal && "minimal")
+    }, getIconProps.getIconProps(path !== null && path !== void 0 ? path : "")));
+  }, [icon, minimal, label]);
+  var menuLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-nowrap text-start items-center",
       children: [iconEl, !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
         className: "flex-1 pe-4 py-[0.375em] truncate",
-        children: label
+        children: labelRender !== null && labelRender !== void 0 ? labelRender : label
       }), appendLabel && /*#__PURE__*/jsxRuntime.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: utilities.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__*/jsxRuntime.jsx(Badge.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
-        placement: minimal ? "end" : "",
-        className: classNames("me-1", badgeProps.className)
-      })), hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
-        keyCombo: hotKey
+        inline: !minimal,
+        placement: minimal ? "end" : undefined,
+        className: "mx-1"
+      })), hotKey && /*#__PURE__*/jsxRuntime.jsx(Kbd.Kbd, {
+        keys: hotKey
       }), !minimal && altIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.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]);
+  reactHotkeys.useHotkeySequence(hotKey ? [hotKey].flat() : utilities.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__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
+    childOpen: !!childOpen,
+    label: label,
+    minimal: !!minimal,
     children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-      ref: ref,
+      ref: utilities.mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
-      className: classNames(Menu_module.menuItem, className, active && Menu_module.active, minimal && Menu_module.minimal, disabled && Menu_module.disabled, "rounded-capped relative max-w-[50vw] my-0.5"),
+      className: utilities.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
     }))
   }));
-};
+}
 
 exports.MenuItem = MenuItem;

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

@@ -3,39 +3,62 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var Meter_module = require('./Meter.module.css');
+require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../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 = useEffectDebugger.useMemoDebugger(function () {
     return value / 16.67;
   }, [value], "Meter activeCount");
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(Meter_module.meter, className, "flex flex-nowrap items-center gap-[2px]")
-  }, aria), {}, {
+    className: utilities.cn("fabric-meter", className, color && "gradient", "flex flex-nowrap items-center gap-0.5"),
+    style: {
+      color: getColor.getColor(color)
+    }
+  }, props), {}, {
     children: [[0, 1, 2, 3, 4, 5].map(function (step) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Meter_module.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: utilities.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__*/jsxRuntime.jsx("label", {
-      className: "text-muted",
+    }), !hideLabel && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "fabric-meterLabel inline-block text-muted w-[4em] px-1",
       children: utilities.Format.percent(value / 100)
     })]
   }));
-};
+}
 
 exports.Meter = Meter;

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

@@ -0,0 +1,152 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var LoadingLine = require('../animations/LoadingLine.js');
+var Icon = require('../icon/Icon.js');
+var context = require('../../context/context.js');
+var Titlebar = require('../titlebar/Titlebar.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["icon", "className", "classNames", "title", "actions", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth", "closeOnEscape"];
+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), 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 Modal(_ref) {
+  var icon = _ref.icon,
+    className = _ref.className,
+    classNames = _ref.classNames,
+    title = _ref.title,
+    actions = _ref.actions,
+    onClose = _ref.onClose,
+    onBeforeClose = _ref.onBeforeClose,
+    children = _ref.children,
+    loading = _ref.loading,
+    root = _ref.root,
+    size = _ref.size,
+    hideMask = _ref.hideMask,
+    width = _ref.width,
+    height = _ref.height,
+    minHeight = _ref.minHeight,
+    minWidth = _ref.minWidth,
+    closeOnEscape = _ref.closeOnEscape,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var id = react.useId();
+  var _use = react.use(context.ModalContext),
+    activeModal = _use.activeModal,
+    registerModal = _use.registerModal,
+    removeModal = _use.removeModal;
+  var _useFloating = react$1.useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        if (id === activeModal) handleClose(null);
+      }
+    }),
+    refs = _useFloating.refs,
+    context$1 = _useFloating.context;
+  var dismiss = react$1.useDismiss(context$1, {
+    outsidePressEvent: "mousedown",
+    escapeKey: closeOnEscape,
+    enabled: id === activeModal
+  });
+  var role = react$1.useRole(context$1);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = react$1.useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClose = function handleClose(args) {
+    void Promise.resolve(onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose(args)).then(function (ret) {
+      if (ret !== false) {
+        if (refs.floating.current) refs.floating.current.dataset.show = "false";
+        setTimeout(function () {
+          onClose === null || onClose === void 0 || onClose(args);
+        }, 250);
+      }
+      if (ret === false) 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("[role='dialog']")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.focus();
+      }, 50);
+    });
+  };
+  react.useEffect(function () {
+    if (activeModal === id) {
+      var tmr = setTimeout(function () {
+        if (refs.floating.current) refs.floating.current.dataset.show = "true";
+      }, 50);
+      return function () {
+        clearTimeout(tmr);
+      };
+    }
+  }, [activeModal, id, refs.floating]);
+  react.useEffect(function () {
+    registerModal === null || registerModal === void 0 || registerModal(id, function () {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(null);
+    });
+    return function () {
+      removeModal === null || removeModal === void 0 || removeModal(id);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [id]);
+  return /*#__PURE__*/jsxRuntime.jsx(react.Activity, {
+    mode: id === activeModal ? "visible" : "hidden",
+    children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      root: root,
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
+        lockScroll: true,
+        style: {
+          zIndex: "var(--z-overlay-mask)",
+          position: "absolute",
+          overflow: "hidden"
+        },
+        className: utilities.cn("grid place-items-center p-16", !hideMask && "bg-tint-100/20 backdrop-blur-sm"),
+        children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+          context: context$1,
+          modal: true,
+          children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread(_objectSpread({
+            className: utilities.cn("fabric-modal", className, classNames === null || classNames === void 0 ? void 0 : classNames.root, "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-160", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+            style: {
+              width: width,
+              height: height,
+              minHeight: minHeight,
+              minWidth: minWidth
+            },
+            ref: function ref(el) {
+              return refs.setFloating(el);
+            }
+          }, getFloatingProps()), props), {}, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(Titlebar.Titlebar, {
+              title: title,
+              icon: icon,
+              actions: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "px-1 leading-none",
+                  children: actions
+                }), /*#__PURE__*/jsxRuntime.jsx("button", {
+                  className: "size-fit cursor-pointer leading-none outline-none",
+                  onClick: function onClick() {
+                    return handleClose(null);
+                  },
+                  children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                    "data-ref": "panelClose",
+                    className: utilities.cn("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
+                    icon: "icon-[mdi--close]"
+                  })
+                })]
+              }),
+              className: utilities.cn(classNames === null || classNames === void 0 ? void 0 : classNames.titlebar),
+              classNames: classNames
+            }), loading && /*#__PURE__*/jsxRuntime.jsx(LoadingLine.LoadingLine, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+              role: "dialog",
+              className: utilities.cn("fabric-modalBody", classNames === null || classNames === void 0 ? void 0 : classNames.body, "flex-1 grid overflow-hidden"),
+              children: children
+            })]
+          }))
+        })
+      })
+    })
+  });
+}
+
+exports.Modal = Modal;

package/dist/cjs/components/navigator/Navigator.js

@@ -2,55 +2,100 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
-var HotKey = require('../../hotkeys/HotKey.js');
-var icons = require('../../types/icons.js');
+var utilities = require('@react-fabric/utilities');
+var reactHotkeys = require('@tanstack/react-hotkeys');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "onNavigate", "color"];
+var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
 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 Navigator = function Navigator(_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; }
+var buttonClassName = "not-disabled:cursor-pointer not-disabled:hover:bg-tint-500/20 rounded leading-0 inline-block disabled:text-tint-500/50 disabled:cursor-not-allowed";
+
+/**
+ * A component that provides navigation controls for traversing through items.
+ * It includes previous and next buttons, and supports keyboard navigation.
+ *
+ * @example
+ * ```jsx
+ * <Navigator
+ *   className="my-navigator"
+ *   onNavigate={(dir) => console.log(`Navigate ${dir === -1 ? 'previous' : 'next'}`)}
+ *   color="blue"
+ *   length={10}
+ *   current={0}
+ * >
+ *   <span>Current Item: 1</span>
+ * </Navigator>
+ * ```
+ */
+function Navigator(_ref) {
   var className = _ref.className,
     onNavigate = _ref.onNavigate,
     color = _ref.color,
+    children = _ref.children,
+    length = _ref.length,
+    current = _ref.current,
+    disableKeyHandlers = _ref.disableKeyHandlers,
     aria = _objectWithoutProperties(_ref, _excluded);
+  var navPrev = function navPrev() {
+    return (utilities.isEmpty(current) || current !== 0) && onNavigate(-1);
+  };
+  var navNext = function navNext() {
+    return (utilities.isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(1);
+  };
+  reactHotkeys.useHotkeys([{
+    hotkey: "ArrowLeft",
+    callback: navPrev,
+    options: {
+      enabled: !disableKeyHandlers
+    }
+  }, {
+    hotkey: "ArrowRight",
+    callback: navNext,
+    options: {
+      enabled: !disableKeyHandlers
+    }
+  }]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, "inline-block leading-none")
+    "data-ref": "navigator",
+    className: utilities.cn(className, "inline-flex gap-1 items-center leading-none")
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
-      keyCombo: "left",
-      handler: function handler() {
-        return onNavigate(-1);
-      }
-    }), /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
-      keyCombo: "right",
-      handler: function handler() {
-        return onNavigate(1);
-      }
-    }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      rtlFlip: true,
-      color: color,
-      className: "text-[1em] p-1",
-      "aria-label": "previous",
-      "data-testid": "previous",
-      icon: icons.CoreIcons.chevronLeft,
+    children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+      type: "button",
+      className: buttonClassName,
+      disabled: !utilities.isEmpty(current) && current === 0,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(-1)];
-      }
-    }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      rtlFlip: true,
-      className: "text-[1em] p-1",
-      color: color,
-      "aria-label": "next",
-      "data-testid": "next",
-      icon: icons.CoreIcons.chevronRight,
+        return [e.stopPropagation(), navPrev()];
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        rtlFlip: true,
+        color: color,
+        className: "text-[1.25em] p-[0.125em]",
+        "aria-label": "previous",
+        "data-ref": "previous",
+        icon: "icon-[mdi--chevron-left]"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-[1em]",
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      type: "button",
+      className: buttonClassName,
+      disabled: !utilities.isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(1)];
-      }
+        return [e.stopPropagation(), navNext()];
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        rtlFlip: true,
+        className: "text-[1.25em] p-[0.125em]",
+        color: color,
+        "aria-label": "next",
+        "data-ref": "next",
+        icon: "icon-[mdi--chevron-right]"
+      })
     })]
   }));
-};
+}
 
 exports.Navigator = Navigator;