@heroui/avatar 2.2.7 → 2.2.8

package/dist/use-avatar.d.ts

@@ -1,207 +0,0 @@
-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 { 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" | "none" | "full" | undefined;
-            isBordered?: boolean | undefined;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<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;
-            isDisabled?: boolean | undefined;
-            isInGroup?: boolean | undefined;
-            isInGridGroup?: boolean | undefined;
-            disableAnimation?: boolean | undefined;
-        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
-    } & {};
-    classNames: SlotsToClasses<"name" | "base" | "img" | "icon" | "fallback"> | 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>>;
-};
-type UseAvatarReturn = ReturnType<typeof useAvatar>;
-
-export { UseAvatarProps, UseAvatarReturn, useAvatar };

package/dist/use-avatar.js

@@ -1,167 +0,0 @@
-"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.ts
-var use_avatar_exports = {};
-__export(use_avatar_exports, {
-  useAvatar: () => useAvatar
-});
-module.exports = __toCommonJS(use_avatar_exports);
-var import_theme = require("@heroui/theme");
-var import_system = require("@heroui/system");
-var import_utils = require("@react-aria/utils");
-var import_react_utils2 = require("@heroui/react-utils");
-var import_shared_utils = require("@heroui/shared-utils");
-var import_focus = require("@react-aria/focus");
-var import_react = require("react");
-var import_use_image = require("@heroui/use-image");
-var import_interactions = require("@react-aria/interactions");
-
-// src/avatar-group-context.ts
-var import_react_utils = require("@heroui/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, _f;
-  const globalContext = (0, import_system.useProviderContext)();
-  const groupContext = useAvatarGroupContext();
-  const isInGroup = !!groupContext;
-  const {
-    as,
-    ref,
-    src,
-    name,
-    icon,
-    classNames,
-    fallback,
-    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,
-    isFocusable = false,
-    getInitials = import_shared_utils.safeText,
-    ignoreFallback = false,
-    showFallback: showFallbackProp = false,
-    ImgComponent = "img",
-    imgProps,
-    className,
-    onError,
-    disableAnimation: disableAnimationProp,
-    ...otherProps
-  } = originalProps;
-  const Component = as || "span";
-  const domRef = (0, import_react_utils2.useDOMRef)(ref);
-  const imgRef = (0, import_react_utils2.useDOMRef)(imgRefProp);
-  const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
-  const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
-  const disableAnimation = (_f = disableAnimationProp != null ? disableAnimationProp : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _f : false;
-  const imageStatus = (0, import_use_image.useImage)({ src, onError, ignoreFallback });
-  const isImgLoaded = imageStatus === "loaded";
-  const shouldFilterDOMProps = typeof ImgComponent === "string";
-  const showFallback = (!src || !isImgLoaded) && showFallbackProp;
-  const slots = (0, import_react.useMemo)(
-    () => {
-      var _a2;
-      return (0, import_theme.avatar)({
-        color,
-        radius,
-        size,
-        isBordered,
-        isDisabled,
-        isInGroup,
-        disableAnimation,
-        isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
-      });
-    },
-    [
-      color,
-      radius,
-      size,
-      isBordered,
-      isDisabled,
-      disableAnimation,
-      isInGroup,
-      groupContext == null ? void 0 : groupContext.isGrid
-    ]
-  );
-  const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
-  const canBeFocused = (0, import_react.useMemo)(() => {
-    return isFocusable || as === "button";
-  }, [isFocusable, as]);
-  const getAvatarProps = (0, import_react.useCallback)(
-    (props = {}) => ({
-      ref: domRef,
-      tabIndex: canBeFocused ? 0 : -1,
-      "data-hover": (0, import_shared_utils.dataAttr)(isHovered),
-      "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
-      "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
-      className: slots.base({
-        class: (0, import_shared_utils.clsx)(baseStyles, props == null ? void 0 : props.className)
-      }),
-      ...(0, import_utils.mergeProps)(otherProps, hoverProps, canBeFocused ? focusProps : {})
-    }),
-    [canBeFocused, slots, baseStyles, focusProps, otherProps]
-  );
-  const getImageProps = (0, import_react.useCallback)(
-    (props = {}) => ({
-      ref: imgRef,
-      src,
-      "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
-      className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
-      ...(0, import_utils.mergeProps)(
-        imgProps,
-        props,
-        (0, import_react_utils2.filterDOMProps)({ disableAnimation }, {
-          enabled: shouldFilterDOMProps
-        })
-      )
-    }),
-    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef, shouldFilterDOMProps]
-  );
-  return {
-    Component,
-    ImgComponent,
-    src,
-    alt,
-    icon,
-    name,
-    imgRef,
-    slots,
-    classNames,
-    fallback,
-    isImgLoaded,
-    showFallback,
-    ignoreFallback,
-    getInitials,
-    getAvatarProps,
-    getImageProps
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useAvatar
-});

package/dist/use-avatar.mjs

@@ -1,8 +0,0 @@
-"use client";
-import {
-  useAvatar
-} from "./chunk-LTC67JRI.mjs";
-import "./chunk-JUJ53SJZ.mjs";
-export {
-  useAvatar
-};