@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.1

package/.nuxt/ui/accordion.ts

@@ -1,9 +1,9 @@
 export default {
   "slots": {
     "root": "w-full",
-    "item": "border-b border-[var(--ui-border)] last:border-b-0",
+    "item": "border-b border-(--ui-border) last:border-b-0",
     "header": "flex",
-    "trigger": "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0",
+    "trigger": "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0",
     "content": "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
     "body": "text-sm pb-3.5",
     "leadingIcon": "shrink-0 size-5",

package/.nuxt/ui/alert.ts

@@ -1,14 +1,36 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "slots": {
     "root": "relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5",
-    "wrapper": "min-w-0 flex-1 flex flex-col gap-1",
+    "wrapper": "min-w-0 flex-1 flex flex-col",
     "title": "text-sm font-medium",
     "description": "text-sm opacity-90",
     "icon": "shrink-0 size-5",
     "avatar": "shrink-0",
     "avatarSize": "2xl",
-    "actions": "flex gap-1.5 shrink-0",
-    "close": "p-0.5"
+    "actions": "flex flex-wrap gap-1.5 shrink-0",
+    "close": "p-0"
   },
   "variants": {
     "color": {
@@ -26,217 +48,222 @@ export default {
       "soft": "",
       "subtle": ""
     },
-    "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"
       }
     }
   },
   "compoundVariants": [
     {
-      "color": "primary" as const,
-      "variant": "solid" as const,
+      "color": "primary" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-primary)] text-[var(--ui-bg)]"
+        "root": "bg-(--ui-primary) text-(--ui-bg)"
       }
     },
     {
-      "color": "secondary" as const,
-      "variant": "solid" as const,
+      "color": "secondary" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-secondary)] text-[var(--ui-bg)]"
+        "root": "bg-(--ui-secondary) text-(--ui-bg)"
       }
     },
     {
-      "color": "success" as const,
-      "variant": "solid" as const,
+      "color": "success" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-success)] text-[var(--ui-bg)]"
+        "root": "bg-(--ui-success) text-(--ui-bg)"
       }
     },
     {
-      "color": "info" as const,
-      "variant": "solid" as const,
+      "color": "info" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-info)] text-[var(--ui-bg)]"
+        "root": "bg-(--ui-info) text-(--ui-bg)"
       }
     },
     {
-      "color": "warning" as const,
-      "variant": "solid" as const,
+      "color": "warning" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-warning)] text-[var(--ui-bg)]"
+        "root": "bg-(--ui-warning) text-(--ui-bg)"
       }
     },
     {
-      "color": "error" as const,
-      "variant": "solid" as const,
+      "color": "error" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-error)] text-[var(--ui-bg)]"
+        "root": "bg-(--ui-error) text-(--ui-bg)"
       }
     },
     {
-      "color": "primary" as const,
-      "variant": "outline" as const,
+      "color": "primary" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25"
+        "root": "text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25"
       }
     },
     {
-      "color": "secondary" as const,
-      "variant": "outline" as const,
+      "color": "secondary" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-secondary)] ring ring-inset ring-[var(--ui-secondary)]/25"
+        "root": "text-(--ui-secondary) ring ring-inset ring-(--ui-secondary)/25"
       }
     },
     {
-      "color": "success" as const,
-      "variant": "outline" as const,
+      "color": "success" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-success)] ring ring-inset ring-[var(--ui-success)]/25"
+        "root": "text-(--ui-success) ring ring-inset ring-(--ui-success)/25"
       }
     },
     {
-      "color": "info" as const,
-      "variant": "outline" as const,
+      "color": "info" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-info)] ring ring-inset ring-[var(--ui-info)]/25"
+        "root": "text-(--ui-info) ring ring-inset ring-(--ui-info)/25"
       }
     },
     {
-      "color": "warning" as const,
-      "variant": "outline" as const,
+      "color": "warning" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-warning)] ring ring-inset ring-[var(--ui-warning)]/25"
+        "root": "text-(--ui-warning) ring ring-inset ring-(--ui-warning)/25"
       }
     },
     {
-      "color": "error" as const,
-      "variant": "outline" as const,
+      "color": "error" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/25"
+        "root": "text-(--ui-error) ring ring-inset ring-(--ui-error)/25"
       }
     },
     {
-      "color": "primary" as const,
-      "variant": "soft" as const,
+      "color": "primary" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]"
+        "root": "bg-(--ui-primary)/10 text-(--ui-primary)"
       }
     },
     {
-      "color": "secondary" as const,
-      "variant": "soft" as const,
+      "color": "secondary" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-secondary)]/10 text-[var(--ui-secondary)]"
+        "root": "bg-(--ui-secondary)/10 text-(--ui-secondary)"
       }
     },
     {
-      "color": "success" as const,
-      "variant": "soft" as const,
+      "color": "success" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-success)]/10 text-[var(--ui-success)]"
+        "root": "bg-(--ui-success)/10 text-(--ui-success)"
       }
     },
     {
-      "color": "info" as const,
-      "variant": "soft" as const,
+      "color": "info" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-info)]/10 text-[var(--ui-info)]"
+        "root": "bg-(--ui-info)/10 text-(--ui-info)"
       }
     },
     {
-      "color": "warning" as const,
-      "variant": "soft" as const,
+      "color": "warning" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-warning)]/10 text-[var(--ui-warning)]"
+        "root": "bg-(--ui-warning)/10 text-(--ui-warning)"
       }
     },
     {
-      "color": "error" as const,
-      "variant": "soft" as const,
+      "color": "error" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-error)]/10 text-[var(--ui-error)]"
+        "root": "bg-(--ui-error)/10 text-(--ui-error)"
       }
     },
     {
-      "color": "primary" as const,
-      "variant": "subtle" as const,
+      "color": "primary" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25"
+        "root": "bg-(--ui-primary)/10 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25"
       }
     },
     {
-      "color": "secondary" as const,
-      "variant": "subtle" as const,
+      "color": "secondary" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-secondary)]/10 text-[var(--ui-secondary)] ring ring-inset ring-[var(--ui-secondary)]/25"
+        "root": "bg-(--ui-secondary)/10 text-(--ui-secondary) ring ring-inset ring-(--ui-secondary)/25"
       }
     },
     {
-      "color": "success" as const,
-      "variant": "subtle" as const,
+      "color": "success" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-success)]/10 text-[var(--ui-success)] ring ring-inset ring-[var(--ui-success)]/25"
+        "root": "bg-(--ui-success)/10 text-(--ui-success) ring ring-inset ring-(--ui-success)/25"
       }
     },
     {
-      "color": "info" as const,
-      "variant": "subtle" as const,
+      "color": "info" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-info)]/10 text-[var(--ui-info)] ring ring-inset ring-[var(--ui-info)]/25"
+        "root": "bg-(--ui-info)/10 text-(--ui-info) ring ring-inset ring-(--ui-info)/25"
       }
     },
     {
-      "color": "warning" as const,
-      "variant": "subtle" as const,
+      "color": "warning" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-warning)]/10 text-[var(--ui-warning)] ring ring-inset ring-[var(--ui-warning)]/25"
+        "root": "bg-(--ui-warning)/10 text-(--ui-warning) ring ring-inset ring-(--ui-warning)/25"
       }
     },
     {
-      "color": "error" as const,
-      "variant": "subtle" as const,
+      "color": "error" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
       "class": {
-        "root": "bg-[var(--ui-error)]/10 text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/25"
+        "root": "bg-(--ui-error)/10 text-(--ui-error) ring ring-inset ring-(--ui-error)/25"
       }
     },
     {
-      "color": "neutral" as const,
-      "variant": "solid" as const,
+      "color": "neutral" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
+        "root": "text-(--ui-bg) bg-(--ui-bg-inverted)"
       }
     },
     {
-      "color": "neutral" as const,
-      "variant": "outline" as const,
+      "color": "neutral" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]"
+        "root": "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border)"
       }
     },
     {
-      "color": "neutral" as const,
-      "variant": "soft" as const,
+      "color": "neutral" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50"
+        "root": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50"
       }
     },
     {
-      "color": "neutral" as const,
-      "variant": "subtle" as const,
+      "color": "neutral" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
       "class": {
-        "root": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]"
+        "root": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented)"
       }
     }
   ],
   "defaultVariants": {
-    "color": "primary" as const,
-    "variant": "solid" as const
+    "color": "primary" as typeof color[number],
+    "variant": "solid" as typeof variant[number]
   }
 }

package/.nuxt/ui/avatar-group.ts

@@ -1,7 +1,19 @@
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
 export default {
   "slots": {
     "root": "inline-flex flex-row-reverse justify-end",
-    "base": "relative rounded-full ring-[var(--ui-bg)] first:me-0"
+    "base": "relative rounded-full ring-(--ui-bg) first:me-0"
   },
   "variants": {
     "size": {
@@ -35,6 +47,6 @@ export default {
     }
   },
   "defaultVariants": {
-    "size": "md" as const
+    "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/avatar.ts

@@ -1,9 +1,21 @@
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
 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)]",
+    "root": "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)",
     "image": "h-full w-full rounded-[inherit] object-cover",
-    "fallback": "font-medium leading-none text-[var(--ui-text-muted)] truncate",
-    "icon": "text-[var(--ui-text-muted)] shrink-0"
+    "fallback": "font-medium leading-none text-(--ui-text-muted) truncate",
+    "icon": "text-(--ui-text-muted) shrink-0"
   },
   "variants": {
     "size": {
@@ -37,6 +49,6 @@ export default {
     }
   },
   "defaultVariants": {
-    "size": "md" as const
+    "size": "md" as typeof size[number]
   }
 }