feat(ui): User profile component (WIP)

.changeset/migrate-mosaic-input-to-stylex.md

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

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

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Add an outlined Card elevation for bordered, non-elevated surfaces, make Item groups layout-only, and expose Web3 wallets in the Mosaic user profile panel.

.changeset/quiet-fields-compose.md

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

packages/swingset/src/components/DocsViewer.tsx

@@ -10,6 +10,9 @@ import { ViewSource } from './ViewSource';
 // MDX docs keyed by `group` slug → `component` slug. Group-aware so identically-named
 // entries (the headless `Dialog` primitive vs. the styled `Dialog` component) stay distinct.
 const docModules: Record<string, Record<string, React.ComponentType>> = {
+  user: {
+    'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+  },
   organization: {
     'organization-profile': dynamic(() => import('../stories/organization-profile.mdx')),
     'organization-profile-general-panel': dynamic(() => import('../stories/organization-profile-general-panel.mdx')),
@@ -41,6 +44,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     popover: dynamic(() => import('../stories/popover.component.mdx')),
     tabs: dynamic(() => import('../stories/tabs.component.mdx')),
     text: dynamic(() => import('../stories/text.mdx')),
+    field: dynamic(() => import('../stories/field.component.mdx')),
   },
   primitives: {
     // Headless primitives — alphabetical.

packages/swingset/src/lib/registry.ts

@@ -25,6 +25,7 @@ import { Default as DestructiveDefault, meta as destructiveMeta } from '../stori
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
 import { meta as drawerMeta } from '../stories/drawer.stories';
+import { Default as FieldDefault, meta as fieldMeta } from '../stories/field.component.stories';
 import { meta as fileUploadMeta } from '../stories/file-upload.stories';
 import {
   Colors as HeadingColors,
@@ -115,6 +116,10 @@ import {
 } from '../stories/text.stories';
 import { meta as tooltipMeta } from '../stories/tooltip.stories';
 import { meta as useDataTableMeta } from '../stories/use-data-table.stories';
+import {
+  Default as UserProfileProfilePanelDefault,
+  meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -200,6 +205,11 @@ const tabsComponentModule: StoryModule = { meta: tabsComponentMeta, Default: Tab
 
 const textModule: StoryModule = { meta: textMeta, Default: TextDefault, Sizes: TextSizes, Colors: TextColors };
 
+const fieldModule: StoryModule = {
+  meta: fieldMeta,
+  Default: FieldDefault,
+};
+
 const iconModule: StoryModule = {
   meta: iconMeta,
   Default: IconDefault,
@@ -236,7 +246,14 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileProfilePanelModule: StoryModule = {
+  meta: userProfileProfilePanelMeta,
+  Default: UserProfileProfilePanelDefault,
+};
+
 export const registry: StoryModule[] = [
+  // User
+  userProfileProfilePanelModule,
   // Organization
   organizationProfileModule,
   organizationProfileGeneralPanelModule,
@@ -262,6 +279,7 @@ export const registry: StoryModule[] = [
   popoverComponentModule,
   tabsComponentModule,
   textModule,
+  fieldModule,
   // Primitives — alphabetical within the group.
   accordionModule,
   autocompleteModule,

packages/swingset/src/stories/card.component.stories.tsx

@@ -19,7 +19,7 @@ export const meta: StoryMeta = {
   styles: {
     _variants: {
       alignment: { start: {}, center: {} },
-      elevation: { card: {}, flush: {}, overlay: {} },
+      elevation: { card: {}, flush: {}, outlined: {}, overlay: {} },
     },
     _defaultVariants: {
       alignment: 'start',

packages/swingset/src/stories/field.component.mdx

@@ -0,0 +1,61 @@
+import * as FieldStories from './field.component.stories';
+
+# Field
+
+The Mosaic `Field` provides StyleX-themed parts for composing labels, supporting text, and validation errors around a form control. Its context automatically connects Mosaic controls to the rendered label and messages.
+
+## Example
+
+<Story
+  name='Default'
+  storyModule={FieldStories}
+/>
+
+## Usage
+
+Compose one Mosaic control inside each `Field.Root` to generate its ID, the label's `htmlFor`, and the message relationships. Rendering multiple controls logs a development warning. The caller owns validation and decides when to render an error. Use a separate `Field.Root` for each control; grouped controls should use native `<fieldset>` and `<legend>` semantics until dedicated Mosaic `Fieldset` and `Field.Item` components are available.
+
+```tsx
+import { Field } from '@clerk/ui/mosaic/components/field';
+import { Input } from '@clerk/ui/mosaic/components/input';
+
+<Field.Root>
+  <Field.Label>Email address</Field.Label>
+  <Input
+    name='email'
+    type='email'
+    required
+    aria-invalid={Boolean(error)}
+  />
+  {error ? <Field.Error>{error}</Field.Error> : <Field.Description>Used for account notifications.</Field.Description>}
+</Field.Root>;
+```
+
+Explicit `id`, `htmlFor`, `aria-labelledby`, and `aria-describedby` values remain supported. Field preserves explicit IDs after hydration and merges external ARIA references with its generated relationships. During server rendering, Field emits its generated control ID and native label relationship; explicit control IDs and generated label and message ARIA references finalize during hydration. `name` still identifies the submitted form value and is typically what form libraries use for registration.
+
+Field does not validate controls, propagate semantic state, or render errors automatically. Its parts may also be used independently without `Field.Root`.
+
+## Parts
+
+| Part                | Stable slot class       | Description                                       |
+| ------------------- | ----------------------- | ------------------------------------------------- |
+| `Field.Root`        | `.cl-field-root`        | Unstyled `div` and field context provider.        |
+| `Field.Label`       | `.cl-field-label`       | Native `label` associated with the field control. |
+| `Field.Description` | `.cl-field-description` | Supporting `p` associated with the field control. |
+| `Field.Error`       | `.cl-field-error`       | Associated error `p` with an alert icon.          |
+
+## Styling
+
+The Mosaic field is themed with **StyleX**. Each styled part carries the stable public slot class shown above alongside the generated StyleX atoms. Consumers never target the hashed atomic classes—override a `.cl-field-*` class from a CSS layer that wins over `@clerk/ui/styles.css`:
+
+```css
+@import '@clerk/ui/styles.css' layer(components);
+
+@layer overrides {
+  .cl-field-label {
+    font-weight: 600;
+  }
+}
+```
+
+`Field.Root` ships no layout. Higher-level blocks own how its parts are arranged; for example, a settings row can provide the grid and alignment for a field. Customize an `Input` through its exposed tokens, `.cl-input`, `className`, and `style`; Field does not add control-specific styling.

packages/swingset/src/stories/field.component.stories.tsx

@@ -0,0 +1,35 @@
+import { Field } from '@clerk/ui/mosaic/components/field';
+import { Input } from '@clerk/ui/mosaic/components/input';
+
+import type { StoryMeta } from '@/lib/types';
+
+// Exposes this file's own source (via the `?raw` webpack rule) so each `<Story>` example
+// renders a code footer with its function's source. See `StoryModule.__source`.
+export { default as __source } from './field.component.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Components',
+  title: 'Field',
+  source: 'packages/ui/src/mosaic/components/field/field.tsx',
+  styleEngine: 'stylex',
+};
+
+const stackStyles = {
+  display: 'grid',
+  gap: 8,
+  maxWidth: 384,
+} as const;
+
+export function Default() {
+  return (
+    <Field.Root style={stackStyles}>
+      <Field.Label>Email address</Field.Label>
+      <Input
+        name='email'
+        type='email'
+        placeholder='you@example.com'
+      />
+      <Field.Description>Used for account notifications.</Field.Description>
+    </Field.Root>
+  );
+}

packages/swingset/src/stories/icon.stories.tsx

@@ -17,7 +17,7 @@ export const meta: StoryMeta = {
   styleEngine: 'stylex',
   styles: {
     _variants: {
-      size: { sm: {}, md: {}, lg: {} },
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
     },
     _defaultVariants: {
       size: 'md',
@@ -44,6 +44,11 @@ export function Default(props: Record<string, unknown>) {
 export function Sizes(props: Record<string, unknown>) {
   return (
     <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Icon
+        {...knobsAsProps(props)}
+        name='chevron-right'
+        size='xs'
+      />
       <Icon
         {...knobsAsProps(props)}
         name='chevron-right'

packages/swingset/src/stories/input.stories.tsx

@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
 import type { InputProps } from '@clerk/ui/mosaic/components/input';
-import { Input, inputRecipe } from '@clerk/ui/mosaic/components/input';
+import { Input } from '@clerk/ui/mosaic/components/input';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -11,8 +10,16 @@ export { default as __source } from './input.stories?raw';
 export const meta: StoryMeta = {
   group: 'Components',
   title: 'Input',
-  source: 'packages/ui/src/mosaic/components/input.tsx',
-  styles: inputRecipe,
+  source: 'packages/ui/src/mosaic/components/input/input.tsx',
+  styleEngine: 'stylex',
+  styles: {
+    _variants: {
+      size: { sm: {}, md: {}, lg: {} },
+    },
+    _defaultVariants: {
+      size: 'md',
+    },
+  },
 };
 
 function knobsAsProps(props: Record<string, unknown>) {
@@ -41,6 +48,11 @@ export function Sizes(props: Record<string, unknown>) {
         size='md'
         placeholder='Medium'
       />
+      <Input
+        {...knobsAsProps(props)}
+        size='lg'
+        placeholder='Large'
+      />
     </div>
   );
 }

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

@@ -0,0 +1,62 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view renders account details, connected accounts, Web3 wallets, and the danger zone from props
+while its callbacks provide the seam for connected Clerk resources.
+
+## Example
+
+<Story
+  name='Default'
+  storyModule={UserProfileProfilePanelStories}
+/>
+
+## 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={user.web3Wallets.map(wallet => ({
+    id: wallet.id,
+    address: wallet.web3Wallet,
+    isPrimary: wallet.id === user.primaryWeb3WalletId,
+    isVerified: wallet.verification.status === 'verified',
+  }))}
+  onNameChange={setName}
+  onUsernameChange={setUsername}
+  onVerifyEmail={verifyEmail}
+  onSetPrimaryEmail={setPrimaryEmail}
+  onRemoveEmail={removeEmail}
+  onVerifyPhone={verifyPhone}
+  onSetPrimaryPhone={setPrimaryPhone}
+  onRemovePhone={removePhone}
+  onRemoveConnectedAccount={removeConnectedAccount}
+  onAddWeb3Wallet={addWeb3Wallet}
+  onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+  onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

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

@@ -0,0 +1,71 @@
+/** @jsxImportSource @emotion/react */
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+import { useState } from 'react';
+
+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>) {
+  const [name, setName] = useState('Preston Booth');
+  const [username, setUsername] = useState('prestonxyz');
+
+  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,
+        },
+      ]}
+      imageUrl={profileImageUrl}
+      name={name}
+      phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+      username={username}
+      onAddEmail={() => undefined}
+      onAddPhone={() => undefined}
+      onConnectAccount={() => undefined}
+      onDeleteAccount={() => undefined}
+      onEditProfilePicture={() => undefined}
+      onRemoveConnectedAccount={() => undefined}
+      onRemoveEmail={() => undefined}
+      onRemovePhone={() => undefined}
+      onAddWeb3Wallet={() => undefined}
+      onRemoveWeb3Wallet={() => undefined}
+      onSetPrimaryWeb3Wallet={() => undefined}
+      onSetPrimaryEmail={() => undefined}
+      onSetPrimaryPhone={() => undefined}
+      onVerifyEmail={() => undefined}
+      onVerifyPhone={() => undefined}
+      onNameChange={setName}
+      onUsernameChange={setUsername}
+    />
+  );
+}

packages/ui/src/mosaic/block/destructive.tsx

@@ -90,9 +90,7 @@ export function Destructive({
                 value={confirmValue}
                 onChange={e => setConfirmValue(e.target.value)}
                 disabled={isDeleting}
-                sx={t => ({
-                  marginBlockStart: t.spacing(1),
-                })}
+                style={{ marginBlockStart: 'var(--cl-spacing)' }}
               />
             </Box>
             <Box