@nuxt/ui 4.7.0 → 4.8.0

package/dist/shared/{ui.BIQuJqNV.mjs → ui.CoJ8bnb0.mjs}

@@ -359,14 +359,26 @@ const authForm = {
   }
 };
 
-const avatar = {
+const avatar = (options) => ({
   slots: {
-    root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated",
+    root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle",
     image: "h-full w-full rounded-[inherit] object-cover",
-    fallback: "font-medium text-muted truncate",
-    icon: "text-muted shrink-0"
+    fallback: "font-medium truncate",
+    icon: "shrink-0"
   },
   variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        root: `bg-${color}/10`,
+        fallback: `text-${color}`,
+        icon: `text-${color}`
+      }])),
+      neutral: {
+        root: "bg-elevated",
+        fallback: "text-muted",
+        icon: "text-muted"
+      }
+    },
     size: {
       "3xs": {
         root: "size-4 text-[8px]"
@@ -398,11 +410,12 @@ const avatar = {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "md",
+    color: "neutral"
   }
-};
+});
 
-const avatarGroup = {
+const avatarGroup = (options) => ({
   slots: {
     root: "inline-flex flex-row-reverse justify-end",
     base: "relative rounded-full ring-bg first:me-0"
@@ -436,12 +449,17 @@ const avatarGroup = {
       "3xl": {
         base: "ring-3 -me-2"
       }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "md",
+    color: "neutral"
   }
-};
+});
 
 const fieldGroupVariant = {
   fieldGroup: {
@@ -770,7 +788,7 @@ const breadcrumb = (options) => ({
     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-primary",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
@@ -781,7 +799,7 @@ const breadcrumb = (options) => ({
   variants: {
     active: {
       true: {
-        link: "text-primary font-semibold"
+        link: "font-semibold"
       },
       false: {
         link: "text-muted font-medium"
@@ -794,6 +812,10 @@ const breadcrumb = (options) => ({
     },
     to: {
       true: ""
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { link: `focus-visible:outline-${color}` }])),
+      neutral: { link: "focus-visible:outline-inverted" }
     }
   },
   compoundVariants: [{
@@ -803,7 +825,22 @@ const breadcrumb = (options) => ({
     class: {
       link: ["hover:text-default", options.theme.transitions && "transition-colors"]
     }
-  }]
+  }, ...(options.theme.colors || []).map((color) => ({
+    color,
+    active: true,
+    class: {
+      link: `text-${color}`
+    }
+  })), {
+    color: "neutral",
+    active: true,
+    class: {
+      link: "text-highlighted"
+    }
+  }],
+  defaultVariants: {
+    color: "primary"
+  }
 });
 
 const button = (options) => ({
@@ -1235,38 +1272,35 @@ const changelogVersions = {
 const chatMessage = (options) => ({
   slots: {
     root: "group/message relative w-full",
+    header: "flex mb-1.5",
     container: "relative flex items-start",
+    body: "min-w-0",
     leading: "inline-flex items-center justify-center min-h-6",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
-    files: "flex items-center gap-1.5 mb-1.5",
-    content: "relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0",
-    actions: ["opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center", options.theme.transitions && "transition-opacity"]
+    files: "flex items-center gap-1.5",
+    content: "relative text-pretty wrap-break-word *:first:mt-0 *:last:mb-0",
+    actions: ["[@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center", options.theme.transitions && "transition-opacity"]
   },
   variants: {
     variant: {
-      solid: {
-        content: "bg-inverted text-inverted"
-      },
-      outline: {
-        content: "bg-default ring ring-default"
-      },
-      soft: {
-        content: "bg-elevated/50"
-      },
-      subtle: {
-        content: "bg-elevated/50 ring ring-default"
-      },
-      naked: {
-        content: ""
-      }
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: "",
+      naked: ""
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
     },
     side: {
       left: {},
       right: {
         container: "justify-end ms-auto max-w-[75%]",
-        files: "justify-end"
+        header: "justify-end",
+        actions: "right-0"
       }
     },
     leading: {
@@ -1298,20 +1332,6 @@ const chatMessage = (options) => ({
     class: {
       container: "pb-8"
     }
-  }, {
-    leading: true,
-    compact: false,
-    side: "left",
-    class: {
-      actions: "left-11"
-    }
-  }, {
-    leading: true,
-    compact: true,
-    side: "left",
-    class: {
-      actions: "left-6.5"
-    }
   }, {
     variant: ["solid", "outline", "soft", "subtle"],
     compact: false,
@@ -1332,9 +1352,65 @@ const chatMessage = (options) => ({
     class: {
       content: "w-full"
     }
+  }, ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "solid",
+    class: {
+      content: `bg-${color} text-inverted`
+    }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "outline",
+    class: {
+      content: `text-${color} ring ring-${color}/25`
+    }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "soft",
+    class: {
+      content: `bg-${color}/10 text-${color}`
+    }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "subtle",
+    class: {
+      content: `bg-${color}/10 text-${color} ring ring-${color}/25`
+    }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "naked",
+    class: {
+      content: `text-${color}`
+    }
+  })), {
+    color: "neutral",
+    variant: "solid",
+    class: {
+      content: "bg-inverted text-inverted"
+    }
+  }, {
+    color: "neutral",
+    variant: "outline",
+    class: {
+      content: "bg-default ring ring-default"
+    }
+  }, {
+    color: "neutral",
+    variant: "soft",
+    class: {
+      content: "bg-elevated/50"
+    }
+  }, {
+    color: "neutral",
+    variant: "subtle",
+    class: {
+      content: "bg-elevated/50 ring ring-default"
+    }
   }],
   defaultVariants: {
-    variant: "naked"
+    side: "left",
+    variant: "naked",
+    color: "neutral"
   }
 });
 
@@ -1471,9 +1547,6 @@ const chatTool = (options) => ({
         chevronIcon: ["absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100", options.theme.transitions && "transition-[rotate,opacity] duration-200"]
       }
     }
-  },
-  defaultVariants: {
-    variant: "inline"
   }
 });
 
@@ -1561,6 +1634,9 @@ const checkbox = (options) => ({
         description: "cursor-not-allowed"
       }
     },
+    highlight: {
+      true: ""
+    },
     checked: {
       true: ""
     }
@@ -1591,6 +1667,20 @@ const checkbox = (options) => ({
       class: {
         root: "cursor-not-allowed"
       }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      highlight: true,
+      class: {
+        base: `ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      highlight: true,
+      class: {
+        base: "ring-inverted"
+      }
     }
   ],
   defaultVariants: {
@@ -1840,10 +1930,10 @@ const commandPalette = (options) => ({
     itemTrailingKbdsSize: "",
     itemWrapper: "flex-1 flex flex-col text-start min-w-0",
     itemLabel: "truncate space-x-1 text-dimmed",
-    itemDescription: "truncate text-muted",
-    itemLabelBase: "text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary",
+    itemLabelBase: "text-highlighted [&>mark]:text-primary [&>mark]:bg-primary/15",
     itemLabelPrefix: "text-default",
-    itemLabelSuffix: "text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"
+    itemLabelSuffix: "text-dimmed [&>mark]:text-primary [&>mark]:bg-primary/15",
+    itemDescription: "truncate text-muted [&>mark]:text-primary [&>mark]:bg-primary/15"
   },
   variants: {
     virtualize: {
@@ -1958,7 +2048,7 @@ const container = {
 
 const contextMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col",
+    content: "min-w-32 max-h-(--reka-context-menu-content-available-height) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col",
     viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     group: "p-1 isolate",
     label: "w-full flex items-center font-semibold text-highlighted",
@@ -2237,7 +2327,7 @@ const drawer = (options) => ({
         handle: "mb-4"
       },
       right: {
-        content: "flex-row",
+        content: "flex-row rtl:flex-row-reverse",
         handle: "!ml-4"
       },
       bottom: {
@@ -2245,7 +2335,7 @@ const drawer = (options) => ({
         handle: "mt-4"
       },
       left: {
-        content: "flex-row-reverse",
+        content: "flex-row-reverse rtl:flex-row",
         handle: "!mr-4"
       }
     },
@@ -2348,7 +2438,7 @@ const drawer = (options) => ({
 
 const dropdownMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col",
+    content: "min-w-32 max-h-(--reka-dropdown-menu-content-available-height) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col",
     input: "border-b border-default",
     empty: "text-center text-muted",
     viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
@@ -2695,6 +2785,8 @@ const empty = {
 const error = {
   slots: {
     root: "min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center",
+    leading: "mb-4 flex items-center justify-center",
+    leadingIcon: "size-10 shrink-0 text-primary",
     statusCode: "text-base font-semibold text-primary",
     statusMessage: "mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance",
     message: "mt-4 text-lg text-muted text-balance",
@@ -2971,8 +3063,7 @@ const formField = {
     }
   },
   defaultVariants: {
-    size: "md",
-    orientation: "vertical"
+    size: "md"
   }
 };
 
@@ -3249,7 +3340,7 @@ const inputMenu = (options) => {
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none",
       trailingClear: "p-0",
       arrow: "fill-bg stroke-default",
-      content: "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col",
+      content: "max-h-[min(15rem,var(--reka-combobox-content-available-height))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col",
       viewport: "relative scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
       empty: "text-center text-muted",
@@ -5307,6 +5398,9 @@ const radioGroup = (options) => ({
         indicator: "after:size-2"
       }
     },
+    highlight: {
+      true: ""
+    },
     disabled: {
       true: {
         item: "opacity-75",
@@ -5377,13 +5471,26 @@ const radioGroup = (options) => ({
       class: {
         item: "cursor-not-allowed"
       }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      highlight: true,
+      class: {
+        base: `ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      highlight: true,
+      class: {
+        base: "ring-inverted"
+      }
     }
   ],
   defaultVariants: {
     size: "md",
     color: "primary",
     variant: "list",
-    orientation: "vertical",
     indicator: "start"
   }
 });
@@ -5418,7 +5525,7 @@ const select = (options) => {
       value: "truncate pointer-events-none",
       placeholder: "truncate text-dimmed",
       arrow: "fill-bg stroke-default",
-      content: "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
+      content: "max-h-[min(15rem,var(--reka-select-content-available-height))] w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
       viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
       empty: "text-center text-muted",
@@ -5528,7 +5635,7 @@ const selectMenu = (options) => {
       input: "border-b border-default",
       focusScope: "flex flex-col min-h-0",
       viewport: "relative scroll-py-1 overflow-y-auto flex-1",
-      content: (content) => [content, "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"],
+      content: (content) => [content, "max-h-[min(15rem,var(--reka-combobox-content-available-height))] origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"],
       trailingClear: "p-0"
     },
     variants: {
@@ -5570,12 +5677,12 @@ const separator = (options) => ({
       horizontal: {
         root: "w-full flex-row",
         border: "w-full",
-        container: "mx-3 whitespace-nowrap"
+        container: "whitespace-nowrap"
       },
       vertical: {
         root: "h-full flex-col",
         border: "h-full",
-        container: "my-2"
+        container: ""
       }
     },
     size: {
@@ -5585,6 +5692,11 @@ const separator = (options) => ({
       lg: "",
       xl: ""
     },
+    position: {
+      start: "",
+      center: "",
+      end: ""
+    },
     type: {
       solid: {
         border: "border-solid"
@@ -5598,6 +5710,30 @@ const separator = (options) => ({
     }
   },
   compoundVariants: [{
+    orientation: "horizontal",
+    position: "start",
+    class: { container: "me-3" }
+  }, {
+    orientation: "horizontal",
+    position: "center",
+    class: { container: "mx-3" }
+  }, {
+    orientation: "horizontal",
+    position: "end",
+    class: { container: "ms-3" }
+  }, {
+    orientation: "vertical",
+    position: "start",
+    class: { container: "mb-2" }
+  }, {
+    orientation: "vertical",
+    position: "center",
+    class: { container: "my-2" }
+  }, {
+    orientation: "vertical",
+    position: "end",
+    class: { container: "mt-2" }
+  }, {
     orientation: "horizontal",
     size: "xs",
     class: { border: "border-t" }
@@ -6200,6 +6336,9 @@ const _switch = (options) => ({
         icon: "animate-spin"
       }
     },
+    highlight: {
+      true: ""
+    },
     required: {
       true: {
         label: "after:content-['*'] after:ms-0.5 after:text-error"
@@ -6214,6 +6353,22 @@ const _switch = (options) => ({
       }
     }
   },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      highlight: true,
+      class: {
+        base: `ring ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      highlight: true,
+      class: {
+        base: "ring ring-inverted"
+      }
+    }
+  ],
   defaultVariants: {
     color: "primary",
     size: "md"
@@ -7480,11 +7635,11 @@ const pre = {
 
 const prompt = {
   slots: {
-    root: "relative flex items-center gap-2 border border-muted bg-muted rounded-md px-4 py-3 my-5 last:mb-0",
+    root: "relative flex flex-wrap items-center gap-2 border border-muted bg-muted rounded-md px-4 py-3 my-5 last:mb-0",
     icon: "size-4 shrink-0 text-highlighted",
-    content: "flex-1 min-w-0",
+    content: "min-w-0",
     description: "text-sm/6 text-default font-medium",
-    actions: "flex items-center shrink-0 gap-1.5"
+    actions: "flex flex-wrap items-center gap-1.5 ms-auto"
   }
 };
 
@@ -8049,21 +8204,7 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
     }
     return sources.join("\n");
   }
-  templates.push({
-    filename: "ui.css",
-    write: true,
-    getContents: async () => {
-      const sources = await generateSources();
-      const prefix = options.theme?.prefix ? `${options.theme.prefix}:` : "";
-      return `${sources}
-
-@layer base {
-  body {
-    @apply ${prefix}antialiased ${prefix}text-default ${prefix}bg-default ${prefix}scheme-light ${prefix}dark:scheme-dark;
-  }
-}
-
-@theme static {
+  const themeBlocks = `@theme static {
   --color-old-neutral-50: ${colors.neutral[50]};
   --color-old-neutral-100: ${colors.neutral[100]};
   --color-old-neutral-200: ${colors.neutral[200]};
@@ -8129,8 +8270,28 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
   --fill-inverted: var(--ui-border-inverted);
 }
 `;
+  templates.push({
+    filename: "ui.css",
+    write: true,
+    getContents: async () => {
+      const sources = await generateSources();
+      const prefix = options.theme?.prefix ? `${options.theme.prefix}:` : "";
+      return `${sources}
+
+@layer base {
+  body {
+    @apply ${prefix}antialiased ${prefix}text-default ${prefix}bg-default ${prefix}scheme-light ${prefix}dark:scheme-dark;
+  }
+}
+
+${themeBlocks}`;
     }
   });
+  templates.push({
+    filename: "ui.static.css",
+    write: true,
+    getContents: () => themeBlocks
+  });
   templates.push({
     filename: "ui/index.ts",
     write: true,
@@ -8224,4 +8385,4 @@ const publicComposables = {
   useToast: ["useToast"]
 };
 
-export { getDefaultConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g, publicComposables as p, resolveColors as r };
+export { addTemplates as a, getTemplates as b, defaultOptions as d, getDefaultConfig as g, publicComposables as p, resolveColors as r };

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, p as publicComposables, d as defaultOptions, r as resolveColors, a as getDefaultConfig } from './shared/ui.BIQuJqNV.mjs';
+import { b as getTemplates, p as publicComposables, d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.CoJ8bnb0.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import MagicString from 'magic-string';

package/dist/vite.mjs

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