@heroui/avatar 2.2.22 → 2.2.23

package/dist/avatar-group.js

@@ -78,7 +78,7 @@ function useAvatarGroup(props = {}) {
     const isFirstAvatar = index === 0;
     const isLastAvatar = index === childrenWithinMax.length - 1;
     const childProps = {
-      className: (0, import_shared_utils.clsx)(
+      className: (0, import_theme.cn)(
         isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
         isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
       )
@@ -89,7 +89,7 @@ function useAvatarGroup(props = {}) {
     return {
       ref: domRef,
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className)
+        class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className)
       }),
       role: "group",
       ...otherProps
@@ -228,7 +228,7 @@ function useAvatar(originalProps = {}) {
       groupContext == null ? void 0 : groupContext.isGrid
     ]
   );
-  const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
+  const baseStyles = (0, import_theme2.cn)(classNames == null ? void 0 : classNames.base, className);
   const canBeFocused = (0, import_react2.useMemo)(() => {
     return isFocusable || as === "button";
   }, [isFocusable, as]);
@@ -240,7 +240,7 @@ function useAvatar(originalProps = {}) {
       "data-focus": (0, import_shared_utils2.dataAttr)(isFocused),
       "data-focus-visible": (0, import_shared_utils2.dataAttr)(isFocusVisible),
       className: slots.base({
-        class: (0, import_shared_utils2.clsx)(baseStyles, props == null ? void 0 : props.className)
+        class: (0, import_theme2.cn)(baseStyles, props == null ? void 0 : props.className)
       }),
       ...(0, import_shared_utils2.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
     }),

package/dist/avatar-group.mjs

@@ -1,11 +1,11 @@
 "use client";
 import {
   avatar_group_default
-} from "./chunk-5OQ5EBOM.mjs";
-import "./chunk-DPUNBZPN.mjs";
+} from "./chunk-4WIG5FTT.mjs";
+import "./chunk-CV4BWJDJ.mjs";
 import "./chunk-25E6VDTZ.mjs";
-import "./chunk-QH65JCLF.mjs";
-import "./chunk-VWM2HFFA.mjs";
+import "./chunk-R5FIEVLT.mjs";
+import "./chunk-7IUJUTXK.mjs";
 import "./chunk-JUJ53SJZ.mjs";
 export {
   avatar_group_default as default

package/dist/avatar.js

@@ -147,7 +147,7 @@ function useAvatar(originalProps = {}) {
       groupContext == null ? void 0 : groupContext.isGrid
     ]
   );
-  const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
   const canBeFocused = (0, import_react.useMemo)(() => {
     return isFocusable || as === "button";
   }, [isFocusable, as]);
@@ -159,7 +159,7 @@ function useAvatar(originalProps = {}) {
       "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
       "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
+        class: (0, import_theme.cn)(baseStyles, props == null ? void 0 : props.className)
       }),
       ...(0, import_shared_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
     }),

package/dist/avatar.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   avatar_default
-} from "./chunk-DPUNBZPN.mjs";
+} from "./chunk-CV4BWJDJ.mjs";
 import "./chunk-25E6VDTZ.mjs";
-import "./chunk-VWM2HFFA.mjs";
+import "./chunk-7IUJUTXK.mjs";
 import "./chunk-JUJ53SJZ.mjs";
 export {
   avatar_default as default

package/dist/{chunk-5OQ5EBOM.mjs → chunk-4WIG5FTT.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   avatar_default
-} from "./chunk-DPUNBZPN.mjs";
+} from "./chunk-CV4BWJDJ.mjs";
 import {
   useAvatarGroup
-} from "./chunk-QH65JCLF.mjs";
+} from "./chunk-R5FIEVLT.mjs";
 import {
   AvatarGroupProvider
 } from "./chunk-JUJ53SJZ.mjs";

package/dist/{chunk-VWM2HFFA.mjs → chunk-7IUJUTXK.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-JUJ53SJZ.mjs";
 
 // src/use-avatar.ts
-import { avatar } from "@heroui/theme";
+import { avatar, cn } from "@heroui/theme";
 import { useProviderContext } from "@heroui/system";
 import { useDOMRef, filterDOMProps } from "@heroui/react-utils";
-import { clsx, dataAttr, mergeProps, safeInitials } from "@heroui/shared-utils";
+import { dataAttr, mergeProps, safeInitials } from "@heroui/shared-utils";
 import { useFocusRing } from "@react-aria/focus";
 import { useMemo, useCallback } from "react";
 import { useImage } from "@heroui/use-image";
@@ -84,7 +84,7 @@ function useAvatar(originalProps = {}) {
       groupContext == null ? void 0 : groupContext.isGrid
     ]
   );
-  const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
+  const baseStyles = cn(classNames == null ? void 0 : classNames.base, className);
   const canBeFocused = useMemo(() => {
     return isFocusable || as === "button";
   }, [isFocusable, as]);
@@ -96,7 +96,7 @@ function useAvatar(originalProps = {}) {
       "data-focus": dataAttr(isFocused),
       "data-focus-visible": dataAttr(isFocusVisible),
       className: slots.base({
-        class: clsx(baseStyles, props == null ? void 0 : props.className)
+        class: cn(baseStyles, props == null ? void 0 : props.className)
       }),
       ...mergeProps(otherProps, hoverProps, canBeFocused ? focusProps : {})
     }),

package/dist/{chunk-DPUNBZPN.mjs → chunk-CV4BWJDJ.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-25E6VDTZ.mjs";
 import {
   useAvatar
-} from "./chunk-VWM2HFFA.mjs";
+} from "./chunk-7IUJUTXK.mjs";
 
 // src/avatar.tsx
 import { useMemo } from "react";

package/dist/{chunk-QH65JCLF.mjs → chunk-R5FIEVLT.mjs}

@@ -1,9 +1,9 @@
 "use client";
 
 // src/use-avatar-group.ts
-import { avatarGroup } from "@heroui/theme";
+import { avatarGroup, cn } from "@heroui/theme";
 import { useDOMRef } from "@heroui/react-utils";
-import { clsx, compact } from "@heroui/shared-utils";
+import { compact } from "@heroui/shared-utils";
 import { getValidChildren } from "@heroui/react-utils";
 import { cloneElement, useMemo } from "react";
 function useAvatarGroup(props = {}) {
@@ -45,7 +45,7 @@ function useAvatarGroup(props = {}) {
     const isFirstAvatar = index === 0;
     const isLastAvatar = index === childrenWithinMax.length - 1;
     const childProps = {
-      className: clsx(
+      className: cn(
         isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
         isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
       )
@@ -56,7 +56,7 @@ function useAvatarGroup(props = {}) {
     return {
       ref: domRef,
       className: slots.base({
-        class: clsx(classNames == null ? void 0 : classNames.base, className)
+        class: cn(classNames == null ? void 0 : classNames.base, className)
       }),
       role: "group",
       ...otherProps

package/dist/index.js

@@ -155,7 +155,7 @@ function useAvatar(originalProps = {}) {
       groupContext == null ? void 0 : groupContext.isGrid
     ]
   );
-  const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
   const canBeFocused = (0, import_react.useMemo)(() => {
     return isFocusable || as === "button";
   }, [isFocusable, as]);
@@ -167,7 +167,7 @@ function useAvatar(originalProps = {}) {
       "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
       "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
+        class: (0, import_theme.cn)(baseStyles, props == null ? void 0 : props.className)
       }),
       ...(0, import_shared_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
     }),
@@ -293,7 +293,7 @@ function useAvatarGroup(props = {}) {
     const isFirstAvatar = index === 0;
     const isLastAvatar = index === childrenWithinMax.length - 1;
     const childProps = {
-      className: (0, import_shared_utils2.clsx)(
+      className: (0, import_theme2.cn)(
         isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
         isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
       )
@@ -304,7 +304,7 @@ function useAvatarGroup(props = {}) {
     return {
       ref: domRef,
       className: slots.base({
-        class: (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className)
+        class: (0, import_theme2.cn)(classNames == null ? void 0 : classNames.base, className)
       }),
       role: "group",
       ...otherProps

package/dist/index.mjs

@@ -1,19 +1,19 @@
 "use client";
 import {
   avatar_group_default
-} from "./chunk-5OQ5EBOM.mjs";
+} from "./chunk-4WIG5FTT.mjs";
 import {
   avatar_default
-} from "./chunk-DPUNBZPN.mjs";
+} from "./chunk-CV4BWJDJ.mjs";
 import {
   AvatarIcon
 } from "./chunk-25E6VDTZ.mjs";
 import {
   useAvatarGroup
-} from "./chunk-QH65JCLF.mjs";
+} from "./chunk-R5FIEVLT.mjs";
 import {
   useAvatar
-} from "./chunk-VWM2HFFA.mjs";
+} from "./chunk-7IUJUTXK.mjs";
 import {
   AvatarGroupProvider,
   useAvatarGroupContext

package/dist/use-avatar-group.js

@@ -68,7 +68,7 @@ function useAvatarGroup(props = {}) {
     const isFirstAvatar = index === 0;
     const isLastAvatar = index === childrenWithinMax.length - 1;
     const childProps = {
-      className: (0, import_shared_utils.clsx)(
+      className: (0, import_theme.cn)(
         isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
         isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
       )
@@ -79,7 +79,7 @@ function useAvatarGroup(props = {}) {
     return {
       ref: domRef,
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className)
+        class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className)
       }),
       role: "group",
       ...otherProps

package/dist/use-avatar-group.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   useAvatarGroup
-} from "./chunk-QH65JCLF.mjs";
+} from "./chunk-R5FIEVLT.mjs";
 export {
   useAvatarGroup
 };

package/dist/use-avatar.js

@@ -113,7 +113,7 @@ function useAvatar(originalProps = {}) {
       groupContext == null ? void 0 : groupContext.isGrid
     ]
   );
-  const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
   const canBeFocused = (0, import_react.useMemo)(() => {
     return isFocusable || as === "button";
   }, [isFocusable, as]);
@@ -125,7 +125,7 @@ function useAvatar(originalProps = {}) {
       "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
       "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
       className: slots.base({
-        class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
+        class: (0, import_theme.cn)(baseStyles, props == null ? void 0 : props.className)
       }),
       ...(0, import_shared_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
     }),

package/dist/use-avatar.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   useAvatar
-} from "./chunk-VWM2HFFA.mjs";
+} from "./chunk-7IUJUTXK.mjs";
 import "./chunk-JUJ53SJZ.mjs";
 export {
   useAvatar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/avatar",
-  "version": "2.2.22",
+  "version": "2.2.23",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"
@@ -27,7 +27,7 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.17",
+    "@heroui/theme": ">=2.4.23",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {