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

package/css/theme/_utilities.css

@@ -363,6 +363,17 @@
   flex: 0 1 calc((--value(integer) / 12) * 100% - var(--gutter, 0px));
 }
 
+@utility grid-cols-repeat-* {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(--value([ *]), 100%), 1fr)
+  );
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
+  );
+}
+
 @media (min-width: theme(screens.xs)) {
   .hide-xs {
     @apply hidden;

package/dist/cjs/components/dropdown/DropdownTool.js

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon !== null && icon !== void 0 ? icon : icons.CoreIcons.caretDown,
-      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
+      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-dropdown-open:inline-block")
     }), children]
   }));
 };

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

@@ -18,6 +18,11 @@ var getIconProps = function getIconProps(props) {
       icon: props
     };
   }
+  if ( /*#__PURE__*/react.isValidElement(props)) {
+    return {
+      icon: props
+    };
+  }
   return props;
 };
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -152,6 +157,7 @@ var Icon = function Icon(_ref) {
     "data-inner-clickable": !!_onClick,
     children: [iconSrc && !imageFailed && /*#__PURE__*/jsxRuntime.jsx("img", {
       src: iconSrc,
+      alt: "fallback icon",
       onError: function onError() {
         return setImageFailed(true);
       }

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

@@ -44,7 +44,7 @@ var Meter = function Meter(_ref) {
     return value / 16.67;
   }, [value], "Meter activeCount");
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("fabric-meter", className, "flex flex-nowrap items-center gap-[2px]")
+    className: classNames("fabric-meter", className, "flex flex-nowrap items-center gap-0.5")
   }, aria), {}, {
     children: [[0, 1, 2, 3, 4, 5].map(function (step) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/components/panel/PanelStack.js

@@ -73,7 +73,6 @@ var PanelStack = function PanelStack(_ref) {
   }, [onPanelChange, history]);
   var goBack = react.useCallback(function () {
     var _history$2;
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
     if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], (_history$2 = history[1]) !== null && _history$2 !== void 0 ? _history$2 : "root")) !== false) {
       setHistory(history.slice(1));
     }
@@ -89,7 +88,6 @@ var PanelStack = function PanelStack(_ref) {
       if (panelKey === "back") {
         goBack();
       } else if (panelKey === "root") {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
         if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], "root")) !== false) {
           setHistory([]);
         }

package/dist/cjs/core/boundary/ErrorBoundary.js

@@ -117,6 +117,8 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
         stack: error.stack
       });
     }
+
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
   }, {
     key: "render",
     value: function render() {

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

@@ -51,7 +51,7 @@ var Page = function Page(_ref) {
     "data-testid": testId,
     "data-test-value": testValue,
     "data-loading": loading,
-    className: classNames("fabric-page relative", "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    className: classNames("fabric-page relative", "overflow-hidden grid area-content", paper && "shadow-paper m-1.5 rounded-capped"),
     ref: ref
   }, rest), {}, {
     children: [title && /*#__PURE__*/jsxRuntime.jsxs("div", {

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

@@ -86,7 +86,7 @@ var Modal = function Modal(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames("fabric-modal", "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-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          className: classNames("fabric-modal", "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,

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

@@ -114,7 +114,7 @@ var Tooltip = function Tooltip(_ref) {
     }, open ? {} : getReferenceProps(rest))), isOpen && content && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       children: /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
         "data-ref": "tooltip",
-        className: classNames("fabric-tooltip z-(--z-tooltip)", "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted"),
+        className: classNames("fabric-tooltip z-(--z-tooltip)", "select-none text-sm not-italic flex py-1 px-2 max-w-lg! rounded shadow-md bg-muted"),
         ref: refs.setFloating,
         style: _objectSpread({
           color: textColor ? getColor.getColor(textColor) : undefined,

package/dist/cjs/types/icons.js

@@ -23,7 +23,6 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 /* istanbul ignore file */
-/* eslint-disable @typescript-eslint/no-namespace */
 /**
  * Core icons used in the application.
  * These icons are typically used for navigation, actions, and other UI elements.

package/dist/cjs/typography/Abbr.js

@@ -85,7 +85,9 @@ var Abbr = function Abbr(_ref2) {
   }, [renderer, copyContent]);
 
   /** ***************** tokenize text with abbr list *******************/
-  var inner = useEffectDebugger.useMemoDebugger(function () {
+  var inner = useEffectDebugger.useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (utilities.isString(children)) {
       if (!utilities.isEmpty(abbr)) {
         var tokens = utilities.tokenize(children, abbr.map(function (_ref3) {

package/dist/cjs/typography/Mark.js

@@ -59,7 +59,9 @@ var Mark = function Mark(_ref2) {
   }, [renderer]);
 
   /** ***************** tokenize text with abbr list *******************/
-  var inner = useEffectDebugger.useMemoDebugger(function () {
+  var inner = useEffectDebugger.useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (utilities.isString(children)) {
       if (!utilities.isEmpty(mark)) {
         var tokens = utilities.tokenize(children, mark.map(function (_ref3) {

package/dist/esm/components/dropdown/DropdownTool.js

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
       icon: icon !== null && icon !== void 0 ? icon : CoreIcons.caretDown,
-      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
+      className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-dropdown-open:inline-block")
     }), children]
   }));
 };

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

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { isSvgPath, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useState, useEffect, useMemo, isValidElement } from 'react';
+import { isValidElement, useState, useEffect, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
@@ -18,6 +18,11 @@ var getIconProps = function getIconProps(props) {
       icon: props
     };
   }
+  if ( /*#__PURE__*/isValidElement(props)) {
+    return {
+      icon: props
+    };
+  }
   return props;
 };
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -152,6 +157,7 @@ var Icon = function Icon(_ref) {
     "data-inner-clickable": !!_onClick,
     children: [iconSrc && !imageFailed && /*#__PURE__*/jsx("img", {
       src: iconSrc,
+      alt: "fallback icon",
       onError: function onError() {
         return setImageFailed(true);
       }

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

@@ -44,7 +44,7 @@ var Meter = function Meter(_ref) {
     return value / 16.67;
   }, [value], "Meter activeCount");
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("fabric-meter", className, "flex flex-nowrap items-center gap-[2px]")
+    className: classNames("fabric-meter", className, "flex flex-nowrap items-center gap-0.5")
   }, aria), {}, {
     children: [[0, 1, 2, 3, 4, 5].map(function (step) {
       return /*#__PURE__*/jsx("div", {

package/dist/esm/components/panel/PanelStack.js

@@ -73,7 +73,6 @@ var PanelStack = function PanelStack(_ref) {
   }, [onPanelChange, history]);
   var goBack = useCallback(function () {
     var _history$2;
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
     if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], (_history$2 = history[1]) !== null && _history$2 !== void 0 ? _history$2 : "root")) !== false) {
       setHistory(history.slice(1));
     }
@@ -89,7 +88,6 @@ var PanelStack = function PanelStack(_ref) {
       if (panelKey === "back") {
         goBack();
       } else if (panelKey === "root") {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
         if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], "root")) !== false) {
           setHistory([]);
         }

package/dist/esm/core/boundary/ErrorBoundary.js

@@ -117,6 +117,8 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
         stack: error.stack
       });
     }
+
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
   }, {
     key: "render",
     value: function render() {

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

@@ -51,7 +51,7 @@ var Page = function Page(_ref) {
     "data-testid": testId,
     "data-test-value": testValue,
     "data-loading": loading,
-    className: classNames("fabric-page relative", "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    className: classNames("fabric-page relative", "overflow-hidden grid area-content", paper && "shadow-paper m-1.5 rounded-capped"),
     ref: ref
   }, rest), {}, {
     children: [title && /*#__PURE__*/jsxs("div", {

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

@@ -86,7 +86,7 @@ var Modal = function Modal(_ref) {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames("fabric-modal", "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-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          className: classNames("fabric-modal", "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,

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

@@ -114,7 +114,7 @@ var Tooltip = function Tooltip(_ref) {
     }, open ? {} : getReferenceProps(rest))), isOpen && content && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
         "data-ref": "tooltip",
-        className: classNames("fabric-tooltip z-(--z-tooltip)", "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted"),
+        className: classNames("fabric-tooltip z-(--z-tooltip)", "select-none text-sm not-italic flex py-1 px-2 max-w-lg! rounded shadow-md bg-muted"),
         ref: refs.setFloating,
         style: _objectSpread({
           color: textColor ? getColor(textColor) : undefined,

package/dist/esm/types/icons.js

@@ -23,7 +23,6 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 /* istanbul ignore file */
-/* eslint-disable @typescript-eslint/no-namespace */
 /**
  * Core icons used in the application.
  * These icons are typically used for navigation, actions, and other UI elements.

package/dist/esm/typography/Abbr.js

@@ -85,7 +85,9 @@ var Abbr = function Abbr(_ref2) {
   }, [renderer, copyContent]);
 
   /** ***************** tokenize text with abbr list *******************/
-  var inner = useMemoDebugger(function () {
+  var inner = useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (isString(children)) {
       if (!isEmpty(abbr)) {
         var tokens = tokenize(children, abbr.map(function (_ref3) {

package/dist/esm/typography/Mark.js

@@ -59,7 +59,9 @@ var Mark = function Mark(_ref2) {
   }, [renderer]);
 
   /** ***************** tokenize text with abbr list *******************/
-  var inner = useMemoDebugger(function () {
+  var inner = useMemoDebugger(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function () {
     if (isString(children)) {
       if (!isEmpty(mark)) {
         var tokens = tokenize(children, mark.map(function (_ref3) {

package/dist/types/components/badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { type BadgeType, type ChildProp, type CssProp, type RefProp } from "../../types";
-import { IconProps } from "../icon/Icon";
+import { type IconProps } from "../icon/Icon";
 export interface BadgeProps extends CssProp, RefProp, Partial<ChildProp> {
     /**
      * make wrapper a block element

package/dist/types/components/button/Button.d.ts

@@ -1,6 +1,6 @@
 import { type MouseEventHandler, type WheelEventHandler } from "react";
 import { type AriaProps, type BadgeType, type CallbackReturn, type ColorState, type CssProp, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
-import { IconProps } from "../icon/Icon";
+import { type IconProps } from "../icon/Icon";
 export interface BaseProps extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * primary icon alignment

package/dist/types/components/card/Card.d.ts

@@ -1,7 +1,7 @@
 import { type DragEvent, type MouseEventHandler } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
-import { PolymorphicProps, type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
+import { type PolymorphicProps, type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
 interface BaseProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
     /**
      * apply flex fill styling

package/dist/types/components/chip/Chip.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import { type AriaProps, type ChildProp, type ColorType, type CssProp, type PaletteType, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
-import { IconProps } from "../icon/Icon";
+import { type IconProps } from "../icon/Icon";
 export interface ChipProps extends CssProp, AriaProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
     /**
      * chip size

package/dist/types/components/icon/Icon.d.ts

@@ -42,7 +42,7 @@ export interface Props extends CssProp, AriaProps, RefProp, TestProps {
      */
     onClick?: React.MouseEventHandler;
 }
-export type IconProps = string | Pick<Props, "icon" | "iconSrc" | "bg" | "color" | "size" | "rtlFlip" | "viewBox" | "rounded" | "animate">;
+export type IconProps = string | JSX.Element | Pick<Props, "icon" | "iconSrc" | "bg" | "color" | "size" | "rtlFlip" | "viewBox" | "rounded" | "animate">;
 export declare const getIconProps: (props: IconProps) => Props;
 /**
  * A versatile icon component that supports SVG paths, webfont icons, and text icons.

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

@@ -1,6 +1,6 @@
 import { type ElementType, type MouseEvent } from "react";
 import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type TestProps } from "../../types";
-import { IconProps } from "../icon/Icon";
+import { type IconProps } from "../icon/Icon";
 export interface MenuItemProps extends CssProp, AriaProps, TestProps {
     /**
      * menu id passed via menu.onClick

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

@@ -1,7 +1,7 @@
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
 import { type AriaProps, type ChildrenProp, type CollapseProps, type CssProp, type ExpandProps, type TestProps } from "../../types";
-import { IconProps } from "../icon/Icon";
+import { type IconProps } from "../icon/Icon";
 export interface PanelProps extends CssProp, AriaProps, TestProps, ExpandProps, CollapseProps, ChildrenProp<HeadFootProps | ContentProps> {
     /**
      * panel id used by panel stack

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

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type PolymorphicProps, type RefProp, type TestProps, type TooltipProp } from "../../types";
-import { IconProps } from "../icon/Icon";
+import { type IconProps } from "../icon/Icon";
 export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, TooltipProp {
     /**
      * tab id

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

@@ -1,4 +1,3 @@
-import { type ReactNode } from "react";
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { Tab } from "./Tab";
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
@@ -41,11 +40,11 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
     /**
      * append element
      */
-    append?: ReactNode;
+    append?: React.ReactNode;
     /**
      * prepend element
      */
-    prepend?: ReactNode;
+    prepend?: React.ReactNode;
     /**
      * change handler
      */

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

@@ -1,11 +1,10 @@
-import { type ReactNode } from "react";
-import { IconProps } from "../../components/icon/Icon";
+import { type IconProps } from "../../components/icon/Icon";
 import { type ChildrenProp, type CollapseProps, type CssProp, type Elements, type TestProps } from "../../types";
 export interface AsideProps extends ChildrenProp, CollapseProps, CssProp, TestProps {
     /**
      * page title
      */
-    title?: ReactNode;
+    title?: React.ReactNode;
     /**
      * align inline-end
      */

package/dist/types/core/page/Page.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from "../../components/icon/Icon";
+import { type IconProps } from "../../components/icon/Icon";
 import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
 export interface PageProps extends ChildrenProp, TestProps, RefProp<HTMLDivElement> {
     /**

package/dist/types/core/section/Section.d.ts

@@ -1,4 +1,4 @@
-import { TestProps, type ChildrenProp, type CssProp, type RefProp } from "../../types";
+import { type TestProps, type ChildrenProp, type CssProp, type RefProp } from "../../types";
 /**
  * A component that represents a section of content within a page, with templated grid layout.
  * It can be used to group related content together and can be styled with additional CSS classes.

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

@@ -1,4 +1,4 @@
-import { type ElementType, type ReactNode } from "react";
+import { type ElementType } from "react";
 import { type ModalProps } from "../types";
 type OverlayComponent = ElementType<ModalProps<AnyObject>>;
 /**
@@ -25,5 +25,5 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * <Overlay />
  * ```
  */
-export declare const useOverlayService: (ModalOrFlyout: OverlayComponent) => [Overlay: ReactNode | null, openOverlay: (props?: KeyValue) => Promise<AnyObject>];
+export declare const useOverlayService: (ModalOrFlyout: OverlayComponent) => [Overlay: React.ReactNode | null, openOverlay: (props?: KeyValue) => Promise<AnyObject>];
 export {};

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

@@ -1,8 +1,7 @@
-import { ReactNode } from "react";
 export declare const useStepper: ({ steps, activeStep: _initialActiveStep, }: {
     steps: Array<{
-        label?: ReactNode;
-        icon?: ReactNode;
+        label?: React.ReactNode;
+        icon?: React.ReactNode;
     }>;
     activeStep?: number;
 }) => {

package/dist/types/overlays/alert/Alert.d.ts

@@ -7,7 +7,7 @@ export interface AlertProps {
     /**
      * svg path / webfont className / 1-4 letter text
      */
-    icon: string;
+    icon?: string;
     /**
      * icon image source URL, if failed to load then shows icon
      */

package/dist/types/overlays/flyout/Flyout.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from "../../components/icon/Icon";
+import { type IconProps } from "../../components/icon/Icon";
 import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
 export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
     icon?: IconProps;

package/dist/types/overlays/modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from "../../components/icon/Icon";
+import { type IconProps } from "../../components/icon/Icon";
 import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
 export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
     icon?: IconProps;

package/dist/types/overlays/toast/Toast.d.ts

@@ -7,7 +7,7 @@ export interface ToastProps {
     /**
      * svg path / webfont className / 1-4 letter text
      */
-    icon: string;
+    icon?: string;
     /**
      * icon image source URL, if failed to load then shows icon
      */

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.59",
+  "version": "1.0.0-beta.60",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "~0.27.16",
-    "@react-fabric/utilities": "^1.0.0-beta.59",
+    "@react-fabric/utilities": "^1.0.0-beta.60",
     "@tailwindcss/postcss": "~4.1.16",
     "boring-avatars": "~1.11.2",
     "classnames": "~2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
+  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
 }

package/src/components/badge/Badge.tsx

@@ -30,7 +30,7 @@ import {
   type CssProp,
   type RefProp,
 } from "../../types";
-import { getIconProps, Icon, IconProps } from "../icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface BadgeProps extends CssProp, RefProp, Partial<ChildProp> {
   /**

package/src/components/button/Button.tsx

@@ -53,7 +53,7 @@ import {
 import { getColor } from "../../utils";
 import { AnimationIndicator } from "../animations/Animations";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { getIconProps, Icon, IconProps } from "../icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface BaseProps extends CssProp, AriaProps, RefProp, TestProps {
   /**

package/src/components/card/Card.tsx

@@ -37,7 +37,7 @@ import {
   type HeadFootProps,
 } from "../../core/headfoot/HeadFoot";
 import {
-  PolymorphicProps,
+  type PolymorphicProps,
   type AriaProps,
   type ChildrenProp,
   type CssProp,

package/src/components/chip/Chip.tsx

@@ -36,7 +36,7 @@ import {
   type TestProps,
 } from "../../types";
 import { getColor } from "../../utils";
-import { getIconProps, Icon, IconProps } from "../icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface ChipProps
   extends CssProp,

package/src/components/dropdown/DropdownTool.tsx

@@ -75,7 +75,7 @@ export const DropdownTool = ({
           "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer",
           className,
           groupHover &&
-            "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block",
+            "hidden group-hover/tool:inline-block data-dropdown-open:inline-block",
         )}
       />
       {children}

package/src/components/icon/Icon.tsx

@@ -81,6 +81,7 @@ export interface Props extends CssProp, AriaProps, RefProp, TestProps {
 
 export type IconProps =
   | string
+  | JSX.Element
   | Pick<
       Props,
       | "icon"
@@ -98,7 +99,10 @@ export const getIconProps = (props: IconProps): Props => {
   if (typeof props === "string") {
     return { icon: props };
   }
-  return props;
+  if (isValidElement(props)) {
+    return { icon: props };
+  }
+  return props as unknown as Props;
 };
 
 const SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -238,7 +242,11 @@ export const Icon = ({
       data-inner-clickable={!!onClick}
     >
       {iconSrc && !imageFailed && (
-        <img src={iconSrc} onError={() => setImageFailed(true)} />
+        <img
+          src={iconSrc}
+          alt="fallback icon"
+          onError={() => setImageFailed(true)}
+        />
       )}
       {(!iconSrc || imageFailed) && iconEl}
     </dfn>

package/src/components/menu/MenuItem.tsx

@@ -32,7 +32,6 @@ import { type PolymorphicProps } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { getIconProps, Icon } from "../icon/Icon";
 import { type MenuItemProps } from "./types";
-import { get } from "http";
 
 /**
  * A menu item component that can be used in a dropdown or menu.

package/src/components/menu/types.ts

@@ -31,7 +31,7 @@ import {
   type CssProp,
   type TestProps,
 } from "../../types";
-import { IconProps } from "../icon/Icon";
+import { type IconProps } from "../icon/Icon";
 
 export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**

package/src/components/meter/Meter.tsx

@@ -76,7 +76,7 @@ export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
       className={classNames(
         "fabric-meter",
         className,
-        "flex flex-nowrap items-center gap-[2px]",
+        "flex flex-nowrap items-center gap-0.5",
       )}
       {...aria}
     >

package/src/components/panel/Panel.tsx

@@ -37,7 +37,7 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Loading } from "../animations/Animations";
-import { getIconProps, Icon, IconProps } from "../icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface PanelProps
   extends CssProp,

package/src/components/panel/PanelStack.tsx

@@ -113,7 +113,7 @@ export const PanelStack = ({
   }, [onPanelChange, history]);
 
   const goBack = useCallback(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+     
     if (onBack?.(history[0], history[1] ?? "root") !== false) {
       setHistory(history.slice(1));
     }
@@ -131,7 +131,7 @@ export const PanelStack = ({
         if (panelKey === "back") {
           goBack();
         } else if (panelKey === "root") {
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+           
           if (onBack?.(history[0], "root") !== false) {
             setHistory([]);
           }

package/src/components/tabpanel/Tab.tsx

@@ -39,7 +39,7 @@ import {
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
-import { getIconProps, Icon, IconProps } from "../icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface TabProps
   extends Partial<ChildrenProp>,

package/src/components/tabpanel/TabPanel.tsx

@@ -25,7 +25,6 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
-  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -75,11 +74,11 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
    * append element
    */
-  append?: ReactNode;
+  append?: React.ReactNode;
   /**
    * prepend element
    */
-  prepend?: ReactNode;
+  prepend?: React.ReactNode;
   /**
    * change handler
    */

package/src/core/aside/Aside.tsx

@@ -22,16 +22,9 @@
  */
 
 import classNames from "classnames";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { useResize } from "../../hooks/useResize";
@@ -53,7 +46,7 @@ export interface AsideProps
   /**
    * page title
    */
-  title?: ReactNode;
+  title?: React.ReactNode;
   /**
    * align inline-end
    */

package/src/core/boundary/ErrorBoundary.tsx

@@ -131,6 +131,7 @@ export class ErrorBoundary extends Component<
     this.setState({ hasError: true, error: error.message, stack: error.stack });
   }
 
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
   render() {
     const env = process.env.NODE_ENV;
     if (this.state.hasError) {

package/src/core/page/Page.tsx

@@ -23,7 +23,7 @@
 
 import classNames from "classnames";
 import { Loading } from "../../components/animations/Animations";
-import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
 
 export interface PageProps
@@ -98,7 +98,7 @@ export const Page = ({
       className={classNames(
         "fabric-page relative",
         "overflow-hidden grid area-content",
-        paper && "shadow-paper m-[6px] rounded-capped",
+        paper && "shadow-paper m-1.5 rounded-capped",
       )}
       ref={ref}
       {...rest}

package/src/core/section/Section.tsx

@@ -23,7 +23,7 @@
 
 import classNames from "classnames";
 import {
-  TestProps,
+  type TestProps,
   type ChildrenProp,
   type CssProp,
   type RefProp,

package/src/hooks/useOverlayService.tsx

@@ -21,12 +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 {
-  useState,
-  type ComponentProps,
-  type ElementType,
-  type ReactNode,
-} from "react";
+import { useState, type ComponentProps, type ElementType } from "react";
 import { type ModalProps } from "../types";
 
 type OverlayComponent = ElementType<ModalProps<AnyObject>>;
@@ -58,10 +53,10 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
 export const useOverlayService = (
   ModalOrFlyout: OverlayComponent,
 ): [
-  Overlay: ReactNode | null,
+  Overlay: React.ReactNode | null,
   openOverlay: (props?: KeyValue) => Promise<AnyObject>,
 ] => {
-  const [Overlay, setOverlay] = useState<ReactNode | null>(null);
+  const [Overlay, setOverlay] = useState<React.ReactNode | null>(null);
 
   const openOverlay = async ({
     onClose,

package/src/hooks/useStepper.tsx

@@ -21,14 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { ReactNode, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Icon } from "../components";
 
 export const useStepper = ({
   steps,
   activeStep: _initialActiveStep = 0,
 }: {
-  steps: Array<{ label?: ReactNode; icon?: ReactNode }>;
+  steps: Array<{ label?: React.ReactNode; icon?: React.ReactNode }>;
   activeStep?: number;
 }) => {
   const [activeStep, setActiveStep] = useState(_initialActiveStep);

package/src/overlays/alert/Alert.tsx

@@ -35,7 +35,7 @@ import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
-import { Icon, IconProps } from "../../components/icon/Icon";
+import { Icon } from "../../components/icon/Icon";
 import { type ColorState, type Elements } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Title } from "../../typography/Title";
@@ -49,7 +49,7 @@ export interface AlertProps {
   /**
    * svg path / webfont className / 1-4 letter text
    */
-  icon: string;
+  icon?: string;
   /**
    * icon image source URL, if failed to load then shows icon
    */
@@ -101,6 +101,7 @@ export const Alert = ({
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
+  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onClose,
   type,
   okLabel,

package/src/overlays/flyout/Flyout.tsx

@@ -34,7 +34,7 @@ import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {

package/src/overlays/message/Message.tsx

@@ -67,6 +67,7 @@ export const Message = ({
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
+  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onClose,
 }: MessageProps) => {
   const elRef = useRef<HTMLDivElement>(null);

package/src/overlays/modal/Modal.tsx

@@ -34,7 +34,7 @@ import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -190,7 +190,7 @@ export const Modal = ({
               "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-[40rem]",
+              size === "md" && "w-160",
               size === "lg" && "w-[60vw]",
               size === "xl" && "w-[80vw]",
               size === "screen" && "w-screen h-screen",

package/src/overlays/toast/Toast.tsx

@@ -39,7 +39,7 @@ export interface ToastProps {
   /**
    * svg path / webfont className / 1-4 letter text
    */
-  icon: string;
+  icon?: string;
   /**
    * icon image source URL, if failed to load then shows icon
    */
@@ -83,8 +83,10 @@ export const Toast = ({
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
+  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onClose,
   // @ts-expect-error internal prop
+  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onCloseAll,
   type,
   okLabel,

package/src/overlays/tooltip/Tooltip.tsx

@@ -178,7 +178,7 @@ export const Tooltip = ({
             data-ref="tooltip"
             className={classNames(
               "fabric-tooltip z-(--z-tooltip)",
-              "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted",
+              "select-none text-sm not-italic flex py-1 px-2 max-w-lg! rounded shadow-md bg-muted",
             )}
             ref={refs.setFloating}
             style={{

package/src/types/icons.ts

@@ -22,7 +22,7 @@
  */
 
 /* istanbul ignore file */
-/* eslint-disable @typescript-eslint/no-namespace */
+ 
 
 /**
  * Core icons used in the application.

package/src/types/index.ts

@@ -367,7 +367,6 @@ export interface RefProp<T = HTMLElement> {
 
 /* *********** */
 
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
 export type CallbackReturn<T = unknown> =
   | undefined
   | T

package/src/typography/Abbr.tsx

@@ -142,6 +142,7 @@ export const Abbr = ({
 
   /** ***************** tokenize text with abbr list *******************/
   const inner = useMemoDebugger(
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
     () => {
       if (isString(children)) {
         if (!isEmpty(abbr)) {

package/src/typography/Mark.tsx

@@ -96,6 +96,7 @@ export const Mark = ({ children, mark, renderer }: MarkProps) => {
 
   /** ***************** tokenize text with abbr list *******************/
   const inner = useMemoDebugger(
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
     () => {
       if (isString(children)) {
         if (!isEmpty(mark)) {

package/src/utils/cloneElement.ts

@@ -21,14 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { type ReactNode, Children, isValidElement } from "react";
+import { Children, isValidElement } from "react";
 import { Fragment } from "react/jsx-runtime";
 
 export const cloneChildren = (
-  children: ReactNode,
-  callback: (child: ReactNode, index: number) => ReactNode,
-): ReactNode => {
-  return Children.map(children, (c: ReactNode) => {
+  children: React.ReactNode,
+  callback: (child: React.ReactNode, index: number) => React.ReactNode,
+): React.ReactNode => {
+  return Children.map(children, (c: React.ReactNode) => {
     if (isValidElement(c)) {
       if (c.type === Fragment) {
         // just compare to `Fragment`