@react-fabric/core 1.0.0-beta.60 → 1.0.0-beta.62

package/dist/esm/core/aside/Aside.js

@@ -4,12 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { useLayoutEffectDebugger } from '../../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../../hooks/usePropToggle.js';
 import { useResize } from '../../hooks/useResize.js';
-import { CoreIcons } from '../../types/icons.js';
 import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -27,7 +26,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```jsx
  * <Aside
  *   title="Sidebar Title"
- *   icon={CoreIcons.menu}
+ *   icon=icon-[mdi--menu]
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -151,7 +150,7 @@ var Aside = function Aside(_ref) {
       }), collapsable && /*#__PURE__*/jsx(Icon, {
         "aria-label": isCollapsed ? "expand" : "collapse",
         className: classNames("fabric-asideCollapse", "p-2 select-none"),
-        icon: CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         rtlFlip: true,
         onClick: toggleCollapse,
         "data-ref": "asideToggle"
@@ -161,7 +160,7 @@ var Aside = function Aside(_ref) {
         className: "fabric-asideActions",
         children: actions
       })]
-    }), loading && /*#__PURE__*/jsx(Loading, {}), isCollapsed && /*#__PURE__*/jsx("div", {
+    }), loading && /*#__PURE__*/jsx(LoadingLine, {}), isCollapsed && /*#__PURE__*/jsx("div", {
       role: "none",
       onClick: tryPeek,
       "data-ref": "asidePlaceholder",

package/dist/esm/core/page/Page.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -60,7 +60,7 @@ var Page = function Page(_ref) {
       children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         size: "1.25em"
       }, getIconProps(icon))), title]
-    }), loading && /*#__PURE__*/jsx(Loading, {}), children]
+    }), loading && /*#__PURE__*/jsx(LoadingLine, {}), children]
   }));
 };
 

package/dist/esm/core/theme/ThemeProvider.js

@@ -59,7 +59,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     accentColor = _ref.accentColor,
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
-    rounding = _ref.rounding;
+    rounding = _ref.rounding,
+    className = _ref.className;
   var _useApplicationContex = useApplicationContext(),
     currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = useMemo(function () {
@@ -88,7 +89,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
     style: styles,
     "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
-    className: classNames("fabric-themeProvider", "contents theme-base", branding),
+    className: classNames("fabric-themeProvider", "contents theme-base", branding, className),
     children: children
   });
 };

package/dist/esm/hooks/useNavigator.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { jsxs } from 'react/jsx-runtime';
 
 var useNavigator = function useNavigator() {
@@ -11,15 +11,16 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
-  var refCurrent = useRef(defaultIndex);
   var onNavigate = useCallback(function (dir) {
-    if (dir === -1) {
-      refCurrent.current = refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
-    }
-    if (dir === 1) {
-      refCurrent.current = refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
-    }
-    setCurrentIndex(refCurrent.current);
+    setCurrentIndex(function (prevValue) {
+      if (dir === -1) {
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
+      }
+      if (dir === 1) {
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
+      }
+      return prevValue;
+    });
   }, [totalCount]);
   var headLabel = useMemo(function () {
     return /*#__PURE__*/jsxs("span", {

package/dist/esm/hooks/useOverlayService.js

@@ -5,12 +5,19 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["onClose"];
 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; }
+// return the blank function since state functionality will execute if the value is function
+var EMPTY_FC = function EMPTY_FC() {
+  return function () {
+    return null;
+  };
+};
+
 /**
  * Hook to manage overlay components like modals or flyouts.
  * It provides a way to open an overlay with specified properties and handle its closure.
@@ -21,7 +28,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
  *
  * @param ModalOrFlyout - The component to be used as an overlay.
- * @returns An array containing the current overlay and a function to open it.
+ * @param toggleOpen - If true, calling `openOverlay` while an overlay is already open will close the existing one instead of opening a new one.
+ * @returns An array containing the current overlay, a function to open it, and a boolean indicating if the overlay is open.
  *
  * @example
  * ```jsx
@@ -36,34 +44,47 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```
  */
 var useOverlayService = function useOverlayService(ModalOrFlyout) {
-  var _useState = useState(null),
+  var _useState = useState(EMPTY_FC),
     _useState2 = _slicedToArray(_useState, 2),
     Overlay = _useState2[0],
     setOverlay = _useState2[1];
+  var existingOpenPromise = useRef(null);
   var openOverlay = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _ref2,
         onClose,
-        props,
+        outerProps,
         _args = arguments;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, props = _objectWithoutProperties(_ref2, _excluded);
-            _context.next = 3;
+            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, outerProps = _objectWithoutProperties(_ref2, _excluded);
+            if (!existingOpenPromise.current) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            _context.next = 5;
             return new Promise(function (resolve) {
-              var handleClose = function handleClose(args) {
-                setOverlay(null);
+              existingOpenPromise.current = function (args) {
+                setOverlay(EMPTY_FC);
                 resolve(args);
                 onClose === null || onClose === void 0 || onClose(args);
+                existingOpenPromise.current = null;
               };
-              setOverlay( /*#__PURE__*/jsx(ModalOrFlyout, _objectSpread(_objectSpread({}, props), {}, {
-                onClose: handleClose
-              })));
+              // eslint-disable-next-line react/display-name
+              setOverlay(function () {
+                return function (overrideProps) {
+                  return /*#__PURE__*/jsx(ModalOrFlyout, _objectSpread(_objectSpread(_objectSpread({}, outerProps), overrideProps), {}, {
+                    onClose: existingOpenPromise.current
+                  }));
+                };
+              });
             });
-          case 3:
+          case 5:
             return _context.abrupt("return", _context.sent);
-          case 4:
+          case 6:
           case "end":
             return _context.stop();
         }
@@ -73,7 +94,7 @@ var useOverlayService = function useOverlayService(ModalOrFlyout) {
       return _ref.apply(this, arguments);
     };
   }();
-  return [Overlay, openOverlay];
+  return [Overlay, openOverlay, existingOpenPromise.current];
 };
 
 export { useOverlayService };

package/dist/esm/hooks/useStepper.js

@@ -13,7 +13,6 @@ import { Icon } from '../components/icon/Icon.js';
 import '@floating-ui/react';
 import '../hotkeys/HotKeyWrapper.js';
 import 'react-i18next';
-import '../types/icons.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import i18next from 'i18next';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/core.json.js';
+import en from './en/core.json.js';
 
 /*
  * React Fabric

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 export { ActionLabel } from './components/actionLabel/ActionLabel.js';
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton } from './components/animations/Animations.js';
+export { AnimationIndicator, AnimationLoader, LoadingBars, LoadingLine, LoadingSpinner, Skeleton } from './components/animations/Animations.js';
 export { Avatar } from './components/avatar/Avatar.js';
 export { AvatarGroup } from './components/avatar/AvatarGroup.js';
 export { Badge, getBadgeProps } from './components/badge/Badge.js';
@@ -50,7 +50,6 @@ import '@floating-ui/react';
 import 'classnames';
 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';

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

@@ -9,7 +9,6 @@ import { useTranslation } from 'react-i18next';
 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 { Title } from '../../typography/Title.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
@@ -180,7 +179,7 @@ var Alert = function Alert(_ref) {
               onClick: function onClick() {
                 return handleClose(false);
               },
-              icon: CoreIcons.close,
+              icon: "icon-[mdi--close]",
               "aria-label": "close"
             })
           })]

package/dist/esm/overlays/flyout/Flyout.js

@@ -6,11 +6,10 @@ import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, Floa
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, useEffect, isValidElement } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
-import { CoreIcons } from '../../types/icons.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["icon", "iconClassName", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
@@ -116,12 +115,12 @@ var Flyout = function Flyout(_ref) {
             }), actions, /*#__PURE__*/jsx(Icon, {
               "data-ref": "panelClose",
               className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
-              icon: CoreIcons.close,
+              icon: "icon-[mdi--close]",
               onClick: function onClick() {
                 return handleClose(false);
               }
             })]
-          }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+          }), loading && /*#__PURE__*/jsx(LoadingLine, {}), /*#__PURE__*/jsx("div", {
             role: "dialog",
             className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
             tabIndex: 0,

package/dist/esm/overlays/modal/Modal.js

@@ -6,11 +6,10 @@ import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, Floa
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, useEffect, isValidElement } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
-import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["icon", "iconClassName", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
@@ -108,12 +107,12 @@ var Modal = function Modal(_ref) {
               }), actions, /*#__PURE__*/jsx(Icon, {
                 "data-ref": "panelClose",
                 className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
-                icon: CoreIcons.close,
+                icon: "icon-[mdi--close]",
                 onClick: function onClick() {
                   return handleClose(false);
                 }
               })]
-            }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+            }), loading && /*#__PURE__*/jsx(LoadingLine, {}), /*#__PURE__*/jsx("div", {
               role: "dialog",
               className: classNames("fabric-modalBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,

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

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 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 { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
@@ -122,7 +121,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: CoreIcons.closeAll,
+            icon: "icon-[mdi--close-box-multiple-outline]",
             "aria-label": "close-all",
             onClick: onCloseAll
           }), /*#__PURE__*/jsx(Button, {
@@ -130,7 +129,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: CoreIcons.close,
+            icon: "icon-[mdi--close]",
             "aria-label": "close",
             onClick: function onClick() {
               return handleClose(false);

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

@@ -9,7 +9,6 @@ import classNames from 'classnames';
 import { useRef, useState, useEffect, useMemo, Fragment, cloneElement, isValidElement } from 'react';
 import { Icon } from '../../components/icon/Icon.js';
 import { useIsRtl } from '../../hooks/useIsRtl.js';
-import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
@@ -102,7 +101,7 @@ var Tooltip = function Tooltip(_ref) {
         className: "ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60",
         onClick: handler,
         children: /*#__PURE__*/jsx(Icon, {
-          icon: CoreIcons.copy
+          icon: "icon-[mdi--content-copy]"
         })
       });
     }

package/dist/esm/typography/Copy.js

@@ -5,7 +5,6 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../components/button/Button.js';
 import { Tooltip } from '../overlays/tooltip/Tooltip.js';
-import { CoreIcons } from '../types/icons.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -45,7 +44,7 @@ var Copy = function Copy(_ref) {
   return /*#__PURE__*/jsx(Tooltip, {
     content: t("action.copy"),
     children: /*#__PURE__*/jsx(Button, {
-      icon: CoreIcons.copy,
+      icon: "icon-[mdi--content-copy]",
       "aria-label": "Copy text",
       actionMessage: t("action.copied"),
       variant: "link",

package/dist/types/components/animations/Animations.d.ts

@@ -33,47 +33,66 @@ export interface AnimationProps extends CssProp, AriaProps {
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
 export declare const AnimationIndicator: ({ className, color, strokeColor, type, ...aria }: AnimationProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that displays a loading animation with a customizable icon, color, size, and mask blur.
+ * It is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the AnimationLoader component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the loader icon.
+ * @param {number | string} [props.size="2rem"] - The size of the loader icon.
+ * @param {string} props.icon - The icon to be displayed as the loader.
+ * @param {"sm" | "md" | "lg"} [props.maskBlur] - The blur effect for the background mask.
+ * @returns {JSX.Element} The rendered AnimationLoader component.
+ */
+export declare const AnimationLoader: ({ color, size, icon, maskBlur, }: {
+    icon: string;
+    maskBlur?: "sm" | "md" | "lg";
+    color?: ColorType | PaletteType | string;
+    size?: number | string;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * A component that displays an animated bars loader.
  * It can be customized with color and size properties.
  * This component is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationBars component.
+ * @param {Object} props - The properties for the LoadingBars component.
  * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
  * @param {number | string} [props.size="2rem"] - The size of the bars.
- * @returns {JSX.Element} The rendered AnimationBars component.
+ * @returns {JSX.Element} The rendered LoadingBars component.
  *
  * @example
  * ```jsx
- * <AnimationBars color="primary-500" size="3rem" />
+ * <LoadingBars color="primary-500" size="3rem" />
  * ```
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-export declare const AnimationBars: ({ color, size, }: {
+export declare const LoadingBars: (props: {
     color?: ColorType | PaletteType | string;
     size?: number | string;
+    maskBlur?: "sm" | "md" | "lg";
 }) => import("react/jsx-runtime").JSX.Element;
 /**
  * A component that displays a spinner animation.
  * It can be customized with color and size properties.
  * This component is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationSpinner component.
+ * @param {Object} props - The properties for the LoadingSpinner component.
  * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
  * @param {number | string} [props.size="2rem"] - The size of the spinner.
- * @returns {JSX.Element} The rendered AnimationSpinner component.
+ * @returns {JSX.Element} The rendered LoadingSpinner component.
  *
  * @example
  * ```jsx
- * <AnimationSpinner color="primary-500" size="3rem" />
+ * <LoadingSpinner color="primary-500" size="3rem" />
  * ```
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-export declare const AnimationSpinner: ({ color, size, }: {
+export declare const LoadingSpinner: (props: {
     color?: ColorType | PaletteType | string;
     size?: number | string;
+    maskBlur?: "sm" | "md" | "lg";
 }) => import("react/jsx-runtime").JSX.Element;
 /**
  * A component that displays a skeleton loader with a placeholder for content.
@@ -99,4 +118,4 @@ export declare const Skeleton: ({ className, ...rest }: CssProp) => import("reac
  *
  * @returns {JSX.Element} The rendered Loading component.
  */
-export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingLine: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/collapsable/Collapsable.d.ts

@@ -60,8 +60,8 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
  * ```jsx
  * <Collapsable
  *   iconAlign="start"
- *   iconOpen={CoreIcons.chevronDown}
- *   iconClosed={CoreIcons.chevronRight}
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
  *   open={true}
  *   onOpen={() => console.log("Opened")}
  *   onClose={() => console.log("Closed")}

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

@@ -1,5 +1,5 @@
 export { ActionLabel } from "./actionLabel/ActionLabel";
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton, } from "./animations/Animations";
+export { AnimationIndicator, AnimationLoader, LoadingBars, LoadingLine, LoadingSpinner, Skeleton, } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
 export { Badge, getBadgeProps } from "./badge/Badge";
@@ -18,7 +18,7 @@ export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon, getIconProps } from "./icon/Icon";
+export { getIconProps, Icon } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

package/dist/types/components/menu/types.d.ts

@@ -13,7 +13,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
     /**
      * append label badge text
      */
-    appendLabel?: string | false;
+    appendLabel?: JSX.Element | string | number | false;
     /**
      * menu color
      */
@@ -50,6 +50,10 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
 export interface MenuRootProps extends CssProp {
     label?: never;
     minimal?: boolean;
+    /**
+     * use this create a dropdown button within menu-item
+     */
+    forDropdown?: boolean;
     menuClassName?: never;
     onClick?: (id: string) => CallbackReturn;
 }
@@ -57,6 +61,7 @@ export interface MenuInnerProps extends MenuItemProps {
     label: string;
     minimal?: never;
     trigger?: "hover" | "click";
+    forDropdown?: boolean;
     /**
      * floating menu className
      */

package/dist/types/components/navigator/Navigator.d.ts

@@ -1,6 +1,12 @@
 import { type AriaProps, type ChildProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
 export interface NavigatorProps extends CssProp, AriaProps, TestProps, Partial<ChildProp> {
+    /**
+     * item list length (ignore to enable infinite navigation)
+     */
     length?: number;
+    /**
+     * current item index (ignore to enable infinite navigation)
+     */
     current?: number;
     disableKeyHandlers?: boolean;
     /**

package/dist/types/components/panel/Panel.d.ts

@@ -75,7 +75,7 @@ export interface PanelProps extends CssProp, AriaProps, TestProps, ExpandProps,
  * ```jsx
  * <Panel
  *   title="Panel Title"
- *   icon={CoreIcons.info}
+ *   icon="icon-[mdi--info]"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable

package/dist/types/core/aside/Aside.d.ts

@@ -66,7 +66,7 @@ export interface AsideProps extends ChildrenProp, CollapseProps, CssProp, TestPr
  * ```jsx
  * <Aside
  *   title="Sidebar Title"
- *   icon={CoreIcons.menu}
+ *   icon=icon-[mdi--menu]
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"

package/dist/types/core/theme/ThemeProvider.d.ts

@@ -1,4 +1,4 @@
-import { type ChildrenProp } from "../../types";
+import { type ChildrenProp, type CssProp } from "../../types";
 export interface ThemeProps {
     /**
      * light/dark color scheme
@@ -54,4 +54,4 @@ export interface ThemeProps {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--theme-provider} for more details.
  */
-export declare const ThemeProvider: ({ children, branding, primaryColor, accentColor, tintColor, colorScheme, rounding, }: ThemeProps & ChildrenProp) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, branding, primaryColor, accentColor, tintColor, colorScheme, rounding, className, }: ThemeProps & ChildrenProp & CssProp) => import("react/jsx-runtime").JSX.Element;

package/dist/types/hooks/useOverlayService.d.ts

@@ -1,6 +1,4 @@
-import { type ElementType } from "react";
 import { type ModalProps } from "../types";
-type OverlayComponent = ElementType<ModalProps<AnyObject>>;
 /**
  * Hook to manage overlay components like modals or flyouts.
  * It provides a way to open an overlay with specified properties and handle its closure.
@@ -11,7 +9,8 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
  *
  * @param ModalOrFlyout - The component to be used as an overlay.
- * @returns An array containing the current overlay and a function to open it.
+ * @param toggleOpen - If true, calling `openOverlay` while an overlay is already open will close the existing one instead of opening a new one.
+ * @returns An array containing the current overlay, a function to open it, and a boolean indicating if the overlay is open.
  *
  * @example
  * ```jsx
@@ -25,5 +24,4 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * <Overlay />
  * ```
  */
-export declare const useOverlayService: (ModalOrFlyout: OverlayComponent) => [Overlay: React.ReactNode | null, openOverlay: (props?: KeyValue) => Promise<AnyObject>];
-export {};
+export declare const useOverlayService: <T extends AnyObject = AnyObject>(ModalOrFlyout: React.FunctionComponent<ModalProps<T>>) => [Overlay: React.FunctionComponent<Partial<T>>, openOverlay: (props?: Partial<T>) => Promise<AnyObject>, closeOverlay: ((args?: AnyObject) => void) | null];

package/dist/types/index.d.ts

@@ -18,6 +18,5 @@ 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";