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

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

@@ -1,3 +1,33 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const highlightColor = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const variant = [
+  "pill",
+  "link"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "slots": {
     "root": "relative flex gap-1.5 [&>div]:min-w-0",
@@ -8,7 +38,7 @@ export default {
     "linkLeadingAvatar": "shrink-0",
     "linkLeadingAvatarSize": "2xs",
     "linkTrailing": "ms-auto inline-flex gap-1.5 items-center",
-    "linkTrailingBadge": "shrink-0 rounded-[var(--ui-radius)]",
+    "linkTrailingBadge": "shrink-0",
     "linkTrailingBadgeSize": "sm",
     "linkTrailingIcon": "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     "linkLabel": "truncate",
@@ -25,7 +55,7 @@ export default {
     "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]",
-    "indicator": "data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out",
+    "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)]"
   },
   "variants": {
@@ -74,7 +104,7 @@ export default {
     },
     "orientation": {
       "horizontal": {
-        "root": "w-full items-center justify-between",
+        "root": "items-center justify-between",
         "list": "flex items-center",
         "item": "py-2",
         "link": "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
@@ -112,29 +142,38 @@ export default {
     },
     "highlight": {
       "true": ""
+    },
+    "level": {
+      "true": ""
     }
   },
   "compoundVariants": [
     {
+      "orientation": "horizontal" as typeof orientation[number],
       "highlight": true,
-      "orientation": "horizontal" as const,
       "class": {
         "item": "-mb-px",
-        "link": "after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full"
+        "link": [
+          "after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full",
+          "after:transition-colors"
+        ]
       }
     },
     {
+      "orientation": "vertical" as typeof orientation[number],
       "highlight": true,
-      "orientation": "vertical" as const,
+      "level": true,
       "class": {
-        "item": "px-1.5 -ms-px",
-        "link": "after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full"
+        "link": [
+          "after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full",
+          "after:transition-colors"
+        ]
       }
     },
     {
       "disabled": false,
       "active": false,
-      "variant": "pill" as const,
+      "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)]",
@@ -148,88 +187,88 @@ export default {
     },
     {
       "disabled": false,
-      "variant": "pill" as const,
+      "variant": "pill" as typeof variant[number],
       "highlight": true,
-      "orientation": "horizontal" as const,
+      "orientation": "horizontal" as typeof orientation[number],
       "class": {
         "link": "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
       }
     },
     {
       "disabled": false,
-      "variant": "pill" as const,
+      "variant": "pill" as typeof variant[number],
       "highlight": false,
       "active": false,
-      "orientation": "horizontal" as const,
+      "orientation": "horizontal" as typeof orientation[number],
       "class": {
         "link": "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
       }
     },
     {
-      "color": "primary" as const,
-      "variant": "pill" as const,
+      "color": "primary" as typeof color[number],
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-primary)]",
-        "linkLeadingIcon": "text-[var(--ui-primary)]"
+        "linkLeadingIcon": "text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]"
       }
     },
     {
-      "color": "secondary" as const,
-      "variant": "pill" as const,
+      "color": "secondary" as typeof color[number],
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-secondary)]",
-        "linkLeadingIcon": "text-[var(--ui-secondary)]"
+        "linkLeadingIcon": "text-[var(--ui-secondary)] group-data-[state=open]:text-[var(--ui-secondary)]"
       }
     },
     {
-      "color": "success" as const,
-      "variant": "pill" as const,
+      "color": "success" as typeof color[number],
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-success)]",
-        "linkLeadingIcon": "text-[var(--ui-success)]"
+        "linkLeadingIcon": "text-[var(--ui-success)] group-data-[state=open]:text-[var(--ui-success)]"
       }
     },
     {
-      "color": "info" as const,
-      "variant": "pill" as const,
+      "color": "info" as typeof color[number],
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-info)]",
-        "linkLeadingIcon": "text-[var(--ui-info)]"
+        "linkLeadingIcon": "text-[var(--ui-info)] group-data-[state=open]:text-[var(--ui-info)]"
       }
     },
     {
-      "color": "warning" as const,
-      "variant": "pill" as const,
+      "color": "warning" as typeof color[number],
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-warning)]",
-        "linkLeadingIcon": "text-[var(--ui-warning)]"
+        "linkLeadingIcon": "text-[var(--ui-warning)] group-data-[state=open]:text-[var(--ui-warning)]"
       }
     },
     {
-      "color": "error" as const,
-      "variant": "pill" as const,
+      "color": "error" as typeof color[number],
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-error)]",
-        "linkLeadingIcon": "text-[var(--ui-error)]"
+        "linkLeadingIcon": "text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]"
       }
     },
     {
-      "color": "neutral" as const,
-      "variant": "pill" as const,
+      "color": "neutral" as typeof color[number],
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-text-highlighted)]",
-        "linkLeadingIcon": "text-[var(--ui-text-highlighted)]"
+        "linkLeadingIcon": "text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]"
       }
     },
     {
-      "variant": "pill" as const,
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "highlight": false,
       "class": {
@@ -237,7 +276,7 @@ export default {
       }
     },
     {
-      "variant": "pill" as const,
+      "variant": "pill" as typeof variant[number],
       "active": true,
       "highlight": true,
       "class": {
@@ -250,7 +289,7 @@ export default {
     {
       "disabled": false,
       "active": false,
-      "variant": "link" as const,
+      "variant": "link" as typeof variant[number],
       "class": {
         "link": [
           "hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)]",
@@ -263,119 +302,126 @@ export default {
       }
     },
     {
-      "color": "primary" as const,
-      "variant": "link" as const,
+      "color": "primary" as typeof color[number],
+      "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-primary)]",
-        "linkLeadingIcon": "text-[var(--ui-primary)]"
+        "linkLeadingIcon": "text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]"
       }
     },
     {
-      "color": "secondary" as const,
-      "variant": "link" as const,
+      "color": "secondary" as typeof color[number],
+      "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-secondary)]",
-        "linkLeadingIcon": "text-[var(--ui-secondary)]"
+        "linkLeadingIcon": "text-[var(--ui-secondary)] group-data-[state=open]:text-[var(--ui-secondary)]"
       }
     },
     {
-      "color": "success" as const,
-      "variant": "link" as const,
+      "color": "success" as typeof color[number],
+      "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-success)]",
-        "linkLeadingIcon": "text-[var(--ui-success)]"
+        "linkLeadingIcon": "text-[var(--ui-success)] group-data-[state=open]:text-[var(--ui-success)]"
       }
     },
     {
-      "color": "info" as const,
-      "variant": "link" as const,
+      "color": "info" as typeof color[number],
+      "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-info)]",
-        "linkLeadingIcon": "text-[var(--ui-info)]"
+        "linkLeadingIcon": "text-[var(--ui-info)] group-data-[state=open]:text-[var(--ui-info)]"
       }
     },
     {
-      "color": "warning" as const,
-      "variant": "link" as const,
+      "color": "warning" as typeof color[number],
+      "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-warning)]",
-        "linkLeadingIcon": "text-[var(--ui-warning)]"
+        "linkLeadingIcon": "text-[var(--ui-warning)] group-data-[state=open]:text-[var(--ui-warning)]"
       }
     },
     {
-      "color": "error" as const,
-      "variant": "link" as const,
+      "color": "error" as typeof color[number],
+      "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-error)]",
-        "linkLeadingIcon": "text-[var(--ui-error)]"
+        "linkLeadingIcon": "text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]"
       }
     },
     {
-      "color": "neutral" as const,
-      "variant": "link" as const,
+      "color": "neutral" as typeof color[number],
+      "variant": "link" as typeof variant[number],
       "active": true,
       "class": {
         "link": "text-[var(--ui-text-highlighted)]",
-        "linkLeadingIcon": "text-[var(--ui-text-highlighted)]"
+        "linkLeadingIcon": "text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]"
       }
     },
     {
-      "highlightColor": "primary" as const,
+      "highlightColor": "primary" as typeof highlightColor[number],
       "highlight": true,
+      "level": true,
       "active": true,
       "class": {
         "link": "after:bg-[var(--ui-primary)]"
       }
     },
     {
-      "highlightColor": "secondary" as const,
+      "highlightColor": "secondary" as typeof highlightColor[number],
       "highlight": true,
+      "level": true,
       "active": true,
       "class": {
         "link": "after:bg-[var(--ui-secondary)]"
       }
     },
     {
-      "highlightColor": "success" as const,
+      "highlightColor": "success" as typeof highlightColor[number],
       "highlight": true,
+      "level": true,
       "active": true,
       "class": {
         "link": "after:bg-[var(--ui-success)]"
       }
     },
     {
-      "highlightColor": "info" as const,
+      "highlightColor": "info" as typeof highlightColor[number],
       "highlight": true,
+      "level": true,
       "active": true,
       "class": {
         "link": "after:bg-[var(--ui-info)]"
       }
     },
     {
-      "highlightColor": "warning" as const,
+      "highlightColor": "warning" as typeof highlightColor[number],
       "highlight": true,
+      "level": true,
       "active": true,
       "class": {
         "link": "after:bg-[var(--ui-warning)]"
       }
     },
     {
-      "highlightColor": "error" as const,
+      "highlightColor": "error" as typeof highlightColor[number],
       "highlight": true,
+      "level": true,
       "active": true,
       "class": {
         "link": "after:bg-[var(--ui-error)]"
       }
     },
     {
-      "highlightColor": "neutral" as const,
+      "highlightColor": "neutral" as typeof highlightColor[number],
       "highlight": true,
+      "level": true,
       "active": true,
       "class": {
         "link": "after:bg-[var(--ui-bg-inverted)]"
@@ -383,8 +429,8 @@ export default {
     }
   ],
   "defaultVariants": {
-    "color": "primary" as const,
-    "highlightColor": "primary" as const,
-    "variant": "pill" as const
+    "color": "primary" as typeof color[number],
+    "highlightColor": "primary" as typeof highlightColor[number],
+    "variant": "pill" as typeof variant[number]
   }
 }

package/.nuxt/ui/pin-input.ts

@@ -1,3 +1,29 @@
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+const variant = [
+  "outline",
+  "soft",
+  "subtle",
+  "ghost",
+  "none"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
 export default {
   "slots": {
     "root": "relative inline-flex items-center gap-1.5",
@@ -46,100 +72,100 @@ export default {
   },
   "compoundVariants": [
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
       "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]"
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
       "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-secondary)]"
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
       "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-success)]"
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
       "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-info)]"
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
       "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-warning)]"
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
       "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)]"
     },
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "highlight": true,
       "class": "ring ring-inset ring-[var(--ui-primary)]"
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "highlight": true,
       "class": "ring ring-inset ring-[var(--ui-secondary)]"
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "highlight": true,
       "class": "ring ring-inset ring-[var(--ui-success)]"
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "highlight": true,
       "class": "ring ring-inset ring-[var(--ui-info)]"
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "highlight": true,
       "class": "ring ring-inset ring-[var(--ui-warning)]"
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "highlight": true,
       "class": "ring ring-inset ring-[var(--ui-error)]"
     },
     {
-      "color": "neutral" as const,
+      "color": "neutral" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
       "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
     },
     {
-      "color": "neutral" as const,
+      "color": "neutral" as typeof color[number],
       "highlight": true,
       "class": "ring ring-inset ring-[var(--ui-border-inverted)]"
     }
   ],
   "defaultVariants": {
-    "size": "md" as const,
-    "color": "primary" as const,
-    "variant": "outline" as const
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number],
+    "variant": "outline" as typeof variant[number]
   }
 }

package/.nuxt/ui/popover.ts

@@ -1,6 +1,6 @@
 export default {
   "slots": {
-    "content": "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none",
+    "content": "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto",
     "arrow": "fill-[var(--ui-border)]"
   }
 }