@nuxt/ui 4.8.2 → 4.10.0

package/dist/runtime/components/PageLogos.vue

@@ -25,7 +25,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("pageLogos", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageLogos || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageLogos || {} })());
 </script>
 
 <template>
@@ -50,7 +50,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageLogos ||
     </template>
   </DefineCreateItemTemplate>
 
-  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <h2 v-if="props.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
       {{ props.title }}
     </h2>

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-logos';
-import type { MarqueeProps } from '../types';
+import type { MarqueeProps } from './Marquee.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageLogos = ComponentConfig<typeof theme, AppConfig, 'pageLogos'>;
 type PageLogosItem = {

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-section';
-import type { ButtonProps, IconProps, PageFeatureProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { PageFeatureProps } from './PageFeature.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>;
 export interface PageSectionProps {
@@ -62,8 +64,8 @@ export interface PageSectionSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSectionProps> & Readonly<{}>, {
-    as: any;
     orientation: PageSection["variants"]["orientation"];
+    as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageSectionSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/PageSection.vue

@@ -30,7 +30,7 @@ const slots = defineSlots();
 const props = useComponentProps("pageSection", _props);
 const appConfig = useAppConfig();
 const prefix = usePrefix();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageSection || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pageSection || {} })({
   orientation: props.orientation,
   reverse: props.reverse,
   title: !!props.title || !!slots.title,

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/page-section';
-import type { ButtonProps, IconProps, PageFeatureProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { PageFeatureProps } from './PageFeature.vue';
 import type { ComponentConfig } from '../types/tv';
 type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>;
 export interface PageSectionProps {
@@ -62,8 +64,8 @@ export interface PageSectionSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSectionProps> & Readonly<{}>, {
-    as: any;
     orientation: PageSection["variants"]["orientation"];
+    as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageSectionSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -2,7 +2,8 @@ import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pagination';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>;
 export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
@@ -104,8 +105,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Pagina
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
-    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
-    activeColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    activeColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     itemsPerPage: number;

package/dist/runtime/components/Pagination.vue

@@ -46,7 +46,7 @@ const firstIcon = computed(() => props.firstIcon || (dir.value === "rtl" ? appCo
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
 const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
 const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pagination || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pagination || {} })());
 </script>
 
 <template>

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

@@ -2,7 +2,8 @@ import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pagination';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>;
 export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
@@ -104,8 +105,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Pagina
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
-    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
-    activeColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    activeColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     itemsPerPage: number;

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

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pin-input';
@@ -33,6 +33,13 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     highlight?: boolean;
     /** Keep the mobile text size on all breakpoints. */
     fixed?: boolean;
+    /**
+     * Group inputs by inserting a separator between them.
+     * Pass a number to insert one after every Nth input, or an array of positions to insert after specific inputs.
+     * @example 3 // after every 3rd input → [X][X][X] • [X][X][X]
+     * @example [3, 4] // after the 3rd and 4th inputs → [X][X][X] • [X] • [X][X][X]
+     */
+    separator?: number | number[];
     class?: any;
     ui?: PinInput['slots'];
 }
@@ -40,6 +47,11 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [event: Event];
     blur: [event: Event];
 };
+export interface PinInputSlots {
+    separator?(props: {
+        index: number;
+    }): VNode[];
+}
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -55,10 +67,10 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
         inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
-    slots: {};
+    slots: PinInputSlots;
     emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/PinInput.vue

@@ -22,6 +22,7 @@ const _props = defineProps({
   autofocusDelay: { type: Number, required: false, default: 0 },
   highlight: { type: Boolean, required: false },
   fixed: { type: Boolean, required: false },
+  separator: { type: [Number, Array], required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   defaultValue: { type: null, required: false },
@@ -36,11 +37,12 @@ const _props = defineProps({
   type: { type: null, required: false, default: "text" }
 });
 const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+defineSlots();
 const props = useComponentProps("pinInput", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
 const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pinInput || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pinInput || {} })({
   color: color.value ?? props.color,
   variant: props.variant,
   size: size.value ?? props.size,
@@ -68,6 +70,20 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+function shouldInsertSeparator(index) {
+  if (props.separator === void 0) {
+    return false;
+  }
+  const position = index + 1;
+  if (position >= looseToNumber(props.length)) {
+    return false;
+  }
+  if (Array.isArray(props.separator)) {
+    return props.separator.includes(position);
+  }
+  const separator = looseToNumber(props.separator);
+  return Number.isInteger(separator) && separator > 0 && position % separator === 0;
+}
 onMounted(() => {
   setTimeout(() => {
     autoFocus();
@@ -91,16 +107,25 @@ defineExpose({
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >
-    <PinInputInput
-      v-for="(ids, index) in looseToNumber(props.length)"
-      :key="ids"
-      :ref="(el) => setInputRef(index, el)"
-      :index="index"
-      data-slot="base"
-      :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
+    <template v-for="(ids, index) in looseToNumber(props.length)" :key="ids">
+      <PinInputInput
+        :ref="(el) => setInputRef(index, el)"
+        :index="index"
+        data-slot="base"
+        :class="ui.base({ class: props.ui?.base })"
+        :disabled="disabled"
+        @blur="onBlur"
+        @focus="emitFormFocus"
+      />
+      <span
+        v-if="shouldInsertSeparator(index)"
+        data-slot="separator"
+        role="presentation"
+        aria-hidden="true"
+        :class="ui.separator({ class: props.ui?.separator })"
+      >
+        <slot name="separator" :index="index">•</slot>
+      </span>
+    </template>
   </PinInputRoot>
 </template>

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

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pin-input';
@@ -33,6 +33,13 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     highlight?: boolean;
     /** Keep the mobile text size on all breakpoints. */
     fixed?: boolean;
+    /**
+     * Group inputs by inserting a separator between them.
+     * Pass a number to insert one after every Nth input, or an array of positions to insert after specific inputs.
+     * @example 3 // after every 3rd input → [X][X][X] • [X][X][X]
+     * @example [3, 4] // after the 3rd and 4th inputs → [X][X][X] • [X] • [X][X][X]
+     */
+    separator?: number | number[];
     class?: any;
     ui?: PinInput['slots'];
 }
@@ -40,6 +47,11 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [event: Event];
     blur: [event: Event];
 };
+export interface PinInputSlots {
+    separator?(props: {
+        index: number;
+    }): VNode[];
+}
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -55,10 +67,10 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
         inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
-    slots: {};
+    slots: PinInputSlots;
     emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -7,7 +7,7 @@ import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Popover = ComponentConfig<typeof theme, AppConfig, 'popover'>;
 type PopoverMode = 'click' | 'hover';
-export interface PopoverProps<M extends PopoverMode = PopoverMode> extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+export interface PopoverProps<M extends PopoverMode = PopoverMode> extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay' | 'enableTouch'> {
     /**
      * The display mode of the popover.
      * @defaultValue 'click'
@@ -32,6 +32,8 @@ export interface PopoverProps<M extends PopoverMode = PopoverMode> extends Popov
     /**
      * The reference (or anchor) element that is being referred to for positioning.
      *
+     * Accepts an element or a virtual element (anything with `getBoundingClientRect`),
+     * and can be changed reactively to re-anchor the popover (e.g. for a guided tour).
      * If not provided will use the current component as anchor.
      */
     reference?: HoverCardTriggerProps['reference'];
@@ -62,17 +64,17 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<PopoverProps<M> & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onClose:prevent"?: (() => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: PopoverSlots<M>;
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "close:prevent") => void);
+    emit: ((evt: "close:prevent") => void) & ((evt: "update:open", value: boolean) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Popover.vue

@@ -28,13 +28,14 @@ const _props = defineProps({
   open: { type: Boolean, required: false },
   modal: { type: Boolean, required: false },
   openDelay: { type: Number, required: false, default: 0 },
-  closeDelay: { type: Number, required: false, default: 0 }
+  closeDelay: { type: Number, required: false, default: 0 },
+  enableTouch: { type: Boolean, required: false }
 });
 const emits = defineEmits(["close:prevent", "update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("popover", _props);
 const appConfig = useAppConfig();
-const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
+const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay", "enableTouch") : reactivePick(props, "defaultOpen", "open", "modal");
 const rootProps = useForwardProps(pick, emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
@@ -54,7 +55,7 @@ const contentEvents = computed(() => {
   };
 });
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.popover || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.popover || {} })({
   side: contentProps.value.side
 }));
 const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
@@ -62,7 +63,7 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 
 <template>
   <Component.Root v-slot="{ open, close }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default || !!props.reference" as-child :reference="props.reference" :class="props.class">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </Component.Trigger>
 
@@ -72,7 +73,7 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 
     <Component.Portal v-bind="portalProps">
       <FieldGroupReset>
-        <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
+        <Component.Content v-bind="contentProps" :reference="props.reference ?? props.content?.reference" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
           <slot name="content" v-bind="close ? { close } : {}" />
 
           <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />

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

@@ -7,7 +7,7 @@ import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Popover = ComponentConfig<typeof theme, AppConfig, 'popover'>;
 type PopoverMode = 'click' | 'hover';
-export interface PopoverProps<M extends PopoverMode = PopoverMode> extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+export interface PopoverProps<M extends PopoverMode = PopoverMode> extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay' | 'enableTouch'> {
     /**
      * The display mode of the popover.
      * @defaultValue 'click'
@@ -32,6 +32,8 @@ export interface PopoverProps<M extends PopoverMode = PopoverMode> extends Popov
     /**
      * The reference (or anchor) element that is being referred to for positioning.
      *
+     * Accepts an element or a virtual element (anything with `getBoundingClientRect`),
+     * and can be changed reactively to re-anchor the popover (e.g. for a guided tour).
      * If not provided will use the current component as anchor.
      */
     reference?: HoverCardTriggerProps['reference'];
@@ -62,17 +64,17 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<PopoverProps<M> & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onClose:prevent"?: (() => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: PopoverSlots<M>;
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "close:prevent") => void);
+    emit: ((evt: "close:prevent") => void) & ((evt: "update:open", value: boolean) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plan';
-import type { BadgeProps, ButtonProps, IconProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlan = ComponentConfig<typeof theme, AppConfig, 'pricingPlan'>;
 type PricingPlanFeature = {

package/dist/runtime/components/PricingPlan.vue

@@ -37,7 +37,7 @@ const slots = defineSlots();
 const props = useComponentProps("pricingPlan", _props);
 const appConfig = useAppConfig();
 const [DefinePriceTemplate, ReusePriceTemplate] = createReusableTemplate();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingPlan || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pricingPlan || {} })({
   orientation: props.orientation,
   variant: props.variant,
   highlight: props.highlight,
@@ -75,7 +75,7 @@ const features = computed(() => props.features?.map((feature) => typeof feature
     </div>
   </DefinePriceTemplate>
 
-  <Primitive :as="props.as" v-bind="$attrs" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" v-bind="$attrs" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!!slots.header && props.orientation === 'vertical'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plan';
-import type { BadgeProps, ButtonProps, IconProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlan = ComponentConfig<typeof theme, AppConfig, 'pricingPlan'>;
 type PricingPlanFeature = {

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plans';
-import type { PricingPlanProps, PricingPlanSlots } from '../types';
+import type { PricingPlanProps, PricingPlanSlots } from './PricingPlan.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlans = ComponentConfig<typeof theme, AppConfig, 'pricingPlans'>;
 export interface PricingPlansProps {
@@ -51,7 +51,7 @@ declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullabl
     slots: PricingPlansSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/PricingPlans.vue

@@ -23,7 +23,7 @@ const slots = defineSlots();
 const props = useComponentProps("pricingPlans", _props);
 const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingPlans || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pricingPlans || {} }));
 const count = computed(() => props.plans?.length || slots.default?.()?.flatMap(mapSlot).filter(Boolean)?.length || 3);
 function mapSlot(slot) {
   if (typeof slot.type === "symbol") {

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plans';
-import type { PricingPlanProps, PricingPlanSlots } from '../types';
+import type { PricingPlanProps, PricingPlanSlots } from './PricingPlan.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlans = ComponentConfig<typeof theme, AppConfig, 'pricingPlans'>;
 export interface PricingPlansProps {
@@ -51,7 +51,7 @@ declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullabl
     slots: PricingPlansSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-table';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps } from './PricingPlan.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingTable = ComponentConfig<typeof theme, AppConfig, 'pricingTable'>;
 type DynamicSlots<T extends {
@@ -102,7 +102,7 @@ declare const __VLS_export: <T extends PricingTableTier>(__VLS_props: NonNullabl
     slots: PricingTableSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/PricingTable.vue

@@ -30,7 +30,7 @@ const formatSlotName = (item) => {
   if (item.id) return item.id;
   return item.title.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 };
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingTable || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pricingTable || {} })());
 const [DefineTierTemplate, ReuseTierTemplate] = createReusableTemplate({
   props: {
     tier: Object
@@ -135,7 +135,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
     <UIcon v-else :name="appConfig.ui.icons.minus" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon })" />
   </DefineFeatureTemplate>
 
-  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <table data-slot="table" :class="ui.table({ class: props.ui?.table })">
       <caption v-if="props.caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-table';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps } from './PricingPlan.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingTable = ComponentConfig<typeof theme, AppConfig, 'pricingTable'>;
 type DynamicSlots<T extends {
@@ -102,7 +102,7 @@ declare const __VLS_export: <T extends PricingTableTier>(__VLS_props: NonNullabl
     slots: PricingTableSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Progress.vue

@@ -102,7 +102,7 @@ function stepVariant(index) {
   }
   return "other";
 }
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progress || {} })({
   animation: props.animation,
   size: props.size,
   color: props.color,

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

@@ -98,7 +98,7 @@ declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/RadioGroup.vue

@@ -41,7 +41,7 @@ const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "loop", "required"), emits);
 const { emitFormChange, emitFormInput, color, name, size, highlight, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
 const id = _id.value ?? useId();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.radioGroup || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.radioGroup || {} })({
   size: size.value ?? props.size,
   color: color.value ?? props.color,
   highlight: highlight.value ?? props.highlight,

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

@@ -98,7 +98,7 @@ declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];