feat: export components and update build system

Adds new component exports and updates the build configuration to support
separate component builds.

Changes:
- Export Avatar component with loading state support
- Export AccountModal and ChainModal components
- Add components/package.json for proper module resolution
- Update build.js to support components build
- Update src/components/index.ts with component re-exports
- Update example to use typed wallet IDs with 'as const'

This enables developers to use RainbowKit UI components individually
in custom wallet connection flows.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: DanielSinclair

packages/rainbowkit/build.js

@@ -133,23 +133,36 @@ const walletsBuildOptions = {
   outdir: 'dist/wallets/walletConnectors',
 };
 
+const componentsBuildOptions = {
+  ...baseBuildConfig((result) => {
+    if (result.errors.length) {
+      console.error('❌ components build failed', result.errors);
+    } else console.log('✅ components build succeeded');
+  }),
+  entryPoints: await getAllEntryPoints('src/components'),
+  outdir: 'dist/components',
+};
+
 const build = async () => {
   // Build and watch for new changes if --watch flag is passed
   if (isWatching) {
-    const [mainContext, walletsContext] = await Promise.all([
+    const [mainContext, walletsContext, componentsContext] = await Promise.all([
       esbuild.context(mainBuildOptions),
       esbuild.context(walletsBuildOptions),
+      esbuild.context(componentsBuildOptions),
     ]);
 
     await mainContext.watch();
     await walletsContext.watch();
+    await componentsContext.watch();
     return;
   }
 
   // Only build once
   await Promise.all([
     esbuild.build(mainBuildOptions),
     esbuild.build(walletsBuildOptions),
+    esbuild.build(componentsBuildOptions),
   ]);
 };
 

packages/rainbowkit/components/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/components/index.js"
+}

packages/rainbowkit/package.json

@@ -5,13 +5,15 @@
   "files": [
     "dist",
     "styles.css",
-    "wallets"
+    "wallets",
+    "components"
   ],
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
     "./styles.css": "./dist/index.css",
-    "./wallets": "./dist/wallets/walletConnectors/index.js"
+    "./wallets": "./dist/wallets/walletConnectors/index.js",
+    "./components": "./dist/components/index.js"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/rainbowkit/src/components/Avatar/Avatar.tsx

@@ -3,12 +3,12 @@ import { Box } from '../Box/Box';
 import { SpinnerIcon } from '../Icons/Spinner';
 import { AvatarContext } from '../RainbowKitProvider/AvatarContext';
 
-interface AvatarProps {
+export type AvatarProps = {
   address: string;
   loading?: boolean;
   imageUrl?: string | null;
   size: number;
-}
+};
 
 export function Avatar({ address, imageUrl, loading, size }: AvatarProps) {
   const AvatarComponent = useContext(AvatarContext);

packages/rainbowkit/src/components/index.ts

@@ -1,3 +1,29 @@
+// ============================ Button Components ============================
+// Main connect button with wallet connection flow
 export { ConnectButton } from './ConnectButton/ConnectButton';
+export type { ConnectButtonProps } from './ConnectButton/ConnectButton';
+
+// Individual wallet button for specific wallet connections
 export { WalletButton } from './WalletButton/WalletButton';
-export { RainbowKitProvider } from './RainbowKitProvider/RainbowKitProvider';
+export type { WalletButtonProps } from './WalletButton/WalletButton';
+
+// ============================ Avatar Components ============================
+// Main Avatar component that displays user avatars with optional loading states
+export { Avatar } from './Avatar/Avatar';
+export type { AvatarProps } from './Avatar/Avatar';
+
+// Default emoji-based avatar implementation
+export { EmojiAvatar } from './Avatar/EmojiAvatar';
+export type { AvatarComponentProps as EmojiAvatarProps } from './RainbowKitProvider/AvatarContext';
+
+// Utility function to generate emoji avatars based on wallet addresses
+export { emojiAvatarForAddress } from './Avatar/emojiAvatarForAddress';
+
+// ============================ Modal Components ============================
+// Modal for displaying account details, balance, and disconnect functionality
+export { AccountModal } from './AccountModal/AccountModal';
+export type { AccountModalProps } from './AccountModal/AccountModal';
+
+// Modal for switching between different chains
+export { ChainModal } from './ChainModal/ChainModal';
+export type { ChainModalProps } from './ChainModal/ChainModal';