@yamada-ui/react/dist/types/components/avatar/avatar.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ComponentSlotStyle, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSObject, CSSSlotObject } from "../../core/css/index.types.js";
import { As, Component, HTMLStyledProps } from "../../core/components/index.types.js";
import { ComponentOptions, ComponentSlot, ComponentSlotName, SuperProps, UseComponentPropsOptions } from "../../core/components/create-component.js";
import "../../core/index.js";
import { AvatarStyle } from "./avatar.style.js";
import { UseAvatarProps } from "./use-avatar.js";
import "../../index.js";
import * as react41 from "react";
import { ReactElement } from "react";
import * as _yamada_ui_utils0 from "@yamada-ui/utils";

//#region src/components/avatar/avatar.d.ts
interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
  /**
   * The avatar icon to use.
   */
  icon?: ReactElement;
  /**
   * The props to pass to the fallback component.
   */
  fallbackProps?: AvatarFallbackProps;
  /**
   * The props to pass to the image component.
   */
  imageProps?: AvatarImageProps;
}
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>>(el: H | react41.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
    shape: {
      circle: {
        root: {
          rounded: "full";
        };
      };
      rounded: {
        root: {
          rounded: "l2";
        };
      };
      square: {
        root: {
          rounded: "0";
        };
      };
    };
  }, {
    xs: {
      fallback: {
        fontSize: "xs";
        lineHeight: "{sizes.8}";
      };
      root: {
        boxSize: "8";
      };
    };
    sm: {
      fallback: {
        fontSize: "sm";
        lineHeight: "{sizes.9}";
      };
      root: {
        boxSize: "9";
      };
    };
    md: {
      fallback: {
        fontSize: "md";
        lineHeight: "{sizes.10}";
      };
      root: {
        boxSize: "10";
      };
    };
    lg: {
      fallback: {
        fontSize: "md";
        lineHeight: "{sizes.11}";
      };
      root: {
        boxSize: "11";
      };
    };
    xl: {
      fallback: {
        fontSize: "lg";
        lineHeight: "{sizes.12}";
      };
      root: {
        boxSize: "12";
      };
    };
  }, {
    outline: {
      group: {
        _child: {
          _loaded: {
            borderColor: "bg !important";
            borderWidth: "1px";
          };
        };
      };
      root: {
        layerStyle: "outline";
        _loaded: {
          bg: "transparent";
          borderColor: "transparent";
        };
      };
    };
    solid: {
      group: {
        _child: {
          borderColor: "bg";
          borderWidth: "1px";
        };
      };
      root: {
        layerStyle: "solid";
        _loaded: {
          bg: "transparent";
        };
      };
    };
    subtle: {
      group: {
        _child: {
          borderColor: "bg";
          borderWidth: "1px";
        };
      };
      root: {
        layerStyle: "subtle";
        _loaded: {
          bg: "transparent";
        };
      };
    };
    surface: {
      root: {
        layerStyle: "surface";
        _loaded: {
          bg: "transparent";
          borderColor: "transparent";
        };
      };
    };
  }>>> | undefined, {
    name,
    className,
    ...options
  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react41.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react41.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
    shape: {
      circle: {
        root: {
          rounded: "full";
        };
      };
      rounded: {
        root: {
          rounded: "l2";
        };
      };
      square: {
        root: {
          rounded: "0";
        };
      };
    };
  }, {
    xs: {
      fallback: {
        fontSize: "xs";
        lineHeight: "{sizes.8}";
      };
      root: {
        boxSize: "8";
      };
    };
    sm: {
      fallback: {
        fontSize: "sm";
        lineHeight: "{sizes.9}";
      };
      root: {
        boxSize: "9";
      };
    };
    md: {
      fallback: {
        fontSize: "md";
        lineHeight: "{sizes.10}";
      };
      root: {
        boxSize: "10";
      };
    };
    lg: {
      fallback: {
        fontSize: "md";
        lineHeight: "{sizes.11}";
      };
      root: {
        boxSize: "11";
      };
    };
    xl: {
      fallback: {
        fontSize: "lg";
        lineHeight: "{sizes.12}";
      };
      root: {
        boxSize: "12";
      };
    };
  }, {
    outline: {
      group: {
        _child: {
          _loaded: {
            borderColor: "bg !important";
            borderWidth: "1px";
          };
        };
      };
      root: {
        layerStyle: "outline";
        _loaded: {
          bg: "transparent";
          borderColor: "transparent";
        };
      };
    };
    solid: {
      group: {
        _child: {
          borderColor: "bg";
          borderWidth: "1px";
        };
      };
      root: {
        layerStyle: "solid";
        _loaded: {
          bg: "transparent";
        };
      };
    };
    subtle: {
      group: {
        _child: {
          borderColor: "bg";
          borderWidth: "1px";
        };
      };
      root: {
        layerStyle: "subtle";
        _loaded: {
          bg: "transparent";
        };
      };
    };
    surface: {
      root: {
        layerStyle: "surface";
        _loaded: {
          bg: "transparent";
          borderColor: "transparent";
        };
      };
    };
  }>>> | undefined, {
    className,
    withContext,
    transferProps
  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils0.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
    shape: {
      circle: {
        root: {
          rounded: "full";
        };
      };
      rounded: {
        root: {
          rounded: "l2";
        };
      };
      square: {
        root: {
          rounded: "0";
        };
      };
    };
  }, {
    xs: {
      fallback: {
        fontSize: "xs";
        lineHeight: "{sizes.8}";
      };
      root: {
        boxSize: "8";
      };
    };
    sm: {
      fallback: {
        fontSize: "sm";
        lineHeight: "{sizes.9}";
      };
      root: {
        boxSize: "9";
      };
    };
    md: {
      fallback: {
        fontSize: "md";
        lineHeight: "{sizes.10}";
      };
      root: {
        boxSize: "10";
      };
    };
    lg: {
      fallback: {
        fontSize: "md";
        lineHeight: "{sizes.11}";
      };
      root: {
        boxSize: "11";
      };
    };
    xl: {
      fallback: {
        fontSize: "lg";
        lineHeight: "{sizes.12}";
      };
      root: {
        boxSize: "12";
      };
    };
  }, {
    outline: {
      group: {
        _child: {
          _loaded: {
            borderColor: "bg !important";
            borderWidth: "1px";
          };
        };
      };
      root: {
        layerStyle: "outline";
        _loaded: {
          bg: "transparent";
          borderColor: "transparent";
        };
      };
    };
    solid: {
      group: {
        _child: {
          borderColor: "bg";
          borderWidth: "1px";
        };
      };
      root: {
        layerStyle: "solid";
        _loaded: {
          bg: "transparent";
        };
      };
    };
    subtle: {
      group: {
        _child: {
          borderColor: "bg";
          borderWidth: "1px";
        };
      };
      root: {
        layerStyle: "subtle";
        _loaded: {
          bg: "transparent";
        };
      };
    };
    surface: {
      root: {
        layerStyle: "surface";
        _loaded: {
          bg: "transparent";
          borderColor: "transparent";
        };
      };
    };
  }>, R>, {
    css?: CSSObject | CSSObject[];
  }>];
/**
 * `Avatar` is a component that displays a profile picture or an icon with initials representing a user.
 *
 * @see https://yamada-ui.com/docs/components/avatar
 */
declare const Avatar: Component<"div", AvatarProps>;
interface AvatarImageProps extends HTMLStyledProps<"img"> {}
interface AvatarFallbackProps extends HTMLStyledProps {}
//#endregion
export { Avatar, AvatarProps, AvatarPropsContext, useAvatarPropsContext };
//# sourceMappingURL=avatar.d.ts.map