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

package/dist/cjs/components/animations/Skeleton.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
+
+var _excluded = ["className", "classNames", "color"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Content placeholder that renders a grayed-out card mockup with icon, title, and line slots.
+ *
+ * Displays a pre-styled skeleton card layout (icon area + title + two rows of text lines)
+ * to occupy space while real content loads. Useful for list items, cards, panels, and
+ * virtualized lists.
+ *
+ * @example
+ * ```tsx
+ * import { Skeleton } from "@react-fabric/core";
+ *
+ * // Basic skeleton placeholder
+ * <Skeleton />
+ *
+ * // Custom color
+ * <Skeleton color="primary-100" />
+ *
+ * // Custom slot styling
+ * <Skeleton classNames={{ titlePlaceholder: "w-2/3" }} />
+ * ```
+ */
+function Skeleton(_ref) {
+  var className = _ref.className,
+    classNames = _ref.classNames,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-200" : _ref$color,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var bgColor = getColor.getColor(color);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: utilities.cn("fabric-skeleton", "p-2 animate-fade flex gap-2 max-w-lg", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-ref": "skeleton"
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: utilities.cn("rounded aspect-square h-12", classNames === null || classNames === void 0 ? void 0 : classNames.iconPlaceholder),
+      style: {
+        backgroundColor: bgColor
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 flex flex-col gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: utilities.cn("h-3 rounded-full", classNames === null || classNames === void 0 ? void 0 : classNames.titlePlaceholder),
+        style: {
+          backgroundColor: bgColor
+        }
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: utilities.cn("h-2 rounded-full basis-[30%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: utilities.cn("h-2 rounded-full basis-[60%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: utilities.cn("h-2 rounded-full basis-[30%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: utilities.cn("h-2 rounded-full basis-[60%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        })]
+      })]
+    })]
+  }));
+}
+
+exports.Skeleton = Skeleton;

package/dist/cjs/components/avatar/Avatar.js

@@ -5,15 +5,13 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
 var BoringAvatar = require('boring-avatars');
-var classNames = require('classnames');
 var react = require('react');
-var getColor = require('../../utils/getColor.js');
-var Avatar_module = require('./Avatar.module.css');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 
-var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "onClick"];
+var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "preventDefault", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SizeMap = {
   xs: "0.875rem",
   sm: "1.125rem",
@@ -23,9 +21,24 @@ var SizeMap = {
 };
 
 /**
- * An avatar is a graphical representation of a user's identity.
+ * User avatar that renders an image with a Boring Avatar fallback.
+ *
+ * Displays a user image, falling back to a Boring Avatar (or text initials)
+ * when no image is provided or the image fails to load. Supports four
+ * Boring Avatar variants (beam, text, pixel, bauhaus) and custom SVG/icon fallbacks.
+ *
+ * @see {@link https://boringavatars.com/}
+ *
+ *  @example
+ * ```tsx
+ * import { Avatar } from "@react-fabric/core";
+ *
+ * <Avatar name="Ada Lovelace" avatar="/ada.jpg" />
+ * <Avatar name="John Doe" variant="pixel" size="lg" />
+ * <Avatar name="Jane" fallbackIcon="icon-[mdi--user]" variant="text" />
+ * ```
  */
-var Avatar = function Avatar(_ref) {
+function Avatar(_ref) {
   var ref = _ref.ref,
     name = _ref.name,
     avatar = _ref.avatar,
@@ -40,14 +53,15 @@ var Avatar = function Avatar(_ref) {
     className = _ref.className,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
-    onClick = _ref.onClick,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    preventDefault = _ref.preventDefault,
+    _onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = react.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     fallback = _useState2[0],
     setFallback = _useState2[1];
 
-  /** ***************** style map *******************/
+  // Compute inline styles from props (memoized to prevent re-renders)
   var styles = react.useMemo(function () {
     var s = {};
     if (bg) {
@@ -65,13 +79,13 @@ var Avatar = function Avatar(_ref) {
     return s;
   }, [bg, color, size]);
 
-  /** ***************** render icon *******************/
+  // Render avatar image with a fade-in placeholder behind it
   var avatarImage = react.useMemo(function () {
     setFallback(!avatar);
     return avatar && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "contents",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Avatar_module.imgPlaceholder, "absolute inset-0 bg-gray animate-pulse")
+        className: "fabric-imgPlaceholder absolute inset-0 bg-gray animate-fade -z-1"
       }), /*#__PURE__*/jsxRuntime.jsx("img", {
         src: avatar,
         alt: avatar,
@@ -86,10 +100,13 @@ var Avatar = function Avatar(_ref) {
       })]
     });
   }, [avatar]);
+
+  // Render fallback: custom icon, text initials, or Boring Avatar
   var fallbackAvatar = react.useMemo(function () {
     if (fallbackIcon) {
       return utilities.isSvgPath(fallbackIcon) ? /*#__PURE__*/jsxRuntime.jsx("svg", {
         viewBox: viewBox,
+        className: "p-[0.125em]",
         children: /*#__PURE__*/jsxRuntime.jsx("path", {
           fill: "currentColor",
           d: fallbackIcon.toString()
@@ -99,8 +116,8 @@ var Avatar = function Avatar(_ref) {
       });
     }
     if (variant === "text") {
-      var _name$match;
-      var _ref2 = (_name$match = name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/)) !== null && _name$match !== void 0 ? _name$match : [],
+      // Extract initials: "John Doe" -> "JD", "Jane" -> "JA"
+      var _ref2 = name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/),
         _ref3 = _slicedToArray(_ref2, 4),
         first = _ref3[1],
         second = _ref3[2],
@@ -121,23 +138,27 @@ var Avatar = function Avatar(_ref) {
         })
       });
     }
+    // Default: generate a Boring Avatar from the name
     return /*#__PURE__*/jsxRuntime.jsx(BoringAvatar, {
       square: true,
       size: 64,
       variant: variant,
       name: name
     });
-  }, [name, variant, fallbackIcon]);
+  }, [fallbackIcon, variant, name, viewBox]);
   return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
     role: "presentation",
-    className: classNames(Avatar_module.avatar, className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), !rounded && "rounded", rounded && "rounded-full"),
-    onClick: onClick,
+    className: utilities.cn("fabric-avatar", rounded ? "rounded-full" : "rounded", "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center is-clickable:cursor-pointer", className),
+    onClick: function onClick(e) {
+      if (preventDefault) e.preventDefault();
+      _onClick === null || _onClick === void 0 || _onClick(e);
+    },
     style: styles,
-    "data-clickable": !!onClick,
+    "data-clickable": !!_onClick,
     ref: ref
-  }, aria), {}, {
+  }, props), {}, {
     children: [!fallback && avatarImage, fallback && fallbackAvatar]
   }));
-};
+}
 
 exports.Avatar = Avatar;

package/dist/cjs/components/avatar/AvatarGroup.js

@@ -2,15 +2,14 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var Avatar_module = require('./Avatar.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "children", "className", "totalCount", "rounded", "size"];
+var _excluded = ["ref", "children", "className", "max", "rounded", "size"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SizeMap = {
   xs: "0.875rem",
   sm: "1.125rem",
@@ -20,17 +19,34 @@ var SizeMap = {
 };
 
 /**
- * Group multiple avatars together
+ * Horizontal group of avatars with an overflow count badge.
+ *
+ * Renders its avatar children in a flex row, truncating to `max` visible
+ * avatars and appending a "+N" badge for the remainder. Each avatar is
+ * sized according to the `size` prop.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarGroup } from "@react-fabric/core";
+ *
+ * <AvatarGroup max={3} size="md">
+ *     <Avatar name="John Doe" avatar="/john.jpg" />
+ *     <Avatar name="Jane Smith" avatar="/jane.jpg" />
+ *     <Avatar name="Alice Johnson" avatar="/alice.jpg" />
+ *     <Avatar name="Bob Brown" avatar="/bob.jpg" />
+ * </AvatarGroup>
+ * // Renders 3 avatars + a "+1" badge
+ * ```
  */
-var AvatarGroup = function AvatarGroup(_ref) {
+function AvatarGroup(_ref) {
   var ref = _ref.ref,
     children = _ref.children,
     className = _ref.className,
-    totalCount = _ref.totalCount,
+    max = _ref.max,
     rounded = _ref.rounded,
     size = _ref.size,
-    aria = _objectWithoutProperties(_ref, _excluded);
-  /** ***************** style map *******************/
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Compute inline styles from size prop (memoized to prevent re-renders)
   var styles = useEffectDebugger.useMemoDebugger(function () {
     var s = {};
     if (size && !(size in SizeMap)) {
@@ -41,18 +57,23 @@ var AvatarGroup = function AvatarGroup(_ref) {
     }
     return s;
   }, [size], "Icon styles");
+
+  // Normalize children to an array, filtering out falsy values
+  // eslint-disable-next-line @eslint-react/no-children-to-array
   var avatars = react.useMemo(function () {
     return react.Children.toArray(children).filter(Boolean);
   }, [children]);
+  // Calculate how many avatars exceed the max (0 if none)
   var diff = react.useMemo(function () {
-    return totalCount && totalCount > avatars.length && totalCount - avatars.length;
-  }, [avatars, totalCount]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
+    return max && avatars.length > max && avatars.length - max;
+  }, [avatars, max]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    className: classNames(Avatar_module.avatarGroup, className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
+    className: utilities.cn("fabric-avatarGroup", "inline-flex flex-nowrap", className, rounded ? "rounded-full" : "rounded"),
     style: styles,
-    children: [avatars, !!diff && /*#__PURE__*/jsxRuntime.jsx("dfn", {
-      className: classNames(Avatar_module.avatar, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", Avatar_module.extra),
+    children: [avatars.slice(0, max), !!diff && /*#__PURE__*/jsxRuntime.jsx("dfn", {
+      "data-ref": "avatarCount",
+      className: utilities.cn("fabric-avatar", "fabric-avatarGroup--extra", "select-none relative overflow-hidden inline-block box-content bg-muted leading-none not-italic text-center"),
       children: /*#__PURE__*/jsxRuntime.jsx("svg", {
         children: /*#__PURE__*/jsxRuntime.jsx("text", {
           x: "50%",
@@ -69,6 +90,6 @@ var AvatarGroup = function AvatarGroup(_ref) {
       })
     })]
   }));
-};
+}
 
 exports.AvatarGroup = AvatarGroup;

package/dist/cjs/components/badge/Badge.js

@@ -3,82 +3,104 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
-var Icon = require('../icon/Icon.js');
-var Badge_module = require('./Badge.module.css');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
+var Icon = require('../icon/Icon.js');
 
-var _excluded = ["ref", "className", "value", "max", "ping", "block", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
+var _excluded = ["className", "bg", "color", "icon", "inline", "ping", "value", "children", "placement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var getBadgeProps = function getBadgeProps(badge) {
-  if (utilities.isObject(badge)) {
-    return Object.assign({
-      forButton: true,
-      placement: ""
-    }, badge);
-  } else {
-    return {
-      value: badge,
-      forButton: true,
-      placement: ""
-    };
-  }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * 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.
+ */
+var PLACEMENT_STYLES = {
+  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"
 };
-var Badge = function Badge(_ref) {
-  var ref = _ref.ref,
-    className = _ref.className,
-    value = _ref.value,
-    max = _ref.max,
+
+/**
+ * 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>
+ * ```
+ */
+function Badge(_ref) {
+  var className = _ref.className,
+    _ref$bg = _ref.bg,
+    bg = _ref$bg === void 0 ? "tint-200" : _ref$bg,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-900" : _ref$color,
+    icon = _ref.icon,
+    inline = _ref.inline,
     ping = _ref.ping,
-    block = _ref.block,
+    value = _ref.value,
+    children = _ref.children,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "top-end" : _ref$placement,
-    children = _ref.children,
-    _ref$forButton = _ref.forButton,
-    forButton = _ref$forButton === void 0 ? false : _ref$forButton,
-    icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var label = react.useMemo(function () {
-    if (!utilities.isNil(value)) {
-      if (utilities.isNumber(value) && max && value > max) {
-        return "".concat(max, "+");
-      }
-      return "".concat(value);
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Render the appropriate badge shape based on which mode is active
+  var el = react.useMemo(function () {
+    if (icon) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: utilities.cn("fabric-badgeIcon", "px-[0.325em] py-[0.25em] bg-(--bg) text-(--color) rounded-full leading-0"),
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          icon: icon
+        })
+      });
     }
-  }, [value, max]);
-  var innerRef = react.useMemo(function () {
-    return utilities.mergeRefs(ref, children === null || children === void 0 ? void 0 : children.props.ref);
-  }, [ref, children === null || children === void 0 ? void 0 : children.props.ref]);
-
-  /**
-   * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
-   */
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
-    children: [children && /*#__PURE__*/react.cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
-      ref: innerRef
-    })), (!!ping || label) && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "data-ref": "badge",
-      "data-ping": ping,
-      "data-placement": placement,
-      className: classNames(Badge_module.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"),
-      children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "p-1",
-        children: label
-      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip
-      })]
-    })]
-  });
-};
+    if (value) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: utilities.cn("fabric-badgeValue", "px-[0.5em] py-[0.25em] leading-none bg-(--bg) text-(--color) rounded-full"),
+        children: value
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: utilities.cn("fabric-badgePing", "size-2 bg-(--bg) rounded-full", ping && "animate-ping")
+    });
+  }, [icon, value, ping]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    "data-ref": "badge",
+    role: "presentation",
+    className: utilities.cn("fabric-badge", "size-fit relative", className),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: utilities.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.getColor(color),
+        "--bg": getColor.getColor(bg)
+      },
+      children: el
+    }), children]
+  }));
+}
 
 exports.Badge = Badge;
-exports.getBadgeProps = getBadgeProps;