@nuxt/ui 3.3.1 → 4.0.0-alpha.0

package/.nuxt/ui/user.ts

@@ -0,0 +1,101 @@
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative group/user",
+    "wrapper": "",
+    "name": "font-medium",
+    "description": "text-muted",
+    "avatar": "shrink-0"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex items-center"
+      },
+      "vertical": {
+        "root": "flex flex-col"
+      }
+    },
+    "to": {
+      "true": {
+        "name": [
+          "text-default peer-hover:text-highlighted",
+          "transition-colors"
+        ],
+        "description": [
+          "peer-hover:text-toned",
+          "transition-colors"
+        ],
+        "avatar": "transform transition-transform duration-200 group-hover/user:scale-115"
+      },
+      "false": {
+        "name": "text-highlighted",
+        "description": ""
+      }
+    },
+    "size": {
+      "3xs": {
+        "root": "gap-1",
+        "wrapper": "flex items-center gap-1",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "2xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "sm": {
+        "root": "gap-2",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "md": {
+        "root": "gap-2",
+        "name": "text-sm",
+        "description": "text-xs"
+      },
+      "lg": {
+        "root": "gap-2.5",
+        "name": "text-sm",
+        "description": "text-sm"
+      },
+      "xl": {
+        "root": "gap-2.5",
+        "name": "text-base",
+        "description": "text-sm"
+      },
+      "2xl": {
+        "root": "gap-3",
+        "name": "text-base",
+        "description": "text-base"
+      },
+      "3xl": {
+        "root": "gap-3",
+        "name": "text-lg",
+        "description": "text-base"
+      }
+    }
+  },
+  "defaultVariants": {
+    "size": "md" as typeof size[number]
+  }
+}

package/README.md

@@ -14,11 +14,7 @@
 Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
 
 > [!NOTE]
-> You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
-
-> [!TIP]
-> **Looking for more components ?**
-> Check out [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
+> You are on the `v4` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
 
 ## Documentation
 
@@ -59,7 +55,7 @@ export default defineNuxtConfig({
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/nuxt).
 
 ### Vue
 
@@ -106,18 +102,18 @@ app.mount('#app')
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/vue).
 
 ## Contribution
 
 Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
 
 - Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
-- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
+- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
 ## Local Development
 
-Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
+Follow the docs to [set up your local development environment](https://ui.nuxt.com/docs/getting-started/contribution#local-development) and contribute.
 
 ## Credits
 
@@ -131,7 +127,7 @@ Follow the docs to [set up your local development environment](https://ui.nuxt.c
 
 ## License
 
-Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
+Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v4/LICENSE.md).
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
@@ -141,7 +137,7 @@ Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
 [npm-downloads-href]: https://npm.chart.dev/@nuxt/ui
 
 [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/nuxt/ui/blob/v3/LICENSE.md
+[license-href]: https://github.com/nuxt/ui/blob/v4/LICENSE.md
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/cli/commands/make/component.mjs

@@ -21,17 +21,13 @@ export default defineCommand({
       type: 'boolean',
       description: 'Create a primitive component.'
     },
-    pro: {
-      type: 'boolean',
-      description: 'Create a pro component.'
-    },
     prose: {
       type: 'boolean',
-      description: 'Create a prose component (with --pro).'
+      description: 'Create a prose component.'
     },
     content: {
       type: 'boolean',
-      description: 'Create a content component (with --pro).'
+      description: 'Create a content component.'
     },
     template: {
       type: 'string',
@@ -45,15 +41,6 @@ export default defineCommand({
       process.exit(1)
     }
 
-    if (args.prose && !args.pro) {
-      consola.error('`--prose` flag can only be used with `--pro` flag!')
-      process.exit(1)
-    }
-    if (args.content && !args.pro) {
-      consola.error('`--content` flag can only be used with `--pro` flag!')
-      process.exit(1)
-    }
-
     const path = resolve('.')
 
     for (const template of Object.keys(templates)) {

package/cli/templates.mjs

@@ -1,14 +1,12 @@
 import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
 
-const playground = ({ name, pro }) => {
+const playground = ({ name }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const kebabName = kebabCase(name)
 
   return {
-    filename: `playground/app/pages/components/${kebabName}.vue`,
-    contents: pro
-      ? undefined
-      : `
+    filename: `playgrounds/nuxt/app/pages/components/${kebabName}.vue`,
+    contents: `
 <template>
   <div>
     <U${upperName} />
@@ -18,12 +16,10 @@ const playground = ({ name, pro }) => {
   }
 }
 
-const component = ({ name, primitive, pro, prose, content }) => {
+const component = ({ name, primitive, prose, content }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
   const kebabName = kebabCase(name)
-  const key = pro ? 'uiPro' : 'ui'
-  const path = pro ? 'ui-pro' : 'ui'
 
   return {
     filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
@@ -31,11 +27,10 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
-import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import type { ComponentConfig } from '../types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
 
 export interface ${upperName}Props {
   /**
@@ -63,7 +58,7 @@ defineSlots<${upperName}Slots>()
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -76,11 +71,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro'
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
-import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import type { ComponentConfig } from '../types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any
@@ -107,7 +101,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -168,7 +162,7 @@ describe('${upperName}', () => {
   }
 }
 
-const docs = ({ name, pro, primitive }) => {
+const docs = ({ name, primitive }) => {
   const kebabName = kebabCase(name)
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
 
@@ -176,10 +170,7 @@ const docs = ({ name, pro, primitive }) => {
     filename: `docs/content/3.components/${kebabName}.md`,
     contents: `---
 title: ${upperName}
-description: ''${pro
-  ? `
-module: ui-pro`
-  : ''}
+description: ''
 links:${primitive
   ? ''
   : `
@@ -188,7 +179,7 @@ links:${primitive
     to: https://reka-ui.com/docs/components/${kebabName}`}
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/${upperName}.vue
 navigation.badge: Soon
 ---
 
@@ -200,19 +191,19 @@ navigation.badge: Soon
 
 ### Props
 
-:component-props${pro ? '{pro}' : ''}
+:component-props
 
 ### Slots
 
-:component-slots${pro ? '{pro}' : ''}
+:component-slots
 
 ### Emits
 
-:component-emits${pro ? '{pro}' : ''}
+:component-emits
 
 ## Theme
 
-:component-theme${pro ? '{pro}' : ''}
+:component-theme
 
 ## Changelog
 

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { HookResult } from '@nuxt/schema';
 export * from '../dist/runtime/types/index.js';
 
 type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | (string & {});
@@ -7,36 +8,36 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui.nuxt.com/getting-started/installation/nuxt#prefix
+     * @link https://ui.nuxt.com/docs/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue `true`
-     * @link https://ui.nuxt.com/getting-started/installation/nuxt#fonts
+     * @link https://ui.nuxt.com/docs/getting-started/installation/nuxt#fonts
      */
     fonts?: boolean;
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui.nuxt.com/getting-started/installation/nuxt#colormode
+     * @link https://ui.nuxt.com/docs/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
      * Customize how the theme is generated
-     * @link https://ui.nuxt.com/getting-started/theme
+     * @link https://ui.nuxt.com/docs/getting-started/theme
      */
     theme?: {
         /**
          * Define the color aliases available for components
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
+         * @link https://ui.nuxt.com/docs/getting-started/installation/nuxt#themecolors
          */
         colors?: Color[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
+         * @link https://ui.nuxt.com/docs/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
         defaultVariants?: {
@@ -52,6 +53,23 @@ interface ModuleOptions {
             size?: Size;
         };
     };
+    /**
+     * Force the import of prose components even if `@nuxtjs/mdc` or `@nuxt/content` are not installed
+     * @defaultValue false
+     */
+    mdc?: boolean;
+    /**
+     * Force the import of content & prose components even if `@nuxt/content` is not installed
+     * @defaultValue false
+     */
+    content?: boolean;
+}
+declare module '#app' {
+    interface RuntimeNuxtHooks {
+        'dashboard:search:toggle': () => HookResult;
+        'dashboard:sidebar:toggle': () => HookResult;
+        'dashboard:sidebar:collapse': (value: boolean) => HookResult;
+    }
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.3.1",
-  "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
+  "version": "4.0.0-alpha.0",
+  "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.16.0"

package/dist/module.mjs

@@ -1,20 +1,20 @@
 import { defu } from 'defu';
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BTUFJHYJ.mjs';
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DT-jTZu1.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
-import 'tailwindcss/colors';
 import 'knitwork';
+import 'tailwindcss/colors';
 
 const name = "@nuxt/ui";
-const version = "3.3.1";
+const version = "4.0.0-alpha.0";
 
 const module = defineNuxtModule({
   meta: {
     name,
     version,
-    docs: "https://ui.nuxt.com/getting-started/installation/nuxt",
+    docs: "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.16.0"
@@ -60,10 +60,71 @@ const module = defineNuxtModule({
       });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
+    if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content)) {
+      nuxt.options.mdc = defu(nuxt.options.mdc, {
+        highlight: {
+          theme: {
+            light: "material-theme-lighter",
+            default: "material-theme",
+            dark: "material-theme-palenight"
+          }
+        },
+        components: {
+          map: {
+            "accordion": "ProseAccordion",
+            "accordion-item": "ProseAccordionItem",
+            "badge": "ProseBadge",
+            "callout": "ProseCallout",
+            "card": "ProseCard",
+            "card-group": "ProseCardGroup",
+            "caution": "ProseCaution",
+            "code-collapse": "ProseCodeCollapse",
+            "code-group": "ProseCodeGroup",
+            "code-icon": "ProseCodeIcon",
+            "code-preview": "ProseCodePreview",
+            "code-tree": "ProseCodeTree",
+            "collapsible": "ProseCollapsible",
+            "field": "ProseField",
+            "field-group": "ProseFieldGroup",
+            "icon": "ProseIcon",
+            "kbd": "ProseKbd",
+            "note": "ProseNote",
+            "steps": "ProseSteps",
+            "tabs": "ProseTabs",
+            "tabs-item": "ProseTabsItem",
+            "tip": "ProseTip",
+            "warning": "ProseWarning"
+          }
+        }
+      });
+      addComponentsDir({
+        path: resolve("./runtime/components/prose"),
+        pathPrefix: false,
+        prefix: "Prose",
+        global: true
+      });
+    }
+    if (hasNuxtModule("@nuxt/content") || options.content) {
+      addComponentsDir({
+        path: resolve("./runtime/components/content"),
+        pathPrefix: false,
+        prefix: options.prefix
+      });
+    }
+    if (hasNuxtModule("@nuxtjs/color-mode")) {
+      addComponentsDir({
+        path: resolve("./runtime/components/color-mode"),
+        pathPrefix: false,
+        prefix: options.prefix
+      });
+    } else {
+      addImportsDir(resolve("./runtime/composables/color-mode"));
+    }
     addComponentsDir({
       path: resolve("./runtime/components"),
+      pathPrefix: false,
       prefix: options.prefix,
-      pathPrefix: false
+      ignore: ["color-mode/**", "content/**", "prose/**"]
     });
     addImportsDir(resolve("./runtime/composables"));
     addTemplates(options, nuxt, resolve);

package/dist/runtime/components/Accordion.vue.d.ts

@@ -1,7 +1,8 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/accordion';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
 export interface AccordionItem {
     label?: string;

package/dist/runtime/components/Alert.vue.d.ts

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/alert';
 import type { AvatarProps, ButtonProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>;
 export interface AlertProps {
     /**

package/dist/runtime/components/App.vue.d.ts

@@ -1,5 +1,6 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
-import type { ToasterProps, Locale, Messages } from '../types';
+import type { ToasterProps } from '../types';
+import type { Locale, Messages } from '../types/locale';
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
     tooltip?: TooltipProviderProps;
     toaster?: ToasterProps | null;