@heroui/avatar 2.2.7 → 2.2.10

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -15,10 +15,10 @@ npm i @heroui/avatar
 ## Contribution
 
 Yes please! See the
-[contributing guidelines](https://github.com/frontio-ai/heroui/blob/master/CONTRIBUTING.md)
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
 for details.
 
 ## License
 
 This project is licensed under the terms of the
-[MIT license](https://github.com/frontio-ai/heroui/blob/master/LICENSE).
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/avatar-group-context.d.mts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ContextType } from './use-avatar-group.mjs';
+import '@heroui/system';
+import '@heroui/theme';
+import '@heroui/react-utils';
+import './avatar.mjs';
+import './use-avatar.mjs';
+import 'tailwind-variants';
+
+declare const AvatarGroupProvider: react.Provider<ContextType>;
+declare const useAvatarGroupContext: () => ContextType;
+
+export { AvatarGroupProvider, useAvatarGroupContext };

package/dist/avatar-group.d.mts

@@ -0,0 +1,14 @@
+import * as _heroui_system from '@heroui/system';
+import { UseAvatarGroupProps } from './use-avatar-group.mjs';
+import 'react';
+import '@heroui/theme';
+import '@heroui/react-utils';
+import './avatar.mjs';
+import './use-avatar.mjs';
+import 'tailwind-variants';
+
+interface AvatarGroupProps extends UseAvatarGroupProps {
+}
+declare const AvatarGroup: _heroui_system.InternalForwardRefRenderFunction<"div", AvatarGroupProps, never>;
+
+export { type AvatarGroupProps, AvatarGroup as default };

package/dist/avatar-group.d.ts

@@ -11,4 +11,4 @@ interface AvatarGroupProps extends UseAvatarGroupProps {
 }
 declare const AvatarGroup: _heroui_system.InternalForwardRefRenderFunction<"div", AvatarGroupProps, never>;
 
-export { AvatarGroupProps, AvatarGroup as default };
+export { type AvatarGroupProps, AvatarGroup as default };

package/dist/avatar-group.js

@@ -299,8 +299,7 @@ var Avatar = (0, import_system2.forwardRef)((props, ref) => {
     ref
   });
   const fallback = (0, import_react3.useMemo)(() => {
-    if (!showFallback && src)
-      return null;
+    if (!showFallback && src) return null;
     if (fallbackComponent) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-label": alt, className: slots.fallback({ class: classNames == null ? void 0 : classNames.fallback }), role: "img", children: fallbackComponent });
     }
@@ -336,5 +335,3 @@ var AvatarGroup = (0, import_system3.forwardRef)((props, ref) => {
 });
 AvatarGroup.displayName = "HeroUI.AvatarGroup";
 var avatar_group_default = AvatarGroup;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});

package/dist/avatar-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   avatar_group_default
-} from "./chunk-NB7VH5TP.mjs";
-import "./chunk-SXMLSBOY.mjs";
+} from "./chunk-H44CU6UA.mjs";
+import "./chunk-A6PX3NG3.mjs";
 import "./chunk-25E6VDTZ.mjs";
 import "./chunk-QH65JCLF.mjs";
 import "./chunk-LTC67JRI.mjs";

package/dist/avatar-icon.d.mts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const AvatarIcon: () => react_jsx_runtime.JSX.Element;
+
+export { AvatarIcon };

package/dist/avatar.d.mts

@@ -0,0 +1,12 @@
+import * as _heroui_system from '@heroui/system';
+import { UseAvatarProps } from './use-avatar.mjs';
+import 'tailwind-variants';
+import 'react';
+import '@heroui/theme';
+import '@heroui/react-utils';
+
+interface AvatarProps extends UseAvatarProps {
+}
+declare const Avatar: _heroui_system.InternalForwardRefRenderFunction<"span", AvatarProps, never>;
+
+export { type AvatarProps, Avatar as default };

package/dist/avatar.d.ts

@@ -9,4 +9,4 @@ interface AvatarProps extends UseAvatarProps {
 }
 declare const Avatar: _heroui_system.InternalForwardRefRenderFunction<"span", AvatarProps, never>;
 
-export { AvatarProps, Avatar as default };
+export { type AvatarProps, Avatar as default };

package/dist/avatar.js

@@ -218,8 +218,7 @@ var Avatar = (0, import_system2.forwardRef)((props, ref) => {
     ref
   });
   const fallback = (0, import_react2.useMemo)(() => {
-    if (!showFallback && src)
-      return null;
+    if (!showFallback && src) return null;
     if (fallbackComponent) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-label": alt, className: slots.fallback({ class: classNames == null ? void 0 : classNames.fallback }), role: "img", children: fallbackComponent });
     }
@@ -232,5 +231,3 @@ var Avatar = (0, import_system2.forwardRef)((props, ref) => {
 });
 Avatar.displayName = "HeroUI.Avatar";
 var avatar_default = Avatar;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});

package/dist/avatar.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   avatar_default
-} from "./chunk-SXMLSBOY.mjs";
+} from "./chunk-A6PX3NG3.mjs";
 import "./chunk-25E6VDTZ.mjs";
 import "./chunk-LTC67JRI.mjs";
 import "./chunk-JUJ53SJZ.mjs";

package/dist/{chunk-SXMLSBOY.mjs → chunk-A6PX3NG3.mjs}

@@ -30,8 +30,7 @@ var Avatar = forwardRef((props, ref) => {
     ref
   });
   const fallback = useMemo(() => {
-    if (!showFallback && src)
-      return null;
+    if (!showFallback && src) return null;
     if (fallbackComponent) {
       return /* @__PURE__ */ jsx("div", { "aria-label": alt, className: slots.fallback({ class: classNames == null ? void 0 : classNames.fallback }), role: "img", children: fallbackComponent });
     }

package/dist/{chunk-NB7VH5TP.mjs → chunk-H44CU6UA.mjs}

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

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+export { default as Avatar, AvatarProps } from './avatar.mjs';
+export { default as AvatarGroup, AvatarGroupProps } from './avatar-group.mjs';
+export { useAvatar } from './use-avatar.mjs';
+export { useAvatarGroup } from './use-avatar-group.mjs';
+export { AvatarIcon } from './avatar-icon.mjs';
+export { AvatarGroupProvider, useAvatarGroupContext } from './avatar-group-context.mjs';
+import '@heroui/system';
+import 'tailwind-variants';
+import 'react';
+import '@heroui/theme';
+import '@heroui/react-utils';
+import 'react/jsx-runtime';

package/dist/index.js

@@ -19,8 +19,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Avatar: () => avatar_default,
   AvatarGroup: () => avatar_group_default,
   AvatarGroupProvider: () => AvatarGroupProvider,
@@ -29,7 +29,7 @@ __export(src_exports, {
   useAvatarGroup: () => useAvatarGroup,
   useAvatarGroupContext: () => useAvatarGroupContext
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/avatar.tsx
 var import_react2 = require("react");
@@ -226,8 +226,7 @@ var Avatar = (0, import_system2.forwardRef)((props, ref) => {
     ref
   });
   const fallback = (0, import_react2.useMemo)(() => {
-    if (!showFallback && src)
-      return null;
+    if (!showFallback && src) return null;
     if (fallbackComponent) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-label": alt, className: slots.fallback({ class: classNames == null ? void 0 : classNames.fallback }), role: "img", children: fallbackComponent });
     }

package/dist/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   avatar_group_default
-} from "./chunk-NB7VH5TP.mjs";
+} from "./chunk-H44CU6UA.mjs";
 import {
   avatar_default
-} from "./chunk-SXMLSBOY.mjs";
+} from "./chunk-A6PX3NG3.mjs";
 import {
   AvatarIcon
 } from "./chunk-25E6VDTZ.mjs";

package/dist/use-avatar-group.d.mts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as _heroui_system from '@heroui/system';
+import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
+import { AvatarGroupVariantProps, SlotsToClasses, AvatarGroupSlots } from '@heroui/theme';
+import { ReactRef } from '@heroui/react-utils';
+import { AvatarProps } from './avatar.mjs';
+import './use-avatar.mjs';
+import 'tailwind-variants';
+
+interface Props extends HTMLHeroUIProps<"div"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLDivElement | null>;
+    /**
+     * Whether the avatars should be displayed in a grid
+     */
+    isGrid?: boolean;
+    /**
+     * The maximum number of visible avatars
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Control the number of avatar not visible
+     */
+    total?: number;
+    /**
+     * This allows you to render a custom count component.
+     */
+    renderCount?: (count: number) => ReactNode;
+    /**
+     * Classname or List of classes to change the classNames of the avatar group.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <AvatarGroup classNames={{
+     *    base: "base-classes",
+     *    count: "count-classes"
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<AvatarGroupSlots>;
+}
+type UseAvatarGroupProps = Props & Omit<AvatarGroupVariantProps, "children" | "isGrid"> & Partial<Pick<AvatarProps, "size" | "color" | "radius" | "isDisabled" | "isBordered">>;
+type ContextType = {
+    size?: AvatarProps["size"];
+    color?: AvatarProps["color"];
+    radius?: AvatarProps["radius"];
+    isGrid?: boolean;
+    isBordered?: AvatarProps["isBordered"];
+    isDisabled?: AvatarProps["isDisabled"];
+};
+declare function useAvatarGroup(props?: UseAvatarGroupProps): {
+    Component: _heroui_system.As<any>;
+    context: ContextType;
+    remainingCount: number;
+    clones: react.ReactElement<any, string | react.JSXElementConstructor<any>>[];
+    renderCount: ((count: number) => ReactNode) | undefined;
+    getAvatarGroupProps: PropGetter;
+    getAvatarGroupCountProps: () => AvatarProps;
+};
+type UseAvatarReturn = ReturnType<typeof useAvatarGroup>;
+
+export { type ContextType, type UseAvatarGroupProps, type UseAvatarReturn, useAvatarGroup };

package/dist/use-avatar-group.d.ts

@@ -59,9 +59,9 @@ declare function useAvatarGroup(props?: UseAvatarGroupProps): {
     remainingCount: number;
     clones: react.ReactElement<any, string | react.JSXElementConstructor<any>>[];
     renderCount: ((count: number) => ReactNode) | undefined;
-    getAvatarGroupProps: PropGetter<Record<string, unknown>, _heroui_system.DOMAttributes<_heroui_system.DOMElement>>;
+    getAvatarGroupProps: PropGetter;
     getAvatarGroupCountProps: () => AvatarProps;
 };
 type UseAvatarReturn = ReturnType<typeof useAvatarGroup>;
 
-export { ContextType, UseAvatarGroupProps, UseAvatarReturn, useAvatarGroup };
+export { type ContextType, type UseAvatarGroupProps, type UseAvatarReturn, useAvatarGroup };

package/dist/use-avatar.d.mts

@@ -0,0 +1,207 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as react from 'react';
+import * as _heroui_system from '@heroui/system';
+import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
+import { AvatarVariantProps, SlotsToClasses, AvatarSlots } from '@heroui/theme';
+import { ReactRef } from '@heroui/react-utils';
+
+interface Props extends HTMLHeroUIProps<"span"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLSpanElement | null>;
+    /**
+     * Ref to the Image DOM node.
+     */
+    imgRef?: ReactRef<HTMLImageElement>;
+    /**
+     * The name of the person in the avatar. -
+     * if **src** has loaded, the name will be used as the **alt** attribute of the **img**
+     * - If **src** is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * Image source.
+     */
+    src?: string;
+    /**
+     * Image alt text.
+     */
+    alt?: string;
+    icon?: React.ReactNode;
+    /**
+     * Whether the avatar can be focused.
+     * @default false
+     */
+    isFocusable?: boolean;
+    /**
+     * If `true`, the fallback logic will be skipped.
+     * @default false
+     */
+    ignoreFallback?: boolean;
+    /**
+     * If `false`, the avatar will show the background color while loading.
+     */
+    showFallback?: boolean;
+    /**
+     * Function to get the initials to display
+     */
+    getInitials?: (name: string) => string;
+    /**
+     * Custom fallback component.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Function called when image failed to load
+     */
+    onError?: () => void;
+    /**
+     * The component used to render the image.
+     * @default "img"
+     */
+    ImgComponent?: React.ElementType;
+    /**
+     * Props to pass to the image component.
+     */
+    imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * Classname or List of classes to change the classNames of the avatar.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Avatar classNames={{
+     *    base:"base-classes",
+     *    img: "image-classes",
+     *    name: "name-classes",
+     *    icon: "icon-classes",
+     *    fallback: "fallback-classes"
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<AvatarSlots>;
+}
+type UseAvatarProps = Props & Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
+declare function useAvatar(originalProps?: UseAvatarProps): {
+    Component: _heroui_system.As<any>;
+    ImgComponent: react.ElementType<any>;
+    src: string | undefined;
+    alt: string;
+    icon: react.ReactNode;
+    name: string | undefined;
+    imgRef: react.RefObject<HTMLImageElement>;
+    slots: {
+        base: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        fallback: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        name: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        fallback: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        name: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            size?: "sm" | "md" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
+            isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"base" | "img" | "fallback" | "name" | "icon"> | undefined;
+    fallback: react.ReactNode;
+    isImgLoaded: boolean;
+    showFallback: boolean;
+    ignoreFallback: boolean;
+    getInitials: (name: string) => string;
+    getAvatarProps: PropGetter;
+    getImageProps: PropGetter;
+};
+type UseAvatarReturn = ReturnType<typeof useAvatar>;
+
+export { type UseAvatarProps, type UseAvatarReturn, useAvatar };

package/dist/use-avatar.d.ts

@@ -1,7 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as react from 'react';
 import * as _heroui_system from '@heroui/system';
-import { PropGetter, DOMAttributes, DOMElement, HTMLHeroUIProps } from '@heroui/system';
+import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
 import { AvatarVariantProps, SlotsToClasses, AvatarSlots } from '@heroui/theme';
 import { ReactRef } from '@heroui/react-utils';
 
@@ -94,114 +94,114 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
         base: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         img: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         fallback: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         name: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         icon: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {
         base: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         img: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         fallback: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         name: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         icon: (slotProps?: ({
             size?: "sm" | "md" | "lg" | undefined;
             color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
-            radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
+            radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
             isDisabled?: boolean | undefined;
+            isBordered?: boolean | undefined;
             isInGroup?: boolean | undefined;
             isInGridGroup?: boolean | undefined;
             disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {};
-    classNames: SlotsToClasses<"name" | "base" | "img" | "icon" | "fallback"> | undefined;
+    classNames: SlotsToClasses<"base" | "img" | "fallback" | "name" | "icon"> | undefined;
     fallback: react.ReactNode;
     isImgLoaded: boolean;
     showFallback: boolean;
     ignoreFallback: boolean;
-    getInitials: (text: string) => string;
-    getAvatarProps: PropGetter<Record<string, unknown>, DOMAttributes<DOMElement>>;
-    getImageProps: PropGetter<Record<string, unknown>, DOMAttributes<DOMElement>>;
+    getInitials: (name: string) => string;
+    getAvatarProps: PropGetter;
+    getImageProps: PropGetter;
 };
 type UseAvatarReturn = ReturnType<typeof useAvatar>;
 
-export { UseAvatarProps, UseAvatarReturn, useAvatar };
+export { type UseAvatarProps, type UseAvatarReturn, useAvatar };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@heroui/avatar",
-  "version": "2.2.7",
+  "version": "2.2.10",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"
   ],
-  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "author": "HeroUI <support@heroui.com>",
   "homepage": "https://heroui.com",
   "license": "MIT",
   "main": "dist/index.js",
@@ -27,16 +27,16 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.0",
-    "@heroui/system": ">=2.4.0"
+    "@heroui/theme": ">=2.4.6",
+    "@heroui/system": ">=2.4.7"
   },
   "dependencies": {
-    "@react-aria/interactions": "3.22.5",
-    "@react-aria/focus": "3.19.0",
-    "@react-aria/utils": "3.26.0",
-    "@heroui/shared-utils": "2.1.3",
-    "@heroui/react-utils": "2.1.4",
-    "@heroui/use-image": "2.1.3"
+    "@react-aria/interactions": "3.23.0",
+    "@react-aria/focus": "3.19.1",
+    "@react-aria/utils": "3.27.0",
+    "@heroui/shared-utils": "2.1.6",
+    "@heroui/react-utils": "2.1.7",
+    "@heroui/use-image": "2.1.6"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",