@heroui/avatar 2.2.18 → 2.2.19-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/avatar-group.js +11 -6
  2. package/dist/avatar-group.mjs +3 -3
  3. package/dist/avatar.js +11 -6
  4. package/dist/avatar.mjs +2 -2
  5. package/dist/{chunk-LTC67JRI.mjs → chunk-D6GKTNAY.mjs} +10 -5
  6. package/dist/{chunk-A6PX3NG3.mjs → chunk-RHCEY3MN.mjs} +1 -1
  7. package/dist/{chunk-H44CU6UA.mjs → chunk-X2BFRYAX.mjs} +1 -1
  8. package/dist/index.js +11 -6
  9. package/dist/index.mjs +3 -3
  10. package/dist/use-avatar-group.d.mts +2 -2
  11. package/dist/use-avatar-group.d.ts +2 -2
  12. package/dist/use-avatar.d.mts +22 -22
  13. package/dist/use-avatar.d.ts +22 -22
  14. package/dist/use-avatar.js +11 -6
  15. package/dist/use-avatar.mjs +1 -1
  16. package/package.json +6 -7
package/dist/avatar-group.js CHANGED
@@ -150,7 +150,6 @@ var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
150
150
  // src/use-avatar.ts
151
151
  var import_theme2 = require("@heroui/theme");
152
152
  var import_system = require("@heroui/system");
153
- var import_utils = require("@react-aria/utils");
154
153
  var import_react_utils4 = require("@heroui/react-utils");
155
154
  var import_shared_utils2 = require("@heroui/shared-utils");
156
155
  var import_focus = require("@react-aria/focus");
@@ -158,7 +157,7 @@ var import_react2 = require("react");
158
157
  var import_use_image = require("@heroui/use-image");
159
158
  var import_interactions = require("@react-aria/interactions");
160
159
  function useAvatar(originalProps = {}) {
161
- var _a, _b, _c, _d, _e, _f;
160
+ var _a, _b, _c, _d, _e, _f, _g, _h;
162
161
  const globalContext = (0, import_system.useProviderContext)();
163
162
  const groupContext = useAvatarGroupContext();
164
163
  const isInGroup = !!groupContext;
@@ -194,9 +193,15 @@ function useAvatar(originalProps = {}) {
194
193
  const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
195
194
  const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
196
195
  const disableAnimation = (_f = disableAnimationProp != null ? disableAnimationProp : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _f : false;
197
- const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
196
+ const isHeroImage = (_h = typeof ImgComponent === "object" && ((_g = ImgComponent == null ? void 0 : ImgComponent.displayName) == null ? void 0 : _g.includes("HeroUI"))) != null ? _h : false;
197
+ const imageStatus = (0, import_use_image.useImage)({
198
+ src,
199
+ onError,
200
+ ignoreFallback,
201
+ shouldBypassImageLoad: as !== void 0 || !isHeroImage
202
+ });
198
203
  const isImgLoaded = imageStatus === "loaded";
199
- const shouldFilterDOMProps = typeof ImgComponent === "string";
204
+ const shouldFilterDOMProps = !isHeroImage;
200
205
  const showFallback = (!src || !isImgLoaded) && showFallbackProp;
201
206
  const slots = (0, import_react2.useMemo)(
202
207
  () => {
@@ -237,7 +242,7 @@ function useAvatar(originalProps = {}) {
237
242
  className: slots.base({
238
243
  class: (0, import_shared_utils2.clsx)(baseStyles, props == null ? void 0 : props.className)
239
244
  }),
240
- ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
245
+ ...(0, import_shared_utils2.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
241
246
  }),
242
247
  [canBeFocused, slots, baseStyles, focusProps, otherProps]
243
248
  );
@@ -247,7 +252,7 @@ function useAvatar(originalProps = {}) {
247
252
  src,
248
253
  "data-loaded": (0, import_shared_utils2.dataAttr)(isImgLoaded),
249
254
  className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
250
- ...(0, import_utils.mergeProps)(
255
+ ...(0, import_shared_utils2.mergeProps)(
251
256
  imgProps,
252
257
  props,
253
258
  (0, import_react_utils4.filterDOMProps)({ disableAnimation }, {
package/dist/avatar-group.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  "use client";
2
2
  import {
3
3
  avatar_group_default
4
- } from "./chunk-H44CU6UA.mjs";
5
- import "./chunk-A6PX3NG3.mjs";
4
+ } from "./chunk-X2BFRYAX.mjs";
5
+ import "./chunk-RHCEY3MN.mjs";
6
6
  import "./chunk-25E6VDTZ.mjs";
7
7
  import "./chunk-QH65JCLF.mjs";
8
- import "./chunk-LTC67JRI.mjs";
8
+ import "./chunk-D6GKTNAY.mjs";
9
9
  import "./chunk-JUJ53SJZ.mjs";
10
10
  export {
11
11
  avatar_group_default as default
package/dist/avatar.js CHANGED
@@ -60,7 +60,6 @@ var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
60
60
  // src/use-avatar.ts
61
61
  var import_theme = require("@heroui/theme");
62
62
  var import_system = require("@heroui/system");
63
- var import_utils = require("@react-aria/utils");
64
63
  var import_react_utils2 = require("@heroui/react-utils");
65
64
  var import_shared_utils = require("@heroui/shared-utils");
66
65
  var import_focus = require("@react-aria/focus");
@@ -77,7 +76,7 @@ var [AvatarGroupProvider, useAvatarGroupContext] = (0, import_react_utils.create
77
76
 
78
77
  // src/use-avatar.ts
79
78
  function useAvatar(originalProps = {}) {
80
- var _a, _b, _c, _d, _e, _f;
79
+ var _a, _b, _c, _d, _e, _f, _g, _h;
81
80
  const globalContext = (0, import_system.useProviderContext)();
82
81
  const groupContext = useAvatarGroupContext();
83
82
  const isInGroup = !!groupContext;
@@ -113,9 +112,15 @@ function useAvatar(originalProps = {}) {
113
112
  const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
114
113
  const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
115
114
  const disableAnimation = (_f = disableAnimationProp != null ? disableAnimationProp : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _f : false;
116
- const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
115
+ const isHeroImage = (_h = typeof ImgComponent === "object" && ((_g = ImgComponent == null ? void 0 : ImgComponent.displayName) == null ? void 0 : _g.includes("HeroUI"))) != null ? _h : false;
116
+ const imageStatus = (0, import_use_image.useImage)({
117
+ src,
118
+ onError,
119
+ ignoreFallback,
120
+ shouldBypassImageLoad: as !== void 0 || !isHeroImage
121
+ });
117
122
  const isImgLoaded = imageStatus === "loaded";
118
- const shouldFilterDOMProps = typeof ImgComponent === "string";
123
+ const shouldFilterDOMProps = !isHeroImage;
119
124
  const showFallback = (!src || !isImgLoaded) && showFallbackProp;
120
125
  const slots = (0, import_react.useMemo)(
121
126
  () => {
@@ -156,7 +161,7 @@ function useAvatar(originalProps = {}) {
156
161
  className: slots.base({
157
162
  class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
158
163
  }),
159
- ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
164
+ ...(0, import_shared_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
160
165
  }),
161
166
  [canBeFocused, slots, baseStyles, focusProps, otherProps]
162
167
  );
@@ -166,7 +171,7 @@ function useAvatar(originalProps = {}) {
166
171
  src,
167
172
  "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
168
173
  className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
169
- ...(0, import_utils.mergeProps)(
174
+ ...(0, import_shared_utils.mergeProps)(
170
175
  imgProps,
171
176
  props,
172
177
  (0, import_react_utils2.filterDOMProps)({ disableAnimation }, {
package/dist/avatar.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import {
3
3
  avatar_default
4
- } from "./chunk-A6PX3NG3.mjs";
4
+ } from "./chunk-RHCEY3MN.mjs";
5
5
  import "./chunk-25E6VDTZ.mjs";
6
- import "./chunk-LTC67JRI.mjs";
6
+ import "./chunk-D6GKTNAY.mjs";
7
7
  import "./chunk-JUJ53SJZ.mjs";
8
8
  export {
9
9
  avatar_default as default
package/dist/{chunk-LTC67JRI.mjs → chunk-D6GKTNAY.mjs} RENAMED
@@ -6,15 +6,14 @@ import {
6
6
  // src/use-avatar.ts
7
7
  import { avatar } from "@heroui/theme";
8
8
  import { useProviderContext } from "@heroui/system";
9
- import { mergeProps } from "@react-aria/utils";
10
9
  import { useDOMRef, filterDOMProps } from "@heroui/react-utils";
11
- import { clsx, safeText, dataAttr } from "@heroui/shared-utils";
10
+ import { clsx, safeText, dataAttr, mergeProps } from "@heroui/shared-utils";
12
11
  import { useFocusRing } from "@react-aria/focus";
13
12
  import { useMemo, useCallback } from "react";
14
13
  import { useImage } from "@heroui/use-image";
15
14
  import { useHover } from "@react-aria/interactions";
16
15
  function useAvatar(originalProps = {}) {
17
- var _a, _b, _c, _d, _e, _f;
16
+ var _a, _b, _c, _d, _e, _f, _g, _h;
18
17
  const globalContext = useProviderContext();
19
18
  const groupContext = useAvatarGroupContext();
20
19
  const isInGroup = !!groupContext;
@@ -50,9 +49,15 @@ function useAvatar(originalProps = {}) {
50
49
  const { isFocusVisible, isFocused, focusProps } = useFocusRing();
51
50
  const { isHovered, hoverProps } = useHover({ isDisabled });
52
51
  const disableAnimation = (_f = disableAnimationProp != null ? disableAnimationProp : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _f : false;
53
- const imageStatus = useImage({ src, onError, ignoreFallback });
52
+ const isHeroImage = (_h = typeof ImgComponent === "object" && ((_g = ImgComponent == null ? void 0 : ImgComponent.displayName) == null ? void 0 : _g.includes("HeroUI"))) != null ? _h : false;
53
+ const imageStatus = useImage({
54
+ src,
55
+ onError,
56
+ ignoreFallback,
57
+ shouldBypassImageLoad: as !== void 0 || !isHeroImage
58
+ });
54
59
  const isImgLoaded = imageStatus === "loaded";
55
- const shouldFilterDOMProps = typeof ImgComponent === "string";
60
+ const shouldFilterDOMProps = !isHeroImage;
56
61
  const showFallback = (!src || !isImgLoaded) && showFallbackProp;
57
62
  const slots = useMemo(
58
63
  () => {
package/dist/{chunk-A6PX3NG3.mjs → chunk-RHCEY3MN.mjs} RENAMED
@@ -4,7 +4,7 @@ import {
4
4
  } from "./chunk-25E6VDTZ.mjs";
5
5
  import {
6
6
  useAvatar
7
- } from "./chunk-LTC67JRI.mjs";
7
+ } from "./chunk-D6GKTNAY.mjs";
8
8
 
9
9
  // src/avatar.tsx
10
10
  import { useMemo } from "react";
package/dist/{chunk-H44CU6UA.mjs → chunk-X2BFRYAX.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  avatar_default
4
- } from "./chunk-A6PX3NG3.mjs";
4
+ } from "./chunk-RHCEY3MN.mjs";
5
5
  import {
6
6
  useAvatarGroup
7
7
  } from "./chunk-QH65JCLF.mjs";
package/dist/index.js CHANGED
@@ -68,7 +68,6 @@ var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
68
68
  // src/use-avatar.ts
69
69
  var import_theme = require("@heroui/theme");
70
70
  var import_system = require("@heroui/system");
71
- var import_utils = require("@react-aria/utils");
72
71
  var import_react_utils2 = require("@heroui/react-utils");
73
72
  var import_shared_utils = require("@heroui/shared-utils");
74
73
  var import_focus = require("@react-aria/focus");
@@ -85,7 +84,7 @@ var [AvatarGroupProvider, useAvatarGroupContext] = (0, import_react_utils.create
85
84
 
86
85
  // src/use-avatar.ts
87
86
  function useAvatar(originalProps = {}) {
88
- var _a, _b, _c, _d, _e, _f;
87
+ var _a, _b, _c, _d, _e, _f, _g, _h;
89
88
  const globalContext = (0, import_system.useProviderContext)();
90
89
  const groupContext = useAvatarGroupContext();
91
90
  const isInGroup = !!groupContext;
@@ -121,9 +120,15 @@ function useAvatar(originalProps = {}) {
121
120
  const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
122
121
  const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
123
122
  const disableAnimation = (_f = disableAnimationProp != null ? disableAnimationProp : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _f : false;
124
- const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
123
+ const isHeroImage = (_h = typeof ImgComponent === "object" && ((_g = ImgComponent == null ? void 0 : ImgComponent.displayName) == null ? void 0 : _g.includes("HeroUI"))) != null ? _h : false;
124
+ const imageStatus = (0, import_use_image.useImage)({
125
+ src,
126
+ onError,
127
+ ignoreFallback,
128
+ shouldBypassImageLoad: as !== void 0 || !isHeroImage
129
+ });
125
130
  const isImgLoaded = imageStatus === "loaded";
126
- const shouldFilterDOMProps = typeof ImgComponent === "string";
131
+ const shouldFilterDOMProps = !isHeroImage;
127
132
  const showFallback = (!src || !isImgLoaded) && showFallbackProp;
128
133
  const slots = (0, import_react.useMemo)(
129
134
  () => {
@@ -164,7 +169,7 @@ function useAvatar(originalProps = {}) {
164
169
  className: slots.base({
165
170
  class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
166
171
  }),
167
- ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
172
+ ...(0, import_shared_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
168
173
  }),
169
174
  [canBeFocused, slots, baseStyles, focusProps, otherProps]
170
175
  );
@@ -174,7 +179,7 @@ function useAvatar(originalProps = {}) {
174
179
  src,
175
180
  "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
176
181
  className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
177
- ...(0, import_utils.mergeProps)(
182
+ ...(0, import_shared_utils.mergeProps)(
178
183
  imgProps,
179
184
  props,
180
185
  (0, import_react_utils2.filterDOMProps)({ disableAnimation }, {
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  avatar_group_default
4
- } from "./chunk-H44CU6UA.mjs";
4
+ } from "./chunk-X2BFRYAX.mjs";
5
5
  import {
6
6
  avatar_default
7
- } from "./chunk-A6PX3NG3.mjs";
7
+ } from "./chunk-RHCEY3MN.mjs";
8
8
  import {
9
9
  AvatarIcon
10
10
  } from "./chunk-25E6VDTZ.mjs";
@@ -13,7 +13,7 @@ import {
13
13
  } from "./chunk-QH65JCLF.mjs";
14
14
  import {
15
15
  useAvatar
16
- } from "./chunk-LTC67JRI.mjs";
16
+ } from "./chunk-D6GKTNAY.mjs";
17
17
  import {
18
18
  AvatarGroupProvider,
19
19
  useAvatarGroupContext
package/dist/use-avatar-group.d.mts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
3
  import * as _heroui_system from '@heroui/system';
4
- import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
5
- import { AvatarGroupVariantProps, SlotsToClasses, AvatarGroupSlots } from '@heroui/theme';
4
+ import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
5
+ import { SlotsToClasses, AvatarGroupSlots, AvatarGroupVariantProps } from '@heroui/theme';
6
6
  import { ReactRef } from '@heroui/react-utils';
7
7
  import { AvatarProps } from './avatar.mjs';
8
8
  import './use-avatar.mjs';
package/dist/use-avatar-group.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
3
  import * as _heroui_system from '@heroui/system';
4
- import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
5
- import { AvatarGroupVariantProps, SlotsToClasses, AvatarGroupSlots } from '@heroui/theme';
4
+ import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
5
+ import { SlotsToClasses, AvatarGroupSlots, AvatarGroupVariantProps } from '@heroui/theme';
6
6
  import { ReactRef } from '@heroui/react-utils';
7
7
  import { AvatarProps } from './avatar.js';
8
8
  import './use-avatar.js';
package/dist/use-avatar.d.mts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as tailwind_variants from 'tailwind-variants';
2
2
  import * as react from 'react';
3
3
  import * as _heroui_system from '@heroui/system';
4
- import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
5
- import { AvatarVariantProps, SlotsToClasses, AvatarSlots } from '@heroui/theme';
4
+ import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
5
+ import { SlotsToClasses, AvatarSlots, AvatarVariantProps } from '@heroui/theme';
6
6
  import { ReactRef } from '@heroui/react-utils';
7
7
 
8
8
  interface Props extends HTMLHeroUIProps<"span"> {
@@ -92,9 +92,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
92
92
  imgRef: react.RefObject<HTMLImageElement>;
93
93
  slots: {
94
94
  base: (slotProps?: ({
95
- size?: "sm" | "md" | "lg" | undefined;
95
+ size?: "md" | "sm" | "lg" | undefined;
96
96
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
97
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
97
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
98
98
  isBordered?: boolean | undefined;
99
99
  isDisabled?: boolean | undefined;
100
100
  isInGroup?: boolean | undefined;
@@ -102,9 +102,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
102
102
  disableAnimation?: boolean | undefined;
103
103
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
104
104
  img: (slotProps?: ({
105
- size?: "sm" | "md" | "lg" | undefined;
105
+ size?: "md" | "sm" | "lg" | undefined;
106
106
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
107
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
107
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
108
108
  isBordered?: boolean | undefined;
109
109
  isDisabled?: boolean | undefined;
110
110
  isInGroup?: boolean | undefined;
@@ -112,9 +112,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
112
112
  disableAnimation?: boolean | undefined;
113
113
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
114
114
  fallback: (slotProps?: ({
115
- size?: "sm" | "md" | "lg" | undefined;
115
+ size?: "md" | "sm" | "lg" | undefined;
116
116
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
117
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
117
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
118
118
  isBordered?: boolean | undefined;
119
119
  isDisabled?: boolean | undefined;
120
120
  isInGroup?: boolean | undefined;
@@ -122,9 +122,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
122
122
  disableAnimation?: boolean | undefined;
123
123
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
124
124
  name: (slotProps?: ({
125
- size?: "sm" | "md" | "lg" | undefined;
125
+ size?: "md" | "sm" | "lg" | undefined;
126
126
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
127
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
127
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
128
128
  isBordered?: boolean | undefined;
129
129
  isDisabled?: boolean | undefined;
130
130
  isInGroup?: boolean | undefined;
@@ -132,9 +132,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
132
132
  disableAnimation?: boolean | undefined;
133
133
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
134
134
  icon: (slotProps?: ({
135
- size?: "sm" | "md" | "lg" | undefined;
135
+ size?: "md" | "sm" | "lg" | undefined;
136
136
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
137
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
137
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
138
138
  isBordered?: boolean | undefined;
139
139
  isDisabled?: boolean | undefined;
140
140
  isInGroup?: boolean | undefined;
@@ -143,9 +143,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
143
143
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
144
144
  } & {
145
145
  base: (slotProps?: ({
146
- size?: "sm" | "md" | "lg" | undefined;
146
+ size?: "md" | "sm" | "lg" | undefined;
147
147
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
148
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
148
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
149
149
  isBordered?: boolean | undefined;
150
150
  isDisabled?: boolean | undefined;
151
151
  isInGroup?: boolean | undefined;
@@ -153,9 +153,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
153
153
  disableAnimation?: boolean | undefined;
154
154
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
155
155
  img: (slotProps?: ({
156
- size?: "sm" | "md" | "lg" | undefined;
156
+ size?: "md" | "sm" | "lg" | undefined;
157
157
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
158
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
158
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
159
159
  isBordered?: boolean | undefined;
160
160
  isDisabled?: boolean | undefined;
161
161
  isInGroup?: boolean | undefined;
@@ -163,9 +163,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
163
163
  disableAnimation?: boolean | undefined;
164
164
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
165
165
  fallback: (slotProps?: ({
166
- size?: "sm" | "md" | "lg" | undefined;
166
+ size?: "md" | "sm" | "lg" | undefined;
167
167
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
168
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
168
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
169
169
  isBordered?: boolean | undefined;
170
170
  isDisabled?: boolean | undefined;
171
171
  isInGroup?: boolean | undefined;
@@ -173,9 +173,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
173
173
  disableAnimation?: boolean | undefined;
174
174
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
175
175
  name: (slotProps?: ({
176
- size?: "sm" | "md" | "lg" | undefined;
176
+ size?: "md" | "sm" | "lg" | undefined;
177
177
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
178
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
178
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
179
179
  isBordered?: boolean | undefined;
180
180
  isDisabled?: boolean | undefined;
181
181
  isInGroup?: boolean | undefined;
@@ -183,9 +183,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
183
183
  disableAnimation?: boolean | undefined;
184
184
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
185
185
  icon: (slotProps?: ({
186
- size?: "sm" | "md" | "lg" | undefined;
186
+ size?: "md" | "sm" | "lg" | undefined;
187
187
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
188
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
188
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
189
189
  isBordered?: boolean | undefined;
190
190
  isDisabled?: boolean | undefined;
191
191
  isInGroup?: boolean | undefined;
package/dist/use-avatar.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as tailwind_variants from 'tailwind-variants';
2
2
  import * as react from 'react';
3
3
  import * as _heroui_system from '@heroui/system';
4
- import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
5
- import { AvatarVariantProps, SlotsToClasses, AvatarSlots } from '@heroui/theme';
4
+ import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
5
+ import { SlotsToClasses, AvatarSlots, AvatarVariantProps } from '@heroui/theme';
6
6
  import { ReactRef } from '@heroui/react-utils';
7
7
 
8
8
  interface Props extends HTMLHeroUIProps<"span"> {
@@ -92,9 +92,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
92
92
  imgRef: react.RefObject<HTMLImageElement>;
93
93
  slots: {
94
94
  base: (slotProps?: ({
95
- size?: "sm" | "md" | "lg" | undefined;
95
+ size?: "md" | "sm" | "lg" | undefined;
96
96
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
97
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
97
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
98
98
  isBordered?: boolean | undefined;
99
99
  isDisabled?: boolean | undefined;
100
100
  isInGroup?: boolean | undefined;
@@ -102,9 +102,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
102
102
  disableAnimation?: boolean | undefined;
103
103
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
104
104
  img: (slotProps?: ({
105
- size?: "sm" | "md" | "lg" | undefined;
105
+ size?: "md" | "sm" | "lg" | undefined;
106
106
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
107
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
107
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
108
108
  isBordered?: boolean | undefined;
109
109
  isDisabled?: boolean | undefined;
110
110
  isInGroup?: boolean | undefined;
@@ -112,9 +112,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
112
112
  disableAnimation?: boolean | undefined;
113
113
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
114
114
  fallback: (slotProps?: ({
115
- size?: "sm" | "md" | "lg" | undefined;
115
+ size?: "md" | "sm" | "lg" | undefined;
116
116
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
117
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
117
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
118
118
  isBordered?: boolean | undefined;
119
119
  isDisabled?: boolean | undefined;
120
120
  isInGroup?: boolean | undefined;
@@ -122,9 +122,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
122
122
  disableAnimation?: boolean | undefined;
123
123
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
124
124
  name: (slotProps?: ({
125
- size?: "sm" | "md" | "lg" | undefined;
125
+ size?: "md" | "sm" | "lg" | undefined;
126
126
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
127
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
127
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
128
128
  isBordered?: boolean | undefined;
129
129
  isDisabled?: boolean | undefined;
130
130
  isInGroup?: boolean | undefined;
@@ -132,9 +132,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
132
132
  disableAnimation?: boolean | undefined;
133
133
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
134
134
  icon: (slotProps?: ({
135
- size?: "sm" | "md" | "lg" | undefined;
135
+ size?: "md" | "sm" | "lg" | undefined;
136
136
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
137
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
137
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
138
138
  isBordered?: boolean | undefined;
139
139
  isDisabled?: boolean | undefined;
140
140
  isInGroup?: boolean | undefined;
@@ -143,9 +143,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
143
143
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
144
144
  } & {
145
145
  base: (slotProps?: ({
146
- size?: "sm" | "md" | "lg" | undefined;
146
+ size?: "md" | "sm" | "lg" | undefined;
147
147
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
148
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
148
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
149
149
  isBordered?: boolean | undefined;
150
150
  isDisabled?: boolean | undefined;
151
151
  isInGroup?: boolean | undefined;
@@ -153,9 +153,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
153
153
  disableAnimation?: boolean | undefined;
154
154
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
155
155
  img: (slotProps?: ({
156
- size?: "sm" | "md" | "lg" | undefined;
156
+ size?: "md" | "sm" | "lg" | undefined;
157
157
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
158
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
158
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
159
159
  isBordered?: boolean | undefined;
160
160
  isDisabled?: boolean | undefined;
161
161
  isInGroup?: boolean | undefined;
@@ -163,9 +163,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
163
163
  disableAnimation?: boolean | undefined;
164
164
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
165
165
  fallback: (slotProps?: ({
166
- size?: "sm" | "md" | "lg" | undefined;
166
+ size?: "md" | "sm" | "lg" | undefined;
167
167
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
168
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
168
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
169
169
  isBordered?: boolean | undefined;
170
170
  isDisabled?: boolean | undefined;
171
171
  isInGroup?: boolean | undefined;
@@ -173,9 +173,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
173
173
  disableAnimation?: boolean | undefined;
174
174
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
175
175
  name: (slotProps?: ({
176
- size?: "sm" | "md" | "lg" | undefined;
176
+ size?: "md" | "sm" | "lg" | undefined;
177
177
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
178
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
178
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
179
179
  isBordered?: boolean | undefined;
180
180
  isDisabled?: boolean | undefined;
181
181
  isInGroup?: boolean | undefined;
@@ -183,9 +183,9 @@ declare function useAvatar(originalProps?: UseAvatarProps): {
183
183
  disableAnimation?: boolean | undefined;
184
184
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
185
185
  icon: (slotProps?: ({
186
- size?: "sm" | "md" | "lg" | undefined;
186
+ size?: "md" | "sm" | "lg" | undefined;
187
187
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
188
- radius?: "sm" | "md" | "lg" | "full" | "none" | undefined;
188
+ radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
189
189
  isBordered?: boolean | undefined;
190
190
  isDisabled?: boolean | undefined;
191
191
  isInGroup?: boolean | undefined;
package/dist/use-avatar.js CHANGED
@@ -26,7 +26,6 @@ __export(use_avatar_exports, {
26
26
  module.exports = __toCommonJS(use_avatar_exports);
27
27
  var import_theme = require("@heroui/theme");
28
28
  var import_system = require("@heroui/system");
29
- var import_utils = require("@react-aria/utils");
30
29
  var import_react_utils2 = require("@heroui/react-utils");
31
30
  var import_shared_utils = require("@heroui/shared-utils");
32
31
  var import_focus = require("@react-aria/focus");
@@ -43,7 +42,7 @@ var [AvatarGroupProvider, useAvatarGroupContext] = (0, import_react_utils.create
43
42
 
44
43
  // src/use-avatar.ts
45
44
  function useAvatar(originalProps = {}) {
46
- var _a, _b, _c, _d, _e, _f;
45
+ var _a, _b, _c, _d, _e, _f, _g, _h;
47
46
  const globalContext = (0, import_system.useProviderContext)();
48
47
  const groupContext = useAvatarGroupContext();
49
48
  const isInGroup = !!groupContext;
@@ -79,9 +78,15 @@ function useAvatar(originalProps = {}) {
79
78
  const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
80
79
  const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
81
80
  const disableAnimation = (_f = disableAnimationProp != null ? disableAnimationProp : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _f : false;
82
- const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
81
+ const isHeroImage = (_h = typeof ImgComponent === "object" && ((_g = ImgComponent == null ? void 0 : ImgComponent.displayName) == null ? void 0 : _g.includes("HeroUI"))) != null ? _h : false;
82
+ const imageStatus = (0, import_use_image.useImage)({
83
+ src,
84
+ onError,
85
+ ignoreFallback,
86
+ shouldBypassImageLoad: as !== void 0 || !isHeroImage
87
+ });
83
88
  const isImgLoaded = imageStatus === "loaded";
84
- const shouldFilterDOMProps = typeof ImgComponent === "string";
89
+ const shouldFilterDOMProps = !isHeroImage;
85
90
  const showFallback = (!src || !isImgLoaded) && showFallbackProp;
86
91
  const slots = (0, import_react.useMemo)(
87
92
  () => {
@@ -122,7 +127,7 @@ function useAvatar(originalProps = {}) {
122
127
  className: slots.base({
123
128
  class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
124
129
  }),
125
- ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
130
+ ...(0, import_shared_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
126
131
  }),
127
132
  [canBeFocused, slots, baseStyles, focusProps, otherProps]
128
133
  );
@@ -132,7 +137,7 @@ function useAvatar(originalProps = {}) {
132
137
  src,
133
138
  "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
134
139
  className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
135
- ...(0, import_utils.mergeProps)(
140
+ ...(0, import_shared_utils.mergeProps)(
136
141
  imgProps,
137
142
  props,
138
143
  (0, import_react_utils2.filterDOMProps)({ disableAnimation }, {
package/dist/use-avatar.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useAvatar
4
- } from "./chunk-LTC67JRI.mjs";
4
+ } from "./chunk-D6GKTNAY.mjs";
5
5
  import "./chunk-JUJ53SJZ.mjs";
6
6
  export {
7
7
  useAvatar
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@heroui/avatar",
3
- "version": "2.2.18",
3
+ "version": "2.2.19-beta.2",
4
4
  "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
5
5
  "keywords": [
6
6
  "avatar"
@@ -27,16 +27,15 @@
27
27
  "peerDependencies": {
28
28
  "react": ">=18 || >=19.0.0-rc.0",
29
29
  "react-dom": ">=18 || >=19.0.0-rc.0",
30
- "@heroui/theme": ">=2.4.6",
31
- "@heroui/system": ">=2.4.17"
30
+ "@heroui/theme": ">=2.4.18-beta.0",
31
+ "@heroui/system": ">=2.4.19-beta.0"
32
32
  },
33
33
  "dependencies": {
34
34
  "@react-aria/interactions": "3.25.3",
35
35
  "@react-aria/focus": "3.20.5",
36
- "@react-aria/utils": "3.29.1",
37
- "@heroui/shared-utils": "2.1.9",
38
- "@heroui/react-utils": "2.1.11",
39
- "@heroui/use-image": "2.1.10"
36
+ "@heroui/shared-utils": "2.1.10-beta.6",
37
+ "@heroui/react-utils": "2.1.12-beta.4",
38
+ "@heroui/use-image": "2.1.11-beta.5"
40
39
  },
41
40
  "clean-package": "../../../clean-package.config.json",
42
41
  "module": "dist/index.mjs",