feat(ui): add user profile account section

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>

.changeset/user-profile-account-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-connected-accounts-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-delete-section.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-panel-shell.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/user-profile-web3-wallets-section.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
  user: {
  'user-button': dynamic(() => import('../stories/user-button.mdx')),
+ 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+ 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+ 'user-profile-connected-accounts-section': dynamic(
+ () => import('../stories/user-profile-connected-accounts-section.mdx'),
+ ),
+ 'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+ 'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
  },
  components: {
  avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
  Organizations as UserButtonOrganizations,
  User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+ Default as UserProfileAccountSectionDefault,
+ meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+ Default as UserProfileConnectedAccountsSectionDefault,
+ meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+ Default as UserProfileDeleteSectionDefault,
+ meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+ Default as UserProfileProfilePanelDefault,
+ meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+ Default as UserProfileWeb3WalletsSectionDefault,
+ meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+ meta: userProfileAccountSectionMeta,
+ Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+ meta: userProfileProfilePanelMeta,
+ Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+ meta: userProfileConnectedAccountsSectionMeta,
+ Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+ meta: userProfileWeb3WalletsSectionMeta,
+ Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+ meta: userProfileDeleteSectionMeta,
+ Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
  // User
  userButtonModule,
+ userProfileProfilePanelModule,
+ userProfileAccountSectionModule,
+ userProfileConnectedAccountsSectionModule,
+ userProfileWeb3WalletsSectionModule,
+ userProfileDeleteSectionModule,
  // Components
  avatarModule,
  badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileAccountSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileAccountSectionView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onManageEmail={() => undefined}
+ onManagePhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Icon', href: '/components/icon', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileConnectedAccountsSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+ return (
+ <UserProfileConnectedAccountsSectionView
+ accounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: 'https://img.clerk.com/static/google.svg',
+ connected: true,
+ },
+ {
+ id: 'apple',
+ provider: 'Apple',
+ iconUrl: 'https://img.clerk.com/static/apple.svg',
+ connected: false,
+ },
+ ]}
+ onConnect={() => undefined}
+ onManage={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileDeleteSection',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+ return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+ name='Default'
+ storyModule={UserProfileProfilePanelStories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+ ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+ imageUrl={user.imageUrl}
+ name={user.fullName ?? ''}
+ username={user.username ?? ''}
+ emails={user.emailAddresses.map(email => ({
+ id: email.id,
+ value: email.emailAddress,
+ isDefault: email.id === user.primaryEmailAddressId,
+ isVerified: email.verification.status === 'verified',
+ }))}
+ phones={user.phoneNumbers.map(phone => ({
+ id: phone.id,
+ value: phone.phoneNumber,
+ isDefault: phone.id === user.primaryPhoneNumberId,
+ isVerified: phone.verification.status === 'verified',
+ }))}
+ connectedAccounts={user.externalAccounts.map(account => ({
+ id: account.id,
+ provider: account.provider,
+ identifier: account.emailAddress,
+ connected: true,
+ }))}
+ web3Wallets={supportedWeb3Wallets.map(provider => {
+ const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+ return {
+ id: provider.id,
+ provider: provider.name,
+ iconUrl: provider.iconUrl,
+ address: wallet?.web3Wallet,
+ connected: Boolean(wallet),
+ isPrimary: wallet?.id === user.primaryWeb3WalletId,
+ isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+ };
+ })}
+ onVerifyEmail={verifyEmail}
+ onSetPrimaryEmail={setPrimaryEmail}
+ onRemoveEmail={removeEmail}
+ onVerifyPhone={verifyPhone}
+ onSetPrimaryPhone={setPrimaryPhone}
+ onRemovePhone={removePhone}
+ onRemoveConnectedAccount={removeConnectedAccount}
+ onConnectWeb3Wallet={connectWeb3Wallet}
+ onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+ onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+ group: 'User',
+ title: 'UserProfileProfilePanel',
+ source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+ return (
+ <UserProfileProfilePanelView
+ emails={[
+ { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+ { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+ ]}
+ connectedAccounts={[
+ {
+ id: 'google',
+ provider: 'Google',
+ identifier: 'test@google.com',
+ iconUrl: providerIconUrl('google'),
+ connected: true,
+ },
+ { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+ ]}
+ web3Wallets={[
+ {
+ id: 'metamask',
+ address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+ provider: 'MetaMask',
+ iconUrl: providerIconUrl('metamask'),
+ isPrimary: true,
+ isVerified: true,
+ },
+ {
+ id: 'coinbase-wallet',
+ provider: 'Coinbase Wallet',
+ iconUrl: providerIconUrl('coinbase_wallet'),
+ connected: false,
+ },
+ ]}
+ imageUrl={profileImageUrl}
+ name='Preston Booth'
+ phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+ username='prestonxyz'
+ onAddEmail={() => undefined}
+ onAddPhone={() => undefined}
+ onConnectAccount={() => undefined}
+ onDeleteAccount={() => undefined}
+ onEditProfilePicture={() => undefined}
+ onRemoveConnectedAccount={() => undefined}
+ onRemoveEmail={() => undefined}
+ onRemovePhone={() => undefined}
+ onConnectWeb3Wallet={() => undefined}
+ onRemoveWeb3Wallet={() => undefined}
+ onSetPrimaryWeb3Wallet={() => undefined}
+ onSetPrimaryEmail={() => undefined}
+ onSetPrimaryPhone={() => undefined}
+ onVerifyEmail={() => undefined}
+ onVerifyPhone={() => undefined}
+ onNameChange={() => undefined}
+ onUsernameChange={() => undefined}
+ />
+ );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+ name='Default'
+ storyModule={Stories}
+ composition={[
+ { name: 'Section', href: '/components/section', layer: 'Components' },
+ { name: 'Badge', href: '/components/badge', layer: 'Components' },
+ ]}
+/>