@nuxt/ui 3.1.0 → 3.1.2

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

@@ -3,15 +3,17 @@ import theme from "#build/ui/link";
 </script>
 
 <script setup>
-import { computed, getCurrentInstance } from "vue";
+import { computed } from "vue";
 import { defu } from "defu";
-import { isEqual, diff } from "ohash/utils";
+import { isEqual } from "ohash/utils";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { hasProtocol } from "ufo";
 import { useRoute, RouterLink } from "vue-router";
 import { useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
+import { isPartiallyEqual } from "../../utils/link";
+import ULinkBase from "../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
@@ -42,20 +44,9 @@ const props = defineProps({
   replace: { type: Boolean, required: false }
 });
 defineSlots();
-const hasRouter = computed(() => {
-  const app = getCurrentInstance()?.appContext.app;
-  return !!app?.config?.globalProperties?.$router;
-});
-const route = computed(() => {
-  if (!hasRouter.value) return null;
-  try {
-    return useRoute();
-  } catch {
-    return null;
-  }
-});
+const route = useRoute();
 const appConfig = useAppConfig();
-const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "raw", "class"));
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
@@ -67,34 +58,29 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.link || {})
 }));
-function isPartiallyEqual(item1, item2) {
-  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === "added") {
-      filtered.add(q.key);
-    }
-    return filtered;
-  }, /* @__PURE__ */ new Set());
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
-  return isEqual(item1Filtered, item2Filtered);
-}
+const to = computed(() => props.to ?? props.href);
 const isExternal = computed(() => {
-  if (!props.to) return false;
-  return typeof props.to === "string" && hasProtocol(props.to, { acceptRelative: true });
+  if (props.external) {
+    return true;
+  }
+  if (!to.value) {
+    return false;
+  }
+  return typeof to.value === "string" && hasProtocol(to.value, { acceptRelative: true });
 });
 function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
   if (props.active !== void 0) {
     return props.active;
   }
-  if (!props.to || !route.value) {
+  if (!to.value) {
     return false;
   }
   if (props.exactQuery === "partial") {
-    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false;
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false;
   } else if (props.exactQuery === true) {
-    if (!isEqual(linkRoute.query, route.value.query)) return false;
+    if (!isEqual(linkRoute.query, route.query)) return false;
   }
-  if (props.exactHash && linkRoute.hash !== route.value.hash) {
+  if (props.exactHash && linkRoute.hash !== route.hash) {
     return false;
   }
   if (props.exact && isExactActive) {
@@ -115,8 +101,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
 </script>
 
 <template>
-  <template v-if="hasRouter && !isExternal">
-    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+  <template v-if="!isExternal && !!to">
+    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
       <template v-if="custom">
         <slot
           v-bind="{
@@ -125,7 +111,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   as,
   type,
   disabled,
-  href: to ? href : void 0,
+  href,
   navigate,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
 }"
@@ -139,7 +125,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   as,
   type,
   disabled,
-  href: to ? href : void 0,
+  href,
   navigate
 }"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
@@ -159,7 +145,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   disabled,
   href: to,
   target: isExternal ? '_blank' : void 0,
-  active: false
+  active,
+  isExternal
 }"
       />
     </template>
@@ -171,12 +158,12 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   type,
   disabled,
   href: to,
-  target: isExternal ? '_blank' : void 0
+  target: isExternal ? '_blank' : void 0,
+  isExternal
 }"
-      :is-external="isExternal"
       :class="resolveLinkClass()"
     >
-      <slot :active="false" />
+      <slot :active="active" />
     </ULinkBase>
   </template>
 </template>

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

@@ -77,48 +77,17 @@ export interface LinkSlots {
         active: boolean;
     }): any;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkProps>, {
-    as: string;
-    type: string;
-    ariaCurrentValue: string;
-    active: undefined;
-    activeClass: string;
-    inactiveClass: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkProps>, {
-    as: string;
-    type: string;
-    ariaCurrentValue: string;
-    active: undefined;
-    activeClass: string;
-    inactiveClass: string;
-}>>> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     type: "reset" | "submit" | "button";
     as: any;
     activeClass: string;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     active: boolean;
     inactiveClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<LinkSlots> & LinkSlots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/runtime/vue/composables/useAppConfig.js

@@ -1,2 +1,4 @@
+import { reactive } from "vue";
 import appConfig from "#build/app.config";
-export const useAppConfig = () => appConfig;
+const _appConfig = reactive(appConfig);
+export const useAppConfig = () => _appConfig;

package/dist/runtime/vue/stubs.d.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 import type { NuxtApp } from '#app';
 export { useHead } from '@unhead/vue';
 export { useRoute, useRouter } from 'vue-router';
+export { useAppConfig } from './composables/useAppConfig';
 export { defineShortcuts } from '../composables/defineShortcuts';
 export { defineLocale } from '../composables/defineLocale';
 export { useLocale } from '../composables/useLocale';
@@ -14,7 +15,6 @@ export declare const useColorMode: () => {
     readonly value: import("@vueuse/core").BasicColorMode;
     forced: boolean;
 };
-export declare const useAppConfig: () => any;
 export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
     value: Ref<T, T>;
     get: () => T;

package/dist/runtime/vue/stubs.js

@@ -4,6 +4,7 @@ import appConfig from "#build/app.config";
 import { useColorMode as useColorModeVueUse } from "@vueuse/core";
 export { useHead } from "@unhead/vue";
 export { useRoute, useRouter } from "vue-router";
+export { useAppConfig } from "./composables/useAppConfig.js";
 export { defineShortcuts } from "../composables/defineShortcuts.js";
 export { defineLocale } from "../composables/defineLocale.js";
 export { useLocale } from "../composables/useLocale.js";
@@ -27,7 +28,6 @@ export const useColorMode = () => {
     forced: false
   };
 };
-export const useAppConfig = () => appConfig;
 export const useCookie = (_name, _options = {}) => {
   const value = ref(null);
   return {

package/dist/shared/{ui.D7lOOabO.mjs → ui.BvUP-pSb.mjs}

@@ -4,6 +4,7 @@ import { kebabCase } from 'scule';
 import { addTypeTemplate, addTemplate } from '@nuxt/kit';
 import { defuFn, defu } from 'defu';
 import colors from 'tailwindcss/colors';
+import { genExport } from 'knitwork';
 
 const icons = {
   arrowLeft: "i-lucide-arrow-left",
@@ -252,18 +253,18 @@ const avatarGroup = {
 
 const buttonGroupVariant = {
   buttonGroup: {
-    horizontal: "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
-    vertical: "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
+    horizontal: "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]",
+    vertical: "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]"
   }
 };
 const buttonGroupVariantWithRoot = {
   buttonGroup: {
     horizontal: {
-      root: "group",
+      root: "group has-focus-visible:z-[1]",
       base: "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
     },
     vertical: {
-      root: "group",
+      root: "group has-focus-visible:z-[1]",
       base: "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
     }
   }
@@ -337,6 +338,9 @@ const badge = (options) => ({
         leadingAvatarSize: "2xs",
         trailingIcon: "size-6"
       }
+    },
+    square: {
+      true: ""
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -371,6 +375,26 @@ const badge = (options) => ({
     color: "neutral",
     variant: "subtle",
     class: "ring ring-inset ring-accented text-default bg-elevated"
+  }, {
+    size: "xs",
+    square: true,
+    class: "p-0.5"
+  }, {
+    size: "sm",
+    square: true,
+    class: "p-1"
+  }, {
+    size: "md",
+    square: true,
+    class: "p-1"
+  }, {
+    size: "lg",
+    square: true,
+    class: "p-1"
+  }, {
+    size: "xl",
+    square: true,
+    class: "p-1"
   }],
   defaultVariants: {
     color: "primary",
@@ -598,7 +622,7 @@ const calendar = (options) => ({
     body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
     heading: "text-center font-medium truncate mx-auto",
     grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
-    gridRow: "grid grid-cols-7",
+    gridRow: "grid grid-cols-7 place-items-center",
     gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
     gridBody: "grid",
     headCell: "rounded-md",
@@ -613,7 +637,7 @@ const calendar = (options) => ({
       }])),
       neutral: {
         headCell: "text-highlighted",
-        cellTrigger: "focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-inverted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
+        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"
       }
     },
     size: {
@@ -841,7 +865,7 @@ const checkbox = (options) => ({
   }
 });
 
-const checkboxGroup = {
+const checkboxGroup = (options) => ({
   slots: {
     root: "relative",
     fieldset: "flex gap-x-2",
@@ -857,6 +881,17 @@ const checkboxGroup = {
         fieldset: "flex-col"
       }
     },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {}])),
+      neutral: {}
+    },
+    variant: {
+      list: {},
+      card: {},
+      table: {
+        item: "border border-muted"
+      }
+    },
     size: {
       xs: {
         fieldset: "gap-y-0.5",
@@ -885,10 +920,56 @@ const checkboxGroup = {
       }
     }
   },
+  compoundVariants: [
+    { size: "xs", variant: "table", class: { item: "p-2.5" } },
+    { size: "sm", variant: "table", class: { item: "p-3" } },
+    { size: "md", variant: "table", class: { item: "p-3.5" } },
+    { size: "lg", variant: "table", class: { item: "p-4" } },
+    { size: "xl", variant: "table", class: { item: "p-4.5" } },
+    {
+      orientation: "horizontal",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        fieldset: "gap-0 -space-x-px"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
+        fieldset: "gap-0 -space-y-px"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "table",
+      class: {
+        item: `has-data-[state=checked]:bg-${color}/10 has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:z-[1]`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "table",
+      class: {
+        item: "has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      variant: "table",
+      disabled: true,
+      class: {
+        item: "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
   defaultVariants: {
-    size: "md"
+    size: "md",
+    variant: "list",
+    color: "primary"
   }
-};
+});
 
 const chip = (options) => ({
   slots: {
@@ -959,10 +1040,10 @@ const colorPicker = {
   slots: {
     root: "data-[disabled]:opacity-75",
     picker: "flex gap-4",
-    selector: "rounded-md",
+    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",
-    track: "w-[8px] relative rounded-md",
+    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"
   },
   variants: {
@@ -1668,6 +1749,7 @@ const inputNumber = (options) => {
       decrement: "absolute flex items-center"
     },
     variants: {
+      ...buttonGroupVariantWithRoot,
       color: {
         ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
         neutral: ""
@@ -1793,12 +1875,17 @@ const link = (options) => ({
   variants: {
     active: {
       true: "text-primary",
-      false: ["text-muted hover:text-default", options.theme.transitions && "transition-colors"]
+      false: "text-muted"
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
     }
-  }
+  },
+  compoundVariants: [{
+    active: false,
+    disabled: false,
+    class: ["hover:text-default", options.theme.transitions && "transition-colors"]
+  }]
 });
 
 const modal = {
@@ -1858,7 +1945,7 @@ const navigationMenu = (options) => ({
     separator: "px-2 h-px bg-border",
     viewportWrapper: "absolute top-full left-0 flex w-full",
     viewport: "relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]",
-    content: "absolute top-0 left-0 w-full sm:w-auto",
+    content: "absolute top-0 left-0 w-full",
     indicator: "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
     arrow: "relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"
   },
@@ -3229,7 +3316,7 @@ const tabs = (options) => ({
     root: "flex items-center gap-2",
     list: "relative flex p-1 group",
     indicator: "absolute transition-[translate,width] duration-200",
-    trigger: ["group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    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",
@@ -3244,12 +3331,13 @@ const tabs = (options) => ({
     variant: {
       pill: {
         list: "bg-elevated rounded-lg",
-        trigger: "flex-1 w-full",
+        trigger: "grow",
         indicator: "rounded-md shadow-xs"
       },
       link: {
         list: "border-default",
-        indicator: "rounded-full"
+        indicator: "rounded-full",
+        trigger: "focus:outline-none"
       }
     },
     orientation: {
@@ -3664,7 +3752,7 @@ function getTemplates(options, uiConfig) {
           });
         }
         function generateVariantDeclarations(variants2) {
-          return variants2.map((variant) => {
+          return variants2.filter((variant) => json.includes(`as typeof ${variant}`)).map((variant) => {
             const keys = Object.keys(result.variants[variant]);
             return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
           });
@@ -3681,7 +3769,7 @@ function getTemplates(options, uiConfig) {
     write: true,
     getContents: () => `@source "./ui";
 
-@theme default {
+@theme default inline {
   --color-old-neutral-50: ${colors.neutral[50]};
   --color-old-neutral-100: ${colors.neutral[100]};
   --color-old-neutral-200: ${colors.neutral[200]};
@@ -3693,10 +3781,8 @@ function getTemplates(options, uiConfig) {
   --color-old-neutral-800: ${colors.neutral[800]};
   --color-old-neutral-900: ${colors.neutral[900]};
   --color-old-neutral-950: ${colors.neutral[950]};
-  ${[...(options.theme?.colors || []).filter((color) => !colors[color]), "neutral"].map((color) => [
-      color !== "neutral" && `--color-${color}: var(--ui-${color});`,
-      ...[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`)
-    ].filter(Boolean).join("\n	")).join("\n	")}
+  ${[...(options.theme?.colors || []).filter((color) => !colors[color]), "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
+  ${options.theme?.colors?.map((color) => `--color-${color}: var(--ui-${color});`).join("\n	")}
   --radius-xs: calc(var(--ui-radius) * 0.5);
   --radius-sm: var(--ui-radius);
   --radius-md: calc(var(--ui-radius) * 1.5);
@@ -3720,15 +3806,22 @@ function getTemplates(options, uiConfig) {
   --border-color-muted: var(--ui-border-muted);
   --border-color-accented: var(--ui-border-accented);
   --border-color-inverted: var(--ui-border-inverted);
+  --border-color-bg: var(--ui-bg);
   --ring-color-default: var(--ui-border);
   --ring-color-muted: var(--ui-border-muted);
   --ring-color-accented: var(--ui-border-accented);
   --ring-color-inverted: var(--ui-border-inverted);
   --ring-color-bg: var(--ui-bg);
+  --ring-offset-color-default: var(--ui-border);
+  --ring-offset-color-muted: var(--ui-border-muted);
+  --ring-offset-color-accented: var(--ui-border-accented);
+  --ring-offset-color-inverted: var(--ui-border-inverted);
+  --ring-offset-color-bg: var(--ui-bg);
   --divide-color-default: var(--ui-border);
   --divide-color-muted: var(--ui-border-muted);
   --divide-color-accented: var(--ui-border-accented);
   --divide-color-inverted: var(--ui-border-inverted);
+  --divide-color-bg: var(--ui-bg);
   --outline-color-default: var(--ui-border);
   --outline-color-inverted: var(--ui-border-inverted);
   --stroke-default: var(--ui-border);
@@ -3746,7 +3839,7 @@ function getTemplates(options, uiConfig) {
   templates.push({
     filename: "types/ui.d.ts",
     getContents: () => `import * as ui from '#build/ui'
-import type { DeepPartial } from '@nuxt/ui'
+import type { TVConfig } from '@nuxt/ui'
 import type { defaultConfig } from 'tailwind-variants'
 import colors from 'tailwindcss/colors'
 
@@ -3762,7 +3855,7 @@ type AppConfigUI = {
   }
   icons?: Partial<typeof icons>
   tv?: typeof defaultConfig
-} & DeepPartial<typeof ui>
+} & TVConfig<typeof ui>
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
@@ -3781,8 +3874,8 @@ export {}
     filename: "ui-image-component.ts",
     write: true,
     getContents: ({ app }) => {
-      const image = app?.components?.find((c) => c.pascalName === "NuxtImg" && !c.filePath.includes("nuxt/dist/app"));
-      return image ? `export { default } from "${image.filePath}"` : 'export default "img"';
+      const image = app?.components?.find((c) => c.pascalName === "NuxtImg" && !/nuxt(?:-nightly)?\/dist\/app/.test(c.filePath));
+      return image ? genExport(image.filePath, [{ name: image.export, as: "default" }]) : 'export default "img"';
     }
   });
   return templates;

package/dist/unplugin.d.mts

@@ -4,7 +4,7 @@ import { Options as Options$1 } from 'unplugin-vue-components/types';
 import colors from 'tailwindcss/colors';
 import * as ui from '#build/ui';
 import { ModuleOptions } from './module.mjs';
-import { DeepPartial } from '../dist/runtime/types/utils.js';
+import { TVConfig } from '../dist/runtime/types/tv.js';
 import '@nuxt/schema';
 import '../dist/runtime/types/index.js';
 
@@ -36,7 +36,7 @@ type AppConfigUI = {
         neutral?: NeutralColor;
     };
     icons?: Partial<typeof _default>;
-} & DeepPartial<typeof ui>;
+} & TVConfig<typeof ui>;
 interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'> {
     /** Whether to generate declaration files for auto-imported components. */
     dts?: boolean;

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.D7lOOabO.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.BvUP-pSb.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';

package/dist/vite.d.mts

@@ -8,7 +8,7 @@ import '#build/ui';
 import './module.mjs';
 import '@nuxt/schema';
 import '../dist/runtime/types/index.js';
-import '../dist/runtime/types/utils.js';
+import '../dist/runtime/types/tv.js';
 
 declare const _default: (options?: NuxtUIOptions | undefined) => vite.Plugin<any> | vite.Plugin<any>[];
 

package/dist/vite.mjs

@@ -4,13 +4,13 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.D7lOOabO.mjs';
+import './shared/ui.BvUP-pSb.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';
 import 'tailwindcss/colors';
-import 'tinyglobby';
 import 'knitwork';
+import 'tinyglobby';
 import 'magic-string';
 import 'mlly';
 import 'unplugin-vue-components';