docs: handle @nuxt/ui-pro components display

docs/app/components/content/ComponentProps.vue

@@ -2,9 +2,11 @@
 import { upperFirst, camelCase } from 'scule'
 import type { ComponentMeta } from 'vue-component-meta'
 import * as theme from '#build/ui'
+import * as themePro from '#build/ui-pro'
 
 const props = withDefaults(defineProps<{
   ignore?: string[]
+  pro?: boolean
 }>(), {
   ignore: () => [
     'activeClass',
@@ -32,7 +34,7 @@ const route = useRoute()
 const camelName = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
-const componentTheme = (theme as any)[camelName]
+const componentTheme = ((props.pro ? themePro : theme) as any)[camelName]
 const meta = await fetchComponentMeta(name as any)
 
 const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {

docs/app/components/content/ComponentTheme.vue

@@ -2,6 +2,11 @@
 import json5 from 'json5'
 import { camelCase } from 'scule'
 import * as theme from '#build/ui'
+import * as themePro from '#build/ui-pro'
+
+const props = defineProps<{
+  pro?: boolean
+}>()
 
 const route = useRoute()
 const { framework } = useSharedData()
@@ -12,7 +17,7 @@ const strippedCompoundVariants = ref(false)
 
 const strippedTheme = computed(() => {
   const strippedTheme = {
-    ...(theme as any)[name]
+    ...((props.pro ? themePro : theme) as any)[name]
   }
 
   if (strippedTheme?.compoundVariants) {
@@ -50,7 +55,7 @@ const strippedTheme = computed(() => {
 
 const component = computed(() => {
   return {
-    ui: {
+    [props.pro ? 'uiPro' : 'ui']: {
       [name]: strippedTheme.value
     }
   }

docs/nuxt.config.ts

@@ -119,7 +119,6 @@ export default defineNuxtConfig({
       '@nuxt/content',
       '@nuxt/icon',
       '@nuxt/image',
-      '@nuxt/ui-pro',
       '@nuxtjs/color-mode',
       '@nuxtjs/mdc',
       '@nuxtjs/plausible',