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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.55",
+  "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": "c8454798fb7546174ee8c7ea10e491c5e903e789"
+  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
 }

package/src/components/avatar/Avatar.tsx

@@ -73,6 +73,10 @@ export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
    * rounded icon
    */
   rounded?: boolean;
+  /**
+   * prevent click default, useful when component is within a `a` link
+   */
+  preventDefault?: boolean;
   /**
    * click handler
    */
@@ -127,6 +131,7 @@ export const Avatar = ({
   variant = "beam",
   className,
   viewBox = "0 0 24 24",
+  preventDefault,
   onClick,
   ...aria
 }: AvatarProps) => {
@@ -180,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>
       ) : (
@@ -220,7 +225,10 @@ export const Avatar = ({
         !rounded && "rounded",
         rounded && "rounded-full",
       )}
-      onClick={onClick}
+      onClick={(e) => {
+        preventDefault && e.preventDefault();
+        onClick?.(e);
+      }}
       style={styles}
       data-clickable={!!onClick}
       ref={ref}

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>

package/src/components/button/Button.tsx

@@ -21,7 +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 { isNil, isString, mergeRefs } from "@react-fabric/utilities";
+import { isNil, isObject, isString, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Fragment,
@@ -39,12 +39,11 @@ import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays/tooltip/Tooltip";
 import {
-  type ColorState,
   type AriaProps,
   type BadgeType,
   type CallbackReturn,
+  type ColorState,
   type CssProp,
-  type IconProps,
   type PolymorphicProps,
   type RefProp,
   type SizeType,
@@ -54,14 +53,9 @@ import {
 import { getColor } from "../../utils";
 import { AnimationIndicator } from "../animations/Animations";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
-export interface BaseProps
-  extends CssProp,
-    AriaProps,
-    IconProps,
-    RefProp,
-    TestProps {
+export interface BaseProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * primary icon alignment
    */
@@ -78,6 +72,10 @@ export interface BaseProps
    * button color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * button type
    */
@@ -136,6 +134,10 @@ export interface BaseProps
    */
   hotKey?: string;
 
+  /**
+   * prevent click default, useful when button is within a `a` link
+   */
+  preventDefault?: boolean;
   stopPropagation?: boolean;
 
   onMouseOut?: MouseEventHandler;
@@ -187,11 +189,8 @@ export const Button = <Tag extends React.ElementType = "button">({
   active,
   color = "primary",
   icon,
-  iconBg,
-  iconColor,
   iconAlign = "start",
   altIcon,
-  rtlFlip,
   rounded,
   size,
   disabled,
@@ -202,6 +201,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   spinOnHover,
   onClick,
   actionMessage,
+  preventDefault,
   stopPropagation,
   type = "button",
   hotKey,
@@ -220,6 +220,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
       setBusy(true);
+      preventDefault && e.preventDefault();
       stopPropagation && e.stopPropagation();
       const ret = onClick?.(e);
       void Promise.resolve(ret).then((b) => {
@@ -229,7 +230,14 @@ export const Button = <Tag extends React.ElementType = "button">({
         }
       });
     },
-    [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation],
+    [
+      onClick,
+      disabled,
+      preventDefault,
+      actionMessage,
+      showActionDoneEvent,
+      stopPropagation,
+    ],
   );
 
   /** ***************** reset done state on timeout *******************/
@@ -310,11 +318,8 @@ export const Button = <Tag extends React.ElementType = "button">({
           {icon && (
             <Icon
               className={"fabric-buttonIcon"}
-              icon={icon}
-              bg={iconBg}
-              color={iconColor}
-              rtlFlip={rtlFlip}
               data-align={iconAlign}
+              {...getIconProps(icon)}
             />
           )}
           {isValidElement(children) && (
@@ -323,7 +328,7 @@ export const Button = <Tag extends React.ElementType = "button">({
           {isString(children) && (
             <label
               className={classNames("fabric-buttonLabel", "truncate")}
-              data-colored-icon={!!iconBg}
+              data-colored-icon={isObject(icon) && "bg" in icon}
             >
               {children}
             </label>

package/src/components/card/Card.tsx

@@ -24,10 +24,10 @@
 import classNames from "classnames";
 import {
   Children,
-  type DragEvent,
-  type MouseEventHandler,
   useCallback,
   useMemo,
+  type DragEvent,
+  type MouseEventHandler,
 } from "react";
 import { ErrorBoundary } from "../../core/boundary/ErrorBoundary";
 import { type ContentProps } from "../../core/content/Content";
@@ -37,6 +37,7 @@ import {
   type HeadFootProps,
 } from "../../core/headfoot/HeadFoot";
 import {
+  PolymorphicProps,
   type AriaProps,
   type ChildrenProp,
   type CssProp,
@@ -45,7 +46,7 @@ import {
 } from "../../types";
 import { nodeCheck } from "../../utils";
 
-export interface CardProps
+interface BaseProps
   extends CssProp,
     AriaProps,
     TestProps,
@@ -93,6 +94,9 @@ export interface CardProps
   dragData?: KeyValue;
 }
 
+export type CardProps<Tag extends React.ElementType = "div"> = BaseProps &
+  PolymorphicProps<Tag>;
+
 /**
  * A component that displays a card with a header, body, and footer. It can be used to display content in a structured format.
  * It supports various features such as click handling, drag-and-drop functionality, and customizable styles.
@@ -127,7 +131,7 @@ export interface CardProps
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-card--docs} for more details.
  */
-export const Card = ({
+export const Card = <Tag extends React.ElementType = "div">({
   children,
   className,
   bodyClassName,
@@ -140,8 +144,9 @@ export const Card = ({
   dragKey,
   dragData,
   ref,
+  as,
   ...aria
-}: CardProps) => {
+}: CardProps<Tag>) => {
   const [header, body, footer] = useMemo(() => {
     return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
       (ret, node) => {
@@ -164,6 +169,7 @@ export const Card = ({
     [onDragStart, dragKey, dragData],
   );
 
+  const E = as ?? "div";
   return (
     <div
       className={classNames(
@@ -171,7 +177,7 @@ export const Card = ({
         "rounded-capped relative grid",
         flex && "flex-1",
         selected && selectedRibbon && "selected",
-        selected && "outline-2 outline-accent-500 outline-offset-2",
+        selected && "outline-1 outline-accent-500 outline-offset-2",
       )}
     >
       <ErrorBoundary>
@@ -179,22 +185,30 @@ export const Card = ({
           className={classNames(
             "fabric-card",
             className,
-            "rounded-capped flex flex-col flex-nowrap overflow-hidden",
+            "rounded-capped relative flex flex-col flex-nowrap overflow-hidden",
+            "href" in aria && "clickable",
+            "to" in aria && "clickable",
             onClick && "clickable",
           )}
           draggable={draggable}
           onDragStart={!draggable ? undefined : handleDragStart}
           ref={ref}
-          {...aria}
         >
           {header}
-          <div
-            role="none"
-            className={classNames("fabric-cardBody", bodyClassName, "flex-1")}
-            onClick={onClick}
-          >
-            {body}
-          </div>
+          <E role="none" onClick={onClick} {...aria} className="contents">
+            {body && (
+              <object
+                type="none"
+                className={classNames(
+                  "fabric-cardBody",
+                  bodyClassName,
+                  "flex-1",
+                )}
+              >
+                {body}
+              </object>
+            )}
+          </E>
           {footer}
         </div>
       </ErrorBoundary>

package/src/components/chip/Chip.tsx

@@ -29,7 +29,6 @@ import {
   type ChildProp,
   type ColorType,
   type CssProp,
-  type IconProps,
   type PaletteType,
   type PolymorphicProps,
   type RefProp,
@@ -37,12 +36,11 @@ import {
   type TestProps,
 } from "../../types";
 import { getColor } from "../../utils";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
 export interface ChipProps
   extends CssProp,
     AriaProps,
-    IconProps,
     TestProps,
     ChildProp<string | ReactElement>,
     RefProp<HTMLDivElement> {
@@ -62,10 +60,18 @@ export interface ChipProps
    * full rounded edges
    */
   rounded?: boolean;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * disabled state
    */
   disabled?: boolean;
+  /**
+   * prevent click default, useful when component is within a `a` link
+   */
+  preventDefault?: boolean;
   /**
    * prevent click propagation
    */
@@ -120,14 +126,12 @@ export const Chip = <Tag extends React.ElementType = "div">({
   color,
   variant,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   disabled,
   onClick,
   onIconClick,
   onRemove,
   rounded,
+  preventDefault,
   stopPropagation,
   as,
   ...aria
@@ -153,10 +157,11 @@ export const Chip = <Tag extends React.ElementType = "div">({
 
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
-      if (stopPropagation) e.stopPropagation();
+      preventDefault && e.preventDefault();
+      stopPropagation && e.stopPropagation();
       onClick?.(e);
     },
-    [onClick, stopPropagation],
+    [onClick, preventDefault, stopPropagation],
   );
 
   const removeHandler = useCallback(
@@ -191,17 +196,14 @@ export const Chip = <Tag extends React.ElementType = "div">({
         <Icon
           data-ref="chipIcon"
           className={classNames("fabric-chipIcon", "m-1 flex-content")}
-          icon={icon}
-          bg={iconBg}
           onClick={onIconClick}
-          color={iconColor}
-          rtlFlip={rtlFlip}
+          {...getIconProps(icon)}
         />
       )}
       {children && (
         <label
           data-ref="chipLabel"
-          className={classNames("fabric-chipLabel", "truncate")}
+          className={classNames("fabric-chipLabel", "truncate flex-1")}
         >
           {children}
         </label>

package/src/components/dropdown/Dropdown.tsx

@@ -221,6 +221,7 @@ const DropdownElement = ({
           onClick: (e) => {
             anchor.props.onClick?.(e);
             e.stopPropagation();
+            e.preventDefault();
           },
         }),
         "data-inner-clickable": "true",

package/src/components/icon/Icon.tsx

@@ -23,23 +23,27 @@
 
 import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { isValidElement, useEffect, useMemo, useState } from "react";
 import {
-  type PaletteType,
   type AriaProps,
   type ColorType,
   type CssProp,
+  type PaletteType,
   type RefProp,
   type SizeType,
   type TestProps,
 } from "../../types";
 import { getColor } from "../../utils";
 
-export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
+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)
    */
@@ -75,6 +79,28 @@ 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 const getIconProps = (props: IconProps): Props => {
+  if (typeof props === "string") {
+    return { icon: props };
+  }
+  return props;
+};
+
 const SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
 const SizeMap: KeyValue<string> = {
   xs: "0.625rem",
@@ -116,6 +142,7 @@ const SizeMap: KeyValue<string> = {
 export const Icon = ({
   ref,
   icon,
+  iconSrc,
   bg,
   color,
   size = "",
@@ -127,7 +154,13 @@ export const Icon = ({
   className,
   onClick,
   ...rest
-}: IconProps) => {
+}: Props) => {
+  const [imageFailed, setImageFailed] = useState(false);
+
+  useEffect(() => {
+    setImageFailed(false);
+  }, [iconSrc]);
+
   /** ***************** style map *******************/
   const styles = useMemo(() => {
     const s: KeyValue = {};
@@ -153,6 +186,7 @@ export const Icon = ({
 
   /** ***************** render icon *******************/
   const iconEl = useMemo(() => {
+    if (isValidElement(icon)) return icon;
     if (!isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -193,13 +227,20 @@ export const Icon = ({
         !!onClick && disabled && "opacity-30 pointer-events-none",
         className,
       )}
-      onClick={onClick}
+      onClick={(e) => {
+        onClick && e.stopPropagation();
+        onClick && e.preventDefault();
+        onClick?.(e);
+      }}
       data-flip={rtlFlip}
       style={styles}
       data-clickable={!!onClick}
       data-inner-clickable={!!onClick}
     >
-      {iconEl}
+      {iconSrc && !imageFailed && (
+        <img src={iconSrc} onError={() => setImageFailed(true)} />
+      )}
+      {(!iconSrc || imageFailed) && iconEl}
     </dfn>
   );
 };

package/src/components/index.ts

@@ -47,7 +47,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/src/components/menu/MenuItem.tsx

@@ -30,8 +30,9 @@ import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
+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.
@@ -60,10 +61,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   color = "primary",
   className,
   icon,
-  iconBg,
-  iconColor,
   appendLabel,
-  rtlFlip,
   altIcon,
   id,
   active,
@@ -98,13 +96,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     return (
       <Icon
         className={classNames("fabric-menuIcon", minimal && "minimal")}
-        icon={path ?? ""}
-        bg={iconBg}
-        color={iconColor}
-        rtlFlip={rtlFlip}
+        {...getIconProps(path ?? "")}
       />
     );
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+  }, [icon, minimal, label]);
 
   const Wrapper = useCallback(
     ({ children, ...rest }: AnyObject) => {

package/src/components/menu/types.ts

@@ -29,15 +29,11 @@ import {
   type ChildrenProp,
   type ColorState,
   type CssProp,
-  type IconProps,
   type TestProps,
 } from "../../types";
+import { IconProps } from "../icon/Icon";
 
-export interface MenuItemProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    IconProps {
+export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * menu id passed via menu.onClick
    */
@@ -54,6 +50,10 @@ export interface MenuItemProps
    * menu color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * item active
    */