@nuxt/ui 4.4.0 → 4.5.1

package/dist/runtime/components/ChatMessages.vue

@@ -8,6 +8,7 @@ import { Presence } from "reka-ui";
 import { defu } from "defu";
 import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UChatMessage from "./ChatMessage.vue";
@@ -24,11 +25,12 @@ const props = defineProps({
   compact: { type: Boolean, required: false },
   spacingOffset: { type: Number, required: false, default: 0 },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessages", props);
 const userProps = toRef(() => defu(props.user, { side: "right", variant: "soft" }));
 const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "naked" }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
@@ -157,13 +159,16 @@ onMounted(() => {
     return;
   }
   lastScrollTop.value = parent.value.scrollTop;
-  setTimeout(() => {
-    if (props.shouldScrollToBottom) {
+  if (props.shouldScrollToBottom) {
+    scrollToBottom(false);
+    setTimeout(() => {
       scrollToBottom(false);
-    } else {
+    }, 100);
+  } else {
+    nextTick(() => {
       checkScrollPosition();
-    }
-  }, 100);
+    });
+  }
   useEventListener(parent, "scroll", checkScrollPosition);
   useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
 });
@@ -174,14 +179,14 @@ onMounted(() => {
     ref="el"
     :data-status="status"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
       <UChatMessage
         v-for="message in messages"
         :key="message.id"
-        v-bind="{ ...message, ...message.role === 'user' ? userProps : assistantProps }"
+        v-bind="{ ...message.role === 'user' ? userProps : assistantProps, ...message }"
         :ref="(el) => registerMessageRef(message.id, el)"
         :compact="compact"
       >
@@ -200,7 +205,7 @@ onMounted(() => {
     >
       <template #content>
         <slot name="indicator" :ui="ui">
-          <div data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+          <div data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
             <span />
             <span />
             <span />
@@ -210,7 +215,7 @@ onMounted(() => {
     </UChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
         <slot name="viewport" :ui="ui" :on-click="onAutoScrollClick">
           <UButton
             v-if="autoScroll"
@@ -219,7 +224,7 @@ onMounted(() => {
             variant="outline"
             v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
             data-slot="autoScroll"
-            :class="ui.autoScroll({ class: props.ui?.autoScroll })"
+            :class="ui.autoScroll({ class: uiProp?.autoScroll })"
             @click="onAutoScrollClick"
           />
         </slot>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
@@ -53,20 +54,20 @@ export interface ChatMessagesProps {
     class?: any;
     ui?: ChatMessages['slots'];
 }
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = ChatMessageSlots[K] extends (props: infer P) => any ? (props: P & {
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = Required<ChatMessageSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
     message: UIMessage;
-}) => any : ChatMessageSlots[K];
+}) => VNode[] : Required<ChatMessageSlots>[K];
 export type ChatMessagesSlots = {
-    [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K>;
+    [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>;
 } & {
-    default(props?: {}): any;
-    indicator(props: {
+    default?(props?: {}): VNode[];
+    indicator?(props: {
         ui: ChatMessages['ui'];
-    }): any;
-    viewport(props: {
+    }): VNode[];
+    viewport?(props: {
         ui: ChatMessages['ui'];
         onClick: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-palette';
 import type { ComponentConfig } from '../types/tv';
@@ -12,8 +13,8 @@ export interface ChatPaletteProps {
     ui?: ChatPalette['slots'];
 }
 export interface ChatPaletteSlots {
-    default(props?: {}): any;
-    prompt(props?: {}): any;
+    default?(props?: {}): VNode[];
+    prompt?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPalette.vue

@@ -6,26 +6,28 @@ import theme from "#build/ui/chat-palette";
 import { computed } from "vue";
 import { Primitive, Slot } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPalette", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="content" :class="ui.content({ class: props.ui?.content })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="content" :class="ui.content({ class: uiProp?.content })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="ui.prompt({ class: props.ui?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="ui.prompt({ class: uiProp?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-palette';
 import type { ComponentConfig } from '../types/tv';
@@ -12,8 +13,8 @@ export interface ChatPaletteProps {
     ui?: ChatPalette['slots'];
 }
 export interface ChatPaletteSlots {
-    default(props?: {}): any;
-    prompt(props?: {}): any;
+    default?(props?: {}): VNode[];
+    prompt?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
@@ -27,8 +28,8 @@ export interface ChatPromptEmits {
     close: [event: Event];
 }
 export interface ChatPromptSlots extends TextareaSlots {
-    header(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPrompt.vue

@@ -7,6 +7,7 @@ import { computed, toRef, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -18,7 +19,7 @@ const props = defineProps({
   variant: { type: null, required: false },
   error: { type: Error, required: false },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   rows: { type: Number, required: false, default: 1 },
   autofocus: { type: Boolean, required: false, default: true },
   autofocusDelay: { type: Number, required: false },
@@ -36,6 +37,7 @@ const slots = defineSlots();
 const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPrompt", props);
 const textareaProps = useForwardProps(reactivePick(props, "rows", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "maxrows", "icon", "avatar", "loading", "loadingIcon"));
 const getProxySlots = () => omit(slots, ["header", "footer"]);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
@@ -58,8 +60,8 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
@@ -69,10 +71,11 @@ defineExpose({
       :placeholder="placeholder || t('chatPrompt.placeholder')"
       :disabled="Boolean(error) || disabled"
       variant="none"
+      fixed
       v-bind="{ ...textareaProps, ...$attrs }"
-      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), uiProp)"
       data-slot="body"
-      :class="ui.body({ class: props.ui?.body })"
+      :class="ui.body({ class: uiProp?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
     >
@@ -81,7 +84,7 @@ defineExpose({
       </template>
     </UTextarea>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
@@ -27,8 +28,8 @@ export interface ChatPromptEmits {
     close: [event: Event];
 }
 export interface ChatPromptSlots extends TextareaSlots {
-    header(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -26,7 +27,7 @@ const props = defineProps({
   errorIcon: { type: null, required: false },
   errorColor: { type: null, required: false, default: "error" },
   errorVariant: { type: null, required: false, default: "soft" },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   class: { type: null, required: false },
   label: { type: String, required: false },
   activeColor: { type: null, required: false },
@@ -53,6 +54,7 @@ const emits = defineEmits(["stop", "reload"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPromptSubmit", props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "variant", "status", "streamingIcon", "streamingColor", "streamingVariant", "submittedIcon", "submittedColor", "submittedVariant", "errorIcon", "errorColor", "errorVariant", "class", "ui"));
 const statusButtonProps = computed(() => ({
   ready: {
@@ -97,8 +99,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSub
   'aria-label': t('chatPromptSubmit.label'),
   ...$attrs
 }"
-    :class="ui.base({ class: [props.ui?.base, props.class] })"
-    :ui="transformUI(ui, props.ui)"
+    :class="ui.base({ class: [uiProp?.base, props.class] })"
+    :ui="transformUI(ui, uiProp)"
   >
     <template v-for="(_, name) in slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />

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

@@ -1,4 +1,5 @@
 import type { CheckboxRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
 import type { IconProps } from '../types';
@@ -49,12 +50,12 @@ export type CheckboxEmits = {
     change: [event: Event];
 };
 export interface CheckboxSlots {
-    label(props: {
-        label?: string;
-    }): any;
-    description(props: {
-        description?: string;
-    }): any;
+    label?(props: {
+        label: string | undefined;
+    }): VNode[];
+    description?(props: {
+        description: string | undefined;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Checkbox.vue

@@ -3,10 +3,11 @@ import theme from "#build/ui/checkbox";
 </script>
 
 <script setup>
-import { computed, useId } from "vue";
+import { computed, useAttrs, useId } from "vue";
 import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -22,7 +23,7 @@ const props = defineProps({
   icon: { type: null, required: false },
   indeterminateIcon: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -34,9 +35,15 @@ const slots = defineSlots();
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: [Boolean, String], ...{ default: void 0 } });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("checkbox", props);
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
+const attrs = useAttrs();
+const forwardedAttrs = computed(() => {
+  const { "data-state": _, ...rest } = attrs;
+  return rest;
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} })({
   size: size.value,
   color: color.value,
@@ -54,34 +61,34 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!variant || variant === 'list' ? as : Label" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+  <Primitive :as="!variant || variant === 'list' ? as : Label" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <CheckboxRoot
         :id="id"
-        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"
         data-slot="base"
-        :class="ui.base({ class: props.ui?.base })"
+        :class="ui.base({ class: uiProp?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
-            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
-            <UIcon v-else :name="icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
+            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+            <UIcon v-else :name="icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+      <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </component>
-      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

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

@@ -1,4 +1,5 @@
 import type { CheckboxRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
 import type { IconProps } from '../types';
@@ -49,12 +50,12 @@ export type CheckboxEmits = {
     change: [event: Event];
 };
 export interface CheckboxSlots {
-    label(props: {
-        label?: string;
-    }): any;
-    description(props: {
-        description?: string;
-    }): any;
+    label?(props: {
+        label: string | undefined;
+    }): VNode[];
+    description?(props: {
+        description: string | undefined;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,8 +1,9 @@
 import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps } from '../types';
-import type { AcceptableValue, GetItemKeys, GetModelValue } from '../types/utils';
+import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
 export type CheckboxGroupValue = AcceptableValue;
@@ -58,32 +59,32 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
     class?: any;
     ui?: CheckboxGroup['slots'] & CheckboxProps['ui'];
 }
-export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> = Omit<CheckboxGroupRootEmits, 'update:modelValue'> & {
     change: [event: Event];
-};
+} & GetModelValueEmits<T, VK, true>;
 type SlotProps<T extends CheckboxGroupItem> = (props: {
     item: T & {
         id: string;
     };
-}) => any;
+}) => VNode[];
 export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> {
-    legend(props?: {}): any;
-    label: SlotProps<T[number]>;
-    description: SlotProps<T[number]>;
+    legend?(props?: {}): VNode[];
+    label?: SlotProps<T[number]>;
+    description?: SlotProps<T[number]>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
+    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>;
 };

package/dist/runtime/components/CheckboxGroup.vue

@@ -7,6 +7,7 @@ import { computed, useId } from "vue";
 import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { get, omit } from "../utils";
 import { tv } from "../utils/tv";
@@ -24,7 +25,7 @@ const props = defineProps({
   variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   loop: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -33,9 +34,10 @@ const props = defineProps({
   indicator: { type: null, required: false },
   icon: { type: null, required: false }
 });
-const emits = defineEmits(["update:modelValue", "change"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("checkboxGroup", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
 const checkboxProps = useForwardProps(reactivePick(props, "variant", "indicator", "icon"));
 const getProxySlots = () => omit(slots, ["legend"]);
@@ -96,11 +98,11 @@ function onUpdate(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: uiProp?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: uiProp?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
@@ -114,9 +116,9 @@ function onUpdate(value) {
         :size="size"
         :name="name"
         :disabled="item.disabled || disabled"
-        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
+        :ui="{ ...uiProp ? omit(uiProp, ['root']) : void 0, ...item.ui || {} }"
         data-slot="item"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
+        :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>
           <slot :name="name" :item="item" />

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

@@ -1,8 +1,9 @@
 import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps } from '../types';
-import type { AcceptableValue, GetItemKeys, GetModelValue } from '../types/utils';
+import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
 export type CheckboxGroupValue = AcceptableValue;
@@ -58,32 +59,32 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
     class?: any;
     ui?: CheckboxGroup['slots'] & CheckboxProps['ui'];
 }
-export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> = Omit<CheckboxGroupRootEmits, 'update:modelValue'> & {
     change: [event: Event];
-};
+} & GetModelValueEmits<T, VK, true>;
 type SlotProps<T extends CheckboxGroupItem> = (props: {
     item: T & {
         id: string;
     };
-}) => any;
+}) => VNode[];
 export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> {
-    legend(props?: {}): any;
-    label: SlotProps<T[number]>;
-    description: SlotProps<T[number]>;
+    legend?(props?: {}): VNode[];
+    label?: SlotProps<T[number]>;
+    description?: SlotProps<T[number]>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
+    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>;
 };

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chip';
 import type { ComponentConfig } from '../types/tv';
@@ -34,8 +35,8 @@ export interface ChipEmits {
     'update:show': [value: boolean];
 }
 export interface ChipSlots {
-    default(props?: {}): any;
-    content(props?: {}): any;
+    default?(props?: {}): VNode[];
+    content?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;