@nuxt/ui 4.0.1 → 4.2.0

package/dist/shared/{ui.D-FDXAUi.mjs → ui.B77q-Dvh.mjs}

@@ -1,9 +1,12 @@
 import { pick } from '../../dist/runtime/utils/index.js';
 import 'node:url';
-import { kebabCase } from 'scule';
+import { pascalCase, kebabCase, camelCase } from 'scule';
 import { genExport } from 'knitwork';
 import colors from 'tailwindcss/colors';
-import { addTypeTemplate, addTemplate, hasNuxtModule } from '@nuxt/kit';
+import { addTypeTemplate, addTemplate, updateTemplates, hasNuxtModule, logger } from '@nuxt/kit';
+import { readFile } from 'node:fs/promises';
+import { join } from 'pathe';
+import { globSync } from 'tinyglobby';
 import { defuFn, defu } from 'defu';
 
 const icons = {
@@ -50,32 +53,173 @@ const icons = {
   warning: "i-lucide-triangle-alert"
 };
 
-const getDefaultUiConfig = (colors) => ({
-  colors: pick({
-    primary: "green",
-    secondary: "blue",
-    success: "green",
-    info: "blue",
-    warning: "yellow",
-    error: "red",
-    neutral: "slate"
-  }, [...colors || [], "neutral"]),
-  icons
-});
+function resolveColors(colors) {
+  return colors?.length ? [.../* @__PURE__ */ new Set(["primary", ...colors])] : ["primary", "secondary", "success", "info", "warning", "error"];
+}
+function getDefaultConfig(theme) {
+  return {
+    colors: pick({
+      primary: "green",
+      secondary: "blue",
+      success: "green",
+      info: "blue",
+      warning: "yellow",
+      error: "red",
+      neutral: "slate"
+    }, [...theme?.colors || [], "neutral"]),
+    icons,
+    prefix: theme?.prefix,
+    tv: {
+      twMergeConfig: {
+        prefix: theme?.prefix
+      }
+    }
+  };
+}
 const defaultOptions = {
   prefix: "U",
   fonts: true,
   colorMode: true,
   theme: {
     colors: void 0,
-    transitions: true
+    transitions: true,
+    defaultVariants: {
+      color: void 0,
+      size: void 0
+    },
+    prefix: void 0
   },
   mdc: false,
   content: false
 };
-const resolveColors = (colors) => {
-  return colors?.length ? [.../* @__PURE__ */ new Set(["primary", ...colors])] : ["primary", "secondary", "success", "info", "warning", "error"];
-};
+
+function prefixClasses(classString, prefix) {
+  if (!prefix || !classString) {
+    return classString;
+  }
+  return classString.split(" ").filter(Boolean).map((cls) => `${prefix}:${cls}`).join(" ");
+}
+function isSizeValue(value) {
+  return /^(?:[23]x[sl]|xs|sm|md|lg|xl)$/.test(value.trim());
+}
+function applyPrefixToObject(obj, prefix, context = []) {
+  if (!obj || !prefix) {
+    return obj;
+  }
+  const currentKey = context[context.length - 1];
+  const compoundVariantsIndex = context.indexOf("compoundVariants");
+  const isInCompoundVariant = compoundVariantsIndex !== -1 && !context.slice(compoundVariantsIndex).includes("class");
+  const isInDefaultVariants = context.includes("defaultVariants");
+  const isComponentSizeValue = typeof obj === "string" && typeof currentKey === "string" && currentKey.endsWith("Size") && isSizeValue(obj);
+  if (typeof obj === "string" && (isInCompoundVariant || isInDefaultVariants || isComponentSizeValue)) {
+    return obj;
+  }
+  if (typeof obj === "string") {
+    return prefixClasses(obj, prefix);
+  }
+  if (Array.isArray(obj)) {
+    return obj.map((item, index) => applyPrefixToObject(item, prefix, [...context, String(index)]));
+  }
+  if (typeof obj === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = applyPrefixToObject(value, prefix, [...context, key]);
+    }
+    return result;
+  }
+  return obj;
+}
+function applyDefaultVariants(result, defaultVariants) {
+  if (!result || !defaultVariants) {
+    return result;
+  }
+  if (result.defaultVariants?.color && defaultVariants.color) {
+    result.defaultVariants.color = defaultVariants.color;
+  }
+  if (result.defaultVariants?.size && defaultVariants.size) {
+    result.defaultVariants.size = defaultVariants.size;
+  }
+  return result;
+}
+
+async function buildComponentDependencyGraph(componentDir, componentPattern) {
+  const dependencyGraph = /* @__PURE__ */ new Map();
+  const componentFiles = globSync(["**/*.vue"], {
+    cwd: componentDir,
+    absolute: true
+  });
+  for (const componentFile of componentFiles) {
+    try {
+      const content = await readFile(componentFile, "utf-8");
+      const componentName = pascalCase(componentFile.split("/").pop().replace(".vue", ""));
+      const dependencies = /* @__PURE__ */ new Set();
+      const matches = content.matchAll(componentPattern);
+      for (const match of matches) {
+        const depName = match[1] || match[2];
+        if (depName && depName !== componentName) {
+          dependencies.add(depName);
+        }
+      }
+      dependencyGraph.set(componentName, dependencies);
+    } catch {
+    }
+  }
+  return dependencyGraph;
+}
+function resolveComponentDependencies(component, dependencyGraph, resolved = /* @__PURE__ */ new Set()) {
+  if (resolved.has(component)) {
+    return resolved;
+  }
+  resolved.add(component);
+  const dependencies = dependencyGraph.get(component);
+  if (dependencies) {
+    for (const dep of dependencies) {
+      resolveComponentDependencies(dep, dependencyGraph, resolved);
+    }
+  }
+  return resolved;
+}
+async function detectUsedComponents(dirs, prefix, componentDir, includeComponents) {
+  const detectedComponents = /* @__PURE__ */ new Set();
+  if (includeComponents && includeComponents.length > 0) {
+    for (const component of includeComponents) {
+      detectedComponents.add(component);
+    }
+  }
+  const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, "g");
+  for (const dir of dirs) {
+    const appFiles = globSync(["**/*.{vue,ts,js,tsx,jsx}"], {
+      cwd: dir,
+      ignore: ["node_modules/**", ".nuxt/**", "dist/**"]
+    });
+    for (const file of appFiles) {
+      try {
+        const filePath = join(dir, file);
+        const content = await readFile(filePath, "utf-8");
+        const matches = content.matchAll(componentPattern);
+        for (const match of matches) {
+          const componentName = match[1] || match[2];
+          if (componentName) {
+            detectedComponents.add(componentName);
+          }
+        }
+      } catch {
+      }
+    }
+  }
+  if (detectedComponents.size === 0) {
+    return void 0;
+  }
+  const dependencyGraph = await buildComponentDependencyGraph(componentDir, componentPattern);
+  const allComponents = /* @__PURE__ */ new Set();
+  for (const component of detectedComponents) {
+    const resolved = resolveComponentDependencies(component, dependencyGraph);
+    for (const resolvedComponent of resolved) {
+      allComponents.add(resolvedComponent);
+    }
+  }
+  return allComponents;
+}
 
 const accordion$1 = {
   slots: {
@@ -843,19 +987,25 @@ const calendar = (options) => ({
     gridBody: "grid",
     headCell: "rounded-md",
     cell: "relative text-center",
-    cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted", options.theme.transitions && "transition"]
+    cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted", options.theme.transitions && "transition"]
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         headCell: `text-${color}`,
-        cellTrigger: `focus-visible:ring-${color} data-[selected]:bg-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+        cellTrigger: `focus-visible:ring-${color}`
       }])),
       neutral: {
         headCell: "text-highlighted",
-        cellTrigger: "focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
+        cellTrigger: "focus-visible:ring-inverted"
       }
     },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
     size: {
       xs: {
         heading: "text-xs",
@@ -888,9 +1038,59 @@ const calendar = (options) => ({
       }
     }
   },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "solid",
+    class: {
+      cellTrigger: `data-[selected]:bg-${color} data-[selected]:text-inverted data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+    }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "outline",
+    class: {
+      cellTrigger: `data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/50 data-[selected]:text-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/10 hover:not-data-[selected]:bg-${color}/10`
+    }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "soft",
+    class: {
+      cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+    }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "subtle",
+    class: {
+      cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/25 data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+    }
+  })), {
+    color: "neutral",
+    variant: "solid",
+    class: {
+      cellTrigger: "data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
+    }
+  }, {
+    color: "neutral",
+    variant: "outline",
+    class: {
+      cellTrigger: "data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-[selected]:text-default data-[selected]:bg-default data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/10 hover:not-data-[selected]:bg-inverted/10"
+    }
+  }, {
+    color: "neutral",
+    variant: "soft",
+    class: {
+      cellTrigger: "data-[selected]:bg-elevated data-[selected]:text-default data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
+    }
+  }, {
+    color: "neutral",
+    variant: "subtle",
+    class: {
+      cellTrigger: "data-[selected]:bg-elevated data-[selected]:text-default data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
+    }
+  }],
   defaultVariants: {
     size: "md",
-    color: "primary"
+    color: "primary",
+    variant: "solid"
   }
 });
 
@@ -1012,12 +1212,12 @@ const changelogVersions = {
 const chatMessage = (options) => ({
   slots: {
     root: "group/message relative w-full",
-    container: "relative flex items-start group-data-[role=user]/message:max-w-[75%]",
+    container: "relative flex items-start",
     leading: "inline-flex items-center justify-center min-h-6",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
-    content: "relative text-pretty min-w-0",
+    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"]
   },
   variants: {
@@ -1043,7 +1243,7 @@ const chatMessage = (options) => ({
         container: "rtl:justify-end"
       },
       right: {
-        container: "ltr:justify-end ms-auto"
+        container: "ltr:justify-end ms-auto max-w-[75%]"
       }
     },
     leading: {
@@ -1101,6 +1301,12 @@ const chatMessage = (options) => ({
       content: "px-2 py-1 rounded-lg min-h-8",
       leading: "mt-1"
     }
+  }, {
+    variant: "naked",
+    side: "left",
+    class: {
+      content: "w-full"
+    }
   }],
   defaultVariants: {
     variant: "naked"
@@ -1244,9 +1450,10 @@ const checkbox = (options) => ({
     },
     disabled: {
       true: {
-        base: "cursor-not-allowed opacity-75",
-        label: "cursor-not-allowed opacity-75",
-        description: "cursor-not-allowed opacity-75"
+        root: "opacity-75",
+        base: "cursor-not-allowed",
+        label: "cursor-not-allowed",
+        description: "cursor-not-allowed"
       }
     },
     checked: {
@@ -1277,7 +1484,7 @@ const checkbox = (options) => ({
       variant: "card",
       disabled: true,
       class: {
-        root: "cursor-not-allowed opacity-75"
+        root: "cursor-not-allowed"
       }
     }
   ],
@@ -1342,6 +1549,9 @@ const checkboxGroup = (options) => ({
       true: {
         legend: "after:content-['*'] after:ms-0.5 after:text-error"
       }
+    },
+    disabled: {
+      true: {}
     }
   },
   compoundVariants: [
@@ -1384,7 +1594,7 @@ const checkboxGroup = (options) => ({
       variant: "table",
       disabled: true,
       class: {
-        item: "cursor-not-allowed opacity-75"
+        item: "cursor-not-allowed"
       }
     }
   ],
@@ -1466,9 +1676,9 @@ const colorPicker = {
     picker: "flex gap-4",
     selector: "rounded-md touch-none",
     selectorBackground: "w-full h-full relative rounded-md",
-    selectorThumb: "-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed",
+    selectorThumb: "-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed",
     track: "w-[8px] relative rounded-md touch-none",
-    trackThumb: "absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed"
+    trackThumb: "absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed"
   },
   variants: {
     size: {
@@ -1508,11 +1718,11 @@ const commandPalette = (options) => ({
     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",
+    viewport: "relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
     group: "p-1 isolate",
     empty: "py-6 text-center text-sm text-muted",
     label: "p-1.5 text-xs font-semibold text-highlighted",
-    item: "group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    item: "group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0 size-5",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "2xs",
@@ -1523,12 +1733,22 @@ 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",
+    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",
     itemLabelPrefix: "text-default",
     itemLabelSuffix: "text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"
   },
   variants: {
+    virtualize: {
+      true: {
+        viewport: "p-1 isolate"
+      },
+      false: {
+        viewport: "divide-y divide-default"
+      }
+    },
     active: {
       true: {
         item: "text-highlighted before:bg-elevated",
@@ -1558,7 +1778,7 @@ const contextMenu = (options) => ({
     group: "p-1 isolate",
     label: "w-full flex items-center font-semibold text-highlighted",
     separator: "-mx-1 my-1 h-px bg-border",
-    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    item: "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -1566,7 +1786,9 @@ const contextMenu = (options) => ({
     itemTrailingIcon: "shrink-0",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
+    itemWrapper: "flex-1 flex flex-col text-start min-w-0",
     itemLabel: "truncate",
+    itemDescription: "truncate text-muted",
     itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
   },
   variants: {
@@ -1722,7 +1944,16 @@ const dashboardSearch = {
 const dashboardSearchButton = {
   slots: {
     base: "",
+    label: "",
     trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
+  },
+  variants: {
+    collapsed: {
+      true: {
+        label: "hidden",
+        trailing: "lg:hidden"
+      }
+    }
   }
 };
 
@@ -1928,7 +2159,7 @@ const dropdownMenu = (options) => ({
     group: "p-1 isolate",
     label: "w-full flex items-center font-semibold text-highlighted",
     separator: "-mx-1 my-1 h-px bg-border",
-    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    item: "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -1936,7 +2167,9 @@ const dropdownMenu = (options) => ({
     itemTrailingIcon: "shrink-0",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
+    itemWrapper: "flex-1 flex flex-col text-start min-w-0",
     itemLabel: "truncate",
+    itemDescription: "truncate text-muted",
     itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
   },
   variants: {
@@ -2027,6 +2260,74 @@ const dropdownMenu = (options) => ({
   }
 });
 
+const empty = {
+  slots: {
+    root: "relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0",
+    header: "flex flex-col items-center gap-2 max-w-sm text-center",
+    avatar: "shrink-0 mb-2",
+    title: "text-highlighted text-pretty font-medium",
+    description: "text-balance text-center",
+    body: "flex flex-col items-center gap-4 max-w-sm",
+    actions: "flex flex-wrap justify-center gap-2 shrink-0",
+    footer: "flex flex-col items-center gap-2 max-w-sm"
+  },
+  variants: {
+    size: {
+      xs: {
+        avatar: "size-8 text-base",
+        title: "text-sm",
+        description: "text-xs"
+      },
+      sm: {
+        avatar: "size-9 text-lg",
+        title: "text-sm",
+        description: "text-xs"
+      },
+      md: {
+        avatar: "size-10 text-xl",
+        title: "text-base",
+        description: "text-sm"
+      },
+      lg: {
+        avatar: "size-11 text-[22px]",
+        title: "text-base",
+        description: "text-sm"
+      },
+      xl: {
+        avatar: "size-12 text-2xl",
+        title: "text-lg",
+        description: "text-base"
+      }
+    },
+    variant: {
+      solid: {
+        root: "bg-inverted",
+        title: "text-inverted",
+        description: "text-dimmed"
+      },
+      outline: {
+        root: "bg-default ring ring-default",
+        description: "text-muted"
+      },
+      soft: {
+        root: "bg-elevated/50",
+        description: "text-toned"
+      },
+      subtle: {
+        root: "bg-elevated/50 ring ring-default",
+        description: "text-toned"
+      },
+      naked: {
+        description: "text-muted"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md"
+  }
+};
+
 const error = {
   slots: {
     root: "min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center",
@@ -2487,6 +2788,67 @@ const input = (options) => ({
   }
 });
 
+const inputDate = (options) => {
+  return defuFn({
+    slots: {
+      root: () => void 0,
+      base: () => ["group relative inline-flex items-center rounded-md select-none", options.theme.transitions && "transition-colors"],
+      segment: ["rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75", options.theme.transitions && "transition-colors"],
+      separatorIcon: "shrink-0 size-4 text-muted"
+    },
+    variants: {
+      size: {
+        xs: {
+          base: (prev) => [prev, "gap-0.25"],
+          segment: "data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9"
+        },
+        sm: {
+          base: (prev) => [prev, "gap-0.5"],
+          segment: "data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9"
+        },
+        md: {
+          base: (prev) => [prev, "gap-0.5"],
+          segment: "data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11"
+        },
+        lg: {
+          base: (prev) => [prev, "gap-0.75"],
+          segment: "data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11"
+        },
+        xl: {
+          base: (prev) => [prev, "gap-0.75"],
+          segment: "data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13"
+        }
+      }
+    },
+    compoundVariants: [{
+      variant: "outline",
+      class: {
+        segment: "focus:bg-elevated"
+      }
+    }, {
+      variant: "soft",
+      class: {
+        segment: "focus:bg-accented/50 group-hover:focus:bg-accented"
+      }
+    }, {
+      variant: "subtle",
+      class: {
+        segment: "focus:bg-accented"
+      }
+    }, {
+      variant: "ghost",
+      class: {
+        segment: "focus:bg-elevated group-hover:focus:bg-accented"
+      }
+    }, {
+      variant: "none",
+      class: {
+        segment: "focus:bg-elevated"
+      }
+    }]
+  }, input(options));
+};
+
 const inputMenu = (options) => {
   return defuFn({
     slots: {
@@ -2494,12 +2856,12 @@ const inputMenu = (options) => {
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
       arrow: "fill-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",
-      viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
+      viewport: "relative scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
       empty: "text-center text-muted",
       label: "font-semibold text-highlighted",
       separator: "-mx-1 my-1 h-px bg-border",
-      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      item: ["group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
       itemLeadingIcon: ["shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
@@ -2507,7 +2869,9 @@ const inputMenu = (options) => {
       itemLeadingChipSize: "",
       itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
       itemTrailingIcon: "shrink-0",
+      itemWrapper: "flex-1 flex flex-col min-w-0",
       itemLabel: "truncate",
+      itemDescription: "truncate text-muted",
       tagsItem: "px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75",
       tagsItemText: "truncate",
       tagsItemDelete: ["inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
@@ -2515,6 +2879,14 @@ const inputMenu = (options) => {
       tagsInput: "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
     },
     variants: {
+      virtualize: {
+        true: {
+          viewport: "p-1 isolate"
+        },
+        false: {
+          viewport: "divide-y divide-default"
+        }
+      },
       multiple: {
         true: {
           root: "flex-wrap"
@@ -2652,6 +3024,12 @@ const inputNumber = (options) => {
       },
       highlight: {
         true: ""
+      },
+      increment: {
+        false: ""
+      },
+      decrement: {
+        false: ""
       }
     },
     compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -2672,42 +3050,46 @@ const inputNumber = (options) => {
       class: "ring ring-inset ring-inverted"
     }, {
       orientation: "horizontal",
+      decrement: false,
+      class: "text-start"
+    }, {
+      decrement: true,
       size: "xs",
-      class: "px-7"
+      class: "ps-7"
     }, {
-      orientation: "horizontal",
+      decrement: true,
       size: "sm",
-      class: "px-8"
+      class: "ps-8"
     }, {
-      orientation: "horizontal",
+      decrement: true,
       size: "md",
-      class: "px-9"
+      class: "ps-9"
     }, {
-      orientation: "horizontal",
+      decrement: true,
       size: "lg",
-      class: "px-10"
+      class: "ps-10"
     }, {
-      orientation: "horizontal",
+      decrement: true,
       size: "xl",
-      class: "px-11"
+      class: "ps-11"
     }, {
-      orientation: "vertical",
+      increment: true,
       size: "xs",
       class: "pe-7"
     }, {
-      orientation: "vertical",
+      increment: true,
       size: "sm",
       class: "pe-8"
     }, {
-      orientation: "vertical",
+      increment: true,
       size: "md",
       class: "pe-9"
     }, {
-      orientation: "vertical",
+      increment: true,
       size: "lg",
       class: "pe-10"
     }, {
-      orientation: "vertical",
+      increment: true,
       size: "xl",
       class: "pe-11"
     }],
@@ -2767,8 +3149,68 @@ function replaceFocus$2(str) {
   return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
 }
 
+const inputTime = (options) => {
+  return defuFn({
+    slots: {
+      root: () => void 0,
+      base: () => ["group relative inline-flex items-center rounded-md select-none", options.theme.transitions && "transition-colors"],
+      segment: ["rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75", options.theme.transitions && "transition-colors"]
+    },
+    variants: {
+      size: {
+        xs: {
+          base: (prev) => [prev, "gap-0.25"],
+          segment: "not-data-[segment=literal]:w-6"
+        },
+        sm: {
+          base: (prev) => [prev, "gap-0.5"],
+          segment: "not-data-[segment=literal]:w-6"
+        },
+        md: {
+          base: (prev) => [prev, "gap-0.5"],
+          segment: "not-data-[segment=literal]:w-7"
+        },
+        lg: {
+          base: (prev) => [prev, "gap-0.75"],
+          segment: "not-data-[segment=literal]:w-7"
+        },
+        xl: {
+          base: (prev) => [prev, "gap-0.75"],
+          segment: "not-data-[segment=literal]:w-8"
+        }
+      }
+    },
+    compoundVariants: [{
+      variant: "outline",
+      class: {
+        segment: "focus:bg-elevated"
+      }
+    }, {
+      variant: "soft",
+      class: {
+        segment: "focus:bg-accented/50 group-hover:focus:bg-accented"
+      }
+    }, {
+      variant: "subtle",
+      class: {
+        segment: "focus:bg-accented"
+      }
+    }, {
+      variant: "ghost",
+      class: {
+        segment: "focus:bg-elevated group-hover:focus:bg-accented"
+      }
+    }, {
+      variant: "none",
+      class: {
+        segment: "focus:bg-elevated"
+      }
+    }]
+  }, input(options));
+};
+
 const kbd$1 = (options) => ({
-  base: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans",
+  base: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase",
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -2907,11 +3349,11 @@ const marquee = {
 
 const modal = {
   slots: {
-    overlay: "fixed inset-0 bg-elevated/75",
-    content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
+    overlay: "fixed inset-0",
+    content: "bg-default divide-y divide-default 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",
+    body: "flex-1 p-4 sm:p-6",
     footer: "flex items-center gap-1.5 p-4 sm:px-6",
     title: "text-highlighted font-semibold",
     description: "mt-1 text-muted text-sm",
@@ -2929,10 +3371,38 @@ const modal = {
         content: "inset-0"
       },
       false: {
-        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-lg shadow-lg ring ring-default overflow-hidden"
+        content: "w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default"
+      }
+    },
+    overlay: {
+      true: {
+        overlay: "bg-elevated/75"
+      }
+    },
+    scrollable: {
+      true: {
+        overlay: "overflow-y-auto",
+        content: "relative"
+      },
+      false: {
+        content: "fixed",
+        body: "overflow-y-auto"
       }
     }
-  }
+  },
+  compoundVariants: [{
+    scrollable: true,
+    fullscreen: false,
+    class: {
+      overlay: "grid place-items-center p-4 sm:py-8"
+    }
+  }, {
+    scrollable: false,
+    fullscreen: false,
+    class: {
+      content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden"
+    }
+  }]
 };
 
 const navigationMenu = (options) => ({
@@ -3066,6 +3536,8 @@ const navigationMenu = (options) => ({
     collapsed: true,
     class: {
       link: "px-1.5",
+      linkLabel: "hidden",
+      linkTrailing: "hidden",
       content: "shadow-sm rounded-sm min-h-6 p-1"
     }
   }, {
@@ -4274,8 +4746,10 @@ const radioGroup = (options) => ({
     },
     disabled: {
       true: {
-        base: "cursor-not-allowed opacity-75",
-        label: "cursor-not-allowed opacity-75"
+        item: "opacity-75",
+        base: "cursor-not-allowed",
+        label: "cursor-not-allowed",
+        description: "cursor-not-allowed"
       }
     },
     required: {
@@ -4338,7 +4812,7 @@ const radioGroup = (options) => ({
       variant: ["card", "table"],
       disabled: true,
       class: {
-        item: "cursor-not-allowed opacity-75"
+        item: "cursor-not-allowed"
       }
     }
   ],
@@ -4365,7 +4839,7 @@ const select = (options) => {
       empty: "text-center text-muted",
       label: "font-semibold text-highlighted",
       separator: "-mx-1 my-1 h-px bg-border",
-      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      item: ["group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
       itemLeadingIcon: ["shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
@@ -4373,7 +4847,9 @@ const select = (options) => {
       itemLeadingChipSize: "",
       itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
       itemTrailingIcon: "shrink-0",
-      itemLabel: "truncate"
+      itemWrapper: "flex-1 flex flex-col min-w-0",
+      itemLabel: "truncate",
+      itemDescription: "truncate text-muted"
     },
     variants: {
       ...fieldGroupVariant,
@@ -4445,8 +4921,19 @@ const selectMenu = (options) => {
     slots: {
       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)"]
     },
+    variants: {
+      virtualize: {
+        true: {
+          viewport: "p-1 isolate"
+        },
+        false: {
+          viewport: "divide-y divide-default"
+        }
+      }
+    },
     compoundVariants: (prev) => prev.map((item) => ({
       ...item,
       class: typeof item.class === "string" ? replaceFocus(item.class) : item.class
@@ -4933,9 +5420,10 @@ const _switch = (options) => ({
     },
     disabled: {
       true: {
-        base: "cursor-not-allowed opacity-75",
-        label: "cursor-not-allowed opacity-75",
-        description: "cursor-not-allowed opacity-75"
+        root: "opacity-75",
+        base: "cursor-not-allowed",
+        label: "cursor-not-allowed",
+        description: "cursor-not-allowed"
       }
     }
   },
@@ -4948,10 +5436,10 @@ const _switch = (options) => ({
 const table$1 = (options) => ({
   slots: {
     root: "relative overflow-auto",
-    base: "min-w-full overflow-clip",
+    base: "min-w-full",
     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",
+    tbody: "[&>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",
@@ -4961,6 +5449,12 @@ const table$1 = (options) => ({
     loading: "py-6 text-center"
   },
   variants: {
+    virtualize: {
+      false: {
+        base: "overflow-clip",
+        tbody: "divide-y divide-default"
+      }
+    },
     pinned: {
       true: {
         th: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
@@ -5512,16 +6006,21 @@ const tooltip = {
 const tree = (options) => ({
   slots: {
     root: "relative isolate",
-    item: "",
-    listWithChildren: "ms-4.5 border-s border-default",
+    item: "w-full",
+    listWithChildren: "border-s border-default",
     itemWithChildren: "ps-1.5 -ms-px",
-    link: "relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
-    linkLeadingIcon: "shrink-0",
+    link: "relative group w-full flex items-center text-sm select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    linkLeadingIcon: "shrink-0 relative",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-[expanded=true]:rotate-180"
+    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
   },
   variants: {
+    virtualize: {
+      true: {
+        root: "overflow-y-auto"
+      }
+    },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         link: `focus-visible:before:ring-${color}`
@@ -5532,26 +6031,31 @@ const tree = (options) => ({
     },
     size: {
       xs: {
+        listWithChildren: "ms-4",
         link: "px-2 py-1 text-xs gap-1",
         linkLeadingIcon: "size-4",
         linkTrailingIcon: "size-4"
       },
       sm: {
+        listWithChildren: "ms-4.5",
         link: "px-2.5 py-1.5 text-xs gap-1.5",
         linkLeadingIcon: "size-4",
         linkTrailingIcon: "size-4"
       },
       md: {
+        listWithChildren: "ms-5",
         link: "px-2.5 py-1.5 text-sm gap-1.5",
         linkLeadingIcon: "size-5",
         linkTrailingIcon: "size-5"
       },
       lg: {
+        listWithChildren: "ms-5.5",
         link: "px-3 py-2 text-sm gap-2",
         linkLeadingIcon: "size-5",
         linkTrailingIcon: "size-5"
       },
       xl: {
+        listWithChildren: "ms-6",
         link: "px-3 py-2 text-base gap-2",
         linkLeadingIcon: "size-6",
         linkTrailingIcon: "size-6"
@@ -5560,9 +6064,6 @@ const tree = (options) => ({
     selected: {
       true: {
         link: "before:bg-elevated"
-      },
-      false: {
-        link: ["hover:not-disabled:text-highlighted hover:not-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"]
       }
     },
     disabled: {
@@ -5583,6 +6084,12 @@ const tree = (options) => ({
     class: {
       link: "text-highlighted"
     }
+  }, {
+    selected: false,
+    disabled: false,
+    class: {
+      link: ["hover:text-highlighted hover:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"]
+    }
   }],
   defaultVariants: {
     color: "primary",
@@ -5717,6 +6224,7 @@ const theme = {
   dashboardToolbar: dashboardToolbar,
   drawer: drawer,
   dropdownMenu: dropdownMenu,
+  empty: empty,
   error: error,
   fieldGroup: fieldGroup$1,
   fileUpload: fileUpload,
@@ -5726,9 +6234,11 @@ const theme = {
   formField: formField,
   header: header,
   input: input,
+  inputDate: inputDate,
   inputMenu: inputMenu,
   inputNumber: inputNumber,
   inputTags: inputTags,
+  inputTime: inputTime,
   kbd: kbd$1,
   link: link,
   main: main,
@@ -5803,7 +6313,7 @@ const blockquote = {
 const callout = (options) => ({
   slots: {
     base: ["group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 [&>*]:last:!mb-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0", options.theme.transitions && "transition-colors"],
-    icon: ["size-4 shrink-0 align-sub me-1.5", options.theme.transitions && "transition-colors"],
+    icon: ["size-4 shrink-0 align-sub me-1.5 inline-block", options.theme.transitions && "transition-colors"],
     externalIcon: ["size-4 align-top absolute right-2 top-2 pointer-events-none", options.theme.transitions && "transition-colors"]
   },
   variants: {
@@ -6030,7 +6540,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=true]:rotate-180",
+    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-expanded: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: {
@@ -6119,7 +6629,8 @@ const img = {
   slots: {
     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"
+    content: "fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none",
+    zoomedImage: "w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md"
   },
   variants: {
     zoom: {
@@ -6445,7 +6956,16 @@ const contentSearch = {
 const contentSearchButton = {
   slots: {
     base: "",
+    label: "",
     trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
+  },
+  variants: {
+    collapsed: {
+      true: {
+        label: "hidden",
+        trailing: "lg:hidden"
+      }
+    }
   }
 };
 
@@ -6550,10 +7070,11 @@ const themeContent = {
   contentToc: contentToc
 };
 
-function getTemplates(options, uiConfig, nuxt) {
+function getTemplates(options, uiConfig, nuxt, resolve) {
   const templates = [];
   let hasProse = false;
   let hasContent = false;
+  let previousDetectedComponents;
   function writeThemeTemplate(theme2, path) {
     for (const component in theme2) {
       templates.push({
@@ -6561,13 +7082,9 @@ function getTemplates(options, uiConfig, nuxt) {
         write: true,
         getContents: async () => {
           const template = theme2[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;
-          }
+          let result = typeof template === "function" ? template(options) : template;
+          result = applyDefaultVariants(result, options.theme?.defaultVariants);
+          result = applyPrefixToObject(result, options.theme?.prefix);
           const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
             const keys = Object.keys(values);
             return keys.some((key) => key !== "true" && key !== "false");
@@ -6609,10 +7126,67 @@ function getTemplates(options, uiConfig, nuxt) {
     writeThemeTemplate(themeContent, "content");
   }
   writeThemeTemplate(theme);
+  async function generateSources() {
+    let sources = "";
+    if (!!nuxt && !!resolve && options.experimental?.componentDetection) {
+      const dirs = [.../* @__PURE__ */ new Set([
+        nuxt.options.rootDir,
+        ...nuxt.options._layers?.map((layer) => layer.config.rootDir).filter(Boolean) || []
+      ])];
+      const detectedComponents = await detectUsedComponents(
+        dirs,
+        options.prefix,
+        resolve("./runtime/components"),
+        Array.isArray(options.experimental.componentDetection) ? options.experimental.componentDetection : void 0
+      );
+      if (detectedComponents && detectedComponents.size > 0) {
+        if (previousDetectedComponents) {
+          const newComponents = Array.from(detectedComponents).filter(
+            (component) => !previousDetectedComponents.has(component)
+          );
+          if (newComponents.length > 0) {
+            logger.success(`Nuxt UI detected new components: ${newComponents.join(", ")}`);
+          }
+        } else {
+          logger.success(`Nuxt UI detected ${detectedComponents.size} components in use (including dependencies)`);
+        }
+        previousDetectedComponents = detectedComponents;
+        const sourcesList = [];
+        if (hasProse) {
+          sourcesList.push('@source "./ui/prose";');
+        }
+        for (const component of detectedComponents) {
+          const kebabComponent = kebabCase(component);
+          const camelComponent = camelCase(component);
+          if (hasContent && themeContent[camelComponent]) {
+            sourcesList.push(`@source "./ui/content/${kebabComponent}.ts";`);
+          } else if (theme[camelComponent]) {
+            sourcesList.push(`@source "./ui/${kebabComponent}.ts";`);
+          }
+        }
+        sources = sourcesList.join("\n");
+      } else {
+        if (!previousDetectedComponents || previousDetectedComponents.size > 0) {
+          logger.info("Nuxt UI detected no components in use, including all components");
+        }
+        previousDetectedComponents = /* @__PURE__ */ new Set();
+      }
+    }
+    return sources || '@source "./ui";';
+  }
   templates.push({
     filename: "ui.css",
     write: true,
-    getContents: () => `@source "./ui";
+    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 {
   --color-old-neutral-50: ${colors.neutral[50]};
@@ -6677,22 +7251,17 @@ function getTemplates(options, uiConfig, nuxt) {
   --fill-default: var(--ui-border);
   --fill-inverted: var(--ui-border-inverted);
 }
-`
+`;
+    }
   });
   templates.push({
     filename: "ui/index.ts",
     write: true,
-    getContents: () => {
-      let contents = Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n");
-      if (hasContent) {
-        contents += "\n";
-        contents += Object.keys(themeContent).map((component) => `export { default as ${component} } from './content/${kebabCase(component)}'`).join("\n");
-      }
-      if (hasProse) contents += `
-export * as prose from './prose'
-`;
-      return contents;
-    }
+    getContents: () => [
+      ...Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`),
+      ...hasContent ? Object.keys(themeContent).map((component) => `export { default as ${component} } from './content/${kebabCase(component)}'`) : [],
+      ...hasProse ? [`export * as prose from './prose'`] : []
+    ].join("\n")
   });
   templates.push({
     filename: "types/ui.d.ts",
@@ -6715,6 +7284,7 @@ type AppConfigUI = {
     neutral?: NeutralColor | (string & {})
   }
   icons?: Partial<IconsConfig>
+  prefix?: string
   tv?: typeof defaultConfig
 } & TVConfig<typeof ui>
 
@@ -6743,7 +7313,7 @@ export {}
   return templates;
 }
 function addTemplates(options, nuxt, resolve) {
-  const templates = getTemplates(options, nuxt.options.appConfig.ui, nuxt);
+  const templates = getTemplates(options, nuxt.options.appConfig.ui, nuxt, resolve);
   for (const template of templates) {
     if (template.filename.endsWith(".d.ts")) {
       addTypeTemplate(template);
@@ -6754,6 +7324,13 @@ function addTemplates(options, nuxt, resolve) {
   nuxt.hook("prepare:types", ({ references }) => {
     references.push({ path: resolve("./runtime/types/app.config.d.ts") });
   });
+  if (options.experimental?.componentDetection && nuxt.options.dev) {
+    nuxt.hook("builder:watch", async (_, path) => {
+      if (/\.(?:vue|ts|js|tsx|jsx)$/.test(path)) {
+        await updateTemplates({ filter: (template) => template.filename === "ui.css" });
+      }
+    });
+  }
 }
 
-export { getDefaultUiConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g, resolveColors as r };
+export { getDefaultConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g, resolveColors as r };