@nuxt/ui 4.8.2 → 4.10.0

package/dist/runtime/components/InputRating.vue

@@ -0,0 +1,109 @@
+<script>
+import theme from "#build/ui/input-rating";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { RatingRoot, RatingItem, RatingItemIndicator } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
+import { useFormField } from "../composables/useFormField";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const _props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  readonly: { type: Boolean, required: false, default: false },
+  icon: { type: null, required: false },
+  emptyIcon: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  length: { type: Number, required: false, default: 5 },
+  step: { type: Number, required: false, default: 1 },
+  name: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  clearable: { type: Boolean, required: false, default: false },
+  hoverable: { type: Boolean, required: false, default: false },
+  modelValue: { type: Number, required: false },
+  defaultValue: { type: Number, required: false, default: 0 }
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+defineSlots();
+const props = useComponentProps("inputRating", _props);
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "as", "length", "step", "hoverable", "clearable", "required", "modelValue", "defaultValue"), emits);
+const { id, emitFormChange, emitFormInput, size, color, name, disabled: formDisabled, ariaAttrs } = useFormField(_props);
+const disabled = computed(() => formDisabled.value || props.readonly);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputRating || {} })({
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
+  orientation: props.orientation,
+  readonly: props.readonly && !formDisabled.value,
+  disabled: formDisabled.value
+}));
+const starIcon = computed(() => props.icon ?? appConfig.ui.icons.star);
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+</script>
+
+<template>
+  <RatingRoot
+    :id="id"
+    v-slot="{ items }"
+    data-slot="root"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    :name="name"
+    :disabled="disabled"
+    :aria-readonly="props.readonly || void 0"
+    :orientation="props.orientation"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @update:model-value="onUpdate"
+  >
+    <RatingItem
+      v-for="item in items"
+      v-slot="{ steps }"
+      :key="item"
+      :item="item"
+      data-slot="item"
+      :class="ui.item({ class: props.ui?.item })"
+    >
+      <!-- Empty icon as background -->
+      <slot name="item" :index="item" :filled="false">
+        <UIcon
+          :name="props.emptyIcon ?? starIcon"
+          data-slot="emptyIcon"
+          :class="ui.emptyIcon({ class: props.ui?.emptyIcon })"
+        />
+      </slot>
+
+      <!-- Indicators overlaid for each step, clipped to the rated fraction -->
+      <RatingItemIndicator
+        v-for="step in steps"
+        :key="step"
+        :step="step"
+        :aria-label="`Rate ${step} out of ${props.length}`"
+        data-slot="indicator"
+        :class="ui.indicator({ class: props.ui?.indicator })"
+      >
+        <slot name="item" :index="item" :filled="true">
+          <UIcon
+            :name="starIcon"
+            data-slot="icon"
+            :class="ui.icon({ class: props.ui?.icon })"
+          />
+        </slot>
+      </RatingItemIndicator>
+    </RatingItem>
+  </RatingRoot>
+</template>

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

@@ -0,0 +1,79 @@
+import type { VNode } from 'vue';
+import type { RatingRootProps, RatingRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/input-rating';
+import type { IconProps } from './Icon.vue';
+import type { ComponentConfig } from '../types/tv';
+type InputRating = ComponentConfig<typeof theme, AppConfig, 'inputRating'>;
+export interface InputRatingProps extends Pick<RatingRootProps, 'length' | 'step' | 'name' | 'disabled' | 'required' | 'clearable' | 'hoverable' | 'modelValue' | 'defaultValue'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The id of the rating. */
+    id?: string;
+    /**
+     * Make the rating readonly (non-interactive).
+     * @defaultValue false
+     */
+    readonly?: boolean;
+    /**
+     * The icon displayed for each rating value.
+     * @defaultValue appConfig.ui.icons.star
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The icon displayed for empty rating values. Defaults to `icon` when not provided.
+     * @IconifyIcon
+     */
+    emptyIcon?: IconProps['name'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: InputRating['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: InputRating['variants']['size'];
+    /**
+     * The orientation of the rating.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: InputRating['variants']['orientation'];
+    class?: any;
+    ui?: InputRating['slots'];
+}
+export interface InputRatingEmits extends RatingRootEmits {
+    change: [event: Event];
+}
+export interface InputRatingSlots {
+    /** Rendered for each item. `filled` is `false` for the empty background layer and `true` for the highlighted overlay. */
+    item?(props: {
+        index: number;
+        filled: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputRatingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
+    "update:modelValue": (payload: number) => any;
+}, string, import("vue").PublicProps, Readonly<InputRatingProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: number) => any) | undefined;
+}>, {
+    length: number;
+    orientation: InputRating["variants"]["orientation"];
+    readonly: boolean;
+    step: 1 | 0.5 | 0.25 | 0.1;
+    defaultValue: number;
+    clearable: boolean;
+    hoverable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputRatingSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui';
 import theme from '#build/ui/input-tags';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>;
@@ -89,7 +89,7 @@ declare const __VLS_export: <T extends InputTagItem>(__VLS_props: NonNullable<Aw
     slots: InputTagsSlots<T>;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: 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/InputTags.vue

@@ -62,7 +62,7 @@ const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFi
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTags || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputTags || {} })({
   color: color.value ?? props.color,
   variant: props.variant,
   size: inputSize?.value ?? props.size,
@@ -112,7 +112,7 @@ defineExpose({
     v-slot="{ modelValue: tags }"
     :model-value="props.modelValue"
     :default-value="props.defaultValue"
-    data-slot="root"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
     v-bind="rootProps"
     :name="name"

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

@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui';
 import theme from '#build/ui/input-tags';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>;
@@ -89,7 +89,7 @@ declare const __VLS_export: <T extends InputTagItem>(__VLS_props: NonNullable<Aw
     slots: InputTagsSlots<T>;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: 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/InputTime.d.vue.ts

@@ -3,7 +3,7 @@ import type { TimeFieldRootEmits, TimeFieldRootProps, TimeRangeFieldRootEmits, T
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-time';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>;
 type InputTimeDefaultValue<R extends boolean = false> = R extends true ? TimeRangeFieldRootProps['defaultValue'] : TimeFieldRootProps['defaultValue'];
@@ -91,7 +91,7 @@ declare const __VLS_export: <R extends boolean>(__VLS_props: NonNullable<Awaited
     slots: InputTimeSlots;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", value: InputTimeModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: TimeValue] & [date: TimeValue]) => 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/InputTime.vue

@@ -66,7 +66,7 @@ const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, s
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTime || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputTime || {} })({
   color: color.value ?? props.color,
   variant: props.variant,
   size: inputSize.value ?? props.size,
@@ -130,14 +130,14 @@ defineExpose({
   </DefineSegmentsTemplate>
 
   <TimeField.Root
-    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :id="id"
     v-slot="{ segments }"
+    data-slot="base"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :name="name"
     :disabled="disabled"
     :model-value="props.modelValue"
     :default-value="props.defaultValue"
-    data-slot="base"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"

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

@@ -3,7 +3,7 @@ import type { TimeFieldRootEmits, TimeFieldRootProps, TimeRangeFieldRootEmits, T
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-time';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>;
 type InputTimeDefaultValue<R extends boolean = false> = R extends true ? TimeRangeFieldRootProps['defaultValue'] : TimeFieldRootProps['defaultValue'];
@@ -91,7 +91,7 @@ declare const __VLS_export: <R extends boolean>(__VLS_props: NonNullable<Awaited
     slots: InputTimeSlots;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", value: InputTimeModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: TimeValue] & [date: TimeValue]) => 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/Kbd.vue

@@ -22,7 +22,7 @@ defineSlots();
 const props = useComponentProps("kbd", _props);
 const { getKbdKey } = useKbd();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.kbd || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.kbd || {} }));
 </script>
 
 <template>

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

@@ -100,10 +100,11 @@ export interface LinkSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __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;
-    active: boolean;
+    type: "reset" | "submit" | "button";
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    active: boolean;
+    locale: boolean | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Link.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   inactiveClass: { type: String, required: false },
   custom: { type: Boolean, required: false },
   raw: { type: Boolean, required: false },
-  locale: { type: [Boolean, String], required: false },
+  locale: { type: [Boolean, String], required: false, default: void 0 },
   class: { type: null, required: false },
   to: { type: null, required: false },
   href: { type: null, required: false },
@@ -51,7 +51,7 @@ const appConfig = useAppConfig();
 const nuxtApp = useNuxtApp();
 const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "locale", "class"));
 const ui = computed(() => tv({
-  extend: tv(theme),
+  extend: theme,
   ...defu({
     variants: {
       active: {
@@ -80,7 +80,8 @@ const to = computed(() => {
   if (codes?.length && new RegExp(`^/(${codes.join("|")})($|[/?#])`).test(path)) {
     return path;
   }
-  return localePath(path, typeof props.locale === "string" ? props.locale : void 0);
+  const localizedPath = localePath(path, typeof props.locale === "string" ? props.locale : void 0);
+  return localizedPath || path;
 });
 const isInternalLink = computed(() => {
   if (!to.value) return false;
@@ -90,10 +91,17 @@ const isInternalLink = computed(() => {
   if (props.target && props.target !== "_self") return false;
   return true;
 });
-const externalRel = computed(() => {
-  if (props.noRel) return null;
-  if (props.rel) return props.rel;
-  return "noopener noreferrer";
+const rel = computed(() => {
+  if (props.noRel) {
+    return null;
+  }
+  if (props.rel !== void 0) {
+    return props.rel || null;
+  }
+  if (!isInternalLink.value || props.target && props.target !== "_self") {
+    return "noopener noreferrer";
+  }
+  return null;
 });
 function isLinkActive({ route: linkRoute, isActive, isExactActive } = {}) {
   if (props.active !== void 0) {
@@ -139,7 +147,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   disabled,
   href,
   navigate,
-  rel: rest.rel,
+  rel,
   target: rest.target,
   isExternal: rest.isExternal,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
@@ -156,7 +164,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   disabled,
   href,
   navigate,
-  rel: rest.rel,
+  rel,
   target: rest.target,
   isExternal: rest.isExternal
 }"
@@ -173,7 +181,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   as,
   type,
   disabled,
-  ...to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {},
+  ...to ? { href: String(to), target: props.target, rel, isExternal: true } : {},
   active: active ?? false
 }"
     />
@@ -185,7 +193,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   as,
   type,
   disabled,
-  ...to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {}
+  ...to ? { href: String(to), target: props.target, rel, isExternal: true } : {}
 }"
     :class="resolveLinkClass()"
   >

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

@@ -100,10 +100,11 @@ export interface LinkSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __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;
-    active: boolean;
+    type: "reset" | "submit" | "button";
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    active: boolean;
+    locale: boolean | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,9 +1,9 @@
-import type { LinkProps } from '../types';
+import type { LinkProps } from './Link.vue';
 export interface LinkBaseProps {
     as?: string;
     type?: string;
     disabled?: boolean;
-    onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
+    onClick?: ((e: MouseEvent) => void) | Array<((e: MouseEvent) => void)>;
     href?: string | null;
     navigate?: (e: MouseEvent) => void;
     target?: LinkProps['target'];
@@ -14,8 +14,8 @@ export interface LinkBaseProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
-    type: string;
     as: string;
+    type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

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

@@ -1,9 +1,9 @@
-import type { LinkProps } from '../types';
+import type { LinkProps } from './Link.vue';
 export interface LinkBaseProps {
     as?: string;
     type?: string;
     disabled?: boolean;
-    onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
+    onClick?: ((e: MouseEvent) => void) | Array<((e: MouseEvent) => void)>;
     href?: string | null;
     navigate?: (e: MouseEvent) => void;
     target?: LinkProps['target'];
@@ -14,8 +14,8 @@ export interface LinkBaseProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
-    type: string;
     as: string;
+    type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

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

@@ -2,7 +2,10 @@ import type { VNode } from 'vue';
 import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/listbox';
-import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ArrayOrNested, GetItemKeys, GetModelValue, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -164,6 +167,11 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         searchTerm?: string;
     }) & {
         onChange?: ((event: Event) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: import("reka-ui").AcceptableValue;
+        } | undefined) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Mod extends {
             number: true;
         } ? (Mod extends {
@@ -185,20 +193,18 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => any) | undefined;
-        onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: import("reka-ui").AcceptableValue;
-        } | undefined) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
-        onLeave?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ListboxSlots<T>;
-    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+    emit: (((evt: "change", event: Event) => void) & ((evt: "leave", event: Event) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => void) & ((evt: "update:modelValue", value: Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;
@@ -218,12 +224,9 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         nullable: true;
     } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
         nullable: true;
-    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "highlight", payload: {
-        ref: HTMLElement;
-        value: import("reka-ui").AcceptableValue;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void)) & ((event: "update:searchTerm", value: 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/Listbox.vue

@@ -82,7 +82,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.listbox || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.listbox || {} })({
   color: color.value ?? props.color,
   size: size.value ?? props.size,
   highlight: highlight.value ?? props.highlight,
@@ -194,10 +194,10 @@ const filteredItems = computed(() => filteredGroups.value.flatMap((group) => gro
 
   <ListboxRoot
     :id="id"
+    data-slot="root"
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :disabled="disabled"
     :name="name"
-    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >

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

@@ -2,7 +2,10 @@ import type { VNode } from 'vue';
 import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/listbox';
-import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ArrayOrNested, GetItemKeys, GetModelValue, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -164,6 +167,11 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         searchTerm?: string;
     }) & {
         onChange?: ((event: Event) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: import("reka-ui").AcceptableValue;
+        } | undefined) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Mod extends {
             number: true;
         } ? (Mod extends {
@@ -185,20 +193,18 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => any) | undefined;
-        onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: import("reka-ui").AcceptableValue;
-        } | undefined) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
-        onLeave?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ListboxSlots<T>;
-    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+    emit: (((evt: "change", event: Event) => void) & ((evt: "leave", event: Event) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => void) & ((evt: "update:modelValue", value: Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;
@@ -218,12 +224,9 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         nullable: true;
     } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
         nullable: true;
-    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "highlight", payload: {
-        ref: HTMLElement;
-        value: import("reka-ui").AcceptableValue;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void)) & ((event: "update:searchTerm", value: 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/Main.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("main", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.main || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.main || {} }));
 </script>
 
 <template>

package/dist/runtime/components/Marquee.vue

@@ -21,7 +21,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("marquee", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.marquee || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.marquee || {} })({
   pauseOnHover: props.pauseOnHover,
   orientation: props.orientation,
   reverse: props.reverse,