@nuxt/ui 3.0.0-alpha.11 → 3.0.0-alpha.13

package/.nuxt/ui/toast.ts

@@ -8,65 +8,75 @@ const color = [
   "neutral"
 ] as const
 
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "slots": {
-    "root": "relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none",
-    "wrapper": "w-0 flex-1 flex flex-col gap-1",
-    "title": "text-sm font-medium text-[var(--ui-text-highlighted)]",
-    "description": "text-sm text-[var(--ui-text-muted)]",
+    "root": "relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none",
+    "wrapper": "w-0 flex-1 flex flex-col",
+    "title": "text-sm font-medium text-(--ui-text-highlighted)",
+    "description": "text-sm text-(--ui-text-muted)",
     "icon": "shrink-0 size-5",
     "avatar": "shrink-0",
     "avatarSize": "2xl",
     "actions": "flex gap-1.5 shrink-0",
     "progress": "absolute inset-x-0 bottom-0 h-1 z-[-1]",
-    "close": "p-0.5"
+    "close": "p-0"
   },
   "variants": {
     "color": {
       "primary": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]",
-        "icon": "text-[var(--ui-primary)]",
-        "progress": "bg-[var(--ui-primary)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)",
+        "icon": "text-(--ui-primary)",
+        "progress": "bg-(--ui-primary)"
       },
       "secondary": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-secondary)]",
-        "icon": "text-[var(--ui-secondary)]",
-        "progress": "bg-[var(--ui-secondary)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)",
+        "icon": "text-(--ui-secondary)",
+        "progress": "bg-(--ui-secondary)"
       },
       "success": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-success)]",
-        "icon": "text-[var(--ui-success)]",
-        "progress": "bg-[var(--ui-success)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)",
+        "icon": "text-(--ui-success)",
+        "progress": "bg-(--ui-success)"
       },
       "info": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-info)]",
-        "icon": "text-[var(--ui-info)]",
-        "progress": "bg-[var(--ui-info)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)",
+        "icon": "text-(--ui-info)",
+        "progress": "bg-(--ui-info)"
       },
       "warning": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-warning)]",
-        "icon": "text-[var(--ui-warning)]",
-        "progress": "bg-[var(--ui-warning)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)",
+        "icon": "text-(--ui-warning)",
+        "progress": "bg-(--ui-warning)"
       },
       "error": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)]",
-        "icon": "text-[var(--ui-error)]",
-        "progress": "bg-[var(--ui-error)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)",
+        "icon": "text-(--ui-error)",
+        "progress": "bg-(--ui-error)"
       },
       "neutral": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]",
-        "icon": "text-[var(--ui-text-highlighted)]",
-        "progress": "bg-[var(--ui-bg-inverted)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)",
+        "icon": "text-(--ui-text-highlighted)",
+        "progress": "bg-(--ui-bg-inverted)"
       }
     },
-    "multiline": {
-      "true": {
-        "root": "items-start",
-        "actions": "items-start mt-1"
-      },
-      "false": {
+    "orientation": {
+      "horizontal": {
         "root": "items-center",
         "actions": "items-center"
+      },
+      "vertical": {
+        "root": "items-start",
+        "actions": "items-start mt-2.5"
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-1"
       }
     }
   },

package/.nuxt/ui/toaster.ts

@@ -16,8 +16,8 @@ const swipeDirection = [
 
 export default {
   "slots": {
-    "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
-    "base": "pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
+    "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   "variants": {
     "position": {
@@ -75,14 +75,14 @@ export default {
         "left" as typeof swipeDirection[number],
         "right" as typeof swipeDirection[number]
       ],
-      "class": "data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
+      "class": "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
     },
     {
       "swipeDirection": [
         "up" as typeof swipeDirection[number],
         "down" as typeof swipeDirection[number]
       ],
-      "class": "data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
+      "class": "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
     }
   ],
   "defaultVariants": {

package/.nuxt/ui/tooltip.ts

@@ -1,7 +1,7 @@
 export default {
   "slots": {
-    "content": "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
-    "arrow": "fill-[var(--ui-border)]",
+    "content": "flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+    "arrow": "fill-(--ui-border)",
     "text": "truncate",
     "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5",
     "kbdsSize": "sm"

package/.nuxt/ui.css

@@ -0,0 +1,90 @@
+@theme default {
+  --color-old-neutral-50: oklch(0.985 0 0);
+  --color-old-neutral-100: oklch(0.97 0 0);
+  --color-old-neutral-200: oklch(0.922 0 0);
+  --color-old-neutral-300: oklch(0.87 0 0);
+  --color-old-neutral-400: oklch(0.708 0 0);
+  --color-old-neutral-500: oklch(0.556 0 0);
+  --color-old-neutral-600: oklch(0.439 0 0);
+  --color-old-neutral-700: oklch(0.371 0 0);
+  --color-old-neutral-800: oklch(0.269 0 0);
+  --color-old-neutral-900: oklch(0.205 0 0);
+  --color-old-neutral-950: oklch(0.145 0 0);
+  --color-primary-50: var(--ui-color-primary-50);
+	--color-primary-100: var(--ui-color-primary-100);
+	--color-primary-200: var(--ui-color-primary-200);
+	--color-primary-300: var(--ui-color-primary-300);
+	--color-primary-400: var(--ui-color-primary-400);
+	--color-primary-500: var(--ui-color-primary-500);
+	--color-primary-600: var(--ui-color-primary-600);
+	--color-primary-700: var(--ui-color-primary-700);
+	--color-primary-800: var(--ui-color-primary-800);
+	--color-primary-900: var(--ui-color-primary-900);
+	--color-primary-950: var(--ui-color-primary-950);
+	--color-secondary-50: var(--ui-color-secondary-50);
+	--color-secondary-100: var(--ui-color-secondary-100);
+	--color-secondary-200: var(--ui-color-secondary-200);
+	--color-secondary-300: var(--ui-color-secondary-300);
+	--color-secondary-400: var(--ui-color-secondary-400);
+	--color-secondary-500: var(--ui-color-secondary-500);
+	--color-secondary-600: var(--ui-color-secondary-600);
+	--color-secondary-700: var(--ui-color-secondary-700);
+	--color-secondary-800: var(--ui-color-secondary-800);
+	--color-secondary-900: var(--ui-color-secondary-900);
+	--color-secondary-950: var(--ui-color-secondary-950);
+	--color-success-50: var(--ui-color-success-50);
+	--color-success-100: var(--ui-color-success-100);
+	--color-success-200: var(--ui-color-success-200);
+	--color-success-300: var(--ui-color-success-300);
+	--color-success-400: var(--ui-color-success-400);
+	--color-success-500: var(--ui-color-success-500);
+	--color-success-600: var(--ui-color-success-600);
+	--color-success-700: var(--ui-color-success-700);
+	--color-success-800: var(--ui-color-success-800);
+	--color-success-900: var(--ui-color-success-900);
+	--color-success-950: var(--ui-color-success-950);
+	--color-info-50: var(--ui-color-info-50);
+	--color-info-100: var(--ui-color-info-100);
+	--color-info-200: var(--ui-color-info-200);
+	--color-info-300: var(--ui-color-info-300);
+	--color-info-400: var(--ui-color-info-400);
+	--color-info-500: var(--ui-color-info-500);
+	--color-info-600: var(--ui-color-info-600);
+	--color-info-700: var(--ui-color-info-700);
+	--color-info-800: var(--ui-color-info-800);
+	--color-info-900: var(--ui-color-info-900);
+	--color-info-950: var(--ui-color-info-950);
+	--color-warning-50: var(--ui-color-warning-50);
+	--color-warning-100: var(--ui-color-warning-100);
+	--color-warning-200: var(--ui-color-warning-200);
+	--color-warning-300: var(--ui-color-warning-300);
+	--color-warning-400: var(--ui-color-warning-400);
+	--color-warning-500: var(--ui-color-warning-500);
+	--color-warning-600: var(--ui-color-warning-600);
+	--color-warning-700: var(--ui-color-warning-700);
+	--color-warning-800: var(--ui-color-warning-800);
+	--color-warning-900: var(--ui-color-warning-900);
+	--color-warning-950: var(--ui-color-warning-950);
+	--color-error-50: var(--ui-color-error-50);
+	--color-error-100: var(--ui-color-error-100);
+	--color-error-200: var(--ui-color-error-200);
+	--color-error-300: var(--ui-color-error-300);
+	--color-error-400: var(--ui-color-error-400);
+	--color-error-500: var(--ui-color-error-500);
+	--color-error-600: var(--ui-color-error-600);
+	--color-error-700: var(--ui-color-error-700);
+	--color-error-800: var(--ui-color-error-800);
+	--color-error-900: var(--ui-color-error-900);
+	--color-error-950: var(--ui-color-error-950);
+	--color-neutral-50: var(--ui-color-neutral-50);
+	--color-neutral-100: var(--ui-color-neutral-100);
+	--color-neutral-200: var(--ui-color-neutral-200);
+	--color-neutral-300: var(--ui-color-neutral-300);
+	--color-neutral-400: var(--ui-color-neutral-400);
+	--color-neutral-500: var(--ui-color-neutral-500);
+	--color-neutral-600: var(--ui-color-neutral-600);
+	--color-neutral-700: var(--ui-color-neutral-700);
+	--color-neutral-800: var(--ui-color-neutral-800);
+	--color-neutral-900: var(--ui-color-neutral-900);
+	--color-neutral-950: var(--ui-color-neutral-950);
+}

package/README.md

@@ -7,7 +7,7 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](https://tailwindcss.com/docs/v4-beta), 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.
+We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](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 [dev branch](https://github.com/nuxt/ui/tree/dev) for Nuxt UI v2.
@@ -106,7 +106,7 @@ Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/inst
 - [nuxt/icon](https://github.com/nuxt/icon)
 - [nuxt/fonts](https://github.com/nuxt/fonts)
 - [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
-- [unovue/reka-ui](https://github.com/unovue/reka-ui)
+- [unovue/radix-vue](https://github.com/unovue/radix-vue)
 - [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
 - [vueuse/vueuse](https://github.com/vueuse/vueuse)
 

package/cli/package.json

@@ -6,8 +6,8 @@
   },
   "dependencies": {
     "citty": "^0.1.6",
-    "consola": "^3.3.3",
-    "pathe": "^2.0.1",
+    "consola": "^3.4.0",
+    "pathe": "^2.0.3",
     "scule": "^1.3.0"
   }
 }

package/cli/templates.mjs

@@ -33,11 +33,11 @@ const component = ({ name, primitive, pro, prose, content }) => {
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from ${pro ? '#ui/utils/tv' : '../utils/tv'}
+import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'
 
-const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
 
 export interface ${upperName}Props {
   /**
@@ -76,11 +76,11 @@ import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from ${pro ? '#ui/utils/tv' : '../utils/tv'}
+import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'
 
-const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
 
 type ${upperName}Variants = VariantProps<typeof ${camelName}>
 
@@ -181,7 +181,7 @@ links:${primitive
   : `
   - label: ${upperName}
     icon: i-custom-reka-ui
-    to: https://www.reka-ui.com/components/${kebabName}.html`}
+    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