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

package/dist/esm/components/animations/Indicator.js

@@ -0,0 +1,66 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { Icon as Icon$1 } from '@iconify-icon/react';
+import { shortHash } from '@react-fabric/utilities';
+import { Icon } from '../icon/Icon.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["type"];
+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; }
+var ANIMATION_ICONS = {
+  info: /*#__PURE__*/jsx(Icon$1, {
+    icon: "line-md:alert-circle",
+    className: "rotate-180"
+  }),
+  // <AlertCircleIcon height="1.25em" width="1.25em" className="rotate-180" />,
+  check: /*#__PURE__*/jsx(Icon$1, {
+    icon: "line-md:confirm-circle"
+  }),
+  cross: /*#__PURE__*/jsx(Icon$1, {
+    icon: "line-md:close-circle"
+  }),
+  question: /*#__PURE__*/jsx(Icon$1, {
+    icon: "line-md:question-circle"
+  }),
+  exclaim: /*#__PURE__*/jsx(Icon$1, {
+    icon: "line-md:alert-circle"
+  })
+};
+
+/**
+ * Animated status indicator that renders a themed icon with animation.
+ *
+ * Renders one of five predefined icon types (check, cross, question, exclaim, info)
+ * using the `Icon` component. Useful for displaying success, error, help, alert,
+ * or info states in forms, notifications, and feedback UI.
+ *
+ * @example
+ * ```tsx
+ * import { AnimationIndicator } from "@react-fabric/core";
+ *
+ * // Success indicator
+ * <AnimationIndicator type="check" color="success-500" />
+ *
+ * // Error indicator
+ * <AnimationIndicator type="cross" color="error-500" />
+ *
+ * // Warning indicator
+ * <AnimationIndicator type="exclaim" color="warning-500" />
+ *
+ * // Help indicator
+ * <AnimationIndicator type="question" />
+ * ```
+ */
+function AnimationIndicator(_ref) {
+  var type = _ref.type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Map the type to its corresponding icon and delegate rendering to the Icon component
+  return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
+    icon: ANIMATION_ICONS[type || "info"]
+  }), shortHash());
+}
+
+export { AnimationIndicator };

package/dist/esm/components/animations/Loader.js

@@ -0,0 +1,77 @@
+'use client';
+
+import { cn } from '@react-fabric/utilities';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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.
+ */
+
+/**
+ * Loading overlay that renders an animated icon over a blurred backdrop.
+ *
+ * Renders a centered icon inside a frosted-glass mask, typically used to
+ * indicate loading or disabled states. The mask covers its parent element
+ * and prevents user interaction while visible.
+ *
+ * @example
+ * ```tsx
+ * import { AnimationLoader } from "@react-fabric/core";
+ *
+ * // Loading overlay with medium blur
+ * <div style={{ position: "relative" }}>
+ *     <p>Page content</p>
+ *     <AnimationLoader icon="icon-[mdi--loading]" maskBlur="md" />
+ * </div>
+ *
+ * // Custom color and size
+ * <AnimationLoader icon="icon-[mdi--loading]" color="primary-500" size="3rem" />
+ * ```
+ */
+function AnimationLoader(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-500" : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "2rem" : _ref$size,
+    icon = _ref.icon,
+    maskBlur = _ref.maskBlur;
+  return /*#__PURE__*/jsx("div", {
+    className: cn("fabric-loader-mask", "absolute inset-0 z-10 flex justify-center items-center cursor-wait", maskBlur === "sm" && "backdrop-blur-sm", maskBlur === "md" && "backdrop-blur-md", maskBlur === "lg" && "backdrop-blur-lg"),
+    children: /*#__PURE__*/jsx("div", {
+      "data-ref": "loader",
+      className: "outline outline-tint-300/50 p-4 bg-white/50 dark:bg-black/50 backdrop-blur-xs leading-0 rounded",
+      children: /*#__PURE__*/jsx("div", {
+        className: cn(icon, "aspect-square"),
+        style: {
+          fontSize: size,
+          color: getColor(color)
+        }
+      })
+    })
+  });
+}
+
+export { AnimationLoader };

package/dist/esm/components/animations/LoadingBars.js

@@ -0,0 +1,37 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { AnimationLoader } from './Loader.js';
+import { jsx } from 'react/jsx-runtime';
+
+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; }
+/**
+ * Animated loading indicator that renders a "bars scale fade" spinner.
+ *
+ * A thin wrapper around `AnimationLoader` that provides a pre-configured
+ * bars-style loading animation. Useful for inline loading indicators in
+ * forms, tables, or content areas.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingBars } from "@react-fabric/core";
+ *
+ * // Basic bars spinner
+ * <LoadingBars />
+ *
+ * // Custom color and size
+ * <LoadingBars color="primary-500" size="2rem" />
+ *
+ * // With backdrop blur
+ * <LoadingBars maskBlur="sm" />
+ * ```
+ */
+function LoadingBars(props) {
+  // Delegate to AnimationLoader with a pre-configured bars-scale-fade icon
+  return /*#__PURE__*/jsx(AnimationLoader, _objectSpread({
+    icon: "icon-[svg-spinners--bars-scale-fade]"
+  }, props));
+}
+
+export { LoadingBars };

package/dist/esm/components/animations/LoadingLine.js

@@ -0,0 +1,59 @@
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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.
+ */
+
+/**
+ * Inline loading indicator that renders a top-border shimmer animation.
+ *
+ * A lightweight loading bar displayed as a thin horizontal line at the top
+ * of its container. Useful for page-level or section-level loading states
+ * where a full overlay would be too intrusive.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingLine } from "@react-fabric/core";
+ *
+ * // Page-level loading indicator
+ * <div>
+ *     <LoadingLine />
+ *     <p>Content loads below...</p>
+ * </div>
+ * ```
+ */
+function LoadingLine() {
+  // Renders a thin shimmer bar at the top of the container using CSS animations
+  return /*#__PURE__*/jsx("div", {
+    className: "fabric-loader area-loader relative overflow-x-clip h-0",
+    "data-ref": "loading",
+    children: /*#__PURE__*/jsx("div", {
+      className: "absolute inset-x-0 top-0 z-10 py-px overflow-hidden after:absolute after:block after:inset-0"
+    })
+  });
+}
+
+export { LoadingLine };

package/dist/esm/components/animations/LoadingSpinner.js

@@ -0,0 +1,37 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { AnimationLoader } from './Loader.js';
+import { jsx } from 'react/jsx-runtime';
+
+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; }
+/**
+ * Animated loading indicator that renders an "eclipse" spinner.
+ *
+ * A thin wrapper around `AnimationLoader` that provides a pre-configured
+ * circular loading animation. Useful for inline loading indicators in
+ * images, charts, and data cards.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingSpinner } from "@react-fabric/core";
+ *
+ * // Basic spinner
+ * <LoadingSpinner />
+ *
+ * // Custom color and size
+ * <LoadingSpinner color="primary-500" size="2rem" />
+ *
+ * // With backdrop blur
+ * <LoadingSpinner maskBlur="sm" />
+ * ```
+ */
+function LoadingSpinner(props) {
+  // Delegate to AnimationLoader with a pre-configured eclipse spinner icon
+  return /*#__PURE__*/jsx(AnimationLoader, _objectSpread({
+    icon: "icon-[svg-spinners--eclipse]"
+  }, props));
+}
+
+export { LoadingSpinner };

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

@@ -0,0 +1,88 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { cn } from '@react-fabric/utilities';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../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(color);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: 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__*/jsx("div", {
+      className: cn("rounded aspect-square h-12", classNames === null || classNames === void 0 ? void 0 : classNames.iconPlaceholder),
+      style: {
+        backgroundColor: bgColor
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex-1 flex flex-col gap-2",
+      children: [/*#__PURE__*/jsx("div", {
+        className: cn("h-3 rounded-full", classNames === null || classNames === void 0 ? void 0 : classNames.titlePlaceholder),
+        style: {
+          backgroundColor: bgColor
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: cn("h-2 rounded-full basis-[30%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: cn("h-2 rounded-full basis-[60%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: cn("h-2 rounded-full basis-[30%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: cn("h-2 rounded-full basis-[60%]", classNames === null || classNames === void 0 ? void 0 : classNames.linePlaceholder),
+          style: {
+            backgroundColor: bgColor
+          }
+        })]
+      })]
+    })]
+  }));
+}
+
+export { Skeleton };

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

@@ -3,17 +3,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isSvgPath } from '@react-fabric/utilities';
+import { isSvgPath, cn } from '@react-fabric/utilities';
 import BoringAvatar from 'boring-avatars';
-import classNames from 'classnames';
 import { useState, useMemo } from 'react';
-import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
-import classes from './Avatar.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../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 = 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 = 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 = useMemo(function () {
     setFallback(!avatar);
     return avatar && /*#__PURE__*/jsxs("div", {
       className: "contents",
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames(classes.imgPlaceholder, "absolute inset-0 bg-gray animate-pulse")
+        className: "fabric-imgPlaceholder absolute inset-0 bg-gray animate-fade -z-1"
       }), /*#__PURE__*/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 = useMemo(function () {
     if (fallbackIcon) {
       return isSvgPath(fallbackIcon) ? /*#__PURE__*/jsx("svg", {
         viewBox: viewBox,
+        className: "p-[0.125em]",
         children: /*#__PURE__*/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__*/jsx(BoringAvatar, {
       square: true,
       size: 64,
       variant: variant,
       name: name
     });
-  }, [name, variant, fallbackIcon]);
+  }, [fallbackIcon, variant, name, viewBox]);
   return /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
     role: "presentation",
-    className: classNames(classes.avatar, className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getBgClass(bg), color && getColorClass(color), !rounded && "rounded", rounded && "rounded-full"),
-    onClick: onClick,
+    className: 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]
   }));
-};
+}
 
 export { Avatar };

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

@@ -2,15 +2,14 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
+import { cn } from '@react-fabric/utilities';
 import { useMemo, Children } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import classes from './Avatar.module.css';
 import { jsxs, jsx } from '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 = 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 = useMemo(function () {
     return Children.toArray(children).filter(Boolean);
   }, [children]);
+  // Calculate how many avatars exceed the max (0 if none)
   var diff = useMemo(function () {
-    return totalCount && totalCount > avatars.length && totalCount - avatars.length;
-  }, [avatars, totalCount]);
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
+    return max && avatars.length > max && avatars.length - max;
+  }, [avatars, max]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    className: classNames(classes.avatarGroup, className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
+    className: cn("fabric-avatarGroup", "inline-flex flex-nowrap", className, rounded ? "rounded-full" : "rounded"),
     style: styles,
-    children: [avatars, !!diff && /*#__PURE__*/jsx("dfn", {
-      className: classNames(classes.avatar, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", classes.extra),
+    children: [avatars.slice(0, max), !!diff && /*#__PURE__*/jsx("dfn", {
+      "data-ref": "avatarCount",
+      className: 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__*/jsx("svg", {
         children: /*#__PURE__*/jsx("text", {
           x: "50%",
@@ -69,6 +90,6 @@ var AvatarGroup = function AvatarGroup(_ref) {
       })
     })]
   }));
-};
+}
 
 export { AvatarGroup };