@kopexa/avatar 1.0.1 → 1.0.2

package/dist/index.js

@@ -31,83 +31,156 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Avatar: () => Avatar
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/avatar.tsx
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+
+// src/use-avatar.ts
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme = require("@kopexa/theme");
-var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Avatar = (props) => {
+
+// src/avatar-group.context.ts
+var import_react_utils = require("@kopexa/react-utils");
+var [AvatarGroupProvider, useAvatarGroupContext] = (0, import_react_utils.createContext)({
+  name: "AvatarGroupContext",
+  strict: false
+});
+
+// src/use-avatar.ts
+function useAvatar(originalProps = {}) {
+  var _a, _b, _c, _d, _e;
+  const groupContext = useAvatarGroupContext();
+  const isInGroup = !!groupContext;
   const {
-    className,
-    size,
-    radius,
-    name,
-    color,
+    ref,
     src,
-    onLoadingStatusChange,
-    isBordered,
-    isDisabled,
-    imgRef,
+    name,
     classNames,
-    alt,
-    ...rest
-  } = props;
-  const [status, setStatus] = (0, import_react.useState)(
-    "idle"
+    alt = name || "avatar",
+    imgRef: imgRefProp,
+    color = (_a = groupContext == null ? void 0 : groupContext.color) != null ? _a : "default",
+    radius = (_b = groupContext == null ? void 0 : groupContext.radius) != null ? _b : "full",
+    size = (_c = groupContext == null ? void 0 : groupContext.size) != null ? _c : "md",
+    isBordered = (_d = groupContext == null ? void 0 : groupContext.isBordered) != null ? _d : false,
+    isDisabled = (_e = groupContext == null ? void 0 : groupContext.isDisabled) != null ? _e : false,
+    className,
+    onError,
+    onLoadingStatusChange,
+    ...otherProps
+  } = originalProps;
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const handleLoadingStatusChange = (0, import_react.useCallback)(
+    (status2) => {
+      onLoadingStatusChange == null ? void 0 : onLoadingStatusChange(status2);
+      setStatus(status2);
+    },
+    [onLoadingStatusChange]
   );
-  const styles = (0, import_theme.avatar)({ size, radius, color, isBordered, isDisabled });
-  const handleLoadingStatusChange = (status2) => {
-    onLoadingStatusChange == null ? void 0 : onLoadingStatusChange(status2);
-    setStatus(status2);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    AvatarPrimitive.Root,
-    {
+  const slots = (0, import_react.useMemo)(
+    () => {
+      var _a2;
+      return (0, import_theme.avatar)({
+        color,
+        radius,
+        size,
+        isBordered,
+        isDisabled,
+        isInGroup,
+        isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
+      });
+    },
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      isInGroup,
+      groupContext == null ? void 0 : groupContext.isGrid
+    ]
+  );
+  const baseStyles = (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.root, className);
+  const getAvatarProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ref,
       "data-slot": "avatar",
-      className: styles.root({ className }),
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          AvatarPrimitive.Image,
-          {
-            "data-slot": "avatar-image",
-            src,
-            "data-status": status,
-            className: styles.img(),
-            onLoadingStatusChange: handleLoadingStatusChange,
-            ref: imgRef,
-            alt
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", children: name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: styles.name({
-              className: classNames == null ? void 0 : classNames.name
-            }),
-            role: "img",
-            "aria-label": alt,
-            children: (0, import_shared_utils.getInitials)(name)
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: styles.icon({
-              className: classNames == null ? void 0 : classNames.icon
-            }),
-            role: "img",
-            "aria-label": alt,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
-          }
-        ) })
-      ]
-    }
+      className: slots.root({
+        class: (0, import_shared_utils.cn)(baseStyles, props == null ? void 0 : props.className)
+      }),
+      ...otherProps
+    }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize this
+    [slots, baseStyles, otherProps, ref]
   );
+  const getImageProps = (0, import_react.useCallback)(
+    () => ({
+      "data-slot": "avatar-image",
+      "data-status": status,
+      src,
+      onLoadingStatusChange: handleLoadingStatusChange,
+      ref: imgRefProp,
+      alt,
+      onError,
+      className: slots.img({
+        class: classNames == null ? void 0 : classNames.img
+      })
+    }),
+    [
+      status,
+      src,
+      handleLoadingStatusChange,
+      imgRefProp,
+      alt,
+      slots.img,
+      classNames == null ? void 0 : classNames.img,
+      onError
+    ]
+  );
+  return {
+    src,
+    alt,
+    slots,
+    classNames,
+    name,
+    getAvatarProps,
+    getImageProps
+  };
+}
+
+// src/avatar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Avatar = (props) => {
+  const { alt, getAvatarProps, getImageProps, slots, classNames, name } = useAvatar(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarPrimitive.Root, { ...getAvatarProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarPrimitive.Image, { ...getImageProps() }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", children: name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: slots.name({
+          className: classNames == null ? void 0 : classNames.name
+        }),
+        role: "img",
+        "aria-label": alt,
+        children: (0, import_shared_utils2.getInitials)(name)
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: slots.icon({
+          className: classNames == null ? void 0 : classNames.icon
+        }),
+        role: "img",
+        "aria-label": alt,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+      }
+    ) })
+  ] });
 };
 var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "svg",
@@ -136,7 +209,100 @@ var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ]
   }
 );
+
+// src/use-avatar-group.ts
+var import_react_utils2 = require("@kopexa/react-utils");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
+var import_react2 = require("react");
+function useAvatarGroup(props = {}) {
+  const {
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    radius,
+    children,
+    isBordered,
+    isDisabled,
+    isGrid,
+    className,
+    classNames,
+    ...otherProps
+  } = props;
+  const context = (0, import_react2.useMemo)(
+    () => ({
+      size,
+      color,
+      radius,
+      isGrid,
+      isBordered,
+      isDisabled
+    }),
+    [size, color, radius, isGrid, isBordered, isDisabled]
+  );
+  const slots = (0, import_react2.useMemo)(
+    () => (0, import_theme2.avatarGroup)({ className, isGrid }),
+    [className, isGrid]
+  );
+  const validChildren = (0, import_react_utils2.getValidChildren)(children);
+  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
+  const remainingCount = total ? total : max != null ? validChildren.length - max : -1;
+  const clones = childrenWithinMax.map((child, index) => {
+    const isFirstAvatar = index === 0;
+    const isLastAvatar = index === childrenWithinMax.length - 1;
+    const childProps = {
+      className: (0, import_shared_utils3.cn)(
+        isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
+        isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
+      )
+    };
+    return (0, import_react2.cloneElement)(child, (0, import_shared_utils3.compact)(childProps));
+  });
+  const getAvatarGroupProps = () => {
+    return {
+      ref,
+      className: slots.base({
+        class: (0, import_shared_utils3.cn)(classNames == null ? void 0 : classNames.base, className)
+      }),
+      role: "group",
+      ...otherProps
+    };
+  };
+  const getAvatarGroupCountProps = () => {
+    return {
+      className: slots.count({
+        class: classNames == null ? void 0 : classNames.count
+      })
+    };
+  };
+  return {
+    context,
+    remainingCount,
+    clones,
+    getAvatarGroupProps,
+    getAvatarGroupCountProps
+  };
+}
+
+// src/avatar-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AvatarGroup(props) {
+  const {
+    clones,
+    context,
+    remainingCount,
+    getAvatarGroupCountProps,
+    getAvatarGroupProps
+  } = useAvatarGroup(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...getAvatarGroupProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(AvatarGroupProvider, { value: context, children: [
+    clones,
+    remainingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Avatar, { ...getAvatarGroupCountProps(), name: `+${remainingCount}` })
+  ] }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Avatar
+  Avatar,
+  AvatarGroup
 });

package/dist/index.mjs

@@ -1,7 +1,14 @@
 "use client";
+import {
+  AvatarGroup
+} from "./chunk-HBUPEI6X.mjs";
 import {
   Avatar
-} from "./chunk-EVKHBB7E.mjs";
+} from "./chunk-KPWT5YIU.mjs";
+import "./chunk-J37VYVJO.mjs";
+import "./chunk-CI55TF4E.mjs";
+import "./chunk-FBUAHX2S.mjs";
 export {
-  Avatar
+  Avatar,
+  AvatarGroup
 };

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

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { PropGetter } from '@kopexa/react-utils';
+import { SlotsToClasses, AvatarGroupSlots, AvatarGroupVariantProps } from '@kopexa/theme';
+import { AvatarProps } from './avatar.mjs';
+import 'react/jsx-runtime';
+import './use-avatar.mjs';
+import 'tailwind-variants';
+
+type Props = ComponentProps<"div"> & {
+    /**
+     * The maximum number of visible avatars
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Control the number of avatar not visible
+     */
+    total?: number;
+    /**
+     * 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"> & 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): {
+    context: ContextType;
+    remainingCount: number;
+    clones: react.ReactElement<unknown, string | react.JSXElementConstructor<any>>[];
+    getAvatarGroupProps: PropGetter;
+    getAvatarGroupCountProps: () => AvatarProps;
+};
+
+export { type ContextType, type UseAvatarGroupProps, useAvatarGroup };

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

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { PropGetter } from '@kopexa/react-utils';
+import { SlotsToClasses, AvatarGroupSlots, AvatarGroupVariantProps } from '@kopexa/theme';
+import { AvatarProps } from './avatar.js';
+import 'react/jsx-runtime';
+import './use-avatar.js';
+import 'tailwind-variants';
+
+type Props = ComponentProps<"div"> & {
+    /**
+     * The maximum number of visible avatars
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Control the number of avatar not visible
+     */
+    total?: number;
+    /**
+     * 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"> & 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): {
+    context: ContextType;
+    remainingCount: number;
+    clones: react.ReactElement<unknown, string | react.JSXElementConstructor<any>>[];
+    getAvatarGroupProps: PropGetter;
+    getAvatarGroupCountProps: () => AvatarProps;
+};
+
+export { type ContextType, type UseAvatarGroupProps, useAvatarGroup };

package/dist/use-avatar-group.js

@@ -0,0 +1,104 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-avatar-group.ts
+var use_avatar_group_exports = {};
+__export(use_avatar_group_exports, {
+  useAvatarGroup: () => useAvatarGroup
+});
+module.exports = __toCommonJS(use_avatar_group_exports);
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+function useAvatarGroup(props = {}) {
+  const {
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    radius,
+    children,
+    isBordered,
+    isDisabled,
+    isGrid,
+    className,
+    classNames,
+    ...otherProps
+  } = props;
+  const context = (0, import_react.useMemo)(
+    () => ({
+      size,
+      color,
+      radius,
+      isGrid,
+      isBordered,
+      isDisabled
+    }),
+    [size, color, radius, isGrid, isBordered, isDisabled]
+  );
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.avatarGroup)({ className, isGrid }),
+    [className, isGrid]
+  );
+  const validChildren = (0, import_react_utils.getValidChildren)(children);
+  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
+  const remainingCount = total ? total : max != null ? validChildren.length - max : -1;
+  const clones = childrenWithinMax.map((child, index) => {
+    const isFirstAvatar = index === 0;
+    const isLastAvatar = index === childrenWithinMax.length - 1;
+    const childProps = {
+      className: (0, import_shared_utils.cn)(
+        isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
+        isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
+      )
+    };
+    return (0, import_react.cloneElement)(child, (0, import_shared_utils.compact)(childProps));
+  });
+  const getAvatarGroupProps = () => {
+    return {
+      ref,
+      className: slots.base({
+        class: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.base, className)
+      }),
+      role: "group",
+      ...otherProps
+    };
+  };
+  const getAvatarGroupCountProps = () => {
+    return {
+      className: slots.count({
+        class: classNames == null ? void 0 : classNames.count
+      })
+    };
+  };
+  return {
+    context,
+    remainingCount,
+    clones,
+    getAvatarGroupProps,
+    getAvatarGroupCountProps
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAvatarGroup
+});

package/dist/use-avatar-group.mjs

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

package/dist/use-avatar.d.mts

@@ -0,0 +1,136 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { PropGetter } from '@kopexa/react-utils';
+import { SlotsToClasses, AvatarSlots, AvatarVariantProps } from '@kopexa/theme';
+import { ComponentProps, RefObject } from 'react';
+
+interface Props extends ComponentProps<"span"> {
+    /**
+     * Ref to the Image DOM node.
+     */
+    imgRef?: RefObject<HTMLImageElement | null>;
+    /**
+     * 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;
+    classNames?: SlotsToClasses<AvatarSlots>;
+    onLoadingStatusChange?: (status: ImageStatus) => void;
+    /**
+     * Function called when image failed to load
+     */
+    onError?: () => void;
+}
+type UseAvatarProps = Props & Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
+type ImageStatus = "idle" | "loading" | "loaded" | "error";
+declare function useAvatar(originalProps?: UseAvatarProps): {
+    src: string | undefined;
+    alt: string;
+    slots: {
+        root: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        fallback: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        name: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        root: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        fallback: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        name: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"name" | "img" | "root" | "fallback" | "icon"> | undefined;
+    name: string | undefined;
+    getAvatarProps: PropGetter;
+    getImageProps: PropGetter;
+};
+
+export { type ImageStatus, type UseAvatarProps, useAvatar };