@kopexa/avatar 3.0.5 → 3.0.7

package/dist/avatar-group.d.mts

@@ -2,10 +2,10 @@ import './avatar.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseAvatarGroupProps } from './use-avatar-group.mjs';
 import './use-avatar.mjs';
+import 'react';
 import 'tailwind-variants';
 import '@kopexa/react-utils';
 import '@kopexa/theme';
-import 'react';
 
 interface AvatarGroupProps extends UseAvatarGroupProps {
 }

package/dist/avatar-group.d.ts

@@ -2,10 +2,10 @@ import './avatar.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseAvatarGroupProps } from './use-avatar-group.js';
 import './use-avatar.js';
+import 'react';
 import 'tailwind-variants';
 import '@kopexa/react-utils';
 import '@kopexa/theme';
-import 'react';
 
 interface AvatarGroupProps extends UseAvatarGroupProps {
 }

package/dist/avatar-group.js

@@ -68,6 +68,7 @@ function useAvatar(originalProps = {}) {
     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,
+    fallback,
     className,
     onError,
     onLoadingStatusChange,
@@ -147,6 +148,7 @@ function useAvatar(originalProps = {}) {
     slots,
     classNames,
     name,
+    fallback,
     getAvatarProps,
     getImageProps
   };
@@ -155,30 +157,45 @@ function useAvatar(originalProps = {}) {
 // src/avatar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Avatar = (props) => {
-  const { alt, getAvatarProps, getImageProps, slots, classNames, name } = useAvatar(props);
+  const {
+    alt,
+    getAvatarProps,
+    getImageProps,
+    slots,
+    classNames,
+    name,
+    fallback = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+  } = 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",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AvatarPrimitive.Fallback,
       {
-        className: slots.icon({
-          className: classNames == null ? void 0 : classNames.icon
-        }),
-        role: "img",
-        "aria-label": alt,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+        "data-slot": "avatar-fallback",
+        className: slots.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: fallback
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/avatar-group.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   AvatarGroup
-} from "./chunk-HBUPEI6X.mjs";
-import "./chunk-KPWT5YIU.mjs";
+} from "./chunk-VSER7GDP.mjs";
+import "./chunk-X3VHBQJQ.mjs";
 import "./chunk-J37VYVJO.mjs";
-import "./chunk-CI55TF4E.mjs";
+import "./chunk-XO5OLLSH.mjs";
 import "./chunk-FBUAHX2S.mjs";
 export {
   AvatarGroup

package/dist/avatar.d.mts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseAvatarProps } from './use-avatar.mjs';
+import 'react';
 import 'tailwind-variants';
 import '@kopexa/react-utils';
 import '@kopexa/theme';
-import 'react';
 
 interface AvatarProps extends UseAvatarProps {
 }

package/dist/avatar.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseAvatarProps } from './use-avatar.js';
+import 'react';
 import 'tailwind-variants';
 import '@kopexa/react-utils';
 import '@kopexa/theme';
-import 'react';
 
 interface AvatarProps extends UseAvatarProps {
 }

package/dist/avatar.js

@@ -66,6 +66,7 @@ function useAvatar(originalProps = {}) {
     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,
+    fallback,
     className,
     onError,
     onLoadingStatusChange,
@@ -145,6 +146,7 @@ function useAvatar(originalProps = {}) {
     slots,
     classNames,
     name,
+    fallback,
     getAvatarProps,
     getImageProps
   };
@@ -153,30 +155,45 @@ function useAvatar(originalProps = {}) {
 // src/avatar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Avatar = (props) => {
-  const { alt, getAvatarProps, getImageProps, slots, classNames, name } = useAvatar(props);
+  const {
+    alt,
+    getAvatarProps,
+    getImageProps,
+    slots,
+    classNames,
+    name,
+    fallback = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+  } = 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",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AvatarPrimitive.Fallback,
       {
-        className: slots.icon({
-          className: classNames == null ? void 0 : classNames.icon
-        }),
-        role: "img",
-        "aria-label": alt,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+        "data-slot": "avatar-fallback",
+        className: slots.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: fallback
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/avatar.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   Avatar
-} from "./chunk-KPWT5YIU.mjs";
-import "./chunk-CI55TF4E.mjs";
+} from "./chunk-X3VHBQJQ.mjs";
+import "./chunk-XO5OLLSH.mjs";
 import "./chunk-FBUAHX2S.mjs";
 export {
   Avatar

package/dist/{chunk-HBUPEI6X.mjs → chunk-VSER7GDP.mjs}

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

package/dist/{chunk-KPWT5YIU.mjs → chunk-X3VHBQJQ.mjs}

@@ -1,37 +1,52 @@
 "use client";
 import {
   useAvatar
-} from "./chunk-CI55TF4E.mjs";
+} from "./chunk-XO5OLLSH.mjs";
 
 // src/avatar.tsx
 import { getInitials } from "@kopexa/shared-utils";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Avatar = (props) => {
-  const { alt, getAvatarProps, getImageProps, slots, classNames, name } = useAvatar(props);
+  const {
+    alt,
+    getAvatarProps,
+    getImageProps,
+    slots,
+    classNames,
+    name,
+    fallback = /* @__PURE__ */ jsx(AvatarIcon, {})
+  } = useAvatar(props);
   return /* @__PURE__ */ jsxs(AvatarPrimitive.Root, { ...getAvatarProps(), children: [
     /* @__PURE__ */ jsx(AvatarPrimitive.Image, { ...getImageProps() }),
-    /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", children: name ? /* @__PURE__ */ jsx(
-      "span",
+    /* @__PURE__ */ jsx(
+      AvatarPrimitive.Fallback,
       {
-        className: slots.name({
-          className: classNames == null ? void 0 : classNames.name
-        }),
-        role: "img",
-        "aria-label": alt,
-        children: getInitials(name)
+        "data-slot": "avatar-fallback",
+        className: slots.fallback({}),
+        children: name ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: slots.name({
+              className: classNames == null ? void 0 : classNames.name
+            }),
+            role: "img",
+            "aria-label": alt,
+            children: getInitials(name)
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: slots.icon({
+              className: classNames == null ? void 0 : classNames.icon
+            }),
+            role: "img",
+            "aria-label": alt,
+            children: fallback
+          }
+        )
       }
-    ) : /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: slots.icon({
-          className: classNames == null ? void 0 : classNames.icon
-        }),
-        role: "img",
-        "aria-label": alt,
-        children: /* @__PURE__ */ jsx(AvatarIcon, {})
-      }
-    ) })
+    )
   ] });
 };
 var AvatarIcon = () => /* @__PURE__ */ jsxs(

package/dist/{chunk-CI55TF4E.mjs → chunk-XO5OLLSH.mjs}

@@ -29,6 +29,7 @@ function useAvatar(originalProps = {}) {
     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,
+    fallback,
     className,
     onError,
     onLoadingStatusChange,
@@ -108,6 +109,7 @@ function useAvatar(originalProps = {}) {
     slots,
     classNames,
     name,
+    fallback,
     getAvatarProps,
     getImageProps
   };

package/dist/index.d.mts

@@ -2,8 +2,8 @@ export { Avatar, AvatarProps } from './avatar.mjs';
 export { AvatarGroup, AvatarGroupProps } from './avatar-group.mjs';
 import 'react/jsx-runtime';
 import './use-avatar.mjs';
+import 'react';
 import 'tailwind-variants';
 import '@kopexa/react-utils';
 import '@kopexa/theme';
-import 'react';
 import './use-avatar-group.mjs';

package/dist/index.d.ts

@@ -2,8 +2,8 @@ export { Avatar, AvatarProps } from './avatar.js';
 export { AvatarGroup, AvatarGroupProps } from './avatar-group.js';
 import 'react/jsx-runtime';
 import './use-avatar.js';
+import 'react';
 import 'tailwind-variants';
 import '@kopexa/react-utils';
 import '@kopexa/theme';
-import 'react';
 import './use-avatar-group.js';

package/dist/index.js

@@ -69,6 +69,7 @@ function useAvatar(originalProps = {}) {
     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,
+    fallback,
     className,
     onError,
     onLoadingStatusChange,
@@ -148,6 +149,7 @@ function useAvatar(originalProps = {}) {
     slots,
     classNames,
     name,
+    fallback,
     getAvatarProps,
     getImageProps
   };
@@ -156,30 +158,45 @@ function useAvatar(originalProps = {}) {
 // src/avatar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Avatar = (props) => {
-  const { alt, getAvatarProps, getImageProps, slots, classNames, name } = useAvatar(props);
+  const {
+    alt,
+    getAvatarProps,
+    getImageProps,
+    slots,
+    classNames,
+    name,
+    fallback = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+  } = 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",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AvatarPrimitive.Fallback,
       {
-        className: slots.icon({
-          className: classNames == null ? void 0 : classNames.icon
-        }),
-        role: "img",
-        "aria-label": alt,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+        "data-slot": "avatar-fallback",
+        className: slots.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: fallback
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/index.mjs

@@ -1,12 +1,12 @@
 "use client";
 import {
   AvatarGroup
-} from "./chunk-HBUPEI6X.mjs";
+} from "./chunk-VSER7GDP.mjs";
 import {
   Avatar
-} from "./chunk-KPWT5YIU.mjs";
+} from "./chunk-X3VHBQJQ.mjs";
 import "./chunk-J37VYVJO.mjs";
-import "./chunk-CI55TF4E.mjs";
+import "./chunk-XO5OLLSH.mjs";
 import "./chunk-FBUAHX2S.mjs";
 export {
   Avatar,

package/dist/use-avatar.d.mts

@@ -1,7 +1,8 @@
+import * as react from 'react';
+import { ComponentProps, RefObject } from 'react';
 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"> {
     /**
@@ -17,11 +18,15 @@ interface Props extends ComponentProps<"span"> {
     /**
      * Image source.
      */
-    src?: string;
+    src?: string | null;
     /**
      * Image alt text.
      */
     alt?: string;
+    /**
+     * Fallback content to render when the image fails to load.
+     */
+    fallback?: React.ReactNode;
     classNames?: SlotsToClasses<AvatarSlots>;
     onLoadingStatusChange?: (status: ImageStatus) => void;
     /**
@@ -32,7 +37,7 @@ interface Props extends ComponentProps<"span"> {
 type UseAvatarProps = Props & Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
 type ImageStatus = "idle" | "loading" | "loaded" | "error";
 declare function useAvatar(originalProps?: UseAvatarProps): {
-    src: string | undefined;
+    src: string | null | undefined;
     alt: string;
     slots: {
         root: (slotProps?: ({
@@ -129,6 +134,7 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
     } & {};
     classNames: SlotsToClasses<"name" | "img" | "root" | "fallback" | "icon"> | undefined;
     name: string | undefined;
+    fallback: react.ReactNode;
     getAvatarProps: PropGetter;
     getImageProps: PropGetter;
 };

package/dist/use-avatar.d.ts

@@ -1,7 +1,8 @@
+import * as react from 'react';
+import { ComponentProps, RefObject } from 'react';
 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"> {
     /**
@@ -17,11 +18,15 @@ interface Props extends ComponentProps<"span"> {
     /**
      * Image source.
      */
-    src?: string;
+    src?: string | null;
     /**
      * Image alt text.
      */
     alt?: string;
+    /**
+     * Fallback content to render when the image fails to load.
+     */
+    fallback?: React.ReactNode;
     classNames?: SlotsToClasses<AvatarSlots>;
     onLoadingStatusChange?: (status: ImageStatus) => void;
     /**
@@ -32,7 +37,7 @@ interface Props extends ComponentProps<"span"> {
 type UseAvatarProps = Props & Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
 type ImageStatus = "idle" | "loading" | "loaded" | "error";
 declare function useAvatar(originalProps?: UseAvatarProps): {
-    src: string | undefined;
+    src: string | null | undefined;
     alt: string;
     slots: {
         root: (slotProps?: ({
@@ -129,6 +134,7 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
     } & {};
     classNames: SlotsToClasses<"name" | "img" | "root" | "fallback" | "icon"> | undefined;
     name: string | undefined;
+    fallback: react.ReactNode;
     getAvatarProps: PropGetter;
     getImageProps: PropGetter;
 };

package/dist/use-avatar.js

@@ -52,6 +52,7 @@ function useAvatar(originalProps = {}) {
     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,
+    fallback,
     className,
     onError,
     onLoadingStatusChange,
@@ -131,6 +132,7 @@ function useAvatar(originalProps = {}) {
     slots,
     classNames,
     name,
+    fallback,
     getAvatarProps,
     getImageProps
   };

package/dist/use-avatar.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   useAvatar
-} from "./chunk-CI55TF4E.mjs";
+} from "./chunk-XO5OLLSH.mjs";
 import "./chunk-FBUAHX2S.mjs";
 export {
   useAvatar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/avatar",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"
@@ -28,12 +28,12 @@
     "motion": ">=12.23.6",
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "1.7.5"
+    "@kopexa/theme": "1.7.7"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
-    "@kopexa/react-utils": "2.0.7",
-    "@kopexa/shared-utils": "1.1.6"
+    "@kopexa/react-utils": "2.0.8",
+    "@kopexa/shared-utils": "1.1.7"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",