@nuxt/ui 3.1.0 → 3.1.2

package/.nuxt/ui/slideover.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/slideover"
-
 const side = [
   "top",
   "right",
@@ -7,24 +5,7 @@ const side = [
   "left"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "overlay": "fixed inset-0 bg-elevated/75",
     "content": "fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none",
@@ -87,6 +68,4 @@ const theme = {
       }
     }
   ]
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/slider.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/slider"
-
 const color = [
   "primary",
   "secondary",
@@ -23,24 +21,7 @@ const orientation = [
   "vertical"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "relative flex items-center select-none touch-none",
     "track": "relative bg-accented overflow-hidden rounded-full grow",
@@ -187,6 +168,4 @@ const theme = {
     "size": "md" as typeof size[number],
     "color": "primary" as typeof color[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/stepper.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/stepper"
-
 const orientation = [
   "horizontal",
   "vertical"
@@ -23,24 +21,7 @@ const color = [
   "neutral"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "flex gap-4",
     "header": "flex",
@@ -218,6 +199,4 @@ const theme = {
     "size": "md" as typeof size[number],
     "color": "primary" as typeof color[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/switch.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/switch"
-
 const color = [
   "primary",
   "secondary",
@@ -18,24 +16,7 @@ const size = [
   "xl"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "relative flex items-start",
     "base": [
@@ -147,6 +128,4 @@ const theme = {
     "color": "primary" as typeof color[number],
     "size": "md" as typeof size[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/table.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/table"
-
 const loadingAnimation = [
   "carousel",
   "carousel-inverse",
@@ -17,24 +15,7 @@ const loadingColor = [
   "neutral"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "relative overflow-auto",
     "base": "min-w-full overflow-clip",
@@ -163,6 +144,4 @@ const theme = {
     "loadingColor": "primary" as typeof loadingColor[number],
     "loadingAnimation": "carousel" as typeof loadingAnimation[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/tabs.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/tabs"
-
 const color = [
   "primary",
   "secondary",
@@ -28,30 +26,13 @@ const size = [
   "xl"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "flex items-center gap-2",
     "list": "relative flex p-1 group",
     "indicator": "absolute transition-[translate,width] duration-200",
     "trigger": [
-      "group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75",
+      "group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ],
     "content": "focus:outline-none w-full",
@@ -73,12 +54,13 @@ const theme = {
     "variant": {
       "pill": {
         "list": "bg-elevated rounded-lg",
-        "trigger": "flex-1 w-full",
+        "trigger": "grow",
         "indicator": "rounded-md shadow-xs"
       },
       "link": {
         "list": "border-default",
-        "indicator": "rounded-full"
+        "indicator": "rounded-full",
+        "trigger": "focus:outline-none"
       }
     },
     "orientation": {
@@ -271,6 +253,4 @@ const theme = {
     "variant": "pill" as typeof variant[number],
     "size": "md" as typeof size[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/textarea.ts

@@ -1,10 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/textarea"
-
-const buttonGroup = [
-  "horizontal",
-  "vertical"
-] as const
-
 const size = [
   "xs",
   "sm",
@@ -31,28 +24,7 @@ const color = [
   "neutral"
 ] as const
 
-const type = [
-  "file"
-] as const
-
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "relative inline-flex items-center",
     "base": [
@@ -69,11 +41,11 @@ const theme = {
   "variants": {
     "buttonGroup": {
       "horizontal": {
-        "root": "group",
+        "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
       },
       "vertical": {
-        "root": "group",
+        "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
       }
     },
@@ -319,6 +291,4 @@ const theme = {
     "color": "primary" as typeof color[number],
     "variant": "outline" as typeof variant[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/toast.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/toast"
-
 const color = [
   "primary",
   "secondary",
@@ -10,29 +8,7 @@ const color = [
   "neutral"
 ] as const
 
-const orientation = [
-  "horizontal",
-  "vertical"
-] as const
-
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",
     "wrapper": "w-0 flex-1 flex flex-col",
@@ -102,6 +78,4 @@ const theme = {
   "defaultVariants": {
     "color": "primary" as typeof color[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/toaster.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/toaster"
-
 const position = [
   "top-left",
   "top-center",
@@ -16,24 +14,7 @@ const swipeDirection = [
   "left"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
     "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
@@ -107,6 +88,4 @@ const theme = {
   "defaultVariants": {
     "position": "bottom-right" as typeof position[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/tooltip.ts

@@ -1,23 +1,4 @@
-import template from "/home/runner/work/ui/ui/src/theme/tooltip"
-
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "content": "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
     "arrow": "fill-default",
@@ -25,6 +6,4 @@ const theme = {
     "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5",
     "kbdsSize": "sm"
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui/tree.ts

@@ -1,5 +1,3 @@
-import template from "/home/runner/work/ui/ui/src/theme/tree"
-
 const color = [
   "primary",
   "secondary",
@@ -18,24 +16,7 @@ const size = [
   "xl"
 ] as const
 
-const result = typeof template === 'function' ? (template as Function)({
-  "prefix": "U",
-  "fonts": true,
-  "colorMode": true,
-  "theme": {
-    "colors": [
-      "primary",
-      "secondary",
-      "success",
-      "info",
-      "warning",
-      "error"
-    ],
-    "transitions": true
-  }
-}) : template
-
-const theme = {
+export default {
   "slots": {
     "root": "relative isolate",
     "item": "",
@@ -170,6 +151,4 @@ const theme = {
     "color": "primary" as typeof color[number],
     "size": "md" as typeof size[number]
   }
-}
-
-export default result as typeof theme
+}

package/.nuxt/ui.css

@@ -1,6 +1,6 @@
 @source "./ui";
 
-@theme default {
+@theme default inline {
   --color-old-neutral-50: oklch(98.5% 0 0);
   --color-old-neutral-100: oklch(97% 0 0);
   --color-old-neutral-200: oklch(92.2% 0 0);
@@ -12,8 +12,7 @@
   --color-old-neutral-800: oklch(26.9% 0 0);
   --color-old-neutral-900: oklch(20.5% 0 0);
   --color-old-neutral-950: oklch(14.5% 0 0);
-  --color-primary: var(--ui-primary);
-	--color-primary-50: var(--ui-color-primary-50);
+  --color-primary-50: var(--ui-color-primary-50);
 	--color-primary-100: var(--ui-color-primary-100);
 	--color-primary-200: var(--ui-color-primary-200);
 	--color-primary-300: var(--ui-color-primary-300);
@@ -24,7 +23,6 @@
 	--color-primary-800: var(--ui-color-primary-800);
 	--color-primary-900: var(--ui-color-primary-900);
 	--color-primary-950: var(--ui-color-primary-950);
-	--color-secondary: var(--ui-secondary);
 	--color-secondary-50: var(--ui-color-secondary-50);
 	--color-secondary-100: var(--ui-color-secondary-100);
 	--color-secondary-200: var(--ui-color-secondary-200);
@@ -36,7 +34,6 @@
 	--color-secondary-800: var(--ui-color-secondary-800);
 	--color-secondary-900: var(--ui-color-secondary-900);
 	--color-secondary-950: var(--ui-color-secondary-950);
-	--color-success: var(--ui-success);
 	--color-success-50: var(--ui-color-success-50);
 	--color-success-100: var(--ui-color-success-100);
 	--color-success-200: var(--ui-color-success-200);
@@ -48,7 +45,6 @@
 	--color-success-800: var(--ui-color-success-800);
 	--color-success-900: var(--ui-color-success-900);
 	--color-success-950: var(--ui-color-success-950);
-	--color-info: var(--ui-info);
 	--color-info-50: var(--ui-color-info-50);
 	--color-info-100: var(--ui-color-info-100);
 	--color-info-200: var(--ui-color-info-200);
@@ -60,7 +56,6 @@
 	--color-info-800: var(--ui-color-info-800);
 	--color-info-900: var(--ui-color-info-900);
 	--color-info-950: var(--ui-color-info-950);
-	--color-warning: var(--ui-warning);
 	--color-warning-50: var(--ui-color-warning-50);
 	--color-warning-100: var(--ui-color-warning-100);
 	--color-warning-200: var(--ui-color-warning-200);
@@ -72,7 +67,6 @@
 	--color-warning-800: var(--ui-color-warning-800);
 	--color-warning-900: var(--ui-color-warning-900);
 	--color-warning-950: var(--ui-color-warning-950);
-	--color-error: var(--ui-error);
 	--color-error-50: var(--ui-color-error-50);
 	--color-error-100: var(--ui-color-error-100);
 	--color-error-200: var(--ui-color-error-200);
@@ -95,6 +89,12 @@
 	--color-neutral-800: var(--ui-color-neutral-800);
 	--color-neutral-900: var(--ui-color-neutral-900);
 	--color-neutral-950: var(--ui-color-neutral-950);
+  --color-primary: var(--ui-primary);
+	--color-secondary: var(--ui-secondary);
+	--color-success: var(--ui-success);
+	--color-info: var(--ui-info);
+	--color-warning: var(--ui-warning);
+	--color-error: var(--ui-error);
   --radius-xs: calc(var(--ui-radius) * 0.5);
   --radius-sm: var(--ui-radius);
   --radius-md: calc(var(--ui-radius) * 1.5);
@@ -118,15 +118,22 @@
   --border-color-muted: var(--ui-border-muted);
   --border-color-accented: var(--ui-border-accented);
   --border-color-inverted: var(--ui-border-inverted);
+  --border-color-bg: var(--ui-bg);
   --ring-color-default: var(--ui-border);
   --ring-color-muted: var(--ui-border-muted);
   --ring-color-accented: var(--ui-border-accented);
   --ring-color-inverted: var(--ui-border-inverted);
   --ring-color-bg: var(--ui-bg);
+  --ring-offset-color-default: var(--ui-border);
+  --ring-offset-color-muted: var(--ui-border-muted);
+  --ring-offset-color-accented: var(--ui-border-accented);
+  --ring-offset-color-inverted: var(--ui-border-inverted);
+  --ring-offset-color-bg: var(--ui-bg);
   --divide-color-default: var(--ui-border);
   --divide-color-muted: var(--ui-border-muted);
   --divide-color-accented: var(--ui-border-accented);
   --divide-color-inverted: var(--ui-border-inverted);
+  --divide-color-bg: var(--ui-bg);
   --outline-color-default: var(--ui-border);
   --outline-color-inverted: var(--ui-border-inverted);
   --stroke-default: var(--ui-border);

package/README.md

@@ -16,6 +16,10 @@ Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Ta
 > [!NOTE]
 > You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
 
+> [!TIP]
+> **Looking for more components ?**
+> Check out [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
+
 ## Documentation
 
 Visit https://ui.nuxt.com to explore the documentation.

package/cli/templates.mjs

@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
 </template>
 `
   }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,13 +1,14 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.D7lOOabO.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BvUP-pSb.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
 import 'tailwindcss/colors';
+import 'knitwork';
 
 const name = "@nuxt/ui";
-const version = "3.1.0";
+const version = "3.1.2";
 
 const module = defineNuxtModule({
   meta: {
@@ -42,12 +43,21 @@ const module = defineNuxtModule({
         nuxt.options[key] = defu(nuxt.options[key], options2);
       }
     }
-    await registerModule("@nuxt/icon", "icon", { cssLayer: "components" });
+    await registerModule("@nuxt/icon", "icon", {
+      cssLayer: "components"
+    });
     if (options.fonts) {
-      await registerModule("@nuxt/fonts", "fonts", { experimental: { processCSSVariables: true } });
+      await registerModule("@nuxt/fonts", "fonts", {
+        defaults: {
+          weights: [400, 500, 600, 700]
+        }
+      });
     }
     if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
+      await registerModule("@nuxtjs/color-mode", "colorMode", {
+        classSuffix: "",
+        disableTransition: true
+      });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
     addComponentsDir({