@nuxt/ui 3.2.0 → 3.3.0

package/dist/shared/{ui.BPVxSPGY.mjs → ui.BkSj2DmF.mjs}

@@ -19,12 +19,14 @@ const icons = {
   close: "i-lucide-x",
   ellipsis: "i-lucide-ellipsis",
   external: "i-lucide-arrow-up-right",
+  file: "i-lucide-file",
   folder: "i-lucide-folder",
   folderOpen: "i-lucide-folder-open",
   loading: "i-lucide-loader-circle",
   minus: "i-lucide-minus",
   plus: "i-lucide-plus",
-  search: "i-lucide-search"
+  search: "i-lucide-search",
+  upload: "i-lucide-upload"
 };
 
 const getDefaultUiConfig = (colors) => ({
@@ -529,51 +531,51 @@ const button = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `text-inverted bg-${color} hover:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
+    class: `text-inverted bg-${color} hover:bg-${color}/75 active:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+    class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 active:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `text-${color} bg-${color}/10 hover:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
+    class: `text-${color} bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "ghost",
-    class: `text-${color} hover:bg-${color}/10 focus:outline-none focus-visible:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+    class: `text-${color} hover:bg-${color}/10 active:bg-${color}/10 focus:outline-none focus-visible:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
-    class: `text-${color} hover:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    class: `text-${color} hover:text-${color}/75 active:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-inverted bg-inverted hover:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+    class: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
   }, {
     color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-accented text-default bg-default hover:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+    class: "ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
   }, {
     color: "neutral",
     variant: "soft",
-    class: "text-default bg-elevated hover:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
+    class: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
   }, {
     color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+    class: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
   }, {
     color: "neutral",
     variant: "ghost",
-    class: "text-default hover:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
+    class: "text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
   }, {
     color: "neutral",
     variant: "link",
-    class: "text-muted hover:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
+    class: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
   }, {
     size: "xs",
     square: true,
@@ -1083,6 +1085,7 @@ const commandPalette = (options) => ({
     close: "",
     back: "p-0",
     content: "relative overflow-hidden flex flex-col",
+    footer: "p-1",
     viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
     group: "p-1 isolate",
     empty: "py-6 text-center text-sm text-muted",
@@ -1098,7 +1101,7 @@ const commandPalette = (options) => ({
     itemTrailingHighlightedIcon: "shrink-0 size-5 text-dimmed hidden group-data-highlighted:inline-flex",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5",
     itemTrailingKbdsSize: "md",
-    itemLabel: "truncate space-x-1 rtl:space-x-reverse text-dimmed",
+    itemLabel: "truncate space-x-1 text-dimmed",
     itemLabelBase: "text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary",
     itemLabelPrefix: "text-default",
     itemLabelSuffix: "text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"
@@ -1439,6 +1442,198 @@ const dropdownMenu = (options) => ({
   }
 });
 
+const fileUpload = (options) => ({
+  slots: {
+    root: "relative flex flex-col",
+    base: ["w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2", options.theme.transitions && "transition-[background]"],
+    wrapper: "flex flex-col items-center justify-center text-center",
+    icon: "shrink-0",
+    avatar: "shrink-0",
+    label: "font-medium text-default mt-2",
+    description: "text-muted mt-1",
+    actions: "flex flex-wrap gap-1.5 shrink-0 mt-4",
+    files: "",
+    file: "relative",
+    fileLeadingAvatar: "shrink-0",
+    fileWrapper: "flex flex-col min-w-0",
+    fileName: "text-default truncate",
+    fileSize: "text-muted truncate",
+    fileTrailingButton: ""
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      area: {
+        wrapper: "px-4 py-3",
+        base: "p-4"
+      },
+      button: {}
+    },
+    size: {
+      xs: {
+        base: "text-xs",
+        icon: "size-4",
+        file: "text-xs px-2 py-1 gap-1",
+        fileWrapper: "flex-row gap-1"
+      },
+      sm: {
+        base: "text-xs",
+        icon: "size-4",
+        file: "text-xs px-2.5 py-1.5 gap-1.5",
+        fileWrapper: "flex-row gap-1"
+      },
+      md: {
+        base: "text-sm",
+        icon: "size-5",
+        file: "text-xs px-2.5 py-1.5 gap-1.5"
+      },
+      lg: {
+        base: "text-sm",
+        icon: "size-5",
+        file: "text-sm px-3 py-2 gap-2",
+        fileSize: "text-xs"
+      },
+      xl: {
+        base: "text-base",
+        icon: "size-6",
+        file: "text-sm px-3 py-2 gap-2"
+      }
+    },
+    layout: {
+      list: {
+        root: "gap-2 items-start",
+        files: "flex flex-col w-full gap-2",
+        file: "min-w-0 flex items-center border border-default rounded-md w-full",
+        fileTrailingButton: "ms-auto"
+      },
+      grid: {
+        fileWrapper: "hidden",
+        fileLeadingAvatar: "size-full rounded-lg",
+        fileTrailingButton: "absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg"
+      }
+    },
+    position: {
+      inside: "",
+      outside: ""
+    },
+    dropzone: {
+      true: "border-dashed data-[dragging=true]:bg-elevated/25"
+    },
+    interactive: {
+      true: ""
+    },
+    highlight: {
+      true: ""
+    },
+    multiple: {
+      true: ""
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-75"
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    class: `focus-visible:outline-${color}`
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    highlight: true,
+    class: `border-${color}`
+  })), {
+    color: "neutral",
+    class: "focus-visible:outline-inverted"
+  }, {
+    color: "neutral",
+    highlight: true,
+    class: "border-inverted"
+  }, {
+    size: "xs",
+    layout: "list",
+    class: {
+      fileTrailingButton: "-me-1"
+    }
+  }, {
+    size: "sm",
+    layout: "list",
+    class: {
+      fileTrailingButton: "-me-1.5"
+    }
+  }, {
+    size: "md",
+    layout: "list",
+    class: {
+      fileTrailingButton: "-me-1.5"
+    }
+  }, {
+    size: "lg",
+    layout: "list",
+    class: {
+      fileTrailingButton: "-me-2"
+    }
+  }, {
+    size: "xl",
+    layout: "list",
+    class: {
+      fileTrailingButton: "-me-2"
+    }
+  }, {
+    variant: "button",
+    size: "xs",
+    class: {
+      base: "p-1"
+    }
+  }, {
+    variant: "button",
+    size: "sm",
+    class: {
+      base: "p-1.5"
+    }
+  }, {
+    variant: "button",
+    size: "md",
+    class: {
+      base: "p-1.5"
+    }
+  }, {
+    variant: "button",
+    size: "lg",
+    class: {
+      base: "p-2"
+    }
+  }, {
+    variant: "button",
+    size: "xl",
+    class: {
+      base: "p-2"
+    }
+  }, {
+    layout: "grid",
+    multiple: true,
+    class: {
+      files: "grid grid-cols-2 md:grid-cols-3 gap-4 w-full",
+      file: "p-0 aspect-square"
+    }
+  }, {
+    layout: "grid",
+    multiple: false,
+    class: {
+      file: "absolute inset-0 p-0"
+    }
+  }, {
+    interactive: true,
+    disabled: false,
+    class: "hover:bg-elevated/25"
+  }],
+  defaultVariants: {
+    color: "primary",
+    variant: "area",
+    size: "md"
+  }
+});
+
 const form = {
   base: ""
 };
@@ -1913,13 +2108,18 @@ function replaceFocus(str) {
   return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
 }
 
-const kbd = {
+const kbd = (options) => ({
   base: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans",
   variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
     variant: {
-      solid: "bg-inverted text-inverted",
-      outline: "bg-default text-highlighted ring ring-inset ring-accented",
-      subtle: "bg-elevated text-default ring ring-inset ring-accented"
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
     },
     size: {
       sm: "h-4 min-w-[16px] text-[10px]",
@@ -1927,11 +2127,45 @@ const kbd = {
       lg: "h-6 min-w-[24px] text-[12px]"
     }
   },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "solid",
+    class: `text-inverted bg-${color}`
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "outline",
+    class: `ring ring-inset ring-${color}/50 text-${color}`
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "soft",
+    class: `text-${color} bg-${color}/10`
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "subtle",
+    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10`
+  })), {
+    color: "neutral",
+    variant: "solid",
+    class: "text-inverted bg-inverted"
+  }, {
+    color: "neutral",
+    variant: "outline",
+    class: "ring ring-inset ring-accented text-default bg-default"
+  }, {
+    color: "neutral",
+    variant: "soft",
+    class: "text-default bg-elevated"
+  }, {
+    color: "neutral",
+    variant: "subtle",
+    class: "ring ring-inset ring-accented text-default bg-elevated"
+  }],
   defaultVariants: {
     variant: "outline",
+    color: "neutral",
     size: "md"
   }
-};
+});
 
 const link = (options) => ({
   base: "focus-visible:outline-primary",
@@ -3311,6 +3545,7 @@ const table = (options) => ({
     caption: "sr-only",
     thead: "relative",
     tbody: "divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
+    tfoot: "relative",
     tr: "data-[selected=true]:bg-elevated/50",
     th: "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
     td: "p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0",
@@ -3327,7 +3562,14 @@ const table = (options) => ({
     },
     sticky: {
       true: {
+        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur",
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+      },
+      header: {
         thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+      },
+      footer: {
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
       }
     },
     loading: {
@@ -3395,11 +3637,13 @@ const tabs = (options) => ({
     list: "relative flex p-1 group",
     indicator: "absolute transition-[translate,width] duration-200",
     trigger: ["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", options.theme.transitions && "transition-colors"],
-    content: "focus:outline-none w-full",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
-    label: "truncate"
+    label: "truncate",
+    trailingBadge: "shrink-0",
+    trailingBadgeSize: "sm",
+    content: "focus:outline-none w-full"
   },
   variants: {
     color: {
@@ -3756,20 +4000,18 @@ const toast = (options) => ({
     avatar: "shrink-0",
     avatarSize: "2xl",
     actions: "flex gap-1.5 shrink-0",
-    progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
+    progress: "absolute inset-x-0 bottom-0",
     close: "p-0"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`,
-        icon: `text-${color}`,
-        progress: `bg-${color}`
+        icon: `text-${color}`
       }])),
       neutral: {
         root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted",
-        icon: "text-highlighted",
-        progress: "bg-inverted"
+        icon: "text-highlighted"
       }
     },
     orientation: {
@@ -3855,7 +4097,7 @@ const tooltip = {
     content: "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 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",
     text: "truncate",
-    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:me-0.5`,
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['\xB7'] not-first-of-type:before:me-0.5`,
     kbdsSize: "sm"
   }
 };
@@ -3964,6 +4206,7 @@ const theme = {
   contextMenu: contextMenu,
   drawer: drawer,
   dropdownMenu: dropdownMenu,
+  fileUpload: fileUpload,
   form: form,
   formField: formField,
   input: input,
@@ -4006,6 +4249,12 @@ function getTemplates(options, uiConfig) {
       getContents: async () => {
         const template = theme[component];
         const result = typeof template === "function" ? template(options) : template;
+        if (result?.defaultVariants?.color && options.theme?.defaultVariants?.color) {
+          result.defaultVariants.color = options.theme.defaultVariants.color;
+        }
+        if (result?.defaultVariants?.size && options.theme?.defaultVariants?.size) {
+          result.defaultVariants.size = options.theme.defaultVariants.size;
+        }
         const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
           const keys = Object.keys(values);
           return keys.some((key) => key !== "true" && key !== "false");
@@ -4115,13 +4364,13 @@ import colors from 'tailwindcss/colors'
 
 const icons = ${JSON.stringify(uiConfig.icons)};
 
-type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | (string & {})
+type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
 type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
 
 type AppConfigUI = {
   colors?: {
     ${options.theme?.colors?.map((color) => `'${color}'?: Color`).join("\n		")}
-    neutral?: NeutralColor
+    neutral?: NeutralColor | (string & {})
   }
   icons?: Partial<typeof icons>
   tv?: typeof defaultConfig

package/dist/unplugin.d.mts

@@ -21,12 +21,14 @@ declare const _default: {
     close: string;
     ellipsis: string;
     external: string;
+    file: string;
     folder: string;
     folderOpen: string;
     loading: string;
     minus: string;
     plus: string;
     search: string;
+    upload: string;
 };
 
 type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone';

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.BPVxSPGY.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.BkSj2DmF.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';
@@ -152,10 +152,13 @@ function ComponentImportPlugin(options, meta) {
       name: "nuxt:ui:components",
       enforce: "pre",
       resolveId(id, importer) {
-        if (!importer || !normalize(importer).includes(runtimeDir)) {
+        if (!importer) {
           return;
         }
-        if (!RELATIVE_IMPORT_RE.test(id)) {
+        if (!normalize(importer).includes(runtimeDir) && (!options.extraRuntimeDir || !normalize(importer).includes(options.extraRuntimeDir))) {
+          return;
+        }
+        if (!RELATIVE_IMPORT_RE.test(id) && !id.startsWith("@nuxt/ui/components/")) {
           return;
         }
         const filename = id.match(/([^/]+)\.vue$/)?.[1];

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.BPVxSPGY.mjs';
+import './shared/ui.BkSj2DmF.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.2.0",
-  "packageManager": "pnpm@10.12.2",
+  "version": "3.3.0",
+  "packageManager": "pnpm@10.13.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -98,9 +98,9 @@
     "prepack": "pnpm build",
     "dev": "nuxt dev playground --uiDev",
     "dev:build": "nuxt build playground",
-    "dev:vue": "vite playground-vue -- --uiDev",
-    "dev:vue:build": "vite build playground-vue",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && vite build playground-vue",
+    "dev:vue": "pnpm --filter playground-vue dev -- --uiDev",
+    "dev:vue:build": "pnpm --filter playground-vue build",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && pnpm dev:vue:build",
     "docs": "nuxt dev docs --uiDev",
     "docs:build": "nuxt build docs",
     "lint": "eslint .",
@@ -115,17 +115,17 @@
     "@internationalized/date": "^3.8.2",
     "@internationalized/number": "^3.6.3",
     "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.14.0",
-    "@nuxt/kit": "^3.17.5",
-    "@nuxt/schema": "^3.17.5",
+    "@nuxt/icon": "^1.15.0",
+    "@nuxt/kit": "^4.0.1",
+    "@nuxt/schema": "^4.0.1",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.10",
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.10",
-    "@vueuse/core": "^13.4.0",
-    "@vueuse/integrations": "^13.4.0",
+    "@unhead/vue": "^2.0.12",
+    "@vueuse/core": "^13.5.0",
+    "@vueuse/integrations": "^13.5.0",
     "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
@@ -143,31 +143,31 @@
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.3.1",
+    "reka-ui": "2.3.2",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.10",
+    "tailwindcss": "^4.1.11",
     "tinyglobby": "^0.2.14",
     "unplugin": "^2.3.5",
     "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.7.0",
+    "unplugin-vue-components": "^28.8.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^2.2.10"
+    "vue-component-type-helpers": "^3.0.3"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.4.1",
+    "@nuxt/eslint-config": "^1.6.0",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.19.1",
+    "@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.29.0",
+    "eslint": "^9.31.0",
     "happy-dom": "^18.0.1",
-    "nuxt": "^3.17.5",
-    "release-it": "^19.0.3",
+    "nuxt": "^4.0.1",
+    "release-it": "^19.0.4",
     "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.3"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",
@@ -177,7 +177,7 @@
     "valibot": "^1.0.0",
     "vue-router": "^4.5.0",
     "yup": "^1.6.0",
-    "zod": "^3.24.0"
+    "zod": "^3.24.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
     "@inertiajs/vue3": {