fix: use Object.assign pattern for composed exports

Export UserProfile and OrganizationProfile as function components
with static properties (via Object.assign) instead of plain objects.
This matches the existing UserButton pattern and is compatible with
React Server Components client references, which support property
access on function exports but not on plain object exports.

The provider is now the root component itself — consumers write
<UserProfile> instead of <UserProfile.Provider>.

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

Author: alexcarpenter

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -10,8 +10,7 @@ import {
   GeneralVerifiedDomains,
 } from './sectionWrappers';
 
-export const OrganizationProfile = {
-  Provider: OrganizationProfileProvider,
+export const OrganizationProfile = Object.assign(OrganizationProfileProvider, {
   General,
   Members,
   Billing,
@@ -20,4 +19,4 @@ export const OrganizationProfile = {
   GeneralVerifiedDomains,
   GeneralLeaveOrganization,
   GeneralDeleteOrganization,
-};
+});

packages/ui/src/composed/UserProfile/index.tsx

@@ -18,8 +18,7 @@ import {
 } from './sectionWrappers';
 import { UserProfileProvider } from './UserProfileProvider';
 
-export const UserProfile = {
-  Provider: UserProfileProvider,
+export const UserProfile = Object.assign(UserProfileProvider, {
   Account,
   Security,
   Billing,
@@ -36,4 +35,4 @@ export const UserProfile = {
   SecurityMfa,
   SecurityActiveDevices,
   SecurityDelete,
-};
+});

playground/composed/src/App.tsx

@@ -87,7 +87,7 @@ export function App() {
             </div>
 
             {profileType === 'user' && (
-              <UserProfile.Provider>
+              <UserProfile>
                 <TabBar
                   tabs={['account', 'security', 'billing', 'api-keys']}
                   active={userTab}
@@ -125,11 +125,11 @@ export function App() {
                     {userTab === 'api-keys' && <UserProfile.APIKeys />}
                   </>
                 )}
-              </UserProfile.Provider>
+              </UserProfile>
             )}
 
             {profileType === 'organization' && (
-              <OrganizationProfile.Provider>
+              <OrganizationProfile>
                 <TabBar
                   tabs={['general', 'members', 'billing', 'api-keys']}
                   active={orgTab}
@@ -157,7 +157,7 @@ export function App() {
                     {orgTab === 'api-keys' && <OrganizationProfile.APIKeys />}
                   </>
                 )}
-              </OrganizationProfile.Provider>
+              </OrganizationProfile>
             )}
           </>
         }