@nuxt/ui 4.0.0-alpha.1 → 4.0.0-beta.0

package/dist/runtime/vue/components/Link.d.vue.ts

@@ -0,0 +1,93 @@
+import type { ButtonHTMLAttributes } from 'vue';
+import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: RouteLocationRaw;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: NuxtLinkProps['to'];
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
+    /**
+     * A class to apply to links that have been prefetched.
+     */
+    prefetchedClass?: string;
+    /**
+     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+     */
+    prefetch?: boolean;
+    /**
+     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+     */
+    prefetchOn?: 'visibility' | 'interaction' | Partial<{
+        visibility: boolean;
+        interaction: boolean;
+    }>;
+    /**
+     * Escape hatch to disable `prefetch` attribute.
+     */
+    noPrefetch?: boolean;
+}
+export interface LinkProps extends NuxtLinkProps {
+    /**
+     * The element or component this component should render as when not a link.
+     * @defaultValue 'button'
+     */
+    as?: any;
+    /**
+     * The type of the button when not a link.
+     * @defaultValue 'button'
+     */
+    type?: ButtonHTMLAttributes['type'];
+    disabled?: boolean;
+    /** Force the link to be active independent of the current route. */
+    active?: boolean;
+    /** Will only be active if the current route is an exact match. */
+    exact?: boolean;
+    /** Will only be active if the current route query is an exact match. */
+    exactQuery?: boolean | 'partial';
+    /** Will only be active if the current route hash is an exact match. */
+    exactHash?: boolean;
+    /** The class to apply when the link is inactive. */
+    inactiveClass?: string;
+    custom?: boolean;
+    /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+    raw?: boolean;
+    class?: any;
+}
+export interface LinkSlots {
+    default(props: {
+        active: boolean;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    type: "reset" | "submit" | "button";
+    as: any;
+    activeClass: string;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    active: boolean;
+    inactiveClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/vue/components/color-mode/ColorModeButton.d.vue.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps } from '../../../types';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+declare const _default: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/vue/components/color-mode/ColorModeSelect.d.vue.ts

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from '../../../types';
+export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/vue/components/color-mode/ColorModeSwitch.d.vue.ts

@@ -0,0 +1,5 @@
+import type { SwitchProps } from '../../../types';
+export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/shared/{ui.BEZXPd3d.mjs → ui.DGJZ-1aX.mjs}

@@ -2834,7 +2834,7 @@ const marquee = {
     },
     reverse: {
       true: {
-        content: "[animation-direction:reverse]"
+        content: "![animation-direction:reverse]"
       }
     },
     overlay: {
@@ -3929,7 +3929,7 @@ const progress = (options) => ({
     root: "gap-2",
     base: "relative overflow-hidden rounded-full bg-accented",
     indicator: "rounded-full size-full transition-transform duration-200 ease-out",
-    status: "flex justify-end text-dimmed transition-[width] duration-200",
+    status: "flex text-dimmed transition-[width] duration-200",
     steps: "grid items-end",
     step: "truncate text-end row-start-1 col-start-1 transition-opacity"
   },
@@ -3998,12 +3998,12 @@ const progress = (options) => ({
       horizontal: {
         root: "w-full flex flex-col",
         base: "w-full",
-        status: "flex-row"
+        status: "flex-row items-center justify-end min-w-fit"
       },
       vertical: {
         root: "h-full flex flex-row-reverse",
         base: "h-full",
-        status: "flex-col"
+        status: "flex-col justify-end min-h-fit"
       }
     },
     inverted: {
@@ -5484,7 +5484,7 @@ const tree = (options) => ({
     linkLeadingIcon: "shrink-0",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
+    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-[expanded=true]:rotate-180"
   },
   variants: {
     color: {
@@ -5995,7 +5995,7 @@ const codeTree = (options) => ({
     linkLeadingIcon: "size-4 shrink-0",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-expanded:rotate-180",
+    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[expanded=true]:rotate-180",
     content: "overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-l-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto"
   },
   variants: {
@@ -6082,7 +6082,7 @@ const icon = {
 
 const img = {
   slots: {
-    base: "rounded-md",
+    base: "rounded-md w-full",
     overlay: "fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity",
     content: "fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8"
   },
@@ -6287,7 +6287,7 @@ const contentNavigation = (options) => ({
     },
     disabled: {
       true: {
-        link: "cursor-not-allowed opacity-75"
+        trigger: "data-[state=open]:text-highlighted"
       }
     },
     highlight: {
@@ -6341,6 +6341,7 @@ const contentNavigation = (options) => ({
     variant: "pill",
     active: true,
     highlight: true,
+    disabled: false,
     class: {
       link: ["hover:before:bg-elevated/50", options.theme.transitions && "before:transition-colors"]
     }
@@ -6653,12 +6654,15 @@ export * as prose from './prose'
   });
   templates.push({
     filename: "types/ui.d.ts",
-    getContents: () => `import * as ui from '#build/ui'
+    getContents: () => {
+      const iconKeys = Object.keys(uiConfig?.icons || {});
+      const iconUnion = iconKeys.length ? iconKeys.map((i) => JSON.stringify(i)).join(" | ") : "string";
+      return `import * as ui from '#build/ui'
 import type { TVConfig } from '@nuxt/ui'
 import type { defaultConfig } from 'tailwind-variants'
 import colors from 'tailwindcss/colors'
 
-const icons = ${JSON.stringify(uiConfig.icons)};
+type IconsConfig = Record<${iconUnion} | (string & {}), string>
 
 type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
 type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
@@ -6668,7 +6672,7 @@ type AppConfigUI = {
     ${options.theme?.colors?.map((color) => `'${color}'?: Color`).join("\n		")}
     neutral?: NeutralColor | (string & {})
   }
-  icons?: Partial<typeof icons>
+  icons?: Partial<IconsConfig>
   tv?: typeof defaultConfig
 } & TVConfig<typeof ui>
 
@@ -6676,14 +6680,15 @@ declare module '@nuxt/schema' {
   interface AppConfigInput {
     /**
      * Nuxt UI theme configuration
-     * @see https://ui.nuxt.com/docs/getting-started/theme#customize-theme
+     * @see https://ui.nuxt.com/docs/getting-started/theme/components
      */
     ui?: AppConfigUI
   }
 }
 
 export {}
-`
+`;
+    }
   });
   templates.push({
     filename: "ui-image-component.ts",

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.BEZXPd3d.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.DGJZ-1aX.mjs';
 import MagicString from 'magic-string';
 import { genSafeVariableName } from 'knitwork';
 import { resolvePathSync } from 'mlly';

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.BEZXPd3d.mjs';
+import './shared/ui.DGJZ-1aX.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import 'knitwork';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "4.0.0-alpha.1",
-  "packageManager": "pnpm@10.15.0",
+  "version": "4.0.0-beta.0",
+  "packageManager": "pnpm@10.17.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -108,10 +108,10 @@
     "typecheck": "vue-tsc --noEmit && nuxt typecheck playgrounds/nuxt && nuxt typecheck docs && cd playgrounds/vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
-    "release": "release-it --preRelease=alpha"
+    "release": "release-it --preRelease=beta"
   },
   "dependencies": {
-    "@ai-sdk/vue": "^2.0.29",
+    "@ai-sdk/vue": "^2.0.48",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.9.0",
     "@internationalized/number": "^3.6.5",
@@ -121,12 +121,12 @@
     "@nuxt/schema": "^4.0.3",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.12",
-    "@tailwindcss/vite": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.13",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.14",
-    "@vueuse/core": "^13.8.0",
-    "@vueuse/integrations": "^13.8.0",
+    "@unhead/vue": "^2.0.17",
+    "@vueuse/core": "^13.9.0",
+    "@vueuse/integrations": "^13.9.0",
     "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
@@ -140,47 +140,47 @@
     "fuse.js": "^7.1.0",
     "hookable": "^5.5.3",
     "knitwork": "^1.2.0",
-    "magic-string": "^0.30.18",
+    "magic-string": "^0.30.19",
     "mlly": "^1.8.0",
-    "motion-v": "^1.7.0",
+    "motion-v": "^1.7.1",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
     "reka-ui": "2.5.0",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^3.1.0",
-    "tailwindcss": "^4.1.12",
-    "tinyglobby": "^0.2.14",
+    "tailwind-variants": "^3.1.1",
+    "tailwindcss": "^4.1.13",
+    "tinyglobby": "^0.2.15",
     "unplugin": "^2.3.10",
-    "unplugin-auto-import": "^20.0.0",
-    "unplugin-vue-components": "^29.0.0",
+    "unplugin-auto-import": "^20.1.0",
+    "unplugin-vue-components": "^29.1.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.0.6"
+    "vue-component-type-helpers": "^3.0.7"
   },
   "devDependencies": {
-    "@nuxt/content": "^3.6.3",
+    "@nuxt/content": "^3.7.1",
     "@nuxt/eslint-config": "^1.9.0",
-    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/module-builder": "^1.0.2",
     "@nuxt/test-utils": "^3.19.2",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.36.0",
     "happy-dom": "^18.0.1",
     "nuxt": "^4.0.3",
-    "release-it": "^19.0.4",
+    "release-it": "^19.0.5",
     "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^3.0.6"
+    "vue-tsc": "^3.0.7"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",
-    "joi": "^17.13.0",
+    "joi": "^18.0.0",
     "superstruct": "^2.0.0",
     "typescript": "^5.6.3",
     "valibot": "^1.0.0",
     "vue-router": "^4.5.0",
-    "yup": "^1.6.0",
+    "yup": "^1.7.0",
     "zod": "^3.24.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
@@ -207,26 +207,13 @@
     }
   },
   "resolutions": {
+    "@nuxt/kit": "4.0.3",
     "@nuxt/ui": "workspace:*",
-    "@nuxt/module-builder": "1.0.1",
     "chokidar": "3.6.0",
     "debug": "4.3.7",
+    "typescript": "5.8.3",
     "unimport": "4.1.1",
-    "unplugin": "^2.3.10",
-    "typescript": "5.8.3"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "better-sqlite3",
-      "puppeteer",
-      "sharp"
-    ],
-    "ignoredBuiltDependencies": [
-      "@parcel/watcher",
-      "esbuild",
-      "vue-demi",
-      "workerd"
-    ]
+    "unplugin": "^2.3.10"
   },
   "keywords": [
     "nuxt-ui",