@eslamdevui/ui 4.1.1-rc.2 → 4.3.0

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps } from '../types';
+import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 export interface ChatMessagesProps {
@@ -22,7 +22,7 @@ export interface ChatMessagesProps {
      * `{ size: 'md', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
      * @defaultValue true
      */
-    autoScroll?: boolean | Partial<ButtonProps>;
+    autoScroll?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the auto scroll button.
      * @defaultValue appConfig.ui.icons.arrowDown
@@ -68,14 +68,14 @@ export type ChatMessagesSlots = {
         onClick: () => void;
     }): any;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
-    autoScroll: boolean | Partial<ButtonProps>;
+    autoScroll: boolean | Omit<ButtonProps, LinkPropsKeys>;
     shouldAutoScroll: boolean;
     shouldScrollToBottom: boolean;
     spacingOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -15,9 +15,9 @@ export interface ChatPaletteSlots {
     default(props?: {}): any;
     prompt(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ChatPalette.vue

@@ -18,14 +18,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette |
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.content({ class: props.ui?.content })">
+  <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 })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" :class="ui.prompt({ class: props.ui?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="ui.prompt({ class: props.ui?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>

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

@@ -15,9 +15,9 @@ export interface ChatPaletteSlots {
     default(props?: {}): any;
     prompt(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -3,7 +3,7 @@ import theme from '#build/ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
-export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'form'
@@ -14,9 +14,6 @@ export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps,
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
-    autofocus?: TextareaProps['autofocus'];
-    autoresize?: TextareaProps['autoresize'];
-    rows?: TextareaProps['rows'];
     /**
      * @defaultValue 'outline'
      */
@@ -33,10 +30,12 @@ export interface ChatPromptSlots extends TextareaSlots {
     header(props?: {}): any;
     footer(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
     modelValue?: string;
 }, {
-    textareaRef: any;
+    textareaRef: Readonly<import("vue").Ref<any, any>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (event: Event) => any;
     submit: (event: Event) => any;
@@ -50,11 +49,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
 }>, {
     as: any;
     autofocus: boolean;
-    autoresize: boolean;
     rows: number;
+    autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ChatPrompt.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/chat-prompt";
 </script>
 
 <script setup>
-import { computed, useTemplateRef } from "vue";
+import { computed, toRef, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -15,24 +15,33 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "form" },
   placeholder: { type: String, required: false },
-  autofocus: { type: Boolean, required: false, default: true },
-  autoresize: { type: Boolean, required: false, default: true },
-  rows: { type: Number, required: false, default: 1 },
   variant: { type: null, required: false },
   error: { type: Error, required: false },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false }
+  ui: { type: void 0, required: false },
+  rows: { type: Number, required: false, default: 1 },
+  autofocus: { type: Boolean, required: false, default: true },
+  autofocusDelay: { type: Number, required: false },
+  autoresize: { type: Boolean, required: false, default: true },
+  autoresizeDelay: { type: Number, required: false },
+  maxrows: { type: Number, required: false },
+  icon: { type: null, required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  disabled: { type: Boolean, required: false }
 });
 const emits = defineEmits(["submit", "close"]);
 const slots = defineSlots();
 const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const textareaProps = useForwardProps(reactivePick(props, "autofocus", "autoresize", "rows"));
+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 || {} })({
   variant: props.variant
 }));
+const textareaRef = useTemplateRef("textareaRef");
 function submit(e) {
   if (model.value.trim() === "") {
     return;
@@ -40,29 +49,29 @@ function submit(e) {
   emits("submit", e);
 }
 function blur(e) {
-  textarea.value?.textareaRef?.blur();
+  textareaRef.value?.textareaRef?.blur();
   emits("close", e);
 }
-const textarea = useTemplateRef("textarea");
 defineExpose({
-  textareaRef: textarea.value?.textareaRef
+  textareaRef: toRef(() => textareaRef.value?.textareaRef)
 });
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+  <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 })">
       <slot name="header" />
     </div>
 
     <UTextarea
-      ref="textarea"
+      ref="textareaRef"
       v-model="model"
       :placeholder="placeholder || t('chatPrompt.placeholder')"
-      :disabled="Boolean(error)"
+      :disabled="Boolean(error) || disabled"
       variant="none"
       v-bind="{ ...textareaProps, ...$attrs }"
       :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+      data-slot="body"
       :class="ui.body({ class: props.ui?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
@@ -72,7 +81,7 @@ defineExpose({
       </template>
     </UTextarea>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -3,7 +3,7 @@ import theme from '#build/ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
-export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'form'
@@ -14,9 +14,6 @@ export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps,
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
-    autofocus?: TextareaProps['autofocus'];
-    autoresize?: TextareaProps['autoresize'];
-    rows?: TextareaProps['rows'];
     /**
      * @defaultValue 'outline'
      */
@@ -33,10 +30,12 @@ export interface ChatPromptSlots extends TextareaSlots {
     header(props?: {}): any;
     footer(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
     modelValue?: string;
 }, {
-    textareaRef: any;
+    textareaRef: Readonly<import("vue").Ref<any, any>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (event: Event) => any;
     submit: (event: Event) => any;
@@ -50,11 +49,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
 }>, {
     as: any;
     autofocus: boolean;
-    autoresize: boolean;
     rows: number;
+    autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,10 +1,10 @@
 import type { ChatStatus } from 'ai';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt-submit';
-import type { ButtonProps, ButtonSlots, IconProps } from '../types';
+import type { ButtonProps, ButtonSlots, IconProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
-export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
+export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
     status?: ChatStatus;
     /**
      * The icon displayed in the button when the status is `ready`.
@@ -74,15 +74,17 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
     class?: any;
 }
 export interface ChatPromptSubmitEmits {
-    stop: [];
-    reload: [];
+    stop: [event: MouseEvent];
+    reload: [event: MouseEvent];
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    stop: () => any;
-    reload: () => any;
+    stop: (event: MouseEvent) => any;
+    reload: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
-    onStop?: (() => any) | undefined;
-    onReload?: (() => any) | undefined;
+    onStop?: ((event: MouseEvent) => any) | undefined;
+    onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
     streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
@@ -92,8 +94,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -4,33 +4,57 @@ import theme from "#build/ui/chat-prompt-submit";
 
 <script setup>
 import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   status: { type: String, required: false, default: "ready" },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
-  streamingIcon: { type: [String, Object], required: false },
+  streamingIcon: { type: null, required: false },
   streamingColor: { type: null, required: false, default: "neutral" },
   streamingVariant: { type: null, required: false, default: "subtle" },
-  submittedIcon: { type: [String, Object], required: false },
+  submittedIcon: { type: null, required: false },
   submittedColor: { type: null, required: false, default: "neutral" },
   submittedVariant: { type: null, required: false, default: "subtle" },
-  errorIcon: { type: [String, Object], required: false },
+  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 },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  activeVariant: { type: null, required: false },
+  size: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: null, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  exactActiveClass: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false }
 });
 const emits = defineEmits(["stop", "reload"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const buttonProps = computed(() => ({
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "variant", "status", "streamingIcon", "streamingColor", "streamingVariant", "submittedIcon", "submittedColor", "submittedVariant", "errorIcon", "errorColor", "errorVariant", "class", "ui"));
+const statusButtonProps = computed(() => ({
   ready: {
     icon: props.icon || appConfig.ui.icons.arrowUp,
     color: props.color,
@@ -41,24 +65,24 @@ const buttonProps = computed(() => ({
     icon: props.submittedIcon || appConfig.ui.icons.stop,
     color: props.submittedColor,
     variant: props.submittedVariant,
-    onClick() {
-      emits("stop");
+    onClick(e) {
+      emits("stop", e);
     }
   },
   streaming: {
     icon: props.streamingIcon || appConfig.ui.icons.stop,
     color: props.streamingColor,
     variant: props.streamingVariant,
-    onClick() {
-      emits("stop");
+    onClick(e) {
+      emits("stop", e);
     }
   },
   error: {
     icon: props.errorIcon || appConfig.ui.icons.reload,
     color: props.errorColor,
     variant: props.errorVariant,
-    onClick() {
-      emits("reload");
+    onClick(e) {
+      emits("reload", e);
     }
   }
 })[props.status]);
@@ -67,8 +91,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSub
 
 <template>
   <UButton
-    :aria-label="t('chatPromptSubmit.label')"
-    v-bind="buttonProps"
+    v-bind="{
+  ...buttonProps,
+  ...statusButtonProps,
+  'aria-label': t('chatPromptSubmit.label'),
+  ...$attrs
+}"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     :ui="transformUI(ui, props.ui)"
   >

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

@@ -1,10 +1,10 @@
 import type { ChatStatus } from 'ai';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt-submit';
-import type { ButtonProps, ButtonSlots, IconProps } from '../types';
+import type { ButtonProps, ButtonSlots, IconProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
-export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
+export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
     status?: ChatStatus;
     /**
      * The icon displayed in the button when the status is `ready`.
@@ -74,15 +74,17 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
     class?: any;
 }
 export interface ChatPromptSubmitEmits {
-    stop: [];
-    reload: [];
+    stop: [event: MouseEvent];
+    reload: [event: MouseEvent];
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    stop: () => any;
-    reload: () => any;
+    stop: (event: MouseEvent) => any;
+    reload: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
-    onStop?: (() => any) | undefined;
-    onReload?: (() => any) | undefined;
+    onStop?: ((event: MouseEvent) => any) | undefined;
+    onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
     streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
@@ -92,8 +94,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -2,9 +2,10 @@ import type { CheckboxRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
 import type { IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
-export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -55,6 +56,8 @@ export interface CheckboxSlots {
         description?: string;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
     modelValue?: boolean | "indeterminate";
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -66,8 +69,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Checkb
     onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Checkbox.vue

@@ -19,8 +19,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   indicator: { type: null, required: false },
-  icon: { type: [String, Object], required: false },
-  indeterminateIcon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
+  indeterminateIcon: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   disabled: { type: Boolean, required: false },
@@ -54,33 +54,34 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!variant || variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
+  <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 })">
       <CheckboxRoot
         :id="id"
         v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"
+        data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
-            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
-            <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
+          <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>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+    <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 })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </component>
-      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

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

@@ -2,9 +2,10 @@ import type { CheckboxRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
 import type { IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
-export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -55,6 +56,8 @@ export interface CheckboxSlots {
         description?: string;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
     modelValue?: boolean | "indeterminate";
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -66,8 +69,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Checkb
     onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -71,8 +71,12 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void)>>> & import("vue").PublicProps;
+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: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
@@ -80,8 +84,8 @@ declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKe
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};