@react-fabric/core 1.0.0-beta.9 → 1.0.1

package/src/components/badge/Badge.tsx

@@ -1,10 +1,8 @@
 /*
  * React Fabric
  * @version: 1.0.0
- *
- *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2026 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,
@@ -21,132 +19,167 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isNil, isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { cloneElement, useMemo } from "react";
-import {
-  type BadgeType,
-  type ChildProp,
-  type CssProp,
-  type IconProps,
-  type RefProp,
-} from "../../types";
+import { cn } from "@react-fabric/utilities";
+import { useMemo } from "react";
+import type { ChildProp, CssProp, TestProps } from "../../types";
+import type { CustomColors } from "../../types/colors";
+import { getColor } from "../../utils";
 import { Icon } from "../icon/Icon";
-import classes from "./Badge.module.css";
 
-export interface BadgeProps
-  extends CssProp,
-    RefProp,
-    IconProps,
-    Partial<ChildProp> {
+export interface BadgeType {
   /**
-   * make wrapper a block element
+   * Numeric or text value displayed inside the badge (e.g., a count like "42").
+   * Mutually exclusive with `icon` and `ping`.
    */
-  block?: boolean;
+  value?: string | number;
+
   /**
-   * badge value
+   * Icon path or props rendered inside the badge instead of a value.
+   * Mutually exclusive with `value` and `ping`.
    */
-  value?: number | string;
+  icon?: string;
+
   /**
-   * max value for number display
+   * When true, renders a pulsing dot indicator (used for "unread" or "live" states).
+   * Mutually exclusive with `value` and `icon`.
    */
-  max?: number;
+  ping?: boolean;
+
   /**
-   * ping animation
+   * When true, the badge is positioned inline with its content rather than absolutely positioned.
    */
-  ping?: boolean;
+  inline?: boolean;
+
+  /**
+   * Placement of the badge relative to its child when `inline` is false.
+   * Defaults to `"top-end"`.
+   */
+  placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "start";
+
   /**
-   * badge placement
+   * Background color applied to the badge. Accepts Tailwind palette tokens or any CSS color.
    */
-  placement?:
-    | "top-start"
-    | "top-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "top"
-    | "bottom"
-    | "start"
-    | "end";
+  bg?: CustomColors;
+
+  /**
+   * Text/icon color applied to the badge. Accepts Tailwind palette tokens or any CSS color.
+   */
+  color?: CustomColors;
 }
 
-export const getBadgeProps = (
-  badge?: string | number | BadgeType,
-): AnyObject => {
-  if (isObject(badge)) {
-    return Object.assign({ forButton: true, placement: "" }, badge);
-  } else {
-    return {
-      value: badge,
-      forButton: true,
-      placement: "",
-    };
-  }
+export type BadgeProps = BadgeType &
+  CssProp &
+  TestProps &
+  Partial<ChildProp> &
+  (
+    | {
+        value: string | number;
+        icon?: never;
+        ping?: never;
+      }
+    | {
+        icon: string;
+        value?: never;
+        ping?: never;
+      }
+    | {
+        ping?: boolean;
+        value?: never;
+        icon?: never;
+      }
+  );
+
+/**
+ * Tailwind class names for each badge placement position.
+ * Each value uses absolute positioning relative to the parent container,
+ * with RTL-aware horizontal flipping via Tailwind's `rtl:` variant.
+ */
+const PLACEMENT_STYLES: Record<NonNullable<BadgeProps["placement"]>, string> = {
+  top: "absolute z-1 top-0 inset-x-1/2 -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  start: "absolute z-1 inset-s-0 top-1/2 -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  end: "absolute z-1 inset-e-0 top-1/2 -translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2",
+  "top-start": "absolute z-1 top-0 start-0 -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  "top-end": "absolute z-1 top-0 end-0 -translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2",
+  bottom: "absolute z-1 bottom-0 inset-x-1/2 translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  "bottom-start": "absolute z-1 bottom-0 start-0 translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+  "bottom-end": "absolute z-1 bottom-0 end-0 translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2",
 };
 
-export const Badge = ({
-  ref,
+/**
+ * A small overlay component used to display a numeric value, icon, or pulsing
+ * indicator positioned relative to a child element.
+ *
+ * Commonly used for notification counts, unread indicators, or status badges
+ * on avatars, buttons, or list items.
+ *
+ * @example
+ * ```tsx
+ * import { Badge } from "@react-fabric/core";
+ *
+ * // Numeric badge
+ * <Badge value="42">
+ *    <Avatar name="John" />
+ * </Badge>
+ *
+ * // Icon badge
+ * <Badge icon="icon-[mdi--bell]" />
+ *
+ * // Pulsing indicator
+ * <Badge ping>
+ *    <Icon icon="icon-[mdi--email]" />
+ * </Badge>
+ * ```
+ */
+export function Badge({
   className,
-  value,
-  max,
+  bg = "tint-200",
+  color = "tint-900",
+  icon,
+  inline,
   ping,
-  block,
-  placement = "top-end",
+  value,
   children,
-  // @ts-expect-error ignore
-  forButton = false,
-  icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
-  ...rest
-}: BadgeProps) => {
-  const label = useMemo(() => {
-    if (!isNil(value)) {
-      if (isNumber(value) && max && value > max) {
-        return `${max}+`;
-      }
-      return `${value}`;
+  placement = "top-end",
+  ...props
+}: BadgeProps) {
+  // Render the appropriate badge shape based on which mode is active
+  const el = useMemo(() => {
+    if (icon) {
+      return (
+        <div className={cn("fabric-badgeIcon", "px-[0.325em] py-[0.25em] bg-(--bg) text-(--color) rounded-full leading-0")}>
+          <Icon icon={icon} />
+        </div>
+      );
     }
-  }, [value, max]);
-
-  const innerRef = useMemo(
-    () => mergeRefs(ref, (children as AnyObject)?.props.ref),
-    [ref, (children as AnyObject)?.props.ref],
-  );
+    if (value) {
+      return (
+        <div className={cn("fabric-badgeValue", "px-[0.5em] py-[0.25em] leading-none bg-(--bg) text-(--color) rounded-full")}>
+          {value}
+        </div>
+      );
+    }
+    return <div className={cn("fabric-badgePing", "size-2 bg-(--bg) rounded-full", ping && "animate-ping")} />;
+  }, [icon, value, ping]);
 
-  /**
-   * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
-   */
   return (
-    <div
-      className={classNames(
-        forButton ? "contents" : "relative",
-        block ? "block" : "inline-block",
-      )}
-    >
-      {children &&
-        cloneElement(children as AnyObject, {
-          ...rest,
-          ref: innerRef,
-        })}
-      {(!!ping || label) && (
-        <div
-          data-ref="badge"
-          data-ping={ping}
-          data-placement={placement}
-          className={classNames(
-            classes.badge,
-            className,
-            "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none",
-            forButton && !placement ? "relative" : "absolute",
-          )}
-        >
-          {label && <span className="p-1">{label}</span>}
-          {icon && (
-            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-          )}
-        </div>
-      )}
+    <div {...props} data-ref="badge" role="presentation" className={cn("fabric-badge", "size-fit relative", className)}>
+      <div
+        className={cn(
+          "fabric-badgeContainer",
+          "rounded-full text-[0.625em] select-none pointer-events-none bg-(--bg) size-fit",
+          !inline && PLACEMENT_STYLES[placement],
+        )}
+        // Set CSS custom properties so child elements can reference badge colors
+        style={
+          {
+            "--color": getColor(color),
+            "--bg": getColor(bg),
+          } as React.CSSProperties
+        }
+      >
+        {el}
+      </div>
+      {children}
     </div>
   );
-};
+}