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

package/src/components/panel/Panel.tsx

@@ -26,25 +26,23 @@ import { useMemo } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
 import { usePropToggle } from "../../hooks/usePropToggle";
+import { HotKey } from "../../hotkeys/HotKey";
 import {
   type AriaProps,
   type ChildrenProp,
   type CollapseProps,
   type CssProp,
   type ExpandProps,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Loading } from "../animations/Animations";
-import { Icon } from "../icon/Icon";
-import { HotKey } from "../../hotkeys/HotKey";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
 export interface PanelProps
   extends CssProp,
     AriaProps,
     TestProps,
-    IconProps,
     ExpandProps,
     CollapseProps,
     ChildrenProp<HeadFootProps | ContentProps> {
@@ -68,6 +66,10 @@ export interface PanelProps
    * title css classname(s)
    */
   titleClassName?: string;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * loading state
    */
@@ -118,8 +120,6 @@ export interface PanelProps
  * <Panel
  *   title="Panel Title"
  *   icon={CoreIcons.info}
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -147,9 +147,6 @@ export const Panel = ({
   title,
   actions,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   panelId,
   height,
   width,
@@ -227,11 +224,8 @@ export const Panel = ({
         )}
         {icon && (
           <Icon
-            icon={icon}
-            bg={iconBg}
-            color={iconColor}
-            rtlFlip={rtlFlip}
             className="p-2 text-md select-none pointer-events-none"
+            {...getIconProps(icon)}
           />
         )}
         <div

package/src/components/tabpanel/Tab.tsx

@@ -32,7 +32,6 @@ import {
   type ChildrenProp,
   type ColorState,
   type CssProp,
-  type IconProps,
   type PolymorphicProps,
   type RefProp,
   type TestProps,
@@ -40,7 +39,7 @@ import {
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
 export interface TabProps
   extends Partial<ChildrenProp>,
@@ -48,7 +47,6 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps,
     TooltipProp {
   /**
    * tab id
@@ -62,6 +60,10 @@ export interface TabProps
    * tab color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * tab badge
    */
@@ -106,8 +108,6 @@ export interface TabProps
  *   id="tab1"
  *   label="Tab 1"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   badge="New"
  *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
  *   onClose={() => console.log("Tab closed")}
@@ -130,9 +130,6 @@ export const Tab = <Tag extends React.ElementType = "button">({
   className,
   label,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   badge,
   disabled,
   onClose,
@@ -181,15 +178,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
         ref={ref as AnyObject}
         {...aria}
       >
-        {icon && (
-          <Icon
-            icon={icon}
-            bg={iconBg}
-            color={iconColor}
-            rtlFlip={rtlFlip}
-            className="flex-content p-2"
-          />
-        )}
+        {icon && <Icon className="flex-content p-2" {...getIconProps(icon)} />}
         {!minimal && (
           <label className="flex-initial truncate text-center px-1 py-1">
             {label}

package/src/core/aside/Aside.tsx

@@ -31,7 +31,7 @@ import {
   type ReactNode,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { useResize } from "../../hooks/useResize";
@@ -40,15 +40,13 @@ import {
   type CollapseProps,
   type CssProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 
 export interface AsideProps
-  extends IconProps,
-    ChildrenProp,
+  extends ChildrenProp,
     CollapseProps,
     CssProp,
     TestProps {
@@ -60,6 +58,10 @@ export interface AsideProps
    * align inline-end
    */
   align?: "start" | "end";
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * header actions
    */
@@ -117,8 +119,6 @@ export interface AsideProps
  * <Aside
  *   title="Sidebar Title"
  *   icon={CoreIcons.menu}
- *   iconBg="bg-gray-200"
- *   iconColor="text-gray-800"
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -148,9 +148,6 @@ export const Aside = ({
   children,
   title,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   className,
   bodyClassName,
   headerClassName,
@@ -272,14 +269,11 @@ export const Aside = ({
         )}
         {icon && (
           <Icon
-            icon={icon}
-            bg={iconBg}
-            color={iconColor}
-            rtlFlip={rtlFlip}
             className={classNames(
               "fabric-asideIcon",
               "p-1 text-lg select-none pointer-events-none",
             )}
+            {...getIconProps(icon)}
           />
         )}
         {actions && <div className={"fabric-asideActions"}>{actions}</div>}

package/src/core/headfoot/HeadFoot.tsx

@@ -92,7 +92,7 @@ const HeadFoot = ({
  * ```
  */
 export const Header = (props: HeadFootProps) => (
-  <HeadFoot as="header" area="head" {...props} />
+  <HeadFoot as="header" area="head" data-ref="header" {...props} />
 );
 
 /**
@@ -117,5 +117,5 @@ export const Header = (props: HeadFootProps) => (
  * ```
  */
 export const Footer = (props: HeadFootProps) => (
-  <HeadFoot as="footer" area="foot" {...props} />
+  <HeadFoot as="footer" area="foot" data-ref="footer" {...props} />
 );

package/src/core/page/Page.tsx

@@ -23,17 +23,11 @@
 
 import classNames from "classnames";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
-import {
-  type ChildrenProp,
-  type IconProps,
-  type RefProp,
-  type TestProps,
-} from "../../types";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
+import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
 
 export interface PageProps
-  extends IconProps,
-    ChildrenProp,
+  extends ChildrenProp,
     TestProps,
     RefProp<HTMLDivElement> {
   /**
@@ -48,6 +42,10 @@ export interface PageProps
    * paper style drop shadow
    */
   paper?: boolean;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * loading indicator
    */
@@ -68,8 +66,6 @@ export interface PageProps
  * <Page
  *   title="My Page"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   loading={false}
  *   paper={true}
  *   data-testid="my-page"
@@ -89,9 +85,6 @@ export const Page = ({
   title,
   titleClassName,
   icon,
-  rtlFlip,
-  iconBg,
-  iconColor,
   loading,
   "data-testid": testId,
   "data-test-value": testValue,
@@ -119,15 +112,7 @@ export const Page = ({
             titleClassName,
           )}
         >
-          {icon && (
-            <Icon
-              icon={icon}
-              size="1.25em"
-              rtlFlip={rtlFlip}
-              bg={iconBg}
-              color={iconColor}
-            />
-          )}
+          {icon && <Icon size="1.25em" {...getIconProps(icon)} />}
           {title}
         </div>
       )}

package/src/hooks/useStepper.tsx

@@ -0,0 +1,68 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { ReactNode, useMemo, useState } from "react";
+import { Icon } from "../components";
+
+export const useStepper = ({
+  steps,
+  activeStep: _initialActiveStep = 0,
+}: {
+  steps: Array<{ label?: ReactNode; icon?: ReactNode }>;
+  activeStep?: number;
+}) => {
+  const [activeStep, setActiveStep] = useState(_initialActiveStep);
+  const maxSteps = useMemo(() => steps.length - 1, [steps]);
+
+  const stepper = useMemo(() => {
+    return (
+      <div className="fabric-stepper bg-base flex-1 flex justify-center py-1 px-2 overflow-x-auto">
+        {steps.map((child: any, index) => (
+          <div
+            className="fabric-stepper--pill"
+            key={index}
+            data-state={
+              index === activeStep
+                ? "active"
+                : index < activeStep
+                  ? "completed"
+                  : undefined
+            }
+          >
+            {child.icon && <Icon icon={child.icon} />}
+            {child.label && <label>{child.label}</label>}
+          </div>
+        ))}
+      </div>
+    );
+  }, [steps]);
+
+  return {
+    stepper,
+    activeStep,
+    firstStep: activeStep === 0,
+    lastStep: activeStep === maxSteps,
+    next: () => setActiveStep((s) => Math.min(s + 1, maxSteps)),
+    prev: () => setActiveStep((s) => Math.max(s - 1, 0)),
+  };
+};

package/src/index.ts

@@ -36,6 +36,7 @@ export * from "./hooks/useNavigator";
 export * from "./hooks/useOverlayService";
 export * from "./hooks/useResize";
 export * from "./hooks/useResizeObserver";
+export * from "./hooks/useStepper";
 export * from "./hooks/useStorage";
 
 export { HotKey } from "./hotkeys/HotKey";

package/src/overlays/alert/Alert.tsx

@@ -35,17 +35,29 @@ 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 } from "../../components/icon/Icon";
-import { type ColorState, type Elements, type IconProps } from "../../types";
+import { Icon, IconProps } from "../../components/icon/Icon";
+import { type ColorState, type Elements } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Title } from "../../typography/Title";
 import { getColor } from "../../utils";
 
-export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+export interface AlertProps {
   /**
    * toast type
    */
   type?: "alert" | "confirm" | "prompt";
+  /**
+   * svg path / webfont className / 1-4 letter text
+   */
+  icon: string;
+  /**
+   * icon image source URL, if failed to load then shows icon
+   */
+  iconSrc?: string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
   /**
    * toast title
    */
@@ -85,6 +97,7 @@ export const Alert = ({
   message,
   color = "primary",
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -115,7 +128,13 @@ export const Alert = ({
   const iconType = useMemo(() => {
     if (icon)
       return (
-        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={`${color}-600`} />
+        <Icon
+          icon={icon}
+          iconSrc={iconSrc}
+          size="md"
+          rtlFlip={rtlFlip}
+          color={`${color}-600`}
+        />
       );
     switch (color) {
       case "danger":
@@ -132,7 +151,7 @@ export const Alert = ({
           />
         );
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
 
   const handleClose = useCallback(
     (ret: AnyObject) => {

package/src/overlays/flyout/Flyout.tsx

@@ -32,14 +32,9 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  isValidElement,
-  useCallback,
-  useEffect,
-  type ElementType,
-} from "react";
+import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -47,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 
-export interface FlyoutProps
-  extends AriaProps,
-    TestProps,
-    Omit<IconProps, "icon">,
-    ChildrenProp {
-  icon?: string | ElementType<IconProps>;
+export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * flyout alignment
    */
@@ -118,10 +108,7 @@ export interface FlyoutProps
 
 export const Flyout = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   closeOnClick,
@@ -236,11 +223,8 @@ export const Flyout = ({
             >
               {isString(icon) && (
                 <Icon
-                  icon={icon}
-                  bg={iconBg}
-                  color={iconColor}
                   className={classNames(iconClassName, "p-1")}
-                  rtlFlip={rtlFlip}
+                  {...getIconProps(icon)}
                 />
               )}
               {isValidElement(icon) && icon}

package/src/overlays/message/Message.tsx

@@ -24,10 +24,22 @@
 import classNames from "classnames";
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorState, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements } from "../../types";
 import { getColor } from "../../utils";
 
-export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+export interface MessageProps {
+  /**
+   * svg path / webfont className / 1-4 letter text
+   */
+  icon: string;
+  /**
+   * icon image source URL, if failed to load then shows icon
+   */
+  iconSrc?: string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
   /**
    * message title
    */
@@ -51,6 +63,7 @@ export const Message = ({
   message,
   color,
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -87,7 +100,9 @@ export const Message = ({
       }}
       ref={elRef}
     >
-      {icon && <Icon icon={icon} size="md" rtlFlip={rtlFlip} />}
+      {icon && (
+        <Icon icon={icon} iconSrc={iconSrc} size="md" rtlFlip={rtlFlip} />
+      )}
       {title && <div className="font-medium">{title}</div>}
       <div className="truncate flex-initial">{message}</div>
       {actions && (

package/src/overlays/modal/Modal.tsx

@@ -32,14 +32,9 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  type ElementType,
-  isValidElement,
-  useCallback,
-  useEffect,
-} from "react";
+import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -47,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 
-export interface ModalProps
-  extends AriaProps,
-    TestProps,
-    Omit<IconProps, "icon">,
-    ChildrenProp {
-  icon?: string | ElementType<IconProps>;
+export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * header className
    */
@@ -118,10 +108,7 @@ export interface ModalProps
 
 export const Modal = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   headerClassName,
@@ -226,11 +213,8 @@ export const Modal = ({
               >
                 {isString(icon) && (
                   <Icon
-                    icon={icon}
-                    bg={iconBg}
-                    color={iconColor}
                     className={classNames(iconClassName, "p-1")}
-                    rtlFlip={rtlFlip}
+                    {...getIconProps(icon)}
                   />
                 )}
                 {isValidElement(icon) && icon}

package/src/overlays/toast/Toast.tsx

@@ -27,15 +27,27 @@ import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorState, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { getColor } from "../../utils";
 
-export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+export interface ToastProps {
   /**
    * toast type
    */
   type?: "alert" | "confirm";
+  /**
+   * svg path / webfont className / 1-4 letter text
+   */
+  icon: string;
+  /**
+   * icon image source URL, if failed to load then shows icon
+   */
+  iconSrc?: string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
   /**
    * toast title
    */
@@ -67,6 +79,7 @@ export const Toast = ({
   message,
   color = "primary",
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -82,7 +95,13 @@ export const Toast = ({
   const iconType = useMemo(() => {
     if (icon)
       return (
-        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={color + "-600"} />
+        <Icon
+          icon={icon}
+          iconSrc={iconSrc}
+          size="md"
+          rtlFlip={rtlFlip}
+          color={color + "-600"}
+        />
       );
     switch (color) {
       case "danger":
@@ -99,7 +118,7 @@ export const Toast = ({
           />
         );
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
 
   const elRef = useRef<HTMLDivElement>(null);
   const handleClose = useCallback(

package/src/types/global.d.ts

@@ -45,6 +45,14 @@ declare module "*.png" {
   const content: any;
   export default content;
 }
+declare module "*.jpg" {
+  const content: any;
+  export default content;
+}
+declare module "*.jpeg" {
+  const content: any;
+  export default content;
+}
 declare module "*.svg" {
   const content: any;
   export default content;