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

package/.nuxt/ui/badge.ts

@@ -1,6 +1,36 @@
+const buttonGroup = [
+  "horizontal",
+  "vertical"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
 export default {
   "slots": {
-    "base": "rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center",
+    "base": "font-medium inline-flex items-center",
     "label": "truncate",
     "leadingIcon": "shrink-0",
     "leadingAvatar": "shrink-0",
@@ -8,6 +38,10 @@ export default {
     "trailingIcon": "shrink-0"
   },
   "variants": {
+    "buttonGroup": {
+      "horizontal": "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
+      "vertical": "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
+    },
     "color": {
       "primary": "",
       "secondary": "",
@@ -24,171 +58,183 @@ export default {
       "subtle": ""
     },
     "size": {
+      "xs": {
+        "base": "text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]",
+        "leadingIcon": "size-3",
+        "leadingAvatarSize": "3xs",
+        "trailingIcon": "size-3"
+      },
       "sm": {
-        "base": "text-xs px-1.5 py-0.5 gap-1",
-        "leadingIcon": "size-4",
+        "base": "text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))]",
+        "leadingIcon": "size-3",
         "leadingAvatarSize": "3xs",
-        "trailingIcon": "size-4"
+        "trailingIcon": "size-3"
       },
       "md": {
-        "base": "text-xs px-2 py-1 gap-1",
+        "base": "text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)]",
         "leadingIcon": "size-4",
         "leadingAvatarSize": "3xs",
         "trailingIcon": "size-4"
       },
       "lg": {
-        "base": "text-sm px-2 py-1 gap-1.5",
+        "base": "text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
         "leadingIcon": "size-5",
         "leadingAvatarSize": "2xs",
         "trailingIcon": "size-5"
+      },
+      "xl": {
+        "base": "text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
+        "leadingIcon": "size-6",
+        "leadingAvatarSize": "2xs",
+        "trailingIcon": "size-6"
       }
     }
   },
   "compoundVariants": [
     {
-      "color": "primary" as const,
-      "variant": "solid" as const,
-      "class": "bg-[var(--ui-primary)] text-[var(--ui-bg)]"
+      "color": "primary" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "bg-(--ui-primary) text-(--ui-bg)"
     },
     {
-      "color": "secondary" as const,
-      "variant": "solid" as const,
-      "class": "bg-[var(--ui-secondary)] text-[var(--ui-bg)]"
+      "color": "secondary" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "bg-(--ui-secondary) text-(--ui-bg)"
     },
     {
-      "color": "success" as const,
-      "variant": "solid" as const,
-      "class": "bg-[var(--ui-success)] text-[var(--ui-bg)]"
+      "color": "success" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "bg-(--ui-success) text-(--ui-bg)"
     },
     {
-      "color": "info" as const,
-      "variant": "solid" as const,
-      "class": "bg-[var(--ui-info)] text-[var(--ui-bg)]"
+      "color": "info" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "bg-(--ui-info) text-(--ui-bg)"
     },
     {
-      "color": "warning" as const,
-      "variant": "solid" as const,
-      "class": "bg-[var(--ui-warning)] text-[var(--ui-bg)]"
+      "color": "warning" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "bg-(--ui-warning) text-(--ui-bg)"
     },
     {
-      "color": "error" as const,
-      "variant": "solid" as const,
-      "class": "bg-[var(--ui-error)] text-[var(--ui-bg)]"
+      "color": "error" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "bg-(--ui-error) text-(--ui-bg)"
     },
     {
-      "color": "primary" as const,
-      "variant": "outline" as const,
-      "class": "text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50"
+      "color": "primary" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "text-(--ui-primary) ring ring-inset ring-(--ui-primary)/50"
     },
     {
-      "color": "secondary" as const,
-      "variant": "outline" as const,
-      "class": "text-[var(--ui-secondary)] ring ring-inset ring-[var(--ui-secondary)]/50"
+      "color": "secondary" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "text-(--ui-secondary) ring ring-inset ring-(--ui-secondary)/50"
     },
     {
-      "color": "success" as const,
-      "variant": "outline" as const,
-      "class": "text-[var(--ui-success)] ring ring-inset ring-[var(--ui-success)]/50"
+      "color": "success" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "text-(--ui-success) ring ring-inset ring-(--ui-success)/50"
     },
     {
-      "color": "info" as const,
-      "variant": "outline" as const,
-      "class": "text-[var(--ui-info)] ring ring-inset ring-[var(--ui-info)]/50"
+      "color": "info" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "text-(--ui-info) ring ring-inset ring-(--ui-info)/50"
     },
     {
-      "color": "warning" as const,
-      "variant": "outline" as const,
-      "class": "text-[var(--ui-warning)] ring ring-inset ring-[var(--ui-warning)]/50"
+      "color": "warning" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "text-(--ui-warning) ring ring-inset ring-(--ui-warning)/50"
     },
     {
-      "color": "error" as const,
-      "variant": "outline" as const,
-      "class": "text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/50"
+      "color": "error" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "text-(--ui-error) ring ring-inset ring-(--ui-error)/50"
     },
     {
-      "color": "primary" as const,
-      "variant": "soft" as const,
-      "class": "bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]"
+      "color": "primary" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "bg-(--ui-primary)/10 text-(--ui-primary)"
     },
     {
-      "color": "secondary" as const,
-      "variant": "soft" as const,
-      "class": "bg-[var(--ui-secondary)]/10 text-[var(--ui-secondary)]"
+      "color": "secondary" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "bg-(--ui-secondary)/10 text-(--ui-secondary)"
     },
     {
-      "color": "success" as const,
-      "variant": "soft" as const,
-      "class": "bg-[var(--ui-success)]/10 text-[var(--ui-success)]"
+      "color": "success" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "bg-(--ui-success)/10 text-(--ui-success)"
     },
     {
-      "color": "info" as const,
-      "variant": "soft" as const,
-      "class": "bg-[var(--ui-info)]/10 text-[var(--ui-info)]"
+      "color": "info" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "bg-(--ui-info)/10 text-(--ui-info)"
     },
     {
-      "color": "warning" as const,
-      "variant": "soft" as const,
-      "class": "bg-[var(--ui-warning)]/10 text-[var(--ui-warning)]"
+      "color": "warning" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "bg-(--ui-warning)/10 text-(--ui-warning)"
     },
     {
-      "color": "error" as const,
-      "variant": "soft" as const,
-      "class": "bg-[var(--ui-error)]/10 text-[var(--ui-error)]"
+      "color": "error" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "bg-(--ui-error)/10 text-(--ui-error)"
     },
     {
-      "color": "primary" as const,
-      "variant": "subtle" as const,
-      "class": "bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25"
+      "color": "primary" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "bg-(--ui-primary)/10 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25"
     },
     {
-      "color": "secondary" as const,
-      "variant": "subtle" as const,
-      "class": "bg-[var(--ui-secondary)]/10 text-[var(--ui-secondary)] ring ring-inset ring-[var(--ui-secondary)]/25"
+      "color": "secondary" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "bg-(--ui-secondary)/10 text-(--ui-secondary) ring ring-inset ring-(--ui-secondary)/25"
     },
     {
-      "color": "success" as const,
-      "variant": "subtle" as const,
-      "class": "bg-[var(--ui-success)]/10 text-[var(--ui-success)] ring ring-inset ring-[var(--ui-success)]/25"
+      "color": "success" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "bg-(--ui-success)/10 text-(--ui-success) ring ring-inset ring-(--ui-success)/25"
     },
     {
-      "color": "info" as const,
-      "variant": "subtle" as const,
-      "class": "bg-[var(--ui-info)]/10 text-[var(--ui-info)] ring ring-inset ring-[var(--ui-info)]/25"
+      "color": "info" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "bg-(--ui-info)/10 text-(--ui-info) ring ring-inset ring-(--ui-info)/25"
     },
     {
-      "color": "warning" as const,
-      "variant": "subtle" as const,
-      "class": "bg-[var(--ui-warning)]/10 text-[var(--ui-warning)] ring ring-inset ring-[var(--ui-warning)]/25"
+      "color": "warning" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "bg-(--ui-warning)/10 text-(--ui-warning) ring ring-inset ring-(--ui-warning)/25"
     },
     {
-      "color": "error" as const,
-      "variant": "subtle" as const,
-      "class": "bg-[var(--ui-error)]/10 text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/25"
+      "color": "error" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "bg-(--ui-error)/10 text-(--ui-error) ring ring-inset ring-(--ui-error)/25"
     },
     {
-      "color": "neutral" as const,
-      "variant": "solid" as const,
-      "class": "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
+      "color": "neutral" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-(--ui-bg) bg-(--ui-bg-inverted)"
     },
     {
-      "color": "neutral" as const,
-      "variant": "outline" as const,
-      "class": "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"
+      "color": "neutral" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg)"
     },
     {
-      "color": "neutral" as const,
-      "variant": "soft" as const,
-      "class": "text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
+      "color": "neutral" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-(--ui-text) bg-(--ui-bg-elevated)"
     },
     {
-      "color": "neutral" as const,
-      "variant": "subtle" as const,
-      "class": "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
+      "color": "neutral" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated)"
     }
   ],
   "defaultVariants": {
-    "color": "primary" as const,
-    "variant": "solid" as const,
-    "size": "md" as const
+    "color": "primary" as typeof color[number],
+    "variant": "solid" as typeof variant[number],
+    "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/breadcrumb.ts

@@ -3,21 +3,21 @@ export default {
     "root": "relative min-w-0",
     "list": "flex items-center gap-1.5",
     "item": "flex min-w-0",
-    "link": "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)]",
+    "link": "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary)",
     "linkLeadingIcon": "shrink-0 size-5",
     "linkLeadingAvatar": "shrink-0",
     "linkLeadingAvatarSize": "2xs",
     "linkLabel": "truncate",
     "separator": "flex",
-    "separatorIcon": "shrink-0 size-5 text-[var(--ui-text-muted)]"
+    "separatorIcon": "shrink-0 size-5 text-(--ui-text-muted)"
   },
   "variants": {
     "active": {
       "true": {
-        "link": "text-[var(--ui-primary)] font-semibold"
+        "link": "text-(--ui-primary) font-semibold"
       },
       "false": {
-        "link": "text-[var(--ui-text-muted)] font-medium"
+        "link": "text-(--ui-text-muted) font-medium"
       }
     },
     "disabled": {
@@ -36,7 +36,7 @@ export default {
       "to": true,
       "class": {
         "link": [
-          "hover:text-[var(--ui-text)]",
+          "hover:text-(--ui-text)",
           "transition-colors"
         ]
       }

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

@@ -1,3 +1,16 @@
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "base": "relative",
   "variants": {