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

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

@@ -0,0 +1,235 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+const variant = [
+  "outline",
+  "soft",
+  "subtle",
+  "ghost",
+  "none"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative inline-flex items-center",
+    "base": [
+      "w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "transition-colors"
+    ],
+    "increment": "absolute flex items-center",
+    "decrement": "absolute flex items-center"
+  },
+  "variants": {
+    "color": {
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    },
+    "size": {
+      "xs": "px-2 py-1 text-xs gap-1",
+      "sm": "px-2.5 py-1.5 text-xs gap-1.5",
+      "md": "px-2.5 py-1.5 text-sm gap-1.5",
+      "lg": "px-3 py-2 text-sm gap-2",
+      "xl": "px-3 py-2 text-base gap-2"
+    },
+    "variant": {
+      "outline": "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented)",
+      "soft": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50",
+      "subtle": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented)",
+      "ghost": "text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
+      "none": "text-(--ui-text-highlighted) bg-transparent"
+    },
+    "disabled": {
+      "true": {
+        "increment": "opacity-75 cursor-not-allowed",
+        "decrement": "opacity-75 cursor-not-allowed"
+      }
+    },
+    "orientation": {
+      "horizontal": {
+        "base": "text-center",
+        "increment": "inset-y-0 end-0 pe-1",
+        "decrement": "inset-y-0 start-0 ps-1"
+      },
+      "vertical": {
+        "increment": "top-0 end-0 pe-1 [&>button]:py-0 scale-80",
+        "decrement": "bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"
+      }
+    },
+    "highlight": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-primary)"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-secondary)"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-success)"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-info)"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-warning)"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-error)"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-border-inverted)"
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": "px-7"
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": "px-8"
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": "px-9"
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": "px-10"
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": "px-11"
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": "pe-7"
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": "pe-8"
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": "pe-9"
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": "pe-10"
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": "pe-11"
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number],
+    "variant": "outline" as typeof variant[number]
+  }
+}

package/.nuxt/ui/input.ts

@@ -1,16 +1,51 @@
+const buttonGroup = [
+  "horizontal",
+  "vertical"
+] as const
+
+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
+
+const type = [
+  "file"
+] as const
+
 export default {
   "slots": {
     "root": "relative inline-flex items-center",
     "base": [
-      "w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ],
-    "leading": "absolute inset-y-0 start-0 flex items-center" as const,
-    "leadingIcon": "shrink-0 text-[var(--ui-text-dimmed)]",
+    "leading": "absolute inset-y-0 start-0 flex items-center",
+    "leadingIcon": "shrink-0 text-(--ui-text-dimmed)",
     "leadingAvatar": "shrink-0",
     "leadingAvatarSize": "",
-    "trailing": "absolute inset-y-0 end-0 flex items-center" as const,
-    "trailingIcon": "shrink-0 text-[var(--ui-text-dimmed)]"
+    "trailing": "absolute inset-y-0 end-0 flex items-center",
+    "trailingIcon": "shrink-0 text-(--ui-text-dimmed)"
   },
   "variants": {
     "buttonGroup": {
@@ -26,51 +61,51 @@ export default {
     "size": {
       "xs": {
         "base": "px-2 py-1 text-xs gap-1",
-        "leading": "ps-2" as const,
-        "trailing": "pe-2" as const,
+        "leading": "ps-2",
+        "trailing": "pe-2",
         "leadingIcon": "size-4",
         "leadingAvatarSize": "3xs",
         "trailingIcon": "size-4"
       },
       "sm": {
         "base": "px-2.5 py-1.5 text-xs gap-1.5",
-        "leading": "ps-2.5" as const,
-        "trailing": "pe-2.5" as const,
+        "leading": "ps-2.5",
+        "trailing": "pe-2.5",
         "leadingIcon": "size-4",
         "leadingAvatarSize": "3xs",
         "trailingIcon": "size-4"
       },
       "md": {
         "base": "px-2.5 py-1.5 text-sm gap-1.5",
-        "leading": "ps-2.5" as const,
-        "trailing": "pe-2.5" as const,
+        "leading": "ps-2.5",
+        "trailing": "pe-2.5",
         "leadingIcon": "size-5",
         "leadingAvatarSize": "2xs",
         "trailingIcon": "size-5"
       },
       "lg": {
         "base": "px-3 py-2 text-sm gap-2",
-        "leading": "ps-3" as const,
-        "trailing": "pe-3" as const,
+        "leading": "ps-3",
+        "trailing": "pe-3",
         "leadingIcon": "size-5",
         "leadingAvatarSize": "2xs",
         "trailingIcon": "size-5"
       },
       "xl": {
         "base": "px-3 py-2 text-base gap-2",
-        "leading": "ps-3" as const,
-        "trailing": "pe-3" as const,
+        "leading": "ps-3",
+        "trailing": "pe-3",
         "leadingIcon": "size-6",
         "leadingAvatarSize": "xs",
         "trailingIcon": "size-6"
       }
     },
     "variant": {
-      "outline": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]",
-      "soft": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50",
-      "subtle": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]",
-      "ghost": "text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent",
-      "none": "text-[var(--ui-text-highlighted)]"
+      "outline": "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented)",
+      "soft": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50",
+      "subtle": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented)",
+      "ghost": "text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
+      "none": "text-(--ui-text-highlighted) bg-transparent"
     },
     "color": {
       "primary": "",
@@ -94,149 +129,149 @@ export default {
       "true": ""
     },
     "type": {
-      "file": "file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none"
+      "file": "file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none"
     }
   },
   "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)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--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)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--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)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--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)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--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)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--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)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
     },
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-primary)]"
+      "class": "ring ring-inset ring-(--ui-primary)"
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-secondary)]"
+      "class": "ring ring-inset ring-(--ui-secondary)"
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-success)]"
+      "class": "ring ring-inset ring-(--ui-success)"
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-info)]"
+      "class": "ring ring-inset ring-(--ui-info)"
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-warning)]"
+      "class": "ring ring-inset ring-(--ui-warning)"
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-error)]"
+      "class": "ring ring-inset ring-(--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)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
     },
     {
-      "color": "neutral" as const,
+      "color": "neutral" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-border-inverted)]"
+      "class": "ring ring-inset ring-(--ui-border-inverted)"
     },
     {
       "leading": true,
-      "size": "xs" as const,
+      "size": "xs" as typeof size[number],
       "class": "ps-7"
     },
     {
       "leading": true,
-      "size": "sm" as const,
+      "size": "sm" as typeof size[number],
       "class": "ps-8"
     },
     {
       "leading": true,
-      "size": "md" as const,
+      "size": "md" as typeof size[number],
       "class": "ps-9"
     },
     {
       "leading": true,
-      "size": "lg" as const,
+      "size": "lg" as typeof size[number],
       "class": "ps-10"
     },
     {
       "leading": true,
-      "size": "xl" as const,
+      "size": "xl" as typeof size[number],
       "class": "ps-11"
     },
     {
       "trailing": true,
-      "size": "xs" as const,
+      "size": "xs" as typeof size[number],
       "class": "pe-7"
     },
     {
       "trailing": true,
-      "size": "sm" as const,
+      "size": "sm" as typeof size[number],
       "class": "pe-8"
     },
     {
       "trailing": true,
-      "size": "md" as const,
+      "size": "md" as typeof size[number],
       "class": "pe-9"
     },
     {
       "trailing": true,
-      "size": "lg" as const,
+      "size": "lg" as typeof size[number],
       "class": "pe-10"
     },
     {
       "trailing": true,
-      "size": "xl" as const,
+      "size": "xl" as typeof size[number],
       "class": "pe-11"
     },
     {
@@ -256,8 +291,8 @@ export default {
     }
   ],
   "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/kbd.ts

@@ -1,10 +1,22 @@
+const variant = [
+  "solid",
+  "outline",
+  "subtle"
+] as const
+
+const size = [
+  "sm",
+  "md",
+  "lg"
+] as const
+
 export default {
-  "base": "inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans",
+  "base": "inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans",
   "variants": {
     "variant": {
-      "solid": "bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)]",
-      "outline": "bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)]",
-      "subtle": "bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)]"
+      "solid": "bg-(--ui-bg-inverted) text-(--ui-bg)",
+      "outline": "bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented)",
+      "subtle": "bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented)"
     },
     "size": {
       "sm": "h-4 min-w-[16px] text-[10px]",
@@ -13,7 +25,7 @@ export default {
     }
   },
   "defaultVariants": {
-    "variant": "outline" as const,
-    "size": "md" as const
+    "variant": "outline" as typeof variant[number],
+    "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/link.ts

@@ -1,10 +1,10 @@
 export default {
-  "base": "focus-visible:outline-[var(--ui-primary)]",
+  "base": "focus-visible:outline-(--ui-primary)",
   "variants": {
     "active": {
-      "true": "text-[var(--ui-primary)]",
+      "true": "text-(--ui-primary)",
       "false": [
-        "text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]",
+        "text-(--ui-text-muted) hover:text-(--ui-text)",
         "transition-colors"
       ]
     },

package/.nuxt/ui/modal.ts

@@ -1,12 +1,13 @@
 export default {
   "slots": {
-    "overlay": "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
-    "content": "fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none",
-    "header": "px-4 py-5 sm:px-6",
-    "body": "flex-1 p-4 sm:p-6",
+    "overlay": "fixed inset-0 bg-(--ui-bg-elevated)/75",
+    "content": "fixed bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none",
+    "header": "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
+    "wrapper": "",
+    "body": "flex-1 overflow-y-auto p-4 sm:p-6",
     "footer": "flex items-center gap-1.5 p-4 sm:px-6",
-    "title": "text-[var(--ui-text-highlighted)] font-semibold",
-    "description": "mt-1 text-[var(--ui-text-muted)] text-sm",
+    "title": "text-(--ui-text-highlighted) font-semibold",
+    "description": "mt-1 text-(--ui-text-muted) text-sm",
     "close": "absolute top-4 end-4"
   },
   "variants": {
@@ -21,7 +22,7 @@ export default {
         "content": "inset-0"
       },
       "false": {
-        "content": "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]"
+        "content": "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)"
       }
     }
   }