Create and export customizable avatar component

JavaScript

// Avatar shared npm package

import { DOMAttributes, HTMLAttributes, ReactNode, forwardRef } from 'react';

import { AvatarProps, Avatar as MantineAvatar, ThemeIcon } from '@mantine/core';

import { IconUser } from '../icons';

export type TAvatarProps = AvatarProps &
  DOMAttributes<HTMLDivElement> &
  HTMLAttributes<HTMLDivElement> & {
    placeholderIcon?: ReactNode;
    isDisabled?: boolean;
  };

export const Avatar = forwardRef<HTMLDivElement, TAvatarProps>(
  ({ children, placeholderIcon, isDisabled, ...props }, ref) => {
    return (
      <MantineAvatar
        size="lg"
        variant="filled"
        ref={ref}
        {...props}
        pos="relative"
        data-disabled={isDisabled}
      >
        {children || (
          <ThemeIcon
            size="md"
            color={props.variant === 'filled' ? 'white' : props.color || 'gray'}
            variant="transparent"
          >
            {placeholderIcon || <IconUser />}
          </ThemeIcon>
        )}
      </MantineAvatar>
    );
  }
);

Avatar.displayName = 'Avatar';

//index


export * from './lib/utils'
export { cssVariablesResolver } from './lib/cssVariablesResolver';
export * from './components';


// vite.config

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import dts from 'vite-plugin-dts';
import { libInjectCss } from 'vite-plugin-lib-inject-css';

export default defineConfig({
  plugins: [
    react(),
    libInjectCss(),
    dts({
      insertTypesEntry: true,
      include: ['src'],
    }),
  ],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'MyhrUI',
      fileName: (format) => `myhr-ui.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
  ssr: {
    target: "webworker",
    noExternal: true,
    resolve: {
      conditions: ["worker", "workerd",...