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

package/.nuxt/ui/alert.ts

@@ -24,7 +24,7 @@ export default {
     "icon": "shrink-0 size-5",
     "avatar": "shrink-0",
     "avatarSize": "2xl",
-    "actions": "flex gap-1.5 shrink-0",
+    "actions": "flex flex-wrap gap-1.5 shrink-0",
     "close": "p-0.5"
   },
   "variants": {

package/.nuxt/ui/avatar.ts

@@ -13,7 +13,7 @@ const size = [
 export default {
   "slots": {
     "root": "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]",
-    "image": "h-full w-full rounded-[inherit] object-cover",
+    "image": "h-full w-full rounded-[inherit] object-cover data-[error]:hidden",
     "fallback": "font-medium leading-none text-[var(--ui-text-muted)] truncate",
     "icon": "text-[var(--ui-text-muted)] shrink-0"
   },

package/.nuxt/ui/button.ts

@@ -99,7 +99,6 @@ export default {
     "block": {
       "true": {
         "base": "w-full justify-center",
-        "leadingAvatarSize": "xs",
         "trailingIcon": "ms-auto"
       }
     },

package/.nuxt/ui/context-menu.ts

@@ -18,7 +18,7 @@ const size = [
 
 export default {
   "slots": {
-    "content": "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+    "content": "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
     "group": "p-1 isolate",
     "label": "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
     "separator": "-mx-1 my-1 h-px bg-[var(--ui-border)]",

package/.nuxt/ui/dropdown-menu.ts

@@ -18,7 +18,7 @@ const size = [
 
 export default {
   "slots": {
-    "content": "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+    "content": "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
     "arrow": "fill-[var(--ui-border)]",
     "group": "p-1 isolate",
     "label": "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",

package/.nuxt/ui/navigation-menu.ts

@@ -28,10 +28,16 @@ const orientation = [
   "vertical"
 ] as const
 
+const contentOrientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "slots": {
     "root": "relative flex gap-1.5 [&>div]:min-w-0",
     "list": "isolate min-w-0",
+    "label": "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5",
     "item": "min-w-0",
     "link": "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
     "linkLeadingIcon": "shrink-0 size-5",
@@ -52,9 +58,9 @@ export default {
     "childLinkLabelExternalIcon": "inline-block size-3 align-top text-[var(--ui-text-dimmed)]",
     "childLinkDescription": "text-sm text-[var(--ui-text-muted)]",
     "separator": "px-2 h-px bg-[var(--ui-border)]",
-    "viewportWrapper": "absolute top-full left-0 flex w-full justify-center",
-    "viewport": "relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height] origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    "content": "absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
+    "viewportWrapper": "absolute top-full left-0 flex w-full",
+    "viewport": "relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    "content": "absolute top-0 left-0 w-full",
     "indicator": "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-[var(--reka-navigation-menu-indicator-size)] translate-x-[var(--reka-navigation-menu-indicator-position)] flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
     "arrow": "relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]"
   },
@@ -108,13 +114,22 @@ export default {
         "list": "flex items-center",
         "item": "py-2",
         "link": "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
-        "childList": "grid grid-cols-2 gap-2 p-2"
+        "childList": "grid p-2"
       },
       "vertical": {
         "root": "flex-col",
-        "link": "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0",
-        "childList": "ms-5 border-s border-[var(--ui-border)]",
-        "childItem": "ps-1.5 -ms-px"
+        "link": "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
+      }
+    },
+    "contentOrientation": {
+      "horizontal": {
+        "viewport": "",
+        "viewportWrapper": "justify-center",
+        "content": "data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
+      },
+      "vertical": {
+        "viewport": "sm:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]",
+        "content": ""
       }
     },
     "active": {
@@ -145,9 +160,27 @@ export default {
     },
     "level": {
       "true": ""
+    },
+    "collapsed": {
+      "true": ""
     }
   },
   "compoundVariants": [
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "contentOrientation": "horizontal" as typeof contentOrientation[number],
+      "class": {
+        "childList": "grid-cols-2 gap-2"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "contentOrientation": "vertical" as typeof contentOrientation[number],
+      "class": {
+        "childList": "gap-1",
+        "content": "w-60"
+      }
+    },
     {
       "orientation": "horizontal" as typeof orientation[number],
       "highlight": true,
@@ -176,15 +209,25 @@ export default {
       "variant": "pill" as typeof variant[number],
       "class": {
         "link": [
-          "hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)]",
+          "hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50",
           "transition-colors before:transition-colors"
         ],
         "linkLeadingIcon": [
-          "group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]",
+          "group-hover:text-[var(--ui-text)]",
           "transition-colors"
         ]
       }
     },
+    {
+      "disabled": false,
+      "active": false,
+      "variant": "pill" as typeof variant[number],
+      "orientation": "horizontal" as typeof orientation[number],
+      "class": {
+        "link": "data-[state=open]:text-[var(--ui-text-highlighted)]",
+        "linkLeadingIcon": "group-data-[state=open]:text-[var(--ui-text)]"
+      }
+    },
     {
       "disabled": false,
       "variant": "pill" as typeof variant[number],
@@ -292,15 +335,25 @@ export default {
       "variant": "link" as typeof variant[number],
       "class": {
         "link": [
-          "hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)]",
+          "hover:text-[var(--ui-text-highlighted)]",
           "transition-colors"
         ],
         "linkLeadingIcon": [
-          "group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]",
+          "group-hover:text-[var(--ui-text)]",
           "transition-colors"
         ]
       }
     },
+    {
+      "disabled": false,
+      "active": false,
+      "variant": "link" as typeof variant[number],
+      "orientation": "horizontal" as typeof orientation[number],
+      "class": {
+        "link": "data-[state=open]:text-[var(--ui-text-highlighted)]",
+        "linkLeadingIcon": "group-data-[state=open]:text-[var(--ui-text)]"
+      }
+    },
     {
       "color": "primary" as typeof color[number],
       "variant": "link" as typeof variant[number],
@@ -426,6 +479,21 @@ export default {
       "class": {
         "link": "after:bg-[var(--ui-bg-inverted)]"
       }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "collapsed": false,
+      "class": {
+        "childList": "ms-5 border-s border-[var(--ui-border)]",
+        "childItem": "ps-1.5 -ms-px"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "collapsed": true,
+      "class": {
+        "link": "px-1.5"
+      }
     }
   ],
   "defaultVariants": {

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.2",
     "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}>