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

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

@@ -40,6 +40,7 @@ var Toast = function Toast(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
@@ -52,6 +53,7 @@ var Toast = function Toast(_ref) {
   var iconType = useMemo(function () {
     if (icon) return /*#__PURE__*/jsx(Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip,
       color: color + "-600"
@@ -78,7 +80,7 @@ var Toast = function Toast(_ref) {
           color: "".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
   var elRef = useRef(null);
   var handleClose = useCallback(function (ret) {
     elRef.current && (elRef.current.dataset.show = "false");

package/dist/esm/types/icons.js

@@ -183,7 +183,7 @@ var CoreIcons;
   _CoreIcons.mediaAspect = "M19,12H17V15H14V17H19V12M7,9H10V7H5V12H7V9M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H21V19Z";
   _CoreIcons.mediaZoomer = "M15 0.004c-4.97 0-9 4.030-9 9 0 1.52 0.38 2.95 1.046 4.206l-6.258 6.256 0.005 0.005c-0.489 0.481-0.794 1.147-0.794 1.887 0 1.462 1.185 2.647 2.647 2.647 0.739 0 1.406-0.304 1.886-0.794l-0.002-0.001 6.256-6.255c1.257 0.668 2.689 1.050 4.213 1.050 4.97 0 9-4.030 9-9s-4.030-9-9-9zM3.596 22.273c-0.241 0.25-0.576 0.407-0.95 0.407-0.731 0-1.324-0.592-1.324-1.323 0-0.373 0.157-0.707 0.407-0.95l-0.007-0.006 6.050-6.050c0.529 0.713 1.159 1.343 1.87 1.874l-6.047 6.047zM15 16.505c-4.142 0-7.5-3.359-7.5-7.5s3.358-7.5 7.5-7.5c4.141 0 7.5 3.358 7.5 7.5s-3.359 7.5-7.5 7.5zM15 3.754c0.206 0 0.375 0.168 0.375 0.375s-0.169 0.375-0.375 0.375c-2.486 0-4.5 2.015-4.5 4.5 0 0.207-0.168 0.375-0.375 0.375s-0.375-0.168-0.375-0.375c0-2.9 2.35-5.25 5.25-5.25z";
   _CoreIcons.mediaOrient = "M7.34,6.41L0.86,12.9L7.35,19.38L13.84,12.9L7.34,6.41M3.69,12.9L7.35,9.24L11,12.9L7.34,16.56L3.69,12.9M19.36,6.64C17.61,4.88 15.3,4 13,4V0.76L8.76,5L13,9.24V6C14.79,6 16.58,6.68 17.95,8.05C20.68,10.78 20.68,15.22 17.95,17.95C16.58,19.32 14.79,20 13,20C12.03,20 11.06,19.79 10.16,19.39L8.67,20.88C10,21.62 11.5,22 13,22C15.3,22 17.61,21.12 19.36,19.36C22.88,15.85 22.88,10.15 19.36,6.64Z";
-  _CoreIcons.mediaCrop = "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z";
+  _CoreIcons.mediaCrop = "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z";
   _CoreIcons.mediaImage = "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z";
   _CoreIcons.mediaVideo = "M15,8V16H5V8H15M16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5V7A1,1 0 0,0 16,6Z";
   _CoreIcons.mediaAudio = "M17.3,11C17.3,14 14.76,16.1 12,16.1C9.24,16.1 6.7,14 6.7,11H5C5,14.41 7.72,17.23 11,17.72V21H13V17.72C16.28,17.23 19,14.41 19,11M10.8,4.9C10.8,4.24 11.34,3.7 12,3.7C12.66,3.7 13.2,4.24 13.2,4.9L13.19,11.1C13.19,11.76 12.66,12.3 12,12.3C11.34,12.3 10.8,11.76 10.8,11.1M12,14A3,3 0 0,0 15,11V5A3,3 0 0,0 12,2A3,3 0 0,0 9,5V11A3,3 0 0,0 12,14Z";
@@ -205,6 +205,7 @@ var CoreIcons;
   _CoreIcons.mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
   _CoreIcons.mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   _CoreIcons.mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+  _CoreIcons.mediaCapture = "M12,10L11.06,12.06L9,13L11.06,13.94L12,16L12.94,13.94L15,13L12.94,12.06L12,10M20,5H16.83L15,3H9L7.17,5H4A2,2 0 0,0 2,7V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V7A2,2 0 0,0 20,5M20,19H4V7H8.05L8.64,6.35L9.88,5H14.12L15.36,6.35L15.95,7H20V19M12,8A5,5 0 0,0 7,13A5,5 0 0,0 12,18A5,5 0 0,0 17,13A5,5 0 0,0 12,8M12,16A3,3 0 0,1 9,13A3,3 0 0,1 12,10A3,3 0 0,1 15,13A3,3 0 0,1 12,16Z";
   _CoreIcons.mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
   _CoreIcons.mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
   _CoreIcons.mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";

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

@@ -1,5 +1,6 @@
-import { type BadgeType, type ChildProp, type CssProp, type IconProps, type RefProp } from "../../types";
-export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildProp> {
+import { type BadgeType, type ChildProp, type CssProp, type RefProp } from "../../types";
+import { IconProps } from "../icon/Icon";
+export interface BadgeProps extends CssProp, RefProp, Partial<ChildProp> {
     /**
      * make wrapper a block element
      */
@@ -12,6 +13,10 @@ export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildPr
      * badge value
      */
     value?: number | string;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * max value for number display
      */
@@ -51,4 +56,4 @@ export declare const getBadgeProps: (badge?: string | number | BadgeType) => Any
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-badge--docs} for more details.
  */
-export declare const Badge: ({ ref, className, value, max, ping, block, inline, placement, children, forButton, icon, iconBg, iconColor, rtlFlip, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ ref, className, value, max, ping, block, inline, placement, children, forButton, icon, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type MouseEventHandler, type WheelEventHandler } from "react";
-import { type ColorState, type AriaProps, type BadgeType, type CallbackReturn, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestProps {
+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";
+export interface BaseProps extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * primary icon alignment
      */
@@ -17,6 +18,10 @@ export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestP
      * button color
      */
     color?: ColorState;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * button type
      */
@@ -118,5 +123,5 @@ export type ButtonProps<Tag extends React.ElementType = "button"> = BaseProps &
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-button--docs} for more details.
  */
-export declare const Button: <Tag extends React.ElementType = "button">({ as, ref, children, className, active, color, icon, iconBg, iconColor, iconAlign, altIcon, rtlFlip, rounded, size, disabled, loading, variant, badge, fullWidth, spinOnHover, onClick, actionMessage, preventDefault, stopPropagation, type, hotKey, showActionDone, showActionDoneEvent, tabIndex, "data-ref": dataRef, ...aria }: ButtonProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: <Tag extends React.ElementType = "button">({ as, ref, children, className, active, color, icon, iconAlign, altIcon, rounded, size, disabled, loading, variant, badge, fullWidth, spinOnHover, onClick, actionMessage, preventDefault, stopPropagation, type, hotKey, showActionDone, showActionDoneEvent, tabIndex, "data-ref": dataRef, ...aria }: ButtonProps<Tag>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PaletteType, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
+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";
+export interface ChipProps extends CssProp, AriaProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
     /**
      * chip size
      */
@@ -17,6 +18,10 @@ export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, Chi
      * full rounded edges
      */
     rounded?: boolean;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * disabled state
      */
@@ -62,4 +67,4 @@ export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, Chi
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-chip--docs} for more details.
  */
-export declare const Chip: <Tag extends React.ElementType = "div">({ ref, children, className, size, color, variant, icon, iconBg, iconColor, rtlFlip, disabled, onClick, onIconClick, onRemove, rounded, preventDefault, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Chip: <Tag extends React.ElementType = "div">({ ref, children, className, size, color, variant, icon, disabled, onClick, onIconClick, onRemove, rounded, preventDefault, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,13 @@
-import { type PaletteType, type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
+import { type AriaProps, type ColorType, type CssProp, type PaletteType, type RefProp, type SizeType, type TestProps } from "../../types";
+export interface Props extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * svg path / webfont className / 1-4 letter text
      */
-    icon: string;
+    icon: string | JSX.Element;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
     /**
      * background color (CSS color / tailwind color)
      */
@@ -38,6 +42,8 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
      */
     onClick?: React.MouseEventHandler;
 }
+export type IconProps = string | 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.
  * It can be styled with background color, icon color, size, and animations.
@@ -67,4 +73,4 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-icon--docs} for more details.
  */
-export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, disabled, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ ref, icon, iconSrc, bg, color, size, rtlFlip, animate, rounded, disabled, viewBox, className, onClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -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 } from "./icon/Icon";
+export { Icon, getIconProps } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

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

@@ -21,4 +21,4 @@ import { type MenuItemProps } from "./types";
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs} for documentation.
  */
-export declare const MenuItem: <Tag extends React.ElementType = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, tabIndex, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: <Tag extends React.ElementType = "button">({ as, label, color, className, icon, appendLabel, altIcon, id, active, disabled, onClick, badge, hotKey, tabIndex, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type ElementType, type MouseEvent } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type IconProps, type TestProps } from "../../types";
-export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps {
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type TestProps } from "../../types";
+import { IconProps } from "../icon/Icon";
+export interface MenuItemProps extends CssProp, AriaProps, TestProps {
     /**
      * menu id passed via menu.onClick
      */
@@ -17,6 +18,10 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps
      * menu color
      */
     color?: ColorState;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * item active
      */

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

@@ -1,7 +1,8 @@
 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 IconProps, type TestProps } from "../../types";
-export interface PanelProps extends CssProp, AriaProps, TestProps, IconProps, ExpandProps, CollapseProps, ChildrenProp<HeadFootProps | ContentProps> {
+import { type AriaProps, type ChildrenProp, type CollapseProps, type CssProp, type ExpandProps, type TestProps } from "../../types";
+import { IconProps } from "../icon/Icon";
+export interface PanelProps extends CssProp, AriaProps, TestProps, ExpandProps, CollapseProps, ChildrenProp<HeadFootProps | ContentProps> {
     /**
      * panel id used by panel stack
      */
@@ -22,6 +23,10 @@ export interface PanelProps extends CssProp, AriaProps, TestProps, IconProps, Ex
      * title css classname(s)
      */
     titleClassName?: string;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * loading state
      */
@@ -71,8 +76,6 @@ export interface PanelProps extends CssProp, AriaProps, TestProps, IconProps, Ex
  * <Panel
  *   title="Panel Title"
  *   icon={CoreIcons.info}
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -92,4 +95,4 @@ export interface PanelProps extends CssProp, AriaProps, TestProps, IconProps, Ex
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-panel--docs} for more details.
  */
-export declare const Panel: ({ children, className, titleClassName, headerClassName, title, actions, icon, iconBg, iconColor, rtlFlip, panelId, height, width, minHeight, minWidth, maxHeight, maxWidth, loading, expandable, expanded: _expanded, onExpand, collapsable, collapsed: _collapsed, onCollapse, onClose, onBack, ...aria }: PanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Panel: ({ children, className, titleClassName, headerClassName, title, actions, icon, panelId, height, width, minHeight, minWidth, maxHeight, maxWidth, loading, expandable, expanded: _expanded, onExpand, collapsable, collapsed: _collapsed, onCollapse, onClose, onBack, ...aria }: PanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps, type TooltipProp } from "../../types";
-export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps, TooltipProp {
+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";
+export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, TooltipProp {
     /**
      * tab id
      */
@@ -13,6 +14,10 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
      * tab color
      */
     color?: ColorState;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * tab badge
      */
@@ -56,8 +61,6 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
  *   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")}
@@ -73,4 +76,4 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-tabpanel--docs} for more details.
  */
-export declare const Tab: <Tag extends React.ElementType = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: <Tag extends React.ElementType = "button">({ ref, as, id, className, label, icon, badge, disabled, onClose, active, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
-import { type ChildrenProp, type CollapseProps, type CssProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, CssProp, TestProps {
+import { 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
      */
@@ -9,6 +10,10 @@ export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, CssP
      * align inline-end
      */
     align?: "start" | "end";
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * header actions
      */
@@ -63,8 +68,6 @@ export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, CssP
  * <Aside
  *   title="Sidebar Title"
  *   icon={CoreIcons.menu}
- *   iconBg="bg-gray-200"
- *   iconColor="text-gray-800"
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -90,4 +93,4 @@ export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, CssP
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--aside} for more details.
  */
-export declare const Aside: ({ children, title, icon, iconBg, iconColor, rtlFlip, className, bodyClassName, headerClassName, resizeable, flyout, onFlyout, collapsed, collapsable, onCollapse, actions, loading, align, width: wd, minWidth, maxWidth, "data-testid": testId, "data-test-value": testValue, }: AsideProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Aside: ({ children, title, icon, className, bodyClassName, headerClassName, resizeable, flyout, onFlyout, collapsed, collapsable, onCollapse, actions, loading, align, width: wd, minWidth, maxWidth, "data-testid": testId, "data-test-value": testValue, }: AsideProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
-import { type ChildrenProp, type IconProps, type RefProp, type TestProps } from "../../types";
-export interface PageProps extends IconProps, ChildrenProp, TestProps, RefProp<HTMLDivElement> {
+import { IconProps } from "../../components/icon/Icon";
+import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
+export interface PageProps extends ChildrenProp, TestProps, RefProp<HTMLDivElement> {
     /**
      * page title
      */
@@ -12,6 +13,10 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps, RefProp<H
      * paper style drop shadow
      */
     paper?: boolean;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * loading indicator
      */
@@ -31,8 +36,6 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps, RefProp<H
  * <Page
  *   title="My Page"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   loading={false}
  *   paper={true}
  *   data-testid="my-page"
@@ -45,4 +48,4 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps, RefProp<H
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--page} for more details.
  */
-export declare const Page: ({ ref, children, paper, title, titleClassName, icon, rtlFlip, iconBg, iconColor, loading, "data-testid": testId, "data-test-value": testValue, ...rest }: PageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Page: ({ ref, children, paper, title, titleClassName, icon, loading, "data-testid": testId, "data-test-value": testValue, ...rest }: PageProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,21 @@
-import { type ColorState, type Elements, type IconProps } from "../../types";
-export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+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
      */
@@ -37,4 +49,4 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     defaultValue?: string;
 }
-export declare const Alert: ({ title, message, color, icon, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
-import { type ElementType } from "react";
-import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
-    icon?: string | ElementType<IconProps>;
+import { 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;
     /**
      * flyout alignment
      */
@@ -59,4 +59,4 @@ export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Flyout: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, root, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flyout: ({ icon, iconClassName, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, root, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/message/Message.d.ts

@@ -1,5 +1,17 @@
-import { type ColorState, type Elements, type IconProps } from "../../types";
-export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+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
      */
@@ -17,4 +29,4 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     actions?: Elements<JSX.Element>;
 }
-export declare const Message: ({ title, message, color, icon, rtlFlip, actions, onClose, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Message: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, }: MessageProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
-import { type ElementType } from "react";
-import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
-    icon?: string | ElementType<IconProps>;
+import { 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;
     /**
      * header className
      */
@@ -59,4 +59,4 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, hideMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ icon, iconClassName, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, hideMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,21 @@
-import { type ColorState, type Elements, type IconProps } from "../../types";
-export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+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
      */
@@ -29,4 +41,4 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     cancelLabel?: string;
 }
-export declare const Toast: ({ title, message, color, icon, rtlFlip, actions, onClose, onCloseAll, type, okLabel, cancelLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, onCloseAll, type, okLabel, cancelLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/icons.d.ts

@@ -180,7 +180,7 @@ export declare namespace CoreIcons {
     const mediaAspect = "M19,12H17V15H14V17H19V12M7,9H10V7H5V12H7V9M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H21V19Z";
     const mediaZoomer = "M15 0.004c-4.97 0-9 4.030-9 9 0 1.52 0.38 2.95 1.046 4.206l-6.258 6.256 0.005 0.005c-0.489 0.481-0.794 1.147-0.794 1.887 0 1.462 1.185 2.647 2.647 2.647 0.739 0 1.406-0.304 1.886-0.794l-0.002-0.001 6.256-6.255c1.257 0.668 2.689 1.050 4.213 1.050 4.97 0 9-4.030 9-9s-4.030-9-9-9zM3.596 22.273c-0.241 0.25-0.576 0.407-0.95 0.407-0.731 0-1.324-0.592-1.324-1.323 0-0.373 0.157-0.707 0.407-0.95l-0.007-0.006 6.050-6.050c0.529 0.713 1.159 1.343 1.87 1.874l-6.047 6.047zM15 16.505c-4.142 0-7.5-3.359-7.5-7.5s3.358-7.5 7.5-7.5c4.141 0 7.5 3.358 7.5 7.5s-3.359 7.5-7.5 7.5zM15 3.754c0.206 0 0.375 0.168 0.375 0.375s-0.169 0.375-0.375 0.375c-2.486 0-4.5 2.015-4.5 4.5 0 0.207-0.168 0.375-0.375 0.375s-0.375-0.168-0.375-0.375c0-2.9 2.35-5.25 5.25-5.25z";
     const mediaOrient = "M7.34,6.41L0.86,12.9L7.35,19.38L13.84,12.9L7.34,6.41M3.69,12.9L7.35,9.24L11,12.9L7.34,16.56L3.69,12.9M19.36,6.64C17.61,4.88 15.3,4 13,4V0.76L8.76,5L13,9.24V6C14.79,6 16.58,6.68 17.95,8.05C20.68,10.78 20.68,15.22 17.95,17.95C16.58,19.32 14.79,20 13,20C12.03,20 11.06,19.79 10.16,19.39L8.67,20.88C10,21.62 11.5,22 13,22C15.3,22 17.61,21.12 19.36,19.36C22.88,15.85 22.88,10.15 19.36,6.64Z";
-    const mediaCrop = "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z";
+    const mediaCrop = "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z";
     const mediaImage = "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z";
     const mediaVideo = "M15,8V16H5V8H15M16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5V7A1,1 0 0,0 16,6Z";
     const mediaAudio = "M17.3,11C17.3,14 14.76,16.1 12,16.1C9.24,16.1 6.7,14 6.7,11H5C5,14.41 7.72,17.23 11,17.72V21H13V17.72C16.28,17.23 19,14.41 19,11M10.8,4.9C10.8,4.24 11.34,3.7 12,3.7C12.66,3.7 13.2,4.24 13.2,4.9L13.19,11.1C13.19,11.76 12.66,12.3 12,12.3C11.34,12.3 10.8,11.76 10.8,11.1M12,14A3,3 0 0,0 15,11V5A3,3 0 0,0 12,2A3,3 0 0,0 9,5V11A3,3 0 0,0 12,14Z";
@@ -202,6 +202,7 @@ export declare namespace CoreIcons {
     const mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
     const mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
     const mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+    const mediaCapture = "M12,10L11.06,12.06L9,13L11.06,13.94L12,16L12.94,13.94L15,13L12.94,12.06L12,10M20,5H16.83L15,3H9L7.17,5H4A2,2 0 0,0 2,7V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V7A2,2 0 0,0 20,5M20,19H4V7H8.05L8.64,6.35L9.88,5H14.12L15.36,6.35L15.95,7H20V19M12,8A5,5 0 0,0 7,13A5,5 0 0,0 12,18A5,5 0 0,0 17,13A5,5 0 0,0 12,8M12,16A3,3 0 0,1 9,13A3,3 0 0,1 12,10A3,3 0 0,1 15,13A3,3 0 0,1 12,16Z";
     const mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
     const mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
     const mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";

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

@@ -84,24 +84,6 @@ export type PolymorphicProps<AsTag extends ReactTag> = Omit<PropsOf<AsTag>, "chi
      */
     as?: AsTag;
 };
-export interface IconProps {
-    /**
-     * svg path / image url
-     */
-    icon?: string;
-    /**
-     * flip icon in rtl
-     */
-    rtlFlip?: boolean;
-    /**
-     * icon background color
-     */
-    iconBg?: ColorType | PaletteType | string;
-    /**
-     * icon color
-     */
-    iconColor?: ColorType | PaletteType | string;
-}
 export interface CollapseProps {
     /**
      * Allow collapsing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.57",
+  "version": "1.0.0-beta.58",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,24 +35,24 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.12",
-    "@react-fabric/utilities": "^1.0.0-beta.52",
-    "@tailwindcss/postcss": "~4.1.8",
-    "boring-avatars": "^1.11.2",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^4.1.8"
+    "@floating-ui/react": "~0.27.16",
+    "@react-fabric/utilities": "^1.0.0-beta.58",
+    "@tailwindcss/postcss": "~4.1.16",
+    "boring-avatars": "~1.11.2",
+    "classnames": "~2.5.1",
+    "color": "~5.0.2",
+    "resize-observer-polyfill": "~1.5.1",
+    "tailwindcss": "~4.1.16"
   },
   "peerDependencies": {
-    "i18next": "^25.2.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-i18next": "^15.5.2"
+    "i18next": "~25.6.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-i18next": "~16.2.1"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "9b596a0a8d6cecaa8479f80c495b64fb42ce739f"
+  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
 }

package/src/components/avatar/Avatar.tsx

@@ -185,7 +185,7 @@ export const Avatar = ({
   const fallbackAvatar = useMemo(() => {
     if (fallbackIcon) {
       return isSvgPath(fallbackIcon) ? (
-        <svg viewBox={viewBox}>
+        <svg viewBox={viewBox} className="p-[0.125em]">
           <path fill="currentColor" d={fallbackIcon.toString()} />
         </svg>
       ) : (

package/src/components/badge/Badge.tsx

@@ -28,16 +28,11 @@ import {
   type BadgeType,
   type ChildProp,
   type CssProp,
-  type IconProps,
   type RefProp,
 } from "../../types";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
-export interface BadgeProps
-  extends CssProp,
-    RefProp,
-    IconProps,
-    Partial<ChildProp> {
+export interface BadgeProps extends CssProp, RefProp, Partial<ChildProp> {
   /**
    * make wrapper a block element
    */
@@ -50,6 +45,10 @@ export interface BadgeProps
    * badge value
    */
   value?: number | string;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * max value for number display
    */
@@ -124,9 +123,6 @@ export const Badge = ({
   // @ts-expect-error ignore
   forButton = false,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   ...rest
 }: BadgeProps) => {
   const label = useMemo(() => {
@@ -176,9 +172,7 @@ export const Badge = ({
           )}
         >
           {label && <span className="p-1">{label}</span>}
-          {icon && (
-            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-          )}
+          {icon && <Icon {...getIconProps(icon)} />}
         </div>
       )}
     </div>